Capitolul 1. Introducere ………………………….. ………………………….. …………… 1 Capitolul 2. Obiectivele Proiectului… [631649]

Cuprins
Capitolul 1. Introducere ………………………….. ………………………….. …………… 1
Capitolul 2. Obiectivele Proiectului ………………………….. ………………………. 2
Capitolul 3. Stud iu Bibliografic ………………………….. ………………………….. … 4
3.1. Scurt Istoric ………………………….. ………………………….. ………………………….. ……….. 4
3.2. Ce este comerțul electronic? ………………………….. ………………………….. …………….. 4
3.3. Avantajele comer țului electronic ………………………….. ………………………….. ………. 4
3.3.1. Avantaje le companiei ………………………….. ………………………….. ……………….. 4
3.3.2. Avantajele cumpărătorului ………………………….. ………………………….. ………… 5
3.3.3. Avantajele comerciantului ………………………….. ………………………….. …………. 5
Capitolul 4. Analiză și Fundamentare T eoretică ………………………….. ……. 6
4.1. Tehnologii și l imbaje folosite ………………………….. ………………………….. …………… 7
4.1.1. HTML ………………………….. ………………………….. ………………………….. ………… 7
4.1.2. CSS ………………………….. ………………………….. ………………………….. ……………. 7
4.1.3. Limbajul PHP ………………………….. ………………………….. ………………………….. 8
4.1.4. Limbajul Javascript ………………………….. ………………………….. …………………… 9
4.2. Framework -uri ………………………….. ………………………….. ………………………….. …. 10
4.2.1. Boostrap ………………………….. ………………………….. ………………………….. ……. 11
4.3. Google Maps APIs ………………………….. ………………………….. ………………………… 11
4.4. Serverul Web Apache ………………………….. ………………………….. ……………………. 13
4.5. Sistemul de gestiune al bazei de date ………………………….. ………………………….. . 13
Capitolul 5. Proiectare de Detaliu si Implementare ………………………….. 15
5.1. Arhitectura aplica ției ………………………….. ………………………….. …………………….. 15
5.2. Structura bazei de date ………………………….. ………………………….. …………………… 16
5.3. Serverul Web ………………………….. ………………………….. ………………………….. …… 19
5.4. Interfata Web ………………………….. ………………………….. ………………………….. …… 19
5.5. Parți componente ………………………….. ………………………….. ………………………….. 21
5.5.1. Meniul cu produsele ………………………….. ………………………….. ……………….. 21
5.5.2. Antetul magazinului ………………………….. ………………………….. ……………….. 22
5.5.3. Pagina cu produsele ………………………….. ………………………….. ………………… 27
Capitolul 6. Testare și Validare ………………………….. ………………………….. . 35
Capitolul 7. Manual de Instalare și Utilizare ………………………….. ……….. 36
Capitolul 8. Concluzii ………………………….. ………………………….. …………….. 39
Bibliografie ………………………….. ………………………….. ………………………….. .. 40

Capit olul 1
1
Capitolul 1. Introducere
Aplicațiile utilizate în comerțul eletronic î n zilele noastre au luat o amplo are
foarte mare deoarece ne aflăm într -o perioadă î n care tehnologia este la un n ivel cum
nu a mai fost niciodată î n istorie. P ricipalii factori pentru care aplicațiile pentru
comerțul electronic sunt din ce î n ce mai folosite sunt: costurile de realizare,
întreț inerea, spațiul folosit, numă rul mic de angajaț i.
Datorită dezvoltării tehnologiei ș i a ind ustriei, foarte multe compan ii își
deschid magazine în toată lumea pentru a onora comenziile î ntr-un timp foarte scurt.
Din cauza distanței foarte mari î ntre mag azine o evidență corectă a stocurilor,
angajaț ilor, a comenzilor efectuate, a numărului de clienți este foarte dificilă .
De exemplu stocurile într -un magazin de talie internațională sau chiar
națională pentru a le efectua durează zile sau chiar săptămâ ni uti lizând resurse umane
cît și materiale, rat a unor erori fiind foarte mare ținând cont că toate produsele sunt
evidenț iate manual de persoane care pot să greșească și într -un final să producă
pierderi materiale magazinului.
Pentru a menține o evidență corectă a celor menț ionate mai sus multe
companii fie dezvoltă fie achiziționează platforme online care să ușureze munca și ce l
mai important să țină o evidență corectă .
Platformele online utilizate în comerț ul electronic sunt d e mare folos deoarece
simplifică felul î n care se fac comenzile , fiecare client are la dispoziție î ntreaga ofer tă,
de unde poate să își aleagă, respectiv nu trebuie să ia legătura cu un operator pentru
anumite informații și să aștepte după alți clienț i.
Principalul factor al succesului unei platforme online utilizate de că tre o
companie este publicitatea, care î n primele lu ni de la lansarea ei este vitală. Datorită
acestui factor platforma online este promovată la o scară foarte mare de persoane, care
poate din curiozita te acceseaza platforma, iar mulți ajung să achiziț ionez e produse sau
chiar să promoveze platforma la persoanele pe care le cunosc.
Trăind în tr-o perioadă în care timpul aproape că nu ne ajunge tot mai multe
persoane doresc ca timpul liber pe care il au la dispoziție să il folosească pentru a
petrece timp cu familia, pentru a se re laxa, nu pentru a merge la cumpărături. Datorită
și acestui factor necesitatea unei platforme online este foarte necesară aceștia putând
să achiziț ioneze produse sau servicii din fața calculatorului fără să piardă timp la
coadă la magazin sau prin a glomeraț ia din marile oraș e.
Un alt factor pe care î l constituie folos irea unei platforme online de către o
persoană care dorește să facă cumpără turi este posibilitatea de a desc hide coletul cu
produsul achiziționat la primirea acestuia și de al returna î napoi dacă acesta nu
corespunde cu produsul comandat sau este deteriora t.
Produsele sau serviciile oferite pe o platforma onlin e sunt mai ieftine deoarece
numărul de angajaț i este mai mic , nu trebuie să stea la casa de marcat multe persoane
pentru procesarea c omenzilor, aceasta fiind facută automat.
Ținând cont de aceș ti factori am ales dezvoltarea un ui modul din ceea ce
înseama o plaformă online pentru comerțul electronic , constând în vâ nzarea de
produse.

Capitolul 2
2
Capitolul 2. Obiectivele Proiectului
Tema proiectului const ă în realizarea unei aplicații web utilizate în comerț ul
electronic folosind limbaje de programare și cunoștințe despre realizarea unei aplicații
utilizate în acest domeniu studiate î n decursul anilor de facultate.
Cu toate că o aplicație î n domeniu l electronic cuprinde o mulțime de module și
modalităț i de lucru, mi-am prop us să realizez un modul din ceea ce înseamna o
aplicație pentru comerțul electronic.
Modulul pe care doresc să î l realizez se bazează pe vâ nzarea de produse din
domeniul informatic, în care un utilizator poate accesa aplicaț ia prin intermediul unui
browser .
Principalele funcționalități ale aplicaț iei pe care mi le -am propus să le realizez
sunt:
– filtrarea în funcț ie de categorii ;
– adăugarea produselor într -un coș de cumpără turi cu posibilitatea ca
la sfarșitul cumpărăturilor să poată să vizualizeze toate prod usele
adăugate , prețul ș i cantitatea , acestea fiind calculate automat ;
– posibilitatea de ac hiziționare atâ t pe bază de utilizator și parolă cât
și fără acestea ;
– pentru fiecare produs posibilitatea de vizualizare a specificaț iilor și
a părerilor text cât ș i video de la utilizatorii care au achiziț ionat
produse;
– folosirea hărț ilor de la google maps pentru a vizualiza zonele din
care s-au lăsat pă reri pentru un produs ;
– actualizarea stocului î n timp real la trmiterea unei comenzii ;
– istoric comenzi pentru utiliza tori autentificaț i.
Pentru administrator :
– posibilitatea de a vizualiza istoricul comenzilor efectuate de
utilizatori ;
– adăugare ș i editare de produse ;
– eliminare pă reri;
– după trimiterea fizică a comenzii utilizatorului, posibilitatea de a
elimina comanda din istoricul comenzilor.
Deoarece domeniul acesta e ste foarte dezvoltat sunt o mulțime de platforme
online create î n aces t sens, de aceea mi -am propus să dezvolt unele funcționalității
care să o facă mai deose bită de celelalte platform e online existente.
Una din funcționalitățile aplicației care doresc să o facă mai deosebită de
celelalte platforme online constă în folosirea hărț ilor de la google maps pentru a
evidenț ia zonele din care s -a comandat produse precum ș i zone le persoanelor care au
lasat pă reri des pre un anume produs.
Studiind mai multe platforme online , mi-am propus dezvoltarea unei
funcționalități care nu se găseș te pe multe platform e online de acest gen, acesta ar fi
adăugarea de păreri video la produse î n care sa fie exprimata parerea si conditi ile in
care s-a primit un produs comandat.
Fiind f oarte multe platforme online, găsirea unei forme ș i a unui mod de
utilizare a f ost foarte dificila ș i a presupus analiza mai multor module sau platforme
online .
Făcând o analiză amănunțită am realizat un mo d de utilizare foarte simplu care
să permită celor care accesează modulul cu scopul de a achiziționa produse, să poată

