PROGRAMUL DE STUDII UNIVERSITARE DE LICEN [615805]

UNIVERSITATEA DIN PITE
Ș
TI

FACULTATEA DE
Ș
TIIN
Ț
E, EDUCA
Ț
IE FIZICĂ
Ș
I INFORMATICĂ

PROGRAMUL DE STUDII UNIVERSITARE DE LICEN
Ț
Ă: INFORMATICĂ

​
LUCRARE DE LICEN
Ț
Ă

​
Coordonator
ș
tiin
ț
ific,

Conf.univ.dr. Doru CONSTANTIN

​
Absolvent: [anonimizat] 2020

Cuprins

Introducere
3

Generalită
ț
i
3

Context
4

Capitolul 1. Tema proiectului
5

Capitolul 2. Tehnologii utilizate
6

1.Pagini Web
ș
i Servere Web
8

2.Pagini Web Statice
ș
i Dinamice
10

3. Maven
11

4. H2 DataBase
11

5. Spring Boot
11

6.Java
11

7. Model-view-controller
14

8. React
14

9. TypeScript
16

10. HTML
17

11. CSS
21

Capitolul 3.
25

Backend
25

Structura aplica
ț
iei
25

Pom.xml
26

Spring Boot Application (Main)
28

Configuration
29

Controllers
38

Models
43

Repositories
45

Services
46

DTOs
48

Introducere

Putem afirma cu tărie că trăim într-o societate informatizată. În timpurile noastre, sunt în

contact cu un calculator peste tot, de la magazinul din cartier, care-
ș
i
ț
ine eviden
ț
a cu ajutorul unui

calculator
ș
i până la ghi
ș
eul la care plătim ratele la bancă, factura de la Tv, telefonie, la examenele

pentru ob
ț
inerea permisului auto sau alte examene pentru diverse domenii oricare ar fii acestea
ș
i

multe alte. Putem afirma că există calculatoare peste tot, legate eventual între ele
ș
i formând astfel

re
ț
ele de calculatoare. Toate acestea sunt datorate simplului fapt că ne dăm seama că sistemele de

calcul ne u
ș
urează munca
ș
i via
ț
a cotidiană prin apari
ț
ia lor.

Hai să facem un exerci
ț
iu de imagina
ț
ie
ș
i să ne gândim pu
ț
in cât de mult s-a schimbat

lumea înconjurătoare de la apari
ț
ia calculatoarelor
ș
i până în prezent. Înainte ca aceste calculatoare

să-
ș
i facă apari
ț
ia orice tip de eviden
ț
ă era înregistrat manul pe hârtie, sau în cel mai bun caz era

folosită o ma
ș
inărie numită d actilograf. Principalul
ș
i mare dezavantaj al acestei metode era faptul

că acele hârtii deteriorarea odată cu trecerea timpului, sau pur
ș
i simplu riscau să se piardă. Apari
ț
ia

calculatoarelor a reprezentat o uria
ș
ă evolu
ț
ie în acest domeniu, dar totodată
ș
i în multe alte

domenii.

Lumea nu a mai fost nevoită să-
ș
i
ț
ină eviden
ț
ele pe hârtie, deoarece pui
ș
i simplu ace
ș
tia

introduceau datele într-un calculator
ș
i le salvau pe hardul acestuia. În acest mod datele erau într-un

loc sigur, unde nu riscau să se deterioreze, să se piardă, iar accesul la ele avândul doar persoanele

care erau desemnate pentru utilizarea acestora.

Generalită
ț
i

Încă de la începuturile pământului omul a sim
ț
it nevoia de a cunoa
ș
te spa
ț
iul înconjurător,
ș
i

materializarea gândirii sale într-un a
ș
a zis limbaj matematic standard. Evolu
ț
ia omului a determinat

ș
i evolu
ț
ia problemelor acestuia, solu
ț
ia fiind inventarea unei ma
ș
ini de calcul ce îi va schimba cu

desăvâr
ș
ire modul său de via
ț
ă.

Cre
ș
terea rapidă din ultimul timp a resurselor software
ș
i hardware din domeniul tehnologiei

informa
ț
iei are ca
ț
el principal posibilitatea de a oferi o mai bună com unicare
ș
i un acces mai rapid

la toate soiurile de informa
ț
ii.

În prezenta lucrare voi încerca să cuprind destul de detaliat o mare parte din aspectele

teoretice
ș
i practice ale moda lită
ț
ilor de concepere
ș
i implemenare a aplica
ț
iei.

Lucrarea o să fie structurată în mai multe capitole, fiecare capitol, la rândul său având mai multe

subcapitole.

Context

Consider că via
ț
a unu i student se limitează la re
ț
ele sociale, din care sunt extrase numeroase

beneficii în ceea ce prive
ș
te economisirea timpului când vine vorba de achizi
ț
ionarea unor căr
ț
i,

informa
ț
ii despre facultate, e tc. În urma evenimentelor tragice la nivel global, cu privire la apari
ț
ia

virsului numit Covid19, via
ț
a fiecărei persoane s-a schimbat, totul desfă
ș
urându-se în mediul

online.

Noile restric
ț
ii impus e la nivel global în ceea ce prive
ș
te distan
ț
area socială împiedică

desfă
ș
urarea activită
ț
ilor care implică un număr mare de persoane, m ai ales în mediul
ș
colarită
ț
ii,

fiind utilizate diverse aplica
ț
ii pentru anun
ț
area modificărilor în ceea ce prive
ș
te desfă
ș
urarea

cursurilor sau a diferitelor anun
ț
uri.

Având în vedere că toate activită
ț
iile pe care facultatea le desfă
ș
urarea în această perioadă

pentru studen
ț
i au fost anula te, totul se rezumă la aplica
ț
ii. Făcând parte din categoria studen
ț
ilor în

an terminal , unul din evenimentele pe care majoritatea îl a
ș
teptau cu nerăbdare implică găsirea unui

loc de muncă. Pentru că to
ț
i ne confruntăm cu diverse piedici în ceea ce prive
ș
te orientarea în

mediul profesional, am creat aceasta aplica
ț
ie web care ne oferă posibilitatea afi
ș
ării diferitelor

locuri de muncă
ș
i cerin
ț
ele necesare în ceea ce prive
ș
te angajarea.

Această aplica
ț
ie a fos t creată pentru a u
ș
ura eforturile studen
ț
ilor de a depune dosarele de

angajare la diferite companii, iar acum cu un simplu click te po
ț
i enumera printre studen
ț
ii care din

băncile facultă
ț
ii beneficiază de un loc de muncă.

Aplica
ț
ia prezintă atâ t punctele tari, cât
ș
i punctele slabe ale companiei la care studentul

înclină să î
ș
i depună dosarul de angajare, modul în care acestea sunt prezentate fiind unul mult mai

estetic
ș
i creativ,
ț
inând aten
ț
ia
ș
i interesul studentului sporit pentru a lua decizia cea mai bună cu

privire la viitorul lui.

Studentul are sarcina de a intra pe site unde sunt prezentate ofertele de angajare
ș
i de a

”vizita” fiecare companie în parte, fără a-
ș
i pune în pericol starea de sănătate prin intrarea în contact

cu alte persoane.

Aplica
ț
ia permite o o rientare mult mai amplă
ș
i benefică în luarea unei decizii, tot procesul

de căutare
ș
i angajare simpli ficându-se, desfă
ș
urându-se într-un mediu sigur, acela fiind online.

Structura lucrării

​
Capitolul 1 – Introducerea
​
fiind reprezentată de partea introductivă a lucrării, prezentarea

domeniului din care proiectul face parte, tema propriu-zisă
ș
i structurarea aplica
ț
iei.

Capitolul 2 – Tehnologii utilizate
​
reprezintă o scurtă introducere a principalelor no
ț
iuni legate de

internet. În acest capitol sunt explicate no
ț
iuni precum internet, DNS, aplica
ț
ii pentru internet,

servere web
ș
i aplica
ț
ii web, pagini web statice
ș
i dinamice, internet
ș
i extranet, Maven, H2

DataBase, Spring Boot, Java, Model-view-controller, React, TypeScript, HTML
ș
i CSS.

Capitolul 3 –

Capitolul 1. Tema proiectului

La fel cum omul evoluează pe zi ce trece, a
ș
a este
ș
i cu calculatoarele care la început erau

într-un număr destul de mic dar acum pe oriunde te-ai duce mai mereu ai să vezi că oamenii

lucrează în fa
ț
a unui calculat or. Chiar dacă primele calculatoare apărute nu mai sunt folosite în

zilele noastre acestea au contribuit la evolu
ț
ia lucrurilor
ș
i vor rămâne în istorie pentru mult timp de

acum înainte.

Platforma mobilă pentru informarea stundetului cu privire la joburile posibile
ș
i noută
ț
i

universitare este o solu
ț
ie ide ală pentru a u
ș
ura atât munca profesorilor
ș
i a studen
ț
ilor cât
ș
i munca

antreprenorilor. Această versiune a Platformei mobile pentru informarea studentului cu privire la

