TEHNOLOGII WEB - Indrumar Laborator FINAL PDF

UNIVERSITATEA HYPERION DIN BUCURETI
FACULTATEA DE TIINE EXACTE I INGINERETI
Dr.ing. Eugen CORNEL
2012
TEHNOLOGII WEB
NDRUMAR DE LABORATOR
CUPRINS:
INTRODUCERE .............................................................................................................. 2
LUCRAREA NR. 1 : Limbajul HTML Introducere, structura unui document HTML,
formatarea textului ............................................................................................................ 3
LUCRAREA NR. 2 : Limbajul HTML Imagini, legturi, liste, tabele............................. 9
LUCRAREA NR. 3 : Limbajul HTML Cadre, formulare ............................................. 14
LUCRAREA NR. 4 : Limbajul CSS Introducere, tipuri de formatare CSS, formatri de
baz ................................................................................................................................ 22
LUCRAREA NR. 5 : Limbajul CSS Formatri avansate CSS ...................................... 32
LUCRAREA NR. 6 : Limbajul JAVASCRIPT Introducere, variabile, tipuri de date i
operatori ......................................................................................................................... 40
LUCRAREA NR. 7 : Limbajul JAVASCRIPT Instruciuni, funcii predefinite i funcii
definite de utilizator ........................................................................................................ 50
LUCRAREA NR. 8 : Limbajul JAVASCRIPT i modelul DOM Crearea paginilor
dinamice utiliznd limbajul JavaScript i DOM ............................................................... 66
LUCRAREA NR. 9 : Limbajul PHP Introducere, variabile, tipuri de date. Exemple
primare ........................................................................................................................... 72
LUCRAREA NR. 10 : Limbajul PHP Instruciuni, funcii predefinite i funcii definite
de utilizator, sesiuni PHP ................................................................................................ 83
LUCRAREA NR. 11 : Limbajul PHP Prelucrarea datelor dintr-un formular utiliznd
limbajul PHP ................................................................................................................ 101
LUCRAREA NR. 12 : Limbajul PHP Prelucrarea datelor dintr-o baz de date MYSQL
cu ajutorul limbajului PHP ............................................................................................ 109
LUCRAREA NR. 13 : Crearea de coninut dinamic animat utiliznd Adobe FLASH i
limbajul ActionScript .................................................................................................... 124
LUCRAREA NR. 14 : Tehnologii web avansate. Biblioteca JavaScript jQuery, CMS, web
framework-uri............................................................................................................... 131
BIBLIOGRAFIE .......................................................................................................... 135
-1-
INTRODUCERE
Odat cu dezvoltarea Internet-ului au aprut o serie de tehnologii
web din ce n ce mai avansate, pornind de la simplul limbaj HTML i
mergnd pn la o serie de limbaje de scripting (client sau server), dintre
care cele mai utilizate sunt JavaScript, PHP, ActionScript.
n acest ndrumar de laborator se vor prezenta mai multe tehnologii
web actuale, larg utilizate de ctre dezvoltatorii de website-uri i aplicaii
web, cu ajutorul crora studenii vor putea accesa piaa de munc pe acest
domeniu cu o cerere din ce n ce mai mare din partea marilor companii
software.
Lucrrile de laborator sunt prezentate ntr-o lumin modern i uor
accesibil pentru studeni, recomandarea fiind ca oricine acceseaz acest
ndrumar de laborator s testeze personal toate exemplele prezentate i s
efectueze teme originale pentru problemele propuse la Modul de lucru de la
finele fiecrei lucrri.
La finalul ndrumarului este prezentat i o scurt bibliografie, de
unde studenii pot accesa i alte resurse din domeniu, care s-i ndrume spre
o cunoatere tot mai mbuntit a tehnologiilor web, mai ales cu asaltul de
curnd al conceptului de cloud computing, prin care majoritatea aplicaiilor
de desktop sunt transferate ctre lumea web.
Avantajul major al acestei noi tehnologii const n accesarea
documentelor create din orice locaie de pe glob, deoarece tehnologia cloud
computing permite stocarea documentelor n marile centre de date ale unor
companii IT cu un renume mondial, precum Microsoft, IBM, Google,
Adobe etc.
-2-
TEHNOLOG WEB - ndrumar de laborator

LUCRAREA NR. 1 :
Limbajul HTML Introducere, structura unui document HTML,
formatarea textului
Tematica lucrrii
I.
Teoria lucrrii de laborator
II.
Ce este HTML?
Structura unui document HTML.
Etichete HTML pentru generarea textelor.
Exemple primare.
Ce este HTML?
HTML (Hyper Text Markup Language) reprezint un limbaj de marcare,

alctuit dintr-un set de etichete de marcare, prin care este descris coninutul
unui document. Documentele HTML se mai numesc i pagini web.
Structura unui document HTML
Structura de baz a unui document HTML este compus din:

-
Declaraie tip document:

Ex. <!DOCTYPE html> este declaraia pentru standardul HTML5.
Seciunea <HEAD> </HEAD>, n care sunt trecute informaii ce
se execut odat cu ncrcarea paginii web.
Corpul documentului, setat de eticheta <BODY> </BODY>, n
care se introduc elementele ce vor fi afiate n pagina web.
Orice pagin web se ncheie cu eticheta </HTML>
Codul HTML de baz pentru un document arat astfel:
-3-
Limbajul HTML nu este case-sensitive, elementele scriindu-se cu litere mari

sau mici.
Elemente (etichete) HTML
Elementele HTML reprezint etichete de inserare i formatare a coninutului

ntr-o pagin web. Ele pot defini paragrafe, tabele, liste, imagini, formulare,
clipuri multimedia etc.
Structura unui element este urmtoarea:
<nume_element> coninut </nume_element>
Spre exemplu, n codul HTML
<p>Acesta este un paragraf</p>,
elementul utilizat este <p>, care definete un paragraf. Fiecare element
conine o etichet de deschidere i una de nchidere. Cea de nchidere se
marcheaz cu caracterul / naintea numelui etichetei.
HTML conine o serie de elemente pentru generarea coninutului text. n
tabelul 1 sunt descrise principalele astfel de elemente.
Tabelul 1. Elemente HTML pentru generarea de text

Afiare
Element HTML
text normal
text normal
<b>text bold</b>
text bold
-4-
<i>text cursiv</i>
text cursiv
<u>text subliniat</u>
text subliniat
<del>text taiat</del>
text taiat
<sup>exponent</sup>
textexponent
<sub>indice</sub>
textindice
<cite>Citat</cite>
Citat
<em>evidentiat</em>
evidentiat
<code>text continand cod de

computer</code>
text continand cod de computer
<strong>text ingrosat</strong>
text ingrosat
<big>mare</big>
mare
<small>mic</small>
mic
<font color=red>font rosu</font>
font rou
<font face=Courier>font
Courier</font>
font Courier
<font size=6>font size=6</font>
font size=6
<div align=center>text aliniat pe

centru</div>
<div align=left>text aliniat la
stanga</div>
text aliniat pe centru

text aliniat la stanga
<div align=right>text aliniat la

dreapta</div>
text aliniat la dreapta
<h1>Titlu 1</h1>
Titlu 1
<h2>Titlu 2</h2>
Titlu 2
<h3>Titlu 3</h3>
Titlu 3
<h4>Titlu 4</h4>
Titlu 4
-5-
<h5>Titlu 5</h5>
Titlu 5
<h6>Titlu 6</h6>
Titlu 6
Exemplu de pagin web cu text formatat:
Rezultatul afiat n browser-ul web este cel din figura 1.

-6-
Figura 1. Exemplu de pagin web cu formatare de text.
III.
Modul de lucru
1.
S se creeze o pagin web, care s afieze urmtoarele:

3 tipuri de titluri (heading);
-7-
3 paragrafe de dimensiuni diferite;

paragrafele de mai sus s se formateze cu text ngroat,
subliniat, italic, tiat, superscript i subscript;
separai paragrafele prin linii orizontale.
-8-

LUCRAREA NR. 2 :
Limbajul HTML Imagini, legturi, liste, tabele
Tematica lucrrii
I.
1.
2.
3.
4.
II.
Afiarea imaginilor n paginile web

Crearea legturilor web (hyperlink-uri)
Generarea listelor ordonate i neordonate
Crearea i formatarea tabelelor n HTML

1. Afiarea imaginilor n paginile web
Elementul de setare a unei imagini ntr-o pagin web este format din
eticheta <IMG>.
Exemplu de cod HTML pentru inserarea unei imagini:
sau
Rezultatul afiat n browser va fi cel din figura 2.1. de mai jos.
-9-
2. Crearea legturilor web (hyperlink-uri)

Legturile web reprezint direcii de acces ctre alte adrese web de pe
Internet. n HTML hyperlink-urile se creeaz cu eticheta tip ancor,
<A></A>.
Exemplu de 3 legturi web ctre 3 universiti din ara noastr:
Rezultatul afiat va fi:
Adresele direcionate de hyperlink se pot deschide n fereastra printe sau

ntr-una nou, utiliznd atributul _target, care poate lua valorile:
_blank | _parent | _self | _top
Exemplu de utilizare a atributului _target:
- 10 -
3. Generarea listelor ordonate i neordonate
Listele ordonate (numerotate) se insereaz utiliznd setul de etichete:

<OL> <LI> </LI> </OL>, (OL = Ordered List).
Exemplu de list ordonat generat n HTML:
Listele neordonate (nenumerotate) sunt create de setul de etichete:
<UL> <LI> </LI> </UL>, (UL = Unordered List).

Exemplu de list ordonat generat n HTML:
n cadrul listelor se pot introduce texte, imagini, legturi web etc.
4. Crearea i formatarea tabelelor n HTML

Tabelul este un element HTML foarte utilizat, att pentru structurarea unei
pagini web, ct i pentru gruparea informaiilor.
Structura unui tabel HTML este:
- 11 -
<tr> - definete o linie (un rnd) de tabel

<td> - definete o celul de tabel
Fiecrui tabel i se poate insera i un cap de tabel, utiliznd eticheta <TH>

(table heading).
Evidenierea conturului unui tabel se seteaz prin atributul border. De
asemenea, celule pot fi spaiate att n interior, ct i n exterior, utiliznd
atributele cellpadding i cellspacing.
Exemplu de tabel generat n HTML:
Atunci cnd se dorete ca o celul s se ntind pe mai multe linii sau

coloane se utilizeaz atributul colspan (pentru coloane) i rowspan
(pentru linii).
- 12 -
Exemplu de tabel cu o celul extins pe 2 coloane:
III.
Modul de lucru
1. Creai o pagin web n care s inserai urmtoarele elemente
HTML:
un titlu de pagin <H1> i un paragraf.

3 imagini oarecare, cu titlu.
3 legturilor web care s utilizeze valori diferite pentru
atributul target.
o list ordonat cu principalele monezi de schimb valutar
o list neordonat cu hobby-urile dvs.
un tabel n care s apar i celule care se ntind pe mai multe
coloane sau linii.
- 13 -

LUCRAREA NR. 3 :
Limbajul HTML Cadre, formulare
I.
Tematica lucrrii
1. Lucrul cu cadre n paginile web
2. Generarea formularelor HTML
II.

1. Lucrul cu cadre n paginile web
Cadrul (frame) reprezint o seciune din pagina web, un container de

coninut, separat de restul site-ului. Cadrele sunt utilizate pentru separarea
de coninut, ajutnd la structurarea mai bun a site-ului.
Standardul HTML 4.01 include 2 tipuri de cadre <FRAME> i <IFRAME>.
a) Cadrul <FRAME> definete o fereastr (un cadru) ntr-un set de
cadre (<FRAMESET>).
Exemplu de pagin web cu un set de 3 cadre, fiecare cadru reprezentnd o
pagin web separat.
Rezultatul afiat n navigatorul web este cel din figura 3.1 de mai jos.
- 14 -
Figura 3.1. Setarea cadrelor n HTML

Not
Elementele <FRAMESET> i <FRAME> nu mai sunt suportate n
standardul HTML5.
b) Dac se dorete inserarea unei pagini web ntr-un cadru n interiorul

paginii principale, se folosete eticheta <IFRAME>.
Exemplu de mai jos ncarc ntr-un cadru IFRAME site-ul universitii
Hyperion.
Rezultatul afiat este cel din figura 3.2 de mai jos:
- 15 -
Figura 3.2. Cadru IFRAME ncrcat cu coninut din alt site.

Not
Elementul IFRAME este suportat i n standardul HTML5.
2. Generarea formularelor HTML

