Tehnologii Web

UNIVERSITATEA TITU MAIORESCU FACULTATEA DE INFORMATICA
TEHNOLOGII WEB
Lector univ. dr. Mironela Prnu
- 2009 -
Cuprins Modulul I. CREAREA PAGINILOR WEB CU HTML Modulul II. JAVASCRIPT Modulul III. CONSTRUIREA DOCUMENTELOR XML Modulul IV. PHP i MySQL Bibliografie Model bilet examen
Nota final care se va acorda fiecrui student, va conine urmtoarele componente n procentele menionate: - examen final 60% - lucrari practice/ proiect, etc. 20% - teste pe parcursul semestrului 10% - teme de control 10% Conditia de participare la examen, este ca fiecare student, sa realizeze un site, care va cuprinde minim 2 pagini pentru fiecare modul (Html, JavaScript, XML, Php si MySql). Codul sursa al paginilor, vor contine si comentariile corespunzatoare.
Modulul I. CREAREA PAGINILOR WEB CU HTML

Crearea unei pagini Web folosind HTML presupune: - Editarea i salvarea fiierului cu extensia .html sau .htm folosind: - un editor de texte obinuit (Notepad, Wordpad, Word, etc.); - un editor de texte dedicat (Front Page, Dreamwaver, Homesite, HotDog, HotMetal, etc.) - Rezolvarea referinelor coninute n pagina Web (legturi, imagini, sunete, aplicaii 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 aduga informaii despre formatare i despre legturi. 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 reinut faptul c browser-ele Web ignor formatrile aplicate textului cu ajutorul procesoarelor de texte valabile fiind doar formatrile aplicate cu ajutorul tag-urilor html. Un fiier html este de obicei mprit din motive de organizare, n dou seciuni: - antetul (header-ul) care conine informaii introductive de formatare a documentului. Este demarcat de forma de deschidere i forma de nchidere a marcajului <HEAD> </HEAD>. Informaiile 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>. Observaie: O etichet poate fi scris att cu litere mari, ct i cu litere mici. Inserarea unui titlu pentru pagina web Un lucru subtil dar simplu pe care l putem face este s inserm un titlu pentru o pagin Web, titlu ce va fi afiat 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> Sfritul de linie Dup cum se observ, caracterele enter , tab i spaiile multiple sunt ignorate de ctre browser. Trecerea pe o linie nou se face prin inserarea marcajului <br> (line break). Nu are form de nchidere. Introducerea unui spaiu se poate face prin construcia: . Blocuri preformatate Pentru ca browser-ul s interpreteze corect caracterele "spaiu", "tab" i " CR/LF " ce apar n cadrul unui text, acest text trebuie inclus intr-un bloc <pre>...</pre>.
<html> <head> <title>bloc preformatat </title> </head> <body><pre> Prima linie A doua linie A treia linie </pre></body> </html> Nu se recomand folosirea acestei metode. Culoarea de fond i culoarea textului O culoare poate fi precizata n doua moduri: - Printr-un nume de culoare. Sunt disponibile cel puin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white i yellow. - Prin construcia " #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, construcia #ff0000 definete culoarea roie (red), #00ff00 definete culoarea verde (green), #000000 reprezint negru, iar #ffffff reprezint alb. Culoarea fondului paginii Web se stabilete n cadrul etichetei <body> prin atributul bgcolor. Culoarea textului paginii Web se stabilete n cadrul etichetei <body> prin atributul text. Urmtorul 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, ngroat <i>...</i> - italic, nclinat <u>...</u> - underline, subliniat <sub>...</sub> - subscript <sup>...</sup> - superscript <s>...</s>, <strike></strike> - strike, tiat <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 spaiu suplimentar nainte de blocul paragraf; - inserarea unui spaiu suplimentar dup blocul paragraf, daca se folosete delimitatorul </p> (acesta fiind opional); - alinierea textului cu ajutorul atributului align, avnd 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 nsoite 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 cnd <h6> folosete 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 urmtoarele atribute ale etichetei <hr>: - align permite alinierea liniei orizontala. Valorile posibile sunt " left " ," center " i " right "; - width permite alegerea lungimii liniei; - size permite alegerea grosimii liniei; - noshade cnd este prezent definete o linie fr 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 conine. Fonturi Un font este caracterizat de urmtoarele atribute: - culoare (stabilit prin atributul color); - nume (stabilit prin atributul face); - mrime (definit prin atributul size);
Toate aceste atribute aparin 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. Mrimea fontului Pentru a stabili mrimea 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 micora dimensiunea fontului cu 1, 2, etc. fata de valoarea curenta. <html> <head> <title> Caracteristicile fontului</title> </head> <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 obinuite elemente din documentele cu mai multe pagini este un set de definiii, referine sau indexuri. Glosarele sunt exemple clasice n acest sens; cuvintele sunt listate n ordine
7
alfabetica, urmate de definiii ale termenilor respectivi. n HTML, ntreaga seciune a unui glosar va fi gestionata printr-o lista de definiii, care este inclusa intr-o pereche de marcaje de lista de definiii: Observaii: -
<dl>...</dl> (de la "definition list" = lista de definiii)
<dt> (de la "definition term" = termen definit); Definiia unui termen este iniiata de eticheta <dd> (de la "definition description" =
Un termen al listei este iniiat de eticheta
descrierea definiiei); - Definiia 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 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 definiii
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 iniiat de eticheta <li> (list item). Lista va fi indentat fata de restul paginii Web i fiecare element al listei ncepe pe un rnd noua. Tag-urile <ul> ... </ul> i <li> pot avea un atribut type care stabilete caracterul afiat n faa fiecrui 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 typesquare>Culori uzuale disponibile prin nume <li>Black <li>White <li>Red </ul> </body> </html>
List neordonat
Liste ordonate 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 rnd nou. Tag-urile <ol> i <li> pot avea un atribut type care stabilete 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 Urmtorul 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 stabilete valoarea iniiala a secvenei de ordonare. Valoarea acestui atribut trebuie sa fie un numr ntreg pozitiv.
9
Legturi Legaturile (link-urile) reprezint partea cea mai important a unei pagini Web. Ele transform un text obinuit n hipertext sau hiperlegatura, care permite trecerea rapida de la o informaie aflata pe un anumit server la alt informaie memorat pe un alt server aflat oriunde n lume. Legturile sunt zone active ntr-o pagin Web, adic zone de pe ecran sensibile la apsarea butonului stng al mouse-ului. O legatura catre o pagina aflata n acelai director O legtur ctre o pagina aflata n acelai director se formeaz cu ajutorul etichetei <a> (de la "anchor"=ancora). Pentru a preciza pagina indicata de legtur se utilizeaz un atribut al etichetei <a> numit href, care ia valoare numele fiierului HTML aflat n acelai director. Zona activ care devine sensibil la apsarea butonului stng al mouse-ului este formata din textul cuprins intre etichetele <a>...</a>. Prezenta etichetei de sfrit </a> este obligatorie. <html><head> <title> Comutarea intre doua pagini</title> </head> <body> <h3>Pagina 1 </h3> <a href=" ex_1.14b.html"> Link catre pagina 2 </a> </body></html> O legtur ctre o pagina aflata pe acelai disc local Daca pagina referit se afla pe acelai disc local, dar ntr-un alt director atunci pentru a preciza poziia ei n structura de directoare se poate folosi adresarea relativ plecnd de la directorul curent .
Legturi prin adresare relativ
Exemplul urmtor realizeaz o legtur din fiierul index.html ctre fiierul cap1.html aflat n sudirectorul capitol 1. <html> <head> <title> Comutarea intre doua pagini aflate pe acelasi disc local</title> </head> <body> <h3>Pagina 3 </h3>
10
<a href="cuprins/cap1.html">Link catre capitolul 1 </a> </body></html> O legtur ctre un site particular n exemplul urmtor se utilizeaz adresa URL www.netscape.com care ncarc pagina de start din site-ul firmei Netscape Corporation. <html> <head> <title> Link catre site-ul firmei Netscape</title> </head> <body> <h3>Link catre site-ul firmei Netscape </h3> <a href="http://www.netscape.com">Netscape Corporation </a> </body> </html> Ancore ntr-o pagin foarte lung pot exista puncte de reper ctre care se definesc legturi. O ancora se definete de asemenea prin eticheta <a>. Pentru a defini ancora se utilizeaz atributul name care primete ca valoare un nume atribuit ancorei (de exemplu "leg1"). Pentru a insera o legtur catre "leg1" definit n aceeai pagina se utilizeaz eticheta <a> avnd atributul href de valoare "#leg1".
11
Pentru a introduce o legtur ctre o ancor definit n alt document (alt pagin) aflat n acelai director, atributul href primete o valoare de forma "nume_fisier.html#nume_ancora". <html> <head> <title> Ancore definite n acelasi document si n alt document</title> </head> <body> <h3>Ancore definite n acelasi document si n alt document </h3>
<a href="#ancora1">Link catre ancora 1 </a>

<a href="legaturi.html#anc">Link catre o ancora din alt document </a> <br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br><br>< br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><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> <a name="ancora1">ancora 1</a> </body> </html> Alegerea culorilor pentru legaturi
12
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 puin un clic pe ele) - o culoare pentru legaturile active (cnd se execut clic i se ine apsat). Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei <body>: link pentru legaturile nevizitate; vlink pentru legaturile vizitate; alink pentru legaturile active. Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului RGB. <html> <head> <title> Culori pentru lagaturi</title> </head> <body link="blue" vlink="green" alink="red"> <h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active, verde pentru legaturi vizitate si albastru pentru legaturi nevizitate </h3> <a href=leg_ex1.html> Link catre pagina 1 <br> <a href=leg_ex2.html> Link catre pagina 2 <br> <a href=leg_ex11.html>
13
Link catre pagina 11 </a> </body> </html> Utilizarea potei electronice Intr-o pagina Web se poate afla legaturi care permit lansarea n execuie a aplicaiei de expediere a mesajelor electronice. Pentru aceasta se utilizeaz n construcia adresei URL cuvntul mailto: urmat de o adresa e-mail valida. Pentru ca exemplul urmtor sa funcioneze trebuie ca: - pe calculator sa fie instalat o aplicaie de expediere a mesajelor electronice (Outlook Express, Microsoft Outlook etc.) - adresa sa fie valida i calculatorul sa fie conectat la Internet. <html> <head> <title> Expediere de mesaje electronice</title> </head> <body> <h3>Expediere de mesaje electronice</h3><br> <a href="mailto:student@yahoo.com"> Mesaje catre autorul paginii </a> </body> </html> Legaturi ctre fiiere oarecare
14
O pagina Web poate conine legaturi ctre orice tip de fiiere aflate pe orice servere din Internet. Pentru aceasta se utilizeaz eticheta <a> avnd valoarea atributului href egala cu adresa URL a fiierului destinaie. Atunci cnd se efectueaz clic pe legtura din exemplul urmtor browserul va deschide o caseta de dialog - File download - care va permite: - sa salvai pe discul local fiierul - sa lansai n execuie aplicaia capabila sa interpreteze corect fiierele de tipul respectiv <html> <head> <title> Legaturi catre fiiere oarecare</title> </head> <body> <h3>Legaturi catre fisiere oarecare</h3><br> <a href="fisier.zip">Link catre fisierul fisier.zip </a> </body> </html>
Atributul title Atributul title aparine etichetei <a> i duce la apariia unei mici etichete n pagina Web atunci cnd mouse-ul se afl pe o legtur. Acest atribut are astfel menirea de a furniza informaii suplimentare despre semnificaia unei legaturi. <html> <head> <title> Atributul title</title> </head> <body> <h3>Atributul title</h3><br> <a href="mailto:student@yahoo.com" title="Trimiteti un mesaj e-mail"> Mesaje catre autorul paginii </a> </body> </html>
15
Atributul title
Atributul target Dac dorim ca pagina solicitat s fie ncrcat ntr-o alt fereastr dect cea curent, atunci trebuie lansat n execuie o nou instan a browserului care va conine noua pagin. Acest lucru se realizeaz folosind atributul target al etichetei <a>, care primete ca valoare un nume. Numele ferestrei poate fi folosit ca valoare pentru atributul target i pentru alte legturi caz n care paginile respective vor fi ncrcate n aceeai fereastr. Atributul target accept i alte valori cum ar fi _blank caz n care pagina se va ncrca ntr-o fereastr nou, anonim (nu poate fi folosit pentru ncrcarea altor pagini). <html> <head> <title> Atributul target</title> </head> <body> <h3>Atributul target</h3><br> <a href="ex_1.1.html " target="fereastra"> legatura 1<a> <br> <a href="ex_1.2.html " target="fereastra"> legatura 2<a> </body> </html> Imagini Imaginile sunt stocate n fisiere cu diverse formate. Formatele acceptate de browsere pentru fiierele imagine sunt: - GIF (Graphics Interchange Format) cu extensia .gif; - JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; - XPM (X PixMap) cu extensia .xmp; - XBM (X BitMap) cu extensia .xbm; - BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); - TIFF (Tagged Image File Format) cu extensia .tif sau .tiff; Cele mai rspndite formate sunt GIF (8 bii pentru o culoare, 256 culori posibile) i JPEG (24 bii pentru o culoare, 16777216 de culori posibile). Toate imaginile cu care vom lucra vor avea adresa URL exprimata n funcie de directorul ce conine documentul HTML care face referire la imagine. Pentru a insera o imagine intr-o pagina, se utilizeaz eticheta <img> (de la "image"=imagine). Pentru a putea fi identifica imaginea care va fi inserat, se utilizeaz un atribut al etichetei <img> i anume src (de la "source"=sursa). Daca imaginea se afla n acelai director cu fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia. < img src=imagine.gif> Atributul alt permite afiarea unui text alternativ n locul imaginii dac aceasta nu este ncrcat sau lng mouse atunci cnd acesta este plasat peste imagine. <html><head><title> O pagina cu imagine</title></head> <body> O pagina care contine o imagine
16
<img src="poza.jpg" alt=Imagine ...........> Text dupa imagine

</body></html> Chenarul i dimensionarea unei imagini Daca dorii sa adugai un chenar n jurul imaginii, folosii atributul border al etichetei <img>. Valorile acestor atribute sunt numere ntregi pozitive. O imagine are anumite dimensiuni pe orizontal i vertical, stabilite n momentul crerii ei. Daca nu se cere altfel, aceste dimensiuni sunt respectate n momentul afirii ei n pagina Web. Dimensiunile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width i height. Ca valori, cele dou atribute, pot primi un numr de pixeli sau procente din limea i respectiv nlimea ferestrei <html> <head> <title> Imagine cu chenar si redimensionata</title> </head>
<body>
O imagine cu chenar i dimensiuni de 200 pixeli X 15 %
<img src="poza.jpg" border="5" width="350" height="15%"> Text dupa imagine.

</body> </html>
Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului valori:
align care poate lua urmtoarele
- "left" - aliniere la stnga; celelalte componente sunt dispuse pe n partea dreapta; - "right" - aliniere la dreapta; celelalte componente sunt dispuse pe n partea stnga; - "top" - aliniere deasupra; partea de sus a imaginii se aliniaz cu partea de sus a textului ce precede imaginea; - "middle" - aliniere la mijloc; mijlocul imaginii se aliniaz cu linia de baz a textului ce precede imaginea.
17
- "bottom" - aliniere la baza; partea de jos a imaginii se aliniaz cu linia de baz a textului<html>
<head> <title> Alinierea unei imagini</title> </head> <body> Alinieri pe verticala:<br><br><br><br><br> Sus<img src="w3.gif" align="top"><br><br><br> La mijloc: <img src="w3.gif" align="middle"><br><br><br> Jos: <img src="w3.gif" align="bottom"> </html> Alinierea textului n jurul imaginii
Atributele hspace i vspace precizeaz distanta n pixeli pe orizontal, respectiv pe vertical, dintre imagine i restul elementelor din pagina.
<html> <head> <title> Alinierea textului</title> </head> <body> <h4>Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli. </h4><p> Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. <img src="poza.jpg" align="left" width=200 height=200 hspace="30" vspace="30"> Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine. </body> </html> Imagini pentru fondul unei pagini O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. n acest scop se folosete atributul background al etichetei <body>, avnd ca valoare adresa URL a imaginii. Imaginea se multiplica pe orizontala i pe verticala pn umple ntregul ecran.
Atributul bgproperties=fixed menine imaginea fix la realizarea unei defilri n pagin.

