• 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 !

PHP, MySQL dhe Protoype – AJAX në 10 minuta

Forum-Al

Aty ku shqiptarët mblidhen
Anëtar
Jan 5, 2010
Postime
560
Pikët
28
Vendndodhja
Forum

Si ç’mund ta kuptoni nga titulli, kjo është një guidë që përfshin PHP, MySQL dhe PrototypeJS (Framework për JS) për të prekur bazat e interaksionit me AJAX. Gjatë progresit do të zhvillojmë një website minimalist që përdor AJAX për të marrë informacione nga një databazë MySQL përmes PHP dhe të dhënat i shfaq në faqe.

Kujt i shërben guida

Duke qenë se do përdorim tre teknologji të ndryshme, fillestarët që nuk njohin mirë asnjë nga teknologjitë mund ta kenë paksa më të vështirë ta kuptojnë. Ata me eksperiencë në PHP dhe JS, por jo në AJAX, jam i sigurt që do i kuptojnë gjërat shumë shpejt. Megjithatë, une do mundohem të shkruaj sa më thjeshtë e ti shpjegoj veprimet hap pas hapi.

Le të fillojmë

Për ta nisur mbarë, do krijojmë një databazë të quajtur “feniksi” dhe nën të do krijojmë një tabelë të quajtur “artikujt” me 3 kolona. Kolonat i emërojmë në këtë mënyrë:

id – INT – PRIMARY – AUTO_INCREMENT
titulli – TINYTEXT
permbajtja – TEXT


Për të krijuar databazën dhe tabelën mund të përdorni çfarë do lloj ndërfaqe që jeni mësuar (command line apo gui), por ju këshilloj seriozisht të përdorni PHPMyAdmin sepse është i thjeshtë dhe ka më tepër opsione se ç’ju duhen.

Me krijimin e databazës, kalojmë në më të thjeshtën, kodin html. Unë kam shkruar një kod minimalist që permban një listë ul (të parenditur) dhe nje div në të cilin do të shfaqim përmbajtjen e artikujve nga databaza.

Kodi HTML në index.html



Kemi mbaruar punë me databazen dhe kodin html. Hapi tjetër është të shkruajmë një kod PHP që merr informacionet nga databaza dhe i afishon ato përmes tageve html, në menyrë që paraqitja të jetë sa më e rregullt.

Kodi PHP ne ajax/get.php

Kodi më sipër është ndoshta rasti më i thjeshtë i marrjes dhe afishimit të informacioneve nga databaza. Gjithçka është standarte: jemi lidhur me serverin, kemi zgjedhur një databazë, kemi bërë një query dhe kemi shfaqur të dhënat. Deri këtu duhet të jemi në rregull. Ajo që e ben pak konfuz kodin eshte pjesa e kontrollimit të variablës GET, id.

Duke qenë se në kodin e mësipërm PHP nuk do kemi akses direkt nga browseri, atëherë nga do e marri variablën id? Këtu hyn në lojë AJAX. Përmes kodit Javascript (të shkruar për PrototypeJS) të mëposhtëm do të bëjmë të mundur që të kalojmë një variabël GET në scriptin PHP, ta egzekutojmë scriptin dhe të marrim informacionet, gjithçka në menyrë të fshehtë dhe asinkrone (pra pa ringarkuar faqen). Pikërisht ky është thelbi i AJAX.

Të vazhdojmë me kodin JS sepse ky është edhe esenca e kësaj guide dhe pjesa më e ndërlikuar.

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 që kodi i mësipërm është paksa çorientues për fillestarët por pa merak, do e shpjegoj hap pas hapi në mënyrë që ta kuptoni çpo ndodh. Kini parasysh që gjysma e kodit është shkruar për të arritur një JS unobtrusive, që të ndaj html-në nga JS. Në rast të kundërt, mund të kisha bërë një funksion shumë më të thjeshtë i cili u thërriste nga eventi onclick i elementeve a (anchor), por nuk do ishte menyra më e mirë.

Shpjegim: Më poshtë, në fillim është shpjegimi dhe pas tij kodi. Thjeshtë që të mos bëheni lëmsh se cila pjesë shpjegon kë.

Ky kod shton një event handler që pret për ngarkimin e të gjithë permbajtjes html, përpara se të egzekutojë pjesën tjetër të kodit. Është e nevojshme sepse s’mund të aksesosh me JS elementë para se ato të krijohen.

document.observe('dom:loaded', function() { Këtu thërras çdo element a (anchor) që ndodhet brenda id-së #menu. Simbolet $$ indeksojnë selektorët css të përcaktuar dhe krijojnë një vektor me të gjithë elementët e gjetur. Përmes funksionit each() kam shfletur (iterate) çdo element të gjetur dhe i kam shtuar një event handler për klikimin e tyre. Pra kur klikohet një element, kodi JS e intercepton.

$$('#menu a').each(function(el){ return $(el).observe('click', function() { Variabla el kthehet nga funksioni each() dhe përmban url-në e elementëve të klikuar. Nëse e vini re, në linket html të krijuar në fillim, atributi href i tyre ishte “#1″, “#2″ dhe “#3″. Këtë atribut e përdora për të përcaktuar id-në e artikullit që duam të marrim nga databaza. Mund ta shikoni në databazë që kemi 3 artikuj me id 1, 2 dhe 3. Kodi më poshtë e kthen vlerën e el-së në string dhe përdor tre funksione për manipulimin e tekstit, substring (e ndan stringun në pjesë) lastIndexOf (pozicioni i fundit i gjetur i një karakteri) dhe length (gjatësia e tekstit).

var id = el.toString(); id = id.substring(id.lastIndexOf('#') + 1, id.length); Këtu fillon pjesa AJAX që dhe na intereson më tepër. Ajax.Request është një objekt që e ofron PrototypeJS i cili thjeshtëson në minimum interaktivitetin me AJAX. Mjafton që të percaktosh adresën e skedarit që do të thërrasësh dhe menyrën (get apo post) dhe ja ku kemi një thirrje AJAX.

new Ajax.Request('ajax/get.php?id=' + id, { method:'get', onSuccess është një metodë e klasës Ajax.Request që egzekutohet atëherë kur thërritja AJAX rezultoi e sukseshme. Kjo pjesë e kodit e vendos html-në e kthyer nga AJAXi (përmes skedarit get.php) në div-in që krijuam më parë me id “mbajtësi”.

onSuccess: function(transport){ var pergjigja = transport.responseText; $('mbajtesi').update(pergjigja); } Përfundimi

Praktikisht kjo ishte e gjitha. Sapo krijuam një site minimalist që përdor AJAX për të therritur një skedar PHP, i cili merr informacione nga një databazë MySQL. Skenari që ndërtuam është vërtetë i thjeshtë, por mundësitë për ta përdorur janë virtualisht të pafundme. Mjafton të shfletoni pak dokumentimin e PrototypeJS për mundësitë e tjera që ofron për AJAX dhe duke e kombinuar me PHP dhe MySQL mund të arrini të bëni gjëra që deri tani ju janë dukur shkencë.

Meqënëse ishte një guidë e gjatë, e lodhshme dhe relativisht e vështirë, mos hezitoni të pyesni për gjërat që si keni kuptuar

Mësim të mbarë.

PHP, MySQL dhe Protoype – AJAX në 10 minuta është një postim nga: Feniksi.Com - Thesari i Njohurive



Forum-Al.com
Aty ku shqiptarët mblidhen!
 
Top