• Përshëndetje Vizitor!

    Nëse ju shfaqet ky mesazh do të thotë se ju nuk jeni regjistruar akoma. Edhe pse nuk jeni regjistruar ju arrini të shihni pjesën me të madhe të seksioneve dhe diskutimeve të forumit, por akoma nuk gëzoni të drejten për të marrë pjesë në to dhe në avantazhet e të qënurit anëtar i këtij komuniteti. Ju lutem : REGJISTROHUNI që të dërgoni postime dhe mesazhe në Forum-Al.

    Regjistrohu !

[Guide] PHP, MySQL dhe PrototypeJS - AJAX ne 10 minuta

Mandi

ஜ۩۞۩ஜ
Staff member
Anëtar
Feb 8, 2009
Postime
9,857
Pikët
113
Vendndodhja
Sic thashe, kjo eshte ndosha guida me e thelluar qe po shkruaj ne kete forum. Si mund ta kuptoni nga titulli, do te jete nje guide qe perfshin PHP, MySQL dhe PrototypeJS (Framework per JS) per te prekur bazat e interaksionit me AJAX. Gjate progresit do te zhvillojme nje website minimalist qe perdor AJAX per te marre informacione nga nje databaze MySQL permes PHP dhe te dhenat i shfaq ne faqe.

Kujt i sherben guida
Duke qene se do perdorim tre teknologji te ndryshme, fillestaret qe nuk njohin mire asnje nga teknologjite mund ta kene paksa me te veshtire ta kuptojne. Ata me eksperience ne PHP dhe JS, por jo me AJAX, jam i sigurt qe do i kuptojne gjerat shume shpejt. Megjithate, une do mundohem te shkruaj sa me thjeshte e ti shpjegoj veprimet hap pas hapi.

Le te fillojme
Perpara se te filloj me ilustrimin dhe shpjegimin e kodeve, ju keshilloj te shkarkoni php-mysql-ajax.zip qe i kam atashuar kesaj teme. Arkivi permban te gjithe skedaret qe kam perdorur per kete guide dhe do ju sherbeje te ndiqni me lehte mesimin e te eksperimentoni nderkohe.

Per ta nisur mbare, do krijojme nje databaze te quajtur "webmasteral" dhe nen te do krijojme nje tabele te quajtur "artikujt" me 3 kolona. Kolonat i emerojme ne kete menyre:

Kodi:
id - INT - PRIMARY - AUTO_INCREMENT
titulli - TINYTEXT
permbajtja - TEXT

Per te krijuar databazen dhe tabelen mund te perdorni cfare do lloj nderfaqe qe jeni mesuar (command line apo gui), por ju keshilloj seriozisht te perdorni PHPMyAdmin sepse eshte i thjeshte dhe ka me teper opsione se c'ju duhen.

Me krijimin e databazes, kalojme ne me te thjeshten, kodin html. Une kam shkruar nje kod minimalist qe permban nje liste ul (te parenditur) dhe nje div ne te cilin do te shfaqim permbajtjen e artikujve nga databaza.

Kodi HTML ne index.html
Kodi HTML:

<ul id="menu">
<li><a href="#1">Artikulli 1</a></li>
<li><a href="#2">Artikulli 2</a></li>
<li><a href="#3">Artikulli 3</a></li>
</ul>
<div id="mbajtesi"></div>


Kemi mbaruar pune me databazen dhe kodin html. Hapi tjeter eshte te shkruajme nje kod PHP qe merr informacionet nga databaza dhe i afishon ato permes tageve html, ne menyre qe paraqitja te jete sa me e rregullt.

Kodi PHP ne ajax/get.php
Kodet PHP:
Code:
<?php
if(isset($_GET['id'])){ //kontrollon nese variabla GET eshte vene. Kjo variabel vendoset me Javascript ne index.html
    $lidhja = mysql_connect('hosti', 'perdoruesi', 'fjalekalimi'); //lidhja me serverin e databazes. Modifikoni te dhenat sipas serverit tuaj
    mysql_select_db('webmasteral'); //zgjedh databazen

    $id = (int) $_GET['id']; //variablen GET e kalojme ne nje variabel $id dhe e kthejme ne integer per ta pastruar

    $rezultatet = mysql_query("SELECT titulli, permbajtja FROM artikujt WHERE id=$id"); //bej query per te marre informacionet e duhura nga tabela
    if(mysql_num_rows($rezultatet) == 1){ //kontrollojme nese query ka kthyer informacione. Thjeshte nje mase sigurie
        $vlerat = mysql_fetch_array($rezultatet); //rreshtat e kthyer i kalojme ne nje vektor

        echo '<h1>' . stripslashes($vlerat['titulli']) . '</h1>'; //shfaqim titullin ne tage h1
        echo stripslashes($vlerat['permbajtja']); //shfaqim permbajtjen
    } else{ //ky else therritet nese query e rreshtit 8 nuk kthen informacione. Shfaqim nje tekst per te treguar se faqja nuk egziston
        echo '<h1>Faqja nuk u gjend</h1>';
        echo '<p>Na vjen keq por faqja qe keni kerkuar nuk u gjend.</p>';
}
}
?>
Kodi me siper eshte ndoshta rasti me i thjeshte i marrjes dhe afishimit te informacioneve nga databaza. Gjithcka eshte standarte: jemi lidhur me serverin, kemi zgjedhur nje databaze, kemi bere nje query dhe kemi shfaqur te dhenat. Deri ketu duhet te jemi ne rregull. Ajo qe e ben pak konfuz kodin eshte pjesa e kontrollimit te variables GET, id.

