Specializarea: Informatică [304117]

UNIVERSITATEA „LUCIAN BLAGA“ DIN SIBIU

FACULTATEA DE ȘTIINȚE

Specializarea: Informatică

LUCRARE DE LICENȚĂ

Sibiu

2019

UNIVERSITATEA „LUCIAN BLAGA“ DIN SIBIU

FACULTATEA DE ȘTIINȚE

Specializarea: Informatică

Realizarea unui magazin online pentru vânzarea de produse pet shop

Sibiu

2019

Introducere

Tema de licență reprezintă o [anonimizat] s-a [anonimizat] a pune înspre vânzare produse de tip pet shop.

Mediul de programare pentru dezvoltarea aplicației, a fost ales Notepad++ [anonimizat], [anonimizat], C++, HTML, astfel se pot crea aplicații complexe.

[anonimizat], detalii despre produs și posibilitatea de a comanda produsul. [anonimizat].

Lucrarea a fost împărțită în 3 [anonimizat]. În primul capitol numit „Rolul internetului în zilele noastre“ sunt prezentate câteva avantaje și dezavantaje ale internetului și a [anonimizat] o să fie prezentată o descriere a aplicației și modul de funcționare acesteia.

În capitolul 2, acesta fiind numit „Tehnologii utilizate“ vor fi prezentate limbajele utilizate pentru a [anonimizat] a fost ales fiecare limbaj precum și explicarea determinării alegerii temei.

În capitolul 3, acesta fiind ultimul și care are numele „Prezentarea aplicației“ vor fi prezentați detaliat toți pașii care au fost realizați pentru dezvoltarea aplicației. Capitolul acesta va conține și imagini din codul sursă pentru a ajuta la o înțelegere mai bună a programului.

Obiectivele lucrării: -[anonimizat], iar în cele din urmă posibilitatea de a comanda produsele dorite. Cu ajutorul acestei aplicații se încearcă o metodă mai rapidă de a [anonimizat] o scurtă descriere generală a acestora.

Rolul internetului în zilele noastre

În momentul de față tehnologia s-a [anonimizat] o mulțime de avantaje. Odată cu apariția internetului și a [anonimizat], tablete a [anonimizat].

Avantajele și dezavantajele ale utilizării internetului

Avantajele utilizării internetului sunt următoarele:

[anonimizat];

Posibilitatea de a căuta mai ușor prețul ideal;

Returnarea produselor făcânduse mai rapid și cu mai puțin efort;

Ajută cumpărătorii să se acomodeze cu tehnologia și îi ajută să afle mai usor ultimele noutăți;

Dezavantajele utilizării internetului:

[anonimizat] o mulțime de lucruri postate și care nu sunt neapărat adevărate;

Se pierde mult timp, deoarece multe persoane nu știu cum sa utilizeze internetul în mod corespunzător;

Datele personale sunt în pericol odată ce utilizăm internetul, cauzând fraude sau ilegalități;

Datorită punctelor pozitive prezentate mai sus și a faptului că dacă ști să utilizezi internetul în mod eficent poate ajuta pe oricine, am dorit să dezvolt o aplicație web aceasta având rolul de a oferi utilizatorului accesul mai rapid la produsele dorite, având în vedere faptul că timpul în zilele noastre a devenit o problema, acesta fiind prea scurt.

Descriere platformei Pet Shop în câteva rânduri

Platforma Pet Shop poate fi accesată de orice utilizator, aceasta fiind vizibilă fara a fi nevoie de crearea unui cont. Se pot vizualiza toate produsele disponibile precum și o mică descriere generală a acestora. Există și pagină de administrator, accesul la această pagină fiind restricționată. Pentru a putea accesa pagina de administrator trebuie să completezi formularul de logare. Odată logat pe pagina de administrare utilizatorul are posibilitatea să șteargă produse sau să le editeze, dar și să adauge un utilizator nou care va primi permisiunea de admin sau editor. Adminul poate să adauge produse, categorii, specii fără sa mai acceseze baza de date.

Tehnologii utilizate

Pe lângă mediul de programare Notepad++ care a fost folosit în dezvoltarea aplicației, au mai fost utilizate și limbajele de programare HTML, CSS, PHP, Bootstrap, JQuery, Ajax, Javascript, iar ca și server web a fost folosit PhpMyAdmin și Xammp.

Mediul de programare Notepad++

Notepad++ este un editor de text și un editor de cod sursă, acesta are rolul de a oferi utiliziatorului posibilitatea de a edita un fișier, dar și beneficiul de a lucra cu mai multe fișiere în aceeași fereastră. Notepad++ fiind un software gratis, acesta dispune de evidențierea sintaxelor, de plierea codurilor.

Notepad++ poate deschide sau poate crea fișiere text simplu de tip cross-platform, acesta poate reinterpreta fișierele de text simplu în diverse codări de carcatere și le poate converti în ASCII, UTF-8 sau UCS-2.

