Hogyan lehet létrehozni egy Ajax-alapú HTML5 / CSS3 kapcsolati űrlapot
A kapcsolatfelvételi űrlap minden webhely számára halálos fontosságú, mivel hírnökként működik, amely átadja a webmester látogatóinak véleményét vagy kérdéseit. Számtalan kapcsolatfelvételi űrlap van a weben, de sajnos a legtöbbjük nem magyarázza meg a belső munkadarabokat, ezért itt egy részletes bemutató, amely megtanítja, hogyan készítsünk egy fejlett kapcsolati űrlapot a semmiből a pop technológia, a HTML5 és a CSS3 alapján.
Figyelembe véve a webalapú e-mail kapcsolati űrlap jellegét, két külön alkalmazásterületre is merülnünk kell, ami a PHP backend kódja az e-mail és a jQuery funkciók küldéséhez a gazdag felhasználói felület számára. Végül egy teljesen dinamikus és funkcionális kapcsolati űrlapot kapunk, amelyet a későbbi testreszabással szem előtt tartunk.
Kezdje el most a saját fejlett kapcsolati űrlapot!
Parancsikon:
- Demó - Előnézet az építőiparról
- Letöltés - Az összes fájl letöltése (php + css)
Az alkalmazás strukturálása
Ahhoz, hogy elkezdhessük, szükséged lesz valamilyen webkiszolgálóra. Ha Windows-gépet futtat, a WAMP valószínűleg a legjobb megoldás. A Mac-felhasználóknak hasonló programja a MAMP, amely ugyanolyan könnyen telepíthető.
Ezek a csomagok egy helyi szervert hoznak létre a gépén, teljes hozzáféréssel a PHP-hez. Alternatív megoldásként, ha a szerverterületet vagy egy teljes kiszolgáló hozzáférést biztosít egy távoli helyre, akkor ezt használhatja. Nem lesz szükségünk olyan MySQL adatbázisokra, amelyek egy kicsit leegyszerűsítik a dolgokat.
A szerver beállítása után hozzon létre egy új mappát az alkalmazás tárolásához. Ezt megnevezheti bármit is szeretné, mert nem káros vagy akár a végtermékhez kapcsolódik. A mappaszerkezet akkor fog felhasználni, amikor a fájlokat egy webböngészőben érheti el. Egy egyszerű példa lenne http: //localhost/ajaxcontact/contact.php
Készítsünk fájljainkat!
Csak 2 alapvető fájlban fogunk dolgozni. Először magra lesz szükségünk .php a fájl nem csak az alkalmazás logikájára, hanem a HTML-jelölés frontendre is. Az alábbiakban a kezdőfájlból vett mintakód látható.
HTML5 / CSS Ajax kapcsolati űrlap a jQuery-vel
Először is írtunk egy egyszerű fejezetet a dokumentumunkhoz. Ez magában foglal egy általánosat is Dokumentumtípus-nyilatkozat HTML5 számára és néhány HTML / XML dokumentumelem. Ezek nem feltétlenül szükségesek, de megkönnyítik a régebbi (és újabb) böngészők megjelenítési folyamatát. Soha nem fáj, hogy több információt kínál.
Egy kicsit lefelé, 2 zárójelet láthatunk a zárócímke előtt. Az első tartalmazza a mi jQuery parancsfájl az online Google kódtárból. Ez szükséges ahhoz, hogy dinamikus oldalhibáink működjenek. Közvetlenül ez alatt egy alapszintű CSS dokumentum az összes oldalstílusunkat tartalmazza.
Dokumentumunkban van néhány divíziókat tartalmaz egy fő kapcsolattartó űrlap visszatartása. Ez 3 bemeneti elemet tartalmaz felhasználó neve, email cím, és személyes üzenetet. A HTML-jelölés meglehetősen szabványos, és nem szabad semmilyen közbenső fejlesztő elmejét boggle.
Az e-mailt elküldtük. Huzzah!
Itt van egy alap PHP feltételes kód néhány oldaltartályba ágyazva. Ez ellenőrzi a megnevezett változó beállított értékét
$ emailSentés ha igaz, akkor sikeres üzenet jelenik meg.Formánk HTML-jén belül
A más a nyilatkozat az, ami az első oldalak betöltésekor fog futni, mivel nem lesz semmilyen tartalom, amelyet először küldeni kell. Itt belül egy űrlapelemek rövid gyűjteménye és a küldje el a gombot.
Hiba az űrlap elküldése során
Lehet, hogy észrevette, hogy van egy másik feltételes blokk közvetlenül a kezdőlap után. Ez megvizsgálja a nevezett változót $ hasError és megerősítéskor hibaüzenet jelenik meg. Ez az alternatív módszer csak akkor használható, ha a JavaScript le van tiltva a böngészőben, és így nem generálhat dinamikus hibákat.
Egészen lefelé találunk egyéni PHP változók ellenőrzése. A nyilatkozatok szabályozzák, ha az űrlapot már csak részleges adatokkal töltötték be. Ez egy újabb rendszer, amely megjeleníti a már kitöltött mezők tartalmát - egy jó trükk a megfelelő felhasználói élményért!
Közvetlenül az űrlap kitöltése után a kevés jQuery funkciók írtunk. Ezekről először beszélünk, mivel az alapértelmezett végrehajtás a pageload-on. Ha azonban a böngésző nem fogadja el a JavaScript-t, akkor alapértelmezés szerint a PHP-kódunkra támaszkodhatunk.
Megnyitja a jQuery-t
A legegyszerűbb módja annak, hogy elkezdjük beszélni a témát, az lenne, ha a merülés jobbra megy. Az egyes blokkokat sorról-sorra lebontom, hogy lássuk, mit keres a szkript..
Ha azonban csak elveszett tekintse át a projekt kódfájljait. A teljes blokkokat a jQuery weboldalán előzetesen megírták és jól dokumentálták. Az elkezdéshez hasonló kódot nyitunk meg:
Ha ismeri visszahívások észreveheti a post () a funkció beépített paraméterkészletet tartalmaz. A visszahívások kisebb funkciók, amelyeket hívnak egy másik függvény adatainak megválaszolásakor.
Így például, amikor a mi jQuery.post () funkció sikeresen hajtja végre az e-mailt, és saját belső funkcióját fogja hívni a csúszó animáció megjelenítéséhez. Ezt a kódot a saját blokkjába lehet írni, és máshová költöztetni. A bemutató kedvéért azonban sokkal könnyebb a visszahívás írása inline függvényként.
PHP-jünk múltja
Az utolsó említésre méltó akadály az logika PHP processzorunk mögött. Ez a háttérrendszer valójában hívjon egy e-mail funkciót és küldje el az üzenetet. Az alábbi példákban használt összes kód közvetlenül a főoldalunk tetején található .php minden HTML kimenet előtt.
Van néhány belső stílus is, amelyek frissítik az oldalt. Nincs itt semmi különösebb újdonság, így nem fogunk bejutni a részletekbe. Azonban a styles.css A dokumentum tartalmazza a projekt kódját, és tartalmazza a CSS3 technikákat.
A kezdethez nyissa meg a PHP záradékot és ellenőrizze ha az űrlapot még benyújtották. A POST változó “benyújtott” valójában egy rejtett beviteli mező volt, amelyet az űrlapunk végén adtunk hozzá. Ez hasznos módja ellenőrizze, hogy a felhasználó semmit nem adott-e be mégis nem pazaroljuk a szerver erőforrásait.
Ezt követően 3 külön van ha más nyilatkozat ellenőrzése ha minden beviteli mező kitöltése megtörtént. Itt nem fogok minden egyes logikát belefoglalni, mivel mindegyikük ismétlődő jellegű. Egy rövid példa bemutatásához az alábbi e-mail hitelesítési záradékot is szerepeltem:
// érvényes e-mailre van szüksége, ha (trim ($ _ POST ['email']) === ") $ emailError = 'Elfelejtette beírni az e-mail címét.'; $ hasError = true; other if (! preg_match ("/^ [[:alnum:]] buttonsa-z0-9_.- ]*@kódok_2-9.-)+\t _POST ['email']))) $ emailError = 'Érvénytelen e-mail címet adtál meg.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);A PHP az összes helyet kivágja az értékből, és ellenőrizze, hogy van-e valami. Ha igen, akkor van egy részletes Rendszeres kifejezés (Regex) hogy lássuk, hogy a felhasználó bemeneti karakterlánca megfelel-e egy e-mail mintának.
Biztosan nem kell megértenie, hogyan
preg_match ()ennek a parancsfájlnak a megépítéséhez dolgozik. Ez hasznos funkció meghatározza a sikeres adattípusra vonatkozó szabályokat és követelményeket, de a fejlett programozási ismereteket parancsolja meg. Ebben a forgatókönyvben biztosítjuk, hogy a felhasználó csak néhány kiválasztott karaktert írjon be, tartalmaz egy @ szimbólumot követ 2-4 karakter a Felső szintű domain.Miután minden logika elmegy, és nem adunk vissza hibát, itt az ideje, hogy elküldjük az üzenetünket! Ez a kódkód egyéni változókat állít be az e-mail üzenetek testreszabására és néhány beállítására e-mail fejlécek a folyamathoz.
// nem hiba hiba esetén írjunk most! ha (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Bejelentett üzenet'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Név: $ name nEmail: $ email n nComments: $ hozzászólás"; $ headers = 'From:'. ' <'.$emailTo.'>'. "r". 'Válaszolni: ' . $ Email; mail ($ emailTo, $ topic, $ body, $ headers); // állítsa be a logikai teljesítés értékét TRUE $ emailSent = true értékre;Ha kíváncsi volt arra, hogy a kód hogyan fogja kitalálni az e-mail címét, akkor ez az a rész, amelyet ki kell tölteni. A készletünk első változója:
$ emailtoés tartalmaznia kell, hogy melyik e-mail cím, amely megkapja az üzenetet.Bennünk
$ testváltozó, amit kihasználunk\ núj sorokat adhat az üzenethez. Ez kis elhelyezésekkel egészíti ki a A küldő neve, email cím, utána egy szünetet üzenet tartalmát. Természetesen időt tudsz tölteni a kijelzőn, de ez a szerkezet jól működik.Következtetés
Ez bezárja a fejlett kapcsolati űrlap bemutatóját. Ha szeretné az elemeket az enyémhez viszonyítani, megnézheti a példámat styles.css a projekt kódján belül. Az oldal azonban eléggé strukturált, hogy könnyen megtervezhesse saját megjelenését.
Nyugodtan töltse le a forráskódot, és vizsgálja meg, mit tettem egy kicsit közelebb. Jó, ha követjük a bemutatót, de a projektforrás közvetlen elérése felbecsülhetetlen lehet. Rövid stíluslapot is készítettem, hogy a testreszabások szellődjenek, köszönhetően a nézetnek!
