PROGRAMUL DE STUDIU CALCULATOARE FORMA DE ÎNVĂȚĂMÂNT IF Proiect de diplomă COORDONATOR ȘTIINȚIFIC S.l.dr.ing Otto Poszet ABSOLVENT Țica Alexandru… [604654]

1 UNIVERSITATEA DIN ORADEA
FACULTATEA DE INGINERIE ELECTRICĂ ȘI
TEHNOLOGIA INFORMAȚIEI
PROGRAMUL DE STUDIU CALCULATOARE
FORMA DE ÎNVĂȚĂMÂNT IF

Proiect de diplomă

COORDONATOR ȘTIINȚIFIC
S.l.dr.ing Otto Poszet

ABSOLVENT: [anonimizat]

2 UNIVERSITATEA DIN ORADEA
FACULTATEA DE INGINERIE ELECTRICĂ ȘI
TEHNOLOGIA INFORMAȚIEI
PROGRAMUL DE STUDIU CALCULATOARE
FORMA DE ÎNVĂȚĂMÂNT IF

Implementare aplicație web
online „All4Tech”

COORDONATOR ȘTIINȚIFIC
S.l.dr.ing Otto Poszet

ABSOLVENT: [anonimizat]
2018

3
UNIVERSITATEA DIN ORADEA
FACULTATEA INGINERIE ELECTRICĂ ȘI TEHNOLOGIA INFORMAȚIEI
DEPARTAMENTUL CALCULATOARE ȘI TEHNOLOGIA INFORMAȚIEI

Lucrare de finalizare a studiilor a student: [anonimizat]

1) Tema lucrării de finalizare a studiilor:
Implementare aplicație web online „All4Tech”
2) Termenul pentru predarea lucrării
19.02.2019 – Data Predare Licență 2019
3) Elemente inițiale pentru el aborarea lucrării de finalizare a studiilor
PHP și MySQL, JavaScript, JSON, HTML 5 și CSS3

4) Conținutul lucrării de finalizare a studiilor:
Introducere, Tehnologii utilizate în realizarea aplicației, HTML 5, CSS 3, PHP 7.0.1,
MySQL, JavaScript, DotKern el, jQuery, Alte Tehnologii software utilizate, XAMP,
Proiectarea și implementarea aplicației, Arhitectura aplicației, Structura aplicației – Utilizator,
Admin; Concluzii, Bibliografie.

5) Material grafic: Prezentare Power Point

6) Locul de documentare pentru elaborarea lucrării:
Biblioteca Universități Oradea, Bibiloteca Județeană, Laborator Calculatoare, Internet,
internship, loc de munca

7) Data emiterii temei
1 octombrie 2017

Coordonator științific
S.l.dr.ing Otto Poszet

4
Cuprins

Cuprins ………………………….. ………………………….. ………………………….. ………………………….. …4
1. Introducere ………………………….. ………………………….. ………………………….. ………………… 5
2.Tehnologii utilizate în realizarea aplicației ………………………….. ………………………….. ……….. 6
2.1 HTML 5 (Hyper Text Markup Language) ………………………….. ………………………….. .7
2.2 CSS 3 (Casc ading Style Sheets) ………………………….. ………………………….. ……………. 8
2.3 PHP 7.2.0 (Hypertext Preprocessor ) ………………………….. ………………………….. ……. 10
2.4 MySQL 8.0 ………………………….. ………………………….. ………………………….. ……….. 12
2.5 JavaScript ECMAScript 6 ………………………….. ………………………….. …………………. 13
2.6 DotKernel 1 ………………………….. ………………………….. ………………………….. ……….. 15
2.7 jQuery 3 ………………………….. ………………………….. ………………………….. …………… 17
2.8 Alte tehnologii software utilizate ………………………….. ………………………….. ………… 19
2.8.1 XAMPP ………………………….. ………………………….. ………………………….. ………. 19
2.8.2 Sublime Text 3 ………………………….. ………………………….. ………………………….. 20
3.Proiectarea și implementarea aplicației ………………………….. ………………………….. ………….. 21
3.1Arhitectura aplica ției ………………………….. ………………………….. ………………………….. …. 21
3.2Structura aplicației ………………………….. ………………………….. ………………………….. ……. 24
Utilizator ………………………….. ………………………….. ………………………….. …………………. 24
4.Concluzii ………………………….. ………………………….. ………………………….. ……………………… 34
Bibliografie ………………………….. ………………………….. ………………………….. …………………….. 36

5 1. Introducere

Această lucrare prezintă o aplica ție web, mai exact un magazin online cu posibilitatea
vânzării unor produse diverse realizat în PHP. Av ând în vedere evoluția tehnologică din zilele
noastre, mersul la cumpărături este tot mai evitat de către oameni din lips ă de timp. Astfel,
magazinele online devin o opțiune pentru tot mai mulți oameni prin multitudinea
produselor pe care le pot oferi și prin timpul pe care îl salvează. [8]
Fiind o era a vitezei, oameni tind să cumpere cea ce au nevoie fără a irosi prea mult
timp, astfel majoritatea oamenilor atunci când găsesc timp liber (la birou, acasă), îl folosesc în
diferite scopuri, personale, unul dintre aceste scopuri fiind cumpărăturile. Cheltuielile pentru
deschiderea și mentenanța unui magazin on -line sunt mult ma i mici decât în cazul unui
magazin clasic fiind evitate costuri precum chiria, întreținerea, angajații, sistemele de alarmă
și pază sau multe altele.
Un astfel de magazin oferă posibilitatea de a te adresa clienților din toata lumea ne
având limite decât î n cea ce privește Limba în care este prezentat magazinul. Printr -un astfel
de magazin este foarte ușor să menții la zi ofertele produselor prin partea de admin sau a unor
programe adiacente. Un alt avantaj, major, este faptul că în momentul în care site -ul are un
trafic mare, se pot obține venituri adiacente și din publicitate, un domeniu care este în mare
creștere.
În astfel de magazine pot fi implementate opțiuni de tracking , făcând astfel mai ușoară
urmărirea a ceea ce s -a vândut dar și ce produse au fo st vizualizate de către cei care au accesat
magazinul. Stocul produselor devine mai flexibil, vânzătorul nefiind obligat să țină un stoc
uriaș de produse. El poate să fie minim, caz în care vânzătorul trebuie să fie sigur că în
eventualitatea unei comenzi mai mari, poate să livreze în timpul precizat.
Avantajele unui astfel de magazin: [8]
 economisirea timpului pentru cumpărător, deoarece nu mai este nevoie să se
