Realizarea unui sistem de înregistrare excelent folosind PHP, MySQL și jQuery. Înregistrare pas cu pas folosind jQuery Comutare animată între formulare folosind jQuery

Dacă trebuie să faceți una dintre secțiunile site-ului dvs. web accesibilă unui cerc limitat, dar nespecificat de persoane, cel mai simplu mod de a face acest lucru este înregistrarea și autorizarea utilizatorilor. Există multe modalități de a autoriza utilizatorii. Puteți utiliza atât instrumentele serverului web, cât și instrumentele limbajului de programare. Vom vorbi despre cazul în care se folosesc sesiuni PHP.

Probabil ați dori să vedeți un mod mai modern de a crea această formă. Încă am planuri să o prezint pe deplin într-un mod modern și relevant, dar puteți vedea că forma părere poate fi construit folosind tehnici orientate pe obiecte în PHP.

Mai întâi, să discutăm despre toți pașii pe care îi vom face în continuare. De ce avem nevoie? Avem nevoie de un script care să înregistreze utilizatorul, să îl autorizeze, să îl redirecționeze undeva după autorizare. De asemenea, va trebui să creăm o pagină care va fi protejată împotriva accesului de către utilizatori neautorizați. Pentru înregistrare și autorizare va trebui să creăm Formulare HTML. Vom stoca informații despre utilizatorii înregistrați într-o bază de date. Aceasta înseamnă că mai avem nevoie de un script pentru conectarea la DBMS. Toată munca noastră va fi făcută de funcții pe care le scriem noi înșine. Vom salva aceste funcții într-un fișier separat.

Deci, avem nevoie de următoarele fișiere:

  • conexiune la SGBD;
  • funcții personalizate;
  • autorizare;
  • înregistrare;
  • pagina protejata;
  • script de oprire a utilizatorului;
  • un script care verifică starea de autorizare a utilizatorului;
  • foaie de stil pentru cel mai simplu design al paginilor noastre.

Toate acestea vor fi lipsite de sens dacă nu aveți un tabel corespunzător în baza de date. Lansați instrumentul dvs. de gestionare DBMS (PhpMyAdmin sau Linie de comanda, oricare este mai convenabil) și rulați următoarea interogare în ea:

CREATE TABLE `users` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` char(16) NOT NULL, `parola` char(40) NOT NULL, `reg_date` timestamp NU NULL DEFAULT CURRENT_TIMESTAMP, CHEIE PRIMARĂ (` id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Voi denumi fișierele noastre script astfel (toate vor fi într-un singur director):

  • baza de date.php;
  • funcții.php;
  • login.php;
  • înregistrare.php;
  • index.php;
  • logout.php;
  • checkAuth.php;
  • stil.css.

Scopul fiecăruia dintre ei, sunt sigur, vă este clar. Să începem cu scriptul de conectare la SGBD. L-ai văzut deja. Doar salvați codul pentru acest script într-un fișier numit database.php. Vom declara funcții personalizate în fișierul functions.php. Cum vor funcționa toate acestea? Un utilizator neautorizat încearcă să acceseze un document protejat index.php, sistemul verifică dacă utilizatorul este autorizat, dacă utilizatorul nu este autorizat, este redirecționat către pagina de autorizare. Pe pagina de conectare, utilizatorul ar trebui să vadă un formular de autorizare. Hai să o facem.

Autorizare utilizator Logarea dvs.: Parola dvs.:

Inregistreaza-te.

Acum, formularul nostru trebuie să primească o formă. În același timp, vom defini reguli pentru alte elemente. Privind în viitor, voi prezenta în întregime conținutul foii de stil.

