Conf.Dr.Ing. LUCIAN NIȚĂ ABSOLVENT CLOPOTEL IOSIF PAUL IAȘI 2019 Universitatea Tehnică „Gheorghe Asachi” din Iași FACULTATEA DE INGINERIE ELECTRIC… [625897]

UNIVERSITATEA TEHNICĂ „GHEORGHE ASACHI “ DIN IA ȘI
FACULTATEA DE INGINERIE ELECTRICĂ, ENERGETICĂ
ȘI INFORMATICĂ APLICATĂ

LUCRARE DE LICENȚĂ

ÎNDRUMĂTOR ȘTINȚIFIC
Conf.Dr.Ing. LUCIAN NIȚĂ ABSOLVENT: [anonimizat]
2019

Universitatea Tehnică „Gheorghe Asachi” din Iași

FACULTATEA DE INGINERIE
ELECTRIC Ă,ENERGETICĂ ȘI INFORMATICĂ
APLICATĂ

APLICAȚIE WEB DE PREZENTARE
A PRODUSELOR

ÎNDRUMĂTOR ȘTINȚIFIC
Conf.Dr.Ing. LUCIAN NIȚĂ ABSOLVENT: [anonimizat]
2019

1
Cuprins
1. Aplicație WEB ………………………….. ………………………….. ………………………….. ………………. 4
1.1. Introducere aplicație WEB ………………………….. ………………………….. …………………….. 4
1.2. Servere si WEB ………………………….. ………………………….. ………………………….. ……….. 5
1.3. Aplicatii WEB ………………………….. ………………………….. ………………………….. …………. 6
2. Limbajul HTML ………………………….. ………………………….. ………………………….. …………….. 8
2.1. Introducere HTML ………………………….. ………………………….. ………………………….. …… 8
2.2. Tag-uri HTML ………………………….. ………………………….. ………………………….. …………. 9
2.3. Atribute HTML ………………………….. ………………………….. ………………………….. ………. 11
2.4. Tag-uri pentru formatarea continutului HTML ………………………….. ……………………. 11
2.4.1 Formatarea textului ………………………….. ………………………….. ………………………. 11
2.4.2 Liste ………………………….. ………………………….. ………………………….. ……………….. 12
2.4.3 Liste neordonate ………………………….. ………………………….. ………………………….. . 12
2.4.4 Liste ordonate ………………………….. ………………………….. ………………………….. ….. 13
2.5. Imagini ………………………….. ………………………….. ………………………….. ………………….. 14
2.6. Link -uri ………………………….. ………………………….. ………………………….. …………………. 15
2.7. Tabele ………………………….. ………………………….. ………………………….. …………………… 17
2.8. Formulare ………………………….. ………………………….. ………………………….. ………………. 18
2.8.1 Campuri din formular ………………………….. ………………………….. ……………………. 18
3. Limbajul de stilizare CSS ………………………….. ………………………….. ………………………….. . 20
3.1. Introducere CSS ………………………….. ………………………….. ………………………….. ……… 20
3.2. Moduri de aplicare ………………………….. ………………………….. ………………………….. ….. 20
3.2.1 CSS intern ………………………….. ………………………….. ………………………….. ………. 20
3.2.2 CSS extern ………………………….. ………………………….. ………………………….. ………. 20
3.2.3 CSS inline ………………………….. ………………………….. ………………………….. ……….. 21
3.3. Sintaxa ………………………….. ………………………….. ………………………….. ………………….. 21
3.3.1 Tipuri de selector ………………………….. ………………………….. ………………………….. 21
3.3.2 Selectorul direct ………………………….. ………………………….. ………………………….. .. 21
3.3.3 Selectorul class ………………………….. ………………………….. ………………………….. … 22
3.3.4 Selectorul ID ………………………….. ………………………….. ………………………….. …… 22
3.4. Proprieta ti CSS ………………………….. ………………………….. ………………………….. ………. 23
3.4.1 Proprietati CSS pentru formatarea listelor ………………………….. ……………………. 23
3.4.2 CSS pentru formatarea link -uri ………………………….. ………………………….. ………. 24
3.4.3 Proprietati CSS pentru fundal (background) ………………………….. …………………. 24

2
3.4.4 Proprietati CSS pentru pozitionare ………………………….. ………………………….. ….. 24
4. Limbajul de programare JavaScript ………………………….. ………………………….. …………….. 26
4.1. Introducere in JavaScript ………………………….. ………………………….. ……………………… 26
4.2. Numere ………………………….. ………………………….. ………………………….. …………………. 26
4.3. Siruri de caracte re ………………………….. ………………………….. ………………………….. …… 27
4.4. Variabile ………………………….. ………………………….. ………………………….. ……………….. 28
4.5. Operatori ………………………….. ………………………….. ………………………….. ……………….. 28
4.6. Comparatii ………………………….. ………………………….. ………………………….. …………….. 29
4.7. Structuri de control ………………………….. ………………………….. ………………………….. …. 29
4.8. Obiecte ………………………….. ………………………….. ………………………….. ………………….. 30
4.9. Vectori ………………………….. ………………………….. ………………………….. ………………….. 31
4.10. Functii ………………………….. ………………………….. ………………………….. ……………….. 31
5. Bootstrap ………………………….. ………………………….. ………………………….. …………………….. 33
5.1. Introducere Bootstrap ………………………….. ………………………….. ………………………….. 33
6. Baze de date ………………………….. ………………………….. ………………………….. ………………… 34
6.1. Definitia bazei de date ………………………….. ………………………….. …………………………. 34
6.2. Ce este SQL server ………………………….. ………………………….. ………………………….. …. 34
6.3. Tranzactii ACID ………………………….. ………………………….. ………………………….. …….. 35
6.4. Ce este limbajul SQL ………………………….. ………………………….. ………………………….. . 36
6.5. Elementele Limbajului SQL ………………………….. ………………………….. …………………. 36
6.6. Tipuri de date in SQL ………………………….. ………………………….. ………………………….. 37
6.7. Interogari ………………………….. ………………………….. ………………………….. ………………. 37
6.8. Instructiunil e limbajului de manipulare a datelor ………………………….. …………………. 38
6.9. Tranzactii ………………………….. ………………………….. ………………………….. ………………. 38
6.10. Limbajul de definire a datelor ………………………….. ………………………….. ……………. 39
7. jQuery ………………………….. ………………………….. ………………………….. …………………………. 41
7.1. Introduce jQuery ………………………….. ………………………….. ………………………….. …….. 41
7.2. Caracteristici ………………………….. ………………………….. ………………………….. ………….. 41
7.3. “Hello world” in jQuery ………………………….. ………………………….. ………………………. 41
7.4. Extensii ………………………….. ………………………….. ………………………….. …………………. 42
8. Aplicatie WEB de prezentare a produselor ………………………….. ………………………….. …… 43
8.1. Functionalitatile aplicatiei ………………………….. ………………………….. ……………………. 43
8.2. Bara de navigare ………………………….. ………………………….. ………………………….. …….. 44
8.2.1 Acasa ………………………….. ………………………….. ………………………….. ……………… 44
8.2.2 Teme ………………………….. ………………………….. ………………………….. ………………. 45

3
8.2.1 Contact ………………………….. ………………………….. ………………………….. …………… 47
8.3. Responsive Web Design ………………………….. ………………………….. ………………………. 50
9. Concluzii ………………………….. ………………………….. ………………………….. …………………….. 51
10. Bibliografie ………………………….. ………………………….. ………………………….. ……………….. 52

4
1. Aplicație WEB
1.1. Introducere aplicație WEB
Cel mai dinamic si cel mai folosit dintre toate serviciile de internet este World Wide Web –
ul.
El reprezintă o grupare de pagini ce contin texte, imagini, animatii, videoclipuri etc. ce pot fi
accesate de catre orice utilizator daca sunt mai accesate la i nternet, ele sunt conectate intre ele
prin hiperlinkuri.
Primul browser cu denumirea de World Wide Web a fost scris de catre Tim Bernes -Lee,
datorita acestuia a elaborate si URL -uri, HTTP si HTML pentru realizarea browserului.
Ulterior WEB -ul la inceput era static , bazat doar pe texte si documente grafice, unele
pagini contineau si cate un fisier audio sau video, dar pentru a fi utilizat acest continut era
necesar o sursa externa pentru descarcarea acestuia.
In general aplicatiile WEB in acel timp erau create folosindu -se de un text editor HTML
care ulterior erau plasate pe serverele WEB.
Datorita aparitiei limbajului de programare Java, aplicatiile de tip WEB au avut un
beneficiu foarte mare in dezvoltarea acestora. Cu ajutorul acestui limbaj de programare
aplicatiile rulau cat mai eficient si a ajutat foarte mult la evolutia lor.
Acest interes deosebit de catre limbajul Java se datoreaza faptului ca WEB -ul nu mai este
o multitudine de documente realizate in HTML ci un ade varat mediu client/server in care
clientul are o anumita independent fata de server.
In ultimii ani WEB -ul a evoluat datorita distribuirii documentelor publicate la randul lor
pe acest timp de aplicatii prin intermediul utilizatorilor ajungand la un mecanism fiabil de
dezvoltare pentru aceste aplicatii.
Accentul se pune in general pe crearea documentelor de larga utilizare a retelei.In general
HTML -ul este in general continutul paginii cu ajutorul unui processor de cuvinte , dupa care
este incarcat pe WEB si distribuit utilizatorilor.

