Programul de studiu Informatică [620709]

Universitatea TRANSILVANIA din
Brașov
Facultatea de Matematicǎ și
Informatică
Programul de studiu Informatică

Lucrare de licența
Tehnologii web utilizate
în realizarea site -ului
‘‘Evenimente în Brașov ’’

Autor: Manoliță Mădălina Elena
Coordonator științific: conf.univ.dr. Sângeorzan L ivia

Brașov,2016

2
Cuprins
Introducere 4
1. Capitolul 1 – HTML5 6
1.1 Scurt Istoric 6
1.2 Limbajul HTML 7
1.3 Limbajul XHTML 10
1.4 HTML5 11
2. Capitolul 2 – CSS3 15
2.1 Scurtă descriere 15
2.2 Elemente CSS2 și CSS3 16
2.3 Tipuri de reguli CSS 17
3. Capitolul 3 – JavaScrip t, jQuerry 19
3.1 Prezentarea limbajului JavaScript 19
3.1.1 Aspecte fundamentale ale limbajului JavaScript 19
3.1.2 Relația dintre JavaScript si HTML 21
3.1.3 Operatori JavaScript 22
3.1.4 Obiecte JavaScript în corespondență cu HTML 23
3.2 jQuerry 24
3.3 AJAX 25
4. Capitolul 4 – PHP, MySQL 26
4.1 PHP 26
4.1.1 Avantaje si Caracteristici al limbajului 26
4.1.2 Tipuri de date 27
4.1.3 Variabile 27
4.1.4 Operatori 28
4.1.5 Expresii regulate 28
4.1.6 Funcții în PHP 29
4.2 MySQL 30
4.2.1 Setul cel mai important de comenzi SQL 31
4.2.2 Scrierea comenzilor SQL 31
5. Framework -ul Laravel 33
5.1. Instalare Laravel 33
5.2. MVC 33
6. Framework -ul Bootstrap 40

3
6.1 Instalare Bootstrap3 40
6.2 Stiluri 41
6.3 Folosirea Bootstrap -ului 41
6.4 HTML -ul de Bază a Framework -ului 41
6.5 Alinierea Textelor 42
7. XAMPP 43
8. Editorul Atom 44
9. Prezentarea site -ului 45
9.1 Scurtă descriere 45
9.2 Structura Site -ului 45
9.3 Administrarea site -ului 46
9.3.1 Paginile Utilizatori Categorii, Locații și Evenimente 46
9.4 Funcționalități 51
9.5 Baza de date 55
10. Ghidul site -ului 56
Bibliografie 64
Webografie: 64

4
Introducere

În primul capitol este prezentată evoluția și dezvoltarea limbajului de
marcare HTML5 (Hyper Text Markup Language) și cum a ajuns să fie folosit de
cele mai mari companii de pe planetă.

În al doilea capitol este prezentat standardul de formatare al unui
document HTML numit CSS , evoluând și el la CSS3. CSS3 reprezintă o
actualizare ce va aduce câteva atribute noi și ajută la dezvoltarea noilor concep te
în webdesign.

În al treilea capitol este prezentat limbajul de programare JavaScript care
este folosit pentru a intrduce unele funcționalități în paginile web, împreuna cu
JQuery care este o bibliotecă JavaScript concepută pentru a ușura și îmbunătăț i
procese precum managementul inter -browser al evenimentelor, animații și cereri
de tip Ajax.

În al patrulea capitol este prezentat un alt limbaj de programare numit
PHP (Personal Home Page). Folosit inițial pentru a produce pagini web
dinamice, acum este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor
web, el fiind folosit împreună cu MySQL care este un sistem de gestionare a
bazelor de date. PHP și MySQL sunt foa rte des folosite împreună pentru a
introduce date într -o bază de date. Bazele de date fiind o modalitate de a stoca
informații și date pe un suport extern.

În al cincilea capitol este prezentat framework -ul Laravel, este o aplicație
web-framework cu sintaxa expresivă, elegantă. Laravel încearcă să ajute
dezvoltatorii web prin faci litarea sarcinilor comune utilizate în majoritatea
proiectelor de web, cum ar fi autentificare, rutare, sesiuni, și cache -ul.

În al șaselea capitol este prezentat framework -ul Bootstrap, este cel mai
popular Framework din lume. Utilizarea lui ajută la e conomisirea considerabilă a
timpului investit în realizarea unui web -site.

În al șaptelea capitol și al optulea este prezentat pe scurt XAMPP (x-os,
Apache, MySQL, PHP, Pearl) respectiv editorul de text Atom.

În ultimele două capitole este prezentată aplicația urmată de un ghid al
site-ului care permite oricărei persoane să folosească site -ul fără a avea nevoie
de foarte multe cunoștințe de programare -web.

5
Motivație

Această lucrare are rolul de a ajuta toate persoanele ce sunt interesate de
activitățile din Brașov.

M-am decis să fac acest proiect deoarece și eu sunt interesată de
evenimentele petrecute în Brașov și imi doresc ca și persoanele la fel ca mine să
poată beneficia de mai multe informații dintr -o simplă vizualizare, fără a mai
căuta altundeva.

De asemenea, acest site este de folos și organizatorilor, ei fiind printre cei
care adaugă evenimente și pe baza unui document adăugat de ei evenimentul
este aprobat sau nu, astfel promovează evenimentul foarte ușor.

Obiectivul acestei lucrări este de a prezenta modalități de realizare a
paginlor web atractive și convingătoare. Este foarte important ca pagina să fie
cât se poate de clară pentru a nu induce în eroare vizitator ii, butoanele și link –
urile trebuie să vizibile și ușor accesibile.

6
1. Capitolul 1 – HTML5
1.1 Scurt Istoric

În timpul analizarii spațiului Web, s -a dezvoltat și primul limbaj de m arcare
a documentelor hypertext, SGML (Standard Generalized Markup Language) .
Fiind foarte complicată producerea și inter pretarea de documente ce pot fi
transmise prin protocolul HTTP, compania lui Tim Berners -Lee a susținut și a
lucrat la un limbaj din ce în ce mai îmbunătățit numit: HTML.

În luna iulie 1996, W3CWorld Wide Web Consortium a publicat standardul
HTML 3.2 , care includea specif icații în ceea ce privește conceprea și
interpretarea tabelelor și imaginilor, compatibil în totalitate cu o versiune mai
veche a limbajului de marcare hypertext H TML 2.0. Până în ianuarie 1997,
majoritatea navigatoarelor au implementat aceste specifcații, excepție au făcut
Netscape și Microsoft Internet Explorer acestea și -au adăugat propriile specifcații
nestandardizate la acel moment precum posibilitățile de inse rare a elementelor
direct în paginile Web, suportul pentru cadre sau pentru execuția scripturilor pe
partea clientului (JavaScript).

O versiune mai noua de HTML, cea cu numarul 4.01, a fost standardizată
pe data de 24 Decembrie 1999 și ofera suport extins pentru numeroase atribute
și elemente. Din păcate majoritatea browserelor continuă să introducă și
elemente care nu se regăsesec în standardizarea W3C astfel programarea
aplicațiilor Web poate să conducă la rezultate și interpretări diferite în func ție de
aplicația folosită.

Standarul HTML5 propriu -zis a fost publicat de către W3C ca Worki ng
Draft în 2008, un stadiu de r ecomandare W3C fiind așteptat în 2014. WHATWG
(Web Hypertext Application Technology Working Group) continuă să lucreze la
HTML, renunțând însa la versionare. Astfel, specificțiile pentru HTML sunt
considerate un’’standard ’’, HTML5. S -a convenit că HTML5 se scrie legat pentru
că standardele ar trebui sa aibă un nume standard.

HTML5 este conceput pentru a fi compatibil cu versiunile anterioare, drept
urmare, orice document valid HTML4 sau XHTML este valid și în HTML5, dacă
folosește doctype -ul nou. Convenabil, fiindcă acest lucru înseamnă că nu trebuie
să uităm tot ce stim despre HTML și să o luam de la capăt.

HTM L5 introduce elemente și atribute noi care reflectă utilizarea tipică a
unui site modern. Unele dintre ele sunt semantic înlocuite cu utilizări comune de
blocuri generice <div> și de elemente inline <span>, de exemplu <nav> – block
de navigație în site, <footer> – în mod normal se referă la partea de jos a unei
pagini web sau la ultima linie de cod HTML sau <audio> și <video> în loc de
<object> . Unele elemente depreciate din HTML 4.01 au fost șterse, inclusiv
elementul de prezentare <font> și <center> , al c ăror efect este realizat cu CSS
(Cascading Style Sheets ).

7
1.2 Limbajul HTML

HTML este prescurtarea de la Hypertext Markup Language, el reprezintă
limbajul pe care browserele îl înteleg și cu ajutorul lui pot fi afișate paginile web.
HTML nu utilizează instrucțiuni precum limbajele de programare, ci el folosește
etichete sau tag -uri.

Sintaxa generală a unui tag este reprezentată în Fig.1.

<TAG atribut1 ="val" atribut2 ="val" >Text</ TAG >

Fig.1 Sintaxa generală a unui tag

Limbajul HTML nu este un limbaj case -sensitive.

Un fișier sau un document HTML mereu începe cu tagul <html> și se
termină cu </html>.

Între cele două marcaje menționate mai sus apar două secțiuni:

Antetul documentului care este delimitat de marcajele reprezentate în
Fig.2.

1 <head >text </ head>

Fig.2 Antetul documentului

Corpul documentului care este delimitat de marcajele reprezentate în
Fig.3.

1 <body >text </ body>

Fig.3 Corpul documentului

În Fig.4 se prezintă structura de bază a unui document HTML.

1 <html>
2 <head>
3 text
4 </head>
5 <body>
6
7 </body>
8 </html>
Fig.4 Structura de bază a unui document HTML

8
Principalele tag -uri HTML :

Tag-ul <body>
Atribute ale lui body se regăsesc în Tabel1.

Atribut Descriere
bgcolor acesta setează coloarea de background a paginii.
background: acesta setează o imagine în fundalul paginii.
text: acesta setează culoarea textului în pagină.
link: acesta setează culoarea link -urilor din pagină.
vlink: acesta setează culoarea link -ului vizitat din pagină.
alink: acesta setează culoarea link -ului apăsat din pagină.
Tablel1. Atribute ale lui body

