Licentapaulsimea2018 [628652]

UNIVERSITATEA DIN ORADEA
FACULTATEA DE INGINERIE ELECTRICĂ ȘI
TEHNOLOGIA INFORMAȚIEI
PROGRAMUL DE STUDIU CALCULATOARE
FORMA DE ÎNVĂȚĂMÂNT IF

Proiect de diplom ă

COORDONATOR ȘTIINȚIFIC
Șef lucrări dr.ing. Maștei Daniela

ABSOLVENT: [anonimizat]
2018

UNIVERSITATEA DIN ORADEA
FACULTATEA DE INGINERIE ELECTRICĂ ȘI
TEHNOLOGIA INFORMAȚIEI
PROGRAMUL DE STUDIU CALCULATOARE
FORMA DE ÎNVĂȚĂMÂNT IF

PROIECTAREA ȘI IMPLEMENTAREA UNUI
MAGAZIN PENTRU O SALĂ DE JOCURI

COORDONATOR ȘTIINȚIFIC
Șef lucrări dr.ing. Maștei Daniela

ABSOLVENT: [anonimizat]
2018

UNIVERSITATEA DIN ORADEA
FACULTATEA DE INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI
DEPARTAMENTUL CALCULATOARE ȘI TEHNOLOGIA INFORMAȚIEI

TEMA___
Proiectul de finalizare a studiilor a student: [anonimizat]
1). Tema proiectului de finalizare a studiilor:
Proiec tarea și implementarea unui magazin pentru o sală de jocuri

2). Termenul pentru predarea proiectului 3.07.2018

3). Elemente inițiale pentru elaborarea proiectului de finalizare a studiilor
HTML5, CSS3, Bootstrap, PHP, MySql, JavaScript, jQuery.

4). Conținutul proiectului de finalizare a studiilor
Introducere
Capitolul I. Teorie fundamentală
Capitolul II. Tehnologii și limbaje de programare utilizate
Capitolul III. Prezentarea aplicației
Concluzii
Bibliografie

5). Material grafic: prezentare Power Point

6). Locul de documentare pentru elaborarea proiectului:
Biblioteca Universității Oradea, Biblioteca județeană, internet, lucrări de laborator.

7). Data emiterii temei 20.10.2017

Coor donator științific
ș.l. dr. ing. Maștei Daniela

Cuprins

Introducere ………………………….. ………………………….. ………………………….. ………………………….. .. 1
Capitolul 1. ………………………….. ………………………….. ………………………….. ………………………….. .. 2
Teorie fundamentală ………………………….. ………………………….. ………………………….. ……………….. 2
1.1 Aplicația web ………………………….. ………………………….. ………………………….. ………………………….. . 2
1.2 Baze de date ………………………….. ………………………….. ………………………….. ………………………….. … 3
Capitolul 2. ………………………….. ………………………….. ………………………….. ………………………….. .. 5
Tehnologii și li mbaje de programare utilizate ………………………….. ………………………….. ………….. 5
2.1 XAMPP ………………………….. ………………………….. ………………………….. ………………………….. ……… 5
2.2 Brackets ………………………….. ………………………….. ………………………….. ………………………….. ……… 6
2.3 Limbajul HTML ………………………….. ………………………….. ………………………….. ……………………….. 7
2.4 Limbajul HTML5 ………………………….. ………………………….. ………………………….. ……………………… 8
2.5 Limbaj ul CSS ………………………….. ………………………….. ………………………….. ………………………….. . 9
2.6 Limbajul CSS3 ………………………….. ………………………….. ………………………….. ……………………….. 10
2.7 Limbajul PHP ………………………….. ………………………….. ………………………….. ………………………… 11
2.8 Limbajul SQL ………………………….. ………………………….. ………………………….. ………………………… 12
2.9 Limbajul JavaScript ………………………….. ………………………….. ………………………….. …………………. 13
2.10 jQuery ………………………….. ………………………….. ………………………….. ………………………….. …….. 15
Capitolul 3. ………………………….. ………………………….. ………………………….. ………………………….. 16
Prezentarea aplica ției ………………………….. ………………………….. ………………………….. …………….. 16
3.1 Structura website -ului………………………….. ………………………….. ………………………….. ………………. 16
3.2 Prezentarea meniului principal ………………………….. ………………………….. ………………………….. …… 17
3.3 Prezentarea paginii magazin ………………………….. ………………………….. ………………………….. ……… 21
3.4 Administrarea aplicației ………………………….. ………………………….. ………………………….. ……………. 25
3.5 Baza de date ………………………….. ………………………….. ………………………….. ………………………….. . 25
3.6 Diagrama conceptuală a bazei de date ………………………….. ………………………….. ……………………… 28
3.7 Securitatea aplicației ………………………….. ………………………….. ………………………….. ……………….. 29
Concluzii ………………………….. ………………………….. ………………………….. ………………………….. … 30
Bibliografie ………………………….. ………………………….. ………………………….. …………………………. 31

1
Introducere

Tema lucrării este “Proiectarea și implementarea unui magazin pentru o sală de
jocuri ”.
Am ales s ă creez acest site cu scopul de a promova o viitoare sală de jocuri pe
calculator și consolă din Orade a și pentru că am do rit să-mi îmbunătățesc cunoștințele în
programare, web design și baze de date.
Pentru realizarea acestei aplicații a m folosit editorul de cod Brackets și pentru
gestiunea bazei de date am utilizat XAMPP. Limbajele de programare care le -am folosit sunt :
HTML, CSS, Bootstrap, JavaScript, PHP, MySQL, Jquery.
Lucrarea este structurat ă pe următoarele capitole : Teorie fundamental ă, Tehnologii și
limbaje de programare utilizate , Prezentarea aplicației Web , Concluzii și Bibliografie

2
Capitolul 1.
Teorie fundamentală

1.1 Aplicați a web

