Forma e kontaktit është një nga gjërat e para që bëjnë fillestarët e PHP. Ka qenë gjëja e parë që kam bërë edhe unë dhe ndihesha shumë i gëzuar atëherë. Megjithëse shumë e thjeshtë për tu krijuar, kam parë shpesh në forume pyetje rreth tyre, prandaj mendova të krijoj një guidë. Mund ta përdorni për të mësuar, por gjithashtu mund ta merrni copy-paste e ta përdorni në faqet tuaja. Nuk më mbetet hatri.
Për ta bërë më interesante guidën mendova ti jap një dozë adrenaline formës me JQuery që të kenë diçka për të mësuar edhe programuesit me eksperiencë në PHP, por jo me JavaScript. JQuery do na ndihmojë të bëjmë validimin nga ana e klientit për një prezantim më dinamik, ndërsa me PHP do bëjmë validimin nga ana e serverit dhe do dërgojmë e-mailin. Arsyeja e vetme që do të përdor 2 lloje validimesh është se validimi me JavaScript mund të kalohet fare thjeshtë duke e çaktivizuar në shfletues.
Si gjithmonë, gjëja e parë që do të bëjmë është krijimi i strukturës HTML. Kodi i plotë paraqitet më poshtë.
| HTML | | Kopjo Kodin | | ? |
| 01 | <div id="mbajtesi"> |
| 02 | <form id="forma" method="post" action=""> |
| 03 | <div> |
| 04 | <label for="emri">Emri</label> |
| 05 | <input type="text" name="emri" id="emri" /> |
| 06 | <span id="gabimEmri"></span> |
| 07 | </div> |
| 08 | <div> |
| 09 | <label for="email">E-Mail</label> |
| 10 | <input type="text" name="email" id="email" /> |
| 11 | <span id="gabimEmail"></span> |
| 12 | </div> |
| 13 | <div> |
| 14 | <label for="arsyeja">Arsyeja e Kontaktit</label> |
| 15 | <select name="arsyeja" id="arsyeja"> |
| 16 | <option value="Pyetje e pergjithshme">Pyetje e pergjithshme</option> |
| 17 | <option value="Lavderim">Lavderim</option> |
| 18 | <option value="Oferte Pune">Oferte Pune</option> |
| 19 | <option value="Te kam inat">Te kam inat</option> |
| 20 | </select> |
| 21 | </div> |
| 22 | <div> |
| 23 | <label for="mesazhi">Mesazhi</label> |
| 24 | <textarea name="mesazhi" id="mesazhi"></textarea> |
| 25 | </div> |
| 26 | <button type="submit" id="butoni">Dergoje Mesazhin</button> |
| 27 | </form> |
| 28 | </div> |
Struktura duhet të jetë standarte për disa fusha hyrëse. Çdo fushë e kam ndarë me një element <div> për të lehtësuar stilimin dhe ndarjen midis tyre. Elementët <label> shërbejnë si tituj për të përshkruar fushën në mënyre semantike dhe gjithashtu si lehtësim i vogël ndaj përdoruesve. Kur klikohet mbi titull, fusha automatikisht merr fokus. Vini re që atributi for i <label> është i njëjtë me ID-në e fushës. Gjëja e fundit që më duhet t’ju tregoj për strukturën HTML është përdorimi i një elementi bosh <span>, të cilin do e përdorim më vonë për të shfaqur mesazhet.
Të gjithëve na pëlqejnë gjërat e bukura dhe forma e kontaktit nuk është përjashtim. Prandaj do shtojmë disa rregulla CSS për të ngjyrosur e pozicionuar elementët.
| CSS | | Kopjo Kodin | | ? |
| 01 | #mbajtesi{ |
| 02 | width:500px; |
| 03 | margin:50px auto; |
| 04 | } |
| 05 | |
| 06 | #mbajtesi div{ |
| 07 | margin-bottom:10px; |
| 08 | } |
| 09 | |
| 10 | #mbajtesi label{ |
| 11 | display:block; |
| 12 | font-weight:bold; |
| 13 | cursor:pointer; |
| 14 | } |
| 15 | |
| 16 | #gabimEmri, #gabimEmail{ |
| 17 | color:#ca6c6c; |
| 18 | } |
| 19 | |
| 20 | #mbajtesi input, #mbajtesi select, #mbajtesi textarea{ |
| 21 | font:13px "Trebuchet MS", Arial, Helvetica, sans-serif; |
| 22 | color:#666; |
| 23 | margin-right:15px; |
| 24 | border:1px solid #bbb; |
| 25 | padding:5px; |
| 26 | } |
| 27 | |
| 28 | #mbajtesi input{ |
| 29 | width:250px; |
| 30 | } |
| 31 | |
| 32 | #mbajtesi textarea{ |
| 33 | width:450px; |
| 34 | height:100px; |
| 35 | } |
| 36 | |
| 37 | #mbajtesi button{ |
| 38 | background:#f55415; |
| 39 | border:1px solid #863718; |
| 40 | padding:7px; |
| 41 | color:white; |
| 42 | } |
| 43 | |
| 44 | #mbajtesi .gabim{ |
| 45 | border:1px solid #ca6c6c; |
| 46 | background:#f6d6d6; |
| 47 | } |
| 48 | |
| 49 | #mbajtesi .mire{ |
| 50 | border:1px solid #bbb; |
| 51 | background:white; |
| 52 | } |
| 53 | |
| 54 | p.jo{ |
| 55 | border:1px solid #ca6c6c; |
| 56 | background:#f6d6d6; |
| 57 | padding:10px; |
| 58 | } |
Stilet e mësipërme janë jashtë qëllimit të kësaj guide dhe smund të fokusohemi shumë në to, por jam i sigurt që nuk do lodheni shumë. Rregulla standarte: ngjyra, sfondi, bordura, etj.
Si thoni të kalojmë në pjesën interesante? Po e nisim me kodin JavaScript, të cilin e kam komentuar me detaje, por po ju them disa fjalë për t’ju shpjeguar idenë e funksionalitetit. Kam ndërtuar 3 funksione për të kontrolluar nëse fushat janë më të gjata se një vlerë e caktuar apo nëse emaili është i vlefshëm dhe nëse nuk plotësohet i shtoj një klasë CSS fushës me një funksion të JQuery që quhet addClass(). Në fund ja ngjisim këto funksione eventeve blur() dhe keyup() në mënyrë që validimi të ndodhë në kohë reale. Shumë e thjeshtë apo jo? Për disa po, për disa jo, prandaj studioni kodin!
| Javascript | | Kopjo Kodin | | ? |
| 001 | /* |
| 002 | Presim qe te gjithe elementet html te jene ngarkuar |
| 003 | ne menyre qe te kemi akses ti manipulojme. |
| 004 | */ |
| 005 | $(document).ready(function(){ |
| 006 | /* |
| 007 | Deklarojme variablat e formes, fushave input dhe textarea |
| 008 | dhe elementet span ku do shfaqim mesazhet e gabimit. |
| 009 | $('#id') eshte forma e shkurtuar e JQuery per: |
| 010 | document.getElementById('id'). |
| 011 | */ |
| 012 | var forma = $('#forma'); |
| 013 | var emri = $('#emri'); |
| 014 | var email = $('#email'); |
| 015 | var mesazhi = $('#mesazhi'); |
| 016 | |
| 017 | var gabimEmri = $('#gabimEmri'); |
| 018 | var gabimEmail = $('#gabimEmail'); |
| 019 | |
| 020 | /* |
| 021 | Krijojme nje funksion te dedikuar per te kontrolluar |
| 022 | nese emri eshte me i gjate se 5 karaktere. Funksioni |
| 023 | kthen TRUE nese validimi eshte i rregullt dhe FALSE |
| 024 | nese kushtet nuk plotesohen. |
| 025 | */ |
| 026 | function kontrolloEmrin(){ |
| 027 | /* |
| 028 | Nese emri eshte me i shkurter se 5 karaktere |
| 029 | */ |
| 030 | if(emri.val().length < 5){ |
| 031 | /* |
| 032 | I shtojme fushes se emrit nje klase "gabim" te percaktuar |
| 033 | ne rregullat CSS. Metoda addClass() ofrohet nga JQuery |
| 034 | per ti shtuar nje klase elementeve ne menyre dinamike. |
| 035 | */ |
| 036 | emri.addClass('gabim'); |
| 037 | /* |
| 038 | I shtojme tekst elementit span per te treguar cfare gabimi |
| 039 | ka ndodhur. Metoda html() eshte menyra e JQuery per innerHTML(). |
| 040 | */ |
| 041 | gabimEmri.html('Emrat e shkurter si pelqejme.'); |
| 042 | return false; |
| 043 | } else{ |
| 044 | /* |
| 045 | Ne kete rast validimi eshte i rregullt, prandaj ja heqim fushes |
| 046 | klasen e vene me siper me removeClass(). |
| 047 | */ |
| 048 | emri.removeClass('gabim'); |
| 049 | gabimEmri.html(''); |
| 050 | return true; |
| 051 | } |
| 052 | } |
| 053 | |
| 054 | /* |
| 055 | Krijojme nje funksion te dedikuar per te kontrolluar |
| 056 | nese emaili eshte i vlefshem. |
| 057 | */ |
| 058 | function kontrolloEmailin(){ |
| 059 | /* |
| 060 | Funksion .match() kontrollon nese teksti permban nje pattern te caktuar regular |
| 061 | expressions. Ne kete rast, pattern-i kontrollon per nje forme standarte emaili |
| 062 | e tipit: [email protected] |
| 063 | */ |
| 064 | if(!email.val().match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/)){ |
| 065 | email.addClass('gabim'); |
| 066 | gabimEmail.html('Emaili eshte dukshem i pa vlefshem!'); |
| 067 | return false; |
| 068 | } else{ |
| 069 | email.removeClass('gabim'); |
| 070 | gabimEmail.html(''); |
| 071 | return true; |
| 072 | } |
| 073 | } |
| 074 | |
| 075 | /* |
| 076 | Krijojme nje funksion te dedikuar per te kontrolluar |
| 077 | nese mesazhi eshte me i gjate se 10 karaktere. |
| 078 | */ |
| 079 | function kontrolloMesazhin(){ |
| 080 | if(mesazhi.val().length < 10){ |
| 081 | mesazhi.addClass('gabim'); |
| 082 | return false; |
| 083 | } else{ |
| 084 | mesazhi.removeClass('gabim'); |
| 085 | return true; |
| 086 | } |
| 087 | } |
| 088 | |
| 089 | /* |
| 090 | Eventi blur() egzekutohet kur elementi humb fokusin, pra kur |
| 091 | largohemi nga elementi. Ja ngjisim kete event te tre fushave |
| 092 | qe validojme ne menyre qe te kontrollohet validiteti i tyre. |
| 093 | */ |
| 094 | emri.blur(kontrolloEmrin); |
| 095 | email.blur(kontrolloEmailin); |
| 096 | mesazhi.blur(kontrolloMesazhin); |
| 097 | |
| 098 | /* |
| 099 | Eventi keyup() egzekutohet kur ne fushe shtypet nje taste e |
| 100 | tastjeres. Ja ngjisim edhe kete event te treja fushave qe |
| 101 | validimi te behet ne kohe reale. |
| 102 | */ |
| 103 | emri.keyup(kontrolloEmrin); |
| 104 | email.keyup(kontrolloEmailin); |
| 105 | mesazhi.keyup(kontrolloMesazhin); |
| 106 | |
| 107 | /* |
| 108 | Shtojme nje event handler (mbajtes eventesh) per formen qe |
| 109 | te kontrollojme me JS nese forma eshte bere submit. |
| 110 | */ |
| 111 | forma.submit(function(){ |
| 112 | /* |
| 113 | Nese te treja funksionet e validimit kthejne true, atehere |
| 114 | forma behet submit qe te kryhet me pas validimi me PHP. |
| 115 | */ |
| 116 | if(kontrolloEmrin() && kontrolloEmailin() && kontrolloMesazhin()){ |
| 117 | return true; |
| 118 | } else{ |
| 119 | <code>Nese validimi nuk eshte kryer, atehere therrasim te tjera funksionet |
| 120 | e validimit (qe ti shfaqim te gjitha gabimet) dhe bllokojme berjen |
| 121 | submit te formes. |
| 122 | */ |
| 123 | } else{ |
| 124 | kontrolloEmrin(); |
| 125 | kontrolloEmailin(); |
| 126 | kontrolloMesazhin(); |
| 127 | return false;</code> |
| 128 | } |
| 129 | }); |
| 130 | }); |
Si ju thashë më parë, JavaScript kujdeset për validimin nga ana e klientit por s’mund të mbështetemi vetëm tek ai. Nëse vizitori e çaktivizon, forma jonë mbetet totalisht e ekspozuar. Këtu hyn në lojë PHP, me të cilën bëjmë validimin nga ana e serverit. Logjika e kodit PHP që kam shkruar është fare e thjeshtë sepse vetë ajo që po realizojmë është e thjeshtë. Ju thashë, forma e kontaktit është një nga gjërat e para që programuesit fillestarë bëjnë 
| PHP | | Kopjo Kodin | | ? |
| 01 | <?php |
| 02 | /* |
| 03 | Nese njera nga variablat POST eshte krijuar, atehere forma |
| 04 | eshte bere submit. |
| 05 | */ |
| 06 | if(isset($_POST['emri'])){ |
| 07 | /* |
| 08 | Heqim hapesirat me trim() dhe i pastrojme variablat POST nga karakteret |
| 09 | HTML me strip_tags(). |
| 10 | */ |
| 11 | $emri = trim(strip_tags($_POST['emri'])); |
| 12 | $email = trim(strip_tags($_POST['email'])); |
| 13 | $arsyeja = trim(strip_tags($_POST['arsyeja'])); |
| 14 | $mesazhi = trim(strip_tags($_POST['mesazhi'])); |
| 15 | |
| 16 | //Krijojme nje vektor bosh te cilin do e perdorim me poshte. |
| 17 | $gabime = array(); |
| 18 | |
| 19 | /* |
| 20 | Nese emri eshte me pak se 5 karaktere i shtojme nje rresht gabimit. |
| 21 | Funksioni strlen() kthen numrin e karaktereve te tekstit. |
| 22 | */ |
| 23 | if(strlen($emri) < 5){ |
| 24 | $gabime[] = 'Emri smund te jete bosh.'; |
| 25 | } |
| 26 | /* |
| 27 | Kontrollojme nese emaili eshte i vlefshem duke e krahasuar ndaj nje |
| 28 | regular expression dhe i shtojme nje rresht gabimit nese nuk eshte. |
| 29 | */ |
| 30 | if(!preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/", $email)){ |
| 31 | $gabime[] = 'E-Maili eshte i gabuar.'; |
| 32 | } |
| 33 | //Nese mesazhi eshte me pak se 5 karaktere i shtojme nje rresht tjeter gabimit. |
| 34 | if(strlen($mesazhi) < 10){ |
| 35 | $gabime[] = 'Mesazhi smund te jete bosh.'; |
| 36 | } |
| 37 | |
| 38 | /* |
| 39 | Kontrollojme nese vektori gabim eshte bosh. Funksioni count() numeron |
| 40 | elementet e vektorit. Nese nuk ka asnje element do te thote qe nuk eshte |
| 41 | gjeneruar asnje gabim. |
| 42 | */ |
| 43 | if(count($gabime) == 0){ |
| 44 | //Emaili i marresit. Ky duhet te jete emaili juaj personal. |
| 45 | $marresi = '[email protected]'; |
| 46 | /* |
| 47 | Kokat per te ndertuar nje email te vlefshem. Ky eshte rasti me i thjeshte |
| 48 | ku kam percaktuar Derguesin, Adresen e Pergjigjes dhe Menyren e Krijimit te Emailit. |
| 49 | */ |
| 50 | $kokat = 'From: ' . $email . "rn" . |
| 51 | 'Reply-To: ' . $email . "rn" . |
| 52 | 'X-Mailer: PHP/' . phpversion(); |
| 53 | /* |
| 54 | Perfundimisht dergojme mesazhin duke plotesuar Marresin, |
| 55 | Subjektin, Mesazhin dhe Kokat (Headers). |
| 56 | */ |
| 57 | mail($marresi, $arsyeja, $mesazhi, $kokat); |
| 58 | echo '<p>Mesazhi u dergua me sukses. Faleminderit.</p>'; |
| 59 | } else{ |
| 60 | /* |
| 61 | Shfletojme elementet e vektorit per te shfaqur te gjitha |
| 62 | gabimet qe ndodhen ne te. |
| 63 | */ |
| 64 | echo '<p>'; |
| 65 | foreach($gabime as $gb){ |
| 66 | echo '- ' . $gb . '<br />'; |
| 67 | } |
| 68 | echo '</p>'; |
| 69 | } |
| 70 | } |
| 71 | ?> |
Pak fjalë e shumë kod. Këto janë guidat që më pëlqejnë . Seriozisht, fjalët ndonjëherë janë të tepërta dhe për këtë guidë nuk do kishte nevojë për shpjegime të hollësishme. Komentet në kod dhe ato 2 fjalë që ju thashë duhet t’ju përgatisin të bëni format tuaja të kontaktit. Jepini një mundësi.
Mësim të mbarë.
flm shume
bravo, shum tutorial i mir,i vlefshem dhe i kjarte! Vetem vazhdo,e shpresoj te arrish shume.
Shume tutorial i mire vetem se kuptova pse thirr dy her dhe tek if dhe tek else te njejtat funkcione. Gjithashtu hiq krejt “else” pasi qe nqs nuk validohen elementet e formes ateher ajo duhet te kthej gjithemon false!
forma.submit(function(){/*
Nese te treja funksionet e validimit kthejne true, atehere
forma behet submit qe te kryhet me pas validimi me PHP.
*/
if(kontrolloEmrin() && kontrolloEmailin() && kontrolloMesazhin()){
return true;
/*
Nese validimi nuk eshte kryer, atehere therrasim te tjera funksionet
e validimit (qe ti shfaqim te gjitha gabimet) dhe bllokojme berjen
submit te formes.
*/
} else{
kontrolloEmrin();
kontrolloEmailin();
kontrolloMesazhin();
return false;
}
}
refactor-o keshtu:
forma.submit(function(){
/*
Nese te treja funksionet e validimit kthejne true, atehere
forma behet submit qe te kryhet me pas validimi me PHP.
*/
if(kontrolloEmrin() && kontrolloEmailin() && kontrolloMesazhin()){
return true;
}
return false;
}
Flamur, verejtja jote eshte me vend dhe ka sens, megjithate problemi eshte se ne forme te tille nuk funksionon. Funksionet pasardhes nuk therriten ne momentin qe i pari nuk ploteson kushtin (boolean AND). Pra, kur kontrolloEmrin() kthen 0 (false), dy funksionet e tjera nuk therriten. Per kete arsye u “detyrova” ti ri-therras funksionet.
Sa per return false, ajo sperben problem nese vendoset brenda else apo jashte, sepse nese forma nuk validohet, gjithmone do shkohet ne else.
Faleminderit per perfshirjen dhe me vjen mire qe te pelqeu guida
Guide e vlefshme, gjithmone kam pasur qejf te krijoj dicka vet e jo te kopjoj.
tash po filloj ta mesoj kete
faleminderit shume. Rep + hehe
Me vjen mire qe te pelqen Egzon. Jam munduar ta mbaj sa me te thjeshte sepse guida i drejtohet pikerisht fillestareve ne PHP dhe JS. Kij parasysh qe nese nuk do validim client-side me JS, mund ta injorosh ate pjese (apo ta fshish nese ke shkarkuar kodin) dhe te kalosh direkt ne kodin PHP.
Thnx per Rep+
Po ke te drejt se dhe une smendova hiq pasi nqs nje funkcion kthen false if-statement ben nje break, keshtu qe nuk vazhdon me tej.
Nje menyr tjeter eshte ti vendosesh ne nje var funkcioinet keshtu:
———————–
var kontrolloEmrin = kontrolloEmrin();
var kontrolloEmailin = kontrolloEmailin();
———————–
dhe pastaj tek if te besh:
———————–
if(kontrolloEmrin && kontrolloEmailin …){
return true;
}
return false;
———————–
GG faleminderit tejet, sic duket do te behemi me te forte se ti ne kete fushe, duke na spjeguar cdo gje ne menyren me te mire te mundshme.
Ti themi Romeos ta fus ndonje plugin per reputacion+ sepse nevojitet ketu :p (sigurisht do e zubloj edhe ate Romeo).
Rinori
Rinor nuk ka nevoj per plugin per reputacion ose me sakte ne fillim te postimit ke nje buton ME PELQEN. Ajo ne nje fare menyre eshte nje falenderim per postuesin me i treguar qe me pelqeu ajo qe ke shkruar edhe i jep reputacion
Aq me shume vota ka tema aq me e pelqyer eshte.
Rinor, e rendesishme eshte qe guidat te jene instruktuese. Pastaj je i lire te ma kalosh gjithe diten
Ky kontakt forem eshte i mire, por ka nje problem, nuk te vjen emaili i dergusit,
From: [email protected]
High riskThis message may be dangerous. Learn more
Sent: Saturday, May 29, 2010 2:20:25 PM
To: [email protected]
kjo nuk te tregon emailin e dergusit. dhe kjo nuk eshte e plot
Turi, verejtja jote eshte me vend. Kisha nje ngaterrim te vogel ne kod, specifikisht ne pjesen e variables $koka (headers te emailit) ku nuk kisha perfshire emailin e derguesit. Tani e korrigjova dhe duhet te te punoje pa probleme.
me nxjer nje error si ta regulloj ju lutem http://arsencenko.info/contact.html !!