PROGRAMIMI NË WEB
Web Builder është një program WYSIWYG, i cili përdoret për të krijuar faqet web. Ky program gjeneron
elemente HTML për sa kohë që klikojmë objektet që preferojmë dhe i vendosim në mjedisin e punës.
Nëpërmjet Web Builder mund të krijohen faqe web pa njohuri në HTML. Ky program krijon faqe interaktive
me video, auto, imazhe, menu, forma regjistrimi, mundësi të ndryshme navigimi etj.
Në shembullin e mëposhtëm paraqitet një formë regjistrimi e krijuar me programin WYSIWYG Web
Builder. Nëpërmjet këtij programi, nga objektet në Toolbox është përzgjedhur Login, për të krijuar një
formë regjistrimi. Nëpërmjet klikimit dy herë në formën e regjistrimit hapet dritarja Login, në të cilën kemi
emërtuar: emrin e butonit, emrin e përdoruesit, fjalëkalimin, si dhe “Ruaj të dhënat”. Të gjitha funksionet
që kryen kjo formë regjistrimi kryhen nëpërmjet programit WYSIWYG Web Builder.
Nëpërmjet klikimit të butonit Preview mund të shikojmë se si do të paraqitet faqja jonë në browser dhe
nëpërmjet klikimit të butonit Publish mund ta publikojmë atë në web.
Editori WYSIWYG Web Builder Afishimi në Browser
Disa nga editorët WYSIWYG më popullorë janë:
NicEdit TinyMCE CKEditor YUI Rich Text Editor OpenWysiwyg
Editorët e tekstit
Aftësi që zhvillohen
Nxënësi/ja: aftësohet në njohjen e teknikës “What You See Is What You Get”
dhe të editorëve të ndryshëm.
Kontroll njohurish
1. Cili është roli i teknikës WYSIWYG?
2. Cilat janë disavantazhet e përdorimit të teknikës WYSIWYG?
3. Cilat janë programet më të përdorshme për ndërtimin e faqeve web?
4. Sillni shembuj të tjerë të editorëve WYSIWYG.
101
3.5PROGRAMIMI NË WEB Integrimi i HTML-së me CSS-në
Nxënësi/ja: Situatë
• koncepton CSS-në; Gjatë programimit në web, kërkohet që të
• vlerëson rëndësinë e integrimit të stilizohen faqe të shumta. Çfarë duhet bërë
që të arrijmë një stilizim të thjeshtë dhe të
CSS-së në HTML; krijojmë faqe sa më të bukura?
• identifikon mënyrat e ndryshme të
integrimit të CSS-së në HTML.
Cascading Style Sheets
Fjalët kyç: CSS (Cascading Style Sheets) ndihmon të formatohen dokumente
CSS, stilizim i jashtëm dhe i në html. Duke përdorur CSS, ne përcaktojmë mënyrën se si do të
brendshëm. paraqiten elementet HTML. CSS ofron zgjedhje stilistike lidhur
me: madhësinë, ngjyrën, trashësinë dhe llojin e shkrimit. Kodi
CSS mund të vendoset në një dokument HTML në tri mënyra:
- në të njëjtin rresht me elementin;
- stilizim i brendshëm;
- stilizim i jashtëm.
Mënyra më e përdorshme për të shtuar stilizimin është mënyra e tretë, duke krijuar një dokument .css dhe
thirrja e tij nga dokumenti në HTML.
Slilizimi në të njëjtin rresht me elementin
Stilizimi në të njëjtin rresht me elementin realizohet duke vendosur atributin style në elementin HTML. Brenda
atributit style do të përcaktoni karakteristikat CSS. Kjo do të përdoret në qoftë se për një tag duhet të vendoset një
stil unik. Për ta ilustruar me
shembuj, si fillim, ndërtojmë
një direktori dhe e emërtojmë
css. Dokumentet që do të
krijojmë, do t’i vendosim në
të. Ndërtojmë një dokument
si në figurën e dhënë dhe e
emërtojmë css1.html.
Për të shfaqur një faqe HTML në mënyrë korrekte, një browser duhet të dijë grupin e karaktereve që do të
përdorë (charset – character set). ASCII ishte standardi i parë i deshifrimit të karaktereve me 127 karaktere
të ndryshme alfanumerike që mund të gjenden në internet, si: numra, shkronja dhe karaktere speciale. Një
version tjetër i quajtur ANSI suporton shfaqjen e 256 karaktereve në browser. Për shkak se ANSI është shumë
i limituar, deshifrimi standard i karaktereve në HTML5 (versioni aktual i HTML-së) ndryshoi në UTF-8. UTF-8
mbulon pothuajse të gjitha karakteret dhe simbolet e përdorura në botë. Grupi i karaktereve specifikohet
në elementin meta.
<meta charset=”UTF-8”>
102
PROGRAMIMI NË WEB
Stilizimi i brendshëm
Stilizimi i brendshëm realizohet duke vendosur në dokumentin HTML
elementin <style>. Elementi <style> vendoset brenda elementit
<head>. Kjo do të përdoret në qoftë se dokumenti ka një stil unik. Për
ta ilustruar, ndërtojmë një dokument si në figurë dhe e emërtojmë
css2.html.
Stilizimi i jashtëm
Me stilizim të jashtëm do të kuptojmë ruajtjen e kodit CSS në një dokument .css. Kjo do të bëjë të mundur
ndryshimin e stilit të një ose disa dokumenteve html, duke ndryshuar vetëm një dokument. Kjo mënyrë
është e përshtatshme kur ky stil do të përdoret në disa faqe. Për të vendosur dokumentin css përdoret tagu
<link>, i cili vendoset brenda tagut <head>. Për ta ilustruar, do të ndërtojmë dy dokumente si në figurën e
mëposhtme, njërin e emërtojmë css3.html dhe tjetrin style.css.
Në të tre shembujt e mësipërm, rezultati është i njëjtë si në figurën e mëposhtme.
Përshëndetje!
Aftësi që zhvillohen
Nxënësi/ja: aftësohet në krijimin e faqeve web të stilizuara duke përdorur CSS.
Kontroll njohurish
1. Për çfarë shërben CSS-ja?
2. Cili është ndryshimi midis stilizimit të brendshëm dhe stilizimit të jashtëm?
3. Nëse do të kishim faqe të shumta të cilat do të kishin të njëjtin stil CSS, cila do të ishte mënyra më e
mirë për përzgjedhjen e vendosjes së kodit CSS? Argumentoni përgjigjen tuaj.
4. Shkruani kodin që do të shfaqë tekstin “CSS dhe HTML” me ngjyrë blu dhe madhësi shkrimi 30 px, duke
përdorur stilizimin e jashtëm.
103
3.6PROGRAMIMI NË WEB Vendosja e tekstit, figurave, linkeve
dhe tabelave me HTML/CSS
Nxënësi/ja: HTML HTMHLTML
• vendos tekst në faqen web;
• vendos figurat në faqen web; Situatë HTML HTML HTML
• shton tabelat në faqen web dhe HTML
koncepton elementet përkatëse Gjatë ndërtimit të një faqeje
në HTML. web-i, duhet të vendosim
tekst me madhësi të
Fjalët kyç: ndryshme, figura, tabela,
linke për të kaluar nga një faqe web-i në një tjetër faqe web-i.
tekst, tabela, figura, linke. Cila është sintaksa në HTML për të afishuar këto të dhëna?
Dizenjuesit e faqeve web mund të shtojnë tekst me madhësi të ndryshme, imazhe, linke dhe tabela të tjera
në dokumentet HTML.
Vendosja e tekstit
Në HTML janë disa elemente që shërbejnë për vendosjen e tekstit. Më poshtë po listojmë disa prej tyre.
Titujt përcaktohen nëpërmjet elementeve “h”. Elementet “h” janë në gjashtë madhësi të ndryshme, nga
<h1>…</h1> deri te <h6>…</h6>.
Paragrafët përcaktohen nëpërmjet elementit <p>…</p>. Për të kaluar tekstin
në një rresht të ri përdoret elementi <br>. Për të krijuar një vijë horizontale
në tekst përdoret elementi <hr>, i cili shërben për të ndarë seksionet nga
njëri-tjetri.
Vendosja e figurës
Aftësia për të vendosur figura në një dokument HTML ka ndihmuar në rritjen e popullaritetit të faqeve web.
Elementi <img> shërben për vendosjen e figurave në një dokument html. Ai kërkon përdorimin e dy atributeve:
- src, i cili shërben për të përcaktuar burimin nga do të marrim figurën;
- alt, i cili shërben për të vendosur një tekst që do të shfaqet në qoftë se shfletuesi nuk e gjen dot figurën
në burimin e përcaktuar tek atributi src.
Në figurë ilustrohet kodi html, që duhet të shkruhet për të vendosur figurën në dokument. Në këtë shembull
është zgjedhur një
fotografi nga qyteti
i Tiranës dhe figura
është e formatit jpg.
Njihen disa lloje
formatesh për figura,
të tilla si: jpg, png, gif.
104
PROGRAMIMI NË WEB
Krijimi i linkeve
Linket krijohen duke përdorur tagun <a>. Kontakt:
Ky është një tag çift, ku tagu <a> shërben
për hapjen, ndërsa tagu </a> shërben për Kontakto në Facebook dhe në Linkedin.
mbylljen e tij. Ndërmjet tagut hapës dhe
mbyllës mund të vendosim një fjalë, shprehje
ose figurë.
Linket shërbejnë për të realizuar lidhje ndërmjet dokumenteve. Në qoftë se dokumenti është pjesë e faqes
që keni krijuar, linket quhen linke të brendshme. Në qoftë se dokumenti është në një faqe tjetër, linket
quhen linke të jashtme.
Linket e brendshme mund të jenë ndërmjet dokumenteve ose ndërmjet tageve të një dokumenti.
Për linkun e ndërtuar duhet të përcaktojmë atributin:
- href, që shërben për të përcaktuar vendndodhjen e dokumentit;
- title, që shërben për të vendosur një përshkrim për këtë link;
- target, që shërben për të përcaktuar se ku do të hapet linku. Atributi target merr disa vlera të tilla, si:
• _blank, që hap linkun në një dritare të re ose tab të ri;
• _self, që hap linkun në të njëjtën dritare me dokumentin nga i cili u klikua. Ky është opsioni që
bëhet aktiv në qoftë se nuk e përcaktojmë atributin target.
Linke të brendshme për të aksesuar dokumente
Për të ilustruar këtë shembull, do të ndërtojmë dy dokumente HTML dhe do t’i vendosim emërtimin
dokument1.html dhe dokument2.html.
Klikimi i linkut në dokument 1,
do të na çojë në dokument 2.
Klikimi në dokument 2, do të
na çojë në dokument 1.
Ky shembull është i vlefshëm
edhe për linke të jashtme,
për këtë do të mjaftojë
vetëm përcaktimi i saktë i
vendndodhjes së dokumentit.
105
PROGRAMIMI NË WEB
Tabelat
Tabelat ju ndihmojnë të shfaqni tipa të ndryshëm të dhënash, si: tekst, figura, link, audio, video, në mënyrë
më eficiente. Elementi <table> shërben për ndërtimin e tabelave.
Struktura e tabelës është e përbërë nga katër elemente: <tr> <table> <td> </tr>
<tr> </td> </tr>
1- Titulli, për të cilin përdorim elementin <caption>…</caption>. <tr> <td> <td> <td> </tr>
2- Koka, për të cilën përdorim elementin <thead>…</thead>. </td> </td> </td>
3- Trupi, për të cilin përdorim elementin <tbody>…</tbody>. <td> <td> <td>
4- Fundi, për të cilin përdorim elementin <tfoot>…</tfoot>. </td> </td> </td>
<td> <td>
</td> </td>
<html> Tabelat janë të përbëra nga rreshta dhe shtylla. Për të ndërtuar një
<head> rresht brenda trupit (<tbody>) të tabelës, do të përdoret elementi
<title>Tabelë e thjeshtë</title> <tr>…</tr>. Numri i elementeve <tr>…</tr> përcakton numrin e
</head> rreshtave të tabelës. Çdo rresht është i përbërë nga qeliza, të cilat
<body> ndërtohen nga elementi <td>…</td>.
<table border = “1”> Brenda qelizës mund të ndërtojmë elemente të tjera.
<!-- titulli i tabelës --> Për ta ilustruar me një shembull, në fillim ndërtojmë një direktori
<caption>Tabelë e thjeshtë </caption> dhe e emërtojmë table. Më pas ndërtojmë një dokument HTML
<!-- trupi i tabelës --> dhe e emërtojmë tabelë_e_thjeshtë. Në figurën e parë është
<tbody> kodi HTML, ndërsa në figurën e dytë ajo çfarë do të na shfaqet te
<tr> shfletuesi.
<td>Rreshti 1, Shtylla 1</td>
<td>Rreshti 1, Shtylla 2</td> Tabelë e thjeshtë
</tr>
<tr> Rreshti 1, Shtylla 1 Rreshti 1, Shtylla 2
<td>Rreshti 2, Shtylla 1</td>
<td>Rreshti 2, Shtylla 2</td>
</tr>
</tbody>
</table>
</body>
</html>
Rreshti 2, Shtylla 1 Rreshti 2, Shtylla 2
Aftësi që zhvillohen
Nxënësi/ja: aftësohet në shkrimin dhe mënyrat e ndryshme për të futur tabela, tekst, figura dhe linke në
faqen web duke përdorur HTML dhe CSS.
Kontroll njohurish
1. Shkruani kodin që hap www.facebook.com në një dritare të re.
2. Lundroni në internet si realizohet bashkimi i rreshtave apo i kolonave të një tabele dhe realizoni tabelat
e mëposhtme në HTML:
Kolona 1 Kolona 2 Kolona 3
Rreshti 1, Qeliza 1 Rreshti 1, Qeliza 2 Rreshti 1, Qeliza 2 Rreshti 1, Qeliza 3 Rreshti 1, Qeliza 1 Rreshti 1, Qeliza 2
Rreshti 2, Qeliza 1 Rreshti 2, Qeliza 2
Rreshti 2, Qeliza 1 Rreshti 2, Qeliza 2 Rreshti 1, Qeliza 1 Rreshti 2, Qeliza 1 Rreshti 2, Qeliza 3
Rreshti 3, Qeliza 1
3. Ndërtoni faqen web të mëposhtme ku me klikimin e Shiko ushtrimet hapen ushtrimet që janë të
ruajtura si ushtrime.pdf.
106
PROGRAMIMI NË WEB
3.7Menaxhimi i listave, marxhinave dhe formularëve
në faqen HTML
Nxënësi/ja: Situatë
Gjatë ndërtimit të faqeve web
• mëson si të vendosë tekst të duhet të shtojmë lista të renditura,
renditur ose të shenjëzuar në të përcaktojmë marxhinat dhe të identifikojmë elementet
faqen web; përbërëse të formularëve, të cilët shërbejnë për marrjen e
të dhënave nga përdoruesi.
• vendos marxhina në një faqe
web-i; Krijimi i listave në HTML
• kupton elementet e nevojshme Imagjinoni sikur t’ju duhej që në faqen tuaj të shtonit një listë. Kjo
për të ndërtuar formularët. mund të jetë një listë me elemente të renditura. Elementet e një liste
të renditur mund të paraqiten me numra (1, 2, 3, ...), me shkronjat e
Fjalët kyç: alfabetit (a, b, c, ...) ose me numrat romakë (I, II, III, ...).
Një lloj tjetër liste është ajo e parenditur.
formular, lista, marxhina.
Elementet e kësaj liste shfaqen me një rreth të zi Elementi Përshkrimi
në të majtë të tyre.
Nga sa thamë më sipër, listat janë të ndara në <ol>...</ol> Element për ndërtimin e listave të renditura.
tri lloje, të renditura (ordered), të parenditura
(unordered) dhe të përcaktuara (definition). Në <ul>...</ul> Element për ndërtimin e listave të parenditura.
tabelën në të djathtë tregohen elementet HTML
për ndërtimin e tyre. <li>...</li> Element për ndërtimin e një liste të renditur dhe të parenditur.
<dl>...</dl> Element për ndërtimin e listave të përcaktuara.
<dt>...</dt> Element për përcaktimin e termit të listës së përcaktuar.
Në figurat e mëposhtme tregohet ndërtimi i listave. Ku për secilin model liste në figurën e parë kemi kodin
HTML, ndërsa në figurën e dytë ajo çfarë do të na shfaqet te shfletuesi pas ekzekutimit.
Lista e renditur Lista e parenditur
1. Element 1 • Element 1
2. Element 2 • Element 2
3. Element 3 • Element 3
a. Element 1
b. Element 2
c. Element 3
A. Element 1 Lista e përcaktuar
B. Element 2
C. Element 3
i. Element 1
ii. Element 2
iii. Element 3
I. Element 1 Element 1 Përmbajtja e Elementit 1
II. Element 2 Përmbajtja e Elementit 2
III. Element 3 Element 2
1. Element 1
2. Element 2
3. Element 3
107
PROGRAMIMI NË WEB
Marxhinat e faqes
Marxhina (margin) është një karakteristikë që i përcaktohet dokumentit HTML ose një elementi duke
përdorur CSS. Marxhina shërben për të krijuar hapësirë ndërmjet elementeve. Marxhina për një element
është hapësira e jashtme deri te kufizuesi i elementit. Kufizuesi i elementit është karakteristika border.
Hapësira që krijon marxhina është transparente dhe nuk mund t’i përcaktojmë një ngjyrë.
Marxhina mund të përcaktohet në të katërt
kufijtë e një elementi. Leximi i kufijve
të një elementi fillon nga kufiri i sipërm
dhe vazhdon në drejtimin orar, pra: lart
- djathtas - poshtë - majtas (top - right -
bottom - left).
Karakteristikat për marxhinat përcaktohen
nga komanda si më poshtë:
- margin-top, për hapësirën e sipërme;
- margin-right, për hapësirën djathtas;
- margin-bottom, për hapësirën poshtë;
- margin-left, për hapësirën majtas.
Marxhina mund të marrë vlera në piksel
(px), përqindje (%), centimetra (cm) etj.
Më poshtë po ilustrojmë ndërtimin e një
drejtëkëndëshi me përmasa 300 px me
200 px dhe 100 px për çdo kufi.
Ndërtimi i formularëve dhe tipat e ndryshëm të tyre
Integrimi i formularëve në faqet web është një pjesë e rëndësishme. Për ndërtimin e një formulari përdorim
elementin <form>...</form>. Ai shërben për të marrë informacione nga përdoruesi. Elementi <form> merr
dy atribute kryesore:
1- action - përcaktojmë se ku do t’i dërgojmë të dhënat e formës. Zakonisht, vlera e këtij atributi është një
faqe web;
2- method - përcaktojmë mënyrën se si do t’i dërgojmë të dhënat. Janë dy mënyra për dërgimin e të
dhënave: POST dhe GET. Ndryshimi ndërmjet tyre është se metoda POST i fsheh të dhënat, ndërsa
metoda GET i shfaq ato në URL-në e shfletuesit.
Elementet brenda për ndërtimin e formularit
HTML ofron një numër të madh elementesh që mund të përdoren për të ndërtuar një formë. Këto elemente
mund të përdoren për të marrë nga përdoruesi të dhëna tekst ose skedarë.
Elementi <input/> është elementi më i përdorshëm, i cili shërben si një fushë për të marrë të dhëna nga
përdoruesi. Atributi i domosdoshëm që duhet të përcaktojmë është type. Ai përcakton tipin e inputit.
108
PROGRAMIMI NË WEB
Disa nga tipat më të përdorshëm të inputit janë:
• text – i lejon përdoruesit të vendosë një fushë teksti; Button reset
• password – fushë teksti për vendosjen e fjalëkalimit,
submit
zakonisht teksti i shkruar shfaqet me * ose me •; Check Box
• number – fushë për vendosjen e numrave;
• radio – rreth plotësimi, ku përdoruesi mund të zgjedhë Radio Button
vetëm një opsion;
• checkbox – kuti plotësimi, ku përdoruesi mund të
zgjedhë një ose disa opsione;
• button – krijon një buton;
• reset – krijon një buton, me klikimin e të cilit do të boshatisen të gjitha fushat e formës;
• submit – me klikimin e këtij butoni, të dhënat e formës do të dërgohen te dokumenti i përcaktuar tek
atributi action.
Një formë mund të përmbajë elemente input, të tilla si: fusha teksti, checkbox, radio-button, button submit,
reset, button etj.
Elementit <input> mund t’i vendosen atributet:
- value, që shërben për t’i vendosur inputit një vlerë fillestare;
- name, që shërben për të emërtuar fushën. Ky atribut është i rëndësishëm për t’u përdorur, sepse
nevojitet për përpunime të tjera të të dhënave.
Elementi <select> përdoret për të zgjedhur një ose më shumë nga opsionet. Dy atribute opsionale janë:
- size - përcakton sa opsione do të shfaqen. Në qoftë se nuk e përcaktojmë atributin size, do të shfaqet
vetëm një opsion;
- multiple - i jep mundësi përdoruesit të zgjedhë më shumë se një opsion.
Opsionet e elementit <select> ndërtohen nga elementi <option>...</option>. Ky element merr dy atribute:
- value, që përcakton vlerën e e opsionit;
- selected përcakton një opsion si të zgjedhur <select> </select>, listë e selektueshme. Elementet e saj
shtohen nga elementi <option> </option>.
Elementi <textarea>...</textarea> përdoret për të marrë nga përdoruesi disa rreshta tekst. Dy atribute që
përcaktojnë rreshta dhe shtylla janë:
- rows - përcakton numrin e rreshtave;
- cols - përcakton numrin e shtyllave.
Përmbajtja do të vendoset ndërmjet elementit hapës dhe mbyllës: <textarea> zonë teksti </textarea>.
Shembull
<FORM action = “form1.html “ method = “post”>
Emër: <INPUT type = “text” name = “emër”><BR>
Mbiemër: <INPUT type = “text” name = “mbiemër”><BR>
email: <INPUT type = “text” name = “email”><BR>
<INPUT type = “radio” name = “gjinia” value = “Mashkull”>Mashkull<BR>
<INPUT type = “radio” name = “gjinia” value = “Femër”>Femer<BR>
<INPUT type = “submit” value = “Konfirmo”>
</FORM>
109
PROGRAMIMI NË WEB
Llojet e formave
Formularët janë të natyrave të ndryshme. Disa lloje janë:
- formular regjistrimi;
- formular për të hyrë në sistem, kjo njihet si Log In;
- formular kontakti;
- formular për komentim;
- formular kërkimi.
Përpunimi i të dhënave të marra nga një formë bëhet duke përdorur gjuhën PHP ose JavaScript.
Aftësi që zhvillohen
Nxënësi/ja: njihet me elementet për ndërtimin e listave të renditura, përcakton marxhinat në dokument
dhe elementet e formularëve.
Kontroll njohurish
1. Si krijohen listat e renditura dhe të parenditura? Jepni shembuj.
2. Cilët janë llojet e marxhinave?
3. Cili është ndryshimi midis përdorimit të metodës post dhe metodës get?
4. Cilat janë elementet për ndërtimin e formularëve?
5. Shkruani kodin që afishon figurën e mëposhtme.
i. HTML
ii. XHTML
iii. CSS
iv. JavaScript
I. HTML
II. XHTML
III. CSS
IV. JavaScript
a. HTML
b. XHTML
c. CSS
d. JavaScript
A. HTML
B. XHTML
C. CSS
D. JavaScript
6. Shkruani kodin që afishon figurën e mëposhtme.
• Element Liste 1 1. Element Liste 4
• Element Liste 2 2. Element Liste 5
• Element Liste 3 3. Element Liste 6
Ky është një paragraf në HTML...
110
Punë praktike 3.8PROGRAMIMI NË WEB
Përdorimi i formularëve
Nxënësi/ja: Situatë
• ndërton një formular; Kërkohet të ndërtohet një formular
• njihet me elementet përbërëse të regjistrimi, i cili merr informacion mbi: emrin
e përdoruesit, mbiemrin, fjalëkalimin, gjininë dhe vitin e
formularit. lindjes. Cili është skripti në HTML?
Fjalët kyç:
formular, html.
Zhvillimi
Për ta realizuar këtë formular, duhet të hapim programin Notepad++ dhe të shkruajmë kodin e mëposhtëm.
<html> Emër: Regjistrim Femër
<head> Mbiemër:
Përdoruesi: Mashkull
<title>Formë regjistrimi</title> Fjalëkalimi: 1991
</head> Gjinia:
<body> Viti i lindjes: Anulo
<form action="regjistrim.html " method="post"> Regjistrohu
<table>
<tbody>
<caption> Regjistrim <caption>
<tr>
<td> Emër: </td>
<td> <input type = "text" name = "emër" > </td>
</tr>
<tr>
<td> Mbiemër: </td>
<td> <input type = "text" name = "mbiemër" > </td>
</tr>
<tr>
<td> Përdoruesi: </td>
<td> <input type = "text" name = "përdoruesi" > </td>
</tr>
<tr>
<td> Fjalëkalimi: </td>
<td> <input type = "password" name = "fjalëkalimi"> </td>
</tr>
<tr>
<td> Gjinia: </td>
<td> Mashkull <INPUT type = "radio" name = "gjinia" >
Femër<INPUT type = "radio" name = "gjinia" >
</tr>
<tr>
<td> Viti i lindjes: </td>
<td>
<select name = "viti i lindjes">
<option value = "1991"> 1991 </option>
<option value = "1992"> 1992 </option>
<option value = "1993"> 1993 </option>
<option value = "1994"> 1994 </option>
<option value = "1995"> 1995 </option>
</select>
<td>
</tr>
<tr>
<td> <input type = "submit" value = "Regjistrohu"> </td>
<td> <input type = "reset" value = "Anulo"> </td>
</tr>
</tbody>
<table>
</form>
</body>
</html>
Detyrë:
1. Ekzekutoni ushtrimin e mësipërm.
2. Modifikoni kodin duke shtuar një select, nëpërmjet të cilit do të keni mundësi të zgjidhni sportin e preferuar.
111
3.9PROGRAMIMI NË WEB Kornizat dhe bashkësia e tyre në HTML
Nxënësi/ja: Situatë
• vlerëson rëndësinë e paraqitjes së Dritarja e faqes web mund të
ndahet në korniza me gjerësi
informacionit në një frame; dhe gjatësi të ndryshme për të
• koncepton rëndësinë e futjes paraqitur informacionin në mënyrë
sa më të qartë. Si duhet ndërtuar
së dokumenteve në frame të një faqe e tillë? Cilat janë elementet përbërëse të tyre?
ndryshme.
Fjalët kyç:
frame, frameset.
Frame-et në HTML përdoren për të ndarë browser-in në seksione të ndryshme, ku secili seksion mund të
ngarkojë një dokument HTML të veçantë. Disa frame-e në një dritare në browser njihen si frameset. Dritarja
e browser-it mund të ndahet në frame-e në mënyrë të ngjashme me organizimin e tabelave në rreshta dhe
kolona.
Krijimi i frame-eve
Për të përdorur frame-et në një faqe web përdoret tagu <frameset> në vend të përdorimit të tagut <body>.
Tagu <frameset> përcakton si do të ndahet dritarja e browser-it në frame. Atributi rows i tagut frameset
përcakton frame horizontal dhe atributi cols shërben për të krijuar frame vertikal. Secili frame identifikohet
nga tagu <frame> dhe përcakton se cili dokument HTML do të hapet në frame.
Më poshtë paraqiten disa nga atributet kryesore të elementit <frame>.
• src: ky atribut përdoret për të dhënë emrin e skedarit që do të ngarkohet në frame. Vlera e tij mund
të jetë çdo URL. Për shembull, src=”/html/frame1.html” do të ngarkojë skedarin frame1.html, i cili
gjendet në direktorinë html.
• name: ky atribut jep mundësinë e vendosjes së emrit te një frame. Ai përdoret për të treguar në cilin
frame duhet të ngarkohet një dokument.
Më poshtë jepen atributet kryesore të elementit <frameset>:
• cols: specifikon sa kolona janë te frameset-i dhe madhësinë e secilës kolonë.
Madhësitë e secilës kolonë zakonisht përcaktohen në dy mënyra: në vlerë absolute, në piksela. Për
shembull, për të krijuar tri frame-e vertikale, përdorim cols= “100,100,500” dhe në përqindje në varësi të
dritares së browser-it. Për shembull, për të krijuar tri frame-e vertikale përdorim cols= “10%,10%,80%”.
• rows: ky atribut funksionon njësoj si atributi cols dhe merr të njëjtat vlera, por përdoret për të
specifikuar rreshtat në frameset.
• border: ky atribut specifikon gjerësinë e kufirit midis dy frame-meve në piksela. Për shembull, border = “5”.
112
PROGRAMIMI NË WEB
Noframe
Elementi <noframe> shërben për të afishuar një mesazh, në qoftë se shfletuesi nuk arrin t’i gjejë burimin
qoftë edhe njërit prej frame-eve të deklaruara brenda një frameseti.
Bashkësia e kornizave ose frameset
Një frameset e ndan dritaren në rreshta dhe kolona. Elementi <frameset>...</frameset> shërben për të
krijuar një frameset. Frameset-i përbëhet nga disa frame-e, që ndërtohen nga elementi <frame/> dhe nga
elementi <noframe>...</noframe>.
Për të ilustruar përdorimin e frameset-it, do të ndërtojmë katër dokumente html. I emërtojmë:
frame1.html, frame2.html, frame3.html dhe të fundit frameset.html. Vendosim te secili një paragraf
me përmbajtje frame1, frame2, frame3.
Në browser do të shikojmë
Aftësi që zhvillohen figurën e mësipërme.
Nxënësi/ja: aftësohet në përdorimin e frame-ve dhe vendosjen e informacionit në to.
Kontroll njohurish
1. Për çfarë shërben një frame? Cilët janë llojet e ndryshme të tyre?
2. Çfarë realizon kodi i mëposhtëm? 3. Çfarë realizon kodi i mëposhtëm?
Shpjegoni secilin rresht të tij. Shpjegoni secilin rresht të tij.
113
3.10PROGRAMIMI NË WEB Faqet web statike dhe dinamike
Nxënësi/ja: Situatë
Në jetën e përditshme
• kupton si funksionon një faqe kërkohet që të afishohet
statike dhe dinamike; informacion në lidhje me
një lajm të caktuar ose
• krahason karakteristikat e faqeve informacion mbi ndeshjet
statike dhe dinamike; në kohë reale. Cili është ndryshimi midis këtyre faqeve dhe si
krijohen ato?
• identifikon rëndësinë e përdorimit
të faqeve dinamike.
Fjalët kyç: Sot, faqet e internetit përdoren për qëllime të ndryshme. Disa
faqe statike, faqe dinamike. prej tyre shtojnë informacione në mënyrë të vazhdueshme dhe
disa të tjera, që pas momentit që janë krijuar, nuk e kanë nevojën
e shtimit të informacioneve. Për këtë arsye, faqet e web-it ndahen
në dy kategori:
1- faqe statike;
2- faqe dinamike.
Shumica e faqeve të web-it janë faqe dinamike.
Faqet statike
Faqja statike është një faqe interneti që gjithmonë përmban të njëjtin informacion në përgjigje të të gjitha
kërkesave të drejtuara nga të gjithë përdoruesit. E përkufizuar ndryshe, mund të themi që një faqe statike
shfaqet gjithmonë në të njëjtën mënyrë te të gjithë përdoruesit.
Faqet statike janë faqe të thjeshta. Ato nuk e ndryshojnë anën grafike dhe përmbajtjen pa bërë ndërhyrje
në kodin e krijuar. Te këto faqe web, sa herë që do të duam të ndryshojmë diçka, edhe vetëm një shkronjë
të vetme në tekst, është e nevojshme që ndryshimi i dokumentit HTML të bëhet në mënyrë manuale. Kjo
mënyrë shpeshherë është e mundimshme dhe e papërshtatshme.
Në figurë ilustrohet se si funksionon një faqe
statike. Përdoruesi dërgon një kërkesë në server.
Serveri përpunon kërkesën. Kur përfundon,
serveri i jep përgjigje përdoruesit. Kjo përgjigje
është e njëjtë për çdo kërkesë të drejtuar këtij SERVER FAQE STATIKE PËRDORUESI
serveri.
Disa nga karakteristikat e faqeve statike janë:
1- Ndërtimi i një faqeje statike ka kosto të ulët, qoftë edhe duke e krahasuar me faqet dinamike.
2- Faqet statike janë më të lehta për t’u shfaqur në krahasim me faqet dinamike.
3- Faqet statike janë më të lehta për t’u përgatitur për motorët e kërkimit.
114
PROGRAMIMI NË WEB
Faqet dinamike
Një faqe dinamike është një faqe interneti që mund të ndryshojë në përgjigje të konteksteve ose kushteve
të ndryshme. E përkufizuar ndryshe, një faqe do të quhet dinamike kur të dhënat merren nga një bazë të
dhënash ose nga skedarë.
Në shumë faqe interneti kemi mundësinë të kërkojmë për informacione të ndryshme. Në disa prej tyre,
ne krijojmë llogari personale. Disa janë për: informim me ngjarjet e fundit që ndodhin, informacione për
parashikimin e motit, informacione sportive, rezultate ndeshjesh në kohë reale apo diçka tjetër. Një faqe
interneti e tillë do të quhet një faqe dinamike. Kjo nuk do të mund të realizohet duke përdorur vetëm HTML.
Për të krijuar një faqe dinamike, do të përdorim gjuhën PHP, JavaScript dhe informacionet do të ruhen në
një bazë të dhënash.
Në figurën e mëposhtme ilustrohet se si funksionon një faqe dinamike. Përdoruesi dërgon një kërkesë në
server. Serveri përpunon kërkesën. Kur përfundon, serveri i kthen përgjigje përdoruesit. Kjo përgjigje është
specifike për kërkesën e drejtuar këtij serveri.
FAQE DINAMIKE
SERVER BAZE TË PËRDORUESI
DHËNASH
Disa nga karakteristikat e faqeve dinamike janë:
1- Një faqe dinamike është interaktive me përdoruesit.
2- Një faqe dinamike jep mundësinë e krijimit të faqeve me natyra të ndryshme, si për shembull: forum,
chat, blog, dyqan online, rrjet social, faqe lajmesh etj.
Aftësi që zhvillohen
Nxënësi/ja: krahason kakteristikat e faqeve dinamike dhe statike.
Kontroll njohurish
1. Çfarë janë faqet statike?
2. Çfarë janë faqet dinamike?
3. Kur përdoren faqet dinamike? Po faqet statike? Jepni shembuj.
115
3.11PROGRAMIMI NË WEB Bazat e JavaScript-it
Nxënësi/ja: Situatë
• koncepton bazat e JavaScript-it;
• kupton funksionet dhe eventet për Si mund të futen
elemente në programim
të krijuar faqe dinamike. për të kapur ngjarje nga përdoruesi?
Fjalët kyç: HTML-ja është e kufizuar në shfaqjen e tekstit, duke qenë
JavaScript, variabël, funksion, vetëm statike. Për t’i shtuar veçori, duhen përdorur gjuhë të
ngjarje. tjera, të tilla si, gjuhët e skriptimit. Një gjuhë skriptimi është një
gjuhë programimi e thjeshtuar dhe e interpretuar. Me gjuhë
të interpretuar do të kuptojmë atë gjuhë, skriptet e së cilës
ekzekutohen pa pasur nevojë që të kompilohen paraprakisht.
Logoja e JavaScript-it Bazat e JavaScript-it (JS)
JavaScript është një gjuhë skriptimi. Ajo është dizenjuar për
t’i bërë faqet web më interaktive dhe, në fakt, është gjuha e
skriptimit më popullore. JavaScript është një tekst i integruar me
kodin HTML. Për këtë arsye, për të shkruar kodin JavaScript do të
jetë i mjaftueshëm edhe një editor teksti i thjeshtë.
Karakteristikat kryesore të JavaScript-it janë:
• punon në të gjithë shfletuesit, si: Internet Explorer, Firefox,
Google Chrome, Opera, Safari;
• variablat mund të deklarohen kudo në aplikacion;
• objektet e përcaktuara në JavaScript përbëjnë objektet e
të gjithë shfletuesve, të tillë si: formë, elementet e formës,
frame etj.
Në çdo gjuhë kodimi është mirë që të përdoren komente. Qëllimi
i përdorimit të komenteve është shpjegimi i kodit të shkruar.
Komenti mund të bëhet në një rresht ose në disa rreshta.
116
PROGRAMIMI NË WEB
Variablat në JavaScript
Variabli shërben për të ruajtur të dhëna. Variablat deklarohen me fjalën kyç var dhe në fund mbyllen me
pikëpresje, për shembull: var x;. Për të ndërtuar një variabël, ka disa rregulla që duhen zbatuar. Ato janë:
1− karakteri i parë i variablit, që mund të jetë: një shkronjë, e madhe ose e vogël, vija poshtë (_) ose simboli
i dollarit ($);
2− karakteri i parë i variablit nuk mund të jetë një numër;
3− emri i një variabli nuk duhet të ketë hapësira boshe;
4− emri i një variabli nuk duhet të jetë ndonjë nga fjalët e rezervuara të gjuhës JavaScript.
5− emri i variablit mund të jetë: x, shuma, _sasia, $ total etj.
Tipat e të dhënave që ruan një variabël janë tekst dhe numra. Kur e dhëna është tekst, do të vendoset midis
thonjëzave dyshe; në qoftë se është numër, do të vendoset pa thonjëza.
Me variablat e krijuara, ne mund të përdorim operatorët:
- vlerëdhënës, të tillë si: =, për shembull: x = 5;
- aritmetikë, si mbledhja (+), zbritja (-), prodhimi (*), herësi (/), moduli (%), rritës (++), zbritës (--). Moduli
jep si rezultat mbetjen që del nga pjesëtimi i dy numrave të plotë. Rritësi e rrit me 1 vlerën e një variabli,
ndërsa zbritësi e zbret me 1 vlerën e tij;
- krahasues, të tillë si: më i madh se (>), më i madh ose baraz se (>=), më i vogël se (<), me i vogël ose i
barabartë se (<=), i barabartë (==), i ndryshëm (!=).
Funksionet
Një funksion është një bllok kodi, i ndërtuar për të kryer një detyrë të veçantë. Funksioni ekzekutohet kur
një ngjarje e thërret atë. Funksioni ndërtohet si më poshtë:
function shuma (a, b) Function është fjala kyç që përcakton se rreshtat e kodit do t’i përkasin një
{ funksioni.
return a + b; Shuma është emri i funksionit.
} a dhe b brenda kllapave rrethore janë parametra të funksionit. Parametrat
ndahen me presje (,) nga njëri-tjetri.
Return është fjalë kyç dhe përcakton se ky është një funksion që kthen vlerë, në
shembullin tonë, do të kthejë shumën e a-së dhe b-së.
Ngjarjet
Ngjarjet ndodhin mbi elementet HTML dhe JavaScript ka fuqi të reagojë ndaj këtyre ngjarjeve.
Një ngjarje përcaktohet si një veprim që bën shfletuesi ose përdoruesi. Disa shembuj ngjarjesh janë:
- dokumenti HTML ka mbaruar së ngarkuari në shfletues, ngjarja është onload;
- një fushë inputi është ndryshuar, ngjarja është onchange;
- një buton është klikuar, ngjarja është onclick.
HTML-ja lejon vendosjen e ngjarjeve në elementin html.
117
PROGRAMIMI NË WEB
Më poshtë do të ndërtojmë një dokument HTML, ku, pas klikimt të butonit, do të shkruajmë një tekst në
dokument.
<!DOCTYPE html>
<html>
<head>
<title>Ngjarje dhe funksioni</title>
</head>
<body>
<input type="button" value="Shkruaj Përshëndetje" onclick = "shkruaj('Përshëndetje');">
<script>
function shkruaj(txt){
document.write(txt);
}
</script>
</body>
</html>
Në klikim të butonit do të afishohet teksti “Përshëndetje”.
Aftësi që zhvillohen
Nxënësi/ja: aftësohet në shkrimin e programeve dinamike duke përdorur JavaScript.
Kontroll njohurish
1. Cilat janë karakteristikat e JavaScript-it?
2. Cilat janë ngjarjet kryesore? Jepni shembuj në përdorimin e tyre.
3. Përse ndërtohet një funksion? Si thirret ai?
4. Ndërtoni një program në JavaScript, që në klikimin e butonit Afisho, afishon sportin tuaj të preferuar.
118
Integrimi i JS-së në HTML 3.12PROGRAMIMI NË WEB
Nxënësi/ja: Situatë
Si mund të krijojmë dhe manipulojmë
• integron elemente të elemente në HTML dhe në faqen web? Si mund
JavaScript-it në HTML; të integrohet kodi me dokumentin në HTML?
• koncepton rëndësinë e vendosjes
së skripit JavaScript në HTML;
• krahason llojet e ndryshme të Scriptet JavaScript
vendosjes së skriptit JavaScript në HTML.
Skriptet JavaScript mund të vendosen:
Fjalët kyç: 1- në dokumentin HTML;
skripti në JS. 2- të ruhen në një skedar të jashtëm.
Skripti JavaScript mund të vendoset kudo në dokumentin HTML,
duke përfshirë edhe elementet <head> dhe <body>.
Skriptet JavaScript vendosen ndërmjet elementit <script> …</script>. Ky element merr dy atribute:
- type, që shërben për të përcaktuar tipin e skriptit që do të shkruajmë. Për JavaScript-in, tipi që do të
përcaktojmë është type=“text/javascript”;
- url, që përdoret kur skripti ruhet në një skedar të jashtëm. Në këtë atribut përcaktojmë vendndodhjen e
skedarit JavaScript.
Përdorimi i JavaScript në dokumentin HTML
Në shembullin e mëposhtëm ilustrohet përdorimi i skriptit JavaScript në dokumentin HTML. Krijojmë një
dokument në HTML dhe shkruajmë kodin që është në figurën e parë.
Kodi i parë në JavaScript
Përshëndetje nga JavaScript!
Në përfundim e hapim dokumentin e krijuar në shfletues dhe do të shfaqet si në figurën e dytë.
Përdorimi i JavaScript-it nga një skedar i jashtëm
Përdorimi i skripteve nga një skedar i jashtëm është i dobishëm atëherë kur ne duam që një skript ta
përdorim në disa dokumente HTML.
Skedarin e jashtëm do ta ruajmë me prapashtesën .js. Ky skedar nuk do të përmbajë elementin <script>…</
script>. Siç thamë më sipër, këtë skedar do ta vendosim tek atributi src.
Për ta ilustruar, do të
ndërtojmë një dokument Kodi i parë në JavaScript!
HTML (.html) dhe një Përshëndetje nga JavaScript
dokument JavaScript (.js), Unë jam shkruar në një skedar të jashtëm
si në figurat përbri.
119
PROGRAMIMI NË WEB
• Gjetja e elementeve
Në temat në vazhdim do të mësojmë se si të manipulojmë elemente HTML. Në fillim do të duhet të kuptoni
gjetjen e elementit HTML. Gjetja e elementit HTML bëhet nëpërmjet:
1- Emrit të elementit 2- Emrit të atributit id 3- Emrit, atributit klasë (class)
Marrim si shembull gjetjen e Marrim si shembull gjetjen Marrim si shembull gjetjen
elementit paragraph: e elementit paragraph e elementit paragraph
var p = document. nëpërmjet atributit id: nëpërmjet atributit class:
getElementByTagName(“p”). <p id= “përmbajtja”> <p class=“përmbajtja”>
var p = document. var p = document.
getElementById(“p”). getElementById(“p”).
Ndryshimi i përmbajtjes së elementit
Ndryshimi i përmbajtjes së një elementi HTML bëhet nëpërmjet: innerHTML.
Kodi që do të shkruajmë është: elementi.innerHTML = “përmbajtja e re.”
Elementet e faqes web që ndërtohen me JS
Document Object Model (DOM) luan një rol të rëndësishëm në fuqinë që ka JavaScript për të krijuar faqe
dinamike. JavaScript ka fuqi përveç manipulimit të elementeve edhe për krijimin e tyre.
• Krijimi i elementeve
Duke përdorur JavaScript, ju do të jeni në gjendje të krijoni dhe të manipuloni elemente HTML. Për të
ilustruar ndërtimin e një elementi HTML, do të shpjegojmë figurën e mëposhtme.
- document.createElement (“”) shërben për të krijuar një element HTML nëpërmjet JavaScript. Në
shembullin tonë kemi krijuar elementin paragraf (p) dhe e kemi ruajtur te variabli paragraf;
- document.createTextNode (“”) shërben për të krijuar një nyje, e cila përmban karaktere. Në shembullin
120
PROGRAMIMI NË WEB
tonë kemi krijuar një tekst (“Ky është një paragraf i ri”) dhe e kemi ruajtur te variabli nyje;
- .appendChild () shërben për t’i shtuar “fëmijë” (child) një elementi. Në shembullin tonë, elementit paragraf
i kemi shtuar tekstin, që e kemi ruajtur te variabli nyje.
Pasi kemi gjetur elementin div me anë të atributit id, i kemi shtuar atij si “fëmijë” të tijin paragrafin që
kemi ndërtuar.
Rezultati do të jetë si në figurën e mëposhtme:
Ky është paragrafi i parë
Ky është një paragraf i ri
• Fshirja e elementeve
Për të fshirë një element do të përdorni: prindi.removeChild (fëmija).
• Shtimi i një elementi përpara një elementi tjetër
Për të shtuar një element përpara një elementi tjetër do të përdorim: fëmija_i_ri.insertBefore (prindi,
fëmija). Elementi fëmija_i_ri do të shtohet tek elementi prindi, përpara elementit fëmija.
• Ndryshimi i elementit me një tjetër
Për t’i ndryshuar vlerën një elementi do të përdorim: prindi.replaceChild (fëmija_i_ri, fëmija_i_vjetër).
Elementi fëmija_i_ri do të zëvendësojë elementin fëmija_i_vjetër tek elementi prindi.
Aftësi që zhvillohen
Nxënësi/ja: aftësohet për shkrimin e programeve dinamike duke integruar HTML-në me JavaScript.
Kontroll njohurish
1. Shkruani kodin që duke përdorur JavaScript-in afishon në tre rreshta të ndryshëm HTML, CSS dhe
JavaScript. Skripti në JavaScript të ruhet në një skedar të jashtëm.
2. Çfarë afishon kodi i mëposhtëm? Shpjegojeni atë.
121
3.13PROGRAMIMI NË WEB
Tiparet e gjuhës PHP dhe avantazhet e saj në web
Nxënësi/ja: Situatë
• vlerëson rëndësinë e përdorimit të Kërkohet të ndërtohet një faqe web-i që merr të dhëna nga
PHP-së; disa burime, të tilla si skedarë, apo nga një bazë të dhënash,
që kanë elemente interaktive dhe e lejojnë përdoruesin të
• prezantohet me gjuhën PHP; kryejë veprime, si: dërgimi i e-maileve, blerjeve etj. Si mund të
• prezantohet me avantazhet e realizohet kjo faqe web-i?
përdorimit të PHP-së. Tiparet e gjuhës PHP
Fjalët kyç: PHP-ja është një gjuhë skriptimi dhe ndihmon në ndërtimin e
PHP, server-side. aplikacioneve web. PHP është akronimi për Hypertext Preprocessor.
Ajo është një ndër gjuhët skriptuese më të përhapura që janë me
kod të hapur (Open Source). PHP-ja është krijuar nga Rasmus
Lerdorf, në vitin 1995. Që prej këtij viti dhe sot, PHP-ja ka evoluar shumë. Versioni i
fundit i PHP-së 7.0.1 u lëshua në dhjetor të vitit 2015.
Ajo ka tri karakteristika kryesore:
1- e pavarur nga platforma (cross-platform), do të thotë që kodi PHP mund të
ekzekutohet në disa sisteme shfrytëzimi, të tilla si: Windows, Linux, Unix, Mac;
2- e ndërthurur në HTML (HTML-Embedded), do të thotë që kodi PHP mund të
ndërlidhet me kodin HTML;
3- server-side, do të thotë që kodi PHP ekzekutohet në web server. Një skript në server
është një instruksion që përpunohet nga serveri dhe gjeneron HTML. Një faqe HTML e
thjeshtë nuk përpunohet në server, por dërgohet në shfletues dhe përpunohet prej tij.
Nga ana sintaksore, PHP-ja është e ngjashme me gjuhën C, Java dhe Perl.
Gjuha e skriptimit në web
Skripti PHP do të vendoset në një dokument të tipit .php. Ky dokument do të përmbajë edhe kod PHP dhe
kod HTML. Për ta interpretuar kodin PHP, do të duhet ta vendosim në një web server dhe ta hapim nga një
shfletues, i cili i afishon rezultatet si HTML. PHP-ja shërben për të ndërtuar faqe web-i dinamike në mënyrë
të shpejtë dhe të thjeshtë. Për këtë arsye, PHP-ja preferohet midis gjuhëve të tjera për ndërtimin e faqeve
web. Për ndërtimin e faqeve dinamike, PHP-ja ka nevojë për një web server, ku mund të përmendim Apache,
dhe për një bazë të dhënash, ku mund të përmendim MySQL.
Koncepti i kontrollit dhe ekzekutimit
Interpretimi i skriptit PHP ndahet në dy nënprocese. Kur një faqe web dërgohet tek interpretuesi i PHP-së,
skripti PHP, fillimisht, kontrollohet për saktësi në një proces, që njihet si kontrolli ose parsimi (parsing). Ky
proces është njëlloj si të kontrollohet një fjali për gabime gramatikore. Kjo nuk siguron që skripti PHP është i
saktë, por thjesht kontrollon nëse është në përputhje me një bashkësi rregullash të paracaktuara. Pas
përfundimit të kontrollit, do të kalojmë në procesin e dytë, të ekzekutimit. Ekzekutimi është procesi i marrjes
së një rreshti të vetëm skripti PHP dhe kthimin e tij në kodin HTML ekuivalent. Intepretuesi i PHP-së mund të
kthejë gabim gjatë kontrollit ose gjatë ekzekutimit. Nëse gjenerohet gabim, ky do të shfaqet te shfletuesi, në
rast të kundërt do të kthehet një faqe HTML e krijuar dinamikisht. Mund të themi që PHP-ja mund të përdoret
për të shkruar ato lloj faqesh web, të cilat çdo njeri që është i familjarizuar me web-in, i përdor çdo ditë.
122
PROGRAMIMI NË WEB
Avantazhet e përdorimit të PHP-së
Disa nga avantazhet e PHP-së janë:
− kodi është i përqendruar;
− kodi është i mbrojtur dhe klienti ka akses në të;
− në server bëhen të gjitha veprimet dhe më pas i kthehen përdoruesit;
− të gjitha ndryshimet që bëhen në kod, shikohen nga të gjithë në të njëjtën kohë;
− është e thjeshtë për t’u mësuar;
− përkrah bazat e të dhënave më popullore, të tilla si: MySQL, PostgreeSQL, SQL Server, Oracle etj.
Integrimi i PHP-së në HTML
Shembulli i mëposhtëm paraqet një formë të thjeshtë në HTML, e cila ka dy fusha text për emrin dhe
adresën e email-it dhe një buton Konfirmo.
<html>
<body>
<form action = "regjistrim.php" method = "post" >
Emri: <input type = "text" name = "emri" > <br>
Email: <input type = "text" name = "email" > <br>
<input type = "submit" value = "Konfirmo">
</form>
</body>
</html>
Kur përdoruesi plotëson formën e mësipërme dhe klikon butonin Konfirmo, të dhënat e formës dërgohen
për procesim në skedarin PHP, të quajtur regjistrim.php. Të dhënat do të dërgohen duke përdorur metodën
POST. Për të shfaqur të dhënat që ka vendosur përdoruesi, do të përdorim echo. Kodin në PHP do ta
vendosim midis <? dhe ?>
$_GET ose $_POST – përmbajnë një listë të të gjithë emrave të fushave dhe vlerave të dërguara nga një
formë duke përdorur metodën GET ose POST.
Skedari regjistrim.php do të ishte si më poshtë:
<html>
<body>
Përshëndetje <?php echo $_POST["emri ]; ?><br>
Adresa juaj e email-it është: <?php echo $_POST["email"]; ?>
</body>
</html>
Aftësi që zhvillohen
Nxënësi/ja: prezantohet me karakteristikat e përdorimit të gjuhës PHP për të krijuar faqe web-i interaktive.
Kontroll njohurish
1. Cilat janë karakteristikat e gjuhës PHP?
2. Cilat janë avantazhet e përdorimit të gjuhës PHP?
3. Cilat janë bazat e të dhënave që mund të përdoren së bashku me PHP-në?
123
3.14PROGRAMIMI NË WEB Punë praktike
Elementet dhe hapat për publikimin e një faqeje web-i
Nxënësi/ja: Situatë
Gjatë viteve të fundit
• koncepton elementet e publikimit është rritur kërkesa për të pasur një faqe interneti. Për
të një faqeje web-i; këtë arsye, është e domosdoshme njohja e elementeve që
duhen për publikim e një faqeje web-i, që kjo faqe të jetë
• evidenton hapat e publikimit të e aksesueshme nga çdo vend i botës. Pasi të ketë mbaruar
një faqeje web-i. ndërtimi i faqes, faqja duhet publikuar. Cilat janë elementet
që duhen për të publikuar një faqe web-i?
Fjalët kyç:
domain, host dhe protokolli FTP. Elementet e një faqeje web-i
Kompjuterat komunikojnë njëri me tjetrin duke përdorur numrat
të quajtur adresa IP. Emrat e domain-it në internet janë të ngjashëm me një bllok numëratori.
Blloku i numëratorit tregon për një biznes numrin e telefonit, sikurse domain-i i tregon të gjithë përdoruesve
të internetit që një domain është hostuar në server. Pa një domain nuk mund të përdoret, për shembull,
faqja: blerje.com. Në mënyrë që faqja web të mund të hapet në browser dhe të mund ta aksesojnë të gjithë,
nevojitet një host. Hostimi shërben për krijimin e lidhjes midis internetit dhe faqes web.
Domain
Domain është emri i faqes, me anë të së cilës njerëzit do t’ju gjejnë në internet. Domain-i është i ndërtuar
nga dy pjesë: emri i domain-it dhe niveli. Shembull domain-i mund të përmendim: www.schools.com
- www.schools, që është emri i domain-it, ndërsa .com është niveli.
Niveli ose Top Level Domain shpreh tipin e nivelit që përfaqëson. Gjithashtu ndihmon adresën IP që të jetë
e saktë.
Disa nga tipat e niveleve janë:
• gov - tregon se është faqe qeveritare;
• edu - tregon se është faqe për edukim;
• org - tregon se është faqe për organizata jofitimprurëse;
• mil - tregon se është faqe për ushtrinë;
• com - tregon se është faqe për biznese private me tregti fitimprurëse;
• net - tregon se është faqe për organizata me rrjete të përbashkëta.
Hosti
Hosti është serveri ku do të ngarkojmë faqen tonë. Serveri është një kompjuter, që duhet të rrijë 24 orë
ndezur, për të bërë të mundur aksesimin e faqes në çdo moment, nga çdo pikë e globit.
Protokolli FTP
Protokolli FTP shërben për transferimin e skedarëve nga një kompjuter në një tjetër nëpërmjet rrjetit siç
është interneti. FTP është anakronimi për File Transfer Protocol.
Hapat për publikimin e një faqeje web-i
Duhet të ndiqni disa hapa derisa faqja juaj të bëhet e aksesueshme nga të gjithë, të cilët janë:
Hapi 1 - Duhet të blini një domain. Një nga faqet ku mund të blihet domain-i është godaddy (www.godaddy.
com). Pagesat për domain janë me tarifa mujore.
124
PROGRAMIMI NË WEB
Për të pasur një domain.al, duhet t’i drejtohemi zyrave të AKEP-it (Autoriteti i Komunikimeve Elektronike
dhe Postare) ose ndonjë operatori tjetër.
Hapi 2 – Duhet të blejmë një host ose ta ndërtojmë vetë një të tillë. Disa nga hostet më të mira janë:
hostgator (www.hostgator.com), bluehost (www.bluehost.com) etj. Për ta aksesuar hostin, do të duhet të
krijojmë një përdorues dhe një fjalëkalim, të cilin do ta përdorim për protokollin FTP.
Hapi 3 – Pasi të keni blerë domain-in dhe hostin, jeni gati që të bëni kalimin e dokumenteve të faqes suaj në
host. Për të bërë kalimin e skedarëve nga kompjuteri në host, do të përdorim programin FileZilla.
FileZilla është programi më popullor për kalimin e skedarëve nga një kompjuter në një
tjetër. Ai është i bazuar në protokollin FTP. Programin FileZilla mund ta shkarkoni nga linku:
https://filezilla-project.org/.
Hapi 4 – Në këtë moment jeni gati të transferoni skedarët nga kompjuteri juaj në host. Si fillim hapim
programin FileZilla. Do të na shfaqet si në figurat e mëposhtme:
Në këtë dritare, ne do të vendosim përkatësisht:
1– emrin e hostit;
2– emrin e përdoruesit FTP;
3– fjalëkalimin e përdoruesit FTP;
4– portën në të cilën është instaluar serveri FTP, zakonisht është porta 21.
Shtypim butonin “Quickconnect” dhe presim sa të bëhet lidhja me hostin. Në përfundim do të jemi gati të
bëjmë kalimin e skedarëve.
Kjo dritare është më e rëndësishmja, sepse këtu do të bëhet kalimi i skedarëve nga kompjuteri në host.
Ana e majtë, në pjesën e sipërme të saj, shkruan Local site, që do të thotë se këtu janë skedarët që janë në
kompjuterin tuaj. Ana e djathtë, në pjesën e sipërme të saj, shkruan Remote site, do të thotë se skedarët
janë në host.
Kalimi i skedarëve nga kompjuteri në host do të bëhet me Copy/Paste. Pasi të keni përfunduar hedhjen,
faqja do të jetë e aksesueshme nga të gjithë.
125
3.15PROGRAMIMI NË WEB Applet-et e Java-s për krijimin
e aplikacioneve në web
Nxënësi/ja: Situatë
Gjatë krijimit të aplikacioneve web
• koncepton applet-et për krijimin e kërkohet zgjerimi i funksionaliteteve
aplikacioneve web; të faqeve web në një shfletues,
për t’i bërë ato më inteligjente dhe
• njihet me jetëgjatësinë e më interaktive. Si mund të arrihet
applet-eve; ndërtimi i këtyre faqeve në web?
• aftësohet në vendosjen e applet-it
në shfletues.
Fjalët kyç: Applet-et
applet-et, metoda.
Java bën të mundur ndërtimin e aplikacioneve web. Për t’i
realizuar ato, Java ofron applet-et. Applet-et janë programe që
ekzekutohen nga një shfletues. Applet-et janë një mjet i fuqishëm për krijimin e programeve web.
Një applet nuk mund të prekë hard diskun, të lexojë ose të shkruajë në të pa lejen e përdoruesit. Shkrimi në
hard disk është i parandalueshëm që kjo të mos bëhet burim virusesh.
Çdo applet ka ndërfaqen e tij grafike, tek i cili mund të përfshijmë elementet që përdoren për të ndërtuar
programe të instalueshme.
Avantazhet e applet-eve
• Një applet nuk ka nevojë për instalime shtesë për t’u ekzekutuar. Ai ka një platformë të pavarur dhe për
këtë arsye nuk ka nevojë të bëhen ndryshime për t’iu përshtatur sistemeve të ndryshme të operimit.
• Përdoruesi nuk ka nevojë të shqetësohet për sigurinë e aplikacioneve, sepse vetë gjuha Java në
strukturën e applet-eve përfshin sigurinë.
Jetëgjatësia e një applet-i
Janë pesë metoda që ndikojnë në “jetën” e një applet-i. Këto metoda janë “ciklet e jetës” nëpër të cilat
kalon një applet. Metodat që trashëgohen nga klasa applet janë:
1- Public void int ()
Është faza e parë e jetës së një applet-i. Kjo metodë thirret në momentin që ngarkohet applet-i dhe më
pas bëhet inicializimi i tij. Për këtë arsye, kjo njihet si faza e inicializimit. Veprimet që mund të kryhen
në këtë metodë janë: inicializimi i fushave, krijimi i elementeve të ndërfaqes grafike, ngarkimi i figurave
etj. Inicializimi i applet-it kryhet vetëm një herë gjatë ekzekutimit të programit.
2- Public void start ()
Është faza e dytë e “jetës” së një applet-i. Kjo metodë thirret pas metodës së inicializimit. Në këtë
fazë kompletohet ekzekutimi i applet-it. Kjo metodë realizon detyrat që duhet të kryhen çdo herë që
rihapet faqja e applet-it. Njihet si faza e nisjes.
126
PROGRAMIMI NË WEB
3- Public void paint (Graphics g)
Është faza e tretë e jetës së një applet-i. Kjo metodë thirret pas metodës së inicializimit dhe të nisjes,
por, gjithashtu, mund të thirret edhe kur applet-i kërkon që të rivizatohet. Kjo njihet si faza e vizatimit.
Veprimet që realizohen në këtë fazë janë vizatimet grafike, të cilat janë objekte të klasës Graphics.
4- Public void stop ()
Është faza e katërt e jetës së një applet-i. Kjo metodë thirret në momentin kur përdoruesi largohet nga
faqja web ku është hapur applet-i dhe hap një faqe tjetër. Duke pasur parasysh që përdoruesi mund të
rikthehet në faqen web, kjo metodë kryen procesin e ndërprerjes së ekzekutimit të applet-it. Njihet si
faza e ndërprerjes.
5- Public void destroy ()
Është faza e pestë e jetës së një applet-i. Kjo metodë thirret kur applet-i hiqet nga memoria.
Applet-i hiqet nga memoria kur përdoruesi mbyll dritaren e shfletuesit. Funksioni i kësaj metode është
të pastrojë hapësirën e zënë nga applet-i në kujtesë. Kjo njihet si faza e shkatërrimit. Faza e shkatërrimit,
ashtu si dhe faza e inicializimit ndodh vetëm një herë gjatë jetës së applet-it.
Vendosja e applet-it te shfletuesi
Si fillim krijojmë një dokument HTML. Brenda elementit <body> do të shtojmë applet-in tonë.
Ndryshimi midis Java-s dhe JavaScript-it
Nga emri të krijohet mendimi se mund të jenë e njëjta gjë ose që kanë të bëjnë me njëra-tjetrën. Si fillim,
Java dhe JavaScript përdorin teknika të ndryshme programimi. Java është një gjuhë programimi, ndërsa
JavaScript është një gjuhë skriptimi. JavaScript në dallim nga Java, nuk ka nevojë të përkthehet nga
kompjuteri.
127
PROGRAMIMI NË WEB
Aftësi që zhvillohen
Nxënësi/ja: prezantohet me applet-et e Java-s për të krijuar aplikacionet interaktive në web.
Kontroll njohurish
1. Duke përdorur applet-in shfaqni në web informacionet e mëposhtme:
• emër,
• mbiemër,
• klasa,
• hobet,
• lënda e preferuar.
2. Cili është ndryshimi midis gjuhës Java dhe JavaScript-it? Ndërtoni një tabelë ku të shënoni avantazhet
dhe disavantazhet e secilës.
3. Përgjigjuni pyetjeve të mëposhtme si E vërtetë ose E gabuar.
a. Applet-et janë një mjet i fuqishëm për krijimin e programeve web.
b. Public void start është faza e tretë e jetës së një applet-i.
c. Java është një gjuhë skriptimi.
d. Gjuha Java në strukturën e applet-eve përfshin sigurinë.
e. Metoda destroy thirret në momentin kur përdoruesi largohet nga faqja web që është hapur
applet-i dhe hap një faqe tjetër.
128
Kontroll njohurish 3.16PROGRAMIMI NË WEB
1. Përcaktoni nëse është e vërtetë apo e gabuar.
Pohimi E vërtetë E gabuar
JavaScript-i na ndihmon të formatojmë dhe të dizenjojmë
përmbajtjen e dokumentit HTML.
Teknika WYSIWYG është përdorur në ndërtimin e editorëve
të tekstit.
Elementi <body>...</body> shërben për ndërtimin e trupit.
Me stilizim të jashtëm do të kuptojmë ruajtjen e kodit CCS
në një dokument .css.
Kur një buton është klikuar, ngjarja quhet onclick.
Elementi <option> përdoret për të zgjedhur një ose më
shumë nga opsionet.
Një skript në server është një instruksion që përpunohet
nga serveri dhe gjeneron HTML.
Domain-i shërben për transferimin e skedarëve nga një
kompjuter në një tjetër nëpërmje rrjetit, siç është interneti.
Skripti JavaScript mund të vendoset kudo në dokumentin
HTML, duke përfshirë edhe elementet <head> dhe <body>.
Faqet statike e ndryshojnë anën grafike dhe përmbajtjen.
Href shërben për të përcaktuar vendodhjen e dokumentit.
Applet-et janë një mjet i fuqishëm për krijimin e programeve
web.
Text - fushë teksti për vendosjen e fjalëkalimit.
Metoda start () thirret pas metodës së inicializimit.
2. Shikoni në internet si ekzekutohet skedari .php. dhe shpjegoni secilin rresht të këtij skedari.
129
PROGRAMIMI NË WEB
3. Shkruani kodin në html për figurën e mëposhtme:
Zgjidhni një fjalëkalim:
Rishkruani fjalëkalimin:
Prano Pastro
4. Ekzekutoni kodin e mëposhtëm. Çfarë afishon ai?
<html>
<head>
<style type="text/css">
h1 {color: #777777;}
h2 {color: #5f80a9}
p {color: #2d653e;
</style>
</head>
<body>
<h1>
Tekst me ngjyrë gri
</h1>
<h2>
Tekst me ngjyrë blu
</h2>
<p>
Tekst me ngjyrë jeshile
</p>
</body>
</html>
130
PPRROOGGRRAAMIMI DNHËEWALEGBORITMIKA
TEMATIKA IV
PROGRAMIMI DHE ALGORITMIKA
Në këtë tematikë, nxënësi/ja:
• përdor algoritmet për zgjidhjen e problemeve;
• koncepton mënyrat e ndryshme të paraqitjes së një algoritmi;
• koncepton një problem dhe jep zgjidhjen e tij;
• percepton avantazhet e përdorimit të bllokskemave;
• koncepton algoritmin linear dhe identifikon hapat që duhen ndjekur për të ndërtuar
këtë algoritëm;
• aftësohet në përdorimin e logjikës për zgjidhjen e problemeve;
• ndërton bllokskemat e degëzuara dhe pseudokodet e tyre për zgjidhjen e problemeve;
• identifikon algoritmet ciklike;
• prezantohet me gjuhën e programimit Scratch dhe koncepton kur përdoret ajo;
• identifikon pjesët përbërëse të Scratch-it;
• koncepton komunikimin përdorues - kompjuter;
• përcakton ndryshimet midis gjeneratave;
• identifikon avantazhet e përdorimit të gjuhëve të programimit;
• evidenton fazat e krijimit të një programi dhe vlerëson rëndësinë e krijimit të tij;
• koncepton rëndësinë që ka secila fazë dhe radhën e tyre;
• koncepton gjuhën C si gjuhë programimi, analizon sintaksën dhe strukturën e saj;
• përvetëson procesin e kompilimit dhe të ekzekutimit të programit në gjuhën C;
• koncepton variablat dhe konstantet;
• deklaron dhe inicializon variablat dhe konstantet;
• përcakton tipat e ndryshëm të të dhënave;
• analizon operatorë të ndryshëm në gjuhën C;
• përcakton se kur përdoret secili prej operatorëve dhe vlerëson rëndësinë që ka
prioriteti i secilit operator;
• prezantohet me sintaksën e marrjes së të dhënave nga përdoruesi;
• evidenton mënyrat e ndryshme të marrjes së të dhënave nga përdoruesi;
• koncepton sintaksën e afishimit të rezultatit përfundimtar te përdoruesi;
• vlerëson rëndësinë e strukturave të kontrollit dhe identifikon llojet e ndryshme të tyre;
• koncepton sintaksën e strukturës së kontrollit if;
• koncepton rëndësinë e strukturave ciklike dhe njihet me sintaksën e ciklit for;
• prezantohet me sintaksën e strukturave ciklike while dhe do while;
• ruan informacionin në tabela njëdimensionale;
• deklaron tabelën njëdimensionale;
• akseson vlerat e tabelës njëdimensionale.
131
4.1PROGRAMIMI DHE ALGORITMIKA
Hyrje në problemet dhe algoritmet.
Paraqitja e algoritmeve
Nxënësi/ja: Situatë
Kërkohet t’i jepet zgjidhje problemit që afishon nëse një
• përdor algoritmet për zgjidhjen numër i dhënë është pozitiv apo negativ. Fillimisht duhet
e problemeve; konceptuar zgjidhja e tij dhe më pas të jepet ajo. Cilët janë
hapat që duhet të ndiqen për të zgjidhur këtë problem?
• koncepton mënyrat e ndryshme
të paraqitjes së një algoritmi;
• koncepton një problem dhe jep
zgjidhjen e tij.
Fjalët kyç: Në shumë raste, për zgjidhjen e ushtrimeve matematikore
bllokskemë, algoritëm, pseudokod. shpenzohet shumë kohë. Ndërtimi i algoritmeve për zgjidhjen
e këtyre apo dhe problematikave të tjera do të mund të jepte
ndihmë në marrjen e rezultatit më shpejt.
Si fillim, konceptet bazë që duhet të dihen janë të kuptuarit e:
problemit, algoritmit, programit dhe kodimit.
Çfarë është një problem?
Problemet janë të ndryshme në varësi të profesioneve dhe,
sigurisht, kërkojnë zgjidhje specifike. Për shembull, një mjeke
është e interesuar për gjetjen shpejt dhe në mënyrë të saktë
të diagnozës së një sëmundjeje; një inxhinier ndërtimi për
projektimin e ndërtesave etj.
Për zgjidhje të një problemi në fushën e informatikës i referohemi
shprehjes së zgjidhjes me anë të koncepteve të thjeshta,
veprimeve dhe kodit për të marrë disa rezultate.
Kompjuteri është një mjet i dobishëm për të zgjidhur shumë
probleme. Kompjuteri i zgjidh problemet me anën e programeve
të cilat përbëhen nga një bashkësi instruksionesh.
Që kompjuteri të zgjidhë një problem, do të duhet të shkruhet
një program. Ky program do t’i tregojë kompjuterit hap pas hapi
se çfarë duhet të bëjë. Kompjuteri e ekzekuton programin duke
ndjekur hapat njëri pas tjetrit. Bashkësia e hapave që duhen për
të zgjidhur një problem, do të quhet algoritëm.
Çfarë është një algoritëm?
Algoritmi është një bashkësi e fundme, e përcaktuar dhe e
renditur hapash, të nevojshëm për zgjidhjen e një problemi.
Termi algoritëm konsiderohet të ketë ardhur nga emri i dijetarit,
132
PROGRAMIMI DHE ALGORITMIKA
matematikanit arab Abdallāh Muḥammad ibn Mūsā al-Khwārizmī, i cili jetoi në vitet 780-850 në Bagdad.
Al-Khwārizmī i përkthyer në latinisht do të thotë Algaurizin ose Algoritm.
Në qoftë se do të jemi në gjendje që me anë të një algoritmi t’i japim zgjidhje një problemi, atëherë ai
problem mund të zgjidhet edhe duke përdorur gjuhë programimi.
Kodimi është procesi i të shkruarit të një programi në një gjuhë programimi.
Një algoritëm mund të paraqitet me dy mënyra të ndryshme: me paraqitje analitike dhe me paraqitje
grafike.
Paraqitja analitike
Paraqitja analitike është një gjuhë e ngjashme me gjuhën tonë natyrore, e cila shërben për të përshkruar
logjikën e një algoritmi. Kjo mënyrë paraqitjeje quhet pseudokod.
Pseudokodi përbëhet nga dy fjalë: pseudo dhe kod, ku pseudo ka kuptimin e fjalës imitim, ndërsa fjala kod
i referohet komandave të një gjuhe programimi.
Qëllimi i përdorimit të pseudokodit është që të fokusohemi në logjikën e algoritmit pa u shqetësuar për
sintaksën e gjuhës programuese në të cilën do të zhvillohet më vonë.
Rregullat e shkrimit të programeve në pseudokod:
1. Çdo instruksion në pseudokod duhet të shkruhet në një rresht.
2. Fjalët kyç shkruhen me shkronja kapitale.
3. Pseudokodi duhet të shkruhet në mënyrë të tillë që kalimi në një gjuhë programimi të jetë i lehtë.
Shembull:
Për të ilustruar paraqitjen analitike ose pseudokodin do të marrim një shembull për gjetjen e sipërfaqes së
një katrori. Dimë që katrori i ka brinjët e barabarta dhe për të gjetur sipërfaqen duhet të dimë gjatësinë e
brinjës, vlerën e saj e ruajmë te variabli B. Sipërfaqja e katrorit është gjatësia e brinjës në katror, pra B * B,
të cilën e ruajmë te variabli S. Pseudokodi
Zgjidhje:
Algoritëm Sipërfaqja
FILLIM
Lexo B;
S = B * B;
Afisho S;
FUND
Paraqitja grafike
Paraqitja grafike është paraqitja e hapave në të cilët kalon një algoritëm nëpërmjet figurave gjeometrike.
Kjo mënyrë paraqitjeje quhet bllokskemë. Në tabelën e mëposhtme janë simbolet kryesore që përdoren për
krijimin e algoritmeve nëpërmjet bllokskemave.
133
PROGRAMIMI DHE ALGORITMIKA
Simboli Përshkrimi
Tregon fillimin dhe fundin e algoritmit.
Tregon leximin ose afishimin e të dhënave.
Tregon marrjen e një vendimi.
Krijohet kushti dhe degëzimi i veprimeve.
Kryen përpunimin e të dhënave.
Lidh hapat e algoritmit.
Tregon radhën e kryerjes së veprimeve të tij.
Shembull:
Duke përdorur bllokskemën, ndërtoni një algoritëm që gjen dhe afishon sipërfaqen e një trekëndëshi kur
njihen baza dhe lartësia e tij.
Fillim
A dhe B janë dy variabla, ku tek A Lexo A, B
përcaktojmë bazën dhe te B lartësinë.
S është variabli ku do të ruajmë S = (A * B) / 2
sipërfaqen e trekëndëshit.
Këtu afishojmë S. Afisho S
Fund
Aftësi që zhvillohen
Nxënësi/ja: aftësohet në njohjen e problemit dhe ndërtimin e algoritmeve për zgjidhjen e tyre.
Kontroll njohurish
1. Çfarë kuptoni me problem? Po me zgjidhje të tij?
2. Çfarë kuptoni me algoritëm? Po me kodim?
3. Cilat janë mënyrat që mund të paraqitet një algoritëm?
4. Çfarë kuptoni me pseudokod?
5. Cilat janë simbolet që përdoren në bllokskema?
6. Kërkoni në internet për avantazhet dhe disavantazhet e paraqitjes së algoritmit me anë
të bllokskemave.
134
Algoritmet lineare 4.2PROGRAMIMI DHE ALGORITMIKA
Nxënësi/ja: Situatë
• koncepton algoritmin linear; Kërkohet të ndërtohet një algoritëm, që afishon shumën e
• identifikon hapat që duhen dy numrave që jepen nga përdoruesi. Cilët janë hapat për ta
ndërtuar këtë algoritëm? Cili është lloji i algoritmit që duhet
ndjekur për të ndërtuar një të ndërtohet në këtë rast?
algoritëm linear.
Fjalët kyç: Rikujtojmë që algoritmi përmban të gjitha veprimet që duhet
algoritëm linear. të kryhen për zgjidhjen e një problemi. Algoritmet në bazë të
strukturës së tyre dhe hapave që ndjekin për zgjidhjen e një
Algoritmi problemi ndahen në:
linear
1. algoritme lineare;
2. algoritme të degëzuara;
3. algoritme ciklike.
Zgjedhja e algoritmit që do të përdoret për zgjidhjen e një
problemi do të varet nga natyra e problemit.
Algoritmi linear
Algoritmi linear është ai lloj algoritmi ku veprimet janë të
renditura njëri pas tjetrit dhe secili prej tyre kryhet vetëm një
herë, dhe pasi është kryer veprimi paraardhës.
Bllokskema Pseudokodi
komanda 1 FILLIM
komanda 2 komanda 1;
komanda 2;
komanda n ...
komanda n;
FUND
135
PROGRAMIMI DHE ALGORITMIKA
Shembull:
Për të ilustruar se si funksionon algoritmi linear, do të zhvillojmë një shembull, ku do të gjejmë shumën e
dy numrave.
Si do të veprojmë? Në fillim do të lexojmë dy numra a dhe b. Shumën e tyre do ta ruajmë te variabli s.
Dhe më pas do të afishojmë vlerën që ka ky variabël. Si funksionon algoritmi linear? Hapat e algoritmit do
të trajtohen njëri pas tjetrit.
Zgjidhje: Bllokskema Pseudokodi
Fillim Alogritëm Shuma
Lexo a, b FILLIM
s=a+b Lexo a, b;
Afisho s s = a + b;
Afisho s;
FUND
Fund
Aftësi që zhvillohen
Nxënësi/ja: aftësohet në zgjidhjen e problemeve duke përdorur algoritmet lineare.
Kontroll njohurish
1. Sa lloje algoritmesh kemi?
2. Çfarë është një algoritëm linear dhe kur përdoret ai?
3. Të ndërtohet një algoritëm në bllokskemë që merr notat e dy lëndëve të një nxënësi dhe afishon
mesataren e tyre.
4. Të ndërtohet një algoritëm në bllokskemë që lexon temperaturën në gradë celsius (°C) dhe e afishon
temperaturën në gradë Kelvin (K). Dimë që diferenca midis tyre është 273.15, C = K – 273.15.
5. Jepet funksioni Y = X2- 3X + 7. Për një vlerë të dhënë të X-it, gjeni vlerën e funksionit në atë pikë duke
ndërtuar bllokskemën dhe pseudokodin përkatës.
136
Algoritmet e degëzuara 4.3PROGRAMIMI DHE ALGORITMIKA
Nxënësi/ja: Situatë
• aftësohet në përdorimin e logjikës Në zgjidhjen e problemeve të ndryshme
për zgjidhjen e problemeve; hasim kushte të ndryshme, si për
Ku duhet
• kupton zgjidhjen e problemeve që
kanë kushte; shembull: “a është numri më i madh se të shkoj tani?
5; a plotëpjesëtohet numri me 2; a është shuma pozitive?”. Si
• ndërton bllokskemat e degëzuara do të ndërtohet bllokskema në këtë rast? Si do të jetë rrjedha
dhe pseudokodet e tyre; e shigjetave?
Algoritmi i degëzuar
Fjalët kyç: Për disa probleme, zgjidhja e të cilave kërkon përdorimin
algoritëm i degëzuar, kusht, e kushteve logjike, struktura lineare e algoritmeve është e
bllokskemë, pseudokod. pamjaftueshme. Si shembull mund të marrim rastin në qoftë
se një person ka të drejtë të votojë ose jo. Për të ndërtuar këtë
algoritëm do të duhet të ndërtojmë një kusht logjik. Ky kusht
logjik mund të jetë i vërtetë ose i gabuar. Për secilën nga këto raste do të kryejmë veprimet përkatëse. Ky tip
algoritmi njihet ndryshe edhe si algoritëm i kushtëzuar.
Në tabelat e mëposhtme japim një ilustrim të algoritmit të degëzuar.
Paraqitja e degëzuar funksionon në këtë mënyrë:
Kur kushti logjik është i vërtetë, atëherë ekzekutohet Listë instruksionesh 1 dhe Listë instruksionesh 2 nuk
merret parasysh. Në të kundërt, ekzekutohet Listë instruksionesh 2 dhe Listë instruksionesh 1 nuk merret
parasysh. Pas ekzekutimit të njërës prej komandave,
Bllokskema Pseudokodi kontrolli i ekzekutimit kalon te veprimi që është
jashtë kushtit. Pra, tek algoritmet me degëzim në
po jo NQS Kushti logjik ATËHERË varësi të kushtit logjik do të vazhdohet në njërën
Kushti logjik Listë instruksionesh 1; nga degët.
Listë Listë PËRNDRYSHE Shembull:
instruksionesh 1 instruksionesh 2 Listë instruksionesh 2; Për të ilustruar se si funksionon, do të zhvillojmë
shembullin në qoftë se një person ka të drejtë vote
FUND NQS
ose jo.
Algoriëm i degëzuar
Si do të veprojmë? Dimë se një person ka të drejtë vote në qoftë se ka mbushur moshën 18 vjeç. Në fillim do
të lexojmë moshën e personit dhe do ta ruajmë te mosha. Më pas do të pyesim në qoftë se ka të drejtë vote ose jo.
Si funksionon kushti? Kushti logjik do të ndërtohet duke u mbështetur te mosha. Në qoftë se mosha është
e barabartë ose më e madhe se 18, atëherë do të afishojmë që ka të drejtë vote. Në rast të kundërt, do të
afishojmë që nuk ka të drejtë vote.
137
PROGRAMIMI DHE ALGORITMIKA
Zgjidhje: Bllokskema Pseudokodi
po Fillim FILLIM
Lexo MOSHA;
Lexo MOSHA jo NQS MOSHA >= 18 ATËHERË
Afisho “Keni të drejtë të votoni”;
MOSHA >= 18 PËRNDRYSHE
Afisho “Nuk keni të drejtë të votoni”;
Afisho “Keni të Afisho “Nuk keni të FUND NQS
drejtë të votoni” drejtë të votoni”
FUND
Fund
Shembull: Të kontrollohet në qoftë se një numër është çift ose tek.
Në këtë shembull do të përdorim modulin. Simboli i modulit është %. Me modul do të kuptojmë mbetjen
që del nga pjesëtimi i dy numrave të plotë, për shembull, 7 % 2 = 1, sepse 7 / 2 = 3, mbetja 1. Një numër në
modul 2, në qoftë se jep 0, është numër çift, në rast të kundërt është numër tek.
Zgjidhje: Bllokskema Pseudokodi
Fillim FILLIM
Lexo Nr;
Lexo Nr NQS Nr % 2 == 0 ATËHERË
po jo Afisho “Numër çift”;
Nr % 2 == 0
Afisho “Numër çift” Afisho “Numër tek” PËRNDRYSHE
Afisho “Numër çift”;
FUND NQS
Fund FUND
Aftësi që zhvillohen
Nxënësi/ja: aftësohet në ndërtimin e pseudokodeve dhe algoritmeve të degëzuara.
Kontroll njohurish
1. Çfarë kuptoni me algoritëm të degëzuar?
2. Jepet një numër natyror x. Ndërtoni bllokskemën dhe pseudokodin që afishon vlerën absolute të tij.
3. Jepet një numër natyror x. Ndërtoni bllokskemën dhe pseudokodin që gjen inversin e x-it.
{4. Jepet funksioni: për x > 5
y= x2 + 3
për x <= 5
x - 8
Llogarisni vlerën e funksionit y në pikën e dhënë x, duke ndërtuar bllokskemën dhe pseudokodin përkatës.
138
Punë praktike 4.4PROGRAMIMI DHE ALGORITMIKA
Ndërtimi i algoritmeve lineare dhe të degëzuara
1. Të ndërtohet bllokskema e një algoritmi që rendit dy numra sipas rendit zbritës.
Zgjidhje:
Në këtë rast duhet të përcaktojmë cila prej variablave a dhe b ka vlerë më të madhe apo më të vogël.
Që të ndërtojmë një bllokskemë të tillë, do të marrim dy variabla ndihmëse min dhe max, të cilave do
t’u japim vlerën a ose b në varësi të rastit. Në rast se a < b, atëherë variabli min merr vlerën a, ndërsa
variabli max merr vlerën b. Në rastet kur a = b ose kur a> b, variabli min merr vlerën b, ndërsa variabli
max merr vlerën a.
Fillim
Lexo a, b
jo po
a<b
min = b min = a
max = a max = b
Afisho min, max
Fund
Ndërtoni pseudokodin për bllokskemën e mësipërme.
2. Ndërtoni një algoritëm me anë të bllokskemës që llogarit perimetrin dhe sipërfaqen e një drejtkëndëshi
kur jepen dy brinjët e tij a dhe b.
3. Jepen dy numra a dhe b. Ndërtoni algoritmin me bllokskemë dhe pseudokod që afishon më të madhin
prej tyre.
4. Jepen dy numra a dhe b. Ndërtoni algoritmin me bllokskemë dhe pseudokod që shkëmben vlerat e tyre,
p.sh.: nëse a = 2, b = 5, atëherë pas algoritmit do të kemi a = 5 dhe b = 2.
5. Ndërtoni bllokskemën dhe pseudokodin përkatës, që lexon një numër x. Nëse ai është më i madh ose
i barabartë me zero, afishon mesazhin që është numër pozitiv, përndryshe afishon mesazhin që është
numër negativ.
139
4.5PROGRAMIMI DHE ALGORITMIKA Algoritmet ciklike
Nxënësi/ja: Situatë
Kërkohet të ndërtohet algoritmi për gjetjen e shumës
• identifikon algoritmet ciklike; së numrave nga 1 deri në 100. Si do të ndërtohet
• përcakton kur veprimet pseudokodi dhe bllokskema në këtë rast? Si mund të
përsëriten një ose disa veprime shumë herë?
përsëriten;
• ndërton bllokskemën dhe
pseudokodin.
Fjalët kyç: Algoritmet ciklike nënkuptojnë që një grup komandash do të
algoritëm ciklik. përsëriten disa herë, derisa kushti logjik të jetë i vërtetë. Në
tabelat e mëposhtme japim një ilustrim të algoritmit ciklik.
Bllokskema Pseudokodi
Parametrat e ciklit BËJ
Trupi i ciklit FILLIM
Trupi i ciklit;
po Kushti logjik FUND
jo
GJERSA kushti logjik;
Bllokskema
Pseudokodi
PËRSËRIT Parametrat e ciklit GJERSA kusht logjik BËJ
jo
Kushti logjik
FILLIM
po
Trupi i ciklit;
Trupi i ciklit
FUND
Në të dyja figurat, parametrat e ciklit do të duhet të deklarohen përpara trupit të ciklit dhe kushtit logjik.
Në figurën e parë, në fillim do të trajtohet trupi i ciklit dhe më pas kontrollohet kushti logjik. Në figurën e
dytë kontrollohet kushti logjik dhe më pas ekzekutohet trupi i ciklit. Nëse kushti logjik është i gabuar që në
fillim, në rastin e parë trupi i ciklit do të trajtohet të paktën një herë, ndërsa në të dytin, asnjëherë.
Në të dyja rastet, trupi i ciklit do të trajtohet aq herë, sa kushti logjik të jetë i vërtetë. Në rastin kur kushti
logjik është i gabuar, atëherë dalim nga cikli dhe trajtohen veprimet që janë në vijim të tij. Në rastin kur
kushti logjik është gjithmonë i vërtetë, atëherë kemi të bëjmë me cikël të pafundëm.
140
PROGRAMIMI DHE ALGORITMIKA
Shembull:
Për ta ilustruar se si funksionon një algoritëm ciklik, do të trajtojmë shembullin e shumës së numrave nga
1 deri në 100.
Si do të veprojmë? Në fillim do të mbledhim 1 + 2, shumës së tyre do t’i shtojmë 3 dhe kështu me radhë,
derisa të shkojmë te numri 100. Pra, kjo është një procedurë që do të përsëritet 100 herë.
Ku do ta ruajmë shumën? Sa herë që do të kemi veprime për gjetjen e shumës, do të duhet të përdorim një
variabël ndihmës. Në këtë shembull do të marrim një variabël: shuma, i cili do të shërbejë për ruajtjen e
shumës. Ky variabël do të ketë një vlerë fillestare 0.
Si funksionon cikli? Parametrat e ciklit do të ndihmojnë në ndërtimin e kushtit logjik. Në fillim do të marrim
një variabël i, me vlerë fillestare 1, sepse do të gjejmë shumën e numrave duke filluar nga 1. Vlera fillestare
e i-së varet nga problemi që do të trajtoni.
Zgjidhje:
Bllokskema Pseudokodi
Fillim FILLIM
shuma = 0 shuma = 0;
i = 1;
i = 1 BËJ
shuma = shuma + i FILLIM
shuma = shuma +
i=i+1 i;
po i <= 100 i=i+1
jo
FUND
Afisho shuma
GJERSA i <= 100;
Fund
Afisho shuma;
FUND
Aftësi që zhvillohen
Nxënësi/ja: përvetëson ndërtimin e bllokskemave dhe pseudokodeve që kërkojnë përsëritjen e
veprimeve disa herë.
Kontroll njohurish
1. Çfarë kuptoni me algoritëm ciklik? Kur përdoret ai?
2. Ndërtoni bllokskemën dhe pseudokodin përkatës që gjejnë prodhimin e 10 numrave të parë natyrorë
dhe e afishojnë atë.
3. Ndërtoni bllokskemën dhe pseudokodin përkatës që gjen shumën e numrave tek jo më të mëdhenj se 100.
4. Ndërtoni bllokskemën dhe pseudokodin përkatës në të cilin lexohen n numra, pastaj llogaritni shumën
e numrave pozitivë dhe shumën e numrave negativë.
141
4.6PROGRAMIMI DHE ALGORITMIKA Punë praktike
Ndërtimi i algoritmeve ciklike
1. Çfarë do të afishojë bllokskema e parë dhe e dytë, kur dihet që variabli A do të marrë vlerën 10 dhe variabli B
do të marrë vlerën 5? Tregoni hap pas hapi si do të ndryshojnë vlerat e variablave S, P, A dhe B.
a. Fillim po
Lexo A S=S+A
jo S=0 A=A-1
Afisho S A>5
Fund
Fillim
b. Lexo B
142 P=1
P=P*B
B=B-1
B>4 po
jo
Afisho P
Fund
PROGRAMIMI DHE ALGORITMIKA
2. Ndërtoni algoritmin në pseudokod që afishon 5 herë një numër të dhënë a.
3. Shkruani algoritmin përkatës për të llogaritur vlerat e funksionit:
y = 2x + 5
për vlera të x-it midis a dhe b, duke e ndryshuar atë me hapin h.
Zgjidhje:
algoritëm llogarit_funksion
FILLIM Lexo, a, b, h;
x = a;
GJERSA x ≤ b BËJ
FILLIM
y = 2 * x + 5;
Afisho y;
x = x + h;
FUND FUND
4. Shkruani algoritmin përkatës për të llogaritur vlerat e funksionit:
y = 3x2 - 4
për vlera të x-it midis a dhe b, duke e ndryshuar atë me hapin h.
5. Jepet pseudokodi i mëposhtëm. Çfarë realizon ai? Ndërtoni bllokskemën përkatëse të tij.
Algoritëm Shuma
FILLIM
Lexo n;
s = 0;
i = 1;
GJERSA i ≤ n BËJ
FILLIM
lexo a;
s = s + a;
i = i + 1;
FUND
Afisho s;
FUND
6. Shkruani algoritmin dhe ndërtoni bllokskemën përkatëse për të gjetur shumën N të numrave të parë
natyrorë për secilën nga seritë e mëposhtme, ku N lexohet nga përdoruesi.
a. S = 1 + 2 + 3 + …
b. S = 2 + 4 + 6 + …
c. S = 1 + 4 + 7 + …
143
4.7PROGRAMIMI DHE ALGORITMIKA Scratch
Nxënësi/ja: Situatë
• prezantohet me Scratch-in; Si mund të krijojmë lehtësisht
• identifikon pjesët përbërëse të lojëra dhe animacione të ndryshme dhe t’i
shpërndajmë ato në internet, duke pasur pak
Scratch-it; njohuri në programim?
• koncepton kur përdoret Scratch-i.
Çfarë është Scratch-i?
Fjalët kyç:
Scratch-i është një gjuhë programimi, e cila të jep mundësinë
Scratch, animacione. e krijimit të historive interaktive, animacioneve dhe lojërave
të ndryshme. Scratch-i ofron mundësinë e shpërndarjes së
projekteve të zhvilluara në të gjithë botën. Kur nxënësit krijojnë
animacione me Scratch, ata mësojnë të mendojnë në mënyrë
kreative, punojnë në mënyrë bashkëpunuese dhe arsyetojnë në
mënyrë sistematike. Scratch-i është krijuar nga grupi i kërkimit
në Laboratorin e MIT Media.
144
PROGRAMIMI DHE ALGORITMIKA
Kush e përdor Scratch-in?
Scratch-i është dizenjuar veçanërisht
për moshat 8 deri në 16 vjeç, por
përdoret nga njerëzit e të gjitha
moshave në të gjitha disiplinat, si:
matematikë, TIK etj. Miliona njerëz në
të gjithë botën krijojnë projekte në
Scratch. Gjatë përdorimit të Scratch-it
mësohen strategji të rëndësishme për
zgjidhjen e problemeve, dizenjimin
e projekteve dhe zhvillohen ide
komunikimi. Scratch-i përdoret në më
shumë se 150 shtete të ndryshme dhe
është e disponueshme në më shumë se 40 gjuhë.
Si mund të përdoret Scratch-i?
Scratch-i mund të aksesohet online nëpërmjet adresës: https://scratch.mit.edu/. Në mënyrë që projektin
që kemi krijuar ta shpërndajmë që të mund ta shikojnë të gjithë përdoruesit e Scratch-it, fillimisht duhet të
krijojmë një llogari duke përdorur menunë Join Scratch, si në figurën e mëposhtme. Për të krijuar llogarinë
duhet të japim informacione, si: emri i përdoruesit, fjalëkalimi, datëlindja, gjinia, shteti dhe adresa e e-mailit.
Hapat e ndjekur në këtë rast mund t’i gjeni në CD-në bashkëngjitur këtij libri. Scratch-i mund të përdoret
për të punuar në projekte të ndryshme, pa pasur nevojën e një lidhjeje në internet, duke instaluar editorin
Scratch 2.0 në linkun: https://scratch.mit.edu/scratch2download/. Ky version është i përshtatshëm në Mac,
Windows dhe disa versione të sistemit të operimit Linux.
Linket e mësipërme ndodhen në CD-në bashkëngjitur.
145
PROGRAMIMI DHE ALGORITMIKA
Struktura e një projekti në Scratch
Fillimisht do të shpjegojmë strukturën e një projekti në Scratch. Janë dy lloje objektesh në Scratch:
Sprite-et dhe imazhi background, ku vendosen Sprite-et. Një sprite është një objekt. Për shembull, macja
me ngjyrë portokalli është një Sprite. Në figurën më poshtë është krijuar një projekt, i cili quhet Shembull
nga përdoruesi TIK10.
• Pika 1 në figurën e mëposhtme tregon menunë e Scratch-it, e cila shërben për të ruajtur projektet, për
të fshirë ose dublikuar Sprite-et, për të parë projekte të ndryshme etj.
• Në pikën 2, me klikimin e rrethit të kuq, do të ndalohen të gjitha veprimet që po luhen deri më tani dhe
me klikimin e flamurit jeshil do të ekzekutohen të gjitha veprimet që kanë bllokun .
• Në pikën 3 është zona në të cilën mund të shikohen të gjitha Sprite-et. Te zona New Sprite
mund të zgjedhim të shtojmë Sprite nga libraria në Scratch, vizatojmë Sprite të reja, ngarkojmë Sprite nga
kompjuteri ose të ngarkojmë fotografi të realizuara nga kamera e kompjuterit.
• Në pikën 4 kemi mundësi të ndryshojmë mjedisin ku do të shfaqen Sprite-et, duke zgjedhur imazhet në
librarinë që na ofron Scratch-i ose duke vizatuar një backgroud të ri. Mjedisi në Scratch quhet Backdrop.
• Në pikën 5 mund të zgjedhim kategoritë që do të përdoren si Scripts (skripte), Costums (kostume)
ose Sound (muzika). Çdo objekti në Scratch i bashkëngjitet një skript, i cili tregon si do të sillen ato
në kushte të caktuara. Çdo objekt ka kostume të ndryshme. Këto kostume ndryshojnë pamjen e një
objekti dhe mund të përdoren për të ndryshuar emocionet. Ndërsa te Sounds mund
të zgjedhim muzikën që do të vendosim në projekt.
• Pika 6 përdoret për të afishuar blloqet e skripteve që po ndërtojmë.
• Në pikën 7 mund ta shpërndajmë projektin online me të gjithë përdoruesit e tjerë.
1
2 57
36
4
Struktura e një projekti në Scratch
146
PROGRAMIMI DHE ALGORITMIKA
Si të programojmë në Scratch?
Scratch-i përdor blloqet për të ndërtuar skripte. Për shembull, skripti i mëposhtëm nënkupton që me
klikimin e një Sprite-i, Sprite-i afishon Hello! për dy sekonda.
Blloqet në Scratch kanë ngjyra të ndryshme, ndërsa blloqet në të njëjtën kategori kanë të njëjtën ngjyrë.
Ato janë të organizuara në 10 kategori të ndryshme, në mënyrë që të gjenden më lehtë.
• Blloku Motion përmban komanda të cilat kontrollojnë lëvizjen e Sprite-eve në një sistem koordinativ (x,y).
Ky bllok nuk mund të përdoret për background-in ku afishohen Sprite-et, sepse ai nuk mund të lëvizë.
Blloku mund të lëvizë objektin Sprite disa hapa nga pozicioni që është. Një hap është i barabartë me 1
piksel. Për shembull, për të lëvizur Sprite 10 piksela përpara do të përdorej blloku .
Numrin 10 mund ta ndryshojmë me numra të tjerë pozitivë, nëse do të lëvizim përpara, ose me numër
negativ për t’u kthyer pas.
• Blloku Looks përmban komanda të cilat ndikojnë në paraqitjen e Sprite-eve ose të zonës ku shfaqen Sprite-
et dhe lejojnë të shtojmë mesazhe të ndryshme, pa pasur nevojën e shtimit të objekteve shkronja. Ato
mund të përdorin efekte grafike në objekte ose mund të ndryshojnë ngjyrën, si për shembull:
Gjithashtu, në këtë kategori mund të ndryshojmë kostumet që ka një Sprite.
• Blloku Sound përmban komanda me të cilat mund të vendosim efekte muzikore në objektet që ne krijojmë, si
dhe të krijojmë muzikë për animacione. Gjithashtu mund të përdoret blloku Drum për të ndërtuar bitin
që ne dëshirojmë.
• Blloku Pen përdoret për të vizatuar në skenën ku do të shfaqen Sprite-et. Ky bllok përdoret për të krijuar
programe grafike ose për të krijuar art interaktiv.
• Blloqet Data ruajnë të dhëna. Të dhënat mund të jenë numra ose tekste. Nëse duam të ruajmë disa të
dhëna në të njëjtën kohë, si për shembull emrat e ekipeve më të njohura, duhet të përdoren listat.
• Blloku Events jep mundësinë e krijimit të ngjarjeve, si për shembull kur klikohet një Sprite etj. Shumica e
tyre përkon me fillimin e një skripti. Një bllok Eventi nevojitet në çdo skript.
• Blloku Control përmban komandat e fillimit, ndalimit dhe përsëritjes së skripteve.
• Blloku Sensing përdoret për të marrë informacion nga objektet dhe më pas përdoret ky informacion për të
marrë vendime, si për shembull: kur një objekt prek një objekt tjetër apo kur shtypim një tast të caktuar.
• Blloku Operators përmban të gjithë operatorët matematikorë të thjeshtë dhe kompleks.
• More Blocks ofron mundësinë e krijimit të blloqeve me skripte të ndryshme.
Në Scratch është shumë e rëndësishme radhitja e blloqeve. Vendosja e tyre tregon radhën e ekzekutimit të
blloqeve.
Aftësi që zhvillohen
Nxënësi/ja: prezantohet me strukturën dhe blloqet kryesore për ndërtimin e skripteve në Scratch.
Kontroll njohurish
1. Çfarë është Scratch-i dhe përse përdoret ai?
2. Cilët janë pjesët përbërëse të strukturës së Scratch?
3. Si programohet në Scratch dhe cilat janë blloqet kryesore?
147
4.8PROGRAMIMI DHE ALGORITMIKA Projekt
Krijimi i një objekti që kërcen në Scratch
Qëllimi: Krijimi i një maceje që kërcen gjatë kohës që luhet muzikë, duke përdorur komandat në Scratch.
Kërkohet të krijohet një projekt në Scratch, i cili përbëhet nga një mace që kërcen në një skenë pasi afishon për 3
sekonda mesazhin Përshëndetje. Kështu, macja do të lëvizë para-mbrapa, gjatë kohës që luhet muzikë në sfond.
Zhvillimi i punës praktike:
Scratch-in mund ta aksesojmë online ose mund ta hapim në kompjuterin tonë, nëse e kemi instaluar. Në
shembullin më poshtë do të ndërtohet një projekt online. Në bllokun e menuve klikojmë Create dhe menjëherë
do të hapet mjedisi i punës.
• Lëvizim Sprite-in mace 10
piksela përpara nëpërmjet
komandës Move 10 steps.
Për këtë zhvendosim
bllokun Move në zonën e
shkrimit të skripteve.
• Për të vendosur muzikë në projekt, Scratch, blloku Motion
mund të zhvendosim bllokun Play Scratch, blloku Sound
Drum () for () Beats, i cili ndodhet në
bllokun Sound. Ky bllok do të luajë një
instrument të caktuar për një kohë të
caktuar në sekonda, duke përdorur
bateri elektronike digjitale. Ky bllok më
parë quhej Play Drum () for () Secs, por
emërtimi i tij është ndryshuar, sepse
gjatësia e një biti mund të ndryshohet
në bllokun Set Tempo by () bpm. Për të
dëgjuar muzikën, klikojmë në bllokun
Play Drum 1 for 0.25 Beats dhe e
vendosim poshtë bllokut Move.
148
• Megjithëse blloku përdor fjalën drum (bateri), ky PROGRAMIMI DHE ALGORITMIKA
bllok ofron instrumente të ndryshme si në figurat 149
më poshtë. Ju mund të zgjidhni instrumente të
ndryshme nëpërmjet klikimit të numrit 1.
• Për të filluar kërcimin, duhet të shtojmë një tjetër
bllok Move, në mënyrë që macja të lëvizë mbrapa
10 piksela, pasi ka lëvizuar para. Për këtë klikojmë
te blloku Move numrin 10 dhe shtypim - 10. Më
pas shtojmë një tjetër muzikë. Në mënyrë që të
shikojmë çfarë kemi krijuar deri më tani, duhet të
klikojmë te njëri nga blloqet në zonën e skriptit.
• Që macja ta përsërisë këtë veprim disa herë,
do të përdorim bllokun Repeat. Të gjitha blloqet
e krijuara do të vendosen brenda këtij blloku, në
mënyrë që të përsëriten disa herë. Blloku Repeat
ndodhet te menuja Control. Në këtë shembull, të
gjitha blloqet e krijuara deri më tani do të përsëriten
10 herë. Ky bllok është mjaft i përdorshëm, sepse
zvogëlon kohën e shkrimit të blloqeve disa herë.
• Në mënyrë që të afishojmë tekstin Përshëndetje
për 5 sekonda, duhet të shkojmë te blloku Looks
dhe të vendosim sipër blloqeve të krijuara bllokun:
say Hello for 2 secs!. Që të shfaqim Përshëndetje
krijojmë te Hello dhe shtypim Përshëndetje.
Gjithashtu mund të ndryshojmë kohën e shfaqjes
së mesazhit në 5 sekonda.
PROGRAMIMI DHE ALGORITMIKA
• Për të vendosur background-in për mjedisin ku do të kërcejë macja, klikojmë backdrop dhe shkojmë në
seksionin Music and Dance, duke qenë se kërkojmë që macen ta vendosim në një skenë. Nga kjo librari
klikojmë në fotografinë e emërtuar spotlight-stage.
• Pas përzgjedhjes së skenës, do të afishohet figura e mëposhtme. Macen mund ta zhvendosim kudo në
skenë nëpërmjet klikimit të saj dhe klikimit përsëri për të përcaktuar vendodhjen e re. Në mënyrë që macja
të fillojë të shfaqë mesazhin për 3 sekonda dhe më pas të kërcejë duke lëvizuar 10 piksela para dhe mbrapa,
duhet të klikojmë mbi skriptet e krijuara.
• Projektin e krijuar online mund ta shkarkojmë në kompjuterin tonë nëpërmjet komandës File/Upload
to my Computer. Gjithashtu, këtë projekt mund ta shpërndajmë online, në mënyrë që ta shikojnë të gjithë
përdoruesit e Scratch-it nëpërmjet komandës Share.
Detyrë:
Krijoni projektin e mësipërm dhe më pas shtoni një flamur të gjelbër. Ndryshoni skriptin në mënyrë të tillë
që me klikimin e flamurit, macja të fillojë të kërcejë. Ruani projektin e krijuar me emrin: Projekt 1.
150
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
TIK klasa 10
Discover the best professional documents and content resources in AnyFlip Document Base.
Search