Php Archives - Copier coller

Un formulaire en php

copier coller — Mon, 20 Jul 2015 19:05:37 +0000

Un exemple de formulaire en php

Tiré d’un template html, voici un formulaire html/css php hyper simple mais fonctionnel, épuré et passe partout !

Le rendu:

Le code du formulaire

Voici le html, codé avec bootstrap:

Le code css

Le css est assez conséquent pour un ‘simple’ formulaire, on enlève les bordures, on rajoute des animations css pour un meilleur rendu visuel


input,
textarea,
select {
	background: #fff;
	outline: none;
	-webkit-appearance: none;
	color: #333;
	border: 0px solid #fff;
	padding: 11px 25px;
	margin: 0px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.42857143;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	height: auto;
	-webkit-border-radius: none;
	-moz-border-radius: none;
	border-radius: none;
	margin-bottom: 20px;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	-webkit-transition: background-color .3s ease, border .3s ease, color .3s ease;
	   -moz-transition: background-color .3s ease, border .3s ease, color .3s ease;
	    -ms-transition: background-color .3s ease, border .3s ease, color .3s ease;
	     -o-transition: background-color .3s ease, border .3s ease, color .3s ease;
	        transition: background-color .3s ease, border .3s ease, color .3s ease;
}

textarea {
	width: 100%;
	padding: 10px 20px;
	resize: both;
	margin-top: 0px;
	font-style: italic;
	height: 150px;
}
	
input:hover,
textarea:hover,
select:hover {
	color: #333;
}
	
input:focus,
textarea:focus,
select:focus {
	color: #333;
}

input[type="submit"],
button {
	width: auto;
	font-style: normal;
	font-weight: 300;
	background: #fff;
	color: #333;
	cursor: pointer;
	border: 0px solid #fff;
	padding: 12px 20px;
	letter-spacing: 1px;
}

input[type="submit"]:hover,
button:hover {
	color: #333;
}

select, option {
	cursor: pointer;
}

input[type="checkbox"] {
	-webkit-appearance: checkbox;
}

input[type="radio"] {
	-webkit-appearance: radio;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #333;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #333;
}

input.placeholder,
textarea.placeholder {
	color: #333;
}

input[placeholder] {
	text-overflow: ellipsis;
}

::-moz-placeholder {
	text-overflow: ellipsis;
} /* firefox 19+ */

input:-moz-placeholder {
	text-overflow: ellipsis;
}

.form {
	position: relative;
	overflow: hidden;
}

.form-container {
	position: relative;
	overflow: hidden;
}

.form-note {
	color: #333;
	font-style: italic;
	margin: 24px 0;
}

.success-message {
	padding-top: 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 300;
	display: none;
}

.error-message {
	padding-top: 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 300;
	display: none;
}

.contact-form input[type="text"], .contact-form input[type="email"] {
	width: 100%;
}

.contact-form input, .contact-form textarea, .contact-form select {
	background: #fff;
	outline: none;
	-webkit-appearance: none;
	color: #333;
	border-bottom: 2px solid #999;
	padding: 16px 20px;
	margin: 0px;
	font-style: italic;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	height: auto;
	margin-bottom: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: background-color .3s ease, border .3s ease, color .3s ease;
	-moz-transition: background-color .3s ease, border .3s ease, color .3s ease;
	-ms-transition: background-color .3s ease, border .3s ease, color .3s ease;
	-o-transition: background-color .3s ease, border .3s ease, color .3s ease;
	transition: background-color .3s ease, border .3s ease, color .3s ease;
	position: relative; 
}

.contact-form textarea {
	margin-bottom: 18px;
}

.contact-form .input-error {
	border-color: #ed5555;
}


.contact-form .response-message {
	margin: 20px 0 30px 0;
	font-size: 18px;
	font-weight: 300;
	color: #333;
}

/* WebKit browsers */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { 
    color: #333;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #333;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #333;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color: #333;
}

Je place ici le css par défaut, à soi ensuite de le personnaliser.

Définir ses messages d’erreur en php

Ensuite vient le fichier php externe, dans lequel on va tester nos variables avant l’envoi de l’ email. On définit ici les différents messages d’erreur.




$name = stripcslashes($_POST['name']);
$email = stripcslashes($_POST['email']);
$subject = stripcslashes($_POST['subject']);
$message = stripcslashes($_POST['message']);



$mailto = votremail@votreemail.com'; 
$subject = $subject; 

$error_message = 'Une erreur est survenue'; 
$success_message = 'Message envoyé'; 




$message = "Name: $name\r\nEmail: $email\r\nMessage: $message";

$headers = "From: $name <$email>" . "\r\n" . "Reply-To: $email" . "\r\n" . "X-Mailer: PHP/" . phpversion();

function validateEmail($email) {
   if(preg_match("/^[_\.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,6}$/i", $email))
	  return true;
   else
	  return false;
}

if((strlen($name) < 1 ) || (strlen($email) < 1 ) || (strlen($message) < 1 ) || validateEmail($email) == FALSE ) {

	echo($error_message);

} else {

	if( mail($mailto, $subject, $message, $headers) ) {
		
		echo($success_message);

	} else {

		echo($error_message);

	}

}

