Conduc ător științific: Conf . Dr. Ing. SIMA Dorin Absolvent: Răvar Andra -Nicoleta Specializarea : CALCULATOARE – Sibiu, 20 19 – 2 UNIVERSITATEA… [605716]

1

UNIVERSITATEA “LUCIAN BLAGA” DIN SIBIU
FACULTATEA DE INGINERIE
DEPARTAMENTUL DE CALCULATOARE ȘI INGINERIE ELECTRICĂ

PROIECT DE DIPLOMĂ

Conduc ător științific: Conf . Dr. Ing. SIMA Dorin

Absolvent: [anonimizat] : CALCULATOARE

– Sibiu, 20 19 –

2

UNIVERSITATEA “LUCIAN BLAGA” DIN SIBIU
FACULTATEA DE INGINERIE
DEPARTAMENTUL DE CALCULATOARE ȘI INGINERIE ELECTRICĂ

PROGRAMARE ONLINE LA
MEDICUL DE FAMILIE

Conducător științific: Conf. Dr. Ing. SIMA Dorin

Absolvent: [anonimizat] : CALCULATOARE

3
CUPRINS

PROGRAMARE ONLINE LA MEDICUL DE FAMILIE ………………………….. ………………………….. ………. 2
1. Introducere ………………………….. ………………………….. ………………………….. ………………………….. ……………. 5
2. Medicina de familie ………………………….. ………………………….. ………………………….. ………………………….. .. 7
2.1 Ce spun statisticile? ………………………….. ………………………….. ………………………….. ……………………… 7
2.2 Relația între pacient: [anonimizat] ………………………….. ………………………….. ………………………….. ……….. 8
3. Considerații teoretice ………………………….. ………………………….. ………………………….. ………………………… 10
3.1 Când a apărut WEB -ul? ………………………….. ………………………….. ………………………….. …………….. 10
3.1.1 Cum funcționează WEB -ul? ………………………….. ………………………….. ………………………….. … 12
3.1.2 Clienții și Serverele ………………………….. ………………………….. ………………………….. ……………… 13
3.2 Internetul ………………………….. ………………………….. ………………………….. ………………………….. ……… 14
3.2.1 O rețea de conectare simplă ………………………….. ………………………….. ………………………….. …. 15
3.2.2 Diferența dintre Internet si WEB ………………………….. ………………………….. ……………………… 16
3.3 Limbajul HTML ………………………….. ………………………….. ………………………….. ……………………….. 17
3.3.1 Formatul unui fișier HTML ………………………….. ………………………….. ………………………….. …. 17
3.3.2 DOM(Document Object Model) ………………………….. ………………………….. ……………………….. 19
3.3.3 Elemente de bază în HTML ………………………….. ………………………….. ………………………….. …. 20
3.5 Opera ții cu baze de date pe WEB ………………………….. ………………………….. ………………………….. .. 24
3.5.1 Generalități ale bazelor de date ………………………….. ………………………….. ………………………… 26
3.5.2 Modelul relațional al bazelor de date ………………………….. ………………………….. ………………… 28
3.5.3 Proiectarea bazelor de date ………………………….. ………………………….. ………………………….. ….. 30
3.5.4 MYSQL ………………………….. ………………………….. ………………………….. ………………………….. ….. 34
4. Prezentarea Aplicației ………………………….. ………………………….. ………………………….. ……………………….. 36
4.1 Tehnologii folosite ………………………….. ………………………….. ………………………….. ……………………… 36
4.1.1 Visu al Studio Code ………………………….. ………………………….. ………………………….. ………………. 36
4.1.2 Node.js NPM ………………………….. ………………………….. ………………………….. ……………………….. 38
4.1.3 ReactJS ………………………….. ………………………….. ………………………….. ………………………….. …… 41
4.1.4 RESTful API ………………………….. ………………………….. ………………………….. ……………………….. 44
4.1.5 MySQL Work bench ………………………….. ………………………….. ………………………….. …………….. 44
4.2 Crearea bazei de date ………………………….. ………………………….. ………………………….. ………………… 46
4.2.1 Crearea tabelelor ………………………….. ………………………….. ………………………….. …………………. 48
4.2.2 Diagrama bazei de date ………………………….. ………………………….. ………………………….. ……….. 49

4
4.2.3 Interogarea bazei de date ………………………….. ………………………….. ………………………….. …….. 51
4.3 Funcționalitatea aplicației ………………………….. ………………………….. ………………………….. ………….. 54
5. Concluzii ………………………….. ………………………….. ………………………….. ………………………….. …………….. 63
5.1 Posibilități de dezvoltare ulterioare ………………………….. ………………………….. …………………………. 64
6. BIBLIOGRAFIE ………………………….. ………………………….. ………………………….. ………………………….. ….. 65
7.ANEXE ………………………….. ………………………….. ………………………….. ………………………….. ……………….. 68

5
1. Introducere

Am ales ca temă ,, Programarea online la medicul de familie” deoarece consider c ă acest
sistem informațional le va permite medicilor să -și gestioneze în mod eficient activitatea și va
sistematiza și facilita relația dintre pacient și medic, programarea realizându -se online, în timp
real, de pe dispozitive precum PC, laptop, tabletă, smartp hone.
Trăind în secolul vitezei, marea majoritate a oamenilor duce lipsă de timp, energie și
răbdarea de a aștepta la cozi interminabile pentru a obține o programare pentru consult la medicul
de familie. Sistemul online de rezervare la medicul de familie e ste deci, o necesitate cu ajutorul
căreia se dorește a se eficientiza timpul de care dispun pacienții și medicii .
Scopul acestei lucrări de diplomă constă în a crea un sistem de gestionare a activita ții
medicilor care să îi ajute pe acestia dar și pe pacienții acestora să își rezerve o programare medicală.
Resursele de care sistemul de informatizare are nevoie implică în egală măsură resure bancare dar
și resurse umane (persoane calificate pentru întreținerea sistemului și actualizarea datelor).
Integrarea acestui sistem în domeniul medical presupune o serie complex ă de probleme din
punct de vedere al aplicării a cestuia în practică dar mai ales din punct de vedere al costurilor.
Principala problemă se pune în schimbarea modului de practicare al medicilor, de la munca de
mână la utilizarea calculatorului.
Avantajul unu i astfel de sistem constă in creearea unui dosar electronic al pacientului și
posibilitatea de programare la medicul de familie. Medicii vor avea beneficiul de a -și organiza
mult mai eficient activitatea la cabinetul medical. Sistemul de gestionare trebuie să permită
medicilor să își managerieze timpul online iar pacienții să aibă permisiunea de a înregistra online
o anumită dată liberă și să fie rezervată în numele lor. Odată programat, pacientul trebuie să
primească o confirmare fie online fie prin intermediul telefonului mobil.
Implementarea unui sistem de acest fel trebuie să fie ușor de utilizat pentru medic și
pacient deopotrivă. , și să ducă la o mai bună relaționare între aceștia.

6
Sistemul reprezintă o bază pentru o arie de pornire pentru medi ci si pacienți care au
cunoștințe modice despre operarea pe calculator și procesul de administrare în mod dinamic al
paginilor web. Acesta va fi compatibil cu dispozitive precum PC, laptop, tablet ă, smartphone
pentru a fi ușor de accesat din orice loc, în orice moment.
Structura lucrării de diplomă se desfășoară în 7 capitole :
Capitorul 1 – Introducere. Acest capitol prezintă scopul lucrării de diplomă, domeeniul
din care face parte.
Capitolul 2 – Scurt ă prezentare a domeniului medicinei de familie.
Capitolul 3 – Considerații teoretice. Prezintă noțiuni importante legate de Web, Internet,
diferența dintre acestea, pagini web statice și dinamice, limbajul HTML împreună cu cele mai
importante elemente folosite în HTML , generalități ale bazelo r de date, modelul relațional al
bazelor de date, utilizarea MYSQL și exemple ale comenzilor de bază.
Capitolul 4 – Prezentarea aplicației. Acest capitol este cel mai consistent și prezintă
tehnologiile folosite, crearea și structura bazei de date cu ajut orul tool -ului MySQL Workbench ,
interfața aplicației. Limbajul de programare este JavaScript iar mediul folosit pentru programarea
aplicației este Visual Studio Code.
Interfața grafică a aplicației a fost construită cu ajutorul unui framework ultramodern J avaScript
numit ReactJS, ce permite crearea de interfețe interactive de către utilizator. Am ales ReactJS
deoarece oferă multe funcționalități, necesintând doar configurarea după nevoile aplicației
noastre. De asemenea, am folosit limbajul CSS care descrie stilul documentului și cum ar trebui
să fie afișate acestea pe display.
Capitolul 5 – Concluzii. Capitolul conține concluziile la care am ajuns în urma
implementării acestui sistem, împreună cu posibilitățile ulterioare de dezvoltare.
Capitolul 6 – Bibliografie. Capitol ce cuprinde toate sursele de inspirație, cărți dar și
surse online (articole, blog -uri).
Capitolul 7 – Anexe. Aici se regăsesc cuprinsul figurilor și al tabelelor.

7

2. Medicina de familie

Medicina de familie constituie o importanț ă majoră, ce presupune aptitudini și calități ce
doboară barierele strict profesionale ale unui medic . Informațiile legate de sănătatea pacienților
necesită relatarea limpede și concisă cu privire la diagnostice, tratamente sau prevenirea
diverselor afecți uni.
Majoritatea oamenilor se tem de vizita la orice tip de medic, fie el medic de familie,
stomatolog, cardiolog sau alte tipuri de medic. Această teama poarta numele de iatrofobie (în
limba greacă, cuvântul grec iatros semnificând medic) . Iatrofobia presupune anumite simptome
suferite de cel în cauză precum, senzație de sufocare, ritm cardiac accelerat, exsudație excesivă.

2.1 Ce spun statisticile?

