WEB Design - shkollateknike.comshkollateknike.com/wp-content/uploads/2013/03/Libri-webDesign.pdf · Departamenti i Shkencave Kompjuterike Universiteti ILIRIA ... janë; logo, grafika,

Lënda: Gjuha e Ueb-it

Departamenti i Shkencave Kompjuterike

Universiteti ILIRIA

Prishtinë / Kosovë

WEB Design

©2015 Labinot Hasani, e-mail: [email protected]

2

Lënda: Web Design,

besoj qё do tё zgjoj kurreshtjen tuaj...

Informata të përgjithëshme

• Konsultimet:

– Salla e kompjuterëve nr. 13, pas çdo ligjërate dhe ushtrimeve.

– Takimet aranzhohen përmes e-mailit: [email protected]

• Shënim:

– Jeni të obliguar të studioni gjithë literaturën dhe ti bëni ushtrimet me

rregull.

– Pas çdo ligjërate dhe ushtrimi do të ju dërgoj materialet e pёrgatitura nё

formë elektronike. Ndërsa, materialet e lëndës mund t’i gjeni në sallën e

fotokopjes në Universitet.

– E gjithё literatura e dhёnё ёshtё obliguese pёr ta studiuar.

– Sigurimi i literatures sё dhёnё ёshtё obligues dhe çdo paqartёsi nё te do tё

mundohemi me s`qaruar s`bashku.

– Materialet e pёrgatitura nё sllajde mund ta pёrdorni si material ndihmёs,

sikurse dhe ushtrimet.

– Kolokfiumet dhe provimet do të organizohen në letër dhe jo në kompjuter.

– Në provim, duhet pasur vetëm një laps kimik me ngjyrë të kaltërt.

Nuk lejohet përdorimi i kompjuterit, telefonat celular, shfletim tё

literaturës, bisedat me kolegët, etj.

– Disa shprehje dhe emërtime do ti përdorim në Gjuhën Angleze.

mailto:[email protected]

3

– Zëvendësimi i tyre nuk është i preferueshëm edhe pse ato që konsiderojm të

arsyeshme do të mundohemi me gjetë zgjidhje adekuate.

Mёnyra e vlerёsimit

Lloji Vlerësimi

Vijueshmëria, aktiviteti në

ligjërata dhe ushtrime 10 %

Kolokfiumi I 50 %

Kolokfiumi II 50 %

Vlerësimi pёr nota

Vlerësimi Nota

50 % – 59 % 6

60 % – 69 % 7

70 % – 79 % 8

80 % – 89 % 9

90 % – 100 % 10

4

Përmbajtja e Lëndës

1. Hyrje UEB Design

2. HTML

3. CSS

4. JQuery

5. JavaScript

6. MySQL

7. PHP

8. UEB Aplikacionet

5

Literatura

• Titulli:

– Learning WEB

Design

• Autori:

– Jennifer Niederst

Robbins

• Verzioni:

– 1.4

• Viti i publikimit:

– 2012

• Shkarkimi i librit nga:

– ftp://ivacuum.ru/i/WooLF/%5B2012%5D%20Learning%20WEB%20Desig

n.pdf

– Duke ju përmbajt rregullores:

GNU (General Public License)

ftp://ivacuum.ru/i/WooLF/%5B2012%5D Learning Web Design.pdf





6

Literatura

• Titulli:

– Learning jQuery

• Autorët:

– Jonathan Chaffer

dhe

– Karl Swedberg

• Verzioni:

– Edicioni 4

• Data e publikimit:

– 2013


– http://filepi.com/i/a9REigL



http://filepi.com/i/a9REigL

http://filepi.com/i/a9REigL

7

Literatura

• Titulli :

– Beginning PHP and MySQL

• Autorët:

– W. Jason Gilmore

• Verzioni:

– Edicioni 4

• Data e publikimit:

– 2010


– http://it-

ebooks.info/go.php?id=409-1393903979-

348ec797827bdab7e64dee1a96cc2276



http://it-ebooks.info/go.php?id=409-1393903979-348ec797827bdab7e64dee1a96cc2276




8

Web shembull: www.uiliria.org

HTML

<html>

<body>

<h1>Tungjatjeta Bote!</h1>

<hr>

<h3>1 Kolona:</h3>

<p>100</p>

<hr>

<h3>Ju uroj pune te mbare.</h3>

</body>

</html>

9

CSS

<html>

<style>

body

{

background-color:#b0c4de;

}

</style>

<body>

<h1>Tungjatjeta Bote!</h1>

<p>Aplikimi i CSS-it ne prapavi.</p>

</body>

</html>

JQuery

<html> <head>

<script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jqu

ery.min.js">

</script> <script>

$(document).ready(function(){

$("#flip").click(function(){

10

$("#panel").slideDown("slow");

});

});

</script>

<style type="text/css">

#panel,#flip

{ padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid 1px #c3c3c3; }

#panel

{ padding:50px;

display:none; }

</style> </head> <body>

<div id="flip">Kliko qe te paraqesim panelin</div>

<div id="panel">Tungjatjeta Bote!</div>

</body> </html>

JavaScript

<html>

<body>

<p>JavaScript shembulli:</p>

11

<button

onclick="myFunction()">Dergo

Kerkesen</button>

<script>

function myFunction()

{

alert("Mire se vini!");

}

</script>

</body>

</html>

PHP

<html>

<head>

<title>PHP Shembull</title>

</head>

<body>

<?php echo '<p>Tungjatjeta Bote!</p>'; ?>

</body>

</html>

12

MySQL

WWW dhe veglat (tools) për WEB Design

• WEB (World Wide Web) ka mbi 20 vite perdorim tashmë, dhe në vazhdimësi

përdorimi i WEB-it po zë vend në të gjitha sferat e jetës. Gjithashtu, aplikimi i

WEB-it tashmë po zë vend të veçant edhe në paisje të tjera siç janë telefonat e

mençur, kompjuterët tabelë, televizione, paisje të ndryshme elektronike, shtëpiake,

etj.

• Nëse jeni të entiziazmum që në karieren tuaj të punoni si WEB Dizajner dhe WEB

Zhvillues (Developer), është e domosdoshme të ngriteni profesionalish në nivel të

lartë. Poashtu kohët e sotit duhet të keni parasysh të bashkpunoni ngusht në ekip

në realizimin e projekteve, ku shumë projekte kanë përmasa të gjera dhe

pjesëmarrës janë më shumë së një i punesuar.

• Sikurse në çdo profesion edhe në këtë lëmi duhet punuar duke përdore vegla

(tools) që të keni mundesi të zhvilloni në nivel të mirëfillët punët e juaja.

13

• Është e rëndesishme që WEB dizajneri/zhvilluesi të posedoj të gjitha veglat që

nevoiten për punën e tij/saj. Në vijim prezentojmë veglat nga më të thjeshtat deri

te ato më të avancuara për WEB Design.

Coffeecup Free HTML Editor

• Coffeecup Free HTML Editor është një softuer apo editor i cili shërben për

zhvillimin e WEB faqeve dhe është verzion falas nga produkti komercial, por që i

mungojnë disa tipare të programit siç janë CSS dizajni i menysë, ngarkimi FTP,

etj. Ndërsa, verzioni komercial përmban të gjitha tiparet (features) për zhvillim të

avancuar të WEB design.

• Softueri Coffeecup Free HTML Editor mund të merret nga linku:

http://www.coffeecup.com/free-editor/

http://www.coffeecup.com/free-editor/

14

NOTEPAD++

• Softueri NOTEPAD++ është editor shumë i fuqishëm i kodit burimor me tipare të

gjëra, ku mundëson të editoj të gjitha kodet e gjuhëve të ndryshme dhe është

jashtzakonisht i përdorshëm për perofesionistët për editim të kodit burimor. E

veqanta e këtij editori është definimi sintaksor që lehtëson dhe e bënë kodin të

kuptueshëm. Gjithashtu, mund të hapni më shumë se një dritare me kod burimor

në të njëjtën kohë dhe kompletimi automatik i kodit burimor ndihmon që të

rregullojmë kodin burimor më shpejt, saktë dhe më lehtë. Tiapri i kërkimit

(search) është mjaft i përshtatshëm dhe përdorshëm në NOTEPAD++. Tipari i

navigimit ndihmon që lehtë të gjendemi në NOTEPAD++, etj.

• Softueri NOTEPAD++ mund të merret nga linku:

http://notepad-plus-plus.org/download/



15

FIREBUG

• Tipari FIREBUG është tipar i fuqishm i WEB brouserit (browser) Mozilla Firefox

që shërben për editimin e WEB faqeve/aplikacioneve. FIREBUG zakonisht

përdoret për të edituar kodin burimor të WEB faqes apo pas zhvillimit të WEB

faqes e kontrollojmë kodin burimor për këtij tipari. Firebug ndihmon të shohni

kjart stilet e HTML dhe CSS tuaj, t’i rregulloni ato dhe të kuptoni faqosjen e faqet

tuaj. Gjithashtu, shërben për të rregulluar JavaScript, të menaxhoni cookies, të

analizoni kohën e ngarkimit të faqës, etj.

• Softueri FIREBUG mund të merret nga linku:

http://getfirebug.com/downloads



16

PAGEBREEZE

• Softueri PAGEBREEZE është editor për të ndertuar WEB faqe të thjeshta dhe të

shpejta. Nuk kërkon njohuri të HTML apo CSS, të gjithë WEB faqen mund ta

përdorni duke përdor veglat “drag & drup” për të ndërtuar një WEB faqe të

thjeshtë. PAGEBREEZE në vete përmban shabllone të thjeshta, ku ju mund ti

ndryshoni ato apo edhe të shtoni materialin tuaj. Në esencë mund të shtoni faqe,

linqe, tabela, fotografi, formulare, etj. Me vetëm disa klikime. Gjithashtu, mund të

shihni dhe të editoni të gjitha faqet e juaja dhe në fund përmes tiparit FTP mund të

dërgoni drejtpërsëdrejti në internet WEB faqen e juaj të sapo ndërtuar.

• Softueri PAGEBREEZE mund të merret nga linku:

http://www.pagebreeze.com/



17

BLUEFISH EDITOR

• Softueri BLUEFISH është vegël për programer që përmban në vete shumë tipare.

Editon sintaksën në gjuhët, siç janë; HTML, CSS, JavaScript, PHP, ASP.NET, etj.

Mundëson të renditni kodin burimor në menyrë efikase, përmban kërkues (search)

dhe zëvendësues të fuqishëm, kompletim automatik të kodit burimor, etj.

BLUEFISH mundëson gjithashtu shtimin e faqeve, linqeve, tabelave, fotografive,

viedo dhe audio ebjekteve, editim dhe rishikim të lehtë, etj.

• Softueri BLUEFISH mund të merret nga linku:

http://bluefish.openoffice.nl/download.html

http://bluefish.openoffice.nl/download.html

18

FILEZILLA

• Softueri FILEZILLA shërben për të përcjell skedarët nga klinti në server apo siç

njihet për FTP (File Transfer Protocol) protokol për transferimin e skedarëve.

FILEZILLA ka tipare të gjëra siç janë; ruan qasshmërin në server, transferim i

lehtë i skedarëve në server, përcjell çdo hapë të ndërmarr në server, cakton nivelin

e qasshmërisë nëpër skedarë, etj.

• Softueri FILEZILLA mund të merret nga linku:

https://filezilla-project.org/



19

XAMPP

• Shkurtesa e softuerit XAMPP qëndron pas X (kryqëzim i platformës)-Apache-

MySQL-PHP-Perl dhe është paketë për grumbuj të zgjidhjeve. Në vijim paraqesim

ndarjen e çdo pjese të softurit:

• Apache: është softuer për WEB Server. Ajo merr kërkesa nga klientët (kompjuterë

të tjerë) dhe e kthen përmbajtjen e tyre nga serveri tek klieni sikurse kërkonte

klienti.

• MySQL: është baza e të dhënave.

• PHP / Perl: Këto janë gjuhët që përdoren për zhvillim në WEB. Përkthyesi duhet

të jetë i instaluar në WEB Server, ashtu që e kupton ngjarjen dhe e shfaq atë te

përdoruesit!

• Pra nga keto tipare përbehët XAMPP. Kjo ju lejon të drejtoni një WEB Server që

të interpretoni WEB faqet e zhvilluara në PHP, Perl, apo edhe në HTML.

• Softueri XAMPP mund të merret nga linku:

http://www.apachefriends.org/download.html

http://www.apachefriends.org/download.html

20

Analizat, kërkimet dhe raportet

• Kuptimi i mirëfilltë i kërkesave, nevojave dhe dëshirave të shfrytëzuesve të

ndërmarrjes është qendra e suksesit në dizajnimin e ueb faqeve apo ueb

aplikacioneve.

• Dizajnimi i ueb faqeve/app. zakonisht fillon me hulumtimin e kërkesave, duke

përfshirë edhe takimet rreth intervistave dhe mbikëqyrjen nga ndërmarrja gjatë

zhvillimit të ueb faqes/app. me qëllim që të kuptojmë sa më mirë se si ueb

faqeja/app. mund t’i zgjedh problemet apo si do të përdoret nga ana e

shfrytëzuesve.

• Është e natyrshme që dizajnerët gjatë fazës së zhvillimit të testojnë secilën fazë të

procesit me qëllim që dizajnimi dhe ndërtimi i ueb faqes/app. të jetë sa më e

përdorshme për shfrytëzuesit.

• Nëse shfrytëzueset e kanë të vështirë të gjenden lehtë në përmbajtjen e faqeve të

ueb-it dhe të kalojnë në hapin tjetër të procesit, atëherë duhet të ri-dizajnojmë nga

fillimi ueb faqen/app.

Diagrami i kornizës (wireframe diagrams)

• Diagrami i kornizës (wireframe diagram) paraqet strukturën e faqeve të ueb-it

duke përdor planin apo skicën për secilën pjesë të ueb faqes, sikurse në fig. 1 në

vijim.

• Qëllimi i diagramit të kornizës është që të ndaj pjesët e ueb faqes dhe t’i paraqes

fushat e ueb faqes se si janë të ndara.

• Diagrami i kornizës po ashtu paraqet organizimin e navigimit, fushat e kërkimit,

elementet e formës, etj. të cilat janë të paraqitura thjeshtë pa ndonjë dekorim apo

dizajn grafik, por vetëm në vija të trasha sikurse në fig.1 në vijim.

21

Fig. 1. Diagrami i kornizës (wireframe diagrams).

Diagrami i faqes

• Diagrami i faqes paraqet strukturën e faqes në tërësi dhe lidhjen e ndërsjellët për

secilën faqe. Më poshtë fig. 2. paraqet diagramin e një ueb faqe të thjeshtë.

22

Fig.2. Diagrami i një web faqeje të thjeshtë.

• Dizajni grafik ka të bëjë me ueb faqet të cilat kërkojnë vëmendje në prezantim dhe

dizajn të saj.

• Detyra e dizajnerit grafik është të ndërtoj pamjen dhe ndjenjën e ueb faqes, siç

janë; logo, grafika, tipet, ngjyrat, etj. me qellim që në hapjen e parë të ueb faqes të

len mbresa tek shfrytëzuesit, të jetë tërheqëse dhe të jetë konsistentë në

prezantimin e markës dhe mesazheve të organizatës.

• Ndërsa, dizajnerët vizual dizajnojnë skemën se si ueb faqja do të duket.

• Gjithashtu, dizajnerët vizual kanë përgjegjësi për prodhimin e skedarëve (fajlëve)

të cilët duhet të jen të optimizuar dhe sa më të lehtë për dërgim nëpër trafikun e

ueb-it.

23

Zhvillimi (Development)

• Zhvilluesit e ueb-it nuk merren me dizajnimin e strukturës apo me pamjen e ueb

faqes, por ata duhet të komunikojnë për së afërmi me dizajnerët e ueb-it me qëllim

që të kuptojnë në tërësi qëllimin e ueb faqes për të ndërtuar sa më mirë

funksionalitetin dhe të gjejnë zgjidhje sa më të përshtatshme.

• Disiplina që ka të bëjë me zhvillimin e ueb faqeve/app. ka të bëjë me autorin e

faqes (HTML), stilimin (CSS) dhe skriptimin (JavaScript) apo programimin (PHP,

ASP.NET, Python, Ruby) e ueb faqes.

Frontend VS Backend

• Ueb dizajnerët dhe zhvilluesit shpesh prezantohen që janë të specializuar në pjesën

e frontend-it apo backend-it për ndërtimin e ueb faqeve/app.

• Frontend dizajni ka te bëjë me pjesën e klientit apo drejtpërsëdrejti me browser-ët.

• Detyrat e frontend dizajnit janë:

- Dizajnimi grafik dhe prodhimi i imazheve

- Dizajnimi i interface-ve (ndërfaqeve)

- Dizajnimin e përmbajtjes dhe të informacioneve

- Dizajnimin e HTML dhe CSS

- Dizajnimi i JavaScript

• Backend dizajni ka të bëjë me pjesën e serverit me qëllim që të bëjë ueb

faqen/app. dinamik dhe interaktiv me shfrytëzuesit.

• Në përgjithësi, pjesa e backend bie tek programerët me eksperience për shkak të

përgjegjësisë, por preferohet që edhe dizajnerët e frontend-it të kanë njohuri mbi

backend.

• Detyrat e backend dizajnit janë:

- Dizajnimin e informatave, se si ato organizohen në pjesën e serverit

- Procesimin e formave

24

- Programimin e bazës së të dhënave

- CMS - Sistemi për menaxhimin e përmbajtjes

- Po ashtu, ana e serverit përmban gjuhët programuese siç janë:

PHP, JSP, ASP.NET, Ruby, Java, etj.

Multimedia

• Gjë interesante është multimedia e cila ka të bëjë me vendosjen e elementeve të

ndryshme në faqe, siç janë;

audio (zërimi), video, animacionet, etj.

• Kompanit e mëdha të zhvillimit të ueb faqeve/app. zakonisht kërkojnë specialist të

standardeve të veglave multimediale dhe që kanë ndjeshmëri dhe saktësi të mirë

dhe instinkt për dizajnimin kreativ të multimedias.

Teknologjitë e ueb-it

• Teknologjitë e ueb-it janë:

- HTML

- CSS

- JavaScript

- PHP (programimi i pjesës së serverit) dhe

- MySQL (menaxhimi i bazës së të dhënave)

• Web dizajnerët profesional duhet të posedojnë harduer me performancë të mira

dhe softuerë të kohës.

25

• Harduerë: Desktop/Laptop me performacë të mira, memorie shtesë (ekstra),

monitor të gjerë, skaner dhe kamerë digjitale, kompjuter të tjetër me sisteme

operative të tjera, dhe një pajisje celulari të mençur me qasje në internet, etj.

• Autori i ueb faqes/app. mund të përdorë aplikacionet siç janë: Adobe

Dreamweaver, Microsoft Expression Web dhe NVU. HTML editorët, Adobe

Photoshop, Adobe Photoshop Elements, Adobe Illustrator, Adobe Fireworks,

Corel Paint Shop Pro Photo, GIMP “GNU Image Manipulation Program”, etj.

• Veglat (tools) për internet:

Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera.

• Veglat (tools) për internet për pajisje mobile: Mobile Safari (iOS), Android

Browser (Android), BlackBerry Browser (RIM), Nokia Series 40 dhe Nokia

Browser për Symbian, Opera Mobile dhe Mini, Internet Explorer Mobile, Silk.

• FTP (File Transfer Protocol): WS_FTP, CuteFTP, AceFTP, Filezilla.

• Termi Internet i takon rrjetës (network), ku të gjithë kompjuterët janë të lidhur

njëri me tjetrin.

• Termi WEB është shkurtesë e World Wide Web apo www dhe është mënyrë e

paraqitjes së informatave të shpërndara në internet.

• Më 3 Shkurt 2011, agjensioni IANA merr vendim të zgjeroj përdorimin e IP

adresave të versionit IPv4 apo IP adresat të formës ###.###.###.###, dhe ndoshta

do të duhen dekada për t’i eliminuar në tërësi IPv4. Ndërsa, tash e tutje do të

përdoret gjenerata e re e IP adresave, IPv6 e cila na mundëson shumë më shumë

kombinime sesa IPv4.

26

HTML – Hypertext Markup Language

• Termi HTML qëndron pas Hypertext Markup Language.

• HTML është gjuhe për shkrimin e dokumenteve të cilat përdoren ne ueb.

• HTML është sistem i standardizuar qe mundëson futjen e tekstit te skedarëve

nëpër tagje siç janë: fontet, ngjyrat, grafikët, linçet, etj. për të marr formën e duhur

ne ueb.

• Kur shkruajmë HTML, përdorim tagje për te strukturuar dhe organizuar sa me

mire ueb faqen.

• Në HTML, deklarimi DOCTYPE definon tipin e dokumentit, p.sh.:

<!DOCTYPE html>

• Teksti ndërmjet <html> dhe </html> përshkruan ueb faqen

• Teksti ndërmjet <body> dhe </body> është përmbajtja e cila paraqitet ne ueb faqe

• Teksti ndërmjet <h1> dhe </h1> paraqet madhësinë e fjalëve apo heading

• Teksti ndërmjet <p> dhe </p> paraqet paragrafin

HTML DOCTYPE deklarimi

• Ka shumë dokumente në ueb, ashtu që ueb brouseret (p.sh. Firefox) mund të

paraqesin ueb faqen 100% korrekt vetëm nëse e njohin tipin e HTML dhe

versionin e deklaruar, siç janë versionet:

• Versioni: HTML 5

<!DOCTYPE html>

• Versioni: HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.uiliria.org">

27

• Versioni: XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www. uiliria.org ">

HTML tag

• HTML tagjet (tag) janë fjalë apo komanda (emra me tagje) emra që futen brenda

kllapave, sikurse <html>

• HTML tagjet zakonisht paraqiten në qift, sikurse <p> dhe </p>, ku fjalët apo

komandat brenda tagut pason me mbyllje.

• Tagu i parë fillon, kurse tagu i dytë e mbyll apo e përfundon një funksion.

• <p> quhet tagu i hapur

• </p> quhet tagu i mbyllur

HTML elelemtet

• Një HTML element përmban gjithçka brenda tagut nga fillimi i një tagu deri në

fund të tagut tjetër, si në vijim:

Tagu fillestar Përmbajtja e elementit Tagu i fundit

<p> Një paragraf </p>

<a href=“uiliria.html"> Një link </a>

<br> Kryerresht

• Zakonisht tagu fillestar quhet tag i hapur, ndërsa tagu i fundit quhet tag mbyllës.

28

• HTML elementet mund të përmbajnë atribute

• HTML elemente, gjithashtu mund të përmbajnë elemente të tjera.

Atributet e HTML

• HTML elementet mund të përmbajnë atribute.

• Atributet ofrojnë informata shtesë në lidhje me një element.

• Atributet gjithnjë specifikohen brenda tag-ut.

• Atributet përmbajnë emër/vlerë, p.sh.: name =“value”

• Atributet shënohen me shkronjë të vogël.

• Shembull:

<font face="arial" color="#CC0000">

Disa nga HTML atributet

Atributi Opcioni Funksioni

align djathët, majtë, qendër rreshton tag-et në mënyrë horizontale për një element

valign lartë, mes, poshtë rreshton tag-et në mënyrë vertikale për një element

bgcolor vlera numerike, RGB apo

heksadecimale vendos një ngjyrë prapavije prapa një elementi

background URL vendos një imazh prapavije prapa një elementi

id përcaktuar nga përdoruesi emërton një element për përdorim me CSS

29

class përcaktuar nga përdoruesi klasifikon një element për përdorim të CSS

width vlerë numerike specifikon gjatësin e imazhit, fushës dhe tabelës

height vlerë numerike specifikon gjerësin e imazhit, fushës dhe tabelës

title përcaktuar nga përdoruesi “pop-up" apo paraqet titullin për element

HTML shembuj me tagje

• <p>Departamenti i Shkencave Kompjuterike, lenda WEB DESIGN!</p>

• <p>Sot eshte dite me diell,<br> por ne mbremje behet ftoht.<br> Ndersa, te

reshura nuk ka.</p>

• <p>Ne WEB Design ne studiojm<b>Hyper Text Markup Language,</b> kete na

mundeson lenda<i> WEB Design.</i></p>

• <p><sub>Ne kete semester</sub>ne kemi gjithesejt<small> pese lende</small>

ne Shkenca Kompjuterike.</p>

HTML shembuj me llojet e madhësive të fonteve

30

Numërimi dhe pikëzimi në HTML

Numërimi rendor:

1. Kati I

2. Kati II

3. Kati III

Numërimi me pikëzim:

• Kati I

• Kati II

• Kati III

<p>Numerimi rendor:</p>

<ol>

<li>Kati I</li>

<li>Kati II</li>

<li>Kati III</li>

</ol>

<p>Numerimi me pikezim:</p>

<ul>

<li>Kati I</li>

<li>Kati II</li>

<li>Kati III</li>

</ul>

HTML kreu (Heading)

• Makinat e kërkimit (search engines, p.sh. Google) përdorin Headings për të

indeksuar strukturën dhe përmbajtjen e ueb faqes.

• Përderisa shfrytëzuesit mund të shikojnë konstruksionin e ueb faqes, është e

rëndësishme përdorimi i headings për të paraqitur strukturën e ueb faqes.

<h1>Lloji i fontit H1</h1>






• Në secilën ueb faqe mund të shihni strukturën e saj duke klikuar me tastin e

djathtë mbi ueb faqen dhe duke zgjedh opsionin “View Source” apo “View Page

Source”.

31

• Tagu <hr> vizaton vijë horizontale.

• Tagu 

• Komentet shërbejnë vetëm për dizajnerin dhe nuk paraqiten nga ueb brouseret.

Komentet janë të rëndësishëm gjate evidentimit të ndonjë tagu apo duke

përmirësuar gabimet në HTML.

• HTML nuk merr parasysh hapësirën ndërmjet tagjeve.

HTML tagjet për formatimin e tekstit

• HTML përdor tagjet <b> apo <i> për formatimin e tekstit, duke e bërë tekstin bold

(me ngjyrë më të theksuar) apo italic (më të pjerrët).

• Tagjet <b> dhe <strong> - të dyja qëndrojnë pas bold apo e bëjnë tekstin me

ngjyrë më të theksuar. Kanë të njëjtin rol.

• Tagjet <i> dhe <em> - të dyja qëndrojnë pas italic apo e bëjnë tekstin më të

pjerrët.

Tagjet për formatimin e tekstit

Tag Përshkrimi

<b> Definon tekstin bold

<em> Definon tekstin italic

<i> Definon tekstin italic

<small> Definon tekstin me madhësi më të vogël

<strong> Definon tekstin bold

32

<sub> Definon tekstin nën nivel të rreshtit

<sup> Definon tekstin mbi nivel të rreshtit

<ins> Definon tekstin e insertuar

<del> Definon tekstin e fshier

<mark> Definon tekstin e nënvizuar

Linçet në HTML

• Tagu <a> definon një link. Linku mund të jetë një fjalë, grup fjalësh apo edhe

imazh, ku duke klikuar në të kalojmë në ueb faqen tjetër.

• Kur kaloni shigjetën e mausit mbi link, atëherë shigjeta ndryshohet në dorë dhe

sinjalizon që linku mund të klikohet.

• Atributi me i rëndësishëm i elementit <a> është atributi href i cili paraqet

destinacionin e linkut.

<a href="http://www.uiliria.org">Universiteti ILIRIA</a>

• Atributi target tregon, ku të hapim faqen e re.

<a href="http://www.uiliria.org" target="_blank">Universiteti ILIRIA</a>

Elementi <head> mund të përmbaj

Tag Përshkrimi

<head> Definon informacione rreth ueb faqes

<title> Definon titullin e ueb faqes

<base> Definon adresën bazë apo mund t'i definojmë linçet në tërësi të

specifikuara në ueb faqe

<link> Definon relacionin ndërmjet ueb faqes dhe linçeve eksternale në

33

ueb faqe

<meta> Definon meta informata rreth ueb faqes në HTML

<script> Definon skriptën e pjesës së klientit

<style> Definon stilin e informatave për ueb faqen

Elementi <title> në HTML

• Tagu <title> definon titullin/emrin e ueb faqes.

• Ofron titullin/emrin e ueb faqes, kur ruajmë ndonjë ueb faqe në listën e ueb faqeve

favorite.

• Paraqet titullin/emrin e ueb faqes në listën e rezultateve të makinave të kërkimit.

• Elementi <title> është i nevojshëm në të gjitha ueb faqet HTML/XHTML.

<head>

<title>Universiteti ILIRIA</title>

</head>

Elementi <link> në HTML

• Tagu <link> definon relacionin ndërmjet ueb faqes dhe linçeve eksternale në ueb

faqe.

• Tagu <link> përdoret edhe për t’i lidh linçet e CSS, si në vijim:

<head>

<link rel="stylesheet" type="text/css" href=“stiliIm.css">

</head>

34

Elementi <head> në HTML

• Elementi <head> është vend mbledhës për të gjitha elementet të cilat zë vend në

krye apo ne head.

• Elementet në <head> mund të përmbajnë skripta, linqe, CSS, meta informata dhe

shumë informata të tjera p.sh. si në vijim:

<title>, <style>, <meta>, <link>, <script>, <noscript>, etj.

Elementi <style> në HTML

• Tagu <style> përdoret për të definuar stilin për informatat në ueb faqe si në vijim:

<head>


body {background-color:yellow;}

p {color:blue;}

</style>

</head>

• Brenda elementit <style> specifikohet si do të paraqiten elementet e tjera në ueb

faqe.

Elementi <meta> në HTML

• Tagu <meta> ofron meta informata në lidhje me metadata të HTML ueb faqes.

Meta informatat nuk paraqiten në ueb faqe, por lexohen nga makinat e kërkimit.

• Meta informatat përdoren për të specifikuar informatat siç janë: përshkrimi i ueb

faqes, keywords apo fjalët, autori i ueb faqes, data e modifikimit të ueb faqes dhe

informata të tjera.

• Meta tagjet gjithnjë duhet të jen brenda tagjeve head.

35

<meta name="keywords“ content="HTML, CSS, XML, XHTML, JavaScript">

<meta name="description" content=“lenda ueb dizajn">

<meta http-equiv="refresh" content="30">

Imazhet në HTML

• Në HTML imazhet definohen me tagu <img>.

• Për të vendos një imazh në ueb faqe, duhet me shtua atributin src (që qëndron pas

source).

• Në atributin src epet lokacioni i imazhit të cilin dëshirojmë ta paraqesim në ueb

faqe.

<img src="url" alt="tekst per imazhin">

• Atributi alt ofron informacion alternative për imazhin, në rast se imazhi nuk

paraqitet fare, në rast të ndonjë gabimi në atributin src, etj.

<img src="logo.jpg" alt="Logo e Uni ILIRIA">

• Atributet height dhe width tek imazhet përdoren për përcaktimin e dimensioneve

të imazhit, gjetësin dhe gjerësinë e imazhit, respektivisht.

• Vlera e zakonshme e atributeve height dhe width paraqitet ne pixel.

<img src="logo.jpg" alt="Logo e Uni ILIRIA" width="60" height="60">

• Nëse ueb faqeja përmban 10 imazhe, atëherë në përgjithësi kemi 11 skedar.

Tabelat në HTML

• Tabelat definohen me tagun <table>.

• Tagu <tr> qendron per rresht, ndersa <td> qendron per me I nda fushat e rreshtit.

36

• Tagu <th> qendron per te definuar titullin e tabeles.

• Ne tagun <td> mund te futim elemente sic jane: tekst, munra, simbole, imazhe,

linqe, fusha te tjera, tabela, etj.

• Ndersa gjatesia apo width e tabeles mund te definohet duke aplikuar CSS.

<table style="width:200px">

<tr>

<td>Labinot</td>

<td>Hasani</td>

<td>10 000</td>

</tr>

</table>

Ngjyrat në HTML

• Me anë të kombinimit të Read Green Blue ngjyrave, fitojmë të gjitha ngjyrat e

tjera të mundshme.

• Ngjyrat mundemi me i emërtua edhe me emrat e tyre në gjuhën ANG.

Ngjyra Kodi i ngjyrës në HEX Kodi i ngjyrës në RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

37

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

38

Stilimi i HTML me CSS

• CSS (Cascading Style Sheets) pёrdoret për t’i dhanë stil dhe pamje tё bukur

HTML-it. Gjithashtu përdoret për t’i automatizuar funksionet për HTML

dhe pёr tё ju lehtësuar punën.

• Fillimisht, CSS u prezantua me versionin HTML 4, për të siguruar një

mënyrë më të mirë për stilimin e elementeve të HTML.

• CSS, në elementet e HTML mund të përdoret në mënyrat si më poshtë:

- Inline (brenda elementit në body) – duke përdorë stilet në atribute të

elementeve të HTML

- Internal (brenda elementit në head) – duke përdorë elementin <style> brenda

seksionit <head>

39

- External (skedar tjetër) – duke përdorë CSS skedarë eksternal (në një skedar

tjetër)

• Mënyra më e preferuar e për të përdor CSS është duke ndërtuar CSS në një

skedar të veçantë.

Stili Inline përmes CSS

• Stili Inline (brenda elementit në body) – duke përdorë stilet në atribute të

elementeve të HTML

P.sh.:

<p style="color:blue; margin-left:20px;">Nje paragraf i shkurt.</p>

P.sh.:

<html>

<body style="background-color:yellow;">

<h2 style="background-color:red;">Nje fjali me heading 2.</h2>

<p style="background-color:green;">Nje tjeter paragraf.</p>

</body>

</html>

• Lloji i fontit, ngjyrat dhe madhësia e fontit definohen brenda elementeve në

HTML.

P.sh.:

<html>

<body>

<h1 style="font-family:verdana;">Nje fjali me heading 1.</h1>

<p style="font-family:arial; color:red; font-size:20px;">Nje paragraf.</p>

</body>

</html>

40

Tagu Përshkrimi

<style> Definon informata të stilit për ueb faqen

<link> Definon lidhshmerin ndërmjet ueb faqes dhe skedarit (burimit)

ekstrën.

• Vendosja e tekstit në qendër përmes atribut style bernda një elementi.

P.sh.:

<html>

<body>

<h1 style="text-align:center;">Nje fjali e vendosur ne qender.</h1>

<p>Nje paragraf i thjesht.</p>

</body>

</html>

Internal Style Sheet

• Internal style sheet (brenda elementit në head) – duke përdorë elementin

<style> brenda seksionit <head>

• Stilimi internal përdoret në qoftë se një ueb faqe e vetme ka një stil unik.

• Stilet e brendshme janë të përcaktuara brenda seksionin <head> në një faqe

HTML, duke përdor <style> tagun, si ne vijim:

P.sh.:

<head>

<style>


p {color:blue;}

41

</style>

</head>

External Style Sheet

• External style sheet (skedar i jashtëm) – duke përdorë CSS skedar ekstrën

(ne një skedar tjetër)

• Në rast se stilimi me CSS aplikohet në më shumë faqe, atëherë stilimi

ekstrën është më i përshtatshëm.

• Me një ndryshim në stilin e jashtëm, mund të ndryshohet pamja e një ueb

faqeje të tërë. Çdo faqe duhet të ndërlidhet me skedarin ekstrën duke

përdorur tagun <link>. Tagu <link> vendoset brenda seksionit <head> si në

vijim:

P.sh.:

<head>


</head>

HTML blloqet

• Në shumë raste HTML elementet definohen në nivel të blloqeve apo

edhe në një rresht të vetëm brenda një elementit.

• Blloqet zakonisht fillojnë në një rresht dhe gjithashtu përfundojnë në një

rresht të vetëm.

<h1> <p> <ul> <table>

……… ……… ..…… …………..

</h1> </p> </ul> </table>

42

• Ndërsa, Inline elementet fillojnë dhe vazhdojnë apo të njëjtin rresht

sikurse:

<b>…</b>, <td>…</td>, <a>…</a>, <img>…</img>

<div> elementi në HTML

• <div> elementi i takon nivelit të blloqeve dhe shërben për grupimin e

elementeve të tjera të HTML. Eelementet definohen në nivel të blloqeve

apo edhe në një rresht te vetem brenda nje elementit.

• <div> elementi nuk ka ndonjë veçori, përveç se i takon nivelit të blloqeve

dhe ueb borsarët e paraqesin nga një rresht të zbrazet para dhe pas elementit

<div>.

• Kur elementi <div> përdoret së bashku me CSS, mund të përdoret për të

përcaktuar stilin e atributeve për blloqe më të mëdha.

• Një tjetër përdorim i përbashkët i elementit <div> me CSS, është për

layout-in e ueb faqes.

<SPAN> elementi në HTML

• Elementi <span> është një element që mund të përdoren si një kontejner për

tekst.

• Elementi <span> nuk ka kuptim të veçantë, përveç se kur përdoret së

bashku me CSS, elementi <span> mund të përdoret për të përcaktuar stilin

atributet për pjesë të tekstit.

HTML layouts

• Layout i ueb faqes është shumë me rëndësi për me u duke ueb faqeja bukur.

• Shumë nga ueb faqet fusin tekstin nëpër kolona me qëllim që të formatohet

teksti, sikurse nëpër magazina apo gazeta.

43

• Kolonat ndërtohen duke përdor elementet <div> apo <table>. Ndërsa, CSS

përdoret për t’i vendosë elementet që të duken bukur.

Elementi <div> për HTML layouts

P.sh.:

<html>

<body>

<div id=“kontenieri" style="width:500px">

<div id="headeri" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Titulli kryesor i ueb faqes</h1></div>

<div id="menu" style="background-color:#FFD700; height:200px; width:100px;

float:left;">

<b>Menyja</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<div id=“permbajtja" style="background-color:#EEEEEE; height:200px; width:400px;

float:left;">

Permbajtja vendoset ketu…</div>

<div id="futeri" style="background-color:#FFA500; clear:both; text-align:center;">

Copyright © www.uiliria.org</div>

</div>

</body>

</html>

http://www.uiliria.org/

44

Elementi <table> për HTML layouts

P.sh.:

<html>

<body>

<table width="500">

<tr>

<td colspan="2" style="background-color:#FFA500;">

<h1> Titulli kryesor i ueb faqes </h1>

</td>

</tr>

<tr>

<td style="background-color:#FFD700; width:100px;">

<b>Menyja</b><br>

HTML<br>

CSS<br>

JavaScript

</td>

<td style="background-color:#EEEEEE; height:200px; width:400px;">

Permbajtja vendoset ketu…</td>

</tr>

<tr>

<td colspan="2" style="background-color:#FFA500; text-align:center;">

Copyright © www.uiliria.org </td>

</tr>

http://www.uiliria.org/

45

</table>

</body>

</html>

HTML format

• HTML format përdoren për t’i përcjell të dhënat në server.

• HTML format mund të përmbajnë elemente hyrëse siç janë: fusha teksti,

checkboxes, butona përcjellës, etj.

• Gjithashtu, format mund të përmbajnë lista të selektimit, fusha të tekstit,

legjenda, label elemente, etj.

• Elementi <input> përdoret për të përcaktuar informata për shfrytezues.

• Fusha <input type="text"> definon një fushë inputi online që shfrytëzuesi

mund të shkruaj tekst, p.sh.:

<form>

Emri: <input type="text" name=“emri"><br>

Mbiemri: <input type="text" name=“mbiemri">

</form>

Fusha e fjalëkalimit dhe radio buton

• Fusha e fjalëkalimit:

<form>

Fjalëkalimi: <input type="password" name=“fjalekalimi">

</form>

46

• Radio buton:

<form>

<input type="radio" name=“m" value="mashkull">Mashkull<br>

<input type="radio" name=“f" value="femer">Femer

</form>

Checkbox dhe butoni përcjellës

• Checkbox:

<form>

<input type="checkbox" name=“makina" value="Biciklete">

Une kam biciklete.<br>

<input type="checkbox" name=“makina" value=“Veture">

Une kame veture.</form>

• Radio buton:

<form name="input" action="demo_form_action.asp" method="get">

Shfrytëzuesi: <input type="text" name=“shfrytezuesi">

<input type="submit" value=“Dergo">

</form>

HTML skriptat

• Tagu <script> përdoret për të definuar skriptën në anën e klientit, siç është

JavaScript.

47

• JavaScript përdoret për të manipuluar me imazhe, forma të validimit apo

edhe ndryshimet dinamike në përmbajtje.

• Skripta në vijim shkruan fjalinë Tungjatjeta bote! në dalje:

<script>

document.write(“Tungjatjeta bote!")

</script>

• Tagu <nonscript> përdoret për të dhënë një zgjidhje alternative në rast se

skripta është ndaluar në ueb bruserët e shfrytëzuesve, si në vijim:

<script>

document.write(“Tungjatjeta bote!")

</script>

<noscript>Kerkojme ndjese, ueb brouseri i juaj nuk e perkrah

JavaScript!</noscript>

• Disa shembuj me JavaScript:

document.write("<p>Nje paragraf i thjeshte.</p>");

<button type="button" onclick="myFunction()">Me kliko!</button>

document.getElementById("demo").style.color="#ff0000";

HTML entitetet

• Karakteret e rezervuara duhet zëvendësuar me kodet:

Rezultati Emri i entiteti Kodi i entitetit

< < <

48

> > >

& & &

¢ ¢ ¢

£ £ £

€ € €

© © ©

® ® ®

HTML simbolet

• Simbolet janë të rezervuara dhe duket të zëvendësuar me kodet:

Karakteri Numri Entiteti

∀ ∀ ∀

∂ ∂ ∂

∃ ∃ ∃

∅ ∅ ∅

∇ ∇ ∇

∈ ∈ ∈

∉ ∉ ∉

49

∋ ∋ &ni;

∏ ∏ ∏

∑ ∑ ∑

Atributet charset në HTML

• ASCII është standard i enkodimit për karakteret (character encoding

standard), gjithashtu quhet edhe bashkësi e karaktereve.

• ASCII përkrah numrat (0-9), shkronjat e gjuhës angleze (A-Z), dhe disa

karaktere speciale, siç janë: ! $ + - ( ) @ < > . Poashtu shërben për me t’i

njohur karakteret siç janë: ë, ç, Ë, etj.

• Për të shfaqur një faqe HTML në mënyrë korrekte, një ueb brouser duhet të

dinë në lidhje me vendosjen e karakterit në ueb faqe.

• Këto specifikohen në <meta> tagun:

• Për HTML4:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

• Për HTML5:

<meta charset="UTF-8">

URL në HTML

Skema Qëndron për.... Përdoret për...

http Hypertext Transfer Protocol Ueb faqet e thjeshta fillojnë me http://.

ë Nuk janë t enkriptuara

httpsSecure Hypertext Transfer

Protocol

Ueb faqe e sigurt

Te gjitha informata jane te enkriptuara

50

ftp File Transfer ProtocolProtokol për mirëmbajtjen e serverit dhe

ë ë transferim t skedarëve n server

file ë Skedar n kompjuter lokal

Stilimi i HTML me CSS

• CSS (Cascading Style Sheets) pёrdoret për t’i dhanë stil dhe pamje tё bukur

HTML-it. Gjithashtu përdoret për t’i automatizuar funksionet për HTML

dhe pёr tё ju lehtësuar punën.

• Fillimisht, CSS u prezantua me versionin HTML 4, për të siguruar një

mënyrë më të mirë për stilimin e elementeve të HTML.

• CSS, në elementet e HTML mund të përdoret në mënyrat si më poshtë:

- Inline (brenda elementit në body) – duke përdorë stilet në atribute të

elementeve të HTML

- Internal (brenda elementit në head) – duke përdorë elementin <style> brenda

seksionit <head>

- External (skedar tjetër) – duke përdorë CSS skedarë eksternal (në një skedar

tjetër)

• Mënyra më e preferuar e për të përdor CSS është duke ndërtuar CSS në një

skedar të veçantë.

Stili Inline përmes CSS

• Stili Inline (brenda elementit në body) – duke përdorë stilet në atribute të

elementeve të HTML

P.sh.:

<p style="color:blue; margin-left:20px;">Nje paragraf i shkurt.</p>

P.sh.:

51

<html>

<body style="background-color:yellow;">

<h2 style="background-color:red;">Nje fjali me heading 2.</h2>

<p style="background-color:green;">Nje tjeter paragraf.</p>

</body>

</html>

• Lloji i fontit, ngjyrat dhe madhësia e fontit definohen brenda elementeve në

HTML.

P.sh.:

<html>

<body>

<h1 style="font-family:verdana;">Nje fjali me heading 1.</h1>

<p style="font-family:arial; color:red; font-size:20px;">Nje paragraf.</p>

</body>

</html>

Tagu Përshkrimi

<style> Definon informata të stilit për ueb faqen

<link> Definon lidhshmerin ndërmjet ueb faqes dhe skedarit (burimit)

ekstrën.

• Vendosja e tekstit në qendër përmes atribut style bernda një elementi.

P.sh.:

<html>

<body>

<h1 style="text-align:center;">Nje fjali e vendosur ne qender.</h1>

52

<p>Nje paragraf i thjesht.</p>

</body>

</html>

Internal Style Sheet

• Internal style sheet (brenda elementit në head) – duke përdorë elementin

<style> brenda seksionit <head>

• Stilimi internal përdoret në qoftë se një ueb faqe e vetme ka një stil unik.

• Stilet e brendshme janë të përcaktuara brenda seksionin <head> në një faqe

HTML, duke përdor <style> tagun, si ne vijim:

P.sh.:

<head>

<style>


p {color:blue;}

</style>

</head>

External Style Sheet

• External style sheet (skedar i jashtëm) – duke përdorë CSS skedar ekstrën

(ne një skedar tjetër)

• Në rast se stilimi me CSS aplikohet në më shumë faqe, atëherë stilimi

ekstrën është më i përshtatshëm.

• Me një ndryshim në stilin e jashtëm, mund të ndryshohet pamja e një ueb

faqeje të tërë. Çdo faqe duhet të ndërlidhet me skedarin ekstrën duke

53

përdorur tagun <link>. Tagu <link> vendoset brenda seksionit <head> si në

vijim:

P.sh.:

<head>


</head>

CSS shembull

<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-color:#d0e4fe;

}

h1

{

color:orange;

text-align:center;

}

p

{

54

font-family:"Times New Roman";

font-size:20px;

}

</style>

</head>

<body>

<h1>CSS shembull!</h1>

<p>Nje paragraf i shkurt.</p>

</body>

</html>

Sintaksa në CSS

• Selektori apo përzgjedhësi cakton aplikimin e CSS në elementin e HTML të

përzgjedhur.

• Blloku deklarimi përmban një apo më shumë deklarime.

• Çdo deklarim përmban një emër tipari dhe një vlerë, e cila përfundon me

pikëpresje.

55

Sintaksa dhe Sektorët në CSS

/*Komentet ne CSS per nje

apo me shume rreshta*/

p

{

color:red;

text-align:center;

}

• CSS selektorët ndihmojnë për me i zgjedh dhe për me manipuluar për

elementet e HTML.

• CSS selektorët përdorën për me i gjet apo me i zgjedh elementet e HTML

duke u bazuar në ID, klasat, tipet, atributet, vlerat, etj.

ID dhe class Selektorët në CSS

• ID selektori përdoret për të

përshkruar stilin për një element

unik.

• ID përdoret si atribut i HTML

elementit dhe paraqitet me “#”, p.sh.:

#parametri1

{

text-align:center;

color:red;

}

Id=”param1”

• Class selektori përdoret për të përshkruar

stilin për një grup të elementeve.

• Class mund të përdoret për shumë HTML

elemente në një dokument dhe paraqitet

me “.”, p.sh.:

.center {text-align:center;}

class="center"

p.center {text-align:center;}

56

Background dhe background color në CSS

• CSS background përdoret për të definuar prapavijën e një HTML elementi.

• CSS background përmbajnë disa lloje të përdorimeve të prapavijës, siç

janë: background-color, background-image, background-repeat,

background-attachment, background- position.

• Background color është veçori e elementit e cila specifikon ngjyrën e

prapavijës të elementit, si p.sh.:

body {background-color:#b0c4de;}

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

• Backgound-image është veçori e elementit e cila specifikon imazhin e

prapavijës të elementit si p.sh.:

body {background-image:url('logo.jpg');}

• Imazhet përsëriten varësisht nga madhësia e elementit. Ndërsa, ato

përsëriten në dy mënyra, horizontalisht dhe vertikalisht.

body

{

background-image:url('pixel.png');

background-repeat:repeat-x; /* Përsëritet horizontalisht */

background-repeat:repeat-y; /* Përsëritet vertikalisht */

background-repeat:no-repeat; /* Nuk përsëritet */

background-position:right top; /* Pozita e imazhit në anën e djathtë lartë */

}

body {background:#ffffff url(‘logo.jpg') no-repeat right top;}

57

Teksti në CSS

• Ne tekst, CSS gjen mjaft aplikueshmeri të gjerë dhe mundëson ndryshime

në tekst.

• Text Color – përdoret për të caktuar ngjyrën e tekstit. Specifikohet si HEX

vlerë, RGB vlerë dhe emër të ngjyrës si p.sh.

body {color:blue;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

• Text Alignment – përdoret për të caktuar radhitjen e tekstit si p.sh.:

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

• Text Decoration – përdoret për të vendosur ose larguar zbukurime në tekstit

si p.sh.:

a {text-decoration:none;}

h3 {text-decoration:underline;}

• Text Transormer – përdoret për të vendosur llojin e shkronjave (të mëdha

apo të vogla) për tekstit si p.sh.:

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

Fontet në CSS

• CSS Font Families – përmban dy lloje të definimit të fontit:

- Generic family - grup i fonteve të ngjashme, dhe

- Font family- lloj specifik i fontit, si p.sh.:

58

p{font-family:"Times New Roman", Times, serif;}

• CSS Font Style – është veçori që cakton stilin e tekstit, ka 3 vlera në

përgjithësi: normal, italic, oblique, si p.sh.:

p.normal {font-style:normal;}

p.italic {font-style:italic;}

• CSS Font Size – është veçori që cakton madhësinë e tekstit, si p.sh.:

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

Linçet në CSS

• CSS linçet mund të rregullohen përmes veçorive të përmendura si: color,

font-family, background, etj.

• Gjithashtu ato mund të përshtaten sipas gjendjes:

a:link, a:hover, a-active, a:visited dhe ate si p.sh.:

a:link {color:#FF0000;} /* link jo i vizituar */

a:visited {color:#00FF00;} /* link i vizituar */

a:hover {color:#FF00FF;} /* link, kur kalojmë me mause mbi */

a:active {color:#0000FF;} /* link i zgjedhur apo selektuar */

• Renditja e përdorimit - a:hover duhet të vendoset pas a:link, ndersa

a:visited, a:active duhet të vendoset pas a:hover

Listat në CSS

• Në HTML kemi mësuar për HTML listat të cilat janë të renditura me numra

rendor dhe të renditura me shenja si p.sh. pika, etj.

59

• Për këto dy lloje mund të përdorim CSS, me qëllim të ndryshojmë

paraqitjen e tyre, si p.sh.:

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}

ul{list-style-image: url(‘fig_listimit.gif');}

Tabelat në CSS

• Për tabelat në HTML, përmes CSS ne mund të ndryshojmë paraqitjen e

tabelave.

• Table border – kjo veçori na mundëson vendosjen e kufizimit të tabelës dhe

rreshtit apo kolonës, si p.sh.:

table, th, td{ border: 1px solid black;}

• Table Width dhe Hight – definon gjatësinë dhe gjerësinë e tabelës, si p.sh.:

table {width:100%;}

th{height:50px;}

Shënim: Gjithashtu në tabela mund të përdoren veçoritë e përmendura më lart, si në

vijim:

td{text-align:right;}

td{height:50px;vertical-align:bottom;}

td{padding:15px;}

table, td, th{border:1px solid green;}

th{background-color:green;color:white;}

60

Margjinat dhe mbushjet (padding) në CSS

• CSS margina - pastron një hapësirë rreth një elementi.

• CSS margina është transparente dhe ka 4 veçori, lartë, poshtë, majtë dhe

djathtë.

• CSS padding - për dallim nga margina vlen vetëm përbrenda elementit,

p.sh.:

margin-top:100px;

padding-bottom:100px;

margin-right:50px;

padding-left:50px;

• margin:25px 50px 75px; - margjina lartë është 25px, djathtë dhe majtë

është 50px, margjina poshtë është 75px.

• margin:25px 50px; - margjina lartë dhe poshtë është 25px, djathtë dhe

majtë është 50px.

• margin:25px; - margjinat gjithandej janë nga 25px.

• Poashtu edhe për CSS padding vlen e njejta.

Kufizat (borders) në CSS

Kufizat në CSS na mundëson që t’i vendosim një elementi kufizimi.

border-style – vendoset kufizimi, sikurse janë:

solid, double, groove, ridge, inset, outset, dashed, dotted dhe none.

border-width – caktohet gjerësia e kufizimit, disa nga vlerat e definuara janë:

thin, medium apo thick.

border-color – caktohet ngjyra e kufizimit.

61

border-style:dotted solid double dashed; - lartë border është dotted, djathtë border është

solid, poshtë border është double dhe majtë border është

dashed.

border-style:dotted solid double; - lartë border është dotted, djathtë dhe majtë borders

janë solid dhe poshtë border është double

border-style:dotted solid; - lartë dhe poshtë borders janë dotted dhe djathtë dhe majtë

borders janë solid

border-style:dotted; - të gjithë borders janë dotted

Shënim: Për border-width dhe color nuk funksionojnë pa border-style.

Grupimi në CSS

Grupimi në CSS - shpesh ndodh që elementet me pas stil të njëjte, p.sh.

h1{color:green; font-size:12px ;}

p {color:green; font-size:12px;}

Për të minimizuar kodin në CSS mund të i shënojmë të dy selektorët, si në vijim:

h1,p{color:green; font-size:12px;}

CSS nesting – në CSS është që të deklarosh selektor pas selektorit si p.sh:

.marked p

{

color:white;

}

Poashtu, display veçoria specifikon mënyrën e paraqitjes për një element dhe atë: none,

inline dhe block.

62

Pseudo-klasat dhe elementet në CSS

• CSS float përdoret kur një elementi dëshirojmë ta vendosim (pozicionojmë)

në anën e djathtë ose në anën e majtë.

• CSS pseudo-classes dhe pseudo-elements - përdoren për me ju dhanë efekte

disa selektorëve.

• Sintaksa për pseudo-classa selector:

pseudo-class{property:value;}

• Klasa mundet me pas pseudo-class si në vijim:

selector.class:pseudo-class{property:value;}

• Sintaksa për pseudo-elemets:

slector:pseudo-element{property:value;}

• Klasa mundet me pas pseudo-class si në vijim:

selector.class:pseudo-element{property:value;}

• Linçet kanë disa pseudoclass-a, si p.sh.:

a:link {color:#FF0000;},a:visited {color:#00FF00;},etj.

Navigimi në CSS

Navigimi është thjesht një list e linqeve e cila përdor <ul> dhe <li> si në vijim:

<ul>

<li><a href=“ballina.html">Ballina</a></li>

<li><a href=“lajme.html">Lajme</a></li>

<li><a href=“kontakti.html">Kontakti</a></li>

</ul>

Disa nga efektet për navigim:

63

/*Për me e fshi * */

ul{list-style-type:none;margin:0;padding:0;}

/* Për me i paraqit me një rresht */

li{display:inline;}

Transparenca e imazheve në CSS

• CSS Image Opacity / Transparency - për pamje të ndryshme të imazheve

përdoret opacity e cila një imazh e paraqet me fokus sipas nevojës, p.sh.:

img{opacity:0.4; filter:alpha(opacity=40);

/*Per verzionin IE 8.0 e lartë*/

JavaScript

• JavaScript është gjuhë programuese e lehtë dhe është ndër më të përdorura

në botë.

• Ndryshe, JavaScript njihet si gjuhë skriptuese dhe gjen aplikueshmëri të

gjer në web, në HTML, serverë, PC, laptopë, tableta të mençur, telefona të

mençur, etj.

• Kodi i JavaScript mund te futet brenda çdo faqe të HTML, dhe ajo mund të

ekzekutohet nga të gjithë llojet e web browser-ve.

• Poashtu, JavaScript është e lehtë për të mësuar.

• Më poshtë paraqesim disa shembuj të thjesht se çka mund të bëhet me

JavaScript.

64

<html>

<body>

<p>JavaScript shembulli:</p>

<button

onclick=“funksioniIm()">Dergo

Kerkesen</button>

<script>

function funksioniIm()

{

alert("Mire se vini!");

}

</script>

</body>

</html>

65

<!DOCTYPE html>

<html>

<body>

<script>

function ndryshoImazhin()

{

element =

document.getElementById('imazhi');

if (element.src.match("poci_ndez"))

{

element.src = “poci_ndal.gif";

}

else

{

element.src = “poci_ndez.gif";

}

}

</script>

<img id="imazhi" onclick=" ndryshoImazhin()"

src=“poci_ndal.gif" width="100" height="180">

<p>Kliko brenda pocit elektrit per ta ndezur dhe per ta ndalur.</p>

</body>

</html>

66

• Në HTML, Javascript duhet të futet në mes të tagjeve <script> dhe

</script>.

• Javascript mund të vendoset në pjesën e <body> dhe në pjesën e <head> e

një HTML faqe.

• Për të futur JavaScript në një faqe, përdor tagjet <script>.

• Web browser duhet me pas të aktivizuar JavaScript, që zakonisht e kanë

vetvetiu të aktivizuar.

• <script> dhe </script> tregon se fillon dhe ku mbaron JavaScript.

• Rreshtat ndërmjet <script> dhe </script> përmbajë kod në JavaScript.

Shembull:

<script>

function funksioniIm()

{

document.getElementById("demo").innerHTML="Funksioni ime i pare ne JavaScript";

}

</script>

Ngjarjet ne JavaScript

• Më së shpeshti, kodi i JavaScript ekzekutohet kur ndodh një ngjarje, sikurse

kur përdoruesi klikon në një buton.

• Në qoftë se e kemi vendos kodin JavaScript brenda një funksion, ne mund

të thirrim atë ngjarje kur na nevoitet.

• Ju mund të vendos një numër të pakufizuar të scriptave në një HTML web

faqe.

• Skripta mund të jetë në seksionin e <body> ose në seksionin e <head>

brena faqes HTML, apo në të dyja.

67

JavaScript

<html>

<head>

<script>

function kordinatat(event)

{

var x=event.screenX;

var y=event.screenY;

alert("X=" + x + " dhe" + " Y=" + y);

}

</script>

</head>

<body>

<p onmousedown="kordinatat(event)">

Kliko ne kete paragraf, dhe do te njoftoheni me kordinatat X dhe Y te kursorit te ekranit

te juaj.

</p>

</body>

</html>

68

<html>

<head>

<script>

function color(color)

{

document.forms[0].myInput.style.background=color;

}

</script>

</head>

<body>

<form>Shkruaj nje mesazh te shkurt:<br>

<input

type="text"

onkeydown="color('yellow')"

onkeyup="color('white')"

name="myInput">

</form>

</body>

</html>

69

<html>

<head>

<script>

function

konfirmoInputin()

{

fname=document.forms[0].fname.value;

alert("Tungjatjeta " + fname + "! Tani do te ju drejtojme ne www.uiliria.org");

}

</script>

</head>

<body>

<form onsubmit="konfirmoInputin()" action="http://www.uiliria.org/">

Shkruaj emrin dhe mbiemrin tend: <input id="fname" type="text" size="30">

<input type="submit">

</form>

</body>

</html>

70

<html>

<head>

<script>

function abc(elmnt,clr)

{

elmnt.style.color=clr;

}

</script>

</head>

<body>

<p onmousedown="abc(this,'red')" onmouseup="abc(this,'green')">

Në Kolegjin ILIRIA u mbajt trajnimi: “User-Friendly and Responsive Web-Application”

nga Prof. Jaana Holvikivi nga Helsinki Metropolia University of Applied Sciences.

</p>

</body>

</html>

71

<html>

<head>

<script>

function funksioni()

{

document.getElementById("demo").innerHTML="Tungjatjeta bote!";

}

</script>

</head>

<body>

<p>Kliko butonin ne vijim.</p>

<button onclick="funksioni()">Me kliko!</button>

<p id="demo"></p>

</body>

</html>

72

JQuery

• Sot për të ndërtuar web faqe interesante dhe interaktive, shumë zhvillues

kanë filluar të përdorin librarin e JavaScript siç është jQuery për të

automatizuar dhe thjeshtuar funksionalitetin e web faqeve.

• Përmes jQuery librarisë ne mund të bëjmë:

- T’i qasemi elementeve në web faqe

- Modifikojmë paraqitjen e web faqes

- Të njoftojmë (alter) përmbajtjen e web faqes

- Të kthejmë përgjigje në kërkesat e shfrytëzuesve

- Të ndryshojmë animacionet në web faqe

- Të marrim informacione nga serveri pa e rifreskuar faqen aktuale

- Të thjeshtojmë detyrat e JavaScript

Downloadimi i jQuery

• Për të përdore jQuery, nuk nevojitet ndonjë instalim shtesë, pasi që

JavaScript është gjuhe interpretuese dhe nuk është e ndërlikuar për

përdorim.

• Vetëm se duhet download-ur librarinë për jQuery nga faqja zyrtare e jQuery

dhe libraria përbëhet brenda një skedari të vetëm të JavaScript-it,

p.sh. Verzioni: jquery-1.11.0.min.js.

<head>

<script src="jquery-1.11.0.min.js"></script>

</head>

• Apo nëse dëshironi të përdorni të gatshëm nga Google CND (Content

Delivery Network), përdore si në vijim brenda në head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

</script>

73

• Apo nga Microsoft, duke e futur skriptën brenda në head:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js">

</script>

JQuery sintaksa

• Sintaksa bazike përbehet: $(selector).action()

• Shenja $ shërben për definuar apo qasur jQuery

• (selector) shërben për jQuery apo për të gjetur HTML elementet

• jQuery action() shërben për të përformuar apo të ndërmarr aksion në HTML

elementet

• Shembuj:

$(this).hide() –fsheh elementin aktual (hides the current element)

$("p").hide() – fsheh të gjitha elementet <p> (hides all <p> elements)

$(".test").hide() – fsheh të gjitha elementet me (hides all elements with) class="test"

$("#test").hide() – fsheh të gjitha elementet me (hides the element with) id="test"

Përdorimi i funksionit $()

• Objektet e jQuery janë të lehta për të punuar me ato. Lehtë mund ti

përcaktojmë ndonjë ngjarje duke aplikuar funksionin $(). Tabela në vijim

paraqet disa nga komandat:

74

Tipi i

selektorit

CSS jQuery Përshkrimi

Tagu P { } $(‘p’) Selekton të gjitha paragrafet në

web faqe

ID #_Id-ja{ } $(‘#_Id-ja’) Selekton një element të vetem

që ka ID-në Id-ja në web faqe

Class .klasa{ } $(‘.klasa’) Selekton të gjitha elementet që

kanë klasën klase në web faqe

Ngjarjet në jQuery

Ngjarjet me mause Ngjarjet me tastaturë Ngjarjet e formave Ngjarjet e faqes

click Keypress submit load

dblclick Keydown change resize

mouseenter Keyup focus scroll

mouseleave blur unload

75

jQuery Selektorët

• Selektorët në jQuery lejojnë të selektoni dhe të manipuloni elementet e

HTML.

• Elementet e selektorit të jQuery selektojnë elementet të bazuara në emrin e

elementeve, p.sh.:

Selektimi i të gjitha elementeve të paragrafit <p> në web faqe: $(“p”)

• Shembull: kur klikojmë mbi tekst me mause, të gjitha elementet <p> të

fshehen:

<script>


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

$("p").hide();

});

});

</script>

76

jQuery – Shembuj

<html> <head>


</script> <script>


$("#flip").click(function(){

$("#panel").slideDown("slow");

});

});

</script>


#panel,#flip

{ padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid 1px #c3c3c3;

}

#panel

{ padding:50px;

display:none; }

</style> </head> <body>

<div id="flip">Kliko qe te paraqesim panelin</div>

<div id="panel">Tungjatjeta Bote!</div>

</body> </html>

77

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>



$("p").hide();

});

});

</script>

</head>

<body>

<h2>Nje tekst i thjesht.</h2>

<p>Nje tekst i thjesht brenda paragrafit.</p>

<p>Nje tjeter tekst i thjesht brenda paragrafit tjeter.</p>

<button>Me kliko</button>

</body>

</html>

78

<html>

<head>


</script>

<script>


$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

});

