Subsemnatul NEACȘU ALIN -GEORGEL, student la specializarea INGINERIA SISTEMELOR [606106]

UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI ELECTRONICĂ

DEPARTAMENTUL DEPARTAMENTUL DE AUTOMATICĂ ȘI
ELECTRONICĂ

PROIECT DE DIPLOMĂ

Coordonator: Prof. Rădulescu V irginia

Absolvent: [anonimizat] – Georgel Neacș u

Craiova
Iulie, 2018

UNIVERSITATEA DIN CRAIOVA
FACULTATEA DE AUTOMATICĂ, CALCULATOARE ȘI
ELECTRONICĂ

DEPARTAMENTUL DEPARTAMENTUL DE AUTOMATICĂ
ȘI ELECTRONICĂ

REALIZAREA UNUI MAGAZIN VIRTUAL

Coordonator: Prof. Rădulescu Vi rginia

Absolvent: [anonimizat]-Georgel Neacsu

Craiova
Iulie, 2018

DECLARAȚIE DE ORIGINALITATE

Subsemnatul NEACȘU ALIN -GEORGEL, student: [anonimizat], Calculatoare și Electronică a Universității din
Craiova, certific prin prezenta că am luat la cunoștință de cele prezentate mai j os și că îmi asum, în acest
context, originalitatea proiectului meu de licență:
 cu titlul REALIZAREA UNUI MAZIN VIRTUAL.
 coordonată de Prof. : RĂDULESCU VIRGINIA.
 prezentată în sesiunea IULIE 2018 .
La elaborarea proiectului de licență, se consideră plagi at una dintre următoarele acțiuni:
 reproducerea exactă a cuvintelor unui alt autor, dintr -o altă lucrare, în limba română sau prin
traducere dintr -o altă limbă, dacă se omit ghilimele și referința precisă,
 redarea cu alte cuvinte, reformularea prin cuvin te proprii sau rezumarea ideilor din alte lucrări,
dacă nu se indică sursa bibliografică,
 prezentarea unor date experimentale obținute sau a unor aplicații realizate de alți autori fără
menționarea corectă a acestor surse,
 însușirea totală sau parțială a unei lucrări în care regulile de mai sus sunt respectate, dar care are
alt autor.
Pentru evitarea acestor situații neplăcute se recomandă:
 plasarea între ghilimele a citatelor directe și indicarea referinței într -o listă corespunzătoare la
sfărșitul lucrării,
 indicarea în text a reformulării unei idei, opinii sau teorii și corespunzător în lista de referințe a
sursei originale de la care s -a făcut preluarea,
 precizarea sursei de la care s -au preluat date experimentale, descrieri tehnice, figuri, imagini,
statistici, tabele et caetera,
 precizarea referințelor poate fi omisă dacă se folosesc informații sau teorii arhicunoscute, a căror
paternitate este unanim cunoscută și acceptată.
Data, Semnătura candidat: [anonimizat],

UNIVERSITATEA DIN CRAIOVA
Facultatea de Automatică, Calculat oare și Electronică

Departamentul de Automatică și Electronică
Aprobat la data de
…………………
Director de
departament,
Prof. dr. ing.
Cosmin IONETE

PROIECTUL DE DIPLOMĂ

Numele și prenumele student: [anonimizat]/ -ei:
Neacșu Alin -Georgel

Enunțul temei:

Realizarea unui magazin virtual

Datele de pornire:

Crearea unui site cu ajutorul HTML și CSS

Conținutul proiectului:

1. Introducere
2. Noțiuni generale despre HTML și CSS
3. Noțiuni generale despre JavaScript și jQuery
4. Tehnologii utilizate
5. Concluzii

Material grafic obligatoriu:
Da

Consultații:
Periodice
Conducătorul științific
(titlul, nume și prenume, semnătura): Prof. Rădulescu Virginia

Data eliberării temei:
10.11.201 7

Termenul estimat de predare a
proiectului:
22.06 .2018

Data predării proiectului de către
student: [anonimizat]:

UNIVERSITATEA DIN CRAIOVA
Facultatea de Automatică, Calculatoare și Electronică

Departame ntul de Automatică și Electronică

REFERATUL CONDUCĂTORULUI ȘTIINȚIFIC

Numele și prenumele candidatului/ -ei: Neacșu Alin -Georgel
Specializarea: Ingineria Sistemelor Multimedia
Titlul proiectului: Realizarea unui magazin virtual
Locația în care s -a realizat practica de
documentare (se bifează una sau mai
multe din opțiunile din dreapta): În facultate □
În producție □
În cercetare □
Altă locație: [ se detaliază ]

În urma analizei lucrării candidatului au fost constatate următoarele :
Nivelul documentării Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine

Tipul proiectului Cercetare
□ Proiectare
□ Realizare
practică □ Altul
[se detaliază ]
Aparatul matematic utilizat Simplu
□ Mediu
□ Complex □ Absent

Utilitate Contract de
cercetare □ Cercetare
internă □ Utilare
□ Altul
[se detaliază ]
Redactarea lucrării Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine

Partea grafică, desene Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună

Realizarea
practică Contribuția autorului Insuficientă
□ Satisfăcătoare
□ Mare
□ Foarte mare

Complexitatea
temei Simplă
□ Medie
□ Mare
□ Complexă

Analiza cerințelor Insuficient
□ Satisfăcător
□ Bine
□ Foarte bine

Arhitectura Simplă
□ Medie
□ Mare
□ Complexă

Întocmirea
specificațiilor
funcționale Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună

Implementarea Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună

Testarea Insuficientă
□ Satisfăcătoare
□ Bună
□ Foarte bună

Funcționarea Da Parțială Nu

□ □ □
Rezultate experimentale Experiment propriu
□ Preluare din bibliografie

Bibliografie Cărți
Reviste
Articole
Referințe web

Comentarii
și
observații

În concluzie, se propune:

ADMITEREA PROIECTULUI
□ RESPINGEREA PROIECTULUI

Data, Semnătura conducătorului știi nțific,

REZUMATUL PROIECTULUI

Tema „realizarea unui magazin virtual” a fost aleasă pentru a detalia conceptele legate de noile
tehologii de creare a unui site web , de la structura și interfață grafică și până la finalizare, introducând
date care alcătuiesc conținutul, cum ar fi text, fișiere, imagini și multe altele.
În primul ca pitol va fi definită noțiunea de HTML.
În cel de -al doilea capitol, vor fi definite notiunile de Java Script si CSS.
Apoi va fi descrisă aplicația din punct de vedere funcțional împreună cu câteva cazuri principale
de utilizare.
În ultima parte a lucrării, va fi prezentată structura aplicației, modelul de date creat pentru această
aplicație, dar și detalierea responsabilității părților componente ale aplicației web create.

Cuprins

INTRODUCERE ………………………….. ………………………….. ………………………….. ………………………….. …….. 11
CAPITOLUL 1 HTML și CSS ………………………….. ………………………….. ………………………….. ……………. 14
Introducere ………………………….. ………………………….. ………………………….. ………………………….. ……………… 14
Formatarea textelor ………………………….. ………………………….. ………………………….. ………………………….. . 15
Liste ………………………….. ………………………….. ………………………….. ………………………….. …………………… 16
Tabele ………………………….. ………………………….. ………………………….. ………………………….. …………………. 16
LINK -URI ………………………….. ………………………….. ………………………….. ………………………….. …………… 17
IMAGINI ………………………….. ………………………….. ………………………….. ………………………….. ……………. 18
CSS ( Cascading Style Sheets ) ………………………….. ………………………….. ………………………….. …………. 18
ETICHETE CSS ………………………….. ………………………….. ………………………….. ………………………….. . 19
Elementele id și class ………………………….. ………………………….. ………………………….. …………………….. 19
FONTURI ………………………….. ………………………….. ………………………….. ………………………….. ……….. 19
FORMATARE TEXT ………………………….. ………………………….. ………………………….. ……………………. 20
BACKGROUND ………………………….. ………………………….. ………………………….. ………………………….. 20
STILURI PENTRU LISTE ………………………….. ………………………….. ………………………….. …………….. 20
Chenare si m argini ………………………….. ………………………….. ………………………….. ………………………… 21
CAPITOLUL 2 JAVASCRIPT SI jQuery. ………………………….. ………………………….. ………………………….. . 23
INTRODUCERE ………………………….. ………………………….. ………………………….. ………………………….. …. 23
STRUCTURA ………………………….. ………………………….. ………………………….. ………………………….. ……… 24
EXPRESII LOGICE ………………………….. ………………………….. ………………………….. …………………………. 25
STRUCTURI REPETITIVE ………………………….. ………………………….. ………………………….. ………………. 25
Definirea un ei funcții ………………………….. ………………………….. ………………………….. ………………………… 26
Apelarea funcțiilor ………………………….. ………………………….. ………………………….. ………………………….. .. 26
VARIABILE ………………………….. ………………………….. ………………………….. ………………………….. ……….. 27
JQUERY ………………………….. ………………………….. ………………………….. ………………………….. …………. 27
Bootstrap ………………………….. ………………………….. ………………………….. ………………………….. ………………… 28
Capitolul 3 Dezvoltarea unei aplicații pentru crearea unui magazin virtual ………………………….. …………… 30
Tehnologii utilizate ………………………….. ………………………….. ………………………….. ………………………….. . 30
C# ………………………….. ………………………….. ………………………….. ………………………….. ………………………….. 30
Ce tipuri de aplicații pot fi dezvoltate cu ajutorul C# ………………………….. ………………………….. ……… 30
ASP.NET MVC – Framework și design pattern ………………………….. ………………………….. ……………………. 31

Design pattern – definiții ………………………….. ………………………….. ………………………….. ………………… 31
Model View Controller – MVC ………………………….. ………………………….. ………………………….. ………. 32
ASP. NET MVC ………………………….. ………………………….. ………………………….. ………………………….. .. 33
MYSQL Server ………………………….. ………………………….. ………………………….. ………………………….. ……….. 35
Entity Framework ………………………….. ………………………….. ………………………….. ………………………….. ……. 39
Prezentarea apli cației dezvoltate ………………………….. ………………………….. ………………………….. …………….. 41
Din perspectivă funcțională ………………………….. ………………………….. ………………………….. …………………… 41
Cazuri de utilizare ………………………….. ………………………….. ………………………….. ………………………….. ……. 42
Diagrama baz ei de date ………………………….. ………………………….. ………………………….. …………………………. 45
Privire asupra codului sursă al aplicației dezvoltate ………………………….. ………………………….. ………………. 53
Concluzii ………………………….. ………………………….. ………………………….. ………………………….. ………………… 66
Bibliografie ………………………….. ………………………….. ………………………….. ………………………….. …………….. 67

