WebMatrix: uno strumento integrato per lo sviluppo ed il testing delle applicazioni web

Un tool gratuito per lo sviluppo di qualunque genere di sito, servizio od applicazione web. Così si presenta WebMatrix, software targato Microsoft che l’azienda di Redmond ha deciso di rilasciare, nella sua veste definitiva, il 13 gennaio 2011. Il pacchetto consente di provare applicazioni web opensource personalizzandone ed eventualmente estendendone le funzionalità, permette di lavorare su “template” già disponibili oppure di avviare progetti “ex novo”.
WebMatrix installa sia un web server che un comodo ambiente di sviluppo grazie al quale si potranno realizzare applicazioni ASP.NET o PHP verificandone il funzionamento in locale, senza abbandonare mai, quindi, il proprio sistema.
WebMatrix mette a disposizione la possibilità di interagire in modo visuale con numerose tipologie di database: innanzi tutto, viene offerta una versione compatta di SQL Server (SQL Server Compact) ma si può lavorare anche con altri formati di basi di dati (ad esempio, MySQL).

Requisiti indispensabili per l’installazione di Microsoft WebMatrix sono la presenza del .Net framework 2.0 e del nuovo web server IIS Express 7.5. Per quanto riguarda i sistemi operativi supportati, WebMatrix è in grado di operare correttamente su Windows XP SP3, Windows Vista SP2, Windows Server 2008, Windows Server 2008 R2 e Windows 7.

L’approccio migliore per installare WebMatrix su una qualsiasi versione di Windows, consiste nello scaricare e nell’avviare questo file. La procedura d’installazione si farà carico di controllare tutti i requisiti di sistema nonché di prelevare e di caricare eventuali componenti che dovessero risultare mancanti.

Nel nostro caso, abbiamo volutamente scelto di installare WebMatrix su un sistema Windows XP SP3 “pulito” in modo tale da verificare il comportamento della procedura di setup. Dopo aver fatto doppio clic sul file webmatrix.exe, è stata rilevata la mancanza del framework .Net 2.0. Cliccando sull’apposito pulsante, abbiamo acconsentito al download automatico ed alla successiva installazione del pacchetto.

Al termine dell’operazione, l’installazione di WebMatrix mostrerà la seguente finestra:

Come si vede, WebMatrix si basa – a sua volta – sulla terza versione di uno strumento rilasciato di recente da Microsoft che abbiamo più volte avuto modo di apprezzare: Web Platform.

Microsoft Web Platform 3.0 (abbiamo presentato la seconda versione del pacchetto in questi nostri articoli) si propone come un ecosistema completo per la creazione e l’hosting di siti, servizi ed applicazioni web. Il pacchetto combina il supporto di strumenti server e tecnologie particolarmente utilizzate ed apprezzate con la possibilità di configurare ed installare le più comuni applicazioni web: piattaforme CMS per la realizzazione e la gestione di contenuti, strumenti per la messa a punto di blog e progetti editoriali, di forum e wiki.
Nella Web Platform 2.0, ASP.NET e PHP – una volta agli antipodi – possono essere utilizzate “senza soluzione di continutità”, sullo stesso web server. Il matrimonio tra IIS e PHP è stato sancito, ormai da tempo, grazie a FastCGI: si tratta di un componente che funge da interfaccia tra il motore PHP ed il server web di Microsoft assicurando un’esecuzione del codice PHP molto più performante rispetto alla soluzione CGI (Common Gateway Interface) e molto più affidabile rispetto ad ISAPI.

Il concetto è stato ripreso ed ampliato nella prima versione di WebMatrix che diviene così una soluzione “a tuttotondo” non solo per il testing e l’hosting di siti, servizi ed applicazioni web ma anche per il loro sviluppo vero e proprio.

Cliccando sul link Elementi da installare, si potrà consultare l’elenco dei componenti che la Web Platform provvederà ad aggiungere in modo predefinito: scorrendo la lista, si può riconoscere il database SQL Server Compact 4.0, il supporto per ASP.NET, il web server IIS 7.5 Express ed il framework .Net 4.0.

Cliccando sul pulsante Installa quindi su Accetto, verrà avviata l’installazione, previo download da Internet, di tutti i componenti indicati. Per ridurre le tempistiche, l’installazione dei vari software avviene contemporaneamente allo scaricamento degli altri componenti necessari.

