Licentamihaicraciun [622425]

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
Conf. Dr. Ing. OVIDIU CONSTANTIN NOVAC

ABSOLVENT: [anonimizat]
2020

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

IMPLEMENTAREA UNEI APLICAȚII ONLINE
PENTRU O FIRMĂ DE CATERING

COORDONATOR ȘTIINȚIFIC:
Conf. Dr. Ing. OVIDIU CONSTANTIN NOVAC
ABSOLVENT: [anonimizat]
2020

3
Cuprins

CAPITOLUL I. Introducere ………………………….. ………………………….. ………………………….. ……….. 4
CAPITOLUL II. Tehnologii folosite ………………………….. ………………………….. ………………………… 5
II.1. Java ………………………….. ………………………….. ………………………….. …………….. 5
II.2. TypeScript ………………………….. ………………………….. ………………………….. ….. 7
II.3. HTML ………………………….. ………………………….. ………………………….. ………… 9
II.4. CSS ………………………….. ………………………….. ………………………….. ………… …11
II.5. JHipster ………………………….. ………………………….. ………………………….. …… .16
II.6. Angular ………………………….. ………………………….. ………………………….. …….. 17
II.7. Spring Boot ………………………….. ………………………….. ………………………….. . 19
II.8. Hibernate ………………………….. ………………………….. ………………………….. ….. 22
CAPITOLUL III. Realizarea aplicației ………………………….. ………………………….. ………………….. 27
III.1. Structura aplicației ………………………….. ………………………….. ……………… 27
III.2. Prezentarea aplica ției. Secțiunea clientului ………………………….. …….. 30
III.3. Prezentarea aplica ției. Secțiunea de administrare ………………………. 43
CAPITOLUL IV. Concluzii ………………………….. ………………………….. ………………………….. ……….. 49
BIBLIOGRAFIE ………………………….. ………………………….. ………………………….. ………………………. 50

4

CAPITOLUL I
Introducere

Tema lucrării este realizarea unei aplicații online pentru o firmă de catering. Scopul lucrării
este crearea unei aplicații utile și intuitive pentru a putea comanda mâncare. În această idee am
decis ca secțiunea cu produse să fie o singură pagină cu un me niu simplu dar care să se actualizeze
în funcție de categoria de produse in care navighează utilizatorul existând evident si posibilitatea
de a naviga direct din meniu la categoria de produse dorită. Lansarea comenzii este tot în acest
spirit la un click distanță, fapt pentru care utilizatorul și în același timp clientul firmei de catering
să aibă o experiență cat mai bună și să revină fără rețineri și în altă zi să facă alte comenzi.
Aplicația are s i o parte de administrare pentru a ușura munca firmei de catering în
procesarea comenzilor si gestionarea produselor, ofertelor si a clienților.
Am ales un set de tehnologii actuale si puternice pe partea de server din ecosistemul Java:
Spring, Spring Boo t si unele module Spring(Data, WebMVC), pe partea de client: Angular, CSS,
HTML, Bootstrap și toate împreună orchestrate de JHipster. Am ales toate aceste tehnologii care
sunt și actuale și mature pentru a căpăta experiență în primul rând dar și pentru a p utea la orice oră
să lansez în producție o variantă mai avansată a acestei aplicații.

5
CAPITOLUL II
Tehnologii folosite

II.1 Java
Limbajul de programare Java este un limbaj popular de uz general, folosit de peste 3 miliarde de
sisteme. Limbajul de programare Java a fost dezvoltat de către JavaSoft, o companie mică din
cadrul firmei Sun Microsystems [1]. Caracteristicile principale ale limbajului de programare Java
sunt:
• Independent de platformă
Java a fost conceput ca un limbaj care sa ruleze pe orice platformă, fără a necesita nici o
adaptare. Pentru a obține acest lucru, clasele Java sunt transformate în cod ma șină, care este
executat într -o mașină virtuală(JVM). Mașinile virtuale se comportă la fel, indiferent de
sistemul pe care luc rează, astfel putându -se garanta că același cod se executa la fel si pe o
platformă si pe alta.
• Orientat pe obiecte
Programarea orientată pe obiect (Programare Orientată Obiectual) este unul din cei mai
importanți pași făcuți în evoluția limbajelor de pro gramare spre o mai puternică abstractizare
în implementarea programelor. Ea a apărut din necesitatea exprimării problemei într -un mod
mai simplu, pentru a putea fi înțeleasă de cât mai mulți programatori. Astfel unitățile care
alcătuiesc un program se apro pie mai mult de modul nostru de a gândi decât modul de lucru al
calculatorului. Până la apariția programării orientate pe obiect, programele erau implementate
în limbaje de programare procedurale (C, Pascal) sau în limbaje care nici măcar nu ofereau o
modalitate de grupare a instrucțiunilor în unități logice (funcții, proceduri) cum este cazul
limbajului de asamblare (asembler). —[2]
Clasele dar și obiectele se folo sesc de cele 4 concepte fundamentale, acestea fiind [3]:
Încapsulare, polimorfism, moștenire și abstractizare.
• Securitate

6
Limbajul de programare Java oferă o platformă sigură de dezvoltare si rulare a aplicațiilor.
Managementul automat al memoriei reduce r iscul de corupere si alte vulnerabilități ale
memoriei.
• Rapiditate
Deși în trecut limbajul de programare era criticat ca fiind lent, în prezent lucrurile stau cu totul
altfel, noile mașini virtuale fiind mult mai performante. Prin optimizările aduse, limbajul de
programare Java este mult mai rapid decât alte limbaje populare ca PHP sau Python, iar un cod
optimizat Java poate să se apropie ca performanță le limbajele C/C++.
• Varietate mare de librarii
Limbajul de programare are un număr mare de librării standard motiv care cântărește destul de
mult in alegerea unui limbaj de programare.

