Proiectarea Unei Aplicatii Web Privind Un Magazin Online cu Vanzari de Produse Electronice

Informatica

Proiectarea Unei Aplicatii Web Privind Un Magazin Online cu Vanzari de Produse Electronice

Byadmin ianuarie 1, 2024

Cuprins

1. Introducere

2. Tehnologii utilizate în realizarea aplicației

2.1. HTML (Hyper Text Markup Language)

2.2. CSS (Cascading Style Sheets)

2.3. PHP (Php: Hypertext Preprocessor)

2.4. MySQL

2.5. JavaScript

2.6. jQuery

2.7. Tehnologii software utilizate

2.7.1. WampServer

2.7.2. Notepad++

2.7.3. Sublime Text 2

2.7.4. Test Mail Server Tool

3. Descrierea aplicației

3.1. Structura

3.2. Arhitectura

3.3. Funcționalități

3.4. Baza de date

4. Concluzii

Bibliografie

Introducere

Această lucrare prezintă o aplicație web, mai exact un magazin online cu vânzări de produse electronice realizat în PHP. În zilele noastre, într-o eră a vitezei, oamenii tind sa fie tot mai ocupați si au tot mai puțin timp liber pentru cumpărături. Astfel, magazinele online devin o opțiune pentru tot mai mulți oameni prin multitudinea produselor pe care le pot oferi.

Beneficiile unui astfel de magazin pentru cei care gestionează o astfel de afacere:

poți fi la dispoziția clienților oricând, zi și noapte, întrucât magazinele online nu se închid niciodată. Oamenii ocupați dețin o putere de cumpărare ridicată, iar aceștia sunt de multe ori forțați să-și facă cumpărăturile seara de acasă sau în timpul zilei de la locul de muncă;

cheltuielile pentru deschiderea unui astfel de magazin sunt mult mai mici decât în cazul unui magazin clasic, deoarece costurile legate de magazinul de desfacere în ceea ce privește chiria, întreținerea, angajații, sistemele de alarmă și pază sunt evitate;

te poți adresa clienților din toata lumea dacă magazinul este implementat în mai multe limbi, iar extinderea activității este facilitată prin includerea unei limbi noi;

oferă ușurință mare în menținerea la zi a ofertei de produse prin programele create pentru magazinele online;

un avantaj major este faptul că în momentul în care site-ul are un trafic ridicat, se pot obține venituri din publicitate;

cu ajutorul Google Analitycs, Trafic și a altor servicii asemănătoare, se pot realiza foarte ușor statistici referitoare la vânzări, numărul de vizitatori, preferințele clienților;

stocul produselor poate sa fie minim în cazul în care furnizorul este capabil să le livreze rapid.

Nu numai antreprenorii au de câștigat de pe urma acestui tip de afacere ci și consumatorii:

economisesc timp deoarece nu mai este nevoie să se deplaseze până la magazin și să se plimbe printre raioane pentru a găsi ceea ce caută;

pot face comparații între produse folosindu-se de diverse filtre de sortare;

produsele sunt livrate la domiciliu / la adresa solicitată;

pot să aleagă cel mai mic preț pentru un produs sau serviciu.

Dezavantajul major al clienților în cazul în care aleg acest mod de cumpărare este faptul că produsele nu pot fi probate / atinse, iar marfa nu poate fi procurată imediat, termenul de livrare putând varia de la câteva ore, până la câteva zile. Un alt dezavantaj ar fi neîncrederea pe care o au oamenii față de internet, deoarece deși rețeaua globală oferă foarte multe avantaje, ascunde și nenumărate pericole, cum ar fi înșelăciunea. De aceea, este de preferat ca oamenii să acceseze magazine online cunoscute, de încredere, care si-au făcut deja un renume.

Tot mai multă lume optează pentru cumpărături făcute prin intermediul internetului, lucru care poate fi observat și în graficul de mai jos. Aceasta a fost și principala mea motivație atunci cand am ales această temă, considerând că aceast tip de aplicație are un loc important în contextul actual, mai ales că aplicația web creată este responsivă și poate fi accesată inclusiv de pe telefon sau tabletă.

Pentru realizarea acestei aplicații am folosit tehnologii precum: HTML, CSS, PHP, MySQL, jQuery și Javascript. Ca editor de text am utilizat Sublime Text 2 și Notepad++.

HTML 5 – utilizat pentru realizarea structurii paginilor web din cadrul magazinului online

CSS 3 – utilizat pentru formatarea conținutului paginilor web

PHP 5.4.3 – utilizat pentru a face legăturile dintre website și baza de date și pentru realizarea paginilor dinamice

MySQL – utilizat pentru crearea și administrarea bazei de date

jQuery – utilizat la realizarea galeriei foto

Javascript – utilizat la realizarea și includerea unor elemente din aplicație

Tehnologii utilizate în realizarea aplicației

HTML (Hyper Text Markup Language)

