Tingimusteta sisselogimisvorm html. Sisselogimis- ja registreerimisvorm HTML5 ja CSS3 abil

HTML-i sildid, määratledes saidil HTML-vormid

Loome veebisaite ja üksikuid lehti Internetis külastajatega suhtlemiseks.

HTML vormid kasutatakse saidi külastajate registreerimiseks, interaktiivsete küsitluste ja hääletamise jaoks, võimaldavad teil saata sõnumeid, sooritada oste jne. HTML Vorm luuakse ühel eesmärgil: teabe kogumiseks ja seejärel töötlemiseks programmi skripti või e-posti teel edastamiseks.

HTML-vormi näidis | Sisestage sait

Sildid, atribuudid ja väärtused

- määrake vorm.
name="" – määrab vormi nime.
method="" - määrab, kuidas andmed vormilt saadetakse. Väärtused: "get" (vaikimisi) ja "post" . Enamasti kasutatakse "postituse" meetodit, mis võimaldab edastada suuri andmemahtusid.
action="" - määrab URL-i, mille kaudu andmed töötlemiseks saadetakse. Meie puhul - enter_data.php ..
- määratleda sellised vormielemendid nagu nupud, lülitid, tekstiväljad andmete sisestamiseks.
type="text" – määratleb tekstivälja andmete sisestamiseks.
type="password" – määrab välja parooli sisestamiseks, samal ajal kui tekst kuvatakse tärnide või ringidena.
type="checkbox" – määrab raadionupu.
type="hidden" – määratleb peidetud element vormid – kasutatakse edastamiseks Lisainformatsioon serverisse.
suurus = "25" - pikkus tekstiväli tähemärkides.
maxlength="30" – maksimaalne lubatud sisestusmärkide arv.
value="" – määrab töötlemiseks saadetava väärtuse, kui see viitab raadionuppudele või raadionuppudele. Selle atribuudi väärtus tekstivälja või nupu osana kuvatakse ülaltoodud näites näiteks kui John või Login.

HTML-vormi näidis | Kommentaarid saidil

<a href="https://obanracer.ru/et/gde-sozdat-lichnuyu-internet-stranicu-primer-sozdaniya-html-stranicy-v.html">HTML näide</a> vormid

Sildid, atribuudid ja väärtused

action="http://site/comments.php" – määrab URL-i, kuhu vormi andmed saadetakse.
id="" - määrab vormielemendi nime, identifikaatori.
name="" – määrab vormielemendi nime.
- määratleda vormis tekstiväli.
cols="" – määrab vormi tekstivälja veergude arvu.
rows="" – määrab vormi tekstivälja ridade arvu.

Kui vahel sisestage tekst, kuvatakse see kasti sees näitena, mida on lihtne eemaldada.

HTML-vormi näidis | Rippmenüü

HTML vormid

Sildid, atribuudid ja väärtused

- määrake loend üksustega, mille hulgast valida.
size="" – määrab nähtavate loendi positsioonide arvu. Kui väärtus on 1, on tegemist rippmenüüga.
- määratleda nimekirja positsioonid (punktid).
value="" – sisaldab väärtust, mille vorm saadab töötlemiseks määratud URL-ile.
Selected="selected" – valib näitena loendi elemendi.

HTML-vormi näidis | Kerimisribaga loend

Suurendades atribuudi size="" väärtust, saame kerimisribaga loendi:

HTML vormid

Selle valiku puhul kasutame lippu multiple="multiple", mis võimaldab valida mitu üksust. Selle puudumine võimaldab valida ainult ühe üksuse.

type="submit" – määrab nupu.

type="reset" – määratleb lähtestusnupu.

value="" – määrab nupu sildi.

Vaata lisaks:

Sisselogimisvormi kujundus on iga veebisaidi jaoks väga oluline. Kogusime mõne tundliku sisselogimislehe malli tasuta allalaadimine. The sisselogimisvorm on osa veebisaidist. Kui läheme veebisaidile ja tahame täielikku juurdepääsu, peame registreeruma ja sisse logima. Mis tahes veebisaidi sisselogimisvormi leiate veebisaidi mis tahes küljelt. See on parem või vasak pool. Ükski veebisait ilma sisselogimis- ja registreerumisvormita pole täidetud. Seega on see iga veebisaidi jaoks oluline. HTML CSS-i kaudu sisselogimisvormi loomine ilma professionaalse arendajata on väga keeruline.

HTML on struktuur ja CSS on disain. HTML5 ja CSS3 on kujundamise uuendatud versioon. Mõned selle värskenduse kodeerimise kaudu loodud sisselogimisvormid saab otse alla laadida. Arendaja jagas seda vormi tasuta. Neid saab kasutada mis tahes isiklike vajaduste või äritegevuse jaoks.

Kasutage seda tundliku sisselogimislehe malli tasuta ja saate ise luua. Saate kohandada ja muuta mis tahes värve või stiili. Samuti saate ühendada oma andmebaasi, jquery. Seega on see sisselogimismall tõesti kasulik ja oluline.

Oleme jaganud seda postitust mõned tasuta sisselogimisvormi mallid html5 css3. Seda kollektsiooni suurendatakse. Püüame koguda rohkem sisselogimislehe malli buutstrapi.

materjali disaini vorm

See sisselogimisvorm näeb väga vinge ja lihtne välja. Saate redigeerida ja muuta liidese värvi. Lihtne disain, kuid väga professionaalne.

DEMO Laadi alla

Kui teil on vaja kujundada mis tahes taotluse sisselogimisvorm, võite kasutada seda materjalidisaini sisselogimisvormi. See sobib ideaalselt teie rakenduse jaoks.

DEMO Laadi alla

Animeeritud SVG Avatar

Animeeritud sisselogimismallil on suur nõudlus. Kui soovite seda oma erialal kasutada. See animeeritud SVG Avatari sisselogimisvorm sobib teile paremini.

DEMO Laadi alla

Sisselogimisvormi raputusefekt

See on lihtne sisselogimisvorm ja sellel on teatud mõju ja see kasutab teie professionaalset äri.

DEMO Laadi alla

CSS3 Animation Cloud ja sisselogimisvorm

Kui teil on pilveäri või plaanite mis tahes tüüpi pilveäri, saate kasutada seda CSS3 Animation Cloudi ja sisselogimisvormi.

DEMO Laadi alla

puhas sisselogimisvorm

See on väga puhas kujundus ja nimi on sama puhas sisselogimisvorm. Kasutage seda vormi oma puhta veebisaidi jaoks.

DEMO Laadi alla

Sisselogimisvorm HTML5-s

See sisselogimisvorm on loodud HTML5-vormingus ja seda saab kasutada teie parima veebisaidi jaoks.

DEMO Laadi alla

Sisselogimisvormi ainult CSS-i valideerimine

DEMO Laadi alla

CSS-i sisselogimisvorm

DEMO Laadi alla

Batmani sisselogimisvorm

DEMO Laadi alla

Materializecssi sisselogimisvorm

DEMO Laadi alla

Nurgamaterjalide sisselogimisvorm

DEMO Laadi alla

Vastupidav sisselogimisvorm

DEMO Laadi alla

Vastupidav sisselogimisvorm

DEMO Laadi alla

Lihtne lame vorm pöörleva laaduriga

DEMO Laadi alla

Logige Everdwelli sisse

Vormid on loodud andmete saatmiseks kasutajalt veebiserverisse. HTML-i vormid võivad koosneda tekstiväljadest ja tekstialadest, märkeruutudest ja raadionuppudest ning ripploenditest. Kõik need on vormielemendid. Iga element annab saidile teatud väärtuse.
HTML-i vorm on sisuliselt veebileht, kus näete oma teabe sisestamise piirkondi. Pärast vormi täitmist ja saatmisnupul klõpsamist pakitakse vormi teave ja saadetakse serveri skripti (käsitleja fail) töötlemiseks veebiserverisse. Pärast töötlemist tagastatakse teile vastusena veel üks veebileht. Järgmine joonis näitab selgelt, kuidas vorm töötab:

HTML-vormide loomisel pole midagi keerulist. Lihtsaim viis vormidest aimu saamiseks on sõeluda veidi HTML-koodi ja seejärel vaadata, kuidas see töötab. Järgmine näide näitab lihtsa HTML-vormi loomise süntaksit:

Näide: Lihtne HTML-vorm

Proovi ise"

Minu esimene vorm:
Nimi:
Perekonnanimi:

lihtne vorm

Element

Vormid sisestatakse veebilehtedele elemendi kaudu . See on kogu vormi sisu, sealhulgas selliste elementide nagu tekstiväljad ja nupud ning muude siltide konteiner. HTML keel. Siiski ei saa see sisaldada muud elementi. .
Vormi serverisse esitamiseks kasutatakse nuppu "Esita", sama tulemuse saab siis, kui vormi sees vajutada klahvi "Enter". Kui vormil nuppu Esita pole, saab edastamiseks kasutada sisestusklahvi.
Enamik elementide atribuute mõjutada vormi töötlemist, mitte selle kujundust. Kõige levinumad neist on tegevust ja meetod. Atribuut tegevust sisaldab URL-i, millele vormil olev teave serverisse töötlemiseks saadetakse. Atribuut meetod on HTTP-meetod, mida brauserid peaksid vormiandmete esitamiseks kasutama.

Element

Peaaegu kõik vormiväljad luuakse elemendi abil (inglise keelest sisend - sisend). Välimus element muutuda sõltuvalt selle atribuudi väärtusest tüüp:

Siin on mõned atribuutide väärtused tüüp:

Teksti ja parooli sisestamine

Üks lihtsamaid vormielementide tüüpe on tekstiväli, mis on loodud teksti sisestamiseks ühelt realt. Seda tüüpi tekstisisestus on vaikimisi määratud ja seetõttu kuvatakse see üherealine väli, kui unustate atribuudi määrata tüüp. Vormile üherealise tekstisisestusvälja lisamiseks peaksite olema elemendi sees registri atribuut tüüp tekstiväärtusega:

Parooli sisestusväli on tavalise tekstivälja variatsioon. See toetab samu atribuute kui üherealine tekstiväli. Atribuut nimi määrab parooli sisestusvälja nime, mis saadetakse serverisse koos kasutaja sisestatud parooliga. Parooli sisestamise välja loomiseks peate määrama parooli atribuudi väärtuse tüüp(parool (inglise keeles) - parool):

Näide parooliväljaga vormi loomisest:

Näide: Parooliväli

Proovi ise"

Sinu sisselogimine:

Parool:

Sinu sisselogimine:

Parool:

Koos selle atribuudiga saate kasutada atribuuti max pikkus, mille väärtus määrab maksimaalse märkide arvu, mida saab sisestada antud rida. Atribuudi abil saate määrata ka sisestusvälja pikkuse suurus. Vaikimisi piirab enamik brausereid tekstiväljade pikkust kuni 20 tähemärgini. Uute vormielementide laiuse reguleerimiseks atribuudi asemel suurus, soovitame kasutada CSS-i (Cascading Style Sheets).
Atribuut väärtus määrab väärtuse, mis kuvatakse vormi laadimisel vaikimisi tekstikastis. Sisestades väljale vaikeväärtuse, saate kasutajale täpselt selgitada, milliseid andmeid ja millises vormingus soovite, et kasutaja siia sisestaks. See on nagu näidis, sest kasutajal on palju mugavam ankeeti täita, nähes enda ees näidet.

Lülitid (raadio)

Element tüüp raadio loob raadionuppe, mis kasutavad loogilist "VÕI" põhimõtet, võimaldades valida mitmest väärtusest ainult ühe: kui valite ühe positsiooni, muutuvad kõik teised passiivseks. Raadionupu elemendi põhisüntaks on:

Atribuut nimi raadionuppude jaoks on kohustuslik ja mängib olulist rolli mitme raadionupu elemendi rühmitamisel rühma. Raadionuppude rühma ühendamiseks peate määrama sama väärtus atribuut nimi ja erinev atribuudi väärtus väärtus. Atribuut väärtus määrab valitud raadionupu väärtuse, mis saadetakse serverisse. Iga raadionupu elemendi väärtus peab olema grupis kordumatu, et server teaks, millise vastusevariandi kasutaja on valinud.
Atribuudi olemasolu kontrollitud(inglise keelest - set) näitab lüliti element, milline pakutud valikutest tuleks vajadusel lehe laadimisel vaikimisi valida. Seda atribuuti saab määrata ainult ühele lülitielemendile rühmast:

Proovi ise"

Kui vana sa oled?

alla 18
18-24
25 kuni 35
üle 35

Kui vana sa oled?

alla 18
18-24
25 kuni 35
üle 35

Märkeruudud

Element tüüp märkeruut loob märkeruudud, mis sarnanevad raadionuppudega, kuna võimaldavad kasutajal valida teie pakutavate valikute hulgast. Peamine erinevus raadionuppudest seisneb selles, et külastaja saab valida korraga mitu valikut ning lippe endid tähistavad ruudud, mitte ringid. Nagu raadionuppude puhul, luuakse märkeruutude rühm, määrates igale elemendile sama atribuudi väärtuse. nimi, kuid igal märkeruudul on oma tähendus. Põhiline märkeruudu süntaks:

Atribuut kontrollitud, nagu raadionuppude puhul, määrab, et antud märkeruut tuleb lehe laadimisel vaikimisi märkida. Seda atribuuti saab määrata samaaegselt mitme lipu jaoks rühmas.
Järgmises näites kasutatakse märkeruutude määramiseks mitu vaikevastuse valikut.

Näide: raadionuppude kasutamine

Proovi ise"

Jazz
Blues
Rock
Chanson
Riik

Millised muusikažanrid teile meeldivad?

Jazz
Blues
Rock
Chanson
Riik

Nupud kinnitamiseks (esita) ja tühjendamiseks (lähtestamiseks)

Element tüüp Esita loob nupu, millele vajutades saadab brauser serveri skripti, et töödelda kasutaja poolt vormi sisestatud andmeid. Kui loome nupu, mis vormi tühjendab, siis määrame atribuudile tüüp"reset" väärtus. element tüüp Esita saab määrata valikulise atribuudi nimi. Atribuut väärtus kasutatakse selles elemendis, et määrata teksti, mis tähistab nupul olevat silti. Vaikimisi on brauserites nupp kirjutatud "Saada" (Esita), kui see silt teile ei sobi, sisestage see ise. Kuna kinnitusnuppude stiilid võivad erinevates brauserites erineda, on parem nupu stiil ise kohandada, kasutades CSS-i tööriistu või kasutada graafilisi nuppe.
Looge kinnitus ja kustutage nupud:

Näide: esitamise ja lähtestamise kasutamine

Proovi ise"

Nupul Lähtesta klõpsamine lähtestab kõik kasutaja sisestatud andmed.

tegevuse atribuut.

Peamine elemendi jaoks

Töötlemisfail asub serveris mytestserver.com kaustas nimekaust ja andmeid töötleva serveri skripti nimi - obrabotchik.php. Temale edastatakse kõik teie poolt veebilehel olevale vormile sisestatud andmed. Laiend .php näitab, et määratud vormi töötleb PHP skript. Käsitleja ise võib olla kirjutatud mõnes muus keeles, näiteks võib see olla Pythoni, Ruby vms skriptikeel.
Soovitav on alati määrata atribuudi väärtus tegevust. Kui vorm peab esitama väärtused samale lehele, kus see asub, määrake tegevuse atribuudi väärtuseks tühi string: action="".

meetodi atribuut

Atribuut meetod määrab, kuidas teave serverisse saadetakse. Vormi esitamise meetodi valik sõltub andmetest, mis tuleb sellega koos saata. Siin mängib olulist rolli nende andmete maht. Kaks kõige populaarsemat meetodit vormi algandmete brauserist serverisse edastamiseks on järgmised. SAADA ja POSTITA. Meetod on seatud ükskõik millisele teie valikule ja kui te seda ei määranud, kasutatakse seda vaikimisi SAADA. Vaatleme nende kõigi rakendust.

POST-meetod

meetod POSTITA pakendab vormi andmed ja saadab need serverisse ilma, et kasutaja seda märkaks, kuna andmed sisalduvad kirja sisus. Meetodi kasutamisel veebibrauser POSTITA saadab serverile päringu, mis koosneb spetsiaalsetest päistest, millele järgnevad vormi andmed. Kuna selle päringu sisu on saadaval ainult serverile, on POSTITA kasutatakse konfidentsiaalsete andmete (nt paroolid, pangakaardi andmed ja muu kasutajate isiklik teave) edastamiseks. meetod POSTITA sobib ka suure hulga teabe saatmiseks, kuna erinevalt meetodist SAADA, sellel pole edastatavate märkide arvu piirangut.

GET meetod

Nagu te juba teate, on brauseri põhiülesanne serverist veebilehtede vastuvõtmine. Nii et kui kasutate meetodit SAADA, võtab teie brauser lihtsalt veebilehe vastu nagu alati. meetod SAADA murrab ka vormi andmed, kuid lisab need enne päringu serverisse saatmist URL-i lõppu. Et mõista, kuidas meetod töötab SAADA vaatame seda tegevuses. Avage selle õpetuse esimene näide (näide: lihtne HTML-vorm) märkmikus (nt Notepad++) ja tehke HTML-koodis väike muudatus:

need. asendada POSTITA peal SAADA.
Salvestage fail nimega failinimi.html ja värskendage brauseri lehte (F5), seejärel täitke vorm nagu Vasja Pupkin ja klõpsake nuppu Esita. Brauseri aadressiribal näete midagi sellist:

File_name.html?firstname=Vasya&lastname=Pupkin

Nüüd näete siinsamas URL-is iga vormielemendi nime ja väärtust.
URL eraldatakse ülejäänud vormiandmetest küsimärgiga ning muutujate nimed ja väärtused eraldatakse ampersandiga (&) .
Seda meetodit tuleks kasutada juhul, kui te ei edasta suuri teabekoguseid.
See meetod ei tööta, kui teie vormi andmed on tundlikud, nt pangakaardi numbri või parooli salvestamine.
Lisaks meetod SAADA ei sobi, kui soovite saata failid serverisse koos vormiga.

Vormielementide rühmitamine

Tähenduselt seotud vormielemendid saab rühmitada siltide vahel

. Kuvatakse brauser

kastina vormielementide rühma ümber. Raami välimust saab muuta CSS (Cascading Style Sheets) abil.
Iga rühma pealkirja lisamiseks vajate elementi A, mis määrab raami manustatava rühma päise teksti.

Parooli sisestusväli on tavaline tekstiväli, kus sisestatud tekst kuvatakse olenevalt brauserist tärnide või punktidena. See funktsioon on loodud tagama, et keegi ei piilu sisestatud parooli. Kuigi sisestatud teksti ekraanil ei kuvata, edastatakse sisestatud teave serverisse selge tekstina ilma krüptimiseta. Seetõttu ei taga selle välja kasutamine andmete turvalisust ja neid saab pealt kuulata.

Loomise süntaks on järgmine.

Atribuudid on samad, mis tekstivälja atribuudid ja on loetletud tabelis 1. üks.

Paroolivälja kasutatakse saitidel laialdaselt kasutajate autoriseerimiseks ja juurdepääsu piiramiseks saidi osadele, kus peate oma volitusi kinnitama. Näide 1 näitab, kuidas selliseid välju luua.

Näide 1. Parooliväli

Parooli väli

Logi sisse:

Parool:

Selle tulemusena saame järgmise (joonis 1).

Riis. 1. Parooliga välja tüüp

Stiili atribuudid kehtivad parooliväljale, mis määrab värvi, tausta, raami jne parameetrid. Näide 2 näitab taustapiltide lisamist vormiväljadele. Võtame aluseks stiili nagu tekstiväljade puhul.

Näide 2: pildi lisamine tekstikasti

Parooli väli

Selle näite tulemus on näidatud joonisel fig. 2. Pildid lisatakse taustaks, seega tuleb teksti nihutada paremale kasutades padding-left , vastasel juhul kuvatakse see pildi peal.

Sellest artiklist saate teada kuidas luua registreerimis- ja autoriseerimisvormi kasutades HTML-i, JavaScripti, PHP-d ja MySql-i. Selliseid vorme kasutatakse peaaegu igal saidil, olenemata selle tüübist. Need on loodud foorumi, veebipoe ja sotsiaalvõrgustike (nt Facebook, Twiter, Odnoklassniki) ja paljude muude saitide jaoks.

Kui teie kohalikus arvutis on sait, siis loodan, et teil on juba . Ilma selleta ei tööta midagi.

Tabeli loomine andmebaasis

Kasutaja registreerimise rakendamiseks vajame esmalt andmebaasi. Kui teil see juba on, siis suurepärane, muidu peate selle looma. Artiklis selgitan üksikasjalikult, kuidas seda teha.

Ja nii, meil on andmebaas (lühendatult DB), nüüd peame looma tabeli kasutajad kuhu lisame oma registreeritud kasutajad.

Kuidas andmebaasis tabelit luua, selgitasin ka artiklis. Enne tabeli loomist peame määratlema, milliseid välju see sisaldab. Need väljad ühtivad registreerimisvormi väljadega.

Niisiis, me mõtlesime, kujutasime ette, millised väljad meie vormil on, ja koostasime tabeli kasutajad nende väljadega:

id- Identifikaator. Väli id peaks olema andmebaasi igas tabelis.
eesnimi- Nime salvestamiseks.
perekonnanimi- Perekonnanime salvestamiseks.
meili- Postiaadressi salvestamiseks. Kasutame sisselogimiseks e-posti, seega peab see väli olema kordumatu, st sellel peab olema UNIKALNE indeks.
email_status- Väli, mis näitab, kas kiri on kinnitatud või mitte. Kui kiri kinnitatakse, on selle väärtus 1, vastasel juhul on väärtus 0.
parool- Parooli salvestamiseks.

Kui soovite, et registreerimisvormil oleks rohkem välju, saate need ka siia lisada.

See on kõik, meie laud kasutajad valmis. Liigume edasi järgmise sammu juurde.

Andmebaasi ühendus

Oleme andmebaasi loonud, nüüd peame sellega ühenduse looma. Ühendame MySQLi PHP laienduse abil.

Looge meie saidi kaustas fail nimega dbconnect.php ja sellesse kirjutame järgmise skripti:

Andmebaasi ühenduse viga. Vea kirjeldus: ".mysqli_connect_error()."

"; exit(); ) // Määrake ühenduse kodeering $mysqli->set_charset("utf8"); //Lisage mugavuse huvides siia muutuja, mis sisaldab meie saidi nime $address_site = "http://testsite .local" ; ?>

See fail dbconnect.php tuleb ühendada vormikäitlejatega.

Pöörake tähelepanu muutujale $aadress_sait, siin olen märkinud oma testsaidi nime, mille kallal töötan. Vastavalt sellele märgite oma saidi nime.

Saidi struktuur

Vaatame nüüd meie saidi HTML-i struktuuri.

Teisaldage saidi päis ja jalus asukohta üksikud failid, header.php ja jalus.php. Me ühendame need kõigil lehtedel. Nimelt peamisel (fail index.php), lehele, kus on registreerimisvorm (fail form_register.php) ja volitusvormiga lehel (fail form_auth.php).

Blokeerige meie linkidega, registreerimine ja luba, lisage saidi päisesse, nii et neid kuvatakse kõigil lehtedel. Siseneb üks link registreerimisvormi leht(fail form_register.php) ja teine lehele volituse vorm(fail form_auth.php).

Header.php faili sisu:

Meie saidi nimi

Selle tulemusena näeb meie avaleht välja selline:

Muidugi võib teie saidil olla täiesti erinev struktuur, kuid see pole meie jaoks praegu oluline. Peaasi, et registreerimiseks ja autoriseerimiseks on olemas lingid (nupud).

Liigume nüüd edasi registreerimisvormi juurde. Nagu te juba aru saite, on see meil failis form_register.php.

Me läheme andmebaasi (phpMyAdminis), avame tabeli struktuuri kasutajad ja vaata, milliseid põlde me vajame. Seega vajame välju ees- ja perekonnanime sisestamiseks, välja postiaadressi sisestamiseks (e-post) ja välja parooli sisestamiseks. Ja turvalisuse huvides lisame captcha sisestusvälja.

Serveris võib registreerimisvormi töötlemise tulemusena ilmneda erinevaid tõrkeid, mille tõttu ei saa kasutaja end registreerida. Seetõttu, et kasutaja saaks aru, miks registreerimine ebaõnnestub, on vaja kuvada talle nende vigade kohta teateid.

Enne vormi kuvamist lisame seansi veateadete kuvamiseks ploki.

Ja veel üks hetk, kui kasutaja on juba volitatud ja huvi pärast siseneb ta otse registreerimislehele, kirjutades brauseri aadressiribale website_url/form_register.php, siis sel juhul kuvame registreerimisvormi asemel pealkirja, et see on juba registreeritud.

Üldiselt faili kood form_register.php saime selle nii:

Sa oled juba registreeritud

Brauseris näeb registreerimisleht välja selline:

Via nõutav atribuut, oleme muutnud kõik väljad kohustuslikuks.

Pöörake tähelepanu registreerimisvormi koodile, kus kuvatakse captcha:

Me määrasime pildi atribuudi src väärtuses faili tee captcha.php, mis genereerib selle captcha.

Vaatame faili koodi captcha.php:

Kood on hästi kommenteeritud, seega keskendun vaid ühele punktile.

Funktsiooni sees imageTtfText(), on fondi tee määratud verdana.ttf. Nii et siin on õige toimimine captcha, peame looma kausta fonte ja pange sinna fondifail verdana.ttf. Saate selle leida ja alla laadida Internetist või võtta selle artikli materjalidega arhiivist.

Oleme HTML-i struktuuriga valmis, on aeg edasi liikuda.

Meili kinnitamine jQueryga

Iga vorm vajab sisestatud andmete valideerimist nii kliendi poolel (JavaScripti, jQuery abil) kui ka serveri poolel.

Peame pöörama erilist tähelepanu väljale E-post. On väga oluline, et sisestatud meiliaadress oleks kehtiv.

Sest antud väli sisend, määrame meili tüübi (type="email"), see hoiatab meid veidi valede vormingute eest. Kuid sellest ei piisa, sest brauseri pakutava koodiinspektori kaudu saate atribuudi väärtust hõlpsalt muuta tüüp koos meili peal tekst, ja kõik, meie tšekk enam ei kehti.

Ja sel juhul peame tegema usaldusväärsema kontrolli. Selleks kasutame JavaScripti jQuery teeki.

JQuery teegi ühendamiseks failis header.php siltide vahel , enne sulgevat silti , lisage see rida:

Vahetult pärast seda rida lisage meili kinnitamise kontrollkood. Siia lisame koodi sisestatud parooli pikkuse kontrollimiseks. See peab olema vähemalt 6 tähemärki pikk.

Selle skripti abil kontrollime sisestatud meiliaadressi kehtivust. Kui kasutaja sisestas vale e-posti, kuvame selle kohta veateate ja desaktiveerime vormi esitamisnupu. Kui kõik on korras, eemaldame vea ja aktiveerime vormi esitamisnupu.

Ja nii, vormi kinnitamisega kliendi poolel, olemegi valmis. Nüüd saame selle saata serverisse, kus teeme ka paar kontrolli ja lisame andmed andmebaasi.

Kasutaja registreerimine

Saadame vormi töötlemiseks faili register.php, POST-meetodi abil. Nimi antud fail atribuudi väärtuses määratud käitleja tegevust. Ja saatmismeetod on määratud atribuudi väärtuses meetod.

Ava see fail register.php ja esimene asi, mida peame tegema, on kirjutada seansi käivitamise funktsioon ja lisada varem loodud fail dbconnect.php(Selles failis lõime ühenduse andmebaasiga). Ja veel, deklareerige kohe rakud error_messages ja edu_sõnumid seansi globaalses massiivis. AT veateated salvestame kõik veateated, mis ilmnevad vormi töötlemisel ja sisse edu_sõnumid Kirjutame rõõmsaid sõnumeid.

Enne jätkamist peame kontrollima kas ankeet üldse esitati. Ründaja saab vaadata atribuudi väärtust tegevust vormilt ja uurige, milline fail seda vormi töötleb. Ja tal võib tekkida idee minna otse selle faili juurde, tippides brauseri aadressiribale järgmise aadressi: http://site_site/register.php

Seega peame kontrollima, kas globaalses POST-massiivis on lahter, mille nimi ühtib vormil oleva nupu "Registreeri" nimega. Seega kontrollime, kas nuppu "Registreeri" vajutati või mitte.

Kui ründaja proovib otse sellesse faili minna, kuvatakse talle veateade. Tuletan meelde, et muutuja $address_site sisaldab saidi nime ja see deklareeriti failis dbconnect.php.

Viga! avaleht.

"); } ?>

Seansi captcha väärtus lisati selle genereerimise ajal faili captcha.php. Meeldetuletuseks näitan veel kord seda koodijuppi failist captcha.php, kus seansile lisatakse captcha väärtus:

Liigume nüüd testi enda juurde. Failis register.php, if-ploki sees, kus kontrollime, kas vajutati nuppu "Registreeri" või õigemini, kus on kommentaar " // (1) Koht järgmise koodilõigu jaoks"Me kirjutame:

//Saadud captcha kontrollimine //Tühikute kärpimine stringi algusest ja lõpust $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Võrdle saadud väärtust seansi väärtusega. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Kui captcha ei ole õige, siis tagastage kasutaja registreerimislehele ja seal kuvame veateate, et ta sisestas vale captcha. $error_message = "

Viga! Sisestasite vale captcha

"; // Salvestage veateade seansi. $_SESSION["error_messages"] = $error_message; // Tagastab kasutaja registreerimislehe päises("HTTP/1.1 301 Moved Permanently"); header("Asukoht: " .$address_site ."/form_register.php"); //Peatage skripti väljumine(); ) // (2) Koht järgmise koodilõigu jaoks )else( //Kui captcha-d ei edastata või see on tühi, väljuge ("

Viga! Kinnituskoodi pole, see tähendab captcha-koodi. Võite minna avalehele.

"); }

Järgmisena peame töötlema POST-massiivist saadud andmeid. Kõigepealt peame kontrollima globaalse POST-massiivi sisu ehk seda, kas seal on lahtreid, mille nimed ühtivad meie vormi sisendväljade nimedega.

Kui lahter on olemas, siis kärbime selle lahtri stringi algusest ja lõpust tühikud, vastasel juhul suuname kasutaja registreerimisvormiga lehele tagasi.

Edasi, peale tühikute kärpimist, lisame muutujale stringi ja kontrollime selle muutuja tühjust, kui see pole tühi, siis liigu edasi, vastasel juhul suuname kasutaja registreerimisvormiga lehele tagasi.

Kleepige see kood määratud asukohta // (2) Koht järgmise koodilõigu jaoks".

