SIMPTOME ȘI DIAGNOSTIC ÎN PATOLOGIA PEDIATRICĂ [608210]

Universitatea “Politehnica” din București
Facultatea de Electronică, Telecomunicații și Tehnologia Informației

SIMPTOME ȘI DIAGNOSTIC ÎN PATOLOGIA PEDIATRICĂ

Proiect de diplomă
prezentat ca cerință parțială pentru obținerea titlului de
Inginer în dom eniul Inginerie electronică și telecomunicații
programul de studii de licență Electronică aplicată

Conducător(i) științific(i) Absolvent: [anonimizat]. Vlad -Alexandru GROSU Bogdan Ungureanu

Anul
2017

Declarație de o nestitate academică

Prin prezenta declar că lucrarea cu titlul “ Simptome și Diagnostic în Patologia
Pediatrică ”, prezentată în cadrul Facultății de Electronică, Telecomunicații și
Tehnologia Informației a Universității “Politehnica” din București ca cerin ță parțială
pentru obținerea titlului de Inginer în domeniul Inginerie electronică și telecomunicații ,
programul de studii Electronică aplicată este scrisă de mine și nu a mai fost prezentată
niciodată la o facultate sau instituție de învățămînt superior d in țară sau străinătate.

Declar că toate sursele utilizate, inclusiv cele de pe Internet, sunt indicate în
lucrare, ca referințe bibliografice. Fragmentele de text din alte surse, reproduse exact,
chiar și în traducere proprie din altă limbă, sunt scrise între ghilimele și fac referință la
sursă. Reformularea în cuvinte proprii a textelor scrise de către alți autori face referință
la sursă. Înțeleg că plagiatul constituie infracțiune și se sancționează conform legilor
în vigoare.

Declar că toate rezultat ele simulărilor, experimentelor și măsurătorilor pe care
le prezint ca fiind făcute de mine, precum și metodele prin care au fost obținute, sunt
reale și provin din respectivele simulări, experimente și măsurători. Înțeleg că
falsificarea datelor și rezult atelor constituie fraudă și se sancționează conform
regulamentelor în vigoare.

București, data
10-09-2017
Absolvent: [anonimizat]

_________________________
(semnătura în original)

Cuprins

Declarație de onestitate academică ………………………….. ………………………….. ………………………….. …… 5
Listă Figuri și Tabele ………………………….. ………………………….. ………………………….. ……………………… 9
Listă acronime ………………………….. ………………………….. ………………………….. ………………………….. …. 11
Introducere ………………………….. ………………………….. ………………………….. ………………………….. ……… 13
Capitolul 1 – Pediatrul Tău ………………………….. ………………………….. ………………………….. ……………. 15
1.1 Particularitățile patologiei pediatrice ………………………….. ………………………….. ………………. 15
1.2 Diagnostic și tratament ………………………….. ………………………….. ………………………….. …….. 15
1.2.1 Anamneza ………………………….. ………………………….. ………………………….. ………………………….. 15
1.2.2 Examen clinic – pe aparate și sisteme ………………………….. ………………………….. ………………… 15
1.2.3 Investigații paraclinice ………………………….. ………………………….. ………………………….. …………. 15
1.2.4 Factori de prognostic negativ / semne de gravitate în funcție de patologie …………………….. 15
1.2.5 Diagnostic diferențial ………………………….. ………………………….. ………………………….. …………… 15
1.2.6 Stabilire tratament: ………………………….. ………………………….. ………………………….. …………….. 15
1.2.7 Prognostic ………………………….. ………………………….. ………………………….. ………………………….. 15
1.3 Spațiul virtual și importanța acestuia ………………………….. ………………………….. ……………… 15
1.4 Medicina virtuală în secolul XXI ………………………….. ………………………….. …………………… 16
1.5 Suport tehnic utilizat ………………………….. ………………………….. ………………………….. ……….. 16
1.5.1 Hardware ………………………….. ………………………….. ………………………….. ………………………….. . 16
1.5.2 Software ………………………….. ………………………….. ………………………….. ………………………….. .. 16
1.5.3 Medii de dezvoltare ………………………….. ………………………….. ………………………….. …………….. 16
Capitolul 2 – ASP.NET ………………………….. ………………………….. ………………………….. …………………. 17
2.1 Introducere în .NET ………………………….. ………………………….. ………………………….. …………. 17
2.2 Limbaje folosite ………………………….. ………………………….. ………………………….. ………………. 18
2.2.1 C# și arhitectura .NET ………………………….. ………………………….. ………………………….. ………….. 18
2.2.2 JavaScript, CSS și HTML în ASP.NET ………………………….. ………………………….. ……………………. 19
2.3 ASP.NET Web Forms ………………………….. ………………………….. ………………………….. ……… 20
2.4 ASP.NET MVC ………………………….. ………………………….. ………………………….. ………………. 22
2.5 ASP.NET – Opțiuni de acces la date ………………………….. ………………………….. ………………. 24
2.5.1 Sisteme de gestiune a bazelor de date (DBMS) ………………………….. ………………………….. ……. 24
2.5.2 Object -Relational Mappers (ORM) ………………………….. ………………………….. ……………………. 25
Capitolul 3 – Organizarea aplicației ………………………….. ………………………….. ………………………….. … 27
3.1 De ce MCV și nu Web Forms ………………………….. ………………………….. ……………………….. 27
3.2 Aspecte ale dezvoltării aplicațiilor web ………………………….. ………………………….. ………….. 29

3.3 Structur a generală ………………………….. ………………………….. ………………………….. ……………. 31
Capitolul 4 – Implementare ………………………….. ………………………….. ………………………….. ……………. 35
4.1 Planul alicației Pediatrul Tau ………………………….. ………………………….. ………………………… 35
4.2 Din HTML și CSS în HTML, CSS și C# ………………………….. ………………………….. ………… 36
4.3 Baza de date ………………………….. ………………………….. ………………………….. ……………………. 38
4.3.1 Diagrama relațională a bazei de date ………………………….. ………………………….. ………………….. 38
4.3.2 Descriere entități, atribute, relații ………………………….. ………………………….. ………………………. 38
4.4 Descrierea și folosirea aplicației ………………………….. ………………………….. …………………….. 40
4.4.1 Pagina de start ………………………….. ………………………….. ………………………….. ………………………….. . 41
4.4.2 Lista Boli ………………………….. ………………………….. ………………………….. ………………………….. …….. 41
4.4.3 Contact ………………………….. ………………………….. ………………………….. ………………………….. ………… 43
4.4.4 Spital ………………………….. ………………………….. ………………………….. ………………………….. …………… 43
4.4.5 Log in și Register ………………………….. ………………………….. ………………………….. ………………………. 44
4.4.6 Diagnostic ………………………….. ………………………….. ………………………….. ………………………….. ……. 46
Capitolul 5 – Rezultate și concluzii ………………………….. ………………………….. ………………………….. … 49
Bibliografie ………………………….. ………………………….. ………………………….. ………………………….. …….. 49
Anexa 1 – Codul CSS ………………………….. ………………………….. ………………………….. …………………… 51
Anexa 2 – Layout.cshtml ………………………….. ………………………….. ………………………….. ………………. 53

Listă Figuri și Tabele

Tabelul 2.1 Lista celor trei cadre oferite de ASP.NET ………………………………………………………..pag 17
Fig 2.1 C# și Arhitectura .NET ………………………………………………………………….. …………………..pag 19
Fig 2.2 Limbaje folosite în programarea în Visual Studio ………………………………………………… pag 20
Fig 2.3 Model ASP.NET Web Forms ………………………………………………………………. ……………..pag 21
Fig 2.4 Arhitectura ASP.NET Web Forms ……………………………………………………………………….pag 22
Fig 2.5 Design -ul MVC …………………………………………………………………………. ……………………..pag 23
Fig 2.6 Arhitectura ASP.NET MVC ……………………………………………………………………………… ..pag 24
Fig 2. 7 Arhitectura ASP ……………………………………………………………………………………………… …pag 24
Fig 3.1 Pașii ASP.NET Web Forms pentru a realiza o acțiune ……………………… …………………….. pag 28
Fig 3.2 Pații ASP.NET MVC pentru a realiza o acțiune ……………………………………………………. .pag 28
Fig 3.3 Schimbarea arhitecturii Web Forms într -o arhiet ctură bazată pe acțiuni ……………………. pag 29
Fig 3.4 Funcționaliatea aplicațiilor web ……………………………………………….. ………………………….pa g 29
Fig 3.5 Creare aplicație ASP.NET – proiect nou ……………………………………………………………… pag 31
Fig 3.6 Creare aplicație ASP.NET – alegere tip aplicație …………………………………………………. .pag 32
Fig 3.7 Creare aplicație ASP.NET – tip autentificare ………………………………… …………………….. pag 32
Fig 3.8 Creare aplicație ASP.NET – prima aplicație MVC ……………………………………………… …pag 33
Fig 4.1 Proiecte incluse în aplicația Pediatru Tau ……………………………………….. ……………………. pag 35
Fig 4.2 Diagrama relațională a bazei de date …………………………………………………………………….. pag 38