<html> <head> <title> Pagina cu imagine de fond</title> </head> <body background="w3.gif" bgproperties=fixed> <b><font color=red>
18
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </body></html> Imagini folosite ca legturi 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 avnd culoarea unei legaturi. Daca stabilim pentru atributul border al etichetei <img> valoare 0 acest chenar dispare. Tabele Tabelele ne permit sa crem o reea dreptunghiular de domenii, fiecare domeniu avnd propriile opiuni pentru culoarea fondului, culoarea textului, alinierea textului etc. Pentru a insera un tabel se folosesc etichetele corespondente <table> </table> Un tabel este format din rnduri. Pentru a insera un rnd ntr-un tabel se folosesc etichetele <tr> ("table row"= rnd de tabel). Folosirea etichetei de sfrit este opional. Un rnd este format din mai multe celule ce conin date. O celul de date se introduce cu eticheta <td>. <html><head><title>tabel</title></head> <body><h1 align=center>Un tabel simplu format din 4 linii si 2 coloane</h1><hr> <table border> <tr> <td>cell 11 <td>cell 12 <tr> <td>cell 21 <td>cell 22 <tr> <td>cell 31 <td>cell 32 <tr> <td>cell 41 <td>cell 42 </table> </body></html>
n mod prestabilit, un tabel nu are chenar. Pentru a aduga un chenar unui tabel, se utilizeaz atributul border. Acest atribut poate primi ca valoare orice numr ntreg (inclusiv 0) i reprezint grosimea n pixeli a chenarului tabelului. Dac atributul border nu este urmata de o valoare atunci tabelul va avea o grosime prestabilita egal cu 1 pixel, o valoare egal cu 0 semnific absena chenarului. Cnd 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 urmtoarele valori posibile: "left" (valoarea prestabilita), "center", "right". Definirea culorilor de fond pentru un tabel Culoarea de fond se stabilete cu ajutorul atributului bgcolor, care poate fi ataat ntregului tabel prin eticheta table, unei linii prin eticheta tr sau celule de date prin eticheta td. Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare. Dac n tabel sunt definite mai multe atribute bgcolor, atunci prioritatea este urmtoarea: celul, linie, tabel.
19
<html> <head><title>culoare tabel</title></head> <body><h1 align=center>Un tabel simplu colorat</h1><hr> <table border="3" bgcolor="green"> <tr> <td>verde 11 <td bgcolor="red">rosu 11 <tr bgcolor="blue"> <td>albastru 21 <td bgcolor="yellow">galben 22 <tr bgcolor="cyan"> <td>cell 31 <td>cell 32 <tr> <td>cell 41 <td bgcolor="white">cell 42 </table> </body> </html>
Culoarea unui table
Dimensionarea celulei unui tabel Distana dintre dou celule vecine se definete cu ajutorul atributului cellspacing al etichetei table. Valorile acestui atribut pot fi numere ntregi pozitive, inclusiv 0, i reprezint distana n pixeli dintre dou celule vecine. Valoarea prestabilita a atributului cellspacing este 2. Distana dintre marginea unei celule i coninutul ei poate fi definit cu ajutorul atributului cellpadding al etichetei table. Valorile acestui atribut pot fi numere ntregi pozitive. Valoarea prestabilita a atributului cellpadding este 1 . <html> <body> <h4 align=center>Un tabel cu distana ntre celule de 10 pixeli iar distana 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>
Distana ntre celule i coninut
Dimensionarea unui tabel Dimensiunile unui tabel - limea i nlimea - pot fi stabilite exact prin intermediul a dou atribute, width i height, ale etichetei table.
20
Valorile acestor atribute pot fi: - numere ntregi pozitive reprezentnd limea respectiv nlimea n pixeli a tabelului; - numere ntregi ntre 1 i 100, urmate de semnul %, reprezentnd fraciunea din limea i nlimea total a paginii. n exemplul urmtor se utilizeaz un truc care permite afiarea intr-o pagina Web a unui text poziionat n centrul paginii. <html> <head><title>text centrat</title></head> <body> <table width="100%" height="100%"> <tr> <td align="center"> <h2>Text centrat.</h2> </table> </body> </html> Alinierea coninutului unei celule Alinierea pe orizontala a coninutului unei celule se face cu ajutorul atributului align care poate lua valorile: "left" (la stnga),"center" (centrat , valoarea prestabilita ), "right" (la dreapta). Alinierea pe verticala a coninutului unei celule se face cu ajutorul atributului valign care poate lua valorile: "bottom" (jos), "middle" (la mijloc, valoarea prestabilita), "top" (sus). Aceste atribute pot fi ataate att etichetei tr pentru a defini tuturor elementelor celulelor unui rnd, ct i etichetelor td pentru a stabili alinierea textului ntr-o singur celul. <html> <head><title>alinierea n celule</title></head> <body><h3 align=center>Un tabel avand continutul celulelor aliniate</h3> <table border width="300" height="300"> <tr align="right"><td>Aici <td>alinierea<td>este centru<td>dreapta <tr> <td align="left">stanga <td align="center">centru<td valign="top">sus <td valign="bottom">jos <tr align="left"><td>aici<td>alinierea <td>este centru<td>stanga (implicita) </table> </body></html>
Alinierea coninutului celulelor
Dimensionarea exacta a celulelor unui tabel Dimensiunea unei celule poate fi stabilit exact cu ajutorul a doua atribute ale acestor etichete: width pentru lime i height pentru nlime. Valorile posibile ale acestor atribute sunt: - numere ntregi pozitive (inclusiv 0) reprezentnd dimensiunea n pixeli a limii, respectiv a nlimii unei celule; - procente din limea , respectiv nlimea tabelului. Tabele de forme oarecare
21
Un tabel trebuie privit ca o reea dreptunghiular de celule. Cu ajutorul a doua atribute ale etichetelor td o celul se poate extinde peste celule vecine. Astfel: - extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului colspan, a crui valoare determina numrul de celule care se unific. - extinderea unei celule peste celulele dedesubt se face cu ajutorul atributului rowspan, a crui valoare determina numrul de celule care se unifica. Sunt posibile extinderi simultane ale unei celule pe orizontala i pe verticala. n acest caz, n etichetele i vor fi prezente ambele atribute colspan i rowspan <html> <head><title>celule unite</title></head> <body><h1 align=center>Un tabel cu celule unite</h1><hr> <table border> <tr> <td rowspan="3">cell 11<br>cell 21<br>cell 31 <td>cell 12<td colspan="2" rowspan="3">cell 13 ,cell 14<br>cell 23, cell 24<br>cell 33, cell 34 <tr> <td>cell 22 <tr> <td>cell 32 <tr> <td>cell 41 <td colspan="3">cell 42,cell 43,cell 44 </table></body></html>
Tabel cu celule unite
Celule vide ale unui tabel Daca un tabel are celule vide, atunci aceste celule vor aprea n tabel fara un chenar de delimitare. n scopul de a afia un chenar pentru celule vide se utilizeaz urmatoarele trucuri: - dupa td se pune - dupa td se pune<br>. Atribute Internet Explorer pentru tabele Urmtoarele atribute ale etichetei table funcioneaz cu Internet Explorer - background permite stabilirea unei imagini pentru fondul unui tabel. Primete ca valoare adresa URL a imaginii folosite pentru fond; - bordercolor permite stabilirea culorii pentru chenarul unui tabel; - bordercolorlight permite stabilirea culorii feei luminate pentru chenarul 3D al unui tabel; - bordercolordark permite stabilirea culorii feei ntunecate pentru chenarul 3D al unui tabel; Atributele frame i rules Atributul frame al etichetei table permite specificarea prilor din chenarul unui tabel care vor fi afiate. Valorile posibile sunt: - void - elimina toate muchiile exterioare ale tabelului; - above - afieaz o muchie n partea superioara a cadrului tabelului; - below - afieaz o muchie n partea inferioara a cadrului tabelului; - hsides - afieaz cate o muchie n partea superioara i inferioara cadrului tabelului; - lhs - afieaz o muchie n partea din stnga a cadrului tabelului;
22
- rhs - afieaz o muchie n partea din dreapta a cadrului tabelului; - vsides - afieaz o muchie n partea din stnga i din dreapta a cadrului tabelului; - box - afieaz o muchie pe toate laturile cadrului tabelului; - border - afieaz o muchie pe toate laturile cadrului tabelului; Atributul rules permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt: - none - elimina toate muchiile interioare ale tabelului; - rows - afieaz muchii orizontale intre toate liniile tabelului; - cols - afieaz muchii verticale intre toate coloanele tabelului; - all - afieaz muchii intre toate liniile i coloanele; <html> <head><title>Atribute frames si rules</title></head> <body><h1 align=center>Atributele frames si rules</h1> <table width="400" frame=box rules=rows cellspacing=10> <tr> <td>cell 11 <td>cell 12<td>cell 13 <tr> <td>cell 21 <td>cell 22<td>cell 23 </table> </body> </html>
Atribute frames i rules pentru un tabel
Cadre n HTML (frames) Cadrele ne permit s definim n fereastra browserului zone n care sa fie ncrcate documente HTML diferite. Cadrele sunt definite ntr-un fiier HTML special, n care blocul <body>...</body> este nlocuit de blocul <frameset>...</frameset>. n interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>. Un atribut obligatoriu al etichetei <frame> este src, care primete ca valoare adresa URL a documentului HTML care va fi ncrcat n acel cadru. Definirea cadrelor se face prin mprirea ferestrei pe orizontal sau pe vertical. - mprirea unei ferestre ntr-un numr de cadre pe vertical se face cu ajutorul atributului cols al etichetei <frameset>; - mprirea unei ferestre ntr-un numr de cadre pe orizontal se face cu ajutorul atributului rows al etichetei <frameset>; Valoarea atributelor cols i rows este o list de elemente separate prin virgul, care descriu modul n care se face mprirea. Elementele listei pot fi: - un numr ntreg de pixeli; - procente din dimensiunea ferestrei (numr intre 1 i 99 terminat cu %); - n* care nseamn n pri din spaiul rmas; Exemplul
23
<frameset cols=200,*,50%,*> nseamn o mprire n 4 cadre pe vertical, dintre care primul are 200 pixeli, al treilea ocup jumtate din spaiul total disponibil, iar al doilea i al patrulea ocup n mod egal restul de spaiu rmas disponibil. Exemplu <frameset rows=200,1*,50%,2*> nseamn o mprire n 4 cadre, dintre care primul are 200 pixeli , al treilea ocup jumtate din spaiul total disponibil, iar al doilea i al patrulea ocup n mod egal restul de spaiu rmas disponibil, care se mparte n trei pri egale, al doilea cadru ocupnd o parte , iar al patrulea ocupnd 2 pri. Observatii: - dac mai multe elemente din list sunt configurate cu * , atunci spaiul disponibil rmas pentru ele se va mpri n mod egal. - ntr-un cadru se poate ncrca un document HTML sau poate fi mprit la rndul su n alte cadre (folosind <frameset>). n exemplul urmtor este creat o pagina Web cu trei cadre orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini <html><head><title>cadre</title></head> <frameset rows="100,*,20%"> <frame src="p1.html"> <frame src="poza.jpg"> <frame src="p2.html"> </frameset> </html> n exemplul urmtor este creat o pagina Web cu trei cadre mixte. Pentru a o crea se procedeaz din aproape n aproape. Mai nti, pagina este mprit n dou cadre de tip coloan, dup care al doilea cadru este mprit n doua cadre de tip linie. <html> <head><title>cadre</title></head> <frameset cols="20%,*"> <frame src="p1.html"> <frameset rows="*,*"> <frame src="p2.html"> <frame src="p1.html"> </frameset> </frameset> </html>
24
Culori pentru chenarele cadrelor i dimensionarea chenarului unui cadru Pentru a stabili culoarea chenarului unui cadru se utilizeaz atributul bordercolor. Acest atribut primete ca valoare un nume de culoare sau o culoare definit n conformitate cu modelul de culoare RGB. Atributul bordercolor poate fi ataat att etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse, ct i etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru individual. Atributul border al etichetei <frameset> permite configurarea limii chenarelor tuturor cadrelor la un numr dorit de pixeli. Valoarea prestabilita a atributului border este de 5 pixeli. O valoare de 0 pixeli va defini un cadru fr chenar. n mod prestabilit, chenarul unui cadru este afiat i are aspect tridimensional. Afiarea chenarului unui cadru se poate dezactivata dac se utilizeaz atributul frameborder cu valoare "no". Acest atribut poate fi ataat att etichetei <frameset> (dezactivarea fiind valabila pentru toate cadrele incluse) ct i etichetei <frame> (dezactivarea fiind valabil numai pentru un singur cadru). Valorile posibile ale atributului frameborder sunt: "yes" - echivalent cu 1; "no" - echivalent cu 0; Bare de defilare Atributul scrolling al etichetei <frame> este utilizat pentru a aduga unui cadru o bar de derulare care permite navigarea n interiorul documentului afiat n interiorul cadrului. Valorile posibile sunt: - "yes" - barele de derulare sunt adugate ntotdeauna; - "no" - barele de derulare nu sunt utilizabile; - "auto" - barele de derulare sunt vizibile atunci cnd este necesar <html> <head><title>cadre</title></head> <frameset cols="*,*,*"> <frame src="p1.html" scrolling="yes" noresize> <frame src="p2.html" scrolling="no" noresize> <frame src="p1.html" scrolling="auto" noresize> </frameset> </html> Atributul noresize al etichetei <frame> (fr nici o valoare suplimentar) dac este prezent, inhib posibilitatea prestabilit a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului. Poziionarea documentului ntr-un cadru Atributele marginheight i marginwidth ale etichetei <frame> permit stabilirea distanei n pixeli dintre coninutul unui cadru i marginile verticale, respectiv orizontale ale cadrului. Valori posibile: - numr de pixeli; - procent din limea, respectiv din nlimea cadrului; <html><head><title>cadre</title></head> <frameset cols="*,*,*"> <frame src="p1.html"> <frame src="p2.html" marginheight=50> <frame src="p1.html" marginwidth=50> </frameset> </html>
25
Poziionarea documentelor n cadre
Cadre interne (n-line) Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru intern se introduce ntr-o pagina Web n mod asemntor cu o imagine aa cum rezulta din urmtorul exemplu: <iframe src="ex_3.1.html" height=40% width=50%> </iframe> n acest caz, am specificat un cadru intern care are 40% din nlimea i 50% din limea paginii curente. Atributele acceptate de eticheta <iframe> sunt n parte preluate de la etichetele <frame> i <frameset>, cum ar fi: src, border, frameborder, bordercolor, marginheight, marginwidth, scrolling, name, noresize; sau de la eticheta <img> vspace, hspace, align, width, height; <html> <head><title>cadre interne</title></head> <body> <a href="p1.html" target="icadru">Fisierul1</a><br> <a href="p2.html" target="icadru">Fisierul2</a><br> <center> <iframe width="60%" height="50%" border=2 bordercolor=red name="icadru" src="p1.html"></iframe></center> </body> </html>
Cadre interne
inte pentru legaturi n mod prestabilit, la efectuarea unui clic pe o legtura noua pagin (ctre care indic legtura) o nlocuiete pe cea curent n aceeai fereastr (acelai cadru). Acest comportament se poate schimba n doua moduri:
26
prin plasarea n blocul <head>...</head> a unui element <base> care precizeaz, prin atributul target numele ferestrei (cadrului) n care se vor ncrca 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 ncrca pagina nou referit de legtur, conform sintaxei: <a href="fiier.html" target="nume fereastra/frame"> ... </a> Observatie: Daca este prezent att un atribut target n <base> ct i un atribut target n <a>, atunci cele precizate de atributul target din <a> sunt prioritare. Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform sintaxei: <frame name="nume cadru"> <html><head><title>cadre</title></head> <frameset cols="20%,*"> <frame src="left.html" name="left"> <frame name="main"> </frameset> </html> <html> <head><title>legaturi</title> </head> <body> <a href="p1.html" target="main">Fisierul1</a><br> <a href="p2.html" target="main">Fisierul2</a><br> <br><br> <a href="p1.html" target="_blank">Fis1 intr-o fereastra noua</a><br><br> <a href="p1.html"target="_self">Fis1 n fereastra curenta</a> </body> </html>
Folosirea atributului target pentru legturi
Valori pentru atributul target Atributul target al etichetei<frame> accepta anumite valori predefinite de o valoare deosebita pentru creatorii de pagini Web. Aceste valori sunt: "_self" (ncrcarea noii pagini are loc n cadrul curent); "_blank" (ncrcarea noii pagini are loc intr-o fereastra noua anonima); "_parent" (ncrcarea noii pagini are loc n cadrul parinte al cadrului curent daca acesta exista, altfel are loc n fereastra browserului curent); "_top" (ncrcarea noii pagini are loc n fereastra browserului ce contine cadrul curent) Formulare
27
Un formular este un ansamblu de zone active alctuit din butoane, casete de selecie, cmpuri de editare etc. Formularele sunt utilizate pentru construirea unor pagini Web care permit utilizatorilor s introduc efectiv informaii i s le transmit serverului. Formularele pot varia de la o simpl caset de text, pentru introducerea unui ir de caractere pe post de cheie de cutare - element caracteristic tuturor motoarelor de cutare din Web - pn la o structur complex, cu multiple seciuni, care ofer faciliti puternice de transmisie a datelor. O sesiune cu o pagina web ce conine un formular cuprinde urmtoarele etape: - utilizatorul completeaz formularul i l expediaz unui server. - o aplicaie dedicat de pe server analizeaz formularul completat i (dac este necesar) stocheaz datele ntr-o baz de date. - dac este necesar serverul expediaz un rspuns utilizatorului. Un formular este definit intr-un bloc delimitat de etichetele corespondente <form> i </form>. Atribute eseniale ale elementului <form> - atributul action precizeaz ce se va ntmpla cu datele formularului odat ce acestea ajung la destinaie. De regul, valoarea atributului action este adresa URL a unui script aflat pe un server WWW care primete datele formularului, efectueaz o prelucrare a lor i expediaz ctre 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 urmtoarele valori: - get (valoarea implicita). n acest caz ,datele din formular sunt adugate la adresa URL precizata de atributul action; nu sunt permise cantiti mari de date (maxim 1 Kb)- intre adresa URL i date este inserat un "?". Datele sunt adugate conform sintaxei: nume_camp = valoare_camp. ntre diferite seturi de date este introdus un "&". Exemplu: "http://www.yahoo.com/cgibin/nume_fis.cgi?nume1 = valoare1&nume2 = valoare2"; - post. n acest caz datele sunt expediate separat. Sunt permise cantiti mari de date (ordinul MB) Pentru ca un formular sa fie funcional, trebuie precizat ce se va ntmpla cu el dup completare i expediere. Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin posta electronica (e-mail). Pentru aceasta se folosete atributul action care primete ca valoare "mailto:adresa e-mail". Formular cu cmp de editare i buton de expediere Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Pentru a preciza tipul elementului se folosete atributul type al etichetei <input>. Pentru un cmp de editare, acest atribut primete valoarea "text". Alte atribute pentru un element <input> sunt: - atributul name ,permite ataarea unui nume fiecrui element al formularului. - atributul value ,care permite atribuirea unei valori iniiale unui element al formularului. Un buton de expediere al unui formular se introduce cu ajutorul etichetei <input>, n care atributul type este configurat la valoarea "submit". Acest element poate primi un nume prin atributul name. Pe buton apare scris "Submit Query" sau valoarea atributului value , dac aceasta valoare a fost stabilit. <html> <head><title>FormEx_1 </title></head> <body><h4> Un formular cu un camp de editare i un buton de expediere</h4> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> Numele:<input type="text" name="numele" value="Numele si prenumele"><br> <input type="submit" value="expedieaza"> </form></body> </html>
28
Formular cu caset text i buton de expediere
Pentru elementul <input> de tipul cmp de editare (type = "text") , alte doua atribute pot fi utile: - atributul size specifica limea cmpului de editare; - atributul maxlength specifica numrul maxim de caractere pe care le poate primi un cmp de editare; Observaii: - daca atributul type lipsete intr-un element <input> , atunci cmpul respectiv este considerat n mod prestabilit ca fiind de tip "text". - formularele cu un singur cmp (de tip text) nu au nevoie de un buton de expediere, datele sunt expediate automat dup completarea i apsarea tastei ENTER. Butoane Butonul Reset Daca un element de tip <input> are atributul type configurat la valoarea "reset", atunci n formular se introduce un buton pe care scrie "Reset". La apsarea 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 afieaz textul "Reset" dac atributul value lipsete, respectiv valoarea acestui atribut n caz contrar. <html> <head><title>formex_2</title></head> <body><h1>Un formular cu un buton reset</h1><hr> <form action="mailto:xxxxx@xxx.com" method="post"> Introduceti numele:<input type="text" name="nume" value="Numele"><br> Introduceti prenumele:<input type="text" name="prenume" value="Prenumele"><br> <input type="reset" value="sterge"> <input type="submit"> </form></body></html>
Cmp de editare de tip "password"
29
Daca se utilizeaz eticheta <input> avnd atributul type configurat la valoarea "password", atunci n formular se introduce un element asemntor cu un cmp de editare obinuit (introdus prin type="text"). Toate atributele unui cmp de editare rmn valabile. Singura deosebire const n faptul c acest cmp de editare nu afieaz caracterele n clar. <html> <head><title>formex_3</title></head> <body><h1>Un formular cu un camp de parola</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> Nume:<input type="text" name="nume" value="Numele"><br> Prenume:<input type="text" name="prenume" value="Prenumele"><br> Password:<input type="password" name="parola" ><br> <input type="reset" value="sterge"> <input type="submit" value="trimite"> </form></body> </html>
Butoane radio Butoanele radio permit alegerea, la un moment dat, a unei singure variante din mai multe posibile. Butoanele radio se introduc ca familii de butoane prin eticheta <input> cu atributul type avand valoarea "radio", iar atributul name trebuie s primeasc aceeai valoare pentru fiecare buton dintro familie. <html> <head><title>formex_4</title></head> <body><h1>Un formular cu butoane radio</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> Alegeti sexul:<br> <input type="radio" name="sex" value="m">masculin<br> <input type="radio" name="sex" value="f">feminin<br> <input type="reset"> <input type="submit"> </form></body> </html>
30
Butoane radio
La expedierea formularului se va transmite una dintre perechile "sex=m" sau "sex=f", n funcie de alegerea fcut de utilizator. Casete de validare O caseta de validare (checkbox) permite selectarea sau deselectarea unei opiuni. - Pentru inserarea unei casete de validare se utilizeaza eticheta <input> cu atributul type configurat la valoarea "checkbox" . Observatii: - fiecare caseta poate avea un nume definit prin atributul name. - fiecare caseta, ca i un buton radio, poate avea valoarea prestabilita "selectat" definita prin atributul checked. <html> <head><title>formex_5</title></head> <body><h1>Un formular cu casete checkbox</h1><hr> <form action="mailto:xxxxx@xxx.com" method="post"> Alegeti meniul:<br> <input type="checkbox" name="pizza" value="o portie">Pizza<br> <input type="checkbox" name="nectar" value="un pahar"> Nectar<br> <input type="checkbox" name="bere" value="o sticla"> Bere<br> <input type="checkbox" name="cafea" value="o ceasca"> Cafea<br> <input type="reset"> <input type="submit"> </form></body> </html>
Casete de validare
Casete de fiiere
31
Intr-o pereche "name = value" a unui formular se poate folosi ntregul coninut al unui fiier pe post de valoare. Pentru aceasta se insereaz un element <input> intr-un formular , cu atributul <type> avnd valoarea "file" (fiier). Atributele pentru un element de tip caseta de fisiere: - atributul name permite ataarea unui nume - atributul value primete ca valoare adresa URL a fiierului care va fi expediat o data cu formularul. Aceasta valoare poate fi atribuita direct atributului value, poate fi tastata intr-un cmp 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 apsarea butonului Browse... din formular. <html> <head><title>formex_6</title></head> <body><h1>Un formular cu caseta de fisiere</h1><hr> <form action="mailto:xxxxx@xxx.com" method="post"> Alegeti fisierul:<input type="file" name="fisier" value="c:\temp\proba.html" enctype="multipart/form-data"><br><input type="reset"> <input type="submit"> </form></body></html>
Caseta de fiiere
Liste de selectie O lista de selectie permite utilizatorului sa aleag unul sau mai multe elemente dintr-o list finit. Lista de selecie este inclus n formular cu ajutorul etichetelor corespondente <select> i </select>. O list de selecie poate avea urmtoarele atribute: - atributul name, care ataeaz listei un nume (utilizat n perechile "name=value" expediat serverului); - atributul size, care precizeaz (printr-un numr ntreg pozitiv , valoarea prestabilita fiind 1) cte elemente din list sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin acionarea barei de derulare ataate automat listei). Elementele unei liste de selecie 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 lipsete , atunci ctre server va fi expediat textul ce urmeaz dup <option>; - atributul selected (fr alte valori) permite selectarea prestabilita a unui element al listei . <html> <head><title>formex_7</title></head> <body><h1>Un formular cu o lista de selectie</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> Universitatea absolvita:<br><br> <select name="universitate" size="3"> <option value="B"> Universitatea din Cluj <option value="UNBM" selected> Universitatea de Nord Baia Mare <option value="UTT"> Universitatea Technica din Timisoara
32
<option value="UTB"> Universitatea Technica din Brasov </select><br><br> <input type="reset"> <input type="submit"> </form></body> </html> Cmpuri de editare multilinie Intr-un formular cmpuri de editare multilinie pot fi incluse cu ajutorul etichetei <textarea>. Eticheta are urmtoarele atribute: - atributul cols, care specifica numrul de caractere afiate intr-o linie; - atributul rows, care specifica numrul de linii afiate simultan; - atributul name, care permite ataarea unui nume cmpului de editare multilinie; - atributul wrap, care determin comportamentul cmpului de editare fa de sfritul de linie. Acest atribut poate primi urmtoarele valori: a) " off "; n acest caz: ntreruperea cuvintelor la marginea dreapt a editorului se produce numai cnd dorete utilizatorul; caracterul de sfrit 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 sfrit 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 sfrit de linie n textul transmis serverului o data cu formularul . <html> <head><title>formex_9</title></head> <body><h1>Un formular cu un camp de editare multilinie</h1> <hr> <form action="mailto:xxxxx@xxx.com" method="post"> <textarea name="text multilinie" cols="30" rows="5" wrap="off"> Prima linie din textul initial. A doua linie din textul initial. </textarea> <input type="reset"> <input type="submit"> </form></body> </html>
Cmp de editare multilinie
Intr-un formular pot fi afiate butoane fr un rol prestabilit. Cnd utilizatorul apas un buton, se lanseaz n execuie o funcie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcii (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 ataarea unui nume butonului - atributul value, care primete ca valoare textul ce va fi afisat pe buton.
33
<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> Un formular complex n exemplul urmtor este prezentat un formular continand elemente prezentate anterior. Cmpurile formularului sunt incluse n celule unui tabel pentru a obine o aliniere dorita. <html> <head><title>formex_10</title></head> <body><h1>Un formular complex</h1> <hr> <center><table bgcolor="#eeeeee"> <form action="mailto:xxxxx@xxx.com" method="post"> <caption align="top">MENIU</caption> <tr align=left><th>Numele: <td><input type="text" name="numele"> <tr align=left><th>Preumele: <td><input type="text" name="prenumele"> <tr align=left><th>Telefonul: <td><input type="text" name="telefonul"> <tr align=left><th>Alegeti pizza: <td><input type="checkbox" name="ciuperci">cu ciuperci <input type="checkbox" name="mexicana">mexicana <input type="checkbox" name="europeana">europeana <tr align=left><th>Alegeti plata:<td> <input type="radio"name="plata">cash <input type="radio" name="plata">card <tr align=left><th>Comentarii: <td> <textarea name="comentarii" cols="30" rows="5" wrap="off"> Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre </textarea> <tr align=left valign=top><td> <input type="reset" value="sterge"><td> <input type="submit" value="expedieaza"> </form></table></body> </html>
Un formular complex
34
Stiluri Stilurile pun la dispoziia creatorilor de site-uri noi posibiliti de personalizare a paginilor Web. Un stil reprezint un mod de a scrie un bloc de text (adic anumite valori pentru font, mrime, culoare, aliniere, distane fa de margini etc). Exista doua modaliti de a defini un stil: - sintaxa CSS (Cascading Style Sheets) prezentat n continuare; - sintaxa Javascript. Stilurile sunt introduse n doi pai: - definirea stilului; - precizarea domeniului de aplicare a stilului. Stilurile sunt de finite n cadrul blocului <head></head> ntre etichetele <style></style>. n funcie 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 mrime 1 vor fi de culoare roie i centrate. Daca dorim ca acelai stil s fie utilizat de ctre mai multe elemente (de ex. "h1", "h2", i "p") atunci se utilizeaz o lista acestor elemente, separate prin virgula: <style> h1, h2, p {text-align:center; color:red;} </style> Clase de stiluri Aceste stiluri permit definirea unui stil general i folosirea lui oriunde este necesar. Exemplu: Definim o clas de stiluri "ac" (albastru i centrat) n interiorul blocului <style>...</style>, aflat la rndul lui n blocul <head>...</head>: <style> .ac {text-align:center; color:blue;} </style> Dac dorim ca un titlu de mrimea 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" procedai astfel: - n blocul <style>...</style> introducei definiia stilului conform sintaxei: <style> #verde { color: green } </style> - n elementul n care se dorete utilizarea local a acestui stil, folosii atributul id care primete 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>
35
<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 iniiaz 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 intrun bloc cu ajutorul delimitatorilor <span>...</span>, dup care utilizam atributul style pentru eticheta <span>. Stiluri definite n fiiere externe Stilurile definite n interiorul unui bloc <style>...</style> pot fi transferate ntr-un fiier extern existnd astfel posibilitatea utilizrii lor n mai multe fiiere HTML. Pentru a utiliza un stil definit intr-un fiier extern se procedeaz astfel: - se creeaz un fiier care sa conin numai descrierea stilurilor i se salveaz cu extensia .css sau .html. Continutul acestui fiier coincide cu coninutul unui bloc <style>...</style> , fr ca aceti delimitatori sa fie inclui. - n fiierul HTML care utilizeaz stilurile definite la pasul anterior, se include n blocul <head>...</head> o eticheta <link> avnd trei atribute. - atributul rel cu valoarea "stylesheet" - atributul href avnd ca valoare adresa URL a fiierului creat la punctul 1 ; - atributul type cu valoarea "text/css". Se utilizeaz titlurile definite n fiierul extern ca i cum ar fi definite n fiierul HTML curent intrun bloc <style>...</style>. Pseudoclase. Pseudoclasele se utilizeaz pentru personalizarea legturilor. Ele se definesc n blocul <style>...</style> sau ntr-un fiier 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 urmtoarele doua metode: - a: link.CLASA1 {...} combinat cu <a class = CLASA1 href=" "> ...</a> - a: link#ID1 {...} combinat cu <a id = ID1 href=" "> ...</a>
36
Configurarea fontului folosind stilurile Mrimea fontului este stabilit prin atributul font-size. Valori posibile: - predefinite: xx-small, x-small, small, medium, large, x-large, xx-large - numr urmat de unitate de msur (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 <html> <head><title>configurarea fontului</title> <style> #s1 {font-size:16pt; font-family:verdana;} #s2 { font-size:2cm; font-family:Arial; font-weight:900} #s3 { font-size:20px; font-family:fantasy;font-style:italic;} </style> </head> <body> <div id=s1>text introdus cu font verdana, dimensiune 16pt</div> <div id=s2>text introdus cu font arial, dimensiune 2 cm, ingrosat</div> <div id=s3>text introdus cu font generic fantasy, dimensiune 20 pixeli, inclinat</div> </body> </html>
Configurarea fontului prin stiluri
Setarea textului Culoarea textului este stabilit prin atributul color: valori posibile: - nume culoare - construcie n hexazecimal #rrggbb - apelul funciei rgb(r,g,b) sau rgb(%r,%g,%b) Culoarea fondului textului este stabilit prin atributul background-color. Valori posibile aceleai 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 <html> <head><title>configurarea textului</title> <style> #s1 {color:red;background-color:yellow;text-align:center} #s2 { color:cyan;background-color:black;text-align:right} #s3 { color:BLACK;background-image:url("w3.gif");text-decoration:overline}
37
</style> </head> <body> <div id=s1>text rosu pe fundal galben</div> <div id=s2>text cyan pe fundal negru</div> <div id=s3>text cu imagine de fundal<br> text cu imagine de fundal<br> text cu imagine de fundal<br> text cu imagine de fundal<br> text cu imagine de fundal<br> text cu imagine de fundal<br> </div> </body> </html>
Configurarea textului
Straturi Un strat este vzut ca un bloc de text sau elemente HTML care poate fi dimensionat i poziionat 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 motenete toate atributele stilurilor i accept i atribute referitoare la dimensiune i poziionare. Dimensiunile unui strat se stabilesc prin atributele width i height. Ca valori pot primi un numr urmat de unitate de msur. Poziionarea unui strat poate fi de doua tipuri: - absolut, stratul fiind poziionat n funcie de colul din stnga sus al ferestrei sau a blocului din care face parte - relativ, stratul fiind poziionat n funcie de ultimul element introdus n pagina Tipul poziionrii este stabilit prin atributul position cu valorile posibile absolute sau relative. Poziia 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: numr cu unitate de msur Exemplu de straturi poziionate 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;}
38
#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
Daca straturile prezint i culoare de fundal atunci ele sunt opace.Exemplu de poziionare relativa poziionarea relativa pentru a afia un text unduitor. <html> <head><title>text unduitor</title> <style> #sus {position:relative; top:-10;} #jos {position:relative; top:10;} </style> </head> <body> <h1> text unduitor</h1><hr><br><br> normal<span id=sus>sus<span id=sus>mai sus</span>sus</span>normal <span id=jos>jos<span id=jos>mai jos</span>jos</span>normal </body> </html>
Poziionare relativ
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>
39
Efect de umbr cu ajutorul straturilor
40
Modulul II. JAVASCRIPT

Firma Netscape Communications, din dorina de a extinde funcionalitatea popularului su program de navigare Netscape Navigator, a dezvoltat un limbaj de programare, astfel nct programele scrise n acest limbaj s poat fi incluse n cadrul paginilor Web. Iniial Netscape i-a denumit noul limbaj LiveScript, iar apoi, pentru a profita de renumele obinut de limbajul de programare Java, denumirea a fost schimbat n JavaScript. n general, aplicaiile, indiferent ct de bine sunt realizate, nu pot satisface cerinele tuturor utilizatorilor, motiv pentru care acestora li se pune la dispoziie un limbaj simplu de programare cu ajutorul cruia pot s creeze extensii ale aplicaiei. De obicei, aceste miniprograme nu sunt compilate, ci interpretate linie cu linie n timpul rulrii aplicaiei. Cel mai obinuit exemplu de astfel de microaplicaii l reprezint macro-urile din Microsoft Office. Aceste microaplicaii poart denumirea generic de script-uri, iar colecia de comenzi i instruciuni care pot aprea n cadrul unui script poart denumirea de limbaj de scriptare sau limbaj de tip script. JavaScript este un limbaj de scriptare a crui sintax seamn, ntr-o oarecare msur, cu cea a limbajelor C, C++, Pascal, Java sau Delphi, dar care are anumite particulariti care l fac s se deosebeasc esenial de orice alt limbaj de programare. Pentru ca programul de navigare s poat executa instruciuni JavaScript, el trebuie configurat n aa fel nct s nu ignore astfel de instruciuni. Totodat programul de navigare trebuie s recunoasc instruciunile JavaScript; Netscape Navigator ofer suport pentru JavaScript ncepnd cu versiunea 2.0, n timp ce Internet Explorer ofer acest suport ncepnd cu versiunea 3.0. Limbajul JavaScript este un limbaj bazat pe obiecte, adic un limbaj orientat obiect care conine obiecte predefinite. De asemenea JavaScript este un limbaj proiectat astfel nct s reacioneze n momentul apariiei unui eveniment. Totodat JavaScript este un limbaj sigur n sensul c, n principiu, nu pot fi scrise microaplicaii care s aib aciuni duntoare 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 fiiere. Totui exist posibilitatea pstrrii anumitor parole introduse de ctre utilizator, ceea ce ar putea deranja pe unii dintre acetia. Din aceast cauz majoritatea programelor de navigare ofer o opiune a crei activare nu permite executarea script-urilor. n sfrit, JavaScript este un limbaj independent de platforma pe care ruleaz, adic un acelai script va putea fi executat sub Unix, MacIntosh sau Windows fr a fi necesar prezena unui emulator sau efectuarea anumitor modificri. 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 aplicaii independente sau pentru proiectarea de microaplicaii care pot fi incluse n cadrul paginilor Web i care poart denumirea de applet-uri i sunt i ele independente de platform. Iat cteva deosebiri eseniale ntre Java i JavaScript: aplicaiile Java sunt compilate n fiiere binare care sunt apoi interpretate de ctre VJM (Virtual Java Machine - Main Virtual Java), n timp ce codul JavaScript este transmis ca un text obinuit i este interpretat. Java este orientat obiect n timp ce JavaScript este bazat pe obiecte.
41
codul JavaScript este inclus n cadrul documentului HTML; applet-urile Java sunt referite din cadrul unui document HTML, dar codul se afl ntr-un fiier 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 aplicaiilor Java variabilele trebuie declarate nainte de a fi folosite. Mai mult, n cadrul script-urilor JavaScript, o variabil care este considerat ca avnd un anumit tip la un moment dat poate fi considerat ulterior ca avnd 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 numr real. JavaScript folosete legarea dinamic, adic referinele sunt verificate n timpul rulrii, n timp ce Java folosete legarea static, adic referinele trebuie s existe n momentul compilrii. n general, limbajul JavaScript este folosit pentru efectuarea de calcule, citirea unor date dintr-o tabel, proiectarea de ecrane HTML fr a folosi script-uri CGI.
2.2 Marcajul <script type=text/javascript>

n interiorul unui document HTML, instruciunile JavaScript sunt cuprinse, de obicei, n interiorul marcajului <script type=text/javascript>. Acest marcaj poate aprea att n antetul documentului HTML (marcajul <HEAD>), ct i n corpul documentului (marcajul <BODY>). Script-urile definite n antet sunt ncrcate naintea ncrcrii restului paginii, antetul fiind un loc excelent pentru plasarea funciilor JavaScript pentru a fi siguri c acestea vor fi disponibile atunci cnd sunt apelate n alte seciuni 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 cruia poate fi afiat 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>
42
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 acelai 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 fiierul extern este info.js, atunci fiierul HML care apeleaz fiierul 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 conine dect declaraii i funcii JavaScript, iar extensia trebuie s fie .js.
Comentarii n Javascript
La versiuni mai vechi de browsere, instruciunile JavaScript sunt scrise ntre comentarii. Sintaxa generala este: <script type=text/javascript> <! - - Inceput comentariu Instructiuni JavaScript <! - - Sfarsitul comentariului - - > </SCRIPT> Proiectanii introduc instruciunile JavaScript ntre comentarii HTML astfel nct browserele care nu permit JavaScript vor ignora instruciunile, interpretndu-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.
43
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 cnd o declar fiindc ea va fi convertit automat dac va fi nevoie n timpul execuiei scriptului. O variabil se poate declara n dou moduri: atribuindu-i o valoare: x=124 cu ajutorul cuvntului rezervat var: var x=124 O variabil JavaScript creia nu i-a fost atribuit o valoare va avea valoarea undefined. Rezultatul evalurii unei variabile depinde de modul n care a fost declarat, astfel: - dac variabilei nu i-a fost atribuit o valoare i a fost declarat fr var rezultatul evalurii variabilei va fi o eroare runtime. - dac variabilei nu i-a fost atribuit o valoare, dar a fost declarat folosind cuvntul rezervat var rezultatul evalurii variabilei va fi undefined sau NaN n context numeric. Variabilele, definite n afara funciilor, se numesc variabile globale i ele sunt accesibile oriunde n documentul curent. Variabilele, definite n interiorul funciilor, se numesc variabile locale i ele sunt vizibile numai n interiorul funciilor 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 conine secvene Escape: \n, \t, \f etc. n JavaScript sunt admise urmatoarele categorii de expresii: aritmetice,iruri de caractere i logice. Operatorii utilizai 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 comparaie, folosii pentru scrierea unor expresii logice. La evaluarea acestora se poate obine true sau false: <, >, <=, >=, ==, != Exist n JavaScript o serie de funcii predefinite cum ar fi: eval(expr): evalueaz o expresie data ca i parametru (string); isFinite(number) : determin dac argumentul este un numr finit; isNaN(testValue) : determina dac testValue este NaN; parseFloat(str) : transform stringul str n valoare float i o returneaz;
44
parseInt(str [, radix]) : transform str ntr-o valoare de tip ntreg i o returneaz; radix este baza de numeraie; Number(obj) : convertete obj la number; String(obj) : convertete obj la string; escape/unescape(str) : folosite pentru codificare/decodificare stringuri. Crearea de casete simple de mesaj Pentru afiarea unui mesaj adresat utilizatorului sub forma unei casete de dialog, se poate utiliza funcia 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 intrri tip text de la utilizator n cazul cnd este nevoie de citirea unei linii text de la utilizator, se poate utiliza funcia prompt pentru afiarea unei casete de dialog care ofer utilizatorului un prompter (cursor) pentru a introduce date i pentru preluarea ulterioara a intrrii utilizatorului. Funcia arat prompt ( text, [valoare iniiala] ) i provoac apariia unei casete n care utilizatorul va putea introduce un ir de caractere. Caseta conine i un buton 'OK' . Controlul de editare este iniializat cu valoare iniial, dac acest argument este prezent, altfel este iniializat 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

45
Funcia 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>
Funcia confirm() are rolul de a crea o fereastr prin intermediul creia se cere confirmarea utilizatorului pentru efectuarea unei aciuni. Funcia 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 apsrii butonului Ok sau a tastei ENTER valoarea returnat este true, iar n cazul apsrii 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. Funcia confirm
Obiectul document n JavaScript, obiectul document corespunde documentului HTML curent. Daca un script utilizeaz metod write pentru obiectul document n vederea afirii ieirii, browserul va reda ieirea n documentul curent.Exemple de utilizare: document.write(text)
46
document.write(variabil) Putem intercala cod JavaScript cu cod HTML. n document.write se pot utiliza etichetele HTML cu condiia 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 afia texte scrise cu fonturi bold, respectiv italic ca n exemplu alturat.
<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 crora se citesc 2 numere i s se afieze 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>
Instruciuni JavaScript Instruciunile JavaScript pot fi terminate s nu cu caracterul ;. Acest caracter este obligatoriu doar atunci cnd sunt mai multe instruciuni pe acelai rnd. Instruciunea de atribuire a fost utilizat i n exemple anterioare i este cea cunoscut din C i Java. Instruciunea IF este o instruciunea condiional i folosete cuvintele cheie if i else avnd urmtoarea sintax:
if (condiie) { instruciuni pentru condiie adevrat } else { instruciuni pentru condiie fals }
Acoladele au un rol foarte important n JavaScript, cu ajutorul lor se pot grupa mai multe instruciuni ntr-un singur bloc de instruciuni care sunt tratate ca o singur instruciune. S se sciteasca numele i parola unui utilizator iar n funcie de acestea s se afieze 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!) ;
47
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
Instruciuni de ciclare Adeseori se dorete executarea repetat a mai multor instruciuni. Acest lucru este posibil, cu ajutorul instruciunilor de ciclare. n JavaScript exist instruciunile de ciclare: for, while i do...while. Sintaxa instruciunii for este: for (iniializare; condiie; incrementare) {corpul ciclului; } - Oricare dintre cele patru seciuni (de iniializare, condiia, de incrementare sau corpul) poate lipsi. S se scrie text cu nlimi de la h1 la h6 i apoi s realizeze cu tabel cunumrul 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>
48
Figura 3. 5 Text scris n mod programat
Sintaxa instruciunii while este:

while (condiie) { corpul ciclului }
n cazul instruciunii while poate lipsi corpul ciclului, prezena condiiei fiind obligatorie.
<script type=text/javascript> i=; while(i!==student) { i=prompt(Introduceti parola,); } document.write(Password accepted); </script>
Instruciunea SWITCH Poate fi folosit pentru alegerea unei opiuni din mai multe opiuni. Sintaxa instruciunii este:
switch (expresie) { case eticheta : instruciune; break; case eticheta: instruciune; break; ... default : instruciune; } <script type=text/javascript>
49
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>
Instruciunile break i continue Instruciunea break permite ieirea forat dintr-o instruciune de ciclare. n momentul n care interpretorul JavaScript ntlnete o astfel de instruciune, el ntrerupe execuia ciclului n interiorul cruia se afl aceasta. Instruciunea continue permite saltul peste anumite instruciuni din corpul ciclului care nu mai trebuie executate n anumite condiii. n cazul unui ciclu for, se trece n mod automat, la ultimul pas al execuiei 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 acelai tip sub un nume. Un ir de elemente are o anumit dimensiune, are un anumit numr de elemente, fiecare element avnd o valoare i este identificat prin poziia n cadrul irului. Un ir se definete prin: numeir = new Array(). S se introduc 3 nume de la tastatur i s se afieze n pagin unul dup cellalt. <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;
50
} </script> <input type=button value=culoare fundal onclick=change()>
2.4 Funcii i evenimente n Java Script O funcie este vzut ca un bloc de instruciuni identificat printr-un nume care poate primi anumite argumente i ntoarce o valoare. Sintaxa unei funcii este: function numefuncie (list parametri formali) { instruciuni; return (valoare) } Apelul funciei se realizeaz numefuncie(parametri efectivi). Funciile sunt definite de obicei n zona HEAD i sunt apelate apoi, ori de cte 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: funcia titlu (parametru), s afieze parametru aceasteia cu font albastru de mrime 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 funcii
Funciile pot fi definite i fr 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>
51
Aplicatie: utiliznd funcii s se realizeze fereastra din figura 2.4.
Figura 2. 7 Definirea funciilor ntr-un fiier html
Coninutul fiierului html este urmtorul: <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 Coninutul 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 afieze un mesaj ntr-o alt caset a formularului (figura 3.8).
<html>
52
<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

