V1 Licenta Dumirascu Evelin [614913]

UNIVERSITATEA „DUNĂREA DE JOS” DIN GALAȚI
FACULTATEA DE AUTOMATICĂ, CALCULATOARE, INGINERIE
ELECTRICĂ ȘI ELECTRONICĂ

PROIECT DE DIPLOMĂ

Coordonator științific,
Ș.l. dr. mat. Viorica JÂȘCANU
Absolvent: [anonimizat] 2020

UNIVERSITATEA „DUNĂREA DE JOS” DIN GALAȚI
FACULTATEA DE AUTOMATICĂ, CALCULATOARE, INGINERIE
ELECTRICĂ ȘI ELECTRONICĂ

Str. Științei Nr. 2, cod poștal 800146, Galați, România, tel/fax: +0236 47 0 905, e -mail: [anonimizat], web: www.aciee.ugal.ro
SPECIALIZAREA: Calculatoare și Tehnologia Informației

PLATFORMĂ WEB PENTRU COMERȚ
ELECTRONIC ÎN DOMENIUL ORGANIZĂRII DE
NUNȚI

Coordonator științific,
Ș.l. dr. mat. Viorica JÂȘCANU
Absolvent: [anonimizat] 2020

UNIVERSITATEA „DUNĂREA DE JOS” DIN GALAȚI
FACULTATEA DE AUTOMATICĂ, CALCULATOARE, INGINERIE ELECTRICĂ ȘI ELECTRONICĂ

Str. Științei Nr. 2, cod poștal 800146, Galați, România, tel/fax: +0236 47 0 905, e -mail: [anonimizat], web: www.aciee.ugal.ro
1/54
Anexa 1
Nr. _____/__________________

Aprobat,
Decan

DOMNULE DECAN

Subsemnata/Subsemnatul,
_______________________________________________________________________, absolventă/absolvent a/al Facultății de Automatică, Calculatoare, Inginerie Electrică și Electronică, din cadrul Universității Dunărea de Jos din Galați, domeniul __________________________________,
specializarea (licență/master) ______________________________________
_____________________________________________________________________________________________________________, pro moția ______________, vă rog să -mi aprobați înscrierea la examenul de
licență/disertație sesiunea _________________________________________________.
Am ales proiectul de diplomă/lucrarea de disertație cu titlul
_________________________________________________ _____________________________________________________________________________________________________________sub îndrumarea
___________________________________________________________________________.
Am citit cu atenție REGULAMENTUL DE ÎNTOCMIRE A PR OIECTELOR DE DIPLOMĂ
ȘI LUCRĂRILOR DE DISERTAȚIE și l-am respectat integral.
Data: __________________________ Semnătura ____________________________

Viza îndrumătorului proiectului/coordonatorului lucrării__________________________

Viza Directorul ui de departament ce coordonează programul __________________

Media
multianuala Viză secretariat
ACIEE

UNIVERSITATEA „DUNĂREA DE JOS” DIN GALAȚI
FACULTATEA DE AUTOMATICĂ, CALCULATOARE, INGINERIE ELECTRICĂ ȘI ELECTRONICĂ

Str. Științei Nr. 2, cod poștal 800146, Galați, România, tel/fax: +0236 47 0 905, e -mail: [anonimizat], web: www.aciee.ugal.ro
2/54

Anexa 2

DECLARAȚIE

Subsemnata (ul), _________________________________________________________
absolventă/absolvent a/al Facultății de Automatică, Calculatoare, Inginerie Electrică și
Electronică, din cadrul Universității “Dunărea de Jos” din Galați, promoția
____________________, specializare
_____________________________________________________________________________________________________________, declar pe proprie răspundere că proiectul de diplomă/lucrarea de disertație cu titlul
„____________________________________________________________________________________________________
____________________________________________________________________________________________________________________”este elaborat/elaborată de mine și nu a mai fost prezentat/prezentată
niciodată la o altă facultate sau instituție de învățământ superior din țară sau străinătate.
De asemenea, declar că to ate sursele utilizate, inclusive cele de pe internet, sunt indicate
în proiect/lucrare, cu respectarea regulilor de evitare a plagiatului.
“Plagiatul: însușirea ideilor, metodelor, procedurilor, tehnologiilor, rezultatelor sau
textelor unei persoane, indi ferent de calea prin care acestea au fost obținute, prezentându –
le drept creație proprie.”
Am luat la cunoștință că prezentarea unui/unei proiect/lucrări plagiate va conduce
la anularea diplomei de licență/master.

Data: ________________ Semnătura ____________________________

UNIVERSITATEA „DUNĂREA DE JOS” DIN GALAȚI
FACULTATEA DE AUTOMATICĂ, CALCULATOARE, INGINERIE ELECTRICĂ ȘI ELECTRONICĂ

Str. Științei Nr. 2, cod poștal 800146, Galați, România, tel/fax: +0236 47 0 905, e -mail: aciee@ugal.ro, web: www.aciee.ugal.ro
3/54

Anexa 3

ACORD PRIVIND TRANSFERUL REZULTATELOR PROIECTULUI DE DIPLOMĂ/LUCRĂRII
DE DISERTAȚIE

Subsemnata (ul), _________________________________________________________,
absolventă/abso lvent a/al Facultății de Automatică, Calculatoare, Inginerie Electrică și
Electronică, din cadrul Universității “Dunărea de Jos” din Galați, promoția
_______________________, specializare
_____________________________________________________________________________________________________
________,
(NU) SUNT DE ACORD * să cedez rezultatele software și hardware – aferente proiectului
de diplomă/lucrării de disertație – în favoarea Facultății de Automatică, Calculatoare,
Inginerie Electrică și Electronică, din cadrul Universității “Dunărea de Jos” din Galați,
pentru creșterea dotării materiale a facultății și în folosul exclusiv al studenților.
Proiectul/lucrarea conține următoarele:

1) Partea hardware compusă din:
_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
_____________________________________________________________________________________________
_____________________________________________________________________________________________________________________________________
2) Partea software compusă din:
__________________________________________________________________________________________________________________________________________________________________________________________
_____________________________________________________________________________________________
_____________________________________________________________________________________________
_____________________________________________________________________________________________
________________________________________

Data: ________________ Semnătura ____________________________

Notă:
* Se taie (bifează), după caz

Rezuma t

Obiectivul principal al acestei lucrări este crearea unei aplicații web destinată
comerțului electronic în domeniul organizărilor de nunți.
Platforma are ca scop facilitarea comunicării între persoanele ce organizează nunta și
furnizorii de produse și servicii specifice acestui tip de eveniment.
Această aplicație web vine în ajutorul companiilor ce oferă produse/servicii în
acest domeniu, oferind o plajă de desfacere, dar și în ajutorul celor ce nu cunosc foarte bine ceea ce se află pe piață în momentu l organizării nunții personale, întrucât nu este
domeniul lor de expertiză.
După finalizarea aplicației s -a efecuat un studiu de piață care arată poziția
acesteia în comparație cu celelalte platforme de același tip. Deși îi lipsesc câteva opțiuni pe care c oncurența le are, compensează prin multe alte utilități care oferă o experiență
unitară și fluidă astfel detașându -se de ceilalți.

2

