Procesarea Paginilor Asp.net

Cuprins ………………………………………………………………………………………….. 3

Introducere …………………………………………………………………………………….. 4

Integrarea temei într-un context teoretic general …………………………………. 5

Programarea …………………………………………………………………………….. 5

Tehnologii ……………………………………………………………………………………… 6

Microsoft Visual Studio …………………………………………………………….. 6

Limbaje de programare ………………………………………………………………7

Limbajul C# ………………………………………………………………………7

Prezentarea generală a temei………………………………………………………………8

Arhitectura N-Tier………………………………………………………………………8

ASP și ASP.NET………………………………………………………………………12

Structura paginilor ASP.NET……………………………………………..13

Procesarea paginilor ASP.NET……………………………………………15

SEO – Search Engine Optimization……………………………………..17

JavaScript, jQuery…………………………………………………………………….18

HTML5 – Canvas……………………………………………………………………..20

Entity Framework……………………………………………………………………..23

Apelarea web serviceurilor ASP.NET cu jQuery AJAX………………..27

Afișarea imaginilor în ASP.NET folosind HttpHandlers………………..32

Concluzii……………………………………………………………………………………….35

Bibliografie…………………………………………………………………………………….36

Introducere

Termenul www sau numit scurt și web, este abreviat din World Wide Web care este totalitatea siturilor / documentelor și informațiilor de tip hipertext legate între ele, care pot fi accesate prin rețeaua mondială de Internet. Documentele, care sunt situate în diferite locații pe diverse calculatoare tip server, pot fi găsite cu ajutorul unui identificator numit URL.

Aceste documente care conțin imagini, texte etc. Sunt afișate cu ajutorul unui web browser, care efectiv descarcă paginile web de pe un server web și le afișează pe „ client ” la utilizator. [1]

O pagină web este o resursă aflată in spațiul web, de obicei aceste fișiere sunt in format HTML, dar există și altfel de fișiere gen XHTML. O pagină web se aseamănă într-o oarecare măsură cu o pagină de ziar.

Pagina web poate conține:

texte de diferite formate

imagini cu formate .gif, .jpeg, .png etc.

fișiere audio

conținut multimedia care poate fi vizualizat de plugin-uri speciale, de exemplu Adobe Flash [2]

Introducerea temei într-un context general

Programarea

Programarea este punerea în ordine cronologică a unor mișcări, operații, acțiuni sau activități astfel încât în final să se realizeze o stare posibilă a unui sistem.

Programarea informatică

Programarea informatică este o informatică de elaborare a produselor – program, a software-urilor după cum se mai numesc necesare activitățiilor realizate cu ajutorul calculatorului. Conține câteva subactivități: specificarea, proiectarea, implementarea, documentarea și întreținerea programului.[3]

4. Tehnologii

4.1. Microsoft Visual Studio

Visual Studio include un set complet de instrumente de dezvoltare pentru generarea de aplicații ASP.NET, Servicii Web XML, aplicații desktop și aplicații mobile. Visual Basic, Visual C++, Visual C# și Visual J# toate folosesc același mediu de dezvoltare integrat (IDE) care le permite partajarea instrumentelor și facilitează crearea de soluții folosind mai multe limbaje de programare. Aceste limbaje permit să beneficieze de caracteristicile .NET Framework care oferă acces la tehnologii cheie care simplifica dezvoltarea de aplicații web ASP și XML Web Services cu Visual Web Developer. [4]

4.2 Limbaje de programare

Un limbaj de programare este un set bine definit de expresii și reguli (sau tehnici) valide de formulare a instrucțiunilor pentru un computer. Un limbaj de programare are definite un set de reguli sintactice și semantice. El dă posibilitatea programatorului să specifice în mod exact și amănunțit acțiunile pe care trebuie să le execute calculatorul, în ce ordine și cu ce date. Specificarea constă practic în întocmirea/scrierea programelor necesare ("programare").

Există două tipuri de limbaje de programare: limbaje generale și limbaje specifice.

Limbajele generale pot fi folosite la rezolvarea oricărui tip de probleme (cel puțin teoretic). Aici se enumeră următoarele: C, C++, C#, Java, JavaScript, Python, Ruby, Pascal, MATLAB.

Limbajele specifice au un scop bine definit, de obicei interacțiunea cu un anumit program sau sistem. Aici se enumeră:

ActionScript – limbajul de scripting folosit de Macromedia Flash

ASP, ASP.NET – pentru scripting web

FoxPro, Visual FoxPro

SQL – pentru interacțiunea cu bazele de date relaționale. [5]

4.2.1. Despre limbajul C#

C# este un limbaj de programare orientat-obiect conceput de Microsoft la sfârșitul anilor 90. Principalii creatori ai limbajului sunt Anders Hejlsberg, Scott Wiltamuth și Peter Golde. A fost dezvoltat ca inițiativă .NET in iulie 2000. Din acel moment, se poate vorbi despre o evoluție spectaculoasă. Mii de programatori C, C++ și Java, au migrat cu ușurință spre C#, grație asemănării acestor limbaje, dar mai ales calitățiilor noului limbaj.

