Correction application 02 AJAX-PHP

Correction application 02 AJAX-PHP

  1. Objectifs

    • Etre capable de créer et soumettre un formulaire ajax simple en PHP
    • Etre capable de soumettre des données de formulaire dans la base de données MySQL
  2. Application 02

      1. Énoncé
      2. Solution
        • Code HTML
          • <!------ Include the above in your HEAD tag ---------->
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
                <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <link rel="stylesheet" href="style.css">
                <title>Un formulaire de connexion en AJAX</title>
                <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
                <script type="text/javascript" src="js/fonctionsAjax.js"></script>
                
            </head>
            <body>
                <div class="container box">
                    <div class="row">
                <div class="form-group">
                    <form class="form-inscription" id="form_inscription" onsubmit="return false;">
                        <h1 class="h3 mb-3 font-weight-normal" style="text-align: center"> S'inscrire avec</h1>
                            <div class="social-login">
                                <button class="btn facebook-btn social-btn" type="button">
                                    <span><i class="fab fa-facebook-f"></i>Inscrivez-vous avec Facebook</span>
                                </button>
                            </div>
                            <!--<div class="social-login">
                                <button class="btn google-btn social-btn" type="button"><span><i class="fab fa-google-plus-g"></i>Inscrivez-vous avec Google+</span> </button>
                            </div>-->
                            <p style="text-align:center">OU</p>
                            <div class="form-group position-relative mb-1">
                                <input type="text" id="nomPrenom" name="nomPrenom" class="form-control is-invalid"  placeholder="Saisir votre nom" required="" autofocus="">
                                <div class="valid-feedback feedback-icon">
                                    <i class="fa fa-check"></i>
                                </div>
                               <div class="invalid-feedback feedback-icon">
                                    <i class="fa fa-times"></i>
                                </div>
                            </div>
                                <small id="output_nomPrenom" class="mt-1"></small>
                        <!--pseudo***********************-->
                            <div class="form-group position-relative mb-1">
                                <input type="text" id="pseudo" name="pseudo" class="form-control is-invalid"  
                                placeholder="Saisir votre pseudo" required="" autofocus="">
                                <div class="valid-feedback feedback-icon">
                                    <i class="fa fa-check"></i>
                                </div>
                               <div class="invalid-feedback feedback-icon">
                                    <i class="fa fa-times"></i>
                                </div>
                            </div>
                                <small id="output_pseudo" class="mt-1"></small>
                        <!--mail***********************-->
                            <div class="form-group position-relative mb-1">
                                <input type="email" id="email" name="email" class="form-control  is-invalid"
                                 placeholder="Addresse Email" required="" autofocus="" value="">
                                <div class="valid-feedback feedback-icon">
                                    <i class="fa fa-check"></i>
                                </div>
                               <div class="invalid-feedback feedback-icon">
                                    <i class="fa fa-times"></i>
                                </div>
                            </div>
                            <small id="output_email"></small>
                        <!--password***********************-->
                            <div class="form-group position-relative mb-1">
                                <input type="password" id="user-passwd" name="pwdUtilisateur"class="form-control  is-invalid"
                                 placeholder="Mot de passe" required="">
                                <div class="valid-feedback feedback-icon">
                                    <i class="fa fa-check"></i>
                                </div>
                               <div class="invalid-feedback feedback-icon">
                                    <i class="fa fa-times"></i>
                                </div>
                            </div>
                            <small id="output_pass1"></small>
                        <!--verifpassword***********************-->
                            <div class="form-group position-relative mb-1">
                                <input type="password" id="user-repeatpass" name="repwdUtilisateur" class="form-control is-invalid"
                                 placeholder="Répéter le mot de passe" required="" autofocus="" value="">
                                <div class="valid-feedback feedback-icon">
                                    <i class="fa fa-check"></i>
                                </div>
                               <div class="invalid-feedback feedback-icon">
                                    <i class="fa fa-times"></i>
                                </div>
                            </div>
                            <small id="output_pass2"></small>
                            
                            <div id="status">
                            </div>
                            <br>
                            <!--<input type="submit" value="&#xf234 S'inscrire" class="btn btn-primary btn-block fas fa-user-plus">-->
                            <input type="submit" id="bRegister" class="btn btn-primary btn-block fas fa-user-plus" value="&#xf234 S'inscrire" />
                            <!--<button class="btn btn-primary btn-block" name="inscription" 
                            type="submit"><i class="fas fa-user-plus"></i><i id="bRegister">S'inscrire</i></button>-->
                        </form>
                        <br>
                    </div>       
               </div>
                 </div> 
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            </body>
            </html>
        • Code JS
          • $(document).ready(function() {
            $("#nomPrenom").keyup(function(){
                    //On vérifie si le nom et le prénom est ok ou n'a pas été déjà pris
                    var nombreMots = jQuery.trim($(this).val()).split(' ').length;
                    if($(this).val() === '') {
                         nombreMots = 0;
                    }
                    if(nombreMots <2){
                        $("small#output_nomPrenom").show();
                        $("#nomPrenom").removeClass("is-valid");
                        $("#nomPrenom").addClass("is-invalid");
                        $("#output_nomPrenom").css("color", "red").html("Trop court (Au moins deux mots )");
                    }else{
                        $("small#output_nomPrenom").hide();
                        $("#nomPrenom").removeClass("is-invalid");
                        $("#nomPrenom").addClass("is-valid");
                    }
                    verifier_classes();
            });
            
            $("#pseudo").keyup(function(){
                if($(this).val().match(/^[a-zA-Z]/)){
                    verifier_pseudo();
                }else{
                    $("#pseudo").removeClass("is-valid");
                    $("#pseudo").addClass("is-invalid");
                     $("small#output_pseudo").show();
                     $("#output_pseudo").css("color", "red").html("Le pseudo doit commencer par une lettre");
            
                }
            });
            function verifier_pseudo(){
                    //On vérifie si le pseudo est ok ou n'a pas été déjà pris
                    $.ajax({
                        type: "post",
                        url:  "validationPHP.php",
                        data: {
                            'pseudo_check' : $("#pseudo").val()
                        },
                        success: function(data){
                                if(data == "success"){
                                        $("#pseudo").removeClass("is-invalid");
                                        $("#pseudo").addClass("is-valid");
                                         $("small#output_pseudo").hide();
                                        return true;
                                    } else {
                                        $("#pseudo").removeClass("is-valid");
                                        $("#pseudo").addClass("is-invalid");
                                        $("small#output_pseudo").show();
                                        $("#output_pseudo").css("color", "red").html(data);
                                    }
                                    }
                    });
                    verifier_classes();
            };
            //Email*************************
            $("#email").keyup(function(){
                //On vérifie si les mots de passe coïncident
                verifier_email();
                verifier_classes();
            });
            function verifier_email(){
                $.ajax({
                    type: "post",
                    url:  "validationPHP.php",
                    data: {
                        'email_check' : $("#email").val()
                    },
                    success: function(data){
                                if(data == "success"){
                                    $("#email").removeClass("is-invalid");
                                    $("#email").addClass("is-valid");
                                    $("small#output_email").hide();
                                } else {
                                    $("#email").removeClass("is-valid");
                                    $("#email").addClass("is-invalid");
                                    $("small#output_email").show();
                                    $("#output_email").css("color", "red").html(data);
                                }
                             }
                });
            }
            //password*************************
            $("#user-passwd").keyup(function(){
                //On vérifie si le mot de passe est ok
                if($(this).val().match(/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,12}$/)){
                    if($(this).val().length < 8){
                        if($(this).val().length !=0){
                        $("#output_pass1").css("color", "red").html("Trop court (8 caractères minimum)");
                        $("small#output_pass1").show();
                        $("#user-passwd").removeClass("is-valid");
                        $("#user-passwd").addClass("is-invalid");
                        }
                        else{
                        $("small#output_pass1").hide();
                        $("#user-passwd").removeClass("is-valid");
                        $("#user-passwd").addClass("is-invalid");
                        }
                    } else if($("#user-repeatpass").val() != "" && $("#user-repeatpass").val() != $("#user-passwd").val()){
                        $("small#output_pass1").show();
                        $("#output_pass1").css("color", "red").html("Les deux mots de passe sont différents");
                        $("#output_pass2").css("color", "red").html("Les deux mots de passe sont différents");
                    } else {
                        $("#user-passwd").removeClass("is-invalid");
                        $("#user-passwd").addClass("is-valid");
                         $("small#output_pass1").hide();
                        //$("#output_pass1").html('<img src="img/check.png" class="small_image" alt="" />');
                    }
                }else{
                    if($(this).val().length !=0){
                    $("#output_pass1").css("color", "red").html("Mot de passe trop faible");
                    $("small#output_pass1").show();
                    $("#user-passwd").removeClass("is-valid");
                    $("#user-passwd").addClass("is-invalid");
                    }else{$("small#output_pass1").hide();
                    $("#user-passwd").removeClass("is-valid");
                    $("#user-passwd").addClass("is-invalid");}
                }
                verifier_classes();
            });
            //verif password*************************
            $("#user-repeatpass").keyup(function(){
                //On vérifie si les mots de passe coïncident
                if($("#user-repeatpass").val() != "" && $("#user-repeatpass").val() != $("#user-passwd").val()){
                    $("small#output_pass2").show();
                    $("#output_pass2").css("color", "red").html("Les deux mots de passe sont différents");
                    $("#user-repeatpass").removeClass("is-valid");
                    $("#user-repeatpass").addClass("is-invalid");
                     $("small#output_pass1").hide();
                } else {
                    $("#user-repeatpass").removeClass("is-invalid");
                    $("#user-repeatpass").addClass("is-valid");
                     $("small#output_pass1").hide();
                     verifier_password();
                }
                verifier_classes();
            });
            function verifier_password(){
                $.ajax({
                    type: "post",
                    url:  "validationPHP.php",
                    data: {
                        'pass1_check' : $("#user-passwd").val(),
                        'pass2_check' : $("#user-repeatpass").val()
                    },
                    success: function(data){
                                if(data == "success"){
                                    $("#user-repeatpass").removeClass("is-invalid");
                                    $("#user-repeatpass").addClass("is-valid");
                                     $("small#output_pass2").hide();
                                    } else {
                                        $("#user-repeatpass").removeClass("is-valid");
                                        $("#user-repeatpass").addClass("is-invalid");
                                        $("small#output_pass2").show();
                                        $("#output_pass2").css("color", "red").html(data);
                                    }
                             }
                });
            }
            //Traitement du formulaire d'inscription************************
            function verifier_classes(){
                if ( $("#nomPrenom").hasClass("is-valid")==true  &&
                $("#pseudo").hasClass("is-valid")==true  &&
                $("#email").hasClass("is-valid")==true  &&
                $("#user-passwd").hasClass("is-valid")==true  &&
                $("#user-repeatpass").hasClass("is-valid")==true){
                                $("#etatgeneral").removeClass("is-invalid");
                                $("#etatgeneral").addClass("is-valid");
                                $("#etatgeneral").css("color", "green").html("Vous pouvez envoyer votre formulaire");
                                $('#btnEnvoyer').attr("disabled", false);          
                            } else {
                                $("#etatgeneral").removeClass("is-valid");
                                $("#etatgeneral").addClass("is-invalid");
                                $("#etatgeneral").css("color", "red").html("Veuillez remplir tous les champs avant d’envoyer le formulaire");
                                $('#btnEnvoyer').attr("disabled", true);
                            }
            }
            //$('#btnEnvoyer').attr("disabled", false);	
            //ou
            //$('#btnEnvoyer').removeAttr("disabled");
            //Traitement du formulaire d'inscription************************
            $("#form_inscription").submit(function(){alert("rrrr");
                var nomPrenom = $("#nomPrenom").val();
                var pseudo = $("#pseudo").val();
                var email = $("#email").val();
                var pass1 = $("#user-passwd").val();
                var pass2 = $("#user-repeatpass").val();
                    $.ajax({
                        type: "post",          //La méthode utilisée (POST ou GET)
                        url:  "validationPHP.php", //Script à appeler
                        asynch : false,       //Ici on force l'appel de manière synchrone
                        data: {
                            'nomPrenom' : nomPrenom,
                            'pseudo' : pseudo,
                            'email' : email,
                            'pass1' : pass1,
                            'pass2' : pass2,
                        },
                        success: function(data){
                                    if(data != "register_success"){
                                        $("#etatgeneral").css("color", "red").html(data);
                                    } else {
                                        $("#etatgeneral").css("color", "green").html("Données enregistrées avec succès");
              
                                    }
                                 }
                    });
                });
            });
        • Code PHP
          • <?php 
            //Vérification du pseudo
            if(!empty($_POST['pseudo_check'])){ 
            	$pseudo = $_POST['pseudo_check'];
            	if(is_numeric($pseudo[0])){
            		echo '<br/>Le pseudo doit commencer par une lettre.';
            		exit();
            	}
            	//Connexion à la base de données
            	require "connexion.php";
            	$q = $connexion->prepare('SELECT cdeUser FROM utilisateurs WHERE pseudo = ?');
            	$q->execute(array($pseudo));
            	$numRows = $q->rowCount();
            	if($numRows > 0){
            		echo 'Pseudo déjà utilisé !';
            		exit();
            	} else {
            		echo 'success';
            		exit();
            	}
            }
            //Vérification de l'email
            if(!empty($_POST['email_check'])){
            	$email = $_POST['email_check'];
            	//Vérifier l'adresse mail
            	if(!filter_var($email, FILTER_VALIDATE_EMAIL)){  
            		echo 'Adresse email invalide !';
            		exit();
            	}
            	//Connexion à la base de données
            	require "connexion.php";
            	$q = $connexion->prepare('SELECT cdeUser FROM utilisateurs WHERE emailUtilisateur = ?');
            	$q->execute(array($email));
            	$numRows = $q->rowCount();
            	if($numRows > 0){
            		echo 'Adresse email déjà utilisée !';
            		exit();
            	} else {
            		echo 'success';
            		exit();
            	}
            }
            //Vérification des mots de passe
            if(!empty($_POST['pass1_check']) && !empty($_POST['pass2_check'])){
            	if (preg_match('#^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*\W){8,12}$#', $_POST['pass1_check'])) {
            		echo 'Mot de passe trop court / faible';
            		exit();
            	} else if($_POST['pass1_check'] == $_POST['pass2_check']){
            		echo 'success';
            		exit();
            	} else {
            		echo 'Les deux mots de passe sont différents';
            		exit();
            	}
            
            }
            
            //Traitement de l'inscription
            if(isset($_POST['pseudo'])){
            	require "connexion.php";
            	//extract($_POST);
            
            	$nomPrenom=$_POST['nomPrenom'];
            	$pseudo=$_POST['pseudo'];
            	$email=$_POST['email'];
            	$pass1=$_POST['pass1'];
            	$pass2=$_POST['pass2'];	
            
            	$q = $connexion->prepare('SELECT cdeUser FROM utilisateurs WHERE pseudo = ?');
            	$q->execute(array($pseudo));
            	$pseudo_check = $q->rowCount();
            	
            	$q = $connexion->prepare('SELECT cdeUser FROM utilisateurs WHERE emailUtilisateur = ?');
            	$q->execute(array($email));
            	$email_check = $q->rowCount();
            
            	$nomPrenom = $_POST['nomPrenom'];
            	if(empty($nomPrenom) || empty($pseudo)||
            	 empty($email)|| empty($pass1) || empty($pass2) ){
            		echo "Tous les champs n'ont pas été remplis.";
            	} else if($pseudo_check > 0) {
            		echo "Pseudo déjà utilisé";
            	} else if($email_check > 0) {
            		echo "Cette adresse mail est déjà utilisée";
            	}  else if(is_numeric($pseudo[0])) {
            		echo "Le pseudo doit commencer par une lettre.";
            	}  else if($pass1 != $pass2) {
            		echo "Les mots de passe ne correspondent pas.";
            	} else {
            		$hashed_password = password_hash($pass1, PASSWORD_DEFAULT);
            		$requeteInsertion="INSERT INTO utilisateurs
                						(prenomUtilisateur,pseudo,emailUtilisateur,motDePasse,
            							dateCreatUser,ipUtilisateur,confirmkey,actif) VALUES (
                                        :prenom,
            							:pseudo,
            							:emailUtilisateur,
                                        :hashed_password,
                                        :dateCreatUser,
            							:ipUtilisateur,
            							:confirm,
            							:actif)";
            		$response = $connexion->prepare( $requeteInsertion );
            		$dateCreation = date("Y-m-d H:i:s");                     
            		$response->execute(array(
            			'prenom' => $nomPrenom,
            			'pseudo' => $pseudo,
            			'emailUtilisateur' => $email,
            			'hashed_password' => $hashed_password,
            			'dateCreatUser' => $dateCreation,
            			'ipUtilisateur' => $_SERVER['REMOTE_ADDR'],
            			'confirm' => 010101,
            			'actif' => 0
            		));
            		echo "register_success";
            		exit();
            	}
            	exit();
            }
            ?>





Abonnez vous à notre chaîne YouTube gratuitement