tp1 web applications - emse.frlalevee/ismin/eb/tp/tp3.net_webapps.pdf · workshop e-business ismin...

15
Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015 TP3 1 : WEB APPLICATIONS AVEC ASP.NET EXERCICE 1 : PREMIÈRE APPLICATION WEB DÉCOUVERTE DE MICROSOFT STUDIO WEB DEVELOPPER Lancez Microsoft Studio Web Developer et activez le menu Fichier / Nouveau Site Web. Choisissez « Site Web ASP.NET » puis tapez « http://localhost/WS_<votre nom>/ASP1 » comme emplacement et validez pour créer cette première application Web. LA PREMIÈRE WEBFORM Par défaut, la première WebForm créée, porte le nom Default. Dans la boite à outils de Visual Studio (onglet HTML), notez que l’on peut effectuer du glisser/déplacer de contrôles sur ce formulaire en mode design. Par défaut, le formulaire est en mode « FlowLayout », c'est-à-dire que chaque ajout de contrôle se fait à la suite des éléments précédents (comme un texte sous Word), éléments qui peuvent vos saisies de texte. Vous pouvez changer le style en cliquant à droite dans le fond de page en mode design et en choisissant Style… puis Position. Cliquez sur l’onglet HTML du formulaire. Nous basculons maintenant dans la vue HTML de ce même formulaire. On peut dans ce mode directement taper du code HTML, voire du script client. En cliquant à droite dans la fenêtre et en sélectionnant « basculer vers le code » ou bien en appuyant sur la touche F7, nous basculons désormais dans le code Visual C# .NET associé à cette page Web. C’est ici que nous allons ajouter la logique applicative de notre formulaire Web. LE PREMIER ÉVÉNEMENT WEB Ajoutez les contrôles de l’onglet Default suivants sur le formulaire : une zone de texte TextBox1, un bouton Button1 et un label Label1 selon la disposition : 1 Note. Les 4 premiers exercices de ce TP proviennent de différentes sources Microsoft. Les copies écran peuvent ne pas être exactes (par exemple, certaines d’entre elles font référence au langage VB). Le dernier exercice sur les bases de données est une adaptation d’un tutorial utilisant SQL Server ; il se peut là aussi que des différences soient à constater. Signalez toute erreur que pour pourriez détecter.

Upload: habao

Post on 24-Feb-2019

218 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

TP31 : WEB APPLICATIONS AVEC ASP.NET

EXERCICE 1 : PREMIÈRE APPLICATION WEB

DÉCOUVERTE DE MICROSOFT STUDIO WEB DEVELOPPER

Lancez Microsoft Studio Web Developer et activez le menu Fichier / Nouveau Site Web. Choisissez « Site Web ASP.NET » puis tapez « http://localhost/WS_<votre nom>/ASP1 » comme emplacement et validez pour créer cette première application Web.

LA PREMIÈRE WEBFORM

Par défaut, la première WebForm créée, porte le nom Default. Dans la boite à outils de Visual Studio (onglet HTML), notez que l’on peut effectuer du glisser/déplacer de contrôles sur ce formulaire en mode design.

Par défaut, le formulaire est en mode « FlowLayout », c'est-à-dire que chaque ajout de contrôle se fait à la suite des éléments précédents (comme un texte sous Word), éléments qui peuvent vos saisies de texte. Vous pouvez changer le style en cliquant à droite dans le fond de page en mode design et en choisissant Style… puis Position.

Cliquez sur l’onglet HTML du formulaire. Nous basculons maintenant dans la vue HTML de ce même formulaire. On peut dans ce mode directement taper du code HTML, voire du script client. En cliquant à droite dans la fenêtre et en sélectionnant « basculer vers le code » ou bien en appuyant sur la touche F7, nous basculons désormais dans le code Visual C# .NET associé à cette page Web. C’est ici que nous allons ajouter la logique applicative de notre formulaire Web.

LE PREMIER ÉVÉNEMENT WEB

Ajoutez les contrôles de l’onglet Default suivants sur le formulaire : une zone de texte TextBox1, un bouton Button1 et un label Label1 selon la disposition :