joburile posibile
ș
i noută
ț
i universitare, este destinată Universită
ț
ii din Pite
ș
ti. Site-ul o să fie

structurat pentru 3 tipuri de utilizatori diferi
ț
i:

●
Administrator: se ocupă de adăugarea informa
ț
iilor universitare

●
Angajator: are posibilitatea de a adăuga viitoare joburi

●
Student: are acces la vizualizarea joburilor
ș
i informa
ț
iilor universitare

Cele trei tipuri de utilizatori vor avea privilegii diferite, a
ș
a cum v-am prezentat în rândurile de

mai sus. Aplica
ț
ia este utilă, atât pentru studen
ț
i
ș
i profesori, cât
ș
i pentru angajatori. Prin

intermediul acestei aplica
ț
ii este foarte u
ș
or ca studentul să fie la curent cu tot ce se întâmplă la

facultate
ș
i să afle dacă exist ă un posibil viitor loc de muncă pentru acesta.

Capitolul 2. Tehnologii utilizate

Folosit dimineața, folosit seara, calculatorul face parte tot mai mult din viața de zi cu zi a

oamenilor care îl folosesc pentru diferitele activități zilnice, fie cu scopul de a se relaxa, fie pentru

a-și ușura munca. Astfel, ei beneficiază de diverse călătorii în lumea virtuală. Accesul la internet

pentru o persoana care descoperă diferite libertă
ț
i în mediul virtual fie că vorbim de reviste, fie

grupuri de dezbatere, este deseori comparat cu o dorin
ț
ă arzătoare devenită realitate. Prezentarea

unor locații depărtate , chiar cu ajutorul unui gadget ca și calculatorul, poate avea un mare impact

asupra individului, acesta simțindu-se foarte aproape de destinația tânjită ori că este vorba de

Europa, ori Statele Unite.

Internetul
este
deseori
definit
ca
fiind
un
ansamblu
al
rețelelor
care
sunt
interconectate
pe

întreg
globul
pământesc.
Acest
lucru
este
combătut
de
specialistii
care
declară
că
internetul
este,
de

fapt,
un
ansamblu
de
reguli
numit
ș
i
“protocoale
de
comunicare”,
acestea
având
rolul
de
a
transfera

date între diverse rețele globale
ș
i de a accesa informa
ț
ii stocate în calculatoare.

Prin
accesarea
internetului
se
în
ț
elege
modalitatea
de
conectare
la
o
re
ț
ea
dar
,în
mod

special,
accesul
la
o
informa
ț
ie
care
circulă
prin
calculatoarele
conectate
la
aceasta
retea
ș
i
la

posibilitatea de a comunica cu exper
ț
ii din întreaga lume.

Internetul
poate
fi
descris
ca
fiind
o
imensă
rețea
de
calculatoare,
mai
clar,
o
rețea
care

conține
numeroase
rețele
de
calculatoare.
Câteva
dintre
aceste
calculatoare
pot
oferi
diverse
servicii

oamenilor.

Internetul
a
cunoscut
o
dezvoltare
rapidă,
putem
aminti
faptul
ca
anul
1985
reprezintă

atingerea
unui
nou
țel
ș
i
anume
cele
2000
de
calculatoare
conectate
la
rețeaua
de
internet.
Astăzi,

miliarde
de
calculatoare
au
conexiune
la
internet,
ceea
ce
permite
accesarea
unui
număr
imens
de

oameni
la
rețea.
Milioane
de
oameni
îsi
fac
aparitia
anual
în
aceasta
comunitate,
ace
ș
tia
folosind

internetul,fiecare având diferite sectoare de interes.

O
lungă
perioadă
de
timp,
țara
noastră
a
considerat
internetul
un
lux
inutil,de
aceea
acesta
a
avut
o

apariție
întârziată
în
România.
Infrastructura
a
cunoscut
o
dezvoltare
bogată,
pe
când
materialele

despre informatică a parcurs o perioadă grea de dezvoltare.

Multe
firme,
însă,
au
în
ț
eles
importanța
Internetului,
acesta
având
un
rol
semnificativ
dar
,din

păcate,
nu
exista
înregistrări
în
ceea
ce
prive
ș
te
depozite
române
ș
ti.
De
aceea,
România
este

cunoscută ca aducând informa
ț
ii exterioare în favoarea celor care exportează detalii interne.

Datorită
contextului
de
astăzi
de
la
afaceri
pană
la
globalizare,
comunicare
virtuală,

dezvoltare
ș
i gadgeturi,infor mație, performanța, toate se împletesc perfect.
Fără
dubii,
pe
întreg

pământul,
internetul
este
folosit
datorită
comodită
ț
ii
pe
care
acesta
îl
oferă
ș
i
datorită
exactită
ț
ii

informațiilor
chiar
dacă
exista
în
continuare
site-uri
care
dețin
informații
învechite,
incomplete
sau

chiar false.

Cunoasterea
tehnologiei
structurate
de
specialistii
in
tehnologie
care
doresc
o
ușurare
a

utilizării internetului, ne deschide o u
ș
ă în aprofundarea cunoașterii Internetului viitor.

Pentru
a
realiza
ce
ne
oferă
viitorul
apropiat
în
legătura
Internetului,
suntem
nevoi
ț
i
să

în
ț
elegem tipurile de tehnolo gii concepute de experții implicați în dirijarea rețelei.

●
Colaborare

În inten
ț
ia dez voltării internetului s-au făcut mari progrese în domeniul apelurilor

video la distanțe foarte mari.

De exemplu, există tehnologii care ne permit să colaborăm la anumite documente

prin intermediul rețelei de internet. Totodată putem participa la conferințe audio și chiar să

utilizăm o „planșetă” electronică prin intermediul căreia ne putem expune schemele și

proiectele la care lucrăm, astfel încât acestea să poată fi vizualizate de către toți participanții

conferin
ț
ei.

●
Obiecte

Dezvoltatorii paginilor Web nu mai sunt limitați la texte și grafică, așa incât putem fi

siguri că vom găsi o mulțime de elemente interesante pe Web și cu o viteză foarte mare de

accesare.

Câteva inovații recente permit chiar și distribuirea de programe prin Web.

●
Mesaje e-mail complexe

E-mailurile de acum nu mai sunt limitate doar la mesaje de tip text.

Limbajul HTML ne permite să concepem e-mailuri, cu caractere aldine și cursive, și

cu variate tipuri de paragraf. Iar dacă aceste lucruri nu erau suficiente, acum putem atașa

e-mailurilor noastre imagini și alte elemente ce
ț
in de multimedia.

●
Securitate

Tehnicienii din spatele Internetului lucrează mereu pentru a securiza comerțul

on-line,
punând
la
dispozi
ț
ie
multiple
metode
de
protejare
a
tranzacțiilor
din

multitudinea de domenii de activitate.

Ei ajută la între
ț
inere a
ș
i dezvoltarea unui mediu mai sigur pe ntru copiii care se joacă pe

Internet, furnizând criterii de evaluare a paginilor web, și asigură securitatea rulării aplicațiilor

distribuite, prin autentificări de cod și o securitate foarte bine pusă la punct.

1.Pagini Web
ș
i Servere Web

World Wide Web este, de fapt, un protocol numit
​
Hypertext Transfer Protocol
​
(
​
HTTP
​
).

HTTP este un protocol potrivit sistemelor multimedia informatice care sunt distribuite între site-uri

prin salturi.

Site-ul conține informații care sunt rulate de o gazdă în software de tip server Web. Deseori,

acesta este încurcat cu serverul Web, ceea ce este total fals. Serverul Web este un software, nu

calculatorul în sine.

Cel ce livrează la cerere pagini Web este un server. La solicitarea utilizatorului IP a unui

fișier, serverul Web găsește fișierul dorit
ș
i îl transmite acestui utilizatorului.

Fișierul solicitat poate fi codul sursă HTML al unei pagini Web, o imagine GIF, un fișier Flash, un

document XML, sau un fișier AVI. Cel care stabilește cerințele este browserul Web,nu serverul

Web.

Odată accesate conexiunile serverului Web se stabilesc. Urmează cererea unei pagini la un

server,astfel se realizează o conectare IP la internet între solicitant
ș
i cel ce rulează serverul. Pagina

Web dorită este trimisă prin conexiune
ș
i aceasta este suprimată odată cu primirea

paginii(ex.GIF-uri sau JPG).

Un singur host poate permite desfășurarea a mai multor aplica
ț
ii de Internet cum ar fi

servere Web, FTP, DNS sau server mail SMTP POP3, toate putând rula simultan.

Pentru
a
avea
siguranța
că
serverul
răspunde
strict
solicitărilor
clienților
potriviți,
fiecărui

server îi este acordat un
​
port.

Porturile
predefinite
sunt
tipic
folosite
in
majoritate
de
servere.
Pentru
a
fi
necunoscute
sunt

instalate
pe
porturi
nestandarde
serverele
Web
care
utilizează
portul
80.
Mai
mult,
se
poate
realiza