CUPRINS
Introducere …………………………………………………………………………………………………………………………………….. 1
Capitolul 1. Analiza problemei ……………………………………………………………………………………………………. 2
1.1 Cerințele problemei ………………………….. ………………………….. ………………………….. …………………………………………….. 2
1.2 Aplicații similare ………………………….. ………………………….. ………………………….. ………………………….. ……………………… 3
1.2.1 EpicPlan ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. … 3
1.2.2 FunPlan ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. …. 4
1.2.3 Nuntă cruntă ………………………….. ………………………….. ………………………….. ………………………….. …………………….. 5
1.2.4 Fiestador ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. .. 6
Capitolul 2. Limbaje și tehnologii folosite ………………………………………………………………………………… 7
2.1 Context ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. …………… 7
2.2 Back -end………………………….. ………………………….. ………………………….. ………………………….. ………………………….. ………… 7
2.2.1 PostgreSQL ………………………….. ………………………….. ………………………….. ………………………….. ……………………….. 7
2.2.2 .NET Framework ………………………………………………………………………………………………………………………………. 7
2.2.3 Web API în ASP.NET ………………………….. ………………………….. ………………………….. ………………………….. ………. 7
2.2.4 C# ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. ……………. 8
2.3 Front -end ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. ………. 8
2.3.1 HTML ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. ……… 9
2.3.2 SCSS (CSS cu superputeri) ………………………….. ………………………….. ………………………….. ………………………… 9
2.3.3 TypeScript ………………………….. ………………………….. ………………………….. ………………………….. …………………………. 9
2.3.4 NodeJS NPM ………………………….. ………………………….. ………………………….. ………………………….. …………………….. 9
2.3.5 Webpack Dev Server ………………………….. ………………………….. ………………………….. ………………………….. …… 10
2.3.6 Proxy ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. ……. 10
2.3.7 Angular 9 ………………………….. ………………………….. ………………………….. ………………………….. ………………………… 10
2.3.8 Bootstrap 5 ………………………….. ………………………….. ………………………….. ………………………….. …………………….. 11
2.3.9 RxJS ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. ………. 11
2.3.10 Redux ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. … 11
Capitolul 3. Descrie rea aplicației …………………………………………………………………………………………….. 12
3.1 Structura bazei de date ………………………….. ………………………….. ………………………….. ………………………….. ……….. 12
3.2 Utilizarea aplicației ………………………….. ………………………….. ………………………….. ………………………….. …………….. 13
3.2.1 Pagina introductivă ………………………….. ………………………….. ………………………….. ………………………….. ……… 13
3.2.2 Pa gina inițială a utilizatorului autentificat ………………………….. ………………………….. ……………………. 17
3.2.3 Pagina de căutare ………………………….. ………………………….. ………………………….. ………………………….. …………. 19
3.2.4 Pagina cu rezultatele căutării ………………………….. ………………………….. ………………………….. ……………….. 22
3.2.5 Pagina produsului ………………………….. ………………………….. ………………………….. ………………………….. ………… 24

3
3.2.6 Pagi na de profil a companiei ………………………….. ………………………….. ………………………….. …………………. 28
3.2.7 Profilul utilizatorului ………………………….. ………………………….. ………………………….. ………………………….. …… 31
3.2.8 Setările profilului de utilizator ………………………….. ………………………….. ………………………….. ……………… 33
3.2.9 Lista de favorite ………………………….. ………………………….. ………………………….. ………………………….. ……………. 34
3.2.10 Coșul de cumpărături ………………………….. …………………………………………………………………………………….. 35
3.2.11 Istoricul de comenzi ………………………….. ………………………….. ………………………….. ………………………….. ….. 36
3.2.12 Vreau să fiu furnizor ………………………….. ………………………….. ………………………….. ………………………….. …. 37
3.2.13 Setările companiei ………………………….. ………………………….. ………………………….. ………………………….. …….. 39
3.2.14 Adaugă produse/servicii ………………………….. ………………………………………………………………………………. 39
3.2.15 Gestionează produsele/serviciile ………………………….. ………………………….. ………………………….. ……… 40
3.2.16 Statistici ………………………….. ………………………….. ………………………….. ………………………….. ………………………… 43
Concluzii ………………………………………………………………………………………………………………………………………. 44
Bibliografie ………………………………………………………………………………………………………………………………….. 45

LISTA FIGURILOR

Fig 1 EpicPlan ……………………………………………………………………………………………………………………………….. 3
Fig 2 FunPlan ………………………………………………………………………………………………………………………………… 4
Fig 3 Nuntă cruntă ……………………………………………………………………………………………………………………….. 5
Fig 4 Fiestador ………………………………………………………………………………………………………………………………. 6
Fig 5 Exemplificar e Web Api ………………………………………………………………………………………………………. 8
Fig 6 Exemplu de npm install …………………………………………………………………………………………………… 10
Fig 7 Configurarea proxy -ului ………………………………………………………………………………………………….. 10
Fig 8 Diagrama fluxului de date in Redux ………………………………………………………………………………. 11
Fig 9 Diagrama bazei de date ……………………………………………………………………………………………………. 12
Fig 10 Pagina introductivă ………………………………………………………………………………………………………… 13
Fig 11 Bara de navigare …………………………………………………………………………………………………………….. 14
Fig 12 Imaginea introductivă …………………………………………………………………………………………………… 14
Fig 13 Secțiunea ”Despre noi” ………………………………………………………………………………………………….. 14
Fig 14 Cardul de autentificare ………………………………………………………………………………………………….. 15
Fig 15 Eroare de autentificare ………………………………………………………………………………………………….. 15
Fig 16 Cardul de înregistrare ……………………………………………………………………………………………………. 16
Fig 17 Eroare de înregistrare …………………………………………………………………………………………………… 16
Fig 18 Toast de confirmare al contului creat …………………………………………………………………………. 16
Fig 19 Bara de subsol …………………………………………………………………………………………………………………. 17
Fig 20 Pagina inițială a utilizatorului autentificat ………………………………………………………………… 17
Fig 21 Bara de navigare a utilizatorului autentificat ……………………………………………………………. 18
Fig 22 Meniul utilizatorului ………………………………………………………………………………………………………. 18
Fig 2 3 Pagina de căutare …………………………………………………………………………………………………………… 19
Fig 24 Breadcrumb …………………………………………………………………………………………………………………….. 19
Fig 25 Bara de căutare cu jetoane ……………………………………………………………………………………………. 19
Fig 26 Componenta categoriilor principale ale aplicației ……………………………………………………. 20
Fig 27 Meniul de subcategorii ………………………………………………………………………………………………….. 21
Fig 28 Pagina cu rezultate căutării ………………………………………………………………………………………….. 22