HTML este prescurtarea de la HyperText Markup Language și reprezintă un limbaj pentru crearea unui document astfel încât să poată fi publicat pe World Wide Web și vizualizat cu ajutorul unui browser (Internet Explorer, Google Chrome, Mozila Firefox, Opera, etc.). Hypertext-ul trebuie interpretat ca un text care semnalează o legătură la o altă informație web, de obicei un alt document web, și este identificat prin subliniere sau culoare, pentru a-l deosebi de textul simplu.

HTML nu este un limbaj de programare și asta din cauza că în HTML lipsește atributul principal propriu oricărui limbaj de programare și anume comenzile. În HTML nu poate fi creată o succesiune de acțiuni, ci doar poate fi descris modul în care browserul trebuie să afișeze pe ecran documentul respectiv.

HTML utilizează pentru descrierea documentelor web – tag-uri, numite și etichete, specifice pentru fiecare element descris. Tag-urile stabilesc atât structura documentului, cât și aspectul acestuia. Un tag este un identificator care furnizează browser-ului instrucțiuni de formatare a documentului. Petru a fi delimitate, tag-urile HTML sunt încadrate între paranteze unghiulare (< >).

Tag-urile se divizează în:

tag-uri pare sau tag-uri pereche – care impun după sine existența unui tag de închidere;

tag-uri impare sau singulare – care nu necesită închidere.

Orice pagină web (document HTML) are în structură trei elemente obligatorii: un element numit HTML, care cuprinde întregul document, și două sub-elemente ale acestuia: HEAD (antet, cap) și BODY (corp).

Tag-ul <html> este primul tag care trebuie să apară intr-un fișier HTML. El încadrează alături de tag-ul său corespunzător de închidere </html> întreaga pagină web.

Tag-ul <head> marchează partea de antet a documentului. Este un

tag par cu tag-ul de închidere </head>.

Tag-ul par <body> încadrează conținutul paginii web.

În antet este recomandat să se precizeze titlul documentului, care va fi afișat în bara de titlu a browser-ului. Pentru a preciza titlul documentului, care nu poate depăși 64 de caractere, se utilizează în secțiunea antet tagurile pereche <title> și </title>, între care se scrie titlul documentului.

Exemplu de cod HTML utilizat pentru afișarea opțiunii de selectare a limbii:

CSS (Cascading Style Sheets)

Prescurtarea vine de la denumirea oficială a standardului și anume Cascading Style Sheets (CSS). Fișierele CSS au extensia ".css" definind stiluri pentru paginile HTML. Stilurile externe permit schimbarea aspectului fiecărei pagini din site, prin simpla editare a unui singur document. Fișierele CSS permit stilizarea în bloc a documentelor HTML cu un efort semnificativ mai mic decat în cazul stilizării elementelor de pagină în cadrul fiecărui document HTML în parte, prin intermediul atributelor tagurilor.

În cadrul unui document HTML stilurile se aplică în următoarea ordine:

1. Stilurile implicite ale browser-ului

2. Style sheet-urile externe

3. Style sheet-urile interne (definite in <head>)

4. Style sheet-urile inline

Exemplu de cod din fișierul stylesheet.css:

PHP (Php: Hypertext Preprocessor)

Reprezintă un limbaj de programare destinat în primul rând internetului, aducând dinamică unei pagini web. Este unul din cele mai importante și utilizate limbaje de programare web open-source și server-side. Numele PHP provine din limba engleză și este un acronim recursiv : Php: Hypertext Preprocessor. Câteva exemple mai cunoscute de utilizare a acestui limbaj sunt PhpBB (forum), PhpNuke(CMS) și MediaWiki, software-ul din spatele Wikipedia. Folosirea PHP poate fi văzută ca o alternativă gratuită la utilizarea unor limbaje comerciale cum sunt ASP de la Microsoft, ColdFusion de la Macromedia, sau chiar JSP de la Sun Microsystems.

Popularitatea de care se bucură acest limbaj de programare se datorează următoarelor caracteristici :

Familiaritatea: sintaxa limbajului este foarte ușoară combinând sintaxele unora din cele mai populare limbaje Perl sau C

Simplitatea: sintaxa limbajului este destul de liberă. Nu este nevoie de includere de biblioteci sau de directive de compilare, codul PHP inclus într-un document executându-se între marcajele speciale

Eficiența: PHP-ul se folosește de mecanisme de alocare a resurselor, foarte necesare unui mediu multiuser, așa cum este Web-ul

Securitatea: PHP-ul pune la dispoziția programatorului un set flexibil și eficient de măsuri de siguranță

Flexibilitatea: fiind apărut din necesitatea dezvoltării Web-ului, PHP a fost modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnologii. Nefiind legat de un anumit server web, PHP-ul a fost integrat pentru numeroasele servere web existente: Apache, IIS, Zeus, server, etc