Conform unui studiu Eurostat din 2019, speranța de via ță la nivelul țării noastre este mult
mai scăzută decât media europeană. La nivel european statisticile arată că media de viață este de
64,2 ani pentru sexul feminin si 63,5 ani pentru sexul masculin. România prezintă statistici
îngrijorătoare, media pentru femei fiind de 59 de ani, iar p entru bărbați 59,8 ani.
Mai mult de jumătate din populația României nu calcă pragul cabinetelor medicale și evită
controalele medicale de orice natură ar fi ele , până când problema devine una serioasă și mai
dificil de tratat. Potrivit Eurostat, un procent de 49% dintre persoanele care locuiesc în România
preferă să fie consultate si tratate în străinătate.
Foarte multe persoane neglijează vizitele la medic ani de zile iar problema cea mai mare este
netratarea afecțiunilor suferite de pacienți, care deseori întrerup tratamentele precrise de medici
în momente neprielnice.

8
2.2 Relația între pacient și medic

Relația între medic și pacient este una specială, medicul de familie ocupându -se de toate
problemele pacientului pe care îl are în grijă, pe când relația între pacient si oricare alt specialist
este bazată pe un dialog privind suferința bolnavului doar înt r-o anume boală.
Comunicarea între pacient și medic trebuie să satisfacă atât nevoile pacientului cât și
nevoile medicului. Scopul este de a scoate la iveală cauzele suferinței unui bolnav și totodată de
a înțelege în mod personal trăirile bolnavului aflat în suferință.
În funcție de problemele de care dispun pacienții, cum ar fi: concedii medicale, adeverințe
medicale, bilete de trimitere către alte instituții medicale pentru efectuarea unor analize
amănunțite, furnizarea rețetelor medicale, medicul de familie are obligația de a emite
documentele necesare cu privire la toate cele enumerate anterior.

Cum ar trebui să se manifeste relația de la pacient la medic?
• Pacientul trebuie să își stabilească un scop și a numite așteptări în momentul în c are se
decide să contacteze medicul de familie ;
• Timpul consultației trebuie să fie folosit eficient, să se exprime clar cerințele pentru care
pacientul dorește să fie consultat ;
• Este necesar să prezinte istoricul medical, dacă a suferit intervenții chirurgicale, dacă
suferă de anumite boli, alergii (medicamentoase sau produse de alimente) ;
• Timpul în care decurge consultația este de maxim 20 de minute, de aceea trebuie ca
pacientul să se focuseze pe problemă și să ofere informații esențiale medicului care la
rândul său, să poată răspunde la cât mai multe întrebări ;
• În cazul în care există nelămuriri cu privire la diagnosticul primit, pacientul nu trebuie să
ezite sa ceară explicații.

9
Cum ar trebu i să se manifeste relația de la medic la pacient?
• Regula de bază este ca medicul să știe sa asculte cu atenție informațiile pe care i le oferă
pacientul ;
• Exprimarea cu privire la diagnosticul pacientului trebuie să fie relatată prin explicații
complete și clare, într-un limbaj înțeles de pacient pentru a ști cu ce se confruntă acesta ;
• Diagnosticul și tratamentul administrat pacientului trebuie explicat înto cmai în funcție de
capacitatea de înțelegere a pacientului , altfel pacientul va prezenta nemulțumiri, se va
teme și poate ajunge la o stare de depresie ;
• Înainte de părăsirea cabinetului medical, este ideal ca medicul să informeze pacientul cu
privire la re zultatele așteptate ;
• Pentru ca așteptările pacienților să fie îmbucurătoare, medicul ideal ar trebui să
îndeplinească o multitudine de caracteristici printre care se numără :
➢ Încrederea ;
➢ Interesul cu privire la rezolvarea problemelor cu care se confruntă
pacientul ;
➢ Îndrumarea în timp util a pacientului ;
➢ Competență profesională ;
➢ Empatia ;
➢ Respectul cu care își tratează pacienții ;
➢ Sinceritatea .

10
3. Considera ții teoretice
3.1 Când a apărut WEB -ul?

În luna Martie, anul 1989, Tim Berners Lee și -a expus viziunea asupra ce va deveni WEB –
ul într -un document intitulat “Information Management: A Proposal”. Ideea inițială a lui Tim nu a
fost acceptată imediat de către șeful acestuia, Mike Sendall, părându -i-se o idee vagă, dar
interesantă. WEB -ul nu a fost niciodată un proiect oficial CERN, însă Mike a reușit să -i dea răgaz
lui Tim să lucreze la acest proiect în septembrie 1990. Tim a început să lucreze cu un computer
NEXT, unul din produsele timpurii ale lu i Steve Jobs.

Figura 3.1. Propunerea originală a lui Tim Berners Lee. Imaginea aparține CERN(Organizația
Europeană pentru Cercetare Nucleară din Geneva)

11
Până în luna Octombrie, anul 1990, Tim Berners Lee a scris cele 3 tehnologii fundamentale care
stau la baza web -ului actual și pe care le vedem în anumite părți ale browserului nostru web :
1. HTML(HyperText Markup Language): Este un limbaj de formatare care define ște
structura conținutului său. Conținutul este alcătuit dintr -o serie d e componente , în care
încadrăm diverse părți ale materialului pentru a arăta într -un anumit fel sau pentru a se
comporta într -un anumit mod ;
2. URI(Uniform Resource Identifier): Este un șir unic folosit pentru a identifica resursele
din web. Se mai numește și adresă URL. URN -urile, prin contrast, se referă la o resursă
printr -un nume, într -un spațiu de nume dat, cum ar fi ISBN -ul unei cărți ;
3. HTTP(Hypertext Transfer Protocol) : Permite transmiterea documentelor hypermedia,
cum ar fi HTML. Acesta a fost proiectat pentru comunicarea între browserele si serverele
web, dar poate fi folosit și în alte scopuri. HTTP este un model clasic client -server,
clientul deschizând o conexiune pe ntru a face o solicitare, apoi așteaptă până când se
primește un răspuns. Este un protocol neorientat pe conexiune(nu se cunosc comunicările
anterioare). Bazat adesea pe un layer TCP/IP, acesta poate fi folosit pe orice strat de
transport fiabil, adică un protocol care nu pierde mesaje „în tăcere” precum UDP.

Figura 3.2. Cererea HTTP de a prelua pagina hello.htm de pe serverul web care rulează pe
tutorialspoint.com

12
Tim a scris de asemenea și primul editor web/browser și primul server ( “http”) . Până la
sfârșitul anului 1990, prima pagină web a fost difuzată pe Internet, iar în anul 1991, persoane
care nu aparțineau CERN au fost invitate să se alăture acestei comunități web.
Pe măsură ce web -ul a început să se dezvolte, Tim și -a dat seama că potențialul a cestuia s -ar
declanșa doar dacă persoanele care îl vor folosi nu vor plăti taxe și nu vor cere permisiunea
nimănui de a folosi acest browser. El a explicat că tehnologia, fiind un spațiu universal, nu se
poate menține controlul acesteia.
Deci, în anul 199 3 decizia de a face codul de bază disponibil gratuit, pentru totodeauna a fost
aprobat de CERN, în urma căreia s -a declanșat un val global de inovație și colaborare.
Tim s -a mutat la CERN , la Institutul de Tehnologie din Massachusetts în anul 1994 pentru a
înființa Consorțiul World Wide Web (W3C), o comunitate internațională dedicată dezvoltării
standardelor web. El rămâne Directorul W3C până în prezent.

3.1.1 Cum fun cționează WEB -ul?

Web -ul este un seviciu construit pe baza infrastructurii Internetului și respectă anumite
reguli. Când dorim sa introducem în browser o adresă de genul “skype.com”, cererea se
adreseaz ă unui server de nume de domeniu (DNS) care păstrează anumite tabele în care sunt
stocate adrese IP și nume de d omeniu asociate acestor adrese.
Adresa de IP a unui domeniu poate fi aflată ușor, din linie de comandă cu ajutorul
instrucțiunii “tracert nume_domeniu”. Ultima adresă de IP, este adresa serverului căutat.
Astfel, când dorim să navigăm pe orice pagină Web, browserul va cere unui server de nume de
domeniu să traducă numele de domeniu pe care l -am solicitat într -o adresă IP. Browserul solicită
apoi serverului respectiv pagina pe care dorim să o accesăm, utilizând standardul HTTP.
Serverul trebuie conectat la Internet în mod constant, pentru a deservi nevoile vizitatorilor.

13

Figura 3.3. Tracert la skype.com

3.1.2 Clienții și Serverele

Clienții și serverele sunt de fapt calculatoare conectate la web. Modul simplu în care ele
interacționează poate fi exemplificat printr -o diagramă, astfel :

Figura 3.4. Comunicarea între Client și Server

Clientul este un dispoziti v conectat la Internet al utilizatorului web (de exemplu, telefonul
mobil conectat la rețeaua de telefonie mobilă) și un browser web disponibil pe acel dispozitiv .

14
Există o diversitate pentru programele client, ele existând pe indiferent care sistem de operare,
deci, putem afirma că orice utilizator are acces la serviciul WWW.
Serverul este un calculator care atunci când primește o cerere formulată de un client
pentru a accesa o pagină web, o copie a paginii web este descărcată pe mașina pe care operează
clientul pentru a fi afișată în browser. Un ast fel de server este utilizat de un număr imens de
utilizatori, de aceea pentru buna sa funcționare este nevoie de o cantitate enormă de resurse.

Figura 3.5. Accesarea paginii web

3.2 Internetul

Internetul este o rețea mondială de rețele de calculatoare care utilizează suita de
protocoale Internet(denumită și TCP/IP, două dintre cele mai importante protocoale). Această
rețea poate fi numită coloana vertebrală a WEB -ului, infrastructura tehnică care face posibilă
accesarea WEB -ului. Rolul de bază al Internetului este văzut ca o rețea imensă de calculatoare
care comunica împreună.
Istoria Internetului este oarecum obscură. A început în anii 1960 ca un proiect de
cercetare finanțat de Armata Americană, apoi s -a transformat în infrastructură publică în anii
1980, sprijinită de mai multe universități publice și companii private. Tehnologiile diversificate
care suport ă Internetul s -au îmbunătățit de -a lungul timpului, dar modul de funcționare al
acestuia nu s -a schimbat în foarte mare măsură. In ternetul este un mijloc de conectare al
calculatoarelor și are rolul de a găsi o cale de a rămâne conectate aceste calculatoare, indiferent
de impedimente.