instalarea a multiple servere pe un singur device,porturile fiind asociate divers.

Multitudinea
device-urilor
interconectate
la
nivel
global
la
o
scară
extrem
de
largă,
este
reprezentat

de
Internet.
World
Wide
Web
sau
popular
cunoscut
WWW
reprezintă
pentru
texte,
sunete
si

animații un suport. Toate site-urile menite Web-ului sunt știute drept pagini Web.

World
Wide
Web
se
poate
înțelege
mai
eficient
daca
se
încearca
a
se
pătrunde
modalitatea

de organizare a mediilor tipărite. Acestea sunt adecvate webului
ș
i modului acestuia de organizare.

Multitudinea
ofertelor
oferite
de
paginile
Web
pot
fi
interesante:
întreaga
lume
a

calculatoarelor
și
nu
numai
poate
avea
acces
la
informa
ț
iile
oferite
de
aceste
pagini,
ele
în
sine
fiind

atractive, stârnind interesul
ș
i curiozitatea,totodată fiind
ș
i complexe.

HDD-ul
unui
anumit
server
special
se
ocupă
cu
memorarea
paginilor
Web,
fiind
gestionate

de un software deosebit
ș
i regăsite apoi afișate cu ajutorul navigatoarelor Web (browsere).

HTML
este
ustensila
folosită
pentru
a
interpreta
anumiți
marcatori
la
cerința
navigatorului

online
care
afi
ș
ează
pagini
Web,
totodată
codificăndu-le.
Semnificațiile
marcatorilor
variază,
fie

prezintă modul a
ș
ezării unei pagini, fie face legături între anumite fișiere sau documente.

Pagina
Web
cunoaște
diferite
legături
între
fișiere,fie
acestea
din
domeniul
grafic,text
sau

multimedia.
Deja
prezentat
hipertextul
este
acela
care
crează
a
ș
a
numitele
căi
de
acces
între

documente.
Acționarea
click-ului
pentru
a
se
realiza
o
conexiune
precum
o
parte
dintr-un
text,

element
grafic,etc,
permite
afișarea
fișierului
încărcat
de
navigator.
Datorită
distincției
făcute
cu

ajutorul culorilor
ș
i sublinier ilor pe text, legăturile din text sunt u
ș
or de distins.

Un site Web este cunoscut ca deținând informații grupate
ș
i prezentate sub forma

unor pagini online,documente
ș
i fișiere care sunt caracterizate de anumite legături.

Deși
exista
butoane
speciale
care
sa
indice
către
pagina
principală,
cand
exista
un
site
bine
pus
la

punct,implicit proiectat, toate celelalte pagini fac referire la pagina principala.

La
realizarea
unui
site,
păstrarea
fișierelor
se
face
în
mod
normal
într-un
director
sau
în

colec
ț
ii
de
directoare
HDD
ș
i
este
ascuns
cu
ajutorul
numelui
​
site
local.
​
Memorarea,
transmiterea
ș
i

regăsirea paginilor Web
ș
i a fișierelor legate sunt dedicate serverului Web.

Prin
publicarea
unui
site
local
(upload),
directorul,
împreună
cu
conținutul
său,
este

transferat
la
server-ul
Web
care
conține
Software-ul
prin
care
site-ul
este
transmis
navigatoarelor

Web
ale
calculatoarelor
conectate
la
Internet.
Odată
publicat,
site-ul
se
transformă
din
site
local
în

site Web, iar interacțiunea utilizatorului cu el are loc similar modului descris în figura 1.

Deși cea mai mare parte a informațiilor din World Wide Web este stocată în pagini Web

scrise folosind limbajul HTML, există un număr destul de mare de documente provenite din alte

tipuri de servicii de publicare a informațiilor din Internet.

2.Pagini Web Statice
ș
i Dinamice

Paginile Web dinamice sunt folosite atunci când se dorește modificarea dinamică, a

conținutului paginilor Web. Paginile Web realizate în HTML au dezavantajul că sunt statice,

conținutul lor neputând fi modificat odată ce au fost încărcate pe un server decât aducându-le înapoi

pentru a fi editate. Acest lucru este o problemă serioasă având în vedere că operația este mare

consumatoare de timp. În plus, lucrul cu baze de date nu este posibil în cazul paginilor statice.

Spre exemplu dacă avem un site de Web format doar din pagini HTML care afișează notele

și mediile studenților pe serii și pe grupe și vrem să mai adăugăm încă un student va trebui să

modificăm atât pagina grupei cât și pagina seriei precum și pe cele de medii. Acest fapt este

neplăcut și îngreunează foarte mult munca.

Soluția care se adoptă în astfel de situații este plasarea informațiilor într-o bază de date și

accesarea lor ori de câte ori se cere acest lucru de cineva. Mai exact în loc să se creeze 3-4 pagini

Web în HTML care să fie modificate ori de câte ori apare o schimbare, se va crea o bază de date și

câteva scripturi pe partea de server prin care vor construi dinamic, paginile HTML care vor fi

afișate. Schimbările se vor face doar la nivelul bazei de date ceea ce e mult mai simplu.

Paginile Web se clasifică în funcție de natura conținutului în pagini statice și pagini dinamice.

Principalele caracteristici ale paginile Web statice sunt:

●
conțin doar elemente HTML;

●
codul sursă vizualizat în navigator este identic cu cel al fișierului stocat pe

disc;

●
nu oferă interactivitate.

Paginile Web dinamice se caracterizează prin următoarele:

●
conținutul lor este creat dinamic și poate diferi la accesări diferite; de

exemplu la același URL conținutul paginii poate varia în funcție de anumiți

parametri cum ar fi locația geografică a utilizatorului, ora, paginile vizitate

anterior, profilul utilizatorului;

●
oferă interactivitate;

●
posibilități de interacțiune.

În funcție de locul în care este evidențiat caracterul dinamic al paginilor există pagini

dinamice pe parte de client și pagini dinamice pe partea de server.

3. Maven

Maven este un protocol pentru managementul proiectelor software.
​
Func
ț
ionalită
ț
ile sale

principale sunt descrierea procesului de build al software-ului
ș
i descrierea dependen
ț
elor acestuia.

Proiectele sunt descrise printr-unul sau mai multe fi
ș
ier XML, denumite POM-uri (
​
Project Object

Model
​
), dar au o structură implicită, ceea ce încurajează structurarea similară a proiectelor. POM-ul

principal con
ț
ine informa
ț
ii despre module, precum
ș
i despre dependen
ț
ele proiectului.

1
4. H2 DataBase

H2 este un sistem rela
ț
ional de gestionare a bazelor de date scris în Java. Poate fi încorporat

în aplica
ț
ii Java sau rulat în m odul client-server. Am ales acest sistem de gestionare a bazei de date

deoarece oferă posibilitatea utilizarii bazei de date “in memory”, acest lucru fiind foarte benefic în

timpul dezvoltării aplica
ț
iei. Un alt avantaj este consola de gestionare a bazei de date care se rulează

în browser accesand link-ul
​
http://localhost:8081/h2-console
​
.

2
5. Spring Boot

Spring Boot este solu
ț
ia de configurare Spring pentru a crea aplica
ț
ii de produc
ț
ie gata de

rulare încă de la primul click. Este preconfigurat cu setarile de baza, astfel fiind alegerea optimă de

configurare a proiectelor de o dimensiune mica-medie. Majoritatea aplica
ț
iilor Spring Boot au

nevoie de foarte pu
ț
ină confi gura
ț
ie Spring. Spring Boot are incorpo rat Tomcat
​
(
​
web server
​

​
open

source
​

ș
i
​
container
​

​
servlet
​
). Spring Boot poate fi ini
ț
ializat sub for ma proiectelor de tip Maven sau

Gradle. Avand un proiect de tip Maven, Spring Boot a generat automat un fi
ș
ier de tip POM.xml

default în care putem găsi dependintele proiectului.

3
6.Java

Ce este Java? Java este o tehnologie inovatoare lansată de compania Sun Microsystem în

anul 1995, care a avut un impact remarcabil asupra întregii comunită
ț
i a dezvoltatorilor de software,

impunandu-se prin calită
ț
i deosebite cum ar fi simplitate, robuste
ț
e
ș
i nu în ultimul rand

portabilitate. Denumită ini
ț
ial OAK, tehnologia Java este formată dintr-un limbaj de programare de

nivel înalt pe baza căruia sunt construite o serie de platforme destinate implementării de aplica
ț
ii

pentru toate segmentele industriei software.

Înainte de a prezenta în detaliu aspectele tehnice ale limbajului Java, să amintim

caracteristicile sale principale, care l-au transformat într-un interval de timp atât de scurt într-una

1

​
https://maven.apache.org/guides/introduction/introduction-to-the-pom.html

2

​
https://www.h2database.com/html/features.html

3

​
https://spring.io/guides/gs/spring-boot/

din cele mai populare op
ț
iuni pentru dezvoltarea de aplica
ț
ii, indiferent de domeniu sau de

complexitatea lor.