5
1.2. Servere si WEB
Pentru dezvoltarea aplicatiilor a fost includerea tutor datelor , a procesarilor si a
elementelor de interfata utilizator intr -un calculator partajat de toata lumea.Aceasta abordare a
fost numita abordare centralizata.
Primele proiecte de acest tip au pus software -ul ce manipuleaza interfata utilizator la nivelul
clientului, iar software -ul ce controleaza datele si procesarile acestora la nivelul sistemului
server.
In WEB sunt utilizate un numar mai mare de servere pentru servirea continutului.
Cele ma i cunoscute servere conform staticilor oferite de catre Netcraft Inc. si anume:
Apache
Microsoft IIS
Nginx
Google
Zeus
Sun One Web Server
Un server poate fi de doua tipuri:
Static -stocat in fisiere de pe calculatorul -server
Dinamic -generat de limbaje de p rogramare, scripturi sau API -uri apelante de serverul WEB
Caracteristicile principale a serverelor sunt:
Utilizarea modulelor ce au avantajul de a dezvolta capabilitatile de baza oferite.
Asigurarea securitatii prin criptarea datelor
Gestionarea a mai mult or aplicatii WEB
Asigurarea compresiei continutului reduce durata de raspuns
Codificarea cu ajutorul unui text document sau a unei interfete grafice

6
1.3. Aplicatii WEB
Reprezita o multitudine de pagini WEB interconectate intre ele , create cu scopul de a
oferi mai multe benificii, si anume:
Magazin virtual
Motor de cautare
Acces la e -mail
Accesarea bazelor de date
O aplicatie web este impartita in 3 nivele:
Nivel I -browserul WEB
Nivel II -server de aplicatii
Nivel III -SqL server / fisere HTML sau XML
Arhitectura WEB de baza:

Figura 1.1 Arhitectura web
Serverul web raspunde la cererile cerute de catre utilizator prin intermediul
browserului web.

7
Software -ul serverului este instalat pe un calculator si in functie de utilizarea acestuia se alege
un sist em de operare de tip hardware pentru acest server.Odata instalat acesta doar asteapta sa
acceseze cererile de la browser -ele web.
Atunci cand cererea este receptionata serverul se pune in functiune. El localizeaza URL -ul si
il copiaza pe conexiunea retea u nde ip -ul este trimis catre browser. Atunci cand informatia a
ajuns catre browser si primeste fisierul cerut de la server cum ar fi pagina web,atunci se pune
in functiune HTML -ul si va afisa informatia dorita de catre utilizator.
Web -ul a fost descris ca p latforma dinamica, sistem media in care este distribuit pe
internet.Este prima generatie care este sub aceasta forma de sistem ce continua sa evoluieze
foarte rapid.
Datorita mediului de dezvoltare , aplicatiile web sunt in general formate din mai multe pa rti
ce folosesc multe tehnologii.
Datorita dezvoltarii WWW, aplicatiile web au urmat sa prezinte necesitatea caracteristicilor
aplicatiilor desktop.Au urmat sa fie dezvoltate tehnologiile Web pentru client si pentru server.
Functionarea aplicatiilor Web su nt oferite de catre server, ce urmeaza sa fie prezentate
utilizatorilor cu ajutorul unei retele de internet

8
2. Limbajul HTML
2.1. Introducere HTML
Un scurt istoric al HTML -ului ar fi: La inceputul anilor 90’ a fost creat HTML -ul si
standardizat ca HTML4 din 1997 .Initial la inceputul anului 2000 mai exact data de 26
ianuarie 2000 a fost facut public o noua specificatie sub numele de XHTML ce reprezinta o
familie bazata pe XML de tip document si module. XHTML 1.0 este prima versiune al unui
limbaj de marcare.In p rezent HTML a ajuns la a 5 -a versiune.
Pe data de 18 ianuarie 2011 are loc initializarea unui logo pentru reprezentarea utilizarii
HTML5.Acest logo s -a facut oficial in data de 1 aprilie 2011 de catre W3C.

Figura.2.1 logo HTML
Limbajul HTML a evoluat in diferite versiuni de -a lungul timpului si anume:
-HTML, 1991
-HTML+,1993
-HTML 2.0 , 1995
-HTML 3.2 ,1997
-HTML 4.01 ,1999
-XHTML 1.0 , 2000
-HTML5 ,2012
-XHTML5 ,2013
HTML reprezinta un limbaj de marcare Hyper Text Markup Language.Acesta ajuta la
prezentarea documentelor si informatiilor pe web. El consta in adaugarea tag -urilor ale
fisierelor ASCII , ce permite afisarea diverselor fonturi, imagini, sunete, videoclipuri, liste,
formulare. Cu ajutorul HTML -ului putem face legaturi intre pagini cu ajut orul link -urilor
implementate in cod.
Datorita acestui limbaj de marcare , toate browser -ele il inteleg ca de exemplu:Mozilia
Firefox,Internet Explorel , Google Chrome, si altele .Putem construi foarte usor o pagina web
cu ajutorul taguri -lor usor de r etinut.

9

Arborele genealogic al XHTML

Figura 2.2 Arborele genealogic al XHTML
2.2. Tag-uri HTML
Tag-ul este o comanda in HTML care indica modul in care va fi interpretata informatia la
care ea se refera.Tag -urile markup mai au denumirea de tag -uri HTML.
Tag-urile HTML sunt denumiri cheie sub forma urmatoarelor semne “ <” si “>”
-de obicei sunt perechi sau duble, de exeplu:”<b> si </b>” ,dar pot fi si simple sub forma
“<br/>”.
-primul tag dintr -o pereche se numeste tag de incepul iar celalalt de inchidere.
-diferenta dintre cele doua tag -uri este ca la cel de inchidere se adauga semnul slash “/”
inainte de denumire.
Orice pagina WEB contine tag -uri , cele mai folosite sunt cele de baza care sunt foarte
utilizate in orice pagina WEB a unui site. Urmatoar ele tag -uri ce vor fi prezentate trebuie sa
apara mereu in cadrul paginilor WEB.
<!DOCTYPE> este folosit pentru a ajuta browser -ul sa afiseze corect in pagina
documentul HTML. Sunt mai multe tipuri de acest gen de declaratie, pentru fiecare tip de
versiune a HTML -ului: HTML5 <!DOCTYPE html>
HTML 4.01 <!DOCTYPE HTML PUBLIC” -//W3C//DTD HTML 4.01 Transitional//EN”

10
http://www.w3.org/TR/html4/loose.dtd >
XHTML 1.0 <!DOCTYPE HTML PUBLIC” -//W3C//DT D HTML 4.01 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd >
Denumirea tag -ului <html> transmite browser -ului ce tip de document este , datorita
acestuia ofera indicatii despre cum vor fi interpretate anumite parti din codul ASCII.
<html> Acest tag transmite browser -ului ca documentul respectiv este de fapt un document
HTML , dand astfel indicatii asupra modului in care vor fi interpretate diferite partit ii ale
fisierului ASCII.
<head> Acest tag este in fapt tot un mesaj catre browser, continand informatii despre
document, ca de exemplu linkuri sau pagini care trebuie incarcate in prealabil.
<title> Acest tag este folosit pentru a da o denumire paginii web create; acest nume va apare
in partea superioara a fereastrei browser -ului identificand astfel pagina respectiva prin
denumirea sa .
</title> Acest tag este de fapt inchiderea celui precedent; transmite browser -ului ca textul ce
trebuie considerat ca ti tlu al paginii s -a incheiat. Majoritatea tag -urilor HTML folosesc tag -uri
corespondente de inchidere.
</head> Reprezinta tag -ul de inchidere al tag -ului corespondent deschis anterior, semnificand
astfel incheierea zonei de inceput a documentului HTML.
<bod y> Acest tag semnaleaza deschiderea sectiunii corespunzatoare corpului paginii web.
Aici se vor introduce informatiile continute in pagina, textul, grafica si elementele multimedia
dorite. Aceste informatii vor aparea in fereastra browser -ului.
</body> Rep rezinta tag -ul de inchidere a zonei de continut, care transmite browser -ului ca nu
se mai doreste adaugarea de informatie in aceasta pagina.
</html> Acest tag incheie documentul HTML, semnaland browser -ului ca nu mai exista
elemente care trebuie citite sau incarcate.
Cu aceste taguri prezentate anterior putem crea o pagina WEB , foarte simpla dar perfect
functionala.
<!DOCTYPE html>
<html>
<head>
<title>Titlul Paginii</title>
</head>
<body>
Exemplu de creare a unei pagini web.

11
</body>
</html>

2.3. Atribute HTML
Pentru personalizarea tag -urilor se folosesc atribute.
-elementele HTML pot avea atribute
-atributele formeaza suplimentar tag -urile
-atributele sunt intotdeauna specificate in tag -ul de la inceput
-atributele au intotdeauna valoarea specificata astfe l: name=”valoare”
-valoarea atributelor va fi intotdeauna delimitate folosind ghilimele
Sintaxa unui tag se scrie in felul urmator:
<tag atribut=”valoare”></tag>
Tag-urile pot avea mai multe atribute despartite printr -un spatiu:
<tag atribut=”valo are” atribut=”valoare”></tag>
Unele atribute sunt applicate oricarui tag de exemplu:
class – ce specifica una sau mai multe denumiri de clasa pentru acel element
id- specifica un id unic pentru element
style -specifica un cod CSS inline pentru elementul respective
title-specifica informatii aditionale despre element -afisate ca tool tip.
2.4. Tag-uri pentru formatarea continutului HTML
2.4.1 Formatarea textului
In cadrul sectiunii <body> apar elementele de text si grafica ale paginii noastre. Unele
dintre elementele cel mai des utilizate care se intalnesc in cadrul acestei sectiuni sunt tag -urile
pentru formatarea textului.
Tag-urile Heading: <h1> si </h1>…<h6> si <h6> > reprezinta tag -urile ce modifica
dimensiunea textului, ingroasa textul si se folosesc la introduce rea titlurilor intr -o pagina web.
Dimensiunea textului variaza: <h1></h1> avand dimensiunea cea mai mare si <h6></h6>
avand dimensiunea cea mai mica.
Tag-ul<strong>