deplaseze până la magazin și să se plimbe printre raioane pentru a găsi ceea ce
caută, toate ac estea fiind posibile prin filtrele magazinului la doar un click
distanța;
 comparațiile între produse sunt doar la un click distanță, fie că este vorba
despre comparații între prețuri sau între specificații/culori/mărimi/brand;

6  produsele pot fi livrate la d omiciliu sau la o adresă specificată de către
cumpărător.

2.Tehnologii utilizate în realizarea aplicației

Având în vedere creșterea cererilor pentru magazinele online am decis să creez o
aplicație care se bazează nu doar pe cea ce vrea sau crede că vre a să vadă clientul într -un
astfel de magazin, cât pe cea ce are nevoie un antreprenor de la o astfel de aplicație pentru a
avea succes.
Pentru realizarea acestei aplicații am folosit tehnologii precum: HTML5, CSS3 și
SCSS, PHP, MySQL, jQuery, JSON și Javas cript. Ca editor de text am utilizat Sublime Text
3 și Notepad ++ și PHP Storm .
Aplicația este realizată pe un șablon arhitectural MVC de la DotKernel, bazat pe
ZendFramework.
HTML 5 utilizat pentru realizarea structurii (blocurilor de execuție) a paginil or web
din cadrul magazinului online iar CSS 3 și SCSS pentru formatarea conținutului paginilor
web. SCSS vine ca un upgrade pentru utilizatorii de SASS 3 și aduce ca noutate nestuirea
claselor de css.
PHP 7.2.0, versiune publicată î n 30 noiembrie 2017, pe ntru a face legăturile dintre
website și baza de date dar și pentru realizarea paginilor dinamice și MySQL pentru crearea și
administrarea bazei de date.
JQuery a fost utilizat la designul imaginilor. Javascript utilizat la realizarea și
includerea unor e lemente din aplicație.
JSON utilizat la encodarea și decodarea unor informații care mai apoi sunt stocate în
baza de date și afișate în admin sau în Exporturi, precum și în salvarea și stocarea datelor pe
servar care sunt mai apoi citite de către aplicați e .

7 2.1 HTML 5 (Hyper Text Markup Language)

HTML 5 [1] este prescurtarea de la HyperText Markup Language și reprezintă un
limbaj pentru crearea unui document astfel încât să poată fi publicat pe World Wide Web și
vizualizat cu ajutorul unui browser (Internet Explorer, Google Chrome, Mozila Firefox,
Opera, etc.). Hypertext -ul trebuie interpretat ca un text care semnalează o legătură la o altă
informație web, de obicei un alt document web și este identificat prin subliniere sau culoare,
pentru a -l deos ebi de textul simplu.
HTML nu este un limbaj de programare și asta din cauza că în HTML lipsește
atributul principal propriu oricărui limbaj de programare și anume comenzile. În HTML nu
poate fi creată o succesiune de acțiuni, ci doar poate fi descris mod ul în care browserul trebuie
să afișeze pe ecran documentul respectiv. HTML utilizează pentru descrierea documentelor
web – tag-uri, numite și etichete, specifice pentru fiecare element descris. Tag -urile stabilesc
atât structura documentului, cât și aspec tul acestuia. Un tag este un identificator care
furnizează browser -ului instrucțiuni de formatare a documentului. Petru a fi delimitate, tag –
urile HTML sunt încadrate între paranteze unghiulare (< >). [9]
Tag-urile se divizează în:
 tag-uri pare sau tag -uri pereche – care impun după sine existența unui tag de
închidere (exemplu <p> </p>, paragraful trebuie să specifice unde începe și
unde se termină);
 tag-uri impare sau singulare – care nu necesită închidere (exemplu <br/>).
Orice pagină web (document HTML) are în structură trei elemente obligatorii: un
element numit HTML, care cuprinde întregul document, și două sub -elemente ale acestuia:
HEAD (antet, cap) și BODY (corp). [17]
Tag-ul <html> este primul tag care trebuie să apară într -un fișier HTML. El
încadre ază alături de tag -ul său corespunzător de închidere </html> întreaga pagină web.
 Tag-ul <head> marchează partea de antet a documentului. Este un tag par cu
tag-ul de închidere </head> în care se adaugă surse sau fișiere care sunt
necesare pentru pagina r espectivă .
 Tag-ul par <body> încadrează conținutul paginii web.

8

Figura 2.1. Elementele unei liste

Elementel e din figura 2.1. reprezintă o l istă creată pe ntru a ordona, în cazul acesta
descrierea unui produs.