Gratuitatea : este probabil cea mai importantă caracteristică a PHP-ului. Dezvoltarea PHP-ului sub licența open-source a determinat adaptarea rapidă PHP-ului la nevoile Web-ului, eficientizarea și securizarea codului.

Exemplu de cod din fișierul settings.php:

MySQL

MySQL este unul dintre cele mai folosite sisteme de gestiune a bazelor de date client-server, fiind utilizat deseori în combinație cu scripturi PHP. Spre deosebire de lucrul cu alte baze de date, care presupune utilizarea unor biblioteci suplimentare (.dll), operarea cu baze de date MySQL este implicit “inclusă funcțional” în motorul interpretorului PHP (built-in).

Operațiile care se desfășoara cel mai adesea într-un sistem de gestiune a bazelor de date sunt:

– conectarea la server;

– crearea unei baze de date;

– afișarea bazelor de date existente;

– selectarea unei baze de date cu care trebuie să se lucreze;

– afișarea tabelelor conținute într-o bază de date;

– crearea tabelelor din interiorul unei baze de date și precizarea câmpurilor conținute în acele tabele;

– inserarea datelor în tabele;

– inserarea, modificarea sau stergerea datelor din tabele;

– efectuarea unor interogari asupra datelor cuprinse în tabele;

– deconectarea de la serverul de baze de date.

Deși este folosit foarte des împreună cu limbajul de programare PHP, cu MySQL se pot construi aplicații în orice limbaj major. Există multe scheme API disponibile pentru MySQL ce permit scrierea aplicațiilor în numeroase limbaje de programare pentru accesarea bazelor de date MySQL, cum are fi: C, C++, C#, Java, Perl, PHP, Python, FreeBasic, etc., fiecare dintre acestea folosind un tip specific API. O interfață de tip ODBC denumită MyODBC permite altor limbaje de programare ce folosesc această interfață, să interacționeze cu bazele de date MySQL cum ar fi ASP sau Visual Basic. În sprijinul acestor limbaje de programare, unele companii produc componente de tip COM/COM+ sau .NET (pentru Windows) prin intermediul cărora respetivele limbaje să poată folosi acest SGBD mult mai ușor decât prin intermediul sistemului ODBC.

Tabelele pe care le-am creat și utilizat în cadrul bazei de date:

JavaScript

Javascript este un limbaj de programare orientat pe obiecte, pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unori funcționalități în paginile web, codul JavaScript din aceste pagini fiind rulat de către browser. Limbajul este binecunoscut pentru folosirea sa în construirea aplicațiilor web, dar este folosit și pentru accesul la obiecte încastrate (embedded objects) în alte aplicații.

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Acesta este introdus în cadrul paginilor web și contribuie la responsivitatea paginii, la realizarea unei pagini care interacționează cu utilizatorul.

Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte încastrate (embedded objects) în alte aplicații.

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Acesta este introdus în cadrul paginilor web și contribuie la responsivitatea paginii, la realizarea unei pagini care interacționează cu utilizatorul.

Browserele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și pun la dispoziție aceste obiecte script-urilor JavaScript, care le pot citi și manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM. Există un standart W3C pentru DOM-uri pe care trebuie să îl pună la dispoziție un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să funcționeze pe toate browserele.

La realizarea acestei aplicații am folosit JavaScript pentru a introduce unele elemente în cadrul paginilor web.

Exemplu de cod JavaScript utilizat în cadrul subsolului paginilor pentru a introduce anumite elemente si linkuri către pagina de facebook a aplicației:

jQuery

jQuery este o librărie Javascript. Librăria permite, prin multitudinea de funcții, execuția, controlul, modificarea codului html, scriind mai simplu și mai putin cod javascript.

jQuery are o documentație bine elaborată, bine structurată și ușor de înțeles, așa încât să se poată introduce repede cod pe pagina de web. În plus, are o promovare foarte mare, unde se pot găsi tutoriale, cod gata făcut, plugin-uri, la tot pasul.

Plugin-urile sunt scripturi ce extind capabilitățile jQuery (sunt plugin-uri pentru drag & drop, submiterea unui formular prin ajax, galerii de imagini etc.).

Are o serie de avantaje:

Dimensiune redusa – aproximativ 20KB( in forma comprimata)

Rapid, usor de folosit

Compatibil cu orice browser

Imbunatateste vizibil numarul de linii de cod scrise datorita selectorilor si mecanismelor de manipulare a arborelui DOM

Volumul mare de articole si tutoriale care au fost scrise pentru aceasta librarie

Usurinta cu care AJAX poate fi folosit si suportul pentru JSON

Extensibilitatea – avantajul jQuery UI față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu dezvoltarea bibliotecii principale, minimizând riscul de incomptibilitate.

Libraria este utilizata de companii si proiecte internationale importante cum ar fi : Google, WordPress, Mozilla, Dell, Wikipedia etc.

Se introduce între <head></head>, sub stilurile .css, unul din următoarele coduri:

</script>

sau doar:

</script>

De preferat ar fi să se descarce scriptul și să fie amplasat pe server pentru a evita anumite complicații în cazul în care nu funcționează internetul. Linkurile de mai sus reprezintă calea către ultima versiune a librăriei.

Exemplu de includere a unui fisier jQuery:

Tehnologii software utilizate

WampServer

Fig. 2.7.1.1 Interfață WampServer

WampServer este un pachet software care implemtenează platforma WAMP, compusă din: Apache, PHP și MySQL pentru Microsoft Windows.

Lansat pentru prima dată în 21 noiembrie 2007, WampServer este eliberat sub egida GNU Public License. Este disponibil în două forme: sub formă de arhivă (.zip) și sub formă de installer: .exe.

Funționalitatea bazei de date este asigurată de PHPmyAdmin.

Notepad++

Notepad++ este un editor simplu de text, găzduit de către Sourceforge și oferit gratuit spre a fi folosit pe sistemele de operare Windows.

Programul permite evidențierea sintaxei codului sursă folosind diferite culori pentru o gamă foarte largă de limbaje de programare, inclusiv cele utilizate în dezvoltarea acestei aplicații: HTML, CSS, PHP și Javascript.

Fig. 2.7.2.1 Interfață Notepad++

Sublime Text 2

Sublime Text 2 este un editor de text și de cod sursa cu o interfață pentru realizarea de aplicații realizată în Python. Funcționalitatea lui poate fi extinsă cu ajutorul Plugin-urilor, majoritatea pachetelor fiind gratuite fiind dezvoltate și întreținute de către comunitate.

Acest editor funcționează pe o scară largă de sisteme de operare: Linux, Mac OS X 10.6 (sau mai recent), Microsoft Windows pe 32 sau 64 de biți. Este foarte rapid, are funcție care odata selectată ne ajută foarte mult în scrierea codului, completând tag-urile de care avem nevoie. La fel ca editorul de mai sus, și acesta evidențiază sintaxa codului sursă pe o gamă largă de limbaje de programare: C, C++, C#, CSS, HTML, JAVA, JavaScript, PHP etc.

Fig. 2.7.3.1 Interfață Sublime Text 2

Test Mail Server Tool

Test Mail Server Tool este un program de e-mail cu caracteristici complete, fiind foarte util pentru testarea capacităților de trimitere a e-mailurilor ale aplicațiilor web si desktop sau pentru vizualizarea mesajelor înainte de a fi trimise. Programul este setat să asculte la portul 25 SMTP de la localhost. Toate mailurile trimise acestei aplicații sunt automat salvate într-un folder, și pot fi deschise spre vizualizare ulterior.

Acest program este foarte util pentru:

Dezvoltatori web

Dezvoltatori ale aplicațiilor desktop

Manageri – poate vizualiza mesajele înainte de a le trimite clienților sau colegilor

Fig. 2.7.4 Interfață Test Mail Server Tool

Descrierea aplicației

Aplicația este responsivă, putând fi accesată atât de pe calculator, cât și de pe tabletă sau telefon, utilizatorul având parte de o experiență plăcută.

Fig. 3.1 Prima pagină: rezoluție 1920 x 1080

Fig. 3.2 Prima pagină: rezoluție 768 x 1024

Fig. 3.3 Prima pagină: rezoluție 640 x 800

Structura

Aplicația este construită din 3 părți principale:

Antetul (header-ul), cuprinde Logo-ul aplicației, butoanele pentru setarea limbii și monedei în care să fie afișate prețurile, butonul pentru înregistrare și logare, câmpul pentru căutare, un buton pentru vizualizarea coșului de cumpărături și meniul

Fig. 3.1.1 Antetul paginilor (header)

Conținutul paginii, diferă în funcție de ceea ce este afișat pe fiecare pagină

Fig. 3.1.2 Conținutul paginii

Subsolul (footer-ul), cuprinde datele de contact, un link spre pagina de facebook a aplicației și un meniu

Fig. 3.1.3 Subsolul paginilor (footer)

Pe pagina principală avem o prezentare de diapozitive (slideshow) în care cumpărătorul poate vizualiza unele produse pe care magazinul online încearcă să le promoveze.

Mai jos sunt prezentate cele mai vândute produse, în cadrul unui slider, acesta actualizându-se în timp real în cazul în care apar modificări substanțiale în vânzarea anumitor produse.

Urmează un așa numit “carusel”, în fapt un alt tip de slideshow, în care sunt prezentate brandurile de la care magazinul online comercializează produse.

Utilizatorul are posibilitatea de a căuta produsele dorite alegând categoria potrivită din cadrul meniului, sau cu ajutorul căsuței de căutare. Odata alese, acestea pot fi adăugate în coșul de cumpărături, având posibilitatea modificării cantității acestora, prețul total și prețul / tip produs modificându-se prin apăsarea unui simplu buton. De asemenea, utilizatorul poate vizualiza părerile celorlalți clienți referitoare la produse, sau poate adăuga propria lui opinie.

