Asist. Univ. Dr. Ing. RĂDULESCU VIRGINIA MARIA Iulie 2017 CRAIOVA UNIVERSITATEA DIN CRAIOVA FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ… [623598]

UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ

DEPARTAMENTUL DE AUTOMATICĂ ȘI ELECTRONICĂ

PROIECT DE DIPLOMĂ
Călărașu Alberto -Daniel

COORDONATOR ȘTIINȚIFIC
Asist. Univ. Dr. Ing. RĂDULESCU VIRGINIA MARIA

Iulie 2017
CRAIOVA

UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ

DEPARTAMENTUL DE AUTOMATICĂ ȘI ELECTRONICĂ

Aplica ție web pentru magazin online
Călărașu Alberto -Daniel

COORDONATOR ȘTIINȚIFIC
Asist. Univ. Dr. Ing. RĂDULESCU VIRGINIA MARIA

Iulie 2017
CRAIOVA

DECLARAȚIE DE ORIGINALITATE

Subsemnatul Călărașu Alberto -Daniel , student: [anonimizat], Calculatoare și Electronică a Universității din Craiova, certific prin
prezenta că am luat la cunoștință de cele prezentate mai jos și că îmi asum, în acest context,
originalitatea proiectului meu de licență:
• cu titlul Aplica ție web pentru magazin on -line,
• coordonată de Asist. Univ. Dr. Ing. Radulescu Virginia Maria ,
• prezentată în sesiunea Iulie 2017.
La elaborarea proiectului de licență, se consideră plagiat una dintre următoarele acțiuni:
• reproducerea exactă a cuvint elor unui alt autor, dintr -o altă lucrare, în limba română sau prin
traducere dintr -o altă limbă, dacă se omit ghilimele și referința precisă,
• redarea cu alte cuvinte, reformularea prin cuvinte proprii sau rezumarea ideilor din alte
lucrări, dacă nu se in dică sursa bibliografică,
• prezentarea unor date experimentale obținute sau a unor aplicații realizate de alți autori fără
menționarea corectă a acestor surse,
• însușirea totală sau parțială a unei lucrări în care regulile de mai sus sunt respectate, dar c are
are alt autor.
Pentru evitarea acestor situații neplăcute se recomandă:
• plasarea între ghilimele a citatelor directe și indicarea referinței într -o listă corespunzătoare
la sfărșitul lucrării,
• indicarea în text a reformulării unei idei, opinii sau teorii și corespunzător în lista de
referințe a sursei originale de la care s -a făcut preluarea,
• precizarea sursei de la care s -au preluat date experimentale, descrieri tehnice, figuri,
imagini, stati stici, tabele et caetera,
• precizarea referințelor poate fi omisă dacă se folosesc informații sau teorii arhicunoscute, a
căror paternitate este unanim cunoscută și acceptată.
Data, Semnătura candidat: [anonimizat],

UNIVERSITATEA DIN CRAIOVA
Facultatea de Automatică, Calculatoare și Electronică

Departamentul de Automatică și Electronică

Aprobat la data de
…………………
Director de
departament,
Prof. dr. ing.
Emil PETRE

PROIECTUL DE DIPLOMĂ

Numele și prenumele student: [anonimizat]/ -ei:
Călărașu Alberto -Daniel

Enunțul temei:

Aplicație web pentru magazin on -line

Datele de pornire:

Administrarea produselor unui magazin on -line

Conținutul proiectului :

1. Introducere
2. Noțiuni despre tehnologiile utilizate în
dezvoltarea aplicației
3. Tehnologii utilizate în dezvoltarea aplicației web
4. Prezentarea aplicației – Magazin on -line
5. Concluzii

Material grafic obligatoriu:
Da

Consultații:
Periodice
Conducătorul științific
(titlul, nume și prenume, semnătura): Asist. Univ. Dr. Ing. Radulescu Virginia Maria

Data eliberării temei:
17.10.2016

Termenul estimat de predare a
proiectului :
20.06.201 7

Data predării proiectului de către
student și semnătura acestuia:

UNIVERSITATEA DIN CRAIOVA
Facultatea de Automatică, Calculatoare și Electronică

Departamentul de Automatică și Electronică

REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC
Numele și prenumele candidatului/ -ei: Călărașu Alberto -Daniel
Specializarea: Ingineria Sistemelor Multimedia
Titlul proiectului: Aplicație web pentru magazin online
Locația în care s -a realizat practica de
documentare (se bifează una sau mai
multe din opțiunile din dreapta): În facultate □
În producție □
În cercetare □
Altă locație: [ se detaliază ]

În urma analizei lucrării candidatului au fost constatate următoarele:
Nivelul documentării Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine
□
Tipul proiectului Cercetare
□ Proiectare
□ Realizare
practică □ Altul
[se detaliază ]
Aparatul matematic utilizat Simplu
□ Mediu
□ Complex
□ Absent
□
Utilitate Contract de
cercetare □ Cercetare
internă □ Utilare
□ Altul
[se detaliază ]
Redactarea lucrării Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine
□
Partea grafică, desene Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□
Realizarea
practică Contribuția autorului Insuficientă
□ Satisfăcătoare
□ Mare
□ Foarte mare
□
Complexitatea
temei Simplă
□ Medie
□ Mare
□ Complexă
□
Analiza cerințelor Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine
□
Arhitectura Simplă
□ Medie
□ Mare
□ Complexă
□
Întocmirea
specificațiilor
funcționale Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□
Implementarea Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□

Testarea Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună
□
Funcționarea Da
□ Parțială
□ Nu
□
Rezultate experimentale Experiment propriu
□ Preluare din bibliografie
□
Bibliografie Cărți
Reviste
Articole
Referințe web

Comentarii
și
observații

În concluzie, se propune:

ADMITEREA PROIECTULUI
□ RESPINGEREA PROIECTULUI
□

Data, Semnătura conducătorului știi nțific,

REZUMATUL PROIECTULUI

Un magazin online sau magazin electronic , este un website de comerț electronic destinat vânzării
de produse și servicii. În cele mai multe dintre cazuri, magazinul online reprezintă o platformă pe care
sunt adăugate produse. Aceste produse pot fi accesate și cumpăra te cu ajutorul cărții de credit.
Magazinul online este un tip de comunitate online și reprezintă corespondentul virtual al entității
reale care asigură desfacerea produselor și serviciilor, precum și interacți unea dintre ofertant și client.
Magazin ul virtual este o v arianta ieftina de a face comerț , deoarece un magazin virtua l decent se
poate face cu o sumă modică plus costul unui hosting pe lună. După aceste lucruri totul este funcț ional ,
iar comerțul poate incepe, adă ugarea produselor se face dintr -o conso la de administrare. Apoi urmează
dacă se dorește o reclamă online platită ceea ce poate depaș i cu mult prete nțiile de î nceput a unei firme.
Magazinul online a cunoscut o dezvoltare rapi dă încă de l a apariția conceptului și a reușit, în scurt
timp, să penetreze întreaga piață de desfacere de bunuri și servicii.
Pe această platformă online, se pot regăsi și informații, detalii despre preț cât și despre produse, o
descriere scurtă și o poză c u ajutorul cărora cumpărătorul î și poate găsii pr odusul dorit pe care l -a vazut
într-o reclama TV sau pe alte site -uri de specialitate.
La baza acestei aplicații web al magazinului on -line stă limbajul de programare PHP ( Hypertext
Preprocessor ) care este un limbaj de scripting de uz general, cu cod -sursă deschis, folosit de foarte mulți,
și care este potrivit pentru proiectarea unei aplicații de comerț electronic pentru clienții care dispun de un
buget redus.
Pagina principal ă cu produse a fost realizată cât mai simplă, fără prea multe detali i folosind
limbajele HTML /PHP /CSS , limbaje ce aduc un stil nou și aspect plăcut paginilor web .
Un avantaj de subliniat al aplicației web – Magazin on -line este faptul că se pot comanda produse
direct de acasă, astfel economisindu -se timp.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

CUPRINS
1. Introducere ………………………….. ………………………….. ………………………….. ………………………….. ………. 1
1.1 Motiva ția ………………………….. ………………………….. ………………………….. ………………………….. …… 1
1.2 Scopul ………………………….. ………………………….. ………………………….. ………………………….. ……….. 1
2. Noțiuni despre tehnologiile utilizate în dezvoltarea aplicației ………………………….. …………………… 3
2.1 Noțiuni despre proiectarea site -urilor web ………………………….. ………………………….. …………… 3
2.2 Platforma JQuery ………………………….. ………………………….. ………………………….. ………………… 11
2.3 Tehn ologii CSS/HTML ………………………….. ………………………….. ………………………….. …………. 13
2.4 Tehnologii PHP ………………………….. ………………………….. ………………………….. ……………………. 16
2.5 Noțiuni SQL ………………………….. ………………………….. ………………………….. …………………………. 17
3. Tehnologii utilizate în dezvoltarea aplicației web ………………………….. ………………………….. ………. 19
3.1 Proiectare și Design ………………………….. ………………………….. ………………………….. ………………. 19
3.2 Tehnologii CSS/HTML ………………………….. ………………………….. ………………………….. …………. 22
3.3 Tehnologii PHP ………………………….. ………………………….. ………………………….. ……………………. 31
3.4 Proiectarea bazei de date ………………………….. ………………………….. ………………………….. ………. 39
4. Prezentarea aplicației – Magazin on -line ………………………….. ………………………….. …………………… 44
5. Concluzii ………………………….. ………………………….. ………………………….. ………………………….. ………… 55
6. Bibiliografie ………………………….. ………………………….. ………………………….. ………………………….. ……. 56

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

LISTA FIGURILOR
Figura 1 Legătura paginilor HTML cu fișierul CSS ………………………….. ………………………….. ………………. 15
Figura 2 Redimensionarea pozelor în photoshop ………………………….. ………………………….. …………………… 20
Figura 3 Tool text photoshop ………………………….. ………………………….. ………………………….. …………………. 20
Figura 4 Tool pentru decupare în photoshop ………………………….. ………………………….. ………………………… 20
Figura 5 Meniul Blending Options ………………………….. ………………………….. ………………………….. …………. 21
Figura 6 Tool shape photoshop ………………………….. ………………………….. ………………………….. ………………. 21
Figura 7 Gruparea layer -lor photoshop ………………………….. ………………………….. ………………………….. ……. 21
Figura 8 Importarea scriptului JQuery ………………………….. ………………………….. ………………………….. …….. 22
Figura 9 Denumirea paginii ………………………….. ………………………….. ………………………….. …………………… 22
Figura 10 Tag -ul title HTML ………………………….. ………………………….. ………………………….. …………………. 23
Figura 11 Div -ul logo ………………………….. ………………………….. ………………………….. ………………………….. .. 23
Figura 12 Div -ul nav ………………………….. ………………………….. ………………………….. ………………………….. … 23
Figura 13 Footer ………………………….. ………………………….. ………………………….. ………………………….. ………. 23
Figura 14 Div -ul footer ………………………….. ………………………….. ………………………….. …………………………. 24
Figura 15 Stilizarea header -ului în CSS ………………………….. ………………………….. ………………………….. …… 24
Figura 16 Stilizarea html -ului în CSS ………………………….. ………………………….. ………………………….. ……… 24
Figura 17 Stilizarea link -urilor ………………………….. ………………………….. ………………………….. ……………….. 25
Figura 18 Formularul de înregistrare ………………………….. ………………………….. ………………………….. ………. 25
Figura 19 Div -ul înregistrare ………………………….. ………………………….. ………………………….. …………………. 26
Figura 20 Mesaj de confirmare ………………………….. ………………………….. ………………………….. ………………. 26
Figura 21 Mesaj de atenționare ………………………….. ………………………….. ………………………….. ………………. 26
Figura 22 Criptarea parolei ………………………….. ………………………….. ………………………….. ……………………. 26
Figura 23 Afișarea parolei în baza de date ………………………….. ………………………….. ………………………….. .. 26
Figura 24 Stilizarea clasei inregistrare ………………………….. ………………………….. ………………………….. …….. 27
Figura 25 Tranziție a butonului de înregistrare ………………………….. ………………………….. ……………………… 27
Figura 26 Stilizare în CSS ………………………….. ………………………….. ………………………….. ……………………… 28
Figura 27 Stilizare logo ………………………….. ………………………….. ………………………….. …………………………. 28
Figura 28 Stilizare coș de cumpărături ………………………….. ………………………….. ………………………….. ……. 28
Figura 29 Formularul de logare ………………………….. ………………………….. ………………………….. ……………… 29
Figura 30 Clasa logout ………………………….. ………………………….. ………………………….. ………………………….. 29
Figura 31 Stilizare clasei login ………………………….. ………………………….. ………………………….. ……………….. 30

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

