WebMatrix : découverte et prise en main d'un outil de développement Web gratuit, « tout-en-un »

Avant de continuer, nous allons présenter brièvement l'interface utilisateur de WebMatrix qui – il faut le dire – est très ergonomique.

WebMatrix vous propose une interface riche mettant à votre disposition tous les outils dont vous avez besoin pour la création et la publication de votre site Web.

L'interface utilisateur est composée de quatre zones importantes, à savoir : la barre d'outils (1), le panel de navigation (2), le panel de sélection d'espace de travail (3) et la zone de travail (4).

1. La barre d'outils : elle contient un ruban « Accueil » façon office 2007 ou 2010. Ce ruban contient les commandes permettant de paramétrer le site (Mes sites, publier un site, exécuter, arrêter…) ;
2. Le panel de navigation : ce panel vous permet de naviguer entre les différentes options disponibles et sélectionner ce qui doit être affiché dans la zone de travail ;
3. Le panel de sélection d'espace de travail : cette zone permet de sélectionner l'espace de travail (Site, Fichiers, Base de donnes, Rapports). En fonction de ce que vous avez sélectionné dans cette zone, les éléments du ruban, du panel de navigation et de la zone de travail sont automatiquement remplacés par ceux adaptés à votre choix ;
4. La zone de travail : cette zone est celle où sont affichés les rapports, la zone d'édition des fichiers, de paramétrage du site…

Dans le panel de sélection d'espace de travail, sélectionnez l'espace de travail « Fichiers » (cet espace vous permet de créer des fichiers et dossiers de votre site Web).

L'espace de travail fichier vous présente la structure des fichiers existants dans votre site dans le panel de navigation.

Dans le ruban de la boite d'outils, cliquez sur « nouveau », ensuite sur « nouveau fichier » pour procéder à la création d'un nouveau fichier dans notre site.

WebMatrix vous affiche une liste des types de fichiers disponibles.

Comme vous pouvez le constater, WebMatrix vous propose plusieurs types de fichiers (html, css, cshtml, vbhtml, php…) qui sont pris en charge par l'éditeur.

Pour notre exemple nous allons utiliser un fichier avec l'extension .CSHTML. Sélectionnez donc dans la liste des fichiers le fichier de type .cshtml et donnez comme nom à votre fichier index.cshtml et cliquez sur OK.

Le fichier index.cshtml est créé avec les lignes de code suivantes par défaut :

Les fichiers de type cshtml sont des pages Web ASP.NET pouvant contenir du code HTML, JavaScript et CSS tout comme une page HTML normale, sauf qu'ils reposent sur le nouveau moteur de vues Razor et peuvent de ce fait avoir du contenu dynamique.

Les fichiers avec l'extension .vbhtml utilisent également le modèle de vues Razor.

Nous allons, à l'aide de l'éditeur de code de WebMatrix, ajouter quelques lignes de code pour afficher un message et la date du jour dans une page.

Et à l'exécution on obtient ceci :

Vous noterez certainement la syntaxe particulière au niveau de l'appel de la fonction Datetime.

@DateTime.Now

Que cela ne vous effraye pas, c'est juste la syntaxe – assez simple il faut le dire – qu'introduit le nouveau moteur de vues Razor sur lequel repose notre page index.

Ce tutoriel ayant pour principal but de vous faire découvrir WebMatrix et non la syntaxe d'un langage ou d'un moteur de vues, je ne vais pas m'attarder sur la syntaxe de Razor bien que nous l'utilisions dans quelques exemples.

Je tiens quand même à noter que le moteur de vues Razor permet de simplifier énormément les vues en rendant fluide le processus de code et en permettant d'intégrer rapidement du code serveur dans des balises HTML.

Revenons à notre exemple précédent (MonSiteTest), nous allons ajouter une base de données à notre site.

Pour créer une base de données avec WebMatrix, cliquez sur « Base de données » dans le panel de sélection d'espace de travail pour basculer dans la zone permettant la création et la gestion des bases de données.

Cliquez ensuite sur Ajouter une nouvelle base de données. Par défaut, un nouveau dossier App.data est automatiquement ajouté à votre site.

Dans le panel de navigation, un nouveau fichier de base de données (.mdf) est ajouté avec comme nom par défaut celui de votre site (bien évidemment vous pouvez modifier ce nom).

Cliquez sur le bouton Nouvelle table dans le ruban pour procéder à la création d'une nouvelle table devant contenir nos clients.

Cliquez ensuite sur nouvelle colonne et créez les différentes colonnes dont nous aurons besoin.

Dans la zone Propriété de la colonne, renseignez le nom, le type et la valeur par défaut.

Pour notre exemple vous allons créer les colonnes : Id de type int, auto-incrément ; Nom de type nvarchar ; Prenom de type nvarchar et Email de type nvarchar.

Pour définir le champ Id comme la clé primaire, dans la zone « Clé primaire ? » mettre le champ à « True » et de même pour définir que c'est un champ auto-incrément, mettre dans la zone « Identité » le champ à « True » également.