Lista figurilor
Figure 1 Exemplu tabel ………………………….. ………………………….. ………………………….. …………………………. 17
Figure 2: Chenar ………………………….. ………………………….. ………………………….. ………………………….. ……… 21
Figure 3: Home page – view controller ………………………….. ………………………….. ………………………….. …… 22
Figure 4: Slider produse ………………………….. ………………………….. ………………………….. ………………………… 28
Figure 5: Model de clase ………………………….. ………………………….. ………………………….. ……………………….. 32
Figure 6: Index ………………………….. ………………………….. ………………………….. ………………………….. ………… 34
Figure 7: Autentificare ………………………….. ………………………….. ………………………….. ………………………….. 42
Figure 8: Inregistrare ………………………….. ………………………….. ………………………….. ………………………….. … 43
Figure 9: Comanda produse ………………………….. ………………………….. ………………………….. …………………… 44
Figure 10: Diagrama bazei de date ………………………….. ………………………….. ………………………….. …………. 45
Figure 11: Produse ………………………….. ………………………….. ………………………….. ………………………….. …… 46
Figure 12: Clienti ………………………….. ………………………….. ………………………….. ………………………….. …….. 47
Figure 13: Com enzi ………………………….. ………………………….. ………………………….. ………………………….. ….. 48
Figure 14: Comanda produse ………………………….. ………………………….. ………………………….. …………………. 48
Figure 15: Furnizori ………………………….. ………………………….. ………………………….. ………………………….. …. 49
Figure 16: Cos cumparaturi ………………………….. ………………………….. ………………………….. …………………… 50
Figure 17: Asp net users ………………………….. ………………………….. ………………………….. ……………………….. 52
Figure 18: Structura proiect ………………………….. ………………………….. ………………………….. …………………… 53

INTRODUCERE

Un site web este alcătuit de regulă din mai multe pagini web. O pagină web este un document
creat cu ajutorul limbajului de marcare HTML și (opțional) limbaje de programare cum ar fi PHP, ASP
ș.a. fiind accesibil vizitatorilor prin intermediul protocolului HTTP, care transferă informația de la
server la browser. Pagina web se numește așa deoarece, afișată pe un monitor, ea se aseamănă cu o
pagină de ziar: de obicei paginile web au o lățime care încape în întregime pe ecran. În schimb, pagina
poate f i chiar mult mai înaltă decât înălțimea ecranului, ea putând fi totuși ușor afișată cu ajutorul
funcțiilor normale ale mouseului și browserului folosite, prin "tragere" în sus și în jos. De asemenea, un
site web poate fi vizualizat pe orice dispozitiv conectat la Internet capabil să afișeze informații prin
intermediul protocolului HTTP (unele telefoane mobile, PDA -uri, etc.).
Un site alcătuit din mai multe pagini are de obicei o pagină inițială sau principală numită
homepage, de la care pleacă legături către paginile interioare, secundare. Structurile și schemele de
"navigare" din interiorul site -urilor web sunt foarte diferite, în funcție de scopurile, dorințele și
posibilitățile ofertantului de informații. De obicei această h omepage este chiar pagina de start a site –
ului, pe care ofertantul de informații în web o face cunoscută la public drept punct de plecare pentru
întregul site web al său.
Site-urile web se pot clasifica după o mulțime de factori, dar principalul f actor rămâne subiectu l
de activitate al site-ului. Din punct de vedere tehnologic un site web poate fi alcătuit din orice tipuri de
date și informații statice, camere de discuții, produse și servicii de vânzare, anunțuri, formulare de
completat online, sun ete digitalizate, clipuri video, imagini statice și animate, efecte speciale, meniuri
dinamice și multe, multe altele. Vorbind la un nivel mai înalt, subiectul unui site web poate fi: un așa –
numit blog, portal web, catalog web, magazin virtual, bancă, univ ersitate virtuală, bibliotecă,
enciclopedie virtuală, revistă web, ziar web și aproape orice altceva.
Dacă la început nu s -a pus accent prea mare pe latura estetică, în zilele de azi se acordă o
importanță din ce în ce mai mare , nu numai conținut ului de informații al unui site web, dar și esteticii,
dinamicii și atractivității lui.
Principalele categorii de site -uri web după conținut
1.Conținutul de tip meme – meme -urile reprezintă imagini editate cu textul dorit

2.Conținut infografic – reprezentări grafice ale unor date (ex.graficele vânzărilor de pe ultima lună)
3.Conținut video – foarte util în cazul website -urilor ce oferă demonstrații,tutoriale,etc
4.Conținutul propriu -zis de tip text – textul este elementul cheie al unui site sau bl og ce poate fi
combinat cu succes împreună cu primele trei tipuri de conținut
Zona online este foarte competitivă , tocmai de aceea design -ul cel mai adecvat si cel mai bine
optimizat este cel care atrage noi clienti.
Crearea site -ului se desfaso ară în mai multe etape :
-prima etapa este să stabilim felelu site -ului de care avem nevoie.

-a doua etap ă este cea de alegere a domeiului . Numele domeniului va reprezenta business -ul nostru și
este important să fie scurt, descriptiv si uș or de memorat.
-urmatoarea etap ă este foarte important ă , hostig -ul. Hosting -ul înseamnă o perioadă de timp în care
închiriem un spaț iu de g ăzduire pe discurile de stocare ale u nui server care deț ine o conexiune permanenta
la internet.
După ce ne hotărâ m asupra tipului de site , domeniu si hosting, urmează construirea site -ului.
Este nevoie de o persoana care să se ocupe de desi gn-ul site -ului, imagini, text ș i limb aj de
programare. După schița site -ului, creă m un wireframe cu detaliile site -ului (butoane, pagini, poze),
după care realiză m designul template -ului.

Optimizarea site -ului pentru motoarele de c ăutare reprezintă urmă torul pas, care este de asemenea
foarte importa nt. Orice site, indiferent de cât de bine arată sau este făcut, nu reprezintă nicio valoare sau
folos dac ă nu poate fi gă sit pe internet . În spatele unui site simplu ș i bine organizat, web developer -ul
scrie sute de linii de cod, in HTML, CSS, Jav aScript,Microsoft Visual Studio 2017 sau MySQL, ca totul
să meargă perfect.
Lansarea și promo varea site -ului sunt ultimele măsuri î n procesul de creare a unui site. Inaugurarea
trebuie să fie facută și pe paginile de Social Media, cum ar fi Facebook, Instagram, Tweeter, Pinterest
și altele.

CAPITOLUL 1 HTML ș i CSS

Introducere
HTML (Hypertext Markup Language) este un limbaj de marcare care stă la baza dezvoltării
oricărei pagini web. Limbajul HTML constă într -o serie de etichete numite și tag -uri care permit
formatarea modului de afișare a informației din pagina Web (folosirea a numitor font -uri, culori și stiluri
pentru text, înserarea unor imagini sau a unor tabele, utilizarea listelor și a formularelor etc.) .
Două dintre trăsăturile de bază ale unui document HTML sunt:
 Independența față de platformă
 Legăturile hipertext (hy perlink -uri)
Structura general ă
Ca structură, o pagină HTML are două părți: o parte delimitată de tag -urile <HEAD> și </HEAD>
ce conține informații de identificare a paginii și o parte delimitată de tag -urile <BODY> și
</BODY> ce conține informațiile de prezentat efectiv în pagină. Cel mai important tag utilizat în
secțiunea HEAD este cel care dă titlul paginii .Acest titlu va fi încadrat de <TITLE> și </TITLE>.
Un exemplu de pagină HTML foarte simplă, având titlul "Magazin virtual" este:
<HTML>
<HEAD>
<TITLE>Magazin virtual</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Primul meu magazin virtual realizat in HTML
</BODY>
</HTML>

Tagurile HTML
Tag-urile nu sunt altceva decât niș te marcaje sau etichete pe care limbajul HTML le foloseș te alaturi
de texte pentru a ajuta browser -ul de inte rnet să afișeze corect conț inutul paginii web.
Aceste tag -uri pot fi de doua feluri:
Taguri pereche

Exemple: <HTML> si </HTML>; <TITLE> si </TITLE>; <HEAD> si </HEAD>
Taguri singulare (nu au un tag de incheiere)
Exemple: <HR>, <BR>
Tag-urile de bază pe care trebuie să le conțină un document HTML:
<HTML> – cu acest tag î ncepe orice document HTML. Prin folosirea acestuia îi spunem browser –
ului c ă este vo rba de un fisier HTML pentru a î l putea afi șa.
<HEAD> – între aceste tag -uri sunt trecute, pe lângă titlul paginii, diverse informaț ii folositoare
pentru browser -ul de internet.
</HEAD> – acesta este tag -ul de î ncheiere al tag -ului <HEAD>
<TITLE> – cu ajutorul lui vei putea da un titlu documentului tău. Astfel, textu l pe care îl vei scrie
între aceste tag -uri va fi afișat î n bara de titlu a documentului.
</TITLE> – arată sfârș itul titlului documentului.
<BODY> – odata cu acest tag incepe conț inutul paginii web. Tot ce vei scrie intre tag -urile
<BODY> si </BODY> va fi afișat, de catre browser, pe ecranul monitorului.
</BODY> – îi spui browser -ului că ai terminat de scris conț inutul pag inii. Tot ceea ce vei scrie după
acest tag nu va mai fi afiș at.
</HTML> – codul oricărui document se termină cu acest tag.
Tag-urile pot fi scrise atât cu litere mari cat ș i cu litere mici.
Un document HTML este un fișier care are extensia . htm sau . html. Pentru editarea textului unui
document HTML pot fi folosite orice tipuri de editare.
După deschiderea unui tag si adăugarea conț inutului dorit , acesta trebuie să fie î nchis , pen tru a putea
funcț iona.

Formatarea textelor

Textul este una dintre cele mai importante componente ale unei pagini web.
Tag-ul utilizat pentru formatarea modului de afișare a textului este <FONT>…</FONT>. Tag-ul
FONT suportă mai mulți parametri, printre care:
– SIZE=x, unde x este dimensiunea font -ului (1 fiind dimensiunea cea mai mică);
– COLOR=#RRGGBB – culoarea cu care se va afișa font -ul. Orice culoare se poate compune din trei
culori de bază: roșu, ver de și albastru (Red -Green -Blue, RGB). Acestei compoziții îi corespunde un cod

hexazecimal, unde intensitatea fiecărei culori este reprezentată pe un octet. De ex., 00FF00 este codul
pentru culoarea verde. Culoarea implicită este negru;
– FACE=font – font-ul cu care va fi scris textul respectiv.

Liste
Există mai multe tipuri de liste, cele mai utilizate fiind cele:neordonate și ordonate.
Definirea listei se face cu <UL> si <OL>. Pentru declararea unui nou element în interiorul listei
folosește <LI>.
Exemp lu:
<UL>
<LI>Samsung
<LI>Apple
<LI>HTC
</UL>
Este posibilă și construirea de subliste în interiorul listelor.

Tabele
Tabelele se definesc folosind <TABLE>…</TABLE>. Din punct de vedere al organizării și al
aspectului vizual al paginii, acest tag este unul dintre cele mai importante. În general, toată informația
afișată la accesarea unei pagini web este conținută de tabele, având diverse setări pentru margini,
background, lățime, număr de celule, spațierea celulelor etc .

TABLELOR li se pot asocia urmă toarele atribute :
– WIDTH=x sau WIDTH=x% – acesta specifică lungimea întregului tabel în pixeli (de exemplu
WIDTH=500) sau în procente .
– HEIGHT=x sau HEIGHT=x% – similar cu WIDTH, dar pentru înălțimea întregului tabel (exemple:
HEIGHT=300 sa u HEIGHT=100%);
– BORDER=x – dacă x este 1 atunci tabelul va avea și "cadru" (linii de delimitare a elementelor).
Daca x este 0, atunci acestea vor lipsi
– CELLSPACING=x – specifică spațiul dintre căsuțe, în pixeli;
– CELLPADDING=x – specifică spațiul d intre marginea unei căsuțe și conținutul acesteia, în pixeli.