</script>

</head>

<body>

<p>Nese klikoni mbi butonin "Mshef", teksti duhet te mshefet dhe nese klikoni mbi

butonin "Paraqit", teksti duhet te paraqitet perseri.</p>

<button id="hide">Mshef tekstin</button>

<button id="show">Paraqit tekstin</button>

</body>

</html>

79

<html>

<head>


</script>

<script>



$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});

});

</script>

</head>

<body>

<button>Fillo animacionin</button>

<p>Duke klikuar mbi butonin "Fillo animacionin" ndryshoni pozicionin dhe madhesine e

kutise!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;">

</div> </body>

</html>

80

<html>

<head>


</script>

<script>

$(document).ready(function()

{


$("#p1").css("color","red").slideUp(2000).slideDown(2000);

});

});

</script>

</head>

<body>

<p id="p1">jQuery eshte terheqes!</p>

<button>Me kliko</button>

</body>

</html>

81

PHP ( Hypertext Preprocessor )

• PHP është akronim i Hypertext Preprocessor apo ndryshe PHP njihet si

“PHP Hypertext Preprocessor”.

• PHP është gjuhë skriptuese e cila përdoret për krijimin e Ueb faqeve, faqe

të cilat janë dinamike dhe interaktive.

- PHP është e lehtë për përdorim dhe kodi burimor i saj është i hapur,

