Sunteți pe pagina 1din 120

UNIVERSITATEA TITU MAIORESCU

FACULTATEA DE INFORMATICA

TEHNOLOGII WEB

Mironela Pîrnău

- 2010 -

1
Cuprins
Modulul I. CREAREA PAGINILOR WEB CU HTML
Modulul II. JAVASCRIPT
Modulul III. CONSTRUIREA DOCUMENTELOR XML
Modulul IV. PHP şi MySQL
Modulul V. Dezvoltarea si apelarea servleturilor
Bibliografie
Modele bilete examen

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, etc. 30%
- teste pe parcursul semestrului 10%

Conditia de participare la examen, este ca fiecare


student, sa realizeze un site, care va cuprinde minim 3
“pagini” pentru fiecare modul (Html, JavaScript, XML,
Php si MySql). Codul sursa al paginilor, vor contine si
“comentariile corespunzatoare”.

2
Modulul I. CREAREA PAGINILOR WEB CU HTML
Crearea unei pagini Web folosind HTML presupune:
- Editarea şi salvarea fişierului cu extensia .html sau .htm folosind:
- un editor de texte obişnuit (Notepad, Wordpad, Word, etc.);
- un editor de texte dedicat (Front Page, Dreamwaver, Homesite, HotDog, HotMetal, etc.)
- Rezolvarea referinţelor conţinute în pagina Web (legături, imagini, sunete, aplicaţii Java, etc.)
După cum ne putem da seama încă din denumirea sa, HTML-ul nu este un limbaj de programare ci
mai degrabă un “limbaj de marcare a textului”, un set de coduri speciale care se inserează într-un
text, pentru a adăuga informaţii despre formatare şi despre legături. 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 în
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
demarcat 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ă poate fi scrisă atât cu litere mari, cât şi cu litere mici.
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 <HEAD>…
</HEAD>, ca în exemplul:
<html>
<head>
<title> Prima mea pagină Web </title>
</head>
<body>
My first page !
Prima mea pagina !
</body>
</html>
Sfârşitul de linie
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: &nbsp;.

Culoarea de fond şi culoarea textului


O culoare poate fi precizata în doua moduri:
- Printr-un nume de culoare. 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.

3
- Prin construcţia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale şi pot
lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536
de culori. De exemplu, construcţia #ff0000 defineşte culoarea roşie (red), #00ff00 defineşte
culoarea verde (green), #000000 reprezintă negru, iar #ffffff reprezintă alb.
Culoarea fondului paginii Web se stabileşte în cadrul etichetei <body> prin atributul bgcolor.
Culoarea textului paginii Web se stabileşte în cadrul etichetei <body> prin atributul text.
Următorul exemplu prezintă o pagina cu fondul de culoare albastra şi textul de culoare albă.
<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor=”blue” text=”white”>
Fond de culoare albastra si text de culoare alba.
</body>
</html>
Stiluri pentru blocurile de text
Unui text i se pot aplica diverse stiluri prin folosirea marcajelor:
<b>...</b> - bold, îngroşat
<i>...</i> - italic, înclinat
<u>...</u> - underline, subliniat
<sub>...</sub> - subscript
<sup>...</sup> - superscript
<s>...</s>, <strike>…</strike> - strike, tăiat
<html>
<head>
<title>Stiluri pentru blocuri de text </title></head>
<body>
<b>Text scris cu caractere ingrosate.</b><br>
<i>Text scris cu caractere italice.</i>
<br> În aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscirpt.<br>
<strike>Aceasta linie este în intregime sectionata de o linie orizontala.</strike> <br>
În aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s> sectionat.
</body>
</html>

Formatarea textului
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;

4
- 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"
<html>
<head>
<title> Blocuri paragraf</title></head>
<body>
Prima linie
<p> Linie generata de un paragraf (implicit paragraful este aliniat la stanga).
<p align="right"> Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la
dreapta.Paragraf aliniat la dreapta. Paragraf aliniat la dreapta.Paragraf aliniat la
dreapta.Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat în centru.Paragraf aliniat în centru.Paragraf aliniat în
centru.Paragraf aliniat în centru. Paragraf aliniat în centru.Paragraf aliniat în centru.Paragraf
aliniat în centru.
</body></html>
Blocuri de titlu
Intr-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 .
<html>
<head>
<title> Blocuri de titlu</title></head><body>
<h1 align="center"> Titlu de marime 1 aliniat în centru </h1>
<h2 align="right"> Titlu de marime 2 aliniat la dreapta. </h2>
<h4> Titlu de marime 4 aliniat la stanga (implicit) </h4>
<h6> Titlu de marime 6</h6>
</body></html>

Blocuri titlu
Linii orizontale
Intr-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>:
- align permite alinierea liniei orizontala. Valorile posibile sunt " left " ," center " şi " right ";
- width permite alegerea lungimii liniei;

5
- size permite alegerea grosimii liniei;
- noshade când este prezent defineşte o linie fără umbra;
- color permite definirea culorii liniei .
<html><head><title> Linii orizontale</title>
</head><body>
<h1 align="center"> Tipuri de linii orizontale </h1> O linie implicita alinierea stanga, latime
100%, grosime 2 cu umbra. <hr>
Urmeaza o linie aliniata în centru , de latime 50%, grosime 5 pixeli , fara umbra.
<hr align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata la dreapta , de
latime 150 de pixeli, grosime 12 pixeli , de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body></html>

Linii orizontale
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 intr-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.
<html>
<head>
<title> Caracteristicile fontului</title>
</head>

6
<body>
Aceste linie este scrisa cu caractere normale.
<br>
<font color="red">Aceasta linie este rosie.</font>
<br>Aici<font color="green">fiecare</font>
<font color="blue">cuvant</font>
<font color="yellow">are</font>
<font color="cyan">alta</font>
<font color="#3478fa">culoare.</font>
<br><font face="monospace">Linie scrisa cu caractere monospatiate.</font>
<br> <font face="arial">Linie scrisa cu caractere arial.</font>
Aceste linie este scrisa cu caractere normale. <br>
<font size="5">Fonturi de marime 5.</font> <br>
<basefont size="4">Fonturi de marime 4.</font> <br>
<font size="-3">Fonturi de marime 1.</font> <br>
<font size="+2">Fonturi de marime 4.</font> <br>
</body>
</html>

Configurarea fonturilor
Liste
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 printr-o lista de definiţii, care este inclusa intr-o pereche de marcaje de lista de
<dl>...</dl> (de la "definition list" = lista de definiţii)
definiţii:
Observaţii:

- <dt> (de la "definition term" = termen definit);


Un termen al listei este iniţiat de eticheta

- 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ă;
<html><head><title>listex_1</title></head>
<body><h1 align=center>O lista de definitii</h1><hr>
<dl>
Glosar de termeni de World Wide Web
<dt><b>hypertext</b>
<dd>- o interconectare Web de informatii de tip text, în care orice cuvant sau fraza poate face
legatura catre un alt punct din document sau catre un alt document
<dt><b>date</b>
<dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii care sunt

7
date cu un anumit inteles sau valoare
<dt><b>informatie</b>
<dd>- sub-setul de date care are efectiv semnificatie şi care este util la momentul curent
</dl>
</body></html>

Listă de definiţii
Liste neordonate
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> ... </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)

<html>
<head><title>listex_2</title></head>
<body><h1 align=center>O lista neordonata</h1><hr>
Glosar de termeni de World Wide Web
<ul type’”square”>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red </ul>
</body>
</html>

Listă neordonată
Liste ordonate

8
O lista ordonata 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
Următorul exemplu este o lista ordonata cu cifre romane :
<html>
<head><title>listex_5</title></head>
<body><h1 align=center>O lista ordonata cu cifre romane</h1><hr>
<ol type="I">Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>

Listă ordonată
Tag-ul <ol> poate avea un atribut start care stabileşte valoarea iniţiala a secvenţei de ordonare.
Valoarea acestui atribut trebuie sa fie un număr întreg pozitiv.
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 rapida 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 catre 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 indicata 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 intre etichetele <a>...</a>.
Prezenta etichetei de sfârşit </a> este obligatorie.
<html><head>
<title> Comutarea intre doua pagini</title>
</head>
<body>

9
<h3>Pagina 1 </h3>
<a href=" ex_1.14b.html">
Link catre pagina 2 </a>
</body></html>
O legătură către o pagina aflata pe acelaşi disc local
Daca pagina referită se afla pe acelaşi disc local, dar într-un alt director atunci pentru a preciza
poziţia ei în structura de directoare se poate folosi adresarea relativă plecând de la directorul curent .

Legături prin adresare relativă


Ancore
Î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ă catre "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".

<html>
<head>
<title> Ancore definite în acelasi document si în alt document</title>
</head>
<body>
<h3>Ancore definite în acelasi document si în alt document </h3>
<a href="#ancora1">Link catre ancora 1 </a>
<a href="legaturi.html#anc">Link catre o ancora din alt document </a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br
><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><b
r><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br>
<a name="ancora1">ancora 1</a>
</body>
</html>
Alegerea culorilor pentru legaturi
În mod prestabilit se utilizează trei culori pentru legaturi:
- o culoare pentru legaturile nevizitate (nu s-a efectuat nici un clic pe ele)
- o culoare pentru legaturile vizitate (s-a efectuat cel puţin un clic pe ele)
- o culoare pentru legaturile active (când se execută clic şi se ţine apăsat).
Aceste atribute pot fi stabilite cu ajutorul a trei 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.
<html>
<head>

10
<title> Culori pentru lagaturi</title>
</head>
<body link="blue" vlink="green" alink="red">
<h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active, verde pentru legaturi
vizitate si albastru pentru legaturi nevizitate </h3>
<a href=leg_ex1.html>
Link catre pagina 1 <br>
<a href=leg_ex2.html>
Link catre pagina 2 <br>
<a href=leg_ex11.html>
Link catre pagina 11 </a>
</body>
</html>
Utilizarea poştei electronice
Intr-o pagina Web se poate afla legaturi care permit lansarea în execuţie a aplicaţiei de expediere a
mesajelor electronice.
Pentru aceasta se utilizează în construcţia adresei URL cuvântul mailto: urmat de o adresa e-mail
valida.
Pentru ca exemplul următor sa funcţioneze trebuie ca:
- pe calculator sa fie instalat o aplicaţie de expediere a mesajelor electronice (Outlook Express,
Microsoft Outlook etc.)
- adresa sa fie valida şi calculatorul sa fie conectat la Internet.
<html>
<head>
<title> Expediere de mesaje electronice</title>
</head>
<body>
<h3>Expediere de mesaje electronice</h3><br>
<a href="mailto:student@yahoo.com"> Mesaje catre autorul paginii </a>
</body>
</html>
Legaturi către fişiere oarecare
O pagina Web poate conţine legaturi către orice tip de fişiere aflate pe orice servere din Internet.
Pentru aceasta se utilizează eticheta <a> având valoarea atributului href egala cu adresa URL a
fişierului destinaţie. Atunci când se efectuează clic pe legătura din exemplul următor browserul va
deschide o caseta de dialog - File download - care va permite:
- sa salvaţi pe discul local fişierul
- sa lansaţi în execuţie aplicaţia capabila sa interpreteze corect fişierele de tipul respectiv
<html>
<head>
<title> Legaturi catre fişiere oarecare</title>
</head>
<body>
<h3>Legaturi catre fisiere oarecare</h3><br>
<a href="fisier.zip">Link catre fisierul fisier.zip </a>
</body>
</html>

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

11
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).
<html>
<head>
<title> Atributul target</title>
</head>
<body>
<h3>Atributul target</h3><br>
<a href="ex_1.1.html " target="fereastra"> legatura 1<a> <br>
<a href="ex_1.2.html " target="fereastra"> legatura 2<a>
</body>
</html>

Imagini
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;
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.
<html><head><title> O pagina cu imagine</title></head>
<body>
O pagina care contine o imagine
<img src="poza.jpg" alt=”Imagine ...........”> Text
dupa imagine
</body></html>

Chenarul şi dimensionarea unei imagini


Daca doriţi sa adăugaţi un chenar în jurul imaginii, folosiţi atributul border al etichetei <img>.
Valorile acestor atribute sunt numere întregi pozitive.
O imagine are anumite dimensiuni pe orizontală şi verticală, stabilite în momentul creării ei. Daca
nu se cere altfel, aceste dimensiuni sunt respectate în momentul afişării ei în pagina Web.
Dimensiunile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width şi
height. Ca valori, cele două atribute, pot primi un număr de pixeli sau procente din lăţimea şi
respectiv înălţimea ferestrei
<html>
<head>
<title> Imagine cu chenar si redimensionata</title>
</head>

12
<body>
O imagine cu chenar şi dimensiuni de 200 pixeli X 15 %
<img src="poza.jpg" border="5" width="350"
height="15%"> Text dupa imagine.
</body>
</html>

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.
- "bottom" - aliniere la baza; partea de jos a imaginii
se aliniază cu linia de bază a textului<html>
<head>
<title> Alinierea unei imagini</title>
</head>
<body>
Alinieri pe verticala:<br><br><br><br><br>
Sus<img src="w3.gif" align="top"><br><br><br>
La mijloc: <img src="w3.gif" align="middle"><br><br><br>
Jos: <img src="w3.gif" align="bottom"> </html>
Alinierea textului în jurul imaginii

Atributele hspace şi vspace precizează distanta


în pixeli pe orizontală, respectiv pe verticală,

