Tehnologii Web

UNIVERSITATEA TITU MAIORESCU FACULTATEA DE INFORMATICA

TTEEHHNNOOLLOOGGIIII WWEEBB

Mironela Pîrnău

- 2010 -

1

Cuprins

Modulul I. CREAREA PAGINILOR WEB CU HTMLModulul II. JAVASCRIPTModulul III. CONSTRUIREA DOCUMENTELOR XMLModulul IV. PHP şi MySQLModulul V. Dezvoltarea si apelarea servleturilorBibliografieModele 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

MMoodduulluull II.. CCRREEAARREEAA PPAAGGIINNIILLOORR WWEEBB CCUU HHTTMMLL 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: .

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

4

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

5

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

6

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

7

<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

definiţii: <dl>...</dl> (de la "definition list" = lista de definiţii) Observaţii:

- Un termen al listei este iniţiat de eticheta <dt> (de la "definition term" = termen definit);

- Definiţia unui termen este iniţiata de eticheta <dd> (de la "definition description" = descrierea definiţiei);

- Definiţia unui termen începe pe o linie noua şi este indentată; <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

8

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

9

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>

<h3>Pagina 1 </h3> <a href=" ex_1.14b.html">

</a> Link catre pagina 2</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ă

e utilizează atributul

g1" definită în aceeaşi pagina se utilizează eticheta <a> având

celaşi irector, atributul href primeşte o valoare de forma "nume_fisier.html#nume_ancora".

core definite în acelasi document si în alt document</title>

t document </h3>

><br><br><br><br><br><br><br><br><br><br>

"ancora1">ancora 1</a>

Ace e a trei atribute ale etichetei <body>:

pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului

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 sname care primeşte ca valoare un nume atribuit ancorei (de exemplu "leg1"). Pentru a insera o legătură catre "leatributul href de valoare "#leg1". Pentru a introduce o legătură către o ancoră definită în alt document (altă pagină) aflat în ad <html> <head> <title> An</head> <body> <h3>Ancore definite în acelasi document si în al<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><br><br><br><br><br><br><br><br><brbr><br><br><br><br><br><br><<a name=</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).

st atribute pot fi stabilite cu ajutorul • link pentru legaturile nevizitate; • vlink pentru legaturile vizitate; • alink pentru legaturile active.

ValorileRGB. <html> <head>

10

<title> Culori pentru lagaturi</title>

tru legaturi active, verde pentru legaturi legaturi nevizitate </h3>

pagina 11 </a>

ate afla legaturi care permit lansarea în execuţie a aplicaţiei de expediere a

ceasta se utilizează în construcţia adresei URL cuvântul mailto: urmat de o adresa e-mail

- at o aplicaţie de expediere a mesajelor electronice (Outlook Express,

a sa fie valida şi calculatorul sa fie conectat la Internet.

pediere de mesaje electronice</title>

mailto:[email protected]"> Mesaje catre autorul paginii </a>

</head> <body link="blue" vlink="green" alink="red"> <h3>Setarea culorilor pentru link-uri:<br>rosu penvizitate si albastru pentru<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</body> </html> Utilizarea poştei electronice Intr-o pagina Web se pomesajelor electronice. Pentru avalida. Pentru ca exemplul următor sa funcţioneze trebuie ca:

pe calculator sa fie instalMicrosoft Outlook etc.)

- adres<html> <head> <title> Ex</head> <body> <h3>Expediere de mesaje electronice</h3><br> <a href="</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

nload - care va permite:

saţi în execuţie aplicaţia capabila sa interpreteze corect fişierele de tipul respectiv

aturi catre fişiere oarecare</title>

fisier.zip">Link catre fisierul fisier.zip </a>

/html>

deschide o caseta de dialog - File dow- sa salvaţi pe discul local fişierul - sa lan<html> <head> <title> Leg</head> <body> <h3>Legaturi catre fisiere oarecare</h3><br> <a href="</body> <

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

a altor pagini).

ibutul target</title>

br> ex_1.2.html " target="fereastra"> legatura 2<a>

/html>

tocate în fisiere cu diverse formate. Formatele acceptate de browsere pentru fişierele

oup) cu extensia .jpeg sau .jpg;

r);

imagine, atunci ormata numai din numele imaginii, inclusiv extensia.

maginii dacă aceasta nu este încărcată sau

head><title> O pagina cu imagine</title></head>

/body></html>

siţi atributul border al etichetei <img>.

i. Daca

şi tribute, pot primi un număr de pixeli sau procente din lăţimea şi

înălţimea ferestrei

agine cu chenar si redimensionata</title>

