Licenta Andreibarbu V2 [606256]

UNIVERSITATEA DIN BUCUREȘTI
FACULTATEA DE MATEMATIC Ă ȘI INFORMATICĂ
SPECIALIZAREA INFORMATICĂ

Lucrare de licență
APLICAȚIE WEB PENTRU MANAGEMENTUL
ARTICOLELOR

Coordonator științific Absolvent: [anonimizat]. univ. dr. Boriga Radu Barbu Andrei -Octavian

București , iunie 2019

CUPRINS

Introducere ………………………….. ………………………….. ………………………….. …………. 1
1. Arhitectura aplicației ………………………………………………………….. ………………………… …3
1.1 Arhitectura Web………………… ……………………………………………………………………….3
1.1.1 Arhitectura 3 -straturi ………………………………………………………………….. ….4
1.1.2 Beneficiile aplica țiilor……………………………………………………………….. …..4
1.2 Ș ablonul MVC…………………… …………………………………………… .….4
1.3 Diagrame……………………………………………………………………………………………. ……..6
1.3.1 Cazuri de utilizare……………………………………………………….. ……….. ………6
1.3.2 Diagrama de stări…………………………………………………………………. ……….7
1.3.3 Baza de date a aplicației ……………………………. …………………………. ………..8
1.4 Refactorizarea…………………………………………………………………………………. …………9
2. Tehnologiile și implementarea aplicației………………………………………………… ………..11
2.1 Tehnologii……………………………………………………………………………. ………. …………11
2.1.1 ASP.NET MVC……………………………………………………………….. ………….11
2.1.2 Entity Framework………………………………….. ……………………….. …………..13
2.1.3 Limbajul C#…………………………………………………………………… ……………15
2.1.4 HTML………………………. …………………………………………………. …………….18
2.1.5 CSS…………………………………………………………………………….. ……………..19

2.1.6 JavaScript…………………………………… ……………………….. ………………………20
2.1.7 LINQ………………………………………… ………………………… ………………………22
2.1.8 Bootstrap………………………………….. …………………………. ………………………22
2.2 Implementare…………………………… …………… ………………………….. ………………………23
2.2.1 Gestionarea drepturilor autorilor.. …………………………… ………………………23
2.2.2 Meniul administratorului…………. …………………………….. ……………….. ……24
2.2.3 Crearea articolelor…………………. ………………………………. ……………….. …..24
2.2.4 Editarea articolelor……………….. ……………………………….. …………… ……….26
2.2.5 Ștergerea articolelor…………….. ……………………………….. ……………… ……..26
2.2.6 Filtra rea articolelor …………. ………………………………………… …………. ………27
2.2.7 Pagina de detalii a articolului …………. ………………………….. ………… ……….28
2.2.8 Analiza sentimentelor ………………………………………………… …………. ………29
3. Manual de instrucț iuni…. ………………………………………… …………………….. ………….. ……..36
3.1 Înregistrarea în aplicație …………………………………………………………… ………………. ….36
3.2 Articole …………………….. …………………………. …………………. ………………….. ………. ……38
3.2.1 Crearea articolelor …………………………………… ………………………….. ……….38
3.2.2 Pagina articolului ………………………………………………………………… ……….39
3.2.3 Adăugarea comentarilor………………………………………………………… ………40
3.2.4 Filtrarea articolelor………………………………………………………. ……….. ……..41
3.3 Meniul administratorului ………………………………………………………………… ………….42
Concluzii ……………………………………………………………………………………………………….. 44
Bibliografie ……………………………………………………………………………………………………. 45

1

INTRODUCERE

Termenul internet provine din împreunarea artificială și parțială a două cuvinte
englezești : interconnected = interconectat și network = rețea [9]. Internetul este un ansamblu
global de rețele de calculatoare care sunt interconectate și care utilizează protoco ale de internet
(TCP / IP) pentru conectarea dispozitivelor din întreaga lume. Este o rețea cu mai multe tipuri de
rețele, cum ar fi : academice, publice, de afaceri, guverna mentale, private, conectate de un set larg
de tehnologii de rețea wireless, optice si electronice. De asemenea, internetul dispune de o gamă
largă de servicii de informare ș i resurse (documente hipertext, aplicații World Wide Web,
telefonia, distribuirea fișierelor) [13].
Datorită faptului că tehnologia este extrem de dezvoltată în zilele noastre, utilizatorii de
toate vârstele caută metode cât mai simple și mai modern e pentru a duce la final acțiun ile sale.
Astfel, cu cât sunt mai puțini pași până la îndeplini rea nevoilor utilizatorilor, cu atât calea
utilizată este mai satisfăcătoare pentru aceștia. În ultimii ani, piața dispozitivelor s -a dezvoltat
atât de tare încât numărul aplicațiilor web este în continuă creștere.

Figura 1 : Dispozitive mobile [10]

Aplica ția de față are ca scop crearea unei comunități de utilizatori care să ofere cât mai
multe informații valabile prin intermediul unor articole create chiar de ei înșiși. Ca să se

