Formulaire d'inscription HTML CSS. Création de formulaires HTML. Connexion à la base de données

Salut tout le monde. Nous avons donc appris quelques éléments pour créer des formes. Il est temps de combiner nos connaissances pour résoudre un problème plus important. Créons le formulaire d'autorisation le plus simple sur le site. Pour ce faire, nous avons besoin de deux champs, nous les créons et y attachons des signatures.

Le premier champ est destiné au login, le second au mot de passe. Et avec le second, ce n’est pas si simple. Parce que pour le moment, ce n'est qu'un champ de saisie de texte.

Résultat dans le navigateur :

Pour que le texte qui y est saisi soit remplacé par des astérisques, comme c'est l'usage pour un champ de ce type, vous devez effectuer une action simple. À savoir, pour remplacer la valeur de l'attribut taper sur mot de passe:

Résultat:

Bouton d'envoi du formulaire

Voici. Notre formulaire est presque prêt. Maintenant, pour terminer sa création, vous devez créer un bouton qui servira à soumettre le formulaire. Le problème est résolu à l'aide d'une balise avec type soumettre.

Si le bouton doit avoir une sorte d'inscription, cela peut être fait en utilisant l'attribut valeur. C'est à vous de décider si vous donnez ou non un nom au bouton, mais si vous le faites, le serveur recevra ce nom ainsi que la valeur du bouton.

En règle générale, le nom d'un bouton d'envoi de formulaire est nécessaire lorsque le formulaire comporte plusieurs boutons, chacun effectuant une action spécifique. Grâce à cela, le serveur, recevant le nom et la valeur du bouton du navigateur, comprend sur quel bouton l'utilisateur a cliqué et ce qui doit être fait en conséquence.

En conséquence, le code de notre formulaire sera le suivant :

Résultat dans le navigateur :

Le premier champ est destiné au login, le second au mot de passe. Et avec le second, ce n’est pas si simple. Parce que pour le moment, ce n'est qu'un champ de saisie de texte.

Résultat dans le navigateur :

Résultat:

Bouton d'envoi du formulaire

En conséquence, le code de notre formulaire sera le suivant :

Résultat dans le navigateur :

Voici un exemple de formulaire d'inscription en HTML. Ici, un programmeur peut afficher autant de "Champs de texte" qu'il le souhaite. Le nom devant le champ de texte s'appelle "Label". A la fin du formulaire d'inscription se trouve un bouton "AJOUTER" derrière lequel tout lien souhaité peut être utilisé. Une fois cliqué, il sera redirigé vers cette destination particulière.

Code HTML pour le formulaire d'inscription

Dans cet exemple, nous avons montré 9 "Champ de texte". La taille de la zone de texte peut également être modifiée selon les besoins.

inscription.html

formulaire d'inscription

Formulaire d'inscription

Dans cet article, vous apprendrez comment créer un formulaire d'inscription et d'autorisation en utilisant HTML, JavaScript, PHP et MySql. De tels formulaires sont utilisés sur presque tous les sites Web, quel que soit leur type. Ils sont créés pour un forum, une boutique en ligne, des réseaux sociaux (tels que Facebook, Twitter, Odnoklassniki) et bien d'autres types de sites.

Si vous avez un site Web sur votre ordinateur local, j'espère que vous l'avez déjà. Sans cela, rien ne fonctionnera.

Création d'une table dans la base de données

Afin de mettre en œuvre l’enregistrement des utilisateurs, nous avons tout d’abord besoin d’une base de données. Si vous l’avez déjà, tant mieux, sinon vous devez le créer. Dans l'article, j'explique en détail comment procéder.

Et donc, nous avons une base de données (en abrégé DB), maintenant nous devons créer une table utilisateurs dans lequel nous ajouterons nos utilisateurs enregistrés.

J'ai également expliqué comment créer une table dans une base de données dans l'article. Avant de créer une table, nous devons déterminer quels champs elle contiendra. Ces champs correspondront aux champs du formulaire d'inscription.

