You are on page 1of 261

I. I.1. I.2.

PRINCIPII GENERALE ALE PROIECTRII INTERFEELOR WEB ............................ 5 INTRODUCERE ........................................................................................................................................ 5 REALIZAREA INTERFEELOR WEB UTILIZND LIMBAJUL DE MARCARE HTML ..................................... 6 I.2.1. Ce este HTML ? ................................................................................................................... 6 I.2.2. Structura unui document HTML .......................................................................................... 7 I.2.3. Elemente HTML avansate .................................................................................................... 8
I.2.3.1 Tabele............................................................................................................................................. 8 I.2.3.2 Cadre .............................................................................................................................................. 9 I.2.3.2.1 Cadre interne .......................................................................................................................... 10 I.2.3.2.2 Deschiderea documentelor n alte cadre ................................................................................. 11 I.2.3.3 Layere........................................................................................................................................... 12 I.2.3.4 Formulare..................................................................................................................................... 12

I.3.

I.2.4. Evaluare............................................................................................................................. 16 UTILIZAREA TEHNICII CSS PENTRU FORMATAREA DOCUMENTELOR WEB ........................................... 19 I.3.1. Ce este un stil? ................................................................................................................... 19 I.3.2. Definiii de stil.................................................................................................................... 20
I.3.2.1 Definiii de stil inline .................................................................................................................... 21 I.3.2.2 Definiii de stil ncapsulate (interne) ......................................................................................... 21 I.3.2.3 Definiii de stil extern .................................................................................................................. 23

I.3.3. I.3.4. I.3.5. I.3.6. I.3.7. I.3.8. I.3.9. I.3.10. I.3.11. II. II.1. II.2. II.3. II.4. II.5. II.6. II.7. II.8. II.9. II.10. II.11. II.12. II.13. II.14. II.15. II.16. II.17. II.18. II.19. II.20. III.

Stiluri n cascad ............................................................................................................... 24 Clase de stiluri ................................................................................................................... 24 Stiluri identificator............................................................................................................. 25 Pseudoclase i pseudoelemente.......................................................................................... 26 Stiluri pentru liste............................................................................................................... 28 Casete n CSS ..................................................................................................................... 30 Poziionare n CSS ............................................................................................................. 31 Notaii i uniti de msur................................................................................................ 32 Evaluare............................................................................................................................. 34

MEDIUL DE LUCRU VISUAL WEB DEVELOPER EXPRESS 2008 ........................... 36 MEDIUL DE LUCRU ............................................................................................................................... 36 CUM MANEVRM PANOURILE .............................................................................................................. 37 MENIUL VIEW ...................................................................................................................................... 38 PAGINA DE START ................................................................................................................................ 38 PUBLICAREA UNUI SITE WEB ................................................................................................................ 38 COMPILAREA DINAMIC A SITE-ULUI ................................................................................................... 39 WEB SITE/WEB PROJECT ...................................................................................................................... 39 CREAREA UNUI SITE WEB ..................................................................................................................... 40 DESPRE OPIUNEA LOCATION( FILE SYSTEM, HTTP, FTP).................................................................. 41 CREAREA I UTILIZAREA DIRECTOARELOR........................................................................................... 42 EDITAREA PAGINILOR .......................................................................................................................... 42 SCHIMBAREA PROPRIETILOR ............................................................................................................ 43 SALVAREA MODIFICRILOR ................................................................................................................. 43 DESPRE FIIERELE COD ........................................................................................................................ 43 VIZUALIZAREA PAGINILOR NTR-UN BROWSER WEB ........................................................................... 44 MASTER PAGES .................................................................................................................................... 44 SERVERE WEB N VISUAL WEB DEVELOPER ........................................................................................ 45 ASP.NET DEVELOPMENT SERVER ...................................................................................................... 45 RULAREA SERVERULUI INTEGRAT ....................................................................................................... 46 SECURITATE N ASP.NET DEVELOPMENT SERVER ............................................................................. 46 LIMBAJUL DE SCRIPTING SERVER-SIDE ASP.NET............................................... 47

III.1. STRUCTURA UNEI PAGINI ASP.NET .................................................................................................... 47 III.1.1. Controale ASP.NET........................................................................................................... 49 III.1.2. Ciclul de via al unei pagini web. .................................................................................... 50 III.1.3. Aplicaii rezolvate.............................................................................................................. 51 III.2. LIMBAJUL C#....................................................................................................................................... 53 III.2.1. Vocabularul limbajului ...................................................................................................... 54 III.2.2. Tipuri de date..................................................................................................................... 55 III.2.3. Operatori ........................................................................................................................... 56

Principii generale ale proiectrii interfeelor Web


III.2.4. III.2.5. III.2.6. III.2.7. III.2.8. III.2.9. IV.

Conversii............................................................................................................................ 58 Funcii matematice ............................................................................................................ 59 Instruciuni C# ................................................................................................................... 60 Tablouri n C#.................................................................................................................... 67 iruri de caractere ............................................................................................................. 71 Date calendaristice ............................................................................................................ 73

MODELUL CLIENT-SERVER....................................................................................... 75

IV.1. CONTROALE SERVER WEB .................................................................................................................... 75 IV.1.1. Label .................................................................................................................................. 76 IV.1.2. Button, LinkButton, ImageButton....................................................................................... 76 IV.1.3. TextBox .............................................................................................................................. 78 IV.1.4. CheckBox, CheckBoxList ................................................................................................... 79 IV.1.5. RadioButton ....................................................................................................................... 81 IV.1.6. RadioButtonList ................................................................................................................. 82 IV.1.7. BulletList............................................................................................................................ 83 IV.1.8. Image ................................................................................................................................. 84 IV.1.9. DropDownList.................................................................................................................... 84 IV.1.10. HyperLink ........................................................................................................................ 85 IV.1.11. Table, TableRow, TableCell............................................................................................. 86 IV.1.12. MultiView, View............................................................................................................... 87 IV.1.13. FileUpload ....................................................................................................................... 87 IV.1.14. Evaluare........................................................................................................................... 89 IV.2. POST BACK .......................................................................................................................................... 90 IV.2.1. Evaluare............................................................................................................................. 92 IV.3. CONTROALE PENTRU VALIDAREA DATELOR ......................................................................................... 93 IV.3.1. RequiredFieldValidator ..................................................................................................... 93 IV.3.2. RangeValidator .................................................................................................................. 93 IV.3.3. RegularExpressionValidator.............................................................................................. 93 IV.3.4. CompareValidator ............................................................................................................. 93 IV.3.5. CustomValidator ................................................................................................................ 94 IV.3.6. Evaluare............................................................................................................................. 97 IV.4. CONTROALE SERVER WEB AVANSATE. ................................................................................................. 98 IV.4.1. ImageMap .......................................................................................................................... 98 IV.4.2. Ad Rotator........................................................................................................................ 101 IV.4.3. Calendar .......................................................................................................................... 103 IV.4.4. Evaluare........................................................................................................................... 107 IV.5. CONECTAREA LA O SURS DE DATE A CONTROALELOR ...................................................................... 107 IV.6. PSTRAREA INFORMAIILOR NTRE PAGINILE WEB ........................................................................... 109 IV.6.1. Controlul HiddenField..................................................................................................... 110 IV.6.2. ViewState ......................................................................................................................... 111 IV.6.3. Cookies............................................................................................................................. 113 IV.6.4. Query String..................................................................................................................... 114 IV.6.5. Session ............................................................................................................................. 116 IV.6.6. Application....................................................................................................................... 119 IV.6.7. Evaluare........................................................................................................................... 121 V. INTERACIUNEA CU BAZE DE DATE WEB............................................................ 122 V.1. ROLUL BAZELOR DE DATE........................................................................................................ 122 V.2. ACCESAREA BAZELOR DE DATE WEB..................................................................................... 123 V.3. PROIECTAREA BAZELOR DE DATE........................................................................................... 125 V.3.1. Entiti, instane, atribute, identificator unic ................................................................... 125 V.3.2. Relaii ntre entiti .......................................................................................................... 126 V.3.3. Evaluare........................................................................................................................... 127 V.4. CONFIGURAREA BAZEI DE DATE ............................................................................................. 128 V.4.1. Evaluare........................................................................................................................... 136 V.5. ACCESUL DIRECT LA DATE........................................................................................................ 137 V.5.1. Limbajul SQL- Elemente de baz..................................................................................... 137 V.5.2. Comenzi de manipulare a datelor .................................................................................... 140
V.5.2.1 Comanda SELECT.................................................................................................................. 140 V.5.2.2 Gruparea datelor ..................................................................................................................... 143

4
V.5.2.3 V.5.2.4 V.5.2.5 V.5.2.6 V.5.2.7 V.5.3.1 V.5.3.2 V.5.3.3 V.5.3.4 Sortarea datelor....................................................................................................................... 145 Interogri multiple.................................................................................................................... 146 Comanda UPDATE................................................................................................................. 149 Comanda INSERT .................................................................................................................. 149 Comanda DELETE.................................................................................................................. 150 Crearea tabelelor..................................................................................................................... 151 Modificarea structurii unei tabele .......................................................................................... 152 Redenumirea i tergerea unei tabele ................................................................................. 153 Acordarea / revocarea unor privilegii.................................................................................... 154

V.5.3.

Comenzi de definire a datelor .......................................................................................... 151

V.5.4. Evaluare........................................................................................................................... 156 V.6. MANIPULAREA BAZELOR DE DATE WEB PRIN INTERMEDIUL OBIECTELOR ADO.NET 158 V.6.1. Arhitectura ADO.NET...................................................................................................... 158 V.6.2. Furnizori de date (Data Providers) ................................................................................. 158 V.6.3. Accesul direct la date prin intermediul ADO.NET........................................................... 159 V.6.4. Crearea unei conexiuni .................................................................................................... 160 V.6.5. Command.......................................................................................................................... 168
V.6.5.1 V.6.5.2 V.6.5.3 V.6.5.4 Selectarea datelor. .................................................................................................................... 170 Inserarea datelor. ...................................................................................................................... 170 Actualizarea datelor................................................................................................................... 171 tergerea datelor....................................................................................................................... 171

V.6.6. DataReader....................................................................................................................... 172 V.6.7. Comenzi parametrizate .................................................................................................... 173 V.6.8. Studiu de caz .................................................................................................................... 174 V.7. LUCRUL N MOD DECONECTAT ................................................................................................ 184 V.7.1. DataAdapter..................................................................................................................... 184 V.7.2. DataSet............................................................................................................................. 185 V.7.3. Proiectare DataSet n mediu vizual ................................................................................. 188 V.8. LUCRUL CU MAI MULTE TABELE ........................................................................................................ 193 V.9. PROCEDURI STOCATE (STORED PROCEDURES) ........................................................................... 195 V.10. CONTROALE .NET LEGATE LA DATE .................................................................................................. 198 V.10.1. Controale pentru sursa de date ....................................................................................... 198 V.10.2. Controlul GridView......................................................................................................... 200 V.10.3. Controalele DetailsView i FormView ............................................................................ 207 V.10.4. Alte controale legate la date............................................................................................ 208
V.10.4.1 V.10.4.2 V.10.4.3 V.10.4.4 V.10.4.5 Repeater................................................................................................................................. 208 DataList .................................................................................................................................. 209 DropDownList ........................................................................................................................ 210 CheckBoxList......................................................................................................................... 211 RadioButtonList ..................................................................................................................... 212

V.10.5. Evaluare .......................................................................................................................... 213 VI. SECURITATEA APLICAIILOR ASP.NET ................................................................ 214 VI.1. WINDOWS AUTHENTICATION............................................................................................................. 214 VI.2. FORMS-BASED AUTHENTICATION...................................................................................................... 215 VI.3. SECURIZAREA DIN APLICAIA WEB .................................................................................................... 215 VII. PROIECTAREA I REALIZAREA UNEI APLICAII WEB ........................................ 216 VII.1. REALIZAREA INTERFEEI ................................................................................................................... 216 VII.1.1. MasterPages ................................................................................................................... 216 VII.1.2. Foi de stiluri ................................................................................................................... 222 VII.1.3. Controalele web server din MasterPage ........................................................................ 225 VII.1.4. Conectarea la sursa de date a controalelor din MasterPage ......................................... 229 VII.2. HOME.ASPX ....................................................................................................................................... 233 VII.3. MOVIE.ASPX ...................................................................................................................................... 234 VII.4. DETALII.ASPX .................................................................................................................................... 242 VII.5. UPLOAD.ASPX .................................................................................................................................... 246 VII.6. ADAUGFILM.ASPX ........................................................................................................................... 248 VII.7. CONTACT.ASPX .................................................................................................................................. 254 VII.8. EVALUARE ......................................................................................................................................... 259 VIII. TEST DE VERIFICARE A CUNOTINELOR........................................................... 259

Principii generale ale proiectrii interfeelor Web

I. Principii generale ale proiectrii interfeelor Web


I.1. Introducere
ASP.NET este un set de tehnologii care ne permit crearea de aplicaii web. Este evoluia de la Microsoft Active Server Pages (ASP), dar beneficiaz de suportul platformei de dezvoltare Microsoft .NET. Una dintre cele mai importante caliti ale ASP.NET este timpul redus necesar dezvoltrii aplicaiilor web. Att tehnologia n sine, ct i uneltele de dezvoltare de aplicaii web de la Microsoft (cum ar fi Visual Web Developer Express - VWD) reduc considerabil timpul de dezvoltare al aplicaiilor web fa de alte tehnologii prin simplitatea unui limbaj de programare managed de genul C# sau Visual Basic .NET, prin colecia bogat de biblioteci de clase i controale .NET care ofer foarte mult funcionalitate out of the box, prin orientarea pe construirea de aplicaii web a mediului de dezvoltare VWD. Chiar dac ASP.NET este gndit pentru a dezvolta aplicaii web foarte complexe prin faptul c se bazeaz pe .NET, prin faptul c se insist pe un model de dezvoltare OOP, respectiv pe separarea interfeei de logica aplicaiei totui, este extrem de simplu ca folosind ASP.NET s dezvoltm aplicaii mici, de genul magazinelor online, al aplicaiilor care sunt pur i simplu un front-end pentru o baz de date, sau al site-urilor personale. ASP.NET cuprinde toate tehnologiile necesare pentru a dezvolta o aplicaie web, scriind cantitatea minim de cod. Limbajele de programare care pot fi utilizate pentru a crea aplicaii ASP.NET sunt cele suportate de platforma .NET cum sunt Visual Basic .NET i C#, iar o alt caracteristica importanta a acestor limbaje (nafara faptului c sunt managed) este ca au fost create avnd n vedere paradigma programrii orientat pe obiecte. Totul din .NET, i evident din ASP.NET, este un obiect. Evident, orice site / aplicaie web trebuie s fie gzduit pe un server pentru a putea fi utilizat. Chiar dac n capitolele viitoare vom discuta mai mult despre instalarea aplicaiilor ASP.NET, aici a dori s prezint pe scurt variantele de gzduire. Pentru o persoan / companie care dorete s beneficieze de o aplicaie ASP.NET, dup ce a fost dezvoltat, trebuie instalat undeva. Presupunnd c ea a fost dezvoltat pentru .NET, aplicaia are nevoie de un server web IIS (internet Informations Services). Exist dou variante de a gzdui aplicaiile ASP.NET: (1) intern, pe serverele proprii sau (2) extern, la o firm care ofer servicii de gzduire (hosting). Decizia trebuie luat innd cont de civa parametri:

Costul de mentenan. Intern cost administrarea serverelor cu tot ce presupune asta: hardware, software, specialiti. Extern cost un abonament fix pe lun/an. Securitatea. Dac vorbim de o aplicaie extrem de important i care manipuleaz informaii sensibile, probabil vom dori s fie sub controlul propriu. Etc. Pentru programatorii care doresc s aib un site dezvoltat din pasiune sau pentru a

nva, dar vor totui s l aib instalat undeva, variantele de mai sus devin: (1) acas, pe Windows XP / Vista cu IIS; (2) la o firm care ofer servicii de hosting gratuit. Da, exist variante de acest gen, unde v putei instala propriul site ASP.NET fr s v coste nimic (cutai pe www.live.com asp.net free hosting). Pe perioada dezvoltrii unei aplicaii web, nu este nevoie ca aceasta s fie gzduit pe un server IIS, ci poate fi rulat din Visual Web Developer folosind serverul web integrat (vezi mai multe n capitolul II).

I.2. Realizarea interfeelor Web utiliznd limbajul de marcare HTML


De ce HTML? este simplu de neles i de utilizat poate fi creat utiliznd orice editor de texte (este un fiier ASCII) ofer structurarea formatrii este independent fa de platform

I.2.1. Ce este HTML ?


HTML 1 reprezint scheletul oricrei pagini Web, el descriind formatul primar n care documentele sunt vizualizate i distribuite pe Internet. HTML nu este un limbaj de programare, deci nu vei lucra aici cu variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii Web: titluri, liste, tabele, paragrafe, legturi cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. Fiind un limbaj de marcare, el utilizeaz etichete (marcaje 2) ce dau indicaii browsere-lor cu privire la ierarhizarea i afiarea informaiilor.

1 2

Hypertext Markup Language n englez tags n englez

Principii generale ale proiectrii interfeelor Web

I.2.2. Structura unui document HTML


Etichetele HTML sunt de dou tipuri: etichete container 3 Etichetele container sunt de forma: <tag> bloc de text </tag> specificnd formatul n care va fi afiat textul coninut ntre eticheta de nceput i cea de final. Majoritatea etichetelor sunt de acest tip. O particularitate a etichetelor container este c, n cazul unora dintre ele, prezena etichetei de nchidere (</tag>) este opional. etichete vide 4 Etichetele vide au forma: <tag>. Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente, ca de exemplu: nceput de paragraf, sfrit de linie, linie orizontal i altele. Astfel ele dau indicaii browserului despre elementul introdus i despre cum s afieze acel element. Un document HTML este structurat astfel: 1. zona head (antet) cu etichetele <head> </head> 2. zona body (corp) cu etichetele <body> </body> sau <frameset> </frameset> Exemplu: codul HTML prezentat n acest exemplu utilizeaz urmtoarele marcaje 5 :
<p>-pentru definirea unui paragraf <hr>-pentru trasarea unei linii orizontale <font>-pentru formatarea fontului <img src=>-pentru inserarea unei imagini <i>-pentru definirea unui stil nclinat <html> <head><title>Exemplu</title></head> <body bgcolor=gray leftmargin="100" topmargin="50"> <body > <p>Linie orizontala de culoare albastra si grosime 2 <hr color=blue size=3> <p><font face="Arial" color="red" size="4"> Textul este scris cu fontul "Arial", culoare rosie si marime 7. <p><i>Am inserat o imagine</i><img src="i7.gif" border=5> </body> </body> </html>

3 4

container tags n englez empty tags n englez 5 aceste elemente au fost studiate la Tehnologia informaiei i comunicaiilor, n clasa a IX-a

I.2.3. Elemente HTML avansate


I.2.3.1 Tabele
Tabelele ne permit s construim o reea dreptunghiular de domenii, fiecare domeniu avnd propriile opiuni de formatare: culoarea fondului, culoarea textului, alinierea textului etc. Prezentarea datelor sub form de tabele ofer importante avantaje: claritate, sistematizare, posibiliti de comparare. Marcarea unui tabel se efectueaz printr-un tag de introducere a tabelului i de definire a atributelor globale. Acesta include i definiiile pentru liniile i celulele tabelului. Sintaxa general pentru declararea unui tabel este:
<table> <caption>...</caption> <TR><TH><TH> ... </TR> <TR><TD><TD> ... </TR> ... <TR><TD><TD> ... </TR> </table>

unde etichetele: <table></table> <tr></tr> <td></td> <th></th> <caption></caption> delimiteaz tabelul delimiteaz o linie a tabelului delimiteaz o celul de date a tabelului delimiteaz o celul a primei linii din tabel (a capului de tabel) delimiteaz titlul tabelului

Atributele etichetelor table i td sunt: Atribut border width height bgcolor background cellspacing cellpadding align valign colspan rowspan Semnificaie stabilete limea bordurii stabilete limea stabilete nlimea stabilete culoarea de fundal stabilete imaginea de fundal stabilete distana dintre celule stabilete distana dintre marginea celulei i coninut aliniaz pe orizontal coninutul (left, right, center) aliniaz pe verticalal coninutul (top, bottom, middle) unete celula cu cea din dreapta ei stabilete limea bordurii table * * * * * * * td * * * * * * * *

Exemplu: pagina urmtoare conine un tabel fr formatri.


<body> <h3 align=left >tabel</h3> <table> <tr><td>HTML</td><td>TABELE</td></tr> <tr><td>FORMULARE</td> <td>CADRE</td></tr> </table> </body>

Principii generale ale proiectrii interfeelor Web

Exemplu: pagina urmtoare conine un tabel cu bordur, avnd culoare stabilit de fundal, cu celule unite.
<body> <h3 align=left >tabel</h3> <table border=2 bgcolor=gray> <tr><td rowspan=3>HTML</td><td>TABELE</td></tr> <tr><td>FORMULARE</td><td bgcolor=red>ASP</td></tr> <tr><td>CADRE</td><td bgcolor=red>Visual Web DevExpress 2008</td> </tr> </table></body></html>

I.2.3.2 Cadre 6
Exemplele prezentate anterior ncrcau o singur pagina HTML n fereastra browserului. Sunt i situaii n care imaginea afiat de browser este format din mai multe pagini HTML numite cadre. Caracteristica acestor pagini este c perechea de etichete <body> </body> este nlocuit de <frameset> </frameset>, iar n interiorul lor cadrele sunt delimitate de <frame> i </frame>. Observaii: Exist browsere care nu suport cadre. Pentru acestea se utilizeaz n interiorul blocului <frameset> eticheta <noframes> </noframes>. Dac browserul poate s interpreteze cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n zona <noframes> </noframes> va fi singurul care va fi recunoscut i afiat.

Atributele etichetei frameset sunt: Atribut cols Semnificaie mparte pagina n coloane i are valori exprimate n procente din dimensiunea ferestrei sau numr de pixeli sau * 7 (spaiul rmas) rows mparte pagina n rnduri cu aceleai valori ca la cols bordercolor stabilete culoarea tuturor chenarelor conform modelului #rrggbb 8 frameborder permite/inhib afirea chenarelor cu valorile yes sau no

n englez frames dac mai multe elemente din list sunt configurate cu *, atunci spaiu disponibil rmas se va mpri n mod egal ntre ele 8 culorile pot fi precizate prin nume sau prin construcia #rrggbb, unde r(red), g(green) i b(blue) sunt cifre hexazecimale
7

10

Cadrele sunt introduse prin perechea de etichete <frame> </frame>, i suport atributele: Atribut name src bordercolor noresize scrolling frameborder marginheight marginwidth Semnificaie stabilete numele asociat cadrului stabilete fiierul sau adresa fiierului introdus stabilete culoarea chenarului cadrului curent conform dezactiveaz posibilitatea vizitatorului de a redimensiona cadrul permite/inhib adaugarea barelor de defilare cu valorile yes no si auto stabilete dac se afieaz chenarul cadrului (1-implicit) sau nu (0) permite stabilirea distanei n pixeli dintre coninutul unui cadru i marginile verticale ale cadrului permite stabilirea distanei n pixeli dintre coninutul unui cadru i marginile orizontale ale cadrului limea total.

Exemplu: pagin cu dou cadre verticale n proporia 30% i 70% din Cadrul din dreapta este mprit la rndul su n dou cadre orizontale.
<frameset cols="30%,*"> <frame src="f1.html" name="f1"> <frameset rows="40%,*"> <frame src="f2.html" name="f2"> <frame src="f3.html" name="f3"> </frameset > </frameset>

I.2.3.2.1 Cadre interne


Un cadru intern este specificat prin intermediul marcajului <iframe> </iframe>. Acesta

definete o arie rectangular n interiorul documentului, arie n care browserul va afia un alt document HTML complet, inclusiv marginile i barele de derulare. Un cadru intern se insereaz ntr-o pagin Web n mod asemntor cu o imagine, n interiorul blocului <body>. Exemplu: pagin cu trei link-uri; acestea deschid paginile referite de ele n cadrul intern din centrul paginii.
<html> <head><title>Cadre interne</title></head> <body> <a href="t1.html" target="mijloc">link 1</a> <a href="t2.html" target="mijloc">link 2</a> <a href="c1.html" target="mijloc">link 3</a> <center> <iframe width="60%" height="50%" name="mijloc" src="c2.html"> </iframe> </center> </body> </html >

Principii generale ale proiectrii interfeelor Web

11

I.2.3.2.2 Deschiderea documentelor n alte cadre


Dac ntr-unul dintre documentele deschise n cadru exist link-uri, acestea vor deschide paginile referite de ele n cadrul curent. Acest comportament se poate schimba prin plasarea n eticheta <a> a atributului target, care precizeaz numele ferestrei (cadrului) n care se va ncrca pagina nou referit de legtur, conform sintaxei:
<a href="URL" target="nume_cadru"> </a>

Exemplu: pagin cu dou cadre de tip coloan. n cel din stnga se va deschide documentul c5.html, iar n cel din dreapta, documentul c7.html. Cel de-al doilea cadru a fost numit "cadru_dreapta".
<frameset cols="20%, *"> <frame src="c5.html"> <frame src="c7.html" name="cadru_dreapta"> </frame>

c5.html: acest document conine patru link-uri. Prin intermediul atributului target am specificat faptul c toate legturile ncarc paginile referite n cadrul din dreapta. c5.html
<body> <a href="t2.html" target="cadru_dreapta">Tabele</a><br> <a href="t1.html" target="cadru_dreapta">Cadre</a><br> <a href="t3.html" target="cadru_dreapta">Formulare</a><br> <a href="c7.html" target="cadru_dreapta">Home</a><br> </body>

Atributul target al etichetei <frame> accept anumite valori predefinite:


Atribut Semnificaie

_self _blank _parent _top

ncrcarea noii pagini are loc n cadrul curent ncrcarea noii pagini are loc ntr-o fereastr nou, anonim ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta exist, altfel are loc n fereastra curent a browserului ncrcarea noii pagini are loc n fereastra browserului ce conine cadrul curent

Exemplu: pagin cu 3 link-uri n care atributul target ia 3 valori.


<a href="t1.html" target="_blank">Aceasta legatura incarca pagina t1.html in alta fereastra</a><br> <a href="c1.html" target="_self">Aceasta legatura incarca pagina c1.html in fereastra curenta</a><br> <a href="c2.html" target="_parent"> Aceasta legatura incarca pagina c2.html in fereastra parinte</a><br>

12

Observaii: Utilizarea cadrelor prezint o serie de avantaje: uurina n navigare reducerea timpilor de ncrcare i o serie de dezavantaje: indexarea paginii de ctre motoarele de cutare este mai dificil exist browsere care nu suport cadrele; este recomandat s existe pentru fiecare astfel de pagin i o versiune fr cadre, ceea ce implic un efort suplimentar.

I.2.3.3 Layere 9
Layer-ele sunt elemente HTML asemntoare frame-urilor, adic sunt nite containere pentru orice altceva ar putea intra ntr-o pagina HTML, dar spre deosebire de acestea, se pot suprapune (ca i regiunile unei hri). Etichetele <layer></layer> definesc un layer. Atributele etichetei <layer> sunt:
Atribut Semnificaie

name left/ top bgColor width/ height visibility src

stabilete numele asociat layer-ului stabilesc poziia n pagin a layer-ului stabilete culoarea de fundal a layer-ului stabilesc dimensiunile layer-ului permite/inhib vizibilitatea layer-ului prin valorile SHOW-implicit/HIDE stabilete adresa fiierului care conine informaiile ce sunt preluate n layer
<layer left=100 top=100 bgcolor=red> Am definit un layer </layer>

Observaii: Putem avea un layer n alt layer. n acest caz valorile atributelor left i top ale layer-ului din interior vor indica poziia acestuia fa la marginea de sus i marginea din stnga a layer-ului care l cuprinde. Layer-ele sunt acceptate doar de versiunile de la Netscape 4.0 n sus.

I.2.3.4 Formulare
Un formular este un ansamblu de zone active alctuit din casete combinate, cmpuri de editare, butoane radio, butoane de comand etc. Formularele asigur construirea unor pagini Web care permit utilizatorilor s introduc informaii i s le transmit serverului. O sesiune cu o pagin Web ce conine un formular cuprinde dou etape:

straturi

Principii generale ale proiectrii interfeelor Web utilizatorul completeaz formularul i expediere) datele nscrise n formular.

13

trimite serverului (prin apsarea butonului de

o aplicaie dedicat de pe server (un script) analizeaz informaiile transmise i, n funcie de configuraia scriptului, fie stocheaz datele ntr-o baz de date, fie le transmite la o adres de mail indicat de dumneavoastr. Dac este necesar, serverul poate expedia i un mesaj de rspuns utilizatorului.

Un formular este definit ntr-un bloc delimitat de etichetele <form> </form>. n interiorul blocului sunt incluse: elementele formularului, n care vizitatorul urmeaz s introduc informaii, un buton de expediere, la apsarea cruia, datele sunt transmise ctre server, opional, un buton de anulare, prin care utilizatorul poate anula datele nscrise n formular. Cele mai importante atribute ale etichetei <form> sunt:
Atribut Semnificaie

action

comunic browserului unde s trimit datele introduse n formular. n general valoarea atributului action este adresa URL a scriptului aflat pe serverul care primete datele formularului:
<form action="http://www.yahoo.com/cgi-bin/fisier.cgi">

method

precizeaz metoda utilizat de browser pentru expedierea datelor formularului get (valoarea implicit) - datele din formular post - folosit cel mai des. n acest caz datele sunt expediate separat. sunt adugate la adresa URL precizat de Sunt permise cantiti mari de atributul action (nu sunt permise cantiti date. mari de date)

Calea prin care informaiile introduse ntr-un formular pot parveni creatorului paginii este folosirea comenzii mailto:
<a href="mailto:autor@domeniu.com">

Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Aceasta este utilizat mpreun cu urmtoarele atribute:
Atribut Valoare Element introdus Semnificaie

text radio type checkbox button

caset de text buton radio csu de validare buton de comand

permite introducerea unui ir de caractere pe un singur rnd permite alegerea, la un moment dat, a unei singure variante din mai multe posibile permite selectarea sau deselectarea unei opiuni permite declanarea unei operaii atunci cnd utilizatorul execut click sau dblclick pe suprafaa

14

acestuia este butonul a crui activare declaneaz operaiunea de trimitere a datelor catre server reset este butonul a crui activare readuce controalele din formular la valorile lor iniiale image permite nlocuirea unui buton submit cu o imagine specificat password caset de este similar controlului text, diferenele text special constnd n faptul c datele introduse de utilizator vor fi afiate printr-un caracter "masc" (ex: "*") pentru a oferi un anumit grad de confidenialitate. Este folosit de obicei la introducerea unor parole. hidden cmp ascuns permite introducerea n formular a unui cmp ascuns file permite expedierea coninutului unui fiier a crui adres URL este submit buton de transmitere buton de resetare imagine transmis prin intermediul atributului value sau poate fi tastat ntrun cmp de editare ce apare odat cu formularul sau poate fi selectat prin intermediul unei casete de tip File Upload sau Choose File care apare la apsarea butonului Browse din formular.
<input type="file" name="file">

name value checked

permite ataarea unui nume fiecrui element al formularului permite atribuirea unei valori iniiale unui element al formularului are rolul de a preseta o anumit opiune, pe care ns utilizatorul o poate schimba, dac dorete size seteaz numrul de caractere al csuei de text afiate maxlength seteaz numrul maxim de caractere al csuei de text afiate Cu ajutorul etichetei <textarea> </texarea> putei insera n pagin o caset de text multilinie care permite vizitatorului s introduc un text mai lung, care se poate ntinde pe mai multe linii.
<textarea name="adresa" rows=2 cols=30></textarea>

Exemplu: pagina urmtoare conine elemente de mai multe tipuri ncadrate ntr-un formular unic. Pentru alinierea elementelor utilizate pentru informaiile personale am utilizat un tabel.

Principii generale ale proiectrii interfeelor Web

15

Etichetele <select> i <option> permit introducerea ntr-un formular a unui meniu derulant. Fiecare opiune care face parte din blocul <select> se introduce prin eticheta <option>. Atributele etichetei <select>:
Atribut Semnificaie

name size multiple

ataeaz listei un nume (utilizat n perechile name=value) expediat serverului precizeaz cte elemente din list sunt vizibile la un moment dat pe ecran, valoarea implicit fiind 1 permite selectarea mai multor valori din cadrul unei liste de selecie

Atributele etichetei <option>:


Atribut Semnificaie

value

primete ca valoare un text care va fi expediat serverului n perechea name=value; dac acest atribut lipsete, atunci ctre server va fi expediat textul ce urmeaz dup <option>:
<option value=1>Exemplu</option> <option value=2 selected>Exemplu</option>

selected

permite selectarea prestabilit a unui element al listei

Exemplu: pagina urmtoare conine o list derulant.

16

I.2.4. Evaluare
1. Care dintre urmtoarele expresii HTML pentru introducerea unui hyperlink, este corect din punct de vedere sintactic?
a) <a url="http://www.microsoft.com/express/download/default.aspx">Visual Studio 2008 Express Editions</a> b) <a name="http://www.microsoft.com/express/download/default.aspx">Visual Studio 2008 Express Editions</a> c) <a href="http://www.microsoft.com/express/download/default.aspx">Visual Studio 2008 Express Editions </a> d) <a>http://www.microsoft.com/express/download/default.aspx </a>

2. n care dintre codurile HTML urmtoare chenarul tabelului nu este afiat?


a) <table border></table> b) <table border="0"></table> <table bgcolor="white"> <tr bgcolor="red"> <td bgcolor="gray">c1 <td>c2 </table> c) <table border="-1"></table> d) <table border=no></table>

3.Urmtorul cod HTML genereaz un tabel cu o linie i dou celule.

Ce culoare vor avea cele dou celule? a) ambele vor fi albe b) ambele vor fi roii

Principii generale ale proiectrii interfeelor Web c) c1 va fi alb i c2 gri d) c1 va fi gri i c2 roie

17

4. Cu ce putem completa codul HTML pentru a obine tabelul din figur?


<table border="1"> <tr> <th>Nume</th> <th ________________>Limbaje de programare studiate</th> </tr> <tr> <td>Mihai</td><td>C#</td> <td>Java</td> </tr> </table>

a) rowspan=1 5. Secvena :

b) colspan=2

c) rowspan=2

d) colspan=1

<frameset cols=20%,*> <frame src="A.html"> <frameset rows=40%,*> <frame src="B.html"> <frame src="C.html"> </frameset> </frameset>

are ca rezultat : 6. Cte cadre sunt create prin secvena de cod HTML de mai jos?
<frameset rows="60%,*"> <frame src="Despre.html" name="titlu" id="titlu" scrolling="No" noresize> <frameset cols="150,*"> <frame src="Frame.html" name="continut" id="continut" scrolling="Auto"> <frame name="main"> </frameset> </frameset>

a) 2

b) 5

c) 3

d) 4

7. Fie urmtoarea secven de cod:


<form action="mailto:adresa@yahoo.com" method="post"> <input type="radio" name="opt" value="inf">Informatica <input type="radio" name="opt" value="fiz">Fizica <input type="radio" name="opt" value="chim">Chimia <input type="radio" name="opt" value="bio">Biologia </form>

Dac este bifat opiunea Informatica, care este perechea nume/valoare care va fi transmis serverului? a) "opt=Informatica" b) "opt=inf"
<select name="lista" size=2> <option selected>optiunea1 <option >optiunea2

c) "inf=Informatica" d) "radio=inf"

8. Cte elemente sunt vizibile si cte sunt selectate n lista urmtoare?

18 <option>optiunea3 <option selected>optiunea4 </select>

a) un element vizibil, dou selectate b) dou elemente vizibile, dou selectate

c) patru elemente vizibile, dou selectate d) dou elemente vizibile, unul selectat

9. Pentru a grupa un numr de butoane radio, acestea trebuie s aib aceeai valoare pentru atributul: a) type b) value c) id d) name 10. Secvena urmtoare de cod genereaz:
<ul> <li>TIC</li> <ul><li>Internet</li> <li>HTML</li></ul> <li>Informatica</li></ul>

a) b) c) d)

o list cu 4 elemente 2 liste imbricate cu cte 2 elemente fiecare 2 liste neimbricate cu cte 2 elemente fiecare 4 liste

11. Scriei codul HTML care s afieze tabelul: 12. Scriei codul HTML care s afieze cadrele de mai jos. Imaginile afiate sunt distincte i nu sunt neaprat identice cu cele din exemplu.

13. Scriei codul HTML pentru realizarea urmtorului formular: 14. Pornind de la coninutul fiierului alturat, mbuntii aspectul paginii parcurgnd urmtorii pai: Utilizai o imagine de fundal . Introducei tag-urile speciale de deplasare spre dreapta a titlului. Modificai structura tabelului astfel nct primul rnd s conin o singur celul. Alegei o culoare pentru fundalul celulei. Introducei n celulele tabelului de mai jos cte o imagine. Creai cte o legtur de la fiecare imagine la fisierul grafic corespunztor. Modificai dimensiunea bordurii tabelului la 5 i centrai tabelul. Introducei n documentul HTML urmtoarea list utiliznd culoarea preferat pentru font: Liste 1. HTML-iniiere 2. HTML-elemente avansate Formatare Tabele paragrafe Cadre Imagini

Principii generale ale proiectrii interfeelor Web Formulare

19

I.3. Utilizarea tehnicii CSS 10 pentru formatarea documentelor Web


De ce CSS?

Aplicarea stilurilor reprezint o extindere important a posibilitilor de stilizare, evitnd utilizarea de fiiere grafice mari ce determin ncetinirea ncrcrii paginilor i manipularea lor greoaie.

Folosind stilurile HTML putei fi siguri c vizitatorii paginii dumneavoastr vor vedea pagina exact aa cum a fost ea proiectat.

I.3.1. Ce este un stil?


A stiliza nseamn a da unui obiect o form corect i expresiv. Un stil reprezint o colecie de valori ale atributelor elementelor unui document, valori care pot fi aplicate ntregului document sau doar unei pri din acesta. Aceste atribute pot fi: mrimea, grosimea, tipul i culoarea fontului, marginile, paragrafele i orice altceva ce poate influena aspectul unui element, deci a unei pagini. Gruparea lor n stiluri permite designer-ului s aplice aceeai colecie la diferite pri ale unui document. Folosirea stilurilor reduce considerabil efortul depus atunci cnd dorii s aducei modificri aspectului i aranjrii elementelor din paginile dumneavoastr. n loc s parcurgei fiecare document n parte i s facei modificri asupra fiecrui element, operai modificri numai asupra foii de stiluri care stilizeaz aceste elemente. Sintaxa general a unei declaraii de stil este:
list_selectori{proprietatea1:list_valori1; proprietatea2:list_valori2; proprietatean:list_valorin; }

Selectorii sunt utilizai pentru determinarea elementelor HTML asupra crora vor fi aplicate stilurile. Urmtorul segment de cod definete proprietile font, font-size, color i text-align pentru nivelele de titlu H1, H2 i H3:
H1,H2,H3 {font-family:Arial,Garamond;text-align:center} 11 H1 {font-size:18px;color:red;background-color:gray} H2 {font-size:16px;color:blue}
10
11

Cascading Style Sheets n englez n scrierea definiiei unui stil este posibil s grupm selectorii n liste, separai prin virgul

20 H3 {font-size:14px;color:blue}

I.3.2. Definiii de stil


Stilurile pot fi aplicate elementelor unui document n trei moduri: La nivel de element 12: stilurile sunt incluse ca atribute n cadrul etichetelor HTML din document. Aceasta nseamn c ele vor afecta doar elementul asupra cruia sunt aplicate. Este o modalitate mai puin utilizat, deoarece contrazice principiul general al stilurilor, acela de a simplifica i de a face mai lizibil codul documentului HTML. ncapsulate 13: stilurile sunt incluse n documentul asupra cruia se aplic, i anume n seciunea <head> a documentului, prin utilizarea marcajului <style>. Legate 14: stilurile sunt definite n fiiere separate de documentul HTML. Documentul face apel la foaia de stiluri prin intermediul etichetei <link>. Avantajul folosirii foilor de stiluri externe este dublu. Pe de-o parte, ele se pot aplica la nivelul mai multor documente HTML, realiznd astfel o legtur de stil ntre ele, lucru deosebit de util la construirea unui site. Pe de alt parte, acelai document poate folosi foi de stiluri diferite, oferind vizitatorului posibilitatea de a opta la un moment dat, pentru unul sau altul dintre ele, n funcie de propriile preferine. Includerea stilurilor ntr-un document HTML:
<html> <head> <link rel="stylesheet" type="text/css href=numefisier.css"> legate

<style> H1 {color: #008000; font-weight: bold} P {font-family: Arial; color: #800080; font-size: 14px} </style>

ncapsulate

</head> <body>

</body>
12
13

inline n englez embedded n englez 14 linked n englez

Principii generale ale proiectrii interfeelor Web


</html>

21

I.3.2.1 Definiii de stil inline


Spre deosebire de stilurile ncapsulate i de foile de stiluri externe, stilurile inline fac parte chiar din corpul documentului HTML. Ele se aplic prin folosirea atributului style n asociere cu etichetele HTML standard. Definiiile de stil inline se aplic numai asupra elementelor incluse ntre etichetele care au asociat atributul style. Din acest motiv, dac dorim s repetm n alt loc din cuprinsul documentului aceleai definiii de stil, ele vor trebui scrise din nou, ncrcnd astfel documentul HTML. Totui, utilitatea stilurilor inline este aceea c fiind definite chiar n cuprinsul documentului, definiiile lor sunt prioritare fa de cele din stilurile ncapsulate sau externe.
<P style="color: red; font-family: Arial; font-weight: bold"> Stil inline pentru acest paragraf</P>

Exemplu: pagina urmtoare conine o definiie de stil pentru al II-lea titlu de nivel 3 15 care nu se aplic i celorlalte titluri de acelai nivel.

I.3.2.2 Definiii de stil ncapsulate (interne)


Crearea unui astfel de stil se realizeaz folosind eticheta <style> </style>. Eticheta de stil este plasat n antetul documentului adic n seciunea <head>.

15

textele cuprinse ntre etichetele <H3> </H3>

22

Exemplu: pagina conine o definiie de stil care realizeaz afiarea tuturor titlurilor de nivel 1 cu caractere bold i culoare gri. Textele incluse ntre etichetele <p> </p> vor fi afiate cu fontul arial, de mrime 12 i culoare violet. De asemenea, este creat un stil "stil_text" care poate fi aplicat oricrui text. Prin intermediul su, textul este afiat cu caractere de dimensiuni mai mari i culoare roie.

Exemplu: pagina conine o definiie de stil ncapsulat i dou de stil inline.

Atunci cnd lucrai cu documente HTML deja existente, crora dorii s le aplicai stiluri inline, este recomandat s folosii etichetele <div> i <span>. Acestea v permit s aplicai stilurile fr a afecta codul HTML deja existent sau aspectul paginii n browserele care nu suport stiluri. Eticheta <div> funcioneaz asemntor cu eticheta <p>, marcnd un ntreg bloc de coninut, dar fr a genera linii albe ntre paragrafe.

Principii generale ale proiectrii interfeelor Web

23

Eticheta <span> este similar cu eticheta <font> aplicndu-se elementelor dintr-o poriune mic a documentului, de la cteva cuvinte, la cteva linii.

I.3.2.3 Definiii de stil extern


O foaie de stiluri este un fiier text care conine reguli de stil definite n aceeai manier ca la stilurile incluse n pagin. Odat creat o foaie de stiluri, ea trebuie salvat cu extensia .css. Apelul foilor de stiluri se poate realiza n dou moduri: folosind eticheta <link> folosind funcia @import

Metoda importului (@import) este puin mai lent, fiind posibil s dureze o secund, dou, pn se ncarc foaia de stil, timp n care coninutul este afiat fr formatarea designer-ului. Cel mai folosit mod de apelare a unei foi de stiluri este cu ajutorul etichetei <LINK> conform urmtoarei sintaxe:
<LINK rel="stylesheet" href="nume_foaie_stiluri.css">

Exemplu:

pagina urmtoare utilizeaz foaia de stiluri stil.css, prin intermediul

etichetei <LINK> cu atributul rel="stylesheet". Atributul href al etichetei are ca valoare numele 16 foii de stiluri apelate. Am utilizat i proprietatea background-repeat pentru introducerea unei imagini pe fundal i repetarea ei doar pe axa Ox.
stil.css body{background-image:url(i4.gif); background-repeat:repeat-x;background-color:gray;} h2{color:yellow} .semafor{color:red;Font-Family:Arial Black;background-color:yellow} <head> <link rel="stylesheet" href="stil.css"></head> <body topmargin=50> <h2>Referirea unei foi de stil externe</h2> <P>Pentru acest document am folosit un fisier de tip <span class=semafor> foaie de stil</span> in interiorul caruia am definit 3 stiluri: <ul> <li>pentru corpul documentului <li>pentru titlurile de nivel 2 <li>un stil pentru punerea in evidenta a unor pasaje de text, stil numit <span class=semafor>semafor</span></li></ul> </body>

16

i adresa relativ, dac este necesar

24

I.3.3. Stiluri n cascad


Cele trei tipuri de stiluri pot fi combinate n cadrul aceluiai document. Relaiile dintre diferitele tipuri de stiluri realizeaz efectul de cascad care d numele acestei metode. Browserul rezolv conflictul dintre definiiile de stiluri respectnd urmtoarea regul: stilurile inline au cea mai mare prioritate, apoi cele interne i, n cele din urm, stilurile externe, cu prioritate minim. O regul de stil poate s-i mreasc prioritatea dac este nsoit de declaraia "!important":
P {font-size:12pt!important; font-style:italic }

Dac ne referim la "care dintre cele 3 definiii de stil este mai bun", standarde WEB indic: utilizarea foilor .css pentru definirea caracteristicilor care se aplic la formatarea prii comune a tuturor paginilor unui document utilizarea stilurilor ncapsulate pentru definirea caracteristicilor care se aplic la formatarea unei anumite pagini; utilizarea stilurilor inline pentru definirea caracteristicilor care se aplic la formatarea unui anumit element.

I.3.4. Clase de stiluri


Acestea permit definirea unui stil general (aplicabil n mai multe locuri n cadrul aceleiai pagini sau n pagini diferite) n vederea inserrii lui oriunde este necesar prin intermediul unei simple referiri. S presupunem c dorim s definim o clas de stiluri "ftext" (pe care dorim s o aplicm anumitor poriuni de text pentru a le face s apar de culoare roie, aliniate la stnga, avnd culoarea de fundal gri i mrimea fontului de 14).
<style> all.ftext{text-align:left; color:red;} </style>

Cuvntul standard "all" aflat n faa clasei de stiluri "ftext" indic faptul c aceast clas este aplicabil tuturor blocurilor de text, atunci cnd este necesar. Practic clasa de stiluri "ftext" poate fi asociat tuturor tagurilor HTML care opereaz cu text (ca de exemplu: H2, H3, P, DIV, etc...) utiliznd n interiorul fiecrui tag vizat o referire explicit la aceast clas:

Principii generale ale proiectrii interfeelor Web


<tag class=ftext>

25

Dac dorim s aplicm aceast clas de stiluri unui titlu de nivel 2, atunci scriem:
<H2 class="ftext"> Acest header este aliniat la stanga si are culoarea rosie </H2>

Dup cum s-a vzut, pentru apelarea unei clase de stiluri n vederea aplicrii sale elementului tag curent se folosete atributul "class", avnd ca valoare numele clasei de stil. mpreun cu specificaia "all" din definirea clasei de stiluri, atributul "class" devine un atribut universal, adic va putea fi asociat tuturor tagurilor HTML crora li se poate aplica. Dac dorim ca o clas de stiluri s fie aplicabil numai pentru anumite elemente ale documentului (spre exemplu pentru paragrafele de text desemnate prin marcajul de paragraf "p"), atunci n construcia clasei va aprea acest element (de exemplu "p.ftext"). Exemplu: acest exemplu conine o definiie de clas aplicabil doar textelor desemnate prin marcajul <p></p>.

I.3.5. Stiluri identificator


Denumirea stilurilor identificator este dat de modul n care este asociat stilul respectiv unui element, prin intermediul atributului id. Definirea unui stil identificator este similar cu a unei clase de stiluri. Vom folosi id-uri doar pentru stilizarea elementelor dintr-o pagina care apar doar o singura dat, altfel, folosirea claselor este recomandat.
# nume_stil { descriere }

Utilizarea stilului identificator se realizeaz incluznd n interiorul etichetei elementului de text secvena:
id = nume_stil

Exemplu: acest exemplu conine dou definiii de stil de tip identificator cap i corp.

26

I.3.6. Pseudoclase i pseudoelemente


Pseudoclasele controleaz comportamentul dinamic al unor elemente, cum ar fi legturile. n CSS, o legtur poate avea 5 stri ce corespund la 5 pseudoclase: Atribut :link :visited :hover :active :focus Semnificaie descrie starea normal a unei legturi descrie o legtur vizitat descrierea aspectul legturii cnd aceasta primete focusul descrie starea activ a unei legturi descrie o legtur selectat

Exemplu: n aceast pagin hiperlegturile vor fi subliniate i vor avea culoarea roie. Legturile vizitate sunt scrise cursiv, cele active sunt afiate cu caractere aldine 17, iar legtura care deine focusul este reprezentat cu majuscule.

17

italice

Principii generale ale proiectrii interfeelor Web

27

Exemplu: pagina urmtoare utilizeaz foaia de stiluri test.css. n documentul HTML am inclus i o legtur, pentru a exemplifica modul n care foaia de stiluri schimb culorile legturii.

Pseudoelementele controleaz aspectul anumitor poriuni ale unui element, cum ar fi prima linie a unui paragraf sau prima liter a unui text. Astfel, pentru formatarea paragrafelor, avem urmtoarele pseudoelemente:
selector:first-line {descriere} descrie aspectul primei linii a unui paragraf; selector:first-letter {descriere} descrie aspectul primei litere a unui paragraf;

unde selector poate descrie orice element de text. Exemplu: n aceast pagin am utilizat pseudoelementul first-letter.

28

I.3.7. Stiluri pentru liste


list-style-type Folosind eticheta ol din HTML putem crea liste ordonate sau numerotate. Adugnd comenzi CSS n zona HEAD putem aduga pe lng numere i cifre, alte simboluri. Browserul Netscape nu permite asocierea comenzilor CSS dect pentru eticheta li.
<style> li {list-style-type: valoare;} </style>

valoare disc circle square decimal lower-roman upper-roman upper-alpha lower-alpha none

semnificaie disc cerc ptrat numere ntregi numere romane, caractere mici (i, ii, iii, iv) numere romane, caractere mari (I, II, III, IV) litere mari (A, B, C, D) litere mici (a, b, c, d) nimic

Exemplu: pagina urmtoare conine o list ordonat care utilizeaz ca marcatori literele mari ale alfabetului englez

Principii generale ale proiectrii interfeelor Web

29

list-style-image n afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite i imagini prin comanda CSS list-style-image. Imaginile sunt introduse prin adresa url(). Exemplu: pagina urmtoare conine o list ordonat folosind ca marcaj imaginea i4.gif.

Exemplu: pagina urmtoare conine un meniu structurat ca o list i stilizat folosind CSS. Pentru a crea un sistem de navigare bazat pe o list neordonat 18, mai inti se creeaz lista, plasnd fiecare legatur ntr-un element <li>. Apoi, se ncadreaz textul cu <div> i i se asociaz un id corespunztor.

18

marcat cu ajutorul tagului <ul>

30

I.3.8. Casete n CSS


Elementele cu care lucreaz HTML sunt afiate de browser n interorul unei zone dreptunghiulare ca n figur alturat, unde:
19 20

marginea 19 este spaiul exterior chenarului pn la celelalte elemente, chenarul 20 este o bordur care nconjoar elementul, completarea 21 stabilete distana dintre coninut i chenar,
margin n englez border n englez 21 padding n englez

Principii generale ale proiectrii interfeelor Web coninutul include informaia util (text, tabele, imagini, formulare etc.) .

31

Exemplu: pagina urmtoare conine 3 definiii de clase utiliznd proprietile borderwidth, border-style i border-color i o imagine poziionat la 50px fa de latura stng i 25px fa de latura de sus i bordat cu chenar portocaliu.

I.3.9. Poziionare n CSS


Poziionarea permite aezarea unui obiect ntr-un anume loc folosind coordonatele sale. Totodat obiectele pot fi poziionate pe straturi diferite, unul deasupra celuilalt. O astfel de aezare se poate face utiliznd atributul position. Att poziionarea absolut ct i cea relativ folosesc proprietile left i top exprimate n px (pixeli), in (inci), pt (puncte), cm (centimetri). Poziionarea absolut plaseaz obiectul n pagin exact n locaia data de left i top. Astfel poate fi creat un element liber fa de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine. Exemplu: am aplicat poziionarea absolut etichetei h3.

Poziionarea relativ este poziionarea unui element n funcie de elementele anterioare. Un element poate fi deplasat fa de altul folosind proprietile left i top.

32

Exemplu: n pagina urmtoare cuvintele sunt poziionate relativ unul fa de cellalt.

Poziionarea tridimensional Elementele sunt poziionate pe ecran pe o suprafa bidimensional dar pot fi aezate i unul deasupra celuilalt, ntr-o stiv utiliznd un indicativ (index-z) ncepnd cu 0, urmtorul 1 i tot aa, n continuare. Elementul cu indexul cel mai mare este aezat deasupra.

Exemplu: pagina urmtoare conine 3 imagini poziionate absolut i suprapuse.

I.3.10. Notaii i uniti de msur


Foile de stil utilizeaz dou tipuri de uniti de lungime: relative: exprim o dimensiune n raport cu alt dimensiune , absolute: exprim o dimensiune fix.

Uniti de msur relative:

Principii generale ale proiectrii interfeelor Web em-reprezint limea literei M relativ la fontul utilizat 22, ex- reprezint nlimea literei 'X' relativ la fontul utilizat, px-pixeli (dimensiunea este dependent de rezoluia calculatorului) . Uniti de msur absolute: in-inch (1in=2.54cm), cm-centimetri, mm-milimetri, pt-punct tipografic(1pt=1/72 in). Culori

33

Atributul culoare pentru un obiect poate fi specificat printr-un cuvnt cheie (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white si yellow ) sau prin intermediul unei specificaii numerice RGB. i conine ase cifre hexazecimale. URL 23 este soluia aleas de World Wide Web Consortium, pentru specificarea unei resurse (unui site sau a unei pagini) n Internet. Sintaxa general este:
<protocol>://<nume_DNS>/<nume_local>

Acestea sunt luate din paleta VGA

Windows. Specificarea unei culori n forma hexazecimal RGB se prefixeaz cu caracterul #

unde protocol este protocolul folosit (de cele mai multe ori HTTP), nume_DNS este numele domeniului pe care se afl resursa, nume_local este format din calea i numele resursei de pe discul local.

Care este diferena dintre CSS i HTML? HTML-ul este utilizat pentru structurarea coninutului unei pagini, iar CSS-ul este utilizat pentru formatarea acestuia.

22 23

Mrimea celorlalte caractere este ajustat n funcie de acesta Uniform Resource Locator

34

I.3.11.

Evaluare

1. Care dintre urmtoarele este o sintax corect CSS? a) {body;color:gray} b) body {color:gray} c) body:color=gray d){body:color=gray(body)} 2. Care dintre urmtoarele expresii CSS aplic proprietatea bold elementelui p? a) <p style="font-size:bold"> b) p {text-size:bold} c) p {font-weight:bold} d) <p style="text-size:bold"> 3. Cum definim o bordur dimensionat astfel: top border = 10 px; bottom border = 5 px; left border = 20 px; right border = 1px? a) border-width:10px 1px 5px 20px b) border-width:10px 5px 20px 1px c) border-width:5px 20px 10px 1px d) border-width:10px 20px 5px 1px 4. Care din urmtoarele variante definete un model de stil aplicabil tuturor elementelor h3 dintr-un document? a) <h3 style="..."> b) <style> h3{..} </style> c) <style> .h3{..} </style> d) <style> #h3{..} </style> 5. S considerm urmtoarea definire a unui model de stil n antetul documentului HTML:
<STYLE> .ochean{...} </STYLE>

Care din urmtoarele variante definete un paragraf cruia i se aplic stilul respectiv? a) <p name="ochean">Am aplicat stilul... b) <p class="ochean">Am aplicat stilul... c) <p style="ochean">Am aplicat stilul... d) <p id="ochean"> Am aplicat stilul... 6. Dac ntr-un document HTML apar urmtoarele definiii de stil:
<STYLE> .ochean{background-color:gray;color:red;align:center} H1{color:yellow;align:left} </STYLE> ... <H1 class ="ochean" style="color:blue">

antetul definit mai sus va avea urmtoarele proprieti: a) background-color:gray;color:yellow;align:center b) background-color:gray;color:red;align:left c) background-color:gray;color:blue;align:left d) background-color:gray;color:blue;align:center

Principii generale ale proiectrii interfeelor Web 7. Scriei codul HTML care s afieze o legtur stilizat ca n figur: 8. Scriei codul HTML care s realizeze pagina alturat, utiliznd urmtorul fiier extern de stiluri:

35

9. Completai sursa HTML de mai jos astfel nct listele definite s apar cu mai multe tipuri de marcaje, ca n figur.

10. Adugai tabelului de mai jos nc o celul (celula12) formatat ca n figur.

36

II. Mediul de lucru Visual Web Developer Express 2008


De ce Visual Web Developer?

este simplu de neles i de utilizat conine un editor vizual conine un editor performant de cod C#/HTML conine suport pentru depanarea aplicaiilor Web 24 conine ultima versiune a coleciei de clase necesare pentru a putea creea pagini web folosind funcii gata implementate 25 conine un Web Server propriu ce poate rula paginile Web create are integrat SQL Server Express, un mediu vizual pentru editarea bazelor de date conine faciliti ca Master Page 26

II.1. Mediul de lucru


Visual Web Developer este un mediu de lucru dezvoltat de Microsoft, specializat pe realizarea site-urilor. Ediia Express este proiectat special pentru amatorii care vor s nvee s foloseasc Visual Web Developer i tehnologii asemntoare, fr s aib ndemnri n utilizarea instrumentelor folosite de programatorii profesioniti; ea conine instrumente de dezvoltare moderne, uor de neles i uor de folosit, de dimensiuni mici, cu interfee de lucru simplificate dar n acelai timp beneficiare ale trsturilor clasice ale Visual Studio i ale noilor funcionaliti implementate n .NET Framework . Visual Web Developer se lanseaz printr-un simplu click pe butonul Start i alegerea opiunii Visual Web Developer 2008 Express Edition din All Programs.
Solution Explorer/ Database Explorer

Properties window

Toolbox

Design surface

n figur pot fi vizualizate urmtoarele panouri:


24 25

debug n englez .NET FRAMEWORK 3.5 26 un Master Page este un formular WEB standard care acioneaz ca un tipar pentru paginile unui site

Mediul de lucru Visual Web Developer Express 2008 Toolbox: cnd

37

deschidei o pagin sau alt item pentru editare, Toolbox v ofer

instrumentele ce v permit adugarea de noi componente 27 paginii. Design Surface: este panoul de editare a paginilor . Solution Explorer/Database Explorer: Fiecare site Web pe care l creai este organizat ca un grup de foldere care apare n Solution Explorer. Orice baz de date pe care o creai pentru site-ul dumneavoastr apare n Database Explorer. Pentru comutarea ntre cele dou programe Explorer se folosete tabul din josul panoului. Properties: afieaz proprietile asociate obiectului sau paginii cu care se lucreaz.

II.2. Cum manevrm panourile


Panourile pot fi mutate, redimensionate, afiate sau ascunse. Dac avei dou sau mai multe panouri suprapuse la marginea ecranului, putei face panoul de la baz mai lung sau mai scurt deplasndu-i marginea superioar .

Aa cum arat figura de mai sus, bara de titlu a unui panou conine trei butoane intitulate Window Position, Auto Hide i Close. Selectnd Window Position putei accesa urmtoarele opiuni ale meniului n cascad : Floating: tranform panoul ntr-o fereastr flotant care se poate muta i redimensiona. Dockable: ancoreaz panoul. Tabbed Document: mut panoul n zona de editare, identificat printr-un tab n partea sa superioar. Accesarea tab-ului face panoul vizibil. Pentru a reancora panoul n fereastra programului se d click dreapta pe tab i se alege Dockable. Auto Hide: convertete panourile deschise n panouri ascunse de-a lungul marginii programului. Hide: ascunde panoul. Cu attea panouri opionale i attea moduri de a muta i a redimensiona lucrurile, este uor s facei o mare dezordine n fereastra programului. Pentru a aduce totul la normal, trebuie s alegei Window Reset Window Layout din bara de meniu.

27

controale

38

II.3. Meniul View


Opiunea View din bara de meniu ofer acces la toate panourile 28 opionale. Dac nchidei un panou folosind butonul Close, acesta poate fi fcut din nou vizibil accesnd numele lui din meniul View. Unele opiuni ale meniului View, cum ar fi Object Browser i Error List, vor avea un rol semnicativ atunci cnd vei construi efectiv o pagin. Meniul View ofer i optiunea Toolbars, opiune pe care o putei folosi pentru a face vizibile sau a ascunde diferite bare de instrumente.

II.4. Pagina de start


Pagina de start apare de fiecare dat cnd deschidei Visual Web Developer. Sub Recent Projects vei observa o list cu site-urile Web la care ai lucrat recent. Pentru a deschide unul dintre site-uri selectaii numele. Pagina de start nu conine nimic din ce este necesar pentru a construi un site, ci doar linkuri ctre cri electronice online gratuite i MSDN Library for Visual Studio Express Editions. Dup ce ai creat sau ai deschis un site Web, pagina de start dispare. Dac v rzgndii i vrei s aducei pagina de start napoi pe ecran trebuie s alegei, ViewOther Windows Start Page din meniul View.

II.5. Publicarea unui site web


Construcia unui site pe propriul calculator e doar primul pas. Dac dorii ca acesta s poat fi accesat de public trebuie s obinei un domeniu i apoi s publicai site-ul pe un server aflat la adresa domeniul. Compania care v asigur spaiu pentru publicarea site-ului este de obicei numit hosting service sau hosting provider. Serviciile de hosting care suport tehnologiile specifice pe care le folosete Visual Web Developer se numesc ASP.NET 29 2.0 Hosters. Dac site-ul are i o baz de date n spate, atunci vei avea nevoie de un serviciu de hosting care suport ASP.NET 2.0 i SQL Server 2005.

28 29

numite i ferestre pentru c pot fi flotante ASP.NET este o tehnologie Microsoft pentru crearea de aplicaii web i servicii web.

Mediul de lucru Visual Web Developer Express 2008

39

Observaii: Exist variante de hosting gratuit, unde v putei instala propriul site ASP.NET fr s v coste nimic (cutai pe www.live.com asp.netfree hosting).

II.6. Compilarea dinamic a site-ului


ncepnd cu ASP.NET 2.0, exist posibilitatea de a crea site-uri web n care compilarea se face dinamic pentru o pagin, atunci cnd pagina respectiv este cerut de utilizator. Cealalt opiune ar fi de a avea un assembly 30. Pagina compilat ine cont de un timestamp 31 asociat fiierului surs, astfel nct dup fiecare modificare a acestuia, pagina se recompileaz la prima cerere. Avantajele acestei opiuni de instalare a site-urilor ASP.NET sunt:
Nu este nevoie s recompilm ntreaga aplicaie atunci cnd se modific doar o pagin a

acesteia.
Paginile care conin erori de compilare nu opresc execuia ntregului site cum s-ar ntmpla

dac n loc de pagini compilate dinamic am avea un assembly.

II.7. Web site/Web project


Visual Web Developer Express dispune de dou variante diferite de a crea un site web: Web Site (File -> New Web Site) Web Application Project.

Cteva diferene dintre cele dou variante: Web Project Site-ul creaz un compileaz assembly.

dinamic paginile; Web Application Atunci cnd creem un Web Site, avem i posibilitate de a face build pe o singur pagin i nu pe tot site-ul. Web site-ul genereaz dinamic fiierele care conin cod generat automat de Visual Studio (cel cu definiiile controalelor); Web Application Project creaz fiierul respectiv pe disc, cu extensia .designer.cs. Un beneficiu al variantei a doua este timpul mai mic necesar
30 31

un .dll timp de creare.

40

unui build.

Atunci cnd creem o clas n aplicaia noastr, dac lucrm

cu varianta Web Site clasa respectiv va fi implicit mutat ntr-un folder special numit App_Code. Asta pentru c la build nu rezult un assembly, ci se compileaz dinamic paginile, iar codul care nu ine de pagini este cutat special n acel folder. Dac lucrm cu Web Application Project, putem s creem propria noastr structur de foldere.

Observaii: Dac ne referim la "care dintre cele 2 variante este mai bun (Web Site sau Web Application Project)" recomandm ca pentru aplicaiile cu mult cod i o durat de implementare mare s se foloseasc Web Application Project, iar pentru cele mici Web Site.

II.8. Crearea unui site web


Primul lucru pe care l avei de fcut n Visual Web Developer este s deschidei sau s creai un nou Web Site. Din punctul de vedere al Visual Web Developer, un site Web este un director care conine mai multe subdirectoare i fiiere. Spre deosebire de un un site Web real, cel pe care l creai va fi stocat pe hard-disk-ul calculatorului dumneavoastr. Pentru a crea un site Web nou care utilizeaz C# ca limbaj de programare implicit, se urmresc paii: De la bara de meniu se selecteaz FileNew Web Site. Csua de dialog va aprea ca n figur. Se selecteaz ASP.NET Web Site. Din lista Location, se alege File System.

Mediul de lucru Visual Web Developer Express 2008 Din lista Language, se alege limbajul C# . Opional, se schimb numele i locaia site-ului. n exemplul din figur, noul site a fost denumit Web1. Se apas OK. Crearea Web va dura site-ului cteva

41

secunde. Cnd site-ul s-a ncrcat, va fi afiat un fiier Default.aspx, care este pagina principal a site-ului. Vei observa i un folder App_Data, n care va fi stocat o posibil baz de date.

II.9. Despre opiunea location( File System, HTTP, FTP)


Opiunea Location din fereastra de creare a unui nou site Web v ofer dou alternative la File System pentru a v stoca site-ul: FTP sau HTTP. FTP este prescurtarea de la Hypertext Transfer Protocol
32

i este un protocol

standard de Internet pentru transferarea fiierelor. Vei alege aceast opiune dac dorii s creai site-ul pe un server Web la distan, server care permite ncrcare FTP. Dar nu este neaprat nevoie s creeai site-ul pe un calculator la distan. Este mai simplu s creai un site local (pe calculatorul personal), i apoi cnd este terminat s-l transferai pe un server. HTTP este prescurtarea de la File Transfer Protocol
33

i este metoda standard

pentru transferul datelor n World Wide Web. Putei folosi aceast opiune pentru a crea siteul pe un server la distan, chiar i pe calculatorul personal dac avei IIS 34 instalat, dar pentru c nu este necesar i este dificil de efectuat, vom rmne cu opiunea File System selectat. Pagina afiat de Visual Studio ne prezint codul care va fi trimis spre browser. Aceasta poate fi abordat i n mod Designer 35, selectnd tab-ul Design.

32 33

Protocol de Transfer al Hypertext-ului Protocol de Transfer al Fiierelor 34 Internet Information Services, n englez 35 n mod grafic

42

II.10. Crearea i utilizarea directoarelor 36


Putei folosi directoare pentru a organiza paginile i alte componente din site-ul tu Web n aproape acelai fel n care folosii directoarele n Windows pentru a organiza fiierele. Pentru a crea un director, urmai urmtorii pai: selectai panoul Solution Explorer. facei click-dreapta pe numele site-ul din partea de sus a ferestrei Solution Explorer i alegei New Folder, ca n exemplu tastai un nume pentru folder, apoi apsai Enter.

II.11. Editarea paginilor


Pentru a edita o pagin existent n Visual Web Developer, este nevoie mai nti s deschidei pagina pentru a fi afiat pe suprafaa de Design. Pentru a deschide o pagin, se face dublu-click pe pictograma ei din Solution Explorer. S ncercm s editm pagina n mod Design. Vom tasta Prima mea pagin WEB.

Editarea textului n modul Design este foarte asemntoare cu editarea n Microsoft Word, sau orice alt editor de text: selectai pagina, poziionai cursorul, apoi tastai textul. Toate instrumentele i metodele standard de editare a textului funcioneaz n suprafaa de Design. De exemplu putei terge textul cu tastele Backspace i Delete, putei selecta textul cu mouse-ul sau cu tastele de navigare, putei copia i lipi text din/pe suprafaa de Design. Formatarea textului funcioneaz la fel n Visual Web Developer ca n orice alt program de editare a textului. n exemplul din dreapta am selectat textul i din bara de formatare am ales opiunea Heading 3.

36

foldere-lor, n englez

Mediul de lucru Visual Web Developer Express 2008

43

II.12. Schimbarea proprietilor


Pagina Web lucreaz cu obiecte. Pentru a vedea, i poate a schimba proprietile unui obiect, selectai obiectul (click) i vizualizai panoul Properties. Vom aduga din Toolbox un control Label (Label1) schimbndu-i proprietatea Text n Prima mea pagin WEB.

Lista de proprieti a unui obiect ofer cteva opiuni pentru modificarea obiectului, dar nu pe toate. Orice opiune care se leag de felul n care arat obiectul pe n pagin, poate fi schimbat i cu ajutorul Style Builder sau CSS.

II.13. Salvarea modificrilor


Imediat dup ce ncepei s editai o pagin, vei observa c numele paginii este scris cu bold i se termin cu *, ca n exemplul din figura alturat. Caracterul * din dreapta titlului marcheaz faptul c ai modificat pagina de la ultima salvare. Pentru a salva pagina cu schimbrile recente, putei folosi oricare din metodele: butonul Save din bara de unelte, Ctrl+S, FileSave numele paginii din meniu. Observaii:
Apsnd butonul Save All, poi salva toate paginile deschise.

II.14. Despre fiierele cod


Multe din paginile .aspx au un fiier cod n spate, cod de programare care definete comportamentul paginii. Codul din aceste fiiere va fi scris n limbajul de programare pe care l alegei atunci cnd creeai site-ul Web, n cazul nostru C#. n Solution Explorer, orice pagin care are un fiier cod n spate prezint un semn + lang iconia sa, sau un semn minus cu o iconi pentru fiierul cod din spatele ei.

44

Numele paginii de cod este acelai cu numele paginii .aspx, dar cu o extensie .cs 37 adaugat, cum poate fi vzut n figur. Mergem n zona de cod (click dreapta pe numele fiierului .aspx i alegem View Code), n care se implementeaz codul care d caracterul dinamic al paginii i modificm metoda Page_Load() ca mai jos:
protected void Page_Load(object sender, EventArgs e) { int an = DateTime.Now.Year; int luna = DateTime.Now.Month; int zi = DateTime.Now.Day; Label1.Text = Label1.Text + " " + zi + "-" + luna + "-" + an; }

Ce se vede n browser?

Observaii:
Fiierul cod este locul unde se afl partea de programare din spatele paginii Web.

II.15. Vizualizarea Paginilor ntr-un Browser Web


Modul de vizualizare Design v ofer o idee despre cum va arta pagina n browser. Dar nu prezint ntotdeauna o imagine exact a site-ului. Pentru a testa pagina dumneavoastr, deschidei pagina ntr-un browser Web. Pentru a vizualiza, ntr-un browser, pagina la care lucrai n modurile de vizualizare Design sau Source n Visual Web Developer, putei folosi oricare dintre metodele urmtoare: Click dreapta pe orice spaiu gol din pagina i alegei View in Browser. Click pe butonul View in Browser aflat n bara de instrumente Tastai Ctrl+F5

II.16. Master pages


Este foarte indicat pentru un site ca paginile sale s aib acelai aspect vizual, adic s urmreasc acelai tipar 38. ASP.NET, nc de la versiunea 2.0, ne pune la dispoziie paginile numite Master Pages, care pot fi utilizate ca un template de ctre paginile propriu zise ale aplicaiei. Master pages nu sunt pagini care au coninut, n sensul c ele nu pot fi
37
38

n cazul n care ai ales limbajul C#


template, n englez

Mediul de lucru Visual Web Developer Express 2008

45

vizualizate direct, ci doar motenite din punct de vedere al interfeei de ctre paginile cu coninut.

II.17. Servere Web 39 n Visual Web Developer


Pentru a testa i a rula o aplicaie Web ASP.NET, vei avea nevoie de un server Web. Serverul Web pentru sistemele de operare Windows este IIS, care include serverul FTP, serverul de e-mail SMTP 40 i alte faciliti. Pentru a rula IIS, trebuie s lucrai pe o versiune Windows, care este capabil s funcioneze ca un server de reea. n Windows 2000 Server i n versiuni anterioare, IIS este instalat ca o parte a sistemului de operare. n Windows XP i Windows Server 2003, IIS trebuie instalat separat; putei face acest lucru folosind opiunea Add/Remove Windows ComponentsAdd or Remove Programs din Control Panel. Observaii: Putei avea probleme cu IIS din urmtoarele motive: Lucrai cu pagini ASP.NET pe un sistem de operare Windows XP Home Edition, care nu suporta IIS Nu vrei s avei un server Web pe computerul dumneavoastr din motive de securitate. Rularea unui server Web precum IIS presupune civa pai n plus pentru a securiza serverul i a fi la zi cu ultimele update-uri de securitate.

II.18. ASP.NET Development Server


Dac nu putei folosi IIS ca server web, putei testa paginile dumneavoastr ASP.NET folosind ASP.NET Development Server. ASP.NET Development Server este integrat n Visual Web Developer i este un server Web care ruleaz local pe sistemele de operare Windows, incluznd Windows XP Home Edition. Este construit special pentru a rula pagini ASP.NET doar pentru calculatorul pe care lucrai. ASP.NET Development Server v pune la dispoziie o foarte bun i simpl metod de a v testa paginile local nainte de a le publica i a le pune pe un server IIS.

39 40

Un calculator conectat la Internet care furnizeaz clienilor, la cerere, diverse resurse web Simple Mail Transfer Protocol

46

ASP.NET Development Server funcioneaz numai cu pagini individuale i nu include toate facilitile IIS. De exemplu, ASP.NET Development Server nu suport un server de mail SMTP. Dac aplicaia dumneavoastr Web include trimiterea de mesaje e-mail, trebuie s avei acces la serverul virtual IIS SMTP pentru a testa e-mail, deoarece ASP.NET Development Server nu poate trimite mesaje e-mail.

II.19. Rularea Serverului integrat


ASP.NET Development Server este instalat automat odat cu Visual Web Developer. Dac lucrai la un site Web bazat pe un sistem de fisiere, Visual Web Developer folosete automat Visual Web Developer pentru a rula paginile. Implicit, serverul Web utilizeaz un port aleatoriu. De exemplu, dac testai o pagin numit ex1.aspx, cnd o rulai pe ASP.NET Development Server, URL-ul poate arta aa: Dac vrei s rulai ASP.NET Development Server pe un port specific, putei configura serverul pentru a face asta. Observaii: Visual Web Developer nu poate garanta c portul pe care l specificai va putea fi folosit atunci cand vei rula site-ul dumneavoastr Web.

II.20. Securitate n ASP.NET Development Server


O diferen important ntre ASP.NET Development Server i IIS o reprezint securitatea n fiecare dintre cele dou servere. Atunci cnd rulai o pagin folosind ASP.NET Development Server, pagina ruleaz n contextul de securitate a contului de utilizator pe care l folosii. De exemplu, atunci cnd rulai o pagin cu ajutorul ASP.NET Development Server folosind un cont de utilizator cu nivel de administrator, i pagina va avea privilegii de administrator. n IIS, ASP.NET ruleaz implicit n contextul userului special (ASPNET sau NETWORK SERVICES) care are privilegii limitate, ceea ce restrnge accesul la resursele de pe alt calculator. Dac rulai codul dintr-o pagin simpl ASP.NET, diferena nu este foarte important. Diferenele apar atunci cnd: sunt accesate resurse cum ar fi: fiiere care nu sunt pagini Web, regitri Windows etc., este accesat o baz de date, sunt accesate resurse protejate. Observaii: Chiar dac utilizai ASP.NET Development Server pentru a testa paginile care sunt funcionale, ar trebui sa le testai din nou dup ce le-ai publicat pe un server Web care ruleaz IIS.

Limbajul de scripting server-side ASP.NET

47

III. Limbajul de scripting server-side ASP.NET


III.1. Structura unei pagini ASP.NET
Orice pagin ASP.NET presupune dou componente: partea de interfa (controalele care vor fi vizualizate de ctre utilizator) i codul .NET care va fi executat pe server atunci cnd se face o cerere ctre pagina respectiv (numit i code behind). Codul poate fi scris folosind limbajul C# sau Visual Basic .NET. Script-urile ASP.NET sunt fiiere text cu extensia .aspx, care conin controale HTML sau ASP. Codul C# sau VB.NET asociat paginii sau obiectelor din pagin poate fi plasat direct n fiierul cu extensia .aspx, sau ntr-un fiier separat <nume_pagin>.aspx.cs (pentru C#) sau <nume_pagin>.aspx.vb (pentru VB.NET). Pentru a evita aa-numitul spaghetti code, unde partea care descrie interfaa este intercalat cu instruciunile care asigur funcionalitatea, este de preferat folosirea unui fiier separat pentru a reine codul. Observaie. n cadrul acestui manual, toate exemplele vor fi prezentate folosind limbajul C#. n cazul n care se gsete direct n pagin, codul este cuprins ntre tag-urile <script> </script>, cu atributul runat = server. Iat o prima pagina web simpl: Exemplul 3.1 first.aspx

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { output.InnerText = "Hello World!"; } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>First page</title> </head> <body> <form id="form1" runat="server"> <div> <p id = "output" runat="server"/> </div> </form> </body> </html>

48

n exemplul de mai sus, la ncrcarea paginii web, va fi afiat mesajul Hello world. Codul C# asociat, este scris n cadrul paginii .aspx. Observaii: n Visual Web Developer, pentru a separa codul ntr-un fiier separat, la adugarea unei pagini noi n proiectul curent, se bifeaz opiunea Place code in separate file:

Figura 3.1 Adugarea unei noi pagini web ntr-un proiect

Aceeai aplicaie poate fi realizat scriind codul C# ntr-un fiier separat avnd extensia .aspx.cs: first.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="first.aspx.cs" Inherits="first1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>First Page</title> </head> <body> <form id="form1" runat="server"> <div> <p id = "output" runat="server"/> </div> </form> </body> </html>

Limbajul de scripting server-side ASP.NET

49

using using using using using using using using using using using using

System; System.Collections; System.Configuration; System.Data; System.Linq; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; System.Xml.Linq;

public partial class first : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { output.InnerText = "Hello World !"; } }

first.aspx.cs

Exemplul 3.2

Observaii: Cu excepia liniei output.InnerText = "Hello World !"; , codul de mai sus este generat automat de Visual Web Developer. Orice pagin web .aspx conine o seciune de directive, care descrie modul n care pagina este procesat de ctre server. Aceast seciune este cuprins ntre tag-urile <%@ i %> i precizeaz limbajul utilizat pentru scrierea codului i numele fiierului n care este reinut codul (atunci cnd este cazul):
<%@ Page Language="C#" CodeFile="first.aspx.cs" Inherits="_first"%>

III.1.1.

Controale ASP.NET

Pentru a realiza layout-ul unei pagini web, ASP.NET pune la dispoziia programatorului o serie de controale predefinite, precum i posibilitatea definirii unor controale proprii. Controalele ASP.NET se mai numesc i controale server deoarece pot fi programate, prin intermediul unui cod server-side, s rspund la anumite evenimente din pagin. Pentru a putea fi accesate prin intermediul codului, aceste controale trebuie sa conin atributele id i runat=server. Exista doua tipuri de controale server: Web si Html. Controalele server HTML corespund controalelor standard HTML, si pot fi create prin adugarea atributului runat=server unui tag HTML. Pentru a putea identifica un control Html n codul server-side, trebuie sa-i atam atributul id: <p id = "output" runat="server"/>.

50

Cnd scriei cod server-side pentru controalele server HTML de tip input (text, button, checkbox, radioButton) putei folosi proprietatea value pentru a accesa valoarea introdus de utilizator. Proprietatea InnerText reprezint textul cuprins ntre tag-urile de deschidere respectiv nchidere ale unui control Html, iar proprietatea InnerHtml reprezint marcajele Html cuprinse ntre tag-urile de deschidere respectiv nchidere ale controlului Html. Observaii: n Visual Web Developer, putei aduga controale standard HTML din modul design, folosind fereastra ToolBox seciunea HTML.

Controalele server Web ofer mai multe funcionaliti programabile dect cele HTML. Aceste controale pot corespunde mai multor tag-uri HTML, i pot include cod javascript. Sunt cuprinse ntre tag-urile <asp> </asp>. De exemplu un control Web pentru introducerea datelor de ctre utilizator este textbox: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

III.1.2.

Ciclul de via al unei pagini web.

Paginile ASP.NET ruleaz pe server-ul web Microsoft IIS. n urma prelucrrii pe server, rezult o pagin web Html, care este trimis ctre browser. Ciclul de via al unei pagini web are urmtorii pai: 1. User-ul scrie adresa unei pagini web. Acest lucru nseamn o cerere a browser-ului web ctre server, prin intermediul metodei HTTP GET. Pe server, pagina ruleaz pentru prima dat, executndu-se i codul C# existent. 2. Rezultatul este o pagin Html care este trimis browser-ului. 3. User-ul poate introduce date sau apsa un buton, i pagina este trimis napoi server-ului. Dac utilizatorul acceseaz un link, se ncarc o alt pagin, i nici o prelucrare nu este efectuat de pagina iniial. 4. Pagina este trimis ctre browser prin intermediul metodei HTTP POST. n ASP.NET aceast aciune se numete PostBack. 5. Pe server-ul web, pagina ruleaz din nou, i sunt prelucrate informaiile introduse de ctre utilizator n browser. 6. Rezultatul este trimis browser-ului, i astfel se reia ciclul. Procesul de prelucrare a paginii web de ctre server este mprit n mai multe etape. Fiecare etap corespunde unui eveniment asociat paginii. Printre cele mai importante evenimente asociate paginii sunt:

Limbajul de scripting server-side ASP.NET Init se iniializeaz fiecare control server Load se execut la fiecare cerere a paginii Render se genereaz codul html ce va fi trimis browser-ului UnLoad sunt eliberate resursele folosite.

51

III.1.3.

Aplicaii rezolvate

Aplicaia 1. Folosind Visual Web Developer i controale server HTML, creai o pagin web care s conin dou casete text pentru introducerea numelui i prenumelui unei persoane, i un buton la apsarea cruia datele introduse vor fi afiate n pagin cu ajutorul unui tag HTML de tip paragraf. Rezolvare: Se creeaz un site web nou, i n pagina default.aspx se adaug n ecranul de design cele trei controale Html (din toolbar, seciunea Html). n sursa paginii se adaug controalelor atributul runat=server. Pentru ca la apsarea butonului s se execute codul server-side, trebuie s-i adugm atributul onserverclick=<nume_ metod>. nume_ metod este numele funciei care va conine codul server-side.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Input</title></head> <body> <form id="form1" runat="server"> <div> Numele:&nbsp;&nbsp;&nbsp;&nbsp; <input id="Nume" type="text" runat="server"/><br/> Prenumele: <input id="Prenume" type="text" runat="server"/><br/> <input id="Button1" type="submit" value="Trimite" runat="server" onserverclick="Button_Click" /><br/> <p id="Message" runat="server"/> </div></form></body></html>

Fiierul .aspx: Observaii: n codul de mai jos + este operator de concatenare a dou iruri de caractere. Fiierul .aspx.cs:
public partial class _Default : System.Web.UI.Page { protected void Button_Click(object sender, EventArgs e) { Message.InnerText = Nume.Value + " " + Prenume.Value; }

52

Aplicaia 2. Folosind Visual Web Developer i controale server HTML, creai o pagin web care s conin o caset de text i un buton. La apsarea butonului, mesajul introdus n caseta de text trebuie afiat n pagin pe centru, cu fontul arial, mrimea de 14, colorat cu albastru. Rezolvare: n fiierul .aspx vom aduga cele dou controale Html, mpreun cu atributul runat=server. De asemenea, n codul html vom aduga un tag html <div>. n fiierul care va conine codul C#, vom modifica proprietatea InnerHtml a tag-ului <div>.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Input</title> </head> <body> <form id="form1" runat="server"> <div> <input id="mesaj" type="text" runat="server"/> <input id="Button1" type="button" value="Trimite" runat="server" onserverclick="afisare"/><br /> <div id = "output" runat = "server"></div> </div> </form></body></html>

Fiierul .aspx
public partial class _Default : System.Web.UI.Page { protected void afisare(object sender, EventArgs e) { output.InnerHtml = "<center><b><i><font face='arial' color ='blue' size = '14'>"; output.InnerHtml += mesaj.Value; output.InnerHtml += "</font></i></b></center>"; } }

Fiierul .aspx.cs Aplicaia 3. Folosind Visual Web Developer i controale server HTML, creai o pagin web care s conin un link i un buton. La apsarea butonului, link-ul trebuie s-i modifice url-ul i s fie aliniat pe centrul paginii. De asemenea, culoarea de fundal a paginii trebuie s se modifice. Rezolvare: Pentru a modifica atributele unui control server Html, se poate folosi n codul C# proprietatea Attributes asociat unui control Html. Aceast proprietate este un vector asociativ atribut/valoare. Vom asocia atributele id respectiv runat tag-urilor body, div,

Limbajul de scripting server-side ASP.NET

53

a, input, iar n codul C# vom modifica atributele bgcolor, align respectiv href, prin intermediul proprietii Attributes.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Atribute</title> </head> <body id="mainBody" runat="server"> <form id="form1" runat="server"> <div id="mainDiv" runat="server"> <a href = "http://www.microsoft.com" target="_blank" id="link" runat="server">Microsoft</a> <br/> </div> <input type = "submit" id = "button1" runat = "server" onserverclick="change"/> </form></body></html>

Fiierul .aspx
protected void change(object sender, EventArgs e) { mainDiv.Attributes["align"] = "center"; mainBody.Attributes["bgcolor"] = "#659EC7"; link.Attributes["href"] = "http://www.microsoft.com/romania/"; link.InnerText = "Microsoft Romania";

} Fiierul .aspx.cs

III.2. Limbajul C#
Limbajul C# este un limbaj nou de programare, aprut odat cu platforma .NET. Ideea central a limbajului C# este programarea orientat pe obiecte (POO). O aplicaie C# este format din una sau mai multe clase, grupate n spaii de nume (namespaces). O clas reprezint un ablon care definete forma unui obiect. Este un tip de date abstract, care definete att datele ct i codul care va prelucra acele date. Obiectele sunt instane, particularizri ale claselor. Datele din cadrul clasei se mai numesc proprieti, iar funciile mai poart numele de metode. Simplificnd mult lucrurile, putei s v imaginai o clas ca o extindere a tipului structur din C sau nregistrare din Pascal. ntr-o structur putei defini date de tipuri diferite. ntr-o clas, pe lng aceste date exist i funciile care le prelucreaz. La fel cum putei defini variabile de tip structur, se pot defini variabile de tip clas (numite obiecte). Accesul la cmpurile unei structuri se realizeaz prin nume_variabil_structur . nume_cmp.

54

Analog, accesul la datele i funciile membre ale unei clase se realizeaz prin obiect . proprietate sau obiect . metod. Un spaiu de nume reprezint o schem logic pentru denumirea tipurilor de date nrudite. V putei imagina spaiile de nume ca fiind asemntoare cu structura de directoare i fiiere din Windows. La fel cum ntr-un folder salvai fiiere nrudite, ntr-un spaiu de nume se gsesc obiecte de tipuri asemntoare. De exemplu clasele HTMLInputTextBox i HTMLAnchor se vor gsi n acelai spaiu de nume, deoarece ambele reprezint controale html de interfa. Rdcina acestei ierarhii de spaii de nume este System. Spaiile de nume pot conine la rndul lor alte spaii de nume. De exemplu, System conine spaiile de nume System.Data (unde se gsesc clase pentru conectarea la diverse surse de date) i System.Web (unde se gsesc toate clasele pentru dezvoltarea unei aplicaii web). Controalele server Html sunt incluse n spaiul de nume System.Web.UI.HtmlControls, iar controalele server Web n spaiul System.Web.UI.WebControls. Pentru a avea acces la clasele dintr-un anumit spaiu de nume, acesta trebuie inclus n aplicaie folosind instruciunea using:
using using using using System System.Web System.Web.UI.HtmlControls; System.Web.UI.WebControls;

III.2.1.

Vocabularul limbajului

Ca i limbajul C++ cu care se nrudete, limbajul C# are un alfabet format din litere mari i mici ale alfabetului englez, cifre i alte semne. Vocabularul limbajului este format din identificatori, expresii, separatori, delimitatori i comentarii. Comentariile pot fi scrise pe un singur rnd prin folosirea //. Tot ce urmeaz dup caracterele // sunt considerate, din acel loc, pn la sfritul rndului drept comentariu. Comentariile pe mai multe rnduri pot fi scrise prin folosirea /* i */ . Un identificator reprezint o succesiune de caractere care ndeplinete urmtoarele reguli: ncepe cu o liter sau cu unul dintre caracterele _ i @; primul caracter poate fi urmat numai de litere, cifre sau un caracter de subliniere; identificatorii care reprezint cuvinte cheie nu pot fi folosii n alt scop dect acela pentru care au fost definii.

Limbajul de scripting server-side ASP.NET

55

III.2.2.

Tipuri de date

C# include dou categorii generale de tipuri predefinite: tipuri simple (sau tipuri valoare) i tipuri referin. Tipurile simple cuprind tipurile numerice (ntregi, reale i char), tipul boolean, tipul struct i tipul enumerare. n categoria tipurilor referin se ncadreaz tipurile tablou, ir de caractere i clas. Tipurile ntregi Tip byte sbyte short ushort int uint long ulong Descriere ntreg pe 8 bii fr semn ntreg pe 8 bii cu semn ntreg pe 16 bii cu semn ntreg pe 16 bii fr semn ntreg pe 32 bii cu semn ntreg pe 32 bii fr semn ntreg pe 64 bii cu semn ntreg pe 64 bii fr semn Domeniul de valori 0 .. 255 -128 .. 127 -32 768 .. 32 767 0 .. 65 535 -2 147 483 648 .. 2 147 483 647 0 .. 4 294 967 295 - 263 .. 263 - 1 0 .. 264 - 1

Tipuri n virgul mobil Tip float double decimal Descriere tip cu virgul mobil, simpl precizie, pe 32 bii (8 pentru exponent, 24 pentru mantis) tip cu virgul mobil, dubl precizie, pe 64 bii (11 pentru exponent, 53 pentru mantis) tip zecimal, pe 128 bii (96 pentru mantis), 28 de cifre semnificative Domeniul de valori 1.5 E-45 .. 3.4E+38 5E-324 .. 1.7E+308 1E-28 .. 7.9E+28

Valorile de tip decimal trebuie urmate de m sau M.


protected void Page_Load(object sender, EventArgs e) { decimal balanta, dobanda; //calcul sold nou balanta = 2000.201m; dobanda = 0.1m; balanta = balanta * dobanda + balanta; mainDiv.InnerHtml = "<b>Noul sold este " + balanta + " RON</b>";}

Exemplul 3.3 Observaii: n fiierul .aspx am presupus definit un tag <div> cu atributele id = mainDiv i runat = server.

56

Tipul caracter n C# caracterele nu sunt reprezentate pe 8 bii ca n C++, ci pe 16 bii, datorit folosirii modelului Unicode. Modelul Unicode definete un set de caractere care poate reprezenta caractere din mai multe limbi. Setul standard de caractere ASCII este un subset al modelului Unicode. Domeniul de valori al tipului char este [0..65535]. Exemplu:
char c = ''; mainDiv.InnerHtml += c;

Tipul bool Acest tip reprezint valorile de adevr i fals. n C# acestea sunt definite prin cuvintele rezervate true i false. Nu este definit nici o regul de conversie ntre tipul bool i valori ntregi (1 nu este convertit n true i nici 0 n false). n urmtorul exemplu, n pagina web va fi afiat valoarea true:
bool c = true; mainDiv.InnerText += c;

III.2.3.

Operatori

Operatorii C# sunt cuprini n urmtoarele categorii: Operatori aritmetici Operatori de incrementare/decrementare Operatori relaionali Operatori logici Operatori de atribuire Operatorul condiional

Operatorii aritmetici sunt +, -, *, /, %, i au aceeai semnificaie ca i n C++. Toi operatorii aritmetici sunt operatori binari. n cazul n care + este folosit cu operanzi de tip ir de caractere, rezultatul este un ir obinut prin concatenarea celor doi operanzi. Modul de utilizare al operatorilor aritmetici este descris n exemplul urmtor: Exemplul 3.4
protected void Page_Load(object sender, EventArgs e) { int x = 7, y = 2; mainDiv.InnerHtml = "Suma dintre " +x +" si "+ y + " este:" +(x+y) + "<br/>"; mainDiv.InnerHtml += "Diferenta dintre " + x +" si "+y+" este: "+(x-y)+ "<br/>"; mainDiv.InnerHtml += "Produsul dintre " +x+" si " + y +" este: "+(x*y)+ "<br/>"; mainDiv.InnerHtml += x + " / " + y + " = "+(x/y)+" rest "+ (x%y) ;}

Limbajul de scripting server-side ASP.NET Rezultatul execuiei este urmtorul:


Suma dintre 7 si 2 este: 9 Diferenta dintre 7 si 2 este: 5 Produsul dintre 7 si 2 este: 14 7 / 2 = 3 rest 1

57

Operatorii de incrementare i decrementare sunt ++, --, ambii operatori avnd o form prefixat respectiv postfixat: Operator ++x x++ --x x-Semnificaie Se mrete cu o unitate valoarea variabilei x, i apoi x este utilizat n cadrul expresiei (preincrementare) Se mrete cu o unitate valoarea variabilei x dup ce x este utilizat n cadrul expresiei (postincrementare) Se micoreaz cu o unitate valoarea variabilei x, i apoi x este utilizat n cadrul expresiei (predecrementare) Se micoreaz cu o unitate valoarea variabilei x dup ce x este utilizat n cadrul expresiei (postdecrementare)

De exemplu, dup executarea secvenei


int a = 7, b = 2, c; c = --a * b++;

variabila c va avea valoarea 12, (se micoreaz a cu o unitate i se efectueaz nmulirea), a va avea valoarea 6, iar b va fi 3. Operatorii relaionali sunt: == (egal cu) != (diferit) > (mai mare) < (mai mic) >= (mai mare egal) <= (mai mic egal)

Rezultatul evalurii unei expresii ce conine operatorii relaionali, este de tip bool. Operatorii logici sunt: ! (negaia logic) && (i logic) | | (sau logic) Tabelul operatorilor logici este: p true true false false q true false true false p && q true false false false p||q true true true false !p false false true true

n cadrul unei expresii logice ce conine operatorul &&, dac primul operand are valoarea false rezultatul va fi false, indiferent de valoarea celui de al doilea operand. n mod

58

asemntor, ntr-o expresie logic cu operatorul | |, dac primul operand are valoarea true rezultatul va fi true, indiferent de valoarea celui de al doilea operand. n ambele cazuri, al doilea operand nu mai este evaluat, codul fiind mai eficient. Operatorul de atribuire este = , i se folosete ntr-o construcie de forma variabil = expresie. Se evalueaz expresia, iar rezultatul evalurii este atribuit variabilei. Dac este cazul se realizeaz i o conversie a valorii ctre tipul variabilei. Pentru atribuiri se pot folosi i operatorii +=, -=, *=, /=, %=. De exemplu atribuirea x = x + 1;, poate fi rescris x += 1; Operatorul condiional are forma: expresie1 ? expresie2: expresie3 Dac expresia1 este adevrat, atunci se returneaz valoarea expresiei2, altfel se returneaz valoarea expresiei3. Urmtoarea secven de instruciuni va returna maximul dintre variabilele a i b. x > y ? x : y;
protected void Page_Load(object sender, EventArgs e) { int x = 7, y = 2; mainDiv.InnerHtml = "Maximul este " + (x > y ? x : y); }

n exemplul urmtor, pe ecran va fi afiat textul Maximul este 7: Precedena operatorilor este prezentat n tabelul urmtor: Precedena operatorilor n C# Prioritate maxim () [] new sizeof ! ~ (cast) +(unar) ++ -* / % + << >> < > <= >= == != && || ?: = op= Prioritate minim

III.2.4.

Conversii

n C# exist dou tipuri de conversii numerice:

Limbajul de scripting server-side ASP.NET implicite explicite.

59

Conversia implicit se efectueaz doar dac nu este afectat valoarea convertit. Conversiile implicite sunt prezentate n tabelul urmtor: Conversie din sbyte byte short ushort int uint long char float ulong n short, int, long, float, double, decimal short, ushort, int, uint, long, ulong, float, double, decimal int, long, float, double, decimal int, uint, long, ulong, float, double, decimal long, float, double, decimal long, ulong, float, double, decimal float, double, decimal ushort, int, uint, long, ulong, float, double, decimal double float, double, decimal

Conversia explicit se realizeaz prin intermediul operatorului cast, atunci cnd nu exist posibilitatea unei conversii implicite. De exemplu, pentru a returna un numr real n urma mpririi a dou numere ntregi, se folosete (float):
int a = 7, b = 2; float r; r = (float) a/b; //r va avea valoarea 3.5

Conversii ntre numere i iruri de caractere. Conversia unui numr la un ir de caractere se realizeaz cu ajutorul metodei ToString(). De exemplu
int a = 7; rezultat.InnerText = "Numrul este: " + a.ToString();

Conversia unui ir de caractere la un numr, se poate realiza prin apelarea metodelor din clasa Convert. De exemplu, pentru a citi de la tastatur un numr introdus prin intermediul unui control Html <input type=text id =nr1 runat=server> se poate folosi urmtoarea linie de cod:
int a; a = Convert.ToInt32(nr1.Value);

III.2.5.

Funcii matematice

Funciile matematice puse la dispoziie de C# se gsesc n clasa Math. Printre cele mai importante amintim:

60

Funcia Abs (x) Ceiling (x) Exp (x) Floor (x) Log (x) Log10(x) Max (x, y) Min (x, y) Pow (x, y) Round (x, n) Sqrt (x) Truncate(x) Exemplul 3.5

Descriere Returneaz modulul unei valori numerice Returneaz cel mai apropiat ntreg mai mare sau egal dect valoarea trimis ca parametru. Returneaz ex Returneaz cel mai apropiat ntreg mai mic sau egal dect valoarea trimis ca parametru. Returneaz logaritmul natural. Returneaz logaritmul n baza 10. Returneaz maximul dintre 2 numere. Returneaz minimul dintre 2 numere. Returneaz xy Returneaz cel mai apropiat ntreg sau un numr rotunjit cu un anumit numr de zecimale. Returneaz radicalul numrului trimis ca parametru. Returneaz partea ntreag a numrului trimis ca parametru.

protected void Page_Load(object sender, EventArgs e) { mainDiv.InnerHtml = "Floor(3.75) = " + Math.Floor(3.75) + "<br/>"; mainDiv.InnerHtml += "Ceiling(3.25) = " + Math.Ceiling(3.25) + "<br/>"; mainDiv.InnerHtml += "Round(3.25) = " + Math.Round(3.25) + "<br/>"; mainDiv.InnerHtml += "Round(3.257) = " + Math.Round(3.257, 2) + "<br/>"; mainDiv.InnerHtml += "Round(3.249) = " + Math.Round(3.249, 2) + "<br/>"; mainDiv.InnerHtml += "Truncate(3.75) = " + Math.Truncate(3.75) + "<br/>"; mainDiv.InnerHtml += "Truncate(3.25) = " + Math.Truncate(3.25) + "<br/>"; }

La executarea secvenei de instruciuni: se va obine urmtorul rezultat: Floor(3.75) = 3 Ceiling(3.25) = 4 Round(3.25) = 3 Round(3.257) = 3,26 Round(3.249) = 3,25 Truncate(3.75) = 3 Truncate(3.25) = 3 Dac funcia Round este apelat fr cel de al doilea parametru, va returna cel mai apropiat ntreg fa de valoarea trimis ca parametru. Dac se precizeaz i al doilea parametru, atunci primul parametru va fi rotunjit la o valoare cu un numr de zecimale specificat de al doilea parametru.

III.2.6.

Instruciuni C#

Instruciuni decizionale. n limbajul C# exist dou instruciuni decizionale: simpl (if) i multipl (switch).

Limbajul de scripting server-side ASP.NET 1. Sintaxa instruciunii if este:

61

a. if (condiie) Instruciuni_1; else Instruciuni_2; Modul de execuie este urmtorul: dac este adevrat condiia, atunci se execut instruciunile 1, n caz contrar se execut instruciunile 2. b. if (condiie) Instruciuni Dac este adevrat condiia, atunci se execut instruciunile. n urmtorul exemplu este prezentat un algoritm de calcul a maximului dintre 3 numere ntregi introduse de la tastatur. Exemplul 3.6
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Maximul a 3 numere</title></head> <body> <form id="form1" runat="server"> <div> <h1>Maximul a trei numere</h1> Primul numar:&nbsp;&nbsp;&nbsp;&nbsp; <input id="nr1" type="text" runat="server"/><br /> Al doilea numar: <input id="nr2" type="text" runat="server"/><br/> Al treilea numar: <input id="nr3" type="text" runat="server"/><br/> <input id="Submit1" type="submit" value="Trimite" runat="server" onserverclick="calculeaza"/><br/> <span id = "maxim" runat = "server"/> </div> </form> </body></html>

Fiierul .aspx
public partial class _Default : System.Web.UI.Page { protected void calculeaza(object sender, EventArgs e) { int a, b, c, max; a = Convert.ToInt32(nr1.Value); b = Convert.ToInt32(nr2.Value); c = Convert.ToInt32(nr3.Value); max = a; if (max < b) max = b; if (max < c) max = c; maxim.InnerText = "Maximul este: " + max.ToString(); } }

Fiierul .aspx.cs.

62

Rezultatul urmtorul:

execuiei

este

Figura 3.2

Exemplul 3.7 n urmtorul exemplu sunt calculate rdcinile ecuaiei de gradul II:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Ecuatie gradul II</title></head> <body> <form id="form1" runat="server"> <div> a = <input id="nr1" type="text" runat = "server"/><br /> b = <input id="nr2" type="text" runat = "server"/><br /> c = <input id="nr3" type="text" runat = "server"/><br /> <span id = "rezultat" runat = "server" /><br /><br /> <input id="Button1" type="button" value="Calculeaza" runat = "server" onserverclick = "ecuatie"/> </div> </form></body></html>

Fiierul .aspx
public partial class _Default : System.Web.UI.Page { protected void ecuatie(object sender, EventArgs e) { int a, b, c, d;float x1, x2; a = Convert.ToInt32(nr1.Value); b = Convert.ToInt32(nr2.Value); c = Convert.ToInt32(nr3.Value); if (a == 0) {rezultat.InnerText = "Ecuatie de gradul I";} else { d = b * b - 4 * a * c; if (d < 0) {rezultat.InnerText = "Numere complexe";} else { x1 = (float)(-b + Math.Sqrt(d)) / (2 * a); x2 = (float)(-b - Math.Sqrt(d)) / (2 * a); rezultat.InnerText = "x1 = " + x1 + " x2 = " + x2; } } }

Limbajul de scripting server-side ASP.NET Fiierul .aspx.cs 2. Instruciunea decizional multipl switch are urmtoarea sintax:
switch (expresie) { case val1: instruciuni1; break; case val2: instruciuni2; break; case val3: instruciuni3; break; .. case valN: instruciuniN; break; default: instruciuni; break; }

63

Modul de execuie este urmtorul: se evalueaz expresia, i dac rezultatul evalurii este egal cu una din valorile de la 1 la N, atunci se execut instruciunile de pe ramura respectiv. Dac rezultatul evalurii expresiei nu este egal cu nici una din valori, atunci se execut instruciunile de pe ramura default (daca aceasta exist). Spre deosebire de C++, n C# este obligatorie existena instruciunii break pe fiecare ramur, n caz contrar se genereaz o eroare la compilare. Exemplul 3.8 Urmtorul exemplu este o pagin web n care se introduc de la tastatur dou numere, i n funcie de alegerea utilizatorului se poate realiza una din operaiile: adunare, scdere, nmulire, mprire. Selecia este realizat de utilizator prin intermediul unui tag Html <select>. Rezultatul operaiei este afiat ntr-un control html de tip (<input type=text>) cu atributul readonly. input

public partial class _Default : System.Web.UI.Page { protected void calcul(object sender, EventArgs e) { int x, y, op;float r; x = Convert.ToInt32(nr1.Value); y = Convert.ToInt32(nr2.Value); op = Convert.ToInt32(operatie.Value); switch (op) { case 1: r = x + y; rezultat.Value = r.ToString(); break; case 2: r = x - y; rezultat.Value = r.ToString(); break; case 3: r = x * y; rezultat.Value = r.ToString(); break; case 4: if (y != 0) { r = (float) x / y; rezultat.Value = r.ToString(); } else {rezultat.Value = "Impartire la 0 !";} break; } }

Fiierul .aspx

64

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Switch</title></head> <body> <form id="form1" runat="server"> <div> <input id="nr1" type="text" runat = "server"/>&nbsp; <select id="operatie" name="operator" runat = "server"> <option value = "1">+</option> <option value = "2">-</option> <option value = "3">*</option> <option value = "4">/</option> </select>&nbsp; <input id="nr2" type="text" runat = "server"/> = <input id="rezultat" readonly="readonly" type="text" runat = "server"/><br /> <input id="Button1" type="button" value="Calculeaza" runat = "server" onserverclick="calcul"/><br /> <div id = "tst" runat = "server" /> </div> </form></body></html>

Fiierul .aspx.cs Rezultatul execuiei este urmtorul:

Figura 3.3

Instruciuni repetitive Instruciunile repetitive n C# sunt: Cu test iniial (while) Cu test final (do while) Cu numr cunoscut de pai (for)

1. Instruciunea repetitiv while are sintaxa:


while (condiie) instruciuni

Modul de execuie este urmtorul: ct timp este adevrat condiia, se execut instruciunile. Exemplul 3.8 Aplicaia urmtoare calculeaz cmmdc a dou numere introduse de utilizator.

Limbajul de scripting server-side ASP.NET

65

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>cmmdc</title> </head> <body> <form id="form1" runat="server"> <div> Primul numar:&nbsp;&nbsp;&nbsp;&nbsp;<input id="nr1" type="text" runat = "server"/><br /> Al doilea numar:<input id="nr2" type="text" runat = "server"/><br /> <input id="Button1" type="button" value="Calculeaza" runat = "server" onserverclick="cmmdc"/><br /> <p id = "rezultat" runat = "server" /> </div> </form> </body> </html>

Fiierul .aspx
public partial class _Default : System.Web.UI.Page { protected void cmmdc(object sender, EventArgs e) { int a, b, r; a = Convert.ToInt32(nr1.Value); b = Convert.ToInt32(nr2.Value); r = a % b; while (r > 0) { a = b; b = r; r = a % b; } rezultat.InnerText = "cmmdc este: " + b.ToString();

Fiierul .aspx.cs 2. Instruciunea repetitiv do while are urmtoarea sintax:


do { instruciuni }while (condiie);

Modul de execuie este urmtorul: se execut instruciunile i dac nu este ndeplinit condiia, atunci execuia structurii repetitive se termin. Dac este adevrat condiia, atunci se continu execuia instruciunilor.

66

Exemplul 3.9 Exemplul urmtor calculeaz suma cifrelor unui numr, folosind instruciunea repetitiv do while.
public partial class _Default : System.Web.UI.Page { protected void suma(object sender, EventArgs e) { int n = Convert.ToInt32(nr1.Value), s=0; do { s += n % 10; n = n / 10; } while (n > 0); rezultat.InnerText = "Suma cifrelor este: " + s.ToString(); } }

Fiierul .aspx
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Suma cifrelor</title> </head> <body> <form id="form1" runat="server"> <div> Introduceti numarul: <input id="nr1" type="text" runat = "server"/>&nbsp;&nbsp;&nbsp; <input id="Button1" type="button" value="Calculeaza" runat = "server" onserverclick="suma"/><br /> <p id="rezultat" runat = "server" /> </div> </form> </body> </html>

Fiierul .aspx.cs:

3. Instruciunea repetitiv for, are urmtoarea sintax:


for(iniializare; test; pas) instruciuni;

Modul de execuie este urmtorul: se evalueaz expresia de iniializare, apoi expresia de test. Dac este adevrat condiia, se execut instruciunea din for, apoi se evalueaz expresia pas. Dac expresia test nu mai are valoarea true, se termin execuia instruciunii for. Exemplul 3.10 Exemplul urmtor calculeaz valoarea expresiei 1! + 2! + 3! + . + n!, unde n este introdus de ctre utilizator.

Limbajul de scripting server-side ASP.NET

67

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Expresie</title> </head> <body> <form id="form1" runat="server"> <div> <input id="nr1" type="text" runat = "server"/> <input id="Button1" type="button" value="Calculeaza" runat = "server" onserverclick = "calcul"/><br /> <p id = "rezultat" runat = "server" /> </div> </form> </body> </html>

Fiierul .aspx
public partial class _Default : System.Web.UI.Page { protected void calcul(object sender, EventArgs e) { int n = Convert.ToInt32(nr1.Value), s = 0, p = 1; for (int i = 1; i <= n; i++) { p = p * i; s = s + p; } rezultat.InnerText = s.ToString(); } }

Fiierul .aspx.cs

III.2.7.

Tablouri n C#

Pentru a declara un tablou unidimensional n C#, se folosete sintaxa: tip_elemente [ ] variabil; Alocarea de spaiu n memorie pentru noua variabil se realizeaz printr-o instaniere de forma: variabil = new tip_elemente[numr_elemente]; De exemplu:
int[] v; v = new int[20];

Aceeai declarare poate fi scris printr-o singur instruciune: int[] v = new int[10]; La declararea tabloului se poate realiza i iniializarea elementelor sale: int[] v= {1,2,3,4 };

68

Pentru a afia elementele tabloului, se pot folosi att instruciunile repetitive clasice, ct i o instruciune pentru parcurgerea coleciilor de date, numit foreach. Exemplul 3.10. Afiarea unui tablou folosind instruciunea for.
int[] v = { 1, 2, 3, 4 }; for (int i = 0; i < v.Length; i++) mainDiv.InnerHtml += v[i] + " ";

Observaii: Proprietatea Length returneaz numrul de elemente din tablou.

Exemplul 3.11. Afiarea unui tablou folosind instruciunea foreach.


int[] v = { 1, 2, 3, 4 }; foreach (int i in v) mainDiv.InnerHtml += i + " ";

n cazul instruciunii foreach, variabila contor nu are ca semnificaie poziia elementului n vector (ca la for), ci reprezint chiar elementul parcurs. De aceea, aceast variabil trebuie s aib acelai tip cu cel al elementelor din tablou. Pentru orice variabil de tip tablou se pot apela urmtoarele metode: Sum() returneaz suma elementelor din tablou. Exemplu:
mainDiv.InnerHtml += "Suma elementelor din vector este: " + v.Sum();

Average() returneaz media aritmetic din tablou Exemplu:


mainDiv.InnerHtml+= "Suma elementelor din vector este: "+ v.Average();

Contains(valoare) returneaz true dac valoarea trimis ca parametru se gsete n tablou, i false n caz contrar Exemplul 3.12
if (v.Contains(6) == true) mainDiv.InnerHtml += "Elementul se gaseste in vector"; else mainDiv.InnerHtml += "Elementul nu se gaseste in vector";

CopyTo(tablou_destinaie, indice) copiaz toate elementele din tabloul iniial n tabloul destinaie ncepnd cu poziia dat de cel de al doilea parametru Exemplul 3.13
int[] v = { 1, 2, 3, 4 }; int[] w = new int[10]; v.CopyTo(w, 0); // w = 1 2 3 4 0 0 0 0 0 0 v.CopyTo(w, 3); // w = 0 0 1 2 3 4 0 0 0 0

Limbajul de scripting server-side ASP.NET

69

Equals(variabil_tablou) returneaz true dac cele dou tablouri conin aceleai elemente i false n caz contrar. Exemplul 3.14
if (v.Equals(w) == true) mainDiv.InnerHtml+= "Cei doi vectori au aceleasi elemente"; else mainDiv.InnerHtml+= "Cei doi vectori nu au aceleasi elemente";

Clasa Array pune la dispoziia programatorului alte cteva metode pentru prelucrarea vectorilor: Sort(tablou) sorteaz cresctor elementele din vectorul trimis ca parametru Exemplu: Array.Sort(w); Reverse(tablou) inverseaz elementele vectorului trimis ca parametru Exemplu: Array.Reverse(w); IndexOf(tablou, valoare) caut o valoare n vector, i returneaz -1 dac nu se gsete, respectiv poziia pe care se gsete valoarea n vector. Exemplul 3.15
if ((poz = Array.IndexOf(v, 3)) != -1) mainDiv.InnerHtml+= "Elementul cautat se gaseste in vector pe pozitia "+poz; else mainDiv.InnerHtml += "Elementul cautat nu se gaseste in vector";

Exemplul 3.16 Exemplul urmtor este o pagin web, care prezint modul de utilizare a vectorilor.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Tablouri</title> </head> <body> <form id="form1" runat="server"> <div id = "mainDiv" runat = "server"> </div> </form> </body> </html>

Fiierul .aspx
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { int[] v = { 1, 2, 3, 4 }; //initializarea elementelor din vector int[] w = new int[10]; int poz; //Afisarea elementelor mainDiv.InnerHtml += "Elementelor vectorului sunt: "; for (int i = 0; i < v.Length; i++) mainDiv.InnerHtml += v[i] + " ";

70

Fiierul .aspx.cs
mainDiv.InnerHtml += "<br/>"; //Suma si media aritmetica a elementelor mainDiv.InnerHtml += "Suma elementelor din vector este: " + v.Sum() + "<br/>"; mainDiv.InnerHtml += "Media elementelor din vector este: " + v.Average() + "<br/>"; //Copierea elementelor unui vector intr-un alt vector v.CopyTo(w, 0); mainDiv.InnerHtml += "Elementele vectorului sunt: "; for (int i = 0; i < w.Length; i++)mainDiv.InnerHtml += w[i] + " "; mainDiv.InnerHtml += "<br/>"; //Compararea a doi vectori if (v.Equals(w) == true) { mainDiv.InnerHtml += "Cei doi vectori au aceleasi elemente <br/>"; } else { mainDiv.InnerHtml += "Cei doi vectori nu au aceleasi elemente <br/>"; } //Sortarea elementelor vectorului w[3] = 5; Array.Sort(w); mainDiv.InnerHtml += "Vectorul sortat: "; foreach (int i in w) mainDiv.InnerHtml += i + " "; mainDiv.InnerHtml += "<br/>"; //Inversarea elementelor Array.Reverse(w); mainDiv.InnerHtml += "Vectorul inversat: "; for (int i = 0; i < w.Length; i++) mainDiv.InnerHtml += w[i] + " "; mainDiv.InnerHtml += "<br/>"; //Cautarea unui element in vector if (v.Contains(6) == true) { mainDiv.InnerHtml += "Elementul se gaseste in vector<br/>"; } else { mainDiv.InnerHtml += "Elementul nu se gaseste in vector<br/>"; } if ((poz = Array.IndexOf(v, 3)) != -1) { mainDiv.InnerHtml += "Elementul cautat se gaseste in vector pe pozitia " + poz; } else { mainDiv.InnerHtml += "Elementul cautat nu se gaseste in vector"; }

} }

Limbajul de scripting server-side ASP.NET Rezultatul execuiei este urmtorul:

71

Figura 3.4

III.2.8.

iruri de caractere

O variabil de tip ir de caractere poate fi declarat folosind sintaxa:


string nume_variabil

De exemplu: string s; La declarare, o variabil poate fi iniializat:


string s = "Hello World";

Operaii cu iruri de caractere 1. Determinarea lungimii unui ir de caractere se realizeaz cu ajutorul proprietii Length: Exemplul 3.17
mainDiv.InnerHtml = "Sirul " + s + " are " + s.Length + " caractere" + "<br/>";

2. Conversia irurilor la majuscule sau minuscule Conversiile sunt realizate de metodele ToUpper(), respectiv ToLower(). Exemplul 3.18
mainDiv.InnerHtml += s.ToUpper() + "<br/>"; mainDiv.InnerHtml += s.ToLower() + "<br/>";

3. Eliminarea spaiilor dintr-un ir poate fi realizat cu metodele: Trim() Elimin spaiile de la ambele extremiti ale irului TrimEnd() Elimin spaiile de la sfritul irului TrimStart() Elimin spaiile de la nceputul irului
mainDiv.InnerHtml += s.Trim() + "<br/>"; mainDiv.InnerHtml += s.TrimEnd() + "<br/>"; mainDiv.InnerHtml += s.TrimStart() + "<br/>";

Exemplul 3.19

72

4. Compararea irurilor de caractere Implicit, compararea a dou iruri de caractere este case sensitive. Metodele pentru compararea irurilor accept un parametru pentru a seta modul de comparare. De exemplu, a realiza o comparare n care nu conteaz dac literele sunt majuscule sau minuscule, se folosete obiectul StringComparison cu proprietatea OrdinalIgnoreCase . Observaii: Pentru a folosi obiectul StringComparison, n pagina web trebuie inclus namespace-ul System.Globalization:
using System.Globalization;

Metodele pentru compararea a dou iruri de caractere sunt: Equals() - returneaz valoarea true dac dou iruri sunt egale, i false n caz contrar. Exemplul 3.20
if (s.Equals(s1) == true) {mainDiv.InnerHtml += "Sirurile sunt egale <br/>";} else {mainDiv.InnerHtml += "Sirurile nu sunt egale <br/>";}

Pentru a nu face distincie ntre minuscule i majuscule, se apeleaz metoda Equals cu al doilea parametru : Exemplul 3.21
if (s1.Equals(s2, StringComparison.OrdinalIgnoreCase) == true) {mainDiv.InnerHtml += "Sirurile sunt egale <br/>";} else {mainDiv.InnerHtml += "Sirurile nu sunt egale <br/>";}

CompareTo() - returneaz valoarea 0 dac irurile sunt egale, o valoare mai mic dect 0 dac irul 1 mai mic dect irul2, i o valoare mai mare ca 0 dac irul 1 este mai mare dect irul 2. Exemplul 3.22
int value = s1.CompareTo(s2); if ( value == 0) {mainDiv.InnerHtml += "Sirurile sunt egale <br/>";} else if (value < 0) {mainDiv.InnerHtml += s1 + " mai mic decat " + s2 + "<br/>";} else {mainDiv.InnerHtml += s1 + " mai mare decat " + s2 + "<br/>";}

5. Operaii cu subiruri. Extragerea unui subir dintr-un ir este realizat de metoda substring(poziie, lungime)
string s = "Hello World"; mainDiv.InnerHtml += s.Substring(6) + "<br/>";

Va afia pe ecran irul World.


mainDiv.InnerHtml += s.Substring(6,3) + "<br/>";

Va afia pe ecran irul Wor.

Limbajul de scripting server-side ASP.NET

73

Cutarea unui subir ntr-un ir este realizat de metoda Contains(subir). Returneaz

valoarea true dac subirul este gsit, i false n caz contrar. Exemplul 3.23
string s = "Hello World", s1 = "He"; if (s.Contains(s1) == true) {mainDiv.InnerHtml += "Subsirul " + s1 + " se gaseste in sirul " + s + "<br/>";} else {mainDiv.InnerHtml += "Subsirul " + s1 + " nu se gaseste in sirul " + s + "<br/>";}

Cutarea primei apariii a unui subir ntr-un ir se realizeaz cu ajutorul metodei

IndexOf(subir, poziie, lungime, mod_comparare). Dac subirul nu se gsete n ir, se returneaz valoarea -1, altfel se returneaz poziia pe care se gsete subirul n ir.
string s = "Hello World", s1 = "ello"; int poz = s.IndexOf(s1, 0, 10, StringComparison.OrdinalIgnoreCase); if (poz == -1) {mainDiv.InnerHtml += "Subsirul " + s1+ " nu se gaseste in sirul " + s +"<br/>";} else { mainDiv.InnerHtml+="Subsirul "+s1+"se gaseste pe pozitia "+poz+" in sirul " +s+"<br/>"; }

Exemplul 3.24 Instruciunea s.IndexOf(s1, 0, 10, StringComparison.OrdinalIgnoreCase) caut prima apariie a subirului s1 n primele 10 caractere din irul s, ncepnd cu poziia 10. Cutarea nu este case sensitive.

III.2.9.

Date calendaristice

O variabil de tip dat calendaristic este un obiect care poate reine valori pentru data i timp. Declararea unei variabile de acest tip este:
DateTime d1;

Exemplul 3.24 Variabilele de tip dat calendaristic pot fi iniializate la declarare:


DateTime d1 = DateTime.Now; // returneaza data si ora curenta DateTime d2 = new DateTime(2008, 10, 14); // 14-10-2008 DateTime d3 = new DateTime(2008, 10, 14, 10, 50, 23); // 14-10-2008 10:50:23 mainDiv.InnerHtml = d1.ToString() + "</br>"; mainDiv.InnerHtml += d2.ToString() + "</br>"; mainDiv.InnerHtml += d3.ToString() + "</br>";

Rezultatul va fi urmtorul:
13.10.2008 22:30:00 14.10.2008 00:00:00 14.10.2008 10:50:23

74

Metodele i proprietile care se aplic unei variabile de tip dat calendaristic sunt: ToShortDateString() returneaz o dat calendaristic n forma scurt mainDiv.InnerHtml += d1.ToShortDateString() + "</br>";Afieaz: 14.10.2008 ToLongDateString() returneaz o dat calendaristic n forma desfurat mainDiv.InnerHtml += d1.ToLongDateString() + "</br>";Afieaz: 14 octombrie 2008 ToShortTimeString() returneaz ora, minutele dintr-o variabil de tip dat calendaristic mainDiv.InnerHtml += d1.ToShortTimeString() + "</br>"; Afieaz: 22:30 ToLongTimeString() returneaz ora, minutele i secundele dintr-o variabil de tip dat calendaristic mainDiv.InnerHtml += d1.ToLongTimeString() + "</br>"; Afieaz: 22:30:00 Day proprietate care returneaz ziua dintr-o dat calendaristic mainDiv.InnerHtml += d1.Day + "</br>"; Afieaz: 14 Month proprietate care returneaz luna dintr-o dat calendaristic mainDiv.InnerHtml += d1.Month + "</br>"; Afieaz: 10 Year proprietate care returneaz ziua dintr-o dat calendaristic mainDiv.InnerHtml += d1.Year + "</br>"; Afieaz: 2008 DayOfYear proprietate care returneaz numrul zilei din cadrul anului mainDiv.InnerHtml += d1.DayOfYear + "</br>"; Afieaz: 288 DayOfMonth proprietate care returneaz ziua din cadrul sptmnii mainDiv.InnerHtml += d1.DayOfWeek + "</br>"; Afieaz: Tuesday Operaii cu date calendaristice 1. Prin adugarea unui numr la o dat calendaristic, rezult o alt dat calendaristic. Astfel, se pot folosi metodele AddSeconds(valoare), AddMinutes(valoare), AddHours(valoare), AddDays(valoare), AddMonth(valoare), AddYears(valoare). Exemplul 3.25
mainDiv.InnerHtml += d2.AddDays(-50).ToShortDateString() + "</br>"; mainDiv.InnerHtml += d2.AddMonths(10).ToShortDateString() + "</br>"; mainDiv.InnerHtml += "Ziua de " + d2.ToLongDateString() + " va fi peste 1 an in ziua de " + d2.AddYears(1).DayOfWeek + "</br>";

Rezultatul va fi urmtorul:
04.09.2008 24.08.2009 Ziua de 24 octombrie 2008 va fi peste 1 an in ziua de Saturday

2. Timpul scurs ntre dou date calendaristice poate fi aflat prin aplicarea urmtoarelor proprieti diferenei dintre dou date calendaristice: TotalSeconds, TotalMinutes, TotalHours, TotalDays:
d3 = new DateTime(2008, 10, 28); d2 = new DateTime(2008, 10, 24); mainDiv.InnerHtml += Math.Floor((d3 - d2).TotalDays) + "</br>";

Modelul client-server ezultatul va fi: 4

75

IV. Modelul client-server


IV.1.Controale server web
Controalele server web ofer faciliti superioare controalelor server Html. Astfel, controalele web sunt puternic orientate obiect, permit legarea la diferite surse de date, detecteaz automat tipul browserului i afiarea pe client va fi optimizat n funcie de capabilitile acestuia. Un control web poate fi creat fie n modul design (din fereastra Toolbox), fie n pagina .aspx folosind tag-urile <asp> </asp>.
<asp:Label ID="Label1" runat="server" Text="Hello world!"></asp:Label>

Controalele web pot rspunde la diferite evenimente. De exemplu, un obiect de tip button genereaz evenimentul Click atunci cnd utilizatorul apas butonul. n momentul apariiei unui eveniment, se realizeaz o cerere ctre server, iar datele din pagina web sunt trimise serverului. Aici se execut codul C# asociat evenimentului, iar rezultatul este trimis ctre client. Valorile proprietilor controalelor web pot fi setate prin trei moduri: n modul design din fereastra Properties n surs paginii (fiierul .aspx) prin intermediul codului C# executat pe server

Toate controalele server web au o serie de proprieti comune: Proprietate Descriere BackColor Culoarea de fundal a controlului BorderColor Culoarea chenarului controlului BorderWidth Grosimea chenarului controlului, exprimat n pixeli BorderStyle Tipul de chenar. Valorile posibile sunt: NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset CssClass Clasa CSS asociat controlului Enabled Dac are valoarea False, controlul este inactiv Font Acest atribut conine subproprieti pentru stabilrea caracteristicilor fontului ForeColor Culoarea textului Height Lungimea controlului TabIndex Ordinea n care controlul este accesat la apsarea tastei Tab de ctre utilizator n interfa ToolTip Textul care apare atunci cnd utilizatorul poziioneaz mouse-ul peste control Width Limea controlului. Unitatea de msur implicit este pixel-ul. Alte uniti posibile sunt: Point, Pica, Inch, Mm, Cm, Percentage, Em. n continuare sunt prezentate cteva dintre cele mai folosite controale web pentru realizarea interfeei.

76

IV.1.1.
proprietatea Text:

Label

Permite afiarea unui ir de caractere n pagina web. Textul este reinut n


<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Size="Large" ForeColor="#0066FF" Text="Evenimente butoane"> </asp:Label>

IV.1.2.

Button, LinkButton, ImageButton

Aceste controale creeaz butoane de submit pentru pagina web. Proprietatea Text reine irul de caractere afiat pe buton. n exemplul urmtor, la apsarea butoanelor se execut codul C# asociat evenimentului click, i este modificat proprietatea text a unui obiect Label.

Figura 4.1 Adugarea de controale button, n modul design

Controlul LinkButton afieaz un hyperlink n locul unui text, iar controlul ImageButton este reprezentat sub forma unei imagini. Proprietatea ImageUrl definete calea ctre fiierul care conine imaginea. n acest exemplu, controlul de tip ImageButton are asociat fiierul button.jpg. Observaie. Pentru a aduga o imagine n proiect, putei crea un director images din fereastra Solution Explorer (click dreapta, new folder). Aici salvai fiierul care conine imaginea. (dac fiierul imagine nu apare n folderul images, alegei opiunea refresh folder).

Figura 4.2 Adugarea unui director Images n cadrul proiectului

Modelul client-server

77

Modificarea valorii proprietii ImageUrl se poate realiza fie n modul design, fie direct n codul aspx:
<asp:ImageButton ID="ImageButton1" runat="server" Height="27px" ImageUrl="~/images/button.jpg" onclick="ImageButton1_Click" Width="85px" />

Figura 4.3 Modificarea proprietii ImageUrl n modul design

Exemplul 4.1 La apsarea unui dublu click pe controlul de tip button se genereaz antetul metodei care va conine codul C# care va fi executat la apariia evenimentului Click:
public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { Label2.Text = "Ati apasat butonul 1 !"; } protected void Button2_Click(object sender, EventArgs e) { Label2.Text = "Ati apasat butonul 2! "; } protected void LinkButton1_Click(object sender, EventArgs e) { Label2.Text = "Ati apasat butonul 3! "; } protected void ImageButton1_Click(object sender, ImageClickEventArgs e) { Label2.Text = "Ati apasat butonul 4! "; } }

78

IV.1.3.

TextBox

Afieaz o caset de dialog n care utilizatorul poate introduce date. irul de caractere introdus, este reinut de proprietatea Text. Proprietatea TextMode definete modul n care utilizatorul poate introduce datele: SingleLine, MultiLine, Password. Exemplul 4.2 Aplicaia urmtoare permite introducerea unui text, care la apsarea butonului va fi afiat pe ecran de ctre controlul Label2.

Figura 4.4 Adugarea unui control TextBox, n modul design

Fiierul .aspx este:


<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>TextBox</title></head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Font-Bold="True" FontSize="14pt" ForeColor="#990000" Text="Exemplu textbox" TabIndex="1"> </asp:Label><br /> <asp:TextBox ID="TextBox1" runat="server" ForeColor="#009900" ToolTip="Introduceti un text si apasati apoi butonul Submit" Width="195px"> </asp:TextBox> ID="Button1" runat="server" onclick="Button1_Click" <asp:Button Text="Button" TabIndex="2" /><br /> <asp:Label ID="Label2" runat="server" TabIndex="3"></asp:Label> </div> </form> </body> </html>

Codul asociat evenimentului Click pentru butonul din pagin, este:


protected void Button1_Click(object sender, EventArgs e) { Label2.Text = TextBox1.Text; }

Modelul client-server

79

IV.1.4.

CheckBox, CheckBoxList

Controlul CheckBox permite crearea unei casete de marcare. Pentru a lucra cu mai multe casete la nivel unitar, se folosete controlul CheckBoxList. Controlul CheckBox are proprietatea Checked, care are valoarea True dac s-a bifat caseta sau False n caz contrar. irul de caractere afiat n dreptul casetei, este reinut de proprietatea Text. Exemplul 4.3 n exemplul urmtor, dac este bifat prima caset i apoi se apas butonul Ok, se modific proprietatea Text a controlului Label1. De asemenea, la apsarea butonului Submit se modific proprietatea Text a obiectului Label2, fiind afiate oraele selectate prin intermediul casetelor de bifare.

Figura 4.5 Adugarea controalelor CheckBox, CheckBoxList, n modul design

Verificarea dac s-a bifat sau nu caseta, se realizeaz prin intermediul proprietii Checked:
protected void Button1_Click(object sender, EventArgs e) { if (CheckBox1.Checked == true) { Label1.Text = "Ati selectat checkbox-ul"; } else { Label1.Text = "Nu ati selectat checkbox-ul"; } }

Pentru un control de tip CheckBoxList, exist proprietile RepeatDirection i RepeatLayout, care permit formatarea controlului. RepeatDirection poate lua valorile Vertical, respectiv Horizontal. Pentru RepeatLayout putei alege ntre valorile Flow, respectiv Table. Prin intermediul valorii Flow, pot fi poziionate i alte controale pe acelai rnd cu lista de casete. Exemplul 4.4 Adugarea de valori pentru un control de tip CheckBoxList se poate realiza att n modul design, ct i prin intermediul codului din pagina .aspx:

80

1. Prin cod:
<asp:CheckBoxList ID="CheckBoxList1" runat="server" BorderColor="#0066CC" BorderStyle="Solid" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem>Buzau</asp:ListItem> <asp:ListItem>Bucuresti</asp:ListItem> <asp:ListItem>Craiova</asp:ListItem> </asp:CheckBoxList>

2.

n modul design:

Figura 4.6 Adugarea de valori pentru controlul CheckBoxList, n modul design

Controlul CheckBoxList are asociat o proprietate numit Items. Items este un vector care conine valorile din controlul CheckBoxList. La rndul su are proprietatea Count ce returneaz numrul de valori din list. Fiecare element poate fi accesat prin intermediul unui indice. n exemplul de mai sus, CheckBoxList.Items[1].Text este irul de caractere Bucureti. Pentru a verifica dac a fost bifat o anumit caset, care se folosete avea proprietatea Selected, poate

valorile True sau False. Efectul execuiei este urmtorul:

Figura 4.7 Rezultatul prelucrrii paginii n urma apsrii butonului Submit

Modelul client-server Codul C# asociat evenimentului Click pentru butonul Submit este:
protected void Button2_Click(object sender, EventArgs e) { String s = ""; for (int i = 0; i < CheckBoxList1.Items.Count; i++) { if (CheckBoxList1.Items[i].Selected) { s = s + CheckBoxList1.Items[i].Text; s = s + "<br>"; } } if (s.Length > 0) { Label2.Text = "Ati selectat optiunile:<br>" + s; } else { Label2.Text = "Nu ati selectat nici o optiune" ; } }

81

IV.1.5.

RadioButton

Afieaz un buton radio. Dintr-un grup de butoane radio, doar unul poate fi selectat la un moment dat. Proprietatea Text a acestui control, definete irul de caractere ce apare n dreptul controlului. Pentru a grupa mai multe butoane radio, se folosete proprietatea GroupName. Exemplu:
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="stareCivila" Text="Casatorit" /><br /> <asp:RadioButton ID="RadioButton2" runat="server" GroupName="stareCivila" Text="Necasatorit" />

Exemplul 4.5 Ca i n cazul controlului CheckBox, verificarea dac s-a bifat sau nu butonul radio se realizeaz prin intermediul proprietii Checked.
protected void Button1_Click(object sender, EventArgs e) { if (RadioButton1.Checked == true) { Label1.Text = "Sunteti casatorit"; } else if (RadioButton2.Checked == true) { Label1.Text = "Nu sunteti casatorit "; } }

82

IV.1.6.

RadioButtonList

Afieaz un grup de butoane radio. Ca i CheckBoxList, acest control are proprietile RepeatDirection, RepeatLayout i Items. Pentru fiecare opiune din list se poate asocia o valoare de tip ir de caractere, prin intermediul atributului value. Exemplul 4.6 Adugarea de valori n list poate fi realizat n modul design sau prin intermediul codului din fiierul .aspx. 1. Prin cod:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem Value="1">Bucuresti</asp:ListItem> <asp:ListItem Value="2">Buzau</asp:ListItem> <asp:ListItem Value="3">Craiova</asp:ListItem> </asp:RadioButtonList>

2. n design mode:

Figura 4.8 Adugarea de valori pentru controlul RadioButtonList, n modul design

Proprietatea SelectedValue returneaz valoarea butonului radio selectat. Astfel, pentru a verifica dac un buton radio a fost selectat sau nu, se poate folosi urmtorul cod C#:
protected void Button1_Click(object sender, EventArgs e) { switch (RadioButtonList1.SelectedValue) { case "1": Label1.Text = "Ati selectat orasul Bucuresti "; break; case "2": Label1.Text = "Ati selectat orasul Buzau "; break; case "3": Label1.Text = "Ati selectat orasul Craiova "; break; } }

Modelul client-server

83

IV.1.7.
poate avea

BulletList
valorile: NotSet, Numbered, LowerAlpha, UpperAlpha, LowerRoman,

Afieaz o list numerotat. Proprietatea BulletStyle definete tipul de marcator, i UpperRoman, Disc, Circle, Square.
<asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="Disc"> <asp:ListItem>while</asp:ListItem> <asp:ListItem>for</asp:ListItem> <asp:ListItem>do while</asp:ListItem> </asp:BulletedList>

Proprietatea DisplayMode definete modul n care sunt afiate valorile din list: Text, HyperLink, LinkButton. n cazul selectrii tipului de afiare ca HyperLink, atributul value reine adresa http:
<asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="Square" DisplayMode="HyperLink" Target="_blank"> <asp:ListItem Value="http://msdn.microsoft.com/">MSDN</asp:ListItem> <asp:ListItem Value="http://www.microsoft.com">Microsoft</asp:ListItem> <asp:ListItem Value="http://www.microsoft.com/romania/">Microsoft Romania</asp:ListItem> </asp:BulletedList>

Figura 4.9 Adugarea de valori pentru controlul BulletList, n modul design

84

IV.1.8.

Image

Afieaz o imagine n pagina web. Proprietatea ImageUrl definete calea ctre fiierul care conine imaginea. Textul afiat de browser atunci cnd user-ul poziioneaz mouse-ul peste imagine, este reinut de proprietatea AlternateText.
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/movie1.jpeg" Height="406px" Width="265px" AlternateText="Jaws" />

IV.1.9.

DropDownList

Permite selectarea unei opiuni dintr-o list derulant. Ca i celelalte controale de tip list, DropDownList are proprietile Item i SelectedValue. De asemenea, proprietatea SelectedItem returneaz obiectul selectat din lista derulant. Exemplul 4.7 Pagina web urmtoare permite selectarea unui film dintr-o list derulant, iar la apsarea butonului Submit, n controlul de tip Image este afiat posterul filmului selectat. Posterele sunt fiiere cu extensia .jpg, care au fost salvate n directorul images din cadrul proiectului.

Figura 4.10 Fiierele cu imagini adugate n directorul images din cadrul proiectului

Atributul value pentru controlul DropDownList reine numele fiierului care conine imaginea, iar atributul text reine numele filmului, care va fi folosit pentru proprietatea AlternateText:
<asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem Value="movie1.jpeg">Jaws</asp:ListItem> <asp:ListItem Value="movie2.jpeg">Casablanca</asp:ListItem> <asp:ListItem Value="movie3.jpeg">Breakfast Tiffany&#39;s</asp:ListItem> <asp:ListItem Value="movie4.jpeg">Butch &amp; The Kid back</asp:ListItem> <asp:ListItem Value="movie5.jpeg">Forrest Gump</asp:ListItem> </asp:DropDownList>

at are

Modelul client-server

85

Codul C# care schimb imaginea n funcie de filmul selectat de utilizator este:


public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { Image1.ImageUrl = "images/" + DropDownList1.SelectedItem.Value; Image1.AlternateText = DropDownList1.SelectedItem.Text; } }

Figura 4.11 Adugarea de valori pentru controlul DropDownList, n modul design

IV.1.10. HyperLink
Este un control folosit pentru afiarea unui hyperlink n pagina web. Are proprietile Text pentru irul de caractere ce va fi afiat n pagin, respectiv NavigateUrl pentru adresa http. Modul de deschidere a link-ului n browser, poate fi specificat prin intermediul proprietii Target, care are valorile: _blank, _parent, _search, _self, _top.
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.microsoft.com" Target="_blank">www.microsoft.com </asp:HyperLink>

86

IV.1.11. Table, TableRow, TableCell


Aceste controale permit construirea unui tabel Html. Controlul Table are proprietatea Rows, care definete liniile tabelului (controale TableRow). La rndul su, Rows are proprietatea Cells (controale TableCell), care definete celulele liniei. irul de caractere care va fi afiat n celul este definit de proprietatea Text a controlului TableCell.

Figura 4.12 Adugarea controalelor Table, TableRow, TableCell, n modul design

Codul ASP care va fi generat n cazul exemplului de mai sus este:


<asp:Table ID="Table1" runat="server" BorderStyle="Solid" BorderWidth="1px" CellPadding="0" CellSpacing="0" Width="240px"> <asp:TableRow ID="row1" runat="server" BorderStyle="Solid" BorderWidth="1px"> <asp:TableCell runat="server" BorderStyle="Solid" BorderWidth="1px"> Nume </asp:TableCell> <asp:TableCell runat="server" BorderStyle="Solid" BorderWidth="1px"> Clasa </asp:TableCell> <asp:TableCell runat="server" BorderStyle="Solid" BorderWidth="1px"> Media </asp:TableCell> </asp:TableRow> </asp:Table>

Modelul client-server

87

IV.1.12. MultiView, View


Controlul MultiView acioneaz ca un container pentru controale de tip View. Controalele View sunt la rndul lor prinii altor controale web. n funcie de anumite criterii, un control View poate fi afiat la un moment dat n pagina web. Exemplul 4.8 n urmtorul exemplu este prezentat un control MultiView care conine trei controale de tip View. Primul control View conine o caset de text i un buton, al doilea View un are asociat un control hyperlink, iar al treilea un tabel. n acest exemplu, pentru afiarea succesiv a controalelor dintr-un View, se folosete un control BulletList, n care proprietatea DisplayMode are valoarea LinkButton. Proprietatea ActiveViewIndex definete indexul controlului View care este afiat n pagina web. (primul control View are indicele 0).

Figura 4.13 Adugarea controalelor MultiView, View, n modul design

Controlul BulletList are asociat evenimentul Click. Funcia care se execut la apariia acestui eveniment, are ca parametru un obiect de tipul BulletedListEventArgs cu proprietatea Index. Valoarea acestei proprieti este indexul opiunii din lista de marcatori care a generat evenimentul click.
public partial class _Default : System.Web.UI.Page { protected void BulletedList1_Click1(object sender, BulletedListEventArgs e) { MultiView1.ActiveViewIndex = Convert.ToInt32(e.Index); } }

IV.1.13. FileUpload
Permite upload-ul unui fiier pe server-ul web. Afieaz o caset de text mpreun cu un buton Browse, prin intermediul cruia se poate selecta fiierul dorit. Pentru a realiza

88

efectiv upload-ul, trebuie utilizat un buton (sau alt control) care s conin codul C# pentru upload. Controlul FileUpload are urmtoarele metode i proprieti: Nume HasFile Descriere Metod care returneaz true sau false dac utilizatorul a selectat un fiier pentru upload Metod care salveaz fiierul selectat pe server. Are ca SaveAs parametru calea destinaie Proprietate care reine numele fiierului FileName Proprietate care conine informaii despre fiierul upload-at PostedFile Proprietate care returneaz tipul fiierului upload-at ContentType Proprietate care returneaz dimensiunea fiierului upload-at. ContentLength Exemplul 4.9 n urmtorul exemplu, fiierul va fi upload-at ntr-un folder numit upload, construit n cadrul proiectului (din fereastra Solution Explorer).

Figura 4.14 Adugarea directorului upload n cadrul proiectului

Informaiile despre fiierul upload-at vor fi afiate folosind un control de tip Label.

Figura 4.15 Adugarea controlului FileUpload, n modul design

Fiierul .aspx este:


<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Untitled Page</title></head> <body> <form id="form1" runat="server"> <div> <asp:FileUpload ID="FileUpload1" runat="server" Width="265px" /> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" PostBackUrl="~/Default.aspx" Text="Upload" /><br /><br /> <asp:Label ID="Label1" runat="server" Font-Bold="True"></asp:Label> </div></form></body></html>

Modelul client-server

89

Codul C# care se execut la apsarea butonului Upload este cel care realizeaz efectiv upload-ul fiierului selectat:
public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) { FileUpload1.SaveAs(@"C:\Documents and Settings\User\My Documents\Visual Studio 2008\WebSites\ASP_Projects\FileUpload\App_Data\upload\"+FileUpload1.FileName); Label1.Text = "Ati upload-at fisierul: " + FileUpload1.FileName + "<br/>Tip: " + FileUpload1.PostedFile.ContentType + " <br/> Dimensiune: " + FileUpload1.PostedFile.ContentLength; } else { Label1.Text = "Nu ati selectat nici un fisier";} } }

IV.1.14. Evaluare
1. Realizai o pagin web care s conin un test gril cu 5 ntrebri. ntrebrile pot fi cu un singur rspuns sau cu rspunsuri multiple. La apsarea unui buton numit Punctaj, va fi afiat n pagin rezultatul testului (la cte ntrebri s-a rspuns corect). La apsarea unui buton numit Reset, se vor reiniializa variantele de rspuns, i se va terge rezultatul testului precedent. Indicaie: Pentru variantele de rspuns corecte se poate folosi proprietatea value a unui element din CheckBoxList sau RadioButtonList. 2. Modificai pagina web de mai sus, astfel nct dup selectarea unei variante, aceasta Indicaie: Se va modifica proprietatea enabled. 3. Realizai o pagin web care conine un test gril cu 3 ntrebri i care ndeplinete urmtoarele condiii: ntrebrile sunt afiate prin intermediul unui control BulletList , de tip LinkButton. Variantele de rspuns pentru fiecare ntrebare sunt poziionate ntr-un control de tip view al unui control multiview. Rspunsurile sunt cu o singur variant corect, aceasta avnd valoarea 1. La selectarea unei ntrebri, se afieaz variantele de rspuns corespunztoare. La apsarea unui buton Punctaj se calculeaz punctajul final, care va fi afiat prin intermediul unui control Label. s devin inactiv.

90

4. Realizai un site web care conine 5 pagini web, fiecare avnd cte o ntrebare a unui test gril. Testul gril va avea ntrebri cu o singur variant de rspuns corect. n fiecare pagin va exista un hyperlink ctre pagina urmtoare (cu excepia ultimei). 5. Realizai o pagin web care s afieze un formular de introducere a informaiilor despre un produs: denumire, pre, unitatea de msur, data expirrii, dac i se aplic adaos comercial sau nu. Pentru data expirrii se va folosi cte un control de tip DropDownList pentru zi, lun an. Data curent va fi selectat implicit. Valorile pentru DropDownList-ul ce conine anul, vor fi n intervalul [an_curent, an_curent + 10]. 6. Realizai o pagin web care permite utilizatorului s fac upload pentru un fiier de tip imagine. Fiierul upload-at va fi afiat printr-un control de tip Image. 7. Realizai o pagin web care va afia un calculator capabil s efectueze adunri, scderi, mpriri, nmuliri, operaia de ridicare la putere, calculul n!. Fiecare tast a calculatorului va fi un control de tip Button.

IV.2. Post Back


Post Back este fenomenul prin care la generarea unui eveniment de ctre utilizator (client), pagina web este transmis server-ului, unde se poate executa o secven de cod care s trateze evenimentul respectiv. Unele controale genereaz automat un post back ctre server. De exemplu controlul Button genereaz un post back la apsarea butonului. Alte controale nu genereaz un post back automat. De exemplu, controlul TextBox are un eveniment numit TextChanged. Acesta este generat de fiecare dat cnd valoarea din caseta de text este modificat. Implicit acest eveniment nu genereaz un post back. ns, n cazul n care un alt control genereaz un post back (de exemplu un buton), n momentul executrii codului pe server, este tratat prima dat evenimentul TextChanged i apoi evenimentul Click al butonului. Dac proprietatea AutoPostBack are valoarea true, atunci controlul respectiv va genera automat un post back. Exemplul 4.11 S considerm n continuare o pagin web n care avem un control de tip CheckBox i un control de tip TextBox care are proprietatea visible = false. n momentul n care este bifat checkbox-ul, vrem ca n pagin s apar controlul TextBox. La selectarea controlului CheckBox, se genereaz evenimentul CheckedChanged. Codul C# este:

Modelul client-server
protected void CheckBox1_CheckedChanged(object sender, EventArgs e) { if (CheckBox1.Checked == true) { TextBox3.Visible = true; TextBox3.Focus(); } else { TextBox3.Visible = false; } }

91

Cnd vom rula pagina, vom constata totui c nu este afiat controlul TextBox. Pentru a se executa metoda CheckBox1_CheckedCanged, pagina trebuie retrimis serverului n momentul bifrii checkbox-ului. Serverul trebuie sa execute codul i apoi s retrimit ctre browser pagina n care textbox-ul este vizibil. De aceea controlul CheckBox trebuie s genereze aciunea de post back. Pentru aceasta trebuie setat proprietatea AutoPostBack cu valoarea true. Exemplul 4.12 O alt situaie n care dorim generarea automat a aciunii de post back este cazul controlului DropDownList. n subcapitolul anterior am prezentat o aplicaie n care se selecta denumirea unui film dintr-un DropDownList, apoi la apsarea unui buton era afiat posterul filmului respectiv (ntr-un control de tip Image). Vrem s modificm aplicaia, astfel nct afiarea imaginii s se realizeze automat la selectarea filmului n DropDownList.
Figura 4.16 Afiarea imaginii se face la selectarea unei opiuni din controlul DropDownList

Pentru aceasta, vom stabili valoarea true proprietii AutoPostback pentru controlul DropDownList. Apoi, codul care se executa la apsarea butonului va fi executat la generarea evenimentului SelectedIndexChanged pentru controlul DropDownList.
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { Image1.ImageUrl = "images/" + DropDownList1.SelectedItem.Value; Image1.AlternateText = DropDownList1.SelectedItem.Text; }

Obiectul Page asociat fiecrei pagini web poate fi folosit pentru a verifica dac a avut loc o aciune de post back, sau este prima ncrcare a paginii. Astfel, proprietatea IsPostBack are valoarea true dac un control a generat o aciune de post back, i false n caz contrar.

92

Exemplul 4.13 Iat un exemplu n care avem nevoie de aceast proprietate. Considerm o pagin web n care avem un control TextBox iniializat cu valoarea 0. La apsarea unui buton dorim incrementarea valorii din TextBox. Codul asp este urmtorul:
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"><title>PostBack</title></head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server" ReadOnly="True"> </asp:TextBox> <asp:Button ID="Button1" runat="server" onclick="Button1_Click1" Text="+"/> </div></form></body></html>

Exemplul 4.14 Pentru a ti cnd s realizm iniializarea valorii din TextBox cu 0, folosim proprietatea IsPostBack:
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack == false) { TextBox1.Text = "0"; } } protected void Button1_Click1(object sender, EventArgs e) { TextBox1.Text = Convert.ToString(Convert.ToInt32(TextBox1.Text) + 1); } }

IV.2.1. Evaluare
1. S se realizeze o pagin web care conine un test gril, n care ntrebrile sunt replici celebre din filme, iar variantele de rspuns reprezint un nume de film. La selectarea rspunsului corect, va fi afiata o imagine care conine poster-ul filmului respectiv. (Iniial controlul Image are proprietatea visible = false). 2. S se realizeze o pagin web care conine un test gril n care ntrebrile au o singur variant de rspuns corect. Rezultatul testului va fi afiat prin intermediul unui control TextBox, pentru care utilizatorul nu poate modifica valoarea. La prima ncrcare a paginii, rezultatul va avea valoarea 0. La fiecare selectare a unei variante de rspuns, se va reactualiza valoarea rezultatului.

Modelul client-server

93

IV.3.Controale pentru validarea datelor


n toate aplicaiile web se pune problema validrii datelor introduse de utilizator. Cu alte cuvinte, trebuie s ne asigurm c utilizatorul site-ului nostru introduce numai date corecte n casetele de text care i sunt puse la dispoziie. De exemplu, dac ntr-o pagin web se cere utilizatorului introducerea vrstei, i pentru aceasta i punem la dispoziie o caset de text, va fi obligatoriu s ne asigurm c n acea caset se pot introduce numai cifre, i c numrul rezultat este ncadrat ntr-un anumit interval. Un alt exemplu, este introducerea unei adrese de email valid din punct de vedere al formatului. ASP.Net pune la dispoziie controale predefinite pentru validarea datelor introduse n pagina web. Controalele de validare au n comun proprietile: ErrorMessage definete mesajul de eroare care va fi afiat dac datele nu sunt introduse corect ControlToValidate definete controlul pentru care se aplic validarea.

IV.3.1.

RequiredFieldValidator

Verific dac n caseta de text asociat s-au introdus date de ctre utilizator. Se folosete pentru formularele de date n care cmpurile sunt obligatorii.

IV.3.2.

RangeValidator

Verific dac datele introduse n caseta de text asociat fac parte dintr-un anumit interval. Proprietile MinimumValue i MaximumValue permit introducerea limitelor intervalului. Tipul valorilor din interval poate fi specificat prin intermediul proprietii Type.

IV.3.3.

RegularExpressionValidator

Se folosete pentru validarea datelor care trebuie s respecte un anumit format, cum ar fi numere de telefon, adrese de email, etc. Proprietatea ValidationExpression permite alegerea unei expresii predefinite.

IV.3.4.

CompareValidator

Compar valoarea introdus n controlul asociat, cu o valoare predefinit. Proprietatea ValueToCompare reine aceast valoare. Tipul de comparare este definit de proprietatea Operator, valorile sale este specificat de proprietatea Type. posibile fiind: Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual, DataTypeCheck. Tipul valorilor comparate

94

IV.3.5.

CustomValidator

Pe lng aceste controale predefinite, programatorul poate defini reguli proprii de validare, prin intermediul controlului CustomValidator. Validarea se poate realiza prin intermediul unei funcii client-side (folosind javaScript), sau la nivel de server. Exemplul 4.15 Urmtoarea aplicaie folosete controalele prezentate mai sus pentru validarea datelor introduse de utilizator:

Figura 4.17 Adugarea controalelor de validare, n modul design

Pentru validarea numelui i prenumelui s-au folosit dou controale RequiredFieldValidator:


<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="Nu ati introdus numele:"> </asp:RequiredFieldValidator> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2" ErrorMessage="Nu ati introdus prenumele!"> </asp:RequiredFieldValidator>

Pentru selectarea oraului s-a folosit un control de tip DropDownList, pentru care proprietatea AutoPostBack are valoarea true. Astfel, la selectarea unui element din list se va realiza automat validarea opiunii (fr s se atepte apsarea butonului de submit). Fiecare element are o valoare asociat prin intermediul proprietii value. (prima opiune are valoarea 0). Validarea se realizeaz prin intermediul unui control CompareValidator:
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="DropDownList1" ErrorMessage="Nu ati selectat orasul!" Operator="GreaterThan" Type="Integer" ValueToCompare="0"> </asp:CompareValidator>

Dac opiunea selectat are valoarea 0, se va genera mesajul de eroare.

Modelul client-server

95

Figura 4.18 Modificarea valorilor returnate de elementele din controlul DropDownList

Salariul este validat prin intermediul a dou controale: RequiredFieldValidator pentru a verifica dac s-a introdus o valoare:

<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox4" ErrorMessage="Nu ati introdus salariul!"> </asp:RequiredFieldValidator>

RangeValidator pentru a verifica dac valoarea introdus este n intervalul [0..10000]:

<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox4" ErrorMessage="Salariul in intervalul [0..10000]" MaximumValue="10000" MinimumValue="0" Type="Integer"> </asp:RangeValidator>

La prima ncrcare a paginii, controlul TextBox care permite introducerea unei adrese web este inactiv. Pentru aceasta, proprietatea Enabled va avea valoarea false. De asemenea, controlul de tip hyperlink nu va fi vizibil iniial pe ecran, proprietatea sa Visible avnd valoarea false. Exemplul 4.16 Controlul de tip CheckBox are proprietatea AutoPostBack = true. Astfel, la bifarea sau debifarea sa, se va realiza o aciune de post back ctre server, unde se va executa codul C# corespunztor evenimentului CheckedChanged:

96

protected void CheckBox1_CheckedChanged(object sender, EventArgs e) { if (CheckBox1.Checked == true) { TextBox3.Enabled = true; //controlul TextBox devine activ TextBox3.Focus(); //mouse-ul este pozitionat in textbox } else { TextBox3.Text = ""; //se sterge valoarea din TextBox TextBox3.Enabled = false; //controlul TextBox devine inactiv } }

La introducerea unui ir de caractere n TextBox se genereaz evenimentul TextChanged. La apsarea butonului Submit se va realiza un post back ctre server, unde se va realiza codul asociat evenimentului. Aici se va afia pe ecran hyperlink-ul, iar acesta va trimite ctre URL-ul introdus de utilizator.
protected void TextBox3_TextChanged(object sender, EventArgs e) { if (TextBox3.Text.Trim().Length > 0) { HyperLink1.Visible = true; HyperLink1.Text = TextBox3.Text; HyperLink1.NavigateUrl = TextBox3.Text; } else {HyperLink1.Visible = false;} }

Exemplul 4.17 Pentru a verifica dac valoarea introdus pentru URL poate fi o adres

valid, se folosete controlul RegularExpressionValidator.


<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox3" ErrorMessage="Adresa http incorecta" ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w./?%&amp;=]*)?"> </asp:RegularExpressionValidator>

Valoarea proprietii ValidationExpression a fost aleas dintr-o list de formate predefinite.

Figura 4.19 Alegerea unei expresii regulate pentru controlul RegularExpressionValidator.

Modelul client-server

97

La apsarea butonului Submit, dac toate validrile sunt ndeplinite, se va realiza o aciune de redirect ctre adresa web introdus de utilizator (dac aceasta exist). Dac utilizatorul nu a introdus nici o adres web n controlul TextBox, se va realiza o aciune de redirect ctre a doua pagin a proiectului (Default2.aspx), unde se afieaz prin intermediul unui control Label mesajul Datele s-au introdus cu succes!. n practic, dac datele sunt corecte, se va apela o interogare SQL pentru inserarea acestor date ntr-o tabel, dup care se poate realiza un redirect ctre o alt pagin web. Pentru a verifica dac toate condiiile sunt ndeplinite, se apeleaz metoda IsValid a obiectului Page, care returneaz valorile true sau false. Realizarea unui redirect ctre o alt pagin web, se realizeaz prin intermediul metodei Redirect a obiectului Response, care primete ca parametru un ir de caractere ce reprezint adresa paginii.

protected void Button1_Click(object sender, EventArgs e) { if (Page.IsValid == true) { if (CheckBox1.Checked == true && HyperLink1.NavigateUrl != null) { Response.Redirect(HyperLink1.NavigateUrl); } else { Response.Redirect("Default2.aspx"); } } }

IV.3.6.

Evaluare

1. Realizai un formular pentru introducerea datelor unui angajat: nume, prenume, adresa, telefonul, salariul, data naterii, funcia, vechimea n munc, adresa de email. Toate cmpurile sunt obligatorii, cu excepia adresei de email. Se vor realiza urmtoarele validri: Salariul mai mare ca 0, i mai mic ca 20000. Vechimea n munc mai mare ca 0, i mai mic dect 50. Telefonul i adresa de e-mail trebuie s fie introduse corect. Pentru funcie se va folosi un control DropDownList, n care prima opiune este mesajul: Selectai funcia.

98

IV.4.Controale server web avansate.


IV.4.1. ImageMap

Este un control care permite afiarea unei imagini care conine zone speciale numite hot spots. Cnd utilizatorul apas un click cu mouse-ul ntr-o astfel de regiune se poate realiza una din urmtoarele aciuni: controlul trimite pagina napoi ctre server unde se poate executa un anumit cod (se genereaz un postBack) utilizatorul este redirectat ctre o alt pagin (hyperlink). Proprietatea ImageUrl definiete calea ctre fiierul care conine imaginea. Proprietatea HotSpots este o colecie de obiecte de tip HotSpot. Un obiect HotSpot poate fi de form circular, rectangular sau poligonal. Orice HotSpot are proprietile: Nume AlternateText HotSpotMode Descriere Textul care apare cnd user-ul poziioneaz mous-ul peste hot spot Poate avea una din valorile: NotSet, None, PostBack, Navigate. Dac se alege PostBack, la apsarea hotSpot-ului se realizeaz un post back ctre server. n cazul opiunii Navigate, utilizatorul este redirectat ctre o alt pagin. NavigateUrl Reine URL-ul paginii ctre care se realizeaz redirectarea PostBackValue Definete o valoare care va returnat server-ului n momentul cnd se realizeaz un post back Target Definete modul n care este deschis pagina web ctre care se realizeaz redirectarea n funcie de tipul de tip, un HotSpot poate avea i alte proprieti. Tip HotSpot Proprieti Circle X, Y, Radius coordonatele centrului cercului, i raza acestuia Rectangle Bottom, Left, Right, Top coordonatele colurilor dreptunghiului din stanga jos respectiv dreapta sus Polygon Coordinates list de perechi de coordonate pentru vrfurile poligonului Exemplul 4.18 Judeul Buzu de pe harta din fiierul romania.gif, va avea asociat un hotSpot de tip circle, judeul Dolj un hotSpot de tip rectangle, iar judeul Timi un hotSpot de tip polygon.
<asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="PostBack" ImageUrl="~/Images/romania.gif" onclick="ImageMap1_Click1"> <asp:CircleHotSpot HotSpotMode="PostBack" AlternateText="Buzau" PostBackValue="1" Radius="30" Target="_blank" X="545" Y="370" /> <asp:RectangleHotSpot AlternateText="Dolj" Bottom="535" HotSpotMode="PostBack" Left="236" PostBackValue="2" Right="314" Target="_blank" Top="480" /> <asp:PolygonHotSpot Coordinates="14,261, 65,339, 100,336, 112,319, 173,315, 165,293" HotSpotMode="PostBack" PostBackValue="3" Target="_blank" AlternateText="Timis" /> </asp:ImageMap>

Modelul client-server

99

n acest exemplu, fiecare HotSpot genereaz un post back ctre server cu o anumit valoare. La un click pe hotSpot, se genereaz evenimentul Click pentru controlul ImageMap. Metoda care se va executa pe server, are un parametru de tip ImageMapEventArgs. Acest obiect are proprietatea PostBackValue care reine valoarea returnat de hotSpot.

Figura 4.20 Modificarea proprietilor unui obiect HotSpot pentru controlul ImageMap

Codul C# care se execut la apsarea unui hotSpot este urmtorul:


public partial class _Default : System.Web.UI.Page { protected void ImageMap1_Click1(object sender, ImageMapEventArgs e) { String judet = ""; switch (e.PostBackValue) { case "1": judet = "Ati selectat judetul Buzau"; break; case "2": judet = "Ati selectat judetul Dolj"; break; case "3": judet = "Ati selectat judetul Timis"; break; } Label1.Text = judet; } }

Exemplul 4.19 A doua posibilitate de utilizare a controlului ImageMap este prin intermediul unui HotSpot care redirecteaz ctre o alt pagin web. n urmtorul exemplu, n cadrul proiectului s-a adugat un director Images care conine imagini cu judeele Buzu, Dolj, Timis. De asemenea, s-au adugat nc trei pagini web, fiecare avnd un control de tip Image, cu o hart a judeului respectiv. De exemplu buzau.aspx are codul:

100 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Buzau</title></head> <body> <form id="form1" runat="server"> <div> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/buzau.jpg"/> </div> </form> </body> </html> Figura 4.21 Imaginile i paginile .aspx corespunztoare fiecrui jude

La apsarea unui hotSpot, se va deschide pagina web care conine imaginea cu judeul respectiv.

Figura 4.22 Modificarea proprietii NavigateUrl pentru un HotSpot

Fiierul .aspx al paginii principale va conine codul:


<asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="Navigate" ImageUrl="~/Images/romania.gif"> <asp:CircleHotSpot HotSpotMode="Navigate" PostBackValue="1" Radius="30" Target="_blank" X="545" Y="370" AlternateText="Buzau" NavigateUrl="~/buzau.aspx" /> <asp:RectangleHotSpot AlternateText="Dolj" Bottom="535" HotSpotMode="Navigate" Left="236" PostBackValue="2" Right="314" Target="_blank" Top="480" NavigateUrl="~/dolj.aspx" /> <asp:PolygonHotSpot Coordinates="14,261, 65,339, 100,336, 112,319, 173,315, 165,293" HotSpotMode="Navigate" PostBackValue="3" Target="_blank" AlternateText="Timis" NavigateUrl="~/timis.aspx" /> </asp:ImageMap>

Modelul client-server

101

IV.4.2.

Ad Rotator

Este un control care afieaz n pagina web o imagine (de obicei un banner de reclam), pe care user-ul poate da click, fiind redirectat ctre o alt pagin web. La fiecare ncrcare a paginii web se va fia o alt imagine aleas aleator. Fiierele cu imagini mpreun cu link-urile de redirect se gsesc ntr-o surs de date, de exemplu un fiier XML. XML este un standard pentru descrierea de marcaje. Un fiier XML are extensia .xml, i conine elemente definite de utilizator, ntr-o structur ierarhic. Pentru a aduga un fiier XML n cadrul proiectului, n fereastra Solution Explorer, se alege opiunea Add New Item, i apoi XML File.

Figura 4.23 Adugarea unui fiier XML n cadrul proiectului

Pentru a putea fi utilizat ca surs de date pentru controlul adRotator, fiierul XML trebuie s conin valori pentru urmtoarele proprieti: Nume ImageUrl NavigateUrl AlternateText Keyword Impressions Descriere Calea ctre fiierul care conine imaginea URL-ul ctre care se realizeaz redirectarea la un click pe imagine Textul care apare la poziionarea mouse-ului peste imagine O categorie pentru reclama, dup care se pot realiza filtrri Un numr care reprezint importana reclamei respective. Cu ct este mai mare, cu att imaginea va fi afiat mai des. Singura proprietate obligatorie este ImageUrl.

Exemplul 4.20 n urmtorul exemplu, va fi folosit un fiier ads.xml care conine trei reclame. Proprietile pentru fiecare reclam trebuie cuprinse ntre tag-urile <Ad> i </Ad>. Tag-ul rdcin pentru fiierul XML este <Advertisements>.

102

<?xml version="1.0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>~/images/programming.gif</ImageUrl> <NavigateUrl>http://www.programmersheaven.com/</NavigateUrl> <AlternateText>Limbaje de programare</AlternateText> <Keyword>Computers</Keyword> <Impressions>80</Impressions> </Ad> <Ad> <ImageUrl>~/images/startrek.gif</ImageUrl> <NavigateUrl>http://www.startrek.com/startrek/view/index.html</NavigateUrl> <AlternateText>Star Trek Home</AlternateText> <Keyword>SF</Keyword> <Impressions>20</Impressions> </Ad> <Ad> <ImageUrl>~/images/wallstreet.gif</ImageUrl> <NavigateUrl>http://online.wsj.com/</NavigateUrl> <AlternateText>Wall Street Journal</AlternateText> <Keyword>Finance</Keyword> <Impressions>70</Impressions> </Ad> </Advertisements>

n proiect au fost adugate trei fiiere cu imagini, n directorul images:

Figura 4.24 Fiierele cu imaginile corespunztoare bannere-lor.

Exemplul 4.21 Dup adugarea controlului n pagina web, trebuie aleas sursa de date:

Figura 4.25 Selectarea tipului sursei de date pentru controlul adRotator

Modelul client-server

103

Figura 4.26 Selectarea fiierului XML ca surs de date

Codul asp generat este urmtorul:


<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Ad rotator</title></head> <body> <form id="form1" runat="server"> <div> <asp:AdRotator ID="AdRotator1" runat="server" DataSourceID="ads" Target="_blank" /> <asp:XmlDataSource ID="ads" runat="server" DataFile="~/App_Data/ads.xml"></asp:XmlDataSource> </div> </form></body></html>

n urma execuiei paginii web, va fi afiat random la rencrcarea paginii, una din imaginile:

Figura 4.27 Rezultatul execuiei pentru o pagin cu un control AdRotator

IV.4.3.

Calendar

Este un control care afieaz n pagina web un calendar, din care utilizatorul poate alege o dat oarecare. Modul n care utilizatorul poate selecta o dat calendaristic este definit de proprietatea SelectionMode, care poate avea valorile:

104

Valoare Day DayWeek DayWeekMonth None

Descriere Utilizatorul poate selecta doar o zi Utilizatorul poate selecta o sptmn Utilizatorul poate selecta o lun Selecia unei date este dezactivat

Figura 4.28 Adugarea unui control Calendar

Controlul de tip calendar are urmtoarele proprieti: Nume Descriere TodaysDate Reine data curent a calendarului SelectedDate Data selectat de ctre utilizator (dac SelectionMode = Day) SelectedDates Vector care conine datele selectate de utilizator (dac SelectionMode are valorile DayWeek sau DayWeekMonth). Vectorul are proprietatea Count care returneaz numrul de zile selectate. La selectarea unei date de ctre utilizator, se genereaz evenimentul

SelectionChanged. La selectarea unei date calendaristice, se realizeaz automat un post back ctre server. Exemplul 4.22 n urmtorul exemplu, pagina web conine un control Calendar, dou controale DropDownList, respectiv un control Label. Cele dou controale DropDown au proprietatea Id modificat la valorile monthCmb pentru luni, respectiv yearCmb pentru ani. La ncrcarea paginii, se realizeaz urmtoarele aciuni: primul control DropDownList este iniializat cu lunile anului. al doilea control DropDownList este iniializat cu anii din intervalul [an_curent 10, an_curent +10]. n cele dou dropDown-uri se selecteaz luna i anul ce corespund datei curente. se afieaz data curent folosind controlul Label.

Modelul client-server

105

Popularea celor dou DropDown-uri este realizat prin intermediul codului C#. Metodele monthInit(), respectiv yearInit() folosesc metoda Add aplicat vectorului Items pentru adugarea de valori n list. Dup popularea DorpDown-urilor, selectarea lunii i anului ce corespund datei curente se realizeaz prin modificarea proprietii selected a unui element din list. Pentru a determina elementul curent, se apeleaz metoda FindByValue pentru vectorul de itemi din DropDown:
yearCmb.Items.FindByValue(DateTime.Now.Year.ToString()).Selected = true; monthCmb.Items[DateTime.Now.Month - 1].Selected = true;

Codul C# este urmtorul:


protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { monthInit(); yearInit(); } Label1.Text="Data curenta este: +Calendar1.TodaysDate.ToShortDateString(); } private void yearInit() { int firstYear = Convert.ToInt32(DateTime.Now.Year) - 10; int lastYear = Convert.ToInt32(DateTime.Now.Year) + 10; for (int i = firstYear; i <= lastYear; i++) { yearCmb.Items.Add(Convert.ToString(i)); } yearCmb.Items.FindByValue(DateTime.Now.Year.ToString()).Selected = true; } private void monthInit() { monthCmb.Items.Add("Ianuarie"); monthCmb.Items.Add("Februarie"); monthCmb.Items.Add("Martie"); monthCmb.Items.Add("Aprilie"); monthCmb.Items.Add("Mai"); monthCmb.Items.Add("Iunie"); monthCmb.Items.Add("Iulie"); monthCmb.Items.Add("August"); monthCmb.Items.Add("Septembrie"); monthCmb.Items.Add("Octombrie"); monthCmb.Items.Add("Noiembrie"); monthCmb.Items.Add("Decembrie"); monthCmb.Items[DateTime.Now.Month - 1].Selected = true; }

Exemplul 4.23 Cele dou controale DropDownList au setat valoarea true pentru proprietatea AutoPostBack. Astfel la selecia unui element din list, se genereaz un post back ctre

106

server, i se execut codul asociat evenimentului SelectedIndexChanged. Acest cod modific data curent a calendarului, conform lunii i anului selectate de utilizator.
protected void monthCmb_SelectedIndexChanged(object sender, EventArgs e) { Calendar1.TodaysDate = Convert.ToDateTime(monthCmb.SelectedItem.Value+" 1, " + yearCmb.SelectedItem.Value); } protected void yearCmb_SelectedIndexChanged(object sender, EventArgs e) { Calendar1.TodaysDate =Convert.ToDateTime(monthCmb.SelectedItem.Value+" 1, " + yearCmb.SelectedItem.Value); }

Cnd utilizatorul selecteaz o dat calendaristic, se genereaz evenimentul SelectionChanged. Metoda care trateaz acest eveniment, modific proprietatea Text a controlului Label, afind fie ziua selectat, fie prima i ultima zi a perioadei selectate.
protected void Calendar1_SelectionChanged(object sender, EventArgs e) { switch (Calendar1.SelectedDates.Count) { case (0): Label1.Text = "Nu ati selectat nici o data calendaristica";break; case (1): Label1.Text="Ziua selectata:"+ Calendar1.SelectedDate.ToShortDateString();break; case (7): Label1.Text = "Ati selectat o saptamana incepand cu ziua: " + Calendar1.SelectedDates[0].ToLongDateString()+" pana la "+ Calendar1.SelectedDates[Calendar1.SelectedDates.Count-1].ToLongDateString();break; default: Label1.Text = "Ati selectat o luna incepand cu ziua: " + Calendar1.SelectedDate.ToShortDateString(); break; }}

Exemplul 4.24 Efectul execuiei paginii web este urmtorul:

Figura 4.29 Rezultatul execuiei, cu diferitele moduri de selectare

Modelul client-server

107

IV.4.4.
1.

Evaluare

Realizai un site web care s conin informaii despre statele uniunii Europene.

Pagina de index va conine o imagine cu harta Europei, iar la un click pe o anumit ar se va deschide o pagin nou, n care sunt afiate informaiile despre ara selectat. De asemenea, n pagina principal trebuie s existe o zon de header unde va fi afiat un banner cu steagul unei ri la fiecare ncrcare a paginii. La un click pe banner se va deschide pagina de internet oficial a rii respective. 2. Realizai o pagin web care conine un formular de introducere a datelor unui angajat. Data naterii i data angajrii trebuie s fie alese prin intermediul unui control calendar.

IV.5.Conectarea la o surs de date a controalelor


Unele controale prezentate pn acum, permit ca datele care le populeaz s poat fi preluate din diverse surse de date : tablouri, fiiere XML, baze de date. De exemplu controalele de tip list: CheckBoxList, RadioButtonList, DropDownList, ListBox, etc. Proprietile i metodele care permit conectarea unui control la o surs de date sunt: Nume DataSource DataTextField Descriere Numele sursei de date Cmpul din sursa de date care va popula proprietatea text a controlului DataValueField Cmpul din sursa de date care va popula proprietatea value a controlului DataBind Metod care populeaz controlul cu datele din sursa de date Exemplul 4.25 Aplicaia urmtoare folosete un control ListBox pentru care se poate modifica sursa de date prin intermediul unor butoane radio.

Figura 4.30 Interfaa aplicaiei pentru popularea datelor din controlul ListBox

108

La apsarea butonului Adaug, se folosesc urmtoarele posibiliti pentru a popula obiectul ListBox: metoda Add a vectorului Items pentru modificarea proprietii text a controlului metoda Add a vectorului Item pentru adugarea de perechi text / valoare folosirea unui vector ca surs de date folosirea unui fiier XML ca surs de date Fiierul XML are structura:
<?xml version="1.0" encoding="utf-8" ?> <elevi> <elev> <nume>Georgescu</nume><media>7</media> </elev> <elev> <nume>Marinescu</nume><media>10</media> </elev> </elevi>

Numele este folosit pentru popularea proprietii Text, iar media pentru popularea proprietii Value pentru controlul ListBox. Iniial butonul Selecteaz nu este activ (proprietatea Enabled are valoarea false) deoarece nu este nici un element n list. De fiecare dat cnd se apas butonul Adaug, vechile elemente sunt terse din list, i butonul Selecteaz devine activ. La apsarea acestui buton, pentru elementul selectat din list se afieaz perechea text / value.

public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { if (ListBox1.SelectedIndex > -1) { Label1.Text = "Elevul " + ListBox1.Items[ListBox1.SelectedIndex].Text + " are media " + ListBox1.Items[ListBox1.SelectedIndex].Value; } else {Label1.Text = "Nu ati selectat nici o valoare !";} } private void add() { ListBox1.Items.Add("Ionescu"); ListBox1.Items[0].Value = "10"; ListBox1.Items.Add("Popescu"); ListBox1.Items[1].Value = "8"; }

Modelul client-server

109

private void listItem() { ListBox1.Items.Add(new ListItem("IONESCU", "10")); ListBox1.Items.Add(new ListItem("POPESCU", "9")); } private void vector() { String [] elevi = {"Sorescu", "Dobrinescu"}; ListBox1.DataSource = elevi; ListBox1.DataBind(); ListBox1.Items[0].Value = "9"; ListBox1.Items[1].Value = "8"; } private void xml() { DataSet setDateXml = new DataSet(); setDateXml.ReadXml(Server.MapPath("XMLFile.xml")); ListBox1.DataSource = setDateXml; ListBox1.DataTextField = "nume"; ListBox1.DataValueField = "media"; ListBox1.DataBind(); } protected void Button2_Click(object sender, EventArgs e) { Button1.Enabled = true; ListBox1.Items.Clear(); Label1.Text = ""; switch (RadioButtonList1.SelectedValue) { case "1": add(); break; case "2": listItem(); break; case "3": vector(); break; case "4": xml(); break; }

IV.6.Pstrarea informaiilor ntre paginile Web


Exist o deosebire fundamental ntre aplicaiile Windows i cele Web. Anume, n aplicaiile Windows odat creat un obiect, acesta rmne n memorie pn la terminarea aplicaiei i va putea fi utilizat i din alte ferestre dect cele n care a fost creat, att timp ct este public. Pe de alt parte, n aplicaiile web paginile nu se pstreaz n memorie pe calculatorul utilizatorului (clientului) i astfel apare navigarea ntre pagini. problema pstrrii informaiilor la

110

Cnd browserul cere o anumit pagin, ea este ncrcat de serverul web, se execut codul asociat pe baza datelor trimise de user, rezultnd un rspuns n format html trimis browserului. Dup ce este prelucrat pagina de ctre server, obiectele din pagin sunt terse din memorie, pierznd astfel valorile. De aceea apare ntrebarea: cum se salveaz/transmit informaiile ntre paginile unui site web sau chiar n cadrul aceleiai pagini, ntre dou cereri succesive ctre server? n funcie de locul n care vor fi salvate datele, exist dou abordri: Application. salvarea datelor pe client salvarea datelor pe server-ul web controlului de tip hidden obiectului ViewState Cookies apelului paginilor folosind parametri de tip Get (Query String)

Salvarea datelor pe client se poate realiza cu ajutorul

Pentru salvarea datelor pe server, se folosesc obiectele Session respectiv

IV.6.1. Controlul HiddenField


Se folosete pentru a salva date la nivelul paginii web. Dup cum i spune i numele, acest control nu este vizibil n pagina web. Valorile cmpurilor hidden sunt trimise server-ului odat cu pagina web, putnd stoca date de dimensiuni mici. Nu sunt indicate pentru a reine date importante. Pentru a reine date, controlul HiddenField folosete proprietatea Value: Hidden1.Value="10"; Exemplul 4.26 n urmtorul exemplu se incrementeaz cu 1 valoarea reinut n controlul de tip HiddenField. La apsarea unui buton, se genereaz o aciune de post back, iar n evenimentul Load al paginii web se incrementeaz valoarea. La prima ncrcare a paginii, se iniializeaz valoarea controlului hidden cu 0. Fiierul .aspx
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Hidden</title></head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server"></asp:Label> <asp:Button ID="Button1" runat="server" Text="+" /> <asp:HiddenField ID="nr" runat="server" /> </div> </form></body></html>

Modelul client-server

111

public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack == false) {nr.Value = "0";} else { nr.Value = Convert.ToString(Convert.ToInt32(nr.Value) + 1);} Label1.Text = nr.Value; } }

Fiierul .aspx.cs

IV.6.2. ViewState
n ASP.Net, toate controalele server web i pstreaz starea ntre dou aciuni de post back. Acest lucru se realizeaz prin intermediul proprietii EnableViewState, care are implicit valoarea true. Exemplul 4.27 De exemplu, dac ntr-o pagin web exist un control TextBox i un Buton, iar utilizatorul introduce date n caseta de text i apas butonul, se genereaz o aciune de post back ctre server. n momentul n care server-ul ntoarce rezultatul prelucrrii ctre browser, controlul TextBox i pstreaz valoarea. n momentul generrii codului Html de ctre server, se genereaz un control html de tip <input type=hidden...> , a crui valoare este un ir de caractere ce codific starea controalelor din pagin:
<input type=hidden name=__VIEWSTATE id=__VIEWSTATE value=/wEPDwULLTE1OTg1NDYyNDZkZFCFstl/DwSGv81TuCB397Tk5+CJ />

Datele sunt codificate Base64, ceea ce asigur securitatea, dar crete timpul de ncrcare al paginii. Programatorul poate aduga valori n obiectul ViewState folosind metoda Add(cheie, valoare):

112

protected void Button1_Click(object sender, EventArgs e) { if (ViewState["dataNasterii"] == null) { ViewState.Add("dataNasterii", "10/10/2008"); } Label2.Text = "Data de nastere a elevului " + TextBox1.Text + " este: " + ViewState["dataNasterii"]; }

n exemplul de mai sus, la prima ncrcare a paginii n obiectul ViewState este adugat valoarea "10/10/2008". La orice alt ncrcare a paginii, datele sunt preluate din obiectul ViewState prin intermediul cheii dataNasterii. Exemplul 4.28 Incrementarea unei valori la apsarea unui buton, poate fi realizat folosind obiectul ViewSate astfel: Fiierul.aspx
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>View State</title></head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="__"></asp:Label> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="+" /> </div> </form></body></html>

Fiierul .aspx.cs
protected void Button1_Click(object sender, EventArgs e) { if (ViewState["n"] == null) { ViewState["n"] = "0"; } else { ViewState["n"] = Convert.ToInt32(ViewState["n"]) + 1; } if (ViewState["n"].ToString().Length == 1) {//dac valoarea este o cifr, se mai adauga un 0 Label1.Text = "0" + ViewState["n"].ToString(); } else { Label1.Text = ViewState["n"].ToString(); }

Modelul client-server

113

IV.6.3. Cookies
Un cookies este o secven de text care este salvat pe calculatorul user-ului. Valorile din cookie sunt perechi de forma cheie/valoare. De obicei, cookie-urile sunt folosite pentru a reine informaii despre un user, la vizitarea unei pagini web. Cnd user-ul revine pe un site, informaiile din cookie sunt citite, ajutnd la identificarea rapid a utilizatorului. Pe lng valori, pentru un cookie se poate stabili durata de via n calculatorul clientului. Pentru a aduga un cookie, se folosete proprietatea Cookies a obiectului Response. Aceast proprietate este un vector asociativ, de tip cheie/valoare:
Response.Cookies["cheie"].Value = valoare

Timpul de via al cookie-ului se stabilete prin intermediul proprietii Expires. Avantajul folosirii cookie-urilor este acela c informaia este disponibil n orice pagin la revenirea userului n site, dup o anumit perioad. Printre dezavantaje amintim: nu sunt potrivite pentru a reine date importante cookie-urile pot fi dezactivate din browser sunt ncrcate pentru fiecare cerere, ducnd la creterea traficului

Exemplul 4.29 n exemplul urmtor, datele introduse de utilizator ntr-o caset text, sunt salvate ntrun cookie. ntr-o a doua pagin web, datele sunt extrase din cookie i afiate prin intermediul unui control Label. Pagina Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Cookie</title> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" /> </div> </form> </body> </html> public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { if (TextBox1.Text.Trim().Length > 0) { Response.Cookies["userName"].Value = TextBox1.Text; Response.Cookies["userName"].Expires.AddMinutes(10); //timpul de viata al cookie-ului este de 10 minute } Response.Redirect("Default2.aspx"); } }

L a apsare a

114

butonului se salveaz datele n obiectul Cookies, i se redirecteaz ctre pagina Default2.aspx

Exemplul 4.30 n pagina Default.aspx.cs, datele sunt citite din Cookie i afiate.
public partial class Default2 : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) { if (Request.Cookies["userName"] != null) { //daca exista valori in cookie Label1.Text += " " + Request.Cookies["userName"].Value; } else { Label1.Text += " Guest ";} }

IV.6.4. Query String


Se folosete de obicei pentru transmiterea de informaii de la o pagin la alta. Un query string e un ir de caractere, care conine adresa unei pagini web, urmat de o serie de parametri sub form de perechi nume=valoare. Perechile de parametri sunt separate de semnul &, iar prima pereche este desprit de adresa paginii web printr-un ?. De exemplu: http://localhost:2881/queryString/Default2.aspx?nume=ion&media=10 Pentru a extrage datele dintr-un query string, se pot folosi proprietile QueryString, respectiv Params ale obiectului Request. Ca i n cazul utilizrii cookies, aceste proprieti sunt de fapt vectori asociativi.

Modelul client-server

115

n urmtorul exemplu, datele introduse ntr-o pagin web sunt folosite pentru construirea unui query string. Acest ir de caractere este de fapt o adres a unei pagini web, ctre care se va face o redirectare. Datele sunt introduse prin intermediul a dou controale de tip TextBox, iar la apsarea unui buton se va realiza aciunea de redirect. n cea de a doua pagin, valorile sunt extrase din query string i afiate prin intermediul unui control Label. Codul C# asociat butonului este:
public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { string redirectUrl = "Default2.aspx?"; redirectUrl += "nume=" + TextBox1.Text; redirectUrl += "&media=" + TextBox2.Text; Response.Redirect(redirectUrl); } }

Exem plul 4.32 n evenimentul Load asociat celei de a doua pagini, se realizeaz prelucrarea valorilor:
public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["nume"] != null) { Label1.Text="Nume: "+Request.QueryString["nume"].ToString(); } if (Request.QueryString["media"].Trim() != null) { Label2.Text = "Media:" + Request.Params["media"].ToString(); } } }

Exemplul 4.33 Pe lng Response.Redirect, pentru a redirecta user-ul ctre o alt pagin, se poate folosi metoda Transfer a obiectului Server. De exemplu

Server.Transfer("Default2.aspx");

Aceast metod poate realiza un redirect doar ctre paginile web de pe server, dar nu i ctre pagini web externe.

116

Metoda Transfer are un al doilea parametru numit preserveForm, care poate avea valorile true sau false. n cazul n care parametrul are valoarea true, query string-ul i valorile controalelor din formularul paginii iniiale, vor putea fi accesate n pagina ctre care se realizeaz redirect-ul. Exemplul de mai sus poate fi rescris folosind metoda Server.Transfer astfel: la apsarea butonului din prima pagin, se apeleaz Server.Transfer pentru a realiza redirect-ul ctre a doua pagin.
public partial class Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { Server.Transfer("Default2.aspx", true); } }

Exemplul 4.34 n pagina a doua, se folosete proprietatea Form a obiectului Request, pentru a prelucra informaiile:
public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Label1.Text = "Nume: " + Request.Form["TextBox1"].Trim().ToString(); Label2.Text = "Media: " + Request.Form["TextBox2"].Trim().ToString(); } }

Exemplul 4.35 Form este un vector asociativ, n care id-ul unui control este cheia, iar valoarea este reprezentat de datele introduse n controlul respectiv. TextBox1 i TextBox2, reprezint idurile controalelor de tip TextBox din prima pagin.

IV.6.5. Session
Obiectul Session este creat pe serverul web la prima accesare a sitului de ctre un utilizator i rmne n memorie att timp ct utilizatorul rmne conectat la site. Pentru a aduga un obiect n sesiune, trebuie doar s scriem un cod de genul urmtor:
protected void Button1_Click(object sender, EventArgs e) { Session["nume"] = "Hello World!"; }

Modelul client-server

117

Exemplul 4.36 Session este de fapt un dicionar (list de perechi cheie valoare), n care valorile sunt de tip object. Ceea ce nseamn c la citirea unor valori din sesiune va trebui s realizm o conversie de tip.
protected void Button2_Click(object sender, EventArgs e) { Label1.Text = Session["nume"].ToString(); }

Exemplul 4.37 Odat introdus un obiect n Session, el poate fi accesat din toate paginile aplicaiei, att timp ct el exist acolo. Programatorul poate elimina obiectul din sesiune, folosind metoda Remove:
Session.Remove("nume");

n exemplul urmtor, sunt create dou pagini web. Datele introduse n prima pagin, sunt salvate n sesiune la apsarea unui buton, dup care se realizeaz un redirect ctre pagina a doua.
public partial class _Default : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { Session.Add("nume", TextBox1.Text); Session.Add("media", TextBox2.Text); Response.Redirect("Default2.aspx"); } }

Exemplul 4.38 n a doua pagin, datele sunt extrase din sesiune, i afiate prin intermediul unor controale de tip Label.
public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Session["nume"].ToString().Trim() != null) { Label1.Text = "Numele: " + Session["nume"].ToString().Trim(); } if (Session["media"].ToString().Trim() != null) { Label2.Text = "Media " + Session["media"].ToString().Trim(); }

118

Exemplul 4.39 n urmtoarea aplicaie se folosete un control Menu pentru navigarea ntre paginile web. Exist dou pagini, prima numit index.aspx, iar cea de a doua info.aspx. n pagina de index se solicit user-ului datele de login. Dac utilizatorul introduce corect numele i parola, n sesiune se salveaz username-ul, i apoi se realizeaz un redirect ctre pagina a doua.
Figura 4.31 Interfaa paginii de index

La ncrcarea fiecrei pagini, dac n sesiune se gsete username-ul, se afieaz un mesaj de ntmpinare prin intermediul unui control Label.

public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) { if (Session["user"] != null) { Label1.Text = "Bine ai venit " + Session["user"]; } } protected void Button1_Click(object sender, EventArgs e) { if (TextBox1.Text.Trim() == "username" &&TextBox2.Text.Trim() == "password") { Session.Add("user", TextBox1.Text.Trim()); Server.Transfer("Info.aspx"); } else { Label1.Text = "Username gresit sau parola incorecta !"; } } }

Exemplul 4.40 La accesarea paginii doi prin intermediul meniului, dac utilizatorul nu este logat (n sesiune nu exist cheia username), se va afia un mesaj de eroare.

Modelul client-server

119

public partial class Info : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Session["user"] != null) { Label1.Text = "Bine ai venit " + Session["user"]; } else { Label1.Text = "Trebuie sa va logati pentru a putea accesa aceasta pagina !"; } }

IV.6.6. Application
Obiectul Application se comport n mod identic cu Session, diferena fiind c el este specific ntregii aplicaii (tuturor utilizatorilor care acceseaz un site web la un moment dat), i nu unei anumite sesiuni. Cu alte cuvinte odat introdus un obiect n Application,va putea fi accesat din orice loc al site-ului i de ctre toi utilizatorii acestuia. Pentru a reine o valoare n obiectul Application, se folosete metoda Set(cheie, valoare), iar pentru extragerea unei valori metoda Get(cheie):
Application.Set("counter", 4); int x = Convert.ToInt32(Application.Get("counter").ToString());

n exemplul urmtor, ne propunem s realizm o aplicaie care numr ci utilizatori acceseaz site-ul web la un moment dat, i s afim aceast valoare n fiecare pagin. Pentru aceasta vom aduga n proiect un fiier numit Global.asax.

120

Figura 4.32 Adugarea fiierului global.asax n cadrul proiectului

Fiierul Global.asax are structura:


<%@ Application Language="C#" %> <script runat="server"> void Application_Start(object sender, EventArgs e) { // Code that runs on application startup } void Application_End(object sender, EventArgs e) { // Code that runs on application shutdown } void Application_Error(object sender, EventArgs e) { // Code that runs when an unhandled error occurs } void Session_Start(object sender, EventArgs e) {// Code that runs when a new session is started } void Session_End(object sender, EventArgs e) { // Code that runs when a session ends. } </script>

Exemplul 4.42 Aici se poate scrie cod C# care se va executa la crearea sau distrugerea obiectelor Application, respectiv Session. n cazul aplicaiei noastre, la crearea obiectului Application se va reine valoarea 0 ntr-un element numit counter:
void Application_Start(object sender, EventArgs e) { // Code that runs on application startup Application.Add("counter", 0); }

Exemplul 4.43 Obiectul Session este creat de fiecare dat cnd un utilizator acceseaz prima dat site-ul. De aceea, vom incrementa valoarea elementului counter la crearea obiectului Session. Decrementarea valorii counter se va realiza la distrugerea obiectului Session (cnd user-ul va nchide pagina).
void Session_Start(object sender, EventArgs e) { // Code that runs when a new session is started int counter = Convert.ToInt32(Application.Get("counter").ToString()); counter++; Application.Set("counter", counter); } void Session_End(object sender, EventArgs e) { // Code that runs when a session ends. int counter = Convert.ToInt32(Application.Get("counter").ToString()); counter--; Application.Set("counter", counter); }

Modelul client-server

121

Exemplul 4.44 Afiarea numrului de utilizatori conectai la un moment dat, se realizeaz n evenimentul Load al fiecrei pagini:
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Page.IsPostBack == false) { Label1.Text = "Numar de utilizatori conectati:" + Application.Get("counter").ToString(); } } }

Exempl ul 4.45

La ncrcarea unei noi pagini, valoarea din elementul counter va fi incrementat, iar la nchiderea unei pagini, decrementat.

IV.6.7. Evaluare
1. S se realizeze un site web care conine un test gril cu 5 ntrebri. Fiecare ntrebare va fi afiat ntr-o pagin separat. Fiecare pagin va avea un hyperlink ctre pagina precedent (cu excepia primei pagini) respectiv ctre pagina urmtoare. La navigarea ntre pagini se va pstra rspunsul testului. 2. S se modifice aplicaia anterioar astfel nct s se foloseasc o singur pagin. Enunul ntrebrilor i variantele de rspuns vor fi reinute prin intermediul vectorilor. Navigarea ntre pagini se va realiza n dou moduri: Cu ajutorul controalelor de tip Button. Indicele paginii curente va fi reinut n sesiune Cu ajutorul controalelor de tip hyperlink. Indicele paginii urmtoare, respectiv precedente va trimis printr-un query string. De exemplu pentru pagina 2 linkurile vor fi de forma: Default.aspx?pagina=1, respectiv Default.aspx?pagina=3 ales de utilizator la afiarea precedent. Ultima pagin va avea un link ctre o pagin de rezultat, n care se va afia rezultatul

122

3.

Realizai o pagin web care pentru fiecare user afieaz prin intermediul unui data ultimei accesri a paginii. tipul de browser folosit la ultima accesare. ip-ul calculatorului de la care s-a accesat ultima dat pagina.

cookie urmtoarele informaii:

Indicaie. Pentru a afla ip-ul respectiv tipul de browser, se folosete obiectul Request : Request.ServerVariables("REMOTE_ADDR") pentru ip Request.ServerVariables("HTTP_USER_AGENT") browser pentru tipul de

V. INTERACIUNEA CU BAZE DE DATE WEB


ADO.NET (ActiveX Data Objects) reprezint o parte component a nucleului .NET Framework ce permite conectarea la surse de date diverse, extragerea, manipularea i actualizarea datelor. De obicei, sursa de date este o baz de date, dar ar putea de asemenea s fie un fiier text, o foaie Excel, un fiier Access sau un fiier XML.

V.1. ROLUL BAZELOR DE DATE


Astzi, cele mai multe dintre activitile noastre zilnice necesit accesarea i actualizarea informaiei dintr-o baz de date: consultarea unui catalog de produse, lansarea unei comenzi, cumprarea unui bilet de avion sau verificarea evidenei plilor. De cele mai multe ori, informaiile pe care le dorim sunt obinute prin prelucrarea unor seturi de date relaionate. De exemplu, o baz de date tipic pentru un magazin on-line conine o list de clieni, o list de produse i o list de vnzri bazat pe informaiile din primele dou liste. Aceste informaii sunt descrise cel mai bine utiliznd un model relaional, model ce presupune divizarea informaiilor n seturi consistente i definirea relaiilor dintre aceste seturi. Modelul relaional st la baza tuturor produselor moderne axate pe baze de date, incluznd aici SQL Server, Oracle,MySQL i chiar Microsoft Access.

INTERACIUNEA CU BAZE DE DATE WEB

123

Din punct de vedere tehnic este posibil s organizm datele n tabele i s pstrm aceste tabele pe harddisc n unul sau mai multe fiiere (eventual folosind un standard XML). Aceast abordare nu este ns foarte flexibil. O aplicaie web are nevoie de un sistem complet de gestionare a bazelor de date (RDBMS 41) cum ar SQL Server, care s asigure gestionarea infrastructurii, performan i fiabilitate. De exemplu, un astfel de sistem poate furniza date pentru mai muli utilizatori simultan, elimin datele incorecte i poate executa la un moment dat un grup de comenzi care sunt vzute ca o singur unitate 42. Aplicaiile ASP.NET care utilizeaz baze de date pot fi grupate dup tipul operaiilor efectuate. De exemplu: site-uri comerciale - pstreaz cataloagele cu produse, gestioneaz comenzile, clienii i trazaciile i inventariaz informaiile aflate ntr-un aranjament imens de tabele relaionate;

motoare de cutare (ca de exemplu Google)-utilizeaz baze de date pentru a stoca indexuri de pagin URL 43, link-uri i cuvinte cheie; baze de cunotine (ca de exemplu Microsoft Support)-utilizeaz baze de date care pstreaz foarte multe informaii i legturi ctre documente sau alte resurse. site-uri media -pstreaz articolele n bazele de date.

V.2. ACCESAREA BAZELOR DE DATE WEB


Accesarea unei baze de date ntr-o aplicaie web are un scenariu complet diferit fa de accesarea unei baze de date prin intermediul unei aplicaii desktop client-server. In aplicaiile tradiionale cu baze de date, clienii stabilesc o conexiune cu baza de date i menin aceast conexiune deschis pn la ncheierea executrii aplicaiei. Conexiunile deschise necesit alocarea de resurse sistem. Atunci cnd meninem mai multe conexiuni deschise server-ul de baze de date va rspunde mai lent la comenzile clienilor ntruct cele mai multe baze de date permit un numr foarte mic de conexiuni concurente. O aplicaie Web trebuie s asigure n principal furnizarea rezultatelor ctre mai muli utilizatori simultan, operaie influenat de resursele de memorie i de conexiunile la baza de date. Dac aplicaia este proiectat astfel nct s menin conexiunea deschis chiar i
41 42

n limba englez Relational Database Management System Aceast operaie se numete tranzacie. 43 (n limba englez Uniform Resource Locator) - adres pentru localizarea resurselor

124

pentru cteva secunde n plus pentru un utilizator, atunci ceilali utilizatori vor observa cu siguran ntrzierea. Concurena este una dintre problemele pe care aplicaia trebuie s le gestioneze pentru c modificrile fcute de utilizatorii conectai simultan pot conduce la inconsistena datelor. O alt problem pe care trebuie s o rezolve o aplicaie Web care lucreaz cu baze de date este cea a modului de deconectare de la Internet. Dup cum tim HTTP 44 este un protocol static. Atunci cnd un utilizator emite o cerere printr-o aplicaie ASP.NET, serverul Web proceseaz codul, returneaz paginile HTML i nchide conexiunea, astfel nct utilizatorul are senzaia c lucreaz cu o aplicaie care ruleaz continuu dei el beneficiaz doar de pagini statice. Aplicaia ASP.NET trebuie s efectueze operaia solicitat de utilizator printr-o singur cerere. ADO.NET permite i lucrul n stil conectat dar i lucrul n stil deconectat, aplicaiile conectndu-se la server-ul de baze de date numai pentru extragerea i actualizarea datelor. Acest lucru permite reducerea numrului de conexiuni deschise simultan la sursele de date. ADO.NET ofer instrumentele de utilizare i reprezentare XML pentru transferul datelor ntre aplicaii i surse de date, furniznd o reprezentare comun a datelor, ceea ce permite accesarea datelor din diferite surse de diferite tipuri i prelucrarea lor ca entiti, fr s fie necesar s convertim explicit datele n format XML sau invers. Aceste caracteristici sunt determinante n stabilirea beneficiilor furnizate de ADO.NET: Interoperabilitate. ADO.NET poate interaciona uor cu orice component care suport XML. Durabilitate. ADO.NET permite dezvoltarea arhitecturii unei aplicaii datorit modului de transfer a datelor ntre nivelele arhitecturale. Programabilitate.ADO.NET simplific programarea pentru diferite task-uri cum ar fi comenzile SQL, ceea ce duce la o cretere a productivitii i la o scdere a numrului de erori. Performan. Nu mai este necesar conversia explicit a datelor la transferul ntre aplicaii, fapt care duce la creterea performanelor acestora. Accesibilitate. Utilizarea arhitecturii deconectate permite accesul simultan la acelai set de date. Reducerea numrului de conexiuni deschise utilizarea optim a resurselor. simultan determin

(n limba englez Hypertext Transfer Protocol) este metoda cea mai des utilizat pentru accesarea informaiilor pstrate pe servere World Wide Web

44

INTERACIUNEA CU BAZE DE DATE WEB

125

V.3. PROIECTAREA BAZELOR DE DATE


Prima etap n realizarea unei aplicaii ce utilizeaz baze de date este analiza datelor i realizarea unui model conceptual corespunztor. Aceast etap este foarte important pentru c pe baza ei se realizeaz baza de date. Este mult mai simplu s modificm un model conceptual dect s modificm o baz de date n care au fost adugate deja date. Crearea unui model conceptual presupune o reprezentare grafic a datelor i a relaiilor dintre acestea i este independent de implementare. Reprezentarea datelor i relaiilor ntr-o form convenional se numete diagram entiti-relaii sau ERD (Entity Relationship Diagram).

V.3.1. Entiti, instane, atribute, identificator unic


Principalele concepte folosite ntr-un model conceptual sunt: entitate, atribut, relaie. O entitate este un obiect, real sau abstract, pentru care se memoreaz date i are semnificaie pentru problema modelat. O entitate este reprezentat n ERD printr-un dreptunghi ce are colurile rotunjite. Numele entitii este un substantiv la singular. n figura 5-1 sunt reprezentate dou entiti (PROFESOR i CLASA).

figura V-1

O entitate poate fi privit ca o clas de obiecte pentru care exist mai multe instane. O instan a unei entiti reprezint un obiect, un eveniment particular, din clasa de obiecte care formeaz entitatea. De exemplu clasa 9C, profil real, specializare matematicinformatic reprezint o instan a entitii CLASA. Atunci cnd se precizeaz o instan a unei entiti se specific descrierea acelui obiect. Un atribut este o caracteristic a unei entiti. n cadrul diagramei entiti-relaii, atributele unei entiti se scriu n dreptunghiul corespunztor entitii pe care o caracterizeaz, imediat sub numele acesteia i sunt substantive la singular. De exemplu, atributele entitii CLASA din figura 5-1 sunt idc, profil i specializare.

126

Un atribut poate fi obligatoriu sau opional. Dac un atribut este obligatoriu, atunci fiecare instan a acelei entiti trebuie s fie caracterizat printr-o valoare a acelui atribut. De exemplu, atributul nume din entitatea PROFESOR este un atribut obligatoriu pentru c trebuie s cunoatem numele fiecrui profesor memorat n baza de date. n cazul unui atribut opional pot exista instane pentru care s nu se cunoasc valoarea atributului respectiv. De exemplu, putem aduga entitii PROFESOR un atribut opional numit email. Aceast caracteristic (opionalitatea) rezult din faptul c pot exista profesori care nu au un cont de email. Instanele pot fi identificate prin valorile pe care le au atributele ce le caracterizeaz. Un atribut sau un set de atribute care identific n mod unic o instan a unei entiti se numete identificator unic. Pentru exemplul din figura 5.1 identificatorul unic al entitii CLASA este idc (indicativ al clasei). Nu exist dou clase cu acelai indicativ deci orice clas este unic determinat de valoarea acestui atribut. Atributul profil nu poate fi ales drept identificator unic pentru c pot exista mai multe clase cu acelai profil (de exemplu, ntr-un liceu exist mai multe clase cu profil real).

V.3.2. Relaii ntre entiti


n lumea real, obiectele sunt vzute ca elemente componente ale unor sisteme, n interaciune cu alte obiecte. De exemplu, interaciunea dintre o instan X a entitii PROFESOR i o instan Y a entitii CLASA poate fi caracterizat prin expresia: profesorul X pred la clasa Y. O relaie este o asociere ntre dou entiti (sau ntre o entitate i ea nsi) i exprim legtura dintre ele. Orice relaie este caracterizat prin: nume, opionalitate, cardinalitate. O relaie de la o entitate A la o entitate B este obligatorie dac oricrei instane a entitii A i este asociat, prin aceast relaie, o instan a entitii B. O relaie de la o entitate A la o entitate B este opional dac exist instane ale entitii A care nu au asociate, prin aceast relaie, instane ale entitii B. Dac presupunem c entitile din figura 5-1 se refer la profesorii i clasele unui liceu, atunci relaia ntre cele dou entiti este obligatorie pentru c orice profesor trebuie s predea la cel puin o clas i la orice clas trebuie s predea cel putin unul dintre profesori. Cardinalitatea unei relaii indic numrul maxim de instane ale fiecrei entiti care particip la relaie. ntre dou entiti pot exista relaii de tip: 1-1 (one-to-one) unei instane a primei entitii i corespunde cel mult o instan a celei de-a doua entiti;

INTERACIUNEA CU BAZE DE DATE WEB

127

1-n (one-to-many) o instan a primei entiti poate fi asociat cu una sau mai multe instane ale celeilalte entiti; n-n (many-to-many)- o instan a primei entiti poate fi asociat cu una sau mai multe instane ale celei de-a doua entiti i pot exista mai multe instane ale primei entiti asociate unei instane a celeilate entiti.

n proiectarea unei baze de date nu se recomand utilizarea relaiilor de tip n-n. Rezolvarea relaiilor n-n const n introducerea unei noi entiti numit entitate de intersecie, legat de entitile iniiale prin cte o relaie de tip 1-n. Relaia din figura 5-1 poate fi rezolvat prin introducerea entitii INCADRARE ce preia atributele ce definesc identificatorii unici n cele dou entiti i are, n plus, atributul nrore ce reprezint numrul de ore pe care le are un profesor la o clas.

figura V-2

V.3.3. Evaluare
1) Dai exemple de activiti din lumea real care presupun acceasarea unei baze de date Web. 2) Care dintre urmtoarele activiti pot implica accesarea unei baze de date Web ? a. cutarea unui cod potal b. achiziionarea unui produs a. conectat a. utilizator b. administratorul bazei de date a. performan b. durabilitate a. NumrCamere b. PersonalDeIngrijire c. micorarea dobnzii bancare d. achitarea facturii telefonice b. deconectat c. server d. proiectantul bazei de date c. interoperabilitate d. concuren c. PreCamer d. Vedere

3) Pentru a mri viteza de accesare a unei baze de date Web trebuie s lucrm n stil 4) Problema accesului concurent la o baz de date este rezolvat de ctre

5) Care dintre urmtoarele nu reprezint un beneficiu furnizat de ADO.NET?

6) Care dintre urmtoarele nu poate fi considerat atribut pentru entitatea HOTEL?

7) Enumerai cinci entitile care apar n gestionarea activitii unui centru comercial. Pentru fiecare dintre aceste entiti menionai atributele ce le caracterizeaz.

128

8) Realizai asocieri care s corespund tipurilor de relaii : a. Elev-Clas b. Main-Proprietar c. Carte-Autor d. Spectacol-Artist e. ar-Preedinte 9) ntre dou entiti poate exista cel mult o relaie. a. Adevrat b. Fals 10) Construii modelul conceptual pentru urmtorul scenariu: O companie de transport aerian deine mai multe avioane. Fiecare avion zboar pe o rut bine stabilit, dup un orar prefixat. Compania are mai multi angajai, printre care i cei ce formeaz echipajele de zbor. Componena echipajelor se poate schimba. Un echipaj poate zbura pe mai multe rute i cu mai multe avioane. Fiecare zbor este identificat printr-un numr, aeroportul de unde are loc decolarea, aeroportul unde are loc aterizarea, ora de plecare i durata zborului. Unele zboruri se fac cu escal i atunci se memoreaz aeroportul unde se face escala, ora sosirii pe acel aeroport i timpul de staionare. I. 1-1 II. 1-n III. 2-n

V.4. CONFIGURAREA BAZEI DE DATE


Pentru a putea exectua o comand care acceseaz baza de date avei nevoie de un server de baze de date care s preia i s execute aceast comand. Majoritatea aplicaiilor ASP.NET utilizeaz Microsoft SQL Server. Responsabilitatea crerii unei baze de date accesat de ctre o aplicaie Web revine, de cele mai multe ori, dezvoltatorului ASP.NET. Este ns posibil ca aceasta s existe deja sau s fie n responsabilitatea unui administrator dedicat. Dac utilizai o versiune de SQL Server, avei posibilitatea de a utiliza interfaa grafic oferit de SQL Server Management Studio pentru a crea i gestiona baze de date. Pentru conectarea la bazele de date existente sau pentru a crea altele noi din Microsoft Visual Web Developer , alegei opiunea Database Explorer din meniul View i urmai n continuare paii: Facei click dreapta pe nodul Data Connections, i alegei Adugare conexiune 45. n fereastra Data Source, selectai sursa de date. Dac sursa de date este Microsoft SQL Server Database File atunci fiierul accesat va avea extensia mdf. n figura 5-3 se alege o surs de date Microsoft SQL Server: .\sqlexpress.master.dbo.
45

n limba englez Add Connection

INTERACIUNEA CU BAZE DE DATE WEB

129

figura V-3 Surs de date Microsoft SQL Server

n figura 5-4 conectarea se face la baza de date magazin.mdf.

figura V-4 Surs de date Microsoft SQL Server Database File

Dac utilizai o versiune complet de SQL Server, introducei ca localhost numele serverului dac serverul de baze de date este pe computerul local sau numele unui computer la distan trebuie alturat. atunci s cnd folosii serverul numele nu de este pe computerul local. Dac utilizai SQL Server Express server \SQLEXPRESS , dup cum se arat n figura SQLEXPRESS indic faptul c v conectai la o instan (cu nume) a SQL Server-ului. n mod implicit, acesta este modul n care SQL Server Express configureaz server-ul la prima instalare. Facei click pe Test Connection pentru a verifica dac aceasta este locaia unde se gsete baza de date. Dac nu ai instalat un produs care lucreaz cu baze de date acest pas va eua. Altfel, vei ti c serverul de baze de date este instalat i ruleaz.

130

Selectai sau introducei numele bazei de date 46 i facei click pe butonul Ok. Baza de date apare n fereastra Database Explorer i putei explora grupuri pentru a vedea i edita tabele, proceduri stocate, etc. Pentru a aduga o tabel la o baz de date, alegei, din fereastra Database Explorer, baza de date corespunztoare, apsai click dreapta pe grupul Tables i selectai opiunea Add New Table. Definii apoi, pentru fiecare dintre cmpurile tabelei, numele, tipul i constrngerile 47 (ca n exemplul din figura 5-5). n fereastra Column Properties sunt afiate proprietile cmpului selectat. n aceast zon se pot stabili, de exemplu, formule de calcul pentru cmpurile calculate 48. Tipul de date asociat unei coloane indic : ce fel de date putem scrie pe acea coloan (numere, caractere, imagini etc.); lungimea/dimensiunea valorilor stocate; precizia/scala (pentru valori numerice)

Tabelul urmtor conine tipurile de date pe care le putei asocia coloanelor:

n limba englez Select or Enter a Database Name Constrngerile permit stabilirea regulilor de integritate care s garanteze c datele introduse n baza de date sunt corecte i valide. Constngerea Allow Nulls ataat unei coloane permite/inhib prezena valorilor NULL pe acea coloan. 48 Formulele se scriu n zona Formula din seciunea Computed Column Specification.
47

46

INTERACIUNEA CU BAZE DE DATE WEB

131

figura V-5 Exemplu de stabilire a structurii tabelei

Pentru a preciza cheia primar 49 a tabelei, selectai rndul unde dorii s stabilii cheia primar i apoi executai un click pe butonul din dreapta al mouse-ului i alegei opiunea: . n exemplul din figura 5-6 se stabilete cheia primar idDep.

figura V-6

Selectarea uneia dintre opiunile Save... ale meniului File duce la salvarea structurii tabelei curente.

figura V-7 Salvarea tabelei cu numele Depozite

Dup salvarea definiiei, tabela este afiat n zona Tables a bazei de date selectate (ca n figura 5-8).

49

Identificator unic

132

figura V-8

Pentru a introduce sau vizualiza datele din tabel, executai click dreapta pe numele tabelei i alegei, din meniul contextual, opiunea .

Dac la introducerea datelor n tabel se ncalc o constrngere (regul de integritate) atunci suntem avertizai i inserarea eueaz. n exemplul din figura 5-9 a fost nclcat contrngerea dat de cheia primar (Not Allow NULL).

Transformarea modelului conceptual ntr-un model relaional 50 implic transformarea entitilor i relaiilor astfel: entitile devin tabele; atributele devin coloane n tabela provenit din entitatea corespunztoare; identificatorul unic devine cheie primar; instanele devin linii n tabel; relaiile 1-1 devin chei strine 51, cheia strin fiind plasat n tabela cu mai puine nregistrri; relaiile 1-n devin chei strine plasate n tabela n care se afl partea many(n) a relaiei; relaiile n-n sunt rezolvate prin intermediul entitii de intersecie care are dou chei strine pentru cele dou tabele asociate.
50 51

figura V-9

Aceast operaie se numete mapare. Cheia strin este un cmp ce corespunde unei chei primare din tabela de referin.

INTERACIUNEA CU BAZE DE DATE WEB

133

Vom defini, ca baz pentru noiunile ce urmeaz s fie prezentate n acest capitol, un model conceptual simplificat corespunztor bazei de date MASTER ce conine trei tabele (clienti, produse i comenzi). Fiecare client poate lansa una sau mai multe comenzi i fiecare produs poate fi comandat de una sau mai multe ori. n imaginile urmtoare avem descrierea i coninutul celor trei tabele.

figura V-10 Structura tabelei CLIENTI

figura V-11 Coninutul tabelei CLIENTI

figura V-12 Structura tabelei PRODUSE

134

figura V-13 Coninutul tabelei PRODUSE

figura V-14 Structura tabelei COMENZI

figura V-15 Coninutul tabelei COMENZI

Relaionarea tabelelor este realizat pe baza cheilor strine. Selectarea opiunii pe un cmp selectat n fereastra de definire a

tabelei permite afiarea relaiilor existente i introducerea altora. Numele unei relaii poate fi generat automat i este prefixat de irul FK_ urmat de numele celor dou tabele. Acest nume poate fi schimbat .

INTERACIUNEA CU BAZE DE DATE WEB

135

n exemplul din figura 5-16 se definete relaia FK_Comenzi_produse dintre tabela de referin (printe) produse i tabela (copil) comenzi (relaie de tip 1-n fiecare produs poate s apar n una sau mai multe comenzi)

figura V-16

Pentru baza de date aleas ca model avem dou relaii de tipul 1-n ntre tabele:

figura V-17

Relaia FK_Comenzi_Clienti din figura 5-17 marcheaz faptul c un client poate lansa mai multe comenzi (CodClient este cheie primar n tabela Clienti i cheie strin n tabela Comenzi), iar relaia FK_Comenzi_Clienti indic faptul c un produs poate s fie comandat de mai multe ori ( CodProdus este cheie primar n tabela Produse i cheie strin n tabela Comenzi) Opiunea asociat permite grupului Database Diagrams diagramelor realizarea

corespunztoare modelului conceptual ales, pe baza tabelelor selectate.

136

Dup selectarea tabelelor prezente n diagram (opiunea Add Table) se stabilesc relaiile ntre tabele. Pentru stabilirea unei relaii ntre tabele, se apas click dreapta pe tabel i se alege opiunea urmeaz paii descrii anterior . Opiunea numelui relaiilor. Pentru modelul ales se obine diagrama din figura 5-18. permite/inhib afiarea i se

Figura V-18 Diagrama Clieni-Comenzi-Produse

Dup salvare diagramele sunt pstrate n seciunea Database Diagrams a bazei de date curente.

V.4.1. Evaluare
1) ntr-o tabel, o linie este obinut prin maparea a. unei relaii b. unui atribut

INTERACIUNEA CU BAZE DE DATE WEB c. unei instane

137 d. unei constrngeri

2) Se mapeaz relaia 1-n dintre tabelele PERSOANA i INVESTITIE.

Atunci a. cheia primar din tabela PERSOANE devine cheie primar n tabela INVESTIII; b. cheia primar din tabela PERSOANE devine cheie strin n tabela INVESTIII; c. cheia primar din tabela INVESTIII devine cheie primar n tabela PERSOANE; d. cheia primar din tabela INVESTIII devine cheie strin n tabela PERSOANE; 3) Atunci cnd iniiem o conexiune sursa de date la care ne conectm trebuie s existe. a. adevrat 4) Un fiier cu extensia .mdf este o baz de date. a. adevrat 5) Pentru diagrama din figura urmtoare b. fals b. fals

a. adugai atribute adecvate celor trei entiti b. realizai o conexiune ctre fiierul cinema.mdf care va conine cele trei tabele c. definii tabele ACTORI, DISTRIBUIE,FILME prin maparea entitilor din diagram d. mapai relaiile dintre cele trei tabele e. adugai nregistrri n cele trei tabele f. construii diagrama DActoriFilme care s conin reprezentarea celor trei tabele i a relaiilor dintre acestea.

V.5. ACCESUL DIRECT LA DATE


Accesul direct reprezint cea mai uoar cale de a interaciona cu o baz de date, ce presupune construirea i executarea unor comenzi SQL.

V.5.1. Limbajul SQL- Elemente de baz

138

SQL (Structured Query Language) este un limbaj neprocedural pentru interogarea i prelucrarea informaiilor din baza de date. ntruct este un limbaj declarativ, utilizatorul trebuie s descrie ceea ce trebuie s obin far s indice modul de obinere a rezultatului. Compilatorul limbajului SQL genereaz automat o procedur care acceseaz baza de date i execut comanda. Principalele caracteristici prin care limbajului SQL difer de alte limbaje sunt: asigur accesarea automat a datelor; opereaz asupra unor seturi de date, i nu asupra elementelor individuale; permite programarea la nivel logic, fr a pune accent pe detaliile implementrii. Instruciunile SQL pot fi grupate n mai multe categorii, n funcie de tipul aciunii pe care o realizeaz. Unele dintre aceste categorii sunt evideniate ca limbaje n cadrul SQL, dup cum urmeaz: DDL 52 limbajul de definire a datelor. Instruciunile DDL sunt utilizate pentru definirea structurii obiectelor. Aceste comenzi permit : crearea, modificarea, tergerea obiectelor din baz , inclusiv baza nsi (CREATE, ALTER, DROP); tergerea datelor din obiectele bazei, cu pstrarea structurii acestora (TRUNCATE) redenumirea obiectelor (RENAME) acordarea / revocarea unor privilegii (GRANT, REVOKE) DML 53 limbajul de manipulare (prelucrare) a datelor. Instruciunile DML sunt utilizate pentru interogarea i prelucrarea obiectelor bazei de date. Aceste comenzi permit : selectarea datelor din tabele (SELECT); adugarea nregistrrilor n tabele sau vizualizri 54 (INSERT); modificarea valorilor unor coloane din nregistrri existente n tabele sau vizualizri (UPDATE); adugarea sau actualizarea condiionat a unor nregistrri n tabele sau vizualizri (MERGE); tergerea nregistrrilor din tabele sau vizualizri (DELETE);
n limba englez Data Definition Language n limba englez Data Manipulation Language 54 O vizualizare (n limba englez view) este o tabel virtual, cu rol de filtrare a datelor, care nu memoreaz date propriu-zise.
53 52

INTERACIUNEA CU BAZE DE DATE WEB

139

DCL 55 limbajul de control al datelor. Instruciunile DCL gestioneaz modificrile efectuate de ctre comenzile DML i grupeaz aceste comenzi n uniti logice, numite tranzacii. Aceste comenzi permit : permanentizarea modificrilor unor tranzacii (COMMIT); anularea total sau parial a modificrilor dintr-o tranzacie (ROLLBACK); definirea unui punct pn la care se poate anula tranzacia (SAVEPOINT);

Un produs complex de accesare i prelucrare a bazelor de date aa cum este SQL Server permite scrierea unor secvene de cod SQL complexe, grupate n proceduri stocate sau declanatori. Majoritatea aplicaiilor utilizeaz n principal instruciuni DML. SQL Server 2008 (i 2005) include un instrument numit sqlcmd.exe care permite introducerea comenzilor SQL de la linia de comand 56. Pentru lansare alegem din meniul Start: Programs Microsoft Visual Studio 2008 Visual Studio Tools Visual Studio 2008 Command Prompt. Mediul de dezvoltare Visual Studio dispune de instrumente puternice i sugestive pentru utilizarea bazelor de date n aplicaii. Pentru a scrie i a executa n acest mediu o interogare trebuie s urmm paii : a) click dreapta pe conexiune i alegem New Query ; b) selectm obiectele utilizate n interogare (tabelele, vizualizri, funcii, sinonime);

c) construim interogarea (selectm cmpurile ce urmeaz s fie afiate, grupm datele, introducem criterii de filtrare i ordonare, etc) ;

d) executm interogarea

n fereastra de proiectare a unei interogri se pot identifica patru zone. n prima zon sunt evideniate tabelele, pe baza crora se construiete interogarea, relaiile dintre ele, i sunt marcate cmpurile prelucrate de interogare. n cea de-a doua zon se precizeaz modul n care cmpurile selectate intervin n interogare i sunt marcate cele ce urmeaz s fie afiate. Fereastra a treia conine codul SQL, cod n care se poate interveni direct iar n cea de-a patra fereastr se afieaz rezultatul interogrii.

55 56

n limba englez Data Control Language este instalat n folder-ul c:\Program Files\Microsoft SQL Server\90\Tools\Binn

140

figura V-19 Fereastra de proiectare a unei interogri

V.5.2. Comenzi de manipulare a datelor


V.5.2.1 Comanda SELECT
SELECT <list de coloane> FROM <list de tabele > WHERE <condiie> GROUP BY <condiie> HAVING <condiie> ORDER BY <condiie> Comanda SELECT este utilizat pentru a extrage date din baza de date. Setul de date returnate prin intermediul unei comenzi SELECT are o structur asemntoare cu a unei tabele, datele putnd fi afiate sau pot fi utilizate pentru completarea unei alte baze de date.

Prin executarea unei comenzi SELECT se efectueaz urmtoarele operaii: selecie permite filtrarea liniilor ce vor fi afiate (returnate) pe baza condiiilor din clauza WHERE; proiecie permite filtrarea coloanelor afiate (returnate) pe baza listei de coloane menionate;

INTERACIUNEA CU BAZE DE DATE WEB

141

join permite prelucrarea datelor din dou sau mai multe tabele pe baza unor criterii bine definite.

n clauza FROM se specific obiectele (tabelele i vizualizrile) din care se extrag date. Aceste obiecte pot fi nsoite de un alias. Dac un obiect se afl ntr-o baz de date situat la distan atunci se va specifica numele legturii ctre aceasta (database link). Cea mai simpl form a instruciunii SELECT este SELECT * FROM tabela; Caracterul * indic afiarea tuturor coloanelor tabelei. Dac dorim s afim doar informaii din cteva coloane ale tabelei vom preciza numele acestor coloane n clauza SELECT. n exemplul urmtor se afieaz, pentru fiecare client: numele, prenumele i localitatea.

Dac lista de coloane din clauza SELECT este precedat de cuvntul DISTINCT atunci se afieaz doar liniile din tabel ce corespund combinaiilor distincte de valori din aceste coloane. n exemplul urmtor se utilizeaz specificatorul DISTINCT pentru a afia categoriile de produse.

n clauza SELECT putem s scriem i expresii. De exemplu, pentru a afia valoarea stocului corespunztor fiecrui produs, folosim comanda:

142

Aliasul unei coloane permite afiarea unei alte expresii n locul numelui unei coloane. Aceast expresie poate fi ncadrat de paranteze i este precedat de cuvntul AS. Exemplul anterior poate fi rescris:

Dac dorim s afim n aceeai coloan informaii din mai multe coloane atunci putem s construim un ir de caractere obinut prin alipirea acestor informaii cu ajutorul operatorului + . n exemplul urmtor se afieaz n aceeai coloan numele i prenumele clienilor.

Selectarea liniilor returnate de comanda SELECT este realizat de clauza WHERE. n aceast clauz precizm condiiile pe care trebuie s le ndeplineasc o anumit linie pentru a fi returnat. Operatorii logici (NOT, AND,OR)i cei relaionali (<,<=,>,>=,=,<>)permit combinarea mai multor condiii n clauz. n exemplul urmtor se afieaz produsele ce au preul mai mic ca 12 i stocul mai mare ca 10.

Operatorul LIKE este utilizat n interogri pentru a verifica dac un ir de caractere respect un anumit ablon . Dac valoarea se potrivete ablonului, atunci operatorul va returna valoarea adevrat, n caz contrar, va returna valoarea fals. n ablon se pot utiliza dou caractere speciale: - caracterul _ ine locul unui singur caracter, oricare ar fi acesta; - caracterul % ine locul oricrui subir de caractere. n exemplul urmtor se afieaz toate produsele a cror denumire ncepe cu litera b.

INTERACIUNEA CU BAZE DE DATE WEB

143

V.5.2.2 Gruparea datelor

Funciile de grup sunt funcii care returneaz o singur valoare pentru fiecare grup de linii dintr-un tabel. Principalele funcii de grup sunt : COUNT (x) returneaz numrul de valori ale lui x; Dac x este nlocuit de caracterul * atunci funcia determin numrul de linii returnate iar dac x este precedat de cuvntul DISTINCT atunci funcia returneaz numrul de valori distincte i nenule ale expresiei x. n exemplul urmtor se afieaz numrul total de produse, numrul de produse cu denumiri diferite i numrul de categorii.

SUM (x) calculeaz suma tuturor valorilor din cmpul numeric x. Dac dorim s aflm numrul total de produse este suficient s scriem comanda:

MIN (x) calculeaz cea mai mic valoare din cmpul numeric x. Cel mai mic pre al unui produs se obine cu interogarea:

144

Dac dorim s afim produsele care au cel mai mic pre atunci trebuie s includem n clauza WHERE o subinterogare 57:

MAX (x) calculeaz cea mai mare valoare din cmpul numeric x. Interogarea din figura urmtoare afieaz stocul maxim (numrul maxim de produse de acelai tip)

Subinterogarea din exemplul urmtor este utilizat pentru a afia denumirile produselor cu cel mai mare stoc.

AVG (x) calculeaz media valorilor din cmpul numeric x. n exemplul urmtor se afieaz preul produsului cel mai ieftin, preul celui mai scump produs i preul mediu.

Clauza GROUP BY permite gruparea datelor dintr-o tabel i obinerea informaiilor despre grupurile diferite. Utilizarea acestei clauze implic respectarea urmtoarelor condiii:
57

toate cmpurile care apar n SELECT n afara funciilor de grup trebuie s apar n clauza GROUP BY; nu se pot folosi funcii de grup n clauza WHERE; n clauza GROUP BY pot s apar i coloane care nu apar n SELECT;

O subinterogare este o interogare aflat n interiorul unei alte comenzi SQL. Subinterogrile sunt rulate ntotdeauna naintea comenzii n care sunt incluse.

INTERACIUNEA CU BAZE DE DATE WEB funciile de grup pot fi imbricate.

145

Comanda urmtoare permite afiarea numrului de produse din fiecare categorie.

Dac dorim s selectm numai o parte dintre grupurile obinute prin folosirea clauzei GROUP BY trebuie s utilizm clauza HAVING. n exemplul urmtor se utilizeaz clauza HAVING pentru a afia localitile pentru care avem cel puin 2 clieni.

V.5.2.3 Sortarea datelor


Clauza ORDER BY se utilizeaz atunci cnd se dorete afiarea datelor din tabel ordonate dup anumite criterii. n aceast clauz se precizeaz coloanele sau expresiile dup care se vor ordona liniile unui tabel nainte de afiare. Opiunea ASC precizeaz c ordonarea se face cresctor. Aceast opiune poate fi omis ntruct, implicit, datele sunt ordonate cresctor. Opiunea DESC precizeaz c sortarea se face descresctor. Exemplul urmtor afieaz produsele pornind de la cel mai scump i terminnd cu cel mai ieftin.

146

n cazul ordonrii descresctoare valorile NULL se trec la sfrit, n timp ce, n cazul ordonrii cresctoare valorile NULL apar la nceput. De exemplu, dac se adaug n tabela PRODUSE un nou produs, creta, fr descriere atunci acest produs va fi, ntr-o ordonare cresctoare dup coloana Descriere, primul produs afiat.

V.5.2.4 Interogri multiple


Comenzile SELECT prezentate pn acum se ncadreaz n categoria cererilor simple (monorelaie) ntruct refer date aflate ntr-o singur tabel. Cererile multirelaie intervin atunci cnd este necesar accesarea datelor din mai multe tabele. Operaia de regsire a datelor din dou sau mai multe tabele pe baza valorilor comune ale unor coloane se numete JOIN. De obicei aceste coloane reprezint cheia primar, respectiv cheia strin a tabelelor. Exist mai multe moduri de legare a tabelelor i anume:

INTERACIUNEA CU BAZE DE DATE WEB

147

Produsul cartezian leag fiecare nregistrare dintr-o tabel cu toate nregistrrile din cealalt tabel. Pentru a obine produsul cartezian se folosete clauza CROSS JOIN n cadrul clauzei FROM. O astfel de legtur se realizeaz atunci cnd afim pentru fiecare client fiecare produs disponibil.

Equijoin leag dou tabele cu ajutorul unei condiii de egalitate. Pentru a specifica acest tip de legtur n cadrul clauzei FROM se folosete clauza NATURAL JOIN sau clauza INNER JOIN..ON urmat de o condiie de egalitate. Acest tip de legtur se utilizeaz atunci cnd vrem s afim numrul de produse cumprate de fiecare dintre clieni.

Nonequijoin leag tabelele fr a utiliza o condiie de egalitate. n locul operatorului de egalitate se utilizeaz de cele mai multe ori operatorul BETWEEN pentru a verifica apartenena la un interval. n exemplul urmtor se consider tabela repere ce pstreaz indicatori pentru volumul cumprturilor. De exemplu, dac am achiziionat un produs sau dou atunci putem spune c volumul achiziiilor este mic.

148

Legtura dintre tabela comezi i tabela repere permite afiarea volumului de cumprturi pentru fiecare comand.

Self Join- este un equijoin dintre o tabel i ea nsi. Un exemplu clasic este cel al angajailor unei instituii n care unii dintre ei pot fi efii altor angajai ai aceleiai instituii.

Outer Join se utilizeaz atunci cnd dorim s afim datele dintr-o tabel indiferent dac au sau nu corespondent n tabela de legtur. Dac datele fr corespondent se afl n tabela din stnga clauzei JOIN atunci se utilizeaz opiunea LEFT OUTER JOIN iar altfel opiunea RIGHT OUTER JOIN. O astfel de legtur se realizeaz atunci cnd vrem s afim toi clienii indiferent dac au comandat sau nu produse.

INTERACIUNEA CU BAZE DE DATE WEB

149

V.5.2.5 Comanda UPDATE


UPDATE [tabela] SET [expresie de modificare] WHERE [condiie] Comanda UPDATE selecteaz nregistrrile conform condiiei din clauza WHERE i le modific conform expresiei de modificare.

Aceast comand este utilizat n exemplul urmtor pentru a modifica numrul de telefon al clientului ce are codul 4.

V.5.2.6 Comanda INSERT


INSERT INTO [tabela] ([lista cmpuri]) VALUES ([lista de valori]) Comanda INSERT permite adugarea de nregistrri ntr-o tabel.

Dac lista de coloane lipsete trebuie s introducem valori pentru toate cmpurile tabelei n ordinea n care au fost definite. De exemplu, adugarea unui nou reper care s indice un volum al cumprturilor mare atunci cnd numrul produselor comandate apaine intervalului [12,20] se poate face

150

fr precizarea cmpurilor dac n lista valorilor datele se introduc n ordinea (id1,id2,valoare):

Dac vrem s adugm un nou produs este suficient s cunoatem cmpurile obligatorii i s le includem n lista cmpurilor ce urmeaz a fi completate apoi s completm n aceeai ordine lista de valori. Cmpurile nemenionate n list se iniializeaz cu NULL.

V.5.2.7 Comanda DELETE


DELETE FROM [tabela] WHERE [condiie de filtrare] Comanda DELETE determin tergerea din tabel a nregistrrilor ce verific condiia din clauza WHERE.

tergerea produsului ce are codul 10 necesit utilizarea comenzii:

INTERACIUNEA CU BAZE DE DATE WEB

151

V.5.3. Comenzi de definire a datelor


Aa cum am precizat la nceputul acestui capitol, etapa de creare a modelui conceptual este urmat de crearea obiectelor care compun baza de date utilizat n aplicaie.

V.5.3.1 Crearea tabelelor


Comanda CREATE poate fi utilizat pentru a crea o tabel, o vizualizare, un index sau un sinonim. Pentru crearea unei tabele se folosete comanda CREATE TABLE. n cadrul comenzii CREATE TABLE putem utiliza clauza DEFAULT pentru a defini valori implicite pentru coloanele tabelei. Aceast clauz precizeaz ce valoare va avea un atribut atunci cnd, la inserare, nu se specific n mod explicit valoarea acestuia. Valoarea implicit este dat de expresia ce urmeaz clauzei DEFAULT. Aceasta poate fi o constant, o expresie SQL sau chiar o funcie SQL. Utilizarea clauzei DEFAULT previne introducerea valorilor NULL n tabel i permite utilizatorului s controleze unde i cnd au fost introduse valorile implicite. O form simplificat a comenzii CREATE TABLE este urmtoarea: CREATE TABLE <nume tabel> (<coloan 1> <tip coloan 1 [DEFAULT <expresie1>]> [CONSTRAINT] [DISABLE] <constrngere>, <coloan n> <tip coloan n [DEFAULT <expresie n>]> [CONSTRAINT] [DISABLE] <constrngere>); n exemplul urmtor se construiete tabela CARTE cu trei cmpuri (CodCarte, Titlu i AnAparitie). Nu au fost precizate valori implicite pentru coloanele tabelei.

Dac dorim ca anul apariiei s fie implicit 2008 atunci putem folosi clauza DEFAULT pentru aceast coloan.

152

V.5.3.2 Modificarea structurii unei tabele


Modificarea structurii unei tabele se realizeaz cu ajutorul comenzii ALTER TABLE. Aceast comand permite adugarea sau tergerea unei coloane, modificarea definiiei unei coloane, adugarea sau eliminarea unor constrngeri. Pentru adugarea unei coloane se utilizeaz clauza ADD a comenzii ALTER TABLE:

ALTER TABLE <nume tabel> ADD <coloan 1> <tip coloan 1 [DEFAULT <expresie1>]> [CONSTRAINT] [DISABLE] <constrngere>, <coloan n> <tip coloan n [DEFAULT <expresie n>]> [CONSTRAINT] [DISABLE] <constrngere>;

Coloana adugat va fi ultima din tabel. Dac tabela conine deja date, atunci, pentru liniile existente vom avea, n coloana adugata, valoarea NULL. Rezult de aici c nu putem aduga coloane cu restricia NOT NULL la o tabel ce conine date. n exemplul urmtor, se adaug tabelei CARTE dou coloane.

tergerea unei coloane se realizeaz cu ajutorul clauzei DROP COLUMN a comenzii ALTER TABLE: ALTER TABLE <nume tabel> DROP COLUMN <nume coloan> tergerea unei coloane duce automat la tergerea restriciilor definite pentru aceasta i care nu implic alte obiecte. n exemplul urmtor se terge coloana categorie din tabela CARTE.

INTERACIUNEA CU BAZE DE DATE WEB

153

Dac ncercm s tergem coloana AnApariie atunci trebuie s utilizm o tergere n cascad.

se obine o eroare (ca n

imaginea urmtoare) pentru c exist obiecte care acceseaz aceast coloan. n acest caz

Modificarea unei coloane se realizeaz cu ajutorul clauzei ALTER COLUMN a comenzii ALTER TABLE. Modificarea unei coloane include operaii care presupun modificarea tipului unei coloane, a dimensiunii sau a valorii implicite (inclusiv adugarea unei valori implicite). ALTER TABLE <nume tabel> ALTER COLUMN (<coloan > <tip > [constrngere] n exemplul urmtor se modific dimensiunea coloanei autor i se adaug o constrngere NOT NULL.

V.5.3.3 Redenumirea i tergerea unei tabele


Redenumirea unei tabelei se realizeaz cu ajutorul comenzii SP_RENAME : SP_RENAME <nume vechi>,<nume nou>

n exemplul urmtor tabela CARTE devine tabela CARTI.

154

tergerea unei tabele se face cu ajutorul comenzii DROP TABLE <nume tabel> ca n exemplul din figura urmtoare:

Dac o tabel este referit printr-o cheie strin atunci ea nu poate fi tears pn cnd nu este tears tabela care o refer ( se terge mai nti tabela copil i numai dup aceea tabela printe). Pentru a terge toate liniile tabelei i a elibera spaiul utilizat pentru stocarea datelor, fr a terge definiia tabelei, se utilizeaz comanda TRUNCATE TABLE <nume tabel> ca n exemplul din figura urmtoare:

V.5.3.4 Acordarea / revocarea unor privilegii


Pentru a accesa o baz de date un utilizator trebuie s conecteze cu un nume de utilizator. Orice utilizator are un domeniu de securitate care determin privilegiile i resursele pe care le poate utiliza.

INTERACIUNEA CU BAZE DE DATE WEB

155

Acordarea de privilegii asupra obiectelor se realizeaz cu ajutorul comenzii GRANT. Se pot acorda privilegii de accesare, inserare, actualizare la nivelul fiecrei coloane dintr-o tabel. GRANT <privilegiu> [(<coloan 1>, <coloan 2>, <coloan n>)] ON <obiect> TO {<user 1>[, <user 2>,.. <user n>] | <rol> | [PUBLIC]} [WITH GRANT OPTION]

Opiunea WITH GRANT OPTION drepturile primite cu aceast opiune.

permite unui utilizator s aloce altor utilizatori

n exemplul urmtor se acord drepturi de selecie i inserare n tabela Carti tuturor utilizatorilor.

Revocarea privilegiilor implic utilizarea comenzii REVOKE:

REVOKE {<privilegiu 1> [, <privilegiu 2>, <privilegiu n> [ALL]} ON <obiectt> FROM | TO {<user 1>[, <user 2>, <user n>] | <rol> | [PUBLIC]} [CASCADE]

Comanda

revoc utilizatorului User1 dreptul la inserare n tabela CARTI. Opiunea CASCADE indic faptul c privilegiul va fi revocat tuturor utilizatorilor crora le-a fost acordat de ctre utilizatorul cruia i se revoc acest privilegiu, prin intermediul opiunii WITH GRANT OPTION .

156

V.5.4. Evaluare
I. 1) Atunci cnd vrem s construim o aplicaie Web legat la o baz de date: a) realizm mai nti modelul conceptual i dup aceea modelul fizic b) construii modelul fizic i apoi modelul conceptual c) modelul fizic se contruiete n paralel cu modelul conceptual 2) Care dintre urmtoarele afirmaii despre relaiile stabilite ntre tabele sunt adevrate: a) Sunt implementate cu ajutorul cheilor strine b) Se stabilesc ntre dou tabele diferite c) Se pot defini numai ntre tabele aflate n aceeai baz de date 3) Dac se genereaz automat numele unei relaii, atunci acesta are prefixul: a) PK_ a) Adevrat a) Fiecare tabel trebuie s aib o cheie primar b) Cheia primar realizeaz o indexare automat a nregistrrilor din tabel c) O tabel poate avea mai multe chei primare 6) Care dintre urmtoarele reprezint tipuri de relaii a) 1-n b) 0-n c) n-n 7) Se consider dou tabele T1 i T2 ntre care exist o relaie de tip 1-n (cheia primar din T1 este cheie strin n T2). Atunci: a) Putem terge oricnd o nregistrare din T1 b) Putem terge oricnd o nregistrare din T2 c) O nregistrare din T1 poate fi tears numai dac n tabela T2 nu exist nregistrri care s-i corespund 8) ntr-o tabel a) orice cmp poate avea valoare NULL b) un cmp care reprezint o cheie primar poate conine valori NULL c) un cmp care reprezint o cheie strin poate conine valori NULL 9) tergerea unei tabele printe a) Conduce la tergerea tuturor tabelelor copii b) duce la invalidarea accesului la toate tabelele copii c) Se poate face numai dup ce au fost terse toate tabelele copii d) Nu se poate face n orice condiii b) FK_ c) PFK_ b) Fals d) FPK_ 4) O tabel poate avea o singur cheie primar 5) Care dintre urmtoarele afirmaii referitoare la o cheie primar sunt adevrate:

INTERACIUNEA CU BAZE DE DATE WEB 10) n Visual Studio, o relaie ntre dou tabele se poate defini automat, din a) Tabela printe b) Tabela copil c) Oricare dintre cele dou tabele II. Se consider modelul conceptual din Figura.5-20.

157

figura V-20

Scriei instruciunile SQL pentru rezolvarea urmtoarelor cereri: 1) S se afieze, fr duplicate, denumirile produselor 2) S se listeze denumirea i preul produselor cu preul mai mare dect preul mediu al produselor din baza de date 3) S se afieze, pentru fiecare client, numele i numrul produselor comandate 4) S se afieze, pentru fiecare client, numele i produsele comandate 5) S se afieze numele clientul care a comndat cele mai multe produse 6) S se afieze denumirea produselor comandate de cel puin 3 clieni 7) S se afieze pentru clientul ce are codul 100 numrul comenzilor 8) S se afieze pentru clientul ce are codul 100 valoarea total a comenzilor sale 9) S se adauge clientul Popescu Ion, ce are codul 200 i adresa Str.Sperantei, bl.1, sc.A, ap.1 Bucuresti 10) Pentru clientul ce are codul 200, s se adauge comanda : trei produse de cod 10, i un produs de cod 1. 11) S se modifice comanda anterioar astfel nct clientul s comande dou produse de cod 1. 12) S se terg comenzile mai vechi de un an 13) S se tearg toi clienii care nu au fcut nicio comand 14) S se terg produsele care nu au fost comandate n ultimul an 15) S se afieze toate comenzile fcute n luna octombrie a anului curent

158

V.6. MANIPULAREA BAZELOR DE DATE WEB PRIN INTERMEDIUL OBIECTELOR ADO.NET


n acest capitol vom vedea cum putem s combinm comenzile SQL cu obiecte ADO.NET pentru a extrage i manipula bazele de date din aplicaiile Web.

V.6.1. Arhitectura ADO.NET


Componentele principale ale ADO.NET sunt DataSet i Data Provider. Ele au fost proiectate pentru accesarea i manipularea datelor.

V.6.2. Furnizori de date (Data Providers)


Din cauza existenei mai multor tipuri de surse de date este necesar ca pentru fiecare tip de protocol de comunicare s se foloseasc o bibliotec specializat de clase. .NET Framework include SQL Server.NET Data Provider pentru interaciune cu Microsoft SQL Server, Oracle Data Provider pentru bazele de date Oracle i OLE DB Data Provider pentru accesarea bazelor de date ce utiliteaz tehnologia OLE DB pentru expunerea datelor (de exemplu Access, Excel sau SQL Server versiune mai veche dect 7.0) Furnizorul de date permite unei aplicaii s se conecteze la sursa de date, execut comenzi i salveaz rezultate. Fiecare furnizor de date cuprinde componentele Connection, Command, DataReader i DataAdapter :
SQL Server Data Provider SqlConnection SqlCommand SqlDataReader SqlDataAdapter OLE DB Data Provider OleDbConnection OleDbCommand OleDbDataReader OleDbDataAdapter Oracle Data Provider

Connection Command DataReader DataAdapter

OracleConnection OracleCommand OracleDataReader OracleDataAdapter

INTERACIUNEA CU BAZE DE DATE WEB

159

V.6.3. Accesul direct la date prin intermediul ADO.NET


Aa cum am precizat n capitolul anterior accesul direct la date presupune construcia unei comenzi SQL, conectarea la baza de date, executarea comenzii i deconectarea de la baza de date fr memorarea direct a rezultatelor. Dac se lucreaz n mod deconectat atunci se pstreaz o copie a datelor ntr-un obiect de tip DataSet i acestea pot fi prelucrate i dup deconectarea de la baza de date. Modelul accesului direct la date corespunde paginilor ASP.NET unde nu este necesar memorarea datelor pentru perioade mai lungi de timp. O pagin ASP.NET este ncrcat la cerere i accesul se ncheie atunci cnd rezultatul cererii este furnizat user-ului, ceea ce nseamn o pagin care are de obicei o via de numai cteva secunde. Rezult aadar c o interogare direct a datelor presupune executarea pailor urmtori: a) crearea obiectelor de tip Connection, Command i DataReader ; b) obinerea informaiilor din baza de date cu ajutorul obiectelor de tip DataReader i afiarea acestora ntr-un controler de pe un formular web; c) nchiderea conexiunii; d) trimiterea paginii ctre utilizator; n acest moment nu mai avem o legtur direct ntre ceea ce vede utilizatorul i datele din baza de date, obiectele de tip ADO.NET fiind distruse. Adugarea, tergerea sau modificarea datelor se realizeaz n doi pai: a) crearea obiectelor de tip Connection, Command; b) executarea comenzii directe. n figura 5-21 sunt reprezentai paii menionai anterior.

figura V-21

160

V.6.4. Crearea unei conexiuni


nainte de orice operaie cu o surs de date extern, trebuie realizat o conexiune (legtur) cu acea surs. Clasele din categoria Connection (SQLConnection, OleDbConnection, OracleConnection etc.) conin date referitoare la sursa de date (locaia, numele i parola contului de acces, etc.), metode pentru deschiderea/nchiderea conexiunii, pornirea unei tranzacii etc. Aceste clase se gsesc n subspaii (SqlClient, OleDb,OracleClient etc.) ale spaiului System.Data. n plus, ele implementeaz interfaa IdbConnection. Pentru deschiderea unei conexiuni prin program se poate instania un obiect de tip conexiune, precizndu-i ca parametru un ir de caractere coninnd date despre conexiune. Exemple de conectare a) conectare la o surs de date SQL
using System.Data.SqlClient; SqlConnection con = new SqlConnection(); con.ConnectionString = "Data Source=localhost; User ID=profesor;pwd=info; Initial Catalog=Orar; con.Open();

b) conectare la o surs de date SQL


using System.Data.SqlClient; SqlConnection con = new SqlConnection(@"Data Source=serverBD; Database=scoala; User ID=elev; Password=secret"); con.Open();

c) conectare la o surs de date Access


using System.Data.OleDb; OleDbConnection con = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0; Data Source=C:\Date\scoala.mdb"); con.Open();

n general, numrul maxim de conexiuni concurente este un numr fix i de aceea trebuie s meninem conexiunea deschis ct mai puin timp. Secvena de conectare se scrie de obicei ntr-un bloc try/catch care permite gestionarea erorilor ce pot aprea la conectare. Atunci cnd se utilizeaz providerul SQL Server avem nevoie de dou spaii de nume:
using System.Data; using System.Data.SqlClient;

INTERACIUNEA CU BAZE DE DATE WEB

161

Dac se utilizeaz o variant EXPRESS atunci irul de conectare va include numele instanei:
SqlConnection conn; conn = new SqlConnection("Data Source='.\\SQLEXPRESS'; Initial Catalog=master; Integrated Security=SSPI");

Proprieti
a) ConnectionString (String, cu accesori de tip get i set ) definete un ir care permite identificarea tipului i sursei de date la care se face conectarea i eventual contul i parola de acces. Conine lista de parametri necesari conectrii sub forma parametru=valoare, separai prin ;.
Parametru Provider Descriere Specific furnizorul de date pentru conectarea la sursa de date. Acest furnizor trebuie precizat doar dac se folosete OLE DB .NET Data Provider, i nu se specific pentru conectare la SQL Server. Data Source Initial Catalog Integrated Security 60 User ID Password Identific serverul, care poate fi local, un domeniu sau o adres IP 58. Specific numele bazei de date accesate. Baza de date trebuie s se gseasc pe serverul dat n Data Source. 59 Logarea se face cu user-ul configurat pentru Windows. Numele unui user care are acces de logare pe server. Parola corespunztoare ID-ului specificat.

b) ConnectionTimeout (int, cu accesor de tip get): specific numrul de secunde pentru care un obiect de conexiune poate s atepte pentru realizarea conectrii la server nainte de a se genera o excepie. (implicit 15). Se poate specifica o valoare diferit de 15 n ConnectionString folosind parametrul Connect Timeout, Valoarea Timeout=0 specific ateptare nelimitat. Exemplu de conectare:
using System.Data.SqlClient; SqlConnection con = new SqlConnection("Data Source=serverBD; Database=scoala; User ID=elev;Password=secret; Connect Timeout=30");

Dac este instalat SQL Server Express Edition sursa de date este localhost\SQLEXPRESS sau .\SQLEXPRESS, pentru c numele instanei este SQLEXPRESS. 59 Connection.ChangeDatabase() permite schimbarea numelui bazei de date. 60 User Id i Password pot nlocui parametrul Integrated Security.

58

162

c) Database (string, read-only): returneaz numele bazei de date la care sa fcut conectarea. Este necesar pentru a arta unui utilizator care este baza de date pe care se face operarea d) Provider (de tip string, read-only): returneaz furnizorul de date e) ServerVersion (string, read-only): returneaz versiunea de server la care sa fcut conectarea. f) State (enumerare de componente ConnectionState, read-only): returneaz starea curent a conexiunii. Valorile posibile: Broken, Closed, Connecting, Executing, Fetching, Open.

Metode
a) Open(): deschide o conexiune la baza de date b) Close() i Dispose(): nchid conexiunea i elibereaz toate resursele alocate pentru ea c) BeginTransaction(): pentru executarea unei tranzacii pe baza de date; la sfrit se apeleaz Commit() sau Rollback(). d) ChangeDatabase(): se modific baza de date la care se vor face conexiunile. Noua baz de date trebuie s existe pe acelai server ca i precedenta. e) CreateCommand(): creeaz o comand (un obiect de tip Command) valid asociat conexiunii curente.

Evenimente
a) StateChange: apare atunci cnd se schimb starea conexiunii. Handlerul corespunztor (de tipul delegat StateChangeEventHandler) spune ntre ce stri s-a fcut tranziia. b) InfoMessage: apare cnd furnizorul trimite un avertisment sau un mesaj ctre client.

Instanierea unei baze de date folosind mediul vizual

Visual Studio ofer dou funcionaliti care permit lucrul cu baze de date n folderul App_Data. Aa cum am precizat la nceputul acestui capitol, pentru a crea o baz de date alegem din Web Add New Item SQL Server Database. Noile fiiere .mdf i .ldf sunt plasate n folderul App_Data i pot fi vizualizate n Solution Explorer.

INTERACIUNEA CU BAZE DE DATE WEB Cnd deschidei o aplicaie

163

web , Visual Studio adaug automat o conexiune

pentru fiecare baz de date din folderul App_Data. Pentru a alege o conexiune se apas dublu click pe fiierul . mdf n Solution Explorer.

n mod obinuit, toate bazele de date dintr-o aplicaie vor utiliza acelai ir de caractere pentru precizarea modului de conectare. Din acest motiv se pstreaz irul de caractere ce precizeaz modul de conectare ca variabil membru ntr-o clas sau, chiar mai bine, ntr-un fiier de configurare. Putem astfel s construim un obiect de tip Connection i s-i furnizm, utiliznd un constructor dedicat, irul de caractere ce indic modul de conectare:
SqlConnection conn = new SqlConnection(StringConectare);

Menionm aici c irul de caractere care marcheaz o conexiune se gsete n seciunea <connectionStrings> a fiierului Web.config.
<configuration> ... <connectionStrings> <add name="sir" connectionString="DataSource=.\SQLEXPRESS; Integrated Security=True" providerName="System.Data.SqlClient" /> </connectionStrings> ... </configuration>

Pentru

preluarea

acestuia

este

necesar

includerea

spaiului

de

nume

System.Web.Configuration iar pentru conectare se folosete codul:

conn = WebConfigurationManager.ConnectionStrings["sir"].ConnectionString;

nainte de efectuarea unor operaii pe baza de date este bine s verificm dac am reuit s ne conectm la sursa de date. n exemplul urmtor apsarea butonului Open determin conectarea la surs, afiarea informaiilor legate de conectare i a strii acesteia (ca n imaginea umtoare)

164

iar apsarea butonului Close determin nchiderea conexiunii.

public partial class _Default : System.Web.UI.Page { SqlConnection conn; public _Default() { conn = new SqlConnection("Data Source='.\\SQLEXPRESS'; Initial Catalog=master; Integrated Security=SSPI"); } protected void Button1_Click(object sender, EventArgs e) { try { conn.Open(); text1.Text = "Server " + conn.ServerVersion; text1.Text += " Stare conexiune: "+conn.State.ToString(); } catch (Exception err) { text1.Text = "Error reading the database. "+err.Message;} } protected void Button2_Click(object sender, EventArgs e) { conn.Close(); text1.Text = " Stare conexiune: " + conn.State.ToString(); } }

Sursa de date poate fi restricionat la o singur tabel a bazei de date (exemplul 1 de mai jos) sau, mai mult dect att la anumite linii ale tabelei (exemplul 2 de mai jos) sau chiar la anumite coloane ale tabelei (exemplul 3).

INTERACIUNEA CU BAZE DE DATE WEB Exemplul 1. Sunt preluate toate coloanele tabelei clieni.

165

precizm baza de date;

selectm toate coloanele tabelei Clieni din care se preiau datele;

verificm dac sursa conine toate informaiile din tabela Clieni.

166

Exemplul 2. Se preiau doar nregistrrile clienilor dintr-o localitate. adugm o clauz care s realizeze proiecia;

clauza este afiat n ferestra ce conine expresia SQL de selecie;

verificm dac sursa conine numai nregistrrile ce corespund clauzei WHILE

INTERACIUNEA CU BAZE DE DATE WEB

167

Exemplul 3. Am adugat pe pagin o list de tip DropDownList pentru care sursa de date este reprezentat de numele, denumirea i preul produselor.

precizm sursa i numele cmpului ce va fi afiat n list (DenumireProdus)

<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [DenumireProdus], [PretUnitar], [Stoc] FROM [produse]"></asp:SqlDataSource>

Verificm dac sursa conine cele trei coloane selectate.

168

V.6.5. Command
Clasele din categoria Command (SQLCommand, OleDbCommand etc.) conin date referitoare la o comand SQL (SELECT, INSERT, DELETE, UPDATE) i metode pentru executarea unei comenzi sau a unor proceduri stocate. Aceste clase implementeaz interfaa IDbCommand. Ca urmare a interogrii unei baze de date se obin obiecte din categoriile DataReader sau DataSet. O comand se poate executa numai dup ce s-a stabilit o conexiune cu baza de date corespunztoare.

Proprieti
a) CommandText (String): conine comanda SQL sau numele procedurii stocate care se execut pe sursa de date. b) CommandTimeout (int): reprezint numrul de secunde care trebuie s fie ateptat pentru executarea comenzii. Dac se depeste acest timp, atunci se genereaz o excepie. c) CommandType (enumerare de componente de tip CommandType): reprezint tipul de comand care se execut pe sursa de date. Valorile pot fi: StoredProcedure (apel de procedur stocat), Text (comand SQL obinuit), TableDirect (numai pentru OleDb) d) Connection (System. Data. [Provider].PrefixConnection): conine obiectul de tip conexiune folosit pentru legarea la sursa de date. e) Parameters f) (System.Data.[Provider].PrefixParameterCollection): returneaz o colecie de parametri care s-au transmis comenzii. Transaction (System.Data.[Provider].PrefixTransaction): permite accesul la obiectul de tip tranzacie care se cere a fi executat pe sursa de date.

Metode
a) Constructori: SqlCommand() SqlCommand(string CommandText) SqlCommand(string CommandText, SqlConnection con ) SqlCommand(string CommandText,SqlConnection con,SqlTransaction trans) b) Cancel() oprete o comand aflat n executare. c) Dispose() distruge obiectul comand.

INTERACIUNEA CU BAZE DE DATE WEB

169

d) ExecuteNonQuery()execut o comand care nu returneaz un set de date din baza de date; dac comanda a fost de tip INSERT, UPDATE, DELETE, se returneaz numrul de nregistrri afectate. n exemplul urmtor sunt terse din tabela elevi toate nregistrrile n care regsim numele BARBU i afim cte nregistrri am ters.
SqlCommand cmd = new SqlCommand(); cmd.CommandText = "DELETE FROM elevi WHERE nume = BARBU"; cmd.Connection = con; Console.WriteLine(cmd.ExecuteNonQuery().ToString());

e) ExecuteReader() execut comanda i returneaz un obiect de tip DataReader. n exemplul urmtor SqlDataReader.
SqlCommand cmd = new SqlCommand("SELECT * FROM elevi",con); SqlDataReader reader = cmd.ExecuteReader(); while(reader.Read()) { Console.WriteLine("{0} - {1}", reader.GetString(0),reader.GetString(1)); } reader.Close();

se obine coninutul tabelei elevi ntr-un obiect de tip

Metoda ExecuteReader() mai are un argument opional de tip enumerare, CommandBehavior, care descrie rezultatele i efectul asupra bazei de date: CloseConnection (conexiunea este nchis atunci cnd obiectul DataReader este nchis), KeyInfo (returnez informaii despre coloane i cheia primar), SchemaOnly (returnez doar informaii despre coloane), SequentialAccess (pentru manevrarea valorilor binare cu GetChars() sau GetBytes()), SingleResult (se returneaz un singur set de rezultate), SingleRow (se returneaz o singur linie). f) ExecuteScalar() execut comanda
Exemplu. SqlCommand cmd = new SqlCommand("SELECT COUNT(*) FROM elevi",con); SqlDataReader reader = cmd.ExecuteScalar(); Console.WriteLine(reader.GetString(0));

i returneaz valoarea primei coloane de pe

primul rnd a setului de date rezultat; folosit pentru obinerea unor rezultate statistice.

g)

ExecuteXmlReader() interogare.

returneaz un obiect de tipul XmlReader obinut prin

SqlCommand CMD= new SqlCommand("SELECT * FROM elevi FOR XML MATE,EXAMEN", con); System.Xml.XmlReader myXR = CMD.ExecuteXmlReader();

170

Obiectele de tip SQLCommand pot fi utilizate ntr-un scenariu ce presupune deconectarea de la sursa de date dar i n operaii elementare care presupun obinerea unor rezultate imediate. Vom exemplifica utilizarea obiectelor de tip Command n operaii ce corespund acestui caz. Presupunem c am stabilit conexiunea:
using System.Data.SqlClient; SqlConnection conn = newSqlConnection(@"DataSource=serverBD;Database=MAGAZIN; User ID=adm;Password=eu"); conn.Open();

Instanierea unui obiect de tip SQLCommnand


SqlCommand cmd = new SqlCommand("select DenumireProdus from PRODUSE", conn);

conine un string ce precizeaz comanda care se execut i o referin ctre obiectul SQLConnection.

V.6.5.1 Selectarea datelor.


Pentru extragerea datelor cu ajutorul unui obiect SqlCommand trebuie s utilizm metoda ExecuteReader care returneaz un obiect SqlDataReader.
// Instaniem o comand cu o cerere i precizm conexiunea SqlCommand cmd = new SqlCommand("select DenumireProdus from PRODUSE", conn); // Obinem rezultatul cererii SqlDataReader rdr = cmd.ExecuteReader();

V.6.5.2 Inserarea datelor.


Pentru a insera date ntr-o baz de date utilizm metoda ExecuteNonQuery a obiectului SqlCommand .
// irul care pstreaz comanda de inserare string insertString = @"insert into PRODUSE(DenumireProdus, Descriere) VALUES ('Barbie', 'papusa')"; // Instaniem o comand cu acest cerere i precizm conexiunea SqlCommand cmd = new SqlCommand(insertString, conn); // Apelm metoda ExecuteNonQuery pentru a executa comanda cmd.ExecuteNonQuery();

INTERACIUNEA CU BAZE DE DATE WEB

171

V.6.5.3 Actualizarea datelor.


// irul care pstreaz comanda de actualizare string updateString = @"update PRODUSE set DenumireProdus = 'Locomotiva Thomas' where DenumireProdus = 'Thomas'"; // Instaniem o nou comand fr s precizm conexiunea SqlCommand cmd = new SqlCommand(updateString); // Stabilim conexiunea cmd.Connection = conn;2 // Apelm ExecuteNonQuery pentru executarea comenzii cmd.ExecuteNonQuery();

V.6.5.4 tergerea datelor.


Se utilizeaz aceeai metod ExecuteNonQuery.61
// irul care pstreaz comanda de tergere string deleteString = @"delete from PRODUSE where DENUMIRE_PRODUS = 'Barbie'"; // Instaniem o comand SqlCommand cmd = new SqlCommand();22 // Setm proprietatea CommandText cmd.CommandText = deleteString; // Setm proprietatea Connection cmd.Connection = conn; // Executm comanda cmd.ExecuteNonQuery();

Cteodat avem nevoie s obinem din baza de date o singur valoare, care poate fi o sum, o medie sau alt rezultat al unei funcii agregat. O alegere ineficient ar fi utilizarea metodei ExecuteReader i apoi calculul valorii. n acest caz, cea mai bun alegere este s lucrm direct asupra bazei de date i s obinem aceast valoare. 62

n acest exemplu am ales s apelm constructorul SqlCommand fr parametri pentru a exemplifica cum putem stabili explicit conexiunea i comanda. 62 n exemplul prezentat este necesar conversia ntruct rezultatul returnat de ExecuteScalar este de
tip object

61

172

// Instaniem o comand nou SqlCommand cmd = new SqlCommand("select count(*) from PRODUSE", conn); // Executm comanda i obinem valoarea int count = (int)cmd.ExecuteScalar();

V.6.6. DataReader
Datele pot fi explorate n mod conectat (cu ajutorul unor obiecte din categoria DataReader), sau pot fi preluate de la surs (dintr-un obiect din categoria DataAdapter) i nglobate n aplicaia curent (sub forma unui obiect din categoria DataSet). Clasele DataReader permit parcurgerea ntr-un singur sens a sursei de date, fr posibilitate de modificare a datelor la surs. Dac se dorete modificarea datelor la surs, se va utiliza ansamblul DataAdapter + DataSet. Datorit faptului c citete doar nainte (forward-only) acest tip de date este foarte rapid n citire. Overhead-ul asociat este foarte mic (overhead generat cu inspectarea rezultatului i a scrierii n baza de date). Dac ntr-o aplicaie este nevoie doar de informaii care vor fi citite o singur dat, sau rezultatul unei interogri este prea mare ca sa fie reinut n memorie (caching) DataReader este soluia cea mai bun. Un obiect DataReader nu are constructor 63, ci se obine cu ajutorul unui obiect de tip Command i prin apelul metodei ExecuteReader() (vezi exerciiile de la capitolul anterior). Evident, pe toat durata lucrului cu un obiect de tip DataReader, conexiunea trebuie s fie activ. Toate clasele DataReader (SqlDataReader, OleDbDataReader etc.) implementeaz interfaa IDataReader.

Proprieti:
a) IsClosed (boolean, read-only)- returnez true dac obiectul este deschis i fals altfel b) HasRows (boolean,read-only)- verific dac reader-ul conine cel puin o nregistrare c) Item (indexator de cmpuri) d) FieldCount-returneaz numrul de cmpuri din nregistrarea curent

Metode:

Dac pentru instantiere este folosit operatorul new vei obine un obiect cu care nu putei face nimic pentru c nu are o conexiune i o comand ataate.

63

INTERACIUNEA CU BAZE DE DATE WEB

173

a) Close() nchidere obiectul i eliberarea resursele; trebuie s precead nchiderea conexiunii; b) GetBoolean(), GetByte(), GetChar(), GetDateTime(), GetDecimal(), GetDouble(), GetFloat(), GetInt16(), GetInt32(), GetInt64(), GetValue(), GetString() returneaz valoarea unui cmp specificat, din nregistrarea curent; c) GetBytes(), GetChars() citirea unor octei/caractere dintrun cmp de date binar; d) GetDataTypeName(), GetName() returneaz tipul/numele cmpului specificat; e) IsDBNull() returneaz true dac n cmpul specificat prin index este o valoare NULL; f) NextResult()determin trecerea la urmtorul rezultat stocat n obiect (vezi exemplul); aceasta nu exist; de reinut c iniial poziia curent este naintea primei nregistrri. DataReader obine datele ntr-un stream secvenial. Pentru a citi aceste informaii trebuie apelat metoda Read; aceasta citete un singur rnd din tabelul rezultat. Metoda clasic de a citi informaia dintr-un DataReader este de a itera ntr-o bucla while. DataReader implementeaz i indexatori (n exemplul anterior am afiat primele coloane folosind indexatori numerici). Nu este foarte clar pentru cineva care citete codul care sunt coloanele afiate dect dac s-a uitat i n baza de date. Din aceasta cauz este preferat utilizarea indexatorilor de tipul string. Valoarea indexului trebuie s fie numele coloanei din tabelul rezultat. Indiferent c se folosete un index numeric sau unul de tipul string indexatorii ntorc ntotdeauna un obiect de tipul object fiind necesar conversia. g) Read() determin trecerea la urmtoarea nregistrare, returnnd false numai dac

V.6.7. Comenzi parametrizate


Atunci cnd lucrai cu bazele de date avei nevoie, de cele mai multe ori, s filtrai rezultatul dup diverse criterii. De obicei acest lucru se face n funcie de condiiile specificate de ctre utilizator (ex: se afieaz doar ppuile Barbie). Cea mai simpl metod de filtrare a rezultatelor este s construim dinamic string-ul SqlCommand dar aceast metod nu este recomandat deoarece poate afecta baza de date ( ex. Accesarea informaiilor confideniale). Dac folosim interogri cu parametri atunci orice valoare pus ntr-un parametru nu va fi tratat drept cod SQL, ci ca valoare a unui cmp, fcnd aplicaia mai sigur.

Pentru a folosi interogri cu parametri trebuie s :

174

a) construii string-ul pentru SqlCommand folosind parametri;


SqlCommand cmd =

64

new SqlCommand("SELECT * FROM PRODUSE WHERE DENUMIRE = @den", conn);

b) construii un obiect SqlParameter asignnd valorile corespunztoare; Exemplu


SqlParameter param = new SqlParameter(); param.ParameterName = "@Cden"; param.Value = sir;

c) adugai obiectul SqlParameter la obiectul SqlCommand, folosind proprietatea


Parameters.
cmd.Parameters.Add(param);

Astfel, comanda
SELECT * FROM produse WHERE CodProdus = 34;

devine
SELECT * FROM produse WHERE CodProdus = @CodProdus;

V.6.8. Studiu de caz


Pentru a exemplifica operaiile DML n ASP.NET am construit o aplicaie care s permit vizualizarea informaiilor din tabela produse, modificarea atributelor unui produs, tergerea unui produs din tabel i adugarea unui produs . Am adugat mai nti pe pagin o list de tip DropDown pentru care fiecare item conine o referire la o nregistrare din sursa de date menionat n exemplul 3 din seciunea

Atunci cnd comanda va fi executat @den va fi inlocuit cu valoarea aflat n obiectul SqlParameter ataat. Dac nu asociem o instan de tipul SqlParameter pentru un parametru din string-ul de interogare sau avem mai multe instane SqlParameter pentru un parametru vom obine o eroare la rulare

64

INTERACIUNEA CU BAZE DE DATE WEB

175

5.7.4 (sunt preluate din tabela Produse coloanele CodProdus, DenumireProdus, PretUnitar i Stoc) Am adugat apoi casete text n care vom afia/introduce valorile atributelor unui produs i butoane a cror acionare determin executarea unei operaii de inserare, modificare sau tergere. Design-ul aplicaiei este prezentat n figura 5-22.

figura V-22

<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource2" DataTextField="DenumireProdus" DataValueField="DenumireProdus" Height="45px" style="margin-top: 32px; margin-bottom: 46px" Width="219px" onselectedindexchanged="DropDownList1_SelectedIndexChanged"> </asp:DropDownList> protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { ListaProduse(); } }

Fiecare item al listei este un ir de caractere format prin alipirea informaiilor din cmpurile DenumireProdus, PretUnitar i Stoc. Lista de produse va fi afiat la fiecare ncrcare a paginii. n cazul n care operaia de conectare la baza de date sau operaia de citire din baza de date eueaz se afieaz un mesaj de eroare.

176

Subprogramul ListaProduse() conine secvena de conectare la sursa de date i secvena de completare a listei, conform descrierii anterioare, cu valori din tabela Produse.
private void ListaProduse() { DropDownList2.Items.Clear(); string selectSQL = "SELECT CodProdus,DenumireProdus,PretUnitar,Stoc FROM produse"; conn = new SqlConnection ("Data Source='.\\SQLEXPRESS';Initial Catalog=master; Integrated Security=SSPI"); SqlCommand cmd = new SqlCommand(selectSQL, conn); SqlDataReader reader; try { conn.Open(); reader = cmd.ExecuteReader(); while (reader.Read()) { ListItem newItem = new ListItem(); newItem.Text = reader["DenumireProdus"] + "pret:" +reader["PretUnitar"]+" stoc:"+reader["Stoc"]; newItem.Value = reader["CodProdus"].ToString(); DropDownList2.Items.Add(newItem); } reader.Close(); } catch (Exception err) { text1.Text = "Eroare la citire :" + err.Message; } finally { conn.Close(); } }

La ncrcarea paginii lista conine un numr de itemi egal cu numrul nregistrrilor din tabela produse, astfel nct utilizatorul poate selecta oricare dintre produsele aflate n aceast tabel.

protected void DropDownList2_SelectedIndexChanged(Object sender,EventArgs e) {

INTERACIUNEA CU BAZE DE DATE WEB

string selectSQL= "SELECT*FROM produse WHERE CodProdus='"+DropDownList2.SelectedItem.Value +"'";

177

conn = new SqlConnection ("Data Source='.\\SQLEXPRESS';Initial Catalog=master; Integrated Security=SSPI"); SqlCommand cmd = new SqlCommand(selectSQL, conn); SqlDataReader reader; try { conn.Open(); reader = cmd.ExecuteReader(); reader.Read(); StringBuilder sb = new StringBuilder(); sb.Append("<b>");sb.Append(reader["DenumireProdus"]); sb.Append(" are codul ");sb.Append(reader["CodProdus"]); sb.Append("</b><br />"); sb.Append("Categoria:");sb.Append(reader["Categorie"]);sb.Append("<br />"); sb.Append("Pret unitar:");sb.Append(reader["PretUnitar"]);sb.Append("<br />"); sb.Append("Stoc: ");sb.Append(reader["Stoc"]);sb.Append("<br />"); sb.Append("Descriere:");sb.Append(reader["Descriere"]);sb.Append("<br />"); Label1.Text = sb.ToString(); reader.Close(); } catch (Exception err) { text1.Text = "Eroare: " + err.Message; } finally { conn.Close(); } }

Selectarea unui item din lista de produse determin afiarea unor informaii suplimentare despre acest produs, ntr-o etichet, cu ajutorul unui obiect de tip StringBuilder: Selectarea unui item din list determin executarea evenimentului
DropDownList2_SelectedIndexChanged

eveniment ce determin preluarea informaiilor ce corespund itemului curent din tabela produse i afiarea acestor informaii n formatul din imaginea alturat.

Subprogramul anterior permite doar afiarea informaiilor referitoare la un produs, nu i modificarea acestora. De aceea, alegem o alt metod de afiare a detaliilor referitoare la produsele din tabel, i anume, fiecare valoare a unui atribut va fi afiat ntr-o caset text.

178

protected void DropDownList2_SelectedIndexChanged(Objectsender,EventArgs e) { string selectSQL= "SELECT*FROM produse WHERE CodProdus='" +DropDownList2.SelectedItem.Value +"'"; conn = new SqlConnection ("Data Source='.\\SQLEXPRESS';Initial Catalog=master; Integrated Security=SSPI"); SqlCommand cmd = new SqlCommand(selectSQL, conn); SqlDataReader reader; try { conn.Open(); reader = cmd.ExecuteReader(); reader.Read(); icp.Text = reader["CodProdus"].ToString(); ipu.Text = reader["PretUnitar"].ToString(); il.Text = reader["Descriere"].ToString(); idp.Text = reader["DenumireProdus"].ToString(); ic.Text = reader["Categorie"].ToString(); ist.Text = reader["Stoc"].ToString(); reader.Close(); text1.Text = ""; } catch (Exception err) { text1.Text = "Eroare: " + err.Message; } finally { conn.Close(); } }

Adugarea unei nregistrri se declaneaz la apsarea butonului Modific produs care terge textul afiat n casetele text i afieaz butonul Produsul se adaug n

INTERACIUNEA CU BAZE DE DATE WEB stoc.


protected void ButonAdauga_Click(object sender, EventArgs e) { icp.Text = ipu.Text = il.Text = ""; idp.Text = ic.Text =ist.Text = text1.Text = ""; ButonInserare.Visible = true; }

179

nainte de executarea operaiei de inserare se verific dac am completat cmpurile obligatorii. Dac nu este ndeplinit aceast condiie atunci suntem avertizai i operaia se ncheie fr succes.

Dac au fost completate toate casetele text corespunztoare cmpurilor obligatorii atunci inserarea se face cu succes i se afieaz, ntr-o caset text, care ne asigur de acest fapt.

La o nou accesare a listei de produse va fi afiat i produsul nou adugat. n imaginea urmtoare avem detalii referitoare la produs adugat la pasul anterior.

180

protected void ButonInserare_Click(object sender, EventArgs e) { // verific daca au fost completate campurile obligatorii if (icp.Text == "" || ipu.Text == "" || idp.Text == "" || ic.Text == "" || ist.Text == "") { text1.Text = "Atributele Cod,Denumire,Stoc,Pret,Categorie sunt OBLIGATORII"; text1.Visible = true; return; } string insertSQL = "INSERT INTO produse(CodProdus,DenumireProdus,PretUnitar,Categorie,Stoc,Descriere) VALUES ('"; insertSQL += icp.Text + "', '"+ idp.Text + "', '"+ipu.Text + "', '"+ ic.Text + "', '" + ist.Text + "', '" + il.Text + "')"; conn = new SqlConnection ("Data Source='.\\SQLEXPRESS';Initial Catalog=master; Integrated Security=SSPI"); SqlCommand cmd = new SqlCommand(insertSQL, conn); int NrProduseAdaugate = 0; try { conn.Open(); NrProduseAdaugate = cmd.ExecuteNonQuery(); text1.Text = " Numar produse inserate:"+ NrProduseAdaugate.ToString(); text1.Visible = true; } catch (Exception err) { text1.Text = "Eroare la inserare "+ err.Message; } finally { conn.Close(); } // Actualizam lista de produse if (NrProduseAdaugate > 0) { ListaProduse(); }

Secvena de inserare a unui nou produs poate fi rescris , utiliznd comenzile parametrizate.

INTERACIUNEA CU BAZE DE DATE WEB

181

... string insertSQL; insertSQL = "INSERT INTO produse (CodProdus,DenumireProdus,PretUnitar,Categorie,Stoc,Descriere) VALUES ("; insertSQL += "@CodProdus,@DenumireProdus,@PretUnitar,@Categorie,@Stoc,@Descriere)"; SqlCommand cmd = new SqlCommand(insertSQL, conn); cmd.Parameters.AddWithValue("@CodProdus", icp.Text); cmd.Parameters.AddWithValue("@DenumireProdus", idp.Text); cmd.Parameters.AddWithValue("@PretUnitar", ipu.Text); cmd.Parameters.AddWithValue("@Categorie", ic.Text); cmd.Parameters.AddWithValue("@Stoc", ist.Text); cmd.Parameters.AddWithValue("@Descriere", il.Text);

...

Inserarea se va face, i n acest caz, cu succes.

Modificarea unui produs presupune mai nti selectarea acestuia din lista produselor, modificarea valorilor din casetele text i dup aceea efectuarea operaiei propriuzise. Valoarea cmpului CodProdus nu se poate modica ntruct regsirea produsului ce urmeaz a fi modificat se face pe baza acestei chei.

182 protected void ButonModificare_Click(object sender, EventArgs e) { string updateSQL; updateSQL = "UPDATE produse SET DenumireProdus=@DenumireProdus,PretUnitar=@PretUnitar,"; updateSQL += "Categorie=@Categorie, Descriere=@Descriere "; updateSQL += "WHERE CodProdus=@CodProdus"; conn = new SqlConnection ("Data Source='.\\SQLEXPRESS';Initial Catalog=master; Integrated Security=SSPI"); SqlCommand cmd = new SqlCommand(updateSQL, conn); cmd.Parameters.AddWithValue("@DenumireProdus", idp.Text); cmd.Parameters.AddWithValue("@PretUnitar", ipu.Text); cmd.Parameters.AddWithValue("@Categorie", ic.Text); cmd.Parameters.AddWithValue("@Stoc", ist.Text); cmd.Parameters.AddWithValue("@Descriere", il.Text); cmd.Parameters.AddWithValue("@CodProdus",DropDownList2.SelectedItem.Value); int NrProduseModificate = 0; try { conn.Open(); NrProduseModificate = cmd.ExecuteNonQuery(); text1.Text = "Produse modificate:"+NrProduseModificate.ToString(); } catch (Exception err){text1.Text = "Eroare la modif" +err.Message;} finally {conn.Close();} if (NrProduseModificate > 0) ListaProduse(); }

Dup modificare, lista de produse este actualizat, i sunt afiate noile valori pentru produsul modificat.

INTERACIUNEA CU BAZE DE DATE WEB

183

tergerea unui produs din tabel se face numai dac nu sunt nclcate condiiile de integritate date de relaiile dintre tabele. De exemplu, nu putem terge un produs care a fost deja comandat . n exemplul din imaginea urmtoare se ncerc tergerea produsului pix. ntruct acesta apare n cel puin o comand, operaia de tergere se ncheie fr succes.

protected void ButonStergere_Click(object sender, EventArgs e) { string deleteSQL; deleteSQL = "DELETE FROM produse WHERE CodProdus=@CodProdus"; string StringConectare; StringConectare = "Data Source='.\\SQLEXPRESS';Initial Catalog=master; Integrated Security=SSPI"; conn = new SqlConnection(StringConectare); SqlCommand cmd = new SqlCommand(deleteSQL, conn); cmd.Parameters.AddWithValue("@CodProdus ", DropDownList2.SelectedItem.Value); int NrProduseSterse = 0; try { conn.Open(); NrProduseSterse = cmd.ExecuteNonQuery(); text1.Text = "Produse sterse:" + NrProduseSterse.ToString(); } catch (Exception err) {text1.Text = err.Message;} finally {conn.Close();} if (NrProduseSterse > 0) ListaProduse(); }

Dac produsul ales nu este comandat atunci el poate fi ters. n exemplul din imaginea urmtoare produsul creion poate fi ters ntruct niciun client nu a comandat acest produs.

184

V.7. LUCRUL N MOD DECONECTAT


Folosirea combinat a obiectelor DataAdapter i DataSet permite operaii de selectare, tergere, modificare i adugare la baza de date.

V.7.1. DataAdapter
Clasele DataAdapter genereaz obiecte care funcioneaz ca o interfa ntre sursa de date i obiectele DataSet interne aplicaiei, permind prelucrri pe baza de date. Ele gestioneaz automat conexiunea cu baza de date astfel nct conexiunea s se fac numai atunci cnd este necesar. Un obiect DataSet este de fapt un set de tabele relaionate. Folosete serviciile unui obiect DataAdapter pentru a-i procura datele i trimite modificrile napoi ctre baza de date. Datele sunt stocate de un DataSet n format XML, folosit i pentru transferul datelor. n exemplul urmtor se preiau datele din tabelele elevi i profesori:
//transfer datele n datasetul ds sub forma unei tabele locale numite elevi SqlDataAdapter de=new SqlDataAdapter("SELECT Nume,Pren,clasa FROM Elevi", conn); de.Fill(ds,"elevi"); //transfer datele n datasetul ds sub forma unei tabele locale numite profi SqlDataAdapter dp=new SqlDataAdapter("SELECT Nume,Pren FROM Profesori", conn); dp.Fill(ds,"profesori");

Proprieti

INTERACIUNEA CU BAZE DE DATE WEB a) DeleteCommand, InsertCommand, SelectCommand,

185 UpdateCommand

(Command), conin comenzile ce se execut pentru selectarea sau modificarea datelor n sursa de date. b) MissingSchemaAction (enumerare) determin ce se face atunci cnd datele aduse nu se potrivesc peste schema tablei n care sunt depuse. Poate avea urmtoarele valori: a. Add - implicit, DataAdapter adaug coloana la schema tablei b. AddWithKey se adug coloana i informaii relativ la cheia primar c. Ignore - se ignor lipsa coloanei respective, ceea ce duce la pierdere de date d. Error - se genereaz o excepie de tipul InvalidOperationException.

Metode
a) Constructori:SqlDataAdapter()|SqlDataAdapter(obiect_comanda)| SqlDataAdapter(string_comanda, conexiune); b) Fill() permite umplerea unei tabele dintrun obiect DataSet cu date. Permite specificarea obiectului DataSet n care se depun datele, eventual a numelui tablei din acest DataSet, numrul de nregistrare cu care s se nceap popularea (prima avnd indicele 0) i numrul de nregistrri care urmeaz a fi aduse. c) Update() permite transmiterea modificrilor efectuate ntrun DataSet ctre baza de date.

V.7.2. DataSet
Un DataSet este format din Tables (colecie format din obiecte de tip DataTable; DataTable este compus la rndul lui dintr-o colecie de DataRow i DataColumn), Relations (colecie de obiecte de tip DataRelation pentru memorarea legturilor printe copil) i ExtendedProperties ce conine proprieti definite de utilizator. Scenariul uzual de lucru cu datele dintr-o tabel conine urmtoarele etape: popularea succesiv a unui DataSet prin intermediul unuia sau mai multor obiecte DataAdapter, apelnd metoda Fill (vezi exemplul de mai sus) procesarea datelor din DataSet folosind numele tabelelor stabilite la umplere, ds.Tables["elevi"], sau indexarea acestora, ds.Tables[0], ds.Tables[1] actualizarea datelor prin obiecte comand corespunztoare operaiilor INSERT, UPDATE i DELETE. Un obiect CommandBuilder poate construi automat o combinaie de comenzi ce reflect modificrile efectuate.

186

Aadar, DataAdapter deschide o conexiune doar atunci cnd este nevoie i o inchide imediat cnd aceasta nu mai este necesar. De exemplu DataAdapter realizeaz urmtoarele operaiuni atunci cnd trebuie s populeze un DataSet: deschide conexiunea, populeaz DataSet-ul, nchide conexiunea i urmtoarele operaiuni atunci cnd trebuie s fac update pe baz de date: deschide conexiunea, scrie modificrile din DataSet n baza de date, nchide conexiunea. ntre operaiunea de populare a DataSet-ului i cea de update conexiunile sunt nchise. ntre aceste operaii n DataSet se poate scrie sau citi. Crearea unui obiect de tipul DataSet se face folosind operatorul new.
Exemplu. DataSet dsProduse = new DataSet();

Constructorul unui DataSet nu necesit parametri. Exist totui o suprancrcare a acestuia care primete ca parametru un string i este folosit atunci cnd trebuie s se fac o serializare a datelor ntr-un fisier XML. In exemplul anterior avem un DataSet gol i avem nevoie de un DataAdapter pentru a-l popula. Un obiect DataAdapter conine mai multe obiecte Command (pentru inserare, modificare, tergere i selecie) i un obiect Connection pentru a citi i scrie date. n exemplul urmtor construim un obiect de tipul DataAdapter, daProd. Comanda SQL specific cu ce date va fi populat un DataSet, iar conexiunea conn trebuie s fi fost creat anterior, dar nu i deschis. DataAdapter-ul va deschide conexiunea la apelul metodelor Fill i Update.
SqlDataAdapter daProd = new SqlDataAdapter("SELECT IdProdus, DenumireProdus FROM PRODUSE", conn);

Prin intermediul constructorului putem instania doar comanda de interogare. Instanierea celorlalte comenzi se face fie prin intermediul proprietilor pe care le expune DataAdapter, fie folosind obiecte de tipul CommandBuilder.
SqlCommandBuilder cmdBldr = new SqlCommandBuilder(daProd);

La iniializarea unui CommandBuilder se apeleaz un constructor care primete ca parametru un adapter, pentru care vor fi construite comenzile. SqlCommandBuilder care nu poate construi dect comenzi simple i care se aplic unui singur tabel. Atunci cnd trebuie

INTERACIUNEA CU BAZE DE DATE WEB

187

s utilizm comenzi care vor folosi mai multe tabele este recomandat construirea separat a comenzilor i apoi ataarea lor adapterului, folosind proprieti. Popularea DataSet-ului se face dup ce am construit cele dou instane:
daProd.Fill(dsProduse, "PRODUSE");

n exemplul urmtor va fi populat DataSet-ul dsProduse. Cel de-al doilea parametru (string) reprezint numele tabelului (nu numele tabelului din baza de date, ci al tabelului rezultat n DataSet) care va fi creat. Scopul acestui nume este identificarea ulterioar a tabelului. n cazul n care nu sunt specificate numele tabelelor, acestea vor fi adaugate in DataSet sub numele Table1, Table2, ... Un DataSet poate fi folosit ca surs de date pentru un DataGrid din ASP.Net .
Exemplu. 65 DataGrid dgProduse = new DataGrid(); dgProduse.DataSource = dsProduse; dgProduse.DataMembers = "PRODUSE";

Dup ce au fost fcute modificri ntr-un DataSet acestea trebuie scrise i n baza de date. Actualizarea se face prin apelul metodei Update.
daProd.Update(dsProduse, "PRODUSE");

Completarea listei de produse pentru lucrul n mod deconectat se rescrie :

Se pot afia mai multe tabele dintr-un DataSet, semnul "+" permindu-i utilizatorului s aleag care tabel s fie afiat. Pentru a suprima afiarea acelui semn "+" setm proprietatea DataMembers pe numele tabelului care va fi afiat. Numele tabelului este acelai care l-am folosit ca parametru n apelul metodei Fill.

65

188 private void ListaProduse() { DropDownList2.Items.Clear(); string selectSQL = "SELECT CodProdus,DenumireProdus,PretUnitar,Stoc,Descriere FROM produse"; conn = new SqlConnection(StringConectare); SqlCommand cmd = new SqlCommand(selectSQL, conn); SqlDataAdapter adapter = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); try{conn.Open(); // Toate informatiile sunt transferate folosind o singura comanda // care creaza o tabela noua numita produse n DataSet. adapter.Fill(ds, "produse"); } catch (Exception err){text1.Text = "Eroare la citire "+ err.Message;} finally {conn.Close();} foreach (DataRow produs in ds.Tables["produse"].Rows) { ListItem newItem = new ListItem(); newItem.Text = produs["DenumireProdus"] + "(" +produs["Descriere"]+")"; newItem.Value = produs["CodProdus"].ToString(); DropDownList2.Items.Add(newItem); }

V.7.3. Proiectare DataSet n mediu vizual


Pentru a construi un obiect de tip DataSet n mediu vizual trebuie s folosim opiunea Add New Item i s selectm template-ul DataSet.

Putem s adugm itemi din Database Explorer (tabele, vizualizri, etc), prin selecie simpl i deplasare pe suprafaa de design sau s adugm elemente noi pe o suprafaa corespunztoare unui obiect DataSet.

INTERACIUNEA CU BAZE DE DATE WEB

189

n acest exemplu, obiectul DataSet va conine nregistrri ale tabelelor clase, profesori i ncadrare din baza de date coal.

Pentru a trasa relaiile dintre tabele putem folosi opiunea Relation din meniul Toolbox ataat. Dup alegerea acestei unelte trebuie s stabilim tabelele relaionate i tipul relaiilor.

190

n cazul exemplului ales au fost marcate cele dou relaii de tip 1-n dintre tabele.

n concluzie, dac dorii s extragei nregistrri dintr-o baz de date i vrei s le punei ntr-un obiect de tip DataSet trebuie s utilizai un obiect de tip DataAdapter. Fiecare obiect de tip DataAdapter conine patru tipuri de comenzi (SELECT,INSERT,UPDATE,DELETE). Acest lucru v permite s utilizai un singur obiect DataAdapter pentru mai multe sarcini.

INTERACIUNEA CU BAZE DE DATE WEB

191

Obiectul de tip comand transmis constructorului este automat asignat proprietii DataAdapter.SelectCommand. Imaginea urmtoare este o reprezentare a modului n care aplicaia Web interacioneaz cu baza de date.

Modelul conceptual ataat unei aplicaii poate fi generat automat prin selectarea din Solution Explorer a opiunii AddNew Item Pentru generare putem folosi tabelele unei baze de date deja contruit sau putem crea un model conceptual nou.

Pentru a alege itemii ce urmeaz a fi reprezentai n modelul conceptual trebuie s ne conectm la baza de date aferent i s selectm elementele (tabele, vizualizri etc.)

192

n exemplul urmtor se construiete un model conceptual pe baza tabelelor i a relaiilor existente ntre tabelele clase, ncadrare, profesori.

Dup alegerea elementelor acestea vor aprea pe suprafaa de design.

INTERACIUNEA CU BAZE DE DATE WEB

193

Uneltele Association i Inheritance permit reprezentarea grafic a relaiilor dintre entiti.

V.8. Lucrul cu mai multe tabele


Cele mai multe dintre aplicaii combin informaii din mai multe tabele. Pentru aceasta trebuie s utilizm o interogare de tip JOIN aa cum am menionat n capitolul 5.5. pe baza relaiilor dintre cele dou tabele. n cazul exemplului ales avem dou relaii de tip 1-n ntre tabela Comenzi i tabela Clieni, respectiv Produse. Definirea acestor relaii presupune utilizarea obiectelor de tip DataRelation.
DataRelation Clienti_Comenzi = new DataRelation("Clienti_Comenzi", ds.Tables["Clienti"].Columns["CodClient"], ds.Tables["Comenzi"].Columns["CodClient"]); DataRelation Produse_Comenzi = new DataRelation("Produse_Comenzi", ds.Tables["Produse"].Columns["CodProdus"], ds.Tables["Comenzi"].Columns["CodProdus"]);

194 ds.Relations.Add(Clienti_Comenzi); ds.Relations.Add(Produse_Comenzi); foreach (DataRow client in ds.Tables["Clienti"].Rows) {text1.Text += "<br /><b>" + client["NumeClient"]; text1.Text += " " + client["PrenumeClient"] + "</b><br />"; foreach (DataRow comanda in client.GetChildRows(Clienti_Comenzi)) {foreach (DataRow produs in comanda.GetParentRows(produse_Comenzi)) { text1.Text += "&nbsp;&nbsp;"; text1.Text += produs["DenumireProdus"] + "<br />"; } } }

Dac vrem s modificm aplicaia prezentat i s afim o list cu numrul de produse cumprate de fiecare client trebuie s adugm n DataAdapter informaiile din tabela Clieni i apoi cele din tabela Comenzi.
string selectSQL = "SELECT CodClient,NumeClient FROM Clienti"; conn = new SqlConnection ("Data Source='.\\SQLEXPRESS';Initial Catalog=master; Integrated Security=SSPI"); SqlCommand cmd = new SqlCommand(selectSQL, conn); SqlDataAdapter adapter = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); DropDownList2.Items.Clear(); try { conn.Open(); adapter.Fill(ds, "Clienti"); cmd.CommandText = "SELECT CodClient,IdComanda,NumarProduse FROM Comenzi"; adapter.Fill(ds, "Comenzi"); } catch (Exception err){text1.Text = "Eroare: "+ err.Message;} finally {conn.Close();} foreach (DataRow client in dsPubs.Tables["Clienti"].Rows) {ListItem newItem = new ListItem(); newItem.Text = client["NumeClient"] + " a cumparat "; int x = 0; foreach (DataRow comanda in dsPubs.Tables["Comenzi"].Rows) { if(Convert.ToInt32(client["CodClient"])==Convert.ToInt32(comanda["CodClient"])) x += Convert.ToInt32(comanda["NumarProduse"]); } newItem.Text += x + " produse"; newItem.Value = client["CodClient"].ToString(); DropDownList2.Items.Add(newItem); }

INTERACIUNEA CU BAZE DE DATE WEB

195

Lista va conine acum informaii din cele dou tabele relaionate.

V.9. PROCEDURI STOCATE (Stored Procedures)


O procedur stocat este o secven de instructiuni SQL, salvat n baza de date, care poate fi apelat de aplicaii diferite. Sql Server compileaz procedurile stocate, ceea ce crete eficiena utilizrii lor. De asemenea, procedurile stocate pot avea parametri. O procedur stocat poate fi apelat folosind obiectul SqlCommand:
SqlCommand cmd = new SqlCommand("NumeProceduraStocata", conn); cmd.CommandType = CommandType.StoredProcedure; //Tipul obiectului comand este procedura stocat

Primul parametru al constructorului este un ir de caractere ce reprezint numele procedurii stocate. A doua instruciune de mai sus, spune obiectului SqlCommand ce tip de comand va fi executat, prin intermediul proprietii CommandType. Exemplu:
SqlCommand cmd = new SqlCommand("StoredProcedure1", conn); cmd.CommandType = CommandType.StoredProcedure; DsClienti = new DataSet(); DaClienti = new SqlDataAdapter("", conn); DaClienti.SelectCommand = cmd; DaClienti.Fill(DsClienti, "Clienti");

Apelul procedurilor stocate parametrizate, este asemntor cu cel al interogrilor cu parametri.


//Obiect Comanda, in care primul parametru este numele procedurii stocate SqlCommand cmd = new SqlCommand("Localitate", conn); cmd.CommandType = CommandType.StoredProcedure;

196

//Tipul obiectului comand este procedura stocat cmd.Parameters.Add(new SqlParameter("@Localitate", inputLoc)); DsClienti = new DataSet(); DaClienti = new SqlDataAdapter("", conn); DaClienti.SelectCommand = cmd; DaClienti.Fill(DsClienti, "TabelaClienti");

Primul argument al constructorului obiectului SqlCommand este numele procedurii stocate. Aceast procedur are un parametru numit @Localitate. De aceea trebuie folosit un obiect de tip SqlParameter pentru a adauga acest parametru la obiectul de tip Command. Vizual, o procedur stocat este generat dup selectarea componentei Stored

Procedures din Database Explorer, alegerea opiunii personalizarea ablonului:


CREATE PROCEDURE dbo.nume /* (@parameter1 int = 5,@parameter2 datatype OUTPUT) */ AS /* SET NOCOUNT ON */ RETURN

.i

n exemplul urmtor se construiete procedura stocat afis, ce permite afiarea claselor cu un profil anume.

Dup salvarea procedurii aceasta apare n Solution Explorer i poate fi executat (click dreapta pe numele procedurii i se alege opiunea )

Executarea procedurii stocate afis parametrul p.

necesit introducerea unei valori pentru

INTERACIUNEA CU BAZE DE DATE WEB

197

Rezultatul executrii este afiat n fereastra Output. Codul SQL dintr-o procedur stocat poate fi generat automat urmnd aceeai pai prin care se genereaz vizual o interogare.

n exemplul urmtor se genereaz secvena de cod care atribuie variabilei nr numrul de clase de profil real.

Secvenele de cod SQL din procedura stocat pot fi selectate i executate separat.

198

V.10. Controale .NET legate la date


Majoritatea aplicaiilor software implic, ntr-un fel sau altul, accesarea i prezentarea datelor. Controalele legate la date joac un rol cheie n dezvoltarea aplicaiilor .NET deoarece ele permit asocierea controalelor cu unul sau mai multe cmpuri din orice surs de date. Legarea la date i controalele Web legate la date reprezint punctul principal al oricrei aplicaii ASP.NET. Legarea la date 66 este procesul prin care se preiau date de la o surs i se asociaz dinamic unei proprieti a unui element vizual. n funcie de contextul unde va fi afiat elementul el poate s corespund unei etichete HTML sau unui control Web.NET. Putem s construim astfel pagini legate la date fr s scriem secvene de cod speciale pentru accesarea surselor de date.

V.10.1.

Controale pentru sursa de date

Controalele de server Web ASP.NET pot fi legate la o baz de date prin folosirea controlului DataSource. Toate controalele pentru sursa de date includ interfaa IDataSource i se gsesc n seciunea Data a meniului Toolbox din Visual Studio. .NET Framework include urmtoarele controale pentru sursa de date: SqlDataSource permite conectarea la orice surs de date care are un provider ADO.NET (SQL Server, Oracle, ODBC, OLE DB) 67; AccessDataSource permite conectarea la o baz de date Access .mdb 68; ObjectDataSource permite conectarea la o clas personalizat definit pentru accesul la date. Aceast soluie este preferat de cei mai muli dezvoltatori ns necesit scrierea unui volum mare de cod; XmlDataSource permite conectarea la un fiier XML;

n limba englez data binding Capitolul 5.5.2 68 ntruct bazele de date Acess nu au server dedicat (precum SQL Server) care s gestioneze accesul concurent ele sunt indicate n cazul site-urile mici pentru care numrul utilizatorilor simultani este redus.
67

66

INTERACIUNEA CU BAZE DE DATE WEB

199

SiteMapDataSource permite conectarea la un fiier de tip .sitemap care pstreaz structura arborescent a site-ului; Atunci cnd adugm un control de legare la o surs de date pentru aplicaie el apare sub forma unui dreptunghi gri n modul proiectare (design) dar nu va fi vizibil atunci cnd se ruleaz aplicaia Web i se ncarc pagina.

Controalele pentru sursele de date au dou funcii principale: b) preiau datele din sursa de date i le furnizeaz controlului legat (DataBind()). Aceste date pot fi accesate prin intermediul controlului fr utilizarea unor funcii speciale. c) actualizeaz sursele de date atunci cnd au loc operaii de editare. Pentru a nelege cum acioneaz controalele trebuie s nelegem care este succesiunea de pai pe care-i parcurge o pagin Web care conine controale legate la date: a) se creaz pagina (fiier .aspx); b) ncepe ciclul de via al paginii cu executarea evenimentelor Page.Init i Page.Load; c) toate controalele de pe pagin sunt activate; d) dac utilizatorul face o operaie de modificare a datelor atunci controlul sursei de date execut aceast operaie. Atunci cnd se modific o nregistrare din tabel au loc evenimentele Updating i Updated, dac se insereaz o linie atunci au loc evenimentele Inserting i Inserted iar dac are loc o operaie de tergere atunci se produc evenimentele Deleting i Deleted; e) are loc evenimentul Page.PreRender; f) controalele pentru surse de date execut operaiile de interogare i furnizeaz datele controalelor legate la date. Acest pas are loc la primul acces la pagin i de fiecare dat cnd se revine la pagin astfel nct avem ntotdeauna acces la datele cele mai recente. Au loc evenimentele Selecting i Selected. g) pagina este eliminata.

200

Bazele de date pot fi legate la mai multe tipuri de controale ns unele dintre acestea au fost proiectate exclusiv pentru bazele de date. Printre acestea se numr GridView, DetailsView, i FormView, controale ce pot afia mai multe cmpuri la un moment dat sub forma unui tabel sau a unei structuri bine definite i permit operaii de selectare, editare i ordonare. Cele mai puternice controale ce pot fi legate la baze date sunt: red o gril 69 multi-coloan, complet ablonat i permite afiarea tabelelor mari. este ideal pentru afiarea la un moment dat a unei singure nregistrri dintro tabel, ntr-un tabel ce are o singur linie pentru fiecare cmp i permite editarea;

afieaz o singur nregistrare la un moment dat i permite operaii de editare. Fa de Details View are avantajul c ablonul de prezentare este flexibil, permind combinarea mai multor cmpuri.

permite, ca i GridView, afiarea mai multor nregistrri simultan, diferena fiind dat de ablonul de afiare, construit cu mai mult munc dar cu o mai mare flexibilitate.

V.10.2. Controlul GridView


Controlul GridView reprezint o gril foarte flexibil n care sunt prezentate coloanele unei tabele din sursa de date. Fiecare linie din acest tabel corespunde unei nregistrri din sursa de date i fiecare cmp al nregistrrii corespunde unei coloane din tabel. Folosind acest control putem crea coloane simple legate la date, care prezint datele preluate din sursa de date, coloane ablon, care permit proiectarea structurii grafice a coninutului de celule i coloane bazate pe comenzi, care permit adugarea unor funcionaliti specifice (selectare, editare, modificare, tergere, paginare,ordonare). Controlul GridView red coninutul unor tabele organizate pe coloane i permite afiarea mai multor nregistrri n acelai timp. Dup adugarea unei grile n care fiecare coloan corespunde unui cmp pe pagin
<asp:GridView ID="GridView1" runat="server"/>

urmeaz asocierea datelor acestui control.

69

n limba englez grid

INTERACIUNEA CU BAZE DE DATE WEB

201

n urmtorul exemplu se utilizeaz obiecte ADO.NET i o interogare pentru a asocia controlul cu datele coninute n DataSet.
string connectionString = WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; string selectSQL = "SELECT * FROM clase"; SqlConnection con = new SqlConnection(connectionString); SqlCommand cmd = new SqlCommand(selectSQL, con); SqlDataAdapter adapter = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); adapter.Fill(ds, "clase"); GridView1.DataSource = ds; GridView1.DataBind();

Pentru a evita introducerea manual a acestui cod, putem s utilizm controlul SqlDataSource pentru a meniona sursa de date
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [clase]"></asp:SqlDataSource>

i apoi putem lega datele la controlul GridView.


<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" />

Definirea coloanelor n mod implicit, proprietatea GridView.AutoGenerateColumns este True astfel nct se genereaz o coloan pentru fiecare cmp al tabelei legate. Aceast proprietate trebuie setat pe False atunci cnd dorim s afim doar o parte dintre coloane sau atunci cnd vrem s schimbm ordinea n care sunt afiate sau chiar formatul de afiare.Selectarea coloanelor se va face n seciunea Columns a tag-ului GridView. Coloanele vor fi afiate n ordinea n care sunt scrise n aceast seciune. Coloanele pot avea tipuri diferite, pe lng cele de baz n care afieaz textul dintr-un cmp al unei coloane din tabel ( BoundField) gsindu-se coloane de tip:

202

tip afieaz un buton

descriere afieaz o caset de validare i se utilizeaz pentru cmpurile ce pot avea una dintre valorile True/False conine butoane pentru selecie sau editare afieaz coninutul ca hyperlink. afieaz imaginea dintr-un cmp 70 permite afiarea cmpurilor folosind abloane personalizate

Exemplul urmtor conine secvena ce definete coloanele controlului GridView asociate tabelei clase:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" > <Columns> <asp:BoundField DataField="idClasa" HeaderText="Clasa" /> <asp:BoundField DataField="profil" HeaderText="profil" /> <asp:BoundField DataField="specializare" HeaderText="specializare"/> <asp:BoundField DataField="intensiv" HeaderText="intensiv" /> <asp:BoundField DataField="nrOreClasa" HeaderText="nrOreClasa" /> </Columns> </asp:GridView>

Configurarea coloanelor Atunci cnd declarm explicit coloanele legate putem seta proprietile acestora : DataField numele cmpului ce va fi afiat n coloan DataFormatString indic modul de formatare a datelor de pe coloan FooterText/HeaderText/HeaderImageUrl-seteaz textul/imaginea din antet /subsol ReadOnly- permite/inhib modificarea coninutului coloanei n mod editare InsertVisible- permite/inhib inserarea valorilor n coloan Visible- permite/inhib afiarea coloanei SortExpression- permite ordonarea valorilor de pe aceast coloan NullDisplayText- afieaz un text n locul valorilor NULL de pe coloan ConvertEmptyStringToNull- convertete irurile vide de pe coloan la NULL ControlStyle, HeaderStyle, FooterStyle, and ItemStyle stabilete modul n care sunt afiate datele pe acea coloan

70

furnizorul trebuie s suporte formatul n care este memorat imaginea

INTERACIUNEA CU BAZE DE DATE WEB Generarea coloanelor n mod vizual

203

Dup adugarea controlului GridView pe pagin (n modul design) i legarea acestuia la sursa de date

alegem opiunea Edit Column i alegem cmpurile ce completeaz controlul. Pentru fiecare dintre cmpuri putem s modificm proprietile menionate anterior.

Opiunea AutoFormat permite selectarea formatului de afiare.

204

Coninutul grilei va fi afiat pe pagin conform formatului stabilit:

Un control de tip GridView permite selectarea unui rnd din tabel atunci cnd proprietatea ShowSelectButton a coloanei de tip CommandField este setat la True.
<asp:CommandField ShowSelectButton="True" />

Fiecare element de pe aceast coloan poate fi afiat ca legtur, ca buton sau ca imagine. n exemplul urmtor butoanele Select sunt afiate ca legturi.

Apsarea unui buton Select de pe pagin duce la producerea urmtoarelor evenimente:

GridView.SelectedIndexChanging - util atunci cnd dorim s anulm operaia proprietatea GridView.SelectedIndex este setat la indicele elementului selectat GridView.SelectedIndexChanged permite extragerea de informaii din rndul selectat. Pentru aceasta trebuie s selectm proprietatea DataKeyNames la numele cmpului dup care se face indexarea tabelei i se acceseaz datele.
< asp:GridView ID="GridView1" runat="server" DataKeyNames="idClasa" ... >

INTERACIUNEA CU BAZE DE DATE WEB

205

Pentru a putea terge sau modifica o nregistrare din tabela legat unui control GridView trebuie s definim comenzile de tegere i actualizare ca n exemplu:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [clase]" DeleteCommand="DELETE FROM [clase] WHERE idClasa=@idClasa" UpdateCommand="UPDATE clase SET profil=@profil, specializare=@specializare, intensiv=@intensiv WHERE idClasa=@idClasa"> </asp:SqlDataSource>

Pentru exemplificare,se modific valoarea din cmpul intensiv pentru clasa 9F.

i se terge clasa 9E.

206

Controlul GridView permite efectuarea operaiilor de paginare i ordonare atunci cnd sunt selectate aceste proprieti din GridViewTasks. Ordonarea este declanat prin simpla apsare a numelui 71 coloanei dup care vrem s sortm nregistrrile. n exemplul urmtor datele sunt ordonate mai nti dup profil i dup aceea dup specializare.

Numrul de nregistrri vizibile simultan este dat de proprietatea Page Size. n exemplul urmtor aceast proprietate a fost setat la 3.

71

numele coloanelor sunt subliniate

INTERACIUNEA CU BAZE DE DATE WEB

207

V.10.3. Controalele DetailsView i FormView


Controlul GridView permite afiarea mai multor nregistrri n acelai timp. Exist situaii n care este necesar afiarea unei singure nregistrri la un moment dat. Acest lucru poate fi realizat de controalele DetailsView i FormView, controale ce permit i operaii de inserare. Diferena dintre cele dou tipuri de controale este dat de faptul c Details View permite utilizarea abloanelor (machetelor) n timp ce FormView necesit utilizarea unui ablon de afiare i ofer o flexibilitate mai mare. O alt diferen este aceea c DetailsView afieaz coninutul unei tabele n timp ce FormView permite i afiarea coninutului nelegat la o tabel. Controlul DetailsView afieaz cte o nregistrare, fiecare cmp fiind afiat pe cte o linie n tabela de afiare. Ca i n cazul controlului GridView putem alege cmpurile care se afieaz, putem insera butoane pentru tergere i editare, i putem stabili formatul de afiare. Apsarea butonului New permite inserarea unei noi nregistrri n tabela surs.

Controlul DetailsView afieaz cte o singur nregistrare la un moment dat. Dac sursa de date are mai multe nregistrri atunci va fi vizibil doar prima. Acest lucru poate fi evitat dac se seteaz AllowPaging=true. n acest fel utilizatorul se poate deplasa de la o nregistrare la alta.

208 <asp:FormView ID="FormView1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1"> <ItemTemplate> <b>Clasa:</b> <%# Eval("idClasa") %><br /> <b>Profil:</b> <%# Eval("profil") %><br /> <b>Specializare:</b> <%# Eval("specializare") %><br /> </ItemTemplate> </asp:FormView>

V.10.4. Alte controale legate la date


V.10.4.1 Repeater

Controlul

creaz o structur grafic personalizat pentru afiarea

coninutului controlului prin repetarea unui ablon specificat pentru fiecare element din lista legat. Se definete cte un ablon ASP.NET pentru fiecare categorie de elemente: antet, subsol, separator, etc.) iar controlul l aplic repetat pe pagin. Controlul Repeater nu conine nicio formatare i stil. Pentru fiecare ablon definit, codul ASP.NET este evaluat dinamic n timpul executrii metodei DataBind. n exemplul urmtor se definete un control Repeater care afieaz nregistrrile tabelei clase.
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">

structur grafic

implicit, deci trebuiesc declarate explicit toate etichetele de

INTERACIUNEA CU BAZE DE DATE WEB

209

ablonul Header este procesat o singur dat i iniiaz grafic tabela i titlul.
<HeaderTemplate> <table style ="border:1px solid black;"class="stdtext"> <thead bgcolor="#ff6666" style:white"> <td><b> Clasa </b></td> <td><b> Profil </b></td> <td><b> Specializare </b></td> </thead> </HeaderTemplate>

Controlul permite afiarea elementelor/elementelor alternante cu setri grafice diferite .


<ItemTemplate> <tr> <td bgcolor="#ffcc99"> <b><%# DataBinder.Eval(Container.DataItem,"idClasa") %></b></td> <td bgcolor="#ffcc99"> <%#DataBinder.Eval(Container.DataItem,"profil")%></td> <td bgcolor="#ffcc99"> <%#DataBinder.Eval(Container.DataItem,"specializare") %> </td> </tr> </ItemTemplate> <AlternatingItemTemplate> <tr> <td bgcolor="#ffffcc"> <b><%# DataBinder.Eval(Container.DataItem,"idClasa") %></b></td> <td bgcolor="#ffffcc"> <%# DataBinder.Eval(Container.DataItem,"profil") %> </td> <td bgcolor="#ffffcc"> <%# DataBinder.Eval(Container.DataItem,"specializare") %> </td> </tr> </AlternatingItemTemplate>

ablonul Footer este afiat, ca i ablonul Header, o singur dat. Acest ablon definete rndul final.
<FooterTemplate> <tfoot> <td bgcolor="#ffcc66" colspan="3"><%# " Clase" %></td> </tfoot> </table> </FooterTemplate>

V.10.4.2 DataList

Controlul

afieaz coninutul unei liste legate la date prin intermediul

abloanelor ASP.NET. Acest control permite operaii de editare i selectare. Aspectul

210

controlului poate fi personalizat prin setarea de proprieti stil pentru diferite pri ale controlului. Controlul DataList prezint structuri grafice predefinite, posibiliti avansate de formatare i suport pentru selectare i editare. Operaiile fundamentale de legare la date care folosesc DataList sunt similare celor care folosesc Repeater. Se folosete proprietatea DataSource pentru a lega controlul la date i metoda DataBind pentru a actualiza interfaa utilizator. Contolul DataList suport dou abloane speciale SelectedItemTemplate i EditItemTemplate.

SelectedItemTemplate

controleaz

cum

este

afiat

elementul

selectat

iar

EditItemTemplate specific ablonul grafic pentru rndul editat. Controlul DataList ofer suport special pentru comenzile predefinite:edit, update, delete, cancel i select. Evenimentele predefinite asociate (EditCommand, UpdateCommand, corespunztoare. DeleteCommand, CancelCommand, SelectedIdexChanged)

controlului DataList se declaneaz atunci cnd

trebuie s se execute comanda

V.10.4.3 DropDownList

Controlul selectat.

permite utilizatorului s aleag un element dintr-o list

derulant. Proprietile SelectedIndex i SelectedItem ofer detalii despre elementul Legarea la date se realizeaz prin utilizarea proprietilor: DataSource, DataMember, DataTextField, DataValueField i DataTextFormatString.

INTERACIUNEA CU BAZE DE DATE WEB n exemplul urmtor elementele listei derulante sunt preluate din tabela clase.

211

<asp:DropDownList ID="DropDownList1" runat="server" DataMember="DefaultView" DataSourceID="SqlDataSource1" DataTextField="idClasa" DataValueField="idClasa"> </asp:DropDownList>

Valorile pentru DataTextField i DataValueField trebuie s corespund numelui unui cmp din sursa de date. Dac dorim ca o list derulant s afieze informaii din mai multe cmpuri atunci putem cere ca SQL Server s ntoarc o coloan cu formatul dorit i atribuim numele cmpului precalculat proprietii DataTextField. De exemplu, dac dorim ca lista derulant s afieze numele clasei i profilul facem atribuirea selecia
SELECT idClasa+ + profil AS CP FROM clase; DataTextField= "CP" i

V.10.4.4 CheckBoxList

Controlul

poate fi privit ca un control printe pentru un set de

elemente din list care pot fi bifate, fiecare fiind redat printr-un control CheckBox individual. O list de casete de validare se insereaz astfel:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="idClasa" DataValueField="idClasa"> </asp:CheckBoxList>

Legarea

la

date

se

realizeaz

prin

utilizarea

proprietilor:

DataSource,

DataMember, DataTextField, DataValueField i DataTextFormatString. Spre deosebire de controlul DropDownList, controlul CheckBoxList nu are proprieti care furnizeaz direct informaii despre elementele selectate.

212

La un moment dat , un control CheckBoxList poate avea unul sau mai multe elemente selectate. Toate Items este controalele list au prin o proprietate intermediul Items clasei (elemente) care conine setul de elemente fii. Proprietatea implementat ListItemCollection, iar fiecare element din list pote fi accesat printr-un obiect ListItem. In exemplul urmtor se construiete un ir cu etichetele elementelor selectate.
StringBuilder s = new StringBuilder(""); foreach (ListItem x in CheckBoxList1.Items) { if (x.Selected) { s.Append(x.Text); s.Append(" "); } }

V.10.4.5 RadioButtonList

Controlul

gestioneaz o colecie de elemente de list de tip butoane

radio, redate prin intermediul unor controale de tip RadioButton. Un control RadioButtonList poate avea ori un singur element selectat, ori nici unul. Proprietatea SelectedItem ntoarce elementul selectat ca obiect ListItem. Coninutul unui control RadioButtonList, obinut dintr-o surs de date, poate fi setat astfel:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" DataSourceID="SqlDataSource1" DataTextField="idClasa" DataValueField="idClasa"> </asp:RadioButtonList>

Legarea proprietile:

la

date

se

realizeaz

prin

utilizarea

DataSource,

DataMember,

DataTextField,

DataValueField i DataTextFormatString. Aceste proprieti se comport n acelai mod ca proprietile controalelor descrise anterior.

INTERACIUNEA CU BAZE DE DATE WEB

213

V.10.5.

Evaluare

1) Pentru toate cerinele de mai jos se consider urmtorul scenariu: Administratorul unei firme trebuie s in o eviden a departamentelor firmei i a angajailor care lucreaz n aceste departamente. Un angajat nu poate lucra n acelai timp la mai multe departamente.n timp, un angajat poate fi mutat de la un departament la altul. Fiecare departament are un ef . a) contruii un model conceptual care s corespund cadrului prezentat i s conin cel puin dou tabele : angajati, departamente. b) adugai nregistrri n tabele folosind modul vizual c) generai diagrama corespunztoare modelului conceptual ales d) proiectai o pagin Web care s v permit efectuarea urmtoarelor operaii (pentru fiecare operaie se utilizeaz controler-ul indicat) d.1 d.2 d.3 d.4 d.5 d.6 d.7 d.8 d.9 afiarea angajailor din firm (GridView) afiarea departamentelor din firm (DetailsView) afiarea angajailor dintr-un departament (FormView) afiarea efilor de departament (Repeater) afiarea informaiilor referitoare la unul dintre angajai (DataList) tergerea unui angajat din baza de date (DataList) mutarea unui angajat de la un departament la altul (DropDownList) tergerea unui departament din baza de date (implicit a angajailor care lucreaz n acest departament) (RadioButtonList) adugarea unui angajat (GridView) numrului de angajai din mai multe departamente d.10 adugarea unui departament (DetailsView) d.11 afiarea (CheckBoxList) 2) Construii o pagin Web care s permit gestiunea unui depozit de materiale, tiind c : au loc operaii de vnzare i aprovizionare, se pot vizualiza informaii referitoare la stocul de materiale, persoanele care cumpr din depozit sunt persoane fizice sau juridice. 3) Construii o pagin Web care s permit vnzarea de bilete on-line la diferite spectacole. 4) Realizai o aplicaie care s implementeze activiatea desfurat la o grdin zoologic (evidena animalelor, angajailor, etc) 5) Realizai o aplicaie care s reprezinte site-ul unui muzeu virtual.

214

VI. Securitatea aplicaiilor ASP.NET


Pentru o aplicaie securizat, avem mai multe posibiliti de autentificare, cele mai des ntlnite fiind sintetizate n tabelul urmtor. Implementarea politicii de securitate se poate face att din IIS ct i din aplicaia ASP.NET. Tipul aplicatiei Aplicatie web publica pe Internet. Aplicatie web pentru Intranet. Modul de autentificare Anonim Windows Integrated Descriere Nu avem nevoie de securizare. Acest mod autentifica utilizatorii folosind lista de useri de pe server (Domain Controller). Drepturile userilor in aplicatia web este dat de nivelul de privilegii al contului respectiv. Utilizatorii companiei pot accesa aplicatia din afara Intranetului, folosind conturi din lista serverului (Domain Controller). Aplicatii care au nevoie de informatii confidentiale si eventual in care sunt mai multe tipuri de utilizatori.

Aplicatie web disponibila pe Internet, dar cu acces privat. Aplicatii comerciale. web

Windows Integrated

Forms Authentication

VI.1.Windows Authentication
n acest mod de autentificare, aplicaia ASP .NET are ncorporate procedurile de autentificare, dar se bazeaz pe sistemul de operare Windows pentru autentificarea utilizatorului. 1. Utilizatorul solicit o pagin securizat de la aplicaia Web. 2. Cererea ajunge la Serverul Web IIS care compar datele de autentificare ale utilizatorului cu cele ale aplicaiei (sau ale domeniului) 3. Dac acestea dou nu corespund, IIS refuz cererea utilizatorului. 4. Calculatorul clientului genereaz o fereastr de autentificare, 5. Clientul introduce datele de autentificare, dup care retrimite cererea ctre IIS 6. IIS verific datele de autentificare, si n cazul n care sunt corecte, direcioneaz cererea ctre aplicaia Web. 7. Pagina securizat este returnat utilizatorului.

Securitatea aplicaiilor ASP.NET

215

VI.2.Forms-Based Authentication
Atunci cnd se utilizeaz autentificarea bazat pe formulare, IIS nu realizeaz autentificarea, deci este necesar ca n setrile acestuia s fie permis accesul anonim. 1. n momentul n care un utilizator solicit o pagin securizat, IIS autentific clientul ca fiind un utilizator anonim, dup care trimite cererea ctre ASP.NET. 2. Acesta verific pe calculatorul clientului prezena unui anumit cookie1 3. Dac cookie-ul nu este prezent sau este invalid, ASP.NET refuz cererea clientului si returneaz o pagin de autentificare (Login.aspx). 4. Clientul completeaz informaiile cerute n pagina de autentificare si apoi trimite informaiile. 5. Din nou, IIS autentific clientul ca fiind un utilizator anonim si trimite cererea ctre ASP .NET 6. ASP.NET autentific clientul pe baza informaiilor furnizate. De asemenea genereaz si un cookie. Cookie reprezint un mic fisier text ce pstreaz diverse informaii despre utilizatorul respectiv, informaii folosite la urmtoarea vizit a sa pe site-ul respectiv, la autentificare, sau n diverse alte scopuri. 7. Pagina securizat cerut si noul cookie sunt returnate clientului. Atta timp ct acest cookie rmne valid, clientul poate solicita si vizualiza orice pagin securizat ce utilizeaz aceleasi informaii de autentificare.

VI.3.Securizarea din aplicaia web


Securizarea unei aplicaii web presupune realizarea a dou obiective:(1) autentificarea i (2) autorizarea. 1. Autentificarea presupune introducerea de ctre utilizator a unor credeniale, de exemplu nume de utilizator i parol, iar apoi verificarea n sistem c acestea exist si sunt valide. 2. Autorizarea este procesul prin care un utilizator autentificat primete acces pe anumite resurse, numai pe resursele pe care are dreptul s le acceseze. Aceste obiective pot fi atinse foarte u or utiliznd func ionalit ile i uneltele din

ASP.NET respectiv Visual Studio, anume clasa Membership si unealta ASP.NET Configuration (din meniul Website al Visual Studio Web Developer Express). Configurarea autentificarii si autorizarii se poate realiza dupa cum se vede in acest tutorial: http://msdn2.microsoft.com/en-us/library/879kf95c(VS.80).aspx .

216

VII.

Proiectarea i realizarea unei aplicaii Web


Proiectarea interfeei Proiectarea bazei de date Realizarea logicii aplicaiei (aa numitul business logic)

Pentru realizarea unui site web dinamic, trebuie parcurse urmtoarele etape:

n continuare vom prezenta, pas cu pas, realizarea unui site web dinamic care ofer informaii despre filme.

Figura 7-1 Interfaa site-ului web dinamic

VII.1.

Realizarea interfeei

ASP.NET pune la dispoziia programatorului cteva unelte puternice pentru dezvoltarea interfeei unui site web: 1. MasterPages 2. Foi de stil (StyleSheets)

VII.1.1.

MasterPages

Pentru a obine un aspect unitar al site-ului, se folosete o pagin special numit MasterPage. Aceasta este o machet pe baza creia vor fi realizate toate paginile din site-ul web. n afara coninutului motenit din MasterPage, fiecare pagin .aspx va avea i un coninut propriu.

Proiectarea i realizarea unei aplicaii Web

217

Pentru a aduga o pagin MasterPage, din meniul Website se alege opiunea Add New Item, i apoi MasterPage:

Figura 7.2 Adugarea unei pagini MasterPage

MasterPage conine o zon numit ContentPlaceHolder unde va fi inserat coninutul paginilor .aspx construite pe baza acestui template.

Figura 7.3 Zona ContentPlaceHolder va reine coninutul fiecrei pagini .aspx

Codul asp asociat este:


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Pagina de Index</title> <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Acest text va fi afisat pe orice pagina"> </asp:Label> </div> </form> </body> </html>

La adugarea n proiect a unei noi pagini .aspx, se poate selecta pagina MasterPage care conine layout-ul dorit pentru site-ul web.

218

Figura 7.4 La adugarea unei noi pagini .aspx se bifeaz opiunea Select master page

Figura 7.5 Selectarea MasterPage pentru pagina web nou adugat

Pagina .aspx adugat are urmtoarea structur:


<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <p> Acesta este continutul paginii adaugate </p> </asp:Content>

n zona de directive a aprut o nou clauz care specific numele fiierului MasterPage: MasterPageFile ="~/MasterPage.master". Fiecare pagin aspx va avea un control de tip Content, al crui id va avea aceeai valoare cu cel din MasterPage:

Proiectarea i realizarea unei aplicaii Web

219

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <!Continutul paginii .aspx --> </asp:Content>

Figura 7.6 Pagina .aspx construit pe baza unei MasterPage

n cazul proiectului nostru, fiierul MasterPage va avea urmtorul design:

Figura 7.7 MasterPage n modul design

Pe lng fiierul MasterPage.master, vom aduga urmtoarele pagini .aspx: Home.aspx prima pagin a site-ului, care va conine un mesaj de ntmpinare. Movie.aspx va afia o list cu toate filmele din baza de date, sau anumite filme conform unui criteriu de filtrare. Detalii.aspx permite utilizatorului modificarea informaiilor despre un film selectat. AdaugFilm.aspx permite utilizatorului adugarea unui nou film n baza de date. Upload.aspx este un formular de upload a unui fiier imagine, ce reprezint posterul unui film. Contact.aspx este un formular de contact, ce permite trimiterea unui e-mail cu datele introduse n formular.

220

Layout-ului paginii MasterPage poate fi realizat prin intermediul tabelelor sau prin intermediul tag-urilor html <div> formatate prin declaraii css. n exemplul de mai sus, pentru definirea layout-ului s-au folosit tag-uri <div>: Zona de header:

Figura 7.8 Div-ul care conine zona de header a paginii

Header-ul are la rndul su dou seciuni: Seciunea de logo

Figura 7.9 Div-ul care conine seciunea de logo a header-ului

Seciunea pentru banner

Figura 7.10 Div-ul care conine seciunea pentru banner a header-ului

Zona pentru coninutul paginii:

Figura 7.11 Div-ul pentru coninutul paginii

Pagina este format la rndul ei din: a) Coloana din stnga, ce conine dou casete cu informaii

Proiectarea i realizarea unei aplicaii Web

221

Figura 7.12 Div-ul pentru coloana din stnga paginii

Coloana este format din dou casete de informaii, fiecare fiind definit de un div.

Figura 7.13 Div-ul pentru casetele din stnga paginii

b) Zona de coninut a paginii, care cuprinde i controlul ContentPlaceHolder

Figura 7.14 Div-ul pentru coninutul paginii

Zona de subsol a paginii web:

Figura 7.15 Div-ul pentru zona de subsol a paginii

Codul pentru definirea layout-ului din fiierul MasterPage.master este urmtorul:

222 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <title>Movie Info</title> <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div id="header"> <div id="logo"></div> <div id = "banner"> </div> </div> <div id="page"> <div id="content"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div id="sidebar"> <div class="boxed"> <h2 class="title">Top Incasari</h2> <div class="content"></div> </div> <div class="boxed"> <h2 class="title">In curand</h2> <div class="content"></div> </div> </div> </div> <div id="footer"></div> </form> </body> </html>

VII.1.2.

Foi de stiluri

Pentru a aduga un fiier css n cadrul site-ului web, se alege opiunea Add New Item i apoi Style Sheet:

Figura 7.16 Adugarea unui fiier ce conine declaraii css

Proiectarea i realizarea unei aplicaii Web

223

Formatarea tag-urilor html din paginile .aspx va fi realizat prin adugarea n seciunea head din MasterPage a liniei
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

Observaie: Acest lucru se poate realiza i prin drag and drop a fiierului StyleSheet.css (din fereastra Solution Explorer) n seciunea de head a fiierului MasterPage.master. Visual Web Developer pune la dispoziie un editor css foarte puternic. Avnd deschis fiierul StyleSheet.css putei avea acces la opiunile Add Style Rule, respectiv Build Style.

Figura 7.17 Opiunile din meniul Styles pentru construirea foilor de stil

Cu ajutorul opiunii Add Style Rule putei defini o nou regul de stil, o nou clas sau o regul de formatare pentru un tag html identificat printr-un id.

Figura 7.18 Definirea unei reguli de stil

Odat definit o declaraie css, putei stabili formatrile prin intermediul opiunii Build Style.

Figura 7.19 Definirea stilurilor de formatare

224

Pentru proiectul nostru, fiierul StyleSheet.css are urmtorul coninut:


body{margin: 20px 0 0 0;padding: 0; font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; background-color: #C0C0C0;} h3 {margin: 0; font-weight: normal; color: #AD1112;} p {font-weight:bold; color: #AD1112;} a {color: #AD1112;} a:hover {text-decoration: none;} .textBox { text-align: right;background-color:#FFFFCC;border:1.5px solid #000000;} .button {background-color: #990000; font-weight: bold; color: #FFFFFF;} /* Header */ #header {width: 700px; height: 98px; margin: 0 auto;} /* Logo */ #logo {float: left;width: 225px;height: 98px;} /* Meniu */ .menu {float: right; width: 472px; height: 1px; background: url(images/img05.jpg) repeat-x;border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } .menu a{color: White;} /* Pagina */ #page {width: 700px; margin: 0 auto; } /* Continutul paginii */ #content { border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; float: right; width: 430px; padding: 20px; background: #a3a3a3;} /* Coloana din stnga */ #sidebar {float: left;width: 220px;padding-top: 2px;} #sidebar a {color: #3699E4;} #sidebar ul {margin-left: 0;padding-left: 0;list-style: none;font-size: 92%;} #sidebar ul li {padding: 5px 14px; background: url(images/img13.gif) no-repeat 0px 12px;border-top: 1px solid #0B0B0B;color: #3699E4;} #sidebar ul li h2 {margin: 0; font-size: 100%;} #sidebar ul li h3 {margin: 0; font-size: 92%;} #sidebar ul li p {margin: 0;} .boxed {margin-bottom: 10px; background: #000000 url(images/img03.jpg) no-repeat left bottom;} .boxed .title { height: 30px; margin: 0; padding: 10px 0 0 10px; background: #5EB2ED url(images/img02.jpg) no-repeat;font-size: 16px; font-weight: bold; color: #FFFFFF;} .boxed .content { padding: 15px; background: url(images/img09.gif) repeat-x;} /* Footer */ #footer{ text-align: center; width: 700px; height: 70px; margin: 0 auto; border: 1px solid #FFFFFF; margin-top: 5px; font-weight: bold;} #footer p { margin: 0;line-height: normal; font-size: 85%; color: #000000;fontweight: bold;} #footer a {color: #000000;font-weight: bold;}

Imaginile folosite ca fundal pentru diferitele seciuni, precum i alte imagini folosite n site, au fost adugate n prealabil n cadrul proiectului, ntr-un director images.

Figura 7.20 Directorul images din cadrul site-ului web

Proiectarea i realizarea unei aplicaii Web

225

Pentru un control server web putei folosi proprietatea CssClass pentru a-i asocia o clas css definit n fiierul StyleSheet.css. De exemplu, controlul Menu1 din MasterPage are asociat clasa css menu.

Figura 7.21 Adugarea unei clase css pentru un control web

VII.1.3.

Controalele web server din MasterPage

Pentru a finaliza layout-ul paginii master, vom aduga urmtoarele controale web server: Pentru seciunea de logo, un obiect hyperlink.
<div id="logo"> <asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/images/logo1.gif" NavigateUrl="~/Home.aspx">Movie Info </asp:HyperLink> </div>

n seciunea de banner vom folosi un control de tip AdRotator, care va afia bannere de filme. Controlul AdRotator va fi conectat la o surs de date. De asemenea, pentru navigarea ntre paginile site-ului, vom utiliza un control de tip Menu.
<div id="header"> <div id="logo"> <asp:HyperLink ID="HyperLink5"runat="server"ImageUrl="~/images/logo1.gif" NavigateUrl="~/Home.aspx"> Movie Info </asp:HyperLink> </div> <div id = "banner"> <asp:AdRotator ID="AdRotator1" runat="server" Height="75px" Target="_blank" Width="474px" /> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="menu"> <StaticMenuStyle VerticalPadding="0px" /> <StaticMenuItemStyle Font-Bold="True" BorderColor="White" BorderStyle="Solid" BorderWidth="1px" HorizontalPadding="5px" /> <StaticHoverStyle BackColor="#990000" ForeColor="Blue" /> <Items> <asp:MenuItem Text="Home" Value="Home"NavigateUrl="~/Home.aspx"> </asp:MenuItem> <asp:MenuItem Text="Filme" Value="Filme" NavigateUrl="~/Movie.aspx"> </asp:MenuItem>

226 <asp:MenuItem Text="Contact"Value="Contact"NavigateUrl="~/Contact.aspx"> </asp:MenuItem> </Items> </asp:Menu> </div> </div>

Prima caset de informaii va afia primele 5 filme n ordinea descresctoare a ncasrilor. A doua caset de informaii va conine primele 5 filme care urmeaz s apar, n ordinea cresctoare a datei. Informaiile din ambele casete sunt afiate prin intermediul unor controale de tip BulletedList, conectate la o surs de date.
<div id="page"> <div id="content"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div id="sidebar"> <div class="boxed"><h2 class="title">Top Incasari</h2> <div class="content"> <asp:BulletedList ID="BulletedList1" runat="server"DisplayMode="LinkButton" DataValueField="id" onclick="BulletedList1_Click" Target="_parent"> </asp:BulletedList> </div> </div> <div class="boxed"><h2 class="title">In curand</h2> <div class="content"> <asp:BulletedList ID="BulletedList2" runat="server"DisplayMode="LinkButton" onclick="BulletedList2_Click"> </asp:BulletedList> </div> </div> </div> </div>

n zona de subsol a paginii vom folosi controale Hyperlink:


<div id="footer"> <p>&nbsp;</p> <p>&copy; 2008 <asp:HyperLink ID="HyperLink6" runat="server" Font-Bold="True" NavigateUrl="http://www.microsoft.com/romania/educatie/cursnet/default.mspx" Target="_blank">Microsoft Romania</asp:HyperLink> </p> <p id="links"> <asp:HyperLink ID="HyperLink1" runat="server"NavigateUrl="~/Home.aspx">Home </asp:HyperLink> &nbsp;| <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Movie.aspx">Filme </asp:HyperLink> &nbsp;| <asp:HyperLink ID="HyperLink4" runat="server"NavigateUrl="~/Contact.aspx">Contact </asp:HyperLink> </p> </div>

Proiectarea i realizarea unei aplicaii Web

227

Proiectarea bazei de date Pentru a aduga o baz de date n cadrul site-ului web, n fereastra Solution Explorer apsai click dreapta pe directorul App_Data i apoi alegei opiunea Add New Item. n noua fereastr selectai Sql Server Database. Noua baz de date va fi denumit filme.mdf.

Figura 7.22 Adugarea unei baze de date sql server n cadrul site-ului web

Pentru a pstra simplitatea site-ului web, informaiile despre filme le vom reine ntr-o singur tabel, dei aceasta nu se gsete n forma normal 3. Structura tabelei film este urmtoarea:

Figura 7.23 Structura bazei de date film

Cmpul id este cheie primar. Ca i n Access, MySql sau Oracle, i n Sql Server putei defini un cmp pentru care valorile se autoincrementeaz. Pentru aceasta, trebuie setat proprietatea Is Identity cu valoarea yes.

228

Figura 7.24 Setarea proprietii Is Identity

n baza de date filme vom mai aduga o nou tabel numit ads, care va constitui sursa de date pentru controlul AdRotator din MasterPage. Aceast tabel trebuie s aib structura:

Figura 7.25 Structura tabelei ads

De asemenea, pentru cmpul id trebuie setat cu valoarea yes proprietatea Is Identity. Cmpul ImageUrl va conine calea ctre fiierul ce conine imaginea afiat n controlul AdRotator. n cadrul proiectului a fost creat directorul banners n directorul images, aici fiind salvate fiierele imagine.

Figura 7.26 Fiierele imagine pentru controlul AdRotator.

Proiectarea i realizarea unei aplicaii Web

229

n tabela ads sunt inserate urmtoarele nregistrri:

Figura 7.27 Datele din tabela ads

VII.1.4. Conectarea la sursa de date a controalelor din MasterPage


Pentru controlul AdRotator selectm ca surs de date o baza de date Sql Server.

Figura 7.28 Alegerea tipului sursei de date pentru controlul AdRotator

La pasul urmtor, alegem opiunea New Connection, i selectm baza de date filme.

230 Figura 7.29 Selectarea bazei de date filme ca surs de date

La pasul urmtor salvm connection string pentru a-l putea reutiliza i la celelalte surse de date. Acest ir de caractere va fi salvat n fiierul web.config.

Figura 7.30 Salvarea Connection String

Pentru controlul AdRotator avem nevoie de toate nregistrrile din tabel, deci vom folosi interogarea: SELECT * FROM ads

Figura 7.31 Selectarea tuturor nregistrrilor din tabela ads

Pentru a modifica interogarea sql, putei alege opiunea Configure Data Source a controlului SqlDataSource generat.

Figura 7.32 Modificarea proprietilor controlului SqlDataSource

Proiectarea i realizarea unei aplicaii Web

231

Pentru caseta de informaii Top ncasri parcurgem aceeai pai. La pasul doi putem folosi connection string ul generat anterior. Interogarea pentru extragerea interogrilor este: SELECT TOP (5) nume, id FROM film WHERE (data_aparitie < GETDATE()) ORDER BY incasari DESC Sunt selectate primele 5 filme care au aprut naintea datei curente, n ordinea descresctoare a ncasrilor.

Figura 7.33 Interogarea Sql folosit pentru caseta de informaii Top ncasri

Cmpul nume va fi folosit pentru afiarea n controlul BulletedList, iar cmpul id va corespunde atributului value al controlului.

Figura 7.34 Selectarea cmpurilor nume i id pentru controlul BulletedList

232

Caseta de informaii n curnd trebuie s afieze primele 5 filme care au data apariiei mai mare dect data curent. Pentru clauza Where putem utiliza funcia GETDATE() care returneaz data curent, la fel ca n cazul casetei Top ncasri. Pentru a exemplifica ns diversele posibiliti de construcie a interogrilor, vom folosi o alt abordare. Interogarea de extragere a filmelor cu data apariiei mai mare ca data curent, va avea un parametru. SELECT TOP 5 nume, id FROM film WHERE (data_aparitie > @dataAparitie) ORDER BY data_aparitie Numele parametrului este precedat de caracterul @.

Figura 7.35 Interogarea parametrizat pentru selectarea filmelor cu data apariiei mai mare ca data trimis ca parametru.

La urmtorul pas vom selecta sursa de unde va fi preluat valoarea parametrului.

Figura 7.36 Parametrul interogrii va fi preluat din sesiune, cmpul numit data

Proiectarea i realizarea unei aplicaii Web Valorile posibile pentru sursa parametrului sunt: Cookie Control (un alt control web din pagin, de exemplu un control textBox) Form Profile QueryString Session

233

Fiierul MasterPage.master.cs conine codul C# asociat paginii master. Pentru a reine n sesiune data curent, folosim evenimentul Page_Load:
protected void Page_Load(object sender, EventArgs e) { Session["data"] = DateTime.Now; }

Pentru controalele BulletedList din cele dou casete de informaii, proprietatea DisplayMode are valoarea LinkButton. Dorim ca n momentul n care vizitatorul selecteaz un film din list sa-l redirectm la pagina Movie.aspx, unde vor fi afiate informaii despre film. Pentru aceasta vom trimite prin QueryString id-ul filmului selectat.
protected void BulletedList1_Click(object sender, BulletedListEventArgs e) { string x = BulletedList1.Items[e.Index].Value; Response.Redirect("movie.aspx?id=" + x); } protected void BulletedList2_Click(object sender, BulletedListEventArgs e) { string x = BulletedList2.Items[e.Index].Value; Response.Redirect("movie.aspx?id=" + x); }

VII.2.

Home.aspx
cea mai simpl ca structur.

Pagina Home.aspx prima pagin a proiectului i Coninnd un mesaj de ntmpinare a utilizatorului.

Figura 7.37 Pagina Home.aspx n modul design

234

Codul asp al paginii este:


<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" Title="Movie Info" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h3>Bine ati venit pe site-ul nostru</h3> <p>Aici puteti gasi cele mai bune informatii despre filmele care va intereseaza</p> </asp:Content>

VII.3.

Movie.aspx

n aceast pagin sunt afiate filmele din baza de date i se poate realiza filtrarea acestora dup anumite criterii.

Figura 7.38 Pagina Movie.aspx n modul design

Afiarea filmelor se realizeaz prin intermediul unui control GridView.


<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="id" DataSourceID="ObjectDataSource1" GridLines="None" ForeColor="#333333" Width="424px">

Proiectarea i realizarea unei aplicaii Web

235

<FooterStyle BackColor="#990000" ForeColor="White" Font-Bold="True" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <Columns> <asp:BoundField DataField="nume" HeaderText="Denumirea" SortExpression="nume" /> <asp:BoundField DataField="regizor" HeaderText="Regizorul" SortExpression="regizor" /> <asp:BoundField DataField="data_aparitie" HeaderText="Data aparitiei" SortExpression="data_aparitie"></asp:BoundField> <asp:BoundField DataField="incasari" HeaderText="Incasari" SortExpression="incasari" /> <asp:HyperLinkField DataNavigateUrlFields="id" DataNavigateUrlFormatString="Detalii.aspx?id={0}" Text="Detalii" /> <asp:CommandField ButtonType="Image" DeleteImageUrl="~/images/delete.png" ShowDeleteButton="True" /> </Columns> <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView>

Sursa de date din GridView va fi un obiect DataSet. Adugarea unui obiect DataSet se poate realiza prin intermediul opiunii Add New Item.

Figura 7.39 Adugarea unui obiect DataSet

La crearea obiectului DataSet, n cadrul proiectului este adugat un director nou, numit App_Code.

Figura 7.40 Directorul App_Code

236

Obiectul DataSet poate conine unul sau mai multe obiecte TableAdapter. Fiecare TableAdapter poate avea mai multe interogri care populeaz obiectul DataSet. Cea mai simpl metod pentru a aduga un obiect TableAdapter pentru o tabel, este cu drag & drop din fereastra Database Explorer n fereastra DataSet. n cazul proiectului nostru, a fost creat un obiect TableAdapter corespunztor tabelei film.

Figura 7.41 Adugarea unui obiect TableAdapter prin Drag&Drop din fereastra Database Explorer

Implicit este creat metoda FillAll, care returneaz toate nregistrrile din tabel. Pentru a vedea rezultatul interogrii, se poate alege opiunea Preview Data. Adugarea unei noi interogri este realizat cu ajutorul opiunii Add Query, iar modificarea unei interogri existente cu ajutorul opiunii Configure.

Figura 7.42 Opiuni pentru prelucrarea interogrilor dintr-un obiect TableAdapter

Pentru legarea controlului GridView la sursa de date reprezentat de obiectul DataSet, se alege opiunea Object la definirea tipului sursei de date.

Proiectarea i realizarea unei aplicaii Web

237

Figura 7.43 Tipul sursei de date pentru controlul GridView este Object

La urmtorul pas se alege obiectul TableAdapter dorit din DataSet.

Figura 7.44 Selectarea obiectului TableAdapter

La ultimul pas se alege interogarea pentru popularea controlului GridView.

Figura 7.45 Selectarea metodei folosite pentru popularea obiectului DataSet

238

n lista de cmpuri a controlului GridView, vom aduga un cmp de tip Hyperlink, numit Detalii. La selectarea acestui link pentru un anumit film, vom redirecta utilizatorul ctre pagina Detalii.aspx, trimind prin QueryString id-ul filmului selectat. Pentru aceasta, proprietatea DataNavigateUrlFields a cmpului va avea valoarea id, iar proprietatea DataNavigateUrlFormatString va avea valoarea Detalii.aspx?id={0}. Parametrul dintre acolade va fi nlocuit automat cu valoarea id-ului filmului selectat.

Figura 7.46 Modificarea proprietilor cmpului HyperLink Detalii

Filtrarea datelor din controlul GridView se realizeaz prin intermediul criteriilor definite de controalele de tip RadioButton. Exist 3 modaliti de filtrare: dup categoria filmului, dup numele acestuia sau afiarea tuturor filmelor. Categoria filmului cutat poate fi selectat printr-un control DropDownList.
<asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" BorderWidth="1px"> <asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="White" Text="Filtrare dupa:"></asp:Label><br /> <table> <tr> <td> <asp:RadioButton ID="RadioButton1" runat="server" AutoPostBack="True" Font-Bold="True" ForeColor="White" GroupName="filtru" oncheckedchanged = "RadioButton1_CheckedChanged" Text="Categorie" /> </td> <td> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" CssClass="textBox" Enabled="False" onselectedindexchanged="DropDownList1_SelectedIndexChanged" TabIndex="6" Width="131px">

Proiectarea i realizarea unei aplicaii Web

239

<asp:ListItem>S.F.</asp:ListItem> <asp:ListItem>Romance</asp:ListItem> <asp:ListItem>Drama</asp:ListItem> <asp:ListItem>Razboi</asp:ListItem> <asp:ListItem>Actiune</asp:ListItem> <asp:ListItem>Aventura</asp:ListItem> <asp:ListItem>Desene animate</asp:ListItem> </asp:DropDownList> </tr> </td> <tr> <td class="style2"> <asp:RadioButton ID="RadioButton2" runat="server" AutoPostBack="True" Font-Bold="True" ForeColor="White" GroupName="filtru" oncheckedchanged = "RadioButton2_CheckedChanged" Text="Nume" /> </td> <td> <asp:TextBox ID="TextBox1" runat="server" CssClass="textBox" Enabled="False" Width="130px" AutoPostBack="True" ontextchanged="TextBox1_TextChanged"></asp:TextBox> </td> </tr> <tr> <td class="style2"> <asp:RadioButton ID="RadioButton3" runat="server" AutoPostBack="True" Checked="True" Font-Bold="True" ForeColor="White" GroupName="filtru" Text="Toate" oncheckedchanged = "RadioButton3_CheckedChanged" /> </td> <td>&nbsp;</td> </tr> </table> </asp:Panel>

Pentru a putea filtra datele din GridView, vom adauga obiectului TableAdapter 3 metode, ce conin interogri sql parametrizate. Metodele se vor numi GetDataById(), GetDataByCategory(), GetDataByName().

Figura 7.47 Pentru extragerea datelor se folosete o nou interogare

240

Figura 7.48 Alegerea tipului interogrii

Figura 7.49 Construirea interogrii

Interogarea va returna acea nregistrare din tabela film, care are valoarea cmpului id egal cu valoarea trimis ca parametru: SELECT actori, categoria, data_aparitie, id, incasari, nume, poza, regizor FROM film WHERE (id = @id) La ultimul pas vom alege numele motodei.

Figura 7.50 Introducerea denumirii metodei

Proiectarea i realizarea unei aplicaii Web

241

Pentru metoda GetDataByCategory() interogarea sql este: SELECT id, nume, data_aparitie, incasari, regizor, actori, poza, categoria FROM film WHERE (categoria = @categoria) Interogarea coninut de metoda GetDataByName() este: SELECT id, nume, data_aparitie, incasari, regizor, actori, poza, categoria FROM film WHERE (nume LIKE '%' + @nume + '%') Metoda GetDataById() va fi apelat atunci cnd utilizatorul ajunge n pagina movie.aspx din casetele de informaii Top ncasri, respectiv n curnd din MasterPage. Cnd utilizatorul selecteaz un film n caseta de informaii, se realizeaz un redirect ctre pagina movie.aspx, id-ul filmului selectat fiind trimis folosind QueryString. n pagina movie.aspx evenimentul Page_Load vom prelua acest id i om apela modifica interogarea folosit pentru popularea controlului GridView:
protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["id"] != null) { string id = Request.QueryString["id"]; ObjectDataSource1.SelectMethod = "GetDataById"; ObjectDataSource1.SelectParameters.Clear(); ObjectDataSource1.SelectParameters.Add(new Parameter("id", TypeCode.Int32, id)); } }

Acelai procedeu l vom folosi i pentru filtrarea dup criteriile nume i categorie:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { ObjectDataSource1.SelectMethod = "GetDataByCategory"; ObjectDataSource1.SelectParameters.Clear(); ObjectDataSource1.SelectParameters.Add(new Parameter("categoria", TypeCode.String, DropDownList1.SelectedValue)); } protected void TextBox1_TextChanged(object sender, EventArgs e) { if (TextBox1.Text.Length > 0) { ObjectDataSource1.SelectMethod = "GetDataByName"; ObjectDataSource1.SelectParameters.Clear(); ObjectDataSource1.SelectParameters.Add(new Parameter("nume", TypeCode.String, TextBox1.Text)); } }

Evenimentul SelectedIndexChange va fi generat atunci cnd utilizatorul selecteaz o categorie n controlul de tip DropDownList, iar evenimentul TextChanged va fi generat cnd utilizatorul apas tasta Enter n controlul TextBox.

242

Pentru afiarea tuturor nregistrrilor n GridView, se folosete un control de tip RadioButton.


protected void RadioButton3_CheckedChanged(object sender, EventArgs e) { TextBox1.Text = ""; TextBox1.Enabled = false; DropDownList1.Enabled = false; ObjectDataSource1.SelectMethod = "GetData"; ObjectDataSource1.SelectParameters.Clear(); }

Pentru ca la selectarea unui criteriu de filtrare s nu rmn activ criteriul precedent, vom utiliza proprietatea Enabled a controalelor DropDownList, respectiv TextBox:
protected void RadioButton1_CheckedChanged(object sender, EventArgs e) { TextBox1.Text = ""; TextBox1.Enabled = false; DropDownList1.Enabled = true; } protected void RadioButton2_CheckedChanged(object sender, EventArgs e) { TextBox1.Enabled = true; DropDownList1.Enabled = false; TextBox1.Focus(); }

n pagina movie.aspx am adugat i un control de tip hyperlink pentru adugarea unui nou film n baza de date.
<asp:HyperLink ID="HyperLink6" runat="server" Font-Bold="True" NavigateUrl="~/AdaugaFilm.aspx">Adauga un nou film </asp:HyperLink>

VII.4.
n aceast pagin

Detalii.aspx
putem

modifica informaiile ascociate unui film, modificrile putnd fi salvate n baza de date.

Figura 7.51 Detalii.aspx n modul design

Proiectarea i realizarea unei aplicaii Web

243

Pentru afiarea i modificarea informaiilor pentru un film, vom folosi un control de tip DetailsView
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" CellPadding="4" DataKeyNames="id" DataSourceID="ObjectDataSource1" ForeColor="#333333" GridLines="None" Height="50px" HorizontalAlign="Center" Width="420px"> <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> CommandRowStyle BackColor="#FFFFC0" Font-Bold="True" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <FieldHeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" /> <PagerStyle BackColor="#FFCC66"ForeColor="#333333"HorizontalAlign="Center" /> <Fields> <asp:BoundField DataField="nume" HeaderText="Denumirea:"SortExpression="nume" /> <asp:BoundField DataField="regizor" HeaderText="Regizorul:"SortExpression="regizor"/> <asp:BoundField DataField="data_aparitie" HeaderText="Data aparitiei:" SortExpression="data_aparitie" /> <asp:BoundField DataField="incasari" HeaderText="Incasari:"SortExpression="incasari"/> <asp:BoundField DataField="actori" HeaderText="Actori:" SortExpression="actori" /> <asp:ImageField DataImageUrlField="poza" DataImageUrlFormatString="images/movies/{0}" HeaderText="Poster:"> </asp:ImageField> <asp:HyperLinkField HeaderText="Upload imagine" Text="upload" DataNavigateUrlFields="id"DataNavigateUrlFormatString="Upload.aspx?id={0}" /> <asp:BoundField DataField="categoria"HeaderText="Categoria:"SortExpression="categoria"/> <asp:CommandField ButtonType="Image" CancelImageUrl="~/images/delete.png" EditImageUrl="~/images/edit.png" ShowEditButton="True" UpdateImageUrl="~/images/edit.png" /> </Fields> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:DetailsView>

Sursa de date pentru acest control va fi tot obiectul DataSet. Metoda care va popula controlul DatailsView va fi GetDataById(). Valoarea parametrului @id din interogare, este preluat prin QueryString, deoarece in aceast pagin se ajunge din movie.aspx prin selectarea link-ului Detalii din controlul GridView. Paii pentru selectarea sursei de date sunt:

Figura 7.52 Selectarea obiectului DataSet ca surs de date

244

Figura 7.53 Selectarea metodei GetDataById

Figura 7.54 Valoarea parametrului id este preluat din QueryString

n lista de cmpuri ale controlului DetailsView, vrem s apar un link ctre pagina care permite upload-ul unui fiier, respectiv un cmp de tip imagine, care s afieze imagina upload-at. Imaginea reprezint posterul filmului, iar cmpul poza din tabela film conine numele fiierului imagine. Toate posterele sunt upload-ate n directorul images/movies.

Proiectarea i realizarea unei aplicaii Web

245

Figura 7.55 Modificarea proprietilor cmpului ImageField

n controlul DetailsView adugm un nou cmp de tip ImageField. Pentru a afia posterul, modificm proprietile : DataImageUrlField are valoarea numelui cmpului din baza de date care conine numele fiierului imagine: poza DataImageUrlFormatString conine un ir de caractere care reprezint calea ctre imagine: images/movies/{0}. Parametrul dintre acolade va fi nlocuit de numele fiierului imagine din cmpul bazei de date Pentru a afia un link pentru upload-ul unui fiier imagine, controlul DetailsView conine o coloan de tip HyperLinkField. Pentru acest cmp modificm proprietile: DataNavigateUrlFields conine id-ul care va fi trimis prin QueryString DataImageUrlFormatString conine un ir de caractere care reprezint adresa paginii ctre care se realizeaz redirect-ul: Upload.aspx?id={0}. Parametrul dintre acolade va fi nlocuit cu id-ul nregistrrii modificate.
Figura 7.56 Modificarea proprietilor cmpului de tip HyperLinkField

246

VII.5.

Upload.aspx

n aceast pagin utilizatorul poate upload-a un fiier, acesta fiind salvat ndirectorul
/images/movies/. Controlul de tip FileUpload are asociat un control de validare de tip

RequiredFieldValidator. De asemenea, pentru a afia erorile vom utiliza un control de tip ValidationSummary.

Figura 7.57 Pagina upload.aspx n design view

Codul asp asociat paginii este:

Proiectarea i realizarea unei aplicaii Web

247

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"CodeFile="Upload.aspx.cs"Inherits="Upload"Title="Upload Poster"%> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:ContentID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"> <asp:FileUpload ID="FileUpload1" runat="server" Width="340px" CssClass="textBox" /> &nbsp; <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Upload" Width="60px" CssClass="button" /> &nbsp; <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="FileUpload1" ErrorMessage="Nu ati selectat un fisier pentru upload!" Font-Bold="True" ForeColor="#990000">* </asp:RequiredFieldValidator> <br /> <asp:ValidationSummary ID="ValidationSummary1" runat="server" Font-Bold="True" ForeColor="#990000" /> </asp:Content>

Utilizatorul poate ajunge n pagina upload.aspx fie din pagina de adugare a unui nou film (AdaugFilm.aspx), fie din pagina de detalii (Detalii.aspx). Deoarece n pagina de detalii posterul filmului este afiat printr-un cmp ImageField al controlului DetailsView, dup upload-ul fiierului pe server se salveaz numele fiierului uploadat n tabela film din baza de date filme. Pentru conectarea la baza de date se folosete irul de conectare salvat n fiierul web.config. Astfel, n aceast pagin trebuie inclus spaiul de nume System.Web.Configuration:
using System.Web.Configuration;

Dac utlizatorul ajunge n pagina Upload.aspx din pagina AdaugFilm.aspx, numele fiierului upload-at va fi salvat n sesiune. Codul executat la apsarea butonului upload este urmtorul:

248 protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) { FileUpload1.SaveAs(Server.MapPath(".") + "/images/movies/" + FileUpload1.FileName); int id = Convert.ToInt32(Request.QueryString["id"]); if (id > 0) {SqlConnection conn = new SqlConnection (WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString); conn.Open(); string updateString = @"UPDATE film SET poza = @fileName WHERE id = @id"; SqlCommand cmd = new SqlCommand(updateString, conn); cmd.Parameters.AddWithValue("@id", id.ToString()); cmd.Parameters.AddWithValue("@fileName", FileUpload1.FileName); cmd.ExecuteNonQuery(); Server.Transfer("Detalii.aspx?id=" + id); } else {Session["uploadedFileName"] = FileUpload1.FileName; Server.Transfer("AdaugaFilm.aspx"); } } }

VII.6.

AdaugFilm.aspx

Aceast pagin este un formular de adugare a datelor introduse de utilizator n tabela film a bazei de date. Toate controalele de tip TextBox sau prin DropDownList au asociat clasa css textBox intermediul proprietii CssClass.

Figura 7.58 AdaugFilm.aspx n modul design

Deoarece toate cmpurile din baza de date sunt obligatorii, fiecrui control pentru introducerea datelor (cu excepia celui pentru introducerea ncasrilor) i s-a asociat un control de tip RequiredFieldValidator. Controlul txtncasri are asociat un control de tip RangeValidator.

Proiectarea i realizarea unei aplicaii Web

249

<asp:Content ID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"> <table cellpadding="5" cellspacing="1" class="style1"> <tr> <td bgcolor="#990000"> <asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="White" Text="Denumirea:"></asp:Label> </td> <td> <asp:TextBox ID="txtDenumire" runat="server" Width="213px" TabIndex="1" BorderStyle="Groove" CssClass="textBox" MaxLength="50"></asp:TextBox> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtDenumire" ErrorMessage="Nu ati introdus denumirea" Font-Bold="True" ForeColor="#990000">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td bgcolor="#990000"> <asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="White" Text="Regizorul:"></asp:Label> </td> <td> <asp:TextBox ID="txtRegizor" runat="server" Width="214px" TabIndex="2" BorderStyle="Groove" CssClass="textBox" MaxLength="50"></asp:TextBox> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtRegizor" ErrorMessage="Nu ati introdus regizorul" Font-Bold="True" ForeColor="#990000">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td bgcolor="#990000"> <asp:Label ID="Label3" runat="server" Font-Bold="True" ForeColor="White" Text="Actori:"></asp:Label> </td> <td> <asp:TextBox ID="txtActori" runat="server" Rows="5" TextMode="MultiLine" Width="212px" TabIndex="3" BorderStyle="Groove" CssClass="textBox" MaxLength="50"></asp:TextBox> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtActori" ErrorMessage="Nu ati introdus actorii" Font-Bold="True"ForeColor="#990000">* </asp:RequiredFieldValidator> </td> </tr>

250 <tr> <td bgcolor="#990000"> <asp:Label ID="Label4" runat="server" Font-Bold="True" ForeColor="White" Text="Data aparitiei:"></asp:Label> </td> <td> <asp:TextBox ID="txtData" runat="server" Width="100px" TabIndex="4" BorderStyle="Groove" CssClass="textBox"></asp:TextBox> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/calendar.gif" onclick="ImageButton1_Click" ToolTip="Calendar" CausesValidation="False" /> <asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Visible="False" Width="220px" onselectionchanged="Calendar1_SelectionChanged"> <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /> <SelectorStyle BackColor="#FFCC66" /> <TodayDayStyle BackColor="#FFCC66" ForeColor="White" /> <OtherMonthDayStyle ForeColor="#CC9966" /> <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /> <DayHeaderStyle BackColor="#FFCC66"Font-Bold="True"Height="1px" /> <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /> </asp:Calendar> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtData" ErrorMessage="Nu ati introdus data aparitiei" Font-Bold="True" ForeColor="#990000">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td bgcolor="#990000"> <asp:Label ID="Label7" runat="server" Font-Bold="True" ForeColor="White" Text="Incasari:"></asp:Label> </td> <td> <asp:TextBox ID="txtIncasari" runat="server" TabIndex="5" BorderStyle="Groove" CssClass="textBox">0</asp:TextBox> </td> <td> <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtIncasari" ErrorMessage="Incasarile intre 0 si 1000000 $" Font-Bold="True" ForeColor="#990000" MaximumValue="1000000" MinimumValue="0">*</asp:RangeValidator> </td> </tr> <tr> <td bgcolor="#990000" class="style5"> <asp:Label ID="Label5" runat="server" Font-Bold="True" ForeColor="White" Text="Categoria:"></asp:Label> </td> <td> <asp:DropDownList ID="DropDownList1" runat="server" TabIndex="6" CssClass="textBox">

Proiectarea i realizarea unei aplicaii Web

251

<asp:ListItem>S.F.</asp:ListItem> <asp:ListItem>Romance</asp:ListItem> <asp:ListItem>Drama</asp:ListItem> <asp:ListItem>Razboi</asp:ListItem> <asp:ListItem>Actiune</asp:ListItem> <asp:ListItem>Aventura</asp:ListItem> <asp:ListItem>Desene animate</asp:ListItem> </asp:DropDownList> </td> <td>&nbsp;</td> </tr> <tr> <td bgcolor="#990000"> <asp:Label ID="Label6" runat="server" Font-Bold="True" ForeColor="White" Text="Poster:"></asp:Label> </td> <td > <asp:TextBox ID="txtPoster" runat="server" CssClass="textBox" Height="22px" MaxLength="50" Width="173px"></asp:TextBox> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" onclick="LinkButton1_Click">Upload </asp:LinkButton> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtPoster" ErrorMessage="Nu ati uploadat posterul" ForeColor="#990000">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td align="center" colspan="3"> <asp:Button ID="Button1" runat="server" Text="Adauga" CssClass="button" onclick="Button1_Click" /> </td> </tr> <tr> <td colspan="3"> <asp:ValidationSummary ID="ValidationSummary1" runat="server" Font-Bold="True" ForeColor="#990000" /> </td> </tr> </table> </asp:Content>

Afiarea sau ascunderea calendarului se realizeaz prin intermediul unui control de tip ImageButton
.

protected void ImageButton1_Click(object sender, ImageClickEventArgs e) { if (Calendar1.Visible == true) {Calendar1.Visible = false;} else {Calendar1.Visible = true;} }

252

La apsarea acestui buton se genereaz un PostBack, rezultnd n validarea controalelor din pagin, dei nu s-a apsat nc butonul Adaug. Pentru a nu se realiza aceast validare, valoarea False. Cnd utilizatorul selecteaz o dat calendaristic, se completeaz controlul textBox corespunztor:
protected void Calendar1_SelectionChanged(object sender, EventArgs e) { txtData.Text = Calendar1.SelectedDate.ToShortDateString(); }

controlul ImageButton1 are setat proprietatea CausesValidation la

Link-ul pentru upload-ul unui fiier este un control de tip LinkButton. El va redirecta ctre pagina upload.aspx, unde utilizatorul va putea upload-a un fiier. Ca i la controlul ImageButton, proprietatea CausesValidation are valoarea False. n momentul n care utilizatorul se ntoarce n pagina AdaugFiier.aspx dup ce a realizat upload-ul, datele introduse pn atunci se pierd, deoarece server-ul reiniializeaz pagina. Pentru a nu pierde datele introduse, acestea vor fi salvate n sesiune la apsarea butonului upload.
protected void LinkButton1_Click(object sender, EventArgs e) { if (txtDenumire.Text.Length > 0) { Session["denumire"] = txtDenumire.Text; } if (txtRegizor.Text.Length > 0) { Session["regizor"] = txtRegizor.Text; } if (txtActori.Text.Length > 0) { Session["actori"] = txtActori.Text; } if (txtData.Text.Length > 0) { Session["dataAparitiei"] = txtData.Text; } if (txtIncasari.Text.Length > 0) { Session["incasari"] = txtIncasari.Text; } Session["categoria"] = DropDownList1.SelectedIndex; } Server.Transfer("Upload.aspx?id=0");

n evenimentul Page_Load al paginii vom verifica dac sunt date n sesiune, i vom iniializa controalele din pagin.

Proiectarea i realizarea unei aplicaii Web

253

protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { txtDenumire.Focus(); } if (Session["denumire"] != null) { txtDenumire.Text = Session["denumire"].ToString(); } if (Session["regizor"] != null) { txtRegizor.Text = Session["regizor"].ToString(); } if (Session["actori"] != null) { txtActori.Text = Session["actori"].ToString(); } if (Session["dataAparitiei"] != null) { txtData.Text = Session["dataAparitiei"].ToString(); } if (Session["incasari"] != null) { txtIncasari.Text = Session["incasari"].ToString(); } if (Session["uploadedFileName"] != null) { txtPoster.Text = Session["uploadedFileName"].ToString(); } if (Session["categoria"] != null) { DropDownList1.SelectedIndex = Convert.ToInt32(Session["categoria"]); } }

La apsarea butonului Adaug, datele vor fi salvate n baza de date i terse din sesiune:
protected void Button1_Click(object sender, EventArgs e) { SqlConnection conn = new SqlConnection (WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString); conn.Open(); string insertString = "INSERT INTO film (nume, data_aparitie, incasari, regizor, actori, poza, categoria)"; insertString += " VALUES (@nume, @data, @incasari, @regizor, @actori, @poza, @categoria)"; SqlCommand cmd = new SqlCommand(insertString, conn); cmd.Parameters.AddWithValue("@nume", txtDenumire.Text.Trim()); cmd.Parameters.AddWithValue("@data", Convert.ToDateTime(txtData.Text)); cmd.Parameters.AddWithValue("@incasari",Convert.ToInt32(txtIncasari.Text.Trim())); cmd.Parameters.AddWithValue("@regizor", txtRegizor.Text.Trim()); cmd.Parameters.AddWithValue("@actori", txtActori.Text.Trim());

254

cmd.Parameters.AddWithValue("@poza", txtPoster.Text.Trim()); cmd.Parameters.AddWithValue("@categoria", DropDownList1.SelectedValue); cmd.ExecuteNonQuery(); Session.Remove("denumire"); Session.Remove("regizor"); Session.Remove("actori"); Session.Remove("dataAparitiei"); Session.Remove("incasari"); Session.Remove("denumire"); Session.Remove("categoria"); Session.Remove("uploadedFileName"); } Server.Transfer("Movie.aspx");

VII.7.

Contact.aspx

Datele introduse de utilizator n acest formular, vor fi trimise prin email ctre deintorul paginii. Pentru realizarea formularului, s-a folosit un control de tip Wizard, care conine trei pai.

Figura 7.59 Pasul 1 de completare al formularului de contact

Figura 7.60 Pasul 2

Proiectarea i realizarea unei aplicaii Web

255

Figura 7.61 Ultimul pas al formularului.

La adugarea controlului Wizard, putei folosi opiunea Add/Remove WizardSteps pentru a specifica numrul de pai ai controlului.

Figura 7.62 Adugarea de pai pentru controlul wizard.

Butoanele afiate automat sunt determinate de tipul pasului.

Figura 7.63 Al doilea pas este de tip Finish

256

Figura 7.64 Ultimul pas este de tip Complete

Codul asp asociat controlului wizard este:


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:Wizard ID="Wizard1" runat="server" BackColor="#FFFBD6" BorderColor="#FFDFAD" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" Height="318px" Width="431px" ActiveStepIndex="0" onfinishbuttonclick="Wizard1_FinishButtonClick"> <StepStyle VerticalAlign="Top" /> <StartNextButtonStyle BackColor="#990000" BorderColor="Black" BorderStyle="Solid" Font-Bold="True" Font-Size="X-Small" ForeColor="White" Height="20px" Width="60px" /> <FinishCompleteButtonStyle BackColor="#990000" BorderColor="Black"BorderStyle="Solid" Font-Bold="True" Font-Size="X-Small" ForeColor="White" Height="20px" Width="60px" /> <StepNextButtonStyle BackColor="#990000" BorderColor="Black" BorderStyle="Solid" Font-Bold="True" Font-Size="X-Small" ForeColor="White" Height="20px" Width="60px" /> <FinishPreviousButtonStyle BackColor="#990000" BorderColor="Black" BorderStyle="Solid" Font-Bold="True" Font-Size="X-Small" ForeColor="White" Height="20px" Width="60px" /> <WizardSteps> <asp:WizardStep runat="server" title="Informatii"> <table cellpadding="0" cellspacing="1" class="style1"> <tr> <td class="style4"> <asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Numele dvs."></asp:Label> </td> <td class="style3"> <asp:TextBox ID="txtNume" runat="server" Width="215px"></asp:TextBox> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate = "txtNume" ErrorMessage="Nu ati introdus numele" Font-Bold="True" ForeColor="#990000">*</asp:RequiredFieldValidator> </td> </tr> <tr><td class="style4"> <asp:Label ID="Label2" runat="server" Font-Bold="True" Text="Email-ul"> </asp:Label> </td>

Proiectarea i realizarea unei aplicaii Web

257

<td class="style3"> <asp:TextBox ID="txtEmail" runat="server" Width="215px"></asp:TextBox> </td> <td> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtEmail" ErrorMessage="Nu ati introdus email-ul" Font-Bold="True" ForeColor="#990000">*</asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail" ErrorMessage="Nu ati scris corect email-ul" Font-Bold="True" ForeColor="#990000" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">* </asp:RegularExpressionValidator> </td></tr> <tr> <td class="style2" colspan="3"> <asp:ValidationSummary ID="ValidationSummary1" runat="server" Font-Bold="True" ForeColor="#990000" /> </td></tr></table> </asp:WizardStep> <asp:WizardStep runat="server" title="Comentarii" StepType="Finish"> <table class="style1"> <tr> <td class="style4"> <asp:Label ID="Label3" runat="server" Font-Bold="True" Text="Comentariile dvs (nu mai mult de 50 caractere)"></asp:Label> </td> <td class="style3"> <asp:TextBox ID="txtComments" runat="server" Rows="5" TextMode="MultiLine" Width="217px"></asp:TextBox> </td> <td> <asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="txtComments" ErrorMessage="Nu mai mult de 50 carcatere" Font-Bold="True" ForeColor="#990000" OnServerValidate= "CustomValidator1_ServerValidate" ValidateEmptyText="True">*</asp:CustomValidator> </td></tr> <tr> <td class="style2" colspan="3"> <asp:ValidationSummary ID="ValidationSummary2" runat="server" Font-Bold="True" ForeColor="#990000" /> </td></tr></table></asp:WizardStep> <asp:WizardStep runat="server" StepType="Complete" Title="Trimite"> <asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Mailul a fost trimis!"></asp:Label></asp:WizardStep></WizardSteps> <SideBarButtonStyle ForeColor="White" /> <NavigationButtonStyle BackColor="White" BorderColor="#CC9966" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000" /> <SideBarStyle BackColor="#990000" Font-Size="Small" VerticalAlign="Top" Width="80px" /> <HeaderStyle BackColor="#FFCC66" BorderColor="#FFFBD6" BorderStyle="Solid" BorderWidth="2px" Font-Bold="True" Font-Size="0.9em" ForeColor="#333333" HorizontalAlign="Center" /> <StepPreviousButtonStyle BackColor="#990000" BorderColor="Black" BorderStyle="Solid" Font-Bold="True" Font-Size="X-Small" ForeColor="White" Height="20px" Width="60px" /> </asp:Wizard> </asp:Content>

258

Controalele pentru introducerea numelui i e-mail-ului sunt validate prin intermediul unui control RequiredFieldValidator. Cmpul e-mail este validat i din punctul de vedere al formei irului de caractere introdus, folosind un control RegularExpressionValidator. Controlul de la pasul 2 este utilizat de utilizator pentru introducerea comentariilor. De aceea, valoarea proprietii TextMode este MultiLine. Dorim s limitm numrul maxim al caracterelor introduse la 50. Pentru a valida numrul de caractere introdus, folosim un control de tip CustomValidator, pentru care codul se va executa pe server.

Figura 7.65 Evenimentul asociat controlului CustomValidator protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) { if (txtComments.Text.Length > 50) {args.IsValid = false;} else {args.IsValid = true;} }

La apsarea butonului Finish de la pasul 2, se va trimite un e-mail. Mesajul va fi un obiect de tip MailMessage. Constructorul clasei are parametrii: from, to, subject, body. Pentru a trimite efectiv mail-ul, folosim clasa SmtpClient. Trimiterea unui mail presupune existena unui server Smtp. n exemplul de mai jos, folosim server-ul smtp oferit gratis utilizatorilor Gmail. Parametrii username@gmail.com respectiv username@gmail.com trebuie nlocuii cu datele contului de mail.

Test de verificare a cunotinelor

259

protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e) { MailMessage message = new MailMessage(txtEmail.Text, "username@yahoo.com", "Feedback de la " + txtNume.Text, txtComments.Text); SmtpClient mailClient = new SmtpClient(); mailClient.Host = "smtp.gmail.com"; mailClient.EnableSsl = true; mailClient.Credentials = new System.Net.NetworkCredential ("username@gmail.com", "password"); mailClient.Port = 587; mailClient.Send(message); message.Dispose(); }

VII.8.

Evaluare

1. Adugai bazei de date o tabel numit Categorii, care va conine toate categoriile posibile ale unui film. Modificai apoi controalele de tip DropDownList din paginile Movie.aspx respectiv AdaugFilm.aspx astfel nct s preia datele direct din tabela nou introdus. Vei folosi un obiect de tip TableAdapter adugat n DataSet-ul existent. 2. Adugai o nou tabel numit Actori. Realizai un formular de introducere a datelor pentru noua tabel. Modificai formularul de introducere a informaiilor despre film , astfel nct actorii sa fie preluai din noua tabel. 3. Modificai pagina upload.aspx astfel nct s realizeze doar upload-ul unui fiier, fr a mai salva n baza de date numele acestuia. Apoi modificai pagina detalii.aspx astfel nct s permit vizualizarea posterului upload-at n pagina upload.aspx. 4. Presupunnd c firma dvs. are dou locaii ntr-un singur ora, adugai o nou pagin numit Despre.aspx, care s conin un control de tip ImageMap. Imaginea trebuie s fie o hart cu cele dou locaii, iar la click pe fiecare dintre ele trebuie s se afieze informaiile despre locaia respectiv ntr-o nou pagin.

VIII. Test de verificare a cunotinelor


1. Care din urmtoarele obiecte poate fi folosit pentru a menine starea ntr-o aplicaie ASP.NET ? a. Session b. Application c. ViewState d. Toate de mai sus 2. Care dintre urmtoarele modaliti realizeaz un redirect ctre o pagin extern ? a. Server.Transfer b. Response.Redirect c. a. i b. d. Nici una din modalitile de mai sus 3. Care din urmtoarele limbaje poate fi folosit pentru a scrie cod server side n ASP.NET ? a. C#

260

b. C c. Visual Basic .Net 4. Pentru a delimita codul C# sau VB.Net scris n cadrul unei pagini se folosete tag-ul: a. < Body > b. < Head > c. < Script > 5. Controlul ASP.Net folosit pentru afiarea unui text ntr-o pagin web este: a. < asp:label > b. < asp:listitem > c. < asp:button > 6. Controlul ASP <asp:dropdownlist> corespunde crui tag Html ? a. < Option > b. < Select > c. < List > 7. Controlul ASP < asp : listitem > corespunde crui tag Html ? a. < Option > b. < UL > c. < List > 8. Proprietatea EnableViewState permite salvarea datelor introduse de utilizator? a. Da b. Nu 9. Care din urmtoarele posibiliti nu este o modalitate de meninere a strii ? b. Querystate c. HiddenField d. Application e. Cookies 10. ntr-o pagin web trebuie salvate informaii de dimensiuni mici ntre dou accesri ale paginii. Securitatea datelor nu este important. Care dintre urmtoarele posibiliti este cea mai potrivit? a. cookie b. query string c. url d. javascript function e. hidden field 11. Care dintre urmtoarele evenimente este ultimul n cadrul cilului de via a unei pagini web? a. Page_Load b. Validate c. Page_Init 12. Care dintre urmtoarele proprieti este comun tuturor controalelor de validare? a. ValueToCompare b. ControlToValidate c. InitialValue d. ValidationExpression e. ControlToCompare 13. Ce tip de dat are valoarea returnat de proprietatea IsPostBack a. bit b. boolean c. int d. object e. string 14. ntr-o pagin web exist un control de tip DropDownList pentru a reine nume de persoane. Controlul are dou valori: Ion i Marius. La apsarea unui buton de submit, se genereaz o aciune de post back. n loc de dou valori, controlul DropDownList conine 4: 2 valori Ion i 2 valori Marius. De ce?

Test de verificare a cunotinelor

261

a. eroare la ncrcarea paginii web b. Proprietatea AutoPostBack pentru controlul DropDownList are valoarea false. c. Directiva AutoEventWireUp are valoarea false d. Nu este verificat proprietatea IsPostBack la ncrcarea paginii. 15. Care este durata de via a unui element reinut n obiectul View State? a. Elementul va exista ct timp exist pagina curent b. Elementul va exista ct timp exist sesiunea curent c. Elementul va exista ct timp exist obiectul Application

You might also like