Aproape orice portal web existent la ora actual conine cel puin o pagin
cu un formular de procesare date: formular de autentificare, formular de
contact, formular de ntrebri, formular de sondaj de opinie, formular de
introducere date diverse etc.
n HTML formularele se creeaz cu elementul FORM.
n cadrul unui formular pot fi definite urmtoarele cmpuri de introducere a
datelor utilizator:
- 16 -
a) cmp introducere text : <input type=text>

Exemplu:
b) cmp introducere parol : <input type=password>

Exemplu:
c) butoane radio : <input type=radio>

Exemplu:
d) csue de validare (checkbox) : <input type=checkbox>

Exemplu:
- 17 -
e) arie de text : <textarea> ... </textarea>

ntr-o arie de text se poate introduce text de dimensiuni mai mari.
Exemplu:
f) list drop-down : <select>

Pentru selectarea unei opiuni dintr-o list se utilizeaz elementul SELECT.
Acesta conine pentru fiecare opiune cte un element OPTION.
Exemplu:
g) selecie fiier : <input type=file>

Exemplu>
h) cmp introducere adres de e-mail : <input type=email>

- 18 -
Dac adresa nu este valid sintactic, navigatorul web va da un mesaj de

eroare:
Exemplu:
i) buton : <input type=button> (HTML 4.01) sau <button type=button>

(HTML 5)
Butoanele reprezint elemente de formular prin care utilizatorul declaneaz

execuia unei aciuni (funcie script, procesare date formular etc.)
Exemplu:
j) buton trimitere date formular spre procesare :

<input type=submit>
Exemplu:
k) buton tergere date din formular : <input type=reset>

Exemplu:
- 19 -
n continuare se prezint un exemplu de formular ce conine mai multe

elemente.
n navigatorul web se va afia formularul de mai jos.
- 20 -
Datele dintr-un formular se trimit spre procesare prin apsarea butonului

referit de elementul HTML submit. Acestea sunt preluate de o funcie
specificat n eticheta <FORM> i care poate fi definit ntr-un limbaj tip
scripting (PHP, JavaScript, VBScript, ASP etc.), iar metoda de prelucrare a
datelor se definete prin atributul METHOD, lund valorile GET sau
POST.
III.
Modul de lucru
1. S se creeze un document HTML care s conin 2 cadre (frameuri), unul la stnga cu o lime de 25% i unul la dreapta (75%).
2. S se creeze un alt document HTML care s conin:
un titlu, 2 paragrafe, o imagine i un tabel.
3. S se creeze o alt pagin web care s conin un formular HTML,
n care s fie prezente toate elementele de formular prezente n
lucrarea de laborator.
- 21 -

LUCRAREA NR. 4 :
Limbajul CSS Introducere, tipuri de formatare CSS, formatri
de baz
Tematica lucrrii
I.
1. Ce reprezint CSS? Sintaxa CSS

2. Formatarea elementelor de fundal, text, font, legturi web, liste,
tabele i imagini utiliznd limbajul CSS.
II.
1. Ce reprezint CSS?
CSS este acronimul pentru Cascading Style Sheets (Foi de

stil n cascad)
Stilurile definesc cum sunt afiate elementele HTML
Stilurile au fost introduse n standardul HTML 4.0 pentru a

rezolva problema formatrii elementelor
Se pot utiliza foi de stil externe pentru uurina utilizrii lor
Sintaxa CSS
O regul CSS este alctuit din dou pri:
SELECTOR. Selectorul este de obicei elementul HTML care se

dorete a fi formatat i poate fi definit prin:
o numele elementului HTML,
o clasa elementului HTML (definit prin caracterul .
punct). n acest caz toate elementele care au setat clasa
centrat vor fi aliniate pe centrul elementului printe.
- 22 -
o identificatorul elementului HTML (ID-ul), definit prin

caracterul #, astfel c orice element cu ID-ul citat va fi
formatat cu font italic.
Exemplu de utilizare a selectorului CSS, n cele trei moduri:
una sau mai multe DECLARAII. O declaraie este compus dintr-o

proprietate a elementului (caracteristic) i valoarea dat de utilizator
pentru acea proprietate.
Figura 4.1 descrie sintaxa unei reguli CSS.
Figura 4.1. Sintaxa unei reguli de formatare CSS.

Regulile CSS se scriu n 3 locaii, la latitudinea utilizatorului:
ntre etichetele <HEAD> i </HEAD> unde se introduce elementul

<STYLE> n care se adaug regulile CSS dorite, ca n exemplul:
ntr-un fiier extern, salvat cu extensia .css, fiier referit n

documentul HTML n interiorul elementului <HEAD>, printr-o
sintax de forma:
n interiorul elementului HTML prin utilizarea atributului STYLE,

cum ar fi exemplul urmtor:
- 23 -
Comentariile n limbajul CSS se declar prin setul de caractere:

Exemplu:
Exemplu primar n care sunt formatate prin CSS cteva elemente HTML:
n figura 4.2 este prezentat rezultatul afirii documentului HTML de mai

sus, n care s-au formatat un titlu H1, unul H2 i un paragraf.
Figura 4.2. Exemplu de formatare prin CSS a unor elemente HTML.
- 24 -
2. Formatarea elementelor de fundal, text, font, legturi web, liste,

tabele i imagini utiliznd limbajul CSS.
a) Proprietile CSS de fundal (background) sunt utilizate pentru a
defini efectele de fundal ale unui element. Aceste proprieti sunt
urmtoarele:
background-color
background-image
background-repeat
background-attachment
background-position
n CSS, o culoare se poate specifica n trei moduri:
o valoare HEXA, ca i #ff0000
o valoare RGB, ca i rgb(255,0,0)
un nume de culoare, ca i red
Exemplu de setare culoare de fundal pentru elemente de tip H2, DIV i P:
Rezultatul afiat n browser arat ca cel din figura 4.3 de mai jos:
Figura 4.3. Formatarea prin CSS a culorii de fundal.
- 25 -
b) Proprietile CSS de text definesc valori pentru culoarea, direcia,

spaierea ntre litere, nlimea, alinierea, decorarea, transformarea,
indentarea etc. a textelor, acestea fiind:
color
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align
word-spacing
c) Proprietile CSS de font stabilesc familia, dimensiunea, stilul i
formatul fontului, acestea fiind urmtoarele:
font
font-family
font-size
font-style
font-variant
font-weight
d) Proprietile CSS de formatare a legturilor web (hyperlink-uri) pot

fi de orice fel (culoare, font, fundal etc.) i se aplic pentru cele patru
stri ale hyperlink-urilor:
a:link un link normal, nevizitat
a:visited - un link vizitat de ctre utilizator
a:hover - un link peste care utilizatorul culiseaz mouse-ul
a:active - un link pe care utilizatorul a dat cel puin un click.
Exemplu de formatare a legturilor web prin CSS:
- 26 -
Codul CSS
Cele 4 stri
Un link
Un link
Un link
Un link
e) Proprietile CSS pentru liste formateaz tipul marcajului, imaginea

acestuia i poziionarea, acestea fiind:
list-style
list-style-image
list-style-position
list-style-type
Exemplu de liste formatate cu diverse tipuri de marcaje, de la simboluri la
litere din alte limbi.
Rezultatul afiat n broweser-ul web este prezentat n figura 4.3:
- 27 -
Figura 4.3. Liste formatate prin CSS.
f) Proprietile CSS pentru tabele sunt cele utilizate n mod regulat

pentru text, borduri, spaiere etc., conducnd la tabele cu aspect mult
mbuntit fa de cel normal.
Prezentm un exemplu de cod CSS care formateaz elementele unui tabel
(TR, TD, TH) aplicnd mai multe proprieti.
Codul HTML
Codul CSS
- 28 -
Tabelul afiat n browser-ul web generat i formatat de codul HTML i CSS

de mai sus este prezentat n figura 4.4.
- 29 -
Figura 4.4. Tabel formatat prin reguli CSS.
g) Proprietile CSS pentru imagini sunt cele utilizate pentru setarea

parametrilor de contur, spaiere, aliniere i altele.
Exemplu de formatare prin CSS a unei imagini avnd atributul
id=hypimg n interiorul unui paragraf:
Rezultatul afiat n browser este cel din figura 4.5 de mai jos. Paragraful
este unul oarecare.
- 30 -
Figura 4.5. Formatarea unei imagini utiliznd reguli CSS

Pentru studierea i a altor proprieti CSS de formatare a elementelor
HTML, se pot accesa o serie de website-uri dedicate, cum sunt cele
prezentate la bibliografia de la sfrit.
III.
Modul de lucru
1.
S se creeze una sau mai multe pagini web, eventual conectate

ntre ele prin legturi web (hyperlink-uri), n care s inserai
diverse elemente HTML (paragrafe, imagini, tabele, liste, csue
DIV etc.) i s formatai aceste elemente utiliznd limbajul CSS.
- 31 -

LUCRAREA NR. 5 :
Limbajul CSS Formatri avansate CSS
I.
Tematica lucrrii
1. Crearea unei bare de navigare (meniu orizontal) n HTML i
formatarea acesteia prin CSS
2. Crearea i formatarea structurii unei pagini tip homepage prin
CSS, fr a utiliza tabele sau cadre tip frameset
3. Imagini sprite
II.

1. Crearea unei bare de navigare (meniu orizontal) n HTML i
formatarea acesteia prin CSS
Astzi aproape orice website conine cel puin o bar de navigare prin
paginile sale. Bara de navigare, denumit i meniu, poate fi structurat
orizontal sau vertical.
Un meniu este alctuit dintr-o list neordonat de elemente tip link-uri
(ancore), prin care se pot accesa toate paginile ce compun un website.
Spre exemplu, un meniu vertical neformatat prin CSS arat astfel:
Codul HTML
- 32 -
Afiare
Vom proceda la formatarea acestui meniu pentru a-l transforma ntr-unul

orizontal, oferindu-i un aspect mult mbuntit. Elementele HTML
formatate vor fi:
<ul> - eliminm bulina elementelor din list, precum i marginile

interioare i exterioare;
<li> - setm elementele listei s se poziioneze una dup alta
orizontal;
<a> - formatm hyperlink-urile s se afieze sub form de csu
(bloc) cu borduri stnga/dreapta formatate, cu o culoare pentru
fundal, cu anumii parametri pentru font i text aliniat centrat
Astfel, codul CSS care realizeaz formatarea noului meniu orizontal este
prezentat n continuare:
Iar drept rezultat avem meniul formatat orizontal prezentat n figura 5.1 de
mai jos:
Figura 5.1. Un meniu orizontal formatat doar prin cod CSS
- 33 -
Aici se poate observa avantajul major al limbajului CSS, care transform o

pagin HTML obinuit ntr-o experien de navigare plcut utilizatorului,
prin modificarea proprietilor elementelor.
2. Crearea i formatarea structurii unei pagini tip homepage prin

CSS, fr a utiliza tabele n HTML
Pentru uurarea procesului de navigare de ctre utilizatori pe un website,
prima pagin, denumit homepage, trebuie structurat pe seciuni, n
interiorul crora s se pun coninutul website-ului. De obicei, una din
seciuni conine meniul principal de navigare, iar o alt seciune, de
dimensiuni mai mari, afieaz coninut n funcie de opiunile alese din
meniu.
Structurarea (secionarea) unui site se poate realiza n cel puin trei moduri:
utiliznd un tabel HTML, secionarea fcndu-se cu ajutorul

celulelor:
Conform recomandrilor World Wide Web Consortium (W3C), tabelele ar

trebui utilizate numai pentru afiarea datelor n mod tabular i nu pentru
schema structural a unui site sau pentru poziionare.
folosind cadre cu elementul <FRAMESET>, ntr-un cadru se pune

meniul, iar n alt cadru coninutul afiat:
Dei metoda secionrii unui site prin cadre a fost larg utilizat, iat cteva
dezavantaje ale utilizrii ei:
o indexarea slab a site-ului n majoritatea motoarelor de
cutare, deoarece se indexeaz doar un frame la un moment
dat;
o frame-urile nu sunt prietenoase URL, deoarece toate paginile
mprtesc acelai URL;
o lipsa de suport pentru cadre la unele navigatoare web i
eliminarea elementelor <FRAMESET> i <FRAME> din
standardul HTML5/CSS3.
- 34 -
utiliznd seciuni cu elemente <DIV> i formatndu-le poziionarea

i dimensiunile cu ajutorul regulilor CSS:
Aceasta este cea mai des utilizat metod de structurare a unei scheme de
website, avnd multe avantaje n plus fa de metodele descrise anterior,
printre care flexibilitatea ridicat privind repoziionarea i redimensionarea
elementelor din site.
Secionarea se face conform unei structuri ierarhice ca cea din figura 5.2 de
mai jos, n care este prezentat un exemplu de structur.
CONTAINER
HEADER
MENU
CONTENT
FOOTER
Figura 5.2. Schema unui website
Structura HTML a schemei de website descris n figura 5.2 este