Nous avons donc réfléchi, imaginé les champs de notre formulaire et créé un tableau utilisateurs avec ces champs :

identifiant- Identifiant. Champ identifiant Chaque table de la base de données devrait l'avoir.
prénom- Pour enregistrer le nom.
nom de famille- Pour conserver le nom de famille.
e-mail- Pour enregistrer l'adresse postale. Nous utiliserons l'e-mail comme identifiant, ce champ doit donc être unique, c'est-à-dire avoir l'index UNIQUE.
email_statut- Champ pour indiquer si le mail est confirmé ou non. Si le mail est confirmé, alors il aura la valeur 1, sinon la valeur est 0. Par défaut, ce champ aura la valeur 0.
mot de passe- Pour enregistrer le mot de passe.

Tous les champs de type « VARCHAR » doivent avoir une valeur par défaut de NULL.

Si vous souhaitez que votre formulaire d'inscription comporte d'autres champs, vous pouvez également les ajouter ici.

Ça y est, notre table utilisateurs prêt. Passons à l'étape suivante.

Connexion à la base de données

Nous avons créé la base de données, nous devons maintenant nous y connecter. Nous nous connecterons en utilisant l'extension PHP MySQLi.

Dans le dossier de notre site, créez un fichier portant le nom dbconnect.php, et écrivez-y le script suivant :

Erreur de connexion à la base de données. Description de l'erreur : ".mysqli_connect_error()."

"; exit(); ) // Définir l'encodage de la connexion $mysqli->set_charset("utf8"); // Pour plus de commodité, ajoutez ici une variable qui contiendra le nom de notre site $address_site = "http://testsite .local" ; ?>

Ce fichier dbconnect.php devra être connecté aux gestionnaires de formulaire.

Notez la variable $adresse_site, j'ai indiqué ici le nom de mon site de test sur lequel je vais travailler. Veuillez indiquer le nom de votre site en conséquence.

Structure du site

Regardons maintenant la structure HTML de notre site.

Nous allons déplacer l'en-tête et le pied de page du site dans des fichiers séparés, en-tête.php Et pied de page.php. Nous les inclurons sur toutes les pages. A savoir sur la page principale (fichier index.php), à la page contenant le formulaire d'inscription (fichier formulaire_register.php) et à la page contenant le formulaire d'autorisation (fichier formulaire_auth.php).

Bloquez avec nos liens, inscription Et autorisation, ajoutez-les à l'en-tête du site pour qu'ils soient affichés sur toutes les pages. Un lien sera saisi à page du formulaire d'inscription(déposer formulaire_register.php) et l'autre à la page avec formulaire d'autorisation(déposer formulaire_auth.php).

Contenu du fichier header.php :

Nom de notre site

En conséquence, notre page principale ressemble à ceci :

Bien sûr, votre site peut avoir une structure complètement différente, mais ce n'est pas important pour nous pour le moment. L'essentiel est qu'il existe des liens (boutons) pour l'enregistrement et l'autorisation.

Passons maintenant au formulaire d'inscription. Comme vous l'avez déjà compris, nous l'avons dans nos dossiers formulaire_register.php.

Allez dans la base de données (dans phpMyAdmin), ouvrez la structure des tables utilisateurs et regardez de quels champs nous avons besoin. Cela signifie que nous avons besoin de champs pour saisir le nom et le prénom, d'un champ pour saisir l'adresse postale (Email) et d'un champ pour saisir le mot de passe. Et pour des raisons de sécurité, nous ajouterons un champ permettant de saisir un captcha.

Sur le serveur, suite au traitement du formulaire d'inscription, diverses erreurs peuvent survenir à cause desquelles l'utilisateur ne pourra pas s'inscrire. Par conséquent, pour que l'utilisateur comprenne pourquoi l'enregistrement échoue, il est nécessaire d'afficher des messages concernant ces erreurs.

Avant d'afficher le formulaire, ajoutez un bloc pour afficher les messages d'erreur de la session.