- PHP skripta ekzekutohen në pjesën e serverit,

- PHP është pa pagesë, zhvillohet më tej dhe mirëmbahet nga komiteti i

PHP-së.

• Një PHP skedar ne vete përmban tekst të thjeshtë, HTML, CSS, JavaScript,

jQuery dhe/apo PHP kod burimor,

• Kodi burimor i PHP-së ekzekutohet në server dhe rezultati kthehet në

HTML në Web Browser,

• PHP skedari përmban ekstenzionin .php.

Vetit e PHP

• Me anë të PHP-së mund të kryejmë detyrat si në vijim:

- Gjenerimin e faqeve dinamike,

- Të krijoj, të lexojmë apo editojmë, të modifikojmë, të shkruajmë dhe të

mbyllim një skedar në server,

- Të grumbullojmë të dhëna apo shënime në një vend,

- Të pranojmë dhe dërgojmë në cookies

- Të shtojmë, të fshijmë, të modifikojmë të dhënat në bazën e të dhënave apo

DB,

- Të vendosim privilegjet për qasje të përdorueseve nëpër ueb aplikacione,

82

- Të enkriptojmë të dhënat dhe qasshmërinë në ato të dhëna, dhe

- Me anë të PHP-së mund të prodhojmë në dalje apo output tekst të thjeshtë,