urmtoarea:
Pentru exemplificare vom utiliza aceast structur pentru a genera schema

unei pagini web avnd ca elemente: un header, un meniu vertical, o zon de
coninut i un footer.
Codul HTML care genereaz aceast pagin este urmtorul:
- 35 -
Iar codul CSS prin care se formateaz elementele paginii pentru afiarea
acesteia n mod mbuntit din punct de vedere structural este urmtorul:
- 36 -
Rezultatul afiat n browser este prezentat n figura 5.3, evideniindu-se clar

structura paginii web.
Figura 5.3. Exemplu de pagin web structurat prin seciuni DIV formatate
cu reguli CSS
3. Imagini sprite
O imagine sprite este o colecie de imagini asamblate ntr-o singur
imagine. O pagin web cu multe imagini se poate ncrca n browser ntr-un
timp ndelungat i genereaz cereri multiple ctre server.
- 37 -
Folosind imagini sprite se va reduce numrul de cereri ctre server i se va

salva i din banda de Internet utilizat.
Pentru exemplificare vom utiliza imaginea multipl din figura 5.4, care este
compus din 2 imagini.
Figura 5.4. O imagine compus din 2 imagini

componente
Utiliznd limbajul CSS putem afia doar partea de imagine care ne

intereseaz. n exemplul de mai jos (fig. 5.5) se afieaz separat fiecare
imagine component, separarea realizndu-se prin CSS.
Codul HTML
Afiare n browser
Codul CSS
Dup cum se poate observa din codul CSS, pentru a selecta imaginea din
partea de jos, s-a ales valoarea de -50px pentru poziia TOP a imaginii cu
- 38 -
clasa next2, browser-ul afind imaginea a doua ncepnd cu aceast

poziie ctre partea de jos.
III.
Modul de lucru
1. S se creeze o pagin web care s conin urmtoarele elemente
i formatri:
a. O schem a site-ului (layout) cu seciunile: header,
coloan stnga (lungime 20% din totalul paginii),
coloan mijloc (60%), coloan dreapta (20%), footer. S
se utilizeze doar seciuni DIV formatate cu CSS.
b. Un meniu vertical n coloana din stnga site-ului
asemntor celui din figura 5.3 n ceea ce privete
formatarea CSS.
c. 4 imagini una sub alta, provenite dintr-o singur imagine
ce le conine pe toate 4, n coloana din dreapta paginii
web. Extragerea fiecrei imagini se va realiza utiliznd
tehnica imaginilor sprite.
2. Pentru coloana din mijlocul paginii create la punctul 1 s se
insereze diverse elemente HTML i s se formateze aceste
elemente cu alte proprieti CSS neutilizate n lucrarea de
laborator. Utilizai ca surs de informare Internet-ul.
- 39 -

LUCRAREA NR. 6 :
Limbajul JAVASCRIPT Introducere, variabile, tipuri de date i
operatori
Tematica lucrrii
I.
1.
2.
3.
4.
Ce este JAVASCRIPT?
Variabile i tipuri de date n JavaScript
Operatori n JavaScript
Exemplu de program JavaScript
II.
1. Ce este JAVASCRIPT?
JAVASCRIPT reprezint cel mai utilizat limbaj de scripting pe

partea de client din reeaua Web.
Un limbaj de scripting este caracterizat prin simplitate n sintax i
descriere, fiind un limbaj de categorie uoar.
Limbajul JavaScript este utilizat n miliarde de pagini web,
adugnd dinamic n funcionalitate, validarea formularelor,
comunicarea cu servere i multe altele.
JavaScript este un limbaj uor de nvat, programele fiind inserate
n interiorul paginilor HTML i sunt interpretate i executate de ctre
navigatorul web (browser).
Un simplu exemplu const n afiarea unui mesaj de alert ntr-o fereastr

de dialog, utiliznd funcia alert( ).
Codul programului:
Afiarea n browser:
- 40 -
2. Variabile i tipuri de date n JavaScript

n limbajul JavaScript, variabilele se declar simplu, utiliznd cuvntul
rezervat var. Pentru a iniializa o variabil, aceasta trebuie urmat de
simbolul = i valoarea dorit pentru iniializare.
Exemplu:
De obicei, att variabilele ct i instruciunile programului sunt urmate de
simbolul ; . Dac o variabil nu este iniializat, aceasta va primi valoarea
undefined (nedefinit).
Tipuri de date
Principalele tipuri de date definite de JavaScript sunt:
STRING, ir de caractere;
NUMBER, numr;
BOOLEAN, bolean (valori adevrat sau fals);
ARRAY, vector de elemente de orice tip;
OBJECT, obiect cu proprieti de orice tip;
NULL, tipul de date nul;
UNDEFINED, tipul de date nedefinit.
n tabelul 6. 1 sunt descrise aceste tipuri de date, alturi de exemple

corespunztoare.
Tabelul 6.1. Tipuri de date definite implicit n JavaScript, cu exemple.
- 41 -
Tipul de date
Exemple
STRING
NUMBER
BOOLEAN
ARRAY
OBJECT
NULL
UNDEFINED
n limbajul JavaScript se poate declara tipul unei variabile o dat cu

declararea acesteia, utiliznd cuvntul rezervat new, ca n exemplul
urmtor:
- 42 -
Toate variabilele JavaScript reprezint obiecte. Cnd se declar o variabil,

n fapt se creeaz un nou obiect.
OBIECTELE limbajului JavaScript

Obiectul este o structur de date avnd proprieti i metode. Proprietile
sunt trsturi ale obiectului, asociindu-li-se valori, iar metodele reprezint
aciuni ale obiectului.
Exemplu, pentru obiectul persoana se pot defini urmtoarele proprieti i
metode:
Proprieti
Metode
Accesul la proprietile i metodele unui obiect JavaScript se realizeaz prin

operatorul de referin, simbolul punct . , astfel:
numeObiect . numeProprietate
numeObiect . numeMetoda( )
Exemplu de folosire i afiare n browser:
Obiectul DOCUMENT
Este unul din cele mai importante obiecte utilizate n JavaScript.
- 43 -
Orice pagin web HTML ncrcat ntr-un navigator web devine un obiect
de tip document. Proprietile i metodele obiectului document sunt listate n
tabelul 6.2 i 6.3, respectiv, de mai jos.
Obiectul de tip document ofer accesul la toate elementele HTML coninute
n pagina web respectiv, utiliznd un script.
Tabelul 6.2. Proprietile obiectului DOCUMENT
Proprietatea
Descrierea
anchors
Returneaz o list cu toate ancorele din document
applets
Returneaz o colecie cu toate applet-urile
body
Returneaz elementul body al documentului
cookie
Returneaz toate perechile nume/valoare ale cookieurilor din document
domain
Returneaz numele de domeniu al serverului care a

ncrcat documentul
forms
Returneaz lista cu toate formularele din document
images
Returneaz o colecie cu toate imaginile din document
links
Returneaz lista tuturor link-urilor din document
referrer
Returneaz adresa URL a documentului care a ncrcat

pagina curent
title
Seteaz sau returneaz titlul documentului
URL
Returneaz adresa ntreag URL a documentului

Tabelul 6.3. Metodele obiectului DOCUMENT
Metoda
Descrierea
open()
Deschide un flux de ieire (output stream)

pentru a culege ieirea generat de metodele
document.write() sau document.writeln()
close()
nchide fluxul de ieire deschis anterior prin

metoda document.open()
- 44 -
getElementsByName()
Acceseaz toate elementele cu un nume

specificat n atributul name
write()
Afieaz ntr-un document expresii HTML

sau cod Javascript executat
writeln()
La fel ca la metoda write(), n plus

adugndu-se un caracter de linie nou dup
fiecare instruciune
Limbajul JavaScript deine o colecie mare de obiecte implicite, descrierea

lor putnd fi accesat prin consultarea referinelor bibliografice de la finalul
ndrumarului de laborator.
3. Operatori n JavaScript
n limbajul JavaScript, operatorii se mpart n urmtoarele categorii:
aritmetici, de atribuire, de comparaie, logici i condiionali.
operatori aritmetici:
Tabelul 6.3. Operatorii aritmitici n JavaScript.
Operator
Descriere
adunare
scdere
nmulire
mprire
modulo (restul mpririi)
++
incrementare
--
decrementare
operatori de atribuire, combinai cu cei aritmiteci:

Tabelul 6.4. Operatorii de atribuire n JavaScript.
- 45 -
Operator
Exemplu
Efect
x=y
+=
x+=y
x=x+y
-=
x-=y
x=x-y
*=
x*=y
x=x*y
/=
x/=y
x=x/y
%=
x%=y
x=x%y
Not
Operatorul + aplicat asupra irurilor de caractere (string) are funcia de
concatenare. Adunarea ntre un numr i un ir de caractere are ca rezultat
tot un ir de caractere.
operatori de comparaie:
Tabelul 6.5. Operatorii de comparaie n Javascript.
Operator
Descriere
==
egalitate
===
egalitate exact (valoare i tip de date)
!=
inegalitate
!==
inegalitate (valoare i tip de date)
>
mai mare
<
mai mic
>=
mai mare sau egal
<=
mai mic sau egal
operatori logici:
Tabelul 6.6. Operatorii logici n JavaScript
- 46 -
Operator
Descriere
Example
&&
I logic
(x<10 && y>1)
||
SAU logic
(x==5 || y==5)
NEGAIE logic
!(x==y)
operatorul condiional (operatorul ternar):
Limbajul JavaScript conine, de asemenea, un operator condiional, numit i

ternar, care atribuie o valoare unei variabile n baza ndeplinirii unei
condiii.
Sintax:
Exemplu:
4. Exemplu de program JavaScript

Inserarea de coduri JavaScript n interiorul documentelor HTML se
realizeaz prin utilizarea elementului <SCRIPT>, astfel:
Ca i la limbajul CSS, scripturile JavaScript se pot ncrca i din exterior,

prin fiiere cu extensia .js, precizndu-se sursa fiierului n atributul
src, n modul urmtor:
n exemplul urmtor se folosete JavaScript pentru:
setarea culorii textului unui paragraf i a fundalului unei csue DIV;

afiarea ceasului calculatorului, utiliznd un obiect de tip Date().
Codul HTML i JavaScript:
- 47 -
Afiarea documentului n browser:
III.
Modul de lucru
1. S se creeze o pagin HTML care s conin elementele urmtoare:
2 paragrafe, o imagine i un tabel de 3x3.
2. S se creeze un script JavaScript care s realizeze urmtoarele:
s interschimbe textele din cele dou paragrafe;
s poziioneze imaginea la dreapta paginii;
s seteze bordura tabelului cu grosimea de 1px, culoare verde
i fundalul celulelor de culoare portocalie;
s afieze ziua, data i ora curent.
3. Creai un script care s execute urmtoarele operaii aritmetice:
adunare, scdere, nmulire, mprire, modulo, incrementare
i decrementare;
- 48 -
calculul minimului dintre 3 numere oarecare. Numerele pot fi

introduse n csue text.
- 49 -

LUCRAREA NR. 7 :
Limbajul JAVASCRIPT Instruciuni, funcii predefinite i
funcii definite de utilizator
Tematica lucrrii
I.
1. Instruciuni n JavaScript
2. Funcii predefinite ale limbajului JavaScript
3. Funcii definite de utilizator
II.
1. Instruciuni n JavaScript
Categoriile de instruciuni ale limbajului JavaScript sunt: condiionale, de
ciclare i de salt.
a) instruciuni condiionale:
Instruciunile condiionale JavaScript sunt:
instruciunea IF se execut un set de instruciuni numai dac este

ndeplinit (adevrat) o condiie:
instruciunea IF...ELSE se execut un prim set de instruciuni

dac condiia este adevrat i un al doilea set de instruciuni dac
condiia este fals.
- 50 -
instruciunea IF...ELSE IF...ELSE dac condiia este adevrat

se execut un set de instruciuni din mai multe posibile.
instruciunea SWITCH dac condiia este adevrat se execut

un set de instruciuni din mai multe posibile. Diferena fa de
instruciunea de mai sus const n sintaxa de scriere.
Exemplu de script care afieaz n pagina web ziua curent:

- 51 -
b) instruciuni de ciclare:
Instruciunile de ciclare prezente n JavaScript sunt:
instruciunea FOR cicleaz un bloc de instruciuni de un numr

