Advertisement
  1. Web Design
  2. Bootstrap
Webdesign

Ndërto një Formë Kontaktimi Bootstrap Duke Përdorur PHP dhe AJAX

by
Difficulty:BeginnerLength:LongLanguages:

Albanian (Shqip) translation by Zack-C (you can also view the original English article)

Final product image
What You'll Be Creating

Në këtë tutorial Unë do të trajtoj hapat e nevojshëm për të krijuar një formë kontaktimi që punon, duke vënë në përdorim platformën e shumënjohur front-end Bootstrap, në kombinim ose në ndërthurje me AJAX dhe PHP. Që nga aty ne mund të eksplorojmë disa mundësi shtesë si p.sh. disa animacione zbukurimi CSS me animate.css ,  vërtetim të mëtejshëm në JavaScript dhe përmirësim të eksperiencës së përdoruesve me përmbajtje të pa-sinkronizuar.

Në kohën që shkruhet ky artikull, Bootstrap 3.3.5 është versioni më aktual, dhe ja vlen të përmendet që ne këtu po përdorim një ndërtim të paracaktuar (default) të Bootstrap (me paraqitje me 12 kolona) për këtë tutorial. Ndërsa ndjek zhvillimin e këtij projekti, sigurohu që të përdorësh pjesëza dhe strukturë kodimi (code) siç paraqitet në dokumentacionin Bootstrap.

Struktura e Skedarëve dhe e Dosjeve

Si fillim, ne duam të krijojmë një dosje ''rrënjë (root)'' dhe të përfshijmë në të këto skedarë dhe dosje:

Nevojitet të përfshijmë disa librari front-ent për të na ndihmuar, kështu që zbrit (download) , ( ose referoji që nga jashtë ) gjërat që vijojnë:

Vër brenda këto librari, kështu që struktura të bëhet siç paraqitet këtu:

Ndërtimi Bazë i Formës

Hap skedarin index.html dhe kopjo këtë strukturë HTML bazë:

Ky është shablloni (template) bazë në të cilin ne do ndërtojmë përmbajtjen e formës. Mund ta shihni që kemi lidhur (linked) skedarët e nevojshëm CSS dhe JavaScript (vini re që nuk nevjitet bootstrap.js për këtë shembull të veçantë). Kemi përfshirë një 'viewport meta tag' si ndihmës për kërkesat për materiale media brenda Bootstrap. JavaScript është vendosur në fund të skedarit në mënyrë që të dërgohet përmbajtja thelbësore ne fillim.

Brenda etiketës trup (body tag)  kemi përfshirë një 'div' me një 'class' col-sm-6 col-sm-offset-3 . Kjo, thjesht do të thotë se brenda sm (small - shqip:vogel) viewport ne duam të shfaqim një kolonë me gjerësi 50% (ka një maksimum prej 12 kolonash) . Klasi (class)  col-sm-offset-3 perfaqëson një diferencë majtas prej 25%, duke dhënë kështu një paraqitje (layout) që është sa gjysma e ekranit të dhënë viewport dhe e centruar horizontalisht. Që nga këtu ne kemi përfshirë një h3 and kështu kemi filluar bazat për formën tonë. Sigurohu që ti caktosh një ID kësaj forme në mënyrë që të mund ti bashkangjitim një ngjarje jQuery më vonë.

the offset will push our DIV 25 from the right

Pa Thelb, S'ka Lavdi.

Për të ndërtuar thelbin e formës mund të kopjojmë ose të shkruajmë kodin që vijon brenda etiketave <form></form>:

Kjo është e gjitha për fushat e futjes së informacionit në formë dhe butonat që përdoruesi do ndërveprojë. div fillestar me klasin e caktuar row është sintaksë klasike Bootstrap, që përfaqëson grupimin horizontal të kolonave. Kolonat brenda Bootstrap krijojnë 'mbushje (anglisht:padding)' duke shtuar një rresht rreth e qark tyre duke hequr 'mbushjen' në të majtë e në të djathtë duke bërë që të centrohen saktësisht brenda përmbajtësve të tyre.

 Kemi krijuar dy kolona me klasin col-sm-6 (50%) që do ta përdorim për të ndarë formën tonë. Brenda klasit të parë col-sm-6 kemi krijuar një etiketë-emër(label) dhe një fushë për emrin, i dyti është për e-mail. Secila nga këto përfshin një e etiketë(label) me një atribut të përshtashëm for , kështu që kjo të mund ti zbatohet fushës së lidhur me të. Secila nga këto kolona përfshin një form-group  që sistemon ose grupëzon etiketën dhe fushën që ajo ka lidhje dhe i zbaton nje diferencë në fund ose poshtë.

Displaying two fields inline

Tipografia

Bootstrap të lejon të përdorësh klasa tipografie që nga  H1-H6. Këto klasa na ndihmojnë të stilojmë elementët në linjë (inline) pa pasur nevojë për diference shtesë ose pa pasur nevojë të krijojmë elementë ne formë blloku (block). Kemi përdorur mjë H4 për stilim të shpejtë për këto emra-etiketë duke i bërë kështu të mëdha e të qarta.

Klasa form-control e zbatuar për çdo fushë-hyrje (input) bën të mundur shtrirje të plotë të përmbajtësit (gjerësi 100%). Gjithashtu i zbaton ose aplikon stilim për të ndihmuar në ndërtimin e një forme që lexohet lehtësisht (lartësi më madhe, bordurë të sheshtë etj).

Pas këtyre kolonave përfshijmë trupin e mesazhit. Përsëri, e mbledhim këtë brenda një form-group dhe i zbatojmë stilim të ngjashëm etiketës-emër dhe fushës së tekstit siç bëmë më parë.

Ftesa Për Veprim

Përfundimisht përfshijmë butonin 'parashtro' (submit). Bootstrap ka një numër klasash për butona të ndyshëm dhe ngjyrime/gjendje tipografikë. Ne kemi zgjedhur të përdorim butonin ''sukses'' (btn-success) i cili, paraprakisht, është jeshil/gjelbër. Për më tepër është e nevojshme të aplikojmë klasën bazë btn për rivendosjen e mundësivë bazë shtesë (bordura, diferencimi, pozicionim-teksti, pesha-germës). Ne aplikuam(zbatuam) klasën btn-lg që e bën atë një buton të madh dhe përfundimisht klasën pull-right që e 'lundron' ose pozicionon këtë buton djathtas.

Pas butonit tonë kemi përfshirë një div me id #msgSubmit dhe aplikuam klasat:''h3 text-center hidden''. h3 ndihmon për të krijuar një krye-titull më të madh, text-center (e gjete) vendos tekst-pozicionim në qendër, dhe përfundimisht caktojmë klasën hidden që vendos si shfaqjen në asnjë si dhe shikueshmërinë në e fshehtë.

Completed Form

Shtimi i Funksionimit të Parashtrimit

Siç mund ta shohësh duke parë në shfletuesin(browser) tënd të preferuar ne kemi krijuar një formë bazë Bootstrap. Megjithatë, kjo formë nuk bën gjë për momentin, akoma. Hapi ynë i ardhshëm është të krijojmë funksionin që merr të  dhënat që ka vënë përdoruesi (user inputs) dhe i dërgon ato te programi ose skripti PHP postues.

Hap scripts.js dhe kopjo kodin vijues:

Ky kod është një copëz jQuery që vëzhgon për një funksion parashtrimi (submit function) në id #contactForm siç e caktuam më parë. Mbi këtë funksion ne tërheqim një event variabël që ruan aksionin e parashtrimit të formës në funksion. event.preventDeafult(); ndalon parashtrimin e formës si mund të ndodhte normalisht, që mund të rifreskonte faqen përderisa ansjë veprim në formë nuk është caktuar. Përfundimisht,kërkon funksionin submitForm(); .

