i

Parathnie

Aplikacionet web jan t ekspozuar n internet ndaj ndrtimi i tyre e

prball programuesin me mundsi e problematika t ndryshme nga

aplikacionet pr desktop.

Duke qen t ekspozuar n internet aplikacionet duhet t jen t

ndrtuara pr tu br ball sulmeve q synojn t gjejn vrima sigurie

n to.

Aplikacionet nuk kan nevoj pr instalim ndaj edhe numri i

prdoruesve t njkohshm i tyre mund t jet i madh dhe n disa

raste shum i vshtir pr tu parashikuar.

Natyra e jetess ka rritur nevojn pr t prdorur aplikacionin

nprmjet ndrfaqeve jo tradicionale si si nga pajisjet celulare apo

nprmjet zrit dhe telefonit.

Shpesh koha q kemi n dispozicion pr ndrtimin dhe modifikimin e

nj aplikacioni web sht e shkurtr. Nj analiz e kujdesshme

paraprake, nj njohje e mir e mjeteve n dispozicion dhe zbatimi i nj

metodologjie q ndan dizenjimin nga programimi, na mundson q t

aplikojm ndryshime n aplikim, n mnyt t vecant n ndrfaqen

e tij, n nj koh t shkurtr dhe t ndajm punn n ekip.

Ky libr ju njeh me mjetet dhe teknikat pr ndrtimin e aplikimeve

web n platformn php&mysql. Kjo sht nj platform me kod

burimi t hapur prandaj aplikacionet e ndrtuara n kt platform

nuk kan kosto pr licenca t software, ndaj edhe jan me kosto t

ult pr hostimin.

Libri fillon me mjetet e programimit n klient, html dhe javascript

dhe vazhdon m tej me PHP dhe MySQL.

ii

Sqarimet n libr jan bazuar shum n shembuj konkret dhe n

fund t leksioneve ka ushtrime q do t shrbenin pr prforcimin e

njohurive t marra gjat leksionit.

Nj faqe interneti sht ndrtuar pr t dhn zgjidhjet e disa

ushtrimeve si edhe pr informacione shtes ndihmse si udhzime

pr instalimin e platforms apo teknika dhe truke n ndrtimin e

aplikimeve.

Informacionet shtes n lidhje me librin do ti gjeni n adresn

http://ictedu.info/books

Autort

iii

Pasqyra e lnds

Parathnie ....................................................................................................... i

Pjesa I - Programimi Client Side ................................................................ 1

1. HTML......................................................................................................... 2

1.1 Bazat e HTML ..................................................................................... 3

1. 2 Struktura e dokumenteve HTML .................................................... 4

1.3 Fontet .................................................................................................... 8

1.4 Linket ................................................................................................. 11

1.5 Listat ................................................................................................... 13

1.5 Imazhet .............................................................................................. 15

Ushtrime .................................................................................................. 17

2. Tabelat ..................................................................................................... 18

2.1 Dizenjimi i faqes nprmjet tabelave ............................................. 22

Ushtrime .................................................................................................. 24

3. Format ...................................................................................................... 25

3.1 Elementt e Forms .......................................................................... 26

Ushtrime .................................................................................................. 31

4. CSS .......................................................................................................... 33

4.1 SPAN dhe DIV ................................................................................. 34

4.2 Tipare t tjera t CSS ........................................................................ 34

4.3 Trashegimia ....................................................................................... 35

Ushtrime .................................................................................................. 39

5. JavaScript ................................................................................................. 40

5.1 Programi i pare ................................................................................. 40

5.2 Elementet baze te JavaScript ........................................................... 41

5.3. Tipet e te dhenave dhe variablat ................................................... 41

Ushtrime .................................................................................................. 43

5.4 Strukturat e kontrollit ..................................................................... 44

5.5 Eventet ............................................................................................... 49

5.6 Objektet .............................................................................................. 51

5.7 Prcaktimi i objekteve ne JavaScript .............................................. 51

5.8 Vektort............................................................................................. 52

Ushtrime .................................................................................................. 55

5.9 Funksionet ......................................................................................... 56

iv

5.10 jQuery ............................................................................................... 57

5.11. Aplikime JavaScript ...................................................................... 60

6. DOM ........................................................................................................ 70

Pjesa II - Programimi Server Side ............................................................ 75

7. Prezantim me PHP ................................................................................. 77

7.1 Sintaksa, Variablat dhe Operatoret ................................................ 79

7.2 Tipet e t dhnave ne PHP .............................................................. 79

7.3 Operatort.......................................................................................... 80

Ushtrime .................................................................................................. 82

8. Strukturat e kontrollit ne Php .............................................................. 83

8.1 Degzimi i kodit nepermjet If .. else .............................................. 83

8.2 Cikli FOR ........................................................................................... 83

8.3 Cikli While dhe cikli do .. while ..................................................... 85

8.4 Degzimi i kodit me instruksionin switch .. case ........................ 87

Ushtrime .................................................................................................. 92

9. Stringjet ne PHP ..................................................................................... 95

9.2 Funksionet mbi stringjet .................................................................. 97

9.2 Ruajtja e rreshtave t rinj nga teksti n html .............................. 100

Ushtrime ................................................................................................ 101

10. Funksionet dhe modulimi i kodit .................................................... 103

10. 1 Kalimi i argumentave nj funksioni ......................................... 104

10. 2 Funksionet rekursive .................................................................. 106

10.3 Prfshirja e skedarve n skedar t tjer PHP ........................ 107

Ushtrime ................................................................................................ 113

11. Komunikimi me browserin .............................................................. 114

Ushtrime ................................................................................................ 122

12. Array ne PHP ...................................................................................... 123

12.1 Deklarimi i nje array .................................................................... 123

12.2 Perdorimi i Array ......................................................................... 125

Ushtrime ................................................................................................ 130

13. Puna me skedart ............................................................................... 132

13.1 Hapja e skedarve nprmjet funksioni fopen() ...................... 132

13.2 T lexojm skedarin rresht pr rresht nprmjet funksionit

fgets() ...................................................................................................... 134

v

13.3 T lexojme skedarin karakter pr karakter nprmjet funksionit

fgetc() ...................................................................................................... 134

13.4 T shkruajm n skedar nprmjet funksionit fwrite().......... 135

13.5 Funksionet mbi datn dhe kohn............................................... 138

Ushtrime ................................................................................................ 140

14. Cookie-t dhe Sesionet ........................................................................ 141

14. 1 Ruajtja e gjendjes s aplikimit n sesion .................................. 141

14.2 Startimi i sesionit .......................................................................... 143

14.3 Cookie-t .......................................................................................... 144

14.4 Drgimi i email ............................................................................. 146

Ushtrime ................................................................................................ 150

15. Lidhja e PHP me MySQL .................................................................. 152

15.1 Hyrje n bazat e t dhnave ........................................................ 153

15.2 Relational Database Management Systems (RDBMS) ............ 156

15. 3 Gjuha pr bazat e t dhnave relacionale, SQL(Structured

Query Language) .................................................................................. 161

15.4 Tipet e t dhnave ........................................................................ 163

15.5 Tipet e t dhnave tekst ............................................................... 167

15. 6 Operatort dhe funksionet ......................................................... 169

15. 7 Funksionet mbi stringjet ............................................................. 170

15.8 Funksionet mbi kohen ................................................................. 171

15.9 Komanda SELECT ........................................................................ 173

15.10 Modifikimi i t dhnave (INSERT,UPDATE,DELETE) ........ 182

15.11 Shembull ngarkimi i imazheve................................................. 190

Teste ........................................................................................................... 196

Referencat .................................................................................................. 202

Programim n Web

1

Pjesa I - Programimi Client Side

Programim n Web

2

Dizenjmi Web sht krijimi i faqeve Web dhe siteve duke prdorur HTML, CSS, JavaScript dhe gjuh t tjera Web. Ai sht si dizajni n prgjithsi: sht kombinimi i vijave, formave, tekstit, dhe ngjyrave pr t krijuar nj pamje estetikisht t kndshme. Dizenjmi Web sht puna e krijimit t dizajnit pr faqet Web. 1. HTML HTML (Hypertext Markup Language) sht nj gjuh shenjash t cilat na lejojn t shfaqim nj prmbajtje t pasur me element t ndryshme, tu referohemi burimeve t tjera (sic mund t jen imazhet, etj.), si dhe t krijojm lidhje me dokumente t tjera pr procesim t mtejshm. HTML prdoret pr t krijuar dokumente me struktur HyperText. Nj dokument HyperText prmban informacion q sht i ndrlidhur me dokumente t tjera, duke na lejuar ne t kalojm nga njri dokument n tjetrin duke shfrytzuar t njjtin aplikacion q po prdornim pr t par dokumentin fillestar. HTML mund t prdoret gjithashtu pr t krijuar dokumente multimediale,p.sh ato q prmbajn informacion i cili nuk sht thjesht tekst si : Imazhe Tinguj Video Nn programe (plug-ins) Documentat HTML quhen "Web pages". Browser merr faqet e Web nga Serveri Web q mund t ndodhet kudo n Internet. Pr t shkruar HTML mund t prdoren editort e tekstit si psh NotePad. HTML sht aktualisht n versioni 4.01 dhe vazhdoj t ofroj veori t avancuara pr t krijuar faqe me prmbajtje edhe m t pasur. sht krijuar nj specifikim i prputhshm me HTML, XHTML (Extensible Hypertext Markup Language) e cila prdor sintaksn e XML dhe sjell nj XML Schema qe mund te prdoret pr te vlersuar nj dokument, pr te kontrolluar nse ai sht i krijuar sakt etj.

Programim n Web

3

HTML nuk sht gjuha e vetme n dispozicion pr krijimin e dokumenteve HyperText, ka gjuh q vin para dhe pas HTML (SGML, XML, etj), por HTML sht br gjuha e rekomandimit W3C pr krijimin e prmbajtjes pr Internetin. 1.1 Bazat e HTML

Dokumentet HTML jan krijuar si dokumente me tekst t thjesht (me formatim jo t veant) n t cilin i gjith teksti i formatuar sht prcaktuar duke prdorur shenja tekstuale t quajtura tag-e. Tag-et jan shenjat tekstuale q fillojn me karakter . Tag-u hapes do t dukej si me posht:

Fundi i tag-ut fillon me karakter . Tag-u mbylls do t dukej si m posht:

Tag-et jan case-sensitive, kuptimi dhe funksioni i tyre ngelet i njjt pavarsisht nse jan shkruar me grma te mdha apo me grma t vogla. Shembull: emri i dokumentit

Shembull i prdorimit t tag-eve pr t shnuar

tekst

BoldItalicsBold

Atributet e tag-eve t cilat tregojn parametrat e tjera vendosen n tag-et hapse si m posht:

Forma e ktyre atributeve shfaqet ose vetm me emrin e atributit emri i atributit i ndjekur nga =, ndjekur nga vlera q ne duam t caktojm at . Pr shembull: Lidhz

Programim n Web

4

N disa raste, n HTML mund edhe t mos i prdorim tag-et mbylls, kjo n rastet ku ato nuk rrethojn tekst si p.sh rasti i msiprm i nj imazhi. 1.2 Struktura e dokumenteve HTML T gjitha dokumentet HTML kan pak a shum t njjtn struktur. I gjith dokumenti duhet t prfshihet n nj tag HTML dhe sht i ndar n dy pjes : pjesa e koks, e prfshire n nj tag HEAD dhe trupin e dokumentit (q prmban informacionin e dokumentit), i cili sht i prfshir brenda nj tag-u t quajtur BODY. Koka prmban disa prkufizime t dokumentit: titullin e tij, shnime shtes, fjal kye etj. Nj shembull mund te jet:

vendoset titulli Permbajtja e dokumentit

Programim n Web

5

Titulli i dokumentit Cdo document HTML ka nj titull. Pr t caktuar titullin e dokumentit prdoret komanda , psh: Dokumenti im I pare ne HTML

Titulli vendoset midis tag-ut haps dhe tagut mbylls . Titulli vendoset n seksionin e koks . Komentet N HTML, ne mund t fusim komente n faqe duke e vendosur tekstin brenda tag-eve: . Prmbajtja brenda ktyre dy shenjave injorohet nga browser-i dhe nuk shfaqet te prdoruesit. Paragraft Tag-u

prdoret pr t ndar paragraft. Meqense HTML injoron ndrprerjen e rreshtave t marra nga skedari origjinal dhe i gjith teksti sht i vazhdueshm pr HTML, ne kemi nevoj pr nj mekanizm pr t treguar fillim dhe fundin e paragrafve, ky mekanizm sht siguruar nga

dhe

. Tag-u P mund t ket gjithashtu nj atribut ALIGN, q tregon drejtimin e tekstit n paragraf. Kjo mund t marre nj nga vlerat e mposhtme: LEFT, e pozicionuar n t majt. RIGHT, e pozicionuar n t djatht. CENTRAL, teksti i qendrzuar Ndrprerje rreshti Tag-u tregon nj ndrprerje rreshti. Ai mund t prdoret si nj shenj fillestare dhe nuk krkon nj tag mbylls. BR nuk do t ndryshoj parametrat e prcaktuara pr paragrafin n t cilin ne jemi t vendosur n kt koh.

Ndarja e teksteve n blloqe

Elementi prdoret pr t ndar tekstin n blloqe duke futur nj

rresht t vetm midis blloqeve si BR, edhe pse ai mund t ket cilsi t

njjta, si P, ne mund t prcaktojm drejtimin e tekstit pr secilin bllok

Programim n Web

6

DIV. Parametri ALIGN te DIV merr vlerat e mposhtme:

LEFT

RIGHT

CENTRAL

Tekst i para-formatuar

Teksti i futur n mes t tag-eve dhe do t shfaqet nga browser-i n prputhje me formatin me t cilin teksti sht shkruar duke ln t pa ndryshuar do ndrprerje rresht apo hapsir. N shembullin e mposhtm mund t shohim prdorimin e disa prej ktyre tag-eve:

Rreth Shqipris

Shqipria ka nj siprfaqe prej 28.748 km2. Ajo sht e

pozicionuar n pjesn jug perndimore t gadishullit

Ballkanit dhe kufizohet n veri me Malin e Zi, n veri-

lindje me Kosovn, n lindje me Maqedonin dhe n jug e

jug -lindje me Greqin. N perndim vendi laget nga

ujrat e deteve Adriatik dhe Jon. Shqipria ndahet n

katr zona fiziko - gjeografike (Alpet e Shqipris,

Krahina Malore Qndrore, Krahina Malore Jugore dhe

Ultsira Perndimore).

Klima e Shqipris sht tipike mesdhetare, me ver t

nxeht e t that dhe dimr relativisht t but dhe t

lagt. N pjest malore, n brendsi t vendit

veanrisht n veri, dimri sht i ashpr dhe me

dbor, ndrsa vera sht e freskt me temperatur t

kndshme.

Shqipria sht n prgjithsi vend malor. Malet dhe

kodrat zn 2/3 e siprfaqes. Maja m e lart e vendit

sht Korabi 2.763 m, n rrethin e Dibrs n veri -

lindje t vendit. Ultsirat t cilat zn 1/3 e

siprfaqes shtrihen prgjat bregdetit Adriatik si dhe

n zonn e Kors n jug - lindje t vendit.

Programim n Web

7

Lumenjt kryesor jan: Drini, Vjosa, Shkumbini, Semani,

Mati, Buna. Prej tyre vetm Buna, n rrjedhn e poshtme

sht i lundrueshm. M shum se nj e treta e

Shqipris sht e mbuluar nga pyje. Nj e treta sht

kullot dhe vetm rreth nj e pesta sht e kultivuar.

Shqipria ka nj pozicion mjaft t prshtatshm

gjeografik pr zhvillimin e industris turistike me nj

akses mjaft t volitshm ndaj tregjeve kryesore

evropiane, me nj potencial klimaterik shum t

favorshm, me nj shtrirje t gjat plazhesh ende t

pastra, dhe me male t lart dhe liqene t shumt t

mdhenj e t vegjl..

Kodi HTML do t shfaqet si m posht:

Programim n Web

8

1.3 Fontet HTML prmban edhe tag-e pr ndryshimin e atributeve te teksteve tona si fontin dhe ngjyrn. Headers Ekziston nj element i quajtur q n HTML mund ta prdorim pr te prcaktuar pjest e tekstit q duam ti konsiderojm si headers (seksione,kapituj etj). Ky tag i cakton nj madhsi m t madhe tekstit (n baz t x, si do ta shohim), e bn at m t nxir (bold) si dhe vendos fillimin e nj paragrafi mbas ktij header-i. Madhsia e header mund t ndryshojn nga 1n 6 dhe kemi 6 tag-e t mundshme: H1, H2, H3, H4, H5 dhe H6. Font-et N HTML prdoret tag-u FONT pr ti dhn tekstit stile , ngjyra dhe efekte t ndryshme t cilat bjn q ai t duket m i kndshm kur t afishohet n faqen ton t web-it. N HTML 4.01 ky tag nuk prdoret dhe funksioni i tij zvendsohet duke prdorur CSS te ciln do ta studiojm n vazhdim. Font styles HTML ofron nj sr tag-esh t cilat mund t prdoren pr ti vendosur stile t ndryshme tekstit q ndodhet brenda ktyre tag-eve. Disa prej tyre jan: B (bold). I (italics). U (underlined). STRIKE (strikethrough). SUP (superscript). SUB (subscript). BLINK TT (teletype). BIG (big). SMALL (small). N HTML, ne mund ti vendosim tekstit edhe disa stile njkohsisht si mund t jet bold dhe italic si m posht:

Programim n Web

9

Tekst me dy stile t ndryshme.

M posht sht paraqitur nj shembull i cili ilustron prdorimin e stileve te siprprmendura.

Titulli i dokumentit

Header H1

Header H2

Header H3

Header H4

Header H5

Header H6

Font size

1 2

3 4

5 6

7 6

5 4

3 2

1

Colours

CO

LO

RE

S . D

E . L

ET

RA

S

Bold Italics

Underlined

Programim n Web

10

Strikethrough

ASuperscript

BSubscript

Blidhzing

Typewriter(Teletype) Big

text Small text

M posht jepet rezultati q shfaqet n browser pas ekzekutimit t kodit te msiprm. Header H1 Header H2 Header H3 Header H4 Header H5 Header H6 Font size 1 2 3 4 5 6 7 6 5 4 3 2 1 Colours CO LO RE S . D E . L ET RA S Bold Italics Underlined Strikethrough ASuperscript BSubscript Blidhzing Typewriter(Teletype) Big text Small text Vendosja e karaktereve t veanta HTML prdor disa kode t veanta pr t mundsuar shtypjen e karaktereve t cilat nuk i shkruajm dot nga tastiera. Tabela e mposhtme paraqet kodet dhe simbolin q ato prfaqsojn.

Programim n Web

11

Kodi Rezultati

, , , ,... or < > & "

,,,,... O a Trademark Copyright Registered (non-breaking space) < > & "

1.4 Linket Nj nga tiparet kye t Web-it, e cila e ka br dhe m t suksesshm at, sht lidhja ndrmjet dokumenteve t cilat ndodhen n servera t ndryshm. Lidhja mund t bhet me imazhe, audio, video si dhe me faqe web-i t tjera. Lidhjet mund t krijohen duke prdorur tag-un A dhe atributet e tij NAME, HREF,TARGET. Nse lidhza bn lidhjen e faqes me nj faqe tjetr, ku kjo e fundit sht pjes e t njjtit site ather lidhza njihet si linke brendshme. Nse lidhza ju lidh me nj faqe t re, por te site tjetr ather lidhza njihet si linke jashtme. Gjithashtu mund t krijojm nj linke cila t na oj n nj pjese tjetr t s njjts faqe. Nj link specifikohet me an t tag-ut . do gj q shkruhet midis tag-ut haps dhe tag-ut mbylls do t jet pjes e lidhzs e cila pasi klikohet nga prdoruesi do t kaloj n faqen e re. Linket n nj faqe te re WEB Pr t lidhur nj faqe me nj faqe tjetr nevojitet q tag-u haps t prmbaj atributin href dhe vlera e atributit sht emri i skedarit pr tek i cili nevojitet t kalojm. Nj shembull mund t jet:

Programim n Web

12

Kthehu tek Shembulli i pare

Nevojitet q t dy skedart ( fshembulli1.html dhe shembull2.html) t gjenden n t njjtn dosje. Kur t klikojm mbi link Linku qe un krijova do t hapet faqja shembull1.html n t njjtn dritare. Nse duam t kalojm n nj faqe t re t nj site tjetr prsri do t prdorim elementin dhe atributin href por ksaj here duhet q si vler t atributit href t vendosim URL-n e plot faqes ku duam t shkojm. Si p.sh :

A doni te vizitoni faqen e UAMD-

se?

Kur t krijoni lidhza kini parasysh q t prdorni fjal t cilat prkufizojn n mnyr sa m koncize faqen ku ju do t drejtoheni. Nga ana tjetr pr t ndihmuar prdoruesin nga ana vizuale kshillohet q linket t ngjyrosen n mnyr q t bhen m t dukshme midis fjalve t tjera t prmbajtjes s faqes. Shum dizenjues t web-it prdorin imazhet brenda elementit . N rast se prdorni figurat duhet q ajo t jet shpjeguese e mir e faqes tek e cila t drejton. Brenda elementit mund t prdoret edhe atributi title dhe vlera e tij do t jet shpjegimi q ju doni t shfaqet n rastin se afrojm mousin mbi lidhz. Ky trik sht i vlefshm sidomos n rastet kur lidhza sht figur. Kshtu p.sh. shtojm n shembullin ton rreshtat e mposhtm:

Google eshte nje motor kerkimi shume

i fuqishem.

http://www.google.com/

Programim n Web

13

Lidhja e adresave email N disa raste kemi par q n faqe shfaqen adresat e personave t ndryshm dhe pasi klikoni mbi to hapet nj dritare e cila jep mundsin e drgimit t nj emaili adress s sapo klikuar. Pr t krijuar nj link mbi nj adres email-i duhet t shtoni atributin href i cili si vler duhet t ket: emer@shembull.com 1.5 Listat N HTML kemi dy lloje listash: Unordered list q jan n formn e pikave t plota t mbushura Ordered list q jan nj sekuenc me numra apo shkronja Shembull i listave te parenditura

List e parenditur:

Kafe

Caj

Qumesht

mailto:emer@shembull.commailto:emer@shembull.com

Programim n Web

14

Shembull i listave te renditura

Liste e renditur:

Kafe

Caj

Qumesht

Shembull i listave te nderthuruara

