Acest document a fost realizat cu asistena financiar a Comunitii Europene.

Prerile exprimate aici

reprezint opinia Universitii 1 Decembrie 1918 Alba Iulia i n concluzie, nu pot fi considerate n nici
un caz punctul de vedere oficial al Comunitii Europene.

MODULUL NR. 4

REALIZAREA SITE-URILOR I A PAGINILOR DE INTERNET.

WEB-DESIGN

Concepte / Dicionar WEB

Internet

Un grup de reele de computere interconectate formeaz o inter-reea (n englez internet).

Cea mai mare inter-reea public se numete Internet accesul fiind permis oricrui utilizator.
n afara reelei Internet exist i reele private n care accesul publicului larg nu este posibil.
Nu se tie exact ct de mare este internetul pentru c nu este controlat de un anumit organism
sau organizaie. Cele mai frecvente estimri vorbesc despre un numr de aproximativ trei
miliarde de pagini de informaie.

FIGURA 1: COPIEREA INTERNETULUI PE CALCULATORUL LOCAL

Browser

Un browser este un program de calculator utilizat pentru vizualizarea paginilor web. Cele mai
cunoscute browsere web sunt la ora actual Internet Explorer (ajuns la versiunea 7), FireFox,
Safari, Netscape i Opera. De precizat este c i un program de gestiune a fiierelor locale
(gen windows explorer) poate aciona ca un browser.

Pentru exemplificare n MyComputer, n partea superioar a ferestrei, n dreptul cuvntului

address, la tastarea unei adrese internet (de ex. www.uab.ro), se va observa deschiderea
paginii web corespunztoare (situl universitii 1 Decembrie). Detalii despre
funcionalitatea browserelor n seciunea 2 a acestei introduceri.

Html

HTML (HiperText Markup Language, Limbajul de Marcare a HiperTextului) este limbajul n

care sunt scrise paginile web. HiperTextul este un text mbogit, un text care conine marcaje
speciale denumite taguri care permit ncapsularea altor tipuri de informaie: imagini, sunete,
filme etc. Aceste marcaje sunt interpretate de browser care afieaz coninutul corespunztor.

Server

Un calculator conectat continuu la internet i care ruleaz programe speciale pentru a permite
diferite tipuri de conexiuni din afar. Dup tipul programelor rulate (servicii oferite), vorbim
de server de mail, server de fiiere, server de baze de date etc.

Protocoale internet

Pentru a asigura comunicarea a dou sau mai multe calulatoare ntr-o reea, acestea trebuie s
foloseasc aceleai tipuri de echipamente de conectare i aceleai seturi de instruciuni.
Modalitatea n care calculatorul mparte informaiile ce urmeaz a fi transmise n reea i
paii care sunt parcuri pentru a se asigura securitatea i compatibilitatea legturii formeaz
un protocol.

TCP

(Transfer Control Protocol) este un protocol de control al transferului. Acest protocol asigur
o conexiune sigur i bidirecional ntre 2 computere pe Internet. Acest protocol mpreun cu
protocolul IP formeaz suita TCP/IP utilizat la conectarea computerului personal la internet.

HTTP

HTTP (HiperText Transfer Protocol, Protocolul de transfer a HiperTextului) este protocolul

de comunicaie ntre un browser i un server de Web. Acest protocol este utilizat de ctre
serviciul Internet WWW. Este protocolul utilizat pentru navigarea propriu-zis pe internet.

FTP (File Transfer Protocol)

Acest protocol permite schimbul direct de fiiere ntre dou computere conectate la Internet
sau ntr-o reea.

POP / IMAP / SMTP

Protocoale folosite de serviciul de e-mail pentru interogarea direct a serverului de mail

utilizat.

Servicii internet

Scopul principal al utilizrii internetului este schimbul de informaii n diferite forme

(documente, sunete, imagini). Aceste schimburi sau transferuri se realizeaz prin cteva
servicii specializate:

World Wide Web

Este cel mai utilizat serviciu Internet, dezvoltat la nceputul anilor 90. Utilizeaz protocul http
pentru a transmite text, imagini, sunete aflate pe un server WWW oriunde n lume prin
intermediul protocolului HTTP.

Aplicaia WWW este o aplicaie de tip client-server, n care:

 Utilizatorul formuleaz o cerere prin intermediul unui browser (aplicaie tip
client).
Cererea este expediat de ctre aplicaia client (browser) pe Internet.
Cererea ajunge pe severul destinaie (serverul Web) care preia cererea prin
intermediul unei aplicaii speciale.
Serverul interpreteaz cererea i formuleaz rspunsul (caut paginile web
solicitate, imaginile, sunetele etc.)
Rspunsul este expediat prin intermediul Internetului ctre computerul client.
Aplicaia client recepioneaz rspunsul i l interpreteaz (n fereastra browser-
ului).

E-Mail (Electronic Mail)

Acest serviciu permite schimbul de mesaje electronice ntre 2 utilizatori pe Internet. Este cel
mai folosit serviciu de pe internet, oferit de firme ca Yahoo, Google sau Microsoft i
accesabil prin interfaa web sau (n anumite cazuri) prin programe ce comunic direct cu
serverul de e-mail (outlook, thunderbird, pegasus) numite clieni de mail.

RSS Feeds

RSS (Really Simple Syndication) desemneaz o modalitate prin care poi obine n timp real
i n mod gratuit informaii de pe diferite situri web. RSS-ul presupune obinerea automat a
titlurilor de articole, a sumarului acestora i a linkurilor ctre textul integral al acestora aflat
pe site-ul furnizor de servicii RSS.

Pentru a utiliza serviciile RSS este nevoie de un soft special pentru citirea tirilor de pe site-
urile ce ofer servicii RSS. O mare varietate de astfel de softuri este disponibil, marea
majoritate a lor fiind gratuite.

RSS-ul este o modalitate eficient de a primi alerte atunci cnd pe siturile favorite apar
nouti dintr-un anumit domeniu de interes pentru c aplicaia RSS ofer automat informaii
atunci cnd ceva nou din acest domeniu este postat.

Podcasting

Podcasting este o metod de distribuie a fiierelor n format multimedia (de obicei fiiere
audio dar i video), prin intermediul formaturilor de sindicalizare de coninut RSS i ATOM.
Fiierele pot fi descrcate i redate pe echipamente mobile sau calculatoare ce accept
formatul n care acestea au fost create. Un autor de podcast este de obicei denumit podcaster.
Siturile de podcasting pot oferi fiierele spre descrcare i ascultare off-line sau pentru redare
direct on-line. Metoda de baz este totui aceea de descrcare prin intermediul unui cititor
de coninut RSS sau Atom.

Adrese internet

nainte de a prezenta conceptul de adres internet, trebuie precizat c o pagina web este un
fiier n format HTML, iar mai multe pagini web care se refer la acelai subiect i sunt
stocate n aceeai locaie formeaz un sit internet (denumirea corect a uzualului site).
Vorbim deci de situl web al Universitii 1 Decembrie, care conine printre altele pagina cu
informaii referitoare la Facultatea de tiine, pagina cu informaii despre evenimentele
curente, pagina cu date de contact .a.m.d.

Ficare sit are o pagin principal (home sau acas), fiierul corespunztor fiind index.html.
Aceast pagin este cea care se ncarc la apelarea prin browser a sitului i de unde putem
naviga spre restul paginilor.

Un sit internet este stocat pe un server i are o adres unic, ntocmai ca adresa potal. Un
server stocheaz de obicei mai multe situri. Putem considera urmtoarea analogie: blocul n
care locuii este serverul, apartamentul este situl i fiecare camer reprezint cte o pagin.

Adresa unui sit este format dintr-un ir de patru grupe de numere cu valori ntre 0 i 255, desprite prin
punct, care se numesc IP (ex: 192.168.0.1). Pentru a fi mai uor de reinut i utilizat, adresele internet au nume
de forma http://www.google.com sau http://www.uab.ro. Aceste nume sunt de fapt conectate la adresele
reale (IP). Exist servere specializate, numite DNS (domain name server) care au liste de asociere ntre adresele
reale i numele paginilor, ca n tabelul de exemple de mai jos:

Nume Adres real

www.uab.ro 192.231.35.33

www.google.com 64.233.167.99

www.yahoo.com 66.94.234.13

Scriind deci n browser www.uab.ro, acest ntreab serverul DNS la care are acces care
este adresa real i apoi deschide fiierul index.html aflat la aceast adres.

Forma numelor de adrese are 4 seciuni distincte. Pentru exemplificare, vom consiera dou
adrese http://www.uab.ro i ftp://roedu.net unde putem identifica cele patru seciuni
astfel:

http:// respectiv ftp:// - protocolul utilizat

In primul caz este vorba de simpl navigare pe cnd n cazul al doilea, pregtim un transfer
de fiiere ntre calculatorul local i server. n utilizarea curent, protocolul http poate lipsi.
Dac adresa este trecut www.uab.ro, browserul presupune c este prin protocolul http.

www serviciul internet

Este prezent doar n primul caz, fiind un serviciu ce funioneaz doar pe protocolul http.
Poate aprea i sub alt form (de ex www3) sau n unele cazuri, n funcie de construcia sit-
ului poate lipsi. n anumite cazuri, un sit poate ncrca un coninut prin serviciul www i un
alt coninut n lipsa acestuia.

uab respectiv roedu

Sunt numele propriu-zise ale site-urilor, date de creatorii lor.

.ro , . edu
Reprezint domeniul n care este activ sit-ul. Domeniile sunt utilizate pentru clasificarea sit-
urilor pe criterii geografice sau funcionale. n funcie de criteriul geografic, fiecare ar are
domeniul propriu: .ro = Romania, .us= Statele Unite, .de=Germania (Deutschland). Uniunea
European are din 2006 domeniul .eu.

n funcie de criteriul funcional, exist mai multe domenii:

.com / .biz Situri .org situri ale unor organizaii

comerciale, ale unor non-profit
firme, ntreprinderi.

.edu situri educaionale .gov situri guvernamentale

.info situri
informaionale

Fiecare combinaie nume & domeniu (uab.ro, roedu.net, google.com) trebuie s fie unic i
este reglementat de o autoritate competent (pentru .ro este RNC Reeaua Naional de
Calculatoare). Aceste nume de domenii pot fi cumprate, vndute i se supun unor legi
speciale. Interesant n acest sens este legea anti-speculaii. n anii 2000 au aprut speculatori
de domenii internet, persoane care cumprau anumite domenii doar pentru a le revinde la
preuri mult mai mari. De exemplu, cine ar fi cumprat domeniul www.orange.ro sau
www.vodafone.ro nainte ca aceste firme s intre pe piaa din Romnia, era proprietarul lor
pe via i putea s negocieze cu firmele n cauz vnzarea acestora. Legea nou prevede ns
c dac la un anumit domeniu nu funcioneaz o pagin web cu coninut legat cu numele
domeniului (de exemplu prorietarul s fie o firm Orange care vinde portocale, sau suc de
portocale), proprietarul poate pierde n instan dreptul asupra domeniului.

Metode de cutare pe internet

Cutarea unei informaii poate fi o adevarat provocare. Numrul serverelor i a paginilor de

web care conin informaii utile sunt ntr-o continu cretere i este imposibil pentru cineva s
le in evidena. Motoarele de cutare situri dedicate gsirii informaiei pe web ne sprijin
n acest proces, dar rezultatele obinute pot fi mai bune sau mai slabe n funcie de formularea
cererii pentru c n spatele unui motor de cutare st un program de calculator care ncearc
s potriveasc ntr-o secund cerina utilizatorului cu informaia existent n miliarde de
pagini.

Cele mai utilizate motoare de cutare sunt n prezent www.google.com,

http://search.yahoo.com/, http://www.msn.com/, http://www.aol.com/ dei google se
estimeaz ca opreaz peste jumtate din cutrile online.

Motoarele de cutare indexeaz informaia de pe internet n funcie de mai multe criterii,

pentru a oferi informaii relevante. Punctul de plecare este folosirea cuvintelor cheie n
paginile web (definirea n codul surs a unor asemenea cuvinte), apoi sunt luate n calcul
titlurile din paginile web, cantitatea informaiei i relevana acesteia la cuvintele cheie
definite i un un indice calitativ al fiecarei pagini web (PageRank) calculat pe baza likurilor
altor pagini ctre pagina curent. Alte criterii se refer la clasificarea importanei sit-urilor (un
articol aprut pe situl BBC este mai important dect unul aprut pe pagina personal a unui
student) i chiar o ghidare a cutrilor dup tiparul utilizatorului: dac un utilizator va cuta
multe informaii despre calculatoare i sisteme de operare iar apoi va cuta tiger probabil c
pe el l intereseaz mai mult sistemul de operare Mac OS X: Tiger dect animalul din jungl.

Cutarea pe internet ncepe de la cuvinte cheie orice noiune pe care un utilizator dorete s
o gseasc, dar cu ct se crete claritatea cutrii cu att rezultatele vor fi mai bune. Spre
exemplu dac dorim s gsim date despre universitile din Timioara i cutm cuvntul
universitatea, Google va returna Universitatea Bucureti, Universitatea Babes Bolyai i
Universitatea Craiova ntre primele rezultate, iar Yahoo va returna: FC Universitatea (situl
echipei de fotbal U Cluj) apoi Universitatea Politehnica Bucureti i Universitatea Valahia din
Targoviste. Daca vom cuta universitatea timisoara, vom primi de la Google: Universitatea
de Vest din Timisoara, Universitatea Politehnica din Timisoara, Universitatea "Tibiscus" din
Timisoara i de la Yahoo: "Politehnica" University of Timisoara, Universitatea de Vest din
Timisoara, Timisoara University of Medicine and Pharmacy.