Capitolul 2
3
sî facă acest lucru î ntr-un timp foarte scurt fără să fie nevoie de foarte mulți paș i, cum
ar fi intrarea în coșul de cumpără turi pentru a modifica cantitatea produselor adăugate
sau înregistrarea unui cont pentru finalizarea comenzii.
Datorită analizei efectuate am realizat posibilitatea ca la ad ăugarea în coșul de
cumpărături să se poată alege cantitatea dorită , iar pentru finalizarea co menzii să nu
mai fie nevoie de înregistrarea u nui cont, aceasta fiind posibilă doar prin completarea
uni formular cu datele de livrare respectiv facturare .
Schema următoare constă în paș ii pe care un u tilizator trebuie să îi parcurgă
pentru a achiziț iona unul sau mai multe produse:

Figura 2.1 Pași achiziț ionare produse

Partea de administrare a aplicaț iei realizate, este fo arte intuitiv ă și simplă de
utilizat . Accesarea panoului de administrare nu se face dintr -o alta pagina, separată de
aplicația realizată .
La autentificarea administratorului , apar unele funcționalităț i cu ajutorul
carora acesta poate administra aplicaț ia într-un mod ordonat.

Capitolul 3
4
Capitolul 3. Studiu Bibliografic
3.1. Scurt Istoric
Apari ția comerț ului electronic s-a format pe durata a mai mulți ani , începând
cu anii 60 câ nd s-a dezvolat setul de standarde Electronic Data I nterchange (EDI)
pentru tranzacțiile electronice. Î n anul 1992 a apărut browserul Mosaic curâ nd
devenin d o versiune care se putea descărca cu ușurință cu numele de Netscape.
În anu l 1995 apar prime le companii care folosesc comerțul electronic
Amazon.com și Ebay.com, care și î n prezent sunt printre cele mai ma ri companii
care folosesc comerț ul electronic.
În România comerțul electronic a apărut la sfarșitul anului 1999 continuând să
se dezvolte foarte mult în anii ce au urmat ajungând în zilele noastre la un numă r mare
de companii ce folosesc acest tip de afacere.
3.2. Ce este comerț ul electronic?
Comerțul electronic reprezintă procesul de cumpărare, vâ nzare sau schimb de
bunuri, informați i sau servicii utilizând o reț ea de calculatoare sau internetul.
Comerț ul poate fi analizat din patru puncte de vedere: din punct ul de vedere al
comunicaț iilor reprezentâ nd furnizarea de informaț ii, produse, servicii, plăț i, utilizând
linii telefonice, re țele de calculatoare , din punctul de vedere al proceselor de afaceri
reprezentâ nd o aplicație tehnologică î ndreptată spre automatizarea proceselor de
afaceri ș i a fluxului de lucru , din punctul de vedere al serviciilor care se adresează
dorinț elor firmelor , consumatorilor și managementului î n vederea reducerii costurilor
și creșterii calității bunurilor ș i a vitezei de servire, ș i din pu nctul de vedere al
accesibilităț ii în timp .
3.3. Avantajele comer țului electronic
Comerț ul electronic este unul dintre cele mai importante aspecte ale
Internetul ui deoarece permite oamenilor să cumpere instantaneu, fără interdicții în
ceea ce priveș te timpu l și distanțele. Oferă cumpărătorilor posibilitatea să
achiziționeze bunuri și servicii la orice oră din zi și noapte fără a f i nevoiți să
folosească mijloacele tradiț ionale (telefon, fax, mail).
Avantajele utilizării comerț ului electronic pot fi analizate din trei puncte de
vedere: a l companiei, al consumatorului și al societăț ii.
3.3.1. Avantajele companiei
Princpalele avantaje ale c ompaniei sunt:
– extinderea zonelor de activitate , compania fiind capabilă să -și
localizeze ușor și rapid clienț ii, furnizorii potriv iți și cei mai buni
parteneri de afaceri;
– creșterea vitezei de comunicare;
– îmbunătățirea eficienț ei, datale fiind î n format e lectronic reduc
posibilele erori de tastare;
– reducerea timpului de realizare a inventa rului, acesta fiind foarte mic ș i
poate fi rea lizat de puț ine personae;
– reducerea costurilor de creare și stocare a informațiilor bazate pe hâ rtii;
– întărirea relaților cu furnizorii și clienții, legătura dintre ei fiind rapidă ;

Capitolul 3
5
– oferirea de informații despre modificările apărute î ntr-un timp scurt .
3.3.2. Avantajele cumpără torului

La fel ca și în cazul companiei și cumpără torul are numeroase avantaje
utilizând comerț ul electronic , acestea fiind:
– posibilitatea de a face cu mpărături rapid și la orice oră ;
– căutarea produselor și serviciilor î ntr-un timp scurt, cu pos ibilitatea de
compara preț urile;
– transport rapid al produselor î n special cele digitale ;
– efectuarea de licitaț ii virtua le;
– comoditate sporită .
3.3.3. Avantajele comerciantului
Avantajele comerciantului sunt:
– atragerea de noi clienț i prin intermediul unui can al de distribuț ie,
– permite persoanelor să lucreze de acasă, traficul ș i poluarea fiind
reduse,
– facilitează furnizarea d e servicii publice, cum ar fi sănătatea, educaț ia,
distribuirea serviciilor sociale ale guvernelor la un cost redus .

Capitolul 4
6
Capitolul 4. Analiză și Fundamentare Teoretică
La început Web -ul a fost conceput cu sc opul de a trimite documente, apărând
în cadrul său protocolul HTTP și formatul HTML. La î nceputul anilor 1990 s -a
realizat prima dezvoltare folosind un server web.
O aplicaț ie Web este un program care ru lează într -o arhitectură client -server
folosind tehnlogiile Word Wide Web.
Figura următoare prezintă arhitectura unei ap licații web:

Figura 4.1 Arhitectura unei aplicaț ii web

Primul nivel este construit dintr -o interfață grafică î n care serverul trebuie sa
asamble ze datele intr -o forma afișabilă .
Al doilea nivel este cel î n care clientul trimite o cerere că tre serveru l web care
implementează printr -un scri pt sau un program logica aplicației folosind un set de
interogări. Cel mai cunoscut ș i utilizat server web din lume este Apache.
Ultimul nivel , serverul de baze de date returnează serverului web un număr de
rânduri ca re la rândul lui afișează ră spunsul clientului.
Studiind mai multe limbaje de programare, am ales limbajul PHP pentru al
folosii la implementarea aplicației din mai multe motive.
Primul motiv ar fi popularitatea de care se bucură este foarte mare, conform
statisticilor este instalat pe 20 de milioane de site -uri web ș i 1 milion de servere web.
Al doilea motiv ar fi caracteristicil e importante pe care le are față de celelalte limbaje
de programare, cum ar fi:
– familiaritate , sintaxa limbajului fiind ușoară combi nând sintaxele
unora din cele mai poluare limbaje Pearl sau C;
– simplitate , sintaxa nu necesită includerea unor biliblioteci sau
directive de compilare codul executându -se î ntre m arcajele
corespunză toare;
– eficiență , PHP -ul folosindu -se de mecanisme de alocare a res urselor,
fiind foarte necesare în mediul multiutilizatorilor, aș a cum este web -ul;
– flexibilitate , nefiind legat de un anumit server web, PHP -ul poate fi
integrat pe numeroase servere web: Apache, Zeus, IIS, etc.;
– securitate ¸ este disponibil un set de măsuri de siguranță la dispoziț ia
programatorului;
– gratuitate , fiind probabil cea mai importantă caracteristică a PHP -ului.

Dezvoltarea PHP -ului sub licență open -source a det erminat adaptarea rapidă a
PHP-ului la nevoile web -ului.

Capitolul 4
7
4.1. Tehnologii și limbaje folosite
4.1.1. HTML
Hyper Text Markup Language e ste un limbaj de marcare standard folosit
împreună cu CSS pentru a creea pagini web și interfețe pentru aplicaț iile mobile.
HTML descrie structur a unui site web incluzâ nd indicii pentru prezentarea sau
aspectului unei pagini web facându -l mai degrabă un limbaj de marcare decat un
limbaj de programare.
HTML este un format de tip text con struit pentru a putea fi citit ș i editat cu
ajutorul unui editor de text simplu. Principalele editoare de text folosite pent ru a creea
pagini web cu ajutorul HTML sunt: KompoZer, CoffeCup, Notepad++ ș i
SublimeText. Majoritatea aplicaț iilor de e -mail folosesc un editor HTML pentru
compunerea e -mail-ulilor.
Paginile HTM L sunt formate din etichete ș i au extensia “html” sau “htm”.
Struc tura unui document HTML are următoarea formă :
<html>
<head>
</head>
<body>
</body>
</html>
Secțiunea <head></head> se plasează între tag -urile <html> și <body> ,
conținutul fiind format din meta -date, titlul doc umentului, script -uri, stil uri și multe
altele care nu se afișează în pagină dar influențează conț inutul paginii Web.
A doua sec țiune <body></body> se plasează î ntre tag -urile </head> si </hml> ,
conținâ nd toate elementele unui document HTML, c um ar fi text, imagini, tabele ș i
liste.
4.1.2. CSS
Cascading Style Sheets este un limbaj foaie de stil folosit pentru a descrie
modul î n care elementele HT ML ale unui document vor fi afișate pe ecran, hârtie sau
în alte medii. CSS lucrează împreună cu HTML astfel că nu se poate crea o pagină
web doar cu CSS.
Conținutul unui fișer CSS trebuie să fie separat de fișierul HTML avâ nd
extensia .css pentru a ofe rii paginii HTML flexibilitate și control î n specificarea
caracteristicilor de prezentare . Acesta poate fi încorporat și într -un fiș ier HTML.
CSS are o sintaxă simplă li foloselte cuvinte cheie în englezp pentru a
specifica numele proprietăț ilor de stil.
Sintaxa unui fișier CSS trebuie să conțină un selector, și una sau mai multe
declaraț ii sep arate prin punct și virgulă. O declaratie CSS este compusă d intr-o
proprietate și o valoare separate prin două puncte, după cum se arată î n exemplul de
mai jos:
#paragraf {
color : blue;
font-size:12px ;
}