Aplicați ile web sunt program e care rulează într -o arhitectură client -server bazat pe
tehnologii WWW(World Wide Web). Acestea înlocuiesc modelele în care serverul și clientul
rulează tehnologii proprietar, mentenanța aplicațiilor de pe partea de client este complexă,
susceptibilă la erori și costisitoare. Comoditatea browserelor de a le fol osi drept client a dus la
eliminarea acelei probleme. Astfel, au evoluat și serverele de aplicații, au apărut frameworkuri
și tehnologii dedicate programării acestora pe lângă limbajele de programare .[1]
Webul a ap ărut prima dată cu scopul de a distribui documente, aparând inițial în cadrul
său ca protocol HTTP și formatul HTML. Ca primă dezvoltare în scopul folosirii unui server
web a fost apariția CGI(Common Gateway Interface) la începutul an ului 1990. CGI a permis
rularea anumitor scripturi pe server, care să genereze în format HTML un răspuns dinamic .
Următorul pas a fost de a transforma ac ele documente HTML în interfețe dinamice cu
utilizatorul, prin crearea limbajului JavaScript de către Netscape , un limbaj având ca scop în
script area comportamentulu i browserului și introducerea unor elemente dinamice. Pe finalul
secolului XX, limbaju l JavaScript a fost extins ca funcționalitate semnificativ prin
introducerea API-ului numit XMLHttpRequest, cu ajutorul căruia se putea programa operații
precum să efectu eze și să proces eze răspunsuril e la mici cereri HTTP dintr -o pagină web, fără
a reîncărca însă întreaga pagină. La început, datele acelor cereri mici erau transferate de la
client la server în format XML, ceea ce a dus la denumirea de AJAX(Asynchronous
JavaScript and XML), însă pe măsură ce limbajele de programare server -side au introdus
suportul, a devenit prefer ențial standardul JSON(JavaScript Objec t Notation). [1]
Pe partea de server, CGI a început să fie urmat de apari ția specificației Java ServLet,
care a fost inclusă mai apoi în Java Enterprise Edition, ceea ce a dus ca Java să devină un
limbaj de programare preponderent în cadrul aplicațiilor w eb de pe partea de server. Alte
exemple de limbaje de programare dedicate programării server -side au fost PHP(open -source
project ), ASP( Active -Server -Pages dezvoltat de Microsoft) și Ruby. [1]

3
1.2 Baze de date

Datorită dezvoltării rapide a industriei software și a calculatoarelor electronice ce a
dus la necesitatea stocării unui volum tot mai mare de date s -a impus perfecționarea modulului
de organizare și structurare a datelor care permit accesul rapid la datele stocate, pentru regăsirea
și prelucrare a acestora. Pentru a efectua mai multe operații diferite de prelucrare , accesul rapid la
date trebuie să rezolve probleme legate de viteza de regăsire a datelor și să asigure accesul mai
multor utilizatori. [2]
Există două tipuri de date și anume: date si mple care sunt independente unele de
altele din punct de vedere al repre zentării lor în memorie și datele compuse care reprezintă
colecții de date între care există anumite relații structurale. [3]
Organizarea datelor presupune:
 Definirea, structurarea, ordonarea și gruparea datelor în colecții de date omogene
 Stabilirea relațiilor între date
 Stocarea datelor pe un suport informațional

Obiectivele principale în organizarea datelor sunt :
 Accesul rapid la date
 Spațiul de memorie i nternă și externă ocupat de date să fie cât mai mic
 Datele să apară o singură dată în sistem
 Flexibilitatea datelor
O bază de date reprezintă un set centralizat și structura t a datelor stocate pe un sistem
informatic . Aceasta oferă facilități pentru regăs irea, adăugarea, modificarea și ștergerea
datelor atunci când este nevoie și oferă facilități pentru transformarea datelor extrase în
informații utile. [3]
Din punct de vedere al serviciilor pe care le oferă, baza de dat e reprezintă o colecție
de date care poate s ă descrie întreaga activitate a unei or ganizații și care furnizează acces la
diferite informații, care sunt prezentate în diferite formate. [3]

4
Avantajele folosirii bazelor de date în locul fișierelor de date sunt:
 Partajarea informațiilor
 Consistența, integritatea, securitatea, și independența datelor
 Transparența
MySQL este un sistem de gestiune a bazelor de date relaționle, ce nu conține interfață
grafică pentru administrarea sau gestionarea datelor din baz ele de date și este produs de
compania suedeză MySQL AB și distribuit sub Licența Publică Generală GNU. Este cel mai
popular SGBD open -source la ora actuală fiind o componentă cheie a stivei LAMP(Linux,
Apache, MySQL, PHP). Administrarea MySQL se face în două moduri : din linia de command ă
sau folosind browserul și accesând aplicația phpMyAdmin scrisă în PHP. [4]
Cele mai utilizate comenzi cu bazele de date sunt:
– CREATE : se creează o bază de date sau un tabel
– DROP: se șterge o bază de date sau un tabel
– INSERT : se inserează înregistrări în tabel
– DELETE : se șterg înregistrări din tabel
– UPDATE : se updateaz ă datele dintr -o bază
– SELECT : se selectează un tabel
– ALTER : se alterează un tabe l
Utilizatorii unei baze de date pot efectua mai multe operații asupra datelor și anume :
– Inserare de date (insert)
– Ștergere de date (delete)
– Modificarea datelor (update)
– Citirea bazei de date (query)
În limbajul MySQL înt âlnim anumite tipuri de date (Tabelul nr. 1).
Tabelul nr. 1
Tipul de date Descriere
CHAR Câmp cu lungime fixă de la 0 la 255 caractere
VARCHAR Câmp cu lungime variabilă de la 0 la 65,535 caractere
TEXT Șir cu lungime maximă de 65,535 caractere

5
Capitolul 2.
Tehnologii și limbaje de programare utilizate

În acest capitol am enumera t principalele soft-uri pe care le -am folosit la crearea
aplicației Web și principalele caracteristici ale acestora.
2.1 XAMPP
XAMPP este un acronim pentru:
 X (de la "cross", care înseamnă cross -platform) – se poate folosi pe diferite sisteme de
operare
 Apache HTTP Server
 MySQL – pentru gestionarea bazelor de date
 PHP – limbaj de programare folosit în dezvoltarea paginilor web
 Perl