12
<strong> si </strong> sunt tag -urile ce transforma textul dintre ele in text bold.In loc ul acestei
perechi de tag -uri se poate folosi si perechea <b> si</b>
Tag-ul <em>:
<em> si </em> sunt tag -urile ce transforma textul dintre ele in text italic.In locul acestei
perechi de tag -uri se poate folosi si perechea <i> si </i>
Tag-ul<u>
<u>si</u> sunt tag -urile ce transforma textul dintre ele in text subliniat
Tag-ul <sup>
^si sunt tag -urile ce transforma textul in superscript
Tag-ul <sub>
_si sunt tag -urile ce transforma textul in subscript
Tag-ul <del>
<del> si </del> sunt tag -urile ce transforma textul in strike(text taiat).
Tag-ul <p>
<p>si</p> reprezinta tag -ul ce delimiteaza un paragraph text.
Tag-ul<br>
<br/> este tag -ul ce comanda trecerea la o linie noua.
2.4.2 Liste
In HTML exista doua tipuri de liste:
-liste ordonate
-liste neordonate
2.4.3 Liste neordonate
a) Sitaxa:
<ul>
<li>elementul 1 din lista</li>
<li>elementul 2 din lista</li>
<li>elementul 3 din lista</li>
</ul>
Din sintaxa observam urmatoarele: Tag -ul <ul></ul> (unordered list) reprezinta intreaga lista
care in cazul nost ru contine 3 elemente de lista care sunt marcate prin tag -urile <li></li>

b) Atribute:

13
Lista neordonata poate fi personalizata folosind atributul type care poate lua valorile: disc
(valoarea default), circle sau square. Fiecare dintre cele 3 valori schimb a simbolul din fata
elementelor de lista. Astfel:
<ul>
<li type=”circle”>element 1</li>
<li type=”disc”>element 2</li>
<li type=”square”>element 3</li>
</ul>
Va afisa in browser :
o element 1
element 2
element 3
In cazurile de mai sus putem observa ca folosind atributul type pe tag -ul obtinem liste
care au acelasi simbol in fata elementelor de lista. In cazul in care dorim liste care sa nu
foloseasca acelasi simbol la toate elementele de lista vom putea folosi acelasi atribu t type
aplicat, de data aceasta, pe fiecare tag <li> in parte.
2.4.4 Liste ordonate
a) Sintaxa
<ol>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ol>
In browser va afisa:
1.element 1
2.element 2
3.element 3
Comparand cu lista neordonata observam dif erenta de cod HTML: utilizarea tag -ului <ol> in
locul tag -ului <ul> afisararea in browser din fata elementelor va fi cu 1,2,3…
b) Atribute : Pentru tag -ul <ol> putem folosi 2 atribute:type si start, de exemplu:
<ol type =”1” start=”3”>
<li> primul element< /li>
<li>al doilea element</li>

14
</ol>
<ol type=”a” start=”3”>
<li>primul element</li>
<li> al doilea element</li>
</ol>
Care vor fi afisate in browser astfel:
3.primul element
4.al doilea element
c.primul element
d.al doilea element
Observam ca indiferent de tipul caracterelor din fata elementelor de lista (1 sau a) valorile pe
care le ia atributul start sunt doar valori numerice.
2.5. Imagini
In cazul imaginilor utilizate pentru web prioritara este dimensiunea lor si apoi calitatea.
Astfel in cele mai multe caz uri se va face un compromis la calitate pentru a obtine o
dimensiune optima. Cele mai des intalnite imagini in paginile web sunt: .jpg – imagine de
calitate superioara (16.7 milioane de culori) dar de dimensiune mai mare. Se folosesc in
general in cazul ga leriilor sau a fotografiilor . .gif – imagine de calitate redusa (256 culori) dar
de dimensiune mai mica. .png – imagine de calitate redusa dar care suporta transparenta si
care impreuna cu .gif se folosesc pentru logo -uri sau imagini cu mai putine detalii .
Caile in html pot fi incadrate in 2 categorii: absolute si relative.
Caile absolute pot fi si ele la randul lor de 2 feluri: locale si online.
Cele locale presupun ca imaginea sa se afle pe acelasi calculator pe care se creeaza pagina
si sunt de forma: <img src =file:///C|/Users/Public/Pictures/SamplePictures/Desert.jpg /> .
Acest tip de cale nu este indicata din cauza faptului ca la eventuala mutare a folder -ului calea
catre imagine nu va mai fi valabila si deci imaginea nu va fi afisata.
Caile online presupun ca imaginea sa se afle pe un site online si vor arata de forma: <img
src=http://www.poze.ro/imagine.jpg />. Un dez avantaj pentru o astfel de cale ar fi atunci cand
site-ul nu este administrat de noi si nu avem control asupra imaginii. In cazul in care adresa
este chiar adresa site -ului nostru atunci o astfel de cale absolute poate fi folosita fara nicio
problema.

15
Caile relative presupun ca imaginea cu care facem legatura sa se afle in acelasi folder cu
restul site -ului. Astfel o imagine inserata folosind o cale relativa va fi afisata indiferent de
mutarea folder -ului.
De exemplu:
<img src=”imagine.gif”/> -presupun e ca imaginea si fisierul html sa se afle in acelasi folder
<img src=”poze/imagine.png”/> – se foloseste atunci cand imaginea se afla in folder -ul poze
care la randul lui sta impreuna cu pagina html in radacina aceluiasi folder .
<img src=”../imagine.jpg”/> -in acest caz imaginea se afla in radacina unui folder care contine
folder -ul unde se gaseste pagina html .
Caile relative pot fi folosite chiar daca site -ul este sau nu online.
Atribute pentru tag -ul <img/>:
alt: <img src=”imagine.jpg” alt=”text desc riptiv”/> Atributul are ca scop afisarea unui text
descriptive in locul imaginii in care acesta nu este afisata.
width si height : <img src=”imagine.png” width=”100” height=”200”/> Aceste atribute
stabilesc dimensiunile imaginii.
title : <img src=”poza.gif” title=”text descriptiv”/> Atributul stabileste un text descriptive care
va fi afisat la trecerea cursorului peste imagine.
align: <img src=”imagine.png” align=”left”/> In cazul in care inseram doua sau mai multe
imagini observam pozitionarea lor una langa cealalta.
2.6. Link -uri
Pentru a insera link -uri catre alte pagini html folosim tag -ul : <a href= http://www. google.com
>text</a> in browser va fi afisat textul din interiorul tag -ului iar la click pe el va trimite catre
adresa stab ilita cu ajutorul atributului href. Ca si in cazul imaginilor si aici atributul href este
obligatoriu. Valoarea lui va reprezenta pagina catre care dorim sa navigam. Adresele pot fi
externe sau interne. Astfel link -urile externe, catre alte pagini care nu apartin site -ului nostru,
sunt de forma http://www.domeniu.ro …Link -urile catre pagini apartinand site -ului pot fi
scrise folosind cai relative ex: contact.html ,dar se poate folosi si o adresa absoluta ex:
http://www.site.ro/contact.html.
target: Pe lan ga atributul href care stabileste adresa catre care trimite link -ul mai putem
folosi si atributul target care ia valori _parent sau _blank.Atributul target stabileste unde se va
deschide adresa de destinatie astfel:

16
<a href= http://www.google.com ”target=”_p arent”>google</a> se va afisa acelasi tab al
browser -ului pec and target=”_blank” va deschide pagina intr -un nou tab.
title: <a href=”pagina.html” title=”text descriptive”>text</a> In acest caz title afiseaza un
text dscriptiv la mouseover.

17
2.7. Tabele
Se insereaza cu tag -ul <table></table> dar cum un table nu poate exista fara cellule vom
avea nevoie si de alte tag -uri.Astfel o structura reala a unui table va arata de forma:
<table>
<tr>
<td>celula 1</td>
<td>celula 2</td>
<td>celula 3</td>
</tr>
<tr>
<td>c elula 4 </td>
<td>celula 4 </td>
<td>celula 4 </td>
</tr>
</table>
Observam tag -ul <tr></tr> care defineste un rand de table si tag -ul <td></td> care
defineste o celula.Dupa cum vedem pentru a define un table trebuie sa cream randuri si apoi,
in fiecare rand celulele.In consecinta in exemplul de mai sus am creat un t able cu 2 randuri si
3 celul pe fiecare rand.Fara nici un atribut tabelul va fi destul de rudimentar.
Atribute pentru <table> :
-border: acesta stabileste grosimea liniei de contur a tabelului.
-bordercolor: cu ajutorul acestui atribut setam culoarea liniei de contur.
-width si height: defines dimensiunile tabelului in pixeli.
-align: utilizant acest atribut cu valorile left si right sau center putem pozitiona tabelul pe
stanga paginii pe centru sau pe dreapta.Pentru o pozitionare mai corecta folosim C SS.
-cellspacing: stabileste distanta dintre cellule
-cellpadding: reprezinta distanta intre continutul celulelor si conturul acestora.
-valign: poate lua valorile: top, bottom, middle . Cu ajutorul lui putem alinia pe vertical
continutul din interiorul ce lulei
-rowspan: reprezinta numarul de randuri pe care dorim sa intindem celula, in cadrul aceleiasi
coloane.Aceasta intindere se face de la stanga spre dreapta.

