PROGRAMUL DE STUDIU CALCULATOARE FORMA DE ÎNVĂȚĂMÂNT IF PROIECT DE DIPLOMĂ COORDONATOR ȘTIINȚIFIC prof. dr. ing. IOAN MANG ABSOLVENT BRÎNDUȘ LUCIAN… [608539]

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
prof. dr. ing. IOAN MANG

ABSOLVENT: [anonimizat]
2016

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

Magazin online cu vânzări de produse
electronice

COORDONATOR ȘTIINȚIFIC
prof. dr. ing. IOAN MANG

ABSOLVENT: [anonimizat]
2016

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:
Magazin online cu vânzări de prod use electronice .

2). Termenul pentru predarea proiectului 22.02.2017

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

4). Conținutul proiectului de finalizare a studiilor
Introducere
Capitolul I. Fundamentare teoretică
Capitolul II. Tehnologii 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ă, lucrări de laborator, i nternet.

7). Data emiterii temei 1.10.2015

Coordonator științific
prof. dr. ing. Ioan Mang

Cuprins
Introducere…………………………………………………………………………………………………… …………… 6
Capitolul 1………………………………………………………………………………7
Fundamentare teoreti că………………………………………………………………………………………7
1.1 Baze de date ………………….. ……………….. …………… …………… ………………… …………. 7
1.1.1 Tipuri de date în MySQL ……………………………………. ………………… ………………… 8
1.1.2 Crearea unei baze de date………… ………………………… ………………… ……………. … 8
1.1.3 Afisarea bazelor de date…….. …… ……………………… …………………… ……………. . 8
1.1.4 Inserarea datelor în baza de date ………….. ………………………………………………… . 8
1.1.5 Ștergerea de în registrări din baza de date ……………………………………………….. … 8
1.1.6 Ștergerea unei baze de date……….. ……………………………….. ………………………. ..8
1.1.7 Tipuri de tabele in MySQL ………………………………………………… …………………….. 9
1.1.8 Crearea unei tabele în baza de date ………………………………………………9
1.1.9 Eliminarea unor tabele din baza de date …………………………………………9
1.2 Aplicatii web ……… ………. ………. …………………………………………….. ……………………………9
Capitolul 2 ……………. ………………….. …………………… ………………… …………………………12
Tehnologii utilizate ………………….. ……………….. ……………. …………………………………… 12
2.1 Notepad++…………………………………………………………………………12
2.2 XAMPP……………………………………….…………………………………..12
2.3 HTML5 ……………. ………………. ……………………. ……………………….. …………………… 13
2.3.1 Nivelul de suport …………………………………………. ……………………………………….. 14
2.3.2 Aplicații cache offline ………………… …………………….. …………………………………… 15
2.3.3 Drag and Drop ………………………………….. …………………. …….. ……………………….. 15
2.3.4 Audio și video ……………………………….. …………… ……………………………………….. 15
2.3.5 Formulare de introducere ………………………………… …………………………………….. 15
2.4 CSS3………….. ………………………… …………………………………….. ……………………… …..15
2.5PHP ……………………………………….. ………………………………………………………. ………. 16
2.6 SQL ………….. ………… ……………….. …………………………………………… …………………. 17
2.7 JavaScript…………………..……………………………………………………..18
2.8 jQuery…………………………………………………………………………….18
Capitolul 3………………… ……………………………….………………… ……………….20
Prezenta rea aplicației …………… ……………….. ……… ……………… ………… ……………………. 20
3.1 Structura website -ului…………………………………………………………….20
3.2 Administrarea aplicației .. ………………………. ……………………. …………… ………………. 20
3.3 Baza de date ……………………………. …………………………………………………. …………… 21
3.4 Interfața aplicației web …………………………………………… …………………………. ……… 24
3.4.1 Interfața utilizator ………………………….. ………………. ………………………………… ……24
3.4.2 Interfața de administrare ………………… …………….. ……… …………….. …………. ……..29
Concluzii ……………… ………………. …………………………………………………………………. …………. ….36
Bibliografie …………………. …………………….. ………… …………………………………………. …………. …..37

Introducere

Tema lucrării este “ Magazin online cu vânzări de produse electronice ”.
Am ales această temă deoarece sunt pasionat de echipamentele electronice și pentru că astfel
am dorit, să îmi îmbogățesc cunoștințele în utilizarea bazelor de date și web design. Această
lucrarea reprezintă rezultatul cunoștințelor acumulate de -a lungul celor patru ani de studiu la
orele de curs și de laborator dar și în stagiile de practică organizate de facultate la firmele de
specialitate.
Scopul acestei aplicații este în principal acela de a ajuta o persoană să achiziționeze în
cel mai scurt timp produsele electronice dorite și de informare în legătură cu aceste a.
Pentru a realiza această aplicație am folosit următoarele limbaje de programare:
HTML, CSS3, PHP, MySQL, JavaScript, JQ uery.
Acest site este util pentru:
– Achiziționarea unor produse electronice
– Acces la informații pentru utilizatori
– Informarea persoanelor cu privire la apariția tehnologiilor de ultimă oră
Lucrarea este structurată în trei capitole:
– Fundamentare teoretică
– Tehnologii utilizate
– Prezentarea aplicației

Capitolul 1. Fundamentare teoretică