Este un program de dezvoltare, care permite designerilor și programatorilor web să își
testeze munca pe calculatoarele proprii, fără a avea nevoie de acces la Internet. Se poate
utiliza pe orice platformă (Windows, Unix) și este ușor de instalat, și gratuit.

Figura 1 – Panelul de control XAMP pentru pornirea și oprirea serviciilor Apache, MySql
Am ales să folosesc acest program deoarece este o soluție gratuită și eficientă , acesta
oferindu -mi acces atât la bazele de date cât și la partea de front -end și back -end a website –
ului.

6
2.2 Brackets

Brackets este un editor de cod sursă scris în HTML, CSS și JavaScript folosit pentru
dezvoltarea de site -uri web. A fost creat de Adobe Systems, licențiat sub licența MIT, și este
în prezent menținut pe GITHUB de Adobe și de alți dezvoltatori. Brackets este disponibil
pentru descărcarea pe mai multe platforme, pe MAC, Windows și este disponibil cu
majoritatea distribuțiilor Linux. Scopul principal al programului Brackets este funcționalitatea
de editare live html, css si js.
Acesta oferă mai multe caracteristici și anume :
 Editare rapidă
 Quick Docs
 Previzualizare Live
 JsLint
 Open source

Figura 2 – Editorul de cod Brackets

7
2.3 Limbajul HTML

Termenul de website (sau simplu site, ori „site web”) reprezintă o grupă de pagini web
multimedia( care conțin texte, imagini fixe, imagini mișcătoare ș i sunete), acestea fiind
accesibile în internet oricui, pe o temă anume, și conectate între ele prin hyperlinkuri. Există
diferite site-uri web care pot să aparțină unei companii, unui proiect, unei rețele de utilizatori,
unei persoane particular e, unei administrații publice sau multe altele. [5]
Limbajul HTML(HyperText Markup Language) a fost impus pentru crearea paginilor
web. Acesta este un limbaj de marcare și are ca scop să prezinte intr -un anumit format
informațiile precum : tabele, paragrafe, culori, fonturi .
HTML este un limbaj de marcare destinat prezentării documentelor text pe o singură
pagină. Este un limbaj care dă infățișare Webului. Acesta constă d intr-o varietate de elemente
care se numesc etichete(tags), care se pot folosi la diferite sarcini precum, definirea tipurilor
de stil și a anteturilor, precum și la introducerea conținutului specific, cum ar fi imagini,
sunete, cuvinte în realitate virtuală și aplicații Java. [5]
HTML oferă mijloace prin care conținutul unui docume nt să poată fi adnotat cu
diferite tipuri de metadate și indicații de redare. O pagină Web este un fișier care conține text
și tag -uri HTML. Tag -urile HTML marchează textul pentru a defini cum este el afișat ca
pagină dintr -un document Web. Tag -urile au 3 părți: deschiderea, conținutul și închiderea . Ele
sunt folosite pentru formatarea paginilor Web și pentru a crea hiperlegături către alte
documente sau către alte pagini de pe Web. Un prim exemplu de tag este <html> care spune
browser -ului c ă a început un cod în HTML. Un al doilea tag, <body> marchează faptul că
incepe partea vizibilă sau conținutul paginii în HTML. Tag -urile de închidere sunt </body> și
</html> care spun browser -ului c ă s-a încheiat conținutul paginii și documentul HTML. Alte
exemple de tag-uri ar fii <strong>, </strong> care este folosit pentru a defini textul în format
“bold”, iar <p>, </p> sunt folosite pentru a marca apari ția unui nou paragraf. [5]
HTML este independent de platformă, adică se pot crea fișiere HTML pe o anumită
platfo rmă și se poate folosi orice alt calculator pentru a vizualiza acel fișier ca și o pagină
Web.

8
2.4 Limbajul HTML5

HTML5 este un limbaj de programare folosit pentru a structura și prezenta conținutul
pentru WWW(World Wide Web).
Reprezintă a cincea revizuire a standardului HTML, care a fost creat în anul 1990 și
standardizat din anul 1997 ca HTML4, HTML5 din anul 2011, luna octombrie, este in curs
de dezvoltare. Obiectivele principale ale acestuia au fost acelea de a îmbunătății limbajul cu
un suport pentru aparițiile cele mai recente multimedia , menținându -l ușor de citit în același
timp de oameni, de computere și device -uri cum ar fii : browsere web, parsere. HTML5
propune să -și însumeze atât HTML4, cât și XHTML1 și DOM2HTML. [6]
Standardul HTML5 a fost publicat de către W3C ca Working Draft în anul 2008, un
nou stadiu de „Recomandare W3C” fiind așteptat în anul 2014
HTML5 are multe caracteristici noi sintactice , caracteristici care cuprind elemente ca
<header >, < audio > și <video >, și elemente HTML, precum integrarea conținutului
SVG(Scalable Vector Graphics) care a înlocuit utilizarea tag -ului <object> . Aceste noutăți au
ca scop de a facilita includerea și manipularea conținuturilor multimedia în web dar și grafice
fără a mai fi nevoie să se apeleze la proprietățile de plugin și API. Elemente noi precum
<article >, < header >, < section > au scopul de a îmbunătăț ii conținutul semantic al
documentelor . [6]
Aplicațiile HTML5 pot fi pornite pentru a rula în modul offline. HTML5 oferă o
funcți e de stocare offline, numit ă un cache al cererii pentru stocarea de fișiere. Dacă
utilizatorul este deci offline, browser -ul mai are încă acces la fișierele necesare. Acest e fișiere
pot fi HTML, CSS, Javascript, sau oricare al te resurse necesare pentru a vizualiza o pagin ă de
web. [7]
HTML5 include o funcție Drag and Drop, care permite dezvoltarea de aplicații
interactive. Cu Drag & Drop avem posibilitatea să mutăm orice element în locul dorit.
HTML5 introduce multe elemente no i de intrare, cum ar fi selectoare de culori, pop -up
calendare și altele.
Am folosit acest limbaj pentru a structura și a da sens conținutului web, de exemplu,
definind paragrafe, titluri și tabele de date sau încorporând imagini.

9
2.5 Limbajul CSS