Et encore une chose, si l'utilisateur est déjà autorisé, et par curiosité il se rend directement à la page d'inscription en écrivant dans la barre d'adresse du navigateur adresse_site/form_register.php, alors dans ce cas, à la place du formulaire d'inscription, nous afficherons un en-tête indiquant qu'il est déjà inscrit.

En général, le code du fichier formulaire_register.php nous avons eu ceci :

Vous êtes déjà inscrit

Dans le navigateur, la page avec le formulaire d'inscription ressemble à ceci :

En utilisant attribut obligatoire, nous avons rendu tous les champs obligatoires.

Faites attention au code du formulaire d'inscription où le captcha s'affiche:

Nous avons spécifié le chemin d'accès au fichier dans la valeur de l'attribut src de l'image captcha.php, qui génère ce captcha.

Regardons le code du fichier captcha.php:

Le code est bien commenté, je me concentrerai donc sur un seul point.

À l'intérieur d'une fonction imageTtfTexte(), le chemin d'accès à la police est spécifié verdana.ttf. Donc pour que le captcha fonctionne correctement, il faut créer un dossier polices, et placez-y le fichier de police verdana.ttf. Vous pouvez le trouver et le télécharger sur Internet, ou le récupérer dans les archives avec les éléments de cet article.

Nous en avons terminé avec la structure HTML, il est temps de passer à autre chose.

Vérifier la validité des e-mails à l'aide de jQuery

Tout formulaire doit vérifier la validité des données saisies, tant côté client (en utilisant JavaScript, jQuery) que côté serveur.

Il faut porter une attention particulière au champ Email. Il est très important que l'adresse postale saisie soit valide.

Pour ce champ de saisie, nous définissons le type d'e-mail (type="email"), cela nous met légèrement en garde contre des formats incorrects. Mais cela ne suffit pas, car grâce à l'inspecteur de code que nous fournit le navigateur, nous pouvons facilement modifier la valeur de l'attribut. taper Avec e-mail sur texte, et voilà, notre chèque ne sera plus valable.

Et dans ce cas, il faut faire un contrôle plus fiable. Pour ce faire, nous utiliserons la bibliothèque jQuery de JavaScript.

Pour connecter la bibliothèque jQuery, dans le fichier en-tête.php entre les balises , avant la balise fermante , ajoutez cette ligne :

Immédiatement après cette ligne, nous ajouterons le code de validation de l'e-mail. Ici, nous ajouterons un code pour vérifier la longueur du mot de passe saisi. Sa longueur doit être d'au moins 6 caractères.

À l'aide de ce script, nous vérifions la validité de l'adresse e-mail saisie. Si l'utilisateur a saisi un e-mail incorrect, nous affichons un message d'erreur à ce sujet et désactivons le bouton d'envoi du formulaire. Si tout va bien, nous supprimons l'erreur et activons le bouton d'envoi du formulaire.

Et voilà, nous en avons terminé avec la validation des formulaires côté client. Nous pouvons maintenant l'envoyer au serveur, où nous effectuerons également quelques vérifications et ajouterons des données à la base de données.

Enregistrement de l'utilisateur

Nous envoyons le formulaire au fichier pour traitement s'inscrire.php, via la méthode POST. Le nom de ce fichier de gestionnaire est spécifié dans la valeur de l'attribut action. Et la méthode d'envoi est spécifiée dans la valeur de l'attribut méthode.

Ouvrez ce fichier s'inscrire.php et la première chose que nous devons faire est d'écrire une fonction de lancement de session et de connecter le fichier que nous avons créé précédemment dbconnect.php(Dans ce fichier, nous avons établi une connexion à la base de données). Et aussi, déclarons immédiatement les cellules messages d'erreur Et messages_de_succès dans le tableau de sessions global. DANS messages_d'erreur nous enregistrerons tous les messages d'erreur qui surviennent lors du traitement du formulaire, et dans messages_de_succès, nous enregistrerons des messages joyeux.

