Facultăț ea Automatică și Calculatoare [623290]

Universitatea POLITEHNICA București
Facultăț ea Automatică și Calculatoare
Departamentul Automatică și Informatică Industrială

LUCRARE DE DIPLOMĂ

Sistem informa tic pentru gestionarea activităț ii de
voluntariat

Coordonator Absolvent: [anonimizat].dr.ing. Daniela Saru Dicher Ioana Monica

2019

1

Cuprins

Capitolul 1. Introducere ………………………….. ………………………….. ………………………….. ………………….. 2
Capitolul 2. Activitatea de voluntariat ………………………….. ………………………….. ………………………….. . 4
Capitolul 3. Tehnologii folosite ………………………….. ………………………….. ………………………….. ………… 6
3.1. Angular ………………………….. ………………………….. ………………………….. ………………………….. ….. 6
3.2. HTML ( Hyper Text Markup Language) ………………………….. ………………………….. ……………… 7
3.3. CSS (Cascading Style Sheets) ………………………….. ………………………….. ………………………….. … 7
3.4. Bootstrap ………………………….. ………………………….. ………………………….. ………………………….. … 8
3.5. Symfony ………………………….. ………………………….. ………………………….. ………………………….. …. 9
3.6. MongoDB ………………………….. ………………………….. ………………………….. ………………………….. 10
3.7. Docker ………………………….. ………………………….. ………………………….. ………………………….. ….. 10
Capitolul 4. Aplicații similare ………………………….. ………………………….. ………………………….. ………… 12
Capitolul 5. Documentația tehnică ………………………….. ………………………….. ………………………….. ….. 13
5.1 Proiectare ………………………….. ………………………….. ………………………….. ………………………….. . 13
5.1.1 Creare imagine pentru backend ………………………….. ………………………….. ……………………. 15
5.1.2 Creare imagine pentru frontend ………………………….. ………………………….. …………………… 15
5.1.3 Creare imagine nginx ………………………….. ………………………….. ………………………….. …….. 15
5.1.4 Docker -compose.yml ………………………….. ………………………….. ………………………….. …….. 16
5.2 Implementare baza de date ………………………….. ………………………….. ………………………….. ……. 19
5.3 Descrierea aplicației ………………………….. ………………………….. ………………………….. …………….. 20
5.4 Prelucrare imagine ………………………….. ………………………….. ………………………….. ………………. 27
5.5 Diagrame UML – realizate în urma informatiilor din [25]. ………………………….. ……………………. 28
5.5.1 Diagrame UseCase ………………………….. ………………………….. ………………………….. ………… 28
5.5.2 Diag rama de secvente ………………………….. ………………………….. ………………………….. ……. 32
5.5.3 Diagrama de activități ………………………….. ………………………….. ………………………….. ……. 34
Capitolul 6. Manual de utilizare ………………………….. ………………………….. ………………………….. ……… 37
6.1. Admin ………………………….. ………………………….. ………………………….. ………………………….. …… 38
6.2 Decan ………………………….. ………………………….. ………………………….. ………………………….. ……. 41
5.3 Coordonator ………………………….. ………………………….. ………………………….. ……………………….. 41
6.4 V oluntar ………………………….. ………………………….. ………………………….. ………………………….. …. 43
Capitolul 7. Concluzii ………………………….. ………………………….. ………………………….. …………………… 46
Capitolul 8. Bibliografie ………………………….. ………………………….. ………………………….. ……………….. 47

2

Capitolul 1. Introducere
V oluntariatul este activitatea desfășurată din proprie inițiativă , de orice persoană fizică, în
folosul altora, fără a primi o recompense material ă.[1]
Dezvoltarea de aptitudini și obținerea de experienț a sunt doi dintre cei mai importanți factori
motivaț ionali. D esfășurare a activități i de voluntariat de către studenț i în cadrul unei asociaț ii
profesionale are un impact benefic, atât pentru formarea lor ca oameni cât și din punct de vedere
profesional. În plus, această experiență poate fi un punct de plecare pentru obț inerea de Internship –
uri. V oluntariatul măre ște șansele în ceea ce privește obț inerea unui loc de munca .
Dacă în lume primele asociaț ii de voluntariat au luat nastere la î nceput ul secolului al XIX -lea,
în Rom ânia voluntariatul s -a dezvoltat după 1989 la î nceput prin intermediul organizaț iilor Peace
Corps și V olun tary Service Oversea din care fă ceau parte voluntari internaționali potrivit referinț ei
[2].Din punct de vedere al legislaț iei, în anul 2001 Rom ânia a adoptat o primă Lege a voluntarului
în principal pentru a reglementa folosirea resurselor umane ș i pentru a stabili responsabilitățile
volunt arilor și a asigura drepturile acestora.
În cadrul unei asociații pro fesionale pe 26 iulie 2014 intră în vigoare legea 78/2014 ce impunea
existenta unui contract de voluntariat și a fișei voluntarului, v ârsta minimă de 15 ani ș i un instructaj
SSM (Securitate și Sanatate în Munca). Aceeași lege preciza faptul că, la finalul stagiului,
voluntarului îi poate fi eliberat de către asociația în cadrul căreia și -a desfășurat activitatea un
certificat de voluntariat. În plus, conform legii, "activitatea de voluntariat se consideră experiență
profesională și/sau în specialitate, în funcție de tipul activității, dacă aceasta este realizată în
domeniul studiilor absolvite" [3]. Această prevedere sporește șansele de angajare ale studenților la
firme care solicit ă existența experienței profesionale deja dobândite.
Certificatul de voluntariat este însoț it de un rap ort de activitate care detaliază activități le de
voluntariat la care a luat parte voluntarul, atribuț iile pe care le -a avut și aptitudinile dob ândite.
Apariția legii 78/2014 a condus, la nivelul asociațiilor, la necesitatea gestionării unui volum
mare de informații legate de evidența voluntarilor, atât din punctul de vedere al datelor de
identificare cât și al activităților de voluntariat dar, mai ales, în legătură cu organizarea și
gestionarea fluxului de documente și activități. Începând din anul 2015, și în cadrul Asociației
Automatică și Calculatoare din cadrul facultății cu același nume din Universitatea Politehnica
București s -au implementat reglem entările Legii 78/2014, ceea ce a evidențiat un volum
semnificativ de muncă și timp dedicat interacțiunii voluntari -coordonatori de voluntari -secretariatul
asociației -conducerea asociației, mai ales în privința documentelor impuse de lege. Implementarea
unui software de gestiune a a ctivități i de voluntariat a apărut astfel ca o necesitate și a fost realizată
în strânsă colaborare cu toți cei implicați în activitatea asociației amintite anterior.

3
În cadrul proiectului s -a avut în vedere dezvoltarea unei aplicații capabile s ă automatizeze în
mare măsură activitatea administrativă a Asociației Automatică și Calculatoare, oferind un
instrument intuitiv și eficient tuturor tipurilor de utilizatori.
Deoarece p ână în prezent aceste activități erau realizate de către coordonatori și secretariatul
asociaț iei, s -a avut în vedere ca aplicația realizată să satisfacă cerinț e precum organizarea fluxului
de activități administr ative și eficientizarea comunicării între părț ile im plicat e în proces.
Astfel, în cadrul aplic ației se colectează, organizează și prelucrează datele pentru î nscrierea
voluntarilor pri n completarea cererilor și a fișelor de voluntariat ș i se genereaz ă contracte de
voluntariat și certificate de voluntariat insoț ite de rapoarte de activitate. A plicaț ia va putea fi folosita
atât de voluntari c ât și de secretariatul A sociaț iei și de că tre coordonatorii de voluntari.
În ansamblu, aplicația Web realizată este eficientă, nu necesită costuri semnificative și poate fi
accesata de orice utilizator cu acces la Internet, prin solicitarea și obținerea dreptului respectiv de la
administrator.
Prezent a lucrare de diploma prezintă aspectele avute în vedere pentru studierea temei propuse,
pentru proiectarea, implementarea și punerea în funcțiune a aplicației software , precum și câteva
dintre direcțiile ulterioare de dezvoltare. Lucrarea conține șapte capitole, după cum urmează:
 capitolul 1. Introducere – expune, pe scurt, caracteristicile activității de voluntariat și
motivația alegerii temei proiectului de diplomă.
 -capitolul 2. Activitatea de voluntariat – prezintă conceptul de voluntariat și documentele
necesare gestiunii a ctivități i de voluntariat impuse de legea 78/2014.
 capitolul 3. Tehnologii folosite – descrie principalele tehnologii și instrumente de
implement are a aplicației software folosite și prezintă argumentele ce au stat la baza alegerii
acestora.
 capitolul 4. A plicaț ii simi lare – expune un studiu de piață în care sunt prezentate a plicaț ii din
acelaș i domeniu și principalele deosebiri dintre a plicaț iile deja existente și aplicaț ia software
creată în cadrul proiectului.
 capitolul 5. Descrierea a plicaț iei – prezintă documentaț ia tehnică a aplicaț iei ce include
detalii de proiectare, implementare software, baza de date, diagrame UML.Este discutat și
procede ul folosit pentru prelucrarea imaginilor de tip carte de identitate cu scopul de
recunoaș tere optică a caracterelor (OCR).
 capitolul 6. Manual de utilizare – descrie modul de utilizare a l aplicaț iei din perspectiva
actorilor de tip student voluntar, coordo nator de voluntar, admin, decan .
 capitolul 7. Concluzii – prezi ntă, în sinteză, rezultatele obț inute pe parcursul întregii
activități de elaborare a proiectului de diplomă, și posibilele dezvoltă ri ulterioare ale
aplicaț iei.

4

Capitolul 2. Activitatea de voluntariat

În data de 24 iulie 2014 int ră în vigoare Legea 78/2014 cu referire la activitatea de voluntariat.
“Activit atea de voluntariat se consideră experiență profesională si/sau în specialitate, în funcți e de
tipul a ctivități i, dacă această este realizată î n domeniul studiilor absolvite”. (art 10(2) Legea
78/2014) [3].
“V oluntariatul se desfasoara pe baza unui c ontract incheiat în forma scrisă, î n limba romana,
intre voluntar și organizaț ia gazdă . Obligatia de incheiere a contractului de voluntariat în forma
scrisă revine organizaț iei gazdă. Forma scrisă este obligatorie pentru încheierea valabilă a
contractului.”(art 1 1(1) Legea 78/2104) [3].
Așadar pentru ca activiatea de voluntariat sa fie recunoscută oficial este nevoie de un contract
de voluntariat.
Inițial, pentru ca o persoana să poată deveni voluntar este necesar să completeze o cerere că tre
Președintele Ascociatiei Automatică și Calculatoare. În cerere s e menționează perioada în care
persoana va acț iona ca voluntar, a ctivități le care vor fi realizate și tipul de voluntar. Acesta poate fi:
student în cadrul Facultății de Automatică și Calculatoare , cadru didactic în cadrul aceleași instituț ii
sau poate av ea alt statut care va fi menț ionat în cerere. O a do ua cerere va putea fi completată și
adresata Doamnei Decan a Facultaț ii de A utomatică și Calculatoare, în care voluntarul specifică
faptul că inscrierea în contractul de studii a disciplinei liber alese “Activitate de voluntariat” în
scopul obț inerii de puncte de credit suplimentare pentru anul respectiv conform Metodologiei
specifice elaborate de către Senatul Universității Politehnica București “.
“Contractul de voluntariat este însoțit obligatoriu de fișa de voluntariat și fișa de protecție a
voluntarului”. (art 11(5) Legea 78/2014) [3].
Fișa de voluntariat include detalierea a ctivități lor ce urmează a fi î ntreprinse de către voluntar
pe parcursul c ontractului de voluntariat. Conți ne specificarea locului sau locurilor în care se
desfașoară activități ile, perioada și numă rul de ore pentru fiecare activitate precum și
responsabilităț ile voluntarului în vederea î ndeplinirii a ctivități lor. V oluntarul se a ngajează să
realizeze î ndatoririle care sunt trecute în fișa vo luntarului. Aceasta este semnată at ât de
reprezentantul organizației gazdă c ât și de voluntar.
O data ce cererile au fost acceptate de către Doamna Presedinte , respectiv de către Doamna
Decan a F acultăț ii de A utomatică și Calculatoare iar fișa de voluntariat a fost completată , se poate
încheia contractul de voluntariat î ntre voluntar și organizaț ia gazdă . “Organizația -gazdă este