Listă acronime

ADO – ActiveX Data Object
API – Application Programming Interface
ASP – Activ e Server Page
CSS – Cascading Style Sheet
CT – Computed Tomography – Tomografie Computerizată
DHTML – Dynamic Hyper Text Makup Language
HTML – HyperText Markup Language
MVC – Model -View -Controller
PHP – Personal Home Page
RAD – Rapid Application Developmen t
IRM – Imagistică prin rezonanță magnetică
RX – Radiografie
XHTML – Extensible HyperText Markup Language
XML – Extensible Markup Language
XSLT – Extensible Stylesheet Language for Transformations

13
Introducere

Lucrarea de față are ca și scop realizarea unui site web destinat diagnosticării pacienților pediatrici.
Aplicația este realizată în ASP.NET, o platformă inovatoare și modernă ce permite scrierea unor
aplicații complexe, oferind fiabilitate și securitate.
Pe parcursul lucrării voi detalia pașii ce au fost urmați, de la motivarea alegerii temei, până la
implementarea propriu -zisă.
În Capitolul 1 este prezentat aspectul social al aplicației: ce anume înseamnă diagnosticarea
pediatrică, ce presupune activitatea de diagnostic în spațiul virtual și, mai ales, care este importanța
unei asemenea aplicații.
În Capitolele II și III descriu pe scurt tehnologiile ce stau la baza proiectării aplicației web. Aceste
capitole pot avea atât rolul de a familiariza cititorul cu principalele tehnologii internet, cât și ca o
sursă rapidă de documentație , prin exemplele oferite.
În final, Capitolul IV prezintă realizarea efectivă a aplicației, pornind de la etapa de proiectare și
continuând cu implementarea și utilizarea ei. Sunt descrise principalele avantaje oferite de aplicație,
precum și modul în care ace asta pot e fi utilizat ă.

14

15
Capitolul 1 – Pediatrul Tău

1.1 Particularitățile patologiei pediatrice

Pediatri a este specialitatea medicală care se oc upa cu prevenția, diagnosticarea și tratamentul
afecțiunilor pediatrice (nou -născut până la 18 ani).

Diferențele față de prevenția, diagnosticarea și tratamentul la adulți sunt:
➢ Anamneza dificilă ;
➢ Patologie specifică vârstei pediatrice ;
➢ Evoluție impreviz ibilă (evoluție rapidă către complicații) ;
➢ Tratament specific în funcție de vârstă si greutate .

1.2 Diagnostic și tratament

1.2.1 Anamneza
– Istoricul bolii (aparținător/copil)
– Debut
– Simptome (cu caracteristici: intensitate, durată, localizare)
– Antecedente personale fiziologice
– Antecedente personale patologice (istoricul îndepărtat)
– Vaccinare
1.2.2 Examen clinic – pe aparate și sisteme
1.2.3 Investigații paraclinice
– Analize sânge;
– Analize alte probe biologice;
– Imagistică:
➢ RX;
➢ Ecografie;
➢ CT/RMN etc.
1.2.4 Factori de prognostic negativ / semne de gravitate în funcție de patologie
1.2.5 Diagnostic diferențial
1.2.6 Stabilire tratament:
– Etiologic;
– Simptomatic;
– Paleativ.
1.2.7 Prognostic

1.3 Spațiul virtual și importanța acestuia

Ținând cont de pașii de diagnostic enumerați mai sus, putem observa cu ușurință c ă nu toți pot fi
accesibili in spațiul virtual.

16
Fără un examen clinic și investigații paraclinice nu se poate realiza un diagnostic diferențial corect.
Cu toate acestea, este o metodă bună și accesibilă de orientare spre un diagnostic și stabilirea
necesi tății prezentării la cea mai apropiată unitate medicală sau medic.

1.4 Medicina virtuală în secolul XXI

Apariția erei digitale a însemnat acces mai rapid și mai vast la informații. În secolul XXI suntem
capabili să ne supraîncărcăm cu informații prin simpla tastare a simptomelor în bara de căutare a
Google. Problema este obținerea accesului la informații exacte. În potopul de informații medicale
virtuale, cum putem sorta ce e bun de ce e irelevant sau chiar rău?

Pediatrul tău a fost conceput în pricipal pent ru a oferi informații sigure și bine documentate din surse
sigure. Informațiile medicale de pe aceas tă platformă sunt verificate de doamna doctor COMBEI
Georgiana -Alexandra, medic pediatru la Spitalul Clinic de Urgență pentru Copii "M.S.Curie" –
Bucure ști.

1.5 Suport tehnic utilizat

1.5.1 Hardware

Platforma hardware utilizată pentru realizarea acestei aplicații a fost calculatorul personal, care are
următoarea configurație:
• Placa video: Nvidia GeForce GTX 950M este o placă grafică de clasă medie pentru laptopuri
compatibila cu DirectX 11. 950M este construită pe tehnolgie de 28 nm, placa grafică
bazându -se pe arhitectura Maxwell (GM107). Memoria plăcii grafice este de 4095 MB DDR3,
care este conectat ă utilizând o interfață de memorie de 128 de biți. În comparație cu
predecesorul său, arhitectura Kepler, Maxwell a fost optimizată din mai multe puncte de
vedere pentru a crește eficiența energetică. Deși are doar 128 de nuclee față de predecesorul
său, (Kepler: 192 nuclee), Nvidia promite că GM107 oferă 90% din perform anța celor 192
nuclee din arhitectura Kepler. O altă înbunătățire este cache -ul L2, acesta ajungând la 2 M,
care oferă un spațiu de gestiune crescut pentru taficul de memorie, astfel permițând o intefață
de memorie relativ îngustă fără a reduce semnificati v performanța.
• Procesor: Intel Core i7 -6700HQ este un procesor quad -core(4 nuclee fizice) bazat pe o
arhitectură Skylake care oferă HyperThreading pentru calcul paralel(4 fire de execuție
simultan ). I7-6700HQ este fabricat pe o tehnlogie de 14 nm, av ând tranzistori FinFET,
lucrând la o frecvență de până la 3,5 GHz.
• Memoriee RAM: 8GB

1.5.2 Software

Ca și sistem de operare, am ales să folosesc Windows 10, parte a familiei de sisteme de operare
Windows NT .

1.5.3 Medii de dezvoltare

17

În realizarea proiectului care stă la baza acestei lucrări s -au folosit mai multe medii de dezvoltare:
• Visual Studio 2017 Professional – un mediu de dezvoltare integrat (IDE) creat de Microsoft
care suportă 36 limbaje de programare diferite, inclusiv C#, JavaScript, CSS, XML/XSLT,
HTML/XHT ML
• Adobe Illustrator CC – un editor grafic vectorial
• Adobe Dreamweaver – aplicație de dezvoltare web
Capitolul 2 – ASP.NET

2.1 Introducere în .NET

ASP.NET este un cadru web gratuit pentru construirea de site -uri web și aplicații web folosind
HTML, CSS, dar și JavaScript. De asemenea, puteți crea API -uri Web și puteți utiliza tehnologii în
timp real, cum ar fi Web Sockets. [Sursa: ASP.NET overview, 2017]

ASP.NET oferă trei cadre pentru crearea de aplicașii web: Web Forms, ASP.NET MVC și Web Pages
ASP.NET. To ate cele trei cadre sunt stabile și indiferent de alegerea făcută utilizatorul beneficiază
de toate avantajele și caracteristicile ASP.NET.
Fiecare cadru vizează un stil de dezvoltare diferit. Cel pe care îl alegeți depinde de o combinație a
activelor de p rogramare (cunoștințe, abilități și experiență de dezvoltare), tipul de aplicație pe care o
creați și abordarea de dezvo ltare cu care vă simțiți bine.
Toate cele trei cadre ASP.NET se bazează pe .NET Framework și pe funcționalitatea de bază a .NET
și ASP. NET. De exemplu, toate cele trei cadre oferă un model de securitate bazat pe autentificare,
pentru membri și au aceleași facilități pentru gestionarea solicitărilor, gestionarea sesiunilor și așa
mai departe, care fac parte din fu ncționalitatea ASP.NET de bază. [ Sursa: ASP.NET overview, 2017]