de ori specificat att timp ct o condiie este adevrat:
instruciunea 1 se execut naintea blocului de instruciuni.

conditie definete condiia de rulare a blocului de instruciuni.
instruciunea 2 se execut dup fiecare rulare a blocului de
instruciuni.
Exemplu:
- 52 -
Rezultatul afiat n navigatorul web este:
instruciunea FOR/IN cicleaz prin proprietile unui obiect:
Exemplu:
Afiare n browser:
instruciunea WHILE cicleaz (executnd) un set de instruciuni

att timp ct o condiie este adevrat:
Exemplu:
- 53 -
Afiare n navigatorul web este aceeai ca i la ciclul FOR.
instruciunea DO/WHILE la fel ca i la instruciunea WHILE,

diferena constnd n faptul c la instruciunea DO/WHILE blocul de
instruciuni se execut cel puin o dat:
Exemplu:
Afiare n navigatorul web este aceeai ca i la ciclul FOR sau WHILE.

c) instruciuni de salt:
Instruciunile de salt utilizate n limbajul JavaScript sunt:
instruciunea BREAK ntrerupe o bucl (ciclu) n execuie,

transfernd execuia ctre prima instruciune de dup bucl:
Exemplu:
- 54 -
Afiarea se va opri la pasul n care i=2, astfel rezultnd:
instruciunea CONTINUE ntrerupe o singur iteraie din ciclu,

pentru o condiie specificat i continu execuia buclei cu
urmtoarea iteraie:
Exemplu:
Se vor afia toate valorile cu excepia pasului pentru care i=3, rezultnd:
Not:
instruciunea CONTINUE (cu sau fr referin la o etichet) poate

fi utilizat numai n cadrul unei bucle condiionale.
instruciunea BREAK, fr referin la o etichet, poate fi utilizat
numai ntr-un ciclu condiional sau SWITCH. Cu referin la o
etichet, instruciunea BREAK poate fi folosit pentru a iei din
execuia oricrui bloc de instruciuni JavaScript.
- 55 -
Exemplu:
Din tot vectorul zile se vor afia numai primele trei, deoarece
instruciunea break lista va ntrerupe blocul reprezentat de eticheta lista ,
dup pasul n care i=2, rezultnd:
Comentarii n JavaScript
Comentariile pot fi adugate pentru a explica codul JavaScript, sau pentru al face mai lizibil. Comentariile se pot defini n dou moduri:
comentariu pe o linie, utiliznd setul de caractere // (dublu slash):
Acesta va ignora linia de cod comentat, n procesul de execuie. Exemplu:
comentariu pe mai multe linii, utiliznd perechea /* , */ :
n acest caz, se vor ignora la execuie toate liniile de cod din interiorul
grupului de caractere /*, */. Exemplu:
n editoarele moderne, care permit colorarea codului, de obicei, comentariile

sunt de culoare verde.
- 56 -
Cel mai des, comentariile sunt utilizate pentru explicarea codului scris.
Exemplu:
2. Proprieti i funcii (metode) predefinite ale limbajului JavaScript

Proprietile i funciile predefinite din JavaScript sunt cele coninute de
obiectele predefinite ale limbajului. Aceste obiecte sunt ncadrate n trei
categorii:
a) obiectele JavaScript
b) obiectele navigatorului (browser-ului)
a) Obiectele JavaScript sunt urmtoarele:
obiectul Array
Proprieti: constructor, length, prototype

Metode: concat, indexOf, join, lastIndexOf, pop, push, reverse, shift, slice,
sort, splice, toString, unshift, valueOf

Exemplu de utilizare a funciilor concat(), push(), sort() i a proprietii
length:
Afiare n browser:
- 57 -
obiectul Date
Proprieti: constructor, prototype

Metode: getDate, getDay, getFullYear, getHours, getMilliseconds,
getMinutes, getMonth, getSeconds, getTime, getTimezoneOffset,

getUTCDate, getUTCDay, getUTCFullYear, getUTCHours,
getUTCMilliseconds, getUTCMinutes, getUTCMonth, getUTCSeconds,
parse, setDate, setFullYear, setHours, setMilliseconds, setMinutes,
setMonth, setSeconds, setTime, setUTCDate, setUTCFullYear,
setUTCHours, setUTCMilliseconds, setUTCMinutes, setUTCMonth,
setUTCSeconds, toDateString, toISOString, toJSON, toLocaleDateString,
toLocaleTimeString, toLocaleString, toString, toTimeString,
toUTCString, UTC, valueOf
Exemplu de afisare a datei curente si a ceasului calculatorului n timp real:
- 58 -
Afiare n browser:
obiectul Math
Proprieti: E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT2

Metode: abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, max, min,
pow, random, round, sin, sqrt, tan

Exemplu de calculare a valorilor funciei Sinus pentru unghiurile 0, 300, 450,
600 i 900:
- 59 -
Afiare n browser:
obiectul Number
Proprieti: constructor, MAX_VALUE, MIN_VALUE,
NEGATIVE_INFINITY, NaN, POSITIVE_INFINITY, prototype

Metode: toExponential, toFixed, toPrecision, toString, valueOf
Un exemplu n care un numr este convertit n notaie exponenial:
- 60 -
Rezultatul afiat n browser:
obiectul String
Proprieti: constructor, length, prototype
charAt, charCodeAt, concat, fromCharCode, indexOf,

lastIndexOf, match, replace, search, slice, split, substr, substring,
toLowerCase, toUpperCase, valueOf
Metode:
Alte metode ce returneaz string-uri formatate din diverse elemente HTML:
anchor, big, blink, bold, fixed, fontcolor, fontsize, italics, link, small,
strike, sub, sup
n exemplul urmtor aplicm prin cod JavaScript diverse formatri asupra
unui text:
Rezultatul afiat n navigatorul web:
- 61 -
obiectul RegExp
O expresie regulat este un obiect care descrie un ablon (pattern) de

caractere. Expresiile regulate sunt utilizate la efectuarea de funcii cum ar fi
pattern-matching (potrivire pe ablon) i search-and-replace (cutare i
nlocuire).
Sintaxa:
ablonul (pattern) indic modelul, tiparul unei expresii

modificatorii (modifiers) specific dac o cutare trebuie fcut
global, case-sensitive, etc.
Proprieti: global, ignoreCase, lastIndex, multiline, source

Metode: compile, exec, test
Exemplul urmtor caut mai nti litere majuscule i le nlocuiete cu litera
Y, iar apoi caut cifrele i le nlocuiete cu caracterul #:
- 62 -
Rezultatul afiat n browser:
Pe lng acestea, mai exist proprieti i metode JavaScript globale.

Proprieti globale: Infinity, NaN, undefined
decodeURI, decodeURIComponent, encodeURI,

encodeURIComponent, escape, eval, isFinite, isNaN, Number,
parseFloat, parseInt, String, unescape
Metode
globale:
n exemplul care urmeaz, testm funcia EVAL:
Iar rezultatul execuiei codului n browser-ul web este:
n afar de toate aceste obiecte, JavaScript mai conine:

b) obiectele navigatorului (browser-ului) sunt urmtoarele:
- 63 -
Window
Navigator
Screen
History
Location
3. Funcii definite de utilizator

Pentru definirea unei funcii de ctre utilizator, sintaxa este urmtoarea:
Apelul se poate face fie n cadrul codului JavaScript, fie utiliznd

evenimente de tipul onclick , onmouseover etc.
Exemplu de funcie care afieaz un mesaj de alert ntr-o fereastr:
Rezultatul afiat n browser este urmtorul:
- 64 -
III.
Modul de lucru
Utiliznd cele nvate n lucrarea de laborator, s se creeze urmtoarele

script-uri.
1.
2.
3.
4.
Calculul sumei numerelor de la 1 la 100.

Calculul primelor 10 numere prime.
Calculul primelor 10 puteri ale lui 2 .
Calculul vrstei dvs., aproape exacte scznd din data curent data
naterii.
5. Afiarea denumirii zilei curente.
6. Afiarea unui text n deplasare orizontal sau vertical utiliznd
strict metode ale obiectelor STRING sau ARRAY.
7. Cutarea n cadrul unui text a literelor d, f i t.
- 65 -

LUCRAREA NR. 8 :
Limbajul JAVASCRIPT i modelul DOM Crearea paginilor
dinamice utiliznd limbajul JavaScript i DOM
I.
Tematica lucrrii
1. Modelul DOM (Document Object Model)
2. Formatarea elementelor HTML utiliznd limbajul JavaScript i
modelul DOM
II.

1. Modelul DOM (Document Object Model)
Conform World Wide Web Consortium (W3C), Document Object Model

reprezint un model orientat obiect, cross-platfrom i independent de limbaj,
o interfa gen API care permite scripturilor s realizeze n mod dinamic
accesarea i actualizarea coninutului, structurii i stilului documentelor.
Astfel, rezultatul unui document procesat cu modelul DOM poate fi
incorporat napoi n pagina curent.
Utiliznd modelul DOM, JavaScript poate accesa toate elementele dintr-un
document HTML.
Atunci cnd o pagin web este ncrcat, browser-ul creaz o structur
DOM a paginii respective. Structura DOM este construit ca un arbore de
obiecte, ca n figura 8.1:
- 66 -
Figura 8.1. Arborele DOM al unui document HTML
Avnd acest model obiect programabil, JavaScript are tot ce-i trebuie pentru
a crea pagini HTML dinamice:
JavaScript poate modifica toate elementele HTML dintr-o pagin

JavaScript poate modifica toate atributele HTML dintr-o pagin
JavaScript poate modifica toate stilurile CSS dintr-o pagin
JavaScript poate reaciona la toate evenimentele din pagina web.
Accesarea elementelor HTML

Se poate realiza n trei moduri:
dup ID-ul unui element

dup numele etichetei unui element
dup numele clasei unui element (fr efect n IE 5, 6, 7 i 8).
2. Formatarea elementelor HTML utiliznd limbajul JavaScript i

modelul DOM
a) Modificarea coninutului unui element HTML
- 67 -
Sintaxa:
Exemplu:
Rezultatul execuiei n browser arat astfel:

Prima afiare
A doua afiare
b) Modificarea atributelor unui element HTML

Sintaxa:
Exemplu, n care se modific sursa unei imagini:
Iar execuia codului este urmtoarea:

- 68 -
Prima afiare
A doua afiare
c) Modificarea stilului CSS al unui element HTML

Sintaxa:
n exemplul urmtor se vor schimba proprietile CSS ale unui paragraf

pentru culoarea, familia i dimensiunea fontului:
Iar rezultatul afiat n browser-ul web este:

Prima afiare
A doua afiare
- 69 -
d) Evenimente HTML DOM - JavaScript

HTML DOM permite limbajului JavaScript s reacioneze la evenimentele
HTML. Astfel, la declanarea unui eveniment, cum ar fi un clic de mouse,
se poate executa un cod JavaScript.
Example de evenimente HTML:
Cnd un utilizator apas un buton al mouse-ului

Cnd s-a ncrcat pagina web
Cnd s-a ncrcat o imagine
Cnd mouse-ul gliseaz deasupra unui element
Cnd se modific un cmp de introducere date
Cnd este trimis un formular spre procesare
Cnd utilizatorul apas o tast de la tastatur
Spre exemplificare prezentm un script prin care se verific dac cookieurile navigatorului sunt activate sau nu, la ncrcarea paginii, prin tratarea
evenimentului onload:
Afiarea const ntr-un mesaj alert, ca cel de mai jos:
- 70 -
III.
Modul de lucru
1. S se creeze un document HTML cu elementele: paragraf, imagine,
tabel, list.
2. S se modifice utiliznd limbajul JavaScript i modelul DOM
atributele elementelor din pagina creat la punctul 1.
3. S se creeze un script prin care, atunci cnd se gliseaz mouse-ul
deasupra unei celule din tabel, culoarea de fundal a acesteia s se
modifice automat.
4. S se creeze un script care s trateze ct mai multe evenimente
HTML.
- 71 -

LUCRAREA NR. 9 :
Limbajul PHP Introducere, variabile, tipuri de date. Exemple
primare
I.
Tematica lucrrii
1.
2.
3.
4.
II.
Ce este PHP?
Instalarea PHP
Variabile PHP
Operatori PHP

1. Ce este PHP?
PHP este prescurtarea de la PHP: Hypertext Preprocessor. La

nceputul dezvoltrii limbajului acronimul venea de la Personal
Home Page.
PHP este un limbaj de scripting open source foarte rspndit
Scripturile PHP ruleaz pe server, fa de cele JavaScript care
sunt executate de ctre navigatoarelel web
PHP se descarc i se utilizeaz n mod gratuit
Fiiere PHP
Fiierele PHP pot conine text, elemente HTML, cod JavaScript

