Documente Academic
Documente Profesional
Documente Cultură
1
1.1. Configurarea platformei de lucru
În cadrul acestui capitol vor fi abordate elemente care au legătură
tangenţial cu dezvoltarea propriu-zisă a site-ului web. Se oferă răspunsuri
concrete la întrebări precum: Care trebuie să fie setările de pe calculatorul pe care
va fi dezvoltat site-ul? Care este mediul de dezvoltare cu ajutorul căruia va fi
implementat portalul şi cum se configurează acesta?
2
exemplu “Learn ASP.NET”, cantitatea de memorie RAM rezervată din memoria
internă a calculatorului gazdă, locaţia şi dimensiunea fişierului care va emula
hard-disk-ului virtual) figura 1 -1.
3
virtuale. În caz contrar sau atunci când se doreşte conectarea în reţea a mai multor
maşini virtuale se creează pe calculatorul gazdă mai multe plăci virtuale de tipul
Microsoft Loopback Adapter. După asocierea acestora pe rând cu câte o maşină
virtuală şi după realizarea setărilor corespunzătoare în firewall-urile
calculatoarelor implicate, cele n emulatoare şi gazda sunt în aceeaşi reţea.
Pentru partajarea conexiunii la Internet se utilizează Internet Connection
Sharing, pe calculatorul gazdă şi pe conexiunea care oferă acestuia accesul la
Internet (specificându-se pentru care reţea locală s-a realizat partajarea). Toate
setările TCP/IP pe maşinile virtuale se obţin în mod automat.
2
Pentru configurarea serverului IIS se poate utiliza fereastra Computer
Management accesibilă prin alegerea opţiunii Manage din meniul contextual
derulat la clic dreapta pe My Computer. În această fereastră se expandează
Services and Applications şi se alege Internet Information Service - figura 1 -4.
3
Schema client-server poate fi extinsă prin includerea unor programe
“interpretoare” pe partea de server (figura 1 -6). În acest context, codul sursă
scris de programator poate conţine anumite scripturi dedicate acestor
interpretoare. Aceste scripturi permit accesul la resurse de pe server (e.g. baze de
date, fişiere) şi generează în mod dinamic cod specific programului client
(HTML, CSS, JavaScript).
SERVER interpretoare
(IIS, Apache) server-side(PHP, ASP)
CLIENT plug-in-uri
(IE, Firefox) (flash player, VRML player)
figura 1-6. Schema client-server extinsă
figura 1-7. Accesul la o pagină ASP predefinită a serverului IIS instalat local
2
1.2. Crearea primului site web utilizând Visual Web Developer
Pentru SQL Server s-a ales versiunea SQL Server 2008 with Tools care
conţine pe lângă motorul SQL şi un utilitar pentru managementul vizual al serverului
şi al bazelor de date (SQL Server Management Studio Basic). Acesta permite accesul
într-o structură arborescentă la diferitele elemente aflate în legătură cu serverul SQL
(baze de date, securitate, replicare, management). Aceste elemente pot fi expandate
suplimentar, aşa cum este ilustrat în figura 1 -9.
3
figura 1-8. Instalarea SQL Server Express
2
Instalarea aplicaţiei Microsoft Visual Web Developer 2008 Express se
realizează într-o manieră simplă, toate componentele necesare configurându-se
automat (figura 1 -10).
figura 1-10. Instalarea pachetului Microsoft Visual Web Developer 2008 Express
3
figura 1-11. Crearea primului site ASP.NET
2
De asemenea, în Solution Explorer se observă şi fişierele care alcătuiesc
acest site şi care se regăsesc în folderul My Documents\Visual Studio 2008\WebSites\
PrimulSite:
Default.aspx – conţine cod HTML, JavaScript şi CSS;
Default.aspx.cs – conţine cod C# asociat fişierului anterior;
web.config – elemente de configurare ale site-ului prezentate în format XML şi
accesibile vizual prin accesare meniului Website – ASP.NET Configuration;
Tot în Solution Explorer se pot crea noi foldere (clic dreapta pe numele site-
ului) pentru organizarea paginilor şi a celorlalte resurse (imagini, fişiere audio sau
video, stiluri, etc). Deşi copierea resurselor poate fi realizată şi din sistemul de
oparare, este de preferat aducerea acestora prin drag and drop în zona Solution
Explorer. În mod similar resursele pot fi şterse sau redenumite.
Pentru construirea (Build) şi rularea cu verificarea erorilor (Debug) se poate
accesa opţiunea Debug – Start Debugging sau se poate apăsa tasta F5. În acest
moment este pornit un server web integrat în aplicaţia VWD care lucrează pe portul
1060 şi browser-ul Internet Explorer având încărcată pagina realizată, aşa cum este
ilustrat în .
3
figura 1-14. Inserarea codului HTML în paginile site-ului
Tot prin clic dreapta pe denumirea soluţiei se poate accesa şi opţiunea Add
new item... ce determină afişarea unei ferestre precum cea din figura 1 -15.
2
1.3. Configurarea accesului la site-ul web
De cele mai multe ori, în cazul portalurilor web există două tipuri de resurse:
cele accesibile tuturor vizitatorilor şi cele accesibile doar membrilor. În cadrul
acestei secţiuni va fi prezentată o modalitate simplă de a structura conţinutul
respectând aceste cerinţe de restricţionare a accesului.
În primul rând se creează un folder (e.g. FisiereleMembrilor) iar ulterior se
stabilesc roluri, reguli asociate acestor roluri şi membrii. Toate aceste setări se
realizează cu ajutorul instrumentului Web Site Administration Tool.
Deoarece membrii vor fi stocaţi într-o bază de date, este necesară verificarea
accesibilităţii serverului SQL Server. Ca şi în cazul serverului web, VWD are inclus
un server SQL utilizabil pentru faza de dezvoltare. Din tab-ul Provider se selectează
opţiunea Select a single provider for all site management data, şi apoi se testează
conectivitatea la baza de date prin activarea legăturii Test. Ar trebui să apară mesajul
Successfully established a connection to the database.
Următorul pas se referă la stabilirea tipului de autentificare folosit:
Microsoft Windows authentication (from a local network) – se utilizează numele şi
3
parolele oferite de sistemul de operare sistemului; Form authentication (from the
internet) – se utilizează numele şi parolele oferite de utilizator şi comparate cu cele
din baza de date. Pentru stabilirea tipului de autentificare la cea de-a doua variantă,
se alege tab-ul Security, apoi Select authentication type şi se bifează From the
internet, după care se acţionează butonul Done - figura 1 -17.
2
Crearea unui rol nou se realizează prin acţionarea legăturii Create or
Manage roles. În continuare este afişată lista tuturor rolurilor cu posibilităţile de:
Creare rol (Create New Role) – se specifică numele acestuia;
Ştergere rol (Delete) – se indică rolul ce se doreşte a fi şters;
Management rol (Manage) – editarea relaţiilor între roluri şi utilizatori.
3
figura 1-20. Gestiunea utilizatorilor şi asocierea rolurilor
2
figura 1-21. Crearea regulilor de acces la folder-ele proiectului
3
1.4. Elemente de design ale site-ului
Această secţiune se adresează în primul rând celor ce au mai dezvoltat un
site web static utilizând tehnologii precum HTML şi CSS. Este trecută în revistă
facilitatea cu care vine VWD pentru crearea unui aspect unitar al site-ului –
Master Pages. De asemenea sunt indicate modalităţile de lucru cu cod HTML şi
CSS.
2
Aşa cum se poate vedea şi din codul sursă, layout-ul este de fapt un tabel.
Inserarea controlului ContentPlaceHolder într-o celulă semnifică faptul că acea în
acea celulă se va amplasa conţinutul paginilor site-ului, restul structurii rămânând
aceeaşi.
Modificarea stilului fiecărei celule se poate realiza prin indicarea ei,
urmată de alegerea proprietăţii Style din zona Properties. Va apărea fereastra
Modify Style care permite stabilirea în mod vizual a elementelor ce ţin de
aspectul itemului selectat – figura 1 -23.
3
Această pagină nou creată va conţine zonele definite în MasterPage în
format needitabil. Singura zonă care poate fi editată este cea aferentă controlului
ContentPlaceHolder. Rezultatul poate fi văzut în figura 1 -24.
2
Tabelele pot avea un rol deosebit în cadrul paginii web întrucât pot oferi
suport pentru poziţionarea celorlalte elemente. Toate opţiunile necesare pentru
lucrul cu tabele se regăsesc în meniul Table.
Adăugarea de legături între pagini se poate realiza prin tragerea paginii
destinaţie în cadrul paginii sursă. Acelaşi lucru se poate realiza prin selectarea
elementului care va deveni legătură şi apăsare butonului Convert to Hyperlink din
meniul Format sau din toolbar.
În mod similar poate fi adăugată o imagine, prin tragerea acesteia în
locaţia dorită. Bineînţeles că iniţial este recomandată copierea imaginii într-un
folder al proiectului.
Editarea în codul sursă este şi ea uşurată prin facilitatea
AutoCodeCompletation, posibilă datorită meniului contextual IntelliSense.
3
1.5. Controale ASP.NET HTML
Controalele ASP.NET sunt elemente care pot fi introduse într-o pagină
web. Există patru categorii de controale ASP.NET:
Controale Server HTML (HTML Server Controls) – conversie rapidă a
controalelor HTML (Form, Button, CheckBox, Select, Table, Image etc) din
controale client-side în controale server-side;
Controale Server Web (Web Server Controls) – controale server dedicate;
Controale utilizator (Custom Controls) – pentru suplimentarea controalelor
predefinite.
În această secţiune se va prezenta un formular simplu de introducere a
datelor utilizând exclusiv controale HTML. Datele din acest formular vor fi
prelucrate pe partea de server şi se va formula un răspuns.
Iniţial se va prezenta o variantă “clasică”, cu controale HTML obişnuite
iar apoi varianta cu controale Server HTML.
2
Fişierul de răspuns se consideră tot ConvHTML.aspx (pur şi simplu se va
reafişa pagina) Metoda folosită pentru trimiterea datelor este get, ceea ce
înseamnă că acestea vor fi transmise serverului în cadrul querry_string.
localhost:1060/PrimulSite/ConvHTML.aspx?
nume=Ovidiu&sex=masc&varsta=v_19_35&Linux=on&Windows=on&comentarii=Linux+doar+in+ma
sini+virtuale.&submit=Trimite+la+server
3
asociate. Programarea răspunsului devine mult mai naturală întrucât se lucrează
cu obiecte şi nu cu perechi nume=valoare.
De asemenea, motorul ASP.NET iniţiază o sesiune pe server care va fi
activă (i.e. datele salvate în cadrul ei vor fi accesibile) pentru toate cererile
ulterioare, până la închiderea browser-ului de exemplu. În acest mod, datele
provenite de la cereri HTTP anterioare rămân persistente pe server şi pot fi
accesate.
Elementul esenţial care permite păstrarea unei sesiuni este identificatorul
de sesiune, transmis prin controale ascunse sau prin mecanismul cookie-urilor de
la o cerere HTTP la alta. Pe baza acestui identificator unic sunt regăsite
informaţiile asociate respective sesiuni.
Sintetizând, etapele comunicaţiei client server devin:
1. Serverul web primeşte o cerere pentru o pagină aspx;
2. Serverul web localizează pagina pe hard-disk;
3. Serverul web transmite pagina motorului ASPX;
4. Motorul ASP.NET compilează pagina şi generează clasa asociată; dacă clasa
este deja generată de la o cerere anterioară, ea doar se instanţiază;
5. Motorul ASP.NET instanţiază clasa, realizează procesările necesare şi
generează obiectul răspuns (Response);
6. Serverul web trimite acest răspuns clientului.
2
<h3>Chestionar privind sistemul de operare folosit.</h3>
<form name="Form1" method="get" action="ServHTML.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwULLTE3MzcxMzg0OTUPZBYCAgMPZBYCAg8PFgIeCWlubmVyaHRtbAUEZWRlZWQYAQUeX19D
b250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgUFBG1hc2MFA2ZlbQUFTGludXgFBU1hY09TBQdXaW5kb3d
z8aNqClb46aYYRTLL0xBR1C1ZtA4=" />
<pre>
Nume: <input name="nume" type="text" id="nume" value="Ovidiu" />
Sexul: <input value="masc" name="sex" type="radio" id="masc" checked="checked"
/>masculin
<input value="fem" name="sex" type="radio" id="fem" />feminin
Interval de varsta:
<select name="varsta" id="varsta" size="1">
<option value="v_lipsa" id="Option1"> - </option>
<option value="v_sub_18" id="Option2">sub 18</option>
<option selected="selected" value="v_19_35" id="Option3">intre 19 si 35</option>
<option value="v_36_65" id="Option4">intre 36 si 65</option>
</select>
Sisteme de operare folosite:
<input name="Linux" type="checkbox" id="Linux" checked="checked" />Linux
<input name="MacOS" type="checkbox" id="MacOS" />MacOS
<input name="Windows" type="checkbox" id="Windows" checked="checked" /> Windows
<textarea name="comentarii" id="comentarii" cols="20" rows="2">Linux doar in
masini virtual.</textarea>
3
protected void Page_Load(object sender, EventArgs e){
// la prima incarcare a paginii se adauga un item in lista varsta
// si se stabileste indexul current din lista
if (!Page.IsPostBack) {
varsta.Items.Add("peste 65");
varsta.SelectedIndex = 0;
}
// daca s-a realizat deja submit se afiseaza valorile introduse
// in zona comentariilor
else {
String buf; // se creaza un sir de caractere
// se mareste zona comentariilor
comentarii.Rows = 6;
comentarii.Cols = 50;
// se schimba culoarea zonei
comentarii.Style.Add("background-color", "yellow");
// se scriu prin concatenare datele in buf
buf = "Ai ales urmatoarele valori:";
// numele introdus in campul nume
buf += "\nnume=" + nume.Value;
// sexul persoanei
if(masc.Checked) buf += "\nsexul=" + masc.Value;
else buf += "\nsexul=" + fem.Value;
// varsta persoanei
buf += "\nvarsta=" + varsta.Items[varsta.SelectedIndex].Text;
// se adauga pe rand sistemele de operare folosite
buf += "\nOS=";
// si se numara cele bifate
int osNr=0;
if (Linux.Checked) { buf += "Linux,"; osNr++; }
if (MacOS.Checked) { buf += "MacOS,"; osNr++; }
if (Windows.Checked) {buf += "Windows,"; osNr++;}
// daca nu s-a bifat niciunul, se afiseaza '-'
if (osNr == 0) buf += " - ";
// altfel se sterge ultima virgula
else buf = buf.Substring(0,buf.Length - 1);
// si se adauga si valoarea din campul comentarii
buf += "\ncomentarii=" + comentarii.Value;
// in final se scriu datele in textarea
comentarii.Value = buf;
} }
2
1.6. Controale web ASP.NET de bază
3
Pentru ilustrarea modalităţii de utilizare a controalelor web se vor
prezenta diferite aplicaţii. Bineînţeles că nici nu vor fi utilizate toate controalele
posibile, nici nu vor fi editate toate proprietăţile acestora. De asemenea nu se vor
utiliza nici toate metodele asociate şi nici nu se vor trata toate evenimentele
posibile. Abordările exhaustive – Refferences Book – au nevoie de mii de pagini.
De asemenea abordările de tipul – Developer Guide – utilizează sute de pagini
pentru a prezenta aspecte destul de tehnice.
Materialul de faţă îşi propune doar să fie un punct de plecare, să ofere o
imagine de ansamblu asupra posibilităţilor ASP.NET. Ulterior este posibilă
consultarea permanentă a help-ului, a documentaţiei MSDN şi a multitudinii de
tutoriale existente on-line. Această ultimă abordare se pretează cel mai bine
pentru îndeplinirea sarcinilor punctuale (How to...). De asemenea, tutorialele
disponibile on-line au o valoare adăugată prin aceea că includ aşa numitele Best
Practices, adică recomandările pentru o cât mai bună utilizare a controalelor.
Aşa cum se întrevede în acest punct al cursului, a învăţa ASP.NET
înseamnă a învăţa despre controalele web. Asta bineînţeles după ce a fost studiată
filosofia şi modul de lucru al motorului ASPX.
Includerea controalelor ASP.NET într-o aplicaţie aspx se poate realiza fie
prin Drag and Drop din Toolbox, fie în sursă, prin scrierea codului corespunzător.
De asemenea, editarea proprietăţilor se poate realiza fie în modul Source, cu
ajutorul meniului contextual inteligent, fie în modul Design, cu ajutorul
ferestrei proprietăţi (Properties Window). O abordare posibilă este şi cea mixtă,
cu vizualizarea în acelaşi timp a ambelor formate.
2
figura 1-28. Diferite scenarii de utilizare ale formularului
3
O variantă iniţială (fără tratarea evenimentelor) a codul fişierului
BasicWebControls.aspx este listat în continuare. Comentariile asociate codului
oferă explicaţiile necesare înţelegerii acestuia.
</form>
2
1.6.4. Tratarea evenimentelor asociate controalelor web ASP.NET
Un element esenţial al programării actuale este reprezentat de evenimente
(Events). Acestea sunt asociate diferitelor acţiuni la care participă controale
(încărcare, clic, schimbare valoare, etc) şi pot fi “tratate” prin anumite rutine.
Aceste rutine sunt apelate automat la apariţia evenimentului.
Controalele ASP.NET oferă posibilitatea tratării unor evenimente, în
funcţie de tipul efectiv al controlului. Evenimentele asociate unui control pot fi
vizualizate în fereastra Properties, tab-ul Events. Evenimentele apar independent
de voinţa programatorului. Acesta poate însă asocia unui eveniment o anumită
procedură care să execute anumite acţiuni la apariţia evenimentului.
Pentru ca unui eveniment al unui control web să i se asocieze o rutină de
tratare, cel mai simplu este să se facă dublu clic pe acest eveniment, în fereastra
Properties.
În acest moment apar două modificări esenţiale:
În fişierul .aspx apare asocierea între eveniment şi o rutină de tratare (cu
nume predefinit), în cadrul controlului web;
În fişierul .cs se oferă posibilitatea introducerii codului asociat.
Ilustrăm acest lucru prin indicarea modificărilor ce apar în cazul
controlului chackbox instiintare.
3
Un element foarte important este atributul AutoPostBack setat la valoarea
true. Acesta îi permite controlului instiintare să efectueze un apel la server pentru
a efectua modificările necesare. Un efect colateral este reâncărcarea paginii,
aceasta deoarece codul ce trebuie executat este server-side şi nu client-side (e.g.
JavaScript). Astfel, toate evenimentele care vor avea asociate proceduri de tratare
şi care aparţin controalelor cu posibilitate de PostBack, determină reîncărcarea
paginii.
Acest lucru este la prima vedere destul de supărător deoarece într-un
formular poate fi necesar tratarea destul de multor evenimente şi implicit
reîncărcarea de multe ori a paginii. Totuşi:
La ora actuală conexiunile Internet sunt de obicei suficient de bune pentru a
permite reîncărcarea practic instantanee;
Prin anumite tehnici este posibilă reîncărcarea doar a porţiunii modificate din
fişier;
Cu ajutorul tehnologiei Ajax, transferul datelor între client şi server se poate
realiza “pe dedesubt” fără ca utilizatorul să observe reîncărcarea paginii;
Pentru optimizare, poate fi inclus cod JavaScript care să efectueze la client
modificările necesare (bineînţeles că se pierde parţial din simplitatea
modelului de programare oferit de ASP.NET);
Pe viitor, este posibilă apariţia de noi versiuni de controale, cu facilităţi de
indicare a locului în care să ruleze procedurile de tratare a evenimentelor; în
cazul indicării platformei client, codul JavaScript necesar ar putea fi generat
automat.
În continuare sunt indicate toate modificările ce apar în fişierul
BasicWebControls.aspx precum şi listarea fişierului BasicWebControls.aspx.cs.
<!--. . . . . . . . . . .-->
<asp:RadioButton ID="fizica" GroupName="tip" runat="server"
AutoPostBack="true" Text="Persoana fizica"
oncheckedchanged="fizica_CheckedChanged"/>
<asp:RadioButton ID="juridica" GroupName="tip" runat="server"
AutoPostBack="true" Text="Persoana juridica"
oncheckedchanged="juridica_CheckedChanged"/><br/>
<!--. . . . . . . . . . .-->
<asp:CheckBox ID="instiintare" runat="server" AutoPostBack="true"
Text="Doresc sa fiu instiintat pe email despre noutati!"
oncheckedchanged="instiintare_CheckedChanged"/>
<!--. . . . . . . . . . .-->
<asp:Button ID="incarca" runat="server" Text="Incarca imaginea"
onclick="incarca_Click" /><br/>
<!--. . . . . . . . . . .-->
2
public partial class BasicWebControls : System.Web.UI.Page{
// procedura apelata la incarcarea paginii
protected void Page_Load(object sender, EventArgs e){
// daca pagina este la prima incarcare
// se ascunde controlul textbox email
// in controlul imagine se incarca o imagine alba
if (!IsPostBack){
fizica.Checked = true;
email.Visible = false;
imagine.ImageUrl = "~/Imagini/Blank.jpg";
}
}
3
1.7. Controale web ASP.NET pentru gestiunea accesului utilizatorilor
2
1.7.2. Afişarea informaţiilor despre starea sesiunii
Pentru ca procedura de acces să fie cu adevărat funcţională, ar mai fi
nevoie de:
furnizarea unei legături Login/Logout (controlul LoginStatus);
afişarea numelui utilizatorului logat, sau nimic pentru accesul anonim (controlul
LoginName);
afişarea unui mesaj diferenţiat pentru membrii respectiv utilizatorii anonimi
(controlul LoginView).
Toate aceste controale ar trebui amplasate în MasterPage, pentru a fi
vizibile permanent. De aceea s-a creat în banda superioară a MasterPage un tabel
cu două coloane. În prima coloană este pus controlul LoginStatus şi astfel se oferă
permanent accesul la legăturile Login respectiv Logout. În a doua coloană este pus
controlul LoginView, care în modul AnonymousTemplate afişează “Nu eşti
logat.” iar în modul LoggedInTemplate afişează “Eşti logat cu utilizatorul:”
urmat de controlul LoginName (figura 1 -30).
Controlul LoginView este foarte flexibil deoarece permite includerea altor
controale (de exemplu a controlului LoginName). De asemenea, prin editarea
proprietăţii RoleGroups a sa se pot stabili templaturi diferite pentru fiecare rol
definit în cadrul site-ului.
Pentru testare, s-a pus la proprietatea DestinationPageUrl a controlului
Login pagina Login.aspx. Aceasta înseamnă că în caz de accesare reuşită, se va
afişa tot pagina Login.aspx. Totuşi starea şi mesajele diferenţiate vor fi vizibile în
zona MasterPage.
3
1.7.3. Crearea unui utilizator nou folosind controlul CreateUserWizard
Capabilităţile unui control web pot fi deosebit de puternice. Aşa de
exemplu, el poate avea acces la baza de date fără ca programatorul să fie
preocupat de detaliile de conectare, selectare a informaţiilor, etc.
Accesul la baza de date poate fi realizat atât pentru obţinere de informaţii
(controalele anterioare) cât şi pentru inserare/editare de informaţii (controalele
CreateUserWizard, Change Password, PasswordRecovery).
Pentru a demonstra capabilităţile controlului CreateUserWizard, se va
crea o nouă pagină numita CreareUtilizator.aspx. Această pagină va fi apelată la
acţionarea legăturii Creaza-ti un cont, aflată în stânga paginii Login.aspx. Această
legătură va fi implementată sub forma unui control web de tip HypeLink, având
setată proprietatea NavigateUrl în aşa fel încât să indice către pagina dorită.
În pagina CreareUtilizator.aspx trebuie inclus controlul
CreateUserWizard, cu o serie de modificări:
Se traduc toate câmpurile implicate;
Se alege schema Professional prin accesarea opţiunii Auto Format din meniul
Common Tasks;
Evenimentului CreatedUser trebuie să i se asocieze codul următor care conferă
utilizatorului un anumit rol (cel de membru):
Roles.AddUserToRole(CreateUserWizard1.UserName, "membru");
using System.Web.Security;
2
figura 1-31. Exemplu de creare utilizator şi logare a acestuia
3
figura 1-32. Exemplu de utilizare a controlului ChangePassword
Pentru cazul în care utilizatorul şi-a uitat parola, trebuie realizată pagina
ParolaUitata.aspx care să conţină controlul PasswordRecovery. Acest control
este relativ dificil de testat localhost deoarece are nevoie de accesul la un server
SMTP corect configurat pentru a putea trimite noua parolă pe emailul
utilizatorului. Legătura către această pagină trebuie poziţionată în pagina
Login.aspx, aşa cum este ilustrat în figura 1 -33.
2
1.8. Controale web ASP.NET pentru navigarea în cadrul site-ului
În zona Navigation există trei controale: Menu - pentru implementarea
meniurilor; TreeView - pentru o organizare arborescentă alternativă a itemilor
meniului şi SiteMapPath - pentru vizualizarea poziţionării în cadrul site-ului.
3
Cele două modalităţi de vizualizare sunt prezentate în paralel în figura 1
-35. Ambele controale oferă posibilităţi de expandare/contracţie a structurii.
Controlul Menu este afişat implicit contractat. Pentru a impune acelaşi
comportament şi controlului TreeView (care altfel ar fi afişat implicit expandat),
trebuie stabilită proprietatea ExpandDepth la valoarea 1.
2
Pentru a realiza acest lucru este necesară crearea unui fişier de tipul Site
Map (opţiunea Add new item... din meniul contextual din Solution Explorer).
Fişierul trebuie denumit cu extensia sitemap (e.g. Web.sitemap). El conţine o
descriere xml a itemilor din meniu cu precizarea valorilor proprietăţilor sub forma
unor câmpuri xml, aşa cum este ilustrat în listing-ul anterior.
Pentru a crea legătura dintre un control Menu sau TreeView şi fişierul
Web.sitemap, trebuie aleasă opţiunea Choose Date Source: - <New Data
Source...> din meniul Common Tasks iar apoi trebuie indicată varianta Site Map.
Un alt aspect referitor la meniuri constă în afişarea diferenţiată a anumitor
itemi, în funcţie de rolul membrului. Aşa de exemplu, legătura către pagina
SchimbareParola.aspx ar trebui să fie disponibilă doar după autentificare, adică
doar utilizatorilor din cu rolul membru.
Această facilitate necesită mai întâi activarea posibilităţii de afişare
diferenţiată a itemilor din meniu (TrimmingEnabled) prin editarea fişierului
Web.config. Pentru aceasta, chiar înainte de eticheta </system.web>, trebuie
adăugat codul următor:
3
1.9. Controale web ASP.NET pentru validări
De multe ori apare necesitatea de a efectua verificarea datelor pe care un
utilizator le introduce într-un control dintr-un formular. Bineînţeles că toate
validările necesare pot fi realizate în cadrul unei proceduri apelate trimiterea
datelor pe server. Cu toate acestea, pentru a reduce cantitatea de cod necesară a fi
scrisă, proiectanţii ASP.NET au inclus o serie de controale de verificare.
Un control din această categorie este asociat unui alt control pe care
trebuie să-l verifice. Asocierea se realizează cu ajutorul proprietăţii
ControlToValidate. De asemenea, la client, controlul de verificare nu are o
reprezentare vizuală (nu se vede) decât în cazul în care depistează o eroare. În
acest moment, se afişează un mesaj, specificat de proprietatea ErrorMessage.
Modul în care este afişat acest mesaj se specifică prin intermediul
proprietăţii Display, care poate avea valorile Static (se indică zona de afişare a
mesajului), Dynamic (mesajul se afişează într-o zonă creată dinamic) sau None
(mesajul nu este afişat lângă control dar poate fi afişat cu ajutorul controlului
ValidationSummary).
Pentru testarea rapidă a acestor controale se poate realiza o pagina numita
Validari.aspx care să conţină controale text şi un buton care să aibă tratat
evenimentul onclick, chiar dacă corpul procedurii de tratare este vid. Controalele
de validare ce trebuie testate se asociază pe rând controalelor text iar la apăsarea
butonului, dacă anumite reguli nu sunt respectate, anumite mesaje de eroare vor fi
afişate în pagina clientului.
2
1.9.2. Controalele RegularExpressionValidator şi CompareValidator
Controlul RegularExpressionValidator oferă posibilitatea testării datelor
de intrare din punct de vedere al unui anumit patern aşteptat. Cu ajutorul unei
secvenţe de cod scrise în dreptul proprietăţii Validation Expression se indică
numărul de litere sau cifre aşteptate sau o anumită combinaţie. Exemplul urrmător
se referă la validarea unui câmp CNP care trebuie să fie alcătuit din exact 13 cifre.
3
1.9.3. Controlul CustomValidator
Uneori sunt necesare anumite validări care nu pot fi realizate cu
controalele prezentate până acum. Aşa de exemplu, se poate solicita
restricţionarea valorilor la cele divizibile cu 5. Pentru asemene cazuri, există
controlul CustomValidator. Acesta conţine proprietatea onServerValidate care
este asociată unei proceduri ce returnează adevărat sau fals. Procedura este scrisă
de programator şi poate să conţină teste oricât de flexibile.
Exemplul următor ilustrează utilizarea unui astfel de control pentru
verificarea divizibilităţii cu 5. Sunt utilizate de asemenea încă două controale de
validare pentru testarea introducerii unei valori si pentru testarea tipului valorii,
tip care trebuie să fie întreg.
<asp:TextBox ID="camp5" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage="Campul este obligatoriu."
ControlToValidate="camp5"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator3" runat="server"
ErrorMessage="Trebuie sa fie un numar intreg."
ControlToValidate="camp5" Type="Integer" Operator="DataTypeCheck">
</asp:CompareValidator>
<asp:CustomValidator ID="CustomValidator1" runat="server"
ErrorMessage="Numarul trebuie sa fie divizibil cu 5."
ControlToValidate="camp5" OnServerValidate="verificaCamp5">
</asp:CustomValidator>
2
1.10. ASP.NET şi SQL server. Elemente introductive.
3
figura 1-38. Date de test ale tabelelor Angajaţi şi Firme
2
1.10.2. Utilizarea controlului DataList
Mediul de dezvoltare VWD oferă un număr mare de controale pentru
afişarea în diferite formate a datelor în baza de date. Cea mai simplă modalitate de
afişare a acestora este oferită de controlul DataList. Pentru exemplificare, se va
crea pagina TestDataList.aspx, în care se va integra acest control. Paşii urmaţi
pentru configurarea acestui control sunt în mare parte aceeaşi şi pentru celelalte
controale care au drept scop afişarea datelor din baza de date.
În primul rând trebuie specificată sursa datelor, prin indicarea opţiunii
Choose Data Source, <New data source...> din meniul Common Tasks. Ulterior
se alege varianta Database, specificându-se astfel faptul că se va lucra cu o bază
de date SQL Server. Apoi se alege şirul de conectare (Connection String) implicit.
În final trebuie specificată interogarea care va oferi datele, eventual utilizând
facilităţile vizuale de construcţie. Pentru exemplificare, s-a considerat ca sursă a
datelor vederea creată anterior (test) cu ordonarea înregistrărilor ascendent după
nume şi apoi ascendent după prenume.
În al doilea rând trebuie indicată modalitatea de afişare a datelor. Pentru
aceasta se poate alege o variantă din Auto format... completată cu opţiuni
specificate în Property Builder (ambii itemi se regăsesc în meniul Common
Tasks). Pentru exemplificare s-a stabilit afişarea tabelară, pe 3 coloane, cu ordinea
orizontală a itemilor (de la stânga la dreapta). Rezultatul poate fi observat în
figura 1 -40.
3
Stabilirea sursei datelor pentru acest control se realizează în mod identic
cu controlul DataList. Tot în meniul Common Tasks este posibilă bifarea
opţiunilor Enable Paging - paginare, Enable Sorting - sortare, Enable Selection -
selectare, cu semnificaţia că ele vor fi accesibile utilizatorului final.
Oferirea posibilităţilor de editare şi ştergere poate fi realizată prin setarea
la valoarea True a proprietăţilor AutoGenerateEditButton şi respectiv
AutoGenerateDeleteButton. De asemenea, pot fi stabilite coloanele care să fie
afişate (Edit Columns... şi Add New Columns... ).
O posibilă vizualizare a datelor, prin utilizarea controlului GridView, este
ilustrată în figura 1 -41.
2
1.11.3. Controlul DetailsView
Acest control permite vizualizarea informaţiilor în format detaliat, pentru
fiecare înregistrare din vederea asociată. În schimb nu se mai oferă imaginea de
ansamblu asupra datelor din tabel întrucât înregistrările pot fi gestionate doar
individual. După stabilirea formatării, a sursei datelor şi a facilităţilor oferite
(paginare, ştergere, editare, inserare) într-un mod similar cu controlul GridView,
se obţine un rezultat similar cu cel ilustrat în figura 1 -43.
3
Controlul DetailsView va conţine câmpurile din tabelul Angajati, pentru
înregistrarea selectată în GridView. Iniţial trebuie stabilită proprietatea
DataKeyName a controlului GridView la valoarea nume, pentru a oferi un criteriu
pentru selectarea înregistrării afişată în DetailsView. Ulterior trebuie realizată
conectarea controlului DetailsView cu GridView, în mod similar cu conectarea
controlului GridView cu DropDownList.
Dacă la nivelul controlului GridView se activează opţiunea de Select iar
în controlul DetailsView opţiunile Insert/Edit/Delete, grupul de controale va arăta
ca în figura 1 -44.
2
figura 1-45. Modalitatea de afişare a datelor utilizând controlul FormView
3
Ambele avantaje se concretizează într-un aspect mai plăcut al paginii la
interacţiuni care necesită schimb de informaţii între client şi server. Pe deoparte se
reactualizează doar zona din pagină care suferă modificări iar pe de altă parte
transferul de date client-server se realizează fără ca să determine “refresh-ul”
paginii.
Din punctul de vedere al utilizatorilor de Internet, tehnologia AJAX
permite o interfaţă grafică, cât şi un mod de prezentare a informaţiilor profesional
şi performant, permiţând accesul direct doar la informaţiile necesare utilizatorului.
În acelaşi timp, gradul de interactivitate a site-urilor ce utilizează tehnologii
AJAX este foarte ridicat. Utilizatorii au posibilitatea de a interacţiona cu site-ul,
într-un mod foarte asemănător cu aplicaţiile desktop.
Din punctul de vedere al dezvoltatorilor şi al administratorilor de reţea,
tehnologiile AJAX permit o performanţă ridicata a site-ului dezvoltat, fără a fi
necesară creşterea resurselor hardware ale sistemelor. Prin intermediul AJAX,
utilizatorii site-ului pot accesa informaţiile de care au nevoie, fără a mai fi nevoie
procesarea întregului site, a întregii interfeţe grafice, sau a tuturor modulelor
prezente într-o pagina.
La baza acestei tehnologii stă JavaScript, şi în principal obiectul
XMLHttpRequest. Acesta permite realizarea de interogări spre server-ul web (http
request) în mod direct, fără reîncărcarea paginii. Lista completă a tehnologiilor
implicate este prezentată în continuare:
XHTML şi CSS pentru prezentare;
Modelul Obiectual al Documentului (Document Object Model) pentru
afişarea în mod dynamic a interacţiunilor cu datele;
XML şi XSLT pentru schimbul, gestiunea şi afişarea datelor;
Obiectul XMLHttpRequest pentru realizarea comunicaţiei asincrone între
client şi server;
JavaScript pentru a realiza legătura dintre aceste tehnologii.
2
actualizarea datelor se realizează mai rapid deoarece nu se mai reîncarcă toată
pagina şi nu mai apare fenomenul de “clipire” nici măcar în cadrul zonei indicate
de UpdatePanel.
Controlul UpdateProcess oferă posibilitatea afişării unui mesaj atunci
când încărcarea datelor dintr-un UpdatePanel durează mai mult decât un anumit
timp minim. Acest control se amplasează în pagină în locul în care se doreşte
afişarea mesajului. El se conectează cu un anume UpdatePanel prin intermediul
proprietăţii AssociatedUpdatePanelID. Tot în cadrul proprietăţilor se specifică
timpul în milisecunde după care să fie afişat mesajul (DisplayAfter), implicit setat
la 500 ms.
În spaţiul oferit de acest control pot fi amplasate mai multe elemente, cea
mai simplă modalitate de afişare a mesajului fiind un text simplu. Oricum, este
obligatorie inserarea măcar a unui text pentru că în acest fel se defineşte tag-ul
ProgressTemplate.
Pentru a putea testa funcţionalitatea acestui control, trebuie stabilită la 0
valoarea proprietăţii DisplayAfter. Altfel, datorită încărcării rapide a resurselor pe
localhost, mesajul nu ar mai fi activat. În continuare este prezentată modalitatea
de poziţionare a controalelor în codul sursă.
<!--. . . . . . . . . . -->
</asp:UpdatePanel>
3
Serviciile web (Web Services) reprezintă un model general de dezvoltare
a unor aplicaţii care sunt independente de platformă (sistemul de operare folosit).
Ele nu folosesc alte protocoale în afară de cele deja existente: SOAP - Simple
Object Acess Protocol şi respectiv XML - Extensible Markup Language. Acest
fapt le conferă un avantaj absolut faţă de tehnologiile similare anterioare precum
DCOM - Distributed Component Object Model , RMI - Remote Method
Invocation sau IIOP - Internet Inter-Orb Protocol.
Serviciile web utilizează HTTP (clasicul port 80) şi SOAP pentru a oferi
anumite date ale companiei in Internet. Apelurile SOAP sunt convertite server-
side în apeluri de metode, iar rezultatele sunt organizate utilizând XML şi
furnizate clientului.
Pentru crearea unui serviciu web cu în cadrul VWD, trebuie aleasă
opţiunea Add New Item ... din meniul contextual obţinut în Solution Explorer.
Ulterior se alege Web Service şi se furnizează un nume pentru acesta. Se observă
că extensia fişierului creat nu mai este .aspx ci .asmx. Codul generat este ilustrat
în listingul următor.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX,
// uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class WebService2 : System.Web.Services.WebService {
public WebService2 () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
return "Hello World";
} }
Pentru crearea unor metode apelabile de la distanţă este necesară crearea
de proceduri precedate de indicativul [WebMethod]. În continuare se creează
metode de conversie a exprimării temperaturii din sistemul Fahrenheit în sistemul
Celsius şi invers, în cadrul fişierului ConvertorTemperatura.asmx. Aceste metode
primesc o variabilă de tip String reprezentând valoarea temperaturii (pentru valori
care nu sunt numere întregi se poate folosi atât notaţia cu punct cât şi notaţia cu
virgulă) şi returnează o altă variabilă de tipul String reprezentând rezultatul
conversiei sau mesajul “Invalid number!”.
2
// converteste o temperatura exprimata in grade Fahrenheit
// intr-o temperatura exprimata in grade Celsius
[WebMethod]
public string ConvFahrenheitLaCelsius(String strFahr) {
// variabila pentru pastrarea valorii numerice
double dblFahr = 0;
// rezultatul conversiei de la String la double
bool rezultat = true;
// se elimina spatiile albe
strFahr.Trim();
// se converteste de la formatul cu virgula
// la formatul cu punct
strFahr.Replace(",",".");
// se incearca realizarea conversiei
try{
rezultat = Double.TryParse(strFahr,out dblFahr);
}
// daca apare exceptie, rezultatul va fi false
catch(System.ArgumentException e){
rezultat = false;
}
if (!rezultat)
return "Invalid number!";
else
return ""+(((dblFahr-32)/9)*5);
}
// converteste o temperatura exprimata in grade Celsius
// intr-o temperatura exprimata in grade Fahreinheit
[WebMethod]
public string convCelsiusLaFahrenheit(String strCels)
{
double dblCels = 0;
bool rezultat = true;
strCels.Trim();
strCels.Replace(",", ".");
try{
rezultat = Double.TryParse(strCels, out dblCels);
}
catch (System.ArgumentException e){
rezultat = false;
}
if (!rezultat)
return "Invalid number!";
else
return "" + (dblCels * 9 / 5 + 32);
}
3
figura 1-46. Interfaţă cu serviciul web ConvertorTemperatura.asmx
2
figura 1-48. Rezultatul metodei ConvFarenheitLaCelsius (100)
3
figura 1-50. Adăugarea în proiect a unei referinţe către serviciul web
2
Namespace-ul XML, cu o multitudine de clase necesare procesării datelor în
acest format;
Designer-ul XML, instrument integrat în VWD pentru facilitarea scrierii şi
editării documentelor XML şi respectiv XSL;
Controlul web XML, utilizabil pentru formatarea rapidă a datelor;
Accesul la modelul obiectual al documentelor XML (XML Document Object
Model).
3
1.14.2. Controlul web ASP.NET XML
Acest control vine în întâmpinarea nevoii de a afişa datele dintr-un fişier
.xml conform unei descrieri dintr-un fişier .xsl. Proprietăţile acestui control sunt:
DocumentSource indică URL-ul sau calea către documentul XML;
TransformSource se referă la URL-ul sau calea către foaia de stiluri XSLT;
Document oferă posibilitatea specificării în timpul rulării (runtime) unei
referinţe către o instanţă a clasei XmlDocument;
Transform permite specificarea în timpul rulării a unei instanţe a clasei
XmlTransform.
2
Referinţe