Figura. 2.2 Elementele unui formular
În figura 2.2 folosim o structură Block, structura ce poate fi activată și vizibilă pe
pagină în funcție de condițiile pe care le setăm noi, astfel aplicația este una dinamică. În
figura 2.2, structura precizează faptul că datele din interior vor fi vizibi le pe pagină doar de
către un utilizator care s -a autentificat, acesta având acces la formularul de „Review” în care
poate să își spună opinia despre produsul respectiv.

2.2 CSS 3 (Cascading Style Sheets)

Prescurtarea vine de la denumirea oficială a standa rdului și anume Cascading Style
Sheets (CSS) . Fișierele CSS au extensia ".css" definind stiluri pentru paginile HTML.
Stilurile externe permit schimbarea aspectului fiecărei pagini din site, prin simpla editare a
unui singur document. [20]
Fișierele CSS p ermit stilizarea în bloc a documentelor HTML cu un efort semnificativ
mai mic decât în cazul stilizării elementelor de pagină în cadrul fiecărui document HTML în
parte, prin intermediul atributelor tag -urilor.
În cadrul unui document HTML stilurile se apl ică în următoarea ordine: stilurile
implicite ale browser -ului; style sheet -urile externe; style sheet -urile interne (definite în
<head>), style sheet -urile inline acesta fiind ultimul care se execută, dacă există și le
suprascrie pe cele din fața lui.
CSS pe cont propriu poate fi util, dar stylesheet -urile devin tot mai mari, mai
complexe și mai greu de întreținut. Aici devine util un preprocesor precum Sass care permite

9 să utilizarea unor funcții care nu există încă în CSS, cum ar fi variabilele, inlantui rea, mixins,
moștenirile și alte tool -uri folositoare care fac limbajul CSS mai ușor de scalat și de folosit.
Exemplu variabile SCSS :
$font-stack: Helvetica , sans-serif;
$primary -color: #333;

body {
font: 100% $font-stack;
color: $primary -color;
}

In figura 2.3 avem un exemplu de cod din fișierul Categories.scss.
Stilul de cod SCSS difera prin cel css prin posibilitatea folosirii unor clase sau functii
care permit inlantuirea codului.

Fig. 2.4 Elemente CSS din aplicație

În figu ra 2.4 au fost folosite elemente precum “height” sau “padding -top” pentru a
ajusta modul în care arată pagina, în acest caz antetul paginii.

1
0 Prin folosirea acestor elemente putem specifica cum să fie definit designul aplicației
noastre în momentul în care este accesată de pe un telefon mobil sau de pe un laptop, astfel
site-ul este responsive.

2.3 PHP 7.2.0 (Hypertext Preprocessor )

PHP – reprezintă un limbaj de programare destinat în primul rând internetului ,
aducând dinamică unei pagini w eb [2]. Este unul din cele mai importante și utilizate limbaje
de programare web open -source și server -side. Numele PHP provine din limba engleză și este
un acronim recursiv: Php: Hype rtext Preprocessor. Câteva exemple mai cunoscute de utilizare
a acestui limbaj sunt PhpBB ( ), PhpNuke(CMS) și MediaWiki , software -ul din spatele
Wikipedia. Folosirea PHP poate fi văzută ca o alternativă gratuită la utilizarea unor limbaje
comerciale cum sunt ASP de la Microsoft , ColdFusion de la Macromedia , sau chiar JSP de la
Sun Microsystems . [10]
Popularitatea de care se bucură acesta se datorează următoarelor caracteristici:
 familiaritatea: sintaxa limbajului este foarte ușoară combinând sintaxele
unora d in cele mai populare limbaje Perl sau C ;
 simplitatea: sintaxa limbajului este destul de liberă. Nu este nevoie de
includere de biblioteci sau de direc tive de compilare, codul PHP inclus într -un
document executându -se între marcajele speciale;
 eficiența: PHP-ul se folosește de mecanisme de alocare a resurselor, foarte
necesare unui mediu multiuser, așa cum este web -ul;
 securitatea: PHP-ul pune la dispozi ția programatorului un set flexibil și
eficient de măsuri de siguranță;
 flexibilitatea: fiind apărut din necesitatea dezvoltării Web -ului, PHP a fost
modularizat pentru a ține pasul cu dezvoltarea diferitelor tehnologii. Nefiind
legat de un anumit server w eb, PHP -ul a fost integrat pentru numeroasele
existente: Apache , IIS, Zeus, server ;
 gratuitatea: este probabil cea mai importantă caracteristică a PHP -ului.
Dezvoltarea sub licență a determinat adaptarea rapidă la nevoile Web -ului,
eficientizarea și securizarea codului.

1
1 Am folosit PHP 7 deoarece este ultima versiune și vine în ajutorul developerilor cu
multe înbunătățiri. [12]
Una dintre îmbunătățirile care apar în PHP7 este definirea unui array cu ajutorul
“define()”, spre deosebire de versiunea 5 unde array -ul putea fi definit doar cu a jutorul
funcției “const()”.

define(PRODUCT, [
'title',
'price',
'specs'
]);
Secvența de cod de mai sus este folosit în momentul în care adminul face “update” sau
când adaugă un produs.
Diferența care face ca definirea unui array cu “define” s ă fie mai bună, este faptul că în
versiunea PHP5, “const” definea variabilele în momentul compilării iar “define” în momentul
rulării aplicației. De asemenea folosind “define” este o funcție “case Insensitive” și putem
avea variabile sub formă de orice exp resie, spre deosebire de “const” care acceptă doar
cuvinte complete și este o funcție “case sensitive”.
foreach ($product as $pK => $pV)
{
define ('PRODUCT_'.$pK, $pV['image']);
}
O altă noutate pe care o aduce PHP 7 este guparea claselor, variabilelor sa u funcțiilor care
sunt importate din același namespace cu ajutorul “use”. [13]