În Fig.5 se regăsește sintaxa atributelor.

1 <body background ="imagine.jpg" >
2 <body text="green" >
3 <body bgcolor="#f09098" link="#f0f0f0" alink="#123456" vlink="#808080" >
Fig.5 Sintaxa atributelor

Tag-ul headings

Headings sunt definte cu tag -urile <h1> până la <h6>tags. <h1> definește
cel mai important heading. <h6> defineste cel mai “mic” heading.

Structura unui heanding este prezentată în Fig.6.

1 <h1> Acesta e un antet </ h1>
2 <h2> Acesta e un antet </ h2>
3 <h3> Acesta e un antet </ h3>
4 <h4> Acesta e un antet </ h4>
5 <h5> Acesta e un antet </ h5>
6 <h6> Acesta e un antet </ h6>
Fig.6 Structura unui heading

Tag-uri pentru formatarea textului în pagină

În Tabel2. se regăsesc tag -uri pentru formatarea textului.

Tag Descriere
<b> Definește text bold
<big> Definește text bold
<i> Definește text italic
<small> Definește text mic
<strong> Definește text îngroșat
<sub> Definește text scris la index (subscript)
<sup> Definește text scris la putere (superscript)
<ins> Definește text inserat
<del> Definește text sters
<p> Definește un paragraf, iar HTML adaugă automat înainte și după
declararea unuia.
Tabel2. Tag -uri pentru formatarea textului

9
Tag-ul pentru Link-uri(legături) <a>:

Cu ajutorul legăturilor un text obișnuit se transformă în hipertext sau hiper –
media. Legăturile sunt zone active într -o pagină. Ele se inserează cu ajutorul
etichetei <a> și a atributului "href", care ia valoare adresa URL a resursei
solicitate.

Sintaxa tag -ului <a> pentru este prezentată în Fig.7.
1 <a href = "link-ul dorit">text </ a>
Fig.7 Sintaxa tag -ului <a>

În Fig.8 este prezentată sintaxa tag -ul <a> dac ă dorim să fie o imagine în
loc de text.
1 <a href = "linkul unde dorim să trimită imaginea">
2 <img src="cale /imagine.jpg" />
3 </a>
Fig.8 Sintaxa tag -ului <a> cu imagine

Tag-ul pentru liste:
Listele pot fi ordonate și neordonate.
În Fig.9 se regăsește sintaxa tag -ului pentru liste neordonate <ul>.
1 <ul style=” list-style-type:valoare ”>
2 <li>Text</li>
3 <li>Text</li>
4 <li>Text</li>
5 </ul>
Fig.9 Sintaxa tag -ului <ul>

Tag-ul <ul> îl poate avea ca și atribut pe style (vezi Fig.9).
În Tabel3 se regăsesc valorile ce ii pot fi atriuite lui style.
Valoare Descriere
disc Setează ca și marcaj pentru elementele din listă un punct.
circle Setează ca ș i marcaj pentru elementele din listă un cerc.
square Setează ca și marcaj pentru elementele din listă a pătrat.
none Elemente din listă nu vor avea marcaj.
Tabel3 Valori atribuite lui style

În Fig.10 se regăsește sintaxa tag -ului pentru liste ordonate <ol>.
1 <ol type="1">
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ol>
Fig.10 Sintaxa tag -ului <ol>
Tag-ul <ol> îl poate avea ca și atribut pe type (vezi Fig.10).

În Tabel4 se regăsesc valorile ce ii pot fi atriuite lui type.
Valoare Descrire
type="1" Elementele de listă vor fi numerotate cu cifre
type="A" Elementele de listă vor fi numerotate cu litere majuscule
type="a" Elementele de listă vor fi numerotate cu litere mici
type="I" Elementele de listă vor fi numerotate cu cifre romane majuscule
type="i" Elementele de list ă vor fi numerotate cu cifre romane cu litere mici
Tabel4 Valori atribuite lui type

10
1.3 Limbajul XHTML

De-a lungul utilizării, limbajul HTML a dat dovadă de un număr mare de
neajunsuri pentru ca W3C să se gândească la o nouă specificație. Printre
problemele principale se numară: dificultatea de personalizare sau extindere a
limbajului, inadecvarea limbajului HTML pentru tranzații automate de date,
neintegrarea cu alte limbaje de marcare si că interpretarea de către navigatoare
este ambiguă. Navigat oarele Web s -au "obișnuit" cu codul HTML de multe ori
scris gresit în efortul de a se face o afișare "frumoasă". Problemele au început
atunci când site -urile trebuiau văzute pe dispozitive mobile.

Ca urmare a acestor concluzii, W3C a dezvoltat eXtensible HyperText
Markup Language(XHTML), o reformulare HTML în eXtensible Markup
Language(XML) cu scop principal în trimiterea datelor. Deci XHTML repară
erorile apărute în HTML:
o este usor expandabil;
o este special conceput pentru schimbul automat de date;
o se inte grează foarte bine cu celelalte limbaje de marcare formulate în
XML;

Prin XHTML, W3C a raspuns necesităților, care se impuneau în mod
imperios, ale pietei în care figurează o multime de dispozitive mobile care permit
conectarea la Internet. În plus, inter pretarea codului nu mai este ambiguă, pentru
că fiecare document XHTML trebuie să fie riguros formatat și confruntat cu un
Document Type Definition(DTD), care cere o sintaxă corectă, pentru a oferi
navigatoarelor un timp mai scurt de interpretare.

În Fig. 11 avem un exemplu de document XHTML validat DTD:

1 <? xml v e r s i o n=" 1 . 0 " e n c o d i n g="UTF 8" ? >
2 <!DOCTYPE html
3 PUBLIC " //W3C//DTD XHTML 1 . 0 T r a n s i t i o n a l //EN"
4 "DTD/ xhtml1 t r a n s i t i o n a l . dtd " >
5 <html xmlns =" h t t p : / /www. w3 . o r g /1999/ xhtml " xml : lang=" en " lang="
en ">
6 <head >
7 < t i t l e > T r a n s i t i o n a l DTD XHTML Example </ t i t l e >
8 </ head >
9
10 <body bgcolor ="#FFFFFF" link="#000000" text=" r e d " >
11 <p>This i s a t r a n s i t i o n a l XHTML example </p>
12 </body >
13 </html >
Fig.11 Document XHTML

11
1.4 HTML5

HTML5 este a cincea versiune a standardului HTML, și din octombrie
2011 este în continuă dezvoltare. Obiectivele principale sunt de a îmbunătăți
limbajul cu un suport pentru cele mai recente dezvoltări, atât pentru calculatoare
cât și pentru dispozitivele mobile, reușind până în momentul de fată să
acapereze multă atenție din partea oamenilor, bineînteles prin faptul că este usor
de citit și foarte bine înteles de calculatoare și dispozitiv e.

HTML5 își propune să însumeze nu nu mai HTML 4.0, dar și XHTML
DOM2HTML. HTML5 este un răspuns la observația că HTML și XHTML utilizate
în comun pe World Wide Web sunt un amestec de caracteristici int roduse de
specificații diferite. Împreuna cu acestea mai sunt și caracteristicile diferite a duse
de software, de browsere și multe erori de sintaxă în documentele web existente.

În concluzie HTML5 devine o încercare de a defini un singur limbaj de
marcare care poate fi scris în oricare dintre sintaxele HTML sau XHTML. Acesta
include modele detaliate de prelucrare pentru a încuraja mai multe implementări,
extinde, îmbunătățește și raționalizează disponibilitățile pentru documentele web
și introd uce marcarea și aplicații API ( application programming interfaces) pentru
aplicații web complexe. D in aceste motive, HTML5 este un posibil candidat
perfect pentru aplicațiile de platforme mobile. Multe caracteristici ale HTML5 au
fost create din considerarea că va trebui să devină capabil să ruleze pe
dispozitive mobile cum ar fi smartphone -urile sau ta bletele.

HTML5 nu e singur , în sprijinul său vin alți doi stâlpi ai web-designului
CSS și Javascript. Mulți programatori vorbesc de cele trei limbaje de programare
ca fiind cele care formează structurile unei pagini web:

o HTML – proportionează nivelul str uctural al paginii, organizând
conținutul cum ar fi: textul, fotografiile, tabelele, etc;

o CSS – proportionează nivelul de comportament, de prezentare a unei
pagini web, dând o bună aparență conținutului HTML.

o Javascript – adaugă un alt nivel de comportam ent aducând pagina web
la viață pentru a interacționa cu vizitatorii.

De aici rezultă că utilizând HTML5, veți putea construi pagini web,
adevărat, însă culorile, aranjarea conținutului în pagină, stilurile CSS în general,
nu se mai pot adăuga cu atribute HTML ci cu CSS. Cu HTML5 de acum veți
putea adăuga doar conținutul unei pagini web. Prin separarea conținutului de stil
vom avea mai puține încurcături în pagină, mai puțină confuzie, iar paginile se
vor încărca mult mai repede.

12
Elemente noi in HTML5

În Tabel5 găsim câteva din elementele noi apărute în HTML5.
<canvas> marchează introducerea de conținut grafic
<article> marchează un articol
<aside> marchează un conținut aparte față de conținutul paginii, dar
care are legatură cu el
<audio> marchează introducerea de conținut audio
<command> marchează un buton de comandă
<datalist> marchează un meniu drop -down
<details> marchează detaliile unui element
<dialog> marchează un dialog, o conversație
<embed> marchează conținut interactiv extern sau introducerea unui
plugin
< figure> marchează un grup de elemente care au legatură unul cu
celalălt și care pot fi considerate în pagină, conținut de sine
stătător
<footer> marchează secțiunea footer a paginii
<header> marchează secțiunea header a paginii
<hgroup> marchează o secțiune a paginii
<keygen> marcheaz un cod generat automat într -un formular
<mark> marchează text evidențiat
<metere> marchează valoarea unei unitțăti de masură cunoscută
<nav> marchează o bară de navigare cu linkuri
<section> marchează o secțiune oarecare (header, footer, bară de
navigare, capitole sau orice alt secțiune)
<source> marchează sursa fișierului sursă
<time> marchează oră/dată
<video> marchează introducerea unui video
<output> marchează diferite tipuri de rezultate ale unui script oarecare
<preogress> marchează o bar de progres fie ea grafică sau numerică
<ruby> folosit împreună cu caracterele asiatice
Tabel5. Elemente noi în HTML5