15
3.2.1 O rețea de conectare simplă

Când două calculatoare sunt nevoie să comunice, conectarea aces tora poate fi una
fizică(de exemplu, cu un cablu Ethernet), sau poate fi o conectare fără fir(cu ajutorul sistemelor
Wifi sau Bluetooth). Calculatoarele moderne pot folosi oricare dintre aceste moduri de conectare.

Figura 3.6. Conectarea a 2 calculatoare

O rețea de conectare nu se limitează doar la două calculatoare, ci conectarea se poate
realiza pe oricâte calculatoare dorim, însă acest fapt va îngreuna rapid situația. Dacă de exemplu,
conectăm 10 calculatoare, avem nevoie de 45 de cabluri, și 9 conectori/calculator.
Pentru a rezolva situația complicată,fiecare calculator din rețea va fi conectat la un
dispozitiv special numit router. Sarcina acestui router este de a se asigura că un mesaj trimis de
un calculator sursă ajun ge la calculatorul destinație. Procedeul se realizează astfel : Mesajul
transmis de la calculatorul cu numărul 1, transmite mesajul către router, care la rândul său
transmite mesajul către calculatorul cu numărul 2 și se asigură că mesajul nu ajunge la
calculatorul cu numărul 3.
Odată adăugat acest router, rețeaua se simplifică necesitând un număr de doar 10 cabluri și un
router cu 10 prize, după cum arată figura de mai jos(Fig. 3.7).

16

Figura 3.7. Conectarea a 10 calculatoare cu un router

3.2.2 Diferența dintre Internet si WEB

Navigarea pe Web cu un browser Web necesită folosirea unui nume de domeniu pentru a
ajunge la un site web. Asta nu demonstrează că Internetul și Web -ul sunt același lucru. Internetul
este o infrastructură tehnică ce acordă posibilitatea conectării împreună a miliarde de
calculatoare. Printre acestea, unele calculatoare având statutul de servere Web , pot transmite
mesaje accesibile pentru browserele web. Web -ul este un seviciu construit pe baza infrastructurii
Internetului.

17
3.3 Limbajul HTML

HTML(HyperText Markup Language): Este un limbaj de formatare care define ște
structura conținutului său. Conținutul este alcătuit dintr -o serie de componente, în care încadrăm
diverse părți ale materialului pentru a arăta într -un anumit fel sau pentru a se comporta într -un
anumit mod. Fișierul HTML trebuie să dețină extensia .html sau .htm pentru a fi afișat în
browser. Pentru scrierea codului HTML avem nevoie de editoate de text precum Notepad++,
Visual Studio Code. Limbajul HTML este alcătuit dintr -o serie de marcatori, numiți TAG -uri.
Există 2 tipuri de tag -uri:
➢ Simple , fără conținut (de exemplu, <br/> , <hr/> );
➢ Pereche (de exemplu, <p>…</p> , <html>…</html>, etc ).

Formatul unei instrucțiuni :
<Numele Tag -ului> Textul pe care dorim s ă îl afișăm </Numele Tag -ului> .
Primul tag “<Numele Tag -ului>” marchează începutul conținutului de text iar tag -ul “</Numele
Tag-ului” marcheaz ă sfârșitul conținutului.

3.3.1 Formatul unui fișier HTML
Exemplul 1:

18
• Declarația DOCTYPE specifică conformitatea standardului HTML5 ;
• <html> </html> este rădăcina documentului, înștiințează browserul că este un document
HTML ;
• Părțile importante ale unui fișier HTML sunt reprezentate de zonele delimitate de tag –
urile:
1) <head> </head> . Regăsim aici informații care nu se afișează în browser. Titlul
documentului care este încadrat în tag -urile <title> </title> va fi afi șat ca fiind numele
paginii pe care am accesat -o. Alte informații care aparțin acestui tag sunt link -urile care
includ stilul sau meta -informațiile, ajutor pentru referințe ;
2) <body> </body>. Aici se regăsesc toate elementele conținute în document precum
tabele,paragrafe și imagini.

Exemplul 2:

19
Browser -ul va afișa :

Figura 3.8. Afișarea paragrafelor în browser

3.3.2 DOM(Document Object Model)
Este un program API pentru HTML. Documentele sunt modelate cu ajutorul obiectelor,
care au anumite indentități și îndeplinesc anumite funcții. Acest model definește structura logică
a documentului și modul în care acesta este accesat și manipulat. Structura este similară unui
arbore, fiecare tag al arborelui reprezentând un nod în arbore.

Figura 3.9. Structura arborescentă , însoțită de tag -urile necesare

20
3.3.3 Elemente de bază în HTML
3.3.3.1 Atributele tag -urilor

Atributele sunt specificate în tag -urile de început și oferă infomație suplimentară
elementelor HTML. Au structura unei perechi de tipul: nume=”valoare”.

➢ Atributul href
• cel mai important atribut al tag -ului <a> este href,care indic ă destinația link -ului;
Exemplu: <a href="https://bucataria -romaneasca.ro/" > Vizitați bucătăria românească! </a>.
➢ Atributul src
• conține numele fișierului unei imagini ;
Exemplu : <img src=”liliac.jpg” >.
➢ Atributele width și height
• imaginile HTML conțin anumite specificații ca lățime și înălțime , măsurate în pixeli ;
Exemplu: <img src="liliac.jpg" width ="500" height ="300" >.

Figura 3.10. Scalarea imaginii în browser cu atributele width și height

21
➢ Atributul alt
• în momentul în care o poză nu poate fi afișată, din cauza unui URL incorect, acest atribut
este util și specifică un text alternativ .
Exemplu : <img src="liliac.jpg" alt="Imaginea Liliacului" >.

3.3.3.2 Cele mai des folosite tag -uri

Tag Specificații Tag
<a> <a> define ște un hyperlink, folosit spre o pagină .
Exemplu: <a href="https://bucataria -romaneasca.ro/" > Vizitați
bucătăria românească! </a>

<b> Scrierea îngroșată a textului .
Exemplu: <p>Text normal – <b>Text îngroșat </b> .</p>

Figura 3. 11. Afișarea în browser a textului îngroșat

<!–…–> Marche ază un comentariu, ce nu va fi afișat în browser .
Exemplu : <–Asta nu o s ă apară în browser! –>
<body> Conținutul documetului care va fi afșat în browser .
<br> Folosit pentru a trece la o linie nou ă.
<center> Marcator pentru centrarea textului .
<hn>…</hn> Taguri predefinite “titlurilor” dintr -un documnt HTML. În funcție de
importanța acestora sunt numerotate de la <h1> p ână la <h6>.
Exemplu:

22
Afișare în browser :

Figura 3.12. Afi șarea în browser a titlurilor, în funcție de importanță

<hr> Trasarea unei linii orizontale în orice parte a documentului.
<I> Scrierea cu text înclinat .
<img> Afișarea imaginilor
<li> Delimitează elementele unei liste (ordonate sau neordonate) .
<ol> Delimitează o list ă ordonată de elemente
Exemplu:

Afișare în browser:

Figura 3. 13. Afișare în browser listă ordonată de elemente

23
<ul> Delimitează o listă neordonată de elemente
Exemplu:

Afișare în browser :

Figura 3. 14. Afișare în browser listă neordonată de elemente

<p> Define ște un paragraf/Trece automat la o nouă linie.
<table> Marcatorul unui tabel. Este împărțit în rânduri și coloane cu ajutorul
marcatoarelor <tr>…</tr> (pentru rânduri) și <th>…</th>,
<td>…</td> (pentru coloane) .
Exemplu :

24
Afișare în browser:

Figura 3. 15. Afișarea în browser a tabelului f ără contur

Figura 3. 16. Tabel cu contur utilizând atributul “border=1” ( <table
border =1>)

<th> Marcator antet tabel.
<td> Celul ă nouă în cadrul unei linii de tabel.
<tr> Rând nou în tabel.
<u> Sublinierea textului.

Tabel ul 3.1. Tag -uri des folosite în HTML

3.5 Opera ții cu baze de date pe WEB

Odată cu apariția Internetului , utilizatorii au prezentat o nevoie mare de comunicație și
informare, aceste arii fiind redate de portaluri, baze de date, tehnologii de căutare. Bazele de date
au reprezentat un avantaj pent ru întreprinderi, permițând colectarea unor cantintăți de date imense,
pe măsura cantității la fel de voluminoase de clienți.
O pagină Web statică este tipul de bază ușor de creat prin scrierea de tag -uri în fișiere
HTML. Crearea unui site web static, nu necesită cunoștințe de programare web sau de design de
baze de date. Pentru ca informațiile conținute în pagină să nu se schimbe și să arate ca o pagină
imprimată, codurile sunt fixate pentru fiecare pagină.

25

Figura 3.17. Pagină Web statică

O pagină Web dinamică este o aplicație concepută pentru a fi gestionată pe Internet și al
cărui conținut se schimbă în funcție de dorințele utilizatorului. Paginile Web dinami ce necesită o
interacțiune între client si server. Clientul face o cerere și trimite răspunsul formatat în funcție de
preferințele sale. Interacțiunea dintre client și server se bazeză pe servere web, diverse limbaje de
programare și servere de baze de date. Aceste pagini Web , acceseaza conținutul dintr -o bază de
date sau din Siste mul de management al conținului. Prin urmare, atunci când modificăm conținutul
bazei de date, conținutul site -ului Web este, deopotrivă , modificat sau actualizat.
Pentru a genera conținut dinamic, site -ul dinamic utilizeaza scripting pe partea serverului,
a clientului sau chiar pe ambele. În scriptul de client,se generează conținut la computerul client pe
baza datelor introduse de utilizator. Browserul web descarcă pagina web de pe server și procesează
codul paginii pentru a furniza informații utilizatorulu i. În scriptul ce aparține serverului, software –
ul rulează pe server și procesarea este finalizată pe server, apoi paginile sunt trimise utilizatorului.
Operatorii site -urilor Web gestionează colecțiile de date și prezintă rezultate analitice pe baza
aplic ației de baze de date din Web.

Figura 3.18. Pagină Web dinamică

26
3.5.1 Generalități ale bazelor de date