CSS provine din expresia Cascading Style Sheets și este un limbaj de stilizare al
elemntelor html, al tagu -urilor html. Cu ajutorul unui CSS descriem modul de reprezentare al
paginii HTML, într -un fișier separat. CSS lucrează cu o anumită ierarhie, oferă l ibertatea să
suprascriem un stil deja folosit. [8]
CSS are mai multe avantaje :
 Conținutul este separate de prezentare
 Are control asupra layout -ului documentelor dintr -o singură pagină de stiluri
 Permite ca modul de afișare si layout -ul paginilor de pe un server web să fie definite
intr-un singur loc
 Se poate utiliza pentru pagini HTML, cât și pentru documente XML [8]
Sintaxa fișierelor CSS constă dintr -o listă de:
 Selectori – folosiți pentru alegerea tag -urilor
 Descriptori – pentru a indica ce vrem să facem cu acestea
CSS extinde funcționalitățile HTML, permițând redefinirea etichetelor HTML existente .
Funcționează ca HTML, însă nu este HTML.
Un fișier CSS conține o listă cu astfel de perechi(selectori, descriptori) . Selectorii pot
fi simple tag -uri HT ML sau XML iar descriptorii sunt defini ți în standard -ul CSS. [8]
Există trei moduri de utilizare a CSS -urilor:
– Style sheet extern :
Se aplică la HTML și XML și se pot utiliza toate elementele de sintaxă CSS
– Style sheet intern :
Se aplică numai la HTML și se pot utiliza toate elementele de sintaxă CSS
– Style sheet inline :
Se aplică numai la HTML și nu se pot utiliza toate elementele de sintaxă CSS

10
2.6 Limbajul CSS3

CSS3 oferă o mulțime de lucruri noi pentru a îmbunătății un website. Cea mai mare
schimbare o reprezintă includerea modulelor. Avantajul modulelor este acela că permite
specificațiilor să fie completate și aprobate mai repede, deoarece segmentele sunt completate
și aprobate în bucăți. [8]
Caracteristici noi CSS3 :
– Selectorii :
 Permit proiectantulu i/dezvoltatorului să selecteze niveluri mult mai specifice
ale documentului
 Pseudo -clase structurale precum nth -child
 Pseudo -clasă țintă pentru a modela numai elementele care sunt vizate în URL
– Efecte de text și layout
Text shadow – se poate adăuga umbră la conținut sau la anumit font
– Pseudo -clase precum first -letter și first -line
– Mediu paginat și conținut generat
CSS3 suportă mai multe opțiuni in mediile paginate precum : rularea antetelor și
subsolurilor, numerotarea paginilor, anumite proprietăți pentru imprimarea
conținutului generat, inclusiv proprietăți pentru notele de subsol și refer ințele
încrucișate [8]
– Multi -column layout
Oferă proprietăți care permit proiectanților să -și afișeze conținutul în mai multe
coloane, cu definiții cum ar fi decalajul dintre coloane, numărul de coloane și lățimea
coloanei.
– Ruby
Are capacitatea de a adăuga adnotări mici in partea de sus sau lângă cuvinte, cele
mai des utilizate in limba chineză sau japoneză. Ele sunt utilizate în general pentru a
da pronunția sau sensul ideogramelor dificile. [8]
În cazul aplicației pe care am realizat -o, am folosit un fișier inclus extern cu extensi a
.css pentru a modela și a defini paginile web.

11
2.7 Limbajul PHP

PHP este un limbaj de programare folosit pentru dezvoltarea paginilor și aplicațiilor
web. Limbajul a fost inițial d ezvoltat de inventatorul său Rasmus Lerdorf, iar odată cu
creșterea de utilizatori, dezvoltarea a fost preluată de o nouă entitate, numită The PHP Group.
Limbajul PHP a apărut în anul 1994 din nevoia lui Rasmus Lerdo rf de a afla câte
persoane îi viziteaza CV -ul online. El a denumit setul de scripturi create PHP, acronimul
pentru Personal Home Page . Limbajul a evoluat în urmatorii ani, iar succesul adevărat a
început să îl cunoască de când Zeev Suraski și Andi Gutmans au rescris motorul PHP de la
cap coadă, motor care poartă versiunea 4 a PHP numele Zend. Fiind open -source, P HP
beneficiază de suport activ din partea comunității online, acesta fiind și motivul creșterii
numărului site -urilor bazate pe PHP. [11]
PHP este cel mai cunoscut limbaj de scripting folosit pentru crearea site -urilor Web
interactive. Denumirea este un a cronim recursiv pentru Hypertext PreProcessor. Diferența față
de alte limbaje de scripting precum JavaScript, este faptul că PHP este un interpretor server –
side adică operațiile sunt executate de către server și nu pe calculatorul utilizatorului. [11]
Sunt trei domenii principale, unde sunt utilizate scripturile PHP:
– Scripting pe partea serverului – acesta este cel mai tradi țional și de bază domeniu al
PHP
– Scripting în linia de comandă – se poate crea un script PHP care poate rula fără server
și fără na vigator web
– Scrierea aplicațiilor de birou
Una dintre cele mai semnificative facilități ale PHP este susținerea unui larg domeniu
de baze de date. Accesarea unei baze de date se face utilizând una din extensiile de lucru cu
baze de date sau utilizând un ni vel de abstractizare precum POO, sau conectarea la orice bază
de date ce susține standardul “Open Database Connection” cu ajutorul extensiei ODBC. [11]
În implementarea aplicației am folosit PHP în cadrul căruia sunt comenzile SQL.
Aplicația accesează fiși erele PHP pentru a primi date și informații care sunt returnate cu
ajutorul SQL.

12
2.8 Limbajul SQL

