Stiliziranje obrazaca pomoću CSS3

#subscribe, #login( pozicija: apsolutna; vrh: 0px; širina: 88%; padding: 18px 6% 60px 6%; margina: 0 0 35px 0; pozadina: rgb(247, 247, 247); granica: 1px čvrsta rgba(147, 184, 189,0.8) box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0,7), 0px 8px 5px rgba(208, 223, 226, 0); z-indeks: 22;

Ovdje ćemo dodijeliti svojstva zaglavlju:

/**** tekst ****/ #wrapper h1( veličina fonta: 48px; boja: rgb(6, 106, 117); padding: 2px 0 10px 0; porodica fontova: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Trenutno samo webkit podržava background-clip:text; **/ #wrapper h1( background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px -webkit-background-clip: text ) #wrapper h1:after( content:); " "; širina bloka: 100% pozadina: linearni gradijent (lijevo, rgba (147,184,189,0) r; 147,184,189,0,8) 79%, rgba(147,184,189,0) 100%);

Imajte na umu da danas samo pretraživači sa podrškom za webkit background-clip:text, tako da ćemo napraviti prugastu pozadinu samo za webkit i vezati je za H1 zaglavlje. Od parametra background-clip:text radi samo u Webkit pretraživačima, odlučio sam da radim samo sa svojstvima webkit-a. Zato sam podijelio CSS na dva dijela i koristio samo gradijent webkit-a. Međutim, ne biste trebali samo koristiti webkit na svojim web stranicama! Tako, na primjer, parametar -webkit-text-fill-color: transparentan omogućava nam da imamo transparentnu pozadinu, ali samo za webkit pretraživače, svi ostali pretraživači će zanemariti ovo svojstvo.

Također smo napravili tanku liniju ispod naslova koristeći element pseudo-klase :after. Koristili smo gradijent visine 2px i smanjili neprozirnost na ivicama na nulu.

Sada ćemo se pobrinuti za polja za unos i učiniti da izgledaju lijepo.

/**** napredni stil unosa ****/ /* čuvar mjesta */ ::-webkit-input-placeholder ( boja: rgb(190, 188, 188); font-style: kurziv; ) input:-moz- placeholder, textarea:-moz-placeholder( boja: rgb(190, 188, 188); font-style: italic; ) ulaz (outline: nema; )

Prvo ćemo stilizirati margine i ukloniti potez. Ali budite oprezni: nacrt pomaže korisniku da shvati na kojem se polju nalazi. Ako ga uklonite, morate primijeniti svojstva: aktivno i: fokus.

/* sva polja isključuju submit i checkbox */ #wrapper input:not())( širina: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; granica: 1px solid rgb(178, 178, 178); box -sizing: granica-radijus: 0px 1px 0px rgba(168, 168, 168, 0,6) umetnuti: sve 0,2s input:not(); fokus( granica: 1px solid rgba(91, 90, 90, 0.7); pozadina: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168 , 168, 168, 0.9) inset 0.9)

Ovdje smo koristili pseudo klasu:ne da stiliziramo sva polja osim okvira za potvrdu. Osim toga, odlučio sam ukloniti potez i dodao svojstva:focus i:active.

Sada je vrijeme za zabavu: font sa ikonama. Pošto ne možemo da koristimo pseudoklase :before i :after, dodaćemo ikonu parametru oznake, a zatim je postaviti u polje. Koristit ću fontomas biblioteku. Ikone možete sami uskladiti sa odgovarajućim slovom. Zapamti atribut ikona podataka? Ovdje trebate umetnuti slovo. Koristio sam data-icon='u' za prijavu, 'e' za e-poštu, 'p' za lozinku. Nakon što sam odabrao slova, preuzeo sam font i koristio generator fontova fontsquirrel da ga konvertujem u format pogodan za @font-face.