Pentru a descrie un element din HTML folosind exemplul de mai sus la
elementul dorit se specifica id-ul din fiș ierul CSS, respectiv id=”paragraf ”.

Capitolul 4
8
4.1.3. Limbajul PHP
Primele programe fo losind limbajul PHP au început în anul 1995 câ nd Rasmus
Lerdorf a scris mai multe programe de Common Gateway Interface pe care le -a
utilizat pentru pagina sa personală .
PHP s au “Hypertext Preprocessor ” este un limbaj de scripting web “open –
source” care poate r ula pe Linux, Windows XP, UNIX și pe o mulț ime de alte sisteme
de operare folosite mai rar. Este considerat unul dintre cele mai simple ș i mai
eficiente limbaje de tip sc ripting, rea lizat pentru dezvoltarea aplicațiilor web care să
poată interacționa cu utilizatorul și care poate fi introdus î n codul HTML.
PHP a dezvoltata t multe cadre software care oferă blocuri de construcție și o
structură de proiectare pent ru a facilit a dezvoltarea rapidă a aplicaț iilor. Prin cipalele
cadre software create î n acest sens sunt Laravel, ZendFrameword, Codeignite ,
Symfony, etc.
Extensia fisierelor care con țin scritp turi PHP trebuie să fie .php , .php3 sau
php3 , acestea fiind interpretate de s erverul web iar rezultatul este trimis în formă de
text sau cod HTML browser -ului.
Limbajul PHP având o sintaxă relativ simplă structura codului nu este impusă
astfel încât codul poate fi scris î n orice editor de text cum ar fi Notepad. Unul dintre
cele ma i utilizate editoare de text pentru a scrie cod PHP este NetBeans.
Cand PHP interpret ează un fișier se uită după tagurile de deschidere si
închidere, acestea fiind <?php si ?>, care indică când PHP începe și termină
interpretarea codu lui dintre ele. Inter pretarea în această maniera permite PHP -ului să
fie încorporat î n tot felul de documente, pentru că orice este în afară de perec hiile de
tag-uri de deschidere și î nchidere este ignorant .
Codul PHP este ex ecutat pe server generand un fiș ier HTML care este trimis
clientului. Clientul va primi răspunsul rulării scriptului fără a putea avea acces la
codul sursă .
Scripturile PHP sunt utilizate î n trei domenii importante. Primul domeniu este
scripting de partea serverului, pentru a funcț iona sunt necesesare trei lucruri
analizatorul PHP, serverul web ș i un navigator web, al doilea domeniu este scripting
în linie de comandă care nu necesită un server web ș i navigator web fiind necesar
doar analizatorul PHP, iar utim ul domeniu este scrierea aplicaț ilor de birou.
Pentru a trimite informaț ii la serverul web sunt folosite două metode GET ș i
POST. Metoda GET trimite informaț iile la cererea paginii. GET nu poate fi utilizat
pentru a trimite date binare, cum ar fi imagini documente Word la server. M etoda
POST nu are nci o restricție în ce privește mă rimea datelor care urmeaza a fi trimise.
Spre deosebire de metoda GET, metod a POST poate trimite cod ASCII ș i date binare.
Folosirea sesiunilor î n PHP o feră modalități de a păstra date la accesă ri
ulterioare ale script -ului, r ealizând aplicații personalizate .
Funcțiile PHP se aseamană cu funcț iile din alte limbaje de programare, avănd
sintaxa urmă toare:
function nume_funcț ie (parametrii){
codul ce trebuie executat
}
Numele funcției nu poate sa începa cu un numă r. PHP -ul are peste 1000 de
funcții predefinite. O funcție este un bloc de declaraț ii care pot fi utilizate ori de câte
ori este necesar într -un program. Funcția se execută atunci câ nd o p agină se încarcă .

Capitolul 4
9
4.1.4. Limbajul Javascript
JavaScript a fost dezolvatat de c atre B rendan Eich in anul 1995 într -o perioadă
de numai 10 zile î n timp ce lucra pentru Netscape Communication Corporation. Iniț ial
limbajul a fost numit oficial Livescript câ nd a fost expediat î n versiuni beta ale celor
de la Netscape Navigator î n septembrie 19 95, da r a fost redenumit JavaScript când a
fost implementat î n versiunea Netscape 2.0B3.
Cu toate că la început nu a fost agreeat de toți programatorii cu experiență
JavaScript a devenit unul dintre cele mai populare limbaje de programare Web.
Împreună cu HTML ș i CSS, JavaScript este unul din tre cele trei tehnologii de
bază pentru producția mondială de conț int Wide We b. Majoritatea site -urilor Web îl
folosesc și funcționează fără problem e pe toate browserele moderne fără plug-in-uri.
JavaScript poate fi pl asat atât în secțiunea de <head> cât și un secț iunea de
<body> al unei paginii HMTL.
JavaScript este un limbaj de programare orientat pe obiecte, cu drepturi
depline care atunci c ând este aplicat unui document HTML oferă interactivitate
dinamică web-ului.
Întrucât HTML definește structura și conținutul unei pagini web și CSS
setează formatarea și aspectul, JavaScript adaugă interactivitate pentru o pagină web
și creează aplicaț ii web bogate.
Principalele caracteristici ale utilizarii JavaScript sunt:
– inter acțiune puț ină cu serverul , datele introdu se de utilizator sunt
validate î nainte de a trimite pagina la server, traficul pe server fiind
redus;
– răspuns imediat pentru utilizatori , nu trebuie să aștepte să se încarce
o pagină dacă au uitat să introducă ceva;
– interactivitate crescută , permite crearea de interfețe care reacționează
când utilizatorul tr ece cu mouse -ul peste ele sau să le activeze de la
tastatură ;
– interfeț e mai bogate , permite utilizare a de componete „drag -and-
drop” ș i glisoare pentru a da o int erfață mai bogată pentru v izitatotii
site-ului sau aplicaț iei create.
Instrucțiunie î n JavaScript sunt numite declarații ș i sunt separate p rin punct și
virgulă, spațiile, tab -urile ș i cara cterele newline fiind numite spaț ii libere.
Funcțiile sunt blocuri f undamentale în JavaScript. O funcție este o procedură
JavaScript – un set de instrucțiuni care efectuează o cerință sau calculează o valoare.
O funcție se definește la începutul fișierului în secț iuena <head></heaed>
pentru a fi si guri ca aceasta a fost în carcată înainte de a fi apelată .
Sintaxa unei funcții în JavaScript arată în felul urmă tor:

function nume_funcț ie (parametrii){
codul ce trebuie executat
}
O funcție JavaScript nu este executată imediat, ea poate fi executata atunci
când este semn alat acest lucru sau câ nd utilizatorul face clic pe un bu ton sau introduce
anumite date î ntr-un input.
Următorul exemplu de funcț ie efect uează un calcul și returnează rezultatul:

<p id=”prod”></p>
<script>

Capitolul 4
10
function Produs (a,b) {
return a * b;
}
document.getElementById (“ prod”).innerHTML= Produs ( 4, 3)
</script>

jQuery este o blibliotecă JavaScript care simplifică foarte mult progra marea
JavaScript și este usor de învăț at. jQuery ia o mulț ime d e sarcini commune, care
necesită multe linii de cod în JavaScript și le înfășoară î n mai multe metode care
ulteri or pot fi apelate. jQuery oferă posibilitatea programatorilor de a crea plug -in-uri
pe partea de sus a bibliotecii JavaScript. Acest lucru permite dezvo ltatorilor să creeze
abstractiză ri, interacț iune cu nivel scăzut și animație, efecte avansate și la nivel înalt,
widget -uri.
Bibliote ca jQuery conț ine urmă toarele caracteristicii:
– manipulare CSS;
– metode de evenimete HTML;
– efecte și animaț i;
– cereri de tip AJAX;
– extensii.
Estensiile sunt cele mai impo rtante aspect e ale jQuery. Arhite ctura permite
programatorilor să dezvolte subaplicaț ii bazate pe biblioteca principal ă care extinde
funcțiile de bază jQuery . În acest fel bibliot eca principală ocupă foarte puțin spațiu,
iar extensiile în anumite pagini we b pot fi încărcate la cerere atunci câ nd este nevoie
de ele.
Ajax este prescurtarea pentru Asynchronous JavaScript and XML , și este o
tehnică pentru a creea aplicaț ii web interactive. Cu ajutorul Ajax pagi nile web devin
mult mai rapide ș i mai acceptate.
Ajax nu este o tehnologie, ci un grup de tehnologii care pot fi folosite pentru a
pune în aplicare o aplicație Web care comunică cu un server fără a interfera cu starea
curentă a paginii.
Cu ajutorul Ajax poț i efectua o serie de operaț ii importante care cu alt limbaj
de programare ar dura mai m ult sau ar fi nevoie de mai mulți pași. Operaț iile
importante sunt:
– actualizarea unei pagini fără a fi nevoie de reîncă rcarea paginii;
– solic ită date de la server după încă rcarea paginii;
– primeș te date de la server dup a încărcarea paginii;
– trimite date la server .
4.2. Framework -uri
Cuvantul englez Framework, defineș te un ansamblu standardizat de c oncepte,
practici care se aplică asupra unui tip particular de problemă .
În dezvoltarea software un framework reprezintă o arhitec tură de software care
modelează relaț iile generale ale site -ului. Un framework include programme de
sprijin, compilatoare, seturi de instrumente care reunesc componentele diferite, pentru
a permite dezvoltarea unui proiect.
Un Framework ajută programatori i să dezolte aplicații web mai rapide, și
viteza de execuție să fie mai bună decat la aplicațiile dezvoltate fără un Framework.
Framework -urile conț in chei distinctive care le separă de bibliotecile normale.