submitForm();

Në vazhdim ndërtojmë funksionin submitForm(); siç vijon:

Tre variablat që janë caktuar marrin vlerat e secilës hyrje (input) nga forma dhe ja bashkangjisin një variabli JavaScript për tu përdorur më vonë.

Nisim një objekt AJAX brenda jQuery dhe caktojmë parametrat në tipin post, URL te vendndodhja e skedarit PHP, të dhënat (data) që ne dëshirojmë të dërgojmë dhe funksionin vërtetues të suksesit. Të dhënat përfshijnë që të tria variablat e ngjitura me një id/label(etiketë) Funksioni kthyes i suksesit thirret kur objekti AJAX merr me sukses informacionin nga skripti PHP. Funksioni 'mbërthen' tekstin e rikthyer dhe kontrollon nëse është i barabartë me vargun(string) ''sukses''(success). Nëse po aktivizon funksionin përfundimtar formSuccess .

Funksioni formSuccess heq klasën hidden (fshehur) nga div #msgSubmit që ne aplikuam më parë, duke zbuluar kështu tekstin.

Mbërthimi në Funksionin PHP Mail

Përfundimisht, na duhet të shruajmë një skript(program)  PHP për të mbledhur përmbajtjen e formës nëpërmjet funksionit PHP Mail. Hap process.php dhe vër kodin e mëposhtëm:

Ngjashëm më kodin jQuery si më parë, kemi nevojë të mbledhim e të ruajmë variablat që duam të përdorim. Nga funksioni post mund të mbledhim tre variablat e hyrjes dhe ti bashkangjisim ato në variabla PHP me të njëjtat emra. Variabli $EmailTo është një adresë e-mail e paracaktuar që mund ta vendosësh ne skript për ta dërguar  në e-mailin tënd   pas parashtrimit të formës. $Subject është një varg (string) që do duash ta përdorësh si subjekt të e-mailit.

Trupi i e-mailt është ndërtuar lirshëm përreth tri variablave të vendosura. Si fillim vendosja e një teksti përshkrues si p.sh ''Name:'' (''Emri:''), pastaj variablën , pastaj një linjë të re të caktuar nga /n (linjë e re/linjë-thyerje). Kjo përsëritet dhe ngjitet te variabla $body.

Që të dërgojmë e-mailin ja bashkangjitim atë funksionit e-mail. Caktimi i variablit $success përfshijmë adresën e-mail në të cilën i dërgohet, subjektin, trupin dhe 'e-mail' nisës.

Për të nisur proçesin e dërgimit të e-mailit ne mund ta thërrasim atë nga brenda me një shprehje if . Kjo ndihmon gjithashtu të kontrollojmë për të parë nëse u krye me sukses apo jo. Nëse funksioni mail u kthue ''true'' d.m.th pozitiv skripti do rikthejë ''success'' (sukses), nëse dështoi do rikthejë ''invalid''.

Rezultati do rikthehet te objekti AJAX dhe i përcjellur në anën e klientit. Bukuria e AJAX është se e tërë kjo kryhet në mënyrë asinkrone në anën e klientit (front-end), duke i mundësuar përdoruesit të vazhdojë ta përdorë sitin (web-faqen) ndërkohë që proçesimi i formës dërgohet.

Pështy dhe Llustro

Duke qenë se tashmë kemi mbuluar strukturën bazë dhe funksionimin e formës në gjysmën e parë të këtij tutoriali, tani do merremi me detajet e të mbledhurit të reagimit(feed-back) të përdoruesve nëpërmjet disa mundësive shtesë që mund të përfshijmë. Në mënyre konkrete, do merremi me formën e përshtypjes ose reagimit (që anglisht njihet me emrin feed-back) , duke trajtuar gabimet si në anën e përdoruesit (front-end) edhe në anën e shërbyesit (server-side).

Përsëri edhe një herë, për të ndihmuar në proçesin e vendosjes të vërtetimit të formës, do përdorim disa vegla. Këto përfshijnë:

Shto këto në projekt siç bëmë me Bootstrap dhe jQuery më parë. Këto vegla ndihmojnë për ti dhënë feed-back (informim) përdoruesit kur ata parashtrojnë formën. Ka shumëllojshmëri veglash e platformash për të testuar format (duke përfshirë vetë testuesin HTML5), por unë zgjodha testuesin “Bootstrap Validator” (testuesin bootstrap), përderisa është i integruar bukur me formën që po merremi.

Struktura e projektit duhet të përngjasojë pak a shumë kështu:

Verifikim i Formës Sonë

Le të fillojmë duke nisur testuesin për kontroll të formës pasi parashtrohet kërkesa (submit). Duke u kthyer mbrapsht te skedari scripts.js na duhet ta redaktojmë (edit) pjesën e parë të kodit që 'thërret' funksionin submitForm() kur forma parashtrohet (submitted).

Na duhet ta përditësojmë atë (kodin) si vijon:

Kjo pjesëz e re kodi kontrollon nëse Vlerësusesi Bootstrap ka hasur ndonjë problem dhe ka ndaluar proçesimin. Nëse nuk ka hasur probleme, vazhdojmë normalisht. Përsëri na duhet të parandalojmë aksionin e pracaktuar (rifreskim të faqes) në rastin  e parashtrimit të suksesshëm të formës, kështu që lëreni këtë funksion brenda.

Në rast se klikojmë parashtro (submit) në formën tonë kur nuk janë plotësuar të gjitha fushat bën që fushat e lëna bosh të reflektohen në gjyrë të kuqe duke nxjerrë në pah çfarë nevojitet të plotësohet për të vazhduar më tej.Është kaq e thjeshtë!

Në proçesin e shtimit të hapit të vlerësimit kemi hequr ose parandaluar kështu verësuesin e HTML5 që të ndodhë. Mund të shtojmë më tej përmbajtje vlerësuesit duke përfshirë mesazhet e gabimit (error messages). Vlerësusei Bootstrap ka një tipar të mrekullueshëm duke lejuar që mesazhet e gabimit ti përshtaten çdo fushë-hyrjeje me thjeshtësi. Në mënyrë që ti shtojmë këto na duhet më tej të shtojmë kodin HTML për të shfaqur këto mesazhe.

Poshtë çdo grup-forme poshtë fushë-hyrjeve na duhet të shtojmë këtë kod HTML:

Për shembull, këtu paraqitet div shtesë që u përngjitet fushave Name(Emër) dhe Email:

Të ri-parashtrosh formën tani, duhet të tregojë mesazhin gabimit të paracaktuar kur fushat lihen bosh “Please fill in this field.” ''Ju lutemi plotësoni këtë fushë''. Duke shtuar një atribut-data te fusha e hyrjes e quajtur “data-error” tani mund të vendosësh një mesazh gabimi të modifikuar. Për shembull:

Ekziston një shumëllojshmëri tiparesh të tjera si 'shprehje e rregullt' (anglisht:regular expression) , modele që Vlerësuesi Bootstrap pranon. Mund të shihni më shumë në GitHub.

Shtim i Animacionit të Përshtypjeve

Vlerësimi në anën e klientit duket i mirë; kemi disa theksime që ndodhin në fushat e hyrjes të paplotësuara. Megjithatë, do ishte mirë të shtonim animacion te forma dhe të shtojmë mesazhet duke lejuar përdoruesin të jetë në dijeni të ndodhive. Aktualisht kemi një ''Mesazhi u Parashtrua!'' ("Message Submitted!") mesazh që shfaqet në rast suksesi, por si i bëhet në rast gabimi ose dështimi ?

Për të përdorur kodin ekzistues dhe kështu ti bëjmë skriptat tanë më të ripërdorshëm, do modifikojmë mesazhin ekzistues të suksesit që të pranojë edhe gabime gjithashtu.