Pentru a finaliza comanda, nu ii rămâne decât să completeze câmpurile necesare: numele si prenumele, adresa și numărul de telefon.

Arhitectura

Siteul este organizat sub forma a două moduri și anume:

Utilizator – aici ii încadrăm pe clienții și vizitatorii site-ului. La rândul ei, această categorie se împarte în doua subcategorii:

Utilizator neînregistrat (nivelul 0) – poate vizualiza produsele, opiniile celorlalti clienți, dar nu poate cumpăra.

Utilizator înregistrat (nivelul 1) – poate vizualiza și modifica cantitatea de produse pe care dorește să o achiziționeze, poate adăuga opinii, poate realiza comanda.

Administrator (nivelul 2) – are acces la baza de date, acolo unde poate adăuga sau șterge produse, modifica prețuri și poate șterge anumite opinii care conțin injurii (dacă e cazul), poate inclusiv să trimită emailuri tuturor utilizatorilor abonați la Newsletterul magazinului.

În cadrul aplicației avem următoarele fișiere PHP:

Fig. 3.2.1. Fișierele PHP ale aplicației

Fișierul aboutus.php – este utilizat pentru a afișa detalii despre magazinul online Shopador.

Exemplu de cod din fișier:

Fișierul activate.php – este utilizat la activarea contului utilizatorului.

Exemplu de cod din fișier:

Fișierul add_review.php – este utilizat pentru adăugarea opiniilor clienților asupra produselor.

Exemplu de cod din fișier:

Fișierul cart.php – este utilizat pentru adăugarea produselor în coșul de cumpărături, modificarea cantității, vizualizarea coșului de cumpărături, de asemenea clientul poate să aleagă dacă dorește să finalizeze comanda sau continuă cumpărăturile.

Exemplu de cod din fișier:

Fișierul category.php – este utilizat pentru organizarea categoriile de produse.

Exemplu de cod din fișier:

Fișierul changepassword.php – este utilizat pentru schimbarea parolei.

Exemplu de cod din fișier:

Fișierul checkout.php – este utilizat pentru finalizarea comenzii.

Exemplu de cod din fișier:

Fișierul checkoutprocess.php – este utilizat pentru trimiterea comenzii și înregistrarea în baza de date a tranzacției și a vînzărilor.

Exemplu de cod din fișier:

Fișierul contact.php – este utilizat pentru afișarea datelor de contact.

Exemplu de cod din fișier:

Fișierul delivery.php – este utilizat pentru afișarea informațiilor referitoare la livrare.

Exemplu de cod din fișier:

Fișierul index.php – este prima pagină a aplicației.

Exemplu de cod din fișier:

Fișierul login.php – este utilizat pentru logare.

Exemplu de cod din fișier:

Fișierul logout.php – este utilizat pentru delogare.

Exemplu de cod din fișier:

Fișierul mail.php – este utilizat de administrator pentru a trimite emailuri cu oferte / produse nou adăugate pe site tuturor utilizatorilor abonati la Newsletter.

Exemplu de cod din fișier:

Fișierul privacypolicy.php – este utilizat pentru afișarea informațiilor referitoare la drepturile și obligațiile firmei fată de datele personale ale utilizatorilor.

Exemplu de cod din fișier:

Fișierul product.php – este utilizat pentru afișarea produselor.

Exemplu de cod din fișier:

Fișierul protected.php – este utilizat pentru a proteja accesarea unor pagini de utilizatorii care nu sunt logati.

Exemplu de cod din fișier:

Fișierul recover.php – este utilizat pentru recuperarea parolei sau a numelui de utilizator.

Exemplu de cod din fișier:

Fișierul register.php – este utilizat pentru înregistrare noilor utilizatori.

Exemplu de cod din fișier:

Fișierul search.php – este utilizat pentru căutarea unor produse în funcție de cuvinte cheie.

Exemplu de cod din fișier:

Fișierul settings.php – este utilizat pentru schimbarea unor setări ale utilizatorului.

Exemplu de cod din fișier:

Fișierul aside.php – este un widget și este utilizat pentru a schimba o parte din header dacă utilizatorul este logat sau nu.

Exemplu de cod din fișier:

Fișierul footer.php – este utilizat pentru realizarea subsolului paginii.

Exemplu de cod din fișier:

Fișierul head.php – este utilizat pentru includerea fișierelor necesare bunei funcționări a website-ului, aici este denumit titlul paginii etc.

Exemplu de cod din fișier:

Fișierul header.php – este utilizat pentru realizarea antetului paginii.

Exemplu de cod din fișier:

Fișierul connect.php – este utilizat pentru conectarea la baza de date.

Exemplu de cod din fișier:

Fișierul general.php – este utilizat pentru declararea câtorva funcții utilizate în cadrul website-ului.