●
Simplitate
​
– elimină supraîncărcarea operatorilor, mo
ș
tenirea multiplă
ș
i

toate “facilită
ț
ile” ce pot provoca scrierea unui cod confuz;

●
U
ș
urin
ț
ă
​
în crearea de aplica
ț
ii complexe ce folos esc programarea în re
ț
ea,

fire de execu
ț
ie, interfa
ț
ă grafică, baze de date , etc.;

●
Robuste
ț
e
​
– elimină sursele frecven
ț
e de erori ce apar în programare prin

renun
ț
area la pointeri, administrarea automată a memoriei
ș
i eliminarea

pierderilor de memorie printr-o procedură de colectare a obiectelor care nu

mai sunt referite, ce rulează în fundal (“garbage collector”);

●
Complet orientat pe obiecte
​
– elimină complet stilul de programare

procedural;

●
Securitate
​
– este un limbaj de programare foarte sigur, furnizând mecanisme

stricte de securitate a programelor concretizate prin verificarea dinamică a

codului pentru detectarea secven
ț
elor periculoase, impunerea unor reguli

stricte pentru ruluarea proceselor la distan
ț
ă, etc.;

●
Neutralitate arhitecturala
​
– comportamentul unei aplicatii Java nu depinde

de arhitectura fizică a ma
ș
inii pe care rulează;

●
Portabilitate
​
– Java este un limbaj independent de platforma de lucru,

aceea
ș
i aplica
ț
ie rulând fără nici o modificare
ș
i fără a necesita recompilarea

ei pe sisteme de operare diferite cum ar fi Windows, Linux, Mac OS, Solaris,

etc. lucru care aduce economii substan
ț
iale firmelor dezvoltatoare de

aplicatii;

●
Este
​
compilat
​

ș
i
​
interpretat
​
, aceasta fiind solu
ț
ia eficientă pentru ob
ț
inerea

portabilită
ț
ii;

●
Performan
ț
ă
​
– de
ș
i mai lent decât limbajele de programare care generează

executabile native pentru o anumită platformă de lucru, compilatorul Java

asigură o performan
ț
ă ridicată a codului de octe
ț
i, astfel încât viteza de lucru

pu
ț
in mai scăzută nu va fi un impediment în dezvoltarea de aplica
ț
ii oricât de

complexe, inclusiv grafica 3D, animatii, etc.;

●
Este
​
modelat după C
ș
i C++
​
, trecerea de la C, C++ la Java facandu-se foarte

u
ș
or.

Limbajul de programare Java a fost folosit la dezvoltarea unor tehnologii dedicate rezolvării

unor probleme din cele mai diverse domenii. Aceste tehnologii au fost grupate în a
ș
a numitele

platforme de lucru, ce reprezintă seturi de librării scrise în limbajul Java, precum
ș
i diverse

programe utilitare, folosite pentru dezvoltarea de aplica
ț
ii sau componente destinate unei anume

categorii de utilizatori.

●
J2SE
​
( Standard Edition )

Este platforma standard de lucru ce oferă suport pentru crearea de aplica
ț
ii independente
ș
i

appleturi.

De asemenea, aici este inclusă
ș
i tehnologia Java Web Start ce furnizează o modalitate

extrem de facilă pentru lansarea
ș
i instalarea locală a programelor scrise în

Java direct de pe Web, oferind cea mai comodă solu
ț
ie pentru distribu
ț
ia
ș
i

actualizarea aplica
ț
iilor Java.

●
J2ME
​
( Micro Edition )

Folosind Java, programarea dispozitivelor mobile este extrem de simplă, platforma de lucru

J2ME oferind suportul necesar scrierii de programe dedicate acestui scop.

●
J2EE
​
( Enterprise Edition )

Această platformă oferă API-ul necesar dezvoltării de aplica
ț
ii complexe, formate din

componente ce trebuie să ruleze în sisteme eterogene, cu informa
ț
ii

memorate în baze de date distribuite, etc.

Tot aici găsim
ș
i sup ortul necesar pentru crearea de aplica
ț
ii
ș
i servicii Web, bazate pe

componente cum ar fi servleturi, pagini JSP, etc.

În func
ț
ie de modul d e execu
ț
ie a aplica
ț
iilor, limbajele de programare se împart în două

categorii:

●
Interpretate:
​
instruc
ț
iunile sunt citite linie cu linie de un program numit

interpretor
ș
i traduse în instruc
ț
iuni ma
ș
ină. Avantajul acestei solu
ț
ii este

simplitatea
ș
i faptul că fiind interpretată direct sursa programului ob
ț
inem

portabilitatea. Dezavantajul evident este viteza de execu
ț
ie redusă. Probabil

cel mai cunoscute limbaj interpretat este limbajul Basic.

●
Compilate:
​
codul sursă al programelor este transformat de compilator într-un

cod ce poate fi executat direct de procesor, numit cod ma
ș
ină. Avantajul este

execu
ț
ia extrem de rapidă, dezavantajul fiind lipsa portabilită
ț
ii, codul

compilat într-un format de nivel scăzut nu poate fi rulat decât pe platforma de

lucru pe care a fost compilat.

Limbajul Java combină solu
ț
iile amintite mai sus, programele Java fiind atât interpretate cât

ș
i compilate. A
ș
adar vom avea la dispozi
ț
ie un compilator responsabil cu transformarea surselor

programului în a
ș
a numitul c od de octe
ț
i, precum
ș
i un interpretor ce va executa respectivul cod de

octe
ț
i.

Codul de octe
ț
i este d iferit de codul ma
ș
ină. Codul ma
ș
ină este reprezentat de o succesiune

de instruc
ț
iuni specifice unu i anumit procesor
ș
i unei anumite platforme de lucru reprezentate în

format binar astfel încât să poată fi executat fără a mai necesita nici o prelucrare.

Codurile de octe
ț
i sunt seturi de instruc
ț
iuni care seamănă cu codul scris în limbaj de

asamblare
ș
i sunt generate de compilator independent de mediul de lucru. În timp ce codul ma
ș
ină

este executat direct de către procesor
ș
i poate fi folosit numai pe platforma pe care a fost creat,

codul de octe
ț
i este interpret at de mediul Java
ș
i de aceea poate fi rulat pe orice platformă pe care

este instalată mediul de execu
ț
ie Java.

Prin ma
ș
ina virtuală Java ( JVM) vom în
ț
elege mediul de execu
ț
ie al aplica
ț
iilor Java.

Pentru ca un cod de octe
ț
i să poată fi executat pe un anumit calculator, pe acesta trebuie să fie

instalată o ma
ș
ină virtuală Ja va. Acest lucru este realizat automat de către distribu
ț
ia J2SDK

4

7. Model-view-controller

Model-view-controller (MVC) este un model arhitectural utilizat în
​
ingineria software
​
.

Succesul modelului se datorează izolării logicii de business fa
ț
ă de considerentele interfe
ț
ei cu

utilizatorul, rezultând o aplica
ț
ie unde aspectul vizual sau/
ș
i nivelele inferioare ale regulilor de

business sunt mai u
ș
or de mo dificat, fără a afecta alte nivele.

Arhitectură:

●
Model:
​
Această parte a controlatorului manipulează opera
ț
iunile logice
ș
i de

utilizare de informa
ț
ie (trimisă dinainte de către rangul său superior) pentru a

rezulta de o formă u
ș
or de în
ț
eles.

●
Vizualizare:
​
Acestui membru al familiei îi corespunde reprezentarea grafică, sau

mai bine zis, exprimarea ultimei forme a datelor: interfa
ț
a grafică ce

interac
ț
ionează cu utilizatorul final. Rolul său este de a eviden
ț
ia informa
ț
ia

ob
ț
inută p ână ce ea ajunge la controlor.

●
Controlor:
​
Cu acest element putem controla accesul la aplica
ț
ia noastră. Pot fi

fi
ș
iere, sc ripturi (eng. scripts) sau programe, în general orice tip de informa
ț
ie

permisă de interfa
ț
ă. În acest fel putem diversifica con
ț
inutul nostru de o formă

dinamică
ș
i statică, în acela
ș
i timp.

5
4

​
https://www.academia.edu/34835846/Curs_practic_de_Java

5

​
https://ro.wikipedia.org/wiki/Model-view-controller

8. React

React
​
(cunoscută
ș
i sub numele de
​
React.js
​
sau ReactJS) este o bibliotecă JavaScript

open-source pentru construirea de interfe
ț
e de utilizator. Este între
ț
inută de Facebook
ș
i de o

comunitate de dezvoltatori
ș
i companii individuale. React poate fi folosită ca bază pentru

dezvoltarea aplica
ț
iilor mobi le cu o singură pagină sau mobile.

6
Acum 5 ani, Jordan Walke, un inginer angajat la Facebook a creat librăria JavaScript acum

numita React. JS. Alteori cunoscut sub numele de JSX, este o sintaxă specială care permite

utilizatorului să combine HTML cu JavaScript.

Dacă privim lucrurile dintr-o altă perspectivă, React este partea de View din acest model. El