i cod PHP
Codul PHP este executat pe server, iar rezutatul este returnat
ctre browser sub form de HTML
Fiierele PHP au extensia implicit .php
- 72 -
Avantajele limbajului PHP
PHP ruleaz pe o varietate de platforme (Windows, Linux, Unix,

Mac OS X, etc.)
PHP este compatibil cu aproape toate serverele web de astzi
(Apache, IIS, etc.)
PHP poate genera coninut dinamic n paginile web
PHP poate crea, deschide, citi, scrie i nchide orice fiier de pe
server
PHP poate colecta date din formularele HTML
PHP poate trimite i primi cookie-uri
PHP are suport pentru pentru o gam larg de baze de date,
putnd aduga, terge sau modifica datele dintr-o baz de date
PHP poate restriciona accesul unor utilizatori la anumite pagini
dintr-un website
PHP poate cripta date
PHP is free. Download it from the official PHP resource:
www.php.net
PHP is easy to learn and runs efficiently on the server side
2. Instalarea PHP
PHP este gratuit i se poate descrca de pe site-ul oficial de resurse PHP:
www.php.net .
Pentru instalarea extensiei PHP este necesar existena n prealabil a unui
server web (Apache, IIS etc.) instalat. De asemenea, pentru a putea accesa
baze de date, este obligatorie instalarea i a unui server de baze de date
(DBMS Database Management System, Sistem de gestiune a bazelor de
date) cum ar fi MySQL, MS SQL Server, PostgreSQL etc.
Pentru uurina utilizatorului care dorete s nvee ct mai repede limbajul
PHP, fr s se ncurce n detaliile instalrii pas cu pas a serverului web i a
extensiilor sale, s-au pus la dispoziia publicului pachete complete care
- 73 -
instaleaz automat toate cele 3 componente: Apache, MySQL i PHP; de

unde i acronimul des utilizat, AMP.
Exemple de astfel de pachete sunt:
XAMPP: http://www.apachefriends.org/en/xampp.html . Pachetul

are versiuni pentru orice sistem de operare i, pe lng setul AMP,
mai vine i cu extensia Perl, de aici i ultimul P din denumire.
WampServer: http://www.wampserver.com/en/ . Pachet AMP

dedicat platformei Windows (de aici i acronimul WAMP).
EasyPHP WebServer: http://www.easyphp.org/ . Pachet AMP

dedicat instalrii unui server web complet pe platforma Windows.
Unele dintre aceste pachete conin i alte instrumente software foarte

utilizate (server mail - hMailServer, client/server FTP FileZilla, etc.), iar
toate aceste pachete au inclus un instrument web-based larg utilizat pentru
gestiunea bazelor de date MySQL, denumit
PhpMyAdmin
(http://www.phpmyadmin.net/ ).
Dup ce se instaleaz serverul AMP preferat, utiliznd fiierul de instalare
inclus n fiecare pachet, fiierele website-urilor sunt puse pe directoare n
folderul numit HTDOCS sau WWW al serverului web.
Spre exemplu, n cazul instalrii WampServer-ului, structura de directoare
este cea din figura 9.1.
Fig. 9.1. Structura de directoare a pachetului WampServer

- 74 -
Pentru a putea fi afiat corespunztor n browser, orice website trebuie s

conin un fiier de lansare, denumit INDEX, cu extensia .html sau
.php, fiier care trebuie s conin structura paginii de start a website-ului.
Se lanseaz serverul web instalat pe PC-ul local, iar pentru accesarea paginii
de start a serverului se scrie n bara de adrese URL a browser-ului cuvntul
localhost. Aceasta deoarece PC-ul local are adresa IP 127.0.0.1, cruia i
este alocat numele localhost.
Exemplu:
sau
La lansare se va afia rezultatul execuiei scriptului index.php din rdcina

serverului web instalat.
Pentru execuia unui singur script, spre exemplu test.php se scrie n bara de
adrese:
Structura unui fiier (script) PHP

Fiierele PHP pot conine text, elemente HTML, cod JavaScript i cod PHP.
Un script PHP ncepe cu <?php i se termin cu ?>, astfel:
Comentariile sunt definite asemntor ca n JavaScript, pentru o linie se

folosete // (dublu-slash), iar pentru mai multe linii se folosete setul de
caractere /* */ .
Un exemplu de fiier PHP este prezentat mai jos, n care apar comentarii i
funcia phpinfo():
- 75 -
Iar rezultatul parial al execuiei scriptului arat n browser astfel (fig. 9.2):
Figura 9.2. Afiare parial a funciei phpinfo()
3. Variabile PHP
Variabilele reprezint containere de stocat informaii.
Reguli de scriere a variabilelor PHP:
o variabil ncepe cu simbolul $, urmat de numele variabilei.

numele unei variabile ncepe obligatoriu cu o liter sau cu caracterul
underscore, _ .
- 76 -
numele variabilelor pot conine doar caractere alfa-numerice i

underscore (A-z, 0-9, i _ ) i nu va conine spaii goale.
numele de variabile sunt case-sensitive ($y i $Y sunt dou variabile
diferite).
Exemple de declarare a dou variabile PHP, un string (ir de caractere) i un

numr.
Din exemplu se poate observa, ca i la JavaScript, c limbajul PHP nu are

definire explicit a tipurilor de date, ci convertete automat o variabil n
tipul corect de date n funcie de valoarea asignat.
Domeniile de vizibilitate (accesibilitate) ale variabilelor PHP sunt:
local
global
static
parametru (argument)
Exemplu n care sunt prezentate toate domeniile de vizibilitate:
- 77 -
4. Operatori PHP
Ca n majoritatea limbajelor de programare i PHP deine o gam
diversificat de operatori, n mare parte asemntori cu cei din limbajele
adiacente (C/C++, JAVA, JavaScript etc.).
Tabelul 9.1. Operatori aritmetici n PHP
Operator
Descriere
x+y
Adunare
x-y
Scdere
x*y
nmulire
x/y
mprire
x%y
Modulo
-x
Negaie
a.b
Concatenare string-uri
Tabelul 9.2. Operatori de atribuire n PHP

Atribuire
Efect
x=y
x=y
x += y
x=x+y
x -= y
x=x-y
x *= y
x=x*y
x /= y
x=x/y
x %= y
x=x%y
a .= b
a=a.b
Tabelul 9.3. Operatori de incrementare/decrementare n PHP

Operator Name
++ x
Pre-incrementare
Description
Incrementeaz pe x cu 1, apoi
- 78 -
l returneaz
x ++
Post-incrementare
Returneaz pe x, apoi l
incrementeaz cu 1
-- x
Pre-decrementare
Decrementeaz pe x cu 1, apoi
l returneaz
x --
Post-decrementare
Returneaz pe x, apoi l
decrementeaz cu 1
Tabelul 9.4. Operatori de comparaie n PHP

Operator
Descriere
x == y
Egalitate
x === y
Egalitate (valoare i tip

de date). Identitate
x != y
Inegalitate. x diferit de y
x <> y
Inegalitate. x diferit de y
x !== y
Inegalitate (valoare i tip

de date)
x>y
Mai mare
x<y
Mai mic
x >= y
Mai mare sau egal
x <= y
Mai mic sau egal
Tabelul 9.5. Operatori logici n PHP

Operator
x and y
Descriere
I logic
x or y
SAU logic
x xor y
SAU exclusiv
x && y
I logic
- 79 -
x || y
!x
SAU logic
NOT (negaie)
logic
Tabelul 9.6. Operatori pentru vectori (array) n PHP

Operator
Name
x+y
Uniune (union)
x == y
Egalitate n perechi
cheie/valoare
x === y
Identitate n perechi
cheie/valoare i tip date
x != y
Inegalitate n perechi
cheie/valoare
x <> y
cheie/valoare
x !== y
cheie/valoare i tip date
n exemplul urmtor se definesc dou variabile $x i $y, asupra crora se

aplic operatorii: +, -, *, /, ++, --. Pentru afiare s-a utilizat instruciunea
echo, care tiprete n fereastra navigatorului un anume coninut.
- 80 -
Rezultatul execuiei scriptului fiind urmtorul:
III.
Modul de lucru
1. S se descarce i s se instaleze un pachet WAMP, la preferina
fiecruia.
2. S se creeze un folder myphp n care s inserai un fiier index.php
care s conin urmtoarele:
a. un header H2 cu textul Invatam PHP!, o linie orizontal,
un paragraf oarecare.
b. 3 variabile: a=Mihai, b=Soare, c=student.
c. Afiarea mesajului Mihai Soare este student la
Automatica.
- 81 -
d. 2 variabile: m=40, n=20. Aplicai diveri operatori asupra

celor 2 variabile m i n.
3. Plasai folder-ul myphp n rdcina directoarei de documente a
serverului web, htdocs sau www i lansai website-ul, scriind n bara
de adrese a browser-ului web urmtorul text, apoi apsai tasta Enter:
- 82 -

LUCRAREA NR. 10 :
Limbajul PHP Instruciuni, funcii predefinite i funcii definite
de utilizator, sesiuni PHP
Tematica lucrrii
I.
1.
2.
3.
4.
Instruciuni PHP
Funcii predefinite ale limbajului PHP
Funcii definite de utilizator n PHP
Sesiuni PHP
II.
1. Instruciuni PHP
a) INSTRUCIUNI CONDIIONALE
n limbajul PHP exist urmtoarele instruciuni condiionale:
instruciunea if execut un cod numai dac o condiie este

ndeplinit (adevrat)
Sintax:
Exemplu:
- 83 -
instruciunea if...else - execut un cod o condiie este adevrat i

un alt set de instruciuni dac condiia este fals
Exemplu:
instruciunea if...else if....else selecteaz unul din mai multe seturi

de instruciuni pentru a fi executat
Sintaxa:
- 84 -
Exemplu:
instruciunea switch - selecteaz unul din mai multe seturi de

instruciuni pentru a fi executat
Sintaxa:
- 85 -
Exemplu:
b) INSTRUCIUNI DE CICLARE
Limbajul PHP conine urmtoarele instruciuni de ciclare:
instruciunea while cicleaz executnd un set de instruciunii ct

timp o condiie este adevrat
Sintax:
- 86 -
Exemplu:
Afiarea n fereastra navigatorului este:
instruciunea do...while execut o dat un set de instruciuni, apoi

repet execuia ct timp o condiie este adevrat
Sintaxa:
Exemplu:
- 87 -
instruciunea for cicleaz executnd un set de instruciuni timp de

un numr de ori specificat
Sintaxa:
Parametri:
-
init: de obicei, iniializarea unui contor (dar poate fi orice cod de

executat naintea nceperii buclei).
conditie: se evalueaz la fiecare iteraie. Dac este addevrat, bucla
continu, iar dac este fals ciclul execuiei se oprete.
increment: de obicei, incrementarea unui contor (dar poate fi orice
cod de executat la sfritul fiecrei iteraii).
Parametrii init i conditie pot s lipseasc din instruciune sau pot avea
expresii multiple, separate prin virgul.
Exemplu:
instruciunea foreach cicleaz execuia unui set de instruciuni

pentru fiecare element dintr-un vector (array)
Sintaxa:
- 88 -
Exemplu:
Afiare
Cod PHP
2. Funcii predefinite ale limbajului PHP

Principalele categorii de funcii predefinite (built-in) ale limbajului PHP
sunt:
funcii Array
funcii Calendar
funcii Date
funcii Directory
funcii Error
funcii Filesystem
funcii Filter
funcii FTP
funcii HTTP
funcii LibXML
funcii Mail
funcii Math
funcii Misc
funcii MySQLi
funcii SimpleXML
- 89 -
funcii String
funcii XML Parser
funcii Zip
Limbajul PHP este larg utilizat datorit competitudinii sale privind
dezvoltarea de aplicaii web pentru orice domeniu de cercetare i dezvoltare.
Pentru a mplini acest deziderat, dezvoltatorii limbajului au conceput un
numr foarte mare de funcii, care s rezolve problemele utilizatorilor i
dezvoltatorilor de aplicaii web.
Spre exemplu, numai n categoria Array exist 77 de funcii (sursa:
www.php.net ).
Deoarece nu pot fi aprofundate toate funciile limbajului, se vor prezenta
exemple pentru funcii larg utilizate n aplicaiile web.
Funcii ARRAY
Vom folosi pentru afiarea tablourilor (uni/multi-dimensionale) o funcie
print_r() puin modificat, pentru un aspect mbuntit al rezultatelor
afiate n fereastra navigatorului web. Funcia o vom numi print_r2() i are
definiia urmtoare:
De asemenea, pentru afiarea sub form de list a unui vector, vom defini o
funcie utilizator, denumit echo_r(), avnd forma:
- 90 -
Exemplu de sortare a unui vector (tablou unidimensional, array) de