1.1 Baze de date
O baz ă de date este o coloecție de informații foarte bine organizate și structurate care
au rolul de stocare și memorare a datelor sau informațiilor și organizarea acestora.
Bazele de date ne permit prelucrarea unui volum mare de informații stocat dar și posibilitatea
de regăsire a acestora prin folosirea mai multor criterii de căutare.
Cel mai întâlnit tip de baze de date este cel relațional unde datele sau informațiile sunt
organizate în tabele ce conțin coloane numite câmpuri și linii numite î nregistrări. Pe lânga
tabele, o bază de date relațională mai poate conține: indecși, proceduri stocate, declanșatori,
utilizatori și grupuri de utilizatori, tipuri de date, mecanisme de securitate și de gestiune a
tranzacțiilor.
Bazele de date relațional e sunt un tip de baze de date în care datele, văzute ca și
atribute ale entităților reale, sunt socate în tabele și sunt legate între ele prin relații, acestea
reprezentand o asociere între două entități. [1]
Utilizatorii unei baze de date pot efectua mai multe operații asupra datelor:
– Inserarea de date ( insert )
– Ștergerea de date ( delete )
– Modificarea datelor ( update )
– Citirea bazei de date ( query ) pentru a extrage anumite date
MySQL este un sistem de management al bazelor de date relaționale , ce nu conține
interfață grafică pentru administrarea sau gestionarea datelor din bazele de date. Utilizatorii
pot folosi instrumente de linie de comandă, aplicații desktop sau aplicații web cu care se pot
administra și crea baze de date MySQL.
În limbajul de programare PHP există funcții pentru toate operațiile care se pot executa
asupra bazelor de date MySQL.
Administrarea MySQL se poate face în două moduri: din linie de comandă sau folos ind
browserul și accesând aplicația numită PHPMyAdmin scrisă în PHP.
MySQL este componentă integrată a platformelor XAMPP. A fost lansat inițial în anul 1996,
iar denumirea este dată după numele fiicei autorului și co -fondatorului Michael Widenius, My
și SQL (Structured Query Language). MySQL poate fi rulat pe multe dintre platformele
software existente : AIX, FreeBSD, GNU/Linux, Mac OS X, NetBSD, Solaris, SunOS,
Windows 9x/NT/2000/XP/Vista. [2]
În MySQL sunt utilizate următoarele tipuri de date:
1.1 Tipuri de date în MySQL
În limbajul MySQL întâlnim mai multe tipuri de date:

Comandă Semnificație
– INT Reprezintă un număr întreg.
– TYNYINT Reprezintă un număr întreg mic.
– SMALLINT Reprezintă un număr întreg mic.
– MEDIUMINT Reprezintă un numă r întreg.
– TEXT Conținutul este de tip text.
– VARCHAR Conținutul este de tip text(max. 256 de caratere) .
1.1.2 Crearea unei baze de date
În primul rând, p entru a beneficia de utilitatea unei baze de date aceasta trebuie creată
și demunită de utilizator. O bază de date este create specificând instrucțiunea CREATE
DATABASE.
1.1.3 Afișarea bazelor de date
Uneori se dorește să se afișeze bazele de date. Acest lucru este posibil utilizând
instrucțiunea SHOW DATABASE. Această instrucțiune afișează toate bazele de date (în
cazul în care pe server sunt stocate un număr mai mare de baze de date) de pe server pentru a
verifica dacă acestea au denumirile dorite.
1.1.4 Inser area datelor în baza de date
O bază de date are posibilitatea de a fi folosită doar după stocarea unor informații in
ea. Acest lucru este posibil folosind instrucțiunea INSERT.
1.1.5 Ștergerea de înregistrări din baza de date
Eliminarea unei înregistrăr i dintr -o bază de date este o operație foarte simplă și este
efectuată cu efot minim. Pentru elimina rea acestor înregistrări este necesară utilizarea funcției
de ștergere DELETE .
1.1.6 Ștergerea unei baze de date
Dacă se dorește să se șteargă o bază de da te se utilizează instrucțiunea DROP
DATABASE. Această instru cțiune trebuie folosită cu foarte mare atenție deoarece toate
informațiile și obiectele asociate bazei de date respective sunt eliminate permanent fără
posibilitatea de recuperare.
1.1.7 Tipuri de tabel e in MySQL
MySQL dispune de mai multe tipuri de tabele care organizează și optimizează bazele
de date. Tipuri le de tabele care sunt disponibile î n MySQL su nt: ISAM, MYISAM,
INNODB, MERGE și HEAP.
1.1.8 Crearea unei tabele în baza de date

O tabelă reprezintă o secțiune a bazei de date pentru stocarea unor informații
structurate. Într -o tabelă sunt definite diferite coloane numite câmpuri și linii pentru
înregistrarea datelor care sunt folosite pentru a utiliza o baz ă de date .
1.1.9 Eliminarea unor t abele din baza de date
Uneori se dorește să se șteargă o întreagă tabelă. Această funcție trebuie utilizată cu
atenție deoarece elimină permanent toate liniile dintr -o tabelă și va elimina întreaga tabela.
Acest lucru este posibil doar dacă este utilizată instrucțiunea DROP TABLE.

1.2 Aplicații web
Acest model de aplicații sunt accesate doar prin intermediul unui navigator numit și
browser web. O aplicație web este stocată pe un calculator (server), diferit de calculatorul
folosit de utilizatori (numit c lient), atât client -ul cât și server -ul fiind conectați la rețeaua
Internet. Pentru accesarea unei aplicații web sunt utilizate protocoalele HTTP și liimbajul
HTML care comunică cu programele de navigare pe internet. Cele mai utilizate programe de
navigare pe internet sunt: Mozilla FireFox, Internet Explorer, Opera, Chrome . Aceste aplicații
care rulează doar cu ajutorul unui browser web sunt create cu ajutorul limbajelor de
programare suportate de browser -ul utilizat și anume: HTML , CSS, jQuery, JavaScript
(programe utilizate și de mine pentru a crea aplicația web).
Un server web afișează informația HTTP primită de la client sub forma unor pagini
web care conțin date, informații, imagini și documente HTML. Pe lângă aceste documente
sunt afișate și bazele de date cu toate tabelele introduse în server.
Accesarea unei aplicații web este efectuată atunci când utilizatorul introduce adresa
acestei pagini web care este de două feluri și anume :
– URL (Uniform Resource Location) .
– URI (Uniform Resource Identifier ).
Fișiere ce conțin imagini statice, sunete, video sau aplicații. Memorarea datelor este
realizată în funcție de tipul mediului folosit, existând diverse formate de stocare gratuite sau
proprietare. Ca și exemple putem aminti formatele cele mai populare pentru memorarea
graficii precum JPEG, GIF și PNG, iar pentru sunet WAV, MP3, VMA, MIDI. Limbajele de
marcare nu sunt limbaje de programare . [ ]
Utilizarea aplicațiilor web este avantajoasă deoarece sunt accesate foarte ușor de orice
utilizator indiferent de nivelul de cunoștințe în acest domeniu, accesarea fiind posibilă oricând
de la un terminal cu conexiune la internet.