explică cum interfa
ț
a (UI) es te împăr
ț
ită în 3 păr
ț
i interconectate. Prima parte, Model-ul,

actualizează partea de View. Apoi, utilizatorul observă modificarea
ș
i folose
ș
te Controller-ul, care

manipulează Model-ul. Cu alte cuvinte, React poate proiecta partea aplica
ț
iei pe care o vede

utilizatorul.

ReactJS este o librărie JavaScript, care permite programatorilor cu experien
ț
ă, să creeze o

Interfata (UI) într-un timp mult mai scurt. Mai pu
ț
in timp folosit pentru dezvoltare înseamnă mai

pu
ț
ini bani investi
ț
i.

Po
ț
i folosi ReactJS p entru a dezvolta interfa
ț
a aplica
ț
iei atat într-o aplica
ț
ie de tip Web cât
ș
i

într-o aplica
ț
ie de tip Mobile . Datorită abilită
ț
ii librariei de a refolosi componente din interfa
ț
ă,

poate scuti
ș
i mai mult timp pentru dezvoltarea aplica
ț
iilor dorite. Folosind ReactJS pentru o

aplica
ț
ie Web sau Mobile ce necesită o actualizare dinamică a paginii prezintă următoarele

avantaje:

●
Este foarte prietenos din punct de vedere SEO. ReactJS poate rezolva un e
ș
ec

obi
ș
nuit al motorului de căutare de a citi aplica
ț
iile JavaScript complexe prin

rularea pe server, randarea
ș
i returnarea browser-ului virtual DOM ca o

pagină web obi
ș
nuită

●
Asigură o randare mai rapidă. Toate modificările făcute aplica
ț
iei se aplică

mai întâi unui DOM virtual
ș
i apoi, folosind un algoritm diferen
ț
iator, se

calculează modificările necesare. Ulterior, arborele DOM real este actualizat

corespunzător.

●
Garantează un cod stabil. ReactJS folose
ș
te un flux de date descendent care

se traduce prin capabilitatea de a modifica starea unui obiect, să facă

schimbarea
ș
i, după aceea, să modifice numai anumite componente. Acest tip

de structură asigură stabilitatea codului
ș
i performan
ț
ă continuă.

6

​
https://ro.wikipedia.org/wiki/React.js

●
React Native este potrivit atât pentru dezvoltarea aplica
ț
iilor
​
Mobile
​
cât
ș
i

Web. ReactJS urmăre
ș
te acela
ș
i model de pro iectare pentru dezvoltarea de

aplica
ț
ii Web
ș
i Mobile, ajutând la procesul de tranzi
ț
ie.

ReactJS este folosit atât pentru aplica
ț
ii pe o singură pagină (SPA) cât
ș
i pentru proiecte la

scară largă (LSP).

Rezumând cele de mai sus, ReactJS este un instrument foarte practic ce permite

programatorilor să dezvolte o interfa
ț
ă u
ș
or de utilizat în cel mai scurt timp. Astfel, proprietarul

aplica
ț
iei, va putea economis i capital
ș
i timp. Tot ce mai rămâne de a flat este cum va arata interfa
ț
a

finală
.

7

9. TypeScript

TypeScript este un superset de JavaScript dezvoltat de Microsoft. Are toate caracteristicile

Javascript. Utilizează compilatorul TypeScript pentru a converti fi
ș
ierul TypeScript (ts) în

fi
ș
ierul JavaScript (js). TypeScript este mai u
ș
or de integrat în proiectele JavaScript.

TypeScript oferă, de asemenea, verificarea tipului static. Acesta permite programatorului să

verifice
ș
i să atribui variabile
ș
i tipuri de func
ț
ii. Această caracteristică face codul mai u
ș
or

de citit
ș
i de prevenire a erorilor. TypeScript are tipuri de date cum ar fi String, Number,

Boolean, Null, Array, Enum, Tuple
ș
i Generics.

7

​
https://www.roweb.ro/ro/blog/4-beneficii-ale-reactjs/

Principalul avantaj al TypeScript este că permite crearea de obiecte bazate pe clasă.

Programatorii din C ++, Java sunt familiariza
ț
i cu concepte precum clase, obiecte,

mo
ș
tenire. Atunci când încearcă să programeze folosind JavaScript, poate fi dificil să se

aplice acele concepte în scenariul JavaScript. Pentru a crea o clasă în JavaScript, un

programator ar trebui să creeze o func
ț
ie. Pentru mo
ș
tenire, trebuie să folosească,

prototipuri. Cu toate acestea, TypeScript este bazat pe clasă, astfel încât este capabil să

suporte mostenirea, încapsularea
ș
i modificatorul ca limbaj de programare orientat pe

obiect.

8

10. HTML

Unul dintre principalele elemente fundamentale ale WWW ( World Wide Web ) este HTML

( Hypertext Markup Language ), care descrie formatul primar în care documentele sunt distribuite
ș
i

văzute pe Web. Multe din trăsăturile lui, cum ar fi independen
ț
a fa
ț
ă de platforma, structurarea

formatării
ș
i legăturile hyper text, fac din el un foarte bun format pentru documentele Internet
ș
i

Web.

Primele specifica
ț
iile de bază ale Web-ului au fost HTML, HTTP
ș
i URL.

HTML a fost conceput ini
ț
ial de Tim Berners-Lee la CERN în 1989. HTML a fost văzut ca o

posibilitate pentru fizicienii care utilizează computere diferite
ș
i schimbe între ei informa
ț
ie

utilizând Internetul. Erau prin urmare necesare câteva trăsături: independen
ț
ă de platformă,

posibilită
ț
i hypertext
ș
i structurarea documentelor.Independen
ț
ă de platforma înseamnă că un

document poate fi afi
ș
at în m od asemănător de computere diferite ( deci cu fonte, grafică
ș
i culori

diferite ), lucru vital pentru o audien
ț
ă atât de variată.

Hipertext înseamnă că orice cuvânt, frază, imagine sau alt element al documentului văzut de

un utilizator ( client ) poate face referin
ț
ă la un alt document, ceea ce u
ș
urează mult navigarea între

multiple documente sau chiar în interiorul aceluia
ș
i document. Structurarea riguroasă a

documentelor permite convertirea acestora dintr-un format în altul precum
ș
i interogarea unor baze

de date formate din aceste documente.

Standardul oficial HTML este World Wide Web Consortium (W3C), care este afiliat la

Internet Engineering Task Force (IETF). W3C a enun
ț
at câteva versiuni ale specifica
ț
iei HTML,

printre care
ș
i HTML 2.0, H TML 3.0,HTML 3.2, HTML 4.0
ș
i, cel mai recent, HTML 4.01. în

acela
ș
i timp, autorii de brow sere, cum ar fi Netscape
ș
i Microsoft, au dezvoltat adesea propriile

"extensii" HTML în afara procesului standard
ș
i le-au încorporat în browserele lor. În unele cazuri,

cum ar fi tagul Netscape , aceste extensii au devenit standarde de factor adoptate de autorii de

browsere.

8

​
https://ro.sawakinome.com/articles/programming/difference-between-javascript-and-typescript.html

Documentele HTML sunt documente în format ASCII
ș
i prin urmare pot fi create cu orice

editor de texte. Au fost însă dezvoltate editoare specializate care permit editarea într-un fel de

WYSIWYG de
ș
i nu se poate vorbi de WYSIWYG atâta vreme cât navigatoarele afi
ș
ează acela
ș
i

document oarecum diferit, în func
ț
ie de platforma pe care rulează. Au fost de asemenea dezvoltate

convertoare care permit formatarea HTML a documentelor generate (
ș
i formatate ) cu alte editoare.

Evident conversiile nu pot patra decât par
ț
ial formatarile anterioare deoarece limbajul HTML este

încă incomplet.

9

Un
​
limbaj de marcare
​
este un mod prin care computerele vorbesc între ele pentru a

controla modul în care este procesat
ș
i prezentat textul. Pentru a face acest lucru, vom utiliza două

lucruri:
​
Tags(etichete)
​

ș
i
​
Attributes(atribute)
​
acestea fiind utilizate împreună, dar îndeplinind

func
ț
ii total diferite.

Ne putem pune următoarea întrebare: ce sunt etichetele
ș
i atributele?

Pentru a crea o pagină HTML se poate utiliza orice editor de text (Notepad, Notepad
​
++
​
, Wordpad,

FrontPage, Dreamweaver etc.), iar atunci când se salvează se folose
ș
te extensia .html sau extensia

.htm.

Tagurile HTML sunt marcaje pe care limbajul HTML le folosește alături de texte pentru a

ajuta browser-ul de internet să afișeze corect conținutul paginii web. Acestea sunt încadrate de

parantezele unghiulare „<”
ș
i „>”.

Tagurile HTML pot fi de două feluri:

●
Taguri
pereche
(unul
de
început
și
unul
de
încheiere).
Tagul
de
încheiere
are

semnul / la începutul lui.

●
Exemple: <html> și </html>; <body> și </body> etc.