În plus, acestea nu sunt complet independente, iar alegerea uneia nu exclude utilizarea unui alt
cadru. Deoarece cadrele pot coexista în aceeași aplicație web, nu este neobișnuit să se vadă
componentele individuale al e aplicațiilor scrise utilizând diferite cadre. De exemplu, porțiuni de
client ale unei aplicații ar putea fi dezvoltate în MVC pentru a optimiza marcarea, în timp ce accesul
la date și porțiunile administrative sunt dezvoltate în Web Forms pentru a profit a de controalele de
date și de accesul simplu la date. [ Sursa: ASP.NET overview, 2017]
Mai jos este o prezentare generală a fiecărui cadru și câteva idei d espre cum să alegeți între ele.
Experiență Stil de dezvltare Expertiză
Web Forms Win Forms,
.NET Dezvoltare rapida utilizând o bibliotecă
bogată de controale care încorporează
marcajul HTML Mid-Level, RAD
Avansat
MVC Ruby on
Rails, .NET Control complet asupra marcajului HTML,
codului și marcajului separat și testelor
ușor de scris. Cea mai bună alegere pentru
aplicații mobile și pentru o singură pagină Mid-Level, avansat
Web Pages ASP clasic,
PHP Marcajul HTML și codul în același fișier Nou, mid -level

18
Tabelul 2.1 Lista celor trei cadre oferite de ASP.NET [Sursa: ASP.NET overview, 2017]

2.2 Limbaje folos ite

2.2.1 C# și arhitectura .NET

C# este un limbaj simplu, modern, obiect orientat derivat din C++ și Java. Face parte din suita
Microsoft Visual Studio împreună cu VB, VC++, C++, Vbscript, Jscript. –

Principalele avantaje ale limbajului C# sunt:
– Simplu:
• Pointerii lipsesc
• Operațiile nesigure, cum ar fi manipularea directă a memorie, sunt interzise
• Operatorii “::” sau “ ->” nu au utilitate
• Încorporează caracteristicile și managementul automat al memoriei din arhitectura
.NET
• Valorile 0 și 1 nu mai sunt acceptat e ca valori booleene. “true” și “false” fiind noile
valori pure, evitându -se astfel erori ale operanzilor “=” și “==”
• “==” este folosit ca și operand de comparare, iar “=” este folosit ca operand de asignare
– Modern:
• Se bazeaz ă pe tendința actuală fiind foa rte puternic și simplu pentru construirea de
aplicații interoperabile și robuste
• Include suport “built -in” pentru a transforma orice componentă într -un serviciu web
care poate fi invocat pe internet din orice aplicație care rulează pe orice platformă
– Obiec t orientat:
• Suportă încapsularea datelor, polimorfism, interfețe
• (int, float, double) nu sunt obiecte în Java, dar C# a introdus structuri(structs) care
permit tipurilor pimitive să devină obiecte.
int i=1;
string a=i Tostring(); // conversia
– Type Safe :
• Nu se pot face distribu ții nesigure, cum ar fi conversia double la un boolean
• Tipurile de valori (tipurile primitive) sunt inițiate cu 0(zero) și tipurile de referință
(obiecte și clase) sunt inițiate automat la null de către compilator
• Array -urile sunt inde xate la zero și sunt verificate
– Interoperabilitate:
• Include suport nativ pentru aplicații bazate pe sistem de operare Windows permițând
utilizarea resticționată a indicilor nativi
• Utilizatorii nu mai trebuie să implementeze în mod explicit interfețele, a ceste
caracterisitici fiind deja construite
• Permite utilizatorilor să folosească pointerii ca blocuri de cod nesigure pentru a accesa
și manipula componente din VB Net și alte limbaje
– Scalabil și actualizabil:

19
• .Net a introdus ansambluri care își auto-descriu manifestarea lor. Manifestul stabilește
identitatea asamblării, versiunea, semnătura digitală etc., astfel ansamblurile nu
trebuie să se înregistreze nicăieri.
• Pentru a scala aplicațiile, stergem fișierele vechi și le actualizăm cu altele noi.
• Actuali zarea componentelor soft este o sarcină predispusă la erori ; revizuirile aduse
codului pot afecta versiunea curentă [Sursa: C -sharp corner, 2017]

Arhitectura .NET este un mediu de execuție . Aceasta este compusă din două mari componente:
– Common Language Runtime (CLR) – motorul de execuție care se ocupă de toate aplicațiile
care rulează
– Librăria claselor – oferă acces programatorilor către un cod testat, refolosibil, pe care aceștia
îl pot folosi în propriile aplicații

Fig 2.1 C# și Arhitectura .NET [Sursa: Introduction to C#, 2017]
2.2.2 JavaScript, CSS și HTML în ASP.NET

De-a lungul timpului dezvoltatorii web am depașit limitările impuse de browsere printr -o combinație
de procese atât la server cât și la client.

Orice dezvoltator web trebuie să cuno ască/învețe:

• HTML – pentru a defini conținutul paginilor web
• CSS – pentru a specifica formatarea paginilor web
• JavaScript – pentru a programa comportamentul paginilor web

20

JavaScript (JS) este un limbaj de programare obiect orientat bazat pe conceptul pro totipurilor .
Principala sa utilizare este construirea de pagini web, pentru a introduce diverse funcționalități
conținutului acestora. [sursa: Wikipedia, 2017]

Cascading Style Sheets (CSS) este o soluție cross platform pentru standardizarea formatării sit e-urilor
web și oferă un aspect vizual consecvent în întreaga aplicație. Acesta funcționează împreună cu codul
HTML și este astfel suportat de toate browserele moderne. [sursa: Codeproject CSS, 2017]

HyperText Markup Language (HTML) este un limbaj de mar care utilizat pentru crearea paginilor
web ce pot fi afișate într -un browser (sau navigator). Scopul HTML este mai degrabă prezentarea
informațiilor – paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea semanticii documentului.

Fig 2.2 Limbaje folos ite în programarea în Visual Studio [sursa: SlideShare, 2017]

2.3 ASP.NET Web Forms

ASP.NET este tehnologia de ultimă generație oferită de Microsoft pentru dezvoltarea de pagini web.
Ia ce e mai bun din Active Server Pages (ASP), precum și serviciile și fun cțiile oferit e de Common
Language Runtime (CLR) la care adaugă o multitudine de noi funcții, r ezultatul fiind o experiență de
dezvoltare web robustă, scalabilă și rapidă care oferă multă flexibilitate cu puțină codare.
Web Forms este inima și sufletul ASP. NET și este in clus în Visual Studio, f iind unul dintre cele 3
modele de programare pe care le putem utiliza pentru a crea aplicații web. Acest model este elementul
de interfață cu utilizatorul (UI) – sunt pagini pe care utilizator ii aplicației le solicită folosin d browserul
lor – care oferă aspectul și simțul aplicațiilor web. Pentru a scrie o astfel de aplicație, programatorii
folosesc o combinație de cod HTML, script client, controale de server și cod de server. Când

21
utilizatorii solicită o pagină, aceast ă solicitare este compilată și executată pe server de c ătre platformă,
iar apoi aceasta generează codul HTML pe care browserul îl afișază. Utilizarea Visual Studio oferă
prin IDE (Integrated Development Environment) , de asemenea, o interfață drag -and-drop folosită
pentru a crea interfața aplicației. [sursa: MSDN, 2017]

Web Forms este creat din două componente: partea vizuală, regăsită într -un fișier .ASPX și codul din
spatele formularului , care se regăsește într -un fișier separat.

Fig 2.3 Model ASP.NET W eb Forms [sursa: MSDN , 2017]

Platforma ASP.NET Web Forms oferă urmatoarele beneficii:
• Separarea codului HTML sau a altor elemente de UI de logica aplicației
• O suită bogată de controale de server pentru sarcini comune, inclusiv accesul la date
• Un puternic motor de legare a datelor, cu multe utilitare adiționale
• Suport pentru scriptingul pe partea clientului care se execută în browser
• Suport pentru o varietate de alte capabilități, inclusiv rutarea, securitatea, performanța,
internaționalizarea, testarea, de panarea, gestionarea erorilor și gestionarea statului.
La prima vedere, Web Forms pare a fi un spațiu de lucru unde programatorii desenează controale.
Dar în realitate acest spațiu oferă mult mai mult. Astfel controalele folosite pot determina ce
proprietă ți, evenimente și metode se vor obține pentru fiecare dintre accestea. Există două tipuri de
controale pe care dezvoltatorii le pot folosi pentru a crea interfața de utilizator: controale HTML și
controale Web Form.
Controale le HTML imită elementrle HTML a ctuale pe care le utilizăm în Adobe Dreamwaver, Front
Page sau oricare alt editor HTML pentru a defini interfața. Aceste controale ne permit să gestionăm
evenimentele server asociate etichetei (de exemplu un clic pe un buton) și să manipulăm eticheta
HTML astfel, când controlerul este redat în browser, eticheta este redată la fel cum a fost salvată, mai
puțin codul s erverului. Acest lucru ne oferă un control precis asupra codului HTML trimis către
utilizator.