Conceptul de baze de date a apărut în anul 1969, cu ocazia prezentării primului raport
CODASYL( Conference/Committee on Data Systems Languages) într -o conferință care relatează
problemele legate de limbajele de gestiune a datelor. Principiul constă în sistemul de gestiune al
unui fișier de descriere globală a datelor. În urma dezvoltării acestui concept, s -a ajuns la tipurile
de baze de date următoare :
• Baze de date rețea(distribuite);
• Baze de date relaționale;
• Baze de date orientate pe obiecte.

Figura 3.19. Tipuri de baze de date

O bază de date este definită ca u na sau mai multe colecții de date interconectate , împreună
cu descrierea acestora și a relațiilor dintre ele. În mod obișnuit, o baz ă de date este memorată
într-unul sau mai multe fișiere, fiind controlate cu ajutorul sistemelor de gestiune a bazelor de
date. O bază de date trebuie să înfăptuiască următoale condiții :

27
• Să consolideze o dependență reciprocă a datelor față de program și a p rogramului față de
date;
• Redactarea structurii bazei de date trebuie să asigure informații utile și suficiente pentru
cerințele de înștiințare ;
• Să asigure o redundanță minimă ;
• Să autorizeze accesul rapid la informațiile acumulate în baza de date.

SGBD (Si stem de Gestiune al Bazelor de Date) reprezintă un sistem software destinat d efinir ii,
creării și întreținerii bazei de date și de asem enea, permite accesul controlat la informa țiile din
baza de date . Rolul esențial al unui SGBD este de a diviza datele de programele de aplicație.
SGBD permite utilizatorilor finali să creeze, să modifice și să șteargă datele dintr -o bază de date.
Funcționează ca o interfață între utilizatorii bazei de date și programele de aplicații. SGB D
facilitează organizarea și accesibilitatea datelor.
SGBD este util pentru furnizarea unei vizualizări centralizate a datelor, care poate fi disponibilă
pentru mai mulți utilizatori din diferite locații. Accesul și afișarea anumitor date pentru utilizator i
pot fi limitate. SGBD furnizează independență logică și fizică a datelor , așadar utilizatorii nu
trebuie să își facă griji cu privire la stocarea datelor sau la modificările structurii fizice a datelor,
cum ar fi hardware -ul. Atât timp cât programele uti lizează interfața de programare a aplicațiilor
bazei de date (API), dezvoltatorii nu au nevoie să modifice programele.

Arhitectura unei baze de date îndeplinește anumite standarde. O astfel de arhitectură conține
următoarele elemente :
• Baza de date propriu -zisă, în care este memorată colecția de date ;
• Sistemul de gestiune al bazei de date, fiind o colecție de programe software care
realizează gestiunea și prelucrarea datelor ;
• Dicționar al bazei de date ce c uprinde informa ții și structuri despre date, elemente de
descriere a semanticii,documentatie ;
• Mijloace hardware utilizate ;
• categorii de utilizatori ai BD : fie ei utilizatori i finali sau de specialitate cum ar fi,
proiectanți , anali ști – programatori de aplicații.

28
3.5.2 Modelul relațional al bazelor de date

Modelul relațional a fost propus în anul 1970 de către matematicianul Dr.E.F.Codd care
făcea parte din IBM . Este utilizat în toată lumea cu scopul de a stoca si prelucra date într -un mod
eficient. Baza acestui model este reprezentată de teoria matematică a relațiilor (mulțimilor) .
Părțile care alcătuiesc acest model relațional sunt : structura de date, integritatea datelor și
manipularea datelor.
Conceptele care definesc s tructuri le de date relaționale :
• Atribut: Coloană dintr -un tabel. Datele din tabel au anumite particularități numite
atribute ;
• Tabele – Un tabel are două rânduri și coloane de proprietăți. Rândurile reprezintă
înregistrările și coloanele reprezintă atribute ;
• Tuplu – Un singur rând, care conține o singură înregistrare ;
• Schema de relație : Schema de relații reprezintă numele relației cu atr ibutele acesteia ;
• Grad : Numărul total al atributelor rețelei ;
• Cardinalitate : numărul total de rânduri din tabel ;
• Coloană : ilustrează setul de valori pentru un atribut ;
• Relația instanță : reprezint ă un set finit de tupluri ;
• Cheie – Fiecare rând conține unul, două sau mai multe atribute , cu menirea de a
recunoaște un tuplu în tabelă ;
• Domeniu – Oricare atribut deține o valoare și un domeniu predefinit .

Tabelul 3.2. Exemplu Structură Relațională

29
3.5.2.1 Operații ale modelului relațional

Cele 4 opera ții de bază pe care le prezintă modelul relațional :
➢ INSERT este folosit cu scopul de a da valori unui atribut pentru un nou tuplu
insera t într-un tabel ;

Tabelul 3.3. Exemplu de operație INSERT

➢ UPDATE permite modificarea valorilor unor atribute existente unui tuplu ;
În exemplul de mai jos, Nume/Prenume= ”Căpățînă Constantin ” este modificat în “Iorgulescu
Ovidiu”.

Tabelul 3.4. Exemplu de operație UPDATE
➢ DELETE este folosit pentru a șterge tuplurile din tabel ;
În acest exemplu, Nume/Prenume= ”Ovidiu Iorgulescu ” este șters din tabel.

Tabelul 3.5. Exemplu de operație DELETE
ID Nume/Prenume Grupa
1 Armeană Alexandru 241/1
2 Morar Cornelia 243/2
3 Răvar Andra 242/1 ID Nume/Prenume Grupa
1 Armeană Alexandru 241/1
2 Morar Cornelia 243/2
3 Răvar Andra 242/1
4 Căpățînă Constantin 241/2
ID Nume/Prenume Grupa
1 Armeană Alexandru 241/1
2 Morar Cornelia 243/2
3 Răvar Andra 242/1
4 Iorgulescu Ovidiu 241/2 ID Nume/Prenume Grupa
1 Armeană Alexandru 241/1
2 Morar Cornelia 243/2
3 Răvar Andra 242/1
4 Căpățînă Constantin 241/2
ID Nume/Prenume Grupa
1 Armeană Alexandru 241/1
2 Morar Cornelia 243/2
3 Răvar Andra 242/1
4 Iorgulescu Ovidiu 241/2 ID Nume/Prenume Grupa
1 Armeană Alexandru 241/1
2 Morar Cornelia 243/2
3 Răvar Andra 242/1

30
➢ SELECT permite interogarea prin care se preiau din baza de date una sau mai
multe date din tabele.
De exemplu, selectăm Nume/Prenume=” Morar Cornelia”.

3.5.3 Proiectarea bazelor de date

Un mijloc de proiectare al bazelor de date frecvent utilizat este procedeul de modelare E –
R (Entity -Relationship) – denumit modelul Entitate -Relație. Cel care a introdus acest model
prima dată a fost Peter Chen în anul 1976. Modelul E -R figurează ca fundamentul diagramelor
E-R, diagramele fiind reprezentarea grafică a bazei de date. Diagramele E -R mizează pe 3
componente fundamentale, și anume:

• entități;
• atribute;
• relații/legături.

În contextul acestei modelări, o en titate este asemănată cu un tabel relațional (nu doar un
rând din cadrul tabelului) , altfel spus, conține date care descriu un set de particularități
interdependente. După identificarea entităților trebuie să se stabilească atributele acestora.
Atributele s unt caracteristici specifice entităților folosite la identificarea sau clasificarea situației
unei instanțe a unei entități. Instanțele corespund unui rând din tabel omolog entității.
În exemplul de mai jos, atributele entității STUDENT sunt nume, prenume, data_nașterii, adresa,
telefon, e -mail. Diagramele E -R-D presupun scrierea cu litele mici a atributelor imediat sub
numele entității. Unele a tributele pot fi obligatorii sau opționale . Daca este obligatoriu, instanțele
entității trebuie să conțină o valoare pentru acest atribut.
În cazul atributelor opționale, instanțele nu fac cunoscute valorile atributelor.
În exemplul de mai jos, atributele telefon și e -mail nu sunt obligatorii entității STUDENT.
Atributele obligatorii sunt precedate de un asteris c *, cele opționale sunt precedate de un
cerculeț.

31

Figura 3.20. Entitatea STUDENT

Pentru a evita problemele în procesul de proiectare, trebuie să acordăm atenție numelor
entităților și coloanelor și trebuie respectate anumite restricții :
• Trebuie ca numele entităților să fie scrise cu liter e mari (De ex emplu, STUDENT );
• Să conțină doar litere, cifre și caracterul de subliniere “_”;
• Lungimea numelui să nu depășească 64 de caractere ;
• Să nu existe coloane distincte cu diferențe între majuscule și minuscule(de exemplu,
“abc” și “ABC”) .

3.5.3.1 Relații între entități

După ce au fost identificate entitățile și atributele acestora, se stabilește o legătură între
mulțimile de entități. În funcție de modul în care comunica entitățile între ele, relațiile pot fi
binare sau multiple. Relațiile binare se împart în alte 3 cate gorii:

• Rela ția one -to-one(1:1) , reprezintă legătura prin care o înregistrare din tabela părinte
este corespunzătoare unei înregistrări din tabela copil și viceversa ;

Figura 3.21. Relați e one-to-one

32
• Relația one -to-many(1:N ), este cel mai frecvent tip de relație , reprezentând legătura
prin care o înregistrare din tabela părinte este corespunzătoare mai multor înregistrări
din tabela copil, dar unei întregistrări din tabela copil îi corespunde o singură
înregistrare din tabela părinte ;

Figura 3.22. Relați e one-to-many

În exemplul acesta , putem spune că o formație trebuie să includă măcar un artist, însă
acesta poate exista fără o formație, având o cariera solo .

• Relația many -to-many(N :N),reprezintă legătura prin care o înregistrare din tabela
părinte este corespunzătoare mai multor înregistrări din tabela copil și reciproc.

Figura 3.23. Relați e many -to-many

3.5.3.2 Identificarea cheilor