List e nderthurura:

Kafe

Caj

Caj i Zi

Caj Jeshil

Qumesht

Programim n Web

15

1.5 Imazhet Pr t vendosur imazhet ose grafikt n nj faqe Web prdoret nj tag i vetm i quajtur . ka disa atribute t cilat prcaktojn se cilin skedar imazhi do t prdorim, madhsin e tij etj. Atributi i cili prcakton imazhin q do t shfaqet sht SRC. Me an t ktij tag-u ne mund t prcaktojm nj URL pr skedarin e imazhit q do t krkohet n server pr tu paraqitur n browser. Imazhi mund te jet i ruajtur n fardo direktorie mjafton q vlera q ne do ti japim tag-ut SRC t jet nj URL. Nse duam q ti shtojm nj tekst imazhit ton prdorim atributin ALT. Atributet WIDTH dhe HEIGHT prdoren pr t prcaktuar prmasat me t cilat duam q t shfaqet imazhi n faqen e Web-it. Nse ne nuk i prcaktojm kto prmasa, browseri do ta shfaqi imazhin me prmasat qe ka vet imazhi.

Ky imazh do t shfaqej n browser m an t kodit t mposhtm.

Programim n Web

16

Document title

Imazhet mund t krijohen n mnyra dhe formate t ndryshme. Browseri njeh formatet GIF, JPEG dhe PNG. Pr t shmangur mungesat sht mir t mos prdorim imazhe shum t mdha.

Programim n Web

17

Ushtrime

1. Ndrtoni nj faqe web e cila t prmbaj tekstet si m posht: emrin tuaj me ngjyr jeshile dhe font Tahoma. Nj paragraph me 4-5 fjali ku secila prej tyre ka nj formatim ndryshe.

2. Ndrtoni nje faqe web e cila afishon prshkrimin e nj libri,

sipr prshkrimit ndodhet titulli I librit I cili sht I nnvijzuar dhe me tekst t theksuar. N fund t prshkrimit vendosni nj imazh I cili prfaqson kapaku i librit.

3. Afishoni n nj faqe web nj imazh I cili ka nj border me

madhsi 2, gjersi dhe lartsi 200.

4. Ndrtoni nj faqe web ku t ruani profilin Tuaj n formn e nj CV t shkurtuar. Vendosni aty nj foto Tuajn. Prdorni headings dhe paragraft. Prdorni, tagun pr t krijuar lidhje me profilin Tuaj n facebook apo linked in. Prdorni listat pr t ilustruar njohurit Tuaja kompjuterike dhe t gjuhve t huaja (gjuha, sqarimi, p.sh anglisht, shum mir , si n llojin e tret t listave).

Programim n Web

18

2. Tabelat

HTML ka nj grup tag-esh te cilat prdoren pr t paraqitur tekstin n formn e nj tabele. Kto tag-e jan: TABLE: shnon fillimin dhe mbarimin e nj tabele TR: shnon fillimin dhe mbarimin e nj rreshti TH: shnon fillimin dhe mbarimin e nj qelize ne kokn e tabels TD: shnon fillimin dhe mbarimin e nj qelize CAPTION: prdoret pr ti vendosur tabels nj titull Kodi pr nj tabel t thjesht do t ishte:

Header 1...Header n

Cell 1.1...Cell n

...

Cell 1.1...Cell n

Title

Sic mund t shohim n pjesn e kodit tabela vendoset brenda tag-eve TABLE. do rresht duhet t vendoset brenda tag-eve dhe . Pr t paraqitur qeliza t veanta kemi dy mundsi: duke prdorur tag-un ose . Dallimi sht se mundsia e par prdor tekst bold dhe e qendrzon kolonn. Tag-u TABLE ka disa atribute t cilat shrbejn pr ti dhn tabels formatin q na nevojitet. BORDER: prcakton madhsin e konturit t qelizs. CELLSPACING: prcakton madhsin n pika t hapsirs ndrmjet qelizave. CELLPADDING: prcakton distancn n pika ndrmjet prmbajtjes s nj qelize dhe borderit t saj. WIDTH: specifikon gjersin e tabels, mund t paraqitet me pika ose ne prqindje duke u bazuar n raportin q ajo ka me gjersin totale. P.sh 100% prfaqson gjersin e t gjith dritares s browserit. ALIGN: pozicionon tabeln n lidhje me faqen, n t majt(LEFT), n t djatherte (RIGHT) ose n qendr (CENTER). BGCOLOR: prcakton ngjyrn e tabels.

Programim n Web

19

Shembull tabele n t ciln prfshihen edhe atributet e msiprme:

Document title

1.1 dhe 1.2

1.3

2.1 dhe 3.1

2.2

2.3

3.2

3.3

Programim n Web

20

Tabele e

Thjeshte

Tabele me ngjyra dhe imazh

Maj

Qershor

Korrik

Gusht

22

23

3

29

1234

1537

7

1930

11000

13000

-500

60930

Programim n Web

21

thead, tfoot, dhe tbody Tag-u prdoret pr t grupuar prmbajtjen e headerit t nj tabele HTML. Elementi thead duhet t prdoret bashk me elementt tbody dhe tfoot. Elementi tbody prdoret pr t grupuar prmbajtjen e body n nj tabel HTML dhe tag-u tfoot prdoret pr t grupuar prmbajtjen e footer-it. N nj tabel tag-u duhet t shfaqet para n mnyr q nj browser t mund shfaq footer-in prpara se t marr t dhnat e t gjith rreshtave. Shembull i prdorimit t tag-eve thead, tfoot, dhe tbody:

Month

Savings

Sum

$180

January

$100

February

$80

http://www.w3schools.com/TAGS/tag_tbody.asphttp://www.w3schools.com/TAGS/tag_tfoot.asp

Programim n Web

22

2.1 Dizenjimi i faqes nprmjet tabelave Tabelat n website jan prdorur pr dy arsye :

Pr t organizuar dhe shfaqur informacionin n formn e nj tabele, kur nj gj e till sht e nevojshme.

Pr t krijuar layoutet e nj faqe duke prdorur tabelat e fshehura.

Prdorimi i tabelave pr t ndar nj faqe n seksione t ndryshme sht nj mjet shum i fuqishm. Kryesisht n lidhje me layoutet, tabelat prdoren pr t funksionet e mposhtme:

Pr t ndar faqen n seksione t ndryshme Pr t krijuar menu, zakonisht prdoret nj ngjyr pr pjesn header dhe nj tjetr pr rreshtin tjetr ku gjenden linket.

Pr t shtuar fusha formash interactive. P.sh opsionin e krkimit.

Krijohen header t cilt ngakohen m shpejt.

Pozicionim m i leht i imazheve t cilat jan ndar n copa t vogla.

Nj menyr m e leht pr ta shfaqur tekstin n kolona. Analizojm nj faqe n web. P.sh. moh.gov.al e cila ka pamjen e mposhtme:

Vm re q sht nj bashksi tabelash brenda njra tjetrs. Tabela e madhe ka gjersi fikse pr efeket design.

Programim n Web

23

T1

Programim n Web

24

Ushtrime

1. Ndrtoni nj faqe t thjesht HTML e cila prmban nj nj tabel q paraqet orarin tuaj javor. do kolon e cila prfaqson edhe ditt e javs t shfaqet me nj ngjyre t ndryshme.

2. Ndrtoni nj faqe HTML layout-i i t cils sht ndrtuar me an t nj tabele me tre rreshta ku rreshti i par prfaqson header-in e faqes dhe brenda tij vendoset nj imazh n formn e banerit. Rreshti i dyt, trupi i faqes, sht i ndar n tre kolona ku n kolonn e par kemi t paraqitur me an t listave katr her fjaln menu1. Kjo prfaqson menun vertikale. N rreshtin e tret vendosni copyright e cila prfaqson footer-in e faqes.

Programim n Web

25

3. Format

Format jan element HTML t cilat prdoren pr t marr informacion nga prdoruesi. Nj form mund t prmbaj element inputi t tilla si fusha teksti, checkboxe, radio-buttona, butona submit etj. Nj mnyr pr t krijuar nj form sht kjo:

...

Elements

..

Atributet e Formave ACTION: ky atribut prcakton URL-n ku do t drgohen t dhnat q do t shtypi prdoruesi. Atributi action tregon se cfar i ndodh t dhnave kur shtypet butoni i drgimit. Zakonisht vlera e atributit sht nj faqe ose nj program n nj web server q do t marr dhe procesoj t dhnat e drguara. Pr shembull, nqs keni nj form logimi q krkon nj username dhe nj password; kto t dhna q fut prdoruesi do t kalojn n nj faqe login.php dhe n kt rast vlera e atributit action i faqes son do t jet . Si URL mund t prdoret nj adres emaili p.sh: mailto:address@e.mail ose nj HTTP URL http://www.uamd.edu/form.html. METHOD: metoda prcakton mnyrn se si t dhnat do t drgohen. Ekzistojn dy mundsi GET dhe POST. Metoda get i drgon t dhnat si pjes t URL. Metoda post i fsheh t dhnat n dicka t njohur si pjes t headerit HTTP. ENCTYPE: prcakton tipin e kodimit t prdorur.

mailto:address@e.mailhttp://www.uamd.edu/form.html

Programim n Web

26

Atributi id Atributi id ju lejon ju t identifikohen n mnyr unike elementt brenda nj elementi ashtu sic ju identifikoni n mnyr unike nj element n nj faqe. sht praktik e mir q ju ti specifikoni nj element id cdo elementi form sepse shum forma prdorin file pr style dhe skripte t cilt krkojne prdorimin e atributit id n mnyre q t bhet dallimi i tyre. Vlera e atributit id duhet t jet unike brenda nj dokumenti. Disa persona vendosin si vler te atributit id dhe name pr formn karakteret frm dhe m pas prshkruajne t dhnat si psh n rast t nj form logimi prdoret frmLogin apo n rast t nj forme krkimi frmKrkim etj. Atributi name (deprecated) Ashtu sic e kemi par tashm prdorimin e ktij atributi npr element t tjer, atributi name sht paraardhsi i atributit id dhe vlera e tij duhet t jet unike n t gjith dokumentin. N mnyr prgjithsuse nuk do t shihni prdorim t atributit name porse nqs do tju duhet ta prdorni ath kshillohet q si vler t tij t vendosni vlern q keni vendosur pr atributin id. E ngjashme me atributin id keshillohet q si vler tek value t vendosni frm_qllimiForms si psh frmKrkimi apo frmLogimi. 3.1 Elementet e Forms HTML ofron nj gam t gjer elementsh q prdoren pr input n forma. Ato mund t prdoren pr funksione t ndryshme si pr shkruajtur tekst apo pr drgim skedarsh. Elementi INPUT sht m i prdoruri dhe prdoret si nj fushe pr t marr te dhna. Ekzistojn disa lloje t ndryshme t elementit INPUT n varsi te vlers q merr atributi TYPE: TYPE=RADIO: lejon q t zgjedhin nga nj rang mundsish, por vetm nj n nj kohe. TYPE=RESET: fshin t gjith formn. TYPE=TEXT: i lejon prdoruesit q t fus nj rresht tekst.

Programim n Web

27

