Tehnologii Web

UNIVERSITATEA TITU MAIORESCU
FACULTATEA DE INFORMATICA
TEHNOLOGII WEB
Anul II
Mironela Pîrnău
1
Acest material este destinat studentilor anului II, invatamant la distantă,
specializarea Informatică.
Modul de prezentare are în vedere particularităţile învăţământului la distanţă,
în care studiul individual este determinant. În timp ce profesorul sprijină
studentul prin coordonarea învătării si prin feedback periodic asupra acumulării
cunostintelor si a deprinderilor, studentul alege locul, momentul si ritmul pentru
studiu, dispune de capacitatea de a studia independent si totodată îsi asumă
responsabilitatea pentru initierea si continuarea procesului educational.
Disciplina Tehnologii WEB utilizează noţiunile predate la disciplinele Tehnologii
Internet, Bazele Informaticii şi Programare procedurală, discipline studiate în
anul I si anul II sem I. Competentele dobândite de către studenti prin însusirea
continutului cursului Tehnologii Web sunt des utilizate în cadrul disciplinelor de
specialitate, precum Comert electronic, Proiectarea interfetelor grafice, Sisteme
de gestiune a bazelor de date etc. O neîntelegere a notiunilor fundamentale
prezentate în acest curs poate genera dificultăti în asimilarea conceptelor
complexe introduse în alte cursuri de specialitate.
2
Competenţele specifice acumulate
 Deprinderea conceptelor esențiale legate de programare și Internet;

 Cunoasterea noţiunilor de bază pentru realizarea paginilor dinamice WEB.
Competenţe profesionale
 Dezvoltarea abilitatilor pentru realizarea site-urilor Web folosind tehnologiile HTML 5,

CSS 3, JavaScript si JQuery, PHP,MySql si XML;
 Însuşirea noţiunilor fundamentale privind programarea pe WEB;
 Dezvoltarea abilitatilor studenţilor pentru alte disciplinele de specialitate din anii
superiori.
 Utilizarea instrumentelor informatice în context interdisciplinar;
 Utilizarea adecvată în comunicarea profesională a conceptelor, metodelor și teoriilor
specifice domeniului programarii Web;
 Aplicarea principiilor și metodelor specifice domeniului pentru rezolvarea unor situații și
probleme specifice cu asigurarea unei asistențe calificate.
Structura cursului
 UNITATEA DE INVATARE 1 - HTML si CSS
 UNITATEA DE INVATARE 2 - JAVASCRIPT si

jQUERY
 UNITATEA DE INVATARE 3 - PHP SI MYSQL
 UNITATEA DE INVATARE 4 - CONSTRUIREA

DOCUMENTELOR XML
 UNITATEA DE INVATARE 5 - TEHNOLOGIA JSP

si SERVLET
 APLICATII PROPUSE
 MODEL BILET EXAMEN
 FORMULAR FEEDBACK
3
Nota finală care se va acorda fiecărui student, va conţine
următoarele componente în procentele menţionate:
- examen final 60%
- lucrari practice/ proiect 30%
- teste pe parcursul semestrului 10%
Fiecare student va realiza un site care va cuprinde elemente din

toate unitatile invatate/studiate. Codul sursa al fisierelor va contine
si “comentariile corespunzatoare”.
Aplicatia se va transmite cel mai tarziu cu 2 zile inainte de examen,
pe adresa de email mironela.pirnau@prof.utm.ro.
Bibliografie
1. Suportul propriu de curs pentru invatamant ID (accesibil de pe platforma e-learning/CD
2. Hugh E. Williams, David Lane, Web Database Applications with PHP & MySQL, 2nd Edition, O'Reilly,
2004.
3. Jon DucketT, Web Design with HTML, CSS, JavaScript and jQuery Set 1st Edition, ISBN-13: 978-
1118907443 , ISBN-10: 1118907442 , 2014
4. Robi Nixon, Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5 (Learning Php, Mysql,
Javascript, Css & Html5) 4th Edition , 2014
5. Dane Cameron, A Software Engineer Learns HTML5, JavaScript and jQuery Paperback – November 25,
2013
6. D. Hunter, J. Rafter, J. Fawcett, E. Vlist. Beginning XML (Programmer to
Programmer). 4th Edition, 2007.
7. Hugh E. Williams, David Lane, Web Database Applications with PHP & MySQL, 2nd
Edition, O'Reilly, 2004.
8. https://developer.mozilla.org/en/docs/SVG
9. http://schema.org
10. http://www.w3.org/DOM
11. http://www.w3schools.com/
12. http://docs.oracle.com/javaee/5/tutorial/doc/bnagx.html
13. https://secure.php.net/docs.php
14. http://www.mysql.com/
15. https://www.w3.org/XML/
4
Unitatea de invatare I.
CREAREA PAGINILOR WEB CU HTML si CSS
Aceasta unitate are ca scop cunoasterea si utilizarea tagurilor HTML, care stau la baza
crearii site-urilor WEB. Un site web desemnează o grupă de pagini web multimedia (conţinând
texte, imagini fixe, animaţii ş.a.), accesibile în Internet pe o temă anume şi care sunt conectate
între ele prin aşa-numite hiperlinkuri.
După parcurgerea si însusirea acestei teme, studentul va fi capabil:

- sa utilizeze tag-uri de bază;
- sa utilizarea ancorelor, sa insereze imagini, sa creeze tabele;
- sa proiecteze site-uri web folosind tehnologiile HTML5 si CSS3
Cuvinte cheie: WWW, FTP , HTTP, IRC, HTML, W3C.

Introducere
WWW apare ca o colecţie de informaţii structurate sub formă de documente Web sau pagini Web. Mai
multe pagini Web, organizate ierarhic, formează un site. Site-ul reprezinta un ansamblu de pagini Web,
între care sunt definite legături, astfel încât, pornind de la o primă pagină a cărei adresă reprezintă adresa
site-lui, este posibilă navigarea prin toate paginile acestuia. Site-urile sunt găzduite pe servere speciale
numite servere Web. Navigarea pe Web se face cu ajutorul unor programe numite browsere Web.
Internetul, ca şi serviciul WWW, lucrează în tehnologia client/server, astfel:

 browserul stabileşte o conexiune TCP/IP către server;
 browserul emite o cerere HTTP către server;
 serverul Web recepţionează cererea, o interpretează şi emite un răspuns către browser
prin trimiterea documentului codului HTML;
 browserul interpretează codul HTML şi afişează pagina web pe ecran;
Serve-rul de Web primeşte cererea, o interpretează şi emite un răspuns către client. În forma cea mai
simplă, răspunsul este un document HTML (un hipertext), caz în care browser-ul afişează pagina Web
corespunzătoare.
TCP/IP (Transfer Control Protocol / Internet Protocol) este protocolul prin care se face transmisia
datelor în Internet. Principalele caracteristici ale acestui protocol sunt:
 independenţă faţă de tipul calculatorului sau de sistemul de operare folosit;
 independenţă faţă de tipul reţelei, ceea ce permite interconectarea unor reţele diferite.
HTTP (HyperText Transfer Protocol) este protocolul folosit pentru transferul informaţiilor din cadrul
paginilor Web şi anume, a HyperTextului. O cerere HTTP conţine un URL dar şi alte informaţii. Paginile
Web sunt de fapt documente, fişiere, cu un format special ce au exitensia HTML.
HTML (HyperText Markup Language) este văzut ca un limbaj de realizare a hypertextului.
5
Localizarea unei resurse în Internet se face prin specificarea adresei acesteia, adresă ce poartă numele
de URL (Uniform Resource Locator) şi are formatul
protocol://server.domeniu/cale/fişier.extensie.
Un URL conţine următoarele informaţii:

- protocolul folosit;
- adresa maşinii pe care se află resursa;
- portul ales pentru conexiune;
- calea către resursă;
- numele resursei.
Exemplu: http://www.microsoft.com/download/index.html
Accesarea unui site se face, de obicei, numai prin specificarea în cadrul browse-rului a unei adrese de
forma:www.utm.ro. În mod automat, browserul va introduce şi protocolul http.
Cu ani în urmă, oamenii de ştiinţă s-au gândit, că ar fi bine, ca cele mai importante reţele de calculatoare
să fie conectate între ele. Rezultatul a fost apariţia ‘‘mamei tuturor reţelelor”, numită acum Internet.
Până în anul 1990, accesarea informaţiilor de pe Internet era foarte dificilă şi reţeaua nu era folosită
decât de un grup restrâns de oameni de ştiinţă. Fizicianul Tim Berners-Lee a devenit celebru, datorită
faptului că a ‘‘inventat” link-urile (legături, referinţe) hypertext. Deşi această idee nu era nouă, ea a
condus la dezvoltarea unui limbaj simplu, care s-a impus, până la urmă, ca şi un standard. Tim Berners-
Lee a numit acest limbaj Hypertext Markup Language, cunoscut sub denumirea prescurtată de HTML.
Noţiunea de hypertext înseamnă text păstrat în format electronic cu link-uri între pagini. În anul 1993,
în jur de 100 de calculatoare din lumea întreagă erau echipate pentru a găzdui pagini HTML. Aceste
pagini interconectate au fost ‘‘nimite” World Wide Web. După un timp, au început să fie scrise primele
browsere Web cu ajutorul cărora se puteau vizualiza pagini Web care conţin atât text, cât şi imagini.
Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (Hypertext Markup
Language), care descrie formatul primar în care documentele sunt distribuite şi văzute pe Web. Multe
din trăsăturile lui, cum ar fi independenţa faţă de platformă, structurarea formatării şi legaturile
hypertext, fac din el un foarte bun format pentru documentele Internet şi Web.
Documentele HTML sunt documente în format ASCII şi prin urmare, pot fi create cu orice editor de
texte. Au fost însă dezvoltate editoare specializate care permit editarea într-un fel de WYSIWYG, deşi
nu se poate vorbi de WYSIWYG, atâta vreme cât navigatoarele afişează acelaşi document oarecum
diferit, în funcţie de platforma pe care rulează.
W3C prezinta un set de tehnologii integrate. Se pot crea situri multimedia cu tehnologia W3C existentă
XHTML (Structured XML markup), CSS (Style sheets), SVG (2D vector animated graphics), SMIL
(Synchronized Multimedia) etc. Aceste tehnologii au fost construite, prin consens, de către cele mai
importante organizatii care activeaza pe web.Paginile Web sunt conţinute în fisiere pe un calculator
server. Un astfel de server este, de exemplu, www.yahoo.com, sau www.google.ro. Calculatoarele care
accesează paginile Web sunt clienţi. De fapt, pe clienţi rulează programe dedicate vizualizarii paginilor
Web, numite browsere Web şi acestia accesează şi afişează pagina Web pe calculatorul local.
‘‘WWW Consortium” perfecţionează standarde noi, oferă programe pentru servere şi clienţi,
documentaţie etc. Producători de browsere implementează în browserele lor standardele W3C, dar
dezvoltă şi ei standarde pe care numai browserele lor le suportă. Din aceste motiv, o pagină web trebuie
să fie testă cu mai mult browsere.
Internetul pune la dispoziţia utilizatorilor mai multe servicii, printre care:
 E-mail care permite schimbul de mesaje între utilizatori

 WWW (World Wide Web) care este cel mai important serviciu Internet prin care utilizatorul
are acces rapid la informaţia organizată, sub forma unor documente numite pagini web.
 FTP (File Transfer Protocol) este un serviciu specializat pe transferul de fişiere.
 Telnet (Remote Access) permite exploatarea la distanţă a resurselor unui calculator.
6
 News oferă utilizatorului accesul la diverse informaţii din domenii bine precizate.
 IRC (Internet Relay Chat) permite realizarea unei comunicări în timp real, în general, sub
formă de text.
1 Crearea paginilor web folosind HTML
Un fişier HTML (”HyperText Markup Language”) este un fişier text, care reprezintă sursa paginii de
Web. Fişierul HTML trebuie să aibă extensia .htm sau .html, iar browserul îl interpreteaza. Deoarece
fişierul este de tip text, el poate fi editat cu Notepad (din Windows) sau editoare specilizate.
HTML-ul nu reprezintă un limbaj de programare ci mai degrabă un “limbaj de marcare a textului”. El
conţine un set de coduri speciale, care se inserează într-un text, pentru a adăuga informaţii despre
formatarea textului şi despre legăturile existente în pagini. Această marcare a textului se face cu ajutorul
unor tag-uri (marcaje, etichete). Un tag este introdus întotdeauna între paranteze unghiulare, sub forma:
<nume_tag atribut1=‘‘valoare1” atribut2=‘‘valoare2” … >
Marcajele html pot avea sau nu şi o formă de închidere:
</nume_tag>
Marcajele html se aplică unui text sau chiar altor marcaje prin cuprinderea lor între forma de deschidere
şi forma de închidere.
Spre exemplu, marcajul <html> indică browser-ului că documentul este scris şi formatat pentru limbajul
HTML. Forma de închidere este </html>. De reţinut, faptul că browser-ele Web ignoră formatările
aplicate textului cu ajutorul procesoarelor de texte valabile fiind doar formatările aplicate cu ajutorul
tag-urilor html.
Un fişier html, este de obicei, împărţit, din motive de organizare, în două secţiuni:
 antetul (header-ul) care conţine informaţii introductive de formatare a documentului. Este
identificat de forma de deschidere şi forma de închidere a marcajului <head>… </head>.
Informaţiile cuprinse de acest marcaj nu apar în pagina Web.
 corpul efectiv al documentului, adică ceea ce este vizualizat în fereastra browser-ului, este
cuprins între marcajele <body> şi </body>.
Observaţie: O etichetă (un tag) poate fi scris/ă atât cu litere mari, cât şi cu litere mici. Standardul W3C
recomandă folosirea literelor mici pentru tag-uri. Mai mult, generaţia urmatoare de standard HTML,
standardul XHTML impune obligatoriu utilizarea tag-urilor cu litere mici.
Validarea documentelor HTML

Toate documentele trebuie validate pentru elimiarea erorilor, ca de exemplu lipsa unei
ghilimele, neinchiderea unei paranteze, elemente sau atribute scrise gresit sau structurate
invalid. Erorile nu sunt vizibile mereu in browser deoarece fiecare le recupereaza in modul
propriu. Validarea acestor documente se face cu un serviciu special W3C care poate fi accesat
de oricine la adresa: http://validator.w3.org. Un validator verifica definitia tipului
documentului(DTD) si nu siguranta legaturilor din document.
Elementul DOCTYPE
Documentul HTML validat trebuie declarat in functie de versiunea pe care o utilizeaza.
Declararea tipului este definita de DTD(Document Type Definition), in HTML 4 pot exista 3
DTD specifici, astfel autorul trebuie sa include in pagina sa tipul de document in functie de
versiune.
Elementele care se pot utiliza în cadrul paginilor depind de versiunea HTML utilizată.În tabelul 1 avem
lista cu versiunile HTML şi modul de declarare al acestora la începul oricărui fişier html (DOCTYPE):
7
Tabelul 1. Declaraţii DOCTYPE
Versiune
declaraţia DOCTYPE
HTML
<!DOCTYPE HTML PUBLIC ‘‘-//W3C//DTD HTML 4.01//EN”

‘‘http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC ‘‘-//W3C//DTD HTML 4.01 Transitional//EN”
HTML 4.01
‘‘http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE HTML PUBLIC ‘‘-//W3C//DTD HTML 4.01 Frameset//EN”
‘‘http://www.w3.org/TR/html4/frameset.dtd”>
HTML 3.2 <!DOCTYPE HTML PUBLIC ‘‘-//W3C//DTD HTML 3.2 Final//EN”>
HTML 1.0 <!DOCTYPE html PUBLIC ‘‘-//IETF//DTD HTML 1.0//EN”>
<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.0 Strict//EN”

‘‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.0 Transitional//EN”
XHTML 1.0
‘‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.0 Frameset//EN”
‘‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.1//EN”

XHTML 1.1
‘‘http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
Atenţie! Nu se poate valida un document, dacă nu se utilizează una din declaraţiile din tabelul 1, la
începutul acestuia. De asemenea, anumite motoare de indexare caută elemente META în paginile
HTML, elemente care au rolul de a defini o listă de cuvinte cheie, separate cu virgulă. Motoarele de
cautare pot prezenţa aceste cuvinte cheie, ca rezultat al unei cautari.
Etichetele META au atributele NAME şi CONTENT şi se folosesc conform sintaxei:
<META NAME= “meta nume” CONTENT= “conţinut”>
Exemplu de utilizarea a acestei etichete în antetul unei paginii

<meta name=‘‘informatica” content=‘‘importanta informaticii in procesul de invatamant”>
Etichete meta se poate utiliza şi pentru a înlocui comenzile ‘‘Refresh” sau ‘‘Reload” care au rolul de a
reînmprospăta conţinutul paginii încărcate în browser.
Exemplu: pentru reîmprospătarea la 10 secunde a unui pagini încaărcate într-un browser:
<meta http-equiv=‘‘refresh” content=‘‘10;url=http://www.test_site.ro”>
Inserarea unui titlu pentru pagina web
Un lucru subtil, dar simplu, pe care îl putem face este să inserăm un titlu pentru o pagină Web, titlu ce
va fi afişat în bara de titlu a browser-ului folosit. Acest titlu se poate introduce cu ajutorul marcajului
<title> … </title>. Acestea vor fi introduse în interiorul marcajelor
1.1 Tag-uri de bază

Sfârşitul de linie
8
După cum se observă, caracterele “enter” , “tab” şi spaţiile multiple sunt ignorate de către browser.
Trecerea pe o linie nouă se face prin inserarea marcajului <br> (“line break”). Nu are formă de
închidere. Introducerea unui spaţiu se poate face prin construcţia: .
Tabelul 2 prezintă corespondenţa dintre caracterele speciale şi codul acestora.

a)
b) Tabelul 2 – Entitaţile caracter cele utilizate
2) secvenţă
i)caracter descriere cod zecimal
cod
Spatiu nedivizibil
< Mai mic decât < <
> Mai mare decât > >
& Ampersand & &
‘‘ Ghilimele " "
’ Apostrof '
§ Sectiune § §
© Copyright © ©
® Marca înregistrata ® ®
× Multiplicare × ×
÷ Împartire ÷ ÷
€ Euro € €
Culoarea de fond şi culoarea textului

O culoare se compune din diferite procentaje ale culorilor de baza rosu, verde şi albastru (RGB – ”Red”,
‘‘Green”, ‘‘Blue”) şi poate fi precizată în trei moduri:
1. folosind numele culorii (”red”, de exemplu, adică roşu); sunt disponibile cel puţin 16 nume de
culori: aqua, black, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white şi yellow.
2. cu combinaţia valorii zecimale a celor trei culori de baza, fiecare luând o valoare întreaga de la
zero la 255, de exemplu ‘‘rgb(255,0,0)”, care este tot roşu (verdele şi albastrul sunt zero);
observaţi sintaxa (”rgb(codrosu,codverde,codalbastru)”);
3. cu combinatia valorii hexazecimale a celor trei culori de baza, fiecare luând o valoare de la zero
la FFhexa, de exemplu ‘‘#FF0000” este tot roşu, deoarece ‘‘FF” (pentru roşu) hexazecimal este
255 zecimal, iar ‘‘00” este zero şi în zecimal;
Culorile specificate în hexazecimal sunt recunoscute de toate browserele.
Tabelul 3. Utilizarea codurilor hexa

DENUMIRE COD HEXA
CULOARE
aqua #00FFFF
black #000000
blue #0000FF
fuchsia #FF00FF
gray #808080
green #008000
lime #00FF00
maroon #800000
navy #000080
olive #808000
purple #800080
9
red #FF0000
silver #C0C0C0
teal #008080
white #FFFFFF
yellow #FFFF00
Utilizarea culorilor pentru tagul <body>

În tag-ul <body>, puteti specifica culoarea fundalului, sau a textului, a legaturilor nevizitate, a celor
vizitate sau a celor activate.
atribut efect
bgcolor fundal
text text
link legatură nevizitată
vlink legatură vizitată
alink legatură activă
Stiluri pentru blocurile de text. Unui text i se pot aplica diverse stiluri prin folosirea marcajelor:
NUME TAG EFECT

<b>…<b> text îngrosat
<big>…</big> text cu caractere mari
<em>…</em> text evidentiat
<i>…</i> text ‘‘italic”
<small>…</small> text cu caractere mici
<strong> …</strong> text mai evidentiat decât <em>
<sub>…</sub> indice inferior (”subscript”)
<sup>…</sup> indice superior (”superscript”)
<s>….</s> text taiat
<del>…</del> text ‘‘sters”
<u>…</u> text subliniat
Blocuri paragraf
Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua şi permite:
- inserarea unui spaţiu suplimentar înainte de blocul paragraf;
- inserarea unui spaţiu suplimentar după blocul paragraf, daca se foloseşte delimitatorul </p> (acesta
fiind opţional);
- alinierea textului cu ajutorul atributului align, având valorile posibile ‘‘ left ‘‘, ‘‘center ‘‘ , ‘‘ right
‘‘şi ‘‘justify”.
Blocuri de titlu
Într-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1>, <h2>, <h3>,
<h4>, <h5>, <h6>.
Toate aceste etichete se refera la un bloc de text şi trebuie însoţite de o eticheta de încheiere similara.
Aceste etichete accepta atributul align pentru alinierea titlului blocului de text la stanga (în mod
prestabilit ) , în centru şi la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari şi
aldine, pe când <h6> foloseşte caracterele cele mai mici.
Linii orizontale
Într-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru
a configura o linie orizontala se utilizează următoarele atribute ale etichetei <hr> care sunt:
 align permite alinierea liniei orizontala. Valorile posibile sunt ‘‘ left ‘‘ ,”center” şi ‘‘right”;
 width permite alegerea lungimii liniei;
 size permite alegerea grosimii liniei;
10
 noshade când este prezent defineşte o linie fără umbra;
 color permite definirea culorii liniei.
Blocuri <center>
Blocul introdus de etichetele <center>...</center> aliniază centrat toate elementele pe care le conţine.
Fonturi
Un font este caracterizat de următoarele atribute:
 culoare (stabilită prin atributul color);
 nume (stabilit prin atributul face);
 mărime (definită prin atributul size);
Toate aceste atribute aparţin etichetei <font>, care permite inserarea de blocuri de texte personalizate.
Familia fontului
Pentru a scrie un text într-o pagina, pot fi folosite mai multe fonturi (stiluri de caractere). Exista cinci
familii generice de fonturi care sunt de regulă disponibile pe toate calculatoarele utilizatorilor: serif,
sans serif, cursive, monospace şi fantasy. Tipul de font necesar poate fi stabilit prin atributul face al
etichetei font.
Pot fi introduse mai multe fonturi separate prin virgula. În acest caz, browserul va utiliza primul font
din listă instalat pe calculatorul client.
Mărimea fontului
Pentru a stabili mărimea unui font se utilizează atributul size al etichetei . Valorile acestui atribut pot fi:
 1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font şi 7 pentru cel mai mare);
 +1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta;
 -1, -2, etc. pentru a micşora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta.
Utilizarea listelor
În HTML există trei tipuri de liste care sunt:
1. liste de definiţie
2. liste neordonate
3. liste ordonate
Unul din cele mai obişnuite elemente din documentele cu mai multe pagini este un set de definiţii,
referinţe sau indexuri. Glosarele sunt exemple clasice în acest sens; cuvintele sunt listate în ordine
alfabetica, urmate de definiţii ale termenilor respectivi. În HTML, întreaga secţiune a unui glosar va fi
gestionata prîntr-o lista de definiţii, care este inclusa într-o pereche de marcaje de lista de definiţii:
<dl>...</dl> (de la ‘‘definition list” = lista de definiţii) Observaţii:
- Un termen al listei este iniţiat de eticheta <dt> (de la ‘‘definition term” = termen definit);
- Definiţia unui termen este iniţiata de eticheta <dd> (de la ‘‘definition description” = descrierea
definiţiei);
- Definiţia unui termen începe pe o linie noua şi este indentată;
O lista neordonată este un bloc de text delimitat de etichetele corespondente <ul>...</ul> (” ul ‘‘ vine
de la ‘‘ unordered list ‘‘ = lista neordonată). Fiecare element al listei este iniţiat de eticheta <li> (list
item). Lista va fi indentată fata de restul paginii Web şi fiecare element al listei începe pe un rând noua.
Tag-urile <ul> şi <li> pot avea un atribut type care stabileşte caracterul afişat în faţa fiecărui element al
listei. Valorile posibile al acestui atribut sunt:
o ‘‘circle” (cerc)
 ‘‘disc” (disc plin) (valoarea prestabilita);
 ‘‘square” (patrat)
11
O lista ordonată de elemente este un bloc de text delimitat de etichetele corespondente <ol>...</ol>
(”ol” vine de la ‘‘ordered list” = lista ordonata). Fiecare element al listei este introdus de eticheta <li>
(list item).
Lista va fi indentată faţă de restul paginii Web şi fiecare element al listei începe pe un rând nou.
Tag-urile <ol> şi <li> pot avea un atribut type care stabileşte tipul de caractere utilizate pentru ordonarea
listei. Valorile posibile sunt:
- ‘‘ A ‘‘ pentru ordonare de tipul A , B , C , D etc.;
- ‘‘ a ‘‘ pentru ordonare de tipul a , b , c , d etc.;
- ‘‘ I ‘‘ pentru ordonare de tipul I , II , III , IV etc.;
- ‘‘ i ‘‘ pentru ordonare de tipul i , ii , iii , iv etc.;
- ‘‘ 1 ‘‘ pentru ordonare de tipul 1 , 2 , 3 , 4 etc
Tag-ul <ol> poate avea un atribut start care stabileşte valoarea iniţiala a secvenţei de ordonare. Valoarea
acestui atribut trebuie să fie un număr întreg pozitiv.
Definirea legături
Legaturile (link-urile) reprezintă partea cea mai importantă a unei pagini Web.Ele transformă un text
obişnuit în hipertext sau hiperlegatura, care permite trecerea rapidă de la o informaţie aflata pe un anumit
server la altă informaţie memorată pe un alt server, aflat oriunde în lume. Legăturile sunt zone active
într-o pagină Web, adică zone de pe ecran sensibile la apăsarea butonului stâng al mouse-ului.
O legatura către o pagina aflata în acelaşi director
O legătură către o pagina aflata în acelaşi director se formează cu ajutorul etichetei <a> (de la
‘‘anchor”=ancora). Pentru a preciza pagina, indicată de legătură, se utilizează un atribut al etichetei <a>
numit href, care ia valoare numele fişierului HTML aflat în acelaşi director. Zona activă, care devine
sensibilă la apăsarea butonului stâng al mouse-ului, este formata din textul cuprins între etichetele
<a>...</a>.
Prezenţa etichetei de sfârşit </a> este obligatorie.
O legătură către un site particular

În exemplul următor se utilizează adresa URL www.utm.ro care încarcă pagina de start din site-ul
Universităţii..
<html>
<head>
<title> Link către site-ul UTM</title>
</head>
<body>
<h3>Link către site-ul UTM </h3>
<a href=‘‘http://www.opera.com”>Opera 9.6 Web browser</a>
</body>
</html>
1.2 Utlizarea ancorei
Într-o pagină foarte lungă pot exista puncte de reper către care se definesc legături. O ancora se defineşte,
de asemenea, prin eticheta <a>. Pentru a defini ancora, se utilizează atributul name care primeşte ca
valoare un nume atribuit ancorei (de exemplu ‘‘leg1”).
Pentru a insera o legătură către ‘‘leg1”, definită în aceeaşi pagina, se utilizează eticheta <a> având
atributul href de valoare ‘‘#leg1”.
Pentru a introduce o legătură către o ancoră definită în alt document (altă pagină), aflat în acelaşi
director, atributul href primeşte o valoare de forma ‘‘nume_fisier.html#nume_ancora”.
Alegerea culorilor pentru legaturi
12
În mod prestabilit, se utilizează trei culori pentru legaturi:
 culoare pentru legaturile nevizitate (nu s-a efectuat nici un clic pe ele)
 culoare pentru legaturile vizitate (s-a efectuat cel puţin un clic pe ele)
 culoare pentru legaturile active (când se execută clic şi se ţine apăsat).
Aceste atribute pot fi stabilite cu ajutorul următoarelor atribute ale etichetei <body>:
 link pentru legaturile nevizitate;
 vlink pentru legaturile vizitate;
 alink pentru legaturile active.
Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului RGB.
Utilizarea poştei electronice - se utilizează în construcţia adresei URL cuvântul mailto: urmat de o
adresa e-mail valida.
Pentru ca exemplul următor să funcţioneze trebuie ca pe calculator să fie instalat o aplicaţie de expediere
a mesajelor electronice (Outlook Express, Microsoft Outlook etc). Adresa trebuie să fie validă şi
calculatorul să fie conectat la Internet.
Atributul target
Dacă dorim ca pagina solicitată să fie încărcată într-o altă fereastră decât cea curentă, atunci trebuie
lansată în execuţie o nouă instanţă a browserului care va conţine noua pagină. Acest lucru se realizează
folosind atributul target al etichetei <a>, care primeşte ca valoare un nume. Numele ferestrei poate fi
folosit ca valoare pentru atributul target şi pentru alte legături caz în care paginile respective vor fi
încărcate în aceeaşi fereastră. Atributul target acceptă şi alte valori cum ar fi _blank caz în care pagina
se va încărca într-o fereastră nouă, anonimă (nu poate fi folosită pentru încărcarea altor pagini).
1.3 Utilizarea imaginilor
Imaginile sunt stocate în fisiere cu diverse formate. Formatele acceptate de browsere pentru fişierele
imagine sunt:
 GIF (Graphics Interchange Format) cu extensia .gif;
 JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
 XPM (X PixMap) cu extensia .xmp;
 XBM (X BitMap) cu extensia .xbm;
 BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
 TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai răspândite formate sunt GIF (8 biţi pentru o culoare, 256 culori posibile) şi JPEG (24 biţi
pentru o culoare, 16777216 de culori posibile). Toate imaginile cu care vom lucra vor avea adresa URL
exprimata în funcţie de directorul ce conţine documentul HTML care face referire la imagine. Pentru a
insera o imagine într-o pagina, se utilizează eticheta <img> (de la ‘‘image”=imagine). Pentru a putea fi
identifica imaginea care va fi inserată, se utilizează un atribut al etichetei <img> şi anume src (de la
‘‘source”=sursa). Daca imaginea se afla în acelaşi director cu fisierul HTML care face referire la
imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia.
< img src=‘‘imagine.gif”>
Atributul alt permite afişarea unui text alternativ în locul imaginii dacă aceasta nu este încărcată sau
lângă mouse atunci când acesta este plasat peste imagine.
Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului align care poate lua următoarele valori:
 ‘‘left” - aliniere la stânga; celelalte componente sunt dispuse pe în partea dreapta;
 ‘‘right” - aliniere la dreapta; celelalte componente sunt dispuse pe în partea stânga;
 ‘‘top” - aliniere deasupra; partea de sus a imaginii se aliniază cu partea de sus a textului ce
precede imaginea;
 ‘‘middle” - aliniere la mijloc; mijlocul imaginii se aliniază cu linia de bază a textului ce precede
imaginea.
13
 ‘‘bottom” - aliniere la baza; partea de jos a imaginii se aliniază cu linia de bază a textului.
Alinierea textului în jurul imaginii

Atributele hspace şi vspace precizează distanta în pixeli pe orizontală, respectiv pe verticală, dintre
imagine şi restul elementelor din pagina.
Imagini pentru fundalul unei pagini

O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. În acest scop, se foloseşte atributul
background al etichetei <body>, având ca valoare adresa URL a imaginii. Imaginea se multiplica pe
orizontala şi pe verticala, până umple întregul ecran.
Atributul bgproperties=fixed menţine imaginea fixă la realizarea unei defilări în pagină.
Imagini folosite ca legături

Pentru a utiliza imaginea ‘‘strart.jpg” drept legatura către pagina test_1.1.html utilizam sintaxa:
<a href =‘‘test_1.1.html”><img src= ‘‘start.jpg”></a>
În mod prestabilit, imaginea utilizată pe post de zonă activă este înconjurată de un chenar având culoarea
unei legaturi. Daca stabilim pentru atributul border al etichetei <img> valoare ‘‘0” acest chenar dispare.
1.4 Crearea tabelelor
Tabelele ne permit să creăm o reţea dreptunghiulară de domenii, fiecare domeniu având propriile opţiuni
pentru culoarea fondului, culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente
<table> … </table>
Un tabel este format din rânduri. Pentru a insera un rând într-un tabel se folosesc etichetele <tr>
…(”table row”= rând de tabel) th …(”table head”= rând de tabel bold). Folosirea etichetei de sfârşit este
opţională. Un rând este format din mai multe celule ce conţin date. O celulă de date se introduce cu
eticheta <td> .
În mod prestabilit, un tabel nu are chenar. Pentru a adăuga un chenar unui tabel, se utilizează atributul
border. Acest atribut poate primi ca valoare orice număr întreg (inclusiv 0) şi reprezintă grosimea în
pixeli a chenarului tabelului. Dacă atributul border nu este urmata de o valoare atunci tabelul va avea o
grosime prestabilita egală cu 1 pixel, o valoare egală cu 0 semnifică absenţa chenarului. Când atributul
border are o valoare nenulă, chenarul unui tabel are un aspect tridimensional.
Alinierea tabelului
Pentru a alinia un tabel într-o pagina Web, se utilizează atributul align al etichetei table cu următoarele
valori posibile: ‘‘left” (valoarea prestabilita), ‘‘center”, ‘‘right”.
Definirea culorilor de fond pentru un tabel

Culoarea de fond se stabileşte cu ajutorul atributului bgcolor, care poate fi ataşat întregului tabel prin
eticheta table, unei linii prin eticheta tr sau celule de date prin eticheta td. Valorile pe care le poate
primi bgcolor sunt cele cunoscute pentru o culoare. Dacă în tabel sunt definite mai multe atribute
bgcolor, atunci prioritatea este următoarea: celulă, linie, tabel.
<html>
<head><title>culoare tabel</title></head>
<body><h1 align=center>Un tabel simplu colorat</h1><hr>
<table border=‘‘3” bgcolor=‘‘green”>
<tr> <td>verde 11 <td bgcolor=‘‘red”>rosu 11
<tr bgcolor=‘‘blue”> <td>albastru 21 <td bgcolor=‘‘yellow”>galben 22
<tr bgcolor=‘‘cyan”> <td>cell 31 <td>cell 32
<tr> <td>cell 41 <td bgcolor=‘‘white”>cell 42
</table>
14
</body>
</html>
Utilizarea culorilor în tabele
Dimensionarea celulei unui tabel

Distanţa dintre două celule vecine se defineşte cu ajutorul atributului cellspacing al etichetei table.
Valorile acestui atribut pot fi numere întregi pozitive, inclusiv 0, şi reprezintă distanţa în pixeli dintre
două celule vecine. Valoarea prestabilita a atributului cellspacing este 1.
Distanţa dintre marginea unei celule şi conţinutul ei poate fi definită cu ajutorul atributului cellpadding
al etichetei table. Valorile acestui atribut pot fi numere întregi pozitive. Valoarea prestabilita a
atributului cellpadding este 1.
Dimensionarea unui tabel

Dimensiunile unui tabel - lăţimea şi înălţimea - pot fi stabilite exact prin intermediul a două atribute,
width şi height, ale etichetei table.
Valorile acestor atribute pot fi:
 numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului;
 numere întregi între 1 şi 100, urmate de semnul %, reprezentând fracţiunea din lăţimea şi
înălţimea totală a paginii.
- În exemplul următor, se utilizează un truc care permite afişarea într-o pagina Web a unui text
poziţionat în centrul paginii.
Alinierea conţinutului unei celule

Alinierea pe orizontala a conţinutului unei celule se face cu ajutorul atributului align care poate lua
valorile: ‘‘left” (la stânga),”center” (centrat , valoarea prestabilita ), ‘‘right” (la dreapta). Alinierea pe
verticala a conţinutului unei celule se face cu ajutorul atributului valign care poate lua valorile:
‘‘bottom” (jos), ‘‘middle” (la mijloc, valoarea prestabilita), ‘‘top” (sus). Aceste atribute pot fi ataşate
atât etichetei tr pentru a defini tuturor elementelor celulelor unui rând, cât şi etichetelor td pentru a
stabili alinierea textului într-o singură celulă .
Dimensionarea exacta a celulelor unui tabel

Dimensiunea unei celule poate fi stabilită exact cu ajutorul a doua atribute ale acestor etichete: width
pentru lăţime şi height pentru înălţime. Valorile posibile ale acestor atribute sunt:
 numere întregi pozitive (inclusiv 0) reprezentând dimensiunea în pixeli a lăţimii, respectiv a
înălţimii unei celule;
 procente din lăţimea , respectiv înălţimea tabelului.
Tabele de forme oarecare

Un tabel trebuie privit ca o reţea dreptunghiulară de celule. Cu ajutorul a doua atribute ale etichetelor
td, o celulă se poate extinde peste celule vecine, astfel:
 extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan a cărui
valoare determina numărul de celule care se unifică.
15
 extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan a cărui
valoare determina numărul de celule care se unifica.
Celule vide ale unui tabel
Dacă un tabel are celule vide, atunci acestea vor apărea în tabel fară chenar de delimitare. Pentru a afişa
un chenar, pentru celule vide, se utilizează după tagul td secvenţa &nbsp sau eticheta <br>. Principalele
atribute pentru etichetele <table>, <tr>, <td> şi <th> sunt prezenţate în tabelul 4.
Tabelul 4. Atributele tagului table
<table> align = “center”/ “right” / “left”