O altă mare calitat e a aplicaților web o reprezintă faptul că sunt imune la schimbarea
sistemelor de operare (Windows/Linux/Machintos , etc.). Prin intermediul unei aplicatii online
se pot stoca, gestiona, modifica, trimite, primi si procesa informatia folosind conectivitatea
internerului, folosind mai multi utilizatori, mai multe statii de lucru si mai multe procese in
acelasi timp. Deoa recere aplicatia este bazata pe internet nu exista incompatibilitati hardware,
virusi, aplicatia si informatia fiind stocate pe un server securizat.
O aplicație Web are ca funcție principală transmiterea (de la server la client) de pagini Web,
care pot fi statice (cu conținut fix, stabilit de server) sau dinamice (cu conținut care depinde de
cererile clientului, de informațiile extrase din baze de date și de logica aplicației). În general,
după introducerea adresei de site de către clientul aplicației, apli cația din server trimite o
pagină de prezentare (“home page”), care permite utilizatorului selectarea în continuare a unor
operații prevăzute de aplicație sau care cere utilizatorului informații de identificare (nume si
parolă), dacă aplicația are restrcți i de acces. [4]
Realizarea aplica țiilor web este posibilă utilizând diferite tehnologii î n fucție de
complexitatea aplicației. Pentru dezvoltarea paginilor web, cele mai cunoscute și utilizate
tehnologii sunt: Perl, Python, PHP și MySQL.

Capitolul 2. Tehnologii utilizate
2.1 HTML 5
HTML5 este un ansamblu de tehnologii care constituie web -ul modern ș i fac posibile
crearea de conținuturi multimedia, animații ș i aplicații tot mai sofisticate fiind un limbaj
utilizat cu scopul de a simplific a dezvoltarea aplicațiilor web, reprezentând ultima versiune de
HTML. 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.
Permite structurarea și prezentarea co nținutului pentru World Wide Web, oferind
funcția de stocare offline care oferă aplicațiilor HTML5 posibilitatea rulare offline. HTML5 a
fost conceput pentru a fi compatibil și cu versiunile anterioare, ca urmare, orice document
care este valid pentru HTML 4 sau XHTML este valid și pentru HTML5, atâta timp cât
folosește doctype -ul nou .
Creatorii standardului și -au propus să păstreze lucrurile cât mai simple cu putință,
ușurând munca dezvoltatorilor:
– un document HTML5, pentru a putea fi valid are nevoie de un doctype foarte
simplificat față de HTML 4 sau chiar XHTML (<!DOCTYPE html>)
– regulile de conformitate nu mai sunt atât de stricte, autorii fiind mai liberi, putând
chiar să omită împrejmuirea atributelor cu ghilimele, de exemplu (atâta vreme cât acestea nu
conțin spații).
– unele atribute acum nu mai sunt obligatorii, simplificând și mai mult codul necesar,
de exemplu, type pentru <script> sau <link rel="stylesheet"> .
– de asemenea au fost adoptate și unele elemente noi urmărind practicile uzuale
precum <header>, <footer>, <nav> .
2.1.1 Nivelul de suport
Limbajul HTML5 nu poate fi implementat în totalitate de browsere deoarece nu este
finalizat nici ca instantaneu. Chiar și în aceste condiții, toate browserele moderne oferă suport
pentru anumite funcționalități.
2.1.2 Aplicații cache offline
HTML5 oferă funcția de stocare offline, numit un cache al cererii pentru stocarea de
fișiere. Deci, dacă utilizatorul este offline, browser -ul încă mai are acces la fișierele necesare.
Acesta poate fi HTML, CSS, Javascript, sau oricare alte resurse necesare pen tru a vizualiza
pagina de web. [5 ]

2.1.3 Drag and Drop
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. [8]
2.1.4 Audio și video
În prezent, există facilități H TML necesare pentru punerea în aplicare a fișierelor
multimedia. De aceea, fișierele media se includ în HTML folosind diferite plugin -uri, dar cu
HTML5, acest lucru poate fi făcut foarte ușor, cu ajutorul elementelor audio și video, fără
utilizarea de plug in-uri. [5]
2.1.5 Formulare de introducere
HTML5 introduce multe elemente noi de intrare, cum ar fi selectoare de culori, pop -up
calendare și multe altele. Cu aceste funcții de intrare se poate crea o formă eficientă, cu un
control mai bun al in trării și verificării. [5]
2.1.6 Geolocație
Geolocation API în HTML5, permite să partajați locația dvs. cu site -uri de încredere.
Confidențialitatea este importantă în funcția de geolocalizare. Browserele nu au nevoie să
trimită informații despre locație la site -uri Web, fără permisiunea expresă a utilizatorului. De
exemplu, dacă un utilizator accesează o pagină web, în care, de asemenea,este prezentă
funcția de geolocalizare folosind browser -ul Firefox. Browser -ul va cere permisiunea, dacă
utilizatorul d orește să împărtășească locația lui. Dacă utilizatorul consimte, Firefox va aduna
informații despre punctele de acces fără fir în apropiere și adresa IP a computerului
vizitatorilor și va trimite aceste informații în Google Location Services, care este un serviciu
de geolocalizare Firefox implicit. [5]
Utilizând aceste elemente HTML în combinație cu proprietățile CSS am realizat o
interfață mai stilizat ă pentru aplicația web.

2.2 CSS3
CSS este un acronim, acesta provenind de la Cascading Style Sheets, iar CSS3 este cel
mai nou standard CSS. Acesta a fost împărțit în “module”. Specificațiile vechi au fost
separate în părți mai mici, iar noile specificații au fost de asemenea adaugate. [6]
Cele mai utilizate module CSS3 sunt:
– Selectoarele (Selectors)
– Interfața Utilizator (User Interface)
– Fundaluri și Borduri (Backgrounds and Borders)
– Efecte Text (Text Effects)