53
Pentru o caset de tip checkbox starea acesteia se preia cu proprietate checked. Aplicaie: 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>
54
Figura 2.9. Utilizarea casetelor de tip checkbox
Utilizarea butoanelor de tip radio Dac butoanele de tip radio fac parte din acelai grup, atunci ele sunt gestionate ntr-un vector, astfel nct primul element este pe poziia zero. Proprietatea utilizat pentru a testa starea elementului (dac a fost selectat sau nu) este tot checked, asemntor 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 selecie
55
Propietatea utilizat pentru a testa dac un element dintr-o lista de selecie a fost selectat este selected. Valoarea ataat 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
Utiliznd propritile 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++)
56
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>
57
<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 interaciunea dintre utilizator i aplicaie. Programele convenionale opereaz ntr-o manier diferit, codul acestora fiind executat secvenial. Pentru a specifica instruciunile JavaScript care trebuie executate la apariia unui eveniment, limbajul HTML pune la dispoziie anumite atribute pentru diferite marcaje, atribute care au ca valori instruciuni JavaScript (de obicei apeluri de funcii). Cele mai multe evenimente sunt legate de aciuni 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 Abort Blur Handler de ev. OnAbort OnBlur are loc pentru oprirea incarcarii unei imagini pierderea focusului se aplic Image Window i elem. ale obiectului Form
58
Change Click DragDrop Error Focus KeyDown KeyPress KeyUp Load MouseDown MouseMove MouseOut MouseOver MouseUp Move Reset Resize Select Submit Unload
OnChange OnClick OnDragDrop OnError OnFocus OnKeyDown OnKeyPress OnKeyUp OnLoad OnMouseDown OnMouseMove OnMouseOut OnMouseOver OnMouseUp OnMove OnReset OnResize onSelect onSubmit onUnload
Window i elem. ale obiectului Form Document, Image, Link, TextArea apasarea sau Document, Image, Link, mentinerea apasata a TextArea unei taste eliberarea unei taste Document, Image, Link, TextArea incarcarea paginii in Document navigator apasarea butonului Document, Button, Link de mouse mutarea cursorului Nici unui obiect mutarea cursorului Area, Link de mouse in afara obiectului mutarea cursorului Link peste un link eliberarea butonului Document, Button, Link de mouse deplasarea ferestrei Window click pe butonul Form reset redimensionarea Window ferestrei selectarea unui Text, TextArea elem. al campului apasarea pe submit Form parasirea paginii Document
schimbarea valorii unui element utilizatorul face click plasarea unui obiect n fereastra browserului eroare la ncarcarea obiectului elementul capata focus apasarea unei taste
Text, TextArea, Select Button, Checkbox, Link, Radio, Submit, Reset Window Image, Window
Exemplu Script care afieaz 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 ndeprtarea 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()
59
{ document.bgColor="red" } function b() { document.bgColor="blue" } </script>
Figura 2.11. Evenimente legate de aciuni cu mouse-ul
window.status=text afieaz text n bara de stare, document.title=text afieaz text n bara de titlu. n afara evenimentelor generate de utilizator pot fi tratate i evenimente ce se produc automat. Apar evenimente ca: load ncrcarea paginii poate fi gestionat cu atributul onload unload nchiderea documentului - poate fi gestionat cu atributul onunload Ambele atribute aparin 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 neles ca o structur ce reunete mai multe funcii i variabile sub acelai nume. Funciile unui obiect reprezint metode iar variabilele obiectului sunt proprieti. 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 dispoziie 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, reprezenate de obiectele: window, navigator, screen, language. Din window deriveaz: frame, document, location, history, din document deriv image, form, .a.m.d.Pe
60
lng acestea, JS pune la dispoziie obiecte predefinite referitoare n general la tipuri de date: String, Math, Date. Obiectul String ncapsuleaz un ir de caractere. Este creat automat atunci cnd unei variabile i se asociaz o valoare de tip ir de caractere. Dintre metodele lui String ntlnim: Metoda anchor() big() blink() bold() charAt() charCodeAt() concat() fixed() fontcolor() fontsize() fromCharCode() indexOf() italics() lastIndexOf() link() match() Efect returneaza un sir ca i "anchor" returneaza un sir cu text mare returneaza un sir care clipeste returneaza un sir cu litere ingrosate returneaza un caracter de la pozitia care este specificata returneaza codul ascii al unui caracter de la o pozitie specificata returneaza doua siruri concatenate returneaza un sir cu caractere tip returneaza un sir cu o culoare specificata returneaza un sir cu litere de o anume marime returneaza valoare unicode a unui caracater returneaza pozitia primei aparitii a unui subsir in un sir, sau daca subsirul nu e gasit, valoarea returneaza un sir in italic (scris aplecat) returneaza pozitia primei aparitii a unui subsir in un sir, sau daca acesta nu e gasit, returneaza un sir ca hyperlink similar cu indexof i lastindexof, dar aceasta metod returneaza sirul specificat sir, sau "null", in locul unor valori numerice inlocuieste unele caractere specificate cu altele noi specificate. returneaza un numar intreg daca sirul contine caracterele specificate, altfel returneaza returneaza un sir incepand de la pozitia index specificata returneaza un sir cu caractere mai mici imparte un sir in mai multe siruri, in functie de caracterele specificate returneaza un sir taiat cu o linie la mijloc returneaza un sir ca indice returneaza un subsir specificat converteste un sir in litere mici converteste un sir in litere mari
replace() search() slice() small() split() strike() sub() substr() toLowerCase() toUpperCase()
61
Proprietatea acestui obiect string este length care returneaza numarul de caractere dintr-un sir.
Obiectul Date
Obiectul Date este folosit pentru a obine informaii 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 operaii cu date calendaristice sau momente ale zilei sau poate fi controlat modul n care este afiat pagina Web n funcie de informaiile furnizate de metodele acestui obiect. Pentru a crea un obiect care s conin data i ora curent secvena JavaScript corespunztoare este data=new Date(). Metodele obiectelor de tip sunt grupate n trei categorii: metode pentru preluare de informaii, metode pentru setarea anumitor caracteristici i metode pentru conversie. Principalele metode ale obiectului Date() sunt: Date() getDate() getDay() returneaza un obiect Date returneaza data (ziua) din luna (ntre 131) 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(funcie,timp) timp se exprim n ms
Exemple Script care s afieze Ai intrat pe pagina astzi: 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 afieaz un ceas n timp real n linia de stare: <script type=text/javascript> function timp() { ceas=new Date() ora=ceas.getHours()
62
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 printele 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 ncrcate documentele html. Folosind metodele open() i close() putem deschide ferestre, putem ncrca anumite documente n ferestrele respective i le putem stabili anumite proprieti. Deschiderea unei ferestre window.open (URL, nume,opiuni) - URL indic adresa documentului care va fi ncrcat n fereastra respectiv - nume poate fi folosit pentru a referi fereastra respectiv cu ajutorul atributului target - opiuni 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() stabilete titlul ferestrei f.document.bgColor() stabilete 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 legai de aspectul ferestrei deschise. Acetia se introduc separai prin virgul n cadrul seciunii opiuni din construcia metodei open: - width - limea n pixeli a suprafeei ferestrei - height - nlimea n pixeli a suprafeei ferestrei - toolbar = yes/no - afieaz sau nu bara de instrumente - menubar = yes/no - afieaz sau nu bara de meniuri - scrollbars = yes/no - afieaz sau nu bara de scroll - left = nr de pixeli fa de marginea din stnga 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
63
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 pna 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. Proprietile obiectului document seteaz n primul rnd proprietile i atributele html incluse n marcajul HEAD sau n marcajul BODY. Principalele proprieti sunt: document.title = text n bara de titlu document.bgColor = culoarea fundalului document.fgColor = culoarea textului document.alinkColor = culoarea legturilor active document.vlinkColor = culoarea legturilor vizitate document.linkColor = culoarea legturilor 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 cnd introducem cadre este creat automat un obiect parent, care include un ir de obiecte, fiecare nglobnd 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 cnd au fost introduse cadrele acestea au primit i un nume putem referi un cadru prin construcia: parent.numecadru De exemplu, parent.cadru.document.write() - scrie n cadrul cu numele cadru.
64
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, ncrcarea unei alte pagini web se poate face prin construcia: window.location.href = URL Exemplu de buton cu funcie de legtur: <input type=button value=Student onclick=window.location.href=http://www.microsoft.com> ncrcarea unui fiier ntr-un cadru se poate face prin parent.cadru.location.href=URL
Construirea unui banner

La ncrcarea 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 proprietile i metodele necesare pentru lucrul cu imagini. Se creeaz cu new Image() poza=new Image() Proprieti: poza.src=sursa imaginii; poza.width=limea imaginii n pixeli; poza.height=nlimea 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. Fiecrui obiect de tip imagine i se pot aplica toate proprietile imaginilor. Este identificat prin document.images[i], unde i este numrul de ordine al imaginii din cadrul documentului. Realizarea unui efect RollOver
Un efect RollOver nseamn schimbarea fiierului surs al imaginii de fiecare dat cnd se plaseaz mouse-ul deasupra imaginii. Se revine la imaginea iniial atunci cnd mouse-ul este scos de pe imagine. Dac imaginea la care v referii este prima din pagin va funciona exemplul <img src=x.gif onmouseover=document.images[0].src=y.gif
65
onmouseout=document.images[0].src=x.gif> Dac la introducerea imaginii acesta primete 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 afieaz 2 imagini mici. Cnd se plaseaz mouse-ul pe o imagine aceasta s apar cu chenar iar cnd 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: realizai 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++)
66
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>
67
Figura 2.12 Selectare elemte de tip data i afiarea acestora
Realizai pagina html care permite crearea unui tabel cu numrul 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>
68
Figura 2.13. Creare i personalizare tabel n modul programat
S se realizeze o pagin cu funcii 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();
69
//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
70
MODULUL III. CONSTRUIREA DOCUMENTELOR XML