La tabele ca ș i la texte se pot atribuii fonturi si culori.
Exemple de tabele :
<TABLE>
<TR><TD>CELULA 1</TD><TD>CELULA 2</TD><TD>CELULA 3</TD></TR> <TR>
<TD COLSPAN=3 ALIGN=CENTER>CELULA 4</TD ></TR>
</TABLE>

LINK -URI

Un element important al oricărei pagini web îl constituie link -urile . Acestea pot fi link -uri externe ,
care te îndrumă pe un alt site sau linkuri interne care te redirectionează pe o alt ă pagina a aceluiaș i site.
Pentru link -uri se foloseste tag -ul <A HREF= „link.html”>….</A>.
Link -urilor li se pot atribuii tag -ul TARGET .Acesta poate sa fie TARGET =”nume” si v -a deschide o
noua fereastra.
TARGET = „_blank” pentru o fereastra noua sau TARGET=”_s efl” unde v -a deschide o noua
fereastra in interiorul paginii .
Aceste link -uri nu se restrang doar la format HTML ci pot fi link -uri directe catre diverse formate de
fisiere : .doc, .txt, .pdf , .jpg etc.
Acestea suporta atributul FONT si COLOR .

Figure 1 Exemplu tabel

IMAGIN I
Inserarea imaginilor în paginile HTML se face folosind tag -ul <IMG SRC=nume>, unde „nume” este
numele unui fișier gif sau jpg.
Se mai pot folosi imagini și drept fundal pentru pagini de internet. Pentru aceasta, vom introduce
atributul BACKGROUND în cadr ul tagului<BODY> de la începutul unui fișier:

<BODY BACKGROUND=poza.jpg>
Acestea pot folosii ș i atributul BORDER .

CSS ( Cascading Style Sheets )

CSS este un limbaj (style language) care definește "layout -ul" pentru documentele HTML.
Denumirea CSS provine din expresia Cascading Style Sheets. CSS acoperă culori, font -uri, margini , linii,
înălțime, lățime, imagini de fundal, poziții avansate și multe alte opțiuni. HTML este de multe ori folosit
necorespunzător pentru a crea layout -ul siturilor de inte rnet. CSS oferă mai multe opțiuni, este mai exact
și sofisticat. În plus, este suportat de toate browser -ele actuale.

Cele două tehnologii au fost utilizate împreună pentru realizarea nivelului de prezentare al aplicației.
În ceea ce privește interacțiun ea cu utilizatorul, HTML si CSS joacă cel mai important rol în crearea de
interfețe ușor de înțeles și de utilizat de către utilizator. Tot cu ajutorul CSS se pot construi interfețe
responsive, potrivite atât pentru monitor, cât și pentru dispozitivele mob ile sau tablete.
Beneficiile CSS sunt :
– controlarea layout -ului documentelor dintr -o singură pagină de stiluri,
– control mai exact al layoutului,
– aplicare de layouturi diferite pentru tipuri media diferite (ecran, printare, etc),
– tehnici numeroase și sofisticate.
Sintaxa CSS este structurată pe trei nivele:
nivelul 1 fiind proprietaț ile etichetelor din documentul HTML, tip inline
nivelul 2 este infor mația introdusă î n blocul HEAD, tip embedded
nivelul 3 este r eprezentat de comenzile aflate î n pagin i separate, tip externe

Atributele indica urmatoarele: rel – fisierul este tip styleshhet
type – tip text ce contine comenzi CSS
href – fisierul sau adresa fisierului CSS

ETICHETE CSS

Eticheta <div> funcționează asemanător cu eticheta <p>, putând gă zdui comenzi CSS aplicabile l a un
bloc sau mai multe din conț inutul paginii.
Eticheta <span> este similară cu eticheta <font> (pe cale de a fi eliminată de consorțiul W3C)
aplicâ ndu-se elementelor dintr -un paragraf.
Etichetele CSS sunt cunoscute sub nume le de elemente sau selectori având un layout asemană tor cu
etichetele HTML.

Elementele id și class
Id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atu nci când dorim să
aplică m un stil de formatare a unei anume zone. Pentru compat ibilitate cu versiunile anterioare de
browsere numele asociate zonelor nu vor contine caracterul „ _ ” .
Elementul id se apl ică unui style de format o singură dată sau la o singură etichet ă HTML, plasâ ndu-se un
nume acel ui style. Acest element necesită ex istența comezilor CSS în zona HEAD sau intr -un fiș ier
extern .

FONTURI
Aceste elemente specifică argumentul fontului care se a sociază unui element HTML fiind incluse ori
în zona HEAD ori î n interiorul etichetei dorite.
În cazul de faț a se remarc ă asemă narea cu eticheta font din HTML care accepta argumentele type,
style, size si weight.

Font-family este de fapt o list ă de fontur i din care browserul va folosi în ordinea în care le recunoaș te
(primu l folosit va fi primul din listă, dacă nu este recunoscut îl folosește pe al doilea și așa mai departe).

Este recoma ndat ca ultima pozitie din listă să fie un font generic (de exemplu serif, sans -serif sau
monospace).
În situația î n care numele fontului e ste format din doua cuvinte se încadrează î ntre ghilim ele duble
pentru ca browserul să le interpr eteze impreună .

FORMATARE TEXT
Alinierea se face cu text -align care poziționează pe orizontal ă obiecte (de exemplu text sau imagini)
și admite valorile left, right și center ca ș i eticheta align din HTML.
Vertical -align este folosit pentru alinierea pe vertica la a obiectelor dintr -un tabel ș i poate lua valorile:
top, middle si bottom.
Float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. În funcție de
valoarea aleasă imagine a va fi aliniată în partea opusă a paginii.
Tabulare Text -indent este folosit pentru al inierea textului in interior având valori exprimate î n inci
(in), centimetri (cm) sau pixeli (px).
Decorare T ext-decoration adaugă sublinierea sau tăierea blocului text asociat ș i poate avea valorile
underline, line -through sau none.
Culoarea se face cu atributul Color și defineș te culoarea textului dintr -o zonă sau întraga pagină .

BACKGROUND
Background -ul poate fi defint ca fiind culoarea paginii , a unei celule a tabelului sau pentru text.
Culoarea de fond se defineste cu atributul background -color și poate fi asociat orică rei etichete
HTML.
Imaginile de fo nd pot fi folosite ca fundalul î ntregii pagini , a unui obiect sau a unui text.
Background -image asociază o imagine ca fundal.
Background poate lua atributul de REPEAT care poate lua valoare pe a xa X sau Y sau NO REPEAT ,
adică imaginea nu se repetă .
Poziț ia.Background -position are valori ca : top, center, left , right, bottom.

STILURI PENTRU LISTE
list-style -type
Folosind eticheta ol din HTML creă m liste ordonate sau neordonate. Adăugând comenzi CSS în zona
HEAD putem adăuga pe lângă numere ș i cifre sau alte simboluri. Browserul Netscape nu permi te
asocierea comenzilor CSS decâ t pentru eticheta li.

Chenare si ma rgini
Fiecare element este incadrat în tr-o caseta care este compusă din urmatoarele elemente:

Margin este spațiul exterior chenarului până la celelalte elemente
Border este o bordura care înconjoară elementul
Padding stabilește distanța dintre conținut ș i chenar
Conț inutul include info rmația utilă (text, tabele, imagini, formulare, etc.)

Width ș i Height.

Lățimea și înălț imea unui element sunt stabilite în HTML prin atributele width ș i height.Aceste
atribute pot fi adă ugate sau suprascrise prin comenzi CSS.

Padding ș i Margin
Padding s tabilește distanța dintre obiect ș i chenar simulta n pentru toate laturile. Distanțele pot fi
stabilite ș i individual folosind padding -top, padding -bottom, padding -left sau padding -right.
Margin stabilește distanța dintre chenar ș i celelalte obiecte din pag ină simulta n pentru toate laturile.
Distanțele pot fi stabilite ș i individual folosind margin -top, margin -bottom, margin -left sau margin -right.
Border
Netscape si Inter net Explorer afișează diferit chenarele. Comanda CSS pentru definirea chenarului
este bo rder avand proprietaț ile asociate width, style si color. Pentru a fi siguri c ă aceste proprietați Figure 2: Chenar

funcționează atât în Internet Explorer cât și î n Netscape trebuie s ă declar ăm pentru border cel puțin width
și style.
Border -Width stabileș te grosimea chenar ului și poate fi exprimată î n px (pixeli), pt (puncte), cm
(centimetri) sau î n (inci).
Border -Style stabilește tipul chenarului și poate fi dotted, dashed, solid, double, groove, ridge, inset și
outset.
Border -Color stabilește culoarea chenarului ș i poate fi exprimat ă prin valoare hexazecimală s au în
cuvinte.

Un exemplu de view, HomePage – pagina care prezintă un overview al produselor și posibilele acțiuni
care se pot face asupra acestora, în care au fost folosite cele două tehnologii poate fi văzut în imaginea
următoare:

Figure 3: Home page – view controller

CAPITOLUL 2 JAVASCRIPT SI jQuery.

INTRODUCERE

JavaScript (JS) este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor.
Este folosit mai ales pentru introducerea unor funcționalități în paginile web, codul Javascript din aceste
pagini fiind rulat de către browser. Limbajul este bine cunoscut pen tru folosirea sa în construirea siturilor
web, dar este folosit și pentru accesul la obiecte încastrate în alte aplicații. A fost dezvoltat inițial de către
Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, și
denumit în final JavaScript. În ciuda numelui și a unor similarități în sintaxă, între JavaScript și limbajul
Java nu există nicio legătură. Ca și Java, JavaScript are o sintaxă apropiată de cea a limbajului C, dar are
mai multe în comun cu limbajul Self decâ t cu Java.
Până la începutul lui 2005, ultima versiune existentă a fost JavaScript 1.5, care corespunde cu Ediția a 3 -a
a ECMA -262, ECMAScript, cu alte cuvinte, o ediție standardizată de JavaScript. Versiunile de Mozilla
începând cu 1.8 Beta 1 au avut supo rt pentru E4X, care este o extensie a limbajului care are de a face cu
XML, definit în standardul ECMA -357. Versiunea curentă de Mozilla, 1.8.1 (pe care sunt construite
Firefox și Thunderbird versiunile 2.0) suportă JavaScript versiunea 1.7.
Cea mai des în tâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot
îngloba în paginile HTML script -uri pentru diverse activități cum ar fi verificarea datelor introduse de
utilizatori sau crearea de meniuri și alte efecte animate.
Brows er-ele rețin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte și
pun la dispoziție aceste obiecte script -urilor JavaScript, care le pot citi și manipula. Arborele de obiecte
poartă numele de Document Object Model sau DOM. Există un standard W3C pentru DOM -ul pe care
trebuie să îl pună la dispoziție un browser, ceea ce oferă premiza scrierii de script -uri portabile, care să
funcționeze pe toate browser -ele. În practică, însă, standardul W3C pentru DOM este incomplet
implementat. D eși tendința browser -elor este de a se alinia standardului W3C, unele din acestea încă
prezintă incompatibilități majore, cum este cazul Internet Explorer.