/* fișier style.css */ .row ( margin-bottom:10px; width:220px; ) .row etichetă ( display:block; font-weight:bold; ) .row input.text ( font-size:1.2em; padding:2px 5px; ) .to_reg ( font-size:0.9em; ) .instruction ( font-size:0.8em; color:#aaaaaa; margin-left:2px; cursor:default; ) .error (color:red; margine-stânga:3px;)

Dacă totul este făcut corect, ar trebui să aveți următoarele în browser:

Desigur, nu avem încă un singur utilizator înregistrat și, pentru a vă autentifica, trebuie să vă înregistrați. Să facem un formular de înregistrare.

Înregistrare utilizator Introduceți datele dvs. de autentificare: Înregistrarea utilizatorului Introduceți datele dvs. de conectare:

Acest fișier dbconnect.php va trebui conectat la manevrele de formulare.

Observați variabila $address_site, aici am indicat numele site-ului meu de testare la care voi lucra. Vă rugăm să indicați numele site-ului dvs. în consecință.

Structura site-ului

Acum să ne uităm la structura HTML a site-ului nostru.

Vom muta antetul și subsolul site-ului în fișiere separate, header.phpȘi footer.php. Le vom include pe toate paginile. Și anume pe pagina principală (fișier index.php), la pagina cu formularul de înregistrare (file form_register.php) și la pagina cu formularul de autorizare (dosar form_auth.php).

Blocați cu link-urile noastre, înregistrareȘi autorizare, adăugați-le în antetul site-ului, astfel încât să fie afișate pe toate paginile. Va intra un link către pagina cu formularul de înregistrare (fișier form_register.php) iar celălalt la pagina cu formularul de autorizare (dosar form_auth.php).

Conținutul fișierului header.php:

Numele site-ului nostru

Ca rezultat, pagina noastră principală arată astfel:


Desigur, site-ul dvs. poate avea o structură complet diferită, dar acest lucru nu este important pentru noi acum. Principalul lucru este că există link-uri (butoane) pentru înregistrare și autorizare.

Acum să trecem la formularul de înregistrare. După cum ați înțeles deja, îl avem în dosar form_register.php.

Accesați baza de date (în phpMyAdmin), deschideți structura tabelului utilizatoriiși uită-te la ce domenii avem nevoie. Aceasta înseamnă că avem nevoie de câmpuri pentru introducerea prenumelui și prenumelui, un câmp pentru introducerea adresei poștale (E-mail) și un câmp pentru introducerea parolei. Și din motive de securitate, vom adăuga un câmp pentru introducerea unui captcha.

Pe server, ca urmare a procesării formularului de înregistrare, pot apărea diverse erori din cauza cărora utilizatorul nu se va putea înregistra. Prin urmare, pentru ca utilizatorul să înțeleagă de ce înregistrarea eșuează, este necesar să afișeze mesaje despre aceste erori.

Înainte de a afișa formularul, adăugați un bloc pentru a afișa mesajele de eroare din sesiune.

Si inca ceva, daca utilizatorul este deja autorizat, si de curiozitate merge direct pe pagina de inregistrare scriind in bara de adrese a browserului adresa_site-ului/form_register.php, apoi în acest caz, în locul formularului de înregistrare, vom afișa un antet în care se menționează că este deja înregistrat.

În general, codul fișierului form_register.php ne descurcam:

Esti deja inregistrat

În browser, pagina cu formularul de înregistrare arată astfel:


Folosind atributul obligatoriu, am făcut toate câmpurile obligatorii.

Atenție la codul formularului de înregistrare unde este afișat captcha:


Am specificat calea către fișier în valoarea atributului src pentru imagine captcha.php, care generează acest captcha.

Să ne uităm la codul fișierului captcha.php:

Codul este bine comentat, așa că mă voi concentra doar pe un singur punct.

În interiorul unei funcții imagineTtfText(), este specificată calea către font verdana.ttf. Deci, pentru ca captcha să funcționeze corect, trebuie să creăm un folder fonturi, și plasați fișierul font acolo verdana.ttf. Îl puteți găsi și descărca de pe Internet, sau îl puteți lua din arhiva cu materialele acestui articol.

Am terminat cu structura HTML, este timpul să trecem mai departe.

Verificarea validității e-mailului folosind jQuery

Orice formular trebuie să verifice validitatea datelor introduse, atât pe partea clientului (folosind JavaScript, jQuery), cât și pe partea serverului.

Trebuie să acordăm o atenție deosebită câmpului E-mail. Este foarte important ca adresa poștală introdusă să fie validă.

Pentru acest câmp de introducere, setăm tipul de e-mail (type="email"), acest lucru ne avertizează ușor împotriva formatelor incorecte. Dar acest lucru nu este suficient, deoarece prin inspectorul de cod pe care ni-l pune la dispoziție browser-ul putem modifica cu ușurință valoarea atributului tip Cu e-mail pe text, și atât, cecul nostru nu va mai fi valabil.


Și în acest caz, trebuie să facem o verificare mai fiabilă. Pentru a face acest lucru, vom folosi biblioteca jQuery din JavaScript.

Pentru a conecta biblioteca jQuery, în fișier header.phpîntre etichete , înainte de eticheta de închidere , adăugați această linie:

Imediat după această linie, vom adăuga codul de validare a e-mailului. Aici vom adăuga un cod pentru a verifica lungimea parolei introduse. Lungimea sa trebuie să fie de cel puțin 6 caractere.

Utilizând acest script, verificăm valabilitatea adresei de e-mail introduse. Dacă utilizatorul a introdus un e-mail incorect, afișăm un mesaj de eroare în acest sens și dezactivăm butonul de trimitere a formularului. Dacă totul este în regulă, atunci eliminăm eroarea și activăm butonul de trimitere a formularului.

Și așa, am terminat cu validarea formularului din partea clientului. Acum îl putem trimite la server, unde vom face și câteva verificări și vom adăuga date în baza de date.

Înregistrare utilizator

Trimitem formularul la dosar pentru procesare înregistrare.php, prin metoda POST. Numele acestui fișier de gestionare este specificat în valoarea atributului acțiune. Și metoda de trimitere este specificată în valoarea atributului metodă.

Deschideți acest fișier înregistrare.phpși primul lucru pe care trebuie să-l facem este să scriem o funcție de lansare a sesiunii și să conectăm fișierul creat anterior dbconnect.php(În acest fișier am făcut o conexiune la baza de date). Și, de asemenea, să declarăm imediat celulele mesaje de eroareȘi mesaje_succesîn matricea globală de sesiuni. ÎN mesaje_eroare vom înregistra toate mesajele de eroare care apar în timpul procesării formularelor și în mesaje_succes, vom înregistra mesaje vesele.

Înainte de a continua, trebuie să verificăm dacă formularul a fost trimis. Un atacator poate privi valoarea atributului acțiune din formular și aflați ce fișier procesează acest formular. Și poate avea ideea să meargă direct la acest fișier introducând următoarea adresă în bara de adrese a browserului: http://adresa_site-ului/register.php

Deci, trebuie să verificăm o celulă în matricea globală POST al cărei nume se potrivește cu numele butonului nostru „Înregistrare” din formular. Astfel verificăm dacă butonul „Înregistrare” a fost apăsat sau nu.

Dacă un atacator încearcă să meargă direct la acest fișier, va primi un mesaj de eroare. Permiteți-mi să vă reamintesc că variabila $address_site conține numele site-ului și a fost declarată în fișier dbconnect.php.

Valoarea captcha din sesiune a fost adăugată atunci când a fost generată, în fișier captcha.php. Ca o reamintire, vă voi arăta din nou această bucată de cod din fișier captcha.php, unde valoarea captcha este adăugată la sesiune:

Acum să trecem la verificarea în sine. În dosar înregistrare.php, în interiorul blocului if, unde verificăm dacă a fost apăsat butonul „Înregistrare”, sau mai degrabă unde este indicat comentariul „” // (1) Spațiu pentru următoarea bucată de cod"noi scriem:

//Verificați captcha primită //Tăiați spațiile de la începutul și sfârșitul liniei $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Compară valoarea primită cu valoarea din sesiune. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Dacă captcha-ul nu este corect, atunci returnăm utilizatorul la pagina de înregistrare și acolo îi vom afișa un mesaj de eroare că a introdus captcha greșit . $error_message = "

Eroare! Ai introdus captcha greșit

"; // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] = $error_message; // Reveniți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: " .$address_site ."/form_register.php"); //Opriți ieșirea din script(); ) // (2) Loc pentru următoarea bucată de cod )else( //Dacă captcha nu este trecut sau este ieșire gol ("