Creatorii C# au intenționat să înzestreze limbajul cu mai multe facilități. Succesul de care se bucură în prezent, confirmă calitățile sale:

Este un limbaj de programare simplu, modern, de utilitate generală, cu productivitate mare în programare.

Este un limbaj orientat pe obiecte.

Permite dezvoltarea de aplicații industriale robuste, durabile.

Oferă suport complet pentru dezvoltarea de componente software, foarte necesare de pildă în medii distribuite. De altfel, se poate caracteriza C# ca fiind nu numai orientat obiect, ci și orientat spre componente.

În strânsă legatură cu Arhitectura .NET (.NET Framework) pe care funcționează, C# gestionează în mod automat memoria utilizată. Eliberarea memoriei ocupate (garbage collection) de către obiectele care nu mai sunt necesare aplicației, este o facilitate importantă a limbajului. Programatorii nu mai trebuie să decidă singuri, așa cum o fac de pildă în C++, care este locul și momentul în care obiectele trebuie distruse.

În C# se scriu de asemenea aplicații pentru sisteme complexe care funcționează sub o mare varietate de sisteme de operare, cât și pentru sisteme dedicate (embeded systems). Acestea din urmă se întind pe o arie largă, de la dispozitive portabile cum ar fi ceasuri digitale, telefoane mobile, MP3 playere, până la dispozitive staționare ca semafoare de trafic, sau controlere pentru automatizarea producției. [6]

Prezentarea generală a temei

Scopul acestei aplicații este de a prezenta prin implementarea unei suite de tehnologii, tehnici esențiale pentru ințelegerea și crearea aplicațiilor web, cum ar fi ciclul de viață a unei pagini web, structura unei pagini ASP.NET, folosirea unui limbaj de marcare cunoscut fiind HTML/HTML5, folosirea unui standard de formatare, interacțiunea cu baze de date, folosirea servicilor web pentru a salva și a aduce date din baza de date, folosirea HttpHandler-ilor pentru afișarea unor imagini și pe ce arhitectură se implementează o aplicație web.

Interfața este o aplicație web creată în Microsoft Visual Studio 2013, tehnologia fiind ASP.NET Web Application și limbajul de programare fiind C#, dar și JavaScript.

5.1. Arhitectura N-tier

Arhitectura N-tier reprezintă un model flexibil de aplicație care are cod reutilizabil. Aplicația fiind structurat în straturi (layere), în situația în care programatorii vor să schimbe una sau mai multe tehnologii, ei trebuie să modifice doar nivelul respectiv, în loc să rescrie toată aplicația. Majoritatea arhitecturilor existente se modelează pe baza unuia dintre aceste două modele: modelul two-tier client/server și three-tier numit și n-tier. Modelele se concentrează asupra partiționării procesării realizate de sistem, fiind responsabile pentru decizia care stabilește pe care calculator și în care spațiu de proces se execută un anumit cod. Arhitectura client-server se referă la modelul generic utilizat în orice athitectură care divide procesarea între două sau mai multe procese, folost de obicei pe două sau mai multe calculatoare.

Prima arhitectură care datează încă de la existența calculatoarelor mainframe, este arhitectura single-tier. Un singur calculator central servea întregii organizații și era accesat prin terminale.

Fig 5.1.1

O altă arhitectură mai simplă arhitecturii n-tier are numele de two-tier. Numele two-tier descrie modul în care procesarea realizată de o aplicație poate fi distribuită într-o aplicație de tip client-server. Procesul client se execută pe o stație de lucru ce interacționează cu un proces server care se desfășoară într-un sistem accesibil într-o rețea. Modelul este reprezentat prin mai multe stații de lucru, care comunică cu nivelul centralizat de date, nivelul de prezentare reprezentând clientul, iar nivelul centralizat de stocare a datelor este serverul.

Fig. 5.1.2

Modelul three-tier ușurează activitatea serverului, prin distribuirea sarcinilor lui pe mai multe calculatoare, extinzând numărul de niveluri, cel puțin trei. Procesul client se execută pe stația de lucru client, procesul server se execută e un calculator server conectat la un calculator gazdă care îi oferă servicii. Modelul N-tier în cazul în care are mai mult de trei niveluri are următoarea caracteristică: procesul client se execută la fel pe orice stație de lucru, în timp ce procesul server se execută pe cel puțin o stație server în mod distribuit. Serverul aplicației este recunoscut ca middle-tier sau nivel de mijloc care se ocupă cu procesarea datelor care nu se încadrează în nici unul dintre celelalte niveluri.

O aplicație N-tier este compusă de obicei din trei straturi, cele 3 straturi a acestei arhitecturi sunt:

Presentation Layer – interfața cu utilizatorul sau nivelul de prezentare

Business Logic Layer – logica aplicației

Data Acces Layer – accesul la baza de date

Există o delimitare între cele trei straturi care promovează reutilizarea codului, respectiv simplificarea, menținerea și îmbunătățirea lui. [7]

Fig. 5.1.3