O tehnică de construire a paginilor web tot mai întâlnită în ultimul timp este AJAX, abreviere de la
„Asynchronous JavaScript and XML”. Această tehnică constă în executarea de cereri HTTP în fundal,
fără a reîncărca toată pagina web, și actualizarea numai anumitor porțiuni ale paginii prin manipularea
DOM -ului paginii. Tehnica AJAX permite construirea un or interfețe web cu timp de răspuns mic, întrucât
operația (costisitoare ca timp) de încărcare a unei pagini HTML complete este în mare parte eliminată.

STRUCTURA
Javascript deț ine structuri de control care pot modifica fluxul secvențial al programului.Î ntre aceste
structuri de control putem g ăsi doua categorii :
1. Structuri de alegere/decizie
2. Structuri repetitive
Sintaxa structurii de decizie clasic ă este :
If (conditie)
{
Actiune 1
}
Else
{
Actiune 2
}

EXPRESII LOGICE

Putem folosi urmă torii oper atori de comparaț ie pentru a crea asemenea expresii : == ( egal
cu ), > ( mai mare ca ), < ( mai mic ca ) , <= ( mai mic sau egal cu ), >= ( mai mare sau egal cu ),
!= ( diferit de ) .
Pe lâ ngă aceș ti operatori, de asemenea putem folosi ș i operatorii logic i AND, OR si NOT.Î n
JavaScr ipt operatorul AND se reprezintă prin &&, OR cu || ș i NOT cu !.

STRUCTURI REPETITIVE
Alt tip de structuri care pot modifica cursul normal de executare al unui program sunt structur ile
repetitive , se mai numesc ș i bucle.Aceste s tructuri se folosesc pen tru a repeta un set de instrucți uni.
Folosind str uctura for, putem specifica numă rul de ori dorit pent ru a se repeta setul de instrucțiuni . Prin
urmare , trebuie să știm acest numă r .
for( expresie; condiție; operaț ie )
{
Acțiuni
}
Folosind structura while , putem repeta un set de intrucțiuni până când se îndeplinește condiț ia .
Sintaxa pentru structura while este urmatoarea :
while ( condiț ie )
{Acțiuni}

Definirea unei funcț ii
Atunci c ând sarcina care trebuie să o îndeplinească un script este complex ă , este mai bine să
separăm o problema mare î n probleme mai mici , care sunt mai simplu de gestionat.
JavaScript permi te descompunerea unei probleme î n sarcini mai mici folosind conceptul de funcție.
O funcț ie nu este nimic mai mult decât un set de instrucțiuni care îndeplinesc o sarcină bine definit ă.
Pentru a putea folosi o funcție trebuie, mai întâ i, să o definim.Acest lucru îl putem îndeplini folosind
urmă toarea structur ă:

Funcțion numele_funcț iei(parametri)
{
Acțiuni
}

Apelare a func țiilor
Forma prin care putem apela o functie este pur ș i simplu folosind numele acesteia și în cazul în care
aceasta deț ine parametri, s ă le trecem valorile.
În acest exemplu, funcția î ncearca s ă afle dac ă numă rul introdus de utilizator este î ntre nu merele 1 și
20. Funcția întoarce o valoare boolean indicâ nd dac ă acesta este cazul.
Logic, dacă nu pă străm rezultatul într -un anumit loc , funcț ia nu ne folose ște.Mai jos se regăseș te un
exemplu unde:
if(validează(numă r))
{
document.write("Patratul numă rului ales : " + număr * numă r );
}
else{

document.write("Valoarea introdusa nu este în intervalul permis");
}
VARIABILE
Variabilele sunt de 2 tipuri :
-locală (se poate folosii în interiorul unei funcț ii)
-global ă (se poate folosii ș i în interiorul și î n exteriorul unei funcț ii).
Îm interiorul unei funcții î ntotdeauna are prioritate variabila locală .
Prin urmare , trebuie să avem în vedere urmă toarele reguli :
– Variabilele globale se declar ă la nivel de script și se pot folosi în oricare parte a acestuia cât și în
interiorul unei funcț ii.
– Variabilele locale se declar ă în interiorul unei funcții și nu pot fi folosite î n exteriorul acesteia.
– Dacă o variabil ă global ă are acela și nume cu una locală , atunci în interiorul unei funcț ii are
prioritate variab ila locală .
– Un parametru acționeaza exact ca ș i cum ar fi o alta variabil ă local ă.
JQUERY
În dezvoltarea proiectului curent, a fost folosit alături de JavaScript clasic și librăria jQuery.
jQuery este o platformă de dezvoltare JavaScript, concepută pent ru a ușura și îmbunătăți procese precum
traversarea arborelui DOM în HTML, managementul inter -browser al evenimentelor, animații și cereri tip
AJAX.
jQuery a fost gândit să fie cât mai mic posibil, disponibil în toate versiunile de browsere importante
existente, și să respecte filosofia "Unobtrusive JavaScript". Biblioteca a fost lansată in 2006 de către John
Resig.
Ajax (sau AJAX), prescurtare pentru Asynchronous JavaScript and XML, este o tehnică de
programare pentru crearea de aplicații web interactiv e. Intenția este să facă paginile web să devină mai
rapide și deci mai acceptate, prin schimbul în fundal al unor cantități mici de date cu serverul, astfel încât
să nu fie nevoie ca pagina să fie reîncărcată la fiecare acțiune a utilizatorului. Aceasta ar e ca scop
creșterea interactivității, vitezei și ușurinței în utilizare a aplicațiilor web .

Ajax nu este o tehnologie în sine. Termenul este folosit pentru definirea aplicațiilor web ce folosesc un
ansamblu de tehnologii.
Un exemplu de utilizare AJAX se r egăsește în figura următoare. Metoda Slider este regasit ă pe pagina
Home, pentru a derula produsele .

Bootstrap

Bootstrap este un framework de frontend intuitiv ș i puternic, mobile first ce poate ajuta
dezvoltatorii să realizeze site -uri rapid și ușor folosind HTML, CSS si JavaScript.
Avantaje:
 Este Mobile First
 Este suportat de toate browser ele populare
 Ușor de învățat
 Este responsive
Figure 4: Slider produse

Componente:
 Scaffolding : Bootstrap vine cu o sistem de grile (grids), stiluri pentru link -uri, background -uri,
butoane, si multe altele.
 CSS: Bootstrap vine cu setări ce pot fi modificate din CSS si elemente prestabilite.
 Componente : Bootstrap conține o mulțime de elemente refolosibile precum icon -uri, dropdown –
uri, meniuri, alerte, pop -overs si multe altele.
 Plugin -uri JavaScript : Bootstrap conține o mulțime de plugin -uri jQuery care pot fi incluse in
funcție de necesitați, fie pe toate.

Capitolul 3 Dezvoltarea unei aplicații pentru crearea unui magazin
virtual
Tehnologii utilizate
C#

Limbajul C# este un limbaj simplu, modern și orientat obiect, iar ca principal mediu integrat de
dezvoltare alegerea ideală este Visual Studio. Proiectele sunt fișiere XML care conțin următoarele
informații:
 lista fișierelor necesare, poziția pe disc a acestora precum și modul în care vor fi utilizate
(compilate in cod executabil, incluse în executabil)
 lista de module externe referite
 mai multe seturi de parametri de compilare numite configurații (implicit sunt doar două – Debug
și Release – dar se pot defini și alte configurații)
 diverse opțiuni legate de proiect
Ce tipuri de aplicații pot fi dezvoltate cu ajutorul C#
Platforma .NET, și implicit C#, nu are restricții cu privire la tipurile de aplicații ca re pot fi create, dar
totuși cele mai comune tipuri de aplicații sunt următoarele:
 Aplicații desktop – aplicații care au aspectul familiar Windows. Aceste aplicații sunt create
folosind modulul Windows Presentation Foundation (WPF) din .NET. Acest modul es te de fapt o
bibliotecă de controale (cum ar fi butoane, bare de instrumente, meniuri și altele) care pot fi
folosite pentru a crea interfața utilizator Windows.
 Aplicații Windows Store – Windows 8 a introdus un nou tip de aplicații care sunt proiectate în
principal pentru dispozitivele cu ecran tactil și care, de obicei, rulează în full screen și se bazează
pe simplitate.
 Aplicații Web – două posibilități: Active Server Pages sau ASP .NET MVC pagini web la fel ca
cele care pot fi vizualizate din orice brow ser. Framework -ul .NET include un sistem puternic
pentru generarea conținutului web dinamic, personalizabil dar și de o securitate crescută. De

asemenea mai pot fi create și aplicații care rulează în browser -e cu Silverlight. Pentru
aplicația realizată s -a folosit ASP .NET MVC, iar acest framework, cât și design pattern –
ul pe care se bazează vor fi prezentate mai pe larg in subcapitolul următor.
 Servicii WCF – acestea reprezintă un mijloc prin care pot fi create aplicații distribuite
versatile. Prin folosir ea WCF pot fi transferate orice fel de date, și pe rețelele locale și pe
rețeaua Internet.
 Aplicații pentru telefoane mobile – Aplicații pentru Windows Phone 7, Windows Phone
8, Windows 10.
 Aplicații pentru Internet Of Things – cu ajutorul C# se pot crea și aplicații destinate IoT,
prin intermediul platformei .Net Microframework.
 Aplicații multiplatformă – Începând cu lansarea .NET Core, limbajul C# poate fi folosit
pentru dezvoltarea de aplicații multi -platformă.
ASP.NET MVC – Framework și design pattern

Pentru a prezenta mai bine acest framework, consider că este recomandat să înțelegem
mai întâi design pattern -ul ce stă la fundația acestuia. În continuare vor fi prezentate definiția
generală a design pattern -ului, cât și pentru Model View Controller – MVC.

Design pattern – definiții
Un design pattern este o soluție generală și reutilizabilă a unei probleme comune în design -ul
software. Un design pattern nu este un design in forma finală, ceea ce înseamnă că nu poate fi transformat
direct în cod sursă. Acesta este o descriere a soluție i sau un template ce poate fi aplicat pentru rezolvarea
problemei. În general pattern -urile orientate obiect arată relațiile și interacțiunile dintre clase sau obiecte,
fără a specifica însă forma finală a claselor sau obiectelor implicate.
Design Pattern -urile fac parte din domeniul modulelor și interconexiunilor. La un nivel mai înalt se găsesc
pattern -urile arhitecturale (engl. Architectural Patterns) ce descriu pattern -ul global utilizat al întregului
sistem.
Nu toate pattern -urile software sunt desig n patterns. De exemplu, algoritmii rezolvă probleme
computaționale, nu probleme de design. Design pattern -urile au fost inițial grupate în următoarele

categorii: Creational patterns , Structural patterns și Behavioral patterns și au fost descrise folosind
conceptele de delegare, agregare si consultare.
Creational Patterns sunt pattern -uri ce implementează mecanisme de creare a obiectelor. În această
categorie se încadrează pattern -urile Singleton și Factory .
Structural Patterns sunt pattern -uri ce simplifică design -ul aplicației prin găsirea unei metode de a defini
relațiile dintre entități. In aceasta categorie se încadrează pattern -ul Decorator .
Behavioral Patterns sunt pattern -uri ce definesc modul în care obiectele comunică între ele. În această
categorie se incadrează pattern -urile Command , Visitor și Observer .