13
dintre imagine şi restul elementelor din
pagina.
<html>
<head>
<title> Alinierea textului</title>
</head>
<body>
<h4>Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.
</h4><p> Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de
imagine. Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de
imagine.
<img src="poza.jpg" align="left" width=200 height=200 hspace="30" vspace="30"> Text dupa
imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa
imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.
</body>
</html>
Imagini pentru fondul 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ă.
<html>
<head>
<title> Pagina cu imagine de fond</title>
</head>
<body background="w3.gif" bgproperties=fixed>
<b><font color=red>
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 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 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 </body></html>

Imagini folosite ca legături


Pentru a utiliza imaginea "poza.jpg" drept legatura catre pagina ex_1.1.html utilizam sintaxa:
<a href ="ex_1.1.html"><img src= "poza.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.
Tabele
Tabelele ne permit sa 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

14
<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). 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>.
<html><head><title>tabel</title></head>
<body><h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1><hr>
<table border>
<tr> <td>cell 11 <td>cell 12
<tr> <td>cell 21 <td>cell 22
<tr> <td>cell 31 <td>cell 32
<tr> <td>cell 41 <td>cell 42
</table>
</body></html>

Î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 intr-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>
</body>
</html>

15
Culoarea unui table
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 2.
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 .
<html>
<body>
<h4 align=center>Un tabel cu distanţa între celule de 10 pixeli iar distanţa între celule şi continut de
20 pixeli</h1><hr>
<table cellspacing=10 cellpadding=20 border=5 align=center>
<tr> <td> 11 <td> 12
<tr> <td>21 <td> 22
</table>
</body></html>

Distanţa între celule şi conţinut


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 intr-o pagina Web a unui text
poziţionat în centrul paginii.
<html>
<head><title>text centrat</title></head>
<body>
<table width="100%" height="100%">
<tr> <td align="center">

16
<h2>Text centrat.</h2>
</table>
</body>
</html>
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ă.
<html>
<head><title>alinierea în celule</title></head>
<body><h3 align=center>Un tabel avand continutul celulelor aliniate</h3>
<table border width="300" height="300">
<tr align="right"><td>Aici <td>alinierea<td>este centru<td>dreapta <tr>
<td align="left">stanga
<td align="center">centru<td valign="top">sus <td valign="bottom">jos
<tr align="left"><td>aici<td>alinierea <td>este centru<td>stanga (implicita) </table>
</body></html>

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ă.
- extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a cărui
valoare determina numărul de celule care se unifica.
Sunt posibile extinderi simultane ale unei celule pe orizontala şi pe verticala.
Celule vide ale unui tabel
Daca un tabel are celule vide, atunci aceste celule vor apărea în tabel fara un chenar de delimitare.
În scopul de a afişa un chenar pentru celule vide se utilizează urmatoarele trucuri:
- dupa td se pune &nbsp;
- dupa td se pune<br>.
Atribute Internet Explorer pentru tabele
Următoarele atribute ale etichetei table funcţionează cu Internet Explorer
- background permite stabilirea unei imagini pentru fondul unui tabel. Primeşte ca valoare
adresa URL a imaginii folosite pentru fond;
- bordercolor permite stabilirea culorii pentru chenarul unui tabel;
- bordercolorlight permite stabilirea culorii feţei luminate pentru chenarul 3D al unui tabel;
- bordercolordark permite stabilirea culorii feţei întunecate pentru chenarul 3D al unui tabel;
Atributele frame şi rules
Atributul frame al etichetei table permite specificarea părţilor din chenarul unui tabel care vor fi
afişate. Valorile posibile sunt:

17
- void - elimina toate muchiile exterioare ale tabelului;
- above - afişează o muchie în partea superioara a cadrului tabelului;
- below - afişează o muchie în partea inferioara a cadrului tabelului;
- hsides - afişează cate o muchie în partea superioara şi inferioara cadrului tabelului;
- lhs - afişează o muchie în partea din stânga a cadrului tabelului;
- rhs - afişează o muchie în partea din dreapta a cadrului tabelului;
- vsides - afişează o muchie în partea din stânga şi din dreapta a cadrului tabelului;
- box - afişează o muchie pe toate laturile cadrului tabelului;
- border - afişează o muchie pe toate laturile cadrului tabelului;
Atributul rules permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt:
- none - elimina toate muchiile interioare ale tabelului;
- rows - afişează muchii orizontale intre toate liniile tabelului;
- cols - afişează muchii verticale intre toate coloanele tabelului;
- all - afişează muchii intre toate liniile şi coloanele;
<html>
<head><title>Atribute frames si rules</title></head>
<body><h1 align=center>Atributele frames si rules</h1>
<table width="400" frame=box rules=rows cellspacing=10>
<tr> <td>cell 11 <td>cell 12<td>cell 13
<tr> <td>cell 21 <td>cell 22<td>cell 23
</table>
</body>
</html>

Atribute frames şi rules pentru un tabel


Cadre în HTML (frames)
Cadrele ne permit să definim în fereastra browserului zone în care sa fie încărcate documente
HTML diferite. Cadrele sunt definite într-un fişier HTML special, în care blocul <body>...</body>
este înlocuit de blocul <frameset>...</frameset>.
În interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primeşte ca valoare adresa URL a
documentului HTML care va fi încărcat în acel cadru.
Definirea cadrelor se face prin împărţirea ferestrei pe orizontală sau pe verticală.
- împărţirea unei ferestre într-un număr de cadre pe verticală se face cu ajutorul atributului cols al
etichetei <frameset>;
- împărţirea unei ferestre într-un număr de cadre pe orizontală se face cu ajutorul atributului rows
al etichetei <frameset>;
Valoarea atributelor cols şi rows este o listă de elemente separate prin virgulă, care descriu modul
în care se face împărţirea.

18
Elementele listei pot fi:
- un număr întreg de pixeli;
- procente din dimensiunea ferestrei (număr intre 1 şi 99 terminat cu %);
- n* care înseamnă n părţi din spaţiul rămas;
Exemplul
<frameset cols=200,*,50%,*> înseamnă o împărţire în 4 cadre pe verticală, dintre care primul are
200 pixeli, al treilea ocupă jumătate din spaţiul total disponibil, iar al doilea şi al patrulea ocupă în
mod egal restul de spaţiu rămas disponibil.

Exemplu
<frameset rows=200,1*,50%,2*> înseamnă o împărţire în 4 cadre, dintre care primul are 200
pixeli , al treilea ocupă jumătate din spaţiul total disponibil, iar al doilea şi al patrulea ocupă în mod
egal restul de spaţiu rămas disponibil, care se împarte în trei părţi egale, al doilea cadru ocupând o
parte , iar al patrulea ocupând 2 părţi.
Observatii:
- dacă mai multe elemente din listă sunt configurate cu * , atunci spaţiul disponibil rămas pentru
ele se va împărţi în mod egal.
- Într-un cadru se poate încărca un document HTML sau poate fi împărţit la rândul său în alte
cadre (folosind <frameset>).
În exemplul următor este creată o pagina Web cu trei cadre orizontale. Pentru al doilea cadru
valoarea atributului src este adresa URL a unei imagini
<html><head><title>cadre</title></head>
<frameset rows="100,*,20%">
<frame src="p1.html">
<frame src="poza.jpg">
<frame src="p2.html">
</frameset>
</html>

În exemplul următor este creată o pagina Web cu trei cadre mixte. Pentru a o crea se procedează din
aproape în aproape. Mai întâi, pagina este împărţită în două cadre de tip coloană, după care al doilea
cadru este împărţită în doua cadre de tip linie.
<html>
<head><title>cadre</title></head>
<frameset cols="20%,*">
<frame src="p1.html">
<frameset rows="*,*">
<frame src="p2.html">
<frame src="p1.html">
</frameset>
</frameset>
</html>

19
Culori pentru chenarele cadrelor şi dimensionarea chenarului unui cadru
Pentru a stabili culoarea chenarului unui cadru se utilizează atributul bordercolor. Acest atribut
primeşte ca valoare un nume de culoare sau o culoare definită în conformitate cu modelul de
culoare RGB. Atributul bordercolor poate fi ataşat atât etichetei <frameset> pentru a stabili
culoarea tuturor chenarelor cadrelor incluse, cât şi etichetei <frame> pentru a stabili culoarea
chenarului pentru un cadru individual. Atributul border al etichetei <frameset> permite
configurarea lăţimii chenarelor tuturor cadrelor la un număr dorit de pixeli. Valoarea prestabilita a
atributului border este de 5 pixeli. O valoare de 0 pixeli va defini un cadru fără chenar.
În mod prestabilit, chenarul unui cadru este afişat şi are aspect tridimensional. Afişarea chenarului
unui cadru se poate dezactivata dacă se utilizează atributul frameborder cu valoare "no". Acest
atribut poate fi ataşat atât etichetei <frameset> (dezactivarea fiind valabila pentru toate cadrele
incluse) cât şi etichetei <frame> (dezactivarea fiind valabilă numai pentru un singur cadru). Valorile
posibile ale atributului frameborder sunt: "yes" - echivalent cu 1; "no" - echivalent cu 0;
Bare de defilare
Atributul scrolling al etichetei <frame> este utilizat pentru a adăuga unui cadru o bară de derulare
care permite navigarea în interiorul documentului afişat în interiorul cadrului. Valorile posibile
sunt:
- "yes" - barele de derulare sunt adăugate întotdeauna;
- "no" - barele de derulare nu sunt utilizabile;
- "auto" - barele de derulare sunt vizibile atunci când este necesar
<html>
<head><title>cadre</title></head>
<frameset cols="*,*,*">
<frame src="p1.html" scrolling="yes" noresize>
<frame src="p2.html" scrolling="no" noresize>
<frame src="p1.html" scrolling="auto" noresize>
</frameset>
</html>
Atributul noresize al etichetei <frame> (fără nici o valoare suplimentară) dacă este prezent, inhibă
posibilitatea prestabilită a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului.
Poziţionarea documentului într-un cadru
Atributele marginheight şi marginwidth ale etichetei <frame> permit stabilirea distanţei în pixeli
dintre conţinutul unui cadru şi marginile verticale, respectiv orizontale ale cadrului. Valori posibile:
- număr de pixeli;
- procent din lăţimea, respectiv din înălţimea cadrului;
<html><head><title>cadre</title></head>
<frameset cols="*,*,*">
<frame src="p1.html">

20
<frame src="p2.html" marginheight=50>
<frame src="p1.html" marginwidth=50>
</frameset>
</html>

Poziţionarea documentelor în cadre


Cadre interne (în-line)
Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru intern se
introduce într-o pagina Web în mod asemănător cu o imagine aşa cum rezulta din următorul
exemplu:
<iframe src="ex_3.1.html" height=40% width=50%> </iframe>
În acest caz, am specificat un cadru intern care are 40% din înălţimea şi 50% din lăţimea paginii
curente.
Atributele acceptate de eticheta <iframe> sunt în parte preluate de la etichetele <frame> şi
<frameset>, cum ar fi: src, border, frameborder, bordercolor, marginheight, marginwidth,
scrolling, name, noresize; sau de la eticheta <img> vspace, hspace, align, width, height;
<html>
<head><title>cadre interne</title></head>
<body>
<a href="p1.html" target="icadru">Fisierul1</a><br>
<a href="p2.html" target="icadru">Fisierul2</a><br>
<center>
<iframe width="60%" height="50%" border=2 bordercolor=red name="icadru"
src="p1.html"></iframe></center>
</body>
</html>

21
Cadre interne
Ţinte pentru legaturi
În mod prestabilit, la efectuarea unui clic pe o legătura noua pagină (către care indică legătura) o
înlocuieşte pe cea curentă în aceeaşi fereastră (acelaşi cadru). Acest comportament se poate schimba
în doua moduri:
- prin plasarea în blocul <head>...</head> a unui element <base> care precizează, prin atributul
target numele ferestrei (cadrului) în care se vor încărca toate paginile noi referite de legaturile
din pagina curenta conform sintaxei:
<base target="nume_ferastra/frame_de_baza">
- prin plasarea în eticheta <a> a atributului target, care precizează numele ferestrei (cadrului) în
care se va încărca pagina nou referită de legătură, conform sintaxei: <a href="fişier.html"
target="nume fereastra/frame"> ... </a>
Valori pentru atributul target
Atributul target al etichetei<frame> accepta anumite valori predefinite de o valoare deosebita pentru
creatorii de pagini Web. Aceste valori sunt:
• "_self" (încărcarea noii pagini are loc în cadrul curent);
• "_blank" (încărcarea noii pagini are loc intr-o fereastra noua anonima);
• "_parent" (încărcarea noii pagini are loc în cadrul parinte al cadrului curent daca acesta
exista, altfel are loc în fereastra browserului curent);
• "_top" (încărcarea noii pagini are loc în fereastra browserului ce contine cadrul curent)
Formulare
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 cuprinde următoarele etape:
- utilizatorul completează formularul şi îl expediază unui server.
- o 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 intr-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ă metoda 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)- intre 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)
Pentru ca un formular sa 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".

22
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ă.
<html>
<head><title>FormEx_1 </title></head>
<body><h4> Un formular cu un camp de editare şi un buton de expediere</h4>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Numele:<input type="text" name="numele" value="Numele si prenumele"><br>
<input type="submit" value="expedieaza"> </form></body>
</html>