– Transformări 2D/3D (2D/3D Transformations)
– Animații (Animations)
– Interfața Utilizator (User Interface)
Funcționează cu HTML și îi extinde funcționalitățile, permițând redefinirea etichetelor
HTML existente.
Unele browsere web nu sunt compatibile cu CSS, astfel este nevoie de a utiliza pre fixarea
proprietăților CSS în funcție de browser -ul utilizat, dar cele mai noi si utilizate browsere sunt
compatibile cu CSS (Opera, Mozilla Firefox, Google Chrome).
Prefixele întâlnite sunt :
– o (Utilizat pentru browser -ul Opera ).
– moz (Utilizat pentru browser -ul Mozilla Firefox ).
– ms (Utilizat pentru browser -ul Internet Explorer ).
CSS-ul oferă suport pentru elementele HTML oferind posibilitatea de a crea și personaliza
paginile web. Menține codul HTML ordonat și folosește diferite culori, dimensiuni, imagini
de fond și efecte pentru a oferi un aspect plăcut paginilor web.
Avantaje oferite de CSS :
– controlează cu exactitate formatul documentelor utilizând o singură pagină pentru
stiluri le necesare.
– tipurilor media li se atribuie numeroase formate.
– oferă numeroase tehni ci sofisticate de lucru .
În cadrul aplicației web, utilizarea proprietăților CSS a fost foarte importantă deoarece
prin intermediul acestora am avut posibi litatea de a folosi elemente pentru modifica rea,
stilizarea și modelarea dimensiunilor (width, height , margin și padding ) necesare pentru
aranjarea documentelor în paginile aplicației.

2.3 PHP
Limbajul PHP este un limbaj de programare destinat în p rimul rând Internetului,
aducând dinamică unei pagini web. Este unul dintre cele mai importante limbaje de

programare web open -source (codul sursă este public, fiind accesibil tuturor) și server -side
(rularea sa nu se face pe calculatorul celui care vizual izează pagina, ci pe server -ul care o
conține). Este unul dintre cele mai folosite limbaje de programare server -side. Statisticile
arată că la 1 mai 2008, suportul PHP este prezent pe 20 de milioane dintr -ul total de 70 de
milioane de website -uri active di n lumea întreagă. [ 7]
Popularitatea de care se bucură acest limbaj de programare se datorează următoarelor
sale caracteristici:
– Familiaritatea – sintaxa limbajului este foarte ușoară, fiind foarte la îndemână în
special pentru programatorii care cunosc limbajul C;
– Simplitatea – sintaxa limbajului este destul de liberă. Nu este nevoie de includere de
biblioteci sau de directive de compilare, codul PHP inclus într -un document fiind trecut între
niște marcaje speciale;
– Securitatea – PHP-ul pune la dispoziția programatorilor un set flexibil și eficient de
măsuri de siguranță;
– Flexibilitatea – fiind apărut din necesitatea dezvoltării web -ului, PHP a fost
modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnol ogii. Nefiind legat de un
anumit server web, PHP -ul a fost integrat pentru numeroasele servere web exitente: Apache,
IIS, Zeus, etc.
– Gratuitatea – este, probabil, cea mai importantă caracteristică a PHP -ului.
Dezvoltarea PHP -ului sub licența open -source a determinat adaptarea rapidă a sa la nevoile
web-ului, eficientizarea și securizarea codului. [7]
Dezvoltarea PHP -ului sub licența open -source a determinat adaptarea rapidă a PHP –
ului la nevoile web -ului, eficientizarea și securizarea codului.
Când accesăm o pagină HTML serverul care o găzduiește trimite pagina HTML către browser
spre afișare. În cazul unei pagini PHP serverul citește codul PHP, îl interpretează și generează
dinamic pagina HTML care este trimisă browserului spre afișare. Acesta este motivul pentru
care unii utilizatori folosesc PHP și pentru construirea unor pagini cu conținut dinamic. [7]
Fișierele PHP au extensia php. Fișierele pot fi scrise cu orice editor de texte. Este
preferat Notepad++ datorită faptului că pune în evidență sint axa limbajului. Există și editoare
ce oferă mai multe facilități (help interactiv, apel debugger, etc) cum ar fi eclipse php sau cele
oferite de Zend. Când PHP – ul parcurge un fișier de fapt "citește" textul până când întâlnește
una din etichetele special e care -i spun să înceapă să interpreteze textul ca pe cod PHP. Se
executată codul până când este întâlnită eticheta de închidere. Apoi se "citește" din nou textul

mai departe. Acesta este motivul pentru care se poate adaugă cod PHP în interiorul HTML –
ului. [7]
2.4 SQL
Limbajul SQL (Structured Query Language) este în prezent unul din cele mai
puternice limbaje structurate pentru interogarea bazelor de date relaționale. Este un limbaj
neprocedural și declarativ deoarece utilizatorul descrie ce date vre a să obțină, fără a fi nevoie
să stabilească modalitățile de a aj unge la datele respective. [8 ]
Este un limbaj de programare specific manipulării datelor în sistemele de manipulare a
bazelor de date relaționale (RDBMS). La origine este un limbaj bazat pe algebra relațională.
Acesta are ca scop inserarea datelor, interogații, actualizare și ștergere, modificarea și crearea
schemelor, precum și controlul accesului la date. [9]
Instrucțiunile SQL pot fi grupate în:
– instrucțiuni de definire a datelor, care permit descrierea structurii BD.
– instrucțiuni de manipulatea datelor: adaugă, șterge, modifică înregistrări .
– instrucțiuni de selecție a datelor, care permit consultarea BD .
– instrucți uni de procesarea tranzacțiilor.
– instrucțiuni de control al cursorului .
– instrucțiuni pivind controlul accesului la date .
A devenit un standard în domeniu (standardizat ANSI – ISO), fiind cel mai popular
limbaj utilizat pentru crearea, modificarea, regăsirea și manipularea datelor de către sistemele
de gestiune a bazelor de date relaționale. Pe lângă versiunile standardizate ale limbajului,
există o mulțime de dialecte și variante, astfel sistemele de gestiune a bazelor de date sunt
prevăzute cu diverse extensii. [9]
SQL permite atât accesul la conținutul bazelo r de date, cât și la structura acestora.
Există 3 metode de bază privind implementarea limbajului SQL:
– Apelare direct instrucțiunile sunt introduse direct de la prompter.
– Modulară: folosește proceduri apelate de programele aplicației.
– Încapsulată: conține instrucțiuni încapsulate în codul de program.

