Gestiunea Unui Magazin Online de Piese Auto

CUPRINS

Introducere…………………………………………………………………………………………………………4

Introducere

In ultimele doua decenii dezvoltarea fara precedent a tehnologiilor informationale determinate de necesitatea stocarii si a transmiterii rapide a informatiilor cu costuri cat mai mici, a revolutionat comertul global, redefinind principiile clasice ale marketingului. In prezent notiunea de comert electronic a devenit sinonim cu cresterea profitului. Potrivit Organizatiei Economice de Cooperare si Dezvoltare (OEDC), comertul electronic reprezinta desfasurarea unei afaceri prin intermediul retelei Internet, vanzarea de bunuri si servicii avand loc on-line sau off-line.

Pentru deschiderea unei afaceri online este necesară crearea unui magazin virtual, un website destinat vănzării de produse si servicii necesare afacerii respective. In cele mai multe dintre cazuri, magazinul online reprezinta o platforma pe care sunt adaugate produse. Aceste produse pot fi accesate si cumparate cu ajutorul carții de credit. In cadrul magazinelor online complexe utilizatorii pot selecta modalitatea de plata: card de credit, transfer bancar, ramburs si modalitatea de transport: posta, curier etc.

Magazinul virtual are ca scop prezentarea si vinderea unor produse. Exista posibilitatea realizarii unor magazine virtuale pe platforme e-commerce free ca de exemplu: Open Cart, Magento, Woocommerce, Presta Shop.

Majoritatea comerciantilor mari, corporatiile sau Brandurile, isi dezvolta propriile departamente de programare web si isi creeaza magazine virtuale folosind solutii e-commerce avansate. Din aceasta categorie amintim: Adidas, Puma, Boss, Nike etc. Astfel de magazine virtuale prezinta o multitudine de instrumente care ajuta userii/clientii sa ia decizii importante cu privire la comenzile lor.

Caracteristicile unui magazin virtual consta intr-o impresie buna de la prima accesare a website-ului de aceea pentru garantarea succesului un magazin online trebuie sa prezinte cateva caracteristici de baza cum ar fi : design-ul , claritatea , simplitatea, securitatea, rapiditatea, atractivitatea.

In cadrul proiectului nostru, aplicatia reprezinta un magazin online destinat vânzării de piese auto originale cât si piese de calitate alternativă-aftermarket.La ora actuala in România există o multime de magazine care si-au dezvoltat propriul magazin online pentru a satisface cat mai mult nevoia clientului de a comanda produsele necesare.

Tot odata beneficiile magazinelor virtuale consta in eliminarea stresului cauzat de aglomeratie,distanta lunga fata de magazinul respectiv,lipsa timpului sau chiar si un beneficiu mare persoanelor cu handicap care nu se pot deplasa pana la centrul respectiv de comercializare. Cateva exemple de magazine online de piese auto din Romania : www.autokarma.ro , www.unixauto.ro , www.bardiauto.ro etc. Aceste magazine ofera o multime de posibilitati clientilor de a cauta piesele necesare in functie de tipul masinii, suport online, contact telefonic chiar si posibilitatea de a cere un produs.

Obiectivele acestei lucrari sunt: posibilitatea ca fiecare client sa-si caute produsele necesare in functie de marca,model si tipul masinii, cautare in functie de codul original al produsului sau ca si la exemplele anterioare ofera suport online prin intermediul unui chat si informatii prin contact telefonic pentru clientii care nu se descurca cu uilizarea tehnologiei.

Pentru îndeplinirea practică a obiectivelor aplicației, am dezvoltat o aplicație web care folosește informații aflate într-o bază de date prin tehnologia PHP-MySQL. Această aplicație este destinată rulării pe un server în cadrul unei rețelei.

Aplicația pune la dispoziția utilizatorului: salvarea produselor intr-un cos de cumparaturi

vizualizarea si stergerea acestora, trimitere de informatii pe mail cu detalii despre comanda daca aceasta a fost efectuata sau confirmata, diferite informatii despre livrare, garantie si contact.

Utilizatorul mai dispune in contul lui și de un "istoric comenzi" în care poate vedea informatii despre comanda si posibilitatea de a-si vizualiza sau descarca factura in format electronic daca comanda a fost confirmata.

Pentru utilizatorul cu acces de administrator avem în plus disponibil un control panel care

ii permite adaugarea, modificarea, stergerea de categorii, produse, marci, modele si tipuri de masini, modificarea unui utlizator de-al tranforma in admin prin schimbarea tipului utilizatorului si optiunea de a vizualiza comenzile efectuate, iar dupa contactarea clientului telefonic pentru a obtine informatii daca acesta doreste sau nu comanda, acesta le poate confirma sau sterge.

Dorinta in alegerea acestei teme a fost deoarece odata cu dezvoltarea internetului, comertul online sa dezvoltat foarte mult, din acest motiv am considerat ca este utila alegerea unei asemenea teme la care sa adaugat si provocarea de a invata despre cum se construieste o pagina web.

Pe aceasta calea tin sa multumesc domnului profesor coordonator SL. ing. Dan Munteanu

pentru informatiile oferite si pentru ajutarea cu diferite specificatii in contruirea acestui proiect si

tot odata tuturor profesorilor din acesti patru ani de studii pentru formarea noastra.

Capitolul 1. Prezentarea tehnologiilor utilizate

1.1 Serverul Apache

Apache este un server HTTP, de tip open-source și joacă un rol important în dezvoltarea internetului. Aplicația este disponibilă pentru o mare varietate de sisteme de operare, incluzând Unix, Linux, Solaris, Microsoft Windows etc.

Apache suportă o mare varietate de module care îi extind funcționalitatea, acestea variază de la server side programming și până la scheme de autentificare. Câteva limbaje suportate sunt : mod_perl, mod_python, Tcl și PHP. O altă calitate a serverului Apache este reprezentată de "Virtual hosting" (hosting virtual), care constă în posibilitatea de a găzdui mai multe site-uri simultan pe același server.

Apache este folosit de unele din cele mai mari site-uri din lume. Astfel, motorul de căutare folosit de Google folosește o versiune modificată de Apache, numită Google Web Server (GWS). Proiectele Wikipedia si inclusiv Wikimedia rulează tot pe un server Apache.

Ca urmare a caracteristicilor sale sofisticate, performanța excelentă și a faptului că această platforma în ceea ce privește prețul este gratuită, Apache a devenit cel mai popular server Web din lume. Conform unor estimări, este utilizat pentru a găzdui mai mult de 65 % din site-urile Web din lume.

1.2 Tehnologia PHP-MySQL

Un număr impresionant de aplicații web, utilizează ca și coloană vertebrală o bază de date pentru a stoca informațiile. Acest lucru se face întrucât lucrul cu fișiere este greoi, viteza de parcurgere a fisierelor de dimensiuni mari este redusă, apar probleme la accesul concurrent al mai multor utilizatori, iar securitatea fișierelor este lăsată exclusiv la latitudinea sistemului de operare, iar bazele de date ajută la soluționarea tuturor acestor probleme.

Informația este preluată din bază de date și apoi prelucrată prin intermediul unui limbaj de programare. În general, a accesa o bază de date, se folosește un limbaj de nivel

înalt, cum sunt C, C++, Java, Perl și PHP pentru a accesa și modifica informația conținută în înregistrări. Alegerea acestui limbaj care să realizeze operațiile asupra bazei de date depinde de aplicația dorită.

Pentru aplicațiile web se folosește un limbaj de programare numit limbaj de scripting. Acest limbaj este interpretat de către serverul web, iar acesta oferă ca rezultat o pagină web cu rezultatele dorite. Ca limbaje pentru generare de pagini dinamice există PHP, Perl, Microsoft ASP, JSP și ColdFusion.

Una din combinațiile extrem de folosite de bază de date si limbaj de scripting din ultimii ani este perechea PHP – MySQL. Acest lucru se datorează compatibilității foarte bune între ele (PHP oferă suport pentru MySQL încorporat) și a performanțelor ridicate ale acestei tehnologii. Ambele tehnologii sunt disponibile in regim open-source, deci gratuite pentru scopuri necomerciale.

Utilizarea combinației PHP-MySQL a dus la crearea unor aplicații de bază de date cu interfață web, flexibile, rapide și puternice.

1.2.1 Caracteristici MySQL

MySQL este un sistem de gestiune a bazelor de date relațional și distribuit sub Licența Publică Generală GNU. Este cel mai popular SGBD open-source la ora actuală, fiind o componentă cheie a stivei LAMP (Linux, Apache, MySQL, PHP).

MySQL este un server multi-user (permite lucrul simultan a mai multor utilizatori) și multi-thread (mai multe fire de executie). Utilizează SQL (Structured Query Language), limbajul standard de interogare a bazelor de date. Acestea permit stocarea, căutarea, sortarea și regăsirea datelor în mod eficient.

Server-ul de baze de date MySQL are următoarele caracteristici tehnice si funcționale :

conformitate cu un subset major de specificații ale standardului ANSI SQL 99;

performanțe ridicate, rapiditate, necesită puține resurse hardware;

optimizat pentru aplicații de dimensiuni mici și mijlocii;

rulează in foarte multe platforme, printre care menționăm Windows, Linux, FreeBSD, Solaris și MacOSX acest lucru conferindu-i o flexibilitate redusă;

limita dimensiunii tabelelor de 2/4 GB sub Linux si Win32;

independența de platformă;

proceduri stocate;

vederi actualizabile asupra bazei de date;

suport pentru chei externe-numai în cazul motorului InnoDB;

multiple motoare de stocare;

suport pentru conexiuni securizate prin protocolul SSL (Secure Sockets Layer);

caching pentru interogarile executate;

suport pentru instrucțiuni SELECT îmbricate (cunoscute și ca instrucțiuni sub-SELECT);

replicare cu un master per slave, mai multe unități slave per master, însă fără suport automat pentru mai multe unități master per slave;

permite definirea de porțiuni de cod care utilizează instrucțiuni specific MySQL, care nu fac parte din specificațiile standardului SQL-99, între simboluri de comentariu de genul /*! Cod specific MySQL */, cu scopul de a realiza un compromis între portabilitatea codului aplicației pe alte sisteme de gestiune de baze de date SQL și optimizările de cod pentru rularea pe un server MySQL ;

suport complet pentru tipul de date VARCHAR;

suport complet pentru caractere UNICODE (pe 16 biți);

pot fi folosite o varietate de limbaje de programare pentru conectare, cum ar fi C, C, C++, Java, Perl, Python și PHP.