Notepad++ beneficează de caracteristici care ajută la îmbunătățirea mediului de editare a textului, unele din acestea fiind :

Salvarea automata a fișierului

Editarea simultană

Operații liniare, sortare, conversia carcasei (litere mari, litere mici)

Elimină spațiile libere reduntate

Notepad++ are suport pentru macro-uri si plugin-uri, fiind remarcat de structura lui care permite includerea diferitelor caracteristici în program. În prezent sunt peste 140 de plugin-uri compatibile cu Notepad++, dintre care 10 sunt incluse în program.

Primul plugin inclus în program a fost „TextFX“, acesta include validarea W3C pentru HTML și CSS, care au rolul să sorteze textul, să modifice caractere sau să manipuleze cote.

Notepad++ are o interfață simplă, iar acest lucru se poate observa în figura 2.1.[1]

Figura 2.1: Interfață Notepad++

Limbajul CSS

Limbajul CSS are rolul de a ajuta programatorul să aranjeze obiectele paginii html, iar denumirea completă fiind Cascading Style Sheets. Toate elementele de la stilul scrisului, culoare, mărime, poziție, forme butoane, imagini și alte obiecte ce pot fi puse pe o pagină web sunt aranjate prin CSS. Aceste caracteristici ale elementelor pot fi stocate în pagina unde sunt folosite prin tag-ul <style> sau chemate din alte fișiere externe dar care sa aibă extensia css.

Pentru a aranja obiectele paginii cu css se pot folosi mai multe metode, printre aceste metode se află si aceea de a modifica stilul obiectelor în partea de head a paginii, după cum se poate observa în imaginea 2.2.

Figura 2.2: Aranjarea obiectelor în partea de head a paginii

Pentru a utiliza caracteristicile obiectelor dintr-un fișier extern, aceste caracteristici trebuie sa fie salvate într-un fișier cu extensia .css și numele fișierului sa fie oferit în pagina unde se dorește utilizarea acelor caracteristici, așa cum a fost procedat în figura 2.3

Figura 2.3: Aranjarea obiectelor dintr-un fișier extern

Aceste specificații ale obiectelor se mai pot adăuga chiar în interiorul tag-ului din care obiectul face parte, conform figurii 2.4, în care titlul este modificat chiar în tag-ul h1.

Figura 2.4: Aranjarea obiectelor în tag-ul care suporta modificarile aspectului

Prin urmare cu ajutorul limbajului CSS se pot aranja o mulțime de pagini html, în interiorul paginii în care sunt utilizate sau din exterior cu ajutorul fișierelor externe care au extensia .css. Dacă se folosește fișierul extern pentru a aduce modificări site-ului, acesta poate fi utilizat pentru toate paginile pe care le conține site-ul.[2]

Limbajul PHP

Informații generale despre limbajul PHP

PHP provine din limba engleză și este un acronim pentru Hypertext Preprocessor. Acest limbaj este folosit pentru a crea pagini web dinamice. De obicei este folosit în interiorul codului HTML, dar se poate utilize și ca linie de comandă, având rolul de a crea aplicații independente. Este unul dintre cele mai populare limbaje de programare server-side și open-source, iar popularitatea a dobândito datorită urmatoarelor caracteristici:

Sintaxa limbajului este una destul de ușoară, datorită faptului că în compoziția comenzilor pe care acest limbaj le utilizeaza s-au contopit comenzile unor limbaje foarte populare

Sintaxa limbajului este destul de liberă, nu necesită sa fie inclus în biblioteci sau în directive de compilare, codul PHP este executat într-un fișier dacă este scris între marcajele specifice limbajului

Pune la dispoziția programatorului un set flexibil și eficient de măsuri de siguranță

PHP este un limbaj flexibil, acesta fiind integrat în numeroasele servere web existente: Apache, IIS, Zeus, etc.

Gratuitatea se număra printre cele mai importante caracteristici ale acestui limbaj

Acest limbaj poate fi rulat pe majoritatea sistemelor de operare, cum ar fi UNIX, Windows, sau Mac OS X. Codul PHP este interpretat de serverul WEB și genereaza un cod HTML care este văzut de utilizatorul site-ului.

Server-ul Web(Xampp)

Pentru a ne putea folosi de codurile scrise în Php vom avea nevoie de un server, care să stocheze datele necesare, pentru asta trebuie să instalăm aplicația Xampp, deoarece în pachetul său se regăsesc Apache, Php și PhpMyAdmin. Pentru a porni server-ul trebuie să apăsăm pe butonul de start în dreptul linii unde se află Apache, iar dacă dorim să lucrăm și cu BD, trebuie să apăsăm pe butonul de start și în dreptul linii unde se află MySQL. Pentru a avea acces la aplicația noastră, trebuie să deschidem un browser, iar în câmpul de adrese este nevoie să scriem adresa aceasta: http://localhost/NumeleAplicatiei, iar un aspect foarte important este acela că fișierele aplicației trebuie să se afle în folderul unde este instalat Xampp-ul, în fișierul htdocs.

