Kthehu pas   Forum-Al.com™ > Bota e Kompjuterit > Arti Programimit

Arti Programimit Mėsoni dhe ndihmoni tė tjerėt tė hyjnė nė Artin e Programimit.

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
Pėrgjigje
 
Mundėsitė nė temė
i vjetėr 05-10-2010, 02:26   #1
Forum-Al
Aty ku shqiptarėt mblidhen
 
Avatari i Forum-Al
 
Data e antarėsimit: Jan 2010
Vendndodhja: Forum
Posts: 544
Thanks: 0
Thanked 14 Times in 12 Posts
Shuma e pikėve qė jep: 11
Forum-Al do tė bėhet i njohur mjaft shpejtForum-Al do tė bėhet i njohur mjaft shpejt
Bėjini faqet me AJAX tė “mbajnė mend”


Titulli nuk ėshtė edhe aq i kuptueshėm, por nuk mė vinte ndėrmend ndonjė mė interesant. Pėr t’a bėrė historinė sa mė tė shkurtėr, ajo qė do ju tregoj nė kėtė guidė ka tė bėjė me Javascript, thirrje AJAX dhe disa pėrpunime adresash pėr tė kuptuar nė cilėn faqe ndodhet vizitori.

AJAX ėshtė ndėr teknikat mė interesante tė viteve tė fundit, duke qenė se na lejon tė ndėrtojmė funksionalitete qė mė parė i takonin eksluzivisht aplikacioneve pėr desktop (dmth software-ve jo pėr web). Tashmė tė gjithė janė familiar me AJAX, qoftė nga ana teknike apo thjeshtė e dinė si funksionon. Megjithatė, AJAX ka dy probleme qė nė kohėt e para ishin goxha demotivuese pėr koduesit:

  1. Tė ndėrtosh njė thirrje AJAX me Javascript ėshtė tmerr. Objekti XMLHttpRequest nė shfletuesit modern ėshtė nė rregull, ndėrsa nė Internet Explorer 5 dhe 6 vjen nė formėn e njė ActiveX. Gjithashtu dėrgimi i thirrjeve pas nisjes sė objektit dhe marrja e tė dhėnave nuk ėshtė shumė miqėsore pėr ata qė e shohin pėr herė tė parė. Pėr fat tė mirė, jQuery ėshtė njė librari fantastike qė krahas shumė gjėrave, i bėn thirrjet AJAX aq tė lehta sa edhe njė 5 vjeēar mund t’i shkruajė. Kuptohet qė nė kėtė guidė do pėrdorim jQuery, qė tashmė ėshtė libraria de-facto e Javascript.
  2. Thirrjet AJAX kryhen nė mėnyrė asinkrone dhe normalisht nuk e ruajnė gjendjen. Pra, nėse thėrrasim njė informacion me AJAX dhe mė pas rifreskojmė faqen, informacioni do tė humbasė dhe faqja do tė kthehet nė gjendjen fillestare. Ky ėshtė edhe qėllimi i guidės, t’i bėjmė thirrjet AJAX tė “mbahen mend”.
Para se tė filloj me pėrmbajtjen e vėrtetė, mė duhet t’ju them se guida mund tė lexohet nga kushdo. Fillestarėt mund tė ndjekin shpjegimin e kodit pėr tė kuptuar ēdo rresht. Koduesit me eksperiencė mund tė pėrftojnė teknikėn dhe t’a implementojnė nė mėnyrėn qė e shohin mė tė mirė. Nė pėrgjithėsi kodi ėshtė i thjeshtė dhe s’duhet tė jetė problem tė kuptohet.

Pak mė teknikisht

Nė fjalė tė thjeshta ju shpjegova mė sipėr qė do bėjmė njė faqe e cila pėrdor AJA, tė mbajė mend. Pra tė ketė gjendje. Si ide ėshtė nė rregull, por po ju shpjegoj pak mė teknikisht si do e realizojmė.

Lidhjeve HTML do i vendosim njė shėnjues nė mėnyrė qė tė njohim kujt faqe i referohet njė lidhje. Kėtė do e bejmė duke i vendosur nė “href” njė lidhje tė brendshme tė tipit: #krye, #rreth. Pjesa “#” shtohet nė URL dhe nuk bėn asgjė tjetėr pėr vizitorin. Pėr ne ėshtė e rėndėsishme sepse do i pėrdorim pėr tė ngarkuar faqen e duhur, qoftė kur klikohet njė lidhje apo kur hapet direkt njė faqe nė formėn: faqja.com/#rreth. Nė kėtė mėnyrė i ofrojmė vizitorėve mundėsi tė ruajnė njė faqe dhe mos tė humbasin informacionin qė ndodhet nė tė, gjė qė ėshtė tipike me AJAX.

Ēfarė na duhet?

Asgjė mė tepėr se sa njė kompjuter me tastjerė, njė editor dhe njė kopje e librarisė jQuery. Pėr tė ndjekur guidėn do ju duhet edhe njė strukturė direktorish e ngjashme me atė qė kam bėrė unė. Shikoni foton mė poshtė.

Struktura e Direktorive


Direktoria “faqet” ėshtė mė e rėndėsishmja pėr guidėn, duke qenė se nė tė ruhen faqet e veēanta. Mund t’i vini ēfarėdo emri tė doni; thjeshtė do ju duhet ta ndėrroni nė kod.

Besoj e kuptuat vetė, por sidoqoftė po e them. Skedarėt HTML brenda direktorisė “faqet” mbajnė kodin HTML tė seksioneve tė ndryshme tė faqes qė do tė ndėrtojmė. Emrat janė arbitrarė (krye, rreth, etj) dhe tė njėjtat emra do i vendos elementėve tė menusė.

Kodi HTML

Unė kam bėrė njė dizenjo tė vogėl me njė menu tė futur nė listė tė parenditur. Kodin e tė gjithė faqes mund t’a shkarkoni nė fillim tė guidės, ndėrsa mė poshtė po ju tregoj pjesėn qė na intereson – atė tė menusė.

Nėse e vini re, atributi “href” i lidhjeve ėshtė njė lidhje e brendshme. Zakonisht pėrdoren pėr t’a drejtuar vizitorin nė njė pjesė tė caktuar tė faqes, por ne na duhet pėr tjetėr qėllim. Me Javascript do lexojmė atributin “href” dhe nė bazė tė tij do pėrfshijmė faqen e duhur. Shikoni gjithashtu qė emrat e lidhjeve i kam vendosur egzaktėsisht si titujt e skedarėve HTML nė direktorinė “faqet”.

Pjesa tjetėr e kodit HTML qė na intereson ėshtė vendi ku do ngarkohen faqet. Unė kam krijuar njė “div” me “id=permbajtja”.


Ky ėshtė i gjithė kodi HTML qė do tė pėrdorim. Tė kalojmė nė atė Javascript.

Logjika Javascript

Me kodin HTML gati, mund tė shkruajmė logjikėn Javascript qė vė gjithēka nė punė. Pėrfshini librarinė jQuery nė kodin tuaj dhe mė ndiqni me kujdes mė poshtė. Jam i sigurt qė nuk do keni problem t’a kuptoni.