Lorsque vous aurez terminé, vous aurez une table semblable à celle ci-dessous :

Cliquez enfin sur l'icône Enregistrer de la boite d'outils d'accès rapide, et renseignez le nom de la table et cliquez enfin sur OK.

Dans notre cas, on va donner le nom « clients » à la table.

Dans le panel de navigation, sélectionnez la table « clients » et cliquez ensuite sur données dans la barre d'outils pour ajouter ou modifier des données dans la table « clients ».

Insérez quelques éléments dans cette table comme l'illustre la capture ci-dessous :

Maintenant que nous avons ajouté des données dans notre table « clients », voyons maintenant comment nous pouvons les afficher dans une page Web.

Dans notre site, nous allons ajouter une nouvelle page clients.cshtml. Pour cela, cliquezc sur « Fichiers » dans le panel de sélection d'espace de travail, ensuite sur nouveau dans la boite d'outils. Sélectionnez un fichier de type cshtml et dans la zone nom, saisissez « clients ».

Juste avant la balise DOCTYPE, saisissez les lignes de code suivant :

@{
    var db = Database.Open("MonSiteTest");
    var sqlreq = "Select * from clients";
}

Le signe @ suivi par des accolades désigne un bloc de code sur plusieurs lignes.

Database est une nouvelle classe qui fournit un ensemble de méthodes pouvant être facilement utilisées pour travailler avec les bases de données.

La méthode Open() établit automatiquement une connexion et ouvre la base de données dont le nom du fichier est passé en paramètre.

La seconde ligne de code est juste une requête pour la sélection des données dans la base de données.

Ensuite, dans le body, nous allons écrire le script pour lire les données dans la base de données et les afficher dans un tableau.

Pour cela, nous allons utiliser la méthode Query de la classe Database qui prend en paramètre la requête et retourne les champs de la table.

Nous allons également utiliser une boucle foreach pour lire les données dans une variable row et les afficher dans le tableau.

Le code complet de la page clients.chtml est le suivant :