elemente n ordine ascendent (alfabetic sau numeric):
Afiare
Cod PHP
Exemplu pentru definirea unui tablou multidimensional, cu 3 coloane.

Elementele tabloului sunt numere generate aleator cu funcia rand():
- 91 -
n browser se va afia un tabel de 3 coloane i mai multe linii, celulele fiind

completate cu valori generate aleator:
- 92 -
Exemplu de utilizare a funciilor array_push() i array_pop(), prima

insereaz elemente noi automat n tablou, cealalt elimin doar ultimul
element din tablou:
Afiare
Cod PHP
Funcii DATE
- 93 -
n aceast categorie sunt funciile de prelucrare a datelor calendaristice i a

timpilor de ceas.
O funcie des utilizat este date(). Exemplu multiplu pentru funcia date():
n fereastra browser-ului se va afia:
Un alt exemplu n care aflm cte zile au trecut de la o anumit dat (de
exemplu, de la nceputul anului):
Iar rezultatul afiat n browser este:
Funcii DIRECTORY
Aceste funcii permit preluarea de informaii privitoare la directoare i
coninutul acestora.
- 94 -
Spre exemplificare, citim coninutul unui director de imagini, images i l

afim pe ecran:
Afiare
Cod PHP
Funcii FILESYSTEM
Aceste funcii permit gestionarea sistemului de fiiere. Se pot crea fiiere,
terge, deschide, actualiza, nchide etc.
n exemplul urmtor, deschidem un fisier existent i adugm un mesaj la
sfritul lui:
- 95 -
Funcii MATH
Funciile matematice pot prelucra att valori ntregi, ct i valori reale.
Pentru exemplificare prezentm un script care returneaz valorile funciilor
Sinus i Cosinus pentru unghiurile 0, 30, 45, 60 i 90:
- 96 -
Rezultatul afiat n fereastra browser-ului va arta astfel:
Funcii STRING
Funciile STRING sunt unele din cele mai utilizate funcii PHP. Ele permit
prelucrarea irurilor de caractere (strings) n mai multe feluri.
Exemplu de funcie care caut un subir ntr-un ir dat, specificnd
delimitatoare de nceput i sfrit:
- 97 -
Vom mai prezenta n alt lucrare de laborator funcii MySQL, foarte

utilizate i utile n prelucrarea informaiilor dintr-o baz de date.
3. Funcii definite de utilizator n PHP

Pe lng funciile predefinite ale PHP, dezvoltatorii de aplicaii i pot defini
propriile funcii utilizator, care uureaz mult organizarea codului PHP.
Sintaxa:
Spre exemplificare, prezentm o funcie recursiv():
Rezultatul afiat n browser este: 5 6 7 8 9.

- 98 -
4. Sesiuni PHP
O sesiune reprezint o modalitate prin care PHP reine informaii de la o
pagin la alta.
Odat cu iniializarea unei sesiuni, utilizatorul poate pstra anumite
variabile, chiar dac n continuare viziteaz i alte pagini ale website-ului. n
principiu informaia se pstreaz pn la nchiderea browser-ului, sau pn
cnd utilizatorul distruge n mod intenionat sesiunea PHP curent.
Sesiunile PHP genereaz un id unic (UID) pentru fiecare vizitator i
memoreaz variabile pe baza acestui UID. ID-ul unic fie se salveaz ntr-un
cookie, fie se propag n adresa URL.
nainte de a memora viariabilele n sesiunea PHP, aceasta trebuie pornit,
proces realizat de funcia session_start(), care obligatoriu trebuie s fie
poziionat naintea etichetei <HTML>.
Un exemplu de script PHP care pstreaz ntr-o sesiune o variabil n care
se contorizeaz de cte ori este vizualizat pagina curent. Funcia isset()
este larg utilizat n PHP, folosindu-se la testarea dac o variabil este
setat. la afiare, variabila views poate avea o valoare diferit de cea de mai
jos, n funcie de cte ori s-a accesat pagina web.
Afiare
Cod PHP
Terminarea unei sesiuni se realizeaz n dou moduri:
utiliznd funcia unset(), care iniializeaz (golete) o variabil

memorat n sesiune:
- 99 -
III.
apelnd funcia session_destroy(), care distruge complet sesiunea:
Modul de lucru
1. Creai un script PHP n care s nmulii dou matrici (3x3), utiliznd
tablou (array) 3-dimensional.
2. S se scrie un script PHP care s calculeze vrsta dvs. n luni,
sptmni, zile i ore.
3. S se creeze un script PHP care s calculeze primele 10 puteri ale lui
2 i s le converteasc n HEXA.
4. Creai un script PHP n care s folosii ct mai multe funcii
STRING (concatenare, split, explode, implode, join, substr etc...).
5. S se scrie un script n care s ordonai un ir dezordonat. Memorai
variabilele temporare ntr-o sesiune PHP.
6. Utilizai pentru toate scripturile ct mai multe funcii definite de
utilizator.
- 100 -

LUCRAREA NR. 11 :
Limbajul PHP Prelucrarea datelor dintr-un formular utiliznd
limbajul PHP
Tematica lucrrii
I.
1. Variabilele superglobals
2. Validarea formularelor cu scripturi PHP utiliznd variabilele vector
$_GET i $_POST
II.
1. Variabilele superglobals
Variabilele $_GET, $_POST i $_REQUEST utilizate la validarea
formularelor fac parte din setul de variabile predefinite ale limbajului PHP
denumite superglobals, deoarece sunt disponibile i accesibile n toate
domeniile de vizibilitate pe parcursul execuiei unui script.
Variabilele superglobals sunt:
$GLOBALS: permite acces la toate variabilele declarate global

$_SERVER: ofer informaii despre server i mediul de execuie
$_GET: un vector asociativ cu variabilele pasate ctre scriptul
curent prin parametri URL
$_POST: un vector asociativ cu variabilele pasate ctre scriptul
curent prin metoda HTTP POST
$_FILES: un vector asociativ cu fiierele ncrcate (prin upload) n
scriptul curent prin metoda HTTP POST
$_COOKIE: un vector asociativ cu variabilele pasate ctre scriptul
curent cu ajutorul Cookie-urilor HTTP
- 101 -
$_SESSION: un vector asociativ cu variabilele de sesiune

disponibile n scriptul curent
$_REQUEST: un vector asociativ care implicit conine variabilele
din $_GET, $_POST i $_COOKIE
$_ENV: un vector asociativ cu variabilele de mediu (HOSTNAME,
COMPUTERNAME, USER etc...)
2. Validarea formularelor cu scripturi PHP utiliznd variabilele vector

$_GET i $_POST
Un lucru important n prelucrarea formularelor HTML prin cod PHP const
n faptul c orice element al formularului va fi n mod automat disponibil i
accesibil n scripturile PHP.
Exemplu de formular HTML care conine dou cmpuri de introducere text
i un buton de validare, formular prelucrat prin scriptul validare.php.
Codul HTML este:
Scriptul PHP care proceseaz formularul de mai sus este:
n funcie de ce date sunt introduse n formular, rezultatul procesrii datelor

este afiat n fereastra browser-ului astfel, spre exemplu:
Rezultatul execuiei
Formularul HTML
- 102 -
a) Metoda GET
Utilizeaz variabila superglobal $_GET, care reprezint un vector
asociativ cu variabilele (datele) pasate ctre scriptul curent prin parametrii
adresei URL.
Variabila $_GET colecteaz datele dintr-un formular utiliznd expresia
method=get n cadrul etichetei <FORM>.
Sintax:
Informaiile transmise de la un formular prin metoda GET sunt vizibile
tuturor (vor fi afiate n bara de adrese URL a browser-ului web) i sunt
limitate ca volum de date ce pot fi trimise.
Prezentm exemplul anterior, dar de data aceasta datele sunt trimise prin
metoda GET.
Codul HTML al formularului este:
La apsarea butonului de validare denumit Trimite cu GET, n bara de

adrese URL a navigatorului va apare ceva de genul:
- 103 -
Scriptul PHP care proceseaz formularul de mai sus este prezentat mai jos,
n care numele cmpurilor din formular devin automat chei pentru vectorul
asociativ $_GET:
n funcie de ce date sunt introduse n formular, rezultatul procesrii datelor

este afiat n fereastra browser-ului astfel, spre exemplu:
Rezultatul execuiei
Formularul HTML
Deoarece prin metoda GET datele transmise sunt vizibile oricui, este de
preferat ca aceast metod s nu fie utilizat la transmiterea parolelor de
autentificare sau a altor date sensibile.
Totui, metoda GET este util la salvarea paginilor web ca semne de carte.
De asemenea metoda este limitat n sensul c nu se pot transmite valori
mari (peste 2000 de caractere) prin metoda GET.
b) Metoda POST
Utilizeaz vectorul asociativ $_POST, care colecteaz datele transmise
dintr-un formular prin metoda POST.
Sintaxa:
Datele trimise prin metoda POST nu sunt vizibile nimnui i nu au limite
referitor la volumul de informaii transmise.
- 104 -
Not
Referitor la volumul de date transmis, exist totui o limitare (implicit de
8MB) pentru metoda POST, valoare ce poate fi modificat prin setarea
parametrului post_max_size din fiierul php.ini, fiierul de configurare
PHP).
Exemplu, codul HTML:
Bara de adrese URL va arta astfel:
Scriptul validare.php pentru procesarea datelor prin POST este urmtorul:
Rezultatul procesrii datelor este urmtorul, spre exemplu:

Rezultatul execuiei
Formularul HTML
- 105 -
Pe lng variabilele $_GET i $_POST, limbajul PHP mai conine i

variabila vector asociativ $_REQUEST, care poate colecta datele trimise
att prin metoda GET ct i prin metoda POST.
Exemplu:
c) Variabila $ _COOKIE
COOKIE-ul reprezint un mic fiier pe care un server l salveaz n
calculatorul utilizatorului. Este utilizat deseori pentru identificarea unui
utilizator. Ori de cte ori pagina web este apelat de pe acelai PC, sunt
trimise i cookie-urile. Acestea expir dup o perioad setat la crearea lor.
Prin script PHP se pot att crea ct i primi valori cookie.
Crearea cookie-urilor
Pentru a crea un cookie se folosete funcia setcookie() sau setrawcookie()
(fr codificare URL), care trebuie s apar nainte de eticheta <HTML>.
Sintaxa:
n exemplul urmtor crem un cookie denumit user, cruia i atribuim
valoarea Alex Vovu i un timp de expirare de o or:
Perioada de expirare este n secunde, dar poate fi modificat prin calcule

matematice pentru a obine zile, sptmni, luni etc.
Un alt exemplu, n care setm perioada de expirare sub alt form, mai
lizibil, spre exemplu pentru o lun (60sec*60min*24ore*30zile) avem:
Obinerea valorilor cookie

- 106 -
Pentru a primi o valoare cookie se folosete variabila $_COOKIE, care i ea

este un vector asociativ (cheie valoare).
Spre exemplu pentru cookie-urile urmtoare:
folosim scriptul de mai jos pentru a obine valorile cookie i avem rezultatul
urmtor:
Rezultatul execuiei
Scriptul PHP
Distrugerea cookie-urilor
Pentru eliminarea unui cookie, se procedeaz la modificarea datei de
expirare a acestuia.
Spre exemplu, vom elimina cookie-ul user i vom obine:
Rezultatul execuiei
Scriptul PHP
- 107 -
Dac dorim obinerea valorii pentru cookie-ul user serverul ca returna o

eroare de forma:
n cazul n care un browser nu suport COOKIE-uri, pentru transmiterea

informaiilor se vor utiliza formularele HTML i metodele GET i POST.
III.
Modul de lucru
1. S se creeze o pagin web care s conin un formular de contact cu
urmtoarele cmpuri:
nume i prenume
adres e-mail
telefon
ntrebare
buton de validare
2. S se creeze urmtoarele scripturi PHP:
un script procesareGet.php care s prelucreze datele din
formular obinute prin metoda GET.
un script procesarePost.php prin care datele din formular
s fie procesate prin metoda POST.
un script procesareCookie.phpcare s prelucreze datele din
formular utiliznd cookie-uri.
- 108 -

