Magazinul Virtual My Bike

MAGAZINUL VIRTUAL MY BIKE

Cuprins……………………………………………………………………………………………2

Introducere………………………………………………………………..…………………….3

1.Obiective ………………………………………………………………………………………………………..4

1.1 Obiective generale……………………………………………………………………………….4

1.2 Obiective specifice ……………………………………………………………………………..5

2.Contextul curent ……………………………………….…………..………………….……..8

2.1 Contextul curent in business ..………………………………………………………8

2.2 Contextul tehnic…….…………………………………………………………………11

2.2.1 MVC……………………………………………………………….………11

2.2.2 PHP…………………………………………………………………………13

2.2.3 Baza de date………………………………………………………….……..15

2.2.4 JavaScript…………………………..………………………………….…..22

2.2.5 HTML…………………………………………………..……………………………………………..…..24

2.2.6 CSS……………………………………………………………..…………………………………………..26

2.2.7 Media queries…………………………………………………………..…………………..………..28

3.Soluția propusă ………………………………………………………………………………………………29

4.Concluzii………………………………………………………………………………………….37

5.Bibliografie………………………………….…………………..…………………..………38

Comerțul virtual reprezintă în acest moment un domeniu care se dezvoltă în fiecare an în întreaga lume. Anteprenorii români fac tot posibilul să se adapteze la digitalizarea pieței pentru că aceasta este noua tendință. Acest lucru reduce nevoia de spații comerciale de dimensiuni mari pentru expunerea produselor scăzând cheltuielile firmei cu chirii sau utilități, majoritatea produselor fiind prezentate online pe pagina web a firmelor. Importanța site-urilor web ca modalitate de prezentare a unei afaceri sau ca scop informativ este deja un lucru cert pentru fiecare. Fie că este vorba de o firma cu doi angajați, sau de o companie multinațională, primul lucru pe care un nou client sau partener de afaceri îl va căuta pe internet este adresa site-ului web al companiei respective. În acest caz se poate optimiza prezentarea produselor prin folosirea animațiilor sau a materialelor video care atrag clienții mai mult decât o simplă prezentare verbală sau cu ajutorul unor materiale tipărite. O afacere modernă, indiferent de dimensiuni, este, fără o prezență online pregnantă, fie o afacere exclusiv locală, lipsită de aplicabilitate practică la distanță, fie o afacere implementată simplist și fără prea multe perspective în timp și spațiu. Un client al magazinului virtual My Bike poate să vizualizeze produsele pe care le oferă magazinul, să citească recenzii de la alți clienți personalizate pentru fiecare produs in parte, să iși adauge la favorite produse care îi plac dar nu poate sau nu vrea să le achiziționeze încă și multe altele. Aplicația Web are ca obiectiv promovarea magazinului virtual My Byke prin intermediul Internetului și facilitarea accesului clienților la produsele acestuia. Planificarea reprezintă un aspect crucial în procesul de creare a unui site Web, deoarece este etapa în care se iau decizii care vor influența designul, implementarea și, mai târziu, promovarea site-ului. Pentru început trebuiesc stabilite scopul și obiectivele, publicul ținta, să colecteze informații despre subiectul prezentat și despre concurență.

Obiective

1.1 Obiective generale

Obiectivele generale ale magazinului virtual sunt să ofere clientului o experiență cât mai placută în ceea ce privește design-ul și ușurința de folosire. Acesta poate naviga ușor pe site fie de pe platforme clasice cum ar fi calculatorul personal, fie de pe cele mobile cum ar fi telefonul mobil sau tableta.

• Pentru a eficientiza adaugarea sau editarea produselor aplicația trebuie să aibă în spate o bază de date care poate fi administrată ușor și rapid. Pentru a obtine aceste rezultate am folosit un MVC(Model-View-Controller) .” Model-față-controlor) este un model arhitectural utilizat îningineria software. Succesul modelului se datorează izolării logicii de business față de considerentele interfeței cu utilizatorul, rezultând o aplicație unde aspectul vizual sau/și nivelele inferioare ale regulilor de business sunt mai ușor de modificat, fără a afecta alte nivele.

• Model

Această parte a controlatorului manipulează operațiunile logice și de utilizare de informație (trimisă dinainte de către rangul său superior) pentru a rezulta de o formă ușor de înțeles.

• Viziune

Acestui membru al familiei îi corespunde reprezentarea grafică, sau mai bine zis exprimarea ultimei forme a datelor: interfața grafică ce interacționează cu utilizatorul final. Rolul său este de a evidenția informația obținută până ce ea ajunge la controlator.

• Controlator

Cu acest element putem controla accesul la aplicația noastră. Pot fi fișiere, scripts sau programe; orice tip de informație permisă de interfață. În acest fel putem diversifica conținutul nostru de o formă dinamică și statică, în același timp.”

MVC este o arhitectură software care separă interacțiunea utilizatorului de reprezentarea informației .

1.2 Obiective specific

Obiectivul specific ale aplicației este promovarea produselor de recreere printr-o aplicație online de tip magazin virtual.

Se dorește crearea unui site cu web design responsiv care oferă o experiență de vizionare optimă : navigare și citire cu un minim de redimensionare. Acest procedeu elimină nevoia unei versiuni mobile a site-ului și astfel reduce costurile de găzduire administrare pe care le-ar reprezenta opțiunea cu două pagini separate care este practicată în prezent.

În ceea ce privește publicul țintă, oricine este interesat de achizitionarea unei biciclete, indiferent de vârstă.

Pentru a înțelege comportamentul și necesitățile clientului colectarea informațiilor reprezintă un pas foarte important în planificarea aplicației Web. Din fericire Internetul pune la dispoziție un număr mare de site-uri de biciclete din care se pot colecta informații precum serviciile oferite, produsele oferite, prețuri, ofertele promoționale. De asemenea este bine de colectat informații nu numai cu scopul cunoașterii pieței și al consumatorului dar și a concurenței.