O cheie are rolul de a stabili rel ațiile între tabele și de a identifica în mod unic un tuplu dintr –
un tabel pentru a nu apărea problema duplicității. Poate fi un singur atribut sau o îmbinare de
atribute care se comportă precum o cheie. Cheile sunt necesare pentru a identifica orice rând din
tabel. Aplicațiile din ziua de astăzi înglobează tabele cu mii de înregistrări. Pentru a prelua
anumite înregistrări și pentru evita problemele de duplicitate, se definesc o multitudine de chei
cu dif erite funționalități.

33
Student_id Nume Telefon Vârsta
1 Cornelia 0746558496 23
2 Alexandru 0725448963 23
3 Maria 0751448632 21
4 Daniela 0749881523 20
5 Mirela 0765879636 21

Tabelul 3.6. Tabel pe baza căruia se vor identifica cheile

Chei a candidat ă: Are proprietatea unei super chei, fără repetarea atributului.
În momentul în care se regăsesc mai multe chei candidate, se alege una dintre ele ca fiind cheie
primară iar restul cheilor vor fi secundare.
➢ Pentru tabelul Student de mai sus, Student_id și numărul de telefon sunt chei candidate ;
➢ Nu poate lua valoarea NULL ;
➢ Poate fi o compunere a mai multor atribute .

Chei a primar ă: Este o coloană sau un grup de coloane dintr -un tabel, care servește la
identificarea unică a fiecărui rând din ac el tabel. Este ajutorul în stabilirea relațiilor dintre tabele.
➢ În tabelul de mai sus, cheia primară este Student_id ;
➢ Nu poate lua v aloarea NULL ;
➢ Tabelul poate conține o singură cheie primară.

Chei a străină : Pentru a forma o relație cu un alt tabel, se inserează o coloană în acest tabel.
Această coloană poartă numele de cheie străină. Cheia străină păstrează legătura între 2 instanțe.

Chei a super : Constituie un set de chei unice sau multiple care pot identifi ca fiecare înregsitrare
a tabelului. Există posibilitatea ca o super cheie să aibă atribute în plus care nu sunt neapărat
indispensabile.
În tabelul de mai sus, chei super pot fi :
➢ Student_id pentru ca id este unic pentru fiecare înregistrare ;
➢ Combinația dintre Student_id și Numele studentului. 2 studenți pot avea același nume
însă nu același id ;
➢ Numărul de telefon este unic pentru fiecare student, deci poate fi și el cheie.

34
3.5.4 MYSQL

MySQL figurează ca un sistem cu sursă deschisă de gestiune a bazelor de date. Aparține
unei categorii de “servere de baze de date” multi -user și se poate rula pe platforme precum
Linux, UNIX ș Windows. Limbajul de interogare a bazelor de date folosit este SQL . Acesta
acordă posibilitatea de creare a bazelor de date, a tabelelor, a scripturilor de inserare, ștergere,
modificare a datelor ce aprțin unor tabele.
Instrumentele software prin care se pot gestiona baze de date sunt : phpMyAdmin, MariaDB,
MySQLWorkbench.

Comenzi de bază

❖ CREATE
Folosit în scopul creării unei baze de date sau a unui tabel . De exemplu,

Pentru a crea tabelul Pacient vom lansa comanda:

Figura 3.24. Crearea tabelului în phpMyAdmin

35
❖ INSERT
Lansăm comanda INSERT pentru a adăuga înregistrări în tabelul Pacient :

❖ UPDATE
În tabelul Pacient se actualizează primul pacient, cu ID -ul 1, cu un alt pacient având un alt
nume și o altă dată de naștere :

❖ SELECT
Pacienții vor fi sortați dupa campul “IDPacient” în ordine descrescătoare astfel:
SELECT * FROM medicina.pacient ORDER BY IDPacient desc;

❖ DELETE
DELETE FROM medicina.pacient WHERE Nume=’Arvunescu Daniela’ ;

❖ DROP
DROP TABLE Pacient ;

❖ ALTER
Structura de mai jos va adăuga coloana Email la tabelul Pacient :

36
4. Prezentarea Aplicației

Aplicația vine în ajutorul medici lor de familie și al pacienți lor acesto ra și pune la
dispoziție servicii de desfășurare eficientă în cadrul unui cabinet medical. Conceptul este ușor de
înțeles, interfața este interactivă datorită u nei biblioteci JavaScript modernă numită ReactJS. Se
pot observa formulare cu câmpurile de introducere a datelor și butoane ce îndeplinesc anumite
funcții.

4.1 Tehnologii folosite

4.1.1 Visual Studio Code

Este un editor simplu de cod ce conține instrumente de dezvoltare solide care rulează pe
platforme precum Linux, Windows, MacOS. În ceea ce privește arhitectura, Visual Studio Code
reprezintă un instrument competent pentru îmbinarea celor mai avantajoase tehnologii web.
Codul Visual Studio Code este bazat pe un cadru, numit Electron care ajută la implementarea
aplicațiilor de tip Node.js și JavaScript , este bogat în limbaje de programare precum C#, Python,
PHP, Java, C++ . Suportul oferit de acest editor de cod:
• Depanare ; Cu ajutorul d epanatorului, se va putea trece prin codul surs ă ușor și se vor
putea urmări variabilele și stivele de apeluri ;
• Control Git și GitHub ; Acest suport este ideal deoarece se poate lucra cu sursa
deschisă și nu trebuie neapărat să părăsim editorul. Totodată, comunitatea pe Github
va avea acces la contribuția noastră. ;
• Recunoașterea sintaxei ;
• Refactorizarea codului .
Utilizatorii care foloses c acest editor de cod au posibilitatea de a -și personaliza tema,de a include
funcționalități adiționale, de exemplu, comenzi de la tastatură.
Interfața pe care acest editor o deprinde precizează în partea stângă directoare și fișiere pe care le
putem accesa iar în partea dreaptă se poate vizualiza conținutul acestora într -un editor de cod.

37
Există posibilitatea deschiderii a mai multor directoare , care după ce au fost salvate în spații de
lucru pot fi reutilizate în viitoare proiecte.

Figura 4.1. Interfața Visual Studio Code

Interfața este împărțită în următoarele cadre :
A. Editorul de cod: folosit pentru a vizualiza si edita conținutul fișierelor. Există
posibilitatea de deschidere a mai multor fișiere unul l ângă altul sau unul sub altul ;
B. Side Bar ;
C. Bara de stare: con ține informații despre proiectul și despr fișierele editate ;
D. Bara de activități : Poziționată în partea stângă, sus, ne permite comutarea între
vizualizări ;
E. Panouri sub secț iunea editorului de cod legate de erori pentru un terminal.

În Explorerul din partea stângă putem crea, redenumi sau șterge directoare sau fișiere.
A D
E
B C

38

4.1.2 Node.js NPM

Node.js este o platformă cu ajutorul căreia se realizează aplicațiile de tip server folosind
JavaScript. Timpul de execuție este reprezentat de Node.js iar NPM este managerul de pachete
pentru Node.js. Un pachet cuprinde mai multe fișiere necesare pentru crearea unui modul.
Modulul constituie biblioteci JavaScript pe care le putem adăuga în proiectele noas tre. În
momentul în care instalăm Node.js, se instalează și programul NPM.
Prin e xtensia fișierelor .js Visual Studio Code analizează codul ca fiind JavaScript .
Node.js se comportă ca o buclă de evenimente. Printr -un apel de blocare se pornește un server la
începutul scripturilor și până la sfârșitul acestora. Node.js nu prezintă un apel de start al
scriptului. După ce se execută scriptul de intrare , Node.js intră în bucla evenimentului. Ieșirea
din buclă se realizează în momentul în care nu se mai efectuează alte apeluri. Bucla nu +este
vizibilă utilizatorului, este ascunsă, analog browserului JavaScript.

Figura 4.2. Serverul Node.js
Sursa imaginii: https://strongloop.com/strongblog/node -js-is-faster -than-java/

39

Motivele pentru care dezvoltatorii software folosesc Node.js:
• API-urile bibliotecii Node.js sunt non -blocante. Un server Node.js nu așteaptă dupa un
API să returneze date, ci se mută la următorul API, iar răspunsul de la API -ul anterior se
va transmite printr -un mecanism de notificare al evenimentelor ;
• Este foarte rapid cu privire la execuția codului ;
• Serverul nu cre ează fișiere limitate pentru gestionarea cererilor, precum Apache, ci este
forte scalabil și răspunde fără blocări ;
• O aplicație de tip Node.js transmite porțiuni de date, nu le stochează niciodată .

Figura 4.3. Schema celor mai proeminente caracteristici ale lui Node.js
Sursa imaginii : https://codeburst.io/all -about -node -js-you-wanted -to-know -25f3374e0be7

40
Node Package Manager (NPM)

NPM prezintă anumite însușiri, iar printre cele fundamentale se numără :
1. Repositories online pentru pachetele Node.js ;
2. Utilizarea liniei de comandă pentru a instala pachetele Node.js, gestionarea
dependințelor și a versiunilor .
NPM are rolul de a încărca depend ințele definite în fișierul json denumit “package.json”.
Acesta se afl ă în dosarul rădăcină al aplicației iar încărcarea dependințelor se realizează în
linie de comandă cu ajutorul comenzii: “npm install”.
Un fișier de tip package.json arată în felul urmă tor:

Cele mai importante elemente din acest f ișier sunt versiunea și numele . Fără acestea,
pachetul nu poate fi instalat. Cele 2 elemente formează o identitate unică.

41
4.1.3 ReactJS

Este o bibliotecă JavaScript prezentând scopul construirii interfețelor interactive de către
utilizator i. Aceste interfețe se bazează pe modelul MVC (Model View Controller ). React dispune
de template -uri create în JavaScript sau în fișiere JSX, ceea ce ne duce cu gândul la o transpunere
a limba jului HTML în JavaScript. Sintaxa este apropiată codului HTML.
Dezvoltarea interfețelor cu ajutorul ReactJs se poate realiza atât pentru aplicațiile web cât și
pentru aplicațiile de tip mobil. Acestea din urmă, se pot dezvolta ulterior cu ajutorul React
Native.
Pentru a crea o aplicați e de tip React, trebuie să existe deja instalate NPM și Node.js
În terminal ul cmd , executăm comenzile :
• C:\Users \Andra>npm install -g create -react -app
• C:\Users \Andra>npx create -react -app myfirstreact
Rularea aplicației se face din terminal cu ajutorul comenzilor:
• C:\Users \Andra>cd myfirstreact
• C:\Users \Andra \myfirstreact>npm start