Avant de continuer, nous devons vérifier le formulaire a-t-il été soumis ?. Un attaquant peut regarder la valeur de l'attribut actionà partir du formulaire et découvrez quel fichier traite ce formulaire. Et il aura peut-être l’idée d’accéder directement à ce fichier en tapant l’adresse suivante dans la barre d’adresse du navigateur : http://adresse_site/register.php

Nous devons donc rechercher une cellule dans le tableau POST global dont le nom correspond au nom de notre bouton "S'inscrire" du formulaire. De cette façon, nous vérifions si le bouton "S'inscrire" a été cliqué ou non.

Si un attaquant tente d'accéder directement à ce fichier, il recevra un message d'erreur. Je vous rappelle que la variable $address_site contient le nom du site et qu'elle a été déclarée dans le fichier dbconnect.php.

Erreur! page d'accueil.

"); } ?>

La valeur du captcha dans la session a été ajoutée lors de sa génération, dans le fichier captcha.php. Pour rappel, je vais vous montrer à nouveau ce morceau de code du fichier captcha.php, où la valeur captcha est ajoutée à la session :

Passons maintenant à la vérification elle-même. Dans le fichier s'inscrire.php, à l'intérieur du bloc if, où l'on vérifie si le bouton "S'inscrire" a été cliqué, ou plutôt où le commentaire " est indiqué" // (1) Espace pour le morceau de code suivant"nous écrivons:

//Vérifie le captcha reçu //Coupe les espaces du début et de la fin de la ligne $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Comparez la valeur reçue avec la valeur de la session. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Si le captcha n'est pas correct, alors nous renvoyons l'utilisateur à la page d'inscription, et là nous lui afficherons un message d'erreur indiquant qu'il a saisi le mauvais captcha . $message_erreur = "

Erreur! Vous avez saisi le mauvais captcha

"; // Enregistre le message d'erreur dans la session. $_SESSION["error_messages"] = $error_message; // Renvoie l'utilisateur à la page d'inscription header("HTTP/1.1 301 Moved Permanently"); header("Location: " .$address_site ."/form_register.php"); //Arrêtez le script exit(); ) // (2) Place pour le prochain morceau de code)else( //Si le captcha n'est pas passé ou s'il est vide, exit ("

Erreur! Il n'y a pas de code de vérification, c'est-à-dire un code captcha. Vous pouvez accéder à la page principale.

"); }

Ensuite, nous devons traiter les données reçues du tableau POST. Tout d'abord, nous devons vérifier le contenu du tableau POST global, c'est-à-dire s'il existe des cellules dont les noms correspondent aux noms des champs de saisie de notre formulaire.

Si la cellule existe, alors nous supprimons les espaces du début et de la fin de la ligne de cette cellule, sinon nous redirigeons l'utilisateur vers la page contenant le formulaire d'inscription.

Ensuite, après avoir coupé les espaces, nous ajoutons la ligne à la variable et vérifions si cette variable est vide ; si elle n'est pas vide, nous passons à autre chose, sinon nous redirigeons l'utilisateur vers la page avec le formulaire d'inscription.

Collez ce code à l'emplacement spécifié" // (2) Espace pour le prochain morceau de code".

