Magazin Virtual de Vânzare Muzică în Format Digital

Cuprins

1. Introducere 4

2. Programe folosite pentru dezvoltarea aplicației

2.1. XAMPP 5

2.2. Notepad++ 6

2.3. Paint.net 6

3. Tehnologii folosite

3.1. PHP 5.6 7

3.2. CSS 3 9

3.3. HTML 5 11

3.4. JavaScript 12

3.5. MySQL 13

3.6. jQuery 15

4. Prezentarea aplicației

4.1. Baza de date 16

4.2. Structura aplicației 22

4.3. Modulul de facturare 23

5. Descrierea front-end-ului 25

5.1. Controller-ul Pages și prima pagina 25

5.2 Pagina categoriilor 26

5.3 Pagina unui album și al unui single 28

5.4 Pagina de contact 30

5.5 Realizarea comenzilor și coșul de cumpărături 31

5.6 Contul utilizatorului 34

5.7 Istoric comenzi 35

6. Descrierea back-end-ului 36

6.1 Controller-ul Users și autentificarea 36

6.2 Administrarea utilizatorilor 37

6.3 Administrarea conținutului 39

6.4 Administrarea Email-urilor 42

6.5 Administrarea produselor 43

6.6 Administrarea comenzilor 48

7. Concluzii 49

8. Bibliografie 50

I.Introducere

Lucrarea de diplomă descrie conceptul și modul de realizare al unui site de streaming și download de muzică, precum și tehnologiile folosite, programele ajutătoare, cât și tehnicile de programare utilizate pentru realizarea acestui site.

Site-ul implementat este destinat utilizării de către publicul larg și este realizat în așa fel încât să conțină toate metodele moderne de gestiune a comenzilor, conturilor și vizualizării produselor de către utilizatori. Experiența de utilizare a fost concepută să fie cât mai ușor de înțeles, tot design-ul ține cont de acest lucru, pentru a acorda cât mai ușor acces la multitudinea de facilități pe care acest site le oferă.

În procesul de realizare al site-ului am utilizat tehnologii moderne atent alese ca să ofere flexibilitate și siguranță, astfel încât să fie destul de puternice, odată cu dezvoltarea site-ul, să poată servi mii de utilizatori. Acestea se încadrează în categoria de software open source.

PHP-ul este un limbaj de programare, foarte flexibil și extrem de util pentru web, dar îi lipsesc anumite trăsături care fac din alte limbaje de programare un adevărat succes. Nu este structurat foarte bine și nu este strict când vine vorba de sintaxă, însă cu ajutorul framework-ului CakePHP, aproape toate punctele negative sunt transformate în trăsături pozitive.

Acest cadru PHP este extrem de puternic în conjuncție cu baza de date relațională MySQL, răspândită la nivel global și foarte utilizată.

Interfața este contruită cu ajutorul HTML 5 și CSS 3.0, aceste 2 limbaje de marcare stau la baza a tot ce înseamnă world wide web (www) și sunt intercalate în site pentru a crea o experiență plăcută pentru utilizator.

Site-ul mai conține și elemente de JavaScript care ajută la dinamica acestuia, realizând o gestionare mai eficientă a tuturor elementelor de interfață.

Programe folosite pentru dezvoltarea aplicației

2.1. XAMPP

XAMPP este un acronim:

X – cross-platform – programul se poate folosi pe diverse platforme de operare

A – Apache – cel mai răspândit software pentru servere Web

M – MySQL – cel mai răspândit sistem de gestiune a bazelor de date de tip Open-Source

P – PHP – unul dintre cele mai folosite limbaje de programare pentru dezvoltarea paginilor web.

P – Perl – este o familie de limbaje de programare dinamice și de uz general, folosite la dezvoltarea paginilor web.[1]

Fig. 2.1 – Panelul de control XAMPP ȋți conferă posibilitatea de

a porni și opri serverul Apache și baza de date MySQL [2]

XAMPP este un pachet complex de servicii complete și gratuite pentru servere locale care datorită sistemului 'cross platform' – poate fi folosit pe orice sistem de operare (Windows, MAC OS, Linux etc.). XAMPP se instalează ușor și este gata de rulare ȋn doar câteva minute. Conținutul, mărimea și portabilitatea lui îl fac unul dintre cele mai bune unelte pentru dezvoltarea paginilor web. [2]

XAMPP a ajuns la versiunea 5.6.8 care este de altfel și versiunea PHP-ului folosit la compilarea pachetului de servicii. Acest program a fost folosit pentru a crea un mediu local de dezvoltare pentru a putea afisa site-ul pe un calculator local și a evita nevoia de cumparare de hosting in timpul dezvoltarii.

2.2. Notepad ++

Este un editor de cod sursă care ruleaza sub Windows. Notepad++ este înlocuitorul Notepad-ului, având în plus față de acesta câteva pachete pentru alte limbi. Dezvoltat în C++ folosește Win 32 API (interfața destinată programării aplicațiilor pentru Microsoft Windows – atât pentru 32 biți cât și pentru 64 biți), astfel are o viteză de execuție mai mare a codului și un consum redus de resurse. Optimizează procedurile de implementare a codului fără să piardă ușurința în utilizare.[3]

Facilități remarcabile sunt: colorare sintactică pentru 48 de limbaje de programare, tipărirea color a codului sursă (WYSIWYG); autocompletare = deducerea și întregirea automată a cuvântului de cod din biblioteca utilizată, interfață cu mai multe fișiere; suport pentru expresii regulate, suport pentru macroinstrucțiuni.[3]

Cu acest program s-a realizat editarea codului sursă al site-ul, o facilitate pe care acesta o are este navigatorul de tip arbore care face ca navigarea în structura de fișiere a aplicației să fie foarte ușor de folosit.

2.3. Paint.net

Paint.net este o aplicație gratuită de manipulare a imaginilor și fotografiilor. Dezvoltată pentru computere cu Microsoft Windows ca sistem de operare, suportă efecte speciale, layere și multe alte unelte. A fost conceput ca înlocuitorul gratuit al MS Paint, dar s-a dezvoltat într-o aplicație simplă, dar totuși puternică de editare imagini.[4].

Toate elementele și caracteristicile aplicației au fost proiectate astfel încât utilizatorul să învețe ușor, intuitiv și fără asistență, fiind foarte asemanator cu MS Paint și Adobe Photoshop. Suportă formatele: .PNG, .JPEG, .BMP, .GIF, .TIFF, .TGA, .DDS, dar formatul nativ este .PDN care păstrează efectele și layerele imaginilor prelucrate.

Aplicația Paint.net este prevăzută în totalitate gratuită, cu termeni și condiții de licență generoși. Pentru o dezvoltare continuă a aplicației donațiile sunt binevenite [4]

III. Tehnologii folosite

3.1. PHP 5.6

PHP – în varianta originală este acronim pentru Personal Home Pages, dar a devenit acronim recursiv pentru PHP: Hypertext Preprocessor. A fost dezvoltat inițial de Rasmus Lerdorf, devenind mai apoi o aplicație cu sursă liberă.

Folosit inițial pentru a produce pagini web dinamice, este folosit pe scară largă în dezvoltarea paginilor și aplicațiilor web. Se folosește în principal înglobat în codul HTML, dar începând de la versiunea 4.3.0 se poate folosi și în mod „linie de comandă” (CLI), permițând crearea de aplicații independente. Este unul din cele mai importante limbaje de programare web open-source și 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 site-uri web și pe 1 milion de servere web. Este disponibil sub Licenṭa PHP ṣi Free Software Foundation îl considerã a fi un software liber.[5]

PHP-ul a fost creat pentru a rezolva așa zisa „Problemă Web-ului” prin care înțelegem provocările întâlnite în crearea aplicațiilor web dinamice – server-side.

Fig. 3.1 – Exemplu de pagină web dinamică – tehnica folosită la interpretarea unu script

pentru a reda un răspuns personalizat la logarea unui utilizator (client)[18]

PHP-ul de când a fost creat evoluează să rezolve această problemă critică, și de aceea probabil este ales în cotinuare de majoritatea programatorilor de pagini web. De fapt, PHP-ul este foarte popular în lumea limbajelor de programare mai ales pentru faptul că tot mai mulți programatori crează aplicații care necesită ca această problemă să fie automat rezolvată, astfel PHP-ul se clasează pe locul 7 în clasamentul TIOBE Programming Community Index (fig. 3.2). Spre deosebire de multe alte limbaje de programare, PHP-ul a fost proiectat să facă față provocărilor dezvoltarii paginilor web – atipice, eterogene, tranzitorii sau cu perioadă scurtă de valabilitate.[6]

Fig. 3.2 – Primele zece clasate în clasamentul TIOBE Programming Community Index [7]