Formular cu casetă text şi buton de expediere


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 intr-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.
<html>
<head><title>formex_2</title></head>
<body><h1>Un formular cu un buton reset</h1><hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Introduceti numele:<input type="text" name="nume" value="Numele"><br>

23
Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br>
<input type="reset" value="sterge"> <input type="submit">
</form></body></html>

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.
<html>
<head><title>formex_3</title></head>
<body><h1>Un formular cu un camp de parola</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Nume:<input type="text" name="nume" value="Numele"><br>
Prenume:<input type="text" name="prenume" value="Prenumele"><br>
Password:<input type="password" name="parola" ><br>
<input type="reset" value="sterge"> <input type="submit" value="trimite"> </form></body>
</html>

Butoane radio
Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile.
Butoanele radio 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.

24
<html>
<head><title>formex_4</title></head>
<body><h1>Un formular cu butoane radio</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alegeti sexul:<br>
<input type="radio" name="sex" value="m">masculin<br>
<input type="radio" name="sex" value="f">feminin<br>
<input type="reset"> <input type="submit"> </form></body>
</html>

Butoane radio
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" .

Observatii:
- fiecare caseta poate avea un nume definit prin atributul name.
- fiecare caseta, ca şi un buton radio, poate avea valoarea prestabilita "selectat" definita prin
atributul checked.
<html>
<head><title>formex_5</title></head>
<body><h1>Un formular cu casete checkbox</h1><hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alegeti meniul:<br>
<input type="checkbox" name="pizza" value="o portie">Pizza<br>
<input type="checkbox" name="nectar" value="un pahar"> Nectar<br>
<input type="checkbox" name="bere" value="o sticla"> Bere<br>
<input type="checkbox" name="cafea" value="o ceasca"> Cafea<br>
<input type="reset"> <input type="submit"> </form></body>
</html>

25
Casete de validare
Casete de fişiere
Intr-o pereche "name = value" a unui formular se poate folosi întregul conţinut al unui fişier pe post
de valoare. Pentru aceasta se inserează un element <input> intr-un formular , cu atributul <type>
având valoarea "file" (fişier). Atributele pentru un element de tip caseta de fisiere:
- atributul name permite ataşarea unui nume
- atributul value primeşte ca valoare adresa URL a fişierului care va fi expediat o data cu
formularul. Aceasta valoare poate fi atribuita direct atributului value, poate fi tastata intr-un
câmp de editare ce apare o data cu formularul sau poate fi selectata prin intermediul unei casete
de tip File Upload sau Choose File care apare la apăsarea butonului Browse... din formular.
<html>
<head><title>formex_6</title></head>
<body><h1>Un formular cu caseta de fisiere</h1><hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alegeti fisierul:<input type="file" name="fisier" value="c:\temp\proba.html"
enctype="multipart/form-data"><br><input type="reset"> <input type="submit">
</form></body></html>

Caseta de fişiere
Liste de selectie
O lista de selectie permite utilizatorului sa 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).

26
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 .
<html>
<head><title>formex_7</title></head>
<body><h1>Un formular cu o lista de selectie</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Universitatea absolvita:<br><br>
<select name="universitate" size="3"> <option value="B"> Universitatea din Cluj
<option value="UNBM" selected> Universitatea de Nord Baia Mare
<option value="UTT"> Universitatea Technica din Timisoara
<option value="UTB"> Universitatea Technica din Brasov
</select><br><br>
<input type="reset"> <input type="submit">
</form></body>
</html>
Câmpuri de editare multilinie
Intr-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 intr-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.
Acest atribut poate primi următoarele valori:
a) " off "; în acest caz: întreruperea cuvintelor la marginea dreaptă a editorului se produce numai
când doreşte utilizatorul; caracterul de sfârşit de linie este inclus în textul transmis serverului o data
cu formularul;
b) " hard "; în acest caz: se produce întreruperea cuvintelor la marginea dreapta a editorului ;
caracterul de sfârşit de linie este inclus în textul transmis serverului o data cu formularul;
c) " soft "; în acest caz: se produce întreruperea cuvintelor la marginea dreapta a editorului; nu se
include caracterul de sfârşit de linie în textul transmis serverului o data cu formularul .
<html>
<head><title>formex_9</title></head>
<body><h1>Un formular cu un camp de editare multilinie</h1> <hr>
<form action="mailto:xxxxx@xxx.com" method="post">
<textarea name="text multilinie" cols="30" rows="5" wrap="off">
Prima linie din textul initial.
A doua linie din textul initial. </textarea>
<input type="reset"> <input type="submit">
</form></body>
</html>

27
Câmp de editare multilinie
Intr-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 intr-un formular , se utilizează eticheta <input>
avand atributul type configurat la 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.
<html>
<head><title>formex_10</title></head>
<body><h1>Butoane</h1> <hr>
<center>
<input type=button value="Apasa !" onclick="alert('De ce apesi ???')">
</body>
</html>

Stiluri
Stilurile pun la dispoziţia creatorilor de site-uri noi posibilităţi de personalizare a paginilor Web. Un
stil reprezintă un mod de a scrie un bloc de text (adică anumite valori pentru font, mărime, culoare,
aliniere, distanţe faţă de margini etc).

Exista doua modalităţi de a defini un stil:


- sintaxa CSS (Cascading Style Sheets) prezentată în continuare;
- sintaxa Javascript.
Stilurile sunt introduse în doi paşi:
- definirea stilului;
- precizarea domeniului de aplicare a stilului.
Stilurile sunt de finite în cadrul blocului <head>…</head> între etichetele <style>…</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 {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:

28
<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 sa folosească clasa de stiluri "ac" atunci scriem: <h2 class =
ac>Acesta este un header de marime 2 albastru si 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>
- în elementul în care se doreşte utilizarea locală a acestui stil, folosiţi atributul id care primeşte
valoare numele stilului definit anterior.
<h3 id=green>Acesta este un header de marime 3 verde</h3>
<html>
<head><title>stiluri</title>
<style>
p {color:red; text-align:right}
.ac {text-align:center; color:blue;}
#verde { color: green }
</style>
</head>
<body> <p> paragraf rosu aliniat dreapta
<br> <p class=ac>Acesta este un paragraf albastru si centrat
<h3 id=verde>Acesta este un header de marime 3 verde</h3>
</body>
</html>

Siluri
Stiluri în-line
Stilurile în-line sunt definite chiar în eticheta ce iniţiază blocul în care dorim să se aplice aceste
stiluri. Pentru aceasta se utilizează atributul universal style (comun practic tuturor etichetelor ce

29
apar intr-un document HTML).Valoarea data atributului style este tocmai descrierea stilului,
cuprinsă nu intre acolade {..} ci intre ghilimele "...".
De exemplu:
<h2 style = " color: red; text-align: center;">
Acest header de marimea 2 este de culoare rosie si este centrat.</h2>
Daca dorim utilizarea unui anumit style pentru un fragment de text, atunci includem acest text intr-
un bloc cu ajutorul delimitatorilor <span>...</span>, după care utilizam atributul style pentru
eticheta <span>.
Stiluri definite în fişiere externe
Stilurile definite în interiorul unui bloc <style>...</style> pot fi transferate într-un fişier extern
existând astfel posibilitatea utilizării lor în mai multe fişiere HTML. Pentru a utiliza un stil definit
intr-un fişier extern se procedează astfel:
- se creează un fişier care sa conţină numai descrierea stilurilor şi se salvează cu extensia .css sau
.html. Continutul acestui fişier coincide cu conţinutul unui bloc <style>...</style> , fără ca
aceşti delimitatori sa fie incluşi.
- În fişierul HTML care utilizează stilurile definite la pasul anterior, se include în blocul
<head>...</head> o eticheta <link> având trei atribute.
- atributul rel cu valoarea "stylesheet"
- atributul href având ca valoare adresa URL a fişierului creat la punctul 1 ;
- atributul type cu valoarea "text/css".
Se utilizează titlurile definite în fişierul extern ca şi cum ar fi definite în fişierul HTML curent intr-
un bloc <style>...</style>.
Pseudoclase. Pseudoclasele se utilizează pentru personalizarea legăturilor.
Ele se definesc în blocul <style>...</style> sau într-un fişier extern, conform sintaxei:
a: link {color: black; font-size: 20pt}
a: active {color: blue; font-style: italic}
a: visited {color: cyan; text-decoration: none}
Pentru ca numai anumite legaturi sa utilizeze un stil se pot folosi următoarele doua metode:
- a: link.CLASA1 {...} combinat cu <a class = CLASA1 href=" "> ...</a>
- a: link#ID1 {...} combinat cu <a id = ID1 href=" "> ...</a>
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, în, mm, cm)
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 intre 100 (cel mai subtire) şi 900 (cel mai gros)
Stilul fontului - font-style: normal, italic, oblique
Setarea textului
Culoarea textului este stabilită prin atributul color: valori posibile:
- nume culoare
- construcţie în hexazecimal #rrggbb
- apelul funcţiei rgb(r,g,b) sau rgb(%r,%g,%b)
Culoarea fondului textului este stabilită prin atributul background-color. Valori posibile 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

30
Straturi
Un strat este văzut ca un bloc de text sau elemente HTML care poate fi dimensionat şi poziţionat cu
exactitate în pagină. Straturile pot fi transparente sau opace şi se pot suprapune.
Se definesc cu ajutorul atributelor stilurilor şi se introduc în pagina prin marcaje <div> sau <span>.
Un strat moşteneşte toate atributele stilurilor şi acceptă şi atribute referitoare la dimensiune şi
poziţionare.
Dimensiunile unui strat se stabilesc prin atributele width şi height. Ca valori pot primi un număr
urmat de unitate de măsură.
Poziţionarea unui strat poate fi de doua tipuri:
- absolută, stratul fiind poziţionat în funcţie de colţul din stânga sus al ferestrei sau a blocului din
care face parte
- relativă, stratul fiind poziţionat în funcţie de ultimul element introdus în pagina
Tipul poziţionării este stabilit prin atributul position cu valorile posibile absolute sau relative.
Poziţia stratului este stabilita cu ajutorul atributelor top şi left. Chenarul unui strat este stabilită
prin atributul border-style cu valori posibile: none, solid, dotted, dashed, double, inset, outset,
groove, ridge. Culoarea chenarului este stabilită prin atributul border-color.
Grosimea chenarului este stabilită prin atributul border-width: număr cu unitate de măsură
Exemplu de straturi poziţionate absolut, suprapuse.
<html>
<head><title>straturi suprapuse</title>
<style>
#strat1 {
width:200;height:100;
position:absolute; top:100;left:100;
border-style:solid; border-color:red;
color:red;}
#strat2 {
width:100;height:200;
position:absolute; top:50;left:150;
border-style:double; border-color:blue;
color:blue;}
</style>
</head>
<body>
<div id=strat1>strat 1 strat 1 strat 1 strat 1 strat 1
strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 strat 1 </div>
<div id=strat2>strat 2 strat 2 strat 2 strat 2 strat 2 strat 2
strat 2 strat 2 strat 2 strat 2 strat 2 strat 2</div>
</body> </html>

Straturi suprapuse

31
Daca straturile prezintă şi culoare de fundal atunci ele sunt opace.
Efect de umbra cu ajutorul straturilor .
<html><head><title>efect umbra</title>
<style>#strat1 {font-size:2cm;font-weight:900;
position:absolute; top:100;left:100;color:red;}
#strat2 {font-size:2cm;font-weight:900;
position:absolute; top:105;left:105;color:silver;}
</style> </head> <body> <div id=strat2>TEXT</div>
<div id=strat1>TEXT</div> </body> </html>

Efect de umbră cu ajutorul straturilor

32
Modulul II. JAVASCRIPT
Firma Netscape Communications, din dorinţa de a extinde funcţionalitatea popularului său
program de navigare Netscape Navigator, a dezvoltat un limbaj de programare, astfel încât
programele scrise în acest limbaj să poată fi incluse în cadrul paginilor Web. Iniţial
Netscape şi-a denumit noul limbaj LiveScript, iar apoi, pentru a profita de renumele obţinut
de limbajul de programare Java, denumirea a fost schimbată în JavaScript.
În general, aplicaţiile, indiferent cât de bine sunt realizate, nu pot satisface cerinţele tuturor
utilizatorilor, motiv pentru care acestora li se pune la dispoziţie un limbaj simplu de
programare cu ajutorul căruia pot să creeze extensii ale aplicaţiei. De obicei, aceste
miniprograme nu sunt compilate, ci interpretate linie cu linie în timpul rulării aplicaţiei. Cel
mai obişnuit exemplu de astfel de microaplicaţii îl reprezintă macro-urile din Microsoft
Office. Aceste microaplicaţii poartă denumirea generică de script-uri, iar colecţia de
comenzi şi instrucţiuni care pot apărea în cadrul unui script poartă denumirea de limbaj de
scriptare sau limbaj de tip script.
JavaScript este un limbaj de scriptare a cărui sintaxă seamănă, într-o oarecare măsură, cu
cea a limbajelor C, C++, Pascal, Java sau Delphi, dar care are anumite particularităţi care îl
fac să se deosebească esenţial de orice alt limbaj de programare.
Pentru ca programul de navigare să poată executa instrucţiuni JavaScript, el trebuie
configurat în aşa fel încât să nu ignore astfel de instrucţiuni. Totodată programul de navigare
trebuie să recunoască instrucţiunile JavaScript; Netscape Navigator oferă suport pentru
JavaScript începând cu versiunea 2.0, în timp ce Internet Explorer oferă acest suport
începând cu versiunea 3.0. Limbajul JavaScript este un limbaj bazat pe obiecte, adică un
limbaj orientat obiect care conţine obiecte predefinite.
De asemenea JavaScript este un limbaj proiectat astfel încât să reacţioneze în momentul
apariţiei unui eveniment.
Totodată JavaScript este un limbaj sigur în sensul că, în principiu, nu pot fi scrise
microaplicaţii care să aibă acţiuni dăunătoare asupra calculatorului pe care este vizualizată
pagina Web. De exemplu, nu va putea fi scris un script care să scaneze discul şi să şteargă
anumite fişiere. Totuşi există posibilitatea păstrării anumitor parole introduse de către
utilizator, ceea ce ar putea deranja pe unii dintre aceştia. Din această cauză majoritatea
programelor de navigare oferă o opţiune a cărei activare nu permite executarea script-urilor.
În sfârşit, JavaScript este un limbaj independent de platforma pe care rulează, adică un
acelaşi script va putea fi executat sub Unix, MacIntosh sau Windows fără a fi necesară
prezenţa unui emulator sau efectuarea anumitor modificări.

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.

33
• 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ă.
• î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.
<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.0 Strict//EN”
‘‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<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>

34
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 <script type=‘‘text/javascript”>
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ă:
<!DOCTYPE html PUBLIC ‘‘-//W3C//DTD XHTML 1.0 Strict//EN”
‘‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<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 src=‘‘info.js” type=‘‘text/javascript”>
</script>
</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:
<script type=‘‘text/javascript”>
<! - - 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

Elementele limbajului pot fi:


• 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.

35
• Vectori şi elemente de tip Obiect .

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.
Exemplu :
sir1='Sir 1'
sir2=‘‘Sir 2”
sir3='Sir 1' + ‘‘Sir 2”
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)
- 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ă;

36
• 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.

Crearea de casete simple de mesaj


Pentru afişarea unui mesaj adresat utilizatorului sub forma unei casete de dialog, se poate
utiliza funcţia alert (figura 3.1).
<html> <head>
<title> javascript </title>
</head><body>
<h1> <script language=‘‘java script”>
alert(”mesaj afisat\n într-o caseta alert”);
</script></body> </html>

Figura 3. 1 Casetă alert


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) (figura 3.2).

<html>
<head>
<title> prompt </title>
</head>
<body>
<script type=‘‘text/javascript”>
var nume, varsta;
nume=prompt(”introduceti numele dvs.:”,””);
varsta=prompt(”introduceti varsta dvs.:”,””);
alert(nume+” are “+varsta+” ani”)
</script> </body> </html>

Figura 3.2. Caseta prompt

37
Funcţia EVAL se utilizează pentru a converti un şir de caractere la o valoare întreagă.
Exemplu:

<html> <head>
<title> calcul </title>
</head>
<body>
<script type=‘‘text/javascript”>
a=eval(prompt(”intr i nr:”,”0”))
b=eval(prompt(”intr al ii-lea nr:”,”0”))
suma=a+b
alert(”suma este: ‘‘+suma)
</script>
</body> </html>

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 (figura 3.3).

<html>
<head>
<script type=‘‘text/javascript”>
function culoare()
{
if(confirm(”culoare text rosu ?”))
document.fgColor=‘‘red”
}
</script>
</head>
<body>
<input type=‘‘button” value=‘‘Culoare text” onclick=‘‘culoare()”><br>text
</body>
</html>

Figura 3.3. Funcţia confirm


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”)

38
document.write(variabilă)
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>
<script type=‘‘text/javascript”>
document.write(”<b>bold</b> <i>italic</i>‘‘);
</script>
</body> </html>

Să se scrie setul de comenzi cu ajutorul cărora se citesc 2 numere şi să se afişeze suma lor.
<script type=‘‘text/javascript”>
a=eval(prompt(”Intr un nr:”,”0”));
b=eval(prompt(”Intr un nr:”,”0”));
suma=a+b;
document.write(”a=‘‘+a+”<br>‘‘+”b=‘‘+b+”<br>‘‘+”a+b=‘‘+suma);
</script>

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ă
}
Acoladele au un rol foarte important în JavaScript, cu ajutorul lor se pot grupa mai multe
instrucţiuni într-un singur bloc de instrucţiuni care sunt tratate ca o singură instrucţiune.
Să se sciteasca numele şi parola unui utilizator iar în funcţie de acestea să se afişeze un
anumit mesaj (figura 3.4).

<script type=‘‘text/javascript”>
nume=prompt(”Introduceti numele”,””);
parola=prompt(”Introduceti parola”,””) ;
n_valid=‘‘student” ;
p_valid=‘‘utm” ;
if((nume==n_valid)&&(parola==p_valid))
{
alert(”Date corecte!”) ;

39
document.write(”Bun venit pe pagina studentilor de la facultatea...”) ;
}
else
{
alert(”Date incorecte!”) ;
document.write(”Apasati F5 şi mai incercati !!!...”) ;
}
</script>

Figura 3.4

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. Să se scrie text cu înălţimi de la h1 la h6 şi apoi să realizeze cu tabel cunumărul de linii şi
coloane definit de utilizator (figura 3.5).
<script type=‘‘text/javascript”>
a=eval(prompt(”Definiti nr de linii:”,””))
b=eval(prompt(”Definiti nr de coloane:”,””))
for(i=1;i<=6;i++)
document.write(”<h”+i+”> Acest text este introdus cu H”+i+”</h”+i+”>‘‘)
document.write(”<table border>‘‘)
for(i=1;i<=a;i++)
{
document.write(”<tr>‘‘)
for(j=1;j<=b;j++)
document.write(”<td>celula ‘‘+i+j)
}
</script>

40
Figura 3. 5 Text scris în mod programat

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.
<script type=‘‘text/javascript”>
i=””;
while(i!==‘‘student”)
{
i=prompt(”Introduceti parola”,””);
}
document.write(”Password accepted”);
</script>

Instrucţiunea SWITCH
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;
}

<script type=‘‘text/javascript”>

41
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().
Să se introducă 3 nume de la tastatură şi să se afişeze în pagină unul după celălalt.

<script type=‘‘text/javascript”>
n=eval(prompt(”Introduceti nr de elemente”,””));
sir=new Array();
for(i=0;i<3;i++)
{
sir[i]=prompt(”Introduceti numele ‘‘+(i+1),””):
document.write(”<br>‘‘+sir[i]);}</script>

Exemplu: Să se realizeze un buton care schimbă culorile fundalului unei pagini.

<script type=‘‘text/javascript”>
culoare=new Array(4);
culoare[0]=‘‘red”;
culoare[1]=‘‘blue”;
culoare[2]=‘‘green”;
i=-1;
function change()
{
i++;
document.bgColor=culoare[i];
if(i==2)
i=-1;

42
}
</script>
<input type=‘‘button” value=‘‘culoare fundal” onclick=‘‘change()”>

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:

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 3.6).

<script type=‘‘text/javascript”>
function titlu (a)
{document.write(“<font color=red size=7>‘‘+a+”</font>‘‘)}
x=prompt(“Introduceti titlul”,””);titlu(x);
</script>

Figura 3.6 Text scris prin aplelul unei funcţii


Funcţiile pot fi definite şi fără parametri şi pot returna sau nu o valoare.
<script type=‘‘text/javascript”>
function titlu ()
{document.write(”<font color=red size=7>‘‘+a+”</font>‘‘);}
a=prompt(”Introduceti titlul”,””);
titlu();</script>

43
Aplicatie: utilizând funcţii să se realizeze fereastra din figura 2.4.

Figura 2. 7 Definirea funcţiilor într-un fişier html

Conţinutul fişierului html este următorul:


<html>
<head>
<title> Utilizare functii </title>
<script>
function nume(){a=prompt("Introduceti numele:","");}
function varsta(){b=prompt("Introduceti varsta:","");
b=parseInt(b);}
function afisare(){alert("Numele este:"+" "+a+"\n"+"Varsta este: "+" "+b);}
// "\n" trece la randul urmator
</script></head>
<body><form>
<h1><center> Functii Javascript</center></h1>
<input type="button" name="b1" value="Introduceti numele dvs" onclick="nume()">
<br><br><br>
<input type="button" name="b2" value="Introduceti varsta dvs" onclick="varsta()">
<br><br><br>
<input type="button" name="b3" value="Afiseaza date" onclick="afisare()">
</form>
</BODY>
</html>

Utilizarea casetelor de validate


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 3.8).
<html>

44
<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 ncorrect!”;
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>

Figura2.8. Testare user şi parola

Utilizarea casetelor de tip checkbox

45
Pentru o casetă de tip checkbox starea acesteia se preia cu proprietate checked.
Aplicaţie: Să se realizeze testul din figura 3.9.
<html><head><title> casete checkbox </title>
<script>function nota(a4,a1,b1,c1,a2,b2,c2,a3,b3,c3){
x=1;x=parseInt(x);nume=a4.value;
if(a1.checked && !b1.checked && c1.checked) x= x+3;
if(!a2.checked && b2.checked && !c2.checked ) x= x+3;
if(!a3.checked && !b3.checked && !c3.checked ) x= x+3;
if(nume=="") alert("Nu ati completat numele");
else {
alert (nume+" ai luat nota: " + x);
if (x<5) alert("Ai picat")
else
alert("Felicitari!");
}}
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>
<h1><center> TEST GRILA</center></h1>
<form>
<input type="text" name="t1" value="" onclick="sterge(t1)">
<ol><li>Prima intrebare</li>
<ol type="a"><li>
<input type="checkbox" name="c1a" value=""> raspuns a
</li><li>
<input type="checkbox" name="c1b" value=""> raspuns b
</li>
<li><input type="checkbox" name="c1c" value="">raspuns c
</li></ol><li> Intrebarea a doua</li>
<ol type="a">
<input type="checkbox" name="c2a" value=""> raspuns a
</li><li><input type="checkbox" name="c2b" value=""> raspuns b
</li><li><input type="checkbox" name="c2c" value="">raspuns c
</li></ol><li> Intrebarea a treia</li>
<ol type="a"><li>
<input type="checkbox" name="c3a" value=""> raspuns a
</li><li><input type="checkbox" name="c3b" value=""> raspuns b
</li><li><input type="checkbox" name="c3c" value="">raspuns c
</li></ol></ol><input type="button" name="b1" value="Nota"
onclick="nota(t1,c1a,c1b,c1c,c2a,c2b,c2c,c3a,c3b,c3c)">
</form></BODY></html>

46
Figura 2.9. Utilizarea casetelor de tip checkbox

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);
if(x[1].checked) alert ("Ati selectat culoarea "+ x[1].value);
if(x[2].checked) alert ("Ati selectat culoarea "+ x[2].value);
}
</script>
</head>
<body>

Utilizarea listelor de selecţie

47
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)
{
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>
<option value="test 12">test 12</option>
<option value="test 13">test 13</option>
<option value="test 14">test 14</option>
<option value="test 15">test 15</option>
<option value="test 16">test 16</option>
</select>
<br><br><br>
<input type="button" name="b1" value="afiseaza" onclick="lista(s)">
</form></BODY></html

Utilizând proprităţile casetelor care apar într-un formlar să se realizeze pagina din figura
3.10.
<html>
<head>
<title> </title>
<script>
function curs(t1,t2,s,c1,c2,p,r,t3)
{
nume=t1.value;
prenume=t2.value;
x=" ";
for(i=0;i<4;i++)
if (s[i].selected)
x=s[i].value;
if(x==" ") x="nu ai selectat curs"
y=" ";
if(c1.checked)
y=y+c1.value+" ";
if(c2.checked)
y=y+c2.value+" ";
if(y==" ") y="nu ai selectat nivelul"
q=" ";
for(i=0;i<3;i++)

48
if (p[i].checked) q=p[i].value;
if(q==" ") q="nu ai selectat mod plata"
z=" ";
for(i=0;i<3;i++)
if (r[i].checked)
z=r[i].value;
if(y==" ") y="nu ai selectat orar"
if (nume=="" && prenume=="") alert ("nu ai completat numele şi prenumele")
else
if (prenume=="") alert ("nu ai completat prenumele")
else
if (nume=="") alert ("nu ai completat numele")
else
alert ("Domnul/doamna "+nume+" "+prenume+" s-a inscris la cursul "+x+" la nivelul: "+y+ " in
orarul: " +z+
" şi plateste prin: " +q+" cu observatiile: "+t3.value);
}
</script></head><body>
<h1><center><font color="blue">FORMULAR INSCRIERE CURS</font></center></h1>
<form name="formular_inscriere">
<table border="1" width="50%" height="50%" align="center">
<tr><td rowspan="3" align="center">Nume: </td>
<td rowspan="3" align="center"><input type="text" name="t1" maxlength="50"
size="20"></td>
<td rowspan="3" align="center">Mod plata:</td>
<td><input type="radio" name="P" value="cash" checked>Cash</td>
</tr><tr>
<td><input type="radio" name="P" value="Banca">Banca</td>
</tr><tr>
<td><input type="radio" name="P" value="card">Card</td>
</tr><tr>
<td align="center">Prenume: </td>
<td align="center"><input type="text" name="t2" maxlength="50" size="20"></td>
<td rowspan="3" align="center">Orar: </td>
<td><input type="radio" name="R" value="8-12" checked> 8 - 12 </td>
</tr><tr><td rowspan="2" align="center">Cursul: </td>
<td rowspan="2">
<SELECT name="s" size="3" align="center">
<option value="web">A1 </option>
<option value="contabilitate"> A2 </option>
<option value="informatica"> A3 </option>
<option value="limba engleza"> A4 </option>
</select></td><td><input type="radio" name="R" value="12-16"> 12 - 16 </td>
</tr><tr><td><input type="radio" name="R" value="16-20"> 16 - 20 </td>
</tr><tr><td rowspan="2" align="center">Nivel: </td>
<td align="center"><input type="checkbox" name="c1" value="1">Incepatori </td>
<td rowspan="2" align="center">Comentarii: </td>
<td rowspan="2">
<textarea name="t3" rows="7" cols="20"> </textarea>
</td></tr><tr><td align="center"><input type="checkbox" name="c2" value="2">Avansati
</td></tr><tr>

49
<td colspan="2" align="center"><input type="button" name="ok" value="Inscriere"
onClick="curs(t1,t2,s,c1,c2,P,R,t3)">
</td><td colspan="2" align="center"><input type="reset" name="ok" value="RESET">
</td> </tr></table>
</form></body></html>

Figura 2.10. Realizarea unui formular complex

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. 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

50
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 OnError 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

Exemplu
Script care afişează în pagină 2 butoane pentru alegerea culorii de fundal a paginii. La plasarea
mouse-lui deasupra unui buton, pe bara de stare a ferestrei apare un text. Alt text apare la
îndepărtarea mouse-lui de pe buton (figura 2.11).

<input type=button value=rosu onclick="r()" onmouseover="window.status='Ati ales fundal


rosu'"
onmouseout="window.status='Alegeti culoarea fundalului !'">&nbsp
<input type=button value=albastru onclick="b()" onmouseover="window.status='Ati ales fundal
albastru'" onmouseout= "window.status='Alegeti culoarea fundalului !'">&nbsp
<script type="text/javascript">
function r()

51
{
document.bgColor="red"
}
function b()
{
document.bgColor="blue"
}
</script>

Figura 2.11. Evenimente legate de acţiuni cu mouse-ul


window.status=‘‘text” – afişează text în bara de stare,
document.title=‘‘text” – afişează text în bara de titlu.
În afara evenimentelor generate de utilizator pot fi tratate şi evenimente ce se produc automat. Apar
evenimente ca:
• 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.
<script type=‘‘text/javascript”>
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


Un obiect trebuie înţeles ca o structură ce reuneşte mai multe funcţii şi variabile sub acelaşi nume.
Funcţiile unui obiect reprezintă metode iar variabilele obiectului sunt proprietăţi.
Obiectele permit reutilizarea unui cod deja existent şi sunt folosite în mai toate limbajele de
programare orientate pe obiect. 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. Din window
derivează: frame, document, location, history, din document derivă image, form, ş.a.m.d.Pe

52
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 in un sir, sau daca subsirul nu e
gasit, valoarea
italics() returneaza un sir in italic (scris aplecat)
lastIndexOf() returneaza pozitia primei aparitii a unui
subsir in un sir, sau daca acesta nu e gasit,
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, altfel
returneaza
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

53
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
getMinutes() returneaza minutele
getSeconds() returneaza secunda
setTimeout(”funcţie”,timp) timp se exprimă în ms

Exemple
Script care să afişeze ‘‘Aţi intrat pe pagina astăzi: … ora …
<script type=‘‘text/javascript”>
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:


<script type=‘‘text/javascript”>
function timp()
{
ceas=new Date()
ora=ceas.getHours()

54
min=ceas.getMinutes()
sec=ceas.getSeconds()
window.status=ora+”:”+min+”:”+sec
setTimeout(”timp()”,100)
}
setTimeout(”timp()”,100)
</script>

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
În cadrul scriptului fereastra deschisă poate fi identificată prin variabilă:
f=window.open ()
Are sens:
f.document.write() – scrie în fereastra f
f.document.title() – stabileşte titlul ferestrei
f.document.bgColor() – stabileşte culoare de fond a documentului din fereastra deschisă
<script type=‘‘text/javascript”>
function fereastra()
{
f=window.open()
f.document.write(”<H1>RECLAMA</H1>‘‘)
f.document.bgColor(”cyan”)
}
</script>
<body onload=fereastra()>
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

55
Metodă moveTo(i,j) mută o fereastră cu i pixeli spre dreapta şi j pixeli în jos.
Exemplu: Script care să deschidă o fereastră ce se deplasează în partea de sus pâna la mijlocul
ecranului. Un buton va închide fereastra.
<script type=‘‘text/javascript”>
function fer()
{
f=window.open(”‘‘,””,”width=200, height=100, top=0, left=0”)
f.document.write(”Reclama”)
for(i=0;i<300;i++)
f.moveTo(i,0)
}
</script>
<body onload=fer()>
<input type=‘‘button” value=‘‘Inchide fereastra” onclick=‘‘f.close()”>

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:

• 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”.

56
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.

<script type=‘‘text/javascript”>
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)
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. Dacă imaginea la care vă referiţi este prima din pagină va funcţiona exemplul <img
src=‘‘x.gif” onmouseover=document.images[0].src=‘‘y.gif”

57
onmouseout=document.images[0].src=‘‘x.gif”>

Dacă la introducerea imaginii acesta primeşte şi un nume, acesta poate fi folosit în cadrul unui
script pentru referirea imaginii <img src=‘‘x.gif” name= “poza” Onmouseover = document.poza.src
=‘‘y.gif” onmouseout = document.poza.src = ‘‘x.gif”>.

Exemplu: Pagină ce afişează 2 imagini mici. Când se plasează mouse-ul pe o imagine


aceasta să apară cu chenar iar când se executa clic să apară mai jos redimensioantă:
<table>
<tr><td>
<img src=‘‘x.gif” width=50 height=40
onmouseover=document.images[0].border=2
onmouseout=document.images[0].border=0
onclick=‘‘document.images[2].src='x.gif'‘‘>
<td><img src=‘‘y.gif” width=50 height=40
onmouseover=document.images[1].border=2
onmouseout=document.images[1].border=0
onclick=‘‘document.images[2].src='y.GIF'‘‘>
</table>
<br><br><br><br>
<img src=‘‘‘‘ width=200 height=100 alt=‘‘Afiseaza poza”>

Exemplu: Script ce derulează în pagină trei imagini, din 3 în 3 secunde

<html>
<script type=‘‘text/javascript”>
imagini=new Array()
imagini[0]=‘‘x.gif”
imagini[1]=‘‘y.gif”
imagini[2]=‘‘z.gif”
i=-1
function banner()
{
i++
document.images[0].src=imagini[i]
if(i==2)
i=-1
setTimeout(”banner()”,3000)
}
</script>
<body onload=‘‘banner()”>
<img src=x.gif></html>
Aplicatie: realizaţi o pagina ca în figura 2.12 ce permite salectarea unei date şi afisarea acesteia.

<html><head><title> aplicatie obiecte java </title>


<script>
function f1(z,l,a)
{
zi="";
luna="";
an="";
for(j=0;j<31;j++)

58
if (z[j].selected) zi=z[j].value;
for(j=0;j<12;j++)
if (l[j].selected) luna=l[j].value;
for(j=0;j<40;j++)
if (a[j].selected) an=a[j].value;
r=an+"-"+luna+"-"+zi
alert(r)
}
</script></head><body><form>
<h1><center> Obiectul document</center></h1>
<table><tr><td><center> ziua </center></td>
<td><center> luna </center></td>
<td><center> anul </center></td>
</tr><tr><td><script>
document.write("<select name='z'>");
for(i=1;i<=31;i++)
{document.write("<option value="+i+">");
document.write(i);
document.write("</option>");
}
document.write("</select>")
</script>
</td><td>
<script>
document.write("<select name='l'>");
for(i=1;i<=12;i++)
{document.write("<option value="+i+">");
document.write(i);
document.write("</option>");
}
document.write("</select>")
</script>
</td>
<td>
<script>
document.write("<select name='a'>");
for(i=2030;i>=1951;i--)
{document.write("<option value="+i+">");
document.write(i);
document.write("</option>");
}
document.write("</select>")
</script>
</td>
<input type="button" name="b1" value="afiseaza" onclick="f1(z,l,a)">
</form></BODY></html>

59
Figura 2.12 Selectare elemte de tip data şi afişarea acestora

Realizaţi pagina html care permite crearea unui tabel cu numărul de linii şi coloane
specificat. Tabelul are culoarea de fundal aleasă dintr-o lista, ca în figura 3.13.

<html><head><title> Comanda window </title>


<script>function tab(t1,t2,s)
{
r=t1.value; r=parseInt(r);
c=t2.value; c=parseInt(c);
//cul="white";
//for(i=0;i<3;i++)
//if(s[i].selected)
cul=s.value;
document.write("<table border='1', width=100, height=100 bgcolor="+cul+">");
for(i=1;i<=r;i++)
{document.write("<tr>");
for(j=1;j<=c;j++)
document.write("<td><br></td>");
document.write("</tr>");
}document.write("</table>")
}</script></head>
<body><h1><center> aplicatie tabel </center></h1>
<form><br><table><tr>
<td>Nr. randuri </td><td><input type="text" name="t1"></td>
<tr><td>Nr. coloane </td> <td><input type="text" name="t2"></td>
<tr><td>Culoare fundal tabel </td>
<td><select name="s" size="3">
<option value="red"> Rosu </option>
<option value="blue"> Albastru </option>
<option value="green"> Verde </option>
</td></select><tr>
<td><input type="button" name="genereaza" value="Genereaza tabel"
onclick="tab(t1,t2,s)"></td>
<input type="reset" name="b2" value="reset">
</table></form></BODY>
</html>

60
Figura 2.13. Creare şi personalizare tabel în modul programat

Să se realizeze o pagină cu funcţii complexe ca în figura 3.14, care utilizează obiectele


document, window şi date.

<html><head><title> </title>
<script>function f1()
{fer=window.open("../24 ian/ex1.html","_blank","top=0,left=500, width=500, height=350,
toolbar=yes ,menubar=yes, scrollbars=yes")
} function f2()
{fer.close() }
function f3(){window.close()}
function f4(){fer.blur()}
function f5(){fer.focus()}
function f6(){fer.moveBy(100,100);
fer.focus();}
function f7(){fer.moveTo(500,300);
fer.focus();} function f8()
{
fer1=window.open("","","width=100, height=100, top=300, left=0")
for(i=0;i<=1000;i++)
{fer1.moveTo(i,300);
fer1.focus();if (i==1000) fer1.close()
}}
function f9()
{
fer1=window.open("","","width=100, height=100, top=300, left=0")
for(i=0;i<=1000;i++)
{fer1.moveTo(i,300);
fer1.focus();

61
//setTimeout("comanda",perioada de intarziere - e in milisecunde)
}setTimeout("fer1.close()",2000);
}</script></head><body>
<form>
<h1><center> Aplicatie complexa cu obiecte Javascript</center></h1>
<input type="button" name="b1" value="deschidere fereastra" onclick="f1()">
<input type="button" name="b2" value="inchidere fereastra deschisa" onclick="f2()">
<input type="button" name="b3" value="inchidere fereastra curenta" onclick="f3()">
<input type="button" name="b4" value="ascundere fereastra" onclick="f4()">
<input type="button" name="b5" value="always on top" onclick="f5()">
<input type="button" name="b6" value="muta la coordonatele" onclick="f6()">
<input type="button" name="b7" value="muta la distanta de..." onclick="f7()" >
<input type="button" name="b8" value="deschide,muta şi inchide o fereastra" onclick="f8()">
<input type="button" name="b8" value="deschide,muta şi inchide o fereastra - delay"
onclick="f9()" ></form></BODY></html>

Figura 2.13. Utilizarea obiectelor din JavaScript

62
MODULUL III. CONSTRUIREA DOCUMENTELOR XML
3.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 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.
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. Nu numai că un HTML bine
făcut este foarte aproape de XHTML – un înlocuitor al HTML care respectă XML – dar un
cod HTML 4.0 curat este destul de lizibil ca XHTML 1.0. Deoarece HTML 4.0 a fost
structurat ca o aplicaţie SGML, iar XML este o submulţime a SGML, acest lucru este logic.
Diferenţele sintactice minore dintre XHTML, un vocabular XML, şi HTML, un vocabular
SGML, pot fi ajustate automat dacă este nevoie. Autorul unui document XML oferă de
obicei un manual de creare sau codare (sau o foaie, pentru DTD-uri mici) descriind
etichetele utilizate în aplicaţia XML, atributele lor, valorile posibile şi modul lor de
imbricare. Urmărirea unui astfel de manual de codare nu este mai dificilă decât reţinerea
faptului că o linie de tablou <td> trebuie să fie imbricată în interiorul unui tablou <table> şi
nu are, sau nu ar trebui să aibă, sens în afara acelui context. Pentru majoritatea situaţiilor,
acest lucru este suficient. XML este capabil să ofere autorilor suficient ajutor în învăţarea
modului de utilizare a unei anumite aplicaţii, deoarece aceştia sunt încurajaţi să dea
etichetelor nume sugestive, care să fie uşor de reţinut.
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;

63
• 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.

3.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. 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.
• 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

64
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.

3.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
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}” [

65
{declaraţiile DTD-ului intern}
]>
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 <![CDATA[ informatii cdata]]>
Declaratiile tipului documentului <!DICTYPE nume idextermen? [informatii 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 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

66
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>
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.
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

67
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.
3.4 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.
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

68
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.
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 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.

3.5 Date, 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

69
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.
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.
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 modelează un
document XML ca o singură tabelă sau ca un set de tabele. Structura documentului XML
este arătată în exemplul următor.
<bazadedate>
<tabela>
<linie>
<coloana1>...</coloana1>
<coloana2>...</coloana2>
...
</linie>
<linie>
...
</linie>
...
</tabela>
<tabela>
...
</tabela>
...
</bazadedate>
În funcţie de software datele din coloane pot fi stocate ca elemente descendente sau ca

70
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.

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:

71
<Client>
<Nume>ABC </Nume>
<Adresa>
<Strada>Calea Vacaresti.</Strada>
<Sector>1</Sector>
<Tara>Romania</Tara>
<CodPostal>0040</CodPostal>
</Adresa>
</Client>
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.

3.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 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.

72
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;)> <!-- Inline entity from XHTML -->
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 ‘‘Chen”, aplicaţia execută
următoarea interogare:
SELECT Brosura
FROM Brosuri
WHERE BrosuraID IN (SELECT BrosuraID FROM Autori WHERE Autor= 'Ionescu')
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;