@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** magični trik! **/ :after ( sadržaj: attr(data-icon); font-family: "FontomasCustomRegular"; boja: rgb(106, 159, 171); pozicija: apsolutna; lijevo: 10px; gore: 35px; širina: 30px; )

To je sve. Ne morate imati posebnu klasu za svaku ikonu. Koristili smo parametar sadržaj: attr(ikona-podaci) da dobijete slovo iz atributa ikone podataka. Dakle, potrebno je samo dodijeliti font, odabrati boju i postaviti ikonu.

Sada dodijelimo pravila za dugme za slanje obrasca.

/*stil oba dugmeta*/ #wrapper p.button input( širina: 30%; kursor: pokazivač; pozadina: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow ",Arial,sans-serif; boja: #fff; veličina fonta: 24px; granica: 1px solid rgb(28, 108, 122); margin-bottom: 10px; sjena teksta: 0 1px 1px rgba(0, 0 , 0, 0,5 radijus okvira: 0px 1px 6px 4px rgba(0, 0, 0, 0,07) umetnuti, 0px 0px 3px rgb(254, 254, 254 px 3px); (210, 210, 210 prijelaz: sve 0.2s linearno ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. dugme input:focus(pozadina: rgb(40, 137, 154); pozicija: relativna; vrh: 1px; granica: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0 , 0, 0.2) umetnuti ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )

Trik je u korištenju senke okvira za kreiranje više okvira. Naravno, možete koristiti samo jedan okvir, ali možete koristiti i nekoliko. Koristit ćemo parametar dužine da kreiramo "lažni" drugi bijeli okvir, širine 3px, bez zamućenja.

Sada stilizirajmo potvrdni okvir, ovdje nećemo raditi ništa neobično:

/* stilizirajte polje za potvrdu „zapamti me“*/ .keeplogin( margin-top: -5px; ) .keeplogin ulaz, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label( širina: 80%; )

Stiliziranje podnožja obrasca korištenjem više linearnih gradijenata za stvaranje prugastog gradijenta.

P.change_link( pozicija: apsolutna; boja: rgb(127, 124, 124); lijevo: 0px; visina: 20px; širina: 440px; padding: 17px 30px 20px 30px; veličina fonta: 16px; poravnanje teksta: desno; border-top: 1px solid rgb(219, 229, 232) border-radius: rgb(225, 234, 235); 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247 px) (247, 247) display: font-weight: podebljano: rgb (247, 241) color: rgb (29, 162, 193); border-radius: 1px solid rgb(203, 213, 214) pozadina: rgb (247, 247); 198) #wrapper p.change_link a:active( pozicija: relativna; vrh: 1px; )

Sada možete vidjeti da imamo dva lijepa oblika, ali želimo da samo jedan od njih bude prikazan. Vrijeme je za animaciju!

Kreiranje animacije

#register( z-indeks: 21; neprozirnost: 0; )

Zapamtite da obrazac za prijavu ima z-indeks: 22? Za drugi obrazac dodijelit ćemo ovaj parametar 21 kako bismo ga stavili “ispod” obrasca za prijavu.

Sada zabavni dio: mijenjamo obrasce koristeći pseudo class:target. Morate razumjeti jednu stvar o :target: mi ćemo koristiti sidra da ga pomjerimo. Normalno ponašanje sidra je da skoči na određeni element stranice. Ali mi to ne želimo, samo želimo da zamenimo oblike. Ovdje u pomoć dolazi naš trik korištenja dvije veze na vrhu stranice. Umjesto da nas direktno usmjeravamo na drugu formu i riskiramo efekat skoka, linkovima ćemo dati parametar prikaz: nema. Ovo će vam pomoći da izbjegnete skakanje. Otkrio sam ovaj trik na stranici: CSS3 create (francuski).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-indeks: 22; naziv-animacije: fadeInLeft; kašnjenje animacije: .1s; )