E’ possibile che, ad installazione del .Net framework 4.0 ultimata, venga richiesto il riavvio del personal computer. Risponendo affermativamente, al successivo ingresso in Windows, l’installazione di WebMatrix riprenderà dal punto in cui si era lasciata. Analoga operazione potrebbe risultare necessaria nel caso di Windows Installer 4.5 e del framework .Net 2.0 SP1.

Modelli, workspaces e creazione di un sito web statico

<!– –>Per iniziare a lavorare immediatamente con WebMatrix, si potrà cliccare sul link Avvia quindi su Completa ed Esci per chiudere l’installazione.

Quella che segue è la schermata principale di WebMatrix:

Il secondo pulsante (“Sito da raccolta web“) consente di accedere ad una “galleria” di applicazioni web, alcune delle quali ampiamente conosciute (citiamo, ad esempio, Joomla, WordPress, DotNetNuke, SugarCRM, phpBB e Drupal) che sono state sviluppate utilizzando linguaggi differenti tra i quali ASP.NET e PHP. WebMatrix è in grado di sovrintendere l’intero processo di download, installazione e configurazione delle varie applicazioni web opensource.

Il pulsante “Sito da modello“, invece, è destinato a quegli utenti che preferiscono sviluppare autonomamente il proprio sito web, anziché utilizzare un’applicazione web “già pronta”. La comodità, in questo caso, consiste nella possibilità di fruire di “modelli” di siti web già preconfezionati. Ecco gli esempi sinora proposti:

L’ultimo pulsante (“Sito da cartella“) permette di creare un sito web basandosi su una collezione di file già memorizzati sul disco fisso. Il primo pulsante (“Siti personali“) consente di aprire un sito web già esistente.

Oltre a supportare linguaggi di programmazione come ASP.NET e PHP mettendo a disposizione tutta “l’infrastruttura” per eseguire le applicazioni sviluppate, WebMatrix integra anche il nuovo framework Razor il cui obiettivo consiste nello snellire ulteriormente la procedura di creazione di pagine web dinamiche.

Per iniziare subito a programmare e saggiare i vantaggi derivanti dall’impiego di WebMatrix, suggeriamo di cliccare sul pulsante Sito da modello, selezionare Sito vuoto ed assegnare, ad esempio, il nome Catalogo al progetto (campo Nome sito).

Cliccando su OK, WebMatrix creerà un nuovo sito web, vuoto, che sarà mostrato nell'”editor” del prodotto. Come si può notare nell’esempio che segue, il web server IIS 7.5 Express è già avviato e si è posto in ascolto, in questo caso, sulla porta 62326:

Ciò significa che cliccando sul link http://localhost:62326 oppure digitando lo stesso indirizzo nella barra degli indirizzi del browser, verrà subito mostrata la home page dell’applicazione in corso di sviluppo. Provando immediatamente a cliccare sul link, il server web restituirà il seguente messaggio d’errore: “errore HTTP 404.20 – Not found – Nessun documento predefinito“. Questo accade perché, ovviamente, il progetto è ancora vuoto e non si è sviluppato alcuna pagina web.

WebMatrix consente di muoversi tra diversi spazi di lavori, detti “workspaces“. Ciò si concretizza agendo, semplicemente, sui pulsanti posizionati nella colonna di sinistra del programma (Sito, File, Database e Report).
Il pulsante File consente di aggiungere o di creare rapidamente file che andranno a comporre il proprio progetto ossia l’applicazione web che si sta sviluppando. Dopo aver scelto File, ci si troverà dinanzi ad una schermata simile alla seguente:

Cliccando su Crea un nuovo file, si può scegliere una delle tipologie di file da aggiungere al progetto.

Optando per “HTML” si richiederà l’aggiunta di una semplice pagina statistica in formato HTML (nel campo “Nome” si digiti default.html). Ecco il risultato che si otterrà:

Si provi a digitare quanto segue tra le tag <body> e </body>:

<h1>Catalogo delle piante</h1>
<ol><li>Aglaonema</li>
<li>Falso papiro</li>
<li>Drachena</li>
<li>Pothos</li>
<li>Ficus</li>
</ol>