73
• 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 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. 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:
<?xml version="1.0"?>
<rss version="2.0">
<channel>

74
<title>Titlul canalului </title>
<description>Explicatia</description>
<link>http://www.legatura_catre_pagina_articolului</link>
<item>
<title>Primul titlu</title>
<description>Descriere</description>
<link>http://www.legatura_catre_pagina_articolului</link>
</item>
<item>
<title>Titlul 2 </title>
<description>Descrierea</description>
<link>http://www.legatura_catre_pagina_articolului</link>
</item>
</channel>
</rss>

75
Modulul IV. PHP şi MySQL

PHP este un acronim care provine din "Hypertext Preprocessor" şi 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. Sintaxa sa provine din C,
Java şi Perl şi este uşor de învăţat. 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. De asemenea, 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).

Această aplicaţie este disponibilă, gratuit, pe Internet, pentru medii Unix cât şi pentru medii
Windows, integrându-se în severul Apache.

Istoria PHP-ului începe la sfârşitul anului 1994, când Rasmus Lerdorf dezvoltă prima
versiune, ca proiect personal. PHP-ul este făcut public în anul 1995 sub denumirea de
Personal Home Page Tools, fiind considerat un analizor simplist ce puteau fi incluse în
cadrul documentelor HTML, permiţând contorizarea accesului la paginile. Analizorul a fost
rescris la mijlocul aceluiaşi an şi denumit apoi PHP/FI 2.0, unde FI era o alta aplicaţie scrisă
de Rasmus Lenford. Ultetrior a fost adăugat şi suportul pentru bazele de date mSQL şi astfel
PHP/FI a început să aibă succes, fiind disponibil gratuit pe Web. Programatorii Zeev Suraski
şi Andi Gutmans rescriu analizorul PHP şi noua aplicaţie formează nucleul versiunii PHP
3.0 care include o parte din vechile surse PHP/FI 2.0. Relativ recent, la începutul anului
2000, a fost făcută publică versiunea PHP 4.0, utilizând puternicul motor de scriptare Zend
şi oferind suport nu numai pentru serverul Apache ci şi pentru alte servere Web. De
asemeni, PHP 4.x oferă posibilitatea accesării documentelor XML via DOM.
PHP în versiunea curentă 5.2.8 lansat pe 08 decembrie 2008 şi reprezintă un pachet
puternic care oferă un limbaj de programare accesibil din cadrul fişierelor HTML, limbaj
asemănător cu Perl sau C. Marea calitate şi cel mai mare avantaj al limbajului PHP este
posibilitatea de conexiune cu un număr mare de baze de date. A realiza o pagină web
dinamică cu o bază de date este extrem de simplu. Cea mai folosită dintre ele este denumită
MySQL.
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.

76
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 dîntreun 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:
• 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 (vezi figura 4.1 şi 4.2).

77
Figura 4.1 Fereastra localhost

Figura4.2 Fereastra browserului pentru rularea scripturilor

78
VARIABILE GLOBALE sunt 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.
Constante

• constantă stochează o valoare, ca şi o variabilă, doar că după ce a fost stabilită nu mai


poate fi modificată în script.
• numele constantelor se scriu cu majuscule.
• definirea lor se realizează cu funcţia define().
• diferenţa importantă între constante şi variabile este faptul că o constantă nu are în
faţa denumirii semnul $.

<?php
define(‘DISCIPLINA’,’PHP-MySQL’);
define(‘SPECIALIZARE’,’informatica’);
echo “Specializarea “.SPECIALIZARE.” studiaza disciplina “.DISCIPLINA;
?>

Constante predefinite limbajul PHP conţine un număr mare de constante predefinite pentru
fiecare script care rulează.
__LINE__ conţine numărul curent al liniei din fişier
__FILE__ calea şi numele fişierului curent
__FUNCŢION__ returnează numele funcţiei care a fost
declarată
__CLASS__ returnează numele clasei care a fost
declarată
__METHOD__ returnează numele metodei care a fost
declarată;

Crearea scripturilor PHP

79
Pentru crearea scripturilor PHP este necesar un editor de texte obişnuit, deşi există şi
editoare specializate. Totuşi, dacă folosiţi un instrument diferit de Notepad, trebuie să luaţi
măsuri pentru a salva scriptul dumneavoastră sub formă de document text, în caz contrar,
fişierul script conţine informaţii de formatare care vor deruta serverul PHP. Numele
fişierului trebuie să fie alcătuit numai din caractere minuscule, cifre şi liniuţe. Utilizarea
spaţiilor şi a altor caractere este interzisă. Extensia numelui fişierelor trebuie să fie *.php.
Fiecare script PHP include două linii, care indică serverului că textul cuprins între acestea
este format din instrucţiuni PHP.

<?php
// continutul scriptului
?>
sau, echivalent:
<?
// continutul scriptului
?>

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 */
// continutul scriptului
?>
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

80
• Break
• Continue
• Declare

Exemplu:
<?php
$arr = array('a', 'b', c', 'stop', d', 'e');
while (list (, $val) = each ($arr)) {
if ($val == 'stop') {
break;
}
echo "$val<br />\n";
}

/* Utilizand argumente optionale. */

$i = 0;
while (++$i) {
switch ($i) {
case 5:
echo "At 5<br />\n";
break 1; /* sfarsit switch-ul. */
case 10:
echo "Mesaj 1<br />\n";
break 2; /*sfarsit switch şi while. */
default:
break;
}
}
?>

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.

Exemplu:

<?php
$i = 0;
while ($i++ < 5) {
echo "mesaj 1<br>";
while (1) {
echo "&nbsp;&nbsp;Mesaj 2<br>\n";
while (1) {
echo "&nbsp;&nbsp;Mesaj 3r<br>\n";
continue 3;
}
echo "Acesta nu va fi afisat.<br>\n";
}
echo "Nici una din acestea.<br>\n";

81
}
?>

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. Există două
sintaxe posibile:
foreach( array_expresion as $value)
{
listă de instrucţiuni
}

foreach( array_expresion as $key => $value)


{
listă de instrucţiuni
}

Prima formă trece în revistă tabloul array_expression. La fiecare iteraţie, valoarea


elementului curent este atribuită lui $value şi pointerul intern al tabloului este incrementat
cu un element (astfel, la următoarea iteraţie aveţi acces la următorul element). A doua formă
face acelaşi lucru, dar indicele elementului curent va fi atribuită variabilei $key la fiecare
iteraţie. Când foreach începe să fie executat, pointerul intern al fişierului este automat
repoziţionat pe primul element al tabloului. Acest lucru înseamnă că nu veţi avea nevoie să
faceţi apel la reset() înainte de foreach.
Exemplu

<?php
$arr = array("1", "2", "3");
reset ($arr);
while (list(, $value) = each ($arr)) {
echo "Value: $value<br />\n";
}

foreach ($arr as $value) {


echo "Value: $value<br />\n";
}
?>

sau

<?php
$arr = array("1", "2", "3");
reset($arr);
while (list($key, $value) = each ($arr)) {
echo "Key: $key; Value: $value<br />\n";
}

foreach ($arr as $key => $value) {


echo "Key: $key; Value: $value<br />\n";
}
?>

82
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:
• 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

83
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup

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 ”.

Î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”.

Verificari şi exemple
Înainte de a prelucra date este indicat să:
- se testează dacă au fost trimise datele pentru fiecare câmp (funcţia isset),
- se verifică dacă acel câmp conţine valoare nenula (funcţia empty),
- dacă prelucrarea datelor se face în acelaşi fişier cu formularul, se va introduce şi o linie de
iniţializare a variabilelor echivalente câmpurilor din formular.
O variabilă se preia dintr-un formular prin una din modalităţile :

1. $_POST[“nume_variabilă”] sau cu $_GET[“nume_variabilă”] (în funcţie de atributul


method al formului, acesta poate fi post sau get),
2. se poate utiliza şi $HTTP_POST_VARS[“nume_variabilă”] rspectiv
$HTTP_GET_VARS[“nume_variabilă”],
3. dacă în PHP.ini (fisierul de configurare al php-ului) este setat register_globals=on atunci
se poate utiliza forma $nume_variabilă.
Exemplu pentru preluare date din fişierul „test.html” şi transmiterea acestora fişierului
test.php.

<form action="test.php" method="POST">


Introduceti numele : <input type="text" name="name"><br>
<input type="submit" value="Trimite">
</form>

Fişierul test.php” arată

<?php
echo "Bun venit ".$_POST["name"]." !!";
?>

84
Exemplu pentru preluare date din fişierul „test1.html” şi transmiterea acestora fişierului
test1.php.

<form action="test1.php" method="POST">


Alb <input type="checkbox" name="color_alb" value="alb"><br>
Rosu <input type="checkbox" name="color_rosu" value="rosu"><br>
Verde <input type="checkbox" name="color_verde" value="verde"><br>
<input type="submit" value="Trimite">
</form>

Fişierul „test1.php” arată


<?php
echo "Ati selectat culorile :<br>";
if($_POST["color_alb"]!="")
echo "Culoarea ".$_POST["color_alb"]." !!<br>";
if($_POST["color_rosu"]!="")
echo "Culoarea ".$_POST["color_rosu"]." !!<br>";
if($_POST["color_verde"]!="")
echo "Culoarea ".$_POST["color_verde"]." !!<br>";
?>
Exemplu pentru preluare date din fişierul „test2.html” şi transmiterea acestora fişierului
test2.php.
<form action="test2.php" method="POST">
Alb <input type="radio" name="color" value="alb"><br>
Rosu <input type="radio" name="color" value="rosu"><br>
Verde <input type="radio" name="color" value="verde"><br>
<input type="submit" value="Trimite">
</form>

Fişierul „test2.php” arată

<?php
echo "Ati selectat culoarea :".$_POST["color"]." !!!";
?>

Exemplu pentru preluare date din fişierul „test3.html” şi transmiterea acestora fişierului
test3.php.

<form action="test3.php" method="POST">


Selectează culoare :
<select name="color[]" MULTIPLE size="3">
<option>alb</option>
<option>negru</option>
<option>rosu</option>
<option>verde</option>
<option>albastru</option>
<option>galben</option>
</select>
<input type="submit" value="Trimite">

85
</form>

Fişierul „test3.php” arată

<?php
if(is_array($_POST["color"])){
$c=count($_POST["color"]);
echo "Ati selectat culorile<br>";
foreach ($_POST["color"] as $key => $value)
echo "$value<br>";
}
else{
echo "Ati selectat culoarea :".$_POST["color"]." !!!";
}
?>
Exemplu de aplicaţie care operează cu liste de selecţie din care preiau date cu metoda POST
şi sunt transmise fişierului exemplu.php.

Fişierul „*.HTML” conţine:


<html>
<head>
<title></title>
</head>
<body>
<form name="f" action="exemplu.php" method="post">
<SELECT name="s" size="3">
<option value="Carti">Carti</option>
<option value="Caiete">Caiete</option>
<option value="Rechizite">Rechizite</option>
<br>
<input type="submit" value="trimite">
<input type="reset" value="reset">
</form>
</body>
</html>

Fişierul „exemplu.php” conţine:


<?php
$a=$_POST["s"];
if ($a) echo $a;
else
echo "nu ai bifat nimic"
?>
Aplicaţie care preia numele şi parola ultilizatorului, le compară iar dacă nu sunt corecte
reafişează formularul (vezi figura 4.3).

86
Figura 4.3 Fereastra browserului pentru testare user şi parola

Fişierul html are codul de mai jos.

<html>
<head>
<title></title>
</head>
<body>
<form name="f" action="test.php" method="post">
<h1>Nume:</h> <input type="text" name="t1">
<br>
<h1>Parola:</h><input type="password" name="t2">
<br>
<input type="submit" value="trimite">
<input type="reset" value="reset">
</form>
</body>
</html>

Fişierul test.php la care sunt transmise datele are codul:


<?php
$a=$_POST["t1"];
$b=$_POST["t2"];
if ($a=="student" && $b=="utm")
echo "ok";
else
echo "<h1>ai gresit</h>";
include "ex12.html";
//functia include are rol de reapelare a fisierului html, în scopul reafişării formularului.
?>