4
Fig 29 Paginația ………………………………………………………………………………………………………………………….. 23
Fig 30 Cardul produselor cu și fără reducere ………………………………………………………………………… 23
Fig 31 Pagina produsului ………………………………………………………………………………………………………….. 24
Fig 32 Pozele de prezentare în full screen …………………………………………………………………………….. 25
Fig 33 Cardul de recenzii …………………………………………………………………………………………………………… 25
Fig 34 Cardul de recenzii II ………………………………………………………………………………………………………. 26
Fig 35 Modificarea unei recenzii ……………………………………………………………………………………………… 27
Fig 36 Cardul produslui …………………………………………………………………………………………………………….. 27
Fig 37 Cardul serviciului …………………………………………………………………………………………………………… 27
Fig 38 Cardul ce indică informații despre companie ……………………………………………………………. 28
Fig 39 Pagina de profil a companiei ………………………………………………………………………………………… 28
Fig 40 Card informativ despre companie ………………………………………………………………………………. 29
Fig 41 Descrierea companiei ……………………………………………………………………………………………………. 29
Fig 42 Informații despre companie …………………………………………………………………………………………. 30
Fig 43 Lista de produse a companiei ………………………………………………………………………………………. 30
Fig 44 Profilul utilizatorului ……………………………………………………………………………………………………… 31
Fig 45 Cardul cu informațiile generale ale utilizatorului …………………………………………………….. 31
Fig 46 Meniu tabular de navigare ……………………………………………………………………………………………. 32
Fig 47 Spre setări ……………………………………………………………………………………………………………………….. 32
Fig 48 Modal de confirmare ștergere profil utilizator …………………………………………………………. 32
Fig 49 Setările profilului de utilizator …………………………………………………………………………………….. 33
Fig 50 Toast de informare …………………………………………………………………………………………………………. 33
Fig 51 Toast de informare …………………………………………………………………………………………………………. 34
Fig 52 Lista de favorite ………………………………………………………………………………………………………………. 34
Fig 53 Mesaj nici un produs în favorite ………………………………………………………………………………….. 35
Fig 54 Coșul de cumpărături …………………………………………………………………………………………………….. 35
Fig 55 Comanda efectuată cu succes ………………………………………………………………………………………. 36
Fig 56 Istoric de cumpărături …………………………………………………………………………………………………… 36
Fig 57 Modal informativ “Vreau să fiu furnizor” …………………………………………………………………… 37
Fig 58 Da, vreau să fiu furnizor ………………………………………………………………………………………………… 37
Fig 59 Contul de furnizor a fost creat ……………………………………………………………………………………… 38
Fig 60 Furnizor ……………………………………………………………………………………………………………………………. 38
Fig 61 Setările companiei ………………………………………………………………………………………………………….. 39
Fig 62 Bara de navigare între paginile furnizorului …………………………………………………………….. 39
Fig 63 Adaugă produse ……………………………………………………………………………………………………………… 40
Fig 64 Toast de confirmare a ștergerii produsului ………………………………………………………………. 40
Fig 65 Gestionează produsele/serviciile ………………………………………………………………………………… 41
Fig 66 Roata dințată pentru setări …………………………………………………………………………………………… 41
Fig 67 Modifică produs ……………………………………………………………………………………………………………… 42
Fig 68 Reducere pre ț………………………………………………………………………………………………………………….. 42
Fig 69 Pagina de statistici …………………………………………………………………………………………………………. 43

1
INTRODUCERE
Nunta este un eveniment important în viața celor doi miri, iar industria nunților
este cu siguranță foarte bine dezvoltată în România.
De multe ori cei doi miri au nevoie de ajutor în a înțelege ce oferă piața în acest
domeniu al organizării nunții, dar nu știu de unde să înceapă. Există multe reviste, bloguri,
emisiuni și site -uri care vorbesc despre furnizorii pe care este bi ne să îi alegi pentru
nuntă.
Aplicația web “Marriage Land” își dorește să vină în ajutorul celor doi, oferind o
platformă în care se găsesc furnizori pentru cele mai importante elemente pe care o nuntă
le conține. Astfel, mirii se pot orienta c u ușurință spre furnizorii funzorii ce împlinesc cel
mai bine dorințele lor, ținând cont de asemene a de bugetul planificat.

2
CAPITOLUL 1. ANALIZA PROBLEMEI
1.1 Cerințele problemei

Aplicația Web va permite pentru client:

• înregistrarea cu email și parolă
• intrarea în cont folosind email -ul și parola
• vizualizarea tuturor produselor dintr -o anumită categorie
• vizualizarea detaliilor produselor
• vizualizarea informaț tiilor despre furnizor
• căutarea produselor după cuvinte cheie
• utilizarea filtrelor de căutare și sortare
• adăugarea/elimin earea unui produs sau a unui serviciu în lista de favorite
• adăugarea/elimin earea unui produs în coș
• adăugarea/modificarea/șter egerea unei recenzii la fiecare produs
• vizualizarea datelor de contact a furnizorilor de servicii
• efectuarea unei comenzi cu produsele din coș
• vizualizarea istoricului comenzilor
• setarea informațiilor personale și informa țtiile de facturare ale profilului,
dar și imaginea de profil
• ștergerea profilului de utilizator
• deconectare
• crearea paginilor de furnizor ce prestează servicii sau comerț

Aplicația Web va permite pentru administratorul unei firme:
• setarea informațiilor companiei, cât și a imaginei de profil si de copertă.
• adăugarea de servicii sau articole
• modifi carea/ștergerea serviciilor sau articolelor
• reducerea articolelor
• vizualizarea statisticilor de vânzări
• ștergerea paginii de furnizor

3
1.2 Aplicații similare

Pentru o imagine de ansamblu mai bun ăa asupra aplicației Marriage Land a fost
efectuat un studiu de piață prin care s -au comparat opțiunile pe care aceasta le oferă și
opîțiunile pe care le oferă concurența.

1.2.1 EpicPlan

Fig 1 EpicPlan

Opțtiuni comune:

• Furnizori grupați pe categorii
• Posibilitatea de a suna furnizorul de servicii
• Logarea

Opțtiuni EpicPlan care nu se reg ăasesc îin Marriage Land :

• Blog
• Filtru pe localitate
• Facilitează organizarea evenimentului

Optiuni Marriage Land care nu se regăsesc regases îin EpicPlan :

• Posibilitatea de a fi furnizor
• Lista de favorite
• Coș de cumpărături
• Posibilitatea de a comanda direct de pe platformă
• Statistici

4
1.2.2 FunPlan

Fig 2 FunPlan

Opțtiuni comune:

• Furnizori grupați pe categorii
• Posibilitatea de a fi furnizor
• Lista de favorite
• Coș de cumpărături
• Logare
• Recenzii

Opțtiuni FunPlan care nu se regăsesc regases îin Marriage Land :

• Filtre diverse
• Ofertă rapidă
• Blog

Opțtiuni Marriage Land care nu se regăsesc regases îin FunPlan:

• Categorii legate de comerț
• Posib ilitatea de a comanda produse direct de pe platformă

5
1.2.3 Nuntă cruntă

Fig 3 Nuntă cruntă

Opțtiuni comune:

• Furnizori grupați pe categorii
• Posibilitatea de a fi furnizor
• Logare

Opțtiuni Nuntă cruntă care nu se regăsesc regases îin Marriage Land :

• Chat
• Checklist p entru nuntă
• Blog
• Recenzii pentru furnizor
• Conectarea cu rețele de socializare

Opțtiuni Marriage Land care nu se regăsesc regases îin Nuntă cruntă :

• Lista de favorite
• Coș de cumpărături
• Posibilitatea de a vedea fiecare produs separat
• Recenzii pentru produs

6
1.2.4 Fiestador

Fig 4 Fiestador

Opțtiuni comune:

• Furnizori grupați pe categorii
• Posibilitatea de a fi furnizor
• Recenzii
• Logare

Opțtiuni Fiestador care nu se regăsesc regases îin Marriage Land :

• Filtre diverse
• Ofertă rapidă
• Blog
• Recenzii pentru furnizor

Optțiuni Marriage Land care nu se regăsesc regases îin Fiestador :

• Coș de cumpărături
• Lista de favorite
• Posibilitatea de a vedea fiecare produs separat
• Recenzii pentru produs
• Nu este ex clusiv pentru Timișoara

7
CAPITOLUL 2. L IMBAJE ȘI TEHNOLOGII FOLOSITE
2.1 Context
În inginerie software, termenii front end și back end se referă la separarea
preocupărilor între stratul de prezentare (front end) și stratul de acces la date (back
end) al unei aplicații. În modelul client -server, clientul este de obicei considerat front
end și serverul este de obicei considerat back end, chiar și când unele lucrări de
prezentare sunt efectiv efectuate pe serverul însuși.
În acest proiect, am încercat să îmbin mai multe tehnologii și limbaje de
programare bine cunoscute și de actualitate. Multe dintre acestea nu au fost învățate pe parcursul celor patru ani de facultate.