încărcare<html> <head> <title> Atr</head> <body> <h3>Atributul target</h3><br> <a href="ex_1.1.html " target="fereastra"> legatura 1<a> <<a href="</body> < Imagini Imaginile sunt simagine sunt: - GIF (Graphics Interchange Format) cu extensia .gif; - JPEG (Joint Photographic Experts Gr- XPM (X PixMap) cu extensia .xmp; - XBM (X BitMap) cu extensia .xbm; - BMP (BitMap) cu extensia .bmp (numai cu Internet Explore- TIFF (Tagged Image File Format) cu extensia .tif sau .tiff; Daca imaginea se afla în acelaşi director cu fisierul HTML care face referire laadresa URL a imaginii este f< img src=”imagine.gif”> Atributul alt permite afişarea unui text alternativ în locul ilângă mouse atunci când acesta este plasat peste imagine. <html><<body> O pagina care contine o imagine

<img src="poza.jpg" alt=”Imagine ...........”> Text upa imagine d

< Chenarul şi dimensionarea unei imagini Daca doriţi sa adăugaţi un chenar în jurul imaginii, foloValorile acestor atribute sunt numere întregi pozitive. O imagine are anumite dimensiuni pe orizontală şi verticală, stabilite în momentul creării enu 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 height. Ca valori, cele două arespectiv<html> <head> <title> Im</head>

12

<body> O imagine cu chenar şi dimensiuni de 200 pixeli X 15 %

<img src="poza.jpg" border="5" width="350" t="15%"> Text dupa imagine.

/body>

- alte componente sunt

- lalte componente

- cu partea de sus a textului ce precede

- linia de bază a textului ce precede

- aginii de bază a textului<html>

linierea unei imagini</title>

a mijloc: <img src="w3.gif" align="middle"><br><br><br>

"> </html>

heigh<</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; celeldispuse pe în partea dreapta; "right" - aliniere la dreapta; celesunt dispuse pe în partea stânga; "top" - aliniere deasupra; partea de sus a imaginii se aliniază imaginea; "middle" - aliniere la mijloc; mijlocul imaginii se aliniază cuimaginea. "bottom" - aliniere la baza; partea de jos a imse aliniază cu linia

<head> <title> A</head> <body> Alinieri pe verticala:<br><br><br><br><br> Sus<img src="w3.gif" align="top"><br><br><br>LJos: <img src="w3.gif" align="bottom 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 a.

de xt inainte de

"poza.jpg" align="left" width=200 height=200 hspace="30" vspace="30"> Text dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa

ca valoare adresa URL a imaginii. tregul ecran.

utul bgproperties=”fixed” menţine imaginea fixă ă.

t text text text xt text text text text text text text text text text text text text text text text text text

t text text text text text text text text text text text

re „0” acest chenar dispare.

Pentru a insera un tabel se folosesc etichetele corespondente

pagin <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 inainteimagine. Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Teimagine. <img src=imagine.Text dupa imagine.Text dupaimagine.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

se multiplica pe orizontala şi pe verticala până umple înImaginea

Atribla 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 textetext text text text text text text textext 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> valoaTabele 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.

14

15

sera un rând într-un tabel se folosesc etichetele <tr> e format din

le ce conţin date. O celulă de date se introduce cu eticheta <td>. tle></head> abel simplu format din 4 linii si 2 coloane</h1><hr>

cell 21 <td>cell 22 td>cell 32

<tr> <td>cell 41 <td>cell 42 </table> </body></html>

<table> … </table> Un tabel este format din rânduri. Pentru a in…("table row"= rând de tabel). Folosirea etichetei de sfârşit este opţională. Un rând estmai multe celu<html><head><title>tabel</ti<body><h1 align=center>Un t<table border> <tr> <td>cell 11 <td>cell 12 <tr> <td><tr> <td>cell 31 <

Î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

osime prestabilita egală cu 1 pixel, o valoare egală cu 0 semnifică absenţa

ului tabel eta table, unei linii prin eticheta tr sau celule de date prin eticheta td.

cele cunoscute pentru o culoare. Dacă în tabel sunt area: celulă, linie, tabel.

r="blue"> <td>albastru 21 <td bgcolor="yellow">galben 22 r="cyan"> <td>cell 31 <td>cell 32 cell 41 <td bgcolor="white">cell 42

</table> </body> </html>

tabelul va avea o grchenarului. 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 întregprin etichValorile pe care le poate primi bgcolor sunt definite mai multe atribute bgcolor, atunci prioritatea este următo<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 bgcolo<tr bgcolo<tr> <td>

16

Culoarea unui table

Dimensionarea celulei unui tabel lule vecine se defineşte cu ajutorul atributDistanţa dintre două ce

uului cellspacing al etichetei table.

t pot fi numere întregi pozitive, inclusiv 0, şi reprezintă distanţa în pixeli e. Valoarea prestabilita a atributului cellspacing este 2.