Aplicaţie care prin intermediul butoanelor radio modifică culoarea de fundal a paginii ca în
figura 4.4.

87
Figura 4.4 Fereastra browserului cu butoane radio
Fişierul html are codul:
<html>
<head>
<title></title>
</head>
<body>
<form name="f" action="ex13.php" method="post">
<input type="radio" name="r" value="red">rosu
<br>
<input type="radio" name="r" value="blue"> albastru
<br>
<input type="radio" name="r" value="green"> verde
<br>
<input type="submit" value="trimite">
<input type="reset" value="reset">
</form>
</body>
</html>
Fişierul ex13.php la care sunt transmise datele are codul:
<?php
$a=$_POST["r"];
if ($a) echo "<html>
<head>
<title></title>
</head>
<body bgcolor='".$a."'>
<form name='f' action='ex13.php' method='post'>
<input type='radio' name='r' value='red'>rosu
<br>
<input type='radio' name='r' value='blue'> albastru
<br>
<input type='radio' name='r' value='green'> verde
<br>
<input type='submit' value='trimite'>
<input type='reset' value='reset'>
</form></body>
</html>"
?>

88
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. În momentul întâlnirii acestei construcţii execuţia funcţiei se
încheie. Rezultatul obţinut după apelarea unei funcţii poate fi de orice tip de dată. Funcţiile
pot returna vectori şi obiecte.

Funcţii de afişare
¾ Print(şir)
¾ Print_r($variabilă) – afişează informaţii despre o variabilă, într-un format uşor de
înţeles.
¾ nl2br(şir) – inserează rânduri noi (HTML) acolo unde a fost folosit caracterul special
\n.
¾ var_dump(variabilă) – afişează informaţii despre o variabilă

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.
• 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.

89
• 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);

Exemplu de 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++)
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;
?>

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)

90
{
// corpul funcţie;
}
Cuvântul cheie function, numele funcţie şi lista cu argumente formează antetul funcţie.
Termenul de corp al funcţie se referă la instrucţiunile incluse între acoladele care urmează
dupa antetul funcţie. Instrucţiunile din corpul funcţie sunt executate atunci când funcţia este
apelată.
Exemplu de funcţie care returnează aria unui dreptunghi.
function calculează_arie($lungime,$latime)
{
return $lungime, * $latime;
}
Corpul funcţie este alcatuit dintr-o singura instructiune; cu toate acestea, corpul unei funcţii
poate conţine un numar arbitrar de instrucţiuni. Dacă doriţi ca o funcţie să returneze o
valoare, trebuie să determinaţi funcţia să execute o instrucţiune return care furnizează
valoarea respectivă. Instrucţiunea return determină orpirea executarii funcţie. Dacă se
crează o funcţie care nu are nici o instructiune return, atunci funcţia va returna valoarea
speciala NULL.
O funcţie definita de utilizator poate fi apelată în acelasi mod ca o funcţie incorporatăa.

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
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)

91
î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.

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)

92
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)


funcţie rol sintaxă
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 array array_keys( array
sau şiruri de caractere) ale tabloului input [, mixed
input. search_value])

array_merge funcţia concatenează elementele a array array_merge( array


două sau mai multe tablouri astfel array1, array array2 [, array
încât elementele unui tablou se adaugă ...])
la sfârşitul tabloului precedent.
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ă.

93
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])])
sizeof int sizeof( array array)
funcţia returnează numărul de
elemente dintr-un tablou.

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;

94
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. Argumentele funcţiilor reprezintă un tip important de variabilă locala. Se
poate crea o variabilă locala prin simpla atribuire a unei valori unei variabile din interiorul
unei funcţii. Pentru a ilustra deosebirea dintre variabilele locale şi cele globale. 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";
}
$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. Spre
deosebire de acestea, valorile variabilelor cookie se pot păstra un timp indefinit. Browserul
utilizatorului stocheaza variabilele cookie în unitatea de hard-disk locală a utilizatorului.
Variabilele cookie sunt utile pentru păstrarea preferinţelor utilizatorului. Când utilizatorul
revine la pagina vizitată, variabilele cookie permit browserului să recunoască utilizatorul şi
să restaureze opţiunile selectate de utilizator.
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-

95
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.

Variabila PHP de tip tablou asociativ HTTP_COOKIE_VARS conţine numele şi valoarea


fiecărei variabile cookie curentă. Dacă doriţi să vizualizaţi fiecare variabilă cookie
disponibilă şi valoarea acesteia, puteţi utiliza funcţia phpinfo(), care afişează valoarea
tabloului HTTP_COOKIE_VARS. De asemenea se poate utiliza şi scriptul:

foreach($HTTP_COOKIE_VARS as $numevar => $valoare) echo "<br>$numevar =>


$valoare";

Pentru a crea o variabilă cookie, trebuie invocată funcţia setcookie(), care are sintaxa

setcookie(nume, valoare, expirare)

Ştergerea unei variabile cookie - o variabilă cookie are o dată de expirare, aceasta va fi
ştearsă automat la un oarecare interval de timp după crearea sa. O variabila cookie se poate
şterge şi imediat, daca se fixeaza momentul expirării variabilei cookie la un moment de timp
din trecut. Un site web poate stoca numai 20 de variabile cookie în sistemul unui utilizator,
rezultă că, capacitatea de a stoca mai multe valori într-o singură variabilă cookie este utilă.
Pentru aceasta, se insereaza valorile într-un tablou şi se utilizează funcţia serialize() pentru a
"împacheta" elementele tabloului într-un şir; valoarile tabloului se pot recupera cu funcţia
unserialize(). Exemplu care depaşeşte limita de 20 de variabile cookie dar nu poate depăşi
limita spatiului de 4 KB (pentru stocarea într-o variabilă cookie).
<?php
// definire tablou
for ($i = 0; $i < 35; $i++)
$tablou[$i] = $i;
// se impacheteaza intregul tablou intr-un sir
$sir = serialize($tablou);
// se creeaza o variabila cookie
setcookie("cookies", $sir);
if (isset($cookies))
{
// se despacheteaza valoarea variabilei cookie
$rezultat = unserialize(stripslashes($cookies));
// se afiseaza elementele tabloului din variabila cookie
foreach($rezultat as $i => $cookie)
{
echo "<br>$i => $cookie";
} } ?>

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.

96
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 realizează cu uşurinţă importarea diverselor baze de date şi exportarea sub
forma fişierelor sql. Tranzacţiile nu sunt parte a tabelelor implicite(ISAM) ale lui MySQL,
dar sunt incluse două tipuri noi de tabele Berkley DB(BDB) şi InnoDB care au fost
dezvoltate de alte firme.
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.
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).

97
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:
• Monitorul MySQL – un instrument cu linie de comandă pentru interactionarea
cu serverul MySQL;
• phpMyAdmin, o interfaţă MySQL bazată pe PHP.
Interfaţa grafică în mediul integrat de lucru cu PHPMyAdmin arată ca în figura 4.6.

Figura 4.6 Intertefaţa grafică phpMyAdmin

O bază de date poate conţine mai multe tabele, fiecare cu propria sa structură (figura 4.7).

Figura 4.7 Tabela carti din baza de date cursuri

98
Câmpuri numerice

Unul dintre cele mai utilizate tipuri de câmpuri în MySQL este Int (integer), care poate
stoca valori cuprinse între –2.144.483.648 şi 2.144.483.644. 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ă.

Toate tipurile de date ce se pot utiliza pentru un câmp sunt vizibile în figura 4.8.

99
Figura 4.8 Tipurile de dată pentru un câmp
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;

100
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;

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.

4. 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 `observatii` VARCHAR(40) NOT NULL;

Pentru a schimba denumirea câmpului observatii în obs, comanda este:


ALTER TABLE `cursuri`.`carti` CHANGE `observatii` `obs` 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ă.

101
Forma generală a comenzii este:
INSERT INTO nume_tabelă [(câmp1,camp2,…,câmp n)] VALUES (valoare1,valoare2,…,
valoare n);
Exemplu:
INSERT INTO `carti` (`codc`, `numecarte`, `autor`, `data`, `pret`, `stoc`, `valoare`,
`observatii`) VALUES ('22', 'Informatica', 'Pirnau Mironela', '01/03/2009', '0', '100', NULL,
'');
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


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]
Exemplu:
SELECT `codc`,`numecarte`,`autor`,`data`,`pret`,`stoc`,`valoare`,`observatii` FROM `carti`
WHERE 1 LIMIT 0, 30
În MySQL se pot folosi caracterele % (care înlocuieşte orice şir de caractere) şi _
(underline) pentru înlocuirea unui singur caracter, în combinaţie cu operatorul LIKE. De
exemplu, pentru a afişa posturile în a căror descriere se întâlneşte şirul de caractere “web”,
comanda este:
select * from posturi where descriere like ’%web%’;
Pentru a afişa numărul de înregistrări se foloseşte funcţia COUNT: select count (*) from
posturi where domeniu=’Informatica’;
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");
?>

Funcţia mysql_connect se conectează la MySQL folosind ca parametri adresa


serverului unde rulează MySQL (dacă il aveti instalat pe propriul calculator aceasta este
localhost), user-ul ( dacă il aveti instalat pe propriul calculator aceasta ar trebui sa fie root)
şi parola (dacă il aveti instalat pe propriul calculator aceasta ar trebui sa nu existe).

Dacă MySQL instalat pe staţia de lucru atunci conexiunea la baza de date se


realizează:

<?php
$link = mysql_connect("localhost", "root", "")

102
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.

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.Exemplu:
<HTML>
<?
$gazda="localhost";
$user="root";
$parola="";
MYSQL_CONNECT($gazda,$user,$parola) or die("Conexiune MYSQL eronată!");
$b="carti";
mysql_select_db("$b") or die("Conexiune cu baza de date eronată!");
$tabel="cv";
$query="select * from $tabel ";
$result=mysql_query($query);
$x=mysql_num_rows($result);
echo "Numărul de rânduri este $x ";
mysql_close();

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.
Exemplu:

103
$query=”delete from cv where id=12”;
$result=mysql_query($query);
$rânduri=mysql_affected_rows();
echo “S-au şters $rânduri înregistrări din baza de date”;

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(). Exemplu pentru a lista tabelele din
baza de date numită carti:

$tabele=mysql_list_tables(“carti”);
for($i=0; $i<mysql_num_rows($tabele); $i++)
{echo mysql_tablename($tabele, $i);}

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);
exemplu:
$to="test@diverse.ro";
$subiect="functia mail";
$mesaj="Mail trimis cu functia mail din PHP";
mail($to, $subiect, $mesaj);

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;

104
require() - funcţie care include în scriptul curent conţinutul unui fişier cu verificarea de a fi
introdus o singura dată (stre 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);

Exemplu: 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 {
echo "datele au fost introduse";
}
mysql_close($conexiune);
?>

În funcţie de valoarea mysql_query este afişat un mesaj despre introducerea datelor în tabel.

Utilizarea proprietăţilor Select, Update si Delete

SELECT - poate fi utilizata intr-o comanda mysql_query pentru a selecta anumite


informaţii din tabelele bazei de date.
Sintaxa pentru introducerea datelor în tabelul bazei de date este:
$sql=mysql_query("SELECT * FROM nume_tabel");
Pentru a afişa fiecare rănd din tabel se foloseşte o bucla while şi comanda mysql_fetch_row,
ca în exemplu:
<?php
include "conexiune.php";

105
$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>";
mysql_close($conexiune);
?>
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
include "conexiune.php";
$sql=mysql_query("SELECT * FROM carti");
$rows=$mysql_num_rows($sql);
echo "<b>$rows</b> inregistrari în baza de date<p>";
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>";
mysql_close($conexiune);
?>

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>
<input type="submit" value="Trimite">
</form>
</body>
</html>
/* urmează fisierul where.php */
<?php
include "conexiune.php";
$nume1=$_POST['nume1'];
$sql=mysql_query("SELECT * FROM proba WHERE nume='$nume1'");
echo "<table border=1>";
echo "<tr><td>ID</td><td>Nume</td><td>Prenume</td></tr>";
while ($row=mysql_fetch_row($sql)) {

106
echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>";
}
echo "</table>";
mysql_close($conexiune);
?>

UPDATE - modifică valoarea câmp dintr-o înregistrare a unei tabele, eventual


pentru un anumit id. Sintaxa este:

UPDATE nume_tabel SET câmp1 =' $val1, câmp2='$val2,..., câmpn='$valn' WHERE


id='$nou_id';

DELETE - şterge înregistrări dintr-o tabelă, ştergerea se face după un id, folosind
sintaxa:

DELETE FROM nume_tabel WHERE id='$id';

Aplicaţia 1

Să se preia dint-un formular datele de identificarea ale unui student, să se răspundă la 2


intrebari grilă şi să se afişeze apoi nota obţinută (figura 4.9)

Figura 4.9 Fereastra de autentificare şi ferestra de completare chestionar

Fişierul *.html are sursa:


<html>
<head>
<title></title>
<script>
function sterg(a)
{a.value="";}
</script>
</head>

107
<body>
<form name="f1" method="post" action="f2.php">
Nume
<input type="text" name="t1" onclick="sterg(t1)"><br>
Prenume
<input type="text" name="t2" onclick="sterg(t2)"><br>
Grupa
<input type="text" name="t3" onclick="sterg(t3)"><br>
Anul
<input type="text" name="t4" onclick="sterg(t4)"><br><br>
<input type="submit" value="Adauga">&nbsp
<input type="reset" value="Sterge">
</form>
</body>
</html>

