Jei jums reikia padaryti vieną iš savo svetainės skilčių prieinamą ribotam, bet nenurodytam žmonių ratui, paprasčiausias būdas tai padaryti yra užsiregistruoti ir įgalioti naudotojus. Yra daug būdų, kaip autorizuoti vartotojus. Galite naudoti tiek žiniatinklio serverio įrankius, tiek programavimo kalbos įrankius. Mes kalbėsime apie atvejį, kai naudojami PHP seansai.
Tikriausiai norėtumėte pamatyti modernesnį šios formos kūrimo būdą. Dar turiu planų visapusiškai ją pateikti šiuolaikiškai ir aktualiai, bet matosi, kad forma Atsiliepimas gali būti sukurta naudojant į objektą orientuotas technologijas PHP.
Pirmiausia aptarkime visus veiksmus, kurių imsimės toliau. Ko mums net reikia? Mums reikia scenarijaus, kuris užregistruos vartotoją, autorizuos vartotoją, po autorizavimo vartotoją kur nors nukreips. Taip pat turėsime sukurti puslapį, kuris būtų apsaugotas nuo neteisėtų vartotojų prieigos. Norėdami užsiregistruoti ir gauti leidimą, turėsime sukurti HTML formos. Informaciją apie registruotus vartotojus saugosime duomenų bazėje. Tai reiškia, kad mums vis tiek reikia scenarijaus prisijungimui prie DBVS. Visas mūsų darbas bus atliktas funkcijomis, kurias rašome patys. Šias funkcijas išsaugosime atskirame faile.
Taigi, mums reikia šių failų:
- prisijungimas prie DBVS;
- individualizuotos funkcijos;
- leidimas;
- Registracija;
- apsaugotas puslapis;
- vartotojo išjungimo scenarijus;
- scenarijus, tikrinantis vartotojo įgaliojimo būseną;
- stiliaus lapas, skirtas paprasčiausiam mūsų puslapių dizainui.
Visa tai bus beprasmiška, jei duomenų bazėje neturėsite atitinkamos lentelės. Paleiskite savo DBVS valdymo įrankį (PhpMyAdmin arba komandinė eilutė, kuris patogesnis) ir joje paleiskite šią užklausą:
KURTI LENTELĘ "naudotojai" ("id" int(11) NOT NULL AUTO_INCREMENT, "prisijungimo" simbolis(16) NOT NULL, "slaptažodis" char(40) NOT NULL, "reg_date" laiko žyma NOT NULL NUMATYTOJI CURRENT_TIMESTAMP ("PRENDIMAS" id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
Mūsų scenarijaus failus pavadinsiu taip (visi jie bus viename kataloge):
- duomenų bazė.php;
- funkcijos.php;
- prisijungimas.php;
- registracija.php;
- index.php;
- logout.php;
- checkAuth.php;
- stilius.css.
Kiekvieno iš jų tikslas, esu tikras, jums aiškus. Pradėkime nuo prisijungimo prie DBVS scenarijaus. Jūs jau matėte. Tiesiog išsaugokite šio scenarijaus kodą faile duomenų bazė.php. Pasirinktines funkcijas deklaruosime functions.php faile. Kaip visa tai veiks? Neteisėtas vartotojas bando prieiti prie saugomo dokumento index.php, sistema patikrina, ar vartotojas autorizuotas, jei vartotojas neautorizuotas, jis nukreipiamas į autorizacijos puslapį. Prisijungimo puslapyje vartotojas turėtų matyti įgaliojimo formą. Padarykime tai.
Vartotojo autorizacija Jūsų prisijungimo vardas: Jūsų slaptažodis:
Registruotis.
Dabar mūsų formai reikia suteikti tam tikrą formą. Tuo pačiu metu nustatysime taisykles kitiems elementams. Žvelgdamas į ateitį, pateiksiu visą stiliaus lapo turinį.
/* style.css failas */ .row ( margin-bottom:10px; width:220px; ) .row label ( display:block; font-weight:bold; ) .row input.text ( šrifto dydis:1.2em; padding:2px 5px; ) .to_reg ( font-size:0.9em; ) .instruction ( šrifto dydis:0.8em; color:#aaaaaa; margin-left:2px; cursor:default; ) .error ( spalva:raudona; paraštė kairėje: 3 pikseliai;)
Jei viskas padaryta teisingai, naršyklėje turėtų būti:
Žinoma, kol kas neturime nei vieno registruoto vartotojo, o norint prisijungti, reikia užsiregistruoti. Padarykime registracijos formą.
Vartotojo registracija Įveskite savo prisijungimo vardą: Vartotojo registracija Įveskite savo prisijungimo vardą:
Šis failas dbconnect.php reikės prijungti prie formų tvarkytuvų.
Atkreipkite dėmesį į kintamąjį $adresas_svetainė, čia nurodžiau savo bandomosios svetainės, kurioje dirbsiu, pavadinimą. Atitinkamai nurodykite savo svetainės pavadinimą.
Svetainės struktūraDabar pažvelkime į mūsų svetainės HTML struktūrą.
Svetainės antraštę ir poraštę perkelsime į atskirus failus, header.php Ir footer.php. Mes juos įtrauksime į visus puslapius. Būtent pagrindiniame puslapyje (failas index.php), į puslapį su registracijos forma (failas form_register.php) ir į puslapį su įgaliojimo forma (failas form_auth.php).
Blokuokite naudodami mūsų nuorodas, Registracija Ir įgaliojimas, pridėkite juos prie svetainės antraštės, kad jie būtų rodomi visuose puslapiuose. Viena nuoroda pateks į puslapį su registracijos forma (failas form_register.php), o kitą – į puslapį su leidimo forma (failas form_auth.php).
Header.php failo turinys:
Mūsų svetainės pavadinimas
Dėl to mūsų pagrindinis puslapis atrodo taip:
Žinoma, jūsų svetainė gali turėti visiškai kitokią struktūrą, tačiau tai mums dabar nėra svarbu. Svarbiausia, kad yra nuorodos (mygtukai) registracijai ir autorizacijai.
Dabar pereikime prie registracijos formos. Kaip jau supratote, turime jį byloje form_register.php.
Eikite į duomenų bazę (phpMyAdmin), atidarykite lentelės struktūrą vartotojų ir pažiūrėkime, kokių laukų mums reikia. Tai reiškia, kad mums reikalingi vardo ir pavardės įvedimo laukai, pašto adreso įvedimo laukas (Email) ir slaptažodžio įvedimo laukas. Saugumo sumetimais pridėsime lauką captcha įvedimui.
Serveryje, apdorojant registracijos formą, gali atsirasti įvairių klaidų, dėl kurių vartotojas negalės užsiregistruoti. Todėl, kad vartotojas suprastų, kodėl registracija nepavyksta, būtina rodyti pranešimus apie šias klaidas.
Prieš rodydami formą, pridėkite bloką, kad būtų rodomi seanso klaidų pranešimai.
Ir dar vienas dalykas, jei vartotojas jau yra įgaliotas ir iš smalsumo patenka tiesiai į registracijos puslapį, parašydamas naršyklės adreso juostoje svetainės_adresas/form_register.php, tada tokiu atveju vietoj registracijos formos rodysime antraštę, kad jis jau užsiregistravęs.
Apskritai failo kodas form_register.php mes gavome tai:
Jūs jau užsiregistravote
Naršyklėje puslapis su registracijos forma atrodo taip:
Naudodami privalomą atributą, visus laukus padarėme privalomus.
Atkreipkite dėmesį į registracijos formos kodą, kuriame rodoma captcha:
Failo kelią nurodėme vaizdo atributo src reikšmėje captcha.php, kuri generuoja šią captcha.
Pažiūrėkime į failo kodą captcha.php:
Kodas gerai pakomentuotas, todėl sutelksiu dėmesį tik į vieną dalyką.
Funkcijos viduje imageTtfText(), nurodytas šrifto kelias verdana.ttf. Taigi, kad „captcha“ veiktų tinkamai, turime sukurti aplanką šriftai ir įdėkite ten šrifto failą verdana.ttf. Jį galite rasti ir atsisiųsti iš interneto arba paimti iš archyvo su šio straipsnio medžiaga.
Baigėme kurti HTML struktūrą, laikas judėti toliau.
El. pašto galiojimo tikrinimas naudojant jQueryBet kuri forma turi patikrinti įvestų duomenų teisingumą tiek kliento pusėje (naudojant JavaScript, jQuery), tiek serverio pusėje.
Ypatingą dėmesį turime skirti El. pašto laukeliui. Labai svarbu, kad įvestas pašto adresas galiotų.
Šiam įvesties laukui nustatome el. pašto tipą (type="email"), tai šiek tiek įspėja apie netinkamus formatus. Tačiau to nepakanka, nes naudodami naršyklės pateiktą kodo inspektorių galime lengvai pakeisti atributo reikšmę tipo Su paštuįjungta tekstą, ir viskas, mūsų čekis nebegalios.
Ir šiuo atveju turime atlikti patikimesnį patikrinimą. Norėdami tai padaryti, naudosime „jQuery“ biblioteką iš „JavaScript“.
Norėdami prijungti jQuery biblioteką, faile header.php tarp žymų , prieš baigiamąją žymą , pridėkite šią eilutę:
Iš karto po šios eilutės pridėsime el. pašto patvirtinimo kodą. Čia pridėsime kodą, kad patikrintume įvesto slaptažodžio ilgį. Jo ilgis turi būti bent 6 simboliai.
Naudodami šį scenarijų patikriname įvesto el. pašto adreso galiojimą. Jei vartotojas įvedė neteisingą el. pašto adresą, parodome apie tai klaidos pranešimą ir išjungiame formos pateikimo mygtuką. Jei viskas gerai, pašaliname klaidą ir aktyvuojame formos pateikimo mygtuką.
Taigi, mes baigėme formos patvirtinimą kliento pusėje. Dabar galime nusiųsti į serverį, kur taip pat atliksime porą patikrinimų ir įtrauksime duomenis į duomenų bazę.
Vartotojo registracijaFormą siunčiame į failą apdoroti registras.php, naudojant POST metodą. Šios tvarkyklės failo pavadinimas nurodytas atributo reikšmėje veiksmas. O siuntimo būdas nurodytas atributo reikšmėje metodas.
Atidarykite šį failą registras.php ir pirmas dalykas, kurį turime padaryti, yra parašyti seanso paleidimo funkciją ir prijungti failą, kurį sukūrėme anksčiau dbconnect.php(Šiame faile mes užmezgėme ryšį su duomenų baze). Be to, iš karto paskelbkime ląsteles error_messages Ir sėkmės_pranešimai visuotiniame seansų masyve. IN klaidų_pranešimaiįrašysime visus klaidų pranešimus, kurie atsiranda formų apdorojimo metu ir į sėkmės_pranešimai, įrašysime džiugias žinutes.
Prieš tęsdami turime patikrinti, ar forma apskritai buvo pateikta. Užpuolikas gali pažvelgti į atributo reikšmę veiksmas iš formos ir sužinokite, kuris failas apdoroja šią formą. Ir jam gali kilti mintis eiti tiesiai į šį failą naršyklės adreso juostoje įvesdamas šį adresą: http://site_address/register.php
Taigi turime patikrinti, ar visuotiniame POST masyve nėra langelio, kurio pavadinimas sutampa su formoje esančio mygtuko „Registruotis“ pavadinimu. Taip patikriname, ar buvo paspaustas mygtukas „Registruotis“, ar ne.
Jei užpuolikas bandys tiesiogiai patekti į šį failą, jis gaus klaidos pranešimą. Leiskite jums priminti, kad $address_site kintamajame yra svetainės pavadinimas ir jis buvo deklaruotas faile dbconnect.php.
Seanso „captcha“ vertė buvo pridėta, kai ji buvo sugeneruota, į failą captcha.php. Norėdamas priminti, dar kartą parodysiu jums šią kodo dalį iš failo captcha.php, kur captcha reikšmė pridedama prie seanso:
Dabar pereikime prie paties patikrinimo. Byloje registras.php, jei bloko viduje, kur patikriname, ar buvo paspaustas mygtukas „Registruotis“, tiksliau, kur nurodytas komentaras „“ // (1) Vieta kitai kodo daliai"mes rašome:
//Patikrinti gautą captcha //Apkarpyti tarpus nuo eilutės pradžios ir pabaigos $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Palyginkite gautą reikšmę su seanso reikšme. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Jei captcha neteisinga, grąžiname vartotoją į registracijos puslapį ir ten jam parodysime klaidos pranešimą, kad įvedė neteisingą captcha $error_message = "
Klaida! Įvedėte neteisingą captcha
"; // Išsaugokite klaidos pranešimą sesijoje. $_SESSION["error_messages"] = $error_message; // Grąžinti vartotoją į registracijos puslapio antraštę("HTTP/1.1 301 Permanently"); header("Vieta: " .$adreso_svetainė ."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); ) // (2) Vieta kitai kodo daliai )else( //Jei „captcha“ nepraduota arba ji tuščia, išeikite ("Klaida! Patvirtinimo kodo nėra, tai yra captcha kodas. Galite eiti į pagrindinį puslapį.
"); }Tada turime apdoroti gautus duomenis iš POST masyvo. Visų pirma, turime patikrinti pasaulinio POST masyvo turinį, tai yra, ar ten yra langelių, kurių pavadinimai atitinka įvesties laukų pavadinimus iš mūsų formos.
Jei langelis egzistuoja, iš šio langelio apkarpome tarpus nuo eilutės pradžios ir pabaigos, kitu atveju nukreipiame vartotoją atgal į puslapį su registracijos forma.
Toliau, apkarpę tarpus, į kintamąjį įtraukiame eilutę ir patikriname, ar šis kintamasis nėra tuščias; jei jis nėra tuščias, judame toliau, kitu atveju vartotoją nukreipiame atgal į puslapį su registracijos forma.
Įklijuokite šį kodą į nurodytą vietą" // (2) Vieta kitai kodo daliai".
/* Patikrinkite, ar pasauliniame masyve $_POST nėra duomenų, atsiųstų iš formos, ir sudėkite pateiktus duomenis į įprastus kintamuosius.*/ if(isset($_POST["first_name"]))( //Apkarpykite tarpus nuo pradžios ir eilutės pabaiga $first_name = trim($_POST["first_name"]); //Patikrinkite, ar kintamasis nėra tuščias if(!empty($first_name))( // Saugumo sumetimais specialiuosius simbolius konvertuokite į HTML objektus $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Išsaugokite klaidos pranešimą sesijoje. $_SESSION["error_messages"] .= "
Įveskite savo vardą
Trūksta pavadinimo lauko
"; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); ) if( isset($_POST["pavardė"]))( //Apkarpyti tarpus nuo eilutės pradžios ir pabaigos $pavardė = trim($_POST["pavardė"]); if(!empty($last_name)) ( // Saugumo sumetimais konvertuokite specialiuosius simbolius į HTML objektus $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Išsaugokite klaidos pranešimą sesijoje. $_SESSION["error_messages"] .= "Įveskite savo pavardę
"; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); ) )else ( // Išsaugokite klaidos pranešimą sesijoje. $_SESSION["error_messages"] .= "Trūksta pavardės lauko
"; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); ) if( isset($_POST["el. paštas"]))( //Apkarpyti tarpus nuo eilutės pradžios ir pabaigos $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Kodo vieta el. pašto adreso formatui ir jo unikalumui patikrinti )else( // Išsaugokite klaidos pranešimą sesijoje. $_SESSION["error_messages"] .= "Įrašykite savo el. paštą
"; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); ) )else ( // Išsaugokite klaidos pranešimą sesijoje. $_SESSION["error_messages"] .= " "; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); ) if( isset($_POST["slaptažodis"]))( //Apkarpyti tarpus nuo eilutės pradžios ir pabaigos $slaptažodis = trim($_POST["slaptažodis"]); if(!empty($slaptažodis)) ( $password = htmlspecialchars ($slaptažodis, ENT_QUOTES); //Šifruoti slaptažodį $password = md5($password."top_secret"); )else( // Išsaugokite klaidos pranešimą seansui. $_SESSION["error_messages"] .= "Įveskite savo slaptažodį
"; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); ) )else ( // Išsaugokite klaidos pranešimą sesijoje. $_SESSION["error_messages"] .= " "; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); ) // (4) Vieta vartotojo įtraukimo į duomenų bazę koduiYpatingą reikšmę turi laukas paštu. Privalome patikrinti gauto pašto adreso formatą ir jo unikalumą duomenų bazėje. Tai yra, ar yra vartotojas su tuo pačiu el. pašto adresu jau užsiregistravęs?
nurodytoje vietoje" // (3) Kodo vieta pašto adreso formatui ir jo unikalumui patikrinti“ pridėkite šį kodą:
//Patikrinkite gauto el. pašto adreso formatą naudodami reguliarųjį reiškinį $reg_email = "/^**@(+(*+)*\.)++/i"; //Jei gauto el. pašto adreso formatas neatitinka reguliaraus reiškinio if(!preg_match($reg_email, $email))( // Išsaugokite klaidos pranešimą seansui. $_SESSION["error_messages"] .= "
Įvedėte neteisingą el. pašto adresą
"; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); ) // Tikriname, ar toks adresas jau yra duomenų bazėje. $result_query = $mysqli->query("SELECT `el.paštas` FROM `users` WHERE `email`="".$email."""); / /Jei gautų skaičius yra lygiai viena eilutė, vadinasi, vartotojas su šiuo el. pašto adresu jau užregistruotas if($result_query->num_rows == 1)( //Jei gautas rezultatas nėra klaidingas if(($row = $result_query->fetch_assoc()) != false) ( // Išsaugokite klaidos pranešimą sesijoje. $_SESSION["error_messages"] .= "Vartotojas su šiuo el. pašto adresu jau užsiregistravęs
"; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); )else( // Išsaugokite klaidos pranešimą į sesiją . $_SESSION["error_messages"] .= "Klaida duomenų bazės užklausoje
"; //Grąžinti vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header("Vieta: ".$adreso_svetainė."/form_register.php"); ) /* pasirinkimo uždarymas */ $ result_query-> close(); //Sustabdykite scenarijaus išėjimą(); ) /* pasirinkimo uždarymas */ $result_query->close();Taigi, mes baigėme visus patikrinimus, laikas įtraukti vartotoją į duomenų bazę. nurodytoje vietoje" // (4) Vieta vartotojo įtraukimo į duomenų bazę kodui“ pridėkite šį kodą:
//Užklausa pridėti vartotoją prie duomenų bazės $result_query_insert = $mysqli->query("INSERT INTO `users` (vardas, pavardė, el. pašto adresas, slaptažodis) VALUES ("".$first_name."", "".$last_name ." ", "".$email.", "".$password."")"); if(!$result_query_insert)( // Išsaugokite klaidos pranešimą sesijoje. $_SESSION["error_messages"] .= "
Klaida užklausoje įtraukti vartotoją į duomenų bazę
"; //Grąžinkite vartotoją į registracijos puslapio antraštę ("HTTP/1.1 301 perkeltas visam laikui"); header ("Vieta: ".$adreso_svetainė."/form_register.php"); //Sustabdykite scenarijaus išėjimą (); )else( $_SESSION["sėkmės_pranešimai"] = "Registracija sėkmingai baigta!!!
Dabar galite prisijungti naudodami savo vartotojo vardą ir slaptažodį.
Jei užklausoje įtraukti vartotoją į duomenų bazę įvyko klaida, mes pridedame pranešimą apie šią klaidą į sesiją ir grąžiname vartotoją į registracijos puslapį.
Kitu atveju, jei viskas klostėsi gerai, prie seanso taip pat pridedame žinutę, bet šį kartą taip maloniau, būtent pranešame vartotojui, kad registracija pavyko. Ir mes nukreipiame jį į puslapį su įgaliojimo forma.
El. pašto adreso formato ir slaptažodžio ilgio tikrinimo scenarijus yra faile header.php, todėl jis taip pat bus taikomas šios formos laukams.
Sesija taip pat pradedama faile header.php, todėl faile form_auth.php Nereikia pradėti seanso, nes gausime klaidą.
Kaip jau sakiau, čia veikia ir el. pašto adreso formato ir slaptažodžio ilgio tikrinimo scenarijus. Todėl jei vartotojas įves neteisingą el. pašto adresą ar trumpą slaptažodį, jis iš karto gaus klaidos pranešimą. Mygtukas įeiti taps neaktyvus.
Ištaisius klaidas, mygtukas įeiti tampa aktyvi, o vartotojas galės pateikti formą į serverį, kur ji bus apdorojama.
Vartotojo įgaliojimasNorėdami priskirti vertę veiksmas autorizavimo trūkumas turi nurodytą failą auth.php, tai reiškia, kad forma bus apdorota šiame faile.
Taigi, atidarykite failą auth.php ir parašykite kodą, kad apdorotumėte įgaliojimo formą. Pirmas dalykas, kurį reikia padaryti, yra pradėti sesiją ir prijungti failą dbconnect.php prisijungti prie duomenų bazės.
Kai spustelėsite išėjimo iš svetainės nuorodą, mes patenkame į failą atsijungti.php, kur mes tiesiog sunaikiname langelius su el. pašto adresu ir slaptažodžiu iš seanso. Po to vartotoją grąžiname atgal į puslapį, kuriame buvo spustelėta nuoroda išeiti.
Failo kodas logout.php:
Tai viskas. Dabar žinote, kaip įdiegti ir apdoroti vartotojų registracijos ir įgaliojimų formas savo svetainėje. Šios formos yra beveik kiekvienoje svetainėje, todėl kiekvienas programuotojas turėtų žinoti, kaip jas sukurti.
Taip pat išmokome patvirtinti įvesties duomenis tiek kliento pusėje (naršyklėje, naudojant JavaScript, jQuery), tiek serverio pusėje (naudojant PHP). Taip pat sužinojome, kaip įgyvendinti išėjimo iš aikštelės procedūrą.
Visi scenarijai buvo išbandyti ir veikia. Archyvą su šios nedidelės svetainės failais galite atsisiųsti iš šios nuorodos.
Ateityje parašysiu straipsnį, kuriame aprašysiu. Ir dar planuoju parašyti straipsnį, kuriame paaiškinsiu (neperkraunant puslapio). Taigi, norėdami būti informuoti apie naujų straipsnių išleidimą, galite užsiprenumeruoti mano svetainę.
Jei turite klausimų, susisiekite su manimi, o jei straipsnyje pastebėsite klaidą, praneškite man.
Pamokos planas (5 dalis):
Šiame straipsnyje apžvelgsime nuoseklią registraciją naudojant jQuery.
Jei registruojantis svetainėje reikia užpildyti kelias dešimtis laukų, labai neracionalu juos talpinti viename puslapyje. Juk vartotojas yra labai tingus padaras ir nenorės pildyti visų šių laukelių.
Alternatyva yra padalinti registraciją į kelis veiksmus. Tai iš karto sugeneruoja daug teigiamų atsiliepimų – juk pradedant atlikti veiksmus vartotojui dažniausiai kyla noras juos užbaigti.
Taip pat logiška registraciją skaidyti į loginius blokus – kontaktinė informacija, adresas, asmens duomenys ir pan.
Žingsnis po žingsnio registracijai nereikia kurti kelių formų ir atskirai siųsti duomenų į serverį. Daug patogiau viską sudėti į vieną formą, bet kiekviename žingsnyje vartotojui rodyti tik tam tikrą formos dalį. Būtent tokia logika yra mūsų pavyzdyje.
Be logikos, verta manyti, kad iš pradžių matosi tik nuoroda "Persiųsti"/"Kitas žingsnis", o paskutiniame žingsnyje nesimato, bet matosi "atgal" Ir "Registracija".
Pažiūrėkime į patį pavyzdį:
Puslapis
1 žingsnis
Prisijungti:
El. paštas:
Slaptažodis:
2 žingsnis
Vardas:
Pavardė:
Amžius:
3 veiksmas
Šalis:
Miestas:
Gatvė:
Atgal Kitas žingsnis
body ( paraštė: 0; ) /* Bendrasis stilius viršija */ form ( plotis: 30 %; paraštė: 0 automatinis; ) form div.step ( display:none; ) form div.step p.step( text-align: centras ; šrifto dydis: 28 pikseliai; ) forma div.step p( ) forma div.step p input( float:right; ) a.back ( display:none; ) form input ( display:none; ) a ( spalva:# 006600 ; text-decoration:none; ) forma p.talign( text-align:center; )
Scenarijų, atsakingą už žingsnių perjungimą, įdėsime į js/steps_registration.js, nepamirškite įtraukti ir jQuery bibliotekos:
$(document).ready(function() ( // Palaukite, kol puslapis bus įkeltas var steps = $("form").childs(.step"); // suraskite visus formos $(steps) veiksmus .show(); / / rodyti pirmąjį veiksmą var current_step = 0; // nustatyti dabartinį veiksmą $("a.next").click(function())( // Spustelėkite įvykį nuorodoje "Kitas veiksmas", jei (current_step == steps.length-2) ( // patikrinkite, ar kitas veiksmas bus paskutinis $(this).hide(); // paslėpti nuorodą "Kitas veiksmas" $("formos įvestis").show( ); // parodyti mygtuką „Registracija“ ) $(" a.back").show(); // rodyti nuorodą "Atgal" current_step++; // padidinti dabartinės skaidrės skaitiklį ChangeStep(current_step); // pakeisti žingsnį )); $("a.back").click(function( )( // Spustelėkite įvykį ant mažo paveikslėlio if (current_step == 1) ( // patikrinkite, ar ankstesnis veiksmas yra pirmasis $(tai ).hide(); // slėpti nuorodą "Atgal" ) $("formos įvestis") .hide(); // paslėpti mygtuką "Registracija" $("a.next").show(); // rodyti nuorodą "Kitas žingsnis" current_step--; // sumažinti dabartinės skaidrės skaitiklį changeStep(current_step);// pakeisti žingsnį)); function changeStep(i) ( // žingsnių keitimo funkcija $(žingsniai).hide(); // slėpti visus veiksmus $(žingsniai[i]).show(); // rodyti dabartinį ) ));
Čia nerašysime PHP siuntimo kodo, nes jis nėra visiškai susijęs su šia pamoka. Tik verta atkreipti dėmesį į tai, kad laiškas siunčiamas pirmajame formos žingsnyje nurodytu adresu. Bet kokiu atveju galite atsisiųsti demonstracinius failus ir įsitikinti patys.