Figura 2.5: Interfața aplicației Xampp

Instrucțiuni și tag-uri PHP

Pentru a putea fi folosit codul scris în limbajul PHP, acesta trebuie să fie introdus între tag-urile specifice limbajului, cele mai întâlnite fiind <?php reprezentând începutul tag-ului pentru a utiliza limbajul PHP, iar /> sfârșitul tag-ului. Tot ce se află în acele tag-uri va fi interpretat ca și cod PHP, iar textul din afara acelor tag-uri o sa rămână neschimbat. Mai există si alte tipuri de tag-uri, dar nu sunt recomandate.

Figura 2.6: Tipuri de tag-uri

Codul PHP este format din mai multe comenzi sau instrucțiuni, iar cu ajutorul acestora se execută ceva. Acest cod este folosit în general pentru a genera cod HTML, deci în cele mai multe cazuri instrucțiunile folosite sunt pentru a afișa, dar se pot folosi și alte comenzi pentru aplicații mai complexe, cum ar fi de conectare la baza de date, de citire, scriere, trimitere email-uri și multe altele. Instrucțiunile pot fi grupate și în blocuri, dar acestea trebuie să fie delimitate de acolade. Instrucțiunile ce se află între acolade se comportă ca o singură instrucțiune de aceea se mai numesc și instrucțiuni complexe. Toate instrucțiunile trebuie să se termine cu punct și virgulă.

În cele din urmă limbajul PHP este foarte popular, deoarece îmbunătățirile care apar ușurează munca programatorilor.[3]

Bootstrap

Bootstrap ajută la dezvoltarea site-ului pe partea de design, acesta conține bucăți de cod folosit la design, din HTML și CSS. Bootstrap poate crea componente comune ale interfeței, de exemplu tabele, butoane, formulare și multe altele. Acest framework are rolul de a ajuta programatorul să ofere un aspect plăcut al site-ului fără a pierde prea mult timp pe partea de design.

Printre beneficile pe care le oferă Bootstrap se află gratuitatea sa și faptul că oferă un set mare de instrumente, cu ajutorul cărora se pot crea componente ale paginii, cu o singură linie de cod. Beneficile utilizării Bootstrap:

Economisești mult timp – Se poate economisi foarte mult timp și efort dacă folosim șabloanele și clasele predefinite

Funcți receptive – Se pot crea repede site-uri care să aibă un aspect adecvat pe diferite dispozitive si rezoluții

Ușor de folosit – Oricine cu cunoștințe de bază de lucru în HTML,CSS și JavaScript poate începe să foloseasca Bootstrap

Compatibil cu browserele – Bootstrap este creat împreună cu browserele moderne și este compatibil cu acestea. Exemple de browsere compatibile cu Bootstrap: Internet Explorer, Chrome, Firefox etc.

De reținut este faptul că unele proprietăți utilizate fac parte din CSS3, acestea având rolul de a rotunji colturi sau de a adăuga umbre și sunt folosite de către Bootstrap, nu sunt acceptate de către versiunile mai vechi ale browserelor.[4]

Limbajul JavaScript

JavaScript a fost creat deoarece era nevoie ca logica și inteligența să fie și pe partea de client, nu doar pe partea de server. Acest limbaj are rolul de a înzestra clientul, astfel se crează un adevărat sistem client-server.

JavaScript conține o listă mare de funcții și comenzi care au rolul să ajute la efectuarea de operații matematice, manipulări de șiruri, sunete, imagini, obiecte și ferestre ale browseru-lui, link-urile URL și verificări de introduceri ale datelor în formulare. Se că sunt 10 aspecte fundamentale ale limbajului pe care orice programator ce folosește acest limbaj ar trebui să le cunoască:

JavaScript poate fi introdus în HTML – JavaScript este găzduit și executat în fișierele HTML. Aproape toate obiectele pe care le are JavaScript au etichetele HTML, reprezentândule. Astfel programul este inclus pe partea de client al limbajului.

JavaScript este dependent de mediu – JavaScript este un limbaj de scriptare, rularea scriptului o face defapt browser-ul web. Este foarte important să cunoaștem acest lucru atunci când utilizăm aplicații ce conțin JavaScript.

JavaScript este un limbaj în totalitate interpretat – Codul scriptului este interpretat de browser înainte să fie executat. Dezavantajul acestuia fiind timpul, rulează mai mult deoarece comenzile vor fi citite de browser și procesate atunci când utilizatorul apelează acele funcții, iar avantajul este că putem actualiza mai ușor codul sură.