arginea unei celule şi conţinutul ei poate fi definită cu ajutorul atributului tichetei 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>

Valorile acestui atribă celule vecindintre dou

Distanţa dintre mcellpadding al e

celule şi conţinut

lţimea - pot fi stabilite exact prin intermediul a două e.

fi: e reprezentând lăţimea respectiv înălţimea în pixeli a tabelului;

egi între 1 şi 100, urmate de semnul %, reprezentând fracţiunea din lăţimea şi ea totală a paginii.

un truc care permite afişarea intr-o pagina Web a unui text

<tr> <td align="center">

Distanţa între

narea unui tabel DimensioDimensiunile unui tabel - lăţimea şi înă

etichetei tablatribute, width şi height, aleot Valorile acestor atribute p

e întregi pozitiv- numer- numere într

înălţimÎn exemplul următor se utilizează poziţionat în centrul paginii. <html> <head><title>text centrat</title></head> <body> <table width="100%" height="100%">

<h2>Text centrat.</h2> </table> </body>

lule se face cu ajutorul atributului align care poate lua reapta). Alinierea pe

nei celule se face cu ajutorul atributului valign care poate lua valorile: atribute pot fi ataşate

tului într-o singură celulă. html>

<head><title>alinierea în celule</title></head>inutul celulelor aliniate</h3>

<td u<td valign="top">sus <td valign="bottom">jos u<td>stanga (implicita) </table>

Dim doua atribute ale acestor etichete: d

- mensiunea în pixeli a lăţimii, respectiv a înălţi

- proce

ste celulele din dreapta ei se face cu ajutorul atributului colspan, a numărul de celule care se unifică.

utorul atributului rowspan, a cărui

are.

ntru tabele m ernet Explorer

tabel. Primeşte ca valoare

henarul 3D al unui tabel; henarul 3D al unui tabel;

din chenarul unui tabel care vor fi iş

</html> Alinierea conţinutului unei celule Alinierea pe orizontala a conţinutului unei cevalorile: "left" (la stânga),"center" (centrat , valoarea prestabilita ), "right" (la dverticala a conţinutului u"bottom" (jos), "middle" (la mijloc, valoarea prestabilita), "top" (sus). Acesteatât etichetei tr pentru a defini tuturor elementelor celulelor unui rând, cât şi etichetelor td pentru a stabili alinierea tex<

<body><h3 align=center>Un tabel avand cont<table border width="300" height="300"> <tr align="right"><td>Aici <td>alinierea<td>este centru<td>dreapta <tr> <td align="left">stanga

align="center">centr<tr align="left"><td>aici<td>alinierea <td>este centr</body></html>

Dimensionarea exacta a celulelor unui tabel

ensiunea unei celule poate fi stabilită exact cu ajutorul awi th pentru lăţime şi height pentru înălţime. Valorile posibile ale acestor atribute sunt:

numere întregi pozitive (inclusiv 0) reprezentând dimii unei celule; nte 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 pe

cărui valoare determina - extinderea unei celule peste celulele dedesubt se face cu aj

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 delimitÎn scopul de a afişa un chenar pentru celule vide se utilizează urmatoarele trucuri: - dupa td se pune - dupa td se pune<br>. Atribute Internet Explorer peUr ătoarele atribute ale etichetei table funcţionează cu Int- background permite stabilirea unei imagini pentru fondul unui

adresa URL a imaginii folosite pentru fond; - bordercolor permite stabilirea culorii pentru chenarul unui tabel; - bordercolorlight permite stabilirea culorii feţei luminate pentru c- bordercolordark permite stabilirea culorii feţei întunecate pentru cAtributele frame şi rules Atributul frame al etichetei table permite specificarea părţilor af ate. Valorile posibile sunt:

17

18

ui tabelului; lui; a cadrului tabelului;

i tabelului; afişează o muchie în partea din dreapta a cadrului tabelului;

dreapta a cadrului tabelului; ;

i; lele unui tabel. Valorile posibile sunt:

ale tabelului; afişează muchii orizontale intre toate liniile tabelului; fişează muchii verticale intre toate coloanele tabelului;

fiş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>

- void - elimina toate muchiile exterioare ale tabelului; - above - afişează o muchie în partea superioara a cadrul- below - afişează o muchie în partea inferioara a cadrului tabelu- hsides - afişează cate o muchie în partea superioara şi inferioar- lhs - afişează o muchie în partea din stânga a cadrulu- rhs - - vsides - afişează o muchie în partea din stânga şi din - box - afişează o muchie pe toate laturile cadrului tabelului- border - afişează o muchie pe toate laturile cadrului tabeluluAtributul rules permite alegerea unor delimitatori pentru celu- none - elimina toate muchiile interioare - rows -- cols - a- all - a<

Atribute frames şi rules pentru un tabel

Cadre în HTML (frames)

HT definite într-un fişier HTML special, în care blocul <body>...</body>

care cadru este introdus prin eticheta <frame>. l etichetei <frame> este src, care primeşte ca valoare adresa URL a

încărcat în acel cadru. cală.

re pe verticală se face cu ajutorul atributului cols al rameset>;

ă de elemente separate prin virgulă, care descriu modul care se face împărţirea.

Cadrele ne permit să definim în fereastra browserului zone în care sa fie încărcate documente ML diferite. Cadrele sunt

este înlocuit de blocul <frameset>...</frameset>. În interiorul acestui bloc, fieUn atribut obligatoriu adocumentului HTML care va fiDefinirea cadrelor se face prin împărţirea ferestrei pe orizontală sau pe verti- împărţirea unei ferestre într-un număr de cad

etichetei <f- î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în

Elementele listei pot fi:

ls=200,*,50%,*> înseamnă o împărţire în 4 cadre pe verticală, dintre care primul are

mo ponibil.

Exe

il, iar al doilea şi al patrulea ocupă în mod mparte în trei părţi egale, al doilea cadru ocupând o

ărţi.

te din listă sunt configurate cu * , atunci spaţiul disponibil rămas pentru d egal.

dru se poate încărca un document HTML sau poate fi împărţit la rândul său în alte folosind <frameset>).