Figura 4.4 . Rularea din terminal a aplicației React

42
Se va deschide o fereastră în browser cu noua aplicație React creat ă.

Figura 4. 5. Deschiderea în browser a aplicației React

Companiile celebre care flosesc ReactJS:
• Mai mult de 10.000 de componente React sunt folosite de c ătre Facebook ;
• Instagram ;
• Airbnb ;
• Netflix ;
• Dropbox ;
• New York Times .

Putem spune că ReactJS este o tehnologie care aduce multe avantaje din punct de vedere al
experienței utilizatorilor, companiile care îl utilizează având ca obiectiv oferirea de o experiență
mai bună pe mobil sau web.

43
4.1.3.1 JSX

Se comportă ca un XML și este folosit în React ca un preprocesor, permite scrierea unui
cod similar HTML în JavaScript și plasarea acestuia în DOM. Prin utilizarea JSX, structurile
HTML și codul JavaScript pot fi scrise în același fișier, apoi preprocesorul va transforma codul
în JavaScript real. Mixa rea codului HTML și JavaScript este un subiect destul de abordat. JSX
este util în crearea alicațiilor la scară largă .
Exemplu de cod JSX:

În exemplul de mai sus, se poate observa că JSX permite scrierea de cod HTML direct în cod
JavaScript. JSX ne permite declararea tag -ului h1 în asemenea mod în care semănă mult cu
HTML .

În exemplul 2, expresia JavaScript const name=”Al doilea” este integrată în codul JSX.
Utilizarea expresiilor JavaScript în JSX sunt introduce cu ajutorul parantezelor {} .

JSX este util ca ajutor vizual când se lucrează cu interfețe în cod JavaScript. Logica de
randare a React -ului este cuplată cu logica UI. În sine, JSX este separat de React , asemănarea
acestuia cu HTML este doar la suprafață .

44
4.1.4 RESTful API

Representational State Transfer r eprezintă o interfață pentru crearea unui program
aplicație (API) ce folosește cereri HTTP: GET, POST, PUT, DELETE. Acest serviciu web se
bazeaz ă pe o abordare a comunicațiilor întâlnite în dezvoltarea serviciilor web. Codu l care
permite comunicația între două programe software este API -ul. Site-urile precum Amazon,
Google, LinkedIn folosesc acest RESTful API.
Exploatarea metodelor HTTP de către RESTful API :
• Metoda GET, se folosește pentru a recupera o resurs ă
• Metoda POST, se folosește pentru a crea o resursă
• Metoda PUT, se folosește pentru a modifica o resursă
• Metoda DELETE, se folosește pentru a elimina o resursă.
Componentele unei rețele sunt precum o cutie neagră al cărei conținut este neclar și la care
solicităm acces. Între execuții, RESTful nu poate reține apelurile, acestea sunt stateless, deci
REST este util în aplicații de tip cloud. Nimic nu se poate salva, și apoi aminti într -o altă
tranzacție.

4.1.5 MySQL Workbench

MySQL Workbench este un tool pentru arhitectura bazelor de date ce pune la dispozi ție
instrumente necesare pentru configurarea unui server, modelarea unor date, dezvoltare SQL ,
toate acestea fiind utile în crearea modelelor complexe E -R. Platformele pe care MySQL
Workbench este disponibil sunt Windows, Linux, MacOS X.
Acest tool oferă posibilitatea unui pachet de instrumente în vederea creării, editării și gestionării
interogărilor SQL , conexiunilor bazei de date și obiectelor.

45
Editorul SQL este ușor de folosit, permite executar ea unor interogări, crearea și editarea
tabelelor, importarea și exportarea acestora.

Figura 4.6. Editorul MySQL Workbench

Descrierea editorului :
1. Tab-ul “acas ă”. Permite migrarea între conexiuni ;
2. Fila Conexiune. Când fila este deschisă, serverul este conectat ;
3. Tab-ul de Interogări. Este deschisă implicit atunci când se face o conexiune la un server
MySQL. Daca dorim să închidem fila, facem un click pe x-ul filei ;
4. Bara principal ă a meniului ;
5. Bara de instrumente. Printre procedurile ce se pot realiza din bara de instrumente se
numără : crearea unei noi file SQL pentru a executa anumite interog ări, deschiderea unui
script SQL, crearea unei scheme noi, crearea unui tabel nou în schemă, etc ;
6. Acțiunile rapide. Se află în partea dreaptă -sus a editorului și perm it afișarea sau
ascunderea panourilor ;
7. Panoul lateral. Compus din “Navigator” și „Informații”. Navigatorul prezintă 2 subtab –
uri: “Administrare” și “Schema”. Informa țiile fac referire la obiecte și conexiunea activă ;
8. Panoul zonei de ieșire. Afișează informații în urma executării interogărilor.

46
4.2 Crearea bazei de date

Am creat baza de date cu ajutorul sistemului de gestionare al bazelor de date MySQL
Workbench. După deschiderea aplicației, ne vom conecta la un server local, pentru ca mai apoi
să creăm baza de date.

Figura 4.7 . Deschiderea aplicației MySQL Workbench
După ce ne -am conectat la serverul local, se va deschide editorul MySQL. În panoul lateral,
secțiunea “Navigator” , subtab -ul “Schema”, creăm o nouă schemă, pe care o denum im sugestiv
„medic_schedule” iar apoi apăsăm butonul Apply pentru a se crea schema.

Figura 4.8. Crearea bazei de date

47

Figura 4.9. Denumirea sugestivă a bazei de date

Figura 4.10. Înștiințarea că s -a creat baza de date

48
4.2.1 Crearea tabelelor

Odată creată baza de date, se poate trece la crearea tabelelor acesteia.

Figura 4.11. Crearea unui tabel

Figura 4.12. Introducerea coloanelor în tabel

După cum am văzut procesul de creare al unui tabel mai sus, la fel se procedează și pentru restul
de tabele. Am creat 6 tabele dupa cum se poate observa în figura de mai jos.

Figura 4.13. Tabelele bazei de date

49
4.2.2 Diagrama bazei de date

Figura 4. 14. Structura logică a bazei de date

Entitatea „patients ” reprezintă pacienții listați de CNAS (Casa Națională de Asigurări de
Sănătate), iar fiecare pacient aparține de un medic de familie. Datele sunt pre -inserate manual.
Din cauza faptului că datele sunt deținute de CNAS, și pentru că nu avem acces la aceste date,
am ales să simul ez prin metoda aceasta, a pre -inserării în baza de date.
Aceste date sunt o simplificare pentru sistemul nostru, deoarece în acest sistem avem nevoie doar
de relația pacient -medic și date de validare precum CNP -ul.
Entitatea “patient_users” reprezint ă paci enții care s -au înregistrat în sistemul nostru.
Această înregistrare se bazează pe existența pacientului în entitatea de care am povestit anterior,

50
“patient”. Acești pacienți se verific ă după CNP, astfel, doar pacienții care aparțin de CNAS se
pot înregistra pentru programare.
La fel se întâmplă și în cazul medicilor, doar că, legat de entitatea “medic_users”, medicii
vor fi pre -înregistrați, deoarece este important de știut că medicul real este înregistrat.
Din cauze de confidențialitate și securi tate medic userul va fi deja înregistrat și i se va oferi o
parola default, ca să evităm posibile înregistrări făcute de alte persoane care nu sunt medici. În
felul acesta, trebuie făcute și anumite verificări, dacă într -adevăr nu e furat CNP -ul sau falsif icate
alte date.
Inserarea de medici noi sau a unui program nou vor trebui făcute prin alte părți ale
sistemului însă nu există în scopul lucrării prezente. Se urmărește asta în fazele următoare de
îmbunătațire a sistemului și de acordare a mai multor faci lități. Am rămas la inserarea manuală a
datelor în baza de date.
Entitatea „appointments ” reprezintă programarea unui pacient și conține date prin care se
vor rezerva bonurile de ordine prin intermediul site -ului de programare (conține atributul order
care are calitatea de bon de ordin).
Entitatea „medic_schedule” conține date cu referire la programul de funcționare al
cabinetului (orarul unui medic intr -o zi). O înregistrare medic_schedule reprezintă orarul, ora de
la care înc epe programul până la ora la care se termină în ziua respectivă. Fiecare înregistrare
aparține de un medic. Aceste date vor fi înregistrate cu un timp rezonabil înainte pe orarul
medicului. Am inserat cu o lună înainte orarul. Acesta poate fi alterat de că tre medic astfel încât,
acesta poate șterge orarul dacă intră în perioada de concediu sau poate să modifice orele în
funcție de programul său de lucru.
Am ales acest design al tabelei as tfel încât să putem ob ține o flexibilitate în determinarea
orarului me dicului astfel încat s ă aibă program flexibil.
Conform diagramei E -R rela țiile sunt urm ătoarele :
• Relația dintre userii pacien ți si pacien ți (Relație one -to-one). Un pacient poate avea un
user, sau niciunul (0 sau 1) ;
• Relația dintre userii medici și medici (Relație one -to-one);
• Relația dintre pacienți și medici. Un pacient poate avea un singur medic, dar un medic
poate avea mai mulți pacienți (Relație one -to-many) ;

51
• Relația dintre pacienți și programări. Un pacient poate avea mai multe programări
(Relație one -to-many) ;
• Relația dintre planificarea medicului și programări. Pe parcursul programului medicului
la cabinet, acesta poate avea mai multe programări (Relație one -to-many).

4.2.3 Interogarea bazei de date

Query -urile principale pe care API -ul le folosește pentru a accesa baza de date sunt
următoarele :
• În fișierul AppointmentsService.cs :

În acest query se realizează o operație SELECT în care se preiau din tabelul appointments id-ul,
bonul de ordine, id -ul orarului, apoi, din tabelul patients se preiau numele, prenumele, cnp -ul, iar
din tabelul medic_schedule se preia data calendaristică, împreună cu pro gramul de funcționare al
cabinetului în ziua respectivă (start_time și end_time).
Rezultatul interogării :