$(document).ready(function() { //ketu vjen kodi ne vijim } Ky kod bėn qė egzekutimi i kodit nė vijim tė nisė vetėm kur dokumenti tė jetė ngarkuar me tė gjithė elementėt HTML tė tij. Nėse do tentonim tė aksesonim me Javascript elementė HTML tė pa krijuar, kuptohet qė nuk do funksiononte. Njė alternativė tjetėr pėr kėtė “problem” – dhe qė kėshillohet pėr performancė mė tė mirė (Yahoo Best Practices for Speeding Up Your Web Site), por qė mua personalisht s’mė pėlqen – ėshtė qė kodi Javascript tė vendoset i gjithi nė fund tė faqes. Nė kėtė mėnyrė egzekutohet pasi elementėt HTML tė jenė krijuar dhe nuk ka nevojė tė pritet kur dokumenti tė jetė ngarkuar. Zgjidhni mėnyrėn qė ju pėlqen.

var faqja_baze = 'krye'; var faqet_lejuara = ['krye', 'rreth', 'guidat', 'kontakt']; var adresa = String(document.location); Kam deklaruar tre variabla mė sipėr. Variabla “faqja_baze” ruan faqen qė do ngarkohet nėse nuk ėshtė pėrcaktuar njė faqe apo nėse faqja e pėrcaktuar nuk ndodhet nė listėn e faqeve te lejuara. Variabla “faqet_lejuara” mban listen e faqeve tė lejuara, njė element sigurie pėr mos tė lėnė mundėsi tė tentohet ngarkimi i ndonjė faqeje tjetėr. Ndėrsa variabla “adresa” mban URL-nė aktuale. Duke marrė URL-nė dhe duke e pėrpunuar me Javascript do pėrftojmė pjesėn “#faqja” dhe tė realizojmė “mbajtjen mend”. Vini re qė e kam kthyer nė tekst (string) sepse “document.location” kthen objekt dhe s’mund t’a pėrpunojmė si ē’ėshtė. Me String() bėjmė String Casting, duke e kthyer objektin nė ekuivalentin e tij tekst.

faqja = adresa.substring(adresa.lastIndexOf('#') + 1); Nė kodin mė sipėr marr pjesėn “faqja” qė ndodhet nė “faqja.com/#faqja”, pra bėj parse adresėn pėr tė pėrftuar faqen. Funksioni substring(fillimi, fundi) kthen porcionin e tekstit duke filluar nga karakteri “fillimi” (numėr) dhe duke mbaruar nė “fundi” (numėr). Nėse fundi nuk pėrcaktohet, merret deri nė fund tė tekstit. Funksioni lastIndexOf(karakteri) kthen pozicionin e fundit (si numėr) ku ndodhet karakteri. E pėrkthyer, marrim pozicionin e fundit tė karakterit “#” dhe e presim adresėn nga ai pozicion + 1 karakter (pėr tė hequr #). Si pėrfundim marrim faqen.

if ($.inArray(faqja, faqet_lejuara) == -1) { faqja = faqja_baze; } hapFaqen(faqja); Nė kodin mė sipėr kam bėrė njė if() dhe njė thirrje funksioni. Se ēfarė funksioni thirret do ja u tregoj pak mė tutje, prandaj mos u bėni merak. Pjesa if() kontrollon nėse “faqja” ndodhet nė vektorin “faqet_lejuara”, i cili kthen -1 nėse nuk gjendet. Funksioni $.inArray(kerkimi, vektori) ofrohet nga jQuery dhe ėshtė njė mundėsi e mirė pėr njė funksionalitet qė Javascript nuk e ofron. Nėse nuk doni tė pėrdorni jQuery, nė vend tė vektorit mund tė krijoni njė Object Literal dhe tė shikoni nėse faqja ndodhet brenda literalit pėrmes fjalės kyēe in. Do tė ishte diēka e ngjashme me:

var faqet_lejuara = {krye:1, rreth:1, guidat:1, kontakt:1}; if (faqja in faqet_lejuara) { //kodi ne vijim } Literalėt janė ndėr pjesėt mė tė bukura tė Javascript dhe qė i japin fuqinė shpesh tė nėnvlerėsuar. Kjo ėshtė temė mė vete, por doja thjeshtė t’ju jepja njė ide.

Deri tani kemi marrė adresėn, e kemi pėrpunuar dhe kemi kontrolluar nėse ndodhet nė listėn e bardhė. Na mbetet tė kodojmė eventin e klikimit mbi lidhjet e menusė.

$('#koka').find('a').click(function() { hapFaqen($(this).attr('href')); }); Edhe kėtu kam thirrur funksionin hapFaqen() kur njė lidhje klikohet dhe ka shumė mundėsi qė po bėheni tė padurueshėm pėr pėrmbajten e tij. Do kalojmė aty pėr pak! Mė duhet t’ju shpjegoj disa gjėra mbi kodin mėsipėr. Sė pari kam pėrdorur funksioni find(), nė vend tė shkruaja selektimin direkt nė shkurtimin qė ofron jQuery (nė formėn “#koka a”). Do funksiononte shumė mirė edhe nė atė rast, thjeshtė do ishte mė intensive. Funksioni find() ėshtė funksion i Javascript dhe si i tillė pėrdor pak resurse. Ndėrsa selektimet me jQuery vėnė nė punė disa ingranazhe tė brendshme qė marrin kodin HTML tė faqes, kėrkojnė mė Regular Expressions dhe nė fund japin rezultatet. Sa mė kompleks selektimi, aq mė intensiv ėshtė proēesi. Prandaj mundohuni tė pėrdorni find() sa mė shumė.

Njė tjetėr gjė interesante e jQuery $(this), e cila i referencohet elementit nė tė cilin ndodhem. Nė rastin tonė i referencohet lidhjes “a” qė ėshtė klikuar. Nėse nuk do pėrdorja $(this), do mė duhej t’a shkruaja edhe njė herė selektimin. Sė fundmi, thėrras funksionin hapFaqen() duke i kaluar si parametėr atributin “href” tė lidhjes i cili mban emrin e faqes. Funksioni attr() i jQuery kthen vlerėn e atributit tė pėrcaktuar.

Jemi drejt fundit dhe kemi krijuar funksionalitetet bazė. S’na mbetet gjė tjetėr pėrveē se tė shohim ēfarė pėrmban ky funksioni hapFaqen().

function hapFaqen(faqja) { //ketu vjen kodi ne vijim } Mė sipėr krijova definicionin e funksionit dhe parametrin “faqja” qė ai merr. Kėtė parametėr e kemi kaluar dy herė deri tani: njė herė kur njė lidhje klikohet dhe njė herė nė fillim tė egzekutimit kur pėrcaktuam faqen nga adresa.

if (faqja.indexOf('#') > -1) { faqja = faqja.substring(1); } Kodi mė sipėr kontrollon nėse faqja pėrmban “#”, sepse nė dy rastet e thėrritjes sė funksionit kemi tekste tė ndryshme pėr faqen. Nė rastin e klikimit tė lidhjes, na kthehet njė faqe qė pėrmban “#”, ndėrsa nė rastin e ngarkimit tė faqes nga adresa, faqja nuk ka “#”. Me indexOf() kontrollojmė nėse pėrmban “#” dhe nėse po, e fshijmė atė me funksionin substring(). Kėtė tė fundit e shpjegova mė sipėr gjatė guidės.

$('#permbajtja').css('display', 'none'); Ky kod ėshtė vetėm pėr estetikė dhe pėr asgjė mė tepėr. Duke qenė se pas ngarkimit tė faqeve dua t’a shfaq informacionin me efekt (fade in), nėse “div”-i i pėrmbajtjes nuk ka “display:none” efekti nuk do shfaqet. Duke i vendosur “display:none” ēdo herė qė thirret funksioni hapFaqe(), sigurohem qė efekti tė ndodhė.

$('#permbajtja').load('faqet/' + faqja + '.html', function(){ $('#permbajtja').fadeIn('slow'); }); Ky ėshtė dhe kodi i fundit pėr kėtė guidė dhe pjesa ku ngarkojmė skedarin HTML, marrim pėrmbajtjen e tij dhe e vendosim nė “div”-in e pėrmbajtjes. Funksioni load() ėshtė mėnyra mė e thjeshtė qė egziston pėr tė bėrė thirrje AJAX. Mjafton tė vendoset faqja! Nė rastin tonė, faqja HTML ngarkohet nė varėsi tė variablės “faqja”, e cila ka marrė vlerė nga klikimi nė njė lidhje apo nga pėrpunimi i adresės. Parametri i dytė i funksionit load() ėshtė njė funksion anonim i cili egzekutohet nė momentin kur thirrja AJAX pėrfundon. Unė e kam bėrė qė kur thirrja tė pėrfundojė, “div”-i i pėrmbajtjes tė shfaqet me njė efekt tė thjeshtė. Mė lehtė se kaq s’ka ku tė shkojė!

Pėrfundimi

Me librarinė jQuery dhe njė teknikė shumė tė thjeshtė kemi mėnjanuar dy probleme tė mėdha tė AJAX. Kemi bėrė thirrje AJAX me minimumin jetik tė kodit dhe faqen tonė e kemi bėrė tė mbajė mend. Teknika mund tė implementohet si ē’ėshtė pėr faqe tė vogla tė cilat nuk kanė shume seksione. Ndėrsa pėr faqe tė mėdha do ju duhet tė lodheni shumė mė tepėr. Po ju jap disa ide:

  • Mund tė ofroni mėnyrė standarte ngarkimi pėr ata qė s’kanė Javascript. Kjo ėshtė e rėndėsishme pėr tė rritur aksesueshmėrinė dhe nė njė faqe serioze nuk mund tė anashkalohet.
  • Mund tė kaloni nė adresė mė shumė se njė parametėr, nė formėn: #kat=8;id=10. Me Javascript mund t’i merrni lehtė parametrat.
  • Parametrat e adresės mund t’i kaloni nė njė skedar PHP qė shėrben si ndėrfaqe midis thirrjeve AJAX dhe logjikės PHP tė faqes. Ky kod mund tė thėrrasė klasa/funksione qė shėrbejnė pėr tė shfaqur normalisht pėrmbajtjen.
AJAX ėshtė njė ide shumė e mirė pėr t’i ofruar eksperiencė mė tė bukur vizitorėve dhe pėr tė kursyer trafik (sepse ngarkohet vetėm njė pjesė, jo e gjithė faqja). Megjithatė, nė faqe shumė tė mėdha mund tė jetė mė tepėr pengesė se sa fasilitet. Mund tė bėhet tepėr e komplikuar tė kodohet dhe mirėmbahet pėr faqe qė kanė qindrja apo mijėra artikuj dinamik, seksione tė ndryshme me ndėrfaqe tė ndryshme, shumė module, etj. Prandaj mundohuni tė pėrmbaheni nė zgjedhje

Shpresoj tė ketė qenė lexim interesant dhe t’ju ketė shėrbyer si teknikė. Mos hezitoni tė komentoni pėr ēdo pyetje, sugjerim apo kritikė.

Mėsim tė mbarė.

Bėjini faqet me AJAX tė “mbajnė mend” është një postim nga: Feniksi.Com - Thesari i Njohurive



Forum-Al.com
Aty ku shqiptarėt mblidhen!
Forum-Al nuk ndodhet nė linjė   Pėrgjigju pėrmes citimit
i vjetėr 21-02-2015, 09:54   #2
Hawk
V.I.P
 
Avatari i Hawk
 
Data e antarėsimit: Nov 2014
Posts: 6,591
Thanks: 2,496
Thanked 2,457 Times in 1,272 Posts
Shuma e pikėve qė jep: 130
Hawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėmHawk i pazėvėndėsueshėm
Pėrgjigje e: Bėjini faqet me AJAX tė “mbajnė mend”

AJAX ka mundesuar qe Web Aplikacionet te imitojn Desktop Aplikacionet.

Nje shembull praktik per AJAX nga W3schools.

http://www.w3schools.com/ajax/tryit....yajax_database

Citim:
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlht tp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();

}
</script>
</head>
<body>

<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>
Ke nje dropdown list me opcione, ke emrat e klienteve dhe ne baz te zgjedhjeve nxjerre te dhenat e klientit nga Databaza, pra duke derguar ne server vetem kodin qe na intereson e jo komplet html faqen.

Libri nga Head First-serite per AJAX-in eshte i mire.

http://www.headfirstlabs.com/books/hfajax/
__________________
Remember, today is the tomorrow you thought about yesterday.
Hawk nuk ndodhet nė linjė   Pėrgjigju pėrmes citimit
Pėrgjigje

Mundėsitė nė temė

Rregullat e postimim
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB kodi ėshtė ndezur
Smiliet janė ndezur
Kodi [IMG] ėshtė ndezur
Kodi HTML ėshtė fikur