Aplicația prezentată este structurată pe arhitectura N-tier, având toate cele trei straturi prezentate mai sus: nivelul de prezentare, nivelul logic al aplicației și nivelul de baze de date. De aceea este N-tier și nu Three-tier deoarece am mai adăugat un strat numit Service Layer pentru lucrul cu servicii web.

Fig. 5.1.4

Nivelul de prezentare (Presentation Layer) este responsabil de dezvoltarea și întreținerea interfeței cu utilizatorul și comunicarea cu clasele și obiectele create în nivelul logic sau business layer. Folosind ASP.NET ele sunt reprezentate de paginile aspx, user controls (controale de utilizator). Acest nivel interacționează direct cu nivelul logic.

Fig. 5.1.5 Pagini aspx și user controale

Nivelul logic (Business Logic Layer), este responsabil de schimbul între interfața utilizatorului și accesul la baza de date. Cererile clientului sunt analizate și transmise către următorul nivel prin interogări. Logica aplicației funcționează precum un nivel intermediar, care transmite cereri și rezultate.

Fig. 5.1.6

În figura de mai sus se poate observa că metoda creată GetImages() returnează într-o interfață IQueryable, unde CanvasImageGallery este tipul de dată din model, metoda returnează toate intrările care au ID mai mare decât 0. Această metodă va fi apelată în nivelul de prezentare în interiorul unui eveniment numit Page_Load, într-un control de ASP.NET (asp: repeater). Obiectul canvasImageManager arată că metoda apelată aparține clasei CanvasImageManager, care se află în nivelului logic. (Fig. 5.1.7)

Fig. 5.1.7.

Nivelul de date reprezintă baza de date și serverul pe care aceasta rulează. Bazele de date sunt independente de serverul aplicației și de logica aplicației. Serverul de baze de date ASP.NET folosește SQL Server.

Fig. 5.1.8

5.2. ASP și ASP.NET

ASP sau Active Server Pages este cunoscut și ca ASP Classic, a fost primul limbaj de programare server-side de la Microsoft pentru crearea paginilor web dinamice. Inițial a fost un add-on pentru IIS ( Internet Information Services ) prin Windows NT 4.0 Option Pack, după care a fost inclus în Windows Server ca o componentă gratuită. În prezent a fost depășit de versiunea ASP.NET.

ASP.NET este un set de tehnologii cu cărui ajutor putem crea aplicații și servici web, pagini web dinamice si interactive. Beneficiază de suportul platformei de dezvoltare Microsoft .NET, și este construit pe limbajul comun runtime sau CLR (Common Language Runtime), și este compatibil cu peste 20 de limbaje diferite, iar cel mai folosit este C#. ASP.NET dispune de un set larg de componente, bazate pe XML, oferind un model de programare orientat obiect (OOP), codul este compilat in „limbajul mașină”, ceea ce crește performanțele aplicației web. Este o tehnologie puternică ce permite dezvoltatoriilor sa dezvolte aplicații web care să lucreze cu baze de date.

ASP.NET are o colecție bogată de biblioteci, de clase, precum System.Web care conține clase și interfațe care permit comunicarea între browser și server, System.Web.UI care conține clase pentru creearea paginilor web și multe altele. Se caracterizează prin rapiditatea de dezvoltare dar și prin viteza prin care paginile web se incarcă in browser.

5.2.1. Structura paginilor ASP.NET

În momentul creării unei pagini Asp.Net automat se crează două fișiere. Primul fișier se crează cu extensia .aspx, iar cel de al doilea fișier se crează cu extensia .aspx.cs.

Fig. 5.2.1

Fișierul aspx este partea vizuală a paginii ASP.Net sau se mai numește și markup-ul paginii, iar acest fișier conține controalele propriu-zise care vor fi vizualizate de către utilizator.

Fig. 5.2.2

Fișierul aspx.cs este fișierul cu codul .NET care se mai numește si code-behind, care va fi executat pe server atunci când se face o cerere către pagina respectivă.

Fig. 5.2.3

Fișierul al treilea care se vede in Fig. 5.2.1, se crează automat de Visual Studio, care reprezintă un fel de pod între markup și code-behind. Fiecare control care este creat în markup este reprezentat aici. (Fig. 1.4)

Fig. 5.2.4

Aceste fișiere dint-o aplicație Asp.Net se află într-un director virtual de pe un server Web, iar pentru acest server este necesar să avem serviciul IIS (Internet Information Services).

IIS – reprezintă un set de servicii de Internet destinate serverelor care folosesc sistemul de operare Microsoft Windows.

Fig. 5.2.5 Directorul virtual din IIS

5.2.2. Procesarea paginilor ASP.NET

Când un utilizator accesează o pagină a unui site care este dezvoltat cu Asp.Net, cererea este trimisă de IIS (Internet Information Services) serverul web de la Microsoft către Asp.Net pentru procesare. Pentru înțelegerea modelului de procesare a paginilor ASP.NET este vital cunoașterea fazelor procesării și ordinea în care sunt executate și evenimentele care le ridică. În mare orice pagină ASP.NET parcurge 6 etape importante:

Crearea și inițializarea paginii. ASP.NET creează obiectul paginii, generează controalele definite cu tag-uri în fișierul aspx. În plus dacă cererea este un postback, informația de view state este deserializată și apoi pe baza ei sunt inițializate controalele. La acest pas este generat evenimentul Page.Init. Acesta este rar folosit întrucât unele controale ori nu au fost create ori nu au fost inițializate cu informația din view state. În această etapă operațiile de creare și inițializare sunt efectuate automat de CLR (Common Language Runtime).

Inițializarea paginii din codul aplicației. Evenimentul ce marchează această etapă este Page.Load executat la fiecare cerere chiar dacă este postback. Diferențierea între cele două acțiuni se face prin inspectarea proprietății statice Page.isPostBack. Acest moment este indicat pentru inițializarea controalelor cu date obținute prin operații consumatoare de timp și trebuie inițializate o singură dată.

Validarea. ASP.NET introduce controale noi de validare ce realizează verificarea automată a datelor introduse de utilizatori iar unde este cazul afișează mesaje de eroare. Aceste controale “intră în funcțiune” după încărcarea paginii dar înainte de tratarea celorlalte evenimente. Dacă o pagină a fost validată se poate determina prin proprietatea Page.IsValid

Tratarea evenimentelor. În general evenimentele controalelor Web pot fi clasificate în două categorii: declanșate imediat (butoane, link-uri sau controale ce utilizează funcția JavaScript __doPostBack()) și cele declanșate la o schimbare de stare (de exemplu selectarea unui element dintr-o listă drop-down). În cazul unor controale Web, evenimentele de schimbare de stare pot declanșa postback automat prin setarea pe true a proprietății AutoPostBack.

Legarea automată a datelor (Data bindig). Pentru controalele ce folosesc surse de date exista două momente în care se interoghează sursa de date: unul chiar înaintea evenimentului Page.PreRender și constă în actualizarea sursei și a doilea după tratarea evenimentului în care datele sunt preluate din sursa de date și aduse controalelor la care sunt asignate evenimentul Page.Unload este declanșat după ce codul HTML a fost generat. Evenimentul Page.PreRender semnifică ultima acțiune înainte de generarea codului HTML.

Distrugerea obiectelor. Această fază încheie ciclul de viață al unei pagini Web și constă în distrugerea obiectelor componente ale paginii și este precedată de evenimentul Page.Unload. În acest sens există evenimentul Page.Dispose declanșat când pagina este distrusă de garbage collector.

Termenul Postback se referă la o acțiune specifică pentru o pagină Web interactivă ce constă în trimiterea ei în forma în care se află pe calculatorul utilizatorului înapoi la server pentru procesare. [8]

5.2.3. SEO – Search Engine Optimization

SEO este un proces de perfecționare (favorizare) a vizibilității site-urilor web sau paginilor web în cadrul ordonării rezultatelor căutării în lista făcută de motorul de căutare. O practică foarte populară și apreciată este cea a folosirii Friendly URLs. Acesta practic implică formatarea într-un mod inteligent a legăturilor unui site de la forma dinamică la o structură statică. Astfel, un site cu legături care prezintă o structură de forma:

http://www.licenta.com/Pages/CustomizeGreeting.aspx?greeting=1

poate să fie optimizat să folosească legături URL într-o formă mult mai îmbunătățită:

http://www.licenta.com/greetings/1

În aplicația curentă pentru formatarea URL-urilor am folosit Ionics Isapi Rewrite Filter, sau pe scurt IIRF.

IIRF este un fișier DLL care se instalează pe serverul web. Pentru configurare se crează un fișier cu extensia .INI

Fig. 5.2.3.1 Fișier

Cu IIRF se pot creea și redirecturi. De exemplu, în prima linie observăm că dacă linkul nu conține nimic după ultimul forward slash, redirectează către /home. Iar celelalte sunt reguli de rescriere, care fac să fie Friendly Urls. [9]

Fig. 5.2.3.2

5.3. JavaScript, jQuery

JavaScript 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.

Utilizarea JavaScriptului cel mai des întâlnită este în scriptarea paginilor web. Dezvoltatorii 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.

jQuery este o platformă de dezvoltare JavaScript, concepută pentru 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. Plugin-urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery. Arhitectura sa permite programatorilor să dezvolte subaplicații bazate în biblioteca principală care extind funcțiile de bază jQuery cu funcții specifice plugin-ului. În acest fel biblioteca principală poate ocupa foarte puțin spațiu, iar extensiile necesare în anumite pagini web pot fi încarcate la cerere, doar când este nevoie de ele.

Pentru realizarea aplicației am folosit pluginuri cum ar fi jquery.cookie.js, folosit pentru a crea, a citi și a șterge cookie-uri, jquery.bxslider.js este un plugin pentru a crea un carousel în care sunt niște imagini și se schimbă în funcție de cât timp este setat, jquery.prettyPhoto.js este folosit pentru a mării o imagine pe aceeași pagină.