Concurența este reprezentată atât de agențiile mobilă ce oferă aceleași servicii prin intermediul unui Website cât și cele care nu au Website. Pentru a face fața concurenței My Bike trebuie să aibă o gamă de produse cât mai mare și la prețuri cât mai avantajoase.

“Printre magazinele de pe piața autohtonă se numără: Extrembike,ActiveSport,BykeXpert,Bikes`world.

2. Contextul curent

2.1 Contextul curent in business

În acest moment puțin peste 40% din populația țării are acces la internet și comerțul online beneficiază din plin. Suntem cu toții martorii unor schimbări rapide a societății datorate în principal revoluțiilor tehnologice. In același timp tot mai mulți dintre noi resimțim efectele “multinaționalizării” afacerilor și dorinței de profit cât mai mare, sau mai nou de menținere a acestor afaceri, fapt ce duce de cele mai multe ori la o lipsă acută de timp pentru alte activități. In acest context, mediul online devine tot mai atractiv și mai util, atât pentru cumpărători cât și pentru cei care doresc să-și îndrepte activitatea către un nou mod de a face comerț și anume magazinul virtual. „2012 a fost anul în care comerțul electronic și-a mărit ritmul de creștere. Dacă în 2009 volumul plăților online a crescut cu 75% față de anul anterior, în 2011 creșterea a fost de 24%, aceeași tendință manifestându-se și la nivelul numărului de tranzacții. În 2012 însă, față de 2011, comerțul electronic a cunoscut o evoluție mai bună, de 38% raportat la valoarea totală și 51% raportat la numărul tranzacțiilor”, explică Andreia Stavarache, Sales & Marketing Manager PayU România “. Cu toate acestea un magazin online poate fi folosit și ca site de prezetare a produselor pentru clienții care preferă să verifice calitatea produselor personal sau care nu au încredere în modalitățile de plată online. Unul din avantajele unui magazin online este că poate fi vizionat de oricine din lume și deci activitatea poate fi desfășurată internațional cu ajutorul serviciilor de transport sau curierat.

UI/X

Experiență de utilizare (UX) implică o persoană comportamente, atitudini si emotii despre utilizarea unui anumit produs, serviciu sau sistem. Experiența utilizatorului include aspecte practice, experientiale, afective, semnificativ și valoros de om-calculator de interacțiune și produs proprietate. În plus, acesta include o persoană percepțiile de sistem aspecte precum utilitate, ușurința de utilizare și eficiență. Experiență de utilizator poate fi considerat subiectiv în natură la gradul că este vorba individuale percepție și gândire cu privire la sistemul. Experiența utilizatorului este dinamic, acesta este modificat în mod constant în timp, datorită utilizare circumstanțe în schimbare și modificări la sisteme individuale, precum și contextul mai larg de utilizare în care acestea pot fi găsite. User Experience (UX) este un termen folosit de utilizatori pentru exprimarea satisfacției totale pe care un utilizator o obține o data ce a folosit produsul sau sistemul tău. UX = suma unei serii întregi de interacțiuni User Experience (UX) reprezintă percepția ramasă în mintea oricui după o serie de interacțiuni dintre persoane, device-uri și evenimente – sau o combinație între ele. “Serie” este folosit ca un cuvânt operativ. Designul UX = combină 3 tipuri de activități:

Designul “user experience”, o consecință a unor acțiuni conștiente: • Coordonarea interacțiunilor ce pot fi verificate ( designul și programarea butoanelor) • Cunoașterea interacțunilor pe care nu le putem controla (lipsa produselor noi într-un anumit interval de timp) • Reducerea interacțiunilor negative (reclame, pop-up-uri etc.) • Denumiri cât mai evidente • Fiecare întrebare solicita mai mult partea noastră cognitivă sau distrage atenția de la ne-am propus să facem inițial și de multe ori deviem de la acțiunea propusă de aceea trebuie să fie evident ce reprezintă un link spre o informație căutată sau o acțiune dorită. • Pe majoritatea magazinelor de cărți spre exemplu există o opțiune de căutare și una de căutare rapidă, uneori trebuie configrat și seachbar-ul după titlu autor sau un simplu cuvânt cheie prin intermediul unui meniu drop down. În cazul site+ului amazon.com un search este mult mai simplu folosindu-se doar cuvinte cheie. • Utilizatorii nu ar trebui sa petreacă timp gândindu-se la lucruri precum: unde mă aflu? De unde să încep? Unde au pus…? Care sunt cele mai inportante lucruri de aceasă pagină? De ce au denumit aia așa? • Cel mai important lucru pe care trebuie să îl facem este să elimini aceste întrebări. Pe Internet competitorii sunt la un click distanță și dacă frustrezi userii aceștia se vor duce în altă parte. • Cel mai ușor fel de a obține acest lucru este să facem pagnile web self-evident sau cel puțin self-explenatory. • Utilizatorii paginilor petrec foarte puțin dacă nu deloc timp observând design-un complet al unei pagini iar de multe ori scanează rapid textul iar apoi dau click pe ceva care se apropie cât de cât de ceea ce căutau ei. • Sunt cinci lucruri importante pentru a atrage atenția utilizitorului: 1 Creează o ierarhie clară a fiecărei pagini 2 Profită de convenții 3 Compartimentează pagina cât mai clar și bine definit. 4 Evidențiază cu ce se poate interacționa 5 Minimizează zgomotul.”

2.2 Contextul tehnic

Din punct de vedere tehnic atuurile unui site în general sunt viteza de încărcare și ușurința de folosire. Tehnologia din ziua de astăzi tratează aceste cerințe ale utilizatorilor prin găzduire pe un server performant, o conexiune la internet de mare viteză și optimizarea programării efective a site-ului. Primele două soluții se scalează în funcție de traficul de pe pagină deci se poate porni cu găzduirea pe un server mai puțin performant și cu o bandă de internet mai redusă și urmărind traficul zilnic, pe masură ce crește popularitea magazinului și implicit traficul zilnic se poate upgrada găzduirea pentru a adapta la noile cerințe. Programarea trebuie însă optimizată de la început fiind practic o soluție gratuită de îmbunătățire a performanțelor paginii și a experienței pe care o au utilizatorii la accesare.

2.2.1 MVC

MVC este un tipar de arhitectură software care separă reprezentarea informației de interacțiunea acesteia cu utilizatorul. Model-ul constă în programare , logică și funcții. View poate fi orice reprezentare de date de exemplu diagrame sau poze. Controller-ul mediază datele de intrare și le transformă în comenzi pentru Model sau View. Ideea principală din spatele unui MVC este refolosirea codului și separarea funcțiilor programului care simplifică dezvoltarea și mentenanța unei aplicații prin posibilitatea de a modifica o secțiune din cod individual fără a necesita modificări în tot restul codului. (conform Figurii 1). Fiecare componentă intercționează doar cu alte două componente: View-un interacționează cu utilizatorul si Controller-ul, acesta din urmă interacționează cu Model-ul si Model-ul interacționează cu baza de date. Cele trei componente au următoarele roluri: • Model : este partea de cod care se ocupă cu datele sau obiectele care se stochează, este o interfață între baza de date și starea aplicației • Controler : este logica aplicației, de exemplu dacă trebuie aduse la un loc date din mai multe modele și combinate într-un anumit fel de aceste lucruri se ocupă controler-ul. • View : este codul care generează ceea ce se vede efectiv în browser

Figura 1

Crearea unui site cu ajutorul framework-ului web Kohana este scalabilă. Pentru un nou site se copiază fișierul implicit după care se crează pagini în funcție de necesitate care se pot interconecta foarte ușor și include informații sau face redirectări de la o pagină la alta. Din fișierul bootstrap se activează funcționalitățile de care avem nevoie, de exemplu modulul de autentificare sau ORM etc. Baza de date se poate crea cu un alt software de exemplu PHP MyAdmin iar legătura dintre baza de date Sql și OpenCart se face in fișierul de configurare din modulul database. În acesta se specifică numele, username-ul și parola pentru baza de date. Următorul pas este crearea unui fișier model care să folosească informațiile din baza de date. Acesta trebuie sa extindă clasa ORM care oferă programatorului o gamă variată de funcții pentru lucrul cu baza de date cum ar fi funcția find_all() : $variabilă= ORM::factory(‘nume_model’)-> find_all(); care returnează automat toate informațiile din baza de date legate de modelul oferit ca parametru. OpenCart mai oferă funcții de validare pentru a nu mai scrie regex-uri manual pentru fiecare textbox dintr-un formular HTML. Aceste validări variază de la a nu avea câmpuri goale până la un număr specific de caractere specifice, de exemplu 13 cifre pentru un CNP , iar dacă utilizatorul introduce litere sau un număr de cifre diferit de 13 va primi un mesaj de eroare costumizabil pentru a introduce informații corecte.

2.2.2 PHP

PHP (acronim recursiv pentru PHP: Hypertext Preprocessor) este un limbaj de scripting de uz general, cu cod-sursă deschis (open source), utilizat pe scară largă, și care este potrivit în special pentru dezvoltarea aplicațiilor web și poate fi integrat în HTML. În locul unei mulțimi de comenzi pentru a afișa HTML (cum este cazul în C sau Perl), paginile PHP conțin HTML cu cod-sursă încorporat, care realizează "ceva" (în acest caz, afișează "Salut, sunt un script PHP!"). Codul-sursă PHP este încorporat între niște instrucțiuni de procesare de început și de sfârșit speciale <?php și ?>, care vă permit să intrați și să ieșiți din "modul PHP". Ceea ce face PHP să difere de un JavaScript de partea clientului este că codul său este executat pe server, generând HTML care este apoi trimis către client. Clientul va primi rezultatele rulării acelui script, fără a putea cunoaște codul-sursă ce stă la bază. Dumneavoastră chiar puteți să configurați web server-ul să proceseze toate fișierele HTML cu PHP, și atunci într-adevăr nu va fi nici o modalitate ca utilizatorii să afle ce aveți ascuns în mânecă. Cel mai bun lucru la PHP este simplitatea extremă pentru un începător, dar totodată existența multor facilități avansate pentru un programator profesionist. Orice PHP este axat în principal pe scripting de partea server-ului, deci puteți realiza cu el orice poate realiza un alt program CGI, cum ar fi colectarea datelor din forme, generarea conținutului dinamic al paginilor sau trimiterea și primirea cookies. Dar PHP poate face mult mai multe.

Sunt trei domenii principale, unde scripturile PHP sunt utilizate.

• Scripting de partea serverului. Acesta este cel mai tradițional și de bază domeniu al PHP. Aveți nevoie de trei lucruri pentru ca aceasta să funcționeze. Analizatorul PHP (în calitate de CGI, sau modul pentru server), un server web și un navigator web. Trebuie să rulați serverul web cu o instalare PHP conectată la el. Puteți accesa ieșirile programului PHP cu navigatorul web, vizualizând pagina PHP prin server. Toate acestea pot rula pe computerul dumneavoastră de acasă, dacă doar experimentați cu programarea în PHP.

• Scripting în linia de comandă. Puteți să faceți un script PHP să ruleze fără un server și navigator web. Aveți nevoie doar de analizatorul PHP pentru a-l utiliza în acest mod. Acest mod de utilizare este ideal pentru script-uri executate în mod regulat cu cron (pe *nix sau Linux) sau cu Task Scheduler (pe Windows). Aceste script-uri pot fi utilizate de asemenea pentru lucrări simple de procesare a textelor.

• Scrierea aplicațiilor de birou. PHP probabil că nu este cel mai potrivit limbaj pentru a crea o aplicație de birou cu o interfață grafică a utilizatorului, dar dacă cunoașteți PHP foarte bine și doriți să utilizați unele facilități avansate ale PHP în aplicații de partea clientului, puteți să utilizați PHP-GTK pentru a scrie asemenea aplicații. De asemenea aveți posibilitatea să scrieți în acest mod aplicații ce vor rula pe mai multe platforme. PHP-GTK este o extensie a PHP, care nu este disponibilă în distributivul de bază

PHP poate fi utilizat pe toate sistemele de operare majore, inclusiv Linux, multe variante Unix (inclusiv HP-UX, Solaris și OpenBSD), Microsoft Windows, Mac OS X, RISC OS și probabil altele. PHP de asemenea susține majoritatea server-elor web existente în prezent. Acestea includ Apache, IIS, și multe altele. De asemenea se includ și serverele ce pot utiliza binarul PHP FastCGI, cum ar fi lighttpd și nginx. PHP funcționează ca modul sau ca procesor CGI. Deci cu PHP avem libertatea alegerii sistemului de operare și a serverului web. Ba chiar mai mult, avem posibilitatea să utilizam programarea procedurală sau programarea orientată pe obiecte (POO), sau o combinație a acestora. Cu PHP nu suntem limitati doar la afișarea HTML. Posibilitățile PHP permit de a afișa imagini, fișiere PDF și chiar filme Flash (utilizând libswf și Ming) generate "din zbor". Puteți de asemenea cu ușurință să afișați orice text, cum ar fi XHTML sau alt fișier XML. PHP poate genera automat aceste fișiere și le poate salva în sistemul de fișiere, în loc să le afișeze, formând astfel un sistem de cache al conținutului dinamic de partea server-ului. Una dintre cele mai puternice și semnificative facilități ale PHP este susținerea unui larg domeniu de baze de date. Scrierea unei pagini web ce accesează o bază de date este incredibl de simplă utilizând una din extensiile de lucru cu baze de date (de ex. pentru mysql), sau utilizând un nivel de abstractizare precum PDO, sau conectarea la orice bază de date ce susține standardul "Open Database Connection" cu ajutorul extensiei ODBC. Alte baze de date pot utiliza cURL sau socket-uri, cum ar fi CouchDB. PHP de asemenea poate să "converseze" cu alte servicii utilizând protocoale cum ar fi LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (pe Windows) și multe altele. Putem de asemenea să deschidem socket-uri de rețea "crude" și să interacționam utilizând orice alt protocol. PHP susține WDDX – schimbul de date complexe între aproape toate limbajele de programare web. Vorbind despre interconectare, PHP susține instanțierea obiectelor Java și utilizarea lor transparentă ca obiecte PHP. “PHP posedă facilități de procesare a textului foarte utile, care includ expresii regulare compatibile cu Perl (PCRE) și multe extensii și instrumente pentru accesarea și interpretarea documentelor XML. PHP standardizează toate extensiile XML pe baza solidă a bibliotecii libxml2 și extinde setul de facilități adăugând susținerea SimpleXML, XMLReader și XMLWriter. „

https://php.net/manual/ro/intro-whatcando.php

http://www.hfdesign.ro/ce-poate-face-php/

http://masters.wikiforum.ro/t11-ce-poate-face-php

http://cordus.blogspot.ro/2010/06/ce-poate-face-php.html

2.2.3 Baza de date

“EVOLUȚIA ȘI FACILITĂȚILE SISTEMULUI ORACLE

Oracle este un sistem de gestiune a bazelor de date complet relațional, extins, cu facilități din tehnologia orientată obiect (OO). Sistemul Oracle este realizat de firma Oracle Corporation care a fost înființată în anul 1977 în SUA – California și acum este cel mai mare furnizor de software de gestiunea datelor. Acesta este operațional pe toată gama de calculatoare (micro, mini, mainframe) sub diverse sisteme de operare.

Prima versiune de SGBD Oracle a fost realizată la sfârșitul anilor '70 respectând teoria relațională. În cadrul sistemului a fost implementat de la început limbajul relațional SQL pe care l-a dezvoltat ulterior față de versiunea standard rezultând SQL*Plus. Începând cu versiunea 5.0 SGBD Oracle are următoarele facilități suplimentare: funcționează în arhitectura client/server; are limbaj procedural propriu PL/SQL; are precompilatoare ca interfață cu limbajele universale. În iunie 1997 s-a lansat SGBD Oracle versiunea 8.0,inclusiv în România, care a marcat o nouă generație de baze de date Oracle deoarece inițiază trecerea de la arhitectura client/server la arhitectura NC (Network Computing), are o mare deschidere, are optimizări performante și pune accent mai mare pe analiză(modelare-funcționalitate) față de programare(codificare). În noiembrie 1998 s-a lansat SGBD Oracle 8i ca sistem de baze de date pe Internet. Această versiune are următoarele caracteristici: •Este reproiectat arhitectural în mod fundamental și se încadrează în tendința de trecere de la arhitectura client/server la arhitectura NC; •Permite dezvoltarea unei baze de date de orice dimensiune, în mod centralizat sau distribuit; •Are facilități de salvare/restaurare automate și inteligente; •Permite partiționarea integrală pentru tabele și indecși; •Are mesagerie integrală, prin comunicarea între aplicații și procesare offline (chiar dacă aplicațiile nu sunt conectate); •Prelucrarea paralelă pentru: replicare, cereri de regăsire,actualizare; •Oferă facilități din tehnologia OO, prin care se permite definirea și utilizarea de obiecte mari și complexe; •Optimizează cererile de regăsire prin reutilizarea comenzilor SQL identice lansate de utilizatori diferiți și prin realiizarea unui plan de execuție a instrucțiunilor SQL; •Are un grad de securitate sporitprin: server de criptare, control trafic rețea, niveluri de parolare etc.; •Permite lucrul cu depozite de date (Data Warehouse) care conțin date multidimensionale (cu tehnologia OLAP); •Conține foarte multe produse ceea ce-l face să fie o platformă pentru baze de date:servere(Oracle 8, Application,Security, Internet Commerce etc),instrumente(Designer, Developer,Express, WebDB etc),aplicații (Financials, Projects, MarketManager, Manufacturing etc); •Este primul SGBD pentru Internet cu server Java inclus; •Reduce drastic costurilor pentru realizarea unei aplicații(de cca 10 ori față de versiunea anterioară); •Este o platformă multiplă permițând lucrul pe orice calculator, orice sistem de operare, orice aplicație, orice utilizator; •Are instrumente diverse pentru dezvoltarea aplicațiilor: bazate pe modelare (Designer, Developer, Application Server), bazate pe componente (Java), bazate pe HTML (browsere, editoare Web) și XML, prin programare: proceduri stocate (PL/SQL,Java), obiecte standard, obiecte ODBC, obiecte JDBC, fraze SQL etc., tip internet (WebDB); •Oferă servicii multiple de Internet (Web, E_mail, e_bussines,etc) integrate cu servicii Intranet.”

http://www.cursuricibernetica.info/anul-2-semestrul-1/baza-de-date/facilitatiile-si-arhitectura-sistemului-oracle/

http://biblioteca.regielive.ro/disertatii/limbaje-de-programare/evidenta-elevilor-din-ciclul-inferior-327996.html aceeasi de 3 ori

http://www.arta-web.ro/articole/facilitatile-si-arhitectura-sistemului-oracle.php

O bază de date relațională stochează datele în tabele, iar fiecare tabel stochează în coloane informații despre un anumit tip de element. Pentru a se putea face referire, mai usor, la un anumit rând al tabelului, se obișnuiește ca fiecare tabel să contină o coloană care identifica în mod unic fiecare rând. Aceasta coloană se numește "cheia primară" a tabelului. Aplicația software care găzduiește o bază de date se numește "sistem de gestiune a bazelor de date" (SGBD). Există multe sisteme de gestiune a bazelor de date, printre cele mai populare asemenea sisteme se numără: DB2 , Interbase , MySQL , Oracle , Postgresql , SQL Server , Sybase . Pentru a utiliza o bază de date MySQL, este nevoie de o conexiune la serverul de baze de date. Această conexiune va fi utilizată ca punct de access pentru comenzi mysql.Pentru conectarea la un server MySQL, se utilizează functia mysql_connect(), a cărei sintaxă este următoarea:

mysql_connect('localhost', DB_USER, DB_PASS);

Unde "nume_gazda" este numele gazdei, serverul pe care rulează serviciul MySQL, "nume_utilizator" este numele utilizatorului care se conectează la serverul MySQL, iar "parola" este parola MySQL asociata utilizatorului. Pentru terminarea unei conexiuni la serverul MySQL se folosește instrucțiunea:

mysql_close();

Această funcție închide conexiunea curentă. Funcția returnează TRUE în caz de reusită; în caz contrar, returnează FALSE. În general, nu este necesară invocarea funcției mysql_close(), deoarece PHP închide automat conexiunile deschise cu bazele de date atunci când un script își încheie execuția. Biblioteca MySQL din PHP furnizează două funcții de verificare a erorilor, și anume mysql_errno() și mysql_error(). Fiecare funcție returnează un rezultat care reflectă eroarea, daca aceasta exista. Nici una din cele doua funcții nu necesită argumente. Funcția mysql_errno() returnează un cod numeric de eroare, în timp ce funcția mysql_error() returnează un șir care descrie eroarea. Daca nu s-a produs nici o eroare, codul numeric al erorii este zero și descrierea are ca valoare un șir vid. Informațiile de eroare sunt disponibile numai dacă este activă o conexiune cu serverul MySQL. Prin urmare, întai trebuie să se reusească conectarea la MySQL. O funcție importantă în lucrul cu bazele de date este mysql_query(), care are următoarea forma:

mysql_query("interogare") sau mysql_query("interogare", "id_con")

– "interogare" este un șir ce contine comenzile SQL care urmeaza a fi executate (in PHP, comenzile SQL nu trebuie să se încheie cu un caracter punct și virgulă).

– "id_con" este identificatorul de conectare returnat de funcția mysql_connect(), dacă acesta este omis se folosește ultima legătură deschisă cu aceasta funcție. Funcția mysql_query() returnează TRUE dacă serverul a reușit să execute interogarea; în caz contrar, returnează FALSE. Object / Relational Mapping (ORM) este o tehnică de programare ce face posibilă accesarea și manipularea obiectelor fără ca programatorii să fie interesați de sursa de date de unde provin aceste obiecte. Această tehnică a apărut din nevoia de a depăși diferențele de paradigmă dintre modelul orientat pe obiecte (susținut de limbajele de programare de nivel înalt actuale) și modelul relațional (utilizat de cele mai populare sisteme de gestiune a bazelor de date). Un framework ORM complet include următoarele funcționalități: • un API pentru operațiile CRUD (create, read, update, delete) aferente claselor persistente; • un limbaj pentru specificarea interogărilor adresând clasele persistente și atributele acestora; • un mod care sa faciliteze definirea metadata pentru mapările dintre obiect și tabela; • o abordare consistentă a tranzacțiilor, a metodelor de stocare a datelor („caching”) și a asocierilor dintre clase; • tehnici de optimizare în funcție de natura aplicației.

OpenCart include un modul puternic de ORM (Object Relational Mapping) care folosește un tipar de inregistrări activ și o auto observare a bazei de date pentru a determina informația dintr-o coloana. ORM este integrat cu librăria de Validare.

În exemplul următor funcția înregistrează un nou user dacă datele introduse sunt corecte și asignează un rol.

protected function _register($redirect = true)

{

try

{

$old_session = session_id();

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

$validation = Validation::factory($this->request->post())

->rule('first_name', 'not_empty')

->rule('last_name', 'not_empty')

->rule('address', 'not_empty')

->rule('city', 'not_empty')

->rule('region', 'not_empty')

->rule('phone', 'not_empty')

->rule('pin', 'not_empty')

->rule('postal_code', 'not_empty');

if (!$validation->check())

{

$errors = $validation->errors('user');

throw new ORM_Validation_Exception('register', $validation);

}

// Create the user using form values

$user = ORM::factory('user')->create_user($_POST, array(

'username',

'password',

'email',

'first_name',

'last_name',

'address',

'city',

'region',

'phone' ,

'pin',

));

// Grant user login role

$user->add('roles', ORM::factory('role', array('name' => 'login')));

$user->add('roles', ORM::factory('role', array('name' => 'client')));

$user->instance_id = Session::instance()->get("auth_instance");

$user->save();

// Reset values so form is not sticky

$_POST = array();

// Set success message

//$message = "Utilizatorul {$user->email} a fost creat cu succes. Te poti loga folosind formularul Sign-in! din dreapta.";

$user = Auth::instance()->login(

$this->request->post('email'),

$this->request->post('password')

);

$this->_change_cart_owner($old_session);

if ($redirect == true)

{

$ref = $this->request->post('ref');

if (!empty($ref))

{

Request::current()->redirect($ref);

} else {

Request::current()->redirect('my-account');

}

}

return true;

} catch (ORM_Validation_Exception $e) {

// Set errors using custom messages

$errors = $e->errors('models');

return $errors;

}

}

ORM permite manipulare și controlarea informațiilor dintr-o bază de date ca și cum ar fi un obiect PHP. Odata ce au fost definite relațiile ORM permite retragerea datelor din baza de date, folosirea lor în orice mod și apoi salvarea lor înapoi în baza de date fără a se folosi SQL. Prin crearea relațiilor între modele care urmează convențiile în locul configurațiilor, majoritatea repetițiilor de query-uri pentru creare, updatare și ștergere de informații pot fi reduse sau chiar absente în totalitate. Pentru a putea fi folosit modulul ORM trebuie doar ințializat precum în exemplul următor:

OpenCart::modules(array(

…

'database' => MODPATH.'database',

'orm' => MODPATH.'orm',

…

));

2.2.4 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. JavaScript a fost dezvoltat de Netscape Corporetion pentru a fi utilizat in browserul Netscape Navigator. Scripturile Javascript sunt introduse în pagina HTML și sunt interpretate și executate de browser. Limbajul JavaScript servește la: • Generarea paginilor Web pesonalizate și modificarea dimanică a prezentării lor • Validarea conținutului formularului • Comunicarea cu applet-urile Java • Crearea animațiilor personalizate • Afișare unor mesaje care defilează în bara de stare a navigatorului • Crearea unor butoane animate • Executarea funcțiilor clasice ale unui limbaj de programare Din motive de securitate JavaScript nu poate: • Citi, scrie, crea și șterge fișiere de pe hard disk • Executa operații în rețea • Crea aplicații autonome Un exemplu de funcție javascript folosită în cadrul aplicației pentru a face update-ul Coșului de cumpărături:

function updateCartTotal(total)

{

$("#cart_nav .cart_li span").html("$" + total);

}

$(document).ready(function () {

$(".cart_product a.close, .cart_cont a.close").click(function () {

var product_id = $(this).attr('rel');

var elem = $(this);

$.post("/cart/remove/" + product_id,

{}, function (data) {

if (data.success == true)

{

elem.parent().hide("fast").remove();

updateCartTotal(data.total);

}

},

'json');

});

});

2.2.5 HTML

HTML, sau HyperText Markup Language, este limbajul de marcare ce stă la baza creării oricărei pagini web. “HTML nu este un limbaj de programare.HTML este un limbaj descriptiv,prin care sunt descrise elementele structurale ale paginii de Web;titlurile,listele,tabelele,paragrafele,legaturile cu alte pagini,precum și aspectul pe care il are pagina din punct de vedere graphic”.În fond,HTML este modul in care îi comunicăm browserului ce elemente dorim să introducem în pagina Web și care este aspectul acestora.Paginile HTML sunt formate din etichete (tags) și au, de regulă, extensia .html sau .htm. Marea majoritate a expresiilor HTML sunt de forma <etichetă> conținut </etichetă>. Browserul interpretează aceste etichete afișând rezultatul pe ecran. Toate paginile HTML au urmatoarea structura:

• încep și se termină cu etichetele <html> </ html >

• etichetele <head> </head> – în interiorul cărora se găsesc informațiile legate de titlu <title> titlul paginii care apare in bara de browser </tilte> și informatii referitoare la headerele HTTP trimise către browser

• <body> </body> – în interiorul cărora se găsește conținutul paginii.

Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta deoarece în combinație cu proprietăți CSS poate crea efecte grafice deosebite, iar în interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare, marcatori, linii sau alte DIV-uri. Cadrul în care acestea sunt adăugate poate avea propriul fundal (background), lungime, înalțime și margini cu diferite linii. • Div-urile reprezintă o secțiune dintr-un document HTML ce permite organizarea blocurilor de informație cu scopul de a fi formatate ulterior cu limbajul CSS. • Un exemplu de cod :

<form class="contact" method="post">

<h2>Contact Rapid</h2>

<div class="name">

<strong>Nume:</strong>^*<br>

<input type="text" name="name" value="">

</div><!– .name –>

<div class="email">

<strong>Adresa de email:</strong>^*<br>

<input type="email" name="email" value="">

</div><!– .email –>

<div class="phone">

<strong>Telefon:</strong><br>

<input type="text" name="phone" value="">

</div><!– .phone –>

<div class="comment">

<strong>Mesaj:</strong>^*<br>

<textarea name="comment"></textarea>

</div><!– .comment –>

<div class="submit">

<div class="field">^*<span>Required Field</span></div>

<input type="submit" value="Submit">

</div><!– .submit –>

</form><!– .contact –>

2.2.6 CSS

Practic, o pagină CSS (Cascading Style Sheets) sau Foile de stiluri este formată din selectori și blocuri declarative. Selectorii sunt folosiți pentru a identifica elementele HTML ce vor primi stilul definit într-un bloc declarativ.Există trei tipuri principale de obiecte CSS: selector, clasă și identificator. Selectorul HTML se folosește pentru a redefini modul de afișare a conținutului etichetei HTML.Un selector HTML reprezintă partea etichetei HTML care indică navigatorului tipul de etichetă. Definirea unui selector HTML folosind CSS are ca rezultat redefinirea etichetei HTML. Selectorul și eticheta deși par identice, totuși nu sunt. Clasa este un obiect care poate fi aplicat oricărei etichete HTML. O clasa trebuie creată în interiorul etichetei HTML înainte de a fi definită intr-un cod CSS. Crearea clasei în interiorul etichetei se face simplu, prin specificarea cuvantului class și numele clasei. Numele aceleași clase poate fi atribuit mai multor etichete HTML din aceeasi pagină, și toate vor prelua același stil css.

Exemplu: <h1 class="nume_clasa"> Text </h1>

Obiectele de tip identificator (ID) sunt asemănătoare cu clasele. Pot fi aplicate oricarei etichete HTML, dar spre deosebire de clase, numele unui identificator trebuie atribuit numai unei singure etichete HTML dintr-o pagina, pentru alta etichetă se adaugă un ID cu nume diferit. Ca și clasa, identificatoru trebuie întâi creat în interiorul etichetei HTML. Modul de creare este simplu, prin specificarea cuvântului id și numele clasei.

Obiectele CSS, indiferent de tipul lor, au în componență următoarele elemente:

• Selectorii – identifică un obiect; pot fi selectori de etichete HTML, clase sau identificatori. • Proprietățile – identifică o proprietate a obiectului; se referă în special la aspect. • Valorile – sunt atributele unei proprietăți; pot fi cuvinte cheie, valori numerice sau procentuale, tipul valorii depinzând de proprietate. Sintaxa generala a unei reguli CSS este urmatoarea: • selector {proprietate: valoare; }

Proprietățile și valorile constituie definitia regulii (obiectului) CSS. Acestea se regăsesc sub formă de perechi, despărțite de caracterul două puncte ”:”, fiecare pereche se termina cu un caracter punct și virgula ";". Etichetele HTML nu sunt sensibile la diferența între majuscule și litere mici. Dar odată cu apariția limbajului XHTML, acesta face distincție între majuscule și minuscule, astfel că toate etichetele și toti selectorii trebuie scriși cu litere mici. Din acest bloc putem observa că o clasă în CSS este identificată de punctul ce precede numele clasei. De asemenea, un bloc declarativ este delimitat de cele două acolade și este format din mai multe expresii de forma proprietate : valoare ;

Îmbinarea cu HTML se realizeaza in 2 moduri:

• Crearea unui atributul Style se realizează folosind eticheta <STYLE> </STYLE>.Eticheta <STYLE> este o eticheta container,deci este obigatorie prezenta etichetei de închidere, </STYLE>.Eticheta de stil este plasata în antetul documentului adica in secțiunea <HEAD>.

<HTML>

<HEAD>

<TITLE>stiluri1</TITLE>

<STILE>

<!—

H1 {color: #008000; font-weight:bold}

P { font – family:Arial;color: #800080; font-size: 14px }

Normal { font-size : large;color:#FF8000 }

–>

</STYLE>

</HEAD>

• interiorul unui tag html , și ca valoarea folosind definiția de stil <p style="size:14px; border:#3CF ; font:Verdana, Geneva, sans-serif;"> (inline style)

• Folosind tagul <style></style> intre <head></head>.

• Cel mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei <LINK>Folosind un fișier extern care este inclus în fișierul HTML curent. Se folosește tagul <link> în interiorul tagului head; Varianta aceasta este recomandată fața de celelalte variante, pentru că în acest caz stilul este complet separat de continut și se poate modifica mare parte din aspectul siteului doar prin editarea fișierului css.

<HTML>

<HEAD>

i3</TITLE>

<LINK rel = ”stylesheet” href=”stiluri2.css”>

</HEAD>

• Importarea fișierului css de pe un site extern.

http://www.europacs.ro/forum/viewtopic.php?f=141&t=14319&view=next

2.2.7 Media queries

Redimensionarea site-ului se face prin intermediul procedeului de “Media Queries” care ne permite să selectăm ce stiluri CSS se aplică în funcție de dimensiunea ecranului pe care sunt afișate spre exemplu se poate defini un bloc de instrucțiuni care se aplică atunci când dimensiunea ecranului este de 800 de pixeli.Valorile utile includ înălțime nimimă și maximă, device-aspect-ratio și multe altele.

Un exemplu de meda query folosit în design-ul paginii My Bike este următorul :

@media (max-width: 767px) {

.hidden-desktop {

display: inherit !important;

}

.visible-desktop {

display: none !important;

}

.visible-phone {

display: inherit !important;

}

.hidden-phone {

display: none !important;

3 Soluția propusă

Pentru magazinul My Byke am optat pentru OpenCart ,un framework Model View Controller orientat obiect pentru limbajul de programare PHP.OpenCart este open source deci contribuie constant o comunitate foarte mare la îmbunătățirea acestuia pe măsură ce apar noi cerințe sau tehnologii pe piață. Pentru a avea un CMS simplu și flexibil care se poate extinde ușor și care are impolicit o interfață grafică destinată oamenilor care știu puțin spre deloc despre programare este nevoie de:

• Arhitectură

Baza conține fișiere și module care permit sistemului să ruleze.Modulele trebuie să aibă posibilitatea să isi inregistreze rute cu structură de genul: <componente statice><componente dinamice> unde compoentele statice vor arăta ca modelul blog/articole iar componentele dinamice vor arăta ca modelul (/<actiune>(/<id>)) • Toate componentele trebuiesc stocate in baza de date ca rute , flosind librăria MPTT pentru a forma arbori. În acest fel utilizatorul poate edita rute din panoul de administrare dedicat și poate decide unde se va situa „blogul” din exemplul anterior.

• Toate cererile sun împărțite după rute pentru a vedea ce pagină sau ce modul a fost înregistrat cu ruta corectă. Acest lucru este făcut mult mai usor cu modulul KO3 pentru rute.

• Toate modulele pot avea subdirectoare. În principiu un modul este o altă aplicație opencart separată, și toate modulele pot defini dependențe prin fișierul de configurare denumit dupa numele directorului în care se află.Definind dependențele vor fi relevante doar pentru modulele care sunt moștenite din același director de bază, pentru a evita conflicte.Toate aceste for fi controlate de către loader.

• Temele sunt module simple cu interfețe de vizualizre ceea ce inseamnă că dacă rulăm comanda View::factory('template'), primim fișierul template al temei respective.

• Partea de administrare va fi alcătuită din rute predefinite dar bineînțeles și acestea sunt complet configurabile.

La apelarea unei clase care nu a fost încărcată încă(ex: `Session_Cookie`) OpenCard va căuta în sistemul de fișiere folosind funcția [OpenCard::find_file] un fișier cu numele `classes/session/cookie.php`.

Fără a ține cont de aceste cerințe nu vor fi găsite clasele apelate.

Pentru orice fel de configurare necesară pentru un modul sau clasă se folosesc fișiere de configurare.Acestea sunt fișiere PHP simple, stocate in directorul „config”, care returnează un array asociativ. Fișierele de configurare sunt puțin diferite față de celelalte fișiere în sensul că ele nu se supraîncarcă ci se fuzionează între ele. Asta înseamnă că toate fișierele din aceeași cale de acces sunt combinate pentru a produce configurarea finală. Rezultatul final este posibilitatea de a supraîncărca setări individuale fără a fi nevoie să se duplice un fișier întreg.

Forma de design este simplistă pentru ușurința de navigare.

Fig.2

Butonul Contul meu oferă posibilitatea editării informațiilor personale ale utilizatorului. Butonul Istoric Comenzi arată toate comenzile efectuate de utilizatorul curent precum și starea în care se află comenzile respective.

Pagina de autentificare (Figura 3) oferă posibilitatea user-ilor să se autentifice pe contul lor sau să își creeze un nou cont cu adresa de e-mail.

Fig.3.

Pagina de contact (Figura 4) oferă informații generale despre firmă. În plus are un formular de contact prin care se poate comunica cu ușurință .

Fig.4.

Pagina de produse (Figura 5) conține informații privind produsele oferite, în funcție de categoria selectată. Aici se poate schimba categoria dorită, sau se poate face o filtrare a datelor în funcție de producător sau de preț. In plus se poate selecta un produs ca fiind favorit sau se poate adăuga direct în coșul de cumpărături.

Fig.5.

În urma selectării unui produs accesăm o pagină care conține mai multe detalii (Figura 6). Din acest punct putem în continuare alege adăugare produsului în coșul de cumpărături sau la favorite. In plus clientul își poate spune părerea despre acest produs lasând un comentariu în tabul “Opinii”. Pentru social media Facebook, Twitter, Printeaza si Email prin care se poate distribui site-ul în rândul prietenilor clientului.

Fig.6.

În urma apăsării butonului “Adaugă în coș” se accesează pagina ce afișează coșul clientului cu produsele ce dorește să le achiziționeze (Figura 7). Infomațiile statice sunt prețul unitar și subtotalul. Cantitatea poate fi schimbată în funcție de dorința clientului. Din acest punct, clientul poate continua cumpărăturile și poate reveni la coșul de produse, sau poate finaliza comanda.

Fig.7.

În urma finalizării comenzii si confirmării acesteia, se ajunge la pagina informativă (Figura.8)

Fig.8.

Clientul va fi contactat de către un operator. În continuare el poate vedea istoricul comenzilor sale, produsele alese favorite, etc.

Pagina Wish List oferă clientului lista cu produsele selectate de acesta ca fiind favorite.

Administrarea site-ului se realizează prin intermediul unei aplicații create pentru a putea face modificări asupra oricăror componente importante.

Prin intermediul administratorului se pot adauga, șterge sau edita produse, descrieri din cadrul site-ului, etc (Figura 9).

Fig.9.

Pagina Produsele permite adăugarea de produse, ștergerea de produse, editarea produselor, copierea lor și căutarea în lista de produse dupa anumite filtre.De asemenea se poate bifa optiunea de recomandat și astfel produsele cu această opțiune apar pe pagina principală a magazinului. (Figura 10).

Fig.10.

4.Concluzii

În concluzie putem spune despre aplicația de față că a atins standardele propuse și își îndeplinește scopul final, și anume de a promova și de a facilita accesul clienților la serviciile ofertite de firma My Bike. Clienții pot naviga cu usurință în site, pot face cumpărături prin intermediul său, pot beneficia de reduceri, își pot crea o listă de oferte favorite, atât de pe un dispozitiv mobil cât și de pe unul fix.

Spre deosebire de site-urile cu un trafic mare de conținut și un număr mare de accesări, pentru un magazin virtual funcționează mult mai bine metoda Responsive WebDesign decât opțiunea de creare a unei a doua pagini dedicată special platformelor mobile.

Desigur, întotdeauna există loc de îmbunatățiri, iar site-ul de fata nu reprezintă o exceptie. În situația în care acesta se dovedește a fi un succes se pot dezvolta o serie de înbunătățiri cum ar fi: extinderea produselor și serviciilor oferite de către firmă.

5. Bibliografie

HyperText Markup Language – http://ro.wikipedia.org/wiki/HTML

2.Curs HTML – http://www.marplo.net/html/

3. Curs CSS – http://www.marplo.net/html/

4.Curs PHP – http://en.wikipedia.org/wiki/Php

5. Curs Php-mysql – http://www.marplo.net/php-mysql/

6. Curs JavaScript – http://www.marplo.net/javascript/

7. Prof.univ.dr. Ion LUNGU – “ Baze de date oracle limbajul SQL” – Cap 2.1. Evolutia si facilitatile sistemului Oracle.

8. Steve Krug – Don’t make me think – second edition

9. Prof.Eugenia Lucia Stamate-Provocarea Internet-Limbaj HTML si elemente de WEB DESING