Formulaire inscription en PHP / PDO

Je vous propose avec ce tutoriel la création d'un formulaire d'inscription en PHP / PDO

form pdo

Fonctionnalité du formulaire

Le formulaire se compose de 7 champs, d'un captcha avec refresh du code, une fonctionnalité en Ajax pour savoir si le pseudo est déjà pris, ainsi que la vérification de l'adresse mail et la vérification des mots de passe.

Cependant, ces fonctionnalités utilise du JavaScript, mais le formulaire a en cas du JavaScript désactivé, une vérification de tous les champs cotés serveur.
De plus, les champs (pseudo et email) on une vérification de l'existence en base de données.

Les champs possèdes aussi des attributs Html5, comme (required, placeholder et patterns).

Connexion PDO

Ci-dessous le code de connexion à la base de données en PDO. Créer un fichier que vous nommerez (cnxPDO.php) et mettez-y ce code uniquement.

        <?php
            $db_host = 'localhost';
            $db_name = ''; //nom db
            $db_user = ''; //nom utilisateur
            $db_pass = ''; //mot de passe
          // Connexion à la base
          try {
              $strConnection = 'mysql:host='.$db_host.';dbname='.$db_name; //Ligne 1
              $arrExtraParam= array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"); //Ligne 2
              $PDO = new PDO($strConnection, $db_user, $db_pass, $arrExtraParam); //Ligne 3; Instancie la connexion
              $PDO->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);//Ligne 4
          }
          catch(PDOException $e) {
              $msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
              die($msg);
          }
      ?>        
        

Code de vérification des champs

Ci-dessous le code de vérification des champs, ainsi que la vérification en base du pseudo et de l'adresse mail, et le code d'envoi de l'email.
Vous trouverez de nombreux commentaires dans ce code pour mieux comprendre.

