Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Wiki
Pages
Dernière activité
Quoi de neuf
Nouveaux messages
Nouveaux articles
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Magasin
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
TUTO AJAX | Formulaire de connexion
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="WhiiTe'" data-source="post: 6657060" data-attributes="member: 8987"><p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]92636[/ATTACH]</p><p></p><p><span style="font-size: 12px"><span style="font-family: 'Convergence'">Salut à tous,</span></span></p><p></p><p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Dans ce tutoriel je vais vous apprendre à faire un <strong><span style="color: #005ab3">fo</span><span style="color: #0054ae">rmu</span><span style="color: #004ca7">la</span><span style="color: #0047a2">ir</span><span style="color: #00419e">e d</span><span style="color: #003b99">e c</span><span style="color: #003694">on</span><span style="color: #00308f">nex</span><span style="color: #002888">io</span><span style="color: #002284">n e</span><span style="color: #001d7f">n A</span><span style="color: #00177a">ja</span><span style="color: #001275">x</span></strong> en Ajax, aucun rafraîchissement de la page ne sera fait, excepté la <strong><span style="color: #005ab3">r</span><span style="color: #0053ad">e</span><span style="color: #004ca7">d</span><span style="color: #0046a2">i</span><span style="color: #003f9c">r</span><span style="color: #003896">e</span><span style="color: #003190">c</span><span style="color: #002a8a">t</span><span style="color: #002384">i</span><span style="color: #001d7f">o</span><span style="color: #001679">n</span></strong> du membre si les informations rentrées sont bonnes.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Pour ce tutoriel vous devrez avoir une <strong><span style="color: #005ab3">b</span><span style="color: #0054ae">a</span><span style="color: #004ea8">s</span><span style="color: #0047a3">e </span><span style="color: #00419e">d</span><span style="color: #003b98">e </span><span style="color: #003593">d</span><span style="color: #002e8e">o</span><span style="color: #002888">n</span><span style="color: #002283">n</span><span style="color: #001c7e">é</span><span style="color: #001578">e</span></strong>, logique, et une table qui contient <strong><span style="color: #005ab3">le</span><span style="color: #0053ad">s m</span><span style="color: #004ca7">em</span><span style="color: #0045a1">br</span><span style="color: #003d9b">es </span><span style="color: #003695">de </span><span style="color: #002f8e">vo</span><span style="color: #002888">tr</span><span style="color: #002182">e s</span><span style="color: #001a7c">it</span><span style="color: #001376">e</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">J'utiliserai l'éditeur de texte <strong><span style="color: #005ab3">A</span><span style="color: #0047a3">t</span><span style="color: #003593">o</span><span style="color: #002283">m</span> </strong>pour ce tutoriel, j'ai 3 pages pour ce tutoriel, login.php, result.php, login.js.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="https://reality-gaming.fr/attachments/djamel2-png.89023/" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Dans login.php nous allons mettre <strong><span style="color: #005ab3">l</span><span style="color: #0052ac">e</span><span style="color: #0049a5">s </span><span style="color: #00419e">c</span><span style="color: #003997">h</span><span style="color: #00308f">a</span><span style="color: #002888">m</span><span style="color: #002081">p</span><span style="color: #00177a">s</span></strong> pour rentrer un <strong><span style="color: #005ab3">ps</span><span style="color: #0052ac">eu</span><span style="color: #004aa6">do</span><span style="color: #00429f">, u</span><span style="color: #003a98">n m</span><span style="color: #003391">ot </span><span style="color: #002b8b">de </span><span style="color: #002384">pa</span><span style="color: #001b7d">ss</span><span style="color: #001376">e</span></strong> etc.., c'est dans ce fichier que toute la partie <strong><span style="color: #005ab3">a</span><span style="color: #0052ac">f</span><span style="color: #0049a5">f</span><span style="color: #00419e">i</span><span style="color: #003997">c</span><span style="color: #00308f">h</span><span style="color: #002888">a</span><span style="color: #002081">g</span><span style="color: #00177a">e</span> </strong>sera, n'oubliez pas de <strong><span style="color: #005ab3">l</span><span style="color: #0047a3">i</span><span style="color: #003593">e</span><span style="color: #002283">r</span></strong> votre base de donnée.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Dans result.php nous allons <strong><span style="color: #005ab3">vé</span><span style="color: #0054ae">ri</span><span style="color: #004ea9">fi</span><span style="color: #0049a4">er </span><span style="color: #00439f">le</span><span style="color: #003d9a">s d</span><span style="color: #003795">onn</span><span style="color: #002f8e">ée</span><span style="color: #002989">s r</span><span style="color: #002384">en</span><span style="color: #001d7f">tr</span><span style="color: #00187a">ée</span><span style="color: #001275">s</span> </strong>pour connecter le membre, ici il n'y aura que du <strong><span style="color: #005ab3">P</span><span style="color: #00419e">H</span><span style="color: #002888">P</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Dans login.js se trouvera toute la partie <strong><span style="color: #005ab3">J</span><span style="color: #0053ad">a</span><span style="color: #004ba6">v</span><span style="color: #0044a0">a</span><span style="color: #003c99">S</span><span style="color: #003593">c</span><span style="color: #002d8d">r</span><span style="color: #002686">i</span><span style="color: #001e80">p</span><span style="color: #001779">t</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="https://reality-gaming.fr/attachments/djamel2-png.89023/" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Commençons par <strong><span style="color: #005ab3">l</span><span style="color: #0052ac">o</span><span style="color: #0049a5">g</span><span style="color: #00419e">i</span><span style="color: #003997">n</span><span style="color: #00308f">.</span><span style="color: #002888">p</span><span style="color: #002081">h</span><span style="color: #00177a">p</span></strong>, on va afficher <strong><span style="color: #005ab3">d</span><span style="color: #0053ad">e</span><span style="color: #004ba6">u</span><span style="color: #0044a0">x </span><span style="color: #003c99">c</span><span style="color: #003593">h</span><span style="color: #002d8d">a</span><span style="color: #002686">m</span><span style="color: #001e80">p</span><span style="color: #001779">s</span></strong>, lier jQuery et lier notre fichier <strong><span style="color: #005ab3">l</span><span style="color: #0051ab">o</span><span style="color: #0047a3">g</span><span style="color: #003e9b">i</span><span style="color: #003593">n</span><span style="color: #002b8b">.</span><span style="color: #002283">j</span><span style="color: #00187b">s</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p><p>[HTML]</p><p><input type="text" id="username" placeholder="Pseudo .."><br /></p><p><input type="password" id="password" placeholder="Mot de passe .."><br /></p><p><input type="submit" id="submit"></p><p><div id="response"></div></p><p></p><p><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script></p><p><script src="login.js"></script>[/HTML]</p><p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'">Vous remarquez la DIV <strong><span style="color: #005ab3">r</span><span style="color: #0051ab">e</span><span style="color: #0047a3">s</span><span style="color: #003e9b">p</span><span style="color: #003593">o</span><span style="color: #002b8b">n</span><span style="color: #002283">s</span><span style="color: #00187b">e</span></strong>, c'est dans cette DIV que sera affiché les <strong><span style="color: #005ab3">m</span><span style="color: #0051ab">e</span><span style="color: #0047a3">s</span><span style="color: #003e9b">s</span><span style="color: #003593">a</span><span style="color: #002b8b">g</span><span style="color: #002283">e</span><span style="color: #00187b">s</span></strong>, comme "<strong><span style="color: #005ab3">Ps</span><span style="color: #0050aa">eu</span><span style="color: #0046a2">do </span><span style="color: #003c99">in</span><span style="color: #003291">co</span><span style="color: #002888">rr</span><span style="color: #001e80">ec</span><span style="color: #001477">t</span></strong> .. ".</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'">Bien évidemment mettez ça entre <strong><span style="color: #005ab3">v</span><span style="color: #0055ae">o</span><span style="color: #004faa">s </span><span style="color: #004aa5">ba</span><span style="color: #003f9c">li</span><span style="color: #003593">s</span><span style="color: #002f8e">es </span><span style="color: #002485">bo</span><span style="color: #001a7c">d</span><span style="color: #001478">y</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="https://reality-gaming.fr/attachments/djamel2-png.89023/" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Maintenant, la partie <strong><span style="color: #005ab3">J</span><span style="color: #0053ad">a</span><span style="color: #004ba6">v</span><span style="color: #0044a0">a</span><span style="color: #003c99">S</span><span style="color: #003593">c</span><span style="color: #002d8d">r</span><span style="color: #002686">i</span><span style="color: #001e80">p</span><span style="color: #001779">t</span></strong> !</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Premièrement je dis, dès que <strong><span style="color: #005ab3">j</span><span style="color: #0054ae">Q</span><span style="color: #004ea9">u</span><span style="color: #0049a4">e</span><span style="color: #00439f">r</span><span style="color: #003d9a">y </span><span style="color: #003795">es</span><span style="color: #002c8c">t </span><span style="color: #002687">p</span><span style="color: #002082">r</span><span style="color: #001b7d">ê</span><span style="color: #001578">t</span> </strong>et que le bouton poussoir a été <strong><span style="color: #005ab3">c</span><span style="color: #004ea8">l</span><span style="color: #00419e">i</span><span style="color: #003593">q</span><span style="color: #002888">u</span></strong><span style="color: #001c7e">é</span>, on met les valeurs des deux champs dans des <strong><span style="color: #005ab3">v</span><span style="color: #0052ac">a</span><span style="color: #0049a5">r</span><span style="color: #00419e">i</span><span style="color: #003997">a</span><span style="color: #00308f">b</span><span style="color: #002888">l</span><span style="color: #002081">e</span><span style="color: #00177a">s</span></strong>, après ça je vérifie si leurs valeur n'est pas <strong><span style="color: #005ab3">n</span><span style="color: #004ba6">u</span><span style="color: #003c99">l</span><span style="color: #002d8d">l</span><span style="color: #001e80">e</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p><p>[CODE]$(document).ready(function(){</p><p> $('#submit').click(function(){</p><p> var username = $('#username').val();</p><p> var password = $('#password').val();</p><p></p><p> if(username != "" && password != "")</p><p> {</p><p></p><p> }</p><p> });</p><p>});[/CODE]</p><p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'">Maintenant la partie<strong> <span style="color: #005ab3">A</span><span style="color: #0047a3">j</span><span style="color: #003593">a</span><span style="color: #002283">x</span></strong>, je vous explique le code après.</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p><p>[CODE]$.ajax({</p><p> url: 'result.php',</p><p> method: "POST",</p><p> data:{username:username, password:password},</p><p> cache: false,</p><p> beforeSend: function()</p><p> {</p><p> $('#response').html('Connexion en cours, patientez ..').show();</p><p> },</p><p> success: function(response)</p><p> {</p><p> $('#response').html(response).show();</p><p> }</p><p>});[/CODE]</p><p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'">On définie <strong><span style="color: #005ab3">l</span><span style="color: #0055ae">'</span><span style="color: #004faa">u</span><span style="color: #004aa5">rl </span><span style="color: #003f9c">du </span><span style="color: #003593">f</span><span style="color: #002f8e">ic</span><span style="color: #002485">hi</span><span style="color: #001a7c">e</span><span style="color: #001478">r</span></strong> qui va traiter les <strong><span style="color: #005ab3">i</span><span style="color: #0054ae">n</span><span style="color: #004ea8">f</span><span style="color: #0047a3">o</span><span style="color: #00419e">r</span><span style="color: #003b98">m</span><span style="color: #003593">a</span><span style="color: #002e8e">t</span><span style="color: #002888">i</span><span style="color: #002283">o</span><span style="color: #001c7e">n</span><span style="color: #001578">s</span></strong>, ensuite on précise la <strong><span style="color: #005ab3">m</span><span style="color: #004faa">é</span><span style="color: #0045a1">t</span><span style="color: #003a98">h</span><span style="color: #002f8e">o</span><span style="color: #002485">d</span><span style="color: #001a7c">e</span></strong>, data correspond aux <strong><span style="color: #005ab3">d</span><span style="color: #0055ae">o</span><span style="color: #004faa">n</span><span style="color: #004aa5">né</span><span style="color: #003f9c">es </span><span style="color: #003593">e</span><span style="color: #002f8e">nv</span><span style="color: #002485">oy</span><span style="color: #001a7c">é</span><span style="color: #001478">s</span></strong> via le formulaire, là j'envoie les valeurs de mes <strong><span style="color: #005ab3">d</span><span style="color: #0053ad">e</span><span style="color: #004ba6">u</span><span style="color: #0044a0">x </span><span style="color: #003c99">c</span><span style="color: #003593">h</span><span style="color: #002d8d">a</span><span style="color: #002686">m</span><span style="color: #001e80">p</span><span style="color: #001779">s</span></strong>, qui ont étés placées dans des <strong><span style="color: #005ab3">v</span><span style="color: #0052ac">a</span><span style="color: #0049a5">r</span><span style="color: #00419e">i</span><span style="color: #003997">a</span><span style="color: #00308f">b</span><span style="color: #002888">l</span><span style="color: #002081">e</span><span style="color: #00177a">s</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><strong><span style="color: #005ab3">b</span><span style="color: #0053ad">e</span><span style="color: #004ba6">f</span><span style="color: #0044a0">o</span><span style="color: #003c99">r</span><span style="color: #003593">e</span><span style="color: #002d8d">S</span><span style="color: #002686">e</span><span style="color: #001e80">n</span><span style="color: #001779">d</span> </strong>est comme son nom l'indique avant l'envoie, moi je dis d'afficher un message pour dire à l'utilisateur que <strong><span style="color: #005ab3">se</span><span style="color: #0054ae">s d</span><span style="color: #004ea9">on</span><span style="color: #0048a4">né</span><span style="color: #00429f">es </span><span style="color: #003c99">on</span><span style="color: #003694">t é</span><span style="color: #00308f">té</span><span style="color: #002a8a">s e</span><span style="color: #002485">nv</span><span style="color: #001e80">oy</span><span style="color: #00187b">ée</span><span style="color: #001276">s</span></strong> et qu'il doit attendre.</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><strong><span style="color: #005ab3">s</span><span style="color: #004faa">u</span><span style="color: #0045a1">c</span><span style="color: #003a98">c</span><span style="color: #002f8e">e</span><span style="color: #002485">s</span><span style="color: #001a7c">s</span></strong> 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 <strong><span style="color: #005ab3">r</span><span style="color: #0051ab">e</span><span style="color: #0047a3">s</span><span style="color: #003e9b">p</span><span style="color: #003593">o</span><span style="color: #002b8b">n</span><span style="color: #002283">s</span><span style="color: #00187b">e</span></strong>), et j'affiche le message dans la DIV <strong><span style="color: #005ab3">r</span><span style="color: #0051ab">e</span><span style="color: #0047a3">s</span><span style="color: #003e9b">p</span><span style="color: #003593">o</span><span style="color: #002b8b">n</span><span style="color: #002283">s</span><span style="color: #00187b">e</span></strong>, tout comme <strong><span style="color: #005ab3">b</span><span style="color: #0053ad">e</span><span style="color: #004ba6">f</span><span style="color: #0044a0">o</span><span style="color: #003c99">r</span><span style="color: #003593">e</span><span style="color: #002d8d">S</span><span style="color: #002686">e</span><span style="color: #001e80">n</span><span style="color: #001779">d</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><img src="https://reality-gaming.fr/attachments/djamel2-png.89023/" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Pour finir il faut faire la partie <strong><span style="color: #005ab3">t</span><span style="color: #0053ad">r</span><span style="color: #004ba6">a</span><span style="color: #0044a0">i</span><span style="color: #003c99">t</span><span style="color: #003593">e</span><span style="color: #002d8d">m</span><span style="color: #002686">e</span><span style="color: #001e80">n</span><span style="color: #001779">t</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Dans result.php, pensez à lier votre base de donnée pour <strong><span style="color: #005ab3">vé</span><span style="color: #0053ad">ri</span><span style="color: #004da8">fi</span><span style="color: #0046a2">er </span><span style="color: #00409d">le</span><span style="color: #003997">s i</span><span style="color: #003392">nf</span><span style="color: #002c8c">or</span><span style="color: #002686">ma</span><span style="color: #001f81">ti</span><span style="color: #00197b">on</span><span style="color: #001276">s</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Le code entier :</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p><p>[PHP]<?php</p><p>session_start();</p><p>$db = new PDO('mysql:host=127.0.0.1;dbname=cms_whiite;charset=utf8', 'root', '');</p><p></p><p>if(isset($_POST['username']) && isset($_POST['password'])) // Si on a les deux champs username et password</p><p>{</p><p> if(!empty($_POST['username']) && !empty($_POST['password'])) // Si ils ne sont pas vide</p><p> {</p><p> sleep(2); // On laisse un chargement de deux secondes pour avoir le message du beforeSend</p><p> $username = htmlspecialchars(trim($_POST['username'])); // On met $_POST['username'] dans une variable</p><p></p><p></p><p> /*</p><p> * Requête SQL pour vérifier si le pseudo rentré existe</p><p> */</p><p> $verifUsers = $db->prepare('</p><p> SELECT * FROM users WHERE</p><p> username = :username</p><p> ');</p><p> $verifUsers->execute(array(</p><p> 'username' => $username</p><p> ));</p><p></p><p> if($verifUsers->rowCount() == 1) // Si le pseudo existe dans notre base de donnée</p><p> {</p><p> $info = $verifUsers->fetch(PDO::FETCH_OBJ); // On récupère toutes les informations du membres</p><p></p><p> if(password_verify($_POST['password'], $info->password)) // Si le mot de passe correspond au hash de la base de donnée ..</p><p> {</p><p> /*</p><p> * On initie nos variables de session</p><p> */</p><p> $_SESSION['id'] = $info->id;</p><p> $_SESSION['username'] = $info->username;</p><p> $_SESSION['grade'] = $info->grade;</p><p> // etc...</p><p></p><p> /*</p><p> * On affiche un message, et un lien pour aller sur le profil du membre, le message s'affichera dans la DIV #response</p><p> */</p><p> echo 'Connexion réussie ! Vous allez être redirigé ! <br />';</p><p> echo '-> <a href="profil.php?id='.$_SESSION['id'].'">Cliquez ici pour aller sur votre profil</a> <-';</p><p> }</p><p> else</p><p> {</p><p> echo "Le mot de passe rentré ne correspond à aucun compte de la base de donnée !"; // Le message s'affichera dans la DIV #response</p><p> }</p><p> }</p><p> else</p><p> {</p><p> echo "Le pseudo rentré est incorrect !"; // Le message s'affichera dans la DIV #response</p><p> }</p><p> }</p><p> else</p><p> {</p><p> echo "Merci de remplir tous les champs .."; // Le message s'affichera dans la DIV #response</p><p> }</p><p>}</p><p>[/PHP]</p><p style="text-align: center"><span style="font-size: 12px"></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'">Vous remarquerez quelque chose d'inhabituel, si vous <strong><span style="color: #005ab3">ch</span><span style="color: #0053ad">if</span><span style="color: #004ca7">fr</span><span style="color: #0046a2">ez </span><span style="color: #003f9c">vo</span><span style="color: #003896">s m</span><span style="color: #003190">ot</span><span style="color: #002a8a">s d</span><span style="color: #002384">e p</span><span style="color: #001d7f">as</span><span style="color: #001679">se</span></strong> simplement en <strong><span style="color: #005ab3">m</span><span style="color: #0052ac">d</span><span style="color: #0049a5">5 </span><span style="color: #00419e">o</span><span style="color: #003997">u </span><span style="color: #00308f">s</span><span style="color: #002888">h</span><span style="color: #002081">a</span><span style="color: #00177a">1</span></strong>, je chiffre mes mots de passe avec <strong><span style="color: #005ab3">p</span><span style="color: #0054ae">a</span><span style="color: #004ea9">s</span><span style="color: #0049a4">s</span><span style="color: #00439f">w</span><span style="color: #003d9a">o</span><span style="color: #003795">rd</span><span style="color: #002c8c">_</span><span style="color: #002687">h</span><span style="color: #002082">a</span><span style="color: #001b7d">s</span><span style="color: #001578">h</span></strong>, ce qui me permet d'avoir un <strong><span style="color: #005ab3">h</span><span style="color: #0053ad">a</span><span style="color: #004ba6">s</span><span style="color: #0044a0">h </span><span style="color: #003c99">u</span><span style="color: #003593">n</span><span style="color: #002d8d">i</span><span style="color: #002686">q</span><span style="color: #001e80">u</span><span style="color: #001779">e</span></strong> qui ne sera <strong><span style="color: #005ab3">ja</span><span style="color: #0054ae">mai</span><span style="color: #004ca7">s i</span><span style="color: #0047a2">de</span><span style="color: #00419e">nt</span><span style="color: #003b99">iq</span><span style="color: #003694">ue </span><span style="color: #00308f">à un </span><span style="color: #002888">au</span><span style="color: #002284">tr</span><span style="color: #001d7f">e h</span><span style="color: #00177a">as</span><span style="color: #001275">h</span></strong>, même si le mot de base est <strong><span style="color: #005ab3">l</span><span style="color: #004ea8">e </span><span style="color: #00419e">m</span><span style="color: #003593">ê</span><span style="color: #002888">m</span><span style="color: #001c7e">e</span></strong>, testez par vous-même<strong> <span style="color: #005ab3">v</span><span style="color: #0053ad">o</span><span style="color: #004ba6">u</span><span style="color: #0044a0">s </span><span style="color: #003c99">v</span><span style="color: #003593">e</span><span style="color: #002d8d">r</span><span style="color: #002686">r</span><span style="color: #001e80">e</span><span style="color: #001779">z</span></strong> !</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p><p>[PHP]echo password_hash('azerty123', PASSWORD_BCRYPT);</p><p>[/PHP]</p><p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'">Vous verrez que le résultat n'est <strong><span style="color: #005ab3">j</span><span style="color: #0054ae">a</span><span style="color: #004ea8">m</span><span style="color: #0047a3">a</span><span style="color: #00419e">i</span><span style="color: #003b98">s </span><span style="color: #003593">l</span><span style="color: #002e8e">e </span><span style="color: #002888">m</span><span style="color: #002283">ê</span><span style="color: #001c7e">m</span><span style="color: #001578">e</span></strong>, c'est pour ça qu'il faut utiliser <strong><span style="color: #005ab3">la </span><span style="color: #0054ae">fo</span><span style="color: #004ea9">nc</span><span style="color: #0048a4">ti</span><span style="color: #00429f">on </span><span style="color: #003c99">pa</span><span style="color: #003694">ss</span><span style="color: #00308f">wo</span><span style="color: #002a8a">rd</span><span style="color: #002485">_v</span><span style="color: #001e80">er</span><span style="color: #00187b">if</span><span style="color: #001276">y</span></strong> qui vérifie le hash et détermine si le mot de passe rentré <strong><span style="color: #005ab3">po</span><span style="color: #0050aa">ur </span><span style="color: #0046a2">se </span><span style="color: #003c99">co</span><span style="color: #003291">nn</span><span style="color: #002888">ec</span><span style="color: #001e80">te</span><span style="color: #001477">r</span></strong> correspond au mot de passe <strong><span style="color: #005ab3">re</span><span style="color: #0053ad">nt</span><span style="color: #004ba6">ré </span><span style="color: #0044a0">à l</span><span style="color: #003c99">'i</span><span style="color: #003593">ns</span><span style="color: #002d8d">cr</span><span style="color: #002686">ip</span><span style="color: #001e80">ti</span><span style="color: #001779">on</span></strong>.</span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"></span></span></p> <p style="text-align: center"><span style="font-size: 12px"><span style="font-family: 'Convergence'"><img src="https://reality-gaming.fr/attachments/djamel2-png.89023/" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Et voilà <img src="/images/smileys/smiley-rg.svg" class="smilie" loading="lazy" alt=":RG:" title="RG :RG:" data-shortname=":RG:" /> vous savez maintenant comment faire un <strong><span style="color: #005ab3">fo</span><span style="color: #0053ad">rm</span><span style="color: #004ca7">ul</span><span style="color: #0045a1">ai</span><span style="color: #003d9b">re </span><span style="color: #003695">de </span><span style="color: #002f8e">co</span><span style="color: #002888">nn</span><span style="color: #002182">ex</span><span style="color: #001a7c">io</span><span style="color: #001376">n</span> </strong>en Ajax, je vous laisse modifier le code à votre guise pour <strong><span style="color: #005ab3">l'</span><span style="color: #0052ac">ad</span><span style="color: #004aa6">ap</span><span style="color: #00429f">te</span><span style="color: #003a98">r à </span><span style="color: #003391">vo</span><span style="color: #002b8b">tr</span><span style="color: #002384">e s</span><span style="color: #001b7d">it</span><span style="color: #001376">e</span></strong>, le <strong><span style="color: #005ab3">s</span><span style="color: #004faa">y</span><span style="color: #0045a1">s</span><span style="color: #003a98">t</span><span style="color: #002f8e">è</span><span style="color: #002485">m</span><span style="color: #001a7c">e</span></strong> est le même que pour faire un <strong><span style="color: #005ab3">c</span><span style="color: #0047a3">h</span><span style="color: #003593">a</span><span style="color: #002283">t</span></strong> ou autre.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Le code est très simple, faîtes <strong><span style="color: #005ab3">vo</span><span style="color: #0050aa">s p</span><span style="color: #0046a2">ro</span><span style="color: #003c99">pr</span><span style="color: #003291">es </span><span style="color: #002888">te</span><span style="color: #001e80">st</span><span style="color: #001477">s</span></strong> avec, et, au fur et à mesure vous pourrez faire de très <strong><span style="color: #005ab3">b</span><span style="color: #0052ac">o</span><span style="color: #0049a5">n</span><span style="color: #00419e">s </span><span style="color: #003997">t</span><span style="color: #00308f">r</span><span style="color: #002888">u</span><span style="color: #002081">c</span><span style="color: #00177a">s</span></strong>. <img src="/images/smiley-pack/y.gif" class="smilie" loading="lazy" alt=":ok:" title="D'accord :ok:" data-shortname=":ok:" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Si vous avez une <strong><span style="color: #005ab3">q</span><span style="color: #0051ab">u</span><span style="color: #0047a3">e</span><span style="color: #003e9b">s</span><span style="color: #003593">t</span><span style="color: #002b8b">i</span><span style="color: #002283">o</span><span style="color: #00187b">n</span> </strong>ou un <strong><span style="color: #005ab3">so</span><span style="color: #0051ab">uc</span><span style="color: #0047a3">is </span><span style="color: #003e9b">av</span><span style="color: #003593">ec </span><span style="color: #002b8b">le </span><span style="color: #002283">co</span><span style="color: #00187b">de</span></strong> dîtes-le moi, ou même <strong><span style="color: #005ab3">un</span><span style="color: #0053ad">e a</span><span style="color: #004ca7">mé</span><span style="color: #0045a1">li</span><span style="color: #003d9b">or</span><span style="color: #003695">at</span><span style="color: #002f8e">io</span><span style="color: #002888">n d</span><span style="color: #002182">u c</span><span style="color: #001a7c">od</span><span style="color: #001376">e</span></strong> !? <img src="/data/assets/smilies/espion.gif" class="smilie" loading="lazy" alt=":espion:" title="Espion :espion:" data-shortname=":espion:" /></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px">Merci à [USER=146051]@Hayzen SEC[/USER] pour le header.</span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center"><span style="font-family: 'Convergence'"><span style="font-size: 12px"><img src="/data/assets/smilies/tchuss.gif" class="smilie" loading="lazy" alt=":tchuss:" title="Tchuss :tchuss:" data-shortname=":tchuss:" /></span></span></p></blockquote><p></p>
[QUOTE="WhiiTe', post: 6657060, member: 8987"] [CENTER] [ATTACH=full]92636[/ATTACH][/CENTER] [SIZE=3][FONT=Convergence]Salut à tous,[/FONT][/SIZE] [CENTER][FONT=Convergence][SIZE=3]Dans ce tutoriel je vais vous apprendre à faire un [B][COLOR=#005ab3]fo[/COLOR][COLOR=#0054ae]rmu[/COLOR][COLOR=#004ca7]la[/COLOR][COLOR=#0047a2]ir[/COLOR][COLOR=#00419e]e d[/COLOR][COLOR=#003b99]e c[/COLOR][COLOR=#003694]on[/COLOR][COLOR=#00308f]nex[/COLOR][COLOR=#002888]io[/COLOR][COLOR=#002284]n e[/COLOR][COLOR=#001d7f]n A[/COLOR][COLOR=#00177a]ja[/COLOR][COLOR=#001275]x[/COLOR][/B] en Ajax, aucun rafraîchissement de la page ne sera fait, excepté la [B][COLOR=#005ab3]r[/COLOR][COLOR=#0053ad]e[/COLOR][COLOR=#004ca7]d[/COLOR][COLOR=#0046a2]i[/COLOR][COLOR=#003f9c]r[/COLOR][COLOR=#003896]e[/COLOR][COLOR=#003190]c[/COLOR][COLOR=#002a8a]t[/COLOR][COLOR=#002384]i[/COLOR][COLOR=#001d7f]o[/COLOR][COLOR=#001679]n[/COLOR][/B] du membre si les informations rentrées sont bonnes. Pour ce tutoriel vous devrez avoir une [B][COLOR=#005ab3]b[/COLOR][COLOR=#0054ae]a[/COLOR][COLOR=#004ea8]s[/COLOR][COLOR=#0047a3]e [/COLOR][COLOR=#00419e]d[/COLOR][COLOR=#003b98]e [/COLOR][COLOR=#003593]d[/COLOR][COLOR=#002e8e]o[/COLOR][COLOR=#002888]n[/COLOR][COLOR=#002283]n[/COLOR][COLOR=#001c7e]é[/COLOR][COLOR=#001578]e[/COLOR][/B], logique, et une table qui contient [B][COLOR=#005ab3]le[/COLOR][COLOR=#0053ad]s m[/COLOR][COLOR=#004ca7]em[/COLOR][COLOR=#0045a1]br[/COLOR][COLOR=#003d9b]es [/COLOR][COLOR=#003695]de [/COLOR][COLOR=#002f8e]vo[/COLOR][COLOR=#002888]tr[/COLOR][COLOR=#002182]e s[/COLOR][COLOR=#001a7c]it[/COLOR][COLOR=#001376]e[/COLOR][/B]. J'utiliserai l'éditeur de texte [B][COLOR=#005ab3]A[/COLOR][COLOR=#0047a3]t[/COLOR][COLOR=#003593]o[/COLOR][COLOR=#002283]m[/COLOR] [/B]pour ce tutoriel, j'ai 3 pages pour ce tutoriel, login.php, result.php, login.js. [IMG]https://reality-gaming.fr/attachments/djamel2-png.89023/[/IMG][/SIZE] [SIZE=3]Dans login.php nous allons mettre [B][COLOR=#005ab3]l[/COLOR][COLOR=#0052ac]e[/COLOR][COLOR=#0049a5]s [/COLOR][COLOR=#00419e]c[/COLOR][COLOR=#003997]h[/COLOR][COLOR=#00308f]a[/COLOR][COLOR=#002888]m[/COLOR][COLOR=#002081]p[/COLOR][COLOR=#00177a]s[/COLOR][/B] pour rentrer un [B][COLOR=#005ab3]ps[/COLOR][COLOR=#0052ac]eu[/COLOR][COLOR=#004aa6]do[/COLOR][COLOR=#00429f], u[/COLOR][COLOR=#003a98]n m[/COLOR][COLOR=#003391]ot [/COLOR][COLOR=#002b8b]de [/COLOR][COLOR=#002384]pa[/COLOR][COLOR=#001b7d]ss[/COLOR][COLOR=#001376]e[/COLOR][/B] etc.., c'est dans ce fichier que toute la partie [B][COLOR=#005ab3]a[/COLOR][COLOR=#0052ac]f[/COLOR][COLOR=#0049a5]f[/COLOR][COLOR=#00419e]i[/COLOR][COLOR=#003997]c[/COLOR][COLOR=#00308f]h[/COLOR][COLOR=#002888]a[/COLOR][COLOR=#002081]g[/COLOR][COLOR=#00177a]e[/COLOR] [/B]sera, n'oubliez pas de [B][COLOR=#005ab3]l[/COLOR][COLOR=#0047a3]i[/COLOR][COLOR=#003593]e[/COLOR][COLOR=#002283]r[/COLOR][/B] votre base de donnée. Dans result.php nous allons [B][COLOR=#005ab3]vé[/COLOR][COLOR=#0054ae]ri[/COLOR][COLOR=#004ea9]fi[/COLOR][COLOR=#0049a4]er [/COLOR][COLOR=#00439f]le[/COLOR][COLOR=#003d9a]s d[/COLOR][COLOR=#003795]onn[/COLOR][COLOR=#002f8e]ée[/COLOR][COLOR=#002989]s r[/COLOR][COLOR=#002384]en[/COLOR][COLOR=#001d7f]tr[/COLOR][COLOR=#00187a]ée[/COLOR][COLOR=#001275]s[/COLOR] [/B]pour connecter le membre, ici il n'y aura que du [B][COLOR=#005ab3]P[/COLOR][COLOR=#00419e]H[/COLOR][COLOR=#002888]P[/COLOR][/B]. Dans login.js se trouvera toute la partie [B][COLOR=#005ab3]J[/COLOR][COLOR=#0053ad]a[/COLOR][COLOR=#004ba6]v[/COLOR][COLOR=#0044a0]a[/COLOR][COLOR=#003c99]S[/COLOR][COLOR=#003593]c[/COLOR][COLOR=#002d8d]r[/COLOR][COLOR=#002686]i[/COLOR][COLOR=#001e80]p[/COLOR][COLOR=#001779]t[/COLOR][/B]. [IMG]https://reality-gaming.fr/attachments/djamel2-png.89023/[/IMG][/SIZE] [SIZE=3]Commençons par [B][COLOR=#005ab3]l[/COLOR][COLOR=#0052ac]o[/COLOR][COLOR=#0049a5]g[/COLOR][COLOR=#00419e]i[/COLOR][COLOR=#003997]n[/COLOR][COLOR=#00308f].[/COLOR][COLOR=#002888]p[/COLOR][COLOR=#002081]h[/COLOR][COLOR=#00177a]p[/COLOR][/B], on va afficher [B][COLOR=#005ab3]d[/COLOR][COLOR=#0053ad]e[/COLOR][COLOR=#004ba6]u[/COLOR][COLOR=#0044a0]x [/COLOR][COLOR=#003c99]c[/COLOR][COLOR=#003593]h[/COLOR][COLOR=#002d8d]a[/COLOR][COLOR=#002686]m[/COLOR][COLOR=#001e80]p[/COLOR][COLOR=#001779]s[/COLOR][/B], lier jQuery et lier notre fichier [B][COLOR=#005ab3]l[/COLOR][COLOR=#0051ab]o[/COLOR][COLOR=#0047a3]g[/COLOR][COLOR=#003e9b]i[/COLOR][COLOR=#003593]n[/COLOR][COLOR=#002b8b].[/COLOR][COLOR=#002283]j[/COLOR][COLOR=#00187b]s[/COLOR][/B]. [/SIZE][/FONT][/CENTER] [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>[/HTML] [CENTER][SIZE=3][FONT=Convergence] Vous remarquez la DIV [B][COLOR=#005ab3]r[/COLOR][COLOR=#0051ab]e[/COLOR][COLOR=#0047a3]s[/COLOR][COLOR=#003e9b]p[/COLOR][COLOR=#003593]o[/COLOR][COLOR=#002b8b]n[/COLOR][COLOR=#002283]s[/COLOR][COLOR=#00187b]e[/COLOR][/B], c'est dans cette DIV que sera affiché les [B][COLOR=#005ab3]m[/COLOR][COLOR=#0051ab]e[/COLOR][COLOR=#0047a3]s[/COLOR][COLOR=#003e9b]s[/COLOR][COLOR=#003593]a[/COLOR][COLOR=#002b8b]g[/COLOR][COLOR=#002283]e[/COLOR][COLOR=#00187b]s[/COLOR][/B], comme "[B][COLOR=#005ab3]Ps[/COLOR][COLOR=#0050aa]eu[/COLOR][COLOR=#0046a2]do [/COLOR][COLOR=#003c99]in[/COLOR][COLOR=#003291]co[/COLOR][COLOR=#002888]rr[/COLOR][COLOR=#001e80]ec[/COLOR][COLOR=#001477]t[/COLOR][/B] .. ". Bien évidemment mettez ça entre [B][COLOR=#005ab3]v[/COLOR][COLOR=#0055ae]o[/COLOR][COLOR=#004faa]s [/COLOR][COLOR=#004aa5]ba[/COLOR][COLOR=#003f9c]li[/COLOR][COLOR=#003593]s[/COLOR][COLOR=#002f8e]es [/COLOR][COLOR=#002485]bo[/COLOR][COLOR=#001a7c]d[/COLOR][COLOR=#001478]y[/COLOR][/B].[/FONT][/SIZE] [FONT=Convergence] [SIZE=3][IMG]https://reality-gaming.fr/attachments/djamel2-png.89023/[/IMG][/SIZE] [SIZE=3]Maintenant, la partie [B][COLOR=#005ab3]J[/COLOR][COLOR=#0053ad]a[/COLOR][COLOR=#004ba6]v[/COLOR][COLOR=#0044a0]a[/COLOR][COLOR=#003c99]S[/COLOR][COLOR=#003593]c[/COLOR][COLOR=#002d8d]r[/COLOR][COLOR=#002686]i[/COLOR][COLOR=#001e80]p[/COLOR][COLOR=#001779]t[/COLOR][/B] ! Premièrement je dis, dès que [B][COLOR=#005ab3]j[/COLOR][COLOR=#0054ae]Q[/COLOR][COLOR=#004ea9]u[/COLOR][COLOR=#0049a4]e[/COLOR][COLOR=#00439f]r[/COLOR][COLOR=#003d9a]y [/COLOR][COLOR=#003795]es[/COLOR][COLOR=#002c8c]t [/COLOR][COLOR=#002687]p[/COLOR][COLOR=#002082]r[/COLOR][COLOR=#001b7d]ê[/COLOR][COLOR=#001578]t[/COLOR] [/B]et que le bouton poussoir a été [B][COLOR=#005ab3]c[/COLOR][COLOR=#004ea8]l[/COLOR][COLOR=#00419e]i[/COLOR][COLOR=#003593]q[/COLOR][COLOR=#002888]u[/COLOR][/B][COLOR=#001c7e]é[/COLOR], on met les valeurs des deux champs dans des [B][COLOR=#005ab3]v[/COLOR][COLOR=#0052ac]a[/COLOR][COLOR=#0049a5]r[/COLOR][COLOR=#00419e]i[/COLOR][COLOR=#003997]a[/COLOR][COLOR=#00308f]b[/COLOR][COLOR=#002888]l[/COLOR][COLOR=#002081]e[/COLOR][COLOR=#00177a]s[/COLOR][/B], après ça je vérifie si leurs valeur n'est pas [B][COLOR=#005ab3]n[/COLOR][COLOR=#004ba6]u[/COLOR][COLOR=#003c99]l[/COLOR][COLOR=#002d8d]l[/COLOR][COLOR=#001e80]e[/COLOR][/B]. [/SIZE][/FONT][/CENTER] [CODE]$(document).ready(function(){ $('#submit').click(function(){ var username = $('#username').val(); var password = $('#password').val(); if(username != "" && password != "") { } }); });[/CODE] [CENTER][SIZE=3][FONT=Convergence] Maintenant la partie[B] [COLOR=#005ab3]A[/COLOR][COLOR=#0047a3]j[/COLOR][COLOR=#003593]a[/COLOR][COLOR=#002283]x[/COLOR][/B], je vous explique le code après. [/FONT][/SIZE][/CENTER] [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(); } });[/CODE] [CENTER][SIZE=3][FONT=Convergence] On définie [B][COLOR=#005ab3]l[/COLOR][COLOR=#0055ae]'[/COLOR][COLOR=#004faa]u[/COLOR][COLOR=#004aa5]rl [/COLOR][COLOR=#003f9c]du [/COLOR][COLOR=#003593]f[/COLOR][COLOR=#002f8e]ic[/COLOR][COLOR=#002485]hi[/COLOR][COLOR=#001a7c]e[/COLOR][COLOR=#001478]r[/COLOR][/B] qui va traiter les [B][COLOR=#005ab3]i[/COLOR][COLOR=#0054ae]n[/COLOR][COLOR=#004ea8]f[/COLOR][COLOR=#0047a3]o[/COLOR][COLOR=#00419e]r[/COLOR][COLOR=#003b98]m[/COLOR][COLOR=#003593]a[/COLOR][COLOR=#002e8e]t[/COLOR][COLOR=#002888]i[/COLOR][COLOR=#002283]o[/COLOR][COLOR=#001c7e]n[/COLOR][COLOR=#001578]s[/COLOR][/B], ensuite on précise la [B][COLOR=#005ab3]m[/COLOR][COLOR=#004faa]é[/COLOR][COLOR=#0045a1]t[/COLOR][COLOR=#003a98]h[/COLOR][COLOR=#002f8e]o[/COLOR][COLOR=#002485]d[/COLOR][COLOR=#001a7c]e[/COLOR][/B], data correspond aux [B][COLOR=#005ab3]d[/COLOR][COLOR=#0055ae]o[/COLOR][COLOR=#004faa]n[/COLOR][COLOR=#004aa5]né[/COLOR][COLOR=#003f9c]es [/COLOR][COLOR=#003593]e[/COLOR][COLOR=#002f8e]nv[/COLOR][COLOR=#002485]oy[/COLOR][COLOR=#001a7c]é[/COLOR][COLOR=#001478]s[/COLOR][/B] via le formulaire, là j'envoie les valeurs de mes [B][COLOR=#005ab3]d[/COLOR][COLOR=#0053ad]e[/COLOR][COLOR=#004ba6]u[/COLOR][COLOR=#0044a0]x [/COLOR][COLOR=#003c99]c[/COLOR][COLOR=#003593]h[/COLOR][COLOR=#002d8d]a[/COLOR][COLOR=#002686]m[/COLOR][COLOR=#001e80]p[/COLOR][COLOR=#001779]s[/COLOR][/B], qui ont étés placées dans des [B][COLOR=#005ab3]v[/COLOR][COLOR=#0052ac]a[/COLOR][COLOR=#0049a5]r[/COLOR][COLOR=#00419e]i[/COLOR][COLOR=#003997]a[/COLOR][COLOR=#00308f]b[/COLOR][COLOR=#002888]l[/COLOR][COLOR=#002081]e[/COLOR][COLOR=#00177a]s[/COLOR][/B]. [B][COLOR=#005ab3]b[/COLOR][COLOR=#0053ad]e[/COLOR][COLOR=#004ba6]f[/COLOR][COLOR=#0044a0]o[/COLOR][COLOR=#003c99]r[/COLOR][COLOR=#003593]e[/COLOR][COLOR=#002d8d]S[/COLOR][COLOR=#002686]e[/COLOR][COLOR=#001e80]n[/COLOR][COLOR=#001779]d[/COLOR] [/B]est comme son nom l'indique avant l'envoie, moi je dis d'afficher un message pour dire à l'utilisateur que [B][COLOR=#005ab3]se[/COLOR][COLOR=#0054ae]s d[/COLOR][COLOR=#004ea9]on[/COLOR][COLOR=#0048a4]né[/COLOR][COLOR=#00429f]es [/COLOR][COLOR=#003c99]on[/COLOR][COLOR=#003694]t é[/COLOR][COLOR=#00308f]té[/COLOR][COLOR=#002a8a]s e[/COLOR][COLOR=#002485]nv[/COLOR][COLOR=#001e80]oy[/COLOR][COLOR=#00187b]ée[/COLOR][COLOR=#001276]s[/COLOR][/B] et qu'il doit attendre. [B][COLOR=#005ab3]s[/COLOR][COLOR=#004faa]u[/COLOR][COLOR=#0045a1]c[/COLOR][COLOR=#003a98]c[/COLOR][COLOR=#002f8e]e[/COLOR][COLOR=#002485]s[/COLOR][COLOR=#001a7c]s[/COLOR][/B] 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 [B][COLOR=#005ab3]r[/COLOR][COLOR=#0051ab]e[/COLOR][COLOR=#0047a3]s[/COLOR][COLOR=#003e9b]p[/COLOR][COLOR=#003593]o[/COLOR][COLOR=#002b8b]n[/COLOR][COLOR=#002283]s[/COLOR][COLOR=#00187b]e[/COLOR][/B]), et j'affiche le message dans la DIV [B][COLOR=#005ab3]r[/COLOR][COLOR=#0051ab]e[/COLOR][COLOR=#0047a3]s[/COLOR][COLOR=#003e9b]p[/COLOR][COLOR=#003593]o[/COLOR][COLOR=#002b8b]n[/COLOR][COLOR=#002283]s[/COLOR][COLOR=#00187b]e[/COLOR][/B], tout comme [B][COLOR=#005ab3]b[/COLOR][COLOR=#0053ad]e[/COLOR][COLOR=#004ba6]f[/COLOR][COLOR=#0044a0]o[/COLOR][COLOR=#003c99]r[/COLOR][COLOR=#003593]e[/COLOR][COLOR=#002d8d]S[/COLOR][COLOR=#002686]e[/COLOR][COLOR=#001e80]n[/COLOR][COLOR=#001779]d[/COLOR][/B]. [IMG]https://reality-gaming.fr/attachments/djamel2-png.89023/[/IMG][/FONT][/SIZE] [FONT=Convergence] [SIZE=3]Pour finir il faut faire la partie [B][COLOR=#005ab3]t[/COLOR][COLOR=#0053ad]r[/COLOR][COLOR=#004ba6]a[/COLOR][COLOR=#0044a0]i[/COLOR][COLOR=#003c99]t[/COLOR][COLOR=#003593]e[/COLOR][COLOR=#002d8d]m[/COLOR][COLOR=#002686]e[/COLOR][COLOR=#001e80]n[/COLOR][COLOR=#001779]t[/COLOR][/B]. Dans result.php, pensez à lier votre base de donnée pour [B][COLOR=#005ab3]vé[/COLOR][COLOR=#0053ad]ri[/COLOR][COLOR=#004da8]fi[/COLOR][COLOR=#0046a2]er [/COLOR][COLOR=#00409d]le[/COLOR][COLOR=#003997]s i[/COLOR][COLOR=#003392]nf[/COLOR][COLOR=#002c8c]or[/COLOR][COLOR=#002686]ma[/COLOR][COLOR=#001f81]ti[/COLOR][COLOR=#00197b]on[/COLOR][COLOR=#001276]s[/COLOR][/B]. Le code entier : [/SIZE][/FONT][/CENTER] [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 } } [/PHP] [CENTER][SIZE=3] [FONT=Convergence] Vous remarquerez quelque chose d'inhabituel, si vous [B][COLOR=#005ab3]ch[/COLOR][COLOR=#0053ad]if[/COLOR][COLOR=#004ca7]fr[/COLOR][COLOR=#0046a2]ez [/COLOR][COLOR=#003f9c]vo[/COLOR][COLOR=#003896]s m[/COLOR][COLOR=#003190]ot[/COLOR][COLOR=#002a8a]s d[/COLOR][COLOR=#002384]e p[/COLOR][COLOR=#001d7f]as[/COLOR][COLOR=#001679]se[/COLOR][/B] simplement en [B][COLOR=#005ab3]m[/COLOR][COLOR=#0052ac]d[/COLOR][COLOR=#0049a5]5 [/COLOR][COLOR=#00419e]o[/COLOR][COLOR=#003997]u [/COLOR][COLOR=#00308f]s[/COLOR][COLOR=#002888]h[/COLOR][COLOR=#002081]a[/COLOR][COLOR=#00177a]1[/COLOR][/B], je chiffre mes mots de passe avec [B][COLOR=#005ab3]p[/COLOR][COLOR=#0054ae]a[/COLOR][COLOR=#004ea9]s[/COLOR][COLOR=#0049a4]s[/COLOR][COLOR=#00439f]w[/COLOR][COLOR=#003d9a]o[/COLOR][COLOR=#003795]rd[/COLOR][COLOR=#002c8c]_[/COLOR][COLOR=#002687]h[/COLOR][COLOR=#002082]a[/COLOR][COLOR=#001b7d]s[/COLOR][COLOR=#001578]h[/COLOR][/B], ce qui me permet d'avoir un [B][COLOR=#005ab3]h[/COLOR][COLOR=#0053ad]a[/COLOR][COLOR=#004ba6]s[/COLOR][COLOR=#0044a0]h [/COLOR][COLOR=#003c99]u[/COLOR][COLOR=#003593]n[/COLOR][COLOR=#002d8d]i[/COLOR][COLOR=#002686]q[/COLOR][COLOR=#001e80]u[/COLOR][COLOR=#001779]e[/COLOR][/B] qui ne sera [B][COLOR=#005ab3]ja[/COLOR][COLOR=#0054ae]mai[/COLOR][COLOR=#004ca7]s i[/COLOR][COLOR=#0047a2]de[/COLOR][COLOR=#00419e]nt[/COLOR][COLOR=#003b99]iq[/COLOR][COLOR=#003694]ue [/COLOR][COLOR=#00308f]à un [/COLOR][COLOR=#002888]au[/COLOR][COLOR=#002284]tr[/COLOR][COLOR=#001d7f]e h[/COLOR][COLOR=#00177a]as[/COLOR][COLOR=#001275]h[/COLOR][/B], même si le mot de base est [B][COLOR=#005ab3]l[/COLOR][COLOR=#004ea8]e [/COLOR][COLOR=#00419e]m[/COLOR][COLOR=#003593]ê[/COLOR][COLOR=#002888]m[/COLOR][COLOR=#001c7e]e[/COLOR][/B], testez par vous-même[B] [COLOR=#005ab3]v[/COLOR][COLOR=#0053ad]o[/COLOR][COLOR=#004ba6]u[/COLOR][COLOR=#0044a0]s [/COLOR][COLOR=#003c99]v[/COLOR][COLOR=#003593]e[/COLOR][COLOR=#002d8d]r[/COLOR][COLOR=#002686]r[/COLOR][COLOR=#001e80]e[/COLOR][COLOR=#001779]z[/COLOR][/B] ! [/FONT][/SIZE][/CENTER] [PHP]echo password_hash('azerty123', PASSWORD_BCRYPT); [/PHP] [CENTER][SIZE=3][FONT=Convergence] Vous verrez que le résultat n'est [B][COLOR=#005ab3]j[/COLOR][COLOR=#0054ae]a[/COLOR][COLOR=#004ea8]m[/COLOR][COLOR=#0047a3]a[/COLOR][COLOR=#00419e]i[/COLOR][COLOR=#003b98]s [/COLOR][COLOR=#003593]l[/COLOR][COLOR=#002e8e]e [/COLOR][COLOR=#002888]m[/COLOR][COLOR=#002283]ê[/COLOR][COLOR=#001c7e]m[/COLOR][COLOR=#001578]e[/COLOR][/B], c'est pour ça qu'il faut utiliser [B][COLOR=#005ab3]la [/COLOR][COLOR=#0054ae]fo[/COLOR][COLOR=#004ea9]nc[/COLOR][COLOR=#0048a4]ti[/COLOR][COLOR=#00429f]on [/COLOR][COLOR=#003c99]pa[/COLOR][COLOR=#003694]ss[/COLOR][COLOR=#00308f]wo[/COLOR][COLOR=#002a8a]rd[/COLOR][COLOR=#002485]_v[/COLOR][COLOR=#001e80]er[/COLOR][COLOR=#00187b]if[/COLOR][COLOR=#001276]y[/COLOR][/B] qui vérifie le hash et détermine si le mot de passe rentré [B][COLOR=#005ab3]po[/COLOR][COLOR=#0050aa]ur [/COLOR][COLOR=#0046a2]se [/COLOR][COLOR=#003c99]co[/COLOR][COLOR=#003291]nn[/COLOR][COLOR=#002888]ec[/COLOR][COLOR=#001e80]te[/COLOR][COLOR=#001477]r[/COLOR][/B] correspond au mot de passe [B][COLOR=#005ab3]re[/COLOR][COLOR=#0053ad]nt[/COLOR][COLOR=#004ba6]ré [/COLOR][COLOR=#0044a0]à l[/COLOR][COLOR=#003c99]'i[/COLOR][COLOR=#003593]ns[/COLOR][COLOR=#002d8d]cr[/COLOR][COLOR=#002686]ip[/COLOR][COLOR=#001e80]ti[/COLOR][COLOR=#001779]on[/COLOR][/B]. [IMG]https://reality-gaming.fr/attachments/djamel2-png.89023/[/IMG][/FONT][/SIZE] [FONT=Convergence] [SIZE=3]Et voilà :RG: vous savez maintenant comment faire un [B][COLOR=#005ab3]fo[/COLOR][COLOR=#0053ad]rm[/COLOR][COLOR=#004ca7]ul[/COLOR][COLOR=#0045a1]ai[/COLOR][COLOR=#003d9b]re [/COLOR][COLOR=#003695]de [/COLOR][COLOR=#002f8e]co[/COLOR][COLOR=#002888]nn[/COLOR][COLOR=#002182]ex[/COLOR][COLOR=#001a7c]io[/COLOR][COLOR=#001376]n[/COLOR] [/B]en Ajax, je vous laisse modifier le code à votre guise pour [B][COLOR=#005ab3]l'[/COLOR][COLOR=#0052ac]ad[/COLOR][COLOR=#004aa6]ap[/COLOR][COLOR=#00429f]te[/COLOR][COLOR=#003a98]r à [/COLOR][COLOR=#003391]vo[/COLOR][COLOR=#002b8b]tr[/COLOR][COLOR=#002384]e s[/COLOR][COLOR=#001b7d]it[/COLOR][COLOR=#001376]e[/COLOR][/B], le [B][COLOR=#005ab3]s[/COLOR][COLOR=#004faa]y[/COLOR][COLOR=#0045a1]s[/COLOR][COLOR=#003a98]t[/COLOR][COLOR=#002f8e]è[/COLOR][COLOR=#002485]m[/COLOR][COLOR=#001a7c]e[/COLOR][/B] est le même que pour faire un [B][COLOR=#005ab3]c[/COLOR][COLOR=#0047a3]h[/COLOR][COLOR=#003593]a[/COLOR][COLOR=#002283]t[/COLOR][/B] ou autre. Le code est très simple, faîtes [B][COLOR=#005ab3]vo[/COLOR][COLOR=#0050aa]s p[/COLOR][COLOR=#0046a2]ro[/COLOR][COLOR=#003c99]pr[/COLOR][COLOR=#003291]es [/COLOR][COLOR=#002888]te[/COLOR][COLOR=#001e80]st[/COLOR][COLOR=#001477]s[/COLOR][/B] avec, et, au fur et à mesure vous pourrez faire de très [B][COLOR=#005ab3]b[/COLOR][COLOR=#0052ac]o[/COLOR][COLOR=#0049a5]n[/COLOR][COLOR=#00419e]s [/COLOR][COLOR=#003997]t[/COLOR][COLOR=#00308f]r[/COLOR][COLOR=#002888]u[/COLOR][COLOR=#002081]c[/COLOR][COLOR=#00177a]s[/COLOR][/B]. :ok: Si vous avez une [B][COLOR=#005ab3]q[/COLOR][COLOR=#0051ab]u[/COLOR][COLOR=#0047a3]e[/COLOR][COLOR=#003e9b]s[/COLOR][COLOR=#003593]t[/COLOR][COLOR=#002b8b]i[/COLOR][COLOR=#002283]o[/COLOR][COLOR=#00187b]n[/COLOR] [/B]ou un [B][COLOR=#005ab3]so[/COLOR][COLOR=#0051ab]uc[/COLOR][COLOR=#0047a3]is [/COLOR][COLOR=#003e9b]av[/COLOR][COLOR=#003593]ec [/COLOR][COLOR=#002b8b]le [/COLOR][COLOR=#002283]co[/COLOR][COLOR=#00187b]de[/COLOR][/B] dîtes-le moi, ou même [B][COLOR=#005ab3]un[/COLOR][COLOR=#0053ad]e a[/COLOR][COLOR=#004ca7]mé[/COLOR][COLOR=#0045a1]li[/COLOR][COLOR=#003d9b]or[/COLOR][COLOR=#003695]at[/COLOR][COLOR=#002f8e]io[/COLOR][COLOR=#002888]n d[/COLOR][COLOR=#002182]u c[/COLOR][COLOR=#001a7c]od[/COLOR][COLOR=#001376]e[/COLOR][/B] !? :espion: Merci à [USER=146051]@Hayzen SEC[/USER] pour le header. :tchuss:[/SIZE][/FONT][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
TUTO AJAX | Formulaire de connexion
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut