Bezuslovni obrazac za prijavu html. Obrazac za prijavu i registraciju sa HTML5 i CSS3

HTML oznake, definiranje HTML obrazaca na stranici

Izrađujemo web stranice i pojedinačne stranice na internetu za komunikaciju sa posetiocima.

HTML forme koriste se za registraciju posjetitelja na stranici, za interaktivne ankete i glasanje, omogućavaju vam slanje poruka, kupovinu i tako dalje. HTML Obrazac je kreiran za jednu svrhu: prikupljanje i zatim prenošenje informacija za obradu u programsku skriptu ili putem e-pošte.

Uzorak HTML obrasca | Uđite na stranicu

Oznake, atributi i vrijednosti

- odrediti formu.
name="" - definira naziv obrasca.
method="" - određuje kako se podaci šalju iz obrasca. Vrijednosti: "get" (podrazumevano) i "post" . Metoda "post" se češće koristi, jer vam omogućava prijenos velikih količina podataka.
action="" - određuje url po kojem se podaci šalju na obradu. U našem slučaju - enter_data.php ..
- definirati elemente forme kao što su dugmad, prekidači, tekstualna polja za unos podataka.
type="text" - definira tekstualno polje za unos podataka.
type="password" - definira polje za unos lozinke, dok se tekst prikazuje kao zvjezdice ili kružići.
type="checkbox" - definira radio dugme.
type="hidden" - definira skriveni element forme - koriste se za prenošenje Dodatne informacije na server.
size="25" - dužina tekstualno polje u likovima.
maxlength="30" - maksimalni dozvoljeni broj ulaznih znakova.
value="" - definira vrijednost koja će biti poslana na obradu ako se odnosi na radio dugmad ili radio dugmad. Vrijednost ovog atributa kao dijela tekstualnog polja ili gumba bit će prikazana kao, na primjer, John ili Login u gornjem primjeru.

Uzorak HTML obrasca | Komentari na stranici

<a href="https://obanracer.ru/bs/gde-sozdat-lichnuyu-internet-stranicu-primer-sozdaniya-html-stranicy-v.html">HTML primjer</a> forme

Oznake, atributi i vrijednosti

action="http://site/comments.php" - određuje url na koji će se slati podaci iz obrasca.
id="" - definira naziv, identifikator elementa forme.
name="" - definira ime elementa obrasca.
- definirati tekstualno polje u obrascu.
cols="" - određuje broj kolona u tekstualnom polju obrasca.
rows="" - Određuje broj redova za tekstualno polje obrasca.

Ako između stavite tekst, on će biti prikazan unutar okvira kao primjer koji je lako ukloniti.

Uzorak HTML obrasca | Padajuća lista

HTML forme

Oznake, atributi i vrijednosti

- definirati listu sa stavkama koje možete izabrati.
size="" - određuje broj vidljivih pozicija liste. Ako je vrijednost 1, imamo posla sa padajućom listom.
- definirati pozicije (tačke) liste.
value="" - sadrži vrijednost koju će obrazac poslati na navedeni URL na obradu.
selected="selected" - odabire stavku liste kao primjer.

Uzorak HTML obrasca | Lista sa trakom za pomeranje

Povećanjem vrijednosti atributa size="" dobijamo listu sa trakom za pomicanje:

HTML forme

Za ovu opciju koristimo oznaku multiple="multiple" koja omogućava odabir više stavki. Njegov nedostatak omogućava vam da odaberete samo jednu stavku.

type="submit" - definira dugme.

type="reset" - definira dugme za resetiranje.

value="" - definira oznaku na gumbu.

Pogledajte dodatno:

Dizajn obrasca za prijavu je zaista važan za svaku web stranicu. Prikupili smo neke responzivne predloške stranice za prijavu besplatno preuzimanje. The obrazac za prijavu je dio web stranice. Kada odemo na web stranicu i želimo puni pristup, potrebno je da se registriramo i prijavite. Obrazac za prijavu bilo koje web stranice može se naći na bilo kojoj strani web stranice. Bit će desna ili lijeva strana. Nijedna web stranica bez obrasca za prijavu i registraciju nije potpuna. Dakle, važno je za svaku web stranicu. Vrlo je teško kreirati obrazac za prijavu putem HTML CSS bez profesionalnog programera.

HTML je struktura, a CSS je dizajn. HTML5 i CSS3 je ažurirana verzija za dizajn. Neki od obrazaca za prijavu kreirani putem ovog ažuriranog kodiranja mogu se direktno preuzeti. Programer je besplatno podijelio ovaj obrazac. Mogu se koristiti za bilo koje lične potrebe ili posao.

Koristite ovaj besplatni predložak stranice za prijavu i možete izgraditi sebe. Možete prilagoditi i promijeniti bilo koju boju ili stil. Također možete povezati svoju bazu podataka, jquery. Dakle, ovaj predložak za prijavu je zaista koristan i važan.

Podijelili smo ovu objavu nekoliko besplatnih obrazaca za prijavu html5 css3. Ova zbirka će se povećati. Pokušavamo prikupiti više šablona stranice za prijavu za pokretanje.

oblik materijalnog dizajna

Ovaj obrazac za prijavu izgleda zaista sjajno i jednostavno. Možete uređivati i mijenjati boju interfejsa. Jednostavan dizajn, ali vrlo profesionalan.

DEMO DOWNLOAD

Kada trebate dizajnirati bilo koji obrazac za prijavu na aplikaciju, možete koristiti ovaj Obrazac za prijavu dizajna materijala. Biće savršen za vašu aplikaciju.

DEMO DOWNLOAD

Animirani SVG Avatar

Animirani šablon za prijavu ima veliku potražnju. Ako želite da koristite svoju profesiju. Ovaj Animirani SVG Avatar obrazac za prijavu je bolji za vas.

DEMO DOWNLOAD

Efekat protresanja formulara za prijavu

Ovo je jednostavan obrazac za prijavu i ima određeni učinak i koristi vaše profesionalno poslovanje.

DEMO DOWNLOAD

CSS3 Animation Cloud i formular za prijavu

Ako imate poslovanje u oblaku ili planirate bilo koju vrstu poslovanja u oblaku, možete koristiti ovaj CSS3 Animation Cloud i obrazac za prijavu.

DEMO DOWNLOAD

čist obrazac za prijavu

Ovo je vrlo čist dizajn i ime također isti čisti obrazac za prijavu. Koristite ovaj obrazac za svoju čistu web stranicu.

DEMO DOWNLOAD

Obrazac za prijavu na HTML5

Ovaj obrazac za prijavu je dizajniran HTML5 i koristite ga za vašu najbolju web stranicu.

DEMO DOWNLOAD

Samo CSS validacija obrasca za prijavu

DEMO DOWNLOAD

CSS obrazac za prijavu

DEMO DOWNLOAD

Obrazac za prijavu na Batman

DEMO DOWNLOAD

Obrazac za prijavu sa Materializecss

DEMO DOWNLOAD

Obrazac za prijavu na kutni materijal

DEMO DOWNLOAD

Responzivni obrazac za prijavu

DEMO DOWNLOAD

Responzivni obrazac za prijavu

DEMO DOWNLOAD

Jednostavna ravna forma sa okretnim utovarivačem

DEMO DOWNLOAD

Prijavite se na Everdwell

Obrasci su dizajnirani za slanje podataka od korisnika na web server. Obrasci u HTML-u mogu se sastojati od tekstualnih polja i tekstualnih oblasti, okvira za potvrdu i radio dugmadi i padajućih lista. Sve su to elementi forme. Svaki element služi za prenošenje neke vrijednosti na stranicu.
U svojoj srži, HTML obrazac je web stranica na kojoj vidite područja za unos vaših informacija. Nakon što popunite formular i kliknete na dugme za slanje, informacije iz obrasca se pakuju i šalju na web server na obradu od strane serverske skripte (fajl rukovaoca). Nakon obrade, druga web stranica vam se vraća kao odgovor. Sljedeća slika jasno pokazuje kako obrazac funkcionira:

Nema ništa teško u kreiranju HTML obrazaca. Najlakši način da dobijete osjećaj za forme je da raščlanite malo HTML-a i zatim vidite kako funkcionira. Sljedeći primjer pokazuje sintaksu za kreiranje jednostavnog HTML obrasca:

Primjer: Jednostavan HTML obrazac

Probajte sami"

Moj prvi obrazac:
ime:
Prezime:

jednostavan oblik

Element

Obrasci se ubacuju u web stranice kroz element . To je kontejner za sav sadržaj obrasca, uključujući elemente kao što su tekstualna polja i dugmad, kao i sve druge oznake. HTML jezik. Međutim, ne može sadržavati drugi element. .
Za slanje obrasca na server koristi se dugme "Pošalji", isti rezultat će se dobiti ako se pritisne tipka "Enter" unutar obrasca. Ako na obrascu nema dugmeta Pošalji, za slanje se može koristiti taster Enter.
Većina atributa elemenata utiču na obradu obrasca, a ne na njegov dizajn. Od kojih su najčešći akcija I metoda. Atribut akcija sadrži URL na koji će informacije u obrascu biti dostavljene na obradu od strane servera. Atribut metoda je HTTP metoda koju bi pretraživači trebali koristiti za slanje podataka obrasca.

Element

Skoro sva polja obrasca kreiraju se pomoću elementa (od engleskog input - unos). Izgled element mijenjaju ovisno o vrijednosti njegovog atributa tip:

Evo nekih vrijednosti atributa tip:

Unos teksta i lozinke

Jedan od najjednostavnijih tipova elemenata obrasca je tekstualno polje, dizajnirano za unos teksta iz jednog reda. Ovaj tip unos teksta je postavljen prema zadanim postavkama, i stoga će se prikazati polje u jednom redu ako zaboravite navesti atribut tip. Da biste u obrazac dodali polje za unos teksta u jednom redu, trebate unutar elementa atribut registra tip sa tekstualnom vrijednošću:

Polje za unos lozinke je varijacija običnog tekstualnog polja. Podržava iste atribute kao tekstualno polje u jednom redu. Atribut ime postavlja naziv polja za unos lozinke koje će biti poslato na server zajedno sa lozinkom koju je unio korisnik. Da biste kreirali polje za unos lozinke, morate postaviti vrijednost atributa lozinke tip(lozinka (engleski) - lozinka):

Primjer kreiranja obrasca sa poljem za lozinku:

Primjer: Polje Lozinka

Probajte sami"

Vaša prijava:

Lozinka:

Vaša prijava:

Lozinka:

Uz ovaj atribut, možete koristiti i atribut maxlenght, čija vrijednost određuje maksimalan broj znakova koji se mogu unijeti zadata linija. Također možete postaviti dužinu polja za unos pomoću atributa veličina. Prema zadanim postavkama, većina pretraživača ograničava tekstualna polja na 20 znakova. Za kontrolu širine novih elemenata obrasca, umjesto atributa veličina, preporučujemo korištenje kaskadnih stilskih tablica (CSS).
Atribut vrijednost specificira vrijednost koja se po defaultu prikazuje u tekstualnom okviru kada se obrazac učita. Unošenjem zadane vrijednosti u polje možete objasniti korisniku koje tačno podatke i u kojem formatu želite da korisnik ovdje unese. Ovo je kao uzorak, jer je korisniku mnogo zgodnije da popuni obrazac, videći primjer ispred sebe.

Prekidači (radio)

Element tip radio kreira radio dugmad koji koriste logički princip "ILI", omogućavajući vam da odaberete samo jednu od nekoliko vrijednosti: ako odaberete jednu poziciju, sve ostale postaju neaktivne. Osnovna sintaksa elementa radio dugmeta je:

Atribut ime za radio dugmad je obavezan i igra važnu ulogu u grupisanju nekoliko elemenata radio dugmadi u grupu. Da biste kombinirali radio dugmad u grupu, morate podesiti istu vrijednost atribut ime i različite vrijednosti atributa vrijednost. Atribut vrijednost postavlja vrijednost odabranog radio dugmeta za slanje na server. Vrijednost svakog elementa radio dugmeta mora biti jedinstvena unutar grupe tako da server zna koju opciju odgovora je korisnik odabrao.
Prisustvo atributa provjereno(sa engleskog - postaviti) na elementu prekidača označava koja od predloženih opcija treba biti odabrana po defaultu prilikom učitavanja stranice, ako je potrebno. Ovaj atribut se može postaviti samo za jedan element prekidača iz grupe:

Probajte sami"

Koliko imaš godina?

ispod 18
od 18 do 24h
od 25 do 35
preko 35

Koliko imaš godina?

ispod 18
od 18 do 24h
od 25 do 35
preko 35

Potvrdni okviri

Element tip polje za potvrdu kreira potvrdne okvire koji su slični radio dugmadima po tome što omogućavaju korisniku da bira između opcija koje pružate. Glavna razlika od radio dugmadi je u tome što posjetitelj može odabrati nekoliko opcija odjednom, a same zastavice su označene kvadratima, a ne krugovima. Kao i kod radio dugmadi, grupa potvrdnih okvira se kreira tako što se svakoj stavci dodjeljuje ista vrijednost atributa. ime, međutim svaki potvrdni okvir ima svoje značenje. Osnovna sintaksa polja za potvrdu:

Atribut provjereno, kao i kod radio dugmadi, specificira da dato polje za potvrdu treba biti odabrano po defaultu kada se stranica učita. Ovaj atribut se može postaviti istovremeno za nekoliko zastavica u grupi.
Sljedeći primjer koristi potvrdne okvire za navođenje nekoliko zadanih opcija odgovora:

Primjer: Korištenje radio dugmadi

Probajte sami"

Jazz
Blues
Rock
šansona
Država

Koje muzičke žanrove volite?

Jazz
Blues
Rock
šansona
Država

Dugmad za potvrdu (pošalji) i brisanje (resetovanje)

Element tip submit kreira dugme koje, kada se klikne, šalje pretraživač na serversku skriptu da obradi podatke koje je korisnik uneo u obrazac. Ako kreiramo dugme koje briše obrazac, tada dodeljujemo atributu tip"reset" vrijednost. element tip submit može se dodijeliti opcijski atribut ime. Atribut vrijednost se koristi u ovom elementu za određivanje teksta koji označava oznaku na dugmetu. Podrazumevano, u pretraživačima, dugme je napisano "Pošalji" (Pošalji), ako vam ovaj natpis ne odgovara, unesite ga sami. Pošto se stilovi dugmadi za potvrdu mogu razlikovati u različitim pretraživačima, bolje je da sami prilagodite stil dugmeta koristeći CSS alate ili koristite grafičke dugmad.
Kreirajte dugmad za potvrdu i brisanje:

Primjer: Korištenje submit and reset

Probajte sami"

Klikom na dugme Reset resetuje sve podatke koje je korisnik uneo.

atribut akcije.

Glavni za element

Datoteka za obradu se nalazi na serveru mytestserver.com u folderu imenik i naziv serverske skripte koja će obraditi podatke - obrabotchik.php. Na njega će se prenijeti svi podaci koje ste unijeli u obrazac na web stranici. Ekstenzija .php označava da je navedeni obrazac obrađen PHP skriptom. Sam rukovatelj može biti napisan na drugom jeziku, na primjer, može biti skriptni jezik Python, Ruby, itd.
Preporučljivo je uvijek postaviti vrijednost atributa akcija. Ako obrazac mora dostaviti vrijednosti na istoj stranici na kojoj se nalazi, navedite prazan niz kao vrijednost atributa akcije: action="".

atribut metode

Atribut metoda specificira kako se informacije šalju serveru. Izbor načina podnošenja obrasca zavisi od podataka koje je potrebno poslati uz njega. Ovdje obim ovih podataka igra glavnu ulogu. Dvije najpopularnije metode prosljeđivanja neobrađenih podataka vašeg obrasca iz pretraživača na server su: GET I POŠTA. Metoda je postavljena na bilo koju po vašem izboru, a ako je niste naveli, koristit će se po defaultu GET. Razmotrimo primjenu svakog od njih.

POST metoda

Metoda POŠTA pakuje podatke obrasca i šalje ih serveru, a da korisnik to ne primijeti, budući da su podaci sadržani u tijelu poruke. Web pretraživač kada koristite metodu POŠTAšalje zahtjev serveru koji se sastoji od posebnih zaglavlja praćenih podacima obrasca. Pošto je sadržaj ovog zahtjeva dostupan samo serveru, POŠTA koristi se za prijenos povjerljivih podataka kao što su lozinke, podaci o bankovnoj kartici i drugi lični podaci korisnika. Metoda POŠTA pogodan i za slanje velikih količina informacija, jer, za razliku od metode GET, nema ograničenja u broju prenesenih znakova.

GET metoda

Kao što već znate, glavni posao pretraživača je primanje web stranica sa servera. Dakle, kada koristite metodu GET, vaš pretraživač jednostavno prima web stranicu kao i uvijek. Metoda GET također omota podatke obrasca, ali ih dodaje na kraj URL-a prije slanja zahtjeva serveru. Da biste razumjeli kako metoda funkcionira GET da vidimo na delu. Otvorite prvi primjer iz ovog vodiča (Primjer: Jednostavan HTML obrazac) u notepadu (kao što je Notepad++) i napravite malu promjenu u HTML kodu:

one. zamijeniti POŠTA na GET.
Sačuvajte datoteku pod imenom ime datoteke.html i osvježite stranicu pretraživača (F5), a zatim ispunite obrazac kao Vasya Pupkin, i kliknite na dugme Pošalji. U adresnoj traci pretraživača videćete nešto ovako:

File_name.html?firstname=Vasya&lastname=Pupkin

Sada vidite naziv svakog elementa obrasca, kao i njegovu vrijednost, upravo ovdje u URL-u.
URL je odvojen od ostalih podataka obrasca znakom upitnika, a nazivi i vrijednosti varijabli odvojeni su znakom ampersanda (&) .
Ovu metodu treba koristiti ako ne prenosite velike količine informacija.
Ova metoda neće raditi ako su podaci u vašem obrascu osjetljivi, kao što je pohranjivanje broja bankovne kartice ili lozinke.
Osim toga, metoda GET nije prikladno ako želite da pošaljete datoteke na server zajedno sa formom.

Grupisanje elemenata forme

Elementi obrasca koji su povezani po značenju mogu se grupirati između oznaka

. Prikazaće se pretraživač

kao okvir oko grupe elemenata forme. Izgled okvira se može promijeniti pomoću Cascading Style Sheets (CSS).
Da biste svakoj grupi dodali naslov, potreban vam je element A koji specificira tekst zaglavlja grupe koji će biti ugrađen u okvir.

Polje za unos lozinke je obično tekstualno polje, uneseni tekst u kojem se, ovisno o pretraživaču, prikazuje kao zvjezdice ili tačke. Ova funkcija je dizajnirana da osigura da niko ne zaviri u unesenu lozinku. Iako se uneseni tekst ne prikazuje na ekranu, unesene informacije se prenose na server u čistom tekstu bez šifriranja. Stoga korištenje ovog polja ne pruža sigurnost podataka i može biti presretnuto.

Sintaksa kreiranja je sljedeća.

Atributi su isti kao atributi tekstualnog polja i navedeni su u tabeli 1. jedan.

Polje lozinke se široko koristi na web lokacijama za autorizaciju korisnika i ograničavanje pristupa dijelovima stranice na kojima trebate potvrditi svoje ovlaštenje. Primjer 1 pokazuje kako se kreiraju takva polja.

Primjer 1. Polje Lozinka

Polje za lozinku

Ulogovati se:

Lozinka:

Kao rezultat dobijamo sledeće (slika 1).

Rice. 1. Vrsta polja sa lozinkom

Svojstva stila su primjenjiva na polje lozinke koje specificira parametre boje, pozadine, okvira, itd. Primjer 2 pokazuje dodavanje pozadinskih slika u polja obrasca. Uzmimo za osnovu stil kao za tekstualna polja.

Primjer 2: Dodavanje slike u tekstualno polje

Polje za lozinku

Rezultat ovog primjera prikazan je na sl. 2. Slike se dodaju kao pozadina, tako da se tekst mora pomaknuti udesno koristeći padding-left , inače će biti prikazan na vrhu slike.

U ovom članku ćete naučiti kako kreirati obrazac za registraciju i autorizaciju koristeći HTML, JavaScript, PHP i MySql. Takvi oblici se koriste na gotovo svim stranicama, bez obzira na njihovu vrstu. Kreirani su za forum, i za online prodavnicu i za društvene mreže (kao što su Facebook, Twiter, Odnoklassniki) i za mnoge druge vrste stranica.

Ako imate web lokaciju na svom lokalnom računaru, nadam se da već imate . Ništa neće raditi bez toga.

Kreiranje tabele u bazi podataka

Da bismo implementirali registraciju korisnika, prvo nam je potrebna Baza podataka. Ako ga već imate, onda sjajno, inače, morate ga kreirati. U članku detaljno objašnjavam kako to učiniti.

I tako, imamo bazu podataka (skraćeno DB), sada treba da kreiramo tabelu korisnika u koje ćemo dodati naše registrovane korisnike.

Kako kreirati tabelu u bazi podataka, takođe sam objasnio u članku. Prije kreiranja tabele, moramo definirati koja će polja sadržavati. Ova polja će odgovarati poljima iz obrasca za registraciju.

Dakle, pomislili smo, zamislili koja polja će naš obrazac imati i kreirali tabelu korisnika sa ovim poljima:

id- Identifikator. Polje id treba biti u svakoj tabeli iz baze podataka.
ime- Da sačuvam ime.
prezime- Da sačuvam prezime.
email- Da sačuvate poštansku adresu. Koristićemo e-mail kao login, tako da ovo polje mora biti jedinstveno, odnosno imati JEDINSTVEN indeks.
email_status- Polje za označavanje da li je pošta potvrđena ili ne. Ako je pošta potvrđena, tada će imati vrijednost 1, u suprotnom vrijednost 0.
lozinka- Da sačuvate lozinku.

Ako želite da vaš obrazac za registraciju ima još polja, možete ih dodati i ovdje.

To je to, naš sto korisnika spreman. Idemo na sljedeći korak.

Veza sa bazom podataka

Napravili smo bazu podataka, sada se moramo povezati s njom. Povezat ćemo se pomoću MySQLi PHP ekstenzije.

U fascikli naše stranice kreirajte datoteku s imenom dbconnect.php, a u njemu pišemo sljedeću skriptu:

Greška u vezi sa bazom podataka. Opis greške: ".mysqli_connect_error()."

"; exit(); ) // Postavite kodiranje veze $mysqli->set_charset("utf8"); //Radi praktičnosti, dodajte varijablu ovdje koja će sadržavati ime naše stranice $address_site = "http://testsite .local" ; ?>

Ovaj fajl dbconnect.php morat će biti spojen na rukovaoce obrascima.

Obratite pažnju na varijablu $address_site, ovdje sam naznačio naziv svog testnog mjesta na kojem ću raditi. U skladu s tim naznačavate naziv svoje stranice.

Struktura sajta

Pogledajmo sada HTML strukturu naše web stranice.

Premjestite zaglavlje i podnožje stranice na pojedinačni fajlovi, header.php I footer.php. Povezat ćemo ih na svim stranicama. Naime, na glavnom (fil index.php), na stranicu sa formularom za registraciju (fil form_register.php) i na stranici sa formularom za ovlaštenje (fil form_auth.php).

Blokirajte našim linkovima, registracija I autorizacija, dodajte u zaglavlje stranice tako da se prikazuju na svim stranicama. Jedan link će ući stranica obrasca za registraciju(fajl form_register.php), a drugi na stranicu sa obrazac ovlaštenja(fajl form_auth.php).

Sadržaj header.php fajla:

Naziv naše stranice

Kao rezultat, naša glavna stranica izgleda ovako:

Naravno, vaša stranica može imati potpuno drugačiju strukturu, ali to nam sada nije važno. Glavna stvar je da postoje veze (dugmad) za registraciju i autorizaciju.

Sada idemo na formular za registraciju. Kao što ste već shvatili, imamo to u dosijeu form_register.php.

Idemo u bazu podataka (u phpMyAdmin), otvaramo strukturu tabele korisnika i vidimo koja polja su nam potrebna. Dakle, potrebna su nam polja za unos imena i prezimena, polje za unos poštanske adrese (Email) i polje za unos lozinke. I iz sigurnosnih razloga, dodaćemo polje za unos captcha.

Na serveru, kao rezultat obrade obrasca za registraciju, može doći do raznih grešaka zbog kojih korisnik neće moći da se registruje. Stoga, kako bi korisnik razumio zašto registracija nije uspjela, potrebno mu je prikazati poruke o ovim greškama.

Prije prikaza obrasca, dodajemo blok za prikaz poruka o grešci iz sesije.

I još jedan trenutak, ako je korisnik već autorizovan, i radi interesa, direktno ulazi na stranicu za registraciju pisanjem u adresnoj traci pretraživača website_url/form_register.php, tada ćemo u ovom slučaju, umjesto obrasca za registraciju, prikazati naslov za njega da je već registriran.

Općenito, kod datoteke form_register.php imamo to ovako:

Već ste registrovani

U pretraživaču stranica za registraciju izgleda ovako:

Via potreban atribut, sva polja smo učinili obaveznim.

Obratite pažnju na šifru obrasca za registraciju gdje captcha se prikazuje:

Mi smo u vrijednosti src atributa za sliku naveli putanju do datoteke captcha.php, koji generiše ovu captcha.

Pogledajmo kod datoteke captcha.php:

Kod je dobro komentarisan, pa ću se fokusirati samo na jednu tačku.

Unutar funkcije imageTtfText(), put do fonta je specificiran verdana.ttf. Dakle, evo za ispravan rad captcha, moramo kreirati folder fontove, i stavite datoteku fonta tamo verdana.ttf. Možete ga pronaći i preuzeti s Interneta ili preuzeti iz arhive s materijalima ovog članka.

Završili smo sa HTML strukturom, vrijeme je da krenemo dalje.

Validacija e-pošte pomoću jQueryja

Bilo kojoj formi je potrebna validacija unesenih podataka, kako na strani klijenta (koristeći JavaScript, jQuery) tako i na strani servera.

Posebnu pažnju moramo obratiti na polje Email. Veoma je važno da unesena email adresa bude važeća.

Za dato polje input , postavljamo tip e-pošte (type="email"), ovo nas malo upozorava na neispravne formate. Ali, to nije dovoljno, jer preko kodnog inspektora koji nam pruža pretraživač možete lako promijeniti vrijednost atributa tip od email na tekst, i to je to, naš ček više neće vrijediti.

I u tom slučaju moramo izvršiti pouzdaniju provjeru. Da bismo to učinili, koristit ćemo jQuery biblioteku iz JavaScripta.

Da biste povezali jQuery biblioteku, u datoteci header.php između oznaka , prije završne oznake , dodajte ovaj red:

Odmah nakon ovog retka dodajte kod za provjeru valjanosti e-pošte. Ovdje dodajemo kod za provjeru dužine unesene lozinke. Mora imati najmanje 6 znakova.

Uz pomoć ove skripte provjeravamo ispravnost unesene adrese e-pošte. Ako je korisnik unio pogrešan e-mail, tada prikazujemo grešku o tome i deaktiviramo dugme za slanje obrasca. Ako je sve u redu, uklanjamo grešku i aktiviramo dugme za slanje obrasca.

I tako, sa validacijom obrasca na strani klijenta, gotovi smo. Sada ga možemo poslati na server, gdje ćemo također napraviti nekoliko provjera i dodati podatke u bazu podataka.

Registracija korisnika

Šaljemo obrazac na obradu u fajl register.php, putem POST metode. Ime dati fajl rukovalac naveden u vrijednosti atributa akcija. A metoda slanja je navedena u vrijednosti atributa metoda.

Otvorite ovaj fajl register.php i prva stvar koju treba da uradimo je da napišemo funkciju pokretanja sesije i uključimo datoteku koju smo kreirali ranije dbconnect.php(U ovoj datoteci smo uspostavili vezu sa bazom podataka). Pa ipak, odmah proglasite ćelije error_messages I uspjeh_poruke u globalnom nizu sesije. IN error_mesages zabilježit ćemo sve poruke o greškama koje se javljaju tokom obrade obrasca i u uspjeh_poruke Hajde da napišemo srećne poruke.

Prije nego što nastavimo, moramo provjeriti da li je obrazac uopšte dostavljen. Napadač može pogledati vrijednost atributa akcija iz obrasca i saznajte koja datoteka obrađuje ovaj obrazac. I on može doći na ideju da ide direktno na ovu datoteku tako što će upisati sljedeću adresu u adresnu traku pretraživača: http://site_site/register.php

Dakle, moramo provjeriti postoji li ćelija u globalnom POST nizu čije ime odgovara imenu našeg dugmeta "Registriraj se" iz obrasca. Na taj način provjeravamo da li je pritisnuto dugme "Registracija" ili ne.

Ako napadač pokuša da ode direktno na ovu datoteku, dobiće poruku o grešci. Podsjećam vas da varijabla $address_site sadrži ime stranice i da je deklarirana u datoteci dbconnect.php.

Greška! glavna stranica .

"); } ?>

Captcha vrijednost u sesiji je dodana tokom njenog generiranja, u datoteci captcha.php. Podsjećamo, pokazaću još jednom ovaj dio koda iz datoteke captcha.php, gdje se captcha vrijednost dodaje sesiji:

A sada idemo na sam test. U fajlu register.php, unutar if bloka, gdje provjeravamo da li je pritisnuto dugme "Registriraj se", odnosno gdje je komentar " // (1) Mjesto za sljedeći dio koda"mi pišemo:

//Provjeri primljenu captcha //Skrati razmake od početka i od kraja stringa $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Uporedi primljenu vrijednost sa vrijednošću iz sesije. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Ako captcha nije tačna, vratite korisnika na stranicu za registraciju i tamo ćemo prikazati poruku o grešci da je unio pogrešan captcha. $error_message = "

Greška! Uneli ste pogrešan captcha

"; // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] = $error_message; // Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: " .$address_site ."/form_register.php"); //Zaustavi skriptu exit(); ) // (2) Mjesto za sljedeći dio koda )else( //Ako captcha nije proslijeđena ili je prazan izlaz ("

Greška! Ne postoji verifikacioni kod, odnosno captcha kod. Možete otići na glavnu stranicu.

"); }

Zatim moramo obraditi primljene podatke iz POST niza. Prije svega, trebamo provjeriti sadržaj globalnog POST niza, odnosno da li tamo postoje ćelije čija se imena poklapaju s nazivima polja za unos iz našeg obrasca.

Ako ćelija postoji, onda iz ove ćelije skraćujemo razmake od početka i od kraja niza, u suprotnom preusmjeravamo korisnika nazad na stranicu sa formularom za registraciju.

Dalje, nakon što su razmaci srezani, dodamo string varijablu i provjeravamo ovu varijablu da li je prazna, ako nije prazna, onda idemo dalje, u suprotnom preusmjeravamo korisnika nazad na stranicu sa formularom za registraciju.

Zalijepite ovaj kod na navedenu lokaciju // (2) Mjesto za sljedeći dio koda".

/* Provjerite da li postoje podaci poslani iz obrasca u globalnom nizu $_POST i zatvorite poslane podatke u regularne varijable. = trim($_POST["first_name"]); //Provjerite da li je varijabla prazna if(!empty ($first_name))( // Radi sigurnosti, pretvorite posebne znakove u HTML entitete $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Unesite svoje ime

Nedostaje polje za ime

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavite izlaz skripte(); ) if( isset($_POST["last_name"]))( // Skrati razmake od početka i kraja niza $last_name = trim($_POST["last_name"]); if(!empty($last_name)) ( // Radi sigurnosti, pretvorite posebne znakove u HTML entitete $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Unesite svoje prezime

Nedostaje polje za ime

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavite izlaz skripte(); ) if( isset($_POST["email"]))( // Skrati razmake od početka i kraja niza $email = trim($_POST["email"]); if(!empty($email)) ( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Mjesto koda za provjeru formata adrese e-pošte i njene jedinstvenosti )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages" ] .="

Unesite svoju email adresu

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavite izlaz skripte(); ) if( isset($_POST["password"]))( // Skrati razmake od početka i kraja niza $password = trim($_POST["password"]); if(!empty($password)) ( $password = htmlspecialchars ($password, ENT_QUOTES); //Šifrirajte lozinku $password = md5($password."top_secret"); )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .="

Unesite svoju lozinku

Oblast je od posebnog značaja. email. Moramo provjeriti format primljene poštanske adrese i njenu jedinstvenost u bazi podataka. Odnosno, da li je korisnik sa istom adresom e-pošte već registrovan.

Na navedenoj lokaciji" // (3) Mjesto koda za provjeru formata poštanske adrese i njene jedinstvenosti" dodajte sljedeći kod:

//Provjerite format primljene email adrese koristeći regularni izraz $reg_email = "/^**@(+(*+)*\.)++/i"; //Ako format primljene adrese e-pošte ne odgovara regularnom izrazu if(!preg_match($reg_email, $email))( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Unijeli ste nevažeći email

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); //Zaustavite izlaz skripte(); ) // Provjerite da li već postoji takva adresa u bazi podataka $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); Ako postoji su tačno jedan red, tada je korisnik sa ovom adresom e-pošte već registrovan if($result_query->num_rows == 1)( //Ako rezultat nije lažan if(($row = $result_query->fetch_assoc()) ! = false) ( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Korisnik sa ovom email adresom je već registrovan

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); )else( //Sačuvajte poruku o grešci na sesiju .$_SESSION["error_messages"] .= "

Greška u upitu baze podataka

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); ) /* zatvorite odabir */ $ result_query-> close(); //Zaustavi skriptu exit(); ) /* zatvori odabir */ $result_query->close();

I tako, završili smo sa svim provjerama, vrijeme je da dodamo korisnika u bazu podataka. Na navedenoj lokaciji" // (4) Mjesto za kod za dodavanje korisnika u bazu podataka" dodajte sljedeći kod:

//Upit za dodavanje korisnika u bazu podataka $result_query_insert = $mysqli->query("INSERT INTO `users` (ime_ime, prezime, email, lozinka) VRIJEDNOSTI ("".$first_name."", "".$last_name ." ", ".$email."", "".$password."")"); if(!$result_query_insert)( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Greška zahtjeva za dodavanje korisnika u bazu podataka

Registracija uspješno obavljena!!!
Sada se možete prijaviti koristeći svoje korisničko ime i lozinku.

"; //Pošalji korisnika na stranicu za prijavu header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); ) /* Dovrši zahtjev */ $ result_query_insert-> close(); //Zatvaranje veze baze podataka $mysqli->close();

Ako dođe do greške u zahtjevu za dodavanje korisnika u bazu podataka, sesiji dodajemo poruku o ovoj grešci i vraćamo korisnika na stranicu za registraciju.

Inače, ako je sve prošlo kako treba, dodajemo i poruku sesiji, ali ona je već ugodnija, naime, kažemo korisniku da je registracija uspjela. I mi ga preusmjeravamo na stranicu sa formularom za autorizaciju.

Skripta za provjeru formata email adrese i dužine lozinke je u datoteci header.php, tako da će uticati i na polja iz tog obrasca.

Sesija je također pokrenuta u datoteci header.php, dakle u fajlu form_auth.php sesija ne mora biti pokrenuta, jer dobijamo grešku.

Kao što sam rekao, ovdje radi i skripta za provjeru formata mail adrese i dužine lozinke. Stoga, ako korisnik unese pogrešnu adresu e-pošte ili kratku lozinku, odmah će dobiti poruku o grešci. Dugme ućiće postati neaktivan.

Nakon ispravljanja grešaka, dugme ući postaje aktivan i korisnik može poslati obrazac na server gdje će biti obrađen.

Autorizacija korisnika

Za pripisivanje vrijednosti akcija formular autorizacije ima fajl auth.php, što znači da će obrazac biti obrađen u ovoj datoteci.

Pa hajde da otvorimo fajl auth.php i napišite kod za obradu formulara za autorizaciju. Prva stvar koju treba učiniti je pokrenuti sesiju i uključiti datoteku dbconnect.php za povezivanje sa bazom podataka.

//Deklarišemo ćeliju za dodavanje grešaka koje se mogu pojaviti tokom obrade obrasca. $_SESSION["error_messages"] = ""; //Proglasite ćeliju za dodavanje uspješnih poruka $_SESSION["success_messages"] = "";

/* Provjerite da li je obrazac poslat, odnosno da li je kliknuto na dugme Prijava. Ako da, onda idemo dalje, ako ne, tada ćemo korisniku prikazati poruku o grešci u kojoj se navodi da je otišao direktno na ovu stranicu. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Mjesto za sljedeći dio koda )else( exit("

Greška! Direktno ste pristupili ovoj stranici, tako da nema podataka za obradu. Možete otići na glavnu stranicu.

"); }

//Provjerite primljeni captcha if(isset($_POST["captcha"]))( //Skratite razmake od početka i kraja niza $captcha = trim($_POST["captcha"]); if(!empty ($captcha ))( //Uporedi primljenu vrijednost sa vrijednošću iz sesije. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != ""))( // Ako je captcha nevažeća, vraćamo korisnika na stranicu za autorizaciju i tamo ćemo prikazati poruku o grešci da je unio pogrešan captcha. $error_message = "

Greška! Uneli ste pogrešan captcha

Greška! Polje za unos captcha ne smije biti prazno.

"; // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] = $error_message; // Vratite korisnika na stranicu autorizacije header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: " .$address_site ."/form_auth.php"); //Zaustavi skriptu exit(); ) //(2) Mjesto za obradu mail adrese //(3) Mjesto za obradu lozinke //(4) Mjesto za postavljanje upita bazi podataka ) else ( //Ako captcha nije proslijeđena exit("

Greška! Ne postoji verifikacioni kod, odnosno captcha kod. Možete otići na glavnu stranicu.

"); }

Ako je korisnik ispravno unio verifikacioni kod, idemo dalje, u suprotnom ga vraćamo na stranicu za autorizaciju.

Provjera adrese e-pošte

// Skrati razmake od početka i kraja stringa $email = trim($_POST["email"]); if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Provjerite format primljene email adrese koristeći regularni izraz $ reg_email = " /^**@(+(*+)*\.)++/i"; //Ako format primljene adrese e-pošte ne odgovara regularnom izrazu if(!preg_match($reg_email, $email ))( // Sačuvaj u poruku o grešci sesije.$_SESSION["error_messages"] .= "

Unijeli ste nevažeći email

"; //Vratite korisnika na stranicu za autorizaciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); //Zaustavite izlaz skripte(); ) )else ( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Polje za unos poštanske adrese (e-mail) ne smije biti prazno.

Ne postoji polje za unos e-pošte

Ako je korisnik unio adresu e-pošte u pogrešnom formatu ili je vrijednost polja e-mail adrese prazna, vraćamo ga na stranicu za autorizaciju, gdje prikazujemo poruku o tome.

Provjera lozinke

Sljedeće polje koje treba obraditi je polje lozinke. Na određeno mjesto" //(3) Mjesto za obradu lozinke", mi pišemo:

If(isset($_POST["password"]))( // Skratite razmake od početka i kraja niza $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); // Šifrirajte lozinku $password = md5($password."top_secret"); )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] . = "

Unesite svoju lozinku

Ne postoji polje za unos lozinke

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); //Zaustavi skriptu exit(); )

Ovdje pomoću funkcije md5 () šifriramo primljenu lozinku, jer u bazi podataka imamo lozinke u šifriranom obliku. Dodatna tajna riječ u šifriranju, u našem slučaju " top_secret" mora biti onaj koji je korišten prilikom registracije korisnika.

Sada morate napraviti upit bazi podataka o izboru korisnika čija je mail adresa jednaka primljenoj mail adresi, a lozinka je jednaka primljenoj lozinki.

//Upit u bazu podataka o odabiru korisnika. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = ".$password."""); if(!$result_query_select)( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Greška upita pri odabiru korisnika iz baze podataka

"; //Vrati korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); //Zaustavi skriptu exit(); )else( //Provjeri da li u bazi nema korisnika sa takvim podacima, a zatim prikaži poruku o grešci if($result_query_select->num_rows == 1)( // Ako se uneseni podaci poklapaju sa podacima iz baze podataka, onda sačuvaj login i lozinka za niz sesije. $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Vrati korisnika na početna stranica header("HTTP/1.1 301 Trajno premješteno"); header("Lokacija: ".$address_site."/index.php"); )else( // Sačuvajte poruku o grešci u sesiji. $_SESSION["error_messages"] .= "

Pogrešno korisničko ime i/ili lozinka

"; //Vratite korisnika na stranicu za autorizaciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_auth.php"); //Zaustavite izlaz skripte(); ) )

Izlaz sa lokacije

I zadnja stvar koju implementiramo je izlaznu proceduru. Trenutno u zaglavlju prikazujemo linkove na stranicu za autorizaciju i stranicu za registraciju.

U zaglavlju stranice (datoteka header.php), koristeći sesiju, provjeravamo da li je korisnik već prijavljen. Ako ne, onda prikazujemo linkove za registraciju i autorizaciju, u suprotnom (ako je ovlašten), tada umjesto veza za registraciju i autorizaciju prikazujemo link Izlaz.

Modificiran dio koda iz datoteke header.php:

registracija

Izlaz

Kada kliknete na izlazni link sa sajta, ulazimo u fajl logout.php, gdje jednostavno uništavamo ćelije sa email adresom i lozinkom iz sesije. Nakon toga vraćamo korisnika nazad na stranicu na kojoj je kliknuo na link izlaz.

File Code logout.php:

To je sve. Sada znate kako implementirati i obraditi formulare za registraciju i autorizaciju korisnika na vašoj web stranici. Ovi obrasci se nalaze na gotovo svim stranicama, tako da bi svaki programer trebao znati kako ih kreirati.

Takođe smo naučili kako da potvrdimo ulazne podatke, kako na strani klijenta (u pretraživaču, koristeći JavaScript, jQuery) tako i na strani servera (koristeći PHP jezik). I mi smo naučili implementirati proceduru odjave.

Sve skripte su testirane i rade. Arhivu sa fajlovima ovog malog sajta možete preuzeti sa ovog linka.

U budućnosti ću napisati članak u kojem ću opisati. I također planiram napisati članak gdje ću objasniti (bez ponovnog učitavanja stranice). Dakle, kako biste bili svjesni objavljivanja novih članaka, možete se pretplatiti na moju stranicu.

Ako imate bilo kakvih pitanja, kontaktirajte, također, ako primijetite bilo kakvu grešku u članku, javite mi.

Plan lekcije (5. dio):