Figura 32 Funcția action ………………………….. ………………………….. ………………………….. ……………………….. 31
Figura 33 Stilizarea butonului adauga ………………………….. ………………………….. ………………………….. …….. 31
Figura 34 Conectarea la baza de date ………………………….. ………………………….. ………………………….. ………. 32
Figura 35 Funcția de conectare la baza de date ………………………….. ………………………….. ……………………… 32
Figura 36 Includerea fișierului conectare ………………………….. ………………………….. ………………………….. …. 32
Figura 37 Afișarea produselor în PHP ………………………….. ………………………….. ………………………….. …….. 32
Figura 38 Afișarea produselor pe ecran ………………………….. ………………………….. ………………………….. …… 33
Figura 39 Includerea fișierului footer ………………………….. ………………………….. ………………………….. ……… 33
Figura 40 Mesaj de întâmpinare ………………………….. ………………………….. ………………………….. ……………… 33
Figura 41 Folosirea tag -ului <h1> ………………………….. ………………………….. ………………………….. ………….. 33
Figura 42 Crearea formularului de conectare în PHP ………………………….. ………………………….. …………….. 34
Figura 43 Formularul de conectare ………………………….. ………………………….. ………………………….. …………. 34
Figura 44 Butonul de conectare ………………………….. ………………………….. ………………………….. ……………… 34
Figura 45 Codul de redirecționare ………………………….. ………………………….. ………………………….. ………….. 34
Figura 46 Adăga în coș în PHP ………………………….. ………………………….. ………………………….. ………………. 35
Figura 47 Butonul de adaugă ………………………….. ………………………….. ………………………….. …………………. 35
Figura 48 Modificarea cantității ………………………….. ………………………….. ………………………….. ……………… 35
Figura 49 Exemplu de produs ………………………….. ………………………….. ………………………….. ………………… 36
Figura 50 Specificațiile produsului ………………………….. ………………………….. ………………………….. …………. 36
Figura 51 Realizarea tabelului cu specificații în PHP ………………………….. ………………………….. …………….. 36
Figura 52 Butonul de promotii ………………………….. ………………………….. ………………………….. ……………….. 37
Figura 53 Bara de căutare ………………………….. ………………………….. ………………………….. ……………………… 37
Figura 54 Formular ………………………….. ………………………….. ………………………….. ………………………….. ….. 37
Figura 55 Cantiatea doită ………………………….. ………………………….. ………………………….. ………………………. 38
Figura 56 Prețul ………………………….. ………………………….. ………………………….. ………………………….. ……….. 38
Figura 57 Butonul șterge ………………………….. ………………………….. ………………………….. ……………………….. 38
Figura 58 Funcția șterge ………………………….. ………………………….. ………………………….. ………………………… 38
Figura 59 Trimite ………………………….. ………………………….. ………………………….. ………………………….. …….. 39
Figura 60 Câmpuri și înregistrari din baza de date ………………………….. ………………………….. ………………… 39
Figura 61 XAMPP Control ………………………….. ………………………….. ………………………….. ……………………. 40
Figura 62 Creare bază de date ………………………….. ………………………….. ………………………….. ………………… 40
Figura 63 Numele bazei de date ………………………….. ………………………….. ………………………….. ……………… 41
Figura 64 Creare tabel ………………………….. ………………………….. ………………………….. ………………………….. . 41

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

Figura 65 Auto -incrementarea ID -ului ………………………….. ………………………….. ………………………….. ……. 41
Figura 66 Structura tabelului users ………………………….. ………………………….. ………………………….. …………. 42
Figura 67 Structura tabelului product ………………………….. ………………………….. ………………………….. ……… 42
Figura 68 Interogare în bază de date ………………………….. ………………………….. ………………………….. ……….. 43
Figura 69 Interogare SQL ………………………….. ………………………….. ………………………….. ……………………… 43
Figura 70 Structura bazei de date ………………………….. ………………………….. ………………………….. ……………. 44
Figura 71 Structura tabelului customer ………………………….. ………………………….. ………………………….. ……. 44
Figura 72 Meniul de navigare ………………………….. ………………………….. ………………………….. ………………… 45
Figura 73 Denumirea paginii prinicipale ………………………….. ………………………….. ………………………….. …. 45
Figura 74 Header ………………………….. ………………………….. ………………………….. ………………………….. ……… 45
Figura 75 Simbolul coșului de cumpărături ………………………….. ………………………….. ………………………….. 46
Figura 76 Imaginea produsului ………………………….. ………………………….. ………………………….. ………………. 46
Figura 77 Specificatiile produsului ………………………….. ………………………….. ………………………….. …………. 47
Figura 78 Butonul de adaugă ………………………….. ………………………….. ………………………….. …………………. 47
Figura 79 Date de contact ………………………….. ………………………….. ………………………….. ……………………… 47
Figura 80 Companie ………………………….. ………………………….. ………………………….. ………………………….. …. 48
Figura 81 Promoții ………………………….. ………………………….. ………………………….. ………………………….. …… 49
Figura 82 Produse aflate la promoție ………………………….. ………………………….. ………………………….. ………. 49
Figura 83 Tabelul users ………………………….. ………………………….. ………………………….. …………………………. 50
Figura 84 Formular de înregistrare ………………………….. ………………………….. ………………………….. …………. 50
Figura 85 Înregistrare din tabelul users ………………………….. ………………………….. ………………………….. ……. 51
Figura 86 Butonul de ieșire ………………………….. ………………………….. ………………………….. ……………………. 51
Figura 87 Formularul de conectare ………………………….. ………………………….. ………………………….. …………. 51
Figura 88 Formular cu detaliile livrării ………………………….. ………………………….. ………………………….. ……. 52
Figura 89 Înregistrare din tabelul customer ………………………….. ………………………….. ………………………….. 52
Figura 90 Numărul de produse adăugate în coș ………………………….. ………………………….. …………………….. 52
Figura 91 Tabelul cu produsele adăugate ………………………….. ………………………….. ………………………….. … 52
Figura 92 Cantitatea produselor ………………………….. ………………………….. ………………………….. ……………… 53
Figura 93 Butonul șterge ………………………….. ………………………….. ………………………….. ……………………….. 53
Figura 94 Butonul trimite comanda ………………………….. ………………………….. ………………………….. ………… 53
Figura 95 Detaliile comenzii ………………………….. ………………………….. ………………………….. ………………….. 53
Figura 96 Înregistrarea comenzii în baza de date ………………………….. ………………………….. …………………… 54
Figura 97 Detaliile comenzii în baza de date ………………………….. ………………………….. ………………………… 54

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

1

1. Introducere
1.1 Motiva ția
Ideea creării unui site de magazin on -line cu telefoane mobile a pornit din dorința de a veni î n
ajutorul cumpărătorilor. Astfel ei î și pot achiziționa produsul dorit mult mai ușor economi sind timp.
Datorită faptului că magazinul este on -line cumpărătorul î și poate comanda, prin intermediul
internetului, produsul dorit. La inceput toate ideile au fost discutate î mpreuna cu pro fesorul coordonator
de lucrare și notate astfel înc ât ne-am pu tut face o idee despre cum va arăta site-ul la final.
Pagina principal ă cu produse a fost realizată cât mai simplă, fără prea multe detalii folosind o
tehnologie HTML/CSS , tehnologie ce aduce un stil nou și aspect plăcut paginilor web, urmând să fie
discutată în continuare.
Pe această platformă online, se pot regăsi și informații, detalii despre preț cât și despre produse, o
descriere scurtă și o poză cu ajutorul cărora cumpără torul î și poate găsii pr odusul dorit pe care l -a vazut
într-o recla ma TV sau pe alte site -uri de specialitate.

1.2 Scopul
“Lucrarea "Magazinul Online" se dorește a fi o pledoarie pentru dezvoltarea comerțului
electronic, un studiu al afacerilor online, o analiză a avantajelor și dezavantajelor pe care le poate avea
deținerea unui afaceri electronice.
Un magazin online sau magazin electronic (e-shop ), este un website de comerț electronic destinat
vânzării de produse și servicii. În cele mai multe dintre cazuri, magazinul online reprezintă o platformă
pe care su nt adăugate produse. Aceste produse pot fi accesate și cumpărate cu ajutorul cărții de credit. Pe
magazinele online complexe utilizatorii pot selecta modalitatea de plată: card de credit, transfer bancar,
ramburs și modalitatea de transport: poștă, curier, avion .
Un magazin online este o pagină de Internet care îndeplinește următoarele condiții:
• prezintă informații despre produse sau servicii, inclusiv prețul acestora;
• include un sistem prin care vizitatorii paginii pot selecta produsele dori te și le pot adăuga într -un "coș
electronic de cumpărături" (la fel cum într -un supermarket vizitatorii pot lua produsele dorite de pe raft
și le pot pune în coș );

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

2
• include un sistem de preluare și transm itere a datelor personale ale cumpără torului, pentru a putea fi
contactat de către vânzător.
• include un sistem de plată prin care vânzătorul să îș i poată încasa banii de la clientul "virtual".
Un magazin electronic include, în plus faț ă de aceste elemente și un sistem de administrare
invizibil pentru vizitatorii obișnuiți. Prin intermediul acestuia se introduc și se actualizează i nformațiile
despre produse, se ț ine evidenta comenzilor, a contu rilor cumpărătorilor înregistraț i, se urmăresc
statistici des pre produsele cele mai căutate ș i, nu în ultimul rând, se tri mit mesaje de promovare menite
să informez e clienț ii magazinului despre ofertele curente.
Magazinul online este un tip de comunitate online și reprezintă corespondentul virtual al entității
reale care asigură desfacerea produselor și serviciilor, precum ș i interacțiunea dintre ofertant și client.
Magazinul onli ne a cunoscut o dezvoltare rapidă încă de l a apariția conceptului și a reușit, în scurt
timp, să penetreze întreaga piață de desfacere de bunuri și servicii.
Dezvoltarea în paralel a tehnologiilo r care permit securizarea tranzacțiilor pe Internet a făcut ca
acest tip de comunitate virtuală să fie din ce în ce mai populară. Un magazin online reprezintă orice
locație fixă în Internet unde pot fi etalate informații despre o anumită companie și oferit e în scop
comercial , mostre ale produselor sau serviciilor respectivei companii. Un magazin electronic se
implementează prin intermediul unui sit e web administrat de companie pentru marketingul și vânzările
propriilor produse și servicii.
Magazinul online este împărț it în doua zone distincte, cu o ferte speciale dedicate fiecă rei
categorii de utilizatori: Per sonal si Business, acesta adresâ ndu-se persoanelor juridice, care vor ben eficia
de oferte personalizate î n funcție de anumiț i factori.
Magazinul virtu al este o v arianta ieftina de a face comerț , deoarece un magazin virtual decent se
poate face cu o suma modica de 1000 eu ro + costul unui hosting pe lună, aproximativ 15 euro/lună, o
firmă care costă aproximativ 400 euro pentru a o înființa. După aceste lu cruri totul este funcțional, iar
comerț ul poate incepe, adă ugarea produselor se face dintr -o consola de administrare. Apoi urmeaza dacă
se dorește o reclamă online platită ceea ce poate depași cu mult pretențiile de început a unei firme.
Trecâ nd peste asta produsele trecute în magazinul virtu al nu trebuie sa fie neapă rat în stoc ș i pot fi î n
stoc la furnizorii de unde se cumpară, de aceea se salvează foarte mulți bani pentru chiria unui spațiu de
depozit ș i pentru stocul aferent. Un alt avan taj la magazinul virtual este că nu trebu ie să mai angajezi un
om care să explice det aliile unui produs, acestea putând fi trecute direct î ntr-o lista de caracteristici unde
pot fi și explicate, astfel se salvează un salariu în plus (ceea ce deja depășeș te bugetul lunar p entru un
hosting). ” [1]

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

3
2. Noțiuni despre tehnologiile utilizate în dezvoltarea
aplicației
2.1 Noțiuni despre proiectarea site -urilor web
Noțiunea de site web provine din expresia ”website” care desemnează un grup de pagini web ce
conțin texte, imagi ni, animații, auto/video, accesibile prin internet.
În momentul apariției internetului, fiecare website se accesa prin introducerea unei adrese IP
specifice, ulterior, acestor a li s -au alocat domenii, permițând astfel ca fiecare site să fie accesat pe
internet folosind o adresă aleasă de dezvoltatorul acestuia, u șurând astfel accesarea.
Un site web este creeat cu ajutorul limbajului HTML și limbaj ele de programare PHP, ASP.
Acesta are această denumire deoarece poate fi afișată de pe oric e dispozitiv conectat la internet
(calculator, laptop, telefon,tabletă ).
O pagina web poate conține:
• texte de diferite formate (m ărimi, culori, poziții, forme)
• imagini (î n format .jpeg , .png , .gif)
• audio (fi șiere in formatele .wav, .mid )
• conținut multimedia interactiv c are pentru a putea fi utilizat și vă zut necesită un plugin î n format
Adobe Flash sau Adobe Shockwave
• miniaplicații (applet)
Paginile web mai pot conține și elemente care nu sunt afiș ate de browser:
• scripturi ( în format Ja vaScript )
• meta -etichete
• comentarii
• foi de stil (CSS)
• viruș i informatici
Un site care conț ine mai multe pagini are de o bicei o pagină principală numită homepage care
face legatura că tre celelalte pagini.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

4
Site-urile web se pot clasifica după content î n principal:
• Website Static ( de prezentare ).
• Website de tip forum sau cameră de discuții.
• Website de tip E -shopping ( magazin online ).
• Website tip content multimedia ( youtube, soundcloud ).

La momentul actual se pune foarte mare accent pe aspectul site-ului. Acesta put ând fi stilizat
folosind o varietate de limbaje specifice (Jquerry, CSS, Javasript, etc ).
Un website trebuie structurat câ t mai ușor și mai citeț, să fie folosită o paletă de culori fără a se
exagera cu numă rul acestora, pentru a atr age c ât mai mulți vizitatori.
Structura unui fiș ier HTML
<html>
<head>
Zona în care sunt scrise informații generale despre conținut ul paginii HTML (titlul paginii, cuvinte cheie
definite pentru motoarele de că utare) .
</head>
<body>
Zona care conține infor mația ce trebuie afișată .
</body>
</html>

La apari ția motorului de căutare Google, principala î nclinație a paginilor web a fost SEO (
Search Engine Optimization ). Un site foarte bine optimizat și descris apare mereu pe prima pagină a
motorului de căutare, ceea ce crește numarul de utilizatori ce accesează site -ul.
La inceputul anului 2008, odată cu interesul pentru design, au apărut un număr foarte mare de
limbaje de design care combină principiile cla sice ale unui design de succes împreună cu teh nologia ș i
inovația ( Materialize CSS, Bootstrap CSS, etc. )
Proiectarea unui sit e web constă în următoarele etape:

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

5
• Planificare
• Machetare
• Programare

1. Planificare
“Planificarea reprezint ă procesul prin care încercăm să definim în mod clar motivel e pentru ca re
dorim să realizăm un sit e web, ce mijloace avem la dispoziție pentru a realiza acest lucru, care va fi
publicul țintă.
Aspectele pe care trebuie s ă le luam în vedere atunci când planificăm un site -web sunt
urmatoarele :
• Scop
• Audiența
• Accesibilitate
• Conținut
• Copyright
• Efecte speciale
• Feedback
Scopul
Pentru început trebuie să definim în mod clar obiectivul sau s copul sit e-ului. Ce anume dorim să
realizăm, cum ne propunem să arate situl web în final? Analizâ nd mijloacele care ne sunt necesar e și pe
care le avem la dispoziție pentru atingerea țintei propuse. Notâ nd ce anume t rebuie făcut mai întâi ș i ce
sarcini putem îndeplini ulterior. Pe baza obiectivului stabilit ș i a mijloacelor d isponibile putem să ne
planifică m mai uș or munca. De asemene a, același obiectiv va influența în mod decisiv conținutul ș i forma
de prezentare a sit e-ului. Când facem planul pentru un sit web ne amintim că fiecare pagina web trebuie
să aibă un obiectiv precis. Ace sta trebuie să fie în concordață cu scopul final ș i tema generală care a fost
aleasă. Dacă nu știm cum să procedam, ne uităm la alte sit e-uri c are ne -au plăcut și încercăm să ne
inspiră m din modu l cum au fost realizate acestea.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

