Programmazione Sviluppo: alla scoperta di Visual Web Developer … · 2006-07-04 · Lezione 1 Introduzione a Visual Web Developer 2005 Express Edition - Perché scegliere VWD - Installazione

La versione 2.0 di ASP.NET ènata per rispondere allematurate esigenze della

comunità degli sviluppatoriWeb, sempre alla ricerca diuna piattaforma che consentaloro di seguire le moderne esi-genze di costruzione di un sitoWeb. Oggi un'applicazioneWeb deve infatti svolgere unaserie di operazioni che spazia-no in diversi ambiti:• interrogare e aggiornare con

facilità un database• utilizzare menu di naviga-

zione, “briciole di pane”,mappe del sito

• sfruttare una visualizzazio-ne a “template”, in cui ognipagina condivide con le al-tre uno stile comune, perso-nalizzando e specializzandosolo alcune parti

• riconoscere gli utenti regi-strati al sito, e permetteresolo a questi l'accesso a ta-lune sezioni

• in qualche caso specifico,consentire ai visitatori dipersonalizzare contenuti egrafica del sitoSi tratta, come è facile capi-

re, di funzionalità di una certacomplessità. In passato lo svi-luppatore del sito, in concertocon chi realizzava l'HTML del-la pagina, avrebbe dovuto scri-vere una quantità non indiffe-rente di righe di codice perprodurre un sito con questefunzionalità. Ma fortunata-mente oggi non è più necessa-rio scrivere completamente amano centinaia (se non mi-gliaia) di righe di codice pergestire un sito del genere. Uno

Benvenuti alla prima pun-tata del corso di sviluppodedicato al mondo di Mi-

crosoft ASP.NET e di MicrosoftVisual Web Developer 2005 Ex-press Edition. Nel corso diquesta e delle prossime pun-tate scopriremo insieme comesia possibile realizzare sitiWeb di una certa complessità

(cioè dinamici, che sfruttino lepotenzialità di un database)senza dover necessariamentepadroneggiare appieno un lin-guaggio di programmazione e,cosa non meno importante,del tutto gratuitamente graziea strumenti liberamente scari-cabili dal sito Microsoft. Tuttoquesto è reso possibile dalle

potenzialità della nuova ver-sione 2.0 di ASP.NET, la piat-taforma Microsoft per la crea-zione di applicazioni web edalla perfetta integrazione diquesta architettura all'internodi Microsoft Visual Web Deve-loper 2005 Express Edition, lostrumento di sviluppo visualeMicrosoft rivolto soprattutto

agli sviluppatori Web non pro-fessionisti.

Il corso ha un importanteestensione su DVD, dove tro-verete le guide, i kit, i video-corsi e le lezioni ufficiali Mi-crosoft. Oltre 650 MB di mate-riale didattico per scoprire tut-te le sfaccettature del tool disviluppo.

PC Open Luglio/Agosto 200688

Microsoft Visual Web Developer 2005 Express Edition 1a lezione

� Programmazione

Sviluppo: alla scoperta diVisual Web Developer Express

Al via un corso in quattro lezioni per utilizzare al meglioil tool di programmazione Microsoft. Che è completamente gratuito e permette di realizzare siti Web anche ai novizi e agli utenti alle prime armi

Lezione 1Introduzione a Visual WebDeveloper 2005 Express Edition- Perché scegliere VWD - Installazione e registrazione- Nozioni generali su Internet e sulle applicazioni Web

- L'ambiente di VWD - Semplice esempio con creazione di un nuovo progetto

Lezione 2Visual Web Developer all'opera- Il modello di programmazioneASP.NET 2.0

- I controlli- L'oggetto page- Eventi - Da ambiente visuale a codicesorgente

- Pubblicare un sito da locale aremoto

Lezione 3La grafica del sito- Web User Controls- Master pages- Cascading Style Sheets- Temi- Sitemap

Lezione 4Creare applicazioni con database- Lavorare con i database- SQL Server 2005 Express- VWD e i database- Creare un database- Data connections- Data sources- Data-bound controls

IL CALENDARIO DELLE LEZIONI�

di Luca Zatta

Lezioni, webcast,materiale didattico

ufficialeMicrosoft

allegato a PC Open

1 Perché scegliere ASP.NET 2.0 e VWD