3.1 Construirea documentelor XML i importana 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 prezenarea informaiilor. XML este format de fapt din dou metalimbaje, ambele descrise n acelai 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 definiii a tipului documentului XML, sau DTD (Document Type Definition), care permite ca structura documentului XML s se supun unor constrngeri i s fie validat fa de acele constrngeri. 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. Definiiile tipului documentului XML (DTD-urile) descriu instane ale limbajului XML, numite uneori vocabulare XML. Dcumentele XML sunt create utiliznd acele limbaje. XML este un limbaj cu etichete i atribute asemntor cu HTML, dar un HTML transformat att de mult, nct nu mai poate fi recunoscut. XML este mult mai structurat dect 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 cnd gsete o eroare fatal, care poate fi aproape orice tip de eroare. Dac n HTML avem un numr relativ mic de etichete, XML are un numr de etichete aproape infinit, structurate n aproape orice fel se dorete. Oricum, fundamentele au rmas aceleai, XML reprezentnd un pas evolutiv al HTML. Nu numai c un HTML bine fcut 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 aplicaie SGML, iar XML este o submulime a SGML, acest lucru este logic. Diferenele 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 aplicaia XML, atributele lor, valorile posibile i modul lor de imbricare. Urmrirea unui astfel de manual de codare nu este mai dificil dect reinerea 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 situaiilor, acest lucru este suficient. XML este capabil s ofere autorilor suficient ajutor n nvarea modului de utilizare a unei anumite aplicaii, deoarece acetia sunt ncurajai s dea etichetelor nume sugestive, care s fie uor de reinut. Cu toate c orice procesor XML poate spune despre o poriune de cod dac este sau nu construit corect, iar un manual poate ajuta la construirea unui document valid, DTD-ul permite verificarea fr ambiguiti a codului. Totui, n funcie de tipul de creare utilizat, acesta poate fi un pas diferit de procesul de editare. Codul ndeplinete acest ideal n funcie de utilizarea dat numelor etichetelor, totui ntre anumite limite: Numele de etichete care ncep cu irul xml, indiferent de tipul literelor, sunt rezervate; adic, indiferent de situaie, nu este permisa crearea lor;
71
Numele de etichete care conin caracterul dou puncte pot fi interpretate ca identificatori avnd asociat o zon de nume, deci utilizarea celor dou puncte n numele etichetelor este puternic combtut 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 operaie mpovrtoare. Unele limbi nici nu au tipuri de litere. De exemplu, n limba ebraic nu exist litere mici, iar limba arab nu face distincie ntre forma iniial, de mijloc i final a literelor. Pentru cei care prefer s scrie etichetele cu majuscule i atributele cu litere mici, pentru a le evidenia, aceasta este o tire teribil. Dar editoarele de cod moderne nu mai acord o importan aa de mare acestui lucru ca nainte. De exemplu, precizarea anumitor culori pentru a marca etichete este un lucru obinuit, deci utilizarea majusculelor este ntructva 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 dorete <bold><italics>, fraza evideniat 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 acelorai reguli pentru a nu strica documentele altora. XML nu este bine protejat mpotriva recursivitii Cu toate c este posibil stabilirea excluderilor explicite la un anumit nivel, la o structur complex a unui document este dificil meninerea acelor excluderi la un nivel redus, mai ales atunci cnd se utilizeaz etichete care pot fi aplicate la orice nivel. Deci, interdicia 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 fiecrei 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 plasnd un spaiu i un caracter slash la sfritul etichetei, astfel: <break /> XML necesit ncadrarea valorilor atributelor fie ntre apostrofuri, fie ntre ghilimele Acolo unde HTML este indulgent, mai ales n ceea ce privete numerele i aproape orice ir fr spaii n interior, XML trateaz totul ca ir de caractere i las aplicaia s i dea seama singur de toate acestea. XML recunoate 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 uor. n afar de diferenele menionate n
72
aceast list, XML este foarte asemntor cu HTML din punctul de vedere al marcrii etichetelor, al argumentrii atributelor i al trecerii coninutului ntre perechi de etichete. Limbajul XML a fost proiectat astfel nct s fie transparent la utilizare pentru a putea fi neles i utilizat cu uurin. Descrierile XML succinte sau complicate din majoritatea documentelor sunt greu de neles n efortul de a fi explicit ntr-un mod n care programatorii s l poat translata cu uurin n aplicaii care s funcioneze. Un document XML este o colecie de entiti care pot fi sau nu analizate. Datele care nu sunt nelese de un procesor XML, date binare sau date care au sens numai pentru alte aplicaii, reprezint date neanalizate. Datele nelese 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 conine mai multe instruciuni. Prima, declaraia XML, afirm c documentul urmtor este XML. Cea de a doua, declaraia tipului documentului (Document Type Declaration), este metod utilizata pentru a identifica definiia 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 declaraie a tipului documentului, deci este introdus chiar n instana documentului. Deoarece pot fi combinate mai multe DTD-uri pentru a forma un singur document, aceasta permite controlul ncrcrii DTD-urilor n fiecare document. Declaraia tipului documentului (DOCTYPE) are dou pri, ambele opionale. 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 pri deodat, fr cel de al doilea cuvnt cheie: <!DOCTYPE nume-document PUBLIC {catalog id}> <!DOCTYPE nume-document PUBLIC {catalog id} {uri}> <!DOCTYPE nume-document SYSTEM {uri}> Cea de a doua parte opional a declaraiei DOCTYPE permite introducerea submulimii interne a unui DTD direct n document. Exist restricii severe cu privire la genul de informaie care poate fi introdus n DTD-ul intern, dar oricum se pot face destul de multe. Submulimea intern a unui DTD este ncadrat ntre paranteze drepte, astfel: <!DOCTYPE nume-document [ {declaraiile DTD-ului intern} ]> De asemenea, cele dou pot fi combinate, permind adugarea anumitor tipuri de declaraii i entiti aproape n orice mod: <!DOCTYPE nume-document PUBLIC {catalog id} {uri} [ {declaraiile DTD-ului intern} ]> Pentru claritate, submulimea intern este evideniat ca mai jos: <!DOCTYPE nume-document PUBLIC {catalog id} {uri} [
73
{declaraiile DTD-ului intern} ]> Definirea corpului documentului Un document XML este alctuit din text, care de obicei este format din mai multe marcaje i date caracter. Prologul conine numai marcaje, dar nu aceasta este partea interesant, deoarece este nevoie de date care s nsoeasc marcajele care, altfel, nu ar fi dect nite cutii goale. Corpul documentului conine aproape tot ceea ce conteaz din perspectiva unei aplicaii mprtiate 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 obinuite de tip caracter. Foaia sau manualul de codare indic ce tip de dat poate fi introdus n fiecare atribut sau cmp cu coninut element. Presupunnd c tipul de date este CDATA, n cmp se poate pune aproape orice se dorete att timp ct nu conine un marcaj n afara unei secvene escape. Marcajul este format din ansamblu de date non-caracter dintr-un fiier XML. Diversele forme pe care le poate lua un marcaj sunt prezenate n tabelul urmtor: Tabel cu sintaxa marcajului XML Eticheta de pornire Eticheta de terminare Eticheta definire element vid Referina entitate Referina caracter comentariu Delimitatoare sectiune CDATA Declaratiile tipului documentului Instructiuni de prelucrare Declaratia XML <numeElement [atribute]>.... ...</numeElement> <numeElement [atribute]/> &numeEntitate; sau%parametru_nume_entitate &#numarzecimal; <!comentariu - -> <![CDATA[ informatii cdata]]> <!DICTYPE nume idextermen? [informatii DTP]> <?Idprocesor date?> <?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 arta structura logic dintrun document XML. Etichetele de pornire i ncheiere din fluxul de text spun procesorului XML c a fost ntlnit un nod. Dac procesorul XML ntlnete o alt etichet de pornire nainte de eticheta de ncheiere corespunztoare, atunci procesorul tie c acesta este fie un nod nou n arbore, fie o frunz. Dac nu gsete o nou etichet de pornire i ntlnete o etichet de ncheiere, atunci procesorul tie c aceasta este o frunz i c poate aciona iterativ la acel nivel al arborelui pn cnd ntlnete o alt etichet de pornire sau de ncheiere. Prelucrarea acioneaz treptat, bazndu-se pe aceast regul simpl. Dac procesorul valideaz documentul, atunci fiecrui nod i se poate asocia o regul care s determine ce tip de coninut poate aprea n el. O etichet vid este, prin definiie, o frunz, deoarece nu poate avea nici un coninut. n XML sunt utilizate dou tipuri de etichete, etichete cu coninut i etichete vide. Etichetele cu coninut trebuie s aib o etichet de pornire i o etichet de ncheiere. Eticheta de pornire conine numele elementului ncadrat ntre paranteze unghiulare, avnd opional
74
atribute ca argumente. Eticheta de ncheiere conine numele elementului precedat de caracterul slash, totul fiind ncadrat ntre paranteze unghiulare. n eticheta de ncheiere nu putei trece atribute. Codul urmtor reprezint o etichet cu coninut: <titlu subtitlu=o excursie >dus-ntors</titlu> Seamn 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-adevr una n cealalt. Nu pot exista etichete care s alterneze ntre ele ca n acest exemplu greit construit: <bold><italic>text ingrosat i inclinat</bold></italic> Cu toate c este o eroare obinuit n HTML, XML este cu mult mai pretenios i nu va permite aceast construcie. Etichetele trebuie imbricate corect, dup cum se vede n exemplul urmtor: <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 aceeai schem, etichet de pornire/ etichet de ncheiere, poate fi utilizat atta timp ct se ine cont de faptul c nu trebuie pus nici un fel de coninut 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 obinuit, deoarece etichetele de ncheiere pentru elementele care arat ca etichete HTML vide pot duce la blocarea browserului sau la un comportament ciudat al acestuia. Totui, 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 aceleiai perechi de paranteze unghiulare, plasnd dup numele elementului i toate atributele sale posibile un spaiu, 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 declaraia DOCTYPE. DTD-ul declar urmtoarele: 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, entitile neanalizate utilizate n document i modul n care sunt referite prin nume, codificrile de limb utilizate n document, alte informaii importante pentru prelucrarea i redarea documentului. Entiti neanalizate O entitate neanalizat este orice lucru care nu poate fi recunoscut de un procesor XML, fie date binare, cum ar fi un fiier imagine sau audio, fie text care trebuie s fie transferat unei aplicaii fr a fi prelucrat n vreun fel. HTML utilizeaz comentarii pentru a ascunde un astfel de text de browserul HTML, dar XML are cteva mecanisme care funcioneaz mult mai sigur. O entitate neanalizat trebuie mai nti s fie declarat ca NOTATION, o declaraie special care numete o aplicaie de asisten care tie cum s lucreze cu entiti de un
75
anumit tip. Notaiei i este dat un nume, un identificator public opional i apoi numele mai puin opional al aplicaiei de asisten, ca n una din variantele urmtoare:
<! NOTATION nume-mnemonic PUBLIC identificator-public> <! NOTATION nume-mnemonic PUBLIC identificator-public nume-aplicaie.exe> <! NOTATION nume-mnemonic SYSTEM nume-aplicaie.exe>
Prima opiune funcioneaz numai dac exist un catalog. Nu se poate pune baza pe un catalog deoarece acesta funcioneaz 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 motenit 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 informaiilor despre locaia i identitatea aplicaiei 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 cuvntului i anume este o colecie de date. Se poate considera c aceste documente nu sunt diferite de orice alt tip de fiiere n fond, toate fiierele conin anumite tipuri de date. Avnd 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 analizrii i conversiei textului. Putem considera i c XML i tehnologiile asociate constituie o baz de date n sensul mai larg al cuvntului 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.), interfee de programare (SAX, DOM, JDOM). Totui multe componente ale bazelor de date convenionale: stocare eficient, indeci, securitate, tranzacii i integritatea datelor, accesul multi-user, triggere, interogri fcute pe mai multe documente .a. Astfel, se pot folosi documente XML ca o baz de date ntr-un mediu cu cerine modeste i date puine, dar aceast soluie nu este viabil ntr-un mediu pentru producie n mas, unde exist muli utilizatori, cerine 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 aplicaie sau poate fi folosit integral ca n cazul documentelor XHTML i DocBook. Scopul utilizrii XML este important deoarece toate documentele centrate pe date au anumite caracteristici comune, la fel se ntmpla i n cazul informaiilor centrate pe documente, i aceste caracteristici influeneaz 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 ctre aplicaii i nu are nici o importan faptul c informaiile folosite au fost reinute pentru o perioad de timp n documente XML. Exemple de documente centrate pe date sunt ordine de plat, programarea zborurilor, date tiinifice. 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, dect n momentul validrii documentului. Informaiile care exist n documentele centrate pe date pot proveni din baza de date (caz n care se dorete extragerea lor n fiiere XML), dar i din afara bazei de date (caz n care se
76
dorete stocarea acestora n baza de date). Un exemplu de informaii care provin dintr-o baz de date sunt cantitile de date stocare n bazele de date relaionale, iar un exemplu de informaii care se doresc a fi introduse ntr-o baz de date pot fi considerate datele tiinifice obinute de un sistem de msurtori i convertite n XML. Urmtorul 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 lng documentele centrate pe date, cu structura asemntoare cu documentul din exemplul anterior, multe documente care conin i text adiional sunt centrate pe date. Spre exemplu, s considerm o pagin web care conine informaii despre o carte. Dei pagina conine n mare parte text, structura acelui text este regulat, i o parte din acel text este comun tuturor paginilor care descriu cri, fiecare poriune de text specific avnd dimensiuni limitate. Astfel pagina ar putea fi construit dintr-un document XML simplu, centrat pe date care conine informaii despre o singur carte i este obinut dintr-o baz de date i un stylesheet XSL care adaug textul care leag informaiile din XML. n general orice site web care construiete documente HTML dinamic prin completarea unui template cu informaii 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 tradiional cum sunt cele relaionale sau orientate-obiect. Documentele sunt stocate ntr-o baz de date nativ XML (o
77
baz de date destinat stocrii XML) sau un sistem de gestionare a coninuturilor (content management system) o aplicaie destinat administrrii documentelor i construit peste o baz de date nativ XML. Totui, 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 tradiionale, atunci cnd nu sunt necesare foarte multe caracteristici specifice XML. n plus, graniele dintre bazele de date tradiionale i cele native XML devin din ce n ce mai neclare, deoarece la bazele de date tradiionale se adaug facilitai native XML i bazele de date native XML suport stocarea fragmentelor de documente n baze de date, de obicei relaionale, 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 interogrii SELECT * FROM Tabel). n al doilea caz, structura documentului i structura necesar pentru mapare trebuie s fie identice. Deoarece acest lucru se ntmpl 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 nti adus la structura necesar maprii i apoi datele sunt transferate. Similar, dup transferarea datelor din baza de date, documentul obinut este adus la structura folosit de ctre aplicaie. Maprile 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 entitile i informaia codificat) i unele structuri logice (cum ar fi instruciunile de procesare, comentariile). Aceste omiteri nu au o influen prea mare, deoarece baza de date i aplicaia 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 relaional. Aceasta modeleaz un document XML ca o singur tabel sau ca un set de tabele. Structura documentului XML este artat n exemplul urmtor. <bazadedate>
<tabela> <linie> <coloana1>...</coloana1> <coloana2>...</coloana2> ... </linie> <linie> ... </linie> ... </tabela> <tabela> ... </tabela> ... </bazadedate>
n funcie de software datele din coloane pot fi stocate ca elemente descendente sau ca
78
atribute. n plus, produsele care folosesc mapri bazate pe tabele de multe ori includ metadate fie la nceputul documentului fie ca atribute asociate fiecrui element din tabel sau coloan. Maparea, bazat pe tabele, este utilizat pentru serializarea datelor relaionale, ca n cazul transferrii datelor ntre dou baze de date relaionale. Dezavantajul acestei mapri este c nu poate fi folosit pentru un document XML care nu respect formatul din exemplu. Instanierea obiectelor din model depinde de produsul folosit. Unele produse dau posibilitatea generrii claselor n model i apoi, folosirea obiectelor din aceste clase n aplicaii. 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-relaional 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 proprieti. toate produsele dau posibilitatea desemnrii unui element rdcin care nu este mapat pe modelul obiect sau pe baza de date. Acest element este folositor atunci cnd se dorete stocarea obiectelor cu mai multe nivele n acelai document XML. majoritatea produselor ofer posibilitatea specificrii dac proprietile 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 acelorai nume att n documentul XML ct i n baza de date. majoritatea produselor permit specificarea ordinii n care elementele descendente apar n printele lor, dar care face imposibil construirea mai multor modele pentru coninut. Din fericire, modelele pentru coninut 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 relaional 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 conine 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 strina, se adaug un element descendent la model i se proceseaz tabela cu cheie strin recursiv. Exist cteva dezavantaje la aceste procedee. Multe dintre acestea se pot corecta uor de ctre programator, cum ar fi coliziuni de nume i specificarea lungimilor i tipurilor de date ale coloanelor. DTD-urile nu conin informaii despre tipurile de date, deci nu este posibil cunoaterea tipurilor de date care ar trebui folosite n baza de date. Tipurile de date i lungimile pot fi prevzute 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 dect cel mai eficient model pentru stocarea datelor n baza de date. De exemplu, se consider urmtorul fragment XML:
79
<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 relaionale dintr-o schem XML ar crea dou tabele: una pentru clieni i una pentru adrese. Totui, n majoritatea cazurilor, ar fi mai bine s se rein adresa n tabela de clieni, 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 rnd, ele ofer structuri adiionale ceea ce face documentul mai uor de neles. n al doilea rnd, 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 cnd sunt mapate la baza de date dac acestea se gsesc sub forma extra-structurilor. Din aceast cauz, ele ar trebui eliminate din schema XML naintea generrii schemei relaionale. Din moment ce este puin probabil c modificarea schemei XML ar trebui s fie permanent, acest lucru duce la o neconcordan ntre documentul existent i documentele presupuse de ctre 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 transferrii 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 relaionale i invers, n special n sisteme mari. Pentru stocarea documentelor XML exist dou strategii de baz: stocarea lor n sistemul de fiiere sau ca un BLOB ntr-o baz de date relaional i acceptarea funcionalitilor 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 documentaie, cea mai uoara cale de stocare este n sistemul de fiiere. Se pot folosi instrumente cum ar fi grep pentru interogarea lor, i sed pentru modificarea lor. Cutrile complete de text n documentele XML sunt inexacte, pentru c ele nu pot distinge marcajul de text i nu pot nelege folosirea entitilor. Totui, ntr-un sistem mic, aceste inexactiti ar putea fi acceptabile. Dac se dorete un simplu control al tranzaciilor, documentele pot fi ntreinute cu o versiune de control a sistemului cum ar fi CVS sau RCS.
3.6 Stocarea documentelor n BLOB-uri