22
Controalele Web Form sunt create și executate pe server, la fel ca și cele HTML. După efectuarea
operațiunii pe care au fost proiectate să o facă, acestea crează codul HTML adecvat și trimit acest cod
către browserul utilizatorului. De exemplu, un controler DropDownList ne va permite să executăm o
legăt ură cu o sursă de date, dar totuși la ieșirea către utilizator va trimite doar etichetele standard de
tip <Select> și <Option>. Totuși, același controler DropDownList ne va lega la altă sursă de date care
să trimită Wireless Markup Language (WML), dacă des tinatarul este un telefon mobil. Acesta este
motivul pentru care controale Web Form nu se referă neapărat la un anumit limbaj de markup, ci au
flexibilitatea de a alege limbajul de markup corespunzător. Altfel spus, controalele Web Form – prin
comenzile af erente – modifică rezultatul în funcție de tipul browserului detectat . Daca browserul
utilizat este Internet Explorer (IE) se vor activa câteva extensii DHTML, iar dacă se detectează un alt
browser, se va trimite standardul HTML 3.2. [sursa: MSDN, 2017]

Fig 2.4 Arhitectura ASP.NET Web Forms [sursa: SlideShare, 2017]

2.4 ASP.NET MVC

Modelul arhitectural Model -View -Controller (MVC) separă o aplicație în trei componente distincte:
modelul, vizualizarea și controlerul. Designul MVC este următorul:

23

Fig 2.5 Design -ul MVC [sursa: MSDN, 2017]

• Modele. Obiectele model sunt părțile aplicației care implementează logica pentru domeniului
de date al aplicației. Adesea, obiectele model recuperează și stochează starea modelului într –
o bază de date. În aplicațiile mici , modelul este deseori o separare conceptuală în loc de una
fizică. De exemplu, dacă aplicația citește doar un set de date și o trimite în vizualizare,
aplicația nu are un strat de model fizic și clase asociate. În acest caz, setul de date preia rolul
unui obiect model.
• Vizualizări. Vizualizările sunt componentele care afișează interfața cu utilizatorul (UI) a
aplicației. În mod obișnuit, această interfață utilizator este creată din datele modelului. Un
exemplu ar fi o vizualizare de editare a unui tabel ca re afișează casetele de text, listele
derulante și casetele de selectare pe baza stării actuale a unui obiect.
• Controlere. Controlerele sunt componentele care manipulează interacțiunea cu utilizatorul,
lucrează cu modelul și, în cele din urmă, selectează o vizualizare pentru afișare care trimite
interfața către utilizator. Într -o aplicație MVC, vizualizarea afișează doar informații;
controlerul se ocupă și răspunde de intrarea și interacțiunea utilizatorilor. De exemplu,
controlerul se ocupă de valorile și rului de interogare și transmite aceste valori modelului, care
la rândul său ar putea utiliza aceste valori pentru a interoga baza de date.
Modelul MVC ajută la crearea de aplicații care separă diferitele aspecte ale aplicației (logica de
intrare, logica business și logica UI), oferind în același timp o legătură între aceste elemente. Modelul
specifică unde trebuie localizat fiecare tip de logică în aplicație. Logica UI aparține în vizualizare .
Logica de intrare aparține controlerului. Logica business aparț ine modelului. Această separare ajută
la gestiona reae complexit ății atunci când se construiește o aplicație, deoarece permite să concentrarea
asupra unui aspect al implementării la un moment dat. De exemplu, putem să ne concent răm asupra
vizualizării fără să depindem de logica business. [sursa: MSDN, 2017]

Cuplajul liber între cele trei componente principale ale unei aplicații MVC promovează de asemenea
dezvoltarea paralelă. De exemplu, un dezvoltator poate lucra la vizualizare, un al doilea dezvoltator
poate lucra pe logica controlerului, iar un al treilea dezvoltator se poate concentra pe logica business
din model .

Arhitectura ASP.NET MVC oferă o alternativă la modelul ASP.NET Web Forms pentru crearea de
aplicații web . Platforma ASP.NET MVC oferind urmă toarele avantaje :
• Nu utilizează statutul de vizualizare sau formulare pe server, oferind astfel c ontrol complet
asupra felului în care o aplicație se comportă. De exemplu asupra codului HTML utilizat;

24
• Facilitează gestionarea complexității prin împărțirea a plicației în componente distincte
• URL -uri intuitive;
• Oferă un suport mai bun pentru dezvltarea bazată pe teste, crescând t estabilitate a codului;
Este de asemena prima platformă pe care Microsoft a dezvoltat -o cu implicare masivă din partea
comunității de p rogramatori, platformă pe care ulterior a distribuit -o open -source.

Fig 2.6 Arhitectura ASP.NET MVC [sursa: SlideShare, 2017]

2.5 ASP.NET – Opțiuni de acces la date

ASP.NET oferă multe opțiuni pentru stocarea, preluarea și afișarea datelor . De aceea pentr u un
începător , opțiunile nu sunt întotdeauna evidente.

Fig 2. 7 Arhitectura ASP [sursa: SlideShare, 2017]
2.5.1 Sisteme de gestiune a bazelor de date (DBMS)

Tehnologia folosită pentru conectarea la o bază de date relațională care lucrează pe un server în
cadrul ASP.NET este ADO.NET. ADO.NET comunică cu un sistem de gestionare a bazelor de date

25
(DBMS) cum ar fi SQL Server sau Oracle utilizând software -ul furnizorilor de date. Furnizorii de
date Microsoft permit conectarea la următoarele baze de date:
– SQL Server, inclusiv SQL Server Express și LocalDB
– SQL Server Compact
– Orice bază de date care acceptă ODBC sau OLEDB și este potrivită pentru utilizarea într -o
aplicație web
Pe lângă furnizorii de date Microsoft se pot folosi terți . Unele baze de date relați onale cunoscute
pentru care se pot obține furnizor de date sunt MySQL, SQLite, Oracle sau DB2.
Sunt o multitudine de ediții SQL Server din care se poate alege:
– SQL Server Express – ediție entry -level, fiind ediția gratuită a SQL Server
– SQL Server Express L ocalDB – o variantă aparte a SQL Server Express, care lasă utilizatorul
să lucreze cu bazele de date ca fiind fișiere de tip .mdf. De obicei fisierele .mdf ale bazelor de
date LocalDB se regăsesc în folderul App_Data din proiect
– SQL Server Developer Editio n – are toate caracteristicile versiunii Enterprise, dar este
liceențiată doar pentru mediul de dezvoltare și testare, nu și pentru producție
– SQL Server (ediții diferite) – Enterprise, Business Intelligence, Standard si Web
– Windows Azure SQL Database – ediția cloud a SQL Server, cunoscută în trecut ca SQL Azure
– SQL Server Compact – oversiune gratuită, un motor de baze de date minimal care poate fi
folosit atât în mediu de dezvoltare cât și în producție. Ediția Compact foloește un alt motor de
baze de date și un alt durnizor de date .NET decât restul edițiilor. SQL Server Management
Studio (SSMS) și SQL Server Data Tools (SSDT) nu funcționează cuu SQL Server Compact
Începând cu versiunea Visual Studio 2012, Microsoft a oferit SQL Server Express ca opțiune
standard. [sursa: MSDN, 2017]

2.5.2 Object -Relational Mappers (ORM)

Pentru a citi sau actualiza date, ADO.NET s e poate utiliza direct folosind clase precum SqlCommand,
SqlDataReader, SqlDataAdapter și DataSet. Alternativa recomandată este să se foloseas că un cadru
de cartografiere obiect -relațional (ORM), cum ar fi Entity Framework, să gestioneze codul de nivel
inferior care face legătura cu furnizoru de date ADO.NET. Dacă se foloseste ADO.NET direct,
programatorul trebuie să scrie și să execute manual i nterogări SQL. De asemenea, codul care
convertește datele din formatul bazei de date în obiecte și prorpietăți cu care se poate lucra în codul
aplicației trebuie scris. [sursa: MSDN, 2017]
O modalitate rapidă de a vedea ce face un ORM este aceea de a comp ara codul scris pentru un ORM
și codul scris pentru a face același lucru folosind direct ADO.NET . În exemplul următor, se va lua ca
exemplu o bază de date școlară conține un tabel Instructor, un tabel Course și n tabel de asociere
CourseInstructor pentru r elația mulți la mulți. Pentru a afișa o listă de instructori și cursurile pe care
le predau, se vor insera obiecte Instructo și Course asemănătoare cu acestea:

public class Instructor
{
public string LastName { get; set; }
public string FirstMidNa me { get; set; }
public List<Course> Courses { get; set; }
}

public class Course

26
{
public string Title { get; set; }
public int Credits { get; set; }
}

Așa ar arăta codul ca aceste clase să fie populate folosind ORM -ul Entity Framework:

public IEnumerable<Instructor> GetInstructors()
{
List<Instructor> instructors;
using (var db = new SchoolContext())
{
instructors = db.Instructors.Include( "Courses" ).ToList();
}
return instructors;
}

Așa ar arăta codul care face a celași lucru folosind ADO.NET direct:

public IEnumerable<Instructor> GetInstructorsADONET()
{
var connString =
ConfigurationManager.ConnectionStrings[ "SchoolContext" ].ConnectionString;
List<Instructor> instructors = new List<Instructor>();
using (var conn = new SqlConnection(connString))
{
conn.Open();

var cmd = new SqlCommand( "SELECT Person.PersonID, Person.LastName, Person.FirstName,
Course.Title, Course.Credits " +
"FROM Course INNER JOIN " +
"CourseInstructor ON Course.CourseID = CourseInstructor.CourseID RIGHT
OUTER JOIN " +
"Person ON CourseInstructor.PersonID = Person.PersonID " +
"WHERE (Person.Discriminator = 'Instructor') " +
"ORDER BY Person.PersonID" , conn);
var reader = cmd.ExecuteReader();

int currentPersonID = 0;
Instructor currentInstructor = null;
while (reader.Read())
{
var personID = Convert.ToInt32(reader[ "PersonID" ]);
if
{
currentPersonID = personID;
if (currentInstructor != null)
{
instructors.Add(currentInstructor);
}
currentInstructor = new Instructor();
currentInstructor.LastName = reader[ "LastName" ].ToString();
currentInstructor.FirstMidName = reader[ "FirstName" ].ToString();
}
if (reader[ "Title"] != DBNull.Value)
{

27
var course = new Course();
course.Title = reader[ "Title"].ToString();
course.Credits = Convert.ToInt32(reader[ "Credits" ]);
currentInstructor.Courses.Add(course);
}
}
if (currentI nstructor != null)
{
instructors.Add(currentInstructor);
}

reader.Close();
cmd.Dispose();
}
return instructors;
}
[sursa: MSDN, 2017]
Se poate observa că atunci când nu se folosește un ORM este necesar s ă se scrie , testeze și depaneze
un cod mult mai mare și mai complex. De asemenea codul scris direct către ADO.NET este specific
pentru baze de date, spre deosebire de codul Entity Framework care nu s -ar schimba dacă se decide
ca aplicația să fie migrată de la SQL Server la o bază de date Windows Azure SQL.
După cum se poate vedea, folosind un ORM crește productivitatea, iar aplicația dezvoltată este mai
ușor de menținut. Cele mai întâlnite ORM -uri care merg cu ASP.NET sunt:
– ADO.NET Entity Framework – princ ipalul ORM oferit de Microsoft
– LINQ to SQL – o variantă moștenită de ORM pe care Microsoft o oferă
– NHibernate – este un ORM open source [sursa: MSDN, 2017]
Capitolul 3 – Organizarea aplicației

3.1 De ce MCV și nu Web Forms

Dacă studiem cu atenție agenda Microsoft, se poate observa cu ușurință că se axează pe MVC. Văzând
acest lucru am studiat mai în detaliu deosebirile dintre ele.
Site-urile web sunt create pentru a fi folosite de utilizatori. Aceștia vin cu un anumit scop pe site -ul
respectiv și comunică dorința lor prin acțiunile care le fac.
În ziua de azi, aceste acțiuni sunt comunicate printr -un clic pe un buton. Datorită acestei structuri
bazată pe actiune, protocolul HTTP a fost ales pentru Web deoarece avea acțiuni precum POST, GET,
PUT, DELETE etc., care pot comunica mai clar scopul utilizatorilor. Prin urmare dacă putem să unim
aceste acțiuni de metodele sau funcțiile folosite de programul nostru, am reuși ca aplicația noastră să
aibă logică și să păstreze o arhite ctură cât mai simplă. [sursa: CodeProject, 2017]
Prin intermediul Web Forms, pașii urmați ar fi:
1. Utilizatorul trimite o cerință cu o acțiune cum ar fi HTTP POST/GET etc.
2. Serverul web IIS unește această cerere la o vizualizare (VIEW)
3. Vizualizarea invocă pagina de ciclu, parcurgând evenimentele necesare, ca mai apoi sa invoce
acțiunea necesară
4. Acțiunea rezultată este trimisă înapoi către utilizator în format HTML

28

Fig 3.1 Pașii ASP.NET Web Forms pentru a realiza o acțiune [sursa: CodeProject, 2017]

După cu m se observă, lucrurile sunt mai complicate decât este necesar, Web Forms oferind o
arhitectură bazată pe vizual pentru o cerință bazată pe acțiune. Prin urmare logica de care vorbeam
inițial, nu prea mai există. Aveam nevoie pentru Pediatul Tau o arhitect ură care să urmeze logica:
acțiune – vizualizare. MVC oferă acest lucru: cererea vine la o acțiune aflată în controler, iar apoi
controlerul invocă partea vizuală aflată în model.

Fig 3.2 Pații ASP.NET MVC pentru a realiza o acțiune [sursa: CodeProject, 2017]

O altă problemă ar fi întreținerea pe termen îndelungat a aplicației sau înbunătățirea ei în viitor. Dacă
este analizat codul scris automat de Web Forms, se poate obseva că acesta presupune o cantitate mare
ca mărime care conține foarte multe evenim ente complexe. În felul acesta codul este de necitit, fiind
de întreținut pe o perioadă lungă de timp. Așadar dacă folosesc o arhitectură bazată pe actiune –
vizualizare, în loc de vizualizare -acțiune, aș putea să refolosesc aceeași acțiune pentru m ai multe
tipuri de vizualizare. De exemplu, dacă utilizatorul trimite o acțiune de afișare, programul meu poate
invoca fie afișarea pe ecranul unui calculator, fie afișarea pe ecranul unui telefon . Mai jos am
consemnat codul scris în MVC pentru a face acest lucru. Pentru a face acest lucru în Web Forms este
foarte dificil. [sursa: CodeProject, 2017]

public ActionResult Index(string DeviceType)
{
if (viewType == "Mobile")
{
return View("MobileView");
}
else
{
return View("NormalView");
}
}

29

În concluzie, poate că Web Forms era alegerea clară în trecut, dar pentru a putea menține cu ușurință
și îmbunătăți aplicația Pediatrul Tau, am nevoie de o arhitectură bazată pe acțiuni cum este ASP.NET
MVC. Dacă foloseam ASP.NET Web Forms și în viitor era necesar să o schimb, schimbarea ei ar fi
însemnat o mare bătaie de cap. Această schimbare ar fi însemnat: [sursa: CodeProject, 2017]
1. Să schimb codul scris automat de arhitectură într-o clasă control er cu toate evenimentele
convertite în metode pentru a fi folosite ca acțiuni
2. Modelul de mijloc devine modelul care oferă datele și logica business
3. Vizualizarea va trebui schimbată astfel încât să ofere doar afișare și poziționare

Fig 3.3 Schimbarea arhitecturii Web Forms într -o arhietctură bazată pe acțiuni [sursa: CodeProject,
2017]

Acestea fiind spuse am luat hotărârea ca aplicația Pediatrul Tau să utilizeze arhitectura ASP.NET
MVC, pierzând astfel principalul avantaj oferit de A SP.NET Web Forms și anume acela de
programare RAD/VISUAL care mi -ar fi scurtat timpul de lucru significativ.

3.2 Aspecte ale dezvoltării aplicațiilor web

Am vorbit mult despre tehnologiile utilizate pentru crearea de aplicații web, dar c e este o aplicaț ie
web?
O aplicație web este un program realizat pe calculator care utilizează browserele și tehnologiile
menționate pentru a realiza anumite comenzi pe Internet.

30
Fig 3. 4 Funcționaliatea aplicațiilor web [sursa: MAXCDN, 2017]

În ziua de azi, milioan e de companii folosesc internetul ca o modalitate de comunicare eficientă și
ieftină, oferindu -le posibilitatea de a schimba informații cu clienții într -un mediu securizat. Cu toate
acestea schimbul de informații este eficient doar dacă există posibilitate a de a stoca și procesa tate
informațiile, ca mai apoi rezultatele procesării sa fie prezentate clientului.
Aplicațiile web folosesc o combinație de scripturi la nivelul serverului (PHP și ASP) pentru a stoca
și procesa informația și scripturi la nivelul c lientului (JavaScript și HTML) pentru a prezenta
rezultatele utilizatorului. Acest lucru este posibil prin intermediul chestionarelor online, sistemelor
de management al conținutului, coșuri de cumparaturi, etc., pe care aplicația le stochează, oferind
posibilitatea companiilor să creeze documente, să facă schimb de informații, să colabreze la diverse
proiecte și să lucreze la documente comune indiferent de locație sau platformă (PC, laptop, telefon).
Aplicațiile web sunt codate într -un limbaj ușor decodifi cabil pentru browser cum ar fi JavaScript și
HTML, astfel browserul să fie capabil să execute programul. Unele aplicații sunt dinamice, utilizănd
procesare la nivelul serverului, altele sunt statice, neavând nevoie să ceara procesare din partea
serverului. [sursa: MAXCDN, 2017]
După cum se poate vedea în Fig 3. 4, este necesar un server web(Web Server) pentru a primi și analiza
cererile clienților, un server de aplicație (Application Server) pentru a executa aceste cereri și, uneori,
de o bază de date pentr u a stoca informațiile.
Pașii uzuali ai unei aplicații sunt următorii:
– Utilizatorul inițiază o cerere către serverul web
– Serverul web decodifică cererea și o trimite către serverul aplicației
– Serverul aplicației procesează cererea (ex.: interoghează baza de date, procesează informațiile
din aceasta), apoi generează rezultatele
– Serverul aplicației trimite rezultatele serverului web
– Serverul web codifică rezultatele și răspunde utilizatorului [sursa: MAXCDN, 2017]

