Kako ustvariti kontaktni obrazec za HTML5 / CSS3, ki temelji na Ajaxu
Kontaktni obrazec je smrtno bistven za katero koli spletno stran, saj deluje kot posrednik, ki posreduje mnenje ali povpraševanje obiskovalcev spletnemu skrbniku. Na spletu je bilo nešteto kontaktnih obrazcev, vendar jih na žalost večina ne razlaga notranjih delovnih delov, zato vam sledi podrobna vadnica, ki vas bo naučila izdelati napreden kontaktni obrazec na osnovi pop tehnologije, HTML5 in CSS3.
Glede na naravo spletnega obrazca za elektronsko pošto, se moramo potopiti v dve ločeni aplikacijski polji, ki sta PHP backend koda za pošiljanje e-poštnih in jQuery funkcij za bogat uporabniški vmesnik. Do konca bomo imeli popolnoma dinamičen in funkcionalen kontaktni obrazec, napisan z poznejšo prilagoditvijo v mislih.
Začnite zdaj in ustvarite lasten napredni obrazec za stik!
Bližnjica do:
- Demo - Prikažite si, kaj gradite
- Prenos - Prenesite vse datoteke (php + css)
Strukturiranje vloge
Če želite začeti, boste potrebovali vrsto spletnega strežnika za delo. Če uporabljate stroj Windows, je WAMP verjetno vaša najboljša možnost. Uporabniki Mac-a imajo podoben program z imenom MAMP, ki je enako enostaven za namestitev.
Ti paketi bodo na vašem računalniku nastavili lokalni strežnik s polnim dostopom do PHP-ja. Namesto tega lahko uporabite prostor strežnika ali pa imate popoln dostop do strežnika na oddaljeni lokaciji. Ne bomo potrebovali nobene baze podatkov MySQL, kar bi moralo nekaj poenostaviti.
Ko je strežnik nastavljen ustvarite novo mapo za namestitev aplikacije. To ime lahko poimenujete karkoli želite, saj to ni škodljivo ali celo povezano s končnim izdelkom. Struktura mape bo uporabljena, ko boste dostopali do datotek v spletnem brskalniku. Preprost primer bi bil http: //localhost/ajaxcontact/contact.php
Zgradimo naše datoteke!
Delali bomo samo v dveh osnovnih datotekah. Najprej bomo potrebovali jedro .php Datoteka za shranjevanje ne le logike naše aplikacije, temveč tudi vmesnik HTML oznake. Spodaj je vzorec kode vzet iz naše začetne datoteke.
Kontaktni obrazec HTML5 / CSS Ajax z jQuery
Za začetek smo napisali preprost naslov v naš dokument. To vključuje splošno Deklaracija Doctype za HTML5 in nekaj elementov dokumenta HTML / XML. To ni ravno zahtevano, vendar bo olajšalo proces upodabljanja v starejših (in novejših) brskalnikih. Prav tako nikoli ne boli ponuditi več informacij.
Malo naprej navzdol lahko vidimo 2 vrstici tik pred zaključno oznako. Prvi vključuje naše jQuery skript iz spletnega skladišča Google Code. To je potrebno za delovanje naših dinamičnih napak strani. Neposredno pod tem je vključitev osnovnega Dokument CSS vsebuje vse sloge strani.
Znotraj našega dokumenta imamo nekaj ki vsebujejo delitve zadržanje glavnega kontaktnega obrazca. To vsebuje 3 vhodne elemente za ime uporabnika, email naslov, in osebno sporočilo. Oznaka HTML je precej standardna in ne bi smela podžigati pomena vmesnega razvijalca.
Vaš e-poštni naslov je bil poslan. Huzzah!
Tukaj imamo osnovno Pogojna koda PHP ugnezdeno v nekaj vsebnikih strani. To preverja nastavljeno vrednost spremenljivke imenom
$ emailSentin če je enaka resnici, bo prikazala sporočilo o uspehu.Znotraj našega obrazca HTML
The drugače stavek je tisto, kar se bo izvajalo ob nalaganju prve strani, ker najprej ne bo vsebine za pošiljanje. V njem bomo vključili: a kratka zbirka elementov obrazcev in a gumb za pošiljanje.
Napaka pri pošiljanju obrazca
Morda ste opazili še eno pogojni blok neposredno po začetni obliki. To preverja ime spremenljivke $ hasError in bo ob potrditvi prikazal sporočilo o napaki. Ta nadomestna metoda je Uporablja se samo, če je JavaScript onemogočen v brskalniku in tako ne more ustvariti dinamičnih napak.
Vso pot navzdol lahko najdemo posamezne spremenljivke PHP preverjajo. Izjave urejajo, če je obrazec že poslan z delnimi količinami podatkov, ki so izpolnjeni. To je še en nadomestni sistem, ki prikazuje vsebino že izpolnjenih polj - lep trik za pravilno uporabniško izkušnjo.!
Neposredno po zaključku našega obrazca je nekaj Funkcije jQuery napisali smo. Najprej se bomo pogovarjali o teh stvareh, ker so to privzeta izvedba na pageload. Če pa brskalnik ne sprejme JavaScripta, se lahko privzeto zanašamo na PHP kodo.
Odpiranje v jQuery
Najlažji način, da začnete govoriti o tej temi, je, da se potopite noter. Razčistil bom posamezne bloke po vrsticah, tako da boste lahko videli, kaj skript dejansko preverja.
Vendar, če se izgubiš samo pregledati datoteke kode projekta. Vsi polni bloki so vnaprej napisani in dobro dokumentirani na spletni strani jQuery. Za začetek odpiramo kodo, ki je podobna vsem drugim:
Če ste seznanjeni z povratne klice lahko opazite objavi () funkcija ima vgrajen niz parametrov. Povratni klici so manjše funkcije, ki se kličejo na odziv podatkov iz druge funkcije.
Tako na primer, ko je naš jQuery.post () Funkcija uspešno posname e-pošto, da pokliče svojo notranjo funkcijo za prikaz drsne animacije. Vso to kodo bi lahko napisali v svojem bloku in premaknili drugam. Vendar pa je zaradi te vadnice veliko lažje pisati povratni klic kot funkcijo inline.
Preteklo naše PHP
Končna ovira, ki jo je treba omeniti, je logiko za procesorjem PHP. To je podporni sistem, ki bo dejansko pokličete poštno funkcijo in pošljite sporočilo. Vso kodo, uporabljeno v spodnjih primerih, lahko najdete neposredno na vrhu našega glavnega .php datoteko, pred katerim koli izhodom HTML.
Obstaja tudi nekaj notranjih stilov, ki osvežijo stran. Tukaj ni ničesar posebej novega, da ne bi šli v nobeno podrobnost. Vendar pa styles.css Dokument je vključen v projektno kodo in vsebuje osnovne tehnike CSS3.
Za začetek odpremo naš PHP člen in preverimo če je bil obrazec predložen. The POST spremenljivko “predložila” je bilo dejansko skrito vnosno polje, dodano na samem koncu našega obrazca. To je uporaben način preverite, ali je uporabnik karkoli poslal vendar zato ne zapravljamo virov strežnikov.
Po tem imamo tri ločene če potem preverjanje izjave za prikaz če je vsako vnosno polje izpolnjeno. Tukaj ne bom vključil vsakega logičnega dela, saj so vsi zelo ponavljajoči se naravi. Da pa vam predstavim kratek primer, sem spodaj navedel klavzulo o preverjanju e-pošte:
// potrebujemo veljaven e-poštni naslov, če (trim ($ _ POST ['email'])) === ") $ emailError = 'Ste pozabili vnesti svoj e-poštni naslov.'; $ hasError = true; else if (! preg_match) ("/^/the_:alnum:]\t\_u_0-9_.-”). _POST ['email']))) $ emailError = 'Vnesli ste neveljaven e-poštni naslov.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP bo izrezal vse presledke iz vrednosti in preveril, ali je kaj ostalo. Če je tako, imamo podrobno Redni izraz (Regex) da bi videli, ali se vnosni niz našega uporabnika ujema z vzorcem e-pošte.
Gotovo vam ni treba razumeti, kako
preg_match ()gradi ta skript. To je uporabna funkcija za določiti pravila in zahteve za uspešno vrsto podatkov, vendar ukaze napredno znanje programiranja za resnično razumevanje. V tem scenariju zagotavljamo, da uporabnik vnese le nekaj znakov, vključno z @ sledi simbol 2-4 znakov ki predstavljajo a Domena najvišje ravni.Po vseh naših logičnih potezah in vrnitvi brez napak je čas, da pošljemo naše sporočilo! Ta bit kode bo nastavil posamezne spremenljivke za prilagoditev našega e-poštnega sporočila in nastavitev nekaterih glave pošte za postopek.
// ob napakah brez napake pošlji e-pošto! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Poslano sporočilo od'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Ime: $ name n E-pošta: $ email nComments: $ comments"; $ headers = 'Od:'. ' <'.$emailTo.'>. "r". \ t 'Odgovori na: ' . $ email; pošta ($ emailTo, $ subject, $ body, $ headers); // nastavimo vrednost zaključka boolean na TRUE $ emailSent = true;Če ste se spraševali, kako bo koda ugotovila vaš e-poštni naslov, je to del, ki ga želite izpolniti. Prva spremenljivka v našem nizu je naslovljena
$ emailTovsebovati kar koli e-poštni naslov, ki bo prejel sporočilo.Znotraj našega
$ bodyspremenljivko izkoristimonločilo za dodajanje novih vrstic v sporočilo. To doda majhne umestitve za ime pošiljatelja, email naslov, sledi premor za njihovo vsebino sporočila. Seveda bi lahko preživeli nekaj časa, da bi prikazali zaslon, toda ta struktura deluje zelo dobro.Zaključek
S tem zaprete naš vadnico za napredni obrazec za stik. Če želite oblikovati svoje elemente glede na moje, si lahko ogledate moj primer styles.css znotraj kode projekta. Vendar pa je stran strukturirana dovolj dobro, da lahko sami oblikujete svoj videz in občutek.
Vas prosimo, da prenesete izvorno kodo in preučite, kaj sem naredil malo bližje. Dobro je, da sledite vadnici, toda neposreden dostop do vira projekta je lahko neprecenljiv. Vključil sem tudi kratek slogovni list, ki omogoča prilagoditve po meri, hvala za vaš pogled!