TYPE=PASSWORD: i lejon prdoruesit q t fus nj rresht tekst i cili paraqitet si "*" n vend t tekstit. Zakonisht prdoret pr pjesn ku do t shkruhet password-i. TYPE=CHECKBOX: na lejon t zgjedhim nj ose m shum opsione. TYPE=SUBMIT: merr t dhnat e futura n form dhe kryen veprimin e caktuar. TYPE=HIDDEN: nj fush teksti e cila nuk i shfaqet prdoruesit. Prdoret pr t ruajtur vlera. Elementi INPUT ka edhe disa atribute opsionale: NAME: emrton fushn. Kjo sht e rndsishme pr tu prdorur n kod pr prpunime t tjera. VALUE: i vendos nj vler fillestare fushs. SELECT SELECT prdoret pr t zgjedhur nj ose m shum nga opsionet e mundshme. Nj shembull do t ishte: Africa Antarctica America Asia Europe Oceania Atributet e elementit SELECT jan: SIZE: Nse SIZE ka vlern 1, vetm nj nga opsionet do t shfaqet, nse vlera sht m e madhe se 1 prdoruesit do ti shfaqet nj list me zgjedhje. MULTIPLE: prdoruesit mund t zgjedhin m shum se nj opsion, nse kjo sht e zgjedhur. Elementi OPTION ka dy atribute: VALUE: vlera q do ti caktohet variablit kur te jete zgjedhur ky opsion. SELECTED: ky opsion zgjidhet vetvetiu.

Programim n Web

28

TEXTAREA TEXTAREA prdoret pr t marr nga prdoruesi disa rreshta tekst. Formati i saj sht si m posht: Jepni prshtypjet tuaja rreth faqes ton! Prmbajtja q vendoset ndrmjet dhe prbn vlern fillestare t ksaj fushe. Atributet e TEXTAREA jan: ROWS: rreshtat q do t merren nga kutia e tekstit. COLS: kolonat. Tani do t shohim nj shembull i cili prdor elementet qe pam n kt pjes.

Kodi HTML nga i cili kemi marr rezultatin e msiprm sht:

Titulli i Dokumentit

Programim n Web

29

Test

Emer:

Mbiemer:

Password:

Gjinia:

Mashkull

Femer

Hobi:

Sporti

Muzika

Leximi

Origjina:

Albania

Antarctica

America

Asia

Europe

Oceania

Ku do te doje te udhetoje:

Albania

Antarctica

America

Asia

Europe

Oceania

Oninioni juaj:

Shkruani at qe mendoni!

Programim n Web

30

Butonat Butonat prdoren n rastet m t shpeshta pr t drguar t dhnat e nj forme, si dhe nganjher pr t pastruar t dhnat nga nj form. Ju mund t krijoni butona n tre mnyra: Duke prdorur elementin me atributin type vlera e t cilit sht submit, reset ose button. Krijimi i butonit duke prdorur elementin Kur ju prdorni elementin pr t krijuar nj buton, tipi I butonit q ju krijoni specifikohet n atributin type. Atributi type mund t marr vlerat e mposhtme pr t krijuar butonin: Submit, I cili krijon nj buton q drgon t dhnat e forms Reset, I cili krijon nj buton q n mnyr automatike bn boshatisjen e kontrolleve t forms nga vlerat tyre inicializuese qe plotsohen gjat shkarkimit t faqes. Button, i cili krijon nj buton q prdoret pr t startuar nj script t ans klient kur prdoruesi klikon mbi nj buton.

Programim n Web

31

Ushtrime

Ndrtoni nj faqe t thjesht n t ciln t vendosni dy textbox-e n t cilat ti krkoni prdoruesit emrin dhe mbiemrin. Emrtojeni faqen revista.html. N faqen revista.html t ciln e krijuat n ushtrimin e par, shtoni disa fusha t tjera t cilat duhet ti plotsoj prdoruesi si adresa, qyteti, shteti, kodi zip. Duke supozuar q kjo faqe do t shrbej pr abonimin n nj revist, shtoni nj dropdown list me pes emra revistash t njohura si dhe dy radio buttona me an t t cilave ne zgjedhim abonim nje vjecar apo dy vjecar. Shtoni nj tekstbox n t cilin abonuesi t lr komentet e tij. Faqja do t duket si m posht:

Programim n Web

32

Programim n Web

33

4. CSS CSS qndron pr Cascading Style Sheets. Stilet prcaktojn si do t paraqiten elementet HTML. Kjo realizohet duke i bashkangjitur atribute prezantimi n do element HTML ose nnklas t saj. Pr shembull nse ne duam q t gjith paragraft t ken nj background me ngjyr t kuqe dhe tekst me ngjyr t verdh, do t prdornim kodin e mposhtm: P {color: red;

background:yellow;}

Nse duam t prcaktojm stilet q do t prdoren n nj faqe prdorim tag-un STYLE , ndrsa tag-u LINK shrben pr t treguar skedarin e jashtm i cili mban stilet q do t prdorim ne n faqe. Tag-u STYLE duhet t vendoset n kokn e faqes. Parametri TYPE prdoret pr t treguar sintaksn q do t prdorim pr t prcaktuar stilet, n rastin ton ne do t prdorim text/css. Tag-u LINK prdoret si m posht:

Stilet ruhen zakonisht n nj skedar t jashtm me prapashtesn .css. Stilet e ruajtura jasht bjn t mundur q ju t ndryshoni pamjen e t gjitha faqeve t nj Web siti duke edituar nj skedar t vetm. Formati i Style sheet Sic pam edhe m lart formati i nj style sheets sht si m posht: {}

Per shembull: P {color: red; background:yellow;}

Sintaksa e CSS sht case sensitive. Kjo sintaks na lejon q t prcaktojm formatin q duam t kemi n paragraft e website-it ton. N HTML 4.0 sht shtuar nj atribut CLASS i cili na mundson krjimin e klasave elementsh tek t cilat do t zbatohet stili.

Programim n Web

34

Pr shembull pr t prcaktuar nj klas paragrafi t ciln e emrtojm iformatuar do t shkruanim: P. iformatuar {color: red; background:yellow;}

Paragraf i formatuar.

Paragraf normal

Ekziston edhe nj metod pr caktimin e nj stili t veant paragrafve t veanta. Pr ket duhet t prcaktojm stilin e elementve t HTML me an t CSS duke prdorur sintaksn e mposhtme: #paragraph1 {color: green; background:yellow;}

Kto identitete mund tja bashkngjisim nj elementi

HTML duke perdorur atributin ID.

Nje paragraf i theksuar

Paragraf normal

Paragraf i

theksuar por duke perdorur atributin ID

4.1 SPAN dhe DIV M par, pam se si t caktojm stile t elementve t HTML, por ne ndonjher duam t caktojm stile n seksione t tekstit ose prmbajtje q nuk jan pjes e nj blloku HTML. Kjo realizohet me an te tag-eve DIV dhe SPAN. Nse duam t etiketojm nj pjes t prmbajtjes n mnyr q ti japim asaj stilin q dshirojm, duhet q kt prmbajtje ta vendosim brenda nj tag-u SPAN ose DIV. N ndryshim nga SPAN, DIV vendos nj ndrprerje rreshti n fillim dhe n fund t do seksioni duke krijuar n kt mnyr blloqe me tekst pa pasur nevoja q ti vendosim ato n tag-e t tjera si paragrafi. 4.2 Tipare t tjera te CSS Disa nga veorit q shrbejn pr t prcaktuar pamjen e tekstit jan: font-family: lloje shkrimi sic mund t jen: serif, cursive, sans-serif, fantasy apo monospace. Ne mund ti caktojm tekstit nj lloj shkrimi ose disa duke i ndar ato me presje nga njra tjetra. Duhet pasur

Programim n Web

35

kujdes q fontet q ne do t prcaktojm t jen t instaluara n kompjuter. font-size:madhsia e fontit. xx-small, x-small, small, medium, large, x-large, xx-large si dhe vlera numerike. font-style: stili i fontit. Mund t prdoret normal, italic, italic small caps, oblique, oblique small caps dhe small caps. Veorit e mposhtme prdoren n blloqet e teksteve sic mund t jen paragraft. margin-top, margin-right, margin-bottom, margin-left: distanca minimale ndrmjet nj blloku dhe elementit ngjitur. padding-top, padding-right, padding-bottom, padding-left: mbush n hapsirn n mes t kufirit dhe prmbajtjen e bllokut. border-top-width, border-right-width, border-bottom-width, border-left-width: gjersia e konturit t bllokut n vlera numerike. border-style: stili i konturit t bllokut. none, solid ose 3D. border-color:ngjyra e konturit. 4.3 Trashgimia sht nj ndr cilsit m t fuqishme t CSS dhe ka domethnien se njher q kemi specifikuar nj property pr nj element kjo property do t trashegohet dhe tek elementt t cilt jan fmij t elementit t mlartm q ka t specifikuar cilsine n fjal. Pr shembull nqs kemi specifikuar propertin font-family pr elementin ath kt property do ta trashgojn t gjith elementt q prmbahen tek body I faqes. Kjo cilsi sht mjaft lehtsuese pr kodin tuaj meqense nuk

ju duhet ta riprcaktoni n cdo element t faqes porse vetm n nj element prind. Por duhet t bni kujdes! Nse nj property cilsohet n mnyr t veant pr nj element ather atributi i trashguar prej elementit prind do t bhen overwrite me propertin e cilsuar n nivel t atij elementi. N shembullin ton t par pam se tipi I fontit I prcaktuar n nivel elementi ishte arial. Porse kishte disa qeliza t vecanta t tabels q prdornin tipin e fontit Courrier. Kto qeliza ishin qelizat t cilat kishin t shoqruar rregullat e class-es code. Pra edhe pse kto qeliza duke qen fmij t elementit trashgojne cilsine e tipit t fontit Arial prej prindit t tyre; arrijn

Programim n Web

36

t mbishkruajm kt cilsi me cilsine e Courrier e cila prcaktohet n nivel elementi tek classa code. Kjo ndodh sepse selektuese duke qen specifikisht I prcaktuar pr td.class sht n gjendje t paraprij atributet e vendosura n nivel m t lart hierarkie. Galerit e Imazheve me CSS CSS mund t prdoret edhe pr t krijuar galeri imazhesh. M posht sht paraqitur kodi pr nj galeri imazhi. Galeria prmban tre imazhe t emrtuara image1, image2, image3 dhe t ruajtuar n dosjen me emrin image.

#gallerywrapper{

float:left;

position:relative;

z-index:5;

}

.gallerydisplay {

padding:0;

margin:0px 0 0 0;

list-style-type:none;

float:left;

}

.gallerydisplay img.mainimage,

#defaultimage img.mainimage{

border:0;

width:100px;

height:100px;

}

.gallerydisplay li {

float:left;

margin:10px 0 10px 0;

}

Programim n Web

37

.gallerydisplay li a img.mainimage {

position:absolute;

left:0;

display:none;

border:0;

top:55px;

z-index:5;

}

.gallerydisplay li a:active img.mainimage,

.gallerydisplay li a:hover img.mainimage,

.gallerydisplay li a:focus img.mainimage {

display:block;

}

.gallerydisplay li img.thumbnail{

height:27px;

width:27px;

margin-right:4px;

border:1px solid #666;

}

.gallerydisplay li a:active img.thumbnail{

border:#eee solid 1px;

}

#defaultimage img{

position:absolute;

top:55px;

left:0;

z-index:-1;

}

Programim n Web

38

Programim n Web

39

Ushtrime