O opiune puin mai sofisticat este stocarea documentelor ca BLOB-uri ntr-o baz de date relaional. Aceast modalitate ofer un numr de avantaje a bazelor de date: controlul tranzaciilor, securitate, acces multiuser. n plus, multe baze de date au instrumente pentru cutri de text i pot face cutri complete de text, cutri aproximative, cutri sinonime i cutri fuzzy. Unele dintre aceste instrumente sunt construite pentru a recunoate XML, ceea ce va elimina problemele care apar la cutrile documentelor XML ca simplu text.
80
Atunci cnd se stocheaz documente XML ca BLOB-uri, se pot implementa uor indexri 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 conine o cheie primar i o coloan BLOB n care este reinut documentul. Tabela index conine o coloan n care se gsete valoarea ce va fi indexat i o cheie strin care duce la cheia primar a tabelei document. Atunci cnd documentul este stocat n baza de date, el este cutat pentru toate instanele elementului sau atributului care este indexat. Fiecare instana este stocat n tabela index, mpreuna cu cheia primara a documentului. Coloana de valori este apoi indexat, i permite unei aplicaii s efectueze o cutare rapid a unei anumite valori a unui element sau atribut i s recupereze documentul corespunztor. De exemplu, se consider un set de documente cu urmtorul DTD i se dorete 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 urmtoarele tabele: Autori Brosuri ---------------------- --------Autor VARCHAR(50) BrosurID INTEGER BrosuraID INTEGER Brosura LONGVARCHAR Cnd se insereaz o brour n baza de date, aplicaia insereaz broura n tabela Brouri, apoi caut elementele <Autor>, reinnd valorile acestora i ID-ul brourii din tabela Autori. Aplicaia poate recupera brourile n funcie de autor cu o simpl fraza SELECT. De exemplu, pentru a recupera toate brourile scrise de autorul Chen, aplicaia execut urmtoarea 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 relaional cu ODBC, OLE DB, sau JDBC i sunt modelate folosind maparea bazat pe tabele sau maparea relaional-obiectual. Daca aceste date sunt live, adic dac actualizrile 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 coninuturilor Sistemele de management ale coninuturilor 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 cutare; editoare XML/SGML; motoare de publicare pe hrtie, CD sau pe Web; separarea coninuturilor i a stilurilor;
81
extinderea n scripturi i programare; integrarea datelor din baza de date. Termenul de sistem de management al coninuturilor, spre deosebire de sistem de management al documentelor, reflect faptul c asemenea sisteme permit, n general, mprirea documentelor n fragmente cu coninut discret, cum ar fi exemple, proceduri, capitole, dar i metadate cum ar fi numele autorilor, datele reviziilor, i numerele documentelor, dect s opereze cu fiecare document ca un ntreg. Nu numai c, astfel se simplific coordonarea lucrului mai multor scriitori la acelai 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 coninut sau poriuni de coninut (articole, mesaje, tiri, anunuri, etc) ntr-un format standard, care poate fi preluat de aplicaii specializate (gen browsere, editoare de tiri, roboi de cutare, etc) i afiate apoi destinatarului. Dect s verificm n fiecare or ce a mai aprut nou pe paginile preferate, folosii o aplicaie care va afia noutile direct cnd apar. Un fiier RSS este scris n metalimbajul de marcare XML (eXtensible Markup Language), extensia fiierului este .rss sau .xml (dar poate fi i .html sau .php, dar atunci nu este nestandard) iar tipul MIME al fiierului trebuie s fie application/rss+xml. Pentru a introduce un fiier RSS n paginile unui site trebuie specificat n partea de HEAD a documentului web urmtoarea linie <link rel="alternate" type="application/rss+xml" title="RSS" unde pentru href trebuie specificat calea ctre fiierul RSS. Astfel spunem browserului sau aplicaiei (client) de unde s citesc informaiile.Se poate face referire la un feed RSS i printr-un link direct (de obicei se folosete 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 gsesc itemuri (obiecte). Orice fiier RSS trebuie s conin cel puin un item. Item-urile sunt n general paginile web care dorim s le dm ctre ali vizitatori. De exemplu, dorii s informm cititorii de apariia unui nou articol pe site. Informaia despre acea pagin va forma un item. Pentru a introduce un item n fiierul RSS va trebui s completm elementele: Titlul- Descrierea- LinkTitlul. Fiierele 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 fiierului i la fel ca itemurile, canalele utilizeaz titlul, descrierea i linkul pentru a descrie coninutul. De asemenea trebuie s indicai ce tip de document este, introducnd pentru aceasta tagurile pentru document de tip XML i RSS. Sfritul fiierului va arta ca n exemplul urmtor:
<?xml version="1.0"?> <rss version="2.0"> <channel>
82
<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>
83
Modulul IV. PHP i MySQL

PHP este un acronim care provine din "Hypertext Preprocessor" i este un limbaj de scripting, realizat i distribuit n sistem Open Source, special realizat pentru a dezvolta aplicaii web, prin integrarea codului PHP n documente HTML. Sintaxa sa provine din C, Java i Perl i este uor de nvat. 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.) ct i acces la sisteme hipermedia. De asemenea, PHP suport ncrcarea fiierelor de pe calculatorul client, operaie 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 aplicaie este disponibil, gratuit, pe Internet, pentru medii Unix ct i pentru medii Windows, integrndu-se n severul Apache. Istoria PHP-ului ncepe la sfritul anului 1994, cnd Rasmus Lerdorf dezvolt prima versiune, ca proiect personal. PHP-ul este fcut public n anul 1995 sub denumirea de Personal Home Page Tools, fiind considerat un analizor simplist ce puteau fi incluse n cadrul documentelor HTML, permind contorizarea accesului la paginile. Analizorul a fost rescris la mijlocul aceluiai an i denumit apoi PHP/FI 2.0, unde FI era o alta aplicaie scris de Rasmus Lenford. Ultetrior a fost adugat 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 aplicaie 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 fcut public versiunea PHP 4.0, utiliznd 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 accesrii 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 fiierelor HTML, limbaj asemntor cu Perl sau C. Marea calitate i cel mai mare avantaj al limbajului PHP este posibilitatea de conexiune cu un numr 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, utiliznd protocoale precum IMAP, SNMP, NNTP, POP3 i HTTP. Paginile HTML sunt de tip static, adic informaiile prezentate n aceste pagini sunt identice pentru toi 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, aflai n locuri diferite, acceseaz acelai site de joburi n acelai timpasrefel nct unul dorete afiarea joburilor din domeniul economic, iar al doilea dorete afiarea joburilor din domeniul securitii i sntii n munc, atunci serverul web va afia pentru fiecare vizitator al site-ului pagina corespunztoare cerinelor specificate. Acest lucru este posibil datorit tehnologiilor de tip client-server. Acest tip de tehnologii presupun stocarea datelor pe un server web i apoi afiarea acestora la cererea fiecrui vizitator, n forma dorit de acesta.
84
Un server web reprezint un calculator conectat permanent la Internet, care trimite ctre client (care este un calculator pe care ruleaz un browser) pagini n format HTML. La un server se pot conecta simultan mai muli clieni, care pot avea acces la aceleai informaii. Diferena este esenial comparativ cu paginile simple HTML, care sunt afiate n browserul vizitatorului aa cum au fost construite. Web-ul este dinamic, iar programele care fac posibil acest lucru sunt numite scripturi CGI sau scripturi server-side, ntruct 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. Diferena dntreun limbaj de scripting pe partea de client (ex. JavaScript) i unul server-side este esenial doarece JavaScript ruleaz n browserul clientului, pe cnd un script serverside ruleaz pe server, avnd acces la unele informaii stocate pe server la care un script client-side nu are acces. Un exemplu sugestiv este un contor de pagina web. De cte 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 conine i interogarea unei baze de date au loc urmtoarele etape: introducerea adresei n bara de adrese a browserului; serverul web primete cererea i determin execuia 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 afieaz informaiile utilizatorului. n practic pentru a crea aplicaii 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 descrca gratuit din Internet de la adresele: serverul web Apache ( http://www.apache.org/ ) avnd variante Apache pentru Linux ct 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, uor de nvat (sintaxa asemntoare cu C), ofer foarte multe funcii, 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 . Combinaia PHP i MySQL este folosit preponderent. Dac se lucreaz local, atunci vizualizarea (testarea aplicaiilor php) se realizeaza in cadrul unui browser, cu condiia ca, n bara de adrese, s se editeze http://localhost/eventual numele folderului ce contine sursele php (vezi figura 4.1 i 4.2).
85
Figura 4.1 Fereastra localhost
Figura4.2 Fereastra browserului pentru rularea scripturilor
86
VARIABILE GLOBALE sunt sunt disponibile n orice zona a codului surs. Exemple:
$GLOBALS $_SERVER $_GET i $_POST $_COOKIE $_FILES $_ENV $_REQUEST $_SESSION cuprinde referine spre orice variabil global care este accesibil scriptului PHP curent; conine o serie de variabile ale cror valori sunt setate de server-ul web. (majoritatea depind de mediul de execuie al script-ului curent); 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. conine valorile variabilelor care cuprind informaii referitoare la cookie-urile pstrate pe calculatorul utilizatorului ce acceseaz pagina web. conine variabile primite de script prin intermediul ncrcrilor de fiiere prin metoda post. conine variabile disponibile prin intermediul mediului n care este executat. variabile disponibile prin intermediul oricrui tip de mecanism cu ajutorul cruia utilizatorul poate introduce date. 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 funcia define(). diferena important ntre constante i variabile este faptul c o constant nu are n faa denumirii semnul $.
<?php define(DISCIPLINA,PHP-MySQL); define(SPECIALIZARE,informatica); echo Specializarea .SPECIALIZARE. studiaza disciplina .DISCIPLINA; ?>
Constante predefinite limbajul PHP conine un numr mare de constante predefinite pentru fiecare script care ruleaz.
__LINE__ __FILE__ __FUNCION__ __CLASS__ __METHOD__ conine numrul curent al liniei din fiier calea i numele fiierului curent returneaz numele funciei care a fost declarat returneaz numele clasei care a fost declarat returneaz numele metodei care a fost declarat;
Crearea scripturilor PHP

87
Pentru crearea scripturilor PHP este necesar un editor de texte obinuit, dei exist i editoare specializate. Totui, dac folosii un instrument diferit de Notepad, trebuie s luai msuri pentru a salva scriptul dumneavoastr sub form de document text, n caz contrar, fiierul script conine informaii de formatare care vor deruta serverul PHP. Numele fiierului trebuie s fie alctuit numai din caractere minuscule, cifre i liniue. Utilizarea spaiilor i a altor caractere este interzis. Extensia numelui fiierelor trebuie s fie *.php. Fiecare script PHP include dou linii, care indic serverului c textul cuprins ntre acestea este format din instruciuni PHP.
<?php // continutul scriptului ?> sau, echivalent: <? // continutul scriptului ?>
Scripturile PHP execut urmtoarele de operaii elementare: preluarea datelor de la utilizator, prelucrarea acestor date, obinerea accesului la datele stocate pe server, prelucrarea datelor stocate pe server i afiarea datelor. Scripturile PHP sunt formate din instruciuni iar cea mai simpl instruciune PHP este cea de afiare a unui text n browser.
echo Informaii afiate 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 // (cnd comentariul este scris pe o singur linie) sau /* coninutul comentariului */ (atunci cnd 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 ntlnite n PHP sunt: Alternative o IF o Else o Elseif o Switch Repetitive o While o For o Do while
88
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; } } ?>
Instruciunea continue este utilizat ntr-o bucl iar execuia iteraiei curente este ntrerup i se trece la execuia iteraiei urmtoare. Instruciunea continue accept un argument numeric opional care va indic cte 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";
89
} ?>
Instruciunea foreach versiunea PHP4 (nu i PHP3) dispune de comanda foreach, ca Perl sau alte limbaje. Instruciunea ofer un mod simplu de a parcurge un tablou. Exist dou sintaxe posibile: foreach( array_expresion as $value) { list de instruciuni } foreach( array_expresion as $key => $value) { list de instruciuni } Prima form trece n revist tabloul array_expression. La fiecare iteraie, valoarea elementului curent este atribuit lui $value i pointerul intern al tabloului este incrementat cu un element (astfel, la urmtoarea iteraie avei acces la urmtorul element). A doua form face acelai lucru, dar indicele elementului curent va fi atribuit variabilei $key la fiecare iteraie. Cnd foreach ncepe s fie executat, pointerul intern al fiierului este automat repoziionat pe primul element al tabloului. Acest lucru nseamn c nu vei avea nevoie s facei 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"; } ?>
90
Folosirea PHP-ului cu formulare HTML