Un sistem de gestionare a bazelor de date relaționale (RDBMS) este un instrument
esențial în multe medii, de la utilizări în mediul de afaceri, cercetare și contexte educaționale,
la livrarea conținutului pe internet. [12]
SQL(Structured Query Language) e ste un limbaj de programare specific pentru
manipualrea datelor în sistemele de manipulare a bazelor de date relaționale (RDBMS).
Acesta are ca scop inserarea datelor, interogații, actualizare și ștergere, modificarea și crearea
schemelor, precum și contro l asupra accesului la date.
Instrucțiunile SQL pot fi grupate în:
 instrucțiuni de definire a datelor : permit descrierea structurii bzei de date
 instrucțiuni de manipulatea datelor: adaugă, șterge, modifică înregistrări
 instrucțiuni de selecție a datelor, care permit consultarea bazei de date
 instrucțiuni de procesarea tranzacțiilor
 instrucțiuni de control al cursorului
 instrucțiuni pivind controlul accesului la date
MySQL este un sistem de gestiune a bazelor de d ate relaționale, fiind cel mai popular
SGBD open -source la ora actuală. MySQL are multe calități printre care : [12]
– Viteza: MySQL este rapid și devine mai rapid.
– Ușurință în utilizare : MySQL este un s istem de baze de date de înaltă
performanță, relativ si mplu, mai puțin complex de instalat și administrat decât
sistemele mai mari
– Înțelege SQL (Language Structured Query)
– Capabilitatea : Serverul MySQL este multi -threaded, astfel încât mulți clienți se
pot conecta la el în același timp. Fiecare client poate utiliza simultan mai multe
baze de date
Am utilizat limbajul SQL pentru a adăuga, a șterge, a interoga și actualiza date din
baza de date . Co menzile SQL se află în fișiere PHP.

13
2.9 Limbajul JavaScript

JavaScript abreviat adesea ca JS este un limbaj de programare orientat pe obiecte
bazându -se pe conceptul prototipurilor. Alături de HTML și CSS, JavaScript este unul dintre
cele trei tehnologii de bază ale World Wide Web .
A fost dezvoltat prima dată de firma Netscape, cu numele de Live Script . Este un
limbaj de script care lărgea capacitățile HTML, prin oferirea unei alternativ e parțial e la
utilizarea unui număr mar e de scripturi CGI , pentru a prelucra informațiil e din formulare și
pentru a adăuga dinamism în paginile web. După ce limbajul Java a fost lansat , Netscape a
început să lucreze cu firma Sun, pentru a crea un limbaj de script cu o sintaxă și semantică
asemănătoare cu a limbajului Java, iar din motive de marketing numele limbajului a fost
schimbat în Java Script. [9]
JavaScript permite inserarea de script -uri în paginile web, care se execută în cadrul
paginii web, mai precis în cadrul browser -ului utilizat orului, ușurând astfel și traficul dintre
server și client. De exemplu pentru a colecta date de la utilizator într-o pagină web, se pot
adăuga scripturi JavaScript pentru validarea corectitudin ii a introducerii și apoi pentru a
trimite serverului doar date corecte spre a fi procesa te. JavaScript conține o listă de funcții și
comenzi cu scopul de a ajuta ajuta la operații le matematice, la manipulări de șiruri, și sunete,
imagini, obiecte și ferestre ale brwser -ului, link -uri URL și verificări ale introduceri i datelor
în formulare. [9]
Pentru inserarea unui cod JavaScript într -un document HTML, se folosește tagul
<script> și respectiv </script>. Aceste taguri marcheaz ă locul în care începe, respectiv se
sfârșește scriptul. [9]
Pentru a insera scrip turi în documente HTML se pot folosi 4 metode și anume:
 Metoda 1 – plasarea de script în antet -ul paginii (între <head> și </head> )
 Metoda 2 – plasarea de script în corpul paginii (între <body> și </body>)
 Metoda 3 – utilizarea fi șierelor sursă
 Metoda 4 – crearea unui gestionar de evenimente

14
Există câteva aspecte fundamentale ale limbajului JavaScript și anume :
 JavaScript poate fi introdus în HTML – codul JavaScript este găzduit de obicei
în documentele HTML și executat în interiorul lor. Obiectele din JavaScript au
etichete HTML , pe care le reprezintă în așa fel încât programul să fie inclus pe
partea de client a limbajului. JavaScript folosește HTML pentru a putea lucra
în cadrul aplicațiil or web.
 Este dependent de mediu – este un limbaj de scriptare întrucât software -ul care
rulează programul de lucru este de fapt browser -ul web(Opera, Firefox, etc.).
 Este un limbaj interpretat – codul scriptului este interpretat de browser înainte
de a se executa. JavaScript nu are nevoie de compilări sau preprocesă ri, el
rămâne integra t în documentul HTML. Dezavantajul acestui limbaj este faptul
că rularea durează mult deoarece navigatorul web citește și proces ează
comenzile JavaScript atunci când user -ul apelează acele funcții. Avantajul este
faptul că se poate ac tualiza ușor codul sursă.
 Este un limbaj flexibil – putem să declar ăm o variabilă de un anum e tip, sau
putem să lucrăm cu o variabilă cu toate că nu-i cunoaștem tipul specificat
înainte de a o rula.
 JavaScript este un limbaj bazat pe obiecte – adică modelul de obiect JavaScript
nu este bazat pe moștenire ci pe instanță
 Este condus de evenimente – o mare parte a codului JavaScript este făcut
pentru a răspunde la evenimente le generate de un utilizator sau de un sistem.
Obiectele HTML, de tip butoanele, au fost îmbunătățite pentru a accepta
handlere sau evenimente
 JavaScript evoluează – este un limbajul care evoluează, fapt pozitiv care poate
însă să gener eze și probleme, programatorii trebuie să verifice în permanen ță
ce versiune să utilizeze pentru ca aplicațiile să fie disponibile unui număr mare
de utilizatori de browsere diferite
 Acoperă diverse contexte – programarea în acest limbaj este îndreptată către
partea de client, însă se poate folosi JavaScript și pe partea de Server.
JavaScript este limbaj nativ pentru anumite instrumente de dezvoltare web,
precum Macromedia Dreamweaver sau Borland IntraBuilder . [9]
Fiind un limbaj de scripting, JavaScript mi -a permis să creez un conținut dinamic
actualizat .

15
2.10 jQuery