6
Audienț a
După ce am stabilit care es te obiectivul sit e-ului trebuie să vedem care vor f i utilizatorii acestuia.
Audiența reprezintă publicul țintă pentru care am realizat sit e-ul. Este un element critic deoarece designul
site-ului și conținutul acestuia sunt în strânsă legatură cu audienț a. De aceea, căutăm să realiză m profilul
standard al utilizatorului și să strîngem cât mai multe informaț ii legate de obiceiurile, interesele, acțiunile,
necesitățile și în general modul de viață , ale tuturor persoanelor care alcătuiesc publicul țintă . Cele mai
bine planificate ș i realizate sit e-uri web pot avea u n aspect total diferit, în funcție de software -ul și
echipamentele hardware pe care le folosesc viz itatorii. Acest lucru se explică prin faptul că surferii pe
web folosesc o gamă largă de calculatoare și monitoare, precum ș i modemuri cu viteze de conectare
diferite.
Accesibilitate
Accesibilitatea reprezintă una dintre cerințele de bază atunci când se proiectează o pagină web.
Aceasta înseamnă că orice netsurfer trebuie și poate să aibă acces la site, indiferen t de browserul pe care -l
foloseș te (in clusiv browsere text ca Lynx ), rezoluț ia sau dimensiunile ecranului, setă rile calcula torului
sau eventualele disfuncț ii ale vederii .
Conț inut
Diferenț a dintre un sit e atractiv și unul plictisitor și neinteresant este dată de valoarea
conținutului. Aceasta înseamnă că trebuie acordată o atenț ie maximă conț inutului, deoarece pe baza
acestuia vor fi dezvoltate structura sit e-ului ș i machetarea paginii. Astfel, dacă dorim să creăm o pagină
web personală, nu este suficient să punem numai biografia noast ră, plus un numar de legături că tre alte
site-uri pe care le consideră m interesante .
Copyright
Așadar, un site -web reprezintă o operă de creație intelectuală ș i poate constitui obiect al drep tului
de autor. Aceasta înseamnă că informaț iile pe care le intro ducem într -o pagină personală ne aparține ș i
dreptul de autor ne revine în între gime asupra textului respectiv. Dacă însă lucrăm într -o echipă sau
suntem angajaț ii unei firme de web design, atunci suntem co -autor și vom fi protejaț i prin drepturi de autor
asupra imagini lor pe care le -am creat, machetă rii paginii sau progr amelor pe care le -am realizat.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

7
Termenul de copyright este s pecific american, dar se folosește și în Europa și pe alte continente, cu
aceeași semnificaț ie: drept de autor .
Efecte speciale
Mulți webdesigneri folosesc diverse "efe cte speciale" pentru a da o notă spectaculoasă paginilor
pe care le -au realizat. Printre cele mai folosite se pot enumera: imagini animate, scrolling marques, texte
blink, ap pleturi Java, Javascript, animaț ii shockwave, Flash, ActiveX, etc.
Dacă dorim neapărat să subliniem un anumit text și să -l scoatem în evidență putem folosi
urmă toarele caractere :
• boldate
• italice
• subliniate
• mărite
• Javascript
În multe sit e-uri web apar de multe ori Javascripturi s au appleturi Java. Acestea oferă
webde signerilor posibilitatea furnizării unor animaț ii complexe sau a unei interactivitați sporite în relaț ia
cu vizitatorii ( inclusiv prin oferirea unor jocuri ).
Feedback
Până acum , principala formă de comunicare între come rcianți și clieț ii lor era prin intermediul
publicității. Dar această comunicare nu o ferea o oportunitate de interacțiune între cele două parț i sau
feedback. Odata cu raspâ ndirea Interne tului se poate realiza foarte uș or o comunic are în ambele sensuri.
Îmbunată țirea metodelor prin care utilizatorii interacționează cu un oarecare site este esenț iala pentru
crearea unui site bun. Folosirea feedback -ului este f oarte importantă pentru creșterea numă rului de
vizitatori și pentru ca aceștia să -și exprime opiniile, sugestiile și comentariile în legatură cu un sit e
web. ”[2].
2. Machetare
“Prin machetarea unei pagini web se în țelege modul cum sunt aranjate elementele constitutive ale
unei pagini: conținut, grafică, legături, sistem de navigare, elemente multimedia, etc. În cadrul aceluiași

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

8
proces de machetare se va analiza structura p aginii. Pentru ca toate informațiile să fie prezentate într -un
mod atractiv ș i original, o pa gină web poate să fie simplă sau împarțită în :
• cadre
• tabele simple
• tabele mul tiple sau imbricate
• combinaț ie a acestor elemente
Felul cum vor fi aranjate ele mentele componente într -o pagină web depinde numai de imaginația
și bunul gust al fiecăruia. Este de dorit să facem o bună impresie cu prima pagină. Aceasta trebuie să fie
deosebit de atractivă și interesantă și să arate în mod clar ce conț ine restul sit e-ului.
Când începem operaț iunea de machetare a sit e-ului, trebuie să luam în calcul următoarele
elemente :
• stilul pe care -l vom imprima pe pagini.
• elementele componente ale unei pagini web
• conținut
• grafica
• legături
• sistem de navigare
• elemente multimedia
• modul de împarțire în pagină
• cadre ( frames )
• tabele
Stil
Vizitatorii trebuie să recunoască fără dificultate un anumit stil, o anumită tusa pe care trebuie s -o
imprimă m paginilor web. Ceea ce înseamnă că va trebui să găsim o notă deosebită , un aranjament
ingenios pentru aceste pagi ni. Ele trebuie să se diferențieze net și chiar să iasă în evidență, în mulț imea
site-urilor web . Cu toate acestea , va trebui să pă străm un stil unitar.
Acest lucru se poate realiza prin :

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

9
• stilul de scriere
• modul de aranjare în pagină
• folosirea spaț iilor goale
Grafica
Grafica se foloseș te, în principal, pentru îmbunătă țirea aspectului unui site și creșterea
atracti vității acestui a. Imaginile mai sunt folosite ș i pentru sublinierea unui text sau al mesajului transmis
de o pagina web. Este recomandat să includem însă numai imaginile absolut necesare ș i care sunt într –
adevă r valoroase.
Nu trebuie ca pagina web să arate ca o însușire de imagini, indiferent câ t de remar cabile ar fi
acestea. Există si excepț ii, reprezentate de sit e-urile web specializate ș i construite exclusiv pentru oferirea
de imagini grafice, gratuite sau contracost. În acest caz, se folosesc thumbnails .
Legă turi
Atunci câ nd se realizează machetarea site -ului, o mare atenție trebuie acordată legăturilor ( hyper –
legături ) .
Acestea pot fi :
• interne ( că tre alte pagini din interiorul sit e-ului )
• externe ( că tre alte sit e-uri din Internet )
Navigare
Un conținut interesant ș i o n avigare ușoară reprezintă cele două componente principale ale unui
site bine întocmit. Dar chiar și cel mai atractiv conținut este nefolositor dacă nu este pus în evidență de un
sistem de navigare clar ș i consistent. Aceasta înse amnă că nu trebuie să lăsă m cititorul să pescuiască după
informații. Trebuie să -i oferim tot sprijinul posibil, prin realizarea unui meniu de navigare bine structurat.
Meniul de navigare
Meniul este o reprezentare grafică sau de tip text a conținutului ș i este ad esea încorporat în tema
generală a sit e-ului. Meniul principal trebuie să furnizeze trimiteri rapide și directe la secțiunile și

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

10
informaț iile disponibile dintr -un site web . El va fi realizat într -o formă practică și atractivă.
Locul obiș nuit pentru plasarea meniului principal este în partea stângă a ecranu lui dar el mai poate fi
plasat ș i în partea dreapta sau în partea superioară a paginii web. Secț iunile meniului vor fi denumite
astfel încât să ofere o descriere concisă și sugestivă a paginilor we b care vor fi accesate.
Cheia pentru o navigare ușoară este o bună organizare. Cu câ t site-ul va fi mai mare și mai
complex, cu atât va fi mai dificilă sarcina organizării acestuia ș i realiză rii unui sistem de navigare
consistent.
Tabele
Ele permit o împar țire a paginii în secț iuni și o poziționare precisă a textul ui sau imaginilor în
interiorul paginii.
Putem crea margini sau borduri de diferite dimensiuni ș i culori. De a semenea, se poate încapsula
conținutul în celulele tabelului pentr u a permite aliniere a textului ș i a limita lung imea liniilor. De oarece,
bordura tabe lelor nu este totdeauna necesară ș i uneori poate avea un aspect neplăcut, se poate renunț a la
ea prin folosirea atr ibutului "BORDER = 0". Atunci când folosim tabele, putem să setăm o lațime fixă, în
pixeli, sau o laț ime relativă la dimensiunea ecranului, în procente. ”[3]
3. Programare
”După ce am termina t etapa de machetare, trebuie să transformăm toate informaț iile pe c are le -am
acumulat într -o pagină web. Pentru acest lucru, trebuie să avem in stalat pe calculator instrumentul cu care
se poate vizualiza un site web, browserul . După aceea, ave m nevoie de mai multe programe și utilitare. O
pagină web simplă poate fi realizată folosind limbajul HTML. Mai avem nevoie de un editor grafic,
pentru a pu tea realiza ș i prelucra imaginile pe care dorim să le inseră m în paginile web.
Browsere
Browserul reprezintă instrumentul cu care se vizualizează paginile web. Dacă putem vedea
această pagină web, înseamnă că avem instalat pe calculator cel puțin un browse r. În prezent, există foarte
multe browsere.
Editoare HTML

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

11
Pentru realizarea unui site web avem nevoie de un editor HTML. Acestea se împart în doua
categorii:
1. Editoare de tipul WYSIWIG ( What You See Is What You Get ), sau în traducer e: Ceea ce vezi
este ceea ce obț ii.
2. Editoare în cod HTML .
Editoare î n cod HTML
Dacă știm limbajul HTML și dorim să edităm o pagină web în mod profesionist, putem să
folosim aceste editoare. La fel ca și editoarele WYSIWIG, ș i acestea ne permit să vizualiză m cum va
arăta pagina web pe care o realizăm. În plus, au o gramadă de alte facilitați care ne ușurează munca de
machetare ș i realizare a unei pagini web. ”[4]
2.2 Platforma JQuer y
JQuery este o platformă de dezvoltare JavaScript, care are menirea de a ușura și î mbun ătăți
procese precum trave rsarea arborelui DOM în HTML, managementul inter -browser al evenimentelor,
animații precum ș i a cereri i tip AJAX. jQuer y a fost gândit să fie câ t mai mic posibil, disponibil în toate
versiunile importante de browsere existente .
“JQuery se poate folosi pentru a rezolva anumite probleme specifice programării web, dupa cum
urmează:
• selecții de elemente în arborele DOM folosind propriul motor de sel ecții open source Sizzle
• proiect născut din jQuery
• parcurgere a ș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ăț i – versiunea browser -ului, func ția each.
JQuery este un software open source, licenț iat sub MIT si GNU.
Cea mai simplă sintaxă JQuer y este urmatorul program de afiș are Hello World:

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

12
$(document ).ready( function (){
$('body').html('Hello world!' );
});

Cele mai interesante aspecte legate de JQuery sunt Plugin -urile și ex tensiile pe care acesta le
oferă. Programatorii își pot dezvolta subaplicaț ii bazate p e biblioteca principală, extinzând astfel
biblioteca principală cu funcț ii specific e plugin -ului.
Astfel, JQuery ocupă foarte putin spațiu, iar extensiile pe care le folosim pe anumite pagini
web pot fi încărcate doar câ nd este nevoie de acestea.
JQuery oferă un set principal de extensii, numit JQuery UI ( JQuer y User Interface ). Acesta
pune la dispoziția programatori lor un set de extensii pentru efecte mai complexe și teme de culori. ”[5]
Programatorii pot astfel crea extensii, iar JQuery oferă publicarea acestora pe pagina principală
în diferite categorii disponibile.
Pentru a putea folosi JQuery trebuie mai întai i nclusă librăria de funcț ii pe pagina HTML, sub
forma unui fișier cu cod.
Aceasta este disponibilă ș i se poate descărca de pe pagina oficială, apoi treb uie salvată sub
extensia “.js” ș i inclusă în documentul HTML folosind sintaxă următoarea:
<script type=”t ext/javascript” src=”jquery.js”></script>
O alternativă mai simplă pentru a nu downloada librăria este folosirea acesteia prin Google:
<script type=”text/javascript” src= http:/ /ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js >
</script>
Sintaxa JQuery este:
$(document).ready(function() {
// Instructiunile codului JQuery

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

13
});
Comenzile și funcțiile de mani pulare al elementelor se vor adă uga în acest document -ready.

2.3 Tehnologii CSS/HTML
„O pagină Web conține butoane de navigare interne, care ajută utilizatorul să se deplaseze printre
numeroasele documente la care are acces.
Site-urile Web pot fi:
• Site-uri cu pagini statice
• Site-uri cu pagini dinamice
Site-urile cu pagini dinamice necesită o actualizare periodică a elementelor specifice. La
proiectarea unui astfel de site trebuie luate în considerare următoarele elemente: modul în care vor fi
actualizate datele de pe site și costurile operațiunilor de actualizare per iodică.
HTML este un limbaj de markup. El permite crearea layout -ului paginilor și a formularelor, dar
nimic mai mult. Pentru a se construi interfețe intuitive și sofisticate este necesar și un limbaj de scripting
la nivel de client. Scripting -ul permite scrierea de cod (mici programe) care rulează în cadrul browserului.
Cel mai cunoscut limbaj de scripting pe parte de client este JavaScript , care este suportat (mai
mult sau mai puțin) de aproape orice browser existent. Folosind JavaScript se poate realiza : validarea
formularelor, animarea te xtului și a imaginilor, crearea de meniuri drop -down și a controalelor de
navigare, se pot efectua procesări de bază numerice sau asupra textelor și multe altele .
Crearea paginilor Web dinamice permite crearea de aplica ții puternice, care pot include
caracteristici precum următoarele:
• interogarea aplicațiilor de baze de date existente pentru obținerea datelor
• crearea de interogări dinamice care facilitează obținerea în mod flexibil a datelor
• execuția procedurilor stocate

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

