Ajax-pohjaisen HTML5 / CSS3-yhteyden muodostaminen
Yhteydenottolomake on tappava mikä tahansa verkkosivusto, sillä se toimii messengerina, joka välittää webmasterin kävijöiden mielipiteitä tai tiedusteluja. Verkossa on ollut lukemattomia yhteydenottolomakkeita, mutta valitettavasti useimmat heistä eivät selitä teille sisäisiä työosia, joten tässä on yksityiskohtainen opetusohjelma, jonka avulla opetat rakentamaan kehittyneen yhteydenottomuodon tyhjästä tekniikan, HTML5: n ja CSS3: n perusteella.
Ottaen huomioon web-pohjaisen sähköpostiyhteyslomakkeen luonteen meidän täytyy myös sukeltaa kahteen erilliseen sovelluskenttään, joka on PHP: n backend-koodi sähköpostin ja jQuery-toimintojen lähettämiseksi rikkaalle käyttöliittymälle. Lopuksi jätetään täysin dynaaminen ja toimiva yhteydenottolomake, joka on kirjoitettu myöhempää mukauttamista silmällä pitäen.
Aloita nyt oma kehittynyt yhteyslomake!
Pikakuvake:
- Demo - Hanki esikatselu siitä, mitä rakennat
- Lataa - Lataa kaikki tiedostot (php + css)
Sovelluksen jäsentäminen
Aloittaaksesi tarvitset jonkinlaisen web-palvelimen, jonka avulla voit työskennellä. Jos käytät Windows-konetta, WAMP on luultavasti paras vaihtoehto. Mac-käyttäjillä on samanlainen ohjelma nimeltä MAMP, joka on yhtä helppo asentaa.
Nämä paketit perustavat koneellesi paikallispalvelimen, jolla on täysi pääsy PHP: hen. Vaihtoehtoisesti, jos käytät palvelintilaa tai sinulla on täysi palvelin pääsy etäsijaintiin, voit käyttää sitä. Emme tarvitse mitään MySQL-tietokantoja, joiden pitäisi yksinkertaistaa asioita hieman.
Kun palvelin on määritetty luo uusi kansio sovelluksen tallentamiseksi. Voit nimetä tämän haluamallasi tavalla, koska se ei ole haitallista eikä edes liity lopputuotteeseen. Kansiorakennetta käytetään, kun käytät tiedostoja verkkoselaimessa. Yksinkertainen esimerkki olisi http: //localhost/ajaxcontact/contact.php
Rakennetaan tiedostomme!
Työskentelemme vain kahden ydintiedoston sisällä. Tarvitsemme ensin ytimen .php tiedosto, jossa ei ole vain sovelluslogiikkamme, vaan myös HTML-merkinnät. Alla on aloitustiedostostamme otettu mallikoodi.
HTML5 / CSS Ajax yhteydenottolomake jQueryn kanssa
Aluksi olemme kirjoittaneet yksinkertaisen otsikkosivun asiakirjaamme. Tähän sisältyy yleinen HTML5: n Doctype-ilmoitus ja joitakin HTML / XML-dokumenttielementtejä. Näitä ei tarvita tarkasti, mutta se helpottaa renderointiprosessia vanhemmissa (ja uudemmissa) selaimissa. Myöskään se ei koskaan sattuu tarjoamaan lisätietoja.
Hieman kauempana alaspäin voimme nähdä 2 riviä juuri ennen sulkemisotsikon tagia. Ensimmäinen sisältää meidän jQuery-komentosarja Google-koodin online-arkistosta. Tämä on tarpeen, jotta dynaamiset sivuvirheet toimisivat. Suoraan tämän alapuolella olemme sisällyttäneet perusasetuksen CSS-asiakirja jotka sisältävät kaikki sivutyylisi.
Asiakirjassa on muutama osia keskeinen yhteydenottolomake. Siihen kuuluu 3 syöttöelementtiä käyttäjän nimi, sähköpostiosoite, ja henkilökohtainen viesti. HTML-merkintä on melko vakio, eikä se saa häiritä välittäjän kehitystä.
Sähköpostisi lähetettiin. Huzzah!
Täällä meillä on perus PHP: n ehdollinen koodi sisäkkäin muutaman sivusäiliön sisällä. Tämä tarkistaa mainitun muuttujan asetetun arvon
$ emailSentja jos se on totta, se näyttää menestysviestin.Lomake-HTML: n sisällä
muu lausunto on ensimmäinen sivun lataus, koska sisältö ei lähetä aluksi. Sisällä tässä on a lomakeelementtien lyhyt kokoelma ja a Lähetä painike.
Virhe lähetettäessä lomaketta
Olet ehkä huomannut, että on toinen ehdollinen lohko suoraan aloitusmuodon jälkeen. Tämä tarkistaa mainitun muuttujan $ hasError ja näyttöön tulee virhesanoma vahvistuksen yhteydessä. Tämä varamenetelmä on käytetään vain, jos JavaScript on poistettu käytöstä selaimessa ja siten voi luoda dynaamisia virheitä.
Löydämme koko matkan yksittäiset PHP-muuttujat tarkistetaan. Lausunnot säännellään, jos lomake on jo toimitettu vain osittain täytettyinä. Tämä on toinen varajärjestelmä, joka näyttää jo täytettyjen kenttien sisällön - mukava temppu oikeaan käyttäjäkokemukseen!
Suoraan sen jälkeen, kun lomake on valmis, on muutama jQuery-toiminnot olemme kirjoittaneet. Puhumme niistä ensin, koska ne ovat oletusarvoisia sivun latauksessa. Jos selain ei kuitenkaan hyväksy JavaScriptiä, voimme olettaa oletusarvoisesti luotettavan PHP-koodiin.
Avataan jQuerylle
Helpoin tapa aloittaa keskustelu tästä aiheesta olisi sukeltaminen suoraan sisään. Hajotan yksittäiset lohkot rivikohtaisesti, jotta voit nähdä, mitä skripti todella tarkistaa.
Jos kuitenkin menetät juuri tarkista projektikooditiedostot. Kaikki kokonaiset lohkot on valmiiksi kirjoitettu ja dokumentoitu jQuery-verkkosivustolla. Aloittaaksesi avaamme koodin, joka on samanlainen kuin muu:
Jos tiedät kutsuvastauksia saatat huomata lähettää() toiminnolla on sisäänrakennettu parametrien sarja. Soittopyynnöt ovat pienempiä toimintoja, joita kutsutaan toisen toiminnon tietojen perusteella.
Joten esimerkiksi kun meidän jQuery.post () toiminto onnistuneesti ampuu sähköpostin, joka kutsuu omaa sisäistä toimintoaan liukuvan animaation näyttämiseksi. Kaikki tämä koodi voidaan kirjoittaa omaan lohkoonsa ja siirtää muualle. Tämän opetuksen vuoksi soittopyynnön kirjoittaminen on kuitenkin helpompaa kuin sisäinen toiminto.
PHP: n ohi
Viimeinen mainittava este on logiikka PHP-prosessorin takana. Tämä on itse taustajärjestelmä soita sähköpostitoimintoon ja lähetä viesti. Kaikki alla olevissa esimerkeissä käytetty koodi löytyy suoraan pääosan yläosasta .php tiedosto, ennen HTML-lähdön.
On myös muutamia sisäisiä tyylejä, jotka virkistävät sivua. Täällä ei ole mitään uutta, joten emme mene mihinkään yksityiskohtiin. Kuitenkin styles.css asiakirja sisältyy projektikoodiin ja sisältää alkeellisia CSS3-tekniikoita.
Voit aloittaa PHP-lausekkeen ja tarkistaa jos lomake on jopa toimitettu. LÄHETTÄÄ muuttuja “toimitettu” oli itse asiassa piilotettu syöttökenttä, joka lisättiin lomakkeen lopussa. Se on hyödyllinen tapa tarkista, onko käyttäjä toimittanut mitään emme siis tuhlaa palvelinresursseja.
Tämän jälkeen meillä on 3 erillistä tai muuten lausunnon tarkistaminen nähdäksesi jos jokainen syöttökenttä on täytetty. En sisällyttää jokaista logiikkaa täällä, koska ne kaikki ovat luonteeltaan hyvin toistuvia. Jotta voisit antaa sinulle lyhyen esimerkin, olen sisällyttänyt alla olevan sähköpostivahvistuksen lausekkeen:
// tarvitsevat voimassa olevan sähköpostin, jos (trim ($ _ POST ['email']) === ") $ emailError = 'Unohditko syöttää sähköpostiosoitteesi.'; $ hasError = true; else if (! preg_match ("/^ [[:alnum:]] […] - 0-9_. _POST ['email']))) $ emailError = 'Olet antanut virheellisen sähköpostiosoitteen.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP leikkaa kaikki välilyönnit arvosta ja tarkistaa, onko mitään jäljellä. Jos näin on, meillä on yksityiskohtainen Säännöllinen lauseke (Regex) Voit tarkistaa, vastaako käyttäjän syötteen merkkijono e-mailin mallia.
Sinun ei tarvitse ymmärtää, miten
preg_match ()toimii tämän käsikirjan rakentamisessa. Se on hyödyllinen toiminto määritellä onnistuneen tietotyypin säännöt ja vaatimukset, mutta käskee kehittyneitä ohjelmointitietoja todella ymmärtämään. Tässä skenaariossa varmistamme, että käyttäjä syöttää vain muutaman merkin, sisältää @ symboli, jota seuraa 2-4 merkkiä edustavat a Ylimmän tason verkkotunnus.Kun kaikki logiikkamme kulkee ja emme palauta virheitä, on aika lähettää viesti! Tämä koodimuoto asettaa yksittäiset muuttujat mukauttamaan sähköpostiviestimme ja määrittämään joitakin postin otsikot prosessiin.
// kun ei ole virheitä, lähetä sähköpostia nyt! jos (! isset ($ hasError)) $ emailTo = '[email protected]'; $ topic = 'Lähetetty viesti'. $ name; $ sendCopy = leikkaus ($ _ POST ['sendCopy']); $ body = "Nimi: $ name nEmail: $ email n nComments: $ kommentit"; $ headers = 'Lähettäjä:'. ' <'.$emailTo.'>'. "r". 'Vastata: ' . $ Email; mail ($ emailTo, $ topic, $ body, $ header); // aseta boolean suorittamisen arvo arvoksi TRUE $ emailSent = true;Jos ihmettelit, miten koodi aikoo selvittää sähköpostiosoitteesi, tämä on osa, joka on täytettävä.
$ emailToja sen tulisi sisältää kumpi tahansa sähköpostiosoite, joka vastaanottaa viestin.Sisällä
$ elinmuuttuja, jota hyödynnetään\ nerottimen avulla voit lisätä uusia rivejä viestiin. Tämä lisää pieniä sijoitteluja lähettäjän nimi, sähköpostiosoite, jälkeen tauko heidän viestin sisältö. Voit tietysti viettää aikaa näytön melkein, mutta tämä rakenne toimii hyvin.johtopäätös
Tämä sulkee opetusohjelman kehittyneelle yhteydenottolomakkeelle. Jos haluat rakentaa elementtejä minun suhteen, voit tutustua esimerkkini styles.css hankekoodin sisällä. Sivun rakenne on kuitenkin riittävän hyvin suunniteltu, jotta voit suunnitella oman ulkoasun ja tuntuman hyvin helposti.
Voit vapaasti ladata lähdekoodin ja tutkia, mitä olen tehnyt hieman lähempänä. On hyvä seurata opetusta, mutta suora pääsy projektilähteeseen voi olla korvaamaton. Olen myös sisällyttänyt lyhyen tyylitaulukon, jossa voit tehdä mukautuksia tuulta, kiitos näkemyksestäsi!