JOIN -urile folosite în query -uri, combină înregistrările a două sau mai multe tabele ce aparțin
unei baze de date relaționale. Combinarea acestor î nregistrări se face pe baza valorilor comune
ale fiecărui tabel. Prin această combinație se poate ajunge la crearea unui nou tabel sau pur și
simplu preluarea informațiilor în forma existentă.
INNER JOIN, redă un rezultat pe baza potrivirii a 2 înregistrări din 2 tabele diferite.

52
• În fișierul AuthorizationService.cs :

Se realizează selecția înregistrărilor id, email, cnp, access_token, id -ul pacientului, număr de
telefon din tabelul patient_users , iar din tabelul patients se selectează înregistrările nume,
prenume, id -ul medicului.
Rezultatul interogării :

• În fișierul MedicSchedulesService.cs :

Din tabelul medic_schedule se preiau înregistrările id, data calendaristică, programul de
funcționare al cabinetului în ziua respectivă (start_time și end_time), id -ul medicului.
Rezultatul interogării :

53
• În fișierul PatientsService.cs :

În string interpolează valoarea cnp-ului. O înlcouiește în string și trimite către MySQL Server.
@cnp este folosit de ADO.NET pentru a interpola cu o valoare dată prin funcția Query() (Se
aplelează funcția).

Acest query preia din tabelul patient_users înregistrările id, email, cnp, ac cess_token, patient_id,
număr de telefon iar din tabelul patients preia nume, prenume, medic_id.
Rezultatul interogării :

Acest query, realizează operația INSERT, deci adaugă la tabelul patient_users înregistrările cnp,
email, număr de telefon, parolă, access_token și patient_id , dându -le și valori prin funcția
Query().

Prin denormalizare am urmărit eficientizarea query -urilor făcute în baza de date,
reducerea numărului de join -uri. Din punctul meu de vedere, consider că denormalizarea a fost
un proces bun deoarece conform noilor tehnologii de acces asupra bazelor de date relaționale,
putem spune că flexibilitatea schimbărilor și menține rii schemei este mult mai ușor de întreținut
chiar dacă aceasta este denormalizată.

54
4.3 Funcționalitatea aplicației

Se deschide terminalul PowerShell. În terminal se tastează comanda cd urmată de calea
spre locul unde se găsește proiectul nostru :
• cd
• cd .\Desktop \
• cd .\medic_schedule_web \
• npm start
• În cazul în care suntem anunțați că nu există un package instalat, tastăm Ctrl C, apoi
y(yes) iar în final, npm install pentru a se instala toate dependințele
• Pasul următor este tastarea npm start pentru a p orni browser -ul. Daca s -a executat cu
succes, se va deschide browser -ul. Deschiderea browser -ului se va face mai lent,
deoarece durează procesul de compilare .

Figura 4.15. Pași spre deschiderea aplicației

55

Figura 4.1 6. Pagina de Autentificare

Fereastra browser -ului s -a deschis pe pagina de Autentificare. Autentificarea userilor va fi foarte
simplă. Aplicația client (userul) va transmite adresa de e -mail sau cnp -ul alături de parolă la API
iar API -ul va răspunde cu token de acces în cazul în care autentificarea este validă. Aplicația
client preia acest token și îl stochează local, temporar, și va accesa resursele API -ului cu acesta.
În cazul în care access token -ul expiră, aplicația client va redirectiona user -ul pe pagina de
auten tificare iar userul va trebui să reia procesul de autentificare obținând astfel un nou token de
access.
Butonul de Autentificare (Log In) se va activa doar după ce am introdus e -mailul și parola.
În cazul în care userul nu există, va trebui să își creeze u n cont (să se înregistreze).
În această fază, securitatea sistemului este una slabă, deoarece parola unui user va fi transmisă
API-ului in plain text (cum e ea, necriptată) și va fi stocată la fel.

56
Am optat pentru o securitate slabă (nu am investit multe r esurse) deoarcere în acest moment nu
există date importante ale utilizatorilor, decât CNP -ul, însa voi urmări îmbunătățirea securității
pe viitor.

Figura 4.17. Pagina de Înregistrare
Procesul de înregistrare al unui user presupune validarea anumitor date. Numele/Prenumele nu se
mai introduc în formular deoarece presupunem că aceste date există deja în baza de date a
medicului de familie.
Înregistrările fără X nu se validează, pe când cele cu X se validează. Se vor valida e -mailul,
CNP -ul, parola și confirmarea acesteia.
Pe lângă asta, la CNP se face validarea CNP -ului de către client dacă forma lui este corectă iar
API-ul va testa sau valida dacă CNP -ul există în lista de pacienți a medicului.

57
Adre sa de e -mail va fi validată dupa formă, însă confirmarea va lipsi în această fază, deoarcere
nu face scopul lucrarii.
Numărul de telefon (mobil) va fi opțional, deși poate fi util pentru contactarea de către medic a
pacientului.
Parola reprezintă o dată d e securitate. Confirmarea acesteia este inclusă pentru verificare. Parola
și confirmarea acesteia de către utilizator trebuie să fie string -uri egale.

Figura 4.1 8. Exemplu CNP valid/invalid

CNP -ul este un cod care conține 13 cifre, iar fiecare persoană are un CNP unic.
După cum am menționat anterior, CNP -ul trebuie să fie unul valid. În exemplul din partea
stângă, CNP -ul este unul adevărat, preluat de pe site -ul de generări automate de CNP -uri:
http://redoxwap.freehostia.com/cnpgenerator.php .

58
În exemplul dn partea dreaptă am introdus în câmpul CNP -ului un cod de 13 cifre dar acesta nu
est valid, ceea ce se vede în figură.
Am folosit componenta validateCNP.js care oferă metoda de vali dare a CNP -ului:

Metoda de verificare a CNP -ului se validează în momentul introducerii în câmpul acestuia.

59
După ce s -a creat contul, vom introduce e -mailul sau CNP -ul și parola din pagina de
Autentificare și vom apăsa butonul Log In pentru a trece la pasul următor.

Figura 4. 19. Pagina Home a aplicației
După ce ne -am autentificat, suntem redirecționați pe pagina care specifică dacă există sau nu o
programare.

60

Figura 4. 20. Componenta Side -bar
În partea stângă a aplicației exită un meniu (side -bar) ce conține elementele : Acas ă, Progr amări,
Medicul Meu, Setări. Dacă nu avem o programare, butonul verde ne va trimite la pagina în care
se vor alege programările sau putem selecta opțiunea „Programări ” din meniul din stânga al
aplicației.
Figura 4. 21. Pagina Appointments

61
Pagina Appointments conține un calendar care este o componentă deja dezvoltată și am
configurat -o pentru nevoile site -ului. Pe lângă acesta, în partea dreaptă, sunt afișate bonurile de
ordine disponibile dar și cele indisponibile (deja rezervate) împreună cu orele la care se face
prezentarea la cabinet. Am ales pentru site bonuri de ordine pare, iar cele impare să fie rezervate
cabinetului. Această decizie face ca ambele situații să prezinte un număr egal de bonuri și să nu
existe o parte privilegiată.
Pagina programărilor face mereu request la API la câteva secunde pentru a vedea dacă s -au
efectuat modificări.
Deoarecere acest sistem oferă doar niște bonuri de ordine, nu prezintă un mare interes pentru
atacatori pentru a strica acest sistem, alt motiv ar fi și că bonurile vor fi oferite și la cabinet în
formă fizică, iar prăbușirea sistemului nu implică un impact asupra mersului lucrurilor.

Alte pagini pe care le putem accesa din bara de meniu sunt Despre și Contact :

Figura 4.22. Pagina Despre
Această pagina descrie succint rolul aplicației.

62

Figura 4.23. Contact
Pagina Contact prezintă detaliile de contact ale Facultății de Inginerie.

63
5. Concluzii

În concluzie, putem afirma că aplicația va putea să fluidizeze activitatea cabinetului
medical, și va crește beneficiile celor care folosesc această aplicație, scăzând timpul de așteptare
al cozilor care se formează în mod obișnuit la cabinet . Implementarea si stemului nu necesită un
cost mare de întreținere, însă implică un cost de marketing în scopul aducerii utilizatorilor
(medici și pacienți) pe această platformă. Implementarea sistemului reprezintă creșterea calității
sistemului medical.
Aplicația va veni în ajutorul persoanelor care doresc să rezerve ziua și ora la care să se prezinte
la medic, astfel timpul de asteptare va fi redus, si nu va mai fi necesara deplasarea p ână la
cabinet pentru a face aceast ă programare.
Avantajele implementări i unui sistem medical implică e laborarea și editarera
documentelor cu uș urință , evidența pacienților , structurarea datelor, transmiterea facilă a
informației, arhivarea acesteia și deci, optimizarea backup -ului.
De asemenea, pot să apară și efecte negative privind datele pacientului . Acestea trebuie
să fie prelucrate cu un grad de securitate mare . Softul medical ideal nu există și această cale de
informatizare are dezavantajele ei (se pot pierde informații despre pacienți). Riscurile apariției
unei probleme de pierdere de date sunt minore, deoarece datele din baza de date vor fi protejate
de un backup constant, astfel încat în cazul unui atac cibernetic acestea se pot restaura (folosind
sisteme de backu p ale bazei de date , informațiile se pot arhiva ). Un alt dezavantaj ar fi nivelul
cunoștințelor medicilor dar și al pacienților în legătură cu utilizarea calculatorului. Acesta este
unul mediu sau scăzut în peste ¾ din cazuri.
Cu toate că medicii doresc implementarea unui sistem de fluidizare al cabinet ului medical,
resurse le necesare nu pot fi acoperite din fondurile cabinetelor medicale ci, ar trebui finanțate de
către stat.

64
5.1 Posibilități de dezvoltare ulterioare