Exemplu de cod din fișier:

Fișierul users.php – este utilizat pentru declararea funcțiilor ce țin de înregistrarea utilizatorului, schimbarea parolei, recuperarea parolei, etc.

Exemplu de cod din fișier:

Fișierul init.php – este utillizat pentru declanșarea sesiunii curente și salvarea datelor utilizatorului din această sesiune.

Exemplu de cod din fișier:

Fișierul loggedin.php – este utilizat pentru a afișa în antet faptul ca userul este logat.

Exemplu de cod din fișier:

Fișierul login.php – este utilizat pentru a afișa în antet opțiunea utilizatorului de a se loga.

Exemplu de cod din fișier:

Funcționalități

Aplicația este alcătuită din următoarele 15 pagini:

Prima pagină

Pagină destinată înregistrării noilor clienți

Pagină destinată afișării unui mesaj după activarea contului

Pagină destinată setărilor contului utilizatorului

Pagină destinată schimbării parolei contului utilizatorului

Pagină destinată recuperării numelui de utilizator sau parolei

Pagină destinată categoriilor de produse

Pagină destinată fiecărui produs în parte

Pagină destinată coșului de cumpărături

Pagină destinată finalizării comenzii

Pagină destinată afișării rezultatelor în urma căutării efectuate

Pagină destinată afișării informațiilor despre firmă

Pagină destinată afișării politicii firmei

Pagină destinată afișării informațiilor referitoare la livrarea produselor

Pagină destinată afișării datelor de contact

Toate aceste pagini sunt foarte importante pentru utilizator în vederea creării unei experiențe cât mai plăcute la achiziționarea produselor, în speranța că atunci când va dori să achiziționeze un nou produs, acesta va alege din nou magazinul nostru.

Încă din accesarea primei pagini putem observa interfața user-friendly, fie că facem acest lucru de pe calculator unde avem parte de o rezoluție full HD 1920 x 1080 pixeli, fie că facem acest lucru de pe telefon, de pe o rezoluție 480 x 800 pixeli. Toate elementele aplicației sunt poziționate intuitiv, pentru o experiență cât mai rapidă și mai placută.

Primul element care se poate observa pe pagină este logo-ul magazinului:

Fig. 3.3.1 Logo

Acesta are în primul rând rol de marketing, dar printr-un singur click redirecționează utilizatorul / clientul spre pagina principală.

Codul sursă pentru inserarea logoului în cadrul antetului:

Etapele necesare pentru cumpărarea unui produs:

În meniu, la opțiunea “Category” (Categorie) se află categoriile de produse. Denumirile acestora sunt extrase din baza de date.

Fig. 3.3.2 Meniu → Categoriile de produse

Fig. 3.3.3 Categorii → Telefoane: rezoluție 1920 x 1080

Fig. 3.3.4 Categorii → Telefoane: rezoluție 720 x 1024

Clientul accesează categoria care îl interesează, după care își alege produsul preferat. La rândul lor, denumirile acestor produse sunt extrase din baza de date și sunt afișate dinamic în pagina “produs.php”. Practic, în aceeași pagină sunt afișate produse diferite, în funcție de categoria selectată. Aici sunt afișate: denumirea produsului, brandul, prețul și detaliile referitoare la produs. De aici până la adăugarea produsului în coș, mai este un singur pas: apăsarea butonului “Add to cart”.

Fig. 3.3.5 Pagina produs.php corespunzătoare produsului Galaxy S5: rezoluție 1920 x 1080

Fig. 3.3.6 Pagina produs.php corespunzătoare produsului Galaxy S5: rezoluție 480 x 800

De asemenea, clientul își poate împărtăși propria părere referitoare la produs alături de ceilalți membrii ai comunității prin simpla completare a formularului din imaginea de mai sus. (pentru a micșora efortul depus de utilizator, numele si adresa de e-mail sunt completate automat de către aplicație, fiind extrase din baza de date).

În stânga, avem o galerie foto, putând da zoom prin simpla mutare a cursorului deasupra imaginii. Daca apăsăm click pe imagine, aceasta se deschide în format mare.

Fig. 3.3.7 Zoom pe imaginile produselor

Fig. 3.3.8 Imagine mărită a unui produs

Coșul de cumpărături poate fi vizualizat de îndată ce am adăugat produsul, dar și ulterior dacă dăm click pe butonul din dreapta sus “Your cart”. Aici putem vedea produsele într-un minicoș, dar prin acționarea butoanelor “View cart” și “Checkout” putem vizualiza pagina destinată coșului de cumpărături, respectiv putem finaliza comanda.

Fig. 3.3.9 Minicoș inclus in antet (header)

Fig. 3.3.10 Coșul de cumpărături