2.2 Back- end
Aplicația de back -end este constituită din două părți: un server și o bază de date.
Rolul principal al acestuia este de a face management de conținut. Acesta face parte din aplicație, dar cu toate acestea nu este vizibil pentru utilizator și nu rulează niciodată pe
mașina ac estuia.
Server -ul va primi cereri HTTP din browser ce vor conține cereri de noi date sau
vor transmite datele create de utilizator înapoi în back -end. Aplicația va primi un număr
de port, și anume 44386 , pentru a putea porni.

2.2.1 PostgreSQL
PostgreSQ L, cunoscut și sub numele de Postgres, este un sistem de gestionare a
bazelor de date relaționale gratuit și open -source (RDBMS), care subliniază
extensibilitatea și conformitatea SQL. Acesta a fost inițial numit POSTGRES, referindu -se
la originile sale ca succesor al bazei de date Ingres dezvoltată la Universitatea din
California, Berkeley. În 1996, proiectul a fost redenumit la PostgreSQL pentru a reflecta
suportul pentru SQL. După o revizuire din 2007, echipa de dezvoltare a decis să păstreze numele Po stgreSQL și ca alias, Postgres. Se spune ca este cea mai avansată bază
de date relațională open -source din lume .

2.2.2 .NET Framework
.NET Framework (pronunțat ca "dot net") este un cadru software dezvoltat de
Microsoft care rulează în principal pe Microsoft Windows. Include o bibliotecă de clase
mare, numită Framework Library (FCL) și oferă interoperabilitate lingvistică (fiecare
limbă poate utiliza cod scris în alte limbi) pe mai multe limbaje de programare.
Programele scrise pentru .NET Framework se execută într -un mediu software (în
contrast cu un mediu hardware) numit Common Language Runtime (CLR). CLR este o
aplicație virtuală care oferă servicii precum securitate, gestionarea memoriei și gestionarea excepțiilor. Ca atare, codul computerului scr is cu .NET Framework se
numește „cod gestionat”. FCL și CLR constituie împreună .NET Framework.

2.2.3 Web API în ASP.NET
Web API este o interfață de programare a aplicației (API) care este utilizată
pentru a permite comunicarea sau interacțiunea cu compo nentele software unul cu

8
celălalt. ASP.NET Web API este un cadru care facilitează construirea serviciului HTTP
care ajunge la o gamă largă de clienți, inclusiv browsere și dispozitive mobile. Folosind
ASP.NET, API -ul web poate permite comunicarea prin dife rite dispozitive din aceeași
bază de date.
Web API este utilizat pentru :
• a accesa datele de serviciu din aplicațiile web, precum și în multe
aplicații mobile și alte dispozitive externe.
• a crea servicii web RESTful. REST ( Representational State Transfer )
este un stil arhitectural pentru aplicații hipermedia în rețea.
• a construi servicii web care sunt ușoare, întreținute și scalabile și care acceptă lățimea de bandă limitată.

Fig 5 Exemplificare Web Api

2.2.4 C#
C # este un limbaj de programare cu scop general, multi -paradigm ă, structurat,
cu scop lexic, imperativ, declarativ, funcțional, generic, orientat pe obiect (bazat pe
clasă) și discipline de programare orientate pe componente. A fost dezvoltat în jurul anului 2000 de Microsoft ca parte a inițiativei sale .NET și ulterior aprobat ca standard internațional de către Ecma (ECMA -334) în 2002 și ISO (ISO / IEC 23270) în 2003. C #
este unul dintre limbajele de programare proiectate pentru infrastructura limbajului
comun (CLI) .

2.3 Front -end
În ce prive șste dezvoltarea web, f ront-end-ul reprezintă practica de a converti
datele într -o interfață grafică, folosind limbaje precum HTML, CSS și JavaScript, astfel
încât utilizatorul să poată vizualiza și interacționa cu aceste date. În continuare aș dori
să fac o prezentare generală a limbajelor si tehnologiilor folosite în aplicația mea pe
partea de front -end.

9
2.3.1 HTML
HTML (Hyper Text Markup Language) este coloana vertebrală a oricărui proces
de dezvoltare a site- ului web, fără de care nu există o pagină web. Hipertext înseamnă că
textul are legături, denumite hyperlink -uri, încorporate în el. Când un utilizator face
click pe un cuvânt sau o frază care are un hyperlink, va aduce o altă pagină web. Un
“limbaj de marcare” indică faptul că textul poate fi transformat în imagini, tabele, linkuri
și alte reprezentări. Codul HTML este cel care furnizează un cadru general al aspectului
site-ului. HTML a fost dezvoltat de Tim Berners -Lee. Cea mai recentă versiune de HTML
se numește HTML 5 și a fost publicată pe 28 octombrie 2014 prin recomandarea W3.
Această versiune conține modalități noi și eficiente de manipulare a elementelor, cum ar fi fișierele video și audio.

2.3.2 SCSS (CSS cu superputeri)
CSS (Cascading Style Sheets) controlează aspectul de prezentare al site- ului și
permite site -ului nostru să aibă propriul aspect unic. Face acest lucru prin menținerea
foilor de stil care se așează deasupra altor reguli de stil și sunt declanșate pe baza altor intrări, cum ar fi dimen siunea și rezoluția ecranului dispozitivului.
Sass (Syntactically awesome style sheets) este un limbaj de script preprocesor
care este interpretat sau compilat în fișiere de stil în cascadă (CSS). SassScript este limbajul de script propriu -zis. Sass este format din două sintaxe. Sintaxa originală,
numită "sintaxa indentată", folosește o sintaxă similară cu Haml. Și cea mai nouă sintaxă,
„SCSS” (Sassy CSS), folosește formatarea blocurilor precum cea a CSS. Folosește bretele
pentru a indica blocuri de cod și punct și virgulă pentru a separa regulile dintr -un bloc.
În mod tradițional, fișierelor celor dou aă sintaxe de SASS le sunt date extensiile .sass și
respectiv .scss.

2.3.3 TypeScript
JavaScript, adesea prescurtat ca JS, este un limbaj de programare car e se
conformează specificației ECMAScript. JavaScript este un limbaj de nivel înalt, adesea compilat doar la timp și multi- paradigmă. Are sintaxa cu acolade, dactilografiere
dinamică, orientare obiect pe bază de prototip și funcții de primă clasă.
Motoare le JavaScript au fost utilizate inițial doar în browserele web, dar acum
sunt încorporate în unele servere, de obicei prin Node.js.
TypeScript este un limbaj de programare open -source dezvoltat și întreținut de
Microsoft. Este un superset sintactic stric t al limbajului JavaScript și adaugă limbajului
opțiunea de scriere statică. TypeScript este proiectat pentru dezvoltarea de aplicații mari și transcompilează JavaScript. Având în vedere că TypeScript este un superset al lui JavaScript, programele JavaScri pt existente sunt, de asemenea, programe TypeScript
valide. TypeScript poate fi utilizat pentru a dezvolta aplicații JavaScript atât pentru execuția din partea clientului, cât și din partea serverului (ca în cazul Node.js sau Deno).

2.3.4 NodeJS NPM
Nod e.js este un mediu de rulare JavaScript, open -platform, cross -platform, care
execută cod JavaScript în afara unui browser web. Node.js permite dezvoltatorilor să utilizeze JavaScript pentru a scrie instrumente de linie de comandă și pentru scripturi

10
din pa rtea serverului – rulând scripturi pe server pentru a produce conținut dinamic al
paginii web înainte ca pagina să fie trimisă în browserul utilizatorului.
NPM este un manager de pachete pentru pachetele sau modulele Node.js. Pe
www.npmjs.com găsim mii d e pachete gratuite pentru descărcare și utilizare. Un pachet
din Node.js conține toate fișierele de care avem nevoie pentru un modul. Modulele sunt
biblioteci JavaScript pe care le putem include în proiect.
Descărcarea unui pachet este foarte ușoară. Desc hideți interfața liniei de
comandă și spuneți -i NPM -ului să descarce pachetul dorit. Spre exemplu, vreau să
descarc pachetul “angular”:

Fig 6 Exemplu de npm install

2.3.5 Webpack Dev Server
Webpack este un pachet de module JavaScript open -source. Este creat în
principal pentru JavaScript, dar poate transforma active front- end precum HTML, CSS și
imagini. Webpack ia module cu dependențe și generează active statice reprezentând acele module.
Webpack oferă, de asemenea, un server de dezvoltare încorporat numit Webpack
Dev Server care poate fi utilizat ca server HTTP pentru servirea fișierelor în timpul dezvoltării. Acesta oferă, de asemenea, capacitatea de a utiliza înlocuirea modulului la cald.

2.3.6 Proxy
Conexiunea dintre serverul de http webpack și serverul de dotnet este făcută
print -un proxy. Url -ul api -ului este configurat în fișierul environment.ts.

Fig 7 Configurarea proxy -ului
2.3.7 Angular 9
Angular (denumit în mod obișnuit "Angular 2+" sau "Angular v2 și mai sus") este
un framework de aplicații web open source bazat pe TypeScript, condus de echipa Angular de la Google și de o comunitate de persoane și corporații. Angular este o rescriere completă de la aceeași echipă care a construit AngularJS.
Angular 9 a fost lansat pe 6 februarie 2020. Versiunea 9 a ac utualizat toate
aplicațiile pentru a utiliza compilatorul Ivy în mod implicit. Angular a fost actualizat

11
pentru a funcționa cu TypeScript 3.6 și 3.7 . În plus față de sute de corecții de erori,
compilatorul Ivy și timpul de rulare oferă numeroase avantaje.
Angular ajută la crearea de aplicații interactive și dinamice cu o singură pagină
(SPA -uri) cu caracteristicile sale convingătoare, incluzând șablo narea, legarea în două
sensuri (two -way binding), modularizarea, gestionarea RESTful API, dependency
injection și tratarea AJAX.

2.3.8 Bootstrap 5
Bootstrap este un framework CSS gratuit și open -source, direcționat către
dezvoltarea web front -end recepti vă și mobilă. Conține șabloane de proiectare bazate
pe CSS pentru tipografie, formulare, butoane, navigare și alte componente de interfață.

2.3.9 RxJS
RxJS este o bibliotecă pentru programarea reactivă folosind Observables, pentru
a facilita compunerea c odului asincron. Acest proiect este o rescriere a Reactive –
Extensions / RxJS cu o performanță mai bună, o modularitate mai bună, stive de apeluri
care pot fi depuse mai bine, rămânând în același timp compatibile înapoi, cu unele
modificări de rupere care r educ suprafața API .
Observabilele oferă suport pentru transmiterea mesajelor între părțile din
aplicație. Sunt utilizate frecvent în Angular și sunt tehnica recomandată pentru
gestionarea evenimentelor, programarea asincronă și manipularea mai multor valo ri.

2.3.10 Redux
Redux este o bibliotecă JavaScript open -source pentru gestionarea stării
aplicației. Este cel mai frecvent utilizat cu biblioteci, cum ar fi React sau Angular, pentru construirea interfețelor utilizatorului. Similar cu (și inspirat de) a rhitectura Facebook
Flux, a fost creat de Dan Abramov și Andrew Clark.
Redux menține starea unei întregi aplicații într -un singur arbore de stare
imuabilă (obiect), care nu poate fi modificată direct. Când se schimbă ceva, se creează un obiect nou (folosind acțiuni și reducătoare)

Fig 8 Diagrama fluxului de date in Redux

12
CAPITOLUL 3. D ESCRIEREA APLICAȚIEI
3.1 Structura bazei de date

Baza de date este formată din 12 tabele după cum se poate vedea în imaginea de
mai sus. Tabelele pot fi grupate pe categori i în funcție de entit atea pe care o deservesc.
Fig 9 Diagrama bazei de date

13
3.2 Utilizarea aplicației

3.2.1 Pagina introductivă

Prima pagină a platformei este o pagină introductivă. Aceasta conține cinci
secțiuni distincte.

Fig 10 Pagina introductivă

14
Prima secțiune este bara de navigare din partea superioară a paginii. Aici putem
găsi logo -ul site -ului și trei butoane c are, după apăsare, ne trimit către o altă
componentă a paginii. La aceste componete se poate ajunge și cu ajutorul scroll -ului.

Primul buton, “Acas ă“, ne trimite către a doua secțiune a paginii. Aici putem
vedea o imagine introductiv ă, logo -ul și motto -ul platformei. Acest tip de componentă
este numită „ jumbotron ” de către libraria Bootstrap.

Al doilea buton, “Despre noi”, trimite c ătre urm ăatoarea secțiune . Aceasta este la
râandul ei formată din alte trei carduri ce conțin informații despre platformă.

Fig 11 Bara de navigare
Fig 12 Imaginea introductivă
Fig 13 Secțiunea ”Despre noi”

15
Către cea de a patra secțiune a paginii ne trimite butonul “Autentificare”. Dup ă
cum spune și numele, am ajuns la componenta de logare în aplicație. În parte a dreapt ăa
a cardului este un slider cu poze. În partea stângă găsim câmpurile necesare logării
împreună cu butonul „Autentifica -mă” ce va verifica dacă datele introduse sunt corecte.
Dacă acestea sunt incorecte, va apărea un mesaj de informare. De asemenea, lângă
butonul de autenti fdicare este un buton, “Înscrie -te”, ce ne trimite spre formularul de
creare de cont.

Cardul spre care am fost redirecționați conține de asemenea un slider cu poze, în
parte a stânga de această dată, și un formular de înscriere. Butonul “Înregi strează -mă”
verifică dacă datele introduse sunt valide. În cazul în care condiția este îndeplinită, noul
cont este creat, iar autentificarea este făcută imediat. Un toast de informare apare în
colțul din dreapta sus a ferestrei. În cazul în care formularul este invalid, vor apărea
mesaje de informare.

Fig 14 Cardul de autentificare
Fig 15 Eroare de autentificare

16

Fig 16 Cardul de înregistrare
Fig 17 Eroare de înregistrare
Fig 18 Toast de confirmare al contului creat

17
Ultima component ăa este bara de subsol. Această componentă se va regăsi în
subsolul tuturor paginilor.

3.2.2 Pagina inițială a utilizatorului autentificat

Dup ă ce logarea a fost efectuată cu succes , pagina introductivă a suferi t câteva
modificări.

Fig 19 Bara de subsol
Fig 20 Pagina inițială a utilizatorului autentificat

18

În primul rând, bara de navigare va conține alte componente. Această bar ăa de
navigare va rămâne vizibilă în toate paginile atât timp cât utilizatorul este logat. Logo -ul
va răm âane același. Când se va apăsa pe el, clientul va fi mereu redirecționat spre
această pagină. Se pot observa 3 iconițe, ce vor redirecționa util izatorul spre alte pagini.
De asemenea, în partea dreaptă vom observa numele șsi poza utilizatorului logat.

Fig 21 Bara de navigare a utilizatorului autentificat

Iconița ce simbolizează coșul de cumpărături ne redirecționează spre pagina
aferentă. De asemenea, ico nița ce simbolizează o inimă ne va redirecționa spre pagina în
care putem vizualiza produsele adăugate în lista celor favorite.
Apăsând pe numele utlizatorului se va deschide un meniu derulant ce ne permite
să ajungem la pagina de profil a utiliz atorului, la setările utilizatorului sau să ne
deconectăm.