- HTML, PDF, imazhe, flash movies, audio dhe video formate, etj.

• PHP është e pavarne në platforma dhe aplikohet në platforma të ndryshme

siç janë : Microsoft Windows, Linux, Unix, Mac OS X, etj.

• PHP është kompatibil me të gjithë serverët të cilët përdorin veglat Apache,

IIS, etj.

• PHP njihet si multiDB apo është në gjendje të punoj me shumë databaza.

• Skripta PHP mund të vendoset kudo në ueb faqe dhe fillon me komandën

<?php dhe të mbaron me ?>

Përdorimi i PHP dhe konfigurimi i XAMPP

• Që të kemi mundësi të përdorim PHP, ne duhet të përgatitim rrethinën

punuese duke e simuluar kompjuterin tonë lokal si server.

• Për këtë qëllim na nevojitet të instalojmë veglën XAMPP apo WAMPP, etj.

dhe varësisht prej platformës tonë duhet përgatitim kompjuterin tonë si

serveri për publikimin e skriptave PHP dhe të na mundësohet që t’i

paraqesim rezultatet në web browser.

• XAMPP mund të marrim nga ueb faqeja; https://www.apachefriends.org/

• XAMPP në vete përmban; Appache, MySQL, PHP dhe Perl.

• Pasi të instalojmë XAMPP, ku ajo zakonisht instalohet në rrethinën

C:\xampp apo kudo që ne ia caktojmë lokacionin.

• Ndërsa në C:\xampp\htdocs\ krijojmë direktoriumin “ushtrime” (apo emri i

projektit) dhe pastaj PHP skedarin me ekstenzionin .php.

https://www.apachefriends.org/

83

Konfigurimi i XAMPP

• Pasi të instalojmë XAMPP, ku ajo zakonisht instalohet në rrethinën

C:\xampp apo kudo që ne ia caktojmë lokacionin e aktivizojmë WEB

Serverin Apache dhe bazën e të dhënave MySQL, si në vijim:

• Ndërsa në C:\xampp\htdocs\ krijojmë direktoriumin “ushtrime” (apo emri i

projektit) dhe pastaj PHP skedarin me ekstenzionin .php.

Testimi i PHP përmes XAMPP

• Në vijim paraqesim skriptën në PHP, shembullin e parë për të testuar

XAMPP me PHP. Shembulli përdor funksionin echo dhe e cila afishon

(printon tekstin) “Tungjatjeta Bote!” në ueb faqe, si në vijim:

<html>

84

<body>

<?php

echo “Urime, keni instaluar me sukses XAMPP!”;

?>

</body>

</html>

Këtë shembull e ruani me emrin phptest.php në lokacionin:

C:\xampp\htdocs\ushtrime\phptest.php

Ndërsa, në web browser shkruani URL: http://localhost/ushtrime/phptest.php

Komentet në PHP