1 Note. Les 4 premiers exercices de ce TP proviennent de différentes sources Microsoft. Les copies écran peuvent ne pas être exactes (par exemple, certaines d’entre elles font référence au langage VB). Le dernier exercice sur les bases de données est une adaptation d’un tutorial utilisant SQL Server ; il se peut là aussi que des différences soient à constater. Signalez toute erreur que pour pourriez détecter.

Page 2: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 2 © Philippe Lalevée, 2015

Nous allons essayer de faire en sorte que lorsque l’utilisateur clique sur le bouton, le label soit mis à jour avec le contenu de la zone de texte. Notez que vous pouvez modifier les propriétés de chaque objet par l’interface de Design en sélectionnant chacun des contrôles et en modifiant les propriétés souhaitées dans la fenêtre de propriétés.

Double-cliquez sur le bouton. Nous nous retrouverons maintenant dans l’événement Click de ce bouton. Insérez le code suivant :

Compilez le projet Web par le menu « Générer / Générer le site Web » puis exécutez le formulaire en cliquant

sur (ou par F5 ou encore par le menu Déboguer / Démarrer… et testez le fonctionnement du formulaire.

Regardez la source HTML de la page obtenue pour constater qu’il n’a pas de référence aux lignes de code tapées précédemment (bouton droit dans l’Internet Explorer puis « View Source »). Notez la différence entre le HTML de votre projet et celui généré au moment de l’exécution. La source HTML du projet (flux intermédiaire avant un rendu HTML « pure »).

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text = TextBox1.Text;

}

Page 3: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 3 © Philippe Lalevée, 2015

Le HTML généré :

Pour aller plus loin, testez d’autres contrôles avancés et jouez avec leurs propriétés et leurs événements (calendar…).

EXERCICE 2 : VARIABLES DE SESSIONS

SESSION INPROC

Créez un nouveau formulaire Web (cliquer à droite dans le nom de projet et choisissez Ajouter un nouvel élément… et sélectionnez Web Form qui s’appellera default2.aspx) puis dans cette page, ajoutez deux zones de texte (TextBox1 et TextBox2) et deux boutons (Button1 et Button2) :

Double-cliquez sur Ecrire et ajoutez le code suivant puis double-cliquez sur Lire et ajoutez le code suivant:

Passez la page Default2.aspx en « Définir comme page de démarrage » puis compilez le projet et testez :

SESSION STATESERVER

Dans Visual Studio, éditez le fichier Web.config et modifiez-le comme suit

<form id="form1" runat="server">

<div><asp:Button ID="Button1" runat="server" OnClick="Button1_Click"

Text="Button" /><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div></form>

<div><input type="submit" name="Button1" value="Button" id="Button1" />

<input name="TextBox1" type="text" value="Cela Marche !" id="TextBox1" />

<br /><span id="Label1">Cela Marche !</span></div><input type="submit"

name="Button1" value="Button" id="Button1" /> <input name="TextBox1"

type="text" value="Lab1" id="TextBox1" /><br><span id="Label1">Lab1</span>

protected void Button1_Click(object sender, EventArgs e)

{

Session["TestVariable"] = TextBox1.Text;

}

protected void Button2_Click(object sender, EventArgs e)

{

TextBox2.Text = Session["TestVariable"].ToString();

}

Page 4: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 4 © Philippe Lalevée, 2015

Testez

Faire démarrer / Panneau de Configuration, choisissez Outils d’Administration / Services, démarrez le service d’état ASP.NET.

Retentez, cela devrait fonctionner…

EXERCICE 3 : CONTRÔLES AVANCÉS

LES CONTRÔLES VALIDATORS

De la Boite à outils / Validation, ajoutez un RequiredFieldValidator (RequiredFieldValidator1) puis modifiez les deux propriétés suivantes de RequiredFieldValidator1 :

ControlToValidate -> TextBox1

ErrorMessage -> Champ à saisir

Compilez et essayez de valider le formulaire sans avoir saisi de valeur dans la première zone de texte

<sessionState

mode="StateServer"

stateConnectionString="tcpip=127.0.0.1:42424"

sqlConnectionString="data source=127.0.0.1;Trusted_Connection=yes"

cookieless="false"

timeout="20"

/>

Page 5: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 5 © Philippe Lalevée, 2015

Notez que le contrôle s’est effectué au niveau du client et qu’aucun post-back vers le serveur n’a eu lieu.

Modifiez la propriété suivante :

EnableClientScript -> False

Compilez et essayez de valider le formulaire sans avoir saisi de valeur dans la première zone de texte : le comportement est exactement identique, excepté que le contrôle cette fois-ci ne s’effectue que côté serveur et non côté client.

Ajoutez un RangeValidator (RangeValidator1) et modifiez les propriétés suivantes :

ControlToValidate -> TextBox1

ErrorMessage -> Doit être un entier compris entre 0 et 100

MinimumValue -> 0

MaximumValue -> 100

Type -> Integer

Compilez et essayez de valider le formulaire en saisissant la valeur 321

Pour aller plus loin :

Utilisez le ValidationSummary qui permet de regrouper tout le texte des erreurs d’un formulaire à un seul endroit et de mettre juste une * devant les champs qui posent problème. La propriété Text devra etre placée à ‘*’ et le texte ErrorMessage sera placé dans le résumé. Pour n’avoir que le résumé, placez la propriété Display à None.

Si vous connaissez les expressions régulières, faites des tests avec RegularExpressionValidator, par exemple en utilisant des expressions déjà présentes pour valider une URL.

LA DROPDOWNLIST ET LE CALENDAR

Ajoutez un label (Label1), une DropDownList (DropDownList1) et un Calendar (Calendar1) et modifiez leurs propriétés comme suit :

Page 6: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 6 © Philippe Lalevée, 2015

Dans le code du formulaire, ajoutez le code suivant :

Modifiez la propriété AutoPostBack de la DropDownList1 en la positionnant à True, puis double cliquez sur la DropDownList et ajoutez le code suivant :

Compilez et testez le fonctionnement :

protected void Page_Load(object sender, EventArgs e) {

if (! Page.IsPostBack ) {

DropDownList1.Items.Add("");

DropDownList1.Items.Add("Olivier");

DropDownList1.Items.Add("Pascal");

DropDownList1.Items.Add("Thomas");

DropDownList1.Items.Add("Paul");

Calendar1.Visible = false;

}

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e){

Calendar1.Visible = true;

switch (DropDownList1.SelectedIndex) {

case 1 : Calendar1.SelectedDate = New DateTime(1973, 4, 14); break;

case 2 : Calendar1.SelectedDate = New DateTime(1984, 7, 4); break;

case 3 : Calendar1.SelectedDate = New DateTime(1944, 10, 25); break;

case 4 : Calendar1.SelectedDate = New DateTime(1999, 12, 1); break;

default: Calendar1.Visible = false; break;

}

Calendar1.VisibleDate = Calendar1.SelectedDate;

}

Page 7: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 7 © Philippe Lalevée, 2015

Pour aller plus loin :

Supprimez la condition if (! Page.IsPostBack) dans Page_Load et comprendre ce qui se passe

Supprimez un élément de la liste quand on clique sur un bouton : quel est le problème ?

Trouvez une autre solution pour pouvoir ajouter ou supprimer des éléments de la DropDownList dynamiquement (utilisez des listitem à l’insertion dans la listbox et non des chaînes de caractères).

EXERCICE 4 : VIEWSTATE ET DÉBOGUAGE

Pour comprendre le viewstate :

Ajoutez à votre formulaire (suite au premier exercice) un autre TextBox et un autre Button.

Double-cliquez sur le deuxième bouton et écrivez le code suivant :

protected void Button2_Click(object sender, EventArgs e){

TextBox2.Text = "Lab2";

}

Page 8: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 8 © Philippe Lalevée, 2015

Lancez l’application en cliquant sur

