Share
Dans ce tutoriel, je vais vous montrer comment créer un système de connexion simple comprenant une page de connexion, une page d’enregistrement, une page de mot de passe oublié, une activation par e-mail, une page de déconnexion et enfin une page en ligne pour les utilisateurs. J'ai conçu ce tutoriel pour cibler principalement les développeurs débutants en PHP, car lorsque j'ai commencé, j'ai constaté le manque de quantité de systèmes de connexion de base. J'ai donc décidé d'en faire moi-même un conseil de haute qualité sur la création de votre premier système de connexion à l'aide d'un script en ligne destiné aux utilisateurs.!
Nous allons créer une feuille de style CSS très basique, juste pour ajouter un peu de design et ranger l’aspect de ce système de connexion. Alors aussi, commencez par ouvrir votre éditeur de texte et nous pouvons commencer à faire notre feuille de style.
corps font-family: arial; taille de police: 10 pt; table font-size: 10pt; marge: 0 auto; #border border: 2px solid # 999; arrière-plan: #CCC; rembourrage: 15px; marge: 0 auto; largeur: 300px;
Enregistrer ce fichier sous style.css afin que nous puissions y revenir chaque fois que nous en avons besoin. Là nous avons notre feuille de style simple! Maintenant, nous pouvons commencer à faire nos pages sans avoir à trop nous soucier de les faire paraître assez bonnes.
Nous avons donc défini une feuille de style. Il est maintenant temps d'afficher les éléments sur nos pages. Ouvrez un nouveau fichier dans votre éditeur de texte, ce sera notre login.php page!
Ok c'est ce que notre login.php Le fichier ressemblera avant que nous obtenions notre code PHP pour que le formulaire de connexion fonctionne correctement. Pour le moment, vous remarquerez que cela ne fonctionne pas. C'est parce que nous n'avons pas dit à la page quoi faire si le formulaire est soumis.
Faisons maintenant un peu de planification avant de plonger dans PHP. Nous devons nous demander "Quelle est la page que va vérifier lorsque le formulaire est soumis?". Pour la page de connexion, voici une liste de ce que nous allons vérifier -
Si PHP peut répondre par l’affirmative à ces quatre points, connectez-vous à l’utilisateur. Désormais, vous remarquerez qu’une base de données a été mentionnée. Nous allons utiliser une base de données MySQL pour stocker toutes les informations sur chacun de nos utilisateurs. Donc, avant de commencer à utiliser PHP, nous devons créer cette base de données. À ce stade, un peu plus de planification est nécessaire. Nous devons décider quelles informations nous devons stocker sur les utilisateurs, quels types de données sont stockés, avons-nous besoin d'une valeur par défaut, etc., etc. Voici mon plan ci-dessous -
Maintenant, à partir de cela, nous pouvons voir exactement comment construire notre table dans notre base de données. Commencez par créer une base de données appelée loginTut. Ensuite, dans cette base de données, nous voulons exécuter le code SQL que j'ai fourni ci-dessous -
Remarque: Toutes les tables contiennent une clé primaire. Ceci est un identifiant unique pour chaque ligne de la table!
Accentsconagua
CREATE TABLE IF NOT EXISTS 'utilisateurs' ('id' int (11) NOT NULL auto_increment, 'nomutilisateur' varchar (32) NOT NULL, 'mot de passe' varchar (32) NOT NULL, 'online' int (20) NON NULL par défaut '0', 'email' varchar (100) NON NULL, 'actif' int (1) NON NULL par défaut '0', 'rtime' int (20) NON NULL par défaut '0', PRIMARY KEY ('id')) ENGINE = MyISAM DEFAULT CHARSET = utf8; Maintenant, nous avons un tableau pour stocker toutes les informations dont nous avons besoin sur nos utilisateurs. Ajoutons un utilisateur à des fins de test. Pour ce faire, exécutez le code SQL fourni ci-dessous -
INSERT INTO 'utilisateurs' ('id', 'nom d'utilisateur', 'mot de passe', 'en ligne', 'email', 'actif', 'rtime') VALEURS (1, 'testing', 'testing', 0, 'faux @ noemail.co.uk ', 0, 0); Nous avons donc maintenant un utilisateur avec le nom d'utilisateur essai, le mot de passe essai et email [email protected]. Maintenant, nous pouvons accéder à PHP et établir le formulaire de connexion!
Tout d’abord, nous devons penser à la sécurité et à la sécurité de ce formulaire de connexion. Pour éviter l'injection SQL, qui est une forme très courante de piratage de base de données, nous allons créer une fonction qui protégera toutes les chaînes stockées dans la base de données. Nous mettrons cela dans un fichier externe appelé functions.php. Voici la source -
Cette fonction coupera notre chaîne (coupera tout espace blanc au début ou à la fin de la chaîne), supprimera les balises (supprimera toutes les balises html et PHP de la chaîne), puis ajoutera des barres obliques à la chaîne contenant des marques de parole (') et guillemets (").
Nous avons maintenant un emplacement pour stocker et vérifier les informations des utilisateurs, une fonction pour protéger les chaînes transmises à la base de données et une belle présentation pour notre page de connexion! Ci-dessous, vous pouvez voir le code commenté de notre login.php fichier avec le PHP nouvellement ajouté-
Vous devez remplir un Nom d'utilisateur et un Mot de passe!"; else // si le vérifiait continuellement // sélectionne toutes les lignes de la table où le nom d'utilisateur correspond à celui saisi par l'utilisateur $ res = mysql_query (" SELECT * FROM "utilisateurs" WHERE "nomutilisateur" = "". $ username. "'"); $ num = mysql_num_rows ($ res); // vérifie s'il n'y a pas de correspondance si ($ num == 0) // si ne pas afficher un message d'erreur echo "le Nom d'utilisateur vous avez fourni n'existe pas! "; else // s'il y avait une correspondance, continuer à vérifier // sélectionner toutes les lignes où le nom d'utilisateur et le mot de passe correspondent à ceux soumis par l'utilisateur $ res = mysql_query (" SELECT * FROM 'utilisateurs' WHERE 'username' = '" . $ username. "'AND' password '='". $ password. "'"); $ num = mysql_num_rows ($ res); // vérifie s'il n'y a pas de correspondance si ($ num == 0) / / si ne pas afficher le message d'erreur echo "le Mot de passe vous avez fourni ne correspond pas à celui pour ce nom d'utilisateur! "; else // s'il y avait une vérification continue // diviser tous les champs de la bonne ligne en un tableau associatif $ row = mysql_fetch_assoc ($ res); // vérifie si l'utilisateur n'a pas encore activé son compte si ( $ row ['active']! = 1) // sinon affiche le message d'erreur echo "Tu n'as pas encore Activé Ton compte! "; else // s’ils les ont connectés // définissez la session de connexion en enregistrant leur identifiant - nous l’utilisons pour savoir s’ils sont connectés ou non $ _SESSION ['uid'] = $ row ['id'] ; // affiche le message echo "Vous vous êtes connecté avec succès! "; // met à jour le champ en ligne à 50 secondes dans le futur $ time = date ('U') + 50; mysql_query (" UPDATE "utilisateurs" SET "en ligne" = "". $ time. "" WHERE "id = '". $ _ SESSION [' uid ']."' "); // les redirige vers l’en-tête de la page usersonline ('Location: usersOnline.php');?>> La plupart de cela est expliqué par les commentaires, mais une partie que je n'ai pas expliquée est le champ en ligne. Lorsque vous vous êtes connecté avec succès, nous avons mis à jour le champ en ligne à 50 secondes à l’avance. La fonction date ('U') nous donne le nombre de secondes depuis le 1er janvier 1970 à 00:00:00 GMT (époque Unix). Cela signifie que la date ('U') ne deviendra jamais plus petite, la valeur augmentera toujours. Si nous fixons le champ en ligne à 50 secondes à l’avance, alors, lorsque le Utilisateurs en ligne la page est chargée, nous pouvons vérifier tous les utilisateurs dont la valeur en ligne est supérieure au moment du chargement de la page. Si tel est le cas, affichez chacun de leurs noms..
Maintenant, n'hésitez pas à tester votre page de connexion. Assurez-vous que toutes les vérifications sont effectuées correctement et qu'une fois connecté, vous êtes redirigé vers la page en ligne des utilisateurs non existants. Vous pouvez également vérifier si le champ en ligne a bien été mis à jour en consultant le tableau des utilisateurs.!
À quoi sert une page de connexion sans page de registre? Pas grand chose du tout, alors je pense que ce sera la prochaine étape à franchir. La création de la page de registre sera très similaire à la création de notre page de connexion. Nous devons faire quelques vérifications de base pour voir si le nom d’utilisateur recherché est déjà pris, mais il n’ya rien de nouveau qui se passe là-bas. Ci-dessous, vous pouvez voir le code de la page de registre commentée. -
"; Else // si tous ont été renseignés, continuez à vérifier // Vérifiez si le nom d'utilisateur souhaité est supérieur à 32 ou inférieur à 3 caractères si (strlen ($ username)> 32 || strlen ($ nom d'utilisateur) < 3) //if it is display error message echo "Votre Nom d'utilisateur doit comporter entre 3 et 32 caractères! "; else // si la vérification continue, sélectionnez // toutes les lignes de la table des utilisateurs où le nom d'utilisateur affiché correspond au nom d'utilisateur enregistré $ res = mysql_query (" SELECT * FROM "utilisateurs" WHERE "nom d'utilisateur" = "". $ nom d'utilisateur. "'"); $ num = mysql_num_rows ($ res); // vérifie s'il existe une correspondance si ($ num == 1) // si oui, le nom d'utilisateur est pris, affiche donc le message d'erreur echo "le Nom d'utilisateur vous avez choisi est déjà pris! "; else // sinon continue à vérifier // vérifie si le mot de passe a moins de 5 caractères ou plus de 32 caractères si (strlen ($ password) < 5 || strlen($password) > 32) // s'il s'agit d'un message d'erreur echo "Votre Mot de passe doit comporter entre 5 et 32 caractères! "; else // sinon continuer à vérifier // vérifier si le mot de passe et confirmer le mot de passe correspondent si ($ password! = $ passconf) // si ne pas afficher le message d'erreur echo"le Mot de passe vous avez fourni ne correspond pas au mot de passe de confirmation! "; else // sinon, continuer à vérifier // Définit le format que nous voulons utiliser pour l'adresse de messagerie par rapport à $ checkemail =" /^[a-z0-9]+([_\\.-ERN[a-z0- 9] +) * @ ([a-z0-9] + ([\ .-] [a-z0-9] +) *) + \\. [Az] 2, $ / i "; // vérifie si les formats correspondent si (! preg_match ($ checkemail, $ email)) // si ne pas afficher le message d'erreur echo "le Email n'est pas valide, doit être [email protected]! "; else // s’ils le font, continuez à vérifier // sélectionner toutes les lignes de notre tableau d’utilisateurs où les courriels correspondent à $ res1 = mysql_query (" SELECT * FROM "utilisateurs" WHERE "email" = "". $ email. " '"); $ num1 = mysql_num_rows ($ res1); // si le nombre de matchs est égal à 1 si ($ num1 == 1) // l'adresse e-mail fournie est prise, affiche donc le message d'erreur echo"le Email l'adresse que vous avez fournie est déjà prise "; else // enfin, sinon enregistrez votre compte // heure d'enregistrement (unix) $ registerTime = date ('U'); // créez un code pour notre clé d'activation $ code = md5 ($ username). $ registerTime; // insère la ligne dans la base de données $ res2 = mysql_query ("INSERT INTO" utilisateurs "(" nom d'utilisateur "," mot de passe "," email "," rtime ") VALEURS (" ". $ nom d'utilisateur.", " ". $ password." ',' ". $ email." ', "". $ registerTime. "'" "; // envoie le courrier électronique avec un e-mail contenant le lien d'activation correspondant à l'adresse e-mail fournie mail ($ email , $ INFO ['chatName']. 'Confirmation d’enregistrement', "Merci de vous être enregistré". $ Username. ", \ N \ nVoici le lien d’activation. Si le lien ne fonctionne pas, copiez-le et collez-le dans votre barre d'adresse du navigateur. \ n \ nhttp: //www.votre sitewebhere.co.uk/activate.php? code = ". code code 'De: [email protected]'); // affiche le message de réussite echo "Vous avez enregistré avec succès, s'il vous plaît visitez votre boîte de réception pour activer votre compte! ";?>
Ce fichier contient des nouveautés que vous ne connaissez peut-être pas. Je vais donc tout passer en revue. Tout d'abord, la fonction strlen () renvoie le nombre de caractères dans une chaîne, ce qui nous permet de vérifier la longueur des chaînes. Ensuite, la fonction preg_match () vérifie si le formatage d’une chaîne correspond au formatage spécifié (dans ce cas, il s’agit d’un format de courrier électronique). Enfin, la fonction mail () envoie un courrier électronique du serveur à tout courrier de votre choix, contenant tout ce que vous voulez. Vous devriez enregistrer ce fichier sous register.php
Maintenant, vous pouvez tester votre page d'inscription, vous pouvez voir lorsque vous entrez votre adresse email correcte, vous recevrez un email avec un lien d'activation contenu à l'intérieur. Vous pouvez également voir qu'une ligne contenant les données renseignées dans le formulaire est entrée dans la table des utilisateurs. La valeur de active est 0 montrant que ce compte n'a pas encore été activé!
Ceci est seulement une petite page avec très peu de code nécessaire, mais elle reste très importante et joue un rôle important dans un système de connexion sécurisé. La source de cette page est indiquée ci-dessous - activate.php
Malheureusement, il y avait une erreur! "; Else // sinon, continuez le contrôle // sélectionnez toutes les lignes où les comptes ne sont pas actifs $ res = mysql_query (" SELECT * FROM "utilisateurs" WHERE "actifs" = "0 '"); // parcourt ce script pour chaque ligne jugée non active tandis que ($ row = mysql_fetch_assoc ($ res)) // vérifie si le code de la ligne de la base de données correspond à celui de l'utilisateur if ($ code == md5 ($ row ['nomutilisateur']). $ row ['rtime']) // si c'est le cas, activez le compte et affichez le message de réussite $ res1 = mysql_query ("UPDATE" utilisateurs 'SET' actif '= '1' WHERE 'id' = '". $ Row [' id ']." "";; Echo "Vous avez activé votre compte avec succès! ";?> Il y a deux nouveautés dans ce fichier, nous utilisons la méthode GET à la place de POST et nous utilisons également une boucle while (). La méthode get obtient simplement les données de la barre d'adresse en haut du navigateur de l'utilisateur (dans ce cas, le code envoyé avec l'email à son adresse e-mail). La boucle while () est parfaite pour vérifier plusieurs lignes de données sélectionnées dans la base de données (dans ce cas, voir s'il existe une correspondance avec les codes).
Jusqu'à présent, vous auriez dû apprendre beaucoup de nouvelles choses si vous débutiez en PHP et avez réussi à créer la moitié d'un système de connexion. Les pages complétées jusqu'à présent sont -
Certaines fonctions utiles utilisées jusqu’à présent sont -
La prochaine étape est notre page de mot de passe oublié. Si l'utilisateur oublie son mot de passe, nous pouvons le lui envoyer par courrier électronique. Nous savons maintenant qu'il a fourni une adresse e-mail réelle en raison de l'activation. Donc, sans plus tarder, voici le code commenté pour oublié.php -
Vous devez remplir votre Email address! "; else // sinon continuer à vérifier // définir le format de vérification de l'e-mail sur $ checkemail =" /^[a-z0-9]+([_\\.-CHER[a-z0-9 ] +) * @ ([a-z0-9] + ([\ .-] [a-z0-9] +) *) + \\. [az] 2, $ / i "; // vérifier si l'email ne correspond pas au format requis si (! preg_match ($ checkemail, $ email)) // sinon affiche le message d'erreur echo "Email n'est pas valide, doit être [email protected]! "; else // sinon continuer à vérifier // sélectionner toutes les lignes de la base de données où les emails correspondent $ res = mysql_query (" SELECT * FROM "utilisateurs" WHERE "email" = "". $ email. "'"); $ num = mysql_num_rows ($ res); // vérifie si le nombre de lignes correspondantes est égal à 0 si ($ num == 0) // s'il s'agit d'un message d'erreur echo "le Email vous avez fourni n'existe pas dans notre base de données! "; else // sinon, terminez la fonction de mot de passe oublié // divisez la ligne en un tableau associatif $ row = mysql_fetch_assoc ($ res); // envoyez un e-mail contenant leur mot de passe à leur adresse mail mail ($ email, 'Mot de passe oublié' , "Voici votre mot de passe:". $ Row ['mot de passe']. "\ N \ nN'essayez pas de le perdre à nouveau!", 'De: [email protected]'); // affiche le message de réussite echo "Un email a été envoyé aussi votre adresse email contenant votre mot de passe! ";?>
Cette page ne contient rien de nouveau et je vais donc passer moins de temps à la regarder. Une chose que je tiens à mentionner est que, si vous ne l’avez pas remarqué, car nous avons inclus notre fichier css dans chaque page, la mise en page que nous utilisons pour chaque page reste très similaire, tout en conservant un beau design élégant sur tout le site..
La page suivante et finale que nous allons faire dans ce tutoriel sera légèrement différente. Cette page permet de vérifier si l'utilisateur est connecté ou non et, dans ce cas, affiche tous les utilisateurs en ligne à ce moment (ou plus précisément au cours des 50 dernières secondes)..
D'accord, nous avons donc atteint la section du site Web sur laquelle vous devez être connecté pour pouvoir le consulter. Comme je l'ai mentionné précédemment, celui-ci sera légèrement différent des autres en raison du fait que nous devons vérifier si l'utilisateur est connecté ou non. S'ils ne sont pas connectés et essayent d'afficher la page, nous avons quelques options à faire. Le premier étant que nous pouvons afficher un message d'erreur disant quelque chose du type "Vous devez être connecté pour voir cette page!", Ou nous pouvons les rediriger vers la page de connexion. Pour ce tutoriel, je pense que je vais utiliser la méthode du message d'erreur.
Alors voici le usersOnline.php source de la page -
Vous devez être connecté pour utiliser cette fonctionnalité! "; Else // sinon continuez la page // ceci est un script de mise à jour qui doit être utilisé dans chaque page pour mettre à jour le temps en ligne des utilisateurs $ time = date ('U' ) +50; $ update = mysql_query ("UPDATE" utilisateurs 'SET' en ligne '=' ". $ Heure." 'WHERE' id '=' ". $ _ SESSION ['uid']." "");?>> Utilisateurs en ligne: '".date (' U ')."' "); // boucle pour chaque ligne while ($ row = mysql_fetch_assoc ($ res)) // renvoie chaque nom d'utilisateur trouvé en ligne avec un tiret pour les séparer echo $ rangée ['nom d'utilisateur']. " - ";?> Connectez - Out
Comme je l'ai mentionné, vous pouvez voir que cette page est légèrement différente. Non seulement nous nous assurons qu'ils sont connectés, mais nous mettons à jour l'heure en ligne en gardant le champ en ligne en avance sur l'heure actuelle. Chaque fois qu'une page est chargée avec ce script, il se mettra à jour pour les mettre en ligne. Nous avons maintenant une dernière page à faire et nous avons terminé. Une fois qu'un utilisateur est connecté, il doit pouvoir se déconnecter.!
Ceci doit être considéré comme la page la plus facile à réaliser et je suis sûr que la plupart d’entre vous sont heureux de l’entendre. Maintenant, voici le code commenté pour le logout.php fichier -
Vous devez être connecté pour vous déconnecter! "; Else // si la vérification continue // mettre à jour pour définir le champ en ligne de cet utilisateur sur l'heure actuelle mysql_query (" UPDATE 'utilisateurs' SET 'en ligne' = '". date ('U'). "'WHERE' id '='". $ _ SESSION ['uid']. "'"); // détruit toutes les sessions en annulant la session de connexion session_destroy (); // affiche le message de réussite echo "Vous vous êtes déconnecté avec succès! ";?> Je pense que les commentaires dans ce fichier l'expliquent suffisamment, et je pense que vos connaissances en PHP devraient maintenant être beaucoup plus élevées et que vous devriez être en mesure de comprendre l'essentiel de ceci maintenant.
