Share
Le SMS est une technologie mondiale utilisée par presque tout le monde avec un téléphone portable. Bien que leur portée soit bien supérieure à celle du marché des smartphones, la programmation SMS reçoit une couverture beaucoup moins large et reste souvent non capitalisée. Dans ce didacticiel en plusieurs parties, je vais vous montrer comment créer un formulaire d’inscription à un site Web permettant aux utilisateurs de saisir un numéro de téléphone portable. Je vais ensuite vous montrer comment utiliser PHP pour la vérification du numéro de téléphone côté serveur afin de vérifier que le numéro de téléphone portable que l'utilisateur a entré est bien son téléphone portable. En cours de route, nous utiliserons jQuery pour effectuer la validation côté client et CodeIgniter comme cadre de développement..
Commençons par un aperçu de la solution. L'utilisateur va accéder à un formulaire d'inscription, sélectionner un pays et entrer un numéro de téléphone mobile. Après avoir soumis le formulaire d’inscription, l’utilisateur devra saisir un code de vérification envoyé au numéro de téléphone mobile saisi pour activer le nouveau compte. Si l'utilisateur ferme la page avant d'entrer le code de vérification et réaccède ultérieurement au formulaire d'inscription, le formulaire du code de téléphone sera toujours affiché. Ok, commençons!
Téléchargez CodeIgniter sur www.codeigniter.com. Ensuite, extrayez le dossier et copiez-le sur la racine Web de votre serveur Web (vous devez avoir accès à un serveur Web capable d'analyser PHP pour pouvoir suivre ce didacticiel). La copie sur votre racine Web est facultative, mais cela nous aidera à mieux naviguer dans les fichiers source..
Dans le répertoire de l’application, accédez au répertoire config et ouvrez config.php. C'est la configuration principale, où nous devons définir certains paramètres, comme dans le code ci-dessous:
$ config ['base_url'] = "http: // hôte local / d'envoi_sms /";… $ config ['index_page'] = "index.php";… $ config ['uri_protocol'] = "AUTO";
Ensuite, ouvrez database.php dans le même dossier de configuration et complétez les tâches suivantes:
db ['default'] ['hostname'] = "localhost"; $ db ['default'] ['username'] = "root"; $ db ['default'] ['password'] = "__password__"; $ db ['default'] ['database'] = "sms_users";
Enfin, ouvrez autoload.php dans le dossier config et ajoutons quelques bibliothèques et aides dont nous aurons besoin:
Accentsconagua
$ autoload ['libraries'] = array ('base de données');… $ autoload ['helper'] = array ('url', 'form', 'cookie'); Créons le contrôleur d'inscription. Créez un fichier appelé inscription.php dans le dossier application / controllers et commençons à coder la fonctionnalité principale d’inscription:
la classe Signup étend le contrôleur function Signup () parent :: Controller (); function index () $ this-> load-> view ('signup'); J'ai créé la classe Signup, vous remarquerez qu'elle porte le même nom que le fichier et qu'elle étend Controller. J'ai créé le indice() fonction qui gérera l’affichage du formulaire d’inscription. Nous l'appelons index car il s'agit de la fonction par défaut appelée lors de l'accès à l'URL par défaut, sans aucun segment. Nous devrons également configurer le contrôleur par défaut (inscription) dans config / routes.php:
$ route ['default_controller'] = "inscription";
Si vous testez l'application maintenant, vous obtiendrez une erreur indiquant «Impossible de charger le fichier demandé: signup.php». C'est parce que nous n'avons pas créé la vue d'inscription. Faisons cela maintenant.
Créez un nouveau fichier signup.php dans le application / vues dossier et entrez le balisage suivant:
S'inscrire '); ?> 'forme') ); ?> 'name', 'id' => 'name', 'class' => 'required', 'value' => set_value ('name'))); ?> 'email', 'id' => 'email', 'class' => 'email obligatoire', 'valeur' => set_value ('email'))); ?>Formulaire d'inscription
',''prefix', 'id' => 'prefix', 'value' => set_value ('prefix'))); ?> 'mobile', 'id' => 'mobile', 'class' => 'chiffres requis', 'valeur' => set_value ('mobile'))); ?>
Laissez-moi vous expliquer une partie du balisage. J'ai ajouté dans l'en-tête un fichier reset.css contenant les règles CSS habituelles de meyerweb reset et un fichier design.css, que nous coderons plus tard. J'ai mis ces deux dans un dossier à la racine appelé 'css'. j'utilise base_url () pour obtenir la racine dans le fichier de vue.
J'ai utilisé l'assistant de formulaire pour créer l'ouverture du formulaire, tout en donnant l'ID du formulaire "formulaire", j'ai créé quelques étiquettes et entrées à l'aide du même assistant de formulaire. Vous remarquerez que je passe un tableau en tant que deuxième paramètre de la form_input () fonction avec les clés id ou class. Pour plus d'informations sur l'utilisation de l'assistant de formulaire, lisez la documentation de CodeIgniter. j'ai utilisé form_dropdown () pour créer une zone de sélection, qui reçoit un tableau d'options nommées $ pays. Nous n'avons pas encore ce tableau, mais nous le ferons aussi un peu plus tard.
Créez le fichier design.css dans le répertoire css et mettez-le dans le application / vues dossier et entrez les règles css suivantes:
body background-color: #CFCFCF; remplissage: 0px; marge: 0px; taille de police: 12px; font-family: Helvetica, Verdana, Arial, sans-serif; #wrap width: 400px; marge gauche: auto; marge droite: auto; marge supérieure: 40 px; couleur de fond: #ECECEC; bordure: solide 1px #FCFCFC; rembourrage: 10px; h2 margin-bottom: 10px; taille de police: 18px; label display: block; entrée, sélectionnez width: 380px; rembourrage: 5px; marge inférieure: 10px; sélectionnez width: 390px; #prefix width: 50px; marge droite: 10px; marge inférieure: 0px; affichage: en ligne; #mobile width: 305px; affichage: en ligne; input.submit background-color: # E0E0E0; bordure: solide 1px # C5C5C5; largeur: 140px; poids de police: gras; marge supérieure: 10 px; input.error, select.error margin-bottom: 0px; bordure: solide 1px #FFCCCC; div.error padding: 5px; couleur de fond: #ffeeee; bordure: solide 1px #FFCCCC; couleur: # ff0000; div.ok padding: 5px; couleur de fond: #CCFFCC; bordure: solide 1px # 44CC44; couleur: # 336633; marge inférieure: 10px;
J'ai créé le style wrap div, en le centrant en définissant margin-left et margin-right sur auto. J'ai ensuite stylisé les entrées, en veillant à ce qu'elles soient cohérentes sur tous les navigateurs, puis j'ai créé 3 classes d'erreur: .error, .ok et input.error. Nous allons l'utiliser avec le plugin de validation jQuery. J'ai également utilisé un rembourrage 5px où je me sentais nécessaire pour le style.
Si vous testez maintenant, vous recevrez un avis disant "pays à variable non définie" et "argument non valide fourni pour foreach ()". Comment ajoute-t-on les pays? Nous pourrions les intégrer directement à la sélection, mais nous utiliserons plutôt un fichier de configuration. Cela garantit que nous pouvons modifier n'importe quel code de pays facilement et rapidement. J'ai copié le tableau avec les codes de pays de countrycode.org dans un nouveau fichier et utilisé un peu intelligent de jQuery pour traiter tout le contenu dans une seule chaîne, me donnant ainsi le fichier de configuration final. Je n'entrerai pas dans les détails. Si vous voulez savoir, laissez un commentaire. Créez un nouveau fichier appelé 'countries.php' dans le application / config dossier et ajoutez les pays dans le tableau #config en utilisant le modèle suivant:
$ config = array (); $ config ["] ="; $ config ['93 '] =' Afghanistan '; $ config ['355'] = 'Albanie'; $ config ['213'] = 'Algérie';… $ config ['967'] = 'Yémen'; $ config ['260'] = 'Zambie'; $ config ['263'] = 'Zimbabwe';
J'ai utilisé les codes de préfixe comme clés dans le tableau. Comment pouvons-nous accéder à cela dans la vue? Nous allons charger ce fichier de configuration particulier dans la fonction du contrôleur indice() nous avons créé plus tôt:
function index () $ this-> config-> load ('countries', true); $ data ['countries'] = $ this-> config-> item ('countries'); $ this-> load-> view ('inscription', $ data); J'ai utilisé '$ this-> config-> load ()' pour charger la configuration. Vous remarquerez que j'ai également passé true en tant que deuxième paramètre. Cela crée une entrée séparée appelée "pays" dans la configuration globale. Si nous ne passons pas la valeur true, les paramètres de configuration (le tableau de la configuration) sont ajoutés au tableau de configuration globale. Ensuite, nous assignons simplement l’élément de configuration à $ data ['countries'], qui est alors reconnu par la vue en tant que $ countries. Je passe également le tableau $ data à la vue en tant que deuxième paramètre. Si vous testez la page maintenant, vous obtiendrez tous les pays dans la zone de sélection! Grande droite?
Il est temps de faire un peu de jQuery. Nous allons utiliser le plugin jquery Validation pour cela. Ce plugin est déjà dans le CDN de Microsoft, nous allons donc l'obtenir, ainsi que jQuery à partir du CDN de Google. Nous avons également besoin du plugin metadata pour écrire les classes directement dans le code HTML:
Le plugin de validation fonctionne en fournissant un nom de classe à l'entrée: Champs obligatoires pour exiger des valeurs non vides, email pour la validation d'une adresse email, chiffres pour les entrées numériques, et plus que je ne vais pas entrer dans. Vous remarquerez que j'ai codé en dur les classes dans les entrées, il suffit de regarder le code HTML au début. Si vous testez maintenant, vous verrez que vous obtenez une erreur div après l’entrée avec une classe de .Erreur que j'ai codé dans le css. J'ai aussi codé le erreur d'entrée classe, car l'entrée qui n'est pas valide se voit attribuer un .Erreur classe, aussi. Ceci valide le formulaire, si l'utilisateur a JavaScript activé.
Nous allons maintenant utiliser un événement astucieux pour changer la valeur de l'entrée du préfixe lorsque l'utilisateur sélectionne un pays. Ceci est fait uniquement à des fins visuelles, comme dans le backend nous allons obtenir le préfixe de la valeur du pays, mais cela montre à l'utilisateur comment entrer son téléphone. Faisons cela maintenant:
Ok, j'ai donc créé une fonction pour l'événement change de la sélection et attribué la valeur de l'option sélectionnée à la valeur d'entrée du préfixe. Pas grave, mais cela rend notre formulaire d'inscription très facile.
C'est tout ce dont nous avons besoin pour la vue d'inscription. Créons la fonction d'activation et visualisons.
C'est la page que l'utilisateur verra après s'être inscrit avec succès. Il y aura un message lui demandant de vérifier son téléphone portable car nous lui avons envoyé un code qu'il doit entrer. Dans le contrôleur signup.php, créez une nouvelle fonction appelée Activer():
function activate () $ data = array (); $ data ['error'] = "; $ this-> load-> view ('activate', $ data); Si l'activation est incorrecte, j'ai défini une variable d'erreur à utiliser dans la vue. Nous accéderons à cette page après avoir entré avec succès les détails de l’utilisateur et envoyé le SMS. Nous allons également créer un nouveau fichier appelé activate.php dans le application / vues dossier et entrez le balisage suivant:
Activer Confirmer téléphone portable
Votre compte a été créé. Un SMS a été envoyé sur votre mobile avec un code d'activation à 5 chiffres. S'il vous plaît entrez le code pour terminer l'inscription:'forme') ); ?> 'code', 'id' => 'code', 'classe' => 'chiffres requis', 'valeur' => valeur_de_système ('code'))); ?>
Si vous n'avez pas reçu le sms, veuillez cliquer ici pour le renvoyer
Le balisage est assez simple ici. J'ai inclus le même plugin jQuery et validation. Dans l'événement document.ready, j'ai appelé jquery.validate () comme dans la première page. Nous utiliserons valider pour valider le code d'autorisation. Je me fonde également dans le message div, pour montrer un message de réussite. Je mets également un nom de classe 'requis' et 'chiffres' pour restreindre le champ de saisie aux nombres et aux valeurs non vides. Il existe également un message avec une option permettant à l'utilisateur de renvoyer le code d'activation, mais je n'entrerai pas dans cette fonctionnalité, car elle est assez similaire à l'inscription de base..
Créons la fonction qui va traiter et insérer les données dans la base de données. Nous allons également utiliser la bibliothèque de validation. Il est important d’avoir une validation sur le serveur, car certaines personnes peuvent désactiver JavaScript et la validation ne fonctionnera donc pas. C'est une solution de repli qui nous assure que nous n'aurons aucune donnée invalide dans la table. Le processus de fonction est ci-dessous:
function process () $ this-> load-> library ('form_validation'); if ($ this-> form_validation-> run ()) $ signup = array (); $ signup ['name'] = $ this-> input-> post ('name'); $ signup ['email'] = $ this-> input-> post ('email'); $ signup ['country'] = $ this-> input-> post ('country'); $ signup ['mobile'] = $ this-> input-> post ('pays'). $ this-> input-> post ('mobile'); // génère le code d'activation unique mt_rand (); $ inscription ['activation'] = rand (11111, 99999); // insère dans db $ this-> db-> insert ('utilisateurs', $ signup); // send auth sms set_cookie ('signé', $ this-> db-> insert_id (), 86500); // redirect redirect ('signup / activate'); else $ this-> config-> load ('countries', true); $ data ['countries'] = $ this-> config-> item ('countries'); $ this-> load-> view ('inscription', $ data); Eh bien, c'est beaucoup de code! Passons en revue toutes les parties principales:
Nous chargeons d'abord la bibliothèque de validation de formulaire. Après cela, nous utilisons la validation de formulaire courir() fonction pour vérifier les valeurs correctes. Si toutes les entrées passent, nous faisons un tableau avec toutes les données de post en utilisant $ this-> input-> post ('input_name') et insérez les données dans une table appelée utilisateurs, que nous ferons dans un instant. Une chose à noter ici est que je génère également le code d'authentification. j'utilise mt_rand () pour ensemencer le générateur aléatoire et générer un nombre unique de 5 chiffres. Nous faisons cela en exécutant rand() générer un nombre compris entre 11111 et 99999. Cela nous donne toujours un nombre de 5 cyphers de longueur. Je n'ai pas utilisé 10000 car nous pouvons obtenir un nombre qui répète ses chiffres, comme 10002, qui n'a pas l'air trop aléatoire. J'ai également défini un cookie appelé "signé" avec la valeur de l'identifiant d'insertion de l'insertion réelle dans la base de données, puis redirige l'utilisateur vers la fonction d'activation. Si certains champs ne sont pas valides, nous chargeons à nouveau les pays et la vue d'inscription. Si vous regardez la vue d'inscription depuis le début, vous verrez que j'utilise set_value () pour obtenir la valeur utilisée à partir de la dernière inscription. Donc, s'il y a un champ invalide, le reste des champs sera rempli avec les dernières données. Mais il y a une ligne que nous devons mettre à jour dans la vue d'inscription:
J'ai remplacé le troisième paramètre avec $ _POST ['pays'], en s'assurant qu'il ne montre pas un avis avec @. Cela définira l'option de sélection sur celle qui a été sélectionnée avant la soumission. Si nous n'avons pas de pays dans les données de publication, nous ne sélectionnerons rien, comme c'est le cas au début de l'inscription.
Ok, je parie que vous allez demander: comment le serveur sait-il quel est le bon format pour la validation côté serveur? Eh bien, nous devons créer les règles pour la validation. Heureusement, CodeIgniter vous permet de les écrire dans un fichier de configuration appelé formulaire_validation.php dans le application / config dossier. Créez le fichier s'il n'existe pas déjà et entrez les informations suivantes:
$ config = array (array ('field' => 'name', 'label' => 'Name', 'rules' => 'obligatoire'), array ('field' => 'email', 'label' = > 'Email', 'rules' => 'required | valid_email | callback_check_email_exists'), array ('field' => 'country', 'label' => 'Country', 'rules' => 'required'), array ('field' => 'mobile', 'label' => 'GSM', 'rules' => 'obligatoire | numérique')); J'utilise ce tableau multidimensionnel pour définir les règles correspondantes pour la validation. Par exemple, pour le champ de nom, j'utilise la clé «champ» pour définir les règles du champ de nom, la clé «libellé» pour définir le nom du champ dans le message d'erreur (s'il apparaît) et les «règles». clé pour définir les règles. Je sépare les règles avec un caractère de pipe (c'est-à-dire '|'). Pour plus d'informations sur les règles disponibles, consultez la documentation de validation du formulaire dans le guide de l'utilisateur. Je crée également un rappel défini par l'utilisateur (callback_check_email_exists) pour vérifier si l'e-mail existe. Ajouter rappeler_ au nom de la règle recherche une fonction dans le contrôleur et l’appelle. Cette fonction vérifie l'existence de la même adresse électronique dans la base de données et la source est:
function check_email_exists ($ email) $ rs = $ ceci-> db-> où ('email', $ email) -> count_all_results ('utilisateurs'); $ this-> form_validation-> set_message ('check_email_exists', "Nous sommes désolés, cet email existe déjà!"); si ($ rs < 1 ) return true; return false; C'est une fonction simple qui accepte un argument (la valeur en cours de vérification) et renvoie true ou false selon le format. Nous vérifions s’il existe un résultat avec l’adresse e-mail dans le tableau, et s’il existe un résultat, nous renvoyons false. Nous devons renvoyer true si nous voulons valider et false pour invalide, le nom de la fonction est donc un peu maladroit.
Ne pensez même pas à tester l'actvation maintenant! Vous obtiendrez une mauvaise erreur car nous n'avons pas créé la table! Eh bien, vous pouvez simplement télécharger le code source et importer la table des utilisateurs à partir du utilisateurs.sql Fichier ou le créer avec les commandes suivantes:
CREATE TABLE 'utilisateurs' ('uid' INT UNSIGNED NOT NULL AUTO_INCREMENT, 'nom' TEXT NOT NULL, 'email' TEXT NOT NULL, 'pays' INT NON NULL, 'mobile' TEXT NOT NULL, 'activation' TEXT NOT NULL, 'active' INT NOT NULL, PRIMARY KEY ('uid')); Exécutez ce code dans phpMyAdmin et vous aurez la table créée.
Si vous testez le code maintenant, vous obtiendrez toute la validation correcte. Vous pouvez simplement désactiver JavaScript pour essayer la validation du serveur. Vous n'entrerez pas avec des données non valides! je t'avais prévenu!
C'est la fin de la première partie. La prochaine fois, dans la deuxième partie de cette série, nous couvrirons l'envoi de SMS à l'aide d'un service de passerelle SMS tiers. J'espère que vous avez apprécié mon tutoriel et merci de rester pour vérifier tout cela!