Evo šta se dešava: kada kliknemo na dugme Pridružite se, idemo na #toregister. Zatim se javlja animacija i tek onda prelazimo na #register element. Koristimo animaciju tzv fadeInLeft. Budući da "skrivamo" oblik koristeći nultu transparentnost, primijenit ćemo animaciju koja će se postepeno pojavljivati. Također smo promijenili z-indeks tako da se pojavljuje na vrhu drugog oblika. Isto se dešava i za drugi oblik.
Evo koda za animaciju. Koristili smo CSS3 okvir za animaciju od Dan Eden-a i prilagodili ovaj okvir za naš tutorijal.

Animate( trajanje-animacije: 0,5 s; funkcija-vremenske-vremenske animacije: jednostavnost; način punjenja animacije: oba; ) @keyframes fadeInLeft ( 0% ( neprozirnost: 0; transformacija: translateX(-20px); ) 100% ( neprozirnost : 1; transformacija: translateX(0);

Oblik koji "nestane" imat će animaciju blijeđenja s lijeve strane:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register(ime-animacije: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( neprozirnost: 1; transform: translateX(0); ) 100% ( neprozirnost : 0 transformacija: translateX(-20px);

Sada možete koristiti druge animacije iz datoteke animate.css Dana Edena: samo promijenite .animate klasu i nazive animacija. Također ćete pronaći nekoliko drugih animacija na kraju animate-custom.css datoteke.

To je sve, prijatelji. Nadam se da ste uživali u ovom tutorijalu!

Imajte na umu da je u nekim pretraživačima opcija background-clip:text nije podržano. Animacije ne rade u Internet Exploreru 9. U Internet Explorer-u 8 i starijim verzijama, pseudo-class:target pseudo-klasa nije podržana, tako da ovaj efekat tamo uopšte neće raditi.

P.S. Rado ću prihvatiti sve komentare u vezi prijevoda u ličnoj poruci. Hvala vam!

Oznake: Dodajte oznake

Artemy Lebedev.

Na tastaturi jedan crtica, obično je desno od nule i iznad slova “Z” i “X”. Neupućeni to zovu naizmjenično crtica, minus ili crtica. Lebedev nam objašnjava šta je to četiri(s obzirom na dvije vrste crtica) različite simbole. Zapravo njih najmanje devet, a ja ću vam sada reći o ovome.

U vezi minus(−), mnogi ljudi već znaju sve o tome: znak minus se koristi u matematičkim izrazima, ima istu širinu kao bilo koji broj, poravnat je sa visinom velikog slova, za razliku od crtica i crtica, i pisan je u HTML-u kao − .

U ovom trenutku svi obično prelaze na tablu. Ali čekajte, još nismo pokrili tri simbola!

Koji simbol se koristi za pisanje telefonskih brojeva (555‒41‒72)? Crtica, kažete; ali ne! Za ovo postoji poseban simbol: digitalna crtica(crtica). Izgleda (‒) skoro kao minus, ali nije minus.

Možete pitati: zašto onda ne možete koristiti znak minus, jer izgleda potpuno isto? Zato što je znak minus znak za oduzimanje, a u telefonskom broju se ništa ne oduzima ni od čega. Iz istog razloga zbog kojeg biste trebali koristiti em za isticanje teksta umjesto i . To se ne može objasniti, može se samo znati.

Digitalna crtica ima šifru U+2012 i napisana je u HTML-u kao ‒ .

O simbol crtice, koji se naziva i meka crtica, takođe je poznat mnogima. Ovaj simbol, označen u HTML-u kao -, stavlja se u riječi između slogova na onim mjestima gdje se može napraviti crtica. Ne prikazuje se na ekranu, osim kada dođe do kraja reda; u ovom slučaju, pretraživač (kažu da je čak i Firefox naučio da to radi od treće verzije) ne stavlja crtu cijelu riječ, već stavlja crticu i stavlja crticu ostatku riječi.

Ovo posebno pomaže kod dugih riječi, gdje hifeniranje stvara ogromne prazne prostore na desnoj strani ekrana. Ogroman nedostatak crtice je u tome što ju je nezgodno postavljati ručno (međutim, programi za automatsko kucanje mogu to da podnesu) i što njena upotreba zatrpava i čini izvorni kod teksta nečitljivim (zato je bolje da se postavljaju crtice radi CMS u fazi generisanja HTML koda iz teksta pohranjenog u bazi podataka).

Još jedan simbol nalik crtici je crtica (⁃), koja se koristi kao marker liste ( dash bullet). Studio Lebedev s pravom napominje da u ruskoj tipografskoj tradiciji ne postoji takva stvar kao što je metak (što znači tradicionalni krugovi sa kvadratima), i predlažu upotrebu (duge) crtice kao markera; kao što vidite, to je upravo ono što rade (ili su radili) na svojoj web stranici, pa čak imaju i članak koji opisuje kako to učiniti.

U stvari, postoji poseban znak za oznake liste sa kodom U+2043 (međutim, Lebedev tvrdi da se to ne odnosi na rusku tipografiju). U HTML-u, pravljenje takvog markera za listu je prilično jednostavno pomoću CSS-a:

Ul( stil liste: nema unutra; ) ul>li: prije ( sadržaj: "\2043"; margina lijevo: -1ex; margina desno: 1ex; )

(Naravno, gornji kod nije savršen i radit će samo u pravim pretraživačima, ali nadam se da ste shvatili ideju.)

Sada konačno možemo prijeći na crticu; ovdje je sve već izlizano: razlika između en dash(-, crtica, crtica širine slova “n”, -) i em dash(—, em crtica, crtica širine slova „M“, —). Poznato je da se u ruskoj tipografiji koristi isključivo em crtica (iako se vodi debata o mogućnosti upotrebe crte u numeričkim rasponima), dok na zapadu najčešće preferiraju crtu.

Em crtica se također koristi u ruskom u dijalozima. Na Zapadu se u tu svrhu često koristi poseban simbol horizontalna linija (―):

― Je m'ennuie tellement, dit-elle.

― Cela n'est pas de ma faute, rétorqua-t-il.

Dakle, devet različitih linija:

I, poređenja radi, u jednom redu:
- ‐
−
‒
­
⁃
-
—

U ovom članku ćete naučiti kako kreirati obrazac za registraciju i autorizaciju koristeći HTML, JavaScript, PHP i MySql. Ovakvi obrasci se koriste na gotovo svakoj web stranici, bez obzira na njen tip. Napravljeni su za forum, online prodavnicu, društvene mreže (kao što su Facebook, Twitter, Odnoklassniki) i mnoge druge vrste stranica.

Ako imate web stranicu na svom lokalnom računalu, nadam se da već imate lokalni server je instaliran i radi. Bez toga ništa neće raditi.

Kreiranje tabele u bazi podataka

Da bismo implementirali registraciju korisnika, prije svega nam je potrebna Baza podataka. Ako ga već imate, onda odlično, 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.

U članku sam također objasnio kako napraviti tabelu u bazi podataka.

Prije kreiranja tabele, moramo odrediti koja će polja sadržavati. Ova polja će odgovarati poljima iz obrasca za registraciju. korisnika Dakle, pomislili smo, zamislili koja bi polja imala naš obrazac i napravili tabelu

• sa ovim poljima: id sa ovim poljima:- Identifikator. Polje
• Svaka tabela u bazi podataka treba da ga ima. ime
• - Da sačuvam ime. prezime
• - Da sačuvam prezime.- Da sačuvate poštansku adresu. Koristićemo e-mail kao login, tako da ovo polje mora biti jedinstveno, odnosno imati UNIQUE 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 je 0.
• lozinka- Da sačuvate lozinku.

Ako želite da vaš formular za registraciju ima još neka polja, također ih možete dodati ovdje.

To je to, naš sto korisnika spreman. Pređimo na sljedeću fazu.

Veza sa bazom podataka

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

U folderu naše stranice kreirajte datoteku s imenom dbconnect.php, i napišite sljedeću skriptu u njoj:

Greška DB veze. Opis greške: ".mysqli_connect_error()."

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

Obratite pažnju na varijablu $address_site, ovdje sam naznačio naziv moje test stranice na kojoj ću raditi. Molimo Vas da u skladu s tim naznačite naziv Vaše stranice.

Struktura sajta

Pogledajmo sada HTML strukturu našeg sajta.

Premjestit ćemo zaglavlje i podnožje stranice u zasebne datoteke, header.php I footer.php. Uključićemo ih na sve stranice. Naime na glavnoj stranici (file index.php), na stranicu sa formularom za registraciju (fil form_register.php) i na stranicu sa formularom za autorizaciju (fil form_auth.php).

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

Sadržaj datoteke header.php:

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.

Idite na bazu podataka (u phpMyAdmin), otvorite strukturu tabele korisnika i pogledajte koja polja su nam potrebna. To znači da su nam potrebna polja za unos imena i prezimena, polje za unos poštanske adrese (Email) i polje za unos lozinke. A iz sigurnosnih razloga, dodaćemo polje za unos captcha.

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

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

I još nešto, ako je korisnik već autorizovan, pa iz radoznalosti ide direktno na stranicu za registraciju pisanjem u adresnoj traci pretraživača site_address/form_register.php, tada ćemo u ovom slučaju, umjesto obrasca za registraciju, prikazati zaglavlje da je već registriran.

Općenito, kod datoteke form_register.php imamo ovo:

Već ste registrovani

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

Korišćenjem potreban atribut, sva polja smo učinili obaveznim.

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

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

Pogledajmo kod fajla 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, da bi captcha radila ispravno, moramo kreirati folder fontove, i postavite 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.

Provjera valjanosti e-pošte pomoću jQueryja

Bilo koji obrazac treba provjeriti ispravnost 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 poštanska adresa bude važeća.

Za ovo polje za unos postavljamo tip e-pošte (type="email"), što nas malo upozorava na neispravne formate. Ali to nije dovoljno, jer preko kodnog inspektora koji nam pruža pretraživač možemo lako promijeniti vrijednost atributa tip With - Da sačuvam prezime. on tekst, i to je to, naš ček više neće važiti.

I u ovom slučaju moramo izvršiti pouzdaniju provjeru. Da bismo to uradili, koristićemo jQuery biblioteku iz JavaScript-a.

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

Odmah nakon ovog reda, dodaćemo kod za validaciju e-pošte. Ovdje ćemo dodati kod za provjeru dužine unesene lozinke. Njegova dužina mora biti najmanje 6 znakova.

Koristeći ovu skriptu, provjeravamo ispravnost unesene adrese e-pošte. Ako je korisnik unio pogrešnu e-poštu, prikazujemo poruku o grešci o tome i onemogućujemo dugme za slanje obrasca. Ako je sve u redu, uklanjamo grešku i aktiviramo dugme za slanje obrasca.

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

Registracija korisnika

Obrazac šaljemo u fajl na obradu register.php, putem POST metode. Ime ove datoteke rukovanja je navedeno 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 povežemo datoteku koju smo ranije kreirali dbconnect.php(U ovom fajlu smo uspostavili vezu sa bazom podataka). Takođe, hajde da odmah proglasimo ćelije error_messages I uspjeh_poruke u globalnom nizu sesija. IN error_mesages zabilježit ćemo sve poruke o greškama koje se javljaju tokom obrade obrasca i u succes_messages, snimaćemo radosne 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 možda ima ideju da ide direktno na ovu datoteku tako što će upisati sljedeću adresu u adresnu traku pretraživača: http://site_address/register.php

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

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

Greška! glavna stranica.

Captcha vrijednost u sesiji je dodana kada je generirana, u datoteci captcha.php. Kao podsjetnik, pokazat ću vam ponovo ovaj dio koda iz datoteke captcha.php, gdje se captcha vrijednost dodaje sesiji:

Sada idemo na samu verifikaciju. U fajlu register.php, unutar if bloka, gdje provjeravamo da li je kliknuto na dugme "Registriraj se", odnosno gdje je naznačen komentar "" // (1) Prostor za sljedeći dio koda"pišemo:

//Provjera primljene captcha //Skratite razmake od početka i kraja reda $captcha = trim($_POST["captcha"]);

Greška! if(isset($_POST["captcha"]) && !empty($captcha))( //Uporedi primljenu vrijednost sa vrijednošću iz sesije. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Ako captcha nije ispravna, vraćamo korisnika na stranicu za registraciju i tamo ćemo mu prikazati poruku o grešci da je unio pogrešan captcha $error_message = ".

Greška!"; // 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(); "

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 imena odgovaraju nazivima polja za unos iz našeg obrasca.

Ako ćelija postoji, tada skraćujemo razmake od početka i kraja reda iz ove ćelije, u suprotnom preusmjeravamo korisnika nazad na stranicu s obrascem za registraciju.

Zatim, nakon što smo skratili razmake, dodamo red u varijablu i provjerimo da li je ova varijabla prazna, onda idemo dalje, u suprotnom preusmjeravamo korisnika nazad na stranicu sa formularom za registraciju. Zalijepite ovaj kod na navedenu lokaciju"".

// (2) Prostor za sljedeći dio koda

/* Provjerite da li postoje podaci poslani iz obrasca u globalnom nizu $_POST i umotajte poslane podatke u regularne varijable.*/ if(isset($_POST["first_name"]))( //Skratite razmake od početka i kraj stringa $first_name = trim($_POST["first_name"] //Provjeri da li je varijabla praznina 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

Molimo unesite svoje prezime

Polje za prezime nedostaje

Unesite svoju e-poštu

Unesite svoju lozinku

Od posebnog značaja je teren - Da sačuvam prezime.. Moramo provjeriti format primljene poštanske adrese i njenu jedinstvenost u bazi podataka. Odnosno, postoji li već registrovan korisnik sa istom adresom e-pošte?

Na navedenoj lokaciji" // (3) Lokacija 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"] .= "

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

"; //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"] .= "

"; //Vratite korisnika na stranicu za registraciju header("HTTP/1.1 301 Trajno premješten"); header("Lokacija: ".$address_site."/form_register.php"); ) /* zatvaranje odabira */ $ result_query-> close() //Zaustavi skriptu exit() /* zatvaranje odabira */ $result_query->close(); I tako, završili smo sa svim provjerama, vrijeme je za dodavanje korisnika u bazu podataka. Na navedenoj lokaciji"" dodajte sljedeći kod:

// (4) Mjesto za kod za dodavanje korisnika u bazu podataka

//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."")");

Greška u zahtjevu za dodavanje korisnika u bazu podataka
Sada se možete prijaviti koristeći svoje korisničko ime i lozinku.

Ako je došlo 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 ovaj put je ugodnije, odnosno javljamo korisniku da je registracija uspjela. I mi ga preusmjeravamo na stranicu sa formularom za autorizaciju.

Skripta za provjeru formata adrese e-pošte i dužine lozinke je u datoteci header.php, tako da će se primjenjivati ​​i na polja iz ovog obrasca.

Sesija je također pokrenuta u datoteci header.php, dakle u fajlu form_auth.php Nema potrebe za pokretanjem sesije, jer ćemo dobiti grešku.

Kao što sam već rekao, ovdje radi i skripta za provjeru formata adrese e-pošte 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 loginće postati neaktivan.

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

Autorizacija korisnika

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

I tako, otvorite datoteku auth.php i napisati kod za obradu formulara za autorizaciju. Prva stvar koju trebate učiniti je pokrenuti sesiju i povezati datoteku dbconnect.php za povezivanje sa bazom podataka.

//Objavite ćeliju za dodavanje grešaka koje se mogu pojaviti prilikom obrade obrasca.

$_SESSION["error_messages"] = "";

Greška!//Proglasite ćeliju za dodavanje uspješnih poruka $_SESSION["success_messages"] = "";

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

Greška! if(isset($_POST["captcha"]) && !empty($captcha))( //Uporedi primljenu vrijednost sa vrijednošću iz sesije. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // Ako captcha nije ispravna, vraćamo korisnika na stranicu za registraciju i tamo ćemo mu prikazati poruku o grešci da je unio pogrešan captcha $error_message = ".

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

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.

Provjeravam poštansku adresu

//Skrati razmake od početka i kraja reda $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"] .= "

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

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

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

Provjera lozinke

Sljedeće polje koje treba obraditi je polje lozinke. Na navedeno mjesto" //(3) Mjesto za obradu lozinke“, 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

Polje za lozinku nedostaje

Ovdje koristimo funkciju md5() za šifriranje primljene lozinke, budući da su naše lozinke u šifriranom obliku u bazi podataka. 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 za odabir korisnika čija je adresa e-pošte jednaka primljenoj e-mail adresi i čija je lozinka jednaka primljenoj lozinki.

//Upit u bazi podataka na osnovu odabira korisnika.

$result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = ".$password.""");

Netačna prijava i/ili lozinka

Izađite sa stranice

I posljednja stvar koju implementiramo je procedura napuštanja stranice. Trenutno u zaglavlju prikazujemo linkove na stranicu za autorizaciju i stranicu za registraciju.

U zaglavlju stranice (datoteka header.php), pomoću sesije provjeravamo da li je korisnik već ovlašten. Ako nije, onda prikazujemo linkove za registraciju i autorizaciju, u suprotnom (ako je ovlašten), onda umjesto veza za registraciju i autorizaciju prikazujemo link Izađi.

Modificiran dio koda iz datoteke header.php:

Registracija

Izađi

Kada kliknete na izlaznu vezu sa sajta, bićemo odvedeni 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 kliknut na link izlaz.

Šifra datoteke logout.php:

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

Takođe smo naučili kako da validiramo ulazne podatke, kako na strani klijenta (u pretraživaču, koristeći JavaScript, jQuery) tako i na strani servera (koristeći PHP). I mi smo naučili sprovesti proceduru napuštanja lokacije.

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 informisani o objavljivanju novih članaka, možete se pretplatiti na moju web stranicu.

Ako imate bilo kakvih pitanja, kontaktirajte me, a ako primijetite bilo kakvu grešku u članku, javite mi.

Plan lekcije (5. dio):

1. Kreiranje HTML strukture za formular za autorizaciju
2. Primljene podatke obrađujemo
3. U zaglavlju stranice prikazujemo pozdrav korisnika

Da li vam se dopao članak?

Nisu dozvoljeni svi znakovi koje vidite na tastaturi da se koriste u tekstu HTML dokumenta. Međutim, ovo je logično. Ako svaka oznaka počinje znakom (<) и заканчивается символом (>), onda je sasvim logično da se ovi znakovi ne mogu specificirati unutar običnog teksta. Ovi znakovi imaju posebno značenje u HTML dokumentima. Kada ih pregledač vidi, misli da su HTML oznake i pokušava ih protumačiti kao takve.
Kako bi se riješio problem dodavanja znakova koji su zabranjeni za unos u tekst HTML dokumenta, razvijen je skup specijalnih znakova - sekvenci koje zamjenjuju znakove koji su zabranjeni za unos sa tastature. Znakovi koji nisu prisutni na vašoj tastaturi također se mogu zamijeniti posebnim znakovima. Svaka takva sekvenca (mnemonička veza) mora započeti znakom ampersanda (&) i završiti tačkom i zarezom (;). Između (&) i (;) možete unijeti:

• ime posebnog znaka (&name;);
• numerički kod koji se unosi iza znaka (), odnosno kada kucate poseban znak navođenjem njegovog numeričkog koda, potrebno je da koristite sledeći unos: (&code;);

Nerazbijajući prostor

Glavna svrha nerazbijenog prostora () (iz neprekidnog prostora) — odvojene riječi, ali zabranite novi red u ovom trenutku. Pošto veličina prozora pretraživača nije konstantna, novi red u paragrafu se pojavljuje automatski. U tom slučaju, pretraživač će prekinuti liniju na svakom mjestu gdje postoji razmak ili crtica. Prema pravopisnim pravilima, postoje jezičke strukture koje se ne mogu razbiti. Konstrukcije s nerazbijenim prostorom, na primjer, uključuju:

• prezimena sa inicijalima;
• em crtice kojima prethodi riječ;
• jednosložne riječi iza kojih slijedi riječ;
• brojevi praćeni mjernim jedinicama.

• 15 m/s
• 100 km/h

Kao što već znate, u HTML-u se nekoliko uzastopnih regularnih razmaka zamjenjuje jednim razmakom. Ako upišete 10 razmaka u tekstu, pretraživač će ukloniti njih 9. Za dodavanje stvarnih razmaka u svoj tekst, možete koristiti razmak bez prekida () .

Citati.

U štampi postoje tri vrste navodnika: dvostruki ugaoni navodnici ili navodnici „riblja kost“ (“ ”), tipografski navodnici (“ ”) i rukom pisani „stope“ (“ »). Kada radite s programskim kodovima, koristit ćete dvostruke ravne navodnike (" ") i jednostruke ravne navodnike (" ").
Prema tradiciji, glavna vrsta navodnika u ruskom jeziku su „božićna drvca“. U HTML-u božićna drvca odgovaraju simbolima « I » . U mnogim publikacijama, tipografski navodnici i dvostruki ravni navodnici se također koriste umjesto riblje kosti.
Lijevi i desni tipografski navodnici odgovaraju simbolima “ I ” odnosno donji lijevi navodnik - „ .
Direktni dvostruki navodnici odgovaraju posebnom znaku " .

Upotreba posebnih znakova navodnika prikazana je u sljedećem primjeru:

Primjer: korištenje citata

Crtica i crtica.

U štampi postoje tri vrlo slična znaka: em dash, end crtica i crtica. Od toga postoji samo jedan na tastaturi računara - crtica. To je ono što se obično koristi u svim slučajevima kada u tekst treba umetnuti crticu. Međutim, potrebno je poštovati određena pravila interpunkcije u pogledu upotrebe ovih znakova.
Dakle, crtica (-) se koristi samo unutar riječi ili između brojeva. Em crtica (—) se stavlja između riječi u rečenici i odvaja se od ovih riječi razmacima. Em crtica odgovara mnemoničkoj vezi — . Krajnja crtica (-) se koristi između brojeva bez slova ili između riječi koje su napisane velikim slovima, a koristi se i kao znak minus u matematičkim formulama. Nema razmaka između crtice i riječi. Krajnja crtica odgovara mnemoničkoj vezi - .

Upotreba crtice i crtice prikazana je u sljedećem primjeru:

Primjer: specijalni znakovi - i -

• Probajte sami »

Vrijeme je novac...

Otvaranje web stranice traje predugo.
Trebalo bi da se učita za 2-4 sekunde.
Vrijeme je novac...

Lista nekih popularnih HTML specijalnih znakova

Vrste specijalnih znakova

Na običnoj tastaturi nećete pronaći većinu matematičkih, tehničkih, geometrijskih i drugih posebnih znakova.
Da biste primijenili takve simbole na HTML stranici, možete koristiti njihova odgovarajuća mnemonička imena.

Sljedeći primjer pokazuje kako se isti simbol može prikazati korištenjem različitih kodova.