Eroare! Nu există un cod de verificare, adică un cod captcha. Puteți merge la pagina principală.

"); }

În continuare, trebuie să procesăm datele primite din matricea POST. În primul rând, trebuie să verificăm conținutul matricei globale POST, adică dacă există celule acolo ale căror nume corespund cu numele câmpurilor de intrare din formularul nostru.

Dacă celula există, atunci tăiem spațiile de la începutul și sfârșitul liniei din această celulă, în caz contrar, redirecționăm utilizatorul înapoi la pagina cu formularul de înregistrare.

În continuare, după ce am tăiat spațiile, adăugăm linia la variabilă și verificăm această variabilă dacă nu este goală; dacă nu este goală, trecem mai departe, altfel redirecționăm utilizatorul înapoi la pagina cu formularul de înregistrare.

Lipiți acest cod în locația specificată" // (2) Spațiu pentru următoarea bucată de cod".

/* Verificați dacă există date trimise din formular în matricea globală $_POST și includeți datele trimise în variabile obișnuite.*/ if(isset($_POST["first_name"]))( //Tăiați spațiile de la început și sfârșitul șirului $first_name = trim($_POST["first_name"]); //Verificați variabila pentru golire if(!empty($first_name))( // Pentru siguranță, convertiți caracterele speciale în entități HTML $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Introdu numele tau

Câmpul de nume lipsește

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) if( isset($_POST["last_name"]))( //Tăiați spațiile de la începutul și sfârșitul liniei $last_name = trim($_POST["last_name"]); if(!empty($last_name)) ( // Pentru securitate , convertiți caracterele speciale în entități HTML $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Vă rugăm să introduceți numele dvs. de familie

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) )else ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Câmpul numelui de familie lipsește

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) if( isset($_POST["email"]))( //Tăiați spațiile de la începutul și sfârșitul liniei $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Locația codului pentru verificarea formatului adresei de e-mail și a unicității acesteia )else( // Salvați mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Introduceți adresa dvs. de email

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) )else ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) if( isset($_POST["parolă"]))( //Tăiați spațiile de la începutul și sfârșitul șirului $parolă = trim($_POST["parolă"]); if(!empty($parolă)) ( $parolă = htmlcaractere speciale ($parolă, ENT_QUOTES); //Criptați parola $parolă = md5($parolă."top_secret"); )else( // Salvați mesajul de eroare în sesiune. $_SESSION["messaje_de_eroare"] .= "

Introduceți parola

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) )else ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) // (4) Locul pentru codul pentru adăugarea unui utilizator la baza de date