Fig. 2.5 Namespace fi șiere DotKernel
În figura 2.5 încărcăm toate namespace -urile în Index pentru a le folosi pe tot parcursul
aplicației.
use function admin_ \{login, authoriz e, logout};
use const admin_\{registerType, platformId };

1
2
2.4 MySQL 8.0

MySQL este unul dintre cele mai folosite sisteme de gestiune a bazelor de date client –
server, fiind utilizat deseori în combinație cu scripturi PHP. Spre deosebire de lucrul cu alte
baze de date, care presupune utilizarea unor biblioteci suplimentare (.dll), operarea cu baze de
date MySQL este implicit “inclusă funcțional” în motorul interpretorului PHP ( built-in). [3]
Operațiile care se desfășoară cel mai adesea într -un sistem de gesti une a bazelor de
date sunt: conectarea la server, crearea unei baze de date, afișarea bazelor de date existente,
selectarea unei baze de date cu care trebuie să se lucreze, afișarea tabelelor conținute într -o
bază de date, crearea tabelelor din interiorul unei baze de date și precizarea câmpurilor
conținute în acele tabele, inserarea datelor în tabele, inserarea, modificarea sau ștergerea
datelor din tabele, efectuarea unor interogări asupra datelor cuprinse în tabele, deconectarea
de la serverul de baze de date.
Deși este folosit foarte des împreună cu limbajul de programare PHP, cu MySQL se
pot construi aplicații în orice limbaj major. Există multe scheme API disponibile pentru
MySQL ce permit scrierea aplicațiilor în numeroase limbaje de programare pentru accesarea
bazelor de date MySQL, cum are fi: C, C++, C#, Java, Perl, PHP, Python, FreeBasic, etc.,
fiecare dintre acestea folosind un tip specific API [19]. O interfață de tip ODBC denumită
MyODBC permite altor limbaje de programare ce folosesc această in terfață, să interacționeze
cu bazele de date MySQL cum ar fi ASP sau Visual Basic. În sprijinul acestor limbaje de
programare, unele companii produc componente de tip COM/COM+ sau .NET (pentru
Windows) prin intermediul cărora respetivele limbaje să poată f olosi acest SGBD mult mai
ușor decât prin intermediul sistemului ODBC. [18]
Secventa de cod de jos exemplifică trei dintre funcțiile importante folosite la care
utilizatorul are acces atunci când accesează coșul de cumpărături.
1. Update pe baza de date
public function update($post=array(), $userId=0)
{
$data = array('quantity' => $post['quantity']);
$affectedRows = $this ->db->update('cartProduct', $data,
'cartId = ' . $cartId . ' AND productId = ' . $post['productId']);

return $affectedRows;

1
3 }
În exem plul de mai sus se face upda te la coșul de cumpărături al unui utilizator atunci
când acesta dorește să modifice numărul de exemplare pe care le dorește de la un
singur produs.

2. Inserarea în baza de date: [6]
public function insertIntoCart($cartId, $productData)
{
$dataToBeAddedToCa rt = array('cartId'=>$cartId,
'productId'=>$productData['id'],
'quantity'=>$productData['quantity'],

'productPrice'=>$productData['price'],
);
$this->db->insert('cartProduct', $dataToBeAddedToCart );
}
În exemplul de mai sus avem inse rarea produselor pe care un utilizator le dorește
salvate în coșul de cumpărături.

3. Ștergerea din baza de date: [4]
public function deleteProduct($id)
{
$this->db->delete('microRecruitingCategoryProduct', 'id = '
. $id);
}
În exemplul de mai sus avem ștergere a unui produs pe care o poate face adminul.

2.5 JavaScript ECMAScript 6

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

1
4 Motoarele JavaScript urmeaza toate o versiune standard de cod, ECMAScript 6,
cunoscut si ca ECMAScript 2015 sau ES6 si este ultima versiune a standardului ECMAScript.
Beneficii ale ES6 reprezinta tipul de variabile let si const care apar ca o solu tie mai
rapida la initializarea variabilelor, let fiind un tip de variabile care are ca scop modificarea
intrun block si care nu poate fi accesat din afara blocului, iar const un tip de variabile care
primesc un pointer in memorie si au ca scop pastrarea v alorii initiale . [11]
Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Acesta
este introdusă în cadrul paginilor web și contribuie la responsivitatea paginii, la realizarea
unei pagini care interacționează cu utilizatorul.
Browserele rețin în memor ie o reprezentare a unei pagini web sub forma unui arbore
de obiecte și pun la dispoziție aceste obiecte script -urilor JavaScript, care le pot citi și
manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM. [5] Există
un standart W3C p entru DOM -uri pe care trebuie să îl pună la dispoziție un browser, ceea ce
oferă premiza scrierii de script -uri portabile, care să funcționeze pe toate browserele.
La realizarea acestei aplicații am folosit JavaScript pentru a introduce anumite
elemente în cadrul paginilor web.

$(document).ready(function(){
$('.cartUpdate').on('click', function(event){
event.preventDefault();
var productId = $(this).data("cartProductId");
var quantity = $('#quantity'+productId).val();
$.post(siteUrl + '/cart/upda te/', {'cartProductId':
productId, 'cartProductId': quantity});
window.location.reload(true);
});
});
Exemplul de mai sus este folosit la coșul de cumpărături atunci când utilizatorul
dorește să modifice cantitatea pe care o dorește la un anumit produs. Variabilele “productId”
și “quantity” sunt trimise către controllerul “cart” la funcția “update” care re alizează inserarea
în baza de date a noilor informații oferite de către utilizator.
Am ales să folosesc JS în cadrul acestui update pentru rapiditatea cu care se execută
funcția și pentru a nu fi nevoit să redirecteze userul la o alta pagină.