LUCRAREA NR. 12 :
Limbajul PHP Prelucrarea datelor dintr-o baz de date MYSQL
cu ajutorul limbajului PHP
I.
Tematica lucrrii
1. Baze de date MySQL
2. Funcii PHP pentru baze de date MySQL
3. Operaii clasice cu nregistrrile dintr-o baz de date (adugare,
modificare, tergere) utiliznd scripturi PHP i formulare HTML.
Studiu de caz.
II.

1. Baze de date MySQL
MySQL este un sistem de gestiune a bazelor de date relaionale (SGBDR,

eng.- Relational DataBase Management System, RDBMS) foarte avansat i
larg utilizat n milioane de aplicaii web i nu numai.
Sistemul are la baz limbajul SQL (Structured Query Language), dedicat
manipulrii datelor dintr-o baz de date relaional.
O baz de date relaional lucreaz cu entiti i relaii ntre entiti.
Entitile sunt date de tabele, iar relaiile se construiesc pe baza
identificatorilor unici din fiecare tabel.
Pentru a putea rula aplicaii cu baze de date MySQL, este necesar
instalarea serverului de baze de date MySQL i a extensiei sale pentru
limbajul PHP. Pachetele AMP (Apache-MySQL-PHP) instaleaz automat
att serverul MySQL, ct i extensia sa pentru PHP.
Mai mult, pentru gestionarea uoar a bazelor de date, pachetele AMP ofer
i utilitarul phpMyAdmin, fiind o aplicaie web-based la ndemna oricrui
dezvoltator, creat utiliznd chiar limbajul PHP.
- 109 -
Pentru lucrarea de fa s-a instalat pachetul WampServer cu toate

componentele sale necesare dezvoltrii de website-uri i aplicaii web care
lucreaz i cu baze de date MySQL.
Pentru studiul nostru de caz, s-a creat n MySQL, utiliznd phpMyAdmin o
baz de date denumit baza_date n care s-au creat 2 tabele, cars i fructe,
fig. 12.1.
Figura 12.1. Interfaa phpMyAdmin

Vom proceda la prezentarea doar a tabelului cars. Structura acestuia este
prezentat n fig. 12.2, utiliznd tot phpMyAdmin. Cheia primar, unic
(primary key), care identific n mod unic orice nregistrare este car_ID, ale
crei valori sunt automat incrementate, pentru uurina de lucru.
Figura 12.2. Structura tabelului cars
- 110 -
Prin interfaa phpMyAdmin se pot, de asemenea, crea, modifica i terge

nregistrri din tabele. n fig. 12.3 se prezint tabelul cars n modul Browse,
adic de vizualizare a nregistrrilor.
Figura 12.3. Vizualizarea coninutului unui tabel n phpMyAdmin

Toate elementele bazei de date prezentate sunt create i modificate de
serverul MySQL, utilitarul phpMyAdmin fiind doar o interfa PHP care
uureaz mult munca dezvoltatorilor, aducnd ntr-un singur loc toate
operaiunile necesare i oferind un mediu vizual bine construit pentru
accesul la orice operaiune de baze de date.
Prin simpla apsare de butoane, phpMyAdmin este capabil, pe lng
execuia imediat a unei operaiuni, s genereze cod SQL i chiar cod PHP,
care ulterior poate fi inserat n codul unui script dintr-o pagin web.
Aceste avantaje, pe lng securitatea pe care o ofer, au fcut ca
phpMyAdmin s fie utilizat de majoritatea furnizorilor de servicii de
gzduire web n ntreaga lume pentru gestiunea bazelor de date MySQL.
ncepnd cu MySQL versiunea 4.1.13 i cu PHP versiunea 5.0.0, s-a lansat
extensia MySQLi, adic MySQL Improved (MySQL mbuntit), care
adaug la vechea extensie mbuntiri precum interfa orientat obiect,
tranzacii sau debugging (depanare) mbuntit.
Funciile MySQLi difer fa de cele MySQL standard prin adugarea
caracterului i.
Exemplu: mysql_connect() fa de mysqli_connect().
- 111 -
2. Funcii PHP pentru baze de date MySQL

Se prezint n continuare principalele funcii PHP de lucru cu MySQL.
funciile mysql_connect(), mysql_close(), mysql_error() i

mysql_select_db():
Ofer conectarea unui utilizator la o baz de date MySQL.

Sintax de baz:
Pentru a putea depana uor erorile la conectare, se folosete un script puin
mai complex, ca de exemplu cel de mai jos:
Acest script se va include n toate celelalte scripturi, prin funcia

require_once(), funcie ce permite inserarea unui script extern n interiorul
altui script. Este echivalent cu funciile require(), include() i
include_once().
Paii sunt urmtorii:
a) se execut funcia mysql_connect(). La apariia vreunei erori,
aceasta este semnalat cu ajutorul funciei die() care termin
execuia scriptului i a funciei mysql_error() care va specifica
cauza erorii. Dac nu sunt erori, conexiunea la server MySQL va
fi realizat cu succes.
b) Dup conectare se selecteaz baza de date necesar pentru lucrul
curent, prin funcia mysql_select_db(), pentru care iari se
- 112 -
folosesc funciile die() i mysql_error() n caz de erori la selecie

baz de date.
Pentru a nu ntmpina erori, e necesar ca parametrii de conectare (serverul,
utilizatorul i parola) s fie configurai corect i accesibili.
Este foarte recomandat, din motive de securitate, ca la finalul oricrui script
ce a deschis conexiunea la serverul MySQL, aceasta s fie ncheiat prin
funcia mysql_close(), pentru a nu permite vreunui intrus neinvitat s
compromit bazele de date existente.
Dup realizarea cu succes a conexiunii la server i selectarea bazei de date
de lucru, se procedeaz la prelucrarea datelor din tabelele bazei de date.
funciile celelalte de lucru cu informaiile din baza de date se vor

descrie n prezentarea studiului de caz de la punctul 3.
3. Operaii clasice cu nregistrrile dintr-o baz de date (adugare,

modificare, tergere) utiliznd scripturi PHP i formulare HTML.
Studiu de caz: Aplicaie prezentare AUTOTURISME.
Pentru studiul de caz, s-a ales prezentarea informaiilor legate de
autoturisme. Aceste informaii pot fi modificate, terse sau adugate unele
noi.
i.
Pagina de prezentare autoturisme
Datele sunt preluate din baza de date baza_date creat n MySQL, din
tabelul cars, codul paginii principale (prezentare autoturisme) fiind
urmtorul:
- 113 -
- 114 -
Afiarea n navigatorul web este prezentat n fig. 12.4, ntr-o form foarte
simpl i usor de gestionat datele.
- 115 -
Figura 12.4. Aplicaia de prezentare autoturisme, pagina prezentare
Din codul primei pagini (index.php) a aplicaiei se observ utilizarea

urmtoarelor funcii noi:
funcia mysql_query()
Aceast funcie realizeaz o interogare (execuie a unui cod SQL) asupra

unei bazei de date MySQL. Interogarea (query) trebuie specificat fie direct
n funcie (ntre ghilimele simple sau duble), fie anterior ntr-o variabil
oarecare, variabil ce trebuie trimis apoi ca argument funciei
mysql_query(), ca n exemplul nostru:
funcia mysql_fetch_assoc()
Aceast funcie primete ca parametru rezultatul execuiei unei interogri i

returneaz un rnd din tabelul cu nregistrri sub form de vector asociativ.
Dup execuia cu succes, se pot accesa imediat elementele vectorului (datele
din tabelul cars), ca n exemplul nostru:
- 116 -
ii.
Pagina de inserare autoturism nou
Pentru operaiunea de introducere a unui autoturism nou s-a creat formularul

urmtor:
Valorile introduse n cmpurile formularului vor fi transmise (la apsarea

butonului Salveaza) ctre scriptul save_cars.php, care va salva datele noi
n tabelul cars. Fig. 12.5 prezint formularul din exemplul nostru.
- 117 -
Figura 12.5. Pagina de introducere a unui autoturism nou
Coninutul scriptului save_cars.php este prezentat mai jos. Se poate observa

c s-a utilizat numai funcia mysql_query(), ns interogarea SQL nu mai
este de tip selecie, ci de inserare a unei nregistrri ntr-un tabel.
- 118 -
iii.
Pagina de modificare date autoturism
A treia operaiune des ntlnit n prelucrarea datelor dintr-o baz de date

este cea de modificare sau tergere a unei nregistrri dintr-un tabel. Pentru
aceasta se va folosi neaprat o interogare SQL de tip actualizare tabel
(UPDATE) sau de tip tergere (DELETE) specificnd nregistrarea
respectiv.
Pentru studiul nostru de caz, pagina de modificare const dintr-un formular
n ale crui cmpuri sunt trecute automat valorile transmise la apsarea
butonului Edit din pagina de prezentare autoturisme.
- 119 -
Figura 12.6 prezint interfaa de modificare a datelor unui autoturism.
- 120 -
Figura 12.6. Pagina de editare informaii autoturism
Sunt preluate datele direct din baza de date, din tabelul cars pentru
nregistrarea cu ID-ul corect transmis la apsarea butonului Edit. n
aceast pagin de modificare informaii autoturisme, la apsarea butonului
Modifica masina datele din formular vor fi transmise scriptului
save_cars2.php, prezentat n continuare i n urma crei execuii datele se
vor salva n baza de date MySQL.
De asemenea, la apsarea butonului Sterge masina se va apela acelai
script save_cars2.php, n care, printr-o interogare SQL de tergere
(DELETE), se va terge nregistrarea din baza de date.
- 121 -
Dac scripturile sunt scrise corect, la execuia oricrei operaii din cele
prezentate mai sus se vor semnala mesaje de succes i se vor realiza
modificri asupra bazei de date MySQL.
Limbajul PHP mai conine o gam foarte extins de funcii pentru lucrul cu
bazele de date MySQL, iar cei care doresc aprofundarea acestor aspecte sunt
ndemnai s consulte bibliografia de la finele ndrumarului de laborator.
- 122 -
III.
Modul de lucru
1. S se realizeze dezvoltarea aplicaiei de prezentare autoturisme
descris n aceast lucrare de laborator.
2. S se dezvolte o aplicaie asemntoare, avnd ca subiect orice
domeniu la alegere (legume, fructe, orae, magazine etc.)
- 123 -

LUCRAREA NR. 13 :
Crearea de coninut dinamic animat utiliznd Adobe FLASH i
limbajul ActionScript
Tematica lucrrii
I.
Crearea unui meniu orizontal n programul Adobe FLASH
II.
Crearea unui meniu orizontal n programul Adobe FLASH

Programul Flash dezvoltat iniial de compania Macromedia iar apoi de
Adobe este extrem de util n dezvoltarea animaiilor web. Domeniul
animaiilor pe internet a cunoscut un mare progres n ultimii ani, datorit
cererii tot mai mari a jocurilor online i a coninutului dinamic tip animaie
n majoritatea website-urilor.
Adobe Flash este un program proprietar, adic pentru utilizarea sa este
necesar achiziia unei licene contra cost. Pentru detalii vizitai
http://www.adobe.com .
Componetele aplicaiei Flash sunt:
o fereastr de lucru (scen) n care se plaseaz obiectele animaiei;

o linie de timp (timeline) pentru controlul animaiilor cu ajutorul
cadrelor (frames);
O bar de instrumente n partea stng, coninnd elementele de
lucru de baz (forme, instrumente de decupat etc.);
O gam larg de panouri pentru diverse operaiuni aplicate animaiei
(transformare, aliniere, librrie cu simboluri, culori etc.);
un meniu principal de unde se pot executa operaiunile necesare.
- 124 -
Figura 13.1 prezint fereastra aplicaiei Adobe Flash CS3, n care se pot
evidenia unele din componentele programului (linia de timp, bara de
instrumente, fereastra de lucru, meniul principal).
Figura 13.1. Fereastra programului Adobe Flash CS3 Professional
Printre animaiile cel mai des ntlnite se afl i meniurile create n Flash,
datorit aspectului mult mbuntit al prezentrii acestuia.
Pentru crearea unui meniu orizontal n Flash, trebuie urmai paii urmtori:
a) Se creeaz tipul de buton pentru opiunile meniului i se genereaz
cte un astfel de buton pentru fiecare opiune, asociindu-se un text
drept nume al opiunii de meniu.
Un buton web poate avea urmtoarele stri:
UP buton neapsat
OVER cnd mouse-ul gliseaz deasupra butonului
DOWN buton apsat, dar neridicat
HIT specific zona n care butonul este activ
- 125 -
n exemplul nostru dorim s modificm aspectul butoanelor meniului,

