Share
SMS is een wereldwijde technologie die door bijna iedereen met een mobiele telefoon wordt gebruikt. Ondanks het feit dat het een veel groter bereik heeft dan de smartphonemarkt, ontvangt sms-programmering veel minder dekking en blijft vaak ongekapitaliseerd. In deze multipart-zelfstudie laat ik u zien hoe u een aanmeldingsformulier voor websites kunt maken waarmee gebruikers een mobiel nummer kunnen invoeren. Ik zal u vervolgens laten zien hoe u PHP kunt gebruiken voor verificatie van de telefoonnummers op de server om te controleren of het mobiele nummer dat de gebruiker heeft ingevoerd eigenlijk zijn mobiele telefoon is. Onderweg zullen we jQuery gebruiken om client-side validatie en CodeIgniter als ons ontwikkelingsraamwerk uit te voeren.
Laten we beginnen met een overzicht van de oplossing. De gebruiker krijgt toegang tot een aanmeldingsformulier, selecteert een land en voert een mobiel telefoonnummer in. Nadat het aanmeldingsformulier is verzonden, moet de gebruiker een verificatiecode invoeren die naar het mobiele telefoonnummer wordt verzonden dat is ingevoerd om het nieuwe account te activeren. Als de gebruiker de pagina sluit voordat de verificatiecode is ingevoerd en later weer naar het aanmeldingsformulier gaat, wordt het telefooncodeformulier nog steeds weergegeven. Oké, laten we beginnen!
Download CodeIgniter van www.codeigniter.com. Vouw vervolgens de map uit en kopieer deze naar de webroot van uw webserver (u moet toegang hebben tot een webserver die PHP kan parseren om deze zelfstudie te voltooien). Kopiëren naar uw webroot is optioneel, maar als u dit doet, kunnen we beter door de bronbestanden navigeren.
In de applicatie dir, navigeer naar de configuratie map en open config.php. Dit is de hoofdconfiguratie, waar we een aantal instellingen moeten instellen, zoals in de onderstaande code:
$ config ['base_url'] = "http: // localhost / sending_sms /"; ... $ config ['index_page'] = "index.php"; ... $ config ['uri_protocol'] = "AUTO";
Open vervolgens database.php in dezelfde configuratie-map en voltooi de volgende toewijzingen:
db ['standaard'] ['hostnaam'] = "localhost"; $ db ['standaard'] ['gebruikersnaam'] = "root"; $ db ['standaard'] ['wachtwoord'] = "__password__"; $ db ['standaard'] ['database'] = "sms_users";
Open ten slotte autoload.php in de map config en voeg wat bibliotheken en helpers toe die we nodig hebben:
Accentsconagua
$ autoload ['libraries'] = array ('database'); ... $ autoload ['helper'] = array ('url', 'form', 'cookie'); Laten we de registratie-controller maken. Maak een bestand met de naam signup.php in de map application / controllers en laten we beginnen met het coderen van de belangrijkste aanmeldingsfunctionaliteit:
class Signup breidt Controller uit function Signup () parent :: Controller (); function index () $ this-> load-> view ('signup'); Ik heb de klasse Signup gemaakt, je zult zien dat deze dezelfde naam heeft als het bestand, en dat het Controller uitbreidt. Ik heb de inhoudsopgave() functie die de weergave van het aanmeldingsformulier afhandelt. We noemen dit index, omdat dit de standaardfunctie is die wordt aangeroepen wanneer deze de standaard-URL benadert, zonder segmenten. We zullen ook de standaardcontroller (aanmelden) moeten configureren config / routes.php:
$ route ['default_controller'] = "aanmelden";
Als je de app nu test, krijg je een foutmelding met de melding 'Kan het gevraagde bestand niet laden: signup.php'. Dit komt omdat we de aanmeldingsweergave niet hebben gemaakt. Laten we dit nu doen.
Maak een nieuw bestand signup.php in de apllication / uitzicht map en voer de volgende markup in:
Inschrijven '); ?> 'het formulier') ); ?> 'naam', 'id' => 'naam', 'klasse' => 'verplicht', 'waarde' => set_value ('naam'))); ?> 'email', 'id' => 'email', 'class' => 'verplicht e-mailadres', 'waarde' => set_value ('email'))); ?>Aanmeldformulier
',''prefix', 'id' => 'prefix', 'value' => set_value ('prefix'))); ?> 'mobiel', 'id' => 'mobiel', 'klasse' => 'vereiste cijfers', 'waarde' => set_value ('mobiel'))); ?>
Laat me een deel van de markup uitleggen. Ik heb in de kop een bestand reset.css toegevoegd met de gebruikelijke meyerweb-reset CSS-regels en een bestand design.css, dat we later zullen coderen. Ik heb deze twee in een map in de root geplaatst 'Css'. ik gebruik base_url () om de root in het viewbestand te krijgen.
Ik heb de formulierhulp gebruikt om de formulieropening te maken, terwijl ik de ID van de vorm 'vorm' gaf, ik maakte een aantal labels en invoer met dezelfde formulierhulp. Je zult opmerken dat ik een array doorgeef als de tweede parameter van de form_input () functie met id- of klassentoetsen. Lees de CodeIgniter-documentatie voor meer informatie over het gebruik van de formulierhulp. ik gebruikte form_dropdown () om een selectievak te maken, dat een reeks opties met de naam doorgeeft $ landen. We hebben deze array nog niet, maar we zullen het ook een beetje later maken.
Maak het bestand design.css in de css-directory en plaats het in de apllication / uitzicht map en voer de volgende CSS-regels in:
body achtergrondkleur: #CFCFCF; opvulling: 0px; marge: 0px; lettergrootte: 12px; font-family: Helvetica, Verdana, Arial, sans-serif; #wrap width: 400px; marge links: auto; marge-rechts: auto; margin-top: 40px; achtergrondkleur: #ECECEC; rand: vast 1px #FCFCFC; opvulling: 10px; h2 margin-bottom: 10px; lettergrootte: 18px; label display: block; invoer, selecteer width: 380px; opvulling: 5px; margin-bottom: 10px; selecteer width: 390px; #prefix width: 50px; margin-right: 10px; margin-bottom: 0px; weergave: inline; #mobile width: 305px; weergave: inline; input.submit background-colour: # E0E0E0; rand: vast 1px # C5C5C5; breedte: 140 px; lettertype: vet; margin-top: 10px; input.error, select.error margin-bottom: 0px; rand: vast 1px #FFCCCC; div.error opvulling: 5px; achtergrondkleur: #ffeeee; rand: vast 1px #FFCCCC; kleur: # ff0000; div.ok opvulling: 5px; achtergrondkleur: #CCFFCC; rand: vast 1px # 44CC44; color: # 336633; margin-bottom: 10px;
Ik heb de wrap-div-stijl gemaakt en deze gecentreerd door marge-links en marge-rechts in te stellen op auto. Vervolgens heb ik de ingangen gestileerd, ervoor gezorgd dat ze consistent zijn in alle browsers en vervolgens 3 foutklassen gemaakt: .fout, .ok en input.error. We gebruiken dit met de jQuery-validatieplug-in. Ik heb ook 5px padding gebruikt waar ik het nodig vond om te stylen.
Als je nu test, krijg je een melding 'undefined variable countries' en 'ongeldig argument opgegeven voor foreach ()'. Hoe voegen we de landen toe? Welnu, we kunnen ze rechtstreeks bij de select-functie insluiten, maar in plaats daarvan gebruiken we een configuratiebestand. Dit zorgt ervoor dat we elke landcode gemakkelijk en snel kunnen wijzigen. Ik kopieerde de tabel met landcodes van countrycode.org in een nieuw bestand en gebruikte een slim stukje jQuery om alle inhoud in een enkele reeks te verwerken, waardoor ik het definitieve configuratiebestand kreeg. Ik zal niet ingaan op de details. Laat een opmerking achter als je dat wilt weten. Maak een nieuw bestand met de naam 'countries.php' in de application / config map en voeg de landen in de array #config toe met behulp van het volgende model:
$ config = array (); $ config ["] ="; $ config ['93 '] =' Afghanistan '; $ config ['355'] = 'Albanië'; $ config ['213'] = 'Algerije'; ... $ config ['967'] = 'Jemen'; $ config ['260'] = 'Zambia'; $ config ['263'] = 'Zimbabwe';
Ik gebruikte de prefixcodes als sleutels in de array. Hoe kunnen we dit in de weergave openen? We laden dit specifieke configuratiebestand in de controllerfunctie inhoudsopgave() we hebben eerder gemaakt:
function index () $ this-> config-> load ('countries', true); $ data ['landen'] = $ this-> config-> item ('landen'); $ this-> load-> view ('signup', $ data); Ik gebruikte '$ this-> config-> load ()' om de config te laden. U zult opmerken dat ik ook als de tweede parameter true heb doorgegeven. Dit maakt een aparte invoer met de naam 'landen' in de globale configuratie. Als we true niet doorgeven, worden de configuratie-instellingen (de array van de config) toegevoegd aan de globale configuratiearray. Daarna wijzen we het configuratie-item toe aan $ data ['landen'], dat vervolgens door de weergave wordt herkend als $ landen. Ik geef ook de array $ data door aan de weergave als de tweede parameter. Als u de pagina nu test, krijgt u alle landen in de select box! Geweldig goed?
Het is tijd om wat jQuery te doen. We gebruiken hiervoor de plug-in jquery-validatie. Deze plug-in bevindt zich al in de CDN van Microsoft, dus we zullen hem daar vandaan krijgen, evenals jQuery van het CDN van Google. We hebben ook de metadata-plug-in nodig om de klassen rechtstreeks in de html te schrijven:
De validatie-plug-in werkt door een klassenaam te voorzien van de invoer: verplicht voor het vereisen van niet-lege waarden, e-mail voor validatie van een e-mailadres, cijfers voor numerieke ingangen, en meer waar ik niet in zal komen. Je zult merken dat ik de klassen hard codeerde in de ingangen, kijk maar naar de HTML aan het begin. Als u nu test, ziet u dat u een foutmelding krijgt na de invoer met een klasse van .fout die ik in de css heb gecodeerd. Ik codeerde ook de invoerfout klasse, omdat de ongeldige ingang een is toegewezen .fout klas ook. Dit valideert het formulier, als de gebruiker JavaScript heeft ingeschakeld.
We zullen nu een slimme gebeurtenis gebruiken om de waarde van de prefix-invoer te wijzigen wanneer de gebruiker een land selecteert. Dit gebeurt alleen voor visuele doeleinden, omdat we in de backend het voorvoegsel van de landwaarde krijgen, maar dit toont de gebruiker hoe hij zijn telefoon moet invoeren. Laten we dit nu doen:
Ok, dus ik heb een functie gemaakt voor de veranderingsgebeurtenis van de selectie en de waarde van de geselecteerde optie toegewezen aan de invoerwaarde van de prefix. Geen big deal, maar het maakt onze aanmeldingsformulier echt gemakkelijk.
Dit is alles wat we nodig hebben voor de aanmeldingsweergave. Laten we de activeringsfunctie en weergave maken.
Dit is de pagina die de gebruiker ziet nadat hij zich heeft aangemeld. Er zal een bericht zijn waarin staat dat hij zijn mobiele telefoon moet controleren omdat we hem een code hebben gestuurd die hij moet invoeren. Maak in de signup.php-controller een nieuwe functie genaamd activeren():
function activate () $ data = array (); $ data ['error'] = "; $ this-> load-> view ('activate', $ data); Als de activering niet klopt, heb ik een foutvariabele gedefinieerd voor gebruik in de weergave. Deze pagina wordt geopend nadat we de gebruikersgegevens hebben ingevoerd en de sms hebben verzonden. We zullen ook een nieuw bestand maken met de naam activate.php in de application / x bekeken map en voer de volgende markup in:
Activeren Bevestig mobiele telefoon
Je account is aangemaakt. Een sms is verzonden naar uw mobiel met een 5-cijferige activeringscode. Voer de code in om het aanmelden te voltooien:'het formulier') ); ?> 'code', 'id' => 'code', 'class' => 'verplichte cijfers', 'waarde' => set_value ('code'))); ?>
Als je de sms nog niet hebt ontvangen, klik je hier om het opnieuw te verzenden
De opmaak is hier vrij eenvoudig. Ik heb dezelfde jQuery- en validatieplug-in toegevoegd. Binnen de document.ready-gebeurtenis belde ik jquery.validate () zoals op de eerste pagina. We zullen valideren gebruiken voor het valideren van de autorisatiecode. Ik vervaag ook het bericht div in, om een succesbericht weer te geven. Ik heb ook een klassenaam van 'verplicht' en 'cijfers' gezet om het invoerveld terug te zetten naar getallen en niet-lege waarden. Er is ook een bericht met een optie voor de gebruiker om de activeringscode opnieuw te verzenden, maar ik zal niet ingaan op deze functionaliteit, omdat deze vrij gelijkaardig is aan de basisinschrijving.
Laten we de functie maken die de gegevens in de database verwerkt en invoegt. We zullen ook de validatiebibliotheek gebruiken. Het is belangrijk om validatie op de server te hebben, omdat sommige mensen JavaScript kunnen uitschakelen en de validatie dus niet werkt. Dit is een fallback die ons verzekert dat we geen ongeldige gegevens in de tabel zullen hebben. Het functieproces is hieronder:
functieproces () $ 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 ('land'); $ signup ['mobiel'] = $ this-> input-> post ('land'). $ this-> input-> post ('mobiel'); // genereer de unieke activeringscode mt_rand (); $ signup ['activation'] = rand (11111, 99999); // invoegen in db $ this-> db-> insert ('users', $ signup); // send auth sms set_cookie ('signed', $ this-> db-> insert_id (), 86500); // redirect redirect ('signup / activate'); else $ this-> config-> load ('countries', true); $ data ['landen'] = $ this-> config-> item ('landen'); $ this-> load-> view ('signup', $ data); Wel, dat is veel code! Laten we door alle belangrijke delen gaan:
We laden eerst de formuliervalidatiebibliotheek. Daarna gebruiken we formuliervalidaties rennen() functie om te controleren op de juiste waarden. Als alle ingangen passeren, maken we een array met alle postgegevens die worden gebruikt $ This-> input-> post ( 'input_name') en plaats de gegevens in een tabel met de naam gebruikers, die we in een oogwenk zullen maken. Een ding om op te merken is dat ik ook de auth-code genereer. ik gebruik MT_RAND () om de willekeurige generator te zaaien en een uniek 5 cypher-nummer te genereren. We doen dit door te hardlopen rand() om een getal tussen 11111 en 99999 te genereren. Dit geeft ons altijd een aantal van 5 cyphers. Ik heb 10000 niet gebruikt omdat we een getal kunnen krijgen dat de cyphers herhaalt, zoals 10002, die er niet al te willekeurig uitziet. Ik heb ook een cookie ingesteld genaamd 'ondertekend' met de waarde van de invoeg-ID van de daadwerkelijke invoeging in de database en leid de gebruiker vervolgens om naar de activeringsfunctie. Als sommige velden ongeldig zijn, laden we de landen opnieuw en laden de aanmeldingsweergave. Als u de aanmeldingsweergave vanaf het begin bekijkt, ziet u dat ik gebruik set_value () om de gebruikte waarde van de laatste aanmelding te krijgen. Dus als er een ongeldig veld is, worden de rest van de velden gevuld met de laatste gegevens. Maar er is één regel die we moeten bijwerken in de aanmeldingsweergave:
Ik heb de derde parameter vervangen door $ _POST [ 'land'], ervoor zorgen dat er geen melding bij staat @. Hiermee wordt de selecteeroptie ingesteld op degene die vóór het verzenden was geselecteerd. Als we geen land hebben in de postgegevens, zullen we niets selecteren, zoals het geval is bij het begin van de aanmelding.
Ok, ik wed dat je je afvraagt: hoe weet de server wat het juiste formaat is voor de validering aan de serverzijde? Welnu, we moeten de regels voor de validatie opstellen. Gelukkig laat CodeIgniter je toe om ze te schrijven in een configuratiebestand genaamd form_validation.php in de application / config map. Maak het bestand als het nog niet bestaat en voer het volgende in:
$ config = array (array ('field' => 'name', 'label' => 'Name', 'rules' => 'required'), array ('field' => 'email', 'label' = > 'E-mail', 'rules' => 'vereist | valid_email | callback_check_email_exists'), array ('field' => 'country', 'label' => 'Country', 'rules' => 'required'), array ('veld' => 'mobiel', 'label' => 'Mobiele telefoon', 'regels' => 'verplicht | numeriek')); Ik gebruik deze multidimensionale array om de bijbehorende regels voor de validatie in te stellen. Bijvoorbeeld, voor het naamveld gebruik ik de sleutel 'veld' om de regels in te stellen voor het naamveld, de 'label'-toets voor het instellen van de naam van het veld in het foutbericht (als dit wordt weergegeven) en de' regels ' sleutel om de regels in te stellen. Ik scheid de regels met een pipe-characther (d.w.z. '|'). Raadpleeg de documentatie voor formuliervalidatie in de gebruikershandleiding voor meer informatie over de beschikbare regels. Ik maak ook een door de gebruiker gedefinieerde callback (callback_check_email_exists) om te controleren of de e-mail bestaat. Het toevoegen Bel terug_ naar de regelnaam zoekt naar een functie in de controller en roept deze op. Deze functie controleert of er in de database hetzelfde e-mailadres is en de bron is:
functie check_email_exists ($ email) $ rs = $ this-> db-> where ('email', $ email) -> count_all_results ('users'); $ this-> form_validation-> set_message ('check_email_exists', 'Sorry, deze e-mail bestaat al!'); als ($ rs < 1 ) return true; return false; Dit is een eenvoudige functie die een argument accepteert (de waarde die wordt gecontroleerd) en retourneert waar of onwaar, afhankelijk van het formaat. We controleren of er een resultaat is met het e-mailadres in de tabel en als dat het geval is, geven we false op. We moeten true retourneren als we willen valideren en false voor ongeldig, dus de functienaam is een beetje afwijkend.
Denk er niet aan om de actie nu te testen! U krijgt een vervelende fout omdat we de tabel niet hebben gemaakt! Nou, je kunt gewoon de broncode downloaden en de gebruikersentabel importeren uit de users.sql bestand of maak het met de volgende opdrachten:
MAAK TAFEL 'gebruikers' ('uid' INT UNSIGNED NOT NULL AUTO_INCREMENT, 'name' TEXT NOT NULL, 'email' TEXT NOT NULL, 'country' INT NOT NULL, 'mobile' TEXT NOT NULL, 'activation' TEXT NOT NULL, 'actief' INT NOT NULL, PRIMARY KEY ('uid')); Voer deze code uit in phpMyAdmin en u hebt de tabel aangemaakt.
Als u de code nu test, krijgt u alle validaties correct. U kunt JavaScript uitschakelen om de servervalidatie uit te proberen. Je komt niet in aanraking met ongeldige gegevens! ik heb je gewaarschuwd!
Dit is het einde van het eerste deel. De volgende keer, in deel twee van deze serie, behandelen we het verzenden van sms met behulp van een SMS-gateway-service van derden. Ik hoop dat je mijn tutorial leuk vond en bedank dat je bent gebleven om alles te bekijken!