1.3 PHP (Hypertext Preprocessor)

PHP este un limbaj de programare, acesta fiind folosit inițial pentru a produce pagini web dinamice dar de-a lungul timpului a ajuns sa aibă implicații pe scară largă în dezvoltarea paginilor și aplicațiilor Web. Se folosește în principal înglobat în codul HTML, dar începând cu ultimele versiuni lansate se poate folosi și în mod "linie comandă", permițând crearea de aplicații independente.

Este unul dintre cele mai importante limbaje de programare web open source si server side, existând versiuni disponibile pentru majoritatea web serverelor și pentru toate sistemele de operare.Conform statisticilor este instalat pe 20 de milioane de situri web și pe 1 milion de servere web.

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

Familiaritatea : sintaxa limbajului este usoară 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ță : PHP se folosește de mecanisme de alocare a resurselor foarte necesare unui mediu multiutilizator, așa cum este web-ul;

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

Flexibilitate : 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 numeroase servere web existente: Apache, IIS, Zeus, server etc.

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

Utilizarea PHP presupune existența unui server web, cum ar fi Apache. Interpretorul de PHP va acționa ca un modul al acestui server. Utilizatorul va trimite o cerere către server prin intermediul navigatorului său pentru o pagina php. Serverul web constată că fișierul are extensia *.php și o trimite interpretorului PHP instalat ca modul, care execută instructiunile din fisier și returnează serverului rezultatul, acesta fiind trimis către client.

Figura 1.1 : Tehnologia PHP-MySQL în aplicațiile web

PHP poate fi folosit pe majoritatea sistemelor de operare de la UNIX, Linux, Windows sau MAC OS X și poate interacționa cu majoritatea serverelor web (Apache, Microsoft Internet Information Server, Personal Web Server, Netscape și IPlanet, serverul Oreillz Website Pro, Claudium, Xitami, OmniHTTPd etc.).

Arhitectura tip LAMP a devenit populară în industria web ca o modalitate rapidă, gratuită și integrată de dezvoltare a aplicațiilor. Alături de Linux, Apache și MySQL, PHP-ul reprezintă litera P, deși uneori aceasta se referă la Python sau Perl. Linux ocupă rolul de sistem de operare pentru toate celelalte aplicații, MySQL gestionează bazele de date, Apache are rol de server web, iar PHP are rol de interceptor și comunicator între acestea.

1.4 HTML și CSS

HTML (HyperText Markup Language) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afișate intr-un browser (sau navigator).

HTML este o formă de marcare orientată către prezentarea documentelor text pe o singură pagină, utilizând un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu fiind browserul web. HTML furnizează mijloacele prin care conținutul unui documente poate fi adnotat cu diverse tipuri de metadate și indicații de redare. Indicațiile de redare pot varia de la decorațiuni minore ale textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o imagine trebuie introdusă, până la scripturi sofisticate, harți de imagine și formulare.

Paginile HTML sunt formate din etichete sau tag-uri și au extensia .html sau .htm. În marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> și alta de inchidere </eticheta> . Browser-ul interpretează aceste etichete afișând rezultatul pe ecran. Trebuie tinut cont că limbajul HTML nu este case sensitive.

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML (ex: formatare text, background, aranjarea în pagină etc.). El este conceput, în primul rând pentru a permite separare documentelor ca și conținut (scrise in HTML sau un Markup Language similar) de documentul de prezentare (scris in CSS).

Această separare poate îmbunătăți accesibilitatea conținutului, să ofere o mai mare flexibilitate și poate diminua caietul de sarcini al celui care se ocupă de mentenanța unui site web, prin asigurarea unui control mai simplu. De asemenea, CSS-ul poate reduce complexitatea și repetarea tag-urilor folosite pentru formatare din structura conținutului.

Sintaxa CSS este structurată pe trei nivele :

nivelul 1 fiind proprietățile etichetelor din documentul HTML. Sunt cele mai folosite și sunt amplasate în interiorul etichetelor HTML aflate în zona BODY, având sintaxa :

<eticheta style="codul CSS dorit">

Textul sau obiectul asupra caruia este aplicat codul CSS

</eticheta>

nivelul 2 este informația introdusă în blocul HEAD, având sintaxa :

<style type="text/css">

<!-

Comenzi CSS

–>

</style>

Unde style specifică unde începe și unde se termină blocul CSS, iar type este folosit pentru a ascunde de browser-ele vechi, care nu cunosc sintaxa CSS, conținutul blocului style.

nivelul 3 este reprezentat de comenzile aflate în pagini separate, care au extensia .css. Folosirea acestui nivel este foarte practică deoarece poate fi utilizat în mai multe situații (mai multe fisiere HTML pot folosi același fișier extern CSS), eliminând timpul necesar introducerii codului corespunzător în fiecare pagină și totodata editarea lor într-un singur loc pentru mai multe fișiere. Legătura paginilor HTML cu fișiere externe CSS, se face prin introducerea următoarei linii :

<link rel="stylesheet" type="text/css" href="fisier_css.css">

Beneficiile sintaxei CSS sunt :

Folosirea foilor de stiluri are numeroase beneficii care rezidă, în mare parte din

separarea structurii documentului de modul de prezentare. Foile de stiluri permit un control

precis, în afara marcajelor, a spațierii caracterelor, alinierii textului, poziției obiectelor în

pagină, caracteristicilor fontului, etc.

Separarea conținutului de prezentare are avantaje de operabilitate, reutilizabilitate și

întreținere. Inclusiv etapa de dezvoltare este mult mai ușoară, iar utilizarea foilor de stil permite

crearea de șabloane (Young, 1997, citat de Offer, 2000).

Întreținerea paginilor web bazate pe CSS este mult mai simplă decât a celor bazate pe

tabele. Afișarea de către browsere a paginilor bazate pe tabele presupune descărcarea de pe

server, analizarea și afișarea fiecărei pagini în parte. Modificarea designului unui site bazat pe

CSS se poate face doar prin simpla modificare a unui simplu fișier.

Folosirea de foi de stiluri externe pentru prezentarea conținutului, la încărcarea primei

pagini browserul memorează în cache fișierul CSS. Toatele celelalte pagini din site care

folosesc acest fișier CSS se vor încărca mult mai repede, deoarece browserul deja deține

fișierul CSS. Mai mult decât atât, cantitatea de cod (X)HTML este mult redusă prin eliminarea

tag-urilor legate de prezentarea datelor. Această reducere a codului poate fi de până la 50% sau

chiar mai mult. O cantitate mai mică de cod presupune și o claritate mai mare a acestuia și la

timpi de întreținere mai mici. Un cod mai mic înseamnă, de asemenea, o cantitatea de date mai

mică ce trebuie transmisă și deci un timp scăzut de încărcare a paginilor (Bîzoi, Gorghiu, Suduc

și alții, 2007; Rewis, 2009;).

CSS poate de asemenea să permită unei aceleiași pagini de marcare să fie prezentată în

diferite stiluri pentru diferite metode de transmitere, precum pe ecran, imprimare, voce (când se

citește cu ajutorul unui browser pe bază de voce sau cu cititor de ecran) și Braille, dispozitive

tactile. În timp ce autorul unui document leagă de obicei acel document de un șablon de stil

CSS, cititorii pot folosi un șablon de stil diferit, posibil chiar pe propriul calculator, pentru a

suprascrie pe cel specificat de autor.

1.5 JavaScript

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

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activități cum ar fi verificarea datelor introduse de utilizatori sau crearea de meniuri și alte efecte animate.

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 standard W3C pentru DOM-ul 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. În practică, însă, standardul W3C pentru DOM este incomplet implementat. Deși tendința browserelor este de a se alinia standardului W3C, unele din acestea încă prezintă incompatibilități majore, cum este cazul Internet Explorer.

O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este AJAX, abreviere de la „Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal, fără a reîncărca toată pagina web, și actualizarea numai anumitor porțiuni ale paginii prin manipularea DOM-ului paginii. Tehnica AJAX permite construirea unor interfețe web cu timp de răspuns mic, întrucît operația (costisitoare ca timp) de încărcare a unei pagini HTML complete este în mare parte eliminată.

Sintaxa JavaScript este structurata pe doua nivele :

nivelul 1 este informația introdusă în blocul HEAD, având sintaxa :

<script type="text/javascript">

Codul javascript

</script>

nivelul 2 este reprezentat de comenzile aflate în pagini separate, care au extensia .js. Avantajele fiind aceleași ca și în cazul stylesheet-urilor .css. Legătura paginilor HTML cu fișiere externe CSS, se face prin introducerea următoarei linii în interiorul campului BODY:

<script type="text/javascript" src=fisier_js.js>

1.6 jQuery

Creat de John Resig, jQuery este un proiect open-source cu o echipă de bază formată din dezvoltatori JavaScript de elită. Librăria oferă registru larg de caracteristici, o sintaxă ușor de învățat și o robustă compatibilitate între platforme într-un singur fișier compact. Mai mult, peste 100 de plug-in-uri au fost dezvoltate pentru a extinde funcționalitatea jQuery, făcând din această librărie o unealtă esențială pentru scripting pe partea de client.

Ce face jQuery?

Librăria jQuery oferă un nivel de abstractizare pentru operațiile de scripting cu scopuri generale și de aceea este folositoare în aproape orice situație de scripting. Natura sa extensibilă înseamnă că nu s-ar putea acoperi toate funcțiile posibile într-un singur fișier și de aceea în mod constant sunt dezvoltate plug-in-uri pentru a adăuga noi caracteristici. Caracteristicile de bază se adresează următoarelor nevoi:

Accesarea unor porțiuni ale paginii. Fără o librărie JavaScript, pentru a traversa DOM-ul (Document Object Model) sau pentru a localiza o porțiune specificată din structura unui document HTML, trebuie scrise multe linii de cod. jQuery oferă un mecanism robust și eficient de selecție pentru a selecta exact porțiunea de document care trebuie inspectată sau manipulată.

Modificarea aspectului unei pagini. CSS oferă o metodă puternică de influențare a modului în care un document este randat, dar se împotmolește când browser-ele nu suportă toate aceleași standarde. jQuery asigură o punte de legătură peste acest gol, asigurând aceleași standarde pentru toate browser-ele. Mai mult, jQuery poate schimba clase sau proprietăți de stil individuale aplicate unei porțiuni din document chiar si după ce pagina a fost randată.

Modificarea conținutului unei pagini. jQuery nu este limitată doar la schimbări cosmetice, ci poate modifica conținutul documentului cu câteva apăsări de taste. Textul poate fi schimbat, imaginile pot fi inserate sau înlocuite, listele pot fi reordonate sau chiar întreaga structura a HTML-ului poate fi rescrisă și extinsă – toate acestea cu un singur API ușor de folosit.

Răspunde la interacțiunea utilizatorului cu pagina. Până și cele mai elaborate și puternice comportamente sunt nefolositoare dacă nu se poate controla momentul în care apar. Librăria jQuery oferă o modalitate elegantă de a intercepta o gamă largă de evenimente, ca de exemplu click-ul pe un link, fără a crea dezordine în codul HTML prin adăugarea de event-handlere. În același timp, API-ul său pentru event-handling elimină inconsistențele între browsere.

Adăugarea de animații în pagină. Pentru a implementa efectiv un comportament interactiv, un designer trebuie să asigure și feedback vizual utiliatorului. Librăria jQuery facilitează acest lucru printr-o multitudine de efecte, precum și printr-un toolkit ce poate fi utilizat pentru a crea altele noi.

Extragerea de informații de pe un server fără a face refresh la o pagină. Acest șablon a devenit cunoscut sub numele de Asynchronous JavaScript and XML (AJAX) și asistă dezvoltatorii web în crearea unor site-uri impresionabile și bogate în caracteristici. Librăria jQuery elimină din acest proces complexitatea specifică browser-ului, astfel încât dezvoltatorii să se poate concentra pe funcționalitățile server-ului.

Simplificarea sarcinilor uzuale JavaScript. Pe lângă funcționalitățile specifice pentru document, jQuery aduce îmbunătățiri elementelor de bază din JavaScript cum ar fi iterațiile și manipularea vectorilor.

Utilizarea librăriei jQuery:

În secțiunea <head></head> a paginii web în care se dorește folosirea jQuery, trebuie adăugată o referință la această librărie.

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

// Codul jQuery va fi introdus aici

</script>

</head>

Selectori jQuery:

Selectori de bază:

#id Selectează un singur element cu atributul id dat.

$("#myDiv").css("border","3px solid red");

element Selectează toate elementele cu numele dat.

$("div").css("border","3px solid red");

.class Selectează toate elementele cu atributul class dat.

$(".myClass").css("border","3px solid red");

Selectează toate elementele (inclusiv head și body).

$("*").css("border","3px solid red");

selector1, selector2, selectorN Selectează elementele care se potrivesc oricărui selector.

$("div,span,p.myClass").css("border","3px solid red");

Selectori pentru ierarhii:

strămoș descendent Selectează toți descendenții elementului "strămoș" specificați prin "descendent".

$("form input").css("border", "2px dotted blue");

părinte > copil Selecteză toate elementele copil specificate prin "copil" ale elementului specificat prin "părinte".

$("#main > *").css("border", "3px double red");

anterior + următor Selectează toate elementele specificate prin "următor" care se află lângă elementele specificate prin "anterior".

$("label + input").css("color", "blue").val("Labeled!")

prev ~ siblings Selectează toate elemente copil de pe același nivel specificate prin "siblings" care urmează elementului specificat prin "prev".

$("#prev ~ div").css("border", "3px groove blue");

Filtre de bază:

:first Corespunde primului element selectat.

$("tr:first").css("font-style", "italic");

:last Corespunde ultimului element selectat.

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

:not(selector) Filtrează elementele specificate prin selectorul dat.

$("input:not(:checked) + span").css("background-color", "yellow");

:even Selectează elementele cu indexul par, indexarea făcându-se de la 0.

$("tr:even").css("background-color", "#bbbbff");

:odd Selectează elementele cu indexul impar, indexarea făcându-se de la 0.

$("tr:odd").css("background-color", "#bbbbff");

:eq(index) Selectează un singur element specificat prin indexul său.

$("td:eq(2)").css("color", "red");

:gt(index) Selectează toate elementele cu indexul mai mare decât cel specificat.

$("td:gt(4)").css("text-decoration", "line-through");

:lt(index) Selectează toate elementele cu indexul mai mic decât cel specificat.

$("td:lt(4)").css("color", "red");

:header Selectează toate elementele care sunt header, precum h1, h2, etc.

$(":header").css({ background:'#CCC', color:'blue' });

:animated Selecteză toate elementele care sunt animate în momentul prezent.

$("#run").click(function(){

$("div:animated").toggleClass("colored");

});

function animateIt() {

$("#mover").slideToggle("slow", animateIt);

}

animateIt();

Filtre pentru conținut:

:contains(text) Selectează toate elementele care conțin textul dat.

$("div:contains('John')").css("text-decoration", "underline");

:empty Selectează toate elementele care nu au copii (inclusiv noduri text).

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

:has(selector) Selectează toate elementele care conțin cel putin un element care corespunde cu selectorul specificat.

$("div:has(p)").addClass("test");

:parent Selecteată toate elementele care sunt părinți, adică au elemente copil sau doar text.

$("td:parent").fadeTo(1500, 0.3);

Filte pentru vizibilitate:

:hidden Selectează toate elementele care sunt ascunse, sau elementele de tip <input type="hidden">.

$("span:first").text("Found " + $(":hidden", document.body).length +

" hidden elements total.");

$("div:hidden").show(3000);

$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

:visible Seletează toate elementele care sunt vizibile.

$("div:visible").click(function () {

$(this).css("background", "yellow");

});

$("button").click(function () {

$("div:hidden").show("fast");

});

Filtre pentru atribute:

[attribute] Selectează toate elementele care au atributul specificat prin "attribute".

$("div[id]").one("click", function(){

var idString = $(this).text() + " = " + $(this).attr("id");

$(this).text(idString);

});

[attribute=value] Selectează toate elementele pentru care atributul specificat are valoarea "value".

$("input[name='newsletter']").next().text(" is newsletter");

[attribute!=value] Selectează toate elementele care au atributul specificat, dar pentru care acest atribut nu are valoarea specificată.

$("input[name!='newsletter']").next().text(" is not newsletter");

[attribute^=value] Selectează elementele care au atributul specificat și care începe cu o anumită valoare.

$("input[name^='news']").val("news here!");

[attribute$=value] Selectează elementele care au atributul specificat și care se termină cu o anumită valoare.

$("input[name$='letter']").val("a letter");

[attribute*=value] Selecteză elementele care au atributul specificat și care conține o anumită valoare.

$("input[name*='man']").val("has man in it!");

[attributeFilter1][attributeFilter2][attributeFilterN] Selectează elementele pentru a căror atribute se aplică toate filtrele specificate.

$("input[id][name$='man']").val("only this one");

Exemple de functii folosite in aplicatie:

$("#cos").click(function(){

$("#cos").hide('fast');

$(".shopping-cart").show(500);

});

Cand facem click pe elementu cu id #cos acesta se ascunde iar elementu cu clasa shopping-cart apare.

$("#cauta").keyup(function(){

var cauta = $(this).val();

$.post("cauta.php",{cautaMarca:cauta},function(resp){

$("#marcatabel").find("tbody").html(resp);

})

})

Cand scriem in elementu cu id #cauta acesta ia valoarea o retine in variabila cauta,dupa aceasta face un post catre pagina cauta.php trimitand valoarea lui cauta in cautaMarca, apoi cauta elemntetu tbody din elementu cu id-ul #marcatabel si ne afisezaza informatiile.

1.7 Bootstrap

Bootstrap este un framework dezvoltat initial de Twitter, ajuns acum la versiunea 3, creat special pentru dezvoltarea de design responsiv rapid si usor. In el sunt incluse elemente HTML si CSS des intalnite in webdesign precum formulare, butoane, tabele, meniuri de navigare, meniuri dropdown, alerte, ferestre modale, tab-uri, slidere etc.

Cel mai mare avantaj pe care il constituie Bootstrap este acela ca vine cu un set de elemente pentru a crea design responsiv cat si diverse elemente de design cat mai simplu.

Mai jos avem o lista cu avantaje:

Economie de timp — Putem salva mult timp si efort folosind elementele de design predefinite in Bootstrap.

Elemente Responsive — Folosind Bootstrap putem crea cu mare usurinta un design responsiv. Bootstrap vine cu un set de clase responsive ce ne ajuta sa facem un design potrivit pentru orice tip de display.

Design consistent — Toate componentele Bootstrap folosesc acelasi template si acelasi stil, deci design-ul complet al tuturor paginilor va fi consistent.

Usurinta de folosire — Bootstrap este foarte usor de folosit. Orice persoana ce detine cunostinte de baza despre HTML si CSS poate crea un design in Bootstrap.

Compatibil cu majoritatea browserelor — Bootstrap este creat astfel incat sa fie compatibil cu toate browserele moderne precum Mozilla Firefox, Google Chrome, Safari, Internet Explorer si Opera.

Open Source — Ce-a mai buna parte este ca acest framework este open source, deci gratuit.

Cum folosim Bootstrap?

Pentru a folosi Bootstrap prima data trebuie sa-l descarcam de pe getbootstrap.com sau putem sa-l folosim direct de pe internet introducand in sectiunea <head></head> urmatoarele link-uri:

Link catre fisierul CSS:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/

bootstrap/3.3.5 /css/bootstrap.min.css">

Link catre libraria jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Link catre fisierul JavaScript:

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Exemple de componente Bootstrap folosite in aplicatia noastra:

<nav class="navbar navbar-inverse navbar-fixed-top">

</nav>

Reprezinta bara de sus a site-ului care e fixata.

<a href="index.php"><div class="jumbotron" id="jumbotron"></div></a>

Reprezinta partea cu log-ul site-ului.

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

Tipuri de butoane cu diferite semnificatii.Exemplu butonul cu clasa btn-danger este colorat rosu si poate fi folosti in scopul de a sterge.

1.8 Xampp

XAMPP este un pachet de programe free software, open source și cross-platform web server, care constă în Apache HTTP Server, MySQL database și interpretoare pentru scripturile scrise în limbajele de programare PHP și Perl.

Acest program este lansat sub termenii licenței GNU și acționează ca un web server capabil de a servi pagini dinamice. XAMPP este disponibil pentru Microsoft Windows, Linux, Solaris, și Mac OS X, și este utilizat în principal pentru dezvoltarea proiectelor web. Acest software este util pentru crearea paginilor dinamice, utilizând limbaje de programare ca PHP, JSP, Servlets.

Caracteristici si cerinte:

Pentru a instala XAMPP, trebuie descărcat kitul de instalare în unul din formatele ZIP, TAR, 7z sau EXE, fără a fi nevoie de modificarea configurării componentelor instalate. XAMPP este actualizat cu regularitate pentru toate componentele: Apache/MySQL/PHP și Perl. El vine, deasemeni, cu alte module, cum ar fi OpenSSL și phpMyAdmin.

Instalarea XAMPP ia mult mai puțin timp decât instalarea fiecărei componente în parte. Pot exista mai multe instanțe de XAMPP pe un singur computer, și fiecare instanță poate fi copiată pe alt computer.

Utilizare:

In mod oficial, designerii XAMPP au avut intenția de a îl utiliza numai ca utilitar de dezvoltare, pentru a permite designerilor și programatorilor web să își testeze munca pe calculatoarele proprii, fără a avea nevoie de acces la Internet. Pentru a face posibil acest lucru, multe caracteristici de securitate importante sunt dezactivate în mod implicit. In practică, totuși, XAMPP este uneori utilizat pentru a servi pagini web în World Wide Web. Un utilitar special este asigurat pentru a proteja prin parolă cele mai importante părți ale pachetului.

XAMPP deasemeni asigură suport pentru crearea și manipularea bazelor de date în MySQL și SQLite între utilizatori.

Odată ce XAMPP este instalat, poți trata adresa de localhost a serverului XAMPP ca pe un server la distanță, prin connectarea utilizând protocolul client FTP. Utilizarea unui program ca FileZilla are multe avantaje atunci când instalezi un [CMS[content management system]] (CMS) ca Joomla. Te poți deasemeni conecta la o gazdă locală prin FTP utilizând editorul HTML propriu.

Pentru utilizatorul FTP implicit "newuser", parola FTP implicită este "wampp".

Utilizatorul MySQL implicit este "root", iar acesta nu are o parolă MySQL implicită. Cu programul batch resetroot.bat din subdirectorul mysql al directorului unde este instalat XAMPP, puteți reseta acest utiliyator încât să aibă parola vidă.

1.9 Notepad++

Notepad++ este un editor de text gratuit pentru Windows, găzduit la SourceForge. Programul permite editarea codului sursă specific unui număr mare de limbaje de programare, precum C, C++, PHP, HTML, JavaScript.

Facilități remarcabile sunt :

culoare sintactică pentru 48 de limbaje de programare (se poate modifica de către utilizator);

Tipărirea color a codului sursă;

Autocompletare = deducerea și întregirea automată a cuvântului de cod din biblioteca utilizată;

Interfață cu mai multe ferestre (utilizează taburi);

Suport pentru căutări/înlocuiri cu expresii regulate PERL;

Suport pentru macroinstrucțiuni;

Notepad++ se bazează pe motorul Scintilla, fiind programat în C++ și utilizândWin32 API și biblioteca STL, asigurând astfel o execuție rapidă și un consum redus de resurse.

1.10 PHPMailer

PHPMailer este o Clasa PHP gratuita pentru trimitere email-uri, suporta functia mail(), SMTP si POP3, mesaje cu format HTML, atasamente, si altele. Trimite email-uri prin functia PHP mail(), QMail, sau direct cu SMTP.

Exemplu folosit in aplicatia noastra cand adminul confirma o comanda se trimite mail automat cu informatiile necesare despre comanda.

$mesaj = '<h3>Comanda a fost livrata</h3>

Buna ziua '.$nume.' '.$prenume.' <br />

Comanda dumneavoastra a fost confirmata si livrata cu succes.<br /> <br />

Produse comandate:<br /> '.$produse.' <br />

Cost transport : 20 RON <br />

Total de plata : '.$total.'<br>

Va multumim ca folositi seriviciile noastre.<br />';

$mail = new PHPMailer(true);

$mail->IsSMTP(); // telling the class to use SMTP

$mail->SMTPDebug =2;

$mail->From = "[anonimizat]";

$mail->FromName="AUTO CAR PARTS";

$mail->SMTPAuth = true; // enable SMTP authentication

$mail->SMTPSecure = "ssl"; // sets the prefix to the servier

$mail->Host = "smtp.gmail.com"; // sets GMAIL as the SMTP server

$mail->Port = 465; // set the SMTP port for the GMAIL server

$mail->Username = "[anonimizat]"; // GMAIL username

$mail->Password = "valy1234"; // GMAIL password

$mail->AddAddress($email);// emailul utilizatorului/clientului/

//$mail->AddReplyTo("[anonimizat]","Ticket System");

$mail->WordWrap= 50;

$mail->IsHTML(true);

$mail->Subject='Comanda livrata';

$mail->Body=$mesaj;

if($mail->Send()){

echo "Send mail successfully";

}

else{

echo "Send mail fail";

}

1.11 FPDF

FPDF este o clasa PHP care ne permite crearea de documente PDF.Avantajul folosirii acestei clase este ca nu necesita instalarea PDFlib si este gratuita.Avem nevoie doar de fisierul PHP care contina clasa FPDF si un director cu fonturile pe care le putem folosi in documentul PDF, acestea le putem descarca de pe site-ul oficial www.fpdf.org la fel si documentatie in limba engleza si tutoriale.

Cum folosim FPDF

Primul pas e sa copiem pe server fisierul PHP cu clasa FPDF si directorul cu fonturile, apoi in fisierul php includem aceasta clasa dupa care urmeaza datele necesare creari documentului PDF.

Aceste date trebuie sa fie in principal urmatoarele:

1. Se creaza obiectul ce va reprezenta documentul PDF. Pentru aceasta se foloseste expresia new FPDF(), aceasta poate prelua 3 argumente, exemplu: new FPDF('P','mm','A4'); primul argument defineste orientarea paginii (P – Portrait sau L – Landscape), al doilea argument e pentru unitatea de masura (mm – milimetri, cm – centimetri, pt – point), iar ultimul argument este pt. formatul paginii (A3, A4, A5, Letter). Daca nu sunt specificate argumente, documentul va avea valorile implicite: Portrait, milimetri, A4.

2. Se adauga elemente ce definesc fontul, grafica, textul, imagini si altele. Pentru aceasta se folosesc metodele (functiile) clasei FPDF.Aici, inainte de a adauga text, apelam metoda pentru initializarea paginii, functia AddPage(), si metoda pentru definirea fontului SetFont().

3. La urma se trimit datele de iesire cu metoda Output(), aceasta poate prelua 2 argumente, avand forma generala.

Output('file', 'action')

– unde 'file' este numele documentului PDF creat, exemplu 'doc.pdf'

– iar 'action' poate fi unul din literele: 'I', 'D', 'F' sau 'S' care reprezinta actiunea ce se va efectua

– I trimite fisierul pdf sa fie afisat in browser

– D deschide optiunea de download a documentului PDF

– F salveaza fisierul pdf pe server, cu numele (si calea) adaugat in primul atribut

– S returneaza documentul ca string (sir), numele este ignorat.

Daca metoda Output() este apelata fara atribute, documentul PDF va fi afisat direct in browser.

Pentru ca documentul PDF creat sa poata fi vizualizat de browser sau descarcat, browser-ul clientului trebuie sa aibe instalat plug-in-ul pentru Adobe Reader.

Cand continutul pe care doriti sa-l afisati in pagina PDF depsaseste inaltimea acesteia, se va genera automat o pagina noua.

Exemplu simplu in care este creata o pagina PDF si in ea un text.

<?php

include('fpdf.php');

$pdf=new FPDF();

$pdf->AddPage();

$pdf->SetFont('Arial','',16);

$pdf->Text(25,40,'Prima pagina PDF.');

$pdf->Output();

?>

– Dupa includerea fisierului cu clasa FPDF 'fpdf.php' am definit obiectul FPDF() stocat in variabila "$pdf", cu aceasta se va apela metodele clasei.

– Odata obiectul creat, am initializat crearea paginii cu "$pdf->AddPage()", apoi am setat fontul apeland metoda specifica "$pdf->SetFont('Arial','B',16)" – primul argument este numele fontului, al doilea este pentru stil (B-bold, I-italic, U-underline, null-normal).

– In continuare am apelat metoda Text() pentru crearea textului, aceasta preia 3 argumente: primul argument reprezinta distanta X fata de marginea din stanga (aici 25), al doilea argument reprezinta distanta Y fata de marginea de sus (aici 40) si ultimul este textul care va apare in pagina PDF.

– Dupa ce am definit toate aceste elemente, apelam metoda Output(), fara atribute, care trimite datele de iesire pentru afisarea documentului PDF.

– Daca doriti salvarea acestuia pe server, apelati aceasta metoda astfel

$pdf->Output('fisier.pdf', 'F'); (in acest caz, PHP trebuie sa aibe permisiuni de creare fisiere pe server). Daca doriti ca utilizatorului sa-i apara optiunea de download, apelati aceasta metoda asa:

$pdf->Output('fisier.pdf', 'D'); (fisierul nu va fi salvat si pe server).

Capitolul 3. Analiza problemei

3.1 Tipuri de utilizatori

Tipurile de utilizatori care pot folosi aplicatia sunt urmatoarele:

1.Tipul client – dispune de posibilitatea de a-si face cont, cu datele introduse putand sa se autentifice in aplicatie.Acesta mai dispune si de un cos de cumparaturi in care isi poate adauga produsele favorite si pe baza acestuia putand sa le comande.Clientul isi poate comanda produsele cu sau fara cont.Daca clientul se conecteaza acesta, prin optiunea "contul meu" isi poate modifica datele despre el, de exemplu nume, prenume, adresa, email necesare pentru livrarea produselor.In optiunea contul meu acesta mai dispune si de posibilitatea de a vedea comenzile efectuate iar daca acestea au fost confirmate isi poate descarca factura in format electronic.

2.Tipul administrator – dispune de optiunea unui control panel al aplicatiei in care acesta poate adauga, modifica sau sterge marci masini, modele, tipuri, categorii si piese.Administratorul dispune si de posibilitatea de a vedea comenzile efectuate de clienti de a le anula prin stergerea acestora sau confirmarea acestora daca clientul doreste comanda.Tot admnistratorul poate sa schimbe tipul unui utilizator facandu-l admin.

3.2 Proiectarea bazei de date

Un sistem de gestiune a bazelor de date relaționale se definește ca fiind un sistem de gestiune care utilizează organizarea datelor conform modelului relațional. Conceptul de bază al modelului relațional este acela de relație / tabelă datorită limbajului SQL. Structura relațională a datelor cuprinde următoarele componente:

Domeniul – este ansamblul de valori caracterizat printr-un nume (domeniu de valori). El poate fi precizat explicit – prin enumerarea tuturor valorilor care aparțin domeniului – sau implicit prin precizarea proprietăților pe care le au valorile din domeniu.

Relația (tabela) este un subansamblu al produsului cartezian al mai multor domenii, caracterizat prin nume și care conține tupluri cu semnificație (tabelă). Într-o relație, tuplurile trebuie să fie distincte nu se admit duplicate. O reprezentare a relației este tabelul bidimensional (tabela de date) în care liniile reprezintă tuplurile, iar coloanele corespund domeniilor. Numărul tuplurilor dintr-o tabelă este cardinalul tabelei, numărul valorilor dintr-un tuplu este gradul tabelei. Pentru a diferenția coloanele care conțin valori ale aceluiași domeniu, eliminând dependența de poziție, se asociază fiecărei coloane un nume distinct – atribut. În timp ce tuplurile sunt unice, un domeniu poate apărea de mai multe ori în produsul cartezian pe baza căruia este definită tabela.

Legătura între două tabele nu se poate face după orice câmpuri, ci numai după acelea care într-o tabelă sunt cheie primară și în cealaltă reprezintă cheie externă. Cele două câmpuri prin care se stabilește relația trebuie să fie de același tip.

Conceptul bazelor de date relaționale este axat pe metodologia entitate-tabelă (E-T). Entitățile modeleazăobiectele care sunt implicate într-o organizație, tabelele modelează legăturile dintre entități. În plus, restricțiile de integritate aplicate entităților și relațiilor formează o parte importantă a specificațiilor E-T. Entitățile sunt descrise utilizând atribute. Fiecare atribut specifică o particularitate semnificativă a entității. Atributelor li se asociază valori care au drept scop identificarea entității, realizându-se o înregistrare în tabela respectivă.

Tipuri de relații

Relația unu-la-unu (1-1) este tipul cel mai simplu de relație, prin care unui element din tabela R1 îi corespunde un singur element din tabela R2 și reciproc. Relația 1-1 este mai rar folosită, în general pentru a reduce numărul de atribute dintr-o tabelă.

Relația unu-la-mai mulți (1-N) este tipul de relație prin care unui element din tabela R1 îi corespund unul sau mai multe elemente din tabela R2, iar unui element din tabela R2 îi corespunde un singur element din tabela R1.

Relația mai mulți-la-mai mulți (M-N) prin care unui element din tabela R1 îi corespunde unul sau mai multe elemente din tabela R2 și reciproc. Acest tip de relație este frecvent întâlnită, dar nu se poate implementa direct în bazele de date relaționale. Pentru modelare se folosește o relație suplimentară, de tip 1-N pentru fiecare din tabelele inițiale.

Exemple de comenzi ale limbajului SQL sunt:

Describe <nume tabel>; – afișează structura unui tabel

SELECT * FROM <nume tabel>; – returnează toate înregistrările dintr-un tabel

SELECT <nume coloană1, nume coloană2, etc> FROM <nume tabel> WHERE <condiție>; -returnează un anumit subset de date după condiția dată

INSERT INTO < nume tabel> VALUES (valoare1, valoare2, valoare3, etc); – inserați o

înregistrare în tabel

INSERT INTO < nume tabel> (<nume coloană1, nume coloană2, etc>) VALUES (valoare 1,valoare 2, valoare 3, etc); – inserați doar anumite valori în tabel conform coloanelor specificate

ALTER TABLE <nume tabel> ADD (<nume noua coloană> <tipul de dată>); – adăugarea unei noi coloane într-un tabel

ALTER TABLE <nume tabel> DROP COLUMN <nume coloană>; – eliminarea unei coloane dintr-un tabel

DELETE from <nume tabel>; – șterge toate datele din tabel. NU ȘTERGE TABELA!

DELETE from <nume tabel> WHERE <nume coloană> = ' valoare‘; – ștergerea de date (o înregistrare) conform condiției specificate

Drop TABLE <nume tabel>; – șterge tabela

UPDATE <nume tabel> SET <nume coloană> = <valoare> WHERE <condiție>; – modifică valori în tabel după condiția dată

Avantajele folosirii bazelor de date

Utilizarea  bazelor  de  date  prezintă  următoarele  avantaje:
          – Controlul  centralizat  al  datelor, putând   fi  desemnată  o  persoană  ca  responsabil  cu   administrarea   bazei  de  date;
          – Viteza  mare  de  regăsire  și   actualizare  a  informațiilor;
          – Sunt  compacte: volumul  ocupat  de   sistemele  de  baze  de  date  este  mult  mai   redus  decât  documentele scrise;
         – Flexibilitatea  ce  constă  în   posibilitatea  modificării  structurii  bazei  de  date   fără a  fi  necesară  modificarea  programelor  de   aplicație;
          – Redundanță  scăzută  a  datelor   memorate, care  se  obține  prin  partajarea  datelor   între  mai  mulți  utilizatori  ți  aplicații;
          – Posibilitatea  introducerii  standardelor   privind  modul  de  stocare  a  datelor,  ceea   ce  permite  interschimbarea  datelor  între  organizații;
          – Menținerea  integrității  datelor  prin   politica  de  securitate, prin  gestionarea  tranzacțiilor   și  prin  refacerea  datelor  în  caz  de   funcționare  defectuoasă  a  diferitelor  componente   hardware  sau  software;
           – Independența  datelor  față  de   suportul  hardware  utiliza

Exemple de SGBD.

Cele mai importante sisteme de gestiune a bazelor de date sunt:

Microsoft SQL Server

Microsoft Access

Visual FOX PRO

Oracle

MySQL

Folosirea unui sistem de gestiune a bazei de date relațional cum este MySQL este foarte avantajoasă întrucât face posibilă concatenarea rezultatelor din mai multe tabele, asocierea și lipirea informației extrase din surse diferite. Acest aspect conferă flexibilitate deosebite aplicației.

Analizând cerințele și specificațiile acestei teme, s-a decis organizarea informatiilor intr-o singură bază de date, denumită auto, fiind compusă din 10 tabele.

Crearea bazei de date s-a realizat in phpMyAdmin care este un sistem de gestiune a bazelor de date MySQL liber, open source, scris în PHP și destinat administrării bazelor de date prin intermediul unui browser web. Prin phpMyAdmin se pot întreprinde diverse operații cum ar fi crearea, modificarea sau ștergerea bazelor de date, tabelelor, câmpurilor sau rândurilor, executarea de comenzi (interogări) SQL.

Proiectarea la nivel logic

marca_masina [cod_marca, denumire_marca]

model_masina [cod_model, tip_model, an_aparitie, an_finalizare, cod_marca]

detalii_masina [cod_masina, tip_masina, combustibil, an_aparitie, an_finalizare, CP, numar_cilindri, capacitate_cilindrica, cod_model]

categorii_piese [cod_categorie, denumire_categorie]

piese_masini [ID, cod_categorie, cod_marca, cod_model, cod_masina, cod_piesa, denumire, pret, stoc, detalii, producator]

comenzi [id_comanda, nr_comanda, cod_utilizator, data, observatii, status]

comenzi_detalii [id, id_comanda, cod_piesa, pret, cantitate]

judete [id, code, name]

utilizatori [cod_utilizator, nume, prenume, serie_ci, numar_ci, cnp, strada_nr, bloc, scara, ap, cod_postal, judet, localitate, adresa_livrare, email, telefon, parola, tip_utilizator]

tip_utilizator [ID, tip_utilizator]

Proiectarea la nivel relational

Proiectarea la nivel fizic

Capitolul 3. Proiectarea interfeței

O interfață este o parte a unui sistem care servește comunicării. În tehnologia calculatoarelor termenul de interfață se referă la un punct (loc) de interacțiune dintre două unități, dispozitive componente etc. ale unui sistem, care este compatibil din punct de vedere hardware și software spre ambele părți ce comunică prin el uni- sau bidirecțional. Deci, prin analogie, sensul de interfață poate fi uzual interpretat ca o față (suprafață) de margine, de graniță a unui element, care servește comunicației spre și/sau dinspre alte elemente.

Schimbul de informații și interacțiunea prin o interfață, între două unități de sistem, se realizează prin mărimi fizice (tensiune, curent electric) sau prin mărimi logice (date) care se pot prezenta sub formă de semnale analogice (continue) sau semnale digitale (discontinue, discrete). Nu sunt considerate ca interfețe elementele de trecere, de comunicație mecanică ce servesc semnalizării sau comenzilor în tehnologia mecanică a diverselor mașini.

In prezent tehnologiile Web reprezintă și vor reprezenta cel mai dinamic și fascinant domeniu al informaticii actuale și viitoare. Evident, ele fiind cele care în mai puțin de un deceniu au modificat complet globul pământesc și mentalitățile.

În proiectarea interfețelor web trebuie respectate anumite recomandări de proiectare.Astfel, Shneiderman (1998) identifică cinci factori măsurabili pentru evaluarea utilizabilității: viteza de execuție, timpul de învațare, reținerea în timp, rata erorilor și satisfacția subiectivă.

Nielsen (1993) considera că esențiale pentru utilizabilitatea unui sistem ar fi următoarele trăsături: eficiența, ușurința în învatare, memorabilitatea, robustețea și satisfacția.În consecință, Jacob Nielsen (1994) propune zece principii de bază: vizibilitatea stării sistemului, compatibilitate cu activitatea, controlul și libertatea utilizatorului, consistența și respectarea standardelor, prevenirea erorilor, recunoaștere în loc de reamintire, flexibilitate și eficiență, estetică și design minimal, ajutarea utilizatorului în caz de eroare și furnizarea de mesaje de eroare complete și utile.

Pentru ca o interfață web să fie cât mai atractivă, ar trebui respectate anumite reguli de proiectare. În primul rând, trebuie să existe o pagină de început (home page), care să facă legătura cu toate celelate pagini ale site-ului. De asemenea este important să existe funcția de căutare, pentru ca utilizatorul să poată găsi într-un timp scurt ceea ce are nevoie. Una din recomandări ar fi reducerea cantității de informație prea complexă, prin evitarea detaliilor inutile, realizând astfel creșterea vitezei de citire și interpretare. Cea mai buă metodă o reprezintă exprimarea concisă, la subiect, recurgerea la formate familiale, standard, de introducere sau afișare a datelor, concepându-se interfața în aceeași manieră ca și în cazul altor site-uri.

Este destul de important să alegem o rezoluție pentru fereastra aplicației în concordanță cu volumul de informații din fereastră și cu rezoluția folosită de majoritatea utilizatorilor aplicației. Este foarte de greu de folosit o aplicație la care fereastra nu încape pe ecran. Trebuie evitate, de asemenea, utilizarea imaginilor prea mari, pentru o încarcare mai rapidă a paginilor. Un alt punct care trebuie atins îl reprezintă structurarea paginii astfel încât să ofere un acces rapid la operațiile cele mai frecvente. De asemenea trebuie redusă apariția mesajelor de alertare, pentru a nu diminua atenția utilizatorului de la activitatea desfășurată.

În general, mai mult de 50% din efortul de proiectare și programare, în cadrul unui

proiect, este dedicat interfeței cu utilizatorul. Interfața cu utilizatorul reprezintă un element

critic atât pentru asigurarea succesului unui produs pe piață, cât și a utilității, securității și

plăcerii de a utiliza sistemul respectiv (Mayers, citat de Suduc, 2005).

În proiectarea unei interfețe cu utilizatorul trebuie să se țină cont de marea diversitate a

judecății umane, a caracteristicilor de percepție și personalitate și să se încerce optimizarea

interfeței pentru a se potrivi, în mare măsură, grupului de utilizatori vizați. Interfața cu

utilizatorul trebuie să mărească eficiența rezolvării sarcinilor, atât a utilizatorului cât și a

sistemului.

De asemenea, interfața trebuie să creeze plăcere și satisfacție utilizatorului în utilizarea

sistemului, în loc să producă aversiune, resentimente și plictiseală, lucru ce se întâmplă, de

obicei, în sistemele cu o interfață sărăcăcioasă (McQueen, 1989). O interfață inteligentă se

adaptează la utilizator și la mediu, în loc ca utilizatorul să se adapteze la o anumită interfață. O

astfel de interfață determină nevoile utilizatorului și încearcă maximizarea eficienței

comunicării (Ehlert, 2003).

Interfața cu utilizatorul are un rol deosebit în diminuarea erorilor în utilizarea unui

produs. De aceea este foarte important ca în proiectarea interfeței să se țină cont de

caracteristicile umane astfel încât să diminueze rata erorilor în operare.

Interfața sistemului reprezintă un factor de risc important în utilizarea unui sistem

informatic fiind binecunoscut faptul că multe erori de operare ale unui sistem informatic se

datorează unei interfețe prost concepute. Chiar și utilizatorii foarte bine instruiți se pot panica

în situații neobișnuite, când nivelul stresului crește. Interfața cu utilizatorul trebuie să asigure

feedback-ul corespunzător operatorului pentru a-i permite luarea deciziilor pe baza unor

informații cât mai cuprinzătoare și actualizate legate de starea procesului (Shelton, 1999) (un

proces de producție, un proces specific activității instituției în care este utilizat sistemul, etc.).

Utilizatorul reprezintă cea mai complexă și mai puțin previzibilă componentă a unui

sistem informatic, de aceea este și cea mai dificilă de modelat în crearea interfeței om-mașină.

În realizarea unei interfețe om-mașină, în general, accentul se pune pe utilizabilitate. În

unele cazuri, precum cel al sistemelor critice de siguranță, interfața trebuie să ajute la

îndeplinirea scopului principal al sistemului: siguranța. Interfața trebuie să ajute în prevenirea

realizării unei greșeli din partea utilizatorului și cauzării unui pericol. În aceste cazuri,

utilizabilitatea e un obiectiv complementar, astfel încât interfața să fie ușor de utilizat să reducă

anxietatea utilizatorului. Trebuie să existe un echilibru între caracteristicile care fac interfața

ușor de utilizat și cele care asigură siguranța. Spre exemplu, un sistem care permite

utilizatorului realizarea unei proceduri prin simpla apăsare a tastei Enter de mai multe ori

asigură o utilizare ușoară dar creează premisele unei situații în care utilizatorul confirmă foarte

repede o acțiune fără să evalueze consecințele (Shelton, 1999). Interfața cu utilizatorul trebuie

să fie ușoară și intuitivă dar nu atât de simplă cât să determine o stare de liniște și lipsă de

responsabilitate din partea utilizatorului în situațiile de urgență.

În cazul celorlalte sisteme, utilizabilitatea este caracteristica principală a unei interfețe.

Ea trebuie să furnizeze elemente de control intuitive, să ghideze utilizatorul în realizarea unei

sarcini, alegând acțiunile corespunzătoare și să furnizeze un feedback corespunzător

utilizatorului atât în situațiile în care acțiunea nu s-a realizat cu succes cât și în caz contrar.

Crearea unei interfețe corecte care să reducă riscul erorilor umane pornește de la

observarea situațiilor care duc la scăderea performanțelor umane.

Interfața cu utilizatorul trebuie să asigure un grad de încredere care să permită

operatorului să evalueze validitatea informațiilor.

Utilizabilitatea este un atribut de calitate care evaluează cât de ușor se utilizează o

interfață. Standardul ISO 924-11 din 1994 definește utilizabilitatea ca măsura în care un anumit

produs poate fi utilizat de către utilizatori, pentru a îndeplini obiective date, într-un context de

lucru specificat, cu eficacitate, eficiență și satisfacție.

Designul unei interfețe influențează gradul de efort pe care utilizatorul trebuie să-l

depună pentru a introduce date în sistem, pentru a interpreta ieșirile sistemului și pentru a

învăța realizarea acestor operații. Utilizabilitatea reprezintă în ce măsură se ține cont, în crearea

interfeței unui sistem, de psihologia și fiziologia utilizatorilor, punându-se accentul pe crearea

unui sistem care să fie eficace, eficient și “prietenos” (user-friendly) în utilizare.

Scopul principal al interfeței utilizator este de a asigura o interacțiune cu utilizatorul

simplă, logică și intuitivă, pe cât posibil – centrată pe utilizator.

Utilizabilitatea e o caracteristică a interfeței cu utilizatorul, dar adesea e asociată și cu

funcționalitatea sistemului. Ea descrie cât de bine poate fi folosit un sistem, în scopul pentru

care a fost proiectat, pentru atingerea obiectivelor utilizatorului în mod eficient și satisfăcător,

ținând cont de cerințele contextului în care e utilizat. Aceste funcționalități și caracteristici nu

sunt întotdeauna parte a interfeței cu utilizatorul, dar sunt elemente cheie în utilizabilitatea unui

sistem.

Utilizabilitatea analizează aspecte precum: cine sunt utilizatorii, ce știu ei și ce pot să

învețe; ce vor sau au nevoie să realizeze; care este background-ul utilizatorilor; în ce context

lucrează utilizatorii; ce trebuie să realizeze sistemul și ce trebuie să realizeze utilizatorul (Suduc

și Filip, 2008).

Structura paginilor (Wireframes)

Structura paginii pentru Client.

Header-ul contine link-uri catre contul meu sau delogare,iar daca nu este conectat link-uri catre autentificare sau inregistrare.

Logo Website contine un logo.

Bara de meniu contine o zona de cautare si diferite link-uri ale site-ului.

Carousel este o zona cu imagini care se schimba ca un slideshow.

Cautare piese dupa masina este o zona unde clientul cauta produsele necesare in functie de masina.

Footer este o zona care cuprinde informatii de contact,diferite link-uri.

Structura paginii pentru Administrator.

Structura formularului de autentificare.

Acesta este alcatuit din doua input-uri unul fiind de tip text iar celalalt de tip password pentru a masca caracterele introduse si din doua butoane unul de logare iar celalalt de inregistrare in caz ca nu avem cont pentru a ne duce la pagina cu formularul de inregistrare.

Structura formularului de inregistrare.

Acesta este alcautit din mai multe campuri de tip text(nume, prenume, email, localitate), de tip intreg (telefon) , de tip password (parola, confirmare parola) si din doua butoane cel de inregistrare si cel de logare in caz ca avem deja cont.

Structura formularului de adaugare model masina.

Este alcautit din trei campuri de text (model, anul apartiei , anul incetarii fabricarii) un camp de tip select unde putem selecta marca respectiva pentru modelul care vrem sa-l introducem si un buton.

Structura formularului de adaugare tip masina.

Formularul de tip masina este alcatuit din 6 campuri (tip, combustibil, an apartie, an finalizare, nr. cilindri, cap cilindrica), doua campuri de tip select unde trebuie sa alegem marca si modelul si un buton pentru adaugare.

Structura paginii de vizualizare a comenzilor pentru admin.