On a ici le strict minimum, mais c’est plutôt simple rapide et efficace.

Les vérifications du formulaires en js

Enfin, la partie js .On reprend les mêmes vérifications mais cette fois pour le front : on affiche les messages d’erreur ou d’envoi de message:

// CONTACT FORM
	function contactForm() {

		var scrollElement = $('html,body');
		var	contactForm = $('.contact-form');
		var	form_msg_timeout;

		contactForm.on( 'submit', function() {

			var requiredFields = $(this).find('.required');
			var	formFields = $(this).find('input, textarea');
			var	formData = contactForm.serialize();
			var	formAction = $(this).attr('action');
			var	formSubmitMessage = $('.response-message');

			requiredFields.each(function() {

				if( $(this).val() == "" ) {
					$(this).addClass('input-error');
				} else {
					$(this).removeClass('input-error');
				}

			});

			function validateEmail(email) { 
				var exp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
				return exp.test(email);
			}

			var emailField = $('.contact-form-email');

			if( !validateEmail(emailField.val()) ) {
				emailField.addClass('input-error');
			}

			if ($('.contact-form :input').hasClass('input-error')) {
				return false;
			} else {
			
				clearTimeout(form_msg_timeout);
				
				$.post(formAction, formData, function(data) {
					formSubmitMessage.text(data);

					formFields.val('');

					form_msg_timeout = setTimeout(function() {
						formSubmitMessage.slideUp();
					}, 5000);
				});

			}

			return false;

		});

	};

The post Un formulaire en php appeared first on Copier coller.

Un crud avec espace de connexion en php

copier coller — Sun, 12 Apr 2015 14:10:12 +0000

Un crud avec espace de connexion en php

Pour faire suite au tuto ‘CRUD’ , on va tenter ici de l’améliorer en lui rajoutant un espace de connexion.Vu que c’est un exercice, qu’il n’y a ni admin ni user, on va construire un mini scénario : on a les mêmes pages que dans le précédent tutoriel :

index.php,
add.php,
delete.php,
update.php,
edit.php,
database.php

Maintenant, en tapant sur l’index, on va faire en sorte de tomber sur une interface de connexion; et c’est en se connectant seulement qu’on pourra accéder au reste des pages et donc à l’appli CRUD.

L’arborescence

On va donc rajouter deux pages à notre application: login et logout

La base de donnée

On rajoute aussi deux champs dans notre base login et password

Login.php

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
   
require 'database.php';
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_POST)) {
    $loginError = '';//on initialise nos messages d' erreurs
    $passwordError = '';
    $password = htmlentities(trim(sha1($_POST['password']))); //on securise les données
    $login = htmlentities(trim($_POST['login']));

    // on vérifie les input
    $valid = true;
    if (empty($login)) {
        $loginError = 'Please enter Login';
        $valid = false;
    }
    if (empty($password)) {
        $passwordError = 'Please enter password';
        $valid = false;
    }


    if ($valid) { //si c'est bon, on connecte à la base
        $pdo = Database :: connect();
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $sql = "SELECT * FROM user WHERE login= ? AND password=? ";
        $q = $pdo->prepare($sql);
        $q->execute(array($login, $password));
        $data = $q->fetch(PDO::FETCH_ASSOC);
      if ($data['password'] == $password && $data['login'] == $login ) // Acces OK ! s'il y a des data et qu'elle correspondent
	{
            session_start(); //on ouvre la session
	    $_SESSION['login'] = $data['login'];//on assigne nos valeurs
	    $_SESSION['password'] = $data['password'];
	  
	    echo 'Bienvenue '.$data['login'].', 
			vous êtes maintenant connecté!

			Cliquez ici 
			pour revenir à la page d accueil
';
            header('location:index.php'); //et on renvoie vers l'index
	}
        
        
	else // Acces refusé on reste sur la page!
	{
	    echo 'Une erreur s\'est produite 
	    pendant votre identification.
 Le mot de passe ou le pseudo 
            entré n\'est pas correcte.
Cliquez ici'; 
	   
	    
	}
  
 
    }

    Database::disconnect();
}
?>


    
        
        Crud
        
        

    
    
        

            
                
                    Login
                    
                        
                        
                            
                        
                    

                

                
                    Password

J’ai volontairement commenté le code pour plus de clarté.

On fait appel à la base
on initialise nos messages d’ erreurs
on sécurise les données
On vérifie les input
Si c’est bon on se connecte à la base de donnée.
Si le login et password inséré correspondent à un login et mot de passe trouvé en base ( $data[‘login’] ), alors on ouvre une session avec les valeurs assignées
On affiche un message de succès et on redirige vers l’index

Logout.php

Dans l’index, on va par la suite rajouter un bouton déconnexion qui renverra vers la page logout.php. On place notre lien juste en dessous du lien pour rajouter un user.


            
                Crud en Php

            

            
                
                    Ajouter un user
                    Deconnexion