Beneficiile unei aplicații web:
– Rulează pe mai multe platforme, indiferent de sistemul de operare atâta timp cât browserul
este compatibil
– Toti utilizatorii accesează aceeași versiune, eliminând orice probleme de incompatibilitate
– Nu este necesară instalarea aplicației pe hard drive, eliminănd prob lema spațiului de stocare
– Se reduce pirateria software pentru aplicațiile cu abonament
– Se reduc costurile companiei, dar și ale utilizatorului, nefiind necesară o mentenanță activă
din partea companiei sau de calculatoare performante din partea utilizatori lor
Creșterea treptată a folosirii internetului a schimbat stilul de afaceri. Un număr din ce în ce mai mare
de firme au adoptat modelul de stocare în cloud față de mdelul clasic. Aceste aplicații online au
aceeași funcționalitate ca și variantele desktop și pe deasupra oferă avantaje cum ar fi lucrul la comun
indiferent de platformă, au o mai vastă arie de acoperire, fiind ușor accesibile de oriunde. [sursa:
MAXCDN, 2017]

31
3.3 Structura generală

Pentru a înțelege structura generală a unei aplicații bazat e pe ASP.NET MVC, am să prezint pe scurt
pașii necesari pentru crearea soluției.
1. Deschideți aplicația Visual Studio 2017
2. Dați click pe File > New > Project…
3. O nou ă fereastră se va deschide

Fig 3.5 Creare aplicație ASP.NET – proiect nou

a. Din coloana di n dreapta Visual C# va fi expandat și alegeți Web
b. Din co loana din mijloc alegeți ASP.NET Web Application(.NET Framework)
c. Schimbați numele proiectului și locația
4. Dați clic pe OK
5. O altă fereastră se va deschide

32

Fig 3.6 Creare aplicație ASP.NET – alegere ti p aplicație

a. Schimbați felul de autentificare

Fig 3.7 Creare aplicație ASP.NET – tip autentificare

b. Selectați Add unit tests dacă doriți un proiect de testare automată
6. Dați clic pe OK pentru crearea aplicației
7. Apăsați Ctrl + F5 pentru a rula aplicația î n browser

33

Fig 3.8 Creare aplicație ASP.NET – prima aplicație MVC

După cum obervăm, Visual Studio a creat pentru noi structura de bază cu fișiere si foldere. În
continuare voi vorbi despre principalele foldere:
• App_Data: conține fișierele de date ale apl icației, cum ar fi fișiere bazei de date locale.
Serverul web IIS nu va accesa niciodată acest folder
• App_Start: conține fisiere de clasă care vor fi executate când aplicația este lansată.
• Content: conține fișiere statice cum ar fi fișiere CSS, imagini, ic oane
• Controllers: conține fișiere clasă pentru controlere. Controlerele se ocupă de cererile
utilizatorilor și returnează un răspuns
• Fonts: conține fișiere de fonturi pentru aplicație
• Models: conține fișiere de clasă pentru modele. De obicei clasele model includ proprietăți
publice pe care aplicația le va folosi să mențină și să manipuleze datele aplicației
• Scripts: conține fișiere JavaScript folosite în aplicație.
• Views: conține fișiere HTML folosite în aplicație.
– Fișierul tipic are extensia .cshtml în ca re este scris codul HTML și C#.
– Include sub -foldere separate pentru fiecare controler

34
– Folderul Shared conține toate părțile vizuale care vor fi regăsite în toate controlerele

35
Capitolul 4 – Implementare

4.1 Plan ul alicației Pediatrul Tau

Soluția aplicației este compusă din patru proiecte diferite.

Fig 4.1 Proiecte incluse în aplicația Pediatru Tau

• Proiectul Licenta.MvcUI – centrul aplicației web (serverul aplicației). Aici se regăsesc toate
elementele prezentate î n capitolul 3.3
• Proiectul Licenta.MvcUI.Tests – cu ajutorul acestuia voi reuși pe viitor, cand aplicația va avea
mai multe elemente și o bază de date mai dezvoltată, să realizez testarea automată (TDD –
Test-Driven Development). Până în acest moment nu a f ost utilizat.
• Proiectul Licenta.DAL – un proiect de tip “Class Library” peste care am aplicat ORM -ul
Entity Framework pentru a u șura accesul la baza de date. Aici se regăsește modelul bazei de
date pe care îl voi prezenta în Capitolul 4.3
• Proiectul Licenta .ConsoleUI – un proiect de tip “Console Application” . Acesta este folosit
pentru a testa funcțiile de bază folosite pentru a extrage datele din baza de date.

36
4.2 Din HTML și CSS în HTML, CSS și C#

Ținând cont de faptul că arhitectura ASP.NET MVC mi -a ofer it posibilitatea de a începe dezvoltarea
din orice punct, am decis să încep cu dezvoltarea interfeței cu utilizatorul. Pentru aceasta am folosit
aplicația Adobe Dreamweaver. Această aplicație mi -a oferit posibilitatea de a lucra cu cod HTML și
CSS pur, reușin d astfel să dezvolt layer -ul principal al fiecărei pagini în parte.
De menționat este faptul că am ales să folosesc platfoma open source Bootstrap. Aceasta este una
dintre cele mai po pulare platforme HTML, CSS și JavaScript pentru site -uri web dinamice, d ându-
mi astfel oportunitatea de a crea o interfață grafică care poate fi ușor accesibilă atât de pe monitor -ul
unui laptop, cât și de pe ecranul unui telefon. Acest lucru este posibil prin delimitarea clară a maxim
12 coloane.

Am decis împarțirea aplicație i în patru părți:
• Header -ul: conține logo -ul aplicației și titlul

Codul HTML folosit care se regăsește în fișierul Index.html :

Aici am definit spațiul unde se regăsesc elementele din partea superioară a aplicației: Imaginea și
titlul

Codul CSS folosit care se regăsește în fișierul website.css :

După cum se observă legă tura codului CSS, în acest caz , cu codul HTML se face cu ajutorul
elementului “id”. Aplicația parcurge codul CSS, identificând astfel locațiile unde acesta se
încadrează și îi dă pri oritate față de codul HTML

• Navbar -top: conține meniul aplicației

37
Codul HTML:

Codul CSS: Se regăsește în Anexa 1

• Conținutul propriu -zis al paginii
• Bara din subsolul paginii
După definirea principalelor elemente și implementarea codului CSS necesar pen tru fiecare element
în parte, am transferat întreg conținutul în Visual Studio. Acesta a fost împarțit în două fișiere:

• Proiectul Licenta.MvcUI > Views > Home > Index.cshtml – aici am transferat conținutul
propriu -zis al paginii

38
• Proiectul Licenta.MvcUI > Views > Shared > _Layout.cshtml – aici am transferat celelate
părți ale interfeței, acestea fiind comune cu celelalte pagini ale aplicației. (codul se regăsește
în Anexa 2)
Prin acest transfer , am salvat incărcarea aplicației cu 63 linii de cod la fiecare pagină .

Având la îndemână fișierul _Layout.cshtml , implementarea celorlalte pagini nu reprezenta o
problemă foarte mare. Tot ce aveam nevoie era o bază de date pe care să o pot interoga cu ușurință.

4.3 Baza de date

Pentru a putea stoca date, am implementat o bază de date relațională cu ajutorul căreia să pot răspunde
fluxului de interogări ce va urma. Având în vedere faptul că această bază este o bază de test, urmând
să fie schimbată pe viitor, am ales să folosesc varianta clasică oferită automat de Visual Studio: SQL
Server Express LocalDB.

4.3.1 Diagrama relațională a bazei de date

Fig 4.2 Diagrama relațională a bazei de date
4.3.2 Descriere entități , atribute, relații

Tabela AspNetUser va reține date referitoare la utilizatorii aplicației.