Capitolul 4
11
4.2.1. Boostrap
Boostrap a fost iniț ial numit Twitter Blueprint, a fost dezvoltat de Mark Otto
și Jacob Thornton la Twitter pe ntru a încuraja consecvență între instrumentele interne.
După câ teva luni de dezv oltare acesta a fost redenumit în Boostrap, ș i lansat ca un
proiect open -source la data de 19 august 2 011.
Boostrap est e un framework front -end liber ș i open -source pentru pro iectarea
de aplicații web și site -uri. Conț ine HTML, template -uri de design baz ate pe CSS,
butoane, formulare ș i extensii JavaScript. Spre deosebire de multe framework -uri
boostrap se referă la dezvoltarea front -end.
Structura constă î n principal dintr -o serie de foi de lucru care implementează
diferitele componente pent ru foile de stil. Boostrap oferă un set de foi de lucru, care
oferă definiț ii de stil pentru toate componetele im portante din HTML. Acestea oferă
un aspect modern pentru tabele, elemente de formular ș i formatare text.
Principalele avantaje ale utiliză rii acestui Framework sunt:
– ușor de utilizat , oricine care are cunoștinte de baza de HTML și CSS
poate să utilizeze Boostr ap;
– caracteristici responsive , posibilitatea de ajustare a site -ului,
aplicaț iei web la te lefoane, tablete ș i desktop -uri;
– compatibilitatea browser -ului, este compatibil cu toate browserele
moderne.
Pe langă componentele obișnuite de HTML, Boostrap conșine butoane cu
funcț ii avansate, etichete, mesaje de avertiz are (de exemplu butoane cu funcț ia drop –
down).
Componenta de JavaScript vine în formă de plugin -uri jQuery, oferind
elemente suplimentare de interfață de utilizator, cum ar fi casetele de dialog,
ponturile. Acestea exitind funcț ionali tatea unor elemente de interfață existent e (de
exemplu funcția de auto -complete pentru câ mpurile de introducere).
Un document HTML care foloseș te Boostrap are următoarea structură :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="utf -8">
<meta name ="viewport" content ="width=device -width, initial –
scale=1" >
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/css/bootstrap.min.css">
</head >
<body>
</body>
</html >
4.3. Google Maps APIs
Google Maps APIs este un serviciu care oferă geocodificare ș i geocodifi care
inversă de adrese.
Geocodificarea este pro cesul de conversie a adreselor î n coordonate
geograf ice reprezentate de latitudine ș i longitudine, care se pot utiliza pentru a plasa
markeri pe hartă sau poziț ia.

Capitolul 4
12
Geocodificarea inversă este procesul de conver sie a coordonatelor geografice
într-o adresă ce poate fi citită (ex. Baia Mare). Acest serviciu oferă posibilitatea de a
găsii adresa pentru un anumit loc în funcț ie de id -ul zonei.
Google Maps APIs ofera o modalitate directă de a avea acces la aceste servici
printr -o solicitare HTTP. O cerere APIs Goole Maps are forma
https://maps.googleapis.com/maps/api/geocode/ou tputFormat?parameters .
Unde outputFormat?parameters este format din:
– JSON , indică ieșirea î n JavaScript Object Notation;
– XML , indică ieșirea î n XML.
Parametrii necesari pentru o solicitare de geocodificare sunt:
– Adresa , adresa de stradă pentru care se do rește geocodificarea, în
formatul utilizat de către serviciul poș tal național al țării în cauză;
– Tasta , cheia API a aplicației realizate. Această cheie identifică
aplicația în scopul gestionă rii cotelor.
Tipurile de chei Google Maps APIs sunt disponibile p entru Android, IOS,
borwsere Web cât ș i prin intermediul serviciilor Web HTTP.
Hărțile afiș ate p rin intermediul serviciului conțin elemente de interfață care
permit interacț iunea utilizatorului cu harta. Cele mai importante controale ca re se pot
utiliza s unt:
– Control Zoom , afișează + ș i – butoa ne care permit modificare a
nivelului de zoom al hărț ii;
– Controlul tipului hartii , permite utilizatorului să aleagă un tip de
hartă (ROADMAP, SATELIT, HIBRID, TERENUL);
– Street View de control , conț ine o pictograma “P egman” care poate fi
tras pe hartă pentru a activa Strees View;
– Controlul rotire , oferă posibilitatea utilizatorului , de inclinare ș i
rotire a imaginilor ;
– Controlul pe tot ecranul , oferă posibilitatea de a deschide harta pe tot
ecranul.
Anumite controale apar pe hartă în mod implicit î n timp ce unele nu apar
numai dacă se face o solicitare î n mod specific. Adă ugarea sau eliminarea
controalelor se află în câ mpurile obiectului MapOptions , pentru a le face vizibile
trebuie setat adevarat , sau false pentru a l e ascunde.
Un marker identifică o locație pe hartă, acesta foloseș te o imagine standard,
dar se poat utiliza imagini personalizate dacă sunt denumite pi ctograme. Markerii sunt
concepuți pentru a fi interactivi, permițând să afișeze informaț ii pesonalizate
Cu ajutorul Google Maps APIs se pot ad ăuga diverse forme pe hartă, linii,
pictograme, cercuri și dreptunghiuri. Există ș i posibilitate a de a configura forme
personalizate .
Straturile sunt obiecte de pe hartă care constă din unul sau mai multe elemente
distincte fiind manipulate de o singură unitate. Straturile reflectă, în mod general,
colecții de obiecte care se adaugă în partea de sus a hărții pentru a desemna o asociație
comună .
O hartă termografică este o vizualizare folosită pentru a descrie intensita tea
datelor la punctele geografice, a tunci câ nd este activat ă, o suprapunere de culoare va
apărea în partea de sus a hărț ii. Implicit zonele de intesitat e mai mare vor fi de culoare
roșie, ia r zonele de intensitate mai mică de culoare verde.
Freegeoip.net oferă un API HTTP pentru a geocodific a adresele IP. Acesta
folosește o bază de date de adres e IP care sunt asociate orașelor, împreună cu alte
informaț ii cum ar fi fusul orar, latitudinea ș i longitudinea.

Capitolul 4
13
Este limitat la doar 10000 de cereri pe oră, odată ce această limită este atinsă ,
toate solicitarile v or avea ca rezultat HTTP 403, până când cota este ștrearsă .
Solicitarea unu i API HTTP GET este reprezentată în următoarea schemă :
freegeoip.net/{format}/{IP_or_hostname }, formatele suportatate sunt CSV,
XML, JSON.
4.4. Serverul Web Apache
Pentru m ulți găzduirea unor site -uri web fără Apache este de neconceput.
Putem concluziona că pentru unii internetul fără Apache este de neconceput.
Dezvoltarea Apache a început la începutul anului 1995, jucând un rol cheie în
creșterea World Wide Web. Î n anul 2009, a devenit primul software de tip server de
web pentru a servii la peste 100 de milioane de site -uri web.
Prima versiune a fost creată de R obert McCool, care era implicat î n proiectul
National Center for Supercomputi ng Applications. A doua versiune a ser verului a fost
o rescriere, punându -se accentul pe crearea unui layer prior itar (Apache Portable
Runtime) ș i a suportului de module.
Apache este dezvoltat de o echipă de programatori sub emblema Apache
Software Foundat ion, fiind disponibil pe o mare varietate de sisteme de operare, cum
ar fi Linux, Unix, Mac OS X, Microsoft Windows si OS/2.
Apache este un server HTTP open -source, fiind cel mai folosit s oftware din
lume. Acesta suportă o varietate mare de module care îi extind funcț ionalitatea,
aceastea varia ză de la server side programming și până la scheme de autentificare.
Principalii competitori al serverului Apache sunt Mircosoft Internet Services,
Sun Java System Web Server si Zeus Web Server.
O calitate importantă a serverului Apache este virtual hostin g-ul, care oferă
posibilitatea de a gă zduii mai multe site -uri simultan pe acelasi server.
4.5. Sistemul de gestiune al bazei de date
MySQL a apă rut la data de 23 mai 1995, f iind creat de o companie suedeză,
MySQL AB fonda tă de David Allan Larsson ș i Michael Wi ndenius. Iniț ial a fost creat
pentru uzul personal din SQL pe ISAM limbaj de nive l scăzut.
MySQL este un sistem de man agement la bazelor de date relaționale open
source ș i este cel mai folosit sistem de baze de date c u PHP. Comunicarea cu MySQL
se face cu ajutorul interogarilor limbajului SQL.
Datele într -o bază de date MySQL sunt stocate în tabele, fiecare conținând
coloane și rânduri. Identificatorii î n MySQL sunt: baza de date, tabelul, indexul,
coloana, aliasul, pr ocedura stocată ș i alte nume de obiecte.
Fiecare tabel corespunde cu cel puțin un fiși er din directorul bazei de date, în
funcț ie de motorul de stocare.
Regulile MySQL în ce priveș te numele bazei de date, tabele ș i coloane sunt:
– numele nu poate avea mai mu lt de 64 de caractere ;
– caracterele perm ise sunt litere, cifre, bară jos (fără spaț ii);
– numele poate conține cifre, dar nu poate conț ine numai cifre;
– un tabel nu poate avea doua coloanae cu acelasi nume ș i o baza de date
nu poate avea două tabele cu acealaș i nume;
– numele tabelelor ș i coloanelor sunt case -sensitive.
Principalele caracteristici ale MySQL sunt:
– flexibilitatea , MySQL ofera suport pntru majoritatea sitemelor de
operare;

