Share
Dans ce didacticiel, nous allons créer un formulaire d'inscription d'utilisateur qui ajoute un utilisateur à une base de données, puis envoie un courrier électronique de confirmation sur lequel l'utilisateur doit cliquer pour que son compte soit activé..
Ce tutoriel vous guidera à travers le processus, mais si vous préférez, vous pouvez utiliser l'un des nombreux formulaires d'inscription par courrier électronique prêts à l'emploi disponibles sur Envato Market. Voici quelques-unes des options les plus populaires.
Le plugin jQuery du formulaire d'inscription simple collecte l'adresse électronique du visiteur sur votre site Web de manière efficace et captivante. Il comporte de nombreuses options de personnalisation facultatives que vous pouvez configurer en quelques minutes..
Hype est un formulaire d’inscription SmartR, préconfiguré et ajouté à n’importe quelle page en un seul clic. Il exploite la puissance de vos utilisateurs et de leurs réseaux pour augmenter activement le nombre d'inscriptions et augmenter de manière exponentielle votre base d'utilisateurs..
Il s'agit d'un formulaire très simple, mais élégant, pour votre site Web, dans lequel les visiteurs peuvent entrer leur adresse électronique (et leur nom si nécessaire) pour être ajouté à une liste de contacts. Il utilise AJAX pour soumettre et valider un courrier électronique et fonctionnera également si l'utilisateur a désactivé JavaScript..
L'installation est rapide et sans douleur. Ce formulaire ne nécessite pas de base de données pour fonctionner car il créera et stockera des entrées dans un fichier CSV.
Il existe de nombreuses autres options de formulaire d'inscription par courrier électronique sur Envato Market. Ou si vous préférez le créer vous-même à partir de zéro, lisez la suite..
J'ai inclus la présentation de base du site afin que nous ne perdions pas de temps à créer le formulaire et à rendre le site plus joli. Nous allons entrer directement dans le codage qui est ce que vous êtes venu ici pour.
Ouvrez le dossier Modèle de site et copiez-le sur votre serveur localhost ou web..
S'ouvrir index.php et jetez un coup d'oeil. Vous verrez un formulaire simple avec 3 entrées. Ce sont les champs que nous allons capturer. Nous voulons le nom d'utilisateur, leur mot de passe ainsi que leur email. Vous pouvez choisir de capturer d'autres éléments lorsque les utilisateurs s'inscrivent, mais ce sont les 3 éléments nus dont nous avons besoin.
Ouvrez PHPMyAdmin ou le programme que vous utilisez pour gérer votre base de données MySQL et créer une nouvelle base de données. Vous pouvez nommer cela comme vous voulez. Nous voulons maintenant créer les lignes qui vont contenir nos informations utilisateur et nos informations de confirmation. Pour cela, nous créons deux tables. Utilisateurs et confirmer.
Accentsconagua
CREATE TABLE 'users' ('id' int (11) NOT NULL auto_increment, 'nom_utilisateur' varchar (50) NOT NULL par défaut ", 'mot de passe' varchar (128) NON NULL par défaut", 'email' varchar (250) NON NULL default ", binaire" actif "(1) NOT NULL default" 0 ", PRIMARY KEY (" id ")) ENGINE = MyISAM AUTO_INCREMENT = 27 DEFAULT CHARSET = utf8; Notre première table a 5 lignes. Le premier est l'ID fourni à l'utilisateur lors de son inscription. Ce paramètre est défini sur incrémentation automatique afin que chaque utilisateur se voit attribuer un identifiant unique. Suivant est le nom d'utilisateur, mot de passe et ID. La dernière ligne nous permet de définir l'état actif des utilisateurs. Lorsque nous créons la ligne utilisateur pour la première fois, l'état actif est par défaut à 0. Cela signifie que le compte de l'utilisateur est actuellement inactif. Une fois que l'utilisateur aura confirmé son compte, nous définirons ce paramètre sur 1. Cela indiquera que le compte est actif..
CREATE TABLE 'confirm' ('id' int (11) NON NUL auto_increment, 'ID utilisateur' varchar (128) NON NULL par défaut ", 'clé' varchar (128) NON NULL par défaut", 'email' varchar (250) par défaut NULL , KEY PRIMARY ('id')) ENGINE = MyISAM AUTO_INCREMENT = 27 DEFAULT CHARSET = utf8; Notre deuxième table est la table de confirmation. Ceci contient l’identifiant et le courrier électronique de l’utilisateur, ainsi qu’une clé générée aléatoirement que nous utiliserons pour confirmer le compte de l’utilisateur..
Ouvrez inc / php / config.php.
Nous devons d'abord établir la connexion à la base de données.
mysql_connect ('localhost', 'nom d'utilisateur', 'mot de passe') ou die ("Je ne peux pas me connecter à votre base de données, assurez-vous que vos informations sont correctes!"); En fonction de votre configuration, nous devrons modifier quelques variables. Alors allez-y et remplissez tout.
Ensuite, nous devons dire à MySQL quelle base de données nous voulons utiliser.
mysql_select_db ('your_database_name') ou die ("Je n'ai pas pu trouver la table de base de données, assurez-vous qu'elle est orthographiée correctement!"); Une fois que tout a été modifié pour s'adapter à votre base de données, allez-y et pointez le fichier index.php sur votre serveur..
Si vous ne voyez aucune erreur en haut, nous sommes tous connectés.
Ok, maintenant que nous sommes tous connectés à la base de données, nous devons capturer les données du formulaire afin que l'utilisateur puisse s'inscrire..
Je vais vous donner le code, puis expliquer ce qui se passe. Après cela, nous allons faire des changements et ajouter des fonctionnalités.
Voici la base; placez cela juste après le premier inclut au sommet de index.php
// vérifie si le formulaire a été soumis si (isset ($ _ POST ['inscription'])))
Cette déclaration si vérifie si le formulaire a été soumis.
Sans cela, notre script serait exécuté à chaque fois que la page est actualisée et nous ne voulons pas que.
Remarque: En fonction de votre application ou de votre style de codage général, ce code peut être placé dans un fichier séparé auquel on accède lors de l'envoi du formulaire. J'ai placé le code dans un seul fichier pour que les choses restent simples et faciles à suivre.
Nous voulons nous assurer que l'utilisateur a soumis le contenu réel au lieu d'un simple formulaire vierge. Nous allons donc effectuer quelques vérifications rapides..
La première partie consiste à placer le $ _POST variables en variables plus simples et les nettoyer pour la base de données. Placez ceci dans notre déclaration if.
$ username = mysql_real_escape_string ($ _ POST ['username']); $ password = mysql_real_escape_string ($ _ POST ['password']); $ email = mysql_real_escape_string ($ _ POST ['email']);
mysql_real_escapse_string () s'assure que l'utilisateur n'essaye pas d'utiliser des apostrophes pour accéder à notre base de données avec l'injection MySQL. Lorsque vous souhaitez mettre des informations dans une base de données saisie par l'utilisateur, veuillez l'exécuter. mysql_real_escape_string (). Pour plus d'informations sur l'injection MySQL, vous pouvez lire cet article sur Wikipedia
Nous avons donc nettoyé nos variables, vérifions maintenant si l'utilisateur a oublié les champs..
if (empty ($ username)) // code mis en moi s'il vous plaît if (vide ($ mot de passe)) // code mis en moi s'il vous plaît
Nous avons maintenant trois instructions if qui vérifient si chaque champ est vide. Si le champ est vide, nous allons assigner des variables.
Pour rendre les choses propres, nous allons créer un tableau qui contiendra le statut du processus d'inscription ainsi que tout texte dont nous avons besoin pour montrer à l'utilisateur.
Juste au-dessus de ce morceau de code, créons un tableau et quelques variables.
$ action = array (); $ action ['result'] = null; $ text = array ();
Nous créons d’abord un tableau vide appelé action, puis définissons une valeur de tableau de résultat. Le résultat va contenir une valeur de succès ou d'erreur. Ensuite, nous créons un autre tableau vide appelé texte. Cela va contenir n'importe quel texte que nous voulons montrer à l'utilisateur lors de l'inscription.
À l'heure actuelle, nos instructions if qui vérifient nos variables n'exécutent aucun code. Allons-y, ajoutons du code dans la première instruction if..
Mettez ce code dans le nom d'utilisateur if.
$ action ['result'] = 'error'; array_push ($ text, 'Vous avez oublié votre nom d'utilisateur');
Supposons que l'utilisateur envoie le formulaire sans nom d'utilisateur. Notre déclaration va exécuter le code ci-dessus. D'abord, il va définir le champ de résultat de notre tableau d'actions en erreur.
Ensuite, nous allons utiliser array_push () mettre du texte dans notre tableau de texte. Nous allons utiliser ce même morceau de code pour les deux dernières instructions "if", copiez et collez donc ce code dans les deux dernières instructions if. Vous voudrez probablement changer le texte pour qu'il corresponde à l'instruction if actuelle.
Note: Nous utilisons array_push () au cas où nous aurions plusieurs erreurs dans la soumission du formulaire. Si toutes les instructions if sont exécutées, le tableau de texte ressemblera à ceci:
Array ([0] => 'Vous avez oublié votre nom d'utilisateur', [1] => 'Vous avez oublié votre mot de passe', [2] => 'Vous avez oublié votre email')
Nous devons maintenant vérifier si nous avons des erreurs afin de pouvoir continuer le processus d'inscription.
Nous allons vérifier si la valeur du résultat de notre tableau d'actions est définie sur error.
if ($ action ['result' ']! =' error ') // pas d'erreur, continuez votre inscription $ password = md5 ($ password); $ action ['text'] = $ text;
Nous utilisons également notre mot de passe via la fonction md5 (). Cela prend le mot de passe et retourne une chaîne de 32 caractères qui ressemble à ceci: a3470ce826283eca7ce3360d0f26b230. C'est une bonne pratique d'exécuter le mot de passe via une sorte de fonction de hachage avant de le mettre dans la base de données. Cela empêche les utilisateurs de voir les mots de passe des utilisateurs si votre base de données est piratée.
Une vérification rapide de notre valeur de résultat d'action et nous pouvons continuer avec l'inscription. Si notre résultat est une erreur, nous ignorerons tout ce code et les enverrons à notre utilisateur afin qu'il puisse apporter les modifications nécessaires..
Le dernier morceau de ce code, nous mettons les valeurs de votre tableau de texte dans notre tableau d'action.
Placez ce code dans notre dernière instruction if.
… Si l'instruction vérifie les erreurs… // ajoute à la base de données $ add = mysql_query ("INSERT INTO" VALUES "des utilisateurs (NULL," $ username "," $ password "," $ email ", 0)"); if ($ add) // l'utilisateur a été ajouté à la base de données else $ action ['result'] = 'error'; array_push ($ text, 'L'utilisateur n'a pas pu être ajouté à la base de données. Reason:'. mysql_error ()); = Nous utilisons mysql_query () et INSÉRER pour insérer les informations des utilisateurs dans la base de données. Ensuite, nous créons une autre instruction if vérifiant si l’utilisateur a été ajouté à la base de données. Nous faisons cela en vérifiant si la variable $ add est vraie ou fausse.
Si l'utilisateur est ajouté, nous pouvons continuer avec l'inscription; sinon, nous allons assigner des variables familières et arrêter l'inscription.
Lorsque vous travaillez avec des requêtes MySQL, nous utilisons le mysql_error () fonctionnent si elles sont des erreurs car cela aide à déboguer ce qui ne va pas avec vos requêtes. Il va générer des erreurs de texte quand quelque chose ne va pas. C'est bon!
L'utilisateur a soumis le formulaire, tout a été vérifié et il réside désormais dans la base de données. Nous voulons que l'utilisateur puisse utiliser son compte, configurons donc la confirmation.
… Si ajouté, vérifiez… // récupérez le nouvel identifiant utilisateur $ userid = mysql_insert_id (); // crée une clé aléatoire $ key = $ username. $ email. date («mY»); $ key = md5 ($ key); // ajoute la ligne de confirmation $ confirm = mysql_query ("INSERT INTO" confirme "VALUES (NULL," $ userid "," $ key "," $ email ")"); if ($ confirm) // envoyons l'email else $ action ['result'] = 'error'; array_push ($ text, 'La ligne de confirmation n'a pas été ajoutée à la base de données. Reason:'. mysql_error ()); Pour simplifier les choses, affectons le nouvel identifiant d’utilisateur à une variable afin que nous puissions l’utiliser ultérieurement. Nous faisons cela en utilisant mysql_insert_id (). Cela définira $ userid à quel que soit le nouvel identifiant est.
Ensuite, nous créons la clé aléatoire pour cet utilisateur spécifique. Nous créons une variable nommée clé et la remplissons avec une valeur correspondant au nom d'utilisateur, à l'adresse e-mail et à la date. La chaîne ressemblera à [email protected]. Après cela, nous utilisons le md5 () fonction pour le convertir en chaîne aléatoire propre à cet utilisateur.
En utilisant mysql_query () et INSERT à nouveau, nous mettons le nouvel ID utilisateur, la clé et le courrier électronique des utilisateurs dans la base de données.
Nous allons faire une pause dans le codage PHP et créer deux nouveaux fichiers. Par souci de rapidité et de facilité, nous allons utiliser deux modèles que j'ai inclus dans ce didacticiel. Les deux fichiers que nous allons examiner sont signup_template.html et signup_template.txt. Swift nous permet d'attribuer une version HTML ainsi qu'une version TXT de l'e-mail si le client de messagerie de l'utilisateur ne prend pas en charge les e-mails HTML.
Ouvrez upup_template.html. Remarque: vous pouvez lire le code HTML dans les courriels sur carsonified. Nous n'allons pas éditer ce fichier, je vais simplement expliquer ce qui se passe et vous pourrez ensuite vous en servir une fois le didacticiel terminé. La partie la plus importante de ce fichier est les balises qui ressemblent à NOM D'UTILISATEUR et confirm.php? email = EMAIL & key = KEY. Nous allons écrire une fonction qui utilise ce modèle et remplace ces balises par les variables de notre formulaire.
S'ouvrir inc / php / functions.php et placez ce code à l'intérieur.
function format_email ($ info, $ format) // définit la racine $ root = $ _SERVER ['DOCUMENT_ROOT']. '/ dev / tutorials / email_signup'; // récupère le contenu du modèle $ template = file_get_contents ($ root. '/ signup_template.'. $ format); // remplace toutes les balises $ template = ereg_replace ('USERNAME', $ info ['username'], $ template); $ template = ereg_replace ('EMAIL', $ info ['email'], $ template); $ template = ereg_replace ('KEY', $ info ['key'], $ template); $ template = ereg_replace ('SITEPATH', 'http: //site-path.com', $ template); // retourne le code HTML du template return $ template; format_email () prend deux variables qui seront utilisées dans index.php. Le premier est notre tableau d'informations de formulaire et le second est le format. Nous avons une variable de format afin de pouvoir réutiliser ce tableau pour les versions HTML et TXT du modèle..
Nous définissons d'abord la racine. Cela pointe vers le dossier où sont hébergés les modèles.
Ensuite, nous ouvrons le contenu de notre modèle et l’attribuons à une variable.
Maintenant, nous allons utiliser ereg_replace () pour remplacer notre NOM D'UTILISATEUR balises dans notre modèle avec le contenu de notre formulaire. C'est fondamentalement juste un système de template super simple.
Enfin, nous renvoyons la variable template qui contient tout le code HTML.
Explication: en quelques mots, format_email () ouvre nos fichiers modèles, prend le code HTML et l’assigne à notre variable. C’est juste une façon plus simple d’attribuer tout le code HTML dans la fonction elle-même..
Nous allons écrire une autre fonction pour traiter avec Swift et envoyer les emails.
function send_email ($ info) // formate chaque email $ body = format_email ($ info, 'html'); $ body_plain_txt = format_email ($ info, 'txt'); // configure le mailer $ transport = Swift_MailTransport :: newInstance (); $ mailer = Swift_Mailer :: newInstance ($ transport); $ message = Swift_Message :: newInstance (); $ message -> setSubject ('Bienvenue sur le nom du site'); $ message -> setFrom (array ('[email protected] '=>' Nom du site ')); $ message -> setTo (array ($ info ['email'] => $ info ['nomutilisateur'])); $ message -> setBody ($ body_plain_txt); $ message -> addPart ($ body, 'text / html'); $ resultat = $ mailer-> send ($ message); return $ result; Juste comme format_email (), send_email () prend notre tableau d'informations comme une variable. La première partie de la fonction assigne deux variables, $ body et $ body_plain_text. Nous utilisons format_email () affecter les valeurs HTML de notre modèle à chaque variable. Maintenant vient la bonne partie. Nous avons configuré l'instance swift à l'aide de Swift_MailTransport: newInstance () puis configurez le mailer en utilisant Swift_Mailer :: newInstance ($ transport);
Nous créons une nouvelle instance du message Swift et commençons à affecter des variables à cette instance. Nous définissons le sujet, de l'email et l'adresse e-mail, puis utilisons setBody () pour attribuer une version texte de l'e-mail à l'instance de messagerie. Pour ajouter la version HTML utilisée addPart (). le envoyer() function prend en charge l'envoi de l'email puis nous retournons le résultat. Bon, nous avons notre courrier électronique créer et envoyer des fonctions écrites, revenons à index.php et commençons à conclure l’inscription principale.
Notre dernier bit aurait dû être l'instruction if vérifiant si la ligne de confirmation a été créée.
Envoyons l'email et vérifions si tout s'est bien passé.
… Si confirmer… // inclut la classe swift include_once 'inc / php / swift / swift_required.php'; // met les informations dans un tableau à envoyer à la fonction $ info = array ('nom d'utilisateur' => $ nom d'utilisateur, 'email' => $ email, 'clé' => $ clé); // envoie le courrier électronique if (send_email ($ info)) // courrier électronique envoyé $ action ['result'] = 'success' array_push ($ text, 'Merci pour votre inscription. Vérifiez votre email pour confirmation!'); else $ action ['result'] = 'error'; array_push ($ text, 'Impossible d'envoyer le courrier électronique de confirmation'); Sans la classe Swift, nous ne pouvons envoyer aucun courrier électronique. Nous incluons donc la classe Swift dans la première ligne. Nous devons envoyer nos informations à nos deux nouvelles fonctions afin de créer un nouveau tableau et de lui affecter nos variables. Je sais que je sais, plus si déclaration, mais nous devons vérifier les erreurs pour le rendre plus facile pour les utilisateurs. Vous devez toujours supposer que les utilisateurs feront toutes les erreurs possibles imaginables.
Nous enveloppons notre send_email () fonctionne dans une autre instruction if et passe le tableau $ info. Si l'e-mail est envoyé, nous attribuons une valeur de succès et remercions l'utilisateur de s'inscrire. S'il y a des erreurs, nous utilisons les variables familières. Nous en avons presque fini avec l’inscription, il ne reste plus qu’une dernière fonction à créer. Même si nous affectons toutes ces variables d'erreur / succès et ce texte, nous n'avons pas affiché cette information à l'utilisateur..
Revenez à functions.php et collez ce code.
// nettoie les erreurs function show_errors ($ action) $ error = false; if (! empty ($ action ['result' '))) $ error = "
$ text
$ action [texte]
Cela peut sembler déroutant, mais cela ne fait que rendre notre succès / nos erreurs plus beaux.
D'abord, il vérifie si le tableau est vide afin de ne pas exécuter le code s'il n'est pas utilisé..
Ensuite, il crée une balise ul et applique le résultat en tant que classe. Ce sera soit le succès ou l'erreur et est uniquement esthétique.
Nous vérifions ensuite si la variable de texte est un tableau ou simplement une chaîne. Si c'est une chaîne, nous l'enveloppons dans un li. S'il s'agit d'un tableau, nous parcourons chaque élément du tableau et l'enveloppons dans un li.
Enfin, on ferme le ul et on retourne la chaîne entière.
Si nous revenons à index.php et plaçons ce code juste après avoir inclus header.php nous pouvons terminer cette section.
… En-tête comprend…
Une petite explication rapide. Nous prenons toutes les valeurs de notre tableau d’action et le passons au show_errors () une fonction. S'il y a du contenu, il retourne une belle liste non ordonnée.
Nous devrions bien maîtriser le fonctionnement du script. donc pour ce prochain script, je vais vous donner la totalité du code, puis le parcourir avec vous.
S'ouvrir confirm.php et collez cet entre-deux entre l'en-tête et votre show_errors () une fonction.
// configure des variables $ action = array (); $ action ['result'] = null; // validation rapide / simple if (vide ($ _GET ['email']) || vide ($ _GET ['clé'])) $ action ['résultat'] = 'erreur'; $ action ['text'] = 'Il nous manque des variables. Veuillez vérifier votre courrier électronique. '; if ($ action ['result']!! = 'error') // nettoie les variables $ email = mysql_real_escape_string ($ _GET ['email']); $ key = mysql_real_escape_string ($ _GET ['key']); // vérifie si la clé est dans la base de données $ check_key = mysql_query ("SELECT * FROM" confirmer "WHERE" email "=" $ email "AND" clé "=" $ key "LIMIT 1") ou mourir (mysql_error () ) if (mysql_num_rows ($ check_key)! = 0) // récupère les informations de confirmation $ confirm_info = mysql_fetch_assoc ($ check_key); // confirme l'email et met à jour la base de données des utilisateurs $ update_users = mysql_query ("UPDATE" utilisateurs 'SET' active '= 1 WHERE' id '=' $ confirm_info [userid] 'LIMIT 1 ") ou die (mysql_error ()); // supprime la ligne de confirmation $ delete = mysql_query ("DELETE FROM" confirme "WHERE" id "=" $ confirm_info [id] "LIMIT 1") ou die (mysql_error ()); if ($ update_users) $ action ['result'] = 'success'; $ action ['text'] = 'L'utilisateur a été confirmé. Je vous remercie!'; else $ action ['result'] = 'error'; $ action ['text'] = 'L'utilisateur n'a pas pu être mis à jour. Motif:' .mysql_error () ;; else $ action ['result'] = 'error'; $ action ['text'] = 'La clé et l \' email ne sont pas dans notre base de données. '; La plupart de cela devrait sembler très familier; donc je vais sauter et vérifier si la clé est dans la section base de données.
Encore une fois, nous utilisons mysql_query () pour obtenir des lignes dans la base de données où le courrier électronique et la clé sont égaux aux clés fournies par le courrier électronique de l'utilisateur.
Nous utilisons mysql_num_rows () vérifier si le nombre de lignes renvoyées est supérieur à 0.
Si l'email et la clé sont dans la base de données, nous récupérons toutes les informations de la base de données à l'aide mysql_fetch_assoc ().
Maintenant que l'utilisateur a confirmé son compte, nous devons mettre à jour la base de données et définir la ligne active sur 1.
Nous utilisons mysql_query () encore, mais au lieu de INSÉRER nous utilisons METTRE À JOUR mettre à jour la ligne active sur 1 où l'ID utilisateur est identique à l'ID utilisateur actuel.
Pour tout nettoyer nous utilisons mysql_query () et EFFACER pour supprimer la ligne de confirmation de la base de données. Cela garantit que l'utilisateur ne peut pas revenir à cette page et reconfirmer. Il maintient également la base de données belle et propre.
Nous avons couvert de nombreux domaines différents dans ce tutoriel. Nous avons téléchargé et inclus un script tiers destiné à l'envoi des e-mails, mis en œuvre une validation de formulaire simple et créé un système de gabarit extrêmement simple pour styliser nos e-mails. Si vous débutez avec MySQL, nous avons abordé les trois fonctions les plus courantes de MySQL. Vous ne devriez donc pas avoir de difficulté à suivre des didacticiels plus avancés..
Merci de m'avoir lu et n'oubliez pas de me rendre sur Twitter si vous avez des questions.!
