Pagrindinis » Kodavimas » Kaip sukurti „Ajax“ pagrįstą HTML5 / CSS3 kontaktinę formą

    Kaip sukurti „Ajax“ pagrįstą HTML5 / CSS3 kontaktinę formą

    Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

    Kontaktinė forma yra mirtinai svarbi bet kuriai interneto svetainei, nes ji veikia kaip žiniatinklio žiniatinklio valdytojo nuomonė ar užklausos. Žiniatinklyje buvo daugybė kontaktų formų, tačiau, deja, dauguma jų jums nepaaiškina vidinių darbo dalių, todėl čia pateikiama išsami pamoka, skirta išmokyti jus sukurti pažangią kontaktinę formą nuo nulio, remiantis „pop“ technologija, HTML5 ir CSS3.

    Atsižvelgiant į žiniatinklio el. Pašto kontaktinės formos pobūdį, mes taip pat privalome pasinerti į dvi atskiras taikomųjų programų sritis, ty PHP backend kodą, skirtą el. Pašto ir jQuery funkcijų siuntimui turtingai vartotojo sąsajai. Iki galo mums bus palikta visiškai dinamiška ir funkcinė kontaktinė forma, parašyta vėliau.

    Dabar pradėkite kurti savo pažangią kontaktinę formą!

    Nuoroda į:

    • Demonstracija - peržiūrėkite, ką statote
    • Atsisiųsti - atsisiųsti visus failus (php + css)

    Programos struktūrizavimas

    Norėdami pradėti, jums reikės tam tikro tipo interneto serverio. Jei naudojate „Windows“ įrenginį, „WAMP“ tikriausiai yra geriausias pasirinkimas. „Mac“ vartotojams yra panaši programa, pavadinta „MAMP“, kuri yra taip pat paprasta įdiegti.

    Šie paketai jūsų kompiuteryje sukurs vietinį serverį su visomis galimybėmis naudotis PHP. Arba, jei turite serverio erdvę arba turite pilną prieigą prie serverio į nuotolinę vietą, galite tai naudoti. Mums nereikės jokių MySQL duomenų bazių, kurios turėtų šiek tiek supaprastinti.

    Sukūrus serverį sukurkite naują aplanką, kuriame norite patalpinti programą. Tai galite pavadinti, kad tikėtumėt, nes tai nėra žalinga ar netgi susijusi su galutiniu produktu. Aplanko struktūra bus naudojama, kai prieigai prie failų naršyklėje. Tai būtų paprastas pavyzdys http: //localhost/ajaxcontact/contact.php

    Leiskite kurti savo failus!

    Mes dirbame tik per 2 pagrindinius failus. Pirmiausia mums reikės branduolio .php failą, kuriame bus ne tik mūsų taikomoji logika, bet ir HTML žymėjimas. Žemiau pateikiamas pavyzdys, paimtas iš mūsų pradinio failo.

       HTML5 / CSS Ajax kontaktinė forma su jQuery    

    Norėdami pradėti, mūsų dokumentui parašėme paprastą antraštę. Tai apima ir bendrą HTML5 dokumento tipo deklaracija ir kai kurie HTML / XML dokumento elementai. Tai nėra būtinai reikalinga, bet palengvins atvaizdavimo procesą senesnėse (ir naujesnėse) naršyklėse. Taip pat niekada skauda pasiūlyti daugiau informacijos.

    Šiek tiek toliau žemyn mes matome 2 eilutes prieš pat mūsų uždarymo antraštės žymą. Pirmasis apima mūsų jQuery scenarijus iš „Google“ kodo saugyklos. Tai būtina norint, kad mūsų dinaminės puslapio klaidos veiktų. Tiesiogiai po juo įtraukiame pagrindinį CSS dokumentas kuriame yra visi mūsų puslapio stiliai.

    Mūsų dokumentuose yra keletas turintys skyriai pagrindinės kontaktinės formos atsisakymas. Čia yra 3 įvesties elementai vartotojo vardas, elektroninio pašto adresas, ir Asmeninė žinutė. HTML žymėjimas yra gana standartinis ir neturėtų užsikimšti jokio tarpinio kūrėjo proto.

     

    Jūsų el. Laiškas buvo išsiųstas. Huzzah!

    Čia mes turime pagrindinį PHP sąlyginis kodas įdėta į keletą puslapių talpyklų. Tai patikrina nustatyto kintamojo reikšmę $ emailSent ir jei lygus teisingumui, bus rodomas sėkmės pranešimas.

    Viduje mūsų formos HTML

    The Kitas pareiškimas yra tai, kas bus vykdoma pirmojo puslapio įkėlimo metu, nes pradžioje nebus jokio turinio. Čia mes įtrauksime a trumpas formos elementų rinkinys ir a pateikti mygtuką.

    Klaida pateikiant formą




    Galbūt jūs pastebėjote, kad yra kita sąlyginis blokas tiesiogiai po pradinės formos. Tai patikrina kintamąjį $ hasError ir patvirtinus bus rodomas klaidos pranešimas. Šis atsarginis metodas yra naudojamas tik jei „JavaScript“ yra išjungtas naršyklėje ir todėl negali generuoti dinaminių klaidų.

    Visą kelią galime rasti atskirus PHP kintamuosius tikrinama. Teiginiai reguliuojami, jei forma jau pateikta tik iš dalies užpildytų duomenų. Tai dar viena atsarginė sistema, rodanti jau užpildytų laukų turinį - gražus triukas tinkamos patirties turiniui!

    Tiesiog po mūsų formos užpildymo yra keletas jQuery funkcijos mes parašėme. Pirmiausia kalbėsime apie šiuos dalykus, nes jie yra numatytasis įgyvendinimas naudojant „pageload“. Tačiau jei naršyklė nepriima „JavaScript“, tada pagal nutylėjimą galime pasikliauti PHP kodu.

    Atidarymas jQuery

    Paprasčiausias būdas pradėti kalbėti šia tema būtų nardyti į dešinę. Atskirus blokus suskirstysiu pagal eilutę, kad galėtumėte pamatyti, ką scenarijus tikriausiai tikrina.

    Tačiau, jei jūs tiesiog prarastumėte peržiūrėti projekto kodo failus. Visi visi blokai yra iš anksto parašyti ir gerai dokumentuoti jQuery svetainėje. Norėdami pradėti, atidarome kodą, panašų į bet kurį kitą:

     

    Jei esate susipažinę atšaukimai galite pastebėti skelbimas () funkcija turi integruotą parametrų rinkinį. Atšaukimai yra mažesnės funkcijos, kurios vadinamos duomenis, gautus iš kitos funkcijos.

    Taigi, pavyzdžiui, kai mūsų jQuery.post () funkcija sėkmingai fotografuoja el. paštą, ji vadins savo vidinę funkciją, kad būtų rodoma stumdoma animacija. Visi šie kodai gali būti įrašyti į savo bloką ir perkelti į kitą vietą. Tačiau šios pamokos labui atgalinis pranešimas yra daug lengviau rašomas kaip eilutė.

    Praeisdami mūsų PHP

    Galutinė kliūtis paminėti yra logika už „PHP“ procesoriaus. Tai yra „backend“ sistema, kuri iš tikrųjų bus skambinkite pašto funkcijai ir išsiųsti pranešimą. Visą žemiau pateiktuose pavyzdžiuose naudojamą kodą galima rasti tiesiogiai mūsų pagrindiniame .php failą, prieš bet kokį HTML išvestį.

    Taip pat yra keletas vidinių stilių, kurie atgaivina puslapį. Čia nėra nieko naujo, kad mes negalėtume eiti į bet kurią iš detalių. Tačiau styles.css dokumentas yra įtrauktas į projekto kodą ir jame yra pradinių CSS3 metodų.

     

    Norėdami pradėti, atidarykite mūsų PHP sąlygą ir patikrinkite jei forma buvo netgi pateikta. The POST kintamasis “pateikti” iš tikrųjų buvo paslėptas įvesties laukas, pridėtas prie mūsų formos pabaigos. Tai naudingas būdas patikrinkite, ar vartotojas nieko nepateikė vis dėlto nereikia švaistyti serverio išteklių.

    Po to turime 3 atskirus jei / kitaip ataskaitos tikrinimas jei kiekvienas įvesties laukas buvo užpildytas. Čia aš nebūsiu įterptas kiekvienos logikos bitų, nes jie visi yra labai pasikartojantys. Tačiau, norėdami pateikti trumpą pavyzdį, aš įtraukiau toliau pateiktą el. Pašto patvirtinimo sąlygą:

    // reikia galiojančio el. pašto, jei (apdaila ($ _ POST ['email']) === ") $ emailError = 'Pamiršote įvesti savo el. pašto adresą.'; $ hasError = true; other if (! preg_match ("/ ^ [[:alnum]]] [--z0-9_.- ]*@ -az0-9.- ]+\t _POST ['email'])))) $ emailError = 'Jūs įvedėte neteisingą el. Pašto adresą.'; $ HasError = true; other $ email = apdaila ($ _ POST ['email']); 

    PHP išskaidys visą tarpą nuo vertės ir patikrins, ar nėra nieko. Jei taip, mes turime išsamų Reguliari raiška (Regex) pamatyti, ar mūsų naudotojo įvesties eilutė atitinka el. pašto modelį.

    Jūs tikrai neturite suprasti, kaip preg_match () dirba kuriant šį scenarijų. Tai yra naudinga funkcija nustatyti sėkmingo duomenų tipo taisykles ir reikalavimus, bet komandas pažangias programavimo žinias iš tikrųjų suvokti. Šiame scenarijuje užtikriname, kad vartotojas įvestų tik kelis simbolius, įskaitant @ po simbolio 2-4 simboliai atstovaujantis a Aukščiausio lygio domenas.

    Pasibaigus visoms mūsų logikai ir negrąžindami klaidų atėjo laikas atsiųsti mūsų pranešimą! Šis kodo bitas nustatys atskirus kintamuosius, kad pritaikytumėte el pašto antraštes procesui.

    // jokios gedimo klaidos leiskite el. paštu dabar! jei (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Pateikta žinutė iš'. $ name; $ sendCopy = apdaila ($ _ POST ['sendCopy']); $ body = "Vardas: $ name nEmail: $ email n nComments: $ comments"; $ headers = 'Nuo:'. ' <'.$emailTo.'>„. "r". 'Atsakinėti į: ' . $ email; paštas ($ emailTo, $ topic, $ body, $ header); // nustatykite mūsų logikos užbaigimo vertę į TRUE $ emailSent = true;  

    Jei manote, kaip kodą ketina išsiaiškinti jūsų el. Pašto adresas, tai yra dalis, kurią reikia užpildyti. Pirmasis mūsų rinkinio kintamasis yra pavadintas $ emailTo ir turėtų apimti tai, kas taikoma el. pašto adresas, kuriuo bus gautas pranešimas.

    Mūsų viduje $ kūnas kintamasis, kurį naudojame n norėdami pridėti naujų eilučių į pranešimą. Tai prideda mažas paskirties vietas Siuntėjo vardas, elektroninio pašto adresas, po jų pertrauka pranešimo turinys. Žinoma, jūs galite praleisti laiką, rodantį vaizdą, tačiau ši struktūra puikiai veikia.

    Išvada

    Tai baigia mūsų pamoką, skirtą išplėstinei kontaktinei formai. Jei norite suformuoti savo elementus, susijusius su mano, galite patikrinti mano pavyzdį styles.css pagal projekto kodą. Tačiau puslapis yra pakankamai gerai struktūrizuotas, kad galėtumėte lengvai sukurti savo išvaizdą.

    Nesivaržykite atsisiųsti šaltinio kodą ir išnagrinėti, ką aš padariau šiek tiek arčiau. Gerai sekti pamoką, bet tiesioginis priėjimas prie projekto šaltinio gali būti neįkainojamas. Aš taip pat įtraukiau trumpą stilių lentelę, kad padarytumėte pritaikymus vėjoje, ačiū už jūsų nuomonę!