Capitolul 4
14
– putere de procesare , cuprinde funcț ii SQL de nivel enterprise, cach e
pentru interogari, replicare ș i indexarea tex tului în formă completă ;
– securitatea , este caracterizată printr -o mulț ime de metode de
configurare ce permit control ul total asupr a tuturor aspectelor implicate
în operarea bazei de date;
– costul , MySQL este gratuit.

Capitolul 5
15
Capitolul 5. Proiectare de Detaliu si Implementare
5.1. Arhitectura aplica ției
Fișierele ce compun arhitectura aplicaț iei au diferite extensii, .php , .js, .css și
.png, sortante în funcț ie de categoria lor. Pentru editarea fiș ierelor cu extensia .php
am folosit ca ș i editor de text NetBeans. Figura de mai jos repr ezintă arhitectura
aplicaț iei:

Figura 5.1.1 Structura aplicaț iei

Directorul css conține foile de stil pentru elementele HTML. Directorul img,
conține sigla pentru coșul de cumpără turi, background -ul aplicaț iei și sigla aplicaț iei.
Directorul js, conține toate fișierele de tip JavaScript . Directorul poze conține pozele
în format png și jpg a produselor. Directorul video , conține materialele video
încarcate la adăugarea de păreri . În rădă cina directorului Magazin sunt fiș ierele de tip
php care reprezintă paginiile din aplicaț ie.

Capitolul 5
16
5.2. Structura bazei de date
Pentru gestionarea bazei de date am folosit aplicaț ia numita SQLyog . Baza de
date se numeș te „shop ” și este alcatuită din 6 tabele cu nume reprezentative . În
continu are voi prezenta pe scurt fiecare tabel și structura lui .
Primul tabel se numeș te categorii , aici sunt stocate categoriile ș i
subcategoriile produselor:

Figura 5.2.1 Tabelul categorii

Al doilea tabel se numeș te comenzi , aici sunt stocate comenziile , atât a
utilizatorilor care au cont cât și a celor care au comandat fără să aibă un cont.

Figura 5.2.2 Tabelul comenzi

Al treilea tabel se numeș te comenzi_detalii , aici sunt stocate detaliile
comenzilor, constând în cantitatea, prețul ș i produsul comanda t.

Figura 5.2.3 Tabelul comenzi_detalii

Capitolul 5
17
Al patrulea tabel se numeș te produse , aici sunt stocate detaliile fiecă rui
produs , constînd în numele, descrierea, preț ul, cantitatea, categoria din care face parte
și starea lui . Câmpul inactiv marchează dacă un produs nu mai face parte din stoc.
Dacă valoarea lui este 0 pr odusul face parte din stoc, dacă este 1 nu face parte din
stoc.

Figura 5.2.4 Tabelul produse
Al cincelea tabel se numeș te reviewuri , aici sunt stocate părerile clienț ilor cu
pivire la un pro dus achiziționat cât ș i coordonatele ș i ip-ul zonei din care a lasat s -a
părere. Coordonatele ș i ip-ul fiind folosite la localizarea utilizatorului și marcarea pe
hartă a zonei.

Figura 5.2.5 Tabelul reviewuri

Ultimul tabel se numeș te utilizatori , aici sunt stocate informaț iile utilizatorilor
care au cont. Utilizatorul cu id -ul egal cu 1 este administrator ș i are dreptul de a
administra aplicația după cum se prezintă în urmă toarele subcapitole.

Capitolul 5
18

Figura 5 .2.6 Tabelul utilizatori

Fiecare tabel conț ine un câ mp cu n umele „ID” care este cheie unică, acesta
permite ca informațiile din tabel să nu fie duplicate și într -un final să afișeze în
aplicaț ie date eronate.
Legatura dintre tabele este prezenta tă în urmă toarea diagrama:

Figura 5.2.7 Legatura dintre tabele

Capitolul 5
19
5.3. Serverul Web
Serverul web este serverul care stochează pagini web și le pune la dispoziția
solicitanților prin protocolul HTTP, relația server -client fiind stabilită de serverul de
web Apache în cazul aplicaț iei.
Pagina db.php , este cea mai importantă pagină deoarece face posibilă
conxiunea cu baza de date , fără această pagină aplicația nu poate funcț iona. Legatura
paginii db.php cu celelalt e pagini din arhitectura aplicaț iei se face prin urmatoarele
linii de cod:

Figura 5.3.1 Legătura cu pagina db.php

La accesarea link -ului http://localhost/magazin (pentru aplicația instalată pe
local) , serverul rulează liniile de cod din pagina index.php , care afișează categoriile ș i
toate produsele existente cât și partea static a aplicaț iei.
Pagina session.php construieș te automat o sesiune cu ID unic, pentru a pute a
fi deosebite comenziile clienț ilor.
Pagina produse.php , afișează informaț iile generale cu privire la produsele
afișate la rularea paginii index.php . Pagina detaliiprodus.php , afișează detaliile
produs elor și pă rerile.
Pagina review , afiș ează formularul pentru adăugarea de părere ș i butonul de
revenire la pagina cu detaliile produsului.
Pagina cos.php , afișează produsele adă ugate în coș și but onul care face
legătura cu pagina plata.php în care apare formularul pentru finalizarea comenzii .
Login.php , afișează formularul de autentificare a utilizatorilor și butonul de
înregistrare cont nou care face legă tura cu pagina cont.php , în care se afișeaz ă
formularul de adăugare sau dacă utilizatorul este autentificat, pagina cu informaț iile
utilizatorului.
Pagina produs.php și subcategorii.php afișeaza butoanele și formularul
pentru administrarea aplicției.
5.4. Interfata Web
Imaginea următoare prezintă inter fața web a utilizatorului . Interfața este
alcatuită din doua părț i statice care a par pe fiecare pagină din aplicațe si o parte
dinamica .
În continuarie v oi prezenta părțile numerotate di n imagine.

Capitolul 5
20

Figura 5.4.1 Interfa ța web
Partea numă rul 1 este o par te statică în care se prezintă categoriile ș i
subcategoriile produselor. Categoriile ș i subcategoriile sunt preluate din baza de date
din tabela catergorii cu ajutorul urmă toarelor linii de cod PHP:

Figura 5. 4.2 Preluare categorii

În variabila query se compune interogarea selectând din tabela categorii
înregistră rile care au IDparent =0, după care î n variabila categorii se execută
interogarea, iar î n while se preiau rezultatele primi te în variabila categ , care
repre zintă categoriile.

Figura 5.4 .3 Afișare categorii
Rezultate preluate se afișează într -un tag html dupa cum se artă î n imaginea de
mai sus.

Figura 5. 4.4 Preluare subcategorii

Capitolul 5
21
În variabila query se compune interogarea selectâ nd din tabela catego rii
înregistrarile care au IDparent id -ul selectat î n variabila categ , după care î n variabila
subcategorii se execut ă interogarea, iar î n while se preiau rezultatele î n variabila
subcateg , care reprezintă subcategoriile.

Figura 5. 4.5 Afișare subcategorii
Rezultat e preluate se afișează în tr-un tag html dupa cum se ar ată în imaginea
de mai sus :
Partea numă rul 2 este o parte statică care conține butonul de conectare, coșul
de cumpărături și numele magazinului . Toate componetele mai sus menț ionate sunt
construite î ntre tag -urile <nav class =”navbar navbar -default ”></nav> .
Partea numă rul 3 este partea dinamică care se mo difică la acționarea oricărui
buton atât din partea statică cât și din partea dinamică . Modificarea continutului se
face cu ajutorului următoarei funcț ii JavaScript

Figura 5.4.6 Func ție schimbare conținut

La fiecare clic în aplicație se apelează funcția de mai sus ș i se schimbă div-ul
care conține partea cu numă rul 3.
5.5. Parți componente
5.5.1. Meniul cu produse le
Meniul cu produse se află în partea cu numă rul 1, la clic pe o cat egorie se
afișează o listă cu subcategoriile acesteia , acestea fiind preluate din baza de date din
tabela categorii . La clic pe o subcategorie se afișează, î n partea dinami că a aplicaț iei,
toate produsele aferente subcategoriei selectate.

Capitolul 5
22

Figura 5.5. 1 Meniul cu produse le