2
îndeplinească co ndițiile de extindere a acestei comunități, aplicația poate acoperi cât mai multe
domenii, cum ar fi : alimentație, geografie, istorie, s ănătate, sport și multe altele. Pentru crearea
articolului, util izatorul poate adauga poze, tag uri, iar în cazul în care conținutul este inadecvat,
administratorul poate înlătura drepturile utilizatorului de a mai scrie articole în această platformă.
Un concurent veritabil al acestei aplicații este Britannica.com
(https://www.br itannica.com/ ), un site cu cel mai de încrede re conținut după Wikipedia.org, care
are de asemenea o varietate de subiecte. Ce am adus în plus aplicației este dreptul utilizatorului
la opinie, deoarece în ziua de azi, unul din elementele care fa ce un produs de calitate este pă rerea
cât mai pozitivă a mai multor utilizatori.
Aplica ția web pentru managementul articolelor este o aplicație menită să ofere
comunității de utilizatori articole cu un conținut verificat și de calitate, aceasta acoperind o gamă
cât mai largă de categorii.
Lucrarea de față este structurată în 3 capitole. În primul capitol se prezintă arhitectura
aceste ia, modelul arhitectural prezent în aplicație (MVC), precum și diagrame de stări, cazurile
de utilizare și structura bazei de date.
În al doilea capitol se prezintă tehnologiile folosite și implementarea aplicației. Printre
tehnologii se numără ASP.NET M VC, limbajul C#, HTML, CSS, iar la implementare sunt
descrise bucăți de cod reprezentative.
Al treilea capitol reprezintă un manual de instrucțiuni unde se oferă o descriere mai
detaliată a funcționării aplicației. De asemenea, funcționalitățile care se pot adăuga sunt precizate
în capitolul ,,Concluzii ’’.

3

CAPITOLUL 1

ARHITECTURĂ

În acest capitol voi prezenta arhitectura aplicației precum ș i diagramele UML .
1.1 Arhitectura web
Internetul ține cont de niște arhitecturi specifice și structuri pentru comunicare. Cea mai
populară este arhitectura client -server, unde server -ul controleză, distribuie și găzduiește
majoritatea resurselor, exemplu putând fi serviciile utilizate de client. Toate serviciile sunt
distribuite peste o rețea. În arhitectura client -server, când clientul trimite serverului o solicitare
prin internet, serverul accepta solicitarea, o procesează și returnează clientului un pachet de date.
O caracteristică interesantă a serverului este că poate procesa mai multe solicitări care vin de la
mai mulți clienți în același timp. De asemenea, clientul se poate conecta la mai multe servere.

Figura 1.1 : Client -server [11]

4
1.1.1 Arhitectura 3 -straturi
Adam Freema n afirmă că arhitec tura 3-straturi separă codul și îl plasează într -o nouă
componentă numită ,, ddata access layer (DAL) ’’ [5]. Această arhitectură este cea mai utilizată
pentru aplicațiile de afaceri. Nu se obligă să se implem enteze User Interface -ul într -un anumit fel
și se oferă o separare fără prea multe complicații. Cu puțină grijă, DAL -ul poate fi creat astfel
încât testarea unitară să fie relativ ușoară. Se poate observa că atunci cand layer -ul User Interface
este direct conectat la un Graphical User Interface (cum se întâmplă în cazul Windows Forms
sau ASP.NET Web Forms) este aproape imposibil să se realizeze teste unitare automate .

Figura 1.2: Arhitectura 3 -straturi
În continuare voi enumera câteva avantaje ale separării unei aplicații în mai multe
straturi:
 Îți da oportunitatea de a modifica un strat fără a impacta restul straturilor.
 Permite dezvoltatorilor să lucreze în propriile domenii de expertiză.
 Se adaugă independența și fiabilitatea serverelor sau a s erviciilor.
 Se oferă o bună mentenanță a codului.

1.1.2 Beneficiile aplicațiilor web
Aplicațiile web sunt ușor de dezvoltat, de menținut și sunt mult mai folositoare pentru
utilizatori. De asemenea, ele nu sunt dependente de un sistem de operare, rulând pe ma i multe
platforme, astfel dispare prezumția de instalare a lor pe un hard disk, care aduce în discuție
limitele spațiului dispozitivului unde ar trebui sa ruleze aplicația.
1.2 Șablonul MVC
Termenul model -view -controller a fost folosit la sfârșitul anilor 1970, când a apărut în
proiectul SmallTalk de la Xerox PARC, fiind conceput ca o modalitate de organizare a unor
aplica ții GUI [5]. În MVC, modelul și controller -ul sunt separate de User Interface. Într -o

5
aplicație web asta înseamnă că HTML -ul este ținut separat de restul aplicației, lucru ce face
întreținerea și testarea mult mai ușoare.
Astfel, în termeni de nivel înalt, șablonul MVC împarte o aplicație MVC în urmatoarele
trei componente:
 Modelul, care cuprinde data cu care utilizatorul va lucra.
 View -ul, sunt folosite pentru a transmite părți din model. Practic, acesta cuprinde
interfața grafică, cea cu care interacționează utilizatorul.
 Controller -ul, care procesează solicitările, efectuează operații asupra modelului și
selectează view -ul prin care să transmită informația utilizatorului.
Așadar, fiecare parte din arhitectura MVC este bine definită și independentă, aceasta se
menționează ca ,,separation of concerns(SoC)’’. Ce manipuleaz ă data din model este conținut
doar în model , view -ul afișează elementele modelului către user și nimic mai mul t, iar controller –
ul este podul dintre model și view. Nu conteză cât de largă devine aplicația, deoarece prin acest
concept, ea va fi mereu ușor de me nținut și t estat [5].
Am ales să folosesc acest șablon din următoarele considerente :
 Procesul de dezvoltare este mult mai rapid. Cu ajutorul MVC -ului, procesul de
dezvoltare poate fi de trei ori mai rapid decât folosirea altui șablon.
 Modificările nu afectează întregul model, deoarece modelele nu depind de view –
uri.
 Pentru un model, se pot crea mai multe view -uri.
Figura 1.3: Model -View -Controller

6
1.3 Diagrame
În acest subcapitol voi prezenta diagramele aplicației, precum și structu ra bazei de date.
1.3.1 Cazuri de utilizare
Aplicația web pentru managementul articolelor are o interfață prietenoasă, foarte ușor d e
utilizat pentru orice utilizat or(editor, administrator, utilizator înregistrat, vizitator).
Un vizitator, în cazul în care nu este logat, poate vedea doar pagina principală, pagina
,,About’’, dar poate viziona și articolele înregistrate în aplicație. După înregistrare, se
redirecționează pe pagina principală.
Administratorul aplicației poate ge stiona drepturile tuturor utilizatorilor. Astfel, în cazul
în car e se dorește ca un utilizator să nu mai poată crea articole, administratorul îl elimină din
platformă. Editorii au drepturi asupra oricărui articol, în timp ce utilizatorii înregistrați au
drepturi doar asupra articolelor proprii sau a articolelor care se pot modifica fără să necesite
drepturi de editare.

Figura 1.5: Editor

Figura 1.4: Administrator

7

Figura 1.6: Cazuri utilizare

1.3.2 Diagrama de stări
În diagrama de stări se arată cazurile posibile după ce un utilizator deschide aplicația.
După ce se loghează, utilizatorul poate să își vizualizeze profilul, iar dacă dorește, există și
posibilitatea de editare a propriului profil.
Tot din profilul utili zatorului, se poate crea un articol nou. Acesta poate fi editat sau șters
doar în cazul în care utilizatorul are drepturi. Unui articol i se pot adăuga, de asemenea, și
comentarii.

8

Figura 1.7 : Diagrama de st ări
1.3.3 Baza de date a aplicației
SQL este un instrument pentru sistematizarea, gestionarea și extragerea datelor stocate de
o bază de date a unui calculator. Pentru primirea datelor din baza de date, se folosește limbajul
SQL pentru a face o solicitare. DBMS -ul procesează solicitarea SQL, pr imește data cerută, după
care se returnează. Acest proces de solicitare -primire se numește ,,query ’’ – de unde și numele de
,,Structured Query Language ’’. [7]

Beneficii SQL:
 Portabilitate
 Limbaj al bazei de date complet
 Arhitectur ă client -server
 Ușor de înțeles.

9

Figura 1.8: Baza de date
1.4 Refactorizarea
Prin refactorizarea codului se întelege procesul de schimbare a unei secvențe de program
fără a i se schimba princip iile de funcționare. Practic prin această tehnică se urmărește
îmbunătățirea structurală a unui cod existent :
 se reduce complexitatea .
 codul este mai ușor de citit și de menținut .
 codul are capacitatea de a fi extensibil.
Așadar, refactorizarea este cheia în evitarea efectelor negative , în eroziunea arhite cturii
aplicației, deoarece schimbarea și evoluția sunt niște concepte primare în acest proces de
dezvoltare software.
De exemplu, în aplicația mea am folosit refactorizarea ca să evit supraîncărcarea view –
urilor. Astfel, de fiecare dată când am avut nevoi e de afi șarea view -ului ,,SideBar’’, pentru a nu -l
scrie de mai multe ori, am creat urm ătoarea secvență de cod :

10
Figura 1.9: Refactorizare

11

CAPITOLUL 2

TEHNOLOGIILE ȘI
IMPLEMENTAREA APLICAȚIEI

2.1. Tehnologii
În acest capitol prezint tehnologiile alese pentru dezvoltarea aplicației, precum și detalii
despre implementare.
2.1.1 ASP.NET MVC
Este important să se facă diferența dintre șablonul MVC, pe care l -am prezentat în
secțiunea 1.2, și framework -ul ASP.NET MVC. Șablonul MVC nu este nou, a aparut în 1978,
dar este extrem de folosit în realizarea aplicațiilor web din următoarele considerente :
 Interac țiunea utilizatorului cu o aplicație MVC este extrem de naturală.
 Într-o aplicație w eb, sunt combinate mai multe tehnologii, care sunt împărțite în
mai multe straturi. Modelele care apar în această combinație se referă în mod
firesc la noțiunile din MVC.
Frameworkul ASP.NET M VC implementează șablonul MVC, ș i făcând asta, dă dovadă
de o bună separare a conceptelor. În continuare, voi prezenta câteva beneficii ale framework -ului
ASP.NET MVC.
Extensibilitatea: Framework -ul MVC este construit pe o serie de componente
independente care îndeplinesc condițiile unei interfețe .NET sau sunt construite pe o clasă de
bază abstractă. Acest framework îți oferă trei oportunități:
 Folosirea implement ării implicite a unei componente.
 Derivarea unei subclase a implementării implicite pentru schimbarea
comportamentului.
 Înlocuirea totală a componentei cu o implemen tare a interfeței sau a clasei de bază
abstractă.

12
Testarea: Dacă se dorește realizarea unei aplicații web testabilă, arhitectura MVC vine în
ajutor, deoarece poți împărți aplicația în mod natural în mai multe bucăți independente. Visual
Studio oferă posib ilitatea de creare a proiectelor de testare unitară, care se pot integra cu unelte
de testare unitară open source cum ar fi NUnit and xUnit, dar și cu uneltele de testare care sunt
incluse în Visual Studio.
Sistem de rutare puternic: Structura URL -urilor este extrem de importantă. În primul
rând, motoarele de căutare se uită după cuvintele găsite în URL. În al doilea rând, mulți
utilizatori înțeleg structura unui URL și apreciază opțiunea de a naviga prin simpla tastare a
URL -ului în bara de adrese a brow ser-ului. ASP.NET MVC oferă posibilitatea de creare a unor
URL -uri simple prin intermediul unei caracteristici cunoscută sub numele de ,,URL Routing ”
[5].
După cum spuneam, MVC se bazează pe separarea conceptelor. Astfel, cele mai
importante fișiere din proiect pe care le voi prezenta sunt folderele de: Models, Views,
Controllers. Folderul ,,Controllers’’ conține clasele pentru c ontroller -ele aplicaț iei. Convenția
este ca la final să apară cuvântul ,,Controller’’. În imaginea de mai jos putem observa toate
controller -ele.

Figura 2.1: Controller -ere
Controller -ul este o clasă derivată din clasa de bază System.Web.Mvc.Controller. Această
clasă conține metode publice. Structura unei metode se poate vedea în următoarea imagine.

Figura 2.2: Pagina ,,About’’

13
În folderul ,,Models’’ sunt incluse proprietăți publice care sunt folosite pentru
manipularea datelor din aplicație.

Figura 2.3: Modelele
În folderul ,,Views’’ con țin fișierele HTML pentru aplicație. Aceste fișiere au extensia
.cshtml deoarece se poate scrie cod C# si HTML. Folderul are pentru fiecare controller alte
foldere diferite. De asemenea există și așa -numitul ,,Shared’’ care con țin view -uri vizibile pentru
toate controller -ere.

Figura 2.4: View -urile

2.1.2 Entity Framework
Până la versiunea .NET 3.5, dezvolatatorii aplicațiilor foloseau ADO.NET sau Enterprise
Data Access Block pentru salvarea sau recepționarea datelor din baza de date. Se deschidea o
conexiune, se crea un DataSet pentru trimiterea datelor la baza de date, a poi avea loc convertirea
datelor din DataSet în obiecte .NET (sau invers), după care se aplicau regulile. Acesta era un
concept greșit și de cele mai multe ori era greoi, anevoios. Existând această prezumție, Microsoft
a creat cadrul ,,Entity Framework’’pe ntru ca toate aceste procese s ă fie automatizate.

14
Adam Freema n spunea că Entity Framework, sau Microsoft.NET ORM framework,
prezintă tabelele, coloanele și rândurile unei baze de date relaționale prin obiecte de tip C# [5].
Practic, această tehnologie este fol osită pentru memorarea datelor î n ASP.NET MVC și este utilă
în stabilirea relației dintre model și baza de date. Acest pachet poate fi instalat din NuGet și
suportă mai multe tehnici cum ar fi Database First , Model First, Code F irst. Astfel, aceast ă
tehnologie vine în ajutorul dezvoltatorului, deoarece acesta se poate concentra mai mult pe logica
aplicației, și nu pe conceptele de a cces la datele utilizate.
În figura de mai jos, se poate observa cum funcționează Entity Framewor k. El se află
între baza de date și BusinessLayer. Se salvează datele depozitate în proprietățile entităților și de
asemenea primește date din baza de date și automat le transformă în obiecte.
Figura 2.5: Arhitectura unei aplicații [12]
În proiect, am folosit opțiunea ,,EF Designer from database ‘’, care crează un model în
designer -ul EF bazat pe o bază de date existentă, aceasta fiind creată cu ajutorul sistemului de
gestiune a bazelor de date Microsoft SQL Server 2018.

Figura 2.6: Op țiuni Entity Framework

15
Astfel, se realizeaz ă o conexiune cu baza de date în cadrul unui model :
Figura 2.7.1: Clasa ,,ArticoleEntities’’ Figura 2.7.2 : Clasa ,,ArticoleEntities’’
Clasa de baz ă DbContext din Entity Framework este moștenită de clasa ArticoleEntities,
iar prin metodele din poza din dreapta (ArticolTags, Autors, Pozas, Tags, Comentarius,
Domenius, Articols) vom avea acces la intr ările din baza de date.
Constructorul ArticoleEnt ities() va apela constructorul clasei de bază și de asemenea va
transmite ca parametru numele unui string de conectare care este responsabil pentru conectarea
la baza de da te. Acest string este declarat î n fișierul Web.config :

Figura 2.8: Conectare
Pentru a folosi modelul cu Entity Framework, declar ăm o variabilă în felul urmator :

Figura 2.9: Variabil ă pentru folosirea modelului
2.1.3 Limbajul C#
C# este un limbaj de programare orientat pe obiecte, modern, dezvoltat de Microsoft. A
fost dezvoltat de către Anders Hejlsberg și echipa sa, care a dorit de la acest limbaj să fie unul
simplu prin intermediul căruia să se dezvolte aplicații trainice și vi guroase. Este destinat pentru
CLI (Common Language Infrastructure) care constă în codul executabil care permite utilizarea

16
mai multor limbaje de nivel înalt pe diferite platforme și arhitecturi ale calculatoarelor. Acest
limbaj este considerat profesional din mai multe considerente: este orientat pe componente, ușor
de învățat, crează programe eficiente, poate fi compilat pe mai multe platforme de calculatoare și
face parte din framework -ul .NET. De asemenea, câteva dintre caracteristicile importante sunt :
multithreading simplu, LINQ ș i lamba expresiile, integrarea cu Windows, proprietățiile și
evenimentele, eliminarea automată a memoriei ocupate de obiectele care nu mai trebuie folosite
în aplicație [4].
După cum spuneam mai de vreme, limbajul C# este în legătură cu framework -ul .NET și
este folosit pentru scrierea aplicațiilor .NET, care este o arhitectură revoluț ionară ce permite
scrierea urmă toarelor aplicații : aplicații Windows, aplicații web, servicii web. Câteva dintre
comp onentele framework -ului .NET sunt : CLR (Common Language Runtime), Windows Forms,
ADO.NET, LINQ, ASP.NET.
Datorită faptului că este limbaj orientat pe obiecte, suportă lucrul cu clase, care conțin
proprietăți și câmpuri. Cele trei tipuri de stâlpi masivi în jurul cărora se învârte programarea
orientată pe obiecte sunt: moștenirea, polimorfismul și încapsularea datelor.

Figura 2.10: Clas ă în C# [8]
Acești modificatori decid în care regiune a programului membrii pot fi accesați. Ei pot fi
protected, private, public, internal sau protected internal.

Figura 2.11 : Supra încărcare [8]

17
Supraîncarcarea metodelor este realizabilă i n C#. Astfel, în aceeaș i clasă, același nume
poate fi deținut de mai multe metode.
Există trei feluri de constructori: constructorul de instanță, metodă aparte a clasei, scopul
ei fiind de a construi obiecte noi ; constructorul implicit, sau cel de copiere, în cazul în care se
dorește o copie exactă a unui obiect. De asemenea, destructorul are rolul de a desființa instanțele
claselor. Pentru o clasă se poate defini un singur destructor.
Moștenirea, un concept solid în acest tip de programare, după cum spune am mai
devreme, crează prilejul de înființare a unei clase noi care înglobează și extinde o anumită clasă
care deja există. În poza de mai jos, Om moștenește clasa Ființă, astfel Om preia toți membri i
clasei Ființă.

Figura 2.12 : Mo ștenirea [8]
Polimorfismul, alt concept solid, constă în comportarea diferită a unei entități dintr -o
clasă, în funcție de caz. Astfel, în exemplul de mai jos, vom avea rezultatul ,,Afișare din derivat ”,
urmat de ,, Afișare din bază ”.

Figura 2.13: Polimorfism [8]

18
2.1.4 HTML
HTML a fost creat de Berners -Lee în anul 1991. Prima specificație standard HTML,
,,HTML 2.0’’ a fost însă publicată în anul 1995. Mai apoi, HTML 4.01, o versiune majoră a
HTML -ului, a fost publicată în anul 1999. Deși această versiune este extrem de folosită, în
momentul de față avem HTML -5, care a fost publicat în 2012. HTML vine de la Hypertext
Markup Language, și este cel mai folosit limbaj pentru a crea pagini Web. Hypertext se ref eră la
faptul cum paginile Web sunt legate, iar Markup Language are un nume sugestiv și sugerează
faptul că folosim HTML pen tru a marka textul cu niște tag uri. Inițial codul a fost înființat pentru
definirea structurii documentelor (liste, titluri, paragra fe etc.) tocmai pentru a veni în ajutorul
cercetătorilor care pute au să împărtășeașcă mai ușor informații științifice [1].
Motorul de afișare a view -urilor în framework -ul acesta se numește Razor. Practic, exi stă
posibilitatea de a mixa tag uri HTML cu cod C#. Pentru a începe o secvență de cod server -side se
utilizează ,,@’’.

Figura 2.14: Secven ță cod server -side
Datele trimise către View, pentru afișarea lor în browser, fie sunt primite din baza de
date, prin intermediul modelului, fie sunt trimise prin alte tipuri de date. Pentru trimiterea lor din
baza de date se folosește helper -ul ,,@model’’, iar helper -ul @ViewBag este alt ă modalitate de
transmitere a datelor.

Figura 2.15: ViewBag
ASP.NET MVC, prin intermediul motorului Razor, crează o listă de helpere care pot
genera elemente de tip HTML. Pentru afișarea valorilor modelului în elemente de tip HTML, dar
și pentru trimiterea acestora catre controller, sistemul d e binding vine în ajutorul acestor helpere.

19
Exemple de helpere sunt: @Html.TextBox, care genereaz ă element de tipul TextBox,
@Html.RadioBox, generează un radio button, @Html.ActionLink, generează un URL.
Figura 2.16: Helpere
Folosirea acestor helpere este echivalentul la scrierea manuală a codului HTML, dar
helperele oferă pe langă, posibilitatea de binding a datelor. De exemplu, codul generat pentru
secvența de mai sus este urmatoarea:
Figura 2.17: Cod HTML generat
Se poate observa c ă helperul Html.Editor a creat toate câmpurile pentru formularul de
editare. De asemenea, atributele value primesc valorile modelului automat, prin binding.

HTML este simplu de învățat și este suportat de toate motoarele de căutare. De asemenea,
este gratuit, nu este nevoie de niciun software pentru el, niciun plug -in, ceea ce înseamnă ca se
poate reduce mult din costurile pentru crearea unui site web. Un alt avantaj este că se poate
integra cu CSS, PHP , JavaScript. Nu este considerat un limbaj de programare, pentru că un
limbaj de programare presupune descrierea unor procese, în timp ce HTML -ul este o cale de a
adauga structură unui text.
2.1.5 CSS
CSS-ul (Cascading Style Sheets) este folosit pentru s tilizarea unui document web. Acest
limbaj intenționează să simplifice procesul de a face o pagină prezentabilă. Se pot controla
culorile textului, spațiile dintre paragrafe, stilul fonturilor, fundalul imaginilor.
Beneficii CSS:
 Se economise ște timp. Odată ce se scrie o bucată de cod CSS, se poate folosi în
mai multe pagini HTML. Se poate defini câte un stil pentru fiecare element
HTML și apoi se poate defini de câte ori este nevoie.

20
 Paginile se încarcă mult mai repede. Nu este nevoie să se scrie atribute HTML de
fiecare dată, deci codul este mai redus.
 Mentenanță ușoară. Dacă e nevoie să se schimbe un stil, toate elementele care au
stilul respectiv se pliază după modificări.
Pentru adăugarea rating ului, CSS -ul a venit în ajutor. Clasa starFade are ca fu ndal un gif
cu o stea de culoare pală, ce sugerează deselectarea stelei, în timp ce clasa starGlow are ca fundal
un gif cu o stea colorată, sugerând faptul că steaua a fost selectată.

Figura 2.18: Stilizarea stelelor pentru rating

2.1.6 JavaScript
JavaScript este un limbaj de programare care se poate învăța ușor. Este conceput pentru
crearea aplicațiilor centrate pe rețea. El este foarte ușor de implementat deoarece este integrat cu
Java, HTML. Implementarea limbajului acor dă scripturilor client -server să interacționeze cu
utilizatorul și să creeze pagini dinamice.
Beneficii JavaScript:

21
 Interac țiunea cu serverul mai redusă. Se poate valida intrările utilizatorului înainte
de trimiterea paginii la server, ceea ce salveză mul t trafic.
 Utilizatorii primesc feedback rapid, nu trebuie să aștepte reîmprospătarea paginii
pentru a vedea dacă au uitat să introducă un câmp.

Pentru ca utilizatorul să poată acorda rating articolelor, am creat funcții JavaScript. În
cazul funcției SubmitComment(), se verific ă dacă există rating și declanș ează o aleartă în caz
contrar. Restul funcțiilor au rolul de a colora și decolora stelele, apelând clasele amintite mai sus
în CSS.
Figura 2.19.1: Funcții rating Figura 2.19.2: Funcții rating
De asemenea, în cazul în care la crearea unui articol, doream să adaug mai multe poze
acestuia, JavaScript a devenit util prin următoarea secvență care adaugă la apăsarea butonului,
mai multe câmpuri.

Figura 2.20: Ad ăugare poze

22
Când se scrie conținut ul articolului , am preferat să mă ajut de editorul Summernote :

Figura 2.21: TextBox con ținut
2.1.7 LINQ
Prin intermediul metodei Linq (Language Integrated Query), se pot prelua și salva date.
Sintaxa este extrem de asemănătoare cu cea a SQL -ului, iar pentru folosirea sa este nevoie de
pachetul System.Linq care oferă clase și interfețe care suportă interogări.
De exemplu, în cazul filtrelor de căutare, pentru a afiș a toate arti colele care au tag ul
introdus în filtru, am procedat ca în imaginea de mai jos.

Figura 2.22: Filtrare dup ă tag uri
2.1.8 Bootstrap
Bootstrap este un framework intuitiv, elegant ca re vine î n ajutorul dezvoltării aplicațiilor
fiind ușor și rapid. Se folosește de HTML, CSS, JavaScript. Bootstrap a fost dezvoltat d e Mark
Otto și Jacob Thornton la Twit ter. A fost publicat ca un open source în August 2011 pe GitHub
[2].
Beneficii bootstrap:
 Suport pe toate motoarele de c ăutar e populare.
 Cu puține cunoștiințe de HTML și CSS, oricine poate începe cu Bootstrap, având
în vedere că inclusiv site -ul oficial are documentație bună.

23
 Design scalabil ce se poate mula pe orice dispozitiv.
 Deține componente ce pot fi customizate ușor.
 Este open -source.
În _Layout.cshtml am integrat bootstrap -ul pe care l -am folosit:

Figura 2.23.1: Integrare Bootstrap

Figura 2.23.2: Integrare Bootstrap
2.2 Implementare
2.2.1 Gestionarea drepturilor autorilor
În metoda GetAllRoles() se preiau toate rolurile existente din baza de date, după care se
utilizează în metoda EditRole(). Pentru a da doar adminului dreptul de a gestiona utilizatorii, am
utilizat filtrul [Authorize] .
Figura 2.24 .1: Editare roluri Figura 2.24.2: Editare roluri

24
2.2.2 Meniul administratorului
În cazul în care utilizatorul înregistrat este administrator, are un meniu special de unde
poate intra în pagina de gestion are a drepturilor, sau în pagina de gestionare a categoriilor din
cadrul aplicației.
Figura 2.25: Meniul a dministratorului

2.2.3 Crearea articolelor
Urmatoarea imagine prezintă codul pentru imaginea principală a unui articol. Numele
pozei este construit în funcție de data la care se adaugă poza în aplicație. În cazul în care nu se
adaugă poză, imaginea articolului va fi una implicită .

Figura 2.26: Poz ă articol

25
Următoarea secvență de cod arată cum sunt memorate imaginile articolelor.
Figura 2.27: Ata șamente articol
Pentru adăugarea tag urilor, urmatorul script este sugestiv . Se ia tag ul, iar cu ajax -ul de tip
post î l trimit metodei AddTag din controller -ul Articols, după care se introduce în baza de date.
Figura 2.28: Trimiterea tag ului la controller

26
Figura 2.29: Ad ăugare tag
2.2.4 Editarea articolelor
Pentru editare, la fel ca și la creare, am verificat rolul utilizatorului. În cazul în care
acesta nu este eligibil pentru acțiunile respective , prin intermediul unui TempData am transmis
mesajul în interfață.
Figura 2.30.1: Verificare dreptu ri
Figura 2.30.2: Verificare drepturi
2.2.5 Ștergerea articolelor
Dacă se dorește ștergerea articolului, se șterg prima dată toate intrările articolului
respectiv în tabelele cu cheia externă, după care se șterge articolul din tabela Articols.

27

Figura 2.31: Ștergere articol
2.2.6 Filtrarea articolelor
În această pagină există posibilitatea de a aplica diferite filtre de căutare după titlu,
categorie, sau taguri.

Figura 2.32: C ăutare după titlu

Figura 2.33: Căutare după categorie

28

Figura 2.34: C ăutare după tag

De asemenea, articolele se pot sorta după data creării sau după nume.

Figura 2.35: Sortare articole

2.2.7 Pagina de detalii a articolului
În această pagină sunt afișate, pe langă toate detaliile articolului, următoarele:
 Comentariile înregistrate :

29
Figura 2.36: Comentariile articolului

 Ratingul:
Figura 2.37: Ratingul articolului

 Comentariile pozitive ș i negative înregistrare :

Figura 2.38: Comentariile pozitive și negative ale articolului
2.2.8 Analiza sentimentelor
Analiza sentimentelor studiază opiniile, atitudinile și emoțiile oamenilor pentru o entitate
anume care poate fi o persoană, un subiect, sau diferite evenimente. Se f olosește pentru analiza
recenzi lor pentru anumite produse, diferitelor articole de știri, precum și dezbateri politice. Prin
sistem de recenzii și analiza sentimentală, se aduce un mare plus din următoar ele considerente :
În primul rând, un utilizator obișnuit nu ar citi un articol cu un rating foarte mic, deoarece
ar considera o pierdere de timp. Practic, primul nivel de încredere pentru un articol bun ar fi
ratingul cât mai mare.
În al doilea rând, exist ă utilizatori care consideră că un articol are un conținut potrivit și
coerent, dar nu acordă ratingul pe măsură. Așadar, am introdus și un al doilea nivel de încredere
pentru un articol bun prin analiza sentimentală a comentarilor, care pot fi împărțite î n pozitive
sau negative. Al doilea nivel de încredere pentru un articol bun este numărul cât mai mare de
comentarii pozitive. Lucrarea de față aduce o îmbunătățire a aplicațiilor de articole prin faptul că
oferă două nivele de încredere pentru cititori.

30
Pentru a acoperi o gamă cât mai largă de domenii, am creat un dataset propriu.
Acest dataset cuprinde comentarii de pe diferite aplica ții web cunoscute, cum ar fi amazon, imdb
și yelp . Pentru aflarea celui mai bun algoritm, pe datasetul meu, am luat un in put de 100 de
propoziții și am urmărit acuratețea. În continuare, voi prezenta acuratețile rezultate:

Figura 2.39: LbfgsLogisticRegression

Figura 2.40: FieldAwareFactorizationMachine
Figura 2.41 : SgdCalibrated

În urma rezultatelor, algoritmul cu acuratețea cea mai bună este SgdCalibrated. Dar asta
nu este suficient, acest algoritm, pe datasetul meu, având o acuratețe destul de mică, de 75,62%.

31
Clasificarea comentariilor fiind pozitivă sau negativă, task -ul est e un clasificator binar.
Așadar, există un generator automat pentru astfel de task -uri, care spune, pentru un anumit
dataset, care este cel mai bun algoritm. Este vorba despre ML.NET CLI, unde trebuie precizat
datasetul și task -ul de machine learning, iar CLI folosește motorul Aut oML pentru crearea
modelului. În figura 2.42 se poate observa că am rulat timp de o oră antrenarea automată cu
task-ul și datasetul corespunzătoare.
Figura 2.42: ML.NET auto -train
Prin urmare, pentru aplicația mea, pentru un nivel mai ridicat de încredere am folosit
algortimul SdcaLogisticRegression care oferă o acuratețe de 8 5,71%.

Figura 2.43: SentimentData.cs

32
Datasetul este format din propoziții (SentimentText) și un bo ol 0(negativ) sau 1(pozitiv).
Clasa SentimentPrediction este folosită după ce se antrenează modelul.
Figura 2.44: Încărcarea datasetului
Pentru încărcarea datelor, am folosit obiectul IdataView care este un mod flexibil și
eficient pentru descrierea datel or tabulare(numeric și text). Aceste date sunt încărcate din fișierul
,,amazon_imdb_yelp.txt’’.
Metoda LoadData() execut ă următoarele :
 Încarcă datele
 Separă data încărcată în dataseturi de antrenare și testare
 Returneză dataseturile de testare și antrenar e separate.
Figura 2.45: Metoda LoadData()
De asemenea, f olosesc metoda TrainTestSplit() pentru separare , apoi returnez într -o clasă
TrainTestData. Procentajul pentru setul de testare este indicat de testFraction. Implicit, el este de
10%, dar am folosit 20% pentru evaluarea mai multor date.
Metoda BuildAndTrainModel() execută următoarele :
 Extrage și transf ormă data
 Antrenează modelul
 Prezice sentimentul bazat pe setul de testare
 Returnează modelul.

33
Figura 2.46: Metoda BuildAndTrainModel()
În construirea și antrenarea modelului, am folosit metoda FeaturizeText() care transformă
textul într -o coloană de che i numerice.
Figura 2.47: Metoda FeaturizeText() [14]
După cum spuneam, aplicația folosește un algoritm de clasificare pentru analiza
comentariilor în pozitive sau negative, așadar este folosit task -ul de clasificare binară. Algoritmul
SdcaLogisticRegressionBinaryTrainer este mai apoi atașat estimatorului.
Metoda Fit() antrenează modelul prin transformarea datasetului și aplicarea antrenării. Ca
parametru, ea are datasetul de antrenare rezultat din separarea datasetul ui initial.
Metoda Evaluate() execută următoarele:
 Încarcă datasetul de test
 Crează un evaluator

34
 Evaluează modelul și crează metrics -urile
Figura 2.48: Metoda Evaluate()
Metricul de acuratețe extrage acuratețea modelului care e proporția predicțiilor corecte în
datasetul de testare.
Metricul ,, AreaUnderRocCurve ’’ indică nivelul de încredere a modelului în clasificarea
elementelor pozitive și negative. Cu cât este mai aproape de 1, cu atât este mai bine.
Metricul ,,F1Score ’’ este media armonică dintr e precizia și recall. În clasificare, precizia
este numărul de elemente prezise ca aparținând clasei împărțit la numărul total de elemente
prezise ca aparținând clasei respective. De asemenea, recall sugerează numărul de elemente
corect prezise ca aparținâ nd clasei împărțit la numărul total de elemente care aparțin clasei.
𝐹1𝑆𝑐𝑜𝑟𝑒=2∗𝑝𝑟𝑒𝑐𝑖𝑠𝑖𝑜𝑛 ∗𝑟𝑒𝑐𝑎𝑙𝑙
𝑝𝑟𝑒𝑐𝑖𝑠𝑖𝑜𝑛 +𝑟𝑒𝑐𝑎𝑙𝑙

Metoda UseModelWithSingleItem() execută următoarele:
 Prime ște ca parametru un comentariu
 Prezice sentimentul bazat pe datasetul de testare
 Combină datasetul de testare cu predicțiile
 Afisează rezultatul

35
Figura 2.49: Metoda UseModelWithSingleItem()
Integrarea am făcut -o cu ajutorul unui proces.
Figura 2.50: Integrarea în proiect

36

CAPITOLUL 3

MANUAL DE INSTRUCȚIUNI

În acest capitol, prezint un manual de instrucțiuni al aplicației web pentru managementul
articolelor.
Figura 3 .1: Pagina principal ă
3.1 Înregistrarea în aplicație
Majoritatea aplicațiilor web dispun de funcționalitatea de înregistrare și conectare. Am
introdus această funcționalitate în aplicația de față pen tru ca utilizatorii să poată adă uga, edita,
șterge articole. De asemenea, pentru a -și putea exprima punctul de vedere prin ad ăugarea
comentari ilor, utilizatorul t rebuie să fie conectat. Figura 3.2 și figura 3 .3 prezintă formularele de
conectare și înregistrare.

37

Figura 3.2 : Pagina de conectare
Utilizatorul poate să -și creeze o pagina de profil, care este ilustrată în figura 3 .4, de unde
își poate vedea articolele proprii, descrierea sa. Această pagină poate fi editată și vizualizată și de
alți utilizatori. După ce se crează contul, utilizatorul este redirecționat către pagina principală de
unde poate naviga către diferite articole.

Figura 3 .3: Pagina de înregistrare

38

Figura 3 .4: Pagina de profil
3.2 Articole
Entitatea principală a aplicației fiind articolele, prezint acțiunile ce pot fi executate pentru
un articol.
3.2.1 Crearea articolelor
Un articol se poate crea după ce se intră pe pagina personală a profilului. Aici utilizatorul
introduce câmpurile necesare, precum titlu, categorie, conținut, imaginile articolului, precum ș i
tagurile corespunzătoare. Acesta are opțiunea de a lasa și alți utilizatori să e diteze a rticolul său.
Figurile 3.5.1 și 3 .5.2 ilustrează crearea unui articol.

Figura 3 .5.2: Crearea articolului

Figura 3 .5.1: Crearea articolului

39
După apăsarea butonului ,,Next ”, se redirec ționează către pagina de adă ugarea a
tagurilor , ilustrată în figura 3 .6.
Figura 3 .6: Adăugarea tag urilor
3.2.2 Pagina articolului
După creare, se redirecționează către pagina principală a articolului. Aplicația folosește o
alertă pentru a înștiința utilizatorul de evenimentele create.
Figura 3 .7: Pagina articolului

40
3.2.3 Adăugarea comentarilor
Trăim într -o lume în care fiecare are dreptul la opinie. Ba mai mult, opinia utilizatorului
poate veni în ajutorul restul utilizatorilor. Figura 3 .8 ilustrează faptul că aplicația are opțiunea de
a lăsa utiliza torul să -și exprime opinia. Acesta poate adăuga articolului rating de la unu la cinci
stele, după care urmează textul comentariului. Pentru o clarificare și mai bună, aplicația
analizează textul și îl încadrează ca fiind pozitiv sau negativ (figura 3.9).

Figura 3 .8:
Adăugarea
comentari ilor

Figur a 3.9: Tipul de comentariu al utilizatorului

41
3.2.4 Filtrarea articolelor
În partea dreaptă, utilizatorul are opțiunea de a filtra articole le după categorie, sau după
tagurile pe care le are un articol. Astfel, apasând un element din figura 5.10, utilizatorul este
redirecționat către o pagină care conține toate articolele care îndeplinesc filtrele setate.

Figura 3.10: Filtrare după categorie sau tag
De asemenea, se poate căuta după titlu. Aplicația mai dispune și de opțiunea de a afișa
articolele sortate după dată sau după titlu.

Figura 3 .11:
Filtre căutare
sau sortare

42

În pagina principală, sunt afișate cele mai recente articole:
Figura 3.12: Cele mai recente articole
3.3 Meniul administratorului
Administratorul are posibilitatea de a revoca anumite drepturi, sau pentru a acorda
anumite drepturi utilizatorilor. De asemenea , el este responsabil pentru adă ugarea sau ștergerea
categoriilor.

Figura 3 .13: Meniul administratorului
În cazul în care acesta dorește să gestioneze drepturile, după apăsarea opțiunii ,,User
management’’ el este redirec ționat că tre pagina ilustrată în figura 3 .14.

43
Figura 3 .14: Utilizatorii aplica ției
După apăsarea butonului ,,Show user’’, administratorul poate schimba tipul utilizatorului.

Figura 3 .15: Selectarea rolului utilizatorului
În cazul în care administratorul dorește să gestioneze catergoriile, după apăsarea opțiunii
,,Categories management’’, el este redi recționat către pagina ilustrată în figura 3.16.
Figura 3 .16: Gestionarea categoriilor

44

CONCLUZII

Aplica ția web pentru managementul articolelor este o aplicație menită să adune o
comunitate cât mai mare de utilizatori care pot citi articole cu un co nținut verificat și de calitate,
aceasta acoperind o gamă cât mai largă de categorii.
Proiectul are ca bază arhitectura Model View Controller, sau MVC. Aceste componente
ale modelului sunt implementate cu ajutorul limbajului C#. Pentru îmbunătățirea compo nentei
View, sunt integrate Bootstrapul, JavaScriptul și CSS -ul.
Aplicația permite adăugarea, editarea, ștergerea articolelor. La creare, utilizatorul
introduce titlul, categoria și conținutul. Există , de asemenea, opțiunea ca utilizatorul să acorde și
altora dreptul de editare la propriul articol. Imaginile întotdeauna contribuie la aspectul vizual,
tocmai de aceea, se pot adăuga poze fiecărui articol. Pentru a evidențierea fiecărui articol într -un
anume domeniu, aceste expuneri scrise au categorii și t otodată se pot eticheta cu diverse tag uri.
Desigur că lucrării de față i se pot adăuga îmbunătățiri. De exemplu, prin faptul că
aplicația de față se bazează pe analiza sentimentelor, se poate crea un program care analizează
conținutul fiecărui articol. As tfel, articolele care tind spre obscenitate, rasism sau alte părți
negative să nu poată fi adăugate în platform a. O altă modalitate de îmbunătățire ar fi ca atunci
când utilizatorul introduce imaginile articolului, să existe implementat un algoritm de inte ligență
artificială care să recunoască diferite obiecte din poză, acestea fiind posibile taguri. Astfel,
introducere manuală a tagurilor ar fi eliminată.
În concluzie, aplicația web pentru managementul articolelor, devine un mediu online
propice, care cu ajutorul tehnologiilor moderne, este o unealtă potrivită utilizatorilor dornici de
cunoaștere.

45

BIBLIOGRAFIE

[1] TutorialsPoint . HTML hypertext markup language . www.tutorialspoint.com , 2015 .
[2] TutorialsPoint. Bootstrap tutorial. www. tutorialspoint.com .
[3] Marijn Haverbeke. Eloquent JavaScript. No Starch Press , 3rd edition, 2018.
[4] TutorialsPoint . C# Programming . www.turorialspoint.com , 2014
[5] Adam Freema n. Pro ASP.NET MVC 5. Apress, 2013.
[6] Adam Freeman, Joseph C. Rattz, Jr . Pro LINQ Language Integrated Query in C# 2010 .
Apress, 2010.
[7] James R. Groff, Paul N. Weinberg. SQL: The complete Reference, Second Edition. The
McGraw -Hill Companies, Inc, 2002.
[8] Constantin Gălățan, Susana Gălățan. Curs de C#. L&S Info -mat, 2008.
[9] Wikipedia. Internet , May 2019.
https://ro.wikipedia.org/wiki/Internet
[10] Akash J. UI/UX – How They Make The Difference .
https://www.travancoreanalytics.com/uiux/
[11] Client -server
https://www.w3schools.in/wp -content/uploads/2019/01/client -server.jpg
[12] Arhitectura unei aplicații
https://www.entityframeworktutorial.net/images/basics/e f-in-app-architecture.png
[13] Wikipedia . Internet.
https://en.wikipedia.org/wiki/Internet

46
[14] Metoda FeaturizeText
https://docs.microsoft.com/en -us/dotnet/machine -learning/tutorials/sentiment -analysis