14
• execuția codului condițional on-the-fly pentru a personaliza răspunsurile în funcție de
situațiile specifice
• sporirea capabilităților formularelor HTML standard prin folosirea unor funcții de validare
• popularea în mod dinamic a elementelor din formulare
• personalizarea modului de afișare a informațiilor legate de dată, timp și monedă folosind
funcții de formatare
• ușurarea creării aplicațiilor de introducere a datelor prin wizards
• generarea automată de email
• site-uri comerciale și coșuri electronice de cumpă rături
Majoritatea browserelor noi permit folosirea și a altor tehnologii, dintre care cele mai importante sunt:
• CSS (Cascading Style Sheets ) – oferă o modalitate de a separa prezentarea de conținut astfel
încât ambele să poată fi refolosite și modificate cu ușurință.
• DHTML (Dynamic HTML ) – o combinație de HTML, script -uri și CSS care folosite
împreună, pot realiza interfețe pentru utilizator foarte atractive și interactive.
• Appleturi Java – mici programe care rulează în browser.
• Macromedia Flash – o tehnologie inclusă în 98% din browserele existente, care oferă un
mecanism pentru crearea unor interfețe atractive și portabile.
Piesa care leagă între ele serverele Web, browserele Web și paginile Web este URL -ul. ”[6]
“CSS, prescurtarea de la Cascading Style Sheets , sunt etichete folosite pentru formatarea
paginilor web (de exemplu formatare text, background sau aranjare în pagină , etc.).
Beneficiile sintaxei CSS sunt:
• formatarea este introdusa într-un singur loc pentru tot documentul
• editare a rapidă a etichetelor

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

15
• datorită introducerii î ntr-un singur loc a etichetelor se obține o micș orare a codului paginii,
implicit î ncărcarea mai rapidă a acesteia .
Sintaxa CSS este structurată pe trei nivele:
nivelul 1 fiind proprietaț ile etichetelor din documentul HTML, tip inline
nivelul 2 este informația introdusă în blocul HEAD, tip embedded
nivelul 3 este r eprezentat de comenzile aflate î n pagini separate, tip externe
Extensia acestor fisiere este .css.
Legătura paginilor HTML cu fișierele extene CSS se face prin introducerea urmatoarei linii:

Figura 1 Legătura paginilor HTML cu fișierul CSS
Atributele indica urmă toarele: rel – fișierul este tip styleshhet
type – tip text ce conț ine comenzi CSS
href – fișierul sau adresa fișierului CSS.
Elementele id și class
id și class sunt comenzi care dau unei formatăr i CSS un nume. Se folosesc atunci câ nd dorim să aplicăm
un style de formatare unei anume zone.
Elementul id se aplică unui style de format o singură dată sau la o singură etichetă HTML,
plasâ ndu-se un nume acelui style. Acest element necesită existenț a comezilor CSS în zona HEAD sau
într-un fiș ier extern.
Elementul class este similar cu id dar spre deosebire de acesta poate fi folosit de mai multe or i sau
pentru zone mai mari. Ca ș i la id necesită existența comezilor CSS î n zona HEAD sau într -un fiș ier
extern. ”[7]

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

16
2.4 Tehnologii PHP
PHP(Hypertext Preprocessor) este un limbaj de programare Open Source care se folosește în
special pentru a produce pagini WEB , folosindu -se în principal inclus într -un fișier HTML. La începutul
unui fișier php trebuie adăugat tag -ul <?php, dupa care se scriu instrucțiunile, iar la sfâr șit se adaugă tag-
ul ?>. Codu l scris este executat de server, generându -se paginile HTML care sunt trimise ulterior către
vizitator. Acesta poate vizualiza rezultatul scriptului, nefiind nevoit să înțeleagă codul interpretat de
browser.
“Pentru a putea lucra cu PHP trebuie în primul rând să avem acces la un server pe care rulează
PHP (acesta poate fi server separat sau server virtual creat pe calculatorul personal). Acest server (cel
virtual) poate fi instalat folosind pachetul WAMP care este free pe internet.
Combinarea codului HTML cu cod PHP:
Acest lucru se întâmpla foarte des. În interiorul unui script HTML poate exista script PHP de
limitat de etichetele <?php și ?> însă fișierul final trebuie să fie PHP.
Codul PHP este format din instrucț iuni – comenzi date către interpretor, în urma cărora se execută
ceva. Aș a cum s-a mai spus, PHP este folosit î n princi pal pentru a genera cod HTML, așa că de cele mai
multe ori instrucț iunile folosite sunt cele de afișare. În aplicații mai complexe se pot însă folosi ș i
instrucțiuni de conectare la bazele de date, de citire/scriere/manipulare fișiere, intrucțiuni de trimitere
email -uri și altele. Instrucțiunile se pot grupa î n blocuri delimitate de acola de { }. Aceste blocuri, numite
și "instrucțiuni complexe" se comportă ca și cum ar fi o singură instrucțiune.Toate instrucțunile (în afară
de blocuri) trebuie să fie terminate cu punct și virgulă ( ; ). Lipsa acestuia generează o eroare.
În multe din scripturile scrise de începatori (ș i nu numai) conținutul rezultat în urma execuției
este un text (de obicei î n format HTML). Pentru a obține acest text, secvențele de cod trebuie să conțină
instrucțiuni explicite care să "spună " intre pretorului ce anume trebuie afiș at.
Instrucțiunile de afiș are sunt print , echo și printf . Primele două sunt echivalent e și fac același
lucru (există unele diferențe de formă , dar poate fi folosită oricare dintre ele); printf este folosită mai rar
datorită sintaxei oarecum greoaie.
În majorita tea scripturilor PHP se lucrează cu bucaț i de text denumite șiruri de caractere sau
string -uri. Șirurile de caractere reprezintă expresii (entitați ce au/returnează o valoare) și pot fi folosite, la
afișare, î n atri buiri, la verifică ri, etc .”[8]

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

17
2.5 Noțiuni SQL
La proiectarea unei baze de date, trebuie ținut cont de orice detaliu legat de tabele, interogări,
pentru ce se u tilizează această bază de date ș i cum va fi structur ată. Proiectarea atentă si corectă este
esențială pentru a atinge cu exactitate scopurile utilizării unei baze de d ate.
Realizând baza de date, aceasta poate conține un singur tabel, dar in general, majoritatea bazelor
de date conțin mai multe tabele. De exemplu, o bază de date poate avea mai multe tabele care stocheaza
diferite informatii despre un magazin (produse, u tilizatori, comenzi, etc.).
“O bază de date stochează datele în tabele, care amintesc de foile de calcul tabe lar. Practic, un
tabel poate fi asimilat cu un fișier. De exemplu, o bază de dat e relațio nală aferen tă unei edituri poa te
include tabele precum c arte ș i autor.
MySQL este cel mai popular sistem de gestiune a bazelor de date destinat u tiliză rii cu PHP, în
mare masură deoarece este gratuit. Totuș i, prin intermediul PHP este posibil accesul la aproape orice
SGBD modern. Pentru aceasta, nu aveț i nevoie decât de un program – cunoscut sub nu mele de driver –
care se comportă ca o interfață între PHP ș i baza de date. Multe sisteme de gestiune a bazelor de date sunt
asociate cu pro grame driver care se conformează standardului ODBC (Open Database Connectivity) .
Aceste sisteme de gestiune a bazelor de date sunt accesibile prin intermediul caracteristicii ODBC a
limbajului PHP.
Independenț a datelor este un avantaj al bazelor de date care este dep ășit, ca importanță, numai de
partaja rea datelor. Când un program obține accesul la un fiș ier, datele sunt t ransferate programului în
aceeași manieră în care sunt stocate. Prin contrast, programatorii folosesc un limbaj special pentru a
solicita date dintr -o baza de date relațională . Programatorii pot solicita ca datele respective să fie
transferate în orice formă o doresc aceș tia, indiferent de modul de stocare a datelor, în particular,
programatorii pot solicita numai coloanele unui tabel necesare într -o anumită aplicaț ie.
Această caracteristică este importantă atunci c ând la o bază de date sunt adăugate coloane noi.
Datorită independenț ei datelor, progra mele existente anterior continuă să funcționeze și după modificarea
bazei de date. Prin contrast, adă ugarea unui câmp la un fiș ier impune, în general, revi zuirea fiecă rui
program care obține acces la fiș ier.
Bazele de date relaționale înț eleg limbajul SQL (Structured Query Language ), un limbaj relativ
simplu, folosit p entru solicitarea datelor. Totuși, în ciuda simplităț ii sale, SQL este un limbaj foarte

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

18
puternic, care poate obț ine accesul la date stocate în mai multe tabe le, poate filtra datele dorite și poate
sorta, rezuma și afiș a rezultatele.
Utilizând SQL, este posibil accesul la datele s tocate într -o bază de date relațională fără a scrie un
program de aplicație, permiț ând f recvent evitarea întârzierilor ș i a costurilor implic ate de programarea
personalizată. Astfel, bazele de date relaț ionale permit satisfacerea tutu ror cererilor ad -hoc de informații,
care ar ramâne fără raspuns în alte situaț ii.
În general, bazele de date relaționale protejează datele împotrivă accesu lui neautorizat. De
exemplu, fișierele care stochează tabelele relaț ionale pot fi accesibile numai pe ntru administratorul de
sistem ș i pentru un cont special de utilizator, creat pentru gestionarea bazei de date.
În general, sistemele moderne de gestiune a bazelor de date folosesc complexita tea pentru a da
iluzia simplității. Datorită , comp lexităț ii acestor a, în general este mai simplu să se scrie un program care
folosește o bază de date relațională decât să i se scrie un program echi valent din punct de vedere
funcțional, dar care folosește fișiere obișnuite. Mai mult, o aplicație scrisă folosind un SGBD va prezenta
mai puține defecte decât o aplicație echivalentă din punct de vedere funcțional, scrisă folosind fiș iere
normale.
În general, autorii sistemelor de gestiu ne a bazelor de date beneficiază de o bogată experiență, pe
care ș i-au utilizat -o prin crearea de pr ograme reutilizabile la car e alți programatori obțin acces prin
intermediul funcțiilor definite cu interfețe simple. Aș a cum un sistem de operare scuteș te progr amatorii de
necesitatea de a înț elege mecanismele detaliate de funcț ionare ale dispozitivelor hardware, o bază de date
relatională îi scuteș te pe prog ramatori de necesitatea de a înț elege o varietate de p robleme complexe care
pot apărea la partajarea datelor.
Când un utilizator încearcă să obțină acces la o bază de date relațională, SGBD verifică dacă
utilizatorul are permisiunea de a executa operaț ia. Administratorul de sistem poate folosi comanda
MySQL GRANT pe ntru a autoriza un utilizator să obțină accesul la un tabel din baza de da te. Comanda
are urmatoarea formă :
GRANT ALL ON tabel TO utilizator IDENTIFIED BY 'par ola';
Ca ș i PHP, sub -limbajul DML din SQL permite să se formeze expresii logice care combină
expresiile relaț ionale.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

19
SQL permite formarea unor expresii folosind valor i din coloane, valori literale și funcții. Ca și în
PHP, se poate controla ordinea de eval uare a expresiilor SQL folosind paranteze pentru a delimita sub –
expresiile care trebuie evaluate în prealabil. ”[9]
3. Tehnologii utilizate în dezvoltarea aplicației web
3.1 Proiectare și Design
Pentru crearea ș i editarea imaginilor folosite la produsele oferite de web site,cât ș i la logo -ul web
site-ului s-a folosit programul Adobe Photoshop CS6.
Adobe Photoshop CS 6 este un software produs de Adobe Systems, folosit pentru editarea
imaginilor digitale pe calculator.
Photoshop CS6 este principalul gamei de produse software pentru editarea de imagini,
fotografii, grafică, video ș i web.
Photoshop este un program care are o interfață intuitivă și permite o multitudine extraordinară
de modificări utile profes ioniștilor și nu numai: editări de luminozitate și contrast , culoare , aplicare de
efecte pe imagini sau pe selecții, retușare a unor imagini degradate, suport de canale de culoare pe 8, 16
sau 32 biți. Există diferite situații specifice în care un profesion ist în domeniu poate avea rezultate mai
rapide folosind alte pachete , însă pentru prelucrări generale de imagine , Photoshop este efectiv
indispensabil.
Avantajele acestui software prin care se diferenți ază de alte aplicaț ii sunt:
• Selecț iile
• Straturile ( La yers )
• Măștile ( Masks )
• Canalele ( Channels )
• Retușarea
• Optimizarea imaginilor pentru Web
Principală utilizare a photoshop -ului în crearea temei de licentă a fost redimen sionarea pozelor
downloadate dupa google folosite la produse astfel:

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

20

Figura 2 Redimensionarea pozelor în photoshop

De asemenea, s -a folosit Adobe Photoshop CS 6 si in crearea logo -ului:
Tool -ul text ,

Figura 3 Tool text photoshop
iar simbolul co șului de cumpără turi din logo a fost decupat din altă poză folosind :

Figura 4 Tool pentru decupare în photoshop
și adă ugat la logo, a stfel realizând logo -ul simplu ș i intuitiv .
Salvarea logo -uli s-a realizat cu exte nsia .png, d eoarece astfel se păstrează fundalul transparent.
Simbolul coșului de cu mpără turi a fost realizat pe un fundal gri cu un gradient din meniul
Blending Options:

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

21

Figura 5 Meniul Blending Options

Iar co șul de cumpărături fiind amplast în mijlocul
pătratului, care a fost realizat cu ajutorul shape -ului:

Figura 6 Tool shape photoshop
De asemenea layer -ele au fost denumite pentru un mod
de lucru mai organizat ș i pentru o editare ușoară a fișierelor în
caz de probleme.