Cu ajutorul clasei de boostrap data-toggle ="collapse " la clic pe o categorie
apare sub formă de listă subcategoriile , care au î n tabelul de categorii idParent id -ul
categoriei selectat e.
La fiecare modificare în baza de date a categ oriilor ș i sub categoriilor la
refresh -ul oricărei pagini din aplicaț ie se preiau noile valori.
5.5.2. Antetul magazinului
În antet se află sigla magazinului, numele magazinului, butonul de conectare ,
și coșul de cumpără turi.

Figura 5.5 .2 Bara de status

1. Sigla magazinului
La cli c pe aceasta se apeleaz ă functia changeContinut prezent ă mai sus care
încarcă pagina produse.php , care aduce toate produsele existente.

2. Numele magazinului
La fel ca și î n cazu l siglei la clic pe acesta se î ncarc ă pagina produse.php ,
care aduce toate produ sele existente.

3. Cosul de cumparaturi
La clic pe butonul “coșul de cumpărături” se deschide o nouă pagină unde
utilizatorul are posibilitatea de a vedea produsele adăugate și de a modifica cantitatea
sau elimina produsele din cos cu clic pe X. Tot de aici cu clic pe poza sau titlul
produsului se deschide pagina cu detaliile produsului.
Deschiderea coșului de cumpărături se poate face doar daca în coș sunt
adăugate unul sau mai multe produse.

Capitolul 5
23

Figura 5.5. 3 Coșul de cumpără turi

În partea de sus a listei cu produsele din cos se face un sumar, re prezentând
cantitatea ș i valoarea totală a produselor din coș .
La clic pe butonul Pasul urmator , se deschide un formular care este
precompletat , dacă utiliz atorul are un cont inregistrat ș i este autentificat sau s e
completează cu datele de livrare, respectiv facturare, pentru produsele adăugate în
coșul de cumpără turi dacă acesta nu are cont.
Imaginea următoare reprezintă pagina cu formula rul pentru trimiterea
comenzii și butonul de trimitere comandă :

Figura 5.5 .4 Formular trimtere comandă

Trimiterea come nzii se poate efectua numai dacă sunt completate toate
câmpurile, în caz contrar câmpul rămas necompletat își schimbă culoarea în roș u.
La clic pe butonul Trimite comanda datele din fo rmular plus comanda se
inserează în baza de date î n tabelul comenzi , după care în tabelul comenzi_detali se
inserează detaliile pentru fiecare produs comandat î n pa rte cu id -ul comenzii
corespunză tor din tabelul comenzi .
După ce se inserează în tabelele mai sus menționate, în tabe lul produse se
actualizeaz ă cantitatea p roduselor în funcț ie, de numărul de produse achiziț ionat .

Capitolul 5
24
4. Butonul de conectare
La clic pe butonul de Conectare , apare formul arul de autentificar e. Pentru
realizarea autentificării se folosește o funcție JavaScript c are verifică dacă numele ș i
parola introduse în formularul de autentificare există î n baza de date.

Figura 5.5 .5 Formular autentificare

Dacă datele de conectare sunt greșite sau nu există în bază de date apare mesaj
de avertizare “ Nume utilizator sau parolă incorecte ”.
Pentru revenirea pe pagin a de produse se apasă butonul Anulare .
Tot aici utilizatorul are posibilitatea de a creea un cont nou . La clic pe acesta
se deschide un formular unde utilizatorul îș i poate trece datele personale . Pentru
înregist rarea contului se apasă butonul Adauga Cont .

Figura 5.5. 6 Creare cont

Dacă parola introdusă în câ mpul Parolă , nu coincide cu parola din campul
Confirmare parola apare mesaj de avertizare “ Parolele nu coincid ”.
Fiecare câ mp din formular este ogligatori u și este validat cu ajutorul unei
funcț ii JavaScript care verifică fiecare câ mp la clic pe butonul Adaugă cont dacă este

Capitolul 5
25
completată o valoare iar î n caz contrar , câmpul care nu are o valoare completată se
colorează cu culoarea roșie .
Contul nu se poate cr eea dacă nu se completează toate câ mpurile.
Dacă email ul introdus nu are forma corectă nu se poate adăuga contul chiar
dacă sunt completate toate câm purile.
După completarea tuturor câ mpurilor , la clic pe butonul Adaugă Cont apare
mesajul “Cont creat cu su ccess !”, iar utilizatorul este conectat automat cu datele de
conectare introduse. Datele sunt t rimise în baza de date î n tabelul utilizatori prin
metoda POST .
După autentificare, în header, î n loc de butonul de Conectare apare butonul
Contul meu . La clic pe acesta se deschide o nouă pagină care conț ine formular ul de
mai sus cu datele precompletate ale utilizatorului, unde acesta are posibilitatea să le
modifice , iar cu clic pe Salvează modifică ri, în baza de date î n tabelul utilizatori se
actualizează modif icările efectuate.
După autentificare utilizatorul po ate să vadă istoricul comenzilor cu clic pe
butonul Comenzi anterioare . La clic pe acesta , se afișează pagina care conține
informaț iile generale cu privire la comenziile efectuate, constând în data la c are s -a
achiziționat, numărul de produse și preț ul.

Figura 5.5. 7 Istoric comenzi
La clic pe detaliul comenzii se deschide o pagină î n care se afișează datele de
livrare/ facturare ș i pentru fiecare produs cantitatea și prețul pentru fiecare bucată ș i
totalul. Tot de aici se poate deschide ș i pagina cu detaliile produsului cu clic pe
numele produsului.
Pentru a reveni la lista di n imaginea de mai sus care conține informaț iile
generale ale comenzilor se apasă butonul Înapoi la lista comenzilor .
Pentru ieșir ea din cont se apasă butonul Deconectare din pagina Contul meu .
La deconectare , sesiune a de distruge astfel coșul de cumpără turi se goleș te.
La autentificarea administratorului, la clic pe Contul meu apare butonul
Comenzi utilizatori . La clic pe acesta apa re lista cu toate comenzile utilizatorilor
(care au cont).

Capitolul 5
26

Figura 5.5. 8 Vizualizare comenzi adminstrator

Pe langă informaț iile generale cu privire la comenziile efectuate, constand în
data la care s -a achizitionat produsul , numărul de produse și preț ul, administratorul
are privilegiul de a vedea numele uti lizatorilor ș i de a elimina comenzile cu clic pe
butonul Expediere comandă , după ce acestea sunt expediate utilizatorului.
Eliminarea se face doar din istoricul comenzilor utilizatorilor pentru a ra mane tot
timpul în listă doar comenzile care trebuie expediate. La clic pe buton în baza de date
în tabelul comenzi se face update pe coloana inactiv cu valoarea 1.
La clic pe o detaliile comenzii pe langă datele de facturare/livrare a comenzii ,
data, preț ul, administratorul are posibilitatea de a elimina un produs dintr -o comand ă
cu clic pe butonul Elimină produs .
Imaginea următoare prezintă detaliile comenzii:

Figura 5.5. 9 Listă detalii comandă

Butonul Elimina produs , este folosit în cazul î n care un utilizator nu mai
doreș te expedierea unui produs com andat. La clic pe acesta se ș terge produsul din
baza de date din tabelul comenzi_detalii .

Capitolul 5
27
5.5.3. Pagina cu produsele
1. Lista produselor
La accesarea aplicației în partea dinamică a aplicaț iei se afișează toate
produsele existente.
Pentru fiecare produs se afiș ează prețul, cantitatea disponibilă și butonul de
adăugăre în coșul de cumpără turi.

Figura 5.5 .10 Lista produselor

La clic pe b utonul Adauga în coș , acesta își schimbă forma ș i apar trei
butoane ș i un panel după cum se arată î n imaginea urmă toare:

Figura 5.5. 11 Butonul de Adaugă în coș
Pentru adaugarea mai multor produse se apasă pe butonul +, iar pentru a
scadea produsele din coș se apasă butonul -. Anularea op erațiunii de adăugare în coș
se face apasâ nd pe butornul X.
Adăugarea și ștergerea produselor din coș se realizează cu urmatoarele funcț ii:

Capitolul 5
28

Figura 5.5. 12 Functii adaugă î n coș

Pe sesiune există un array asociativ id -valoare în care se țin produ sele din coș .
Id-ul este id -ul produsului iar valoarea este n umărul de bucăț i. La clic pe butonul +
dacă există î n array id -ul produsului, se incrementează valoarea cu 1, iar dacă nu, se
adaugă . La clic pe butonul – se decrementează valoarea asociată produsului cu 1. La
X se pune valoarea 0 p entru id-ul produsului.
În panelul din parte a de sus se calculează prețul total în funcț ie de cantiatea
adăugată în coș . În momentul În care produsul adă ugat nu mai este disponibil î n stoc
butonul + sau Adaugă în coș este inactiv.
Stocul este actualizat în timp real, in funcție de câ te produse s unt adăugate în
coș, labelul În stoc își schimbă forma. Dacă cantitatea disponibilă nu depaseș te cinci
produse apare mesajul Stoc limitat , iar dacă nu există nici un produs disp onibil apare
mesajul Stoc epuizat . Dacă se anulează operaț iunea stocul revine la numărul iniț ial,
stocul actualizat doar î n momentul trimiterii comenzii.
La autentificarea administratorului, apar mai multe butoane , în partea dreaptă
butonul Adauga produs , iar la fiecare produs apar butoanele de Modifică și Șterge .
Pentru adă ugarea unui produs nou se apasă butonul Adaugă produs , apoi se
deschide o pagina cu formul arul pentru adă ugarea unui produs nou:

Figura 5.5. 13 Formular adăuga re produs

Categoriile si subcategoriile sunt preluate din baza de date din tabela
categorii , la fel ca ș i preluarea de la meniul de produse.

Capitolul 5
29
Pentru adă ugarea produsului trebuie completate câ mpurile obligatorii acestea
fiind Categorie , Subcategorie , Denumire , Preț, Canititate și Poza , în caz contrar în
momentul adăugării, câmpul rămas necompletat își schimbă culoarea în roșu și nu se
efectuează adăugarea, iar î n dreptul butonului Adaugă produs apare mesajul
„Completați câmpurile obligatorii! ”.
Pentru alegerea unei poze se apasă butonul Alege poza după care se deschide
o fereastră din windows explorer. Pozele sunt filtrate ș i nu se poate alege alt tip de
poze numai cel care are extensia jpeg/jpg/png/bmp .
Subactegoriile se filtrează in funcț ie de id-ul categori ei alese . Pentru sele ctarea
categoriei ș i schimbarea subca tegoriilor, se folosesc funcț iile JavaScript din imaginea
urmă toare:

Figura 5.5. 14 Funcț ie selectare categorii
Când se apelează funcț ia changeCategorie , se preia numele categoriei î n
variabila categorie_sel și în variabila categorie id-ul acesteia, iar î n mome ntul
schimbă rii categoriei se schimbă subcategoriile în funcție de valoarea din variabila
categorie . Funcț ia changeSubcategorie se comportă la fel ca și funcția de mai sus, se
preia numele sucategoriei în varia bila subcategorie_sel , și variabila subcategorie id-
ul subcategoriei.
Datele din formular sunt trimise prin metoda POST. În momentul salvării se
inserează î n tabelul produse , datele completate ș i id-ul categoriiei pentru care s -a
adăugat produsul.
Pentru mdodificarea unui produs se apsă butonul Modifcă , apoi se deschid e o
pagină nouă cu formularul de mai sus precompletat cu detaliile produsului, acestea se
pot modifica iar pentru salvare se apasă butonul Salvează modifică ri, iar în tabelul
produse din baza de date se actualizează modifică rile efectuate.
La clic pe butonul Șterge , produsul se marchează în baza de date î n tabelul
produse ca fiind inactiv, și acesta nu mai apare î n lista produselor.
Dacă un produs este șters și acesta apare î n istoricul com enzilor unui utilizator
la deschiderea produsului apare mesajul „ Acest pro dus nu mai face parte din ofertă !”
iar butonul de Adaugă în coș nu mai există. De asemenea nu mai poate lasă o parere
despre produs, butonul Lasă o parere nu mai există .
În ima ginea următoare este prezentată forma pe care o are interfaț a la
autentificarea administratorului:

Capitolul 5
30

Figura 5.5. 15 Interfată administrator
Pentru realizarea ștergerii se folosește următoarea funcție JavaScript
prezentata î n imaginea urmatoare:

Figura 5.5.16 Sterge produs
La clic pe butonul Șterge , se apelează funcț ia de mai sus . După ștergerea
produsului se î ncarca pagina produse.php prin funcț ia changeContinut .

2. Detaliile produselor
Pentru a vedea detaliile produsului, la clic pe numele produsului , se a fișează o
pagină cu acestea.
Prima parte constă în afișarea specificaț iilor produsului, acestea sunt preluate
din tabelul produse din câ mpul descriere . Dacă în momentul adăugă rii produsului , în
câmpul Descriere , fiecare specificaț ie este introdusă pe un r ând nou (apăsând tasta
Enter) la vizualizare se afișează cu ajutorul funcț iei php nl2br specificaț iile pe râ nd
nou. Specificaț iile se afișează î ntr-un div cu posibilitatea de a face scroll pentru a
vedea toate detaliile .

Figura 5.5. 17 Specificaț ii produ s

Capitolul 5
31
3. Lista pa rerilor și Adă ugare a de parere
Partea a doua reprezintă vizualizarea părerilor adă ugate care constă în nota
acordată , numele și data la care s -a lăsat parere.
La clic pe o parere se afișează locația de unde s -a lăsat părere, textul introdus
în momentul ad ăugă rii de părere ș i materialul video.
Imaginea următoare prezintă o părere care conț ine un material video:

Figura 5.5. 18 Vizualizarea unei pareri

Pentru adăugarea unei pă rerei, se ap asă butonul din pagina cu detaliile
produsului Lasă o pa rere, după care se deschide o pagină care conține un formular
pentru adăugarea de pă rere.

Figura 5.5. 19 Formular ad ăugare pă rere

Capitolul 5
32
Pentru salva rea păre rii trebuie completate câ mpurile obligatorii, acestea fiind
Rating , Nume , Prenume , Email și Părerea Ta , în caz contra r în momentul salvării,
câmpul rămas necompletat își schimbă culoarea în roșu și nu se efectuează salvarea .
Câmpul Încarcă video este opț ional, salvarea se poate efectua și fără
încărcarea unui video. Pentru alege rea un video se apasă butonu l Alege video , după
care se deschide o fereastră din windows explorer. Video -urile sunt filtrat e și nu se
poate alege alt tip de video numai cel care are extensia mp4 .
Pentru salvarea părerii se apasă butonul Salvează . În momentul sălvării se
inserează î n baza de date în tabelul reviewuri pe lângă datele completatate î n
formaular ip -ul, coo rdonatele, adresa de unde s -a lăsat părerea ș i id-ul produsului
pentru care s -a lăsat pă rere, adresa fiind opținută prin intermediul serviciului online
http://freegeoip.net/json/ , datele din formular fiind trimise prin metoda POST.
La autentificarea administratorului, acesta are posibilitatea de a șterge părerile,
cu clic pe butonul X din dreptul adr esei celui care a lasat parere și de a vizual iza
email -ul celui care a lăsat pă rere.

Figura 5.5.2 0 Afișare pă rere administrator

4. Harta Google maps
Partea a treia reprezint ă integrarea google ma ps pentru reprezentarea pe hartă
a zonelor din care s -a lăsat pă rere. Pentru realizarea ac estei funcț ionalități s-a integrat
script -ul următor în head -ul aplicaț iei în fiș ierul index.php :

Figura 5.5 .21 Script Google Maps

Capitolul 5
33
Pentru obț inerea adresei utilizatorului, se obține ip-ul utilizatorului, iar prin
intermediul serviciu lui online “ http://freegeoip.net/json/ ” se obține adresa GPS a ip-
ului utilizatorului .
În pagina detaliiprodus.php , pentru localizarea pe hartă a adresei celui care a
lăsat părere ș i marcarea , s-au folosit următoarele funcț ii JavaSc ript:

Figura 5.5. 22 Funcție i ntegrare Google Maps
Funcț ia initialize creează două obiect e, primul obiect este mapProp și conț ine
coordonatele zonei care va apărea pe hartă la fiecare produs , zoom -ul și tipul de hartă ,
iar al doilea obiect map creează h arta cu proprietăț ile din obiectul mapProp .
În variabila query se compune interogarea SQL î n care sunt selectate adresa și
id-ul produsului, î n variabila rew se execută interogarea SQL, iar in while în variabila
r se preiau datele din variabila rew.
Funcția addMarker , preia adresa si pă rerea lăsată aferentă adresei, și
marchează pe hartă locația, iar când se ține mouse -ul pe marker se afișeaza părerea
lăsată în zona respectivă .

Capitolul 5
34

Figura 5.5. 23 Marcarea pe hartă

Pe lângă vizionarea părerilor tinând mo se-ul pe marker, î n harta de mai sus se
pot face și alte operațiuni cum ar fi activarea funcț iei Street View care permite
afișarea sub formă de imagini a zonelor din care s -au lăsat pă reri. De asemenea se
poate schimba modul de reprezentare a hărț ii cu cli c pe butonul Satelite , iar cu scroll –
ul mouse -ului sau cu clic pe butoanele + respectiv – se face zoom la hartă .