7
II.2 TypeScript
Limbajul TypeScript este o extensie a limbajului Java Script și este dezvoltat și întreținut de
compania Mircrosoft. Are toate caracteristicile limbajului JavaScript. [4]
Unele avantajele ale limbajului de programare Typescript sunt:
• Este orientat pe obiecte și se bazează pe clase. Are suport bineîn țeles pentru a realiza:
moștenire, polimorfism încapsulare.
• Se compilează. Limbajul Javascript este un limbaj interpretat, iar pentru a vedea dacă
script -ul este valid, trebuie executat. În schimb limbajul TypeScript se compilează și are
mecanisme de validare generând astfel erori de compilare.
• Verificarea statică a tipului, aceasta lucru având ca și consecință un cod mai ușor de citit
și cu mai puține erori. În plus limbajul TypeScript mai are si câteva tipuri de date, de ex:
String, Number, Boolean, Null, Array, Enum, Tuple și Generics.
TypeScr ipt te lasă să scrii cod JavaScript înmodul în care vrei să scrii.[5]
Pentru a avea o imagine de ansamblu mai bună asupra diferențelor dintre limbajul JavaScript si
limbajul TypeScript propun tabelul Tabel II.1:
JavaScript vs. TypeScript
JavaScript este un limbaj bazat pe
interpretare pentru a adăuga
interactivitate la o pagină Web. TypeScript este o extensie a limbajului Javascript
care se compilea ză în JavaScript.
Categorie de limbaj
Javascript este un limbaj de scripting. TypeScript este un limbaj de programare orientat
pe obiect.
Compilare

8
Javascript nu are nevoie de un
compilator. Rulează in browser -ul
web. TypeScript necesită un compilator TypeScript
pentru a converti într -un fișier JavaScript.
Obiect -orientate caracteristici
JavaScript nu este pur orientat spre
obiect. Este bazat pe prototipuri. Nu
are interfețe. TypeScript este un limbaj de programare orientat
pe obiecte și este bazat pe clasă. Poate utiliza clase,
moștenire, interfețe și modificatori.
Metodă de executare
JavaScript rulează pe partea clientului. TypeScript rulează atât pe partea clientului, cât și
pe partea de server.
Analiza statică
JavaScript nu are control de tip static. Tipul TypeScript are o verificare de tip static.
Modularitate
JavaScript nu permite modulele de
sprijin. Type Script poate importa fișiere și module.
Tabel II.1 JavaScript vs TypeScript[6]

9
II.3 HTML
HTML este folosit pentru realizarea de pagini web și este abrevierea pentru “HyperText Markup
Language”.
HTML este principalul limbaj al W3 pentru a crea conținut pentru oricine și să fie folosit
oriunde.[ 7]
HTML folo sește „marcaje” pentru a structura textul, imaginile și alte conținuturi pentru afișarea într -un
browser Web.[8]
Un element HTML este separat de la alt text dintr -un document prin „tag -uri”, care constau din numele
elementului înconjurat de „ <” și „ >”. Numele unui element din interiorul unui tag este insensibil la litere
mari. Adică se poate scrie cu majuscule, minuscule sau un amestec dintre ele. De exemplu,
eticheta <title> poate fi scrisă <Title> , <TITLE> sau în orice alt mod. [9]
Tag-urile se defines c între simbolurile <,> și marchează modul în care să se interpreteze conținutul
tag-urilor. Paginile HTML sunt alcătuite dintr -o mulțime de elemente a căror afi șare este definita
prin tag -uri.

Figura II.1 Structura unui element HTML
Conform figurii de mai sus, un element HTML este alcătuit din:
1. Tag de deschidere
2. Conținut
3. Tag de închidere
Tag-urile pot de asemenea să conțin ă si atribute cu ajutorul cărora se definesc caracteristicile
elementului:

10

Figura II.2 Exemplu de element HTML
Conform figurii alăturate, atributele sunt alcătuite din:
1. Un spațiu între atribut și numele elementului, sau atributul anterior.
2. Numele atributului, urmat de un semn egal.
3. Valoarea atributului intre ghil imele.
După cum am menționat mai sus, o pagină HTML este o succesiune de elemente simple sau
imbricate. Un exemplu de pagina HTML este prezentat în Fig. II.3 :

Figura II.3 Exemplu de pagină HTML

11
II.4 CSS
CSS este acronimul de la Cascading Style Sheets, este un limbaj de stilizare al documentelor
HTML , având ca scop simplificarea acestui proces.
Altfel spus, CSS este un limbaj care descrie stilul unui document HTML[ 10]
CSS gestionează aspectul paginilor web , putând controla stilul si culoarea text -ului, distanța intre
paragrafe, modul în care sunt organizate coloanele, culoarea , fundalul etc. Deși este ușor de înțeles
este o unealtă puternica pentru stilizarea documentelor HTML.
Avantajele CSS :
• Reutilizabil – Fișierele CSS odată scrise se pot refolosi in cate pagini HTML se dorește.
• Ușor de întreținut – Pentru a face o schimbare generala de stil, se schimba in fișierul CSS
stilul respectiv si toate elementele din paginile web care conțin respectivul stil vor fi
actualizate automat.
• Încărcare rapidă a paginilor – Datorită faptului că elementele HTML nu mai conțin atribute
legate de stilizare, mărimea fișierelor HTML se reduce considerabil, câștigând rapiditate în
descărcarea paginilor.
Structura regulilor CSS:
• Selector – Este un TAG HTML pentru care va fi aplicat stilul
• Proprietate – Tipul de stil CSS: culoare, fundal, font, etc.
• Valoare – Valoarea proprietății