De o importanță deosebită este domeniul e-mail. Trebuie să verificăm formatul adresei poștale primite și unicitatea acesteia în baza de date. Adică există vreun utilizator cu aceeași adresă de e-mail deja înregistrat?

La locatia specificata" // (3) Locația codului pentru a verifica formatul adresei poștale și unicitatea acesteia" adăugați următorul cod:

//Verificați formatul adresei de e-mail primite folosind o expresie regulată $reg_email = "/^**@(+(*+)*\.)++/i"; //Dacă formatul adresei de e-mail primite nu se potrivește cu expresia regulată if(!preg_match($reg_email, $email))( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Ați introdus un e-mail incorect

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); ) // Verificăm dacă o astfel de adresă este deja în baza de date. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); / /Dacă numărul de primite există exact un rând, ceea ce înseamnă că utilizatorul cu această adresă de e-mail este deja înregistrat if($result_query->num_rows == 1)( //Dacă rezultatul obținut nu este fals if(($row = $result_query->fetch_assoc()) != false) ( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Un utilizator cu această adresă de e-mail este deja înregistrat

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); )else( // Salvați mesajul de eroare la sesiune . $_SESSION["error_messages"] .= "

Eroare la interogarea bazei de date

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); ) /* închiderea selecției */ $ result_query-> close(); //Oprește scriptul exit(); ) /* închiderea selecției */ $result_query->close();

Și așa, am terminat cu toate verificările, este timpul să adăugăm utilizatorul la baza de date. La locatia specificata" // (4) Locul pentru codul pentru adăugarea unui utilizator la baza de date" adăugați următorul cod:

//Interogare pentru a adăuga un utilizator la baza de date $result_query_insert = $mysqli->query("INSERT INTO `users` (prenume, prenume, e-mail, parolă) VALUES ("".$prenume."", "".$nume ." ", "".$email.", "".$parolă."")"); if(!$result_query_insert)( // Salvează mesajul de eroare în sesiune. $_SESSION["error_messages"] .= "

Eroare la solicitarea de adăugare a utilizatorului la baza de date

"; //Readuceți utilizatorul la antetul paginii de înregistrare ("HTTP/1.1 301 Mutat permanent"); header("Locație: ".$address_site."/form_register.php"); //Opriți ieșirea din script(); )else( $_SESSION["success_messages"] = "

Înregistrarea s-a încheiat cu succes!!!
Acum vă puteți autentifica folosind numele de utilizator și parola.

"; //Trimite utilizatorul la antetul paginii de autorizare ("HTTP/1.1 301 Mutat permanent"); header ("Locație: ".$address_site."/form_auth.php"); ) /* Completarea cererii */ $ result_query_insert-> close(); //Închide conexiunea la baza de date $mysqli->close();

Dacă a apărut o eroare în cererea de adăugare a unui utilizator la baza de date, adăugăm un mesaj despre această eroare în sesiune și returnăm utilizatorul la pagina de înregistrare.

În rest, dacă totul a mers bine, adăugăm și un mesaj la sesiune, dar de data aceasta este mai plăcut, și anume îi spunem utilizatorului că înregistrarea a avut succes. Și îl redirecționăm către pagina cu formularul de autorizare.

Scriptul pentru verificarea formatului adresei de e-mail și a lungimii parolei se află în fișier header.php, deci se va aplica și câmpurilor din acest formular.

Sesiunea este începută și în fișier header.php, deci în dosar form_auth.php Nu este nevoie să începem o sesiune, deoarece vom primi o eroare.


După cum am spus deja, aici funcționează și scriptul pentru verificarea formatului adresei de e-mail și a lungimii parolei. Prin urmare, dacă utilizatorul introduce o adresă de e-mail incorectă sau o parolă scurtă, va primi imediat un mesaj de eroare. Un buton a intra va deveni inactiv.

După remedierea erorilor, butonul a intra devine activ, iar utilizatorul va putea trimite formularul la server, unde va fi procesat.

Autorizarea utilizatorului

Pentru a atribui valoare acțiune handicapul de autorizare are un dosar specificat auth.php, aceasta înseamnă că formularul va fi procesat în acest fișier.

Și așa, deschideți fișierul auth.phpși scrieți codul pentru a procesa formularul de autorizare. Primul lucru pe care trebuie să-l faceți este să începeți o sesiune și să conectați fișierul dbconnect.php pentru a se conecta la baza de date.

Când faceți clic pe linkul de ieșire de pe site, suntem duși la un fișier logout.php, unde pur și simplu distrugem celulele cu adresa de e-mail și parola din sesiune. După aceasta, returnăm utilizatorul înapoi la pagina pe care a fost făcut clic pe link Ieșire.

Cod fișier logout.php:

Asta e tot. Acum știți cum să implementați și să procesați formularele de înregistrare și autorizare a utilizatorilor pe site-ul dvs. Aceste formulare se găsesc pe aproape fiecare site web, așa că fiecare programator ar trebui să știe cum să le creeze.

De asemenea, am învățat cum să validăm datele de intrare, atât pe partea client (în browser, folosind JavaScript, jQuery), cât și pe partea server (folosind PHP). De asemenea, am învățat cum să implementăm o procedură de părăsire a site-ului.

Toate scripturile au fost testate și funcționează. Puteți descărca arhiva cu fișierele acestui mic site de pe acest link.

Pe viitor voi scrie un articol unde voi descrie. Și mai am de gând să scriu un articol în care să explic (fără a reîncărca pagina). Deci, pentru a fi la curent cu lansarea de noi articole, vă puteți abona la site-ul meu.