jQuery este o platformă de dezvoltare JavaScript, concepută pentru a simplifica
traversarea documentelor HTML, gestionarea evenimentelor, animarea și interacțiunile AJAX
pentru dezvoltarea web rapidă. jQuery este un set de instrumente JavaScript concepute pentru
a simplifica diverse sarcini p rin scrierea unui cod mai puțin. [13]
jQuery are mai multe caracteristici precum:
– selecți a de elemente în arborele DOM folosind motor propriu de selecții open source
precum Sizzle, un proiect născut din jQuery
– parcurger ea și modificare a arborelui DOM (inc lusiv suport pentru selectori CSS3 și
Xpath simpli)
– efecte și animații
– înregistrarea și modificarea evenimentelor din browser
– manipularea de elemente CSS
– cereri de tip AJAX
– utilități – funcția each
– extensii
Plugin -urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQue ry.
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. Astfel biblioteca
principală poate ocupa puțin s pațiu, iar extensiile necesare în anumite pagini web pot fi
încărcate la cerere, doar când este nevoie de ele. Există un set de extenii principal numite
jQuery UI (jQuery User Interface). jQuery UI oferă un set de extensii pentru interactivitate de
bază, e fecte mai complexe decât cele din biblioteca de bază și teme de culori. Avantajul UI
față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu
dezvoltarea bibliotecii principale, minimând riscul de incompatibilitate. [1 4]
Există două moduri de a utiliza jQuery :
– Instalare local ă – se poate descărca biblioteca jQuery pe mașina locală
– Versiune bazată pe CDN – se poate include direct biblioteca jQuery în codul HTML
din Rețeaua de livrare a conținutului (CDN – Content Delivery Network). [13]

16
Capitolul 3.
Prezentarea aplica ției

3.1 Structura website -ului

Site-ul web pe care l-am realizat are un meniu simplu și o interfață u șor de folosit.
Scopul implementării acestui site este promovarea unei săli de gaming din Oradea care poate
fi accesat de orice persoană pasionată de jocurile pe calculator sau consolă . Site -ul are și o
pagină d e magazin cu diferite echipamente de gaming de unde clienții să -și poată comanda un
produs.
Pentru partea de front -end am creat interfața pentru utilizatori iar, pe parte de back -end
pentru managementul conținutului am creat o bază de date de unde administratorul
actualiz ează conținutul .

Figura 3 Harta site -ului

În figura 3 se află harta site -ului care conține structura ierarhică a paginilor site -ului.

17
3.2 Prezentarea meniului principal

Lucrarea pe care am realizat -o este constituită dintr -un site de prezentare pentru sala
de jocuri , și o pagină de magazin care poate fi accesat de pe site. Pagina principală prezentat ă
în Figura 4 este asociată cu butonul Home din meniu. Tot în cadrul paginii principale sunt
afișate și restul paginilor : Servicii , Galerie , Preț, Magazin , Sponsori , Echipa , Contact , Harta .
Aceste pagini au ca scop informarea utilizatorul ui pentru ca acesta să-și fac ă o idee
concretă legată de sala de gaming.

Figura 4 Pagina principal ă a site -uli
Site-ul are o interfață ușor de folosit , este de tip “one page” , iar navigare a printre
pagini este de tip “scrolling ” pentru a oferi utilizatorului posibilitatea de a sări rapid la diferite
secțiuni ale paginii . Pentru crearea paginilor am utilizat Bootstrap, un framework care mi -a
permis realizarea de pagini responsive . În pagina din figura 4 am utilizat clasele ‘navbar’ și
‘carousel’ iar pentru design am folosit CSS care pe baza selectori lor și proprietăților m-au
ajutat la stilizarea mai multor elemente ȋn cadrul realizării aplicației, de exemplu pentru
setarea culorii meniului sau a scrisului din meniu am setat: background #fff și font -family :
sans-serif(figura 5).

Figura 5 Cod CSS pentru stilizare meniu

18

Figura 6 Pagina Servicii

Pentru a crea o interfață cât mai simplă și prietenoasă am folosit biblioteca Font
Awesome. Font Awesome este o bibliotecă pentru fonturi bazată pe CSS și LESS. În pagina
servicii , am utilizat această bibliotecă pentru adăugarea de icon -uri.
Pentru adăugarea de icon -uri, am creat clase specifice, de exemplu , pentru icon -urile
respective din figura 6 am adăugat clasele: fa fa -desktop , fa fa-users , fa fa-gamepad respectiv
fa fa-troph y (figura 7).

Figura 7 Exemplu cod html pentru adăugare de icon din cadrul aplicației

Am ales să utilizez această librărie deoarece este ușor de integrat într -o aplicație web .

19

Figura 8 Pagina Galerie
Bootstrap con ține un sistem de grid pe 12 coloane. Cu ajutorul acestui sistem de grid am
împărțit pagina Galerie în 3 coloane de dimensiuni egale făcând -o astfel accesibilă și de pe
alte dispozitive(figura 9).

Figura 9 Pagina Galerie vizualizată de pe smartphone

20

Figura 10 Pagina Magazin

În pagina magazin am introdus cele mai vândute 3 produse și un buton prin care
utilizatorul va avea acces la pagina principală a magazinului.

Figura 11 Pagina Contact
Pentru ca site -ul să fie accesat atât de pe calculatoare cât și smartphone -uri sau tablete
m-am folosit de tehnologia Bootstrap acesta oferindu -mi de asemenea, structuri predefinite
precum meniul de navigare, carousel, formulare și gridurile responsive. Bootstrap împarte
pagina web în 12 coloane cu valori procentual -egale, iar unind aceste colo ane am obținut box –
urile dorite pentru a adăuga conținutul. Aceste 12 coloane ofer ă multe variante de structurare
a paginii care ajută la tranzi țiile dintre ecranele de diferite dimensiuni .

21
3.3 Prezentarea paginii magazin
În pagina principală magazin avem un meniu cu butoanele : Home , Product , Buton de
căutare , Cart, SignIn.

Figura 12 Pagina principală magazin
Pentru afișarea produselor, a categoriilor și brandurilor în pagina de magazin am
utilizat funcțiile Cat ( ), Brand() , Product() prezentate în figura 10.

Figura 13 Funcții pentru preluarea înregistrărilor din baza de date