Figura II.4 Exemplu de regulă CSS

12
Tipuri de selectori:
• Selector i de tip – Se aplică elementelor HTML de un anumit tip. În exemplul de mai jo s
regula se va aplica tuturor elementelor de tip paragraf.

Figura II.5 Selector de tip

• Selector ul universal – Folosi t pentru selectarea oricărui tip de element într-o pagină HTML .
In exemplul de mai jos regula se va aplica tuturor elementelor din document.

Figura II.6 Selector universal
• Selectori de clasă – Folosiți pentru selectarea elementelor care au o anume clasă .

În primul exemplu regula se va aplica tutu ror elementelor din clasa “className ”

Figura II.7 Selector de clasă
În al doilea exemp lu regula se va aplica tuturor elementelor de tip div, din clasa
“className”

13

Figura II.8 Selector de clasă pe un tip specific
• Selectori de ID – Se aplică tuturor elementelor care au un anumit ID .
În primul exemplu regula se va aplica tuturor elementelor cu id -ul “idName”.

Figura II.9 Selector de ID
În următorul exemplu avem o combinație de selector de id cu selector descen dent. În acest
caz regula se va aplica tuturor elementelor de tip div din interiorul unui element cu id -ul
“id”.

Figura II.10 Selector de id combinat cu selector descendent

În următorul exemplu avem o combinație de selectori de tip si id. În această situație regula
se va aplica tuturor elementelor de tip div cu id -ul “id”.

Figura II.11 Selector de id combinat cu selector de tip

14
• Selector i descendenți – Folosiți pentru selectarea tuturor elementelor care sunt descen denți
ai unui element. În exemplul următor regula va fi aplicată tuturor elementelor de tip
paragraf care sunt descendenți (chiar dacă nu direcți) ai unui element de tip div.

Figura II.12 Selector de tip descendent

• Selectori copii – Folosiți pentru selectarea tuturor elementelor care sunt copii ai unui
element . În exemplul următor regula va fi aplicată tuturor elementelor de tip paragraf care
sunt copii ai unui element de tip div.

Figura II.13 Selector de tip copil

• Selectori de tip atribut – folosiți pentru a selecta elemente după tipul/valoarea atributelor.
În figura de mai jos sunt mai multe exemple care reflectă modul in care se poate folosi acest
tip de selector:
o În primul exemplu regula se aplică tuturor paragra felor care conțin atributul “lang”
o În al 2 -lea exemplu regula se aplică tuturor paragrafelor care conțin atributul “lang”
a cărui valoare este strict “ro”.
o În al 3 -lea exemplu regula se aplică tuturor paragrafelor care conțin atributul “lang”
a cărui valoa re conține “ro”.
o În al 4 -lea exemplu regula se aplică tuturor paragrafelor care conțin atributul “lang”
care are valoarea “ro” sau începe cu valoarea “ro”.

15

Figura II.14 Selectori de tip atribut

Selectorii pot să conțină mai multe reguli de stilizare, aceste reguli fiind separate prin “;”:

Figura II.15 Exemplu de selector cu mai multe reguli
De asemenea, poți selecta mai multe tipuri de elemente și poți să le aplici un singur set de reguli.
Include mai mulți selectori separați prin virgule :[11]

Figura II.16 Grup de selectori

16

Există trei moduri de utilizare a CSS -urilor:
• Style sheet extern
o Acesta este cel mai puternic
o Se aplică atât la HTML cât și XML
o Toate elementele de sintaxă CSS pot fi utilizate
• Style sheet intern
o Se aplică numai la HTML, nu și la XML
o Toate elementele de sintaxă CSS pot fi utilizate
• Styles sheet inline
o Se aplică numai la HTML, nu și la XML
o NU toate elementele de sintaxă CSS pot fi utilizate [12]

II.5 JHipster
Pe scurt JHipster este practic un generator de cod Yeoman folosit pentru a crea aplicații Spring
Boot și Angular[13] .
Yeoman este un generator de cod generic care este capabil să genereze orice fel de aplicații [14]
Yeoman este alcătuit din:
• O unealtă de scaffolding (prin comanda yo)
• O unealtă de build(npm/Yarn, webpack)
• Un manager de pachete(npm)
JHipster furnizează instrumente pentru a gener a proiecte Java bazate pe 3 framework -uri populare
din lumea web: Bootstrap, Angular si Spring Boot [15]
Crearea aplicației
Pt. a putea folosi JHipster trebuie sa avem instalate: Java, Maven, Git, NodeJS si Yarn.
Pentru a genera un proiect trebuie creat un director care va conține proiectul și rulata comanda:
“jhipster ”. După rularea comenzii trebuie alese opțiunile legate de ce tehnologii vor sta la baza
noului proiect .

17
Această comandă generează fișierul yo -rc.json care conține alegerile făcute si care poate fi refolosit
pentru generarea unei aplicații similare.
Structura aplicației. Partea de server
• Codul java se găsește bineînțeles în directorul /src/main/java.
• Se generează și un director cu resurse statice(fișiere pentru internaționalizare, fișiere de
configur are, etc) folosite de codul java: src/main/resources
• Testele Unit și de integrare se găsesc în src/test/java
Structura aplicației. Partea de interfață utilizator
• Folder -ul principal este src/main/webapp
• Modulele Angular se găsesc în mare parte în directoru l app
• Fișierele de internaționalizare se găsesc în i18n
• Unit testele se găsesc în src/test/javascript/spec