Toate pozele alese pentru produse au fost realizate la rezoluția de 580×470 px.
Figura 7 Gruparea layer -lor
photoshop

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

22
Coșul de cumpă rături a fost realizat la rezoluția de 80 0x400 px, iar logo -ul la rezoluț ia de 204×63
px.
3.2 Tehnologii CSS/HTML
Pornind de la ideea creării unui aplicații web pentru un magazin on -line s -au folosit elemnte de :
• HTML
• PHP
• CSS
• MySQL
• JQue ry
• JavaScript

Ideea de baz ă a fost realizarea unui magazin on -line cu un design simplu, fără prea multe
informaț ii plictisitoare pentru utilizator .
Pentru a fi ușor de utilizat site -ul are o pagină principală care face legatură către celelalte pagini
import ante cum ar fi de exemplu pagina de î ntregistrare, pagina de logare sau pagina cu coșul d e
cumpărături de unde se poate ș i trimite comanda de produse dorite de cumpărător.
Documentul i ncepe cu importarea scriptului s pecific JQue ry, acesta se gă sește pe internet

Figura 8 Importarea scriptului JQuery
La accesare unei pagini î ntr-un browser, este afișat numele paginii respective în bara de sus,acesta
schimbâ ndu-se la momentul trecerii pe altă pagină . De exemplu:

Figura 9 Denumirea paginii

Acesta a fost denumit î n tag -ul <head> </head>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

23

Figura 10 Tag-ul title HTML
În continuare a fost inițializat corpul pri ncipal al site -ului. A fost împar țit în <div> -uri pentru a
ușura munca. Fiecare div din pagina principală, headerul cu logo -ul, p oza din dreapta cu coșul de
cupără turi, dar ș i butoanele cu link -uri către celelate pagini au fost stilizate separat pentru a nu avea
probleme.
Logo -ul con ține și un link către pagina principală, acesta fiind util cand se vrea trecerea dupa o
altă pagină pe cea principală.

Figura 11 Div-ul logo
De asemenea, link -ul pentru butoane le din header au fost adăugate î ntr-un <div> și făcută
legatura că tre paginile respective prin “href”.

Figura 12 Div-ul nav

În footer -ul paginii se afl ă date de contact adăugate prin tag -ul < p> care reprezintă paragraful.

Figura 13 Footer

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

24

Și la footer s -a lucrat tot cu <div> pentru o mai bună organizare și link -urile c ătre paginile cu
informa ții au fost ad ăugate sub form ă de list ă cu ajutorul <ul> și <li>.

Figura 14 Div-ul footer

Header -ul și footer -ul se gasesc pe toate paginile site-ului, mai puțin footer -ul care nu se regasește
pe pagina cu coșul de cumpărături.

Header -ul a fost setat în CSS la o înalțime de 21% din pagină:

Figura 15 Stilizarea header -ului în CSS
Corpul <html> a fost setat la înalțimea de 100% și poziționarea relativă.

Figura 16 Stilizarea html -ului în CSS

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

25
Pentru legăturile către link -uri s-a optat ca acestea să nu fie subliniate în momentul în care se
trece cu mouse -ul peste, deoarece aspectul este mult mai placut.

Figura 17 Stilizarea link -urilor
În continuare a fost creată pagina de înregistrare .

Figura 18 Formularul de înregistrare

Realizarea formularului a fost facută cu ajutorul funcției “form” cu o metodă “POST” pentru ca
datele introduse de utilizator să fie î n siguran ță în momentul transmiterii către baza de date, pun ând acest
form î ntr-un div.
Funcția required a fost folosită pentru ca utilizatorul să nu poată sări peste c âmpuri în momentul
completă rii formularului de înscriere . În cazul în care utilizatorul încearcă să sară un c âmp, chenarele
rămase necompletate de vin roșii ș i este atenționat de un mesaj :
“Te rugăm să completezi acest c âmp!”

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

26

Figura 19 Div-ul înregistrare

În cazul în care utilizatorul introduce un “Nume de utiliza tor” deja existent î n baza de date este
atenționat prin mesajul cu font rosu “Acest nume de utilizator există deja!”, iar dacă contul a fost creat
cu succe s mesajul este “ Contul a fost creat cu succes !” cu font verde.

Figura 20 Mesaj de confirmare

Figura 21 Mesaj de atenționare
Pentru securizarea datelor personale în cazul în care baza de date ar fi spartă, pentru parolă a fost
introdusă o funcție de criptare :

Figura 22 Criptarea parolei
Aceasta poate fi văzută în baza de date sub forma:

Figura 23 Afișarea parolei în baza de date

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

27
ea neput ând fi descifrat ă de cel care ar sparge baza de date.

Pagina a fost stilizată cu ajutorul CSS -ului (Cascading Style Sheets) folosind funcțiile specifice.
Schimb ând astfel și font -ul scrisului î n altul mai estetic.

Figura 24 Stilizarea clasei inregistrare

De asemenea, cu ajutorul CSS -ului și al funcției “hover” s -a realizat o tranziț ie a culori i butonului
pentru înregistrare . La acționarea mouse -ului peste buton culoarea acestuia devenind din albastru
deschis în albastru mai î nchis, cu o tranziție de 0.3 secunde.

Figura 25 Tranziție a buto nului de înregistrare

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

28

Tot cu ajutorul CSS -ului s -a putut st iliza și bara de navigare aflată î n header
Div-ul de clasa text conține informaț ii generale despre fiecare pagină în parte ș i este stilizat
folosindu -se atributul di splay : inline -block . Culoarea aleasă pentru scris a fost “whitesmoke”, iar pentru
background -ul header -ului gray.Pentru link -urile din header s -a optat pentru “text -decoration: none”.

Figura 26 Stilizare în CSS
Logo -ul aflat în partea stangă a header -ului a fost stilizat prin funcțiile padding -top, width, height,
pisition.

Figura 27 Stilizare logo
Pentru coșul de cumparaturi au fost folosite funcțiile width, height, float, margin -right.

Figura 28 Stilizare coș de cumpărături

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

29

În continuare s -a realizat pagina pentru conectarea utilizatorului (“Contul meu ”), dupa ce acesta
și-a creat un cont la secțiunea de “Înregistrare”. Fiecare inform ație introdusă la secțiunea de înregistare a
fost introdusă î n baza de date, iar în momentul accesării cont ului, utilizatorul este căutat î n baza de date
după datele ce au fost introduse de acesta î n formularul de înscriere.
În cazul î n care utilizatorul a uitat sau a gre șit “Nume le de utilizator” ori “Parola” î n momentul
introducerii acestora pentru logare, este avertizat printr -un mesaj cu font rosu: “ Numele de utilizator sau
parola sunt incor ecte! ”.
Daca utilizatorul omite sau încearcă să se c onecteze fără a completa c âmpurile aflate în
formularul de logare este avertizat prin înroșirea chenarelor formularului, unde acesta nu a completat ș i
printr -un mesaj : “Te rugam să completezi acest c âmp”.

Figura 29 Formularul de logare
După ce utilizatorul s -a conectat cu succes la baza de date este întâmpinat printr -un mesaj ce
apare în partea de sus a paginii sub forma “Salut , ….!”, unde punctele reprezintă nume le de utilizator
ales de acesta, urmat de b utonul de “Ie șire”. La acționarea acestui buton “Ieșire” utilizatorul este
redirecționat pe pagina de conectare. Funcția folosit ă la realizarea acesteia este:

Figura 30 Clasa logout

aflată î n <div> -ul de mai sus, de tip “submit”.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

30
O dată conectat butonul de conectare aflat pe bara de navigare din header dispare. Acesta
reapărând la acționarea butonului de “Ieșire”.

Design -ul este unul aseman ător cu cel al paginii de întregistrare, doar că aici formularul conține
“Numele de utilizator” și “Parola” necesare conectă rii.
Pagina a fost stilizată î n CSS cu diferite funcții, lucr ându-se la nivel de clas ă, predefinit ă în
fișierul de conectare , editâ ndu-se pe r ând textul, elementele din formular, dar și butonul de conectare
căruia i s -a aplicat o functie de tip “hover” la fel ca cel de la “ Înregsitare ”.

Figura 31 Stilizare clasei login
Pagina principală conține în tag -ul <body> un <div class=”container”> pentru a putea modifica
cu ușurință afișajul ș i poziționarea în interiorul site -ului. Conținutul din container este afi șat în mijlocul
paginii, conținâ nd mai multe tabele î n care se află produsele expuse spre vâ nzare.
În interiorul corpului principal al cont ainer -ului se află 3 funcții:
• Form action=” index.php?action=add&id= ” care este pentru a apela fucția î n momentul în care
butonul “Adaug ă în coș ” este acționat.
• Input type=”file” este zona în care utilizatorul va înc ărca fiș ierele ce doreș te să le u ploadeze din
baza de date, iar apoi pe site .
• Button type=”submit” este butonul care trimi te produsul ales de cumpărător î n coșul de cumpărături.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

31

Figura 32 Funcția action
Aspectul estetic al butonului de “Adaug ă în coș” aflat sub f iecare produs, a fost stilizat î n CSS,
astfel înc ât la acțio narea mouse -ului peste acesta își schimbă culoarea din deschis în mai î nchis.

Figura 33 Stilizarea butonului adauga

3.3 Tehnologii PHP
Pentru implementa rea aplica ției on -line s-a folosit PHP și baze de date MySQL pentru ca
utilizatorii să gasească mai ușor produsul dorit .
Cu ajutorul instrucțiunilor puse la dispoziție de limbajul de programare PHP ( Hypertext
Preprocessor ) s-a putut crea conectarea la baza de date “sho pping_cart ”.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

32

Figura 34 Conectarea la baza de date
După ce au fost ini țializat e variabilele, a fost creată o instrucț iune prin care se verifică dacă s-a
conectat sau nu la baza de date. În cazul în care conectarea la baza de date nu a reușit este afișat pe ecran
un mesaj: “eroare”.

Figura 35 Funcția de conectare la baza de date
Conexiunea la baza de date a fost realizat ă separat într-un fișier , deoarece numă rul de pagini php
care necesită o conexiune este mare, fiind mai ușor realizarea globală care doar trebuie apelat ă în fiecare
pagină .

Figura 36 Includerea fișierului conectare
După ce conectarea la baza de date a re ușit cu success, utilizatorul poate vizualiza produsele
disponibile la v ânzare.

Figura 37 Afișarea produselor în PHP

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

33
În timp ce utilizatorul vede pe ecran:

Figura 38 Afișarea produselor pe ecran
În fișierul index.php este inclus și fișierul footer.php. El este apelat prin funcția :

Figura 39 Includerea fișierului footer
Fișierul footer conține informația sub formă de liste, iar fiecare element al listei face trimitere
către un alt fișier în care i nformația este structurată tot într -o pagina php. La î nceputul paginii php a fost
adăugat și header -ul pentru ca utilizatorul să poată naviga între pagini cu ușurință. De asemenea, atunc i
când se navighează pe paginile din footer acesta nu dispare din parte de jos, utilizatorul put ând reveni
asupra informațiilor nefiind nevoit să folosească butonul “back” al browser -ului.
După ce utilizatorul și -a creat un cont nou, acesta se poate loga pe pagina ”Contul meu”, fiind
întâmpinat de un mesaj înainte de a completa formularul de logare. Mesajul este:

Figur a 40 Mesaj de întâmpinare
Codul pen tru acest mesaj a fost adăugat î n php folosind <h1>

Figura 41 Folosirea tag -ului <h1>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

34
După acest mesaj urmează formularul ce trebuie completat de către utilizator , acesta fiind creat cu
instrucțiunile puse la dispoziție de limbajul php.

Figura 42 Crearea formularului de conectare în PHP
Ceea ce vede utilizatorul este :

Figura 43 Formularul de conectare
În continuare, după ce formularul a fost completat utilizatorul trebuie să apese butonul de
”conectare”.

Figura 44 Butonul de conectare
În spatele acestei acținui are loc o interogare a bazei de date pentru a verifica corectitudinea
datelor int roduse de utilizator. În cazul î n care acesta a introdus datele nec esare logării c orect este
redireționat pe pagina principală (index.php).

Figura 45 Codul de redirecț ionare
În momentul în care cumpărătorul s -a hotăr ât asupra produsului pe care dorește să-l comande,
acesta trebuie să acționeze butonul ”Adaugă in coș” aflat sub produs. Produsul este trimis mai d eparte î n
coșul de cumpărături. Codul folosit la realizare este :

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

35

Figura 46 Adăga în coș în PHP
În timp ce cumpărătorul vede doar un buton.

Figura 47 Butonul de adaugă
Cantitatea minimă pentru un produs este setată la 1, put ând fi schimbată de cumpărător dacă
acesta î și dorește să achiziționeze mai multe produse de același fel. Ea trebuie setată în casuța aflată
deasupra butonului “Adaug ă în coș ”.

Figura 48 Modificarea cantității

De asemenea , cumpărătorul înainte de a se hotărî asupra produsului pe care urmează să -l
comande, acesta poate vizualiza detaliile printr -un simplu click pe poza respectivului produs.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

36

Figura 49 Exemplu de produs
Toate informațiile sunt specificate într-un tabel de genul :

Figura 50 Specificațiile produsului
Acest tab el a fost realizat cu ajutorul:

Figura 51 Realizarea tabelului cu specificații în PHP

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

37
Pentru a găsi mai ușor produsele aflate la promoție utilizatorul trebuie să acceseze butonul
“Promotii” aflat pe bara de naviga ție, din header.

Figura 52 Butonul de promotii
Tot î n header se află și o bară de căutare, pentr u ca utilizatorul să poată căuta mai simplu un
produs sau mai multe folosind doar numele acestora.

Figura 53 Bara de căutare
Înainte de a plasa comanda cumpărătorul trebuie să completeze formularul cu detaliile livrării, în
care îi sunt cerute : numele ș i prenumele persoanei care urmează să ridice comanda de la curier în
momentul livrării , adresa de livrare a comenzii, orașul, cod poștal și județul.

Figura 54 Formular
Dacă cumpăratorul se răzg ândește asupra canti tății produselor pe care vrea să le comande, acesta
poate modifica cantitatea c hiar din coșul de cumpărături fă ră sa fie nevoit să se întoarcă pe pagina
principală.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