Si fillim gjërat e para. Le të heqim mesazhin "Message Submitted!" nga kodi HTML dhe thjesht ta lëmë bosh div:

Tani na nevojitet të krijojmë një funksion që merret me statusin e mesazheve. Shto këtë funksion në fund të  scripts.js

Ky funksion merr dy argumente. valid do jetë një variabël Boolean: nëse është i vërtetë (true) do jetë një measzh suksesi, i pavërtetë (false) do jetë një mesazh gabimi. msg do jetë mesazhi që shfaqet brenda div në ekran.

Si fillim funksioni kontrollon nëse ka të bëjë me një meazh suksesi apo gabimi duke parë vlerën e 'valid'. Në secilin rast funksioni vendos variablën class me klasat CSS të përshtashme (na duhet të ri-përfshijmë h3 dhe text-center përderisa do ti heqim këto nga të paracaktuara më vonë brenda në funksion).

Shënim: Ne këtu po përdorim ca klasa animate.css për klasën (class) të mesazhit të suksesit. Animacioni tada do ekzekutohet në rast suksesi.

Në fund, funksioni heq tërë klasat nga #msgSubmit (shmang përplasjen e klasave), dhe pastaj  shton klasat e caktuara më parë, atëherë shton mesazhin tekst brenda div .

Brenda vlerësuesit nisës që përditësuam në fillim të këtij sesioni mund të shtojmë këtë thirrje funksioni brenda shprehjes if kur kjo është e barabartë me e ''vërtetë'' (true).