II.6. Angular
Angular este o platformă open -source dezvoltată de Google pentru a crea aplicații bazate
pe HTML si TypeScrip t [16]
Partea vizuală este definită de componente si șabloane HTML. Cu ajutorul decoratorilor in
componente se adaugă meta -informații , de exemplu șablonul asociat. Partea vizuală se poate
modifica automat în funcție de logica si datele aplicației prin intermediul direct ivelor și a
marcajelor de legătură(binding).
Modulele
La baza aplicațiilor Angular stau modulele care furnizează contextul de compilare pentru un set
de componente care aparțin aceluiași domeniu sau care au funcționalități similare . Modulele pot
sa asocieze componentele cu serviciile pt. a forma unități funcționale.
Aplicațiile Angular sunt definite deci ca un set de module fiecare aplicație având in mod
obligatori u modulul „root” care con ține mecanismul de pornire al aplicației .

18
Modulele sunt extrem de benefice pentru arhitectura aplicației deoarece permit organizarea in
funcție de domeniu/funcționalitate și permit reutilizarea codului. [17]
Componente le
Fiecare co mponentă definește o clasă care conține datele și logica și este asociată cu un șablon
HTML care definește partea vizuală care va fi afișată.
Decoratorul @Component marchează o clasa ca fiind componentă și furnizează informații legate
de șablonul HTML si alte meta -informații.
Șabloanele combină HTML cu marcaje angular care pot modifica elementele HTML înainte de a
fi afișate.
Directivele de șabloane furniz ează logică in șabloane iar marcajele de legătură conectează datele
din aplicație si DOM -ul.
Angular are 2 moduri de a interconecta datele aplicației si DOM -ul:
• Legarea evenimentelor (Event binding) – lasă aplicația să răspundă user -ului prin
actualizarea datelor aplicației.
• Legarea proprietăților(Data binding) – îți dă posibilitatea dea a interpola valorile calculate
din datele aplicație in HTML.
Înainte de afișare, se evaluează directivele si se rezolvă legăturile în șablonul HTML pentru a
modifica elemen tele HTML și DOM -ul în concordanță cu logica si datele aplicației.
Servicii si injectarea dependințelor
Serviciile conțin logică care nu este asociată cu o componentă anume și conține logică care se
dorește a fi împărțită între mai multe componente.
Serviciile sunt marcate cu decoratorul @Injectable() care permite altor clase să injecteze această
dependință.
Rutarea