Fig. 5.3.1 Carousel

Un cookie HTTP este un text special, deseori codificat, trimis de un server unui navigator web și apoi trimis înapoi (nemodificat) de către navigator, de fiecare dată când accesează acel server.

Fig. 5.3.2

Exemplu de citire și verificare de cookie:

Fig. 5.3.3

O pagină nu poate fi manipulată în condiții de siguranță până când documentul nu este "gata". Codul inclus în interiorul $ (documente) .ready () va rula doar în clipa în care dată pagina Document Object Model (DOM) este gata ca codul JavaScript să-l execute. [10]

Se citește cookie-ul din $.cookie(„pageCookie„) într-o variabilă cookie, ca apoi să se verifice valoarea acelui cookie. Acest cookie se setează într-o funcție setCookie(value) care trimite un parametru.

Fig. 5.3.4

Iar această funcție se apelează pe un eveniment de onClick de pe un link, în proiectul linkurile respective sunt cele din navigare.

Fig. 5.3.5

5.3. HTML5 – Canvas

HTML5 este un limbaj pentru structurarea și prezentarea conținutului pentru pagini web, întru-un browser. Este a cincea revizuire a standardului HTML (HyperText Markup Language) și din octombrie 2011 este în curs de dezvoltare. Obiectivele sale principale au fost acelea de a îmbunătăți limbajul cu un suport pentru cele mai recente apariții multimedia în același timp menținândul ușor de citit de oameni și bine înțeles de computere și device-uri. HTML5 aduce multe caracteristici noi, sintactice ca <video>, <audio> sau <canvas>.

Un element din acest limbaj de marcare pe care am studiato și pe care vreau să o prezint este elementul canvas.

Elementul canvas este similar cu elementele <div> sau <a>, ceea ce diferă îi că conținutul elementul canvas este interpretat de JavaScript. Când folosim un element canvas, este important să cunoaștem diferența dintre elementul canvas și contextul canvas.

Elementul canvas este nodul DOM (Document Object Model) real care este încorporat în pagina HTML. Contextul canvas îi un obiect cu proprietăți și metode pe care le putem folosi pentru a creea grafice pe canvas. Contextul poate fi 2D sau WebGL(3D).

Exemplu:

<canvas id=”canvasId” width=”300” height=”300”>

<script type=”text/javascript”>

var canvas = document.getElementById(’canvasId’);

var context = canvas.getContext(’2d’);

context.font = '40pt Calibri';

context.fillStyle = 'blue';

context.fillText('Hello World!');

</script>

Acest exemplu va afișa pe canvas un text Hello World de culoarea albastră și font de Calibri. Font, fillStyle și fillText sunt proprietăți a contextului.

Pentru a crea linii pe canvas folosim metode precum beginPath(), moveTo(), lineTo(), stroke(). Folosim metoda beginPath() pentru a declara că suntem pe cale de a trage o cale nouă. Metoda moveTo() o folosim pentru a poziționa punctul de context urmând metoda lineTo() pentru a desena o linie dreaptă de la poziția de pornire într-o poziție nouă, iar pentru ca linia să fie vizibilă folosim metoda stroke() care setează culoarea, implicit culoarea este neagră.

Pentru aplicația realizată am folosit elementul canvas pentru modul de desen 2D. Pentru a adăuga, modifica texte pe elementul canvas sau poze încărcate pe canvas mai ușor, mai interactiv am folosit o librărie JavaScript având numele de Fabric.js. Fabric oferă un model de obiect lipsă, un strat de interactivitate și o întreagă suită de alte instrumente indispensabile.

Am folosit fabric deoarce oferă un obiect de model simplu dar puternic față de metodele native canvasului, și ne lasă să lucrăm cu obiectele direct.

După exemplul de mai sus, voi da un exemplu utilizând fabric. Identificatorul canvasului este tot același.

var canvas= new fabric.Canvas(’canvasId’);

var text= new fabric.IText(’Hello World’, {

font:’Calibri’,

fontSize: 40,

stroke: blue

});

canvas.add(text);

Inițial se crează o așa numită învelitoare in jurul canvasului nativ, iar după aceea se crează un obiect de tip text și la final adăugăm obiectul canvasului.

Cu metodele native activitatea se desfășoară pe context, în Fabric activitatea se desfășoară pe obiect.

În aplicație utilizatorul are posibilitatea de a încărca imaginile direct pe canvas pentru a putea fi modificate. Procesul de încărcare se întamplă cu o funcție numită FileReader(), în această funcție creez un obiect de tip imagine atribui lățimea și înălțimea imaginii canvasului, iar printr-o metodă drawImage() „desenez” imaginea pe canvas. Pentru a putea modifica poza adăugând text pe el trebuie creat încă un element canvas de tip Fabric peste cel inițial.

Există și o secțiune în care se poate desena pe canvas cu diferite pensule de desenat. Aceste pensule sunt create în jQuery și se pun în aplicare prin evenimente de mouse.

