Lorsqu’il s’agit de créer des sites Web pour le monde réel, il est essentiel d’avoir un simple formulaire d’inscription pour. Internet est pratiquement intégré aux sites Web des membres. Donc, dans le cadre de ma série de tutoriels sur le système des membres php, nous allons créer un simple formulaire d’inscription en php.
Assez rapide et facile à écrire à partir de zéro, ce formulaire de registre simple permettra à tout utilisateur de s’inscrire avec juste un nom d’utilisateur, un e-mail et un mot de passe, mais vous pouvez facilement ajouter un e-mail si vous le souhaitez.
Pour un aperçu très simple du code source de notre page d’enregistrement php, voici:
<?php // connect to the database // check for a user being logged in // process the registration form data ?> <html> display a header display the error message (if there is one) display the registration form </html>Comment faire un Formulaire d’inscription simple en php
- Créer la base de données pour le formulaire d’inscription
- Faire le formulaire d’inscription simple en HTML/CSS
- Se connecter à la base de données MySQL en utilisant php
- Traiter l’entrée du formulaire d’inscription
- Ajouter de nouveaux comptes d’utilisateurs à la base de données
Étape 1: Créer la base de données pour le formulaire d’inscription
Souvent, la première étape de la création d’un site Web consiste à créer la base de données. Et bien sûr, vous devrez probablement apporter des modifications à votre base de données plus tard. Mais la configuration de votre base de données en premier, vous donnera un excellent point de départ
Nous allons créer une base de données simple pour stocker toutes les informations de compte de l’utilisateur, y compris son nom d’utilisateur et son mot de passe. Allez-y et connectez-vous à votre panneau de configuration phpMyAdmin sur votre serveur. (si vous êtes nouveau sur phpMyAdmin, consultez mon article d’introduction à phpMyAdmin)
Champs de base de données pour notre système d’adhésion php
Chaque base de données a besoin d’un nom, et comme j’aime garder la vie simple, appelons notre base de données « utilisateurs ».
REMARQUE: Je suppose que vous avez déjà au moins une compréhension de base de l’utilisation de phpMyAdmin et du fonctionnement des bases de données MySQL. Sinon, vous pouvez lire les bases de phpMyAdmin ou le fonctionnement de la base de données MySQL ici sur HeyTuts.com . (ces liens s’ouvriront dans de nouveaux onglets)
Puisque nous faisons un simple formulaire d’inscription, nous n’aurons besoin que de 7 champs dans notre base de données. De cette façon, nous obtenons immédiatement suffisamment de fonctionnalités de base. Mais peut toujours ajouter des fonctionnalités supplémentaires comme un formulaire de réinitialisation de mot de passe.
- id – ce sera un identifiant unique pour chaque utilisateur. Nous devons nous assurer que le champ id est un entier et défini sur l’incrémentation automatique avec une clé primaire. C’est un must!!! Lorsque vous progressez vers des systèmes membres plus complexes, l’utilisation de l’identifiant de compte de l’utilisateur facilite grandement la liaison des enregistrements de base de données.
- nom d’utilisateur – cela devrait être explicite. J’ai mis le mien sur un varchar de 50 caractères. Très rarement, les utilisateurs voudront un nom d’utilisateur de plus de 10 à 15 caractères, donc 50 devraient s’en occuper. Mais cela vous donnera également la possibilité de définir la longueur de votre nom d’utilisateur souhaité dans votre code php.
- email – l’adresse e-mail de l’utilisateur. Définissez-le un varchar de 100 caractères.
- mot de passe – nous utiliserons un cryptage de base pour les mots de passe de nos utilisateurs. Donc, un varchar de 50 caractères fera l’affaire. Plus tard, vous nous verrez utiliser la fonction md5() pour créer un hachage de mot de passe de base pour une sécurité simple.
- date_created – cela stockera une valeur time() du moment où l’utilisateur a créé son compte.
- last_login – nous pouvons suivre la dernière fois que l’utilisateur s’est connecté en mettant à jour cet enregistrement ici. Encore une fois sera de la fonction time().
- statut – suivez l’état d’activation du compte. Nous pouvons vérifier cette valeur pour voir si l’utilisateur a activé son compte ou non, et sur cette base, laissez-le se connecter ou lui donner un avis pour activer son compte.
Étape 2: Créez le formulaire d’inscription simple en HTML / CSS
Avec la configuration de la base de données, nous pouvons créer le formulaire d’inscription réel que l’utilisateur utilisera pour créer son compte. Comme à peu près tous les formulaires de site Web, nous le ferons avec HTML et CSS.
Créez un registre.fichier php sur votre serveur web
Je vais appeler ma page de formulaire d’inscription register.php, alors allez-y et créez ce fichier sur votre serveur web. Je recommande de créer tout ce système de membres sur votre serveur Web localhost avec XAMPP (lien externe).
Créer un en-tête de navigation de base
L’en-tête de ce tutoriel sur le système membre php sera également simple. Avec quelques liens juste pour une navigation super basique. Vous trouverez ci-dessous la configuration de base de la page pour notre registre.fichier php.
<html> <head> <title>php member system | registration form</title> </head> <body> <h1>member system tutorial - register</h1> <a href="./index.php">Home</a> | <a href="./register.php">Register</a> | <a href="./login.php">Login</a> <hr /> <!-- error message code here --> <!-- registration form html code here --> </body></html>Créez le formulaire d’inscription actuel
Maintenant, nous pouvons créer le formulaire que l’utilisateur va voir et interagir avec. Si vous repensez à la configuration de notre base de données, nous n’avons que 3 champs que l’utilisateur peut saisir: le nom d’utilisateur, le mot de passe et l’adresse e-mail. N’oubliez pas d’ajouter du texte pour afficher les étiquettes pour lesquelles les champs sont requis.
Par bonne pratique, j’aime ajouter un champ de mot de passe supplémentaire pour que l’utilisateur confirme son mot de passe. Et assurez-vous de dire aux utilisateurs la force de mot de passe requise.
Je déteste quand les sites Web exigent certaines exigences de mot de passe, mais ne vous dites pas ces exigences! Idiot.
Pour obtenir un mot de passe sécurisé pour le compte de l’utilisateur, nous aurons besoin d’au moins 5 caractères. Avec au moins un caractère spécial de l’un d’entre eux :!#$.,:;(). Cela ne donnera pas à l’utilisation le mot de passe le plus sécurisé, mais cela vous donnera une idée de la façon de forcer des mots de passe plus forts à votre plus tard.
<form action="./register.php" class="form" method="POST"><h1>create a new account</h1><div class=""><?php// check to see if the user successfully created an accountif (isset($success) && $success == true){echo '<p color="green">Yay!! Your account has been created. <a href="./login.php">Click here</a> to login!<p>';}// check to see if the error message is set, if so display itelse if (isset($error_msg))echo '<p color="red">'.$error_msg.'</p>';?></div><div class=""><input type="text" name="username" value="" placeholder="enter a username" autocomplete="off" required /></div><div class=""><input type="text" name="email" value="" placeholder="provide an email" autocomplete="off" required /></div><div class=""><input type="password" name="passwd" value="" placeholder="enter a password" autocomplete="off" required /></div><div class=""><p>password must be at least 5 characters and<br /> have a special character, e.g. !#$.,:;()</font></p></div><div class=""><input type="password" name="confirm_password" value="" placeholder="confirm your password" autocomplete="off" required /></div><div class=""><input class="" type="submit" name="registerBtn" value="create account" /></div><p class="center"><br />Already have an account? <a href="<?php echo SITE_ADDR ?>/login">Login here</a></p></form>Si vous remarquez, je mets notre formulaire de registre dans un tableau simple juste pour aligner tout bien pour l’utilisateur. La chose importante à noter ici est l’action de formulaire (aka POST), les noms des zones de texte et le nom du bouton d’envoi.
Tous ces noms de champs sont cruciaux dans le script principal pour récupérer les données une fois que l’utilisateur a soumis le formulaire. Notez également la méthode de formulaire, POST, qui masquera les données de formulaire de l’utilisateur au lieu de les envoyer à l’URL comme GET will.
Afficher un message d’erreur, si nécessaire
Sur la page de registre, vous et vos utilisateurs trouverez utile d’afficher réellement un message d’erreur. En cas de besoin. Je vais le mettre en dessous de la navigation et au-dessus du formulaire de registre. Ce message donnera à l’utilisateur une idée de ce qu’il a mal fait et doit corriger avant de pouvoir créer son compte.
Fondamentalement, ce que je vais faire, c’est créer deux variables, l’une nomméesuccesssuccess et $error_msg. Nous allons faire une simple vérification de ces deux variables en cours de définition. En fonction de s’ils sont définis (c’est-à-dire créés et attribués à une valeur), nous affichons le message d’erreur applicable.
<?php // check to see if the user successfully created an account if (isset($success) && $success == true){ echo '<font color="green">Yay!! Your account has been created. <a href="./login.php">Click here</a> to login!<font>'; } // check to see if the error message is set, if so display it else if (isset($error_msg)) echo '<font color="red">'.$error_msg.'</font>'; else echo ''; // do nothing?>L’idée est que s’il y a une erreur lors du traitement des données, nous pouvons définir le message d’erreur dans la variableererror_msg, puis il sera affiché à l’utilisateur et nous traiterons les informations. Si l’utilisateur crée son compte avec succès, nous définirons truesuccess sur true et afficherons un message de réussite en vert (car le vert est toujours bon, ai-je raison??).
Étape 3: Connectez-vous à la base de données MySQL en utilisant php
Nous pouvons maintenant accéder à une partie du code php principal. Avant de pouvoir effectuer des opérations de base de données MySQL, vous devez vous connecter à la base de données. La plupart des sites Web se connectent à la base de données dans un script de configuration ou de connexion séparé. Nous ferons donc de même.
Créez un nouveau script php nommé connect.php et enregistrez-le dans le même répertoire que le registre.fichier php.
<?php $conn = mysqli_connect("localhost", "root", "password", "code_projects");?>Étape 4: Traitez l’entrée du formulaire d’inscription
Maintenant jusqu’à la viande et les pommes de terre de ce simple formulaire d’inscription. Le code php pour traiter le formulaire après la soumission.
Puisque nous avons déjà créé notre script de connexion à la base de données, nous pouvons utiliser la fonction require_once() pour charger le script de connexion.
<?php // include our connect script require_once("connect.php"); // check to see if there is a user already logged in, if so redirect them session_start(); if (isset($_SESSION) && isset($_SESSION)) header("Location: ./index.php"); // redirect the user to the home page?>Ensuite, en utilisant des sessions php, nous suivrons si les utilisateurs sont connectés ou non. Pour l’instant, nous allons simplement vérifier si les variables de session sont définies. Nous verrons comment définir les variables de session dans le didacticiel sur le formulaire de connexion. Si l’utilisateur est connecté, nous le redirigerons vers la page d’accueil.
Obtenir toutes les données du formulaire d’inscription
Une fois que nous sommes prêts à obtenir toutes les données du formulaire, nous vérifions d’abord si le bouton d’envoi a été cliqué (c’est-à-dire que le formulaire a été soumis). Si c’était le cas, nous stockons toutes les données du formulaire dans des variables. Si le formulaire n’a pas été soumis, nous ne faisons rien d’autre que d’afficher le formulaire à l’utilisateur.
Puisque nous utilisons un type de POSTE de formulaire, nous devons obtenir les données de POSTE en utilisant notre code php. Toutes les données « postées » du formulaire seront dans la variable de tableau $_POST. Vous pouvez ensuite utiliser le nom de l’élément de formulaire comme clés de tableau. Nous permettant d’obtenir les données spécifiques que vous recherchez, comme ceci:
if (isset($_POST)){ // get all of the form data $username = $_POST; $email = $_POST; $passwd = $_POST; $passwd_again = $_POST; // next code block }Effectuez des vérifications de base sur les données du formulaire
Ensuite, nous vérifions si l’utilisateur a rempli le formulaire d’inscription. Vérification de l’adresse e-mail, du nom d’utilisateur et des mots de passe. Si nous nous assurons que chaque variable n’est pas une chaîne vide, cela signifie qu’il y a du texte là-dedans, non?
Ensuite, nous vérifions que le mot de passe et le mot de passe de confirmation sont exactement le même texte. Casquettes et tout. En utilisant trois signes égaux d’affilée (c’est-à-dire ===) dans notre instruction if, les chaînes sont appariées à la casse.
Fondamentalement, si nous comparons « bonjour » à « bonjour » en utilisant deux signes égaux, vous obtenez un vrai résultat. En effet, notre code dit « oui bonjour et bonjour sont le même mot ». Mais si nous les comparons en utilisant trois signes égaux, notre code est comme « NON! Arrêtez-vous là. Ces mots ne correspondent pas. Gros faux ! » Avoir du sens?
// verify all the required form data was enteredif ($username != "" && $passwd != "" && $passwd_again != ""){ // make sure the two passwords match if ($passwd === $passwd_again){ // make sure the password meets the min strength requirements if ( strlen($passwd) >= 5 && strpbrk($passwd, "!#$.,:;()") != false ){ // next code block } else $error_msg = 'Your password is not strong enough. Please use another.'; } else $error_msg = 'Your passwords did not match.';}else $error_msg = 'Please fill out all required fields.';Ensuite, nous pouvons nous assurer que les mots de passe répondent à nos exigences de résistance. Nos critères ohhh si impressionnants pour un mot de passe sécurisé. Au moins 5 caractères et utilisant au moins un caractère spécial.
En utilisant strlen(), nous nous assurons qu’il est suffisamment long pour respecter notre minimum de 5 caractères. Facile. Ensuite, en utilisant la fonction strpbrk(), nous pouvons vérifier si l’un des caractères spéciaux de la liste est présent. Cette fonction retournera false si aucun des caractères spéciaux n’est présent. Il renverra une chaîne s’il y en a une.
Vous pouvez en savoir plus sur la fonction sur le php.net référence. Fondamentalement, c’est juste un moyen très rapide et facile de rechercher une liste de caractères spéciaux existant dans une chaîne. Parce qu’à part l’existant, nous ne nous soucions pas vraiment d’eux.
Étape 5: Ajouter de nouveaux comptes d’utilisateurs à la base de données
Maintenant que nous savons que toutes nos données de formulaire sont bonnes et prêtes à l’emploi, nous pouvons commencer à vérifier la base de données. Nous vérifions d’abord si le nom d’utilisateur est déjà dans la base de données. Si aucun enregistrement n’est renvoyé, le nom d’utilisateur n’est pas dans la base de données. Si quelque chose d’autre est renvoyé, le nom d’utilisateur est pris.
Ensuite, nous devons créer des variables supplémentaires pour stocker certaines des autres données aléatoires que nous devons stocker dans l’enregistrement de base de données du compte d’utilisateur que nous sommes sur le point de créer. Sous ce bloc de code se trouve une explication de chacune des variables.
AVERTISSEMENT: Je tiens à souligner que pour les besoins de ce tutoriel, nous n’utilisons pas un cryptage de mot de passe très complexe. Je le fais simplement pour ne pas stocker le mot de passe en texte brut (ne le faites jamais, c’est juste mauvais). Si vous souhaitez apprendre à faire quelque chose de plus substantiel et sécurisé, consultez notre tutoriel sur la sécurité des mots de passe. Je vais en détail sur différentes méthodes pour créer et stocker des mots de passe plus sécurisés en utilisant php.
// query the database to see if the username is taken$query = mysqli_query($conn, "SELECT * FROM users WHERE username='{$username}'");if (mysqli_num_rows($query) == 0){ // create and format some variables for the database $id = ''; $passwd = md5($passwd); $date_created = time(); $last_login = 0; $status = 1; // next code block}else $error_msg = 'The username <i>'.$username.'</i> is already taken. Please use another.';- $ id – nous avons besoin d’un titulaire de place pour l’identifiant d’incrémentation automatique que la base de données affectera.
- passpasswd – nous ajoutons un cryptage de base au mot de passe de l’utilisateur en utilisant le hachage md5()
- datdate_created – en utilisant la fonction time(), nous pouvons obtenir un horodatage au moment exact où l’utilisateur crée son compte. Nous pouvons l’utiliser plus tard pour afficher en utilisant date()
- $last_login – plus tard, nous l’utiliserons pour suivre lorsque l’utilisateur se connecte. Nous le mettrons à zéro car ils ne se sont pas encore connectés.
- statusstatus – en utilisant ce champ, nous pouvons suivre l’état des comptes, comme l’activer par e-mail ou le désactiver à des fins d’administration, ou vraiment ce qui fait flotter votre bateau. Je vais définir 1 (un) par défaut, ce qui signifie un compte actif et je peux me connecter immédiatement.
Une fois que nous avons ajouté la fonctionnalité d’activation des e-mails à notre système de membres, le statut du compte entrera vraiment en jeu.
Maintenant, nous pouvons enfin créer l’enregistrement de base de données pour le compte de l’utilisateur. À l’aide d’une requête d’INSERTION, nous pouvons répertorier très soigneusement toutes les informations d’enregistrement de notre base de données.
Si vous avez besoin d’aide pour comprendre les bases du fonctionnement des requêtes. Ou même des opérations de base de données générales, consultez mon autre tutoriel sur les opérations de base de données MySQLi.
Après avoir INSÉRÉ l’enregistrement, comme bonne pratique, je vais m’assurer que l’enregistrement a bien été ajouté (car on ne sait jamais, il aurait pu y avoir une sorte d’erreur.) Puisqu’avant nous nous sommes assurés que le nom d’utilisateur n’existait PAS, maintenant si nous vérifions s’il existe et que nous trouvons un enregistrement avec lequel il est attribué, nous savons que notre nouveau compte a été créé dans la base de données. Enfin, nous venons de définir notre variable truesuccess sur true car l’utilisateur a terminé son inscription et son compte a été créé.
// insert the user into the databasemysqli_query($conn, "INSERT INTO users VALUES ( '{$id}', '{$username}', '{$email}', '{$passwd}', '{$date_created}', '{$last_login}', '{$status}')");// verify the user's account was created$query = mysqli_query($conn, "SELECT * FROM users WHERE username='{$username}'");if (mysqli_num_rows($query) == 1){ /* IF WE ARE HERE THEN THE ACCOUNT WAS CREATED! YAY! */ /* WE WILL SEND EMAIL ACTIVATION CODE HERE LATER */ $success = true;}else $error_msg = 'An error occurred and your account was not created.';Touche finale pour notre formulaire d’inscription
Maintenant avec notre registre complet.code php écrit, nous pouvons le visualiser depuis le navigateur Web. Vous pouvez même le tester et créer votre propre compte sur votre nouvelle page d’inscription !
Une fois le formulaire d’inscription simple créé, la partie suivante d’un système membre php consiste à créer le formulaire de connexion. car à quoi bon avoir un formulaire d’inscription pour créer un compte si les utilisateurs ne peuvent pas se connecter à leur compte ?