38

Figura 55 Cantiatea doită

Prețul produsului apare în coșul de cumpărături afișat în funcție de c âte bucăți au fost adăugate,
iar la sf ârșit este afișat totalul de plată.

Figura 56 Prețul
În cazul în care cupărătorul dorește s ă șteargă un produs din coș pe care l -a adăugat din greșeala
sau nu și -l mai dorește să -l comande are posibilitatea să o facă folosind butonul “sterge”.

Figura 57 Butonul șterge
Această acțiune generează și un mesaj după ștergerea produsului, fiind realizată în php.

Figura 58 Funcția șterge

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

39
În momentul în care cumpărătorul s -a deci s asupa produselor ce dorește să le comande acesta
trebuie să apese butonul “Trimite comanda”, iar aceasta se înregistrează în baza de date.

Figura 59 Trimite
3.4 Proiectarea bazei de date
Un rând al bazei de date se numește înregistrare, iar fiecare coloană se numeste câmp. Un rând
conține date diferite despre aceeași înregistrare. O coloană conține același tip de date despre î nregistrări
diferite.

Figura 60 Câmpuri și înregistrari din baza de date

În exemplu, tabela “users”, fiecare rând conține informații despre un anumit user ( id, nume ,
prenume, adresa_email, telefon, username, password). Fiecare coloa nă conține informații despre toț i
useri înregistrați. De exemplu coloana “telefon” con ține numerele de telefon ale tuturor utilizatorilor .
Pașii care trebuie urmăriți î n crearea unei baze de date sunt:
• Scopul creării bazei de date.
• Informațiile necesare populării bazei de date.
• Împărțirea datelor în tabele.
• Alegerea cheilor primare.
• Crearea legăturile între tabele.
• Introducerea corectă a informațiilor în tabele.
Înainte de a crea o bază de date, indicat ar fi ca ideile principale să fie trecute pe o ciornă și de
asem enea cum se dorește să se utilizeze și de către cine.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

40
Pentru stocarea informațiilor introduse în baza de date s -a folosit XAMPP -ul, care este un pachet
de aplicații ce constituie infrastructura software nece sară găzduirii site -urilor web: server web (Apache),
server bază de date (MySql), interpretoare pentru scripturi î n PHP și PERL. XAMPP -ul înainte să fi e
folosit trebuie deschis ”XAMPP Control Panel Application” și pornite “Apache” și “MySQL” prin
apăsarea butoanelor “Start” din dreptul acestora.

Figura 61 XAMPP Control
Crearea bazei de date se face acces ând “local host/ phpmyadmin/”, apoi “New” aflat î n partea
stângă sus a bării de navigare

Figura 62 Creare bază de date

iar apoi trebuie ales un nume pentru baza de date care trebuie creată.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

41

Figura 63 Numele bazei de da te
După ce a fost creată baza de date se începe realizarea tabelelor necesare, care vor fi populate
ulterior cu datele necesare.
Tabelele se realizează tot prin acționarea butonului “New”, aflat sub numele bazei de date create.
În continuare se ale ge un nume pentru tabele și numărul de coloane î n funcție de datele necesare care
urmează a fi introduse î n tabel. După crearea tabelului se trece la denumirea coloanelor și s electarea
tipului de variabilă ș i a lungimii maxime care poate fi introdusă.

Figura 64 Creare tabel
Cheile primare sunt foarte importante reprezent ând identificatorii u nici a unor î nregistrări în baza
de date. Cheia primară reprezintă o valoare unică care nu se alterează niciodată. Ea se auto -increme ntează
cu fiecare nouă înregistrare.

Figura 65 Auto -incrementarea ID -ului

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

42
La realizarea bazei de date a aplica ției web pentru magazin online s -au folosit mai multe tabele,
ca de exemplu tabelul “users” care re ține d atele introduse de utilizatori î n momentul creări unui cont.
Acesta reține date precum un id unic, nume, prenume, adresa de e -mail, telefon, u n nume de utilizator și o
parolă . Id-ul este cheia primară și se auto -incrementează, av ând o lungime de 11 de tip int. At ât numele
cât și prenumel e au fost alese de tip varchar ș i de o lungime maxima de 255 de caractere.

Figura 66 Structura tabelului users
Informațiile din tabelul “users” care vor fi adăugate, se vor face printr -o inte rogare SQL de tipul
INSERT INTO users (….) VALUES (…..), unde punctele din prima parantez ă corespund c âmpurilor din
baza de date, iar cele din a doua paranteză variabilelor ce au informațiile introduse de utilizator.
Un alt tabel utilizat la a ceastă bază de date este tabelul ce reține detalii despre produse. Conținutul
coloanelor este format din id, care este cheia primară a tabelului, numele produselor, imagini și detalii
despre preț.
Tipul pentru numele și imaginile produselor a fo st ales de tip varchar cu o lungime de 255 de
caractere. Pentru preț s -a folosit tipul double cu o lungime de 10,2 caractere.

Figura 67 Structura tabelului product

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

43
În momentul a utentificării utilizatorul trebuie să introducă numele de utilizator și parola, apoi se
apasă butonul “Conectare” sau tasta ENTER de pe tastatură. În timp ce utilizatorul face un singur click pe
“Conectare” se întâmplă mai multe lucruri pe care utilizatorul nu le vede, cum ar fi : în primul r ând după
ce datele au fost introduse (nume de utilizator și parola) și apasă tasta ENTER, se face o interogare la
baza de date și se verifică dacă ex istă un cont identic cu numele ș i parola introduse. Codul este :

Figura 68 Interogare în bază de date
Dacă nu s -a găsit un cont identic cu datele introduse de utilizator se va afișa un mesaj de eroare,
iar codul pentru acesta este :

Produsele după prima pagină sunt afișate din baza de date printr -o interogare SQL de tip

Figu ra 69 Interogare SQL
unde simbolul * reprez intă selectarea tuturor informaț iilor din tabelul ”tbl _product” ordonate
asccendent după id.
Toate informațiile pe care utilizatorul le poate vizualiza pe site sunt stocate î ntr-o bază de date
numită “shopping_cart”. Aceasta este format ă din mai multe tabele ce conțin informații despre produse,
conturile utilizatorilor înregistrați, cumpărători și comenzi.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

44

Figura 70 Structura bazei de date
În tabelu l “tbl_customer” sunt re ținute date introduse de cumpărăt or în momentul în care acesta
completează formularul cu datele de livrare. Acesta conține un id unic care se auto -incrementează de
fiecare dată când apare un cumpărător nou. Acesta mai conține cinci coloane în care sunt reținute date
despre nume, adresă, oraș, codul poștal și județ.
Structura tabelului este următoarea :

Figura 71 Structura tabelului customer

4. Prezentarea aplicației – Magazin on -line
Aplicația realizată este de tip magazin on -line, iar aceasta a fost realizată cu scopul de a crea o
platformă nouă , ușor de folosit în care informațiile sunt bine structurate și dispuse într -o ordine, astfel
încat utilizatorul nu se plictisește cand accesează site -ul.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

45
Design -ul este un ul simplist ca la majoritatea magazinelor de acest gen, deoarece accentul se
pune mai mult pe con ținut si nu pe felul cum arată. Trebuie să nu conțină culori stridente, paleta de culori
să nu fie foarte diversificată astfel încat utilizatorul să nu fie deranjat vizual, ci dimpotrivă să fie atras și
să revină cu placere. Design -ul aplicației a fost realizat în CSS utilizand funcțiile acestuia.
Structura e ste de tip comerț electronic prin care se subânțelege orice formă de înț elegeri cu privire
la afa ceri, la care conlucrarea între părț i are loc în mod electronic în loc de schimb sau contact fizic între
părți și în urma căreia dreptul de utilizare sau proprietate a mărfii sau serviciului este transmis de la o
persoana la alta.
Meniul principal furnizea ză trimiteri ra pide și directe la secțiunile și informaț iile disponibile din
site-ul web. El este amplasat central în header, butoanele acestuia având o denumire clară a lo cului unde
se fac e legă tura la acționarea unuia dintre butoane .

Figura 72 Meniul de navigare
Accesul la pagina de start este asigurat din orice pagină a site -ului, p rin intermediul logo -ului.
Paginile web conțin următoarele elemente: texte, tabele, liste, imagini , butoane .
Pagina principală a fost den umită “Magcon Shop”, de oarece acesta este numele magazinului.

Figura 73 Denumirea paginii prinicipale
În partea superioară a acestei pagini se află inclus header -ul care conține meniul principal,
specificat mai sus, logo -ul, bara de căutare cât și simbolul coșului de cumpărături.

Figura 74 Header

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

46
Logo -ul a fost inclus în header cu ajutorul tag -ului <img src=” ”>, iar amplasarea acestuia la locul
dorit a fost realizat ă în CSS. De asemenea, i -a fost atașat și un link cu tag -ul <a href=” ”> prin care se
face leg ătura către pagina principală, fiind foart e util când utilizatorul se află pe altă pagină.
Bara de căutare ajută u tilizatorul la gă sirea unui produs sau mai multe, acesta scriind numele
produsului în secțiunea “Caută produs” după care trebuie să acționeze cu mouse -ul pe lupă. În continuare
produsul este căutat în baza de date în tabelul ”tbl_product”, iar dacă acesta este găsit este afișat.
Utilizatorul nu trebuie să știe numele produsului în totalitate, fiind de ajuns tastarea parțială a acestuia.
Coșul de cumparături a fost a tașat header -ului prin intermediul tag -ului <img src=” ”> și stilizat
în fișierul “style.css” de tip CSS, având atașat și un link către pagina cu produsele pe care acesta le -a
adăugat .

Figura 75 Simbolul coșului de cumpărături
Conținutul paginii este format din produsele aflate la vânzare dispuse în tabele ce conțin titlul cu
numele fiecărui produs, imaginea produsului, prețul, un chenar unde este specificată cantitatea dorită și un
buton numit “Adaug ă in cos ”.
Pentru ca utilizatorul să poată vedea mai multe informații despre produs acesta trebuia să dea
click pe imagine, el fiind redirecționat către pagina cu detalii. Un exemplu al acestei pagini este:

Figura 76 Imaginea produsului

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

47
iar în contin uare urmează tabelul cu specificații :

Figura 77 Specificatiile produsului
După ce utilizatorul a putut vedea detaliile ne cesare și s -a hotărât asupr a unui produs pe care
dorește să -l comande trebuie să acționeze butonul “Adauga in cos”.

Figura 78 Butonul de adaugă
În partea inferioară a paginii se află footer -ul ce conține informații ca :
”Date de contact” conținând numărul de telefon, faxul ut ile cumpăratorului pentru a lua, cu
ușurință, legătura cu d epartamentul de informații ;

Figura 79 Date de contact

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

48
”Companie ” în cadrul căreia se găsesc departamentele “Rela ții cli enți” și “ Reclamații ”

Figura 80 Companie
În cadrul paginii “Relații clienți” utilizatorul se poate informa despre programul de lucru și poate
contacta reprezentanți i departamentului pentru mai multe informații privind produsele.

Pe pagina “Reclamații” cumpărăorul este informat de numărul de telefon unde poate face sesizări.

“Ajutor” î n acest departament se g ăsesc informa ții despre gara nția produselor și o legătură că tre
site-ul ANPC (Autoritatea Națională pentru Protecția Consumatorului)
“Despre noi” cuprinz ând informații generale despre companie

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

49

și “Magazine” utilizator ul fiind redirecționat către pagina principală, fiindu -i util dacă dorește să se
întoarcă de la sfârșitul paginii la început .
Pagin a cu promoții a fost realizată î n PHP, iar aceasta conține produsele aflate la promotie. Tot
ceea ce trebuie să facă utilizatorul pentru a afla care sunt produsele aflate la promoție, este să acțione ze
butonul de “Promotii” aflat î n meniul de navigare din header.

Figura 81 Promoții
La fel ca pe pagina principală, produsele sunt afișate sub formă de tabel.

Figura 82 Produse aflate la promoție
De asemenea, întâlnim incluse header -ul și footer -ul.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

50
La crearea paginii “ Înregistrare ” s-au utilizat tehnologiile PHP, HTML, iar stilizarea s -a realizat
în fișierul “style.css” de tip CSS. Pentru crearea bazei de date s -a folosit tehnologia SQL, necesară
stocării datelor introduse de utilizator. Acestea sunt preluate și stocate în tabelul “users”.

Figura 83 Tabelul users
Pentru a se putea înregistra utilizatorul este nevoit să completeze un formular în care trebuie să
specifice nume, prenume, adresă de mail, telefon și să își aleagă un nume de utilizator și o pa rolă,
urmând să se conecteze cu acestea.

Figura 84 Formular de înregistrare
În cazul în care numele de utilzator ales există deja în baza de date, acesta este avertizat printr -un
mesaj și trebuie să -și aleagă altul.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

51
Este necesar ca toate câmpurile formularului să fie completate p entru a nu exista spații goale în
baza de date. A fost introdusă o masură de siguranță prin care dacă utiliz atorul sare un câ mp acesta se
face cu chenar ro șu și nu este lasat să se înregistrez e.
Și în această pagină se regăsesc header -ul și footer -ul.
Pagina de logare numită “Contul meu” este format ă dintr -un formular ale cărui câmpuri trebuie
completate cu numele de utilizator și parola alese în momentul creării contului. După ce au fost
compl etate c âmpurile utilizatorul trebuie să apese butonul cone ctare și să aștepte ca datele să fie căutate în
baza de date. Dacă au fost introduse corect se poate realiza logarea cu succes și este redirecționat către
pagina cu produse.

Figura 85 Înregistrare din tabelul users
Pentru ca utilizatorul să știe că este conectat s -a optat pentru ascunderea butonului “Contul meu”
și afi șarea unui mesaj de întâmpinare “Salut, ” urmat de numele să u și un buton de ieșire atunci când
utilizatorul dorește să se deconecteze.

Figura 86 Butonul de ieșire
Și această pagină a fost stilizată în fișierul “style.css”, iar realizarea s -a făcut cu ajutorul
tehnologiilor PHP și HTML, de asemenea s -a folosit și limbajul S QL pentru conectarea la baza de date.