5
obligată ca, anterior începerii activității de volun tariat, să înmâneze voluntarului un exemplar din
contractul de voluntariat.”(art 11(3) Legea 78/2014) [3]. Contractul c onține :
 datele organizaț iei gazdă și datele personale ale voluntarului
 obiectul contractului: a ctivități le mentionate și detaliate în fișa voluntarului, atașată
contractului, instrucț iunile cu privire la d esfășurare a activități i voluntarului cuprinse în Fișa
de protecț ie
 durata contractului : programul, timpul și perioada de d esfășurare a activități i de voluntariat
stabilite în fișa volunta rului
 drepturile și obligațiile ambelor pă rti
 cerinț e speciale: sunt in cluse cerințele profesionale, cerințele privind abilităț ile sociale și
cele privind sănătatea .
 condiții de modificare sau încetarea contractului, litigii.
Dupa ce volun tarii semneaza co ntractele, aceștia sunt coordonaț i și monitorizaț i de către
coordonatorul de voluntari. Coordonatorul este un angajat sau un voluntar al o rganizaț iei gazdă , în
cazul Asociației Automatică și Calculatoare , fiind, de cele mai multe ori, profesori ai f acultăț ii de
Automatică și Calculatoare.
La finalul stagiului de voluntariat, organizația gazdă eliberează certifica tul de voluntariat care
confirmă activitatea de voluntariat dar nu și competențele dob ândite în urma realiză rii activități lor.
Certificatul este ob ținut de voluntar la finalul perioadei de voluntariat și este î nsotit de un raport de
activitate.
Certificatul c onține pe lânga datele o rganizaț iei gazdă și ale voluntarului, perioada în care acesta
a activat ca voluntar în cadrul o rganizaț iei în baza cont ractului și numă rul de ore de voluntariat
efectuate în conformitate cu raportul de activitate, sub îndrumarea coordonatorului. Acesta este
semnat de către reprezentantul legal al asociației. Pentru a ilustra competentele,experienț a dobândită
și responsabilităț ile voluntarului se emite impreună cu certificatul de voluntariat și raportul de
activitate.
Raportul de activitate este semnat de către reprezentantul legal al o rganizaț iei, voluntarul,
coordonatorul de voluntari și dacă este cazul de către coordonatorul de a ctivități și conține , pe langa
denumirea o rganizaț iei gazdă și numele voluntarului, urmă toarele informa ții:
 activitatea de v oluntariat prestată
 perioada și numă rul de ore prestate
 atribuț iile/responsabilităț ile asumate
 aptitudinile/compe tențele dob ândite.

6

Capitolul 3. Tehnologii folosite

Principalele tehnologii folosite pentru implementarea a plicaț iei sunt:
 Angular, HTML, CSS, Bootstrap – pentru partea de frontend
 Symfony – pentru partea de backend
 MongoDB – pentru baza de date
 Docker – instrument folosit pentru creare și rulare de a plicaț ii folosind containere.
3.1. Angular
Angular este unul dintre cele mai populare framework -uri JavaScript pentru partea de front –
end, folosit pentru a plicaț ii web dinamice.
Prima versiune, Angula rJS, a fost lansata în anul 2010, având ca avantaj transformarea de
documente bazate pe HTML în conținut dinamic. Înainte de apariț ia AngularJS, HTML se baza pe
conținut static .
Probleme tehnice și de performanța au condus la apariț ia unor versiuni noi :de la Angular 2 –
scris în Typescript pana la lansarea lui Angular 7 pe 18 O ctombrie 2018, versiune folosită pentru
implementarea a plicaț iei software descrise în cadrul acestei lucrări.
Conform [ 4], beneficiile aduse sunt:
1. Arhitec tura bazata pe componente incep ând cu Ang ular 2 – Fiecare pagina poate să conț ină
una sau mai multe componente, ele fiind independente unele de celelalte.Aceste componente
pot fi reutilizate în interiorul a plicaț iei. Dato rita independenț ei, acestea pot fi usor înlocuite
cu implementă ri mai bune, iar codul poate fi citit mai uș or de către dezvoltatori.
2. Directive – permit crearea de conț inut dinamic folos ind HTML. Directivele sunt funcț ii care
se executa de fiecare data c ând compilatorul le gaseș te în DOM (Document Object Model) .
Conform [ 5], DOM se referă la o interfață de programare a a plicaț iilor creată pentru
documente HTML și XML . Este folosit pentru a defini structura logică a documentelor. Pe
lângă directivele care se gă sesc în Angular, dezvoltatorul poate crea directive proprii.
3. TypeScript – este un limbaj de programare care se compilează în JavaScript. Acesta este mai
ușor de folosit, codul este mai curat și mai uș or de citit. Typescript oferă sugestii pe masură
ce se adaugă cod și oferă posibilitatea de auto -completare a codului .

7
Printre punctel e slabe ale Angular -ului se numără numă rul mare de update -uri deoarece
majoritatea update -urilor au adus schimbări semnificative cre ând probleme pentru dezvoltatori. Un
alt dez avantaj il reprezintă documentația limitată ceea ce face ca limbajul să fie mai greu de învaț at
de către dezvoltatori.

3.2. HTML ( Hyper Text Markup Language)
Asa cum este prezentat in [6], HTML -ul este un limbaj folosit pentru crearea de pagini și
aplicaț ii web. Acesta foloseș te tag -uri pentru a sep ara textul normal de codul HTML Fișier ul
HTML este citit de către browser care transformă textul în pagini web . Fiecare tag indeplinește o
funcție diferită. HTML folosit împreună cu JavaScript și CSS aduce u n plus de putere acestuia,
form ând un set de tehnologii de bază . HTML este limbajul folosit de către template -urile Angular.
Dupa cum este prezentat în [7], beneficii ale utiliză rii HTML sunt:
 HTML este ușor de î nteles și de utilizat
 toate browserele suportă HTML
 HTML este gratuit
 sintaxa HTML și XML este similară

3.3. CSS (Cascading Style Sheets)
Așa cum este prezentat in [6], CSS este un limbaj care descrie stilul unui document HTML,
modul în care elementele HTML sunt a fișate pe ecran. Defineș te design -ul, layout -ul,
culorile,fonturile și modul de afișare în funcț ie de dimensiunea ecranului sau de tip ul de dispozitiv.
Aceste definiț ii de stiluri sunt salvate în fișiere cu extensia .css.
Conform [ 8], printre beneficiile obț inute în urma folosirii CSS -ul se numără :
 consistenț a: prin modificarea foii CSS, aceasta se poa te reflecta automat asupra fiecă rei
pagini, ceea ce duce la economisirea timpului și la consistenț a stilului în întreaga aplicație.
 compatibilitatea cu browserul.
 motoarele de că utare nu vor avea probleme în citirea conț inutului fișier elor CSS
 Ușor de updatat și de intreț inut.

8
3.4. Bootstrap
Așa cum este prezentat în [9], Bootstrap este un framework folosit pe partea de front -end,
flexibil și simplu de utilizat , dezvoltat pentru a crea site -uri dinamice sau a plicaț ii web. Este
compatibil cu majoritatea browserelor, și ajustează layout -ul paginilor web în funcț ie de
caracteristicile dispozitivului utilizat. A apă rut în anul 2011 iar în 2014 a fost lansată ultima
versiune Bootstrap 4. Bootstrap c onține 3 tipuri de fișiere:
 bootstrap.css – framework CSS
 bootstrap.js – framework JavaScript/jQuery
 glyphicons – un set de fonturi
Pentru a putea fi folosit, Bootstrap necesita jQuery (bibliotecă JavaScript).
Pentru instalarea în Angular se execută comanda din figura 1 în directoru l în care a fost creat
proiectul, dupa care se importă fișier ul .css în ‘angular.json’ sau direct în ‘src/style.css’.

Fig.1. Comandă instalare bootstrap Fig.2. Comandă instalare jQuery

Pentru instalare jQuery se execută comanda din figura 2 în directorul proiectului și se importă
fișier ul ‘jquery.min.js’ în ‘./angular -cli.json’ în secțiunea de ‘scripts’.
Conform [ 10], avantaje ale folosirii Bootstrap sunt:
 este open -source și gratuit
 viteza de dezvoltare: deoarece nu tre buie scris cod de la zero ci se pot folosi b locurile de cod
puse la dispoziț ie de bootstrap. Acestea se pot î mbina cu c od CSS pentru a imbunătăț i
design -ul. Exista teme bootstrap care se pot cumpă ra pentru a economisi timp.
 Poate fi particularizat: se pot alege aspectele ce sunt sau nu necesare pentru a crea un
website customizat precum tabele, butoane, navbar și alte elemente.
 capacitatea de reacție: ajustarea dinamică a site-ului la o rezolutie corectă se datorează
layoutului receptiv și sistemulu i de 12 coloane.
 Consistența: site -ul funcț ioneaz ă la fel pentru oricare browser.

9

3.5. Symfony