Shkruani CV tuaj duke perdorur elementt header, list, paragraph si edhe element t tjer. Aplikoni n dokument Inline CSS dhe Embedded CSS.

Krijoni nj web form me t paktn 4 textbox dhe labels, 1 bashksi me 4 option button, nj bashksi me 4 check box, 1 combo box, 1 submit buton dhe nj buton reset. Prdorni elementt paragraph dhe header. Aplikoni n dokument Inline CSS dhe External CSS.

Programim n Web

40

5. JavaScript

HTML sht nj gjuh shum e pasur dhe pr me tepr kur bashkohet me CSS, mund t ndrtohet cfardo dizajn faqe q mund t dshirohet. Por HTML duke qen nj gjuh markup, mund t prdoret vetm pr t prcaktuar pamjen e faqes dhe sht e mjaftueshme n rastet kur nuk nevojiten animim ose ruajtje t dhnash online. Pr ti shtuar funksionalitet t tilla duhet q t kalojm n programimin ne Web. JavaScript sht nj gjuh programimi e interpretuar (script language). JavaScript dhe Java jan dy gjuh t ndryshme dhe me filozofi t ndryshme. E vetmja gj e prbashkt sht sintaksa duke qen se Netscape ka bazuar ndrtimin e gjuhs JavaScript n sintaksn e Java. 5.1 Programi i par Sic ndodh shpesh kur shpjegohen gjuh programimi do e fillojm shpjegimin duke krijuar nj program t thjesht JavaScript i cili paraqet mesazhin Prshndetje. Duke qen se JavaScript sht nj gjuh e lidhur me paget web, kodi do t jet n nj file HTML dhe do t paraqitet n nj browser.

function Greeting()

{

alert("Hello world");

}

Programim n Web

41

Ky program JavaScript vizaton nj buton n ekran, kur klikojm n t shfaqet nj dritare me mesazhin ton. Kodi JavaScript vendoset brenda tag-eve . Kto tag-e mund t vendosen n do pjes t dokumentit. Browserat t cilt nuk suportojn kod JavaScript thjesht do ta injorojn prmbajtjen e ktyre tag-eve. Zakonisht taget vendosen n kokn e faqes n menyr q kodi HTML t jet sa m i lexueshm. 5.2 Elementt baz t JavaScript Fjalit n JavaScript mbarojn me ; (njsoj si n C dhe Java) dhe mund t grupohen n blloqe duke prdorur kllapat gjarprushe{ }. Simbolet sic mund t jen variablat ose emrat e funksioneve jan case-sensitive. Komentet Komentet paraqiten n dy mnyra: // Koment vetm n nj rresht. /* Koment i cili shtrihet n disa rreshta. */ Karakteret speciale JavaScript prdor disa sekuenca karakteresh n mnyr q t mund t vendosim karaktere speciale n konstantet q jan tekst. Karakteret speciale m t prdoruara jan: \n rresht i ri \t Tab \' thonjz teke \" thonjza mbyllse \\ Backslash \xxx numrat ASCII t karaktereve hexadecimale 5.3. Tipet e t dhnave dhe variablat N JavaScript, tipet e t dhnave caktohen n mnyr dinamike n momentin q ne i japim vler variablit. Tipi mund t jet: character string integers real

Programim n Web

42

Boolean vector matrice reference objekt Variablat N JavaScript, emrat e variablave fillojn me nj grm alfabetike ose me karakterin '_', dhe mund t formohen nga grma ose dhe nga kombinime me karakterin '_'. Variablat jan global dhe nuk ka nevoj pr deklarim eksplicit te tyre. N rastet kur nevojitet nj variabl lokal ai deklarohet duke prdorur fjaln var dhe vendoset n trupin e nj funksioni. Referencat JavaScript eliminimin shnjuesit n kujtes nga gjuha por prdor referencat. Referencat funksionojn n mnyr t ngjashme me shnjuesit e memories, vetm se ato nuk merren me menaxhimin e kujtess nga ana e programuesit gj e cila bnte q shnjuesit t ishin t prirura ndaj gabimeve (error). JavaScript lejon referenca te objektet dhe te funksionet. Kjo aftsi pr t referuar funksionet do t shrbej shum kur t prdorim funksionet pr t eliminuar dallimet ndrmjet browser-ave. function onlyExplorer()

{

... }

function onlyMozilla()

{

...

}

function all()

{

var function;

if(browserMozilla)

function=onlyMozilla;

else

function=onlyExplorer;

function();

Programim n Web

43

}

Ushtrime

1. Krijo nje faqe HTML dhe JavaScript q mbledh dy numra. 2. Krijo nje faqe HTML dhe JavaScript q gjen shumn e shifrave

t nj numri. 3. Krijo nj faqe HTML dhe JavaScript q gjen t anasjelltin e nj

numri. 4. Krijo nje faqe HTML dhe JavaScript q gjen nse nj numr

sht palindrome ose jo. 5. Krijo nj faqe HTML dhe JavaScript q gjen nse nj numr

sht cift (even) ose tek (odd).

Programim n Web

44

5.4 Strukturat e kontrollit

Si gjitha gjuht eprogramimit, JavaScript ka disa struktura kontrolli. If, Switch JavaScript ofron dy strukturat m t njohura t kontrollit If dhe Switch Struktura e kushtit If sht si m posht. Kushti If mund t jet i pasur me fjaln else mbas tij. if (condition)

else

Shembull i kushtit IF : Struktura e kushtit Switch: switch(value)

{

case valuetest1:

break;

case valuetest2:

break;

...

default:

}

Programim n Web

45

Ciklet Jan tre struktura ciklike, while, do while, dhe for. while(condition)

do

{

}

while(condition);

for(start; condition; increase)

Programim n Web

46

Shembull i ciklit For,

Programim n Web

47

Ushtrime Krkojini prdoruesit te shtypi nga tastiera nj numr nga 20 ne 100. Afishojini prdoruesit mesazhin Shum i vogl, Numri i duhur ose Shume i madh ne varesi te numrit qe ai fut. Cfare output-i do t nxjerr kodi i mposhtm? Look at

var first = "Hello", second = "Goodbye";

var number = 32;

if (first != "Hello" && second == "Goodbye")

{ number += 12;

number *= 2;

}

else

{ number -= 10;

}

if (first == "Hello" || second != "Goodbye")

{ number = 13;

}

else

{ number *= 5;

}