JavaScript este un limbaj flexibil – Putem declara o variabilă de un anumit tip, sau putem să lucrăm cu o variabilă chiar dacă nu îi cunoaștem tipul.

JavaScript este bazat pe obiecte – Nu este un limbaj de programare orientat pe obiect, acest limbaj fiind defapt bazat pe instanță și nu pe moștenire.

JavaScript este condus de evenimente – codul JavaScript în mare parte răspunde doar la acțiuni create de utilizator sau de sistem, de exemplu butoane.

JavaScript nu e Java – Sunt concepute de companii diferite, denumirile asemănătoare se datorează marketing-ului.

JavaScript este multifuncțional – Este folosit în diferite locuri pentru a rezolva probleme: grafice, matematice si altele.

JavaScript evolueaza – Limbajul evoluează, acest lucru poate fi atât pozitiv cât si unul negativ, deoarece programatorii trebuie sa urmărească mereu noutățile.

JavaScript acoperă contexte diverse – programarea cu acest limbaj se axează pe partea de client, dar se poate folosi și pe partea de Server.[5]

AJAX

AJAX reprezintă Asynchronous JavaScript și XML. AJAX este o tehnică nouă prin care aplicațiile web devin mai rapide, mai bune și mai interactive cu ajutorul XML CSS și JavaScript.

AJAX folosește XHTML, pentru continur, iar CSS pentru prezentare și JavaScript pentru a afișa conținutul mai dinamic.

Aplicațiile web convenționale transmit informații de la server și spre server cu ajutorul cererilor sincrone.

Cu AJAX când utilizezi trimiterea, JavaScript face o cerere către server, acesta interpretează rezultatele și actualizează ecranul curent. Utilizatorul nu realizează că a fost ceva trimis chiar pe server.

AJAX este o tehnologie de browser web independentă față de software-ul server-ului web.

Utilizatorul poate continua să utilizeze aplicația chiar în timp ce programul client cere informații din server în fundal

AJAX se mai bazează pe următoarele standarde deschise:

Pentru a fi prezentate informații pe pagina de browser folosește HTML și CSS

Datele sunt stocate în format XML și preluate de server

Folosește JavaScript pentru a face totul să se întâmple [7]

Jquery

Jquery este un framework JavaScript care are rolul să permită programatorului să scrie aplicația web fără să își facă griji față de incompabilitatea între browsere. Jquery conține mai multe comenzi, acestea dacă ar fi scrise in limbajul JavaScript ar necesita să fie scrise în mai multe rânduri de cod, dar cu ajutorul lui Jquery se pot realiza acele lucruri doar cu o singură linie de cod.

Caracteristicile bibliotecii Jquery:

Efecte și animație

Cereri tip Ajax

Utilități și anume versiunea browser-ului prin funcția each

Manipularea elementelor CSS

HTML/ Manipulare DOM

Parcurgerea și modificarea arborelui DOM

Înregistrarea și modificarea evenimentelor din browser

Jquery este o bibliotecă JavaScript proiectată pentru a ușura traversarea și manipularea HTML DOM, precum și manipularea evenimentelor și a animației CSS și Ajax. Jquery poate fi folosit pentru a găsi un element în document cu o anumită proprietate, de exemplu toate elementele care au tag-ul h1, poate modifica culoarea unui sau mai multor atribute, cum ar fi culoarea sau vizibilitatea.

Principiile de dezvoltare cu jQuery sunt:

Separă JavaScript și HTML – Biblioteca Jquery oferă o sintaxă simplă pentru adăugare de agenți de procesare a evenimentelor DOM utilizând JavaScript, mai degrabă decât adăugarea atributelor evenimentului HTML pentru a apela funcțiile JavaScript. Astfel prin acest prim principiu, dezvoltatorii

Claritate – Jquery promovează claritatea cu funții ăn lanț și numele funcțiilor de stenografie

Eliminarea incompatibilităților încrucișate în browser – Ca și alte unelte de instrumente JavaScript, Jquery se ocupă de toate aceste inconsecvențe încrucișate în browser șo oferă o interfață consistentă care funcționează în diferite browsere

Extensibilitate – noi evenimente, elemente și metode pot fi ușor adăugate și apoi reutilizate ca plugin [7]

Motivarea și determinarea alegerea tehnologiilor folosite

Acvaristica reprezintă o plăcere de-a mea, acasă am două acvarii cu pești, de multe ori când doresc să mă relaxez stau și privesc peștii din acvariu. În zona în care mă aflu s-au desfințat majoritatea pet shop-urilor, astfel m-am gândit să fac un magazin online care să aibă produse de tip pet shop bazat în special pe articole de acvaristică.

Am ales să lucrez în Notepad++, deoarece pot fi scrise în el foarte multe limbaje de programare și că are o interfață simplă care nu necesită mult timp sau conoștințe pentru a o înțelege. De asemenea majoritatea tehnologiilor pe care le-am folosit în crearea aplicației le-am studiat de-a lungul anilor în facultate, acest lucru influențându-mă să le aleg.