CREATE TABLE [dbo].[AspNetUsers] (

39
[Id] NVARCHAR (128) NOT NULL,
[Email] NVARCHAR (256) NULL,
[EmailConfirmed] BIT NOT NULL,
[PasswordHash] NVARCHAR (MAX) NULL,
[SecurityStamp] NVARCHAR (MAX) NULL,
[PhoneNumber] NVARCHAR (MAX) NULL,
[PhoneNumberConfirmed] BIT NOT NULL,
[TwoFactorEnabled] BIT NOT NULL,
[LockoutEndDateUtc] DATETIME NULL,
[LockoutEnabled] BIT NOT NULL,
[AccessFailedCount] INT NOT NULL,
[UserName] NVARCHAR (256) NOT NULL,
[FirstName] NVARCHAR (MAX) DEFAULT ('') NOT NULL,
[LastName] NVARCHAR (MAX) DEFAULT ('') NOT NULL,
[Sex] NVARCHAR (MAX) DEFAULT ('') NOT NULL,
[Birthdate] DATETIME NULL,
[Address] NVARCHAR (MAX) NULL,
[City] NVARCHAR (MAX) NULL,
[County] NVARCHAR (MAX) NULL,
CONSTRAINT [PK_dbo.AspNetUsers] PRIMARY KEY CLUSTERED ([Id] ASC)
);

GO
CREATE UNIQUE NONCLUSTERED INDEX [UserNameIndex]
ON [dbo].[AspNetUsers] ([UserName] ASC);

Tabela Symptoms va reține date despre simptome,cum ar fi: pa rtea copului unde se manifestă și
categoria din care fac parte

CREATE TABLE [dbo].[symptoms] (
[Id] INT IDENTITY (1, 1) NOT NULL,
[name] VARCHAR (80) NOT NULL,
[category] VARCHAR (80) NULL,
[desc] TEXT NULL,
[comments] TEXT NULL,
[bodyPart] VARCHAR (50) NULL,
PRIMARY KEY CLUSTERED ([Id] ASC),
UNIQUE NONCLUSTERED ([name] ASC)
);

Tabela Conditions va reține date despre bolile de care poate suferi un pacient pediatric.

CREATE TABLE [dbo].[conditions] (
[ID] INT IDENTITY (1, 1) NOT NULL,
[medical_name] VARCHAR (40) NOT NULL,
[popular_name] VARCHAR (40) NULL,
[desc] TEXT NULL,
[other_details] TEXT NULL,
[advice] TEXT NULL,
[level] INT NOT NULL,
[comments] TEXT NULL,
PRIMARY KEY CLUSTERED ([ID] ASC),
UNIQUE NONCLUSTERED ([medical_name] ASC)
);

40

Tabela Symptoms_conditions face legătură între simptome și boli, reținând simptomele aferente
fiecă rei boli

CREATE TABLE [dbo].[symptoms_conditions] (
[Id] INT IDENTITY (1, 1) NOT NULL,
[IDc] INT NOT NULL,
[IDs] INT NOT NULL,
[probability] VARCHAR (40) NULL,
[comments] TEXT NULL,
PRIMARY KEY CLUSTERED ([Id] ASC),
FOREIGN KEY ([IDc]) REFERENCES [dbo].[conditions] ([ID]),
FOREIGN KEY ([IDs]) REFERENCES [dbo].[symptoms] ([Id])
);

Tabela Users_symptoms face legătura între utilizatori și simptome. Momentan aceasta nu este
folosită, dar are ca scop salvarea simptomelor de care suferă anumiți pacienti la un anumit timp,
pentru a putea scoate rapoarte de istoric al pacienților sau pentru rapoarte de tipul cel mai
preponderent simptom intr -o anumită perioadă de timp.

CREATE TABLE [dbo].[users_symptoms] (
[Id] INT IDENTITY (1, 1) NOT NULL,
[IDU] NVARCHAR (128) NOT NULL,
[IDs] INT NOT NULL,
[observation_date] DATE NULL,
[observati on_time] TIME (7) NULL,
PRIMARY KEY CLUSTERED ([Id] ASC),
FOREIGN KEY ([IDU]) REFERENCES [dbo].[AspNetUsers] ([Id]),
FOREIGN KEY ([IDs]) REFERENCES [dbo].[symptoms] ([Id])
);

4.4 Descrierea și folosirea aplicației

După obținerea interfeței grafice și a unei baze de date am trecut la implementarea aplicației . De
reținut este faptul că fiecare pagină în parte va conține header -ul, meniul superior și meniul inferior.

41
4.4.1 Pagina de start

Conține câteva informații despre aplica ția Pediatrul Tau, date ce vor fi completate când aplicația va
fi lansată.

4.4.2 Lista Boli

Această pagină are trei stagii diferite:
1. La prima accesare utilizatorii vor observ a doar un câmp de căutare și un buton

42
2. Dacă utilizatorii doresc informa ții des pre o anumită boală pot introduce câteva caractere
(minim 3) în câmpul de căutare. Când s -au completat cele trei caractere, aplicația începe să
caute în baza de date bolile ale c ăror nume conțin cele 3 caractere.

3. Utilizatorul selectează una dintre acest e boli, moment în care aplicația primește o comandă de
aducere a datelor din bază , din tabela Conditions.

$.ajax({
url: address + "/" + conditionShort.id,
dataType: "json",
success: function (condition) {
$("#conditionName" ).text(condi tion.medical_name ? condition.medical_name : "");
$("#conditionDescription" ).html(condition.desc ? condition.desc : "");

43
$("#conditionOtherDetails" ).html(condition.other_details ? condition.other_details :
"");
$("#conditionSymptoms" ).html(DisplaySymptoms(condition.symptoms));
$("#conditionAdvice" ).html(condition.advice ? condition.advice : "");
$("#conditionComments" ).html(condition.comments ? condition.comments : "");
$("div#conditionDetailsDiv" ).show();
},
error: function (request, error)
{
console.log( "Error when calling api: " + error);
}
});

4.4.3 Contact

Aici putem regăsi datele de contact ale administratorului site -ului

4.4.4 Spital

Această pagină include o hartă interactivă pe care util izatorii pot găsi principalele 6 spitale de
pediatrie din București. Harta a fost creată utilizând API -ul Mapbox oferit gratuit pe site -ul
acestora. Interacțiunea s -a realizat cu ajutorul limbajului JavaScript.

44

4.4.5 Log in și Register

Pagina de Regi ster dă utilizatorilor posibilitatea să aibe access la întreaga funcționalitate a aplicației.
Pentru moment, doar utilizatorii înregistrați pot utiliza pagina Diagnostic de care voi vorbi imediat.
Pentru a te înregistra este nevoie de completarea unor date : Prenume, Nume, Sex, Email, parolă și
este necesar re -confirmarea parolei. Înregistrarea nu poate fi realizată fără completarea tuturor
câmpurilor.

45

O dată apăsat butonul Register , utilizatrul este automat autentificat, având acces și la pagina de
Diagno stic.
Pagina de Log in conține două câmpuri: Email și Parolă
Deasemenea logininul este prevăzut și cu valida re, astfel încât, daca nu se introduce parola sau se
introduce o parol ă care con ține caractere ne suportate, să nu se mai î ncerce conectarea , ci doa r să se
afișeze un mesaj de eroare.

În momentul în care un utilizator este logat, are access la pagina de Diagnostic

46
4.4.6 Diagnostic

Una din cele mai complexe pagini ale aplicației și totodată pe funcționalitatea ei se bazează această
întreagă lucra re.

Pagina este împarțită în 3 coloane:
• Prima co loană coține clase de tip grupuri de panouri , fiecare dintre aceste panouri având un
tiltu și conținut
o Lista Simptome reprezintă titlul primului panou. Expandând -ul, obervăm câteva
categorii: general, diges tiv,etc. Aceste categorii sunt extrase de aplicație din baza de
date, împreună cu simptomele care se regăsesc în acea categorie.

47
@foreach (var category in Model)
{
<div class="panel panel -default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">< a data-toggle="collapse" data-parent="#accordion1"
href="#collapse -@category.CategoryName.Replace( " ","")">@category.CategoryName </a></h4>
</div>
<div id="collapse -@category.CategoryName.Replace( " ","")" class="panel-collapse
collapse">
<!–collapse in –>
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn -info dropdown -toggle" data-
toggle="dropdown" aria-haspopup ="true" aria-expanded ="false"> Vezi simptome <span
class="caret"></ span></button>
<ul class="dropdown -menu">
<div id="Checkboxes" class="scrollbox">
@foreach (var symptom in category.Symptoms)
{
<li>
<input type="checkbox" id="Checkbox_ @symptom.Id ">
<label for="Checkbox_ @symptom.Id " data-
id="@symptom.Id ">@symptom.name </label>
</li>
}
</div>
</ul>
</div>
</div>
</div>
</div>
}

o Cauta Simptome – va conține un câmp de căutare a simptomelor în baza de date,
similar cu cel pentru căuta rea bolilor pe pagina Lista Boli
o Alege o parte a corpului pentru a afișa simptomele aferente. Acest ultim panou
prezintă corpul uman, având delimitat cele m ai importante părți ale corpului.

48

Această imagine a fost creată folosind Adobe Illustrator , aplicând
informațiile din tutorialul oferit de [CreativeDroplets] pentru a
extrage codul path al SVG -ului.