2.5 jQuery
jQuery este o platformă de dezvoltare JavaScript, concepută pentru a ușura și
îmbunătăți procese precum traversarea arborelui DOM în HTML, 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”. [10]
jQuery se poate folosi pentru a rezolva următoarele probleme specifice programării
web:
– selecții de elemente în arborele DOM f olosind propriul motor de selecții open source
Sizzle, un proiect născut din jQuery
– parcurgere și modificarea arborelui DOM (incluzând suport pentru selectori CSS 3 și
XPath simpli)
– înregistrarea și modificarea evenimentelor din browser
– manipularea elementelor CSS
– efecte și animații
– cereri tip AJAX
– extensii
– utilităti – versiunea browser -ului, funcția each. [10]
Plugin -urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery.
Arhitectura sa permite programatorilor să dez volte subaplicații bazate în biblioteca principală
care extind funcțiile de bază jQuery cu funcții specifice plugin -ului. În acest fel biblioteca
principală poate ocupa foarte puțin spațiu, iar extensiile necesare în anumite pagini web pot fi
încarcate la cerere, doar când este nevoie de ele. Există un set de extensii principal numit
jQuery UI ( jQuery User Interface). jQuery UI ofera un set de extensii pentru interactivitate de
bază, efecte mai complexe decât cele din biblioteca de bază și teme de culori. Avantajul
jQuery UI față de alte extensii este că dezvoltarea și testarea acestor componente se face în
paralel cu dezvoltarea bibliotecii principale, minimizând riscul de incomptibilitate. [10]

2.6 JavaScript
JavaScript este un limbaj de progr amare orientat pe obiecte bazându -se pe conceptul
prototipurilor. Este folosit mai ales pentru introducerea unor funcționalități în paginile web,
codul Javascript din aceste pagini fiind rulat de către browser. [11]
Pentru a insera JavaScript într -un docum ent HTML deja existent, este necesară introducerea
în fișier a etichetelor <script> și </script> . Această etichetă necesită aributul " type ", sau
atributul " language " ( acesta d in urmă este depreciat î n standardul XHTML) care va
specifica browserului limbajul folosit pentru interpretarea codului inclus. [ 12]
JavaScript organizează toate elementele unei pagini web într -o ierarhie. Toate
elementele sunt văzute ca obiecte, și fiecare obiect are anumite proprietăți și metode. Cu
JavaScript putem man ipula ușor obiectele.Pentru aceasta, este importantă întelegerea ierarhiei
obiectelor HTML.JavaScript intelege fereastra browser -ului ca pe un obiect “window”;acesta
conține anumite elemente, cum ar fi de exemplu “bara de stare”.În fereastra browser -ului,
putem încărca/afișa un document HTML.Pagina din interiorul browser -ului este un obiect
document. [12 ]
JavaScript se folosește pentru scriptarea paginilor HTML, adică introducerea unor
scripturi, cum ar fi: verificarea datelor introduse de utilizator, efecte de animație etc. [12]

2.2 XAMPP
Este cel mai popular mediu de dezvoltare PHP, o distribuție Apache, total gratuit, ușor
de instalat și conține MySQL, PHP și Perl. XAMPP a fost creat pentru a fi ușor de instalat și
folosit, fiind configurat cu toate facilitătile active. În present există distribuții pentr u
Windows, Linux și OS X. [13 ]
XAMPP este o compilație gratuită de "software" (comparabilă cu o distribuție de Linux), este
gratuit și este permisă copierea în conformitate cu termenii GNU General Public Licence. Dar
numai compilația XAMPP este publicată sub licenta GPL. [13 ]

Figura 2.1.1 Panoul de control XAMPP
XAMPP a fost creat ca program pentru dezvoltare, cu intenția de a facilita un mediu
de testare fără necesitatea unei conexiuni la internet pentru a testa munca programatorilor
web. Din acest motiv securitatea XAMPP are unele lipsuri.
O listă cu câteva dintre lipsurile de securitate ale XAMPP:
– Administratorul MySQL (root) nu are parolă
– Daemonul MySQL este accesibil prin rețea
– phpMyAdmin este accesibil prin rețea
– Exemplele sunt accesibile prin rețea
Am utilizat acest program pentru modelarea bazelor de date și funcți onarea și modificarea
site-ului.

2.1 Notepad++
Notepad++ este un editor de text oferit gratuit de către Microsoft Windows și care este
găzduit la Sourceforge. Acest editor de text permite editarea codului sursă specific mai multor
limbaje de programare cum ar fi: C, C++, Pascal, C#, HTML, PHP.
– Interfață cu tab -uri de editare
– Suport plug -in și macro -uri
– Abilitatea de a adăuga semne de carte
– Drag and drop
– Modul ecran complet
– Configurator de stil pentru o interfață personalizabilă
– Auto indentare
– Completare automată

– Spell checker (prin plug -in)
– Editare de colaborare (prin plug -in)
– Suport FTP (via plug -in)
– Comparație fișier . [14]
Pentru a crea codul aplicației am utilizat editorul acestui program. Notepad++ are o
interfață simplă și poate fi folosit atât de înc epători cât și de profesioniști.