TIOBE Programming Community Index este un indicator al popularității limbajelor de programare. Indexul este actualizat lunar și se bazează pe numărul programatorilor din întreaga lume, pe cursuri și pe furnizori. Sunt folosite motoare de căutare precum: Google, Bing, Yahoo!, Wikipedia, Amazon, Youtube și Baidu pentru a calcula și evalua clasamentul. Este important de reținut că indexul nu arată care este cel mai bun limbaj de programare sau limbajul în care au fost scrise cele mai multe linii de cod.

Clasamentul poate fi folosit pentru a vedea dacă abilitățile unui programator sunt actuale sau pentru a se decide strategic în alegerea limbajului de programare, care urmează a fi folosit la dezvoltarea unui sistem software nou.[7]

Versiunea de PHP folosită a fost 5.6.8, din cauză că a fost instalată versiunea de XAMPP 5.6.8, această versiune fiind una dintre cele mai noi versiuni de PHP, lansată doar anul acesta (2015).

Printre cele mai folosite instrucțiuni PHP în site sunt:

Echo – instrucțiune care se folosește la afișare, cu această instrucțiune s-au afișat în paginile de view toate variabilele, string-urile și au fost încărcate totodată și scripturile css și javascript. “echo $page['Page']['name'];”

Array – instrucțiune care definește o matrice, cu proprietăți care reprezintă perechi de chei și valori. A fost folosită în principal la crearea de input-uri HTML. Ex. “echo $this->Form->input('phone', array('label' => array('text' => __('Tel', true)));”

Isset – este o instrucțiune prin care se verifică daca o variabilă există sau nu, s-a folosit în principal în conjuncție cu instrucțiunea If. Ex. „if(isset($_SERVER['REQUEST_URI'])) {”

Empty – instrucțiune prin care se verifică dacă o variabilă este goală sau nu, se pretează cel mai bine la verificarea matricilor. S-a folosit la verificarea unor variabile ca să nu emită erori în paginile de afișare. Ex. „if(empty($page)) {”

Date – se folosește la setarea unor date ca și timp citit de oameni, și nu ca timp unix, formatarea datei arata în felul următor: „$order['Order']['updated'] = date('Y-m-d H:i:s');”

End – selectează ultima valoare dintr-o matrice, și este folosită în site ca metodă de selecție a extensiei unui fișier, în special la upload-ul unui fisier. Ex: „$exp = explode('.', $this->upload_image['name']); $extension = end($exp);”

Strpos – această instrucțiune se folosește la pentru a afla dacă un anumit șir de caractere există într-un alt șir de caractere și ii determină poziția în șir. Este folosită la determinarea poziției utilizatorului în structura aplicației, adică dacă se afla în interfața utilizatorilor sau a administratorilor. Ex: „$pos = strpos($_SERVER['REQUEST_URI'], 'owner');”

Str_replace – se folosește la înlocuirea unui șir predeterminat cu un alt șir de caractere predeterminat. S-a folosit la trimiterea de email-uri dinamice în care se setează o variabilă și este înlocuită cu numele clientului. Ex: „str_replace('$User.email$', data['email'], $email_user['PredefinedEmail']['from']);”

3.2. CSS 3

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.[8]

CSS este utilizat în principal pentru a permite separarea conținutului documentului web de prezentarea acestuia, adică a elementelor: design, culori și fonturi. Această separare ne permite o accesibilitatosește la pentru a afla dacă un anumit șir de caractere există într-un alt șir de caractere și ii determină poziția în șir. Este folosită la determinarea poziției utilizatorului în structura aplicației, adică dacă se afla în interfața utilizatorilor sau a administratorilor. Ex: „$pos = strpos($_SERVER['REQUEST_URI'], 'owner');”

Str_replace – se folosește la înlocuirea unui șir predeterminat cu un alt șir de caractere predeterminat. S-a folosit la trimiterea de email-uri dinamice în care se setează o variabilă și este înlocuită cu numele clientului. Ex: „str_replace('$User.email$', data['email'], $email_user['PredefinedEmail']['from']);”

3.2. CSS 3

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atașa elementelor HTML prin intermediul unor fișiere externe sau în cadrul documentului, prin elementul <style> și/sau atributul style. CSS se poate utiliza și pentru formatarea elementelor XHTML, XML și SVGL.[8]

CSS este utilizat în principal pentru a permite separarea conținutului documentului web de prezentarea acestuia, adică a elementelor: design, culori și fonturi. Această separare ne permite o accesibilitate crescută a conținutului, cât și o flexibilitate și un control mai bun asupra caracteristicilor prezentării documentului, ajută la împărțirea unui singur design pe mai multe pagini dar și reduce complexitatea și repetiția conținutului structural a paginii.

CSS-ul specifică o schemă de ierarhie sau priorități pentru a determina ce stil este aplicat atunci când mai multe stiluri diferite țintesc spre un singur element structural, ceea ce reprezintă așa numita „cascadă”.[8]

Beneficiile sintaxei CSS sunt:

formatarea este introdusă într-un singur loc pentru tot documentul

editarea rapidă a etichetelor

datorită introducerii într-un singur loc a etichetelor se obține o micșorare a codului paginii, implicit încărcarea mai rapidă a acesteia

Sintaxa CSS este structurată pe trei nivele:

nivelul 1 fiind proprietățile etichetelor din documentul HTML, tip inline

nivelul 2 este informația introdusă în blocul HEAD, tip embedded

nivelul 3 este reprezentat de comenzile aflate în pagini separate, tip externe [8]

Printre elementele cel mai des folosite in site se numară:

color – specifică culoarea unui element, s-a folosit la desemnarea culori unui heading: h1 {color:#777777;}

font-family – specifică fontul care este setat pentru un anumit element, din start acest font a fost setat la tot body-ul: body {font-family: Sans-Serif;}

background-color – specifică culoarea de fundal al unui element, fie el „div” sau „a”: background-color: #B289C4;

margin – se folosește la distanțarea unor elemente de altele respectând curgerea documentului: margin:10px 0 0 -3px;

padding – se folosește în interiorul unui element pentru a marca o suprafața tampon, de exemple între text și marginea elementului, s-a folosit la poziționare textului în orice element: margin:10px 0 0 -3px;

border – este o linie de culori și formate specificate în declarația ei care înconjoară elementele definite, sa folosit la marcarea unor „div-uri”: border-right:2px solid #fff;

float – un element căruia i se aplică float este scos din curgerea normală a documentului și este pozitionat în dreapta sau în stânga depinzând de ce „float” este aplicat: float:left;

clear – proprietarea de clear, restabilește curgerea normală a documentului de la elementul de float în josul pagini: clear:left;

text-decoration – s-a folosit la decorarea link-urilor sau la eliminarea decorării lor, adică a liniei de sub textul link-ului: a { text-decoration:none;}

3.3. HTML 5

Paginile Web sunt create folosind HyperText Markup Language (HTML); acesta este limbajul folosit pentru a crea documente pentru World Wide Web. HTML-ul folosește un set de instrucțiuni speciale numite tag-uri sau marcaje pentru a defini structura și configurația unui document Web și a specifica browser-ului cum să arate pagina.

O pagină Web este un fișier care conține atât text, cât și tag-uri HTML. Tag-urile HTML marchează textul pentru a defini cum este el afișat ca pagină dintr-un document Web. HTML-ul conține sute de tag-uri care sunt folosite pentru formatarea paginilor Web și pentru a crea hiperlegături către alte documente sau către alte pagini de pe Web. De exemplu, tag-ul HTML <strong> și </strong> este folosit pentru a defini text în formatul „bold”, iar <p> și </p> sunt folosite pentru a semnala prezența unui nou paragraf. Un alt tip de tag este cel care nu are închidere, spre exemplu tagul <hr /> se folosește pentru a afișa pe pagină o bară orizontală. [9]

HTML este independent de platformă, ceea ce înseamnă că se pot crea sau „coda” fișiere HTML pe un anumit tip de computer și după aceea se poate folosi orice alt computer pentru a vizualiza acel fișier ca și o pagină de Web; pagina arată exact la fel indiferent de sistemul de operare și calculatorul de pe care se vizualizează acea pagina Web.[9]

HTML5 a fost dezvoltat, cu intenția de a face față acestor provocări noi din industria web și IT. HTML5 este mai flexibil, mai robust și mai avansat decât varianta sa mai veche.[10]

Sintaxele în HTML5 au fost simplificate, declararea elementului DOCTYPE, a devenit un simplu <!DOCTYPE html> în HTML5 pentru a specifica tipul documentului.

Elementele multimedia în HTML5 au suport integrat pentru fișiere multimedia audio/video și nu mai sunt necesare plugin-uri de la furnizori terți cum ar fi Silverlight sau Flash. Accesarea locației geografice a devenit facilă odată cu implementarea HTML5 JavaScript GeoLocation.

Stocarea datelor clientului în HTML5, prin interfața JavaScript datele se stochează într-o bază de date Web SQL.

Comunicarea Client-Server în HTML5 conține Web Sockets, care face posibilă deschiderea unei sesiuni de comunicare interactivă între browse-ul clientului și server.

Mecanismul firelor de execuție(Threading) JavaScript, HTML5 folosește JS Web Worker – folosind interfața programării aplicațiilor (API) Web Worker este un script care rulează separat, neafectând interacțiunea utilizatorului cu interfața browser-ului, adică rulează în alt fir de execuție față de browser.[10]

Tag-ul <video> permite implementarea unui fișier video în pagina web. Formate suportate de elementul <video> sunt: .mp4, .webM, .ogg.

Atributul „src” a tag-ului source se referă la locația fișierului video. Dacă fișierul video nu este găsit se va afișa linia de sub linia elementului „source”. Atributul „control” adaugă fișierului video controale cum ar fi „play”, „pause” și „volume”. Atributele „width” și „height” sunt folosite pentru a defini dimensiunea. Este de preferat ca aceste atribute să fie adăugate pentru ca tabloul în care va fi rulat fișierul video să fie dimensionat, astfel pagina va ști dimensiunea fișierului. Rezultatul codului:[10]

Tag-ul <audio> permite implementarea unui fișier audio în pagina web. Formate suportate de elementul <vaudio> sunt: .mp3, .wav, .ogg. La fel ca tag-ul <video>, tag-ul <audio> poate include atribute, de exemplu „controls” – „play”, „pause” și „volume”. [10]

3.4. JavaScript

JavaScript este un limbaj de programare dinamic. De cele mai multe ori este folosit ca parte a browser-ului web. Implementările acestuia permit interacțiunea cu utilizatorul și controlul paginii, permit primirea și trimiterea de date fără ca activitatea pe pagina să fie afectată și pot modifica conținutul documentelor afișate.

JavaScript este unul dintre cele trei limbaje de programare necesare în programarea paginilor și aplicațiilor web: HTML – definește conținutul paginilor, CSS – specifică cum vor arăta paginile, JavaScript – arată comportamentul paginilor web [12]

Codarea limbajului JavaScript se poate introduce în HTML în oricare din secțiunile <body> sau <head>, prin introducerea între tag-urile <script> și </script>.

Funcțiile și evenimentele limbajului JavaScript. O funcție este executată în momentul în care are loc un eveniment – de exemplu utilizatorul apasă un buton. De asemenea există varianta un fișier extern care să conțină pasajul JavaScript. Acestă metodă este utilă în momentul în care același cod este folosit în diferite pagini web. Un fișier JavaScript are extensia „.js”.

Pentru a folosi un script extern se va introduce numele fișierului cu atributul „src” în tag-ul <script>. Scriptul extern se poate găsi și în tag-ul <head> și în tag-ul <body>, acesta se va comporta ca și cum ar fi localizat exact unde se afla tag-ul <script>: Un fișier extern nu poate conține tag-uri <script>. Avantajele folosirii unui fișier extern JavaScript: separă codul de HTML, HTML-ul și JavaScript sunt mai ușor de citit și întreținut, crește viteza cu care se deschide o pagină dacă se folosesc fișierele externe. [13]

Funcțiile Javascript s-au folosit în special la coșul de cumpărături pentru a-l face mult mai dinamic. Deși Javascriptul stă la baza jQuery-ului, acesta din urma este mult mai ușor de folosit și din acesta cauză s-a folosit mult mai mult jQuery, iar funcțiile folosite sunt descrise în capitolul jQuery din descrierea aplicației.

MySQL

MySQL este un sistem de management pentru baze de date. Poate fi extins de la o simplă listă de cumpărături, la o galerie foto sau chiar o vastă rețea de informații a unei corporații. Pentru a adăuga, accesa și procesa datele stocate în baza de date a unui computer este nevoie de un sistem de management a bazelor de date cum este un Server MySQL. Acesta joacă un rol extrem de important în programare, utilități de sine stătătoare sau ca parte a altor aplicații.[13]

Bazele de date MySQL sunt relaționare. Adică stochează datele în tabele diferite și nu salvează datele într-un singur loc. Structurile unei baze de date sunt organizate în fișiere optimizate după viteză. Modelul logic, cu elemente ca baze de date, tabele, rânduri, coloane oferă flexibilitate programării. Programatorul crează reguli ce vor guverna relaționarea tabelelor din bazele de date, astfel cu o bază de date bine definită, aplicațiile sau paginile web nu vor părea inconsistente sau cu date lipsă. Acronimul SQL din „MySQL” înseamnă Limbaj Structurat de Interogare (în engleză – Structured Query Language), iar „My” vine de la numele fiicei cofondatorului Michael Widenius. [13]

SQL este cel mai comun și popular limbaj standardizat de accesare a bazelor de date. In funcție de limbajul de programare folosit sistemul SQL se poate introduce direct – pentru a genera rapoarte, se poate insera în codul limbajului de programare folosit sau se poate folosi într-un limbaj specific API(interfață de programare a aplicațiilor) care ascunde sintaxa SQL.

MySQL este un software de tip Open Source – adică oricine poate folosi și modifica codul sursă pentru o întrebuințare personalizată. Dacă se dorește o întrebuințare comerciala există și o variantă ce se poate cumpăra. [14]

Serverul bazelor de date MySQL este rapid, sigur, ușor de folosit și adaptabil. Se poate folosi la fel de ușor pe un computer personal sau laptop, rulând alături de alte aplicații, servere web, folosind puține din resurse computerului sau se poate adapta la un server pentru a putea folosi întreaga capacitate a acestuia – procesor și memorie. Însă, pentru a deveni și mai puternic și mai rapid se pot folosi chiar mai multe computere legate în rețea.

Serverul MySQL a fost dezvoltat pentru a procesa baze de date mari, mult mai repede decât soluțiile existente și a fost folosit cu succes în medii cu productivitate crescută de ani buni. Deși este în continuă dezvoltare, Serverul MySQL oferă un set de funcții bogate și ușor de folosit. Conectivitatea, viteza și siguranța fac din MySQL o aplicație extrem de potrivită pentru accesarea bazelor de date de pe Internet.

Serverul MySQL funcționează în sistem client/server sau în sisteme încorporate. În sistemul client/server constă într-un server de baze de date multi-fir SQL, server ce suportă programe ale clienților, librării, elemente administrative și foarte multe aplicații. De asemenea există și sisteme încorporate de tip multi-fir care folosesc baze de date – librării ce se pot atașa la aplicațiile dezvoltate pentru a obține un produs mai mic, mai rapid și de sine stătător.

MySQL-ul este dezvoltat în foarte mare măsură alături de utilizatori, fiind de tip Open Source. Există o mare posibilitate ca aplicațiile preferate de majoritatea utilizatorilor, să suporte baze de date ale unui Server MySQL. [15]

Serverul MySQL a fost instalat prin utilizarea XAMPP, este unul dintre cele mai utilizate sisteme de baze de date relaționale, toată baza de date a fost creată prin utilizarea instrucțiunilor MySQL.

Printre cele mai utilizate sunt:

CREATE TABLE – crearea tabelelor din baza de date, un exemplu foarte bun este următorul: CREATE TABLE Users (id int(11) NOT NULL, goup_id int(11) NOT NULL, active tinyint(1) NOT NULL, …. PRIMARY KEY (id));

INSERT INTO – introducerea informațiilor în tabele create, mai ales în funcțiile de add ale controller-elor: INSERT INTO Users VALUES (1, 2, 1, ‚Silviu’, … ‚ 2015-06-11 00:00:00’);

UPDATE – editarea înregistrărilor din baza de date și este utilizată în funcțiile de edit ale „controller”-elor: UPDATE Users SET

active=0 WHERE id=1;

DELETE – ștergerea informațiilor din baza de date în funcțiile de delete din controller-e: DELETE FROM Users WHERE id=1;

SELECT – cea mai folosită comandă SQL, pe baza unor condiții setate în partea de „WHERE” a interogării se pot selecta exact ce înregistrări se doresc: SELECT * FROM Users;

jQuery

jQuery este o librarie JavaScript care ajută la simplificarea programări JavaScript. Pentru a putea învăța jQuery un programator trebuie să aibă baze de HTML, CSS, JavaScript. Sintaxa jQuery este astfel concepută, încât să simplifice navigarea într-un document, să selecteze și să manipuleze elemente DOM, crează animații și evenimente. DOM este o structură de tip arbore reprezentând toate elementele unei pagini web. De exemplu jQuery se poate folosi pentru a găsi un element cu o proprietate aparte – element cu tagul <h1> – modificând atribuțiile acestuia (culoare, vizibilitate) sau poate face elementul să reacționeze la un eveniment (apăsarea un buton al mouse-ului). [16]

jQuery oferă perspectivă manipulării evenimentelor în JavaScript dincolo de elementele de bază de selecție și manipulare ale arborelui DOM, astfel atribuirea unui eveniment să se facă într-un singur loc în interiorul codului sau să încorporeze funcționalități JavaScript – de exemplu efectele „fade-in” și „fade-out” în momentul ascunderii elementelor, animațiilor – manipulând proprietățile CSS-ului. [17]

Având nucleul jQuery adăugat la pagină, am procedat la implementarea unui sistem care ne arată sau ascunde în pagina de edit a utilizatorului câmpurile pentru adăugarea unei firme.

Tot cu ajutorul jQuery a fost creat și efectul de derulare al primei pagini. Acest sistem se numeste „scrolable” și a fost implementat în elementul „banners.ctp” prin următorul cod:

<script type="text/javascript">

$(".scrollable").scrollable({

circular: true

}).autoscroll({autoplay:true, interval:4000});;

</script>

Încă o parte a aplicației care a beneficiat de ajutorul jQuery a fost coșul de cumpărături care a fost creat și cu câteva acțiuni de jQuery și tehnici AJAX (asynchronous JavaScript and XML). Ștergerea elementelor din coș, cât și calculele bazate pe optiunile de plată au fost ajutate consistent de javascript și jQuery, acțiunea de ștergere a unui produs din coș arată astfel:

$("a.delete").click(function(e) {

e.preventDefault();

$('#cart_container').empty();

$('#calculations_container').empty();

$('#proceed_checkout').css('display', "none");

$('#cart_container').css('background', "url('/img/layout/loading.gif') no-repeat center center transparent");

$("#cart_container").load("http://<?php echo env('HTTP_HOST').$this->webroot;?>cart/delete/" + this.id, function() {

$('#cart_container').css('background', "transparent");

$('#calculations_container').css('background', "url('/img/layout/loading.gif') no-repeat center center transparent");

$("#calculations_container").load("http://<?php echo env('HTTP_HOST').$this->webroot;?>cart/calculations/", function() {

$('#calculations_container').css('display', "block");

$('#proceed_checkout').css('display', "block");

});

});

});

Prezentarea aplicației

Baza de date

Conectarea la o bază de date este mult facilitată folosind un framework PHP ca și CakePHP, următorul cod realizează și menține conexiunea la baza de date:

Structura bazei de date este compusă dintr-un total de 22 de tabele, numele bazei de date fiind „mstore.sql”. Tabelele din baza de date prezintă relații între ele prin așa numitele câmpuri relaționale. Aceste câmpuri relaționale leagă două tabele între ele, de exemplu, tabela users de tabela orders, prin câmpurile users.id -> orders.user_id.

Relațiile din baza de date pot fi exemplificate vizual prin folosirea unui plug-in în aplicația phpMyAdmin. În figura 4.1 este prezentată structura bazei de date și relațiile dintre tabele.

După cum se observă, tabelele au denumirea la plural. Pentru că ele sunt destinate stocării mai multor elemente.

Aici avem stocată toată informația dinamică a site-ului, ele conținând un număr nedefinit de elemente. În funcție de denumirea fiecărei tabele putem ști ce informație este stocată în acestea.

Câmpurile sunt denumite la modul singular deoarece informația stocată în acestea este una singură.

Ca regulă generală, fiecare tabelă conține trei câmpuri obligatorii: „id” (identificatorul elementului), „created” (data și ora creării elementului) și „updated” (data și ora actualizării elementului).

Fig.4.1 – Structura bazei de date

Fig. 4.1.1.Tabela Albums

Albums este o tabela care conține informațiile necesare pentru afișarea tuturor albumelor de pe site. Tabelul este în relație cu următoarele tabele: categories, artists, filters.

Fig. 4.1.2.Tabela Artists

Artists – tabela conține informațiile despre artiștii prezenți pe site.

Fig. 4.1.3.Tabela Banners

Banners – tabela conține cele mai importante albume sau cei mai importanți artiști afișați pe prima pagina a site-ului. Tabela este în relație cu pages și categories.

Fig. 4.1.4 Tabela Categories

Categories – tabela conține informații despre categoriile de muzica prezente pe site, de exemplu, dance, disco, rock.

Fig. 4.1.5 Tabela Companies

Companies – tabela conține informațiile necesare pentru crearea de facturi unei firme care cumpăra muzica de pe site. Tabela este în legatură cu tabela users.

Fig. 4.1.6 Tabela Filters

Filters – tabela conține filtrele care pot fi puse pe categoriile de muzica prezente pe site, ca și ani 60, 70, 90, sau orice alt tip de filtre se dorește. Este în legatură cu tabela categories.

Fig. 4.1.7 Tabela Orders

Orders – tabela conține informațiile necesare stocării comenzilor în site. Informații despre utilizator, dacă a fost adaugată o companie, preț, cât și statusul comenzii, dacă a fost platită sau nu. Tabela este în legatură cu users și companies.

Fig. 4.1.8 Tabela orders_products

Orders_products – tabela conține informații despre produsele care sunt adaugate pe o anumita comandă. Este în relatie cu tabelele orders, products, albums, users.

Fig. 4.1.9 Tabela Pages

Pages – tabela conține textele dinamice care pot fi editate din partea de administrare a site-ului.

Fig. 4.1.10 Tabel Products

Products – tabela conține informații asupra produsele, adică a cântecelor adaugate pe site, printre informațiile salvate se afla și preț, nume, slug (calea către URL-ul melodiei), cât și calea către fișierul fizic aflat pe server. Tabela este în legătura cu albums, artists, categories și filters.

Fig. 4.1.11 Tabela Users

Users – tabela conține informațiile necesare pentru a crea un cont de utilizator pe site, câmpul special fiind cel de parola, care este criptat cu un algoritm special disponibil în framwork-ul cakePHP.

Structura aplicației

O cale foarte bună de vizualizare a aplicatiei o reprezintă diagrama UML, rutele de acces în aplicație vizualizate într-o formă standard. Căile de acces în aplicație au fost gândite în așa fel încât utilizatorului să-i fie cât mai ușor de ajuns la muzica dorită, cât și a avea posibilitatea de căutare a albumelor și a melodiilor, și de a sorta muzica în funcție de preferințele acestora.

Genurile, cât și ani in care au fost create melodiile, sunt la 2 click-uri distanță, înregistrarea și logarea pot fi accesate dintr-un singur click, iar o mini vizualizare a coșului de cumpărături a fost creată.

Fig. 4.2 – Diagrama UML access utilizator

Structura aplicației în partea de administrare este mai complexă, dar mai bine structurată, adică sunt mult mai multe pagini care se pot accesa, dar acestea au câteva opțiuni standard, adica pagina de clienți are acces la 2 alte pagini, editare și adăugare, în afară de pagina de comenzi, pagini, logout și dashboard toate paginile urmează acesta structură eficientă.

Meniul lateral a fost gândit în așa fel încât să fie tot timpul accesibil din panoul care se colapsează și se restrange în funcție de ce parte din meniu este accesată, acest meniu a fost creat cu ajutorul Javascript-ului.

Fig.4.3 – Diagrama UML access administrator

4.3. Modulul de facturare

Modulul de facturare este o colecție de tehnologii care este folosită la generarea și expedierea automată a facturilor către clienți. Este constituit dintr-un plugin numit domPDF și mai multe scripturi native ale framework-ului cakePHP, fără aceste două componente crearea unui astfel de sistem s-ar dovedi anevoioasă și consumatoare de timp.

DomPDF este un plugin care converteste orice fisier HTML livrat în PDF valid. Este scris în PHP și este mai mult decât rapid pentru nevoile site-ului. Cu ajutorul framework-ului cakePHP s-au realizat fișierele HTML și a fost făcută conectarea la pluginul DomPDF, care se regăsește instalat în folderul „app/vendor/domPDF”.

În primul rând am extras comanda dorită prin utilizarea unui query cakePHP:

Apoi a fost creat un view special numit pdf.ctp în folderul app/Views/Orders/pdf.ctp. Acest view conține tot HTML-ul necesar generării unei facturi. HTML-ul a fost preluat de pluginul domPDF prin următoarele instrucțiuni:

$dompdf = new DOMPDF();

$dompdf->set_paper('A4', 'portrait');

$dompdf->load_html($html);

$dompdf->render();

$dompdf->stream('factura#'.$order['Order']['id'].'.pdf', array('Attachment' => 0));

Factura generată arată în felul următor:

Fig.4.4 – PDF factura proforma

Aceasta factură se poate genera și trimite prin apăsarea unui singur buton fără nici o alta interacțiune a unui administrator. Acest cod preia informația HTML din fișierul pdf.ctp, și o salvează în fișierul pdf factura#3.pdf în folderul webroot/files/invoices. De asemenea, s-a folosit un singur fișier HTML pentru generarea pdf-ului, de aceea va fi foarte simplă o viitoare modificare.

Trimiterea emailului este realizată prin utilizarea următorului cod:

$Email = new CakeEmail();

$Email->emailFormat('html');

$Email->viewVars(array('1'=>$email_content['PredefinedEmail']['mail_content'],

'2' => $order,

'3' => $album_check));

$Email->to($email_address);

$Email->subject($email_content['PredefinedEmail']['mail_title']);

$Email->from(array('[anonimizat]' => 'MStore'));

$Email->template('predefined_mail_cart');

$Email->attachments('files/invoices/pdf/factura#'.$order['Order']['id'].'.pdf');

$Email->send();

Cakephp ne oferă, și de această dată, un ajutor important scurtând mult timpul de realizare a acestui email, prin utilizarea unui sistem numit CakeEmail, care generează emailuri valide, fără interacțiunea programatorului.

V. Descrierea front-end-ului

Front-end-ul este partea din site pe care o văd prima oara clienții, această parte a fost dezvoltată în așa fel încât să faciliteze accesul cât mai rapid la albumele și melodiile puse spre vânzare. Prima pagină este concepută mai mult ca una de prezentare a melodiilor și albumelor care vor fi evidențiate spre a fi vândute mai repede.

5.1 Controller-ul Pages și prima pagina

Pagina de acasă are 3 părți principale, meniul principal, conținutul și footer-ul inteligent

Fig. 5.1 – Meniu principal

Meniul principal conține logo-ul, link-uri către cele mai important pagini din site și formularele de inregistrare și logare. Acesta mai conține și o privire scurta către coșul de cumpărături, foarte utilă dacă se dorește verificarea rapidă a coșului de cumpărături.

Meniul principal este prezent pe toate paginile site-ului și se regăsește în fișierul „top_menu.ctp” din folderul „elements”.

Conținutul este o zonă din interiorul fiecărei pagini care se schimbă în funcție de ce date sunt pasate la view-ul controller-ului. În controller-ul pages, se pasează date privind ultimele albume adaugate.

Fig. 5.2 – Interfata prima pagina

Footer-ul este o colecție de link-uri care duc spre anumite secțiuni ale site-ului, care nu sunt la fel de vizitate ca și meniul principal, dar care sunt totuși destul de importante să fie afișate pe fiecare pagina din site. Conține informații despre magazinul online, cât și informații legale despre firma care deține brand-ul Mstore. Totodată, mai sunt conținute și link-uri către recuperare parolă, și harta site-ului.

Fig.5.3 – Meniul footer afisat in interfata utilizatorilor

Controller-ul Pages este un controller livrat implicit cu cadrul CakePHP, este un controller simplu și opțional pentru livrarea de conținut static. De la versiunea 2.1 acesta nu mai este livrat odată cu nucleul CakePHP, dar este regăsit în folder-ul „app” (al aplicației).

5.2. Pagina Categoriilor

Pagina categoriilor afișează categoriile de produse (genurile muzica) din site. Genurile prezente sunt: Pop, Techno, House și Rock, fiecare la rândul ei având mai multe filtre, utilizatorul poate selecta rapid și eficient ce gen de muzică este interesat, cât și ce filtru are nevoie.

Pagina conține un sub meniu în partea de sus cu toate filtrele, o imagine a genului de muzica, titlu, cât și o scurtă descriere a genului muzical și ce conține categoria aceasta de muzică. Mai jos sunt arătate albumele și single-urile.

Fig. 5.4 – Interfata pagina categorie de muzica si filtre

Categoria este selectată în funcție de un „slug” care se regăsește în URL. Interogarea în baza de date care efectuează selecția albumelor bazându-se pe categoria în care se află este următoarea:

$category= $this->Category->find('first', array('conditions'=>array('Category.slug'=>$slug), 'contain' => array('Filter' => array('conditions' => array('Filter.home_page' == 1),'order' => array('Filter.order' => 'asc'),'fields' => array('name', 'slug','name')))));

În această pagină sunt afișate și reducerile aplicate albumelor, care sunt gestionate din partea de administrare (back-end). Acestea pot fi de 2 feluri preț fix sau procentaj, afișarea lor implementându-se astfel:

if($album['discount_type'] == 0) {

$discount_type = 'RON';

} else {

$discount_type = '%';

}

if(!empty($album['Album']['discount'])) {

$album_div.='<div class = "discount"><div class="discount_value">'.'-'.$album['Album']['discount'].$discount_type.'</div></div>';

}

Dacă există single-uri acestea sunt afișate mai jos sub albume. Filtrele pot fi accesate din sub meniu, și adaugă la URL-ul pagini încă un „tag”, care filtrează în continuare rezultatele, aceste tag-uri sunt trimise prin post la pagina de view din Controller-ul Categories după care se execută un redirect pentru a adăuga tag-ul în URL.

5.3. Pagina unui album și al unui single

Pagina unui single prezintă informații despre acel single cât și despre artistul care a creat acea compoziție muzicală. Din această pagină, grație tag-ului „audio”, cât și a instrucțiuni CakePHP „media” se poate asculta o parte a melodiei. Dacă se dorește se poate și cumpăra single-ul direct din această pagină apăsând butonul „cumpără”.

Fig. 5.5 – Interfata pagina melodie single

Interogările care se execută în baza de date în această pagină sunt efectuate în tabela products:

$product = $this->Product->find('first', array('conditions' => array('Product.slug' => $slug), 'contain' => array('Album' => array('fields' => array('id' ,'name', 'slug', 'content', 'image', 'price','discount', 'discount_type', 'old_price')), 'Category', 'Filter', 'Artist'))));

Afisarea player-ului audio, cât și controalelor acestuia, sunt create de următorul cod:

<?php echo $this->Html->media(array('/files/songs/'.$product['Product']['song']), array('type' => 'audio/mp3', 'duration' => 10, 'controls' =>'controls', 'class' => 'audio_container', 'id' => 'myaudio' ));?>

Butonul de cumpărare este afișat prin apelarea Helper-ului HTML al CakePHP de către următorul cod:

<?php echo $this->Html->link(__('Cumpara', true), array('controller' => 'cart', 'action' => 'add', 'product_'.$product['Product']['slug']), array('class' => 'buy_product'));?>

Codul acesta crează un link tag „a”, prin care se trimite la funcția „add” din controller-ul Cart informații despre ce produs s-a selectat a fi cumpărat prin utilizarea „slug”-ului produsului.

Pagina de album arată toate melodiile care sunt într-un anumit album, codul acestei pagini se regaseste în fișierul „view.ctp” din folderul „albums”. Interogarea în baza de date se efectueaza pe baza slug-ului trimis prin URL. Interogarea se realizează în tabela „albums”, cât și în tabela „products”.

Fig. 5.6. – Interfata pagina album si buton de adaugare in cos de cumparaturi

Albumul și produsele astfel extrase sunt setate la view prin utilizarea instrucțiuni „set”:

$this->set('album', $album);

În fișierul view.ctp se executa o instrucțiune „foreach”, care se repetă pentru fiecare produs în matricea extrasă din baza de date.

În această pagină se pot apela și butoanele de cumpără single, cât și butonul de cumpără album care va cumpăra tot albumul respectiv. În această pagină, un alt script foarte important este acela care face o verificare printre comenzile clientului logat și verifica dacă albumul a fost cumpărat sau nu de către acel client pentru a evita comenzile duble.

5.4. Pagina de contact

Pagina de contact este o pagina indispensabilă pentru orice site, aceasta permite comunicarea utilizatorilor, și nu numai, cu reprezentanții site-ului, utilizatorii pot pune întrebări, obține informații despre cum funcționează site-ul, cât și informații despre produsele viitoare și curente.

Codul scris pentru această pagină se regăsește în fișierul „add.ctp” din folder-ul „contacts”.

Fig. 5.7 – Formular de adaugare contact

Două părți sunt foarte importante în aceasta pagină: plugin-ul „CKEditor” și formularul generat automat de către CakePHP. Plugin-ul CKEditor, este un editor de text de tipul WYSIWYG adică What You See Is What You Get, cu multe proprietăți care îl fac să semene cu un editor de text de pe desktop. Acesta folosește Javascript ca să se inițializeze în pagina de contact.

echo $this->Html->script('ckeditor/ckeditor', array('inline' => false));

echo $this->Ck->load('Contact.message', 'Basic', '422', '300');

O altă parte foarte importantă este generarea formularului de contact care se realizează utilizând Helper-ul CakePHP „Form”, acesta generează întotdeauna un formular valid din punct de vedere HTML și îl afișează în pagina de contact:

5.5. Realizarea comenzilor și coșul de cumpărături

Procedura de realizare a unei comenzi începe în momentul apăsării de către utilizator a butonului de cumpărare.

Butonul respectiv trimite prin URL slug-ul produsului sau al albumului la o funcție din controller-ul „Carts”, care crează o sesiune PHP numita „Cart” care reține toate datele despre produsul respectiv, cât și prețul și cantitatea, în cazul acesta cantitatea fiind întotdeauna 1.

Funcția de adăugare în cart crează o matrice cu toate detaliile produsului sub form:

$cart['Product'][$product['Product']['id']] = array('id' => $product['Product']['id'],

'category_id' => $product['Product']['category_id'],

'album_id' => $product['Product']['album_id'],

'slug' => $product['Product']['slug'],

'artist_id' => $product['Artist']['id'],

'artist' => $product['Artist']['image'],

'song' => $product['Product']['song'],

'name' => $product['Product']['name'],

'price' => $product['Product']['price']);

Această matrice este salvată mai apoi în sesiunea PHP pentru a permite accesul la informațiile despre produs din orice pagină a site-ului și pentru a supraviețuii la încărcarea altor pagini prin utilizarea codului:

$this->Session->write('Cart', $cart);

Variabila de cart este mai apoi încărcată în pagina coșului de cumpărături care se regăsește în fișierul „index.ctp” din folder-ul „carts”. Această pagină execută o interogare sesiunea PHP și extrage toate produsele din ea dacă există, dacă nu, un mesaj este returnat utilizatorului „coșul de cumpărături este gol”. În view-ul acestei pagini se execută un „foreach” pe toate nodurile matricii sesiuni PHP. Tabelul astfel generat afișează o imagine a albumului, numele lui, cât și prețul albumului, dar și un link către acțiunea de ștergere a produsului din coș. În pagină mai este un prezent un link către „checkout”, adică pagina în care se confirmă comanda, cât și luarea la cunoștința a termenilor și condițiilor site-ului.

Fig. 5.8. – Prima pagina din cosul de cumparaturi

Acțiunea de ștergere se efectuează prin apelarea unei funcții din Controller-ul „carts” și este efectuată în mod desincronizat, ceea ce duce la o mai bună funcționalitate, pagina nu se reîncarcă atunci când se realizează ștergerea unui produs din sesiunea PHP.

Dacă un utilizator nu este logat, acestuia ii este arătat un formular de logare și un buton de înregistrare, acesta din urma îl duce pe o pagina unde poate să îsi introducă detaliile despre cont și să poată continua cumpărăturile.

Fig. 5.9 – Pagina de inregistrare si logare utilizator

Formularul este creat tot cu ajutorul helperului CakePHP „Form”, iar pagina de înregistrare se regăsește în fișierul „add” din folderul „users”.

Pagina următoare este pagina de confirmare comandă și de acceptare a termenilor și condițiilor site-ului. În această pagină nu mai avem nici o acțiune posibilă asupra coșului, dar putem încă da înapoi pe pagina precedentă.

Fig. 5.10 – Pagina de checkout din cosul de cumparaturi

Odată apăsat butonul de comandă, sesiunea de cart din PHP, cât și utilizatorul logat sunt trimiși la o funcție specială care înregistrează comanda în baza de date MySQL a site-ului. În acesta funcție se introduc date în 2 tabele, „orders” și „orders_products” prin utilizarea unor metode specifice CakePHP. Codul care inserează în baza de date comanda efectivă calculează totalurile prețurilor produselor comandate, inițializează tabela order și mai apoi salvează datele în ea. Toate acestea se fac în modelul „Order” al site-ului, modelul eficientizează relația cu baza de date a aplicației CakePHP.

$cart_ammount = $product_price + $album_price ;

$total =round($cart_ammount, 2);

$total_no_vat = $cart_ammount /1.24;

$vat = $total – round($total_no_vat, 2);

$subtotal = $total – $vat;

$company_id = 0;

$this->create();

$this->save(array('Order' => array('user_id' => $user['User']['id'], 'company_id' => $company_id, 'subtotal_price' => $subtotal, 'total_price' => $total)));

Pe baza identificatorului inserat în tabela orders se realizează inserarea produselor sau albumelor în tabela orders_products care conține produsele din interiorul unei comenzi.

Sistemul de comanda se termină cu un mesaj de confirmare și prezentarea produselor cumpărate.

Fig.5.11. – Pagina de confirmare comanda realizata cu succes

5.6. Contul utilizatorului

Pagina care conține contul utilizatorului se afla în fișierul „edit.ctp” din folderul „users”. Sistemul care gestionează tot contul de utilizator este constituit din 3 părți, partea de editare a profilului utilizatorului, formularul de adăugare a unei firme și formularul de schimbare a parolei. Editarea profilului se realizeaza în aceeași pagina și se execută prin postarea unui formular la acțiunea de salvare din controller-ul „users”.

Fig.5.12. – Formular de editare utilizator

Schimbarea parolei se efectuează în fișierul „change_password.ctp” din folderul „users”. Formularul creat cu ajutorul helper-ului „Form” conține 3 input-uri, parola veche, parola nouă și confirmare parolă, pentru a schimba parola un utilizator trebuie sa cunoască parola veche și să introducă o nouă parolă pe care să o confirme, adică să introducă aceeași parolă de 2 ori. Verificarea parolei vechi și verificarea parolelor noi se realizeaza în modelul de „user”, într-un callback, funcție specială CakePHP care efectuează o operațiune înainte de validarea formularului.

if(isset($this->data['User']['password']) && isset($this->data['User']['passwrd'])) {

$this->validate['password'] = array('rule' => array('equalTo', Security::hash(Configure::read('Security.salt') . $this->data['User']['passwrd'])));

}

if(isset($this->data['User']['old_password'])) {

$user = $this->findById($this->data['User']['id']);

$this->validate['old_password'] = array('rule' => array('equalTo', $user['User']['password']));

}

Sistemul este completat de către adăugarea, editarea și ștergerea unei firme. Acest lucru se desfășoară în paginile Controller-ului „Companies”

Fig.5.13 – Tabel de afisare companii

5.7. Istoric comenzi

Sistemul de istoric comenzi afișează într-un singur loc toate comenzile unui utilizator, în acest fel utilizatorii pot sa vadă toate comenzile într-un mod rapid și eficient.

Fig.5.14. – Tabel de afisare comenzi realizate

În această pagina: „orders/history” se efectuează o interogare în tabela „orders”, pe baza identificatorului utilizatorului logat, dacă un utilizator privește pagina și nu este logat nu îi va fi afișat nimic.

$this->set('page', ClassRegistry::init('Page')->findById(9));

$this->set('orders', $this->Order->find('all', array('conditions' => array('Order.user_id' => $this->Auth->user('id')))));

Tabelul conține identificatorul comenzii, prețul total, starea comenzii, care poate fi în așteptare sau platita, cât și data de creare, în acest tabel mai exista un link către o pagina de detaliu a comenzii care afișează pe lângă aceste detalii și produsele, prețul pe produs și detaliile clientului.

Fig. 5.15 – Pagina de afisare detalii comanda

Interogarea se efectuează atât în tabela „orders”, cât și „orders_products”, „products”, „users” și „albums”.

VI. Descrierea Back-end-ului

Back-end-ul se poate accesa urmărind URL-ul mstore/owner, care accesează o singura funcție de logare. Acest URL poate fi accesat de oricine, dar nu orice utilizator care are un cont poate să și acceseze partea de aministrare. Controlul acesta este realizat de un câmp din tabela „users” denumit „group_id”, acest câmp identifică grupul din care face parte un utilizator, „admin” sau „client”.

Partea de administrare are rolul de a permite administratorului site-ului să gestioneze rapid și eficient toate părțile vizibile utilizatorului. Din această zonă se pot modifica imagini, texte, melodii, albume, comenzi, email-uri și clienți.

6.1. Controller-ul Users și autentificarea

Acest Controller este unul dintre cele mai importante sisteme din site, el controlează datele prin utilizatori, administratori, cât și logarea în site și delogarea din site. Pagina care permite accesul în partea de administrare a site-ului se regăsește în fișierul „owner_login.ctp” din folder-ul „users”.

Fig.6.1 – Formular de logare in sistemul de administrare

Această pagină este compusă dintr-un formular HTML și o acțiune care identifică utilizatorul și cu ajutorul CakePHP-ului îl poate loga dintr-o singură linie de cod. Codul PHP care execută identificarea și logarea administratorului este următorul:

if (!empty($this->request->data)) {

$user = $this->User->find('first', array('User.username' => $this->request->data['User']['username']));

if(!empty($user)) {

$this->Auth->login();

if($this->Auth->user('group_id') == 1) {

$this->redirect('/owner');

} else {

$this->redirect('/');

}

}

}

$this->layout= 'owner_login';

Acest cod validează formularul, execută o interogare în baza de date bazându-se pe numele de utilizator al administratorului și mai apoi îl autentifică prin apelarea instrucțiunii „login” din componenta de autentificare „Auth”.

Odată logat administratorul este redirecționat pe o pagină în care poate să vadă la o singura privire toate mesajele venite de la utilizatori și ultimele comenzi nepreluate.

6.2. Administrarea utilizatorilor

Sistemul de gestiune al clienților conține toate operațiile ce se impun asupra unei baze de date relaționale adică „CRUD”, Create Read Update Delete. Vizualizarea clienților se efectuează în fișierul „owner_index.ctp”, unde se execută o interogare în baza de date, în tabela „users” pe baza grupului 2, adică cel al clienților.

Fig. 6.2 – Pagina de gestiune a clientilor

CakePHP mai are o posibilitate foarte utilă, aceea de a putea pagina rezultatele unei interogări prin utilizarea codului de mai sus. Afișarea în view a link-urilor de navigare se face la fel de ușor cu următorul cod:

<?php echo $this->paginator->prev('&#0171; ' .__('inapoi', true), array('escape' => false), null, array('class'=>'disabled', 'escape' => false));?>

| <?php echo $this->paginator->numbers();?>

<?php echo $this->paginator->next(__('urmatoarea', true).' &#0187;', array('escape' => false), null, array('class'=>'disabled', 'escape' => false));?>

Acțiunea de ștergere se realizează direct în controller apelând un URL care trimite identificatorul la o funcție de ștergere denumită „owner_delete”. Pe baza identificatorului se efectuează o interogare a bazei date care șterge rândul din tabela „users”.

Utilizatorul este mai apoi redirecționat înapoi pe pagina de pe care a venit indiferent care a fost aceea.

Formularul de adăugare se regăsește în fișierul „owner_add.ctp”, iar cel de editare se regăsește în fișierul „owner_edit.ctp”. Diferențele dintre aceste 2 formulare sunt lipsa unui identificator în formularul de adăugare și prezența lui in formularul de editare, din cauză că la adăugare identificatorul nu este cunoscut.

Fig. 6.3 – Formular de adaugare a unui client

Fig. 6.4 – Formular de editare client

În Cakephp, diferența dintr-o adăugare și o editare se realizează pe baza identificatorului tabelei, în cazul nostru users. Lipsa sau prezența lui în matricea de salvare apelează două instrucțiuni SQL diferite, dar aceeași funcție PHP „save”.

Al doilea lucru diferit între cele două formulare îl reprezintă lipsa câmpului de parolă din formularul de editare, administratorul poate să adauge o parolă, dar doar utilizatorul și-o poate modifica.

Pagina de vizualizare a utilizatorului se regăsește în fișierul „owner_view.ctp”, această pagină prezintă toate detaliile despre client, dar și firmele acestuia. Firma afișata poate fi ștearsă sau modificată din partea de administrare.

Fig.6.5 – Pagina de vizualizare detalii client

Interogarea în baza de date se efectuează în tabela „users” și „companies”, CakePHP ne ajută să scurtăm foarte mult scrierea de query SQL prin utilizarea funcției astfel:

$user = $this->User->find('first', array('conditions' => array('User.id' => $id), 'contain' => 'Company'));

6.3. Administrarea conținutului

Prin conținut înțelegem tot textul și imaginile care nu sunt scrise static în fișierele „.ctp”. Acest conținut include, banner-ele și paginile de text. Sistemul creat poate să gestioneze un număr nelimitat de pagini și un număr nelimitat de banner-e.

Banner-ele se regăsesc în pagina „owner_index.ctp” din folder-ul „banners”, această pagină arată într-un tabel toate imaginile setate ca bannere pe site. Acestea sunt, de fapt, doar link-uri rapide către câteva albume sau melodii care se doresc a fi puse în evidență pe site.

Fig.6.6 – Pagina de editare banner

Un banner are mai multe proprietăți, el fiind activ sau inactiv, poate să redirecționeze utilizatorul pe o pagină anume, administratorul având posibilitatea asta introducând o adresă validă în câmpul „URL”. Imaginea unui banner poate fi modificată oricând, copiind pe server o altă imagine, aceasta din urmă înlocuind-o pe prima.

Codul utilizat pentru a realiza upload-ul unui banner este următorul:

if(isset($this->data['Banner']['image']) && $this->data['Banner']['image'] != '') {

$uploaded = false;

if(isset($this->upload_image['error']) && ($this->upload_image['error'] == 0)) {

$exp = explode('.', $this->upload_image['name']);

$extension = end($exp);

$uploaded_file = md5($this->upload_image['name'] . date('m-d-Y H:i')). '.' .$extension;

if(move_uploaded_file($this->upload_image['tmp_name'], 'img/banners/' . $uploaded_file) == true) {

$uploaded = true;

}

}

if(($created == false) && ($uploaded == true) && isset($this->old_entry['Banner']['image']) && ($this->old_entry['Banner']['image'] != '')) {

unlink('img/banners/' . $this->old_entry['Banner']['image']);

}

}

Acest cod copiază fișierul adăugat în câmpul „image” în folderul „img/banners/” din rădăcina site-ului, salvând extensia fișierului în variabila „extension” și mai apoi creând un nume de fișier compus din litere și cifre și adăugând extensia salvată la sfârșit. Același cod funcționează și pentru adăugarea și pentru editarea unui banner, datorită locației acestuia în modelul de „Banner”.

Paginile sunt controlate din fișierul „owner_index.ctp” din folderul „pages”. În tabelul regăsit în acest fișier s-au introdus mai multe acțiuni care setează o pagină în meniul principal, pe activ sau inactiv și dacă pagina să fie disponibilă în meniul „footer”.

Fig.6.7 – Sistem de gestiune a paginilor statice

Editarea se realizează în pagina „owner_edit.ctp”, această pagină este accesată din „owner_index” care afișează toate paginile site-ului. În această pagină se pot modifica toate detaliile unei pagini.

Fig. 6.8.- Formular de editare a unei pagini

Scriptul folosit extrage informațiile din baza de date și le insereaza în formularul de editare pentru a fi modificate, după ce a fost apăsat butonul de editare pagină, codul folosit inserează în baza de date în tabela „pages” toate detaliile paginii actualizate.

Aranjarea paginilor se efectuează în fișierul „owner_order.ctp”, și este o metodă de a aranja meniul principal ca să urmeze o anumită ordine dorită.

Fig. 6.9 – Sistem de ordonare a link-urilor din meniu

Pagina este compusă dintr-un tabel html care are link-uri cu niște iconițe indicatoare de direcție, în sus sau în jos. Aceste link-uri duc la niște acțiuni, care modifică un field în baza de date denumit „top_menu”. După acest field se execută interogarea în baza de date care extrage datele despre meniu.

Funcția de „move up” este următoarea:

$moveUp = $this->find('first', array('conditions' => array('Page.id' => $id)));

$moveDown = $this->find('first', array('conditions' => array('Page.' . $field => $moveUp['Page'][$field]-1)));

$moveUp['Page'][$field] = $moveUp['Page'][$field]-1;

$moveDown['Page'][$field] = $moveDown['Page'][$field]+1;

$this->save($moveUp);

$this->save($moveDown);

6.4. Administrarea email-urilor

Pagina care administrează email-urile este disponibilă în fișierul „owner_index.ctp” din folderul „predefined_emails”, această pagină ne ajută ca să gestionăm mai bine email-urile care se trimit utilizatorilor cu diferite ocazii ca, autentificare, comandă, schimbare parolă, cât și email-urile care se trimit administratorilor cu ocazia adăugării unui contact sau a unei comenzi.

Fig.6.10 – Pagina de gestiune a email-urilor

În această pagină se execută o interogare în baza de date în tabela „predefined_emails”, din care se extrag și se afișează toate email-urile prezente în ea.

În controller-ul de „PredefinedEmails” se mai definește o listă de email-uri blocate, de fapt, care nu se pot șterge, aceste email-uri în loc să aibă o iconiță de ștergere, au o iconiță cu un lacăt ca să nu poată fi șterse. Aceste email-uri sunt critice și de aceea, acestea nu pot fi șterse nici măcar accidental.

$this->set('locked_mails', array(1,2,3,4,5,6));

Pagina de editare permite folosirea unor email-uri frumos formatate din cauză că se pune la dispoziție editorul de texte „FCKeditor”.

Acest email are în componența sa un string special „$User.name$ ”, acest șir de caractere sunt recunoscute de scriptul de trimitere și sunt înlocuite în text pentru a putea trimite email-uri personalizate.

6.5. Administrarea produselor

Sistemul de administrare al produselor conține mai multe pagini care lucrează împreună pentru a gestiona, produsele efective, albumele din care fac parte produsele, cât și categoriile și filtrele care ajută la găsirea mai rapidă de către utilizator a ceea ce dorește.

Categoriile pot fi accesate în pagina „owner_index.ctp” din folderul „categories”, aceste pagini conțin o lista de categorii care pot fi adăugate, editate și șterse.

Fig. 6.11 – Pagina de gestiune a categoriilor

Adăugarea unei categorii permite umplerea mai multor input-uri HTML printre care cel de nume, imagine și conținut. Categoria ținând loc și de genul muzical din care un album sau o melodie face parte.

Filtrele sunt și ele o parte importantă din „user experince”, ajută utilizatorul să găsească informația dorită în funcție de gusturile sale. Acestea pot fi adăugate din pagina „owner_index.ctp” din folderul „filters”. Au o proprietate foarte specială pentru că pot fi asociate cu orice categorie și mai ales cu mai multe categorii odată, această proprietate se numește „HasAndBelongsToMany”.

Fig.6.12. – Formular de editare filtre

Câmpul HTML generat care poate selecta mai multe categorii odată este creat cu ajutorul „helper”-ului CakePHP Form:

echo $this->Form->input('category_id', array('options' => $categories,'multiple' => 'multiple', 'style' => 'width:auto', 'label' => __('Categoriile Filtrului', true), 'class' => 'select', 'style' => 'height:100px'));

Artiștii sunt adăugați și gestionați din pagina „owner_index.ctp” din folderul „artists”, această pagină oferă posibilitatea adăugării, editării, vizualizării, cât și a ștergerii artiștilor, astfel se efecutează toate operațiile asupra unei baze de date: create, update, read și delete. Artiștii adăugați sunt folosiți în pagina de adăugare album sau produs pentru a aloca o melodie sau un album lor.

Fig. 6.13 – Pagina de gestiune artisti

Paginile de adaugare și editare apeleaza 2 „callback-uri” care salvează și imaginea artistului pe server prin utilizarea unei instrucțiuni PHP denumită „move_uploaded_file”, aceasta realizează mutarea imaginii din memoria temporară PHP într-un anumit loc pe server desemnat în folderul „img/artists/”.

Pagina de albume gestionează toate albumele prezente pe site, aceasta se regăsește în fișierul „owner_index.ctp” din folderul „albums”. Aceste albume conțin și mai multe câmpuri care ajută la ofertarea albumelor, setarea de reduceri sau setarea albumelor ca și active.

Fiecare album fiind alocat unui artist și introdus într-o categorie și are atașate filtre, toate acestea fiind realizate din pagina de add/edit.

Acțiunea de setare a albumelor active se realizează în pagina de ”owner_index”.

Fig.6.14 – Pagina de gestiune albume

Editarea albumului permite modificarea oricăror date despre un album, atât nume, preț, status, categorie, artist, etichetă, cât și reducere și imagine.

Fig.6.15 – Pagina de editare album

Pagina de produse este foarte asemănătoare cu paginile de albume, dar cu câteva diferențe notabile. Pe prima pagină „index”, au fost extrase doar câteva detalii ca și categoria din care face parte produsul/melodia, numele, dacă este activ sau nu și dacă este afișat pe prima pagină sau nu.

Fig.6.16 – Pagina de gestiune produse

Interogarea efectuată în baza de date pentru a extrage detaliile unei melodii se realizează în tabela „products” prin utilizarea următorului cod:

$this->paginate = array('contain' => array('Album', 'Category'));

$this->set('products', $this->paginate());

CakePHP ne ajută și în acest caz foarte mult datorită simplității realizării unei interogări în baza de date. Pagina de editare are mai multe setari împrumutate de la albume doar ca un produs, sau mai bine zis o melodie care aparține unui album și este marcat ca atare în aceasta pagina. În controller se mai efectuează niște interogări în baza de date pentru a extrage detaliile despre categorii, albume, și etichete, pentru a umple input-urile de tipul select din această pagină de editare.

Fig. 6.17 – Pagina de editare produs

O altă noutate față de pagina de editare album este prezența unui player audio HTML 5, care este integrat în pagina acesta prin utilizarea helper-ului HTML și a funcției „media”.

echo $this->Html->media(array('/files/songs/'.$product['Product']['song']), array('type' => 'audio/mp3', 'duration' => 10, 'controls' =>'controls', 'class' => 'audio_container', 'id' => 'myaudio' ));

Acțiunea de a înlocui melodia duce la apelarea unui script care înlocuiește fișierul mp3 (mpeg layer 3), de pe server cu cel nou adăugat, acesta se regăsește on modelul de „product” și pe baza instrucțiunii PHP „move_uploaded_file”, transferă fișierul din memoria PHP în folder-ul „files/songs/”.

6.6. Administrarea comenzilor

Administrarea comenzilor se efectuează în pagina „owner_index.ctp” din folderul „orders”. Această pagină extrage datele despre comenzi din tabela MySQL „orders” și le afișează folosind o buclă ciclică „foreach” într-un tabel HTML.

Fig. 6.18 – Pagina de gestiune comenzi

În această pagină sunt arătate și status-urile unei comenzi, cât și câteva acțiuni care se pot efectua asupra comenzilor, printre ele sunt generarea unei facturi proforme, cât și a unei facturi finale, vizualizarea comenzii, dar și ștergerea ei dacă utilizatorul dorește acest lucru.

Codul care ne ajută să identificăm statutul unei comenzi, transformă câmpul de „status” din baza de date utilizând pictograme pentru a fi foarte ușor de înțeles.

Pagina de vizualizare oferă un buton foarte important, cel de finalizare comandă, care și trimite factura finală la utilizator, prin email. Această pagină efectuează interogări în multe tabele ca și „orders”, „orders_products”, „products”, „albums”, „users”.

Afișarea comenzii se face în fișierul „owner_view.ctp” folosind tabele HTML care sunt umplute cu date extrase din baza de date:

Fig.6.19 – Pagina de detaliu a unei comenzi

Acțiunea de finalizare a comenzii a fost creată în controller-ul de „orders” și execută schimbarea statutului comenzi din 1 în 2 (comandă finalizată), mai apoi o alta funcție este apelata „owner_confirm”, care efectueză trimiterea facturii propriu-zisă la utilizator.

VII. Concluzii

Această aplicație este un sistem complet de vânzare de muzică prin internet. Dispune de toate mijloacele de afișare, cumpărare și facturare al unui magazin online de muzică. Un client poate să răsfoiască muzica prezentă în site, să ia o decizie informată asupra cumpărări unui single sau al unui album, și să fie facturat de un sistem eficient care poate înlocuii parțial și un software de contabilitate.

Sistemul este gândit în așa fel încât să arate ce se poate realiza cu foarte puțini bani, toate tehnologiile sunt gratuite. PHP-ul este un limbaj de programare gratuit și open source iar CakePHP este unul dintre cele mai utilizate cadre PHP din lume și este și el la randul lui gratuit și open source, baza de date MySQL este oferită de orice firmă de hosting din lume datorită consumului mic de resurse și faptul că este gratuit.

Doar server-ul, planul de hosting și legătura cu industria muzicală pot fi costisitoare, dar dând exemplul altor site-uri de genul, Deezer, Spotify, Apple Music (lansat cu foarte puțin timp în urmă), acest tip de afaceri pot fi și foarte profitabile. Este un site de mare actualitate, acesta poate deveni profitabil în foarte scurt timp de la lansare, daca beneficiază de o campanie de marketing bine structurată, cât și de o politica de prețuri relaxată, acest lucru fiind mai util în țara noastră decât în alte țări.

Actualizarea evidentă ar fi adăugarea unui sistem de multi – limbă, multi – domeniu, aceste lucruri se pot adăuga oricând datorită extensibilități și funcțiilor native ale cadrului CakePHP. Multi – limbă înseamnă traducerea tuturor textelor în mai multe limbi și cele statice și cele dinamice. Iar multi domeniu înseamnă că se poate accesa același cod sursă de pe mai multe domenii de internet.

Bibliografie

[1] https://en.wikipedia.org/wiki/XAMPP consultat la 3.05.2015 & 1.07.2015

[2] https://ro.wikipedia.org/wiki/XAMPP consultat la 7.05.2015 & 30.06.2015

[3] http://ro.wikipedia.org/wiki/Notepad%2B%2B consultat 02.02.2015 & 25.06.2015

[4] http://www.getpaint.net/doc/latest/index.html consultat 15.04.2015 & 28.06.2015

[5] Rasmus Lerdorf, Kevin Tatroe, Peter MacIntyre, Programming PHP, Editura O'Reilly Media, Inc., 2006

[6] http://www.cio.com/article/2436960/developer/php-s-enterprise-strengths-and-weaknesses–take-2.html consultat 04.05.2015 & 30.06.2015

[7] http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html consultat 13.05.2015 & 29.06.2015

[8] Eric A. Meyer, CSS:the definitive guide, Editura O'Reilly Media, Inc., 2006

[9] Chuck Musciano, Bill Kennedy, HTML and XHTML, the definitive guide, Editura O'Reilly Media, Inc., 2002

[10] Peter Lubbers, Brian Albers, Frank Salim, Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development, Editura Apress, 2010

[11] http://www.w3schools.com/js/ consultat 13.05.2015 & 30.06.2015

[12] http://www.w3schools.com/js/js_whereto.asp consultat 14.05.2015 & 29.06.2015

[13] Cristian Darie, Emilian Balanescu, Beginning PHP and MySQL E-Commerce:From Novice to Professional, Editura Springer, 2008

[14] http://www.mysql.com/company/legal/licensing/ consultat 27.05.2015 & 01.07.2015

[15] http://dev.mysql.com/doc/refman/4.1/en/what-is-mysql.html consultat 27.05.2015 & 01.07.2015

[16] http://www.w3schools.com/jquery/jquery_intro.asp consultat 10.04.2015 & 20.06.2015

[17] Jonathan Chaffer, Karl Swedberg, Learning jQuery, Editia a IV – a, Editura Packt, 2013

[18] https://en.wikipedia.org/wiki/Server-side_scripting consultat 30.06.2015 & 01.07.2015