Prezentarea aplicației

Aplicația creată reprezintă o platformă online pentru vânzarea produselor de tip pet shop, aceasta putând fi realizată cu ajutorul tehnologiilor descrise mai sus. Conținutul paginilor sunt create dinamic, iar datorită acestui lucru nu este necesar să intrăm de fiecare dată în baza de date când dorim să adăugăm, să modificăm sau să ștergem un produs, deoarece putem realiza acest lucru cu ușurință de pe pagina de administrare. Din interiorul paginii de administrare se pot aduce toate modificările posibile la produsele din magazin, chiar și adăugarea sau ștergerea produselor, categoriilor sau specilor de pești.

Pentru a realiza aplicația am început cu crearea bazei de date, aceasta având numele de „petshop“ unde au fost introduce datele produselor. Am creat baza de date în PhpMyAdmin, iar în interiorul acesteia am mai creat cinci tabele cu numele: categorii, cos, produse, specii și utilizatori.

În tabelul categorii, se află diferite categorii de produse, de exemplu: pești apă dulce, pești apă sărată, sanitari etc., dar și subcategorii acestea fiind cele care în coloana părinte cifra este diferită de 0.

Figura 3.1: Tabelul de categorii

În tabelul cos se vor adăuga produsele care sunt dorite să fie cumpărate de către clientul magazinului.

Figura 3.2: Structura tabelului cos

Tabelul produse este cel mai complex, deoarece aici am introdus aproape datele referitoare la produsele care sunt în baza de date, acest tabel având cele mai multe coloane. Tabelul acesta conține coloana id, în care se memorează prin autoincrementare un număr, apoi se află coloana nume, în această coloana este trecut numele produsului, în cazul nostru al peștelui, pe urmă este coloana pret, unde regăsim prețul vechi al produsului, în continuare este coloana ultimul_pret, unde se află pretul redus al produsului, apoi este coloana specie, acolo se află specia din care face parte peștele, urmează coloana categorie, unde se află categoria din care face parte peștele, apoi urmează coloana imagine, acolo este introdusă adresa imaginii cu produsul oferit spre vânzare, apoi urmează coloana descriere unde este o scurtă descriere a produsului, în coloana recomandari specifică daca produsul este recomandat sau nu, acesta ia valori de 0 și 1, apoi în tabelul marime se află dimensiunile peștilor și cantitatea peștilor care sunt disponibili spre vânzare, iar în coloana eliminat se specifică dacă produsul a fost sau nu eliminat din magazin, această coloană folosind tot valori între 0 și 1.

Figura 3.3: Structura tabelului produse

În tabelul specii se află toate specile din care pot să facă parte peștii aflați în magazin.

Figura 3.4: Structura tabelului specii

În ultimul tabel numit utilizatori se află datele persoanelor care pot aduce modificări pe partea de administrare a magazinului online. Acest tabel are 7 coloane, acestea fiind id, nume_complet, email, parolă, data_inscriere, ultima_logare și permisiuni.

Figura 3.5: Structura tabelului utilizatori

În continuare voi explica ce poate modificaadminul asupra magazinului, cum se poate conecta la pagina care îi permite să facă modificări și cum au fost create paginile care fac modificările.

Pentru a putea aduce modificări în magazin este nevoie ca administratorul să se conecteze în partea de administrare a site-ului copletând câmpurile unui formular cu mail-ul și parola de admin. Pe această pagină de logare se află cele două câmpuri ce trebuiesc completate, dar și un buton de login și un link către pagina principală a site-ului.

Figura 3.6: Formularul de logare

Nu putem să accesăm o pagină din partea de administrare fără să ne fi logat, deoarece v-om fi avertizați de către o eroare.

Figura 3.7: Eroare la accesarea paginilor de administrare fără a fi logat

Acest lucru este datorită funcției de eroare_logare_redirectionare, care în caz că o persoană doreste să aducă modificări produselor din magazin fără sa se logheze va primi această eroare și va fi redirecționat spre formularul de logare. Această funcție este apelată la începutul fiecărei pagini web care are ca scop modificarea produselor din magazin.

Figura 3.8: Funcția care afișează erori față de paginile din partea de administrare

În cazul în care persoana care dorește să acceseze partea de administrare a magazinului și greșește datele de logare acesta va fi atentionat prin erorile primite.

Figura 3.9: Afișare erori la greșirea datelor de logare

Dacă datele sunt completate corect, se va face conectarea la pagina de administrator, unde se pot aduce modificări magazinului în baza de date direct de pe platformă, fără a mai fi nevoie să se modifice direct din baza de date. Acest lucru este folositor persoanelor care dețin un site, dar nu au cunoștințe despre partea de programare. Când se efectuează logarea se va afișa și un mesaj de succes în partea de sus a paginii.