Capitolul 3. Prezentarea aplicației
3.1 Structura website -ului
Scopul acestei aplicații este achiziționarea unor produse electronice și informarea în
legătură cu cele mai noi tehnologii apărute.
Site-ul conține o parte de front -end care reprezintă interfața utilizatori lor și o parte de back –
end folosită pentru modificarea informațiilor , numită interfața pentru administratori.
Atât utilizatorii cât și administratorii au posibi litatea logării. În momentul în care
administratorii sunt logați, acestia au posibilitatea de a modifica conținutul paginii.

Figura 3.1.1 Structura website -ului
3.2 Administrarea aplicației
Administrarea este un aspect foarte important pentru o aplicație web și a fost
implementată în cadrul aplicației doar pentru administratori, doar acestia au posibilitatea
modificării conținutului paginilor cu condiția să fie logați. Cu toate că această aplicație este
concepută în principal pentru v ânzare și informare, partea de administrare poate fi benefică
deoarece o aplicație web bine actualizată poate convinge vizitatorii oferându -le un mediu de
navigare plăcut și încredere.
Deoarece principalul scop al unui portal este acela de a informa u tilizatorii cu privire
la noutațile care apar în viața de zi cu zi, administrarea acestui portal trebuie să se facă zilnic.
Administratorul website -ului administrează paginile statice dar și cele dinamice de pe acest
site. Paginile dinamice sunt mult mai u șor de administrat deoarece sunt actualizate din baza de
date. Acest site a fost realizat în mare parte din pagini dinamice pentru ca administararea lui
să se facă mai repede.
3.3 Baza de date
Aplicația web utilizează o baza de date creată cu ajutorul sistemului de gestiune a
datelor phpMyAdmin versiunea 3.2.1. Numele bazei de date este „electronice” și conține 6
tabele, b aza de date fiind ilustrată în f igura 3.3.1.

Figura 3.3.1 Baza de date electronice
Tabe lul admin conține 3 câmp uri: u ser_id, user_email și user_pass. Câmpul user_id
conține codul unic al aministratorilor în timp ce câmpurile email și parola conțin adresa de
email a l administatorului respectiv parola cu care se autentifică pe site.
Autentificarea se face completând câmpurile email și parolă. Acestea sunt obligatorii, iar dacă
unul dintre acestea nu este completat se va afișa un mesaj corespunzător.
În cazul în care email -ul și parola sunt valide, autentificarea se va efectua cu success, în
caz contrar se va afișa mesajul „Nu sunteți un administrator”. În figura 3.3.2 este prezentată
structura acestui tabel.

Figura 3.3.2 Baza de date admin
Tabelul client conține 10 câmpuri : client_id, client_ip, client_nume, client _email,
client_pass, client_tara , clien t_oras, client_contact, client_adresa, client_img. Acest tabel pe
care l -am și ilustrat în figura 3.3.3, înregistrează datele personale trimise în urma completării
cu succes a formularului de înregistrare. Dacă utilizatorul dorește să -și modifice datele
personale acestea vor fi modificate automat și în baza de date.

Figura 3.3.3 Baza de date client
Tabelul produse conține 8 câmpuri : produs_id, produs_cat, produs_firma,
produs_titlu, produs_pret, produs_desc, produs_img, produs_keywords. Acest tabel care
apare și în figura 3.3.4 înregistrează numărul produsului care a fost adăugat, categoria din care
face parte, producă torul , titlul, p rețul de vânzare, o scurtă descriere unde este atașată și o poză
cu acest produs și cuvintele cheie care vin în ajutorul utilizat orului cu scopul de a localiza
produsul sau informația dorită în cel mai scurt timp .

Figura 3.3.4 Baza de date produs
Tabe lul categorii conține 2 câmpuri: cat_id și cat_titlu. Acest tabel înregistrează atât
ordinea de afișare pentru categoriile inserate, cât si numele acestora. Acest lucru se poate
observa în figura 3.3.5.

Figura 3.3.5 Baza de date categorii
Tabelul firme conține 2 câmpuri : firma_id, firma_titlu. Acest tabel înregistrează
ordinea de afișare și denumirea producătorilor în cadrul cărora sunt inserate produsele
electronice . Acest lucru se poate observa în figura 3.3.6.

Figura 3.3.6 Baza de date Firme
3.4 Interfața aplicației web
Aplicația a fost creată cu scopul de achiziționare și informare fiind foarte ușor de
utilizat datorită interfeței simple și prietenoase. Este destinată atât utilizator ilor avansați cât și
începătorilor . Aceasta conține o parte de front -end și o parte de back -end.
În următoarele două subcapitole sunt prezentate cele două tipuri de interfețe ale
aplicației și anume:
– Interfața utilizator

– Interfața de administrare
3.4.1 Interfața utilizator
Interfața utilizator sau front -end-ul reprezintă partea vizibilă a aplicației, aceasta este
partea în care utilizatorii au acces la conținutul website -ului, în funcție de drepturile de acces
oferite de către admini.
Aplicația web permite utilizato rilor navigarea cu ușurință între pagini, astfel și un
utilizator cu cunoștințe minime în acest domeniu se poate descurca și poate să găsească
informația căutată odată ce a accesat website -ul.
În figura 3.4.1 este afișată pagina principală a aplicației. Aceasta conține un logo cu
numele aplicației web, un meniu care permite navigarea pe celelalte pagini , o rubrică destinată
categoriilor și ofertelor produselor inserate, un meniu pentru coșul de cumpărături, un
slideshow creat cu ajutorul limbajului jQuery și o rubrică unde sunt actual izate ultimele
produse inserate împreună cu numele și prețul acestora.

Figura 3.4.1 Prima pagină
Meniul din pagina principală conține 6 butoane:
– Pagina Principală
– Produse
– Contul meu
– Coșul meu
– Contact

– Înregistrare
Sub meniul paginii principale am implementat și un meniu al coșului de cumpărături
unde este afișat mesajul “Bun ă vizitatorule ” (daca utilizatorul nu are un cont sau nu este
logat), numărul de produse adăugate în coșul de cumpărături, prețul total și posibilitatea de
logare sau delogare.
În a doua pagină a site -ului numită Produse sunt prezentate o serie de produse
electronice din diferite categorii unde utilizatorul are posibilitatea de informare ( cu ajutorul
butonului Detalii ) sau de adă ugare a acestora în coșul de cumpărături , după cum se poate
observa in figura 3.4.2.