Aceasta este o prim regul a cutrii pe internet specificitatea cuvintelor i expresiilor

cheie. Important de precizat este c orice cuvnt cutat este considerat baz i sunt cutate
toate derivatele (univers va cuta att conceptul de univers, ct i universal).

n cazul expresiilor (ca mai sus universitatea timisoara), sunt cutate n primul rnd siturile
care conin expresia complet, apoi siturile care conin ambele cuvinte (de exemplu un sit
care are informaia Universitatea noastr concureaz de la egal la egal cu universiti din
centrele universitare mari, cum ar fi Timioara, Cluj, Bucureti), iar n final sunt cutate pe
rnd cuvintele ce formeaz expresia.

Filtrarea rezultatelor

Dac se dorete ghidarea sau restricionarea cutrii, se pot folosi cteva tehnici:

Forarea unui termen cu "+": Uneori, vrem ca motorul de cutare sa gseasc

paginile care conin neaprat toi termenii pe care i cutm, nu doar unii dintre
aceti. Cu "+", putem fora motorul de cutare s afieze ca rezultat doar paginile
care conin neaprat un termen anume. De exemplu, dac vrem s gsim pagini n
care s apar att George Bush ct i Bin Laden, vom cuta +bush +laden.
Majoritatea motoarelor de cautare nu fac distincie ntre literele mari i mici, dei
la unele, acest lucru se poate specifica. Similar, daca vrem sa gasim informatii
despre arhitectura din Cluj, vom cauta +arhitectura +cluj. Acest lucru este util n
special din cauza ca nu stim daca articolul contine textul "arhitectura din Cluj",
"arhitectura clujeana", "arhitectura Clujului", "arhitecturala clujeana" sau alte
variatiuni. Cu textul de cautare de mai sus, toate aceste pagini vor corespunde
conditiei de cautare.
Excluderea unui termen. Pentru a exclude din lista de rezultate anumii termeni
care nu sunt interesani, se poate folosi semnul minus ("-"). De exemplu, dac
dorim s cutm pagini despre universitile din Romnia din afara oraului
Bucureti, se poate formula: +universitate bucuresti.
 n cazurile cnd cutm o expresie cu spaii, i ordinea cuvintelor este fix, putem
lansa o cutare exact a expresiei ("phrase search"). De exemplu, dac dorim
informaii despre colile n limba englez, cutarea coli n englez returneaz
coli la care se nva limba englez i cursuri de limba englez, dar cutarea
coli n englez returneaz informaii despre colile cu predare n limba
englez.

BAZELE HTML
Ce este HTML?

Conceptul de HTML este un acronim, care nseamn HyperText Markup Language. Dei
conine n nume cuvntul language (limbaj), nu vorbim despre un limbaj de programare ci de
un limbaj descriptiv care prin marcaje speciale definete cum va fi afiat informaia
(structura i elementele de formatare). Un fiier HTML este de fapt un fisier text n care
structura i elementele grafice sunt determinate de aceste marcaje, denumite taguri. Tagurile
sunt interpretate de browser pentru a afia n mod corect pagina.

Pentru c sunt fiiere text, paginile HTML pot fi scrise n orice editor de text (i nu necesit
compilare). Atenie ns: Wordul nu este un editor de text. n Word, sau ntr-un program
echivalent, pe lng textul introdus, vom avea diferite informaii despre formatare (tipul
paginii, margini, culoarea scrisului) ce pot deranja formatul hmtl. Programul Notepad este
mult mai recomandat pentru editarea fiierelor HTML iar programele specializate gen
TopStyle, Macromedia Dreamweaver sau Ms Front Page nu fac dect s ne sprijine n
scrierea textului: numeroteaz liniile pentru a gsi mai repede eventuale erori, evideniaz
anumite erori de scriere, coloreaz cuvintele cheie pentru a fi mai uor de gsit .a.m.d. n
unele cazuri, aceste programe ofer un mod de lucru vizual, scriind singure codul pentru
elementele adugate i aranjate de utilizator cu doar un clik de maus. Totui programele
prezint limitrile lor, de unde necesitatea cunoaterii elementelor de codificare HTML.

Fiierele realizate n limbajul HTML pot avea fie extensia .htm, fie extensia .html. Tendina
este s se folosesasca extensia html, prima variant fiind rmas de pe vremea cnd sistemele
de operare aveau probleme n a lucra cu extensii din patru litere.

Elementul HTML

Conceptul de element HTML este la fel de important ca cel de tag HTML pentru c este
unitatea structural de baz a unui fiier HTML i pentru c de fapt aici are loc formatarea.
La baz, elementul este alctuit din taguri, atribute i valori, dup cum putei observa n
figura de mai jos:
 FIGURA 2: STRUCTURA UNUI ELEMENT HTML