Model View Controller – MVC

Denumirea MVC este prescurtarea numelui Model –View –Controller, un pattern foarte des folosit
în mediul de dezvoltare Web. Structura de bază se poate observa în figura de mai jos:

Figure 5: Model de clase

Elementele componente au următoarele funcții de bază:
 Model
a. Conține clase cât mai simpliste
b. Folosit pentru transfer de date între mediul de stocare permanent și View, prin
intermediul Controller -ului
 View
a. Afișează datele primite de la Controller (date stocate în Model)
b. Nu conține nici un fel de logica de business, ci doar afișează ceea ce prim ește
 Controller
a. Conține logica de business, validări de date, operații de comunicare cu baza de date, etc.
b. Folosește Model -ul pentru a trimite date către View
În tabelul următor am încercat să prezint principalele avantaje și dezavantaje ale acestui de sign pattern.
Avantaje Dezavantaje
Reprezentarea aceluiași model prin vederi
multiple Creșterea complexității
Sincronizarea vederilor cu modelul printr –
un mecanism de propagare a modificărilor Poate duce la un număr excesiv de operații de
actualizare
Vederi și obiecte de control conectabile
modelului Cuplarea între vedere și obiectul de control
Potențial de utilizare pentru dezvoltarea
frameworkurilor Ineficiența accesării datelor – cereri multiple
efectuate de vedere pentru obținerea tuturor
datelor necesare

ASP.NET MVC
În cazul ASP.NET MVC modelul poate fi implementat prin clase .Net care modelează structurile
de date (de ex.: se poate folosi Microsoft Entity Framework), controller -ul trebuie derivat dintr -o clasă
specială (Controller), iar viewurile sunt implementate sub forma unor fișiere care conțin un amestec de
cod C# și HTML . În continuare este prezentat un exemplu de pagină web implementată în ASP.NET
MVC din aplicația dezvoltată pentru acest proiect.

View -ul nu face alt ceva decât să permită vizualizarea și editarea informației din model. Model
din spatele paginii conține proprietăți pentru fiecare câmp de pe ecran, în plus proprietățile sunt adnotate
cu atribute care descriu validări le ce trebuie să se execute asupra acelor câmpuri.
ASP.NET MVC, versiunea 1 a fost dezvăluită publicului în 2009, și spre deosebire de
framework -ul principal pentru dezvoltare web, oferit de Microsoft la acel moment a venit cu o abordare
total diferită a m odului de programare folosind C#. Prima versiune aducea concepte de rutare, concepte
de programare realizată pe baza de convenții. A doua versiune, a adus un nou model de validare bazat pe
atribute, suport pentru a -sincronitate, suport pentru partiționarea aplicațiilor mari în zone numite “area” .
ASP.NET MVC, versiunea 3, a adus un nou motor de randare a view -urilor, Razor, acesta fiind
folosit și în versiunea actuală de MVC pentru dezvoltarea aplicației prezentate.

Figure 6: Index

MYSQL Server

Un Sistem de Gestiune a Bazelor de Date , este un set complex de programe ce permite
organizarea, păstrarea, extragerea datelor din bazele de date. SGBD -urile utilizează anumite modele
conceptuale pentru a putea gestiona datele: ierarhic, rețea, relațional, obiectual și obiectu al-relațional.
Modelul relațional este și va rămâne o lungă perioadă de timp (după spusele mai marilor în ale
bazelor de date), cel mai utilizat model conceptual. Cel ce a dezvoltat acest model a fost Edgar Frank
"Ted" Codd (23 August 1923 – 18 Aprilie 200 3) – un specialist de origine britanică ce a adus contribuții
semnificative în știința calculatoarelor. Modelul relațional a luat naștere când E.F.Codd lucra la IBM (anii
’70), perioadă în care a publicat un articol „A Relational Model of Data for Large Sh ared Data Banks” în
care a enunțat treisprezece reguli ce vizează modelul relațional.
O bază de date reprezintă o colecție de date utilizată într -o organizație, colecție care este
automatizată, partajată, definită riguros (formalizată) și controlată la ni vel central.
Structura funcțională a unui SGBD :
Tranzacția este o mulțime finită și ordonată de operații: de citire, de scriere, de calcul și de
terminare într -o BD.
Utilizatorul exprimă o cerere sub forma unei tranzacții globale. Folosind dicționarul de date al
sistemului (DDS) se evaluează și se descompune în subcereri. Apoi, plasează fiecare subcerere nodului
care conține informațiile solicitate din BD locală pe care trebuie să o interogheze. Subcererea trebuie
adaptată SGBD -ului local care o va trata ca o cerere locală. Fiecare BD locală poate fi exploatată local de
utilizatorii locali prin intermediul unui SGBD local. Cererile de acces pot solicita date situate în noduri
diferite. Pentru supervizarea cererii, un nod trebuie să -și asume rolul de coordo nator (celelalte sunt
cooperante). Un nod poate fi în același timp și coordonator pentru cererile lansate de el și cooperant
pentru cererile lansate din alte noduri care solicită acces la acel nod. Execuția unei cereri se realizează în
două faze:
1. Pregăt irea execuției (citirea datelor, scrierea în jurnalele locale a datelor neactualizate și a
datelor actualizate);
2. Realizarea cererii, adică introducerea datelor actualizate în BD dacă sistemul
funcționează corect sau nerealizarea cereri dacă apare un inc ident.

O bază de date relațională (BDR) poate fi definită ca un ansamblu de tabele; fiecare tabel, alcătuit
din linii (tupluri), are un nume unic și este stocat pe suport extern (de obicei disc). La intersecția unei linii
cu o coloană se găsește o valoare atomică.
Bazele de date relaționale au evoluat ca un tip special de aplicații informatice, și anume cele care au
organizarea datelor în memoria externă conform unui model de date specific. De aceea, în metodologia de
realizare a BDR se parcurg, în cea mai mare parte, cam aceleași etape ca la realizarea unei aplicații
informatice, cu o serie de aspecte specifice. Pe de altă parte, în literatura de specialitate, sunt diferite
propuneri de metodologii de realizarea bazelor de date.
Un tuplu sau o linie este a lcătuit(ă) din mai multe câmpuri (coloane sau atribute) și regrupează
informații referitoare la un obiect, eveniment etc., altfel spus, informații referitoare la o entitate: o carte,
un student, o localitate, un angajat al unei firme, o factură emisă etc. Ordinea tuplurilor nu prezintă
importantă din punctul de vedere al conținutul informațional al tabelei.
Teoria relațională spune că într -un tabel, nu pot exista două linii identice. Identificarea unei linii
se face prin intermediul atributelor (câmpurilor) care o compun (valorile lor trebuie să fie unice). Cheia
primară a unei tabele este un atribut sau un ansamblu de atribute care identifică fără ambiguitate fiecare
înregistrare. Există și câteva restricții în privința cheilor primare: unicitate (să permit ă identificarea unui
singur tuplu dintr -o tabelă), compoziție minimală (în cazul în care cheia primară este compusă din mai
multe atribute, nici un atribut din cheie să nu poată fi eliminat fără a distruge condiția de unicitate a
înregistrărilor), valori n on-nule (numită și restricție a entității – valorile atributelor sau ansamblurilor de
atribute, nu pot lua decât valori ne -nule).
Sistemele relaționale îndeplinesc funcțiile unui SGBD cu o serie de aspecte specifice care rezultă din
definirea unui SGBDR. C aracterizarea SGBDR se poate face pe două niveluri: global (sistemele
relaționale sunt privite ca o categorie distinctă de SGBD) și particular (fiecare SGBDR are aspecte
individuale comparativ cu altele similare).
SGBDR oferă seturi de comenzi pentru descr ierea și manipularea datelor. Acestea pot fi incluse într -un
singur limbaj relațional (SQL, QUEL,QBE, SQUARE, ALPHA, ISBL) sau separate în LDD și LMD. În
ambele situații, comenzile pentru definirea datelor sunt distincte de cele pentru manipularea datelor.
Limbajele relaționale de definire a datelor (LDD) sunt simplificate, cu puține comenzi. Descrierea datelor
este memorată în BDR, sub formă de tabele, în dicționarul (metabaza) bazei de date. Facilități de

descriere sunt prezente în SGBDR prin comenzi, car e definesc anumite operații, lanivelurile: conceptual,
logic, fizic.
Aspectele privind protecția datelor sunt foarte importante pentru un sistem de bază de date și ele trebuie
implementate de către SGBDR. Protecția bazei de date se referă la integritatea datelor (integritatea
semantică, concurența la date, salvarea/restaurarea) și securitatea datelor (autorizarea accesului, viziunile,
procedurile speciale, criptarea). Integritatea semantic, definirea restricțiilor de integritate se face, conform
cerințelor modelului relațional și concurența la date (coerența), adica unitatea de lucru pentru asigurarea
coerenței datelor este tranzacția. Aceasta este un ansamblu de comenzi tratate unitar. Tranzacția se
execută în totalitate sau deloc. Coerența poate fi afecta tă la actualizarea concurentă sau la incidente.
Un alt lucru important în bazele de date relaționale îl reprezintă organizarea tabelelor. Procedeul
prin care datele sunt grupate pe tabele distincte, se numește normalizare. Acest procedeu presupune
parcurge rea unor etape de transformare succesive, până când baza de date este adusă la o formă
optimizată. Normalizarea nu este un proces ușor, iar lucrarea de fată nu își propune discutarea în detaliu al
acestui subiect. Putem spune doar că există cinci forme de normalizare, fiecare pas în normalizare
presupune aducerea bazei de date la o formă standard. Principalele obiective ale normalizării sunt
reducerea pe cât mai mult posibil a redundanței datelor și eliminarea anomaliilor apărute la inserare,
modificare, șt ergere.
 prima formă de normalizare presupune eliminarea câmpurilor compuse și pe cele repetitive;
 a doua formă de normalizare presupune eliminarea dependențelor funcționale parțiale;
 a treia formă de normalizare presupune eliminarea dependențelor funcționale tranzitive;
 a patra formă presupune eliminarea dependențelor mult valoare;
 a cincea formă elimină dependențele de joncțiune.
În concluzie, SGBDR este un sistem software complet c are implementeză modelul de date relațional și
respectă cerințele impuse de acest model. El este o interfață între utilizatori și baza de date.
Datele unei baze de date pot fi exploatate prin intermediul limbajului de interogare SQL
(Structured Query Langu age). Acesta este un limbaj standardizat ce este folosit de către mai toate
sistemele de gestiune a bazelor de date. Prin intermediul acestui limbaj se pot:
 crea baze de date și tabele;

 realiza indecși;
 stabili relații între tabele;
 extrage și modifica date;
 etc.