/* Kontrollige, kas globaalses massiivis $_POST on vormilt saadetud andmeid ja lisage esitatud andmed tavaliste muutujate hulka. = trim($_POST["eesnimi"]); //Kontrolli, kas muutuja on tühi if(!empty ($eesnimi))( // Ohutuse huvides teisendage erimärgid HTML-i olemiteks $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "

Sisestage oma nimi

Nimeväli puudub

"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) if( isset($_POST["perenimi"]))( // Kärbi tühikuid stringi algusest ja lõpust $last_name = trim($_POST["perenimi"]); if(!empty($perenimi)) ( // Ohutuse huvides teisendage erimärgid HTML-i olemiteks $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "

Sisestage oma perekonnanimi

Nimeväli puudub

"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) if( isset($_POST["email"]))( // Kärbi tühikuid stringi algusest ja lõpust $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Koodi koht e-posti aadressi vormingu ja selle unikaalsuse kontrollimiseks )else( // Salvestage veateade seansi. $_SESSION["error_messages" ] .= "

Sisestage oma e-posti aadress

"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) if( isset($_POST["parool"]))( // Kärbi tühikuid stringi algusest ja lõpust $password = trim($_POST["parool"]); if(!empty($password)) ( $password = htmlspecialchars ($password, ENT_QUOTES); //Parooli krüptimine $password = md5($password."top_secret"); )else( // Salvestage veateade seansile. $_SESSION["error_messages"] .= "

Sisestage oma parool

Valdkond on eriti oluline. meili. Peame kontrollima saabunud postiaadressi vormingut ja unikaalsust andmebaasis. See tähendab, kas sama meiliaadressiga kasutaja on juba registreeritud.

määratud kohas" // (3) Koodi koht postiaadressi vormingu ja kordumatuse kontrollimiseks" lisage järgmine kood:

//Kontrollige saabunud meiliaadressi vormingut regulaaravaldise $reg_email = "/^**@(+(*+)*\.)++/i" abil; //Kui vastuvõetud meiliaadressi vorming ei ühti regulaaravaldisega if(!preg_match($reg_email, $email))( // Salvestage veateade seansile. $_SESSION["error_messages"] .= "

Sisestasite vale e-posti aadressi

"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadressi_sait."/form_register.php"); //Peata skripti väljumine(); ) // Kontrollige, kas selline aadress on andmebaasis juba olemas $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); Seal on täpselt 1 rida, seega on selle meiliaadressiga kasutaja juba registreeritud if($result_query->num_rows == 1)( //Kui tulemus ei ole võrdne valega if(($row = $result_query->fetch_assoc()) != false) ( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "

Selle e-posti aadressiga kasutaja on juba registreeritud

"; //Tagastab kasutaja registreerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$aadress_sait."/form_register.php"); )else( //Salvesta veateade seansile .$_SESSION["error_messages"] .= "

Viga andmebaasi päringus

"; //Tagastab kasutaja registreerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_register.php"); ) /* sulge valik */ $ result_query-> close(); //Skripti väljumise peatamine(); ) /* valiku sulgemine */ $result_query->close();

Ja nii, oleme kõigi kontrollidega lõpetanud, on aeg lisada kasutaja andmebaasi. määratud kohas" // (4) Koht kasutaja andmebaasi lisamise koodi jaoks" lisage järgmine kood:

//Päring kasutaja lisamiseks andmebaasi $result_query_insert = $mysqli->query("INSERT INTO `kasutajad` (eesnimi, perekonnanimi, email, parool) VALUES ("".$eesnimi."", "".$perenimi ." ", "".$email."", "".$password."")"); if(!$result_query_insert)( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "

Tõrketaotlus kasutaja lisamiseks andmebaasi

Registreerimine edukalt lõpule viidud!!!
Nüüd saate oma kasutajanime ja parooliga sisse logida.

"; //Saada kasutaja sisselogimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); ) /* Täitke päring */ $ result_query_insert-> close();//Sulgeb andmebaasiühendus $mysqli->close();

Kui kasutaja andmebaasi lisamise taotluses ilmneb viga, lisame seansile selle vea kohta teate ja tagastame kasutaja registreerimislehele.

Muidu, kui kõik läks hästi, lisame seansile ka teate, aga see on juba meeldivam, nimelt ütleme kasutajale, et registreerimine õnnestus. Ja suuname selle autoriseerimisvormiga lehele.

Failis on meiliaadressi vormingu ja parooli pikkuse kontrollimise skript header.php, seega mõjutab see ka selle vormi välju.

Seanss käivitatakse ka failis header.php, nii failis form_auth.php seanssi pole vaja käivitada, sest saame vea.

Nagu öeldud, töötab siin ka meiliaadressi vormingu ja parooli pikkuse kontrollimise skript. Seega, kui kasutaja sisestab vale meiliaadressi või lühikese parooli, saab ta koheselt veateate. Nupp tulla sisse muutub passiivseks.

Pärast vigade parandamist nupp tulla sisse muutub aktiivseks ja kasutaja saab vormi esitada serverisse, kus seda töödeldakse.

Kasutaja autoriseerimine

Väärtuse omistamiseks tegevust volitusvormil on fail auth.php, mis tähendab, et vormi töödeldakse selles failis.

Nii et avame faili auth.php ja kirjutage kood autoriseerimisvormi töötlemiseks. Esimene asi, mida teha, on seansi käivitamine ja faili kaasamine dbconnect.php andmebaasiga ühenduse loomiseks.

//Vormi töötlemisel tekkida võivate vigade lisamiseks deklareerige lahter. $_SESSION["error_messages"] = ""; //Deklareerige lahter edukate sõnumite lisamiseks $_SESSION["success_messages"] = "";