Cliccando sul pulsante Esegui, nella barra degli strumenti, WebMatrix richiamerà il browser web impostato come predefinito e mostrerà la pagina web statica collegandosi al server web in funzione sul personal computer locale.

La pagina web sarà inviata, dal server web, al browser impostato di default. WebMatrix è in grado di rilevare tutti i browser installati sul sistema: per verificare in che modo viene visualizzata la medesima pagina web sugli altri prodotti, è sufficiente fare riferimento alla piccola freccia posizionata sotto il pulsante Esegui.
Cliccando con il tasto destro del mouse sull’icona esposta nell’area della traybar di Windows (in basso a destra), è possibile verificare l’elenco dei siti web aperti in WebMatrix e raggiungibili invocando il corrispondente indirizzo locale.

Utilizzando il pulsante Nuovo, selezionando CSS quindi impostando sito.css come nome del file (campo Nome), è possibile aggiungere al progetto un foglio di stile:

Una volta premuto il pulsante OK, si potrà iniziarne a specificare il contenuto in modo tale da modificare il “look” grafico della pagina web che stiamo allestendo. Alcuni suggerimenti sull’utilizzo dei CSS sono riportati in questo articolo e in questa pagina.

Si provi, ad esempio, a digitare, nel file CSS appena aggiunto, quanto segue:

body {
font-family: Tahoma, Verdana, Geneva, sans-serif;
width: 85%;
margin: 10px auto;
}

h1 {
font-size: xx-large;
font-weight: normal;
padding: 0px;
margin: 0px;
}

Nel file HTML, all’interno della tag <head>, si dovrà quindi richiamare il file CSS specificando la riga seguente:

<link rel="stylesheet" type="text/css" href="//www.ilsoftware.it/sito.css" />

Ecco il risultato che si otterrà:

Cogliamo l’occasione per inserire, nella tag <title> (titolo della pagina web) la frase “Catalogo delle piante“. Ad ogni modifica, si ricordi di salvare sia il file CSS che il file HTML utilizzando il piccolo pulsante Salva tutto posto nella barra del titolo della finestra di WebMatrix.

WebMatrix mette a disposizione dello sviluppatore la possibilità di realizzare pagine dinamiche in formato .CSHTML o .VBHTML che contegano, rispettivamente, codice C# o Visual Basic. Come precedentemente accennato, la specifica sintassi che consente di inserire codice elaborato lato server all’interno di una semplice pagina HTML è detta “Razor“.<!– –>

Includere il contenuto di più pagine web con @RenderPage: approccio “bottom-up”

<!– –>Proviamo subito ad aggiungere un file .VBHTML a progetto cliccando sul pulsante Nuovo di WebMatrix quindi selezionando la voce VBHTML. Nella casella Nome inseriamo catalogo.vbhtml:

Confermando mediante la pressione del pulsante OK, WebMatrix proporrà una pagina contenente alcune tag HTML di base. Si sostituisca tutto il codice HTML visualizzato con ciò che segue:

<ol><li>Aglaonema</li>
<li>Falso papiro</li>
<li>Drachena</li>
<li>Pothos</li>
<li>Ficus</li>
</ol>

Si crei un nuovo file VBHTML assegnandogli il nome header.vbhtml ed incollando al suo interno quanto segue:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Catalogo delle piante</title>
    <link rel="stylesheet" type="text/css" href="//www.ilsoftware.it/sito.css" />
</head>
<body>
    <h1>Catalogo delle piante</h1>

Ancora, si crei un nuovo file VBHTML attribuendogli il nome footer.vbhtml ed inserendo al suo interno soltanto ciò che segue:

    <footer>Questo sito web &egrave; stato realizzato con WebMatrix</footer>
    </body>
</html>

Perché abbiamo approntato tre file, uno con il “corpo” della pagina e gli altri due, rispettivamente, contenenti intestazione e pié di pagina? La risposta è semplice. Intestazione e chiusura sono elementi comuni a tutte le pagine che andranno a comporre il sito web. Inserirne il contenuto in file “ad hoc” permetterà di eviatare di dover digitare sempre, più volte, le medesime informazioni e consentirà di fare in modo che eventuali modifiche, applicate all’intestazione o al “piede” della pagina, vengano immediatamente “recepite” su tutte le sottopagine del sito.