Taguri
simple
(nu
au
un
tag
de
încheiere).
Aceste
taguri,
de
obicei,
nu
au
con
ț
inut

ș
i se mai num esc
ș
i elemente vide. Elementele vide su nt închise în tagul de început.

Exemple: <hr />, <br />.

Atributele sau parametrii
​
pot fi definite ca niște proprietăți ale tagurilor. Ele oferă informa
ț
ii

suplimentare pentru tagul respectiv. Atributele se pun doar în cadrul tagului de început, înainte de

închiderea parantezei unghiulare. Atributele au un nume
ș
i o valoare setată, de genul nume =

"valoare". Dacă un tag nu are nici un atribut, atunci browser-ul va lua în considerare valorile

implicite al tagului respectiv.

10

Un exemplu de atribut este:

9

​
https://web.ceiti.md/lesson.php?id=1

10

​
http://liceulrasnov.rdsbv.ro/laura/pag2.html

<img src="mydog.jpg" alt="A photo of my dog.">

În acest caz, sursa de imagine (src)
ș
i textul alt (alt) sunt atribute ale
​
<img>
​
etichetei.

Mai jos voi prezenta care este configurarea de baza a unei pagini HTML.Aceste etichete ar trebui

plasate unul
​
lângă
​
celălalt
​
în partea de sus a fiecărei pagini HTML pe
​
care le crea
ț
i.

<!DOCTYPE html>
​
– Această etichetă
​
specifică limbajul pe
​
care îl ve
ț
i scrie pe pagină. În

acest caz, limbajul este HTML 5.

<html>
​
– Această etichetă semnalează că de aici înainte vom scrie în cod HTML.

<head>
​
– Acesta este locul unde merg toate
​
metadatele paginii
​
– lucruri destinate în mare

parte motoarelor de căutare
ș
i alte programe de calculator.

<body>
​
– Aici vom scrie
​
con
ț
inutul paginii
​
.

Tag-uri suplimentare

În interiorul
​
tag-ului
​
<head>
​
, va exista un
​
tag
​
care este mereu inclus:
​
<title>
​
,

dar există
ș
i altele la fel de im portante:

<title>

Aici
​
introducem numele paginii
​
, deoarece va apărea în partea de sus a ferestrei sau tabului

browserului.

<meta>

Aici sunt stocate informa
ț
ii
​
despre
​
document: codarea caracterelor, numele (contextul

paginii), descrierea.

Vă voi da un mic exemplu:

11

De
ș
i există o listă lun gă cu tag-uri, a
ș
dori să enumer o parte din cele mai des folosite

tag-uri:

●
<ul>,<ol>,<li> –
​
tag-uri sunt utilizate pentru liste;

●
<span>,<div> –
​
pentru a selecta con
ț
inut “inline” pentru scopuri stilistice;

●
<footer> –
​
ajută la identificarea unui subsol al paginii;

●
<tfoot>,<tbody> –
​
identifică unul sau mai multe elemente;

●
<script> –
​
folosit
​

​
pentru specificarea unui script, cel mai des întâlnite scripturi fiind

(JavaScript sau jQuery);

●
<time> –
​
define
ș
te o dată;

11

​
https://html.com/#What_is_HTML

●
<video>,<track> –
​
folosite pentru con
ț
inut video
ș
i audio.

11. CSS

Ce este CSS(Cascading Style Sheets)?

Cascading Style Sheets, sau CSS pe scurt, este un standard simplu al zilelor noastre, ce oferă

designerilor/programatorilor un mod eficient de a controla modul de prezentare a paginilor "WEB".

În zilele noastre CSS a ajuns sa fie în mod primar, un limbaj folosit exclusiv doar pentru "web

design" – însă nu putem exclude faptul că acest limbaj este folosit
ș
i în alte medii de programare.

În compara
ț
ie cu era anilor 90, când controlul prezentării unei pagini se făcea prin tag-uri

HTML, divizate între ele în mai multe fi
ș
iere, ce confereau o munca enorma in cazul unei

actualizari, CSS vine cu un nou standard, si anume ca printr-un singur fi
ș
ier ( o conventie între

programatori este sa se folosească numele general 'style.css' ) – să fie controlat întreg aspectul

proiectului WEB.

CSS nu necesita cuno
ș
tin
ț
e avansate de hardware sau softwar e, ci mai mult câteva

cuno
ș
tin
ț
e HTML.

Înaintea erei CSS, programatorii erau nevoi
ț
i sa controleze aspectul proiectului lor WEB

prin tag-uri de font, pentru a stabili culoarea, mărimea
ș
i familia de font-uri a diferitelor parti ale

paginii web.

exemplu:

De
ș
i această metodă este efectiva în controlarea diferitelor păr
ț
i ale site-ului web,

actualizarea codului consuma timp/bani, mareste mărimea fi
ș
ierelor
ș
i cre
ș
te posibilitatea să se

producă gre
ș
eli în codul viza t.

Prin CSS, am putea spune direct :

ș
i să folosim CSS pe ntru a stiliza :

Astfel ajungem la un concept vechi în programare
ș
i anume "separarea codului de

prezentare" – lucru ce l-am realizat aici. Deasupra la toate CSS vine si simplifica munca enorma

realizata prin tag-uri <font> – simplifica limbajul în sine,
ș
i aduce îmbunătă
ț
iri în comparatie cu

limitele HTML-ului.

12

Există 3 modalită
ț
i prin care po
ț
i defini stilul unei pagini web .

●
Inline CSS

●
Internal sau Embedded CSS

●
External CSS

Inline CSS

Inline CSS este definirea stilului direct în cod pe elementul dorit

Exemplu:

<div id="gazduire-web">

<h1 class="title" style="text-align: center; font-size: 22px;">

Hosterion

</h1>

</div>

12
https://ro.wikibooks.org/wiki/Cascading_Style_Sheets_(CSS)

În acest exemplu, Inline CSS-ul este:
​
style="text-align: center; font-size: 22px;"
​

ș
i

afectează doar elementul <h1> al paginii din interiorul div-ului cu id-ul

"gazduire-web". Mai exact, în situa
ț
ia de fa
ț
ă tot ce face CSS-ul este să alinieze

text-ul pe centrul paginii
ș
i să seteze mărimea font-ului la 22 de px. Nici un alt

element nu este afectat de CSS, chiar dacă are clasa "titlu".

Internal sau Embedded CSS

Internal sau Embedded CSS este definirea stilului direct în codul de HTML. Mai exact,

pentru a defini stilurile dorite ne folosim de tag-ul <style>.

Exemplu:

<div id="pachete-gazduire">

<h1 class="title">

Hosterion – Pachete gazduire web

</h1>

<h2 class="pachet-gazduire">

Gazduire Linux Standard

</h2>

<h2 class="pachet-gazduire">

Gazduire Windows Standard

</h2>

</div>

<style>

.title{

text-align: center;

font-size: 22px;

}

.pachet-gazduire {

text-decoration: underline;

font-size: 20px;

}

</style>

În exemplul de mai sus am folosit tag-ul <style> pentru a adauga anumite stiluri elementelor

de mai sus, mai exact la toate elementele cu clasa "titlu"
ș
i la toate elementele cu

clasa "pachet-gazduire".

External CSS

External CSS este definirea stilului intr-un fisier extern. Acest tip de CSS este cel mai folosit

ș
i vine cu cele mai multe beneficii. În mod normal paginile web folosesc doar

External CSS deoarece este mai convenabil, mai u
ș
or de editat
ș
i centralizează toate

stilurile într-un fi
ș
ier sau mai multe.

Pentru a importa un fisier CSS într-o pagina web folosim:

<link rel="stylesheet" type="text/css" href="style.css">

În mod normal, aceasta linie e regasită în tag-ul <head> de la începutul paginii deoarece,

reprezentand stilul întregii pagini, este cea mai importantă resursa. Centralizarea CSS-ului

reprezinta
ș
i un avantaj la în cărcarea paginii web deoarece dacă avem prea mult Inline CSS

sau Internal CSS în codul HTML e aproape sigur ca multe informa
ț
ii se repetă
ș
i utilizatorul

descarcă mai multa informatie decat este necesara pentru pagina web. Vă ajută
ș
i în cazul în care

dori
ț
i să modifica
ț
i stilul unui singur element. Având prea multe stilu ri Inline sau Interne e posibil

să nu mai găsit unde a
ț
i făcu t o simplă modificare
ș
i stilul să rămână neschimbat chiar dacă îl

modifica
ț
i iar la sfarsitul cod ului.

Prioritatea CSS-ului

Dacă ave
ț
i mai multe tipuri de CSS pe o pagina web, site-ul ia în considerare doar ultimul

style declarat.

Exemplu:

Declara
ț
i în style.css pe care-l ave
ț
i în tag-ul <head>

.avantaje-gazduire-hosterion {

font-size: 22px;

}

După declararea stilului ave
ț
i în cod:

<style>

.avantaje-gazduire-hosterion {

font-size: 24px;

}

</style>

