Kontrollues i disponueshmërisë së emrave me jQuery
<p style="text-align: center;">
</p>
Në rrjedhën e guidave praktike që ju shërbejnë për aplikacione reale, vjen edhe kjo guidë ku do ju tregoj si të kontrolloni në kohë reale nëse një emër përdoruesi (username) egziston në databazë. Emrat do t’i ruajmë në një databazë MySQL, proçesimet do i bëjmë me PHP dhe kontrollimet nga kahu i klientit dhe thërritjet AJAX do mbulohen nga jQuery. Logjika e përdorur dhe kodi që do shkruajmë është i thjeshtë, por besoj se do gjeni diçka për të mësuar.</p>
Implementimi i një kontrolluesi të tillë është perfekt për forma regjistrimi, në mënyrë që t’a informoni vizitorin në kohë reale se emri që ka zgjedhur është i zënë. Shtojini formës një indikator për fortësinë e fjalëkalimit dhe validim nga kahu klientit dhe nuk do ketë njeri të ankohet për proçesin e regjistrimit. Megjithatë, jam i sigurt që mund të shfrenoni fantazinë e t’a përdorni të njëjtën teknikë për gjëra që mua as më shkojnë në mendje.</p>
Në pak fjalë, kodi që kam shkruar ofron:</p>
Kontrollues i disponueshmërise së emrit, në kohë reale me Javascript.
Shtim me Javascript i emrit nëse është i lirë.
Validim nga kahu i serverit me PHP për mos t’i besuar plotësisht Javascript.
Alternativë standarte me PHP nëse Javascript është çaktivizuar.
Më duhet t’ju paralajmëroj se kontrollimi i emrit në kohë reale është pak intensiv sepse bëhet një query në MySQL për çdo karakter të futur. Për pjesën më të madhe të aplikimeve s’duhet të jetë problem, por mendova t’ju paralajmëroj. Sidoqoftë, kodi Javascript mund të modifikohet lehtësisht për t’a bërë të kontrollojë emrin kur shtypet një buton.</p>
Kujt i shërben kjo guidë
Duke qenë një guidë praktike, supozohet që të jeni i njohur me PHP dhe jQuery. Njohuri bazë në HTML dhe CSS janë gjithmonë të detyrueshme, por kjo është pjesë që programuesit s’duhet t’a kenë problem, ose thjeshtë nuk i intereson sepse merren me logjikën e aplikacioneve dhe jo prezantimin. Nga ana tjetër, fillestarët mund të mësojnë si menaxhohet një projekt që lidh kodin PHP me atë Javascript dhe të njihen me jQuery, por fillestarët absolutë (ata që e kanë për herë të parë) nuk i këshilloj t’a lexojnë sepse thjeshtë do humbasin kohë.</p>
E mira e guidës është se krahas funksionalitetit Javascript dhe thërritjeve AJAX, ofron validim nga kahu i serverit dhe proçesim të formës me PHP nëse Javascript është çaktivizuar. Pra mund të mësoni edhe si të bëni validim dhe funksionalitet të dyfishtë me shumë pak (pothuajse fare) lodhje.</p>
E mira e dytë është se kodin PHP e kam shkruar me objekte. Po nis t’a bëj praktikë këtë për guidat, edhe pse flasim për vetëm një klasë shumë të thjeshtë me disa funksione. Qëllimi im është t’ju mësoj të kodoni të organizuar përveç se thjeshtë të krijoni funksionalitete dhe kodimi me objekte është i pari në listë. Kush nuk është konfident me objektet në PHP të mos frikësohet sepse bëhet fjalë për gjëra themelore të cilat s’do i keni fare problem t’i kuptoni.</p>
Kodi Bazë
Do krijoj strukturën HTML që është fare e thjeshtë, me vetëm 1 formë, 1 label, 1 input, 1 span dhe 1 buton. Inputi kuptohet që është vendi ku shkruhet emri; butoni shton emrin ndërsa spani shfaq statusin me Javascript. Gjithçka e kam rregulluar me CSS, në të cilën ndodhen edhe 2 klasa (.ok dhe .gabim) që shërbejnë për të ngjyrosur mesazhet në status. Shkarkoni kodin në fillim të guidës për të parë rregullat CSS (të cilat s’janë qëllimi i guidës, por thjeshtë për t’a bërë të duket bukur).</p>
<form method="post">
<label for="emri">Emri i Perdoruesit</label>
<input type="text" name="emri" id="emri" /> <span id="statusi"></span><br /><br />
<button type="submit" id="butoni-shto">Shto Perdorues</button>
</form>
Me të shkruar kodin bazë HTML, vijojmë të kodojmë logjikën e kontrollit dhe shtimit të emrave në PHP.</p>
Klasa e Emrave
Klasa përmban 2 funksione fare të thjeshta, që nuk kryejnë asgjë më tepër se një query selektimi dhe një hyrjeje. Komentet përshkruajnë çdo rresht dhe nëse flas më tepër s’ka kuptim, sepse seriozisht s’ka asgjë për të shpjeguar këtu.</p>
<?php
class Emrat{
//Variabla qe mbajne te dhenat e serverit te databazes dhe
//databazen e zgjedhur.
private $db_host = 'localhost';
private $db_emri = 'root';
private $db_fjalekalimi = '';
private $db_databaza = 'test';
//Tabela e emrave e ruajtur ne nje variabel. Nese ndryshoj emrin
//e tabeles me vone, thjeshte ndryshoj variablen dhe jo te gjitha query-t.
private $tb_emrat = 'kontrollues_emri';
//Funksioni __construct() egzekutohet kur objekti krijohet me fjalen kyce "new".
//Ne kete rast kur krijohet objekti kryhet edhe lidhja me serverin e databazes.
function __construct(){
$lidhja = mysql_connect($this->db_host, $this->db_emri, $this->db_fjalekalimi);
mysql_select_db($this->db_databaza);
}
//Funksion qe kontrollon nese emri ndodhet apo jo ne databaze. I vetmi parameter
//qe merr eshte emri.
public function kontrollo($emri){
//Pastrojme emrin nga karakteret qe mund te prishin query-n.
$emri = mysql_real_escape_string($emri);
//Bejme nje query per te pare nese egziston ndonje rresht me te njejtin emer.
//Praktikisht bejme: zgjidh nga tabela ku emri='emrin e futur'.
$rezultatet = mysql_query("SELECT emri FROM $this->tb_emrat WHERE emri='$emri'"
;
//Nese nuk na kthehet asnje rresht nga query, do te thote se nuk egziston asnje emer
//ne databaze si emri i kerkuar. Kthejme "true" per te treguar qe kontrolli ishte i suksesshem.
//mysql_num_rows() numeron rezultatet e kthyera nga query.
if(mysql_num_rows($rezultatet) == 0){
return true;
}
//Kthejme "false" per te treguar qe kontrolli gjeti emer te njejte. Per tja u sqaruar,
//ne momentin qe bejme "return" funksioni mbyllet dhe nuk egzekuton cfare ka me poshte.
//Prandaj me siper kam bere "return true", e cila nese do egzekutohet e ben te pavlefshme
//pjesen ne vijim. Tek "return false" do arrijme vetem nese eshte gjetur nje emer i ngjashem
//me te kerkuarin ne databaze.
return false;
}
//Funksion per te shtuar emrin ne databaze. Parametri i vetem eshte emri.
public function shto($emri){
//Kontrollojme nese emri nuk eshte bosh, qe do e bente te pavlefshem.
if($emri != ''){
//Per mos tu mbeshtetur plotesisht tek Javascript dhe gjithashtu per validimin alternativ
//nese Javascript eshte caktivizuar, kontrollojme nese emri egziston. Nese jo, shprehja
//kthen "true" dhe shtimi vazhdon.
if($this->kontrollo($emri)){
//E pastrojme emrin.
$emri = mysql_real_escape_string($emri);
//Shtojme rreshtin ne databaze dhe kthejme "true" per te treguar qe shtimi ishte i suksesshem.
$rezultatet = mysql_query("INSERT INTO $this->tb_emrat (emri) VALUES ('$emri')"
return true;
}
}
//"false" kthehet nese emri eshte bosh ose nese egziston ne databaze.
return false;
}
}
?>
Validimi nga Kahu-Serverit
Javascript është standart tashmë dhe janë të rrallë ata që e kanë çaktivizuar, por një programues i mirë merr parasysh çdo skenar. Për më tepër që shumë e shohin Javascript si një teknologji të rrezikshme (në një farë grade është) për t’i marrë fjalëkalime apo informacione të tjera sensitive, prandaj shtohen arsyet pse duhet ofruar përmbajtje alternative. Në këtë guidë unë nuk i kam besuar aspak Javascript sepse kam bërë validim me PHP (në klasën më sipër) të të dhënave që futen nga ai, por gjithashtu kam ofruar dërgim alternativ forme nëse Javascript është çaktivizuar.</p>
Ofrimi i validimit nga kahu i serverit dhe dërgimi alternativ janë opsione praktikisht të detyrueshme për çdo aplikacion të krijuar. Arsyeja nuk është thjeshtë për t’i dhënë mundësine edhe atyre që e kanë Javascript të çaktivizuar, por sepse kodi Javascript është i shikueshëm dhe i manipulueshëm nga kushdo. Në rastin tonë nuk do bënin ndonjë dëm të madh, por imagjinoni aplikacione të mëdha ku dërgohen të dhëna sensitive. E bukura është se nuk duhen përpjekje të mëdha! Mjafton t’a kodoni sistemin sikur nuk përdorni fare Javascript dhe mbi të, të shtoni funksionalitetet nga kahu klientit.</p>
Dërgimi alternativ që unë kam koduar përfshin vetëm pak rreshta kod dhe thërret funksionin “shto” të klasës më sipër. Sigurisht, kontrolli i disponueshmërisë së emrit nuk bëhet në kohë reale këtu sepse do ishte e pamundur (për çfarë do shërbente Javascript pastaj), por ata që e kanë Javascript të çaktivizuar s’kanë për çfarë ankohen.</p>
<?php
//Kontrollojme nese forma eshte derguar.
if(isset($_POST['emri'])){
//Perfshijme skedarin e klases dhe e nisim ate me fjalen kyce "new".
include('klasa/emrat.php');
$emrat = new Emrat;
$emri = $_POST['emri'];
//Tentojme ta shtojme emrin. Brenda funksionit "shto" kontrollohet nese
//emri eshte bosh apo egziston ne databaze (thirret funksion kontrollo()).
//Nese kthehet "true" veprimi eshte i suksesshem dhe shfaqim mesazhin, ne te
//kundert shfaqim mesazhin e gabimit.
if($emrat->shto($emri)){
echo '<p>Emri u shtua me sukses</p>';
} else{
echo '<p>Emri egziston ose eshte bosh.</p>';
}
}
?>
Asnjë shkencë. Thjeshtë thërras një funksion dhe në varësi të përgjigjes së tij (true/false) shfaq mesazhin. Kaq mjafton për të hedhur një hap më tej drejt një skripti rockstar
</p>
Kodi PHP për funksionet AJAX
Që funksionet në Javascript (në seksionin tjetër) të funksionojnë, duhet t’i ofrojmë një ndërfaqe në PHP. Javascript-i në vetvete nuk akseson dot një databazë, prandaj shkruajmë kod PHP që mund të aksesohet nga Javascript duke kaluar variabla GET në adresë. Ky kod egzekutohet, bën query në MySQL dhe ja kthen rezultatet Javascript-it tërësisht në sfond, pa dijeninë e përdoruesit. Kodi është fare i thjeshtë dhe përmban 2 thërritje funksionesh. Një është për kontrollimin nëse emri egziston, ndërsa tjetri për t’a shtuar emrin.</p>
<?php
include('klasa/emrat.php');
$emrat = new Emrat;
//Nese eshte vendosur variabla GET 'kontrollo', kemi nje
//therritje AJAX per te kontrolluar nese emri egziston.
//I kam bere echo funksionit qe te marr me Javascript cfare
//funksioni kthen, true (nuk egziston) apo false (egziston).
if(isset($_GET['kontrollo'])){
echo $emrat->kontrollo($_GET['kontrollo']);
//Nese eshte vendosur variabla GET 'shto', kemi nje therritje
//AJAX per te shtuar emrin ne databaze. I bej serish echo
//funksionit qe ta kuptoj ne Javascript a eshte shtuar apo jo.
} elseif(isset($_GET['shto'])){
echo $emrat->shto($_GET['shto']);
}
?>
Logjika jQuery
Ashtu si çdo gjë, edhe kodi Javascript në këtë guidë është i thjeshtë për ata që kanë pak eksperiencë me jQuery. Gjithçka që ndodh është kontrollimi i emrit në kohë reale përmes një thërritjeje AJAX, shtimi përsëri me AJAX, validimi i kthimit nga AJAX dhe rifreskimi i statusit. Kodi duket pak i gjatë, por komentet bëjnë të vetën, sepse logjika është shumë e thjeshtë.</p>
$(document).ready(function(){
//Inputi ku shkruhet emri.
var emri = $('input#emri');
//Butoni qe shton emrin.
var butoni = $('button#butoni-shto');
//Statusi ku shfaqen mesazhet.
var statusi = $('span#statusi');
//Variabel per te kontrolluar nese kontrolli i emrit ishte i
//suksesshem apo jo. Do na duhet kur bejme shtimin e emrit.
//E nisim ne 0 sepse kur faqja ngarkohet inputi eshte bosh
//dhe emri nuk eshte i vlefshem.
var kontrolli = 0;
//Funksioni qe kontrollon emrin.
function kontrolloEmrin(){
//Kontrollojme nese emri nuk eshte bosh. val() kthen vleren
//e inputit. Eshte njesoj si te perdorim emri.attr('value').
if(emri.val() != ''){
//Bej nje thirrje AJAX ne rifresko.php duke derguar variablen
//GET 'kontrollo', e cila si vlere ka vete emrin. Variabla 'kthimi'
//eshte ajo cfare kthehet nga kodi PHP. Nese kthimi eshte 1 (true), atehere
//emri nuk egziston. Ne te kundert, egziston.
$.get('rifresko.php?kontrollo=' + emri.val(), function(kthimi){
if(kthimi == 1){
//fadeIn() e shfaq statusin te animuar. .html() eshte shkurtim i
//funksionit te Javascript innerHTML() dhe fut kod HTML ne nje element.
//removeClass() heq nje klase nga elementi, ndersa addClass() e shton.
//Ne kete menyre heq klasen 'gabim' (nese eshte) dhe vendos klasen 'ok'
//per te treguar vizualisht sukses. Funksionet ne jQuery mund te vendosen
//rresht per tu egzekutuar ne menyre sekuenciale.
statusi.fadeIn(300);
statusi.html('Emri eshte i lire').removeClass('gabim').addClass('ok');
//E bej 'kontrolli' 1 per te treguar qe veprimi eshte i suksesshem.
kontrolli = 1;
} else{
//Ketu heq klasen 'ok' (nese eshte) dhe vendos klasen 'gabim' per te
//treguar vizualisht (me ngjyre te kuqe) qe emri egziston.
statusi.html('Emri egziston.').removeClass('ok').addClass('gabim');
//E bej 'kontrolli' 0 per te treguar qe veprimi nuk eshte i suksesshem.
kontrolli = 0;
}
});
} else{
//Nese emri eshte bosh, e zhduk statusin sepse skam asgje per t'i treguar perdoruesit.
statusi.fadeOut(300);
//Edhe ketu e bej 'kontrolli' 0 sepse nje emer bosh nuk eshte i vlefshem.
kontrolli = 0;
}
//E kthej variablen 'kontrolli'.
return kontrolli;
}
//Eventi 'click' i butonit.
butoni.click(function(eventi){
//Nese 'kontrolli' eshte 1, atehere kontrollimi i emrit ne databaze doli
//i suksesshem dhe mund te shtohet.
if(kontrolli == 1){
//Bej nje thirrje AJAX ne rifresko.php me variabel GET 'shto', e cila
//mban si vlere emrin. Nese kthimi eshte 1 (true) emri u shtua me sukes.
//Shfaq nje mesazh tek statusi per te treguar qe emri u shtua.
$.get('rifresko.php?shto=' + emri.val(), function(kthimi){
if(kthimi == 1){
statusi.html('Emri u shtua').removeClass('gabim').addClass('ok');
}
});
}
//preventDefault() heq sjelljen fillestare te butonit, pra dergimin e formes.
eventi.preventDefault();
});
//Ketu bejme te mundur kontrollin ne kohe reale te emrit. keyup() egzekutohet sa here
//qe shtypet nje taste ne inputin e emrit dhe therret funksionin e kontrollimit te emrit.
//Pra sa here qe shkruhet nje karakter, egzekutohet funksioni qe therret me AJAX kodin PHP.
emri.keyup(kontrolloEmrin);
});
Përfundimi
Përmes një guide praktike dhe të kapshme nga çfarëdo niveli programuesish (përveç fillestarëve absolutë), ju tregova si të krijoni një skript që kontrollon nëse emri egziston në databazë dhe e shton atë gjithashtu. Tashmë duhet të keni marrë idenë e përgjithshme se si krijohen funksionalitete Javascript të cilat përdorin thërritje asinkrone (AJAX) për të marrë të dhëna nga kod PHP. E bukura e gjithë kësaj është se mund t’a implementoni lehtë në projektet tuaja, qofshin ato edhe egzistuese.</p>
Mos hezitoni të bëni komente, kritika dhe të raportoni ndonjë gabim në kod.</p>
Mësim të mbarë.</p>
Kontrollues i disponueshmërisë së emrave me jQuery është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=1534
<p style="text-align: center;">
Në rrjedhën e guidave praktike që ju shërbejnë për aplikacione reale, vjen edhe kjo guidë ku do ju tregoj si të kontrolloni në kohë reale nëse një emër përdoruesi (username) egziston në databazë. Emrat do t’i ruajmë në një databazë MySQL, proçesimet do i bëjmë me PHP dhe kontrollimet nga kahu i klientit dhe thërritjet AJAX do mbulohen nga jQuery. Logjika e përdorur dhe kodi që do shkruajmë është i thjeshtë, por besoj se do gjeni diçka për të mësuar.</p>
Implementimi i një kontrolluesi të tillë është perfekt për forma regjistrimi, në mënyrë që t’a informoni vizitorin në kohë reale se emri që ka zgjedhur është i zënë. Shtojini formës një indikator për fortësinë e fjalëkalimit dhe validim nga kahu klientit dhe nuk do ketë njeri të ankohet për proçesin e regjistrimit. Megjithatë, jam i sigurt që mund të shfrenoni fantazinë e t’a përdorni të njëjtën teknikë për gjëra që mua as më shkojnë në mendje.</p>
Në pak fjalë, kodi që kam shkruar ofron:</p>
Kontrollues i disponueshmërise së emrit, në kohë reale me Javascript.
Shtim me Javascript i emrit nëse është i lirë.
Validim nga kahu i serverit me PHP për mos t’i besuar plotësisht Javascript.
Alternativë standarte me PHP nëse Javascript është çaktivizuar.
Më duhet t’ju paralajmëroj se kontrollimi i emrit në kohë reale është pak intensiv sepse bëhet një query në MySQL për çdo karakter të futur. Për pjesën më të madhe të aplikimeve s’duhet të jetë problem, por mendova t’ju paralajmëroj. Sidoqoftë, kodi Javascript mund të modifikohet lehtësisht për t’a bërë të kontrollojë emrin kur shtypet një buton.</p>
Kujt i shërben kjo guidë
Duke qenë një guidë praktike, supozohet që të jeni i njohur me PHP dhe jQuery. Njohuri bazë në HTML dhe CSS janë gjithmonë të detyrueshme, por kjo është pjesë që programuesit s’duhet t’a kenë problem, ose thjeshtë nuk i intereson sepse merren me logjikën e aplikacioneve dhe jo prezantimin. Nga ana tjetër, fillestarët mund të mësojnë si menaxhohet një projekt që lidh kodin PHP me atë Javascript dhe të njihen me jQuery, por fillestarët absolutë (ata që e kanë për herë të parë) nuk i këshilloj t’a lexojnë sepse thjeshtë do humbasin kohë.</p>
E mira e guidës është se krahas funksionalitetit Javascript dhe thërritjeve AJAX, ofron validim nga kahu i serverit dhe proçesim të formës me PHP nëse Javascript është çaktivizuar. Pra mund të mësoni edhe si të bëni validim dhe funksionalitet të dyfishtë me shumë pak (pothuajse fare) lodhje.</p>
E mira e dytë është se kodin PHP e kam shkruar me objekte. Po nis t’a bëj praktikë këtë për guidat, edhe pse flasim për vetëm një klasë shumë të thjeshtë me disa funksione. Qëllimi im është t’ju mësoj të kodoni të organizuar përveç se thjeshtë të krijoni funksionalitete dhe kodimi me objekte është i pari në listë. Kush nuk është konfident me objektet në PHP të mos frikësohet sepse bëhet fjalë për gjëra themelore të cilat s’do i keni fare problem t’i kuptoni.</p>
Kodi Bazë
Do krijoj strukturën HTML që është fare e thjeshtë, me vetëm 1 formë, 1 label, 1 input, 1 span dhe 1 buton. Inputi kuptohet që është vendi ku shkruhet emri; butoni shton emrin ndërsa spani shfaq statusin me Javascript. Gjithçka e kam rregulluar me CSS, në të cilën ndodhen edhe 2 klasa (.ok dhe .gabim) që shërbejnë për të ngjyrosur mesazhet në status. Shkarkoni kodin në fillim të guidës për të parë rregullat CSS (të cilat s’janë qëllimi i guidës, por thjeshtë për t’a bërë të duket bukur).</p>
<form method="post">
<label for="emri">Emri i Perdoruesit</label>
<input type="text" name="emri" id="emri" /> <span id="statusi"></span><br /><br />
<button type="submit" id="butoni-shto">Shto Perdorues</button>
</form>
Me të shkruar kodin bazë HTML, vijojmë të kodojmë logjikën e kontrollit dhe shtimit të emrave në PHP.</p>
Klasa e Emrave
Klasa përmban 2 funksione fare të thjeshta, që nuk kryejnë asgjë më tepër se një query selektimi dhe një hyrjeje. Komentet përshkruajnë çdo rresht dhe nëse flas më tepër s’ka kuptim, sepse seriozisht s’ka asgjë për të shpjeguar këtu.</p>
<?php
class Emrat{
//Variabla qe mbajne te dhenat e serverit te databazes dhe
//databazen e zgjedhur.
private $db_host = 'localhost';
private $db_emri = 'root';
private $db_fjalekalimi = '';
private $db_databaza = 'test';
//Tabela e emrave e ruajtur ne nje variabel. Nese ndryshoj emrin
//e tabeles me vone, thjeshte ndryshoj variablen dhe jo te gjitha query-t.
private $tb_emrat = 'kontrollues_emri';
//Funksioni __construct() egzekutohet kur objekti krijohet me fjalen kyce "new".
//Ne kete rast kur krijohet objekti kryhet edhe lidhja me serverin e databazes.
function __construct(){
$lidhja = mysql_connect($this->db_host, $this->db_emri, $this->db_fjalekalimi);
mysql_select_db($this->db_databaza);
}
//Funksion qe kontrollon nese emri ndodhet apo jo ne databaze. I vetmi parameter
//qe merr eshte emri.
public function kontrollo($emri){
//Pastrojme emrin nga karakteret qe mund te prishin query-n.
$emri = mysql_real_escape_string($emri);
//Bejme nje query per te pare nese egziston ndonje rresht me te njejtin emer.
//Praktikisht bejme: zgjidh nga tabela ku emri='emrin e futur'.
$rezultatet = mysql_query("SELECT emri FROM $this->tb_emrat WHERE emri='$emri'"
;//Nese nuk na kthehet asnje rresht nga query, do te thote se nuk egziston asnje emer
//ne databaze si emri i kerkuar. Kthejme "true" per te treguar qe kontrolli ishte i suksesshem.
//mysql_num_rows() numeron rezultatet e kthyera nga query.
if(mysql_num_rows($rezultatet) == 0){
return true;
}
//Kthejme "false" per te treguar qe kontrolli gjeti emer te njejte. Per tja u sqaruar,
//ne momentin qe bejme "return" funksioni mbyllet dhe nuk egzekuton cfare ka me poshte.
//Prandaj me siper kam bere "return true", e cila nese do egzekutohet e ben te pavlefshme
//pjesen ne vijim. Tek "return false" do arrijme vetem nese eshte gjetur nje emer i ngjashem
//me te kerkuarin ne databaze.
return false;
}
//Funksion per te shtuar emrin ne databaze. Parametri i vetem eshte emri.
public function shto($emri){
//Kontrollojme nese emri nuk eshte bosh, qe do e bente te pavlefshem.
if($emri != ''){
//Per mos tu mbeshtetur plotesisht tek Javascript dhe gjithashtu per validimin alternativ
//nese Javascript eshte caktivizuar, kontrollojme nese emri egziston. Nese jo, shprehja
//kthen "true" dhe shtimi vazhdon.
if($this->kontrollo($emri)){
//E pastrojme emrin.
$emri = mysql_real_escape_string($emri);
//Shtojme rreshtin ne databaze dhe kthejme "true" per te treguar qe shtimi ishte i suksesshem.
$rezultatet = mysql_query("INSERT INTO $this->tb_emrat (emri) VALUES ('$emri')"
;return true;
}
}
//"false" kthehet nese emri eshte bosh ose nese egziston ne databaze.
return false;
}
}
?>
Validimi nga Kahu-Serverit
Javascript është standart tashmë dhe janë të rrallë ata që e kanë çaktivizuar, por një programues i mirë merr parasysh çdo skenar. Për më tepër që shumë e shohin Javascript si një teknologji të rrezikshme (në një farë grade është) për t’i marrë fjalëkalime apo informacione të tjera sensitive, prandaj shtohen arsyet pse duhet ofruar përmbajtje alternative. Në këtë guidë unë nuk i kam besuar aspak Javascript sepse kam bërë validim me PHP (në klasën më sipër) të të dhënave që futen nga ai, por gjithashtu kam ofruar dërgim alternativ forme nëse Javascript është çaktivizuar.</p>
Ofrimi i validimit nga kahu i serverit dhe dërgimi alternativ janë opsione praktikisht të detyrueshme për çdo aplikacion të krijuar. Arsyeja nuk është thjeshtë për t’i dhënë mundësine edhe atyre që e kanë Javascript të çaktivizuar, por sepse kodi Javascript është i shikueshëm dhe i manipulueshëm nga kushdo. Në rastin tonë nuk do bënin ndonjë dëm të madh, por imagjinoni aplikacione të mëdha ku dërgohen të dhëna sensitive. E bukura është se nuk duhen përpjekje të mëdha! Mjafton t’a kodoni sistemin sikur nuk përdorni fare Javascript dhe mbi të, të shtoni funksionalitetet nga kahu klientit.</p>
Dërgimi alternativ që unë kam koduar përfshin vetëm pak rreshta kod dhe thërret funksionin “shto” të klasës më sipër. Sigurisht, kontrolli i disponueshmërisë së emrit nuk bëhet në kohë reale këtu sepse do ishte e pamundur (për çfarë do shërbente Javascript pastaj), por ata që e kanë Javascript të çaktivizuar s’kanë për çfarë ankohen.</p>
<?php
//Kontrollojme nese forma eshte derguar.
if(isset($_POST['emri'])){
//Perfshijme skedarin e klases dhe e nisim ate me fjalen kyce "new".
include('klasa/emrat.php');
$emrat = new Emrat;
$emri = $_POST['emri'];
//Tentojme ta shtojme emrin. Brenda funksionit "shto" kontrollohet nese
//emri eshte bosh apo egziston ne databaze (thirret funksion kontrollo()).
//Nese kthehet "true" veprimi eshte i suksesshem dhe shfaqim mesazhin, ne te
//kundert shfaqim mesazhin e gabimit.
if($emrat->shto($emri)){
echo '<p>Emri u shtua me sukses</p>';
} else{
echo '<p>Emri egziston ose eshte bosh.</p>';
}
}
?>
Asnjë shkencë. Thjeshtë thërras një funksion dhe në varësi të përgjigjes së tij (true/false) shfaq mesazhin. Kaq mjafton për të hedhur një hap më tej drejt një skripti rockstar
Kodi PHP për funksionet AJAX
Që funksionet në Javascript (në seksionin tjetër) të funksionojnë, duhet t’i ofrojmë një ndërfaqe në PHP. Javascript-i në vetvete nuk akseson dot një databazë, prandaj shkruajmë kod PHP që mund të aksesohet nga Javascript duke kaluar variabla GET në adresë. Ky kod egzekutohet, bën query në MySQL dhe ja kthen rezultatet Javascript-it tërësisht në sfond, pa dijeninë e përdoruesit. Kodi është fare i thjeshtë dhe përmban 2 thërritje funksionesh. Një është për kontrollimin nëse emri egziston, ndërsa tjetri për t’a shtuar emrin.</p>
<?php
include('klasa/emrat.php');
$emrat = new Emrat;
//Nese eshte vendosur variabla GET 'kontrollo', kemi nje
//therritje AJAX per te kontrolluar nese emri egziston.
//I kam bere echo funksionit qe te marr me Javascript cfare
//funksioni kthen, true (nuk egziston) apo false (egziston).
if(isset($_GET['kontrollo'])){
echo $emrat->kontrollo($_GET['kontrollo']);
//Nese eshte vendosur variabla GET 'shto', kemi nje therritje
//AJAX per te shtuar emrin ne databaze. I bej serish echo
//funksionit qe ta kuptoj ne Javascript a eshte shtuar apo jo.
} elseif(isset($_GET['shto'])){
echo $emrat->shto($_GET['shto']);
}
?>
Logjika jQuery
Ashtu si çdo gjë, edhe kodi Javascript në këtë guidë është i thjeshtë për ata që kanë pak eksperiencë me jQuery. Gjithçka që ndodh është kontrollimi i emrit në kohë reale përmes një thërritjeje AJAX, shtimi përsëri me AJAX, validimi i kthimit nga AJAX dhe rifreskimi i statusit. Kodi duket pak i gjatë, por komentet bëjnë të vetën, sepse logjika është shumë e thjeshtë.</p>
$(document).ready(function(){
//Inputi ku shkruhet emri.
var emri = $('input#emri');
//Butoni qe shton emrin.
var butoni = $('button#butoni-shto');
//Statusi ku shfaqen mesazhet.
var statusi = $('span#statusi');
//Variabel per te kontrolluar nese kontrolli i emrit ishte i
//suksesshem apo jo. Do na duhet kur bejme shtimin e emrit.
//E nisim ne 0 sepse kur faqja ngarkohet inputi eshte bosh
//dhe emri nuk eshte i vlefshem.
var kontrolli = 0;
//Funksioni qe kontrollon emrin.
function kontrolloEmrin(){
//Kontrollojme nese emri nuk eshte bosh. val() kthen vleren
//e inputit. Eshte njesoj si te perdorim emri.attr('value').
if(emri.val() != ''){
//Bej nje thirrje AJAX ne rifresko.php duke derguar variablen
//GET 'kontrollo', e cila si vlere ka vete emrin. Variabla 'kthimi'
//eshte ajo cfare kthehet nga kodi PHP. Nese kthimi eshte 1 (true), atehere
//emri nuk egziston. Ne te kundert, egziston.
$.get('rifresko.php?kontrollo=' + emri.val(), function(kthimi){
if(kthimi == 1){
//fadeIn() e shfaq statusin te animuar. .html() eshte shkurtim i
//funksionit te Javascript innerHTML() dhe fut kod HTML ne nje element.
//removeClass() heq nje klase nga elementi, ndersa addClass() e shton.
//Ne kete menyre heq klasen 'gabim' (nese eshte) dhe vendos klasen 'ok'
//per te treguar vizualisht sukses. Funksionet ne jQuery mund te vendosen
//rresht per tu egzekutuar ne menyre sekuenciale.
statusi.fadeIn(300);
statusi.html('Emri eshte i lire').removeClass('gabim').addClass('ok');
//E bej 'kontrolli' 1 per te treguar qe veprimi eshte i suksesshem.
kontrolli = 1;
} else{
//Ketu heq klasen 'ok' (nese eshte) dhe vendos klasen 'gabim' per te
//treguar vizualisht (me ngjyre te kuqe) qe emri egziston.
statusi.html('Emri egziston.').removeClass('ok').addClass('gabim');
//E bej 'kontrolli' 0 per te treguar qe veprimi nuk eshte i suksesshem.
kontrolli = 0;
}
});
} else{
//Nese emri eshte bosh, e zhduk statusin sepse skam asgje per t'i treguar perdoruesit.
statusi.fadeOut(300);
//Edhe ketu e bej 'kontrolli' 0 sepse nje emer bosh nuk eshte i vlefshem.
kontrolli = 0;
}
//E kthej variablen 'kontrolli'.
return kontrolli;
}
//Eventi 'click' i butonit.
butoni.click(function(eventi){
//Nese 'kontrolli' eshte 1, atehere kontrollimi i emrit ne databaze doli
//i suksesshem dhe mund te shtohet.
if(kontrolli == 1){
//Bej nje thirrje AJAX ne rifresko.php me variabel GET 'shto', e cila
//mban si vlere emrin. Nese kthimi eshte 1 (true) emri u shtua me sukes.
//Shfaq nje mesazh tek statusi per te treguar qe emri u shtua.
$.get('rifresko.php?shto=' + emri.val(), function(kthimi){
if(kthimi == 1){
statusi.html('Emri u shtua').removeClass('gabim').addClass('ok');
}
});
}
//preventDefault() heq sjelljen fillestare te butonit, pra dergimin e formes.
eventi.preventDefault();
});
//Ketu bejme te mundur kontrollin ne kohe reale te emrit. keyup() egzekutohet sa here
//qe shtypet nje taste ne inputin e emrit dhe therret funksionin e kontrollimit te emrit.
//Pra sa here qe shkruhet nje karakter, egzekutohet funksioni qe therret me AJAX kodin PHP.
emri.keyup(kontrolloEmrin);
});
Përfundimi
Përmes një guide praktike dhe të kapshme nga çfarëdo niveli programuesish (përveç fillestarëve absolutë), ju tregova si të krijoni një skript që kontrollon nëse emri egziston në databazë dhe e shton atë gjithashtu. Tashmë duhet të keni marrë idenë e përgjithshme se si krijohen funksionalitete Javascript të cilat përdorin thërritje asinkrone (AJAX) për të marrë të dhëna nga kod PHP. E bukura e gjithë kësaj është se mund t’a implementoni lehtë në projektet tuaja, qofshin ato edhe egzistuese.</p>
Mos hezitoni të bëni komente, kritika dhe të raportoni ndonjë gabim në kod.</p>
Mësim të mbarë.</p>
Kontrollues i disponueshmërisë së emrave me jQuery është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=1534