UNIVERSITATEA “TITU MAIORESCU” DIN BUCUREŞTI

FACULTATEA DE INFORMATICĂ

LUCRARE DE LICENŢĂ
Proiectarea unui minisite de învățare a algoritmilor
de căutare și sortare

COORDONATOR ȘTIINȚIFIC:

Conf. univ. dr. Daniela Joița

ABSOLVENT:

Petre-Horia Cărpenișeanu

SESIUNEA IUNIE – IULIE

2020
UNIVERSITATEA TITU MAIORESCU
FACULTATEA DE INFORMATICĂ
DEPARTAMENTUL DE INFORMATICĂ

REFERAT
DE APRECIERE A LUCRĂRII DE LICENȚĂ
TITLU: Proiectarea unui minisite de învățare a algoritmilor de căutare și sortare
ABSOLVENT: Cărpenișeanu Petre-Horia
PROFESOR COORDONATOR: Conf. univ. dr. Daniela Joița

Referitor la conținutul lucrării, fac următoarele aprecieri:

A. Conținutul științific al lucrării 1 2 3 4 5 6 7 8 9 10

B. Documentarea din literatura de specialitate 1 2 3 4 5 6 7 8 9 10
C. Contribuția proprie 1 2 3 4 5 6 7 8 9 10
D. Calitatea exprimării scrise și a redactării lucrării 1 2 3 4 5 6 7 8 9 10
E. Conlucrarea cu coordonatorul științific 1 2 3 4 5 6 7 8 9 10
F. Realizarea aplicației practice 1 2 3 4 5 6 7 8 9 10
Punctaj total = (A+B+C+D+E+2F)/7

În concluzie, consider că lucrarea de licență/disertație întrunește/ nu întrunește condițiile

pentru a fi susținută în fața comisiei pentru examenul de licență/disertație din sesiunea iunie-
iulie 2020 și o apreciez cu nota___________________.
CONDUCĂTOR ȘTIINȚIFIC,
______________________________
 Cuprins

Introducere ............................................................................................................................... 5

Capitolul I. Algoritmi de căutare și sortare........................................................................... 6

1. Despre algoritmi.............................................................................................................. 6
2. Proprietăți ale algoritmilor .............................................................................................. 6
3. Sortarea ........................................................................................................................... 6
3.1. Metode directe de sortare ........................................................................................ 7
3.1.1. Sortarea prin metoda bulelor (Bubble Sort) ..................................................... 7
3.1.2. Sortare prin selecție (Selection Sort) ................................................................ 8
3.1.3. Sortarea prin inserție (Insertion Sort) ............................................................... 9
3.2. Metode avansate de sortare.................................................................................... 11
3.2.1. Sortare rapida (Quick Sort) ............................................................................ 11
3.2.2. Sortare prin interclasare (Merge Sort) ............................................................ 13
4. Căutarea ........................................................................................................................ 16
4.1. Căutarea secvențială .................................................................................................. 16
4.2. Căutarea binară .......................................................................................................... 18
Capitolul II. Tehnologii și medii de programare folosite pentru realizarea aplicației .... 20

1. Medii de programare ..................................................................................................... 20