Per “combinare” velocemente le varie porzioni di codice HTML si può ricorrere alla sintassi “Razor“. Per indicare al server web la differenza tra il codice “Razor” e le tradizionali tag HTML, è sufficiente ricorrere allo speciale carattere @.

Utilizzando @RenderPage("nomedellapagina") è possibile richiedere l’inclusione del codice proveniente da un’altra pagina all’interno di quella ove si sta lavorando. Si torni sul file catalogo.vbhtml e si aggiungano le righe @RenderPage("header.vbhtml") e @RenderPage("footer.vbhtml"), rispettivamente, in testa ed in calce allo stesso:

Cliccando sul pulsante Esegui, dopo aver modificato catalogo.vbhtml, si otterrà – nel browser – quanto segue:

Come si vede, il contenuto delle tre pagine VBHTML è stato correttamente combinato utilizzando proprio @RenderPage.<!– –>

Approccio “top-down” per richiamare più pagine web e connessione ad una base dati

<!– –>L’approccio sin qui utilizzato è del tipo “bottom-up“. In alternativa si può usare una metodologia “top-down“, probabilmente ancor più efficace.
Si crei una nuova pagina VBHTML denominandola _layout.vbhtml ed incollandovi il seguente codice HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Catalogo delle piante</title>
    <link rel="stylesheet" type="text/css" href="//www.ilsoftware.it/sito.css" />
</head>

<body>
    <h1>Catalogo delle piante</h1>
    @RenderBody()
    <footer>Questo sito web &egrave; stato realizzato con WebMatrix</footer>
</body>
</html>

In questo caso, viene utilizzata sempre una pagina web “modello” (_layout.vbhtml) che contiene intestazione e “piede”; il “corpo” viene richiamato invocando l’istruzione @RenderBody().

Il passo finale consiste nel tornare al file catalogo.vbhtml quindi rimuovere le righe @RenderPage precedentemente aggiunte (con l’approccio “top-down” non servono più ed anzi creerebbero ovviamente problemi). Com’è possibile “comunicare” a catalogo.vbhtml ed a tutte le altre pagine del sito di utilizzare sempre, come layout, il contenuto del file _layout.vbhtml?

La procedura è molto semplice: basta creare un nuovo file CSHTML ed assegnargli il nome _PageStart.cshtml: si tratta di una pagina che WebMatrix provvede a chiamare ogniqualvolta venga richiesta, al server web, un qualasisi file .VBHTML o .CSHTML. Nel file _PageStart.cshtml si dovrà inserire quanto segue:

@{
Layout = "~/_layout.vbhtml";
}

Tornando al file catalogo.vbhtml quindi provando ad eseguirlo, il browser mostrerà di nuovo il seguente contenuto:

L’accaduto è riassumibile in pochi passi. Innanzi tutto, richiedendo da browser la pagina catalogo.vbhtml, il server è andato alla ricerca della pagina _PageStart.cshtml. Trovatala, viene eseguito il suo contenuto (la riga Layout = "~/_layout.vbhtml"; indica di impiegare il file _layout.vbhtml come “modello”).

Il server è quindi passato ad eseguire il file _layout.vbhtml che contiene intestazione e pié di pagina. Incontrando, al suo interno, la riga @RenderBody(), il server ha provveduto ad “incollarvi” il contenuto del file catalogo.vbhtml (il vero e proprio corpo della pagina).

Creando una nuova pagina VBHTML (assegnandole, ad esempio, il nome prova.vbhtml) ed inserendo al suo interno, semplicemente, la riga <p>Questo è un testo di prova.<p>, eseguendola, si noterà come il server web provvederà, automaticamente, ad inserire intestazione e “piede”:

Passiamo adesso a creare una base dati Microsoft SQL Server Compact che sarà poi collegata al sito web in corso di sviluppo.

Per procedere con la creazione di un nuovo database, è necessario cliccare sul “workspace” Database nella colonna di sinistra di WebMatrix quindi fare clic su Aggiungi un database al sito.

WebMatrix aggiungerà, così, un database SQL Server Compact al sito web assegnandogli il nome catalogo.sdf (può essere comunque variato a proprio piacimento). Agendo sui controlli posizionati nella colonna di sinistra, è possibile “navigare” entro la struttura della base dati.