Pe evenimentul de onmousedown creez un o mulțime și un semafor, în mulțime o să fie stocate punctele iar semaforul este folosit pentru a preveni desenarea pe canvas atunci când se mișcă mouseul pe canvas. În interiorul evenimentului de onmousemove prin metode specifice contextului cum ar fi beginPath() declarăm că suntem pe cale de a trasa o line, moveTo() pentru a poziționa cursorul la coordinatele apăsate, iar lineTo() să tragem linia respectivă. Pe evenimentul de onmouseup să setăm semaforul.

Aceste desene create pe canvas se pot salva pe disk, prima dată trebuie să iau datele imaginii de pe canvas prin metoda toDataURL care convertește imaginea canvasului într-un fișier encodat in baza 64 de tip PNG. [11]

5.5. Entity Framework

Entity Framework este un set de tehnologii în ADO.NET care oferă sprijin dezvoltării de aplicații software orientate spre date.

Fig. 5.5.1

La baza Entity Framework-ului stă Entity Data Model (EDM). Acesta este un limbaj comun între structurile de date și modelele de prezentare. EDM-ul definește un limbaj menit să descrie datele fără să descrie modul de stocare a acestuia. EDM-ul înglobează un set de metadate care descriu atât modul în care datele sunt expuse aplicației cât și modul în care datele sunt mapate în stocul de proveniență. Oferă un mecanism de expunere a datelor într-un model optimizat pentru consumatori, în timp ce modelele de mapare sunt optimizate în vederea libertății de a folosi orice fel de structură de date standard.

EDM-ul este un limbaj pentru scheme de entități. Cu ajutorul lui putem defini entități, relații între ele, precum și colecții de entități.

Comunicarea cu baza de date se face prin furnizorii de ADO.NET pentru baza de date respectivă. Pentru ca această comunicare să existe trebuie sa identificăm stringul de conexiune la baza de date.

Pentru a putea crea un Entity Data Model, mai întâi trebuie creat o bază de date la care ne putem conecta. Pentru crearea bazei de date am folosit SQL Server Management Studio.

Fig. 5.5.2 Sql Server Management Studio

După cum se vede în Fig. 5.5.2 am creat baza de date numită DataBaseLicenta, care conține cinci tabele.

În soluția aplicației, mai exact în nivelul de date am creat un element ADO.NET Entity Data Model (EDM).

Fig. 5.5.3 Entiy Data Model

Un EDM poate fi vazut ca legatura dintre aplicatie si baza de date, ne da posibilitatea de a lucra cu modelul conceptual al datelor si nu cu schema bazei de date.

EDM Designerul reprezintă modelul conceptual. Este compusă din entități, asocieri și multiplicitate între entități. Se aseamănă cu structura tabelelor din baza de date, dar se mai pot adăuga sau șterge coloane de care nu este nevoie sau nu sunt folosite în aplicație.

Fig. 5.5.4 EDM designer

Entity Data Model (EDM) folosește următoarele concepte pentru a descrie structura datei:

tip entitate (entity type);

tip asociere (association type);

proprietate (property).

EntityType este un tip de date în model, care descrie structura datei. În Fig. 5.5.5 numele tipului entității îi CanvasImageGallery.

Fig. 5.5.5

AssociationType numit și asociere descrie relațiile din Entity Data Model. O asociere reprezintă o relație între două tipuri de entități, de exemplu FrontImage și InsideImage (Fig. 5.5.4). Entitățile ce folosesc asocieri pot fi accesate prin proprietățile de navigare sau prin “foreign key”.

Property sau proprietate, tipurile entități conțin proprietăți ce definesc structura acestora. Ex. entitatea CanvasImageGallery are proprietățile ID și CanvasImage. (Fig. 5.5.4).

Utilitarele pentru EDM pot genera o clasă derivată din ObjectContext ce reprezintă un container în modelul conceptual. Această clasă este clasa primară în interacțiunea cu baze de date și obiecte entități. O instanță a clasei ObjectContext încapsulează conectarea la baza de date, metadatele care descriu modelul. (Fig. 5.5.6)

Fig. 5.5.6

EntityClient este furnizorul ce gestionează conexiunile, parsează cererile asupra entităților în cereri specifice sursei de date și returnează un data reader folosit de EF pentru a materializa datele din obiecte.

Connection String furnizează informația care îi este necesară unui furnizor să comunice cu baza de date. Include parametrii, cum ar fi numele serverului, numele bazei de date, precum și informația de securitate, cum ar fi numele și parola utilizatorului. [12]

Fig. 5.5.7

5.6 Apelarea web serviceurilor ASP.NET cu jQuery AJAX

Web Service

Un Web Service este o pagină web menită sa fie apelată de un sistem de calcul prin intermediul unei rețele după care răspunsul dat de această pagină să fie folosit de sistemul de calcul.

Au o interfață descrisă print-un modul WSDL (Web Services Description Language) care oferă posibilitatea să fie accesată folosind protocoale de rețea standard de genul SOAP sau HTTP. Serviciile web sunt bazate pe XML sau JSON și întorc clientului un răpuns in format XML sau JSON.