strumento di sviluppo visualecome Microsoft Visual WebDeveloper 2005 Express Edi-tion (d'ora in poi lo abbrevie-remo in VWD) può infatti crea-re questa struttura di codicein modo del tutto trasparenteallo sviluppatore, senza co-munque negargli la possibilitàdi intervenire per estenderlo opersonalizzarlo direttamente.In questo modo si ottiene ilmeglio dei due mondi: attivitàripetitive possono essere ge-stite in modo totalmente auto-matico così da potersi con-centrare sul vero valore ag-giunto del sito, ovvero la suaarchitettura e la progettazionedelle sue diverse funzionalità.Questo ha anche il vantaggiodi consentire il riutilizzo delcodice (caratteristica moltocara a tutti gli sviluppatori), ol-tre a favorirne la semplifica-zione.

Un ulteriore punto a favoredi ASP.NET e VWD è che sono

scaricabili gratuitamente dalsito Microsoft. Inoltre, una vol-ta registrata la propria copiadi VWD (sempre in modo gra-tuito), non ci saranno più vin-coli temporali al suo utilizzo.E, cosa non meno importante,l'intero ambiente di sviluppodi VWD è stato completamen-te tradotto in italiano, così darenderne ancora più facile l'a-dozione.

La prima versione diASP.NET è uscita ormai daqualche anno e fin dalla suacomparsa una nutrita comu-nità di sviluppatori ha realiz-zato dei progetti che ne sfrut-tano appieno le caratteristi-che. Molti di questi hanno poideciso di rendere disponibilegratuitamente (alcuni anchecon licenza open source) il co-dice sorgente di questi proget-ti, che spaziano dai portali aglialbum fotografici, dai sistemidi weblogging alle aste on line.Questo è sicuramente un ulte-



L’ambiente di lavoro di Visual Web Developer 2005 Express Edition

1Sito statico e dinamicoUn sito statico è un sito realizzato utilizzando esclusivamentepagine HTML. Solitamente si sceglie di realizzare un sito staticoquando questo viene aggiornato poco frequentemente e il numerodi pagine di cui è composto è molto limitato. Un sito statico,inoltre, produce lo stesso risultato a tutti i visitatori che viaccedono, essendo impossibile, con solo codice HTML,personalizzare le pagine per i diversi visitatori. Si sceglie invece direalizzare un sito dinamico quando questo deve possedere unminimo di interattività, quando cioè si vuole dare l'opportunità alvisitatore di interagire con le pagine del sito. Un sito con unweblog, ad esempio, è molto spesso un sito dinamico in quantoconsente a tutti i visitatori del sito di esprimere dei commenti checompaiono nella stessa pagina in cui l'autore inserisce i propriinterventi. Oggi molti dei siti in cui siamo abituati a navigare sonodinamici e la percentuale, vista la diffusione di strumenti con VWDche permettono anche a chi non è programmatore professionistadi realizzare siti dinamici, è destinata ad aumentare enormementein futuro. Per chi fosse interessato ad approfondire l'argomentoconsigliamo di leggere la puntata introduttiva del corso WebDeveloper ASP, pubblicata da PC Open (è che trovate nel DVDBase allegato, nella cartella CD3).Anche per chi si preoccupa (correttamente) di realizzare siti chesiano conformi ai (non più recentissimi) standard Web(XHTML,CSS) sono in serbo piacevoli sorprese: la generazione delcodice di ASP.NET rispetta le specifiche più recenti del W3C. Sitratta del primo passo per costruire siti che siano accessibili,ovvero fruibili da browser e sistemi operativi eterogenei, ma ancheda persone con diversi gradi di abilità. E, vale la pena ricordarlo,realizzare un sito conforme agli standard vuol anche dire facilitarela sua indicizzazione da parte dei motori di ricerca, migliorando intaluni casi la sua posizione nella pagina dei risultati.Siete convinti anche voi che valga la pena provare questoframework e questo ambiente di sviluppo gratuiti? Procediamoallora al loro download e installazione.

riore invito a provare ASP.NET:troverete decine di progettiche potete analizzare, provareed estendere secondo le vo-stre esigenze e in taluni casiusare come soluzioni chiavi inmano.

VWD evita anche allo svi-luppatore la necessità di do-ver installare diversi prodottisul suo PC, come un database(completo di un gestore di da-

tabase) e un Web server. Il pro-cesso di installazione che ve-dremo tra poco vi inviterà in-fatti a installare entrambi que-sti prodotti, e questo vi per-metterà inoltre di gestirne lecaratteristiche direttamenteall'interno dell'ambiente di svi-luppo. Visual Web DeveloperExpress è una vera e propriapiattaforma integrata di svi-luppo.

2 Installare e registrare Visual Web Developer

L’installazione nel proprioPC di ASP.NET e di VWDè una procedura molto

semplice e in buona parte tra-sparente allo sviluppatore.ASP.NET fa inoltre parte diquello che si chiama .NET Fra-mework (o, all'italiana, Fra-mework .NET), cioè la piat-taforma Microsoft usata comebase per lo sviluppo di appli-cazioni Windows e Web. L'in-stallazione di VWD può avve-

nire per una qualunque delleseguenti piattaforme: Micro-soft Windows XP (con ServicePack 2), Microsoft WindowsServer 2003 (con Service Pack1) o Microsoft Windows 2000(con Service Pack 4). Per undettaglio degli altri requisiti disistema potete fare riferimen-to alla pagina http://www.mi-crosoft.com/italy/msdn/pro-dotti/vs2005/editions/down-load/wdd.mspx#EJD.

È interessante in particolarenotare come non sia stretta-mente richiesta, come avvieneper altri prodotti, la versioneProfessional di Microsoft Win-dows XP per far funzionare gliesempi realizzati, ma sia suffi-ciente anche la versione Ho-me del sistema operativo.VWD dispone infatti, ne abbia-mo accennato poco fa, di unproprio leggero server Web,grazie al quale è possibile fare

a meno (ma solo, ovviamente,in fase di test), del più com-pleto Internet Information Ser-vices (IIS). Inoltre, come pote-te immaginare, l'integrazionedi VWD e il server di sviluppoASP.NET è perfetta.

Detto questo, scarichiamo ilFramework .NET e VWD da In-ternet e installiamoli sul no-stro PC. Il download, vale lapena dirlo, consta di alcunedecine di MB di file, per cui



l'operazione è sconsigliata achi disponga di connessionialla rete particolarmente len-te.

Per prima cosa aprite Inter-net Explorer e andate all'indi-rizzo www.microsoft.com/i t a l y / m s d n / p r o d o t t i /vs2005/editions/download/wdd.mspx e selezionate la vo-ce Scarica il file eseguibile perinstallare il software in italiano.Alla richiesta del browser disalvare o aprire il file in ogget-to scegliete di salvarlo in unacartella di vostro piacimento.Si tratta della prima parte del-l'eseguibile che vi guiderà nelcorso dell'intero processo diinstallazione.

Eseguite a questo punto ilprogramma dalla cartella incui l'avete salvato. La primaschermata del processo di re-gistrazione chiede la vostra di-sponibilità per inviare a Mi-crosoft delle statistiche anoni-me relative al setup del pro-dotto. La scelta sta a voi, madal momento che queste infor-mazioni parteciperanno a ren-dere le prossime versioni delprodotto più vicine alle vostreesigenze, potrebbe essere unabuona idea quella di consen-tirne l'invio selezionando l'op-portuna casella.

Dopo aver accettato le con-dizioni di utilizzo vi verrà chie-sto se installare, oltre a VWD,Microsoft MSDN (MicrosoftDeveloper Network) 2005 Ex-press Edition e Microsoft SqlExpress Edition 2005. Per gliesempi che affronteremo nelcorso delle prossime puntatesarà necessaria la presenza diSql Server Express, per cui se-lezionate la casella che lo ri-guarda.

Microsoft Sql Server è unaversione perfettamente fun-zionante del database Micro-soft per eccellenza, Sql Server,di cui eredita molte delle ca-ratteristiche. In particolare,Microsoft Sql Express, comeapprofondiremo in una punta-ta dedicata ai database, è par-ticolarmente indicato per losviluppo di progetti personalio che comunque siano acce-duti da un numero limitato diutenti. MSDN riguarda invecela utile e completa documen-tazione relativa a ASP.NET 2.0e anche a VWD. A meno chenon abbiate poco spazio su di-sco rigido anche l'installazionedi questo pacchetto è calda-mente consigliata.

A questo punto il program-ma di installazione procederà ascaricare da Internet i pacchet-ti necessari al funzionamento diVWD tra cui, se non è già instal-lata sul PC, la più recente ver-sione del framework .NET (econ essa ASP.NET). A un certopunto dell'installazione, dopoil download di diversi file, ver-

rete anche avvisati che se lo vo-lete potete interrompere la con-nessione a Internet, in quantonon più necessaria.

Registrare il prodotto

Microsoft Visual Web Deve-

loper adesso è a vostra com-pleta disposizione, gratuita-mente. E per poterlo far vo-stro per sempre è sufficienteregistrare il prodotto sul sitoMicrosoft, così da ottenereuna licenza di uso perpetua.Un'operazione che dura pochiminuti e che vale la pena di fa-re subito dopo l'installazione

Per migliorare il prodotto è possibile inviare delle statisticheanonime sul suo utilizzo

2

Il contratto di licenza che illustra le clausole di utilizzo delsoftware

3

Oltre a VWD, vale la pena installare Sql Server Express e ladocumentazione MSDN

4

La procedura di installazione di VWD verifica i pacchetti noninstallati e li scarica dal sito Microsoft

5

Terminata l'installazione, si può registrare subito il prodotto

6

La schermata per la registrazione di VWD

7



per non rischiare, dopo 30giorni, di non poter più utiliz-zare l'ambiente di sviluppo.

Per registrare il prodotto sipuò procedere in diversi mo-di. Il più semplice è quello dicliccare sul link che vi saràproposto al termine della pro-cedura di installazione delprodotto. Verrete condotti sudi una pagina che vi richiede,se già non lo possedete, dicreare un account su Micro-soft Passport e di compilarealcuni dati obbligatori.

Al termine della procedura

vi sarà comunicato un codicepersonale. Per registrare VWDè per prima cosa necessarioavviarlo (lo trovate, come èfacile immaginare, tra i pro-grammi di Windows) e poi se-lezionare la voce Registra Pro-dotto dal menu “?”. Copiatequindi il codice nella caselladi testo che vi sarà presenta-ta. Se non avete fatto questaoperazione subito l'installa-zione, comunque, nessun pro-blema. Potete registrare VWDanche successivamente sem-pre selezionano la voce Regi-

stra Prodotto dal menu “?” del-l'ambiente di lavoro, oppurerecandovi direttamente all'in-dirizzo http://msdn.micro-soft.com/vstudio/express/re-gister/.

I vantaggi della registrazioneal prodotto

La registrazione di VWDcomporta inoltre degli ulterio-ri vantaggi. Gli utenti registra-ti di VWD possono infatti te-stare on line le potenzialità diASP.NET e VWD grazie ad un'i-niziativa tra Microsoft e Aru-

ba. Potete infatti richiedere laregistrazione di un dominio diquarto livello che compren-de, oltre al .NET Framework,anche l'accesso a un databaseSQL Server 2005. La promo-zione è valida per 3 mesi: mag-giori informazioni sono dispo-nibili all'indirizzo http://test-dotnet.aruba.it/. Altre novità,promozioni e download gra-tuiti vi saranno comunicati viae-mail non appena registreretela vostra copia di Visual WebDeveloper 2005 Express Edi-tion.

3 L'ambiente di lavoro

Complimenti, ora siete i fe-lici possessori di una co-pia senza scadenza di

VWD! Partiamo quindi all'e-splorazione dell'ambiente concui ci troveremo a lavorare inquesti mesi e, per farlo, il mo-do migliore è sicuramentequello di creare fin da subitouna piccola applicazione diesempio, così da verificare an-che che l'installazione si siacompletata correttamente.

In realtà non costruiremoper il momento un sito parten-do da zero, ma utilizzeremo in-vece un prototipo già prontoche potremo poi personaliz-zare. In questo modo avremola possibilità di concentrarcisulle principali funzionalitàsenza perdere tempo (almenoin questa prima visita all'am-biente) nei dettagli applicativi.Ma non temete, perché già altermine della prossima punta-ta sarete completamente indi-pendenti nella costruzione diun vostro progetto Web. E nonpreoccupatevi neppure se al-cuni dei concetti o delle tecni-che che affronteremo in que-sta puntata potessero sem-brarvi difficili. Ritorneremo suognuno di questi argomenti,approfondendoli, nelle prossi-me puntate del corso.

Apriamo quindi VWD dalmenu Programmi di Windows.L'ambiente di lavoro, comeper tutti i linguaggi di pro-grammazione moderni, è sud-diviso in diverse aree, ciascu-na contestuale rispetto all'o-perazione che state compien-do. Questo vuol dire ad esem-pio che la spalla sinistra (Ca-sella degli strumenti) e quella

destra (Esplora soluzioni)cambieranno il proprio conte-nuto mentre lavorate conVWD in funzione del tipo dioggetto, controllo, tag con cuivi troverete a interagire.

La pagina iniziale

La prima pagina che vedre-te all'apertura di VWD si chia-ma Pagina iniziale, il cui scopoè quello di presentare in un'u-nica schermata le attività cheuno sviluppatore si trova arealizzare più frequentemen-te. Per questo motivo tra glielementi presenti nella paginainiziale è presente un elencodei progetti con cui state lavo-rando (Progetti recenti), oltrealla possibilità di creare age-volmente un nuovo sitoASP.NET.

La pagina iniziale di VWDfornisce anche un colpo d'oc-chio sull'attività degli svilup-patori appartenenti alla riccacomunità ASP.NET e VisualStudio in generale (MSDN) eda qui, oltre che dalle voci dimenu, è possibile avere acces-so anche alla ricca documen-tazione in linea MSDN che ab-biamo appena installato (Gui-da introduttiva).

Menu e barradegli strumenti

Come qualsiasi programmaWindows, le principali attivitàdi VWD sono compiute utiliz-

zando la barra degli strumentie le voci di menu che sono po-ste nella parte alta della fine-stra principale dell'ambientedi sviluppo.

Scopriremo di volta in voltail significato delle diverse voci,ma soffermiamoci ad analizza-re le due principali: quella chepermette di realizzare un nuo-vo sito e quella che consentedi copiare il sito dal vostro PCal server di produzione, cioè ilserver accessibile a tutti gliutenti internet.

Creazionedi un nuovo sito in VWD

Trattandosi di un'attività difondamentale importanza, èpossibile creare un nuovo pro-getto in diversi modi: dalla pa-gina iniziale, dalla barra deglistrumenti oppure da un'op-portuna voce di menu.

Utilizziamo ad esempio que-st'ultimo metodo: dal menu Fi-le selezioniamo la voce Nuovoe da qui Sito Web. La scherma-ta ci pone di fronte ad alcunescelte. In buona sostanza quel-lo che ci viene chiesto è se co-struire un sito ASP.NET vuotooppure utilizzare qualche “ba-se” già costruita e che è possi-bile personalizzare a nostropiacimento.

Nel gergo di VWD (e deglialtri prodotti della famiglia Vi-sual Studio) queste basi sonochiamate Starter Kit e, oltre aquelli già fornite con VWD, èpossibile scaricarne di altri dalsito Microsoft, all'indirizzohttp://msdn.microsoft.com/vstudio/express/vwd/starterkit/.Ma per il nostro esempio è piùche sufficiente (oltre che esse-

re davvero molto completo)lo Starter Kit del sito Web per-sonale già compreso conVWD. Selezioniamo quindi perprima cosa questa voce.

Dobbiamo poi decidere altridue elementi del progetto chestiamo realizzando. Il primo èrelativo alla sua posizione. Sitratta cioè di scegliere qual è ilserver che ospiterà il sito Webche andremo a creare. Una dif-ferenza fondamentale tra unapagina HTML e una paginaASP.NET è infatti che quest'ul-tima, per poter essere visua-lizzata correttamente, necessi-ta sempre della presenza di unserver Web che ne risolva icontenuti dinamici.

VWD può lavorare con unserver Web in diverse moda-lità. Dispone innanzitutto diun server Web personale o ditest, utile per la fase di svilup-po delle applicazioni. Se poinel computer di sviluppo è in-stallato IIS (Internet Informa-tion Services) VWD può essereconfigurato per utilizzarlo co-me server predefinito.

Ma VWD può lavorare an-che con siti che non si trovinosulla stessa macchina in cui èinstallato l'ambiente di svilup-po. L'importante è che questisiti siano raggiungibili in qual-che modo: via rete, con leestensioni di Frontpage, oppu-re via FTP (File Transfer Pro-tocol). Nel nostro caso deci-diamo che il sito sarà ospitatonel nostro PC, come quasisempre avviene durante la fa-se di sviluppo. Tra poco ve-dremo come VWD metta a di-sposizione degli sviluppatoriun'interessante funzione di co-



pia per la pubblicazione di unsito su un “server di produzio-ne”. Il Web server installatocon VWD è, come dicevamonell'introduzione, un'interes-sante opportunità, che sgravalo sviluppatore dalla necessitàdi configurare un Web serverseparato (come è ad esempioIIS), oltre a consentire lo svi-luppo e test di pagine anche achi dispone di Windows XPHome Edition (che non preve-de IIS).

Se lo ritenete opportuno po-tete anche cambiare il nomedel progetto e della cartella incui memorizzare il sito chestiamo creando (un buon no-me potrebbe essere CorsoPcO-pen, e sarà quello che utilizze-remo per il nostro esempio).

Il secondo elemento da de-cidere è quale linguaggio usa-re per la creazione delle nostrepagine. L'architettura diASP.NET, infatti, non lega losviluppatore a un particolarelinguaggio di programmazione.NET, che può quindi sceglierequello più congeniale tra C# eVB.NET (e anche, installando-lo separatamente, J#).

Ai fini del nostro esempioscegliamo VB.NET perché tra itre è il linguaggio di program-mazione più diffuso. Dove pos-sibile però, cercheremo di ren-dere disponibile una versionedel codice anche in C#, cosìche sia possibile apprezzare ladifferenza tra i due linguaggi disviluppo.

Vale la pena quindi eviden-ziare il fatto che quando si par-la di ASP.NET non si intendeun linguaggio di programma-zione, bensì una piattaformache può essere utilizzata condiversi linguaggi di program-mazione attraverso la propriaarchitettura a componenti. Èun notevole vantaggio di que-sto tipo di architettura.

La pagina che vedrete aquesto punto non è niente dipiù se non una introduzione al-lo Starter Kit del sito Web per-sonale. Quello che faremo nelcorso di questa, ma soprattut-to delle successive puntate èquello di estendere le funzio-nalità dello Starter Kit, andan-do per prima cosa ad analizza-re come sono state affrontatecerte problematiche di svilup-po, ma anche aggiungendo al-cune pagine e caratteristiche,come ad esempio un semplicesistema per la pubblicazionedi contenuti.

Registrazione e autenticazioneIl sito che abbiano realizzato partendo dallo Starter Kit di sito personale prevede già un completosistema di autenticazione e registrazione.Per vedere questa funzionalità all'opera accediamo al sito via browser e completiamo per prima cosa laprocedura di registrazione, raggiungibile dalla voce di menu Registra (figura 8). Tenete presente che perla password è richiesta la presenza di un carattere non alfanumerico (ad esempio un - oppure _).L'utenza non è subito attiva, ma la registrazione deve essere abilitata dal menu di amministrazione delsito, che è possibile visualizzare dal menu Sito Web di VWD e selezionando la voce Configurazione diASP.NET (figura 9). Si aprirà una finestra di browser da cui è necessario scegliere la voce Protezione neilink che compaiono in alto e successivamente il link Gestisci utenti (figura 10). Nell'elenco comparel'utente che si è appena registrato ma il suo stato, per scelta di chi ha sviluppato lo Starter Kit, non èattivo. Attiviamolo allora selezionando il checkbox e proviamo a questo punto a effettuare l'autenticazione sulsito personale, che avviene senza problemi. Approfittiamone anche per dare un'occhiata allecaratteristiche di questo utente selezionando dal sito di amministrazione, nella stessa schermata, lavoce Modifica utente. Va notato come l'utente non sia associato a nessun ruolo, né Administrators, né Friends: è questo unelemento importante, perché con ASP.NET, come vedremo successivamente, è possibile assegnare aidiversi utenti dei ruoli, e quindi delle caratteristiche diverse, che consentono ai diversi utenti di disporreo meno di alcune autorizzazioni sul sito. Per vedere in pratica come questo avvenga creiamo nel sito diamministrazione anche un utente che disponga dei relativi diritti di amministrazione, questa volta dallavoce Crea utente. Inserite quindi i dati di un utente che amministrerà il sito (figura 11), ricordandovi diassociare questa utenza al gruppo Administrators. Ritorniamo ora al sito personale e proviamo ad effettuare l'autenticazione prima con l'utente senzaautorizzazioni e poi con l'amministratore. La differenza non salta subito agli occhi, ma è evidente seguardiamo le voci di menù in alto a destra. Quando ci autentichiamo al sito come amministratori, infatti, compare un'ulteriore voce Gestisci,normalmente non disponibile, che consente a chi dispone dei diritti di amministrazione di aggiungere emodificare gli album fotografici del sito. Questo è solo un assaggio. In una puntata specifica del corso vedremo nel dettaglio il funzionamento ela programmazione della sicurezza in ASP.NET.

Registrazione di un nuovo utente al sito personale

8

L'amministrazione via browser del sito web personale

9

Dal sito di amministrazione è possibile sfogliare l'elencodei visitatori registrati

10

Registrazione di un amministratore del sito

11



Per verificare che la nostrainstallazione sia andata com-pletamente a buon fine “ese-guiamo” a questo punto il sito.Con il termine eseguire in que-sto contesto si intende princi-palmente avviare il server disviluppo di ASP.NET e collega-re a questo il sito che stiamorealizzando.

Per visualizzare un sito di-namico non basta infatti aprireun file dal browser, ma è ne-cessario accedere alla paginarichiedendola al Web serverche la ospita.

Nulla di complesso comun-que, visto che a questo proce-dimento pensa in toto VWD:tutto quello che dobbiamo fa-re noi è premere CTRL+F5 op-pure entrare nel menu Debug escegliere la voce Avvia senzaeseguire debug. Nella taskbardi Windows verrete notificatiproprio della partenza delWeb server locale di ASP.NET,che sarà avviato ogni voltache ci troveremo in test delprogetto o in una sessione didebug per correggere gli (im-mancabili!) errori di program-mazione.

VWD farà poi partire ilbrowser che avete configuratocome principale, e dopo qual-che secondo vedrete compari-re la home page del sito per-sonale. È questa l'occasioneper fare un mini tour del sitocreato dallo Starter Kit.

Come avrete modo di vede-re navigando tra le diverse se-zioni, il sito ipotizza quella chenormalmente è la struttura diun sito personale, proponen-do alcuni moduli di un certointeresse, accessibili quasi tut-ti dal menu in alto, come adesempio un curriculum vitae(si tratta della voce Riprendi,traduzione un po’ infelice del-

l'inglese “resume”), un elencodi link di interesse, e un bell'e-sempio di galleria fotografica.

Copiare il sito da locale al server di produzione

Una volta realizzato il pro-prio sito in locale è possibilecopiarlo su un server di pro-duzione grazie a uno strumen-to compreso in VWD. L'opera-zione potrebbe essere sicura-mente svolta autonomamenteper mezzo di un programmaFTP (File Transfer Protocol) osemplicemente copiando ma-nualmente i file da una mac-china all'altra, ma con lo stru-mento di VWD è anche possi-bile verificare quali sono i fileche sono stati modificati ri-spetto all'ultima copia del sito,così da trasferire solo questiultimi. Questa utility è com-presa nel menu Sito web eprende il nome di Copia sitoweb (figura 12).

Il sito appena creato contie-ne dei contenuti tutti da scri-vere e personalizzare. Già lapagina principale, come è faci-le capire, necessita di qualcheritocco. Per noi questa rap-presenta anche l'occasione dicapire come è strutturato l'am-biente di lavoro di VWD, alquale subito ritorniamo.

La spalla destra dell'am-biente di VWD contiene il boxEsplora Soluzioni, osservandoil quale si ha un colpo d'occhiodi quella che è la struttura difile da cui è composto il sitopersonale.

Proviamo a vedere come èrealizzato il sorgente della pri-ma pagina del sito personale,cioè il file “default.aspx”, chepotete aprire con un doppioclic dall'Esplora Soluzioni. Aprima vista il file sembra unnormale documento HTML,

ma osservando nel dettaglio ilcodice ci si rende ben prestoconto che oltre ai normali tagHTML nella pagina ne sonopresenti anche degli altri. Lianalizzeremo nel dettaglio, in-sieme al loro funzionamento,nella prossima puntata: si trat-ta dei controlli ASP.NET latoserver.

Per il momento ci basti sa-pere che, al momento della ri-chiesta di una pagina da partedi un browser, il server WebASP.NET interpreta questi par-ticolari controlli e li sostitui-sce, dopo un'elaborazione chepuò comportare ad esempio lalettura di alcune informazionida un database o l'interazionecon un sistema di gestione deicontenuti (CMS), con uno opiù tag HTML. Il risultato in-viato al browser è però una pa-gina che contiene solo tagHTML, senza alcun tag pro-prietario.

Questo modo di operare, ol-tre a garantire lo sviluppo dipagine che siano il più possi-bile conformi agli standard, haanche il vantaggio di proteg-gere il codice sorgente dell'ap-plicazione, perché non potràmai essere scaricato dai visi-tatori del sito. I vantaggi, comevedremo tra poco, non si fer-mano qui, visto che in questomodo anche il codice sorgenteè più leggibile e facilmente mo-dificabile.

La struttura di un sitoASP.NET 2

Alcune delle cartelle pre-senti in un sito ASP.NET 2 sonostandard, sono cioè cartellecomuni alla maggior parte del-le applicazioni create su que-sto tipo di piattaforma (Esplo-ra soluzioni è sempre il puntodi riferimento per visualizzare

la struttura del sito). La car-tella App_Data, ad esempio,ospita le fonti dati utilizzatidal sito. Per dati si intendonosia i comuni database (SQLServer Express, Access e viadicendo), sia per esempio filein formato XML.

Nel caso del nostro sito per-sonale nella cartella sono me-morizzati database in formatoSql Server Express, ma in que-sta stessa cartella, non a caso,sarà anche inserito un file XMLutilizzato per un esempio chevedremo tra poco, cioè inseri-re un banner nella pagina delcurriculum.

Se cliccate il “+” vicino al no-me della cartella potete esplo-rare i file in essa contenuti. Idatabase presenti nella cartel-la sono due: aspnetdb.mdf,che contiene gli utenti del sitoe le relative autorizzazioni (neparleremo tra poco), e perso-nal.mdf, utilizzato per la ge-stione delle foto e degli albumfotografici del sito personale.VWD è in grado di gestire inmodo completamente visualeun database, senza cioè ri-chiedere applicazioni esterneper l'aggiunta di dati, tabelle ocampi.

Per rendersene conto è suf-ficiente fare doppio clic sul no-me di uno dei database, adesempio “personal.mdf”. Laprima cosa che succede è cheil box Esplora soluzioni cambianome e contenuto e diventaEsplora database (per ritorna-re alla modalità Esplora solu-zioni è comunque sufficiente,nei tab posti in basso al box,selezionare nuovamente la

Lo strumento di copia sito

12

Una semplificazione del ciclo di vita di una pagina ASP.NET

13

L’alberatura base di un sito basato suASP.NET 2

14



prima voce). Questa vista agi-sce direttamente sui databasedi cui è composta l'applicazio-ne. Clicchiamo nuovamentesul nome del database e poi,tra le cartelle visualizzate, sce-gliamo quella chiamata “Ta-belle”. Qui sono raccolti i datidelle fotografie del sito perso-nale. Se clicchiamo con il tastodestro sopra la tabella “Pho-tos” compare un elenco delleazioni che è possibile compie-re sulla tabella.

Selezionando Mostra dati ta-bella, ad esempio, VWD visua-lizza il contenuto degli albumfotografici, mentre Apri defini-zione tabella ci permette di vi-sualizzare (e modificare) lastruttura dei dati, aggiungen-do campi, definendo le chiaviprimarie e altre proprietà dellatabella (non preoccupatevi sealcuni concetti non sono deltutto chiari: come dicevamouna intera puntata del corsosarà dedicata alla gestione deidatabase).

La cartella App_Code (ri-torniamo in Esplora soluzioni)contiene invece delle vere eproprie porzioni di codice(classi), che nel nostro casosono relative al funzionamen-to dell'album fotografico. Leclassi poste in questa cartellasono disponibili per l'utilizzoda parte di tutte le pagine dicui è composto il sito. Nellaprossima puntata vedremo neldettaglio di cosa si tratta, maanche qui è possibile curiosa-re tra il contenuto della cartel-la semplicemente cliccandodue volte sul nome di un file(ad esempio “PhotoMana-ger.vb”).

Anche la cartella App_The-me è una caratteristica chepuò essere comune alle appli-cazioni ASP.NET 2. I temi

ASP.NET permettono infatti dipersonalizzare l'aspetto grafi-co delle pagine e dei controlliin esse presenti, così da esten-dere e potenziare le funziona-lità normalmente offerte daifogli di stile (Css) per le pagineHTML.

Con ASP.NET è possibile de-finire diversi temi per il sito, emodificare velocemente il filedi configurazione dell'applica-zione per passare da un temaall'altro. Se aprite la cartellaApp_Theme dall'Esplora Solu-zioni, vedrete che nello StarterKit del sito personale sono giàprevisti due temi: uno, “Whi-te”, è quello che abbiamo uti-lizzato finora nel navigare il si-to mentre “Black” è un temache, come è facile intuire, con-tiene gradazioni di colore de-cisamente più scure.

Aprendo nuovamente unadelle due cartelle noterete chesono presenti alcuni file, chia-mati nel nostro casodefault.css, default.skin e fra-me.css.

Default.css e frame.css so-no dei normali file che conten-gono fogli di stile, mentre de-fault.skin è utilizzato per per-sonalizzare ulteriormente l'ap-plicazione, ad esempio indi-cando che un tema è compo-sto da immagini completa-mente diverse rispetto ad unaltro tema. Per modificare iltema attivo è sufficiente apri-re, con un doppio clic e sem-pre da VWD, il file denominatoweb.config (si trova nella ra-dice dell'applicazione, non al-l'interno di una cartella).Web.config è uno dei file “fon-damentali” per lo sviluppo diapplicazioni ASP.NET, e il cuiutilizzo va ben oltre la sempli-ce gestione dei temi, perchégestisce la configurazione del-

le diverse parti del sito, dalleconnessioni al database allamappa dei contenuti. Per ilmomento ci soffermeremoperò unicamente sulla gestio-ne dei temi.

Chi ha avuto modo di lavo-rare con file XML capirà subitoche il file web.config è scrittosecondo questo standard. Ri-torneremo sulla sua struttura,ma per il momento individuia-mo semplicemente, nelle pri-me righe del file, quella checontiene

<pagesstyleSheetTheme="White"/>

Questo è il punto in cui è de-finito il tema che deve essereutilizzato dal nostro sito per-sonale. Proviamo ora a modifi-care questa riga utilizzando ilnome del secondo tema pre-sente nella cartella App_The-mes, cioè il tema Black. La rigadiventerà a questo punto que-sta

<pagesstyleSheetTheme="Black"/>

Non è necessario fare altro,se non salvare il file. Ricaricatela pagina del sito dal browser,se è ancora aperto, oppureapritelo di nuovo sempre conCTRL+F5. Non ci vorrà molto acapire che il sito ha decisa-mente cambiato aspetto (fig.14).

Ci sono altre cartelle chepossono comporre un'applica-zione ASP.NET, ma che non so-no presenti in questo sito per-sonale. Un modo per capirequali siano è quello di premereil tasto destro del mouse nel-l'Esplora Soluzioni, proprio so-pra il nome del progetto (è ilprimo elemento della lista).

Tra le voci che compaiono (fig.15) c'è Aggiungi cartellaASP.NET, che contiene il nomedi altre cartelle: App_Global-Resources, App_LocalResour-ces, App_WebReferences eApp_Browser.

L’editor di codiceAprire un file da Esplora ri-

sorse significa utilizzare l'edi-tor di codice di VWD, da cui èpossibile intervenire diretta-mente e precisamente su tuttigli oggetti che compongono lapagina.

L'editor di codice può esse-re utilizzato per aprire qual-siasi file necessario per la co-struzione di un sito: file XML,file di configurazione, fileHTML. Ma l'editor dà il megliodi sé con i principali docu-menti di un progetto ASP.NET,cioè i file di classi e i file ASPX(ASPX è l'estensione con cuisono identificate le pagine del-l'architettura ASP.NET).

Da Esplora risorse proviamoquindi ad analizzare e modifi-care, grazie all'editor di codi-ce, la pagina chiamata “de-fault.aspx”, che è la prima pa-gina del nostro sito personale.Il codice di default.aspx è rap-presentato in diversi colori:come tutti i moderni ambientidi lavoro VWD è infatti in gra-do di riconoscere tag, oggettoe controlli evidenziandoli diconseguenza. Ma in realtà èpossibile fare molto di più.

Per vedere l'editor in azioneindividuiamo nella pagina al-cuni contenuti da personaliz-

Provider eASP.NETversione 2Nel valutare un serviceprovider che fornisca lapossibilità di ospitare ilproprio sito Web realizzatocon ASP.NET, è importanteverificare che la versionesupportata del NetFramework sia la 2.x. Gliesempi del corso sonoinfatti realizzati con questaseconda versione, cheintroduce diversimiglioramenti ecaratteristiche rispetto allaprima. Anche VWDnecessità del NETFramework versione 2 perpoter funzionare.

Un diverso tema (nero) per il sito Web personale

14

Aggiunta di nuove cartelle al progetto

15



zare. Scorrendo il file de-fault.aspx arriviamo ad unpunto, intorno alla riga 64 (lerighe di codice, come poteteimmaginare, sono quelle postein verticale alla sinistra dell'e-ditor) in cui si parla del “lavo-ro personale più recente”. Lerighe in questione contengo-no:

<h4>Lavoro personale più recente</h4>

<p>Lorem ipsum dolor sitamet....</p>

Proviamo a personalizzare iltesto, magari inserendo uncollegamento a qualche sitoesterno dentro il paragrafo<p>. Per farlo, bisogna inserireun tag <a>, con il rischio peròdi non ricordare esattamentela sua sintassi. Ma non appenacominciamo a scrivere il tagl'editor di VWD viene in soc-corso con Intellisense, unafunzionalità che aiuta a com-pletare il tag evidenziando gliattributi e valori disponibiliper il link (fig. 16). Le due righedi codice potrebbero quindidiventare qualcosa del tipo:


<p><ahref="http://www.pcopen.it">Ilsito di PcOpen</a></p>

Ma se ci fermassimo quiVWD sarebbe paragonabile aun semplice editor HTML. Inrealtà la funzionalità Intelli-sense trova applicazione inmolti altri contesti, come lascrittura di codice VB.NET oC# o l'inserimento di controlli.

Per capirlo con un esempio,proviamo ad inserire un con-trollo calendario all'internodella pagina (trattandosi ap-punto di un esempio possiamoinserire il controllo appenasotto al link). Il controlloASP.NET per la gestione di uncalendario è <asp:calendar>.

Anche in questo caso la fun-zionalità Intellisense di VWDaiuta a completare il controlloelencando l'insieme degli attri-buti di cui è composto. E nelcaso del calendario, trattan-dosi di un controllo di una cer-ta complessità, sono disponi-bili davvero un buon numerodi attributi.

Per il nostro semplice esem-pio in realtà sarà sufficienteutilizzare gli attributi runat, ilcui unico valore è “server”, eid. Il codice della pagina, inbuona sostanza, diventerà si-mile a questo:


<p><ahref="http://www.pcopen.it">Il

sito di PC Open</a></p><asp:Calendar runat="server"

runat="calendario"></asp:Calendar>

L’attributo runat=”server” èun attributo obbligatorio delcontrollo ed è usato per indi-care al motore ASP.NET che ilcontrollo in questione deve es-sere risolto lato server e nondal browser. A questo va ag-giunto anche l'attributo “id”che, come avviene per il nor-male codice HTML, è indi-spensabile per poter distin-guere questo controllo tra glialtri presenti nella pagina (sitratta in qualche modo di dareun nome al controllo, funzio-nalità già nota a chi realizza si-ti facendo largo uso, corretta-mente, dei fogli di stile). Il mo-tore ASP.NET sarà così in gra-do di distinguere il controlloda un normale tag HTML, ese-guirà della logica lato server, equindi restituirà al browser ilrisultato dell'elaborazione informato HTML.

Possiamo a questo punto vi-sualizzare nuovamente l'ante-prima del sito su un browser:se guardate con attenzione laspalla sinistra del sito, in bas-

so, vi accorgerete da un latoche il testo è stato personaliz-zato, come ci aspettavamo, maanche che è comparso un con-trollo di tipo calendario in fon-do alla spalla.

Realizzare un calendario inHTML avrebbe richiesto sicu-ramente uno sforzo maggiorerispetto a inserire un controlloin una pagina, e nel prosieguodelle puntate avremo modo diutilizzare diversi controlli diASP.NET, oltre che di realizzar-ne di personalizzati. Un van-taggio di questo modo di ope-rare è che il codice della pagi-na, diversamente da quelloche avviene con altre architet-ture Web (e la stessa versionedi ASP “non NET” di qualcheanno fa), non contiene fram-menti di codice scritti con lin-guaggi di programmazione, maè “pulito”, ovvero utilizza uni-camente tag per la scritturadella pagina. Persone concompetenze diverse, cioè svi-luppatori e Web designer, chesi trovino a condividere unprogetto, riescono in questomodo a cooperare senza pro-blemi e senza paura di com-promettere il lavoro degli altri.

Codice in ordineÈ anche utile capire come

VWD cerchi di risolvere un an-noso problema di chi si occu-pa di scrivere codice, cioè ilproblema di rendere leggibileil sorgente della pagina all'au-mentare delle linee del pro-gramma. Nell'editor potete no-tare, accanto ai numeri di lineadella pagina, una linea vertica-le interrotta periodicamenteda segni “-”. Se provate a clic-care uno di questi vedrete cheil codice in qualche modo si“compatta”, ovvero che talunitag scompaiono fino a quandonon si preme il segno “+” po-sto alla loro sinistra.

Questa funzionalità è moltoutile quando si lavora con filemolto corposi. Ma questo è

nulla in confronto a quello cherende disponibile la strutturaa template di ASP.NET, una ca-ratteristica a cui dedicheremobuona parte di una puntata,ma che vale la pena introdurrefin da subito.

Confrontando il codice sor-gente della pagina principaledel sito con la versione checompare nel browser quandolo visualizzate, potreste notarequalcosa di quantomeno cu-rioso. La pagina del browsersembra infatti contenere eti-chette e descrizioni in più ri-spetto a quelle effettivamentepresenti nel codice sorgente.Se per esempio cercate nel co-dice sorgente il punto in cui èdefinito il nome del sito perso-nale (che nella versione basedello Starter Kit si chiama perl'appunto “Nome”, e che com-pare in alto a sinistra nella pa-gina) non ne troverete traccia,per quanto possiate cercare.Chi è abituato a lavorare conASP o con HTML potrebbepensare che il sorgente con-tenga la famosa direttiva “in-clude”, che permette di spez-zare la pagina in più moduli,ma rimarrà deluso dal non tro-varne traccia in tutto il codicesorgente. Il mistero è prestospiegato.

La pagina default.aspx (co-me tutte le altre pagine del sitopersonale) contiene unica-mente il codice che non è co-mune a tutte le altre pagine delsito, perché quello comune èinvece inserito in un file dedi-cato, che si chiama in questoparticolare caso default.ma-ster. Se provate ad aprire que-sto file, infatti, vi accorgereteche come prima cosa contieneproprio il nome del sito e il suo“sottotitolo”, in queste lineedi codice:

<h1>Nome</h1><h2>Sito personale</h2>Proviamo allora a modificarle in

qualcosa di simile a

Intellisense all'opera per completare untag HTML

16

Il template del sito personalizzato

17

Errori di validazione nell'editor di VWD

18



<h1>Esempio del corso ASP.NET</h1><h2>Pubblicato da PC Open</h2>

Salviamo il file e visualizzia-mo la pagina principale del si-to personale nel browser, chein effetti risulta modificata se-condo le aspettative. Ma lastessa modifica è in realtà “di-stribuita” uniformemente atutte le altre pagine del sito,come è facile verificare clic-cando sulle altre pagine delmenù in alto. Ma dove vieneindicato a una pagina di utiliz-zare una particolare paginamaster per la propria visualiz-zazione? Nelle prime linee del-la pagina, e in particolare conquesta direttiva tratta da de-fault.aspx:

<%@ Page Language="VB" MasterPageFile="~/Default.master" Title="Nome | Home"

CodeFile="Default.aspx.vb" Inherits="Default_aspx" %>

Qui MasterPageFile sta pro-prio ad indicare il percorso incui si trova il template da cuidipende la pagina.

Pagine che rispettano gli standard

Un'altra caratteristica diVWD che aiuta lo sviluppatorenella creazione di codiceconforme agli standard defini-ti dal W3C è data dalla presen-za, nella barra degli strumenti,di un combobox utile per sele-zionare il browser o la versio-ne (X)HTML di riferimento perla pagina. Così facendo VWDverifica che non vengano inessa inseriti dei tag non cor-retti o obsoleti, segnalandoneeventualmente la presenza. Sead esempio si selezionaXHTML 1.1 come standard perla pagina e si tenta di utilizzareun attributo “bgcolor” per la

cella di una tabella (attributonon valido per XHTML1.1),VWD visualizza un errore (fig.18).

L'editor visualeE se non abbiamo molta di-

mestichezza con l'HTML? An-che in questo caso VWD ci vie-ne in aiuto, perché dispone diun editor visuale, chiamatoProgettazione, presente so-prattutto allo scopo di verifi-care la resa grafica della pagi-na. È bene comunque ricorda-re che nessun editor visuale(cioè WYSIWYG) può sostitui-re fino in fondo la modifica di-retta del codice, soprattuttoper progetti di una certa com-plessità. Potete creare la pri-ma stesura della pagina conun editor visuale, ma per crea-re una pagina che sia riutiliz-zabile in parti diverse del sito(cioè per realizzare quello cheviene chiamato template) do-vrete a un certo punto passarealla modifica diretta del codiceHTML. Detto questo, la moda-lità di progettazione dell'editordi VWD è attivabile in fondo al-l'editor stesso, cliccando sullaprima delle due “linguette”(tab) recanti la dicitura rispet-tivamente Progettazione e Ori-gine (con la seconda eviden-ziata).

Ecco che il codice è statosostituito dalla sua rappresen-tazione grafica. Se scorriamola pagina, noteremo che in fon-do a sinistra sono presenti lemodifiche che abbiamo realiz-zato direttamente sul codice,oltre al calendario.

Se poi selezioniamo il calen-dario con un clic possiamo no-tare un'altra interessante ca-ratteristica di VWD, chiamataSmart Tags, ovvero un modo

per velocizzare la scrittura dioperazioni ripetitive. A destradel controllo compare infattiuna piccola freccia, cliccata laquale è possibile accedere allefunzionalità dello Smart Tag(fig. 19). L'unica opzione di-sponibile per il calendario è re-lativa alla formattazione auto-matica delle celle, operazionein puro stile “Word” che fun-ziona attraverso un wizard de-dicato (fig. 20). Ma gli SmartTag possono svolgere compitianche ben più complessi, co-me automatizzare la connes-sione di un controllo a un da-tabase o a un file. Vedremo trapoco un esempio in questosenso.

La casella degli strumenti

La visualizzazione a Proget-tazione di VWD consente unapanoramica completa dellapagina ASP.NET. Ma non si trat-ta solo di una visualizzazione:è possibile intervenire diretta-mente nella struttura della pa-gina inserendo direttamente idiversi elementi dell'applica-zione.

Per farlo l'occasione è quel-la di introdurre alcune funzio-nalità presenti nella casella de-gli strumenti che si trova nellaspalla sinistra di VWD. Qui so-no ospitati graficamente tutti icontrolli che è possibile inse-rire in una pagina ASP.NET, ol-tre ad alcuni tra i principali tagHTML (quelli relativi alla ge-stione dei form). Poiché i con-trolli sono i più diversi (inmaggior numero rispetto allaversione 1 di ASP.NET), questisono stati raccolti in più grup-pi, come è possibile verificarescorrendone l'elenco. Con

VWD è possibile trascinarequesti controlli direttamentenella pagina con cui stiamo la-vorando, sia nella modalitàProgettazione, sia in quella Ori-gine. Per inserire un controlloè sufficiente trascinarlo dallacasella degli strumenti al pun-to in cui questo va inseritonella pagina (molto spessoquesta operazione è più age-vole nella modalità “origine”,dove la presenza del codicesorgente della pagina rendel'operazione più precisa). Pro-viamo a farlo con il controlloAdRotator, utile per automa-tizzare la gestione di semplicibanner. L'idea è quella di vi-sualizzare, in testa alla paginadel curriculum, un banner ascelta tra due disponibili, con-tenenti un link al sito di riferi-mento.

Per prima cosa dovete co-piare alcuni file che sono statiprecedentemente realizzati, eche si trovano nel DVD allega-to a questo numero di PC Open(CD3/Sorgenti01).

Nei sorgenti degli esempitroverete una cartella chiama-ta “adrotator” e, all'interno diquesta, altre due cartelle:

Codicesorgente degli esempiTutti gli esempi realizzatinelle diverse puntate delcorso saranno disponibilinel DVD allegato a PCOpen. Inoltre, alla paginahttp://win.fucinaweb.com/prog/pcopen/ potretetrovare una versione Web,funzionante, dei principaliesercizi

Gli Smart Tag del controllo Calendar

19

La formattazione del calendario

20



“app_data” e “images”. Il con-tenuto di queste cartelle va in-serito nelle corrispettive car-telle del sito VWD che siamoprecedentemente andati acreare. I file che abbiamo co-piato sono le immagini deibanner e un file (in formatoXML) che indica quale indiriz-zo associare a ogni immagine,in modo che cliccando sulbanner l'utente venga direttoal sito di riferimento.

A questo punto torniamo inVWD e apriamo la pagina rela-tiva al curriculum da EsploraSoluzioni: come è facile capiresi tratta del file Resume. aspx.

Portiamo l'editor in moda-lità Progettazione (non è ne-cessario, ma in questo casol'operazione è più semplice), eindividuiamo, nella Casella de-gli strumenti posta alla sinistradell'ambiente di VWD, il grup-po di controlli Standard (a me-no che non ne abbiate apertiprecedentemente degli altriquesti sono i controlli normal-mente visualizzati). Il control-lo da inserire si chiama AdRo-tator: trasciniamolo in mododa inserirlo un po' prima della

scritta “Nome” del curriculum,così che si trovi ad essere ilprimo elemento della paginaad eccezione dei menu (fig.21). Il controllo per i banner dasolo ha poco senso, è neces-sario specificare l'elenco deibanner da visualizzare, oltreche i link ai siti a cui dirigerel'utente quando li clicca.

Per questo motivo VWD vi-sualizza in automatico unoSmart Tag che indica la possi-bilità di scegliere una sorgentedati, cioè un file (o un databa-se) che ospitano l'elenco delleimmagini dei banner e relativilink. Scegliamo quindi una“nuova sorgente dati” e, nellamaschera successiva, indi-chiamo che vogliamo utilizza-re un file di tipo XML (fig. 22).Si tratta ora di specificarne laposizione. Lo abbiamo copiatonella cartella App_data e quin-di sfogliamo il contenuto delsito fino ad individuare il filedei dati XML in quella cartella,notando che si chiama adrota-tor.xml (fig. 23).

Non occorre specificare al-cuna voce per quanto riguardai file di trasformazione o altro:

possiamo chiudere il wizardcon ok e chiudere anche loSmart Tag del controllo, perprovare invece (CTRL+F5) avisualizzare la pagina da unbrowser. Il risultato è proprioquello che ci aspettavamo: lapagina del curriculum reca inalto un'alternanza di due ban-ner. Inoltre, cliccando sul ban-ner l'utente viene condotto alrelativo sito. E il tutto senzascrivere una riga di codice o,meglio, senza rendersene con-to.

Se infatti ritorniamo per unattimo alla modalità Origine èfacile accorgersi come VWDabbia inserito due controlli al-l'interno della pagina. Il primoè il controllo AdRotator, usatoper la visualizzazione dei ban-ner. Il secondo, chiamato Xml-DataSource, è il controllo chesi preoccupa di caricare il fileXML contenente l'elenco deibanner e di passarlo al con-trollo AdRotator per la visua-lizzazione.

Vale anche la pena di notarela presenza, nella spalla de-stra, del box Proprietà, checonsente di modificare le ca-

ratteristiche di qualsiasi ele-mento presente nella paginaASP.NET. Nel precedente casorelativo all'AdRotator, adesempio, è possibile modifica-re il valore di ogni attributo delcontrollo.

ConclusioneMicrosoft Visual Web Deve-

loper Express Edition è unostrumento gratuito, ma com-pleto, rivolto a sviluppatoridalle competenze eterogenee.Chi è poco pratico di pro-grammazione troverà un am-biente che può semplificare lascrittura di una cospicua par-te del codice, mentre lo svi-luppatore più esperto ha lapossibilità di sfruttare l'am-biente gestendo completa-mente il codice sorgente del-l'applicazione.

Entrambi hanno comunquela possibilità di sfruttare ap-pieno le numerose funzionalitàdi VWD, come ad esempio ilcompletamento automaticodel codice e la gestione avan-zata degli errori.

Dopo questa prima partededicata all'ambiente di lavo-ro, nella prossima puntata ana-lizzeremo più approfondita-mente la struttura di un'appli-cazione ASP.NET 2 e imparere-mo a conoscere il modello diprogrammazione a componen-ti che questa architettura met-te a disposizione. In attesa del-la prossima puntata potete co-munque lavorare con l'esem-pio che avete creato, persona-lizzando il sito personale, cari-cando qualche album fotogra-fico e inserendo i dati del vo-stro curriculum.

Buon lavoro. �

La configurazione di una fonte dati per il controllo AdRotator

Tra le diverse origini dei dati scegliamo il file XML

21 22

Selezionare il file XML usato dall’AdRotator per visualizzare i banner

23

Avvisi di errore nel codice dell’editor d VWD

24

Documents

Programmazione Sviluppo: alla scoperta di Visual Web Developer … · 2006-07-04 · Lezione 1 Introduzione a Visual Web Developer 2005 Express Edition - Perché scegliere VWD - Installazione