Logout.php contient juste la fonction de déconnexion avec un session_destroy(); on détruit la session utilisateur et on redirige vers la page de connexion

session_start();
session_destroy();
header('location:login.php');
exit;
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
?>

On a donc la nos deux fichiers pour la connexion-déconnection. Il va maintenant falloir intervenir dans les autres fichiers pour dire « si tu n’es pas connecté, retourne au login’. Notre CRUD devient donc un véritable backoffice dont l’accès n’est possible qu’avec un identifiant et un mot de passe défini.

Définir la session utilisateur

En début de chaque fichier (add, update, delete, edit et index) on va placer ce bout de code qui vérifie la session utilisateur. S’il y a une session, ok et on affiche un message, sinon renvoie vers le login. Ici je vérifie le $_SESSION[‘login’], on pourrait le faire avec l’ID. Le message affiché sur chaque page est la juste pour montrer qu’on est bien connecté.

  session_start();
if (isset($_SESSION['login']))
{
    echo 'Bonjour ' . $_SESSION['login'];
}else{
    header('location:login.php');
}
?>

Voila, on a un crud avec une partie login!!

Les limites et améliorations possibles

On s’arrête ici, et on remarque déjà les limites de l’exercice. Notre base contient bien deux nouveaux champs login et password. Mais je n’ai pas rajouté les champs dans mes tableaux html, ni cherché à les récupérer pour les afficher. J’ai crée un user en dur avec un mot de passe(en sha1 dans phpMyAdmin) et un login, et donc seul ce user peut rentrer dans l’appli. Une fois dans l’appli, je ne peux pas ici rajouter de login et mot de passe pour mes users, puisque les input ne sont pas crées .On aura donc des colonnes vides dans notre base.

On peut donc imaginer la suite, créer dans tous les fichiers les champs additionnels login et password, pour pouvoir les rajouter, supprimer, modifier ou lire. Dans ce cas, tous les users auraient un login et password pour accéder à l’appli. Il faudrait donc imaginer ensuite toute la partie front office pour l’user et garder le crud en backoffice pour l’administrateur, et définir des droits pour les accès.

The post Un crud avec espace de connexion en php appeared first on Copier coller.

Un crud en php

copier coller — Sun, 12 Apr 2015 13:18:45 +0000

Un crud en PHP

Aujourd’hui on va voir comment faire un crud en php. Le crud est le diminutif pour designer les opérations : create, read, update, delete, qui sont les opérations courantes d’interactions entre un site (admin) et sa base de données.

Les fondamentaux

Tout administrateur doit pouvoir supprimer rajouter, mettre à jour des utilisateurs ou des produits sur son site. Ces quelques pages de code peuvent donc servir de base à un début de backoffice. On verra dans un prochain tuto pour le système de connexion. Pour le moment, on va principalement se focaliser sur les opérations nécessaires pour interagir avec la base de donnée.

Nous allons donc créer une base de donnée.
Pour le rendu visuel des pages, on va importer bootstrap et inclure les dossiers à la racine de notre petit projet.
On va ensuite créer un fichier contenant les informations de connexion à la base, puis 4 fichiers pour nos opérations CRUD.

L’index:

La page read

La page édition

Et au clic sur ‘delete’ une page de confirmation:

1-La base de donnée

Dans PhpMyAdmin, je crée une base, je la nomme au hasard testphp. Dedans, en prévision d’un formulaire d’ajout bien rempli, je crée tous mes champs :

Normalement pour un petit crud on met juste un name et un mail, mais ici je tenais à montrer le maximum d’exemple d’input (mail, select, radio, checkbox) pour voir justement comment les traiter.

Erratum: comme me le signale un lecteur en commentaire plus bas, le numéro de tel peut être mis de préférence dans un champ texte, soit de type « varchar » dan la base de donnée et non « int « !

2- L’Arborescence

Une fois qu’on a la base, on peut créer notre projet sur notre serveur (wamp/www). On crée un dossier que l’on nomme comme on veut (je le nomme crud ici pour l’exemple). A l’intérieur on y place les trois fichiers bootstrap js, css et img, comme ceci:

Dans ce dossier, pour prendre de l’avance, on va créer tous nos fichiers crud:

add.php
delete.php
edit.php
read.php
et index.php.

Contrairement à de nombreux tutos qui placent le code de connexion dans chaque fichier, ici on va placer le notre dans un fichier à part qu’on va appeler database.php, et qui contiendra uniquement le code de connexion à notre base testphp…c’est parti!!!

La connexion à la base de donnée

On commence donc par le fichier principal, database.php

getMessage()); 
        }
       }
       return self::$cont;
    }
     
    public static function disconnect()
    {
        self::$cont = null;
    }
}
?>

Ce fichier contient une classe qu’on va appeler « database » et qui contient les informations de connexion à notre base de donnée .On instancie l’objet PDO qui nous permet le lien à la base.
Reportez vous à la doc pour en savoir plus sur l’objet PDO.

Pour aller plus vite, et permettre à tous de beaux copier coller(: ) ) je vais lister les fichiers un à un.

index.php



    
        
        Crud en php
        
        	
        	
        " title="