22
Funcțiile cat(), brand() și product() le -am folosit pentru a prelua înregistrările de
categorii, brand și produs din baza de date, pentru a le afișa în pagina de magazin ori de câte
ori pagina este încărcată. Pentru aceste funcții am folosit jQueri.ajax și am utilizat metodele
POST și GET. Am utilizat metoda POST pentru a trimite date către server, cu scopul de a
crea / actualiza o resursă , iar GET pentru a solicita date dintr -o resursă specificată.
Utilizatorul are urmatoarele posibilități: de a se înregistra , a căuta produsul dorit în
bara de search , de a adăuga sau șterge produse din cărucior și de a comanda un produs

Figura 14 Înregistrare utilizator

În figura 1 4 avem pagina de autentificare pentru utilizator , cu câmpurile respective
care trebuie completate pentru ca utilizatorul sa se poată înregistra și comanda un produs.
În momentul autentificării dacă nu sunt completate toate câmpurile, atunci nu se va
putea face autentificarea, iar câmpurile necompletate corespunzător vor indica eroare. Pentru
afișarea erorilor am folosit clasa ‘alert -warning’ care indică o acțiune negativă și instrucțiunea
echo pentru afișarea mesajului (figura 15). Pentru o bună securizare, nu pot exista 2 adrese de
email la fel, iar parola unui id trebuie să fie de minim 6 caractere.

Figura 15 Exemplu cod pentru afișare eroare

23

Figura 16 Pagina Cărucior

În pagina cărucior utilizatorul are op țiunea de adăuga sau șterge produse. Prin
apăsarea butonului “Ready to Checkout” utilizatorul va fi direc ționat pe pagina de
paypal (figura 1 7), iar acesta va trebui să -și introducă datele pentru finalizarea plății. Aceste a
se realizează pe baz ă de ‘sesiuni’ create în php și pe bază de intero gări MySQL.

Figura 17 Plata produsului cu paypal

24
Persoanele care plătesc prin PayPal Payments Standard interacționează cu formularele
HTML și cu variabilele de intrare HTML ascunse pe care le -am plasat pe site. Așa cum se
poate observa în figura 18 am folosit tag -ul form care include două atribute: actio n și method
și am utilizat variabile precum cmd a cărui valoare determină metoda de plată PayPal
Standard Checkout pe care am utilizat -o pentru a obține plata.

Figura 18 Cod php pentru metoda de plată

Figura 19 Finalizarea plății

Prin introducerea datelor și finalizarea plății acesta va primi un mesaj cum că plata a
fost finalizată și i se va afișa codul tranzacției. Prin accesarea butonului Continue Shopping
acesta va fi redirecționat pe pagina principală unde își va putea continua cumpărăturile și
vedea istoricul de comen zi.
Pentru finalizarea plății am creat o ‘sesiune’ php care face posibil ă trimiterea datelor.
Pe baza de interogări SQL se verifică în baza de date informațiile necesare pentru preluarea
datelor, astfel în momentul în care utilizatorul fac e o comandă pe baza metodelor POST care
trimite date către server și GET pentru a solicita date dintr -o resurs ă specificată, comanda
utilizatorului se înregistrează în baza de date iar pe baza idu -ului, acesta v -a primi un cod
pentru tranzacția respectivă.

25
3.4 Administrarea aplicației
Administrarea este un aspect important pentru o aplicație web , întrucât o aplicați e care
este actualizată conferă încredere utilizatorilor. În cadrul acestei aplicații doar administratorul
are posibilitatea de a modifica conț inutul paginilor.
Administratorul website -ului administrează paginile statice dar și cele dinamice de pe
acest site. Paginile dinamice sunt mai ușor de administrat deoarece sunt actualizate din baza
de date .
3.5 Baza de date
Pentru aplicația web am creat o bază de date cu ajutorul sistemului de gestiune a
datelor phpMyAdmin. În figura 20 avem baza de date. Numele bazei de date este “simnetsite”
și con ține 7 tabele și anume :
– Brands
– Cart
– Categories
– Orders
– Products
– Users
– User_inf o

Figura 20 Tabelele bazei de date

26
Pentru crearea tabelelor și adăugarea de conținut în tabele m -am folosit de comenzile
SQL și anume Create Table și Insert Into . În figura de mai jos am prezentat un exemplu
pentru crearea tabelului categories.

Figura 21 Exemplu de cod SQL pentru crearea tabelului categories

Figura 22 Tabelul User_info

În figura 22 avem tab elul User_info care l-am creat cu ajutorul limbajului SQL , unde
am folosit comenzile ‘Create Table’ pentru creare tabel și ‘Insert Into’ pentru a adăuga
conținut în tabel . Acesta cuprinde 8 câmpuri și reprezintă datele de autentificare pentru fiecare
utilizator . La autentificare fiecare câmp trebuie completat.

27

Figura 23 Tabel ul Products

În figura 23 avem tabelul pentru produse. Fiecare produs are un id unic, o categorie,
un brand, un titlu, preț, o descriere, o imagine și un cuvânt cheie prin care poate fi căutat în
bara de search.

Figura 24 Tabelul pentru comenzi

Tabelul pentru comenzi conține 6 câmpuri și anume:
 Un id unic pentru fiecare command ă
 Id-ul utilizatorului care a făcut comanda
 Id-ul produsului comandat
 Cantitatea
 Id-ul tranzacției care este diferit la fiecare comandă
 Statusul comenzii

28

Figura 25 Tabelul pentru cărucior
Tabelul pentru c ărucior ilustrat în figura 25 conține 5 câmpuri : id, p_id, ip_add,
user_id, qty. Acest tabel înregistrează în baza de date pe baza ip -ului utilizatorului produsele
care se află în cărucior.

3.6 Diagrama conceptual ă a bazei de date

În figura 2 6 este reprezentată diagrama conceptuală a bazei de date . Unul sau mai
multe produse aparțin unei singure categorii și unui anumit Brand. Fiecare utilizator dispune
de un cărucior unde se află unul sau mai multe produse. Fiecare user poate avea mai multe
comenzi, iar comanda conține unul sau mai multe produse.
Doar administratorul are acces ul la oricare dintre operațiile de ștergere, adăugare și
actualizare a bazei de date.