1
5 2.6 DotKernel 1

DotKernel este un Framework PHP, construit cu ajutorul tehnologiei de vârf de la
Zend Framework (ZF) și bazat pe cei șase ani de experiență în crearea de pagini și servicii
web, a celor din echipa Dotboost.
Dotkernel folosește o structură ierarhică de Model -View -Controller (MVC) mai
simplificată dar în același timp beneficiază de toate opțiunile. Este ușor de învățat de către
programatorii începători și intermediari. [24]
DotKernel nu este un framework de sine stătător, el folosește librăriile
ZendFram ework care sunt părți componente și pe care le accesează direct și elimină
complexitatea ZF abordând altfel modul în care cererile sunt manipulate. Fiind puternic
integrat împreună cu Zend Framework, DotKernel este considerat un Framework PHP folosit
la ni vel comercial și poate fi folosit cu ușurință ca o unealtă de lucru rapidă, având deja
implementate modulele de frontend, backend (admin), și rss.
Modulul frontend vine cu câteva pagini statice gata făcute și pagini de
înregistrare/logare/editare useri, iar modulul backend sau admin vine cu funcții gata
implementate pentru controlul useri -lor și a adminilor, precum și un dashboard. Numele de
DotKernel s -a format prin combinarea cuvântului Dot, care se regăsește și în numele
companiei mamă și cuvântul Kernel care în domeniul IT se referă la nucleul oricărei aplicații.

Beneficiile pe care le aduce DotKernel: creșterea productivității, a performanțelor ,
posibilități de testare mult mai ridicate și o calitate mai ridicată a codului scris , securitate
intrinsecă de nivel înalt cu ajutorul componentelor Zend Framework (ZF), ușor de învățat de
către programatorii începători și intermediari, posibilitatea de a te familiariza cu
complexitatea ZF.

Pentru reducerea timpul ui de producere a aplicațiilor de marketing online și reducerea
cheltuielilor suferite de clienții, DotKernel a fost lansat în cadrul Open Source License (OSL
3.0)
Structura HMVC HMVC este un un termen ce vine de la Hierarhical Model View
Controller. Stru ctura DotKernel este bazată tocmai pe HMVC. Când definești structura
DotKernel folosește termeni de Module și Dots.

1
6

Fig 2.6 Structura HMVC

Structura HMVC DotKernel este formată din DOTS și Module. Modulul este primul
și cel mai mare nivel al arhite cturii fiind format din mai multe Dots.
Dots -urile, după cum se poate observa în imaginea de mai sus, sunt formate din trei
elemente: Action Controller, Model și View.

Fig 2.7 Ordine de executie MVC

In cazul platformei DotKernel un rol important îl are IndexController. După cum am
precizat, fiecare Dots e format din mai multe controllere, însă fiecare Dots e nevoit să conțină
cel puțin un controller, IndexController. Acesta are rol de a guverna toate celelalte controlere
și a facilita comunicarea și http request -urile primite de la modul.

Structura DotKernel:

Configs: În acest folder se stochează acele fișiere ce configurează un
ActionController.
Controllers: După cum reiese din nume, aici este locul unde sunt stocate clasele
controler ale unu i modul.
DotKernel: În acest fișier se stochează fișiere cu clasele View și Model ale unui
modul.

1
7 Externals: Acest folder este destinat sistemelor și altor aplicați externe celor
DotKernel ce se doresc a fi implementate în cadrul aplicațiilor Web.
Library: DotKernel oferă anumite facilități și clase ce le pune la dispoziția developer –
ului pentru ai ușura munca. În acest folder sunt stocate toate clasele disponibile.
Templates: După cum pune numele folder -ului. Aici sunt stocate toate fișierele. TPL
ce sunt implementate de către clasele View ale Dots -urilor.
Fișierul application.ini este fișierul ce conține date importante de configurare a
aplicației, cum ar fi stagiul în care se află aplicația (staging, production, development), URL –
ul website -ului curent, informațiile de conectare la baza de date, setări ale mediului PHP,
resource.xml este un fișier ce conține o listă a tuturor claselor Controller din aplicație
structurate în funcție de Modul, browser.xml este un fișier ce conține lista de browsere pe care
DotKernel le poate detecta, os.xml este un fișier ce conține lista de sisteme de operare pe care
DotKernel le poate detecta prin UserAgent iar Admin/menu.xml este fișierul de configurare a
meniului accesibil în pagina de Admin a aplicației.

2.7 jQuery 3

jQuery este o librărie Javascript. Librăria permite, prin multitudinea de funcții,
execuția, controlul, modificarea codului html, scriind mai simplu și mai puțin cod javascript.
jQuery are o documentație bine elaborată, bine structurată și ușor d e înțeles, așa încât
să se poată introduce repede cod pe pagina de web. În plus, are o promovare foarte mare, unde
se pot găsi tutoriale, cod gata făcut, plugin -uri, la tot pasul.
Jquery are o serie de avantaje: dimensiune redusă – aproximativ 20KB (în for ma
comprimată), rapid, ușor de folosit; compatibil cu orice browser; îmbunătățește vizibil
numărul de linii de cod scrise datorită selectorilor și mecanismelor de manipulare a arborelui
DOM; volumul mare de articole și tutoriale care au fost scrise pentru această librărie; ușurința
cu care AJAX poate fi folosit și suportul pentru JSON; extensibilitatea – avantajul jQuery UI
față de alte extensii este că dezvoltarea și testarea acestor componente se face în paralel cu
dezvoltarea bibliotecii principale, mini mizând riscul de incompatibilitate; librăria este