Un element este o structur caracterizat prin atomicitate adic este o structur indivizibil,
unitar. Exist dou tipuri de elemente, elementele nlocuibile cum este elementul img (n
locul lui n pagin va fi inserat o imgine) i elemente care nu sunt nlocuite ci care conin n
ele informaia din viitoarea pagin web (div conine n imaginea de mai sus textul coninut
(Text). Elementele sunt cuprinse ntre un tag de nceput i un tag de sfrit. Elementele
nlocuibile (cum este img) nu au tag de sfrit ci sunt nchise doar cu semnul /.

Elementele au atribute, iar atributele lor au valori. In exemplul de mai sus, elementul div are
un atribut class cu valoarea first, iar elementul img are atributele src cu valoarea
poza.jpg i alt cu valoarea text alternativ. Daca un atribut este scris, trebuie sa fie urmat
de o valoare chiar dac este valoarea vid. Ex: alt=.

Principalele elemente i taguri HTML i

utlizarea lor

Hello world n HTML

Probabil cea mai simpl pagin HTML este afiarea unui mesaj Hello World dup cum se
observ n figura8 (codul este n dreapta):
<html>
<head>
<title>
Titlul paginii
</title>
</head>
<body>
Hello World.
</body>
</html>

FIGURA 3: CEA MAI SIMPL PAGIN WEB: HELLO WORLD

Observm din cod elementele: html, head, title i body. Aceasta este structura de baz a
oricrei pagini web. HTML definete nceputul i sfritul fiierului. Elementul HEAD
conine informaii descriptive referitoare la pagina web: titlul paginii, cuvinte cheie, legturi
spre fiiere de formatare (CSS) sau definirea unor scripturi la care vom reveni mai trziu.
Elementul BODY cuprinde coninutul paginii, toat informaia ce urmeaz a fi afiat.

Afiarea i organizarea textului

Dup cum vedei n exemplul de mai sus, textul poate fi inserat ntr-un fisier HTML direct (n
elementul BODY). n acest caz ns, nu se pot face formatri asupra textului, iar textul nu
poate fi structurat sau aliniat ntr-un anumit mod. Pentru a introduce text structurat care s
poat fi formatat, se folosete elementul paragraf notat cu P (cuprins ntre tagurile <p> i
</p>. Este important de reinut c un paragraf este o unitatea structural a textului, deci
paragrafele pot fi formatate independent unul de altul. n plus, textul poate fii scris pe mai
multe rnduri i folosind alte taguri, de exemplu tagul <br> care separ textul dintr-un
paragraf pe mai multe linii.

Textul poate fi scris i sub form de liste numerotate sau nenumerotate (cum este optiunea
bullets and numbering din word). Listele sunt formate din dou elemente: elementul LISTA
( <ol> </ol> - orderd list -pentru liste ordonate i <ul> </ul> - unordered list pentru
listele tip bullet) i elementul OBIECT LISTA (<li></li> - list item - la ambele tipuri de
liste).

O alt opiune este utilizarea elementului PREFORMAT (<pre> </pre>) care afieaz un
text preformatat, pstrnd n mare parte formatarea anterioar. De multe ori pot aprea
probleme de structur i formatare la folosirea acestui element, deci este recomandabil a fi
folosit cu moderaie.

Pentru a formata textul, avem cateva opiuni standard, cum ar fi bold <b></b> (sau
<strong></strong>), italic <i></i> (sau <em></em>). Tipul de scriere (fontul) precum
i culoarea sau dimensiunea pot fi setate la nivelul HTML dar sunt din ce n ce mai puin
folosite, odat cu dezvoltarea CSS, un limbaj separat folosit special pentru partea de
formatare a paginilor HTML. De fapt, toat formatarea i structura paginii este definit n
partea de CSS, despre care vom vorbi n ultima seciune a acestui capitol.

Titurile i subtitlurile din documentul HTML se numesc n englez headings i apar n

paginile web prin lementele H1 (titlu), H2 (subtitlu), H3 (sub subtitlu), H4, H5, H6. Nu
confundai ns un heading cu elementul TITLE din seciunea HEADER a paginii web
acesta din urm este numele paginii, care apare n bara de titlu a browserului. Elementele H
<html>
<head>
sunt utile pentru c<title>Text
ajut la pstrarea consistenei paginii web: toate elementele H1 vor arta
in HTML</title>
la fel, toate</head>
elementele H2 vor arta la fel .a.m.d. Formatarea lor implicit este ca n figura
<body>
de mai jos dar poate fi modificat tot
<h1>Modalitati deprin CSS. text in HTML</h1>
inserare
<h2>Folosind elementul Paragraf</h2>
Exemplul de mai jos, prezintao introduce
<p>Pentru pagin webtext,
cu diferite elemente
cel mai des sedefoloseste
text:
elementul p, cuprins intre tagurile &lt;p&gt; si
&lt;/p&gt;. </p>
<p>Paragrafele sunt sectiuni distincte ce pot fi
formatate independent desi <br>
textul poate fi scris pe mai multe linii si folosind
tagul BR.</p>
<h2>Folosind liste</h2>
<p>In HMTL putem folosi:</p>
<ul>
<li>liste ordonate (numerotate)</li>
<li>liste neordonate (bullets)</li>
</ul>
<h2>Folosind text preformatat</h2>
<pre> "Daca dorim sa afisam un text
preformatat, de exemplu un citat
putem folosi elementul PRE.
</pre>
</body>
</html>
Iat i rezultatul secvenei de cod de mai sus:

FIGURA 4: POSIBILITATI DE FORMATARE A TEXTULUI IN HTML

Inserarea imaginilor n paginile Web

Imaginile pot fi inserate folosind elementul / tagul img. Spre deosebire de alte elemente, img
este dependent de unul din atributele sale i anume atributul src (source), atribut a crei
valoare determin ce imagine urmeaz a fi inserat n pagin. La modul general putem
considera formula <img src=url>, unde url reprezint locaia de unde este preluat fiierul,
fie o locaie online, fie o locaie de pe calculatorul local.
Important de precizat este c aceste locaii pot fi absolute sau relative. O locaie absolut
precizeaz calea complet unde este gsit fiierul de ex: C:\documente\poze\poza1.jpg.
Dac pagina web este mutat pe un alt server, sau dac fiierul respectiv este mutat, legtura
nu ma mai funciona. De aceea n practic, toate fisierele legate de un sit web se pun n
acelai folder (folder rdcin), iar dac fiierul html i imaginea sunt n acelai folder,
legtura este o legtur relativ i este suficient numele imaginii poza1.jpg. Practic se
consider c se pleac de la folderul curent. Dac se dorete plasarea mai multor imagini n
pagina web i se creaz n folderul curent un folder special pentru imagini, calea va fi evident
imagini\poza1.jpg. De asemenea, dei adresele obinuite funcioneaz de cele mai multe
ori, se recomand folosirea adreseleor de tip internet (cu semnul / n loc de \ , adic
imagini/poza1.jpg n loc de imagini\poza1.jpg).

Elementul IMG mai are o serie de atribute importante, cum ar fi width i height (pentru
setarea dimensiunilor) sau alt utilizat pentru a afia un text n locul imaginii n cazul n care
din browser este oprit afiarea imaginilor.

Hyperlinks

Unul din conceptele de baz n HTML este hyperlinkul legtura spre un document, obiect
sau zon. Un hyperlik poate fi setat pe un text (indiferent de lungime), pe o imagine sau pe
celula unui tabel folosind elementul <a> n modul urmtor:
<a href=produse.html>Produse</a>
<a href=poza.jpg><img src=poza_mica.jpg></a>
<a href=http://www.uab.ro>Univ. Alba Iulia</a>

Atributul HREF definete inta legturii ce se va deschide la activarea legturii. Aceasta

poate fi un fiier HTML o pagin din sit-ul nostru, poate fi orice tip de fiier fiier pdf,
document word, imagine (ca in exemplul 2 de mai sus), poate fi o adres web (n acest caz se
impune scrierea protocolului http exact ca n exemplul al treilea).

De asemenea, pot exista legturi spre zone interne ale paginii (ancore), n cazuri n care
coninutul unei pagini depete dimensiunile ecranului i se dorete navigarea rapid prin
aceasta. Ancora punctul spre care se face legtura, se definete cu elementul <a> i
proprietatea name (<a name=ancora>Text</a>) iar legtura spre acest punct se face spre
valoarea atributului name dat mai sus, cu semnul # n fa (considernd cazul de mai sus
<a href=#ancora>text<a>).

O legtur poate deschide targetul in aceeasi fereastra sau intr-o fereastra noua folosind
atributul target cu valori posibile: _self, _blank, _parent, _top. (<a
href=http://www.yahoo.com target=_blank>Fereastra noua de yahoo</a>).

Folosirea tabelelor

Folosirea tabelelor n HTML este un subiect controversial n lumea profesionitilor web. Pe

de o parte, unii designeri sau programatori folosesc tabelele pentru a structura pagina web i a
plasa n celule dup necesiti paragrafe de text, imagini sau alte elemente. Dezvoltarea CSS-
ului a dus la renunarea treptat la folosirea tabelelor ca elemente de structur, aranjarea
paginii (layout-ul) fcndu-se n momentul de fa strict cu CSS. Printre motivele acestei
evoluii se numr: dificultatea manipulrii tabelelor, complexitatea inutil a codului HTML
obinut prin utilizarea tabelelor, ncrcarea mai dificil a coninutului.

Tabelele rmn utile pentru prezentarea anumitor tipuri de date, ce sunt tabulare n natura lor
orarul unei grupe de la facultate, un calendar de evenimente, un bilan contabil sunt toate
date care sunt mai uor structurate i prezentate ntr-o pagin web prin tabele.

Elementele utilizate n cazul lucrului cu tabele sunt: <table> - defineste inceputul / sfarsitul
unui tabel ; <tr> - defineste o linie din tabel; <td> defineste o celula din tabel n rndul
curent. Pe lng aceste elemente obligatorii, putem utiliza o serie de elemente opionale
precum <th> - antetul tabelului, <tbody> - corpul tabelului i <tfoot> - subsolul tabelului.
Alte atribute interesante sunt cellspacing (distana ntre celule), padding (distana interioar
ntre marginea celulei si text) i border (conturul celulei).

In continuare prezentm un exemplu de tabel, n cod i rezultatul n browser. Tabelul nu are

elemente de formatare n afara marginii dintre celule i a bordurii, eventuale alte formatri
fiind rolul CSS-ului.

<table cellspacing="2" border=1px>

<caption>PRODUSE</caption>
<thead>
<tr>
<th scope="col">Alimente</th>
<th scope="col" >Haine</th>
<th scope="col">Altele</th>
</tr>
</thead>
<tbody>
 FIGURA 5: EXEMPLU DE TABEL HTML

Definirea structurii unei pagini web

Precizam n seciunea anterioar c utilizarea tabelelor pentru structurarea paginilor web nu

mai este agreat n practic. Totui, un element de structur trebuie s existe la nivelul paginii
HTML pentru a putea aranja n pagin diferitele elemente n structura dorit. Acest element
este elementul <div> , care funcioneaz ca un container. ntr-un DIV apar toate elementele
paragrafe, texte, tabele.

n general pentru paginile web se practic structura pe dou coloane, n care avem, ca n
imaginea de mai jos, un antet, o coloan principal de coninut, o coloan secundar de
informaii (sau meniu vertical) i un subsol cu informaii suplimentare. (Un exemplu de
pagin web construit n acest mod gsii n anexa1 a acestui capitol).

Elementul DIV are dou atribute extrem de importante: ID i CLASS. Atributul ID poate lua
orice valoare alfanumeric (litere i cifre) i reprezint de fapt numele containerului respectiv
(ex. <div id=antet>). De fiecare dat cnd vom face referire la numele respectiv (de obicei
n fiierul CSS), ne vom referi la seciunea resprectiv de pagin i tot coninutul ei. Fiecare
ID trebuie s fie unic determinat (nu pot exista dou id-uri cu aceeai valoare). Atributul class
poate lua de asemenea valori alfanumerice i este util pentru mprirea n categorii (clase) a
informaiei. Putem avea oricte elemente ntr-o anumit clas, iar prin referirea la clasa
respectiv sunt referite toate aceste elemente, chiar dac se afl n seciuni (div-uri) diferite.
De precizat este c aceste atribute pot fi setate oricror elemente dar sunt foarte frecvente la
elementul DIV.

Noiuni de XTML

XHTML (Extensible HyperText Markup Language) este o versiune mai strict i mai
curat de HTML. Limbajul este n mare acelai i funcionarea sa este identic cteva din
punctele de difereniere fiind prezentate pe scurt n continuare:
Dac n HTML putem avea greeli de imbricare a elementelor, n XHTML elementele trebuie
s fie imbricate corect:

<b><i>This text is bold and italic</b></i> -> HTML

<b><i>This text is bold and italic</i></b> -> XHTML

Toate elementele trebuie nchise n XHTML, iar elementele formate dintr-un singur tag
trebuie finalizate cu semnul /.
HTML: (dei sintaxa eronat, funcioneaz)
<p>This is a paragraph
<p>This is another paragraph
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

XTML
<p>This is a paragraph</p>
<p>This is another paragraph</p>
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

n XHTML s-a introdus conceptul de definire a tipului documentului (Document Type

Definitions) precizat la nceputul paginii (prima linie), ntr-un comentariu de forma <!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

O definiie a tipului documentului (DTD) prcizeaz clar sintaxa permis pentru marcajele
XHTML, specific regulile ce se aplic pentru marcarea documentelor, inclusiv un set de
declaratii la nivel de element sau entitate.

Exist trei tipuri de documente XHTML:

Strict
Transitional
Frameset

XHTML 1.0 Strict: se foloseste pentru documente curate, n special n legtur cu CSS.

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

Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">

XHTML 1.0 Transitional: se foloseste pentru documente formatate din HTML mai ales
pentru a oferi suport browserleor ce nu neleg CSS -ul.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
XHTML 1.0 Frameset: se foloseste pentru documentele n care se utilizeaz frame-uri.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">

Alte reguli de sintax ale XHTML

Prezena elementului HTML este obligatorie.

Elementele XTML, atributele i valorile se scriu cu litere mici.
Valorile atributelor trebuie s fie cuprinse n ghilimele.

Formatarea paginilor WEB cu CSS

Ce este CSS?

CSS sau Cascading Style Sheets reprezint Imbrcmintea unei pagini web. De obicei, sit-
urile web au unul dou fiiere CSS pe care le utilizeaz pentru a formata cu acelai set de
reguli toate paginile din sit (n unele cazuri, regulile CSS pot fi scrise i direct n HTML). Un
fisier CSS este de fapt un fiier text care conine reguli de descriere a unei pagini web
(stabilete toate elementele de formatare).

Principalele beneficii oferite de CSS sunt:

Toate paginile din sit sunt formatate la fel (sunt legate la acelai fisier CSS).
Modificrile de formatare pot fi fcute n tot sit-ul modificnd un rnd dintr-un
fiier.
Structura este mai clar, permite mai multe opiuni de design.

Figura 11 arat formatul general al unei reguli CSS:

FIGURA 6: FORMATUL GENERAL AL UNEI REGULI CSS

Figura de mai sus poate fi tradus astfel: selecteaz toate elementele h1 i seteaz-le
culoarea cu codul #808080 i mrimea textului x-large (foarte mare).

Legatura CSS & HTML

Pentru a determina pagina web s utilizeze specificaiile de formatare CSS, o legtur

trebuie stabilit ntre fiierul HTML i fiierul CSS, prin una din cele trei modaliti:
importare, link, ncorporare. Mai jos sunt varintele de legtur a unui fiier stil.css din
directorul curent cu fiierul HTML curent:

Import
<style type="text/css" media="all">
@import url("stil.css");
</style>

Link
<link href="stil.css" rel="stylesheet type="text/css" />

Varianta de ncorporare (embedding) presupune scrierea regulilor CSS dirct n fiierul

HTML, n seciunea HEAD, ntr-un element style, ca n exemplul de mai jos:

<html>
<head>
<style type="text/css" media="all">
h1 {font-size: x-large; }
p {padding-left: 1em;}
</style>
</head>
<body>
</body>
</html>

Proprieti utile din CSS:

Font-family: Garamond, Times New Roman, serif;

Seteaz fontul (tipul de scriere). n acest caz, textul va fi afiat n fontul Garamond. n cazul
n care computerul care vizualizeaz pagina nu are acest font instalat, textul va fi afiat n
fontul Times New Roman (remarcai c Times New Roman este scris n exemplul de mai sus
n ghilimele, pentru c numele su este format din mai multe cuvinte). Dac nici Times New
Roman nu este gsit, se va folosi orice font serif gsit. (Fonturile se mpart n serif ca Times
New Roman i sans-serif ca fontul folosit n paragrafele acestei cri.)

Font-size

Poate lua o valuare n pixeli, sau poate lua valorile small, medium, large, x-lare etc.
Stabilete dimensiunea textului.

Font weight

Poate lua valorile light, normal, bold sau o valoare care determin ct de accentuat s fie
textul.Determin dac textul este scris normal sau accentuat.
 Font-style

Poate lua valorile italic, normal sau oblique.

Text-align

Cu valorile left, center, right, justify, realizeaz alinierea corespunztoare a textului n pagin.

Background

Seteaz culoarea de fundal.

Backgound-image: url (imagini/fundal.jpg);

Seteaz o imagine de fundal. Poziia imaginii n fundalul elementului poate fi stabilit cu

proprietatea Background-position cu valorile top, center, left, right sau procente care specific
poziia pe orizontal respectiv vertical (ex: backround-position: 75% 50%). Imaginea de
fundal poate fi repetat pentru a se creea un model (pattern) pe baza ei cu proprietatea
background-repeat ce poate lua valorile repeat-x, repeat-y, repeat i no-repeat.

Margin

Marginea unui element (distana pn la elementul urmtor) poate lua valori n pixeli sau
em (1em este dimensiunea fontului din elementul printe. Redimensionarea textului duce la
redimensionarea tuturor mrimilor specificate n em). Valorile sunt specificate n ordinea
acelor de ceasornic: sus dreapta jos stnga, fr a fi separate de virgul sau un alt semn de
punctuaie (margin: 10px 20px 20px 15px). Pentru a specifica o singur margine, putem
folosi combinaiile margin-top, margin-right, margin-bottom sau margin-left.

Border

Chenarul (bordura) existent n jurul unui element. Are trei valori, reprezentnd tipul (linie
continu sau ntrerupt), culoarea i grosimea. Ex: border: solid gray 1px;

Padding

Reprezint distana interioar dintre element i chenar.

Width / height

Determin limea / nlimea unui element. Pot lua valori n pixeli, em sau procente.

Float

Proprietate utilizat pentru aranjarea n pagin a elementelor, n special pentru imagini. Poate
lua valorile left, right si none. Ca efect elementul respectiv va fi aranjat n stanga / dreapta
paginii, restul coninutului fiind aranjat n jurul obiectului.
 FIGURA 7: MARGIN, PADDING I BORDER

Aplicarea regulilor CSS

Aplicarea regulilor CSS se poate face la mai multe niveluri: la nivel de element, la nivel de
ID, la nivel de clas i combinaii ntre acestea.

Modalitatea de baz este de a aplica o regul CSS la nivel de element. Dac dorim ca toate
paragrafele din sit-ul nostru web s fie scrie cu fontul Verdana, dimensiune 12px, culoare
albastru, vom construi regula: p { font-family: Verdana; font-size: 12px; color: blue;}.
Oricrui element i pot fi asociate asemenea reguli, iar elementul <a> are pe lng definirea
normal posibilitatea definirii a nc dou stri: a:hover (cum arat un link cnd cursorul
mausului trece pe deasupra sa) i a:visited (formatul unui link dup ce a fost vizitat).

Aplicarea la nivel de id se face prin valoarea id-ului precedat de semnul diez (#): #antet
{background: green; color: white; }. Efectul va fi resimit asupra tuturor elementelor cuprinse
n containerul cu ID-ul resprectiv. Dac una din declaraii contrazice o declaraie la nivel de
element, va fi ignorat. n exemplele de mai sus, regula aplicat la nivel de paragraf
determin culoarea textului albastru, iar regula aplicat la nivel de ID determin culoarea
alb. n acest caz paragrafele din antent vor avea culoarea albastr, iar restul elementelor de
text (h1, h2, h3 etc) vor avea culoarea alb (considernd c nu sunt alte reguli la nivel de
element care s influeneze acest fapt). Dac dorim s setm express culoarea textului din
paragrafele coninute n containerul cu ID-ul antent, putem face acest lucru, combinnd cei
doi selectori astfel: #antet p {color: black;}. Aceast formulare nseamn selecteaz toate
paragrafele care au ca strmo un element cu ID-ul antet i face referire la conceptul de
motenire.
Conceptul de motenire pleac de la structura unui document HTML. Dac ne uitm ntr-o
structur de baz, ca cea de mai jos, observm c elementul HTML conine elemetele HEAD
i BODY care la rndul lor conin alte elemente. HTML este numit printele lui HEAD sau
BODY, care sunt copiii lui HTML. Mergnd mai departe, TITLE este copilul lui HEAD i
urma pentru HTML. Toate elementele care au mai mult de o legtur n interior se numesc
urmai, iar n sens invers strmoi.

<html>
<head>
<title>
Ciprian Cucu: Home Page
</title>
</head>
<body>
<div id="antet">
<p> Acesta este un text. </p>
</div>
</body>
</html>

A treia posibilitate de aplicare a regulilor CSS este la nivel de clas, prin numele clasei
precedat de punct: .detalii {font-size: 9px; color: gray; font-style: italic}. Toate elementele
care au un atribut class cu valoarea detalii vor fi formatate conform regulii de mai sus.
Stabilirea regulilor la nivel de clas are prioritate n faa celorlalte dou metode deci chiar
dac avem o regul ce stabilete culoarea textului din paragrafe negru, textele din paragrafele
care au class=detalii vor fi scrie cu culoarea gri. ntr-o clas pot fi oricte elemente de orice
tip. Dac dorim s ne referim doar la anumite elemente, putem specifica acest lucru prin
plasarea elementului naintea clasei (de ex. p.detalii va selecta doar paragrafele din clasa
detalii).

Culori n pagini web

O mare parte din formatarea paginilor web se refer la culorile utilizate pentru text i
fundaluri. Culorile corecte asigur un text uor de citit, o pagin plcut privitorului i n care
informaia util este subtil evideniat i uor de gsit. Potrivirea culorilor este un domeniu n
sine dar multe aplicaii ofer mici ajutoare n selecia paletelor de culori, plecnd de la o
culoare dorit i artnd combinaiile posibile.

Culorile sunt formate prin combinarea a trei tipuri de lumina: rosie, verde si albastra (spectrul
RGB). n HML i CSS sunt de obicei referite n folosind notaii n hexazecimal a combinaiei
de rou, verde i albastru: fiecare primete o valoare ntre 00 si FF. Culoarea #FF0000 este
deci rou, #00FF00 este verde i #0000FF este albastru. Exist i culori standard care au
nume i pot fi folosite cu numele lor: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, yellow.

DINAMIZAREA PAGINILOR WEB CU JAVASCRIPT

 Ce este Javascript?

JavaScript este un limbaj de programare light (simplificat), proiectat pentru a aduga

interactivitate paginilor HTML. De obicei scripturile (secvene de cod) Javascript sunt
implementate direct n paginile HTML (ncorporate) i sunt executate direct, fr compilare
prealabil. Javascript este gratuit i nu necesit licene pentru scrierea sau rularea codurilor.

De asemenea important de precizat este c Java i JavaScript sunt dou chestiuni complet
diferite, att n concept ct i implementare. Java, dezvoltat de Sun Microsystems este un
limbaj de programare mult mai puternic i mai complex, n categoria C i C++.

Ce poate face Javascript?

Javascript ofer designerilor WEB o unealt de programare. Dei de obicei cei care
creaz pagini web nu sunt programatori, Javascript este un limbaj de creare de
scripturi cu o sintax foarte simpl. Aproape oricine poate pune mici secvene
(denumite n general snippets n paginile lor HTML).
Javascript poate plasa text dinamic ntr-o pagin. O declaraie Javascript de genul
document.write("<h1>" + name + "</h1>") poate s afieze un text variabil (n funcie
de coninutul variabilei name).
Javascript poate reaciona la evenimente un cod Javascript poate fi pus s se
execute atunci cnd ceva se ntmpl, cum ar fi apsarea unui anumit element din
pagin sau traversarea cu mausul deasupra unei anumite zone.
Javascript poate citi sau chiar modifica coninutul unui element HTML.
Javascript poate fi utilizat pentru a valida datele cerute de un formular dintr-o pagin
web
Javascript poate detecta ce browser folosete vizitatorul paginii i alege spre ncrcare
o pagin optimizat pentru browserul respectiv.
Javascript poate stoca date despre computerul vizitatorului unei pagini (cookies).

Generaliti JavaScript

Obiecte, Metode i Evenimente

Javascript funcioneaz pe principiile programrii orientate obiect, n care fiecare element -

tabel, fereastr, imagine, buton, legtur reprezint un obiect i are propriul set de proprieti.

Majoritatea obiectelor sunt nsoite de o colecie de lucruri pe care le pot efectua. Spre
exemplu un document este deschis prin metoda document.open(). .open() reprezint o metod
asociat obiectului document.

Marcarea sau specificarea exact a momentului execuiei unei funcii este foarte important
pentru programator. Prin specificarea unui anumit moment al execuiei se face apel la
desfurarea unui eveniment. De exemplu, la activarea maus-ului execut o anumit funcie:
onClick="run_my_function()". Cteva exemple de evenimente ale maus-ului sunt:
OnMouseOver, OnMouseOut, OnFocus, OnBlur, OnLoad, and OnUnload.
Integrare JavaScript & HTML

Pentru a utiliza JavaScript n HTML, se folosete elementul SCRIPT (<script> </script>)

a crei form general este:
<script>
Cod JavaScript
</script>

Pentru c elementul script poate fi utilizat n HTML pentru integrarea mai multor tipuri de
scripturi, este bine s precizm o valoare atributului language (de obicei valoarea
javascript) i valoarea atributului type ("text/javascript").

Elementul complet ar arta deci n modul urmtor:

<script language="javascript" type="text/javascript">

Cod JavaScript
</script>

n unele cazuri se dorete utilizarea aceluiai script n mai multe fiiere distincte, caz n care
vom scrie codul JavaScript ntr-un fiier separat (cu extensia .js) i vom crea o legtur ntre
fiierele HTML i fiierul javascript cu elementul SCRIPT i atributul SRC:
<script language=JavaScript src=numefisier.js> </script>

Utilizare JavaScript

Variabile n Javascript

O variabil, este un container pentru informaiile pe care dorii s le stocai. Valoarea unei
variabile se modific pe parcursul executrii programului. Accesul la informaia cuprins ntr-
o variabil se face prin numele acesteia.

Numele variabilelor sunt orice construcie alfanumeric (litere i cifre) cu condiia s nceap
cu o liter sau caracterul de subliniere (_). Nu sunt permise alte semne speciale ( ?, [, *) i
nu pot avea spaii. Cuvintele cheie (var, if, for, array) nu sunt acceptate. De asemenea,
variabilele sunt n Javascript case sensitive (se face diferena ntre literele mari i literele
mici) deci o variabil titlu nu este identic cu o variabil TITLU sau Titlu.

Declaraia unei variabile se face cu instruciunea var : var numevariabila = valoare. Se

accept ns i variant fr cuvntul var: numevariabila = valoare.

Pentru a atribui o valoare unei variabile, se foloseste semnul egal: titlu=Bazele Javascript.
Semnul egal are aici funcia operatorului de atribuire. Dup aceast instruciunea, variabila
titlu va avea valoarea Bazele Javascript.

Variabilele pot fi locale sau globale. Variabilele locale sunt cele delcarate n interiorul unei
funcii i sunt valabile doar n interorul funciei respective. Variabilele declarate n afara unei
funcii sunt globale i sunt recunoscute n toat pagina din momentul declarrii pn cnd
pagina este nchis.

iruri de valori / vectori

Pe lng datele simple ca valori numerice sau texte, JavaScript suport un tip de date mai
complex, denumit vectori (arrays). Un vector este o colecie de valori individuale grupate i
const ntr-o serie de containere numerotate n care pot fi puse valori. Putem face analogia cu
un dulap cu mai multe sertare. Dulapul este variabila de tip vector, iar fiecare sertar poate
conine cte o valoare.

Valorile din vectori pot fi utilizate sub forma numevector[0], numevector[1], numevector[2]
.a.m.d. Fiecare din aceste valori poate fi manipulat individual i folosit ca o variabil
normal.

Mai jos este reprezentat grafic un vector elevi cu 5 elemente (sub fiecare element este
trecut poziia elementului n cadrul vectorului)

Maria Alex Ionut Vali Adriana

0 1 2 3 4
Avem deci: elevi[0] = Maria, elevi[1]=Alex, elevi[2]=Ionut, elevi[3]=Vali,
elevi[4]=Adriana

Pentru a crea un vector nou se folosete instruciunea var i opiunea new a obiectului array:

Var numeVector = new Array(nr. elemente)

n cazul exemplului de mai sus am avea: var elevi = new Array(5)

Iniial valorile din vector sunt necompletate (vid), pentru a le completa, trebuie s le atribuim
valori ca i variabilelor obinuite: elevi[0]=Maria, elevi[1]=Alex etc.

O alt variant este crearea vectorilor direct cu valorile completate, sub forma:

Var elevi = new array(Maria,Alex,Ionut,Vali,Adriana)

Una din metodele importante asociate unui obiect de tip vector este metoda sort, apelabil
sub forma elevi.sort(); - cu efectul de ordonare alfabetic a valorilor din vector.

Condiii i bucle

Ca i n alte limbaje de programare, n JavaScript putem determina fluxul unui program prin
strcturi alternative (condiii) i repetitive (bucle). Acestea se bazeaz pe operatorii de tip
boolean (logici): ==,&& (i), ||(sau), !(not operatorul negaie).

Exemple:
((x == 5) && (y == 6)) va avea valoarea TRUE (adevrat) dac x=5 i y=6
 ((x!=4) || (y>=5)) va avea valoarea TRUE dac x diferit de 4 sau y mai mare sau egal
cu 5

Pentru a se folosi o structur alternativ, utilizm instruciunea IF cu sintaxa:

if (conditie) {
instructiune1;
instructiune2;
...
}
else {
instruciune n;
instruciune n1; }

Pentru repetarea unor secvene de cod n funcie de anumite condiii, vom utiliza structurile
repetitive clasice While i For.

While este un ciclu repetitiv cu condiie iniial care se repet atta timp ct condiia este
satisfcut. Acest ciclu are un numr necunoscut de iteraii (repetri) nu tim pn cnd
condiia iniial va fi satisfcut (depinde de instruciuni) i poate s nu se realizeze niciodat
(dac la intrarea n ciclu, condiia deja nu este respectat). Forma general este:
While (condiie) {
Instruciune1;
Instruciune2;
...
}

Ciclul for este un ciclu cu condiie final i numr cunoscut de iteraii i are forma general:

for (val. initiala; conditie; increment)

{
instruciune1;
instruciune2;

}

Ciclul for este caracterizat de o variabil contor care determin numrul de iteraii. Variabila
contor primete o valoare iniial i crete cu o anumit valoare (increment) pn cnd
condiia nu mai este satisfcut.

Exemplu:

for (x=0; x<10; x=x+1)

{
y = 2 * x;
document.write ("Two times ",x," equals ",y,"<BR>");
}
Funcii

Baza construirii blocurilor JavaScript sunt funciile- mini programe care prelucreaz valori
ale unor parametrii, ale unor evenimente, returnnd o valoare.

Lucrul cu funcia se compune din:

- declararea ei n seciunea HEAD a programului;
- apelarea ei n corpul HTML;

Declararea funciei

<SCRIPT>
<!__
function function_name(value_name) {
...function code...
return (new_value)
}
// end hiding __>

</SCRIPT>

sau:
<SCRIPT>
<!__
function get_square(old_num) {
new_num = (old_num * old_num)
return (new_num)
}
// end hiding __>

</SCRIPT>

Exemplu de funcie matematic

<HTML>
<HEAD>
<TITLE>Simple Math</TITLE>
<SCRIPT>
<!__
function simple_math(num) {
document.write("The call passed ",num," to the function.<BR>");
new_num = num * 2; // multiple the value by 2
document.write(num, " * 2 equals ",new_num,"<BR>");
return new_num; // return new_num to the function call
}
// end hiding __>
</SCRIPT>
</HEAD>
<BODY>
<H3>Let's watch some simple math:</H3>
<SCRIPT>
<!__
x = 5;
document.write("The starting number is ",x,"<BR>");
new_x = simple_math(x);
document.write("The function returned the number
",new_x,"<BR>");
// end hiding __>
</SCRIPT>
</BODY>
</HTML>
Gestionarea Evenimentelor

Codurile JavaScript pot fi puse s se execute la apariia unor evenimente n pagina HTML.
Aceste evenimente sunt produse de obicei de vizitatorul paginii, care deschide anumite
ferestre, apas butoane, completeaz formulare sau pur i simplu trece cu mausul ntr-o
anumit zon.

Gestionarea evenimentelor presupune scrierea unei funcii pentru evenimentul respectiv i

apelarea ei la activarea evenimentului.

Evenimente posibile

blur cu onBlur
click cu onClick
change cu onChange
focus cu onFocus
load cu onLoad
mouseover cu onMouseOver
select cu onSelect
submit cu onSubmit
unload cu onUnload

Exemplu: Afiarea unui mesaj pe ecran, la apsarea unui link:

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-
8859-1">
<title>Afisare mesaj</title>
<script language="javascript"
type="text/javascript">
function mesaj () {
alert("Ati apasat Linkul din
pagina!");
return; }
</script>
</head>
<body>
<p><a href="test1.html"
onClick="mesaj()">Acesta este un
link</a></p>
</body>
</html>

FIGURA 8: JAVASCRIPT - AFISAREA UNUI MESAJ PE ECRAN

 APLICAII CLIENT- SERVER CU PHP & MYSQL

Generalitati despre PHP

In afara publicrii pe internet a informaiilor simple ca de exemplu la prezentarea produselor

unei firme, WEB-ul este util pentru dezvoltarea diferitor tipuri de aplicaii. De la o aplicaie
de tip e-mail la un portal care trimite cari potale virtuale sau de la un magazin online la un
forum de discuii, toate aceste sunt aplicaii client-server.

Aplicaiile client server pot fi implementate cu ajutorul unor limbaje de programare specifice
cum ar fi ASP, JSP sau PHP.

Ce este PHP?

PHP este un acronim i nseamn PHP: Hypertext Preprocessor

PHP este un limbaj de progrmare la nivel de server (scripturile realizate se executa pe
server)
Un fiier conine text, taguri HTML i scripturi
Fiierele php au extensia ".php", ".php3", or ".phtml"
Fiierele PHP se scriu in editoare de text ca Notepad, sau editoare speciale ca
PHPEdit evitai scrierea codurilor n Word sau alte editoare de text.

Creat n anul 1994 de ctre Rasmus Lerdorf i folosit iniial pentru a putea obine informaii
despre cei care i vizitau pagina web, limbajul PHP este una dintre cele mai interesante
tehnologii web existente n prezent. Deoarece mbin caracteristici dintre cele mai complexe
cu simplitatea n utilizare, pentru ca este oferit gratuit si pentru ca este portabil pe orice
sistem de operare, PHP a devenit rapid un instrument de frunte pentru dezvoltarea aplicaiilor
n Web.

PHP permite dezvoltarea aplicatiilor cu un coninut Web dinamic, adic un coninut Web
care se modific automat de la o zi la alta sau chiar de la un minut la altul si poate oferi acces
la fiiere, baze de date i alte resurse direct de pe server.

PHP are suport pentru majoritatea serverelor Web (Apache, Microsoft Internet Information
Server, Microsoft Personal Web Server, Netscape Server, iPlanet Server, oReilly Website Pro
Server, Caudium, Xitami, OmniHTTPd i multe altele)

PHP are i suport pentru un numar mare de baze de date:

Adabas D Ingres Oracle

dBase InterBase Ovrimos

Empress FrontBase PostgreSQL

FilePro mSQL Solid

Hyperwave Direct MS-SQL Sybase

 IBM DB2 MySQL Velocis

Informix ODBC Unix dbm

Are deasemenea suport pentru comunicarea cu alte servicii, folosind protocoale ca LDAP,
IMAP, SNMP, NNTP, POP3, HTTP, etc.

Crearea i testarea aplicaiilor

Aplicaiile client-server nu pot fi rulate i testate dect pe un calculator care ofer suportul
necesat server web cu suport PHP (i eventual un server de baze de date, dac este necesar).
Pentru a rula i testa aplicaiile, exista dou variante: folosirea unui server web existent pe
internet (servicii de gzduire gratuite sau pltite) sau instalarea unui server local.

In cele ce urmeaz, toate exemplele se vor referi la un server Apache cu suport PHP instalat
pe un sitem Windows XP i la un server MySQL, toate din pachetul PHP Triad, disponibil
gratuit: http://sourceforge.net/projects/phptriad/.

Instalarea PHP triad este simpl pe Windows, exist un singur fiier executabil care instaleaz
i configureaz serverul web, PHP-ul i serverul de baze de date MySQL. Toate fiiere vor fi
instalate n folderul Apace de pe discul C: . In acest folder, vom gsi ulterior folderul htdocs
n care trebuie puse toate aplicaiile pe care dorim s le testm. Pentru a rula aplicaii php,
trebuie doar s pornim serverul apache (Start > Phptriad > Apache console > Start Apache) i
eventual serverul de MySQL, dac este nevoie (Start > Phptriad > MySQL >MySQL D-NT).
n acest moment, n orice browser, la adresa http://localhost se va putea accesa serverul
instalat pe computerul local. Mai exact, adresa http://localhost acceseaz folderul
c:\apache\htdocs n care va cuta un fiier index.html sau index.php pe care s l afieze n
browser. Dac un asemenea fiier nu exist, va fi afiat structura de directoare i fiierele -
se ofer posibilitatea navigrii prin folder (n funcie de anumite setri din fiierele de
configurare, afiarea structurii de foldere i fiiere poate fi oprit din motive de securitate).
Dac se dorete apelarea unui anumit fiier (de exemplu test.php), numele su complet
trebuie trecut n adres: http://localhost/test.php. Folderele create n folderul htdocs, se
comport identic cu subdomeniile de pe internet. Dac n folderul htdocs se creaz un folder
test, prin adresa http://localhost/test - se apeleaz fiierul index.html sau index.php din
c:\apache\htdocs\test iar dac nu exist asemenea fiiere, se afieaz coninutul directorului.
Orice fiier php sau html din folderul test poate fi apelat direct prin
http://localhost/numefisier.extensie.

Integrare PHP & HTML

Pentru a utiliza PHP n HTML, se folosete elementul PHP, al crui format general este:

<?php
Instructiune php;
Instructiune php;
...
?>
Codul de mai jos afieaz n browser mesajul Hello.

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

Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pagina hello</title>
</head>
<body>
<?php echo "hello"; ?>
</body>
</html>

Instruciunea echo afieaz textul n browser. De fapt textul este scris n codul fiierului
html ceea ce nseamn c sunt permise utilizarea tagurilor html n instruciune. Putem folosi
orice marcaje html, pentru a determina cum apare afiat informaia: echo <p>
hello</p><p>world</p> va creea dou paragrafe de text dou elemente P n codul
HTML.

Exemplul de mai jos arat mai multe elemente scrise n codul HTML prin instruciunea echo
din PHP.

<!DOCTYPE HTML PUBLIC "-//W3C// DTD

HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd
">
<html>
<head>
<title>Pagina hello</title>
</head>
<body>
<?php echo "<h1>Acesta este un
h1</h1>";
echo "<h2>subtitlu - sau
h2</h2>";
echo "<p>Paragraf de text</p>";
echo "<p>Un alt paragraf de text
<br>scris pe doua randuri</p>";
?>
</body>
</html>

FIGURA 9: ELEMENTE HTML INSERATE PRIN PHP

n PHP, ca n alte limbaje de programare, putem include comentarii care s-i permit unui
cititor s determine cu uurin utilitatea scriptului, ct i alte informaii referitoare la script.
De exemplu, se poate include un comentariu care precizeaz numele fiierului care conine
scriptul, astfel nct acesta s apar n versiunile tiprite ale scriptului.

Iat un model sintactic pentru comentariile PHP.

// Scriei aici comentariul
Dup cum se poate vedea, un comentariu ncepe cu dou caractere slash, urmate de un spaiu.
n continuare, linia conine comentariul, care poate include orice caractere, inclusiv caractere
speciale

Iat un exemplu simplu de script PHP care include comentarii:

<?php
// script - exemplu.php
// Acest script afieaz i un mesaj vizibil
pentru utilizator.
echo (Acesta este un script teribil.);
?>

Elemente de programare PHP

Folosirea variabilelor n PHP

Stocarea i manipularea valorilor numerice sau alfanumerice, se face n variabile, definite

printr-un nume, precedat de semnul $. Variabile nu trebuie declarate nainte de utilizare, sunt
considerate declarate la iniializare iar tipul variabilei este ales automat. Odat iniializat, o
variabil poate fi re-utilizat pe parcursul scriptului. Atribuirea unei valori se face cu
operatorul =: $numevaribila = value; .

Numele unei variabile PHP poate conine litere, cifre i caracterul de subliniere (_) dar
trebuie s nceap cu o liter sau caracterul de subliniere. O variabil nu poate conine spaii.
Exemple: $var, $nume, $date_client, $valoare, $x35.

iruri de valori / vectori

Ca i JavaScript, PHP suport vectori (arrays) - colecii de valori individuale grupate ntr-o
singur variabil.

n PHP, putem folosi trei tipuri de vectori:

Numerici
Associativi
Multidimensionali

Vectorii numerici sunt similari celor din Javascript valorile individuale din vector sunt
accesibile printr-un index (ID) numeric. Crearea unui vectornumeric poate fi fcut astfel:
$studenti = array("Alexandra","Vlad","Cristina"); n acest caz, $studenti[0] va avea valoarea
Alexandra, $studenti[1] va avea valoarea Vlad i $studenti[2] va avea valoarea
Cristina.

Un vector poate fi creat i astfel:

$studenti[0] = "Alexandra";
$studenti[0] = Vlad;
$studenti[2] = Cristina;
Vectorii asociativi

Vectorii asociatvi folosesc n locul id-urilor numerice, id-uri valorice ca n exemplul urmtor:

$note = array("Alexandra"=>9, "Vlad"=>8, "Cristina"=>10);

n acest caz, $note[Alexandra] va avea valoarea 9, $note[Vlad] va avea valoarea 8 i

$note[Cristina] va avea valoarea 10.

n cazul vectorilor multidimensionali , fiecare element din vectorul principal poate fi un

vector la rndul lui, iar n subvectorul creat fiecare elemen poate fi un nou vector .a.m.d.

Exemplu:

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

Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pagina hello</title>
</head>
<body>
<?php
$facultate = array
(
"nume"=>array ("Alexandra","Vlad","Cristina"),
"note"=>array ("9","8","10"),
"profesori"=>array ("Mircea Risteiu","Ciprian Cucu")

);

echo "<h1>Note studenti</h1>";

echo "<p>Profesorii . $facultate[profesori][0]. si .
$facultate[profesori][1]. au dat studentului .
$studenti[nume][0]. Nota .$studenti[note][0].</p>;
?>
</body>
</html>

Numere i iruri

Programele de calculator manipuleaz datele, care reprezint informaii. Programele PHP

folosesc dou categorii principale de date: numere i iruri.

Decizia privind modul de stocare a datelor este important. n mod caracteristic, datele se
stocheaz sub form de numere atunci cnd se dorete executarea unor operaii matematice
asupra datelor. Pe de alt parte , irurile sunt stocate folosind o modalitate care faciliteaz
nelegerea lor de ctre operatorul uman.
Numere

PHP folosete dou categorii de numere: ntregi i duble. Numerele ntregi reprezint
numerele fr parte fracionar folosite la numrare, plus zero i numerele negative. Cu alte
cuvinte, n PHP termenul de ntreg are aceai semnificaie ca i n matematic.

De exemplu, numrul 1000 poate fi reprezentat n PHP sub form de ntreg. Numerele duble,
spre deosebire de numerele ntregi, reprezint valori numerice care pot include fracii
zecimale, ca de exemplu 2,5. Numerele duble sunt sinonime cu numerele reale din
matematic. Uneori, numerele duble mai sunt denumite i numere cu virgul mobil (n limba
englez se folosete punctul zecimal n loc de virgul).

Deoarece PHP stocheaz numerele n calculatoare, care dispun de o cantitate limitat de

memorie, numerele ntregi i duble din PHP difer de omoloagele lor matematice prin aceea
c precizia lor este limitat. n general, numerele ntregi sunt stocate sub form de valori pe
32 de bii, ceea ce le limiteaz la domeniul cuprins ntre -2.147.648 i 2.147.647 inclusiv.
Totui, unele calculatoare stocheaz numere PHP ntregi ntr-un mod mai compact, limitnd
i mai mult domeniul de valori posibile.
Scrierea numr PHP este simpl. Un ntreg PHP se obine prin scrierea cifrelor care i
alctuiesc valoarea. Dac valoarea este negativ, scriei un semn minus imediat la stnga
numrului. Evitai s scriei spaii sau virgule ca parte a unui ntreg PHP. Iat cteva exemple
de numere PHP ntregi corecte i incorecte:
-3 Corect
0 Corect
5 Corect
2.5 Incorect; conine o parte fracionar
1,024 Incorect; conine o virgul
-7 Incorect; conine spaiu ntre semnul minus i cifr
2147483648 Incorect; prea mare

Un numr PHP dublu se scrie cu ajutorul unei serii de cifre, plasnd un punct zecimal la
locaia adecvat. Ca n cazul ntregilor PHP,dac valoarea este negativ, scriei un semn
minus imediat la stnga numrului. De asemenea, din nou similar cu numerele PHP ntregi,
trebuie s evitai a scrie spaii sau virgule ca parte a unui ntreg PHP. Iat cteva exemple de
numere duble corecte i incorecte:

-2.5 Corect
0.0 Corect
5.125 Corect
2 Incorect; i lipsete punctul zecimal

Cnd scriem numere duble foarte mari sau foarte mici, putem folosi o form special, care
arat astfel: 2.3e4. Numrul plasat dup litera e determin nmulirea cu 10 la puterea dat de
numrul respectiv a numrului plasat anterior literei respective. De exemplu, numrul dublu
dat anterior are valoarea s,3x104, iar valoarea dubl -1.e-10 are valoarea -1,1x10-10.
iruri (string)

irurile sunt utile pentru stocarea datelor care nu pot fi calculate, precum nume i adrese.
Pentru a specifica un ir n PHP, caracterele care alctuiesc irul sunt incluse ntre ghilimele
duble; de exemplu, irul reprezentnd numele fizicianului care a formulat teoria relativitii
este Albert Einstein.
PHP faciliteaz includerea n iruri a unor caractere speciale, precum caracterele de salt la
linie nou, prin furnizarea de secvene escape care reprezint caractere speciale. Iat
secvenele escape folosite n PHP:

\n salt la linie nou

\r retur de car
\t caracter de tabulare pe orizontal
\\ backslash
\$ simbolul dolarului
\* ghilimele duble

Ca exemplu, iat un ir care include un retur de car, urmat de un salt la linie nou: Salut,
lume! \r\n. Reinei c fiecare secven escape ncepe cu un backslash (\). Pentru a include
un backslash ntr-un ir, trebuie s folosii secvena escape adecvat, care este alctuit din
dou caractere backslash.
Operatori

PHP include operatorii familiari folosii pentru executarea operaiilor aritmetice:

+ Adunare
- Scdere
* nmulire
/ mprire

Utilizarea asteriscului (*) ca simbol al nmulirii poate prea neobinuit; totui, este un
simbol frecvent folosit n limbajele de programare, deoarece previne confuzia care poate
aprea dac n locul acesteia ar fi fost folosit litera x.

Iat cteva exemple simple care demonstreaz utilizarea operatorilor pentru a efectua calcule
i pentru a atribui valori variabilelor:
$profit = $vanzari - $cheltuieli;
$arie = $inaltime * $latime;
$circumferinta = $3.14159 * $diametru;
$rata_impozit = $impozit / $venit_impozabil;

Variabilele sau valorile literare asociate cu un operator se numesc operanzi. De exemplu,

operanzii operatorului de scdere din prima instruciune prezentat ca exemplu sunt
variabilele $vanzari i $cheltuieli.

O proprietate interesant a operatorului de mprire este aceea c returneaz o valoare

ntreag dac ambii si operanzi sunt ntregi, iar rezultatul este un numr ntreg; n caz
contrar, returneaz o valoare cu virgul mobil.. astfel, instruciunea de atribuire $x = 10 / 3;
atribuie valorii $x valoarea cu virgul mobil 3.33333333333, chiar dac operanzii
operatorului de mprire sunt ambii ntregi.

n afar de aceti operatori aritmetici familiari, PHP include numeroi operatori mai puin
cunoscui:
% Modulo ++ Incrementare
<<-- Descrementare . Concatenare
Similar operatorului de mprire, operatorul modulo execut o mprire; cu toate acestea,
operatorul modulo returneaz restul, nu ctul mpririi. De exemplu, prin mprirea lui 10
la 3 se obine ctul3 i restul 1. Deci, instruciunea de atribuire atribuie variabilei $x valoarea
1.

n operare, operaiile de adugare, respectiv de scdere a unei uniti dintr-o valoare sunt
frecvent ntlnite. Pentru comoditate, PHP include operatori care execut aceste operaii.
Operatorul de incrementare adaug o unitate la valoarea unai variabile, iar operatorul de
decrementare scade o unitate din valoarea unai variabile. Operatorii sunt utilizai astfel:
++$x;
--$y;

Reinei c aceti operatori au nevoie de un singur operand, n timp ce majoritatea

operatorilor necesit doi operanzi. Prima instruciuna adaug o unitate la valoarea variabilei
$x, n timp ce a doua scade o unitate din valoarea variabilei $y. Dac preferai, putei folosi
aceti operatori n instruciuni de atribuire, dup cum urmeaz:
$x = ++$y

Aceast instruciune adaug o unitate la valoarea variabilei $y i atribuie valoarea rezultat

variabilei $y.
n afar de aceti operatori, PHP include un operator de concatenare a irurilor, denumit
uneori operator cat sau operator de unire, deoarece funcia sa const n unirea irurilor. De
exemplu, s considerm urmtoarele instruciuni de atribuire:
$nume_botez = Titan;
$nume_familie = Berkovici;
$nume = $nume_botez . . $nume_familie

Primele dou instruciuni de atribuire aloc valori ir unor variabile scalare. Ultima
instruciune de atribuire folosete operatorul de unire pentru a uni numele de botez cu numele
de familie i pentru a insera un spaiu ntre acestea. Valoarea atribuit variabilei $nume este
Titan Berkovici.

Ca n matematic, PHP evalueaz operatorii de nmulire i de mprire anterior operatorilor

de adunare i de scdere. Aceast caracteristic se numete preceden. Datorit precedenei,
instruciunea $x = 1 + 2 + 3; atribuie variabilei $x valoarea 7, chiar dac operatorul de
adunare apare naintea celui de nmulire. Dac dorii s controlai precedena unei expresii,
putei folosi paranteze. De exemplu instruciunea $x = (1 + 2) + 3; atribuie variabilei $x
valoarea 9, deoarece partea inclus ntre paranteze a expresiei este evaluat prima, aa cum se
procedeaz n algebr.
Funcii

n afar de operatori, PHP include funcii care execut operaii utile. Iat unele exemple de
funcii:

abs(x) Returneaz valoarea absolut a lui x

ceil(x) Returneaz x, rotunjit la ntregul imediat superior
floor(x) Returneaz x, rotunjit la ntregul imediat inferior
max(x,y) Returneaz valoarea maxim a unui set de valori
min(x,y) Returneaz valoarea minim a unui set de valori
pow(x,n) Returneaz numrul x, ridicat la puterea n
 strftime(f) Returneaz data, formatat conform parametrului f
sqrt(x) Returneaz rdcina ptrat a lui x

n afar de acestea, PHP include multe alte funcii. Majoritatea funciilor necesit una sau mai
multe valori de intrare, cunoscute sub numele de argumente. De exemplu, funcia sqrt
necesit un argument care specific valoarea a crei rdcini ptrate trebuie calculat.
Condiii i bucle

Dup cum precizam n capitolul trei, fluxul unui program poate fi determinat prin structuri
alternative (condiii) i repetitive (bucle) bazate pe operatorii de tip boolean (logici):
==,<,>,<=,>=,&& (i), ||(sau), !(not operatorul negaie).
Exemple:
((x == 5) && (y == 6)) va avea valoarea TRUE (adevrat) dac x=5 i y=6
((x!=4) || (y>=5)) va avea valoarea TRUE dac x diferit de 4 sau y mai mare sau egal
cu 5

Pentru a se folosi o structur alternativ, utilizm instruciunea IF care n PHP are sintaxa:

if (conditie)
instructiune daca conditie returneaz true;
else
instructiune daca conditie returneaz false;

Pentru implementarea ciclurilor repetitive, sunt disponibile n PHP trei variante:

while repet un bloc de instruciuni dac i atta timp ct este satisfcut

condiia

while (condiie)
instuciune;

do...while parcurge un bloc de instruciuni o dat i l repet ct timp condiia

de la finalul ciclului este ndeplinit

do
{
instruciune;
}
while (condition);

for - parcurge un bloc de instruciuni de un numr determinat de ori.

for (initializare; conditie;

increment)
{
instruciune;
}
 Ciclul for este caracterizat de o variabil contor care determin numrul de iteraii.
Variabila contor primete o valoare iniial i crete cu o anumit valoare (increment)
pn cnd condiia nu mai este satisfcut.

Exemplul urmtor afieaz de 5 ori mesajul Hello World, folosind o variabil contor
i:

for ($i=1; $i<=5; $i++)

{
echo "Hello World!<br />";
}

foreach repet un bloc de instruciuni pentru fiecare din elementele unui vector

foreach (array as value)

{
code to be executed;
}

Exemplul urmtor afieaz valorile coninute ntr-un vector:

$arr=array("one", "two", "three");

foreach ($arr as $value)
{
echo "Value: " . $value . "<br />";
}

Interaciunea cu vizitatorii

Formulare HTML

Cele mai multe aplicaii PHP se bazeaz pe preluarea datelor de la vizitatorii unui sit i
returnarea unor rezultate dup procesarea datelor iniiale. Interaciunea ntre vizitatori i
aplicaia rulat pe sit este realizat cu ajutorul formularelor HTML.

Un formular HTML are patru seciuni:

Tag-ul de nceput al formularului - <form>. Acest tag trebuie s conin o

aciune (action) i o metod method. Aciunea specific un URL sau calea spre o
aplicaie care va prelua datele din formular pentru a le procesa mai departe.
Metoda poate fi GET sau POST i specific modalitatea n care datele vor fi
preluate.
Coninutul formularului, incluznd cmpuri de input. Cmpurile de input sunt
diverse tipuri de casete prin care utilizatorul transmite valori (completeaz un
text sau bifeaz o caset de selecie). Un asemenea cmp trebuie s includ
proprietile type i name. Numele cmpului valoarea proprietii name va fi
 utilizat ca variabil n PHP - pentru a transmite datele din cmp. Tipul (type)
este cel mai frecvent unul dintre:
o Text: folosit pentru a culege de la vizitator ntre 2 i 2000 de caractere.
Pentru texte de dimensiune mare, tipul textarea este recomandabil.
o Checkbox: casete de validare, utilizate pentru a permite vizitatorului
selectarea unor opiuni dintr-o list de posibiliti permite selecie
multipl.
o Radio: butoane de opiuni permit vizitatorilor s aleag o singur
variant dintr-o list de opiuni.
o Select: permit selectarea unei valori dintr-o list cu derulare.
o Password: un cmp de tip text care ascunde valorile caracterelor tastate.
Buton de comand - care reseteaz formularul sau trimit datele spre procesare.
Tehnic sunt considerate tot cmpuri de input, cu valorile type submit, reset sau
image (pentru butoanele create de utilizator).
Tagul de final al formularului - </form>.

Figura 19 arat utilizarea unui formular HTML pentru a transmite valori dinspre utilizator
nspre o aplicaie PHP. Codul este n continuarea imaginii.

FIGURA 10: TRIMITEREA VALORILOR PRIN FORMULARE HTML

Fiierul PHP (aplicaia care

Fiierul HTML (cu formularul)
proceseaz datele. Trebuie s se
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
numeasc welcome.php):
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
dtd">
HTML 4.01 Transitional//EN"
<html>
"http://www.w3.org/TR/html4/loose.d
<head>
td">
<title>Transmitere valori prin
<html>
formular</title>
<head>
</head>
<title>
<body>
Welcome
<form method="post"
<?php
action="welcome.php">
echo $_POST['nume'];
<p>Numele: <input
?>
style="text" name="nume" />
</title>
</p>
</head>
<p>Orasul: <input
<body>
style="text" name="oras" />
<p>Bine ai venit,
</p>
<?php echo $_POST['nume']; ?>
<p><input type="submit"
din
name="submit" value="Trimite
<?php echo $_POST['oras']; ?>
datele" /></p>
</body>
</form>
</html>
</body>
</html>
Folosirea includerilor pentru eficienta

Una din funcionalitile interesante ale PHP este dat de directiva include care permite
integrarea unei seciuni de cod n mai multe fiiere ori-de-cte ori se dorete, fr a scrie
efectiv codul de mai multe ori. Codul respectiv este scris ntr-un fiier separat i integrat unde
este necesar prin aceast directiv include.

De exemplu, dac se dorete afiarea unui anumit mesaj pe fiecare pagin a unui sit (o adres,
date de contact, data de azi), scrierea efectiv a informaiei nu este eficient: se pierde timp la
inserare, pot aprea erori (de scriere), iar dac este necesar modificarea informaiei, trebuie
editat fiecare fiier n parte.

n codul care urmeaz este prezentat soluia de a folosi include pentru a afia un mesaj de
Bine ai venit. La rularea fiierului includ.php n browser, se obine rezultatul din figura 20:

Fiierul header.php:

<h2>Bine ai venit</h2>
<?php
echo "Astazi este". date("F d");
?>

Fiierul includ.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.d
td">
<html>
<head>
<title>
Bine ai venit
</title>
</head>
<body>
<?php
include('header.php');
?>
</body>
</html>

FIGURA 11: DIRECTIVA INCLUDE

In locul instruciunii include, va fi inserat n cod ntreg codul fin fiierul menionat n
paranteze, n cazul de fa header.php. Repetarea instruciunii duce la repetarea efectului, att
n acelai fiier ct i n alte fiiere.
Utilizarea funciilor definite de utilizator

Funciile definite de utilizator sunt o alt modalitate de cretere a eficienei n scrierea unui
cod PHP, permind apelarea unei secvene de cod din orice zon a programului. Funciile
pot modifica valorile unor variabile i sunt n sine mini-programe care au variabile proprii.
Pentru a utiliza o variabil n cadrul unei funcii, ea trebuie declarat de tip global, cu
directiva global $varname.

O funcie poate fi scris oriunde n cod i poate fi apelat de oriunde, sau poate fi scris ntr-
un fiier separat i inclus ca n exemplele de mai sus.

Pentru a defini o funcie, respectai modelul urmtor:

function nume_functie (nume_argument)

{
// aici se insereaza corpul functiei
}

n cadrul modelului, nume_functie este numele funciei, iar nume_argument este numele
argumentului funciei. n PHP, numele funciilor nu prezint sensibilitate la diferena ntre
majuscule i minuscule; ca atare, f() i F() reprezint referiri la aceeai funcie. Cuvntul
cheie function, numele funciei i lista cu argumente alctuiesc antetul funciei. Termenul de
corp al funciei se refer la instruciunile incluse ntre parantezele acolade care urmeaz dup
antetul funciei. Instruciunile din corpul funciei sunt executate atunci cnd funcia este
apelat.

Dac se dorete definirea unei funcii care nu are argumente, se poate omite nume_argument
dac se vrea definirea unei funcii cu mai multe argumente, se pot include argumente
suplimentare dup nume_argument, fiecare argument fiind separat de vecinul su prin
intermediul unei virgule.

Parantezele i numele argumentelor incluse ntre aceasta poart numele de list cu argumente.
Ca exemplu, iat o funcie care calculeaz aria unui dreptunghi:

function calculeaz_arie ($inaltime,

$latime)
{
return $inaltime * $latime
}

Lista cu argumente a funciei calculeaza_arie cuprinde argumente $latime i inaltime$.

Corpul funciei este alctuit dintr-o singur instruciune; cu toate acestea corpul unei funcii
poate conine un numr arbitrar de instruciuni. Dac se dorete ca o funcie s returneze o
valoare, trebuie s determinm funcia s execute o instruciune return care furnizeaz
valoarea respectiv. Instruciunea return determin sistarea executrii funciei; nu este
necesar ca aceasta s fie ultima instruciune fizic din corpul funciei. Dac se definete o
funcie care nu are nici o instruciune return, funcia va returna valoarea special NULL.
Apelarea unei funcii definite de utilizator

O funcie definit de utilizator poate fi apelat n acelai mod ca o funcie ncorporat. De

exemplu, iat o instruciune care apeleaz funcia calculeaz_arie: $arie = calculeaza_arie(2,
4);

Valorile argumentelor efective - 2i 4 - le nlocuiesc pe acelea ale argumentelor formale din

corpul funciei calculeaza_arie, care se comport ca i cum ar fi fost scris astfel: return 2 * 4;

Php & Mysql

MySql este un sistem de gestiune a bazelor de date, ce funcioneaz n modelul relaional

permite separarea informaiilor n tabele sau seciuni distincte dar care pot avea relaii ntre
ele. Un tabel const n mai multe cmpuri sau coloane distincte, cu tipuri diferite de date
(text, numere, date calendaristice).

nainte de a prezenta creare i utilizarea bazelor de date MySql, trebuie discutate cteva
concepte legate de proiectarea unei baze de date de cte tabele este nevoie, ce vor conine,
cum vor fi legate ntre ele .a.m.d.

Anomalii i redundane

De ce o schema a bazei de date poate fi "rea"? Anomaliile, care apar n lucrul cu baza de date.
se produc datorit dependenelor nedorite" care se manifest ntre atributele din cadrul
schemelor relaiilor din baza de date. Aceste dependene determin creterea redundantei
datelor si reducerea flexibilitii structurii bazei de date. Fcnd extrem de dificil lucrul cu ea.

n al doilea rnd. ca o consecina a primei cauze, actualizarea unei baze redundante poate
duce la situaia cnd ea va conine fapte logic contradictorii. O parte de date pot rmne
nemodificate. Deci o baz de date "rea" duce la apariia unor inconsistene la modificarea
datelor.

In al treilea rnd. o baza de date "rea" poate limita posibilitatea de inserare a datelor. Intr-o
relaie nu pot fi introduse date despre o entitate pn nu se cunosc alte date conform
restriciilor de integritate ale entitii.

In al patrulea rnd. pot aparea pierderi de date la tergere. In mod normal, prin operaia de
tergere trebuie s se poat elimina din baza de date numai datele pe care dorim s le stergem.
Atunci cnd. concomitent cu aceste date sunt terse si altele, care nu mai pot fi reconstruite
din baza de date, spunem ca la operaia de tergere se produc pierderi de date.

REDUNDN,

Surplus de informaie transmis fa de strictul necesar i care asigur exactitatea transmiterii

informaiei n telecomunicaii. Abunden inutil de expresii, de cuvinte sau de imagini n
formularea unei idei.
 Normalizare si denormalizare

n proiectarea bazelor de date relationale, tehnica normalizrii este folosit pentru a elimina
asa-numitele anomalii de actualizare. Aceast tehnic se sprijin pe o solid fundamentare
teoretic, n care notiunea de dependent functional joac un rol cheie.

Dac vom considera o tabel care consemneaz comenzile clientilor unei companii, aceasta
ar putea avea urmtoarele atribute:

Cod_C - Codul clientului (ex: C03);

Nume_C - Numele clientului (ex: Comimpex SRL);

Loc_C - Localitatea

Info_C - Informatii despre client (ex: adresa, telefon/fax, etc)

Cod_prod - Codul produsului (ex: PL003A);

Den_prod - Denumirea produsului (ex: Placa de retea Ethernet EtherLink III);

Fabr_prod - Fabricantul produsului (ex: 3Com);

Cant - Cantitatea comandat (ex: 20 buc.);

Tabela poate descrie corect comenzile, dar exist o serie de inconveniente, majoritatea
datorate redundantei. De pild schimbarea adresei unui client impune actualizarea adresei n
toate comenzile pe care acesta le-a lansat (anomalia de modificare). Pe de alt parte nu se pot
memora informatii despre un client ct vreme nu se deruleaz comenzi ale acestuia
(anomalia de inserare). n fine, dac stergem singura linie din tabel cuprinznd o comand a
unui client, pierdem toate informatiile relative la acesta.

Normalizarea se realizeaz prin descompunerea tabelelor n mai multe tabele, astfel nct
tabela initial s poat fi recompus fr pierderi de date prin operatii de conectare (join). n
principiu, se ajunge n majoritatea cazurilor la o tabel numit primar, care cuprinde datele
esentiale (n exemplul anterior se poate considera o tabel avnd doar coloanele Cod_C,
Cod_P si Cant) si mai multe tabele numite de obicei nomenclatoare, cuprinznd detalii
caracteristice pentru anumite entitti (de exemplu o tabel cu toti clientii si informatiile
despre acestia: Cod_C, Nume_C, Loc_C, Info_C, etc).

Pentru o aplicatie care trebuie sa gestioneze cartile dintr-o biblioteca sau librarie, avem
nevoie de o baza de date care sa contina date despre cartile cuprinse. De exemplu, titlu,
autori, ISBN, domeniu, nr. de pagini, editura.

Un tabel realizat fizic (cu pixul sau in excel) in care introducem cartile pe care le avem, ar arata la o prima
vedere in modul urmator.

Domeni Nr. Editur

Titlu Autor1 Autor2 ISBN
u pagini a

PHP and Luke Laura 067231784 PHP, 867 Sams

MySQL
Web
Developme Welling Thomson 2 MySQL
nt

MySQL Luke Laura 067232584

MySQL 300 Sams
Tutorial Welling Thomson 5

In primul rand, acest tabel nu este destul de eficient in a gestiona spatiul de stocare. Daca ne
imaginam pentru o secunda ca Luke si Laura au fost scriitori harnici si ne-au livrat 500 de
carti pentru baza noastra de date, numele lor va aparea de 500 de ori fiecare. Deci 25
caractere (fiecare nume) * 500 = 12.500 biti ocupati degeaba. (date redundante)

In al doilea rand, aceasta structura nu protejeaza intgritatea datelor. Daca ei ne-au livrat cele
500 de carti pe parcursul a catia ani si datele nu au fost introduse cu copy+paste ci scrise
efectiv de o persoana, exista o probabilitate ridicata sa existe greseli de scriere pe undeva
(Thompson in loc de Thomson). Datele noastre contin acum greseli si oricine va cauta carti
dupa numele autorului va avea cateva rezultate lipsa. Acelasi lucru se intampla cu numele
editurii. Daca Sams publica sute de titluri si numele este gresit introdus pe ici pe colo, lista
cartilor la o cautare dupa editura nu este completa.

In al treilea rand, acest tabel este rigid. O data ca ne-am limitat la un maxim de 2 autori la o
carte, desi exista carti scrise de colective de autori mai mari de zece. Acest tip de limitare este
foarte frecvent intalnit in tabelele cu informatii personale referitoare la diversi indivizi, unde
designul tipic de tabel include coloane pentru Telef.1, Telef.2 si Telef.3. In ambele cazuri
limitam posibilitatile de crestere pentru datele noastre. Alta limitare este generata de faptul
ca, folosind un singur tabel, marimea acestuia va creste mai repede si vom putea avea
dificultati din partea sistemului de operare, referitoare la marimea fisierului de date.

Prima forma normala

Procesul de normalizare implica transformarea datelor dupa trei forme progresive. Nu se

poate atinge o forma superioara de normalizare, pana nu au fost atinse toate formele
inferioare.

Prima forma implica eliminarea datelor redundante din randurile orizontale. Trebuie sa ne
asiguram ca, pe un anumit rand nu exista nici o duplicare si ca fiecare coloana contine
minimul de informatie posibila. (atomicitate)

In tabelul nostru de mai sus, avem doua violari ale formei normale 1: In primul rand avem
mai mult decat un camp pentru autor si in al doilea rand, campul domeniu contine mai mult
decat o singura informatie (un singur fapt), ceea ce duce la dificultati in cautarea cartilor dupa
un anumit domeniu. In plus, cu doua campuri de auor, avem doua campuri in care trebuie sa
cautam, pentru a identifica scrierile unui anumit autor.

Putem fenta aceste probleme, prin modificarea tabelului astfel incat sa aiba un sungur camp pentru autor, doua
inregistrari pentru fiecare carte cu doi autori, dupa cum arata mai jos:

Titlu Autor ISBN Domeni Pagin Editur

 u i a

PHP and MySQL 067231784

Luke Welling MySQL 867 Sams
Web Development 2

PHP and MySQL 067231784

Laura Thomson PHP 867 Sams
Web Development 2

067232584
MySQL Tutorial Laura Thomson MySQL 300 Sams
5

067232584
MySQL Tutorial Luke Welling MySQL 300 Sams
5

Desi aceasta abordare nu are coloane redundante (date repetative pe aceasi linie data), si
campul domeniu are doar o informatie, avem problema ca acum avem doua inregistrari
(randuri) pentru fiecare carte. Mai mult, pentru a ne asigura ca o cautare dupa autor si subiect
functioneaza (ex. Carti despre PHP de Luke Welling), am avea nevoie de patru randuri ca sa
avem fiecare combinatie de autor si domeniu. In plus, nu ne conformam cu foma normala doi,
care urmeaza mai jos.

O solutie mai buna este sa separam datele redundante in tabele separate, cu tabelele in
legatura, unele cu altele. In cazul acesta trebuie sa cream un tabel autor si un tabel domeniu
pentru a stoca informatia, si renuntam la aceste campuri din tabelul carti.

Autori

Autor_I
Nume Prenume Biografie
D

1 Welling Luke Author of books on PHP and MySQL

2 Thomson Laura Another author of books on PHP and MySQL

Domenii:

Domeniu_I
domeniu
D
1 PHP
2 MySQL
Carti:

ISBN Titlu Pagini Editura

0672317842 PHP and MySQL Web Development 867 Sams

0672325845 MySQL Tutorial 300 Sams

La crearea tabelului autor de asemenea se poate imparti numele autorului in nume prenume,
pentru a respecta cerinta de a stoca cat mai putina informatie in fiecare coloana. Fiecare tabel
are o cheie primara, prin care se pot lega tabelele cand se cauta anumite date. o cheie primara
trebuie sa aiba valori unice in tabela (nu pot exista doua carti cu acelasi ISBN) si de
asemenea o cheie primara este INDEX ceea ce face mai rapida gasirea datelor.

Definirea relatiilor

Datele noastre sunt acum frumos impartite. Dar inca nu avem relatii intre tabele, deci nu
putem lucra cu ele. Exista trei tipuri principale de relatii intre doua tabele:

Unu la unu (1 : 1)

Unu la mai multi (1:n)

Many to Many (n:n)

Relatia dintre tabelul carti si tabelul autor este de tipul n:n. O carte poate fi scrisa de unul sau
mai multi autori. De asemenea un autor poate avea una sau mai multe carti. Pentru a realiza o
legatura de asemenea tip, avem nevoie de o a treia tabela care sa serveasca drept legatura
intre cele doua:

carti_autori:

ISBN Autor_ID
0672317842 1
0672317842 2
0672325845 1
0672325845 2

In mod similar, tabelul domeniu este legat in relatie n:n de tabelul carti, pentru ca o carte se
poate referi la mai multe domenii si un domeniu poate fi abordat de mai multe carti.
carti_domeniu:

ISBN Domeniu_ID
0672317842 1
0672317842 2
0672325845 2

Relatiile 1:n vor fi descrise mai jos. In momentul de fata, avem stabilite relatii intre tebelele
carti, autori si domenii. O carte poate avea acum un numar nelimitat de autori si se poate
referi la un numar nelimitat de domenii. De asemenea putem cu usurinta cauta carti dupa un
anumit autor sau care se refer la un anumit domeniu.
In tabelele create mai sus pentru stablirea relatiilor n:n, valorile stocate sunt cheile primare
din tabelele carti, autori si domenii. Campurile dintr-un tabel care se refera la chei primare
din alt tabel sunt denumite chei externe si se utilizeaza pentru definirea relatiilor. In
majoritatea sistemelor de gestiune a bazelor de date cheia externa poate fi folosita si pentru a
forta anumite restrictii. De exemplu, nu veti avea voie sa introduceti o inregistrare in
carti_domenii decat daca respectiva carte si respectivul domeniu deja exista in tabelele carti
respectiv domenii. De asemenea nu pot fi sterse inregistrarile din tabelele originale, cat timp
exista inregistrari in tabelele copii.

Forma normala 2

Daca forma normala 1 se refera la redundanta datelor pe randuri, forma normala 2 se refera la
redundanta pe coloane. Dupa cum am mai spus, formele sunt progresive, deci nu putem
respecta forma normala 2 daca nu am trecut prin forma normala 1.

Sa revedem noul tabel carti:

ISBN Titlu Pagini Editura

0672317842 PHP and MySQL Web Development 867 Sams
0672325845 MySQL Tutorial 300 Sams

Acest tabel este corect, dupa forma normala1; nu se repeta date pe un anumit rand si fiecare
coloana are minimul posibil de informatie. Totusi, in coloana editura, avem acelasi nume de
mai multe ori, ceea ce contravine formei normale 2. Dupa cum am mentionat aceasta lasa loc
pentu erori de inregistrare a datelor si nu este eficient in utilizarea spatiului de stocare.
Pentru a normaliza acest tabel trebuie sa impartim din nou datele, dupa cum urmeaza:

Edituri:

Editura_ID Nume Editura

1 Sams

In cazul acesta, se realizeaza o relatie 1:n intre tabelul carti si tabelul edituri. O anumita carte
poate fi realizata de o singura editura (relativ la scopul problemei noastre) si o editura va
scoate mai multe carti. In cazul unei relatii 1:n, trebuie sa plasam o cheie externa in zona de
multi, care sa se refere spre cheia primara:

carti:

ISBN Titlu Pagini Editura_ID

0672317842 PHP and MySQL Web Development 867 1
0672325845 MySQL Tutorial 300 1

A doua cerinta pentru Forma Normala 2 este ca nu poti avea date in tabele cu o cheie
compusa care sa nu se relationeze la toate partile cheii compuse. O cheie compusa este o
cheie primara formata din mai multe coloane, ca in tabelul carti_autori.
Sa presupunem ca am vrea sa adaugam o monitorizare a review-urilot primite pentru fiecare
carte si am incepe cu tabela urmatoare:

review:

Reviewer_I Reviewer_Na
ISBN Review_Text
D me
067232584 1 What a great book! I learned a Mike Hillyer
5 lot!

In acest tabel, combinatia Reviewer_ID & ISBN formeaza cheia primara (compusa),
asigurandu-ne ca nici o persoana nu va scrie mai mult de o referinta referitoare la o anumita
carte. In acest caz, numele persoanei care scrie recomandarea este legat doar de reviewer_id
si nu de ISBN, ceea ce reprezinta o violare a formei normale 2.
Aceasta situatie se rezolva prin folosirea a doua tabele separate pentru datele care se
relationeaza doar la o parte din cheia primara. Daca portiunea cheii primare la care se refera
campul este cheie primara in alt tabel, datele(corespunzatoare) trebuie mutate in tabelul
respectiv. (ca si in aceasta situatie unde reviewer_id va fi un tabel separat).

Persoane_care_recomanda (reviewers):

Revie Reviewer
Reviewer_Na Reviewer Reviewer Reviewer Reviewer_
wer_I _Provinc
me _House _Street _City PostalCode
D e

Main
1 Mike Hillyer 123 Calgary Alberta T1S-2N2
Street

Review (recomandari):

ISBN Reviewer_ID Review_Text

067232584
1 What a great book! I learned a lot!
5

Forma normal trei

Aceasta forma este utilizata mai rar. Scopul ei este sa elimine datele care nu depind in
intregime de o cheie primara, dar sunt dependente de alte valori din tabela. In tabela
Persoane_care_recomanda, campurile Reviewer_Street si Reviewer_City depind de fapt
(direct) de codul postal campul Reviewer_PostalCode si nu de Reviewer_ID.

Pentru a aduce acest tabel in corespondenta cu forma normala 3, va trebui creat un tabel bazat
pe codul postal:

PostalCode Table:

Postal_Code Street City

T1S-2N2 Main Street Calgary

Bineinteles ca acest nou tabel, nu corespunde formei normale nr.2 din moment ce Street si
City sunt redundante pe verticala, si deci trebuie despartite din nou in tabele separate si zona
(care decide codul postal) va fi in propriul tabel pe care tabelul oras il va referi ca si cheie
externa.
Ultimul exemplu de normalizare sugereaza si ideea ca normalizarea continua, si continua si
continua. De fapt, mai exista inca doua forme normale (4 si 5), dar scopul lor este mai mult
teoretic. Normalizarea aditionala duce la sintaxe mai complexe si poate cauza scaderi de
performante. In unele cazuri performanta poate fi restabilita prin de-normalizare, dar asta deja
este o alta poveste.

Concluzie

Este in general o idee buna sa se urmreasc organizarea datelor mcar conform cu Forma
Normala2 pentru a evita datele redundante, munca inutil (introducerea datelor redundante),
pentru a preveni datele eronate si de a utiliza la maximum capacitatile de stocare existente.
Este bine ca aceeai valoare s nu fie stocat n mai multe locuri, altfel vor trebui realizate
update-uri multiple cnd anumite date trebuie modificate i pot aprea date eronate n tabele.

Forma normala 3 a redus i mai mult redundana, dar cu costul complicrii i reducerii
performanei. In exemplul de mai sus nu prea ne ateptm ca numele strzilor i oraelor s se
schimbe prea des de aceea depinde de la caz la caz unde se pune balana ntre normalizare
i necesar/simplitate.

Ce este XML?

XML (EXtensible Markup Language) este un limbaj descriptiv utilizat pentru structurarea i
organizarea, stocarea i transmiterea datelor. Este suportat de toate sistemele de operare i nu
necesit licen. XML nu este un limbaj de programare i este similar cu HTML-ul dei exist
o serie de diferene majore:

XML a fost proiectat pentru a descrie datele i pentru a pune accentul pe ce

reprezint datele. HTML a fost proiectat pentru a afia datele i se focalizeaz pe
cum arat informaia afiat.

HTML se refer la afiarea informaiei, XML la descrierea informaiei. XML este

o completare pentru HTML, nu o nlocuire. XHTML de care a fost amintit n
capitolul HTML este o combinaie ntre HTML i regulile de formatare XML.

HTML folosete taguri predefinite (<p> pentru paragraf, <h1> pentru titluri,<a>
pentru linkuri) iar XML permite crearea tagurilor proprii cu diferite semnificaii.
Exemplul de mai jos prezint date structurate n format XML, cu taguri definite
expres. Cdul ns nu realizeaz (nc) nimic. Este nevoie de o aplicaie care s
proceseze aceste date:
 <?xml version="1.0" encoding="ISO-8859-1"?>
<mesaj>
<pentru>Risteiu</pentru>
<dela>Cucu</dela>
<subiect>Tehnologii Web</subiect>
<continut>Cand este examenenul de TW?</continut>
</mesaj>

Sintaxa i regulile de formatare ale documentelor XML

XML folosete o sintaxa simpl i clar. Considernd exemplul de mai sus, putem face cteva
observaii:

Un document XML conine dou zone: prolog i root element. Zona prolog apare
la nceputul documentului i este utilizat pentru a descrie documentul fiind
similar zonei head din HTML.n cazul nostru, n prolog avem informaii despre
versiunea de XML utilizat i despre setul de caractere folosit. Restul formeaz
documentul propriu-zis (root element).

Toate elementele XML trebuie s prezinte tagul de nceput i tagul de sfrit.

XML este case sensitive (face diferen ntre literele mari i literele mici) deci
tagurile de final trebuie scrise identic cu cele de nceput.

Imbricarea trebuie s fie consistent (<x><y>...</y></x> nu <x><y>...</x></y>).

Elementele pot avea atribute (ca n HTML) dar este obligatorie trecerea valorilor
atributelor n ghilimele sau apostrofi. (<mesaj data=12/11/2002>...</mesaj>)

Comentariile pot fi adugate astfel: <!-- Comentariu-->

Procesarea i interpretarea XML

Recomandrile XML presupun c interpretarea fiierelor XML este fcut ntr-un anumit
mod, de un procesor XML (parser) . Cele mai cunoscute procesoare sunt Microsoft XML
Parser (MSXML), Apache Xerces2 si Oracle XML. Unele procesoare sunt de asemenea
disponibile n pachete care instaleaz automat i procesoare XSLT folosite pentru a afia
date XML n browser.

Exist dou categorii de procesare XML: tree-based (bazat pe structura arborescent) i

event-based (bazat pe evenimente). Cele mai multe procesoare XML suport ambele
modaliti. Procesoarele de tip tree sunt cunoscute i sum denumirea de DOM (Document
Object Model) parser, iar procesoarele bazate pe evenimente sunt numite SAX (Simple API
for XML).

Procesarea DOM

Afiarea unui document n forma arborescent, subliniaz legtura existent ntre elemente.
n figura de mai jos, elementul <catalog> este printele elementelor <cd> i strmo pentru
<title>, <artist>, <country> .a.m.d. Elementele <cd> sunt frai, cu printe <catalog> i copii
<title>, <artist>, <country>. Vizualizarea de mai jos este obinut cnd nici un fel de stiluri
pentru formatarea documenteleor XML (sub forma XSLT) nu sunt gsite.

FIGURA 12: CATALOG CD-URI IN FORMAT XML

Procesarea DOM permite accesarea elementelor i valorilor acestoria printr-un limbaj de

programare sau un limbaj de scripare, ca Javascript.

Procesarea SAX prezint un document XML sub forma unui ir de evenimente. Pentru
fiecare evniment trebuie scrise aciuni corespunztoare, care s fie apelate la activarea
evenimentului. Asemenea tip de procesare funcioneaz foarte bine cu JAVA.

Unelte XML

Exist multe aplicaii specializate n a lucre cu XML, att gratuite, ct i comerciale. n

general tipul unui asemenea program se regsete n una din urmtoarele variante:

Extensii pentru medii de dezvoltare existente

Medii de dezvoltare specifice XML
Unelte indviduale

Unelte ca Microsoft Visual Studio (http://msdn.microsoft.com/vstudio/) sunt reprezentative

pentru prima categorie. Au un suport XML destul de bine implementat, destinat
dezvoltatorilor de aplicaii. Varianta Visual Studio 2005 include urmtoarele opiuni:

Ajut la crearea i editarea documentelor XML i la verificarea formrii corecte a

unui document
Ofer suport pentru schema XML, inclusiv posibilitatea validrii documentelor i
conversiei din DTD.
Ofer suport XSLT i posibilitatea de a vedea rezultatele transformrilor.
Mediile de dezvoltare XML dedicate acoper aproximativ acelai teren, dar difer n suportul
oferit i n interfaa cu utilizatorul. Cele mai multe au un editor XML, unelte pentru crearea
DTD-urilor i schemelor XML, precum i suport pentru deyvoltare XSLT. Dintre aceste
unelte se remarc:

Altovas XML Suite: http://www.altova.com/suite.html

TIBCO Softwares suite of XML tools:
http://www.tibco.com/software/business_ integration/xml_tools.jsp
DataDirect Technologies Stylus Studio: http://www.stylusstudio.com/

Afiarea Informaiei XML

Vizualizarea fiierelor XML brute este facil n Internet Explorer, Mozilla, Firefox, Opera i
Netscape6+. Pentru a face documentele XML s arate ca pagini web este nevoie de folosirea
unor informaii adiionale (XSLT).
Majoritatea browserelor importante au la ora actual suport pentru XML i XSLT.
Internet Explorer suport XML, CSS, XSLT i XPath ncepnd cu versiunea 6. Versiunea 5
are support pentru XML dar componenta XLS nu este compatibil cu recomandrile oficiale
ale W3C.

Mozilla Firefox, ncepnd cu versiunea 1.0.2, are suport pentru XML and XSLT (i CSS).
Mozilla include expat pentru procesarea XML i include suport pentru XML + CSS. Este de
asemenea disponibil i cu implementare XSLT. Netscape folosete motorul Mozilla ncepnd
cu versiunea 8, deci are acelai tip de suport pentru XML / XSLT.

Opera are suport XML and XSLT (i CSS) ncepnd cu versiunea 9. Versiunea suport doar
XML + CSS.

Vizualizarea documentelor XML

n Firefox i Internet Explorer, documentul XML va fi afiat cu elementul root i urmaii si

evideniai prin coduri de culoare. Un plus, respectiv un minus n stnga unui element poate fi
folosit pentru a expanda sau restrnge structura arborescent. Pentru a vedea structura brut
(fr semnele plus i minus) se folosete View Page Source" sau "View Source" din meniu.

n cazul deschiderii unui fiier XML eronat, eroarea va fi semnalat n browser (n cazul de
mai jos s-a greit nchiderea unui element):
Documentele XML nu au elemente de formatare n ele astfel c majoritatea browserelor
afieaz documentul aa cum este. Pentru a formata datele dintr-un document XML, se poate
folosi CSS, XSL, Javascript sau XML Data Islands.
Utilizarea XLS

Limbajul XSL care este la rndul sau un limbaj XML. Ideea general din spatele XSL
pornete de la conceptele despre CSS introduse n versiunile recente ale limbajului HTML.
Folosind etichetele XSL create n acest scop, este posibil crearea automat a documentelor
HTML standard ale cror coninuturi vin direct din fiierele de date XML. s vedem prin
exemplu, cum fiierul produse.xml va fi publicat:

<?xml version="1.0"?>
<NewShipping>
<Heading>Aplicatii XML HTML</Heading>
<PressRelease>
<Summary>Cele mai structurate informatii
web</Summary>
<Location>
Universitatea "1 Decembrie 1918" din Alba
Iulia
</Location>
<Date Day="26" Month="December" Year="2003" />
<PressNote>Chestiunea zilei</PressNote>
</PressRelease>
<SoftwareLine>
<LineName>SVG pentru modelarea sistemelor</LineName>
<Product>
<Name>P1</Name>
<Description>D1</Description>
<Feature>F1</Feature>
</Product>
<Product>
<Name>P2</Name>
<Description>D2</Description>
<Feature>F2</Feature>
</Product>
</SoftwareLine>
</NewShipping>
BIBLIOGRAFIE
1. Mircea Rteiu, Herbert ten Thij, Gheorghe Marc Bazele comunicrii pe Internet:
planning, designing, programming Editura Aeternitas, 2002.
2. Mircea Rteiu Provocarea viitorului internetului: Scalabilitatea informaiei
Editura Aeternitas, 2003.
3. Mircea Rteiu, At. Styliadys, - Technology, Education and their Interaction - ATEI of
Thessaloniki Publisher 2006, ISBN 961-90887-2-9
4. Mircea Rteiu, At. Styliadys, Herbert Ten Thij, Ghe. Marc - Web- Based Object
Oriented Modeling - Athens 2005, ISBN 960-90889-2-9
5. Ian Graham - The XHTML 1.0 Web Developement Sourcebook - September, 2000
ISBN: 0 471 37486 5, Published by John Wiley and Sons
6. Ian Graham - The HTML 4.0 Sourcebook - 6 April 1998 ISBN 0 471 25724 9,
Published by John Wiley and Sons
7. Peter Moulding - PHP Black Book - Paraglyph Publishing; Book and CD ROM
edition (July 1, 2002), ISBN: 1932111093
8. Hugh E. Williams, David Lane - Web Database Applications with PHP & MySQL -
O'Reilly & Associates; 1st edition (March 2002), ISBN: 0596000413
9. Luke Welling, Laura Thomson - PHP and MySQL Web Development - Sams; Book
and CD edition (March 30, 2001), ISBN: 0672317842
10. Ian Graham and Liam Quin - The XML Specification Guide - February 1999 ISBN: 0
471 32753 0 Published by John Wiley and Sons
11. Dave Shea, Molly E. Holzshlag The Zen of CSS Design: Visual Enlightment for the
Web Peachpit Press, February 2005.
12. Elizabeth Naramore, Jason Gerner, Yann le Scouarnec, Jeremy Stolz, Michael K.
Glass Beginning PHP5, Apache and MySql Web Development Wiley Publishing
Inc., 2005.
13. Arman Danesh Javascript in 10 Simple Steps or Less Wiley Publishing Inc., 2004,
ISBN: 0-7645-4241-9.
14. Sas Jacobs Beginning XML with DOM and Ajax, From Novice to Professional
Apress, 2006.
15. http://w3schools.com/
16. http://www.php.net/manual/en/ref.strings.php
17. http://www.php.net/
18. www.hotscripts.com/PHP/Scripts_and_Programs
19. php.resourceindex.com
20. http://javascript.com/
21. http://www.javascriptkit.com/
22. http://www.optimizare-site.com/