PHP este un limbaj de programare server -side utilizat pe partea de back -end. Este folositor în
interacți unea cu baza de date prin trimiterea și recepționarea d atelor,Necesită un timp foarte scurt
pentru a se conecta la baza de date . De asemenea, este un instrument utilizat pentru comunicarea cu
partea de client, front -end.
Asa cum este prezentat în [11], Php e ste usor de folosit, fiind o rganizat ,curat și simplu, având
sintaxa asemănă toare cu limbajul C. Av ând în vedere că viteza este o cerință importantă în
dezvoltarea aplicațiilor web, PHP este considerat ca fiind cel mai rapid limbaj de programare. Un alt
avantaj important îl reprezintă faptul c ă PHP este open -source.
Unele dintre cele mai mari companii folosesc PHP: Facebook, Wikipedia, AliExpiress, Drupal.
Printre cele mai p opulare frameworkuri PHP se numără Symfony și Laravel.
“Symfony este un set de Componente PHP, un framework de A plicaț ii Web, o Filosifie și o
Comunitate – toate lucr ând împreună în armonie” . [12]
Așa cum este prezentat în [13], beneficiile aduse sunt urmă toarele:
1. Flexibilitate – Symfony , foloseș te modelul arhitectural MVC, fiind compatibil cu diverse
sisteme de baze de date. Acesta integreaza Bundle -uri și Componente. Bundle -urile sunt
pachete de fișier e folosite pentru implementare a de caracteristici, fiecare av ând o
functionalitate unică , put ând fi reconfigurate și reutilizate pentru mai multe a plicaț ii.
Componentele sunt bibliotec i PHP. Componentele și Bundle -urile sunt folosite cu scopul de
a elimina dependențele din arhitectură ceea ce duce la creșterea flexibilităț ii.
2. Ușor de testat – pentru testare unitară se foloseș te PHP Unit Independent Library, oferă de
asemenea instrumente bune pentru testarea functională .
3. Rapid și ușor de dezvoltat cod – Symony consumă puțină memorie și permite utilizatorilor
să creeze a plicaț ii performante.
4. Documentație bună – Documentaț ia pentru Symfony este una dintre cele mai bu ne dintre
frameworku rile PHP, fiind bine structurată și conținând exemple elocvente, actualizată de la
versiune la versiune.
Symfony este un framework de PHP puternic care prin folosirea de bundles și componente
aduce un plus pentru crearea de a plicaț ii complexe.
Printe cele mai importante brand -uri care folosesc Symfony se numără : Spotify care are peste 75
de milioane de utilizatori activi, V ogue France sa u NatGeo Play France, conform [1 4].

10
3.6. MongoDB
Printre cele ma i cunoscute baze de date nerelaționale se numără : MongoDB, Cassandra, Hbase.
Acestea nu urmează modelul relaț ional oferit de bazele de date relaț ionale, fiind folosite în
special pentru a plicaț ii care stochează o cantitate mare de date. Bazele de date nerelaț ionale sunt
mai flexibile și mai sc alabile în relație cu bazele de date relaț ionale. Asa cum este prezentat în [15]
acestea conțin urmă toarele caracteristici:
 bazele de date NoSQL vor putea f i mai ușor actualizate pentru a putea face față
modificărilor cerinț elor a plicaț iei spre deosebire de bazele de date SQL.
 pot manipula volume mari de date structurate, semi -structurate sau nestructurate.
 MongoDB este open source ceea ce duce la un cost scăzut de implementare a a plicaț iei.
 permite adăugarea de c âmpuri noi în orice moment, iar date le diferite pot fi stocate
împreună , în comparație cu bazele de date relaț ionale.
Spre deosebire de bazele de date SQL unde trebuie setate chei primare și străine și trebuie avut
în vedere utilizarea de constr ângeri , bazele de date NoSQL stochează datele fără mecanisme
explicit e de legare a datelor din colecț ii (denumite tabele în SQL) diferite. Inregistră rile sunt stocate
ca documente BSON. BSON este o reprezent are binară a documentelor JSON.
3.7. Docker
Docker este un instrument folosit pentru dezvoltarea, instalarea și rularea a plicaț iilor. Docker
inglobează aplicaț ia împreună cu toate dependențele ei î ntr-un containe r de Docker astfel î ncat
aplicaț ia va putea funcț iona în orice mediu.
Asa cum este prezentat în [16], Docker este o pla tforma software de virtualizare care automatizeaza
implementarea a plicaț iilor în containere software, concepută în principal pentru Linux și Windows.
Containerele de Docker sunt in stanț e ale imaginilor de Docker.
Conform [16], o imagine este un pachet sofw are bazat pe mai multe niveluri care c onține cod,
fișier e, biblioteci de sistem și setări.Acestea pot fi reutilizate și în alte proiecte pentru economisirea
de timp.Imaginile pot fi create complet de la zero sau pot fi descarcate de pe Docker Hub.
Utilizatorii de Docker stochează imaginile pe Docker Hub, a ceasta fiind cea mare bibliotecă și
comunitate pentru imaginile containerelor.
Imaginile se creeaz ă automat prin rularea instrucți unilor din Dockerfile. Acesta c onține comenzile
necesare pentru a c rea o imagine, fiecare instructiune reprezintă un nivel read-only. În urma rulă rii
imaginii și generă rii container -ului se adaugă un ‘writable layer’ deasupra c elorlalte niveluri . Toate
modifică rile care au loc în container -ul curent ce implică stergere,s criere, modificare de fișier e se
scriu în acest layer. Imaginile devin containere în timpul execuț iei.

11

Fig.3 .Containere conform [ 17] Fig.4 . Masini virtual e conform [ 17]
Așa cum este prezentat în [17],spre deosebire de mașinile virtuale care includ fiecare o copie a
unui sistem de operare, fișier e binare și biblioteci, containe rele pot rula mai multe pe aceași mașină
folosind în comun kernelul sistemul ui de operare intre ele, rul ând ca procese izolate în spațiul
utiliza tor. De aceea containerele ocupă mai puțină memorie de ordinul zecilor de MB spre deosebire
de masinile virtuale care pot ocupa pana la cațiva zeci GB, astfel înca t pot gestiona mai multe
aplicaț ii. Aș adar cont ainerele sunt mai eficiente decâ t maș inile vir tuale.
Din următoarele cifre se observă că popularitatea rulă rii aplicaț iilor în containere față de maș ini
virtuale este în plină creș tere conform [ 18]:
 2 din 3 companii care î ncearcă Docker î l și adoptă .
 Docker rulează pe mai mult de 20% dintre gazde în anul 2018
 PHP, Java, Ruby și Node sunt principalele frameworkuri utilizate în containere.
Printre cele mai mari compa nii care folosesc Docker se numără : ING, Paypal sau Spotify.
Acesta a crescut în popularitate datorită urmă toarelor avantaje:
 flexibilitate : orice a plicaț ie poate fi integrată în containere.
 se creează și se rulează mult mai repede a plicaț ii care folosesc containere
 portabil : a plicaț ia se poate implementa local, deploy în cloud și poate rula oriunde

12

Capitolul 4. Aplicaț ii similare

În urma studiului realizat au fost identificate câteva a plicaț ii web destinate gestiunii activității
de voluntariat asemănă toare cu a plicaț ia software dezvoltată în cadrul proiectului de diplomă.
Majoritatea acestor aplicații sunt folosite în școli, biserici, business -uri sau a sociaț ii
profesionale și au ca scop inscrierea online la evenimentele dorite de voluntar, programarea online a
orelor de către acesta și oferirea de suport online.
Conform [ 19], The School V olunteer este o a plicaț ie web asemănă toare cu aplicaț ia software
implementată, creată special pentru folosire în școli. V oluntarul se poate loga, poate vizualiza
informați ile personale și se poate î nscrie la even imente de voluntariat. Un plus î l constituie
posibilitatea de trimitere de email -uri de către voluntari și de către administratorul de sistem
difer itelor comitete care organizează activități le de voluntaria t sau voluntarilor. Este permisă
trimiterea de email -uri cu scopul de a cere ajutor. V oluntarul are posibilitatea de a descărca anumite
rapoarte. Preț ul utilizăr ii aplicației este de 0.16$/lună .
În comparatie cu majoritatea a plicaț iilor de management al voluntarilor de pe piata, a plicaț ia
implementata în cadrul proiect ului de diplomă pune accent pe î nscrierea la un singur program de
voluntariat la un anumit moment de timp și are ca scop automatizarea activităților administrative
legate de înscrierea voluntarilor, generarea și gestiunea documentelor necesare conform Legii
78/2014 pe baza datelor primite de la voluntari și reprezentanți i asociației de voluntari .
Utilizarea aplicației este gratuită. Un beneficiu important î l constituie modul prin care
utilizatorul poate să completeze datele personale prin încă rcarea fotografiei făcute cărții de
identitate și prelucrarea automată a imagini i cu scopul de recunoaștere optică a caracterelor. Alte
beneficii sunt re prezentate de generarea automată de contracte, rapoarte de activitate și certificate de
voluntariat dar și prin completarea prin intermediul a plicaț iei a fișei de voluntariat de către acesta
sau de către coordonatorul de voluntariat care răspunde de activitatea sa. Atât coordonatorul câ t și
secretariatul au posibilitatea de a trimite e -mailuri către fiecare voluntar.

13

Capitolul 5. Documentația tehnică
5.1 Proiectare
Fig.5. Modul de functionare al a plicaț iei
Aplicaț ia dezvoltată în cadrul proiectului de diplomă are trei componente, după cum urmează:
partea de front -end dezvoltată în Angular, partea de backend pentru care s -a folosit Symfony și
baza de date MongoDB. Toate cele trei tehnologii au fost descrise pe scurt în capitolul 3.
Front -endul rulează pe client (browser) și afișează informaț iile către utilizator. Browserul poate
să citească limbajul HTML și Javascript și să-l transforme în pagini web. Din front -end se trimit
request -uri către back -end pentru a primi anumite date necesare a fișării paginii sau pentru a
introduce date în baza de date. Partea de back -end ruleaza pe un server web, în cazul de față Nginx
și se conectează la o bază de date MongoDB numită “licenta” pentru a actualiza informaț iile sau a
prelua date necesare transmiterii mai departe în front -end.
Baza de date stochează toate datele păstrate în colecții necesare pentru funcț ionarea a plicaț iei
precum: datele utilizatorului necesare pentru login, datele fi ecărui voluntar și ale o rganizaț iei, c ât și
documentele necesare gestiunii tuturor informațiilor și activităților : fișa de voluntar, contract, raport
de activitate și certificatul de voluntar. Colectiile din baza de date vor fi descrise in subcapi tolul 5.2.
O dată ce partea de back -end a terminat de lucrat cu baza de date, aceasta va trimite un răspuns
către front -end care va include informaț iile cerute de partea de front -end.

14

Fig 6. Structură fișier e Docker

Pentru a î ngloba a plicaț ia s-a folosit Docker. Se poate observa în figura 6, structura de
directoare și fișier e necesare pentru a utiliza Docker.
Așadar s -a creat c âte un container pentru partea de front -end, back -end , ngnix, și mongodb.
Pentru a crea contai nerele de docker a fost nec esară crearea de imagini. Fiecare imagine a fost
creat ă de la zero . Fiecare proiect c onține în folderul să u un fișier de instrucț iuni, Dockerfile, pen tru
a specifica imaginea de bază și modificarile care vor fi fă cute.
Dupa cum s -a precizat în [20], fiecare fișier Dockerfile c onține o serie de comenzi.
 FROM – este prima comandă din fișier și indică imaginea de bază pentru crearea unei noi
imagini
 RUN – execută comenzi în timpul procesului de creare a imaginii
 ADD – copiază un fișier de pe masina gazdă în noua imagine de docker.
 ENV – conține variabilele de mediu
 CMD – executa comenzi c ând se construieș te un container nou din imaginea de docker.
 WORKDIR – creează directorul în care se vor executa comenzile CMD
 USER – seteaza user -ul pentru containerul cr eat
 VOLUME – permite accesul î ntre container și gazdă .
 EXPOSE – portul care va fi expus.

15