<?php
define('MAIL_DESTINATAIRE','votre email');
define('MAIL_SUJET','Nouveau membre'); 
$class = 'empty';
if(isset($_POST['submitted'])){//1er if
			// Si l'utilisateur a bien entré un code
			if (!empty($_REQUEST['code'])) {
				// Conversion en majuscules
				$code = strtoupper($_REQUEST['code']);

				// Cryptage et comparaison avec la valeur stockée dans $_SESSION['captcha']
				if( md5($code) == $_SESSION['captcha'] ) {
					$class = 'correct'; // Le code est bon
				} else {
					$class = 'incorrect'; // Le code est erroné
					$captchaError = '<span class="error">le code de protection est invalide !</span>';
					$hasError = true;
				}
			} else {
				$class = 'incorrect'; // Aucun code
				$captchaError = '<span class="error">Aucun code saisie !</span>';
				$hasError = true;

			}

			if(trim($_POST['pseudo']) === '') {
			$pseudoError = '<span class="errors">Vous devez saisir un pseudo</span>';
			$hasError = true;
			} else {
			 $sql3 = $PDO->prepare("SELECT pseudo FROM free_membre2 WHERE pseudo = :pseudo");
			 $sql3->execute(array('pseudo' => $_POST["pseudo"]));
			 $count = $sql3->rowCount();
			  if($count > 0)
			  {
			   $pseudoError = '<span class="errors">Le Pseudo existe deja</span>';
			   $hasError = true;
			  }

				$pseudo = trim($_POST['pseudo']);
			}

			if(trim($_POST['nom']) === '') {
			$nomError = '<span class="errors">Vous devez saisir un nom</span>';
			$hasError = true;
			} else {
			$nom = trim(ucwords($_POST['nom']));
			}
			
			if(trim($_POST['prenom']) ===''){
			$prenomError = '<span class="errors">Vous devez saisir un prénom</span>';
			$hasError = true;
			} else {
			$prenom = trim($_POST['prenom']);
			}

			if(trim($_POST['password']) ===''){
			$mdpError = '<span class="errors">Vous devez saisir un mot de passe</span>';
			$hasError = true;
			} 
		
			else if (!preg_match("/^(?=.*[0-9]+.*)(?=.*[a-zA-Z]+.*)[0-9a-zA-Z]{6,}$/", $_POST['password'])){
			$passeError = '<span class="errors">Si vous avez une erreur, pointez l\'icône d\'aide, merci</span>';
			$hasError = true;
			}else {
			$mdp = trim($_POST['password']);
			}
			
			if(trim($_POST['confirm-password']) ===''){
			$passeError = '<span class="errors">Vous devez confirmer le mot de passe</span>';
			$hasError = true;
			}else if ($_POST["password"] != $_POST["confirm-password"]){
			$passeError = '<span class="errors">Votre mot de passe n\'a pas été correctement confirmé</span>';
			$hasError = true;
			} else {
			$passes = trim($_POST['confirm-password']);
			$passe = hash('sha256', $passes);
			}

			if(trim($_POST['email']) === '')  {
			$emailError = '<span class="errors">Vous devez saisir une adresse email</span>';
			$hasError = true;
			} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
			$emailError = '<span class="errors">Votre adresse e-mail n\'est pas valide</span>';
			$hasError = true;
			} else {
			  //connect a ta base
			  $sql2 = $PDO->prepare("SELECT email FROM free_membre2 WHERE email= :email ");
			  $sql2->execute(array('email' => $_POST['email']));
			  $count = $sql2->rowCount();
			  //si la requete ne retourne rien, cela signifie que le mail n'existe pas
			  if($count > 0)
			  {
				$emailError = '<span class="errors">Cet Email '.$_POST['email'].' existe deja</span>';
				$hasError = true;
			  }
			$email = trim($_POST['email']);
			}

			$statut = $_POST['statut'];
			$date_inscription = $_POST["date_inscription"];

		if(!isset($hasError)) {
		//tableau avec des place holders nommés impliquant les variables POST	
		$tabsql = array( 
			':pseudo' => $_POST["pseudo"],
			':nom' => $_POST["nom"],
			':prenom' => $_POST["prenom"],
			':passe' => $passe,
			':statut' => $_POST["statut"],
			':email' => $_POST["email"],
			':date_inscription' => $_POST["date_inscription"],
		);
		//on place notre requete dans un try cache pour mieux gerer les erreurs
		// il faut que la connexion est ceci PDO::ATTR_ERRMODE = PDO::ERRMODE_EXCEPTION
		try
		{
			//requete INSERT avec pour le VALUES les placeholder correspondant aux champs du formulaire
			$sql = "INSERT INTO free_membre2 (pseudo, nom, prenom, passe, statut, email, date_inscription) VALUES (:pseudo, :nom, :prenom, :passe, :statut, :email, :date_inscription)";
			$reqsql = $PDO->prepare($sql);// requete preparée
			$result = $reqsql->execute($tabsql);//execution de la requete avec en parametre la variable correspondant à l'array
		}
		catch(PDOException $e) {
		  $msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
		  die($msg);
	  }

		 // Envoi du mail d'activation
		$mail_entete = "MIME-Version: 1.0\r\n";
		$mail_entete .= "From: {$_POST['pseudo']} "
					 ."<{$_POST['email']}>\r\n";
		$mail_entete .= 'Reply-To: '.$email."\r\n";
		$mail_entete .= 'Content-Type: text/plain; charset="iso-8859-1"';
		$mail_entete .= "\r\nContent-Transfer-Encoding: 8bit\r\n";
		$mail_entete .= 'X-Mailer:PHP/' . phpversion()."\r\n";
		
		// préparation du corps du mail
		$mail_corps = "Bonjour, inscription d'un nouveau membre\n";
		$mail_corps .= "Nom du membre : $nom $prenom\n";
		$mail_corps .= "Pseudo du membre : $pseudo\n";
		$mail_corps .= "Email : $email\n\n\n";
		  
		// envoi du mail
		mail(MAIL_DESTINATAIRE,MAIL_SUJET,$mail_corps,$mail_entete);
		$emailSent = true;
		}
		
		session_unset();
	    session_destroy();

}//fin1er if
?>		
        

Partie Html