Figura 3.10: Logare reușită

Imaginea din figura 3.10 reprezentând pagina principală din partea de administrare. În meniul de sus se află și o secțiune destinată datelor persoanei conectate, în acea secțiune persoana conectată poate să își modifice parola curentă sau să se deconecteze de pe pagina de administrator, acest lucru se poate observa în figura 3.11.

Figura 3.11: Date persoană logată

În cazul în care persoana decide ca vrea să modifice parola curentă, aceasta trebuie să dea click pe schimbă parola, iar în urma acestei acțiuni va apărea un formular de schimbare parolă. Acest formular conține următoarele câmpuri:

Vechea parolă – aici trebuie introdusă parola curentă

Noua parolă – câmpul trebuie completat cu noua parolă dorită

Confirmare noua parolă – trebuie completat cu parola ce a fost introdusă în câmpul noua parolă

Persoana care dorește să modifice parola poate primi următoarele erori afișate în figura 3.12.

Figura 3.12: Erori întâlnite la schimbarea parolei

Formularul de modificare parolă se află în fișierul schimba_parola.php, aici sunt scrise si erorile afișate pe această pagină, dar și mesajul de succes, dacă parola a fost modificată. Cei care au modificat cu succes parola vor fi redirecționați automat pe pagina principală de administrare.

Figura 3.13: Cod sursă formular schimba_parola

În continuare o să prezint fiecare buton din meniul principal de pe pagina de administrare, oferind și bucăți din cod, pentru a ajuta la o înțelegere mai usoară a funcționalității programului, dar și a rolului de administrator la acest magazin online.

Prima secțiune din meniu se numește „Specii“, în această zonă administratorul poate adăuga, modifica sau șterge specii de pești. Speciile sunt luate din baza de date și ordonate alfabetic, cu ajutorul bucății de cod din figura 3.14.

Figura 3.14: Preluarea speciilor din baza de date în ordine alfabetică

Aspectul tabelului în care se află speciile și butoanele care au rol să modifice, adauge sau să steargă datele au fost create cu ajutorul comenzilor sau clasele aflate predefinite de către Bootstrap.

Figura 3.15: Comenzi Bootstrap

Figura 3.16: Aspect pagină specii.php

Dacă dorim să adăugăm o nouă specie trebuie să fie introdus cel putin o literă sau un cuvânt în câmpul „Adauga o specie“ și datele introduse să fie diferite de cele existente deja în baza de date, dacă nu se respectă aceste lucruri o să fie afișate erori pentru atenționarea greșelilor comise.

Figura 3.17: Verificare specii introduse

Prin apăsarea butonului de editare a specie, numele câmpului se va modifica în „Modifica o specie“ acest lucru se va întampla și cu butonul care va ajuta la modificarea speciilor. Câmpul va fi completat automat cu numele specie pe care dorim să o modificăm, aspectul paginii de modificare specie este afișat în figura 3.18.

Figura 3.18: Aspect pagină la modificarea speciei

Dacă dorim să ștergem o specie, acest lucru poate fi realizat simplu și fară a necesita prea mult efort apăsând butonul din dreapta speciei pe care dorim să o eliminăm din baza de date și de pe platformă.

Funcția sql folosită pentru a introduce specii în baza de date este cea de Insert Into nume tabel, iar funcția folosită pentru a edita o specie este cea de Update nume tabel, acestă funcție înlocuind valorile vechi cu unele noi.

După secția de „Specii“ se află secția de „Categorii“, unde putem regăsi toate categoriile de pești din baza de date, atât categoriile principale cât și subcategoriile. În acestă secțiune persoana conectată poate să adauge, să modifice sau să șteargă o categorie principală sau o subcategorie.

Figura 3.19: Tabelul din meniul categorii

Cu ajutorul codului din figura 3.20 a fost creat tabelul în care se află informații despre categoria produselor. Acest tabel este creat dinamic cu ajutorul php-ului, iar aspectul este făcut cu ajutorul claselor din Boostrap. Categoriile principale sunt afișate cu albastru închis, datorită clasei bg-primary din Bootstrap, iar subcategoriile sunt afișate cu albastru deschis datorită clasei bg-info din Bootstrap. Codul de mai jos afișează ca și categorii principale datele care în tabelul categorii în coloana părinte din baza de date au valori egale cu 0, iar subcategoriile sunt afișate dacă au în coloana părinte id-ul categorii principale din baza de date.

Figura 3.20: Cod tabel categorii

Butoanele care au ca rol de adăugare, modificare sau șterge sunt create tot cu ajutorul claselor din Bootstrap, dacă dorim să modificăm o categorie sau sub categorie, datele despre categoria pe care dorim să o modificăm vor apărea automat în formularul de modificare.

Figura 3.21: Modifică categorie