1.1. Visual studio 2019 ................................................................................................. 20
1.2. Microsoft SQL Server ........................................................................................... 21
1.3. SQL Server Management Studio ........................................................................... 21
2. Tehnologii folosite ........................................................................................................ 22
2.1. .NET Framework ....................................................................................................... 22
2.2. ASP.NET ............................................................................................................... 24
3. Limbaje de programare ................................................................................................. 25
3.1. C Sharp (C#) ............................................................................................................ 25
3.2. HTML (Hypertext Markup Language) .................................................................. 27
3.3. JavaScript............................................................................................................... 33
3.4. CSS (Cascading Style Sheets) ............................................................................... 36
Capitolul III. Descrierea site-ului (Algoritmi de căutare și sortare) ................................. 39

1. Conexiunea la baza de date ........................................................................................... 39

 2. Sistemul de înregistrare................................................................................................. 40
3. Sistemul de conectare ................................................................................................... 44
4. Mediul de învățare ........................................................................................................ 47
5. Mediul de testare ........................................................................................................... 48
6. Design ........................................................................................................................... 49
Concluzii ................................................................................................................................. 54

Bibliografie ............................................................................................................................. 55
 Introducere

Lucrarea intitulată Proiectarea unui minisite de învățare a algoritmilor de căutare și sortare

își propune realizarea unui site unde utilizatorii să își poată îmbogăți bagajul de cunoștințe pe
subiectul algoritmilor de căutare și sortare, iar la final, aceștia să își poată testa și pune la punct
greșelile.
Conținutul lucrării scrise își propune să prezinte toate informațiile folosite pentru realizarea
aplicației (site-ului).
În acest sens, în primul capitol au fost abordate definiții și teorii despre algoritmii de căutare și
sortare unde au fost prezentate fiecărui algoritm în parte proprietățile si complexitatea, dar și
implementarea fiecărui algoritm, pe care o putem găsi și pe site.
În capitolul al II-lea, este realizată o prezentare a tehnologiilor și mediilor de programare
folosite pentru realizarea aplicației.
Capitolul al III-lea reprezintă o descriere generala a aplicației practice, și anume a site-ului
intitulat Algoritmi de căutare și sortare. Site-ul conține un mediu de învățare a algoritmilor de
căutare și sortare și un mediu de testare a cunoștințelor. În acest capitol se vor găsi informații
despre conexiunea la baza de date, sistemul de înregistrare, sistemul de conectare, mediul de
învățare, mediul de testare, etc.
În conținutul lucrării se pot găsi și câteva concluzii personale despre lucrarea aceasta, unde au
fost expuse și câteva gânduri de viitor referitoare la acest site.
La finalul lucrării, a fost atașată bibliografia utilizată pentru realizarea acestei lucrări. Acolo
se pot găsi toate sursele folosite, de la cărți până la link-uri ale diferitelor site-uri.

5
 Capitolul I. Algoritmi de căutare și sortare

1. Despre algoritmi
Un algoritm reprezintă o metoda sau o procedură de calcul ce se bazează pe mai mulți pași
elementari necesari pentru finisarea unei probleme ce aparține unui tipar, precum este descris
în lucrarea 1. Un algoritm este implementat în mod concret prin programarea adecvată a unui
calculator, sau a mai multora.
Informatica este fondată pe baza algoritmilor, aceștia fiind noțiunea fundamentală a acestui
domeniu.

2. Proprietăți ale algoritmilor

• Corectitudinea – Algoritmul trebuie să se bazeze pe fapte și relații matematice
demonstrabile, astfel încât soluția furnizată să fie corectă.
• Caracterul univoc sau determinist – Executarea algoritmului de mai multe ori trebuie
să ducă întotdeauna la același rezultat.
• Generalitatea – Este proprietatea algoritmului de a rezolva o categorie de probleme, și
nu doar o problemă particulară.
• Claritatea – Pașii ce trebuie parcurși pentru rezolvarea problemei trebuie descriși fără
ambiguități, cu exactitate.
• Verificabilitatea – Fiecare pas al algoritmului trebuie să poată fi verificat de om, într-
un timp rezonabil.
• Optimalitatea – Algoritmul trebuie să se termine după un număr minim de pași.
• Finitudinea – Algoritmul trebuie să se termine într-un număr finit de pași.
• Eficiența – Algoritmul trebuie să se termine într-un număr finit și rezonabil de pași.
• Existența unei intrări – Un algoritm trebuie să aibă operanzi.
• Existența unei ieșiri – Un algoritm trebuie să aibă un rezultat.

3. Sortarea
În lucrarea 2 putem găsi faptul că algoritmii de sortare sunt unele dintre cele mai utilizate și
uzuale metode de programare. Aceștia sunt utilizați la diferite domenii de activitate, de la

1
Robert Sedgewick, Kevin Wayne (2011), Algorithms
2
D. Knuth (2002), Arta programării calculatoarelor, vol 3: Sortare și căutare
6
matematică (statistică matematică), la limbi (realizarea dicționarelor). Acesta este principalul
motiv pentru care este bine să găsim algoritmul potrivit și să ne folosim de avantajele acestora
pentru câștigul nostru.
Metodele de sortare se pot împarți în metode directe și metode avansate.
• Metodele directe au la bază algoritmi de dificultate redusă, ușor de înțeles și de găsit.
Dintre acestea amintim metoda sortării prin selecție (Selection Sort), metoda sortării
prin inserție (Insert Sort) și metoda sortării cu bule (Bubble Sort).
• Metodele avansate au la bază algoritmi puțin mai complicați, dar ce nu necesită
cunoștințe avansate pe domeniul algoritmicii. Dintre acestea amintim metoda sortării
rapide (Quick Sort) și metoda sortării prin interclasare (Merge Sort).

3.1. Metode directe de sortare

3.1.1. Sortarea prin metoda bulelor (Bubble Sort)

Metoda Bubble Sort este o metodă de sortare simplă ce nu necesită cunoașterea avansată a
limbajului de programare. Poate fi folosită cu succes de persoane mai puțin avansate în
domeniul programării. Aceasta se rezumă la compararea fiecărui element cu celelalte, realizând
o interschimbare acolo unde elementul mai mare are indexul mai mic.

Proprietăți
• Este o modalitate de sortare simpla și eficientă pentru un număr mic de elemente.
• Nu necesită memorie multă, dar este de doua ori mai lentă decât sortarea prin inserție
(Insertion Sort) în aproape orice situație.
• Timpii de execuție depind de ordinea inițială a tabloului.
• Este nevoie doar de un pas dacă tabela este deja sortată. N-1 comparări.
• Este nevoie de n*(n-1)/2 comparări și tot atâtea interschimbări în cel mai nefavorabil
caz.

Implementare C++
1 bool sorted;
2 do {
7
 3 sorted = true;
4 for (int i = 1; i < n; i++)
5 if (v[i] > v[i + 1]) {
6 int aux = v[i];
7 v[i] = v[i + 1];
8 v[i + 1] = aux;
9 sorted = false;
10 }
11 } while (!sorted);

Complexitate
Bubble Sort este un algoritm simplu și ușor, dar este foarte ineficient în același timp. În cel mai
rău scenariu, acesta face O(n2) pași. Un n vine de la numărul iterațiilor din for, iar celălalt n din
cadrul do while. Cazul nefavorabil este vectorul deja sortat descrescător (în ordinea opusă celei
în care vrem să fie sortat).

3.1.2. Sortare prin selecție (Selection Sort)

Sortarea prin selecție se consideră a fi cea mai bună metodă de sortare cu complexitatea O(n2),
fapt ce se datorează numărului redus de interschimbări efectuate de algoritm.

Algoritm
Parcurgem tabloul de la poziția m până la n pentru a stabili minimul cât și poziția lui, iMin. La
pasul m, minimul stabilit este al m-lea cel mai mic număr din tablou. Acesta trebuie să se afle
pe poziția m. Drept urmare, interschimbăm v[m] și v[iMin]. Incrementăm m-ul și repetăm
procesul de n-1 ori, pentru că după ultimul pas, rămâne de sortat doar ultimul element, care nu
poate fi deja decât unde trebuie.

Proprietăți
• Cel mai mult timp se folosește la căutarea elementului minim din partea nesortată a
tabloului.

8
 • Algoritmul este simplu, la fiecare pas „i” este căutat minimul dintre a[i+1], a[i+2]...a[n]
și se interschimbă cu a[i].
• La fiecare pas se realizează o interschimbare, numărul total al interschimbărilor pentru
n elemente fiind n-1.

Implementare C++
1 for (int m = 1; m < n; m++)
2{
3 int min = v[m], iMin = m;
4 for (int i = m + 1; i <= n; i++)
5 if (v[i] < v[iMin])
6 {
7 min = v[i];
8 iMin = i;
9 }
10 int aux = v[m];
11 v[m] = v[iMin];
12 v[iMin] = aux;
13 }

Complexitate
Primul for al sortării prin selecție este utilizat de n-1 ori, iar la fiecare iterație sunt efectuați n-
m+1 pași pentru aflarea minimului. Așadar, complexitatea este de ordinul O(n2).

3.1.3. Sortarea prin inserție (Insertion Sort)

Metoda sortării prin inserție este una simpla, utilizata în momentul în care ordonăm cărțile la
jocuri de cărți: selectăm o carte din mana și o plasăm pe poziția sa corectă, astfel încât toate
cărțile din mână să fie ordonate.

9
Algoritm
Insertion Sort inserează fiecare element din tabloul inițial într-un alt tablou de ieșire pe locul
potrivit. Pentru fiecare i = 2..n, elementele a[l]...a[i] sunt sortate prin inserarea lui a[i] între lista
a[l]...a[i-l], care este deja sortată. Elementele aflate în stânga indexului sunt sortate deja, dar nu
sunt așezate pe poziția lor finala. Putem spune că tabela este sortată complet în momentul în
care indexul ajunge la capătul drept al tabelei.

Proprietăți
• Sortarea prin inserție este o metodă de sortare liniară O(n) pentru tabelele ce conțin N
elemente aproape sortate.
• Timpul de execuție al metodei de sortare depinde de numărul total al inversărilor, deci
de ordinea inițială a elementelor.
• În general, sunt necesare N 2/4 comparații si interschimbări, N 2/8 deci ordinea
magnitudinii este O(n2).

Implementare C++
1 for(i=1;i<=n;i++)
2{
3 k=1;
4 x=v[i]
5 While(x>v[k])
6 k=k+1;
7 for(j=i-1;j>=k;j--)
8 v[j+1]=v[j];
9 v[k]=x;
10 }

Complexitate
Complexitatea algoritmului de sortare prin inserție este O(N).

10
 3.2. Metode avansate de sortare

3.2.1. Sortare rapida (Quick Sort)

Metoda sortării rapide este una dintre cele mai folosite și rapide până în acest moment,
bazându-se pe tehnica „Divide et Impera”. Sortarea rapidă se realizează într-o funcție ce
poziționează un element din șir drept pivot, pe poziția finală, pe care se va afla acesta în șirul
final, sortat și deplasează elementele șirului mai mici decât acesta în fața sa, iar pe cele mai
mari după el. Procedeul se reia pentru ambele subșiruri rămase nesortate.

Algoritm
Se dă un tablou cu n elemente. Sortarea acestuia decurge astfel:
Se prelucrează secvența ce aparține vectorului, cuprinsă intre indecși p si u.
• Se consideră un element dintre aceste componente pivot, fie pivot = v[p]
• Se realizează interschimbări, urmărind ca elementele mai mici să se afle în stânga
pivotului, iar cele cu valoare mai mare sa treacă în dreapta. Astfel, se va deplasa și
valoarea pivot, așezându-se pe o poziție corespunzătoare. În urma acestei operațiuni,
elementele din stânga pivotului nu vor fi sortate, nici cele din dreapta.
Continuăm operațiunea aplicând metoda pentru zona tabloului situată in stânga, cât și în
dreapta. Oprirea operațiunii se face atunci când lungimea zonei de tablou ce necesită sortarea
este egală cu 1.

Proprietăți
• Un element v[q] cu proprietățile:
o v[q]>=v[i]
o v[q]<=v[i]
este denumit pivot.
• Un pivot este un element al șirului aflat pe poziția finală.
• Un pivot bun divizează tabloul curent în două sub tablouri egale ca dimensiune
(partiționare echilibrată)
• Exista șansa ca tabloul sa fie divizat în mod neechilibrat.

11
 • În unele cazuri nu există un pivot, iar acesta va trebui creat prin interschimbarea
elementelor
Ex. 3 1 2

Implementare C++
1 int x[50],n,i;
2
3 int partiţionare(int st,int dr)
4 {
5 int aux,i,j,di,dj;
6 di=0; dj=1; i=st; j=dr;
7 while(i < j)
8 {
9 if (x[i]>x[j])
10 {
11 aux=x[i];x[i]=x[j];x[j]=aux;
12 aux=di; di=dj; dj=aux;
13 }
14 i=i+di;
15 j=j-dj;
16 }
17 return j;
18 }
19
20 void quick(int st,int dr)
21 {
22 int p;
23 if (st < dr)
24 {
25 p=partiţionare(st,dr);
26 quick(st,p-1);
27 quick(p+1,dr);
28 }

12
29 }
30
31 void main()
32 {
33 cin>>n;
34 for (i=1;i<=n;i++)
35 cin>>x[i];
36 quick(1,n);
37 for (i=1;i<=n;i++)
38 cout<< x[i]<<" ";
39 }

Complexitate
Una dintre problemele acestui algoritm este alegerea corectă a pivotului, această acțiune
determină complexitatea și eficiența algoritmului. Uneori poate avea o performanță scăzută
O(n2), iar uneori algoritmul va funcționa după O(n log2 n), dacă pivotul a fost ales corect.

3.2.2. Sortare prin interclasare (Merge Sort)

Merge Sort are la bază interclasarea a doi vectori: pentru a sorta un vector cu n elemente îl
divizăm în două tabele pe care să le sortam separat și să le interclasăm.

Algoritm
Metoda sortării prin interclasare utilizează metoda Divide et Impera („Dezbină și stăpânește”):
• împărțim vectorul în secvențe din ce in ce mai mici, astfel fiecare secvență să fie
ordonată la un moment dat și interclasată cu altă secvență din vector.
• interclasarea va începe când se ajunge la o secvență alcătuită din două elemente. O dată
ordonată această secvență alcătuită din două elemente, se va interclasa cu o altă
secvență corespunzătoare. Cele două secvențe alcătuiesc un subșir ordonat, subșir care
se va interclasa cu subșirul sau corespunzător. Algoritmul continuă astfel până șirul este
ordonat.

13
Proprietăți
• Dezavantajul principal al acestui algoritm de sortare prin interclasare este faptul că
este utilizat un tablou adițional ce are aceeași dimensiune cu tabloul inițial, ce
trebuie sortat.

Implementare C++
1 int x[20], n;
2
3 void sort(int st, int dr, int x[20])
4 {
5 int aux;
6 if (x[st]>x[dr])
7 {
8 aux=x[st];
9 x[st]=x[dr];
10 x[dr]=aux;
11 }
12 }
13
14 void interclasare(int st, int dr, int m, int x[20])
15 {
16 int b[20], i, j, k;
17 i=st; j=m+1; k=1;
18 while(i<=m && j<=dr)
19 if(x[i]<=x[j])
20 {
21 b[k]=x[i]; i++; k++;}
22 else
23 {
24 b[k]=x[j]; j++; k++;
25 }
26 if(i<=m)
27 for(j=i;j<=m;j++)
14
28 {
29 b[k]=x[j]; k++;
30 }
31 font color="338DFF">else
32 for(i=j;i<=dr;i++)
33 {
34 b[k]=x[i]; k++;
35 }
36 k=1;
37 for(i=st;i<=dr;i++)
38 {
39 x[i]=b[k];
40 k++;
41 }
42 }
43
44 void divimp(int st, int dr, int x[20])
45 {
46 int m;
47 if((dr-st)<=1)
48 sort(st, dr, x);
49 else
50 {
51 m=(st+dr)/2;
52 divimp(st,m,x);
53 divimp(m+1,dr,x;
54 interclasare(st, dr, m, x);
55 }
56 }
57
58 void main()
59 {
60 int i;

15
61 cin>>n;
62 for(i=1;i<=n;i++)
63 cin>>x[i];
64 divimp(1, n, x);
65 }

Complexitate
Algoritmul de sortare prin interclasare (Merge Sort) are complexitatea O(n log n), indiferent
de structura datelor de intrare.

4. Căutarea
Conform lucrării 3, algoritmii de căutare sunt proiectați pentru a verifica dacă un element
aparține unui sir sau pentru a găsi un element într-o structura de date.
Pe baza tipului operației de căutare, acești algoritmi sunt în general clasificați în două categorii:
• Căutare secvențiala: În aceasta, lista sau vectorul este parcurs secvențial și fiecare
element este verificat.
Ex. Căutarea liniară.
• Căutare pe intervale: Aceasta este proiectata special pentru căutarea în structuri de
date sortate. Acest tip de algoritm de căutare este mult mai eficient decât căutarea
liniară, deoarece vizează în mod repetat centrul structurii de căutare și împarte
spațiul de căutare la jumătate.
Ex. Căutarea binara.

4.1. Căutarea secvențială

Metoda căutării secvențiale este una comună și urmărește verificarea apartenenței unui element
la un sir de elemente.

Algoritm
Acest algoritm de căutare secvențiala parcurge șirul de la un capăt la celălalt și compară
numărul căutat cu fiecare număr din șir. În momentul în care se găsește egalitatea, un indicator

3
S. Popa (2011), Algoritmi de căutare și sortare vectori
16
este poziționat în poziția respectivă. La sfârșitul parcurgerii vectorului, indicatorul ne arată
dacă a fost găsit sau nu elementul căutat.

Proprietăți
• Căutarea secvențială este de obicei foarte ușor de implementat și este practica în momentul
în care lista are doar câteva elemente sau când căutam un singur element într-o lista
nesortată.
• În momentul în care mai multe valori trebuie căutate în aceeași listă, de obicei se
preprocesează lista pentru a îmbunătăți metoda.
• Ca un rezultat, chiar dacă în teorie alți algoritmi de sortare pot fi mai rapizi decât căutarea
secvențiala, în practică chiar și pe vectori de mărime medie nu este nevoie de alți algoritmi.
Pentru șiruri de mărime mai mare ar putea avea sens sa utilizăm alți algoritmi, deoarece
prepararea datelor (sortarea) poate fi comparabilă cu o căutare secvențială.

Implementare C++
1 /** * cauta elementul x in sirul v
2 * returneaza pozitia elementului x in v
3 */
4 int cautareSecventiala(int x, vector& v)
5 {
6 int poz = -1;
7 int i = 0;
8 while (i < v.n && poz == -1)
9 if (v.e[i] == x)
10 poz = i;
11 else
12 i++;
13 return poz;
14 }

Complexitatea algoritmului de căutare secvențială este O(n).

17
 4.2. Căutarea binară

Algoritmul căutării binare folosește o listă ordonată pentru a găsi elementul în aceasta.
Algoritmul se bazează pe tehnica divide et impera. Elementul căutat este comparat cu
elementul situat în mijlocul listei. Dacă este mai mare decât elementul de la mijloc, algoritmul
se reia, continuând de la mijlocul listei către sfârșit. Dacă este mai mic, algoritmul se reia, dar
de la mijloc către început.

Algoritm
Considerăm un tablou unidimensional v cu n elemente, deja sortat si trei variabile: i=început,
m=mijloc, s=sfârșit.
Metoda verifică la fiecare pas dacă elementul căutat este egal cu mijlocul tabloului.
• Dacă este egal, variabila m reprezintă elementul căutat.
• Dacă nu este egal, iar elementul căutat este mai mare decât mijlocul vectorului, căutarea
continuă de la mijloc spre final, în caz contrar, de la mijloc spre început.
Totul se repetă până când i este egal cu s.

Implementare C++
1 int caut (int s, int d)
2 {
3 if(s > d)
4 return -1;
5 else
6 {
7 m =(s+d)/2;
8 if (x==v[m])
9 return m;
10 if (x < v[m])
11 return caut(s,m-1);
12 else
13 return caut(m+1,d);
14 }

18
15 }
16 //Elementul cautat a fost gasit pe pozitia caut (0,n-1);

Complexitatea
Pentru calcularea complexității acestui algoritm, ne vom folosi de
exemplul unui arbore. Rădăcina va fi elementul din mijloc, iar fiul din
stânga va fi mijlocul mulțimii din stânga, în timp ce fiul din dreapta va fi
mijlocul mulțimii din dreapta.

Cel mai bun caz al acestui algoritm este acela în care mijlocul este chiar
elementul căutat, iar complexitatea este O(1). Figura 1. Arbore pentru
Cel mai rău caz este atunci când algoritmul caută până la ultimul nivel al complexitate

arborelui si când elementul căutat nu face parte din mulțime, Sursa: tutoriale-pe.net

complexitatea fiind log2(n).

19
 Capitolul II. Tehnologii și medii de programare folosite pentru realizarea
aplicației

1. Medii de programare

1.1. Visual studio 2019

Microsoft Visual Studio este un mediu de dezvoltare integrat (IDE) de la Microsoft. Acesta
este folosit pentru a dezvolta programele calculatoarelor, precum și website-uri, aplicații web,
servicii web și aplicații pentru telefoane. Visual Studio folosește platformele de dezvoltare
software ale Microsoft precum Windows API, Windows Forms, Windows Presentation
Foundation, Windows Store și Microsoft Silverlight. Poate produce atât limbaj mașină cât și
cod gestionat.
Visual Studio include un editor de cod ce suportă IntelliSense (componentă de completare a
codului), precum și refactorizarea codului. Debugger-ul integrat funcționează atât ca un
depanator la nivel sursă, cât și ca un depanator la nivel de mașină. Alte instrumente încorporate
includ un profilator de coduri, proiectant pentru construirea aplicațiilor GUI, designer web,
designer de clase și proiectare de scheme de baze de date. Acceptă plug-in-uri care
îmbunătățesc funcționalitatea la aproape toate nivelurile, inclusiv adăugarea de suport pentru
sistemele de control sursă (precum Subversion și Git) și adăugarea de seturi de instrumente noi
precum editori și designeri vizuali pentru limbaje sau seturi de instrumente specifice
domeniului pentru alte aspecte ale dezvoltării softare pentru ciclul de viată (cum ar fi DevOps
client: Team Explorer).
Visual Studio suportă 36 de limbaje diferite de programare și permite editorului de cod și
depanatorului să sprijine (în grade diferite) aproape orice limbaj de programare, cu condiția să
existe un serviciu specific limbajului. Limbajele încorporate includ C, C++, C++/CLI, Visual
Basic .NET, C#, F#, JavaScript, TypeScript, XML, XSLT, HTML și CSS. Asistență pentru
alte limbaje, precum Python, Ruby, Node.js și M, printre altele este disponibilă prin plugin-uri
.Java (și J#) au fost acceptate în trecut.
Versiunea de baza a Visual Studio este disponibilă în mod gratuit. Sloganul pentru ediția Visual
Studio Community este „IDE gratuit, cu caracteristici complete pentru studenți, dezvoltatori
open-source și individual”.

20
Versiunea Visual Studio în prezent este 2019, de asemenea este și versiunea folosita pentru
realizarea site-ului, conform informațiilor din lucrarea 4.

1.2.Microsoft SQL Server

Microsoft SQL Server este un sistem relațional de gestionare a bazelor de date dezvoltat de
Microsoft. Interogarea se realizează prin limbajul SQL, iar extensia procedurală este T-SQL.
Precum un server bază de date, este un software produs cu funcționalitate primară de stocare
și regăsire a datelor așa cum este cerută de alte aplicații software, care ar putea fie să ruleze pe
același computer, fie pe altul, printr-o rețea network.
Microsoft a țintit mai multe piețe și mai multe tipuri de audiență, creând mai multe ediții
Microsoft SQL Server.

1.3.SQL Server Management Studio

SQL Server Management Studio (SSMS) este o aplicație software lansată pentru prima dată cu
Microsoft SQL Server 2005 ce este folosită pentru configurare, conducere și administrare a
componentelor ce fac parte din Microsoft SQL Server. Este succesorul aplicației Enterprise
Manager ce funcționa cu SQL 2000. Aceasta include atât editoare pentru script cât și
instrumente grafice ce lucrează cu obiecte și caracteristici ale serverului.

Una dintre caracteristicile centrale ale SSMS-ului este Object Explorer-ul, care oferă
posibilitatea utilizatorului să caute, selecteze și să acționeze asupra oricărui obiect din server.
Începând cu versiunea 11, aplicația era bazată pe Visual Studio 2010 și utiliza WPF (Windows
Presentation Foundation) pentru interfața utilizatorului. Versiunile 18 și cele de după sunt
bazate pe Visual Studio 2017 Isolated Shell.

4
Wikipedia (2018), Microsoft Visual Studio
21
 2. Tehnologii folosite

2.1. .NET Framework

5
.NET Framework este un software framework
dezvoltat de Microsoft ce rulează în mod primar pe
Microsoft Windows. Include o bibliotecă largă de
clase, numită Framework Class Library (FCL) ce
furnizează interoperabilitatea limbajelor (un limbaj
poate utiliza cod scris în alt limbaj de programare)
asupra diferitelor limbaje de programare.
Programele scrise pentru .NET Framework se
execută într-un mediu software (în contrast cu un
mediu hardware) numit Common Language
Runtime (CLR). CLR-ul este o aplicație virtuală
care oferă servicii precum securitatea, gestionarea
memoriei și gestionarea excepțiilor. Ca atare, codul Figura 2. Componentele .NET Framework
computerului scris cu .NET Framework se numește Sursa: Wikipedia
„cod gestionat”. FCL si CLR constituie împreună
.NET Framework.
FCL oferă interfața utilizatorului, accesul la date, conectivitatea la baze de date, criptografia,
dezvoltarea aplicațiilor web, algoritmi numerici și comunicații în rețea.
Programatorii produc software îmbinând codul sursa cu .NET Framework și alte biblioteci.
Cadrul este destinat să fie utilizat de majoritatea aplicațiilor noi create pentru platforma
Windows. De asemenea, Microsoft produce un mediu de dezvoltare integrat pentru software
.NET numit Visual studio.

5
Wikipedia (2019), .NET Framework
22
Principii ale .NET Framework
• Interoperabilitate: Deoarece sistemele de calculator necesită în mod obișnuit
interacțiunea dintre aplicațiile mai noi și cele mai vechi, .NET Framework oferă
mijloace de acces la funcțiile implementate în programe mai noi și mai vechi care
execută în afara mediului .NET.
• Independenta limbajului: .NET Framework introduce un sistem de tip comun (CTS)
care definește toate tipurile de date posibile și construcțiile de programare acceptate de
CLR și modul în care acestea pot sau nu interacționa conform specificațiilor CLI.
Datorită acestei caracteristici, .NET Framework acceptă schimbul de tipuri și instanțe
de obiect între biblioteci și aplicații scrise folosind orice limbaj .NET conform.
• Tipul de siguranță: CTS și CLR utilizate în .NET Framework impun, de asemenea,
siguranța tipului. Acest lucru previne distribuțiile greșite, invocările de metode greșite
și problemele cu dimensiunea memoriei atunci când accesați un obiect.
• Portabilitate: Deși Microsoft nu a implementat niciodată întregul framework pe niciun
sistem, exceptând Microsoft Windows, acesta a conceput cadrul pentru a fi multiplă
platformă și implementările sunt disponibile pentru celelalte sisteme de operare.
• Securitate: .NET Framework are propriul mecanism de securitate cu două caracteristici
generale: Securitatea acces-ului la cod (CAS) și validarea și verificarea.
• Gestionarea memoriei: CLR îl eliberează pe dezvoltator de povara administrării
memoriei; gestionează memoria în sine detectând când memoria poate fi eliberată în
siguranță.
• Performanța: În momentul în care o aplicație este lansată pentru prima data, .NET
Framework-ul compilează codul CIL într-un executabil folosindu-se de compilatorul
său just-in-time și cuprinde programul executabil in .NET Native Image Cache.
Iată câteva lucruri incluse in platforma .NET:
• C#, F#, Visual Basic
• Librării de bază pentru lucrul cu șiruri, date, fișiere si altele.
• Editoare si unelte pentru Windows, Linux, macOS și Docker.

23
 2.2.ASP.NET

ASP.NET este o tehnologie Microsoft ce facilitează crearea aplicațiilor web și serviciilor web,
așa cum este descrisă în lucrarea 6. ASP.NET este succesorul lui ASP (Active Server Pages) și
beneficiază de puterea platformei de dezvoltare .NET și de instrumente oferite de mediul
Visual Studio .NET.

ASP .NET extinde platforma .NET cu unelte și librarii specifice pentru dezvoltarea aplicațiilor
web.
Acestea sunt câteva dintre lucrurile pe care ASP .NET le adaugă platformei .NET:
• Cadru de bază pentru procesarea cererilor web in C# si F#.
• Sintaxa de șablonare a paginilor web, cunoscută sub numele de Razor, pentru
construirea paginii web dinamice folosind C#.
• Biblioteci pentru site-urile web comune, cum ar fi Model View Controller (MVC)
• Sistem de autentificare care include biblioteci, o bază de date și pagini de șabloane
pentru gestionarea autentificărilor, inclusiv autentificarea cu mai mulți factori și
autentificarea externa cu Google, Twitter și multe altele.
• Extensii de editor pentru a oferi evidențierea sintaxei, completarea codului și alte
funcționalități specifice dezvoltării paginilor web.
Razor oferă sintaxe pentru crearea de pagini web dinamice folosind HTML și C#. Codul C#
este evaluat pe server și conținutul HTML rezultat este trimis utilizatorului.
Codul care execută partea clientului este scris în JavaScript. ASP.NET se integrează cu cadrele
JavaScript și include șabloane preconfigurate pentru cadre de aplicație cu o singură pagină.

Avantaje ASP .NET:

• ASP .NET are un grup larg de componente ce se bazează pe XML, oferind un model
de programare orientat obiect (OOP).
• ASP .NET rulează cod compilat, astfel performanțele aplicației web cresc semnificativ.
Codul sursă poate fi separat în două fișiere, unul cu cod executabil, iar un altul pentru
conținutul paginii (cod HTML, textul paginii).

6
Microsoft, What is ASP.NET?
24
 • .NET este compatibil cu peste 20 de limbaje diferite, însă cele mai folosite sunt C# și
Visual Basic.

3. Limbaje de programare

3.1. C Sharp (C#)

7
C# este un limbaj de programare cu scop general, multi-paradigmă, care cuprinde scrieri
puternice, imperativ, declarativ, funcțional, generic, orientat obiect (bazat pe clasa) și discipline
de programate orientat pe componente. A fost dezvoltat in jurul anului 2000 de Microsoft ca
parte a inițiativei sale .NET și ulterior aprobat ca standard internațional de către Ecma (ECMA-
334) în 2002 și ISO (ISO / IEC 23270) în 2003. Mono este numele proiectului gratis, open-
source de a dezvolta compilatorul și timpul de rulare ale limbajului. C# este unul dintre
limbajele de programare proiectat pentru infrastructura limbajului comun (CLI).

Sintaxa
Sintaxa principală a limbajului C# este similară cu cea a celorlalte limbaje în stil C, cum ar fi
C, C++ si Java.
În special:
• Punct și virgulă este folosită pentru a arăta finalul unei declarații.
• Acoladele sunt folosite pentru a grupa declarațiile. Acestea sunt de obicei grupate în
metode (funcții), metodele în clase, iar clasele în namespace-uri.
• Variabilele sunt alocate folosind semnul egal, dar comparate folosind două semne egale
consecutive.
• Parantezele pătrate sunt utilizate la tablouri, atât pentru a le declara cât și pentru a obține
valoarea la un index dat.

Caracteristici distinctive
Există câteva caracteristici ale C Sharp-ului ce îl diferențiază de alte limbaje de programare
precum C, C++ si Java, acestea sunt:

7
Wikipedia (2020), C Sharp (programming language)
25
• Portabilitatea: Prin proiectare, C# este limbajul de programare care reflectă cel mai
direct infrastructura limbajului comun (CLI). Majoritatea tipurilor sale intrinseci
corespund tipurilor de valori implementat de cadrul CLI. Cu toate acestea, specificația
de limba nu precizează cerințele de generare a codului compilatorului: adică nu
precizează ca un compilator C# trebuie să țintească un timp de execuție sau să genereze
limbajul comun intermediar (CIL) sau să genereze un alt format specific. Teoretic, un
compilator C# ar putea genera cod-mașină precum ar putea compilatoarele tradiționale
de C++ sau Fortran.
• Tastare:
o C# acceptă declarațiile variabilelor „puternic tastate” prin cuvântul cheie var și
a array-urilor prin cuvântul cheie new[] urmat de un inițiator de colecție.
o C# suporta o dată strictă de tip Boolean, bool. Declarațiile ce au condiții, cum
ar fi while si if, necesită o expresie a unui tip ce implementează adevăratul
operator, cum ar fi tipul boolean. În timp ce C++ are, de asemenea un tip
boolean, acesta poate fi convertit liber la integer și expresiile precum if(a)
necesită doar acel a convertibil la bool, acceptând a-ul să fie integer sau pointer.
o C# este mai sigur la scris decât C++. Singurele conversii implicite realizate sunt
acelea considerate sigure, precum mărirea unui integer.
o C# are suport explicit pentru covarianță și contravarianță în tipuri generice, spre
deosebire de C++, care are un anumit grad de suport pentru contravarianță, pur
și simplu prin semantica tipurilor de retur pe metodele virtuale.
o C# nu acceptă variabile globale sau funcții. Toate metodele și membrii trebuie
declarate în clase.
• Metaprogramare: prin atribute C# face parte din limbaj. Multe dintre aceste atribute
duplică funcționalitatea directivelor preprocesoare dependente de platforma GCC și
VisualC++.
• Metode si funcții
o O metodă in C# este o membră a unei clase ce poate fi apelată precum o funcție
(o secvență de instrucțiuni). Precum și in alte limbaje de programare similare,
precum ANSI C, semnătura metodei este o declarație care cuprinde în ordine:
orice cuvinte cheie de modificare a domeniului de aplicare opțional (precum
private), specificația explicită a ceea ce returnează (int sau cuvântul cheie void,
dacă nicio valoare nu este returnată), numele metodei și la final, o secvență

26
 aflată între paranteze de specificații ale parametrilor separați prin virgula,
fiecare constând într-un tip de parametru, numeau formal și, opțional, o valoare
implicită care trebuie utilizată ori de câte ori nu este furnizată. Anumite tipuri
de metode specifice, cum ar fi cele care obțin sau setează pur si simplu o
proprietate de clase prin valoare returnată sau o atribuire, nu necesită o
semnătură completă, dar, în cazul general, definiția unei clase include declarația
completă de semnătură a metodelor sale.
o Ca și în C++, dar spre deosebire de Java, programatorii C# trebuie să utilizeze
cuvântul cheie modificatorului virtual pentru a permite metodelor să fie
suprasolicitate de subclase.
o Tipul dynamic permite legarea metodei în timp de rulare, permițând apeluri de
metodă asemănătoare JavaScript și compoziția obiectelor în timp de execuție.
• Namespace: Un namespace cu apartenența C# oferă același nivel de izolare de cod
precum un Java package sau un C++ namespace, cu reguli foarte similare și legături
către un package. Namespace-urile pot fi importate folosind sintaxa using.

3.2.HTML (Hypertext Markup Language)

HTML 8
este un standard pentru documentele concepute pentru a fi afișate într-un browser
web. Poate fi asistat de tehnologii precum Cascading Style Sheets (CSS) și limbaje de script
cum ar fi JavaScript.
Browser-ele Web primesc documente HTML de pe un server web sau de la stocarea locale și
le redau în pagini web multimedia. HTML descrie structura unei pagini web în mod semantic
și inițial a inclus indicii pentru aspectul documentului.
Elementele HTML sunt blocurile de construcție ale paginilor HTML. Cu construcții HTML,
imagini și alte obiecte, cum ar fi formulare interactive, pot fi încorporate în pagina redată.
HTML oferă un mijloc de a crea documente structurate notând semantica structurală pentru
text cum ar fi titluri, paragrafe, liste, linkuri, citate și alte elemente.
Elementele HTML sunt delimitate prin etichete, scrise în paranteze de unghi. Etichete precum
<img/> și <input /> introduc direct conținut în pagină. Alte etichete, cum ar fi <p> înconjoară
și oferă informații despre textul documentului și pot include alte etichete ca sub-elemente.

8
Wikipedia (2020), HyperText Markup Language,
27
Navigatoarele nu afișează etichetele HTML, ci le folosesc pentru a interpreta conținutul
paginii.
HTML poate încorpora programe scrise într-un limbaj de script cum ar fi JavaScript, care
afectează comportamentul și conținutul paginilor web. Includerea CSS definește aspectul și
aspectul conținutului. World Wide Web Consortium (W3C), fost întreținător al HTML-ului și
actual mentenant al standardelor CSS, a încurajat din 1997 utilizarea CSS peste HTML.

Marcarea
Marcarea HTML constă în câteva chei componente, incluzând acele tag-uri (și atributele lor),
tipuri de date bazate pe caractere, referințe de caracter și referințe de entități. Cele mai comune
tag-uri vin în perechi precum <h1> și </h1>, chiar dacă unele reprezintă elemente goale și nu
sunt pereche, precum <img>. Primul tag într-o astfel de pereche este tag-ul de start, iar al doilea
tag-ul de final (ele sunt numite opening tag și closing tag).
O altă componentă importantă a HTML este declarația tipului de document, ce declanșează
moduri standard de afișare.

Mai jos voi atașa un exemplu clasic „Hello, World!”:

<!DOCTYPE html>
<html>
<head>
<title>Titlu</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

Textul din interiorul <html> si </html> descrie pagina web, iar textul dintre <body> și
</body> este conținutul vizibil al paginii. Textul <title> Titlu </title> marchează și
definește titlul paginii.

28
 Declarația tipului de document <!DOCTYPE html> este pentru HTML5. Dacă o
declarație nu este inclusă, în multe cazuri, se va alege „quirks mode” pentru afișarea
paginii.

Elemente
Documentele HTML implică o structură de elemente HTML imbricate. Acestea sunt indicate
în document prin etichete HTML încadrate în paranteze unghiulare, astfel: <p>.
Într-un caz simplu, general, întinderea unui element este indicată de o pereche de etichete: o
etichetă de pornire <p> și o etichetă finală </p>. Conținutul textului, dacă este cazul, este
plasat între aceste etichete.
Etichetele pot include marcarea ulterioară a etichetelor între început și sfârșit, inclusiv un
amestec de etichete și text. Aceasta indică alte elemente (cuibărite), drept copii ai elementului
părinte.
Eticheta de pornire poate include atribute in cadrul ei. Acestea indică alte informații, cum ar fi
identificatorii pentru secțiuni din document, identificatorii folosiți pentru a lega informațiile de
stil la prezentarea documentului și pentru unele etichete, precum <img> utilizate pentru a
încorpora imagini, referința la resursa de imagine.
Unele elemente, cum ar fi pauza de linie <br>, nu permit niciun conținut încorporat, nici text,
nici alte etichete. Acestea necesită doar o singura etichetă goală și nu utilizează o etichetă
finală.
Exemple de elemente
Antetul documentului HTML: <head>...</head>. Titlul este inclus în antet, de exemplu:

<head>
<title>Titlul</title>
</head>

Rubrici: Rubricile HTML sunt definite cu tag-urile de la <h1> pana la <h6>, cu h1 fiind cel
mai mare (sau important) nivel si h6 ultimul.

<h1>Antet level 1</h1>

<h2>Antet level 2</h2>
<h3>Antet level 3</h3>
<h4>Antet level 4</h4>
29
<h5>Antet level 5</h5>
<h6>Antet level 6</h6>

Paragrafe:

<p>Paragraf 1</p> <p> Paragraf 2</p>

Pauze de linie: <br>. Diferența dintre <br> și <p> este că <br> sparge o linie fără a modifica
structura semantică a paginii, în timp ce <p> secționează pagina în paragrafe.

<p>Acesta <br> este un paragraf <br> cu <br> line breaks</p>

Acesta este un link in HTML. Pentru a crea un link, tag-ul <a> este folosit. Atributul href ține
adresa URL-ului a linkului.

<a href=”https://www.google.ro/ /”>Un link către Google!</a>

Input-uri: Există mai multe moduri posibile prin care un utilizator poate să ofere intrări precum:

1 <input type=”text” /> <!–Acesta este pentru intrare text →

2 <input type=”file” /> <!—- Acesta este pentru încarcarea fișierelor →
3 <input type=”checkbox” /> <!—- Acesta este pentru checkbox-uri →

Comentarii: pot utiliza în înțelegerea marcărilor.

<!—-acesta este un comentariu →

30
Atribute
Majoritatea atributelor unui element sunt perechi nume-valoare, separate de = și scrise în
interiorul tagului de început.
• ID-ul (id) atributelor asigura o modalitate de a identifica elementul în întregul
document.
• Clasa (class) atributelor prevede o cale de a ordona elementele similare.
• Un autor ar putea folosi atributul stilului (style) pentru a seta proprietățile unui element
particular.
• Atributul titlului (title) este folosit la fiecare explicație subtextuală a unui element.
• Atributul lang identifică limbajul natural din contextul unui element, ce ar putea fi
diferit față de restul documentului. Pentru exemplu, într-un document în limba engleză:

<p>Of, <span lang=”fr”>c’est la vie</span>, asa cum se spune in Franța.</p>

• Abrevierea elementului abbr poate fi folosită pentru a demonstra unele dintre atributele:

<abbr id=”anId” class=”jargon” style=”color:purple;” title=”Hypertext Markup

Language”>HTML</abbr>

Referințe de caracter și entitate

Versiunea 4.0 a HTML-ului definea un set de 252 de referințe caracter entitate și un set de
1,114,050 referințe caractere numerice, ambele permit caracterelor individuale să fie scrise
printr-o simplă marcare mai degrabă, decât literal. Un caracter literal și omologul său de
marcare sunt considerate echivalente și sunt redate identic.
Posibilitatea caracterelor de a scapă pe această cale, permite caracterelor < și & (când sunt
scrise precum &lt și &amp) să fie interpretate precum caracter mai degrabă decât marcare. De
exemplu, un semn < scris literal, indică începutul unui tag, în timp ce & indică startul unei
referințe de entitate de caracter sau referința unui caracter numeric.

31
 Lista elementelor

Secvență de evacuare Număr evacuat Rezultat Descriere

&amp; &#x26; & Ampersand

&lt; &#60; < Mai mic

&gt; &#x3e; > Mai mare

&qout; &#x22; „ Ghilimele duble

&apos; &#39; ‚ Ghilimele simple

&nbsp; &#160; Spațiu

&copy; &#169; © Copyright

&reg; &#174; ® Trademark înregistrat

&trade; &#8482; ™ Trademark

32
 3.3.JavaScript

JavaScript (JS) este un limbaj de programare care se conformează specificației ECMAScript,

conform lucrării 9. Acesta este un nivel înalt, adesea compilat doar la timp și multi-paradigmă.
Are sintaxa cu acolade, dactilografiere dinamică, orientare bazată pe obiect pe prototip și
funcții de primă clasă.
Alături de HTML și CSS, JavaScript este una dintre tehnologiile de baza ale „World Wide
Web”. Aceasta activează pagini web interactive și este o parte esențiala a aplicațiilor web.
Majoritatea site-urilor web îl utilizează pentru comportamentul paginii din partea clientului și
toate browser-ele web importante au un motor JavaScript dedicat pentru a îl executa.
Fiind un limbaj multi-paradigmă, JavaScript acceptă stiluri de programare bazate pe
evenimente, funcționale și imperative. Are interfețe de programare a aplicațiilor (API) pentru
lucrul cu textul, datele, expresiile obișnuite, structurile standard de date și documentul model
de obiect (DOM). Cu toate acestea, limbajul în sine nu include nicio intrare/ieșire (I/O), cum
ar fi facilități de rețea, stocare sau grafica, deoarece mediul de bază (de obicei un browser web)
furnizează aceste API-uri.
Motoarele JavaScript au fost utilizate inițial doar în browser-ele web, dar acum sunt încorporate
în unele servere, de obicei prin Node.js. De asemenea, sunt încorporate într-o varietate de
aplicații create cu cadre precum Electron și Cordova.
Deși există asemănări între JavaScript și Java, inclusiv numele limbii, sintaxa și bibliotecile
standard respective, cele două limbi sunt distincte și diferă foarte mult în ceea ce privește
designul.
JavaScript este o marcă înregistrată a Oracle, în Statele Unite. Este utilizată sub licență pentru
tehnologia inventată și implementată de Netscape Comunnications și alte părți.

Caracteristici
• Imperativ și structurat: JavaScript acceptă o mare parte din sintaxa de programare
structurată din C (de exemplu, if, while, switch, do while, etc). O excepție parțială este
definirea obiectivelor: inițial, JavaScript a avut ca scop funcționarea doar cu var.
ECMAScript 2015 a adăugat cuvinte cheie „let”, „const” pentru definirea blocurilor,
ceea ce înseamnă că JavaScript acum funcții și blocare. Și C, JavaScript face o

9
Wikipedia (2020), JavaScript
33
 distincție între expresii și enunțuri. O diferență sintactică față de C este introducerea
automată a punct și virgulă, ceea ce permite omiterea ei.
• Slab dactilografiat: Javascript este slab tastat, ceea ce înseamnă că anumite tipuri sunt
implicit distribuite în funcție de operația folosită.
o Operatorul binar + trimite ambii operanzi la un șir, cu excepția cazului când
ambii operanzi sunt numere. Acest lucru se datorează faptului că operatorul de
adăugare se dublează ca operator de concatenare.
o Operatorul binar – trimite întotdeauna ambii operanzi la un număr.
o Ambii operatori unari (+, -) aruncă întotdeauna operandul la un număr.
• Valorile sunt exprimate în șiruri, precum urmează:
o Șirurile sunt lăsate așa cum sunt.
o Numerele sunt convertite în reprezentantul lor de șir.
o Vectorii au elementele lor proiectate în șiruri, unite prin virgule (,).
o Alte obiecte sunt convertite în șirul [obiect Obiect], unde Obiect este numele
constructorului obiectului.
• Valorile sunt proiectate la numere prin proiectarea la șiruri și apoi proiectând șirurile în
numere. Aceste procese pot fi modificate prin definirea funcțiilor toString și valueOf
de pe prototip pentru proiectarea șirului respectiv.
• JavaScript include un număr de „anormalități”:

Operandul stâng operator Operandul drept rezultat

[] (array gol) + [] (array gol) „” (string gol)

[] (array gol) + {} (obiect gol) „[object Object]” (string)

false (boolean) + [] (array gol) „false” (string)

„123” (string) + 1 (număr) „1231” (string)

34
 „123” (string) - 1 (număr) 122 (număr)

• Dinamică
o Scrierea: JavaScript este tastat dinamic, precum majoritatea altor limbaje de
script. Un tip asociat cu o valoare, ci nu cu o expresie. De exemplu, o variabilă
legată inițial de un număr poate fi realocată unui șir. JavaScript acceptă diferite
moduri de a testa tipul de obiect, inclusiv „duck typing”.
o Evaluare în timpul rulării: JavaScript include o funcție de evaluare care poate
executa instrucțiuni furnizate ca șiruri în timpul rulării.
o Prototipuri: JavaScript folosește prototipuri unde multe alte limbaje orientate
obiect se folosesc de clase pentru moștenire. Este posibil să fie simulate multe
funcții bazate pe clasa cu prototipuri în JavaScript.

Exemple sintaxă

function factorial(n) {
if (n === 0)
return 1; // 0! = 1

return n * factorial(n – 1);

}

factorial(3); // returnează 6

function numaratoare() {
let numara = 0;

return function() {
return ++ numara;
};

35
}

let closure = numaratoare ();

closure(); // returnează 1
closure(); // returnează 2
closure(); // returnează 3

3.4.CSS (Cascading Style Sheets)

CSS este un limbaj de stilizare10, folosit pentru descrierea prezentării unui document scris într-
un limbaj de marcare precum HTML. CSS este o tehnologie de temelie a World Wide Web,
alături de HTML și JavaScript.
CSS este proiectat pentru a permite separarea prezentării și a conținutului, inclusiv aspectul,
culorile și fonturile. Această separare poate îmbunătăți accesibilitatea conținutului, poate oferi
mai multă flexibilitate și control în specificarea caracteristicilor de prezentare, permite mai
multor pagini web să partajeze formatarea prin specificarea CSS relevantă într-un fișier .css
separat și reduce complexitatea și repetarea conținutului structural.
Separarea formatării și a conținutului face, de asemenea, posibilă prezentarea aceleași pagini
de marcare în diferite stiluri pentru diferite metode de redare, cum ar fi pe ecran, prin tipărire,
prin voce și prin dispozitive tactile. CSS are, de asemenea, reguli pentru formatarea alternativa
dacă este accesat conținutul pe un dispozitiv mobil.
Numele „cascading” vine din schema prioritară specificată pentru a determina ce regula de stil
se aplică dacă mai multe reguli se potrivesc cu un anumit element. Această schemă de prioritate
în cascadă este previzibilă.

Sintaxa
CSS are o sintaxă simplă și folosește un număr de cuvinte englezești pentru a specifica numele
diferitelor proprietăți de stil. O „foaie de stil constă într-o listă de reguli. Fiecare regula sau set
de reguli constă într-unul sau mai mulți selectori și un bloc de declarații.

10
1. Wikipedia (2017), Cascading Style Sheets,

36
Selector
În CSS, selectorii declară cărui parte a marcajului se aplică stilul prin potrivirea etichetelor și
atributelor în marcajul propriu-zis.
Selectorii se pot aplica următoarelor:
• Tuturor elementelor de același tip, ex. anteturi de nivelul al doilea h2
• Elementelor specificate de un atribut, precum
o Id
o Clasă
• Elementelor ce depind de modul de aranjare în organizarea documentului.

Bloc de declarații
Un bloc de declarații constă într-o listă de declarații cuprinse între paranteze. Fiecare declarație
în sine constă într-o proprietate, două puncte și o valoare. Dacă există mai multe declarații într-
un bloc, trebuie să fie inserate un punct si o virgula pentru a separa fiecare declarație.
Proprietățile sunt specificate în standardul CSS. Fiecare proprietate are un set de valori posibile.
Unele proprietăți pot afecta orice tip de element, iar altele se aplică numai la anumite grupuri
de elemente.
Valorile pot fi cuvinte cheie, cum ar fi „centru” sau „moștenire” sau valori numerice, cum ar fi
200px(200 pixeli), 50vw(50% din lățimea afișajului) sau 80%(80% din lățimea elementului
părinte). Valorile culorilor pot fi specificate cu cuvinte cheie (de ex. „red”), hexadecimal values
(ex. #FF0000, chiar și abrevieri, #F00), valori RGB de la 0 la 255 (ex. rgb(255, 0, 0), valori
RGBA ce specifică atât culoare cât și transparența alpha (ex. rgba(255, 0, 0, 0.8)), sau valori
HSL sau HSLA (ex. hsl(000, 100%, 50%)).

Utilizare
Înainte de CSS, aproape toate atributele de prezentare ale documentelor HTML erau conținute
în marcajul HTML. Toate culorile fontului, stilurile de fundal, alinierile elementelor, marginile
și dimensiunile trebuiau descrise explicit, adesea în mod repetat, în cadrul HTML-ului. CSS
permite autorilor să mute o mare parte din informațiile respective la un alt fișier, foaia de stil,
ceea ce duce la un HTML considerabil mai simplu.
De exemplu, rubricile (elementele h1), subtitlurile (h2), etc sunt definite structural folosind
HTML. La imprimare și pe ecran, alegerea fontului, dimensiunii, culorii și accentul pentru
aceste elemente este prezentativă.
37
De exemplu, sub pre-CSS HTML, un element de antet definit cu text roșu ar fi scris ca:

<h1><font color=”red”> Capitol 1. </font></h1>

Avantajele acestui lucru nu pot fi vizibile imediat, dar puterea css devine mai evidentă atunci
când proprietățile stilului sunt plasate într-un element de stil intern sau, chiar mai bine, un fișier
CSS extern. De exemplu, să presupunem că documentul conține elementul de stil:

<style>
h1 {
color: red;
}
</style>

Toate elementele h1 din document vor deveni automat roșii, fără a necesita vreun cod explicit.
Dacă autorul va dori ulterior să transforme elementele h1 în culoare albastră, acest lucru ar
putea fi făcut schimbând elementul de stil în:

<style>
h1 {
color: blue;
}
</style>

mai degrabă decât prin parcurgerea laborioasă a documentului și schimbarea culorii pentru
fiecare element h1 individual.

Stilurile pot fi de asemenea plasate într-un fișier CSS extern, așa cum este descris mai jos și
încărcate folosind o sintaxă asemănătoare cu:

<link href=”path/to/file.css” rel=”stylesheet” type=”text/css”>

38
 Capitolul III. Descrierea site-ului (Algoritmi de căutare și sortare)

Lucrarea presupune construirea unui site ce facilitează învățarea, dar și testarea cunoștințelor
acumulate pe parcursul utilizării site-ului, iar pentru acest fapt, site-ului i-au fost implementate
un mediu de învățare și un mediu de testare, ce cuprinde doar întrebări ale căror răspunsuri se
găsesc în mediul de învățare.
Mai jos se vor găsi câteva proprietăți și componente ale site-ului, dar și linii de cod din acesta,
precum și elemente de stil.

1. Conexiunea la baza de date

Pentru o mai bună eficiență a site-ului, am decis să construiesc o bază de date și să realizez
conexiunea site-ului cu baza de date.
Tabelul va conține pentru fiecare utilizator în parte următoarele: UserID (un număr ce ajută la
identificarea fiecărui utilizator), Username (numele pe care și-l alege fiecare utilizator în parte),
UserPassword (parola aleasă de utilizator pentru conectare).

39
Conexiunea trebuie adăugată în codul sursă, în Web.config, unde vom adaugă următoarele
rânduri de cod:
<connectionStrings>
<add name="HoriaEntities" connectionString="metadata=res://*/Models.Model1.csdl|res://
*/Models.Model1.ssdl|res://*/Models.Model1.msl;provider=System.Data.SqlClient;provider
connection string=&quot;data source=DESKTOP-
Q7ED8G2;initial catalog=Horia;integrated security=True;MultipleActiveResultSets=True;Ap
p=EntityFramework&quot;" providerName="System.Data.EntityClient" />
<add name="DbModels" connectionString="metadata=res://*/Models.DbModel.csdl|res://
*/Models.DbModel.ssdl|res://*/Models.DbModel.msl;provider=System.Data.SqlClient;provi
der connection string=&quot;data source=DESKTOP-
Q7ED8G2;initial catalog=Horia;integrated security=True;MultipleActiveResultSets=True;Ap
p=EntityFramework&quot;" providerName="System.Data.EntityClient" />
</connectionStrings>

Aici „HoriaEntities” și „DbModels” sunt numele alese de mine pentru conexiunile cu baza de
date.

2. Sistemul de înregistrare
În favoarea sporirii securității site-ului, am construit un sistem de înregistrare, care oferă
utilizatorilor posibilitatea de a își crea un cont unic, pe care să se poată conecta.
Tot ceea ce trebuie să facă este să își aleagă un nume (ce este alcătuit din minimum 5 caractere
și este în același timp unic) și o parolă (ce este alcătuită din minimum 8 caractere), de asemenea
parola trebuie confirmată pentru a putea trimite contul în baza de date a site-ului.
Liniile de cod ale clasei User:
public partial class User
{
public int UserID { get; set; }
[Required(ErrorMessage = "Câmp necesar")]
[Display(Name = "Nume cont")]
[StringLength(100, ErrorMessage = "Numele contului trebuie sa aiba minim 5 caractere
", MinimumLength = 5)]

40
 public string Username { get; set; }

[Required(ErrorMessage = "Câmp necesar")]

[StringLength(100, ErrorMessage = "Parola trebuie sa aiba minim 8 caractere", Minimu
mLength = 8)]

[Display(Name = "Parola")]
[DataType(DataType.Password)]
public string UserPassword { get; set; }

[Display(Name = "Confirmare parola")]

[DataType(DataType.Password)]
[Required(ErrorMessage = "Câmp necesar")]
[Compare("UserPassword", ErrorMessage = "Parola nu a fost confirmata cu succes")] p
ublic string ConfirmPassword { get; set; }
public bool UserAdmin { get; set; }
}

Liniile de cod ale view-ului (vederii) paginii de înregistrare:

@model WebApplication4.Models.User
@{
ViewBag.Title = "Înregistrare";
}

<h2>Înregistrare</h2>

@using (Html.BeginForm("AddOrEdit","User",FormMethod.Post))
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })

41
 <div class="form-group">
@Html.LabelFor(model => model.Username, htmlAttributes: new { @class = "control-
label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class
= "form-control" } })
@Html.ValidationMessageFor(model => model.Username, "", new { @class = "text-
danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.UserPassword, htmlAttributes: new { @class = "cont
rol-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new { @cl
ass = "form-control" } })
@Html.ValidationMessageFor(model => model.UserPassword, "", new { @class = "t
ext-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.ConfirmPassword, htmlAttributes: new { @class = "
control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ConfirmPassword, new { htmlAttributes = new {
@class = "form-control" } })
@Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { @class
= "text-danger" })
</div>
</div>

42
 <div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Înregistrare" class="btn btn-default" />
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-2">
<label class=" label-success">@ViewBag.SuccesMessage</label>
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-2">
<label class=" label-danger">@ViewBag.DuplicateMessage</label>
</div>
</div>

</div>
}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

43
Rezultatul final al paginii de înregistrare

3. Sistemul de conectare
După ce contul a fost creat, utilizatorul poate începe activitatea în cadrul site-ului dedicat
algoritmilor de căutare și sortare, conectând-se cu numele și parola alese mai devreme. În cazul
în care utilizatorul nu este conectat la contul său, nu poate beneficia de serviciile oferite de
platformă.

Liniile de cod ale clasei LoginClass:

public class LoginClass
{
[Required(ErrorMessage = "Câmp necesar")]
[Display(Name = "Nume cont")]
public string Username { get; set; }
[Required(ErrorMessage = "Câmp necesar")]
[Display(Name = "Parola")]
[DataType(DataType.Password)]
public string UserPassword { get; set; }

44
Liniile de cod ale view-ului (vederii) paginii de conectare:
@model WebApplication4.Models.LoginClass
@{
ViewBag.Title = "Conectare";
}

<h2>Logheaza-te</h2>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>
sau <a href="https://localhost:44383/User/AddOrEdit">inregistreaza-
te</a> daca nu ai deja un cont.
</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Username, htmlAttributes: new { @class = "contro
l-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Username, new { htmlAttributes = new { @clas
s = "form-control" } })
@Html.ValidationMessageFor(model => model.Username, "", new { @class = "te
xt-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.UserPassword, htmlAttributes: new { @class = "c
ontrol-label col-md-2" })

45
 <div class="col-md-10">
@Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new {
@class = "form-control" } })
@Html.ValidationMessageFor(model => model.UserPassword, "", new { @class =
"text-danger" })
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Logare" class="btn btn-default" />
</div>
</div>
<h1>@Html.ViewData["Message"]</h1>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

Rezultatul final al paginii de conectare:

46
 4. Mediul de învățare
Mediul de învățare este alcătuit din două părți:
• Algoritmi de căutare:
o Căutare secvențială
o Căutare binară

• Algoritmi de sortare
o Sortare prin metoda bulelor
o Sortare prin inserție
o Sortare rapidă
o Sortare prin interclasare
o Sortare prin selecție

47
În cadrul acestuia, vom găsi explicații detaliate despre cum funcționează algoritmii,
implementările lor in C++, detalii despre complexitatea lor și un filmuleț explicativ.

5. Mediul de testare
Mediul de testare conține un set de 10 întrebări unde doar o variantă este corectă. Este destinat
evaluării cunoștințelor dobândite pe platforma de învățare, având doar întrebări ale căror
răspunsuri se pot găsi în mediul de învățare.
La finalul testului, utilizatorului îi va apărea nota obținută (1p din oficiu), iar acesta va avea
posibilitatea de a vedea răspunsurile corecte/greșite sau posibilitatea de a repeta testul.

48
În cazul în care utilizatorul apasă pe „Vezi rezultatele corecte”, acestea vor apărea în dreptul
întrebărilor.

În cazul în care utilizatorul apasă pe „Reîncearcă”, rezultatele și nota vor dispărea.

6. Design
Design-ul ales pentru site este unul minimalist, unde vom afișa pe pagini doar strictul necesar,
fiind ușor de utilizat și eficient, nefiind necesară încărcarea obiectelor și imaginilor inutile ce
ar face experiența una neplăcută.
Utilizarea barei de navigație ce se află în partea de sus a paginii este intuitivă și futuristă, acolo
avem doar câteva butoane ce conduc la funcțiile principale ale acestui site. Avem un mediu de
învățare împărțit în algoritmi de căutare și algoritmi de sortare și un mediu de testare, unde
avem evaluări ce conțin întrebări atât despre căutare cât și despre sortare.

Aceasta este bara de navigație implementată.

49
Liniile de cod destinate stilului barei de navigație:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

.mynav_navbar {
overflow: hidden;
background-color: #333;
}

.mynav_navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.mynav_dropdown {
float: left;
overflow: hidden;
}

.mynav_dropdown .mynav_dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;

50
 margin: 0;
}

.mynav_navbar a:hover, .mynav_dropdown:hover .mynav_dropbtn {

background-color: red;
}

.mynav_dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.mynav_dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.mynav_dropdown-content a:hover {
background-color: #ddd;
}

.mynav_dropdown:hover .mynav_dropdown-content {
display: block;
}
</style>

51
Liniile de cod destinate acesteia:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Căutare și sortare", "Index", "Home", new { area = "" }, new
{ @class = "navbar-brand" })
</div>

<div class="mynav_navbar">
@if (Session["Username"] != null)
{
<div class="mynav_dropdown">
<button class="mynav_dropbtn">
Învățare
<i class="fa fa-caret-down"></i>
</button>
<div class="mynav_dropdown-content">
@Html.ActionLink("Căutare", "Cautare", "Invatare")
@Html.ActionLink("Sortare", "Sortare", "Invatare")
</div>
</div>

@Html.ActionLink("Testare", "Cautare", "Testare")

}
<form method="post" action="@Url.Action("Logout", "UserLogin")" id="signoutf
rm" style="display:none;">
@Html.AntiForgeryToken()

52
 </form>

<div class="mynav_navbar navbar-right">

@if (Session["Username"] == null)
{
@Html.ActionLink("Conectare", "Index", "UserLogin")
@Html.ActionLink("Înregistrare", "AddOrEdit", "User")
}
@if (Session["Username"] != null)
{
<a href="" onclick="$('#signoutfrm').submit(); return false;">@Session["User
name"].ToString() - <b>Deconectare</b></a>
}
</div>
</div>
</div>
</div>

53
 Concluzii

În concluzie, se poate afirma faptul că site-ul realizat facilitează învățarea algoritmilor de

căutare și sortare, dar și testarea cunoștințelor despre aceștia.
Securitatea platformei este ridicată, astfel încât nu este posibilă folosirea informațiilor de pe
aceasta, decât dacă utilizatorul este conectat și de asemenea, sunt efectuate anumite verificări
în momentul creării contului.
Site-ul se adresează în principiu elevilor și studenților ce doresc să acumuleze cunoștințe despre
algoritmii de sortare și căutare, iar mai apoi să își pună la punct greșelile, testându-se.
Algoritmii se află la baza domeniului informaticii, dar nu numai, aceștia folosindu-se la multe
alte lucruri. De aceea am ales această temă, încercând să ajut și să ofer informații și posibilitatea
de a învăța mai ușor acest subiect. Mi-ar face plăcere să lansez pe viitor acest site tocmai pentru
acest scop, iar persoanele ce au nevoie de informații să se folosească de el cu folos.
Dacă aș putea să îmbunătățesc ceva la site, pe viitor aș lucra la un aspect mai plăcut și la un
sistem mai complex al mediului de testare, adăugând mai multe întrebări, mai multe teste,
precum și amestecarea acestora.

54
 Bibliografie

1. Robert Sedgewick, Kevin Wayne (2011), Algorithms, Pearson Education (US), New
Jersey, United States.
2. Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, Clifford Stein (2009),
Introduction to Algorithms, MIT Press Ltd, Cambridge, Mass., United States.
3. D. Knuth (2002), Arta programării calculatoarelor, vol 1. Algoritmi fundamentali,
Editura Teora, București, România.
4. D. Knuth (2002), Arta programării calculatoarelor, vol 3: Sortare și căutare, Editura
Teora, București, România.
5. D. Joița (2010), Algoritmi și structuri de date, Editura Renaissance, București,
România.
6. S. Popa (2011), Algoritmi de căutare și sortare vectori,
http://cadredidactice.ub.ro/sorinpopa/files/2011/10/Algoritmi-sortare-cautare.pdf
7. https://www.cs.ubbcluj.ro/~istvanc/cautarisortari.pdf
8. Wikipedia (2019), Algoritm, https://ro.wikipedia.org/wiki/Algoritm
9. https://s3-eu-central-1.amazonaws.com/tpn-
wp/uploads/2017/12/13210213/cautareabinara_complexitate.png
10. https://ro.wikipedia.org/wiki/.NET_Framework
11. https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet
12. Wikipedia (2020), C Sharp (programming language),
https://en.wikipedia.org/wiki/C_Sharp_(programming_language)
13. Wikipedia (2020), HyperText Markup Language,
https://ro.wikipedia.org/wiki/HyperText_Markup_Language
14. Wikipedia (2020), JavaScript,
https://ro.wikipedia.org/wiki/JavaScript
15. Wikipedia (2018), Microsoft Visual Studio,
https://ro.wikipedia.org/wiki/Microsoft_Visual_Studio
16. Wikipedia (2017), Cascading Style Sheets,
https://ro.wikipedia.org/wiki/Cascading_Style_Sheets

55