Saisir Lab1 dans la premier TextBox, cliquez sur le premier bouton puis cliquez sur le deuxième bouton

Que se passe t-il ? Le champ du premier TextBox a la valeur « Lab1 » après avoir cliqué sur le deuxième bouton. Entrons en mode debug pour vérifier si le système ne passe pas deux fois dans notre première fonction.

Positionnez 2 points d’arrêt dans le code, un sur chaque fonction.

Lancez l’application en mode debug

Saisir Lab1 dans la première TextBox et cliquez sur le premier bouton

Cliquez sur le premier bouton pour continuer l’exécution

Cliquez sur le deuxième bouton du formulaire

Au deuxième clic, on voit qu’il ne repasse pas par le premier code mais que TextBox1.Text et Label1.Text sont déjà égaux à « Lab1 ». Pourtant à chaque appel d’une nouvelle page, une nouvelle instance de la page Web est chargée. Cette instance repart normalement de l’état initial. Sauf qu’en fait, un champ caché du formulaire HTML est posté à chaque envoi du formulaire qui contient la sérialisation de l’état de l’objet. C’est ainsi que la nouvelle instance chargée n’est pas chargée avec l’état initial mais avec le dernier état.

Cliquer sur le bouton droit dans Internet Explorer et choisir View Source. C’est ce champ hidden qui représente la sérialisation de l’objet Page, utilisé pour recréer l’instance de Page.

<input type="hidden" name="__VIEWSTATE"

value="dDw3Mjc3NTkzOTQ7dDw7bDxpPDE+Oz47bDx0PDtsPGk8OT47Pj

Cliquer ici

Page 9: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 9 © Philippe Lalevée, 2015

Pour aller plus loin :

Changez la propriété EnableViewState des différents contrôles et comprendre le nouveau comportement.

Changez la propriété EnableViewState de l’objet DOCUMENT et analyser le comportement.

EXERCICE 5 : AUTHENTIFICATION

LES PARAMÈTRES DE SÉCURITÉ DANS WEB.CONFIG

Créer une nouvelle application Web ASP.NET en C# : « authformulaire »

Dans l'Explorateur de projets, ouvrer le fichier Web.config

Dans la balise « <authentication> », modifier le mode d'authentification en Forms

Insérer la balise « <forms> » et indiquez les attributs appropriés :

<authentication mode="Forms">

<forms name=".ASPXAuth" loginUrl="logon.aspx"

protection="All" path="/" timeout="30" />

</authentication>

Refuser l'accès à un utilisateur anonyme dans la section « <authorization> » de la manière suivante :

<authorization>

<deny users ="?" />

<allow users = "*" />

</authorization>

PAGE DE LOGON ET VALIDATION UTILISATEUR

Ajouter un nouveau formulaire Web au projet nommé « Logon.aspx »

Ajouter deux labels, un TextBox nomé « txtUserName », un second TextBox « txtUserPass » et un bouton « cmdLogin » :

Attribuer à la propriété « TextMode » du TextBox « txtUserPass » la valeur « Password »

Double-cliquer sur le bouton pour faire apparaître le code behind

Importer les espaces de noms nécessaires en début de fichier :

using System.Web.Security;

Créer une fonction ValidateUser pour valider les informations d'identification des utilisateurs :

boolean ValidateUser(String uid, String passwd) {

boolean ok = false;

// insérer du code utile !

Page 10: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 10 © Philippe Lalevée, 2015

return ok;

}

Appeler cette fonction dans « cmdLogin_Click » et rediriger l’utilisateur vers la page initialement appelée :