Câand un utilizator se deconectează este redirecționat spre pagina inițială a
platformei.
Se observă, de asemenea, că nu mai e vizibil cardul de autentificare, în schimb
deasupra imaginii introductiv e a apărut un nou buton “Începe căutarea”.
Apăsând pe iconița în formă de lupă de pe bara de navigare sau pe butonul
“Începe căutarea ” vom naviga spre a o altă pagină, pagina de căutare.

Fig 22 Meniul utilizatorului

19
3.2.3 Pagina de căutare

Această pagină e conțtine 3 secțiuni principale. Prima secțiune, ce va fi regăsită în
majoritatea paginilor este componenta numit ăa de Bootsrap “breadcrumb” . Aceasta
indică locația paginii curente într -o ierarhie de navigare care adaugă automat
separatoare „/ ”.

Fig 24 Breadcrumb

A doua sec țiune conține bara de căutare. În această aplicație căutarea se face pe
baza tag -urilor. Am folosit componenta MatChips de la Angular Materials. Aceast ă a
componentă f ace posibilă afișarea unei liste de valori text ca jetoane indivi dtuale. Ele
sunt mai apoi manipulate ca o matrice de șiruri de caractere.

Fig 25 Bara de c ăutare cu jetoane

Jetoanele sunt create dup ăa apăsarea tastei Enter sau a caracterului virgulă.
Căutarea se efectuează de fiecare dat ăa când un jeton este adăugat, dar și prin apăsarea
butonul ui de căutare.
Fig 23 Pagina de căutare

20
A treia secțiune prezintă categoriile de servicii și produse ce pot fi găsite pe
platformă.

Fig 26 Componenta categoriilor principale ale aplicației

Unele din categoriile principale au subcategorii. Aceasta este lista tuturor
categoriilor cu subcategoriile lor :

a) Prestări s ervicii:
• Organizator de nunți
• Închiriere local
• Coafură & Machiaj:
o Coafură
o Machiaj
• Foto -video:
o Fotograf
o Videograf
o Oglindă Photo
o PhotoBus
• Muzică:
o Trupă
o DJ
• Decor
• Închiriere transport:
o Mașină miri
o Transport invita țti
b) Comer ț:
• Mâncare & Băutură:
o Mâncare

21
o Băutură
• Pentru ea:
o Rochie de mireasă
o Pantofi
o Rochii de gală
o Accesorii
• Pentru el:
o Costum
o Pantofi
o Cămașă
o Accesorii
• Papetărie:
o Invitații
o Meniuri
o Plicuri
o Cutie dar
• Mărturii
• Flori:
o Buchet mireasă
o Aranjamente florale
• Dulciuri:
o Tort
o Prăajituri
o Candy bar
• Verigh ete

Prin apăsarea i nconiței unui serviciu sau produs ce are mai multe subcategorii,
un meniu derulant unde sunt vizibile subca tegoriile va fi afișat.

Fig 27 Meniul de subcategorii

22
Prin apăsare fie pe iconițele categoriilor ce nu au subcategorii, fie pe o
subcategorie, se va adăuga în bara de căutare un jeton ce conține numele categoriei și
unul ce conține numele subcategoriei alese, dacă este cazul. Automat se începe căutarea.
După efectuarea căutării se pot vedea produsele găsite pe baza jetoanelor din
bara de căutare.

3.2.4 Pagina cu rezultatele căutării

Pagina cu rezultatele căut aării conține aceeași bară de c ăutare ce p aăstrează
jetoanele pe baza cărora s -a făcu t căutarea. Dedesu bpt se observă apariția unui nou card
ce coține filtrele pe baza cărora utilizatorul poate ordona produsele.
Primul filtr u “Cele mai noi” ordoneaz ăa produsele în func țitie de data adăugării
sau modificării. Un produs mai vechi, dar modificat, este considerat nou.
Următoarele dou ăa filtre ordonează rezultatele în funcție de preț :, crescător sau
descrescător.
Ultimul filtru, “La promo ție”, afi șează doar produsele ce sunt reduse.
Fig 28 Pagina cu rezultate căutării

23
Produsele sunt afișate câte 8 pe pagină. Acest lucru a fost făcut posibil
prin intermediul unui *ngFor cu pipe -ul “paginate” oferit de libr ăaria
NgxPaginationModule .

Fiecare produs rezultat în urma căutării este vizualizat într -un card
separat. Acest card conține poza de prezentare, numele, descrierea, prețul (redus sau nu, în funcție de caz) și dou ăa butoane ce au o iconiță de inimă, respectiv de coș de
cumpărături.

Fig 29 Pagina ția
Fig 30 Cardul produselor cu și fără reducere

24
Prin ăpăsarea acestor butoane, produsul este adăugat în lista de favorite,
resp rectiv în lista produselor ce urmează a fi comandate.

Printr -un click pe poza sau numele produsului suntem trimiși către pagina
produsului respectiv.

3.2.5 Pagina produsului

Fig 31 Pagina produsului

Pe această pagin ăa găsim mai multe elemente ce ne oferă diverse informații
legate de produsul selectat. După c um am menționat și anterior, în partea de sus găsim
componenta breadcrumb ce ne indică catego ria/ subcategoria/ numele produsului. În
josul acestei componente putem observa un s ilider cu poze de prezentare. Pozele
rulează singure la un anumit interval de timp, iar prin apăsarea unui click pe slider
pozele de prezentare se m ăaresc astfel încât tot ecranul este acoperit de noul pop -up în
care acestea se află. Atât în sliderul ini țtial, cât și în cel ce ocupă tot ecranul se regă sesc
săgețile ce ne permit s ăa navigăm cum dorim printre ele, dar și niste linii orientative
dedesu bptul pozei ce ne indică num ăarul de imagini din slider.

25

Următoarea componentă a paginii este cardul ce conține descrierea produsului.
Aici va apărea textul descriptiv adăugat de compania ce vinde acest produs.
O altă proprietate benefică a platformei este posibilitatea de a citi și de a oferi
recenzii produselor. Pe pagina produsului exist ă a o zonă de recenzii ce permite această
utilitate.

Fig 32 Pozele de prezentare în full screen
Fig 33 Cardul de recenzii

26
Sistemul de rating prin steluțe este facilitat de librăria RatingModule , prin
componenta <rating ></rating>. Numărul colorat de stele este dat de media aritmetică a
tuturor recenziilor oferite produsului respectiv.

Pentru recenziile oferite de utilizatorul conectat vizualizarea este diferită. În
colțul din dtreapta sus se observă apariția a două cuvinte “Modific ă” și “Șterge”. Acestea
acționează ca butoane. Când butonul de ștergere este selectat, recenzia respectivă este
ștearsă. Când este sel ectat butonul de modificare, secțiunea recenziei suferă câteva
modificări. Utilizatorul poate schimba atât numaru l de stele cât și textul recenziei. Poate
aplica modificările apăsând pe noul buton “Modifică” sau poate renunța se lectând
butonul “ Renunță ”.

Fig 34 Cardul de recenzii II

27

Fig 35 Modificarea unei recenzii

În partea din dreapta a paginii putem observa un car d ce ne permite să adăugăm
produsul în lista de favorite . În cazul produselor ce pot fi achiziționate, există și prețul
vizibil, dar șsi un buton ce ne permite adăugarea produsului în coșul de cumpărături.
Pentru produsele din categoria de prestări de servicii avem un buton ce ne permite
accesarea numărului de telefon al companiei ce prestează respectivul serviciu.

Fig 36 Cardul produslui
Fig 37 Cardul serviciului

28
Următorul card este cel ce ne oferă câteva informații despre compania ce vinde
produs ul în cauză . Putem vedea aici poza de profil și numele companiei. De asemenea,
există un buton ce face posibil ca utilizatorul să navigheze către pagina de profil a
companiei.