Aceasta pagina este alcatuita din doua butoane.Butoanele respective sunt folosite pentru afisarea comenzilor confirmate cat si cele neconfirmate.Mai contine si un cap de cautare in care putem cauta comanda dupa numele clientului si un tabel in care v-or fi afisate comenzile alcauit din urmatorele celule( nr.comanda, nume, prenume, telefon, data efectuarii comenzii, status al comenzii daca aceasta a fost sau nu confirmata iar daca comanda nu este confirmata acest camp va contine un buton pentru confirmarea ei, genereaza factura unde aici putem sa generam factura pentru fiecare comanda in parte, si zona de stergere unde putem sterge comanda respectiva.

Structura zonei Contul meu.

Pagina Contul meu este zona unde clientul isi poate modifica datele personale despre el necesare pentru a face o comanda, email-ul si parola si o zona unde acesta poate vedea comenzile efectuate.Ea este alcauita din patru butoane (date personale, email si parola ,istoric comenzi, editare) si campuri cu datele personale ale clientului (nume, prenume, telefon, adresa si altele).

Capitolul 3. Implementarea practică a aplicației

3.1 Functia de conectare cu baza de date

Pentru a putea folosi baza de date in aplicatie este necesar sa realizam conexiunea cu aceasta.Conectarea cu baza de date se realizează pe baza unui username și a unei parole, obtine in timpul instalarii programului XAMPP.

De câte ori se va lucra cu MySQL, va trebuii să se realizeze conexiunea cu baza de date și scriptul PHP, folosind o anumita sintaxă. Această secvență de cod este salvata in config.php și conține următoarele linii :

<?php

session_start();

$AdresaBazaDate = "localhost";

$UtilizatorBazaDate = "root";

$ParolaBazaDate = "";

$NumeBazaDate = "auto";

$conexiune = mysql_connect($AdresaBazaDate,$UtilizatorBazaDate,$ParolaBazaDate)

or die("Nu ma pot conecta la MySQL!");

$selected = mysql_select_db($NumeBazaDate, $conexiune) or die("Nu gasesc baza de date");

?>

Prin funcția de mysql_connect() face conectarea la baza de date având ca parametrii hostul (ip-ul) urmat de userul necesar conectării si parola lui urmând ca rezultatul apelării să fie salvat in variabila $conexiune care va avea valoarea true sau false, în funcție de conectarea la serverul MySQL, iar în cazul eșuării va afișa mesajul conținut la funcția die().

Prin funcția mysql_select_db() se selectează baza de date la care se face conexiunea, având ca parametrii numele bazei de date și identificatorul de access la conexiunea către serverul MySQL.

3.2 Functia de autentificare si inregistrare

Functia de inregistrare.

Aceasta functie ne permite crearea unui cont in aplicatia noastra.Codul se afla in inregistrare.php

care contine un formular HTML in care se introduc datele pentru crearea contului. Partea de cod care realizează acest lucru este următoarea :

<div class="well" class="wellInregistrare" id="wellInregistrare">

<form role="form" action="?page=inregistrare&actiune=validare#error" method="post">

<h2>Inregistrare <!–<small> It s free and always will be.</small> –></h2>

<hr class="colorgraph">

<div class="row">

<div class="col-xs-12 col-sm-6 col-md-6">

<div class="form-group">

<input type="text" name="nume" id="first_name" class="form-control input-lg" placeholder="Nume" tabindex="1">

</div>

</div>

<div class="col-xs-12 col-sm-6 col-md-6">

<div class="form-group">

<input type="text" name="prenume" id="last_name" class="form-control input-lg" placeholder="Prenume" tabindex="2">

</div>

</div>

</div>

<div class="form-group">

<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" tabindex="3">

</div>

<div class="form-group">

<input type="text" name="mobil" id="display_name" class="form-control input-lg" placeholder="Telefon" tabindex="4">

</div>

<div class="form-group">

<input type="text" name="localitate" id="display_name" class="form-control input-lg" placeholder="Localitate" tabindex="5">

</div>

<div class="row">

<div class="col-xs-12 col-sm-6 col-md-6">

<div class="form-group">

<input type="password" name="parola1" id="password" class="form-control input-lg" placeholder="Password" tabindex="6">

</div>

</div>

<div class="col-xs-12 col-sm-6 col-md-6">

<div class="form-group">

<input type="password" name="parola2" id="password_confirmation" class="form-control input-lg" placeholder="Confirm Password" tabindex="7">

</div>

</div>

</div>

<hr class="colorgraph">

<div class="row">

<div class="col-xs-12 col-md-6"><input type="submit" value="Inregistrare" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>

<div class="col-xs-12 col-md-6"><a href="?page=autentificare" class="btn btn-success btn-block btn-lg">Autentificare</a></div>

</div>

</form>

</div>

</div>

După realizarea formularului, datele trebuie prelucrate prin $_POST și apoi verificat conținutul acestora. Verificarea se face in fișierul inregistrare.php deoarece după cum se vede acțiunea formularului de mai sus este pe fișierul inregistrare.php&actiune=validare.Actiunea se realizeaza prin intermediul switch($_GET['actiune']) care ia valoare lui actiune si cauta cazul validare.Codul este :

case 'validare':

$_SESSION['email'] = $_POST['email'];

$_SESSION['parola1'] = $_POST['parola1'];

$_SESSION['parola2'] = $_POST['parola2'];

$_SESSION['nume'] = $_POST['nume'];

$_SESSION['prenume'] = $_POST['prenume'];

$_SESSION['mobil'] = $_POST['mobil'];

$_SESSION['localitate'] = $_POST['localitate'];

if(($_SESSION['email'] == '') || ($_SESSION['parola1'] == '') || ($_SESSION['parola2'] != $_SESSION['parola1']) || ($_SESSION['nume'] == '') || ($_SESSION['prenume'] == '') || ($_SESSION['mobil'] == '') || (!is_numeric($_SESSION['mobil'])) || (strlen($_SESSION['mobil']) < 2) || ($_SESSION['localitate'] == ''))

{

echo "<div class='bs-example' id='error'>

<div class='alert alert-warning'>

<a href='#' class='close' data-dismiss='alert'>&times;</a>

<strong>Nu ai introdus date in formular sau cele introduse nu sunt corecte.</strong><br>

Apasati <a href='?page=inregistrare#wellInregistrare'>aici</a> pentru a va intoarce la pagina precedenta.

</div>

</div> ";

echo "<script type='text/javascript'> $('.alert').alert().delay(2000).fadeOut('slow'); </script>";

}

else

{ echo "<div class='bs-example' id='error'>

<div class='alert alert-success'>

<a href='#' class='close' data-dismiss='alert'>&times;</a>

<strong> Va multumim. <br>

Datele au fost introduse cu succes in baza de date. </strong><br>

Apasati <a href='?page=autentificare#wellAutentificare'>aici</a> pentru a va intoarce la pagina precedenta.

</div>

</div>

";

echo "<script type='text/javascript'> $('.alert').alert().delay(2000).fadeOut('slow'); </script>";

createUser([

"nume" => $_SESSION['nume'],

"prenume" => $_SESSION['prenume'],

"judet" => '',

"localitate" => $_SESSION['localitate'],

"adresa_livrare" => '',

"email" => $_SESSION['email'],

"telefon" => $_SESSION['mobil'],

"parola1" => $_SESSION['parola1']

]);

$_SESSION['email'] = '';

$_SESSION['parola1'] = '';

$_SESSION['parola2'] = '';

$_SESSION['nume'] = '';

$_SESSION['prenume'] = '';

$_SESSION['mobil'] = '';

$_SESSION['localitate'] = '';

}

break;

}

In cadrul acestui cod avem la inceput verificarea campurilor.Daca campurile nu au fost completate sau daca au fost introduse gresit se va afisa un mesaj de eroare.

Daca campurile au fost completate corect se apeleaza functia createUser() care creeaza un utilizator.Aceasta functie se afla in fisierul functii.php iar fisierul acesta il avem inclus in config.php prin metoda include 'functii.php'; . Funcția creează un statement sql folosind parametrii furnizați și apelează funcția ajutătoare de inserare în bază de date 'insert' care ne executa interogarea, iar dupa aceasta ne afiseaza mesajul de succes.

Functia de autentificare.

Aceasta functie ne permite autentificare la aplicatie in functie de contul creat.Codul pentru autentificare se afla in fisierul autentificare.php care contine un formular HTML alcatuit din 2 campuri unul de text iar celalalt password pentru a masca parola introdusa. Codul formularului este urmatoru:

<div class="well" class="wellAutentificare" id="wellAutentificare">

<form role="form" action="?page=autentificare&actiune=validare#error" method="post">

<fieldset>

<h2>Autentificare</h2>

<hr class="colorgraph">

<div class="form-group">

<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address">

</div>

<div class="form-group">

<input type="password" name="parola" id="password" class="form-control input-lg" placeholder="Password">

</div>

<span class="button-checkbox">

<button type="button" class="btn" data-color="info">Remember Me</button>

<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">

<a href="" class="btn btn-link pull-right">Forgot Password?</a>

</span>

<hr class="colorgraph">

<div class="row">

<div class="col-xs-6 col-sm-6 col-md-6">

<input type="submit" class="btn btn-lg btn-success btn-block" value="Logare">

</div>

<div class="col-xs-6 col-sm-6 col-md-6">

<a href="?page=inregistrare" class="btn btn-lg btn-primary btn-block">Inregistrare</a>

</div>

</div>

</fieldset>

</form>

</div>

După realizarea formularului, datele trebuie prelucrate prin $_POST și apoi verificat conținutul acestora. Verificarea se face in fișierul autentificare.php deoarece după cum se vede acțiunea formularului de mai sus este pe fișierul autentificare&actiune=validare.Actiunea se realizeaza prin intermediul switch($_GET['actiune']) care ia valoare lui actiune si cauta cazul validare.Codul pentru verificarea este :

case 'validare':

$_SESSION['email'] = $_POST['email'];

if(($_POST['email'] == '') || ($_POST['parola'] == ''))

{

echo "<div class='bs-example' id='error'>

<div class='alert alert-warning'>

<a href='#' class='close' data-dismiss='alert'>&times;</a>

<strong> Completeaza casutele</strong><br>

Apasati <a href='?page=autentificare#wellAutentificare'>aici</a> pentru a va intoarce la pagina precedenta.

</div>

</div>

";

echo "<script type='text/javascript'>

$('.alert').alert().delay(2000).fadeOut('slow');

</script>";

}

else

{

$cerereSQL = "SELECT * FROM `utilizatori` WHERE email='".htmlentities($_POST['email'])."' AND parola='".md5($_POST['parola'])."'";

$rezultat = mysql_query($cerereSQL);

if(mysql_num_rows($rezultat) == 1)

{

while($rand = mysql_fetch_array($rezultat))

{

$_SESSION["Tip_utilizator"] = $rand['tip_utilizator'];

$_SESSION["cod_utilizator"] = $rand['cod_utilizator'];

$_SESSION["nume"] = $rand['nume'];

$_SESSION["prenume"] = $rand['prenume'];

$_SESSION["email"] = $rand['email'];

if(isset($_SESSION["Tip_utilizator"])){

if($_SESSION["Tip_utilizator"]==true) {

// header("location:?page=marci_masini");

}

}

$_SESSION['logat'] = 'Da';

echo '<META HTTP-EQUIV=Refresh CONTENT="0; URL=index.php">';

}

}

else

{

echo "<div class='bs-example' id='error'>

<div class='alert alert-warning'>

<a href='#' class='close' data-dismiss='alert'>&times;</a>

<strong> Date incorecte.</strong><br>

Apasati <a href='?page=autentificare#wellAutentificare'>aici</a> pentru a va intoarce la pagina precedenta.

</div>

</div>

";

echo "<script type='text/javascript'>

$('.alert').alert().delay(2000).fadeOut('slow');

</script>";

}

}

break;

}

La inceput avem verificarea campurilor.Daca nu a fost nimic introdus in acele campuri sistemul ne va da un mesaj de eroare.

Tot la început este încarcat și fișierul care se ocupă de conectarea la baza de date precizat mai sus config.php prin următoarea sintagmă :

require_once('config.php');

Daca datele au fost introduse corect, atunci utilizatorul va fi autorizat și redirectat spre pagina de bază (index.php) .

Fiecare utilizator dispune de un tip utilizator.