Ci-dessous le code Html des champs du formulaire

        
 <div id="inscriptionContainer">
                <?php if(isset($emailSent) && $emailSent == true) { ?>
                <p class="success">Inscription effectuée avec succès</p>
                <p class="sucess">Merci <span class="navy"><?php echo $pseudo;?></span> Votre inscription a été effectuée avec succès, elle sera validée prochainement.</p>
                <script language="JavaScript">
                setTimeout("window.location.href='../index.php ' ", 5000);
                </script>
                <?php } else { ?>
                <?php if(isset($hasError) || isset($captchaError)) { ?>
                <span class="errors"> S'il vous plaît veuillez remplir tous les champs. Je vous remercie. </span>
                <?php } ?>
                
                <h3>Création de votre compte Membre</h3>
                <?php $today = date("Y-m-d H:i:s"); //echo $today;?>
                
                <form id="form1" name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" autocomplete="off">
                  <label for="pseudo">Pseudo :</label>
                  <input name="pseudo" type="text" id="pseudo" style="text-transform:capitalize;" onKeyUp="verifPseudo(this.value)" value="<?php if(isset($_POST['pseudo'])) echo $_POST['pseudo'];?>" maxlength="15" onpaste="return false;" required placeholder="Votre pseudo" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{4,10}$" title="Le Pseudo doit être composé de 4 à 10 caractéres" />
                  <div id="pseudobox"></div> 
                  <?php if(isset($pseudoError) && $pseudoError != '') { echo $pseudoError; } ?>
                  
                  <div class="espace"></div>
                  
                  <label for="nom">Nom :</label>
                  <input type="text" name="nom" id="nom" value="<?php if(isset($_POST['nom'])) echo $_POST['nom'];?>" style="text-transform:capitalize;" onpaste="return false;" required placeholder="Votre nom" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" title="Le Nom doit être composé de 1 à 10 caractéres" />
                  <?php if(isset($nomError) && $nomError != '') { echo $nomError; } ?>
                  
                  <div class="espace"></div>
                  
                  <label for="prenom">Prénom :</label>
                  <input type="text" name="prenom" id="prenom" value="<?php if(isset($_POST['prenom'])) echo $_POST['prenom'];?>" style="text-transform:capitalize;" onpaste="return false;" required placeholder="Votre prénom" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" title="Le Prénom doit être composé de 1 à 10 caractéres" />
                  <?php if(isset($prenomError) && $prenomError != '') { echo $prenomError; } ?>
                  
                  <div class="espace"></div>
                  
                  <label for="password">Mot de passe :</label>
                  <input type="password" name="password" id="password" value="" onpaste="return false;" required placeholder="Votre mot de passe" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" /><!--passe -->
                  <a href="#" class="tooltip cpt"><img alt="aide mot de passe" src="images/icon_help.gif" border="0"><span><b></b><strong>Le mot de passe doit contenir au moins une lettre minuscule et majuscule, au moins un nombre, et de plus de 8 caractères</strong></span></a>
                  <?php if(isset($mdpError) && $mdpError != '') { echo $mdpError; } ?>
                  
                  <div class="espace"></div>
                  
                  <label for="confirm-password">Confirmer le mot de passe :</label>
                  <input type="password" name="confirm-password" id="confirm-password" value="" onChange="checkPasswordMatch();" onpaste="return false;" required placeholder="Confirmer votre mot de passe" /><!--passe1 -->
                  <?php if(isset($passeError) && $passeError != '') { echo $passeError; } ?>
                  <span class="checkpassword" id="divCheckPasswordMatch"></span>
                  
                  <div class="espace"></div>
                  
                  <label for="email">E-mail :</label>
                  <input type="text" name="email" id="email" onKeyUp="verifEmail(this.value)" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" maxlength="30" onpaste="return false;" required placeholder="Votre email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" title="Votre email n'est pas valide" />
                  <div id="emailbox"></div>
				  <?php if(isset($emailError) && $emailError != '') { echo $emailError; } ?>    
                  
                  <div class="espace"></div>
                  
                  <label for="verif" id="label_verif"> Code captcha :</label>
                  <input name="code" type="text" required placeholder="Saisir le code" /><br><br><div class="<?php echo $class; ?>" style="width:10px; height:10px;"></div>
                  <div class="captcha">
                  <img src="captcha.php" alt="Captcha" id="captcha" />
                  <!-- (JavaScript) Recharge l'image car elle n'existe pas dans le cache du navigateur, grâce à l'id généré  -->
                  <img src="captcha/reload.png" alt="Recharger l'image" title="Recharger l'image" style="cursor:pointer;position:relative;top:-7px;" onclick="document.images.captcha.src='captcha.php?id='+Math.round(Math.random(0)*1000)" />
                  </div>
				  <?php if(isset($captchaError) && $captchaError != $_SESSION["captcha"]) { echo $captchaError; } ?>
                  
                  <div class="espace"></div>
                  
                  <input type="hidden" name="submitted" id="submitted" value="true" />
                  <button class="button icon" type="submit"><span>Effectuer l'inscription</span></button> 
                  <input type="hidden" name="statut" id="statut" value="no_membre" />
                  <input type="hidden" name="date_inscription" id="date_inscription" value="<?php echo $today;?>" />
                </form>
                <?php } ?>
              </div>       
 

Conclusion

Vous voilà maintenant avec un formulaire d'inscription avec un contrôle des champs coté serveur.

Si vous souhaitez ce type de formulaire voici l'archive contenant les fichiers utilisés dans ce tutoriel   * T√©l√©charg√© ( 88 fois)