18
-colspan: acesta ia valori numerice si reprezinta numarul de coloane pe care dorim sa
intindem celula, in cadrul aceluiasi rand.Aceasta intindere se face de sus in jos.
-title: ce afiseaza un text descriptive la mouseover.
2.8. Formulare
Prin intermediul unor formulare site -urile permit sa primim informatii de catre vizitatori.
Tag-ul respective pentru u n formular este: <form></form>
Cu ajutorul atributelor:
Action mentioneaza adresa scriptului care va interpreta formularul. Aceste scripturi pot fi
scrise in limbajele PHP, jps ,asp etc.
Method indica metoda folosita de brwoser pentru transmiterea formula rului. Poate lua valorile
get si post.
Enctype permite formului sa trimita anumite infromatii sau nu. Spre exemplu, daca nu ii dam
formularului enctype=”multipart/form -data”, nu putem trimite fisiere.
Un formular va fi de forma:
<form action=”fisier_proces are.php” method=metoda” enctype=”tip enctype”>
</form><input/>
2.8.1 Campuri din formular
Input -diverse controale din formular.In principiu, majoritatea campurilor din formular
sunt inputuri.Poate avea atributele:
-type indica tipul datelor care vor fi introduse :
text-text;
submit -trimite formularul;
reset -reseteaza formularul;
password -parola;
hidden – nu este vizibil, programatorul poate sa isi transmita anumite informatiil
checkbox -caseta de validare;
button -buton;
radio -selectarea unui singur element dintr -un grup;
file-fisier pentru upload;
image -butonul va fi inlocuit cu o imagine
name -numele asociat campului respectiv.Este folosit la prelucrarea datelor de catre scriptul
mentionat in action.

19
size-numarul de caractere vizibile din camp, nu e obligatoriu sa ap ara.
value -daca dorim sa ii dam o valoarea, nu e obligatoriu sa apara.
Un input va arata cam asa:
<input type=”tip” value=”valoare sau nimic” name=”nume” size=”valoare sau nu apare”/>.
Inputul e control nepereche.
Select – ne lasa sa alegem dintr -o lista.Avem posibilitatea sa afisam un text pentru
fiecare optiune, dar nu vom lucra cu valorile optiunilor.Concret:
<select name=”nume”>
<option value=”valoarea 1” >Text optiune 1</option>
<option value=”valoarea 2”>Text optiune 2 </option>
<option va lue=”valoarea 3”>Text optiune 3 </option>
<option value=”valoarea 4”>Text optiune 4</option>
</select>
Textarea -este o casuta de text, unde putem pune textul pe mai multe linii.Nu are
atributul value, ci continutul se pune intre tagurile pereche <text area></textarea>
<textarea name=”nume”>continut</textarea>
Motivul pentru care textarea nu are atributul value, este faptul ca putem pune in
continut si tag -uri html, care vor fi afisate in textarea.
Asadar , un form va arata:
<form action=”script.php” method=”post”>
Nume:<input type=”text” name=”nume”><br/>
Prenume:<input type=”text” name=”prenume”><br/>
<input type=”submit” value=”Trimite”>
<input type=”reset” value=”Sterge”>
</form>
Avem nevoie de un buton care sa transmita informatiile, e recomandabil sa folosim un input
de tip submit.

20
3. Limbajul de stilizare CSS
3.1. Introducere CSS
Este un limbaj de stilizare al elementelor html, al tagurilor html. Denumirea CSS provine
din expresia Cascading Style Sheets . In Web Design -ul mod ern, pentru stilizarea paginilor
web se foloseste numai CSS. Acest lucru inseamna ca de la culoarea literelor si a
backgroundului pana si la pozitionarea elementelor de pe o pagina web, totul este stilizat prin
CSS. Stilurile folosite pe o pagina pot fi in corporate in pagina respectiva sau pot fi chemate
din fisiere externe, fisiere css.
Pentru foloseirea acestui limaj de stilizare trebuie cunoscut limajul html.
3.2. Moduri de aplicare
1.Intern
2.Extern
3.Inline
3.2.1 CSS intern
Codul css intern se introduce in sectiu nea de head a documentului folosind tag -ul
<style type=”text/css”> aici sta codul css </style>. Atributul type=”text/css” indica browser –
ului tipul de cod ce se va regasi in interiorul tag -ului style.Browser -ele modern pot recunoaste
codul fara sa mai fie nevoie de atributul type deci tag -ul pentru css intern va fi, simplu
<style></style>.
CSS-ul intern formeaza intreaga pagina in care a fost inserat.
3.2.2 CSS extern
In cazul css -ului extern codul css se introduce intr -un fisier cu extensia .css , fara a se
mai folosi tag -ul <style> , si apoi se realizeaza legatura cu pagina html folosind tag -ul
<link rel=”stylesheet” type=”text/css” href=”fisier.css”/> Acest tag se insereaza tot in tag -ul .
Exact ca in cazul css -ului intern si aici se poate omite atributul type. Valoarea atributului href
reprezinta calea catre pagina .css. Css -ul extern are avantajul ca se poate lega de oricate pagini
html asftel incat este foarte eficient in cazul unui site cu mai multe pagini.

21
3.2.3 CSS inline
Se introduce direct pe tag -ul droit fo losind atributul style <tag style=”cod css”><tag>
Orice tag html accepta atributul style. Un foarte mare dezavantaj pe care il are css -ul inline
este faptul ca incarca foarte mult codul html (trebuie inserat pentru fiecare tag in parte).
Avantajul principa l il constituie prioritatea pe care o are fata de css intern sau extern. De
exemplu: textul unui paragraf este colorat in rosu prin intermediul css -ului intern, in albastru
folosind css extern si in verde cu css inline; browser -ul va afisa paragraful color at cu verde.
3.3. Sintaxa
1. Tipuri de selectori
2.Proprietati css
3.3.1 Tipuri de selector
1. Direct
2.Class
3.Id
3.3.2 Selectorul direct
<head>
<style>
p{proprietate:valoare;}
</style>
</head>
<body>
<p>exemplu 1 </p>
<p>exemplu 2 </p>
</body>
In exemplul prezentat anterior ne concentram pe selectorul direct p.
Caracteristici ale selectorului direct:
-orice tag html poate reprezenta un selector direct
-numele selectorului este dat de numele tag -ului fara “<” si “>”
-formateaza toate tag -urile cu acelasi nume din pagi na
-in cazul in care dorim sa formatam un paragraph intr -un mod diferit fata de restul
paragrafelor va trebui sa folosim un alt tip de selector.

22
3.3.3 Selectorul class
<head>
<style>
.abc{proprietate:valoare;}
</style>
</head>
<body>
<tag class=”abc”></tag>
</body>
In acest exemplu de concentram pe selectorul .abc.
Caracteristici ale selectorului class:
-numele unui selector de tip class poate fi orice text precedat de caracterul “.”
-formateaza doar tag -urile care au atributul class=”abc”
-orice tag html accepta acest atribut
-un selector class poate fi folosit pentru a formata oricate tag -uri din aceeasi pagina html
3.3.4 Selectorul ID
<head>
<style>
#abc{proprietate:valoare;}
</style>
</head>
<body>
<tag id=”abc”></tag>
</body>
In acest exemplu ne concentram pe selectorul id #abc.
Caracteristici ale selectorului id:
-numele unui selector de tip id poate fi orice text precedat de caracterului “#”
-formateaza doar tag -urile care au atributul id=”abc”
-orice tag html accepta atributul id
-un selector id poate fi fol osit o singura data intr -o pagina html
-selectorii de tip id se folosesc pentru elemente unice in pagina

23
3.4. Proprietati CSS
Proprietatile pot fi impartite in urmatoarele categorii:
 pentru formatare de text
 pentru liste
 pentru link -uri
 fundal (background)
 pozitionare