Caracterizarea formularelor HTML Permit introducerea datelor de ctre vizitatorul paginii web. Crearea se face ncepnd cu matematicachea de etichete <form></form>. Atributele lui <form> sunt: action i method. Action precizeaz ce se va ntmpla cu datele introduse n formular. n general i se asociaz adresa unui script aflat pe server (n cazul nostru numele fiierului 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 cantiti restrnse de date prin adugarea lor la URL POST permite trimiterea cantitilor mari de date iar acestea sunt expediate separat. O regul empiric privind alegerea ntre GET i POST ar fi urmtoare: muli programatori utilizeaz GET pentru formularele care execut o cutare sau interogare i POST pentru formularele care actualizeaz o baz de date sau un fiier. 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 parial, care specific o locaie relativ la locaia paginii curente. Exemplu: <FORM method=POST action=test1.php> Pricipalele controale care pot fi incluse n formular (vezi capitolul de HTML) ct i principalele evenimente ataate 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 fiier (file). List evenimente: onclick ondblclick onmousedown onmouseup onmouseover
91
onmousemove onmouseout onkeypress onkeydown onkeyup
Prin intermediul formularului se trimite la server un fiier astfel: <input type=file accept=tip_mime name=nume value=text> unde: accept este un atribut care specific tipul fiierului, name este numele casetei, value se folosete pentru un nume prestabilit de fiier, MIME (Multipurpose Internet Mail Extensions). n eticheta form trebuie adugat i atributul enctype=multipart/form-data . n general prelucrarea datelor transmise la server se face ntr-un fiier distinct dect cel care conine formularul, caz n care action=nume_fiier.php. Verificari i exemple nainte de a prelucra date este indicat s: - se testeaz dac au fost trimise datele pentru fiecare cmp (funcia isset), - se verific dac acel cmp conine valoare nenula (funcia empty), - dac prelucrarea datelor se face n acelai fiier cu formularul, se va introduce i o linie de iniializare a variabilelor echivalente cmpurilor din formular. O variabil se preia dintr-un formular prin una din modalitile : 1. $_POST[nume_variabil] sau cu $_GET[nume_variabil] (n funcie 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 fiierul test.html i transmiterea acestora fiierului test.php.
<form action="test.php" method="POST"> Introduceti numele : <input type="text" name="name"><br> <input type="submit" value="Trimite"> </form>
Fiierul test.php arat

<?php echo "Bun venit ".$_POST["name"]." !!"; ?>
92
Exemplu pentru preluare date din fiierul test1.html i transmiterea acestora fiierului 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>
Fiierul 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>"; ?>
<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>

<?php echo "Ati selectat culoarea :".$_POST["color"]." !!!"; ?>
<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">
93
</form>

<?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 aplicaie care opereaz cu liste de selecie din care preiau date cu metoda POST i sunt transmise fiierului exemplu.php. Fiierul *.HTML conine:
<html> <head> <title></title> </head> <body> <form name="f" action="exemplu.php" method="post"> <SELECT name="s" size="3"> <option value="Carti">Carti</option> <option value="Caiete">Caiete</option> <option value="Rechizite">Rechizite</option> <br> <input type="submit" value="trimite"> <input type="reset" value="reset"> </form> </body> </html>
Fiierul exemplu.php conine:

<?php $a=$_POST["s"]; if ($a) echo $a; else echo "nu ai bifat nimic" ?>
Aplicaie care preia numele i parola ultilizatorului, le compar iar dac nu sunt corecte reafieaz formularul (vezi figura 4.3).
94
Figura 4.3 Fereastra browserului pentru testare user i parola
Fiierul 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>
Fiierul 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 reafirii formularului. ?>
Aplicaie care prin intermediul butoanelor radio modific culoarea de fundal a paginii ca n figura 4.4.
95
Figura 4.4 Fereastra browserului cu butoane radio
Fiierul 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> Fiierul 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>" ?>
96
Funcii n PHP
Definirea unei funcii se realizeaz function nume_funcie(param1, param2,,paramN){ instruciuni; } Apelarea unei funcii se realizeaz: $var_returnat=nume_funcie(param1,param2,..,paramN); O funcie poate fi definit oriunde n cadrul script-ului, iar n interiorul unei funcii poate s apar orice secven valid de cod (poate cuprinde definirea altor funcii, clase etc.). Pentru ca funcia s returneze un rezultat se folosete construcia return urmat de un parametru ce reprezint valoarea funciei. n momentul ntlnirii acestei construcii execuia funciei se ncheie. Rezultatul obinut dup apelarea unei funcii poate fi de orice tip de dat. Funciile pot returna vectori i obiecte. Funcii de afiare Print(ir) Print_r($variabil) afieaz informaii despre o variabil, ntr-un format uor de neles. nl2br(ir) insereaz rnduri noi (HTML) acolo unde a fost folosit caracterul special \n. var_dump(variabil) afieaz informaii despre o variabil Funcii pentru iruri str_repeat($ir, $n) repet irul $ir de un numr de n ori. strrchr($ir, $caracter) returneaz parte a unui $ir, ncepnd cu ultima apariie a caracterului $caracter n irul $ir. trim($ir) elimin spaiile din stnga 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 reunete ntr-un ir number_format($numr) afieaz valoarea numeric folosind separatorul de mii. strpos($sir_princip,$sir_cutat) - returneaz poziia n care se regsete irul cutat n irul principal. substr($ir,$start,$end) extrage parte dintr-un ir ncepnd din poziia $start i pn n poziia $end. int strlen(string str) returneaz lungimea unui ir de caractere; string strstr(sirul de baza, sirul cautat) returneaz subirul din irul de baz care ncepe cu irul cutat (exemplu: $email = 'abc@utm.com'; $domain = strstr($email, '@'); print $domain; // tipareste @utm.com.). string strtolower( string str) convertete un ir la litere mici. string strtoupper(string str) convertete un ir la litere mari. string ucwords(string str) convertete un ir astfel ncat va avea fiecare iniiala a fiecarui cuvant scris cu majuscul. Restul literelor rmn neschimbate. string ucfirst(string str) convertete un ir astfel nct va fi scris cu iniiala majuscula. Restul literelor ramn neschimbate.
97
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() - funcie care elimina spatiile goale de al inceputul i sfarsitul unui sir de caractere specificat ca parametru (asemanator funcie standard n C); Exemplu de script care utilizeaz funciile 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 funcii PHP au argumente opionale, care pot fi specificate sau omise, n conformitate cu inteniile programatorului. Cnd se produce o eroare n timpul execuiei unei funcii, PHP genereaz mesaje de eroare. Uneori, asemenea mesaje de eroare sunt nedorite. n acest caz, puteti suprima generarea mesajelor de eroare prin prefixarea numelui funcie invocate cu ajutorul caracterului @. De exemplu, pentru a suprima mesajele de eroare care pot aparea n timpul execuiei funcie f( ), invocati aceasta funcie dupa cum urmeaz: Y = @f(x); Funcii utilizator Pentru a defini o funcie rebuie s se respecte suntaxa: function nume_funcie(list argumente)
98
{ // corpul funcie; } Cuvntul cheie function, numele funcie i lista cu argumente formeaz antetul funcie. Termenul de corp al funcie se refer la instruciunile incluse ntre acoladele care urmeaz dupa antetul funcie. Instruciunile din corpul funcie sunt executate atunci cnd funcia este apelat. Exemplu de funcie care returneaz aria unui dreptunghi. function calculeaz_arie($lungime,$latime) { return $lungime, * $latime; } Corpul funcie este alcatuit dintr-o singura instructiune; cu toate acestea, corpul unei funcii poate conine un numar arbitrar de instruciuni. Dac dorii ca o funcie s returneze o valoare, trebuie s determinai funcia s execute o instruciune return care furnizeaz valoarea respectiv. Instruciunea return determin orpirea executarii funcie. Dac se creaz o funcie care nu are nici o instructiune return, atunci funcia va returna valoarea speciala NULL. O funcie definita de utilizator poate fi apelat n acelasi mod ca o funcie incorporata. Funcii pentru lucru cu fiiere
funcie basename chgrp chown copy rol primete ca parametru un ir reprezentnd un nume de cale i returneaz numele fiierului din calea respectiv schimb grupul fiierului filename n group i nu este diponibil pe Windows schimb proprietarul fiierului filename cu user group i nu este diponibil pe Windows funcia copie un fiier surs ntr-un fiier destinaie. Returneaz TRUE dac copierea s-a realizat cu succes i FALSE n caz contrar. funcia returneaz numele directorului din calea path. nchide fiierul referit prin fp. ntoarce TRUE n caz de succes i FALSE n caz contrar. Variabila fp trebuie s indice un fiier valid, adic un fiier deschis cu fopen() sau fsockopen(). Returneaz TRUE dac pointerul de fiier este poziionat pe EOF sau n caz de eroare, altfel returneaz FALSE. sintax string basename( string path) int chgrp( string filename, mixed group) int chown( string filename, mixed user) int copy( string source, string dest) string dirname( string path) int fclose( int fp)
dirname fclose
feof
ffush
foreaz scrierea tuturor bufferelor de ieire

99
int feof( int fp) Variabila fp trebuie s indice un fiier valid, adic un fiier deschis cu fopen(), popen() sau fsockopen(). int fflush( int fp)
n fiierul indicat de fp. Returneaz TRUE n caz de succes i FALSE n caz contrar. Variabila fp trebuie s indice un fiier valid, adic un fiier deschis cu fopen() sau fsockopen(). fgetc returneaz un caracter citit din fiierul fp. Returneaz FALSE n cazul n care caracterul citit este EOF. returneaz un ir de maxim length-1 octei citii din fiierul indicat de fp. Citirea se ncheie cnd au fost citii length-1 octei, cnd se citete new line (este inclus n valoarea returnat) sau EOF. Dac apare o eroare la citire returneaz FALSE. ntoarce TRUE dac fiierul specificat prin filename exist i FALSE n caz contrar. ntoarce dimensiunea fiierului specificat prin filename dac acesta exist i FALSE n caz de eroare. funcia deschide un fiier sau un URL. n cazul deschiderii unui URL se stabilete o conexiune ctre serverul Web specificat. n cazul unui fiier obinuit acesta este cutat n sistemul propriu de fiiere i deschis. funcia scrie irul string n fiierul fp n ntregime (dac argumentul length lipsete) sau numai length octei din acesta. fputs() este un alias pentru fwrite() i este identic cu aceasta. funcia citete cel mult length octei din fiierul binar fp. Citirea se ncheie cnd s-au citit length octei sau EOF. funcia scrie coninutul argumentului string n fiierul indicat de fp. Dac argumentul length este precizat scrierea se oprete dup length octei sau dac irul string s-a terminat. ntoarce TRUE dac filename exist i este un fiier obinuit. ntoarce TRUE dac filename exist i poate fi scris. string fgetc( int fp)
fgets
string fgets( int fp, int length)
file_exists filesize
int file_exists( string filename) int filesize( string filename) int fopen( string filename, string mode [, int use_include_path]) int fputs( int fp, string str [, int length])
fopen
fputs
fread
string fread( int fp, int length) int fwrite( int fp, string string [, int length])
fwrite
is_file is_writeable
boolean is_file( string filename) boolean is_writeable ( string filename)
100
pclose readfile
rmdir unlink
nchide fiierul indicat de fp. Variabila fp trebuie s indice un fiier valid care a fost deschis cu popen() . citete coninutul fiierului filename i l tiprete la ieirea standard. n caz de succes ntoarce numrul de octei citii din fiier i FALSE n caz de eec. terge directorul dirname numai dac acesta este gol, iar n caz de eroare ntoarce 0. terge fiierul filename i returneaz 0 sau FALSE n caz de eroare.
int pclose(int fp) int readfile( string filename [, int use_include_path]) int rmdir( string dirname) int unlink( string filename)
Funcii pentru lucru cu tablori (array)

funcie array rol sintax creaz i ntoarce un tablou de valori. array array( [mixed... ]) Array() este un constructor de limbaj utilizat pentru a reprezenta tablouri i nu o funcie obinuit. funcia returneaz un tablou folosind valorile din tabloul de intrare, input, drept chei i frecvena lor drept valori. funcia returneaz un tablou coninnd toate valorile lui array1 care sunt prezente n toate celelalte argumente; cheile sunt pstrate. funcia returneaz cheile (numerice sau iruri de caractere) ale tabloului input. funcia concateneaz elementele a dou sau mai multe tablouri astfel nct elementele unui tablou se adaug la sfritul tabloului precedent. funcia trateaz tabloul ca pe o coad i introduce valorile primite ca argumente la sfritul tabloului. funcia returneaz un nou tablou care conine elementele tabloului array n ordine invers funcia calculeaz i returneaz suma elementelor din tabloul arr ca un numr ntreg sau float. array array_count_values( array input) array array_intersect( array array1, array array2 [, array ...]) array array_keys( array input [, mixed search_value]) array array_merge( array array1, array array2 [, array ...]) int array_push( array array, mixed var [, mixed ...]) array array_revers( array array [, bool preserve_keys]) mixed array_sum( array arr)
array_count_val ues array_intersect
array_keys
array_merge
array_push array_revers
array_sum array_unique
array array_unique( array funcia elimin valorile duplicate din array) tablou; returneaz un tablou nou care nu conine valori duplicate; cheile nu se modific.
101
arsort
asort
count
funcia sorteaz descresctor tabloul array astfel nct legturile dintre indicii asociativi i valorile indicate de ctre acetia s se menin. Vei folosi aceast funcie pentru a sorta tablouri asociative n care ordinea actual a elementelor este important. funcia sorteaz cresctor tabloul array astfel nct legturile dintre indicii asociativi i valorile indicate de ctre acetia s se menin. Vei folosi aceast funcie pentru a sorta tablouri asociative n care ordinea actual a elementelor este important. funcia returneaz numrul 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 iniializat.
void arsort( array array [, int sort_flags])
void asort( array array [, int sort_flags]))
int count( mixed var)
each
rsort sort sizeof
funcia returneaz cheia curent i array each( array array) valoarea corespunztoare 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 conin numele elementului din tablou, iar 1 i value conin valoarea. funcia sorteaz un tablou n ordine void rsort( array array [, int descresctoare. sort_flags]) funcia sorteaz elementele unuii tablou n ordine cresctoare. funcia returneaz numrul elemente dintr-un tablou. de void sort( array array [, int sort_flags])]) int sizeof( array array)
Utilizarea variabilelor globale Variabilele globale sunt declarate n afara oricarei funcii. 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 funcii. 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 funcii; cu alte cuvinte, domeniul de existenta al unei variabile globale, nu include corpurile funciilor. Dac dorii sa obinei accesul la o variabil globala n cadrul unei funcii, putei extinde domeniul de existen al variabilei prin specificarea numelui acesteia n interiorul unei instructiuni global. Instructiunea global are urmatoarea forma: global variabil1, variabil2, variabil3;
102
Dup cuvntul cheie global pot urma una sau mai multe variabile; fiecare variabil este separat prin virgul. Exemplu de utilizare a instruciunii 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 funcie asociate i sunt distruse la incheierea apelului acesteia. Variabilele locale sunt disponibile doar pe durata execuiei funcie asociate. Argumentele funciilor reprezint un tip important de variabil locala. Se poate crea o variabil locala prin simpla atribuire a unei valori unei variabile din interiorul unei funcii. Pentru a ilustra deosebirea dintre variabilele locale i cele globale. Exemplu de script care definete o variabil locala $x i o variabil globala cu acelai nume.
function este_local() { $x = 2; echo "<BR>corpul funcie: 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 preferinelor utilizatorilor i a altor informaii care trebuiesc reinute atunci cnd utilizatorul trece la o nou pagin web. Valorile variabilelor dispar atunci cnd scriptul PHP care le conine i ncheie execuia. Spre deosebire de acestea, valorile variabilelor cookie se pot pstra un timp indefinit. Browserul utilizatorului stocheaza variabilele cookie n unitatea de hard-disk local a utilizatorului. Variabilele cookie sunt utile pentru pstrarea preferinelor utilizatorului. Cnd utilizatorul revine la pagina vizitat, variabilele cookie permit browserului s recunoasc utilizatorul i s restaureze opiunile selectate de utilizator. Valoarea variabilei cookie este automat pus la dispoziie ca variabil PHP avnd acelai nume cu acela al variabilei cookie. De exemplu, s presupunem c ai creat o variabil cookie denumit "cursuri" i c i atribuii valoarea "informatica". Aceast pereche cursuri-
103
informatica este apoi pus la dispoziia fiecrui script PHP asociat paginilor web. Valoarea variabilei cookie se poate afia folosind instruciunea echo "Valoarea variabilei cookie este $cursuri"; care va afia: Valoarea variabilei cookie este cursuri. Variabila PHP de tip tablou asociativ HTTP_COOKIE_VARS conine numele i valoarea fiecrei variabile cookie curent. Dac dorii s vizualizai fiecare variabil cookie disponibil i valoarea acesteia, putei utiliza funcia phpinfo(), care afieaz 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 funcia 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 expirrii 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 funcia serialize() pentru a "mpacheta" elementele tabloului ntr-un ir; valoarile tabloului se pot recupera cu funcia unserialize(). Exemplu care depaete limita de 20 de variabile cookie dar nu poate depi 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.
104
Administrarea bazei de date se realizez 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 iniial. 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 configurrii 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 uurin importarea diverselor baze de date i exportarea sub forma fiierelor sql. Tranzaciile 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 main care dorete sa proceseze interogri asupra unei baze de date MySQL trebuie s ruleze MySQL server(mysqld), care este responsabil de tot traficul de tip intrri/ieiri (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 neleg n cazul MySQL operaiunile ce vor fi permise asupra bazei/bazelor de date, tabelelor sau indecilor, cum sunt de exemplu SELECT, INSERT, UPDATE, DELETE, CREATE, DROP. Datele sunt obiectul celor mai multe operaii de prelucrare, iar sistemele de gestiune a bazelor de date furnizeaz cele mai complexe i puternice faciliti pentru lucrul cu datele. PHP include o bibliotec de funcii care furnizeaz o interfa cu sistemul MySQL de gestiune a bazelor de date. Folosind aceste funcii, un program PHP poate obine accesul la datele rezidene 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 informaii i o poate organiza ntr-un format accesibil n mod direct sau de ctre un alt program (in cazul nostru PHP). ntr-o baz de date, informaia este organizat sub form tabelar, n care coloanele se numesc cmpuri iar liniile se numesc nregistrri. Capul de tabel determin structura bazei de date. Un sistem de gestionare a bazelor de date (SGBD) este un program care permite utilizatorilor interaciunea cu baza de date. Un SGBD asigur: crearea bazei de date introducerea informaiilor n baza de date actualizarea informaiilor extragerea datelor controlul accesului la date Obiectivul esenial, al unui SGBD este furnizarea unui mediu eficient, adaptat utilizatorilor care doresc s consulte sau s actualizeze informaiile coninute n baza de date.O baza de date poate conine mai multe tabele, ce pot fi legate intre ele. Un cmp se caracterizeaz prin: numele cmpului (reprezint un nume simbolic prin care cmpul se poate identifica), tipul cmpului (pentru identificarea tipului de date care pot fi stocate n cmpul respectiv), lungimea cmpului (numrul maxim de caractere care pot fi stocate n cmpul respectiv).
105
MySQL a fost creat n anul 1996 de ctre o compania suedez i este un SGBD foarte rapid, care poate lucra cu baze de date de mari dimensiuni. MySQL permite lucru cu cmpuri 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 condiii de liceniere (Open Source Software) . Afiarea interogrii n execuie i rularea ei pe baza de date se face cu ajutorul unor aplicaii 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. Interfaa grafic n mediul integrat de lucru cu PHPMyAdmin arat ca n figura 4.6.
Figura 4.6 Intertefaa grafic phpMyAdmin
O baz de date poate conine mai multe tabele, fiecare cu propria sa structur (figura 4.7).
Figura 4.7 Tabela carti din baza de date cursuri
106
Cmpuri numerice Unul dintre cele mai utilizate tipuri de cmpuri n MySQL este Int (integer), care poate stoca valori cuprinse ntre 2.144.483.648 i 2.144.483.644. Acest tip de cmp poate fi folosit cu opiunea auto_increment, pentru a defini cheia primar a unei tabele. Cheia primara este un cmp care face posibil identificarea unica a fiecrei nregistrri. De obicei este vorba de un cmp numeric, care va fi incrementat la fiecare operaie de adugare. Tipuri de cmpuri dat/or Exist n MySQL cinci tipuri de cmpuri folosite pentru stocarea datei calendaristice i a orei care sunt: Date Datetime Timestamp Time Year Cmpul de tip date stocheaz valori n format AAAA-LL-ZZ i permite introducerea valorilor cuprinse ntre 1000-01-01 i 9999-12-31. Cmpul 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. Cmpul de tip timestamp stocheaz automat timpul atunci cnd se modific valoarea unei nregistrri (printr-o operaie de introducere sau actualizare). Cmpul de tip time stocheaz timpul n format HH:MM:SS. Cmpul de tip year poate stoca date cuprinse ntre 1901 i 2155. Cmpuri de tip ir sunt: Char Varchar Tinytext Text Mediumtext Longtext Enum Cmpul de tip char are lungimea maxim de 255 caractere. Este de lungime fix (atunci cnd introducem o valoare cu lungimea mai mic dect lungimea maxim a cmpului, cmpul va fi completat n partea dreapt cu spaii). Cmpul de tip varchar are lungimea maxim de 255 caractere, dar este de lungime variabil (cmpurile nu vor mai fi completate cu spaii ca la tipul char). Cmpurile de tip blob i text pot stoca o cantitate variabil de date. Cmpurile de tip enum permit stocarea unei valori dintr-o mulime de valori specificat. Toate tipurile de date ce se pot utiliza pentru un cmp sunt vizibile n figura 4.8.
107
Figura 4.8 Tipurile de dat pentru un cmp
Principalele comenzi MySQL Cele mai uzuale operaii cu bazele de date sunt: Comanda CREATE DROP INSERT DELETE UPDATE SELECT ALTER SHOW USE Semnificatie creaz o baza de date sau un tabel sterge o baza de date sau un tabel adauga inregistrari intr-un tabel sterge inregistrari dintr-un tabel actualizeazninregistrarile dintr-un tabel selecteaz un tabel modific structura unui tabel Afiare baze de date, tabele 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 sfritul oricrei comenzi.. 2. Afiarea 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 nti deschiderea bazei de date i apoi crearea propriu-zis a tabelei: USE biblioteca;
108
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;
Explicaii: o AUTO_INCREMENT funcioneaz cu orice tip intreg. La fiecare rnd nou adugat n baza de date, numarul asociat va fi incrementat; o NULL nseamn fr valoare (diferit de spaiu sau zero); o NOT NULL nseamn c orice nregistrare completat cu ceva; PRIMARY KEY reprezint elementul de referin pentru fiecare linie. 5. Afiarea tabelelor coninute de o baz de date presupune deschiderea bazei de date i apoi folosirea comenzii SHOW TABLES; 6. Afiarea structurii unei tabele se face cu comanda DESC nume_tabel; n acest caz, vor fi afiate numele cmpurilor, tipul i lungimea lor. 4. Pentru a modifica structura unei tabele se folosete comanda ALTER TABLE. De exemplu, pentru a modifica lungimea cmpului pret de la int(3) la int(4) se folosete comanda ALTER TABLE carti MODIFY pret int(4); Pentru a aduga un nou cmp, numit observatii, comanda este: ALTER TABLE `cursuri`.`carti` ADD òbservatii` VARCHAR(40) NOT NULL; Pentru a schimba denumirea cmpului 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, ntruct, n urma executrii ei, att structura ct i datele coninute n tabele sunt terse. 9. Comanda INSERT introduce nregistrri ntr-o tabel existent.
109
Forma general a comenzii este: INSERT INTO nume_tabel [(cmp1,camp2,,cmp 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 nregistrrile din una sau mai multe tabele. Sintaxa general este: SELECT [DISTINCT] cmp1, cmp2,, cmp n FROM nume_tabel WHERE condiie GROUP BY nume_cmp ORDER BY nume_cmp [ASC | DESC] LIMIT [numrul_primei_nregistrri_dorite, numrul_de_nregistrri_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 nlocuiete orice ir de caractere) i _ (underline) pentru nlocuirea unui singur caracter, n combinaie cu operatorul LIKE. De exemplu, pentru a afia posturile n a cror descriere se ntlnete irul de caractere web, comanda este: select * from posturi where descriere like %web%; Pentru a afia numrul de nregistrri se folosete funcia COUNT: select count (*) from posturi where domeniu=Informatica; PHP permite lucrul cu un numr mare de funcii MySQL. n PHP exista funcii pentru toate operatiile executate asupra bazelor de date MySQL. Cele mai importante funcii sunt: mysql_connect() stabilete 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"); ?>
Funcia 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 staia de lucru atunci conexiunea la baza de date se realizeaz:
<?php $link = mysql_connect("localhost", "root", "")
110
or die("Nu se poate conecta"); ?>
Funcia 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, operaie 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"); ?>
Funcia 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) corespunztor interogrii efectuate. mysql_num_rows() returneaz numrul nregistrrilor (rndurilor) 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 "Numrul de rnduri este $x "; mysql_close();
mysql_affected_rows() returneaz numrul de nregistrri(rnduri) afectate de o interogare INSERT, DELETE SAU UPDATE. Aceast funcie nu opereaz i cu comanda SELECT. Exemplu:
111
$query=delete from cv where id=12; $result=mysql_query($query); $rnduri=mysql_affected_rows(); echo S-au ters $rnduri nregistrri din baza de date;
mysql_free_result() elibereaz zona de memorie folosit de o interogare. Aceast funcie este util n cazul n care interogarea returneaz un numr mare de rezultate, dup care scriptul continu s execute operaii. mysql_close() nchide o conexiune MySQL. Cnd o conexiune este nchis (fie folosind aceast funcie, 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 funcie trebuie folosit mpreun cu funcia 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) funcie folosit pentru a trimite un email (de la $to, cu subiectul $subiect, avnd ca mesaj $message cu headerele adiionale $header); exemplu:
$to="test@diverse.ro"; $subiect="functia mail"; $mesaj="Mail trimis cu functia mail din PHP"; mail($to, $subiect, $mesaj);
mysql_error() returneaz mesajul de eroare sub forma de ir de caractere generat de baza de date MySQL dac este cazul; session_start() - initializeaz o seciune 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()- oprete afiarea bufferului pn la terminarea execuiei scriptului; print() - initializeaza listarea la imprimanta a unei pagini web;
112
require() - funcie care include n scriptul curent coninutul unui fiier cu verificarea de a fi introdus o singura dat (stre deosebire de funcia include() - care permite includerea fiierului de mai multe ori); crypt($pass, "BB") funcie 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 funcie de valoarea mysql_query este afiat un mesaj despre introducerea datelor n tabel. Utilizarea proprietilor Select, Update si Delete SELECT - poate fi utilizata intr-o comanda mysql_query pentru a selecta anumite informaii din tabelele bazei de date. Sintaxa pentru introducerea datelor n tabelul bazei de date este:
$sql=mysql_query("SELECT * FROM nume_tabel");
Pentru a afia fiecare rnd din tabel se folosete o bucla while i comanda mysql_fetch_row, ca n exemplu:
<?php include "conexiune.php";
113
$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 funcia 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)) {
114
echo "<tr><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td></tr>"; } echo "</table>"; mysql_close($conexiune); ?>
UPDATE - modific valoarea cmp dintr-o nregistrare a unei tabele, eventual pentru un anumit id. Sintaxa este:
UPDATE nume_tabel SET cmp1 =' $val1, cmp2='$val2,..., cmpn='$valn' WHERE id='$nou_id';
DELETE - terge nregistrri dintr-o tabel, tergerea se face dup un id, folosind sintaxa:
DELETE FROM nume_tabel WHERE id='$id';
Aplicaia 1 S se preia dint-un formular datele de identificarea ale unui student, s se rspund la 2 intrebari gril i s se afieze apoi nota obinut (figura 4.9)
Figura 4.9 Fereastra de autentificare i ferestra de completare chestionar
Fiierul *.html are sursa: <html> <head> <title></title> <script> function sterg(a) {a.value="";} </script> </head>
115
<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> Fiierul 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"; ?> Fiierul f3.php este:
116
$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 interfaa cu ajutorul creia s se populeze tabela, s se actualizeze numarul de telefon, s se terg nregistrri pe baz de id i eventual s se afieze coninutul tabelei. Interfaa va arta ca n figura 4.10.
Figura 4.10. Interfata care interacioneaz cu baza de date

117
BIBLIOGRAFIE
1. 2. 3. 4. A. Trafford, Owl: Representing Information Using The Web Ontology Language,2005 O'Reilly XML in a Nutshell, 2005. S. Buraga, Tehnologii XML, Polirom, Iai, 2006 S. Buraga, Semantic Web, Matrix Rom, Bucureti, 2004 Gangemi, P. Mika, Understanding the Semantic Web through Descriptions and Situations,International Conference ODBASE03, Italy, Springer, 2003 B. Masolo, S. Borgo, A. Gangemi, N. Guarino, A. Oltramari: WonderWeb Deliverable Ontology Library. 5. IST Project 2001-33052 WonderWeb: Ontology Infrastructure for the Semantic Web, 2003 6. S. J. Russel, P. Norvig, Artificial Intelligence. A Modern Approach, Prentice Hall, 1995 7. T. Anghel Dezvoltarea aplicaiilor WEB folosind XHTML, PHP I MySQL Ed. Polirom Iai 2005 8. World Wide Web Consortium - W3C: http://www.w3c.org 9. www.php.net 10. www.java.sun.com 11. www.w3schools.com 12. www.htmlhelp.com/bg.png 13. www.macromedia.com 14. www.apache.org 15. www.mysql.com
Model bilet examen
118
BILET EXAMEN 1
1. Realizai un formular care sa permit introducerea numelui, prenumelui i a adresei e-mail. La apsarea
butonului de submit datele introduse n formular s apar ntr-o fereastr nou ca n exemplul: Studentul Popescu Ion poate fi contactat la adresa adresamail@yahoo.com. 2. Creai un fiier php care preia dintr-un formular html numele i parola. Se verific dac numele este student i parola Titu_Maiorescu. n caz afirmativ se afieaz mesajul OK, altfel reafieaz formularul nsoit de un mesaj de eroare. 3. S se creeze o funcie javascript care afieaz pe ecran ce buton radio s-a bifat.
4. Realizai un script care s afieze n pagin data curent. GRIL 1. a. b. c. 2. a. b. c. 3. a. b. c. 4. a. b. c. 5. a. b. c. 6. O clasa de stiluri se apeleaz prin: <DIV ID=clasa> <DIV CLASS=clasa> <DIV STYLE=clasa> Alegei atributul corect pentru tagul <table> color align text Introducerea unei imagini se realizeaz prin: <a src=x.jpg> <a href=x.jpg> <img src=x.jpg> Pentru afiarea unui mesaj in bara de stare putem folosi: onChange() window.status OK document.title O zon de text se introduce prin: <input type=textarea> <textarea> <select textarea> Culoarea de fond a unei pagini Web se stabilete prin proprietatea: a. windows.status b. document.fgColor c. document.bgColor 7. O list de selecie se introduce prin instruciunea: a. <input type=select> b. <select> c. <form select> 8. Atributul checked ataat unui buton radio are ca efect: a. Bifarea implicit a butonului b. Nu exist acest atribut c. Trebuie ataat obligatoriu la toate butoanele radio din acelai grup 9. In PHP numele variabilelor trebuie s nceap cu: a. _ b. $ c. ? 10. Alegei varianta corect pentru introducerea unei funcii javascript: a. function suma numere() b. function suma_nr() c. sumanumere
Nota se calculeaz: 4 ntrebri * 1.5 punct + 10 ntrebri gril * 0,3 puncte+1 punct din oficiu =10.
119
BILET EXAMEN 2 1. Realizai 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. Creai un fiier 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 afieaz mesajul Bun venit, altfel se reafieaz formularul nsoit de un mesaj de eroare. 3. S se scrie o funcie 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. Scriei codul html care mparte fereastra browser-ului n dou cadre verticale. n primul cadru se ncarc fiierul student.html, iar n al doilea cadru se ncarc o pagina care contine doar data curenta. 5. Realizai un formular care sa permit introducerea numelui, prenumelui i a adresei de e-mail. La apsarea butonului de submit datele introduse n formular s apar ntr-o fereastr nou ca de exemplu: Studentul Popescu Ion poate fi contactat la adresa popescu.ion@yahoo.com. 6. S se creeze o funcie javascript care afieaz pe ecran, care buton radio s-a bifat dintr-un grup cu 4 elemente (vezi figura alaturata).
Nota pentru partea scrisa se calculeaza: 6 ntrebri * 1.5 puncte +1 punct din oficiu =10.

Tehnologii Web

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tehnologii Web

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSITATEA TITU MAIORESCU FACULTATEA DE INFORMATICA

Lector univ. dr. Mironela Prnu

Modulul I. CREAREA PAGINILOR WEB CU HTML

<dl>...</dl> (de la "definition list" = lista de definiii)

Legturi prin adresare relativ

<a href="#ancora1">Link catre ancora 1 </a>

<img src="poza.jpg" alt=Imagine ...........> Text dupa imagine

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

Alinierea unei imagini

align care poate lua urmtoarele

Atributul bgproperties=fixed menine imaginea fix la realizarea unei defilri n pagin.

<a href ="ex_1.1.html"><img src= "poza.jpg"></a>

Culoarea unui table

Distana ntre celule i coninut

Alinierea coninutului celulelor

Tabel cu celule unite

Atribute frames i rules pentru un tabel

Poziionarea documentelor n cadre

Folosirea atributului target pentru legturi

Formular cu caset text i buton de expediere

Cmp de editare de tip "password"

Cmp de editare multilinie

Configurarea fontului prin stiluri

Efect de umbr cu ajutorul straturilor

Modulul II. JAVASCRIPT

2.2 Marcajul <script type=text/javascript>

2.3 Elementele limbajului JavaScript

Figura 3. 1 Caset alert

Figura 3.2. Caseta prompt

Funcia EVAL se utilizeaz pentru a converti un ir de caractere la o valoare ntreag. Exemplu:

Figura 3.3. Funcia confirm

Figura 3. 5 Text scris n mod programat

Sintaxa instruciunii while este:

<script type=text/javascript> i=; while(i!==student) { i=prompt(Introduceti parola,); } document.write(Password accepted); </script>

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

Figura 3.6 Text scris prin aplelul unei funcii

Aplicatie: utiliznd funcii s se realizeze fereastra din figura 2.4.

Figura 2. 7 Definirea funciilor ntr-un fiier html

Figura2.8. Testare user i parola

Utilizarea casetelor de tip checkbox

Figura 2.9. Utilizarea casetelor de tip checkbox

Utilizarea listelor de selecie

Figura 2.10. Realizarea unui formular complex

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

Figura 2.11. Evenimente legate de aciuni cu mouse-ul

2.5 Obiecte n Java Script

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

Construirea unui banner

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

Figura 2.12 Selectare elemte de tip data i afiarea acestora

Figura 2.13. Creare i personalizare tabel n modul programat

Figura 2.13. Utilizarea obiectelor din JavaScript

MODULUL III. CONSTRUIREA DOCUMENTELOR XML

3.2 Caracteristicile lui XML

3.3 Construirea prologului unui document XML

3.4 XML-ul ca baz de date

3.6 Stocarea documentelor n BLOB-uri

Modulul IV. PHP i MySQL

Figura 4.1 Fereastra localhost

Figura4.2 Fereastra browserului pentru rularea scripturilor

Crearea scripturilor PHP

Break Continue Declare Exemplu:

Folosirea PHP-ului cu formulare HTML

onmousemove onmouseout onkeypress onkeydown onkeyup