border = “nr” (valori in pixeli)= reprezinta grosimea chenarului
width= “ nr” (in pixeli) / “%” (un procent din fereastra curenta) reprezintă latimea
tabelului
height = “nr” (in pixeli) / “%” = reprezintă inaltimea tabelului
bordercolor = “ culoare” (culoare chenarului)
bordercolorlight = “culoare”
bordercolordark =‘‘culoare”
cele 2 atribute coloreaza coltul din stanga sus/dreapta jos.
bgcolor =‘‘culoare” defineşte culoarea de fundal a tabelului

background =‘‘ poza.gif” (aplică o poză de fundal în tabel)
cellspacing =‘‘ nr” (in pixeli) stabileste distanta dintre celule
cellpadding= “nr” stabileste distanta dintre continutul celulei şi marginile acesteia
Atentie!
daca se foloseste cellpadding ar trebui să nu folosim « width » şi « height ».
daca se foloseste cellpadding atunci se aliniaza automat textul din celula pe centrul
acesteia.
<tr> align = “center”/ “right” / “left” = aliniaza informatia in cadrul randului

bgcolor = “culoare” / “cod culoare” culoarea de fundal a rândului
height = “nr” / “%” stabileste inaltimea randului
<td> align = “center” / “right” / “left” = aliniaza textul în celulă

<th>
bgcolor = “color” / “cod culoare” coloreaza fundalul celulei respective
width = “nr” / “% ‘‘ inaltimea celulei
rowspan= “nr” numărul de rănduri care se unesc
colspan= “nr” numărul coloane care se unesc
HARŢI DE IMAGINI
16
(vezi site-ul http://www.utm.ro/live/index.html) figura de mai jos. Imaginea este împărţită în mai multe
secţiuni, iar prin activarea unei secţiuni se deschide un fişier, prin activarea altei secţiuni un alt fişier.
Secţiunile se creează astfel:
Introducem în pagina imaginea care reprezintă harta:
< img src= “harta.gif” usemap= “#numele hartii”>

< map name= “nume harta ‘‘>(acelaşi nume al hartii ca cel de mai sus)
În interior delimităm zonele pentru clic pe mouse astfel:
Area “circle” coords= “x,y,r” href= “nume fisier.html” alt= “text alternativ”
shape= (explicatii: “circle” =decupeaza dupa o zona circulara ; x,y= reprezintă
coordonatele cercului în pixeli; r=raza cercului,în pixeli; “nume fisier”=indica
numele fisierului deschis la clic; “alt” arata textul alternativ, care apare ca o
eticheta cand pozitionam mouse-ul pe zona delimitata)
“rect” coords= “x1,y1,x2, y2” href= “nume fisier.html” alt= “text” (explicatii:
“rect” = decupeaza dupa o zona dreptunghiulara; “x1,y1”= colt stanga sus;
“x2,y2” = colt dreapta)
“poly” coords=‘‘x1,y1,x2,y2,x3,y3,x4,y4....xn,yn” href= “nume fisier.html”

alt= “text” (explicatii: “poly”=de la poligon , decupeaza dupa un poligon;
“x1,y1...xn,yn” =unde n trebuie să aiba valoarea de minim 3 (un poligon are
minim 3 laturi, de exemplu, triunghiul); perechile x,y reprezinta coordonatele )
Harta se inchide cu eticheta: </map>
Exemplu de pagina ce conţine eticheta <map>
Aplicaţie:
17
Să se creeze un fişier ce conţine o hartă, astfel încăt:
 pentru cerc definim valorile: 150, 150, 100.

 pentru dreptunghi definim valorile :350,150,550,275,
 pentru poligon definim valorile : 350, 400, 200, 500,500.
<html>
<head>
<title>Harti de Imagini </title>
</head>
<body>
<img src=‘‘poze/Imag0061.jpg” width=‘‘400” height=‘‘400” usemap=‘‘#dzip”>
<map name=‘‘dzip”>
<area shape=‘‘circle” coords=‘‘100,100,30” href=‘‘cv.html” alt=‘‘CV” target=‘‘_blank”>
<area shape=‘‘rect” coords=‘‘250,250,350,350” href=‘‘ex1.html” alt=‘‘1”>
<area shape=‘‘poly” coords=‘‘50,350,150,350,100,250” href=‘‘ex1.html” alt=‘‘2”>
</map>
</body>
</html>
Definirea formularelor
Un formular este un ansamblu de zone active alcătuit din butoane, casete de selecţie, câmpuri de editare
etc. Formularele sunt utilizate pentru construirea unor pagini Web care permit utilizatorilor să introducă
efectiv informaţii şi să le transmită serverului. Formularele pot varia de la o simplă casetă de text, pentru
introducerea unui şir de caractere pe post de cheie de căutare - element caracteristic tuturor motoarelor
de căutare din Web - până la o structură complexă, cu multiple secţiuni, care oferă facilităţi puternice
de transmisie a datelor. O sesiune cu o pagina web ce conţine un formular are următoarele etape:
 utilizatorul completează formularul şi îl expediază unui server;
 aplicaţie dedicată de pe server analizează formularul completat şi (dacă este necesar) stochează
datele într-o bază de date;
 dacă este necesar serverul expediază un răspuns utilizatorului.
Un formular este definit într-un bloc delimitat de etichetele corespondente <form> şi </form>.
Atribute esenţiale ale elementului <form>
- atributul action precizează ce se va întâmpla cu datele formularului odată ce acestea ajung la
destinaţie. De regulă, valoarea atributului action este adresa URL a unui script aflat pe un server
WWW care primeşte datele formularului, efectuează o prelucrare a lor şi expediază către utilizator
un raspuns.
<form action=‘‘http://www.yahoo.com/cgi - bin/nume_fis.cgi‘‘>.
Script-urile pot fi scrise în limbajele CGI, Perl, C, PHP, Unix shell etc.
- atributul method precizează metodă utilizata de browser pentru expedierea datelor formularului.
Sunt posibile următoarele valori:
- get (valoarea implicita). În acest caz ,datele din formular sunt adăugate la adresa URL
precizata de atributul action; nu sunt permise cantităţi mari de date (maxim 1 Kb)- între
adresa URL şi date este inserat un ‘‘?”. Datele sunt adăugate conform sintaxei:
nume_camp = valoare_camp. Între diferite seturi de date este introdus un ‘‘&”.
Exemplu: ‘‘http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 = valoare1&nume2 =
valoare2”;
- post. În acest caz datele sunt expediate separat. Sunt permise cantităţi mari de date
(ordinul MB)
18
Pentru ca un formular să fie funcţional, trebuie precizat ce se va întâmpla cu el, după completare şi
expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta
electronica (e-mail). Pentru aceasta se foloseşte atributul action care primeşte ca valoare ‘‘mailto:adresa
e-mail”.
Formular cu câmp de editare şi buton de expediere
Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul
elementului se foloseşte atributul type al etichetei <input>. Pentru un câmp de editare, acest atribut
primeşte valoarea ‘‘text”. Alte atribute pentru un element <input> sunt:
 atributul name ,permite ataşarea unui nume fiecărui element al formularului.
 atributul value ,care permite atribuirea unei valori iniţiale unui element al formularului.
 un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, în care
atributul type este configurat la valoarea ‘‘submit”. Acest element poate primi un nume prin
atributul name. Pe buton apare scris ‘‘Submit Query” sau valoarea atributului value , dacă
aceasta valoare a fost stabilită.
Pentru elementul <input> de tipul câmp de editare (type = ‘‘text”) , alte doua atribute pot fi utile:
 atributul size specifica lăţimea câmpului de editare;
 atributul maxlength specifica numărul maxim de caractere pe care le poate primi un câmp de
editare.
-
- Observaţii:
 daca atributul type lipseşte într-un element <input> , atunci câmpul respectiv este considerat în
mod prestabilit ca fiind de tip ‘‘text”.
 Formularele, cu un singur câmp (de tip text), nu au nevoie de un buton de expediere, datele sunt
expediate automat după completarea şi apăsarea tastei ENTER.
Butoane
Butonul Reset
Daca un element de tip <input> are atributul type configurat la valoarea ‘‘reset”, atunci în formular se
introduce un buton pe care scrie ‘‘Reset”. La apăsarea acestui buton, toate elementele din formular
primesc valorile prestabilite (definite odată cu formularul), chiar dacă aceste valori au fost modificate
de utilizator. Un buton Reset poate primi un nume cu ajutorul atributului name şi o valoare printr-un
atribut value. Un asemenea buton afişează textul ‘‘Reset”, dacă atributul value lipseşte, respectiv
valoarea acestui atribut în caz contrar .
Câmp de editare de tip ‘‘password”

Daca se utilizează eticheta <input> având atributul type, configurat la valoarea ‘‘password”, atunci în
formular se introduce un element asemănător cu un câmp de editare obişnuit (introdus prin type=‘‘text”).
Toate atributele unui câmp de editare rămân valabile. Singura deosebire constă în faptul că acest câmp
de editare nu afişează caracterele în clar.
Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile.
Acestea se introduc ca familii de butoane prin eticheta <input> cu atributul type avand valoarea
‘‘radio”, iar atributul name trebuie să primească aceeaşi valoare pentru fiecare buton dintr-o familie.
19
La expedierea formularului se va transmite una dintre perechile ‘‘sex=m” sau ‘‘sex=f”, în funcţie de
alegerea făcută de utilizator.
Casete de validare
O caseta de validare (checkbox) permite selectarea sau deselectarea unei opţiuni.
- Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type
configurat la valoarea ‘‘checkbox” .
Observaţii.
 fiecare casetă poate avea un nume definit prin atributul name;
 fiecare casetă, la fel ca şi butonul radio, poate avea valoarea prestabilita ‘‘selectat”, definită cu
atributul checked.
Casete de fişiere
Pentru pereche ‘‘name şi value” a unui formular se poate utiliza întregul conţinut al unui fişier pe post
de valoare. Pentru aceasta se inserează un element <input> într-un formular, cu atributul <type> având
valoarea ‘‘file” (fişier). Atributele pentru un element de tip casetă de fişiere sunt:
 atributul name ce permite ataşarea unui nume;
 atributul value ce primeşte ca valoare adresa URL a fişierului care va fi expediat o data cu
formularul. Această valoare poate fi atribuită direct atributului value, poate fi tastata într-un
câmp de editare ce apare o data cu formularul sau poate fi selectată prin intermediul unei casete
de tip File Upload sau Choose File care apare la apăsarea butonului Browse... din formular .
Liste de selectie
O lista de selectie permite utilizatorului să aleagă unul sau mai multe elemente dintr-o listă finită. Lista
de selecţie este inclusă în formular cu ajutorul etichetelor corespondente <select> şi </select>. O listă
de selecţie poate avea următoarele atribute:
 atributul name, care ataşează listei un nume (utilizat în perechile ‘‘name=value” expediat
serverului);
 atributul size, care precizează (printr-un număr întreg pozitiv , valoarea prestabilita fiind 1) câte
elemente din listă sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin
acţionarea barei de derulare ataşate automat listei).
Elementele unei liste de selecţie sunt incluse în lista cu ajutorul etichetei <option>. Doua atribute ale
etichetei option se dovedesc utile:
 atributul value primeste ca valoare un text care va fi expediat server-ului în perechea
‘‘name=value”; dacă acest atribut lipseşte , atunci către server va fi expediat textul ce urmează
după <option>;
 atributul selected (fără alte valori) permite selectarea prestabilita a unui element al listei.
Câmpuri de editare multilinie

Într-un formular câmpuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta
are următoarele atribute:
 atributul cols, care specifica numărul de caractere afişate într-o linie;
 atributul rows, care specifica numărul de linii afişate simultan;
 atributul name, care permite ataşarea unui nume câmpului de editare multilinie;
atributul wrap, care determină comportamentul câmpului de editare faţă de sfârşitul de linie.
20
Într-un formular pot fi afişate butoane fără un rol prestabilit. Când utilizatorul apasă un buton, se
lansează în execuţie o funcţie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor
astfel de funcţii (acest lucru este posibil daca se utilizează limbaje de scriptare precum JavaScript,
VBScript). Pentru a insera un buton într-un formular , se utilizează eticheta <input> având atributul
type configurat cu valoarea ‘‘button”. Alte doua atribute ale elementului ‘‘button” sunt:
 atributul name, care permite ataşarea unui nume butonului
 atributul value, care primeşte ca valoare textul ce va fi afisat pe buton.
1.5 Lista tagurilor noi in HTML 5.0

Tag-ul Descrierea
<article> marcheaza un articol
marcheaza un continut aparte fata de continutul paginii, dar care are legatura
<aside>
cu el.
<audio> marcheaza introducerea de continut audio
<canvas> marcheaza introducerea de continut grafic
<command> marcheaza un buton de comanda
<datalist> marcheaza un meniu drop-down
<details> marcheaza detaliile unui element
<dialog> marcheaza un dialog, o conversatie
<embed> marcheaza continut interactiv extern sau introducerea unui plugin
marcheaza un grup de elemente care au legatura unul cu celalalt si care pot fi
<figure>
considerate in pagina, continut de sine statator.
<footer> marcheaza sectiunea footer a pagini
<header> marcheaza sectiunea header a pagini
<hgroup> marcheaza o sectiune a pagini
<keygen> marcheaza un cod generat automat intr-un formular
<mark> marcheaza text evidentiat
<meter> marcheaza valoarea unei unitati de masura cunoscute
<nav> marcheaza o bara de navigare cu linkuri
<output> marcheaza diferite tipuri de rezultate ale unui script oarecare.
<progress> marcheaza o bara de progres fie ea grafica sau numerica
defineste continut care va fi afisat in cazul in care browser-ul nu supotra tag-ul
<rp>
ruby
<rt> defineste o regula sau o explicatie pentru tagul ruby
<ruby> folosit impreuna cu caracterele asiatice
marcheaza o sectiune oarecare (header, footer, bara de navigare, capitole sau
<section>
orice alta sectiune)
<source> marcheaza sursa fisierului multimedia
21
<time> marcheaza ora / data
<video> marcheaza introducerea unui video
22
Atribute noi pentru Tag-ul input:
Tag-ul Descrierea
tel Valoare de tip numar de telefon
search Valoare de tip camp de cautare
url Valoare de tip URL. (link)
email Valoare de tip adresa de email.
datetime Valoarea este de tip data sau timp
date Valoarea este de tip data
month Valoarea reprezinta una din lunile anului
week Valoarea reprezinta una din saptamanile zilelor.
time Valoarea este de tip timp
datetime-local Valorea este de tip date/time local
number Valoarea este un numar
range Valoarea este un numar dintr-un interval dat
color Valoarea este o culoare in hexazecimal. Ex: #FF8800
placeholder Specifica un indiciu care descrie valoarea preconizata a unui camp.
<a href=”#eticheta”>text</a>
Elemente de stocare pe web
HTML5 îmbunătățește mult sistemul HTML4 de stocare locală de date. Modalitatea

clasică de stocare a unor date necesare rulării aplicațiilor web sub formă dorită de dezvoltator
este cea prin intermediul așa numitelor ”cookie”. Un cookie este o parte mică de informație
trimisă de website către browser și salvată local. De fiecare dată când pagina se încarcă browser-
ul trimite informația către server care decide dacă o modifică sau nu și o retrimite înapoi către
browser. Cookie-urile sunt create pentru a reține informații despre activitatea utilizatorului,
informații necesare aplicației de server pentru afișarea în browser a datelor noi cerute conform
navigării. Cookie-urile sunt perechi de informație (nume și valoare), iar pagina web poate
accesa doar datele salvată de ea. Dezavantajele acestui proces sunt cantitatea mică de
informație care se poate salvă (4kb) și reducerea performanței aplicației web prin
trimiterea repetată a acestor date către server.
Dar toate acestea se schimbă cu noul model HTML5 în care cookie-ul este înlocuit cu
așa numitul ”web storage”, o bază de date locală în care informațiile sunt salvate ca text
sub formă de perechi cheie / valoare. Dimensiunea acestei baze de date este de maxim 10MB
(mult mai mare decât cea suportată de cookie) și accesul la ea se face la cerere, informația
nefiind trimisă către server la fiecare accesare a paginii web. Procesul de preluare și modificare
a informației web storage se face printr-un API în cadrul unui script conținut în pagină HTML.
În acest moment toate browser-ele moderne suportă această tehnologie, excepție
făcând IE7 și versiunile mai vechi de IE7.
Observatie:
Web storage poate salva date local (”local storage” - fără a avea data de expirare
cum se întâmplă la cookie, fiind accesibile chiar dacă browserul se redeschide) sau poate
23
salva date despre sesiune (”session storage”). Datele privitoare la sesiune sunt șterse când
browser-ul se închide.
HTML5 Web Storage asigură două noi obiecte (JavaScript) pentru a putea salva sau
prelua datele dorite:
- window.localStorage accesează datele salvate local
- code.sessionStorage accesează datele privitoare la sesiune
Pentru simplitatea exemplului acest nume se setează direct din codul JavaScript, însă
evident se poate prelua numele de la utilizator printr-un formular html.
Elemente de versiune web offline
O aplicație web care să ruleze offline (fără conexiune la internet) pare imposibil, însă
cu HTML5 un dezvoltator poate să facă acest lucru realizabil, cel puțin în mare parte. Ideea din
spatele acestei tehnologii este să permită utilizatorului să acceseze resurse care nu au nevoie de
conexiune la internet, fișiere statice ca pagini html, imagini, fișiere.css, scripturi
JavaScript, fișiere media și altele. Acest lucru este posibil prin conceptul de depozitare
(”caching”).
Caching în HTML rezidă din fișiere pe care dezvoltatorul are posibilitatea să le
specifice că fiind fișiere ce trebuiesc salvate local în browser. Un beneficiu este îmbunătățirea
vitezei cu care pagina este servită browser-ului, cele mai multe fișiere fiind locale și nu necesită
descărcarea de pe server. Pe de altă parte, aplicația poate să ruleze local în situația în care server-
ul este nefuncțional.
Întregul proces de caching offline rezidă într-un fișier numit ”manifest”. Acesta
conține o lista de fișiere pe care browser-ul trebuie să le descarce la prima accesare a aplicației
web. Desigur, acest fișier are o sintaxa și un set de reguli clare:
- fișierul trebuie declarat în codul html
- tipul MIME (Multipurpose Internet Mail Extensions) trebui declarat ca
"text/cache-manifest"
- pe prima linie trebuie trecut "CACHE MANIFEST"
- liniile cu comentarii trebuiesc prefixate cu caracterul diez #
Fișierul manifest are trei secțiuni:
- cache – dezvoltatorul menționează o lista cu link-urile relative ale fișierelor ce
trebuiesc salvate local
- network (opțional) - dezvoltatorul menționează o listă cu link-urile relative a
fișierelor ce trebuiesc accesate neapărat de pe server
- fallback (opțional) – dezvoltatorul specifică resurse alternative locale pentru
accesul la fișiere ce trebuiesc accesate online în cazul în care conexiunea la server
nu e posibilă
Declararea acestui fișier în codul html se face în cadrul etichetei <html>.
<html manifest="appcache">
Fișierele salvate local vor fi descărcate iar doar in cazul în care fișierul manifest a fost
modificat sau datele cache ale browser-ului au fost șterse.
Să presupunem că o aplicație web care afișează oră curentă este formată din trei fișiere:
fișierul oră.html, un fișier oră.css și unul oră.js și dorim să-l facem disponibil și în lipsa
conexiunii la internet. În acest caz fișierul manifest poate să arate că mai jos:
CACHE MANIFEST
ora.html
ora.css
ora.js
24
Fișierul ora.html trebuie să conțină declararea fișierului manifest ca mai jos:

<!DOCTYPE HTML>
<html manifest="appcache">
<head>
<title>Ora</title>
<script src="ora.js"></script>
<link rel="stylesheet" href="ora.css">
</head>
<body>
<p>Data este: <output id="data"></output></p>
</body>
</html>
Cu ajutorul fișierului ora.js care afișează data preluând data curentă prin intermediul
obiectului Date() și a fișierului .css, aplicația web este disponibilă și offline după prima accesare
online a fișierului .html.
/* ora.js */
setInterval(function () {
document.getElementById('data').value = new Date();
}, 1000);
/* ora.css */
output { font: 2em sans-serif; }
Elemente de notiuni de canvas
HTML5 introduce un nou element, de data asta pentru grafica, direct în pagină web.
Elementul <canvas> este un container pentru a desena forme, de obicei cu ajutorul unui script
(cum ar fi JavaScript). <canvas> specifică o zonă dreptunghiulară a paginii .html la care îi
trebuiesc date dimensiunile (lungime și lățime) și eventual un atribut ”id” pentru a putea face
referire la element din script. Astfel, cea mai simplă formă a elementului canvas este:
<canvas id="myCanvas" width="200" height="100"></canvas>
<canvas> acceptă atributul ”style” cu care se poate stiliza elementul prin etichetele CSS.
Mai mult, prin elementele de JavaScript se poate stiliza elementul în mod programatic. Mai jos
este un exemplu prin care programatic se poate desena un dreptunghi colorat în interiorul
elementului HTML <canvas>.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #AA0000;">
Browser-ul nu suporrta HTML5
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#AA0000";
ctx.fillRect(0,0,150,75);
25
</script>
</body>
</html>
Cu ajutorul JavaScript se pot trasa în <canvas> cercuri, gradiente, se poate scrie text, se
pot include imagini și chiar grafica 3D/
Elemente de SVG
SVG (Scalable Vector Graphics) definește o grafica vectoriala pentru paginile web. O
astfel de grafica poate fi mărită sau micșorată fără a pierde din calitate (toată grafica este
realizată cu ajutorul modelelor matematice). O particularitate importante e acestui element este
că suportă și animația. Avantajele folosirii imaginii SVG sunt:
- Imaginile pot fi create si editate cu orice editor text
- Imaginile pot fi indexate în motoarele de căutare
- Imaginile pot fi scalabile sau comprimate
- Imaginile pot fi printate la orice rezoluție fără să se piardă din calitate
Cel mai simplu element <svg> este prezentat mai jos:
<svg width="300" height="200"> </svg>
SVG este un limbaj pentru a descriere o grafica 2D cu ajutoul XML. Asta înseamnă că
fiecare element pe care îl conține poate fi accesat printr-un eveniment JavaScript. Mai mult,
fiecare formă desenată este reținută în memorie că un obiect așa încât browser-ul redesenează
automat forma dacă un atribut al ei este modificat.
Prin SVG se pot desena obiecte simple precum un cerc, un dreptunghi, o elipsă, un
poligon etc dar și texte și căi pe care se pot desenă alte forme. Ele pot fi stilizate cu ajutorul
CSS, dar se pot aplica și filtre sau gradiente de imagine pe formele deja create.
Aplicatie: sa se creeza folosind SVG un dreptunghi/pătrat la care sa se atașează o
umbră.
<!DOCTYPE html>
<html>
<body>
<svg height="120" width="100">
<defs>
<filter id="filter11" x="0" y="0">
<feGaussianBlur stdDeviation="35" />
<feOffset dx="15" dy="5" />
</filter>
</defs>
<rect width="90" height="90" fill="red" filter="url(#filter11)" />
<rect width="90" height="90" fill="yellow" />
Browser-ul nu suporta HTML5
</svg>
</body>
</html>
Elemente de Drag & Drop
26
HTML5 are o nouă tehnologie care permite ”apucarea” unui element din pagină și
mutarea lui într-o altă locație din pagină, așa numitul ”drag and drop”. Elementului care se vrea
mutat îi trebuie precizat atributul de ”draggable” trebuie sa fie ”true”.
Elemente video si audio
Onservatie: inainte de standardul HTML5 nu exista posibilitatea de a vizualiza fișiere

video sau de a asculta fișiere audio fără alte plug-in-uri (programe externe paginii). Începând
însă cu HTML5 a fost introdus elementul <video> pentru vizualizarea de fișiere video și
<audio> pentru fișiere audio.
Elementul video specifică unul sau mai multe surse de fișier video recunoscut de un
anumit browser. Dacă două sau mai multe surse sunt recunoscute de browser vizualizarea
fișierului video o să se facă de la cel de la prima sursă.
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Mesaj
</video>
</body>
</html>
Exemplu pentru audio:
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Mesaj
</audio>
Diferite browsere suportă unul sau mai multe tipuri de fișiere video recunoscute de către
elementul <video> (m4, webm sau ogg). Pentru fișierele audio tipurile recunoscute de
elementul <audio> sunt mp3, wav sau ogg. Totodată, elementul <video> sau <audio> suportă
interacțiunea cu script JavaScript pentru controlul vizualizării sau dimensiunii elementului
(exemplu pentru redare video):
Taguri noi ce apar in cadrul formularelor
<form>
HTML5 păstrează tag-ul <form> din HTML insă îl îmbunătățește cu două atribute
speciale: ”autocomplete” și ”novalidate”.
Se folosește atributul ”autocomplete” dacă formularul sau căsuța de introducere text din
formular poate fi completat sau nu cu valori introduse înainte de către utilizator. Desigur,
opțiunea de auto completare trebuie activată în browser. Mai jos este cazul unui formular
standard în care se permite auto completarea câmpurilor cu excepția câmpului de email.
<!DOCTYPE html>
27
<html>
<body>
<form action="form.html" autocomplete="on">
Nume:<input type="text" name="nume"><br>
Prenume: <input type="text" name="prenume"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
</body>
</html>
Atributului “novalidate” i se atribuie doar o valoare booleană și specifică dacă

formularul (datele introduse) trebuie validat sau nu la apăsarea butonului “submit”.
<input type=”submit” value”trimite” />
<input type=”reset” value=”sterge” /> Exemplu:
<form action="form.html" novalidate>
E-mail: <input type="email" name="email">
</form>
Un alt tag nou este <datalist> care specifică o lista pre definită de opțiuni la un element
<input>. Elementul <datalist> afișează o lista cu auto completare astfel încât utilizatorul o să
vadă în pagină o lista derulantă de opțiuni în câmpul de introducere a datelor.
Exemplu:
<form action="demo_form.asp" method="get">

<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Tagul <keygen> care asigură o modalitate securizată de autentificare. Acest element

folosește o pereche de chei în formular. Când se apăsa butonul de autentificare se generează
două chei, una private și una publică. Cea private este salvată local în browser și cea publică
este trimisă la server. Cheia publică este folosită pentru generarea unui certificat de autentificare
care urmează să valideze utilizatorul în viitor.
<!DOCTYPE html>
<html>
<body>
<form action="keygen.html" method="get">
Nume: <input type="text" name="nume">
Criptare: <keygen name="security">
</form>
</body>
</html>
28
Tagul <output> afișează rezultatul unui calcul specificat în atributul oninput.
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)*parseInt(b.value)"> 0
<input type="range" id="a" value="100" min="1" max="1000">1000 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
</body>
</html>
29
Exemple HTML 5
Stiluri CSS
Cascading Style Sheets (CSS). CSS este un limbaj de stilizare care descrie modul în care sunt
prezentate marcajele HTML. CSS3 este cea mai recentă versiune a limbajului CSS. Termenul
"CSS3" nu este doar o referință la noile caracteristici în CSS, ci al treilea nivel în dezvoltarea
caietului de sarcini CSS. CSS3 conține aproape tot ce este inclus în CSS2.1 (versiunea
anterioară). De asemenea adaugă noi caracteristici pentru a ajuta dezvoltatorii de a rezolva o
serie de probleme fără a fi nevoie de marcaje non-semantice, programare complexă sau
imagini suplimentare. Stilurile sunt introduse prin:
 definirea stilului;
 precizarea domeniului de aplicare a stilului.
30
Stilurile se pot defini in fisiere externe cu extensia CSS, astfel incat se pot utiliza toate
proprietatile CSS si se asociaza cu documentele HTML cat si XML.
<head>
<!— HTML4 – Link -->
<link rel="stylesheet" type="text/css" href="style/stylefile.css">
<!— HTML5 – Link -->
<link rel="stylesheet" href="stylefile.css">
Pentru XML: <?xml-stylesheet href=”exemplu.css” type=”text/css”?>
Stilurile sunt de finite în cadrul blocului <head>…</head> între etichetele <style

type=”text/css”>…</style>. În funcţie de modul de definire, putem avea:
Stiluri dedicate
Aceste stiluri se aplica blocurilor de text pentru care sunt definite. De exemplu:
<head><style>
h1,p,li {text-align:center; color:red;}
</style>
</head>
Toate titlurile care apar în pagina ca fiind de mărime 1 vor fi de culoare roşie şi centrate. Daca
dorim ca acelaşi stil să fie utilizat de către mai multe elemente (de ex. ‘‘h1”, ‘‘h2”, şi ‘‘p”)
atunci se utilizează o lista acestor elemente, separate prin virgula:
<style>
h1, h2, p {text-align:center; color:red;}
</style>
Clase de stiluri
Aceste stiluri permit definirea unui stil general şi folosirea lui oriunde este necesar. Exemplu:
Definim o clasă de stiluri ‘‘ac” (albastru şi centrat) în interiorul blocului <style>...</style>, aflat
la rândul lui în blocul <head>...</head>:
<style>
.ac {text-align:center; color:blue;}
</style>
Dacă dorim ca un titlu de mărimea 2 să folosească clasa de stiluri ‘‘ac” atunci scriem: <h2 class
= ac>Acesta este un header de marime 2 albastru şi centrat</h2>
Stiluri ‘‘identificate”
Toate elementele unui document admite un atribut universal numit id. Atributul id poate
identifica stilul utilizat de un element. Pentru a utiliza un stil ‘‘identificat” procedaţi astfel:
- în blocul <style>...</style> introduceţi definiţia stilului conform sintaxei:
<style>
#verde { color: green }
</style>
Configurarea fontului folosind stilurile
Mărimea fontului este stabilită prin atributul font-size. Valori posibile:

- predefinite: xx-small, x-small, small, medium, large, x-large, xx-large
- număr urmat de unitate de măsură (pt, px, in, mm, cm)
31
Tipul fontului este stabilită prin atributul font-family: listă de fonturi separate prin virgula. Se
pot utiliza cele 5 familii generice: serif, sans-serif, cursive, monospace, fantasy.
Grosimea fontului - font-weight: valori posibile:

- normal, bold, bolder, lighter.
- numere între 100 (cel mai subtire) şi 900 (cel mai gros)
Stilul fontului - font-style: normal, italic, oblique
- Culoarea textului este stabilită prin atributul color. Culoarea fondului textului este
stabilită prin atributul background-color. Valorile posibile sunt aceleaşi cu ale atributului
color.
Imaginea de fond a textului este stabilită prin atributul background-image = url(”adresa
imaginii folosite”). Alinierea textului este stabilită prin atributul text-align: left, center, right,
justify. Decorarea textului este stabilită prin atributul text-decoration: none, underline, line-
through, overline.
Font Properties
 Font Family
 Font Style
 Font Variant
 Font Weight
 Font Size
 Font
Font Family
Syntax: font-family: [[<family-name> | <generic-family>],]*
[<family-name> | <generic-family>]
Possible Values: <family-name>
 Any font family name may be used
 <generic-family>
 serif (e.g., Times)
 sans-serif (e.g., Arial or Helvetica)
 cursive (e.g., Zapf-Chancery)
 fantasy (e.g., Western)
 monospace (e.g., Courier)
Initial Value: Determined by browser
Applies to: All elements
Inherited: Yes
P { font-family: ‘‘New Century Schoolbook”, Times, serif }
Font Style
Syntax: font-style: <value>
Possible Values: normal | italic | oblique
Initial Value: normal
32
Inherited: Yes
H1 { font-style: oblique }
P { font-style: normal }
Font Variant
Syntax: font-variant: <value>
Possible Values: normal | SMALL-CAPS
Inherited: Yes
SPAN { font-variant: small-caps }
Font Weight
Syntax: font-weight: <value>
Possible Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500
| 600 | 700 | 800 | 900
Inherited: Yes
H1 { font-weight: 800 }
P { font-weight: normal }
Font Size
Syntax: font-size: <absolute-size> | <relative-size> | <length> |
<percentage>
Possible Values:  <absolute-size> 12px, 12pt, 12 mm,12cm,
 xx-small | x-small | small | medium | large | x-large
| xx-large
 <relative-size>
 larger | smaller
 <length>
 <percentage> (in relation to parent element)
Initial Value: medium

Inherited: Yes
H1 { font-size: large }
P { font-size: 12pt }
LI { font-size: 90% }
STRONG { font-size: larger }
33
H1 { font-size: 200% }
Font
Syntax: font: <value>
Possible  [ <font-style> || <font-variant> || <font-weight> ]?
Values: <font-size> [ / <line-height> ]? <font-family>
Initial Value: Not defined
Inherited: Yes
P { font: italic bold 12pt/14pt Times, serif }
Color and Background Properties
 Color
 Background Color
 Background Image
 Background Repeat
 Background Attachment
 Background Position
 Background