Dacă aveți întrebări, vă rugăm să mă contactați, iar dacă observați vreo eroare în articol, vă rog să-mi spuneți.

Planul de lecție (Partea 5):

  • Crearea unei structuri HTML pentru formularul de autorizare
  • Prelucrăm datele primite
  • Afișăm salutul utilizatorului în antetul site-ului
  • Ți-a plăcut articolul?

    În acest articol, ne vom uita la înregistrarea pas cu pas folosind jQuery.

    Dacă înregistrarea pe site-ul dvs. necesită completarea a câteva zeci de câmpuri, este foarte irațional să le plasați pe o singură pagină. La urma urmei, utilizatorul este o creatură foarte leneșă și nu va dori să completeze toate aceste câmpuri.

    O opțiune alternativă este împărțirea înregistrării în mai mulți pași. Acest lucru generează imediat multe răspunsuri pozitive - la urma urmei, atunci când începe să efectueze pași, utilizatorul are cel mai adesea dorința de a le termina.

    De asemenea, este logic să împărțiți înregistrarea în blocuri logice - informații de contact, adresă, date personale și așa mai departe.

    Pentru înregistrarea pas cu pas, nu este nevoie să creați mai multe formulare și să trimiteți datele separat către server. Este mult mai convenabil să plasați totul într-o singură formă, dar afișați utilizatorului doar o anumită parte a formularului la fiecare pas. Aceasta este exact logica din exemplul nostru.

    Pe lângă logică, merită să ținem cont că la început doar linkul este vizibil "Redirecţiona"/"Urmatorul pas", iar la ultimul pas nu se vede, dar se vede "Înapoi"Și "Înregistrare".

    Să ne uităm la exemplul în sine:

    Pagină

    Pasul 1

    Log in:

    E-mail:

    Parola:

    Pasul 2

    Nume:

    Nume de familie:

    Vârstă:

    Pasul 3

    O tara:

    Oraș:

    Stradă:

    Înapoi Pasul următor

    body ( margin:0; ) /* Stilul general este peste */ form ( width:30%; margin:0 auto; ) form div.step ( display:none; ) form div.step p.step( text-align: center ; font-size:28px; ) form div.step p( ) form div.step p input( float:right; ) a.back ( display:none; ) form input ( display:none; ) a (color:# 006600 ; text-decoration:none; ) form p.talign( text-align:center; )

    Vom plasa scriptul responsabil pentru comutarea pașilor în js/steps_registration.js, nu uitați să includeți și biblioteca jQuery:

    $(document).ready(function() ( // Așteptați ca pagina să se încarce var pași = $("form").children(".step"); // găsiți toți pașii din formularul $(pași) .show(); // afișează primul pas var current_step = 0; // setează pasul curent $("a.next").click(function())( // Faceți clic pe evenimentul de pe linkul "Next step" dacă (pasul_curent == steps.length-2) ( // verifică dacă următorul pas va fi ultimul $(this).hide(); // ascunde linkul „Următorul pas” $(„form input”).show( ); // afișează butonul „Înregistrare” ) $(„a.back”).show(); // afișează linkul „Înapoi” current_step++; // crește contorul diapozitivului actual changeStep(current_step); // schimbați pasul )); $("a.back").click(function( )( // Faceți clic pe evenimentul pe o imagine mică dacă (current_step == 1) ( // verificați dacă pasul anterior este primul $(acest ).hide(); // ascunde linkul „Înapoi” ) $(„form input”) .hide(); // ascunde butonul „Înregistrare” $(„a.next”).show(); // arată linkul „Următorul pas” current_step--; // micșorează contorul slide-ului curent changeStep(current_step);// schimbă pasul)); function changeStep(i) ( // schimbarea pasului function $(steps).hide(); // ascunde toti pasii $(steps[i]).show(); // arata pe cel curent ) ));

    Nu vom scrie aici codul de trimitere PHP, deoarece nu este în întregime relevant pentru această lecție. Este de remarcat doar faptul că scrisoarea este trimisă la adresa specificată în primul pas al formularului. În orice caz, puteți descărca fișierele demo și puteți vedea singur.

    Acțiune