În exemplul următor este creată o pagina Web cu trei cadre orizontale. Pentru al doilea cadru

rc="p1.html">

creată o pagina Web cu trei cadre mixte. Pentru a o crea se procedează din

oape. Mai întâi, pagina este împărţită în două cadre de tip coloană, după care al doilea ărţită în doua cadre de tip linie.

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>

- 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 co200 pixeli, al treilea ocupă jumătate din spaţiul total disponibil, iar al doilea şi al patrulea ocupă în

d egal restul de spaţiu rămas dis

mplu <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 disponibegal restul de spaţiu rămas disponibil, care se îparte , iar al patrulea ocupând 2 pObservatii: - dacă mai multe elemen

ele se va împărţi în mo- Într-un ca

cadre (

valoarea atributului src este adresa URL a unei imagini <html><head><title>cadre</title></head> <frameset rows="100,*,20%"> <frame s<frame src="poza.jpg"> <frame src="p2.html"> </frameset> </html>

În exemplul următor este aproape în aprcadru este împ<html> <

19

Culori pentru chenarele cadrelor şi dimensionarea chenarului unui cadru

bordercolor. Acest atribut ca valoare un nume de culoare sau o culoare definită în conformitate cu modelul de

şat atât etichetei <frameset> pentru a stabili r cadrelor incluse, cât şi etichetei <frame> pentru a stabili culoarea

tul border al etichetei <frameset> permite un număr dorit de pixeli. Valoarea prestabilita a

xeli va defini un cadru fără chenar. bilit, chenarul unui cadru este afişat şi are aspect tridimensional. Afişarea chenarului

se poate dezactivata dacă se utilizează atributul frameborder cu valoare "no". Acest

. Valorile es" - echivalent cu 1; "no" - echivalent cu 0;

în interiorul documentului afişat în interiorul cadrului. Valorile posibile

tdeauna; re nu sunt utilizabile;

ulare sunt vizibile atunci când este necesar

s="*,*,*"> c="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">

Pentru a stabili culoarea chenarului unui cadru se utilizează atributul primeşte culoare RGB. Atributul bordercolor poate fi ataculoarea tuturor chenarelochenarului pentru un cadru individual. Atribuconfigurarea lăţimii chenarelor tuturor cadrelor laatributului border este de 5 pixeli. O valoare de 0 piÎn mod prestaunui cadruatribut 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)posibile ale atributului frameborder sunt: "yBare de defilare Atributul scrolling al etichetei <frame> este utilizat pentru a adăuga unui cadru o bară de derulare care permite navigareasunt: - "yes" - barele de derulare sunt adăugate înto- "no" - barele de derula- "auto" - barele de der<html> <head><title>cadre</title></head> <frameset col<frame sr<

20

21

rginheight=50> <frame src="p2.html" ma<frame src="p1.html" marginwidth=50> </frameset> </html>

Poziţionarea documentelor în cadre

Cadre inteUn cadru

rne (în-line) intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru intern se

troduce î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>

der=2 bordercolor=red name="icadru"

in

<iframe width="60%" height="50%" borsrc="p1.html"></iframe></center> </body> </html>

Cadre interne

entru legaturi Ţinte pra) o

şier.html"

În m dînlocuieşte pe