Odată ajuns aici, clientul poate să modifice cantitatea unui produs prin introducerea cantității dorite în dreptul coloanei “Quantity” (Cantitate) urmată de apăsarea butonului “Update”, poate să finalizeze comanda (“Checkout”), sau poate să își continue cumpărăturile (“Continue shopping”). Pentru ștergerea unui produs din coș, acesta trebuie sa introducă cifra “0” în căsuța destinată cantității și să apese pe butonul “Update”.

Pentru finalizarea comenzii trebuie să completăm câmpurile necesare, să alegem metoda de plată și să confirmăm comanda dupa o ultimă vizualizare a produselor din coșul de cumpărături.

Fig. 3.3.11 Pagina de finalizare a comenzii

Completarea câmpurilor “Nume și prenume”, “Adresă” și “Telefon”:

Fig. 3.3.12 Prima etapă: completarea câmpurilor necesare

Alegerea metodei de plată (pentru moment este implementată o singură metodă):

Fig 3.3.13 A doua etapă: alegerea metodei de plată

Confirmarea comenzii:

Fig. 3.3.14 Confirmarea comenzii

După confirmarea comenzii, clientul nostru primește un email cu produsele comandate, numele și adresa trecute de acesta.

Aceasta este o pagină prin care administratorul poate să trimită e-mail tuturor persoanelor abonate la newsletter.

Fig. 3.3.15 Pagină pentru trimiterea de newsletter de către adminsitrator

Baza de date

Baza de date a fost creată în MySQL, cu ajutorul aplicației WampServer, aceasta având inclusă în cadrul ei o interfață numită phpMyAdmin, construită cu ajutorul limbajului PHP. Legătura dintre baza de date și aplicație este realizată în PHP. Accesul la baza de date este destinat strict administratorului.

Baza de date a acestei aplicații este alcătuită din 10 tabele:

Category (Categorie)

Manufacturer (Producător)

Products (Produse)

Reviews(Opinii)

Sales (Vânzări)

Textaboutus (conține textul paginii “aboutus.php”)

Textdelivery (conține textul paginii “delivery.php”)

Textprivacypolicy (conține textul paginii “privacypolicy.php”)

Transactions (Tranzacții)

Users (Utilizatori)

Fig. 3.4.1 Structura bazei de date

Tabelul Category (Categorii) conține:

Id_categ – identificator care se incrementează automat la adăugarea unei noi categorii

Name – denumirea categoriei

Fig 3.4.2 Structura tabelului Category

Tabelul Manufacturer (Producător) conține:

Id_manufacturer – identificator care se incrementează automat la adăugarea unui nou producător

Name_prod – denumirea producătorului

Fig 3.4.3 Structura tabelului Manufacturer

Tabelul Products(Produse) conține:

Id_product – identificator care se incrementează automat la adăugarea unui nou produs

Id_manufacturer – identificator care trebuie să corespundă cu același câmp, din tabelul Manufacturer

Id_categ – identificator care trebuie să corespundă cu același câmp, din tabelul Category

Name – Denumirea produsului

Description – Detalii referitoare la produs

Price – prețul produsului

Fig 3.4.4 Structura tabelului Products

Tabelul Reviews(Opinii) conține:

Id_review – identificator care se incrementează automat la adăugarea unei noi opinii

Id_product – identificator introdus automat de către aplicație (extras din tabelul Products – id_product), în funcție de produsul despre care ne exprimăm opinia

User_name – numele utilizatorului care își exprimă opinia

Email – emailul utilizatorului care ăși exprimă opinia

Review – textul comentariului adăugat

Fig 3.4.5 Structura tabelului Reviews

Tabelul Sales(Vânzări) conține:

Id_transaction – identificator care se incrementează automat la adăugarea unei noi tranzacții

Id_product – identificator introdus automat de către aplicație (extras din tabelul Products – id_product), în funcție de produsul vândut

Items – numărul de produse vândute, având id-ul respectiv

Fig 3.4.6 Structura tabelului Sales

Tabelul Textaboutus conține:

Id_text – identificator care se incrementează automat la adăugarea unui nou text

Title – subtilul paragrafului

Text – paragraful de text

Fig 3.4.7 Structura tabelului Textaboutus

Tabelul Textdelivery conține:

Id_text – identificator care se incrementează automat la adăugarea unui nou text

Title – subtilul paragrafului

Text – paragraful de text

Fig 3.4.8 Structura tabelului Textdelivery

Tabelul Textprivacypolicy conține:

Id_text – identificator care se incrementează automat la adăugarea unui nou text

Title – subtilul paragrafului

Text – paragraful de text

Fig 3.4.9 Structura tabelului Textprivacypolicy

Tabelul Transactions conține:

Id_transaction – identificator care se incrementează automat la adăugarea unei noi tranzacții

Date – data la care a fost înregistrată tranzacția

Buyer_name – numele cumpărătorului

Buyer_address – adresa cumpărătorului

Delivered – optiune care este setată implicit cu valoarea“0”, dar se schimbă în “1” de îndată ce produsele au fost livrate clientului