1
8 utilizată de companii și proiecte internaționale importante cum ar fi: Google, WordPress,
Mozilla, Dell, Wikipedia. [22]
Secvența de cod afișată mai jos este folosită pentru a nu face refresh la pagină atu nci
când utilizatorul completează ceva ce are efect imediat sau unde vrem să ajutam utilizatorul
cu exemple.
// completam un input cu primul exemplu care potrivit (care se
presupune a fi cel potrivit)
// q: cea ce utilizatorul introduce
// sValue: prima va loare care se potrivește
function autoFill(q, sValue){
// completam automat field -ul cu cea mai bună opțiune atât
timp cât utilizatorul nu a completat el deja
// dacă utilizatorul a apăsat backspace nu completam
if( options.autoFill &&
(lastWord($in put.val()).toLowerCase() == q.toLowerCase()) &&
lastKeyPressCode != KEY.BACKSPACE ) {
// completam valoarea
$input.val($input.val() +
sValue.substring(lastWord(previousValue).length));
// selectăm porțiunea din valoare pe care utilizatorul
nu a tastat-o încă, iar dacă mai introduce caractere ștergem următorul
$(input).selection(previousValue.length,
previousValue.length + sValue.length);
}
};

1
9 Pentru folosirea jQuery este de preferat să se descarce scriptul și să fie amplasat pe
server pent ru a evita anumite complicații în cazul în care nu funcționează internetul sau
pagina de pe care se încarcă librăria dispare sau nu funcționează.
Includerea unui fișier jQuery într -un proiect bazat pe DotKernel:
<script src="{SITE_URL}/externals/jquery/jq uery.min.js"></script>
{SITE_URL} este setat în fișierul application.ini din cadrul DotKernel și reprezită
locația site -ului pe servar sau local.

2.8 Alte tehnologii software utilizate

În realizarea aplicației am avut nevoie de PhpMyAdmin și serverul Apac he, acestea
regăsinduse în aplicația XAMP.

2.8.1 XAMPP

Fig. 2.8 Interfață XAMPP

XAMP este un pachet de programe free software, open source și cross -platform web
server, care constă în Appache HTTP Server, MYSQL database și interpretoare pentru
scripturile scrise în limbajele de programare PHP și Pearl. [15]

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

2.8.2 SUBLIME TEXT 3

Sublime Text 2 este un editor de text și de cod sursă cu o interfață pentru realizarea de
aplicații realizată în Python.
Funcționalitatea lui poate fi extinsă cu ajutorul Plugin -urilor, majoritatea pachetelor
fiind gratuite, dezvoltate și întreținute de că tre comunitate.
Acest editor funcționează pe o scară largă de sisteme de operare: Linux, Mac OS,
Microsoft Windows pe 32 sau 64 de biți. Este foarte rapid, are funcție care odata selectată ne
ajută foarte mult în scrierea codului, completând tag -urile de c are avem nevoie. La fel ca
editorul de mai sus, acesta evidențiază sintaxa codului sursă pe o gamă largă de limbaje de
programare: C, C++, C#, CSS, HTML, JAVA, JavaScript, PHP. [16]

2
1
3.Proiectarea și implementarea aplicației

Datorită frameworkului BootS trap, aplicația este una responsive, putând fi accesată
atât de pe calculator cât și de pe tabletă sau telefon.

3.1Arhitectura aplica ției

Siteul este organizat sub formă a două moduri și anume:
 Utilizator – aici îi încadrăm pe clienții și vizitator ii site -ului. La rândul ei,
această categorie se împarte în doua subcategorii:
o Utilizator neînregistrat (nivelul 0) – poate vizualiza produsele, opiniile
celorlalți clienți, dar nu poate cumpăra.
o Utilizator înregistrat (nivelul 1) – poate vizualiza și modi fica cantitatea
de produse pe care dorește să o achiziționeze, poate adăuga opinii, poate
realiza comanda.
 Administrator (nivelul 2) – are acces la baza de date, acolo unde poate adăuga
sau șterge produse, modifica prețuri și poate șterge anumite opinii ca re conțin
înjurii (dacă e cazul), are de asemenea acces la fișiere CSV cu datele fiecărui
USER sau Produs.

2
2
Schema UML a aplicației:
Fig. 3.1 Schema UML

În figura 3.1 este reprezentată schema originală de la care am început dezvoltarea
aplicați ei precum și posibilitățile de accesare a fiecărui Controller în parte.

IndexController este creerul aplicației, prin el trecem de fiecare dată când accesam o
pagină sau o acțiune a unui controller.

Diagrama bazei de date utilizate îmreuna cu tabelele ș i legăturile dintre ele este
prezentată în figura 3.2 .
Baza de date prezentată în figura 3.2 conține tabelele:
 TaxRate – tipul monedei folosite de client
 Product – lista cu produsele
 ProductImage – imaginile unui produs
 Manufacturer – producatorul unui anu mit set de produse
 ProductCategory – categoriile de produse
 Customer – clientul
 Basket – cosul de cumparaturi
 Order – o lista cu toate cumparaturile

2
3  Adress – lista de date despre client

Fig. 3.2 Diagrama bazei de date

2
4 3.2 Structura aplicației

Aplic ația este alcătuită din două părți esențiale, cea de utilizator și cea de
admin.
Conținutul paginii, diferă de la o pagină la alta în funcție de Controllerul apelat
și funcția care se execută, astfel putem avea pe pagina principală toate produsele din
maga zin, figura 3. 9, sau putem avea pe pagina de înregistrare un formular cu întrebări
, figura 3. 5.

UTILIZATOR