alert("The value of number is " + number + "

");

3. Krijoni nj faqe web q konverton vlern e futur n lek n euro. Faqja duhet t prbhet nga nj textbox dhe nj buton, i cili kur klikohet konverton vlern e futur n textbox dhe e shfaq n faqe ose n nj mesazh.

Programim n Web

48

Programim n Web

49

5.5 Eventet

Nj nga aspektet m t rndsishme t JavaScript sht ndrveprimi me browser-in. Ngjarjet bjn t mundur q t shkruajm kod n JavaScript i cilin ndrvepron n nj situat t caktuar. Shembuj ngjarjesh mund t jen: Klikimi me maus, ngarkimi i faqes, ndryshimi i ndonj fushe n form etj. Pr t ekzekutuar rreshta kodi n momentin e ndodhjes n ngjarjes, JavaScript ofron ato q quhen event handeler. T gjith mbajtsit e ngjarjet fillojn me parashtesn on. Me posht jan listuar disa prej tyre: onLoad Hapja e faqes prfundon onUnLoad-Mbyllet faqja. onMouseOver-Mausi ndodhet mbi element. onMouseOut Mausi sapo zhvendoset nga elementi. onSubmit Kur forma drgohet. onClick Nje element sht klikuar. onBlur Kursori nuk duket m. onChange Prmbajtja ka ndryshuar. Kjo ngjarje ndodh te elementt: , onFocus-Kursori shfaqet. Kjo ngjarje ndodh te elementt: , onSelect Teksti sht przgjedhur. Kjo ngjarje ndodh te elementt: , Ekzistojn dy mnyra pr ti caktuar funksionit nj ngjarje:

function Alarm() {

alert("Pershendetje !");

}

...

Programim n Web

50

function Pershendetje() {

alert("Pershendetje!");

}

window.onload = Pershendetje;

...

Shembull Ky sht kodi pr nj faqe t thjesht web-i e cila paraqet vetm nj foto. Pjesa interesante sht se me ane t kodit Javascript ne arrijm te marrim gjersin dhe lartsin e ekranit t kompjuterit t vizitorit dhe n varsi t tyre gjenerohet kod me an t document.write. Krijohen dy tag-e t ndryshme . Nse rezolucioni i ekranit sht 1024 deri ne 768, ngarkohet imazhi me madhsi normale normal.jpg. Nse rezolucioni sht m i madh, ngarkohet imazhi m i madh bigger.jpg

var w = screen.width;

var h = screen.height;

if ((w=1024) and (h=768))

{

document.write("");

}

if ((w > 1280) and (h > 1024))

{

document.write("");

}

Programim n Web

51

5.6 Objektet

N JavaScript, nj objekt sht nj struktur e dhn e cila prmban edhe variablat edhe funksionet pr t kapur objektet. Programimi i orientuar n objekte q prdoret n Javascript sht shum m i thjesht se ai n Java ose C++. JavaScript nuk bn dallim ndrmjet objekteve dhe instancave. Vecorit dhe metodat e objekteve do t kapeshin si m posht: object.property value=object.method(parameter1, parameter2, ...) Prcaktimi i objekteve ne JavaScript Prpara se t prcaktojm nj objekt n JavaScript, duhet t krijojm nj funksion t veant qllimi i t cilit sht t krijoj nj objekt. sht e nevojshme q emri i funksionit, i quajtur ndryshe konstruktor, dhe emri i objektit t jet i njjt. function MyObject(attr1, attr2)

{

this.attr1=attr1;

this.attr2=attr2;

}

Tani ne mund t krijojm objekte t tipit MyObject. object=new MyObject(....)

object.attr1=a;

Nse duam q ti shtojm metoda objekteve duhet m par ti prcaktojm ato si funksione normale. function Method1(attr1, attr2)

{

Pjesa e kodit

}

Pr ti caktuar ket metod nj metode objekti duhet t shkruajm: object.method1=Method1;

Programim n Web

52

Objektet e paracaktuara N implementimet e JavaScript jan t prfshira disa objekte t paraprcaktuara: Arrays Vektort. Date Pr t ruajtur dhe manipuluar me datat. Mather Metoda dhe konstantet matematike. Number Konstante. String Veprime me stringle. RegExp Veprime me shprehjet e rregullta. Boolean Vlera Boolean-e. Function Funksionet. Vektort Nj vektor sht nj vaiabl i vecant i cili mban m shum se nj vler n nj koh. Vektort mund t krijohen n tre menyra. N shembullin e mposhtm sht deklaruar nj objekt i tipit vektor i quajtur Ditt dhe krijimi i tij sht paraqitur me t treja mnyrat. 1:

var Ditet=new Array(); Ditet[0]="Hene"; Ditet[1]="Marte"; Ditet[2]="MERKURE";

2:

var Ditet=new Array("Hene","Marte","MERKURE");

3:

var Ditet=["Hene","Marte","MERKURE"];

Aksesimi i elementve t nj vektori Pr t kapur nj element t nj vektori duhet ti referohemi me an t emrit t vektorit dhe numrit t indeksit. Indeksi fillon nga 0. Nga kodi i mposhtm

document.write(Ditet[0]);

do te shfaqet outputi-i:

Programim n Web

53

Hene

Modifikimi i vlerave t nj vektori Pr t modifikuar vlerat e nj vektori ekzistues thjesht i caktojm nj vler t re elementit t vektorit me nj indeks t caktuar:

Ditet[0]="Enjte";

document.write(Ditet[0]);

Tani rezultati eshte:

Enjte

Objekti Date Objekti Date prdoret pr t punuar me datn dhe orn. Objektet Date krijohen me an t snew Date(). Nj dat mund t inicializohet n menyra t ndryshme:

var d = new Date(); var d = new Date(milliseconds); var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Disa metoda t objektit Date

Metoda Pershkrimi

getDate() Kthen diten e muajit (nga 1-31)

getDay() Kthen diten e javes (nga 0-6)

getFullYear() Kthen vitin

getHours() Kthen oren (nga 0-23)

getMilliseconds() Kthen Milisekondat (nga 0-999)

getMinutes() Kthen minutat (nga 0-59)

getMonth() Kthen muajt (nga 0-11)

getSeconds() Kthen sekondat (nga 0-59)

http://www.w3schools.com/jsref/jsref_getdate.asphttp://www.w3schools.com/jsref/jsref_getday.asphttp://www.w3schools.com/jsref/jsref_getfullyear.asphttp://www.w3schools.com/jsref/jsref_gethours.asphttp://www.w3schools.com/jsref/jsref_getmilliseconds.asphttp://www.w3schools.com/jsref/jsref_getminutes.asphttp://www.w3schools.com/jsref/jsref_getmonth.asphttp://www.w3schools.com/jsref/jsref_getseconds.asp

Programim n Web

54

getTime() Kthen numrin e milisekondave qe nga 1 Janar, 1970

Objekti Math M an t objektit Math mund t kryhen veprime matematikore.

Math nuk sht konstruktor dhe cdo atribut apo metod e tij mund t

prdoren duke e konsideruar Math si nj object. Sintaksa:

var x = Math.PI; // Kthen PI var y = Math.sqrt(16); // Kthen rrenjen katrore te 16

Metodat e objektit Math

Metoda Pershkrimi

abs(x) Kthen vleren absolute te x

acos(x) Kthen arkosinuksin e x, ne radian

asin(x) Kthen arksinuksin e x, ne radian

atan2(y,x) Kthen arktagenting e argumenteve ne thnonjeza

max(x,y,z,...,n) Kthen numrin me vlere me te madhe

min(x,y,z,...,n) Kthen numrin me vlere me te vogel

pow(x,y) Kthen vleren e x ne fuqi y

random() Kthen nje numer random nga 0 ne 1

round(x) Rrumbullakos x me numrin e plote me te afert

sin(x) Kthen sinusin ne x

sqrt(x) Kthen katrorin e rrenjes se x

http://www.w3schools.com/jsref/jsref_gettime.asphttp://www.w3schools.com/jsref/jsref_abs.asphttp://www.w3schools.com/jsref/jsref_acos.asphttp://www.w3schools.com/jsref/jsref_asin.asphttp://www.w3schools.com/jsref/jsref_atan.asphttp://www.w3schools.com/jsref/jsref_max.asphttp://www.w3schools.com/jsref/jsref_min.asphttp://www.w3schools.com/jsref/jsref_pow.asphttp://www.w3schools.com/jsref/jsref_random.asphttp://www.w3schools.com/jsref/jsref_round.asphttp://www.w3schools.com/jsref/jsref_sin.asphttp://www.w3schools.com/jsref/jsref_sqrt.asp

Programim n Web

55

Ushtrime

1. Shkruani nj funksion findLongestWord()i cili merr nj vektor me fjal dhe kthen gjatsin e fjals m t gjat.

2. Ruani n nj vektor ditt e javs dhe n varsi t numrit t shtypur nga prdoruesi ju i afishoni ditn n fjal. P.Sh nse prdoruesi shtyp 1 ju do t afishoni fjaln E hn.

3. Ndrtoni nj makin llogaritse e cila kryen veprimet e

mbledhjes dhe zbritjes.

Programim n Web

56

5.7 Funksionet Nj funksion prmban kod i cili do t ekzekutohet nga nj ngjarje, ose nga nj thirrje e ketij funksioni. Sintaksa e deklarimit dhe implementimit t nj funksioni sht si m posht: function name(argument1, argument2,..., argument n)

{

kodi

}

M posht do t shohin se si ta thrrasim nj funksion, si ti kalojm argumentet dhe n fund se si t kthejm t dhna me an t return. Ky sht nj funksion: function shembull(a,b) {

number += a;

alert(Ju keni zgjedhur: ' + b);

}

Funksioni thirret si m posht: shembull(1,dhurate)

Argumentat Nj funksioni mund ti kalojm argument. Ato mund t jen variabla, numra ose stringje me t cilat funksioni vepron. Outputi i nj funksioni varet nga argumentet q i japim. N shembull ne i kaluam dy argumente, numrin 1 dhe stringun 'dhurat': shembull(1,'house'); Mund t perdorim aq argumenta sa ne duam. function shembull(a,b,c,data,data2) {

number += a;

alert('Ju keni zgjedhur: ' + b);

(veprime te tjera me argumentet c, data dhe

data2)

}

Nse harroni t vendosni ndonj argument, funksioni nuk ekzekutohet. Supozojm se i kemi kaluar vlerat e mposhtme:

Programim n Web

57

shembull(1,'trendafila',16,orkide) Kjo thirrje do t shfaqi error pasi ne nuk kemi prcaktuar asnj vlere pr argumentin data2. Ne mund t shkruajm edhe funksione t cilt nuk marrin fare argumente. function shembull() {

number += 1;

alert('Ju keni zgjedhur: trendafila');

}

Ky funksion kryen t njjtin veprim dhe nxjerr t njjtin output sa her q ne e thrrasim. Nse tentojm ti japim vlera argumentash do ti injoroj. Kthimi i vlerave Nj veprim tjetr q funksionet kryejn sht kthimi i vlerave. Supozojme se kemi funksionin e mposhtm: function calculate(a,b,c) {

d = (a+b) * c;

return d;

}

Ky llogarit nj numr n varsi t numrave q ju i kaloni si argument. Kur funksoni prfundon ekzekutimin kthen rezultatin e llogaritur. N praktik do t kishim: var x = calculate(4,5,9); var y = calculate((x/3),3,5); dhe vlera e x do te behej 81 ndersa e y 150. Nj funksion mund t kthej edhe stringje apo vlera Boolean-e.

5.8 Vlersimi i Formave

JavaScript mund t prdoret pr t vrtetuar t dhnat n format HTML para se t drgohen pr nj server. T dhnat q kontrollohen pr arsye t ndryshme si: nse fushat jan ln bosh, nse prdoruesi ka shkruar nj adrese emaili-i t vlefshme etj.

Programim n Web

58

Fushat e Krkuara *

Funksioni i mposhtm kontrollon nse ndonjra nga fushat e forms sht boshe, e paplotsuar nga prdoruesi. Nse fusha sht boshe ather do t shfaqet nj mesazh dhe funksioni do t kthej false duke mos lejuar kshtu brjen submit t forms.

function validateForm()

{

var x=document.forms["myForm"]["fname"].value;

if (x==null || x=="")

{

alert("Duhet plotesuar fusha e emrit");

return false;

}

}

Ky funksion m pas thrritet kur nj form bhet submit si n shembullin m posht:

First name:

Vlersimi i email-it

Funksioni i mposhtm nse prmbajtja e fushs ka sintaksen e prgjithshme t nj emaili ku t dhnat duhet t ken nj shenj @ dhe t paktn nj pik (.). Shenja @ nuk duhet t jet karakteri i par i nj adres email-i dhe pika e fundit duhet t jet pas shenjs @ dhe minimalisht 2 karaktere para fundit.

function validateForm()

{

var x=document.forms["myForm"]["email"].value;

Programim n Web

59

var atpos=x.indexOf("@");

var dotpos=x.lastIndexOf(".");

if (atpos

Programim n Web

60

5.9 Aplikime JavaScript Ndrtoni nj faqe e cila t llogaris shumn e dy numrave t shtypur nga prdoruesi. Zgjidhje: Prdoruesi shtyp dy numrat prkatesisht n textbox-in 1 dhe 2 dhe vlera shfaqet n textbox-in prbri fjals Shuma. Klikimi n textbox kapet me an t ngjarjes OnClick dhe n kt ngjarje thirret funksioni Shuma( ) t cilin e kemi implementuar n kokn e faqes.

Shuma function Shuma() { document.frm1.s1.value=parseInt(document.frm1.nr1.value)+parseInt(document.frm1.nr2.value); } Numri1 Numri2 Veprimi Vlera

Programim n Web

61

Shuma Gjeni Shumn, diferencn, prodhimin dhe hersin e dy numrave fardo t shtypur nga prdoruesi n faqen tuaj t web-it. Zgjidhje:

Shuma function Shuma() { document.frm1.s1.value=parseInt(document.frm1.nr1.value)+parseInt(document.frm1.nr2.value); } function Diferenca() {

Programim n Web

62

document.frm1.s1.value=parseInt(document.frm1.nr1.value)-parseInt(document.frm1.nr2.value); } function Prodhimi() { document.frm1.s1.value=parseInt(document.frm1.nr1.value)*parseInt(document.frm1.nr2.value); } function Heresi() { document.frm1.s1.value=parseInt(document.frm1.nr1.value)/parseInt(document.frm1.nr2.value); } Numri1 Numri2 Veprimi Vlera

Programim n Web

63

Ndrtoni nj faqe n t ciln prdoruesi t mund t fusi t dhnat e tij personale dhe t vlersoj saktsin e tyre.

Untitled Document function check() { check_user(); //check_name(); } function check_user() { if (document.user.username.value == '') { alert('Kujdes funti username'); document.user.username.value='[enter username]'; document.user.username.focus();

Programim n Web

64

} } Username Password Confirm Password Name Lastname

Programim n Web

65

Programim n Web

66

5.10 jQuery

jQuery sht nj librari JavaScript e shpejt dhe e sakt e cila prdoret pr t thjeshtuar punn me dokumentet HTML, punn me eventet, animimin, si dhe ndrveprimet me Ajax. Pr t prdorur kt librari mund ta shkarkoni at nga faqja http://jquery.com/ ose t shfrytzoni kopje t saj t hostuara nga kompani t mdha si p.sh. t ruajtur te Google nn linkun http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js .

Pr t thirrur librarin e ruajtur n nj host t jashtm n programin

ton tagu do t dukej si m posht:

jQuery ekzekutohet pasi DOM sht gati dhe sht e ndare nga

prmbajtja (HTML) dhe paraqitja (CSS). Kodi jQuery pozicionohet si

m posht:

$(document).ready(function() {

// i gjithe kodi jQuery vendoset ketu

});

Perzgjedhja e elementeve ne jQuery

Libraria jQuery bn t mundur selektimin e elementve t XHTML

duke i futur ato n kllapa dhe thonjza dyshe ose teke t tilla $("").

M posht jepen disa shembuj t kapjes s elementve:

$("div"); //przgjedh t gjith elementt div t HTML

http://jquery.com/http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Programim n Web

67

$("#myElement"); // przgjedh nj element HTML me ID

"myElement"

$(".myClass"); // przgjedh elemente HTML me klas "myClass"

$("p#myElement"); // przgjedh element paragraf HTML me ID

"myElement"

$(":animated"); // przgjedh elementt e animuar

$(":button"); // przgjedh elementt button

(":radio"); // przgjedh radio button-at

$(":checkbox"); // przgjedh checkbox-et

$(":checked"); // przgjedh t gjith checkbox-et ose radio button-at

t cilt jan t selektuar

$(":header"); // przgjedh elementt header(h1, h2, h3, etj.)

Shtimi, Fshirja, dhe Bashkngjitja e Elementve dhe Prmbajtjes

Ka mnyra t ndryshme pr manipulimin e grupeve t elementve

me ane t jQuery.

Pr t marr nj element n HTML shkruajm:

var myElementHTML = $("#myElement").html();

// variabli prmban t gjithe HTML-n (prfshir tekstin) brenda #

myElement

Nse nuk kemi nevoj pr t aksesuar the gjith HTML-n, por duam

vetm elementin tekst:

var myElementHTML = $("#myElement").text();

Programim n Web

68

Duke shfrytzuar kt sintaksn e dy shembujve t msiprm ne

mund t ndryshojm edhe prmbajtjen e tekstit t nj elementi:

$("#myElement").html("

Kjo eshte permbajtja e re.

");

ose

$("#myElement").text("Kjo eshte permbajtja e re.");

Pr ti bashkangjitur prmbajtje nj elementi duk ln t pandryshuar

prmbajtjen ekzistuese:

$("#myElement").append("

Kjo eshte permbajtja e

re.

");

jQuery gjithashtu ofron fumksionet appendTo(), prepend(),

prependTo(), before(), insertBefore(), after(), dhe insertAfter(), t cilat

funksionojn afrsisht si append().

Eventet n jQuery

Eventet mbahen duke prdorur kodin e mposhtm:

$("a").click(function() {

// pjese kodi sipas problemit

//kur klikohet nje link

});

Pjesa e kodit brenda funksionit function() do t ekzekutohet vetm

pasi t klikohet mbi link. Evente t tjera t ngjashme jan:

blur, focus, hover, keydown, load, mousemove, resize, scroll, submit,

select.

Animimi dhe efektet

Programim n Web

69

Me jQuery mund t rrshqisni(slide) elementt, ti animoni, t ndaloni

animinim. Pr t rreshqitur elementt lart ose posht shkruajm kodin e

mposhtm:

$("#myElement").slideDown("fast", function() {

// veprimi qe duam te ndodhi mbas rreshqitjes

poshte

}

$("#myElement").slideUp("slow", function() {

// veprimi qe duam te ndodhi mbas rreshqitjes lart

}

$("#myElement").slideToggle(1000, function() {

// veprimi qe duam te ndodhi mbas rreshqitjes

lart/poshte

}

Animimi i nj elementi bhet duke komanduar CSS q t ndryshoj

vlerat. jQuery do t vendosi stilet e reja n mnyr graduale n varsi

t shpejtsis q sht prcaktuar.

$("#myElement").animate(

{

opacity: .3,

width: "500px",

height: "700px"

}, 2000, function() {

}

);

Programim n Web

70

6. DOM DOM sht shkurtimi pr Document Object Model. Kjo sht nj mnyr pr t par HTML-n e cila bn mundur q zhvilluesit e web-it t krijojn funksione dhe t manipulojn me kodin n menyra t cilat do t ishin t pamundura pa kt konceptim. Ekzsitojn tre tipe baz t DOM-it:

Pjesa kryesore e DOM, e cila prdoret pr t prcaktuar dokumentin panvarsisht nga tipi XML DOM, i cili prdoret me dokumentet XML. HTML DOM, ndan nj faqe HTML n nyje. Kto nyje jan t lidhura me njra tjetrn n formn e nj peme. Ajo q e bn DOM-in kaq t rndsishm dhe t prdorshm pr zhvilluesit e HTML sht se cdo pjes e faqes bhet e vecant dhe e aksesueshme n raport me faqen. Duke pasur nj mundsi copzimi t till ne mund t veprojm n pjes t vecanta t faqes pa i prekur pjest e tjera.Kjo ka nj rndsi t vecant pr programimin n Javascript duke qen se keshtu krijohet mundsia e kapjes s cdo elementi t HTML n mnyr direkte. Duke ditur strukturn e sakt prmes DOM, ne mund t kalojm n t gjith elementt n t cilt duam t kryejm veprime.

Programim n Web

71

Tani m e kemi par se nj faqe HTML sht e prbr nga elementt e mposhtm: Faqe HTML

Kjo eshte nje faqe e thjeshte HTML.

Me an t DOM, do element, si p.sh tag-et , sht nj nyje. Nyja quhet nyja rrnj dhe ka dy nyje bij dhe . N shembullin e msiprm nyja shte fmij i nyjs . HTML DOM sht nj gjuh e pavarur nga platforma. DOM sht e ndar nga JavaScript teknikisht dhe mund t kapet me an t gjuhve t skriptimit. Lista e mposhtme paraqet listn e objekteve t HTML DOM t cilat prdoren pr t marr, nxjerr informacione rreth ambjentit t sistemit t prdoruesit. Informacionet mund t jen si madhsia e ekranit, rezolucioni, historia e browserit, URL-ja, sistemi i shfrytzimit, tipi i browserit etj. Objektet jan: Window Document Screen Navigator History Location Secili nga objektet ka atributet dhe metodat e tija. Ne do t shohim objektin Window i cili prfaqson dritaren e browserit. Lista e mposhtme jep disa nga metodat dhe atributet e objektit Window: closed defaultStatus frames history

Programim n Web

72

length location name opener parent personalbar self status statusbar scrollbars top toolbar window innerWidth innerHeight outerWidth outerHeight pageXOffset pageYOffset screenX screenY screenLeft screenTop window Objekti window sht n krye t hierarkis s modelit DOM dhe prfaqson t gjith browserin. Atributet: location Kthen URL-ne Metodat: alert() Afishon nj mesazh tekst prompt() Shfaq nj dritare dialoguese e cila krkon input nga prdoruesi. Shembull: Shembulli i shfaq prdoruesit dy butona t cilt kur shtypen shfaqin nj mesazh dhe pyesin pr input respektivisht s. N fund t faqes gjithashtu shfaqet nj tekst dhe url-ja e faqes s hapur.

Programim n Web

73

Objekti Window document.write(" URL e kesaj faqe eshte " + window.location); Objekti document Objekti Document prfaqson nj faqe t web dhe me an t tij mund t kapim t gjith elementt e ksaj faqe. Shohim metodat dhe propertit e tij. Vetit e objektit document Ktu do t futen pothuajse gjith atributet q ne mund t vendosim n elementitn t nj faqeje XHMTL. Disa properti kan cilsine vetm t lexojn ndrsa disa t tjera prpos leximit kan dhe aftsin e shkrimit. Pr m shum tabela q vijon:

Emri i propertise Qellimi Read/write

alinkColor Specifikon ngjyrat e linkut

Read/write

Bgcolor Specifikon ngjyrn e sfondit

Read/write

Fgcolor Specifikon ngjyrn e foreground t text

Read/write

lastModified Data kur dokumenti ka qen modifikuar pr her t fundit

Vetm read

linkColor Specifikon ngjyrn e linqeve

Read/write

Referrer URL e faqes q prdoruesi do t kaloj nqs klikon mbi nj link.

Vetm read

Title Titullin e faqes q kapet tek elementi

Vetm read

Programim n Web

74

vlinkColor Ngjyrn e linqeve q jan klikuar nj her

Read/write

Pr t aksesuar nj prej propertive, ju duhet t prdorni shnimet e simbolit . (pik); kshtu psh nqs krkoni t kapni titullin e faqes ath ju duhet t shkruani: document.title nqs krkoni t kapni datn se kur sht modifikuar pr her t fundit nj dokument ath duhet t shkruani document.lastModified nqs serveri nuk suporton propertin lastModified ath IE do t shfaqi orn korrente ndrsa browsera t tjer do t shfaqin 1 January 1970. Metodat e objektit Document Metodat kryejn veprime dhe gjithmon jan t ndjekur nga nj cift kllapash. Brenda kllapave t disa metodave mund t kemi parametra ose argumenta t cilat do t ndikojn n at se cfar do t kthej veprimi q do t kryhet. Tabela m posht na tregon pr dy metoda t cilat shkruajn kontent t ri n faqen e web. T dyja metodat do t marrin si argument nj string (bashksi me shkronja, numra, hapsira apo dhe shenjat e piksimit etj) dhe stringu sht ajo cfar do t shkruhet n faqe.

Emri i metods Qllimi

Write(string) Ju lejon q t shtoni tekst ose element n nj dokument

Writeln (string) I njjti efekt me write(), porse shton nj rresht t ri pas shkrimit t stringut e njjt me at q kemi shtypur tastin enter pasi kemi shkruar stringun.

Programim n Web

75

Pjesa II - Programimi Server Side

Programim n Web

76

Programim n Web

77

7. Prezantim me PHP

PHP sht nj gjuh mjaft popullore si gjuh skriptimi n server. Gjuha PHP sht ndrtuar bazuar n Perl, prandaj sht e ngjashme me Perl, C, Java Kodi PHP funksionon si me webserver ashtu edhe nprmjet me prompt (Command Line Interface) M posht listohen disa nga vetit kryesore t PHP : Variablat kan tipe dinamike dhe nuk ka nevoj t deklarohen sht e pajijur me array shum dimensionale Mundson programimin me objekte Ofron funksione pr t punuar lehtsisht me bazat e t dhnave Ofron funksione pr kontrollin e sesioneve dhe cookiet N dallim nga JavaScript PHP ekzekutohet n server ! Ekzekutimi i nj faqe PHP n web server do t prodhoj nj output, i cili do ti drgohet browser-it. Prandaj n browser nuk do t shikojm asnjher kod PHP pr vetm rezultatin e ekzekutimit t nj faqe PHP , q do t gjeneronte nj tekst t prbr nga HTML dhe Javascript. Kur ne vendosim adresn e nj faqe PHP n kutin e adress t lundruesit, ky i fundit bn nj krkes n server pr faqen PHP, adresn e t cils ne e kemi n kutin e adress. Serveri kthen nj prmbajtje HTML q gjenerohet duke u bazuar n hapat e mposhtm: Serveri e lexon skedarin PHP rresht pr rresht duke nisur nga fillimi Nse gjen kod html n faqe thjesht e kopjon kt n output Nse gjen kod php (i cili vendoset midis ) e ekzekuton at dhe vendos n output rezultatin e ekzekutimit t kodit php Hapat nga krkesa e nj faqe php deri tek afishimi n browser i saj jan: 1- Prdoruesi bn nj krkes pr skedarin PHP, duke vendosur adresen e tij n browser apo duke klikuar mbi nj link q ka si destinacion skedarin php 2- Serveri gjen skedarin PHP dhe ia kalon at interpretuesit t PHP i cili 3- Prodhon nj skedar q ka vetm kod html dhe javascript ( nse ka )

Programim n Web

78

4- Web Serveri transmeton outputin e ekzekutimit t faqes PHP nprmjet nj mesazhi HTTP Response 5- Kompjuteri merr prmbajtjen e drguar nga web serveri dhe ia kalon at browserit 6- Browseri interprerton kodin HTML duke prodhuar nj ndrfaqe grafike pr prdoruesin Me poshte paraqitet ne te majte faqja php dhe ne te djathte rezultati i ekzekutimit te saj qe transmetohet ne browser . Vini re qe ne kodin qe i shkon browserit nuk ekziston kod PHP. FAQJA PHP ne server shembull 2 Pas ekzekutimit, kodi q shkon n browser shembull 2 Pershendetje Endri

Programim n Web

79

7.1 Sintaksa, Variablat dhe Operatort Disa rregulla sintaksore t gjuhs PHP Variablat n PHP fillojn me shenjn e dollarit $. Emrat jan case sensitive. Emrat ndjekin t njjtat rregulla si javascript, emri duhet t filloj me nj shkrojne ose me underscore (_).

Shembujt e mposhtm ilustrojn rregullat q duhet t zbatojm kur vendosim pr emrat e variablave: 7.2 Tipet e t dhnave n PHP PHP ka disa tipe t dhnash, ndr t cilt jan tipet e mposhtm; Boolean, integer (zakonisht 32 bit) numrat me presje (floating point numbers) stringje ose vargjet e karaktereve Tabelat ose arrays , t cit shum fleksibel dhe mund t prmbajn t dhna t tipeve t ndryshme Klasat Burimet (Resources ) NULL (varialblat pa vlere) Nprmjet funksionit isset($v) kontrollohet nse nj variabl ekziston apo jo. Tipi i t dhnave Boolean ka dy vlera t mundshme : TRUE dhe FALSE Me vlern FALSE jan ekuivelente vlerat e mposhtme: Vlera integer 0

Programim n Web

80

Vlera float 0.0 Stringu bosh Vlera NULL Nj array me zero element T gjitha vlerat e tjera konsiderohen si TRUE. 7.3 Operatort Operatort aritmetik -$a Mohimi , e kundrta e $a. $a + $b Mbledhja, Shuma e $a dh $b. $a - $b Zbritja, Diferenca $a - $b. $a * $b Prodhimi, Prodhimi i $a dhe $b. $a / $b Pjestimi, $a pjestim $b. $a % $b Mbetja, Mbetja e pjestimit te $a me $b. $a++ Operatori i pas inkrementimit ++$a Operatori i pre inkrementimit $a-- Operatori i pas dekrementimit --$a Operatori i pre dekrementimit Operatoret e krahasimit $a = = $b krahasimi pr vler t njjt, TRUE nse $a sht e barabart me $b, FALSE n t kundrt $a != $b Jo t barabart, TRUE nse $a sht e ndryshme nga $b, FALSE n t kundrt $a $b Jo t barabart, TRUE nse $a sht e ndryshme nga $b, FALSE n t kundrt $a < $b M e vogel se, TRUE nse $a sht m e vogl se $b. $a > $b M e madhe se, TRUE nse $a sht m e madhe se $b. $a = $b M e madhe se ose e barabart, TRUE nse $a sht m e madhe se $b ose e barabart me $b Operatoret llogjike $a and $b, (AND) TRUE if both $a and $b are TRUE. $a or $b, (OR) TRUE if either $a or $b is TRUE. $a xor $b, (XOR) TRUE if either $a or $b is TRUE, but not both.

Programim n Web

81

! $a, (Not TRUE) if $a is not TRUE. $a && $b, (AND) TRUE if both $a and $b are TRUE. $a || $b, (OR) TRUE if either $a or $b is TRUE.

Shembulli i mposhtm ilustron prdorimin e operatorve llogjik:

Programim n Web

82

Ushtrime 1. far afishon kodi i mposhtm: 2. far afishon kodi i mposhtm: 3 -Krijoni nj variabl me emrin $number me nj vler numerike cfardo. Afishoni numrin dhe katrorin e tij ($number*$number). 4- Duke ditur q formula sip = (3.14)*rreze*rreze, llogarit siprfaqen e nj rrethi , gjeni dhe afishoni siprfaqen e nj rrethi me rreze 7. 5- Kopjoni kodin m poshte. Provoni vlera t ndryshme pr $a dhe $b.

Programim n Web

83

?> 8. Strukturat e kontrollit ne Php

Strukturat e kontrollit n PHP jan t ngjashme me gjuh t tjera t programimit si Java dhe C. Sintaksa e tyre shte si m posht: if (cond) {....}; opsional else {....} // degzimi I kodit for(init; cond; inc) { .... } // cikli for while (cond) { .... } //cikli while do {...} while (cond) // cikli do while switch case // degezimi me disa drejtime Nprmjet shembujve t mposhtm do t ilustrojm prdorimin e strukturave t msiprme t kontrollit: 8.1 Degzimi i kodit nprmjet If .. else Shembull i prdorimit t if (cond) {....}; else {....} 8.2 Cikli FOR

Programim n Web

84

Sintaksa e prgjithshme e ciklit for sht : for(shprehje inicializimi; shprehje llogjike; shprehje inkementimi) { } Shembujt e mposhtm ilustrojn prdorimin e funksionit for :

Programim n Web

85

*/ $i = 1; for (; ; ) { if ($i > 10) { break; } echo $i; $i++; } ?> 8.3 Cikli While dhe cikli do .. while Shembujt e mposhtm shpjegojn mnyrn e prdorimit t ciklit while. Sintaksa e prgjithshme pr ciklin while sht: while (kusht) {} N dallim nga cikli for, shprehja inicializuese (nse ka nj t till), duhet vendosur prpara ciklit while. Shprehja llogjike vendoset n ciklin while while (kusht), llogaritet vlera e saj dhe nse ajo sht e vrtet (true) ekzekutohet blloku i instruksioneve brenda shenjs begin { dhe end }. N fund t bllokut t instruksioneve brenda {}, testohet srish vlera e shprehjes llogjike. Nse ajo sht e vrtet srish ekzekutohet blloku i

Programim n Web

86

instruksioneve e kshtu me rradh derisa shprehja llogjike t bhet false. Sic duket sht e nevojshme q t vendoset brenda bllokut t instruksioneve nj instruksion (shprehja e inkrementimit tek cikli for) i cili ndryshon gjendjen e shprehjes llogjike, n menyr q t dilet nga cikli kur t plotsohet nj kusht i caktuar, psh $i

Programim n Web

87

Pr shembull, kodi i mposhtm do t afishonte: 0123456789 8.4 Degzimi i kodit me instruksionin switch .. case Shembujt e meposhtm ilustrojn prdorimin e instruksionit switch case pr degzimin n disa drejtime t kodit: Shembull 1

Programim n Web

88

echo "i sht e barabart me 2"; break; } ?> Shembull 2 < ?php switch ($i) { case "molle": echo "i eshte molle"; break; case "dardhe": echo "i eshte dardhe"; break; case "pjeshe": echo "i eshte pjeshke"; break; } ?> Kombinimi i kodit PHP me kodin HTML dhe kodin Javascript Prgjithsisht kodi HTML si edhe kodi Javascript mund t gjenerohen nga komandat echo ose print te nj faqe php. N disa raste sht m e leht q t shkruhet kodi sipas nj teknike q krkon nj przjerje t kodit PHP me kodin HTML dhe javascript. Pr kto raste prdoret termi "kodi spagheti", pr shkak t przjerjes s kodit PHP dhe HTML. Nprmjet shembullit t mposhtm ilustrojm kt teknike. Shembull - T afishohet nj tabel me 10 rreshta me kode dhe URL : Kodi i faqes PHP: PHP , HTML Spagheti mode

Programim n Web

89

function whereami(i) { alert('Keni klikuar ne rreshtin '+i); } Nr Artikulli

Programim n Web

90

nj dritare q tregon koordinatat e qelizs ku klikuam. M posht po paraqesim t dhnat e faqes shahu.php shembull 2 function whereami(i,j) { alert('Jeni ne rreshtin e '+i+'ne kollonen e '+j); }

Programim n Web

91

} else { echo 'bgColor="#FFFFFF"; >'; } echo ' '; } echo ''; } echo ''; ?>

Programim n Web

92

Ushtrime 1-Ndrtoni nj faqe PHP q afishon nj piramid me *, me dimensionin e bazs s t cils t barabart n. Duke prdorur ciklin for. * *** ***** ******* ********* *********** ************ ************** **************** 2- Ndrtoni nj faqe PHP q afishon nj piramid me *, me dimensionin e bazes s t cils t barabarte n. Duke prdorur ciklin while 3-Ndrtoni nj faqe PHP q afishon nj piramide me *, me dimensionin e bazs s t cils t barabart n. Duke prdorur ciklin do..while 4- Ndrtoni nj faqe PHP e cila afishon kufizat e vargut a(n)=2*n*2 dhe shumn e tyre. Kufizat e vargut duhet t afishohen nga 15 kufiza pr rresht dhe t ndara me dy hapsira (space) midis tyre. Pas afishimit t kufizave t vargut faqja PHP duhet t lr tre rreshta bosh dhe t afishoj shumn e kufizave t vargut. 5- Ndrtoni nj faqe PHP e cila afishon kufizat e vargut a(n)=n n fuqi n dhe mesataren e tyre. Kufizat e vargut duhet t afishohen nga 5 kufiza pr rresht dhe t ndara me dy hapsira (space) midis tyre. Pas afishimit t kufizave t vargut faqja PHP duhet t lr tre rreshta bosh dhe t afishoj mesataren e kufizave t vargut. Mesatarja duhet t llogaritet pa gjetur m par shumn e kufizave t vargut. Numri i kufizave t merret, n=15.

Programim n Web

93

Programim n Web

94

Programim n Web

95

9. Stringjet n PHP

Stringjet prmbajn karaktere 8-bitshe dhe rrethohen me thonjza dyshe ose me thonjza teke. Nse stringu rrethohet me thonjza dyshe , thonjza teke mund t jet nj katakter prbrs i stringut dhe anasjelltas nse stringjet jan t rrethuar nga thonjza teke, thonjza dyshe mund t jet element prbrs i stringut pa patur nevoj pr karaktere speciale. Pr shembull :

Programim n Web

96

?> do t shkaktonte nj mesazh gabimi t ngjashm me mesazhin: Parse error: syntax error, unexpected T_STRING in D:\xampp\htdocs\endri\libri\strings.php on line 2 Gjithashtu, kodi:

Programim n Web

97

Nr Emri 1 Albania '; echo $t; ?> 9.2 Funksionet mbi stringjet PHP sht e pajisur me nj numr t madh funksionesh mbi stringjet, disa prej t cilave po i listojm m posht: Bashkimi (konkatenimi) i stringjeve Pr bashkimin e stringjeve prdoret operatori .(pike), psh: Afishon: nj dhe dy Funksionet ltrim, trim, rtrim eliminojn hapsirat boshe n fillim dhe n fund t stringut. Gjatsia e stringut Funksioni strlen kthen gjatsine e stringut t matur sipas numrit t simboleve q ai permban. Pr shembull, kodi: Do t afishonte 21 Konvertimi i stringut n shkronja t mdha e t vogla

Programim n Web

98

Funksionet strtolower, strtoupper e konvertojn nj string prkatsisht n shkronja t vogla e t mdha. Pr shembull, kodi: Do t afishonte : sot eshte kohe e mire SOT ESHTE KOHE E MIRE Krahasimi i dy stringjeve Stringjet jane vargje me karaktere dhe si t tilla nuk mund t krahasohen duke prdorur operatort e krahasimit q prdoren pr numrat. Pr kt qllim php sht e pajisur me nj funksion q krahason dy stringje si vargje karakteresh, duke u bazuar n renditjen alfabetike t shkronjave t tyre; ('a'