Figura 3.4.3 Pagina Produse
În următoarea pagină a site -ului numită Contul meu este afișat contul utilizatorului
împreună cu un panoul de control care conține o poză aleasă de utilizator în urma completări
formularului de înscriere și patru opțiuni : Editare cont, Modificare parolă, Ștergere cont și
Delogare dupa cu se poate observa in figura 3. 4.4.

Figura 3.4.4 Contul meu
Dacă utilizatorul dorește să modifice anumite date din contul său , va selecta opț iunea
Editare cont, care va afișa automat un formular cu informațiile contului actual și posibilitatea
de modificare . Acest formular se poate observa in figura 3.4.5.

Figura 3.4.5 Modificare cont

În pagina numită Coșul meu sunt prezentate produsele care au fost selectate cu intenția
de a se efectua o comandă pentru acestea. S e poate observa prețul fiecărui produs și suma
totală. Utilizatorul are posibilitatea de a șterge produsele nedorite din coșul de cumpărături
cum se poate observa in figura 3.4.6.

Figura 3.4.6 Coșul meu
Pentru ca această comandă să fie efectuată cu succes, utilizatorul trebuie sa fie logat .
Dacă utilizatorul nu este logat va fi direcționat la formularul de logare unde , dacă nu dispune
de un cont are posibilitatea de înregistrare apăsând butonul Înregistrați -vă aici. Dacă
utilizatorul dispune de un cont și acesta este logat se trece la următ oarea etapă unde se
efectuează comanda pentru produsele din coșul de cumpărături.
Baza de date a coșului de cumpărături are numele cart și conține 2 câmpuri : p_id, p_add.
În aceste câmpuri sunt înregistrate informațiile despre produsele comandate: Id -ul produsului
și dacă acesta a fost adăugat , după cum se poate observa in figura 3.4.7.

Figura 3.4.7 Baza de date cart

În pagina numită Contact este afișat un formular care permite utilizatorului să dezvolte
diferite subiecte în legătură cu problemele întâlnite sau funcționalitatea site -ului după cum se
poate observa în figura 3.4.8. Dacă submiterea acestui text este incheiată cu success, se va
afișa mesajul “ Textul a fost expediat cu success”. Textul trimis de către utilizator împreună cu
datele acestuia sunt expediat e pe adresa de email lăsată de administrator .

Fig 3.4.8 Formularul de Contact
În pagină numită Înregistrare este prezentat un formular de înregistrare care conține
mai multe câmpuri.Acestea sunt :
– Nume (unde se introduce numele utilizatorului) .

– Email (unde se introduce adresa de email) .
– Parolă (unde se introduce parola) .
– Imagine (unde se importează o imagine, daca utilizatorul dorește) .
– Țară (Selectarea țării) .
– Oraș (unde se introduce numele orașului în care locuiește utilizatorul) .
– Contact (unde se introduce numărul de telefon)
– Adresă (unde se introduce adresa utilizatorului)
După completarea tuturor câmpurilor obligatorii si submiterea acestora se va crea un
cont pe care ut ilizatorul are posibilitatea să -l folosească cu scopul de informare în legătură cu
diferite produse elec tronice existente pe site sau achiziționare a produselor respective.
3.4.2 Interfața de administrare
Interfața de administrare sau back -end-ul aplicației este accesibil administratorului
prin intermediul căruia se realizează modificarea conținutului și gestionarea produselor
electronice cu ajutorul unui panou de control . Administratorul are posibilitatea de a administra
orice informație sau conți nut din aplicație având un control deplin asupra acesteia.
Accesul pe interfața de administrare se face printr -un formular de autentificare, pe
baza ema il-ului și pe baza unei parole. Administratorul are posibilitatea de a adăuga, șterge și
modifi ca informațiile din interiorul aplicației.
Această i nterfața de administrare cu toate posibilitațile sale este accesibilă doar în momentul
în care autentificarea se face cu succes. Dacă nu sunt completate toate câmpurile sau nu sunt
completate corect se v or afișa mesajele de eroare corespunzătoare. Dacă se dorește accesarea
interfeței de administrare fără a completa câmpurile necesare pentru autentificare se va afișa
mesajul “ Nu sunteț i un Administrator!” după cum se poate observa in figura 3.5.1.

Figura 3.5.1 Formular autentificare administrator
În momentul în care autentificarea se face cu succes se deschide automat pagina
administratorului împreuna cu mesajul „L ogarea a fost efectuat ă cu succes” .
Dacă email -ul și parola sunt greșite atu nci se va afișa mesajul “Parol ă sau email greșit,
încercați din nou ”.
Pentru întreținerea cât mai ordonată și ușoară a site -ului, pagina de administrare
dispune de un panou de control . Cu ajutorul acestui panou de control administratorul are
posibilitatea de a modifica conținutul paginilor, adăuga, modifica sau elimina produse, adăuga
categorii noi, vizualiza sau elimina utilizatorii și comenzile plasate de către aceștia.
În figura 3.5.2 se poate observa panoul de administrare împreună cu meniul acestuia și
mesajul de întâmpinare în urma autentificării cu succes .

Figura 3.5.2 Panoul de control
Utilizând opțiunea Adăugare produs din cadrul panoului de comandă se pot insera
produse noi după cu m se poate vedea în figura 3.5.3. În figura 3.5.4 voi prezenta codul php