Fişierul f2.php este:


<?php
$num=$_POST["t1"];
$pren=$_POST["t2"];
$gr=$_POST["t3"];
$an=$_POST["t4"];
if($num!=" " && $pren!=" " && $gr!=" " && $an!=" ")
echo"
<html>
<head>
<title></title>
</head>
<body>
<form name='f1' method='post' action='f3.php'>
Echipamentul standard de intrare este:<br>
<input type='radio' name='a1' value='Imprimanta'> Imprimanta<br>
<input type='radio' name='a1' value='Tastatura'> Tastatura<br>
<input type='radio' name='a1' value='Mouse'>Mouse-ul<br><br>
Echipamentul standard de iesire este <br>
<input type='radio' name='b1' value='Monitor'> Monitorul<br>
<input type='radio' name='b1' value='Imprimanta'> Imprimanta<br>
<input type='radio' name='b1' value='Plotter'> Plotter-ul<br><br>

<input type='hidden' name='x1' value='".$num."'><br>


<input type='hidden' name='x2' value='".$pren."'><br>
<input type='hidden' name='x3' value='".$gr."'><br>
<input type='hidden' name='x4' value='".$an."'><br><br>
<input type='submit' value='Calculeaza'>&nbsp
<input type='reset' value='Sterge'>
</form>
</body>
</html>";
else
echo"NU ati completat toate datele";
?>
Fişierul f3.php este:

108
$a=$_POST["a1"];
$b=$_POST["b1"];
$d1=$_POST["x1"];
$d2=$_POST["x2"];
$d3=$_POST["x3"];
$d4=$_POST["x4"];
echo"Studentul, <b>".$d1." ".$d2."</b> din anul ".$d4." grupa ".$d3 ;
$nota=2;
if($a=="Tastatura")
$nota=$nota+4;
if($b=="Imprimanta")
$nota=$nota+4;
echo" a obtinut<b><font color='red'> ".$nota."</font></b> puncte";
if($nota >=5)
echo" si sunteti<b><font color='red'> ADMIS</font></b>";
else
echo" si sinteti <b>RESPINS</b>";
?>

Problema propusa

Să se creeze în baza de date agend, 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 4.10.

Figura 4.10. Interfata care interacţionează cu baza de date

109
Modulul V. Dezvoltarea si apelarea servleturilor
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.
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).

110
Figura2. Ciclul de viață al servlet-ului
Parametrii Servlet-urilor
Sunt două mecanisme importante pentru a transmite informaţiile de configurare într-un
servlet. Parametrii de iniţializare sunt transmişi servletului atunci când acesta este încărcat
prima dată; ei sunt specificaţi într-o configuraţie suplimentară, separată de cea a servletului.
Aceşti parametrii sunt folosiţi pentru configurarea de informaţii generale, care se aplică
tuturor cererilor. Ei sunt de obicei configuraţi static de instrumentul de admistrare grafic,
altfel pentru servleturile SSI pot de asemenea să fie declarate într-un tag servlet in-line.
Depizând de metoda folosită pentru a invoca servletul, parametrii ceruţi pot fi de asemenea
specificaţi într-o cerere. Dacă parametrii sunt daţi în timpul execuţiei, spre deosebire de
parametrii daţi în momentul iniţializării, pot fi folosiţi pentru furniza informaţii particulare
unei anumite cereri.

Din momentul în care serverele creează o instanţă a unui servlet pentru a prelua cereri
distincte şi uneori concurente, programatorul trebuie să se concentreze asupra siguranţei firelelor de
execuţie pentru ca tehnicile de sincronizare standard să fie folosite ca să se asigure că servletul preia
cererile în siguranţă. Toate potenţialele accesări concurente ale unui servlet vor face apelări
concurente către metoda “service( )”. Blocurile de cod din această metodă ar trebui să nu fie
executate concurent, ele ar trebui sincronizate cu lacătele respective.
Servlet Beans
Servlet beans sunt servleturi adăugate la specificaţiile JavaBeans. Un servlet bean are mai
multe avantaje faţă de servleturile standard. În primul rând, un servlet bean poate fi distribuit într-un
fisier JAR care conţine toate clasele şi resursele servletului. Fişierul servlet JAR este instalat
deobicei în subdirectorul servletbeans al serverului. Un al doilea avantaj este că serverul gazdă
poate folosi introspecţia pentru a accesa proprietăţile servletului în stilul JavaBean. Acest lucru
permite ca servletul să primească informaţii noi fără să fie reîncărcat. Serverele, cum ar fi Java Web
Server, permit administrarea grafică a proprietăţilor servlet bean prin intermediul acestui mecanism.
Alt avantaj al servleturilor bean este că serverul gazdă poate să le serializeze automat. Odată ce o
proprietate a fost modificată, noul bean poate fi automat serializat astfel încât schimbarea să fie
efectuată. Următoarea dată când server-ul va încărca servletul, el poate fi încărcat din fişierul .ser în
loc să-l încarce din fişierul original JAR.

Acţiuni şi componente JavaBeans


Acţiunile sunt tag-uri JSP predefinite care folosesc varianta XML. Spaţiul de nume utilizat
este http://java.sun.com/JSP/Page şi de regulă se utilizează prefixul jsp.
Componente JavaBeans
Java, prin intermediul componentelor JavaBeans, oferă posibilitatea utilizării acestora de către
instrumente de editare a aplicaţiilor fără ca programatorul să intervină direct în codul acestora. Este
oferită şi facilitatea de reflexie, prin care putem determina atributele şi metodele unei clase.

111
Însă în cazul aplicaţiilor Web nu avem nevoie de toate facilităţile şi restricţiile dictate de
JavaBeans. Cele mai importante lucruri pe care trebuie să le cunoaştem despre componentele
JavaBeans, în contextul aplicaţiilor Web, sunt:
• Constructor fără parametri. Dintre toţi constructorii clasei, trebuie să existe unul fără
parametri sau să nu definim niciunul, caz în care va fi creat automat constructorul implicit.
• Nici un membru nestatic nu va fi public. Atributele nestatice vor fi declarate protected
sau private. Eventual se poate utiliza modificatorul de acces implicit (package). Pentru modificarea
valorilor se vor utiliza metode care să efectueze şi validări asupra datelor (de exemplu, atributul
vârstă nu poate avea o valoare negativă).
• Utilizarea de metode setter şi getter pentru accesarea membrilor nestatici. De
exemplu, dacă avem atributul vârstă de tip int, pentru modificarea valorii vom avea o metodă cu
prototipul void set varsta int varstaNoua, iar pentru obţinerea valorii, int get Varsta(). Pentru
obţinerea valorilor atributelor de tip boolean se vor utiliza metode cu prefixul is, de exemplu,
boolean is Batran() pentru atributul batran.
Pentru a utiliza o componentă JavaBeans în aplicaţiile Web vom utiliza acţiunea
jsp: useBean. Aceasta posedă atributele din tabelul urmator:
Atribut Descriere
Stabileşte un identificator pentru a putea fi referit ulterior. Se va crea o
Id
variabilă cu acest nume.
Stabileşte domeniul de vizibilitate pentru componente. Valorile posibile
Scope
sunt page, request, session şi application. Implicit este page.
Class Numele complet al clasei (inclusiv numele pachetului).
beanName Numele componentei JavaBeans.
Tipul variabilei care va fi creată. Poate coincide cu numele clasei (dat de
Type atributul class sau beanName), poate fi numele unei superclase a acesteia
sau numele unei interfeţe implementate.

În cazul în care o componentă cu acelaşi identificator există deja în domeniul de vizibilitate


specificat, se va utiliza respectiva componentă şi nu se va mai crea una nouă.
Nu vom utiliza niciodată simultan atributele class şi beanName. Acestea se exclud unul pe
celălalt.
Declararea componentei: <jsp:useBean id="categ" class="ro.mag.Categorie" />
este similară cu: <% ro.mag.Categorie categ = new ro.mag.Categorie(); %>
Pentru setare, avem la dispoziţie acţiunea jsp:setProperty. Aceasta prezintă atributele din
tabelul de mai jos.

Atribut Descriere
name Numele componentei asupra căreia se operează.
Numele proprietăţii (datei membre) pentru care se doreşte
property
actualizarea valorii.
Valoarea datei membre va fi dată ca parametru paginii JSP cu
param
numele specificat de acest atribut.
value Indică valoarea care va fi atribuită datei membre specificate.

Componentele JavaBeans pot fi accesate şi în expresiile cuprinse între $ { şi }. Acestea vor fi


evaluate în momentul execuţiei şi se vor înlocui cu valorile rezultate.
<h3>$ {categ.denumire} </h3> <p style="color: ${opţiuni.culoare}">
Bine ai venit ${param.utilizator}!</p>
Expresiile de acest tip se pot utiliza şi în interiorul tag-urilor, dar şi la valoarea atributelor.

112
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ă.
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().

113
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.
Definirea metodelor HTTP
Cererea clientului HTTP poate fi de două feluri : cerere simplă sau completă.

114
Î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 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.

115
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.

BIBLIOGRAFIE
1. PÎRNĂU, M., [2009], „Tehnologii Web”, Editura Titu Maiorescu, Bucureşti, (245 pag.);
ISBN 978-606-8002-23-1/004.55;
2. PÎRNĂU, M., [2006], „Utilizarea calculatoarelor şi servicii Internet”, Editura Elisavaros,
Bucureşti, (240 pag.); ISBN(10) 973-8400-42-2; ISBN(13) 978-973-8400-42-9
3. S. Buraga, Tehnologii XML, Polirom, Iaşi, 2006
4. S. Buraga, Semantic Web, Matrix Rom, Bucureşti, 2004
5. Gangemi, P. Mika, “Understanding the Semantic Web through Descriptions and
Situations”,International Conference ODBASE03, Italy, Springer, 2003
6. T. Anghel Dezvoltarea aplicaţiilor WEB folosind XHTML, PHP ŞI MySQL Ed. Polirom
Iaşi 2005
7. World Wide Web Consortium - W3C: http://www.w3c.org
8. www.php.net
9. www.w3schools.com
10. www.apache.org
11. www.mysql.com
12. http://www.oracle.com/technetwork/java/index.html
13. http://www.netbeans.org.

116
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, etc. 30%
- teste pe parcursul semestrului 10%

Conditia de participare la examen, este ca fiecare


student, sa realizeze un site, care va cuprinde minim 3
“pagini” pentru fiecare modul (Html, JavaScript, XML,
Php si MySql). Codul sursa al paginilor, vor contine si
“comentariile corespunzatoare”.

117
Modele bilete examen
BILET EXAMEN 1
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ă.


a. windows.status
GRILĂ b. document.fgColor
c. document.bgColor
1. O clasa de stiluri se apelează prin: 7. O listă de selecţie se introduce prin
a. <DIV ID=”clasa”> instrucţiunea:
b. <DIV CLASS=”clasa”> a. <input type=”select”>
c. <DIV STYLE=”clasa”> b. <select>
2. Alegeţi atributul corect pentru tagul <table> c. <form select>
a. color 8. Atributul checked ataşat unui buton radio are
b. align ca efect:
c. text a. Bifarea implicită a butonului
3. Introducerea unei imagini se realizează prin: b. Nu există acest atribut
a. <a src=”x.jpg”> c. Trebuie ataşat obligatoriu la toate butoanele
b. <a href=”x.jpg”> radio din acelaşi grup
c. <img src=”x.jpg”> 9. In PHP numele variabilelor trebuie să înceapă
4. Pentru afişarea unui mesaj in bara de stare cu:
putem folosi: a. _
a. onChange() b. $
b. window.status OK c. ?
c. document.title 10. Alegeţi varianta corectă pentru introducerea
5. O zonă de text se introduce prin: unei funcţii javascript:
a. <input type=”textarea”> a. function suma numere()
b. <textarea> b. function suma_nr()
c. <select textarea> c. sumanumere
6. Culoarea de fond a unei pagini Web se
stabileşte prin proprietatea:

Nota se calculează: 4 întrebări * 1.5 punct + 10 întrebări grilă * 0,3 puncte+1 punct din oficiu =10.

118
BILET EXAMEN 2

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).

Nota pentru partea scrisa se calculeaza: 6 întrebări * 1.5 puncte +1 punct din oficiu =10.

2
BILET EXAMEN -3

1. Realizaţi un script care să deschidă o fereastră cu dimensiunile 300x200 pixeli în care să apară textul
„FACULTATEA DE INFORMATICA” astfel incat proprietatile textului afisat vor fi – centrate, inclinate si de
culoare #ad123f.
2. Creaţi un fişier php care preia dintr-un formular html campurile marca student, nume student si grupa. Se
verifică dacă marca_student exista in tabela student. În caz afirmativ se afişează mesajul ”Student la Facultatea
de Informatica”, altfel, se va reafisa formularul însoţit de mesajul “eroare”.
3. Realizati un script php care utilizează funcţiile print_r, explode şi implode.
4. 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”.
5. Realizati un script ce derulează în pagină 4 imagini, din 5 în 5 secunde.
6. Explicati cel putin 5 functii php care au efect asupra tabelor dintr-o baza de date MySql.

Nota pentru proba scrisa se calculeaza: 6 întrebări * 1.5 puncte +1 punct din oficiu =10.