Parshtrimi i formës me fusha të paplotësuara tashmë duhet të shfaqë mesazhin e gabimit ''A e plotësuat formën siç duhet ?'' (“Did you fill in the form properly?").

Një hap i fundit për këtë funksion të ri submitMSG është ta thërrasim atë kur forma u plotësua me sukses. Përditëso (Update) funksionin formSuccess() kështu:

Si fillim duam ta rikthejmë(reset) formën dhe të pastrojmë vlerat në rast suksesi, pastaj thërrasim funksionin submitMSG si më parë me një mesazh që tregon sukses. Në parashtrim të suksesshëm të formës tani duhet të shfaqi mesazhin e suksesit me një animacion të lezetshëm  animate.css tada.

Tunde

E ç'është një animacion më shumë, apo jo ? Le të shtojmë një animacion tjetër që i zbatohet tërë formës në rast gabimi, një animacion ''tundje'' universale do ishte bukur!

Krijo një funksion të ri fiks pas formSuccess() dhe emëroje formError()

Ky funksion përdor një përqasje që gjendet në faqen demo të animate.css dhe na mudëson ti shtojmë një animacion një elementi the ta ri-thërrasësh/shtosh atë sa herë të jetë e nevojshme. Animacionet CSS kanë një problem të çuditshëm në të cilin pasi janë prezantuar ose luajtur (played) njëherë kanë prirjen të mos ekzekutohen më, akoma edhe kur klasa (class) hiqet dhe ri-futet sërish. Ky funksion  ndihmon në rivendosjen e klasave në fund të ekzekutimit të animacionit , duke na dhënë kështu mundësinë ti ri-futim përsëri ato. Kur përdoruesi klikon parashtro (submit) në një formë të pa-plotësuar duam që animacioni shake të ekzekutohet ose të luhet. Dhe kur ata (përdoruesit) e parashtrojnë formën përsëri kur prapë është gabim ose e pa-plotësuar, prapë, është e nevojshme që animacioni të luhet përsëri.

Mund ta thërrasim këtë funksion formError() sipër funksionit submitMSG() që krijuam për një mesazh gabimi. Për shembull:

Tani ndërsa parashtrojmë një formë boshe ajo do të tundet që ti diktojë përdoruesit se diçka nuk është bërë siç duhet.

Saktësimi me Këmbëngulje

I tërë ky proçes saktësimi në anën e klientit është i dobishëm. Megjithatë, çdo përdorues mund ti ç'aktivizojë këto masa dhe ta parashtrojë formën me fusha të pa-plotësuara duke redaktuar kodin në shfletuesin (browser) e tij. Është gjithmonë një masë e mirë të bëjmë ca saktësim nga ana e shërbyesit ose serverit, që ti paraprijmë çdo gjëje që i 'shpëton' saktësimit në anën e klientit.

Duke hapur skedarin process.php na duhet të bëjmë disa ndryshime për të parë nëse fushat janë bosh; nëse nuk janë, të dërgojë një mesazh në front-end d.m.th në anën e klientit. Do të krijojmë një variabël të quajtur $errorMSG për të kapur mesazhin që tregon gabim dhe të përfshijmë saktësim $_POST të mëtejshëm.

Kjo pjesë PHP kontrollon nëse ka fusha boshe para se ti vendosë ato si variablat korresponduese (zëvendëson kodin ekzistues duke vendosur variablat nga $_POST). Nëse ato janë bosh, atëherë vendosim një mesazh të thjeshtë për ta dërguar te klienti. Mund të bëjmë më tepër sesa thjesht të saktësojmë fushat kundër lënies bosh (Nëse është shumë i/e gjatë/shkurtër duke kontrolluar kundër shprehjeve të rregullta etj.) në PHP dhe JavaScript. Megjithatë, për hir të thjeshtësisë, do kufizohemi vetëm te fushat bosh tani për tani.

Na duhet të dërgojmë prapa mesazhin e gabimit te thirrja fillestare AJAX në mënyrë që të shfaqet në shfletues. Do redaktojmë shprehjen if të krijuar më parë në fund të skedarit PHP.

Në shprehjen if ne kontrollojmë gjithashtu nëse $errorMSG është bosh ("") përkrah gjendjes/statusit të funksionit mail të përdorur në variablin $success . Në rrethanën else kemi vënë një kontroll të mëtejshëm. Kjo thjesht kontrollon nëse gabimi (error) ishte një rezultat i dështimit të $success, në rast të tillë të dërgojë në kthim ''Diçka nuk shkoi siç duhej :('' (“Something went wrong :(“ ) Ndryshe, shfaqim mesazhin që u përpilua kur kontrolluam për vlera boshe.

Një hap i fundit është të pranosh këtë mesazh të ri në AJAX dhe shfaqjen e këtij mesazhi në formë. Duhet të përditësojmë objektin AJAX brenda skriptit scripts.js siç vijon:

Sapo kemi përditësuar rrethanën else e cila kontrollon nëse text == success (a ishte me sukses) Në rrethanën else kemi thirrur funksionin formError() që zbaton animacionin tundje dhe kemi kërkuar për funksionin submitMSG() që të shfaqë tekstin e rikthyer pas nga PHP.  Teksti i rikthyer ose do jetë ''Diçka nuk shkoi siç duhej:('' (“Something went wrong :( ” ) ose fushat që mori, bosh.

Përmbyllja

Hidhi një sy në GitHub për të parë në tërësi - kemi bërë goxha!

Forma që përgatitëm duhet tani ti japë përdoruesit informim (feedback) se çfarë fushash janë jo korrekte apo edhe të pa-plotësuara nëpërmjet një saktësimi të qartë. Dhamë mesazhe të përshtatura duke u bazuar në gjendjen e plotësimit dhe statusin e formës dhe mesazhin që PHP kthen, si dhe përpiluam një shtresë shtesë saktësimi në anën server-end për të 'kapur' ata që tejkalojnë saktësimin në anën e klientit (front-end).

Në përgjithësi, tani ti mund të kesh një formë kontaktimi të plotë gati që të stilohet dhe integrohet në sitin/faqen tënde. Shpresoj të jeni kënaqur me këtë tutorial. Ju lutem jini të lirë të lini çdo pyetje ose mendim te komentet poshtë!   [ Gjithashtu edhe përkthyesi shpreson të njëjtën gjë :) ]

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.