3.2.6 Pagina de profil a companiei

Fig 38 Cardul ce indică inform ații despre
companie
Fig 39 Pagina de profil a companiei

29
Scopul acestei pagini este ca utilizatorul să cunoască mai mult despre compania
ce vinde produsul dorit. Pagina este formată din diverse componente ce au ca scop
informarea clienților cu privire la firma în cauză.
În partea din dreapta se găsesc dou ăa carduri. Primul conține imaginea de profil,
numele și adresa de email a companiei.

Al doilea card conține o descrierea a companiei. Fiecare manager de companie decide ce
și câte informații să scrie în acest card.

Fig 40 Card informativ despre companie
Fig 41 Descrierea companiei

30
În partea din dreapta sunt prezente trei carduri foarte utile în a cunoște impactul
acestei companii pe piață. Primul card indică numărul de produse pe care această firmă
le are pe platformă. Al doilea, prezintă numărul de vânzări pe care această companie le-
a avut pe Marri age Land. Iar cel de al treilea card face o medie a tutu ror recenziilor
primite de către clienți la produsele acesteia ei.

Fig 42 Informații despre companie

În continuare este locul pentru poze de copertă. Compani ae poate alege ce
imagine să posteze în acest spațiu. El poate fi folosit pentru reclamă, pentru noutăți sau
pentru orice altceva.
Urm ăatoarea secțiune a paginii este destinată produselor companiei. Și această
secțiune este paginată, la fel ca cea din pagina de rezultate. Diferența este că sunt doar
patru produse pe pagină. Și aici există posibilitatea de a adăuga produsul în coșul de cumpărături sau în lista de favorite. De asemenea, făcând click pe poza sau numele
produsului se poate ajunge cu ușu rință la pagina special destinată acelui produs.

Fig 43 Lista de produse a companiei

31
3.2.7 Profilul utilizatorului

La pagina de profil a utilizatorului se poate ajunge prin în mai multe feluri. Prima
opțiune este prin apăsarea elementului „Profil” din meniul deru alant din bara de
naevigare din partea superioară a paginii. De asemenea, prin apăsarea iconițelor de coș
de cumpărături sau favorite, se aju nge la o secvență a profilului utilizatorului.
Pentru a înțelege acest aspect este necesară explicarea structurii acestei pagini.
În partea din stânga găsim cardul cu numele și poza de profil a util izatorului.

Următorul card este de fapt un meniu tabular de navigare. Conține o listă de
patru taburi c are, dup ăa selectare, duc la schimbarea conți unutului coloanei din dreapta
a paginii utilizatorului. Cele patru taguri sunt : Favorite, Coș de cumpărături, Istoric
cumpărături și tabul legat de posibilitatea de a crea sau a manageria contul de furnizor.

Fig 44 Profilul utilizatorului
Fig 45 Cardul cu informațiile generale ale
utilizatorului

32

Ultimul element din partea dreaptă a paginii este cardul ce ne oferă posibilitatea
fie să navigăm spre setările profilului fie să ștergem profilul.

Fig 47 Spre setări

După cum am menționat si anterior, partea din dreapta a profi lului utilizatorului
se modifică în func țtie de tab -ul care este selectat.
Atunci când apăsăm pe textul „Ștege profil ” un modal care cere confirmarea
aprare în partea de sus a paginii. Utilizatorul este întrebat dacă dorește să șteargă
profilul sau nu.

Fig 48 Modal de confirmare ștergere profil utilizator
Fig 46 Meniu tabular de navigare

33
3.2.8 Setările profilului de utilizator

Fig 49 Setările profilului de utilizator

În pagina de setări, utilizatorul își poate configura anumite informa ții personale.
Pagina este formată din trei carduri principale ce conțin informații diferite. Primul card
permite configurarea imaginii de profil. Apăsând pe butonul “Încarc ăa imaginea” se
deschide o component ă de browse images. Utilizatorul poate căuta în fișierele din
calculator pentru a încărca imaginea dorită. Când i maginea a fost selectată, aceasta va fi
automat actualizată în toată aplicația.
Al doilea card conține informații legate de numele de utilizator. Valorile inițiale
vor fi cele introduse la crearea contului. Acest ea pot fi modificate direct prin schimbarea
textului din câmpurile “Nume” și “Prenume”. Modificările vor fi actualizate doar după ce
utilizatorul apasă pe butonul “ Actualizați”. Pentru a confirma modificarea informațiilor
personale, un toast informativ apare în colțul din dreapta sus al aplicației.

Al treilea card conține informațiile de facturare. Inițial aceste câmpuri vor fi
goale. După ce utilizatorul l de modifică și apasă pe butonul de actualizare, un nou toast
va apărea în colțul din dreapta sus al aplicației. Aceste informații vor fi ulterior utilizate
pentru efectuarea comenzii.

Fig 50 Toast de informare

34

3.2.9 Lista de favorite

Fig 52 Lista de favorite

La lista de favorite se ajunge fie prin apăsarea iconiței în formă de inimă din bara
de navigare, fie din sel ectarea tab -ului “Favorite” din pagina de profil a utilizatorului.
Aici găsim toate pr odusele sau serviciile adăugate de către client în lista de favo rtite.
Lista este de asemenea paginată, fiind vizibile câte trei elemente pe pagină. Cardul specific pr odusului conține poza, numele și descrierea. Pentru produsele ce pot fi
achiziționate este vizibil și prețul. De asemenea există un buton ce oferă posibilitatea
utilizatorului să adauge produsul în coșul de cumpărături. Pentru servicii, cardul conține un buton ce prin apăsare permite vizualizarea întregului număr de telefon al companiei ce prestează serviciul în cauză.
Dacă lista de articole favorite este goală, un card de informare va fi af ișat.

Fig 51 Toast de informare

35

Fig 53 Mesaj nici un produs în favorite

3.2.10 Coșul de cumpărături
La coșul de cumpărături se poate ajunge fie prin apăsarea iconiței în formă de
coș de cumpărături din bara de navigare, fie din sel ectarea tab -ului “Coș de
cumpărături” din pagina de profil a utilizatorului. Aici vedem produsele adăugate de
client în coș. Cardul produsului conține i amaginea, numele, descrierea si prețul
articolului. Este vizibil totalul comenzii, iar dedesu pbt se găsește butonul ce permite
finalizarea comenzii.
Când utilizatorul selectează acest buton, un nou layout de carduri este vizibil.
Primul card conține informațiile de facturare. Dacă utilizatorul a configurat deja în
setări aceste informații, ele vor fi vizibile aici. Cu toate acestea câmpurile vor putea fi
modificate. Al doilea card permite vizualizarea produselor din comandă în format
tabelar. De asemenea este vizibil prețul total al comenzii. Două butoane sunt vizibile, unul ce permite renunțarea la com andă enzii și al doile a ce confirmă comanda. Dacă
Fig 54 Coșul de cumpărături

36
butonul de renunțare este apăsat, utilizatorul va fi din nou trimis catre layout- ul inițial
al coșului de cumpărături. Dacă în schimb comanda este confirmată, coșul va fi golit și
un toast de confirmare va apărea în colțul din dreapta sus al ferestrei.

Fig 55 Comanda efectuată cu succes

3.2.11 Istoricul de comenzi

La istoricul de comenzi se poate ajunge din pagina de profil a utilizatorului
accesând tab -ul „Istoric cumpărături ”. În cazul în care nici o comandă nu a fost efectuată
va apărea mesajul “ – Nu aveți nici o comandă efectuată –“. În schimb, dacă sunt comenzi
efectuate putem vedea detaliile fiecărei comenzi în câte un card separat. Cardul conține
în titlu numărul comenzii. În subtitlu este comunicată data în care comanda a fost plasată, dar și valoarea totală a comenzii. Produsele comenzii sunt mai apoi vizibile sub format tabelar. Coloanele indică numele produsului, numele companiei și prețul produsului.