MSSQL Server
Microsoft SQL Server este sistemul de gestiune a bazelor de date produs de către compania
Microsoft. Pe o mașină fizică putem găzdui mai multe instanțe MSSQL.O instanță MSSQL poate găzdui
mai multe baze de date.
O bază de date în SQL Server poate fi compusă din mai multe fișiere:
• .mdf – întâlnite și sub denumirea de primary files sau main files. Acest fișier găzduiește
obiectele unei baze de date (tabele, proceduri stocate, declanșatori, etc.). O bază de date poate să aibă
maximu m un fișier .mdf.
• .ndf – secondary database file. În principal .ndf -ul este folosit în cazul optimizărilor. Spre
exemplu: anumite tabele pot fi salvate în fișiere .ndf, fișiere ce vor fi găzduite în locații diferite, pe discuri
diferite. O bază de date poate avea zero sau mai multe fișiere .ndf.
• .ldf – transaction log files – acest fișier va păstra un istoric al operațiunilor efectuate asupra
datelor bazei de date.
Microsoft SQL Sever folosește o variantă de SQL numită T -SQL, sau Transact -SQL, o
imple mentare de SQL -92 (standardul ISO pentru SQL) cu unele extensii. T -SQL în principal adaugă
sintaxa adițională pentru procedurile stocate și pentru tranzacții. Standardele SQL necesită ACID; acesta
este un acronim pentru cele 4 condiții pentru orice tranzac ție: atomicitate, consistență, izolare,
durabilitate. MS SQL Server suportă ODBC (Open Database Connectivity).

Entity Framework

Entity Framework este după cum îi sugerează și numele un framework „Object/Relational
Mapping” (ORM) care permite dezvoltatorilor să lucreze cu date relaționale ca obiecte specifice
domeniului, eliminând nevoia de a scrie codul de acces la baza de date. Interogările se fac utilizând
LINQ, obținând obiecte puternic tipizate. Folosind „Code First”, baza de date este cre ată pe baza
obiectelor create în C#.
Abordarea Code -First permite dezvoltatorilor să se concentreze pe conceperea claselor
domeniului, clase care răspund cerințelor din aplicație decât să creezi baza de date și apoi clasele
specifice domeniului. Astfel API -ul Code -First va crea baza de date bazată pe clasele și configurările
date.
Arhitectura Entity Framework conține următoarele elemente:
 Query and update pipeline – procesează interogări, filtrează si face update cererilor;
 Metadata services – gestionează meta datele legate de entități, relații si mapări;
 Transactions;
 Conceptual layer API – runtime -ul ce expune modelul de programare;
 Embedded database – include o baza de date incorporata pentru interogarea datelor relaț ionale;
 Design tools – simplifica tas k-ul de mapare a schemei conceptuale la schema relationala;
 Programming layer – expune EDM -ul (Entity Data Model) ca unități ce pot fi utilizate de
limbajul de programare;
 Object services – cod generat automat pentru clasele CLR ce dețin aceleași proprietă ți ca o
entitate, dând astfel posibilitatea instanției entităților ce obiecte .Net;
 Web services – expun entitățile ca servicii web;

Modele de programare folosind Entity Framework
1. Aplicație centrata pe baza de date – Baza de date este in centrul aplicați ei.
2. Aplicație centrata pe model – modelul este in centrul aplicației. Accesul la date este făcut pe baza
modelului conceptual, model ce reflectă obiectele problemei de rezolvat. In acest caz exista
posibilitatea de a folosi : Code first sau Model design f irst.

Modelul de programare centrat pe baza de date, presupune ca baza de date este creată și apoi se
generează modelul logic ce conține tipurile folosite in logica aplicației. Acest lucru se face folosind
mediul de dezvoltare VStudio. Se generează clasele POCO (EF versiune mai mare ca 4 si VS 2012/VS
2013) și fișierele necesare pentru nivelul conceptual, nivelul de mapare și nivelul de memorare.
Aplicația centrata pe model poate fi dezvoltată alegând una din variantele: Code First sau Model
design first.
In ca zul Code First, dezvoltatorul scrie toate clasele (POCO) modelului și clasa derivată din DbContext
cu toate entitățile necesare și apoi cu ajutorul mediului de dezvoltare se creează și generează baza de date,
tabelele din baza de date și informațiile adiți onale necesare pentru EF.
In cazul Model Design First, mediul de dezvoltare permite dezvoltarea unei diagrame a modelului
aplicației și pe baza acesteia se va crea și genera baza de date, tabelele din baza de date și informațiile
adiționale necesare pentr u EF.
Aplicația cre ată pentru acest proiect este centrată pe model cu ajutorul Code First.

Prezentarea aplicației dezvoltate
Din perspectivă funcțională
Principala cerință funcțională a aplicației este crearea unui magazin virtual si administrarea produselor ,
furnizorilor si clientilor.

Roluri utilizator
În cadrul aplicației Shop -Electronics au fost definite următoarele roluri utilizator:
 Administrator – rol de administrare
 Client – rol de utilizator normal
Pentru utilizatorii cu rol de “Administrator” aplicația va oferi următoarele funcționalități.
 Definirea de produse
 Definirea furnizorilor
 Definirea clientilor
 Vizu alizarea produselor (cantitate ș i preț )
 Vizu alizarea rezultatelor obținute în urma vâ nzărilor.
Pentru utilizatorii c u rol de “client” vor fi disponibile funcționalitățile următoare:
 Vizualizarea produselor
 Vizualizarea cantităților disponibile ș i prețului acestora
 Vizualizarea furnizorilor
 Posibilitatea de a adăuga produse î n coșul de cumpărături și de a finaliza o comandă .

Cerințe funcționale legate de operabilitatea aplicației
Aplicația va trebui să ruleze pe toate browser -ele moderne.

Cerințe funcționale legate de validare și securitate

Accesul în aplicație trebuie să fie unul controlat. Un utilizator cu un anum it rol nu va trebui să poată
avea acces la funcționalitățile destinate unui alt rol de utilizator; de exemplu un client nu va putea
modifica datele unui produs.

Cazuri de utilizare

În următoarea secțiune vor fi descrise principalele cazuri de utilizare a aplicației magazin virtual

Cazul 1 – autentificarea in aplicație
a. Utilizatorul deschide pagina de Login a aplicației
b. Utilizatorul introduce emailul și parola
c. Utilizatorul apasă butonul Autentificare
d. Aplicația va verifica dacă utilizatorul a introdus date le corecte pentru a accesa
paginile
e. În cazul în care datele introduse nu corespund unui cont valid de utilizator aplicația
va afișa un mesaj corespunzător
f. În cazul în care datele introduse aparțin unui cont valid de utilizator, acesta este
redirectat către pagina Home a aplicației.
Figure 7: Autentificare

Cazul 2 – înscrierea unui utilizator client nou
a. Clientul navighează pe pagina de î nregistrare
b. În această pagină va putea vedea o lista în care îș i complecteaz ă datele
c. Dupa complectarea datelor , client ul este redirecționat că tre pagina principal ă a site -ului,
d. Clientul revine pe pagina principală și trebuie să se autentifice pentru a putea începe
cumpără turile

Cazul 3 – clientul efectuează o comand ă
a. Dupa autentificare clientul este redirec ționat pe pagina principal ă
b. Pe pagina principal ă poate observa lista cu produse
c. Clientul selecteaz ă produsul dorit și cantitatea
d. Este redirecț ionat c ătre pagina „co ș de cumpără turi”
e. Pe aceast ă pagin ă se poate observa o lista în care trebuie să îș i introduc ă datele personale
(nume , prenume , adres ă, telefon , număr de card)

Figure 8: Inregistrare

f. Clientul apasă butonul „ creeaza ”.
Figure 9: Comanda produse

Diagrama bazei de date
Așa cum a fost menționat anterior, pentru baza de date a fost folosit motorul de baze de date MSSQL
Server. În figura de mai jos poate fi văzută o diagramă a tuturor tabelelor componente ale bazei de date
create pentru aplicația Shop -Electronics .

Figure 10: Diagrama bazei de date

În continuare se va face o analiză pentru a prezenta fiecare tabel și rolul acestuia.

1. Tabelul Products – conține datele despre produse .
Coloana PID reprezintă cheia primară a tabelei.
Coloana PName este un foreign key către tabelul AspNetUsers pentru a cunoaște utilizatorul
care a creat produsul .
Coloana Brand stochează descrierea producătorului .
Coloana UnitPrice memorează prețul produselor .
Coloana UnitsinStock memorează cantitatea prodselor.
Coloan a Category stochează categoria produselor.
Coloana Description stochează descrierea produselor.

Figure 11: Produse

2. Tabelul Customers – stochează toate datele despre clienți.
Coloana C id reprezintă ID-ul clientului.
Coloana Pname si Lname stochează numele și prenumele clientului.
Coloana Phone stochează numărul de telefon al clientului.
Coloanele Adress 1 și Adress 2 stochează adresa clientului.
Coloana Suburb stochează zona/cartierul .
Coloana Postcode stochează codul poștal al clientului.
Coloana State stochează Județul .
Coloana Ctype stochează tipul cardului.
Coloana Card No stochează numărul cardului.
Coloana Expdate stochează data expirării cardului.
Coloana Email stochează e -mailul clientului.

Figure 12: Clienti

3. Tabelul Orders – stochează datele de livrare a produselor.
Coloana OrderId reține id -ul comenzii.
Coloana Orderdate reține data comandării.
Coloana Deliverydate reț ine data sosirii comenzii.
Coloana CID reprezintă ID-ul clientului.

Figure 13: Comenzi
4. Tabelul Orderproducts reprezintă comandarea produsului.
Coloana Id reține id -ul comenzii.
Coloana OrderId reține ID -ul comandării produsului.
Coloana PID reține id -ul produsului.
Coloana Qty reține numărul de produse.
Coloana TotalSale reprezintă numărul total de vânzări .

Figure 14: Comanda produse

5. Tabelul Suppliers stochează informațiile despre furnizori .
Coloana StudentTestId este cheia primară a tabelului.
Coloana SId reține id furnizorului .
Coloana Sname reține numele furnizorului.
Coloana Phone stochează numărul de telefon al furnizorului.
Coloana Email stochează e -mailul furnizorului.
Coloanele Adress 1 și Adress 2 stochează adresa furnizorului.
Coloana S uburb stochează zona/cartierul .
Coloana State stochează Județul .
Coloana Postcode stochează codul poștal al furnizorului.

Figure 15: Furnizori

6. Tabela shop ingcartdatas stocheză datele coș ului de cumparaturi.
Coloana TempIdOrder reține id temporar al unei comenzi.
Coloana PID reține id -ul produselor.
Coloana Pname reține numele produsului
Coloana UnitPrice reține prețul produsului
Coloana Quantity reține cantitatea de produse .

Figure 16: Cos cumparaturi
7. Tabele specifice Asp.Net Identity – tabelele AspNetUserRoles, AspNetRoles, AspNetUsers,
AspNetUserLogins, AspNetUserClaims sunt responsabile pentru stocarea informațiilor despre
utilizatori, roluri și autentificarea utilizatorilor în aplicație.
Câteva cuvinte despre Identity
Identity este un API creat de Microsoft care ajută la administrarea utilizatorilor în aplicațiile .Net
și poate fi folosit cu orice framework ASP.NET cum ar fi ASP.Net MVC, Web Forms, Web API
sau SignalR.
Identity poate fi folosit în construirea aplicațiilor web, mobile, de tip storage sau hibride.
Autentificarea ASP.Net este bazată pe middleware -ul Open Web Interface for .Net (OWIN) și
poate fi folosită pe orice host bazat pe OWIN.
Acest API a fost ales deoarece este destu l de ușor de implementat cu ajutorul Visual Studio 2015
Community Edition, care oferă un template cu acest API deja inclus. Mai mult decât atât, privind
de la un nivel superior, API -ul prezintă următoarele beneficii:
 Un singur sistem de identitate – poate fi folosit pentru toate framework -urile ASP.NET

 Controlul persistenței – în mod implicit, Identity stochează toate informațiile utilizatorilor