Versiunea actuală a aplicației nu este una finală . Aceasta poate fi îmbunătățită pe viitor
prin includerea mai multor idei de dezvoltare :
• Implementarea unui algortim MachineLearning pentru a estima timpul petrecut la cabinet
al fiecărei persoane în parte. Acest algoritm va putea verifica numărul consultațiilor dintr –
o zi;
• Adăugarea unui forum, în care se pot discuta probleme medicale ;
• Site-ul să conțină o fișă a pacientului cu afecțiunile suferite, alergii, tratamentele
administra te, vaccinuri, istoric medical ;
• Transmiterea de sms -uri pentru schimbarea programării ;
• Site-ul să prezinte articole legate de domeniul medicinei de familie (Blog) ;
• Să se primeacă notificări când nu funcționează cardurile de sănătate ;
• În calitate de medic să existe posibilitatea de a trimite adeverințe pe e -mail și de a se
efectua plata adeverinței eliberate de medic direct de pe site .

65
6. BIBLIOGRAFIE

[1] CREȚULESCU R., MORARIU D. – Dezvoltarea aplicațiilor WEB, Editura Universității
“Lucian Blaga” din Sibiu, 2015
[2] Chiurciu Cătălin -Iulian -Teză de doctorat, Universitatea “Lucian Blaga” din Sibiu, 2007
[3] Cristescu Marian -TEHNOLOGII WEB PENTRU BAZE DE DATE,2018
[4] Jompan Afilon – Medicina familiei, Editura „Eurostampa” , 2000 , Ediția a III -a
[5] Olteanu Alexandru Ioan – Baze de date -Editura “Alma Mater”, 2002
[6] O’Neil Patrick, O’Neil Elizabeth -DATABASE -PRINCIPLES, PROGRAMMING, AND
PERFORMANCE, 2000
[7] Traian Turc -Tehnologii WEB, Editura Universității “Petru Maior” din T ârgu Mureș, 2010

WEBOGRAFIE
[8] https://www.medlife.ro/de -ce-este-importanta -comunicarea -dintre -doctor -si-pacient.html
[9] https://www.libertatea.ro/lifestyle/ce -isi-doresc -pacientii -de-la-medicii -de-familie –
2182654
[10] https://www.mediafax.ro/social/statistica -ingrijoratoare -speranta -de-viata -in-romania –
mai-mica -decat -in-ue-medic -multe -perso ane-nu-merg -la-doctor -ani-de-zile-18105778
[11] https://webfoundation.org/about/vision/history -of-the-web/
[12]https://developer.mozilla.org/ro/docs/Learn/Getting_started_with_the_web/How_the_We
b_works
[13] https://www.javatpoint.com/website -static -vs-dynamic
[14] https://www.techwalla.com/articles/what -is-a-web-database
[15] https://www.digitaleo.fr/definition -sgbd

66
[16] https://www.guru99.com/relational -data-model -dbms.html
[17] https://www.studytonight.com/dbms/database -key.php
[18] https://www.guru99.com/dbms -keys.html
[19] https://www.w3schools.com/sql/
[20] https://www .w3schools.com/html/html_attributes.asp
[21] http://www.ecursuri.ro/cursuri -online/despre -atribute -html.html
[22] https://code.visualstudio.com/docs
[23] https://code.visualstudio.com/docs/getstarted/userinterface
[24] https://nodejs.org/en/
[25] https://codeburst.io/all -about -node -js-you-wanted -to-know -25f3374e0be7
[26] https://codeburst.io/getting -started -with-node -js-a-beginners -guide -b03e25bca71b
[27] https://www.w3schools.com/react/default.asp
[28] https://www.capital.ro/10 -aplicatii -celebre -care-folosesc -reactjs.html
[29] https://www.w3schools.com/react/react_jsx.asp
[30] https://www.geeksforgeeks.org/reactjs -introduction -jsx/
[31] https://dev.mysql.com/doc/workbench/en/wb -sql-editor.html
[32] https://searchmicroservices.techtarget. com/definition/RESTful -API
[33]https://docs.google.com/document/d/1h8muB6rhEpNR44Db1a_hLhWJquLkhqx_GFxbo
GWQYW4/edit?fbc lid=IwAR0s9J39nQ96UA2s4eg5ckGIeJCICFbrdgeK9PYrE7cO48S_JJx
Q9MnBbEs#
[34] https://serverless -stack.com/chapters/create -a-route -that-redirects.html
[35] https://sta ckoverflow.com/questions/46155/how -to-validate -an-email -address -in-
javascript

67
[36] https://draghici.net/2016/02/01/javascript -cnp-validator/
[37] https://reactjsexample.com/react -side-nav-component/
[38] https://fontawesome.com/
[30] https://jasonwatmore.com/post/2018/09/11/react -basic -http-authentication -tutorial –
example

68
7.ANEXE

Cuprinsul figurilor :
Figura 3.1. Propunerea originală a lui Tim Berners Lee. Imaginea aparține CERN(Organizația
Europeană pentru Cercetare Nucleară din Geneva) ………………….. Error! Bookmark not defined.
Figura 3.2. Cererea HTTP de a prelua pagina hello.htm de pe se rverul web care rulează pe
tutorialspoint.com ………………………….. ………………………….. ………………………….. ……………………. 11
Figura 3.3. Tracert la skype.com ………………………….. ………………. Error! Bookmark not defined.
Figura 3.4. Comunicarea între Client și Server ………………………….. ………………………….. …………. 13
Figura 3.5. Accesarea paginii web ………………………….. …………….. Error! Bookmark not defined.
Figura 3.6. Conectarea a 2 calculatoare ………………………….. ……… Error! Bookmark not defined.
Figura 3.7. Cone ctarea a 10 calculatoare cu un router ………………. Error! Bookmark not defined.
Figura 3.8. Afișarea paragrafelor în browser ………………………….. . Error! Bookmark not defined.
Figura 3.9. Structura arborescentă, însoțită de tag -urile necesare ………………………….. ……………. 19
Figura 3.10. Scalarea imaginii în browser cu atributele width și height ………………………….. ……. 20
Figura 3.11. Afișarea în browser a textului îng roșat ………………………….. ………………………….. ….. 21
Figura 3.12. Afișarea în browser a titlurilor, în funcție de importanță ………………………….. ……… 22
Figura 3.13. Afișare în browser listă ordonată de elemente ………………………….. ……………………. 22
Figura 3.14. Afișare în browser listă neordonată de elemente ………………………….. …………………. 23
Figura 3.15. Afișarea în browser a tabelului f ără contur ………………………….. ………………………… 24
Figura 3.16. Tabel cu contur utilizând atributul “border=1” (<table border=1>) ……………………. 24
Figura 3.17. Pagină Web statică ………………………….. ………………………….. ………………………….. … 25
Figura 3.18. Pagină Web dinamică ………………………….. ………………………….. …………………………. 25
Figura 3.19. Tipuri de baze de date ………………………….. ………………………….. …………………………. 26
Figura 3.20. Entitatea STUDENT ………………………….. ………………………….. ………………………….. . 31
Figura 3.21. Relație one -to-one ………………………….. ………………………….. ………………………….. …. 31
Figura 3.22. Relație one -to-many ………………………….. ………………………….. ………………………….. . 32
Figura 3.23. Relație many -to-many ………………………….. ………………………….. ………………………… 32
Figura 3.24. Crearea tabelului în phpMyAdmin ………………………….. ………………………….. ……….. 34
Figura 4.1. Interfața Visual Studio Code ………………………….. ………………………….. …………………. 37
Figura 4.2. Serverul Node.js ………………………….. ………………………….. ………………………….. ……… 38
Figura 4.3. Schema celo r mai proeminente caracteristici ale lui Node.js ………………………….. ….. 39
Figura 4.4. Rularea din terminal a aplicației React ………………………….. ………………………….. ……. 41
Figura 4.5. Deschiderea în browser a aplicației React ………………………….. ………………………….. .. 42
Figura 4.6. Editorul MySQL Workbench ………………………….. ………………………….. ………………… 45
Figura 4.7. Deschiderea aplicației MySQL Workbench ………………………….. …………………………. 46
Figura 4.8. Crearea bazei de date ………………………….. ………………………….. ………………………….. .. 46
Figura 4.9. Denumirea sugestivă a bazei de date ………………………….. ………………………….. ………. 47
Figura 4.10. Înștiințarea că s -a creat baza de date ………………………….. ………………………….. …….. 47
Figura 4.11. Crearea unui tabel ………………………….. ………………………….. ………………………….. ….. 48
Figura 4.12. Introducerea coloanelor în tabel ………………………….. ………………………….. …………… 48
Figura 4.13. Tabelele bazei de date ………………………….. ………………………….. …………………………. 48

69
Figura 4.14. Structura logică a bazei de date ………………………….. ………………………….. ……………. 49
Figura 4.15. Pași spre deschiderea aplicației ………………………….. ………………………….. …………… 54
Figura 4.16. Pagina de Autentificare ………………………….. …………. Error! Bookmark not defined.
Figura 4.17. Pagina de Înregistrare ………………………….. ……………. Error! Bookmark not defined.
Figura 4.18. Exemplu CNP valid/invalid ………………………….. ……. Error! Bookmark not defined.
Figura 4.19. Pagina Home a aplicației ………………………….. ……….. Error! Bookmark not defined.
Figura 4.20. Componenta Side -bar ………………………….. ……………. Error! Bookmark not defined.
Figura 4.21. Pagina Appointments ………………………….. ………………………….. ………………………….. 60
Figura 4.22. Pagina Despre ………………………….. ………………………. Error! Bookmark not defined.
Figura 4.23. Pagina Contact ………………………….. ……………………… Error! Bookmark not defined.

Cuprinsul tabelurilor:
Tabelul 3.1. Tag -uri des folosite în HTML ………………………….. …. Error! Book mark not defined.
Tabelul 3.2. Exemplu Structură Relațională ………………………….. ………………………….. …………….. 28
Tabelul 3.3. Exemplu de operație INSERT ………………………….. … Error! Bookmark not defined.
Tabelul 3.4. Exemplu de operație UPDATE ………………………….. ………………………….. ……………. 29
Tabelul 3.5. Exemplu de operație DELETE ………………………….. ………………………….. …………….. 29
Tabelul 3.6. Tabel pe baza căruia se vor identifica cheile …………. Error! Bookmark not defined.