Duke qene se ne kodin e mesiperm PHP nuk do kemi akses direkt nga browseri, atehere nga do e marri variablen id? Ketu hyn ne loje AJAX. Permes kodit Javascript (te shkruar per PrototypeJS) te meposhtem do te bejme te mundur qe te kalojme nje variabel GET ne scriptin PHP, ta egzekutojme scriptin dhe te marrim informacionet, gjithcka ne menyre te fshehte dhe asinkrone (pra pa ringarkuar faqen). Pikerisht ky eshte thelbi i AJAX.

Te vazhdojme me kodin JS sepse ky eshte dhe esenca e kesaj guide dhe pjesa me e nderlikuar.

Kodi:
document.observe('dom:loaded', function() {
$$('#menu a').each(function(el){
return $(el).observe('click', function() {
var id = el.toString();
id = id.substring(id.lastIndexOf('#') + 1, id.length);
new Ajax.Request('ajax/get.php?id=' + id, {
method:'get',
onSuccess: function(transport){
var pergjigja = transport.responseText;
$('mbajtesi').update(pergjigja);
}
});
});
});
});
E di qe kodi i mesiperm eshte paksa corientues per fillestaret por pa merak, do e shpjegoj hap pas hapi ne menyre qe ta kuptoni cpo ndodh. Kini parasysh qe gjysma e kodit eshte shkruar per te arritur nje JS unobtrusive, qe te ndaj html-ne nga JS. Ne rast te kundert, mund te kisha bere nje funksion shume me te thjeshte i cili u therriste nga eventi onclick i elementeve a (anchor), por nuk do ishte menyra me e mire.

Shpjegim:Me poshte, ne fillim eshte shpjegimi dhe pas tij kodi. Thjeshte qe te mos beheni lemsh se cila pjese shpjegon ke. :)

Ky kod shton nje event handler qe pret per ngarkimin e te gjithe permbajtjes html, perpara se te egzekutoje pjesen tjeter te kodit. Eshte e nevojshme sepse smund te aksesosh me JS elemente para se ato te krijohen.
Kodi:
document.observe('dom:loaded', function() {
Ketu therras cdo element a (anchor) qe ndodhet brenda id-se #menu. Simbolet $$ indeksojne selektoret css te percaktuar dhe krijojne nje vektor me te gjithe elementet e gjetur. Permes funksionit each() kam shfletur (iterate) cdo element te gjetur dhe i kam shtuar nje event handler per klikimin e tyre. Pra kur klikohet nje element, kodi JS e intercepton.
Kodi:
$$('#menu a').each(function(el){
return $(el).observe('click', function() {
Variabla el kthehet nga funksioni each() dhe permban url-ne e elementeve te klikuar. Nese e vini re, ne linket html te krijuar ne fillim, atributi href i tyre ishte "#1", "#2" dhe "#3". Kete atribut e perdora per te percaktuar id-ne e artikullit qe duam te marrim nga databaza. Mund ta shikoni ne databaze qe kemi 3 artikuj me id 1, 2 dhe 3. Kodi me poshte e kthen vleren e el-se ne string dhe perdor tre funksione per manipulimin e tekstit, substring (e ndan stringun ne pjese) lastIndexOf(pozicioni i fundit i gjetur i nje karakteri) dhe length (gjatesia e tekstit).
Kodi:
var id = el.toString();
id = id.substring(id.lastIndexOf('#') + 1, id.length);
Ketu fillon pjesa AJAX qe dhe na intereson me teper. Ajax.Request eshte nje objekt qe e ofron PrototypeJS i cili thjeshteson ne minimum interaktivitetin me AJAX. Mjafton qe te percaktosh adresen e skedarit qe do te therrasesh dhe menyren (get apo post) dhe ja ku kemi nje thirrje AJAX.
Kodi:
new Ajax.Request('ajax/get.php?id=' + id, {
method:'get',
onSuccess eshte nje metode e klases Ajax.Request qe egzekutohet atehere kur therritja AJAX rezultoi e sukseshme. Kjo pjese e kodit e vendos html-ne e kthyer nga AJAXi (permes skedarit get.php) ne div-in qe krijuam me pare me id "mbajtesi".
Kodi:
onSuccess: function(transport){
var pergjigja = transport.responseText;
$('mbajtesi').update(pergjigja);
}
Perfundimi
Praktikisht kjo ishte e gjitha. Sapo krijuam nje site minimalist qe perdor AJAX per te therritur nje skedar PHP, i cili merr informacione nga nje databaze MySQL. Skenari qe ndertuam eshte vertete i thjeshte, por mundesite per ta perdorur jane virtualisht te pafundme. Mjafton te shfletoni pak dokumentimin e PrototypeJS per mundesite e tjera qe ofron per AJAX dhe duke e kombinuar me PHP dhe MySQL mund te arrini te beni gjera qe deri tani ju jane dukur shkence :)

Meqenese ishte nje guide e gjate, e lodhshme dhe relativisht e veshtire, mos hezitoni te pyesni per gjerat qe si keni kuptuar. Shpresoj vertete qe ti kete sherbyer dikujt apo te nxise dike te zhvilloje njohurite, e jo te kaloje si "guida tjeter ne forum te cilen nuk e sheh asnjeri". Shpresojme...

© Fadion Dashi per Webmaster.al
 

Kasëmi

VI I MCMLXXIII
Anëtar
Aug 13, 2019
Postime
5,205
Pikët
113
Kete tutorial vetem Lumi e merr vesh. :ROFLMAO::LOL:

p.s. cfare domethene atashuar ?
 
Top