Color
Syntax: color: <color>
Inherited: Yes
H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }
Background Color
Syntax: background-color: <value>
Possible Values: <color> | transparent
Initial Value: transparent
Inherited: No
BODY { background-color: white }
H1 { background-color: #000080 }
input {color:#ff0000;background-color:#ffff00;}
Background Image
Syntax: background-image: <value>
Possible Values: <url> | none
Initial Value: none
34
Inherited: No
body { background-image: url(images/img.gif) }
P { background-image: url(http://www.htmlhelp.com/bg.png) }
Background Repeat
Syntax: background-repeat: <value>
Possible Values: repeat | repeat-x | repeat-y | no-repeat
Initial Value: repeat
Inherited: No
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }
Background Attachment
Syntax: background-attachment: <value>
Possible Values: scroll | fixed
Initial Value: scroll
Inherited: No
BODY { background: white url(candybar.gif);
background-attachment: fixed }
Background Position
Syntax: background-position: <value>
Possible Values: [<percentage> | <length>]{1,2} | [top | center |
bottom] || [left | center | right]
Initial Value: 0% 0%
Applies to: Block-level and replaced elements
Inherited: No
Horizontal keywords (left, center, right)
Vertical keywords (top, center, bottom)
Background
Syntax: background: <value>
Possible Values: <background-color> || <background-image> ||
<background-repeat> || <background-attachment> ||
<background-position>
Initial Value: Not defined
35
Inherited: No
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }
Text Properties
 Word Spacing
 Letter Spacing
 Text Decoration
 Vertical Alignment
 Text Transformation
 Text Alignment
 Text Indentation
 Line Height
Word Spacing
Syntax: word-spacing: <value>
Possible Values: normal | <length>
Inherited: Yes
The word-spacing property defines an additional amount of space between words. The value
must be in the length format; negative values are permitted.
Examples:
P EM { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }
Letter Spacing
Syntax: letter-spacing: <value>
Possible Values: normal | <length>
Inherited: Yes
The letter-spacing property defines an additional amount of space between characters. The
value must be in the length format; negative values are permitted. A setting of 0 will prevent
justification.
Examples:
H1 { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }
Text Decoration
Syntax: text-decoration: <value>
36
Possible Values: none | [ underline || overline || line-through || blink ]
Initial Value: none
Inherited: No
The text-decoration property allows text to be decorated through one of five properties:
underline, overline, line-through, blink, or the default, none.
For example, one can suggest that links not be underlined with
A:link, A:visited, A:active { text-decoration: none }
Vertical Alignment
Syntax: vertical-align: <value>
Possible Values: baseline | sub | super | top | text-top | middle |
bottom | text-bottom | <percentage>
Initial Value: baseline
Applies to: Inline elements
Inherited: No
The vertical-align property is particularly useful for aligning images. Some examples follow:
IMG.middle { vertical-align: middle }
IMG { vertical-align: 50% }
.exponent { vertical-align: super }
Text Transformation
Syntax: text-transform: <value>
Possible Values: none | capitalize | UPPERCASE | lowercase
Initial Value: none
Inherited: Yes
H1 { text-transform: uppercase }
H2 { text-transform: capitalize }
Text Alignment
Syntax: text-align: <value>
Possible Values: left | right | center | justify
Applies to: Block-level elements
Inherited: Yes
H1 { text-align: center }
P.newspaper { text-align: justify }
37
Text Indentation
Syntax: text-indent: <value>
Possible Values: <length> | <percentage>
Initial Value: 0
Applies to: Block-level elements
Inherited: Yes
P { text-indent: 5em }
Line Height
Syntax: line-height: <value>
Possible Values: normal | <number> | <length> | <percentage>
Inherited: Yes
P { line-height: 200% }
Orice tip de continut(text sau imagine) este incadrat intr-o boxa de afisare, marginita de zonele
de padding, border si margin, fiecare avand laturile: top, left, bottom si right.
Borduri in css
CSS3
Noile caracteristici în CSS3 includ suport pentru selectori suplimentari, umbre, colturi
rotunjite, fundaluri multiple, animație, transparență și multe altele. CSS3 este diferit de
HTML5.
Unele tehnici de proiectare își găsesc locul în aproape fiecare proiect. Umbrele,
degradeurile sau colțurile rotunjite sunt trei exemple bune. În trecut, pentru a crea gradiente,
umbre sau colțuri rotunjite web designerii au trebuit să recurgă la o serie de tehnici destul de
38
dificile. Uneori au fost necesare și elemente HTML suplimentare. În cazurile în care codul
HTML a trebuit să fie păstrat curat (organizat si ușor de citit) au fost necesare diferite proceduri
de programare. În cazul gradienților utilizarea de imagini suplimentare a fost inevitabilă.
CSS3 permite să includă și alte elemente de design într-un mod revoluționar care să
aducă multe beneficii: cod organizat care să fie accesibil pentru oameni sau chiar pentru alte
mașini, cod usor de întreținut, mai puține imagini și încărcare mai rapidă a paginilor web.
Deși pare că există o mare diferență între CSS2 și CSS3 (care însă este destul de
adevărat), toate browserele moderne au fost destul de rapide pentru a adopta noua adăugire la
familia W3C. Toate browserele importante au deja support pentru cele mai multe caracteristici
CSS3, care sunt disponibile în prezent. Ca și în HTML5, W3C consideră că CCS3 este în
continuă dezvoltare și este foarte puțin probabil să obțină rapid o versiune finală.
Poate că cea mai mare diferență dintre CSS2 și CSS3 este separarea în module. În timp
ce în versiunea anterioară totul a fost specificat în linii mari prin definirea unor caracteristici
diferite, CSS3 este împărțit în mai multe documente care sunt numite module. Fiecare modul
are noi capabilități fără să afecteze compatibilitatea cu versiunea anterioara.
Suportul pentru mass-media poate fi cel mai important plus față de CSS. Ceea ce face
este simplu: permite anumite condiții astfel încât să fie aplicate diferite stiluri CSS care sa facă
pagina web să se potrivească pentru toate tipurile de dimensiuni de ecran. Suportul mass-media
permite dezvoltatorilor să își adapteze pagina la diferite rezoluții fără a modifica sau elimina
conținut sau cod HTML.
Înainte de CCS3 fiecare browser avea câte un prefix care se adăuga la unele elemente
CSS pentru a ajuta dezvoltatorul să se asigure de uniformitatea stilului în pagină:
- moz-: Firefox
- -WebKit-: Safari și Chrome
- -o-: Opera
- -ms-: Internet Explorer
Cu noul CSS3 aceste prefixe o să dispară.
Elemente de chenar
Adăugarea de colțuri rotunjite în CSS2 a fost dificilă. Era nevoie de a se folosi imagini
diferite pentru fiecare colț. În CSS3 crearea de colțuri rotunjite se face foarte ușor pentru că a
fost introdusă proprietatea “border-radius”:
div
{
border:2px solid;
border-radius:25px;
}
Pentru a încadra un element cu o imagine a fost introdusa proprietatea “border-image”:

div
{
/* Safari 5 */
-webkit-border-image:url(border.png) 30 30 round;
-o-border-image:url(border.png) 30 30 round;
/* Opera 10.5-12.1 */
border-image:url(border.png) 30 30 round;
}
Pentru crearea efectului de umbră a fost introdusă proprietatea “box-shadow”:
div
39
{box-shadow: 10px 10px 5px #888888;
}
Elemente de culoare, fundal și gradient
CSS3 conține mai multe proprietăți de fundal noi care permit un control mai mare al
elementului de fundal. Proprietatea “background-size” specifică dimensiunea imaginii de
fundal. Înainte de CSS3 dimensiunea imaginii de fundal era determinată de dimensiunea reală
a imaginii. În CSS3 este posibil să se specifice dimensiunea imaginii de fundal ceea ce ne
permite să se reutilizăm imaginea de fundal și în alte contexte. Se poate specifica dimensiunea
în pixeli sau în procente. Dacă se specifică dimensiunea în procente dimensiunea este
relativă la lățimea și înălțimea elementului părinte.
div
{
background:url(img.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
}
Proprietatea “background-origin” specifică zona de poziționare a imaginilor de fundal.

Imaginea de fundal poate fi plasată în proprietățile “content-box”, “padding-box”, sau
“border-box”.
div
{
background:url(img.jpg);
background-origin:content-box;
}
Mai mult decât atât, se pot poziționa mai multe imagini de fundal la un element.
body
{
background:url(img1.jpg),url(img2.jpg);
}
Cu noul CSS3 se pot aplica gradiente ca fundal în loc de imagini. Gradientele sunt
tranziții line între două sau mai multe culori. Anterior trebuia să utilizam imagini de fundal
pentru aceste efecte. Folosind gradienți în CSS3 putem reduce timpul de descărcare și utilizarea
lățimii de bandă. În plus, elementele cu gradienți arată mai bine atunci când sunt mărite
deoarece gradientul este generat de către browser. În cazul gradientului linear trebuiesc definite
cel puțin două culori unde ultima culoare reprezintă culoarea către care vrem să facem tranziția.
De altfel, trebuie să stabilim un punct de pornire și o direcție sau un unghi.
#grad
{
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
40
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax */
}
Se pot defini desigur și gradienți de mai multe culori:

#grad
{
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */

background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Gradientele CCS3 suportă și transparența pentru un efect special. Pentru setarea

gradului de transparență se adaugă un număr între 0 și 1 la parametrul rgb(), unde 1 reprezintă
lipsa transparenței.
#grad
{
background:
-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
/*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}
Gradientul dorit se poate repeta folosind proprietatea “repeating-linear-gradient”.

#grad
{
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Pe lângă gradientul linear se poate desena și un gradient circular (radial) folosind radial-
gradient().
#grad
{
41
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}
Efecte text
CSS3 elimină în cele din urmă necesitatea de prelucrare în Photoshop a unui text atunci
când doriți să îi faceți o simplă umbră. Proprietatea “text-shadow” este exemplificată după cum
urmează:
text-shadow: 2px 2px 2px # 000;
Acest lucru produce un efect de umbră în dreapta și sub text cu dimensiunea de 2px și
adaugă un efect de blur (estompare) tot de 2 px.
Există însă o proprietate în CSS3 care o sa fie utilizat în fiecare design. Este unul foarte
util atunci când avem nevoie de el pentru că este mai mult decât practic. Proprietatea despre
care vorbesc este “word-wrap” și chiar dacă pare imposibil, funcționează în fiecare browser
inclusiv în toate versiunile de IE. De fapt, a fost suportat chiar încă de la IE5.
Cu toate că s-ar putea asocia în mod normal CSS3 cu browser-e moderne cum ar fi
Safari și Chrome, trebuie remarcat faptul că specificațiile CSS3 există din 2001. Așa că, sunt
câteva proprietăți (cum ar fi și “word-wrap”) care au avut suport de foarte mult timp.
#selector {
word-wrap: break-word;
}
Practic, această proprietate setează conținutul textului vizat în elementul “selector“

astfel încât să nu se depășească lățimea setată pentru “selector“. De exemplu, dacă avem o
lățime de 200px pentru un anumit element se poate să avem în interiorul acelui element un
cuvânt foarte lung care este mai mare decât lățimea elementului (200px). Cu această setare se
poate forța textul să se rupă astfel încât să nu mai iasa înafara elementului (chiar dacă se rupe
cuvântul la mijloc).
Valorile luate de această proprietate mai pot fi:
- Normal - valoare implícită, spargerea textului făcându-se după regulile
uzuale
- break-all - liniile se pot sparge între oricare două litere
- keep-all – cuvintele de două litere nu se pot sparge
- initial – setează valoarea default
- inherit – preia setarea de la elementul părinte
Animație 2D
Cu CSS3 putem crea animații în pagina web fără a avea nevoie de animații Flash,
imagini sau JavaScript. O animație CSS3 permite unui element să își schimbe treptat stilul
de la o stare la alta. Există posibilitatea de a modifica oricâte proprietăți dorim și ori de cate
ori avem nevoie. Schimbarea se poate specifica în procente (de la 0 la 100, unde 0 reprezintă
începutul animației și 100 sfârșitul ei) sau folosind cuvinte cheie precum “from” sau “to”.
Pentru a realiza o animație avem nevoie de selectorul “@keyframes” care indică
crearea animației. La acest selector trebuie precizat un element pentru care se vrea animația.
Cel mai simplu exemplu este dat mai jos, în care pentru o etichetă <div> avem atașată
42
proprietatea “animation”. Animația este creată prin cuvintele ”from” și ”to”, și modifică treptat
culoarea de fundal a etichetei din rosu în galben (exemplu 1).
Exemplu 1
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
-webkit-animation:anim 5s; /* Chrome, Safari, Opera */
animation:anim 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes anim
{
from {background:red;}
to {background:yellow;}
}
@keyframes anim
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Dacă se dorește o animație cu mai multe etape de modificare se folosește tehnica cu

procente, astfel încât la orice pas (procent) dorit se face trecerea la o alta stare (exemplu 2).
Exemplu 2
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
-webkit-animation:anim 5s; /* Chrome, Safari, Opera */
animation:anim 5s;
43
}
/* Chrome, Safari, Opera */
@-webkit-keyframes anim
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@keyframes anim
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<div>text
</div>
</body>
</html>
Animație 3D
Cu adevărat animația 3D nu există în plan bidimensional, însă cu așa numitele

transformări din CSS3 se poate rezolva schimbarea perspectivei asupra unui obiect 2D. CSS3
introduce 2 tipuri de transformări: 2D și 3D. Transformările 2D sunt deja suportate de aproape
toate browser-ele, însă cele 3D doar într-un număr limiat.
Cu o singura linie de cod CSS se poate transforma un element după următoarele reguli:
- skew – transformare oblică
- scale – mărire sau micșorare
- rotate – rotire
- translate – decalare
#skew {
transform:skew(35deg);
}
#scale {
transform:scale(1,0.5);
}
#rotate {
transform:rotate(45deg);
}
#translate {
transform:translate(10px, 20px);
}
#rotate-skew-scale-translate {
44
transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}
Transformările 3D sunt similare celor 2D, principalele proprietăți fiind “translate3d”,

“scale3d”, “rotate”, “rotate”, “rotate”. Un cod simplificat care să exemplifice proprietățile de
mai sus:
#trans div {
transition:all 2s ease-in-out;
perspective: 800px;
perspective-origin: 50% 100px;
}
#trans:hover #rotateX {
transform:rotateX(180deg);
}
#trans:hover #rotateY {
transform:rotateY(180deg);
}
#trans:hover #rotateZ {
transform:rotateZ(180deg);
}
Dincolo de aceste transformări 3D care se regăsesc în special în interfețele grafice ale

aplicațiilor de mobil se poate emula o reprezentare 3D a unui cub într-o pagina web folosind
toate elementele de mai sus (exemplu 3).
Exemplu 3
Coloane CSS3
Cu CSS se pot crea diferite stiluri de prezentări web asemănătoare ziarelor tipărite, așa
numite coloane multiple. Cu ajutorul “column-count” se poate preciza în câte coloane trebuie
împărțit un anumit element. Dacă dorim să avem 3 coloane într-o etichetă <div> numită “news”
nu trebuie decât să adăugăm această proprietate la codul CSS al respectivului <div>. În acest
fel textul conținut în “news” o să fie împărțit în coloane.
.news
{
-webkit-column-count:3; /* Chrome, Safari, Opera */
-moz-column-count:3; /* Firefox */
column-count:3;
}
Pentru a specifica distanța dintre coloane s-a introdus proprietatea “column-gap” care
preia o mărime declarată în pixeli. Pentru a continua cu stilizarea coloanelor se poate seta
proprietatea “column-rule” cu ajutorul căreia putem seta dimensiunea, stilul și culoarea pentru
fiecare coloana.
.news
{
-webkit-column-count:3; /* Chrome, Safari, Opera */
-moz-column-count:3; /* Firefox */
45
column-count:3;
-webkit-column-gap:40px; /* Chrome, Safari, Opera */
-moz-column-gap:40px; /* Firefox */
column-gap:40px;
-webkit-column-rule:4px dotted #aa0000; /* Chrome, Safari, Opera */
-moz-column-rule:4px dotted #aa0000; /* Firefox */
column-rule:4px dotted #aa0000;
}
Exemplu
46
Întrebări de control
- Definiti notiunile WWW, FTP , HTTP, IRC, HTML.

- Definiti notiunea de site web, browser, motor de cautare.
- Definiti sturctura unei pagini web. Exemplu.
- Explicati elementele care apar in cadrul formularelor
(form).
- Definiti stilurile (CSS-urile) si explicati cum se pot apela
acestea.Exemple.
47
Unitatea de invatare II.
JAVASCRIPT si jQuery
Aceasta unitate de invatare are ca scop cunoasterea si utilizarea limbajului Javascript,

pentru realizarea site-urilor web. JavaScript este un limbaj de scriptare având o sintaxă
apropiată de cea a limbajului C. Comenzile JavaScript sunt incluse în pagina Web, împreună
cu textul şi marcajele care formează conţinutul acesteia şi sunt interpretate de către browser. Nu
toate browserele sunt capabile să execute comenzile JavaScript. JavaScript este un limbaj bazat
pe obiecte.
După parcurgerea si însusirea acestei teme, studentul va putea sa:
- utilizeze functiile javascript;

- utilizeze evenimente JavaScript;
- sa operezecu obiectele din JavaScript;
- sa scrie secvente de cod Javascript;
- sa se implezenteze functii jQuery
Materialul trebuie parcurs în ordinea sa firească prezentată în continuare, inclusiv

în zona referitoare la aplicatii. Se recomandă testarea si notarea sintaxei functiilor.
Timpul minim pe care trebuie să-l acordati acestui modul este de 8 ore. JavaScript
şi Java
Java este un limbaj de programare orientat obiect, dezvoltat de firma Sun Microsystems, în timp
ce JavaScript are o structură bazată pe obiecte şi a fost dezvoltat de firma Netscape
Communications. Limbajul Java poate fi folosit pentru proiectarea de aplicaţii independente
sau pentru proiectarea de microaplicaţii care pot fi incluse în cadrul paginilor Web şi care poartă
denumirea de applet-uri şi sunt şi ele independente de platformă. Iată câteva deosebiri esenţiale
între Java şi JavaScript:
 aplicaţiile Java sunt compilate în fişiere binare care sunt apoi interpretate de către VJM
(Virtual Java Machine - Maşină Virtuală Java), în timp ce codul JavaScript este
transmis ca un text obişnuit şi este interpretat.
 Java este orientat obiect în timp ce JavaScript este bazat pe obiecte.
 codul JavaScript este inclus în cadrul documentului HTML; applet-urile Java sunt
referite din cadrul unui document HTML, dar codul se află într-un fişier separat.
 script-urile JavaScript sunt incluse prin intermediul marcajului <script
type=‘‘text/javascript”>, iar applet-urile Java prin intermediul marcajului <OBJECT>;
există şi marcajul <APPLET> dar folosirea lui nu mai este recomandată.
48
 în cadrul script-urilor JavaScript variabilele nu trebuie declarate, în timp ce în cadrul
aplicaţiilor Java variabilele trebuie declarate înainte de a fi folosite. Mai mult, în cadrul
script-urilor JavaScript, o variabilă care este considerată ca având un anumit tip la un
moment dat poate fi considerată ulterior ca având un alt tip; de exemplu, o variabilă
poate fi folosită ca fiind un şir de caractere pentru ca apoi să fie considerată ca fiind un
număr real.
 JavaScript foloseşte legarea dinamică, adică referinţele sunt verificate în timpul rulării,
în timp ce Java foloseşte legarea statică, adică referinţele trebuie să existe în momentul
compilării.
 În general, limbajul JavaScript este folosit pentru efectuarea de calcule, citirea unor date
dintr-o tabelă, proiectarea de ecrane HTML fără a folosi script-uri CGI.
2.2 Marcajul <script type=‘‘text/javascript”>
În interiorul unui document HTML, instrucţiunile JavaScript sunt cuprinse, de obicei, în

interiorul marcajului <script type=‘‘text/javascript”>. Acest marcaj poate apărea atât în antetul
documentului HTML (marcajul <HEAD>), cât şi în corpul documentului (marcajul <BODY>).
Script-urile definite în antet sunt încărcate înaintea încărcării restului paginii, antetul fiind un
loc excelent pentru plasarea funcţiilor JavaScript pentru a fi siguri că acestea vor fi disponibile
atunci când sunt apelate în alte secţiuni ale documentului HTML. Pentru a insera cod JavaScript
într-un document HTML deja existent, este necesara introducerea în fisier a etichetei <script
type=‘‘text/javascript”> ....... </script>. Aceasta eticheta are aributul ‘‘type”, sau ‘‘language” (
acesta din urma este depreciat in standardul XHTML) care va specifica browserului limbajul
folosit pentru interpretarea codului inclus. In interiorul etichetei <script
type=‘‘text/javascript”> ... </script> vom scrie codul sursă.
Exemplu de script-ul prin intermediul căruia poate fi afişat mesajul ‘‘Hello World!” în fereastra
programului de navigare.

<html xmlns=‘‘http://www.w3.org/1999/xhtml” lang=‘‘en”>
<head>
<meta http-equiv=‘‘Content-Type” content=‘‘text/html; charset=utf-8” />
<title>Test JavaScript</title>
<title>Cod JavaScript</title>
</head>
<body>
<script type=‘‘text/javascript”>
document.write(”Hello World! ‘‘);
</script>
</body>
</html>
Instructiunile JavaScript se pot introduce şi într-un alt fisier extern, care va avea extensia ‘‘.js”,
iar pentru editarea acestui fisier se poate utiliza un editor simplu de texte. Avantajul este că se
poate utiliza acelaşi cod în mai multe pagini HTML.
Dacă codul JavaScript se afla într-un fisier extern, eticheta
49
va trebui să contina să atributul ‘‘src” a carui valoare determina locatia fisierului in care se afla
codul JavaScript. In fisierul extern cu extensia ‘‘js” nu trebue să scriem eticheta ‘‘<script
type=‘‘text/javascript”>‘‘, se scriu direct instructiunile scriptului. Dacă fişierul extern este
info.js, atunci fişierul HML care apelează fişierul extern .JS arată:

<html xmlns=‘‘http://www.w3.org/1999/xhtml” lang=‘‘en”>
<head>
<meta http-equiv=‘‘Content-Type” content=‘‘text/html; charset=utf-8” />
<title>Test JavaScript</title>
<title>Cod JavaScript</title>
<script src=‘‘info.js” type=‘‘text/javascript”>
</script></head>
<body>….
</body>
</html>
Fisierele JavaScript externe nu pot conţine decât declaraţii şi funcţii JavaScript, iar
extensia trebuie să fie .js.
Comentarii în Javascript
La versiuni mai vechi de browsere, instrucţiunile JavaScript sunt scrise între comentarii. Sintaxa
generala este:
<! - - Inceput comentariu
Instructiuni JavaScript
<! - - Sfarsitul comentariului - - >
</SCRIPT>
Proiectanţii introduc instrucţiunile JavaScript între comentarii HTML astfel încât browserele
care nu permit JavaScript vor ignora instrucţiunile, interpretându-le drept comentarii.
Comentariile în JavaScript pt fi definite ca în (applet-urile) JAVA, C şi C++ astfel:
/* Comentariu pe mai multe linii

*/
// Comentariu pe o singură linie
2.3 Elementele limbajului JavaScript
50
 Numerele care pot fi: numere întregi şi numere reale ,
 Boolean ce are valorile true şi false,
 null este o valoare nedefinită,
 undefined: o proprietate de nivel superior poate avea valoarea undefined,
 NaN: Not a Number,
 String ‘text’. Pentru orice literal de tip string se utilizează metodele clasei String.
 Vectori şi elemente de tip Obiect .
Elementele limbajului pot fi:
JavaScript este un limbaj “dinamic-tipizat” sau “slab-tipizat” (loosely-typed), ceea ce înseamnă

că nu trebuie să specific tipul unei variabile când o declar fiindcă ea va fi convertită automat
dacă va fi nevoie în timpul execuţiei scriptului. O variabilă se poate declara în două moduri:
 atribuindu-i o valoare: x=124
 cu ajutorul cuvântului rezervat var: var x=124
O variabilă JavaScript căreia nu i-a fost atribuită o valoare va avea valoarea undefined.
Rezultatul evaluării unei variabile depinde de modul în care a fost declarată, astfel:
- dacă variabilei nu i-a fost atribuită o valoare şi a fost declarată fără var rezultatul evaluării
variabilei va fi o eroare runtime.
- dacă variabilei nu i-a fost atribuită o valoare, dar a fost declarată folosind cuvăntul rezervat
var rezultatul evaluării variabilei va fi undefined sau NaN în context numeric.
Variabilele, definite în afara funcţiilor, se numesc variabile globale şi ele sunt accesibile oriunde
în documentul curent. Variabilele, definite în interiorul funcţiilor, se numesc variabile locale şi
ele sunt vizibile numai în interiorul funcţiilor în care sunt declarate.
Şiruri (de caractere) JavaScript
Într-un scenariu JavaScript, şirurile de caractere constante se delimitează între apostrofuri
simple sau duble.
Operatorul '+' semnifica concatenarea şirurilor de caractere. Ca şi în C, JAVA, şirurile de
caractere pot conţine secvenţe Escape: \n, \t, \f etc.
În JavaScript sunt admise urmatoarele categorii de expresii: aritmetice,şiruri de caractere şi

logice.
Operatorii utilizaţi de limaj pot fi:
Matematici:
+, -, *, /, ^, %(modulo)
51
- unari: se aplică la un singur operand: a++, a—
- binari: se aplică la 2 operanzi:
a+b, a-b
a+=2 echivalent cu a=a+2
De comparaţie, folosiţi pentru scrierea unor expresii logice. La evaluarea acestora se
poate obţine true sau false: <, >, <=, >=, ==, !=
Există în JavaScript o serie de funcţii predefinite cum ar fi:
 eval(expr): evaluează o expresie data ca şi parametru (string);

 isFinite(number) : determină dacă argumentul este un număr finit;
 isNaN(testValue) : determina dacă testValue este NaN;
 parseFloat(str) : transformă stringul str în valoare float şi o returnează;
 parseInt(str [, radix]) : transformă str într-o valoare de tip întreg şi o returnează;
radix este baza de numeraţie;
 Number(obj) : converteşte obj la number;
 String(obj) : converteşte obj la string;
 escape/unescape(str) : folosite pentru codificare/decodificare stringuri.
Preluarea de intrări tip text de la utilizator

În cazul când este nevoie de citirea unei linii text de la utilizator, se poate utiliza funcţia prompt
pentru afişarea unei casete de dialog care oferă utilizatorului un prompter (cursor) pentru a
introduce date şi pentru preluarea ulterioara a intrării utilizatorului. Funcţia arată prompt ( text,
[valoare iniţiala] ) şi provoacă apariţia unei casete în care utilizatorul va putea introduce un
şir de caractere. Caseta conţine şi un buton 'OK' . Controlul de editare este iniţializat cu valoare
iniţială, dacă acest argument este prezent, altfel este iniţializat cu textul (undefined)/
Funcţia EVAL se utilizează pentru a converti un şir de caractere la o valoare întreagă.
Funcţia confirm() are rolul de a crea o fereastră prin intermediul căreia se cere confirmarea
utilizatorului pentru efectuarea unei acţiuni. Funcţia returnează o valoare logică (true sau false),
iar sintaxa ei este confirm(mesaj).
Fereastra creată are două butoane: Ok şi Cancel, nu poate fi minimizată sau redimensionată şi
are un buton special pentru închidere. În cazul apăsării butonului Ok sau a tastei ENTER
valoarea returnată este true, iar în cazul apăsării butonului Cancel, a butonului de închidere sau
a tastei ESC valoarea returnată este false .
Obiectul document
În JavaScript, obiectul document corespunde documentului HTML curent. Daca un script
utilizează metodă write pentru obiectul document în vederea afişării ieşirii, browserul va reda
ieşirea în documentul curent.Exemple de utilizare:
document.write(”text”)
document.write(variabilă)
52
Putem intercala cod JavaScript cu cod HTML. În document.write se pot utiliza etichetele
HTML cu condiţia de a fi scrise între ghilimele. Dacă în cadrl ghilimelelor amen nevoie de alte
ghilimele atunci pentru cele din urmă se utilizeazo apostrof. De exemplu, putem afişa texte
scrise cu fonturi bold, respectiv italic ca în exemplu alăturat.
<html> <head>
<title> document.write </title>
</head>
<body>
document.write(”<b>bold</b> <i>italic</i>‘‘);
</script>
</body> </html>
Instrucţiuni JavaScript
Instrucţiunile JavaScript pot fi terminate să nu cu caracterul ;. Acest caracter este obligatoriu
doar atunci când sunt mai multe instrucţiuni pe acelaşi rând.
Instrucţiunea de atribuire a fost utilizată şi în exemple anterioare şi este cea cunoscută din C şi
Java. Instrucţiunea IF este o instrucţiunea condiţională şi foloseşte cuvintele cheie if şi else
având următoarea sintaxă:
if (condiţie)
{
instrucţiuni pentru condiţie adevărată
}
else
{
instrucţiuni pentru condiţie falsă
}
Să se sciteasca numele şi parola unui utilizator iar în funcţie de acestea să se afişeze un anumit
mesaj (figura 2.1).
nume=prompt(”Introduceti numele”,””);
parola=prompt(”Introduceti parola”,””) ;
n_valid=‘‘student” ;
p_valid=‘‘utm” ;
if((nume==n_valid)&&(parola==p_valid))
{
alert(”Date corecte!”) ;
document.write(”Bun venit pe pagina studentilor de la facultatea...”) ;
}
else
{
alert(”Date incorecte!”) ;
document.write(”Apasati F5 şi mai incercati !!!...”) ;
}
</script>
53
Figura 2.1
Instrucţiuni de ciclare
Adeseori se doreşte executarea repetată a mai multor instrucţiuni. Acest lucru este posibil, cu
ajutorul instrucţiunilor de ciclare. În JavaScript există instrucţiunile de ciclare: for, while şi
do...while. Sintaxa instrucţiunii for este:
for (iniţializare; condiţie; incrementare)

{
corpul ciclului;
}
Oricare dintre cele patru secţiuni (de iniţializare, condiţia, de incrementare sau corpul) poate
lipsi.
Sintaxa instrucţiunii while este:
while (condiţie)
{
corpul ciclului
}
- În cazul instrucţiunii while poate lipsi corpul ciclului, prezenţa condiţiei fiind obligatorie.
Exemplu:
i=””;
while(i!==‘‘student”)
{
i=prompt(”Introduceti parola”,””);
}
document.write(”Password accepted”);
</script>
Instrucţiunea SWITCH
54
Poate fi folosită pentru alegerea unei opţiuni din mai multe opţiuni.
Sintaxa instrucţiunii este:
switch (expresie)
{
case eticheta : instrucţiune; break;
case eticheta: instrucţiune; break;
...
default : instrucţiune;
}
Exemplu: <script type=‘‘text/javascript”>

opt=eval(prompt(”Introduceti nr zilei”,”” ))
switch (opt)
{
case 1: zi=‘‘luni”;break
case 2: zi=‘‘marti”;break
case 3: zi=‘‘miercuri”;break
case 4: zi=‘‘joi”;break
case 5: zi=‘‘vineri”;break
case 6: zi=‘‘sambata”;break
case 7: zi=‘‘duminica”;break
default: zi=‘‘Introduceti un nr între 1 şi 7”
}
document.write(zi)
</script>
Instrucţiunile break şi continue

Instrucţiunea break permite ieşirea forţată dintr-o instrucţiune de ciclare. În momentul în care
interpretorul JavaScript întâlneşte o astfel de instrucţiune, el întrerupe execuţia ciclului în
interiorul căruia se află aceasta.
Instrucţiunea continue permite saltul peste anumite instrucţiuni din corpul ciclului care nu mai
trebuie executate în anumite condiţii. În cazul unui ciclu for, se trece în mod automat, la ultimul
pas al execuţiei ciclului, în timp ce în cazul unui ciclu while se trece la primul pas.
Folosirea tablourilor de elemente în JS

Un tablou de elemente (şir) este o structură complexă care înglobează mai multe variabile de
acelaşi tip sub un nume. Un şir de elemente are o anumită dimensiune, are un anumit număr de
elemente, fiecare element având o valoare şi este identificat prin poziţia în cadrul şirului.
Un şir se defineşte prin: numeşir = new Array().
2.4 Funcţii şi evenimente în Java Script
O funcţie este văzută ca un bloc de instrucţiuni identificat printr-un nume care poate primi
anumite argumente şi întoarce o valoare. Sintaxa unei funcţii este:
55
function numefuncţie (listă parametri formali)
{
instrucţiuni;
return (valoare)
}
Apelul funcţiei se realizează numefuncţie(parametri efectivi). Funcţiile sunt definite de

obicei în zona HEAD şi sunt apelate apoi, ori de câte ori este nevoie, în BODY.
F(x)=x+1 unde x – parametru formal,

F(2)=3 unde 2 – parametru efectiv.
function suma (a,b) { s=a+b;return s; }

Se poate apela x=suma (1,1).
Exemplu: funcţia titlu (parametru), să afişeze parametru aceasteia cu font albastru de

mărime 5 (figura 2.2).
function titlu (a)
{document.write(“<font color=red size=7>‘‘+a+”</font>‘‘)}
x=prompt(“Introduceti titlul”,””);titlu(x);
</script>
Figura 2.2 Text scris prin aplelul unei funcţii

Funcţiile pot fi definite şi fără parametri şi pot returna sau nu o valoare.
function titlu ()
{document.write(”<font color=red size=7>‘‘+a+”</font>‘‘);}
a=prompt(”Introduceti titlul”,””);
titlu();</script>
Utilizarea casetelor de validate
56
Conţinutul enei casete de validare se preia cu propietatea value care se aplica casetei astfel:
numecaseta.value. Daca caseta face parte dintr-un formular atunci continutul casetei se
accesează: numeformular.numecaseta.value.
Să se preia dintr-un formular numele şi parola, să se verifice şi să se afişeze un mesaj într-o altă
casetă a formularului (figura 2.3).
<html>
<head>
<title> Formular butoane java – casete text </title>
<script>
function afisare(){
// pot să pun varibile formale
a=form1.t1.value;
b=form1.t2.value;
if (a==”123” && b==”abc”) form1.t3.value=”Corect!”;
else
if(a==”123” && b!=”abc”) form1.t3.value=”parola incorecta!”;
else
if(a!=”123” && b==”abc”) form1.t3.value=”user incorrect!”;
else
form1.t3.value=”user incorrect! şi parola incorecta”;
}
function sterge(x)
{x.value=””}
// “\n” trece la randul urmator
// sintaxa if: if(conditie) executa o secventa s1; else executa secventa s2
// observatie: daca conditia are 2 elem se grupeaza inte {}
// secventa s2 poate să lipseasca şi atunci se reduce la if(conditie) S1;
</script>
</head>
<body><form name=”form1”>
<h1><center> casete de text</center></h1>
User: <input type=”text” name=”t1” value=”” onclick=”sterge(t1)” size=”40” >
<br><br><br>
parola: <input type=”password” name=”t2” value=”” onclick=”sterge(t2)”>
<br><br>
<br>mesaj: <input type=”text” name=”t3” value=”” onclick=”sterge(t3)” size=”40”>
<input type=”button” name=”b1” value=”testare” onclick=”afisare()”>
</form></BODY>
</html>
57
Figura 2.3. Testare user şi parola
Utilizarea casetelor de tip checkbox

Pentru o casetă de tip checkbox starea acesteia se preia cu proprietate checked.
Utilizarea butoanelor de tip radio

Dacă butoanele de tip radio fac parte din acelaşi grup, atunci ele sunt gestionate într-un vector,
astfel încât primul element este pe poziţia zero. Proprietatea utilizată pentru a testa starea
elementului (dacă a fost selectat sau nu) este tot checked, asemănător ca la casetele de tip
ckeckbox.
Exemplu
<html>
<head>
<title> butoane radio </title>
<script>
function test(x){
if(x[0].checked) alert ("Ati selectat culoarea "+ x[0].value);
}
</script>
</head><body>
Utilizarea listelor de selecţie

Propietatea utilizată pentru a testa dacă un element dintr-o lista de selecţie a fost selectat este
selected. Valoarea ataşată atributului value este preluată cu .value, la fel ca la casetele de tip
text. Exemplu:
<html>
<head>
<title> </title>
<script>
function lista(x)
{
58
for(i=0;i<6;i++)
if (x[i].selected) alert("ati selectat produsul "+ x[i].value)
}
</script>
</head>
<body>
<h1><center> liste selectie </center></h1>
<form>
<SELECT name="s" size="3">
<option value="test 11">test 11</option>
</select>
<br><br><br>
<input type="button" name="b1" value="afiseaza" onclick="lista(s)">
</form></BODY></html
Evenimente
Limbajul JavaScript este bazat pe evenimente, acestea fiind folosite pentru a controla
interacţiunea dintre utilizator şi aplicaţie. Programele convenţionale operează într-o manieră
diferită, codul acestora fiind executat secvenţial. Pentru a specifica instrucţiunile JavaScript
care trebuie executate la apariţia unui eveniment, limbajul HTML pune la dispoziţie anumite
atribute pentru diferite marcaje, atribute care au ca valori instrucţiuni JavaScript (de obicei
apeluri de funcţii). Cele mai multe evenimente sunt legate de acţiuni ale mouse-ului ca de
exemplu: un clic (poate fi tratat cu atributul onclick), mouse deasupra cu atributul
(onmouseover), mouse în afară cu atributul (onmouseout) etc. Pentru fiecare astfel de
eveniment se pot defini handlere de evenimente care sunt functii javascript sau secvente de
instructiuni care se vor executa atunci cand evenimentul respectiv are loc.
59
Evenimentele şi handlerele de evenimente care se pot folosi sunt urmatoarele:
Eveniment Handler de ev. are loc pentru se aplică

Abort OnAbort oprirea incarcarii Image
unei imagini
Blur OnBlur pierderea focusului Window şi elem. ale
obiectului Form
Change OnChange schimbarea valorii Text, TextArea, Select
unui element
Click OnClick utilizatorul face Button, Checkbox, Link,
click Radio, Submit, Reset
DragDrop OnDragDrop plasarea unui obiect Window
în fereastra
browserului
Error OnErrorFocus eroare la încarcarea Image, Window
obiectului
Focus OnFocus elementul capata Window şi elem. ale
focus obiectului Form
KeyDown OnKeyDown apasarea unei taste Document, Image, Link,
TextArea
KeyPress OnKeyPress apasarea sau Document, Image, Link,
mentinerea apasata a TextArea
unei taste
KeyUp OnKeyUp eliberarea unei taste Document, Image, Link,
TextArea
Load OnLoad incarcarea paginii in Document
navigator
MouseDown OnMouseDown apasarea butonului Document, Button, Link
de mouse
MouseMove OnMouseMove mutarea cursorului Nici unui obiect
MouseOut OnMouseOut mutarea cursorului Area, Link
de mouse in afara
obiectului
MouseOver OnMouseOver mutarea cursorului Link
peste un link
MouseUp OnMouseUp eliberarea butonului Document, Button, Link
de mouse
Move OnMove deplasarea ferestrei Window
Reset OnReset click pe butonul Form
reset
Resize OnResize redimensionarea Window
ferestrei
Select onSelect selectarea unui Text, TextArea
elem. al campului
Submit onSubmit apasarea pe submit Form
Unload onUnload parasirea paginii Document
În afara evenimentelor generate de utilizator pot fi tratate şi evenimente ce se produc automat.

Apar evenimente ca:
60
 load – încărcarea paginii – poate fi gestionat cu atributul onload
 unload – închiderea documentului - poate fi gestionat cu atributul onunload
Ambele atribute aparţin marcajului BODY.

a=‘‘Bun venit pe pagina mea”; b=‘‘Multumesc!...Good Bye !”
function f(x)
{
alert(x)
}
</script>
<body onload=‘‘f(a)” onunload=‘‘f(b)”>
2.5 Obiecte în Java Script
Obiecte în Java Script
Java Script este un limbaj bazat pe obiecte şi pune la dispoziţie un set predefinit de obiecte.
Fiecare obiect este identificat prin nume.
O proprietate a obiectului este apelată prin numeobiect.proprietate (document.bgColor =
‘‘red”). O metodă este adresată prin numeobiect.metodă(argument). Obiectele JavaScript
sunt ierarhizate. Un obiect poate fi derivat, inclus în cadrul unui alt obiect. Ierarhia de obiecte
JS are 4 ramuri principale, reprezenţate de obiectele: window, navigator, screen, language.
Pe lângă acestea, JS pune la dispoziţie obiecte predefinite referitoare în general la tipuri de date:
String, Math, Date.
Obiectul String
Încapsulează un şir de caractere. Este creat automat atunci când unei variabile i se asociază o
valoare de tip şir de caractere.
Dintre metodele lui String întâlnim:
Metoda Efect
anchor() returneaza un sir ca şi "anchor"
big() returneaza un sir cu text mare
blink() returneaza un sir care clipeste
bold() returneaza un sir cu litere ingrosate
charAt() returneaza un caracter de la pozitia care
este specificata
charCodeAt() returneaza codul ascii al unui caracter de
la o pozitie specificata
concat() returneaza doua siruri concatenate
fixed() returneaza un sir cu caractere tip
fontcolor() returneaza un sir cu o culoare specificata
fontsize() returneaza un sir cu litere de o anume
marime
fromCharCode() returneaza valoare unicode a unui
caracater
indexOf() returneaza pozitia primei aparitii a unui
subsir intr-un sir
61
Metoda Efect
italics() returneaza un sir in italic (scris aplecat)
lastIndexOf() returneaza pozitia primei aparitii a unui
subsir in un sir
link() returneaza un sir ca hyperlink
match() similar cu indexof şi lastindexof, dar
aceasta metodă returneaza sirul specificat
sir, sau "null", in locul unor valori
numerice
replace() inlocuieste unele caractere specificate cu
altele noi specificate.
search() returneaza un numar intreg daca sirul
contine caracterele specificate
slice() returneaza un sir incepand de la pozitia
index specificata
small() returneaza un sir cu caractere mai mici
split() imparte un sir in mai multe siruri, in
functie de caracterele specificate
strike() returneaza un sir taiat cu o linie la mijloc
sub() returneaza un sir ca indice
substr() returneaza un subsir specificat
toLowerCase() converteste un sir in litere mici
toUpperCase() converteste un sir in litere mari
Proprietatea acestui obiect string este length care returneaza numarul de caractere dintr-un
sir.
Obiectul Date
Obiectul Date este folosit pentru a obţine informaţii referitoare la ceasul sistem de pe
calculatorul vizitatorului paginii Web. Prin intermediul acestui obiect pot fi determinate data şi
ora curentă, pot fi efectuate diferite operaţii cu date calendaristice sau momente ale zilei sau
poate fi controlat modul în care este afişată pagina Web în funcţie de informaţiile furnizate de
metodele acestui obiect.
Pentru a crea un obiect care să conţină data şi ora curentă secvenţa JavaScript corespunzătoare
este data=new Date().
Metodele obiectelor de tip sunt grupate în trei categorii: metode pentru preluare de informaţii,
metode pentru setarea anumitor caracteristici şi metode pentru conversie.
Principalele metode ale obiectului Date() sunt:
Date() returneaza un obiect Date