Figura 87 Formularul de conectare
În pagina dedicată coșului de cumpărtături se află inclus header -ul, lipsind de această dată footer –
ul. În continuare se găsește un formular cu detaliile liv rării pe care cumpărătorul trebuie să îl completeze
pentru a putea trimite comanda.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

52

Figura 88 Formular cu detaliile livrării
Datele introduse în acest formular sunt înregistrate în tabelul “tbl_customer” din baza de date.

Figura 89 Înregistrare din tabelul customer
Pentru a vedea produsele adăugate în coșul de cumpărături utilizatorul trebuie s ă dea click pe
bulina roșie , care arată numărul de produse adăugate, aflată pe simbolul coșului.

Figura 90 Numărul de produse adăugate în coș
O dată acționat acest buton utilizatorul vede produsele afișate într -un tabel de forma:

Figura 91 Tabelul cu produsele adăugate

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

53
În acest tabel se găsesc informații legate de numele produsului adăugat, cantitatea produselor
dorite , prețul fiecărui produs, dar și totalul de plată. Dacă utilizatorul s -a razgândit în privița cantității pe
care dorește să o comande are posibilitatea să tasteze numărul de produse dorit.

Figura 92 Cantitatea produselor
În cazul în care acesta s -a razgândit asupra unui produs, poate renunța destul de ușor folosind
butonul de “șterge”.

Figura 93 Butonul șterge
Pentru a trimite comanda utilizatorul trebuie să acționeze butonul “Trimite comanda” .

Figura 94 Butonul trimite comanda
În continuare utilizatorul este înștințat de primirea comenzii printr -un mesaj de forma :”Comanda
a fost înregistrată! ”, iar acesta poate verifica dacă a fost înregistrată corect.

Figura 95 Detaliile comenzii

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

54
Comanda fiind înregistrată în tabelul:

Figura 96 Înregistrarea comenzii în baza de date
unde “order_id” reprezint ă număr ul de înregistrare al comenzii; ”customer_id” reprezintă id de
înregistrare al cumpărătorul ui; “creation_date” reprezint ă data când a fost trimisă comanda, iar
”order_status” reprezintă stadiul în care se află comanda,
iar produsele comandate apar în tabelul “tbl_order_details” :

Figur a 97 Detaliile comenzii în baza de date
unde “order_id” reprezint ă numărul de înregistrare al comenzii ; “product_name” reprezint ă numele
produsului ; “product_price” reprezint ă prețul, iar “produc t_quantity” reprezintă cantitatea comandată.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

55
5. Concluzii
În concluzie , prin dezvoltatrea aplicației s -a subliniat faptul că internetul are o importanță
deosebită în zilele noastre în domeniul comerțului, iar oportunitățile pe care le oferă acesta reprezintă o
prioritate pentru o firmă modernă mai ales în fața concurenței. Un web site este plătit o singură dată și
folosit permanent pentru vânzarea produselor, iar compania nefiind nevoită să plătească salariu lunar unui
personal pentru a putea vinde produsele. Oricând, web site -ul poate fi actualizat în funcție de produsele
aflate în stoc.
Un avantaj de subliniat al aplicației web – Magazin on -line este f aptul că se pot comanda produse
direct de acasă , astfel economisindu -se timp.
La baza acestei aplicații web al magazinului on -line stă limbajul de programare PHP ( Hypertext
Preprocessor ) care este un limbaj de scripting de uz general, cu cod -sursă deschis (open source), folosit de
foarte mulți, și care este potrivit pentru proiectarea unei aplicați i de comerț electronic pentru clienții care
dispun de un buget redus.
Aplicația web realizată reprezintă o mică parte din această lume imensă a limbajului PHP, în care
se dezvoltă tot felul de aplicații, dar o parte semnificativă deoarece folosirea acestei a ajută cumpărătorul
să economisească timp.
La realizarea aplicației au fost utilizate și limbaje precum HTML, CSS, JQuery și SQL.

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

56
6. Bibiliografie
– [1] – www.linkmagazine.ro revista on -line de IT&C și Finanțe;
www.afaceri.net – site specializat pe educarea și asistarea programatorilor de pagini web;
– [2] – http://team.salvaeco.org/nika/h/planificare.php
– [3] – http://team.salvaeco.org/nika/h/machetare.php
– [4] – http://team.salvaeco.org/nika/h/programare.php
– [5] – https://ro.wikipedia.org/wiki/JQuery
– [6] – http://www.ctptc -airinei.ro/catinfo/1Crearea%20site –
urilor%20web% 20partea%20I.doc
– [7] – http://www.seap.usv.ro/~valeriul/lupu/cursCSS.doc
– [8] – http://php.punctsivirgula.ro/basics/
– [9] – http://www.scritub.com/ stiinta/informatica/Noiuni -fundamentale -despre –
baz2041514156.php
– PHP 5 și MySQL pentru comerț electronic, autor : Darie Cristian, editura: TEORA, 2006
– MySQL. Utilizarea și administrarea bazelor de date MySQL, autor : Vaswani Vikram, editura:
ROSETTI EDUCATIO NAL, 2010

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

57
Cod Sursă
a. Cod pagină index.php
<?php
session_start();
$connect = mysqli_connect("localhost", "root", " ", "shopping_cart");
?>
<!DOCTYPE html>
<html>
<head>
<title>Magcon Shop</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script
src="https://maxcdn .bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet">
</head>
<body>

<?php include ("header.php"); ?>

<br>
<div class="container" style="width:800px;">
<div class="tab -content">
<div id="products" class="tab -pane fade in active">
<?php
$query = "SELECT * FROM tbl_product ORDER BY id ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

58
{
?>
<div class="col -md-4" style="margin -top:12px;">
<div style="border:1px solid #333; background -color:#f1f1f1; border –
radius:5px; padding:16px; height:350px;" align="center">
<a href="detail<?php echo $row['id'] ?>.php" class="btn btn"><img
src="<?php echo $row["image"]; ?>" class="img -responsive"></a><br>
<h4 class="text -info"><?php echo $row["name"]; ?></h4>
<h4 class="text -danger"><?php echo $row["price"]; ?> Lei</h4>
<input type="text" name="quantity" id="quantity<?php echo
$row["id"]; ?>"style="text -align: center;" class="form -control" value="1" />
<input type="hidden" name="hidden_name" id="name<?php echo
$row["id"]; ?>" value="<?php echo $row["name"]; ?>" />
<input type="hidden" name="hidden_price" id="price<?php echo
$row["id"]; ?> " value="<?php echo $row["price"]; ?>" />
<input type="button" name="add_to_cart" id="<?php echo
$row["id"]; ?>" style="margin -top:5px;" class="btn btn -warning form -control
add_to_cart" value="Adauga in cos" />
</div> <br>
</div>
<?php
}
?>
</div>
</div>
</div>
<br><br><br><br><br>
<?php include_once (' footer.php'); ?>
</body>
</html>
<script>
$(document).ready(function(data){
$('.add_to_cart').click(function(){

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

59
var product_id = $(this).attr("id");
var product_name = $('#name'+product_id).val();
var product_price = $('#price'+product_id).val();
var product_quantity = $('#quantity'+product_id).val();
var action = "add";
if(product_quantity > 0)
{
$.ajax({
url:"action.php",
method:"POST",
dataType:"json",
data:{
product_id:product_id,
product_name:product_name,
product_price:product_price,
product_quantity:product_quantity,
action:action
},
success:function(data)
{
$('#order_table').html(data.order_table);
$('.badge').text(data.cart_item);
alert("Produs adaugat in cos!");
}
});
}
else
{
alert("Please Enter Number of Quantity")
}
});
$(document).on('click', '.delete', function(){
var product_id = $(this).attr("id");

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

60
var action = "remove";
if(confirm("Are you sure you want to remove this product?"))
{
$.ajax({
url:"action.php",
method:"POST",
dataType:"json",
data:{product_id:product_id, action:action},
success:function(data){
$('#order_table').html(data.order_table);
$('.badge').text(data.cart_ite m);
}
});
}
else
{
return false;
}
});
$(document).on('keyup', '.quantity', function(){
var product_id = $(this).data("product_id");
var quantity = $(this).val();
var action = "quantity_change";
if(quantity != '')
{
$.ajax({
url :"action.ph p",
method:"POST",
dataType:"json",
data:{product_id:product_id, quantity:quantity, action:action},
success:function(data){
$('#order_ta ble').html(data.order_table);
}

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

61
});
}
});
});
</script>

b. Cod p agină înregistrare .php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF -8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstra p/3.3.6/js/bootstrap.min.js"></script>
<link href=https://fonts.googleapis.com/css?family=Lato rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>Inregistrare</title>
</head>
<body>
<?php include ("header.php");?>
<div class="inregistrare">
<br><br><br><br>
<h1>Autentificare</h1>
<form method="POST" action="include/signup.inc.php">
<input type="text" name="nume" placeholder="N ume*" required><br>
<input type="text" name="prenume" placeholder="Prenume*" required><br>
<input type="text" name="adresa_email" placeholder="Adresa de e -mail*"
required><br>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

62
<input type="text" name="telefon" placeholder="Telefon*" required><b r>
<input type="text" name="username" placeholder="Nume de utilizator*"
required><br>
<input type="password" name="password" placeholder="Parola*"
required><br>
<input type="submit" name="Inregistrare" value="Inregistrare" required>
</for m>
<?php