/* Vérifiez s'il y a des données envoyées depuis le formulaire dans le tableau global $_POST et enveloppez les données soumises dans des variables régulières.*/ if(isset($_POST["first_name"]))( // Coupez les espaces depuis le début et fin de la chaîne $first_name = trim($_POST["first_name"]); //Vérifie si la variable est vide if(!empty($first_name))( // Pour des raisons de sécurité, convertissez les caractères spéciaux en entités HTML $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Enregistre le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Entrez votre nom

Le champ de nom est manquant

"; //Retourne l'utilisateur à la page d'inscription header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Arrêtez le script exit(); ) if( isset($_POST["last_name"]))( //Coupe les espaces du début et de la fin de la ligne $last_name = trim($_POST["last_name"]); if(!empty($last_name)) ( // Pour des raisons de sécurité, convertissez les caractères spéciaux en entités HTML $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Enregistrez le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Veuillez entrer votre nom de famille

Le champ du nom de famille est manquant

"; //Retourne l'utilisateur à la page d'inscription header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Arrêtez le script exit(); ) if( isset($_POST["email"]))( //Coupe les espaces du début et de la fin de la ligne $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Emplacement du code pour vérifier le format de l'adresse e-mail et son unicité )else( // Enregistre le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Entrer votre Email

"; //Retourne l'utilisateur à la page d'inscription header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Arrêtez le script exit(); ) if( isset($_POST["password"]))( //Coupe les espaces du début et de la fin de la chaîne $password = trim($_POST["password"]); if(!empty($password)) ( $password = htmlspecialchars ($password, ENT_QUOTES); //Crypter le mot de passe $password = md5($password."top_secret"); )else( // Enregistrer le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Tapez votre mot de passe

Le domaine est particulièrement important e-mail. Il faut vérifier le format de l'adresse postale reçue et son unicité dans la base de données. Autrement dit, y a-t-il un utilisateur déjà enregistré avec la même adresse e-mail ?

À l'endroit indiqué" // (3) Localisation du code pour vérifier le format de l'adresse postale et son unicité" ajoutez le code suivant :

//Vérifiez le format de l'adresse email reçue à l'aide d'une expression régulière $reg_email = "/^**@(+(*+)*\.)++/i"; //Si le format de l'adresse email reçue ne correspond pas à l'expression régulière if(!preg_match($reg_email, $email))( // Enregistrez le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Vous avez entré un e-mail incorrect

"; //Retourne l'utilisateur à la page d'inscription header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Arrêtez le script exit(); ) // Nous vérifions si une telle adresse est déjà dans la base de données. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); / /Si le nombre de reçus il y a exactement une ligne, ce qui signifie que l'utilisateur avec cette adresse email est déjà enregistré if($result_query->num_rows == 1)( //Si le résultat obtenu n'est pas faux if(($row = $result_query->fetch_assoc()) != false) ( // Enregistre le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Un utilisateur avec cette adresse e-mail est déjà enregistré

"; //Retourne l'utilisateur à la page d'inscription header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); )else( // Enregistre le message d'erreur à la session . $_SESSION["error_messages"] .= "

Erreur dans la requête de base de données

"; //Retourne l'utilisateur à la page d'inscription header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); ) /* fermeture de la sélection */ $ result_query-> close(); //Arrêtez le script exit(); ) /* fermeture de la sélection */ $result_query->close();

Et voilà, nous avons terminé toutes les vérifications, il est temps d’ajouter l’utilisateur à la base de données. À l'endroit indiqué" // (4) Emplacement du code d'ajout d'un utilisateur à la base de données" ajoutez le code suivant :

//Requête pour ajouter un utilisateur à la base de données $result_query_insert = $mysqli->query("INSERT INTO `users` (prénom, nom, email, mot de passe) VALUES ("".$first_name."", "".$last_name ." ", "".$email.", "".$mot de passe."")"); if(!$result_query_insert)( // Enregistre le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Erreur dans la demande d'ajout d'un utilisateur à la base de données

Inscription terminée avec succès !!!
Vous pouvez maintenant vous connecter en utilisant votre nom d'utilisateur et votre mot de passe.

"; //Envoyer l'utilisateur vers la page d'autorisation header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); ) /* Compléter la demande */ $ result_query_insert-> close(); //Ferme la connexion à la base de données $mysqli->close();

Si une erreur s'est produite dans la demande d'ajout d'un utilisateur à la base de données, nous ajoutons un message concernant cette erreur à la session et renvoyons l'utilisateur à la page d'inscription.

Sinon, si tout s’est bien passé, on ajoute également un message à la session, mais cette fois c’est plus agréable, à savoir on informe l’utilisateur que l’inscription a réussi. Et nous le redirigeons vers la page avec le formulaire d'autorisation.

Le script de vérification du format de l'adresse email et de la longueur du mot de passe est dans le fichier en-tête.php, cela s'appliquera donc également aux champs de ce formulaire.

La session est également démarrée dans le fichier en-tête.php, donc dans le fichier formulaire_auth.php Il n'est pas nécessaire de démarrer une session, car nous obtiendrons une erreur.

Comme je l'ai déjà dit, le script permettant de vérifier le format de l'adresse e-mail et la longueur du mot de passe fonctionne également ici. Par conséquent, si l'utilisateur saisit une adresse e-mail incorrecte ou un mot de passe court, il recevra immédiatement un message d'erreur. Un bouton entrer deviendra inactif.

Après avoir corrigé les erreurs, le bouton entrer devient actif et l'utilisateur pourra soumettre le formulaire au serveur, où il sera traité.

Autorisation de l'utilisateur

Pour attribuer une valeur action le handicap d'autorisation a un fichier spécifié auth.php, cela signifie que le formulaire sera traité dans ce fichier.

Et donc, ouvrez le fichier auth.php et écrivez du code pour traiter le formulaire d'autorisation. La première chose à faire est de démarrer une session et de connecter le fichier dbconnect.php pour vous connecter à la base de données.

//Déclarez une cellule pour ajouter les erreurs pouvant survenir lors du traitement du formulaire. $_SESSION["messages_erreurs"] = ""; //Déclarez une cellule pour ajouter les messages réussis $_SESSION["success_messages"] = "";

/* Vérifiez si le formulaire a été soumis, c'est-à-dire si le bouton de connexion a été cliqué. Si oui, alors nous passons à autre chose, sinon, nous afficherons un message d'erreur à l'utilisateur indiquant qu'il a accédé directement à cette page. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Espace pour le morceau de code suivant)else( exit("

Erreur! Vous avez accédé directement à cette page, il n'y a donc aucune donnée à traiter. Vous pouvez accéder à la page principale.

"); }

//Vérifie le captcha reçu if(isset($_POST["captcha"]))( //Coupe les espaces du début et de la fin de la ligne $captcha = trim($_POST["captcha"]); if(! vide($captcha ))( //Comparez la valeur reçue avec la valeur de la session. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")) ( // Si le captcha est incorrect, alors nous renvoyons l'utilisateur à la page d'autorisation, et là nous lui afficherons un message d'erreur indiquant qu'il a entré le mauvais captcha. $error_message = "

Erreur! Vous avez saisi le mauvais captcha

Erreur! Le champ de saisie du captcha ne doit pas être vide.

"; // Enregistre le message d'erreur dans la session. $_SESSION["error_messages"] = $error_message; // Renvoie l'utilisateur à la page d'autorisation header("HTTP/1.1 301 Moved Permanently"); header("Location: " .$address_site ."/form_auth.php"); //Arrêtez le script exit(); ) //(2) Lieu de traitement de l'adresse email //(3) Lieu de traitement du mot de passe //(4) Lieu de composer une requête vers la base de données )else ( //Si le captcha n'est pas transmis, exit("

Erreur! Il n'y a pas de code de vérification, c'est-à-dire un code captcha. Vous pouvez accéder à la page principale.

"); }

Si l'utilisateur a saisi correctement le code de vérification, alors nous passons à autre chose, sinon nous le renvoyons à la page d'autorisation.

Vérification de l'adresse postale

// Coupe les espaces au début et à la fin de la ligne $email = trim($_POST["email"]); if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Vérifiez le format de l'adresse email reçue à l'aide d'une expression régulière $ reg_email = " /^**@(+(*+)*\.)++/i"; //Si le format de l'adresse email reçue ne correspond pas à l'expression régulière if(!preg_match($reg_email, $email ))( // Enregistrer dans le message d'erreur de session. $_SESSION["error_messages"] .= "

Vous avez entré un e-mail incorrect

"; //Retourne l'utilisateur à la page d'autorisation header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Arrêtez le script exit(); ) )else ( // Enregistre le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Le champ de saisie d'une adresse postale (email) ne doit pas être vide.

Le champ de saisie de l'e-mail est manquant

Si l'utilisateur a saisi une adresse e-mail dans un mauvais format ou si la valeur du champ de l'adresse e-mail est vide, alors nous le renvoyons à la page d'autorisation où nous affichons un message à ce sujet.

Vérification du mot de passe

Le prochain champ à traiter est le champ du mot de passe. À l'endroit spécifié" //(3) Lieu de traitement des mots de passe", nous écrivons:

If(isset($_POST["password"]))( //Coupe les espaces du début et de la fin de la chaîne $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); //Crypter le mot de passe $password = md5($password."top_secret"); )else( //Enregistrer le message d'erreur dans la session. $_SESSION["error_messages"] . = "

Tapez votre mot de passe

Le champ du mot de passe est manquant

"; //Retourne l'utilisateur à la page d'inscription header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Arrêtez le script exit(); )

Ici, nous utilisons la fonction md5() pour crypter le mot de passe reçu, puisque nos mots de passe sont sous forme cryptée dans la base de données. Un mot secret supplémentaire en chiffrement, dans notre cas" Top secret" doit être celui qui a été utilisé lors de l'enregistrement de l'utilisateur.

Vous devez maintenant effectuer une requête dans la base de données pour sélectionner un utilisateur dont l'adresse e-mail est égale à l'adresse e-mail reçue et dont le mot de passe est égal au mot de passe reçu.

//Requête dans la base de données basée sur la sélection de l'utilisateur. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = "".$password."""); if(!$result_query_select)( // Enregistre le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Erreur de requête lors de la sélection d'un utilisateur dans la base de données

"; //Retourne l'utilisateur à la page d'inscription header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Arrêtez le script exit(); )else( //Vérifie s'il n'y a aucun utilisateur avec de telles données dans la base de données, puis affiche un message d'erreur if($result_query_select->num_rows == 1)( // Si les données saisies correspondent aux données de la base de données, enregistrez le login et le mot de passe du tableau des sessions. $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Retourne l'utilisateur à l'en-tête de la page principale ("HTTP/1.1 301 Moved Permanently" ); header("Emplacement : ".$address_site ."/index.php"); )else( // Enregistre le message d'erreur dans la session. $_SESSION["error_messages"] .= "

Identifiant et/ou mot de passe incorrect

"; //Retourne l'utilisateur à la page d'autorisation header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Arrêtez le script exit(); ) )

Sortie du site

Et la dernière chose que nous mettons en œuvre est procédure pour quitter le site. Pour le moment, dans l'en-tête, nous affichons des liens vers la page d'autorisation et la page d'enregistrement.

Dans l'en-tête du site (fichier en-tête.php), à l'aide de la session, nous vérifions si l'utilisateur est déjà autorisé. Sinon, nous affichons les liens d'enregistrement et d'autorisation, sinon (s'il est autorisé), alors à la place des liens d'enregistrement et d'autorisation, nous affichons le lien Sortie.

Morceau de code modifié à partir du fichier en-tête.php:

Inscription

Sortie

Lorsque vous cliquez sur le lien de sortie du site, nous sommes redirigés vers un fichier déconnexion.php, où nous détruisons simplement les cellules avec l'adresse e-mail et le mot de passe de la session. Après cela, nous renvoyons l'utilisateur à la page sur laquelle le lien a été cliqué sortie.

Code de fichier déconnexion.php :

C'est tout. Maintenant tu sais comment mettre en œuvre et traiter les formulaires d’enregistrement et d’autorisation utilisateur sur votre site Web. Ces formulaires se trouvent sur presque tous les sites Web, chaque programmeur doit donc savoir comment les créer.

Nous avons également appris à valider les données d'entrée, tant côté client (dans le navigateur, en utilisant JavaScript, jQuery) que côté serveur (en utilisant PHP). Nous avons également appris mettre en place une procédure de sortie du site.

Tous les scripts ont été testés et fonctionnent. Vous pouvez télécharger l'archive avec les fichiers de ce petit site à partir de ce lien.

À l'avenir, j'écrirai un article dans lequel je décrirai. Et je compte aussi écrire un article où j'expliquerai (sans recharger la page). Ainsi, afin de rester informé de la sortie de nouveaux articles, vous pouvez vous abonner à mon site internet.

Si vous avez des questions, n'hésitez pas à me contacter, et si vous remarquez une erreur dans l'article, n'hésitez pas à me le faire savoir.

Plan de cours (partie 5) :

Création d'une structure HTML pour le formulaire d'autorisation
Nous traitons les données reçues
Nous affichons le message de bienvenue de l'utilisateur dans l'en-tête du site

Avez-vous aimé l'article?

Nous avons compilé une liste de 60 formulaires de connexion gratuits que vous pouvez utiliser sur votre site, blog, forum WordPress, etc. Chaque formulaire est minutieusement testé pour garantir son fonctionnement et la disponibilité du code source.

Personnalisateur de connexion WordPress

Les formulaires de cette liste sont créés en utilisant HTML/CSS. Mais dans ce cas, nous parlons du meilleur plugin pour personnaliser l’interface utilisateur de WordPress. Il est livré avec plusieurs modèles qui peuvent être personnalisés pour s'adapter à la conception de votre site Web. Avec ce plugin, vous pouvez vous débarrasser de la page de connexion WordPress ennuyeuse.

Télécharger

Aperçu

Formulaire d'autorisation n°19

Vibrant, énergique et passionnant, voilà en quoi consiste ce formulaire d'inscription. Il est entièrement réactif, optimisé pour les mobiles et compatible avec tous les principaux navigateurs Web.

Télécharger

Aperçu

Formulaire d'autorisation n°20

Fond dégradé, bouton noir avec effet de survol, champs de saisie du login et du mot de passe, ainsi qu'une rubrique « Mot de passe oublié ? Tout cela est dans le formulaire d'autorisation n°20.

Télécharger

Aperçu

Un exemple de création d'un formulaire de connexion simple en utilisant HTML5 et CSS3. Il utilise des pseudo-éléments (:after et :before) pour créer l'effet de plusieurs pages. Ce formulaire utilise HTML5 pour simplifier la validation et la présentation des données.

Télécharger

Connectez-vous avec Shake Effect

Si vous avez entré un mauvais mot de passe, vous en serez averti avec un bel effet de secousse. Une solution simple et efficace.

Télécharger

Identifiant:
Nom:
Cours:
Bifurquer:
Numéro de rouleau :
Adresse e-mail:
Nom d'utilisateur:
À propos de nous:
Mot de passe:

Bouton d'envoi du formulaire

Bouton d'envoi du formulaire

Code HTML pour le formulaire d'inscription

Formulaire d'inscription

Création d'une table dans la base de données

Connexion à la base de données

Structure du site

Vous êtes déjà inscrit

Vérifier la validité des e-mails à l'aide de jQuery

Enregistrement de l'utilisateur

Autorisation de l'utilisateur

Vérification de l'adresse postale

Vérification du mot de passe

Sortie du site

Avez-vous aimé l'article?

Personnalisateur de connexion WordPress

Formulaire de connexion créative

Formulaire d'autorisation n°1

Formulaire d'autorisation n°2

Formulaire d'autorisation n°3

Formulaire d'autorisation n°4

Formulaire d'autorisation n°5

Formulaire d'autorisation n°6

Formulaire d'autorisation n°7

Formulaire d'autorisation n°8

Formulaire d'autorisation n°9

Formulaire d'autorisation n°10

Formulaire d'autorisation n°11

Formulaire d'autorisation n°12

Formulaire d'autorisation n°13

Formulaire d'autorisation n°14

Formulaire d'autorisation n°15

Formulaire d'autorisation n°16

Formulaire d'autorisation n°17

Formulaire d'autorisation n°18

Formulaire d'autorisation n°19

Formulaire d'autorisation n°20

Formulaire de connexion déroulant

Formulaire d'inscription flottant

Formulaire d'autorisation simple

Connexion plate – Formulaire d'inscription

Connectez-vous avec le formulaire SCSS autonome

Formulaire de connexion animé

Formulaire de connexion utilisant CSS3 et HTML5

Connectez-vous avec Shake Effect

Formulaire de connexion Boxy