getDate() returneaza data (ziua) din luna (între 131)
getDay() returneaza ziua dintr un obiect Date (între 0 şi 6;
0=Duminica, 1=Luni, etc.)
getMonth() returneaza luna dintr un obiect Date
getFullYear() returneaza anul cu 4 cifre
getYear() returneaza anul dintr un obiect Date
getHours() returneaza ora
62
getMinutes() returneaza minutele
getSeconds() returneaza secunda
setTimeout(”funcţie”,timp) timp se exprimă în ms
Script care să afişeze ‘‘Aţi intrat pe pagina astăzi: … ora …

data=new Date()
zi=data.getDate()
luna=data.getMonth()+1
an=data.getYear()
ora=data.getHours()
min=data.getMinutes()
sec=data.getSeconds()
document.write(”Ati intrat pe pagina astazi: ‘‘+zi+”-”+luna+”-”+an+”
ora”+ora+”:”+min+”:”+sec)
</script>
Script care afişează un ceas în timp real în linia de stare:

function timp()
{
ceas=new Date()
ora=ceas.getHours()
min=ceas.getMinutes()
sec=ceas.getSeconds()
window.status=ora+”:”+min+”:”+sec
setTimeout(”timp()”,100)
}
setTimeout(”timp()”,100)
</script>
Ierarhia Window Object
63
In aceasta ierarhie, descendentii unui obiect sunt de fapt proprietati pentru acel obiect. In
general, daca un obiect obj1 are un fiu obj2 care la randul lui este parinte pentru obj3, atunci
exista constructia:
obj1.obj2.obj3.prop
Fiecare pagina are urmatoarele obiecte:

 navigator : proprietati despre numele si versiunea navigatorului, tipuri MIME, plug-inuri
instalate pe client
 window : proprietăţi aplicabile întregii ferestre
 document : proprietăţi ale documentului (titlu, background, links, forms)
 location : proprietăţi bazate pe URI-ul curent
 history : proprietati reprezentand URI-urile pe care le-a vizitat clientul
Multe dintre obiectele Navigator au proprietati care sunt vectori. Iterarea in acesti vectori se
poate face fie folosind indici numerici ordinali sau folosind numele obiectelor din vector
specificate in interiorul operatorului de indexare, “[]”.
Obiectul Document
Obiectul Document contine informatii despre documentul curent si ofera metode pentru afisarea
codului html in fereastra browserului. Acest obiect este creat de catre navigator cand se incarca
o pagina si este asociat tag-ului <BODY>. Evenimentele pe care obiectul le poate receptiona
sunt: onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseUp.
Principalele proprietati sunt urmatoarele:
64
 alinkColor : specifica culoarea unui link activ (valoarea atributului ALINK)
 anchors : un vector care contine cate o intrare pentru fiecare link (tag <A>); elementele sunt
de tipul anchor
 applets : vector ce contine cate o intrare pentru fiecare applet din document; elementele sunt
de tipul applet
 bgColor : string ce specifica culoarea de backgroud (atributul BGCOLOR)
 cookie :string ce reprezinta toate cookie-ele asociate cu documentul curent
 embeds : un vector ce contine toate obiectele (plug-in-uri) incluse in documentul curent (cu
tag-ul EMBED)
 fgColor : string ce specifica culoarea de foreground
 formName : obiectul document contine cate o intrare de tipul Form pentru fiecare forma din
document, iar numele proprietatii este chiar numele formularului (valoarea atributului
NAME din tagul <FRAME>)
 forms : un vector ce contine elemente de tipul form pentru fiecare formular din document
 height : inaltimea documentului in pixeli
 width : latimea documentului in pixeli
 ids : creeaza un obiect style care poate fi folosit pentru tag-uril html
 images : un vector ce contine cate o intrare pentru fiecare imagine (<IMG>) din document;
elementele sunt de tipul image
 layers : un vector cu elemente de tip layer si cu cate o intrare pentru fiecare layer definit in
document
 linkColor : string ce specifica culoarea link-urilor
 links : un vector ce contine cate o intrare (de tip link) pentru fiecare link din document
 plugins : un vector cu toate plugin-urile din codul html; sunt de tip plugin
 referrer : contine URL-ul de la care s-a ajuns pe acesta pagina
 title : titlul documentului
 URL : URL-ul documentului
 vlinkColor : culoarea link-urilor vizitate
Toate campurile vector de mai sus pot sa le indexez fie cu indecsi intregi plecand de la 0, fie cu
indecsi de tip nume (care apar ca valori ale atributului NUME din html). Astfel
document.frames[1] este echivalent cu document.frames["frm1"], daca frm1 este frame-ul cu
indice 1 din frameset.
Iar metodele principale sunt:
 close : inchide un stream de iesire deschis cu metoda open si afisaza documentul html
utilizatorului
 open : deschide un stream pentru scriere cu metodele write si writeln
 write, writeln : scrie una sau mai multe expresii separate prin virgula in documentul din
fereastra specificata
exemplu 1:
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p>
<b>verde</b><br />
[<b onmouseover="document.bgColor='green'">Green</b>]<br /><br /><br />
65
[<b onmouseover="document.bgColor='blue'">Blue</b>]<br /><br /><br />
[<b onmouseover="document.bgColor='yellow'">Yellow</b>]<br /><br /><br />
[<b onmouseover="document.bgColor='red'">Red</b>]<br /><br /><br />
</body>
</html>
Exemplu 2:
<html>
<head>
<title>Javascript</title>
</head>
<body>
<center><h1>Schimbare culoare </h1>
<form name="f">
scrie culoare text:<input type="text" name="nume_culoare" size=20>
culoare fundal<select name=lista_culori
onChange="document.bgColor=lista_culori.value">
<option value=green>green</option>
<option value=antiquewhite>antiquewhite</option>
<option value=#ffff00>galben</option>
</select>
<input type="button" value="Schimba culoarea"
onclick="document.fgColor=nume_culoare.value">
</form></center>
<table border=2 cellpadding=5 cellspacing=3 width="90%">
<tr><td>
<font>
mesaj 1<br>
mesaj 2<br></font>
</td>
</tr></table>
</body>
</html>
Obiectul Window
Este plasat la cel mai înalt nivel, fiind părintele tuturor obiectelor dintr-o pagină.
Metode fundamentale:
open(), close()
alert(), prompt(), confirm()
blur(), focus()
setTimeout()
Obiectul window este important pentru gestionarea ferestrelor în care sunt încărcate
documentele html.
Folosind metodele open() şi close() putem deschide ferestre, putem încărca anumite documente
în ferestrele respective şi le putem stabili anumite proprietăţi.
Deschiderea unei ferestre
window.open (”URL”, ‘‘nume”,”opţiuni”)
- URL indică adresa documentului care va fi încărcat în fereastra respectivă
- nume poate fi folosit pentru a referi fereastra respectivă cu ajutorul atributului target
- opţiuni reprezintă o listă de elemente pentru stabilirea aspectului ferestrei
66
În cadrul scriptului fereastra deschisă poate fi identificată prin variabilă:
f=window.open ()
Are sens:
Metodă open permite specificarea unor parametri legaţi de aspectul ferestrei deschise. Aceştia
se introduc separaţi prin virgulă în cadrul secţiunii opţiuni din construcţia metodei open:
- width - lăţimea în pixeli a suprafeţei ferestrei

- height - înălţimea în pixeli a suprafeţei ferestrei
- toolbar = yes/no - afişează sau nu bara de instrumente
- menubar = yes/no - afişează sau nu bara de meniuri
- scrollbars = yes/no - afişează sau nu bara de scroll
- left = nr de pixeli faţă de marginea din stânga a ecranului
- top = nr de pixeli faţă de marginea sus a ecranului
Închiderea ferestrelor se poate realiza prin metodă close()

Poate fi apelată prin:
window.close() - pentru fereasta curentă
f.close() - pentru un obiect de tip fereastra
Metodă moveTo(i,j) mută o fereastră cu i pixeli spre dreapta şi j pixeli în jos.
Obiectul document
Este derivat din obiectul window şi este folosit ca metodă de acces la toate elementele html.
Proprietăţile obiectului document setează în primul rând proprietăţile şi atributele html incluse
în marcajul HEAD sau în marcajul BODY. Principalele proprietăţi sunt:
 document.title = text în bara de titlu

 document.bgColor = culoarea fundalului
 document.fgColor = culoarea textului
 document.alinkColor = culoarea legăturilor active
 document.vlinkColor = culoarea legăturilor vizitate
 document.linkColor = culoarea legăturilor nevizitate
 document.cookie = fisier cookie asociat cu documentul
Metodele obiectului document permit generarea paginilor html în mod dinamic.

Principalele metode sunt:
67
 close() - inchide fluxul datelor de iesire spre document
 contextual() - permite să aplicam in mod selectiv un stil unui element HTML
care apare într-un anumit context specific
 getSelection() - intoarce textul selectat
 handleEvent() - apeleaza handlerul pentru evenimentul specificat
 open() - deschide fluxul datelor de iesire spre document
 write() - adauga text in document
 writeln() - adauga text şi un caracter linie noua in document (textul pe linia
lui)
Gestionarea cadrelor
Atunci când introducem cadre este creat automat un obiect parent, care include un şir de
obiecte, fiecare înglobând un cadru din interiorul ferestrei:
parent.frames[0] – referă primul cadru
parent.frames[1] – referă al doilea cadru s.a.m.d.
De exemplu, parent.frames[0].document.write() - scrie în primul cadru.
Dacă atunci când au fost introduse cadrele acestea au primit şi un nume putem referi un cadru
prin construcţia: parent.numecadru
De exemplu, parent.cadru.document.write() - scrie în cadrul cu numele ‘‘cadru”.
Obiectul location
Încapsulează adresa URL a paginii curente. Permite deplasarea la o altă adresă URL sau
permite extragerea unor elemente din cadrul URL curent. Cea mai folosită proprietate este
href - specifică întreaga adresă URL De exemplu, încărcarea unei alte pagini web se poate
face prin construcţia: window.location.href = ‘‘URL”
Exemplu de buton cu funcţie de legătură:
<input type=button value=‘‘Student”
onclick=‘‘window.location.href=’http://www.microsoft.com’”>
Încărcarea unui fişier într-un cadru se poate face prin parent.cadru.location.href=‘‘URL”
Construirea unui banner

La încărcarea unui pagini se deschide o fereastră nouă în care, din 2 în 2 secunde se succed 3
imagini.
imagini=new Array();
imagini[0]=‘‘x.gif”;
imagini[1]=‘‘y.gif”;
imagini[2]=‘‘z.gif”;
function deschide() {
f=window.open(”‘‘,””,”width=200, height=100, scrollbars=no, menubar=no,
toolbar=no”) }
i=-1;
function banner()
{
i++;
f.location.href=imagini[i]
if(i==2)
68
i=-1;
setTimeout(”banner()”,2000)
}
</script>
<body onload=‘‘deschide();banner()”>
Obiectul Image
Cuprinde proprietăţile şi metodele necesare pentru lucrul cu imagini. Se creează cu new
Image()
poza=new Image()
Proprietăţi: poza.src=sursa imaginii; poza.width=lăţimea imaginii în pixeli;
poza.height=înălţimea imaginii în pixeli; poza.border=grosimea chenarului în pixeli;
poza.name=numele imaginii;
La introducerea imaginilor într-o pagină web se creează în mod automat un şir de obiecte
imagine. Fiecărui obiect de tip imagine i se pot aplica toate proprietăţile imaginilor. Este
identificat prin document.images[i], unde i este numărul de ordine al imaginii din cadrul
documentului.
Realizarea unui efect RollOver
Un efect RollOver înseamnă schimbarea fişierului sursă al imaginii de fiecare dată când se
plasează mouse-ul deasupra imaginii. Se revine la imaginea iniţială atunci când mouse-ul este
scos de pe imagine.
Exemplu
<html>
<head>
<title>vector images</title>
</head>
<body>
<table>
<tr>
<td>
<img src="imagini/p1.jpg" width="200" height="200"
onmouseover=document.images[0].border=8
onmouseout=document.images[0].border=0
onclick=document.images[0].src="imagini/p2.jpg" />
<br />
<b onmouseover="document.bgColor='yellow'">mesaj</b>
</td>
<td>
<img src="imagini/p3.jpg" width="200" height="200"
onmouseover=document.images[1].border=20
onmouseout=document.images[1].border=0
onclick=document.images[1].src="imagini/p4.jpg" />
<br />
<b onmouseover="document.fgColor='blue'">mesaj</b>
</td>
</tr>
</table>
69
</body>
</html>
Ce este JQUERY
jQuery este o librărie “open source” care simplifică interacțiunea dintre codul HTML și
JavaScript. jQuery a fost creat de John Resig în 2005 și lansat în ianuarie 2006, fiind la aceasta
oră cea mai populară bibliotecă JavaScript.
Sintaxa jQuery este concepută pentru a face mai ușor parcurgerea unui document,
selectarea de elemente DOM, crearea de animații, tratarea evenimentelor, dezvoltarea
aplicațiilor Ajax etc. jQuery oferă de asemenea capabilități pentru dezvoltatori de a crea plug-
in-uri cu suportul librăriei JavaScript. Abordarea modulară a bibliotecii jQuery permite crearea
de pagini și aplicații web dinamice și puternice. jQuery nu e un alt limbaj de programare ci o
modalitate de a scrie coduri JavaScript într-un mod mai bine organizat.
JavaScript este un limbaj de programare de nivel scăzut. Nu oferă funcții avansate de
manipulare a paginii și a etichetelor și nu oferă suport în ceea ce privește animațiile. Mai mult
decât atât, utilizarea directă a JavaScript poate cauza probleme legate de incompatibilitățile
browser. Aceste probleme au făcut aplicațiile JavaScript greu de programat rezultând în costuri
ridicate de întreținere.
JQuery are scopul de a ușura toate aceste probleme prin furnizarea unei biblioteci care
adaugă într-un mod ușor de înțeles și programabil multe funcții avansate și standarde cross-
browser. În plus, există o comunitate foarte dinamică care adaugă componente noi și avansate
bazate pe JQuery.
O aplicație web modernă nu ar fi completă fără o funcționalitate AJAX. JQuery oferă
funcții pentru cereri HTTP (GET si POST) și se poate lucra cu ușurință cu formatul JavaScript
Object Notation (JSON).
Printre caracteristicile jQuery se numără:
- traversarea și modificarea lui DOM (Document Object Model)
- modificarea DOM-ului pe baza etichetelor CSS sau a numelor atributelor
acestor etichete (“id”, “class”)
- efecte și animații
- suport AJAX (Asynchronous JavaScript and XML)
- utilități precum caracteristica de detectare, informații despre User Agent
etc
- metode compatibile a funcțiilor cross-browser
- suport multi-browser
- poate fi îmbunătățit
jQuery este un fișier JavaScript care conține toate clasele necesare dezvoltării web și
poate fi preluat de pe pagina oficială a site-ului. Acesta poate fi inclus într-o pagină web folosind
una din cele două variante de mai jos:
- dacă se folosește fișierul local (de pe server-ul propriu) se folosește următoarea
sintaxă în interiorul tag-ul <head>:
<script type="text/JavaScript" src=" jquery-2.1.1.js "></script>
- fișierul se poate încărca direct din CDN (Content Distribution Network) care este
un grup de calculatoare plasate în diferite zone ce conțin fișiere copiate în scopul maximizării
benzii de transfer în accesarea datelor. În felul acesta utilizatorul accesează o copie a fișierului
de la calculatorul cel mai aproape și nu accesează fisierul dintr-un singur loc de către toți
70
utilizatorii. Pentru a include un link către acest fișier de pe server-ul Google în pagina web se
folosește următoarea sintaxă:
<script type="text/JavaScript" language="JavaScript"

src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>
Sintaxa și manipularea elementelor și atributelor HTML
Mai toate metodele jQuery sunt apelate folosind caracterul $. Acesta face parte din
namespace-ul “$.fn” – prototipul jQuery. La acest obiect jQuery trebuie precizat elementul
asupra căruia acționează și metoda pe care o dorim.
Pentru a putea interactiona cu elementele HTML in pagina, instructiunile trebuiesc executate
dupa incarcarea paginii, astfel tot codul jQuery se scrie in interiorul unei functii speciale,
aceasta executa codul din ea dupa incarcarea paginii.
Sintaxa:
<script type="text/javascript" src="jquery_file.js"></script>
$(document).ready(function() {
// tot codul jQuery se scrie aici
});
Exemplu pentru a creea o simpla fereastra alert de test.
<!doctype html>
<html>
<head>
<title>Exemplu 1 Jquery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-
ui.css">
<script src="js /jquery-1.9.1.js">
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
www. jquery.com
<script type="text/javascript">
</script>
</head>
<body>
Continut HTML
</body>
</html>
preia continutul din tag-ul cu id="div1" si il scrie intr-un alert.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Simplu select</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-
ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="div1">Exemplu 123</div>
</body>
</html
Cand adaugam un selector jQuery in $(), se returneaza un obiect jQuery ce contine un

set cu elementele selectate, potrivite cu acel selector.
Functia html() este o metoda jQuery care returneaza continutul HTML din elementul la
care e aplicata.
Selectorii jQuery sunt foarte asemanatori cu selectorii CSS ca de exemplu:
a. $(div') - selecteaza toate tag-urile <div>.

$('#nume_id') - selecteaza un tag HTML cu id="nume_id".
$('.nume_class') - selecteaza toate tag-urile HTML cu class="nume_class".
$('p#nume_id') - selecteaza tagul <p> cu id="nume_id".
$('li.nume_class') - toate tag-urile <li> cu class="nume_class".
$('li, a,div') - toate tag-urile <a> din elementele <li>.
$('div a.nume_class') - tag-urile <a> cu class="nume_class", care sunt adaugate in
DIV-uri.
72
b. jQuery are si selectori proprii:
$(':button') - selecteaza elementele de tip buton (input sau button).
$(':radio') - selecteaza butoanele tip radio.
$(':checkbox') - selecteaza checkbox.
$(':checked') - selecteaza elementele checkbox sau radio care sunt selectate.
$(':header') - selecteaza elementele de tip Header (h1, h2, h3, etc.).
$(':contains("String")') - selecteaza elementele care contin textul specificat la
"String".
• jQuery poate selecta mai multi selectori intr-o singura declaratie, separati prin virgula,
intr-un singur sir.
exemplu: $(’a, p, li’)
vezi http://api.jquery.com/category/selectors/
• Pentru a obtine numarul de elemente selectate se foloseste proprietatea length.

Sintaxa:
$('selector').length
Exemplu:
var div_nr = $('div').length; // numar taguri DIV din pagina
document.write(div_nr);
});
(b) Evenimente in jQuery

Evenimentele sunt actiuni pe care utilizatorul le efectueaza in pagina web, cum
ar fi click, miscarea mouse-ului, deschiderea unei ferestre de browser, derularea
paginii, apasarea unui buton la tastatura, etc..
Se poate specifica executarea unor instructiuni cand un eveniment este declansat,
folosind urmatoarea sintaxa:
$('selector').tip_eveniment(function() {
istructiuni
});
- Instructiunea $(this) returneaza elementul curentpentru care s -a declansat
evenimentul.
- Metoda text() returneaza textul din obiectul la care e aplicata.
- Codul din interiorul function() va fi executat doar cand se apasa click pe un
<div>.
Exemplu:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
73
<title>Simplu jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
</head>
<body>
// inregistreaza un eveniment de tip click la tag-urile <div>
$('div').click(function() {
var div_txt = $(this).text(); // preia textul din DIV-ul pe care s-a apasat click
alert(div_txt);
});
});
--></script>
<div id="div1">Exemplu 1 </div>
<div id="div">Exemplu 2 </div>
123</body></html>
Tipuri de evenimente ce pot fi utilizate in jQuery:
blur - e declansat cand un element pierde "atentia" (cursorul nu mai e pe el).
focus - e declansat cand se intra intr-un element.
hover - executa instructiunile cand mouse-ul este in cadrul obiectului.
mouseover - declansat cand mouse-ul intra in cadrul obiectului.
mousemove - declansat cand mouse-ul se misca in cadrul elementului.
keydown - actionat cand utilizatorul apasa un buton pe tastatura.
load - actionat cand un element si toate sub-elementele lui au fost incarcate.
resize - trimis la obiectul window cand dimensiunea ferestrei browser-ului e modificata.
scroll - declansat cand pagina (sau un anume obiect) e derulata.
submit - actionat cand utilizatorul incearca sa trimita datele dintr-un formular.
select - declansat cand utilizatorul selecteaza un text adaugat intr-o caseta
http://api.jquery.com/category/events/
Exemplu 1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery draggable </title>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 1.5em; }
</style>
<script>
74
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">

<p>Text pentru drag...</p>
</div>
</body>
</html>
Exemplu 2
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div id="accordion">
<h3>Lista 1</h3>
<div>
<p>
Informatii, informatii, <b>Informatii, informatii </b>Informatii, informatii Informatii,
informatii Informatii, informatii Informatii, informatii Informatii, informatii Informatii,
informatii Informatii, informatii Informatii, informatii Informatii, informatii
</p>
</div>
<h3>Lista 2</h3>
<div>
<p>
text, text, text,text, text, text,text, text, text,text, text, text,text, text, text,text, text, text,text,
text, text,text, text, text,text, text, text,text, text, text,text, text, text,text, text, text,text, text,
text,
</p>
</div>
75
</div>
</div>
</body>
</html>
jQuery
Metoda hide() ascunde un element
exemplu: $('selector').hide('durata');
Durata poate fi "fast" si "slow", sau un numar care indica durata in milisecunde
//$("p").hide ('slow');
<!DOCTYPE html>
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
$("ol").click(function(){
$("ol").hide();
});
});
</script>
</head>
<body>
<h2>Descriere taguri</h2>
<p>Taguri H1...h6h.</p>
<p>Liste ordonata si neordonate.</p>
<ol>Lista ordonata
<li>termen 1</li>
<li>termen 1</li>
<li>termen 1</li>
76
<li>termen 1</li>
</ol>
<button>Strege...</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#test").hide();
});
});
</script>
</head>
<body>
<p>Taguri H1...h6 .</p>
<p id="test">Alte taguri.</p>
<button>apasa pe buton</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.test {color:red;font-size:20px}
</style>
</script>
<script>
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">Mesaj ...</h2>
<p class="test">Test cu stilul </p>
<p>Text fara stil</p>
<button>Apasa pe buton</button>
</body>
</html>
77
Daca vreti sa ascundeti doar obiectul curent, folositi: $(this).hide();
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("h2,p,button").click(function(){
$(this).hide();
}
);
});
</script>
</head>
<body>
<p>Taguri H1...h6 .</p>
<p id="test">Alte taguri.</p>
<button>apasa pe buton</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>Mesaj in pagina</p>
<button id="hide">Ascunde un paragraf </button>
<button id="show">Afiseaza un paragraf ascuns</button>
</body>
</html>
Metoda toogle() inverseaza starea obiectului astfl incat il ascunde daca este vizibil sau il
afiseaza daca este ascuns.
Exemplu: $('selector').toogle('durata');
<!DOCTYPE html>
<html>
78
<head>
</script>
<script>
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Buton cu proprietatea Toggle</button>

<p>Paragraf 1.</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
</html>
Functia parent() returneaza elementul parinte (cel in care este inclus). $(this).parent() returneaza
elementul parinte al obiectului curent.
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$(".ex .ascunde").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:10px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Facultatea de Informatica</h3>
<div class="ex">
<button class="ascunde">Ascunde </button>
79
<p>Anul I<br>
Anul II<br>
Anul III</p>
</div>
<h3>Universitatea Titu Maiorescu</h3>

<div class="ex">
<button class="ascunde">Ascunde...</button>
<p>Studii de licenta<br>
Masterat<br>
Doctorat</p>
</div>
</body>
</html>
Metodele slideDown() si SlideUp()

slideDown() afiseaza elementele selectate printr-un efect de animare corespunzator inaltimii
lor iar metoda slideUp() ascunde elementele selectate, printr-un efect de glisare.
$("#panel").slideUp("slow");
$("#panel").slideDown("slow");
$('selector').slideDown('durata');
$('selector').SlideUp('durata');
<!DOCTYPE html><html><head>
</script><script>
$("#actiune").click(function(){
$("#panel").slideDown("slow");
}); });
</script> <style type="text/css">
#panel,#actiune
{
padding:5px;text-align:center;
background-color:#e5eecc;border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;display:none;
}
</style></head><body>
<div id="actiune">Actiune pentru down panel</div>
<div id="panel">
Masterat<br>Doctorat</p>
</div></body></html>
80
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#panel").slideUp("slow");
});
});
</script>
#panel,#actiune
{
padding:5px;
text-align:center;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>

<div id="panel">
Masterat<br>
Doctorat</p>
</div>
</body>
</html>
Metoda slideToggle() afiseaza sau ascunde elementele selectate, prin animarea inaltimii lor.
Daca elementul este vizibil, il ascunde, daca e ascuns, il face vizibil.
Sintaxa:
$('selector').slideToggle('durata');
Exemplu : $("#panel").slideToggle("slow");
<!DOCTYPE html>
<html>
<head>
81
</script>
<script>
$("#panel").slideToggle("slow");
});
});
</script>
#panel,#actiune
{
padding:5px;
text-align:center;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="panel">
Masterat<br>
Doctorat</p>
</div>
</body>
</html>
functii jQuery prin care se poate adauga un cod HTML direct in pagina: append(), after(),
before(), prepend()
$("selector").append(" <tag>adauga text la paragraf...</tag>.");
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#buton1").click(function(){
$("p").append(" <b>adauga text la paragraf...</b>.");
});
82
$("ol").append("<li>Adauga element la lista ol</li>");
});
});
</script>
</head>
<body>
<p>Paragraf.....</p>
<p>Alt paragraf paragraph.</p>
<button id="buton1">Adauga text la paragraf</button>
<ol>
<li>Element 1</li>
<li>Element 2 2</li>
</ol>
<button id="buton2">Adauga text la lista</button>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("p").prepend(" <b>adauga text la paragraf...</b>.");
});
$("ol").prepend("<li>Adauga element la lista ol</li>");
});
});
</script>
</head>
<body>
<p>Paragraf.....</p>
<p>Alt paragraf paragraph.</p>
<button id="buton1">Adauga text la paragraf</button>
<ol>
<li>Element 1</li>
</ol>
<button id="buton2">Adauga text la lista</button>

</body>
</html>
83
<!DOCTYPE html>
<html>
<head>
</script>
<script>
function appendText()
{
var txt1="<p>Mesaj adaugat cu HTML.</p>"; // adauga cu HTML
var txt2=$("<p></p>").text("Text cu jQuery."); // adauga cu jQuery
var txt3=document.createElement("p");
txt3.innerHTML="Text cu innerHTML."; // adauga text cu DOM
$("body").append(txt1,txt2,txt3); // adauga elemente noi
}
</script>
</head>
<body>
<p>Mesaj..........</p>
<button onclick="appendText()">Apasa ca sa adaugi text</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</script>
<script>
function appendText1()
{
//$("body").append(txt1,txt2,txt3); // adauga elemente noi
$("p").before(txt1);
//$("button").after(txt2,txt3);
}
function appendText2()
{
//$("body").append(txt1,txt2,txt3); // adauga elemente noi
//$("p").before(txt1);
$("button").after(txt2,txt3);
}
84
</script>
</head>
<body>
<p>Mesaj..........</p>
<button onclick="appendText1()">Apasa ca sa adaugi text inainte</button>
<button onclick="appendText2()">Apasa ca sa adaugi text dupa</button>
</body>
</html>
Functia remove() se foloseste pentru a sterge un element cu jQuery:

$('selector').remove('select');
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-

color:#c1c4c2;">
Text cu div
<p>Paragraf din div</p>
<p>paragraf din div</p>
</div>
<br>
<button>proprietatea remove</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("p").remove(".italic,.underline");
85
});
});
</script>
</head>
<body>
<p>Remove cu parametru...</p>
<p class="italic"><i>Paragraf inclinat.</i></p>
<p class="bold"><b>Paragraf bold</b></p>
<p class="underline"><u>Paragraf subliniat</u></p>
<button>Remove elemente inclinate si underline</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-
color:#c1c4c2;">
Text cu div
<p>Paragraf din div</p>
<p>paragraf din div</p>
</div>
<br>
<button>proprietatea remove</button>
</body>
</html>
fadeIn() si fadeOut()
Aceste doua metode jQuery au urmatoarele sintaxe:
$('selector').fadeIn('durata');
$('selector').fadeOut('durata');
- fadeIn() - afiseaza elementele selectate, modificand treptat valoarea opacitatii de la 0 la
100%.
- fadeOut() - ascunde elementele selectate, astefel incat acestea devin treptat transparente.
- "durata" - (optional) indica durata efectului, si poate avea valorile: "fast" si "slow" sau un
86
numar ce indica durata in milisecunde.
Pentru a executa anumite instructiuni dupa ce efectul de afisare sau ascundere se termina, se
folosesc urmatoarele sintaxe:
$('selector').fadeIn('durata', function() {
// cod executat cand fadeIn e finalizat
});
$('selector').fadeOut('durata', function() {
// cod executat cand fadeOut e finalizat
});
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>text cu fadeIn() folosind diversi parametrii</p>
<button>testeaza fadeIn</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-
color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-
color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
87
});
});
</script>
</head>
<body>
<p>text cu fadeOut() folosind diversi parametrii</p>
<button>testeaza fadeOut</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
(c) Metoda fadeToggle
jQuery are o alta metoda utila care afiseaza si ascunde elemente in pagina web, fadeToggle()
si poate efectua ambele efecte fadeIn sifadeOut.Atentie: daca elementul este vizibil se
aplica fadeOut si-l ascunde, daca e ascuns, aplica fadeIn si-l face vizibil.
Sintaxa este:
var 1: $('selector').fadeToggle('durata');
var 2: $('selector').fadeToggle('durata', function() {
// cod executat cand efectul se termina
});
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>text cu fadeOut/fadeIn folosind diversi parametrii</p>

<button>testeaza fadeOut_fadeIn</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
88
</body>
</html>
(d) Metoda fadeTo se aplica doar partial fadeIn sau fadeOut, pana la o anumita valoare
a opacitatii:
Sintaza:
Var 1: $('selector').fadeTo('durata', alpha);
Var 2:
$('selector').fadeOut('durata', alpha, function() {
// cod executat cand efectul e finalizat
});
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#div1").fadeTo("slow",0.15);
});
});
</script>
</head>
<body>
<p>text cu fadeTo folosind diversi parametrii</p>
<button>testeaza fadeTo</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
</body>
</html>
Section 1.02 Exemple jQuery Events: click();dblclick();
mouseenter();mouseleave();mousedown();mouseup();hover();focus(); blur().
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("#p1").mouseup(function(){
alert("Mesaj in alert1!");
});
89
});
</script>
</head>
<body>
<p id="p1">actiune pentru un paragraf ci id.</p>
</body>
</html>
Metoda animate() permite crearea unui efect de animatie la oricare proprietate CSS cu valoare
numerica (dimensiuni, distanta, marime font).
animate() se poate folosi cu aceasta sintaxa:
animate(
{
proprietate1: valoare,
proprietate2: valoare,
proprietate3: valoare
}, durata, miscare, complet)
<!DOCTYPE html>
<html>
<head>
</script>
<script>
$("button").click(function()
{
$("div").animate({
left:'250px',
height:'+=50px',
width:'+=10px'
});
});
});
</script>
</head>
<body>
<button>Metoda Animation</button>
<p>utilizare metosa animate</p>
<div style="background:#91b121;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
<!DOCTYPE html><html><head>
</script>
<script>
90
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script> </head><body><button>Buton Animation</button>
<p>Exemplu cu metoda animate</p>
<div
style="background:#98bf21;height:100px;width:200px;position:absolute;">MESAJ</div>
</body></html>
Intrebari de control
Explicati motodele obiectului document;

Explicati instructiunile de ciclare;
Funcţii şi evenimente în Java Script
Explicati evenimentele care se folosesc in JavaScript
Enumerati principalele metode ale obiectului string, window si date.
Teme propuse
 Să se introducă 3 numere de la tastatură şi să se afişeze în pagină unul după celălalt;

 Să se realizeze un buton care schimbă culorile fundalului unei pagini.
 Script care să deschidă o fereastră ce se deplasează în partea de sus pâna la mijlocul
ecranului. Un buton va închide fereastra.
 Script ce derulează în pagină trei imagini, din 3 în 3 secunde
91
Unitatea de invatare III.
PHP şi MySQL
Aceasta unitate are ca scop cunoasterea limbajului PHP, care este un acronim ce
provine din "Hypertext Preprocessor" care este un limbaj de scripting, realizat şi
distribuit în sistem Open Source, special realizat pentru a dezvolta aplicaţii web, prin
integrarea codului PHP în documente HTML. Scopul principal al limbajului este acela
de a scrie rapid pagini web dinamice şi oferă suport pentru manipularea bazelor de date
de tip SQL (dBase, Informix, MySQL, mSQL, Oracle, PostgreSQL, Solid, Sybase,
ODBC etc.) cât şi acces la sisteme hipermedia.
După parcurgerea si însusirea acestei unitati, studentul va fi capabil:

- sa construiasca inteleaga modelul client-server;
- sa utilizeze variabilele PHP;
- sa creze scripturi PHP;
- sa utilizeze functiile specifice lui MySql in PHP;
- sa realizeze o aplicatie dinamica