• A doua coloană conține un alt panou care se află în legătură directă cu SVG -ul de pe prima
coloană. Selectând o parte a corpului din SVG, acest panu se auto -populează cu simptomele
aferente respectivei părți.
• Ultima coloană este realizată din două panouri distincte care conțin, pe lângă titlu și conținut,
câte un buton.
o Primul panou se va popula pe măsură ce mai multe simptome sunt selecta te de
utilizator, fie din lista simptomelor de pe prima coloană, fie din simptomele unei
anumite părți ale corpului din a doua coloană.
o Al doilea panou se va popula cu posibilele boli, după ce utilizatorul selectează
simptomele și apasă butonul Diagnostic . Când o boală este selectată, iar butonul
Detalii Boala este apăsat, aplicația redirecționează utilizatorul către pagina Lista Boli
unde primește informații despre boala selectată.

49
Capitolul 5 – Rezultate și concluzii

Mediul ASP.NET MVC oferă de zvoltatorilor de aplicații web toate elementele și controalele
necesare. Complexitatea acestora se schimbă atât în funcție de arhitectura folosită, cât și prin ceea ce
doresc să îndeplinească. Din punct de vedere al dificultății în dezvoltare putem alege î ntre o
dezvoltare rapidă, dar care presupune generare automată a codului (cazul Web Forms) – un cod greu,
dacă nu imposibil de descifrat în cazul în care se dorește îmbunătățirea aplicației în viitor – și o
dezvoltare mai lentă, structurată, ușor de înțele s (cazul MVC). Deasemenea cantitatea de cod generată
automat de ASP.NET Web Forms îngreunează utilizatorul, făcând ca relația cu serverul să fie mai
lentă.
Aspectul cel mai important al mediului ASP.NET MVC l -am înțeles abia la finalul acestui proiect.
Acesta fiind reprezentat prin integrarea conceptelor și tehnicilor folosite. Astfel, crearea unei aplicații
web implică același efort depus ca și pentru realizarea unui program windows standard. Acest lucru
nu poate decât să ma motiveze ca pe viitor să conti nui dezvoltarea acestei aplicații, nu doar ca o
platformă web, ci și ca o aplicație de sine stătătoare, pe care utilizatorii o vor putea descărca și instala
din magazinele online ale telefoanelor mobile și tabletelor.
O altă concluzie la care am ajuns, es te aceea că, pentru a dezvolta o aplicație în ziua de azi, pentru a
o ridica la nivelul de așteptare al posibililor clienți este nevoie de o echipă, nu doar de o singură
persoană. Arhitectura ASP.NET MVC oferind posibilitatea ca cel puțin trei pers oane să lucreze la o
aplicație.
Bibliografie

1. ASP.NET overview , https://docs.microsoft.com/en -us/aspnet/overview , accesat la data:
23.01.2017
2. C# and its Feeatures , http://www.c -sharpcorner.com/article/C -Sharp -and-its-features/ ,
accesat la data: 23.01.2017
3. Introduction to C# Language and the .NET Framework , https://docs.microsoft.com/en –
us/dotnet/csharp/getting -started/introduction -to-the-csharp -language -and-the-net-
framework , accesat la data 08.05.2017
4. JavaScript, https://ro.wikipedia.org/wiki/JavaScript , accesat la data: 08.05.2017
5. CSS in ASP.net, https://www.codeproject.com/Articles/667476/CSS -in-ASP-net, acce sat la
data: 08.05.2017
6. ASP.NET – Introduction to Web Forms and MVC,
https://www.slideshare.net/bilalamjad4/aspnet -introduction -to-web-forms -and-mvc, accesat
la data: 15.05.2017
7. Introduction to ASP.NET and Web Forms, https://msdn.microsoft.com/en –
us/library/ms973868.aspx , accesat la data: 15.05.2017
8. ASP.NET MVC Overview, https://msdn.microsoft.com/en –
us/library/dd381412(v=vs.108).aspx , accesat la data: 17.05.2017
9. ASP.NET Data Acess Options, https://msdn.microsoft.com/en –
us/library/ms178359.aspx#dbfmfcf , accesat la data: 19.06.2017
10. Webforms vs MVC and Why MVC is better ?.,
https://www.codeproj ect.com/Articles/821275/Webforms -vs-MVC -and-Why -MVC -is-
better , accesat la data: 24.08.2017
11. What is a Web Application, https://www.maxcdn.com/one/visual -glossary/web -application/ ,
accesat la data: 26.08.017

50

51
Anex a 1 – Codul CSS

/* CSS Document */
#header{
background -color:#13552F;
color: #8CA406;
}
#imagine -bebe{
padding:15px;
align-items: flex-end;
min-width: 300px;
max-width:350px;
}

#titlu {
padding-top: 80px;
text-align:center;
}

#titlu a {
color: #8CA406
}

#titlu a:hover{
color:white;
text-decoration : none;
}

#navbar-top{
background -color: #13552F;
border:none;
}

#navbar-top a{
height:40px;
color: #8CA406;
width: inherit;
}

#navbar-top a:hover {
color: white;
}

#navbar-top .navbar-inverse{
background -color: #13552F;
}

#navbar-top .navbar-active{
background -color: #011664;
margin-top: 5px;
}

.navbar-active {
background-color: #011664;
}

#navbar-top a.navbar -active{
padding-top: 10px;
}

#navbar-top .navbar-active:hover {
background : #060547;
}

52

#bottom-navbar{
height: 60px;
padding: 10px;
}

#bottom-navbar p{
color: white;
margin-top: 10px;
}

#dropdown a{
background -color: #13552F;
}
#dropdown .dropdown -menu{
background -color: #13552F;
text-align: center;
}

#dropdown .dropdown -menu a{
padding-top: 10px;
}

#title {
text-align: center;
}

/* Lista Boli */

.dropdown.dropdown -lg .dropdown -menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important ;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last -child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last -child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

@media screen and (min-width: 768px) {
#adv-search {
width: 500px;
margin: 0 auto;
}
.dropdown.dropdown -lg {
position : static !important ;

53
}
.dropdown. dropdown -lg .dropdown -menu {
min-width: 500px;
}
}

/*Lista Simptome*/

#Checkboxes {
max-height: 200px;
width:400px;
OVERFLOW -Y: scroll;
overflow -x: hidden;
}

.panel-footer {
text-align: center;
margin-bottom: 0px;
}

Anexa 2 – Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device -width, initial -scale=1.0">
<title>@ViewBag.Title – Pediatrul Tau </title>
@Styles.Render( "~/Content/css" )
@Scripts.Render( "~/bundles/modernizr" )
</head>
<body style="padding-bottom: 70px">
<div class="container -fluid">
<div id="header" class="row">
<div class="col-md-4" ><img
src="/Content/Images/ImgResponsive_Placeholder.jpg" )" class="img-circle img-responsive"
alt="imagine bebe" id="imagine -bebe"></ div>
<div id="titlu" class="col-md-4 col-md-offset-
4"><h1>@Html.ActionLink( "PediatrulTau" , "Index", "Home")</h1></div>
</div>
</div>

<div id="navbar -top" class="contain er-fluid">
<nav class="navbar navbar -inverse nav -justified">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<div class="navbar -header">
<button type="button" class="navbar -toggle collapsed" data-
toggle="collapse" data-target="#dropdown" aria-expanded ="false">< span class="sr-only">Toggle
navigation </span><span class="icon-bar"></span><span class="icon-bar"></span><span
class="icon-bar"></span></button>
</div>
<!– Collect the nav links, forms, and other content for toggling –>
<div class="collapse navbar -collapse" id="dropdown">
<ul class="nav navbar -nav">
<li>@Html.ActionLink( "Acasa", "Index", "Home")</li>
<li>@Html.ActionLink( "Diagnostic" , "Index", "Symptoms" )</li>
<li>@Html.ActionLink( "Lista Boli" , "Condition" , "Conditions" )</li>
<li>@Html.ActionLink( "Spital" , "Index", "Hospital" )</li>
<li>@Html.ActionLink( "Contact" , "Contact" , "Home")</li>
</ul>
@Html.Partial( "_LoginPartial" )

54
</div>
<!– /.navbar-collapse –>
</div>
<!– /.container -fluid –>
</nav>
</div>

<div class="container body -content">
@RenderBody()

<nav id="bottom -navbar" class="navbar navbar -inverse navbar -fixed-bottom">
<div class="container">
<div class="nav navbar -nav">
<p>&copy;Licenta 2017 Bogdan Ungureanu </p>
</div>
<div class="nav navbar -nav navbar -right">
<a href="#"><img src="/content/images/ui/icon_facebook.png" width="33"
height="33" alt="" /></a>
<a href="#"><img src="/content/images/ui/icon_twitter.png" width="33"
height="33" alt="" /></a>
<a href="#"><img src="/content /images/ui/icon_google.png" width="33"
height="33" alt="" /></a>
</div>
</div>
</nav>
</div>

@Scripts.Render( "~/bundles/jquery" )
@Scripts.Render( "~/bundles/bootstrap" )
@RenderSection( "scripts" , required: false)
</body>
</html>