5.1.1 Creare imagine pentru backend
Se creează fișier ul Dockerfile care are pe prima linie comanda: FROM php:7.2-fpm-alpine
pentru a descă rca imaginea de baza php. În continuare se actua lizează o serie de pachete folosind
comanda RUN apk add –update –no-cache –virtual nume_pachet . Optiunea –update
aduc e indexul curent al pachetului î nainte de a instala pachetul.Optiunea –no-cache se foloseș te
pentru a nu stoca i ndexul pachetelor în cache la nivel local. Folosind această optiune nu este nevoie
de utilizarea comenzii rm –rf /var/cache/apk/* pentru a șterge cache -ul. Opț iunea ‘ –virtual’
se folosește pentru a str ânge o serie d e pachete sub un anumit grup. Așadar pachetele adă ugate sub
‘–virtual’ pot fi ș terse deodata sub forma unui grup.
În continuare se instalează composer c are este un manager de dependinț e pentru PHP, folosit
pentru instalarea de pachete du pa care se instalează configuraț ia de PHP.
Fișier ele de configuraț ii se gă sesc in folderul docker/php/conf.d / și dock er/php/pool.conf.d.
Acestea conțin informaț ii despre dimensiunea cache, timezone, debug, userul și grupul sau portul pe
care ascultă . Se expune portul 9000 cu ajutorul comenzii: EXPOSE 9000 .
5.1.2 Creare imagine pentru frontend
Prima linie din fișier ul Dockerfile din directorul proiectului ‘licenta_web’ c onține comanda
FROM node:10.12.0 care are ca scop descărcarea imaginii de bază node.
In continu are se setează directorul în care se vor executa comenzile ca fiind /var/www/licenta_web.
Se setează variabilele de mediu și se instalează npm după care se porneste a plicaț ia.Apoi se
specific ă că pe portul 4200 va asculta containerul.
5.1.3 Creare imagine nginx
Dockerfile -ul de nginx definește î n primul rând imaginea de bază FROM alpine:3.7 . Se
instalează apoi pachetul nginx cu ajutorul comenzii RUN apk add –update nginx .
Se copiază fișier ul de configuraț ie nginx.conf în etc/nginx. Fișier ul nginx.conf conține un bloc
denumit “e vents” folosit pentru a seta opțiunile globale care ilustrează modul în care Nginx se
ocupă de conexiuni la nivel general. Fiecare fișier de configuratie poate avea doar un bloc “events”.
Acest bloc mai c onține numă rul de conexiuni pe care fiecare worker il poate trata și dacă workerul
poate trata doar o una sau mai m ulte conexiuni la un moment dat așa cum este prezentat in [21].

Fig 7. blocul events

16
Un alt bloc pe care î l conține fișier ul ngi nx.conf este cel http, acesta păstrează cea mai mare
parte a configuraț iei și conține directivele necesare pentru a caracteriza modul în care programul
tratează conexiunile HTTP. Unele dintre cele mai importante setă ri din acest fișier sunt urmă toarele:
 server_tokens off; #directiva folosita pentru a a fișa versiunea Nginx pe
paginile de eroare
 error_log off; #dezactivează logarea erorilor
 access_log off; #dezactiveaza scrierea inf ormațiilor legate de request –
urile clientilor ;
 tcp_nodelay on; #dezacti veaza algoritmul Nagle care strâ nge pachete mici
într-un pachet mai mare după care îl trimite cu o mică intâ rziere;
 gzip on; #permite compresi a gzip
Alte fișier e de configuratii sunt ‘licenta_api.conf’ și ‘licenta_web.conf’ care conț in în blocul
‘server’ numele serverului pentru api și pentru web:
 server_name api.licenta.local;
 server_name licenta.local;
În final se expune portul pe care va asculta containerul : EXPOSE 80
Pentru a crea un container pe baza unei imagini se foloseș te comanda din Fig. 8.:

Fig 8. Comanda creare imagine
5.1.4 Docker -compose.yml
Un alt mod de a crea containere este cu ajutorul fișier ului ‘docker -compose.yml’ care c onține
configuraț ia pentru a crea containerele, expune porturile și conecta containerele prin retea, dupa
cum este prezentat în [22].
Fișierul ‘doker -compose.yml’ se poate observa în figura 9. Serviciile din ‘docker –
compose.yaml’ sunt containere în producție. Un serviciu rulează o singură imagine. în continuare se
vor prezenta noț iunile din acest fișier :
 ‘image’ : serviciile care nu iși construies c imginea pe baza fișierului Dockerfile utilizează
acest câmp ce conține imaginea.În acest caz serviciul mongo își ia imaginea mongo:3.6.
 ‘build’: serviciile nginx, licenta_api și licenta_web își construiesc imaginea din f ișierele de
Dockerfile create pent ru fiecare dintre ele.

17
 ‘depends_on’: exprimă dependinț ele dintre servicii, acestea pornind în ordinea
dependințelor. Aș adar ordinea în care vor porni serviciile este urmatoarea: mongo,
licenta_api, licenta_web, nginx.
 ‘env_file’ : c onține fișierul de varia bile de mediu al fiecarui serviciu.
 ‘network’: fiecare container este inclus în reț eaua declara tă în fișier și poate fi contactat de
alte containere din acea rețea. Pentru a crea o reț ea în afără fișierului ‘docker -compose.yml’
se foloseș te comanda ‘docker network create [OPTIONS] NETWORK’
 ‘volumes’: asa cum este prezentat în [23], toate f ișierele create în container sunt ș terse c ând
container -ul nu mai există .V olumele se folosesc pentru ca datele generate sa fie persistente și
după ce container -ul se opreș te. C ând se montează un volum î ntr-un container, directorul în
care a fost stocat volumul este montat în container. În ‘docke r-compose.yml’ sintaxa este
urmă toare: “volumes: -field1: field2: field3”. Primul c âmp reprezintă numele volumului, al
doilea c âmp reprez intă calea unde directorul este montat în container iar al treilea c âmp este
optional și reprezintă o serie de opț iuni.

Fig 9. Fișier ul docker -compose.yml

Pentru a crea volume în afara ‘docker -compose.yml’ se poate rula comanda ‘ docker volume
create ’ iar pentru ștergerea lor se foloseș te ‘docker volume prune ’.
O dată creat f ișierul ‘docker -compose.yml’ se rulează comanda ‘ docker -compose up ’ care
construieș te imaginea de mong o, imaginile din Dockerfile, reț elele declarate în fișier și porneș te
cele patru containere nou create: docker_licenta_web_1, docker_licenta_api_1, docker_mongo_1 și
docker_ngnix_1.

18
Comanda ‘ docker -compose build’ citește fișierul și caută serviciile care conțin ‘build’, apoi
construieș te imaginea din f ișierul Dockerfile. O dată schimbat conț inutul f ișierului Dockerfile este
necesar să se ruleze ‘ docker -compose build ’ pentru a reconstrui containerul cu imaginea cea nouă .
Pentru a porni un container se foloseș te comanda ‘ docker start CONTAINER ’ iar pentru
oprirea lui se foloseș te ‘docker stop CONTAINER ’.

19
5.2 Implementare baza de date
Fig.10. Diagrama de clase
În baza de date exist ă următoarele colec ții:V olunteer, O rganizat ion, Contract, Certificate,
ActivityReport, V olunteerFile, User și AccessToken. Fiecare d intre acestea conț in câmp urile
prezentate în diagrama de clase din figura 10 .

20

5.3 Descrierea a plicaț iei

Fig.11. Structura backend Fig.12. Structura frontend

În figura 12 se poate observa structura părț ii de frontend. în primul r ând fiecare modul
( contract, volunteer, activityReport, auth, user) c onține un director components care include
componentele folosite, fiecare cu logica sa. O componenta are un f ișier typescript, html și css.
Directorul models c onține interfeț e pr ecum volunteer, certificate, o rganizaț ion, contract,
specifice fiecă rui modul. Aceste modele pot fi utilizate pe tot parcursul a plicaț iei.
Din cele prezentate in [2 1], Resolverul reprezintă o clasă , fiind un cod intermediar care se
execută când utilizatoru l a fă cut click pe un link și înainte ca respectiva componentă sa fie
incărcată. În clasa resolverului se importă interfaț a “Resolve” din ‘@angular/router’ dupa care se
rescrie metoda resolve(). Aceasta va returna o valoare care poate fi colectată în ngOnInit -ul
componentei c are este pe punctul de a se incărca. (ngOnInit este prima funcție care se execută într -o
componentă ).
În aplicaț ie se foloseș te resolver pentru paginile de detalii de voluntar. Acesta returneaza
volunta rul din baza de date astfel î ncat datele despre acesta vor fi obținute î nainte de vizualizarea
componentei. Se mai folosesc resolveri pe paginile de detalii a o rganizaț iei pentru returnarea
organizaț iei, pe paginile de editare a raportului de activitate, sau pe paginile de editate de user.
Așadar resolverii sunt folosiț i când este nevoie de obținerea datelor înainte ca pagina sa se fi
incărcat. Majoritatea cazurilor fiind pentru paginile de editare sau de detalii ale unei entităț i.
Majoritatea serviciilor f olosite sunt clase care fac l egătura cu partea de backend. Acestea sunt
denumite ‘numeColect ieBazaDate.api.service.ts’. Conț in metode precum create(), get(), list() sau
delete() și trimit request -uri spre api după care returnează conținutul din ră spuns:
 create(body) trimite request -uri de post, folosit pentru a introduce datele trimise ca argument
în baza de date

21
 list(query) trimite un request de get pentru preluarea datelor din colecțiile corespunză toare .
Se pot trimite ca argument câmp urile dupa care să se filtreze, sorteze sau offsetul și limita
necesare pagină rii.
 delete(id) trimi te un request de delete pentru ștergerea din baza de date a înregistră rii cu id –
ul respectiv
 edit(id, body) trimite un request de patch pentru editarea înregistră rii cu id -ul respectiv, cu
datele trimise în parametrul body.
Aceste servicii sunt importate în componente, dupa care sunt folosite pentru a lucra cu baza de
date. Alte metode folosite în servicii mai sunt cele pentru trimiterea de email -uri și pentru generarea
de docu mente pdf și excel.
Trecând mai departe la structura de backend din figura 1 1, regă sim în primul r ând Controllere.
Acestea sunt functii PHP care citesc informaț ii din request și creează și returnează un obiect de
răspuns . Aces t răspuns este de tip JSON s au în cazul generării de documente , o descă rcare de
fișier. Fiecare colectie din baza de date are cate un controller. Fiecare controller este denumit
“NumeColectieController.php”
Pentru a nu pune foarte multă logică în controllere se folosesc useCase -urile care vor fi
importate în controllere. Acestea conțin codul necesar generă rii de pdf -uri și excel.
Documentele sunt clase care conț in câmp uri specifice, în corelație cu baza de date. Aș adar
pentru a introduce sau a aduce obiecte din baza de da te, se mapeaza câmp urile sale la intrări ale
unei colecț ii MongoDB. Printre aceste clase gă sim: V olunteer, ActivityReport, User, Certificate,
AccessToken, O rganizaț ion și Contract.
Repository -urile sunt folosite pentru a izola și reutiliza query -urile mai complexe. Pentru fiecare
document s -a creat o cl asa de repository care stochează query -urile. Fiecare repository este denumit
“numeColectieRepository.php” și extinde clasa “DocumentRepository".
În cele din urmă în directorul de Security s -au introdus toate fișierele necesare pentru realizarea
partii de autentificare.
Aplicaț ia poate fi accesată de către 4 tipuri de utilizatori: admin, coordonator, voluntar și decan.
Pentru fiecare dintre aceștia există cate un rol: ‘role_VOLUNTEER’, ‘role_DEAN’,
‘role_ADMIN’, ‘role_COORDINATOR’.
În continu are se vor descrie functionalităț ile aplicaț iei și modul în care au fost implementate.
1. Crearea de conturi.
Pagina de creare de conturi poate fi acces ată doar de către utilizat orii cu rol de admin sau rol de
coordonator. Se completeaza de către aceștia numele, prenumele, username -ul,parola și rolul
utilizatorului nou creat. Toate câmp urile sunt obligatorii, validarea se face atât pe partea de frontend
cat și pe partea de backend. Mesajele de eroare sunt a fișate în dreptul câmp urilor respective.

22
Adminul poate sa creeze conturi cu rol de admin, coordonator și decan iar coordonatorul
creează conturi cu rol de voluntar. Așadar coordonatorii vor fi creaț i de către admini iar vo luntarii
de către coordonatori. Aceste date vor fi introduse în baza de date în tabela “User”, î ntr-un
document nou.Î nainte ca parola să fie introdusă în baza de date, pe partea de backend, aceasta se
criptează cu un algoritm bcrypt iar hash-ul se adaugă în baza de date. Pentru criptare s -a folosit
funct ia ‘encodePassword()’ a interfeț ei UserPasswordEncoderInterface.
Când un coordonator creează un cont nou pentru un student, în baza de date, în noul document
se va adă uga un câmp numit ‘coordinator’ care va c onține id-ul, numele și prenumele
coordonatorului. Asadar se va putea face legatura î ntre coordonator și voluntari.
O data creat un cont, utilizatorul nou va primi automat un email de confirmare a contului în care
își va găsi username -ul și parola . Pentru tr imiterea de email -uri se foloseș te pe partea de backend un
bundle numit SwiftmailerBundle. Pentru instalarea lui se rulează din container -ul de licenta_api
comanda : composer require symfony/swiftmailer -bundle. Pentru a trimi te un email i se atribuie
unei variabile o instanta de Sw ift_Message dupa care se setează expeditorul cu functia setFrom(),
destinatarul cu functia se tTo() iar cu setBody() se adaugă mesajul care este scris într-un fișier
‘emai l.html.twig’.In final se cree ază o ins tanță de Swift_Mail căreia i se apelează metoda send()
conținând ca argument variabila creată anterior. în acest email se găseste un mesaj de întampinare al
utilizatorului împreună cu username -ul și parola . Este indicat ca parola primită să fie modificată la
prima autentificare în cont.
2. Schimbarea parolei
Un user auten tificat are posibilitatea de a -și schimba oric ând parola. Prin accesarea meniului
Detalii Cont, Schimbare parola se introduc parola veche și parola noua. Prin introducerea paro lei
vechi se verifică pe partea de backend dacă aceasta corespunde cu cea di n baza de date cu ajutorul
funcției isPasswordValid() a intefeț ei UserPasswordEncoderInterface , în caz de succes parola veche
introdusă va fi modificată cu cea nouă .
3. Autentificare
Pentru autentificarea unu i utilizator se introduc credenț ialele: username -ul și parola. Cele doua
date sunt prel uate de backend unde se verifică veridicitatea lor. Dacă unul dintre cele două câmp uri
nu a fost introdus de către utilizator se aruncă o excepț ie iar r ăspunsul va avea statusul 401
Unauthorized, iar pe ecran se va a fișa mesajul ‘In valid login credentials’. Același ră spuns va fi
primit și în cazul în care parola nu este validă .
In caz de succes se creează o instanță de AccesToken căreia i se setează câmp urile expiresOn,
token și username. Câmp ul ‘expiresOn’ c onține data logării plus 24 de ore. O dată depăsită această
dată userul va fi automat delogat. Câmp ul ‘token’ c onține un token generat aleator. Această instanță
este adaugată în baza de date în colecț ia “AccessToken”.
După ce utilizatorul s -a logat, pe partea de frontend se setează în localStorage accessTokenul.
Cu ajutorul unui serviciu creat numit Requ estInterceptorService se setează un header ‘X -Auth –
Token: valoareToken’ în request -uri, valoarea token ului fiind preluată din localSto rage. Acest

23
serviciu se apelează de fiecare dată când se va trimite un request. C ând request -ul va fi analizat de
backend se va verifica de către acesta dacă conține header -ul ‘X -Auth -Token’. Dacă header -ul
lipseș te se va ar unca o exceptie cu m esajul “Mis sing authorization token” iar ră spunsul -ul va avea
statusul 401 Unauthorized.
Un alt caz aparte este acela în care tokenul a expirat iar utilizatorul este î nca logat. C ând
backend -ul detecteaza faptul ca tokenul nu mai este valid la pri mirea unui request acesta aruncă o
exceptie cu mesajul “An authorization token is required”. În acest caz utilizatorul va fi delogat și
redirectat către pagina de login. Dacă tokenul corespunde cu cel din baza de date inseamnă ca
acesta este valid și se poate continua procesul.
Dupa logarea userului, în localStorage se setează pe langă accesToken și alte date după cum
urmează : un obiect de user care c onține numele, prenumele,u sername -ul și rolurile utilizatorului
logat iar în caz că acesta este voluntar va c onține și id-ul,numele și prenumele coordonatorului. Pe
lângă acestea se mai gă seste un flag numit loggedIn care atunci c ând nu există , userul este redirectat
către pagina d e login.
4. Dezactivare utilizator
Adminul are posibilitatea de a dezactiva un utilizator . Prin activarea acestei posibilități se
modifică în baza de date în colecția User, c âmpul isDisabled care din true devine false. În urma
acestei modificări nu se șterge nicio informaț ie din baza de date dar utilizatorul nu se va mai putea
loga. Contul poate fi din nou activat prin modificarea c âmpului isDisabled în true, utilizatorul
urmând sa își poata accesa din nou contul.
5. Crearea de pdf -uri
Prin intermediul a plicației se generează o serie de pdf -uri, dupa cum urmează : doua cereri de
voluntar, fișa de voluntar, contractul, raportul de activitate și certificatul de voluntariat.
Pentr u aceste documente este necesară completarea de către voluntar a unui formular care
conține datele din buletin ale acestuia, perioada de voluntariat și activități le care vor fi prestate.
Pentru salvarea acestor date se creează un post request al carui conț inut este un obiect ce c onține
datele voluntarului. O data ajuns e în backend, ele vor fi introduse în baza de date în colecț ia
V olunteer. Adminul completează datele o rganizaț iei gazdă : numele o rganizaț iei, adresa, numele și
funcț ia reprezentantului.Datele sunt trimise print -un post request spre backend unde sunt introduse
în colectia O rganizat ion.
Pentru a genera pdf -uri se foloseș te pe partea de backend un bundle numit TCPDFBundle.
Pentru instalarea lui se rulează din container -ul de api comanda ‘ composer require
jonasarts/tcpdf -bundle ’.
Se creează o noua instantă de tcpdf prin apelarea funcț iei create(). Alte metode dispo nibile sunt
AddPage() pentru adă ugare de pa gină sau SetFont() pentru setarea fontului și a dimensiunii, metode
pentru setarea marginilor sau a paddingului, a titlului sau pentru setarea headerului și footerului,
setXY() pentru setarea abscisei și ordonatei poziț iei curente. Textul din pdf este scris într-un

24
fișier .html.twig care mai ap oi este randat. Pentru a scrie într -o celulă se foloseste metoda
‘writeHTMLCell() ’ care primește ca argumente lăț imea și înăltimea celulei, coor donata x și y din
colțul st âng al paginii, textul care va fi scris, alinierea textului sau b ackground -ul celulei. Se creează
un fișier temporar în sistem, dupa care se apelează metoda Output() care trimite documentul la o
destinație dată direct sub formă de răspuns . Aceasta are ca argumente numele f ișierului și destinaț ia
unde va fi trimis documentul.Al doilea argume nt ia valoarea ‘D’ cu semnificația că fișierul este
trimis în browser și se forț eaza descă rcarea acestuia cu numele dat de argument.
Pentru descărcarea pdf-urilor de către utilizator,prin apă sarea butonului de descă rcare , se trimite un
get request pentru a lua datele din baza de date și a crea pdf -ul, care este descă rcat automat în
browser.
5.1. Cererea de voluntar adresată Doamnei Președinte a Asociației Automatică și
Calculatoare cu scopul de a se înscrie ca voluntar in cadrul asociației.
Pentru generarea ei se trimite din front -end un request de get care c onține id-ul voluntarului care
generează cererea. Pe backend, cu ajutorul acestui id sun t extras e din baza de date, informațiile
necesare completă rii cererii precum: nume, prenume, perioada în care va activa ca voluntar, tipul de
voluntar, e -mailul, telefonul și activități le pe care le va realiza. Data curentă va fi completata
automat. Aceste date sunt introduce în fișierul ap plicaț ion.html.twig. Ră spunsul acestui request va fi
descarcarea în browser a f ișierului care va avea numele ‘voluntar_nume -voluntar_prenume –
voluntar.pdf’. Acest f ișier va putea fi descarcat a de către voluntarul respectiv, decanul și adminul.
5.2. Cererea de voluntar adresat ă Doamnei Decan a F acultăț ii de A utomatică și
Calculatoare pentru a aproba î nscrierea în contractul de studii a disciplinei
“Activi tatea de voluntariat” pentru obț inerea de puncte de credit sumplimentare.
Generearea este asemănă toare, dupa trimiterea id -ului voluntarului pr într-un request get se
extrag din baza de date numele, prenumele studentului, domeniul, programul de studii, anul
universitar și perioada. Este necesară extragerea n umelui o rganizaț iei din colecț ia Organisation.
Aceste date sunt introduse în fișierul ‘ap plicaț ion2.html.twig’ care mai apoi este descarcat în
browser.
5.3. Fișa de voluntar
Pentru generarea fișei de voluntar trebuie mai int âi completate de către voluntar sau
coordonatorul datele necesare acesteia. Dupa completarea formularului de către unul dintre cei doi,
prîntr-un post request se va introduce în baza de date un document bson care va c onține câmpurile
id, hoursPerDay, hoursPerNight, userId, un câmp activities care c onține un array cu câmp urile:
activity, description și un câmp responsabilities care este un array ce c onține câmp ul objective. Pe
langa acestea, documentul mai c onține un câmp programs care c onține un array cu câmp urile hours,
period și place. În concluzie, voluntarul sau coordonatorul poate adauga una sau mai multe a ctivități
de voluntariat. Fiecare activitate are o denumire, o descriere și una sau mai multe responsabilități.
Se pot adă uga unul sau mai multe programe de voluntariat f iecare dintre acestea având o perioadă ,
un numar de ore și un loc de desfășurare . Pe langa acestea se adaugă și numărul de ore desfăș urate
pe timpul zilei sau pe timpul nopții. O data completată fișa, aceasta poate fi editată de către voluntar

25
sau coordona tor și salvată în acelaș i document în baza de date. Pentru ușurința completă rii, s-a creat
un pdf static cu fișa de voluntar necompletată ce poate fi descărcată de către utilizator.
Pentru descă rcarea fișei de voluntar se trimite un get request cu id -ul fișei de voluntar, a ceasta este
preluată din baza de date, informațiile necesare sunt incă rcate în fișierul ‘volunteerFile.html.twig’
care va crea un pdf cu denumirea ‘ fișa_voluntar.pdf’.
5.4. Contractul de voluntariat
Acesta este generat de către admin. S e selectează prîntr-un checkbox voluntarii pentru care se
va genera contractul. O data apasă t butonul de generare de contracte, se preiau din colecț ia
Organisation date o rganizaț iei gazdă precum id -ul, numele, adresa, CUI -ul, și numele și functia
reprezentantului iar din colectia V olunteer datele voluntarului printre care id -ul, perioada și datele
care aparț in de buletin și se introduc în colecț ia Contract dupa care se genereaza cu aceste date
contractul în format pdf.
5.5. Raportul de activitate
Acesta este completat de către coordonatorul de volu ntari. Coordonatorul completează pentru
fiecare voluntar act ivitatea de voluntariat prestată, numă rul de ore, atribuț iile și responsabilităț ile
asumate, aptitudinile și competențele dob ândite. C ând se sal veaza raportul de activitate aceste date
împreuna cu numele și id-ul organizaț iei, numele și id-ul voluntarului sunt trimise în backend care
mai apoi le salvează în baza de date în colectia ActivityReport și se generează raportul de activitate
sub forma u nui pdf cu denumirea “activityReport_numeV oluntar_prenumeV oluntar.pdf”. Acest
raport de activitate poate fi mai apoi editat de către coordonator.
5.6. Certificatul de voluntariat
Certificatul de voluntariat este generat de către coordonator. Prin apăsarea butonului de
descă rcare a certificatului , se iau aut omat din baza de date din colecț ia Organisation datele
organizaț iei, din colecț ia V olunteer , date voluntarului și numele și prenumele coordonatoru lui, iar
din ActivityReport numărul de ore lucrate de vo luntary din câmp ul ‘workedHours’. Cu a jutorul
acestor date se salvează în MongoDB în colecț ia Certificate, certificatul pentru fiecare voluntar. O
data salvat, se poate genera pdf -ul pe baza datelor care sunt introduse în fișierul
‘certific ate.html.pdf’.Pdf -ul se salvează cu numele ‘certificat_prenu meV oluntar_numeV oluntar.pdf’.
Așadar pentru generarea certi ficatului, adminul nu trebuie să mai introducă nicio info rmatie manual,
acesta se folosește direct de informațiile din celelalte colecț ii din baza de date.
6. Generarea de excel
Adminul are posibilitatea de a genera un excel care c onține numele, prenumele, anul, emailul,
telefonul și coordonatorul tututror voluntariilor inscr iși în anul universitar curent. Pentru crearea lui
s-a folosit pache tul phpspreadsheet care s -a instalat din container -ul de docker a l proiectului de api.
Se rulează comanda: composer require phpoffice/phpspreadsheet . Se va adaugă pachetul ca o
dependintă în proiectul de Symfony și după care se va instala.

26
Se atribuie unei variabile denumita $spreadsheet o i nstanță de SpreadShee.Fol osind
SpreadSheet, codul este uș or de citit și de înteles. Se seteaza valorile celulelor cu metod a
setCellValue(). Aceasta primeș te ca a rgumente litera coloanei cu numă rul lin iei și valoarea. Mai
întai se setează celulele A1,B1,C1,D1,E1,F1 cu numele câmpurilor corespunză toare, apoi pentru
fiecare voluntar se adaugă datele acestuia pe cate o linie în celule. Se poate seta stilul: centrarea
textului, schimbarea fontului sau autodimensionarea coloane lor. S -a folosit metoda setAutoSize()
pentru autodimensionare. În continuare i se atrib uie variabilei $writer o instanță de Xlsx care ia ca
argument va riabila $spreadsheet. Se creează un fișier temporar în sistem cu numele ‘voluntari.xlsx’
în directorul te mporar al sistemului, dupa care se creează fișierul excel prin $writer –
>save($caleF ișier), apoi se returneaza f ișierul excel sub forma de atașament care este descă rcat în
browser.
7. Trimitere email
Adminul are posibilitatea de a trimite email către voluntari în orice moment. În urma apăsă rii
butonului Email din pagina de detalii a voluntarului se deschide un modal unde email -ul
voluntarului este deja precompletat, adminul urmând să completeze mesajul. Butonul de trimitere
de email -uri este dezactivat p ână când coordonatorul nu a introdus mesajul sau dacă email -ul nu
este completat corect. O dată apă sat buto nul cele doua date se introduc î ntr-un obiect care se trimite
prîntr-un post request procesat pe partea de backend. Pentru t rimiterea de mail -uri se folosește
acelaș i bundle SwiftMailer folosit și pentru trimiterea mailului care c onține username -ul și parola
utilizatorului nou creat. Se creeaza asemanator o instanta de Swift_ Message careia i se seteaza
expe ditorul cu setFrom(), destinatarul cu funcția setTo() iar mesajul cu funcț ia setBody( ) obț inute
din body -ul requestului.
8. Listările de tabele
Aplicaț ia conține două listă ri de tabele: listarea utilizatorilor și listarea voluntarilor. Pentru
aceasta a fost creat în Angular un serviciu gene ric care poate fi folosit de am ândouă . Acesta c onține
următoa rele metode:
 o metoda de setare a serviciului de api : setClient(). Serviciile de api c onține metode de
list(), create(), delete(), edit() care trimit request -uri spre baza de date și în funcți e de acestea
primesc ră spuns.
 getteri și setteri pentru offset, limit folositi pentru paginare,pentru filtre pentru cautare, și
pentru valoarea de sortare și câmp ul dupa care se face sortarea
 metoda numit ă doRequest() care str ânge toate aceste informaț ii într-un obiect numit
listQuery și il setează ca argument metodei de list() din serviciul de api setat :
this.client.list(listQuery );. Fiecare serviciu de api are o metoda list() care
trimite get request și primeste ca răspuns continutul colectiei respective din baza de date în
funcție de filtrele setate, sortare și limitele și offseturile trimise.
Asadar pentru a lista toti userii avem urmatoarele linii de cod:

27
1. this.listService .setClient (this.userApiService ); – se setează clientul ca fiind
serviciul UserApiService
2. this.listService .doRequest ();
3. this.listService .getList() – se obț ine lista de useri sub forma de Observable.
Pentru a seta filtre se foloseș te:this.listService .setFilters (filters);, unde
filters =[ {field: 'numeField' , operator: 'equals'/’in’, value: valoare}] .
Se poate filtra dupa mai multe filtre în același timp prin adă ugarea în array -ul filters a mai multor
obiecte.
Pentru sortare:
this.listService .setSortValue (valoare);
this.listService .setFieldValue (numeCâmp)
Paginarea se realizează prin setarea unei limite reprezent ând numă rul de elemente de pe p agină :
this.listService .setLimit (valoare) și apoi se setează offsetul:
this.listService .setOffset (offset). Offsetul este egal cu
(this.currentPage -1)*this.limit .

5.4 Prelucrare imagine
Pentru a uș ura completarea formularului cu datele personale ale voluntarului, s -a folosit un
mecanism de prelucrare automată a imaginii cu scopul de recunoaștere optică a caracterelor (OCR).
Recunoașterea optică a caracterelor este un proces de transformare a textului dintr -o imagine
într-un text care poate fi editabil. Pe ntru ca rezultatul să fie c ât mai exact es te indicat ca imaginea sa
fie cât mai curată .
Așa cum este preze ntat în lucrarea [22], procesul de r ecunoaștere optică a caracterelor c onține
în general mai multe etape:
1. Preprocesare – se aplică diverse operaț ii pentru creșterea calităț ii imaginii și reducerea
zgomotului.
2. Segmentare – delimitarea elementelor unui document precum textul de partea grafică , sau
liniile d într-un paragraf.
3. Extragerea de caracteristici – selectarea unor caracteristici folosite pentru a identifica
segmentul de text.

28
4. Clasificarea – identificarea și recunoașterea fiecărui element. Se bazează pe extragerea
caracteristicilor.
5. Postpr ocesarea – imbunătățirea recunoaș terii textului, se poate baza pe utilizarea
contextului.
Aplicaț ia foloseș te pe partea de frontend bibliot eca Tesseract.js care detectează automat textul și
suportă peste 60 de limbi. Tesseract este una dintre cele mai exac te teh nologii folosite pentru
recunoașterea optică a caracterelor. Din articolul citat în referinț a [23],am extras modul în care
Tesseract funcționează . În primul r ând se identifică și se analizează contururile componentelor .
Acestea sunt grupate sub formă de Blob -uri. Blob -ul est e o regiune formata dinr -un numă r mare de
pixeli cu caracteristici similare . Acestea se organizează apoi în linii de text iar fiecare linie este
separată în cuvinte în funcție de spaț iul dintre caractere. În continuare se incearcă recunoastereă
fiecărui cuv ânt. Fiecare cuv ânt care este recunoscut cu succes este trimis mai departe într-un
clasificator adaptiv. Asadar, clasif icatorul adaptiv are mai multe șanse de a recunoaste un cuv ânt cu
cât se înaintează în pagină . Dupa finalizare se parcurge din nou pagina deoarece unele cuvinte care
nu au putut fi recunoscute prima dată , ar put ea fi întelese a doua oară .
Pentru realizarea extrageri i textului din buletin, se citește imaginea selectată , se
redimensionează la 1200x600px, urm ând apoi transformarea imaginii în alb și negru.
Un pixel dintr -o imagine RGB este definit pe 3×8 biti, c âte 8 biti pentru fiecar e dintre cele 3
canale: red (roș u), green (verde), blue (albastru). Fiecare culoare poate avea o valoare intre 0 și 255.
Se alege un prag de 120 și se impune ca valorile roș u, verde și albastru ce formeaza un pixel și
sunt mai mari c a 120 să li se atribuie valoarea 255 ( alb) iar celor mai mici de 120 li se atribuie
valoarea 0 (negru). În continu are se taie imaginea astfel inc ât să se elimine fi gura persoanei din
partea stangă a pozei. Toate aceste operaț ii de prelucrare a imaginii s -au realiz at cu ajutorul
bibliotecii Jimp, documentata în referinta [ 24] .Aceasta s -a instalat folosind comanda npm install
–save jimp și conține metode pre cum read() pentru citire a imaginii, crop() – pentru a tă ia
imaginea, resize() – pentru redimensionare, greyscale() – pentru eliminarea culorilor din imagine,
contrast() – pentru setarea contrastului. Fo losind metoda scan() se scanează fiecare regiune din
imagine iar pentru fiecare pixel se verifică valoarea acestuia.
În cele din urmă, pentru obț inerea textului din imaginea de buletin se apelează pe imaginea
transformată metoda recognize() ce apartine bibliotecii Tesseract și se selectează ca limba, rom âna.
Ca răspuns se returnează un array care c onține fiecar e linie din buletin. Pentru obți nerea adresei,
locului de naș tere, data de expirare a buletinului, instituț ia de către care a fost emis, seria, numă rul
și cnp-ul, se caută dupa cuvinte cheie precum “adresă” sau “loc de naș tere”.
5.5 Diagrame UML – realizate în urma informatiilor din [25].
5.5.1 Diagrame UseCase
Figura 13 c onține diagrama cazurilor de utilizare unde sunt prezentate principalele acț iuni pe
care un utilizator poate sa le efectueze.

29
Descrierea cazurilor de utilizare :
Nume caz
de utilizare Completare date
personale Descarcă cereri
voluntar Validare voluntar Completare fișa
voluntariat
Descriere Utilizatorul
completează datele
personale în vederea
generă rii
documentelor
ulterioare Utilizato rul are
posibilitatea de a
descărca cele două
cereri de voluntary Utilizatorul
acceptă voluntarul
în cadrul
asociaț iei. Utilizatorul
completează
informațiile necesare
generă rii fișei de
voluntariat
Actori V oluntar V oluntar,
Decan ,Admin Admin, Decan V oluntar,
Coordonator
Preconditii Utilizatorul trebuie să
fie autentificat Utilizator logat
Datele voluntarului
există în baza de
date Utilizator logat
Cereri generate Utilizator logat
Flux normal Utilizatorul acceseaza
pagina “completare
date voluntar”,
introduce datele și
apasă butonul
salveaza pentru a
introduce datele în
MongoDB V oluntarul apasă
butonul
“cerere1”sau
“cerere2” din
pagina de detalii.
Ceilalț i actori
accesează pagina
de “lista voluntari”
și apasă unul dintre
cele doua butoane. Actorul accesează
pagina “listă
voluntari” și apasă
butonul
“validare”. V oluntarul apasă
butonul “completare
fișa voluntar din
meniu”, iar
coordonatorul apasă
butonul “ fișa” din
lista de voluntari din
tabel. Actorul
completează
informaț iile și apasă
butonul “salveaza ”.
Postconditii Dacă usecase -ul se
finalizează cu succes,
datele sunt introdus e
în baza de date în
colectia “V olunteer”
altfel se a fișează
utilizatorului o eroare In c az de succes
cererile sunt
descă rcate în
browser. In baza de date se
schimbă în
colecț ia V olunteer
valoarea câmp ului
status din
‘new_created’ în
‘is_accepted’ In caz de succe s,
datele sunt introdus e
în MongoDB în
colecț ia
V olunteerFile, altfel
se afișează un mesaj
de eroare

30
Nume caz de
utilizare Descarcă fișa
voluntar Completare date
organizaț ie Generare contract Completare raport
activitate
Descriere Actorul descarcă
fișa voluntarului . Actorul
completează
datele o rganizaț iei
gazdă Utilizatorul
genereaă automat
contractul
voluntarului Utilizatorul
completează
informaț iile necesare
raportului de
activitate
Actori Admin, V oluntar,
Decan,
Coordonator Admin Admin Coordonator
Preconditii Utilizatorul trebuie
sa fie autentificat
Fișa există în baza
de date Utilizator logat Utilizator logat
V oluntar acceptat
Organizaț ie gazdă
completată
Fișa voluntar Utilizator logat
Contractul este
generat
Flux normal V oluntarul sau
Coordon atorul
apasă butonul din
pagina de
completare a fișei
de voluntariat.
“descarcă fișa”.
Adminul și
decanul apasă
butonul “ fișa” din
lista de voluntari. Adminul
accesează pagina
“date o rganizaț ie
gazdă ” și
completează
datele du pă care
apasă butonul
‘salvează’ Utilizatorul
acceseaz ă pagina
“lista voluntari”.
Selectează
checkbox -ul din
dreptul
voluntarilor și
apasă butonul
“Generare
contracte” Coordonatorul
acceseaz ă pagina
“lista voluntari”.
Coordonatul apasă
butonul “raport” din
dreptul voluntarului
fiind redirec ționat
într-o pagină nouă .
Completeaz ă
informaț iile necesare
și apasă “salveaza”.

Postconditii Fișa de voluntariat
este descarcată în
browser. Datele sunt
introduse în
colec ția
“Organiza tion”.
În caz de eroare
se a fișează un
mesaj. Contractele sunt
descă rcate în
browser . în
colect ia
“V olunteer” se
schimbă statusul
în “has_contract” În caz de succes
datele sunt introduse
în colecț ia
“ActityReport ” și se
schimbă statusul în
“has_report”, altfel se
afieșază un mesaj de
eroare.

31

Nume caz de utilizare Descă rcare raport activitate Generare certificat de voluntar
Descriere Utilizatorul descarcă raportul de activitate
când acesta a fost completat. Actorul generează certificatul
pentru fiecare voluntar în parte.
Actori Admin, Coordonator Admin
Preconditii Utilizator logat
Există raport de a ctivitate Utilzator logat
Exista raport de activitate
Flux normal Actorul accesează pagina de listare de
voluntari și apasă butonul “raport”. În cazul
adminului raportul se va descă rca automat, în
cazul coordonatorului se deschide p agina de
editare raport iar după apăsarea butonului
salvează se descarcă automat raportul. Actorul acceseaz ă pagina de
listare de voluntari și apasă
butonul “certificat”.
Postconditii Raportul se descarcă în browser Certificatul este descă rcat.

Fig.13. Diagramă cazuri de utilizare

32
5.5.2 Diagrama de secvente

Fig 14. Diagrama de secvente pentru voluntar

Fig 15. Diagrama de secvente pentru decan

33

Fig 16. Diagrama de secvente pentru admin

Fig 17. Diagrama de secvente pentru coordinator
Diagrama de secvenț e are ca scop descrierea interacț iuniilor d intre clase. S -au realizat diagrame
de secvente din punctul de vedere al fiecarui actor.

34
5.5.3 Diagrama de a ctivități
Diagrama de a ctivități are ca scop descrierea fluxului procesului de gestiune al voluntarilor.

Fig 18. Diagrama de a ctivități
În figu ra 18, se ilustreaza fluxul urmă tor: volu ntarul completează atât cererea câ t și fiș a de
voluntar. Dupa ce adminul a validat cererea, a completat datele o rganizaț iei, fișa de voluntar există,
se generează contractul. În continuare, coordonatorul gene rează raportul de activitate, dupa care
adminul generează certificatul de voluntariat.

35
Fig. 19. Diagrama de activitate
În figura 19 este ilustrat fluxul urmator: voluntarul completează cererea iar coordonatorul
completeaza fișa de voluntar. Dupa ce adminul a validat cererea, a completat datele o rganizaț iei,
fișa de voluntar există, se generează contractul. În continuare, coordonatorul generează raportul de
activit ate, dupa care adminul generează certificatul de voluntariat.

Fig 20. Diagrama de a ctivități
In figura 20 este ilustrat fluxul următor: voluntarul completează cerer ea iar coordonatorul
completează fișa de voluntar. în acest caz cererea este validată de către decan,adminul a completat
datele o rganizaț iei, fișa de voluntar ex istă, se generează contractul. În continu are, coordonatorul
generează raportul de activit ate, dupa care adminul generează certificatul de voluntariat.
In figura 21 este ilustrat fluxul urmă tor: voluntarul completeaza cerereă și fiș a de voluntar. Cererea
este validată de către decan,adminul a completat datele o rganizaț iei, fișa de voluntar există, se
generează contractul. În continuare, coordonatorul generează raportul de activit ate, dupa care
adminul generează certificatul de voluntariat.

36

Fig 21 . Diagrama de a ctivități

37

Capitolul 6. Manual de utilizare

În acest capitol este descris modul de utilizare al a plicaț iei din perspectiva fiecă rui actor.
Pagina de autentificare este aceeaș i pentru fiecare u tilizator indiferent de rolul său.Pentru
autentificare se accesează url-ul www.licenta.local și se introduc numele și parola u tilizatorului
dupa care se apasă pe butonul de login.

Fig.22. Pagină login Fig.23. Meniu “Detalii Cont”
Pentru delogare se apasă butonul “Logout” din “Detalii Cont” al bar ei de navigaț ie. Pe ntru
schimbarea parolei se apasă buton ul “Schimbare parola” din același submeniu. Se deschide o pagină
care c onține detalii ale utili zatorului, doua input -uri în care trebuie introduse parola veche și parola
nou. Se apasă butonul “Save” pentru a modifica parola. Pagina se poate observa în figura 2 4.
Fig 2 4. Schimbare parola

38

6.1. Admin
Pentru crearea de utilizatori se apasă butonul “Creare utilizatori ” din submeniul “ Utilizatori ”.
Se deschide o pagină unde se introduc datele noului utilizator și se alege un ul dintre rolurile
posibile : administrator, coordonator sau decan. Se apasă butonul “Salveaza” pentr u crearea
utilizatorului. Pagina se poate observa în figura 25 .

Fig.2 5. Creare utilizatori
Pentru vizualizarea utilizatorilor se apasă butonul “Listare utilizatori” din submeniul
“Utilizator”. în tabel sunt listaț i toti utilizatorii. Se realizează operaț ii de sortare prin apăsarea
iconiț ei din dreptul denumirii câmp ului.La prima apasăre, tabelul se sortează crescă tor, la a doua
apasăre se sortează descrescă tor iar la a treia apasă re tabelul revine la valorile initiale.Pentru
schimbarea pa ginii se apasă butoanele înainte/î napoi.

Fig 2 6. Listare utilizatori

39
Se pot ș terge utilizatori prin apăsarea iconitei care ilustreaza un coș de gunoi din dreptul
fiecă rui utilizator. Pentru dezactivarea/activarea utilizatorului se apasă butonul “acti vează
user’’/’’dezactivează user’’. Se pot realiza operații de filtrare după numele și prenumele
utilizatorului.
Pentru setarea o rganizaț iei gazdă se apasă butonul “Adaugare date o rganizaț ie” din submeniul
“Organizaț ie”. Se completează formularul și se apasă butonul “Salveaza”. Pentru a vizualiza
detaliile o rganizaț iei se apasă butonul “Detalii o rganizaț ie”. în pagina nou deschisă se apasă butonul
“editeaza” pentru a modifica datele o rganizaț iei. Dupa modificarea informaț iilor se apasă butonul
“Salveaza” pentru a modifica datele.

Fig.27 . Setare o rganizaț ie

Fig.28 . Detalii o rganizaț ie
Pentru a vizualiza lista de voluntari se apasă pe butonul “Lista volun tari” din submeniul
“V oluntar”.Î n tabelul a fișat, sortarea și paginarea funcț ioneaza la fel ca cele de pe pagina de
vizualizare utilizatori. Se poate filtra dupa numele și prenumele voluntarului.

40
Se descarcă fișa prin apăsa rea butonului “ fișa”din dreptul voluntarului. În cazul în care fișa nu
există , apare un modal cu mesajul “ Fișa nu exista inca”. Pentru descă rcarea celor doua cereri se
apasă butoanele “cerere1” și “cerere2”. Pentru validarea voluntarului se apasă butonul “validare”. O
data validat, nu se vor mai putea descă rca cererile .
În cazul v oluntarilor pentru care se doreș te generarea contractelor și care indeplinesc condiț iile
pentru generare , se bifeaza checkboxul din dreptul acestora, dupa care se apasă butonul “Generare
contracte” din josul paginii. Dupa generarea contractelor, dacă rapoartele au f ost completate de
coordonator, vor apă rea în dreptul voluntarilor doua butoane: “raport” și “certificat” , a că ror
apasăre va duce la descă rcarea rapoartelor de activitate sau a certificatelor .
V oluntarii se pot ș terge prin apăsarea iconiț ei ce ilustreaza un coș de gunoi. Pentru descărcarea
excelului cu toț i voluntarii anului curent se apasă butonul “download Excel” din partea din dreapta –
sus a paginii.

Fig.29. Lista voluntari vizualizată de admin
Pentru trimiterea de email -uri se acceseaz ă pagina de detalii a voluntarului prin apăsarea să getii
din dreptul lui. în pagina nou deschisă se observă detaliile voluntarului și un buton numit
“Email”.Prin apăsarea butonului se deschide un modal unde destinatarul este deja completat cu
adres a de email a voluntarului și trebuie completat mesajul dorit. Dupa ce datele au fost completate
corect se apasă butonul “Trimite mesaj” pentru trimiterea emailului. Pana c ând datele nu au fost
completate corect, butonul ramî ne dezactivat.

41

Fig.30. Modal trimitere email

6.2 Decan
Decanul accesează lista de voluntari prin apăsa rea butonului “Lista voluntari” din submeniul
“V oluntar”. Se pot realiza operații de că utare și sortare. Pentru vizualizarea detaliilor voluntarului se
apasă pe săgeata din dreptul fiecă rui voluntar. Pentr u descă rcarea cererilor se apasă pe butonul
“cerere1” sau “cerere2” iar pentru validarea acestora se apasă pe butonul “Validare”. Dupa validare
cererile nu vor mai putea fi descă rcate.

Fig 31. Listă voluntari vizualizată de decan

5.3 Coordonator
Pentru crearea conturilor voluntarilor se acceseaz ă pagina de “Creare utilizator” din subme niul
“Utilizator”.Se completează datele necesare, se alege rolul de voluntar și se creează cont prin
apăsa rea butonului “Salveaza”.

42
Pentru a vizualiza voluntarii afer enți coordonatorului se acceseaza pagina “Lista voluntari” din
submeniul “ V oluntar”. Se pot efectua operaț ii de sortare și filtrare dupa nume și prenume. Se poate
șterge voluntarul. Pentru accesarea paginii de detalii se apasă să geata din dreptul voluntarului.
Pentru generarea raportului se apasă butonul “raport” și se completează formularul din pagina
nou deschisă, din figura 3 3. Figura 28 c onține formularul ce trebuie completat. To ate câmp urile sunt
obligatorii. Dacă datele nu s unt completate corect se observă în dreptul câmp ului respectiv un mesaj
de eroare. Se apasă butonul “Salveaza” pentru salvarea raportului și descă rcarea lui. Pentru editatea
raportului se apasă din nou butonu l “raport”din pagina de listare de voluntari și se vor gasi
câmp urile deja precompletate. Se modifică dupa necesitati și se salvează din nou.
Pentru completarea fișei de voluntar se apasă butonul “ fișa” iar utilizatorul este redirecț ionat în
pagina de creare a fișei. Formularul ce trebuie completat pentru generarea fișei se observă în figura
34.
Fig 32. Lista voluntari vizualizata de coordonator

Fig 33. Pagina generare raport de activitate

43

Fig 34. Fișa voluntar

6.4 Voluntar
Pentru completarea cererii de voluntar se apasă butonul “Cerere voluntar” din submeniul
“V oluntar”. Se completeaz ă formularul prin alegerea tipului de voluntar, dupa care se introduc
datele personale, perioada de voluntariat și activități le ce vor fi realizate. Toate câmp urile sunt
obligatorii. Datele ce ț in de buletin pot fi completate automat prin apăsarea butonului “Încarca poza
buletin”.Din modalul deschis se apasă butonul “Choose file” pentru a incărca poza. O data poza
incărcata, se va încadra cât mai precis după care se apasă pe butonul “ Extrage ” iar câmp urile vor fi
completate. Dupa completarea tuturor câmp urilor se apasă butonul “Salveaza” iar utilizatorul va fi
redirectionat în pagina de detalii a voluntarului,unde u tilizatorul are posibilitatea să descarce cele
două cereri create prin apăsarea butoanelor “cerere1” și “cerere2”.
La apăsarea butonului “Date voluntar” din submeniul “V oluntar” se deschide o pagină care
conține un tabel cu toate formularele completate de voluntar de -a lungul anilor. Se pot vedea
detaliile voluntarului prin apăsarea săgeț ii. Penru modificarea câmp urilor se apasă iconiț a ce c onține
un creion.Utilizatorul este redirecț ionat către o nouă pagină asemănă toare cu cea de completare a
datelor, unde câmp urile sunt precompletate. Acesta modifică câmpurile necesare dupa care apasă

44
butonul salvează și este redicționat la pagi na Date voluntar. Cele doua pagini de editare și de detalii
pot fi observate în figura 31 și 32.
Pentru completarea fișei se accesează “Fișa voluntar” din submeniul “V oluntar”. în figura 3 4 se
observă pagina către care este redirecționat utilizatorul după apăsarea butonului. Din partea de sus a
paginii se poate descă rca modelul de fișa prin apăsarea butonului “descarcă exemplu fișa”. Se
completeaza primul paragraf “A ctivități de voluntariat -detaliere”, prin introducerea a ctivități i, în ce
consta aceasta și detalie rea responsabilităților. Se pot adăuga mai multe responsabilităț i pentru o
activitate prin apăsarea butonului “adaugă responsabilități”. De asemenea ele pot fi ș terse prin
apăsarea butonului ce ilustreaza un coț de gunoi din dreptul câmp ului
“Concep e/Reali zează/Asigură ”.
Pentru adă ugarea a mai multor a ctivități se apasă butonul “adaugă activitate”. O activitate poate
fi ștearsă prin apăsarea butonului sub forma unui coș de gunoi din dreptul grupului ce formează o
activitate.
In al doilea paragraf num it “Desfășurare a activități lor de voluntariat” se completează numărul
de ore defăș urate pe timpul zilei și pe timpul nopț ii.
În al treilea paragraf “Programu l de voluntariat” se completează perioada, numă rul de ore și
locul pentr u fiecare activitate. Pentr u adă ugarea unui orar nou se apasă butonul “adaugă altă linie”,
linia poate fi ștearsă prin apăsarea coșului de gunoi din dreptul acesteia. Dupa salvarea fișei va
apărea un buton în partea de sus a paginii numit “descarcă fișa” folosit pentru a descă rca fișa nou
creată . De fiecare dată când se va completa formularul, fișa nou creata o va înlocui pe cea
anterioară.

Fig 3 5. Încărcare buletin Fig 3 6.Pagin ă detalii voluntar

45

Fig 37. Pagin ă adăugare date voluntar

Fig 3 8.Pagin ă editare date voluntar

46

Capitolul 7. Concluzii
Lucrarea „Sistem informatic pentru gestionarea a ctivități i de voluntariat” își propune dezvoltarea
unei aplicații capabile sa u șureze procesul de gestiune al voluntarilor în cadrul A sociaț iei
Automatică și Calculatoare.
În urma implementă rii aplicaț iei, se coletează, organizează și prelucrează date pentru î nscrierea
voluntarilor prin completarea cererilor și a fișelor de voluntariat și se generează contracte de
voluntariat și certificate de voluntariat însoț ite de rapoarte de activitate.
Pe lângă aceste funcționalităț i, aplicația dispune și de implementarea un ui mecanism de pre lucrare
automată a imaginilor de tip buletin cu scopul de recunoaștere optică a caracterelor (OCR).
În urma analizei tehnologiilor și a soluțiilor existente pe piață , s-a realizat o ap licație Web eficientă,
care nu necesită costuri semnificative și poate fi accesată de orice utilizator cu acces la Internet, prin
solicitarea dreptului respectiv de la coordonator.

Pentru viitor, există ma i multe direcț ii în ca re aplicația poate fi dezvoltată :
 adăugarea de noi funcționalităț i
 eficientizarea algoritmului de recunoaștere a caracterelor
 realizarea unei aplicații mobile pentru creșterea gradului de flexibilitate și portabilitate

47

Capitolul 8. Bibliografie
1. Definitia adoptata de Consiliul National al V oluntariatului, iunie 2002.
2. Istoria voluntariatului în lume și în România https://ec.europa.eu/epale/ro/node/15717
3. LEGE privind reglementarea activiatii de voluntariat în Romania http://federatiavolum.ro/wp –
content/uploads/2014/11/LV_promulgata.pdf
4.https://www.freecode câmp .org/news/the -top-benefits -of-using -angular -for-your-project –
ad54090df85c/
5. https://scotch.io/@mikelanger1993/working -with-dom-in-angular -js
6. Jon Duckett. HTML and CSS: Desi gn and build websites
7. Advantages of HTML http://www.vtech -seo.com/web -design -articles/advantages -of-html.html
8. Advantages of CSS http://www.networksolutions.co m/education/css -web-design -advantages/
9. Silvio Moreto, Matt Lambert, Benjamin Jakobus, Jason Marah.Bootstrap 4 – Responsive web
design https://leonmercanti.com/books/web -development/Bootstrap -4%20Responsive -Web-Design –
_2017_.pdf
10. Bootstrap -advantages https://vmokshagroup.com/blog/bootstrap -advantages/
11. https://www.w3trainingschool.com/php -advantages -disadvantages
12. The Book . Version 2.8. https://symfony.com/pdf/Symfon y_book_2.8.pdf
13..https://www.techcronus.com/blog/reasons -to-use-symfony -framework -with-features –
advantages
14. www.etondigital.com/popular -symfony -projects
15. www.mongodb.com/scale/advantages -of-nosql
16. https://searchitoperations.techtarget.com/definition/Docker -image
17. What is container? https://www.docker.com/ resources/what -container
18.https://medium.com/@tao_66792/interesting -facts -companies -and-the-use-of-docker –
948baa8cf309
19. www.theschoolvolunteer.com
20. Dockerfile https://docs.docker.com/engine/reference/builder/
21.Jeff Nickoloff. Docker IN ACTION . Manning . https://pepa.holla.cz/wp –
content/uploads/2016/10/Docker -in-Action.pdf
22. Compose -file https://docs.docker.com /compose/compose -file/
23. www.docs.docker.com/storage/volumes
24. https://codeburst.io/understanding -resolvers -in-angular -736e9db71267

48
25. G. S. Lehal ând Chandan Singh . Feature Extraction ând Classification for OCR of Gurmukhi
Script. Department Of Computer Science & Engineering Punjabi University. Documentație
Internet – https://www.academia.edu/
26. Ray Smith. An Overview of the Tesseract OCR Engine. Documentație Internet –
https://static.googleusercontent.com/media/research.google.com/en//pubs/archive/33418.pdf
27. Jimp https://www.npmjs.com/package/jimp
28. James Rumbaugh, Ivar Jacobson, Grady Booch . The Unified Modeling Language Reference
Manual . https://www.utdallas.edu/~chung/Fujitsu/UML_2.0/Rumbaugh –
UML_2.0_Reference_CD.pdf
29. Angular 2+ Notes for P rofessionals https://books.goalkicker.com/Angular2Book/