WebMatrix: creare una base dati ed attingervi da una pagina web

Nella precedente puntata (ved. questo articolo) abbiamo visto come installare WebMatrix ed abbiamo iniziato a prendere familiarità con l’ambiente di lavoro. Questa volta ci concentriamo sugli strumenti che offre WebMatrix per la gestione delle basi di dati. Cominceremo con la creazione di un database “ex novo” che collegheremo poi ad un’applicazione web sviluppata servendoci di WebMatrix.

Come già anticipato nella scorsa puntata, la procedura d’installazione di WebMatrix provvede ad installare anche SQL Server Compact, versione compatta del DMBS di Microsoft.
Per creare un nuovo database, è necessario aprire il progetto sul quale si stava lavorando, cliccare sul “workspace” Database, nella colonna di sinistra di WebMatrix, ed infine fare clic sul link Aggiungi un database al sito, nella parte centrale della finestra.

WebMatrix aggiungerà, così, un database al sito web in corso di sviluppo 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.

La barra degli strumenti di WebMatrix propone una serie di comandi, accessibili facendo clic sui pulsanti corrispondenti, che consentono di aggiungere una nuova tabella all’interno del tabase, creare interrogazioni (query) od effettuare la migrazione verso altri database.

Cominciamo con l’aggiungere una nuova tabella selezionando catalogo.sdf dalla colonna di sinistra quindi cliccando sul pulsante Nuova tabella.
Come primo passo, è bene aggiungere una colonna denominata id che conterrà un identificativo numerico associato a ciascun record della tabella. Nel riquadro Proprietà colonna, in corrispondenza della casella “(Nome)” è necessario digitare id. Il menù a tendina Consenti null deve essere impostato su false dal momento che l’identificativo associato a ciascun record memorizzato in tabella (ad esempio, il singolo prodotto di un catalogo) non può mai assumere un valore pari a zero. I valori di Identità? e Chiave primaria? dovranno poi essere impostati su true. Nel primo caso, si comunicherà a WebMatrix l’intenzione di utilizzare la colonna appena aggiunta come un campo “identità”: in questo modo, ad ogni inserimento di un nuovo record in tabella, il database provvederà automaticamente ad assegnargli un numero identificativo progressivo.
Attivando la chiave primaria, invece, il campo ID verrà utilizzato per identificare univocamente un record nella tabella del database (al campo ID viene aggiunta una piccola chiave di colore giallo). Ovviamente, non possono esserci record con lo stesso ID altrimenti verrebbe meno il vincolo di unicità che contraddistingue le colonne configurate come chiavi primarie.
Per la memorizzazione degli ID, il tipo di dati scelto è bigint grazie alla possibilità di memorizzare un numero enorme di valori (ved. questa pagina).

A questo punto, cliccando sul pulsante Nuova colonna si aggiungerà un campo aggiuntivo al quale si potranno attribuire le seguenti proprietà:

(Nome): Nome
Chiave primaria?: false
Tipo di dati: ntext

Si può quindi creare una terza colonna, assegnadogli il nome “Nome_scientifico” (tipo di dati ntext) ed una quarta “Descrizione” (tipo di dati ntext).

Per memorizzare tutte le modifiche apportate, è sufficiente cliccare sul piccolo pulsante Salva, situato nella barra del titolo di WebMatrix, oppure ricorrere alla combinazione di tasti CTRL+S.
Alla comparsa della finestra di dialogo Nome tabella, si può digitare Piante.

Facendo doppio clic con il mouse sulla tabella “Piante” che adesso appare nella colonna di sinistra di WebMatrix, si possono iniziare ad aggiungere dei record all’interno del database SQL Server Compact appena creato.

Cliccando sul valore NULL della colonna Nome, si provi a digitare Aglaonema, specificando la stessa cosa anche nella colonna Nome scientifico. Spostandosi con la freccia in basso, ad inserimento dati avvenuto, il database provvederà ad assegnare automaticamente l’ID numero 1 al record appena aggiunto.
Come passo successivo, si può continuare con l’inserimento di altri record:

Per incollare dati provenienti dall’area degli Appunti di Windows (copiati in memoria, ad esempio, utilizzando la combinazione di tasti CTRL+C), è necessario fare doppio clic sul campo che dovrà ospitare il dato, cliccarvi col tasto destro del mouse quindi scegliere il comando Incolla.

Una volta inseriti i dati d’esempio, si può chiudere la tabella (le informazioni introdotte vengono annotate in tempo reale nel daatabase) e tornare al sito in fase di sviluppo cliccando sul “workspace” File nella colonna di sinistra di WebMatrix.

Sviluppare il codice per recuperare informazioni dal database

<!– –>Dando per scontato di aver già seguito ed applicato con successo le istruzioni (approccio “top-down“) pubblicate in questa pagina, procediamo con la creazione di un file chiamato catalogo.cshtml (pulsante Nuovo, Tutti, CSHTML).

Per attingere alle informazioni contenute nella base dati appena generata, iniziamo con lo specificare, in testa al file CSHTML, quanto segue:

@{
var db=Database.Open("Catalogo");
var sqlQ="SELECT * FROM Piante";
var data=db.Query(sqlQ);
}

Chiunque abbia programmato in Java, C++, C# o C+ riconoscerà immediatamente la presenza delle parentesi graffe che hanno come obiettivo quello di demarcare il codice Razor che il web server deve eseguire.
La seconda riga si occupa dell’apertura della base dati denominata “Catalogo” con la quale, d’ora innanzi, ci si potrà interfacciare richiamando la variabile db.
La variabile sqlQ è invece inizializzata con la query SQL che dovrà essere trasmessa al database. In questo caso, viene richiesto di estrarre tutto il contenuto della tabella denominata “Piante” (SELECT * FROM Piante).
Ricordiamo che il codice, diversamente a ciò che accade in Visual Basic, programmando in C# è “case sensitive“. Per intenderci, nell’esempio che segue, si sono inizializzate due differenti variabili con valori altrettanto diversi:

@{
var lastName = "Mela";
var LastName = "Pera";
}

Ovviamente, allo stesso risultato è possibile pervenire utilizzando, in alternativa codice Visual Basic, impiegando un file VBHTML. La sintassi propria di Visual Basic è differente ed è probabilmente più indicata a coloro che hanno programmato spesso utilizzando tale linguaggio.
Ricordiamo che il carattere @ in testa al codice segnala al server web che quanto compreso tra le parentesi graffe è codice Razor da eseguirsi.

Appena sotto digitiamo quanto segue:

<ol>
@foreach(var row in data)
{
<li>@row.Nome</li>
}
</ol>

Si otterrà un file dal seguente contenuto:

Il significato delle poche righe di codice appena digitate è facilmente intuibile: il codice Razor indica al server web, per ciascuna riga (leggasi “record”) contenuta nella tabella “Piante” (variabile data), di recuperare il dato conservato nella colonna “Nome” e di “incollarlo” all’interno della tag HTML <li>, utilizzata per la composizione della lista.

Cliccando sul pulsante Esegui, si dovrebbe ottenere la schermata seguente:

La sua comparsa sta a significare che il web server ha correttamente letto dal database il contenuto della colonna Nome e ne ha “stampato” il contenuto, grazie al ciclo for sulla pagina web (si veda il codice HTML della pagina trasmesso al browser in uso).

Se si volesse mostrare, nella pagina web, anche il nome scientifico di ciascuna pianta, è sufficiente modificare la riga <li>@row.Nome</li> in <li>@row.Nome (<i>@row.Nome_scientifico</i>)</li>. Ecco il risultato:

Aggiungendo nuovi record alla base dati e ricaricando la pagina catalogo.cshtml, il contenuto della lista HTML sarà dinamicamente aggiornato.

Nella prossima puntata, vedremo come consentire l’aggiunta di nuovi record all’interno del database direttamente dal browser.<!– –>