13
Prezentarea celor mai importante tag -uri aduse de HTML5

Tag-ul <audio>

În Fig12 regăsim sintaxa tag-ului <audio> .

1 <audio atribut>
2 <source src=" " type=" ">
3 <source src=" " type=" ">
4 </audio>
Fig12. Sintaxa tag -ului <audio>

Tag-ul <audio> poate folosi atributele regăsite în Tabel6.
Atribut Descriere
autoplay
(autoplay="autoplay") Sunetul, muzica va începe automat.
controls
(controls="controls") Controalele audio (play / pauza, etc.) vor fi afișate.
loop (loop="loop") Muzica va începe din nou după ce se termină.
preload(preload="auto|
metadata|none") Specifică dacă, și cum va fi încărcat fișier ul audio când
pagina se încarcă . Atributul "preload" este ignorat dacă
se adaugă "autoplay".
Tabel6 Atributele tag -ului <audio >

Sematică :
Tag-ul <audio>se folosește pentru a adăuga sunet, muzică în pagina web.

Tag-ul <video>

În Fig13. regăsim sintaxa tag-ului <video>.

1 <video atribut>
2 <source src=" " type=" ">
3 <source src=" " type=" ">
4 </video>
Fig14. Sintaxa tag -ului <video>.

Tag-ul <video> poate folosi atributele regăsite în Tabel7.

Atribut Descriere
autoplay (autoplay="autoplay") Filmul /videoclipul va începe automat.
controls (controls="controls") Butoanele de control (play / pauza, etc.) vor fi
afișate
height (height="pixeli") Înaltimea playerului, în pixeli.
width (width="pixeli") Lungimea playerului, în pixeli.
loop (loop="loop") Filmul va porni de la început după ce se termină.
preload (preload="auto|metada
ta|none") Specifică dacă și cum va fi încarcat filmul când
pagina se încarcă. Atributul "preload" este ignorat
dacă se adaugă "autoplay".
Tabel7. Atributele tag -ului <video>.

14
Sematică :
Tag-ul <video> este un element multimedia folosit pentru a adăuga în
pagina web video, clipuri și alt conținut video.

Tag-ul <figure>

Tag-ul < figure> poate conține elementul <figcaption> ca să adauge o
scurtă descriere la ceea ce e adăugat în <figure>.

În Fig15. regăsim sintaxa tag-ului <figure> .

1 <figure>
2 <img src=" htmlcourse.jpg" alt="Curs HTML" width=" 200 " height="
3 100"/>
4 <figcaption >Curs HTML: www.marplo.net/html/</ figcaption >
5 </figure>
Fig16. Sintaxa tag -ului <figure>

Sematică :
Tag-ul <figure> se folosește pentru a adăuga în pagină un grup d e
elemente care au un conținut de sine stătător, cum ar fi diagrame, poze, cod, etc.
Conținutul din elementul <figure> e atașat la derularea paginii, dar poziția
lui este independentă.

Tag-ul <link>

În Fig17. regăsim sintaxa tag-ului <link> .
1 <html>
2 <head>
3 <link rel="stylesheet" type="text/css" href="style.css"/>
4 </head>
5 <body>
6 text
7 </body>
8 </html>
Fig.18 Sintaxa tag -ului <link>

Tag-ul <link> poate folosi atributele regăsite în Tabel8.

Atribut Descriere
rel specifică relația dintre documentul apelant și documentul legat. Are
numeroase valori posibile, dar în cazul de față valoarea sa trebuie sa fie
stylesheet;
type specifică tipul documentului legat, adică definește ce fel de resursă este
(extensia fișierului nu este suficientă pentru a determina aceasta)
href specifică adresa (URL) de unde se introduce fișierul foaie de stil. Atenție
calea către fișierul CSS treb uie să fie corectă altfel stilul CSS nu va
funcționa;
Tabel8 Atributele tag -ului <link>

15
2. Capitolul 2 – CSS3
2.1 Scurtă descriere

Denumirea de CSS provine din limba engleza de la Cascading Style
Sheets, care se poate traduce ca fiind foi de stil în cascadă, stiluri ce pot fi
definite atât în headerul unei pagini web, cât și într -un fișier separat, individual.
Cea de -a doua variantă fiind cea recomandată .
CSS este utilizat atât de autorii cât și de cititorii unei pagini web pentru a
defini culori, fonturi, layout, precum și alte aspecte legate de prezentarea
documentelor. El este conceput în primul rând pentru a permite separarea
documentului ca și conținut (scris în HTML sau un Markup Language similar) de
documentul de prezentare (scris în CSS).
Această separare îmbunătățete accesibilitatea conținutului, oferă o mai
mare flexibilitate și poate diminua caietul de sarcini al celui care se ocupă de
mentenanța unui site web prin asigurarea unui control mai simplu.
De asemenea CSS -ul poate reduce compl exitatea și repetarea tag -urilor folosite
pentru formatare din structura conținutului. CSS poate permite ca aceeași pagină
să fie prezentată în diferite stiluri de redare pentru diferite medii, cum ar fi pe
ecranul unui calculator, în imprimare sau vocal ( când este redat printr -un cititor
de ecran).
O dată cu apariția sa, mulți dezvoltatori web au considerat că CSS este un
mod de formatare mult mai puternic și mai usor de utilizat, și au considerat că
<FONT> este un tag învechit. În 2006 s -a făcut update, c apabilitățile CSS -ului au
fost îmbunătățite considerabil în ceea ce privește design -ul layout -ului unei pagini
web. Cu toate acestea, multe site -uri web încă utilizează CSS numai pentru
formatarea textului, în timp ce pentru layout folosesc tabele. Pentru că Internetul
este într -o crestere și dezvoltare rapidă și continuă datorită utilizării tot mai
frecvente a telefoanelor mobile și a PDA -urilor, este necesară crearea unor
pagini web accesibile utilizatorilor care folosesc o mare varietate de dispozitive
mobile. Un design web fără tabele îmbunătătește considerabil accesibilitatea, în
acest sens.
Autoritatea în ceea ce privește acest tip de fișiere, este deținută de World
Wide Web Consortium (W3C). Aceștia oferă specificațiile complete, lista
browsere lor care suportă CSS, instrumente de validare, precum și informații
despre învățarea CSS.
CSS3 oferă o mulțime de lucruri noi pentru a îmbunătăți un website. Multe
dintre noile opțiuni nu sunt axate pe funcționalitate, dar pe parcursul anilor s-a
observa t că utilizatorii vor pe lângă funcționalitate, un design modern.

16
2.2 Elemente CSS2 și CSS3

În Tabel9 sunt prezentate elemente de CSS2 și CSS3.
Selector Exemplu Rezumat
* * Selectorul universal selectează toate elementele
existente în pagină. Nu este recomandată utilizarea
lui, este cunoscut și ca cel mai încet selector.
E div Selectează toate elementele din pagină.
E, F, G p, div, span Selector grup, aplică același stil
elementelor E, F, G
E:hover,
E:focus,
E:active div:hover,
input:focus,
a:active Selectează elementele în funcție de stadiul
interactivității cu utilizatorul .
# #idfcod css } Selector id
. .numeclasa {
cod css } Selector clasa

E:disable input:disable Selectează toate elementele dezactivate
E >F ul >li Selectează elementele F care sunt descendenți
direcți ai elementului E
E:empty div:empty Selectează elementele E ce nu au conținut (inclusiv
text)
E: first –
child li: first -child Selectează elementul E care este primul descendent
al părintelui său
E:last –
child .list-item:last –
child Selectează elementul E care este ultimul descendent
al părintelui său
E:only –
child #item:only -child Selectează elementul E care este singurul
descendent al părintelui său
E:cheked input:cheked Selecteaz toate elementele input selectate (de
exemplu, radio but ton sau checkbox)
E:not(.foo
) div:not(.ultimul) Selectează elemente care nu au atribuit clasa foo
E::after a::after Adaugă pseudo -elementul ::after dupa elementul E.
Funcționează la fel ca selectorul ::before
Tabel9 Elemente de CSS2 și CSS3

17
2.3 Tipuri de reguli CSS

O foaie de stil externă este ideală atunci când stilul respectiv se aplică mai
multor pagini. Cu o foaie CSS externă, puteți modifica aspectul întregului site
modificând un singur fișier, de altfel este cea mai bună metodă de a utiliza
CSS.Exemplu în Fig.19.

Fig.19 Exemplu

Fiecare pagină trebuie să se lege la foaia de stil folosind tagul <link>
despre care am vorbit în capitolul HTML5.

De reținut este faptul că un fișier HTML poate conține mai multe fo i de stil
externe, chiar și stil inline. Ordinea de aplicare a stilului este: stil inline, stil din
fișier extern.

Singurul lucru care poate schimba acest lucru este dacă la adăugarea
unei proprietăti la final adăug ăm !important el va avea prioritate față de toate
celelalte proprietăți aplicate unei clase.

18
În Fig.20 avem o reprezentare și o ordine de adăugare a stilurilor corectă.
Fig.21 Aplicarea în cascadă a stilurilor CSS

În Fig.22 este prezentată structura unui stil CSS.

Fig.22 Structura unui stil CSS

19
3. Capitolul 3 – JavaScript, jQuerry

3.1 Prezentarea limbajului JavaScript

Inițial, JavaScript a fost dezvoltat de Netscape sub denumirea LiveScript,
un limbaj de scriptare care intenț iona să extindă capacitățile HTML și să ofere o
alternativă partial la un număr mare de scripturi CGI Computer -Generated
Imagery pentru prelucrarea informațiilor din formulare și pentru a adăuga
dinamism în paginile utilizatorilor. După lansarea limbajului Java, Netscape a
început să lucreze împreună cu firma Sun pentru a oferi un limbaj de scriptare a
cărui sintaxă și semantică erau strâns legate de Java – motiv pentru care
denumirea a fost schimbată în JavaScript. După finalizarea limbajului, Netscape
și Sun l -au lansat împreună.

După lansarea sa, în decembrie 1995, JavaScript și -a atras sprijin din
partea principalilor distribuitori din domeniu, printre care Sybase, Apple, Borland,
In-formix, Oracle, Digital, HP și IBM. Situația s -a complicat însă atunci când a
intervenit Microsoft. Întelegând importanța scriptării Web, Microsoft a dorit să
ofere suport și pentru JavaScript. Când Netscape a preferat să acorde licența de
tehnologie companiei Microsoft în loc să o vânda, Redmond a analizat
JavaScript , bazându -se pe documentația publică, și a creat propria sa
implementare, JavaScript, care este recunoscută de Microsoft Internet Explorer
versiunile 3.0 și ulterioare. JavaScript 1.0 este aproximativ compatibil cu
JavaScript 1.1, care este recunoscut în N etscape Navigator 3.0 și browserele
ulterioare.

Pe lângă JavaScript, Microsoft are propriul său concurent pentru
JavaScript, numit VBScript, realizat pentru pătrunderea pe Web a actualilor
programatori VB. VBScript este un subset al limbajului Visu al Basic. Deoarece
Netscape nu recunoaște VBScript, principalele sale utilizări sunt pentru
intraneturile unde se înregistrează o abundență de utilizatori de Microsoft Internet
Explorer.
3.1.1 Aspecte fundamentale ale limbajului JavaScript

o JavaScript poate fi încorporat în HTML
JavaScript este găzduit în documentul/ fișierul HTML și executat din
interiorul lor. Cele mai multe obiecte JavaScript au etichete HTML pe care le
reprezintă, astfel încât programul este inclus la nivelul esențial, pe partea de
client, al limbajului. Pentru a fi un programator JavaScript eficient, trebuie să
cunoaștem foarte bine limbajul de marcare HTML. JavaScript folosește HTML ca
modalitate de a sări în cadrul de lucru al aplicațiilor Web și -i extinde capacitățile
normale, asigu rând evenimente pentru etichetele HTML și permitând acestui cod
condus de evenimente să se execute din interiorul documentului.

20
o JavaScript este dependent de mediu
JavaScript este un limbaj de scriptare, nu un instrument în sine.
JavaScript este moto rul de interpretare din mediu – Netscape Navigator, Microsoft
Internet Explorer sau unul din motoarele pe parte de server. Când este inclus
într-un document HTML, JavaScript depinde de browser pentru a fi recunoscut.
Dacă browserul nu -l recunoaște, programu l va fi ignorat, ba chiar mai rău – dacă
nu ținem seama de browserele neacceptate programul JavaScript în sine poate fi
afișat ca text pe pagina HTML.

o JavaScript este un limbaj interpretat
JavaScript este interpretat de browser înainte de a fi execut at. JavaScript
ramâne parte a documentului HTML la care este atașat. Dezavantajul unui limbaj
interpretat este că executarea programului durează mai mult, deoarece
browserul compilează instructiunile în timpul rulării, chiar înainte să le execute.
Avantaju l constă în faptul că este mult mai ușor de actualizat codul sursă, acest
lucru reprezintând un avantaj și confort programatorului.

o JavaScript este flexibil în privința tipului de date
Spre deosebire de Java sau C++, JavaScript diferă mult în privin ța tipului
de date. JavaScript este mult mai flexibil. Putem declara variabilele de un anumit
tip, dar nu suntem obligati să facem această declarare; putem lucra cu o
variabilă, deși nu -i cunoaștem tipul specific înainte de rulare.

Exemplu: avem o va riabilă numită myVal, îi atribuim o valoare de tip șir și
apoi o afișăm într -o casetă de mesaje.

În Fig.23 este prezentat exemplul de mai sus.

1 function flexible()
2 {
3 var myVal;
4 myVal = "Hello World!";
5 alert(myVal);
6 }
Fig.23 Exemplu JavaScript

În exemplul următor nu se mai declară variabila myVal înainte de folosire,
lucru perfect valid în JavaScript, dar inacceptabil într -un limbaj de programare
strict cu privința tipului de date.

În Fig.23 este prezentat exemplul de mai sus.

1 function flexible()
2 {
3 myVal = "Hello World!";
4 alert(myVal);
5 }
Fig.23 Exemplu JavaScript

21
Pentru a arăta mai bine flexibilitatea limbajului JavaScript vom modifica și
tipul valorii pe care o reprezintă variabila myVal la fel ca în Fig.24.

1 function flexible()
2 {
3 var myVal = "Hello World!";
4 alert(myVal);
5 myVal = 123;
6 alert(myVal);
7 }
Fig.24 Exemplu JavaScript

o JavaScript este un limbaj orientat pe obiecte

Netscape și alții se referă la JavaScript ca la un limbaj de programare
orientat spre obiecte (OOP), dar aceasta este o deformare a adevăratului înteles
al sintagmei OOP. JavaScript este un limbaj bazat pe obiecte. Cu alte cuvinte
vom lucra cu obiecte predefinite care încapsulează date (proprietăți) și
comportamente (metode), dar nu le vom putea subclasa.

3.1.2 Relația dintre JavaScript si HTML

Scripturile JavaScript sunt integrate într -un document HTML folosind
perechea de etichete <script> și </script>. Într -un document HTML pot exist a mai
multe perechi de etichete <script> și fiecare pereche poate încadra mai multe
seturi de instrucțiuni JavaScript.

Atributele etichetei <script> se regăsesc în Tabel10.

Atribut Descriere
defer Atribut boolean folosit pentru a anunța browserul dacă scriptul din această
secțiune generează un conținut
language Atribut depreciat, care este utilizat pentru a specifica limbajul și versiunea
folosite între etichete.
Ex: language = "JavaScript 1.1"
src Atribut care specifică locația URL a unui fișier JavaScript sursă externă.
Ex: src = "myscript.js"
type Atribut care a înlocuit atributul language și care anunță browserul ce limbaj
se folosește între etichete.
Ex: type = "text/javascript"
Tabel10 Atributele etichetei <script>

Instrucțiunile JavaScript pot fi implementate folosind diverse metodologii.
Modalitatea cea mai bună de a profita de limbajul JavaScript este definirea
funcțiilor JavaScript în secțiunea <head>, urmată de apelarea acestor funcții din
secțiunea <body>. Această metoda asig ură evaluarea (și, dacă este necesară,
executarea) tuturor instrucțiunilor înainte ca utilizatorul să interacționeze cu
documentul.

22
3.1.3 Operatori JavaScript

Funcția fundamentală a operatorului de atribuire este aceea de a atribui o
valoare unei variabil e, plasând valoarea în memorie. Când JavaScript întâlnește
operatorul de atribuire (=), privește mai întâi în dreapta căutând o valoare. După
aceea privește în stânga și se asigură că există un loc unde să stocheze
numărul.

Întotdeauna JavaScript acț ionează de la dreapta spre stânga. JavaScript
recunoaște alți 8 operatori de atribuire, care sunt defapt combinații între un
operator de atribuire și un operator aritmetic sau un operator la nivel de biți.

În Tabel11 se regăsesc operatorii de a tribuire.
Operator Descriere
+= 𝑦 este versiunea prescurtată pentru 𝑥= 𝑥+𝑦
𝑥−=𝑦 este versiunea prescurtată pentru 𝑥 = 𝑥− 𝑦
𝑥 ∗= 𝑦 este versiunea prescurtată pentru 𝑥 =𝑥 ∗ 𝑦
𝑥 /= 𝑦 este versiunea prescurtată pentru 𝑥=𝑥/ 𝑦
𝑥 ≪= 𝑦 este versiunea prescurtată pentru 𝑥=𝑥≪ 𝑦
𝑥≫=𝑦 este versiunea prescurtată pentru 𝑥=𝑥≫𝑦
𝑥 &= 𝑦 este versiunea prescurtată pentru 𝑥 = 𝑥 & 𝑦
𝑥|= 𝑦 este versiunea prescurtată pentru 𝑥 = 𝑥 | 𝑦
Tabel11 Operatori atribuire
În Tabel12 se regăsesc operatorii de comparație.
Operator Descriere
== Operator de egalitat e. Întoarce valoarea true dacă cei doi operanzi
sunt egali.
= Operator de ne -egalitat e. Întoarce valoarea true dacă operanzii săi nu
sunt egali.
> Operator "mai-mare -decât". Întoarce valoarea true dacă operandul
său stâng are valoarea mai mare decât operandul drept.
>= Operator "mai -mare -sau-egal-cu". Întoarce valoarea true dacă
operandul său stâng are valoare a mai mare sau cel puțin egală cu a
operandului drept.
< Operator "mai -mic-decât". Întoarce valoarea true dacă operandul său
stâng are valoarea mai mică decât operandul drept.
<= Operator "mai -mic-sau-egal-cu". Întoarce valoarea true dacă
operandul său stâng are valoarea mai mică sau cel mult egală cu a
operandului drept.
Tabel12 Operatori de comparație

23
Până la JavaScript 1.1, limbajul era foarte indulgent atunci când compară
operanzi aparținând unor tipuri de date diferite. De exemplu, când compara
numărul 4 cu sirul "4", JavaScript mai întâi transforma operandul sir într -un
număr și apoi compară cele do uă numere. În cazul acestui exemplu, le găsea
egale .

Funcții în JavaScript

O funcție JavaScript este pur și simplu un script care este desprins ca o
secțiune separată de cod și căreia i se atribuie un nume. Folosind numele
respectiv, un alt s cript poate să apeleze după aceea executarea acelei secțiuni
oricând și de oricâte ori are nevoie. Multe limbaje de programare, de pilda C/C++
și Java, folosesc de asemenea funcții, în timp ce altele conțin aceeasi semantică
dar le numesc metode, proceduri sau subrutine.
Funcțiile ajuta la divizarea multelor sarcini pentru care a fost conceput un
program. Când sunt apelate, funcțiilor li se pot transfera valori, numite
argumente. După aceea, argumentele se pot folosi ca variabile în interiorul
bloculu i de instrucțiuni.

Crearea funcțiilor
Fragmentul de cod din Fig.25 arată sintaxa pentru declararea unei funcții
în JavaScript:
1 function numefunctie ([argument1] ,[…,argumentN]){
2 [instructiuni]
3 }
Fig.25 Sintaxa unei funcții în JavaScript

Cuvântul cheie function este folosit pentru a specifica un nume, nume
funcție, care servește ca identificator pentru setul de instrucțiuni cuprins între
acolade. Încadrate între paranteze drepte și separate prin virgule se află numele
argumentelor, care co nțin toate valorile pe care le primește o funcție.
3.1.4 Obiecte JavaScript în corespondență cu HTML
În Tabel13 se regăsesc obiecte JavaScript în corespondență cu HTML.

Obiect JavaScript
Exemplu
Button <input type = "button">
Checkbox <input type = "checkbox">
Hidden <input type = "hidden">
Fileupload <input type = " le">
Password <input type = "password">
Radio <input type = "radio">
Frame <frame>
Layer <layer>sau <ilayer>
Link <a href = "">
Text <input type = "text">
Submit <input type = "submit">
Option <option>
Tabel13. Obiecte JavaScript

24
3.2 jQuerry

jQuery este bibliotecă JavaScript, concepută pentru a ușura și îmbunătăți
procese precum managementul inter -browser al evenimentelor, animații și cereri
tip AJAX. jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate
versiunile de browsere importante existente, și să respecte filosofia "Unobtrusive
JavaScript". Biblioteca a fost lansată în 2006 de către John Resig.
jQuerry este folosit pentru a rezolva următoarele probleme specifice
programării web:
o Modificarea și înregistrarea evenimentelor în browser
o manipularea elementelor CSS
o efecte și animații
o cereri de tip AJAX
o utilități – versiunea browser -ului, funcția each.

Un exemplu de cod jQuerry pentru cunoscutul text "Hello World" este
prezentat în Fig.26.
1 $ ( document ) . ready ( f u n c t i o n ( ) {
2 $ ( ' body ' ) . html ( ' H e l l o world ! ' ) ;
3 }) ;
Fig.26 Exemplu JQuery

Selectori jQuery sunt folosiți pentru a "găsi" (sau selecta) elemente HTML
bazate pe nume, id, clase, tipuri, atribute, valorile lor de atribute și multe altele.
Se bazează pe selectoarele CSS existente dar are unii selectori proprii
personalizați.

În Tabel14 se regăsesc câtiva din acești selectori.
Syntax Description
$("*") Selectează toate elementele
$(this) Selectează elementul HTML curent
$("p.intro") Selectează toate elementele <p> cu clasa="intro"
$("p:first") Selectează primul element <p>
$("ul li:first") Selectează primul element <li> din primul element <U>
$("ul li:first –
child") Selectează primul element <li> din fiecare <ul>
$("[href]") Selectează toate elementele cu atributul href
$("a[target='_b
lank']") Selectează toate elementele <a> cu atributul target este
egal cu "_blank"
$("a[target!='_
blank']") Selectează toate elementele <a> cu atributul target nu
este egal cu "_blank"
$(":button") Selectează toate elementele <button> și <input> cu
type="butto n"
$("tr:even") Selectează toate elementele chiar și <tr>
$("tr:odd") Selectează toate elementele impare <tr>
Tabel14 Selectori JQuery

25
3.3 AJAX

AJAX are rolul de a spori gradul de interactivitate, viteză și uzabilitatea
unei pagini web. Este o tehnică de dezvoltare web pentru crearea de aplicații
web interactive. Ideea este să faci pagina web mai receptiva la acțiunea userului
prin schimbul de date cu serverul, discret și în porții mici, fără a mai aștepta
încărcarea întregii pagini la fiecare m odificare facută de user. Aceasta face ca o
aplicatie web să funcționeze asemănător uneia instalată pe desktop, întelegând
prin asta că o aplicație desktop iți realizează procesele fără a face noi click pe
ceva anume.

Ajax nu este o tehnologie în sine . Termenul este folosit pentru definirea
aplicațiilor web ce folosesc un ansamblu de tehnologii:

o HTML sau XHTML pentru structura semantică a informațiilor CSS pentru
prezentarea informațiilor

o Javascript pentru interactivitate, pentru procesarea informațiilor
prezentate;

Funcționalitatea AJAX este prezentată în Fig.27 ca o comparative dint re
legătura HTML -baza de date, tradițională și metoda care conține AJAX

Fig,27 Funcționalitatea AJAX comparativ HTML

26
4. Capitolul 4 – PHP, MySQL
4.1 PHP

PHP (Hypertext Preprocessor) este un limbaj de programare folosit pentru
a produce pagini web dinamice. Este folosit în prezent pe o scară largă de
dezvoltare a paginilor și a aplicaților web. PHP se folosește împreuna cu HTML,
dar de la versiunea 4.3.0, este folosit și în linie de comanda(CLI), permitând
crearea unei aplicații independente.

PHP este unul dintre cele mai importante limbaje de programare web
open -source și server -side, există versiuni disponibile pentru majoritatea
serverelor web și p entru toate sistemele de operare. PHP este disponibil sub
Licenta PHP și Free Software Foundation îl consideră a fi un software liber.

Limbajul a fost dezvoltat de inventatorul său, Rasmus Lerdof însa odată
cu creșterea numărului de utilizatori, dez voltarea a fost preluată de o nouă enti –
tate, numita The PHP Group (Grupul PHP).

4.1.1 Avantaje si Caracteristici al limbajului

Avantaje:

o Față de Ja vaScript, PHP rulează pe server , iar utilizatorul nu are acces
la el, astfel neputând sa îl modifice cum era posibil în JavaScript.În
concluzie dacă vom folosi PHP suntem mult mai securizați.
o Codul PHP este simplu, clar și foarte ușor de înteles. Astfel chiar și un
programator începator poate citi foarte ușor codul și poate chiar să îl
dezvolte u rmând puțini pași.
o Este un limbaj gratuit astfel existând foarte multă documentație pe
internet fiind foarte popular, acestea fiind puse la dispoziția oricui.
o Limbajul de programare PHP nu este dependent de sistemul de
operare acest lucru fiind un avatanj imens deoarece utilizatorul nu este
fortat să folosească un anumit sistem de operare, PHP fiind compatibil
și poate folosit cu succes pe UNIX, Microsoft și MAC.
Caracteristici:
o PHP poate rula pe majoritatea sistemelor de operare, de la UNIX, Win –
dows, Linux, sau Mac OS X și poate interactiona cu majoritatea
serverelor web. Codul PHP este interpretat de serverul WEB și
generează un cod HTML care va fi văzut de utilizator.
o PHP este foarte simplu de utilizat, fiind un limbaj de programare
structurat la fel ca și Perl -ul, C -ul, iar începând de la a -5-a versiune și
Java, sintaxa lui fiind o combinație a celor trei.
o Probabil una din cele mai importante facilități ale limbajului este
conlucrarea cu majoritatea bazelor de date, începând de la MySQL până
la Oracle, trecând prin PostgreSQL, MS Sql Server, sau DB2.

27
o PHP folos este extensii specifice pentru fișierele sale: .php, .php3, .ph3,
.php4, .inc, .phtml. Aceste fișiere sunt interpretate de către serverul web,
iar rezultatul este trimis în formă de text sau cod HTML către navigatorul
clientului.
o Fiecare program PHP include două linii speciale, care indică serverului
PHP că textul cuprins între cele două linii este alcătuit din instrucțiuni
PHP: <?php cod php ?>

4.1.2 Tipuri de date

Tipurile de date din PHP sunt prezentate în Tabel15.

Tip Descriere
Boolean valoare fals sau adevărat, la fel ca în celelalte limbaje de programare
(C++ sau Perl)
Integer numere întregi în baza 2, 10 sau 16.
Float numere reale. Valorile maxime depind de platformă, în general cu un
maxim de 1.8e308 cu precizie de 14 zecimale după virgula.
String șiruri de caractere. Nu există limită de lungime a unui șir, doar memoria
alocată PHP.
Array un ar ray în PHP este un tip de dată care conține un grup de elemente.
Fiecare element are u n indice intern în grup, iar fiecărui indice îi
corespunde o valoare elementul în sine. Un astfel de grup poate folosit ca
o simulare pentru diverse situații matematice precum vectori, serii,
dicționare de elemente, liste ordonate, matrici.
Obiecte Obiec tele sunt instanțe ale unei clase, în care proprietățile obiectului
primesc valori specifice.
NULL reprezintă o variabilă care nu a fost definită sau nu are valoare.

Tabel15 Tipuri de date
4.1.3 Variabile

În limbajul de programare PHP variabilele sunt reprezentate de semnul $
urmat de numele variabilei: $nume = valoare;

În PHP există și variabile numite "variabile predefinite" care reprezintă
nucleul PHP, sunt alocate automat de către modulul PHP, și sunt accesibile în
program.

28
Cele mai importante dintre ele se regăsesc în Tabel16.
Variabilă Descriere
$GLOBALS se referă la variabilele globale disponibile în scriptul curent.
$_SERVER sunt variabile definite de server relative la contextul în care rulează
scriptul curent.
$ _GET variabile trimise prin URL
$_POST variabile trimise prin metoda HTTP POST (folosit la în general la
formulare)
$_COOKIE variabile trimise prin HTTP cookie
$_FILES oferă scriptului fișiere uploadate
$_SESSION variabile înregistrate în sesiunea scriptului
Tabel16 Variabile
4.1.4 Operatori

Principalii operatori folosiți în PHP sunt:
o Operatori aritmetici: adunar e (+), scădere ( -), înmultire (* ), împărțire (/),
modul (%), incrementare (++), decrementare ( – -).
o Operatori de atribuire: =, + =, – =, *=, /=, %=, &=, .=.
o Operatori relaționari: = =, != , >, <, >=, <=.
o Operatori logici: !, &&, and, or, xor.

4.1.5 Expresii regulate

Expresiile regulate (regex) sunt un șir de caractere sablon care descriu
mulțimea cuvintelor posibile care p ot fi formate cu acele caractere, respectând
anumite reguli.

Lista cu caractere speciale și rolul lor în expresii regulate se regăsește în
Tabel17.
Caractere
speciale Descriere
^ indică începutul liniei
$ Indică sfârșitul liniei
. (punct) orice caracter
n scoate din contextul formării expresiei caracterul care urmează
+ caracterul (expresia) anterior acestui semn se poate repeta o dată și de
câte ori e posibil (de la 1 la infinit)
* caracterul (expresia) anterior acestui semn se poate repeta de câ te ori e
posibil sau niciodată (de la 0 la infinit)
Tabel17. Caractere speciale

29
4.1.6 Funcții în PHP

Funcțiile sunt blocuri de cod PHP (secvențe de cod) bine delimitate și
identificate printr -un nume, ce execută un set de operații. Funcțiile pot fi
executate de mai multe ori în cadrul unui script prin simpla apelare a numelui lor.

Există funcții predefinite, specifice limbajului PHP (cum ar fi print, empty)
ce pot fi folosite în orice moment, fară a fi nevoie de vreo acțiune specială; și
există f uncții definite de utilizator, scrise practic de programatori. Pentru ca
acestea să poată fi folosite, este nevoie să fie declarate (și implementate).

Avantajele utilizării functiilor:

o reutilizarea codului
Spre exemplu, dacă este nevoie să se execute aceeași secvență de cod în
mai multe părți ale unui program sau script, pentru a nu se rescrie codul de
fiecare dată, se definește o funcție care este apelată de mai multe ori.

o modularizare
Odată cu apariția funcțiilor (a subprogramelor, în general) s -a introdus și
conceptul de modularizare care presupune împărțirea (spargerea) problemei ce
trebuie rezolvată în probleme mai mici. Fiecare modul problemă mai mică
reprezintă un subprogram, impleme ntat într -o funcție care contribuie la rezultatul
final.

o menținerea ușoara a codului și întelegerea mai ușoara a logici i aplicației
sau a scriptului. Acestea sunt urmări imediate ale primelor 2 puncte. Dacă
scriptul este structurat, împărțit în bucăți mai mici, în care aceeași secvență de
cod nu se repetă atunci va fi mai ușor și de înteles și de modificat sau întreținut.

Un exemplu de funcție PHP care adună două variabile este prezentat în
Fig.28.
1 <?php
2 function adunare($a,$b){
3 $suma=$a+$b;
4 return $suma;
5 }
6 $rezultat=adunare(5,16);
7 echo $rezultat;
8 ?>

Fig.28 Exemplu funcție PHP

Important!
o închiderea unui rând se face obligatoriu cu caracterul ";"
o numele funcțiilor nu sunt case sensitive (nu se face diferența între
utilizarea literelor mari sau mici)
o numele variabilelor sunt case sensitive (se face diferența între
utilizarea literelor mari sau mici)

30
4.2 MySQL

SQL (Structured Query Language) este un standard international în
căutarea și găsirea de informații din bazele de date. MySQL (un sistem de
management pentru baze de date) este, în fapt, un server SQL – el răspunde
interogațiilor de informație care sunt cuprin se în SQL. Bazele de date SQL se
folosesc de obicei pentru a înmagazina informații cum ar fi mesaje din forum,
stiri, evenimente sau alte date ce trebuie reținute. Puteți "comunica" cu MySQL
folosind o mare varietate de limbaje de programare (PHP -ul fiind unul dintre cele
mai des folosite).

Deci MySQL este un server multi -user (mai mulți utilizatori) și multi -thread
(mai multe fire de execuție), utilizează SQL, limbajul standard de interogare a
bazelor de date din întreaga lume. MySQL este disponibil public din 1996, dar
istoria dezvoltării sale începe în 1979, sub o licenta "Open Source".

MySQL este o componentă integrată a platformelor LAMP(Linux), WAMP
(Windows -Apache -MySQL -PHP), MAMP (MAC -Apache -MySQL -PHP), XAMPP
(X-OS-Apache -MySQL -PHP, Per l). Popularitatea sa ca aplicație web este strâns
legată de cea a PHP -ului care este adesea combinat cu MySQL. În multe cărți de
specialitate este precizat faptul că MySQL este mult mai ușor de învățat și folosit
decât multe din aplicațiile de gestiune a b azelor de date, ca exemplu comanda
de ieșire fiind una simplă și evidentă: "exit" sau "quit".

Trasaturi caracteristice SQL

o SQL este prezentat în limba engleză. Folosește cuvintele select, insert,
delete ca părți ale setului de comenzi.
o SQL este un limbaj neprocedural: specifică ce informații dorești, nu cum
să le obții. Cu alte cuvinte SQL nu îti cere să specifici metoda de acces la
date. Toate cererile SQL folosesc optimizarea cererilor – o parte a RDBMS –
pentru a determina rapid remedierea datelor s pecificate. Aceste trasaturi
usurează obținerea rezultatelor dorite.
o Procesarea SQL asupra înregistrărilor nu se poate face decât asupra unei
singure înregistrări la un moment dat. Cea mai comună forma a unui set
de înregistrări este un tabel.
o SQL poate fo losit de un sir de utilizatori incluzând DBA, programatori de
aplicații, personal de management și multe alte tipuri de utilizatori.
o SQL pune la dispoziție comenzi pentru o varietate de task -uri incluzând:
-date interogate
-inserarea, extragerea și șterger ea rândurilor într -un tabel
-crearea, modificarea și șt ergerea obiectelor de tip bază de date
-controlul accesului la baza de date și la obiectele de tip bază de
date

31
4.2.1 Setul cel mai important de comenzi SQL

În Tabel18 se regăsesc cele mai importante comenz i în MySQL

Comand Descriere
SELECT este comanda cea mai utilizată; este folosita pentru obținerea
datelor din bazele de date
INSERT Se folosește pentru a introduce date în baza de date
UPDATE Se folosește pentru a actualiza datele din baza de date
DELETE Se folosește pentru a șterge din baza de date orice fel de dată
Tabel18 Comenzi MySQL

4.2.2 Scrierea comenzilor SQL

o Comenzile SQL pot fi pe una sau mai multe linii.

o Clauzele sunt uzual plasate pe linii separate.

o Tabelarea poate fi folosită.

o Cuvintele de comandă nu pot fi separate pe mai multe linii.

o Comenzile SQL nu sunt 'case sensitive'.

o O comandă SQL este introdusa la promptul SQL și liniile
subsecventelor sunt numărate.

Un exemplu de comenzi SQL valide este prezentat în Fig.29.

1 SELECT(toate coloanele) F ROM nume_bază_de_date;
2 SELECT
3 ( toate coloanele )
4 FROM nume_bază_de_date;
5 SELECT (toate coloanele )
6
7 FROM nume_bază_de_date
8 ;
Fig.29 Exemplu MySQL

32
Exemple ale celor mai importante comenzi SQL se regăsesc în Fig.30

INSERT:

INSERT INTO numetabelă
VALUES ( valoare1,valoare2,valoare3, . . . )

SELECT:

SELECT numelecoloanelor
FROM numetabelă

UPDATE:

UPDATE numetabelă
SET coloană \u a1=valoare1, coloan \u a=valoare2 , . . .
WHERE o.coloană \u a=o.valoare
DELETE:

DELETE FROM numetabelă
WHERE o.coloană \u a = o.valoare
Fig.30 Comenzi SQL

33
5. Framework -ul Laravel

Laravel este un gratuit, open -source PHP web-framework, creat de Taylor
Otwell.

Laravel este o aplicație web -framework cu sintaxa expresivă, elegantă.
Laravel încearcă să ajute dezvoltatorii web prin facilitarea sarcinilor comune
utilizate în majoritatea proiectelor de web, cum ar fi auten tificare, rutare, sesiuni,
și cache -ul. Este accesibil, puternic, având instrumente puternice pentru aplicații
mari, robuste.

5.1. Instalare Laravel

o Instalare Composer

Laravel utilizează Composer pentru a gestiona dependențele sale. În
primul rând, descărcați composer.phar. de pe https://getcomposer.org /download
/.

o Descărcați Laravel installer folosind Composer în cmd command prompt:

composer create -project laravel /laravel

o Pornire server Laravel

Puteți utiliza un server de web cum ar fi Apache sau Nginx. Dacă lucrați
cu PHP 5.4+, puteți utiliza comanda serve din Artisan:

php artisan serve

5.2. MVC

Aplicațiile Laravel urmează modelul tradițional de design Model -View –
Controller, în cazul în care utilizați:
o controllere să se ocupe de cererile utilizatorilor și de a prelua date,
folosind modele;
o modele pentru a interacționa cu baza de date și de a prelua obiecte,
informații;
o view pentru a face paginile;

34
În plus, rutele sunt folosite pentru a lega URL -uri pentru acțiunile controlorului
desemnat, așa ca în Fig.31.

Fig.31 Rute

o Model: crearea unui model, pentru a reprezenta un evenim ment.

Laravel vine cu utilitatea CLI Artizan, care oferă o mulțime de comenzi
utile pentru a ajuta la construirea aplicației.

Pentru a crea un model, în linia de comandă vom scrie comandă
următoare:

php artisan make:model Event

Modele sunt toate stocate în directorul principal app, astfel încât comanda
va genera un fișier app/Event.php, ca în Fig.31.

Fig.31 Model

35

Pentru a genera un fișier de migrare de date pentru crearea unei tabele în
baza de date vom scrie în linia de comandă următoarea comandă:

php artisan make:migration create_events_table

Fișierul de migrare este situat la database \migrations \2017_02_02_
153743 _create_events_table.php și va arăta ca în Fig.32.

Fig.32 Fișier migrare

o Controller: este menționat ca o resursă

Utilizând o altă comandă Artisan, se creează controllerul:

php artisan make:controler EventController -r

Va fi generat un fișier de controler Http \Controllers \EventController.php ca
în Fig.23 și Fig.34.

36

Fig.33 Controller

37

Fig.34 Controller

Se generează automat un controller cu toate acțiunile tipic CRUD.

o CRUD

În programarea calculatoarelor, create, read, update și delete (CRUD)
sunt patru funcții de bază de stocare. Cuvintele sunt uneo ri folosite la definirea
celor patru funcții de bază ale CRUD, regăsire în loc de citire, modificare în loc
de actualizare sau distruge în loc de delete.

38
În Tabel19 se regăsesc funcțiile ce aparțin de CRUD.

Operație SQL HTTP
Create INSERT PUT / POST
Read (Retrieve) SELECT GET
Update (Modify) UPDATE PUT / POST / PATCH
Delete (Destroy) DELETE DELETE
Tabel19 Funcții CRUD

o Rute

Avem nevoie să definim căi pentru a asocia adrese URL cu toate aceste
acțiuni de controller.

În fișierul de configurare rute găsim routes \web.php – se adăugă
următoarea linie de cod pentru a defini un traseu pentru resursa Event:

Route::resource ('events','EventController');

Această definiție va defini toate rutele legate de resursa noastră
prezentate în Tabel20.

Tip Cale Acțiune Nume Rută
GET / event index event.index
GET / event /create create event.create
POST / event store event.store
GET / event /{ event } show event.show
GET / event /{ event }/edit edit event.edit
PUT/PATCH / event /{ event } update event.update
DELETE / event /{ event } destroy event.destroy
Tabel20 Rute

o View

Fișierele View sunt stocate în folderul de resources \views .

Fișierele View Laravel utilizează Blade template, și sunt numite.
blade.php.

Fișierul View resources \views \admin \events \index.blade.php va avea codu
ca și in Fig.35.

39

Fig.35 View

40
6. Framework -ul Bootstrap

Bootstrap este cel mai popular Framework din lume. A fost realizat de
catre Mark Otto si Jacob Thornton la twitter . Este un ajutor pentru toti Web
Developerii. Utilizarea lui ajută la economisirea considerabilă a timpului investit în
realizarea unui web -site. Cel mai important de stiut este faptul ca Bootstrap este
un proiect open -source, ceea ce înseamnă c a poate fi folosit la realizarea
proiectelor atât individuale cât comerciale.

6.1 Instalare Bootstrap3

Primul lucru pe care trebuie sa îl facem este să downloadam Bootstrap -ul
de site -ul http://getbootstrap.com/. Odata ajunsi pe pagină oficială putem apasa
pe butonul down -load sau accesa pagina Customize de unde îl putem
personaliza chiar în ainte de a -l descarca .

Descarcați -l in folderul public al proiectului vostru.

În interiorul arhivei descărcate vom gasi 3 foldere: css, img si js la fel ca în
Fig.28.

o În folderul CSS găsim stilurile, mai exact fișierele responsabile pentru
stilizarea paginilor.
o În img găsim pictograme pe care le vom putea utiliza în paginile noastre.
o În folderul js, bineînteles, vom găsi doua fișiere JavaScript.

Tot ce ne mai ramane de facut este sa îl integram în Laravel.

<script src="/js/app.js"></script>

Fișierul va arăta la fel ca în Fig.36

Fig.36 Cale fișier Bootstrape

41
6.2 Stiluri

Bootstrap -ul are integrate multe stiluri predefinite cum ar fi aspectul
butoanelor, al tabelelor, al panourilor de logare etc, asta înseamnă ca nu trebuie
sa programezi totul de la 0, poti modifica stilurile originale sau le poti folosi exact
asa cum sunt.
6.3 Folosirea Bootstrap -ului

Bootstrap este axat pe un sistem grila (Grid System). Sistemul predefinit
are 12 coloane care generează un recipient de 940 pixeli lățime dacă nu folosim
css-ul responsive, și între 724px și 1170px lățime dacă îl folosim.

Atunci când rezoluția dispozitivului este mai mica de 76 7px, coloanele se
vor alinia una sub cealaltă și îsi vor modifica dimensiunile lățimii după cele ale
dispozitivului.

6.4 HTML -ul de Bază a Framework -ului

În interiorul coloanelor se adăugă conținutul care doriți să apară pe server.
În exemplul ur mător, reprezentat în Fig.37, ținând cont că lucrăm cu 12
coloane, am alocat pentru fiecare câte 4 coloane.
Pentru a face asta, vom crea un <div> cu o clasă .row în care vom
introduce coloanele. Pentru a aloca unui <div> 4 coloane utilizăm clasa .co l-md-
4.
În interiorul coloanelor, am adăugat tipuri de butoane.

Fig.37 Exemplu

42
Toate acestea vor avea codul ca și în Fig.38.

Fig.38 Cod Exemplu
6.5 Alinierea Textelor

Putem alinia textele folosind trei clase diferite furnizate de către bootstrap,
prezentate în Tabel21.

Clasă Descriere
.text- left aliniaz textul lastânga
.text- center centrează textul
.text- right aliniază textul la dreapta
Tabel21 Aliniere text

43
7. XAMPP

XAMPP face usoară instalarea serverului Apache și conține MySQL, PHP
și Perl. XAMPP este chiar foarte ușor de instalat și de folosit – doar descarcă,
extrage și pornește. Există multe alte programe asemănă toare cu XAMPP
(WAMPP, Easy PHP ) dar l -am ales pe acesta deoarece mi se pare cel mai usor
și simplu d e utilizat.
Ultima versiune include următoarele unelte: Apache, MySQL, PHP +
PEAR, Perl, mod_php, mod_perl, mod_ssl, OpenSSL, phpMyAdmin, Webalizer,
Mercury Mail Transport System for Win32 and NetWare Systems v3.32, Ming,
JpGraph, FileZilla FTP Serv er, mcrypt, eAccelerator, SQLite, and WEB -DAV +
mod_auth_mysql.
Din ele cele mai utilizate :
o Apache – este dezvoltat de o firma franceză și un server HTTP de tip open
source, adică este gratis.
o MySql – este un sistem de gestiune a bazelor de date rel ational, produs de
compania suedeză MySQL AB și distribuit sub Licenta Publica Generala
GNU
o PHP – este un limbaj de programare orientat spre programarea web
dinamică. Se poate folosi în combinație cu HTML, javascript, CSS, AJAX,
PERL și Mysql pentru a real iza site -uri de o complexitate ridicată.
o phpMyAdmin – este un sistem de gestiune a bazelor de date MySQL liber,
open source, scris în PHP și destinat administrării bazelor de date prin
intermediul unui browser web.

44
8. Editorul Atom

Atom este un editor de text modern, abordabil cu sursă deschisă și
editabilă – un instrument ce poate fi personalizat după preferințe, și de
asemenea, poate fi utilizat în mod productiv.

Facilități Atom:
o este gratuit
o este open -source.
o este modular
o are o mare comunitate

Pagina de pornire a editorului Atom este cea din Fig.39.

Fig.39 Editorul Atom

45
9. Prezentarea site -ului

9.1 Scurtă descriere

Site-ul “Evenimente în Brașov” cum am specificat și la începutul acestei
lucrări a fost conceput pentru a ajuta toate persoanele ce sunt interesate de
activitătile din Brașov.

Site-ul este realizat folosind ultimele tehnologii web pentru a ține evidența
evenimentelor petrecute sau nu, în Brașov. De mică am fost la foarte multe
evenimente asociate orașului Brașov, inspirată fi ind de părinții mei, începând de
la piese de teatru, filme, până la meciuri de fotbal, handbal, etc.

Pentru mine site -ul “Evenimente în Brașov” reprezintă evoluția orașului,
deoarece nu doar arhitectura și istoria iși pot pune amprenta asupra ei ci ș i
evenimentele culturale sau non -culturale.

9.2 Structura Site -ului

În Fig.40 este prezentată structura site -ului ea fiind un destul de simplă
dar foarte funcțională.

Fig.40 Structura Site -ului

46
9.3 Administrarea site -ului

În acest capitol voi prezenta partea administrativă a site -ului.
Administrarea este realizată cu ajutorul framework -ului Laravel. Acest
framework îți pemite sa creezi pagini atât exterioare cât si interioare.

Pagina de administrare poate fi folosită doar de către admin, dacă în
momentul logării introducem date greșite va apărea un mesaj ca cel din Fig.41.

Fig.41 Login
9.3.1 Paginile Utilizatori Categorii, Locații și Evenimente

Dacă datele administratorului si parola au fost introduse corect atunci vom
avea acces la paginile de administrare. Prima pagină este pagina principală a
site-ului, pentru a putea urmări mult mai ușor încărcarea utilizat orilor , categoriilor,
locațiilor sau a evenimentelor.

Dacă dorim să vizualizăm utilizatorii, a tunci trebuie să accesăm din
dreapta sus numele, si va fi afișat un meniu dropdown cu toate paginile
administrate și vom allege utilizatori
După cum se vede în Fig.42 avem posibiltatea de a ștergere, modifcare
sau adăugare a unui utilizator .

47
Fig.42 Pagina Utilizatori
Pentru a adăuga un utilizator, accesăm butonul “ +” și vom intra pe pagina
de adăugare u tilizator, ce arată ca în Fig.43 .

Fig.4 3 Adăugare utilizator

Pentru a adăuga un utilizator, trebuie completate următoarele câmpuri:
o Nume: Nu mele utilizatorului;
o Adresă E -Mail: Adresă e -mail;
o Parolă: Parolă;
o Confirmă: Parolă;
o Rol: Poate fi user sau admin;

Dacă dorim să vizualizăm categoriile, tot din meniul dropdown selectăm
“Categorii”. (vezi Fig.44)

Fig.44 Listă categorii

48
Pentru a adăuga o categorie, accesăm butonul “ +” și vom intra pe pagina
de adăugare categorie, ce arată ca în Fig.45.

Fig.45 Adăugare categorie

Aici sunt doar două câmpuri ce trebuie completate:
o Categorie: Numele categoriei;
o Culoare: Îi atribuim o c uloare cu ajutorul unui fișier JavaScript;

Dacă dorim să vizualizăm locațiile, atunci selectăm “L ocații”.
Pentru a adăuga o locație, accesăm butonul “ +” și vom intra pe pagina de
adăugare locație, ce arată ca în Fig.46.

Fig.46 Adăugare loca ție

49
Pentru a adăuga o locație, trebuie completate următoarele câmpuri:
o Locație: Numele locației;
o Adresă: Adresa locației;
o Descriere: Informații despre locație;
o Link: Site -ul oficial al locației; este un câmp opțional;
o Facebook: Pagina oficială a locației ; este un câmp opțional;
o Imagine: Este un câmp opțional, putem adăuga o imagine reprezentativă a
locației;

Dacă dorim să vizualizăm evenimentele, atunci selectăm “Evenimente”.
Ca și administrator, trebuie gestionate si verificate evenimente pentru ca ele să
apară pe interfață. (Fig.47)

Fig.47 Listă evenimente

50
Pentru a adăuga un eveniment, accesăm butonul “Adaugă” și vom intra pe
pagina de adăugare eveniment, ce arată ca în Fig.48 .

Fig.4 8 Adăugare Eveniment

Pentru a adăuga un eveniment, trebuie completate următoarele câmpuri:

o Nume: Numele evenimentului;
o Descriere: Informații despre eveniment;
o Categorie: Îi putem atribuii o categorie deja existentă, dacă dorim ca
evenimentului să ii se atribuie o categorie nouă, trebuie să adăugăm
prima d ată categoria;
o Locație: Îi putem atribuii o locație deja existentă, dacă dorim ca
evenimentului să ii se atribuie o locație nouă, trebuie să adăugăm prima
dată locația;
o Dată și oră: setăm data și ora evenimentului;
o Imagine: Este un câmp optional, putem adăuga o imagine reprezentativă
a evenimentului;
o
După accesarea butonului „Adaugă”, toate datele vor fi stocate în baza de
date.

51
9.4 Funcționalităț i

Faptul că am folosit framework -ul Laravel m -a ajutat foarte mult.
Aplicațiile Laravel urmeaz ă modelul tradițional de design Model -View –
Controller, în cazul în care utilizați:
o controllere să se ocupe de cererile utilizatorilor și de a prelua date,
folosind modele;
o modele pentru a interacționa cu baza de date și de a prelua obiecte,
informații;
o view pentru a face paginile;

Laravel aduce utilitatea CLI Artizan, iar pentru pornirea server -ului scriem
comanda de mai jos în cmd:
php artisan serve

Așa cum am menționat și în capitolul dedicat framework -ului Laravel
pentru a genera un fișier de migrare de date pentru crearea unei tabele în baza
de date vom scrie în linia de comandă următoarea comandă:

php artisan make:migration create_events_table

Fișierul de migrare este situat la database \migrations \2017_02_02_
153743 _create_events_table.php și va arăta ca în Fig.4 9.

Fig.49 Fișier migrare

52
MVC – Model -View -Controller

Model.

Modelul este acel loc în care sunt stocate informațiile despre obiectele
aplicației.
Modelul nu știe nimic despre View și Controller .
În Fig.50 se regăsește codul modelul pentru pagina “Evenimente” din site -ul
“Evenimente în Brașov”.

Fig.50 Modelul Event

Pentru a evita alocarea în masă a domenilor, vom defini lista de câmpuri din
model sub $fillable, astfel încât atunci când trimitem datele pentru modelul pe
care îl va procesa în mod dire ct în acțiuni cum ar fi crearea , actualizarea,
ștergerea, etc.

Controller

Controller -ul este factorul de decizie și legătura dintre Model și View.
Controllerul actualizează View -ul atunci când se schimbă modelul. De
asemenea, actualizează modelului atunci când utilizatorul manipulează
View.
În Fig. 51 se regăsește codul funcției pentru adăugarea de evenimente din
site-ul “Evenimete în Brașov”.

53

Fig.51 Funcția pentru adăugare

În interiorul acestei funcții apelăm modele pentru categorii și locații, deoarece
la creearea de eveniment avem nevoie de datele din tabele pentru categorii și
locații.
Funcția returnează View pentru adăugare împreună cu datele extrase.

În Fig.52 se regăsește codul funcției pentru ștergere de evenimente din site -ul
“Evenimete în Brașov”.

Fig.5 2 Funcție pentru ș tergere

Funcția destroy are ca parametru “id”. În interiorul acestei funcții apelam
modelul Event pentru a găsi evenimentul cu “id” -ul primit, apoi îl șterge.

În cazul în care un utilizator, o categorie sau o locație este ștearsă, atunci ș i
evenimentul va fi șters. Codul pentru această metodă se găsește in fișerul de
migrare si va fi ca în Fig.53 .

Fig.53 Ștergere în cascadă

54
View
Fișierele View sunt stocate în folderul de resources \views .
Fișierele View Laravel utilizează Blade template, și sunt numite.blade.php.
Fișierul View resources \views \admin \events \index.blade.php va avea codul ca
și in Fig.54 și Fig.55 .

Fig.54 View Event index.blade.php

Fig.55 View Event index.blade.php

55

9.5 Baza de date

Baza de date este formată din patru tabele. În Fig.5 6 se poate vedea structura
baze i de date si legăturile create pentru a se întelege mai bine cum funcționează.

Fig.56 Structură bază de date

56
10. Ghidul site -ului

Vizitatorul, utilizatorul și administratorul vizualizează aceeași primă
pagină.
În momentul în care intrați pentru prima dată pe site -ul “Evenimente în
Brașov” sunteți considerat vizitator.

În Fig.57 este ilustrată prima pagina.

Fig.57 Prima pagină

În bara de navigare colțul din stânga sus se găsește logo -ul iar în dreapta
se găsește panoul de Login sau Înregistrare.

În conținutul site -ului se găsește o listă a evenimentelor în partea centrală
iar în partea dreaptă un buton de adăugare și o listă de filtre.

Butonul de adăugare poate fi accesat doar dacă vizitatorul se
înregistrează și devine utilizator.

Lista de filtre începe cu un filtru foarte util ce ajută vizitatorul să
vizualizeze doar evenimentele într -un interval de timp . (Fig.58 part1)
Următorul filtru îi permite vizitatorul să vizualizeze și o arhiva
evenimentelor. (Fig.58 .part2)

57
Primele doua filtre pot fi folosite și în momentul în care unul din filtrele
urmatoare este deja activ.
Dacă se dorește vizualizarea evenimentelor doar dintr -o anumită
categorie, va fi accesată acea categorie din lista (Fig.58 .part3), dacă va fi folosit
unul din primele două filtre atunci vor fi afișate doar evenimentele din categoria
aleasa fil trate corespunzator filtrului ales.
La fel ca și în cazul filtrului pentru categorii, filtrul pentru locații
funcționeaza identic cu acesta. (Fig.5 8.part4 )

Fig.58 Filtre

Dacă este activ unul din filtrele categorii sau locatii, sub lista de filtre va f i
afisata o statistica in functie de evenimentele filtrate sau nu.

58

Exemplu 1: Dacă sunt pe filtrul pentru locații Reduta, am bifat și filtrul
Vizualizați arhiva statistic a va arăta ca în Fig.59.

Exemplu2: Dacă sunt pe filtrul pentru locații Reduta și am completat filtru
interval timp statistica va arăta ca în Fig.60 .

Fig.59 Statistica -exemplul1 Fig.60 Statistica -exemplul2

59

În conținutul paginii sunt afișate evenimetele în funcție de filtrele adăugate
de dumneavoastră.

Conținutul unui eveniment (Fig.61) va avea ca și informații detaliile :
o Titlul evenimentului
o Categoria din care face parte LA Locația unde va avea loc
o Data și ora
o Poza
o Descriere e veniment

Fig.61 Conținut eveniment

Dacă apăsăm pe “Locație” din conținutul evenimentului atunci se va
deschide o fereastră cu toate detaliile despre aceaa locație, la fel ca în Fig.6 2

Fig.61 Detalii locație

60
Dacă doriți să adăugați evenimente atunci trebuie să deveniți utilizator,
pentru asta trebuie să vă înregistrați. (Fig.62 )

Fig.62 Înregistrare

În momentul în care sunteți utilizator aveți dreptul de a adăuga
evenimente, interfața va fi aceasi ca și p entru vizitator doar ca acum butonul
“Adaugă eveniment” va fi disponibil pentru dumneavoastră.

Pentru a adăuga un eveniment aveți nevoie de un document de
autenticitate pentru ca administratorul să aprobe evenimentul. (Fig.63)

Fig.63 Utiliza tor adaugă eveniment

61
Ca și utilizator, poți modifica datele tale de autentficare, de la nume, email
parola, pana la tema site -ului ce include imaginea de background si culoarea
bării de navigare.
În momentul înregistrării unui utilizator îi este atribuită o temă, dar această
temă se poate schimba cu una din cele deja predefinte.
Toate aceastea se realizează din pagina de Profil aceasta accesând -o din
meniu dropdown ce apare la click pe numele de utilizator. (Fig.64)

Fig.64 Utilizator meniu

La accesarea profilului se pot vedea toate datele utilizatorului, dacă
accesăm butonul de edit, se pot edita toate datele. (Fig. 65)

Fig.65 Profil

62
Pentru temă se gasește o lista cu teme predefinite (Fig.66). Iar la
schimbare opțiunii în partea de j os se încarcă o previzualizare a temei alese.
(Fig.67)

Fig.66 Lista teme

Fig.67 Temă previzualizare

63
Ca și utilizator poți vizualiza o listă cu evenimentele adăugate de tine.
(Fig.68). Dacă evenimentul a fost aprobat de catre administrator atunci va fi o
bifa in fata evenimentului dacă nu va fi un “ X” (Fig.68). Poți edita sau șterge un
eveniment.

Fig.67 Listă evenimente utilizator

Toate aceste pagini au fost create dinamic, astfel încât putem modifica,
adăuga evenimente.
Site-ul “Evenimente în Brașov” este perfect atât pentru persoanele ce
folosesc telefoane mobile sau calculator, deoarece folosind framework -ul
Bootstrape, site -ul este responsive, ceea ce înseamnă că își adaptează
dimensiunile în funcție de ce device e folosit.

64
Bibliografie
[1] L. Sângeorzan, C -tin Lucian Aldea –“Tehnologii Internet” Ed.Univ.Transilvania,
2003.
[1] L. Sângeorzan – “Tehnologii Web si WEBDesign” Ed.Univ. Transilvania, 2009.
Webografie:

[1] https://atom.io/docs
[2] https://laravel.com/docs
[2] http://ciobanu.cich.md
[3] http://preview.freelogodesign.org
[4] http://getbootstrap.com
[5] http://en.wikipedia.org/wiki
[6] http://w3schols.com
[7] http://php.net