protected void cmdLogin_Click(System.Object sender, System.EventArgs e) {

if (ValidateUser(txtUserName.Text, txtUserPass.Text)

FormsAuthentication.RedirectFromLoginPage(txtUserName.Text, False);

else Response.Redirect("logon.aspx", True);

}

Renommer la page « WebForm1.aspx » existante en « Default.aspx », puis l’ouvrir dans l'éditeur

Ajouter un bouton « cmdSignOut » avec le texte « Se déconnecter » puis double-cliquer sur le bouton pour voir apparaître le code behind. Importez les espaces de noms nécessaires : System.Web.Security.

Utiliser le code suivant pour déconnecter l’utilisateur de l’application :

protected void cmdSignOut_Click(System.Object sender, System.EventArgs e) {

FormsAuthentication.SignOut();

Response.Redirect("logon.aspx", True);

}

Enregistrer et compiler le projet. Naviguer sur la page « Default.aspx » et constater que vous êtes automatiquement redirigés vers la page de Logon.

Entrer le logon et le mot de passe d’un utilisateur valide et constater la redirection automatique vers la page demandée à l’origine.

EXERCICE 6 : LE FICHIER GLOBAL.ASAX

Le fichier global.asax dans votre explorateur de fichiers contient des fonctions vides, appelées automatiquement par ASP.NET lors d’événements liés à votre application.

GESTION DES APPLICATIONS

Pour gérer le démarrage et l’arrêt de l’application (événement lié au serveur IIS), nous disposons des fonctions Application_Start et Application_End

Ajouter le code suivant dans le fichier global.asax (cela suppose que vous disposez des droits d’écriture sur le fichier et le répertoire correspondant).

void Application_Start(Object sender, EventArgs e) {

System.IO.TextWriter f = System.IO.File.AppendText(“c:\\fichier.txt”);

f.WriteLine(“L’application a démarré”);

f.close();

}

void Application_End(Object sender, EventArgs e) {

System.IO.TextWriter f = System.IO.File.AppendText(“c:\\fichier.txt”);

f.WriteLine(“L’application est arretee”);

f.close();

}

À l’aide du panneau de configuration, arrêter le serveur IIS et vérifier le contenu du fichier c:\fichier.txt

GESTION DES SESSIONS

Pour gérer le début et la fin d’une session utilisateur, nous disposons des fonctions Session_Start et Session_End

Ajouter le code suivant dans le fichier global.asax

void Session_Start(Object sender, EventArgs e) {

System.IO.TextWriter f = System.IO.File.AppendText(“c:\\fichier.txt”);

f.WriteLine(String.Format(“Session {0} debut a {1}”, Session.SessionID,

DateTime.Now);

f.close();

}

void Session_End(Object sender, EventArgs e) {

System.IO.TextWriter f = System.IO.File.AppendText(“c:\\fichier.txt”);

f.WriteLine(String.Format(“Session {0} fin a {1}”, Session.SessionID,

DateTime.Now);

Page 11: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 11 © Philippe Lalevée, 2015

f.close();

}

Naviguer sur une page de votre application et vérifier le contenu du fichier c:\fichier.txt

Que faut-il faire pour disposer d’une nouvelle session ?

GESTION DES REQUÊTES

Pour gérer le début et la fin d’une requête utilisateur, nous disposons des fonctions Application_BeginRequest et Application_EndRequest.

Ajouter le code suivant dans le fichier global.asax

void Application_BeginRequest (Object sender, EventArgs e) {

Response.Write(“<h1>Header ajoute</H1><BR/><BR/>”);

}

void Application_EndRequest (Object sender, EventArgs e) {

Response.Write(“<BR/><BR/><h1>Footer ajoute</H1>”);

}

Naviguer sur une page de votre application

EXERCICE 7 : ACCÈS À UNE BASE DE DONNÉES ACCESS EN ASP.NET

PRÉSENTATION

Le moteur de base de données Jet est utilisé pour accéder à des bases de données de type Access (à réserver pour des applications Web à faible volume et à faible trafic). Comme il respecte le standard OLE DB, il faudra utiliser les classes du namespace System.Data.OleDb du framework.net, en particulier les classes OleDbConnection, OleDbCommand, OleDbDataReader et DataGrid.

La classe OleDbConnection gère la connexion au moteur de base de données Jet. La classe OleDbCommand contient les déclarations SQL qui indiquent au moteur de base de données quoi faire. La classe OleDbDataReader permet l’accès séquentiel en lecture seule aux informations extraites de la base de données à l’aide de requêtes SQL. La classe DataGrid est un contrôle Web permettant d’afficher les données dans une page ASP.

CRÉATION DE LA BASE DE DONNÉES ACCESS

Ouvrez Microsoft Access et créez une base de données vide appelée Etudiants.mdb dans le nouveau dossier C:\Etudiants. Créez une nouvelle table en mode Création.

Ajoutez un champ NuméroAuto appelé ID et trois champs texte appelés Nom, Prénom et Adresse. Faire de ID la clef primaire (clic à droite sur le champ) et acceptez tout par défaut. Fermez la fenêtre et donnez le nom Promotion à la table.

Ajoutez quelques entrées à la table (double clic). Sauvegardez la table et fermez Access.

Page 12: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 12 © Philippe Lalevée, 2015

POUR AFFICHER LES ENREGISTREMENTS DE BASE DE DONNÉES

L'objet de type OleDbConnection doit contenir la chaîne de connexion à la base de données Etudiants.mdb. En construisant cette chaîne, la localisation de Etudiants.mdb est donnée relativement à la racine de l'application ; ce chemin relatif peut être changé en chemin physique grâce à la méthode Server.MapPath().

L'objet de type OleDbCommand contiendra la requête SQL « SELECT * FROM Promotion », qui sélectionne tous les enregistrements de la table Promotion. La méthode OleDbCommand.ExecuteReader() crée un objet OleDbDataReader pour lire ces enregistrements. Le contrôle de type DataGrid est relié à l’objet de type DataReader par sa propriété DataGrid.DataSource. Quand la méthode DataGrid.DataBind() s'exécute, des enregistrements de la base de données sont déplacés de la base de données dans le contrôle DataGrid, qui les affichera un sur chaque ligne.

Dans Visual Studio .NET, créez une nouvelle application Web en C # à l’adresse http://localhost/Etudiants puis renommez le fichier WebForm1.aspx en EtudForm.aspx.

À partir de l'explorateur de solutions, à la racine faites un clic droit sur le projet Etudiants et choisissez « Ajouter un nouveau dossier ». Nommez le dossier Etudiants. Laissez le dossier sélectionné. Faites un clic droit sur le projet Etudiants et ajoutez un élément existant C:\Etudiants\Etudiants.mdb au dossier Etudiants.

Depuis la boîte à outils, déplacez un DataGrid sur le formulaire Web, renommez-le en datagrid.

Passez en affichage de code et ajoutez cette ligne using aux déclarations au début de EtudForm1.aspx.cs : using System.Data.OleDb;

Insérez ce code dans la méthode Page_Load() : private void Page_Load(object sender, System.EventArgs e) {

if (!IsPostBack) ReadRecords();

}

Ajoutez la méthode ReadRecords() à la classe EtudForm juste après la méthode Page_Load() :

private void ReadRecords() {

OleDbConnection conn = null;

OleDbDataReader reader = null;

try {

conn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; " +

"Data Source=" + Server.MapPath("Etudiants/Etudiants.mdb"));

conn.Open();

OleDbCommand cmd = new OleDbCommand("Select * FROM Promotion", conn);

reader = cmd.ExecuteReader();

datagrid.DataSource = reader;

datagrid.DataBind();

}

catch (Exception e) { } finally {

if (reader != null) reader.Close();

if (conn != null) conn.Close();

}

}

Appuyez sur F5 pour lancer l'application Web sous le débogueur. Le contenu de la base de données devrait apparaître dans le navigateur.

POUR CONFIGURER LA BASE DE DONNÉES

L'utilisateur sous lequel les pages ASP.NET sont exécutées sur le serveur Web, par défaut, n'a pas la permission d'écrire un enregistrement sur une base de données ou de créer un fichier de verrou (ldb) dans le dossier contenant la base de données. Vous devez donner à l'utilisateur ASP.NET ces permissions. Ceci peut être fait de trois manières différentes :

Vous pouvez ajouter l'utilisateur d'ASP.NET au groupe d'administrateurs (à éviter pour des raisons de sécurité).

Vous pouvez permettre la personnalisation de l'application dans le fichier Web.config.

Vous pouvez donner à ASP.NET la permission d'écriture au fichier de base de données et au dossier qui le contient (Windows 2000/2003).

Page 13: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 13 © Philippe Lalevée, 2015

CHANGEMENT DES COLONNES DU DATAGRID

Vous pouvez employer le générateur de propriétés de Visual Studio pour ajouter des colonnes à un DataGrid. Le constructeur de propriétés a un choix des formats qui peuvent ajouter la couleur et le style au DataGrid.

À partir de la fenêtre de design de Visual Studio, sélectionnez le DataGrid. Si vous n'avez pas la fenêtre de propriétés ouverte, ouvrez-la depuis le menu Affichage.

Dans la fenêtre de propriétés, vous verrez deux liens : « Mise en forme automatique » et « Générateur de propriétés ». Choisissez le « Générateur de Propriétés ».

Choisissez l'affichage des colonnes. Décochez « créer des colonnes automatiquement au moment de l'exécution. »

Dans « colonnes disponibles », développez la « colonne de boutons ». Choisissez « Modifier, Mettre à jour, Annuler ». Cliquez sur « > » pour l'ajouter à la liste des colonnes sélectionnées.

Dans « colonnes disponibles », sélectionnez « colonne connexe ». Cliquez sur « > » pour l'ajouter à la liste des colonnes sélectionnées. Donnez-lui le texte « Nom étudiant » dans « Texte de l'en-tête » et dans « champs de données » le texte « Nom ».

Répétez cette étape pour les colonnes pour le prénom et l’adresse. Cliquez sur OK pour retourner à la fenêtre de design. Le DataGrid reflétera les changements.

Dans la fenêtre de propriétés, choisissez le Mise en forme automatique. Choisissez un format, tel que « Couleur 1 ». Cliquez sur OK pour retourner à la fenêtre de design. Le DataGrid reflétera les changements.

Appuyez sur F5 pour lancer l'application Web sous le débogueur. Le contenu de la base de données devrait apparaître dans le navigateur.

POUR ÉDITER LE CONTENU DU DATAGRID

La propriété DataGrid.EditItemIndex choisit une ligne pour l'édition. Quand une ligne est choisie pour l'édition, les boîtes de texte apparaissent dans chaque cellule. Le texte dans chaque boîte de texte est placé à la valeur du champ correspondant dans l'enregistrement.

Vous devez relier le lien de modification à un gestionnaire d'événement qui choisit la ligne contenant le lien pour modification. Vous devriez également relier le lien d'annulation (pas encore visible) à un gestionnaire d'événement qui reconstitue la ligne du DataGrid sans changer l'enregistrement correspondant.

À partir de la fenêtre de design de Visual Studio, sélectionnez le DataGrid, et cliquez l'onglet d'événements dans la fenêtre de propriétés (le bouton en forme d’éclair). Double-cliquez sur CancelCommand pour créer le gestionnaire d'événement correspondant. Retournez sur l'onglet d'évènements et faites de même pour EditCommand.

Insérez le code suivant dans les deux gestionnaires d'évènement:

private void datagrid_CancelCommand (object source,

System.Web.UI.WebControls.DataGridCommandEventArgs e) {

datagrid.EditItemIndex = -1;

ReadRecords();

}

private void datagrid_EditCommand(object source,

System.Web.UI.WebControls.DataGridCommandEventArgs e) {

datagrid.EditItemIndex = e.Item.ItemIndex;

ReadRecords();

}

Appuyez sur F5 pour exécuter l'application Web. Puis cliquez sur le lien de modification à la gauche de la deuxième ligne. Le DataGrid affiche la ligne avec les valeurs pour les champs Nom, Prenom et Adresse dans les boîtes de texte. Le lien de modification change en liens de mise à jour et d'annulation.

Appuyez sur F5 pour retourner à l'affichage par défaut du DataGrid.

Page 14: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 14 © Philippe Lalevée, 2015

POUR MODIFIER LE DATAGRID

Quand une ligne est choisie pour la modification, les liens de mise à jour et d'annulation apparaissent. Une fois que vous avez utilisé les boîtes de texte pour insérer des nouvelles valeurs pour les champs d'un enregistrement sur la base de données, vous devez transférer ces changements de nouveau dans la base de données.

Vous devez relier le lien de mise à jour à un gestionnaire d'événement qui lit chaque boîte de texte et met à jour les champs dans l'enregistrement correspondant. Le DataGrid.DataKeyField utilise le champ clef de la table de base de données pour associer chaque ligne à son enregistrement correspondant. Vous établissez une requête SQL pour mettre l'enregistrement à jour avec les nouvelles valeurs du champ, puis appelez OleDbCommand.ExecuteNonQuery pour exécuter la mise à jour.

À partir de la fenêtre de design de Visual Studio, sélectionnez le DataGrid. Dans la fenêtre des propriétés, placez la propriété de DataKeyField à ID.

Cliquez sur l'onglet d'événements dans la vue de propriétés (le bouton en forme d’éclair). Double-cliquez sur UpdateCommand pour créer le gestionnaire d'événement correspondant.

Insérez le code suivant dans le gestionnaire d'évènement:

private void datagrid_UpdateCommand(object source,

System.Web.UI.WebControls.DataGridCommandEventArgs e) {

int ID = (int) datagrid.DataKeys[(int) e.Item.ItemIndex];

string nom = ((TextBox)e.Item.Cells[1].Controls[0]).Text;

string prenom = ((TextBox)e.Item.Cells[2].Controls[0]).Text;

string adresse = ((TextBox)e.Item.Cells[3].Controls[0]).Text;

string sql =

"UPDATE Promotion SET Nom=\"" + nom +

"\", Prenom=\"" + prenom + "\", Adresse=\"" + adresse +"\"" +

" WHERE ID=" + ID;

ExecuteNonQuery(sql);

datagrid.EditItemIndex = -1;

ReadRecords();

}

Ajoutez la méthode ExecuteNonQuery à la classe EtudForm:

private void ExecuteNonQuery(string sql) {

OleDbConnection conn = null;

try {

conn = new OleDbConnection(

"Provider=Microsoft.Jet.OLEDB.4.0; " +

"Data Source=" + Server.MapPath("Etudiants/Etudiants.mdb"));

conn.Open();

OleDbCommand cmd = new OleDbCommand(sql, conn);

cmd.ExecuteNonQuery();

}

catch (Exception e) { } finally {

if (conn != null) conn.Close();

}

}

Appuyez sur F5 pour exécuter l'application Web.

AJOUTER UN ENREGISTREMENT DANS LE DATAGRID

Le DataGrid ne supporte pas l'ajout d'une colonne, mais vous pouvez ajouter un bouton dans la page ASP pour ajouter un enregistrement à la base de données. Créez une requête SQL pour ajouter l'enregistrement, puis appelez OleDbCommand.ExecuteNonQuery() pour mettre à jour la base de données.

Page 15: TP1 Web Applications - emse.frlalevee/ismin/eb/TP/TP3.Net_Webapps.pdf · Workshop e-Business ISMIN 3A P2015 TP3 – Web Applications avec ASP.NET Page 1 © Philippe Lalevée, 2015

Workshop e-Business ISMIN 3A P2015

TP3 – Web Applications avec ASP.NET Page 15 © Philippe Lalevée, 2015

POUR SUPPRIMER UN ENREGISTREMENT DU DATAGRID

Vous pouvez utiliser le générateur de propriétés pour ajouter une colonne de suppression au DataGrid. Vous devez relier le lien de suppression à un gestionnaire d'événement qui supprime l'enregistrement correspondant dans la base de données. Vous pouvez utiliser la propriété de DataGrid.DataKeyField pour associer la ligne à supprimer avec son enregistrement correspondant. Créez une requête SQL pour supprimer l'enregistrement, puis appelez OleDbCommand.ExecuteNonQuery pour mettre à jour la base de données.