color:green; – stabileste culoarea text -ului si poate lua diferite valori:
-numele culorii in engleza
-un cod hexazecimal (#00ff00)
– rgba (0.255,0,0,5) cu ajutorul acestei valori putem folosi culori transparente
font-size:16px; – acesta stabil este dimensiunea font -ului in pixeli;
font-family: Verdana, Arial, sans serif; -stabileste fotul cu care este scris textul.
font-family: stabileste denumirea fontului
src: stabileste calea catre fisier
font-style: italic; -cu ajutorul acestei proprietati putem face font -ul italic.
font-weight: bold; – folosind aceasta proprietate putem regla grosimea fontului
text-align: left; -aceasta proprietate ne permite alinierea pe orizontala a unui text.
text-indent: 20px; – insereaza un spatiu intre marginea din stanga si primul rand de text al
elementului selectat.
text-decoration:none; – aceasta proprietate ne permite decorarea textului.
text-transform:lowercase; – permite transformarea unui text scris cu majuscule intr -unul scris
cu litere mici.
line-height:30p x; -proprietatea line -height stabileste inaltimea unui rand
word -spacing:20px; stabileste distanta dintre cuvinte
letter -spacing:10px; stabileste dinstanta dintre litere
3.4.1 Proprietati CSS pentru formatarea listelor
list-style -type : – cu aceasta proprieta te putem modifica simbolurile/caracterele din fata
elementelor de lista.
list-style -imagine:url(‘imagine.jpg’); – atunci cand vrem o imagine in loc de un caracter sau
un simbol vom folosi list -style -image. Intre p aranteze si ghilimele (' ' sau” ”) se trece calea
catre imaginea dorita.

24
3.4.2 CSS pentru formatarea link -uri
In acest caz nu vom vorbi despre selectori mai degraba decat despre proprietati. Astfel:
a:link{proprietate:valoare;} – formateaza link -urile nevizitate
a:visited{proprietate:valoare;} –formateaza link-urile vizitate
a:hover {proprietate:valoare;} – formateaza link -urile in momentul click -ului pee le
Cu ajutorul acestor selector putem formata link -urile in functie de starea lor.
Selectorii prezentati anterior vor formata toate link -urile din pagina cee ace nu este
intotdeauna ceva de dorit.Si avem urmatoarea sintaxa:
a.sus:link{proprietate:valoare;}
a.sus:visited{proprietate:valoare;}
a.sus:hover{proprietate:valoare;}
a.sus:active{proprietate:valoare;}
In acest caz vor fi formatate doar tag -urile <a href=”…” class=”sus”>link</a> astfel putem
control ace link -uri vrem sa formatam.
Este indicat sa folosim toate cele 4 pseudo -clase pentru a nu -i permite browser -ului sa
aplice formatarea default.
3.4.3 Proprietati CSS pentru fundal (background)
background -color:#ff00ff; -stabileste culoarea de fundal a elementului.
background -color -image:url(‘imagine.png’); -cu ajutorul acestei proprietati putem insera o
imagine pe fundal.
background -repeat:no -repeat; -folosind aceasta proprietate stabilim daca imaginea de fund al
se repeata.
background -position:left top; -pozitioneaza imaginea de fundal.
background:#ff0000 url(‘imagine.gif’) no -repeat center top; -poate concatena toate valorile
discutate anterior.
3.4.4 Proprietati CSS pentru pozitionare
In CSS pozitionarea se realize aza cu ajutorului div -urilor. Tag -ul <div></div> nu permite
pozitionarea altor elemente pe acelasi rand. Ele vor putea fi formatate si pozitionate in pagina
folosind urmatoarele proprietati:
width:100px; -ce stabileste latimea in pixeli
height:100px; -stabileste inaltimea in pixeli
border:2px solid black; -stabileste linia de contur
padding:10px; -reprezinta distanta intre continutul elementului si conturul acestuia.

25
Proprietatea padding este de 4 tipuri: top, left,right,bottom.
margin:20px; – aceasta propr ietate stabileste dinstanta dintre elementul slectat si elementele
vecine. Aceasta proprietate este de 4 tipuri exact ca cele prezentate in proprietatea padding.
float: cu ajutorul acestei proprietati putem pozitiona div -urile unul langa altul pe orizontal a.
clear:both; – proprietatea clear ignora float -ul elementului anterior.
position – aceasta proprietate poate lua valorile relative sau absolute.
z-index: -stabileste ordinea de suprapunere in cazul in care elementele au fost suprapuse
folosind position.
overflow: -este proprietatea cu ajutorul careia controlam afisarea continutului atuni cand
eaceasta depaseste suprafata elementului de care apartine.
overflow:visible; – este valoarea default.
overflow:hidden; – continutul care depaseste suprafata elementul ui este ascuns
overflow:auto; -in cazul acesta browser -ul adauga o bara de scroll in cazul in care continutul
depaseste suprafata elementului de care apartine.
transition: -aceasta proprietate asigura trecerea intre starea default a unui element si
modificar ele care apar la hover.
transition:width 3s; prima valoarea reprezinta proprietatea pe care o dorim sa aplicam tranzitia
si a 2 -a reprezita perioada de timp in care se realizeaza tranzitia.

26
4. Limbajul de programare JavaScript
4.1. Introducere in JavaScript
JavaScript este o limbaj dinamic multi -paradigmă, cu tipuri și operatori, obiecte standard
incluse și metode. Sintaxa sa este bazată pe cea a limbajele Java si C — multe structure ale
acestor limbaje se aplică și pentru JavaScript. JavaScript face posibilă programarea
orientată pe obiecte folosind prototipurile de obiecte, în loc de clase
JavaScript este folosit în prezent de un număr incredibil de mare de aplicații de profil
înalt, ce demonstrează că cunoaștere profundă a acestei tehnologii este o abilitat e importantă
pentru orice dezvoltator web sau mobile.
JavaScript a fost creat în 1995 de Brendan Eich, un inginer la Netscape, și lansat prima
oară cu Netscape 2 la începutul anului 1996. Original ar fi trebuit să se numească LiveScript,
dar a fost redenum it din cauza unei decizii de marketing în încercarea de a profita de
popularitatea limbajului Java al Sun Microsystem – chiar dacă cele două au puțin în comun.
Aceasta a fost o sursă de confuzie încă de la început.
Spre deosebire de majoritatea limbajelor de programare, JavaScript nu cunoaște conceptele de
input sau output (intrare sau ieșire). Este proiectat să ruleze ca un limbaj de scripting într -un
mediu gazdă și este la latitudinea gazdei să furnizeze mecanismele de comunicare cu lumea
înconjurătoare. Cel mai uzitat mediu gazdă este browserul, însă interpretori de JavaScript pot
fi găsiți într -un număr uriaș de alte locuri, inclusiv Adobe Acrobat, Adobe Photoshop,
imaginile SVG, motorul Yahoo Widget, medii server -side precum Node.js , baze de date
noSQL așa cum este Apache CouchDB , calculatoare încorporate, medii de lucru desktop cum
este GNOME , dar în și mai multe altele.

4.2. Numere
Numerele în JavaScript sunt "valori pe 64 -bit cu dublă precizie în format IEEE 754",
conform specificației. Acest lucru are niște consecințe interesante. Nu există întreg în
JavaScript, așa ca trebuie puțină atenție cu aritmetica spre deosebire de C sau Java unde exis tă
tipul întreg. Atenție la lucruri ca acesta:
0.1+0.2==0.3000000000004

27
Se poate converti un string într -un integer folosind funcția built -in parseInt() . Aceasta
ia baza de conversie ca un al doilea argument optional, care ar trebui dat de fiecare data:

Se pot parsa numere cu virgula mobila folosind functia built-in parseFloat() care
foloseste tot timpul baza 10 spre deosebire de vara ei parseInt().
Se poate folosi si operatorul unar + pentru a converti valori in numere:

O valoare speciala numita NaN (pe scurt pentru "Not a Number") este folosita pentru a
returna daca un string nu este numeric:

JavaScript are de asemenea si valorile special Infinity si –Infinity:

4.3. Siruri de caractere
Șirurile din JavaScript sunt secvențe de caractere. Mai exact, sunt secvențe de caractere
Unicode , fiecare caracter reprezentând un număr de 16 biți. Aceasta ar trebui să fie o
întâmpinare a tuturor celor care au avut de -a face cu internaționalizarea.
Pentru a găsi lungimea unui șir, accesați length proprietatea:

JavaScript are un tip boolean, cu valori posibile true și false (ambele cuvinte
cheie). Orice valoare poate fi convertită la un boolean conform următoarelor reguli:
1.false, 0, sirul gol (“”), NaN, null si undefined toate devin false

28
2.toate celelalte valori devin true
Se poate efectua aceasta conversie in mod explicit utilizand Boolean() functia:

Cu toate acestea, acest lucru este rar necesar, deoarece JavaScript va efectua în mod
silențios această conver sie atunci când se așteaptă la un boolean, cum ar fi într -o if declarație
.Din acest motiv, vorbim uneori despre "valori adevărate" și "valori fa lse", adică valorile care
devin true și false , respectiv, convertite în booleani. Alternativ, astfel de valori pot fi numite
"trist" și "falsy", respectiv.
4.4. Variabile
Noi variabile în JavaScript sunt declarate folosind var cuvântul cheie:

Dacă declarați o variabilă fără atribuirea nici unei valori, este tipul acesteia undefined.
O diferență importantă față de alte limbi, cum ar fi Java, este că în JavaScript blocurile nu au
un domeniu de aplicare; numai funcțiile au un dom eniu de aplicare. Deci, dacă o variabilă este
definită folosind varo instrucțiune compusă (de exemplu, în interiorul unei ifstructuri de
control), aceasta va fi vizibilă pentru întreaga funcție.
4.5. Operatori
Operatorii numerice JavaScript sunt +, -, *, /și %- care este operatorul restul. Valorile sunt
atribuite utilizând =, și există, de asemenea, instrucțiuni de asociere complexă precum +=și –
=. Acestea se extind la .x = x operator y.

Putem utiliza ++și –pentru a incrementa și decrement, respectiv. Aceste a pot fi folosite ca
operatori de prefix sau postfix.
+Operatorul are , de asemenea , concatenare șir:

29

4.6. Comparatii
Comparațiile în JavaScript se poate face folosind <, >, <=și >=. Acestea funcționează atât
pentru șiruri cât și pentru numere. Egalitatea este puțin mai simplă. Operatorul dublu -egal
efectuează coerciția de tip dacă îi dați diferite tipuri, cu rezultate uneori interesante:

Pentru a evita coerci ția de tip, utilizați operatorul triple -equals :

Există !=și !==operatori.
4.7. Structuri de control
JavaScript are un set similar de structuri de control pentru alte limbi din familia
C. Declarațiile condiționale sunt acceptate de if si else.
JavaScript are while bucle si do -while bucle. Primul este bun pentru buclă de bază; a
doua pentru buclele în care doriți să vă asigurați că corpul bucla este executat cel puțin o data.
Structura for permite furnizarea infromatiilor de control pentru o bucla pe o singura linie
for (var i=0; i<3;i++){
}
Operatorii && si || acesti operanzi sunt utili pentru verificarea obiectelor null inainte de a le
accesa atributele:

Sau pentru starea valorilor implicite:

30
4.8. Obiecte
Obiectele JavaScript sunt pur si simplu colectii de perechi de nume -valoare. Ca atare , ele
sunt similar cu:
 Dictionare in Python
 Hashes in Perl si Ruby
 Tabele Hash in C si C++
 HashMaps in Java
 Matrice ascoativa in PHP
Faptul ca aceasta strucutra de date este atat de larg utilizata este o dovada a versatilitatii
sale.
Orice program JavaScript imiplica in mod natural o multime de cautari de tabele de tip
hash.
Partea "nume" este un șir JavaScript, în timp ce valoarea poate fi o rice valoare JavaScript –
inclusiv mai multe obiecte. Aceasta permite construirea structuri de date cu complexitate
arbitrară.
Există două moduri de bază pentru a crea un obiect gol:

Si:

Odată create, proprietățile obiectului pot fi accesate din nou în unul din două moduri:

Si:

31
4.9. Vectori
Arrays în JavaScript sunt de fapt un tip special de obiect. Ele funcționează foarte mult ca
obiectele obișnuite (proprietățile numerice pot fi accesate în mod natural numai cu ajutorul
sintaxei []), dar au o proprietate magică numită " length '. Acesta este întotdeauna unul mai
mult decât cel mai înalt index din matrice.
Vechea modalitate de a crea matrice este după cum urmează :

Array -urile au mai multe metode:
a.toString()
a.toLocaleString()
a.concat(item[,itemN]) – aceasta returneaza o noua matrice cu elemente adaugate pee a.
a.join(step)
a.pop() – indeparteaza si returneaza ultimul element
a.push(item[,itemN]) – push adauga unul sau mai multe elemente la sfarsit
a.reverse()
a.shift()
a.slice(start,end) returneaza un sub -matrice
a.sort([cmpfn]) utilizeaza o functie optionala de comparative
a.splice(start,delcount[,item]) – permite modificarea unei matrice stergand o sectiune si
inlocuindu -l cu mai multe elemente.
a.unshift([item]) –prependa elemente la inceputul matricei
4.10. Functii
Funcțiile sunt componenta de bază în înțelegerea JavaScript. Funcția cea mai de bază nu
ar putea fi mult mai simplă:

32
O functie JavaScript poate lua 0 sau mai multi parametric numiti. Organismul functiei
poate contine cat mai multe declaratii dorite de utilizator si poate declara propriile variabile
care sunt locale pentru acea functie. Instructiunea return poate fi utilizata pentru a returna o
valoare in orice moment, termand functia .Daca nu se utilizeaza nici o declarative de returnare
, JavaScript va afisa undefined.
Parametrii numiti se dovedesc a fi mai mult ca linii directoare decat orice altceva.Se poate
apela o functie fara a trece parametrii pe care ii asteapta, caz in care se va seta undefined.

De as emenea se pot trece mai multe argumente decat asteapta functia:

Functiile au acces la o variabila suplimentara numita in interiorul corpului lor arguments,
care este un obiect array care detine toate valorile transmise functiei.
Exemplu:

33
5. Bootstrap
5.1. Introducere Bootstrap
Conceptul Responsive Web Design se referă la tehnica de creare a unui website ce poate fi
ulterior vizualizat optim indiferent de dispozitivul folosit. Zi de zi tot mai multe platforme,
browsere și dispozitive mobile își fac locul în piață. Tehnica Responsive Web Design a aparut
pentru că acest lucru să nu mai afecteze modul în care un website diferă în funcție de acești
factori.
Cu alte cuvinte, Responsive Web Design reprezinta tehnica ce sugereaza ca design -ul web
și codarea unui web site trebuie să răspunda comportamentului și mediului utilizatorului in
funcție de rezolutia ecranului, platforma și orientare.
Tehnica Responsive Web Design ajută vizitatorii prin oferirea unui website adaptabil în
functie de rezoluția dispozitivului folo sit pentru vizualizarea acestuia. Aceast lucru se obține
prin folosirea de media query -uri de CSS3, imagini flexibile, g rid-uri fluide si multe altele.
În ziua de azi, Responsive Web Design nu mai reprezintă o tehnică nouă în teste, ci o
tehnică în tendinț e, poate chiar cea mai folosită din 2013 .Pentru a ușura aceasta tehnică de
Responsive Web Design, tot mai multe framework -uri au aparut. Printre cele mai cunoscute
se numara Bootstrap, Foundation ș i Skeleton.

34
6. Baze de date
6.1. Definitia bazei de date
În Enc iclopedia Britanică baza de date este definită astfel:
Prin bază de date se înțelege orice colecție de date sau informații, care este organizată
special, în vederea consultării rapide a datelor de către utilizatorul unei aplicații, care rulează
pe un calcu lator. Bazele de date sunt structurate astfel încât să faciliteze memorarea,
regăsirea, modificarea și ștergerea datelor, prin diferite operații specifice. Bazele de date se
pot memora pe disc sau pe bandă magnetică, pe disc optic sau pe orice alt fel de tip de
memorare secundară.
Prin bază de date se înțelege o colecție de date sau informații care sunt organizate astfel ca
ele să fie căutate și regăsite rapid, de obicei, de către un calculator.
6.2. Ce este SQL server
Microsoft SQL Server este un sistem de gestionare de baze de date relaționale (RDBMS)
produs de compania americană Microsoft Corp. Limbajele primare de interogare sunt MS –
SQL și T -SQL.
Suportă versiunea companiei Microsoft de SQL ( Structured Query Language – limbaj
structurat de interogări), cel mai răspândit limbaj pentru bazele de date. Este un sistem pentru
întreprinderi – se poate aplica bazelor de date de dimensiuni foarte mari.
O bază de date , uneori numită și bancă de date (abreviat BD), reprezintă o
modalitate de stocare a unor informații și date pe un suport extern (un dispozitiv de stocare),
cu posibilitatea extinderii ușoare și a regăsirii rapide a acestora. La prima vedere sarcina p oate
părea banală. Totuși, în condițiile în care este vorba de a lucra cu milioane de elemente,
fiecare putând consta din mari cantități de date care trebuie accesate simultan prin Intern et de
către mii de utilizatori răspândiți pe întreg globul; și în condițiile când disponibilitatea
aplicației și datelor trebuie să fie permanentă (de ex. pentru a nu pierde ocazia de a încheia
afaceri), soluțiile bune nu sunt de loc simple.
De obicei o ba ză de date este memorată într -unul sau mai multe fișiere . Bazele de date
sunt manipulate cu ajutorul sistemelor de gestiune a bazelor de date .
Cel mai răspândit tip de baze de date este cel relațional, în care datele sunt memorate
în tabele . Pe lângă tab ele, o bază de date relațională mai poate conține: indecși, proceduri

35
stocate, declanșatori, utilizatori și grupuri de utilizatori, tipuri de date, mecanisme de
securitate și de gestiune a tranzacțiilor etc.
Scurtă istorie
Codul de bază pentru Microsoft SQ L Server își are originile în Sybase SQL Server și a
reprezentat intrarea Microsoft pe piața bazelor de date pentru întreprinderi, concurând cu
Oracle, IBM și Sybase. Microsoft, Sybase si Ashton -Tate s -au unit pentru a crea și a scoate pe
piață prima versi une numita SQL Server 4.2 pentru Win OS/2. Mai tărziu Microsoft a
negociat pentru drepturi de exclusivitate la toate versiunile de SQL Server scrise pentru
sistemele de operare Microsoft. Sybase și -a schimbat ulterior numele în Adaptive Server
Enterprise, pentru a evita confuzia cu Microsoft SQL Server.
SQL Server 7.0 a fost primul server de baze de date bazat pe GUI. O variantă de SQL Server
2000 a fost prima variantă comerciala pentru arhitectura Intel.
Descriere
Microsoft SQL Sever folosește o variantă de SQL numită T -SQL, sau Transact -SQL, o
implementare de SQL -92 (standardul ISO pentru SQL) cu unele extensii. T -SQL in principal
adaug ă sintaxa adițională pentru procedurile stocate si pentru tranzacții. Standardele SQL
necesită ACID; acesta este un acronim pentru cele 4 condiții pentru orice tranzacție:
atomicitate, consistență, izolare, durabilitate. MS SQL Server suportă ODBC (Open Da tabase
Connectivity).
6.3. Tranzactii ACID
Atomicity (Atomicitate) – tranzacțiile sunt o entitate de tip “totul sau nimic” făcându -se
toți pașii sau nici unul
Consistency (Consistență) – asigură faptul că datele sunt valide atât înainte cât și după
tranzacție. Integritatea datelor trebuie păstrată și structura internă a datelor trebuie să fie într -o
stare validă
Isolation (Izolare) – o tranzacție nu trebuie să fie dependentă de o altă tranzacție care
poate să aibă loc în mod concurent. O tranzacție nu trebuie să vadă datele altei tranzacții ce
este într -o stare intermediară. Trebuie să vadă datele așa cum au fost înainte de începerea
tranzacției sau după încheierea acesteia.
Durability (Durabilitate) – efectele tranzacției sunt fixate după ce tranzacția este exec utată, și
orice modificări vor putea fi anulate după un eșec al sistemului Tranzacții SQL

36
6.4. Ce este limbajul SQL
SQL (Structured Query Language – Limbaj Structurat de Interogare) este un limbaj de
programare specific pentru manipularea datelor în sistemele de manipulare a bazelor de date
relaționale (RDBMS), iar la origine este un limbaj bazat pe algebra relațională. Acesta are ca
scop inserarea datelor, interogații, actualizare și ștergere, modificarea și crearea schemelor,
precum și controlul accesului la date. A devenit un standard în domeniu (standardizat ANSI –
ISO), fiind cel mai po pular limbaj utilizat pentru crearea, modificarea, regăsirea și
manipularea datelor de către SGBD -urile (Sistemele de Gestiune a Bazelor de Date)
relaționale. Pe lângă versiunile standardizate ale limbajului, există o mulțime de dialecte și
variante, unel e proprietare, fiind specifice anumitor SGBD -uri și de asemenea conținând
extensii pentru a suporta SBD -urile (Sistemele de Baze de Date) obiectuale (obiectual –
relaționale).
SQL permite atât accesul la conținutul bazelor de date, cât și la structura acesto ra.
6.5. Elementele Limbajului SQL
Limbajul SQL este divizat în următoarele elemente:
Clauze, care sunt componente ale instrucțiunilor și interogărilor.
Expresii, al căror efect este producerea de valori scalare sau tabele .
Predicates, pot specif ica condiții care sunt evaluate de SQL conform logicii
ternare sau logicii booleene , în scopul limitării efectelor instrucțiunilor, sau pentru a influența
cursul programului.
Interogările, au ca scop regăsirea datelor după criterii specifice.
Instrucțiunile, pot avea un efect persistent asupra datelor sau structurii datelor, sau pot
controla tranzacțiile, conexiunile sau cursul programului. În general, instrucțiunile SQL se
termină cu caracterul punct -virgulă (";"), deși acest lucru nu este obligatoriu în toate
platformele SQL. Spațiile albe suplimentare sunt ignorate, dar ele pot fi folosite pentru
lizibilitatea codului SQL.

37
6.6. Tipuri de date in SQL
Oricărei coloane (sau câmp) dintr -un tabel SQL îi este asignat un tip de dată, la fel ca în
toate celelalte limbaje de programare.
Tipurile de date sunt următoarele:
 CHARACTER (sau CHAR) – șir de caractere
 INTEGER (sau SMALLINT) – număr întreg
 FLOAT, REAL sau DOUBLE PRECISION – număr real
 NUMERIC(precision, scale) sau DECIMAL(precision, sc ale) – număr zecimal , unde
“precision” înseamnă numărul de cifre din partea întreagă, “scale” înseamnă numărul
de zecimale.
 DATE – data zilei.
 TIME – ora.
6.7. Interogari
Cea mai des utilizată instrucțiune în SQL este instrucțiunea SELECT.
Un exemplu de select :
private static DbMappingView GetView16(){
return new DbMappingView (@"
SELECT VALUE – Constructing Sectii
[eHMWS.DAL.Sectii](T1.Sectii_SectiiID, T1.Sectii_Cod, T1.Sectii_Titlu,
T1.Sectii_Saloane, T1.Sectii_NumarLocuri) WITH
RELATIONSHIP(CREATEREF(eHMWSContext.Agenda,
ROW(T1.[Agenda_Sectii.Agenda_Sectii_Source.AgendaID]),[eHMWS.DAL.Agenda]),[eHMWS.DAL.A
genda_Sectii],Agenda_Sectii_Target,Agenda_Sectii_Source)
FROM (
SELECT
T.SectiiID AS Sectii_SectiiID,
T.Cod AS Sectii_Cod,
T.Titlu AS Sectii_Titlu,
T.Saloane AS Sectii_Saloane,
T.NumarLocuri AS Sectii_NumarLocuri,
True AS _from0,
T.Agenda_AgendaID AS [Agenda_Sectii.Agenda_Sectii_Source.AgendaID]
FROM CodeFirstDatabase.Sectii AS T
) AS T1" );
}

38
6.8. Instructiunile limbajului de manipul are a datelor
 INSERT – inserează un articol într -o tabelă:
INSERT INTO tabel (câmp1, câmp2, …) VALUES (valoare1, valoare2, …);
 UPDATE – actualizează un set de articole:
UPDATE tabel SET câmp = valoare [WHERE condiție];
 DELETE – șterge un set de articole:
DELETE FROM tabel [WHERE condiție];

6.9. Tranzactii
Tranzacțiile sunt utilizate pentru a controla în ce condiții se desfășoară o succesiune a
instrucțiunilor de manipulare a datelor.
Instrucțiuni:
START TRANSACTION (sau BEGIN WORK , BEGIN TRANSACTION , în funcție de
dialectul SQL) Început de tranzacție.
SAVE TRANSACTION (sau SAVEPOINT ) salvează starea bazei într -un punct al
tranzacției
COMMIT Operează toate operațiile tranzacției ca fiind permanente.
ROLLBACK Anulează toate operațiile tranzacției începâ nd cu ultimul COMMIT.
Instrucțiunile COMMIT și ROLLBACK termină tranzacția curentă și deblochează datele.
Exemple:
CREATE TABLE tbl_1(id int);
INSERT INTO tbl_1(id) VALUES(1);
INSERT INTO tbl_1(id) VALUES(2);
COMMIT;
UPDATE tbl_1 SET id=200 WHERE id=1;
SAVEPOINT id_1upd;
UPDATE tbl_1 SET id=1000 WHERE id=2;
ROLLBACK to id_1upd;
SELECT id from tbl_1;

39
START TRANSACTION;
UPDATE Account SET amount=amount -200 WHERE account_number=1234;
UPDATE Account SET amount=amount+200 WHERE account_number=2345;
IF ERRORS= 0 COMMIT;
IF ERRORS<>0 ROLLBACK;

6.10. Limbajul de definire a datelor
Limbajul de definire a datelor (DDL) gestionează structura datelor și indexului.
Instrucțiuni:
CREATE TABLE creează un tabel în mod linie de comandă:
CREATE TABLE [dbo].[Departament] (
[DepartamentID] INT IDENTITY (1, 1) NOT NULL,
[Cod] INT NOT NULL,
[Name] NVARCHAR (50) NOT NULL,
[Buget] MONEY NOT NULL,
[SectiiID] INT NULL,
CONSTRAINT [PK_dbo.Departament] PRIMARY KEY CLUSTERED ([DepartamentID] ASC),
CONSTRAINT [FK_dbo.Departament_dbo.Sectii_SectiiID] FOREIGN KEY ([SectiiID] )
REFERENCES [dbo].[Sectii] ([SectiiID] ));
ALTERT TABLE modifica structura unui tabel existent prin:
Redenumirea/adaugarea/stergerea/schimbarea structurii unei coloane sau index:
Redenumirea unui tabel
ALTER TABLE tabel RENAME TO nume_nou_tabel;
Adăugarea de câmpuri noi
ALTER TABLE table_name ADD ( câmp1 def1, col2 def2, … );
Exemplu:
ALTER TABLE supplier ADD (supplier_name varchar2(50), city varchar2(45));
Modificarea structurii unui câmp
ALTER TABLE table_name MODIFY (câmp1 tip1, câmp2 tip2, … );
Exemplu:

40
ALTER TABLE supplier MODIFY ( supplier_name varchar2(100) not null, city
varchar2(75));
Ștergerea unui câmp
ALTER TABLE tabel DROP COLUM N câmp;
Exemplu:
ALTER TABLE supplier DROP COLUMN supplier_name;
Redenumirea unui câmp
ALTER TABLE tabel RENAME COLUMN nume_vechi TO nume_nou;
Exemplu:
ALTER TABLE supplier RENAME COLUMN supplier_name to sname;
 TRUNCATE TABLE – Șterge toate articolele unu i tabel:
TRUNCATE TABLE tabel;
 DROP TABLE – Șterge tabelul:
DROP TABLE tabel;

41
7. jQuery
7.1. Introduce jQuery
jQuery este o platforma de dezvoltare JavaScript , conceputa pentru a usura si imbunatati
procese precum traversarea arborelui DOM in HTML, managementul inter -browser al
evenimentelor, animatii si cereri tip AJAX. jQuery a fost gandit sa fie cat mai mic posibil,
disponibil in toate versiunile de browser e importante existente si sa respecte filosofia
„Unobtrusive JavaScript”. Biblioteca a fost lansata in 2006 de catre Jhon Resig.
7.2. Caracteristici
jQuery se poate folosi pentru a rezolva urmatoarele problem specific programarii web:
 selectii de elemente in ar borele DOM folosind propriul motor de selectii open source
Sizzle , un proiect nascut din jQuery.
 parcurcerea si modificarea arborelui DOM
 inregistrarea si modificarea evenimentelor din browser
 manipularea elementelor CSS
 efecte si animatii
 cereri tip AJAX
 extensii
 utilitati -versiunea browser -ului , functia each.

7.3. “Hello world” in jQuery
Cunoscutul program “Hello world” in jQuery

42
7.4. Extensii
Plugin -urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery.
Arhitectura sa permite progr amatorilor să dezvolte subaplicații bazate în biblioteca principală
care extind funcțiile de bază jQuery cu funcții specifice plugin -ului. În acest fel biblioteca
principală poate ocupa foarte puțin spațiu, iar extensiile necesare în anumite pagini web pot fi
încarcate la cerere, doar când este nevoie de ele.Exista un set de extensii principal numit
jQuery UI(User Interface). jQuery UI ofera un set de extensii pentru interactivitate de bază,
efecte mai complexe decât cele din biblioteca de bază și teme de c ulori. Avantajul jQuery UI
față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu
dezvoltarea bibliotecii principale, minimizând riscul de incomptibilitate.
Orice programator poate crea o extensie și jQuery oferă pub licare în catalogul de pe
pagina proiectului în diversele categorii disponibile

43
8. Aplicatie WEB de prezentare a produselor
O aplicatie web este un program care ruleaza intr -o arhitectura client -server folosind
tehnologiile deschise World Wide Web. Ele inl ocuiesc modelele in care atat serverul cat si
clientul ruleaza tehnologii proprietar,mentenanta aplicatiilor de pe partea de client fiind prea
complexa, costisitoare si susceptibila la erori.
Pentru acest tip de aplica tie am utilizat diverse tehnologii pr ecum:
Limbajul HTML
Limbajul de stilizare CSS
Limbajul de programare JavaScript
Limbraria jQuery
Bootstrap
Sql Baze de date
PHP
8.1. Functionalitatile aplicatiei
Principalul scop al acestei a aplicatii web este atragerea utilizatorilor spre oferta online de
produse si servicii. Orice firma sau antreprenor are o prezenta online. Este important insa sa
se evalueze nu numai scopul ci si obiectivele marketingului elect ronic pe care site -ul trebuie
sa le atinga.
Urmatoarele obiective ale aceste aplicatii sunt:
 Sa ofere noi oferte de vanzare / sa creasca vanzarile
 Sa atraga clientii prin calitatea produsului
 Sa ajute la exitinderea afacerii
 Sa creeze o comunitate online care sa fie semnificativa pentru publicul tinta.
Pentru a atrage utilizatorii pentru accesarea site -ului trebuie avute in vedere cateva beneficii:
 Sa gaseasca informatii
 Sa fie multumiti de calitatea produsului
 Sa se puna in evidenta dovada de profesionali sm
 Sa cumpere
Daca aplicatia nu ofera cele enuntate anterior, nu se va intampla nimic.Principalul scop al
site-ului trebuie sa satisfaca nevoile utilizatorului. Cu un design simplu si cat mai accesibil.

44
8.2. Bara de navigare
Aplicatia contine in partea superioara bara de navigare ce reprezinta o sectiune a unei pagini
ce are ca scop furnizarea link -urilor de navigare pe pagini diferite.Aceasta se imparte pe 4
cateogrii cum ar fi:
 Acasa
 Teme
 Contact

Figura 8.1 Bara de navigare
Codul sursa pentru bara de navigare este urmatorul

8.2.1 Acasa
In aceasta sectiune este prezentat prima pagina ce are ca scop afisarea a cate 2 exemple
de fotografii din fiecare tema prin intermediul unei functii in jQuery de tip carusel . Acesta
functie include suport pentru comenzile si indicatorii anteriori urmatori, nominalizeaza
automat dimensiunile fotografiilor, ea este programata ca dupa un anumit timp atunci cand nu
este utilizata sa deruleze fotografiile automat.
Ea fi ind vizibila in apli catie in figura 8.2 :

45

Figura 8.2 Functia carusel

8.2.2 Teme
Aceasta sectiune din bara de navigare contine un dropd onn ce va afisa atunci cand e
accesat, o lista cu cele 3 tip -uri de teme si anume:

Figura 8.3 Butonul dropdown
Codul sursa fiind:

46

In lista avem 3 tipuri de teme:
 Peisaje
 Nunti
 Petreceri
Fiecare pagina fiind similara una cu cealalta, diferenta dintre ele sunt doar fotografiile pe
domenii diferite.
O pagina din aceasta lista contine 6 exemple de fotografii din care utilizatorul poate sa-si
formeze o parere despre calitatea si profesionalismul de care da dovada.
Ea este prezentata in figura 8.4 :

Figura 8.4 Tipul de pagina

47
8.2.1 Contact
Cu ajutorul acestui contact ce are ca scop interactiunea cu utilizatorii ce aceseaza site -ul prin
intermediul unui formular conectat la server printr -o baza de date.

Figura 8.5 Formular
Completand formularul de mai sus cu informatiile cerute, aceste informatii vor fi trimise catre
baza de date prezentat in figura 8.6 :

48

Figura 8.6 Baza de date a aplicatiei
Pentru a tine serverul deschis am folosit un acronim pe nume XAMPP el este capabil
de a servi pagini dinamice, actioneaza ca un server web , cu ajutorul acestuia baza de d ate este
pornita si ori de cate ori utilizatorul acceseaza site -ul si compl eteaza formularul, reusesc sa iau
legatura cu ei gasindu -i in baza de date.
Programelul este prezentat in figura 8.6 :

Figura 8.6 Aplicatia XAMPP

49
Pe langa formularul prezentat mai sus, in aceasta secventa am mai adaugat si
localizarea prin google maps s i datele mele de contact cum ar fi prezentat in figura 8.7:

Figura 8.7 Localizarea prin google maps

50
8.3. Responsive Web Design
Cu ajutorul acestei tehnologii aplicatia web isi poate adapta dimensiunile pentru
dispozitivul utilizat pentru vizualizare. Paginile web sunt afisate pe mai multe tipuri de
dispozitive cum ar fi tablete, smartphone -uri, carti electronice, calculatoare si lista continua.
Fiecare dispozitiv are caracteristicile sale specifice: dimensiunea ecranului, rezolutie, putere
CPU, capacit atea de memorie, etc. Aceasta tehnologie isi propune ca, desi cu un design unic
sa poata fi vizualizata de pe orice dispozitiv.
In aplicatie partea de responsive pe un smartphone va arata ca in urmatoarea imagine
din figura 8.8 :

Figura 8.8 Responsive web design

51
9. Concluzii
Este foarte important ca orice dezvoltator sa -si creeze o aplicatie web de a -si prezenta
produsul. Datorita acesteia se poate interactiona prin intermediul client/server.
Acest tip de aplicatie are o ordine logica, ajutand vizitatorul sa gaseasca cu usurinta
ceea ce cauta. Meniul de navigare al site -ului ocupa o pozitie logica si consistenta in
cadrul fiecarei pagini. Continutul fiecarei pagini au un scop. Impresia si -o va crea
utilizatorul , iar daca nu e multumit pur si si mplu va renunta.
Design -ul aplicatii web va influenta decizia utilizatorului de a face o alegere, pur si
simplu trebuie sa creeze incredere, sa aiba sens si sa permita vizitatorilor sa gaseasca ceea
ce au nevoie rapid si usor. Acesta nu se limiteaza doar l a aspect, lucruri precum
programarea corecta, folosind standarde web, sau compatibilitatea pe diferite platforme
sunt la fel de importante, insa acestea sunt aspecte de care vizitatorii nu trebuie sa isi faca
grija, ele revenind in sarcina unui web develop er.
Cu ajutorul diferitelor tehnologii de programare am ajuns la creeare acestei aplicatii
cum ar fi: HTML, CSS, JavaScript, tehnologii precum jQuerry , Bootstrap, SqL Server,
XAMPP.
Tehnologia avanseaza pe zi ce trece, ceea ce ne ofera o viata mai usoara mai flexibila
de a interactiona unii cu altii, de a face conexiuni, de a ne prezenta produsele, de ne
infroma, de a ne dezvolta si multe altele…

52
10. Bibliografie

1. http://www.creeaza.com/referate/informatica/internet/INTERNET -si-arhitectura -de-
baz875.ph p
2. https://ro.wikipedia.org/wiki/HTML5
3. https://profs.info.uaic.ro/~busaco/publications/articles/xhtml.pdf
4. https://www.w3schools.com/html/html_intro.asp
5. https://avantajconsulting.ro/suporturi/downloadgraficaa?file=sup_curs_web_INC.pdf
6. https://www.google.ro/search?q=logo+html5&tbm=isch&source=iu&ictx=1&fir=EOr8DL
vm3WKLYM%253A%252CSZyrCl7FlqYr9M%252C_&vet=1&usg=AI4_ –
kT4XNKpbVi7YHHLvmTwZ94UBUB4jA&sa=X&ved=2ahUKEwjosaPdxofjAhXC0qQKHfoUD
YgQ9QEwAnoECAQQCA&biw=1920&bih=930#imgrc=EOr8DLvm3WKLYM :
7. http://www.scritub.com/stiinta/informatica/Etapele -dezvoltarii -sistemului91112.php
8. https://www.soft -build.com/html -formulare/
9. https://it.webdesign -galaxy.ro/ce -este-css/
10. https://developer.mozilla.org/ro/docs/Web/JavaScript/O_re -introducere_in_JavaScript
11. https://ro.wikipedia.org/wiki/Microsoft_SQL_Server
12. https://ro.wikipedia.org/wiki/Baz%C4%83_de_date
13. https://ro.wikipedia.org/wiki/JQuery
14. https://ro.wikipedia.org/wiki/Aplica%C8%9Bie_web