o prestabilit, la efectuarea unui clic pe o legătura noua pagină (către care indică legătu 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="fitarget="nume fereastra/frame"> ... </a>

Valori pentru atributul target ibutul target al etichetei<frame> acceA pta anumite valori predefinite d

creatorii de pagini Web. Aceste valori sunt: tr e o valoare deosebita pentru

loc intr-o fereastra noua anonima); • "_self" (încărcarea noii pagini are loc în cadrul curent); • "_blank" (încărcarea noii pagini are• "_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)

ForUn formular este un ansamblu de zone active alcătuit din butoane,

mulare casete de selecţie, câmpuri de

b care permit utilizatorilor

secun -

ă ce acestea ajung la

serat un "?". Datele sunt adăugate conform sintaxei: nume_camp = valoare_camp. Între s un "&". Exemplu: "http://www.yahoo.com/cgi-e2 = valoare2";

(ordinul MB) va întâmpla cu el după completare şi

ia prin posta şte ca valoare

"mailto:adresa e-mail".

editare etc. Formularele sunt utilizate pentru construirea unor pagini Wesă introducă efectiv informaţii şi să le transmită serverului. Formularele pot varia de la o simplă

etă de text, pentru introducerea ucas nui ş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

ţiuni, care oferă facilităţi puternice de transmisie a datelor. O sesiune cu o pagina web ce conţine formular cuprinde următoarele etape: utilizatorul completează formularul şi îl expediază unui server. o aplicaţie dedicată de pe server analizează formularu- l 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

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 indiferite seturi de date este introdubin/nume_fis.cgi?nume1 = valoare1&num

- post. În acest caz datele sunt expediate separat. Sunt permise cantităţi mari de datePentru ca un formular sa fie funcţional, trebuie precizat ce seexpediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuelectronica (e-mail). Pentru aceasta se foloseşte atributul action care prime

22

23

a 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 iere</h4> <hr>

ele si prenumele"><br>

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

un camp de editare şi un buton de exped

<form action="mailto:[email protected]" method="post"> Numele:<input type="text" name="numele" value="Num<input type="submit" value="expedieaza"> </form></body>

tml> </h

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;

tul maxlength specifica numărul maxim de caractere pe care le poate primi un câmp de

unci câmpul respectiv este considerat în

atele sunt R.

- atribueditare;

Observaţii: - daca atributul type lipseşte intr-un element <input> , at

mod prestabilit ca fiind de tip "text". - formularele cu un singur câmp (de tip text) nu au nevoie de un buton de expediere, d

expediate automat după completarea şi apăsarea tastei ENTEButoane 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:[email protected]" method="post"> Introduceti numele:<input type="text" name="nume" value="Numele"><br>

24

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"

tor cu un câmp de editare obişnuit (introdus prin t").

ân valabile. Singura deosebire constă în faptul că acest

<input type="text" name="prenume" value="Prenumele"><br> assword:<input type="password" name="parola" ><br>

<input type="reset" value="sterge"> <input type="submit" value="trimite"> </form></body> </html>

Daca se utilizează eticheta <input> având atributul type configurat la valoarea "password", atunci în formular se introduce un element asemănătype="tex Toate atributele unui câmp de editare rămcâ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:[email protected]" method="post"> Nume:<input type="text" name="nume" value="Numele"><br> Prenume:P

radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. e radio se introduc ca familii de butoane prin eticheta <input> cu atributul type avand

e să primească aceeaşi valoare pentru fiecare buton dintr-

Butoane radio Butoanele Butoanelvaloarea "radio", iar atributul name trebuio familie.

25

mular cu butoane radio</h1>

e="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>

<html><head><title>formex_4</title></head> <body><h1>Un for<hr> <form action="mailto:[email protected]" method="post"> Alegeti sexul:<br> <input typ

Butoane radio

f", în funcţie de

Ca caseta de validare (checkbox) permite selectarea sau deselectarea unei opţiuni.

Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type t la valoarea "checkbox" .

Obe caseta poate avea un nume definit prin atributul name.

poate avea valoarea prestabilita "selectat" definita prin

_5</title></head>

tar<br> pe="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>

La expedierea formularului se va transmite una dintre perechile "sex=m" sau "sex=alegerea făcută de utilizator.

sete de validare O-

configura

servatii: - fiecar- fiecare caseta, ca şi un buton radio,

atributul checked. <html> <head><title>formex<body><h1>Un formular cu casete checkbox</h1><hr> <form action="mailto:[email protected]" method="post"> Alegeti meniul:<br> <input type="checkbox" name="pizza" value="o portie">Pizza<br> <input type="checkbox" name="nectar" value="un pahar"> Nec <input ty

26

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:[email protected]" 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).

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:[email protected]" 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:[email protected]" 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

29

<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

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

32

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

MMoodduulluull IIII.. JJAAVVAASSCCRRIIPPTT 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

37

• 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

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

40

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>

41

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

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

43

} </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>

44

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>

45

<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

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

47

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

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

50

<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

unei imagini Image

Blur OnBlur pierderea focusului Window şi elem. ale obiectului Form

Change OnChange schimbarea valorii unui element

Text, TextArea, Select

Click OnClick utilizatorul face click

Button, Checkbox, Link, Radio, Submit, Reset

DragDrop OnDragDrop plasarea unui obiect în fereastra browserului

Window

Error OnError eroare la încarcarea obiectului

Image, Window

Focus OnFocus elementul capata focus

Window şi elem. ale obiectului Form

KeyDown OnKeyDown apasarea unei taste Document, Image, Link, TextArea

KeyPress OnKeyPress apasarea sau mentinerea apasata a unei taste

Document, Image, Link, TextArea

KeyUp OnKeyUp eliberarea unei taste Document, Image, Link, TextArea

Load OnLoad incarcarea paginii in navigator

Document

MouseDown OnMouseDown apasarea butonului de mouse

Document, Button, Link

MouseMove OnMouseMove mutarea cursorului Nici unui obiect MouseOut OnMouseOut mutarea cursorului

de mouse in afara obiectului

Area, Link

MouseOver OnMouseOver mutarea cursorului peste un link

Link

MouseUp OnMouseUp eliberarea butonului de mouse

Document, Button, Link

Move OnMove deplasarea ferestrei Window Reset OnReset click pe butonul

reset Form

Resize OnResize redimensionarea ferestrei

Window

Select onSelect selectarea unui elem. al campului

Text, TextArea

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

52

{ 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

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

61

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

62

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

MMOODDUULLUULL IIIIII.. CCOONNSSTTRRUUIIRREEAA DDOOCCUUMMEENNTTEELLOORR XXMMLL 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;)>  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

http://ro.wikipedia.org/wiki/XML

http://ro.wikipedia.org/wiki/Imagine:Feed-icon.svg

<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

MMoodduulluull IIVV.. PPHHPP şşii MMyySSQQLL 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

http://www.apache.org/

http://www.php.net/

http://www.mysql.com/

78

Figura 4.1 Fereastra localhost

Figura4.2 Fereastra browserului pentru rularea scripturilor

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 $_POST

sunt variabile array globale. $_GET poate fi folosită pentru a trimite 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 " Mesaj 2<br>\n"; while (1) { echo " 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şierul „*.HTML” conţine:

me="f" action="exemplu.php" method="post">

on>

exemplu.php” conţine:

nimic"

şi parola ultilizatorului, le compară iar dacă nu sunt corecte

şi sunt transmise fişierului exemplu.php. F<html> <head> <title></title> </head> <body> <form na<SELECT name="s" size="3">

ption> <option value="Carti">Carti</o<option value="Caiete">Caiete</option><option value="Rechizite">Rechizite</opti<br>

type="submit" value="trimite"> <input<input type="reset" value="reset"> </form> </body> </html>

işierul „F<?php

OST["s"]; $a=$_Pif ($a) echo $a; else

"nu ai bifatecho ?>

icaţie care preia numele Aplreafişează formularul (vezi figura 4.3).

86

87

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.

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 = '[email protected]'; $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

un nume de cale şi returnează numele fişierului din calea respectivă

string basename( string path)

chgrp schimbă grupul fişierului filename în group şi nu este diponibilă pe Windows

int chgrp( string filename, mixed group)

chown schimbă proprietarul fişierului filename cu user group şi nu este diponibilă pe Windows

int chown( string filename, mixed user)

copy funcţia copie un fişier sursă într-un fişier destinaţie. Returnează TRUE dacă copierea s-a realizat cu succes şi FALSE în caz contrar.

int copy( string source, string dest)

dirname funcţia returnează numele directorului din calea path.

string dirname( string path)

fclose închide fişierul referit prin fp. Întoarce 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().

int fclose( int fp)

feof Returnează TRUE dacă pointerul de fişier este poziţionat pe EOF sau în caz de eroare, altfel returnează FALSE.

int feof( int fp) Variabila fp trebuie să 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. Returnează FALSE în cazul în care caracterul citit este EOF.

string fgetc( int fp)

fgets returnează un şir de maxim length-1 octeţi citiţi din fişierul indicat de fp. Citirea se î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.

string fgets( int fp, int length)

file_exists întoarce TRUE dacă fişierul specificat prin filename există şi FALSE în caz contrar.

int file_exists( string filename)

filesize întoarce dimensiunea fişierului specificat prin filename dacă acesta există şi FALSE în caz de eroare.

int filesize( string filename)

fopen funcţia deschide un fişier sau un URL. În cazul deschiderii unui URL se stabileşte o conexiune către serverul Web specificat. În cazul unui fişier obişnuit acesta este căutat în sistemul propriu de fişiere şi deschis.

int fopen( string filename, string mode [, int use_include_path])

fputs funcţia scrie şirul string în fişierul fp în întregime (dacă argumentul length lipseşte) sau numai length octeţi din acesta. fputs() este un alias pentru fwrite() şi este identic cu aceasta.

int fputs( int fp, string str [, int length])

fread funcţia citeşte cel mult length octeţi din fişierul binar fp. Citirea se încheie când s-au citit length octeţi sau EOF.

string fread( int fp, int length)

fwrite funcţia scrie conţinutul argumentului string în fişierul indicat de fp. Dacă argumentul length este precizat scrierea se opreşte după length octeţi sau dacă şirul string s-a terminat.

int fwrite( int fp, string string [, int length])

is_file Întoarce TRUE dacă filename există şi este un fişier obişnuit.

boolean is_file( string filename)

is_writeable întoarce TRUE dacă filename există şi poate fi scris.

boolean is_writeable ( string filename)

92

pclose Închide fişierul indicat de fp. Variabila fp trebuie să indice un fişier valid care a fost deschis cu popen() .

int pclose(int fp)

readfile citeşte conţinutul fişierului filename şi îl tipăreşte la ieşirea standard. În caz de succes întoarce numărul de octeţi citiţi din fişier şi FALSE în caz de eşec.

int readfile( string filename [, int use_include_path])

rmdir şterge directorul dirname numai dacă acesta este gol, iar în caz de eroare întoarce 0.

int rmdir( string dirname)

unlink şterge fişierul filename şi returnează 0 sau FALSE în caz de eroare.

int unlink( string filename)

Funcţii pentru lucru cu tablori (array)

funcţie rol sintaxă array crează şi întoarce un tablou de valori.

Array() este un constructor de limbaj utilizat pentru a reprezenta tablouri şi nu o funcţie obişnuită.

array array( [mixed... ])

array_count_values

funcţia returnează un tablou folosind valorile din tabloul de intrare, input, drept chei şi frecvenţa lor drept valori.

array array_count_values( array input)

array_intersect funcţia returnează un tablou conţinând toate valorile lui array1 care sunt prezente în toate celelalte argumente; cheile sunt păstrate.

array array_intersect( array array1, array array2 [, array ...])

array_keys funcţia returnează cheile (numerice sau şiruri de caractere) ale tabloului input.

array array_keys( array input [, mixed search_value])

array_merge funcţia concatenează elementele a două sau mai multe tablouri astfel încât elementele unui tablou se adaugă la sfârşitul tabloului precedent.

array array_merge( array array1, array array2 [, array ...])

array_push funcţia tratează tabloul ca pe o coadă şi introduce valorile primite ca argumente la sfârşitul tabloului.

int array_push( array array, mixed var [, mixed ...])

array_revers funcţia returnează un nou tablou care conţine elementele tabloului array în ordine inversă

array array_revers( array array [, bool preserve_keys])

array_sum funcţia calculează şi returnează suma elementelor din tabloul arr ca un număr întreg sau float.

mixed array_sum( array arr)

array_unique funcţia elimină valorile duplicate din tablou; returnează un tablou nou care nu conţine valori duplicate; cheile nu se modifică.

array array_unique( array array)

93

arsort funcţia sortează descrescător tabloul array astfel încât legăturile dintre 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ă.

void arsort( array array [, int sort_flags])

asort funcţia sortează crescător tabloul array astfel încât legăturile dintre 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ă.

void asort( array array [, int sort_flags]))

count funcţia returnează numărul de 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ă.

int count( mixed var)

each funcţia returnează cheia curentă şi 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.

array each( array array)

rsort funcţia sortează un tablou în ordine descrescătoare.

void rsort( array array [, int sort_flags])

sort funcţia sortează elementele unuii tablou în ordine crescătoare.

void sort( array array [, int sort_flags])])