Payment_method – opțiunea este setată implicit 1 deoarece în momentul de față avem o singură metodă de plată a comenzilor

Fig 3.4.10 Structura tabelului Transactions

Tabelul Users conține:

User_id – identificator care se incrementează automat la înregistrarea unui nou utilizator

Username – numele utilizatorului

Password – parola contului utilizatorului

First_name – prenumele utilizatorului

Last_name – numele de familie al utilizatorului

Email – emailul utilizatorului

Email_code – reprezintă un cod care vine inclus în linkul pe care îl primim prin email dacă am uitat numele de utilizator sau parola

Active – opțiune setată implicit cu valoarea “0”, dar se modifică în “1” de îndată ce utilizatorul și-a activat contul

Password_recover – opțiune setată implicit cu valoarea “0”, dar se modifică în “1” dacă utilizatorul a cerut recuperarea parolei, dar încă nu a modificat-o

Type – se referă la nivelul de acces al contului (“0” pentru utilizatori normali și “1” pentru admin)

Allow_email – opțiune de abonament la newsletterul magazinului (“0” pentru nu și “1” pentru da)

Fig 3.4.11 Structura tabelului Users

Diagrama bazei de date:

Concluzii

În ziua de azi, comerțul online se află într-o adevărată perioadă de “boom”. Crește de la an la an, iar în următorii 4 ani se preconizează că valoarea vânzărilor realizate pe internet se va dubla.

Este probabil cea mai ușoară și ieftină metodă de promovare a produselor și serviciilor prestate de firme și aduce beneficii de ambele părți. Antreprenorii își reduc cheltuielile pe care le-ar fi impus un magazin de desfacere: chiria, angajații, cheltuieli de întreținere etc și sunt la dispoziția clienților zi și noapte deoarece magazinele online nu se închid niciodată, acesta constituind un mare avantaj pentru că în general persoanele ocupate dețin o putere de cumpărare mai mare și neavând destul timp se văd obligate să își facă cumpărăturile seara de acasă, sau în timpul zilei de la locul de muncă. Câștigurile nu vin numai din vânzări, iar în cazul unor magazine online cu un trafic destul de ridicat, profitul crește prin postarea unor reclame publicitare pe paginile website-ului.

Și consumatorii / clienții au de câștigat de pe urma acestui tip de afacere: economisesc timp deoarece nu mai trebuie să se deplaseze până la magazin și să se plimbe printre raioane pentru a găsi ceea ce caută, iar produsele sunt livrate la domiciliu, scutindu-i astfel de acest deranj.

Odată cu trecerea timpului multe site-uri încep să capete notorietate datorită numărului de clienți în creștere, însă întotdeauna va rămâne loc pentru o afacere nouă, bine structurată, care aduce ceva nou și de viitor. Un element care în viitor va fi indispensabil este responsivitatea website-ului. Aceasta a fost și principala mea motivație atunci cand am ales această temă. Există multe magazine online, dar marea lor majoritate nu sunt responsive. Cu o tehnologie care avansează într-un mod amețitor, aplicațiile trebuie să țină pasul. Smarthphone-urile și tabletele capătă o cotă de piață tot mai mare și tot mai mulți oameni tind nu doar să își facă cumpărăturile de pe internet, ci să le facă de pe telefon sau tabletă. Astfel, un website responsiv poate să ofere multiple variante pentru client (clienții doresc să aibă cât mai multe opțiuni, chiar dacă pe multe dintre ele nu le vor folosi niciodată) și oferă o arie de acoperire mai mare pentru antreprenor.

Bibliografie

Avantajele și dezavantajele unui magain online – http://mybusiness.md/ro/categories/item/627-avantajele-%C5%9Fi-dezavantajele-unui-magazin-online – consultat la 02.06.2014

HTML, CSS, PHP, MySQL – http://www.scrigroup.com/calculatoare/calculatoare/PROIECT-PCcomponents-Magazin-o51711.php – consultat la 08.06.2014

PHP – http://ro.wikipedia.org/wiki/PHP – consultat la 08.06.2014

Javascript – http://proiectul.wordpress.com/ – consultat la 08.06.2014

PHP – http://www.scribd.com/doc/27660532/McCarty-Bill-PHP-4 – consultat la 10.06.2014

PHP – http://www.scribd.com/doc/212344231/Aplicatii-Web-La-Cheie-studii-de-Caz-Implementate-in-Php-Ro-Sabin-Buraga-Ed-Polirom-2003 – consultat 11.06.2014

Slideshow – http://www.magictoolbox.com/magiczoomplus/examples/ – consultat 15.06.2014

WampServer – http://it.wikipedia.org/wiki/WampServer – consultat 17.06.2014

Notepad++ – http://en.wikipedia.org/wiki/Notepad++ – consultat 17.06.2014

Sublime Text 2 – http://en.wikipedia.org/wiki/Sublime_Text – consultat 17.06.2014