• Si zakonisht komentet, edhe në PHP kodin burimor janë rreshta të cilat nuk

ekzekutohen si pjesë e programit.

• Siç e dimë komentet shënohen për të përshkruar funksionalitet e kodit dhe

për të sqaruar kodin në raste të ripërdorimit në të ardhmen për neve apo nga

programer të tjerë.

• Gjithashtu, komentet mund të përdoren nga programerët e tjerë në raste kur

punohet në projektet grupore.

• PHP ofron tre mënyra për komentimin e kodit si në vijim:

<?php

// Komenti vlen për një rresht të vetëm.

# Komenti vlen për një rresht të vetëm.

/*

Komenti vlen për një apo më shumë rreshta.

Komente...

85

*/

?>

Ndjeshmëria e shkronjave (case sensitive) dhe PHP

• Funksionet në PHP nuk janë të ndjeshme në shkronja (të mëdha apo të

vogla) dhe janë të definuar sikurse; klasat, fjalët kyçe (if, else, for, while,

echo, print, etj.).

• Në vijim paraqesim shembuj të përdorimit të funksionit echo:

<?php

ECHO “Tungjatjeta Bote!<br>”; - Përdorim i drejtë

echo “Tungjatjeta Bote!<br>”; - Përdorim i drejtë

EcHo “Tungjatjeta Bote!<br>”; - Përdorim i drejtë

?>

• Mirëpo variablat në PHP janë të ndjeshme në shkronja dhe duhet të kemi

kujdes.

• Në vijim paraqesim shembullin i cili përshkruan deklarimin dhe përdorimin

e drejt dhe të gabuar të variablave.

<?php

$var_emri="Tung bote!";

echo $var_emri; - Përdorim i drejtë

echo $VAR_EMRI; - Përdorim i gabuar

echo $var_EMRI; - Përdorim i gabuar

?>

86

Variablat në PHP

• PHP variablat janë kontanier apo vend për ruajtjen e informative, p.sh. për

ruajtjen e numrave 2 dhe 3, deklarojmë variablat x dhe y, kurse mbledhjen e

ruajmë në variablën z.

<?php

$x=2; - Deklarimi i variablës x dhe ruajtja e saj me vlerën 5 të tipit int

$y=3;

$z=$x + $y; - Mbledhja e variablave të tipit int

echo $z; - Afishimi i shumës

?>

• Sikurse në algjebër, PHP variblat mund të përdorën për ruajtjen e vlerave

p.sh. (x=2) ose shprehjeve (z=x+y).

• PHP variablat mund të emërohet sipas nevojës, pra varësisht nga vlera që

do të ruhet në ato. P.sh. variablat x, emri, mosha, etj. duhet të plotësojnë

rregullat:

- Të filloj me $, duke pasuar me emrin e variablës,

- Emri duhet të filloj me shkronja ose me _, ajo nuk mund të filloj me numër,

- Emri i variablës mund të ketë përmbaj shkronjat A-z, Numrat 0-9, dhe

shenjën _

- Emri i variablës është case sensitive $emri $Emri – pra nuk janë të njëjta.

• Në deklarimin fillestar PHP variablat nuk kanë tip të të dhënave, por ato

marrin tipin e të dhënave varësisht nga vlera e parë që ju epet. Variablat

mund të deklarohen në çdo hapësirë në skript. PHP ka tre tipe (lloje) të

variablave që mund të përdoren: lokale, global, statike.

<?php

87

$mesazhi=” Tungjatjeta Bote!”;# - tipi string

$x=5;# - tipi int

$y=10.5;# - tipi double

?>

Variablat lokale dhe globale në PHP

• Një variabël e deklaruar jashtë

funksionit në një PHP skedar ka

qasje globale dhe mund të

përdoret jashtë funksionit.

• Variabla e deklaruar brenda

funksionit ka qasje lokale dhe

mund te përdoret vetëm

përbrenda funksionit.

• Shembulli në anën e djathtë

paraqet përdorimin e tyre në

skedarin PHP.

<?php

$x=5; // variabel globale

function myTest() {

$y=10; // variabel lokale

echo "<br>Testimi i variables per brenda

funksionit:</br>";

echo "Variabla x eshte: $x";

echo "<br>";

echo "Variabla y eshte: $y";

}

myTest();

echo "<p>Testimi i variables jasht

funksionit:</p>";

echo "Variabla x eshte: $x";


?>

• Nga shembull vërejmë që variabla $x është deklaruar jashtë funksionit,

kurse variabla $y brenda funksionit.

• Në rastin e ekzekutimit të skriptës marrim rezultatin si në vijim:

88

• Nga shembulli vërejmë se në rastin e përdorimit të variabilës globale $x

brenda funksionit nuk na shfaqet asnjë vlerë dhe e kundërta në rastin e

përdorimit të variabiles $y jashtë funksionit nuk na shfaqet asnjë vlerë.

• Shënim: Nëse dëshirojmë ta përdorim variabilen globale në funksion, duhet

para saj të vendosim global. Gjithashtu, në funksione të ndryshme mund të

kemi variabla të deklaruara me emër të njëjtë, sepse ato ekzistojnë vetëm

brenda funksionit.

• PHP gjithashtu, ruan edhe variabla globale në vargje (array) $GLOBAL[x],

ku x është emri i variablës. Në shembullin në vijim paraqesim përdorimin e

variabiles globale për vargje.

<?php

$x=5;

$y=10;

function Ushtrimi()

{

$GLOBALS['y']=$GLOBALS['x']+$GLOBALS['y'];

89

}

Ushtrimi();

echo $y; // dalja duhet të jetë 15

?>

Variablat statike në PHP

• Tek variablat statike pasi që

të ekzekutohet funksioni, të

gjitha variablat fshihen. Në

disa raste neve na duhet që

variabla lokale ta ruaj vlerën

për përdorim të mëtutjeshëm.

• Për këtë qëllim, përdorim

variabël statike.

• Shembulli në anën e djathtë

shtjellon përdorimin e

variabilës lokale dhe asaj

statike lokale dhe rezultatit

që fitojmë pas ekzekutimit.

<p>Ushtrim: Variablat statike</p>

<?php

function Ushtrimi()

{

$x=0;

echo "Vlera e x eshte (variabel lokale):

$x ";

$x++;

static $y=0;

echo "Vlera e y eshte (variabel statike):

$y ";

$y++;

}

Ushtrimi();

echo "<br>";

Ushtrimi();

echo "<br>";

Ushtrimi(); ?>

90

• Nga shembulli vërejmë që variabla $x është lokale, por jo statike.

Ndërsa, $y është statike.

• Në rastin e ekzekutimit të skriptës marrim rezultatin si në vijim:

PHP echo dhe print

• Në PHP ka dy mënyra për të shfaqur shënimet, me anë të echo dhe print.

• Dallime në mes të echo dhe print:

- echo – mund të shtyp një ose më shumë stringje

- print – mund të shtyp vetëm një string

• echo – është për printimin e shënimeve dhe përdoret si echo

apo echo().

• print – gjithashtu, është komandë për printimin e shënimeve dhe

përdoret si print apo print().

Në vijim paraqesim shtypjen e disa stringjeve dhe variablave me anën e komandave echo

dhe print .

<p>Ushtrim: echo dhe print</p>

<?php

91

$txt="ne Uni ILIRIA";

$auto=array("Audi","BMW","Mercedes");

echo "Echo: Jemi duke mesuar PHP $txt<br>";

echo "Echo: Nje string", " qe ", " permban shume parametra!<br/>";

echo "Echo: Vetura ime e pare eshte {$auto[0]}";

print "<p></p>";

print "Print: Jemi duke mesuar PHP $txt<br>";

print "Print: Nje fjali e thjesht, string!<br/>";

print "Print: Vetura ime e pare eshte {$auto[0]}";

?>

PHP kodi afishon:

92

Tipet e të dhënave (data types) në PHP

PHP string

• Në PHP ekzistojnë disa tipe të të dhënave: string, integer, float, boolean,

array, object, resources dhe NULL.

• PHP string është grumbuj i karaktereve si “Tungjatjeta Bote!”.

• Një string mund të ketë çfarëdo teksti brenda thonjëzave të dyfishta apo të

njëfishta “ ” ose ‘ ’.

<p>Ushtrim: Stringjet</p>

<?php

$variabla = "Tungjatjeta Bote! Nje string";

echo $variabla;

?>

PHP integer

• PHP integer përmbajn numëra të plotë. Rregullat për integjer: Duhet të ketë

vetëm një numër (0-9), nuk pranon hapësirë apo shkronja, nuk ka presje

dhjetore, mund të jetë negative dhe pozitiv. Poashtu, mund të deklarohet në

tre forma decimal(10), hexadecimal (16) ose octal (8).

• Funksioni var_dump – kthen tipin e të dhënës dhe vlerën e variablës.

93

<p>Ushtrim: Numrat integjer, int</p>

<?php

$x = 5985; // pozitive number

$y = -345; // negative number

$z= 0x8C; // hexadecimal number

$k = 047; // octal number

var_dump($x);

echo "Variabla c eshte: $x";

echo "<br>";

var_dump($y);


echo "<br>";

var_dump($z);

echo "Variabla z eshte: $z";

echo "<br>";

var_dump($k);

echo "Variabla k eshte: $k";

echo "<br>";

?>

• PHP kodi afishon:

94

PHP float

PHP float përmban numër decimal.

<p>Ushtrim: Numrat float</p>

<?php

$x = 10.365;

var_dump($x);

echo "<br>";

$x = 2.4e3;

var_dump($x);

echo "<br>";

$x = 8E-5;

var_dump($x);

?>

PHP Boolean dhe array

PHP boolean përmban vetëm true apo false.

boolean shpesh përdorën në kushte të testimit.

$x=true;

$y=false;

PHP array apo vargjet, ku një varg ruan shumë vlera në një variabël.

<p>Ushtrim: array apo vargjet</p>

<?php

$pc=array("Dell","HP","Asus");

var_dump($pc); ?>

95

PHP objektet

• PHP Objektet, ku një objekt është një tip i të dhënave (data type) e cila

ruan shënime dhe informata se si përpunohen këto shënime.

• Tipet (apo llojet) e tjera të të dhënave nuk duhet të deklarohen, por tipi i

tyre merret nga vlera në mënyrë auktomatike, ndërsa një objekt

paraprakisht patjetër duhet të deklarohet.

• Për të deklaruar një objekt së pari duhet të deklarojmë një klasë për

objektin.

• Klasa është një strukturë që mund të ketë veti dhe metoda.

• Pastaj e definojmë tipin e të dhënave në klasën e objektit dhe përdoret tipi i

të dhënave në instancë të asaj klase.

• <p>Ushtrim: data type object</p>

• <?php

• class Pc

• {

• var $hd;

• function Pc($hd="500GB")

• {

• $this->hd = $hd;

• }

• function gethd()

• {

• return $this->hd;

• }

• }

96

• // inicializimi i objektit

• $pc = new Pc("300GB");

• echo "Madhesia e diskut eshte: ", $pc->gethd(); // thirrja e metodës “gethd”

• ?>

PHP NULL

• PHP vlera NULL, tregon që variabla nuk ka vlerë.

• NULL është vlera e vetme e tipit të të dhënave.

<p>Ushtrim: Vlera NULL</p>

<?php

$x="Tungajtjeta bote!";

echo "Printo $x <p></p>";

$x=null;

echo "Vlera e variables x eshte: ";

var_dump($x);

?>

PHP string funksionet

• Disa funksione më të shpeshta që përdoren për të manipuluar me string.

• PHP strlen() funktioni kthen gjatësinë e stringut në karaktere.

<?php

echo strlen(“Tungjatjeta bote!”);//kthen 17

?>

97

• PHP strpos() funksioni përdoret për të kërkuar një karakter ose një tekst në

një string.

<?php

echo strpos(“ Tungjatjeta botë!”,”botë”); //kthen 17

?>

• PHP substr() funksioni kthen një pjesë të strigut.

<?php

echo substr(“Tungjatjeta bote!”,6,17);

\\ kthen tjeta bote!

?>

<p>Ushtrim: String funksionet</p>

<?php

echo "Tungjatjeta bote ka : ", strlen("Tungjatjeta bote!")," karaktera";

echo"<br/>";

echo "Deri te bote ka: ", strpos("Tungjatjeta bote!","bote")," karaktere";

echo"<br/>";

echo "Merre stringun nga t: deri ne fund - ", substr("Tungjatjeta bote!",6,17);

?>

98

PHP constant

PHP constant është një variabël për një vlerë të vetme.

Vlera e variablës është e pa ndryshueshme. Konstanta fillon me shkronjë ose _ .

Në mënyrë automatike konstantat janë globale.

<p>Ushtrim: PHP constant</p>

<?php

// definimi i case sensitive konstantës (true/false)

define("p", "Mire se vini ne ILIRIA!",true);

echo p;

?>

PHP operatorët aritmetik

• Lista e operatorëve aritmetikë është sikurse në tabelën më poshtë:

Operatori Emri Shembulli Rezultati

+ Mbledhja $x + $y Shuma e $x dhe $y

- Zbritja $x - $y Diferenca e $x dhe $y

* Shumëzimi $x * $y Prodhimi i $x dhe $y

/ Pjestimi $x / $y Pjesëtimi i $x dhe $y

% Mbetja $x % $y Mbetja e $x pjesëtuar me $y

99

• Shembulli në vijim paraqet përdorimin e operatorëve aritmetik:

<p>Ushtrime me operator</p>

<?php

$x=10;

$y=6;

echo ($x + $y),"<br>"; // rezultati 16

echo ($x - $y),"<br>"; // rezultati 4

echo ($x * $y),"<br>"; // rezultati 60

echo ($x / $y),"<br>"; // rezultati 1.6666666666667

echo ($x % $y); // rezultati 4

?>

PHP operatorët për ndarjen e vlerës

• Operatori për ndarje të vlerës përdorët duke vendosur vlerën e variablës së

caktuar.

• Operatori bazik i ndarjes së vlerës në PHP është "=". Nënkupton se

operandi i majtë merr vlerën e ndarë nga shprehja në të djathtë.

• Në vijim po paraqesim listën e përdorimit të operatorit të ndarjes së vlerës:

Ndarja e vlerës Njëjt si... Përshkrimi

x = y x = y Operandi i majtë merr vlerën e anës së djathtë

x += y x = x + y Mbledhja

x -= y x = x - y Zbritja

100

x *= y x = x * y Prodhimi

x /= y x = x / y Pjesëtimi

x %= y x = x % y Mbetja

• Shembuj në vijim shtjellojnë përdorimin e operatorit të ndarjes së vlerës:

<?php

$x=10;

echo $x."<br>"; // rezultati 10

$y=20;

$y += 100;

echo $y."<br>"; // rezultati 120

$z=50;

$z -= 25;

echo $z."<br>"; // rezultati 25

$i=5;

$i *= 6;

echo $i."<br>"; // rezultati 30

$j=10;

$j /= 5;

echo $j."<br>"; // rezultati 2

$k=15;

$k %= 4;

echo $k."<br>"; // rezultati 3

?>

string në PHP

• Stringjet percaktohen brenda thonjëzave të dyfishta apo njëfishtë p.sh.

“Tungjatjeta bote” apo ‘Tungjatjeta bote’, siç e kemi përmend disa herë më

herët.

• Tipi i të dhënave me të cilin ruhen stringjet është string, grup karakteresh:

p.sh. $fjalia = "Tungjatjeta bote";

• Për bashkimin e dy stringjeve përdoret operatori “.”

101

• Tabela në vijim paraqet përdorimin e operatorëve për stringje:

Operatori Emri

. Lidhje (linking)

.= Cakton një lidhjes

Operatorët e rritjes dhe zvogëlimit në PHP

Operatori Emri Përshkrimi

++$x Para -rritja E rrit $x për një pastaj e kthen $x

$x++ Pas -rritja E kthen $x, pastaj e rrit $x për një

--$x Para-zvogëlimi Zvogëlon $x për një, pastaj kthen $x

$x-- Pas-zvogëlimi E kthen $x, pastaj e zvogëlon për një $x

• Afishimi i detyrës në vijim.

102

<p>Operatoret e rritjes dhe zvogelimit</p>

<?php

$x=10;

echo "Perdorimi i operatorit ++ para variables -> rezultati: ". ++$x ."<br>"; // rezultati 11

$y=10;

echo "Perdorimi i operatorit ++ pas variables -> rezultati: ". $y++ ."<br>"; // rezultati 10

$z=5;

echo "Perdorimi i operatorit -- para variables -> rezultati: ". --$z ."<br>"; // rezultati 4

$i=5;

echo "Perdorimi i operatorit -- pas variables -> rezultati: ".$i--; // rezultati 5

?>

PHP operatorët e krahasimit

• PHP operatorët e krahasimit përdoren për krahasimin e dy vlerave si

numrave, stringjeve, etj. Rezultati i operatorëve është boolen (ture apo

false). Në vijim po paraqesim operatorët e krahasimit:

Operatori Emri Rezultati

== barabart me Kthen true nëse dy operand janë të barabart.

=== Identik Kthen true nëse dy operand janë të barabart dhe

janë të tipit (dt) të njëjtë.

!= <> jo baras me Kthen true nëse operand janë të ndryshëm.

!== Jo identik Kthen true nëse dy operand nuk janë të barabart ose

nuk janë të tipit (dt) të njejtë.

> më i madh Kthen true nëse operandi në anën e majtë është më i

madhe se operandi në anën e djathtë.

< më i vogël Kthen true nëse operandi në anën e majte është më i vogël

103

se operandi në anën e djathtë.

>= më i madh ose

baras

Kthen true nëse operandi në anën e majtë është më i

madhe ose i barabart me operandin në anën e djathtë.

<= më i vogël ose

baras

Kthen true nëse operandi në anën e majtë është

më i vogël ose i barabart me operandin në anën e djathtë.

• Shembuj në vijim shtjellojnë përdorimin e operatorëve të krahasimit:

<?php

$x=100;

$y="100";

var_dump($x == $y);

echo "<br>";

var_dump($x === $y);

echo "<br>";

var_dump($x != $y);

echo "<br>";

var_dump($x !== $y);

echo "<br>";

$a=50;

$b=90;

var_dump($a > $b);

echo "<br>";

var_dump($a < $b);

?>

104

PHP operatorët logjik

• Operatori logjike (operatori boolean) paraqesin operatorin që kthen rezultat

boolean, e që bazohet në vlerën e një apo dy operandëve tjerë. Tabela e

operatorëve logjik është dhënë në vijim.

Operatori Emri Përshkrimi

and dhe (and) Kthen true nëse dy operand janë true

(shiko tabelën DHE). Operandët vlerësohe

para se operatori të aplikohet.

or ose Kthen true nëse se paku njëri nga operandët është true.

Operandët vlerësohen para se operatori të aplikohet.

xor x ose Kthen true atëherë dhe vetëm atëherë kur njëri nga operandët

është true. Kthen false nëse dy operandët janë true,

apo false (shiko tabelën OSE ekskluzive).

&& dhe Ngjashëm sikur ‘Dhe’ mirëpo nëse ana e majtë vlerësohet

si false atëherë kthehet false pa vlerësuar operandin në anën e djathtë.

|| ose Ngjashëm sikur ‘Ose’ mirëpo nëse ana e majtë vlerësohet si

true atëherë kthehet true pa vlerësuar operandin në anën e djathtë.

! jo Kthen true nëse operandi në anën e djathtë është false.

Kthen false nëse operandi në anën e djathtë është true.

Operandët vlerësohen para se operatori të aplikohet.

PHP operatorët logjik

• Përkujtoni tabelat e saktësisë nga algjebra e Bool-it, ku T=true dhe F=falsep

105

q p p ∧ q

T T T

T F F

F T F

F F F

p q p ∨ q

T T T

T F T

F T T

F F F

p q p q

F F F

F T T

T F T

T T F

p ¬p

T F

F T

PHP operatorët e vargjeve (array)

• Në PHP operatorët e vargjeve përdorën për të krahasuar vargjet, në vijim po

japim listën e operatorëve të vargjëve:

Operatori Emri Shembulli Rezultati

+ bashkimi

(union)

$x + $y Bashkimi i $x dhe $y (por çelësat e

dyfishtë nuk mbishkruhen)

== baras me $x == $y Është True nëse $x dhe $y kanë çelës të

njëjtë /vlerë çifte

=== identik $x === $y Është True nëse $x dhe $y kanë çelës të

njëjtë /vlerë çifte në renditje të njëjtë dhe tip të njëjtë

!= jo baras me $x != $y Është True nëse $x është jo barabart me $y

106

<> jo baras me $x <> $y Është True nëse $x është jo barabart me $y

!== jo identik $x !== $y Është True nëse $x është identik me $y

• Shembuj në vijim shtjellojnë përdorimin e operatorëve të vargjeve:

<p>Ushtrim: Operatoret e vargjeve</p>

<?php

$x = array("a" => "kuqe", "b" => "gjelbert");

$y = array("c" => "kalter", "d" => "verdhe");

$z = $x + $y; // bashkimi i $x dhe $y

var_dump($z); echo "<br>";

var_dump($x == $y); echo "<br>";

var_dump($x === $y); echo "<br>";

var_dump($x != $y); echo "<br>";

var_dump($x <> $y); echo "<br>";

var_dump($x !== $y);

?>

• Rezultati:

107

PHP deklarimi i kushtëzuar

• Deklarimi i kushtëzuar është përdorur për të kryer veprime të ndryshme

bazuar në kushte të ndryshme.

• Shpesh kur jemi duke shënuar PHP kod na duhet të përdorim veprime të

ndryshme për vendime të ndryshme. Për këtë na duhet të përdorim

deklaratat e kushtëzuara.

• Në PHP kemi këtë deklarata kushtëzuese:

if - ekzekuton kodin vetëm nëse kushti i caktuar është true

if...else - ekzekuton kodi nëse kushti është është true dhe në të kundërtën

ekzekutohet kodi tjetër(pra kur është false)

if...elseif....else – zgjedh një nga blloqet e të cilat janë të sakta dhe

ekzekuton kodin, nëse nuk ka të saktë ekzekuton kodin në fund

switch – zgjedh një nga shumë blloqet për të ekzekutuar kodin

PHP kushti IF

• Kushti if përdorët kur dëshirojmë të ekzekutojmë ndonjë pjesë të kodit që

vetëm nëse kushti i caktuar është i saktë.

Sintaksa:

if (condition)

{

kodi për tu ekzekutuar nëse kushti është true;

}

<p>Ushtrim: kushtit IF</p>

<?php

$viti=date("Y");//kthen vitin aktual

108

if ($viti<"2014")

{

echo " Tani është viti : " . $viti;

}

?>

PHP kushti IF…ELSE

• Kushti if....else përdorët për të ekzekutuar ndonjë kodë nëse një kushte

është true dhe tjetri kushte është false

• Sintaksa

if (condition)

{ kodi për tu ekzekutuar nëse kushti është true; }

else

{ kodi për tu ekzekutuar nëse kushti është false; }

<p>Ushtrim: kushti IF ... ELSE</p>

<?php

$t=date("H");//kthen orën aktuale

if ($t<"20")

{ echo "Ditë të mirë!"; }

else

{ echo "Natë të mirë!"; }

?>

109

PHP kushti IF…ELSEIF…ELSE

• Kushti if....elseif...else përdorët për të ekzekutuar një nga blloqet e kodit.

• Sintaksa

if (condition)

{


}

elseif (condition)

{


}

else

{

kodi për tu ekzekutuar nëse kushti është false;

}

• Shembulli:

<p>Ushtrime të kushtit IF ... ELSEIF ... ELSE</p>

<?php

$t=date("H");//kthen orën aktuale

if ($t<"10")

{

echo "Kaloni mengjes te mire!";

}

110

elseif($t<"18")

{

echo "Kaloni dite te mire!";

}

else

{

echo "Kaloni nate te mire!";

}

?>

Hyrje ne MySQL - Baza e të dhënave

• Një bazë e shënimeve është një koleksion i shënimeve të organizuara në një

mënyrë të veçantë. Baza e shënimeve mund të jetë në disa lloje: Flat File

Databases, Relational Databases, Distributed Databases etc.

• SQL (Structured Query Language) është gjuha e standardizuar që përdorur

për të gjitha bazat e të dhënave.

• Me anë të SQL ju mundëson qasjen dhe manipulimin me bata e shënimeve,

është një ANSI (American National Standards Institute) standard.

• Me SQL ju mund të bëni:

- të ekzekutoj pyetësor në DB

111

- të merr shënime nga DB

- të fus shënime në DB

- të modifikoj shënime në DB

- të fshij shënime në DB

- të krijoj një DB

- të krijoj një tabel në DB

- të krijoj një procedurë (stored procedures) në DB

- të krijoj një pamje(views) në një DB

- të caktoj qasjen në db,tabel,procedur,pamje,etj

• RDMS (Relational Database Management System) është baza e të dhënave

për SQL dhe bazës së të dhënave për të gjitha sistemet moderne si MS SQL

Server, DB2 IBM, Oracle, MySQL, dhe Microsoft Access, etj. Të dhënat në

RDBMS janë të ruajtur në objektet e bazës së të dhënave të quajtur tabelë.

• Një tabelë është një përmbledhje e shënimeve të caktuar, kjo përbëhet prej

kolonave dhe rreshtave.

• MySQL and SQL Server, etj. janë sisteme për menaxhimin e bazës së

shënimeve (të dhënave). Këto sisteme përdorën për të menaxhuar sa më

mirë të dhënat në një bazë të shenimeve.

• Baza e të dhënave përmban: Tabela, Kolona dhe llojet e shënimeve.

• Për të krijuar një baza të të dhënave, duhet të kemi kërkesat për llojin e

informatave që duhet të ruhen.

• Të supozojmë se na duhet të krijojmë një bazë të të dhënave për

menaxhimin e studentëve dhe lëndët e tyre.

• Tabelat mundësojnë ruajtjen e shënimeve për një entitet të caktuar si p.sh

Studenti. Ato janë të organizuara në kolona dhe rreshte. Poashtu çdo tabelë

duhet pasur emër.

112

• Sintaksa për krijimin e një tabele:

emri_tabeles(

emri_kolones1 tipi_dhenave(madhesia),



);

• Në tipin e të dhënave definojmë llojin e të dhënave që duhet të ruhet nëkëtë

kolonë apo fushë, i cili mund të jetë varchar, integer, decimal, date, etj.

• Ndërsa, në madhësia e definojmë madhësin e fushës për karaktere.

Relacionet

• Relacionet shërbejnë për lidhjen e të dhënave që ndodhën në një tabelë me

të dhënat e një tabele tjetër.

• Kjo lidhje realizohet përmes kolonave lidhëse që zakonisht janë me emër të

njëjtë dhe me tip të njëjtë.

• Janë tre lloje të lidhjeve mes tabelave:

- Lidhja relacionale një-me-një (One-to-One Relationship)

- Lidhja relacionale një-me-shumë (One-to-Many Relationship)

- Lidhja relacionale shumë-me-shumë (Many-to-Many Relationship)

Lidhja një-me-një (One-to-One relationship)

• Është lidhje që përdoret shumë rrallë. Kjo lloj lidhje përdoret për të ruajtur

detaje e një tabele në një tabele tjetër. Gjithashtu, raste të përdorimit gjejmë,

113

kur tabela ka shumë kolona dhe disa nga ato kolona nuk plotësohen. Pra,

për këtë qëllim bëjmë ndarjen nga një tabelë në dy.

AntariID Emri Adresa

1000 Filan Fisteku Prishtinë

1001 Filan Fisteku2 Prizren

1002 Filan Fisteku3 Gjilan

• Këtë mund ta ndajmë në dy tabela ku në njërën tabelë regjistrohen të gjitha

adresat në Kosovë dhe në tjetrën Anëtarët. Këtë mund ta ndajmë në dy

tabela, ku në njërën tabelë regjistrohen të gjitha adresat në Kosovës dhe në

tjetrën Anëtarët

AntariID Emri AdresaID AdresaID Adresa

1000 Filan Fisteku 1 1 Prishtinë

1001 Filan Fisteku2 2 2 Prizren