Fig 56 Istoric de cumpărături

37
3.2.1 2 Vreau să fiu furnizor
Ultimul tab din pagina de profil a utilizatorului are de a face cu oferă
funcționalitatea de a deține o pagin aă de furnizor. Dacă utilizatorul nu are deja o pagină
deschisă, tabul se va numi „Vreau să fiu furnizor ”. Selectând acest tab un modal v -a
acoperi ecranul, oferind informații referitoare la ce înseamnă să fi i furnizor.

Dacă utilizatorul selectează butonul din dreapta, un nou layout îi este vizibil.

O componentă de tip carusel este vizibilă. Primul pas va fi acela de a tasta numele
com paniei și de a alege tipul ei. Platforma oferă posibilitatea de a încadra furnizorul în
una din cele două categorii : Prestări servicii sau Comerț. Înainte de a se crea contul de
furnizor se face o verificare că toate informa țtiile sunt oferite.
Fig 57 Modal informativ “Vreau să fiu furnizor”
Fig 58 Da, vreau să fiu furnizor

38
Când contul de furnizor a fost creat, apare un tast dne informare și un nou
element este vizibil în carusel.

Fig 59 Contul de furnizor a fost creat

Când lista furnizorilor utilizatorului conține cel putin un element, numele tab –
ului se schimbă în „Gestionează -ți furnizorii” . Când se dă click pe elem eantul din carusel
ce conține numele furnizorului , acesta se extinde și un nou layout este vizibil. Managerul
paginii are acum posibilita tea de a apăsa pe u na din următoarele patru secțiuni :
Statistici, Setări, Adaugă produse/servicii și Gestionează produsele/serviciile.

Fig 60 Furnizor

39
3.2.13 Setările companiei

Cele patru pagini ale furnizorului sunt legate între ele. O nou ăa bara de navigare
este accesibilă pentru a facilita trecerea dintr -o pagină în alta.
Pagina de setări a companiei conține trei carduri. Primul card gestionează
informațiile companiei: nume, email, site web și descriere. Aceste informații vor fi
accesibile peste tot în platformă. Al doilea card permite utilizatorului să încarce poza de
profil și cea de copertă. Utimul card oferă posibilitatea utilizatorului să ștergă pagina
companiei. U n modal de confirmare a pfare în momentul apăsării butonului de ștergere.
Dacă utilizatorul confirmă, un toast de confirmare apare în colțul din dreapta sus , și
utilizatorul este redirecționat către pagina de profil.

Fig 61 Setările companiei

Fig 62 Bara de navigare între paginile furnizorului

3.2.14 Adaugă produse/servicii

Această pagină face posibilă adăugarea de noi articole pe platformă. Primul card
cere informațiile generale legate de produs sau serviciu. În primul rând, furnizorul
trebuie să aleagă categoria din care face parte articolul său. În cazul în care categoria
aleasă are mai multe subcategori i, un nou dropdown cu subcategoriile posibile devine
vizibil. Apoi, informații precum numele și d escrierea produsului sau serviciului trebuie
adăugate. Un aspect important îl constituie tag -urile. Furnizorul poate adăuga diverse
tag-uri ce ar descri ue produsul. Căutarea se face pe baza acestor tag -uri, așa că este spre
folosul companiei ca această rubrică să fie completată cât mai creativ. În conti unuare se

40
pot adăuga poze (maxim trei) și prețul, doar în cazul produselor. După adăugarea
produsului, utilizatorul este redirecționat spre pagina de gestiune a produselor.

Fig 63 Adaugă produse

3.2.15 Gestionează produsele/serviciile

În această pagină, utilizatorul poate vedea șsi gestiona produsele. Bara de sortare
din pagina de rezultate se reg aăsește și aici. Produsele pot fi sortate dup aă: cele mai noi,
preț crescător, preț descrescător și cele la promoție.
Cardul produselor conțin imagi enea, numele, descrierea și prețul produselor
acolo unde este cazul. În colțul din stânga sus se află un simbol al unei roți dințate.
Apăsând pe ea apare un dropdown apare . Pentru produse avem posibilitatea de a
modifica, de a șterge sau de a reduce prețul articolului. În cazul serviciilor avem doar posibilitatea de a modifica și de a șterge.
Când un produs este șters, un toast de confirmare apare în colțul din dreapta sus.

Fig 64 Toast de confirmare a ștergerii produsului

41

Fig 65 Gestionează produsele/serviciile

Când utilizatorul optează pentru modificarea produs ului sau serviciului este
trimis către o pagină asemănatoare cu cea de adăugare de produse. Diferența este că toate câmpurile sunt completate cu informațiile produsului.

Fig 66 Roata dințată pentru setări

42

Fig 67 Modifică produs

Când produsul a fost modificat, utilizatorul este redirecționat către pagina de
gestiune și un toast de confirmare apare.

Când utilizatorul dorește să reducă prețul unui produs, layout -ul cardului se
modifică. O căsuță în care poate fi adăugat procentul reducerii este vizibilă. După
apăsarea butonului OK, reducerea este vizibilă peste tot în platformă.

Fig 68 Reducere preț

43
3.2.16 Statistici

Ultima pagină disponibilă furnizorului este cea a statisticilor. Aici pot fi vizibile
informații referitoare la vânzări. În partea de sus se află patru carduri ce conțin :
numărul de produse vândute pe platformă, suma veniturilor din vânzările ultimei luni,
respectiv a ultimului an și suma vânzărilor total e de pe platformă.
Următorul card conține informații depre ultimele trei produse vândute. În
dreapta se pot vedea ultimii patru clienți ai acestui furnizor. În josul paginii este un
grafic ce ajută la vizualizarea tuturor încasărilor pe axa timpului.

Fig 69 Pagina de statistici

44
CONCLUZII
Marriage Land este o p alatformă web construită a cu tehnologii web de
actualitate, ultimele versiuni existente. Aplicația își propune punerea în comun a
furnizorilor și clienților interesați de organizarea nunților.
În procesul de creare al proiectului s -a urmărit îndeplinirea cerinț elor prezentate
în primul capitol . Funcțiile din cerințe au fost implementate cu succes în site -ul creat și
ca urmare a fost obținută o aplicație ușor de utilizat și deschisă la viitoare dezvoltări.
În urma studiului de p piață s -au observat câteva facilități ce ar putea fi pe viitor
adăugate și în aplicația Marriage Land. Dintre acestea menționăm blog -ul, mai multe
filtre personalizate pe categorie, posibilitatea oferte i rapide, checklist pentru
organizarea nunții și integrarea rețelelor de socializare.

BIBLIOGRAFIE

2 https://www.smashingmagazine.com/2016/06/an -introduction -to-redux/
3 https://www.postgresql.org/
4 https://en.wikipedia.org/wiki/.NET_Framework
5 https://www.c -sharpcorner.com/article/create -simple -web -api-in-asp-net-mvc/
6 https://en.wikipedia.org/wiki/C_Sharp_(programming_language)
7 https://en.wikipedia.org/wiki/HTML#:~:text=Hypertext%20Markup%20Language
%20(HTML)%20is,such%20as%20JavaScript%20and%20VBScript.
8 https://sass -lang.com/
9 https://www.typescriptlang.org/
10 https://www.w3schools.com/nodejs/nodejs_npm.asp
11 https://angular.io/
12 https://getbootstrap.com/
13 https://rxjs -dev.firebaseapp.com/guide/overview
14 https://redux.js.org/