@{
    var db = Database.Open("MonSiteTest");
    var sqlreq = "Select * from clients";
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Clients</title>
    </head>
    <body>
        <H1>Clients</H1>
        <table>
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>E-mail</th>
           </tr>
           @foreach(var row in db.Query(sqlreq)){
            <tr>
                <td>@row[1]</td>
                <td>@row[2]</td>
                <td>@row[3]</td>

Et à l'exécution on obtient le résultat suivant :

Dans la section précédente, nous avons affiché les données dans une page en utilisant un tableau HTML. Cependant, il existe un moyen beaucoup plus simple d'afficher les données à l'aide d'un nouveau composant ASP.NET : le WebGrid Helper.

Le WebGrid Helper retourne un tableau HTML qui affiche les données d'une table. L'assistant prend en charge les options de mise en forme pour créer un moyen de parcourir les données, et pour laisser aux utilisateurs la latitude de trier en cliquant sur un titre de la colonne.

Pour utiliser ce composant, nous allons déclarer une nouvelle variable de type Webgrid comme suit :

var grid = new WebGrid(db.Query(sqlreq));

Le WebGrid prend en paramètre le résultat d'une instruction de sélection des données dans la BD.

La méthode @grid.GetHtml() sera par la suite utilisée dans le body pour retourner une représentation HTML de la grille (tableau HTML).

Le code complet est le suivant :

@{
    var db = Database.Open("MonSiteTest");
    var sqlreq = "Select * from clients";
    var grid = new WebGrid(db.Query(sqlreq));
    
}   
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Clients</title>
        <style type="text/css">
            table {border-collapse:  collapse;}
            td, th {border:  solid 1px; }
        </style>
    </head>
    <body>
        <h1>Clients</h1>
        @grid.GetHtml()
    </body>
</html>

Et à l'exécution, on obtient le résultat suivant :

VI-E-1. Personnaliser un WebGrid▲

Le WebGrid Helper affiche par défaut toutes les colonnes retournées par la requête. Mais vous pouvez le personnaliser en spécifiant par exemple les données qui seront affichées et dans quel ordre, procéder aux formatages des données (à l'exemple des dates ou des valeurs monétaires).

La personnalisation du WebGrid est assez simple, il suffit lors de l'appel du Grid.GetHtml, de spécifier les colonnes à afficher, ainsi que le format de celles-ci.

 

Sélectionnez

@grid.GetHtml(
           columns: grid.Columns(
               grid.Column("Nom"),
               grid.Column("Prenom", "Prénom"),
               grid.Column("Email","Adresse mail", format:@<i>@item.Email</i>)
            )

Le code complet est le suivant :

 

Sélectionnez

@{
    var db = Database.Open("MonSiteTest");
    var sqlreq = "Select * from clients";
    var grid = new WebGrid(db.Query(sqlreq));
    
}   
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Clients</title>
        <style type="text/css">
            table {border-collapse:  collapse;}
            td, th {border:  solid 1px; }
        </style>
    </head>
    <body>
        <h1>Clients</h1>
          @grid.GetHtml(
           columns: grid.Columns(
               grid.Column("Nom"),
               grid.Column("Prenom", "Prénom"),
               grid.Column("Email","Adresse mail", format:@<i>@item.Email</i>)
            )
     )
    </body>
</html>

Et à la compilation on obtient le résultat suivant :

VI-E-2. Paginer un WebGrid Helper▲

Dans le cas où vous avez plusieurs éléments enregistrés dans la base de données, il est possible avec le WebGrid de définir le nombre de lignes qui seront affichées dans la grille.

Pour cela, il suffit de surcharger le constructeur du WebGrid en spécifiant la colonne qui sera utilisée pour le tri et le nombre d'éléments à afficher par page.

 

Sélectionnez

var grid = new WebGrid(source: db.Query(sqlreq),
                           defaultSort: "Nom",
                           rowsPerPage: 3) ;

Le code complet est le suivant :

 

Sélectionnez

@{
    var db = Database.Open("MonSiteTest");
    var sqlreq = "Select * from clients";
    var grid = new WebGrid(source: db.Query(sqlreq),
                           defaultSort: "Nom",
                           rowsPerPage: 3) ;
}   
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Clients</title>
        <style type="text/css">
            table {border-collapse:  collapse;}
            td, th {border:  solid 1px; }
        </style>
    </head>
    <body>
        <h1>Clients</h1>
          @grid.GetHtml(
           columns: grid.Columns(
               grid.Column("Nom"),
               grid.Column("Prenom", "Prénom"),
               grid.Column("Email","Adresse mail", format:@<i>@item.Email</i>)
            )
     )
    </body>
</html>

Et à la compilation on obtient le résultat suivant :

Dans cette partie, nous verrons comment insérer les données à partir d'une page Web dans une table de notre base de données SQL Server Compact.

Pour cela, dans notre site, nous allons ajouter une nouvelle page nommée InsertClients.chtml.

Dans cette page, nous allons ajouter trois zones de saisie pour enregistrer les éléments sur les clients et un script pour vérifier que les données ont été bien saisies.

Après vérification de la saisie, les données seront ensuite enregistrées dans la table clients et l'utilisateur sera automatiquement redirigé vers la page clients.cshtml mise à jour.

La méthode .Execute() de la classe Database sera utilisée pour l'insertion des données dans la base de données.

La méthode ModelState.AddError de la classe ModelState sera utilisée pour notifier à la vue qu'il y a une erreur sur un champ du formulaire.

Le code complet de la page InsertClient.cshtml est le suivant (après avoir validé un nouvel enregistrement sans avoir spécifié le champ « Adresse mail ») :

<!DOCTYPE html>
@{
    var db = Database.Open("MonSiteTest");
    var Nom = Request["Nom"];
    var Prenom = Request["Prenom"];
    var Email = Request["Email"];

    if (IsPost) {

       //vérification du nom
        Nom = Request["Nom"];
        if (Nom.IsEmpty()) {
           ModelState.AddError("Nom", "Le nom est obligatoire.");
        }

        //vérification du prénom 
        Prenom = Request["Prenom"];
        if (Prenom.IsEmpty()) {
          ModelState.AddError("Prenom",
                "Le prénom est obligatoire.");
         }

         //vérification de l'adresse mail
        Email = Request["Email"];
        if (Email.IsEmpty()) {
          ModelState.AddError("Email", "L'adresse mail est obligatoire.");
        }

        if(ModelState.IsValid) {
            var sqlreq = "INSERT INTO clients (Nom, Prenom, Email) " +
                "VALUES (@0, @1, @2)";
            db.Execute(sqlreq, Nom, Prenom, Email);
            // Display the page that lists products.
            Response.Redirect(@Href("~/Clients"));
        }
    }
}

<html>
<head>
   <title>Enregistrement client</title>
   <style type="text/css">
      label {float:left; width: 8em; text-align: right;
               margin-right: 0.5em;}
      fieldset {padding: 1em; border: 1px solid; width: 35em;}
      legend {padding: 2px 4px; border: 1px solid; font-weight:bold;}
      .validation-summary-errors {font-weight:bold; color:red; font-size: 11pt;}
   </style>
</head>
<body>
   <h1>Enregistrement d'un nouveau client</h1>

   @Html.ValidationSummary("Erreur lors de l'opération:")

   <form method="post" action="">
       <fieldset>
           <legend>Nouveau client</legend>
           <div>
               <label>Nom:</label>
               <input name="Nom" type="text" size="50" value="@Nom" />
           </div>
           <div>
               <label>Prénom:</label>
               <input name="Prenom" type="text" size="50" value="@Prenom" />
           </div>
           <div>
               <label>Adresse mail:</label>
               <input name="Email" type="text" size="50" value="@Email" />
           </div>
           <div>
               <label>&nbsp;</label>
               <input type="submit" value="Enregistrer" class="submit" />
           </div>
       </fieldset>

   </form>
</body>
</html>

Et à la compilation, vous obtenez le résultat suivant :