folosit pentru adăugarea produselor. La implementarea acestei funcționalități în site, prima
dată se stabilește valoarea variabilei produs_id, după care vom atribui următoarele informații
produsului:
– Titlu (unde se introduce numele produsului).
– Categorie (unde se introduce categoria din care face parte un produs).
– Producător (unde se introduce producătorul produsului) .
– Imagine (unde se introduce imaginea produsului) .
– Preț (unde se introduce preț ul produsului) .
– Descriere (unde se introduce descrierea produsului) .
– Cuvinte cheie (unde sunt introduce cuvintele pe baza cărora găsim produsul dorit).
Aceste informații sunt salvate în baza de date , mai exact în tabelul produs.
Dacă adăugarea produs ului s -a efectuat cu success se va afișa mesajul “Produsul a fost
adăugat cu succes”.

Figura 3.5.3 Adăugare produs

Figura 3.5.4 Codul php pentru ad ăugarea produsului
Cu ajutorul opțiunii Produse din meniul panoului de control, administratorul are
posibilitatea de a adăuga, modifica sau șterge produs ele electronic e. Toate aceste posibilități
sunt aranjate corespunzător intr -un tabel alături de Id -ul, titluț, prețul și imaginea adăugată
fiecărui pr odus după cum se poate observa in figura 3.5.4.

Figura 3.5.5 Vizualizați produsele
Am implementat partea de ștergere a unui produs utilizând codul php:
if(isset($_GET['sterge_pro']))

{
$sterge_id = $_GET['sterge_pro'];
$sterge_pro = "delete from produse where produs_id='$sterge_id'";
$run_sterge = mysqli_query($con, $sterge_pro);
}
Cu ajutorul opțiunilor Adăugare categorie și Categorii din meniul panoului de control,
administratorul are posibilitatea de a adăuga, vizualiza, modifica sau șterge categori a unui
produs după cum se poate observa in figura 3.5.6.

Figura 3.5.6 Categorii
Mai departe în panoul de administrare sunt opțiunile Adăugare producător și
Producători, unde administratorul are posibilitatea de adăugare, vizualizare, modificare și
eliminare a producătorului unui produs, după cum se poate observa în figura 3.5.7.

Figura 3.5.7 Producători

Cu ajutorul opțiunii Utilizatori, administratorul are posibilitatea de a vizualiza sau
elimina toți utilizatorii care sunt înregistrați în baza de date a site -ului după cum se poate
observa in figura 3.5.8 .

Figura 3.5.8 Utilizatori
Pentru funcționarea aceastei părți de vizualizare utilizatori am folosit limbajul de
programare php cu aj utorul căruia am implementat următoarea funcție:
$get_c = "select * from clienti";
$run_c = mysqli_query($con, $get_c);
$i = 0;
while ($row_c=mysqli_fetch_array($run_c)){
$c_id = $row_c['client_id'];
$c_nume = $row_c['client_nume'];
$c_email = $row_ c['client_email'];
$c_img = $row_c['client_img'];
$i++;
}

Dacă administratorul dorește să șteargă un anumit utilizator poate folosi opțiunea
ștergere.Dacă această opțiune a fost efectuată apare mesajul “Un utilizator a fost șters!”
Ultima opțiune din panoul administratorului este Delogare după cum se poate observa
în figura 3.5.9 .

Daca administratorul va selecta această opțiune, acesta va fi deconectat de la panoul
de administrare după care va apărea mesajul “Delogarea a avut loc cu succes!”

Figura 3.5.9 Delogare

Concluzii
.
Aplicația curentă este compatibilă cu toate browserele de pe piață.
Site-ul este foarte bine structurat pentru ca fiecare vizitator să găseasc ă în cel mai scurt timp
informaț ia de care are nevoie.
Implementarea aplicației a fost realizată cu ajutorul tehnologiilor cele mai des întâlnite în
dezvoltarea de aplicații web, cum ar fi: HTML, CSS, PHP, MySQL, JavaScript, Jquery,
Apache2.
Aplicația a fost structurată în așa fel încâ t o eventuală extindere să fie cât mai accesibilă în
viitor. Baza de date poate să fie și ea îmbunătățită.
Principalele dezvoltări viitoare ar cuprinde adăugarea unui sistem de plată și unui sistem de
chat pentru comunicarea între administrator și utiliza tori,

Bibliografie

[1] Cornelia Gyorodi. Baze de date relaționale, teorie și aplicații. Editura TREIRA, Oradea,
2000.
[2] Cristian Darie, Mihai Bucică. PHP5 și MySQL pentru comerț electronic. E ditura Teora,
București, 2006.
[4] Aplicatii web http://andrei.clubcisco.ro/cursuri/f/f -sym/5master/aac -dai/dai01.doc
[5]despre HTML http://cio banu.cich.md/lectii_view.php?id=5
[6] Despre CSS http://tutorialeprogramare.com/tutoriale -css/
[7]phphttp://www.saguna.ro/~dorulique/lucrgrad/Programarea%20paginilor%20WEB%20fol
osind%20limbajul%20PHP.pdf
[8] Despre sql http://vega.unitbv.ro/~cataron/Courses/BD/BD_Cap_5.pdf
[9]Despre sql II https://ro.wikipedia.org/wiki/SQL
[10] Despre jquery https://ro.wikipedia.org/w iki/JQuery
[11]javascript https://ro.wikipedia.org/wiki/JavaScript
[12]JavaScript http://informatica.hyperion.ro/wp -content/uploads/2015/05/Tehnologii –
Web.pdf

[13]XAMPP https://www.apachefriends.org/ro/about.html
[14]Notepad http://blogul -despre.blogspot.ro/2014/07/notepad -editorul -meu-de-cod-
preferat.html

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

Titlul lucrării

MAGAZIN ONLINE CU VÂNZĂRI DE PRODUSE ELECTRONICE

Autorul lucrării

BRÎNDUȘ LUCIAN TEODOR

Lucrarea de finalizare a studiilor este elaborată în vederea susținerii examenului de
finalizare a studiilor organizat de către Facultatea Inginerie Elect rică și Tehnologia
Informației din cadrul Universității din Oradea, sesiunea septembrie a anului universitar 2015 –
2016.
Prin prezență , subsemnatul Brînduș Lucian Teodor, CNP 1930227052538, declar pe
proprie răspundere că această lucrare a fost scr isă 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 de 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,
22.02.2017 Semnătura