Există și o serie de erori ce pot apărea în partea asta de administrare în cazul în care utilizatorul nu completează sau completează câmpurile cu informații greșite.

Figura 3.22: Erori meniul categorii

Aceleași verificări se vor efectua și daca adminul dorește să adauge o categorie nouă în baza de date.

Pentru a șterge o categorie din baza de date definitiv se execută codul sursă din figura 3.23. Dacă se dorește ștergerea unei categori principale și are mai multe subcategorii, categoria principală o să fie ștersă împreună cu toate subcategoriile care îi aparțin.

Copyright-ul care apare pe toate paginile de pe partea de administrare dar și pe partea principală a magazinului online, se datorează fișierului footer.php care este inclus pe toate paginile site-ului. Fișierul footer.php conține următoare linie de cod: <div class="col-md-12 text-center" >&copy; Copyright 2019 Pet Shop </div>, acestă linie de cod face posibilă afișarea copyright-ului de pe toate paginile site-ului.

Figura 3.23: Copyright pagini

În partea de administrare mai avem și meniul „Produse“ în care se află toate produsele pe care magazinul le are, acestea fiind luate din baza de date dinamic. În această parte produsele sunt afișate tot într-un tabel figura 3.24.

Figura 3.24: Aspect meniul Produse

Fiecare produs are mai multe coloane unde se pot vedea informații despre produsul existent, cum ar fi numele produsului, prețul, categoria din care face parte sau dacă este un produs recomandat, sau dacă produsul este vândut. În baza de date, în tabelul produse se află o coloană care are numele de „eliminat“ aceasta este inițializată cu cifra 0 pentru toate produsele care se află în baza de date, astfel că în meniul de produse ca să apară acele produse s-a folosit variabila sql, iar cu ajutorul funcției SELECT de mai jos:

$sql = "SELECT * FROM produse WHERE eliminat = 0";

Pe urmă codul este rulat și rezultatul funcției se pune într-o variabilă $prerezultate:

$prerezultate = $db->query($sql);

Deoarece se află mai multe produse în baza de date s-a optat spre a folosi o buclă while, ca să fie puse datele într-o variabilă $produs, folosind o matrice asociativă:

<?php while($produs = mysqli_fetch_assoc($prerezultate)):

În continuare cu ajutorul acelor variabile se vor insera fiecare informație din baza de date în tabelul cu produse, de pe pagina de administrare:

<td><?= $produs['nume']; ?></td>

<td><?= bani($produs['ultimul_pret']); ?></td>

<td><?= $categorie; ?></td>

Funcția bani este o funție creată pentru afișa mai usor formatul de preț al produselor, acestă funție se află în fișierul numit helpers.php:

function bani($numar){

return number_format($numar,2).' lei';

}

În coloana de categorii, se află categoria principala si subcategoria din care face parte produsul, acestea fiind despărțite de liniuță, se poate observa în figura 3.25.

Figura 3.25: Aspect meniul Produse coloana categorie

Această coloană a fost creată cu ajutorul buclei while, unde au fost create coloanele care conțin numele și prețul, iar codul care realizează afișarea categoriilor principale cât și specia din care face parte se află mai jos:

<?php while($produs = mysqli_fetch_assoc($prerezultate)):

$copilID = $produs['categorie'];

$catSql = "SELECT * FROM categorii WHERE id = '$copilID'";

$rezultat = $db->query($catSql);

$copil = mysqli_fetch_assoc($rezultat);

$parinteID = $copil['parinte'];

$pSql= "SELECT * FROM categorii WHERE id = '$parinteID'";

$prerezultat = $db->query($pSql);

$parinte = mysqli_fetch_assoc($prerezultat);

$categorie = $parinte['categorie'].'-'.$copil['categorie'];

?>

Cu ajutorul variabilei $copilID se pot afișa specile de pești care se află în tabelul „categorii“ din baza de date, deoarece în interiorul acesteia se va folosi variabila $produs care se află în bucla while, deci cât timp există produse în baza de date și nu au fost șterse, acestea pot fi selectate cu ajutorul funcției SELECT care v-a prelua datele existente în tabelul categorii și le va introduce în variabila $catSql. Pe urmă rezultatele vor fi introduse în variabila $rezultat cu ajutorul lui quey, deoarece se află mai multe randuri se va folosi din nou mysqli_fetch_assoc, unde sunt introduse rezultatele existente din variabila $rezultat. Același lucru se întâmplă și cu afișarea categoriilor principale în parte, deoarece sunt căutați în funcție de id-ul speciei din care fac parte.

Coloana de „Recomandare“ are rolul de a oferi adminului posibilitatea de a afișa produsul ca fiind recomandat sau nu. Dacă produsul este setat să fie recomandat, acesta va fi vizibil pe pagina principală a magazinului făcândul astfel mai vizibil. Dacă în dreptul produsului se află butonul „+“, înseamnă că produsul nu este recomandat, deci nu se va găsi pe pagina principal, iar dacă în dreptul produsului se află „- Produs recomandat“ înseamnă că produsul este recomandat și dacă o să ne uităm pe pagina principală acest produs o să fie vizibil.

