Back

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();
}
?>





Formulaire à saisie semi-automatique
Sommaire du cours AJAX
author avatar
Riadh HAJJI

Riadh HAJJI

You may also like

Listes déroulantes reliées en PHP
16 juin, 2021

Validation de formulaire à l’aide d’Ajax Champs de formulaire à saisie semi-automatique Un formulaire de connexion avec AJAX Gérer les formulaires avec jQuery et Ajax Listes déroulantes reliées en PHP TP1 AJAX TP3 AJAX TP3 AJAX TP3 AJAX Objectifs Apprendre …

Correction activités AJAX
1 avril, 2021

Création de requêtes Ajax avec jQuery La méthode $.ajax() Les méthodes get() et post() jQuery AJAX La méthode $.getJSON() Exercices AJAX : Série 02 (Correction) Exercices AJAX : Série 03 (Correction) Correction activités AJAX Activité 01 Énoncé Vous pouvez visualiser …

Correction activités XMLHttpRequest
12 mars, 2021

Historique de l’objet XmlHttpRequest L’objet XmlHttpRequest Créer un objet XMLHttpRequest Générer des appels AJAX TP4 AJAX Correction activités XMLHttpRequest Objectifs Etre capable de manipuler l’objet XMLHttpRequest de JavaScript.. Activité 01 Énoncé Vous pouvez visualiser l’énoncé de l’activité Solution AJAX_act1.html AJAX_act1.js …