19
Modulul Router furnizează un serviciu care te lasă să specifici căi de navigare printre diferite stări
ale aplicației si iera rhii de view -uri din aplicație [18]
II.7 Spring Boot
Spring Boot este un modul Spring care furnizează caracteristici RAD(Dezvoltare Rapidă a
Aplicației) pentru framework -ul Spring [19]. Spring Boot nu generează cod și nu necesită
configurații XML.
REF: [ https://www.javatpoint.com/spring -boot-introduction ]
Caracteristici
• Creează aplicații Spring de sine stătătoare
• Conține serverele Tomcat, Jetty, Undertow încorporate(nu mai e nevoie s ă se facă deploy
la WAR)
• Furnizează dependințe “starter” pentru a simplifica configurarea de build.
• Furnizează funcții gata de utilizare cum ar fi: metrics, configurare exter nalizată.
• Nu generează cod și nici nu necesită configurație XML.
REF: https://spring.io/projects/spring -boot
Starterii
Șabloane starter conțin o colecție de dependințe necesare pentru o funcționalitate particulară. Spre
exemplu pentru crearea unei aplicații Spring WebMVC nu mai este necesară includerea tuturor
dependințelor manual , vezi Figura II.18 , este suficientă adăugarea dependinței spring -boot-starter –

20
web, vezi .

Figura II.17 Exemplu de aplicație Spring WebMVC cu Spring Boot

Figura II.18 Librăriile aduse de starter -ul web
(https://mvnrepository.com/artifact/org.springframework.boot/spring -boot-starter –
web/2.1.6.RELEASE)

Serverele încorporate
Aplicațiile Spring Boot includ implicit Tomcat ca server încorporat, dar se pot folosi si alte servere
prin excluderea celui imp licit si adăugarea celui dorit, vezi Figura II.19. Daca se dorește folosirea
serverului implicit, nu mai este nevoie specificarea lui .

21

Figura II.19 Folosirea altui server decât cel implicit
Pornirea aplicației
Crearea unui proiect cu Spring Boot este extrem de ușoară[20]. Clasa care pornește aplicația trebuie
să fie decorată cu adnotația @ Spring Boot Application. Această adnotare este echivalentă cu:
@Configuration, @EnableAutoConfiguration și @ComponentScan. Această adnotare permite
scanarea claselor, fișierelor de configurare și încărcarea acestora în contextul Spring. În exemplul
din Figura II.20 execuția aplicației se face în metoda main(), Spring Boot incărcând toate fișierele
de configurare, configurând și pornind aplicația bazându -se pe fișierul application.properties din
Figura II.21

Figura II.20 Exemplu de aplicație Spring Boot

22

Figura II.21 Configurația aplicației web

II.8 Hibernate
Hibernate este un framework ORM pentru Java[21] . ORM (Object / Relational
Mapping) este o tehnică de programare ce face posibilă accesarea și manipularea obiectelor fără ca
programatorii să fie interesați de sursa de proveniență a datelor. Motiva ția acestei tehnici este
depăși rea difere nțele de paradigmă dintre modelul orientat pe obiecte și modelul relațional.
Limbajele de programare orientate pe obiecte mențin informa țiile într-un graf interconectat de
obiecte, iar bazele de date relaționale le mențin sub formă tabelar ă. []
Stocare ob iectelor într -o bază de date relațională folosind un framework ORM, se face prin
maparea obiectelor la tabelele corespunzătoare, asocierea dintre ele fiind descrisa folosind meta –
data.
Componentele implicate în mecanismul ORM:

23

Figura II.22 Componentele implicate în mecanismul ORM
Cele două entități sunt persistate în tabelele corespunzătoare prin intermediul framework -ului
ORM.

Entitățile
Entitățile sunt clase care se mulează pe tabele din baza de date. Acestea se pot defini foarte
ușor cu ajutorul framework -ului Hibernate și cu c âteva meta informații putem realiza asocierea
dintre ele.
Pentru a crea o entitate cu ajutorul frameworku -lui Hibernate se declară o clasă cu numele
tabelei si cu ajutorul a dnotării @Entity ( Figura 1) realizam maparea dintre entitate si tabela din
bază de date.

Figura II.23 Adnotarea @Entity pentru declararea unei entități

24
În mod implicit a dnotarea @Entity mulează numele tabelei după numele clasei entitate . În
cazul în care numele tabelei nu corespunde cu numele entității, numele tabelei se poate specifica
cu ajutorul a dnotării @Table(name=”numele_tabelei_dorite”) ( Figura 2)

Figura II.24 Adnotarea @Table
Cu ajutorul a dnotării @Id se generează cheia primară entității iar generarea unui număr
unic se face cu ajutorul a dnotării @GeneratedValue [23]( Figura 3).

Figura II.25 Adnotarea pentru cheia primară si generarea unui număr unic

Din momentul în care s -a introdus numele tabelei și cheia primară se trece la declararea
câmpurilor. Pe fiecare câmp în parte se declară a dnotarea @Column ce declară astfel să fie folosit
ca și câmp. În plus se pot adăuga diferite reguli importante ce servesc pentru evitarea problemelor
din viitor. De exemplu câmpul password este foarte important să nu se lase liber în momentul
completării formularului de î nregistrare a unui nou cont. Astfel cu a dnotarea @NotNull împiedică
utilizatorul să nu poată să treacă la următoarele etape fiind obligat să adauge în câmpul “password”
o parolă aleasă de el. Prin urmare se mai poate adă uga o restricție de un minim sau max im de
caractere pentru a evita ca utilizatorii să folosească parole prea scurte.(Figura 4)

Figura II.26 Restricții pentru fiecare câmp în parte

25

Pentru datele de tip e -mail sau CNP fiind date cu caracter unic există posibilita tea ca la de
a adăuga o constrângere unique = true direct pe coloana din tabel ă declarăm astfel ca toate datele
introduse în câmpurile alese de noi sa fie unice(Figura 5). Verificarea se face automat de către
Hibernate înaintea interogării cu baza de date. Pentru ca un e -mail să fie corect trebuie să aibă
anumită formă specifică oricărei adrese de e -mail. Cu ajutorul adnot ării @Email înaintea fiecărei
înregistrare în baza de date, adnot area are rolul de a verifica adre sa de e -mail si de a permite ca
programul să execute interogarea .

Figura II.27 Constrângerea unei coloane de a fi unică

Relații intre tabele
În aplicațiile în care se folosesc baze de date se folosesc relații cu mai multe tabele.
Framework -ul Hibernate oferă o soluție pentru cele trei tipuri de relații: one -to-many, many -to-
one, many -to-many. Pentru fiecare relație s -a adăugat cate o adnot are: @On eToMany,
@ManyToOne, @ManyToMany. Generarea se face pe baza cheilor primare astfel se poate genera
o tabelă intermediară în care se introduc datele necesare(Figura 6)

Figura II.28 Crearea relațiilor între tabele

Cu ajutorul proprietății name se generează numele tabelei intermediare. Cu ajutorul
adnot ării @JoinColumn(…. se alege care sunt coloanele cu care se face legarea intre tabele.

26

Figura II.29 Declararea metodelor în memoria cache
Pentru îmbunătățirea performanței se pot adăuga zone speciale de tip cache. La momentul
invocării metodei se verifica prima data cache -ul pentru a obține o viteză de executare mult mai
mare . Pentru metodele care se doresc să se adauge in memoria cache se folosește adnotarea
@Cache( Figura II.29)

27
CAPITOLUL III
Realizarea aplicației

III.1 Structura aplicației
Din punct de vedere funcțional, a plicația este alcătuită din 2 parți:
• Partea accesibilă clienților – clienții au posibilitatea de a vizualiza produsele si ofertele, de a
comanda produsele dorite si de a -și modifica profilul.
• Partea accesibilă administratorului – administratorul restaurantului are posibilitatea de a
adăuga/modifica/șterge produse si categorii noi, de a vizualiza comenzile clienților și multe
alte operațiuni.
Din punct de vedere tehnic, struct ura parții de interfață utilizator este reflectată de Figura :

Figura III.1 Codul responsabil pentru partea de interfață utilizator

28
Partea de interfață utilizator este implementata in Angular iar directoarele din interiorul app sunt
module angular.
Partea de server este implementată in Java și cu ajutorul câtorva framework -uri populare: Spring
Boot , Hibernate, Spring WebMVC, Spring Data.

Figura III.2 Codul responsabil pentru partea de server
Avantajul folosirii JHipster este faptul că urmează un set de bune practici și generează scheletul aplicației
într-un mod foarte bine organizat. După cum se vede, codul este împărțit în funcție de tipu l de
funcționalitate. Astfel am cate un folder pentru: configurații de bean -uri Spring, entități Hibernate,
repository -uri Spring Data, servicii Spring, controlere REST.

29

Structura bazei de date și relațiile dintre entități este prezentată in Figura III.3:

Figura III.3 Relațiile dintre entitățile aplicației

30

III.2 Prezentarea aplicației. Secțiunea clientului
Secțiunea accesibilă clienților are structura din Figura

Figura III.4 Structura secțiunii pentru clienți
Autentificarea
Pentru a putea face o comandă utilizatorul este nevoit să se autentifice sau să se înregistreze
dacă nu are cont trebuie să se înregistreze( Figura )

Figura III.5 Panoul de autentificare sau înregistrare

31

Figura III.6 Panoul de autentificare

Codul sursă pentru pagina de autentificare (Figura III.7 )

Figura III.7 Codul sursă pentru pagina de autentificare

Pentru pagina de autentificare se folosește atât HTML cât și TypeScript . Fiecare parte a
paginii web este împărțită pe componente și funcții. Funcția care se ocupă verificarea datelor
introduse în formular este: login() . Formularul este format din 2 etichete : login și password, unde
utilizatorul este nevoit să introducă datel e de autentificare.
Butonul Sign in (Figura III.8) declan șează metoda login() ce apelează funcția care are codul
sursa:(Figura III.9)

32

Figura III.8 Butonul de autentificare

Figura III.9 Funcția de autentificare login()

În funcția login se apelează un serviciu (this.loginService) care verifică credențialele
introduse. Verificarea se face cu ajutorul unei apelări către partea de server printr -un apel REST
(Figura III.10 ). Prin apelarea acestei funcții se face o verificare în baza de date daca numele de
utilizator și parolă există sau coincid. Dacă datele sunt corect introduse utilizatorul va putea să facă
comenzi, în caz contrar va fi afișat un mesaj de erroare(Figura III.11 ).

Figura III.10 Apel REST pentru autentificare

33

Figura III.11 Mesaj de eroare pentru creden țialele greșite
Resetarea parolei
În cazul în care utilizatorul nu are cont sau a uitat parola are opțiunea de resetare a parolei
prin care va fi nevoit să introducă adresa de email cu care s -a înregistrat sau crearea unui cont
nou(Figura III.12 )

Figura III.12 Recuperarea contului sau înregistrarea

Interfața pentru opțiunea de resetare a parolei(Figura III.13 )

Figura III.13 Pagina pentru resetarea parolei

34
Codul sursă pentru resetarea parolei(Figura III.14 )

Figura III.14 Codul sursă pentru resetarea parolei

De asemenea se apelează pe partea de server resetarea unde se verifică daca adresa de email
există(Figura III.15 ), daca nu există se va da un mesaj de eroare în care scrie ca nu s -a găsit adresa
de mail. Dacă adresa de mail a fost g ăsită se apelează funcția de trimitere a adresei de mail și
resetarea parolei(Figura III.16 )

Figura III.15 Verificarea adresei de mail

Figura III.16 Resetarea și trimiterea adresei mail

35
Codul sursă pentru funcția de resetarea unei noi parole(Figura III.17 ). Se verifică dacă
există utilizator cu adresa respectivă de email, se verifică dacă contul este activat. În cazul în care
există utilizator care să corespundă acestor criterii se trimit e un e -mail de resetare parolă spre
această adresă.

Figura III.17 Funcția de resetarea transmiterea unei noi parole
Înregistrarea
Pentru a putea face comenzi o condiție obligatorie este înregistrarea în aplicație. Interfața
pentru înregistrarea unui nou utilizator (Figura III.18 )

Figura III.18 Interfața pentru înregistrarea unui nou u tilizator

O parte din f ormularul din template -ul Angular pentru înregistrare se poate vedea în Figura
III.19 . Pe lângă etichetele si câmpurile evidente se pot vedea si mesajele care vor fi afișate cu

36
ajutorul directivei Angular ngI f în cazul în care datele introduse nu vor fi in troduse, sau nu vor fi
introduse corect

Figura III.19 O parte din formularul de înregistrare

După ce toate datele au fost introduse corect se apelează funcția register() (Figura III.20 )

Figura III.20 Funcția de înregistrare

37

În prima fază se verifică dacă cele două parole coincid apoi funcția preia datele și apelează
o funcție dintr -un serviciu care apelează metoda de save din serviciul Angular de înregistrare
(Figura III.21), care face un apel REST care are ca efect în final înregistrarea pe partea de server a
contului.

Figura III.21 Apelarea serviciului Angular de înregistrare a contului

Interfața pentru alegerea prod uselor se face printr -un click pe imaginea de pe pagina
principală(Figura III.22 ) după care este redirecționat către o pagină cu toate produsele(Figura
III.23 ) de unde utilizatorul poate să comande produsele dorite.
Secțiunea de produse disponibile

38

Figura III.22 Pagina de start pentru utilizatori

Figura III.23 Lista cu produsele disponibile

39
Mai jos am ad ăugat o parte din template -ul Angular pentru pagina cu toate produsele
disponibile(Figura III.24 )

Figura III.24 Codul sursă pentru pagina cu produsele disponibile
Pentru partea de stilizare am folosit sistemul de grid al framework -ului Bootstrap și după cum se
vede am folosit containere, rân duri, coloane. Am folosit acest sistem pentru a-mi ușura împărțirea
produselor în pagină. Astfel, produsele vor fi împărțite pe 3 coloane, pe câte rânduri va fi nevoie.
Produsele sunt afișate în funcție de categorie, pt. acest fapt m -am folosit de directiva angular ngFor
pentru a itera peste categorii și a genera câte un container pentru fiecare categorie.
Pentru afișarea informațiilor pentru fiecare produs am folosit containere de tip card, care sunt foarte
flexibile și puternice, foarte potrivite în acest scenariu. În interiorul fiecărei categorii folosindu -mă
de ngFor am iterat peste toate elementele și le -am adăugat după cum am menționat deja în
containere de tip card.
Workflow -ul tipic folosit pentru afișarea diferitor informații este următorul : componenta
Angular apelează un serviciu Angular care la rândul lui face un apel REST la server (Figura III.25)

40

Figura III.25 Funcția pentru preluarea datelor
Angular știe automat să facă conversia de la răspunsul primit de la server la tipul de obiect a șteptat,
de exemplu la categoria de produse(Figura III.26)

Figura III.26 Fragment din clasa TypeScript pentru categoria de produse

Mai jos în Figura III.27 se poate observa funcția din serviciul Angular care obține
categoriile de servicii printr -un apel REST

Figura III.27 Apelarea unui endpoint pentru afișarea datelor
Apelul REST spre server se concretizează în executarea din controller -ul Spring WebMVC :
ProductCategoryResourc e a metodei getAllProductCategories() care apelează o metodă din
serviciul Spring pentru categoriile de produse care obține de la repository -ul SpringData pentru
categoriile de produse toate categoriile.

41
Adăugarea produselor în coș si finalizarea comenzii

Adăugarea produselor în coș se realizează prin apăsarea pe butonul de Add care verifică
produsele adăugate si numărul acestora cu ajutorul funcției addToChart și a doi parametrii(Figura
III.28 ).

Figura III.28 Adăugarea in coș a produselor

Interfața pentru finalizarea comenzii(Figura III.29 )

Figura III.29 Finalizarea comenzii

După alegerea produselor dorite, în momentul în care utilizatorul dorește să finalizeze sau să
rafineze comanda, poate face acest luc ru intrând în coșul de cumpărături.
Această interfață conține o listă cu toate produsele adăugate în coș, cantitatea pentru fiecare produs,
prețul pentru fiecare tip de produs în parte. Sub listă este afișat valoarea totală a tuturor produselor
din coș.
Finalizarea comenzii se realizează prin apăsarea butonului “Comandă ”
Template -ul pentru componenta de finalizare a comenzii(Figura III.30 )

42

Figura III.30 Template -ul pentru pagina de finalizare a comenzii

În această pagină utilizatorul are posibilitatea sa vizualizeze toate produsele c are sunt
pregătite pentru comandă și prețul acestora. Datele sunt temporar salvate până la finalizarea
comenzii și sunt preluate de asemenea din baza de date prin tr-un apel REST (Figura III.31 )

Figura III.31 Preluarea produselor din baza de date
Odată finalizată comanda se afișează un mesaj care ne confirmă finalizarea comenzii(
Figura III.32 )

43

Figura III.32 Starea comenzii
În urma acestei acțiuni utilizatorul este redirecționat spre pagina de cumpărături.

III.3 Prezentarea aplicației. Secțiunea de administrare

Figura III.35 Structura secțiunii de administrare
Istoricul comenzilor
Fiecare utilizator are accesul să vadă un istoric al tuturor comenzilor (Figura III.36 )

Figura III.36 Istoricul comenzilor
Codul sursă al paginii pentru istoricul comenzilor(Figura III.37 )

44

Figura III.37 Istoricul comenzilor – cod sursă

Fiecare comandă este salvată într -o tabelă în baza de date(Figura III.38 ) de unde se preiau
datele pentru a fi afișate. Afișarea se face cu ajutorul unui service care face un apel REST (Figura
III.39 )

Figura III.38 Produsele comandate din baza de date

45

Figura III.39 Preluarea datelor pentru pagina de istoric al comenzilor
Administrarea produselor , categoriilor și a clienților
Meniul de administrare al entităților prezente în aplicație (Figura III.40 )

Figura III.40 Funcțiile administratorului
Interfața pentru produse ale administratorului(Figura III.41 )

Figura III.41 Funcțiile administratorului pentru produse

În pagina de administrare produse administr atorul poate vizualiza/edita/șterge produse . Cu
ajutorul butonului Create a new Product acesta poate adăuga un produs nou.
Codul sursă pentru pagina de produse (Figura III.42 )

46

Figura III.42 Codul sursă – produse
Pentru afișarea tuturor produselor din baza de date se folosește funcția loadAll() ce preia
detaliile din tabela cu toate produsele(Figura III.43 )

Figura III.43 Tabela de produse
Adăugarea unui produs nou se face cu ajutorul butonului Create a new Product (Figura III.44 ).

Figura III.44 Adăugarea unui produs nou

47
Interfața pentru pagina de adăugare a unui produs nou(Figura III.45 )

Figura III.45 Interfața pentru adăugarea unui produs nou
Codul sursă pentru adăugarea unui produs nou(Figura III.46 )

Figura III.46 Codul sursă – adăugarea unui produs
REST endpoint pt. crearea unui nou produs (Figura III.47 )

Figura III.47 REST endpoint pt. crearea unui nou produs
Pentru adăugarea unor categorii se folose ște butonul Product Category (Figura III.48 )

48

Figura III.48 Adăugarea unei noi categorii

Interfața pentru adăugarea unei noi categorii(Figura III.49 )

Figura III.49 Adăugarea unei noi categorii
Administratorul este responsabil managementul produselor și al categoriilor de produse.
Astfel el poate vizualiza, modifica , șterge sau adăuga produse sau categorii de produse.

49
Capitolul IV
Concluzii

Scopul lucrării este crearea unei aplicații simple dar eficiente pentru a comanda mâncare online.
Deși există multiple posibilități de îmbunătățire consider că scopul a fost atins în special pe partea
de client.
A fost un proiect interesant si util deoarece am folosit foarte multe tehnologii, multe dintre ele
pentru prima data. Din această cauză deseori a trebuit sa opresc dezvoltarea fie pentru a căuta soluții
la problemele apărute, fie pentru a căuta soluții mai bune.
S-ar putea rafina tipurile de roluri astfel încât pe partea de administrare să fie un rol de
administrator de comenzi si un administrator tehnic. Administratorul de comenzi ar fi bine să nu
aibă acces la tot ce are în acest moment administratorul. Dacă s -ar merge pe această variantă
interfața de administrare comenzi s -ar putea simplifica semnificativ.
Ar fi utilă și o parte de facturare si o modalitate de sincronizare a celor care livrează mâncarea cu
sistemul p entru o mai mare tra nsparență a statu s-ului comenzii.
Aplicația a fost concepută să fie utilizată de pe PC, dar având în vedere incidența utilizării
telefoanelor mobile ar o îmbunătățire și chiar obligatoriu ca aplicația să poată fi folosită optim si
de pe telefonul mobil.

50
BIBLIOGRAFIE

Java
[1] https://ro.wikipedia.org/wiki/Java_(limbaj_de_programare)
[2] https://ro.wikipedia.org/wiki/Programare_orientat%C4%83_pe_obiecte
[3] http://www.r eferatele.com/referate/diverse/online16/JAVA -referatele -com.php
TypeScript
[4] https://www.tutorialsteacher.com/typescript
[5] https://www.tutorialspoint.com/typescript/index.htm
[6] https://ro.sawakinome.com/articles/programming/difference -between -javascript -and-
typescr ipt.html
HTML
[7] https://www.w3.org/html/
[8] https://developer.mozilla.org/ro/docs/Web/HTML
[9] https://developer.mozilla.org/ro/docs/Web/HTML
CSS
[10] https://www.w3schools.com/css/
[11] https://developer.mozilla.org/ro/docs/Learn/Getting_started_with_the_web/CSS_basics
[12] http://inf.ucv.ro/~mihaiug/courses/web/slides/Curs%204%20 -%20CSS.pdf

JHipster
[13] https://www.danvega.dev/blog/2017/04/19/what -is-jhipster/
[14] https://yeoman.io/learning/
[15] https://en.wikipedia.org/wiki/JHipster
Angular
[16] https://www.altexsoft.com/blog/engineering/the -good -and-the-bad-of-angular -development/

51
[17] https://angular.io/guide/ngmodules
[18] https://angular.io/guide/router
Spring Boot
[19] https://howtodoinjava.com/spring -boot-tutorials/
[20] https://dzone.com/articles/creating -a-spring -boot-project -with-eclipse -and-ma
Hibernate
[21] https://en.wikipedia.org/wiki/Hibernate_(fr amework)
[22] https://www.todaysoftmag.ro/articles/73/analiza -mecanismului -object -relational -mapping –
orm-cu-exemplificari -hibernate
[23] https://www.baeldung.com/hibernate -identifiers

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

Titlul lucrării IMPLEMENTAREA UNEI APLICAȚII ONLINE PENTRU O
FIRMĂ DE CATERING
Autorul lucrării CRĂCIUN IOAN MIHAI

Lucrarea de finalizare a studiilor este elaborată în vederea susținerii
examenului de finalizare a studiilor organizat de către Facultatea de Inginerie
Electrică și Tehnologi a Informației din cadrul Universității din Oradea, sesiunea
Februarie a anului universitar 2020.
Prin prezenta, subsemnatul CRĂCIUN IOAN MIHAI, CNP 1851221050071,
declar pe proprie răspundere că această lucrare a fost scrisă de către mine, fără nici
un aj utor 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țiil or internaționale privind
drepturile de autor.

Oradea,
Data Semnătura

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

TEMA Realizarea unei aplicații online pentru o firmă de catering

Lucrare de Finalizare a studiilor a studentului Crăciun Ioan Mihai
1). Tema lucrării de finalizare a studiilor Realizarea unei aplicații online pentru o firmă de
catering
2). Termenul pentru predarea lucrării 12.02.2020
3). Elemente inițiale pentru elaborarea lucrării de finalizare a studiilor

4). Conținutul lucrării de finalizare a studiilor : Introducere, T ehnologii folosite, Realizarea
aplicației, Concluzii, Bibliografie.

5).Material grafic: Diagrame, imagini din aplicație.
6). Locul de documentare pentru elaborarea lucrării: Laboratoarele Universității și sediul
firmei Fortech SRL.
7). Data emiterii tem ei 01.10.2018.

Coordonator științific
Conf. Dr. Ing. OVIDIU CONSTANTIN NOVAC