<h1 class="avantaje-gazduire-hosterion" style="font-size: 26px;"> Asistenta 24/7 </h1>

Pe website se ia în considerare doar ultima declarată, adică 26px. Pute
ț
i să face
ț
i o excep
ț
ie

de la regulă folosind: " !important".

Exemplu:

<style>

.avantaje-gazduire-hosterion {

font-size: 24px !important;

}

</style>

În acest caz website-ul consideră valoarea urmată de "!important" prioritară astfelîncat pe

site toate elementele cu clasa "avantaje-gazduire-hosterion" vor avea valoarea

"font-size" egală cu 24px.

Capitolul 3.

Backend

Structura aplica
ț
iei

Pentru o organizare bună
ș
i pentru o mentenan
ț
ă u
ș
oară a aplica
ț
iei am ales să organizez

proiectul în mai multe pachete. Această practică este folosită atât în mediul enterprise cât
ș
i

în mediul universitar pentru a u
ș
ura munca celor care o să adauge featureuri noi aplica
ț
ie sau

celor care vor rezolva bug-uri.

O să explic scopul
ș
i func
ț
ionalitatea fiecărui pachet:

Pom.xml

Cu ajutorul
​
https://start.spring.io/
​
am ini
ț
ializat un proiect Spring Boot rapid
ș
i u
ș
or de

configurat. Initializr oferă o modalitate rapidă de a adăuga dependin
ț
ele de care ai nevoie în proiect.

Dependin
ț
ele proiectului sun t incluse în fi
ș
ierul POM.xml după cum urmează:

Fi
ș
ierul xml con
ț
ine
ș
i informa
ț
ii legate de proiect:

<groupId</groupId>

<artifactId</artifactId>

<version></version>

<name></name>

<description></description>

Unele din cele mai importante dependin
ț
e incluse în proiect sunt

●
spring-boot-starter-web
​
Este folosit pentru construc
ț
ia aplica
ț
iilor Web, incluzând aplica
ț
ii

RESTful (Spring MVC). Folose
ș
te Tomcat ca container incorporat implicit

13

●
spring-boot-starter-data-jpa
​
JPA Spring Data folose
ș
te toate caracteristicile definite de

specifica
ț
iile JPA, în special entitatea, mapările de asociere
ș
i capacită
ț
ile de interogare JPA.

Spring Data JPA adaugă propriile sale caracteristici, cum ar fi implementarea fără cod a

modelului de depozit
ș
i crearea de interogări de baze de date din numele metodei. Spring

Data JPA oferă trei repository-uri
:

14
●
CrudRepository
​
:
​
Oferă
​
crearea, citirea, actualizarea
​

ș
i
​
ș
tergerea.
​
Con
ț
ine

metode precum
​
findOne (), findAll (), save(), delete()
​
etc.

●
PagingAndSortingRepository:
​
Extinde
​
CrudRepository
​

ș
i adaugă

metodele findAll. Ne permite să
​
sortăm
​

ș
i să paginăm datele.

●
JpaRepository:
​

​
Extinde atât repo-ulCrudRepository cât
ș
i

PagingAndSortingRepository. Acesta adaugă metodele specifice JPA, cum ar

fi
​
flush ()
​
.

●
jwt JSON Web Token –
​
este un standard pentru creare de semnături. Jetoanele(token) sunt

generate folosind o cheie privată. Spre exemplu, serverul generează un token pentru admin

ș
i poate fi atribuit un ui client. Clientul poate folosi acel token pentru orice request către

server, acest token dovedind accesul către anumite date. Spre exemplu, token-ul poate fi

cheia pe care o primesti cand te cazezi la un hotel. Cu acea cheie po
ț
i accesa o singură

cameră, iar daca încerci sa intri in altă camera nu vei reu
ș
i.

Spring Boot Application (Main)

@SpringBootApplication este o adnotare care adaugă următoarele adnotări :

13

​
https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/

14

●
@Configuration: Etichetează clasa ca sursă de defini
ț
ii ale bean-urilo pentru

contextul aplica
ț
iei.

●
@EnableAutoConfiguration: Îi spune aplica
ț
iei Spring Boot Boot să începă

să adauge bean-urile bazate pe setările classpathu-ului, alte bean-uri
ș
i

diverse setări
ș
i proprietă
ț
i.

●
@ComponentScan: Îi spune aplica
ț
iei Spring să caute alte componente,

configura
ț
ii
ș
i servicii, lăsându-l să găsească c ontrolerele.

Configuration

Unul din cei mai importan
ț
i piloni ai unei

aplica
ț
ii server-client este gestionarea securită
ț
ii
ș
i

sesiunilor.

Pentru gestionarea sesiunilor am ales

protocolul JWT (Json Web Token) care oferă un grad mai ridicat de siguran
ț
ă fa
ț
ă de

sistemul conven
ț
ional bazat pe cookie-uri. Pentru generarea token-ului avem clasa

JwtTokeProvider care cu ajutorul metodei createToken se crează o cheie bazată pe email
ș
i

rolul pe care îl are clientul respectiv.

Un token JWT este alcătuit din 3 păr
ț
i separate prin punct ( . ):

●
Header

●
Payload

●
Signature

Header-u
​
l con
ț
ine 2 păr
ț
i: tipul token-ului, adică JWT
ș
i algoritmul de semnare folosit care în cazul

nostru este: HS256

{

"alg": "HS256",

"typ": "JWT"

}

Payload-
​
a doua parte a token-ului. Payload-ul con
ț
ine creden
ț
ialele user-ului, cum ar fi email-ul,

rolul user-ului
ș
i data de expirare a token-ului. Payload-ul este apoi codificat Base64Url

pentru a construi a doua parte a token-ului.

{

"sub": "
​
admin@gmail.com
​
",

"roles": "[admin]",

"iat": 1598121627,

"exp": 1598157627

}

Signature:
​
pentru a crea a treia parte a token-ului se ia heder-ul criptat, payload-ul criptat
ș
i

algoritmul specificat în header
ș
i criptate. Semnătura este utilizată pentru a verifica că

mesajul nu a fost schimbat pe parcurs
ș
i verificarea că expeditorul este cel pe care îl

a
ș
teptăm
ș
i nu este vorba de un al treilea participant care dore
ș
te să fure informa
ț
ii.

Am luat un JWT generat de clasa JwtToken Provider
ș
i l-am inserat într-un JWT decoder pentru a

putea vedea informa
ț
iile transmise de server către client la logIn.

Se poate observa că user-ul care a primit acest token are email-ul “
​
admin@gmail.com
​
” , este admin,

avem data în care s-a generat token-ul în format LocalDateTime
ș
i data în care token-ul va expira.

Cum func
ț
ionează JWT?

De fiecare dată când se face un request de log in, dacă creden
ț
ialele sunt corecte, serverul generează

un JWT token pe care îl trimite ca răspuns către client. În frontend se salvează în local storage, iar

de fiecare dată când se face un request este inclus
ș
i JWT token-ul. În func
ț
ie de request si token se

pot întampla mai multe lucruri, spre exemplu:

●
dacă endpoint-ul pe care se face request este valabil, dar clientul nu are acces la acel

endpoint se va întoarce eroare 403 Acces denied.

●
să presupunem că un admin trimite un request către un endpoint la care acces.

Serverul verifică cu cine comunică prin informa
ț
iile decriptate din token, observă că

clientul are acces la acel endpoint
ș
i trimite informa
ț
iile către client deoarece

request-ul este unul autorizat.

●
să presupunem că un student vrea să aplice la un job listat pe pagina universi
ț
ii.

După ce s-a logat i s-a generat un token care a fost salvat in frontend. Când va face

request-ul de aplicare la un anumit job, se va apela un endpoint cu token-ul, astfel,

serverul
ș
tie cu cine comunică
ș
i astfel va adăuga date le studentului la job-ul

respectiv.

Verificare JWT-ului se face cu ajutorul clasei JWTTokenFilter. Se decriptează mesajul token-ului,

se verifică dacă este atribuit vreunui user, dacă token-ul a expirat sau nu
ș
i în func
ț
ie de asta

se dă un răspuns către client.

Clasa JwtConfigurer extinde SecurityConfigurerAdapter
ș
i configurează proprietă
ț
ile necesare

pentru func
ț
ionarea s istemului JWT.

Spring Security

Fiind în mediul enterprise, securitatea este un lucru foarte important. Folosim securitatea

oferită de spring boot security, folosită în 99% din toate aplica
ț
iile spring boot. Toate paginile de

frontend si toate endpoint-urile de backend sunt securizate in func
ț
iie de rolul userului:

Aplica
ț
iile web sunt vulnerabile la amenin
ț
ările de securitate, deoarece sunt expuse lumii

deschise a internetului. Accesul la anumite pagini Web, fi
ș
iere sau alte resurse clasificate trebuie să

fie restric
ț
ionat numai person alului autorizat. Desigur, există mai multe straturi de securitate care

sunt adesea aplicate, cum ar fi firewall, server proxy, securitate JVM
ș
.a. Dar, pentru a controla