într-o bază de date. Aceasta folosește Entity Framework Code -First pentru a implementa
toate mecanismele de p ersistență. Se pot adăuga cu ușurință diferite mecanisme de
stocare cum ar fi SharePoint, Azure Storage Table Service, baze de date de tip NoSql,
etc. fără a fi necesare schimbări majore.
 Furnizor de roluri – restricționează accesul la anumite părți din ap licație în funcție de
roluri.
 Bazat pe revendicări, engl. Claims – Identity suportă autentificarea bazată pe revendicări,
unde identitatea utilizatorului este reprezentată că un set de revendicări (claims), care
ajută dezvoltatorii să fie mult mai expresiv i în descrierea identității.
 Social login providers – pot fi adăugați cu ușurință furnizori pentru social log -în cum ar fi
Conturi Microsoft, Facebook, Twitter, Google la aplicație, și permite stocarea datelor
specifice utilizatorilor în aplicație
 Integra rea cu OWIN – autentificare bazată pe OWIN, poate fi folosit pe orice host bazat
pe Open Web Interface for .Net.

Figure 17: Asp net users

Privire asupra codului sursă al aplicației dezvoltate

Pentru dezvoltarea aplicației s-a folosit template -ul clasic de proiect nou Asp.Net Mvc disponibil în ide -ul
Microsoft Visual Studio 2017 Community Edition. În imaginea de mai jos se poate ved ea structura
proiectului, iar mai jos va fi prezentată fiecare componentă a acestuia .

Figure 18: Structura proiect

1. Folder -ul AppData – este un loc care poate fi folosit pentru a găzdui fișiere necesare
aplicației. De exemplu dacă aplicația noastră ar memora datele în fișiere și nu într -o bază de
date așa cum o face acum, acesta ar fi loc recomandat în care aceste fișiere să existe.
2. Folder -ul AppStart conține clasele responsabile pentru bundleling, pentru configurarea
filtrelor, pentru configurarea API -ului Identity și pentru configurarea rutelor.
3. Folder -ul Content co nține fișierele necesare aplicației, ca imagini, sau librarii externe precum
KendoUI sau Bootstrap. Acest folder mai conține și fișierele css ale aplicației.
4. Folder -ul Controllers conține toate clasele de tip Controller are aplicației.
5. Folder -ul D ataAcces conține clasa ElectricsOnlineDbContex , este necesară pentru ca
EntityFramework să poată funcționa în proiect. În clasa ElectricsOnlineDbContex sunt
definite, ca proprietăți fiecare DbSet (prin abstractizare poate fi privit ca un corespondent al
unui tabel din baza de date).
6. Folder -ul fonts, găzduiește fișierele de tip font necesare aplicației.
7. Folder -ul Migrations, conține fișierele Migrations care sunt de asemenea specifice
EntityFramework -ului. Un migration nou se definește atunci când apar modificări în data
model. Cu ajutorul unei clase de migration se pot rula comenzi asupra bazei de date, pentru
ca modificările apărute să nu destabilizeze aplicația. Un alt exemplu, la adăugarea unei
coloane noi, se pot face operații de insert pe tabelul respectiv și a stfel în coloana nouă pot fi
deja adăugate date.
8. Folder -ul Models are în componență toate clasele de tip model ale aplicației. Prin folosirea
ORM -ului Entity Framework, trebuie creată câte o clasă model pentru fiecare tabel din baza
de date. O clasă model va avea ca proprietăți toate coloanele existente în tabelul pentru care a
fost definită. Pentru orice proprietate se pot defini data attributes care caracterizează acea
proprietate; aceste attributes pot defini lungimea maxima admisă a coloanei, pot defini un
interval pe care valorile trebuie să îl respecte, dacă este vorba despre o coloană ce ține valori
de tip număr.
9. Folder -ul Scripts, conține fișiere JavaScript folosite în aplicație. Aceste fișiere pot fi ale unor
framework -uri, ca de exemplu jQuery sau Kendo UI.
10. Folder -ul ViewModels conține clase model specifice view -urilor aplicației.
11. Folder -ul Views are în componență toate view -urile aplicației. Un view conține markup html
și legătura către modelul său.
12. Fișierul Global.asax conține entry point -ul aplic ației. Metoda „ Application_Start”, este prima
metodă care se execută atunci când se pornește aplicația. În această metodă poate fi
configurat comportament -ul aplicației, se poate modifica sistemul de routing și nu numai.

13. Fișier -ul Web.config găzduiește set ările de rulare ale aplicației. Una dintre cele mai
importante setări este cea legată de conexiunea la baza de date. Aici se regăsesc și date despre
assembly -urile folosite. În acest fișier se mai pot configura și setări specifice pentru IIS, setări
legate de securitate sau de autentificare. Desigur că se pot adăuga și setări customizate, ca de
exemplu endpoint -ul unui alt sistem cu care aplicația noastră ar putea comunica și schimba
date.
În continuare vor fi adăugate câte o clasă reprezentativă din folder ele principale ale aplicației.
Fișierul BundleConfig.cs
using System.Web;
using System.Web.Optimization;

namespace ElectricsOnlineShop
{
public class BundleConfig
{
// For more information on bundling, visit
https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add( new ScriptBundle( "~/bundles/jquery" ).Include(
"~/Scripts/jquery -{version}.js" ));

bundles.Add( new ScriptBundle( "~/bundles/jqueryval" ).Include(
"~/Scripts/jquery.validate*" ));

// Use the development version of Modernizr to develop with and
learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com
to pick only the tests you need.
bundles.Add( new ScriptBundle( "~/bundles/modernizr" ).Include(
"~/Scripts/modernizr -*"));

bundles.Add( new ScriptBundle( "~/bundles/bootstrap" ).Include(
"~/Scripts/bootstrap.js" ));

bundles.Add( new ScriptBundle( "~/bundles/new -site").Include(
"~/Scripts/owl.carousel.min.js" ,
"~/Scripts/jquery.sticky.js" ,
"~/Scripts/jquery.easing.1.3.min.js" ,
"~/Scripts/main.js" ,
"~/Scripts/jquery.bxslider.js" ,
"~/Scripts/script.slider.js"
));

bundles.Add( new StyleBundle("~/Content/css" ).Include(
"~/Content/bootstrap.css" ,
"~/Content/site.css" ,
"~/Content/ow.carousel.css" ,
"~/Content/style.css" ,
"~/Content/responsive.css" ,

"~/Content/font -awesome.min.css" ));
}
}
}

Fișierul ElectricsOnlineDbContex .cs
using ElectricsOnlineShop.DataAccess.Models;
using MySql.Data.Entity;
using System.Data.Common;
using System.Data.Entity;

namespace ElectricsOnlineShop.DataAccess

{
// Code-Based Configuration and Dependency resolution
[DbConfigurationType( typeof(MySqlEFConfiguration))]
public class ElectricsOnlineDbContext : DbContext
{

public DbSet<Customer> Customers { get; set; }
public DbSet<Order_Products> Order_Products { get; set; }
public DbSet<Order> Orders { get; set; }
public DbSet<Models.Product> Products { get; set; }
public DbSet<ShoppingCartData> ShoppingCartDatas { get; set; }
public DbSet<Models.Supplier> Suppliers { get; set; }

public ElectricsOnlineDbContext()
: base(nameOrConnectionString: "DefaultConnection" )
{

}

// Constructor to use on a DbConnection that is already opened
public ElectricsOnlineDbContext(DbConnection existingConnection, bool
contextOwnsConnection)
: base(existingConnection, contextOwnsConnection)
{

}

protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
base.OnModelCreating(modelBuilder);
//modelBuilder.Entity<Car>().MapToStoredProcedures();
}
}
}

Fișierul HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using ElectricsOnlineShop.DataAccess;
using ElectricsOnlineShop.DataAccess.Models;
using MySql.Data.MySqlClient;

namespace ElectricsOnlineShop.Controllers
{
public class HomeController : BaseController
{

public ActionResult Index()
{
List<DataAccess.Models.Product> products = _ctx.Products.ToList();
ViewBag.Products = products;
return View();
}

public ActionResult Category( string catName)
{
List<DataAccess.Models.Product> products;
if (catName == "")
{
products = _ctx.Products.ToList();
}
else
{
products = _ctx.Products.Where(p => p.Category ==
catName).ToList();
}
ViewBag.Products = products;
return View("Index");
}

public ActionResult Search( string searchText)
{
List<DataAccess.Models.Product> products;
if (string.IsNullOrWhiteSpace(searchText))
{
products = _ctx.Products.ToList();
}
else
{
products = _ctx.Products.Where(p =>
p.PName.Contains(searchText) ||
p.Descri ption.Contains(searchText)
||

p.Brand.Contains(searchText)).ToList();
}
ViewBag.Products = products;
ViewBag.SearchText = searchText;
return View("Index");

}

public ActionResult Suppliers()
{
List<DataAccess.Models.Supplier> suppliers =
_ctx.Suppliers.ToList();
ViewBag.Suppliers = suppliers;
return View();
}

public ActionResult AddToCart( int id)
{
addToCart(id);
return RedirectToAction( "Index");
}

private void addToCart( int pId)
{
// check if produ ct is valid
DataAccess.Models.Product product = _ctx.Products.FirstOrDefault(p
=> p.PID == pId);
if (product != null && product.UnitsInStock > 0)
{
// check if product already existed
ShoppingCartData cart =
_ctx.ShoppingCartDatas.FirstOrD efault(c => c.PID == pId);
if (cart != null)
{
cart.Quantity++;
}
else
{

cart = new ShoppingCartData
{
PName = product.PName,
PID = product.PID,
UnitPrice = product.UnitPrice,
Quantity = 1
};

_ctx.ShoppingCartDatas.Add(cart);
}
product.UnitsInStock –;
_ctx.SaveChanges();
}
}

public ActionResult About()
{
ViewBag.Message = "Your application description page." ;

return View();
}

public ActionResult Contact()
{
ViewBag.Message = "Your contact page." ;

return View();
}
}
}

Fișierul ManageViewModels .cs
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using Microsoft.AspNet.Identity;
using Microsoft.Owin.Security;