Capitolul 6
35
Capitolul 6. Testare și Validare
Pentru realizarea unei aplica ții sunt necesarii mai mulți pași de urmat. Cei mai
importanți paș i ar fi:
– analizarea cerinț elor;
– dezvoltarea;
– testarea ;
– validarea aplicaț iei.
Modificarile aduse de -a lungul dezvoltării aplicaț iei au pre supus multe teste de
validare. În primul rând am testat aplicaț ia la fiecare modificare pe mai multe
browsere cum ar fi E dge, Chrome, Internet Exp lorer ș i Mozila.
Aplicația conținând mai multe formulare, în care la completarea de că tre
utilizatori , a acest ora, aceștia putând introduce date care să influențeze inserarea î n
baza de date . Prin urmare am testat fiecare fo rmular respectiv formularul de
înregistrare cont nou, de act ualizare date utilizator, de adăugare de părere, de
adăugare/modificare produs și cel de trimitere comandă .
Pentru fiecare formular am urmat cativa pasi de testare cum ar fi:
– introducerea de caractere speciale;
– încercarea de c ompletare a câ mpurilor de tip numeric cu litere;
– încercarea de salvare fără completarea câ mpurilor obligatorii;
– la formul de adăugare produs încercarea de adăugare produs fără
selectare de categorie sau subcategorie .
Ca urmare a pașilor efectuaț i pentru fo rmularele mai sus prezentate, testarea a
avut ca ș i rezultat, salvarea î n cazul introduce rii de caractere speciale, iar î n celelalte
cazuri mes aj pentru completarea tuturor câ mpurilor.
Administratorul avâ nd unele privilegii , acelea de a vedea unele funcțio nalității
ale aplicaț iei pe care utilizatori i nu le au, testarea trebuia făcută cu mare atenție pentru
a nu lăsa î n anu mite momente ca un utilizator să aibă accesul la privilegiile
administratorului.
Pentru a valida privilegii le administratorului am încercat autentificarea cu mai
mulți utilizatori printre care și conturi cu nume ca ș i cel al administratorului (admin).
La eliminarea din lista comenzilor utilizatorilor pe care administratorul are
privileg iul de a le vedea am testat ca în momentul î n care eli min una sau mai multe
comnezii să nu se elimine și din lista comenzilor utilizatorilor, ci doar din lista
adminstratorului.
De asemnea am testat partea î n care un produs nu mai face parte din stoc, dar
produsul se află î n istoricul comenzilor unui utilizat or autentificat care are produsul în
lista de comenzi efectuate, să nu mai poată trimite comanda sau să adăuge produsul în
coș după ce deschide detaliile comenzii.
Am testat ca atunci cand un produs are stocul limitat și se încearcă adăugarea
în coș de mai multe ori să nu se poate adăuga în coș atunci când numărul de produse
depașește numărul de produse existente î n stoc.
Am mai testat și adăugarea de pă reri din mai multe zone pentru a vedea dacă
servici ul de localizare a adresei funcționează bine și se sal vează adresa și se
localizează corect pe hartă .
Pentru toate testă rile efectuate rezultatul a fost unul pozitiv și aplicașia
realizată funcționează corect.
Toate modificările aduse aplicației au fost validate și verificate amănunț it de
mai multe ori.

Capitolul 7
36
Capitolul 7. Manual de Instalare ș i Utilizare
Pentru ca aplicația să funcț ioneze local trebuie să îndeplinească următoarele
cerințe software :
– sistem de operare Windows xp sau mai nou;
– conexiune la internet;
– un browser instalat, (Chrome, Firefox, Internet E xplorer, Edge, Opera
sau Safarii ).
Pentru instalarea aplicatiei sunt necesari urmatorii pasi:
– instalarea kit -ului xampp -win32 -1.7.7 -VC9 -installer din urm ătorul
link
https://sourceforge.net /projects/xampp/files/XAMPP%20Windows/1.7.
7/, care conține serverul HTTP apache ș i mysql ;
– copierea direc torului cu sistemul aplicatiei î n Local disk
C\xampp \htdocs ;
– copierea dir ectorului cu baza de date în Local disk C \mysql \data .
După finalizarea pa șilor de mai sus , pentru pornirea serverului apache ș i
mysql, trebuie deschis XAMPP control panel din directorul xampp cu dublu clic pe
xampp -control . Următoarele imaginii exemplifică pornirea serverului apache ș i
mysql:

Figura 7.1 Xampp control panel

Pentru instalarea ca ș i serviciu a serverului apache și mysql trebuie bifat svc
din dreptul fiecă ruia. Cu clic pe Start se efectueaza por nirea lor. Ca aplicația să
functioneze trebuie ca XAMPP Control Panel să arate astfel:

Figura 7.2 Xampp control panel fi nal

Capitolul 7
37

În continuar e sunt prezenta ți pașii pe care un utilizator trebuie să î i parcurgă
pentru achiziț ionarea un produs:
În primul rând trebuie să acceseze site -ul printr -un link, î n cazul de față
aplicaț ia este pe local trebuie accesat link -ul http://localhost/magazin , ca urmare a
accesarii link -ului apare interfața cu toate produsele existente.
Pentru adăugarea în coș a produsul, se a pasă pe butonul Adaugă î n coș după
cum se prezintă în imaginea urmă toare:

Figura 7.1 Adăugarea în coș

După ce se apasă butonul Adaugă î n coș, în coșul de cumpărături din header
apare numărul de produse adăugate, la fel ca și în imaginea urmă toare:

Figura 7.2 Coșul de cumpără turi

La clic pe coșul de cumpărături se afișează pagina cu produsele adăugate în
coș, care mai conține cantittea și prețul total al produselor adă ugate.

Figura 7.3 Vizualizare coș de cumpără turi
Se poate modifica cantitat ea apăsâ nd butonul +. Pent ru eliminarea produsului
din coșul de cumpărături se apasă butonul X.
Pentru finalizarea comenzii se apasă butonul Pasul urmă tor, după care se
afișează un formular cu datele de livrare/facturare :

Capitolul 7
38

Figura 7.4 Formular trimitere comandă

Toate cămpurile sunt obligatorii. După completarea formularului se apasă
butonul Trimite comanda .
Pentru achiziț ionarea de produse cu un cont, se apasă butonul Conectare ,
după care se apasă butonul Cont nou , acesta completează un formular, iar pentru
salvare se ap asă butonul Adauga cont .
Pașii de achiziționare rămân la fel ca c ei prezentați mai sus, doar că la
formularul de trimitere comandă nu mai trebuie completat deoarece acesta este
precompletat cu datele din formularul pentru ad ăugare cont.
Pentru vizualizarea comenzilor efectuate anterior (doar cele achizi ționate cu
cont) , dup ă logare apare butonul Contul meu . La clic pe acesta , apare pagina cu
datele precompletate și butonul de Comenzi anterioare .
La clic pe butonul Comenzi anterioare , apare lista comenzilor efectuate
anterior, cu data, cantitatea ș i valoarea . Se poate v edea produsul achziț ionat cu clic pe
detaliile comenzii.

Figura 7.5 Istoric comenzi
La cl ic pe detaliile comenzii se afișează o pagină cu produsul comandat ș i cu
adresa d e livrare/facturare completate î n momentul trimiterii comenzii.

Capitolul 8
39
Capitolul 8. Concluzii
În pre zent folosirea unui ma gazin online pentru a face cumpără turi indife rent
de natura lor este din ce î n ce mai folosit deoarece nu mai este nevoie de stat la cozile
întermina bile de la magazine ș i a timpului petrecut î n trafic.
Prin intermediul aplica ției rea lizate acest lucru este posibil pentru utilizatorii
care vor alege această metoda de a face cumpărături .
Realizarea acestei aplicaț ii a presupus m ultă munca ă atât în ce priveș te
asimilarea de cunoș tinte despre limbaje le folosite, cât și despre unele funcț ionalității,
cum ar fi integrare a în aplicaț ie a hărților de la google maps cât și despre ce înseamnă
realizarea unui magazin online și care ar trebuii să fie structu ra lui.
Totodată am î nvata t unele tehnici de programare și de punere în aplicare cât și
experientă pentru realizarea de aplicaț ii web.
Pe parcursul dezvoltării aplicaț iei mi-am stabilit obiective clare și termene de
timp limită, deoarece procedâ nd astfel am realizat o aplicatiei compact ă și finalizatî în
periada de timp stabilită .
Obiectivele pe care mi le-am propus au fost implementate și oferă aplicației
funcț ionalitatea pe care trebuie s ă o aibă un magazin online. Pe lângă obiectivele pe
care mi le -am propus au fost realizate unele funcționalităț ii care nu au fost incluse în
obiectivele init iale, in functie de progresul făcut am realizat funcționalității noi .
Ca obiective de viitor în ce privește dezvoltatrea aplicaț iei ar fi o pa rte de
administrare mai complexă , în care administratorul să poată să vizualize ze rapoarte
grafice privind număru l de produse vândute într -o anumită perioadă . Rapoarte privind
suma produselor dintr -o anumită categorie pe o perioadă de timp aleasă .
O implem entare de viitor ar fi ca în momentul î n care clientul trimite comanda
să primesc pe un mail stab ilit un mesaj cu comanda plasată , iar utilizatorul să
primească în momentul î n care accept comanda un mesaj de confirmare, iar la
expedierea comenzii utilizatorul să primească mail automat cu dat a la care s -a
expediat comanda ș i data primirii comenzii.
Pe viitor as dorii si dezvoltarea un ei plați online în care utilizatorul să poată
plăti produsul achiziț ionat prin intermediul PayPal.

Anexa 1
40
Bibliografie

[1] Julie C. Meloni – „Invata singur PHP, MySQL si Apache”
[2] Marian Cată, Gheorghe Marin, Anca Atodiresei – “Limbajele M ySQL si PHP”
[3] Coy Barefoot – „Revolutia comertului electronic”
[4] Sabin Buraga – „Aplicatii web la cheie”
[5] Jon Duckett – „HTML, HXTML, CSS and Javascript”
[6] https://developer.mozilla.org/en –
US/docs/Web/JavaScript/JavaScript_technologies_overview
[7] https://en.wikipedia.org/wiki/Ajax_(programming)
[8] http://www.w3schools.com/css/css_syntax.asp
[9] https://en.wikipedia.org/wiki/Cascading_Style_Sheets#History
[10] http://www.w3schools.com/js/js_function_definition.asp
[11] https://en.wikipedia.org/wiki/Bootstrap_(front -end_framework)
[12] https://developers.google.com/maps/documentation /geocoding/intro
[13] https://en.wikipedia.org/wiki/HTML
[14] http://php.net/manual/ro/language.basic -syntax.phptags.php
[15] https://ro.wikipedia.org/wiki/JavaScript
[16] http://php.net/manual/ro/intro -whatcando.php