în zona referitoare la aplicatii. Se recomandă testarea functiilor PHP si
instructiunilor MySql cat si consultarea Internetului pentru detalii si informatii
suplimentare
(http://www.wampserver.com/en/,
http://www.mysql.com/,
http://www.apache.org/,
http://www.php.net/).
Timpul minim pe care trebuie să-l acordati acestui modul este de 8 ore.
Cuprins:
3. PHP şi MySQL
3.1. Modelul client-server.Pagini Web interactive (dinamice)
3.2. Tipuri de variabile utilizate în limbajul PHP
3.3. Crearea scripturilor PHP
3.4. Folosirea PHP-ului cu formulare HTML
3.5. Funcţii în PHP
92
3.6. Programarea orientată pe obiecte (POO) în PHP
3.7 Utilizarea MySQL
Cuvinte cheie: PHP, MySQL, apache, server web.

3.1 Modelul client-server. Pagini web interactive (dinamice)
PHP suportă încărcarea fişierelor de pe calculatorul client, operaţie cunoscută sub

numele de upload (standard propus de E. Nebel şi L. Masinter de la Xerox) şi oferă
suport pentru cookies (mecanism de stocare a datelor în navigatorul client pentru
identificarea utilizatorilor, propus de Netscape).
Limbajul PHP are deasemenea suport pentru diverse servicii server, utilizând
protocoale precum IMAP, SNMP, NNTP, POP3 şi HTTP.
Paginile HTML sunt de tip “static”, adică informaţiile prezentate în aceste pagini sunt
identice pentru toţi vizitatorii, fiind simple pagini de prezentare. Web-ul este însă
dinamic, adică pentru unel pagini este nevoie să fie actualizate “în timp real”. Dacă doi
vizitatori, aflaţi în locuri diferite, accesează acelaşi site de joburi în acelaşi timpasrefel
încât unul doreşte afişarea joburilor din domeniul economic, iar al doilea doreşte afişarea
joburilor din domeniul securităţii şi sănătăţii în muncă, atunci serverul web va afişa
pentru fiecare vizitator al site-ului pagina corespunzătoare cerinţelor specificate. Acest
lucru este posibil datorită tehnologiilor de tip client-server. Acest tip de tehnologii
presupun stocarea datelor pe un server web şi apoi afişarea acestora la cererea fiecărui
vizitator, în forma dorită de acesta.
Un server web reprezint un calculator conectat permanent la Internet, care trimite către
client (care este un calculator pe care rulează un browser) pagini în format HTML. La
un server se pot conecta simultan mai mulţi clienţi, care pot avea acces la aceleaşi
informaţii. Diferenţa este esenţială comparativ cu paginile simple HTML, care sunt
afişate în browserul vizitatorului aşa cum au fost construite. Web-ul este dinamic, iar
programele care fac posibil acest lucru sunt numite scripturi CGI sau scripturi server-
side, întrucât acestea folosesc o interfaţă standard numită Common Gateway. Scripturile
sunt scrise în limbajul C sau cu ajutorul unui limbaj specializat, numit şi limbaj de
scripting (cele mai utilizate fiind PHP, ASP şi Perl) şi sunt stocate pe serverul web pe
care şi rulează.
Diferenţa dintre limbaj de scripting pe partea de client (ex. JavaScript) şi unul server-
side este esenţială doarece JavaScript rulează în browserul clientului, pe când un script
server-side rulează pe server, având acces la unele informaţii stocate pe server la care
un script client-side nu are acces. Un exemplu sugestiv este un contor de pagina web.
De câte ori cineva accesează pagina, scriptul server-side va contoriza vizitarea paginii
într-o bază de date stocată pe server.
Într-o sesiune client-server care conţine şi interogarea unei baze de date au loc
următoarele etape:
93
 introducerea adresei în bara de adrese a browserului;
 serverul web primeşte cererea şi determină execuţia unui script de pe server;
 scriptul extrage unele date dintr-o bază de date;
 datele extrase sunt prelucrate şi convertite în format HTML;
 pagina în format HTML este transmisă serverului web;
 serverul web transmite pagina browserului care a trimis cererea;
 browserul afişează informaţiile utilizatorului.
În practică pentru a crea aplicaţii web interactive, avem nevoie de:
 un server web (software),

 un limbaj de scripting pe partea de server,
 un server de baze de date.
Aceste elemente se pot descărca gratuit din Internet de la adresele:

 serverul web Apache ( http://www.apache.org/ ) având variante Apache pentru
Linux cât şi pentru Windows şi este gratis, stabil şi rapid.
 limbajul PHP ( http://www.php.net/ ) este folosit de peste 45% din site-urile
interactive şi este gratis, uşor de învăţat (sintaxa asemănătoare cu C), oferă
foarte multe funcţii, oferă suport pentru multe tipuri de baze de date (nici un
alt limbaj nu oferă asemenea suport).
 serverul de baze de date MySQL ( http://www.mysql.com/) este gratis şi rapid
.
 Combinaţia PHP şi MySQL este folosită preponderent.
Dacă se lucrează local, atunci vizualizarea (testarea aplicaţiilor php) se realizeaza in

cadrul unui browser, cu condiţia ca, în bara de adrese, să se editeze
http://localhost/eventual numele folderului ce contine sursele php .
94
3.2 Tipuri de variabile utilizate în limbajul PHP
PHP este un limbaj de programare la fel ca şi BASIC, Pascal, C, C++, Visual Basic,
Java etc şi are caracteristicile specifice unui limbaj de programare. În cadrul acestuia se
lucrează cu variabile care reprezintă zonă de memorie, căreia i se atribuie un nume
pentru a putea fi recunoscută şi apelată ulterior. Variabilele se compun din simbolul $
urmat de numele variabilei $variabilăphp. Numele variabilei poate începe cu o literă sau
un underscore, urmat de litere, cifre sau caractere underscore. Principalele tipuri de date
sunt cele din tabelul următor.
Tipuri Scalare Integer – este o valoare din mulţimea nuinformaticalor întregi


Float - o astfel de variabilă poate fi specificată fie prin forma
zecimală, fie prin cea ştiinţifică (cu exponent)
String - este un şir de caractere şi poate fi specificat în 2 moduri:
o folosind ghilimele simple ‘’

o folosing ghilimele duble “”
Tipuri compuse Array
Object
Tipuri speciale Resource - variabilă de tip Resource este o variabilă specială,
folosită pentru păstrarea unor referinţe către anumite resurse externe
NULL - valoarea specială NULL este atribuită oricărei variabile care
nu a fost iniţializată. Aceasta este singura valoare pe care o pot avea
variabilele de tip NULL. Se consideră că o variabilă este de tip NULL
în următoarele situaţii: i s-a atribuit constanta NULL; nu a fost
iniţializată; a fost deziniţializată (prin intermediul funcţiei unset() ).
False - se poate converti o variabilă de orice tip la tipul Boolean.
Tipul BOOLEAN Valorile care în urma conversiei se transformă în FALSE sunt:
 Nr întreg 0
 Nr real 0.0
 Şirul vid
 Şirul “0”
 Un vector fără nici un element
 Un obiect fără nici o variabilă membru
 O variabilă de tipul NULL
 O variabilă nedefinită
True - orice altă valoare se converteşte în TRUE
Tipul ARRAY (vectori) pot fi considerate mulţimi formate din chei. Fiecărei chei i se
ataşează o valoare. Acest tip este optimizat, astfel încât să poată fi folosit în locul
95
următoarelor structuri de date: liste, tabele de dispersie, colecţii, stive, cozi etc. Vectori
pot fi :
o vectori numerici
o vectori asociativi
o vectori multidimensionali
VARIABILE GLOBALE sunt disponibile în orice zona a codului sursă.

Exemple:
$GLOBALS cuprinde referinţe spre orice variabilă globală care este accesibilă
scriptului PHP curent;
$_SERVER conţine o serie de variabile ale căror valori sunt setate de server-ul web.
(majoritatea depind de mediul de execuţie al script-ului curent);
$_GET şi sunt variabile array globale. $_GET poate fi folosită pentru a trimite
$_POST variabile cu valori prin intermediul link-urilor. $_POST poate fi
folosită pentru a trimite variabile cu valori prin intermediul
formularelor.
$_COOKIE conţine valorile variabilelor care cuprind informaţii referitoare la
cookie-urile păstrate pe calculatorul utilizatorului ce accesează pagina
web.
$_FILES conţine variabile primite de script prin intermediul încărcărilor de
fişiere prin metoda post.
$_ENV conţine variabile disponibile prin intermediul mediului în care este
executat.
$_REQUEST variabile disponibile prin intermediul oricărui tip de mecanism cu
ajutorul căruia utilizatorul poate introduce date.
$_SESSION variabile care corespund sesiunii curente a script-ului.
Article II.
3.3 Crearea scripturilor PHP
Fiecare script PHP arata ca in figurile de mai jos si indică serverului că textul cuprins
între acestea este format din instrucţiuni PHP.
<?php
// continutul scriptului
?>
sau, echivalent:
<?
?>
96
Scripturile PHP execută următoarele de operaţii elementare:
- preluarea datelor de la utilizator,
- prelucrarea acestor date,
- obţinerea accesului la datele stocate pe server,
- prelucrarea datelor stocate pe server şi
- afişarea datelor.
Scripturile PHP sunt formate din instrucţiuni iar cea mai simplă instrucţiune PHP este
cea de afişare a unui text în browser.
echo “Informaţii afişate în browser”;
Tag-urile HTML se introduc în codul PHP astfel:

echo “<b> <i> Introducerea codului HTML într-un script </i> </b>”;
Un comentariu se introduce într-un script PHP cu ajutorul marcajului // (când
comentariul este scris pe o singură linie) sau /* conţinutul comentariului */ (atunci când
comentariul este scris pe mai multe linii).
<?php
// comentariu pe o linie
//continutul scriptului
?>
<?php
/* comentariu pe mai
multe linii */
?>
Article III.
Article IV.
Article V. Structuri de control întâlnite în PHP sunt:
 Alternative
o IF
o Else
o Elseif
o Switch
 Repetitive
o While
o For
o Do while
 Break
 Continue
 Declare
97
Instrucţiunea continue este utilizată într-o buclă iar execuţia iteraţiei curente este
întrerupă şi se trece la execuţia iteraţiei următoare. Instrucţiunea continue acceptă un
argument numeric opţional care va indică câte bucle imbricate vor fi ignorate.
Instrucţiunea foreach – versiunea PHP4 (nu şi PHP3) dispune de comanda foreach, ca

Perl sau alte limbaje. Instrucţiunea oferă un mod simplu de a parcurge un tablou.
3.4 Folosirea PHP-ului cu formulare HTML
Caracterizarea formularelor HTML
 Permit introducerea datelor de către vizitatorul paginii web.

 Crearea se face începând cu matematicachea de etichete <form>…</form>.
 Atributele lui <form> sunt: action şi method.
Action precizează ce se va întâmpla cu datele introduse în formular. În general i se

asociază adresa unui script aflat pe server (în cazul nostru numele fişierului PHP) care
va prelucra datele.
Method se referă la modul în care vor fi trimise datele spre scriptul de pe server.
Valorile posibile sunt: GET şi POST.
 GET permite trimiterea cantităţi restrânse de date prin adăugarea lor la URL
 POST permite trimiterea cantităţilor mari de date iar acestea sunt expediate
separat.
O regulă empirică privind alegerea între GET şi POST ar fi următoare: mulţi

programatori utilizează GET pentru formularele care execută o căutare sau interogare şi
POST pentru formularele care actualizează o bază de date sau un fişier. Astfel, datele
trimise prin metoda GET pot fi vizualizate de catre utilizator.
Pentru a realiza un formular se utilizează eticheta FORM exemplificată în capitolul

HTML:
<FORM name =”numeformular” METHOD=”metoda” ACTION=”url” >
Atributul ACTION specifică adresa URL a scriptului PHP care prelucrează datele
transmise prin intermediul formularului. Adresa URL poate fi o adresa completă, care
include protocolul, numele gazdei şi calea de acces, respectiv o adresă parţială, care
specifică o locaţie relativă la locaţia paginii curente.
Exemplu: <FORM method=”POST” action=”test1.php”>

Pricipalele controale care pot fi incluse în formular (vezi capitolul de HTML) cât şi
principalele evenimente ataşate acestora sunt:
Listă controale
98
 textbox (text), password textbox (password), butoane radio (radio), casete de
validare (checkbox), butoane (button, submit, reset), lista derulantă (select),
editbox (textarea), caseta de fişier (file).
Listă evenimente
 onclick, ondblclick, onmousedown, onmouseup, onmouseover onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup
Section 5.01 Prin intermediul formularului se trimite la server un fişier astfel:
<input type=“file” accept=“tip_mime” name=“nume” value=“text”>

unde:
 accept este un atribut care specifică tipul fişierului,
 name este numele casetei,
 value se foloseşte pentru un nume prestabilit de fişier,
 MIME (Multipurpose Internet Mail Extensions).
În eticheta form trebuie adăugat şi atributul enctype=“multipart/form-data ”.
Formatele cele mai frecvent folosite pt MIME sunt:
TIP MIME TIP DATE EXTENSII DE

FIŞIER
application/msexcel Microsoft Excel xls
application/msword Microsoft Word doc, dot
application/octet-stream Binara exe
application/pdf Adobe Acrobat pdf
application/ppt Microsoft PowerPoint ppt
application/zip Date comprimate în format ZIP zip
audio/midi Musical Instrument Digital Interface mid,midi

(MIDI)
audio/x-wav Windows Audio Format (WAV) wav
image/gif Compuserve Graphics Interchange gif

Format (GIF)
image/jpeg Joint Photographics Expert Group (JPEG) jpeg, jpg, jpe
image/TIFF Tagged Image Format (TIF) tif, tiff
text/HTML HTML htm, html
text/plain Text simplu txt
text/richtext Rich Text Format (RTF) rtf
99
video/mpeg Secventa video mpg, mpv, mpe,
mpeg
video/quicktime Secventa video qt, mov
video/x-msvideo Secventa video avi
În general prelucrarea datelor transmise la server se face într-un fişier distinct decât cel
care conţine formularul, caz în care action=“nume_fişier.php”.
O variabilă se preia dintr-un formular prin una din modalităţile :
$_POST[“nume_variabilă”] sau cu $_GET[“nume_variabilă”] (în funcţie de atributul

method al formului, acesta poate fi post sau get),
3.5 Funcţii în PHP
Definirea unei funcţii se realizează
function nume_funcţie(param1, param2,…,paramN){ instrucţiuni; }
Apelarea unei funcţii se realizează:

$var_returnată=nume_funcţie(param1,param2,..,paramN);
O funcţie poate fi definită oriunde în cadrul script-ului, iar în interiorul unei funcţii poate
să apară orice secvenţă validă de cod (poate cuprinde definirea altor funcţii, clase etc.).
Pentru ca funcţia să returneze un rezultat se foloseşte construcţia return urmată de un
parametru ce reprezintă valoarea funcţiei.
Funcţii de afişare
PHP include doua functii utile pentru generarea datelor de iesire formatate.
printf() si sprintf().
Functia printf() afiseaza datele sale de iesire, iar sprintf() returneaza datele sale de iesire sub
forma unei valori sir.
În general, fiecare functie preia doua sau mai multe argumente. Primul argument este un sir,
denumit sir de formatare, care specifica formatul datelor de iesire, iar celelalte argumente
specifica valorile care vor constitui datele de iesire.
string sprintf ( string $format [, mixed $args [, mixed $... ]] )
100
Returns a string produced according to the formatting string format.
(a) Parametri
format
The format string is composed of zero or more directives: ordinary characters

(excluding %) that are copied directly to the result, and conversion specifications, each
of which results in fetching its own parameter. This applies to both sprintf() and
printf().
Each conversion specification consists of a percent sign (%), followed by one or more
of these elements, in order:
1. An optional sign specifier that forces a sign (- or +) to be used on a number. By

default, only the - sign is used on a number if it's negative. This specifier
forces positive numbers to have the + sign attached as well, and was added in
PHP 4.3.0.
2. An optional padding specifier that says what character will be used for padding
the results to the right string size. This may be a space character or a 0 (zero
character). The default is to pad with spaces. An alternate padding character
can be specified by prefixing it with a single quote ('). See the examples below.
3. An optional alignment specifier that says if the result should be left-justified or
right-justified. The default is right-justified; a - character here will make it left-
justified.
4. An optional number, a width specifier that says how many characters
(minimum) this conversion should result in.
5. An optional precision specifier in the form of a period (`.') followed by an
optional decimal digit string that says how many decimal digits should be
displayed for floating-point numbers. When using this specifier on a string, it
acts as a cutoff point, setting a maximum character limit to the string.
6. A type specifier that says what type the argument data should be treated as.
Possible types:
o % - a literal percent character. No argument is required.
o b - the argument is treated as an integer, and presented as a binary
number.
o c - the argument is treated as an integer, and presented as the character
with that ASCII value.
o d - the argument is treated as an integer, and presented as a (signed)
decimal number.
o e - the argument is treated as scientific notation (e.g. 1.2e+2). The
precision specifier stands for the number of digits after the decimal
point since PHP 5.2.1. In earlier versions, it was taken as number of
significant digits (one less).
o E - like %e but uses uppercase letter (e.g. 1.2E+2).
o u - the argument is treated as an integer, and presented as an unsigned
decimal number.
o f - the argument is treated as a float, and presented as a floating-point
number (locale aware).
o F - the argument is treated as a float, and presented as a floating-point
number (non-locale aware). Available since PHP 4.3.10 and PHP 5.0.3.
101
o g - shorter of %e and %f.
o G - shorter of %E and %f.
o o - the argument is treated as an integer, and presented as an octal
number.
o s - the argument is treated as and presented as a string.
o x - the argument is treated as an integer and presented as a hexadecimal
number (with lowercase letters).
o X - the argument is treated as an integer and presented as a hexadecimal
number (with uppercase letters).
Exemple:
<?php
$num = 5.7;
echo $num;
$num = sprintf("%05.2f", $num);
echo '<br>'. $num;
?> Rezultatul afisat va fi: 5.7 05.70
Cu ajutorul expresiei "%05.2f", sprintf() formateaza numarul din $num astfel

incat acesta sa fie format din 5 caractere dintre care unul punct (.) si 2 zecimale.
exemplu cu printf():
<?php
$n = 8;
printf("Valoarea lui n este: %d", $n);
?> Va afisa "Valoarea lui n este: 8".
Funcţii pentru şiruri
 str_repeat($şir, $n) – repetă şirul $şir de un număr de n ori.

 strrchr($şir, $caracter) –returnează parte a unui $şir, începând cu ultima apariţie a
caracterului $caracter în şirul $şir.
 trim($şir) – elimină spaţiile din stânga şi din dreapta unui şir.
 explode($separator, $şir) – “rupe” valorile dintr-un şir în care ele sunt delimitate
de un separator, şi le plasează într-un vector
 implode($şir, $vector) - preia valorile dintr-un vector şi le reuneşte într-un şir
 number_format($număr) – afişează valoarea numerică folosind separatorul de mii.
 strpos($sir_princip,$sir_căutat) - returnează poziţia în care se regăseşte şirul căutat
în şirul principal.
 substr($şir,$start,$end) – extrage parte dintr-un şir începând din poziţia $start şi
până în poziţia $end.
102
 int strlen(string str) –returnează lungimea unui şir de caractere;
 string strstr(sirul de baza, sirul cautat) – returnează subşirul din şirul de bază care
începe cu şirul căutat (exemplu: $email = 'abc@utm.com'; $domain =
strstr($email, '@'); print $domain; // tipareste @utm.com.).
 string strtolower( string str) – converteşte un şir la litere mici.
 string strtoupper(string str) – converteşte un şir la litere mari.
 string ucwords(string str) – converteşte un şir astfel încat va avea fiecare iniţiala a
fiecarui cuvant scrisă cu majusculă. Restul literelor rămân neschimbate.
 string ucfirst(string str) – converteşte un şir astfel încât va fi scris cu iniţiala
majuscula. Restul literelor ramân neschimbate.
 int strcmp(string str1, string str2) – compară şirul str1 cu şirul str2 din punct de
vedere al codului ASCII, şi returnează urmatoarele valori întregi:<0 dacă str1 este
mai mic decat str2, > 0 dacă str1 este mai mare decat str2 şi 0 dacă sirurile sunt
egale.
 trim() - funcţie care elimina spatiile goale de al inceputul şi sfarsitul unui sir de
caractere specificat ca parametru (asemanator funcţie standard în C);
Unele funcţii PHP au argumente opţionale, care pot fi specificate sau omise, în
conformitate cu intenţiile programatorului.
Când se produce o eroare în timpul execuţiei unei funcţii, PHP generează mesaje de
eroare. Uneori, asemenea mesaje de eroare sunt nedorite. În acest caz, puteti suprima
generarea mesajelor de eroare prin prefixarea numelui funcţie invocate cu ajutorul
caracterului @. De exemplu, pentru a suprima mesajele de eroare care pot aparea în
timpul execuţiei funcţie f( ), invocati aceasta funcţie dupa cum urmează: Y = @f(x);
Funcţii utilizator
Pentru a defini o funcţie rebuie să se respecte suntaxa:
function nume_funcţie(listă argumente)
{
// corpul funcţie;
}
Section 5.02 Definirea argumentelor prestabilite

PHP va permite să definiţi funcţii cu argumente prestabilite. Dacă invocati o funcţie care
are un argument prestabilit, dar nu furnizaţi nici o valoare pentru argumentul respectiv,
argumentul ia o valoare prestabilită specificată. Exemplu:
function calcul($cant , $rata = 0.011)

{
echo "<BR>cant=$cant";
echo "<BR>rata=$rata";
return $suma * $rata;
103
}
$cumparaturi = 123.45;
echo "<BR>cumparaturi = $cumparaturi";
$impozit = calcul($cumparaturi,0.16);
echo "<BR>impozit = $impozit";
$cumparaturi = 123.45;
echo "<BR>cumparaturi = $cumparaturi";
$impozit = calcul($cumparaturi);
echo "<BR>impozit = $impozit";
functia isset() preia ca argument de obicei o variabila si arata daca aceasta a fost sau nu gasita.
De exemplu: isset($nr) returneaza TRUE daca variabila "$nr" are setata o valoare (diferita de
NULL), in caz contrar returneaza FALSE.
Aceasta functie este foarte utila in determinarea caror comenzi sa fie executate in functie daca
o anumita variabila a fost setata sau nu. Previne aparitia unor erori care apar in cazuri de
variabile nule si ajuta si la securitate.
Funcţia calcul preia doua argumente: un argument obligatoriu, denumit $cant, şi un

argument prestabilit, numit $rata. Dacă apelati funcţia şi furnizati un singur argument,
valoarea argumentului respectiv se considera ca fiind valoarea argumentului $cant, iar
valoarea 0.011 se foloseste ca valoare a argumentului $rata. Astfel, la prima invocare a
funcţie, $rata are valoarea 0.16, specificată drept al doilea argument al funcţie. Cu toate
acestea, la a doua invocare a funcţie, $rata are valoarea 0.011 deoarece este specificata
valoarea unui singur argument.
Funcţii pentru lucru cu fişiere
funcţie rol sintaxă

basename primeşte ca parametru un şir reprezentând string basename( string
un nume de cale şi returnează numele path)
fişierului din calea respectivă
chgrp schimbă grupul fişierului filename în group int chgrp( string
şi nu este diponibilă pe Windows filename, mixed group)
chown schimbă proprietarul fişierului filename cu int chown( string

user group şi nu este diponibilă pe Windows filename, mixed user)
copy funcţia copie un fişier sursă într-un fişier int copy( string source,
destinaţie. Returnează TRUE dacă copierea string dest)
s-a realizat cu succes şi FALSE în caz
contrar.
dirname funcţia returnează numele directorului din string dirname( string
calea path. path)
fclose închide fişierul referit prin fp. Întoarce int fclose( int fp)
TRUE în caz de succes şi FALSE în caz
contrar. Variabila fp trebuie să indice un
104
fişier valid, adică un fişier deschis cu
fopen() sau fsockopen().
feof Returnează TRUE dacă pointerul de fişier int feof( int fp)
este poziţionat pe EOF sau în caz de eroare, Variabila fp trebuie să
altfel returnează FALSE. indice un fişier valid,
adică un fişier deschis
cu fopen(), popen() sau
fsockopen().
ffush forţează scrierea tuturor bufferelor de ieşire int fflush( int fp)
în fişierul indicat de fp. Returnează TRUE
în caz de succes şi FALSE în caz contrar.
Variabila fp trebuie să indice un fişier valid,
adică un fişier deschis cu fopen() sau
fsockopen().
fgetc returnează un caracter citit din fişierul fp. string fgetc( int fp)
Returnează FALSE în cazul în care
caracterul citit este EOF.
fgets returnează un şir de maxim length-1 octeţi string fgets( int fp, int
citiţi din fişierul indicat de fp. Citirea se length)
încheie când au fost citiţi length-1 octeţi,
când se citeşte new line (este inclus în
valoarea returnată) sau EOF. Dacă apare o
eroare la citire returnează FALSE.
file_exists întoarce TRUE dacă fişierul specificat prin int file_exists( string
filename există şi FALSE în caz contrar. filename)
filesize întoarce dimensiunea fişierului specificat int filesize( string

prin filename dacă acesta există şi FALSE filename)
în caz de eroare.
fopen funcţia deschide un fişier sau un URL. În int fopen( string

cazul deschiderii unui URL se stabileşte o filename, string mode
conexiune către serverul Web specificat. [, int
În cazul unui fişier obişnuit acesta este use_include_path])
căutat în sistemul propriu de fişiere şi
deschis.
fputs funcţia scrie şirul string în fişierul fp în int fputs( int fp, string
întregime (dacă argumentul length lipseşte) str [, int length])
sau numai length octeţi din acesta. fputs()
este un alias pentru fwrite() şi este identic cu
aceasta.
fread funcţia citeşte cel mult length octeţi din string fread( int fp, int
fişierul binar fp. Citirea se încheie când s-au length)
citit length octeţi sau EOF.
105
fwrite funcţia scrie conţinutul argumentului string int fwrite( int fp, string
în fişierul indicat de fp. Dacă argumentul string [, int length])
length este precizat scrierea se opreşte după
length octeţi sau dacă şirul string s-a
terminat.
is_file Întoarce TRUE dacă filename există şi este boolean is_file( string
un fişier obişnuit. filename)
is_writeable întoarce TRUE dacă filename există şi poate boolean is_writeable (

fi scris. string filename)
pclose Închide fişierul indicat de fp. Variabila fp int pclose(int fp)

trebuie să indice un fişier valid care a fost
deschis cu popen() .
readfile citeşte conţinutul fişierului filename şi îl int readfile( string
tipăreşte la ieşirea standard. În caz de succes filename [, int
întoarce numărul de octeţi citiţi din fişier şi use_include_path])
FALSE în caz de eşec.
rmdir şterge directorul dirname numai dacă acesta int rmdir( string
este gol, iar în caz de eroare întoarce 0. dirname)
unlink şterge fişierul filename şi returnează 0 sau int unlink( string

FALSE în caz de eroare. filename)
Funcţii pentru lucru cu tablori (array)

array crează şi întoarce un tablou de valori. array array( [mixed... ])
Array() este un constructor de limbaj
utilizat pentru a reprezenta tablouri şi
nu o funcţie obişnuită.
array_count_val funcţia returnează un tablou folosind array array_count_values(

ues valorile din tabloul de intrare, input, array input)
drept chei şi frecvenţa lor drept valori.
array_intersect funcţia returnează un tablou conţinând array array_intersect( array
toate valorile lui array1 care sunt array1, array array2 [, array
prezente în toate celelalte argumente; ...])
cheile sunt păstrate.
array_keys funcţia returnează cheile (numerice sau array array_keys( array
şiruri de caractere) ale tabloului input. input [, mixed
search_value])
array_merge funcţia concatenează elementele a două array array_merge( array

sau mai multe tablouri astfel încât array1, array array2 [, array
elementele unui tablou se adaugă la ...])
sfârşitul tabloului precedent.
106
array_push funcţia tratează tabloul ca pe o coadă int array_push( array array,
şi introduce valorile primite ca mixed var [, mixed ...])
argumente la sfârşitul tabloului.
array_revers funcţia returnează un nou tablou care array array_revers( array
conţine elementele tabloului array în array [, bool
ordine inversă preserve_keys])
array_sum funcţia calculează şi returnează suma mixed array_sum( array

elementelor din tabloul arr ca un arr)
număr întreg sau float.
array_unique array array_unique( array
funcţia elimină valorile duplicate din
array)
tablou; returnează un tablou nou care
nu conţine valori duplicate; cheile nu se
modifică.
arsort funcţia sortează descrescător tabloul void arsort( array array [,
array astfel încât legăturile dintre int sort_flags])
indicii asociativi şi valorile indicate de
către aceştia să se menţină. Veţi folosi
această funcţie pentru a sorta tablouri
asociative în care ordinea actuală a
elementelor este importantă.
asort funcţia sortează crescător tabloul void asort( array array [, int
array astfel încât legăturile dintre sort_flags]))
indicii asociativi şi valorile indicate de
către aceştia să se menţină. Veţi folosi
această funcţie pentru a sorta tablouri
asociative în care ordinea actuală a
elementelor este importantă.
count funcţia returnează numărul de int count( mixed var)
elemente din argumentul var, care este
de obicei un tablou. Întoarce 1 dacă
variabila nu este un tablou şi 0 dacă
variabila nu a fost iniţializată.
each funcţia returnează cheia curentă şi array each( array array)

valoarea corespunzătoare din tabloul
array şi avansează pointerul tabloului.
Această pereche de valori este
returnată într-un tablou cu 4 elemente,
cu cheile 0, 1, key şi value. Elementele
0 şi key conţin numele elementului din
tablou, iar 1 şi value conţin valoarea.
rsort funcţia sortează un tablou în ordine void rsort( array array [, int
descrescătoare. sort_flags])
sort funcţia sortează elementele unuii void sort( array array [, int
tablou în ordine crescătoare. sort_flags])])
107
sizeof int sizeof( array array)
funcţia returnează numărul de elemente
dintr-un tablou.
Section 5.03 Utilizarea variabilelor globale

Variabilele globale sunt declarate în afara oricarei funcţii. Variabilele de formular
reprezinta un tip important de variabile globale. Cu toate acestea, puteti crea o variabilă
globala atribuindu-i acesteia o valoare, atata timp cat instructiunea de atribuire
respectiva nu se afla în interiorul corpului unei funcţii. Totalitatea locurilor unde este
accesibilă o variabilă se numeste domeniu de existenta al variabilei. în mod prestabilit,
variabilele globale nu pot fi accesibile din interiorul corpului unei funcţii; cu alte
cuvinte, domeniul de existenta al unei variabile globale, nu include corpurile funcţiilor.
Dacă doriţi sa obţineţi accesul la o variabilă globala în cadrul unei funcţii, puteţi extinde
domeniul de existenţă al variabilei prin specificarea numelui acesteia în interiorul unei
instructiuni global. Instructiunea global are urmatoarea forma:
global variabilă1, variabilă2, variabilă3;
După cuvântul cheie global pot urma una sau mai multe variabile; fiecare variabilă este
separată prin virgulă. Exemplu de utilizare a instrucţiunii global:
function not_global()
{
echo "<BR>nuglobal: x=$x";
}
function yes_global()
{
global $x;
echo "<BR>global: x=$x";
}
$x = 1;
not_global();
yes_global;
Utilizarea variabilelor locale şi a variabilelor statice
Variabilele globale sunt create atunci cand li se atribuie o valoare şi există pe toată durata
programului. Variabilele locale sunt create la apelarea funcţie asociate şi sunt distruse
la incheierea apelului acesteia. Variabilele locale sunt disponibile doar pe durata
execuţiei funcţie asociate. Exemplu de script care defineşte o variabilă locala $x şi o
variabilă globala cu acelaşi nume.
function este_local()
{
$x = 2;
echo "<BR>corpul funcţie: x = $x";
108
}
$x = 1;
echo "<BR> corpul scriptutlui: x = $x";
este_local();
echo "<BR> corpul scriptului: x = $x";
Utilizarea variabilelor cookie
Variabilele cookie sunt utile pentru stocarea preferinţelor utilizatorilor şi a altor

informaţii care trebuiesc reţinute atunci când utilizatorul trece la o nouă pagină web.
Valorile variabilelor dispar atunci când scriptul PHP care le conţine îşi încheie execuţia.
Valoarea variabilei cookie este automat pusă la dispoziţie ca variabilă PHP având acelaşi
nume cu acela al variabilei cookie. De exemplu, să presupunem că aţi creat o variabilă
cookie denumită "cursuri" şi că îi atribuiţi valoarea "informatica". Această pereche
cursuri-informatica este apoi pusă la dispoziţia fiecărui script PHP asociat paginilor
web. Valoarea variabilei cookie se poate afişa folosind instrucţiunea
echo "Valoarea variabilei cookie este $cursuri";
care va afişa: Valoarea variabilei cookie este cursuri.
Accesul la o variabilă cookie
Funcţia setcookie() are maxim şase argumente cu semnificaţia:

setcookie(nume, valoare, expirare, cale, domeniu, sigur)
unde:
 Nume - numele variabilei:
 Valoare – valoarea variabilei
 Expirare – timpul dupa care variabila expira
 Cale – specifica calea URL asociată variabilei cookie. În mod prestabilit,
variabila cookie este disponibilă pentru scripturile din directorul care conţine
scriptul în care a fost configurată variabila respectivă, precum şi pentru scripturile
din sub-directoarele aferente directorului respectiv. În particular, scripturilor din
directoarele părinte ale directorului care conţine scriptul nu li se permite accesul
prestabilit la variabila cookie.
 Domeniu - permite să specificaţi numele de domeniu asociat unei variabile
cookie. Variabila cookie va fi disponibilă numai pentru paginile web din cadrul
domeniului specificat.
 Sigur - este o valoare întreagă, care specifică dacă o variabilă cookie trebuie
trimisă prin intermediul unei conexiuni sigure (HTTPS). Specificaţi valoarea 1
pentru a împiedica transmiterea variabilei cookie în cazul în care conexiunea nu
este sigură; pentru a permite transmiterea variabilei cookie prin conexiuni HTTP
obişnuite, specificaţi valoarea 0.
109
Sesiuni în PHP
O sesiune reprezintă o metodă de a stoca informaţii (sub formă de variabile) pentru a fi
folosite pe mai multe pagini. Spre deosebire de cookie-uri, informaţia nu este stocată în
calculatorul utilizatorului. Este, de asemenea, diferită de celelalte variabile, în sensul că
nu este transmisă individual către fiecare pagină în parte ci este obţinută din sesiunea
deschisă la accesarea fiecărei pagini.
Crearea şi accesarea sesiunilor. Exemple.

Fişierul sesiune.php
<?php
// aici este pornita sesiunea
session_start();
//aici sunt stabilite variabilele sesiunii
$_SESSION['cursuri'] = 'cursuri';
$_SESSION['facultate'] = 'facultate';
print 'sfarsit';
?>
Iniţializarea sesiunii se face folosind funcţia session_start(), după care se crează perechi
de chei - valori pe care le stocăm în sesiune. Majoritatea sesiunilor setează un cookie în
calculatorul utilizatorului, iar când o sesiune este deschisă în altă pagină, se scanează
calculatorul după acea cheie. Dacă cele două chei se potrivesc, atunci sesiunea este
accesată, dacă nu, o nouă sesiune este iniţializată.
Modificarea şi distrugerea sesiunilor

Implicit, o sesiune este activă atât timp cât este browserul deschis. Acest lucru poate fi
modificat editând fişierul php.ini şi setând opţiunea session.cookie_lifetime = 0 (timpul
este in secunde) sau utilizand functia session_set_cookie_params().
Exemplu
<?php
// pornire sesiunea
session_start();
$_SESSION['cursuri']='cursuri';
// eliminarea unei variabile din tablou
unset($_SESSION['facultate']);
// eliminarea tuturor valorilor din tablou fara a distruge sesiunea in sine
session_unset();
// aici distrugem toata sesiunea
session_destroy();
?>
3.6 Programarea orientată pe obiecte (POO) în PHP
În programarea orientată-obiect un sistem informatic este privit ca un model fizic de

simulare a comportamentului unei părţi din lumea reală sau conceptuală. Acest model
fizic este definit prin intermediul unui limbaj de programare şi el se concretizează într-
o aplicaţie ce poate fi executată pe un sistem de calcul.
110
Printre avantajele programarii pe obiecte sunt:
 cod mai structurat şi mai lizibil,
 lucrul organizat,
 depanarea mai usoara a programelor,
 refolosirea codului,
Dezavantajele principale sunt:
 rulează mai încet,
 timpii de dezvoltare sunt mai mari.
În PHP 4.x nu sunt implementate toate facilităţile POO. Pentru programarea pe obiecte
în PHP, este recomandata utilizarea PHP5.
O clasa este o colectie de variabile şi funcţii care operează asupra variabilelor respective.
Implementarea unei clase conţine atât variabile, cât şi funcţii, ea reprezentând un şablon
(template) cu ajutorul căruia pot fi create instanţe specifice. Sintaxa folosită pentru
declararea unei clase în PHP este:
class nume_clasa {
// date membre
var nume_variabilă_1
...
var nume_variabilă_m
// metode
function nume_funcţie_1 (parametri) {
... // definitia funcţie
}...
function nume_funcţie_n (parametri) {
... // definirea funcţie
}
}
Pentru numele unei clase poate fi utilizat orice identificator permis în PHP cu o singura
exceptie: sdtclass; acest identificator este folosit de PHP în scopuri interne. Pentru a
initializa variabilele cu valori care nu sunt constante trebuie folosit un constructor.
Obiecte
Un obiect reprezinta o variabilă de tipul clasei. Fiecare obiect are o serie de caracteristici,
sau proprietăţi cât şi anumite funcţii predefinite numite metode. Aceste proprietăţi şi
metode ale unui obiect corespund variabilelor şi funcţiilor din definiţia clasei.
Operaţia de initializare a unui obiect se numeşte instanţiere. Clasele pot fi
folosite pentru a genera instanţe multiple. Instanţierea (trecerea de la clasa la obiect)
reprezintă, atribuirea unor proprietăţi specifice clasei, astfel încât aceasta să indice un
obiect anume, care se diferenţiază de toate celelalte obiecte din clasa printr-o serie de
atribute.
111
Proprietăţi
În corpul unei clase, se pot declara variabile speciale, numite proprietăţi. În PHP
4.x acestea se declară cu cuvantul cheie var în fata.
/**
* PHP versiunea 4
*/
class Dictionar {
var $traduceri = array();
var $tip = “Ro”;
}
Aceasta sintaxa este în continuare acceptata (în PHP 5), dar doar pentru a asigura
compatibilitate cu versiuni anterioare de PHP.
In PHP 5, codul arata astfel:
/**
* PHP versiunea 5
*/
class Dictionar {
public $traduceri = array();
public $tip = “Ro”;}
Proprietăţile obiectelor se pot accesa folosind operatorul "->".
Section 5.04 Metode

Metodele sunt funcţii cu ajutorul carora se poate opera asupra variabilelor clasei. Într-o
formă simplă, metodele sunt funcţii declarate în interiorul unei clase.
$this este o pseudo variabilă ce reţine adresa obiectului curent (referinţa către
obiectul curent). Exemplu:
class operatori {
var $x = 5;
var $y = 4;
function Suma ( ) {
return $this -> x + $this -> y;
}
function Produs ( ) {
return $this -> x * $this -> y;
}
}
Pentru a crea un obiect de tipul operatori vom utiliza o instructiune $oper = new
operatori; Metodele clasei se pot apela
echo "suma este ".$operatori -> Suma ( )."<br>";

echo "produsul este ".$operatori -> Produs ( );
Section 5.05 Constructori
112
Un constructor este o metoda (funcţie) a unei clase care este apelata automat în
momentul în care este creata o noua instanta a clasei (cu ajutorul operatorului new). în
PHP este considerata ca fiind un constructor orice funcţie care are acelasi nume cu clasa
în interiorul careia este definita. Constructorii pot fi folosiţi pentru initializarea datelor
membre cu valori care nu sunt constante. Ei pot avea argumente, iar acestea pot fi
optionale. Pentru a putea utiliza clasa fara a specifică nici un parametru în momentul
crearii unui obiect, se recomanda stabilirea unor valori implicite pentru toate
argumentele constructorului. În cazul în care nu este definit un constructor pentru o
anumita clasa, se utilizează constructorul clasei de bază, dacă aceasta există.
Section 5.06 Destructori

În cadrul claselor definite în limbajul PHP 5 pot fi declarati destructori de clase.
Destructorii sunt utilizati în momentul distrugerii (eliberării memoriei alocate) unui
obiect. Un obiect este distrus (eliminat din memorie) în momentul în care nu mai există
referinte către el. Necesitatea destructorilor a apărut în momentul în care s-a pus
problema transmiterii obiectelor prin referintă şi nu prin valoare cum se efectua
transmiterea obiectelor în versiunile anterioare ale interpretorului.
Un destructor este dat de o metodă al cărui nume este __destruct() şi care nu are
parametri. La fel ca şi în cazul constructorilor, în momentul apelului unui destructor
pentru o clasă, nu este apelat automat destructorul părintelui, acesta trebuie apelat cu
instructiunea:
parent::__destruct().
3.7 Utilizarea MySQL
MySQL este un server de baze de date disponibil gratuit, cu sursa deschisă (open-source)
care oferă fiabilitate şi avantaje reale. A fost dezvoltat de firma suedeză MySQL AB.
Administrarea bazei de date se realizeăză folosind utilitare care lucrează în linia de
comandă. Cel mai important utilitar este mysql, un shell interactiv pentru controlul şi
interogarea bazei de date. Utilitarele rulează cel mai bine pe sistemul Linux, platformă
pe care MySQL a fost dezvoltat iniţial. Alte două utilitare cu sursă deschisă, oferite pe
platformă Windows, care oferă un set de comenzi de administrare sunt MySqlManager,
un utilitar de interogare în mod grafic similar cu mysql şi WinMySQL admin, o consolă
pentru administrarea detaliilor configurării lui MySQL. Recent cea mai utilizată metodă
pentru serverele care au instalat panoul de comandă CPANEL este PHPMyAdmin, care
oferă o interfată grafică pentru manipularea datelor din MySQL.
MySQL operează în bază unui model client/server. Orice maşină care doreşte sa
proceseze interogări asupra unei baze de date MySQL trebuie să ruleze MySQL
server(mysqld), care este responsabil de tot traficul de tip intrări/ieşiri
(incoming/outgoing) cu bază de date. Modelul de securitate folosit de MySQL se
bazează pe nume de utilizator, parolă, nume server (hostname) sau adresă de IP şi
privilegii, fiind similar celui generic folosit de sistemele Unix. Prin privilegii se înţeleg
în cazul MySQL operaţiunile ce vor fi permise asupra bazei/bazelor de date, tabelelor
sau indecşilor, cum sunt de exemplu SELECT, INSERT, UPDATE, DELETE,
CREATE, DROP.
113
Datele sunt obiectul celor mai multe operaţii de prelucrare, iar sistemele de
gestiune a bazelor de date furnizează cele mai complexe şi puternice facilităţi pentru
lucrul cu datele. PHP include o bibliotecă de funcţii care furnizează o interfaţă cu
sistemul MySQL de gestiune a bazelor de date. Folosind aceste funcţii, un program PHP
poate obţine accesul la datele rezidenţe într-o bază de date MySQL şi le poate modifica.
O baza de date (în cazul nostru MySQL) este un program ce poate stoca o cantitate foarte
mare de informaţii şi o poate organiza într-un format accesibil în mod direct sau de către
un alt program (in cazul nostru PHP).
Într-o bază de date, informaţia este organizată sub formă tabelară, în care coloanele se
numesc câmpuri iar liniile se numesc înregistrări. Capul de tabel determină structura
bazei de date. Un sistem de gestionare a bazelor de date (SGBD) este un program care
permite utilizatorilor interacţiunea cu baza de date. Un SGBD asigură:
 crearea bazei de date
 introducerea informaţiilor în baza de date
 actualizarea informaţiilor
 extragerea datelor
 controlul accesului la date
Obiectivul esenţial, al unui SGBD este furnizarea unui mediu eficient, adaptat
utilizatorilor care doresc să consulte sau să actualizeze informaţiile conţinute în baza de
date.O baza de date poate conţine mai multe tabele, ce pot fi legate intre ele.
Un câmp se caracterizează prin:

 numele câmpului (reprezintă un nume simbolic prin care câmpul se poate
identifica),
 tipul câmpului (pentru identificarea tipului de date care pot fi stocate în câmpul
respectiv),
 lungimea câmpului (numărul maxim de caractere care pot fi stocate în câmpul
respectiv).
MySQL a fost creat în anul 1996 de către o compania suedeză şi este un SGBD foarte
rapid, care poate lucra cu baze de date de mari dimensiuni. MySQL permite lucru cu
câmpuri numerice, dată şi şir.
Caracteristicile MySQL-ului sunt:

 este o platformă deosebit de stabilă;
 este independent de sistemul de operare pe care ruleaza (Windows,
Linux, Unix, etc);
 este gratuit în anumite condiţii de licenţiere (Open Source
Software) .
Afişarea interogării în execuţie şi rularea ei pe baza de date se face cu ajutorul unor
aplicaţii separate. Cele mai bune două instrumente sunt:
114
 Monitorul MySQL – un instrument cu linie de comandă pentru
interactionarea cu serverul MySQL;
 phpMyAdmin, o interfaţă MySQL bazată pe PHP.
Câmpuri numerice
Unul dintre cele mai utilizate tipuri de câmpuri în MySQL este Int (integer), care poate
stoca valori cuprinse între –2.143.483.648 şi 2.143.483.643. Acest tip de câmp poate fi
folosit cu opţiunea auto_increment, pentru a defini cheia primară a unei tabele. Cheia
primara este un câmp care face posibilă identificarea unica a fiecărei înregistrări. De
obicei este vorba de un câmp numeric, care va fi incrementat la fiecare operaţie de
adăugare.
Tipuri de câmpuri dată/oră

Există în MySQL cinci tipuri de câmpuri folosite pentru stocarea datei calendaristice şi
a orei care sunt:
 Date
 Datetime
 Timestamp
 Time
 Year
Câmpul de tip date stochează valori în format AAAA-LL-ZZ şi permite introducerea
valorilor cuprinse între 1000-01-01 şi 9999-12-31.
Câmpul de tip datetime stochează valori în format AAAA-LL-ZZ HH:MM:SS,
cuprinse între 1000-01-01 00:00:00 şi 9999-12-31 23:59:59.
Câmpul de tip timestamp stochează automat timpul atunci când se modifică valoarea
unei înregistrări (printr-o operaţie de introducere sau actualizare).
Câmpul de tip time stochează timpul în format HH:MM:SS.
Câmpul de tip year poate stoca date cuprinse între 1901 şi 2155.
Câmpuri de tip şir sunt:
 Char
 Varchar
 Tinytext
 Text
 Mediumtext
 Longtext
 Enum
Câmpul de tip char are lungimea maximă de 255 caractere. Este de lungime fixă (atunci
când introducem o valoare cu lungimea mai mică decât lungimea maximă a câmpului,
câmpul va fi completat în partea dreaptă cu spaţii).
Câmpul de tip varchar are lungimea maximă de 255 caractere, dar este de lungime
variabilă (câmpurile nu vor mai fi completate cu spaţii ca la tipul char).
Câmpurile de tip blob şi text pot stoca o cantitate variabilă de date.
Câmpurile de tip enum permit stocarea unei valori dintr-o mulţime de valori specificată.
115
Principalele comenzi MySQL
Cele mai uzuale operaţii cu bazele de date sunt:
Comanda Semnificatie
CREATE crează o baza de date sau un tabel
DROP sterge o baza de date sau un tabel
INSERT adauga inregistrari intr-un tabel
DELETE sterge inregistrari dintr-un tabel
UPDATE actualizeazăninregistrarile dintr-un tabel
SELECT selectează un tabel
ALTER modifică structura unui tabel
SHOW Afişare baze de date, tabele
USE Deschide o bază de date
1. Crearea unei baze de date se face cu comanda:

CREATE DATABASE nume_bază;
De exemplu, crearea bazei de date, numită student se realizează cu comanda

CREATE DATABASE student;
Caracterul ; este obligatoriu la sfârşitul oricărei comenzi..
2. Afişarea bazelor de date existente pe server se face cu comanda:

SHOW DATABASES;
3. Accesarea (deschiderea) unei baze de date pentru a putea fi folosită se face cu

comanda:
USE nume_bază;
4. Crearea unei tabele într-o bază de date presupune mai întâi deschiderea bazei de
date şi apoi crearea propriu-zisă a tabelei:
USE biblioteca;
CREATE TABLE carti (

codc int(4) NOT NULL auto_increment,
numecarte varchar(40) default NULL,
autor varchar(30) default NULL,
data date default NULL,
pret int(3) NOT NULL default '0',
stoc int(5) default NULL,
valoare int(5) default NULL,
PRIMARY KEY (codc)
) TYPE=MyISAM;
116
Explicaţii:
o AUTO_INCREMENT funcţionează cu orice tip intreg. La fiecare rând

nou adăugat în baza de date, numarul asociat va fi incrementat;
o NULL înseamnă fără valoare (diferit de spaţiu sau zero);
o NOT NULL înseamnă că orice înregistrare completată cu ceva;
PRIMARY KEY reprezintă elementul de referinţă pentru fiecare linie.
5. Afişarea tabelelor conţinute de o bază de date presupune deschiderea bazei de date

şi apoi folosirea comenzii
SHOW TABLES;
6. Afişarea structurii unei tabele se face cu comanda

DESC nume_tabelă;
În acest caz, vor fi afişate numele câmpurilor, tipul şi lungimea lor.
7. Pentru a modifica structura unei tabele se foloseşte comanda ALTER TABLE.
De exemplu, pentru a modifica lungimea câmpului pret de la int(3) la int(4) se foloseşte

comanda
ALTER TABLE carti MODIFY pret int(4);
Pentru a adăuga un nou câmp, numit observatii, comanda este:

ALTER TABLE `cursuri`.`carti` ADD òbservatii` VARCHAR(40) NOT NULL;
Pentru a schimba denumirea câmpului observatii în obs, comanda este:

ALTER TABLE `cursuri`.`carti` CHANGE òbservatii` òbs` VARCHAR(40) NOT
NULL;
8. Ştergerea unei tabele se face cu comanda

DROP TABLE;
De exemplu, pentru ştergerea tabelei numită „diverse”, vom folosi comanda
DROP TABLE diverse;
Comanda DROP TABLE trebuie folosită cu mare grijă, întrucât, în urma executării ei,
atât structura cât şi datele conţinute în tabele sunt şterse.
9. Comanda INSERT introduce înregistrări într-o tabelă existentă.

Forma generală a comenzii este:
INSERT INTO nume_tabelă [(câmp1,camp2,…,câmp n)] VALUES
(valoare1,valoare2,…, valoare n);
10. Comanda SELECT este utilizată pentru a extrage înregistrările din una sau mai
multe tabele. Sintaxa generală este:
SELECT [DISTINCT] câmp1, câmp2,…, câmp n
117
FROM nume_tabelă
WHERE condiţie
GROUP BY nume_câmp
ORDER BY nume_câmp [ASC | DESC]
LIMIT [numărul_primei_înregistrări_dorite, numărul_de_înregistrări_returnat]
PHP permite lucrul cu un număr mare de funcţii MySQL. În PHP exista funcţii pentru
toate operatiile executate asupra bazelor de date MySQL. Cele mai importante funcţii
sunt:
mysql_connect() – stabileşte o conexiune la serverul de baze de date MySQL.
Conectarea la MySQL se face astfel:
<?php
$link = mysql_connect("mysql_host","mysql_user","mysql_password") or die("Nu se poate
conecta");
?>
Dacă MySQL este instalat pe staţia de lucru atunci conexiunea la baza de date se
realizează:
<?php
$link = mysql_connect("localhost", "root", "")
or die("Nu se poate conecta");
?>
Funcţia die nu face altceva decat să afiseze mesajul şi să nu mai execute nici un cod
după. Variabilă $link reprezintă un identificator pentru aceasta conxiune.
mysql_select_db() – selectează o bază de date.

Sintaxa este: mysql_select_db(“nume bază”) or die (“baza de date nu poate fi
selectata!”).
După conectarea, trebuie să-i spunem serverului MySQL ce baza de date dorim sa
folosim, operaţie ce se realizează:
<?php
$link = mysql_connect("mysql_host", "mysql_user", "mysql_password")
or die("Nu se poate conecta");
mysql_select_db("cursuri", $link) or die("nu se poate alege baza de date");
?>
Funcţia mysql_select_db este cea care îi transmite serverului MySQL ce bază de date
vrem sa folosim.
118
mysql_query() – interoghează o bază de date aflată pe server.
Sintaxa este: $resultat=mysql_query(“Interogare SQL”)
Exemplu: $resultat=mysql_query("select * from utizatori")
mysql_fetch_array() – returnează un array (matrice) corespunzător interogării

efectuate.
mysql_num_rows() – returnează numărul înregistrărilor (rândurilor) rezultate dintr-o

interogare.
mysql_affected_rows() – returnează numărul de înregistrări(rânduri) afectate de o

interogare INSERT, DELETE SAU UPDATE. Această funcţie nu operează şi cu
comanda SELECT.
mysql_free_result() – eliberează zona de memorie folosită de o interogare. Această
funcţie este utilă în cazul în care interogarea returnează un număr mare de rezultate,
după care scriptul continuă să execute operaţii.
mysql_close() – închide o conexiune MySQL.

Când o conexiune este închisă (fie folosind această funcţie, fie la terminarea scriptului),
PHP eliberează memoria folosită de interogare.
mysql_create_db() – crează o bază de date MySQL.
mysql_drop_db() – şterge o bază de date MySQL.
mysql_list_dbs() – returnează bazele de date aflate pe un server MySQL.
mysql_list_tables() – returnează tabelele dintr-o bază de date MySQL. Această

funcţie trebuie folosită împreună cu funcţia mysql_tablename().
mail($to, $subject, $message, $headers) – funcţie folosită pentru a trimite un email

(de la $to, cu subiectul $subiect, având ca mesaj $message cu headerele adiţionale
$header);
mysql_error() – returnează mesajul de eroare sub forma de şir de caractere generat de

baza de date MySQL dacă este cazul;
session_start() - initializează o secţiune de date bazata pe ID-ul de sesiune trimis printr-

o cerere GET sau POST;
session_destroy()- distruge toate datele asociate cu sesiunea curentă;
ob_start()- opreşte afişarea bufferului până la terminarea execuţiei scriptului;
print() - initializeaza listarea la imprimanta a unei pagini web;
119
require() - funcţie care include în scriptul curent conţinutul unui fişier cu verificarea de
a fi introdus o singura dată (spre deosebire de funcţia include() - care permite includerea
fişierului de mai multe ori);
crypt($pass, "BB") – funcţie care criptează un şir de caractere ($pass) după o cheie de
criptare (BB);
Section 5.07Lista functii php pentru lucru cu baze de date MySql

 mysql_affected_rows — Numarul de randuri afectate de ultima operatie MySQL
 mysql_change_user — Schimba utilizatorul pentru conexiunea curenta
 mysql_client_encoding — Intoarce numele setului de caractere curent
 mysql_close — Inchide conexiunea la MySQL
 mysql_connect — Creeaza o conexiune la MySQL
 mysql_create_db — Creaza o noua baza de date MySQL
 mysql_data_seek — Move internal result pointer
 mysql_db_name — Get result data
 mysql_db_query — Send a MySQL query
 mysql_drop_db — Drop (delete) a MySQL database
 mysql_errno — Returns the numerical value of the error message from previous MySQL operation
 mysql_error — Returns the text of the error message from previous MySQL operation
 mysql_escape_string — Escapes a string for use in a mysql_query
 mysql_fetch_array — Fetch a result row as an associative array, a numeric array, or both
 mysql_fetch_assoc — Fetch a result row as an associative array
 mysql_fetch_field — Get column information from a result and return as an object
 mysql_fetch_lengths — Get the length of each output in a result
 mysql_fetch_object — Fetch a result row as an object
 mysql_fetch_row — Get a result row as an enumerated array
 mysql_field_flags — Get the flags associated with the specified field in a result
 mysql_field_len — Returns the length of the specified field
 mysql_field_name — Get the name of the specified field in a result
 mysql_field_seek — Muta pointerul rezultatului la un camp specificat
 mysql_field_table — Get name of the table the specified field is in
 mysql_field_type — Get the type of the specified field in a result
 mysql_free_result — Free result memory
 mysql_get_client_info — Aflare informatii client MySQL
 mysql_get_host_info — Get MySQL host info
 mysql_get_proto_info — Get MySQL protocol info
 mysql_get_server_info — Get MySQL server info
 mysql_info — Get information about the most recent query
 mysql_insert_id — Get the ID generated from the previous INSERT operation
 mysql_list_dbs — List databases available on a MySQL server
 mysql_list_fields — List MySQL table fields
 mysql_list_processes — List MySQL processes
 mysql_list_tables — List tables in a MySQL database
 mysql_num_fields — Get number of fields in result
 mysql_num_rows — Get number of rows in result
 mysql_pconnect — Open a persistent connection to a MySQL server
 mysql_ping — Ping a server connection or reconnect if there is no connection
 mysql_query — Send a MySQL query
 mysql_real_escape_string — Escapes special characters in a string for use in a SQL statement
 mysql_result — Get result data
 mysql_select_db — Select a MySQL database
 mysql_set_charset — Sets the client character set
120
 mysql_stat — Get current system status
 mysql_tablename — Get table name of field
 mysql_thread_id — Return the current thread ID
 mysql_unbuffered_query — Send an SQL query to MySQL, without fetching and buffering the result
rows
121
Tema propusa
Să se creeze în baza de date agenda, tabela prieteni, care va avea structuta:
CREATE TABLE prieteni (
id int(3) NOT NULL auto_increment,
nume varchar(15) default NULL,
prenume varchar(15) default NULL,
virsta tinyint(3) default NULL,
telefon varchar(10) default NULL,
adresa text,
poze varchar(20) default NULL,
PRIMARY KEY (id)
) TYPE=MyISAM;
Să se realizeze o interfaţa cu ajutorul căreia să se populeze tabela, să se actualizeze

numarul de telefon, să se ştergă înregistrări pe bază de id şi eventual să se afişeze
conţinutul tabelei. Interfaţa va arăta ca în figura de mai jos.
Aplicatii rezolvate
Script care utilizează funcţiile print_r şi implode.
<?php
$t=array("ianuarie", "februarie","martie","aprilie", "mai","iunie","iulie","august"
,"septembrie","octombrie","noiembrie","decembrie");
echo $t[4]."<br><br><br><br>";
for ($i=0;$i<12;$i++)
echo $t[$i]."<br>";
sort ($t);
echo"<br>";
for ($i=0;$i<12;$i++)
122
echo $t[$i]."<br>";
echo "<br><br><br><br><br>";
//for ($i=0;$i<12;$i++)
//echo $t[$i]."<br>";
print_r($t);
echo "<br>";
echo "<br>";
echo "<br>";
$tab=array ("primul"=>"luni",
"al doilea"=>"marti",
"al treilea"=>"miercuri");
echo $tab["primul"];
echo "<br>";
echo "<br>";
echo "<br>";
print_r($tab);
echo "<br>";
echo "<br>";
echo "<br>";
$sir=implode($tab,", ");
echo $sir;
?>
Aplicatie: introducem date intr-un formular cu 2 campuri nume şi prenume şi apoi cu

ajutorul scriptul insert.php datele se introduc în baza de date.
/* fisierul adaugare.html */
<html>
<head>
<title>Formular</title>
</head>
<body>
<b>Adaugare inregistrari</b>
<form method="POST" action="insert.php">
Nume: <input type="text" name="nume"><br>
Prenume: <input type="text" name="prenume"><br>
<input type="submit" value="Trimite">
</form>
</body>
</html>
/* fisierul insert.php */
<?php
include "conexiune.php";
$nume=$_POST['nume'];
$prenume=$_POST['prenume'];
$query="INSERT INTO proba (nume, prenume) VALUES
'$nume','$prenume')";
if (!mysql_query($query)) {
die(mysql_error());
} else {
123
echo "datele au fost introduse";
}
mysql_close($conexiune);
?>
Pentru a afişa fiecare rănd din tabel se foloseşte o bucla while şi comanda
mysql_fetch_row, ca în exemplu:
<?php
$sql=mysql_query("SELECT * FROM carti");
echo "<table border=1>";
echo "<tr><td>ID</td><td>titlu</td><td>Autor</td></tr>";
while ($row=mysql_fetch_row($sql)) {
echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";
}
echo "</table>";
?>
Datele au fost afisate fiecare intr-o celula a unui tabel.
Folosind funcţia mysql_num_rows($sql) putem afla numarul de linii continute
de baza de date. Exemplu precedent la care se adaugă numarul de linii al tabelei din baza
de date.
/* urmează fisierul select.php */
<?php
$sql=mysql_query("SELECT * FROM carti");
$rows=$mysql_num_rows($sql);
echo "<b>$rows</b> inregistrari în baza de date<p>";
echo "<tr><td>ID</td><td>titlu</td><td>autor</td></tr>";
}
echo "</table>";
?>
Exemplu: cautarea în baza de date dupa o anumita inregistrare folosind conditia

WHERE.
/* urmează fisierul cautare.html */

<html>
<head><title>Cautare</title>
</head>
<body>
<b>Cautare inregistrari</b>
<form method="POST" action="where.php">
Numele cautat: <input type="text" name="nume1"><br>
124
</form>
</body>
</html>
/* urmează fisierul where.php */
<?php
$nume1=$_POST['nume1'];
$sql=mysql_query("SELECT * FROM proba WHERE nume='$nume1'");
echo "<tr><td>ID</td><td>Nume</td><td>Prenume</td></tr>";
}
echo "</table>";
?>
Exemple rezolvate - PHP

Exemplu 1
<?php
$ex1=22;
$ex2=(string)$ex1;
echo ($ex1+1)."---- ".$ex2;
?>
Exemplu 2
<?php
$ex1=TRUE ;
$ex2=FALSE;
$ex3=(string) $ex1;
$ex4=(string) $ex2;
$ex5=1.17e2;
$ex6=(string) $ex5;
echo " valoarea de adevar TRUE este egala cu sirul de caractere $ex3\n" ;
echo " valoarea de adevar FALSE este egala cu sirul de caractere $ex4\n " ;
//alt exemplu
echo "<br /><br />";
$ex1 = array("rosu" => "negru", "flori" =>25, 2015 => TRUE);
echo "$ex1[rosu]"."negru";
echo " $ex1[flori]"."25";
echo " $ex1[2015] "."true";
$ex2=$ex1["rosu"];//cu ghilimele
echo $ex2."negru";
?>
125
Exemplu 3
<?php
$nume="Nume student";//se preia dintr-un formular
$d="15/04/2015";
echo "<b>Domnul/Doamna ".$nume." este asteptat la cursul din data".$d.”</b><br />”;
echo “gata!!!”;
?>
Exemplu 4
…….
echo "Zi:<select name='a1'>";
for($i=1;$i<=31;$i++)
{
echo"<option value=".$i.">".$i."</option>";
}
echo "</select> ";
echo "Luna:<select name='a1'>";

for($i=1;$i<=12;$i++)
{
}
echo "</select> ";
echo "An:<select name='a1'>";

for($i=1990;$i<=2014;$i++)
{
}
echo "</select>";
?>
Exemplu 5
<?php
for ($i=1;$i<=6;$i++)
{
echo "<h".$i." align='center'>Nume Student<h".$i.">";
}
echo "<hr>";
for ($i=6;$i>=1;$i--)
{
echo "<h".$i." align='center'>Nume Student<h".$i.">";
}
?>
126
Exemplu 6 ---rezolvare
<!DOCTYPE>
<html>
<head>
</head>
<body>
<form name="f" method="post" action="medii.php">

Nume cursant <input type="text" name="nume" /><br />
<?php
echo "Nota teorie:<select name='nt'>";

for($i=1;$i<=10;$i++)
{
echo "<option value=".$i.">".$i."</option>";
}
echo "</select>";
echo "Nota practica:<select name='np'>";

for($i=1;$i<=10;$i++)
{
echo "<option value=".$i.">".$i."</option>";
}
echo "</select>";
?> 
<br /><br />

<input type="reset" value="Anlueaza">
</form>
</body>
</html>
medii.php.
<?php
$nume=$_POST["nume"];
$nt=$_POST["nt"];
$np=$_POST["np"];
$media=($nt+$np)/2;
echo "Domnul/Doamna ".$nume." are media ".$media;
echo "<br /><br />";
127
include "rezolvare.php";
?>
Exemplu 7 -Aplicatie3.html
<html>
<head>
</head>
<body>
<form name="f" method="post" action="culori1.php">

<h1>Culori Fundal</h1>
<select name="fundal">
<option value="red">Rosu</option>
<option value="green">Verde</option>
<option value="blue">Albastru</option>
<option value="yellow">Galben</option>
</select>
<h1>Culori text</h1>
<select name="text">
<option value="red">Rosu</option>
<option value="green">Verde</option>
<option value="blue">Albastru</option>
<option value="yellow">Galben</option>
</select>
<br /><br />
<input type="submit" value="Trimite" />

<input type="reset" value="Anuleaza" />
</form>
</body>
</html>
Aplicatii
culori1.php
<?php
$a="white";
$b="black";
if(isset($_POST["fundal"]))
{
$a=$_POST["fundal"];
}
if(isset($_POST["text"]))
{
128
$b=$_POST["text"];
}
//$a, $b
//
echo"
<!DOCTYPE>
<html><head></head>
<body bgcolor=".$a." text=".$b.">
<form name='f' method='post' action='culori1.php'>

<h1>Culori Fundal</h1>
<select name='fundal'>
<option value='red'>Rosu</option>
<option value='green'>Verde</option>
<option value='blue'>Albastru</option>
<option value='yellow'>Galben</option>
</select>
<h1>Culori text</h1>
<select name='text'>
<option value='red'>Rosu</option>
<option value='green'>Verde</option>
<option value='blue'>Albastru</option>
<option value='yellow'>Galben</option>
</select>
<br /><br />
<input type='submit' value='Trimite' />

<input type='reset' value='Anuleaza' />
</form>
</body>
</html>
";
?>
129
Aplicatie PHP si MySql
130
<html>
<head><title></title></head>
<body>
<h1> Formular date:</h1>
<form name="f" action="adaugare.php" method="post"></br>
nume :<input type="text" name="t1" size="30" /></br>
prenume :<input type="text" name="t2" size="30" /></br>
varsta :<input type="text" name="t3" size="2" /></br>
telefon :<input type="text" name="t4" size="10" /></br>
adresa :<input type="text" name="t5" size="30" /></br>
email :<input type="text" name="t6" size="30" />
</br>
<input type="submit" value="test">
</form>
</body>
</html>
<?php
$a=strtoupper($_POST["t1"]);
$b=strtoupper($_POST["t2"]);
$c=$_POST["t3"];
$d=$_POST["t4"];
$e=strtoupper($_POST["t5"]);
$f=$_POST["t6"];
//preia date si aplica conversia
mysql_connect("localhost","root","root123") or die ("Nu merge");

mysql_select_db("zi_2015") or die ('Eroare la baza de date!');
//creez insert
131
$x="insert into aplic1_user_ set
nume='".$a."',prenume='".$b."',varsta='".$c."',tel='".$d."',adresa='".$e."',email='".$f."';";
$y=mysql_query($x);
if($x)
{
echo "<br /> Datele s-au introdus corect!";
}
else
{
echo "Eroare la adaugare!";
}
//Afisare
$q="select * from aplic1_user_;";
$rez=mysql_query($q);
echo "<table border='1' align='center'>";
echo "<tr><td>Nume</td><td>Prenume</td><td>Varsta</td><td>Telefon</td><td>Adresa</td></tr>";
$sem=0;
while($row=mysql_fetch_array($rez)){
if($sem==0)
{echo "<tr bgcolor='#992233'>";
echo "<td>" . $row['nume'] . "</td>";
echo "<td>" . $row['prenume'] . "</td>";
echo "<td>" . $row['varsta'] . "</td>";
echo "<td>" . $row['tel'] . "</td>";
echo "<td>" . $row['adresa'] . "</td>";
echo "</tr>";
$sem=1;
}
else
{echo "<tr bgcolor='9568473'>";
echo "<td>" . $row['nume'] . "</td>";
echo "<td>" . $row['prenume'] . "</td>";
echo "<td>" . $row['varsta'] . "</td>";
echo "<td>" . $row['tel'] . "</td>";
echo "<td>" . $row['adresa'] . "</td>";
echo "</tr>";
$sem=0;
}
}
echo "</table>";
//sfarsit afisare
echo "<a href='introducere.html'>Back</a>";

echo "<br /><b>Continuati?</b>
<form action='rasp.php' method='post'>
<input type='submit' value='Alegeti?' /> <br />
<input type='radio' name='r' value='da' /> da
<input type='radio' name='r' value='nu' /> nu
</form>";
?>
<?php
$rasp=$_POST["r"];
if($rasp=="da")
include "introducere.html";
else
echo "</br>revenire la meniul principal";
132
?>
133
Unitatea de invatare IV.
CONSTRUIREA DOCUMENTELOR XML
Aceasta unitate are ca scop cunoasterea regulilor pe care trebuie să le respecte

documentele XML. Regulile sunt simple, multe dintre ele fiind cunoscute de la HTML.
Regulile XML pot fi clasificate în două categorii: reguli de sintaxă XML si reguli de
validitate a documentelor XML
După parcurgerea si însusirea acestei teme, studentul va fi capabil:

- sa construiasca documente XML
- sa construiasca prologul unui document XML
- sa utilizez XML ca baza de date
- sa cunoasca modul de stocare a documentelor in BLOB-uri
- sa cunoasca importanta sistemelor de management al
continuturilor

în zona referitoare la aplicatii. Se recomandă testarea tagurilor XML si
consultarea Internetului pentru detalii si informatii suplimentare
(www.w3schools.com). Timpul minim pe care trebuie să-l acordati acestui modul
este de 8 ore.
Cuvinte cheie: XML, DTD-ul, DOCTYPE, Date, documente, baze de date, RSS,
Blob-uri
4.1 Construirea documentelor XML şi importanţa acestora
XML (Extensible Markup Language ) este o formă condensată a Standard

Generalized Markup Language (SGML) care permite dezvoltatorilor să creeze
etichete particularizate, care oferă flexibilitate în organizarea şi prezenţarea
informaţiilor. XML este format de fapt din două metalimbaje, ambele descrise în
acelaşi document. Primul este un set de reguli pentru realizarea de documente
XML construite corect, în timp ce al doilea este un set de reguli pentru realizarea
unei definiţii a tipului documentului XML, sau DTD (Document Type
134
Definition), care permite ca structura documentului XML să se supună unor
constrângeri şi să fie validată faţă de acele constrângeri.
XML are o natură duală fiind:

 un metalimbaj care permite descrierea de noi structuri de documente şi
vocabulare;
 un limbaj utilizat ca să exprime acea structură şi acel vocabular în cazul
unui document.
Section 5.08
Section 5.09 Definiţiile tipului documentului XML (DTD-urile) descriu instanţe
ale limbajului XML, numite uneori vocabulare XML. Dcumentele XML sunt
create utilizând acele limbaje.
XML este un limbaj cu etichete şi atribute asemănător cu HTML, dar un HTML
transformat atât de mult, încât nu mai poate fi recunoscut. XML este mult mai
structurat decât HTML. În timp ce procesoarele HTML acceptă în mod curent cod
incorect şi diform şi încearcă să îi dea sens pe ecran, XML trebuie să se oprească
atunci când găseşte o eroare fatală, care poate fi aproape orice tip de eroare.
Dacă în HTML avem un număr relativ mic de etichete, XML are un număr
de etichete aproape infinit, structurate în aproape orice fel se doreşte. Oricum,
fundamentele au rămas aceleaşi, XML reprezentând un pas evolutiv al HTML.
Cu toate că orice procesor XML poate spune despre o porţiune de cod dacă este
sau nu construit corect, iar un manual poate ajuta la construirea unui document
valid, DTD-ul permite verificarea fără ambiguităţi a codului. Totuşi, în funcţie de
tipul de creare utilizat, acesta poate fi un pas diferit de procesul de editare.
Codul îndeplineşte acest ideal în funcţie de utilizarea dată numelor etichetelor,

totuşi între anumite limite:
 Numele de etichete care încep cu şirul “xml”, indiferent de tipul literelor,
sunt rezervate; adică, indiferent de situaţie, nu este permisa crearea lor;
 Numele de etichete care conţin caracterul două puncte pot fi interpretate ca
identificatori având asociată o zonă de nume, deci utilizarea celor două
puncte în numele etichetelor este puternic combătută şi poate fi chiar
interzisă;
 Un nume de etichetă trebuie să înceapă cu o “literă”, care în acest context
este orice literă sau ideogramă Unicode/ISO/IEC 10646, sau cu o liniuţă de
subliniere.
4.2 Caracteristicile lui XML
 XML este sensibil la tipul literelor deoarece majusculele nu reprezintă

un concept universal – Dacă s-ar trata literele mari şi mici ca fiind
echivalente, ar trebui să se facă la fel pentru mii de alte variante de litere în
alte limbi, o operaţie împovărătoare. Unele limbi nici nu au tipuri de litere.
135
De exemplu, în limba ebraică nu există litere mici, iar limba arabă nu face
distincţie între forma iniţială, de mijloc şi finală a literelor. Pentru cei care
preferă să scrie etichetele cu majuscule şi atributele cu litere mici, pentru a
le evidenţia, aceasta este o ştire teribilă. Dar editoarele de cod moderne nu
mai acordă o importanţă aşa de mare acestui lucru ca înainte. De exemplu,
precizarea anumitor culori pentru a marca etichete este un lucru obişnuit,
deci utilizarea majusculelor este întrucâtva un anacronism istoric,
asemenea numerelor de linii în COBOL.
 XML este foarte precis cu privire la imbricarea corectă a etichetelor .

Etichetele nu se pot încheia într-un context diferit de cel de început. Deci,
dacă se doreşte <bold> <italics>, fraza evidenţiată trebuie închisă cu
</italics></bold>, pentru a evita o eroare fatală. Deoarece XML poate
referi şi include documente XML şi fragmente de documente oriunde pe
Web, fiecare document XML trebuie să se supună aceloraşi reguli pentru a
nu strica documentele altora.
 XML nu este bine protejat împotriva recursivităţii – Cu toate că este

posibilă stabilirea excluderilor explicite la un anumit nivel, la o structură
complexă a unui document este dificilă menţinerea acelor excluderi la un
nivel redus, mai ales atunci când se utilizează etichete care pot fi aplicate
la orice nivel. Deci, interdicţia HTML referitoare la includerea unei etichete
ancoră <a> în interiorul altei etichete ancoră există şi în XML, dar nu este
impusă dincolo de includerea directă.
 XML obligă la închiderea fiecărei etichete, chiar şi a etichetelor vide –

Deoarece este posibila crearea unui document XML care să nu utilizeze un
DTD, un procesor XML nu are de unde să ştie dacă o etichetă este sau nu
vidă. Deoarece toate documentele XML trebuie să fie construite corect,
etichetele vide trebuie marcate cu o sintaxă specială care spune unui
procesor XML că eticheta este vidă şi închisă. Acest lucru se realizează
plasând un spaţiu şi un caracter slash la sfârşitul etichetei, astfel: <break
/>
 XML necesită încadrarea valorilor atributelor fie între apostrofuri, fie

între ghilimele – Acolo unde HTML este indulgent, mai ales în ceea ce
priveşte numerele şi aproape orice şir fără spaţii în interior, XML tratează
totul ca şir de caractere şi lasă aplicaţia să îşi dea seama singură de toate
acestea.
136
 XML recunoaşte mai multe limbi – Spre deosebire de HTML, seturile de
caractere extinse utilizate în multe limbi europene nu sunt pe deplin
recunoscute în mod prestabilit. Există un mecanism simplu pentru
includerea acestora, precum şi a întregului set de caractere Unicode
(cunoscut, de asemenea, şi ca ISO/IEC 10646) care are peste un milion de
caractere, deci suportul pentru chineză, arabă şi multe alte limbi mai exotice
ale lumii este un lucru uşor. În afară de diferenţele menţionate în această
listă, XML este foarte asemănător cu HTML din punctul de vedere al
marcării etichetelor, al argumentării atributelor şi al trecerii conţinutului
între perechi de etichete.
Limbajul XML a fost proiectat astfel încât să fie transparent la utilizare pentru
a putea fi înţeles şi utilizat cu uşurinţă. Descrierile XML succinte sau
complicate din majoritatea documentelor sunt greu de înţeles în efortul de a fi
explicit într-un mod în care programatorii să îl poată translata cu uşurinţă în
aplicaţii care să funcţioneze.
Un document XML este o colecţie de entităţi care pot fi sau nu analizate.

Datele care nu sunt înţelese de un procesor XML, date binare sau date care au
sens numai pentru alte aplicaţii, reprezintă date neanalizate. Datele înţelese de
XML, fie ca şi caractere fie ca marcaje, sunt date analizate. Un document XML
trebuie să fie construit corect.
4.3 Construirea prologului unui document XML
Prologul unui document XML conţine mai multe instrucţiuni. Prima, declaraţia
XML, afirmă că documentul următor este XML. Cea de a doua, declaraţia tipului
documentului (Document Type Declaration), este metodă utilizata pentru a
identifica definiţia tipului documentului (Document Type Definition - DTD)
folosită de un anumit document. Faptul că acronimul DTD poate fi aplicat la
Document Type Declaration este o coincidenţă nefericită. DTD se referă numai
la Document Type Definition. Într-un document XML poate exista o singură
declaraţie a tipului documentului, deci este introdusă chiar în instanţa
137
documentului. Deoarece pot fi combinate mai multe DTD-uri pentru a forma un
singur document, aceasta permite controlul încărcării DTD-urilor în fiecare
document.
Declaraţia tipului documentului (DOCTYPE) are două părţi, ambele

opţionale. Prima se referă la un DTD extern, şi utilizează cuvinte cheie PUBLIC
sau SYSTEM pentru a identifica o intrare dintr-un catalog, respectiv un URI. În
cazul în care cataloagele nu sunt implementate în procesorul XML, se pot
specifica ambele părţi deodată, fără cel de al doilea cuvânt cheie:
<!DOCTYPE nume-document PUBLIC “{catalog id}”>

<!DOCTYPE nume-document PUBLIC “{catalog id}” “{uri}”>
<!DOCTYPE nume-document SYSTEM “{uri}”>
Cea de a doua parte opţională a declaraţiei DOCTYPE permite introducerea

submulţimii interne a unui DTD direct în document. Există restricţii severe cu
privire la genul de informaţie care poate fi introdusă în DTD-ul intern, dar oricum
se pot face destul de multe. Submulţimea internă a unui DTD este încadrată între
paranteze drepte, astfel:
<!DOCTYPE nume-document [ {declaraţiile DTD-ului intern} ]>
De asemenea, cele două pot fi combinate, permiţând adăugarea anumitor tipuri de

declaraţii şi entităţi aproape în orice mod:
<!DOCTYPE nume-document PUBLIC “{catalog id}” “{uri}” [ {declaraţiile

DTD-ului intern} ]>
Pentru claritate, submulţimea internă este evidenţiată ca mai jos:
<!DOCTYPE nume-document PUBLIC “{catalog id}” “{uri}” [

{declaraţiile DTD-ului intern}
]>
138
Definirea corpului documentului
Un document XML este alcătuit din text, care de obicei este format din mai multe
marcaje şi date caracter. Prologul conţine numai marcaje, dar nu aceasta este
partea interesantă, deoarece este nevoie de date care să însoţească marcajele care,
altfel, nu ar fi decât nişte cutii goale. Corpul documentului conţine aproape tot
ceea ce contează din perspectiva unei aplicaţii împrăştiate generos în cadrul
marcajelor.
Un DTD poate declara multe tipuri de date care să poată fi utilizate într-un
document, dar tipul de date prestabilit este întotdeauna CDATA, pentru date
obişnuite de tip caracter. Foaia sau manualul de codare indică ce tip de dată poate
fi introdus în fiecare atribut sau câmp cu conţinut element. Presupunând că tipul
de date este CDATA, în câmp se poate pune aproape orice se doreşte atât timp cât
nu conţine un marcaj în afara unei secvenţe escape. Marcajul este format din
ansamblu de date non-caracter dintr-un fişier XML. Diversele forme pe care le
poate lua un marcaj sunt prezenţate în tabelul următor:
Tabel cu sintaxa marcajului XML
Eticheta de pornire <numeElement [atribute]>....

Eticheta de terminare ...</numeElement>
Eticheta definire element vid <numeElement [atribute]/>
Referinţa entitate &numeEntitate; sau%parametru_nume_entitate
Referinţa caracter &#numarzecimal;
comentariu <!—comentariu - ->
Delimitatoare sectiune <![CDATA[ informatii cdata]]>
CDATA
Declaratiile tipului <!DICTYPE nume idextermen? [informatii
documentului DTP]>
Instructiuni de prelucrare <?Idprocesor date?>
Declaratia XML <?xml version encoding standalone?>
Marcajul începe întotdeauna fie cu caracterul <, caz în care se încheie întotdeauna
cu caracterul >, fie cu caracterul &, caz în care se încheie întotdeauna cu caracterul
“;”.
Formarea structurilor logice în XML
Imbricarea elementelor este singurul mecanism utilizat pentru a arăta structura

logică dintr-un document XML. Etichetele de pornire şi încheiere din fluxul de
text spun procesorului XML că a fost întâlnit un nod. Dacă procesorul XML
întâlneşte o altă etichetă de pornire înainte de eticheta de încheiere
corespunzătoare, atunci procesorul ştie că acesta este fie un nod nou în arbore, fie
139
o frunză. Dacă nu găseşte o nouă etichetă de pornire şi întâlneşte o etichetă de
încheiere, atunci procesorul ştie că aceasta este o frunză şi că poate acţiona iterativ
la acel nivel al arborelui până când întâlneşte o altă etichetă de pornire sau de
încheiere. Prelucrarea acţionează treptat, bazându-se pe această regulă simplă.
Dacă procesorul validează documentul, atunci fiecărui nod i se poate asocia o
regulă care să determine ce tip de conţinut poate apărea în el. O etichetă vidă este,
prin definiţie, o frunză, deoarece nu poate avea nici un conţinut.
În XML sunt utilizate două tipuri de etichete, etichete cu conţinut şi etichete

vide.
Etichetele cu conţinut trebuie să aibă o etichetă de pornire şi o etichetă de

încheiere. Eticheta de pornire conţine numele elementului încadrat între paranteze
unghiulare, având opţional atribute ca argumente. Eticheta de încheiere conţine
numele elementului precedat de caracterul slash, totul fiind încadrat între
paranteze unghiulare. În eticheta de încheiere nu puteţi trece atribute.
Codul următor reprezintă o etichetă cu conţinut:
<titlu subtitlu=‘‘o excursie” >dus-întors</titlu>
Seamănă mult cu etichetele HTML standard şi nu ar trebui să ridice alte probleme

în afara celei de construire corectă, care cere ca ele să se imbrice într-adevăr una
în cealaltă. Nu pot exista etichete care să alterneze între ele ca în acest exemplu
greşit construit:
<bold><italic>text ingrosat şi inclinat</bold></italic>
Cu toate că este o eroare obişnuită în HTML, XML este cu mult mai

pretenţios şi nu va permite această construcţie. Etichetele trebuie imbricate corect,
după cum se vede în exemplul următor:
<bold><italic> text ingrosat şi inclinat </italic></bold>
140
Acum etichetele sunt imbricate corect. Trebuie închisă fiecare etichetă care
începe în contextul unei anumite etichete (sau a mai multor etichete) înainte de
închiderea contextului etichetei respective.
Etichetele vide au disponibil un format special, cu toate că aceeaşi schemă,

etichetă de pornire/ etichetă de încheiere, poate fi utilizată atâta timp cât se ţine
cont de faptul că nu trebuie pus nici un fel de conţinut între eticheta de pornire a
elementului vid şi eticheta de încheiere care urmează imediat după ea. De
asemenea, poate exista preocuparea că este posibil ca documentul XML să fie
vizualizat cu un browser Web obişnuit, deoarece etichetele de încheiere pentru
elementele care arată ca etichete HTML vide pot duce la blocarea browserului sau
la un comportament ciudat al acestuia. Totuşi, pentru utilizare generală, formatul
special este mnemonic în sine, un avantaj deoarece se poate vedea că eticheta este
vidă şi nu blochează aproape nici un browser. De obicei, etichetele vide sunt
pornite şi încheiate în cadrul aceleiaşi perechi de paranteze unghiulare, plasând
după numele elementului şi toate atributele sale posibile un spaţiu, un caracter
slash şi apoi paranteza unghiulară închisă:
<image source=‘‘imagine.jpeg” type=‘‘JPEG” />
Fiecare element dintr-un document XML valid a fost definit în DTD-ul asociat
acelui document prin declaraţia DOCTYPE. DTD-ul declară următoarele:
 numele efective ale elementelor,

 regulile utilizate pentru a determina care elemente se pot imbrica în alte
elemente şi în ce ordine,
 atributele posibile şi valorile lor prestabilite sau constante,
 valorile caracter ale tipurilor enumerate,
 entităţile neanalizate utilizate în document şi modul în care sunt referite
prin nume,
 codificările de limbă utilizate în document,
 alte informaţii importante pentru prelucrarea şi redarea documentului.
Entităţi neanalizate
O entitate neanalizată este orice lucru care nu poate fi recunoscut de un procesor
XML, fie date binare, cum ar fi un fişier imagine sau audio, fie text care trebuie
să fie transferat unei aplicaţii fără a fi prelucrat în vreun fel. HTML utilizează
comentarii pentru a ascunde un astfel de text de browserul HTML, dar XML are
câteva mecanisme care funcţionează mult mai sigur.
141
O entitate neanalizată trebuie mai întâi să fie declarată ca NOTATION, o
declaraţie specială care numeşte o aplicaţie de asistenţă care ştie cum să lucreze
cu entităţi de un anumit tip. Notaţiei îi este dat un nume, un identificator public
opţional şi apoi numele mai puţin opţional al aplicaţiei de asistenţă, ca în una din
variantele următoare:
<! NOTATION nume-mnemonic PUBLIC “identificator-public”>

<! NOTATION nume-mnemonic PUBLIC “identificator-public” “nume-
aplicaţie.exe”>
<! NOTATION nume-mnemonic SYSTEM “nume-aplicaţie.exe”>
Prima opţiune funcţionează numai dacă există un catalog. Nu se poate pune baza
pe un catalog deoarece acesta funcţionează indiferent dacă există sau nu catalog.
Nu se poate baza pe un catalog deoarece acesta este un instrument SGML pe care
multe procesoare XML actuale l-au moştenit implicit de la predecesoarele lor
SGML. Studierea catalogului nu este specificată în recomandarea W3C şi nu se
poate conta niciodată pe ea. Dacă este posibil, se recomandă utilizarea ultimele
două versiuni. Pe de altă parte, codarea hard a informaţiilor despre locaţia şi
identitatea aplicaţiei de asistenţă în absolut fiecare DTD este un anacronism
predispus la erori pe Web.
XML-ul ca bază de date
Un document XML este o bază de date în sensul cel mai strict al cuvântului şi
anume este o colecţie de date. Se poate considera că aceste documente nu sunt
diferite de orice alt tip de fişiere – în fond, toate fişierele conţin anumite tipuri
de date.
Având formatul unei baze de date documentele XML prezintă anumite avantaje.
De exemplu, este auto-descris (tag-urile descriu structura şi numele tipurilor de
date, dar nu şi semantica), este portabil (Unicode), şi poate descrie date în structuri
de arbori sau grafuri. De asemenea are şi dezavantaje. De exemplu, este
prolixs(neclar) şi accesul la date este greoi datorită analizării şi conversiei
textului.
142
Putem considera şi că XML şi tehnologiile asociate constituie o bază de
date în sensul mai larg al cuvântului – adică, un sistem de gestiune a bazelor de
date (SGBD). XML oferă multe din avantajele bazelor de date: stocare
(documente XML), scheme (DTD-uri, scheme XML, RELAX NG, ş.a,),
limbaje de interogare (XQuery, XPath, XQL, XML-QL, QUILT, etc.), interfeţe
de programare (SAX, DOM, JDOM). Totuşi multe componente ale bazelor de
date convenţionale: stocare eficientă, indecşi, securitate, tranzacţii şi
integritatea datelor, accesul multi-user, triggere, interogări făcute pe mai multe
documente ş.a.
Astfel, se pot folosi documente XML ca o bază de date într-un mediu cu
cerinţe modeste şi date puţine, dar această soluţie nu este viabilă într-un mediu
pentru producţie în masă, unde există mulţi utilizatori, cerinţe stricte de integritate
a datelor şi nevoia de o performanţă bună.
Cel mai important factor în alegerea unei baze de date este ce va stoca aceasta:
date sau documente?. XML-ul poate fi folosit doar pentru a transporta date între
baza de date şi o aplicaţie sau poate fi folosit integral ca în cazul documentelor
XHTML şi DocBook. Scopul utilizării XML este important deoarece toate
documentele centrate pe date au anumite caracteristici comune, la fel se întâmpla
şi în cazul informaţiilor centrate pe documente, şi aceste caracteristici influenţează
felul cum XML-ul este stocat în baza de date. Documentele centrate pe date sunt
documente care folosesc XML-ul pentru transportul datelor. Aceste documente
sunt folosite de către aplicaţii şi nu are nici o importanţă faptul că informaţiile
folosite au fost reţinute pentru o perioadă de timp în documente XML. Exemple
de documente centrate pe date sunt ordine de plată, programarea zborurilor, date
ştiinţifice.
Documente centrate pe date au o structură regulată, datele sunt atomice

(cea mai mică unitate independenta de date este un element sau un atribut).
Ordinea elementelor care apar în document nu este importantă, decât în
momentul validării documentului.
Informaţiile care există în documentele centrate pe date pot proveni din baza de
date (caz în care se doreşte extragerea lor în fişiere XML), dar şi din afara bazei
de date (caz în care se doreşte stocarea acestora în baza de date). Un exemplu de
informaţii care provin dintr-o bază de date sunt cantităţile de date stocare în bazele
de date relaţionale, iar un exemplu de informaţii care se doresc a fi introduse într-
o bază de date pot fi considerate datele ştiinţifice obţinute de un sistem de
măsurători şi convertite în XML.
143
Următorul model este un document centrat pe date:
<OrdinVanzari NumarOV=‘‘35442”>
<Client NumarClient=‘‘423”>
<NumeClient>Alfa 123</NumeClient>
<Strada>Calea Vacaresti.</Strada>
<Oras>Bucuresti</Oras>
<Sector>IL</Sector>
<CodPostal>0040</CodPostal>
</Client>
<DataOrdin>20032009</DataOrdin>
<Item NumarItem=‘‘1”>
<Parte NumarParte=‘‘123”>
<Descriere>
<p><b>caiet cu sina:</b><br />
Hartie alba,
garantie</p>
</Descriere>
<Pret>122</Pret>
</Parte>
<Cantitate>110</Cantitate>
</Item>
<Item NumarItem=‘‘2”>
<Parte NumarParte=‘‘4516”>
<Descriere>
<p><i>Separator:</i><br />
Aluminiup>
</Descriere>
<Pret>533</Pret>
</Parte>
<Cantitate>130</Cantitate>
</Item>
</OrdinVanzari>
Pe lângă documentele centrate pe date, cu structura asemănătoare cu documentul

din exemplul anterior, multe documente care conţin şi text adiţional sunt centrate
pe date. Spre exemplu, să considerăm o pagină web care conţine informaţii despre
o carte. Deşi pagina conţine în mare parte text, structura acelui text este regulată,
şi o parte din acel text este comună tuturor paginilor care descriu cărţi, fiecare
porţiune de text specific având dimensiuni limitate. Astfel pagina ar putea fi
144
construită dintr-un document XML simplu, centrat pe date care conţine informaţii
despre o singură carte şi este obţinut dintr-o bază de date şi un stylesheet XSL
care adaugă textul care leagă informaţiile din XML. În general orice site web care
construieşte documente HTML dinamic prin completarea unui template cu
informaţii dintr-o bază de date poate fi înlocuit cu mai multe documente XML
centrate pe date şi unul sau mai multe stylesheet-uri XSL.
4.5Date, documente şi baze de date
De obicei, datele sunt stocate într-o bază de date tradiţională cum sunt
cele relaţionale sau orientate-obiect. Documentele sunt stocate într-o bază de
date nativă XML (o bază de date destinată stocării XML) sau un sistem de
gestionare a conţinuturilor (content management system) – o aplicaţie destinată
administrării documentelor şi construită peste o bază de date nativă XML.
Totuşi, aceste reguli nu sunt stricte. Datele, în special datele

semistructurate, pot fi stocate în baze de date native XML şi documentele pot fi
stocate în baze de date tradiţionale, atunci când nu sunt necesare foarte multe
caracteristici specifice XML. În plus, graniţele dintre bazele de date tradiţionale
şi cele native XML devin din ce în ce mai neclare, deoarece la bazele de date
tradiţionale se adaugă facilitaţi native XML şi bazele de date native XML suportă
stocarea fragmentelor de documente în baze de date, de obicei relaţionale, externe.
Pentru transferarea datelor între documente XML şi o bază de date, este necesară
maparea schemei documentului XML (DTD, Scheme XML, RELAX NG, etc.) pe
schema bazei de date. Software-ul pentru transferul de date este construit peste
această mapare. Software-ul poate folosi un limbaj de interogare XML (cum ar fi
XPath, XQuery) sau poate transfera direct date conform cu maparea (echivalentul
în XML al interogării SELECT * FROM Tabelă).
În al doilea caz, structura documentului şi structura necesară pentru mapare

trebuie să fie identice. Deoarece acest lucru se întâmplă destul de rar, produsele
care folosesc această strategie sunt adesea folosite împreună cu XSLT. Astfel,
înainte de transferarea datelor în baza de date, documentul este întâi adus la
structura necesară mapării şi apoi datele sunt transferate. Similar, după
transferarea datelor din baza de date, documentul obţinut este adus la structura
folosită de către aplicaţie.
145
Mapările între schemele documentelor şi schemele bazelor de date sunt
efectuate pe tipurile elementelor, atribute, şi text. Aproape întotdeauna, se omit
structurile fizice (cum ar fi entităţile şi informaţia codificată) şi unele structuri
logice (cum ar fi instrucţiunile de procesare, comentariile). Aceste omiteri nu
au o influenţă prea mare, deoarece baza de date şi aplicaţia sunt interesate
numai de datele din documentul XML.
următor.
<bazadedate>
<tabela>
<linie>
<coloana1>...</coloana1>
<coloana2>...</coloana2>
...
</linie>
<linie>
...
</linie>
...
</tabela>
<tabela>
...
</tabela>
...
</bazadedate>
Maparea, bazată pe tabele, este folosită de multe produse care efectuează

transferul de date între un document XML şi o bază de date relaţională. Aceasta
146
modelează un document XML ca o singură tabelă sau ca un set de tabele.
Structura documentului XML este arătată în exemplul
În funcţie de software datele din coloane pot fi stocate ca elemente descendente

sau ca atribute. În plus, produsele care folosesc mapări bazate pe tabele de multe
ori includ metadate fie la începutul documentului fie ca atribute asociate fiecărui
element din tabelă sau coloană. Maparea, bazată pe tabele, este utilizată pentru
serializarea datelor relaţionale, ca în cazul transferării datelor între două baze de
date relaţionale. Dezavantajul acestei mapări este că nu poate fi folosită pentru un
document XML care nu respectă formatul din exemplu. Instanţierea obiectelor
din model depinde de produsul folosit. Unele produse dau posibilitatea generării
claselor în model şi apoi, folosirea obiectelor din aceste clase în aplicaţii. În cazul
folosirii acestor produse, datele sunt transferate între documentul XML şi aceste
obiecte, şi între aceste obiecte şi baza de date. Alte produse folosesc aceste obiecte
numai pentru a vizualiza maparea şi transferul de date direct între documentul
XML şi baza de date.
Modul în care maparea obiectual-relaţională este suportată variază de la produs

la produs. De exemplu:
 toate produsele suportă maparea tipurilor complexe de elemente pe clase şi
a tipurilor simple de elemente şi atribute pe proprietăţi.
 toate produsele dau posibilitatea desemnării unui element rădăcină care nu
este mapat pe modelul obiect sau pe baza de date. Acest element este
folositor atunci când se doreşte stocarea obiectelor cu mai multe nivele în
acelaşi document XML.
 majoritatea produselor oferă posibilitatea specificării dacă proprietăţile sunt
mapate pe atribute sau pe elemente descendente în documentul XML. Unele
produse permit combinarea atributelor cu elementele descendente; altele cer
folosirea numai a elementelor descendente sau a atributelor.
 majoritatea produselor permit folosirea numelor diferite în documentul
XML şi baza de date, dar sunt anumite produse care necesită folosirea
aceloraşi nume atât în documentul XML cât şi în baza de date.
 majoritatea produselor permit specificarea ordinii în care elementele
descendente apar în părintele lor, dar care face imposibilă construirea mai
multor modele pentru conţinut. Din fericire, modelele pentru conţinut
suportate sunt suficiente pentru majoritatea documentelor centrate pe date
(ordinea este importantă numai dacă se face validarea documentului).
 multe produse transferă date direct conform cu modelul pe care sunt
construite.
147
O schema XML se generează dintr-o schemă relaţională astfel:
 pentru fiecare tabelă se generează un tip de element
 pentru fiecare coloană care nu este cheie în acea tabelă, dar şi pentru
coloanele chei primare, se adaugă la model un atribut la tipul elementului
sau un element descendent ce conţine numai PCDATA.
La fiecare tabelă pentru care cheia primară este exportată, se adaugă un element
descendent la model şi se procesează tabela recursiv.
Pentru fiecare cheie străina, se adaugă un element descendent la model şi se
procesează tabela cu cheie străină recursiv. Există câteva dezavantaje la aceste
procedee. Multe dintre acestea se pot corecta uşor de către programator, cum ar fi
coliziuni de nume şi specificarea lungimilor şi tipurilor de date ale coloanelor.
DTD-urile nu conţin informaţii despre tipurile de date, deci nu este posibilă
cunoaşterea tipurilor de date care ar trebui folosite în baza de date. Tipurile de
date şi lungimile pot fi prevăzute dintr-o schemă XML.
O problemă mai importantă este aceea că modelul de date folosit de

documentul XML este adesea diferit şi de obicei mai complex decât cel mai
eficient model pentru stocarea datelor în baza de date. De exemplu, se consideră
următorul fragment XML:
<Client>
<Nume>ABC </Nume>
<Adresa>
<Strada>Calea Vacaresti.</Strada>
<Sector>1</Sector>
<Tara>Romania</Tara>
<CodPostal>0040</CodPostal>
</Adresa>
</Client>
148
Procedura pentru generarea unei scheme relaţionale dintr-o schemă XML
ar crea două tabele: una pentru clienţi şi una pentru adrese. Totuşi, în majoritatea
cazurilor, ar fi mai bine să se reţină adresa în tabela de clienţi, şi nu într-o tabelă
separată.
Elementul <Adresa> este un bun exemplu pentru un element wrapper.

Elementele wrapper sunt în general folosite din două motive. În primul rând, ele
oferă structuri adiţionale ceea ce face documentul mai uşor de înţeles. În al doilea
rând, ele sunt de obicei folosite ca o formă de redactare a datelor. De exemplu,
elementul <Adresa> ar putea fi trimis la o rutină care transformă toate adresele în
obiecte Adresa, indiferent unde apar acestea.
Daca elementele wrapper sunt folositoare în XML, în general ele cauzează
probleme atunci când sunt mapate la baza de date dacă acestea se găsesc sub forma
extra-structurilor. Din această cauză, ele ar trebui eliminate din schema XML
înaintea generării schemei relaţionale. Din moment ce este puţin probabil că
modificarea schemei XML ar trebui să fie permanentă, acest lucru duce la o
neconcordanţă între documentul existent şi documentele presupuse de către soft-
ul de transfer de date, din moment ce elementele wrapper nu sunt incluse în
mapare. Acest lucru poate fi rezolvat prin transformarea documentelor la rulare
cu XSLT: elementele wrapper sunt eliminate înaintea transferării datelor în baza
de date şi sunt inserate după transferul datelor din baza de date.
Cu toate aceste dezavantaje, procedurile de mai sus oferă în continuare un

punct de pornire folositor pentru generarea schemelor XML din scheme
relaţionale şi invers, în special în sisteme mari.
Pentru stocarea documentelor XML există două strategii de bază: stocarea lor în
sistemul de fişiere sau ca un BLOB într-o bază de date relaţională şi acceptarea
funcţionalităţilor XML limitate, sau stocarea lor într-o bază de date nativă XML.
Dacă se lucrează cu un set simplu de documente, cum ar fi un set mic de

documentaţie, cea mai uşoara cale de stocare este în sistemul de fişiere. Se pot
folosi instrumente cum ar fi ‘‘grep” pentru interogarea lor, şi ‘‘sed” pentru
modificarea lor. Căutările complete de text în documentele XML sunt inexacte,
pentru că ele nu pot distinge marcajul de text şi nu pot înţelege folosirea entităţilor.
Totuşi, într-un sistem mic, aceste inexactităţi ar putea fi acceptabile. Dacă se
doreşte un simplu control al tranzacţiilor, documentele pot fi întreţinute cu o
versiune de control a sistemului cum ar fi CVS sau RCS.
4.6 Stocarea documentelor în BLOB-uri

O opţiune puţin mai sofisticată este stocarea documentelor ca BLOB-uri într-o
bază de date relaţională. Această modalitate oferă un număr de avantaje a bazelor
de date: controlul tranzacţiilor, securitate, acces multiuser. În plus, multe baze de
149
date au instrumente pentru căutări de text şi pot face căutări complete de text,
căutări aproximative, căutări sinonime şi căutări fuzzy. Unele dintre aceste
instrumente sunt construite pentru a recunoaşte XML, ceea ce va elimina
problemele care apar la căutările documentelor XML ca simplu text.
Atunci când se stochează documente XML ca BLOB-uri, se pot
implementa uşor indexări simple care recunosc XML, chiar dacă baza de date nu
poate indexa XML. O modalitate de a face acest lucru este crearea a două tabele,
o tabelă index şi o tabelă document. Tabela document conţine o cheie primară şi
o coloană BLOB în care este reţinut documentul. Tabela index conţine o coloană
în care se găseşte valoarea ce va fi indexată şi o cheie străină care duce la cheia
primară a tabelei document.
Atunci când documentul este stocat în baza de date, el este căutat pentru
toate instanţele elementului sau atributului care este indexat. Fiecare instanţa este
stocată în tabela index, împreuna cu cheia primara a documentului. Coloana de
valori este apoi indexată, şi permite unei aplicaţii să efectueze o căutare rapidă a
unei anumite valori a unui element sau atribut şi să recupereze documentul
corespunzător.
De exemplu, se consideră un set de documente cu următorul DTD şi se

doreşte construirea unui index de autori:
<!ELEMENT Brosura (Titlu, Autor, Continut)>
<!ELEMENT Titlu (#PCDATA)>
<!ELEMENT Autor (#PCDATA)>
<!ELEMENT Continut (%Inline;)> 
Acestea ar putea fi stocate în următoarele tabele:
Autori Brosuri
---------------------- ---------
Autor VARCHAR(50) BrosurID INTEGER
BrosuraID INTEGER Brosura LONGVARCHAR
Când se inserează o broşură în baza de date, aplicaţia inserează broşura în tabela

Broşuri, apoi caută elementele <Autor>, reţinând valorile acestora şi ID-ul
broşurii din tabela Autori. Aplicaţia poate recupera broşurile în funcţie de autor
cu o simplă fraza SELECT. De exemplu, pentru a recupera toate broşurile scrise
de autorul ‘‘ION”, aplicaţia execută următoarea interogare:
150
SELECT Brosura
FROM Brosuri
WHERE BrosuraID IN (SELECT BrosuraID FROM Autori WHERE Autor=
'ION')
Unele baze de date native XML pot include date aflate la distanţă în documente
stocate în baza de date.
De obicei, aceste date sunt recuperate dintr-o bază de date relaţională cu

ODBC, OLE DB, sau JDBC şi sunt modelate folosind maparea bazată pe tabele
sau maparea relaţional-obiectuală. Daca aceste date sunt “live”, adică dacă
actualizările documentului din baza de date nativă XML sunt reflectate în baza
de date aflată la distanţă – depinde de baza de date nativă XML. În viitor,
majoritatea bazelor de date native XML vor suporta date “live” aflate la
distanţă.
Sisteme de management ale conţinuturilor
Sistemele de management ale conţinuturilor sunt un alt tip specializat de baze de

date native XML. Acestea sunt proiectate pentru operarea cu documente scrise de
oameni, cum ar fi manualele de utilizare, şi sunt construite peste baze de date
native XML. Baza de date, este în general, ascunsă de utilizator în spatele unui
‘‘front end” care oferă caracteristici, precum:
 control al versiunilor şi al accesului;

 motoare de căutare;
 editoare XML/SGML;
 motoare de publicare pe hârtie, CD sau pe Web;
 separarea conţinuturilor şi a stilurilor;
 extinderea în scripturi şi programare;
 integrarea datelor din baza de date.
Termenul de sistem de management al conţinuturilor, spre deosebire de sistem de

management al documentelor, reflectă faptul că asemenea sisteme permit, în
general, împărţirea documentelor în fragmente cu conţinut discret, cum ar fi
exemple, proceduri, capitole, dar şi metadate cum ar fi numele autorilor, datele
151
reviziilor, şi numerele documentelor, decât să opereze cu fiecare document ca un
întreg. Nu numai că, astfel se simplifică coordonarea lucrului mai multor scriitori
la acelaşi document, dar permite şi asamblarea unor documente noi din
componente care există deja.
Ce este RSS?
Feed-urile RSS sunt de obicei folosite pentru a oferi conţinut sau porţiuni de
conţinut (articole, mesaje, ştiri, anunţuri, etc) într-un format standard, care poate
fi preluat de aplicaţii specializate (gen browsere, editoare de ştiri, roboţi de
căutare, etc) şi afişate apoi destinatarului. Decât să verificăm în fiecare oră ce a
mai apărut nou pe paginile preferate, folosiţi o aplicaţie care va afişa noutăţile
direct când apar. Un fişier RSS este scris în meta-limbajul de marcare XML
(eXtensible Markup Language), extensia fişierului este .rss sau .xml (dar poate fi
şi .html sau .php, dar atunci nu este nestandard) iar tipul MIME al fişierului trebuie
să fie application/rss+xml. Pentru a introduce un fişier RSS în paginile unui site
trebuie specificat în partea de HEAD a documentului web următoarea linie,
<link rel="alternate" type="application/rss+xml" title="RSS"
unde pentru href trebuie specificat calea către fişierul RSS. Astfel spunem
browserului sau aplicaţiei (client) de unde să citescă informaţiile.Se poate face
referire la un feed RSS şi printr-un link direct (de obicei se foloseşte o poză
standard pentru RSS) iar în acest caz vizitatorul este invitat să dea click pe acea
imagine pentru a prelua feed-urile oferite de acea pagină web. În interiorul unui
feed-RSS se găsesc itemuri (obiecte). Orice fişier RSS trebuie să conţină cel puţin
un item. Item-urile sunt în general paginile web care dorim să le dăm către alţi
vizitatori. De exemplu, doriţi să informăm cititorii de apariţia unui nou articol pe
site. Informaţia despre acea pagină va forma un item. Pentru a introduce un item
în fişierul RSS va trebui să completăm elementele: Titlul- Descrierea- LinkTitlul.
Fişierele XML utilizează taguri pentru a specifica titlul, descrierea şi linkul.
152
Exemplu pentru descrierea unui item:
<item>
<title>Titlul articol1</title>
<description>Descrierea articolului 1 </description>
<link>http://www.legatura_catre_pagina_articolului1.ro</link>
</item>
<item>
<title>Titlu2 articol </title>
<description> Descrierea articolului 2 </description>
<link>http:/www.legatura_catre_pagina_articolului2.ro </link>
</item>
Deci, un feed-RSS este format dintr-o serie de iteme, iar acestea sunt legate
împreună pentru a crea un "Canal". Canalul apare la începutul fişierului şi la fel
ca itemurile, canalele utilizează titlul, descrierea şi linkul pentru a descrie
conţinutul. De asemenea trebuie să indicaţi ce tip de document este, introducând
pentru aceasta tagurile pentru document de tip XML şi RSS. Sfârşitul fişierului
va arăta ca în exemplul următor:
In php exista o biblioteca cunoscuta sub numele de simpleXML, ale carei facilitati sunt mai
mult decat suficiente pentru a acoperi procesarea de baza a XML-urilor.
PHP - XML - SimpleXML
SimpleXML a aparut in PHP 5. Lucreaza ca si DOM, cu obiecte, preia tot documentul XML
sub forma unui arbore ierarhic in memorie, dar spre deosebire de acesta, e mai flexibil si
foloseste mai putina memorie deoarece elementele sunt stocate direct ca variabile PHP (de tip
string si array) si astfel pot fi imediat utilizate. Foloseste un minim necesar de cod si are o forma
intuitiva a datelor.
Citire document XML cu SimpleXML
153
Urmatorul script preia si afisaza cateva date din acest document XML
154
Modificare document XML cu SimpleXML
Exemplu cu RSS
155
Functii SimpleXML
 simplexml_load_file("fisier.xml") - Incarca in memorie, ca obiect, datele din "fisier.xml"

 simplexml_load_string("sir_xml") - Incarca in memorie, ca obiect, datele din sirul "sir_xml"
 simplexml_import_dom("dom_node") - Transforma (preia) un obiect DOM (sau Nod dintr-un obiect
DOM) in obiect SimpleXML
 addChild("nume", "continut") - Adauga un element copil in cel curent (la sfarsit daca are si altele)
cu numele "nume" si continutul text "continut" (acesta e optional).
 addAttribute("nume", "valoare") - Adauga un atribut intr-un element
 children() - Preia intr-o matrice toti copii dintr-un nod (element).
 attributes() - Preia intr-o matrice toate atributele dintr-un element.
 count() - Returneaza numarul de copii dintr-un element.
 getName() - Returneaza numele unui element
156
 asXML("fisier.xml") - Transforma datele obiectului SimpleXML intr-un sir, iar daca parametrul
"fisier.xml" e specificat (e optional) scrie sirul in acel fisier.
Crearea unui fisier XML
Tema de casa.
157
- Creaţi un document XML cu structură minimală, pornind de la secvenţa
de cod (X)HTML data.
- Creaţi o schemă în care să reglementaţi scrierea unui document XML
care să înregistreze informaţii despre clienţii unei firme.
- Creaţi o schemă în care să reglementaţi scrierea unui document XML,
care să înregistreze informaţii despre conturile de useri şi calculatoare
dintr-o reţea de calculatoare.
158
Unitatea de invatare V.
Tehnologia JSP si Servlet
Tehnologia Java Server Pages (JSP) este cea mai populară metodă de a crea interfețe
Web pentru aplicațiile care rulează pe platforma Java, creată de Sun. Ea se bazează pe
tehnologia numită Java Servlets fiind, de fapt, o completare a acesteia in ideea creării cât mai
facile a paginilor Web dinamice.
Punctul central al tehnologiei o reprezintă așa-numitele pagini JSP care sunt, practic,
fișiere text care combina descrieri HTML cu cod Java. Paginile JSP sunt gestionate si accesibile
prin intermediul unui server de aplicații. Acesta primește cereri venite prin HTTP de la un
browser Web. Dacă o cerere referă o pagină JSP, serverul prelucrează local pagina respectivă
și, în funcție de conținutul acesteia, generează dinamic o pagină HTML pe care o trimite, ca
răspuns, browser-ului. Este important de reținut faptul că toate prelucrările legate de paginile
JSP se fac pe partea de server, acestea nefiind niciodată transmise in forma originală către client.
In plus, trebuie reținut faptul ca serverul de aplicații include si o mașină virtuală Java in care
rulează atât codul Java întâlnit in paginile JSP cât si obiectele inițiate de acesta. Procesul de
prelucrare pe partea de server a paginilor JSP presupune, de fapt, crearea unor clase Java Servlet
care urmează regulile scrise in pagina JSP și care includ codul Java din acestea. Clasele astfel
generate sunt apoi compilate si rulate in mașina virtuală amintită.
Un alt element important este că orice aplicație Web JSP trebuie să fie instalata
(deployed) in serverul de aplicații înainte de a putea fi rulata. Instalarea presupune copierea
paginilor JSP si a claselor Java folosite de acestea în locații bine stabilite de către serverul de
aplicație utilizat, eventual intr-o formă arhivată de tip .jar (Java Archive) sau .war (Web
Archive).
Un JSP este un document Web care specifică cum va fi prelucrată o cerere și modul de
generare a unui răspuns. O pagină JSP conține o parte statică, care reprezintă un șablon al
documentului care se generează, și una dinamică, dată de elemente specifice JSP. Acestea sunt:
 Directive standard;
 Acțiuni standard;
 Elemente de scripting;
 Tag-uri proprii.
Dacă servlet-urile sunt clase care generează documentele Web, JSP-urile sunt documente
Web care conțin secvențe de cod Java. De aceea, JSP-urile sunt considerate ca o extensie a
paginilor Web obișnuite. Această tehnologie este similară cu PHP și ASP.NET.
Avantajul adus de JSP față de servlet-uri îl constituie ușurința dezvoltării. Serverul Web
se ocupă de transformarea acestora în servlet-uri și apoi de compilarea lor. Acest lucru se
realizează fie la încărcarea aplicației de către serverul Web, fie la prima cerere a paginii JSP.
Având în vedere faptul că un JSP este transformat in servlet, putem spune că JSP-ul este o
extensie a servlet-urilor.
Tehnologia JSP, permite definirea de biblioteci, de noi tag-uri (similare celor din
XHTML) de către programator. Aceste biblioteci pot fi utilizate ulterior și în cadrul altor
aplicații. Mai mult, se separă rolurile programatorului și designerului: programatorul va stabili
care sunt tag-urile, iar designerul le va include în documentele Web, acesta nu va mai lucra cu
cod Java. Astfel, se separăm partea de funcționalitate (motorul aplicației) de partea de
vizualizare (interfața cu utilizatorul).
159
O aplicație Web poate conține atât servlet-uri cât și JSP-uri. Recomandarea este ca
paginile JSP să fie stocate în directorul web al aplicației în momentul dezvoltării.
Dacă oricărui document Web îi schimbăm extensia în jsp, va deveni un document JSP
valid.
Java Enterprize Edition
Este platforma java care pe langa toate functionalitatile oferite de Java Standard
Edition ofera mai multe pachete cu elemente specifice dezvoltarii web. Tenhologia EJB este
cea mai importanta din acest pachet.
Specificatiile “Enterprize Java Beans” cuprind un mod standard de a implimenta
logica server-side. Pe baza observatiei ca multe probleme se repeta in mai multe aplicatii s-a
dorit o metoda de a standardiza rezolvarea lor.
Platforma “Java Enterprize Edition” cuprinde instrumentele necesare pentru
dezvoltarea de aplicatii server-side.
Elemente de bază
Pentru inserarea de elemente JSP se pot utiliza marcatori XML sau specifici JSP. In
practică, se folosesc mai mult cei specifici JSP, datorită ușurinței de utilizare. Formatul XML
oferă avantajul de a putea valida și procesa pagina JSP cu un procesor XML obișnuit.
Fișierele care conțin elemente specifice JSP se numesc pagini JSP, iar paginile JSP care
sunt totodată și documente XML se numesc documente JSP. Pentru documentele JSP se mai
folosește si extensia jspx.
Comentariile în JSP sunt de forma: <%-- comentariu --%>
Spre deosebire de comentariile X(HT)ML, acestea nu vor fi incluse în pagina generată.
Mai mult, interiorul comentariilor JSP nu este procesat.
Directive
Directivele sunt mesaje către containerul JSP și nu generează output (informații pentru
răspuns). Sintaxa pentru directive este următoarea: <%@ directive … %> sau
<jsp:directive.directiva … />
Directiva page poate fi utilizată pentru a importa pachete și clase Java (la fel ca
instrucțiunea import), pentru a stabili o sesiune, a indica adresa paginii pentru eroare sau pentru
a indica dacă pagina curentă este pagină de raportare a erorilor.
Atributele cele mai des utilizate ale directivei page sunt următoarele:
 import – Specifică lista pachetelor și claselor care vor fi incluse pentru pagina curentă.
Separatorul utilizat este virgula, iar pachetele implicite sunt java.lang.*, javax.servlet.*,
javax.servlet.jsp.* și javax.servlet.http.*.
 session – Indică dacă se utilizează sesiuni HTTP. Valoarea implicită este true.
 buffer – Stabilește dimensiunea buffer-ului pentru ieșire, exprimată in kiloocteți.
Valoarea implicita este de cel puțin 8, iar sufixul kb este obligatoriu. În cazul în care nu se
dorește utilizarea unui buffer, se va folosi none. Buffer-ele sunt utilizate pentru creșterea
performanțelor operațiunilor cu dispozitivele periferice în general. În cazul paginilor JSP, este
recomandat lucrul fără buffer sau golirea frecventă a acestuia atunci când aplicația client
necesită recepționarea imediată a datelor generate.
 autoFlash – Indică dacă buffer-ul se golește automat. Valoarea implicita este true.
 info – Stabilește o descriere a paginii curente. Aceasta se poate obține din clasa
transformată în urma apelului metodei Servlet.getServletInfo( ).
160
 isErrorPage – Stabilește dacă pagina curentă este utilizată pentru raportarea erorilor.
Doar în cazul afirmativ va fi disponibilă variabila exception, care va furniza informații
referitoare la eroarea apărută. Valoarea implicită este false.
 errorPage – Indică url-ul paginii pentru tratarea excepțiilor neprinse.
 ContentType – Stabilește tipul MIME pentru documentul generat de către JSP. Tipul
implicit este text/html.
 pageEncoding – Stabilește setul de caractere utilizat pentru scrierea paginii JSP. În
cazul în care setul specificat nu este disponibil, se va utiliza ISO-8859-1.
Directiva include permite inserarea altor fișiere în paginile JSP. Aceasta este utilă
pentru inserarea mediilor de navigare, a antetului și subsolului paginilor comune pentru întregul
site (sau pentru mai multe pagini). Astfel, se poate administra mult mai ușor site-ul, întrucât se
evită duplicarea datelor: o modificare într-un singur fișier va fi vizibilă în mai multe pagini ale
site-ului. Se pot include și fișiere JSP, iar acestea, la rândul lor, vor fi procesate.
Singurul atribut al directivei include este file și acesta indică locația fișierului ce se dorește
a fi inclus, de exemplu: <%@include file=”antet.html” %>
Directiva taglib permite includerea unei biblioteci de tag-uri definite de programator. Se
specifică URI-ul corespunzător bibliotecii de tag-uri (atribut uri) și prefixul utilizat în pagina
Web (atributul prefix).
Declarații
Marcatorii pentru declarații permit specificarea de atribute și metode pentru clasa servlet-
ului generat. Sintaxa este următoarea: <%! declarații …. %> sau, în format XML:
< jsp:declaration> declarații </jsp:declaration>
Exemple de declarații: <%! int lungime %> sau <%! int getLungime( ) {return lungime;}
%>
Expresii
Expresiile JSP permit inserarea în fluxul de ieșire a unei valori rezultate în urma
evaluării unei expresii Java. Sintaxa este: <%= expresieJava %> sau, în format XML
<jsp:expression> expresieJava </jsp:expression>. Expresia nu trebuie să se termine cu punct
și virgulă. Exemplu: <%= (new java.util.Date( ) ).toLocalString( ) %>. Această expresie
inserează data curentă.
Scriplet-uri
Pentru utilizarea de cod Java se vor folosi scriplet-uri, pentru că în același fișier vor
exista atât codul corespunzător documentului Web (pentru partea de vizualizare), cât și cod
Java. În locul lor se pot utiliza tag-uri definite în biblioteci proprii. Exemplu de scriplet:
<%String categorie=request.getParameter(”categorie”);
categorii=baza_date.obtineCategorii( ); %>
Inițializarea și terminarea unui JSP

Mai întâi se executa metoda jspInit( ) – utilizată pentru inițializarea datelor, iar ultima
metodă este jspDestroy( ) – folosită pentru eliberarea resurselor.
Domenii de vizibilitate
Pentru formularea răspunsului pentru navigatoarele Web se face apel la o serie de obiecte.
Acestea sunt create în cadrul paginii JSP sau sunt predefinite și pot avea următoarele domenii
de vizibilitate:
 pagină (engl., page) – obiectele sunt vizibile doar în cadrul paginii curente;
161
 cerere (engl., request) – obiectele pot fi accesate pe tot parcursul rezolvării cererii: în
pagina curentă, în paginile care sunt incluse și în paginile la care s-a realizat redirectarea;
 sesiune (engl., session) – obiectele vor fi disponibile de-a lungul întregii sesiuni;
 aplicație (engl., application) – obiectele sunt vizibile în toată aplicația și pentru toate
sesiunile.
Obiecte implicite
Tehnologia JSP pune la dispoziția programatorilor o serie de obiecte implicite. Acestea
sunt prezentate în tabelul de mai jos:
Tabelul 1. Obiectele tehnologiei JSP
Domeniu
Obiect Tip de Descriere
vizibilitate
OObiect utilizat
out javax.servlet.jsp.JspWriter pagină
pentru scriere în
fluxul de ieșire
Ține informații la
request javax.servlet.ServletRequest cerere
cererea formulată
Ține informații
response javax.servlet.ServletResponse pagină referitoare la
răspunsul construit
Informații
session javax.servlet.http.HttpSession sesiune referitoare la
sesiunea curentă
Contextul paginii
pageContext javax.servlet.jsp.PageContext pagină
JSP curente
Referință la pagina
page java.lang.Object pagină
curentă
Informații despre
application javax.servlet.ServletContext aplicație
aplicație
Excepția neprinsă.
exception java.lang.Throwable pagină Doar în paginile de
tratare a erorilor
Clasa JspWriter este o clasă abstractă și derivată din java.io.Writer și conține în plus
următoarele metode:
 print( ) și println( ) – pentru afișarea tipurilor primitive, a șirurilor de caractere și a
obiectelor;
 newLine( ) – introduce caracterul pentru trecerea la o linie nouă;
 clear( ) și clearBuffer( ) – sunt folosiți pentru ștergerea informațiilor din buffer;
 flush( ) – golește buffer-ul trimițând datele la client;
 isAutoFlush( ) – indică dacă buffer-ul este golit automat;
 getRemaining( ) – returnează numărul de octeți din buffer care așteaptă să fie trimisi;
 getBufferSize( ) – returnează dimensiunea buffer-ului exprimată în octeți;
162
 close( ) – inchide fluxul.
De asemenea, clasa PageContext este abstractă și extinde clasa JspContext. Cea mai
utilizată metodă este getServletContext( ), care permite accesarea contextului servlet-ului
obținut în urma transformării paginii JSP curente.
Simple web applications can be designed using a two-tier architecture, in which a client
communicates directly with a server. In this tutorial, a Java web application communicates
directly with a MySQL database using the Java Database Connectivity API. Essentially, it is
the MySQL Connector/J JDBC Driver that enables communication between the Java code
understood by the application server (the GlassFish server), and any content in SQL, the
language understood by the database server (MySQL).
The application you build in this tutorial involves the creation of two JSP pages. In each of
these pages you use HTML and CSS to implement a simple interface, and apply JSTL
technology to perform the logic that directly queries the database and inserts the retrieved data
into the two pages. The two database tables, Subject and Counselor, are contained in the
MySQL database, MyNewDatabase, which you create by completing the Connecting to a
MySQL Database tutorial. Consider the following two-tier scenario.
The welcome page (index.jsp) presents the user with a simple HTML form. When a browser
requests index.jsp, the JSTL code within the page initiates a query on MyNewDatabase. It
retrieves data from the Subject database table, and inserts it into to the page before it is sent to
the browser. When the user submits his or her selection in the welcome page's HTML form, the
submit initiates a request for the response page (response.jsp). Again, the JSTL code within the
page initiates a query on MyNewDatabase. This time, it retrieves data from both the Subject
and Counselor tables and inserts it into to the page, allowing the user to view data based upon
his or her selection when the page is returned to the browser.
163
1. Crearea unui proiect web
File new Java WEB ---Java Applications
Se desfineste numele proiectului dupa care se alege serverul folosit cat si versiunea de
Java EE
164
Prin apasararea butonului Finish se creeaza proiectul web, pentru care structura este
cea de mai jos
165
Fisierul index.jsp creat are implicit continutul:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Se creeaza un fisier sursa java in pachetul “aplicatii” astfel
Se editeaza continutul fisierului text_ex.java, care va fi de forma:
166
Pentru a define metodele get si set corespunzatoare campurilor utilizare….click dreapta
in sursa java Refactor > Encapsulate Fields.
167
editarea fisierul index.jsp
168
Creating a JavaServer Pages File response.jsp
Fisierul response.jsp este in folderul Web Pages si arata:
169
Iar continutul este:
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<jsp:useBean id="ts" scope="page" class="test.a1" />
<jsp:setProperty name="ts" property="name" />
<h1>Numele definit este: <jsp:getProperty name="ts" property="name" />!</h1>

<jsp:useBean id="mybean1" scope="page" class="test.a2" />
<jsp:setProperty name="mybean1" property="name1" />
<h1>prenumele este <jsp:getProperty name="mybean1" property="name1" />!</h1>
<form name="revenire" action="index.jsp">
<input type="submit" value="revenire" />

</form>
</body>
170
</html>
Observatie: pentru a lucra cu stiluri se creeaza fisierul css astfel:
Pentru care se editeaza continutul
171
Acest fisier este utilizat in fisierele jsp in interiorul tagului head astfel
<link rel="stylesheet" type="text/css" href="style.css">
Un servlet este un cod de program Java care poate fi accesat printr-o interfață standard
într-un serviciu de rețea, asemenea programelor CGI aflate pe un site Web. Servleturile permit
unui serviciu de rețea, cum ar fi un server Web sau un server Ftp, să fie extins dinamic pentru
a furniza noi facilități.
Unul din scopurile uzuale în care sunt folosite servleturile este de a crea o punte între un
browser Web și o bază de date încorporată; browserul Web se conectează la un server Web,
care execută un servlet care se conectează la baza de date și execută cererea browserului.
Serverul Web nu trebuie să aibă suport intern pentru accesul la baza de date; în schimb el poate
fi dinamic extins cu servleturi care vor executa aceste funcții. De fapt, servleturile sunt un
mecanism potrivit pentru a implementa aproape orice serviciu de acces în rețea.
Servleturile au mecanism curat pentru implemetarea unor funcții variate. Servleturile pot fi
folosite în locul tradiționalelor aplicații CGI, dar bineînteles cu îmbunătățirile aduse de limbajul
de programare Java. Servleturile întrec tradiționalul CGI, prin colaborarea între aplicații și prin
îmbunătățirea perfomanțelor. Servleturile pot de asemenea să fie folosite pentru a genera
dinamic pagini HTML.
172
API-ul servlet-urilor
Toate servleturile trebuie să implementeze interfaţa Servlet. Această interfaţă descrie
mecanismul exact prin care serverul reţea va interacţiona cu servleturile, incluzând iniţializările,
finalizarea şi răspunsul procesului.
Detalii despre răspunsul fiecărui client sunt date de servlet prin intermediul interfeţei
“ServletRequest” (figura 1). Această interfaţă descrie proprietăţile generale ale cererii care a
fost făcută către servlet. Servletul rezolvă cererea şi apoi răspunde clientului prin intermediul
interfeţei ServletResponse. Această interfaţă are un mecanism pentru ca servletul să seteze
tipurile de date pentru răspuns şi să scrie în fişierul de ieşire acest răspuns.
Figura1. Model de servlet cerere/răspuns

Ciclul de viață al servlet-ului
Servletul API specificat defineşte ciclul de viaţă al servletului. Ciclul de viaţă începe când
un servlet este iniţializat, după care cererea este prelucrată, şi se termină atunci când servletul
este distrus. În general, un servlet este creat o singură dată, prima dată când clientul o cere.
Înainte ca această primă cerere să fie preluată, servletul este automat iniţializat de serviciul de
reţea cu diferiţi parametrii predefiniţi. Când serviciul de reţea decide să dezinstaleze servletul,
este apelat un destructor, astfel încât servletul să elibereze resursele pe care le-a ocupat
(figura2).
Figura2. Ciclul de viață al servlet-ului
Interfața Servlet
Interfața Servlet defineste modurile standard prin care un server de reţea poate accesa
un servlet. Toate servleturile funcţionează sub paradigma cerere/raspuns; totuşi, des,
servleturile menţin date individuale despre clienţi deci nu sunt chiar aşa de statice cum
sugerează interfaţa de bază.
173
Deşi toate servleturile trebuie numaidecât să implementeze această interfaţă, multe vor
profita de facilităţile date de mai multe implementări specifice a acestei clase cum ar fi
“GenericServlet” ori “HttpServlet”, şi astfel vor respecta API-ul acestor clase specifice.
Metode
Următoarele metode definesc interfaţa de bază a unui servlet:
void init(ServletConfig config) throws ServletException . Această metodă dă unui
servlet o şansă pentru a executa orice operaţii de startup cerute, înainte de a servi cererea.
Exemple pot fi alocarea memoriei, stabilirea conexiunii prin reţea, si altele. Această metodă
este apelată o dată şi numai o dată şi este terminată atunci când prima cerere este preluată.
Cererile care sunt primite înainte ca metoda init() să fie terminată vor fi blocate până când se
va termina cu această metodă.
Parametrii ServletConfig conţin informaţii de iniţializare pentru servlet. Chiar dacă nu
sunt folosiţi, acest parametru ar trebui ţinut pentru a fi returnat de metoda getServletConfig().
Multe implementări standard a interfeţei Servlet, cum ar fi GenericServlet, au grijă de acest
lucru automat.
void service (ServletRequest request, ServletResponse) throws ServletException,
IOException. Metoda service() este apelată de către serviciul de reţea care găzduieşte
servletul de fiecare dată când clientul face o cerere către servlet. Servletul poate citi din cerere
date şi parametrii prin intermediul parametrului de tip ServletRequest, request, şi ar trebui să
trimită răspunsul său înapoi prin intermediul parametrului response de tip ServletResponse.
void destroy(). La un moment dat după ce un servlet a terminat de servit cererea, gazda
poate decide să descarce servletul. Pentru acest lucru se apelează metoda destroy().
Când un servlet este distrus, el trebuie să elibereze toate resursele pe care le deţine şi să
salveze orice informaţie care trebuie să fie ţinută permanent. Multe servleturi menţin
conexiunile deschise cu resurse cum ar fi baze de date, servere RMI, ori fişiere. Aceste
resurse ar trebuie închise şi eliberate când metoda destroy() este apelată.
ServletConfig getServletConfig(). Această metodă trebuie să întoarcă un obiect
ServletConfig care ar fi trebuit salvat de metoda init().
String getServletInfo(). Această metodă ar trebui să returneze informaţii generale
despre servleturi cum ar fi autor, versiune, si copyright.
Interfaţa SingleThreadModel
Implicit, o singură instanţă a unui servlet poate fi apelată pentru a prelua cereri multiple
concurenţiale. Asta înseamnă că în general, autorii de servleturi trebuie să aibă grijă de
siguranţa firelor de execuţie. Dacă se implementează interfaţa SingleThreadModel, API-ul
servletului garantează că două fire de execuţie nu vor executa concurenţial metoda service() în
aceaşi instanta a unui servlet. Această interfaţă nu are metode.
Intefaţa ServletConfig
Această interfaţă este folosită de un serviciu de reţea pentru a transmite informaţii de
configurare unui servlet atunci când este iniţializat. ServletConfig este transmis într-un
servlet în metoda init() şi poate fi accesat în timpul unei cereri cu metoda getServletConfig().
174
Interfaţa ServletRequest
Interfaţa ServletRequest descrie informaţiile cerute care sunt transmise către metoda
service().
O cerere este alcătuită formal din trei părţi: Cererea URL, care se identifică cu obiectul
cerut; parametrii cererii, care au detalii despre cerere; şi corpul cererii, care este alcătuit din
datele specifice aplicaţiei cererii.
Interfaţa ServletResponse
Interfaţa ServletResponse descrie cum un răspuns poate fi întors clientului. Toate
răspunsurile sunt de tip MIME; un tip MIME este asociat cu un volum de date. Acest tip
indică cum vor trebui interpretate datele de către client.
Interfaţa ServletContext
Interfaţa definește un set de metode pe care un servlet le poate folosi pentru a comunica
cu containerul său. Prin această interfaţă, servletul poate înregistra evenimente importante şi
poate accesa informaţii specifice reţelei de care aparţine serverului.
Un context al unui servlet poate fi obţinut prin apelarea metodei getServletContext() în
configuraţia iniţială a servletului.
void log(String message). Această metodă înregistrează un eveniment servlet într-un
fişier de înregistrari a servletului.
void log(Exception ex, String message). Aceasta este o metodă folositoare pentru a
înregistra urma unei erori şi mesajele de eroare în fişierul de înregistrări al servletului.
void log(String message, Throwable throwable). Aceasta este varianta din JSDK.
Enumeration getServletName(). Această metodă întoarce o enumeraţie a numelor
servleturilor găzduite de server. În general nu trebuie folosită această metodă.
Servlet getServlet(String name) throws ServletException. Această metodă întoarce
servletul cu respectivul nume, ori null dacă nu este găsit. În general nu trebuie folosită această
metodă.
String getRealPath(String Path). Această metodă transformă o cale virtuală folosind
reguli locale, şi întoarce calea fişierului dependent de platformă.
String getMimeType(String file). Această metodă întoarce tipul MIME al fişierului
specificat, ori null dacă nu este cunoscut.
String getServletInfo(). Această metodă întoarce informaţii despre serverul care
găzduieşte servletul, incluzând numele său, şi numarul versiunii.
Object getAttribute(String name). Această metodă întoarce un nume, un atribut
dependent de server. Această metodă poate fi folosită pentru ca să se obţină servicii specifice
serverului.
Clasa HttpServlet
Atunci când se scrie un servlet care va fi invocat printr-o cerere Http, se va extinde
aproape întotdeauna clasa HttpServlet. Această clasă implementează multe detalii folositoare
de preluare a cererilor Http, şi are multe clase utilitare pentru primirea de cereri HTTP şi
pentru trimiterea răspunsurilor HTTP formatate corespunzător.
Clasa HttpServlet este o subclasă a clasei GenericServlet, şi că are toate facilităţile
clasei respective.
175
Definirea metodelor HTTP
Cererea clientului HTTP poate fi de două feluri : cerere simplă sau completă.
În general, programul trebuie să utilizeze cereri complete, în afara cazului în care se
lucrează cu HTTP, versiunea 0.9. Singura metodă care utilizează cererea simplă este GET,
utilizată pentru a regăsi o resursă. Sintaxa este : GET URI <CR/LF>
În schimb, o cerere completă începe cu o linie de cerere, <CR/LF>, apoi informaţia
codificată sub forma unui antet (optional), <CR/LF> şi corpul entităţii (optional). Linia de
cerere are sintaxa :
Metoda Cerere-URI versiune-HTTP <CR/LF>
Diferenţa între o cerere simplă şi una completă este prezentă câmpului versiune HTTP şi
posibilitatea de a specifica mai multe cereri HTTP (nu numai GET, ci şi HEAD, POST, ...).
Metoda GET cere serverului Web să regăsească informaţia identificată de URI. Serverul
obţine resursa cerută de client utilizând adresa resursei. Metoda GET devine GET condiţional
dacă mesajul cerere trimis de client include un câmp antet If-Modified-Since. O metodă GET
condiţional cere ca serverul să transfere resursa specificată numai dacă a fost modificată de la
data specificată în câmpul If-Modified-Since. În cazul în care clientul a transferat deja obiectul
şi a ascuns entitatea GET condiţional reduce gradul de utilizare al reţelei pentru că nu mai este
nevoie de un transfer inutil.
Metoda HEAD este similară lui GET, cu excepţia faptului că serverul nu returnează un
corp de entitate în răspuns. Aplicaţiile utilizează HEAD pentru a obţine informaţii (în special
de antet) despre resursa identificată de URI, fără a transfera corpul entităţii. Informaţia de antet
(metainformatie) trebuie să fie aceeaşi cu informaţia trimisă de server ca răspuns la o cerere
cu metoda GET. Aplicaţiile utilizează metoda HEAD pentru a testa validitatea, accesibilitatea
şi modificările legăturilor hipertext.
Metoda POST cere serverului Web să utilizeze obiectul din cerere ca resursă identificată
de URI în linia de cerere. Deci clientul spune serverului Web “aceasta este noua sursă pe care
o utilizaţi cu URI-ul pe care vi l-am furnizat”. În majoritatea cazurilor, POST crează sau
înlocuieşte o resursă asociată cu URI-ul trimis cu metoda POST. Totuşi, un POST completat cu
succes nu cere ca entitatea să fie resursa pe serverul de origine (serverul care recepţionează
cererea completă) sau să fie accesibilă pentru o viitoare referinţă. Deci, e posibil ca acţiunea
realizată de metoda HTTP POST să nu furnizeze o resursă identificabilă prin URI. În acest caz,
serverul va returna un cod de stare 200 (OK) sau 204 (fara continut), depinzând de includerea
(sau nu) în răspuns a unui obiect care să descrie rezultatul.
Dacă un client crează o resursă pe un server de origine, clientul trebuie să creeze un cod
de stare 201 care conţine un obiect (text, HTML, ...) care descrie starea cererii.
Toate cererile HTTP POST necesită un câmp Content Length valid. Un server HTTP
trebuie să corespundă cu un cod de stare 400 (cerere eronata) dacă nu poate determina lungimea
conţinutului mesajului cerere.
Alte metode HTTP : CHECKIN, CHECKOUT, DELETE, LINK, PUT, SEARCH,
SHOWMETHOD, SPACEJUMP, TEXTSEARCH şi UNLINK. Acestea sunt mai puţin
utilizate şi nu toate serverele permit aceste metode.
Pentru furnizorii de servicii Web care oferă servicii bazate pe aplicaţii Web dinamice,
aplicaţia este cheia afacerii şi tehnologia folosită în serverul de aplicaţie poate avea un impact
major asupra rezultatelor obţinute în afacere.
Containerul Web este parte a unui server care gestionează servlets, Java Server Pages
(JSP) pecum şi alte componente Web. Această tehnologie a containerului Web joacă un rol vital
în determinarea performanţelor si capacităţii de adaptare a componentelor aplicaţiei Web.
Există o legătură directă între această tehnologie folosită de către dezvoltatori şi performanţa şi
agilitatea aplicaţiilor. Compania Sun susţine că serverul GlassFish este de departe mult mai
extensibil, mai modular, mai uşor de folosit şi mai adaptabil decât serverul de aplicaţii Apache
176
Tomcat oferind în acelaşi timp performanţe foarte bune. Cu suport pentru clustering, mesaje,
servicii enterprise, precum şi alte caracteristici cheie care lipsesc în Tomcat, şi cu suportul
companiei Sun şi sprijinul unei mari şi înfloritoare comunităţi, GlassFish este o alternativă
superioară pentru cei care dezvoltă aplicaţii Web.
GlassFish este un server open source, dezvoltat de către Comunitatea GlassFish, care a
fost lansat de către compania Sun în anul 2005. În anul 2008 versiunea a doua a serverului
(GlassFish v2) a atins aproape 9 milioane de descărcări şi 300.000 de înregistrări. Versiunea
actuală, GlassFish v3 Prelude, oferă o arhitectură modulară în mod implicit, care permite
dezvoltarea aplicaţiilor Web in mod rapid şi cu suport pentru limbaje dinamice. Este o platformă
excelentă pentru implementarea aplicaţiilor Web susţinută de Java sau de limbaje dinamice,
cum ar fi JRuby.
GlassFish Enterprise Server v2 împreună cu Java Enterprise Edition (EE) 5 adaugă un
plus de calitate opțiunilor disponibile pentru comunitatea open source ridicându-se totodată la
standardele impuse de către compania Sun.
Tomcat a fost dezvoltat la Apache, de către un grup de dezvoltatori de la Sun şi Jserv, iar
codul iniţial a venit de la Sun. A devenit implementare de referinţă pentru primele versiuni de
servlets şi pentru specificaţii JSP. Tomcat a jucat un rol vital în începutul dezvoltării aplicaţiilor
de server oferite de Java. A fost disponibil sub licenţă open source încă de la început şi a
contribuit la sporirea popularităţii sale în cadrul organizaţiilor de tip Enterprise.
În general, aplicaţiile care rulează pe Tomcat, vor rula neschimbate şi pe GlassFish.
Cu toate acestea există diferenţe importante care afectează în mod direct performanţele,
scalabilitatea şi productivitatea aplicaţiilor.
La toate nivelurile, GlassFish este pur și simplu o opțiune mult mai bună decât Tomcat
atât pentru dezvoltatori cât și pentru companii:
 GlassFish este o colectie de containere Java EE, nu doar un Container Web.
 GlassFish este mult mai extensibil și mai modular decât Tomcat și dezvoltatorii pot
profita mult mai ușor de capabilitățile acestuia, cum ar fi: mesaje, clustering, failover,
gestionare de sesiuni, EJB, JMS, JSR, etc.
177
Aplicatii propuse
1. Realizaţi un formular care sa permită introducerea numelui, prenumelui şi a adresei e-mail. La apăsarea
butonului de submit datele introduse în formular să apară într-o fereastră nouă ca în exemplul: „Studentul
Popescu Ion poate fi contactat la adresa adresamail@yahoo.com”.
2. Creaţi un fişier php care preia dintr-un formular html numele şi parola. Se verifică dacă numele este
student şi parola Titu_Maiorescu. În caz afirmativ se afişează mesajul OK, altfel reafişează formularul
însoţit de un mesaj de eroare.
3. Să se creeze o funcţie javascript care afişează pe ecran ce buton radio s-a bifat.
4. Realizaţi un script care să afişeze în pagină data curentă.
GRILĂ 9. In PHP numele variabilelor trebuie să

înceapă cu:
1. O clasa de stiluri se apelează prin: a. _
a. <DIV ID=”clasa”> b. $
b. <DIV CLASS=”clasa”> c. ?
c. <DIV STYLE=”clasa”> 10. Alegeţi varianta corectă pentru
2. Alegeţi atributul corect pentru tagul introducerea unei funcţii javascript:
<table> a. function suma numere()
a. color b. function suma_nr()
b. align c. sumanumer
c. text
3. Introducerea unei imagini se realizează
prin:
a. <a src=”x.jpg”>
b. <a href=”x.jpg”>
c. <img src=”x.jpg”>
4. Pentru afişarea unui mesaj in bara de stare
putem folosi:
a. onChange()
b. window.status OK
c. document.title
5. O zonă de text se introduce prin:
a. <input type=”textarea”>
b. <textarea>
c. <select textarea>
6. Culoarea de fond a unei pagini Web se
stabileşte prin proprietatea:
a. windows.status
b. document.fgColor
c. document.bgColor
7. O listă de selecţie se introduce prin

instrucţiunea:
a. <input type=”select”>
b. <select>
8. <form select>Atributul checked ataşat unui
buton radio are ca efect:
a. Bifarea implicită a butonului
b. Nu există acest atribut
c. Trebuie ataşat obligatoriu la toate butoanele
radio din acelaşi grup
178
1. Realizaţi un script care să deschidă o fereastră cu dimensiunile 300x100 pixeli în care să apară textul „FACULTATEA
STIINTA SI TEHNOLOGIA INFORMATIEI” astefel incat proprietatile textului afisat vor fi– centrat, inclinat si de
culoare albastra.
2. Creaţi un fişier php care preia dintr-un formular html campurile nume şi parola. Se verifică dacă numele este student
şi parola Titu_Maiorescu. În caz afirmativ se afişează mesajul ”Bun venit”, altfel se reafişează formularul însoţit de un
mesaj de eroare.
3. Să se scrie o funcţie javascript pentru calculeaza suma primelor n numere naturale. Numarul n este preluat dintr-o
caseta de text, iar rezultatul este afisat într-o altă casetă de text ca in figura alaturata.
4. Scrieţi codul html care împarte fereastra browser-ului în două

cadre verticale. În primul cadru se încarcă fişierul student.html, iar în
al doilea cadru se încarcă o pagina care contine doar data curenta.
5. Realizaţi un formular care sa permită introducerea numelui, prenumelui şi a adresei de e-mail. La apăsarea butonului
de submit datele introduse în formular să apară într-o fereastră nouă ca de exemplu: Studentul “Popescu Ion” poate fi
contactat la adresa “popescu.ion@yahoo.com”.
6. Să se creeze o funcţie javascript care afişează pe ecran, care buton radio s-a bifat dintr-un grup cu 4 elemente (vezi
figura alaturata).
Model bilet examen
1. Să se realizeze un script care contine un grup cu 2 butoane radio, care
schimbă culorile textului din pagina, prin selectarea succesiva a acestora (1
pct).
2. Realizati un fisier css care contine minim 3 stiluri, fiecare cu minim 3
proprietati diferite (1 pct);
3. Realizati un fisier html, care contine un formular cu 2 casete de text, 3
checkbox-uri, 2 grupuri de butoane radio si o lista de selectie. Prin apasarea
butonului de tip “button” cu value=“afiseaza datele introduse”, datele
preluate din formular vor fi afisate in caseta “rezultat”, care va fi de tip
“textarea”. Se vor utiliza si stilurile din fisierul definit la punctul 2 (3 pct).
4. Creaţi un fişier php care preia toate datele din formularul precedent, cu
ajutorul butonului “submit” si le adauga in tabela “text” din baza de date
“aplicatie” (2 pct).
5. Realizaţi un script care utilizeaza obiectele document, window şi Date (2
pct).
Model bilet examen
1. Realizati un script php care utilizează funcţiile print_r, explode şi

implode.
2. Realizaţi un formular care sa permită introducerea numelui, prenumelui
şi a adresei de e-mail. La apăsarea butonului de submit datele introduse în
formular să apară într-o fereastră nouă, cu urmatorul continut : Studentul
“Popescu Ion” poate fi contactat la adresa “popescu.ion@yahoo.com”.
3. Realizati un script ce derulează în pagină 5 imagini, din 5 în 5 secunde.
4. Explicati cel putin 4 functii php care au efect asupra tabelor dintr-o baza
de date MySql.
Nota pentru proba scrisa se calculeaza: 4 întrebări * 2 puncte +2 puncte

din oficiu =10.
În dorinţa de ridicare continuă a standardelor desfăşurării activitatilor dumneavoastra, va rugăm să completaţi acest chestionar
şi să-l transmiteţi indrumatorului de an.
Disciplina: ________________________
Unitatea de invatare/modulul:__________________
Anul/grupa:__________________________
Tutore:_________________________
Partea I . Conţinut
1. Care dintre subiectele tratate in aceasta unitate/modul consideraţi că este cel mai util şi eficient? Argumentati raspunsul.
2. Ce aplicatii/proiecte din activitatea dumneavoastra doriţi să imbunatatiti/modificaţi/implementaţi în viitor în urma

cunoştinţelor acumulate în cadrul acestei unitati de invatare/modul?
3. Ce subiecte consideraţi că au lipsit din acesta unitate de invatare/modul?
4. La care aplicatii practice ati intampinat dificultati in realizare? Care credeti ca este motivul dificultatilor intalnite?
5. Timpul alocat acestui modul a fost suficient?
6. Daca ar fi sa va evaluati cunostintele acumulate din parcurgerea unitatii de invatare/modului, care este nota pe care v-o alocati,
pe o scala de la 1-10?. Argumentati.
Partea II. Impresii generale
1. Acest modul a întrunit aşteptările dumneavoastră?
În totalitate În mare măsură În mică măsură Nu
2) Aveţi sugestii care să conducă la creşterea calităţii acestei unitati de invatare/modul?
3) Aveţi propuneri pentru alte unitati de invatare?Argumentati.
Vă mulţumim pentru feedback-ul dumneavoastră!

Tehnologii Web

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tehnologii Web

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSITATEA TITU MAIORESCU

 Deprinderea conceptelor esențiale legate de programare și Internet;

 Dezvoltarea abilitatilor pentru realizarea site-urilor Web folosind tehnologiile HTML 5,

 UNITATEA DE INVATARE 2 - JAVASCRIPT si

 UNITATEA DE INVATARE 3 - PHP SI MYSQL

 UNITATEA DE INVATARE 4 - CONSTRUIREA

 UNITATEA DE INVATARE 5 - TEHNOLOGIA JSP

Fiecare student va realiza un site care va cuprinde elemente din

După parcurgerea si însusirea acestei teme, studentul va fi capabil:

Cuvinte cheie: WWW, FTP , HTTP, IRC, HTML, W3C.

Internetul, ca şi serviciul WWW, lucrează în tehnologia client/server, astfel:

HTML (HyperText Markup Language) este văzut ca un limbaj de realizare a hypertextului.

Un URL conţine următoarele informaţii:

 E-mail care permite schimbul de mesaje între utilizatori

1 Crearea paginilor web folosind HTML

Validarea documentelor HTML

<!DOCTYPE HTML PUBLIC ‘‘-//W3C//DTD HTML 4.01//EN”

HTML 3.2 <!DOCTYPE HTML PUBLIC ‘‘-//W3C//DTD HTML 3.2 Final//EN”>

HTML 1.0 <!DOCTYPE html PUBLIC ‘‘-//IETF//DTD HTML 1.0//EN”>

<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.0 Strict//EN”

<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.1//EN”

<META NAME= “meta nume” CONTENT= “conţinut”>

Exemplu de utilizarea a acestei etichete în antetul unei paginii

1.1 Tag-uri de bază

Tabelul 2 prezintă corespondenţa dintre caracterele speciale şi codul acestora.

Culoarea de fond şi culoarea textului

Culorile specificate în hexazecimal sunt recunoscute de toate browserele.

Tabelul 3. Utilizarea codurilor hexa

Utilizarea culorilor pentru tagul <body>

NUME TAG EFECT

O legătură către un site particular

1.2 Utlizarea ancorei

Alegerea culorilor pentru legaturi

1.3 Utilizarea imaginilor

Alinierea unei imagini

Alinierea textului în jurul imaginii

Imagini pentru fundalul unei pagini

Imagini folosite ca legături

1.4 Crearea tabelelor

Definirea culorilor de fond pentru un tabel

Utilizarea culorilor în tabele

Dimensionarea celulei unui tabel

Dimensionarea unui tabel

Alinierea conţinutului unei celule

Dimensionarea exacta a celulelor unui tabel

Tabele de forme oarecare

Celule vide ale unui tabel

Tabelul 4. Atributele tagului table

<table> align = “center”/ “right” / “left”

bgcolor =‘‘culoare” defineşte culoarea de fundal a tabelului

<tr> align = “center”/ “right” / “left” = aliniaza informatia in cadrul randului

height = “nr” / “%” stabileste inaltimea randului

<td> align = “center” / “right” / “left” = aliniaza textul în celulă

< img src= “harta.gif” usemap= “#numele hartii”>

În interior delimităm zonele pentru clic pe mouse astfel:

“poly” coords=‘‘x1,y1,x2,y2,x3,y3,x4,y4....xn,yn” href= “nume fisier.html”

Harta se inchide cu eticheta: </map>

Exemplu de pagina ce conţine eticheta <map>

 pentru cerc definim valorile: 150, 150, 100.

Formular cu câmp de editare şi buton de expediere

Câmp de editare de tip ‘‘password”

Câmpuri de editare multilinie

1.5 Lista tagurilor noi in HTML 5.0

Elemente de stocare pe web