accesul, trebuie să existe
ș
i o restric
ț
ie de securitate la nivelul aplica
ț
iei. Prin urmare, Spring

Security, este un tool pentru aplicarea unui nivel de securitate la stratul aplica
ț
iilor java

Spring Security este un framework care permite unui programator să impună restric
ț
ii de

securitate aplica
ț
iilor Web b azate pe Spring prin cadrul componentelor JEE. Pe scurt, este o

bibliotecă care poate fi utilizată, extinsă pentru a personaliza în func
ț
ie de nevoile programatorului.

Deoarece este un membru al aceleia
ș
i familii Spring se integrează foarte u
ș
or cu Spring Web MVC.

Domeniul său principal de operare este de a gestiona autentificarea
ș
i autorizarea la nivelul

solicitării Web, precum
ș
i la nivelul invocării metodei. Cel mai mare avantaj al acestui framework

este că este sigur , dar foarte personalizabil în implementarea sa.

Spring Security operează pe două domenii majore:
​
autentificare
​
ș
i
​
autorizare
​
.

Autentificarea
​
înseamnă că, în timp ce accesa
ț
i anumite resurse restric
ț
ionate, utilizatorul

este de fapt persoana potrivită pentru a face acest lucru. Există două procese care să vă asigure că

utilizatorul este autentic:
​
identificarea
​
ș
i
​
verificarea
​
. De exemplu, un utilizator este autentificat prin

numele de utilizator
ș
i parola , care sunt de obicei stocate într-o bază de date. Spring Security a

solicitat, de asemenea, o interfa
ț
ă pentru a codifica parola pentru a o face mai sigură.

Autorizare
​
determină dreptul utilizatorului de a accesa resurse restric
ț
ionate. Spring se

asigură că un utilizator este permis să acceseze numai acele păr
ț
i ale resursei pe care unul a fost

autorizat să le utilizeze. De exemplu, un utilizator ADMIN are acces nelimitat la proprietă
ț
ile

aplica
ț
iei
ș
i le poate schimba sau manipula – în bine sau în rău. Un U TILIZATOR normal sau un

utilizator GUEST, pe de altă parte, are acces mai controlat
ș
i nu se bucură de acelea
ș
i drepturi ca
ș
i

utilizatorul ADMIN. Aceasta se nume
ș
te autorizarea rolului utilizatorului . În orice aplica
ț
ie Web,

aceasta se realizează prin securitate bazată pe URL. Spring oferă filtre pentru a asigura rolul de

securizare a unei aplica
ț
ii.

După cum se observă, pe anumite endpoint-uri (ex: “student/remove/**”) au acces doar

utilizatorii cu rol de admin, ceea ce este necesar deoarece nu dorim ca un user fără drepturi de

admin sa poată
ș
terge un stu dent. Desigur, pe lângă faptul că unele endpoint-uri sunt restric
ț
ionate,

dacă un anumit utilizator nu va avea acces la un anumit endpoint, acea pagină nu va apărea în

interfa
ț
ă, dar despre acest as pect vom discuta la capitolul frontend.

Un alt lucru important a fost criptarea parolelor. Nu păstrăm nici o parolă în clar, ci acestea

sunt hash-uite cu un algoritm în urma căruia 2 parole identice nu creează un hash identic. Dacă prin

absurd cineva ar sparge baza de date
ș
i ar ob
ț
ine parolele hashuite nu ar putea să ob
ț
ină acces la

conturile utilizatorilor.

Acest lucru este posibil datorită bean-ului BCryptPasswordEncoder.

După cum se poate vedea în print screen-ul din consola bazei de date, se observă că parolele sunt

criptate.

Clasa UserDetailsServiceImpl implementează UserDetailsService a
ș
a că trebuie suprascrisă

metoda loadUserByUsername. Această metodă prime
ș
te email-ul user-ului care se loghează
ș
i caută

cu ajutorul Repoitoryurilor student, company
ș
i admin dacă există un user cu email-ul respectiv.

Avem o listă de tipul GrantedAuthority în care se vor afla rolurile user-ului respectiv.

Controllers

Un controlor este responsabil pentru

procesarea requesturilor primite. Invocă logica de

afaceri( Services), actualizează modelul, prime
ș
te

parametrii
ș
i returnează vizu alizarea sau

informa
ț
iile care trebuie reda te. Un MVC Controller este o metodă de resursă adnotată cu

@Controller. Dacă o clasă este adnotată cu @Controller, atunci toate metodele de resurse din

această clasă sunt considerate controlere.

Avem un controler pentru fiecare model din aplica
ț
ia noastră. În esen
ț
ă, în controler avem

endpoint-urile pe care clientul le poate apela. Dacă endpoint-ul pe care se face request nu există în

nici un controler, va apărea cunoscuta eroare 404.

O să luăm ca exemplu StudentController. În primul rând, adnotarea @RestController este

extrem de importantă deoarece fără aceasta, Spring Boot nu va lua în considerare acest fi
ș
ier drept

un controler, a
ș
a că nu va că uta răspunsul la requesturi în acest fi
ș
ier.

.

Adnotarea @Autowired oferă un control mai fin cu privire la unde
ș
i modul în care se va

realiza automatizarea. Adnotarea @Autowired poate fi utilizată pentru a autentifica bean-ul pe

metoda setter, la fel ca @ Annotation @Required, constructor, o proprietate sau metode cu nume

arbitrare
ș
i / sau argumente m ultiple.

Am folosit adnotarea @Autowired pentru StudentRepo care face conexiunea cu baza de date

ș
i putem apela metode pentru a căuta, edita sau
ș
terge date din baza de date.

Am ata
ș
at metoda “lo gin” care este folosită când se face un request pe endpointul “/logIn”.

Requestul este de tip POST
ș
i prime
ș
te ca parametru un obiect de tip LoginDTO care constă în

email-ul si parola primită din frontend. Se observă că la login se apeleaza metoda createToken

despre care am discutat în subcapitolele anterioare. Dacă autentificarea se termină cu succes, vom

trimite ca răspuns în frontend o listă cu emailul userului, token-ul JWT care va fi salvat în Local

Storage si roulul userului.

Putem observa
ș
i alte endpointuri care pot fi apelate de către client. Spre exemplu

endpointul “/student/remove{id}”este apelat pentru a
ș
terge un student. După cum se observă mai

sus, controlerul trebuie sa fie cât mai simplu, a
ș
a că logica de business se face în studentService.

Se apelează metoda removeUserById din StudentService care apelează la rândul ei o metodă din

StudentRepo.

Print screen-ul de mai sus este din fi
ș
ierul JobController. Putem observa cele 2 endpoint-uri

de tip GET care vor fi folosite la afi
ș
area joburilor acceptate de administrator(primul get) si afi
ș
area

joburilor care încă nu au fost vizualizate de un administrator. După cum se observă, către frontend

nu trimitem direct obiecte de tipul Job, ci avem niste clase DTO( Data Transfer Object) care ne

ajută să trimitem doar field-urile dorite ale unui model.

Se pot observa
ș
i endpoint-u ri care pot fi apelate doar de către admin :”/approveJob/{id}”. Acest

endpoint se apelează la apăsarea unui buton în front end când se dore
ș
te upgradarea unui anumit job

ca Job verificat. Se observă că id-ul jobului trebuie specificat în request.

Models

Modelul reprezintă un obiect sau JAVA POJO care transportă

date. Poate avea, de asemenea, logică pentru actualizarea

controlerului dacă datele sale se schimbă.

Pentru fiecare tabel din baza de date există un model pentru a

putea modela datele în aplica
ț
ia Java. În continuare vom prezenta

câteva modele folosite în aplic
ț
ie:

Se poate observa că în proiect am folosit pluginul LOMBOK.

Lombok este o bibliotecă Java care se conectează automat la IDE u
ș
urând efortul

programatorilor Java. Biblioteca te ajută să nu mai redactezi metode precum getter, setter sau

constructori. Cu o câteva adnotări, clasa va avea incorporate getteri, setteri
ș
i constructorii, fără a

apărea în cod aceste metode. Acest lucru duce la cură
ț
area vizuală a claselor.

După cum se observă în codul de mai sus, clasele Student, Company
ș
i Admin

implementează interfa
ț
a Use r pentru ca la log in, să nu avem nevoie de o pagină de login pentru

fiecare din cei de mai sus, ci una pentru to
ț
i. Cu ajutorul metodelor care trebuie suprascrise în cele 3

clase se poate face log in-ul printr-un singur portal.

Repositories

@Repository este o adnotare Spring care

indică faptul că clasa decorată este un repository. Un

repository este un mecanism pentru încapsularea

comportamentului de stocare, găsire
ș
i căutare care

emulează o colec
ț
ie de obiec te.

Services

În pachetul services se găsesc clase

în care se realizeaza logica de business a

aplica
ț
iei. Pentru fiecare model avem o clasă

unde avem diferite metode care vor fi apelate

în metodele din controler.

În print screen-urile anterioare se observă că logica aplica
ț
iei este făcută în