Kako stvoriti Ajax-based HTML5 / CSS3 obrazac za kontakt
Kontakt obrazac je smrtonosno bitan za bilo koju web stranicu, jer djeluje kao glasnik koji prosljeđuje mišljenje ili upite posjetitelja webmasteru. Bilo je bezbrojnih obrazaca za kontakt na webu, ali nažalost većina njih vam ne objašnjava unutarnje radne dijelove, pa slijedi detaljan vodič koji će vas naučiti izgraditi napredni kontaktni obrazac koji se temelji na pop tehnologiji, HTML5 i CSS3.
S obzirom na prirodu web-obrasca za kontakt e-pošte, također smo dužni zaroniti u dva zasebna polja primjene, što je PHP backend kod za slanje e-pošte i jQuery funkcija za bogato korisničko sučelje. Na kraju će nam ostati potpuno dinamičan i funkcionalan kontaktni obrazac napisan s kasnijom prilagodbom na umu.
Započnite sada da biste izgradili vlastiti napredni obrazac za kontakt!
Prečac do:
- Demo - Preuzmite pregled onoga što gradite
- Preuzimanje - Preuzimanje svih datoteka (php + css)
Strukturiranje zahtjeva
Da biste započeli, trebat će vam neka vrsta web-poslužitelja. Ako koristite Windows stroj WAMP je vjerojatno najbolja opcija. Mac korisnici imaju sličan program pod nazivom MAMP koji je jednako jednostavan za instalaciju.
Ovi paketi postavit će lokalni poslužitelj na vašem računalu s punim pristupom PHP-u. Alternativno, ako imate vlastiti prostor poslužitelja ili imate potpuni pristup poslužitelju na udaljenoj lokaciji, možete ga koristiti umjesto toga. Nećemo trebati nikakve MySQL baze podataka, što bi trebalo malo pojednostaviti.
Nakon postavljanja poslužitelja stvorite novu mapu u kojoj ćete smjestiti aplikaciju. To možete nazvati što god želite jer to nije štetno ili čak povezano s konačnim proizvodom. Struktura mape koristit će se kada pristupate datotekama u web-pregledniku. Jednostavan primjer bi bio http: //localhost/ajaxcontact/contact.php
Gradimo naše datoteke!
Radit ćemo samo u dvije jezgrene datoteke. Najprije trebamo jezgru .pHP datoteku u kuću ne samo našu aplikacijsku logiku, već i sučelje HTML oznake. Ispod je uzorak koda preuzet iz naše početne datoteke.
HTML5 / CSS Ajax obrazac za kontakt s jQuery
Za početak smo u naš dokument napisali jednostavan odlomak. To uključuje i opće Doctype deklaracija za HTML5 i neke elemente HTML / XML dokumenta. To nije točno potrebno, ali će olakšati proces prikazivanja u starijim (i novijim) preglednicima. Isto tako nikada ne boli ponuditi više informacija.
Malo dalje možemo vidjeti 2 retka ispred naše oznake završetka. Prvi uključuje naše jQuery skripta iz on-line spremišta Google Code. To je potrebno za funkcioniranje pogrešaka u dinamičnoj stranici. Neposredno ispod toga imamo uključivanje osnovnog CSS dokument koji sadrži sve naše stilove stranica.
Unutar tijela našeg dokumenta imamo nekoliko koji sadrže podjele zadržavanje glavnog obrasca za kontakt. Ovdje se nalaze 3 ulazna elementa za ime korisnika, email adresa, i osobna poruka. HTML oznaka je prilično standardna i ne bi trebala zadirkivati umove bilo kojeg srednje razvijenog programera.
Vaša je poruka poslana. Huzzah!
Ovdje imamo osnovnu PHP uvjetni kod ugniježđena u spremnike od nekoliko stranica. Ovo provjerava postavljenu vrijednost naziva varijable
$ emailSenti ako je jednaka true, prikazat će poruku o uspjehu.Unutar HTML obrasca
drugo izjava je ono što će se prikazivati pri učitavanju prve stranice jer u početku neće biti sadržaja za slanje. Ovdje ćemo uključiti i kratka zbirka elemenata oblika i a gumb za slanje.
Pogreška prilikom slanja obrasca
Možda ste primijetili da postoji još jedan uvjetni blok neposredno nakon početnog obrasca. To provjerava da li je ime varijable $ hasError i prikazat će poruku o pogrešci nakon potvrde. Ova rezervna metoda je koristi se samo ako je JavaScript onemogućen u pregledniku i stoga ne mogu generirati dinamičke pogreške.
Do kraja možemo pronaći pojedine PHP varijable provjerava. Izjave reguliraju ako je obrazac već poslan s djelomičnim količinama popunjenih podataka. Ovo je još jedan rezervni sustav koji prikazuje sadržaj već ispunjenih polja - lijep trik za pravilno korisničko iskustvo!
Neposredno nakon završetka našeg obrasca jQuery funkcije napisali smo. Prvo ćemo razgovarati o tome jer su oni zadana implementacija na pageload. Međutim, ako preglednik ne prihvaća JavaScript, onda se po defaultu možemo osloniti na naš PHP kod.
Otvaranje u jQuery
Najlakši način da započnete razgovor o ovoj temi bio bi da uđete ravno unutra. Oborit ću pojedinačne blokove po redak tako da možete vidjeti što skripta zapravo provjerava za.
Međutim, ako se samo izgubite pregledajte datoteke koda projekta. Svi puni blokovi su unaprijed napisani i dobro dokumentirani na jQuery web stranici. Za početak otvaramo naš kod sličan bilo kojem drugom:
Ako ste upoznati s tim povratni pozivi možete primijetiti post () funkcija ima ugrađeni skup parametara. Povratni pozivi su manje funkcije koje se nazivaju nakon odgovora podataka iz druge funkcije.
Tako, na primjer, kada je naš jQuery.post () Funkcija uspješno snima e-poštu koja će pozvati vlastitu unutarnju funkciju za prikaz klizne animacije. Sav taj kod mogao bi biti napisan u svom bloku i premješten negdje drugdje. Međutim, zbog ovog tutoriala mnogo je lakše pisati povratni poziv kao inline funkciju.
Probijamo se iz našeg PHP-a
Posljednja prepreka koju treba spomenuti je logika iza našeg PHP procesora. Ovo je pozadinski sustav koji će zapravo biti pozvati funkciju e-pošte i poslati poruku. Sav kod koji se koristi u donjim primjerima može se naći izravno na vrhu naše glavne .pHP datoteku, prije HTML izlaza.
Postoji i nekoliko internih stilova koji osvježavaju stranicu. Ovdje nema ništa posebno novo tako da nećemo ulaziti ni u jedan detalj. Međutim styles.css Dokument je uključen u projektni kod i sadrži osnovne tehnike CSS3.
Za početak otvorimo PHP klauzulu i provjerimo ako je obrazac čak poslan. POST varijabla “podnijeti” zapravo je skriveno polje za unos dodano na samom kraju našeg obrasca. To je koristan način provjerite je li korisnik nešto poslao ali ne gubimo resurse poslužitelja.
Nakon toga imamo 3 odvojena ako / ostalo provjeru izvješća da biste vidjeli ako je svako polje za unos ispunjeno. Neću ovdje uključiti svaki dio logike jer su svi vrlo prirodni. Međutim, da bih vam dao kratak primjer, u nastavku sam uključio klauzulu o provjeri e-pošte:
// potrebna je valjana adresa e-pošte ako (trim ($ _ POST ['email'])) === ") $ emailError = 'Zaboravili ste unijeti svoju adresu e-pošte.'; $ hasError = true; else if (! ("/^ (. _POST ['email']))) $ emailError = 'Upisali ste nevažeću adresu e-pošte.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP će izrezati sve razmake od vrijednosti i provjeriti da li je nešto ostalo. Ako je tako, imamo detaljan opis Regularni izraz (Regex) da vidimo odgovara li ulazni niz našeg korisnika uzorku e-pošte.
Sigurno ne morate razumjeti kako
preg_match ()radi na izradi ove skripte. To je korisna funkcija odrediti pravila i zahtjeve za uspješnu vrstu podataka, ali zapovijeda naprednim programskim znanjem da doista shvati. U ovom scenariju osiguravamo da korisnik unese samo nekoliko znakova, uključujući i @ zatim simbol 2-4 znaka koji predstavlja a Domena najviše razine.Nakon što sve naše logike prođu i ne vraćamo se nikakvih pogrešaka, vrijeme je da pošaljete našu poruku! Ovaj dio koda postavit će pojedinačne varijable kako bismo prilagodili našu poruku e-pošte i postavili neke zaglavlja pošte za proces.
// nakon pogrešaka neuspjeha pošaljite poruku e-pošte odmah! ako (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Poslana poruka od'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Ime: $ name nEmail: $ e-pošta n Kommentariji: $ comments"; $ headers = 'Od:'. ' <'.$emailTo.'>'. "r". \ t 'Odgovarati na: ' . $ E; pošta ($ emailTo, $ subject, $ body, $ headers); // namjestimo vrijednost boolean završetka na TRUE $ emailSent = true;Ako ste se pitali kako će kod odrediti vašu adresu e-pošte, ovo je dio koji treba popuniti. Prva varijabla u našem skupu nosi naziv
$ emailToi treba sadržavati ovisno o tome što e-mail adresu, koja će primiti poruku.Unutar našeg
$ tijelovarijablu koju koristimo\ nrazdvajač za dodavanje novih linija u poruku. Time se dodaju mali položaji za ime pošiljatelja, email adresa, slijedi pauza za njihov sadržaja poruke. Naravno da biste mogli provoditi vrijeme na prizoru, ali ova struktura dobro funkcionira.Zaključak
Time se zatvara naš vodič za napredni obrazac za kontakt. Ako želite stilizirati svoje elemente u odnosu na moje, možete pogledati moj primjer styles.css unutar koda projekta. Međutim, stranica je strukturirana dovoljno dobro da možete dizajnirati svoj vlastiti izgled i osjećaj vrlo lako.
Slobodno preuzmite izvorni kod i ispitajte što sam učinio bliže. Dobro je slijediti udžbenik, no imati izravan pristup izvoru projekta može biti neprocjenjiv. Također sam uključio kratku tablicu stilova kako bi prilagodbe bile jednostavne, hvala na vašem mišljenju!
