You must be registered for see images attach
Salut à tous,
Dans ce tutoriel je vais vous apprendre à faire un formulaire de connexion en Ajax en Ajax, aucun rafraîchissement de la page ne sera fait, excepté la redirection du membre si les informations rentrées sont bonnes.
Pour ce tutoriel vous devrez avoir une base de donnée, logique, et une table qui contient les membres de votre site.
J'utiliserai l'éditeur de texte Atom pour ce tutoriel, j'ai 3 pages pour ce tutoriel, login.php, result.php, login.js.
https://reality-gaming.fr/attachments/djamel2-png.89023/
Dans login.php nous allons mettre les champs pour rentrer un pseudo, un mot de passe etc.., c'est dans ce fichier que toute la partie affichage sera, n'oubliez pas de lier votre base de donnée.
Dans result.php nous allons vérifier les données rentrées pour connecter le membre, ici il n'y aura que du PHP.
Dans login.js se trouvera toute la partie JavaScript.
https://reality-gaming.fr/attachments/djamel2-png.89023/
Commençons par login.php, on va afficher deux champs, lier jQuery et lier notre fichier login.js.
Pour ce tutoriel vous devrez avoir une base de donnée, logique, et une table qui contient les membres de votre site.
J'utiliserai l'éditeur de texte Atom pour ce tutoriel, j'ai 3 pages pour ce tutoriel, login.php, result.php, login.js.
https://reality-gaming.fr/attachments/djamel2-png.89023/
Dans login.php nous allons mettre les champs pour rentrer un pseudo, un mot de passe etc.., c'est dans ce fichier que toute la partie affichage sera, n'oubliez pas de lier votre base de donnée.
Dans result.php nous allons vérifier les données rentrées pour connecter le membre, ici il n'y aura que du PHP.
Dans login.js se trouvera toute la partie JavaScript.
https://reality-gaming.fr/attachments/djamel2-png.89023/
Commençons par login.php, on va afficher deux champs, lier jQuery et lier notre fichier login.js.
HTML:
<input type="text" id="username" placeholder="Pseudo .."><br />
<input type="password" id="password" placeholder="Mot de passe .."><br />
<input type="submit" id="submit">
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="login.js"></script>Vous remarquez la DIV response, c'est dans cette DIV que sera affiché les messages, comme "Pseudo incorrect .. ".
Bien évidemment mettez ça entre vos balises body.
https://reality-gaming.fr/attachments/djamel2-png.89023/
Maintenant, la partie JavaScript !
Premièrement je dis, dès que jQuery est prêt et que le bouton poussoir a été cliqué, on met les valeurs des deux champs dans des variables, après ça je vérifie si leurs valeur n'est pas nulle.
Code:
$(document).ready(function(){
$('#submit').click(function(){
var username = $('#username').val();
var password = $('#password').val();
if(username != "" && password != "")
{
}
});
});Maintenant la partie Ajax, je vous explique le code après.
Code:
$.ajax({
url: 'result.php',
method: "POST",
data:{username:username, password:password},
cache: false,
beforeSend: function()
{
$('#response').html('Connexion en cours, patientez ..').show();
},
success: function(response)
{
$('#response').html(response).show();
}
});On définie l'url du fichier qui va traiter les informations, ensuite on précise la méthode, data correspond aux données envoyés via le formulaire, là j'envoie les valeurs de mes deux champs, qui ont étés placées dans des variables.
beforeSend est comme son nom l'indique avant l'envoie, moi je dis d'afficher un message pour dire à l'utilisateur que ses données ont étés envoyées et qu'il doit attendre.
success est si les données ont bien été envoyées on exécute une fonction avec le contenu de la réponse (dans notre cas c'est response), et j'affiche le message dans la DIV response, tout comme beforeSend.
https://reality-gaming.fr/attachments/djamel2-png.89023/
Pour finir il faut faire la partie traitement.
Dans result.php, pensez à lier votre base de donnée pour vérifier les informations.
Le code entier :
PHP:
<?php
session_start();
$db = new PDO('mysql:host=127.0.0.1;dbname=cms_whiite;charset=utf8', 'root', '');
if(isset($_POST['username']) && isset($_POST['password'])) // Si on a les deux champs username et password
{
if(!empty($_POST['username']) && !empty($_POST['password'])) // Si ils ne sont pas vide
{
sleep(2); // On laisse un chargement de deux secondes pour avoir le message du beforeSend
$username = htmlspecialchars(trim($_POST['username'])); // On met $_POST['username'] dans une variable
/*
* Requête SQL pour vérifier si le pseudo rentré existe
*/
$verifUsers = $db->prepare('
SELECT * FROM users WHERE
username = :username
');
$verifUsers->execute(array(
'username' => $username
));
if($verifUsers->rowCount() == 1) // Si le pseudo existe dans notre base de donnée
{
$info = $verifUsers->fetch(PDO::FETCH_OBJ); // On récupère toutes les informations du membres
if(password_verify($_POST['password'], $info->password)) // Si le mot de passe correspond au hash de la base de donnée ..
{
/*
* On initie nos variables de session
*/
$_SESSION['id'] = $info->id;
$_SESSION['username'] = $info->username;
$_SESSION['grade'] = $info->grade;
// etc...
/*
* On affiche un message, et un lien pour aller sur le profil du membre, le message s'affichera dans la DIV #response
*/
echo 'Connexion réussie ! Vous allez être redirigé ! <br />';
echo '-> <a href="profil.php?id='.$_SESSION['id'].'">Cliquez ici pour aller sur votre profil</a> <-';
}
else
{
echo "Le mot de passe rentré ne correspond à aucun compte de la base de donnée !"; // Le message s'affichera dans la DIV #response
}
}
else
{
echo "Le pseudo rentré est incorrect !"; // Le message s'affichera dans la DIV #response
}
}
else
{
echo "Merci de remplir tous les champs .."; // Le message s'affichera dans la DIV #response
}
}Vous remarquerez quelque chose d'inhabituel, si vous chiffrez vos mots de passe simplement en md5 ou sha1, je chiffre mes mots de passe avec password_hash, ce qui me permet d'avoir un hash unique qui ne sera jamais identique à un autre hash, même si le mot de base est le même, testez par vous-même vous verrez !
PHP:
echo password_hash('azerty123', PASSWORD_BCRYPT);Vous verrez que le résultat n'est jamais le même, c'est pour ça qu'il faut utiliser la fonction password_verify qui vérifie le hash et détermine si le mot de passe rentré pour se connecter correspond au mot de passe rentré à l'inscription.
https://reality-gaming.fr/attachments/djamel2-png.89023/
Et voilà
vous savez maintenant comment faire un formulaire de connexion en Ajax, je vous laisse modifier le code à votre guise pour l'adapter à votre site, le système est le même que pour faire un chat ou autre.Le code est très simple, faîtes vos propres tests avec, et, au fur et à mesure vous pourrez faire de très bons trucs.
Si vous avez une question ou un soucis avec le code dîtes-le moi, ou même une amélioration du code !?
Merci à @Hayzen SEC pour le header.
