gestion des données -...
Post on 02-Aug-2020
5 Views
Preview:
TRANSCRIPT
Gestion des données
Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à
changement
Ce chapitre décrit comment accéder aux données d'une base de données et comment les afficher dans des pages Web ASP.NET.
A la fin de ce chapitre, vous saurez :
Comment créer une base de données. Comment se connecter à une base de données. Comment afficher des données dans une page web. Comment insérer, mettre à jour et supprimer des enregistrements de base de données.
Les fonctionnalités suivantes vous seront présentées dans ce chapitre:
Travailler avec une base de données Microsoft SQL Server Compact Edition. Travailler avec des requêtes SQL. La classe Database. L’assistant WebGrid.
Introduction aux bases de données
Imaginez un carnet d'adresse classique. Pour chaque entrée du carnet d'adresse (c’est-à-dire pour
chaque contact), vous disposez de plusieurs informations (données) telles que son nom, son prénom,
son adresse, son adresse e-mail et son numéro de téléphone.
La manière la plus classique de représenter ce type de données est une table avec des lignes et des
colonnes. En termes de base de données, chaque ligne est appelée un enregistrement. Chaque
colonne (parfois appelée champ) contient une valeur pour chaque type de données : nom, prénom,
et ainsi de suite.
Id Prenom Nom Addresse Email Telephone
1 Jean Abrus 10 rue des Champs Elysées
jean@contoso.com 0120938899
2 Thierry Adams 1 avenue de la République
thierry@cohowinery.com 0129388499
La plupart du temps, une table de bases de données doit avoir une colonne qui contient un
identificateur unique, par exemple le numéro de client, le numéro de compte, etc. Cette colonne est
appelée la clé primaire de la table. Elle est utilisée pour identifier de manière unique chaque ligne de
la table. Dans l'exemple précédent, la colonne Id serait la clé primaire du carnet d'adresses.
Après cette brève introduction aux bases de données, vous êtes maintenant prêt à apprendre à créer
une base de données puis à effectuer des opérations simples telles que l'ajout, la modification et la
suppression de données.
Bases de données relationnelles
Il est possible de stocker des données de nombreuses façons, y compris dans des fichiers texte et des
tableurs. Cependant, dans la plupart des solutions métiers, les données sont stockées dans une base
de données relationnelle.
Ce chapitre ne souhaite pas rentrer trop dans le détail des bases de données. Si vous voulez en savoir
un peu plus sur le sujet, sachez que dans une base de données relationnelle, l'information est divisée
de manière logique en plusieurs tables séparées. Par exemple, une base de données pour une école
contient des tables distinctes pour les élèves et pour les salles de classe. Le gestionnaire de bases de
données (tel que SQL Server) propose de puissantes commandes pour créer dynamiquement des
relations entre les tables. Par exemple, vous pouvez utiliser la base de données relationnelle pour
établir un lien logique entre les étudiants et les classes dans le but de créer un planning. Le fait de
stocker des données dans des tables distinctes réduit la complexité de leur structure et la nécessité
de conserver des données redondantes dans celles-ci.
Créer une base de données
La procédure qui suit illustre la création d’une base de données nommée SmallBakery en utilisant
l’outil de conception de base de données de SQL Server Compact qui est inclus dans WebMatrix. Bien
qu’il soit possible de créer une base de données par programmation, il est plus courant de créer la
base de données et les tables en utilisant un outil de conception comme WebMatrix.
1. Démarrez WebMatrix, et dans la fenêtre Quick Start, cliquez Site From Template.
2. Sélectionnez le modèle Empty Site et dans la zone Site Name entrez SmallBakery, puis
cliquez sur OK. Le site est créé puis affiché dans WebMatrix.
3. Dans le volet de gauche, cliquez sur l'espace de travail Databases.
4. Dans le ruban, cliquez New Database. Une base de données vide, du même nom que votre
site, est créée.
5. Dans le volet de gauche, développez le nœud SmallBakery.sdf puis cliquez sur Tables.
6. Dans le ruban, cliquez New Table. WebMatrix ouvre son concepteur de table.
7. Dans le panneau Column Properties, en face de (Name) entrez Id.
8. Pour cette nouvelle colonne Id, configurez Is Identity ? et Is Primary Key ? à la valeur True.
Comme son nom l'indique, Is Primary Key indique à la base de données que cette colonne sera la clé
primaire de la table. Is Identity signifie que la base de données devra créer automatiquement un
numéro d'identification pour chaque nouvel enregistrement (de manière séquentielle en
commençant à 1).
9. Dans le ruban, cliquez New Column.
10. Dans le panneau Column Properties, pour (Name), entrez Name.
11. Configurez Allow Nulls à la valeur False. Cela garantit que la colonne Name ne pourra pas
être vide.
12. Configurez Data Type à nvarchar. Le mot var dans nvarchar indique à la base de données que
la donnée de cette colonne est une chaîne de caractères dont la taille peut varier d’un
enregistrement à l’autre (Le préfixe n signifie national, ce qui veut dire que le champ peut
contenir des données de caractères en provenance de n’importe quel alphabet ou système
d'écriture (c’est-à-dire que le champ contient des données Unicode).
13. En suivant la même procédure, créez une colonne nommée Description. Configurez Allow
Null à la valeur False et Data Type à nvarchar.
14. Créez une colonne nommée Price. Configurez Allow Null à la valeur False et Data Type à
money.
15. Faites CTRL+S pour enregistrer la table et nommez-la "Products".
Lorsque vous avez terminé, la définition de la table doit ressembler à ceci:
Ajouter des données à la base de données
Maintenant vous allez pouvoir ajouter quelques lignes de données à votre base de données. Vous les
réutiliserez plus tard dans ce chapitre.
1. Dans le volet de gauche, cliquez sur l'espace de travail Databases.
2. Dans le volet de gauche, développez le nœud SmallBakery.sdf puis cliquez sur Tables.
3. Faites un clic-droit sur la table Products, puis cliquez sur Data.
4. Dans le panneau d'édition, entrez les enregistrements suivants (vous pouvez saisir des
données en français, si vous préférez):
Name Description Price
Bread Baked fresh every day. 2.99
Strawberry Shortcake Made with organic strawberries from our garden.
9.99
Apple Pie Second only to your mom’s pie. 12.99
Pecan Pie If you like pecans, this is for you 10.99
Lemon Pie Made with the best lemons in the world.
11.99
Cupcakes Your kids and the kid in you will love these.
7.99
N'oubliez pas que vous n'avez pas à saisir quelque chose dans la colonne Id. En effet, lorsque vous
avez créé cette colonne, vous avez défini sa propriété Is Identity à la valeur True, ce qui signifie
qu’elle sera automatiquement alimentée par la base de données.
Lorsque vous avez terminé la saisie des données, le concepteur de table doit ressembler à ceci:
5. Fermez maintenant cet onglet qui contient les données de la base de données.
Afficher des données à partir d'une base de données
Maintenant que vous avez une base de données comportant des données, vous pouvez afficher
celles-ci dans une page Web ASP.NET. Pour récupérer les lignes de la table à afficher, on utilise une
instruction SQL, c’est-à-dire une commande que l’on transmet à la base de données.
1. Dans le volet de gauche, cliquez sur l'espace de travail Files.
2. A la racine du site web, créez une nouvelle page CSHTML nommée ListProducts.cshtml.
3. Remplacez son contenu par le suivant:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products ORDER BY Name"; } <!DOCTYPE html> <html> <head> <title>Small Bakery Products</title> <style> table, th, td { border: solid 1px #bbbbbb; border-collapse:collapse; padding:2px; } </style> </head> <body> <h1>Small Bakery Products</h1> <table> <thead>
<tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach (var row in db.Query(selectQueryString)){ <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table> </body> </html>
Le premier bloc de code ouvre le fichier SmallBakery.sdf (la base de données) que vous avez créé
précédemment. La méthode Database.Open suppose que le fichier .sdf se trouve dans le dossier
App_Data de votre site Web (Remarquez qu’il n’est pas nécessaire de spécifier l’extension .sdf -- en
fait, si vous le faites, la méthode Open ne fonctionne pas.)
Remarque : Le dossier App_Data est un dossier spécial d’ASP.NET utilisé pour stocker les fichiers de
données. Pour en savoir plus, consultez Se connecter à une base de données plus loin dans ce
chapitre.
Le code fait ensuite une requête pour interroger la base de données en utilisant l’instruction SQL
Select suivante :
SELECT * FROM Products ORDER BY Name
Dans cette instruction, Products fait référence à la table que l’on veut interroger. Le caractère *
indique que la requête doit retourner toutes les colonnes de la table (Vous pouvez aussi lister les
colonnes individuellement, séparées par des virgules, si vous voulez voir une partie seulement de
celles-ci.) La clause Order By indique la façon dont les données doivent être triées (dans l’exemple,
les produits devront être triés par nom, donc selon la colonne Name). Cela signifie que les données
sont triées par ordre alphabétique basé sur la valeur de la colonne Name pour chaque ligne.
Dans le corps de la page, le balisage crée une table HTML qui sera utilisée pour afficher les données.
Dans l'élément tbody, on utilise une boucle foreach pour récupérer individuellement chaque ligne de
données retournée par la requête. Pour chaque ligne de données, une ligne de tableau HTML (tr) est
créée. Ensuite, sont créées des cellules de tableau HTML (td) pour chaque colonne. A chaque
itération dans la boucle, la variable row est chargée avec la ligne suivante de la base de données (cf.
l'instruction foreach). Pour récupérer la valeur d’une colonne de la ligne, utilisez row.Name ou
row.Description, etc… selon le nom de la colonne désirée.
4. Exécutez la page dans un navigateur.
Langage de requête structuré (Structured Query Language - SQL )
SQL est un langage qui est utilisé dans la plupart des bases de données relationnelles pour gérer les
données. Il comprend des commandes pour récupérer des données et les mettre à jour, et pour
créer, modifier et gérer les tables de la base de données. SQL est différent d'un langage de
programmation (comme celui que vous utilisez dans WebMatrix) : en effet le principe est que l’on
soumet à la base de données une demande, à charge de celle-ci de savoir comment récupérer les
données ou effectuer la tâche demandée. Voici quelques exemples de commandes SQL et ce qu'elles
font:
SELECT Id, Name, Price FROM Products WHERE Price > 10.00 ORDER BY Name
Cette commande récupère les colonnes Id, Name et Price des enregistrements de la table Products,
pour lesquels la valeur du prix (Price) est supérieur à 10.00, et renvoie les résultats dans l'ordre
alphabétique sur la base des valeurs de la colonne Name. Elle renvoie un jeu de résultat (result set)
qui contient les enregistrements répondant au critère, ou un jeu vide si aucun enregistrement ne
correspond.
INSERT INTO Products (Name, Description, Price) VALUES ("Croissant", "Un délice feuilleté", 1.99)
Cette commande insère un nouvel enregistrement dans la table Products, dont la colonne Name a la
valeur "Croissant", la colonne Description, la valeur "Un délice feuilleté", et la colonne Price, la valeur
1.99.
DELETE FROM Products WHERE ExpirationDate < "01/01/2008"
Cette commande supprime les enregistrements de la table Products dont la date d'expiration
(ExpirationDate) est antérieure au 1er janvier 2008 (Cela suppose bien sûr que la table Products
possède une telle colonne). La date est entrée ici au format JJ/MM/AAAA, mais plus généralement
elle doit être saisie au format correspondant à vos paramètres régionaux.
Les instructions INSERT INTO et DELETE ne retournent pas de jeux de résultat. Au lieu de cela, elles
renvoient un nombre qui indique combien d'enregistrements ont été affectés par la commande.
Pour certaines de ces opérations (comme l'insertion et la suppression d'enregistrement), le
processus qui demande l'opération doit disposer des autorisations appropriées dans la base de
données. C'est pourquoi, pour les bases de données de production, vous devez généralement fournir
un nom d'utilisateur et mot de passe lorsque vous vous connectez à la base de données.
Il existe des centaines de commandes SQL, mais elles suivent toutes un modèle comme celui-ci. Vous
pouvez par exemple utiliser des commandes SQL pour créer des tables de base de données, pour
compter le nombre d'enregistrements dans une table, pour calculer des prix et effectuer de
nombreuses autres opérations.
Insérer des données dans une base de données
Cette section montre comment créer une page qui permet aux utilisateurs d'ajouter un nouveau
produit à la table de base de données Products. Une fois le nouveau produit inséré, la page affiche le
contenu de la table mise à jour, en utilisant la page ListProducts.cshtml que vous avez créée dans la
section précédente.
La page effectue une validation pour s'assurer que les données que l'utilisateur a saisies sont
conformes à la base de données. Par exemple, le code de la page vérifie qu’une valeur a bien été
inscrite pour toutes les colonnes obligatoires de la table.
Remarque: Pour certaines de ces opérations (comme l'insertion et la suppression d'enregistrement),
le processus qui demande l'opération doit disposer des autorisations appropriées dans la base de
données. Pour les bases de données de production (contrairement à la base de test que nous avons
créée dans cet exemple), vous devez généralement fournir un nom d'utilisateur et un mot de passe
lorsque vous vous connectez à la base de données.
1. Dans le site, créez un nouveau fichier CSHTML nommé InsertProducts.cshtml.
2. Remplacez son contenu par le suivant:
@{ var db = Database.Open("SmallBakery"); var Name = Request["Name"]; var Description = Request["Description"]; var Price = Request["Price"];
if (IsPost) {
// Read product name. Name = Request["Name"]; if (Name.IsEmpty()) { Validation.AddFieldError("Name", "Product name is required."); }
// Read product description. Description = Request["Description"]; if (Description.IsEmpty()) { Validation.AddFieldError("Description", "Product description is required."); }
// Read product price Price = Request["Price"]; if (Price.IsEmpty()) { Validation.AddFieldError("Price", "Product price is required."); }
// Define the insert query. The values to assign to the // columns in the Products table are defined as parameters
// with the VALUES keyword. if(Validation.Success) { var insertQuery = "INSERT INTO Products (Name, Description,
Price) " + "VALUES (@0, @1, @2)"; db.Execute(insertQuery, Name, Description, Price); // Display the page that lists products. Response.Redirect(@Href("~/ListProducts")); } } } <!DOCTYPE html> <html> <head> <title>Add Products</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 4p; border: 1px solid; font-weight: bold;} .validation-summary-errors {font-weight:bold; color:red; font-
size:11pt;} </style> </head> <body> <h1>Add New Product</h1>
@Html.ValidationSummary("Errors with your submission:")
<form method="post" action=""> <fieldset> <legend>Add Product</legend> <div> <label>Name:</label> <input name="Name" type="text" size="50" value="@Name" /> </div> <div> <label>Description:</label>
<input name="Description" type="text" size="50" value="@Description" /> </div> <div> <label>Price:</label> <input name="Price" type="text" size="50" value="@Price" /> </div> <div> <label> </label> <input type="submit" value="Insert" class="submit" /> </div> </fieldset>
</form> </body> </html>
Le corps de la page contient un formulaire HTML avec trois zones de texte qui permettent aux
utilisateurs d'entrer un nom, une description et un prix. Lorsque les utilisateurs cliquent sur le
bouton Insert, le code en haut de la page ouvre une connexion à la base de données SmallBakery.sdf.
Il récupère ensuite les valeurs que l'utilisateur a soumises via l’objet Request et attribue ces valeurs
aux variables locales.
Pour valider que l'utilisateur a entré une valeur pour chaque colonne obligatoire, on procède comme
ceci :
Name = Request["Name"]; if (Name.IsEmpty()) { Validation.AddFieldError("Name", "Product name is required."); }
Si la valeur de la colonne Name est vide, la méthode AddFieldError de l'assistant Validation est
invoquée, avec en paramètre le message d'erreur souhaité. Il suffit de répéter cette opération pour
chaque colonne à contrôler. Une fois que toutes les colonnes ont été vérifiées, le code réalise le test
suivant:
if(Validation.Success) { // ... }
Si toutes les colonnes ont été validées (aucune n'est vide), on peut donc poursuivre et créer
l’instruction SQL pour insérer les données comme suit :
var insertQuery = "INSERT INTO Products (Name, Description, Price) VALUES (@0, @1, @2)";
La requête contient des paramètres (@0, @1, @2) pour les valeurs à insérer dans les colonnes.
Remarque : Par mesure de sécurité, il faut toujours passer des valeurs à une instruction SQL en
utilisant des paramètres, exactement comme dans cet exemple. D’une part, cela vous laisse les
moyens de valider les données de l'utilisateur, et d’autre part, cela vous protège contre toutes
tentatives d’envoi de commandes malveillantes dans votre base de données (appelées attaques
d’injection SQL).
Pour exécuter la requête, utilisez la méthode Execute, à laquelle on transmet les variables qui
contiennent les valeurs à substituer aux paramètres de la requête :
db.Execute(insertQuery, Name, Description, Price);
Une fois l’insertion réalisée, l'utilisateur est renvoyé sur la page qui liste tous les produits, via cette
ligne:
Response.Redirect("~/ListProducts");
Si la validation des informations saisies par l’utilisateur n’est pas satisfaisante, l'insertion n’est pas
faite. Auquel cas, vous disposez d’un assistant dans la page qui permet d'afficher tous les messages
d'erreur accumulés au fur et à mesure dans l’exécution du code :
@Html.ValidationSummary("Errors with your submission:")
Notez que le bloc de style inclut une définition de classe CSS nommée validation-summary-errors. Il
s'agit du nom de la classe CSS qui est utilisée par défaut dans l'élément div contenant les messages
d’erreur de validation. Dans l’exemple, le résumé des erreurs de validation s’affichera en rouge et en
gras, mais vous pouvez modifiez la classe CSS pour afficher la mise en forme de votre choix.
3. Visualisez la page dans un navigateur.
La page affiche un formulaire semblable à celui qui est représenté dans l'illustration suivante.
4. Entrez des valeurs pour toutes les colonnes, sauf pour la colonne prix.
5. Cliquez Insert.
La page affiche un message d'erreur, comme le montre l'illustration ci-dessous. (aucun nouvel
enregistrement n’est créé.)
6. Remplissez cette fois le formulaire complètement, puis cliquez sur Insert.
La page ListProducts.cshtml est affichée et montre le nouvel enregistrement inséré.
Mettre à jour des données dans une base de données
Après avoir entré des données dans une table, vous pourriez maintenant avoir besoin de les
réactualiser. La prochaine procédure montre comment créer deux pages semblables à celle créée
pour l'insertion des données : la première, affiche les produits et permet aux utilisateurs d’en
sélectionner un pour faire des modifications ; la seconde, permet aux utilisateurs de réaliser les
modifications et de les enregistrer.
Important : Dans un site de production, on limite généralement les personnes autorisées à réaliser
des modifications sur les données. Pour en savoir plus sur la façon de mettre en place un site avec un
accès sécurisé et sur les moyens d'autoriser l'utilisateur à exécuter des tâches sur le site, voir le
chapitre 13 - Améliorer la sécurité et l'appartenance.
1. Dans le site, créez un nouveau fichier CSHTML nommé EditProducts.cshtml.
2. Remplacez son contenu par ce qui suit:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products ORDER BY Name";
} <!DOCTYPE html> <html> <head> <title>Edit Products</title> <style type="text/css"> table, th, td { border: solid 1px #bbbbbb; border-collapse:collapse; padding:2px; } </style> </head> <body> <h1>Edit Small Bakery Products</h1> <table> <thead> <tr> <th> </th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach (var row in db.Query(selectQueryString)) { <tr> <td><a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table> </body> </html>
La seule différence entre cette page et la page ListProducts.cshtml créée auparavant, c'est que la
table HTML comporte ici une colonne supplémentaire qui affiche un lien nommé Edit. Lorsque
l’utilisateur clique ce lien, il est redirigé vers la page UpdateProducts.cshtml (que vous allez créer
dans la suite de cet exercice) dans laquelle il peut modifier l'enregistrement sélectionné.
Examinons le code qui crée le lien Edit :
<a href="@Href("~/UpdateProducts", row.Id)">Edit</a></td>
Il s’agit d’une balise <a> HTML dont l’attribut Href est défini dynamiquement. L'attribut Href a un
premier paramètre indiquant la page à afficher lorsque l'utilisateur clique sur le lien et un second
correspondant à la valeur Id de la ligne en cours. Lorsque la page s'exécute, la source de la page
contient des liens du type :
<a href="UpdateProducts/1">Edit</a></td> <a href="UpdateProducts/2">Edit</a></td> <a href="UpdateProducts/3">Edit</a></td>
Notez que l'attribut Href a une valeur du type UpdateProducts/n, où n est un numéro de produit.
Quand un utilisateur cliquera sur un lien, l'URL ressemblera à quelque chose comme ceci:
http://localhost:18816/UpdateProducts/6
En d'autres termes, le numéro du produit que l’utilisateur souhaite modifier est passé dans l'URL de
la page.
3. Visualisez la page dans un navigateur. La page affiche les données comme suit :
Vous allez maintenant créer la page qui permet à l’utilisateur de mettre à jour les données. Celle-ci
inclut du code de validation pour contrôler les données que l'utilisateur saisit. Par exemple, toutes
les colonnes obligatoires doivent contenir une valeur.
4. Dans le site, créez un nouveau fichier CSHTML nommé UpdateProducts.cshtml.
5. Remplacez le balisage dans le fichier par ce qui suit:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products WHERE Id=@0";
var ProductId = UrlData[0];
if (ProductId.IsEmpty()) { Response.Redirect(@Href("~/EditProducts")); }
var row = db.QuerySingle(selectQueryString, ProductId);
var Name = row.Name; var Description = row.Description; var Price = row.Price;
if (IsPost) { Name = Request["Name"]; if (String.IsNullOrEmpty(Name)) { Validation.AddFieldError("Name", "Product name is required."); }
Description = Request["Description"]; if (String.IsNullOrEmpty(Description)) { Validation.AddFieldError("Description", "Product description is required."); }
Price = Request["Price"]; if (String.IsNullOrEmpty(Price)) {
Validation.AddFieldError("Price", "Product price is required."); }
if(Validation.Success) { var updateQueryString = "UPDATE Products SET Name=@0, Description=@1, Price=@2 WHERE
Id=@3" ; db.Execute(updateQueryString, Name, Description, Price,
ProductId); Response.Redirect(@Href("~/EditProducts")); } } } <!DOCTYPE> <html> <head> <title>Add Products</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 4p; border: 1px solid; font-weight: bold;} .validation-summary-errors {font-weight:bold; color:red; font-
size:11pt;} </style> </head> <body> <h1>Update Product</h1>
@Html.ValidationSummary("Errors with your submission:")
<form method="post" action="" > <fieldset> <legend>Update Product</legend> <div> <label>Name:</label> <input name="Name" type="text" size="50" value="@Name" /> </div> <div> <label>Description:</label> <input name="Description" type="text" size="50" value="@Description" /> </div> <div> <label>Price:</label> <input name="Price" type="text" size="50" value="@Price" /> </div> <div> <label> </label> <input type="submit" value="Update" class="submit" /> </div> </fieldset> </form> </body> </html>
Le corps de la page contient un formulaire HTML dans lequel est affiché un produit que l’utilisateur
peut modifier. Pour récupérer le produit à afficher, le code utilise l’instruction SQL:
SELECT * FROM Products WHERE Id=@0
Cette commande récupère le produit dont l'Id correspond à la valeur du paramètre @0 (Etant donné
que la colonne Id est la clé primaire de la table, qu’elle est donc unique, un seul enregistrement
produit ne peut donc être récupéré de cette manière). Pour obtenir la valeur Id à transmettre à cette
instruction Select, il suffit de lire la valeur transmise dans l’URL de la page comme suit :
var ProductId = UrlData[0];
Pour récupérer l’enregistrement proprement dit, on utilise la méthode QuerySingle, qui renvoie un
seul enregistrement :
var row = db.QuerySingle(selectQueryString, ProductId);
La ligne résultante est attribuée à la variable row. Pour récupérer les données de chaque colonne de
la ligne et les attribuer à des variables locales, procédez comme ceci:
var Name = row.FirstName; var Description = row.LastName; var Price = row.Address;
Dans le balisage HTML, les valeurs sont automatiquement affichées dans les zones de texte
correspondantes en utilisant du code encapsulé :
<input name="Name" type="text" size="50" value="@Name" />
Cette partie du code affiche l'enregistrement produit à mettre à jour. Une fois l'enregistrement
affiché, l'utilisateur peut modifier chacune des colonnes.
Lorsque l'utilisateur soumet le formulaire en cliquant sur le bouton Update, le code dans le bloc de
condition if(IsPost) s'exécute. Les valeurs saisies par l’utilisateur sont lues dans l'objet Request, puis
stockées dans des variables. Un contrôle est effectué pour vérifier que les colonnes ne sont pas vides.
Si la validation est un succès, le code créé l’instruction SQL suivante :
UPDATE Products SET Name=@0, Description=@1, Price=@2, WHERE ID=@3
Dans une instruction SQL Update, vous devez spécifier chaque colonne à mettre à jour et la valeur
associée. Dans l’exemple, les valeurs sont spécifiées en utilisant des paramètres @0, @1, @2, etc...
(Comme nous l’avons déjà mentionné, pour une sécurité optimale, il est conseillé de toujours passer
des valeurs à une instruction SQL en utilisant des paramètres.)
C’est lorsqu’est invoquée la méthode db.Execute que l’on passe les variables qui contiennent les
valeurs des colonnes à mettre en jour, en respectant l’ordre des paramètres définis dans l’instruction
SQL.
db.Execute(updateQueryString, Name, Description, Price, ProductId);
Une fois la mise à jour effectuée, l'utilisateur est redirigé vers la page d'édition:
Response.Redirect(@Href("~/EditProducts"));
L'utilisateur voit alors une liste réactualisée des données de la base de données et peut, s’il le
souhaite, modifier un autre produit.
6. Enregistrez la page.
7. Exécutez la page EditProducts.cshtml (et non la page de mise à jour), puis cliquez sur Edit
dans la ligne du produit que vous souhaitez modifier. La page UpdateProducts.cshtml
s'affiche avec les données du produit que vous avez sélectionné.
8. Faites quelques modifications puis cliquez sur Update. La liste des produits s'affiche à
nouveau avec les données à jour.
Supprimer des données dans une base de données
Cette section montre comment permettre aux utilisateurs de supprimer un produit de la table
Products. L'exemple consiste en deux pages : dans la première, l’utilisateur sélectionne
l’enregistrement qu’il veut supprimer ; l’enregistrement à supprimer est alors affiché dans une
deuxième page qui permet à l’utilisateur de confirmer sa demande de suppression.
Important : Dans un site de production, on limite généralement les personnes autorisées à réaliser
des modifications sur les données. Pour en savoir plus sur la façon de mettre en place un site avec un
accès sécurisé et sur les moyens d'autoriser l'utilisateur à exécuter des tâches sur le site, voir le
chapitre 13 - Améliorer la sécurité et l'appartenance.
1. Dans le site, créez un nouveau fichier CSHTML nommé ListProductsForDelete.cshtml.
2. Remplacez son contenu par le suivant:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products ORDER BY Name"; }
<!DOCTYPE html > <html> <head> <title>Delete a Product</title> <style> table, th, td { border: solid 1px #bbbbbb; border-collapse:collapse; padding:2px;
} </style> </head> <body> <h1>Delete a Product</h1> <form method="post" action="" name="form"> <table border="1"> <thead> <tr> <th> </th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach (var row in db.Query(selectQueryString)) { <tr> <td><a href="@Href("~/DeleteProduct", row.Id)">Delete</a></td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table> </form> </body> </html>
Cette page est semblable à la page EditProducts.cshtml créée plus tôt. En revanche, au lieu d'afficher
un lien Edit pour éditer chaque produit, elle affiche un lien Delete (supprimer). Le lien est créé de la
manière suivante :
<a href="@Href("~/DeleteProduct", row.Id)">Delete</a>
Lorsque les utilisateurs cliquent sur le lien, on obtient donc une URL du type :
http://<server>/DeleteProduct/4
L'URL appelle une page nommée DeleteProduct.cshtml (que vous allez créer dans la suite de
l’exercice) et lui transmet l'Id du produit à supprimer (ici, 4).
3. Enregistrez le fichier, mais laissez-le ouvert.
4. Créez un autre fichier CHTML nommé DeleteProduct.cshtml et remplacez son contenu par le
suivant:
@{ var db = Database.Open("SmallBakery"); var ProductId = UrlData[0]; if (ProductId.IsEmpty()) { Response.Redirect(@Href("~/ListProductsForDelete")); } var prod = db.QuerySingle("SELECT * FROM PRODUCTS WHERE ID = @0",
ProductId); if( IsPost && !ProductId.IsEmpty()) {
var deleteQueryString = "DELETE FROM Products WHERE Id=@0"; db.Execute(deleteQueryString, ProductId); Response.Redirect("~/ListProductsForDelete"); } } <!DOCTYPE html > <html <head> <title>Delete Product</title> </head> <body> <h1>Delete Product - Confirmation</h1> <form method="post" action="" name="form"> <p>Are you sure you want to delete the following product?</p>
<p>Name: @prod.Name <br /> Description: @prod.Description <br /> Price: @prod.Price</p> <p><input type="submit" value="Delete" /></p> </form> </body> </html>
Cette page est appelée par ListProductsForDelete.cshtml et permet aux utilisateurs de confirmer
qu'ils veulent supprimer le produit concerné. L'Id du produit à supprimer est récupéré directement à
partir de l'URL en utilisant le code suivant:
var ProductId = UrlData[0];
La page invite alors l'utilisateur à cliquer sur un bouton pour supprimer réellement l’enregistrement.
Il s'agit d'une mesure de sécurité importante : lorsque vous effectuez des opérations sensibles dans
votre site Web telles que mettre à jour ou supprimer des données, ces opérations doivent toujours
être réalisées au moyen d’une opération POST, et non d’une opération GET. Si votre site est
configuré de telle sorte qu'une opération de suppression peut être effectuée en utilisant une
opération GET, n'importe qui peut passer une URL du type http://<serveur>/DeleteProduct/4 et
supprimer tout ce qu’il veut dans votre base de données. C’est donc une mesure de sécurité
essentielle d’ajouter une étape de confirmation et de coder la page afin que la suppression ne puisse
être effectuée qu’au moyen d’un POST.
L’opération de suppression réelle est effectuée en utilisant le code suivant, qui vérifie d'abord qu’il
s’agit bien d’une opération POST et que l'Id n'est pas vide:
if( IsPost && !ProductId.IsEmpty()) { var deleteQueryString = "DELETE FROM Products WHERE Id=@0"; db.Execute(deleteQueryString, ProductId); Response.Redirect("~/ListProductsForDelete"); }
Le code exécute une instruction SQL qui supprime l'enregistrement spécifié, puis redirige l'utilisateur
vers la page qui liste les produits.
5. Exécutez ListProductsForDelete.cshtml dans un navigateur.
6. Cliquez le lien Delete sur la ligne de produit de votre choix. La page DeleteProduct.cshtml
s'affiche pour vous demander confirmation de la suppression.
7. Cliquez sur le bouton Delete. L’enregistrement est supprimé et la page est réactualisée avec
la liste des produits mise à jour.
Afficher des données en utilisant l'assistant WebGrid
Jusqu'à présent, lorsque vous avez affiché des données dans une page, vous avez dû faire tout le
travail par vous-même. Mais il existe un moyen plus simple qui consiste à utiliser l’assistant WebGrid.
Il sait en effet construire un tableau HTML qui affiche des données et prend en charge des options de
mise en forme, de pagination des données, et de tri (par un simple clic de l’utilisateur sur l’en-tête de
la colonne de tri).
1. Dans le site, créez un nouveau fichier CSHTML nommé ListProducts_WebGrid.cshtml.
2. Remplacez son contenu par le suivant:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Products ORDER BY Id"; var data = db.Query(selectQueryString); var grid = new WebGrid(data, defaultSort: "Name", rowsPerPage: 5); } <!DOCTYPE html> <html> <head> <title>Displaying Data Using WebGrid </title> <style type="text/css"> .grid { margin: 4px; border-collapse: collapse; width: 600px; } .head { background-color: #E8E8E8; font-weight: bold; color:
#FFF; } .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; } .alt { background-color: #E8E8E8; color: #000; } .product { width: 200px; } </style> </head> <body>
<h1>Small Bakery Products</h1>
@grid.GetHtml( tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>),
grid.Column("Price", format:@<text>$@item.Price</text>) ) ) </html>
Le code commence par ouvrir le fichier de base de données SmallBakery.sdf, comme d'habitude, et
par créer une instruction SQL SELECT:
SELECT * FROM Products ORDER BY Id
L’assistant WebGrid s’utilise comme suit :
var data = db.Query(selectQueryString); var grid = new WebGrid(data, defaultSort: "Name", rowsPerPage: 5);
Un nouvel objet WebGrid est créé puis est affecté à la variable grid. Dans le cadre de la création de
l'objet WebGrid, vous devez d'abord exécuter l'instruction SQL (via db.Query), puis transmettre les
résultats à l'objet WebGrid. Lorsque vous créez l'objet WebGrid, vous pouvez également spécifier des
options, par exemple la colonne de tri des données par défaut (ici, la colonne Name) et le nombre
d’enregistrements à afficher sur chaque "page" de la grille.
Le rendu des données en utilisant l’assistant WebGrid, se fait par l’instruction de code suivante dans
le corps de la page:
@grid.GetHtml()
(Remplacez grid par la variable que vous avez utilisée lorsque vous avez créé l'objet WebGrid.)
Ce code affiche les résultats de la requête dans une grille. Si vous le souhaitez, vous pouvez spécifier
spécifiquement les colonnes à afficher:
@grid.GetHtml( columns: grid.Columns( grid.Column("Name"), grid.Column("Description"), grid.Column("Price" ) ) )
De nombreuses options peuvent être spécifiées sur l’assistant WebGrid. Dans l'exemple ci-dessus,
sont configurés le format (les styles CSS) de la grille dans son ensemble, ainsi que la mise en forme ou
le style de chacune des colonnes, ainsi que le texte d’en-tête de celles-ci:
@grid.GetHtml( tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>),
grid.Column("Price", format:@<text>$@item.Price</text>) )
3. Visualisez la page dans un navigateur. Cliquez sur un titre de colonne pour trier les données
sur la base de cette colonne. Cliquez sur un numéro au bas de la grille pour naviguer dans les
pages de données.
Se connecter à une base de données
Vous pouvez vous connecter à une base de données de deux manières. La première consiste à utiliser
la méthode Database.Open en précisant le nom du fichier de base de données (sans l'extension .sdf):
var db = Database.Open("SmallBakery");
La méthode Open suppose que le fichier .sdf est dans le dossier App_Data du site Web. Ce dossier a
un certain nombre de caractéristiques conçues spécifiquement pour contenir des données. Par
exemple, il dispose des autorisations appropriées pour permettre au site Web de lire et d’écrire des
données, et par mesure de sécurité WebMatrix ne permet pas l'accès aux fichiers de ce dossier.
La deuxième méthode consiste à utiliser une chaîne de connexion. Celle-ci contient des informations
indiquant comment se connecter à une base de données. Il peut s'agir d'un chemin de fichier, ou elle
peut inclure le nom d'une base de données SQL Server située sur un serveur local ou distant, avec un
nom d'utilisateur et un mot de passe pour se connecter à ce serveur. (Si vous conserver les données
dans une version centralisée de SQL Server, tels que chez un fournisseur d'hébergement, utiliser
toujours une chaîne de connexion pour spécifier les informations de connexion à la base de
données.)
Dans WebMatrix, les chaînes de connexion sont généralement stockées dans un fichier XML nommé
Web.config, situé à la racine de votre site web. Comme son nom l'indique, un fichier Web.config est
utile pour stocker des informations de configuration pour votre site web, y compris les chaînes de
connexion dont votre site pourrait avoir besoin. Un exemple de chaîne de connexion dans un fichier
Web.config pourrait ressembler à ce qui suit:
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<connectionStrings>
<add
name="SQLServerConnectionString"
connectionString=
"server=myServer;database=myDatabase;uid=username;pwd=password"
providerName="System.Data.SqlClient" />
</connectionStrings>
</configuration>
Dans l'exemple, la chaîne de connexion pointe sur une base de données dans une instance de SQL
Server qui s'exécute sur un serveur quelque part (par opposition à un fichier .sdf local). Il vous suffit
de remplacer myServer et myDatabase par les noms appropriés, et de spécifier les valeurs de
connexion à SQL Server à la place de username et password. (Les valeurs username et password ne
sont pas nécessairement les mêmes que vos informations d'identification Windows ou que les
valeurs que votre hébergeur vous a données pour se connecter à ses serveurs. Vérifiez avec
l'administrateur les valeurs correctes à utiliser.)
La méthode Database.Open est flexible, car elle vous permet de transmettre le nom d'un fichier de
base de données .sdf ou le nom d'une chaîne de connexion stockée dans le fichier Web.config.
L'exemple suivant montre comment se connecter à la base de données en utilisant la chaîne de
connexion illustrée dans l'exemple précédent:
@{
var db = Database.Open("SQLServerConnectionString");
}
La méthode Database.Open repère d’elle-même le procédé de connexion que vous avez choisi
d’adopter. C’est très utile tout particulièrement au moment du déploiement (publication) de votre
site web. Ainsi, vous pouvez utiliser un fichier .sdf dans le dossier App_Data lorsque vous développez
et testez votre site. Ensuite, lorsque vous déplacez votre site vers un serveur de production, vous
pouvez utiliser une chaîne de connexion dans le fichier Web.config qui a le même nom que votre
fichier sdf mais qui pointe vers la base de données chez l’hébergeur (le tout sans avoir à changer
votre code).
Enfin, si vous souhaitez travailler directement avec une chaîne de connexion, vous pouvez appeler la
méthode Database.OpenConnectionString et lui passer la chaîne de connexion réelle au lieu du nom
de celle-ci dans le fichier Web.config. Cela peut s’avérer très utile chaque fois que, pour une raison
quelconque, vous n'avez pas accès à la chaîne de connexion (ou aux valeurs qu'elle contient, tel que
le nom du fichier .sdf) jusqu’à ce que la page s’exécute. Toutefois, pour la plupart des scénarios, vous
pouvez utiliser Database.Open tel que décrit dans ce chapitre.
Ressources supplémentaires
SQL Server Compact
top related