/* Kontrollige, kas vorm esitati, st kas klõpsati nuppu Logi sisse. Kui jah, siis läheme kaugemale, kui ei, siis kuvame kasutajale veateate, mis ütleb, et ta läks otse sellele lehele. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Järgmise koodilõigu koht )else( exit("

Viga! Olete sellele lehele otse sisenenud, seega pole töötlemiseks andmeid. Võite minna avalehele.

"); }

//Kontrollige vastuvõetud captcha-d if(isset($_POST["captcha"]))( //Kärbi tühikuid stringi algusest ja lõpust $captcha = trim($_POST["captcha"]); if(!empty ($captcha ))( //Võrdle saadud väärtust seansi väärtusega. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != ""))( // Kui captcha on kehtetu, siis tagastame kasutaja autoriseerimislehele ja seal kuvame veateate, et ta sisestas vale captcha. $error_message = "

Viga! Sisestasite vale captcha

Viga! Captcha sisestusväli ei tohi olla tühi.

"; // Salvestage veateade seansi. $_SESSION["error_messages"] = $error_message; // Tagastab kasutaja autoriseerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: " .$address_site ."/form_auth.php"); //Stop the script exit(); ) //(2) Koht postiaadressi töötlemiseks //(3) Koht parooli töötlemiseks //(4) Koht for päringu tegemine andmebaasi )else ( //Kui captcha-d ei edastata exit("

Viga! Kinnituskoodi pole, see tähendab captcha-koodi. Võite minna avalehele.

"); }

Kui kasutaja on sisestanud kinnituskoodi õigesti, liigume edasi, vastasel juhul tagastame ta autoriseerimislehele.

E-posti aadressi kinnitamine

// Kärbi tühikuid stringi algusest ja lõpust $email = trim($_POST["email"]); if(isset($_POST["e-post"]))(if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Kontrollige vastuvõetud meiliaadressi vormingut regulaaravaldise $ abil reg_email = " /^**@(+(*+)*\.)++/i"; //Kui vastuvõetud meiliaadressi vorming ei ühti regulaaravaldisega if(!preg_match($reg_email, $email ))( // Salvesta seansi veateatesse.$_SESSION["error_messages"] .= "

Sisestasite vale e-posti aadressi

"; //Kasutaja tagastamine autoriseerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); ) )else ( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "

Postiaadressi (e-posti) sisestamise väli ei tohi olla tühi.

E-posti sisestamiseks ei ole välja

Kui kasutaja on sisestanud vales vormingus e-posti aadressi või meiliaadressi välja väärtus on tühi, suuname ta tagasi autoriseerimislehele, kus kuvame sellekohase teate.

Parooli kontroll

Järgmine töödeldav väli on parooliväli. määratud kohta" //(3) Paroolitöötluse koht", me kirjutame:

If(isset($_POST["parool"]))( // Kärbi tühikuid stringi algusest ja lõpust $password = trim($_POST["parool"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); // Krüpteeri parool $password = md5($password."top_secret"); )else( // Salvestage veateade seansile. $_SESSION["error_messages"] . = "

Sisestage oma parool

Parooli sisestamiseks ei ole välja

"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); )

Siin krüpteerime funktsiooni md5 () abil vastuvõetud parooli, kuna andmebaasis on meil paroolid krüptitud kujul. Täiendav salasõna krüptimisel, meie puhul " ülisalajane" peab olema see, mida kasutati kasutaja registreerimisel.

Nüüd tuleb teha andmebaasi päring kasutaja valiku kohta, kelle meiliaadress võrdub vastuvõetud meiliaadressiga ja parool on võrdne vastuvõetud parooliga.

//Päring andmebaasi kasutaja valiku kohta. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" JA parool = "".$parool."""); if(!$result_query_select)( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "

Päringu viga andmebaasist kasutaja valimisel

"; //Kasutaja tagastamine registreerimislehe päisele("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); )else( //Kontrolli, kas andmebaasis pole selliste andmetega kasutajat, siis kuvatakse veateade if($result_query_select->num_rows == 1)( // Kui sisestatud andmed ühtivad andmebaasi andmetega, siis salvesta seansi massiivi sisselogimine ja parool. $_SESSION["email"] = $e-post; $_SESSION["password"] = $parool; //Kasutaja tagastamine avaleht header("HTTP/1.1 301 teisaldatud jäädavalt"); header("Asukoht: ".$aadressi_sait."/index.php"); )else( // Salvestage veateade seansi. $_SESSION["error_messages"] .= "

Vale kasutajanimi ja/või parool

"; //Kasutaja tagastamine autoriseerimislehe päisesse("HTTP/1.1 301 Moved Permanently"); header("Asukoht: ".$address_site."/form_auth.php"); //Peata skripti väljumine(); ) )

Saidi väljumine

Ja viimane asi, mida me rakendame, on väljumisprotseduur. Hetkel kuvame päises linke autoriseerimislehele ja registreerimislehele.

Saidi päises (fail header.php), kontrollime seanssi kasutades, kas kasutaja on juba sisse logitud. Kui ei, siis kuvame registreerimis- ja autoriseerimislingid, vastasel juhul (kui see on volitatud), siis registreerimis- ja autoriseerimislinkide asemel kuvame linki Väljund.

Muudetud koodiosa failist header.php:

Registreerimine

Väljund

Kui klõpsate saidilt väljumise lingil, siseneme faili logout.php, kus me lihtsalt hävitame seansi e-posti aadressi ja parooliga lahtrid. Pärast seda suuname kasutaja tagasi lehele, millel lingil klõpsati väljund.

Faili kood logout.php:

See on kõik. Nüüd sa tead, kuidas rakendada ja töödelda registreerimis- ja autoriseerimisvorme kasutaja teie saidil. Neid vorme leidub peaaegu igal saidil, seega peaks iga programmeerija teadma, kuidas neid luua.

Õppisime ka sisendandmete valideerimist nii kliendi poolel (brauseris, JavaScripti, jQuery abil) kui ka serveri poolel (kasutades PHP keel). Õppisime ka rakendada väljalogimisprotseduuri.

Kõik skriptid on testitud ja töötavad. Selle väikese saidi failidega arhiivi saate alla laadida sellelt lingilt.

Tulevikus kirjutan artikli, kus kirjeldan. Ja plaanin ka kirjutada artikli, kus ma seletan (ilma lehte uuesti laadimata). Seega, et olla kursis uute artiklite ilmumisega, võite tellida minu saidi.

Kui teil on küsimusi, võtke ühendust, samuti, kui märkate artiklis viga, andke mulle teada.

Tunniplaan (5. osa):