Figura 26 Diagrama conceptuală a bazei de date

29
3.7 Securitatea aplicației

Aplicația beneficiază de o securizare bună deoarece conectarea se face prin intermediul
unui id și o parolă cu diferite grade de acces .
Restricții aplicate asupra tipurilor de utilizatori :
 Nu pot să exist e 2 id-uri cu același nume
 Nu pot să existe id -uri cu câ mpuri necompletate
 Parola unui id trebuie sa fie de minim 6 caractere
 La înre gistrare toate câmpurile sunt obligatorii
 Toate câm purile au o lungime determinată
 Nu se pot lăsa câmpuri goale
 Parola trebuie sa fie corectă
Unul dintre limbajele de programare folosite , PHP îi oferă securitate de nivel înal t care,
îmbinat cu bazele de date ajută la protecția datelor.
Prima oară verificăm dacă avem date de transmis, apoi cu ajutorul unei variabile
superglobale $_POST preluăm datele de autentificare ale utilizatorului și execut ăm un query
MySQL de tip INSERT pentru a salva datele în tabela users _info . Ca metod ă de securitate,
parola este encodat ă utiliz ând func ția md5() . Pentru logare avem un fișier care verific ă
existen ța informa țiilor, re ține email -ul și parola în dou ă variabile, apoi execut ă un
query SELECT pentru a verifica dac ă sunt valide
Pentru a nu exista 2 adrese de email la fel am setat ca limita să fie 1 (figura 2 7), iar la
crearea fiecărui cont pe baza unui query se verifică în baza de date dacă nu există deja un cont
unde se află email -ul respectiv. Dacă există, autentificarea nu se va putea real iza și va apărea
eroare. Pentru introducerea parolei am folosit funcția strlen unde am setat ca parola să fie
minim de 6 caractere.

Figura 27 Exemplu cod pentru verificare email

30
Concluzii

Am creat site-ul web cu scopul de a promova o sal ă de gaming și de a -mi îmbunătăți
cunoștințele în programare și web design . Am încercat să structurez interfața principală , astfel
încât utilizatorului să -i fie ușor să găsească informația de care are nevoie în cel mai scurt timp.
Pe partea de aplicație și anume pagina de magazin, aceasta poate fi accesată de orice persoană
care dorește să -și comande un produs .
Această aplicație reprezintă un prim pas pentru dezvoltarea pe viitor a unor
funcționalități mai complexe. Prin realizarea acestei aplicații mi -am aprofundat cunoștințele în
utilizarea tehnologiilor : HTML, CSS, Bootstrap, PHP, MySQL, și am reușit să dobândesc
cunoștințe noi în utilizarea de noi biblioteci și limbaje de programare precum și utilizarea
unor plat forme de dezvoltare JavaScript precum jQuery.
Pe viitor ca și principale dezvoltări mi-am propus să îmbunătățesc sistemul de
securitate și să o fac publică astfel încât să poată fi accesată online . De asemenea doresc să
creez o bază de date pentru introducerea anumitor evenimente în pagina site -ului, să adaug
opțiun e care permite utilizatorului să selecteze limba română sau engleză în care să se afișeze
conținutul, să adaug animații cu scopul de a face site -ul mai atractiv și să adaug noi opțiuni
pentru metoda de plată .

31
Bibliografie

[1] Aplicație web https://ro.wikipedia.org/wiki/Aplicație_web
Consultat la data de 17.04.2016

[2] Baze de date http://www.prouniversitaria.ro/carte/baze -de-date
Consultat la data de 18.04.2016

[3] Baze de Date relaționale. Teorie și Aplicații în Visual FoxPro, Cornelia Gyorodi, R.
Gyorodi, G.Pecherle, Editura Mediamira, 2008.
[4] MySQL https://ro.wikipedia.org/wiki/MySQL
Consultat la data de 19.04.2016

[5] Chuck Musciano, Bill Kennedy, HTML and XHTML , the definitive guide, Editura
O'Reilly Media, Inc., 2002
[6] Mark Pilgrim, HTML5 : Ghidul începătorului, Brașov, 2011, p. 10
[7] HTML5 https://ro.wikipedia.org/wiki/HTML5
Consultat la data de 20.04.2016

[8] Introducere în CSS https://marplo.net/css/introducere
Consultat la data de 20.04.2016

[9] Limbajul JavaScript https://web.ceiti.md/lesson.php?id=16
Consultat la data de 25.04.2016

[10] Pavel N ăstase, Foarea Năstase, Internet World Wide Web, JavaScript -HTML -Java,
Editura Economică , 1998
[11] Despre PHP http://etutoriale.ro/articles/16/1/Despre -PHP/
Consultat la data de 25.04.2016

[12] Paul Dubois, MYSQL, editura Teora 2001
[13] Despre jQuery http://www.tutorialspoint.com/jquery/jquery_tutorial.pdf
Consultat la data de 10.05.2016

[14] jQuery https://ro.wikipedia.org/wiki/JQuery
Consultat la data de 15.05.2016

32
DECLARAȚIE DE AUTENTICITATE A
LUCRĂRII DE FINALIZARE A STUDIILOR

Titlul lucrării
Proiectarea și implementarea unui magazin pentru o sală de jocuri
Autorul lucrării
Simea Paul Alexandru

Lucrarea de finalizare a studiilor este elaborată în vederea susținerii examenului de
finalizare a studiilor organizat de către Facultatea Inginerie Electrică și Tehnologia
Informației din cadrul Universității din Oradea, sesiunea iulie a anului universit ar 201 7-2018.
Prin prezenta, subsemnatul Simea Paul Alexandru , CNP 1950217055091 , declar pe
proprie răspundere că această lucrare a fost scrisă de către mine, fără nici un ajutor neautorizat
și că nici o parte a lucrării nu conține aplicații sau studii d e caz publicate de alți autori.
Declar, de asemenea, că în lucrare nu există idei, tabele, grafice, hărți sau alte surse
folosite fără respectarea legii române și a convențiilor internaționale privind drepturile de
autor.

Oradea,
25.06.2018 Semnătura