Figura 3.26: Produsele recomandate/nerecomandate

În figura 3.26 se poate observa că produsul „Symphysodon leopard albino “ nu este recomandat, ceea ce înseamnă că acesta nu se va regăsi pe pagina principală a magazinului. În figura 3.27 se observă că produsul nu este afișat pe pagina cu produse recomandate.

Figura 3.27: Produsele recomandate

Produsele recomandate în baza de date apar cu valoarea 1 în coloana de recomandari a tabelei produs, iar dacă produsul nu este recomandat va avea valoarea 0. Butoanele create pentru a face acțiunea cu produselor recomandate se pot observa în codul sursă următor:

<td>

<a href="produse.php?recomandari=<?= (($produs['recomandari'] == 0)?'1':'0'); ?>&id=<?= $produs['id']; ?>" class="btn btn-xs btn-default">

<span class="glyphicon glyphicon-<?= (($produs['recomandari'] == 1)?'minus':'plus'); ?>">

</span>

</a>

&nbsp <?= (($produs['recomandari'] == 1)?'Produse recomandate':''); ?>

</td>

Figura 3.28: Produsele recomandate baza de date

Codul cu ajutorul căruia baza de date se va updata cu valorile prezentate mai sus se află în figura 3.29.

Figura 3.29: Update produse

Ca și în celelalte tabele de pe partea de administrare a site-ului, și în acest meniu există butoanele de modificare sau de a șterge produsul, acest lucru poate fi vizibil în figura 3.30.

Figura 3.30: Butoanele de modificare sau ștergere produs

Butonul de ștergere va actiona dupa codul sursă de mai jos, acel cod are rolul de a da valoarea 1 în tabela cu produse pe coloana cu numele eliminat, acest lucru va da de înteles că produsul poate fi eliminat din baza de date, însă dacă accesăm paginile unde își are locul produsul acesta încă va mai fi vizibil. Acest lucru are rolul de a oferi o șansă de a fi modificat produsul înainte să fie eliminat. Însă dacă chiar dorim să il ștergem definitiv trebuie să intrăm în baza de date și să il ștergem direct din baza de date. Codul care elimină produsul este prezenat de figura 3.31.

Figura 3.31: Eliminare produs

Codul sursă pentru butonul care are rolul să elimine un produs este:

<a href="produse.php?delete=<?= $produs['id']; ?>" class="btn btn-xs btn-default">

<span class="glyphicon glyphicon-remove">

</span>

</a>

Iar codul sursă pentru butonul care are rolul să modifice un produs existent în baza de date este următorul:

<a href="produse.php?edit=<?= $produs['id']; ?>" class="btn btn-xs btn-default">

<span class="glyphicon glyphicon-pencil">

</span>

</a>

Ambele butoane au fost create cu ajutorul claselor din Bootstrap, acesta oferindule un aspect ordonat.

Dacă apăsăm pe butonul de modificare produs, oferă posibilitatea de a modifica produsul selectat din tabelul cu produse afișat. Modificarea produsului se poate face cu ajutorul formularului de modificare produs. Acest formular este creat în cod.

Figura 3.32: Formular modificare produs

Putem observa că atunci când dorim să modificăm produsul, în câmpurile produsului apar scrise deja setările produsului. Toate câmpurile care au la nume un asterix reprezintă un câmp obligatoriu, nu se poate modifica un produs fără ca unul dintre câmpurile obligatorii să nu fie completate. Dacă încercăm să modificăm un produs și lăsăm gol un câmp obligatoriu o să primim o eroare cu acest lucru. Această eroare este generată de codul din figura 3.33.

Figura 3.33: Generare eroare câmpuri obligatorii

Figura 3.34: Afișare eroare câmpuri obligatorii

În figura 3.34 am încercat să las câmpul specie gol, dar după această încercare a aparut mesajul de eroare și câmpul specie a fost recompletat cu informația pe care o deținea.

Bibliografie

Mediul de programare Notepad++

https://en.wikipedia.org/wiki/Notepad%2B%2B

Limbajul de programare CSS

https://www.w3schools.com/css/css_intro.asp

Limbajul PHP și Serverul XAMPP

https://web.ceiti.md/lesson.php?id=7

https://ro.wikipedia.org/wiki/PHP

Bootstrap

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

Limbajul JavaScript

https://web.ceiti.md/lesson.php?id=16

AJAX

https://www.tutorialspoint.com/ajax/what_is_ajax.htm

Jquery

https://en.wikipedia.org/wiki/JQuery

https://www.tutorialspoint.com/jquery/jquery-overview