Începând de la pagina principală un utilizator poate accesa mai multe opțiuni:
O varietate de categorii de produse din meniu

Fig. 3.3 Me niu Categorii

Optiunile userului pentru contul precum și optiunea de Moneda de plata sunt afisate pe
un meniu în Partea de sus a pagini, figura 3.4

Fig. 3.4 Meniu Principal

2
5 Contul userului dacă acesta este logat, în caz contrar acesta va pri mii optiunea de
Inregistrare sau logare pe pagina de user account, figura 3.5.
Fig. 3.5 User Account nelogat

Zona De Wish List reprezintă toate produsele pe care userul sau viitorul user ar dorii
sa le salveze și posibil sa le achizitioneze mai târz iu. Acestea sunt salvate pe un cookie în
broserul userului, figura 3.6.
Fig. 3.6 Wish List

2
6 Shopping Cart -ul reprezintă toate produsele pe care userul a ales sa le cumpere și care
pot fii confirmate, figura 3.7.
Fig. 3.7 Shopping Cart

Produs ele odată alese pot fi confirmate ca și plata în pagina de checkout, figura 3.8.
Fig. 3.8 Checkout

2
7 Produsele pot fii vizualizate atât pe pagina principala cât și pe pagina unei categorii,
figura 3.9 sau pe pagina proprie a unui produs, unde avem și detaliile acestuia, figura 3.10

Fig. 3.9 Produse din categoria Smartphone

Fig. 3.10 Detalii Produs

2
8 Optiunea de Cautare este setata atât pe numele produselor cât și pe descrierea acestora,
și poate fii găsita în partea de sus a paginii, sub m eniul principal, figura 4.1.

Fig. 3.11 Search

Odată aflati pe o categorie cu produse, avem și optinea de a filtra aceste produse, sau
de a schimba modul de display pe care îl are pagina, figura 3.12 .

Fig. 3 .12 Display și Filtre

Subsolul pag inii contine date despre firma cat sii informatii referitoare la user si
termeni si conditii pentru utilizarea produsului.

Formularul de înregistrare conține o serie de întrebări la care utilizatorul trebuie să
răspundă pentru a optimiza procesul de cump arare și de transport către acesta, figura 3 .13.

2
9
Fig. 3 .13 Account Registration

În conformitate cu noile legi GDPR, avem introdusa și o zona obligatorie de
confirmare a termenilor și conditiilor de utilizare a pagini care trebuie acceptata de cătr e user
pentru a putea crea co ntul, figura 3 .14 și figura 3 .15.

3
0 Fig. 3 .14 Privacy Policy
Fig. 3 .15 Privacy Policy eroare

Finalizarea înregistrării se face în momentul în care s -a completat întreg chestionarul
din figura 3 .16.

Fig. 3 .16 Co nt Creat cu success

Dupa autentificare utilizatorul are acces complet asupra produselor și asupra coșului de
cumpărături.

Pentru a finaliza comanda, utilizatorul mai trebuie să completeze datele pentru facturare
precum: Cardul, Numele Complet, Județul, Orașul, Strada, Data și Ora la care dorește să
primească sau să ridice coletul.

3
1 În cazul în care un utilizator are nelămuriri legate de transportul coletului sau orice alt
ceva, acesta poate contacta echipa magazinului p rin forumul de Contact, figura 3 .17.

Fig. 3 .17 Formularul de contact

In cazul unor nemultumiri legate de produsele livrate, userul are si optiunea de a
completa un formular de returnare a produsului, figura 3 .18.

3
2 Fig. 3 .18 Returnari

Pentru partea de Marketing, aplicatia contine s i o zona de Newsletter implementat cu
ajutorul aplicatiei MailChimp, la care user poate sa se aboneze pentru a primi anunturi despre
produse noi sau vi itoare oferte speciale, figura 3 .19.

Fig. 3 .19 Subscriptie Istoricul comenzilor unui user il
gasim tot pe pagina personala a userului, figura 3.20.

3
3
Fig. 3.20 Istoric Comenzi

Aplicatia responsabila pentru optiunea de newsletter este API -ul de MailChimp.

MailChimp este un serviciu simplu și rapid de creare și trimitere newsletter , care nu
necesită instalarea a fel și fel de programme.
Versiunea de bază este gratuită și ne oferă posibilitatea să trimitem lunar, până la
12.000 de mail -uri, unui numar de 2.000 de useri diferiți.
Facilitează împărțirea listei de contacte în grupuri distincte, î n funcție de exigențele
avute (liste de furnizori, de clienți, de colaboratori).
Permite importul unei liste de contacte de care dispunem deja, dar și exportul, urmat
de înscrierea lor la serviciul de creare și trimitere newsletter.
Permite amânarea sau pr ogramarea expedierii fiecărui newsletter la o anumită dată și
oră.
Acest program este foarte util pentru: dezvoltatori web, dezvoltatori ai aplicațiilor
desktop ș i manageri deoarece se pot vizualiza mesajele înainte de a fi trimise clienților sau
colegilo r, figura 3 .21.

3
4

Fig. 3 .21 Mailchimp

4.Concluzii

Aplicația implementata este una care vine în ajutorul deținătorului de magazine prin
sistemul de stocare a datelor, astfel adminul poate avea acces la toate acțiunile unui utilizator.
Sistemul de tra cking implementat ajută deținătorul pe partea de marketing prin
multitudinea de opțiune pe care le are. Sistemul a fost creat să fie dinamic astfel ca adminul
poate crea un număr mare de id -uri unice, limita în baza de date fiind „int(11)”.

Folosind acest sistem putem face reclamă pe platforme precum cea de la GoogleAdwords
sau Faceboook, noi oferind doar linkul aplicației, id -ul unic și chieile care le dorim urmate de
variabile exacte primite de la platforme, iar platformele vor completa cheile respective cu
valorile lor proprii pentru tracking înlocuind acele variabile
Aplicația este una responsive creată cu ajutorul framework -ului Bootstrap și folosind o
tema de start astfel încât poate fi accesată de pe mai multe tipuri de dispozitive și descoperită
pe platforma de cautare Google.com.
Adminul poate să vizualizeze anumite detalii despre clienți.
Posibile implementări viitoare: o hartă virtuală cu locațiile tuturor magazinelor, crearea
unui blog unde cumpărătorii și adminii să discute despre produse, un t racking în timp real
despre livrarea produselor și locația lor, posibilitatea de a cumpăra prin mai multe metode,

3
5 posibilitatea de a selecta țara în care se afla utilizatorul, sistem de comandă vocală pentru
persoanele cu dizabilități, implementarea unor galerii pentru publ icitate, un sistem de voucere,
creare de campanii publicitare, metoda de plată cu cardul , securitate sporită , ciptarea
parolelor și mai multe metode de curierat.

3
6 Bibliografie

[1]Aplicatii HTML , Alina -Florentina Ciltan , editura Else , 2016 – consultat în
22.12.2017

[2]The Joy of PHP Programming: A Beginner’s Guide ( Alan Forbes ) , 2015 – consultat
în 06.01 .2018

[3]Baze de Date relaționale. Teorie și Aplicații in Visual FoxPro, Cornelia Gyorodi, R.
Gyorodi, G. Pecherle, Editura Mediamira , 2008 – consultat în 10.01.2018

[4]Tratat de baze de date, vol. 2 , (Ion Lungu (coordonator), Anca Andreescu, Adela Bara,
Anda Belciu, Constanta Bodea, Iuliana B otha, Vlad Diaconita, Alexandra Florea, Cornelia
Gyorodi) ,2015 – consultat în 12.01.2018

[5]JavaScript , Alina -Flore ntina Ciltan , editura Else , 2016 – consultat în 20 .02.2018

[6]Curs Baze de Date 1 , Baze de date 2 – Cornelia Gyorodi – consultat în 14 .01.2018

[7]Curs Proiectarea Interfețelor Utilizator – Gianina Gabor – consultat în 03.03 .2018

[8]Avantajele și de zavantajele unui magazin online,
http://mybusiness.md/ro/categories/item/627 -avantajele -%C5%9Fi -dezavantajele -unui-
magazin -online – consultat în 08.03.2018

[9]HTML – http://www.scrigroup.com/calculatoare/calculatoare/PROIECT –
PCcomponents -Magazin -o51711.php – consultat în 11.03.2018

[10]PHP – http://ro.wikipedia.org/wiki/PHP – consultat în 14.03.2018

[11]Javascript – http://proiectul.wordpress.com/ – consultat în 20 .03.2018

[12]PHP – http://www.scribd.com/doc/27660532/McCarty -Bill-PHP-4 – consultat în
14.03.2018

3
7
[13]PHP – http://www.php.net – consultat în 14.03.2018

[14]Slideshow – http://www.magictoolbox.com/magiczoomplus/examples/ – consultat în
11.03.2018

[15]XAMPP – https://ro.wikipedia.org/wiki/XAMPP – consultat în 16.04 .2018

[16]Sublime Text 2 – http://en.wikipedia.org/wiki/Sublime_Text – consultat în 11.03.2018

[17]HTML – https://ro.wikipedia.org/wiki/HyperText_Markup_Language – consultat în
11.03.2018

[18]MySQL – http://profs.info.uaic.ro/~busaco/teach/courses/net/docs/mysql -ro.pdf –
consultat la 02.04.2018

[19]MySQL, http://www.robotics.ucv.ro/flexform/craiova_cursuri/C2_1/MySQL/L1.pdf –
consultat în 05.04.2018

[20]CSS/CSS3 – https://ro.wikipedia.org/wiki/Cascading_Style_Sheets – consultat în
11.03.2018

[21]Js – https://ro.wikipedia.org/wiki/JavaScript – consultat în 11.03.2018

[22]jQuery – https://ro.wikipedia.org/wiki/JQuery – consultat în 11.03.2018

[23]MailChimp – http://developer.mailchimp.com/documentation/mailchimp/guides/get –
started -with-mailchimp -api-3/ – consultat în 13.03.2018

[24]DotKernel – https://www.dotkernel.com/docs/ – consultat în 23.05.2018

3
8

DECLARAȚIE DE AUTENTICITATE A
LUCRĂRII DE FINALIZARE A STUDIILOR

Titlul lucrării

Implementare aplicație web online „All4Tech”

Autorul lucrării

Țica Alexandru -Daniel

Lucrarea de finalizare a studiilor este elaborată în vederea susținerii
examenului de finalizare a studiilor organizat de către Facultatea Inginerie
Electrică și Tehnologia Informației din cadrul Universi tății din Oradea, sesiunea
februarie a anului universitar 2018 -2019 .
Prin p rezenta, subsemnatul Țica Alexandru -Daniel , CNP 1950903055058 ,
declar pe proprie răspundere că această lucrare a fost scrisă de către mine, fără
nici un ajutor neautorizat și că nici o parte a lucrării nu conține aplicații sau
studii de caz publicate de al ți autori.
Declar, de asemenea, că în lucrare nu există idei, tabele, grafice, hărți sau
alte surse folosite fără respectarea legii române și a convențiilor internaționale
privind drepturile de autor.

Oradea,
20.07.2018 Semnătura