La începutul web-ului, interactivitatea a fost slabă. În aplicațiile web tradiționale de obicei utilizatorii trimiteau o serie de parametrii în forme sau prin URL, cu scopul de a obține un răspuns venit de la server. Serverul returna pagina în format HTML, iar browserul web era responsabil doar de a interpreta codul HTML, nimic mai mult.

Fig. 5.6.1

Pentru a crește interactivitatea, JavaScript a devenit un factor important în acest mediu. Prima abordare a fost de a face unele animații și operații pe partea de client care nu necesitau interacțiune pe partea de server.

Fig. 5.6.2

În cele din urmă, introducerea AJAX (Asynchronous JavaScript and XML) a avut un impact mare asupra aplicațiilor web, deoarce a permis schimbări în părți mici a unei pagini fără a o reîncărca.

Fig. 5.6.3

AJAX (Asynchronous JavaScript and XML)

AJAX este o tehnică de programare pentru crearea de aplicații interactive. Intenția acestuia este să facă paginile web să devină mai rapide și mai acceptate, prin schimbul unor cantități mici de date cu serverul, totul petrecând în fundal ca pagina să nu fie reîncărcată la fiecare acțiune a utilizatorului. Are ca scop creșterea interactivității, vitezei și ușurinței în utilizare a aplicațiilor web.

În aplicațiile web AJAX, când un web service este apelat din aplicația client, returnează un răspuns în format XML care poate să fie parsat de către JavaScript dar acest format este mai greu de folosit. Aici intervine formatul JSON care are următoarele caracteristici majore:

1. Ușor de citit și de scris

2. Ușor de analizat și de generat de către calulatoare

3. Poate fi analizat trivial utilizând procedura de activarea JavaScript – eval(), sau cu ajutorul unei metode din jQuery

4. Suportă aproape toate limbile moderne: ActionScript, C, C#, Java, JavaScript, Perl, PHP, Python și multe altele. [13]

Pentru a începe comunicarea prin jQuery trebuie să implementăm web service-ul.

În aplicația mea, web serviceul se accesează prin intermediul unei pagini aspx numită ImageWebService.aspx,

Fig. 5.6.3

căreia îi este dată ca și referință o clasă având implementate metodele necesare.

Fig. 5.6.4

În această clasă ce se observă în Fig. 5.6.4 am creat metode a căror funcționalitate ajută la realizarea acestei aplicații web.

O metodă creată în această clasă este de a salva imaginile în baza de date.

Fig. 5.6.5

Orice metodă din web service începe cu atributul [WebMethod], care înseamnă că este o metodă web și este accesibil de oriunde. Prin accesibil oriunde se înțelege că creeăm un serviciu în orice limbaj de programare cum ar fi Java, iar acest serviciu se poate utiliza într-o aplicație .Net sau și java.

Metoda de mai sus este apelată pe diferite evenimente fără a reîncărca pagina de fiecare dată, evenimente precum o apăsare de buton sau schimbarea selecției dintr-un control de DropdownList. Aceste evenimente conține cererea către serviciul web prin metoda $.ajax() din jQuery.

Fig. 5.6.6

Metoda $.ajax() efectuează o cerere HTTP asincronă și poate fi personalizat cu mai mulți parametri. Parametri folosiți sunt: type, url, data, dataType, contentType, succes, error.

type – tipul de cerere de care vrem să facem, POST sau GET

url – conține un string cu URL-ul la care este trimisă cererea

data – acest parametru conține datele care o să fie trimise către server

dataType – tipul de dată pe care îl așteptăm înapoi de la server

contentType – când trimitem date către server folosim „application/json”

succes – este apelată când cererea a fost cu succes

error – este apelată când cererea a fost eșuată

În primă instanță creez două variabile cu nume diferite, pe care le inițializez cu un URI de date conținând o reprezentare a imaginii a elementului de canvas în formatul specificat, aici se poate vedea că îi png. URI-ul de date arată în acest format:

Fig. 5.6.7

Creez un obiect cu doi parametrii pe care le inițializez cu valori. Valorile aceștia conțin date care reprezintă imaginile de pe canvas. Reprezentarea unei imagini este codificat in baza 64, după cum se vede și pe Fig. 5.6.7.

O altă metodă de bază pe care am implementată în clasa respectivă și care m-a ajutat la realizarea acestei aplicații este o metodă de a aduce imaginile din baza de date.

La fel ca metoda de a salva imaginile metoda de $.ajax() din jQuery efectuează o cerere HTTP asincronă către server în care tipul cererii este de tip POST. Singura diferență din această cerere este stringul de URL la care v-a fi trimisă cererea, deoarece va diferi metoda.

Afișarea imaginilior folosind HttpHandlers

HttpHandlers sunt primele posibile puncte unde avem acces la cererea făcută către serverul web (IIS) . Atunci când se face o cerere la server pentru o pagină aspx, procesul lucrător de ASP.NET creează HttpHandlerul potrivit pentru solicitarea care răspunde la cerere. Handleri impliciți pentru fiecare tip de cerere sunt setate în fișierul machine.config.