namespace ElectricsOnlineShop.Models
{
public class IndexViewModel
{
public bool HasPassword { get; set; }
public IList<UserLoginInfo> Logins { get; set; }
public string PhoneNumber { get; set; }
public bool TwoFactor { get; set; }
public bool BrowserRemembered { get; set; }
}

public class ManageLoginsViewModel
{
public IList<UserLoginInfo> CurrentLogins { get; set; }
public IList<AuthenticationDescription> OtherLogins { get; set; }
}

public class FactorViewModel
{
public string Purpose { get; set; }
}

public class SetPasswordViewModel
{
[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters
long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "New password" )]
public string NewPassword { get; set; }

[DataType(DataType.Password)]
[Display(Name = "Confirm new password" )]
[Compare( "NewPassword" , ErrorMessage = "The new password and confirmation
password do not match." )]
public string ConfirmPassword { get; set; }
}

public class ChangePasswordViewModel
{
[Required]

[DataType(DataType.Password)]
[Display(Name = "Current password" )]
public string OldPassword { get; set; }

[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters
long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "New password" )]
public string NewPassword { get; set; }

[DataType(DataType.Password)]
[Display(Name = "Confirm new password" )]
[Compare( "NewPassword" , ErrorMessage = "The new password and confirmation
password do not match." )]
public string ConfirmPassword { get; set; }
}

public class AddPhoneNumberViewModel
{
[Required]
[Phone]
[Display(Name = "Phone Number" )]
public string Number { get; set; }
}

public class VerifyPhoneNumberViewModel
{
[Required]
[Display(Name = "Code")]
public string Code { get; set; }

[Required]
[Phone]
[Display(Name = "Phone Number" )]
public string PhoneNumber { get; set; }
}

public class ConfigureTwoFactorViewModel
{
public string SelectedProvider { get; set; }
public ICollection<System.Web.Mv c.SelectListItem> Providers { get; set; }
}
}

Fișierul Customer ViewModel.cs
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ElectricsOnlineShop.Models

{
public class CustomerViewModel
{
[Display(Name = "Id")]
public int CID { get; set; }

[Required(ErrorMessage = "Prenume este un camp obligatoriu" )]
[Display(Name = "Prenume" )]
public string FName { get; set; }

[Required(ErrorMessage = "Nume este un camp obligatoriu" )]
[Display(Name = "Nume")]
public string LName { get; set; }

[Display(Name = "Telefon" )]
[Required(ErrorMessage = "Telefon este un camp obligatoriu" )]
public string Phone { get; set; }

[Display(Name = "Adresa" )]
[Required(ErrorMessage = "Adresa este un camp obligatoriu" )]
public string Address1 { get; set; }

[Display(Name = "Adresa 2" )]
public string Address2 { get; set; }

[Display(Name = "Adresa: Zona/Cartier" )]
public string Suburb { get; set; }

[Required(ErrorMessage = "Cod postal este un camp obligatoriu" )]
public string Postcode { get; set; }

[Required(ErrorMessage = "Judet este un camp obligatoriu" )]
public string State { get; set; }

[Required(ErrorMessage = "Tip card este un camp obligatoriu" )]
[Display(Name = "Tip card" )]
public string Ctype { get; set; }

[Required(ErrorMessage = "Numar card este un camp obligatoriu" )]
[Display(Name = "Numar card" )]
[StringLength(16, ErrorMessage = "Numar card introdus nu este corect." ,
MinimumLength = 15)]
public string CardNo { get; set; }

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}" )]
[Required(ErrorMessage = "Data expirare card este un camp obligatoriu" )]
[Display(Name = "Data expirare card" )]
public DateTime ExpDate { get; set; }

[Display(Name = "Judet")]
public IEnumerable<SelectListItem> States { get; set; }

[Required(ErrorMessage = "Email este un camp obligatoriu" )]
[EmailAddress]
public string Email { get; set; }
}
}

Fișierul Index.cshtml
@{
ViewBag.Title = "Home Page" ;
}

<div class="slider -area">
<!– Slider –>
<div class="block-slider block -slider4">
<ul class="" id="bxslider -home4">
<li>

<img src="@Url.Content( "~/Images/Slider/iphonex.jpg" )" alt="Slide">

<div class="caption -group">
<h2 class="caption title">

iPhone <span class="primary"> X <strong></strong></span>

</h2>

<h4 class="caption subtitle"> Apple</h4>
</div>

</li>

<li>

<img src="@Url.Content( "~/Images/Slider/samsungs9.jpg" )" alt="Slide">

<div class="caption -group">

<h2 class="caption title"> <span class="primary"> 50% <strong> promo</strong></span>
</h2>

<h4 class="caption subtitle"> Super oferta </h4>
</div>

</li>

<li>

<img src="@Url.Content( "~/Images/Slider/asusrog.jpg" )" alt="Slide">

<div class="caption -group">
<h2 class="caption title">
<span class="primary"> 30% reducere <strong></strong></span>
</h2>

</div>

</li>

<li>

<img src="@Url.Content( "~/Images/Slider/acerpredator.jpg" )" alt="Slide">

<div class="caption -group">
<h2 class="caption title">
<span class="primary"> Acer
<strong>Predator </strong></span>
</h2>
<h4 class="caption subtitle"> Helios 300 </h4>

</div>

</li>

</ul>

</div>

<!– ./Slider –>
</div> <!– End slider area –>

<div class="single -product-area">

@if (ViewBag.Products.Count == 0)
{
<br />
<div id="EmptyDataMsg" class="alert alert -info">
<strong>Ne pare rau! </strong> Nu au fost gasite produse care sa
corespunda criteriilor de filtrare.
</div>
}
else
{
<div class="container">
<div class="zigzag -bottom"></ div>
<div class="row">
<div class="col-md-6 col-sm-12">
<h2>Produse</h2>
</div>
</div>

<div class="row filters -row">
<div class="col-md-6 col-sm-12">

<form action="/Home/Category" method="get" id="category" class="option">

<span>Filtreaza dupa Cat egorie:</span>

<select id="catName" class="form-control" name="catName"
onchange ="$('#category' ).submit() ">

<option>– Selecteaza –</option>

<option value="">Toate</option>

<option value="Telefoane Mobile"> Telefoane Mobile </option>

<option value="Monitoare"> Monitoare </option>

<option value="Laptopuri"> Laptopuri </option>

</select>

</form>

</div>

<div class="col-md-6 col-sm-12">

<span>Filtreaza dupa cuvinte cheie: </span>

<form action="/Home/Search" method="get">

<input type="text" id="searchText" name="searchText" placeholder ="Cauta produse…"
value="@ViewBag.SearchText ">

<input type="submit" value="Cauta">

</form>

</div>

</div>

<div class="row p-t-0">

@foreach (var item in ViewBag.Products)

{

<div class="col-md-3 col-sm-6">

<div class="single -shop-product">

<div class="product -upper">

@if (string.IsNullOrEmpty(item.ImagePath))

{

<img src="@Url.Content( "~/Images/Products/noimage.png" )" alt="">

}

else

{

<img src="@Url.Content(item.ImagePath) " alt="">

}

</div>

<h2><a href="">@item.PName </a></h2>

<span class="p-brand">@item.Brand </span>

<div class="product -carousel -price">

<ins>@String.Format( "{0:c}", item.UnitPrice) </ins>

</div>

<span class="p-unit">

@item.UnitsInStock

@if (item.UnitsInStock > 1 || item.UnitsInStock == 0)

{

<text>bucati</text>

}

else

{

<text>bucata</text>

}

</span>

@if (item.UnitsInStock > 0)

{

<div class="product -option-shop">

@Html.ActionLink( "adauga in cos" , "AddToCart" , "Home", new { id = item.PID },
htmlAttributes: new { @class = "add_to_cart_button" })

</div>

}

</div>

</div>

}

</div>

</div>

}

</div>

Concluzii

Evoluția tehnologiei a produs schimbări radicale ale acestui domeniu din toate punctele de vedere.
HTML -ul oferă posibilitatea de a partaja materiale în toate tipurile de formate, cum ar fi videoclipuri,
slideshow -uri, documente word sau pdf -uri.
HTML est e o formă de marcare orientată către prezentare a documentelor text pe o singură pagină,
utilizând un software de redare specializat, numit agent utilizator HTML. În esență, succesul său rezultă
din accesul prietenesc și eficient la informațiile și cunoștin țele cele mai noi, la formele cele mai evoluate
de prezentare, de asimilare și de evaluare a cunoștințelor.
Există o multitudine de sisteme software care pot defini o pagina web. Cu instrumentul potrivit,
pot fi automatizate diferite procese, cum ar fi def inirea textelor , imaginilor , videoclipurilor și creeri de
conținut.
În primul capitol au fos t prezentate noțiunile de HTML ș i CSS .
Apoi, a fost făcută o abordare a HTML -ului ș i CSS -ului din mai multe perspective împreună cu o
înțelegere a istoricului acestei noțiuni.
În partea finală a primului capitol s -au prezentat beneficiile H TML -ului ș i CSS -ului și diferite
implementări existente .
În cel de -al do ilea capitol, s -au prezen tat noțiunile de Java Script ș i jQUERY.
Apoi, a fost făcută o mică abordare a Java Script ș i jQUERY din mai multe perspective împreună
cu o înțelegere a istor icului acestor noțiuni ș i scurte exemple.
În cel de -al treilea capitol s -au prezentat tehnologiile de implementare a unui site web, dup ă care
s-a facut o introducere în Microsoft Visual Studio 2017 î n care a fost descris cu mici exeple site -ul
Magazinului virtual.
În ultima parte a lucrării, s -a prezentat structura aplicației, modelul de date creat pen tru această aplicație,
dar și detalierea responsabilității părților componente ale aplicației web .

Bibliografie

1. Resource Development Press.
2. Deitel Paul, Deitel Harvey, Deitel Abbey Android: How to Program, Ebook, 2012
3. Brockschmidt Kraig Programming Windows 8 Apps with HTML CSS and JavaScript, Microsoft
Press, 2012
4. Clark Dan, Beginning C# Object -Oriented Programming, Apress, 2011
5. Desjardins Patrick, Visual Studio Condensed, Apress, 2014
6. Jacobson Ivar, The Unified Software Development Process , Addison -Wesley Professional, 1999
7. Nagel C., Evjen B., Glynn J., Watson K., Skinner M., Professional C# 2012 And NET.4.5, John
Wiley & Sons, Inc., 2013
8. Dewson R. – Beginning SQL Server 2008 for Developers , Apress, 2009
9. Nielsen P., White. M., Uttam P., – Microsoft SQL Server 2008 Bible, Wiley Publishing Inc,
USA, 2009
10. Schneider R.D., Gibson D. Microsoft SQL Server All In One Desk Reference, Wiley Publishing
Inc, USA, 2009
11. Entity Framework . (2016, 11 13). Retrieved 11 13, 2016, from Entity Framework:
http://www.entityframeworktutorial.net/what -is-entityframework.aspx
12. Fluent Validation . (2016, 11 13). Retrieved 11 13, 2016, from Github:
https://github.com/JeremySkinner/FluentValidation
13. Frăsinaru, C. (2016). curs Programare Avansată. Iași: Facultatea de In formatică, Universitatea
„Alexandru Ioan Cuza” Iași .
14. Joudeh, T. (2014, Iunie 1). Token Based Authentication using ASP.NET Web API 2, Owin, and
Identity . Retrieved November 16, 2016, from Bit of technology:
http://bitoftech.net/2014/06/01/token -based -authe ntication -asp-net-web-api-2-owin -asp-net-
identity/
15. Microsoft .NET Core . (2016, 11 13). Retrieved 11 13, 2016, from Microsoft:
https://www.microsoft.com/net/core#windows
16. Microsoft . (2016, 11 13). Retrieved 11 13, 2016, from Microsoft: https://msdn.microso ft.com/en –
us/library/z1zx9t92.aspx
17. **** , Microsoft IIS. Disponibil la: http://www.iis.net/
18. **** , Wikipedia Web service. Disponibil la: http://en.wikipedia.org/wiki/Web_service

Similar Posts