sizeof funcţia returnează numărul de elemente dintr-un tablou.

int sizeof( array array)

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

98

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

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

100

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 tabelSELECT selectează un tabel ALTER modifică structura unui tabel SHOW Afişare baze de date, tabele USE Deschide o bază de date

1. Crearea unei baze de date se face cu comanda: CREATE DATABASE nume_bază; De exemplu, crearea bazei de date, numită student se realizează cu comanda CREATE DATABASE student; Caracterul ; este obligatoriu la sfârşitul oricărei comenzi.. 2. Afişarea bazelor de date existente pe server se face cu comanda: SHOW DATABASES; 3. Accesarea (deschiderea) unei baze de date pentru a putea fi folosită se face cu comanda: USE nume_bază; 4. Crearea unei tabele într-o bază de date presupune mai întâi deschiderea bazei de date şi apoi crearea propriu-zisă a tabelei: USE biblioteca;

CREATE TABLE carti ( codc int(4) NOT NULL auto_increment, numecarte varchar(40) default NULL, autor varchar(30) default NULL, data date default NULL, pret int(3) NOT NULL default '0', stoc int(5) default NULL, valoare int(5) default NULL, PRIMARY KEY (codc) ) TYPE=MyISAM;

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 òbservatii` VARCHAR(40) NOT NULL; Pentru a schimba denumirea câmpului observatii în obs, comanda este: ALTER TABLE `cursuri`.`carti` CHANGE òbservatii` òbs` VARCHAR(40) NOT NULL; 8. Ştergerea unei tabele se face cu comanda DROP TABLE; De exemplu, pentru ştergerea tabelei numită „diverse”, vom folosi comanda DROP TABLE diverse; Comanda DROP TABLE trebuie folosită cu mare grijă, întrucât, în urma executării ei, atât structura cât şi datele conţinute în tabele sunt şterse. 9. Comanda INSERT introduce înregistrări într-o tabelă existentă.

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`, àutor`, `data`, `pret`, `stoc`, `valoare`, òbservatii`) 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`,àutor`,`data`,`pret`,`stoc`,`valoare`,òbservatii` 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

http://www.php.net/manual/ro/function.mysql-connect.php

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

http://www.php.net/manual/ro/function.die.php

http://www.php.net/manual/ro/function.mysql-select-db.php

$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="[email protected]"; $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

107

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>

<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

109

$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

110

MMoodduulluull VV.. DDeezzvvoollttaarreeaa ssii aappeellaarreeaa sseerrvvlleettuurriilloorr 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).

111

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.

Î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

Id Stabileşte un identificator pentru a putea fi referit ulterior. Se va crea o variabilă cu acest nume.

Scope Stabileşte domeniul de vizibilitate pentru componente. Valorile posibile sunt page, request, session şi application. Implicit este page.

Class Numele complet al clasei (inclusiv numele pachetului). beanName Numele componentei JavaBeans.

Type Tipul variabilei care va fi creată. Poate coincide cu numele clasei (dat de 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ă.

property Numele proprietăţii (datei membre) pentru care se doreşte actualizarea valorii.

param Valoarea datei membre va fi dată ca parametru paginii JSP cu 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

http://www.w3c.org/

http://www.php.net/

http://www.w3schools.com/

http://www.apache.org/

http://www.mysql.com/

http://www.oracle.com/technetwork/java/index.html

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

118

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 [email protected]”. 2. Creaţi un fişier php care preia dintr-un formular html numele şi parola. Se verifică dacă numele este student şi parola Titu_Maiorescu. În caz afirmativ se afişează mesajul OK, altfel reafişează formularul însoţit de un mesaj de eroare. 3. Să se creeze o funcţie javascript care afişează pe ecran ce buton radio s-a bifat. 4. Realizaţi un script care să afişeze în pagină data curentă. GRILĂ 1. O clasa de stiluri se apelează prin:

a. <DIV ID=”clasa”> b. <DIV CLASS=”clasa”> c. <DIV STYLE=”clasa”>

2. Alegeţi atributul corect pentru tagul <table> a. color b. align c. text

3. Introducerea unei imagini se realizează prin: a. <a src=”x.jpg”> b. <a href=”x.jpg”> c. <img src=”x.jpg”>

4. Pentru afişarea unui mesaj in bara de stare putem folosi:

a. onChange() b. window.status OK c. document.title

5. O zonă de text se introduce prin: a. <input type=”textarea”> b. <textarea> c. <select textarea>

6. Culoarea de fond a unei pagini Web se stabileşte prin proprietatea:

a. windows.status b. document.fgColor c. document.bgColor

7. O listă de selecţie se introduce prin instrucţiunea:

a. <input type=”select”> b. <select> c. <form select>

8. Atributul checked ataşat unui buton radio are ca efect:

a. Bifarea implicită a butonului b. Nu există acest atribut c. Trebuie ataşat obligatoriu la toate butoanele

radio din acelaşi grup 9. In PHP numele variabilelor trebuie să înceapă

cu: a. _ b. $ c. ?

10. Alegeţi varianta corectă pentru introducerea unei funcţii javascript: a. function suma numere() b. function suma_nr() c. sumanumere

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

mailto:[email protected]

2

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 “[email protected]”. 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.

mailto: �[email protected]

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 “[email protected]”.

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.

3

mailto: �[email protected]

Date post:	02-Jul-2015
Category:	Documents
Upload:	blackflame40
View:	699 times
Download:	8 times

Tehnologii Web

Documents