funcie de fiecare stare a lor. n figura 13.2 se observ cum au fost desenate
strile UP, OVER i DOWN, avnd forme dreptunghiulare cu colurile puin
rotunjite i de culori diferite.
UP
OVER
DOWN
Figura 13.2. Proiectarea strilor unui buton web n Flash
b) n fereastra de baz a programului Flash se plaseaz orizontal (sau

vertical n cazul meniului vertical), unul dup altul butoanele create,
cte un buton pe layer.
Pentru uurina aezrii aliniate se poate utiliza panoul Align, care permite
alinierea elementelor n scen relativ fie la alte elemente, fie la scen. n fig.
13.3 se prezint meniul orizontal alctuit din cele 3 butoane.
Figura 13.3. Meniu orizontal proiectat n Flash

- 126 -
c) Pasul urmtor const n asignarea fiecrui buton cte o adres URL,

ctre care s navigheze utilizatorul prin apsarea lui.
Pentru acest scop s-au creat 3 pagini web simple: produse.html,
downloads.html i suport.html. Coninutul acestor pagini web nu este
relevant; scopul nostru este ca cele 3 butoane s direcioneze ctre cele 3
pagini web.
Ca s realizm lucrul acesta se apeleaz la cod ActionScript (limbajul de
scripting al programului Flash). Cu ActionScript, utilizatorul unei aplicaii
Flash poate manipula mult mai dinamic elementele din aplicaie, limbajul
ajutnd la automatizarea diverselor operaiuni des utilizate n cadrul
aplicaiilor web de tip Flash.
Pentru meniul nostru, dup ce am aliniat butoanele n poziiile dorite, cte
un buton pe layer, se selecteaz cadrul (frame-ul) fiecrui buton i se aplic
o aciune ActionScript, adic se adaug un cod ActionScript care va fi
executat n momentul rulrii cadrului respectiv.
Fiecrui buton din meniul nostru i s-a nscris codul urmtor, fig. 13.4, n
care, la eliberarea butonului apsat se va apela funcia getURL() primind ca
parametru pagina web corespunztoare.
- 127 -
Figura 13.4. Aplicarea unui cod ActionScript pentru fiecare buton
d) Dup proiectarea butoanelor meniului i a aciunilor acestora, se

procedeaz la publicarea (publish) meniului Flash, accesnd
opiunea de meniu File Publish. Setrile de publicare (frame rate,
calitatea JPEG a imaginilor create etc.) pot fi modificate dup
preferinele utilizatorului accesnd opiunea File Publish
Settings...
n urma publicrii, se genereaz urmtoarele fiiere:
un fiier html, meniu.html (n cazul nostru), al crui cod principal

const dintr-un element HTML <OBJECT>, ca cel de mai jos:
- 128 -
Se pot observa diveri parametri Flash (dimensiune, calitate etc.) i, cel mai
important, parametrul movie i embed care conin animaia noastr (meniul
orizontal) meniu.swf. Orice animaie are extensia implicit .SWF.
La ncrcarea fiierului meniu.html n fereastra browser-ului web se va
ncrca automat i animaia, meniul orizontal, ca n figura 13.5. Se poate
observa c la glisarea mouse-ului deasupra unui buton, acesta i schimb
culoarea de fundal.
Figura 13.5. Afiarea meniului Flash n fereastra navigatorului web;

butonul Downloads este n starea n care mouse-ul gliseaz deasupra lui
- 129 -
al doilea fiier este animaia nsi (filmul), meniu.swf, care conine

meniul orizontal compilat cu tehnologia Flash, n urma publicrii.
iar al treilea fiier este un script JavaScript, generat pentru orice
animaie Flash, denumit AC_RunActiveContent.js, n care sunt
definii parametrii Flash apelai n elementul <OBJECT>.
La apsarea oricrui buton din meniul Flash, browser-ul va ncrca pagina

web corespunztoare opiunii de meniu. Astfel, utiliznd tehnologia de
animaie Flash, s-a obinut un meniu orizontal ntr-un timp foarte scurt i
avnd un aspect plcut.
Cu ajutorul programului Adobe Flash se pot crea animaii mult mai
avansate, banere, logo-uri, reclame, filme de desene animate, obiecte n
micare acionate de utilizator etc., toate acestea conducnd la o experien
web dinamic i neplictisitoare.
III.
Modul de lucru
1. S se creeze un meniu vertical, asemntor celui din lucrarea de
laborator, crendu-se alte efecte pentru strile butoanelor meniului
dect cele utilizate.
2. S se creeze urmtoarele obiecte:
a. un baner web, coninnd o imagine n fundal i un text titlu n
micare;
b. un logo rotitor, coninnd o imagine de dimensiuni reduse
(50x50 pixeli).
3. S se ncadreze toate aceste obiecte Flash ntr-o singur pagin web,
poziionndu-le n diverse locuri dup preferine.
- 130 -

LUCRAREA NR. 14 :
Tehnologii web avansate. Biblioteca JavaScript jQuery, CMS,
web framework-uri
Tematica lucrrii
I.
Prezentarea succint a unor tehnologii web avansate:

a) jQuery
b) web CMS
II.
a) jQuery
jQuery reprezint o librrie scris n limbajul JavaScript, de dimensiuni
foarte mici. Scopul acestei librrii este acela de a uura scrierea i utilizarea
codurilor JavaScript n paginile web.
jQuery preia majoritatea sarcinilor obinuite pentru care n JavaScript ar
trebui scrise multe linii de cod pentru a le ndeplini, i apoi le mpacheteaz
n metode (funcii) apelabile chiar i printr-o singur linie de cod.
De asemenea, jQuery simplific multe din lucrurile complicate obinute cu
JavaScript, cum ar fi apelurile AJAX (Asynchronous JavaScript and XML)
i manipularea obiectelor DOM.
Caracteristicile librriei jQuery sunt urmtoarele:
manipularea HTML/DOM
manipularea CSS
metode pentru evenimentele HTML
efecte i animaii
AJAX (Asynchronous JavaScript and XML)
diverse utilitare.
- 131 -
Un avantaj major const n faptul c dezvoltatorii acestei librrii (sau

framework) JavaScript au inut neaprat ca ea s fie compatibil cu aproape
toate browser-ele web. jQuery va rula exact la fel n majoritatea
navigatoarelor web principale, inclusiv Internet Explorer 6.
Instalarea jQuery
Librria poate fi inclus ntr-o pagin web n dou moduri:
descrcnd librria de pe site-ul jQuery.com, i adugnd-o manual
att n structura de directoare a website-ului, ct i referirea ctre
aceasta n seciunea <HEAD> a paginii cu elementul <SCRIPT>:
incluznd librria printr-o reea CDN (Content Distribution

Network), cum ar fi cea de la Google, tot n seciunea HEAD:
Deoarece jQuery conine multe funcii, ne limitm la a prezenta un exemplu

de utilizare a acestui minunat framework JavaScript.
Animaii tip apare/dispare.
Efect n browser
Cod jQuery
Iniial i dup apsare Arat:
- 132 -
Dup apsare Ascunde:
b) web CMS
Un web CMS (Content Management System pentru web, Sistem de gestiune
a coninutului web) reprezint o aplicaie web care permite publicarea,
editarea i modificarea de coninut, ct i mentenana unui website sau
aplicaie dintr-o interfa central.
Prezentm pe scurt cele mai larg utilizate CMS-uri web actuale i gratuite:
WordPress este cel mai popular CMS. Iniial a fost dezvoltat drept
un CMS pentru crearea i editarea blog-urilor, dar a fost adaptat
astfel nct a devenit un web CMS pe deplin dezvoltat. WordPress
are i suport pentru limba romn i se poate obine de la adresa:
http://wordpress.org/ sau http://ro.wordpress.org/
Joomla! reprezint un alt web CMS foarte rspndit, care poate fi

utilizat pentru crearea i editarea uoar a paginilor web, ns este
mult mai complex dect WordPress. Joomla se poate descrca de la
adresa URL: http://www.joomla.org/ .
Drupal este al doilea cel mai popular CMS pentru web i a fost
dezvoltat naintea lui WordPress i Joomla. Este mult mai dificil de
nvat i neles dect celelalte dou CMS-uri, dar este cel mai
securizat. Spre exemplu, Drupal gestioneaz site-ul White House.
Drupal este disponibil la adresa: http://drupal.org/ .
- 133 -
Pe lng aceste 3 CMS-uri larg rspndite i distribuite n mod gratuit, mai

exist multe altele, free sau proprietare, utilizate chiar i de marile companii
guvernamentale sau private din ntreaga lume.
III.
Modul de lucru
S se ncerce personal ca tem de cas, descrcarea i instalarea unuia din

cele 3 CMS-uri descrise n lucrare i s se creeze un website explicit prin
CMS-ul instalat.
- 134 -
BIBLIOGRAFIE
[1]. David, M. - HTML5: designing rich Internet applications, Elsevier:
Focal Press, USA 2010.
[2]. Tudor Sorin, Vlad Hutanu - Crearea si programarea paginilor WEB,
ed. L&S SOFT, 2006.
[3]. Sabin Corneliu Buraga Tehnologii Web, Editura Matrix Rom,
Bucureti, 2001.
[4]. Internet: http://www.w3schools.com
[5]. Internet: http://www.php.net
[6]. Internet: http://www.javascriptkit.com
- 135 -

TEHNOLOGII WEB - Indrumar Laborator FINAL PDF

Încărcat de

Drepturi de autor:

Formate disponibile

TEHNOLOGII WEB - Indrumar Laborator FINAL PDF

Încărcat de

Informații document

Titlu original

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 - Indrumar Laborator FINAL PDF

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSITATEA HYPERION DIN BUCURETI

FACULTATEA DE TIINE EXACTE I INGINERETI

Dr.ing. Eugen CORNEL

TEHNOLOG WEB - ndrumar de laborator

Teoria lucrrii de laborator

HTML (Hyper Text Markup Language) reprezint un limbaj de marcare,

Structura unui document HTML

Structura de baz a unui document HTML este compus din:

Declaraie tip document:

Codul HTML de baz pentru un document arat astfel:

Limbajul HTML nu este case-sensitive, elementele scriindu-se cu litere mari

Elemente (etichete) HTML

Elementele HTML reprezint etichete de inserare i formatare a coninutului

Tabelul 1. Elemente HTML pentru generarea de text

<code>text continand cod de

text continand cod de computer

<font color=red>font rosu</font>

<font size=6>font size=6</font>

<div align=center>text aliniat pe

text aliniat pe centru

<div align=right>text aliniat la

text aliniat la dreapta

Exemplu de pagin web cu text formatat:

Rezultatul afiat n browser-ul web este cel din figura 1.

Figura 1. Exemplu de pagin web cu formatare de text.

S se creeze o pagin web, care s afieze urmtoarele:

3 paragrafe de dimensiuni diferite;

TEHNOLOG WEB - ndrumar de laborator

Afiarea imaginilor n paginile web

Teoria lucrrii de laborator

Rezultatul afiat n browser va fi cel din figura 2.1. de mai jos.

2. Crearea legturilor web (hyperlink-uri)

Rezultatul afiat va fi:

Adresele direcionate de hyperlink se pot deschide n fereastra printe sau

3. Generarea listelor ordonate i neordonate

Listele ordonate (numerotate) se insereaz utiliznd setul de etichete:

Exemplu de list ordonat generat n HTML:

Listele neordonate (nenumerotate) sunt create de setul de etichete:

<UL> <LI> </LI> </UL>, (UL = Unordered List).

n cadrul listelor se pot introduce texte, imagini, legturi web etc.

4. Crearea i formatarea tabelelor n HTML

<tr> - definete o linie (un rnd) de tabel

Fiecrui tabel i se poate insera i un cap de tabel, utiliznd eticheta <TH>

Atunci cnd se dorete ca o celul s se ntind pe mai multe linii sau

Exemplu de tabel cu o celul extins pe 2 coloane:

un titlu de pagin <H1> i un paragraf.

TEHNOLOG WEB - ndrumar de laborator

Teoria lucrrii de laborator

Cadrul (frame) reprezint o seciune din pagina web, un container de

Figura 3.1. Setarea cadrelor n HTML

b) Dac se dorete inserarea unei pagini web ntr-un cadru n interiorul

Rezultatul afiat este cel din figura 3.2 de mai jos:

Figura 3.2. Cadru IFRAME ncrcat cu coninut din alt site.

2. Generarea formularelor HTML

a) cmp introducere text : <input type=text>

b) cmp introducere parol : <input type=password>

c) butoane radio : <input type=radio>

d) csue de validare (checkbox) : <input type=checkbox>

e) arie de text : <textarea> ... </textarea>