De exemplu fiecare cerere făcută către paginile aspx sunt gestionate de System.Web.UI.PageHandlerFactory, ori de câte ori o pagină este solicitată acest PageHandlerFactory va îndeplini cererea.

Tot ceea ce facem într-un fișier respectiv putem să facem și într-un fișier aspx, dar de aceea folosim acești handler http deoarce sunt mult mai reutilizabile și mai portabile decât fișierele aspx. În aceste fișiere nu există elemente vizuale precum aspx, acești handleri pot fi ușor plasate în propria lor asamblare și refolosite.

Pentru a creea un HttpHandler, prima dată trebuie să implementăm interfața IHttpHandler. Această interfață IHttpHandler conține o proprietate și o metodă.

Proprietatea IsReusable

Metoda ProcessRequest()

Fig. 5.7.1

Proprietatea IsReusable specifică dacă ASP.NET ar trebuie să folosească aceeași instanță a HttpHandlerului pentru mai multe cereri.

Metoda ProcessRequest() este locul unde se pune în aplicare efectiv logica care să se ocupe de cerere.

Crearea unui handler:

Fig. 5.7.2

În ASP.NET acester fișiere sunt numite Generic Handler și au extensia ashx. Extensia ashx este deja mapată la IIS la filtrul ISAPI ASP.NET, și datorită acesteia nu mai trebuie să configurăm handlerul în fișierul web.config.

În interioul fișierului creat se află metoda ProcessRequest() și proprietatea IsReusable. În metoda ProcessRequest() am implementat codul pentru a citi imaginile din baza de date Fig. 5.7.3.

Fig. 5.7.3

În imaginea de mai sus trimit un parametru de id ca un query string către fișierul ashx, ca mai apoi cu ajutorul acelui parametru să aduc imaginea cu idul respectiv.

Pentru afișarea imaginii trebuie setatea sursa imaginii, iar ce apare în sursa imaginii este numele handlerului folosit cu extensia ashx, query stringul care va fi trimis și idul imaginii din baza de date. Această sursă se poate observa la Fig. 5.7.4.

Fig. 5.7.4

Concluzii

După cum am precizat, am dorit ca să prezint o suită de tehnologii, de tehnici pentru crearea și înțelegerea unei aplicații web.

Prin implementarea serviciului web cu metoda $.ajax() din jQuery am constat că, există o separare clară între UI și logică, având un strat de servicii web iar acest strat va forța separarea acestor două preocupări, și să păstreze tot ce este legat de prezentare pe UI, lăsând logica curat și reutilizat. Avantajele folosirii AJAX ar fi că este suportat de toate browserele, reduce latența rețelei, răspunde la interacțiunea cu utilizator, lățime de bandă scăzută. Dezavantajele ar fi că nu prea se poate sau chiar deloc să adaugi la marcaj o pagină cu conținut actualizat, motoarele de căutare nu pot accesa un conținut generat prin AJAX.

La implementarea HttpHandlerilor pentru afișarea imaginilor am putut observa că nu conțin nici un element vizual și din acest motiv pot fi plasați în propriul lor assembly.

Deci la urma urmei pentru a putea crea o aplicație web trebuie să ținem cont de aceste tehnici si tehnologii. Aceste tehnici și technologii sunt menite pentru a face munca dezvoltatoriilor mult mai ușoară, și cu ajutorul acestora să se poată creea aplicații web mai complexe, mai interactive.

Bibliografie

[1] http://www.ro.wikipedia.org/wiki/World_Wide_Web

[2] http://www.ro.wikipedia.org/wiki/Pagin%C4%83_web

[3] http://www.ro.wikipedia.org/wiki/Programare

[4] http://www.ro.wikipedia.org/wiki/Visual_Studio

[5] http://www.ro.wikipedia.org/wiki/Limbaj_de_programare

[6] http://www.cs.ubbcluj.ro/~vcioban/Bistrita/Manuale/CursDotNetSassu.pdf

[7] http://www.revcib.ase.ro/bd-pdf%20elsevier/3-4rom%20pdf/Radu%20Marsanu.pdf

[8] http://www.cs.ubbcluj.ro/~vcioban/Bistrita/Manuale/Manual_ASP.pdf

[9] http://ro.wikipedia.org/wiki/Optimizare_pentru_motoare_de_c%C4%83utare

[10] http://ro.wikipedia.org/wiki/JQuery

[11] http://www.html5canvastutorials.com/tutorials/html5-canvas-element/

[12] http://thor.info.uaic.ro/~iasimin/csharp/C13_14_2012_Entity_Framework.pdf

[13] http://www.ezzylearning.com/tutorial/calling-asp-net-web-services-using-jquery-ajax

[14]http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.all

Matthew MacDonald; Adam Freeman; Mario Szpuszta ,ASP.NET 4 in C# 2010
,Apress,2010

George Shepherd ,Microsoft® ASP.NET 4 Step by Step ,Microsoft Press ,2011

http://blog.belatrixsf.com/web-services-based-architectures/

http://support.microsoft.com/kb/308001