if (isset($_GET['info']) && $_GET['info'] == 'ok' ){
//daca info este steat sa afiseze mesajul urmator
echo '<p style="text -align: center; color: green; font –
size: 25px;">Contul a fost creat cu succes!</p>' ;
} else if (isset($_GET['info']) && $_GET['info'] == 'eroare') {
echo '<p style="text -align: center; color: red; font –
size: 25px;">A aparut o eroare!</p>';
}else if (isset($_GET['info']) && $_GET['info'] == 'exista') {
echo '<p style="text -align: center; color: red; font -size:
25px;">Acest nume de utilizator exista deja!</p>';
}
?>
</div>
</div>
<br><br><br><br>
<?php include_once ('footer.php'); ?>
</body>
</html>
<?php
include ( 'conectare.php');
if(!empty($_POST['nume']) && !empty($_POST['prenume']) &&
!empty($_POST['adresa_email']) && !empty($_POST['telefon']) &&
!empty($_POST['username']) && !empty($_POST['password']) && isset($_POST['nume']) &&

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

63
isset($_POST['prenume']) && isse t($_POST['adresa_email']) && isset($_POST['telefon']) &&
isset($_POST['username']) && isset($_POST['password'
{
$nume = $_POST['nume' $prenume = $_POST['prenume'];
$adresa_email = $_POST['adresa_email'];
$telefon = $_POST['te lefon'];
$username = strtolower($_POST['username']);
$password = $_POST['password'];

$password_hashed = password_hash($password, PASSWORD_DEFAULT);

$sql = "SELECT username FROM users WHERE username='$username'";
$result = mysqli_query($conectare, $sql);
$check = mysqli_num_rows($result
if($check > 0) {
header("Location: ../inregistrare.php?info=exista");
die();
} else {
$sql = "INSERT INTO users
(nume,prenume,adresa_email,telefon,username,password) VALUES ('$nume', '$prenume',
'$adresa_email', '$telefon' ,'$username', '$password_hashed')"; // comanda catre baza sa preia
valorile din variabila sql ce retine informati ile preluate din chenare

$result = $conectare ->query($sql);

header ("Location: ../inregistrare.php?info=ok");
}
} else {
header ("Location: ../inregistra re.php?info=eroare");
}
?>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

64
c. Cod pagină conectare .php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF -8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style/style.css">
<title>Contul meu</title>
</head>
<body>
<?php include ("header.php "); ?>

<?php
if(!isset($_SESSION['id'])) {
echo
'
<div class="login">
<div class="container">
<br><br><br><br>
<h1>Bine ai venit!</h1>
<form method="POST" action= "include/login.inc.php">

<input type="text" name="username" placeholder="Nume de utilizator*" required><br>
<input type="password" name="password" placeholder="Parola*" required><br>
<input type="submit" value="Conectare" required >

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

65
</form>
</div>
</div>
';
if (isset($_GET['info']) && $_GET['info'] == 'gresit') {
echo '<p style="text -align: center; color: red; font-size:
20px;">Numele de utilizator sau parola sunt incorecte!</p>';
}
} else {
}
?>
</body>
<?php include_once ('footer.php'); ?>
</html>

<?php
session_start();
require 'conectare.php.';

if(isset($_POST['username']) && !empty($_POST['username']) && isset($_POST['password'])
&& !empty($ _POST['password'])) {

$username = strtolower($_POST['username']);
$password = $_POST['password'];

$sql = "SELECT * FROM users WHERE username='$username'";
$result = mysqli_query($conectare, $sql);
$row = $result ->fetch_assoc();
$hash = $row['password'];

$check = password_verify($password, $hash);
if ($check == 0){
header("Location: ../login.php?info=gresit");

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

66
die();
} else {

$sql = "SELECT * FROM users WHERE username='$username' AND
password='$hash'";
$result = mysqli_query($conectare, $sql);

if(!$row = $result ->fetc h_assoc()){
echo 'Parola sau numele de utilizator sunt incorecte';
} else {
$_SESSION['id'] = $row['id'];
$_SESSION['nume'] = $row['nume'];
$_SESSION['prenume'] = $row['prenume'];
$_SESSION['username'] = $row['username'];
}
header("Location: ../index.php");
}
}
?>

d. Cod pagină cos.php
<?php
sessi on_start();
$connect = mysqli_connect("localhost", "root", "", "shopping_cart");
?>
<!DOCTYPE html>
<html>
<head>
<title>Cos de cumparaturi</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

67
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.
min.css" />
<script
src="https://maxcdn. bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet"> <! –Adaugarea fontului Lato –>
<link rel="stylesheet" type="text/css" href="style/st yle.css">
</head>
<body>
<?php include ("header.php"); ?>
<?php include ("form.php");?>
<br><br>
<div class="container" style="width:800px;">
<div class="tab -content">
<div id="cart" class="tab -pane fade">
<div class="table -responsive" id="order_table">
<table class="table table -bordered">
<tr>
<th width="40%">Produs</t h>
<th width="10%">Cantitate</th>
<th width="20%">Preț</th>
<th width="15%">Total</th>

</tr>
<?php
if(!empty($_SESSION["shopping_cart"]))
{
$total = 0;
foreach($_SESSION["shopping_cart"] as $keys =>
$values)
{
?>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

68
<tr>
<td><?php echo $values["product_name"]; ?></td>
<td><input type="text" name="quantity[]"
id="quantit y<?php echo $values["product_id"]; ?>" value="<?php echo
$values["product_quantity"]; ?>" data -product_id="<?php echo
$values["product_id"]; ?>" class="form -control quantity" /></td>
<td align="right"><?php echo $ values["product_price"]; ?>
Lei</td>
<td align="right"><?php echo
number_format($values["product_quantity"] * $values["product_price"], 2); ?>
Lei</td>
<td><button name=" delete" class="btn btn -danger btn -xs
delete" id="<?php echo $values["product_id"]; ?>">Șterge</button></td>
</tr>
<?php
$total = $to tal + ($values["product_quantity"] *
$values["product_price"]);
}
?>
<tr>
<td colspan="3" alig n="right">Total de plată</td>
<td align="right"><?php echo number_format($total, 2); ?>
Lei</td>
<td></td>
</tr>
<tr>
<td colspan="5" align="center">
<form method="post" action="cart.php">
<input type="subm it" name="place_order"
class="btn btn -warning" value="Trimite comanda" />
</form>
</td>
</tr>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

69
<?php
}
?>
</table>
</div>
</div>
</div>
</div>
</body>
</html >

<script>
$(document).ready(function(data){
$('.add_to_cart').click(function(){
var product_id = $(this).attr("id");
var product_name = $('#name'+product_id).val();
var product_price = $('#price'+produc t_id).val();
var product_quantity = $('#quantity'+product_id).val();
var action = "add";
if(product_quantity > 0)
{
$.ajax({
url:"action.php",
method:"POST",
dataType:"json",
data:{
product_id:product_id,
product_name:product_name,
product_price:product_price,
product_quantity:product_quantity,
action:action
},
success:function(data)

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

70
{
$('#order_table').html(data .order_table);
$('.badge').text(data.cart_item);
alert("Produs adăugat!");
}
});
}
else
{
alert("Număr cantitate")
}
});
$(document).on('click', '.delete', function(){
var product_id = $(this).attr("id");
var action = "remove";
if(confirm("Ștergeti produsul?"))
{
$.ajax({
url:"action.php",
method:"POST",
dataType:"json",
data:{product_id:product_id, action:action},
success:function(data){
$('#order_table').html(data.order_table);
$('.badge').text(data.cart_item);
}
});
}
else
{
return false;
}
});

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

71
$(document).on('keyup', '.quantity', function(){
var product_id = $(this).data("product_id");
var quantity = $(this).val();
var action = "quantity_change";
if(quantity != '')
{
$.ajax({
url :"action.php",
method:"POST",
dataType:"json",
data:{product_id:product_id, quantity:quantity, action:action},
success:function(data){
$('#order_table').html(data.order_table);
}
});
}
});
});
</script>

e. Cod pagină cart.php
<?php
session_start();
$connect = mysqli_connect("localhost", "root", "", "shopping_cart");
?>
<!DOCTYPE html>
<html>
<head>
<title>Detalii comanda</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2. 2.0/jquery.min.js"></script>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

72
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min
.css" />
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<br />
<div class="container" style="width:800px;">
<?php
if(isset($_POST["place_order"]))
{
$insert_order = "
INSERT INTO tbl_order(customer_id, creation_date, order_status)
VALUES('1', '".date('Y -m-d')."', 'In asteptare')
";
$order_id = "";
if(mysqli_q uery($connect, $insert_order))
{
$order_id = mysqli_insert_id($connect);
}
$_SESSION["order_id"] = $order_id;
$order_details = "";
foreach($_SESSION["shopping_cart"] as $keys => $values)
{
$order_details .= "
INSERT INTO tbl_order_details(order_id, product_name, product_price,
product_quan tity)
VALUES('".$order_id."', '".$values["product_name"]."',
'".$values["product_price"]."', '".$values["product_quantity"]."');
";
}

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

73
if(mysqli_multi_quer y($connect, $order_details))
{
unset($_SESSION["shopping_cart"]);
echo '<script>alert("Comanda a fost inregistrată!")</script>';
echo '<script>window .location.href="cart.php"</script>';
}
}
if(isset($_SESSION["order_id"]))
{
$customer_details = '';
$order_details = '';
$total = 0;
$query = '
SELECT * FROM tbl_order
INNER JOIN tbl_order_details
ON tbl_order_details.order_id = tbl_order.order_id
INNER JOIN tbl_customer
ON tbl_customer.CustomerID = tbl_order.customer_id
WHERE tbl_order.order_id = "'.$_SESSION["order_id"].'"
';
$result = mysqli_query($ connect, $query);
while($row = mysqli_fetch_array($result))
{
$customer_details = '
<label>Nume si prenume: '.$row["CustomerName"].'</label>
<p>Adresa: '.$row["Address"].'</p>
<p>Oras: '.$row["City"].', '.$row["PostalCode"].'</p>
<p>Judet: '.$row["County"].'</p>
';
$order_details .= "
<tr>
<td>".$row["product_name"]."</td>
<td>".$row["product_quantity"]."</td>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

74
<td>".$row["prod uct_price"]."</td>
<td>".number_fo rmat($row["product_quantity"]
*$row["product_price"], 2)."</td>
</tr>
";
$total = $total + ($ro w["product_quantity"] * $row["product_price"]);
}
echo '
<h3 align ="center">Comanda dumneavoastră Nr.'.$_SESSION["order_id"].'</h3>
<div class="table -responsive">
<table class="table">
<tr>
<td><label>Datele dumneavoastră</label></td>
</tr>
<tr>
<td>'.$customer_details.'</td>
</tr>
<tr>
<td><label>Comanda dumneavoastră</label></td>
</tr>
<tr>
<td>
<table class="table table -bordered">
<tr>
<th width="50%">Produs</th>
<th width="15%">Cantitate</th>
<th width="15%">Preț</th>
<th width="20%">Total</th>
</tr>
'.$order_details.'
<tr>
<td colspan="3" align="right"><label>Total de
plată</label></td>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

75
<td>'.number_format($total, 2).'</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
';
}
?>
<td colspan="5" align="center">
<form method="post" action="index.php">
<input type="submit" name="ok" class="btn btn -warning" value="OK" />
</form>
</td>
</div>

</body>
</html>

f. Cod pagină detail1.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Samsung galaxy S8</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min
.css" />

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

76
<script
src="https://maxcdn.bootstrap cdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link
href="https://fonts. googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<?php include ("header.php");?>
<br>
<div class="detail">
<h2>SAMSUNG Galaxy S8 64GB Midnight Black</h2>
<img src="imagini/1.jpg">
</div>
<br>
<div class="container">
<h2>Specificatii:</h2>
<table class="table table -bordered">
<thead>
<tr>
<th>Memorie</th>
<th>Baterie</th>
<th>Procesor</th>
<th>Foto video</th>
<th>Ecran</th>
</tr>
</thead>
<tbody>
<tr>
<td>Memorie interna: 64 GB </td>
<td>Autonomie convorbire: pana la 24 ore </td>
<td>Tip procesor: Octa Core </td>
<td>Rezolutie: 12 MP</td>
<td>Tip ecran: Super AMOLED capacitive touchscreen</td>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

77
</tr>
<tr>
<td>Memorie RAM: 4096 MB </td>
<td>Autonomie muzica: pana la 18 ore</td>
<td>Model procesor: Exynos </td>
<td>Rezolutie video: 3840 x 2160 </td>
<td>Dimensiune ecran: 6.2 inch</td>
</tr>
<tr>
<td>Slot card: microSD </td>
<td> Tip baterie: Incorporata </td>
<td>Frecventa: 2.3GHz,1.7GHz </td>
<td>Blitz: LED flash </td>
<td>Rezolutie ecran: 1440 x 2960 pixeli</td>
</tr>
<tr>
<td>Capacitate maxima card memorie: 256 GB</td>
<td>Cap acitate baterie: 3500 mAh </td>
<td></td>
<td>Camera secundara: 8 MP, Auto HDR </td>
<td>Protectie ecran: Corning Gorilla Glass 5 </td>
</tr>
</tbody>
</table>
<br><br><br><br><br>
</div>
</body>
<?php include_once ('footer.php'); ?>
</html>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

78
g. Cod pagină detail2.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>HUAWEI P10</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min
.css" />
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css " href="style/style.css">
<link
href="https://fonts. googleapis.com/css?family=Lato" rel="stylesheet">

</head>

<body>
<?php include ("header.php");?>
<br>
<div class="detail">
<h2>HUAWEI P10 64GB 4 G Dual SIM Black </h2>
<img src="imagini/2.jpg">
</div>
<br>
<div class="container">
<h2>Specificatii:</h2>
<table class="table table -bordered">
<thead>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

79
<tr>
<th>Memorie</th>
<th>Baterie</th>
<th>Procesor</th>
<th>Foto video</th>
<th>Ecran</th>
</tr>
</thead>
<tbody>
<tr>
<td>Memorie interna: 64 GB </td>
<td>Autonomie convorbire: pana la 24 ore </td>
<td>Tip procesor: Octa Core </td>
<td>Rezolutie: 12+20 MP</td>
<td>Tip ecran: LTPS </td>
</tr>
<tr>
<td>Memorie RAM: 4096 MB </td>
<td>Tip baterie: Li -Ion </td>
<td>Model procesor: Kirin 960 </td>
<td>Rezolutie video: 3840 x 2160 </td>
<td>Dimensiune ecran: 5.1 inch</td>
</tr>
<tr>
<td>Slot card: microSD </td>
<td>Tip baterie: Incorporata </td>
<td>Frecventa: 4 ×Cortex A73 2.4 GHz + 4 × Cortex A53 1.8 GHz</td>
<td>Blitz: Flash ( Dual color temperature flash) </td>
<td>Rezolutie ecran: 1080 x 1920 pixeli</td>
</tr>
<tr>
<td>Capacitate maxima card memorie: 256 GB</td>
<td>Capacitate baterie: 3200 mAh </td>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

80
<td></td>
<td>Camera sec undara: 8 MP f /9 (Tip lentila FF) </td>
<td>Multitouch: Multiple -point touch -sensitive screen </td>
</tr>
</tbody>
</table>
<br><br><br><br><br>
</div>
</body>
<?php include_once ('footer.php'); ?>
</html>

h. Cod pagină search.php
<?php
session_start();
mysql_connect("localhost","root","") or die("colud not connect");

$connect = mysqli_connect("localhost", "root", "", "shopping_cart");
mysql_select_db("shopping_cart") or die ("could not find db!");
$output = '';

if(isset($_P OST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0 -9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM tbl_product WHERE name LIKE
'%$searchq%'") or die ("could not search!");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'Nu s -au gasit produse!';
}
}

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

81
?>
<!DOCTYPE html>
<html>
<head>
<title>Produse</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="te xt/css" href="style/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet">
</head>
<body>
<?php include ("header.php"); ?>
<br>
<div class="container" style="width:800px;">
<div class="tab -content">
<div id="products" class="tab -pane fade in active">
<?php
$query = "SELECT * FROM tbl_product WHERE name LIKE
'%$searchq%'";
$result = mysq li_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
?>
<div class="col -md-4" style="margin -top:12px;">
<div style="b order:1px solid #333; background -color:#f1f1f1; border –
radius:5px; padding:16px; height:350px;" align="center">
<a href="detail<?php echo $row['id'] ?>.php" class="btn btn"><img
src="<?php echo $row["image"]; ?>" class="img -responsive"></a><br>

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

82
<h4 class="text -info"><?php echo $row["name"]; ?></h4>
<h4 class="text -danger"><?php echo $row["price"]; ?> Lei</h4>
<input type="text" name="quantity" id="quantity<?php echo
$row["id"]; ?>"style="text -align: center;" class="form -control" value="1" />
<input type="hidden" name="hidden_name" id="name<?php echo
$row["id"]; ?>" value="<?php echo $row["name"]; ?>" />
<input type="hidden" name="hidden_price" id="price<?php echo
$row["id"]; ?>" v alue="<?php echo $row["price"]; ?>" />
<input type="button" name="add_to_cart" id="<?php echo
$row["id"]; ?>" style="margin -top:5px;" class="btn btn -warning form -control
add_to_cart" value="Adauga in cos" />
</div> <br>
</div>
<?php
}
?>
</div>
</div>
</div>
<br><br><br><br><br>
<?php include_once ('footer.php') ; ?>
</body>
</html>

<script>
$(document).ready(function(data){
$('.add_to_cart').click(function(){
var product_id = $(this).attr("id");
var product_name = $('#name'+product_id).val();
var product_ price = $('#price'+product_id).val();
var product_quantity = $('#quantity'+product_id).val();
var action = "add";
if(product_quantity > 0)

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

83
{
$.ajax({
url:"action.php",
method:"POST",
dataType:"json",
data:{
product_id:product_id,
product_name:product_name,
product_price:product_price,
product_quantity:product_quantity,
action:action
},
success:function(data)
{
$('#order_table').html(data.order_table);
$('.badge').text(data.cart_item);
alert("Produs adaugat in cos!");
}
});
}
else
{
alert("Please Enter Number of Quantity")
}
});
$(document).on('click', '.delete', function(){
var product_id = $(this).attr("id");
var action = "re move";
if(confirm("Are you sure you want to remove this product?"))
{
$.ajax({
url:"action.php",
method:"POST",

Universitatea din Craiova Facultatea de Automatică, Calculatoare și Electronică
Aplica ție web pentru magazin on -line

84
dataType:"json",
data:{product_id:product_id, action:action},
success:function(data){
$('#order_table').html(data.order_table);
$('.badge').text(data.cart_item);
}
});
}
else
{
return false;
}
});
$(document).on('keyup', '.quantity', function(){
var product_id = $(this).data("product_id") ;
var quantity = $(this).val();
var action = "quantity_change";
if(quantity != '')
{
$.ajax({
url :"action.php",
method:"POST",
dataType:"json",
data:{product_id:product_id, quantity:quantity, action:action},
success:function(data){
$('#order_table').html(data.order_table);
}
});
}
});
});
</script>