Tipurile de utilizator sunt Client si Administrator reprezentate prin 2 si 1.Cand un client isi face cont tipul lui este implicit introdus 2 in baza de date.Cand Administratorul se conecteaza acesta are tipul 1 si poate sa acceseze pagina de admin.

Codul pentru aceasta optiune este urmatorul:

if(isset($_SESSION["Tip_utilizator"])){

if($_SESSION["Tip_utilizator"]==1){

a href="admin_panel.php">Panou de Control</a?>

}

if($_SESSION["Tip_utilizator"]==2){

}

Clientul nu poate sa acceseze pagina de admin.

3.3 Terminarea sesiunii de lucru

Apăsarea butonului "Ieșire" din meniul aplicației are ca efect distrugerea sesiunii folosite până atunci. Codul prin care utilizatorul părăsește programul este :

<?php

session_start();

session_destroy();

header("location:index.php");

exit();

?>

Dupa delogare utilizatorul este redirectionat la pagina principala index.php.

3.4 Functia de cautare produse

Aceasta zona permite clientilor sa-si caute produsele necesare in functie de codul original al produsului.Ea se afla in index.php pe bara de meniu.Codul este urmatorul:

<form class="navbar-form navbar-right" role="search">

<div class="form-group">

<input type="text" class="form-control" id="cautaPie" placeholder="Cauta cod piesa…" />

</div><button type="submit" class="btn btn-default" id="cautaPiesa">Cauta</button>

</form>

Pentru a functiona a fost necesar implementarea unei functii jQuery:

$("#cautaPiesa").click(function(){

var cauta = $('#cautaPie').val();

var url = ("?page=cautarepiese&cautaPiesa="+cauta+"#cautapiese");

$(location).attr('href',url);

return false;

});

Functie se activeaza cand dam click pe butonul cauta care are id-ul #cautaPiesa.Cand dam click pe buton aceasta retine in variabila cauta valorea input-ului de tip text cu id-ul #cautaPie iar mai departe ne trimite catre pagina cautarepiese.php trimitand si valorea lui cauta ca parametru.

Codul paginii cautarepiese.php:

if(isset($_GET['cautaPiesa'])){

echo'<div class="panel panel-primary" id="cautapiese">

<div class="panel-heading">

<h3 class="panel-title">Piese</h3>

</div> <div class="panel-body">';

$piese = $mysqli->query('SELECT * from piese_masini where cod_piesa like "%'.$_GET['cautaPiesa'].'%"');

if ($piese) {

//fetch results set as object and output HTML

while($obj = $piese->fetch_object())

{

$img = str_replace(' ', '', (strtolower($obj->cod_piesa)));

$file = 'images/'.$img.'.jpg';

if (file_exists($file)) {

$img = $img;}else{

$img = "noimage";

}

echo '<div id="piese">

<form method="post" action="cart_update.php#locPiese">

<div id="imgpiese"><img style="width:117px;height:117px;" src="images/'.$img.'.jpg" title="'.$obj->denumire.'"></div>

<div id="titlupiesa">

<h3 style="text-decoration: underline;font-weight: bold;">'.$obj->denumire.'</h3>

<h5 style="color:rgb(0, 56, 252);">(Cod produs: '.$obj->cod_piesa.')</h5>

<h style="font-size: 30px;font-weight: bold;">Pret: <h style="color:red;">'.$obj->pret.' RON </h></h>

</div> ';

if($obj->stoc>0)

{ echo '<div id="adaugaincos"><input type="text" name="product_qty" value="1" maxlength="3" style="width:40px;height:32px;text-align:center;">&nbsp;

<button class="btn btn-info"><span class="glyphicon glyphicon-shopping-cart"></span> Adauga in cos</button></div>';

}else{ echo '<div id="adaugaincos">&nbsp;<a class="btn btn-danger"><span class="glyphicon glyphicon-warning-sign"></span> Produsul nu este in stoc</a></div>';

}

echo '<input type="hidden" name="product_code" value="'.$obj->ID.'" />';

echo '<input type="hidden" name="type" value="add" />';

echo '<input type="hidden" name="return_url" value="'.$current_url.'" />'

echo'<div id="producatorpiesa">

<h style="font-size: 20px;font-weight: bold;">Producator: <h style="color:blue;">'.$obj->producator.'</h></h><h style="font-size: 15px;font-weight: bold;">Detalii:<br>'.$obj->detalii.'</h> </div>

</form> </div>';

}

}echo '</div></div>';

}

Pe aceasta pagina avem un if care ne verifica daca $_GET[' cautaPiesa '] are o valoare,iar daca acesta are o valoare ne trimite in corpul if-ului unde ne executa interogarea si ne returneaza toate valorile care contin caracterele introduse in zona de cautare.

3.5 Functia de selectie a marcii masini

De la aceasta zona clientul poate sa-si caute piesele necesare in functie de marca masinii.

Codul se afla in marci_masini.php si acesta este urmatoru:

<?php

$marci = getData('SELECT * FROM marca_masina');

foreach ($marci as $marca) {

$img = str_replace(' ', '_', (strtolower($marca['denumire_marca'])));

echo '

<a class="btn btn-default" id="marci_masini" href="index.php?page=afisare_modele&marca='.$marca['cod_marca'].'#locModele">

<img class="marci_masini" src="images/'.$img.'.png" alt="BMW">'.$marca['denumire_marca'].'

</a>';

}

?>

Codul este alcatuit dintr-o interogare care ne aduce toate marcile masinii din tabela marca_masina si dintr-o functie foreach care pentru fiecare marca ne creaza un buton cu numele acesteia si ii atrebui o imagine reprezentand marca daca aceasta se afla in directoru images.Pentru a ne incarca imaginea am salvat in variabila $img denumire marcii inlocuind prin functia str_replace spatiile libere cu caracterul '_' .De exemplu pentru 'Land Rover' functia va intoarce 'land_rover' si cand seteaza imaginea cauta in directoru images land_rover.png.

Tot functia foreach ne seteaza pe fiecare buton un link care ne duce catre pagina de afisare modele transmitand ca parametru numele marcii.

3.5 Functia de selectie a modelului masinii

Dupa selectarea marcii ne trimite catre pagina de selectare a unui model trasmitand ca parametru marca respectica urmand ca pe pagina afisare_modele.php sa retinem intr-o variabila marca trimisa ca parametru prin metoda $_GET['marca'] aceasta urmand sa o folosim in interogare pentru a afisa modele respective marcii.Codul pentru pagina afisare_modele.php este urmatorul:

<?php

require_once('config.php');

$idMarca = $_GET['marca']; //retinem marca trimisa ca parametru in variabila $idMarca

$modele = getData("select * from marca_masina,model_masina

WHERE marca_masina.cod_marca=model_masina.cod_marca and marca_masina.cod_marca='".$idMarca."' ");

foreach ($modele as $model) {

$img = str_replace(' ', '_', (strtolower($model['denumire_marca'])));

echo "

<tr id='idrand' value='".$model['cod_model']."'>

<td><img src='images/".$img.".png'></img></td>

<td><a href='index.php?page=afisare_masini&model=".$model['cod_model']."&marca=".$model['cod_marca']."&img=".$img."#locTip'>".$model['tip_model']."</a></td>

<td>".$model['an_aparitie']."-".$model['an_finalizare']."</td></tr>";

}

?>

Ca si in cazul anterior pentru a afisa modelele am folosit un foreach care ne creeaza cate un rand in tabel cu informatii despre fiecare model tipul modelului, anul aparitiei si anul finalizarii.

3.5 Functia de selectie a tipului masinii

Dupa selectarea modelului ne trimite catre pagina de selectarea a tipului masinii transmitand mai departe codul_modelului ca parametru.Codul se afla in afisare_masini.php:

<?php

require_once('config.php');

$model = $_GET['model'];

$detalii = getData("select * from detalii_masina where cod_model=".$model);

foreach ($detalii as $detaliu) {

echo "

<tr id='idrand' value='".$detaliu['cod_masina']."'>

<td><img src='images/$img.png'></img></td></td>

<td><a href='index.php?page=categorii_piese&marca=".$marca."

&model=".$model."&tip=".$detaliu['cod_masina']."#categPiese'>".$detaliu['tip_masina']."</a></td>

<td>".$detaliu['an_aparitie']."-".$detaliu['an_finalizare']."</td>

<td>".$detaliu['combustibil']."</td>

<td>".$detaliu['CP']."</td>

<td>".$detaliu['numar_cilindri']."</td>

<td>".$detaliu['capacitate_cilindrica']." cm3</td>

</tr>

";

}

?>

La fel ca si la afisarea modeleor aveam un foreach care ne afiseaza fiecare de tip de masina pentru modelul ales.

3.6 Functia de afisare a categoriilor de piese

Categoriile de piese apar dupa ce am ales marca, modelul si tipul masini.Afisarea lor se face in functie de parametri primiti si in functie daca acestea contin produse.Daca o categorie nu contine produse aceasta nu se va afisa.Codul se afla in categorii_piese.php si este urmatorul:

<?php

require_once('config.php');

$marca = $_GET['marca'];

$model = $_GET['model'];

$tip = $_GET['tip'];

$categorii = getData("SELECT DISTINCT categorii_piese.*

FROM categorii_piese,piese_masini

WHERE

piese_masini.cod_marca = $marca and

piese_masini.cod_model = $model and

piese_masini.cod_masina = $tip and

piese_masini.cod_categorie = categorii_piese.cod_categorie");

$marca = getData("select * from marca_masina where cod_marca = $marca ")[0];

foreach ($categorii as $categorie) {

$img = str_replace(array(' ', '/'),'', (strtolower($categorie['denumire_categorie'])));

echo '<a href="?page=piese&categorie='.$categorie['cod_categorie'].'&tip='.$tip.'#locPiese">

<div class="panel panel-primary" id="categorie_piese">

<div class="panel-heading">

<center><h3 class="panel-title">'.$categorie['denumire_categorie'].'</h3></center>

</div>

<div class="">

<center>

<img id="categorie_imagini" src="images/'.$img.'.jpg" title="'.$categorie['denumire_categorie'].' '.$marca['denumire_marca'].'"></img>

</center>

</div>

</div>

</a> ';

}

Codul contine o interogare care ne returneaza doar categoriile care au piese in ele.Pentru a le afisa am folosit un foreach care ne creaza un div continad numele categoriei si o poza reprezentand categoria.Fiecare categorie ne conduce catre pagina de piese respective categoriei.

3.6 Functia de afisare a produselor

Aceste produse apar dupa ce am ales categoria Filtre in cazul de fata.