1002 Filan Fisteku3 3 3 Gjilan

114

Lidhja një-me-shumë (One-to-Many relationship)

• Është lidhja që më së shpeshti gjen përdorim në një bazë të shënimeve.

Shembull në vijim paraqet lidhjen relacionale të Anëtarit dhe Aktiviteteve,

ato mund të qëndrojnë në një tabelë, por për arsye se Anëtari regjistrohet

vetëm një herë me informata personale dhe mund të kryej një ose më shumë

aktivitete, atëherë mund të kemi përsëritje apo redudancë të shënimeve. Për

këtë arsye na duhet të i ndajmë në dy tabela dhe në njërën të shënojmë

informatat e anëtarëve dhe në tjetrën të shënojmë aktivitetet.

AntariID Emri Aktiviteti

1000 Filan Fisteku Krijimin e funksioneve për raportim

1001 Filan Fisteku2 Trajnimi i praktikantëve

1002 Filan Fisteku3 Modeloimin e bazën së të dhënave

1002 Filan Fisteku3 Komunikimin e funksione

1000 Filan Fisteku Krijimin e DB për projektin

AntariID Emri

1000 Filan Fisteku

1001 Filan Fisteku2

1002 Filan Fisteku3

AktivitetiID AntariID Përshkrimi

1 1000 Krijimin e funksioneve për raportim

2 1000 Trajnimi i praktikantëve

115

3 1001 Modeloimin e bazën së të dhënave

4 1002 Komunikimin e funksione

5 1002 Krijimin e DB për projektin

Lidhja shumë-me-shumë (Many-to-Many relationship)

• Kjo lloj lidhje relacionale shumë-me-shumë në dy tabela realizohet me tabelën e

tret ndihmës. Në bazën e të dhënave ekziston lidhja relacionale e tabelës Anëtaret

me Projektet. Një ose më shumë anëtarë kanë aktivitet në një apo më shumë

projekte. Për këtë qëllim është shtuar tabela ndihëse Aktivitetet dhe është lidhur

me tabelat Anëtaret dhe Projektet, si në fig. më posht.

Normalizimi

• Për të ndërtuar një ueb site që paraqet të dhënat nga një DB (bazë të dhënash),

nevojitet:

116

- Një RDBMS aplikacion për bazë të dhënash, sikurse Microsoft Access, SQL

Server, MySQL,

- Të përdorni një gjuhë programuese për anën e serverit, siç është PHP apo ASP,

- Të përdorni SQL për të marrë të dhënat nga baza e të dhënave dhe me i

paraqit ne UEB site, dhe

- Të përdorni gjuhën markup (grumbuj tagjesh) HTML / CSS.

• Normalizimi është proces i pastrimit të të dhënave në një DB (databazë), sikurse:

- Elimininon redudancën apo përsëritjen e të dhënave në DB,

- Organizon strukturë të mirëfilltë të të dhënave në DB,

- Rregullon të të dhënat, ashtu që pastron të dhënat të parregullta,

- Ndihmon në sigurimin e informatave të cilat humbin, dhe

- Siguron integritetin e të dhënave.

SQL sintaksa

• SQL nuk është case-sensitive, d.m.th. sintaksa mund të shënohet me shkronja të

mëdha apo me të vogla.

• Disa nga SQL sintaksat më të rëndësishme:

- SELECT - ekstrakton apo nxjerr të dhënat nga baza e të dhënave

- UPDATE - azhurnon apo freskon të dhënat në bazë të dhënave

- DELETE - fshinë të dhënat nga baza e të dhënave

- INSERT INTO - futë apo inserton të dhëna të reja në bazën e të dhënave

- CREATE DATABASE - krijon bazë të re të të dhënave

- ALTER DATABASE - ndryshon apo modifikon bazën e të dhënave

- CREATE TABLE - krijon tabele të re

117

- ALTER TABLE - ndryshon apo modifikon tabele te re

- DROP TABLE - fshinë tabelën

- CREATE INDEX - krijon indeks (për kërkim kyç)

- DROP INDEX - fshinë indeksin

Tabela Studentet:

StudentID EmriMbiemri Qyteti Telefoni Emaili Shteti

1 Labinot Hasani Prishtine 044111111 [email protected] Kosove

2 Filan Nje Peje 044223344 [email protected] Kosove

3 Filan Dy Tirane 044445566 [email protected] Shqiperi

4 Filan Tre Shkup 044667788 [email protected] Maqedoni

SELECT sintaksa

Forma e përgjithshme:

SELECT emri_kolones

FROM emri_tabeles;

apo

SELECT * FROM emri_tabeles;

SQL shprehja në vijim zgjedh kolonat “EmriMbiemri” dhe “Qyteti” nga tabela

“Studentet”:

SELECT EmriMbiemri,Qyteti FROM Studentet;

SQL shprehja selekton apo zgjedhë të gjitha kolonat nga tabela “Studentet”:

SELECT * FROM Studentet;





118

SELECT DISTINCT sintaksa

Në një tabelë, një kolonë mund të përmbajë shumë vlera të duplikuara dhe ndonjëherë

neve na nevojiten vetëm rreshtat e kolonës me vlera të ndryshme.

Shprehja DISTINCT mund të përdoret vetëm për me i kthyer rreshtat me vlera të

ndryshme për të njëjtën kolonë.


SELECT DISTINCT emri_kolones,emri_kolones

FROM emri_tabeles;

SQL shprehja zgjedh vetëm vlerat e ndryshme nga kolona "Qyteti" në tabelën Studentet:

SELECT DISTINCT Qyteti FROM Studentet;

Kushti WHERE

• Kushti WHERE përdoret për nxjerrjen e shënimeve të cilat plotësojnë këtë kusht.

• Forma e përgjithshme:

SELECT emri_kolones,emri_kolones

FROM emri_tabeles;

WHERE emri_kolones vlera e operatorit;

• SQL shprehja në vazhdim zgjedhë të gjitha qytetet e Prishtinës nga kolona

Prishtina në tabelën Studentët, si në vijim:

SELECT * FROM Studentet

WHERE Qyteti=‘Prishtina’;

• Apo në bazë të StudentID, të cilët kanë ID-në = 1:


WHERE StudentID=1;

Për kushtin WHERE mund të përdoren të gjithë operatorët në vijim:

119

Operatori Përshkrimi

= Barazi

<>

Jo e barabartë,

Shënim: Ne disa versione te SQL, ky operator mund te

shënohet edhe si !=

> Më e madhe sesa

< Më e vogël sesa

>= Më e madhe sesa apo barazi me

<= Më e vogël sesa apo barazi me

BETWEEN Ndërmjet

LIKE Kërko sikurse

IN Specifikon te gjitha vlerat e mundshme për atë kolone

Operatoret AND dhe OR

• Operatori AND paraqet rreshtat nëse të dy kushtet, kushti i parë DHE kushti i dytë

janë të saktë.

• Operatori OSE paraqet rreshtat nëse njëri nga të dy kushtet, kushti i parë OSE

kushti i dytë janë të saktë.

• Operatori AND zgjedh të gjithë studentët nga Shteti “Kosove” dhe Qyteti

“Prishtina” nga tabela “Studentet”, si në vijim:

120


WHERE Shteti=‘Kosove’

AND Qyteti=‘Prishtina’;

Operatori OR zgjedh të gjithë studentët nga Qyteti “Prishtina” ose Qyteti “Tirana” :


WHERE Qyteti=‘Prishtina’

OR Qyteti=‘Tirana’;

Kombinimi i operatorëve AND dhe OR:


WHERE Shteti=‘Kosove'

AND (Qyteti=‘Prishtina' OR Qyteti=‘Peja');

ORDER BY sintaksa

• ORDER BY sintaksa përdoret për me i sortuar bashkësitë e një apo më shumë

kolone.

• Sintaksa ORDER BY sorton të gjithë rreshtat duke u bazuar në renditjen e

alfabetit nga më e vogël në më të madhe si të zakonshëm. Për me i sortuar rreshtat

nga më e madhe në më të vogël duhet përdorur shprehjen DESC.


SELECT emri_kolones,emri_kolones

FROM emri_tabeles

ORDER BY emri_kolones ASC|DESC;

ORDER BY zgjedh të gjithë studentët nga tabela “Studentet”, duke i sortuar në bazë të

Qyteti:

121


ORDER BY Qyteti DESC;

ORDER BY zgjedh të gjithë studentët nga tabela “Studentet” për disa kolona duke i

sortuar ato:


ORDER BY Qyteti,EmriMbiemri;

INSERT TO sintaksa

Sintaksa INSERT TO përdoret për me fut një rresht të ri në tabelë.

Sintaksën INSERT TO mund të përdorim në dy forma.


INSERT INTO emri_tabeles

VALUES (vlera1,vlera2,vlera3,...);

apo

INSERT INTO emri_tabeles (kolona1,kolona2,kolona1,...)

VALUES (vlera1,vlera2,vlera3,...);

Shembull:

INSERT INTO Studentet (EmriMbiemri, Qyteti, KodiPostar, Tel, ,Shteti)

VALUES (‘Filan Fisteku5',‘Gjakove',‘13000',‘044778899',‘Kosove');

UPDATE sintaksa

Sintaksa UPDATE përdoret për më i rifreskua informatat në një rresht ekzistues.


122

UPDATE emri_tabela

SET kolona1=vlera1,kolona2=vlera2,...

WHERE disa_kolona=disa_vlera;

Shembull:

UPDATE Studentet

SET EmriMbiemri=‘Filan Fisteku4', City=‘Durres'

WHERE CustomerName='Filan Fisteku4';

DELETE sintaksa

Sintaksa DELETE përdoret për me i fshi rreshtat e tabelës.


DELETE * FROM emri_tabela

WHERE disa_kolona=disa_vlera;

Shembull:

DELETE FROM Studentet

WHERE EmriMbiemri =‘Filan Fisteku3’

AND EmriMbiemri =‘Filan Fisteku4’;

Shembull1:

DELETE FROM Studentet;

apo

DELETE * FROM Studentet;

123

Qasja përmes SQL deklarimeve

• Me qenë se deklarimet e SQL janë vetëm tekst, atëherë është e lehtë që me një

pjesë të vogël të kodit burimor duke shkruar deklarime në SQL mund të

ndryshojmë në mënyrë dinamike të dhënat për të siguruar përdoruesit me të dhënat

që ata kërkojnë nga baza e të dhënave e UEB faqes.

• Shembulli në vijim paraqet deklarimin duke selektuar të gjitha informacionet e

identitetit të shfrytëzuesit përmes variablës (txtUserID):

txtUserId = getRequestString("UserId");

txtSQL = "SELECT * FROM Users

WHERE UserId = " + txtUserId;

• Me anë të ketij query (pyetësori), ne mund të lexojm identitetin e shfrytëzuesit.

Për këtë qëllim është me rëndesi që të sigurojmë mirë bazën e të dhënave, për me i

evituar sulmet e mundshme të bazës së të dhënave të UEB faqes tonë.

SQL Injection

• Përmes UEB faqes shfrytëzuesit që kanë qëllim sulmimin e bazës së të dhënave,

mund të provojmë t’i qasemi informatave në bazë të shënimeve, sikurse

identitetin e shfrytezuesit së bashku me fjalekalimin.

• Komandat e injektuara të SQL mund të ndryshojnë SQL deklarimet dhe të arrijnë

marrëveshje në sigurinë e UEB aplikacionit.

• SQL Injection bazuar në 1=1 është gjithnjë e saktë.

• Le të supozojmë që qëllimi i SQL deklarimit në vijim është të krijojmë një SQL

deklarim që selekton shfrytëzuesin nga DB me identitetin e shfrytëzuesit.




124

• Nëse nuk ka siguri që mbron shfrytëzuesit të cilët shtypin në input stringje gabim,

atëherë shfrytëzuesit mund të shtypin inpute te mençura sikurse:

• UserId: 105 apo 1=1

SELECT * FROM Users WHERE UserId = 105 or 1=1

• SQL deklarimi me sipër është në rregullë dhe do t’i kthen shfrytëzuesit të gjithë

rreshtat e tabelës Users, përderisa WHERE 1=1 është i saktë.

• Deklarimi i mësipërm është i rrezikshëm. Në rast se tabela përmban emrin e

shfrytëzuesit dhe fjalëkalime, atëherë këto informacione i paraqiten shfrytëzuesit

qe përbejnë rrezik për leximin e fjalëkalimit. Leximi i fjalëkalimit:

SELECT UserId, Name, Password FROM Users

WHERE UserId = 105 or 1=1

• Përmes UEB faqes shfrytëzuesit qe kanë qëllim sulmimin e bazës së të dhënave,

mund të provojnë t’i qasen informatave në bazë të shënimeve, sikurse identitetin e

shfrytëzuesit me fjalëkalimin.

• Komandat e injektuara të SQL mund të ndryshojnë SQL deklarimet dhe të arrijnë

marrëveshje në sigurinë e UEB aplikacionit.

• SQL Injection bazuar në 1=1 është gjithnjë e saktë.

• Le të supozojmë që qëllimi i SQL deklarimit në vijim është të krijojmë një SQL

deklarim që selekton shfrytëzuesin nga DB me identitetin e shfrytëzuesit.




SQL Injection bazuar në “”=“” është gjithnjë e saktë.

Verifikimi i autentikimit për login:

uName = getRequestString(“UserName”);

uPass = getRequestString(“UserPass”);

125

sql = “SELECT * FROM Users WHERE Name =‘” + uName + “’ AND

Pass =‘” + uPass + “’”

Duke insertuar në DB “ apo “”=“ përmes inputit të shfrytëzuesit dhe fjalëkalimit.

Rezultati në pjesën e serverit është:

SELECT * FROM Users WHERE Name =“” or “”=“” AND Pass =“” or “”=“”

dhe rezultati është valid. Ndërsa kthen të gjitha rreshtat e tabelës Users, ashtu që

WHERE “”=“” është gjithnjë e saktë.

2015, Gjuha e Ueb-it

Documents

WEB Design - shkollateknike.comshkollateknike.com/wp-content/uploads/2013/03/Libri-webDesign.pdf · Departamenti i Shkencave Kompjuterike Universiteti ILIRIA ... janë; logo, grafika,