Vous êtes sur la page 1sur 210

ROYAUME DU MAROC

Office de la Formation Professionnelle et de la Promotion du Travail


DIRECTION RECHERCHE ET INGENIERIE DE FORMATION
SECTEUR NTIC

OFPPT

SECTEUR NTIC
Filière : TDI
Niveau Technicien spécialisé

Manuel de TP
Module 21 : Développement et Déploiement de Sites Web Dynamiques
Conception et rédaction

NOM et PRENOM AFFECTATION

AIT TALEB Soufiane ISTA NTIC - Guelmim

Liste des équipements:

Equipements Quantité
Poste informatique 15
Imprimante 1
Visual Studio 2010 ou plus 15
SQL Server 2008 ou plus 15

Liste de matière d’œuvre et outillage : Néant

Nous tenons à remercier les formateurs concepteurs des Manuels


de TP et nous invitons les utilisateurs de ce manuel à
communiquer, par email, à la direction du CDC TIC toutes les
remarques et suggestions afin de les prendre en considération
pour l’enrichissement et l’amélioration de ce document.
OFPPT
CDC TIC

MODULE 21 : DEVELOPPEMENT ET DEPLOIEMENT DE SITES WEB DYNAMIQUES


Code : TDI-21 Durée : 120 h

PRECISIONS SUR LE COMPORTEMENT CRITERES PARTICULIERS DE


ATTENDU PERFORMANCE

A. Développer des composants serveur.  Présentation des composants d’interface


WebForms.
 Gestion des événements associés aux
contrôles Web.
 Gestion des états de session et d’application.
 Implémentation de l’accès aux données et
gestion des interactions avec les éléments de
l’interface utilisateur.
 Génération de pages Web dynamiques
.
B. Développer des applications XML.  Composants d’un document XML.
 Création des DTD
 Création des schémas XML, document XSD.
 Mettre en forme un document XML pour le
publier sur Internet avec la technologie XSLT.
 Feuilles de style css

C. Développer un Service Web.  Principes de fonctionnement d’un service Web


 Présentation du protocole SOAP
 Codification et mise en œuvre d’un web service

D. Installation d’un serveur  Installation et configuration d’un serveur web


d’application.

E. Décrire en détail les différents outils  Identification des outils de déploiement


de déploiement disponibles dans disponibles dans l’environnement intégré de
l’environnement intégré de développement.
développement (IDE)  Classification des outils de déploiement selon
le type d’application web auxquels ils
s’appliquent
F. Empaqueter et déployer l’application  Déploiement d’application Web
web à l’aide d’un outil de déploiement
disponible dans l’environnement
intégré de développement

G. Assurer la sécurité des applications  Appliquer la sécurité sur les applications


déployées. déployées dans le Serveur
 Assurer une authentification unique pour les
applications web s’exécutant sur le même
serveur

3
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

H. Sensibiliser sur les aspects à prendre  Les fichiers de paramétrage


en compte avant la conception pour
faciliter l’exploitation d’une
application web
I. Programmer avec Ajax  Les contrôles Ajax

4
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 1
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A001

Activité Créer un site Internet

Durée 1H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Créer un site Internet.
Détails sur les objectifs  Manipuler des contrôles HTML Server
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

5
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : première application Web
1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, cliquez sur Nouveau site Web.
3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET vide.
4. Dans la zone Emplacement, sélectionnez Système de fichiers et entrez le
nom du dossier dans lequel vous souhaitez conserver les pages du site Web.
5. Par exemple, tapez le nom de dossier C:\Exemple.
6. Dans la liste Langage, cliquez sur Visual C# pour sélectionner le langage de
programmation que vous utiliserez dans l'ensemble du projet Web.
7. Cliquez sur OK.
8. Dans l'explorateur de solution, un click-droit sur le site Web site, et en suite
cliquer sur Ajouter un nouvel élément.
9. La boîte de dialogue Ajouter un nouvel élément s'affiche.
10. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
11. Cliquez sur l’onglet HTML du formulaire, ajoutez les contrôles HTML suivants
sur le formulaire :
Une zone de texte Input (Text) : TextBox1
Un bouton Input (Button) : Button1
Un label : Label1

12. 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.
13. Basculez en mode HTML et ajoutez la mention runat=server dans les trois
contrôles :
<input id="Text1" type="text" runat="server" />&nbsp;
<input id="Button1" type="button" value="button" runat="server"/><br />
<div id="Label1" runat="server">Label </div>
14. Notez que nous aurions pu modifier ces propriétés 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.
15. Double-cliquez sur le bouton. Nous nous retrouverons maintenant dans
l’événement Click de ce bouton :
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
<!--
function Button1_onclick() {

// -->
</script>
</head>

6
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

16. Insérer le code suivant :


function Button1_onclick() {
Label1.innerText = form1.Text1.value;
}
17. Compilez le projet Web par le menu Générer / Régénérer la solution
18. Exécutez le formulaire en effectuant un click droit sur Default1.aspx dans
l’explorateur de solution et en choisissant Afficher dans le navigateur.
19. Testez le fonctionnement du formulaire.

7
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 2
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A002

Activité Utiliser les contrôles serveur

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Utiliser les contrôles TextBox et Label et
Literal.
Détails sur les objectifs
 Utiliser les contrôles DropDownList et
visés par l’activité
Button.
 Utiliser les contrôles RadioButton et
CheckBox et CheckBoxList

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

8
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : les contrôles Label, TextBox et Literal
L'objectif est de réaliser la page Texte suivante qui illustre l'utilisation des contrôles
Label, Literal et Textbox :

Figure 1 : La page Texte


Les deux premières lignes de la page comprennent un Label simple (lblSimple) et un
peu sophistiqué (lblSophistique). L'apparence de ce dernier a simplement été modifiée
en donnant des valeurs adéquates dans la fenêtre des propriétés.

Les deux lignes suivantes contiennent des contrôles Literal : ltrUn et ltrUnAutre. Le
texte du second contrôle inclut une balise HTML <b> pour afficher une partie du texte
en caractère gras.

La première ligne du tableau comporte un contrôle TextBox : txtPasAuto, dont la


propriété AutoPostBack est False. La ligne aussi comporte également un contrôle Label
: lblPasAuto, dont le texte est mise à jour avec celui de la zone de texte lors du
traitement de l'événement TextChanged :

protected void txtPasAuto_TextChanged(object sender, EventArgs e)


{
lblPasAuto.Text = txtPasAuto.Text;
}

La deuxième ligne du tableau est semblable à la première ligne, la principale différence


étant que la propriété AutoPostBack de la zone de texte txtAuto est True. Aussi le
contrôle Label lblAuto qui permet d'afficher la mise à jour de la zone de texte lors du
traitement de l'événement TextChanged :

protected void txtAuto_TextChanged(object sender, EventArgs e)


9
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

{
lblAuto.Text = txtAuto.Text;
}

Quand on saisit du texte dans ces deux zones, on peut constater que le Label lblAuto
est mis à jour dès que l'utilisateur quitte la zone txtAuto, tandis que le Label lblPasAuto
n'est actualisé que lors de l'envoi de la page (par exemple, en cliquant sur le bouton OK).

La troisième ligne du tableau correspond à une zone de texte avec mot de passe. Le
contenu de cette zone est toujours affiché sous forme masquée (astérisque ou disque
sur XP). On peut aussi remarquer que, lorsque la page est régénérée par le serveur que
le contenu des zones de texte reçoit bien la valeur qui avait été saisie par l'utilisateur,
sauf une zone de type Password. Cela fonctionne de cette façon pour des raisons de
sécurité : le mot de passe saisi est envoyé du client vers le serveur, mais jamais du
serveur vers le client.

La dernière ligne du tableau comprend une zone de texte à plusieurs lignes


txtMultiLigne et deux cases à cocher, chkWrap et chkReadOnly, permettent de
modifier dynamiquement la valeur des propriétés Wrap et ReadOnly, de la zone de
texte. La propriété AutoPostBack des cases a été mise à True de façon à ce qu'un clic
sur une des cases soit immédiatement pris en compte. Le code de modification des
propriétés de la zone de texte lors d'un clic sur une case à cocher est le suivant :

protected void chkWrap_CheckedChanged(object sender, EventArgs e)


{
txtMultiLigne.Wrap = chkWrap.Checked;
}

protected void chkReadOnly_CheckedChanged(object sender,


EventArgs e)
{
txtMultiLigne.ReadOnly = chkReadOnly.Checked;
}

Remarque : si on n'avait pas mis à True la valeur des propriétés AutoPostBack des
cases à cocher, l'utilisateur aurait dû cliquer sur Ok ou modifier un texte pour provoquer
un envoi au serveur, afin que les événements soient générés.

Afin que l'état des cases à cocher reflète initialement celui de la zone de texte multiligne,
telle que définie en phase de conception, on peut traiter l'événement PreRender de la
page :

protected void Page_PreRender(object sender, EventArgs e)


{
chkReadOnly.Checked = txtMultiLigne.ReadOnly;
chkWrap.Checked = txtMultiLigne.Wrap;
}

Exercice 2 : les contrôles DropDownList et Button


L'objectif de cet exercice est de réaliser une application Web qui permet la conversion
d'un montant en Dollars U.S en plusieurs devises: Euros, Yen Japonai et le Dollars
Canadien
Pour cela on dispose des trois contrôles suivants :
 Le contrôle TextBox txtDollards : contient la somme en dollars à convertir

10
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

 Le contrôle DropDownList drpTypeDevise : permet de sélectionner une devise


 Le contrôle Button btnOk : permet de déclencher la conversion
 Le contrôle Label lblDollarsEnDevise : affiche le résultat de la conversion en
devise.
On donne: 1 Dollard U.S = 0,7436 Euro
1 Dollard U.S = 81,0 Yen Japonais
1 Dollard U.S = 0,9996 Dollar Canadien

Figure 2 : Première exécution


La première étape consiste à créer une un Objet de type ListeItem et ajouter la devise
(Text) et la valeur (value) de chacune :

protected void Page_Load(object sender, EventArgs e)


{
if (!this.IsPostBack)
{
drpTypeDevise.Items.Add(new
ListItem("Euros","0,7436"));
drpTypeDevise.Items.Add(new ListItem("Yen Japonais ",
"81,0"));
drpTypeDevise.Items.Add(new ListItem("Dollars
Canadien", "0,9996"));

}
}

La deuxième étape correspond à l'écriture du code de calcul :

protected void btnOk_Click(object sender, EventArgs e)


{
decimal montantUs = Decimal.Parse(txtDollards.Text);
//Récupéréer ListItem selectionée on utilisant son indexe
ListItem element=
drpTypeDevise.Items[drpTypeDevise.SelectedIndex];

decimal nouveauMontant = montantUs *


Decimal.Parse(element.Value);
lblDollarsEnDevise.Text = montantUs.ToString() + " Dollars
U.S= ";

11
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

lblDollarsEnDevise.Text += nouveauMontant.ToString() +"


"+ element.Text;
}

On va ajouter une autre fonctionnalité à note application web, un nouveau bouton


btnAffichGraph permet d'afficher un graphique en utilisant un contrôle image
imgGraph.

Pour cela on dispose d'un répertoire Images contenant trois images Pic0.png, Pic1.png
et Pic2.png :

Figure 3 : image Pic0.png pour la devise Euros

Figure 4 : image Pic1.png pour la devise Yen Japonais

12
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Figure 5 : image Pic2.png pour la devise Dollar Canadien


Pour cela on ajoute le code qui permet de masquer l''image imgGraph au démarrage :

protected void Page_Load(object sender, EventArgs e)


{
if (!this.IsPostBack)
{
drpTypeDevise.Items.Add(new ListItem("Euros", "0,7436
"));
drpTypeDevise.Items.Add(new ListItem("Yen Japonais ",
"81,0"));
drpTypeDevise.Items.Add(new ListItem("Dollars
Canadien", "0,9996"));

}
imgGraph.Visible = false;
}

Ensuite on implémente le bouton btnAffichGraph :

protected void btnAffichGraph_Click(object sender, EventArgs e)


{
imgGraph.ImageUrl = "Images/Pic" +
drpTypeDevise.SelectedIndex + ".png";
imgGraph.Visible = true;
}

En fin on va modifier le code de l'application afin de gérer les erreurs de saisie :

protected void btnOk_Click(object sender, EventArgs e)


{
decimal montantUs;
try
{
montantUs = Decimal.Parse(txtDollards.Text);
}
catch
{
montantUs = 0;

13
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

}
if (montantUs <= 0)
{
txtDollards.BackColor = Color.Red;
txtDollards.Text = "Spécifier un nombre positif";
}

else
{

txtDollards.BackColor = Color.White;
//Récupéréer ListItem selectionée on utilisant son indexe
ListItem element =
drpTypeDevise.Items[drpTypeDevise.SelectedIndex];

decimal nouveauMontant = montantUs *


Decimal.Parse(element.Value);
lblDollarsEnDevise.Text = montantUs.ToString() + " Dollars
U.S= ";
lblDollarsEnDevise.Text += nouveauMontant.ToString() + " "
+ element.Text;
}
}

Figure 6 : Deuxième exécution

14
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercice 3 : les contrôles ImageButton, RadioButton et CheckBox


L'objectif de cet exercice est de réaliser l'application Web suivante :

Figure 7 : Résultat attendu


Dans la première partie de l'exercice, un contrôle ImageButton imgBtnCarre utilise une
image carré de 100 pixels de côté. Quatre carrés de couleurs différentes sont dessinés
dans l'image, chacun d'eux faisant 50 pixels de côté :

Figure 8 : image1.jpg

L'évènement Click de ce bouton est intercepté afin d'afficher sur le contrôle Label
lblColeur le nom de la couleur sur laquelle s'est fait le clic, tandis que son fond prend la
couleur choisie.
Un deuxième contrôle Label lblCoordonnees affiche les coordonnées du focus au
moment du clic sur l'image.

protected void imgBtnCarre_Click(object sender,


ImageClickEventArgs e)
{
lblColeur.Visible = true;
lblCoordonnees.Visible = true;
if (e.X < 50)
15
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

{
if (e.Y < 50)
{
lblColeur.Text = "Couleur de la zone :
Rouge";
lblColeur.BackColor = Color.Red;
}
else
{
lblColeur.Text = "Couleur de la zone : Blue";
lblColeur.BackColor = Color.Blue;

}
}
else
{
if (e.Y < 50)
{
lblColeur.Text = "Couleur de la zone : Vert";
lblColeur.BackColor = Color.Green;
}
else
{
lblColeur.Text = "Couleur de la zone : Gris";
lblColeur.BackColor = Color.Gray;

}
}
lblCoordonnees.Text = "Les cordonnées X= "+e.X + ",
Y= " + e.Y;

}
Au démarrage de l'application les deux contrôles lblColeur et lblCoordonnees sont
masqués:
protected void Page_Load(object sender, EventArgs e)
{

if (!this.IsPostBack)
{
lblColeur.Visible = false;
lblCoordonnees.Visible = false;

La deuxième partie de l'exercice utilise des cases à cocher et des boutons d'options.
Deux cases à cocher CheckCouleur et CheckTaille contrôlent la visibilité de deux
groupes de boutons d'option : quand une case n'est pas cochée, le groupe de boutons
d'option correspondant est caché.

La propriété GroupName des boutons d'option optVert, optBlue, optGris et


optRouge est Couleur, et celle des boutons optGrande et optPetite est Taille, ce qui crée
effectivement les deux groupes.
Les boutons d'options sont placés sur des contrôles Panel pnlCouleur et pnlTaille, qui
servent de conteneurs. Pour cacher les boutons, il suffit de cacher le contrôle Panel
correspondant :

16
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

protected void CheckCouleur_CheckedChanged(object sender,


EventArgs e)
{
pnlCouleur.Visible = CheckCouleur.Checked;

protected void CheckTaille_CheckedChanged(object sender,


EventArgs e)
{

pnlTaille.Visible = CheckTaille.Checked;
}

Les boutons d'option permettent de modifier l'apparence d'un autre contrôle Panel pnlRectangle,
dont la couleur et les dimensions sont modifiées selon les boutons d'option sélectionnés :
protected void optVert_CheckedChanged(object sender, EventArgs e)
{
if (optVert.Checked)
{
pnlRectangle.BackColor = Color.Green;
}
}

protected void optBlue_CheckedChanged(object sender, EventArgs e)


{
if (optBlue.Checked)
{
pnlRectangle.BackColor = Color.Blue;
}
}

protected void optGris_CheckedChanged(object sender, EventArgs e)


{
if (optGris.Checked)
{
pnlRectangle.BackColor = Color.Gray;
}
}
protected void optRouge_CheckedChanged(object sender, EventArgs
e)
{
if (optRouge.Checked)
{
pnlRectangle.BackColor = Color.Red;
}
}

protected void optGrande_CheckedChanged(object sender, EventArgs


e)
{
if (optGrande.Checked)
{
pnlRectangle.Width = Unit.Pixel(100);
pnlRectangle.Height = Unit.Pixel(100);
}
}

protected void optPetite_CheckedChanged(object sender, EventArgs


e)

17
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

{
if (optPetite.Checked)
{
pnlRectangle.Width = Unit.Pixel(50);
pnlRectangle.Height = Unit.Pixel(50);
}
}

Et finalement ajouter pour gérer l'affichage des cases à cocher et des boutons d'option
au démarrage de l'application :

protected void Page_Load(object sender, EventArgs e)


{

if (!this.IsPostBack)
{
lblColeur.Visible = false;
lblCoordonnees.Visible = false;
//Code à ajouter
pnlCouleur.Visible = CheckCouleur.Checked;
pnlTaille.Visible = CheckTaille.Checked;
}

Exercice 4 : Utiliser le contrôle CheckBoxList


L'objectif de cet exercice est de réaliser l'interface Web suivante :

Figure 9 : Résultat attendu

18
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Pour cela on va utiliser trois contrôles : un contrôle CheckBoxList chkLst, un bouton


btnOk et un Label lblResultat pour affiches les choix :

protected void Page_Load(object sender, EventArgs e)


{
if (!this.IsPostBack)
{
chkLst.Items.Add("C");
chkLst.Items.Add("C++");
chkLst.Items.Add("C#");
chkLst.Items.Add("VB.NET");
chkLst.Items.Add("Java");
chkLst.Items.Add("Pascal");
lblResultat.Visible = false;
}
}

protected void btnOk_Click(object sender, EventArgs e)


{
lblResultat.Visible = true;
lblResultat.Text = "<b>Votre choix est :</b>";
foreach (ListItem lstItem in chkLst.Items)
{
if (lstItem.Selected == true)
{
lblResultat.Text += "<br>" + lstItem.Text;
}
}

19
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 3
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A003

Activité Utiliser les contrôles serveur

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Utiliser les contrôles ListBox et
Détails sur les objectifs RadioButtonList.
visés par l’activité  Utiliser le contrôle Table
 Tableaux dynamiques

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

20
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Les contrôles ListBox et RadioButtonList
L'objectif de cet exercice est de réaliser l'interface Web suivante :

Figure 10 : Résultat attendu


Les listes sont remplies lors du chargement de la page :
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
ListItem[] item = {new ListItem("Soufiane"), new
ListItem("Badia"), new ListItem("Mehdi"),
new ListItem("Tarik"), new ListItem("Sana")};
lstBox.Items.AddRange(item);
drpList.Items.AddRange(item);
chkList.Items.AddRange(item);
radButList.Items.AddRange(item);

}
}

Une zone de texte et un bouton permettent à l'utilisateur d'ajouter des éléments dans la
liste :

protected void btnAjouter_Click(object sender, EventArgs e)


{
lstBox.Items.Add(txtSaisie.Text);
drpList.Items.Add(txtSaisie.Text);
chkList.Items.Add(txtSaisie.Text);
radButList.Items.Add(txtSaisie.Text);
txtSaisie.Text = "";
21
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

La propriété AutoPostBack des quatre listes est True, ce qui permet de traiter leurs
événements SelectedIndexChanged à chaque changement de la sélection (le contrôle
LstBox est à sélection multiple).
Une première solution consiste à implémenter l'événement SelectedIndexChanged
pour chaque contrôle Liste. Par exemple :

protected void lstBox_SelectedIndexChanged(object sender,


EventArgs e)
{
lstSelection.Items.Clear();
foreach (ListItem itm in lstBox.Items)
{
if (itm.Selected)
{
lstSelection.Items.Add(itm.Text);
}
}

Dans la mesure où le traitement de cet événement est identique pour les quatre listes où
l'événement SelectedIndexChanged est définit dans la classe de base ListControl, une
seule méthode lui a été appliquée. Celle-ci est connecté à chaque objet on ajoutant le
code suivant au démarrage de la page :

protected void Page_Load(object sender, EventArgs e)


{
if (!this.IsPostBack)
{
ListItem[] item = {new ListItem("Soufiane"), new
ListItem("Badia"),
new ListItem("Mehdi"),new ListItem("Tarik"),
new ListItem("Sana")};
lstBox.Items.AddRange(item);
drpList.Items.AddRange(item);
chkList.Items.AddRange(item);
radButList.Items.AddRange(item);

// Code à ajouter
this.lstBox.SelectedIndexChanged += new
EventHandler(this.SelectedIndexChanged);
this.drpList.SelectedIndexChanged += new
EventHandler(this.SelectedIndexChanged);
this.chkList.SelectedIndexChanged += new
EventHandler(this.SelectedIndexChanged);
this.radButList.SelectedIndexChanged += new

EventHandler(this.SelectedIndexChanged);
}

La méthode SelectedIndexChanged associée connectée à chaque objet est la suivante :

protected void SelectedIndexChanged(object sender, EventArgs e)


{
22
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

lstSelection.Items.Clear();
ListControl ctr = (ListControl) sender;
foreach (ListItem itm in ctr.Items)
{
if (itm.Selected)
{
lstSelection.Items.Add(itm.Text);
}
}
}
Remarque : protected void SelectedIndexChanged(…) est le nom de la
méthode utilisée que vous pouvez changer par exemple : protected void
MaMethode(…), sans oublier aussi de modifier le code qui permet de connecter cette
méthode aux objet, par exemple : this.lstBox.SelectedIndexChanged += new
EventHandler(this. MaMethode);
Exercice 2 : Le contrôle Table
L'objectif de cet exercice est de créer le tableau ci-dessous en utilisant de méthodes :
code HTML ou du code C# :

Figure 11 : Exemple de tableau


La première méthode consiste à créer le tableau de la figure 50 en utilisant du code
HTML suivant :

<asp:Table ID="Table1" runat="server" GridLines=Both>


<asp:TableRow >
<asp:TableCell Text="Soufiane"></asp:TableCell>
<asp:TableCell ColumnSpan=2
Text="Badia"></asp:TableCell>
</asp:TableRow>
<asp:TableRow >
<asp:TableCell Text="Mehdi"></asp:TableCell>
<asp:TableCell RowSpan=2
Text="Tarik"></asp:TableCell>
<asp:TableCell Text="Sana"></asp:TableCell>
</asp:TableRow>
<asp:TableRow >
<asp:TableCell Text="Hassan"></asp:TableCell>
<asp:TableCell Text="Fatima"></asp:TableCell>
</asp:TableRow>
</asp:Table>

La deuxième méthode utilise un contrôle Table tbl pour créer le tableau précédent en
utilisant le code C# suivant :
tbl.GridLines = GridLines.Both;
tbl.BorderStyle = BorderStyle.Solid;

// Ligne 1
TableRow r = new TableRow();
TableCell c = new TableCell();
c.Text = "Soufiane";
r.Cells.Add(c);
c = new TableCell();

23
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

c.ColumnSpan = 2;
c.Text = "Badia";
r.Cells.Add(c);
tbl.Rows.Add(r);

// Ligne 2
r = new TableRow();
c = new TableCell();
c.Text = "Mehdi";
r.Cells.Add(c);
c = new TableCell();
c.RowSpan = 2;
c.Text = "Tarik";
r.Cells.Add(c);
c = new TableCell();
c.Text = "Sana";
r.Cells.Add(c);
tbl.Rows.Add(r);

// Ligne 3
r = new TableRow();
c = new TableCell();
c.Text = "Hassan";
r.Cells.Add(c);
c = new TableCell();
c.Text = "Fatima";
r.Cells.Add(c);

tbl.Rows.Add(r);

Exercice 3 : Création d'un tableau dynamique


L'objectif de cet exercice est de créer un tableau permettant d'afficher les carrés et
optionnellement les cubes de nombres entiers. Le tableau ne dispose initialement que
d'une ligne comprenant trois cellules d'en-têtes, invisible sur la page (Figure 52). Une
zone de saisie txtNbreLignes permet à l'utilisateur de donner le nombre de lignes qu'il
souhaite visualiser et une case à cocher chkCubes lui permet de choisir s'il souhaite
éditer la colonne des cubes ou non. La case à cocher chkAfficherTabDyn et le contrôle
PlaceHolder plh de la partie inférieure de la page mettent en œuvre la création
dynamique de tableaux.

24
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Figure 12 : Tableau en phase de création


Quand l'utilisateur clique sur le bouton btnOK, le nombre de carrés (et éventuellement
de cubes) correspondant à la valeur saisie est affiché (Figure 53) :
Le tableau est créé en phase de conception (avec la seule ligne d'en-têtes), puis ses
lignes et ses cellules sont modifiées en phase d'exécution.
Pour créer un tableau :
 Insérez un tableau sur la page, en glissant un contrôle Table tblCarres de la
boîte à outils.
 Sélectionnez le tableau et modifier éventuellement certaines de ses propriétés
dans la fenêtre des propriétés.
 Choisissez la propriété Rows pour ajouter des lignes. Cliquez sur le bouton (…)
dans la zone valeur de la propriété.
 Le dialogue éditeur de collection TableRow vous permet de travailler sur les
lignes. Vous pouvez cliquer sur le bouton Ajouter pour ajouter une ligne, qui
sera la ligne d'en-têtes du tableau.
 En prenant une ligne (ici la seule ligne créée) dans la liste de gauche, vous
pouvez en modifier les propriétés dans la liste de droite.
 Sélectionnez la propriété Cells et cliquez sur le bouton (…) correspondant pour
ajouter les trois cellules Nombre, Carré et Cube en modifiant la propriété Text
de chaque cellule.

25
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Figure 13 : Tableaux sans et avec les cubes


Quand l'utilisateur clique sur le bouton OK, il faut ajouter les lignes dans le tableau, par
exemple, si il saisit le nombre 10, il faut insérer dix lignes et calculer le carré du nombre
pour chacune. De plus si la case à cocher est sélectionnée, il faut une colonne de cubes
en plus.

Mais avant de faire tout cela, il convient de supprimer les éventuelles lignes de nombres,
si ce n'est pas la première fois que le tableau est généré, tout en gardant la ligne qui
contient les titres des colonnes. Pour cela, on peut simplement toujours éliminer la ligne
numéro 1 (la deuxième ligne) tant que le nombre des lignes est supérieur à 1 (la
première ligne est celle des titres, qui ne doit pas être supprimée), à l'aide de la méthode
RemoveAt de la classe TableCell.

Remarque : les numéros de lignes et de colonnes commencent à 0 dans les collections.


La première ligne a donc le numéro 0 et la troisième cellule le numéro 2.
N'oubliez pas que, quand on supprime un élément d'une collection, l'ensemble de la
collection est renuméroté de façon à ce qu'il ne manque aucun numéro. Si on supprime
la ligne numéro 1, la ligne numéro 2, si elle existait, devient la numéro 1 et ainsi de suite.

Voici le code correspondant :


protected void btnOk_Click(object sender, EventArgs e)
{
int i;
// Supprimer les lignes sous le titre
while (tblCarres.Rows.Count > 1)
{
tblCarres.Rows.RemoveAt(1);
}
// Indicateur de calcul des cubes
bool fCubes = chkCubes.Checked;
// Ajuste l'en-tête selon l'indicateur de calcule de

26
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

cubes
tblCarres.Rows[0].Cells[2].Visible = fCubes;
// Ajoute les nouvelles lignes
int nb = int.Parse(txtNbreLignes.Text);
for (i = 1; i <= nb; i++)
{
TableRow r = new TableRow();
r.BackColor = Color.Yellow;
// Cellules
TableCell c = new TableCell();
// Le nombre
c.HorizontalAlign = HorizontalAlign.Center;
c.Text = i.ToString();
// L'ajout à la ligne
r.Cells.Add(c);
// Carré
c = new TableCell();
c.HorizontalAlign = HorizontalAlign.Center;
c.Text = (i*i).ToString();
// En caractère gras
c.Font.Bold = true;
// L'ajout à la ligne
r.Cells.Add(c);
// Eventuellement le cube
if (fCubes)
{
c = new TableCell();
c.HorizontalAlign = HorizontalAlign.Center;
c.Text = (i * i * i).ToString();
// En caractère gras
c.Font.Bold = true;
// et eb bleu
c.ForeColor = Color.Blue;
// L'ajout à la ligne
r.Cells.Add(c);
}

//Ajoute la ligne au tableau


tblCarres.Rows.Add(r);
tblCarres.Visible = true;

}
}

La deuxième partie de cet exercice comprend du code qui crée un tableau


dynamiquement. Une case à cocher chkAfficherTabDyn, dont la propriété AutoPostBack
est True, permet d'indiquer si le tableau dynamique doit être créé.
Le contrôle PlaceHolder vous permet de placer un contrôle conteneur vide dans la page
puis d'y ajouter dynamiquement des éléments enfants au moment de l'exécution.
Nous avons donc placé un objet PlaceHolder plh sur la page, pour marquer
l'emplacement du tableau.
Voici le code correspondant :

protected void Page_PreRender(object sender, EventArgs e)


{ if (chkAfficherTabDyn.Checked)
{ // Définit le tableau
Table tbl = new Table();
tbl.GridLines = GridLines.Both;
// Ajout d'une ligne

27
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

TableRow r = new TableRow();


tbl.Rows.Add(r);
// Ajout d'une cellule
TableCell c = new TableCell();
c.Text = "Voici une liste";
r.Cells.Add(c);
c = new TableCell();
ListBox lst = new ListBox();
ListItem[] item ={new ListItem("Soufiane"),new
ListItem("Badia"),
new ListItem("Mehdi")};
lst.Items.AddRange(item);
lst.Rows = 3;
c.Controls.Add(lst);
r.Cells.Add(c);
// Le contrôle tbl créé n'existe pas encore sur la page. Il
faut donc
// l'y ajouter. On pourrait écrire pour cela le code
suivant :
// this.Controls.Add(tbl): le contôle tbl serait inséré à
la fin de la page,
// après la balise de fermuture </HTML>, ce qui générerait
des erreurs.
// Pour résoudre ce problème on utilise un contrôle
PlaceHolder :

// Ajout du tableau dans la page


plh.Controls.Add(tbl);

}
}
Le tableau est alors bien affiché à l'emplacement choisi quand l'utilisateur coche la case
:

Figure 14 : tableau crée dynamiquement

28
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 4
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A004

Activité Utiliser les contrôles serveur

Durée 4H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Utiliser le contrôle Image.
Détails sur les objectifs  Utiliser le contrôle ImageMap.
visés par l’activité  Utiliser le contrôle AdRotator.

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

29
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Le contrôle image
L'objectif de cet exercice est de réaliser une page web pour un générateur dynamique E-
Carte. Cette page est divisée en deux régions (tableau), à gauche on trouve une balise
DIV contenant un ensemble de contrôles Web pour spécifier les options de la carte de
vœux. A droite on trouve un contrôle Panel pnlCarte qui contient deux autres contrôles
un contrôle Label lblVœux et une image imgDefault. Le contrôle Panel est utilisé pour
afficher la configuration-utilisateur concernant l'image et le texte à afficher. Le texte et
l'image représente la carte de vœux.
Au démarrage de l'application la carte n'a pas encore été générée et la partie droite est
vide (Figure 59)

Figure 15 : Générateur de carte de vœux

Quand l'utilisateur clique sur le bouton mettre à jour, la carte de vœux est générée
(Figure 60):

30
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Figure 16 : Configuration-utilisateur de la carte de vœux


L'image utilisée pour la carte de vœux est la suivante :

Figure 17 : DefaultPic.png
Le code ASPX de la page E-Carte est le suivant :
<form id="form1" runat="server">
<div >
<!-- Zone des contrôles: -->
Choisir la couleur d&#39;arrière-plan :<br />
<asp:DropDownList ID="dplstBackColor" runat="server"
Height="16px"
Width="211px">
</asp:DropDownList>
<br /><br />

Choisir la couleur du texte : <br />


<asp:DropDownList ID="dplstForColor" runat="server"
Height="16px"
Width="208px">
</asp:DropDownList>

31
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<br /><br />

Choisir la police :<br />


<asp:DropDownList ID="dplstFontName" runat="server"
Height="16px"
Width="204px">
</asp:DropDownList>
<br /><br />

Choisir la taille de la police :<br />


<asp:TextBox ID="txtTaillePolice"
runat="server"></asp:TextBox>
<br /><br />

Choisir le style de la bordure :<br />


<asp:RadioButtonList ID="lstBorderStyle" runat="server">
</asp:RadioButtonList>
<br /><br />

<asp:CheckBox ID="chkImage" runat="server"


Text="Ajouter l'image par défaut"/>
<br /><br />

Entrer de texte ci-dessous :<br />


<asp:TextBox ID="txtVœux" runat="server" Rows="5"
TextMode="MultiLine"
Width="255px"></asp:TextBox>
<br /><br />

<asp:Button ID="btnUpdate" runat="server"


Text="Mettre à jour" Width="89px" />
</div>
<!-- Zone de la carte -->
<asp:Panel ID="pnlCarte" runat="server"
HorizontalAlign="Center"
style=" left: 300px; top: 0px; position: absolute;
height: 417px; width: 489px">
<br /><br />
<asp:Label ID="lblVœux" runat="server" Height="103px"
Width="256px"></asp:Label>
<br /><br />
<asp:Image ID="imgDefault" runat="server" Height="160px"
Width="212px"
Visible="False" />
</asp:Panel>
</form>

Au démarrage de l'application des valeurs initiales sont fixées (couleurs, Police, Bordure,
image) qui correspondent au code behind suivant :

protected void Page_Load(object sender, EventArgs e)


{
if (!this.IsPostBack)
{
// Couleur arrière plan et texte
string[] tabColor =
Enum.GetNames(typeof(KnownColor));
for (int i = 0; i < tabColor.Length; i++)
{
dplstBackColor.Items.Add(tabColor[i]);

32
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

}
dplstBackColor.SelectedIndex = 163;

//Autre méthode pour la couleur du texte


dplstForColor.DataSource = tabColor;
dplstForColor.DataBind();
dplstForColor.SelectedIndex = 34;

// Famille de police
// using System.Drawing.Text;
InstalledFontCollection fonts = new
InstalledFontCollection();

foreach (FontFamily family in fonts.Families)


{
dplstFontName.Items.Add(family.Name);
}
// Style de bordure
string[] tabBorderStyle =
Enum.GetNames(typeof(BorderStyle));
lstBorderStyle.DataSource = tabBorderStyle;
lstBorderStyle.DataBind();
//Affichage sur deux colonnes
lstBorderStyle.RepeatColumns = 2;
lstBorderStyle.SelectedIndex = 0;

imgDefault.ImageUrl = "Images/DefaultPic.png";
}
}

L'événement click du bouton btnUpdate permet de générer la carte de vœux :

protected void btnUpdate_Click(object sender, EventArgs e)


{
// Définir la couleur de fond :
pnlCarte.BackColor =
Color.FromName(dplstBackColor.SelectedItem.Text);
// Définir la couleur du texte :
lblVœux.ForeColor =
Color.FromName(dplstForColor.SelectedItem.Text);
// Définir la police :
lblVœux.Font.Name = dplstFontName.SelectedItem.Text;
// Taille de la pilice :
try
{
if (Int32.Parse(txtTaillePolice.Text) > 0)
lblVœux.Font.Size =
FontUnit.Point(Int32.Parse(txtTaillePolice.Text));
}
catch
{
}
//Définir la bordure :
//Lorsque l'utilisateur choisit un style de bordure dans
la liste,
//la propriété SelectedItem aura une chaîne de texte
comme "Double".
//Mais pour appliquer ce style de bordure à la commande,
vous avez besoin
//d'un moyen pour déterminer la constante énumérée qui

33
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

correspond à ce
//texte.
// Un TypeConverter est une classe spéciale qui est
capable de convertir à
//partir d' un type spécialisé (dans ce cas,
l'énumération BorderStyle) à
//un type plus simple (comme une chaîne), et vice-versa.
// Pour définir le type TypeConverter il faut ajouter
//l'espace de nom : System.ComponentModel

//Trouver le TypeConverter approprié pour l'énumération


BorderStyle
TypeConverter cnvrt =
TypeDescriptor.GetConverter(typeof(BorderStyle));

//Mise à jour le style de bordure en utilisant la valeur de


cnvrt
pnlCarte.BorderStyle =
(BorderStyle)cnvrt.ConvertFromString(lstBorderStyle.SelectedItem.
Text);

//Afficher ou masquer l'image par défaut :


if(chkImage.Checked)
imgDefault.Visible= true;
else
imgDefault.Visible=false;

// Message de Vœux :
lblVœux.Text = txtVœux.Text;
}

Exercice 2 : le contrôle ImageMap


L'objectif de cet exercice est de développer l'interface Web suivante :

Figure 18 : Résultat final

34
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Cette page Web utilise un contrôle ImageMap imgMapLog composé de six zones :
 RectangleHotSpot : pour naviger dans une nouvelle page (target="_blank")
du site Facebook (NavigateUrl="http://www.facebook.com")
 RectangleHotSpot : pour nouvrir dans la même page acuelle (target="_self")
le site Twitter (NavigateUrl="http://www.twitter.com")
 CircleHotSpot : quand l'utilisaleur clique sur le premier cercle à gauche un code
côté serveur est éxécuté pour afficher le texte "WordPress" (PostBackValue="
WordPress") sur un contrrôle Label lblPostBackValue
 CircleHotSpot : quand l'utilisaleur clique sur le cercle au milieu un code côté
serveur est éxécuté pour afficher le texte "BMW" (PostBackValue=" BMW") sur
le contrrôle Label lblPostBackValue
 CircleHotSpot : quand l'utilisaleur clique sur le premier cercle à droite un code
côté serveur est éxécuté pour afficher le texte "Windows" (PostBackValue="
Windows") sur le contrrôle Label lblPostBackValue
 PolygonHotSpot : quand l'utilisaleur clique sur cette zone un code côté serveur
est éxécuté pour afficher le texte "Start" (PostBackValue=" Start") sur le
contrrôle Label lblPostBackValue

Le contrôle ImageMap imgMapLog utilise l'image suivante pour créer les six zones :

Figure 19 : mon_imagemap.jpg

Le code ASPX de la page web est le suivant :


<form id="form1" runat="server">
<div>
<h2 align="left" style=" color:Blue" > Utilisation du
contrôle ImageMap en
ASP.NET </h2>
<asp:ImageMap ID="imgMapLog" runat="server"
ImageUrl="~/Images/mon_imagemap.jpg"
onclick="imgMapLog_Click">
<asp:RectangleHotSpot AlternateText="Facebook"
Bottom="62"
HotSpotMode="Navigate" Left="14"
NavigateUrl="http://www.facebook.com"
Right="152" Target="_blank" Top="11" />

35
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<asp:RectangleHotSpot AlternateText="Twitter"
Bottom="61"
HotSpotMode="Navigate" Left="156"
NavigateUrl="http://www.twitter.com"
Right="306" Target="_self" Top="11" />

<asp:CircleHotSpot AlternateText="WordPress"
HotSpotMode="PostBack"
PostBackValue="WordPress" Radius="41" X="50" Y="118"
/>

<asp:CircleHotSpot AlternateText="BMW"
HotSpotMode="PostBack"
PostBackValue="BMW" Radius="41" X="155" Y="121" />

<asp:CircleHotSpot AlternateText="Windows"
HotSpotMode="PostBack"
PostBackValue="Windows" Radius="44" X="266" Y="122"
/>

<asp:PolygonHotSpot AlternateText="Star"
HotSpotMode="PostBack"
PostBackValue="Star" Coordinates="108,217, 141,210,
157,181, 173,210,
207,217, 184,242, 188,276, 158,261, 127,275, 131,243"
/>

</asp:ImageMap>
<br /> <br />
<asp:Label ID="lblPostBackValue" BackColor="#FFFFCC"
BorderColor="Black"
BorderStyle="Solid" BorderWidth="1px" runat="server"
Width="322px"></asp:Label>

</div>
</form>

Le contrôle ImageMap supporte l'événement Click qui permet de capturer les cliques
de l'utilisateur sur les différentes zones HotSpot. Il reçoit comme argument un objet de
type ImageMapEventArgs (ImageMapEventArgs e), cet objet dispose d'une propriété
appelée PostBackValue (e.PostBackValue) que vous pouvez utiliser dans le code côté
serveur lors de la publication.

Le code suivant illustre le gestionnaire de l'événement Click du contrôle ImageMap :

protected void imgMapLog_Click(object sender, ImageMapEventArgs


e)
{
lblPostBackValue.Text = e.PostBackValue;
}

36
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercice 3 : Autre façon d'utiliser le contrôle ImageMap


L'objectif de cet exercice est d'utiliser le contrôle ImageMap mapMenu pour modifier la
casse du texte d'un contrôle TextBox txtText multi-lignes selon la page Web suivante :

Figure 20 : Résultat attendu


L'image utilisée dans cet exercice est la suivante :

Figure 21 : txtImage.png

Voici le code ASPX de la page :


<form id="form1" runat="server">
<div>
<h2 align="left" style=" color:Blue" >
&nbsp;&nbsp;&nbsp;&nbsp; Modifier la casse d'une ListBox</h2>
<asp:ImageMap
id="mapMenu"
ImageUrl="~/Images/txtImage.png"

37
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

HotSpotMode="PostBack"
Runat="server" OnClick="mapMenu_Click">
<asp:RectangleHotSpot
PostBackValue="ToMajuscule"
Left="14"
Top="14"
Right="135"
Bottom="74"
AlternateText="Majuscule" />
<asp:RectangleHotSpot
PostBackValue="ToMinuscule"
Left="14"
Top="85"
Right="135"
Bottom="144"
AlternateText="Minuscule" />
<asp:RectangleHotSpot
PostBackValue="ToErase"
Left="14"
Top="168"
Right="135"
Bottom="219"
AlternateText="Effacer" />
</asp:ImageMap>
<br />
<br />

<asp:TextBox
id="txtText"
TextMode="MultiLine"
Columns="40"
Rows="5"
Runat="server"

style="float: none; left: 166px; position:


absolute; height: 203px; width: 344px; top: 78px"
BackColor="#FFFF66" />

</div>
</form>

Le code C# associé à l'événement Click de l'ImageMap est le suivant :

protected void mapMenu_Click(object sender, ImageMapEventArgs e)


{
switch (e.PostBackValue)
{
case "ToMajuscule":
txtText.Text = txtText.Text.ToUpper();
break;
case "ToMinuscule":
txtText.Text = txtText.Text.ToLower();
break;
case "ToErase":
txtText.Text = String.Empty;
break;

38
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

}
}

Exercice 4 : Le contrôle AdRotator


L'objectif de cet exercice est d'utiliser est d'utiliser dans la première partie un contrôle
Image imgRandom pour afficher une image d'une façon aléatoire parmi les trois
images :

imgAspnet1.png imgAspnet2.png imgAspnet3.png

A chaque chargement de l'événement Load de la page, l'image change on utilisant un


objet Random qui permet de générer un nombre aléatoire inférieur à une valeur
maximale (ici 3).
Une autre façon consiste à utiliser un contrôle AdRotator adRotatorBanniere pour
afficher six images d'une façon aléatoire pour constituer une bannière publicitaire:

imgAdRotator1.jpg imgAdRotator2.jpg imgAdRotator3.jpg

imgAdRotator4.jpg imgAdRotator5.jpg imgAdRotator6.jpg

Voici le résultat attendu :

39
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Figure 22 : Résultat attendu

Le code C# utilisé pour générer l'image imgRandom est le suivant :

protected void Page_Load(object sender, EventArgs e)


{
Random rnd = new Random();
// rnd.Next(3) retourne un nombre aléatoire non négatif
inférieur à 3
switch (rnd.Next(3))
{
case 0:
imgRandom.ImageUrl = "Images/imgAspnet1.png";
imgRandom.AlternateText = "Image 1";
break;
case 1:
imgRandom.ImageUrl = "Images/imgAspnet2.png";
imgRandom.AlternateText = "Image 2";
break;
case 2:
imgRandom.ImageUrl = "Images/imgAspnet3.png";
imgRandom.AlternateText = "Image 3";
break;
}
}

Le contrôle AdRotator adRotatorBanniere utilise un fichier XML MyAds.xml, la

40
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

propriété AdvertisementFile désigne le chemin du fichier XML :

<asp:AdRotator ID="adRotatorBanniere" runat="server"


AdvertisementFile="~/MyAds.xml" >
</asp:AdRotator >

Ci-dessous la structure du fichier MyAd.xml :

<?xml version="1.0" encoding="utf-8" ?>


<Advertisements >
<Ad>
<ImageUrl>Images/imgAdRotator1.jpg</ImageUrl>
<NavigateUrl>http://www.google.fr/</NavigateUrl>
<AlternateText>Visiter Google!</AlternateText>
<Impressions>50</Impressions>
<Keyword>Moteur de recherche</Keyword>
</Ad>
<Ad>
<ImageUrl>Images/imgAdRotator2.jpg</ImageUrl>
<NavigateUrl>http://www.facebook.com/</NavigateUrl>
<AlternateText>Visiter Facebook!</AlternateText>
<Impressions>50</Impressions>
<Keyword>Partage et chat</Keyword>
</Ad>
<Ad>
<ImageUrl>Images/imgAdRotator3.jpg</ImageUrl>
<NavigateUrl>http://twitter.com/</NavigateUrl>
<AlternateText>Visiter Twitter!</AlternateText>
<Impressions>50</Impressions>
<Keyword>Partage et chat</Keyword>
</Ad>
<Ad>
<ImageUrl>Images/imgAdRotator4.jpg</ImageUrl>
<NavigateUrl>http://fr.yahoo.com/</NavigateUrl>
<AlternateText>Visiter Yahoo!</AlternateText>
<Impressions>50</Impressions>
<Keyword>Messagerie Yahoo</Keyword>
</Ad>
<Ad>
<ImageUrl>Images/imgAdRotator5.jpg</ImageUrl>
<NavigateUrl>http://gmail.com/</NavigateUrl>
<AlternateText>Visiter gmail!</AlternateText>
<Impressions>50</Impressions>
<Keyword>Messagerie gmail</Keyword>
</Ad>
<Ad>
<ImageUrl>Images/imgAdRotator6.jpg</ImageUrl>
<NavigateUrl>http://hotmail.fr/</NavigateUrl>
<AlternateText>Visiter Hotmail!</AlternateText>
<Impressions>50</Impressions>
<Keyword>Messagerie Hotmail</Keyword>
</Ad>

</Advertisements>

41
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 5
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A005

Activité Utiliser les contrôles serveur

Durée 2H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Manipuler des contrôles de validation.
Détails sur les objectifs
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

42
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Les contrôles de validation
l’objectif de cet exercice est de créer le formulaire Web d’inscription suivant :

Figure 23 : Formulaire d'inscription

Le champ nom est obligatoir :

<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="txtNom" Display="Dynamic"
ErrorMessage="le champ nom est obligatoir
!">*</asp:RequiredFieldValidator>

Le champ prénom est obligatoir :

<asp:RequiredFieldValidator ID="RequiredFieldValidator2"
runat="server"
ControlToValidate="txtPrenom" ErrorMessage="le
champ prénom est obligatoir !">*</asp:RequiredFieldValidator>

Validation du champ ID : doit être un multiple de 5


Deux méthodes possibles :
 Validation côté client : utilisation d’un script JavaScript :

<head id="Head1" runat="server">


<title>Page sans titre</title>
<script type="text/javascript">
function IDValidationClient(source, args) {
43
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

args.IsValid= (args.Value %5 == 0)
}
</script>
</head>

<asp:CustomValidator ID="CustomValidator1" runat="server"


ErrorMessage="ID doit être un multiple de 5 !"
ControlToValidate="txtID"
Display="Dynamic"
ClientValidationFunction="IDValidationClient">!</asp:CustomValida
tor>

 Validation côté Server : création de la fonction de validation en code behind :

protected void IDValidationServer(object sender,


ServerValidateEventArgs args)
{
try
{
args.IsValid = (int.Parse(args.Value) % 5 == 0);
}
catch
{

args.IsValid = false;
}
}

<asp:CustomValidator ID="CustomValidator1" runat="server"


ErrorMessage="ID doit être un multiple de 5 !"
ControlToValidate="txtID"
Display="Dynamic" onservervalidate="IDValidationServer"
>!</asp:CustomValidator>

Validation du champ jour de : la valeur doit être comprise ente 26/03/2012 et


31/03/2012

<asp:RangeValidator ID="RangeValidator1" runat="server"


ControlToValidate="txtJourDe" Display="Dynamic"
ErrorMessage="le jour n'est pas dans l'intervalle valide !"
MaximumValue="31/03/2012" MinimumValue="26/03/2012"
Type="Date">*</asp:RangeValidator>

Validation du champ âge : doit être supérieur ou égal = 18 ans

<asp:CompareValidator ID="CompareValidator1" runat="server"


ControlToValidate="txtAge" Display="Dynamic"
ErrorMessage="Vous devez avoir au moins 18 ans !"
Operator="GreaterThanEqual"
Type="Integer" ValueToCompare="18">*</asp:CompareValidator>

Validation du champ date de naissance : la date doit être au format jj/mm/aaaa

<asp:RegularExpressionValidator ID="RegularExpressionValidator2"
runat="server" ControlToValidate="txtDateNaissance"
ErrorMessage="Date de naissance invalide !"
ValidationExpression="^(((0[1-
9]|[12]\d|3[01])\/(0[13578]|1[02])\/((1[6-

44
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

9]|[2-9]\d)\d{2}))|((0[1-
9]|[12]\d|30)\/(0[13456789]|1[012])\/((1[6-9]|[2-
9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((1[6-9]|[2-
9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-
9]\d)(0[48]|[2468][048]|[13579][26])|
((16|[2468][048]|[3579][26])00))))$">!</asp:RegularExpressionVali
dator>

Validation du champ Email :

<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
runat="server" ControlToValidate="txtEmail"
Display="Dynamic"
ErrorMessage="Le champ email n'est pas valide !"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-
.]\w+)*">!</asp:RegularExpressionValidator>

Validation du champ mot de passe : vérifier la correspondance entre le mot de passe


(txtMotPasse) et sa confirmation (txtRetaperMotPasse)

<asp:CompareValidator ID="CompareValidator2" runat="server"


ControlToCompare="txtMotPasse"
ControlToValidate="txtRetaperMotPasse"
Display="Dynamic" ErrorMessage="Les mots de passe ne
correspondent pas">!</asp:CompareValidator>

Configuration des choix de validation :


Cette page fournit aussi des quatre cases à cocher qui vous permettent de tester le
comportement des validateurs avec différentes options. Lorsqu’une case à cocher est
sélectionnée, elle entraîne une publication, et met à jour les nouvelles options, comme
indiqué dans le code suivant :

protected void Options_Changed(object sender, EventArgs args)


{
// Examiner tous les validateurs
foreach (BaseValidator validateur in Page.Validators)
{
//Activer ou désactiver les validateurs selon la
valeur de la case à
//cocher
validateur.Enabled = chkActiverValidateurs.Checked;
//Activer ou désactiver la validation côté clein
selon la valeur de la
//case à cocher
validateur.EnableClientScript =
chkActiverValidationClient.Checked;

// Configuration du résumé des erreurs


ValidationSummary1.ShowSummary =
chkAfficherResume.Checked;
ValidationSummary1.ShowMessageBox =
chkAfficherBoiteDialogue.Checked;
}
}

45
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 6
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A006

Activité Utiliser les contrôles serveur

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Utiliser le contrôle Panel et PlaceHolder.
Détails sur les objectifs  Utiliser le contrôle SiteMapPath.
visés par l’activité  Utiliser les contrôles Menu et TreeView.
 Utiliser le contrôle Calendar.

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

46
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : le contrôle Panel et PlaceHolder
l’objectif de cet exercice est de créer une page Web contenant dans un premier temps
un contrôle Panel pnl contenant un contrôle Label Label1 et un contrôle Bouton
Button1. Un autre bouton btnPanel situé en dehors du panneau pnl permet d’en
surveiller la visibilité :

Figure 24 : Le contrôle Panel


Voici la description de la page aspx pour le contrôle Panel :

<asp:Button ID="btnPanel" runat="server" Text="Cacher Panel"


onclick="btnPanel_Click" />

<asp:Panel ID="pnl" BackColor="Gray" BorderColor="Black"


BorderWidth="1"
runat="server" Height="104px" HorizontalAlign="Center">
<asp:Label ID="Label1" runat="server"
Font-Bold="True"> Coucou !</asp:Label>
<br /><br />
<asp:Button ID="Button1" runat="server" Text="Bouton dans le
Panel" />
</asp:Panel>

Le code de traitement du clic sur le bouton "Cacher Panel" ou "Montrer Panel" (il s'agit
du même bouton, dont le texte est modifié selon les circonstances) est le suivant :

protected void btnPanel_Click(object sender, EventArgs e)


{
// Rend visible ou cache le Panel
pnl.Visible = !pnl.Visible;
btnPanel.Text=(pnl.Visible?"Cacher Panel":"Montrer
Panel");
}

La deuxième partie de l'exercice comprend un contrôle PlaceHolder ph qui n'est jamais


visible par l'utilisateur. Quand on clique sur le bouton Ajouter btnAjouter, un nouveau
contrôle Literal est créé pour afficher un message au format HTML et aussi un autre
contrôle TextBox est ajouté au contrôle ph :

47
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Figure 25 : Contrôle PlaceHolder


La description du contrôle PlaceHolder ph dans la page aspx est la suivante :

<asp:PlaceHolder ID="ph" runat="server"></asp:PlaceHolder>

Le code du bouton Ajouter est le suivant :

protected void btnAjouter_Click1(object sender, EventArgs e)


{
Literal msg = new Literal();
msg.Text = "<b> Voici un contrôle TextBox : </b>";

ph.Controls.Add(msg);
ph.Controls.Add(new TextBox());
}

Exercice 2 : Le contrôles SiteMapPath, Menu et TreeView


l’objectif de cet exercice est d'utiliser le contrôle SiteMapPath pour afficher l'historique
de navigation dans un site Web en configurant un plan de site.

Création des pages de navigation :


Pour cela commencer à créer un site web qui contient 8 pages d'exemple : Home.aspx,
Products.aspx, Hardware.aspx, Software.aspx, Services.aspx, Training.aspx,
Consulting.aspx et Support.aspx.
Sur la page Home.aspx, tapez Home, puis mettez-la en forme en Heading 1. Répétez la
même procédure pour les autres pages et utilisez le nom de chaque page comme titre
pour reconnaître chaque page lorsqu'elle s'affiche dans le navigateur.

Création d'un plan de site :


Pour utiliser la navigation de site, vous avez besoin de décrire la disposition des pages
de votre site. La méthode par défaut consiste à créer un fichier xml qui contient la
hiérarchie du site, y compris les titres de page et les URL.
Pour cela ajouter un élément Plan de site Web.sitemap :

48
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Figure 26 : Ajout du fichier Plan de site Web.sitemap


La structure du fichier Web.sitemap reflète la structure de votre site. Chaque page est
représentée comme un élément siteMapNode dans le plan de site. Le nœud supérieur
représente la page d'accueil, et les nœuds enfants représentent des pages qui sont plus
profondes dans le site.
Remarque : Le fichier doit être nommé Web.sitemap et doit apparaître à la racine du
site Web.

Voici la structure du fichier Web.sitemap :

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-
1.0" >
<siteMapNode title="Home" description="Home" url="~/home.aspx"
>

<siteMapNode title="Products" description="Our products"


url="~/Products.aspx">
<siteMapNode title="Hardware"
description="Hardware we offer"
url="~/Hardware.aspx" />
<siteMapNode title="Software"
description="Software for sale"
url="~/Software.aspx" />
</siteMapNode>

<siteMapNode title="Services" description="Services we offer"


url="~/Services.aspx">
<siteMapNode title="Training" description="Training"
url="~/Training.aspx" />
<siteMapNode title="Consulting" description="Consulting"
url="~/Consulting.aspx" />
<siteMapNode title="Support" description="Support"
url="~/Support.aspx" />
</siteMapNode>
</siteMapNode>

49
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</siteMap>

Le fichier Web.sitemap contient un jeu d'éléments siteMapNode qui sont imbriqués sur
trois niveaux. La structure de chaque élément est identique. La seule différence entre
elles est leur emplacement dans la hiérarchie XML.

La propriété URL désigne l'emplacement de chaque page sur le site Web, dans cet
exercice se sont des URL relatives à la racine de l'application.

Création d'un menu de navigation à l'aide du contrôle TreeView :


Maintenant que vous avez un plan de site et vos pages, vous pouvez ajouter la
navigation à votre site. Vous utiliserez le contrôle TreeView pour agir comme un menu
de navigation réductible.

Pour ajouter un menu de navigation de style arborescent :


1. Ouvrez la page Home.aspx.
2. À partir du groupe Données de la Boîte à outils, faites glisser un contrôle
SiteMapDataSource sur la page. Dans sa configuration par défaut, le contrôle
SiteMapDataSource récupère ses informations du fichier Web.sitemap
3. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle
TreeView sur la page.
4. Dans le menu Tâches TreeView, dans la zone Choisir la source de données,
cliquez sur SiteMapDataSource1.

Voici un aperçu de code aspx de la page Home.aspx :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Home</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>La page Home</h1>
<br />
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server" />
<br />
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource1">
</asp:TreeView>
</div>
</form>
</body>
</html>

Ajoutez les mêmes contrôles SiteMapDataSource et TreeView à chaque page de


l'application pour afficher un menu de navigation dans chacune d'elle.

Affichage de l'historique de navigation à l'aide du contrôle SiteMapPath :


Pour ajouter la navigation sur chaque page qui affiche son emplacement dans la
hiérarchie, ASP.NET fournit le contrôle SiteMapPath qui peut implémenter
automatiquement la navigation entre les pages.

50
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Pour cela glisser en haut de chaque page un contrôle SiteMapPath qui affiche la
position de la page actuelle dans la hiérarchie de page. Par défaut, le contrôle
SiteMapPath représente la hiérarchie créée dans le fichier Web.sitemap.

Figure 27 : Page Consulting.aspx


Le code aspx de la page Consulting.aspx est le suivant :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Consulting</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
<h1>La page Consulting</h1>
<br />
<asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server" />
<br />
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource1">
</asp:TreeView>
</div>
</form>
</body>
</html>

Création d'un menu de navigation à l'aide du contrôle Menu :


Vous pouvez non seulement créer un menu de navigation en utilisant le contrôle

51
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

TreeView, mais vous pouvez également utiliser le contrôle Menu pour afficher un menu
de navigation qui peut être développé permettant aux utilisateurs de consulter un seul
niveau de nœuds à la fois.
Pour ajouter un menu de navigation de style menu:

1. Ouvrez la page Products.aspx et basculez en mode Design.


2. Supprimer le contrôle TreeView.
3. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle
Menu sur la page.
4. Dans le menu Tâches Menu, dans la zone Choisir la source de données,
sélectionner SiteMapDataSource1
5. Pour afficher le contrôle Menu sur les trois niveaux attribuer la valeur 3 à la
propriété StaticDisplayLevels.

Combinaison de la navigation sur le site et des pages maîtres


Dans les pages que vous avez créées jusqu'ici, vous avez ajouté individuellement des
contrôles de navigation de site à chaque page. Cette opération n'est pas
particulièrement complexe, car vous n'avez pas à configurer différemment les contrôles
pour chaque page. Toutefois, elle peut s'ajouter aux coûts de maintenance de votre site.
Par exemple, pour changer l'emplacement du contrôle SiteMapPath sur les pages de
votre site, vous devriez modifier chaque page individuellement.
En utilisant des contrôles de navigation de site en combinaison avec des pages maîtres,
vous pouvez créer une disposition qui contient les contrôles de navigation dans un seul
emplacement.

Pour créer la page maître pour la navigation :


1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site
Web, puis cliquez sur Ajouter un nouvel élément.
2. Dans la boîte de dialogue Ajouter un nouvel élément :
a) Sous Modèles Visual Studio installés, cliquez sur Page maître.
b) Dans la zone Nom, tapez Navigation.master, puis cliquez sur Ajouter.
3. Basculez en mode Design.
La page maître apparaît avec un contrôle ContentPlaceHolder par défaut.

Pour ajouter des contrôles de navigation à la page maître :


1. Insérer une ligne vide en avant-plan du contrôle ContentPlaceHolder.
2. A partir du groupe Données de la Boîte à outils, faites glisser un contrôle
SiteMapDataSource sur la page maître et positionnez-le au-dessus du contrôle
ContentPlaceHolder.

Remarque : Ne positionnez pas le contrôle SiteMapDataSource sur le contrôle


ContentPlaceHolder.

3. Par défaut, le contrôle SiteMapDataSource utilisera le fichier Web.sitemap


4. Insérer une ligne vide sous le contrôle SiteMapDataSource.
5. Dans le menu Tableau, cliquez sur Insérer un tableau, puis insérez un tableau à
une ligne et deux colonnes avec une largeur de 100 %.
6. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle
TreeView sur la cellule de gauche du tableau.
7. Dans le menu Tâches TreeView, dans la zone Choisir la source de données,

52
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

cliquez sur SiteMapDataSource1.


8. À partir du groupe Navigation de la Boîte à outils, faites glisser un contrôle
SiteMapPath sur la cellule de droite du tableau.
9. Dans la cellule de droite, cliquez dans l'espace vide, puis appuyez sur
MAJ+ENTRÉE pour créer une ligne.
10. Faites glisser le contrôle ContentPlaceholder sur la cellule de droite du tableau
et positionnez-le sous le contrôle SiteMapPath .

Lorsque vous utilisez une page maître, vous créez les pages dans votre site comme des
pages de contenu. Les pages de contenu utilisent des contrôles Content pour définir le
texte et les contrôles qui sont affichés dans le contrôle ContentPlaceholder de la page
maître. Vous devrez par conséquent, recréer les pages Home, Products, Hardware …
comme des pages de contenu.

11. Pour cela supprimer toutes les pages, et recréer les en spécifiant pour chaque
page la page master Navigation.master

Figure 28 : Sélection de la page maître

53
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercice 4 : le contrôle Calendar


L'objectif de cet exercice est de réaliser l'interface Web suivante :

Figure 29 : Résultat attendu


Pour cela ajoutez un contrôle DropDownList drpMatch et un contrôle Calendar calDate
sur votre page. Ajouter le code suivant pour remplir le DropDownList drpMatch :

protected void Page_Load(object sender, EventArgs e)


{
if (!this.IsPostBack)
{
drpMatch.Items.Add("");
drpMatch.Items.Add("OM-Nantes");
drpMatch.Items.Add("Monaco-OM");
drpMatch.Items.Add("OM-Lyon");
drpMatch.Items.Add("Rennes-OM");
drpMatch.Items.Add("OM-Auxerre");
calDate.Visible = false;
}
}

Modifier la propriété AutoPostBack à True du contrôle DropDownList et ajouter le code


suivant :

protected void drpMatch_SelectedIndexChanged(object sender,


EventArgs e)
{
calDate.Visible = true;
switch (drpMatch.SelectedIndex)
{
54
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

case 1:
calDate.SelectedDate = new DateTime(2012, 03, 15);
calDate.VisibleDate = calDate.SelectedDate;
break;
case 2:
calDate.SelectedDate = new DateTime(2012, 05, 10);
calDate.VisibleDate = calDate.SelectedDate;
break;
case 3:
calDate.SelectedDate = new DateTime(2012, 07, 02);
calDate.VisibleDate = calDate.SelectedDate;
break;
case 4:
calDate.SelectedDate = new DateTime(2012, 09, 01);
calDate.VisibleDate = calDate.SelectedDate;
break;
case 5:
calDate.SelectedDate = new DateTime(2012, 12, 27);
calDate.VisibleDate = calDate.SelectedDate;
break;
default :
calDate.Visible = false;
break;

}
}

55
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 7
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A007

Utiliser les contrôles serveur


Activité

Durée 1H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Crée un contrôle utilisateur Web
Détails sur les objectifs  Utiliser le contrôle utilisateur Web
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

56
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Création d'un contrôle Utilisateur web
1. A l’aide de Visual Studio 2010, créer un nouveau site Web ASP.NET vide
contenant un formulaire Web Default1.aspx.
2. Ajouter un nouvel élément contrôle Utilisateur Web : MenuCtrl.ascx.

3. Sur ce contrôle faire glisser le contrôle « Table »


4. Dans le code behind, implémenter les deux méthodes suivantes pour le contrôle
Web Utilisateur :
private void AddMenuItem(string linkName,string linkURL)
{
TableRow menuRow= new TableRow() ;
Table1.Rows.Add(menuRow);
TableCell menuCell= new TableCell();
BuildLink(menuCell, linkName, linkURL);
menuRow.Cells.Add(menuCell);
}
private void BuildLink(TableCell menuCell, string linkCaption,string
linkHRef)
{
HyperLink menuLink = new HyperLink();
menuLink.Text=linkCaption;
menuLink.NavigateUrl=linkHRef;
menuCell.Controls.Add(menuLink);
}

5. Dans l’évènement Page_Load, remplir dynamiquement le contrôle :


protected void Page_Load(object sender, EventArgs e)
{
AddMenuItem("MSN", "http://www.msn.fr");
AddMenuItem("Microsoft", "http://www.microsoft.com");
AddMenuItem("MSDN", "http://msdn.microsoft.com/");

57
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

6. Implémenter une propriété pour changer la couleur du contrôle Web utilisateur :


public Color BackGroundColor
{
get {
return Table1.BackColor;
}
set {
Table1.BackColor=value;
}
}

7. Enregistrer et compiler

Exercices 2 : Utilisation d'un contrôle Utilisateur web


1. Ouvrir la page « Default.aspx »
2. Faire glisser le contrôle Web Utilisateur créé depuis l’explorateur de solutions
vers la page
3. Glisser aussi un bouton

4. Double-cliquer sur le bouton et ajouter le code :

protected void Button1_Click(object sender, EventArgs e)


{
MenuCtrl1.BackGroundColor = Color.Azure ;
}

5. Compiler et naviguer sur la page Default.aspx

58
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 8
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A008

Activité
Gestion de l'état d'une application

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Passage par URL
Détails sur les objectifs  Utiliser les variables de session.
visés par l’activité  Utiliser les variables d'application
 Utiliser les cookies

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

59
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Passage par URL
8. A l’aide de Visual Studio 2010, créer un nouveau site Web ASP.NET vide
contenant deux formulaires Web : Default1.aspx et Default2.aspx.

On veut utiliser le passage par URL dans la page Default1.aspx, pour afficher le nom saisi
dans le contrôle TextBox txtNom.

9. Pour cela réaliser l'interface suivante contenant un contrôle TextBox txtNom et


un bouton btnAffiche :

10. Double-cliquer sur « btnAffiche » et ajouter le code suivant :

protected void btnAffiche_Click(object sender, EventArgs e)


{
Response.Redirect("Default2.aspx?Nom=" +
Server.UrlEncode(txtNom.Text));

}
11. Dans la page Default2.aspx récupérer le nom dans un contrôle Label lblNom on
tapant le code suivant :

public partial class Default2 : System.Web.UI.Page


{
protected void Page_Load(object sender, EventArgs e)
{
lblNom.Text = Request.QueryString["Nom"];
}
}

60
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercices 2 : Les Cookies

L'exercice 2 reprend l'exercice 1, mais on utilisant cette fois les cookies :

protected void btnAffiche_Click(object sender, EventArgs e)


{
Response.Cookies["MonCookie"].Value = txtNom.Text ;
Response.Cookies["MonCookie"].Expires = new
DateTime(2012, 03, 24);
Response.Redirect("Defalut2.aspx");
}

Pour récupérer la valeur du cookie en écrit :

public partial class Default2 : System.Web.UI.Page


{
protected void Page_Load(object sender, EventArgs e)
{
lblNom.Text = Request.Cookies["MonCookie"].Value ;
}
}

61
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercices 3 : Les variables de Session


1. A l’aide de Visual Studio 2010, créer un nouveau site Web ASP.NET vide en
Visual c# : http://localhost/EtatApplication

2. Ajouter un nouveau formulaire Web : Default.aspx


3. Ajouter deux zones de texte (« TextBox1 » et « TextBox2 ») et deux boutons
(« Button1 » et Button2 ») :

4. Double-cliquer sur « Button1 » et ajouter le code suivant :

protected void Button1_Click(object sender, EventArgs e)


{
Session["TestVariable"] = TextBox1.Text;
}
5. Double-cliquer sur « Button2 » et ajouter le code suivant :

protected void Button2_Click(object sender, EventArgs e)


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

6. Naviguer sur la page


7. Entrer un texte dans le premier contrôle « TextBox1 » et cliquer sur le bouton
correspondant
8. Cliquer maintenant sur le deuxième bouton

62
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercices 4 : Les variables d'application


L'exercice 4 reprend l'exercice 3, mais on utilisant cette fois les variables d'application :
1. Double-cliquer sur « Button1 » et ajouter le code suivant :

protected void Button1_Click(object sender, EventArgs e)


{
Application.Lock();
Application["TestVariable"] = TextBox1.Text;
Application.UnLock();

}
2. Double-cliquer sur « Button2 » et ajouter le code suivant :

protected void Button2_Click(object sender, EventArgs e)


{
TextBox2.Text = Application["TestVariable"].ToString();
}

3. Naviguer sur la page


4. Entrer un texte dans le premier contrôle « TextBox1 » et cliquer sur le bouton
correspondant
5. Cliquer maintenant sur le deuxième bouton

Exercices 5 : Session SQLServer


L'exercice 5 reprend l'exercice 3, mais on utilisant cette fois la session SQLServer :
1. Recommencer les étapes de l'exercice 3 de 1 jusqu'à 5.
2. Lancer SQL SERVER 2008 (SQL SERVER Management Studio).
3. Se connecter au serveur local avec le nom « SA », et mot de passe
correspondant, dans notre cas il s'agit « p@ssw0rdsa ».
4. Dans le menu « Fichier/Ouvrir/Fichier » ouvrir le fichier:
"C:\Windows\Microsoft.NET\Framework64\v4.0.30319\InstallSqlState.sql"
Remarque : pour une version 32 bits utiliser le fichier
"C:\Windows\Microsoft.NET\Framework\v4.0.30319\InstallSqlState.sql"
et pour désinstaller utiliser le fichier UninstallSqlState.sql
5. Exécuter le contenu SQL de ce fichier
6. Dans Visual Studio Modifier le fichier Web.config comme suit afin de préciser
que l’état de l’application sera stocké au niveau du serveur SQL local, puis
enregistrer :
<sessionState mode="SQLServer" sqlConnectionString="Data
source=localhost;user id=sa;password=p@ssw0rdsa"></sessionState>
7. Depuis SQL SERVER Management Studio, exécuter la requête SQL suivante sur la
base tempdb : select * from ASPStateTempSessions;

63
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

8. Tester depuis le navigateur :

9. Exécuter à nouveau la requête SQL : select * from


ASPStateTempSessions;

10. Observer que la variable de Session est stockée dans la table


« ASPStateTempSessions » de la base « tempdb ».
Remarque : vous pouvez ausser utiliser Session StateServer sur le fichier web.config :
<sessionState mode="StateServer" sqlConnectionString="Data
source=localhost;user id=sa;password=p@ssw0rdsa"></sessionState>

64
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 9
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A009

Utiliser le fichier Global.asax


Activité

Durée 4H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Utiliser les événements d'application.
Détails sur les objectifs  Utiliser les événements de session.
visés par l’activité  Créer les fichiers log.

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

65
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Application_Start et Application_End

1. A l’aide de Visual Studio 2010, créer un nouveau site Web ASP.NET vide et
ajouter un nouveau formulaire Web : Default.aspx.
2. Ouvrez le fichier global.asax et modifiez le code comme suit :
void Application_Start(object sender, EventArgs e)
{
System.IO.TextWriter fichier;
fichier = System.IO.File.AppendText("c:\\globalasax.txt");
fichier.WriteLine(String.Format("L'application Web à démarré à
{0}",DateTime.Now ));
fichier.Close();

void Application_End(object sender, EventArgs e)


{
System.IO.TextWriter fichier;
fichier = System.IO.File.AppendText("c:\\globalasax.txt");
fichier.WriteLine(String.Format("L'application Web à s'est arrétée
à {0}", DateTime.Now));
fichier.Close();

Afin que la création et modification du fichier de log soit possible, il importe d’ajouter
les permissions de lecture/écriture au compte « Service réseau » (pour Windows 2008
Serveur, ou le compte « ASPNET » pour Windows XP) sur le répertoire contenant le site
et sur le répertoire destiné à la création du fichier log.

3. Recompiler le code. Effectuer plusieurs tentatives d’arrêts du serveur IIS et de


démarrage de l'application Web sur le serveur IIS
4. Regarder le fichier « globalasax.txt » :

Exercices 2 : Session_Start et Session_End


5. Ouvrez le fichier global.asax et modifiez le code comme suit :
void Session_Start(object sender, EventArgs e)
{
System.IO.TextWriter fichier;
fichier = System.IO.File.AppendText("c:\\Global\\globalasax.txt");
fichier.WriteLine(String.Format("Nouvelle session {0} créée le :
{1}",Session.SessionID, DateTime.Now));

66
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

fichier.Close();

void Session_End(object sender, EventArgs e)


{
System.IO.TextWriter fichier;
fichier = System.IO.File.AppendText("c:\\Global\\globalasax.txt");
fichier.WriteLine(String.Format("La session {0} a été détruite le
: {1}", Session.SessionID, DateTime.Now));
fichier.Close();

}
6. Compiler le code et naviguer sur la page Default11.aspx :

Exercices 3 : Application_BeginRequest et Application_EndRequest


7. Ouvrez le fichier global.asax et modifiez le code comme suit :
void Application_BeginRequest(object sender, EventArgs e)
{
// Se déclenche au début de chaque demande
Response.Write("<H3>Ce header a été ajouté par l'événement
Application_BeginRequest</H3>");
}

void Application_EndRequest(object sender, EventArgs e)


{
// Se déclenche à la fin de chaque demande
Response.Write("<H3>Ce footer a été ajouté par l'événement
Application_EndRequest</H3>");
}

8. Compiler et naviguer sur la page Default1.aspx :

Constater que ce header et footer sont ajoutés pour toute page de l’application

67
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercices 4 : Application_Error
1. Ajouter une nouvelle page « Default2.Aspx » au projet
2. Modifier le code comme suit afin de générer une exception :

protected void Page_Load(object sender, EventArgs e)


{
throw new DivideByZeroException("Division par zéro");
}
3. Ajouter une nouvelle page « Erreur.aspx » et ajoutez un label « Label1 » :

4. Modifier le fichier « Global.asax » comme suit :


void Application_Error(object sender, EventArgs e)
{
// Code qui s'exécute lorsqu'une erreur non gérée se produit
Server.Transfer("Erreur.aspx",true);
}
5. Compiler et naviguer sur la page « Default2.aspx »

68
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 10
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A010

Activité Accéder aux données avec ADO.NET

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :

Détails sur les objectifs  Utiliser différents contrôles Data Source.


visés par l’activité  Utiliser le mode connecté

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

69
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 :
l’objectif de cet exercice est de créer une page Web qui un objet DataReader pour
afficher sur un contrôle Label lblAuteurs les noms et le nombre total des auteurs de la
table Authors de la base de données Pubs

Figure 30 : Table Authors

Figure 31 : Page des auteurs


Le code C# est le suivant :
protected void Page_Load(object sender, EventArgs e)
{
string ch =
ConfigurationManager.ConnectionStrings["conPubs"].ToString();
SqlConnection conn = new SqlConnection(ch);
conn.Open();
SqlCommand cmd = new SqlCommand("SELECT au_lname FROM
authors", conn);
SqlDataReader dr = cmd.ExecuteReader();

70
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

while (dr.Read())
{
lblAuteurs.Text +=dr["au_lname"].ToString()+ "<br>";
}
dr.Close();
cmd.CommandText = "SELECT COUNT(*) FROM authors";
int nbr = (int) cmd.ExecuteScalar();
lblAuteurs.Text += "<br><b>Total :<b>" + nbr.ToString();
conn.Close();
}

Exercice 2 :
l’objectif de cet exercice est de créer une procédure qui permet de remplir un tableau,
cette procédure prend deux paramètres : un objet DataReader contenant les données à
afficher, et un objet Table (contrôle Table).
Cette méthode examine le lecteur de données et ajoute en conséquence les lignes et les
colonnes dans un tableau. Lors du traitement de la première ligne, une ligne d'en-tête
contenant les noms des colonnes est insérée dans le tableau (la ligne d'en-tête a une
couleur de fond rouge).

Figure 32 : Affichage des auteurs


Le code C# est le suivant :
public partial class Default4 : System.Web.UI.Page
{
SqlDataReader dr;
protected void Page_Load(object sender, EventArgs e)
{
string ch =
ConfigurationManager.ConnectionStrings["conPubs"].ToString();
SqlConnection conn = new SqlConnection(ch);
conn.Open();
SqlCommand cmd = new SqlCommand("SELECT * FROM authors",
conn);
dr = cmd.ExecuteReader();
remplirTab(dr, tbl);
dr.Close();
conn.Close();
}
void remplirTab(SqlDataReader dr, Table tb)
71
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

{
bool premier = true;
tb.Rows.Clear();
while (dr.Read())
{
//Ligne d'en-tête
TableRow tr = new TableRow();
if (premier)
{
premier = false;
for (int i = 0; i < dr.FieldCount; i++)
{
TableHeaderCell head = new TableHeaderCell();
head.Text = dr.GetName(i).ToString();
tr.Cells.Add(head);
}
tr.BackColor = System.Drawing.Color.Red;
tb.Rows.Add(tr);
}
// les autres lignes
tr = new TableRow();
for (int i = 0; i < dr.FieldCount; i++)
{

TableCell cell = new TableCell();


cell.Text = dr[i].ToString();
tr.Cells.Add(cell);

}
tb.Rows.Add(tr);

}
}
}

72
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercice 3 :
l’objectif de cet exercice est de créer une page Web qui récupère les informations de la
table auteurs. Vous pouvez sélectionner un dossier de l'auteur par nom de famille en
utilisant une zone de liste déroulante drpLstAuteurs et afficher les détails dans un
contrôle Label lblDetails :

Figure 33: Informations sur les auteurs


Le code C# est le suivant :
public partial class Default5 : System.Web.UI.Page
{
private string ch =
ConfigurationManager.ConnectionStrings["conPubs"].ToString();
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
RemplirListeAuteur();
}
}
private void RemplirListeAuteur()
{
drpLstAuteurs.Items.Clear();

SqlConnection con = new SqlConnection(ch);


string sql = "SELECT au_lname, au_fname,au_id FROM
Authors";
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataReader dr;
try
{
con.Open();
dr = cmd.ExecuteReader();
while (dr.Read())
{
ListItem item = new ListItem();
item.Text = dr["au_lname"] + "," +
dr["au_fname"];
item.Value = dr["au_id"].ToString();
drpLstAuteurs.Items.Add(item);
}
dr.Close();

73
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

}
catch (Exception ex)
{
lblDetails.Text = "Erreur de lecture de la liste";
lblDetails.Text += ex.Message;
}
finally
{
con.Close();
}

}
protected void drpLstAuteurs_SelectedIndexChanged(object
sender, EventArgs e)
{
string sql = "SELECT * FROM Authors WHERE au_id=@id";
SqlConnection con = new SqlConnection(ch);
SqlCommand cmd = new SqlCommand(sql, con);
cmd.Parameters.AddWithValue("@id",
drpLstAuteurs.SelectedItem.Value);
SqlDataReader dr;

try
{
con.Open();
dr = cmd.ExecuteReader();
dr.Read();
lblDetails.Text ="<b>"+ dr.GetString(0) + ", " +
dr.GetSqlString(1).ToString()+"</b>";
lblDetails.Text += "<br>" + "Téléphone : " +
dr["phone"];
lblDetails.Text += "<br>" + "Adresse : " +
dr["address"];
lblDetails.Text += "<br>" + "Code postal : " +
dr["zip"];
lblDetails.Text += "<br>" + "Ville : " + dr["city"];
lblDetails.Text += "<br>" + "Pays : " + dr["state"];
dr.Close();

}
catch (Exception ex)
{
lblDetails.Text = "Erreur de lecture de la liste";
lblDetails.Text += ex.Message;
}
finally
{
con.Close();
}
}
}

74
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercice 4 :
l’objectif de cet exercice est de créer une page Web qui exécute les opérations de mise à
jour sur la table authors :

Figure 34 : Mise à jour de la table authors


La procédure Remplir RemplirListeAuteur permet de remplir la liste des auteurs au
démarrage de la page Web :
private string ch =
ConfigurationManager.ConnectionStrings["conPubs"].ToString();
protected void Page_Load(object sender, EventArgs e)
{
if(!this.IsPostBack)
{
RemplirListeAuteur();
drpAuteurs.Load += new
EventHandler(drpAuteurs_SelectedIndexChanged);
}
}
Le code C# de la procédure RemplirListeAuteur est le suivant :
private void RemplirListeAuteur()
{
drpAuteurs.Items.Clear();

SqlConnection con = new SqlConnection(ch);


string sql = "SELECT au_lname, au_fname,au_id FROM
Authors";
SqlCommand cmd = new SqlCommand(sql, con);
SqlDataReader dr;
try
75
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

{
con.Open();
dr = cmd.ExecuteReader();
while (dr.Read())
{
ListItem item = new ListItem();
item.Text = dr["au_lname"] + "," +
dr["au_fname"];
item.Value = dr["au_id"].ToString();
drpAuteurs.Items.Add(item);
}
dr.Close();
}
catch (Exception ex)
{
lblErreur.Text = ex.Message;
}
finally
{
con.Close();
}

Le code suivant affiche les informations sur chaque auteur :


protected void drpAuteurs_SelectedIndexChanged(object sender,
EventArgs e)
{
string sql = "SELECT * FROM Authors WHERE au_id=@id";
SqlConnection con = new SqlConnection(ch);
SqlCommand cmd = new SqlCommand(sql, con);
cmd.Parameters.AddWithValue("@id",
drpAuteurs.SelectedItem.Value);
SqlDataReader dr;

try
{
con.Open();
dr = cmd.ExecuteReader();
dr.Read();
txtID.Text = dr["au_id"].ToString();
txtPrenom.Text = dr["au_fname"].ToString();
txtNom.Text = dr["au_lname"].ToString();
txtTelephone.Text = dr["phone"].ToString();
txtAdresse.Text = dr["address"].ToString();
txtCodePostal.Text = dr["zip"].ToString();
txtVille.Text = dr["city"].ToString();
txtPays.Text = dr["state"].ToString();
chkContrat.Checked = (bool)dr["contract"];
dr.Close();

}
catch (Exception ex)
{
lblErreur.Text = ex.Message;
}
finally
{
con.Close();
}

76
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

}
Le bouton Créer nouveau permet d'initialiser les zones de saisie :
protected void btnCreer_Click(object sender, EventArgs e)
{
txtID.Text = "";
txtPrenom.Text = "";
txtNom.Text = "";
txtTelephone.Text = "";
txtAdresse.Text = "";
txtCodePostal.Text = "";
txtVille.Text = "";
txtPays.Text = "";
chkContrat.Checked = false;
txtID.Focus();
}

Pour enregistrer un nouvel auteur on doit tenir en compte les contraintes suivantes :
 L'ID, le nom, le prénom et le code postal sont des champs obligatoires : pour
cela utiliser des contrôles de validation de type RequiredFieldValidator
 L'ID est composé des nombres avec le format ###-##-#### : pour cela utiliser
un contrôle RegularExpressionValidator qui a comme expression de validation
: \d\d\d\-\d\d\-\d\d\d\d
 Le code postal est un champ numérique sur cinq chiffre : pour cela utiliser aussi
un contrôle de validation de type RegularExpressionValidator avec comme
expression de validation : \d\d\d\d\d

Le code suivant permet d'insérer un nouvel auteur dans la table authors :


protected void btnEnregistrer_Click(object sender, EventArgs e)
{
string sql = "INSERT INTO Authors
(au_id,au_fname,au_lname,phone,address,city,state,zip,contract)
";
sql += "VALUES
(@id,@prenom,@nom,@tel,@adr,@ville,@pays,@cp,@contrat)";
SqlConnection con = new SqlConnection(ch);
SqlCommand cmd = new SqlCommand(sql, con);
cmd.Parameters.AddWithValue("@id", txtID.Text);
cmd.Parameters.AddWithValue("@prenom", txtPrenom.Text);
cmd.Parameters.AddWithValue("@nom", txtNom.Text);
cmd.Parameters.AddWithValue("@tel", txtTelephone.Text);
cmd.Parameters.AddWithValue("@adr", txtAdresse.Text);
cmd.Parameters.AddWithValue("@cp", txtCodePostal.Text);
cmd.Parameters.AddWithValue("@ville", txtVille.Text);
cmd.Parameters.AddWithValue("@pays", txtPays.Text);
cmd.Parameters.AddWithValue("@contrat",

Convert.ToInt16(chkContrat.Checked));

int ajout = 0;
try
{
con.Open();
ajout= cmd.ExecuteNonQuery();

}
catch (Exception ex)
{
77
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

lblErreur.Text = ex.Message;
}
finally
{
con.Close();
}
if (ajout > 0)
{
RemplirListeAuteur();
txtID.Text = "";
txtPrenom.Text = "";
txtNom.Text = "";
txtTelephone.Text = "";
txtAdresse.Text = "";
txtCodePostal.Text = "";
txtVille.Text = "";
txtPays.Text = "";
chkContrat.Checked = false;
txtID.Focus();
}
}

La mise à jour est :


protected void btnMiseAJour_Click(object sender, EventArgs e)
{
string sql = "UPDATE Authors SET
au_fname=@prenom,au_lname=@nom,phone=@tel,";
sql +=
"address=@adr,city=@ville,state=@pays,zip=@cp,contract=@contrat
WHERE au_id=@IdOriginal ";
SqlConnection con = new SqlConnection(ch);
SqlCommand cmd = new SqlCommand(sql, con);
cmd.Parameters.AddWithValue("@IdOriginal",
drpAuteurs.SelectedValue);
cmd.Parameters.AddWithValue("@prenom", txtPrenom.Text);
cmd.Parameters.AddWithValue("@nom", txtNom.Text);
cmd.Parameters.AddWithValue("@tel", txtTelephone.Text);
cmd.Parameters.AddWithValue("@adr", txtAdresse.Text);
cmd.Parameters.AddWithValue("@cp", txtCodePostal.Text);
cmd.Parameters.AddWithValue("@ville", txtVille.Text);
cmd.Parameters.AddWithValue("@pays", txtPays.Text);
cmd.Parameters.AddWithValue("@contrat",

Convert.ToInt16(chkContrat.Checked));

int modification = 0;
try
{
con.Open();
modification = cmd.ExecuteNonQuery();

}
catch (Exception ex)
{
lblErreur.Text = ex.Message;
}
finally
{
con.Close();
}

78
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

if (modification > 0)
{
RemplirListeAuteur();

}
}

Et enfin la suppression :
protected void btnSupprimer_Click(object sender, EventArgs e)
{
string sql = "DELETE FROM Authors WHERE au_id=@IdOriginal
";
SqlConnection con = new SqlConnection(ch);
SqlCommand cmd = new SqlCommand(sql, con);
cmd.Parameters.AddWithValue("@IdOriginal",
drpAuteurs.SelectedValue);
int suppression = 0;
try
{
con.Open();
suppression = cmd.ExecuteNonQuery();

}
catch (Exception ex)
{
lblErreur.Text = ex.Message;
}
finally
{
con.Close();
}
if (suppression > 0)
{
RemplirListeAuteur();
txtID.Text = "";
txtPrenom.Text = "";
txtNom.Text = "";
txtTelephone.Text = "";
txtAdresse.Text = "";
txtCodePostal.Text = "";
txtVille.Text = "";
txtPays.Text = "";
chkContrat.Checked = false;
txtID.Focus();
}
}

79
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 11
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A011

Activité Accéder aux données avec ADO.NET

Durée 4H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Utiliser le mode déconnecté
Détails sur les objectifs
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

80
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : utilisation de DataList
1. Créer un nouveau site web avec une page Default.aspx
2. Placer un contrôle DataList sur la page

3. En haut de la page de code behind, ajouter l’espace de nom SqlClient de la


manière suivante :
using System.Data;
using System.Data.SqlClient;

4. Ajouter dans le code de la page une méthode appelée « fillDataList() » qui va lier
la DataList à une base de données. Dans cet exemple, nous utiliserons la table
« authors » de la base de données « pubs » du serveur SQL local.

private void fillDataList()


{
SqlConnection cn= new
SqlConnection("Server=localhost;database=pubs;Integrated
security=true");
string sql="Select * from Authors";
SqlDataAdapter da= new SqlDataAdapter(sql,cn);
DataSet ds = new DataSet();
da.Fill(ds,"Authors");
DataList1.DataSource=ds.Tables["authors"].DefaultView;
DataList1.DataBind();
}

5. Dans l'événement « Page_Load », placer le code permettant d'appeler la


méthode fillDataList la première fois que l'on navigue sur la page :

protected void Page_Load(object sender, EventArgs e)


{
fillDataList();

6. Paramétrer la DataList afin d’afficher les données. Pour cela, dans le code HTML
de la page, ajouter un « ItemTemplate » entre les balises ouvrantes et fermantes
du contrôle DataList comme montré ci-dessous :

<asp:DataList ID="DataList1" runat="server">


<ItemTemplate>
<table bgcolor="#f0f0f0" width="100%">
<tr bgcolor="#000000">
<td colspan="2">
<asp:Label Font-Bold="True" ForeColor="#ffffff"
text='<%# Eval("au_id")%>' Runat="server" ID="Label1"/>

81
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</td>
</tr>
<tr>
<td>Prénom :</td>
<td>
<%# Eval("au_fname")%>
</td>
</tr>
<tr>
<td>Nom :</td>
<td>
<%# Eval("au_lname")%>
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton id="EditButton"
Text="Edit"
CommandName="Edit"
runat="server"/>

</td>
</tr>
</table>

</ItemTemplate>
</asp:DataList>

Un ItemTemplate est un modèle qui est utilisé pour l'affichage de chaque élément de la
liste retournée par la requête SQL. Ce modèle va afficher les données de la manière
suivante :
 Chaque élément de la liste est affiché sous forme de tableau.
 L'identifiant de l'auteur est affiché dans un Label.
 Le nom de l'auteur est rendu en tant que texte.
 Un bouton de lien est ajouté à ce modèle afin de passer en mode "Edition".

7. Pour en terminer avec l'affichage des données, attribuer à la propriété


« RepeatColumns » du contrôle DataList la valeur 4. Cela a pour effet d'afficher
les données sur 4 colonnes.

8. Compiler et afficher la page dans le navigateur :

82
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

9. Afin de pouvoir éditer les données, ajouter au contrôle Datalist un


« EditItemTemplate ». Comme son nom l'indique, l'EditItemTemplate est un
modèle spécifiant l'affichage à mettre en œuvre pour effectuer l'édition des
données. Construire ce modèle de la même manière que l'ItemTemplate créé
dans la partie précédente (à savoir sous forme de tableau). Apporter les
modifications suivantes :
 Le nom et le prénom seront affichés dans une zone de saisie afin de pouvoir les
modifier.
 Deux boutons de lien "Annuler" et "Mettre à jour" sont ajoutés. Ils ont pour but
d'annuler l'édition ou d'appeler une méthode de mise à jour des données saisies
dans la base de données.

<EditItemTemplate>
<table bgcolor="#f0f0f0" width="100%">
<tr bgcolor="#000000">
<td colspan="2">
<asp:Label id="lblId" Font-Bold="True"
ForeColor="#ffffff" text='<%# Eval("au_id")%>' Runat="server" />
</td>
</tr>
<tr>
<td>Prénom :</td>
<td>
<input type="text" id="txtFirst" value='<%#
Eval("au_fname")%>' runat="server" NAME="txtFirst"/>
</td>
</tr>
<tr>
<td>Nom :</td>
<td>
<input type="text" id="txtLast" value='<%#
Eval("au_lname")%>' runat="server" NAME="txtLast"/>
</td>
</tr>
<tr>

83
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<td colspan="2">
<asp:LinkButton CommandName="Update" Text="Mettre à
jour" Runat="server" ID="Button2"/>
<asp:LinkButton CommandName="Cancel" Text="Annuler"
Runat="server" ID="Button3"/>
</td>
</tr>
</table>
</EditItemTemplate>

1. Afin d'afficher en mode édition l'élément choisi, ajouter un gestionnaire


d'événement « EditCommand » pour le contrôle DataList dans le code behind.
2. Spécifier l'élément qui doit être affiché en mode édition à l’aide de la propriété
« EditItemIndex » de la DataList
3. Appeller de nouveau la méthode FillDataList() afin de mettre à jour l'affichage de
la table. Le code est le suivant :

protected void DataList1_EditCommand(object source,


DataListCommandEventArgs e)
{
DataList1.EditItemIndex = e.Item.ItemIndex;
fillDataList();
}

4. Compiler et naviguer vers la page.


5. Cliquer sur un bouton « Edition » afin de voir le changement

6. Dans le code behind, créer une méthode appelée « SaveRecordToDatabase » qui


va mettre à jour la base de données :

private void SaveRecordToDatabase(string first,string last,string id)


{
string sql;
SqlConnection cn= new

84
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

SqlConnection("Server=localhost;database=pubs;Integrated security=true");
sql = "update authors set au_fname='" + first + "', ";
sql = sql + "au_lname='" + last + "' where au_id='" + id + "'";

SqlCommand cmd = new SqlCommand(sql, cn);


cn.Open();
cmd.ExecuteNonQuery();
cn.Close();
}

7. Appeler cette méthode dans le gestionnaire d'événements « UpdateCommand »


du contrôle DataList.
8. Une fois la méthode « SaveRecordToDatabase » appelée, sortir du mode édition
en précisant -1 comme valeur de « EditItemIndex » du contrôle DataList.
9. Appeler la méthode « fillDataList » :

protected void DataList1_UpdateCommand(object source,


DataListCommandEventArgs e)
{

string first=(e.Item.FindControl("txtFirst")).ToString();
string last=(e.Item.FindControl("txtLast")).ToString();
Label id=(Label)(e.Item.FindControl("lblId"));
SaveRecordToDatabase(first,last,id.Text);
DataList1.EditItemIndex =-1;
fillDataList();

10. Tester la mise à jour des données : Modifier le nom ou le prénom d'un auteur et
cliquez sur le bouton « Mettre à jour ». Observer que la modification a été prise
en compte et que la liste affiche maintenant les auteurs avec la valeur saisie.

11. Il ne reste plus qu'à gérer le clic sur le bouton « Annuler ». Pour cela, écrire le
gestionnaire d'événement « CancelCommand » du contrôle DataList.
12. Dans ce gestionnaire, sortir du mode édition en précisant -1 comme valeur de
EditItemIndex du contrôle DataList, puis réafficher la liste :

protected void DataList1_CancelCommand(object source,


DataListCommandEventArgs e)
{
DataList1.EditItemIndex = -1;
fillDataList();
}

Exercices 2 : Contrôle GridView et Appel d’une procédure stockée


1. Ajouter une nouvelle page « GridViewProcedure.aspx »
2. Ajouter sur cette page, sans renommer les contrôles :
 deux contrôles « Label »
 deux « Calendar »
 un contrôle « Button »
3. ajouter aussi un autre « Label » pour le titre

85
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

4. Ajouter un contrôle « GridView » en dessous du bouton :

1. Double-cliquer sur le bouton pour afficher le code behind


2. Ajouter en tout début de la page « DataGridProcedure.aspx.cs » :
using System.Data;
using System.Data.SqlClient;
3. Pour l’évènement « click » du bouton, utiliser le code suivant :

protected void Button1_Click(object sender, EventArgs e)


{
SqlConnection MyConnection;
MyConnection= new
SqlConnection("server=(local);database=northwind;Integrated
security=true");
SqlCommand cmd = new SqlCommand();
cmd.CommandType = CommandType.StoredProcedure;
cmd.CommandText = "Employee Sales by Country";
cmd.Parameters.AddWithValue("@Beginning_Date",
Calendar1.SelectedDate);
cmd.Parameters.AddWithValue("@Ending_Date",
Calendar2.SelectedDate);

cmd.Connection = MyConnection;
MyConnection.Open();
GridView1.EmptyDataText = "No Records Found";
GridView1.DataSource = cmd.ExecuteReader() ;
GridView1.DataBind();

86
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

4. Exécuter pour voir le résultat :

87
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 12
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A012

Activité Accéder aux données avec ADO.NET

Durée 4H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Utiliser l'assistant de connexion
Détails sur les objectifs
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

88
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Création de site

1. Ouvrez Visual Web Studio 2010.


2. Dans le menu Fichier, cliquez sur Nouveausite Web.
3. La boîte de dialogue Nouveau site Web s'affiche.
4. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
5. Dans la zone Emplacement la plus à droite, entrez le nom du dossier dans
lequel vous souhaitez conserver les pages du site Web.
6. Par exemple, tapez le nom du dossier C:\SitesWeb.
7. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
8. Cliquez sur OK.
9. Visual Web Studio crée le dossier et une page nommée Default.aspx.

Exercices 2 : Ajout d'un contrôle GridView pour afficher les données


1. Dans Visual Web Developer, basculez vers le mode Design.
2. À partir du dossier Données de la Boîte à outils, faites glisser un contrôle
GridView sur la page.
3. Si le menu contextuel Tâches GridView ne s'affiche pas, cliquez avec le bouton
droit sur le contrôle GridView, puis cliquez sur Afficher la balise active.
4. Dans le menu Tâches GridView, dans la liste Choisir la source de données,
cliquez sur <Nouvelle source de données>.
La boîte de dialogue Configuration de source de données s'affiche.

5. Cliquez sur Base de données.


Cela spécifie que vous souhaitez obtenir des données à partir d'une base de
données qui prend en charge des instructions SQL.Cela inclut le serveur SQL et
d'autres bases de données compatibles OLEDB.
Dans la zone Spécifiez un ID pour la source de données, le nom d'un contrôle
89
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

de source de données par défaut est affiché ( SqlDataSource1). Vous pouvez


laisser ce nom.
6. Cliquez sur OK.
L'Assistant Configurer la source de données apparaît, en affichant une page sur
laquelle vous pouvez choisir une connexion.

7. Cliquez sur Nouvelle connexion.


8. Dans la boîte de dialogue Choisir la source de données, sous Source de
données, cliquez sur Microsoft SQL Server, puis sur Continuer.
La boîte de dialogue Ajouter une connexion s'affiche.
9. Dans la zone Nom du serveur, entrez le nom du serveur SQL que vous
souhaitez utiliser.

90
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

10. Pour les informations d'identification de connexion, sélectionnez l'option


appropriée pour accéder à la base de données SQL Server (sécurité intégrée ou
ID et mot de passe spécifiques) et si nécessaire, entrez un nom d'utilisateur et
un mot de passe.
11. Click Select or enter a database name, and then enter Northwind.
12. Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion
fonctionne, cliquez sur OK.
L'Assistant Configurer la source de données - <NomSourceDonnées>
apparaît et les informations de connexion sont renseignées.
13. Cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la
chaîne de connexion dans le fichier de configuration.Le stockage de la chaîne de
connexion dans le fichier de configuration présente deux avantages :
 Il est plus sécurisé que le stockage de la chaîne de connexion dans la
91
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

page.
 Vous pouvez réutiliser la même chaîne de connexion dans plusieurs
pages.
14. Veillez à ce que la case à cocher Oui, enregistrer cette connexion en tant que
soit activée, puis cliquez sur Suivant. (Vous pouvez laisser le nom de chaîne de
connexion par défaut NorthwindConnectionString.)
L'Assistant affiche une page dans laquelle vous pouvez spécifier les données à
extraire à partir de la base de données.
15. Sous Spécifiez les colonnes d'une table ou d'une vue, dans la zone Nom,
cliquez sur Customers.
16. Sous Colonnes, activez les cases à cocher CustomerID, CompanyName et City.
L'Assistant affiche l'instruction SQL que vous créez dans une zone en bas de la
page.

Remarque
L'Assistant vous permet de spécifier des critères de sélection (clause WHERE) et d'autres options de requête SQL.P
cette partie de la procédure pas à pas, vous créerez une instruction unique sans option de sélection ou de tri.

17. Cliquez sur Suivant.


18. Cliquez sur Tester la requête pour veiller à extraire les données que vous
souhaitez.
19. Cliquez sur Terminer.
L'Assistant se ferme et vous revenez à la page.L'Assistant a permis d'effectuer
deux tâches :
 L'Assistant a créé et configuré un contrôle SqlDataSource (nommé
SqlDataSource1) qui incorpore la connexion et les informations de
requête que vous avez spécifiées.
 L'Assistant lie le contrôle GridView à SqlDataSource. Par conséquent, le
contrôle GridView affichera des données qui sont retournées par le
contrôle SqlDataSource.

20. Appuyez sur CTRL+F5 pour exécuter la page.


La page s'affiche dans le navigateur.Le contrôle GridView affiche toutes les

92
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

lignes de données dans la table Customers.


21. Fermez le navigateur.

Exercices 3 : Ajout de fonctions de tri et de pagination


1. En mode Design, cliquez avec le bouton droit sur le contrôle GridView, puis
cliquez sur Afficher la balise active.
2. Dans le menu contextuel Tâches GridView, activez la case à cocher Activer le
tri.
Les en-têtes de colonne dans le contrôle GridView sont transformés en liens.
3. Dans le menu Tâches GridView, activez la case à cocher Activer la pagination.
Un pied de page est ajouté au contrôle GridView contenant les liens de numéro
de page.
4. Éventuellement, utilisez Propriétés pour modifier la valeur de la propriété
PageSize de 10 en une plus petite taille de page.
5. Appuyez sur CTRL+F5 pour exécuter la page.
Vous pourrez cliquer sur un en-tête de colonne pour trier le contenu de cette
colonne. S'il y a plus d'enregistrements dans la source de données que la taille
de page du contrôle GridView, vous pourrez utiliser les liens de navigation entre
les pages en bas du contrôle GridView pour changer de pages.
6. Fermez le navigateur.

Fréquemment, vous souhaitez afficher des données sélectionnées uniquement dans la


page. Dans cette partie de la procédure pas à pas, vous modifierez la requête du
contrôle SqlDataSource afin que les utilisateurs puissent sélectionner des
enregistrements de client pour une ville particulière.
En premier lieu, vous devez utiliser un contrôle TextBox pour créer une zone de texte
dans laquelle les utilisateurs peuvent taper le nom d'une ville. Puis, vous modifierez la
requête pour inclure un filtre paramétré (clause WHERE).Dans le cadre de ce processus,
vous créerez un élément de paramètre pour le contrôle SqlDataSource. L'élément de
paramètre établit comment le contrôle SqlDataSource obtiendra la valeur de sa requête
paramétrée, à savoir de la zone de texte.
Lorsque vous avez terminé cette partie de la procédure pas à pas, la page peut
ressembler en mode Design à :

93
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Pour ajouter la zone de texte pour spécifier une ville

7. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle


TextBox et un contrôle Button dans la page.
Le contrôle Button est utilisé uniquement pour publier la page au serveur. Vous
n'aurez pas besoin d'écrire du code pour lui.

8. In Properties, for the TextBox control, set ID to textCity.

9. Si vous souhaitez, tapez Ville ou du texte similaire avant que la zone de texte
n'agisse comme une légende.

10. In Properties for the Button control, set Text to Submit.


Vous pouvez maintenant modifier la requête pour inclure un filtre.
Pour modifier la requête avec un filtre paramétré

11. Cliquez avec le bouton droit sur le contrôle SqlDataSource, puis cliquez sur
Afficher la balise active.

12. Dans le menu Tâches SqlDataSource, cliquez sur Configurer la source de


données.
L'Assistant Configurer la source de données - <NomSourceDonnées> s'affiche.

13. Cliquez sur Suivant.


L'Assistant affiche la commande SQL actuellement configurée pour le contrôle
SqlDataSource.

14. Cliquez sur WHERE.


La page Ajouter une clause WHERE apparaît.

15. Dans la liste Colonne, cliquez sur Ville.

16. Dans la liste Opérateur, cliquez sur =.

94
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

17. Dans la liste Source, cliquez sur Contrôle.

18. Sous Propriétés du paramètre, dans la liste ControlID, cliquez sur textCity.

Les cinq étapes précédentes spécifient que la requête obtiendra la valeur de


recherche pour Ville du contrôle TextBox que vous avez ajouté dans la
procédure précédente.

19. Cliquez sur Ajouter.


La clause WHERE que vous avez créée apparaît dans une zone en bas de la page.

20. Cliquez sur OK pour fermer la page Ajouter une clause WHERE.

21. Dans l'Assistant Configurer la source de données - <NomSourceDonnées>,


cliquez sur Suivant.

22. Dans la page Tester la requête, cliquez sur Tester la requête.


L'Assistant apparaît, affichant la page Éditeur de valeurs de paramètre qui
vous invite à utiliser une valeur dans la clause WHERE.

23. Dans la zone Valeur, tapez London, puis cliquez sur OK.
Les enregistrements de client pour London apparaissent.

24. Cliquez sur Terminer pour fermer l'Assistant.


Vous pouvez maintenant tester le filtrage.
Pour tester le filtrage

25. Appuyez sur CTRL+F5 pour exécuter la page.

26. In the text box, type London, and then click Submit.
Une liste de clients de la ville de Londres apparaît dans le contrôle GridView.

27. Essayez d'autres villes, telles que Buenos Aires et Berlin.

95
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercices 4 : Pagination des données dans le contrôle ListView

1. Dans Visual Studio 2010 Ajouter une nouvelle page Web Default2.aspx.
2. Si le site Web ne possède pas de dossier App_Data, dans l' Explorateur de
solutions, cliquez avec le bouton droit sur le projet, puis sur Ajouter le dossier
ASP.NET et enfin sur App_Data.
3. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur le dossier
App_Data, puis cliquez sur Ajouter un élément existant.
La boîte de dialogue Ajouter un élément existant s'affiche.
4. Entrez l'emplacement du fichier de la base de données AdventureWorks
(AdventureWorks_Data.mdf).
Par défaut, l'emplacement où est installé le fichier .mdf est accessible par le
chemin suivant : C:\Program Files\Microsoft SQL
Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf.
5. Basculez vers le fichier Default.aspx ou ouvrez-le.
6. Passez en mode Design.
7. À partir de l'onglet Données de la Boîte à outils, faites glisser un contrôle
ListView sur la page.

8. À partir du menu Tâches ListView, dans la liste déroulante Choisirla source de


données, cliquez sur <Nouvelle source de données...>.
L'Assistant Configuration de source de données s'affiche.
9. Cliquez sur Base de données.
Cela spécifie que vous souhaitez obtenir des données d'une base de données
qui prend en charge les instructions SQL, ce qui inclut les bases de données SQL
Server ainsi que toute autre base de données compatible OLE-DB.
10. Dans la zone Spécifiez un ID pour la source de données, le nom d'un contrôle
de source de données par défaut est affiché ( SqlDataSource1). Vous pouvez
laisser ce nom.

96
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

11. Cliquez sur OK.


L'Assistant Configurer la source de données s'affiche.
12. Sous Quelle connexion de données votre application doit-elle utiliser pour
établir une connexion à la base de données ?, sélectionnez
AdventureWorks_Data.mdf dans la liste.
13. Cliquez sur Suivant.
L'Assistant affiche une page où vous pouvez spécifier que vous souhaitez
stocker la chaîne de connexion dans le fichier de configuration.Le stockage de la
chaîne de connexion dans le fichier de configuration présente deux avantages :
 Ce stockage peut s'avérer plus sécurisé qu'un stockage dans la page.
 Vous pouvez utiliser la même chaîne de connexion dans plusieurs
pages.
14. Veillez à ce que la case à cocher Oui, enregistrer cette connexion en tant que
soit activée, puis cliquez sur Suivant. Vous pouvez laisser le nom de chaîne de
connexion par défaut.
L'Assistant affiche une page où vous pouvez spécifier les données à récupérer à
partir de la base de données.
15. Sélectionnez l'option Spécifiez une instruction SQL personnalisée ou une
procédure stockée.

97
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

16. Cliquez sur Suivant.


17. À la page Définir des instructions personnalisées ou des procédures
stockées, entrez la requête SQL suivante qui récupère des données de contact
de la base de données AdventureWorks.
Copier dans le Presse-papiersImprimer
SELECT ContactID, FirstName, LastName, EmailAddress
FROM Person.Contact
Vous pouvez également cliquer sur Générateur de requêtes et utiliser la
fenêtre Générateur de requêtes pour créer une requête puis la valider à l'aide
du bouton Exécuter la requête.
18. Cliquez sur Suivant.
19. Cliquez sur Tester la requête pour vous assurer de récupérer les données que
vous souhaitez.
20. Cliquez sur Terminer.
L'Assistant crée un contrôle SqlDataSource et l'ajoute à la page. Le contrôle
ListView que vous avez ajouté précédemment est lié au contrôle SqlDataSource.
Si vous affichez les propriétés pour le contrôle SqlDataSource, vous verrez que
l'Assistant a créé des valeurs pour les propriétés ConnectionString et
SelectCommand.
21. Cliquez avec le bouton droit sur le contrôle ListView, puis cliquez sur Afficher la
balise active.
22. Dans le menu Tâches courantes ListView, cliquez sur Configurer ListView.
La boîte de dialogue Configurer ListView s'affiche.
23. Sélectionnez Activer la pagination.
24. L'Assistant crée les modèles pour le contrôle ListView, selon les colonnes dans la
requête. Vous pouvez personnaliser la disposition en modifiant les modèles qui
contiennent les éléments de disposition, les contrôles et les expressions de
liaison.

98
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

25. Cliquez sur OK.

Avant de continuer, vous pouvez tester le contrôle ListView.


Pour tester le contrôle ListView
26. Appuyez sur CTRL+F5 pour exécuter la page.
Le contrôle ListView s'affiche et présente les colonnes ContactID, FirstName,
LastName et EmailAddress.
27. Cliquez sur les boutons Premier, Précédent, Suivant et Dernier en bas de page
pour naviguer dans les données.
28. Lorsque vous avez terminé, fermez le navigateur.

99
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercices 5 : Ajout de la fonction de tri au contrôle ListView


Vous allez maintenant ajouter la fonction de tri au contrôle ListView. Vous pouvez
proposer cette fonction en ajoutant un bouton au contrôle ListView et en configurant
ce bouton.
Pour ajouter la fonction de tri au contrôle ListView
1.Dans le fichier Default.aspx, cliquez avec le bouton droit sur le contrôle
ListView, puis cliquez sur Afficher la balise active.
2. À partir du menu Tâches courantes ListView, dans la liste Affichage actuel,
sélectionnez une vue pour modifier le modèle LayoutTemplate, par exemple
ItemTemplate.
3. Dans l'onglet Standard de la Boîte à outils, faites glisser deux contrôles Button
en bas du contrôle, au niveau des contrôles de pagination .
4. Dans le Fenêtre Propriétés, modifiez les propriétés des boutons comme suit :
 Pour le premier bouton, affectez à la propriété Text la valeur "Trier par
prénom", à la propriété CommandName la valeur "Trier" et à la
propriété CommandArgument la valeur "FirstName".
 Pour le deuxième bouton, affectez à la propriété Text la valeur "Trier par
nom", à la propriété CommandName la valeur "Trier" et à la propriété
CommandArgument la valeur "LastName".
Les propriétés CommandArgument du bouton ont pour valeur une expression
de tri. Pour les données de base de données, il s'agit généralement du nom
d'une colonne.
5. Enregistrez la page.
Vous pouvez maintenant tester la page à nouveau.
Pour tester le tri
6. Appuyez sur CTRL+F5 pour exécuter la page.
7. Cliquez sur les boutons Trier par prénom et Trier par nom pour trier les
données de différentes façons.
8. Cliquez sur un bouton à plusieurs reprises pour basculer de l'ordre de tri
croissant à l'ordre de tri décroissant et inversement.

Exercices 5 : Modification de données à l'aide du contrôle ListView


9. Si le site Web ne possède pas de dossier App_Data, dans l' Explorateur de
solutions, cliquez avec le bouton droit sur le projet, puis cliquez sur Ajouter le
dossier ASP.NET et enfin sur App_Data.
10. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur le dossier
App_Data, puis cliquez sur Ajouter un élément existant.
La boîte de dialogue Ajouter un élément existant s'affiche.
11. Entrez l'emplacement du fichier de base de données School (School.mdf).
12. Basculez vers le fichier Default.aspx ou ouvrez-le.
13. Basculez en mode Design.
14. À partir de l'onglet Données de la Boîte à outils, faites glisser un contrôle
ListView sur la page.
15. Dans le menu Tâches ListView, dans la liste déroulante Choisirla source de
données, cliquez sur <Nouvelle source de données...>.
L'illustration suivante montre le menu des tâches ListViewcourantes.

L'Assistant Configuration de source de données s'affiche. L'illustration suivante

100
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

montre l'Assistant Configuration de source de données.

16. Cliquez sur Base de données.


Cela spécifie que vous souhaitez obtenir des données d'une base de données
qui prend en charge les instructions SQL, ce qui inclut les bases de données SQL
Server ainsi que toute autre base de données compatible OLE-DB.
17. Dans la zone Spécifiez un ID pour la source de données, le nom d'un contrôle
de source de données par défaut est affiché ( SqlDataSource1). Vous pouvez
laisser ce nom.
18. Cliquez sur OK.
L'Assistant Configurer la source de données s'affiche.
19. Sous Quelle connexion de données votre application doit-elle utiliser pour
établir une connexion à la base de données ?, sélectionnez School.mdf dans la
liste.
20. Cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la
chaîne de connexion dans le fichier de configuration.Le stockage de la chaîne de
connexion dans le fichier de configuration présente les deux avantages suivants :
 Vous pouvez facilement modifier la chaîne de connexion entre un
serveur de test ou de développement et un serveur de production sans
modifier votre code.
 Ce stockage peut s'avérer plus sécurisé qu'un stockage dans la page.
 Vous pouvez utiliser la même chaîne de connexion dans plusieurs
pages.
21. Veillez à ce que la case à cocher Oui, enregistrer cette connexion en tant que
soit activée, puis cliquez sur Suivant. Vous pouvez laisser le nom de chaîne de
connexion par défaut.
L'Assistant Configurer la source de données s'affiche. Vous pouvez y spécifier
les données à récupérer à partir de la base de données.
22. Sélectionnez l'option Spécifiez les colonnes d'une table ou d'une vue.
L'illustration suivante montre l' Assistant Configurer la source de données.

101
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

23. Sélectionnez la table Course, puis activez la case à cocher astérisque (*) pour
sélectionner toutes les colonnes.
24. Cliquez sur le bouton Avancé.
25. Activez la case à cocher Générer des instructions INSERT, UPDATE et DELETE,
puis cliquez sur OK.
26. Cliquez sur Suivant.
27. Cliquez sur Tester la requête pour vous assurer de récupérer les données que
vous souhaitez.
28. Cliquez sur Terminer.
L'Assistant crée un contrôle SqlDataSource et l'ajoute à la page. Le contrôle
ListView que vous avez ajouté précédemment est lié au contrôle
SqlDataSource.
29. Cliquez avec le bouton droit sur le contrôle ListView, puis cliquez sur Afficher
la balise active.
30. Dans le menu Tâches ListView, cliquez sur Configurer ListView.
La boîte de dialogue Configurer ListView s'affiche.
31. Sous Options, sélectionnez les cases à cocher Activer la modification, Activer
l'insertion et Activer la suppression. L'illustration suivante montre la boîte de
dialogue Configurer ListView.

102
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

32. Cliquez sur OK.


Le contrôle ListView configuré peut se présenter comme illustré ci-dessous.

Vous pouvez à présent tester le contrôle ListView.


Pour tester la page
33. Appuyez sur CTRL+F5 pour exécuter la page.
Le contrôle ListView est affiché avec les colonnes CourseID, Title, Credits et
DepartmentID.

103
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

34. Cliquez sur le bouton Modifier pour modifier un enregistrement dans la table.
35. Modifiez les valeurs, puis cliquez sur Mettre à jour ou sur Annuler pour annuler
la modification.
36. Entrez des valeurs dans les champs du bas de la page, puis cliquez sur Insérer
pour insérer un nouvel enregistrement. Pour departmentID, vous devez entrer 1,
2, 4 ou 7.
37. Cliquez sur le bouton Supprimer de l'enregistrement que vous venez d'insérer
pour le supprimer de la base de données.

Exercices 6 : tri simple pour le contrôle serveur Web GridView


1. Dans une nouvelle page Web Default.aspx, basculez en mode Design.
2. Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle
GridView sur la page.
3. Dans le menu Tâches GridView, dans la liste déroulante Choisirla source de
données, cliquez sur <Nouvelle source de données>.
L'Assistant Configuration de source de données s'affiche.
4. Cliquez sur Base de données.
Cela spécifie que vous souhaitez obtenir des données d'une base de données
qui prend en charge des instructions SQL, ce qui inclut SQL Server et d'autres
bases de données compatibles OLEDB.
5. Dans la zone Spécifiez un ID pour la source de données, le nom d'un contrôle
de source de données par défaut est affiché ( SqlDataSource1). Vous pouvez
laisser ce nom.
6. Cliquez sur OK.
L'Assistant Configurer la source de données s'affiche.
7. Cliquez sur Nouvelle connexion.
La boîte de dialogue Ajouter une connexion s'affiche.
 Si la liste Source de données n'affiche pas Microsoft SQL Server
(SqlClient), cliquez sur Modifier puis, dans la boîte de dialogue
Modifier la source de données, sélectionnez Microsoft SQL Server.
 Si la page Choisir la source de données s'affiche, dans la liste Source
de données, sélectionnez le type de source de données que vous
utiliserez. Pour cette procédure pas à pas, le type de source de données
est Microsoft SQL Server. Dans la liste Fournisseur de données,
cliquez sur Fournisseur de données .NET Framework pour SQL
Server, puis sur Continuer.
8. Dans la zone Nom du serveur, entrez le nom de votre ordinateur SQL Server.
9. Dans la section Connexion au serveur, sélectionnez l'option appropriée pour
votre configuration SQL Server (authentification Windows ou ID et mot de passe
spécifiques).
10. Si nécessaire, entrez un nom d'utilisateur et un mot de passe.
11. Dans la zone Sélectionner ou entrer un nom de base de données,
sélectionnez Northwind.
12. Cliquez sur le bouton Tester la connexion pour tester la connexion. Lorsque
vous êtes sûr que la connexion a réussi, cliquez sur OK.
Vous revenez à l'Assistant Configurer la source de données - SqlDataSource1,
dans lequel les informations de connexion sont fournies.
13. Cliquez sur Suivant.
L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la
chaîne de connexion dans le fichier de configuration.Le stockage de la chaîne de
connexion dans le fichier de configuration présente deux avantages :
 Le stockage dans la page est plus sécurisé.
104
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

 Vous pouvez réutiliser la même chaîne de connexion dans plusieurs


pages.
14. Veillez à ce que la case à cocher Oui, enregistrer cette connexion en tant que
soit activée, puis cliquez sur Suivant. (Vous pouvez laisser le nom de chaîne de
connexion par défaut.)
L'Assistant affiche une page où vous pouvez spécifier les données à récupérer à
partir de la base de données.
15. Sous Spécifiez les colonnes d'une table ou d'une vue, dans la liste déroulante
Nom, sélectionnez Customers.
16. Sous Colonnes, activez les cases à cocher CustomerID, CompanyName et City.
L'Assistant affiche l'instruction SQL que vous créez dans une zone en bas de la
page.
17. Cliquez sur Suivant.
18. Cliquez sur Tester la requête pour vous assurer de récupérer les données que
vous souhaitez.
19. Cliquez sur Terminer.
L'Assistant crée un contrôle SqlDataSource et l'ajoute à la page. Le contrôle
GridView que vous avez ajouté précédemment est lié au contrôle SqlDataSource. Si
vous affichez les propriétés pour le contrôle SqlDataSource, vous verrez que
l'Assistant a créé des valeurs pour les propriétés ConnectionString et SelectQuery.
20. Cliquez avec le bouton droit sur le contrôle GridView, cliquez sur Afficher la
balise active, puis, dans le menu Tâches GridView, cliquez sur Activer le tri.
Les en-têtes de colonne dans le contrôle GridView sont transformés en liens.
Vous pouvez à présent tester la page.
Pour tester la page
21. Appuyez sur CTRL+F5 pour exécuter la page.
Le contrôle GridView est affiché avec les colonnes CustomerID,
CompanyName et Ville.
22. Cliquez sur un en-tête de colonne pour trier en fonction du contenu de cette
colonne.
23. Cliquez de nouveau sur une colonne pour basculer entre l'ordre de tri croissant
et décroissant.

Exercices 7 : liste déroulante et le contrôle GridView


24. Créer une nouvelle page Web Default.aspx

25. Dans l'Explorateur de serveurs, cliquez avec le bouton droit sur Connexions de
données, puis cliquez sur Ajouter une connexion. Si vous utilisez Visual Web
Developer Express, utilisez l'Explorateur de bases de données.

La boîte de dialogue Ajouter une connexion s'affiche.

 Si la liste Source de données ne contient pas l'entrée Fichier de base


de données Microsoft SQL Server (SqlClient), cliquez sur Modifier
puis, dans la boîte de dialogue Modifier la source de données,
sélectionnez Fichier de base de données Microsoft SQL Server
(SqlClient).

 Si la page Choisir la source de données s'affiche, dans la liste Source


de données, sélectionnez le type de source de données que vous
utiliserez. Pour cette procédure pas à pas, le type de source de données
est Microsoft SQL Server. Dans la liste Fournisseur de données,
cliquez sur Fournisseur de données .NET Framework pour SQL

105
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Server, puis sur Continuer.

26. Dans le champ Nom du fichier de base de données, entrez le chemin d'accès à
l'emplacement d'installation de l'exemple de base de données Northwind ou
recherchez-le.

27. Sélectionnez le fichier de base de données Northwnd.mdf, puis cliquez sur


Ouvrir.

28. Activez la case à cocher Enregistrer mon mot de passe.

29. Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion
fonctionne, cliquez sur OK.

Votre nouvelle connexion a été créée sous Connexions de données dans


l'explorateur de serveurs.

Pour activer le tri simple

1. Basculez vers le fichier Default.aspx ou ouvrez-le.

2. Basculez en mode Design.

3. Dans la Boîte à outils, à partir du groupe Données, faites glisser un contrôle


GridView sur la page.

4. Dans le menu Tâches GridView, dans la zone Choisirla source de données,


cliquez sur <Nouvelle source de données>.

L'Assistant Configuration de source de données s'affiche.

5. Cliquez sur Base de données.

Cela spécifie que vous souhaitez obtenir des données d'une base de données
qui prend en charge des instructions SQL, ce qui inclut SQL Server et d'autres
bases de données compatibles OLEDB.

6. Dans la zone Spécifiez un ID pour la source de données, le nom d'un contrôle


de source de données par défaut est affiché ( SqlDataSource1). Vous pouvez
laisser ce nom.

7. Cliquez sur OK.

L'Assistant Configurer la source de données s'affiche.

8. Dans la liste Quelle connexion de données votre application doit-elle utiliser


pour établir une connexion à la base de données ? entrez la connexion que
vous avez créée dans « Pour créer une connexion au SQL Server », puis cliquez
sur Suivant.

L'Assistant affiche une page dans laquelle vous pouvez choisir de stocker la
chaîne de connexion dans le fichier de configuration.Le stockage de la chaîne de
connexion dans le fichier de configuration présente deux avantages :

 Ce stockage est plus sécurisé que le stockage dans la page.

 Vous pouvez utiliser la même chaîne de connexion dans plusieurs

106
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

pages.

9. Activez la case à cocher Oui, enregistrer cette connexion en tant que, puis
cliquez sur Suivant.

L'Assistant affiche une page dans laquelle vous pouvez spécifier les données à
récupérer à partir de la base de données.

10. Sous Spécifiez les colonnes d'une table ou d'une vue, dans la zone Nom,
cliquez sur Employees.

11. Sous Colonnes, activez les cases à cocher ID Employé, Name, FirstName,
HireDate et City.

L'Assistant affiche l'instruction SQL que vous créez dans une zone en bas de la
page.

1. Cliquez sur Avancé, activez la case à cocher Générer des instructions INSERT,
UPDATE et DELETE, puis cliquez sur OK.

Les instructions Insert, Update et Delete sont alors générées pour le contrôle
SqlDataSource1 selon l'instruction Select que vous avez configurée
précédemment.

1. Cliquez sur Suivant.

2. Cliquez sur Tester la requête pour vous assurer de récupérer les données que
vous souhaitez.

3. Cliquez sur Terminer.

4. Cliquez avec le bouton droit sur le contrôle GridView, puis sélectionnez


Afficher la balise active. Dans le menu Tâches GridView, activez la case
Activer la modification.

Vous pouvez à présent tester la page.

Pour tester la page

1. Appuyez sur CTRL+F5 pour exécuter la page.

Le contrôle GridView est affiché avec les colonnes EmployeeId, Name,


FirstName, HireDate et City.

2. Cliquez sur le lien Modifier en regard d'une ligne.

La ligne sélectionnée pour être modifiée s'affiche avec les colonnes LastName,
FirstName, HireDate et City comme une zone de texte modifiable. EmployeeId
ne s'affiche pas dans une zone de texte, parce que c'est un champ clé et qu'il est
non modifiable.

3. Modifiez un champ tel que Nom et cliquez sur Mettre à jour.

Le contrôle GridView est affiché avec les colonnes EmployeeId, Name,


FirstName, City et City, avec Name mis à jour avec la nouvelle valeur.

107
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

4. Fermez le navigateur.

Pour afficher une liste déroulante tout en modifiant

1. À partir du nœud Données de la Boîte à outils, faites glisser un contrôle


SqlDataSource sur la page.

Un nouveau contrôle de source de données nommé SqlDataSource2 est créé.

2. Dans le menu Tâches SqlDataSource, sélectionnez Configurer la source de


données.

3. Dans la liste Quelle connexion de données votre application doit-elle utiliser


pour établir une connexion à la base de données ? entrez la connexion que
vous avez créée précédemment.

4. Cliquez sur Suivant.

5. Sur la page Configurer l'instruction Select, sélectionnez Spécifiez les


colonnes d'une table ou d'une vue, puis dans la zone Nom, cliquez sur
Employees.

6. Sélectionnez uniquement la colonne City, puis activez la case à cocher


Retourner seulement des lignes uniques. Cliquez sur Suivant.

7. Cliquez sur Tester la requête pour visualiser les données, puis cliquez sur
Terminer.

8. Cliquez avec le bouton droit sur le contrôle GridView, puis sélectionnez


Afficher la balise active. Dans le menu Tâches GridView, sélectionnez
Modifier les colonnes.

9. Dans la boîte de dialogue Champs, sélectionnez City dans la liste Champs


sélectionnés.

10. Cliquez sur le lien Convertir ce champ en TemplateField.

11. Cliquez sur OK pour fermer la boîte de dialogue Champs.

12. Cliquez avec le bouton droit sur le contrôle GridView, puis sélectionnez
Afficher la balise active. Dans le menu Tâches GridView, sélectionnez
Modifier les modèles.

13. Sélectionnez EditItemTemplate dans la liste déroulante Afficher.

14. Cliquez avec le bouton droit sur le contrôle TextBox par défaut dans le modèle
et sélectionnez Supprimer pour le supprimer.

15. À partir de l'onglet Standard de la Boîte à outils, faites glisser un contrôle


DropDownList sur le modèle.

16. Cliquez avec le bouton droit sur le contrôle DropDownList, puis sélectionnez
Afficher la balise active. Dans le menu Tâches DropDownList, sélectionnez
Choisirles sources de données.

17. Sélectionnez SqlDataSource2.

108
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

18. Cliquez sur OK.

19. Dans le menu Tâches DropDownList, sélectionnez Modifier les DataBindings.


La propriété SelectedValue du contrôle DropDownList est sélectionnée dans la
boîte de dialogue DataBindings.

20. Cliquez sur la case d'option Liaison de champs et sélectionnez City pour Lié à.

21. Activez la case à cocher Liaison de données bidirectionnelle.

22. Cliquez sur OK.

23. Cliquez avec le bouton droit sur le contrôle GridView, puis sélectionnez
Afficher la balise active. Dans le menu GridView Tasks, cliquez sur Terminer
la modification du modèle.

Pour tester la page

1. Appuyez sur CTRL+F5 pour exécuter la page.

Le contrôle GridView est affiché avec les colonnes EmployeeId, Name,


FirstName, HireDate et City.

2. Cliquez sur le lien Modifier en regard d'une ligne.

La valeur City actuelle est présélectionnée dans la liste déroulante.

Sélectionnez une valeur City différente dans la liste déroulante et cliquez sur
Mettre à jour.

Le champ City est mis à jour à l'aide de la valeur sélectionnée dans la liste
déroulante.

109
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 13
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A013

Activité Master Pages

Durée 2H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Créer les pages maîtres
Détails sur les objectifs  Créer des pages de contenu
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

110
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Création de la page maître
1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
3. La boîte de dialogue Nouveau site Web s'affiche.
4. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET Vide.
5. Dans la zone Emplacement, entrez le nom du dossier dans lequel vous
souhaitez conserver les pages de votre site Web.
6. Par exemple, tapez le nom du dossier C:\SitesWeb.
7. Dans la liste Langage, cliquez sur le langage C#
8. Cliquez sur OK.
9. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de
votre site Web, puis cliquez sur Ajouterun nouvel élément.
10. Sous Modèles Visual Studio installés, cliquez sur Page maître.
11. Dans la zone Nom, tapez Master1.
12. Activez la case à cocher Placer le code dans un fichier distinct
13. Dans la liste Langage, cliquez sur votre langage de programmation préféré, puis
cliquez sur Ajouter.
14. Avec le fichier Master1.master sélectionné en mode Source, utilisez la liste
déroulante Schéma cible à valider dans la barre d'outils pour affecter au
schéma cible la valeur Microsoft Internet Explorer 6.0.
15. Basculez en mode Design.
16. Cliquez au centre de la page pour sélectionner la page. Dans la fenêtre
Propriétés, affectez à la propriété BgColor une couleur différente, par exemple
bleu.
17. La couleur que vous sélectionnez n'est pas importante. Lors d'une étape
ultérieure de cette procédure, vous créerez une deuxième page maître sans
couleur afin qu'elle contraste celle que vous venez de sélectionner.
18. Cliquez sur la page où vous souhaitez placer le tableau de disposition.
19. Dans le menu Tableau, cliquez sur Insérer un tableau.
20. Dans la boîte de dialogue, cliquez Insérer un tableau pour créer un tableau de
trois lignes et une colonne, puis cliquez sur OK.
21. Placez le curseur à l'intérieur de la deuxième ligne de la table.
22. Dans le menu Tableau, dans le sous-menu Modifier, cliquez sur Fractionner les
cellules.
23. Dans la boîte de dialogue Fractionner les cellules, sélectionnez Fractionner en
colonnes, puis cliquez sur OK.
1. Définissez les paramètres suivants :
 Dans la ligne centrale, cliquez sur la colonne la plus à gauche, puis
affectez 48 à sa Largeur dans la fenêtre Propriétés.
 Cliquez sur la ligne supérieure, puis affectez 48 à sa Hauteur dans la
fenêtre Propriétés.
 Cliquez sur la ligne inférieure, puis affectez 48 à sa Hauteur dans la
fenêtre Propriétés.
2. Sélectionnez toutes les cellules dans la table et affectez à BgColor une couleur
autre que la couleur d'arrière-plan.
3. Cliquez sur la cellule inférieure, puis tapez le texte du pied de page, par exemple
Copyright 2013 Contoso Inc..
4. Dans la Boîte à outils, à partir du groupe de contrôles Navigation, faites glisser
un contrôle Menu dans la cellule supérieure.

111
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

5. Créez un menu en suivant les étapes suivantes :


 Affectez à la propriété Orientation du contrôle Menu la valeur
Horizontal.
 Cliquez sur la balise active du contrôle Menu, puis sur Modifier les
éléments de menu dans la boîte de dialogue Tâches Menu. La boîte de
dialogue Modifier les éléments de menu s'affiche.
6. Dans la boîte de dialogue Modifier les éléments de menu , section Éléments,
cliquez deux fois sur l'icône Ajouter un nœud racine pour ajouter deux
éléments de menu :
 Cliquez sur le premier nœud, puis affectez Home à Text et Home.aspx à
NavigateUrl.
 Cliquez sur le deuxième nœud, puis affectez About à Text et About.aspx
à NavigateUrl.
 Cliquez sur OK pour fermer la boîte de dialogue Éditeur d'éléments de
menu.
7. Si vous disposez d'un fichier graphique à utiliser comme logo, suivez les étapes
ci-dessous pour le placer sur la page maître :
 Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le
nom de votre site Web, puis cliquez sur Ajouter un élément existant.
 Naviguez vers votre fichier graphique, sélectionnez le fichier graphique,
puis cliquez sur Ajouter.
 Dans la Boîte à outils, à partir du groupe Standard, faites glisser un
contrôle Image dans la colonne centrale de gauche du tableau.
 Affectez à la propriété ImageUrl du contrôle Image le nom du fichier
graphique.
8. Faites glisser le contrôle ContentPlaceHolder dans la cellule centrale de droite.
Vous pouvez déplacer le contrôle en cliquant à l'intérieur de celui-ci, puis en le
faisant glisser avec sa balise.
La propriété ID du contrôle est ContentPlaceholder1. Vous pouvez garder ce nom
ou le modifier.Si vous modifiez le nom, notez-le quelque part, car vous devrez
vous en rappeler ultérieurement.
9. Enregistrez la page.

Exercices 2 : Création de contenu pour le page maître


Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de votre site
Web, puis cliquez sur Ajouter un nouvel élément.
.
1. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
2. Dans la zone Nom, tapez Home.
3. Dans la liste Langage, cliquez sur votre langage de programmation préféré.
4. Activez la case à cocher Sélectionner la page maître, puis cliquez sur Ajouter.
La boîte de dialogue Sélectionner une page maître s'affiche.
5. Cliquez sur Master1.master, puis sur OK.

6. En mode Source, tapez Page d'accueil Contoso dans l'élément Titre de la


directive @ Page en haut de la page.

Vous pouvez définir indépendamment le titre de chaque page de contenu, afin


que le titre approprié soit affiché dans le navigateur lorsque le contenu est
fusionné avec la page maître.Les informations de titre sont stockées dans la
directive @ Page de la page de contenu.

112
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

7. Basculez en mode Design.

Les contrôles ContentPlaceHolder de la page maître sont affichés comme


contrôles Content dans la nouvelle page de contenu. Le reste du contenu de
page maître est affiché afin que vous puissiez consulter la disposition. Toutefois,
il est grisé car vous ne pouvez pas le modifier pendant que vous modifiez une
page de contenu, et le curseur devient une barre I uniquement à l'endroit où
vous pouvez ajouter du contenu.

8. Dans le contrôle Content qui correspond à ContentPlaceHolder1 sur la page


maître, tapez Bienvenue sur le Site Web Contoso.

9. Sélectionnez le texte et transformez-le en titre en sélectionnant En-tête 1 dans


la liste déroulante Format du bloc au-dessus de Boîte à outils.

10. Appuyez sur ENTRÉE pour créer une ligne vierge dans le contrôle Content, puis
tapez Merci de votre visite.

Le texte que vous ajoutez à cette étape n'est pas important ; vous pouvez taper
n'importe quel texte qui vous aidera à reconnaître que cette page est la page
d'accueil.

11. Enregistrez la page.

12. Pour ajouter une nouvelle page de contenu nommée About.aspx, suivez les
mêmes étapes que pour la page d'accueil.

Veillez à attacher la nouvelle page à la page Master1.master comme vous l'avez


fait avec la page d'accueil.

13. Remplacez le titre de la page par Page À propos de Contoso.

14. Dans la région de contenu, tapez À propos de Contoso, puis mettez en forme le
texte en Titre 2 en sélectionnant le texte et Titre 2 dans la liste déroulante
Format du bloc au-dessus de la Boîte à outils.

15. Appuyez sur ENTRÉE pour créer une ligne, puis tapez Depuis 1982, Contoso
fournit des services logiciels de haute qualité.

16. Enregistrez la page.

113
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 14
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A014

Activité Les thèmes

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Créer et appliquer un thème à un site
Détails sur les objectifs
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

114
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Création du site Web
1. Ouvrez Visual Web Studio 2010.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
3. La boîte de dialogue Nouveau site Web s'affiche.
4. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
5. Dans la zone Emplacement, entrez le nom du dossier dans lequel vous
souhaitez conserver les pages de votre site Web.
6. Par exemple, tapez le nom du dossier C:\SitesWeb.
7. Dans la liste Langage, cliquez sur le langage C#.
8. Cliquez sur OK.
9. Basculez en mode Design.
10. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
Calendar, un contrôle Button et un contrôle Label sur la page. La disposition
exacte de la page n'est pas importante :

11. Basculez en mode Source.


12. Assurez-vous que l'élément head de la page a l'attribut runat="server".
13. Enregistrez la page.

Exercices 2 : Création et application d'un thème à une page


1. Dans Visual Studio 2010, cliquez avec le bouton droit sur votre site Web, puis
cliquez sur Ajouter le dossier ASP.NET puis cliquez sur Thème.
2. Le dossier nommé App_Themes et un sous-dossier nommé Theme1 sont créés.
3. Renommez le dossier Theme1 sampleTheme.
4. Cliquez avec le bouton droit sur le dossier sampleTheme, sélectionnez Ajouter
un nouvel élément, ajoutez un nouveau fichier texte et nommez-le
sampleTheme.skin :

115
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

5. Dans le fichier sampleTheme.skin, ajoutez des définitions d'apparence comme le


montre l'exemple de code suivant.
<asp:Label runat="server" ForeColor="red" Font-Size="14pt" Font-
Names="Verdana" />
<asp:button runat="server" Borderstyle="Solid" Borderwidth="2px"
Bordercolor="Blue" Backcolor="yellow"/>

6. Enregistrez le fichier d'apparence et fermez-le.


7. Appuyez sur CTRL+F5 pour exécuter la page.
8. Les contrôles sont affichés avec leur apparence par défaut.
9. Fermez le navigateur, puis revenez dans Visual Web Developer.
10. Basculez vers la page Default.aspx ou ouvrez-la, puis basculez en mode Source.
11. Dans la directive @ Page, ajoutez un attribut Theme qui spécifie sampleTheme
comme nom de thème :
<%@ Page Language="C#" Theme="sampleTheme" AutoEventWireup="true"
CodeFile="Default2.aspx.cs" Inherits="Default2" %>
7. Appuyez sur CTRL+F5 pour exécuter la page à nouveau :

116
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 15
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A015

Activité Profils et localisation

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Configurer les propriétés de profil.
Détails sur les objectifs  Utilisation des ressources pour la localisation
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

117
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Configuration des propriétés de profil
1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, pointez sur Nouveau, puis cliquez sur Site Web (ou dans
le menu Fichier, cliquez sur Nouveau site Web).
3. La boîte de dialogue Nouveau site Web s'affiche.
4. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
5. Dans la liste Emplacement la plus à gauche, cliquez sur Système de fichiers.
6. Dans la liste Emplacement la plus à droite, entrez le nom du dossier dans lequel
vous souhaitez conserver les pages du site Web.
7. Par exemple, tapez le nom du dossier C:\SitesWeb.
8. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
9. Cliquez sur OK.
10. Dans l'Explorateur de solutions, déterminez si le site Web dispose déjà d'un
fichier Web.config.
11. Si le site Web a un fichier Web.config, ouvrez-le. Si le site Web n'a pas de fichier
Web.config, suivez les étapes suivantes :
12. Cliquez avec le bouton droit sur le nom du site Web.
13. Cliquez sur Ajouter un nouvel élément.
14. Sous Modèles Visual Studio installés, cliquez sur Fichier de configuration
Web.
15. Cliquez sur Ajouter.
16. Un nouveau fichier nommé Web.config est ajouté au site et ouvert dans
l'éditeur.
17. Ajoutez l'élément <profile> suivant au fichier Web.config en tant qu'enfant de
l'élément <system.web> :

<system.web>
<anonymousIdentification enabled="true" />
<profile>
<properties>
<add name="PostalCode" type="System.String"
allowAnonymous="true" />
</properties>
</profile>
</system.web>

Vous avez ajouté les éléments suivants :


18. Élément <anonymousIdentification> qui spécifie si les propriétés de profil
fonctionnent uniquement avec les utilisateurs connectés (authentifiés) ou avec
les utilisateurs anonymes et les utilisateurs connectés.
19. Dans ce cas, vous avez affecté la valeur true au contrôle enabled. Par
conséquent, les informations de propriété de profil seront suivies pour les
utilisateurs connectés et pour les utilisateurs anonymes.
20. Élément <properties> qui contient toutes les propriétés de profil que vous
définissez.
21. Élément <add> qui définit un nouvel élément <profile>.
22. Dans ce cas, vous avez défini une profile property unique nommée PostalCode.

Lorsque vous définissez une propriété de profil, vous spécifiez son type de données en
utilisant un nom de classe de type .NET Framework.Vous spécifiez également si la

118
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

propriété de profil sera suivie pour les utilisateurs anonymes.Après avoir activé
l'identification anonyme, vous pouvez aussi spécifier s'il faut suivre les propriétés de
profil individuellement pour les utilisateurs anonymes.
Vous devez créer un élément add pour chaque propriété de profil supplémentaire que
vous souhaitez définir.

Exercices 2 : Définition et utilisation des propriétés de profil


23. Ajoutez à votre site une nouvelle page Web intitulée Profils.aspx. Assurez-vous
que la case à cocher Placer le code dans un fichier distinct est activée.
24. Ouvrez Profils.aspx et basculez en mode Design.
25. À partir du groupe Standard de la Boîte à outils, faites glisser les contrôles
répertoriés dans le tableau suivant sur la page, puis définissez leurs propriétés
comme indiqué :

Contrôle Paramètres de propriété

TextBox ID = PostalCodeTextBox

Button ID = SetPostalCodeButton

Text = Set Postal Code

Label ID = PostalCodeLabel

Text = (vide)

26. Ajoutez un gestionnaire pour l'événement Click du bouton Définir le code


postal.
27. Cliquez avec le bouton droit sur le bouton Définir le code postal et cliquez sur
Propriétés.
28. Dans la fenêtre Propriétés, cliquez sur le bouton Événements (icône
représentant un éclair) pour afficher les événements Button.
29. Double-cliquez sur l'événement Click.
30. Le gestionnaire SetPostalCodeButton_Click est créé et le fichier Profiles.aspx.vb
ou Profiles.aspx.cs s'ouvre.
31. Ajoutez le code suivant :

protected void SetPostalCodeButton_Click(object sender, EventArgs e)


{
Profile.PostalCode = Server.HtmlEncode(PostalCodeTextBox.Text);
PostalCodeLabel.Text = Profile.PostalCode;
}

Lorsque les propriétés de profil utilisateur sont activées, ASP.NET crée dynamiquement
une propriété nommée Profile qui ajoute le profil utilisateur au contexte actuel. Les
propriétés de profil sont ensuite disponibles par le biais de Profile.PostalCode.

32. Dans le gestionnaire Page_Load, ajoutez la ligne de code suivante :

119
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

protected void Page_Load(object sender, EventArgs e)


{
PostalCodeLabel.Text = Profile.PostalCode;
}

Ce code affichera la valeur Profile.PostalCode chaque fois que la page sera demandée.
33. Cliquez avec le bouton droit sur Profiles.aspx, puis cliquez sur Définir comme
page de démarrage.
34. Appuyez sur CTRL+F5 pour exécuter la page Profils.aspx.
35. Dans la zone, tapez un code postal, puis cliquez sur Définir le code postal.
36. Le code postal que vous avez entré s'affiche dans le contrôle Label.
37. Fermez le navigateur pour fermer votre session en cours.
38. Appuyez sur CTRL+F5 pour exécuter de nouveau la page Profils.aspx.
39. Le code postal que vous avez entré précédemment s'affiche dans le contrôle
Label.

La dernière étape de la procédure précédente a illustré qu'ASP.NET stocke la valeur


PostalCode. Lorsque vous visitez de nouveau la page, ASP.NET lit la valeur PostalCode
selon votre ID anonyme propre

Exercices 3 : Localisation avec ASP.NET


1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
3. La boîte de dialogue Nouveau site Web s'affiche.
4. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
5. Dans la zone Emplacement, entrez le nom du dossier dans lequel vous
souhaitez conserver les pages de votre site Web.
6. Par exemple, tapez le nom du dossier C:\SitesWeb.
7. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
8. Cliquez sur OK.
9. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx,
cliquez sur Renommer, puis tapez sample.aspx.
10. Cela permettra d'éviter une confusion lors des étapes suivantes de la procédure
pas à pas concernant les fichiers de ressources par défaut, car le nom des
fichiers de ressources implicite utilise le nom des pages.
11. Ouvrez Sample.aspx, puis basculez en mode Design.
12. Dans la boîte à outils, dans la zone Standard, faites glisser un contrôle Button,
Label et TextBox sur la page.
13. Pour chaque contrôle, affectez respectivement English Button, English Label et
English TextBox à Text.
14. Cliquez dans l'aire du concepteur ou sur un contrôle.
15. Dans le menu Outils, cliquez sur Générer la ressource locale.
16. Visual Web Developer crée un dossier nommé App_LocalResources, et dans le
dossier App_LocalResources, un nouveau fichier nommé sample.aspx.resx. Si
vous avez nommé votre page autrement que Sample.aspx, le fichier .resx le
reflétera quel que soit nom que vous avez choisi. Lors de l'utilisation de la
localisation implicite, le nom des fichiers de ressources dépend du nom des
pages.
17. Basculez en mode Source pour voir les modifications apportées à vos
déclarations de contrôles.
18. Visual Studio a ajouté un attribut à vos contrôles afin de récupérer leurs valeurs
à partir du fichier de ressources que vous avez récemment créé.Par exemple, le

120
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

balisage du contrôle Button a un nouvel attribut meta:resourcekey.

<asp:Button ID="Button1" Runat="server"


meta:resourcekey="ButtonResource1" Text="English Button" />

19. Dans l'Explorateur de solutions, ouvrez sample.aspx.resx.


20. Dans l' Éditeur de ressources, sous Valeur, se trouvent les propriétés Text de
chaque contrôle que vous avez placé sur votre page. La modification de la
valeur, à cette étape, modifiera la valeur de la culture par défaut.
21. Affectez Texte anglais modifié à ButtonResource1.Text.
22. Enregistrez le fichier.
23. Tester la page

Pour créer un fichier en langue française culturellement neutre


1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur
sample.aspx.resx, puis cliquez sur Copier.
2. Cliquez avec le bouton droit sur le dossier App_LocalResources, puis cliquez sur
Coller.
3. Visual Web Developer crée un fichier nommé Copie de Sample.aspx.resx.
4. Right-click the Copy of Sample.aspx.resx file, click Rename, and then type
Sample.aspx.fr.resx.
5. sample.aspx.fr.resx indique un fichier de texte en langue française
culturellement neutre.
6. Ouvrez sample.aspx.fr.resx.
7. Pour les contrôles Button, Label et TextBox, affectez respectivement Bouton
français, Étiquette français et Zone de texte français à Text.
8. Enregistrez le fichier.
9. Tester la page

Pour modifier les paramètres de langue de votre navigateur


1. Dans Microsoft Internet Explorer, dans le menu Outils, cliquez sur Options
Internet.
2. Cliquez sur Langues.
3. Dans la boîte de dialogue Langue par défaut, cliquez sur Ajouter.
4. Dans la boîte de dialogue Ajouter une langue, sous Langues, cliquez sur
Français (France) [fr], puis cliquez sur OK.
5. Cliquez sur Ajouter, puis ajoutez Espagnol (Mexique) [es-mx] à la liste des
langues.
6. Cliquez sur Ajouter, puis ajoutez Arabe (Égypte) [ar-eg] à la liste des langues.
7. Vous utiliserez l'espagnol et l'arabe pour réaliser le test lors d'une étape
ultérieure de cette procédure.
8. Dans la boîte de dialogue Langues, sous Langue, cliquez sur Français (France)
[fr], sur Monter, puis sur OK.

Pour créer un fichier de ressources


1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur la racine de
votre site Web, cliquez sur Ajouter le dossier ASP.NET, puis sur
App_GlobalResources.
2. Cliquez avec le bouton droit sur le dossier App_GlobalResources, puis cliquez
sur Ajouter un nouvel élément.
3. Sous Modèles Visual Studio installés, cliquez sur Fichier de ressources.
4. Dans la zone Nom, tapez LocalizedText.resx, puis cliquez sur Ajouter.

121
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

5. Le fichier LocalizedText.resx jouera le rôle de ressource pour la culture de


secours.
6. Créez un deuxième fichier .resx et nommez-le LocalizedText.fr.resx.
7. La chaîne "fr" identifie le fichier en tant que ressource à utiliser si le langage du
navigateur est le français (indépendamment de la culture).
8. Créez un troisième fichier .resx et nommez-le LocalizedText.es-mx.resx.
9. La chaîne "es-mx" identifie le fichier en tant que ressource à utiliser si le langage
du navigateur est l'espagnol (Mexique).
10. Ouvrez le fichier LocalizedText.resx.
11. Dans la première ligne, sous la colonne Nom, tapez Msg1.
12. In the first row under the Value column, type Hello.
13. Enregistrez le fichier et fermez-le.
14. Ouvrez le LocalizedText.fr.resx, créez une chaîne de ressources nommée Msg1,
assignez-lui la valeur Bon jour. Lorsque vous avez terminé, enregistrez et fermez
le fichier.
15. Ouvrez le fichier LocalizedText.es-mx.resx, créez une chaîne de ressources
nommée Msg1, assignez-lui la valeur Buenos días. Lorsque vous avez terminé,
enregistrez et fermez le fichier.

Pour ajouter un contrôle Label à la page


1. Basculez vers Sample.aspx, puis basculez en mode Design.
2. Faites glisser un autre contrôle Label sur la page.
3. Cliquez avec le bouton droit sur le contrôle Label, cliquez sur Propriétés, puis
sur le bouton de sélection (...) dans la zone Expressions.
4. La boîte de dialogue Expressions s'affiche.
5. Dans la liste Propriétés pouvant être liées, cliquez sur Text.
6. Dans la liste Type d'expression, sélectionnez Ressources.
7. Sous Propriétés d'expression, affectez LocalizedText à ClassKey et Msg1 à
ResourceKey.
8. Cliquez sur OK.
9. Basculez en mode Source.
10. L'attribut de texte de votre étiquette possède à présent une expression explicite
indiquant le fichier de base à partir duquel récupérer la ressource et la clé à
sélectionner.

<asp:Label ID="Label2" Runat="server" Text="<%$


Resources:LocalizedText, Msg1 %>">

Pour tester la page


1. Appuyez sur CTRL+F5 pour exécuter la page.
2. La version en langue française du texte que vous avez fournie dans l'Éditeur de
ressources est affichée en tant que texte du contrôle Label.
3. Dans Microsoft Internet Explorer, dans le menu Outils, cliquez sur Options
Internet.
4. Cliquez sur Langues.
5. Dans la boîte de dialogue Langues, placez Espagnol (Mexique) [es-mx] en
haut de la liste des langues. Lorsque vous avez terminé, cliquez sur OK, puis
fermez la boîte de dialogue Options Internet.
6. Appuyez sur F5 pour actualiser le navigateur.
7. La version espagnole du texte s'affiche.
8. Remplacez la langue par l'arabe puis appuyez sur F5 pour actualiser une
nouvelle fois la page.

122
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

9. Cette fois-ci, le texte s'affiche dans la langue que vous avez utilisée dans le
fichier de ressources de secours.Parce que vous n'avez pas créé de fichier
LocalizedText.ar-eg.resx, ASP.NET n'était pas capable de localiser le texte qui
correspondait à la langue et à la culture signalées par le navigateur ; par
conséquent, il a utilisé le fichier de ressources de secours.
10. Lorsque vous avez terminé de tester la page, affectez une nouvelle fois votre
langue par défaut à la langue.

123
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 16
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision A Développer des composants serveur

Code Activité A016

Activité Utilisateurs et membership

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Création de site avec appartenance.
Détails sur les objectifs  Configuration de l'appartenance.
visés par l’activité  Configuration pour la messagerie
électronique.
 Connexion utilisateur

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

124
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Création de site sur IIS
1. Ouvrez Visual Studio.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
3. La boîte de dialogue Nouveau site Web s'affiche.
4. Sous Modèles Visual Studio installés, sélectionnez Site Web ASP.NET.
5. Dans la zone de liste Emplacement, cliquez sur HTTP. Cliquez sur Parcourir.
6. La boîte de dialogue Choisir un emplacement s'affiche.
7. Sélectionnez Serveur IIS local.
8. Ouvrez Serveurs Web locaux.
9. Sélectionnez Site Web par défaut.
10. Cliquez sur l'icône Créer une application Web ( ) au-dessus de la liste de
sites Web puis nommez le nouveau site Web appartenance.
11. Cliquez sur Ouvrir.
12. La boîte de dialogue Choisir un emplacement s'affiche.
13. Dans la zone Langages, cliquez sur le langage de programmation que vous
préférez utiliser.
14. Le langage de programmation que vous choisissez sera la valeur par défaut pour
votre site Web, mais vous pouvez définir individuellement les langages de
programmation pour chaque page.
15. Cliquer sur OK dans la boîte de dialogue Nouveau site Web

Exercices 2 : Configuration de l'appartenance


1. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur le nom de
votre site Web, puis cliquez sur Nouveau dossier.
2. Nommez le dossier PagesMembres.
3. Dans le menu Site Web, cliquez sur Configuration ASP.NET.
4. Sélectionnez l'onglet Sécurité, cliquez sur le lien vers Utilisez l'Assistant
Installation de sécurité pour configurer la sécurité étape par étape, puis
cliquez sur Suivant.
5. Passez à l'étape 2 de l'Assistant et sélectionnez l'option À partir d'Internet.
6. L'Assistant affiche une page dans laquelle vous pouvez sélectionner la méthode
d'authentification que votre site Web utilisera.Cette option spécifie que votre
application utilisera l'authentification par formulaire, dans laquelle les
utilisateurs se connecteront à l'application à l'aide d'une page de connexion que
vous créerez à une étape ultérieure de cette procédure.
7. Cliquez sur Suivant.
8. L'Assistant affiche un message qui déclare que les informations utilisateur seront
stockées à l'aide de Paramètres avancés des fournisseurs. Par défaut, les
informations d'appartenance sont stockées dans un fichier de base de données
Microsoft SQL Server Express dans le dossier App_Data de votre site Web.
9. Cliquez sur Suivant.
10. L'Assistant affiche une option pour créer des rôles.Vous effectuerez cette étape
séparément à une étape ultérieure de cette procédure pas à pas.
11. Désactivez la case à cocher Active les rôles pour ce site Web et cliquez sur
Suivant.
12. L'Assistant affiche une page dans laquelle vous pouvez créer de nouveaux
utilisateurs.
13. Entrez les informations qui définissent un utilisateur de votre application.Utilisez
les valeurs suivantes comme indications (vous pouvez utiliser toutes valeurs que

125
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

vous souhaitez, mais assurez-vous de noter vos entrées pour une étape
ultérieure de la procédure pas à pas) :
 Nom d'utilisateur Votre nom (sans espaces) ou un nom d'exemple.
 Mot de passe Un mot de passe. Un mot de passe fort est requis (mot de passe
qui inclut des majuscules et des minuscules, un signe de ponctuation et qui
comprend au moins huit caractères).
 Adresse de messagerie Votre adresse de messagerie personnelle. À une étape
ultérieure de cette procédure pas à pas, vous vous enverrez un message
électronique, vous avez donc besoin d'une adresse de messagerie valable.
 Question de sécurité et Réponse de sécurité Tapez une question et une
réponse à la question qui puissent être utilisées ultérieurement si vous avez
besoin de récupérer votre mot de passe.

14. Cliquez sur Créer un utilisateur.


L'Assistant affiche une page de confirmation.

Pour définir des règles d'accès pour le sous-répertoire PagesMembres


15. Dans l'Assistant, cliquez sur Suivant.
16. L'Assistant affiche une page qui vous permet de créer des règles d'accès.
17. Dans la zone Ajouter une nouvelle règle d'accès, développez le nœud de votre
site Web.
18. Sélectionnez PagesMembres, le dossier que vous avez créé précédemment.
19. Sous La règle s'applique à, sélectionnez Utilisateurs anonymes.
20. Sous Autorisation, sélectionnez Refuser.
21. La règle que vous créez refuse l'accès aux utilisateurs anonymes, c'est-à-dire les
utilisateurs qui ne sont pas connectés.
22. Cliquez sur Ajouter cette règle.
23. La nouvelle règle est affichée dans la grille au-dessous.Lorsque les utilisateurs
demandent une page du sous-répertoire PagesMembres, les règles sont
vérifiées pour déterminer si l'accès à la page est autorisé à l'utilisateur.
24. Cliquez sur Terminer.
25. Vous en avez maintenant fini avec l'Assistant.L'Assistant ferme et vous revenez à
l'onglet Sécurité de l'outil Administration de site Web.

Exercices 3 : Messagerie électronique


1. Dans l'outil Administration de site Web, cliquez sur l'onglet Application.
2. Sous Paramètres SMTP, cliquez sur Configurer les paramètres de messagerie
SMTP.
3. L'outil affiche une page dans laquelle vous pouvez configurer la messagerie
électronique.
4. Si vous utilisez le serveur virtuel SMTP qui est sur votre ordinateur, entrez
localhost comme Nom du serveur ; sinon, entrez le nom de serveur approprié.
5. Incluez les informations relatives au numéro de port et à l'authentification selon
la configuration requise de votre serveur SMTP.Consultez votre administrateur
pour plus d'informations sur la configuration de ces paramètres.
6. Dans la zone De, tapez une adresse de messagerie valide.
7. Cliquez sur Enregistrer et dans la page de confirmation, cliquez sur OK.
8. L'outil Administration de site Web crée un fichier Web.config (s'il n'existe pas
déjà) avec les paramètres que vous avez définis.
9. Fermez l'outil Administration de site Web.

126
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercices 4 : Connexion utilisateur


Pour créer une page d'accueil avec un bouton de connexion
1. Ouvrez ou basculez vers la page Default.aspx de votre site. (Si vous n'avez pas
de page Default.aspx, vous pouvez en ajouter une ou utiliser une page
différente.)
2. Basculez en mode Design.
3. Tapez le texte statique tel que Bienvenue sur notre site et dans la barre d'outils
Mise en forme, utilisez la liste déroulante Format du bloc pour mettre en
forme le texte en Heading 1.
4. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
LoginStatus sur la page.

Par défaut, le contrôle LoginStatus est affiché comme un lien. Lorsque les utilisateurs
cliquent sur ce dernier, l'application affiche une page de connexion.Vous pouvez à
présent créer la page de connexion.

Pour créer une page de connexion


1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur votre
application Web, puis sélectionnez Ajouter un nouvel élément. Ajoutez un
Formulaire Web nommé Login.aspx à votre site.
2. Dans la page Login.aspx, basculez en mode Design.
3. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
Login sur la page.
4. Le contrôle Login est un contrôle unique qui invitera l'utilisateur à entrer les
informations d'identification et les validera.

Affichage des erreurs de connexion


Le contrôle Login inclut la validation qui aide les utilisateurs à entrer des informations
correctes. Par exemple, si un utilisateur ignore le mot de passe, un contrôle de validateur
affiche un astérisque (*) en regard de la zone Mot de passe. Vous pouvez fournir des
informations plus complètes sur les erreurs de connexion en ajoutant un contrôle
ValidationSummary à la page.

Pour afficher des informations détaillées sur les erreurs de connexion


1. À partir du groupe Validation de la Boîte à outils, faites glisser un contrôle
ValidationSummary sur la page.
2. Dans la fenêtre Propriétés pour le contrôle ValidationSummary, affectez
Login1, qui est l'ID par défaut du contrôle Login que vous avez ajouté
précédemment, à la propriété ValidationGroup .

Affichage d'informations pour les utilisateurs connectés


Vous allez maintenant modifier la page d'accueil pour personnaliser l'affichage selon
que l'utilisateur est connecté ou non.Les utilisateurs anonymes voient s'afficher un
message générique qui les invite à ouvrir une session.Les utilisateurs connectés voient
s'afficher un message qui les accueille avec leur nom de connexion.

Pour personnaliser l'affichage pour les utilisateurs connectés


1. Basculez vers la page Default.aspx ou ouvrez-la.
2. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
LoginView sur la page.
3. Le contrôle LoginView est affiché avec son modèle AnonymousTemplate
ouvert. Ce modèle vous permet de définir le contenu que les utilisateurs verront
127
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

avant qu'ils se soient connectés.


4. Cliquez sur la zone d'édition du contrôle LoginView pour activer l'édition.
5. Dans la zone d'édition du modèle AnonymousTemplate du contrôle
LoginView, tapez « Vous n'êtes pas connecté. Cliquez sur le lien Connexion
pour vous inscrire. ».
6. Dans le panneau Tâches LoginView, dans la liste Affichages, cliquez sur
LoggedInTemplate. Si vous ne voyez pas le panneau Tâches LoginView,
cliquez avec le bouton droit sur le titre du contrôle LoginView et sélectionnez
Afficher la balise active.
7. Vous définissez à présent le contenu qui sera affiché aux utilisateurs qui se sont
déjà connectés.
8. Cliquez sur la zone d'édition du contrôle LoginView pour activer l'édition, puis
tapez Vous êtes connecté. Bienvenue,
9. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
LoginName sur le modèle après le texte.

Test de la connexion
Vous pouvez à présent tester la fonction de connexion de votre application.

Pour tester la connexion


1. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx,
puis cliquez sur Définir comme page de démarrage.
2. Cela configure le site Web de sorte que, lorsque vous exécutez le site, la page
Default.aspx apparaisse en premier.
3. Appuyez sur CTRL+F5 pour exécuter le site Web.
4. La page d'accueil (Default.aspx) s'affiche dans le navigateur, en affichant le lien
Connexion et le message générique.
5. Cliquez sur le lien Connexion.
6. La page de connexion que vous avez créée est affichée.
7. Tapez le nom de connexion de l'utilisateur que vous avez créé précédemment
dans la procédure pas à pas, puis cliquez sur Se connecter. (N'entrez pas encore
de mot de passe.)
8. Un astérisque (*) est affiché en regard de la zone Mot de passe et un message
d'erreur est affiché dans le contrôle ValidationSummary.
9. Entrez un nom d'utilisateur et un mot de passe puis cliquez sur Se connecter.
10. Si vous avez entré des informations d'identification correctes, vous revenez à la
page d'accueil.La page affiche maintenant un lien Déconnexion, votre nom
d'utilisateur et le message d'accueil que vous avez défini pour l'utilisateur
connecté.
11. Fermez le navigateur.

128
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 17
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision B Développer des applications XML

Code Activité B017

Activité Créer un vocabulaire XML

Durée 4H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Respecter les normes XML
Détails sur les objectifs  Mettre en forme un document XML
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
XmlSpy ou autre
outillage

129
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 :
Distinguez les noms XML corrects des noms incorrects et corrigez les erreurs.

a. <Drivers_License_Number>98 NY 32</Drivers_License_Number>
b. <Driver's_License_Number>98 NY 32</Driver's_License_Number>
c. <month-day-year>7/23/2001</month-day-year>
d. <first name>Alan</first name>
e. <àçttûä>øåú</àçttûä>
f. <first_name>Alan</first_name>
g. <month/day/year>7/23/2001</month/day/year>
h. <_4-lane>I-610</_4-lane>
i. <téléphone>011 33 91 55 27 55 27</téléphone>
j. <4-lane>I-610</4-lane>

Solution :
a. Correct
b. Incorrect (apostrophe)
c. Correct
d. Incorrect (présence d'un espace)
e. Correct
f. Correct
g. Incorrect (à cause des /)
h. Correct
i. Correct
j. Incorrect (un nom XML ne commence pas par un chiffre)

Exercices 2 :
Pour chaque exemple déterminer s'il s'agit d'un document bien formé ou mal formé:
 Exemple 1 : Un document XML doit comporter un ou plusieurs éléments.
A- <text>Ceci est un document XML</text>
B- <text>Ceci est un
<doctype>document XML</doctype>
</text>
C- ??? Ceci est un document XML ???

 Exemple 2 : Il y a exactement un élément appelé élément racine ou élément


document, dont aucune partie n'apparaît dans le contenu d'un autre élément.
A - <book>Ceci est un livre</book>
B- <list>
<item>Item 1</item>
<item>Item 2</item>
<item>Item 3</item>
</list>
C- ???
<item>Item 1</item>
<item>Item 2</item>
<item>Item 3</item>
???

130
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

 Exemple 3 : Le nom de la balise de fin d'un élément doit correspondre à celui de


la balise de début. Les noms tiennent compte des majuscules et des minuscules
A- <book>Ceci est un livre</book>
B- <list>
<item>Voiture</item>
<ITEM>Avion</ITEM>
<Item>Train</Item>
</list>
C- <list>
<item>Voiture</itm>
<item>Avion</ITEM>
<item>Train</item>
</list>
 Exemple 4 : Si la balise de début figure dans le contenu d'un autre élément, la
balise de fin doit également figurer dans le contenu du même élément. Plus
simplement, les éléments délimités par les balises de début et de fin doivent
s'imbriquer correctement les uns dans les autres.
A- <Weight>
<number>12</number>
<unit>gramme</unit>
</Weight>
B- <book>
<chapter>
<title>Introduction</title>
</chapter>
<chapter>
<title>Récit</title>
<subChapter>
<title>Partie 1</title>
</subChapter>
<subChapter>
<title>Partie 2</title>
</subChapter>
</chapter>
<chapter>
<title>Index</title>
</chapter>
</book>
C- <text>
<bold><italic>XML</bold></italic>
</text>
 Exemple 5 : La fin de chaque élément commençant par une balise de début doit
être indiquée par une balise de fin comportant le même nom que celui utilisé
dans la balise de début. Le texte figurant entre la balise de début et la balise de
fin est appelé le contenu de l'élément. Un élément sans contenu prend la forme
spéciale suivante : <nom/> . La barre oblique devant le caractère > remplace la
balise de fin.
A- <listOfTags>
<AAA></AAA>
<BBB></BBB>
<CCC/>

131
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<DDD/>
</listOfTags>
B- <description>
Il y a des pommes <color>jaunes<color> et <color>rouges</color>.
</description>
 Exemple 6 : Les noms d'éléments peuvent comporter des lettres, des chiffres,
des tirets, des traits de soulignement, des deux-points ou des points. Le
caractère deux-points (:) ne peut être utilisé que dans le cas particulier où il sert
à séparer des espaces de noms. Les noms d'éléments commençant par xml, XML
ou une autre combinaison de la casse de ces lettres sont réservés à la norme
XML.

A- <permittedNames>
<name/>
<xsl:copy-of/>
<A_long_element_name/>
<A.name.separated.with.full.stops/>
<a123323123-231-231/>
<_12/>
</permittedNames>
B- <forbiddenNames>
<A;name/>
<last@name>
<@#$%^()%+?=/>
<A*2/>
<1ex/>
</forbiddenNames>
C- <forbiddenNames>
<xmlTag/>
<XMLTag/>
<XmLTag/>
<xMlTag/>
<xmLTag/>
</forbiddenNames>

 Exemple 7 : Un élément peut comporter aucun, un ou plusieurs attributs. Les


caractères autorisés sont les mêmes que pour les noms d'éléments. Le nom d'un
attribut est séparé de sa valeur par le caractère =. La valeur de l'attribut doit être
indiquée entre guillemets simples '...' ou doubles "..." . Si un guillemet simple ou
double est utilisé dans la valeur d'un attribut, le délimiteur contraire doit être
utilisé.
A- <elements-with-attributes>
<el _ok = "oui" />
<one attr = "une valeur"/>
<several first="1" second = '2' third= "333"/>
<apos_quote case1="Aujourd'hui" case2='Il lança : "Salut, tout le monde!"
'/>
</elements-with-attributes>
B- <errors>

132
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<wrong_char a*b = "23432"/>


<mismatched_separator value = "12'/>
<wrong_separator_type value="aa"aa"/>
<wrong_separator_type value='bb'bb'/>
<wrong_start XML-ID = "xml234"/>
</errors>

 Exemple 8 : Les caractères < et & ne peuvent pas être utilisés dans le texte, car
ils sont utilisés dans le balisage. Si vous devez employer ces caractères, utilisez
&lt; à la place de < et &amp; à la place de &.
A- <example>
<isLower>
23 &lt; 46
</isLower>
<ampersand>
Dupond &amp; fils
</ampersand>
</example>
B- <example>
<isLower>
23 < 46
</isLower>
<ampersand>
Dupond & fils
</ampersand>
</example>

 Exemple 9 : Les caractères >, " , et ' peuvent également être remplacés par &gt; ,
&quot; et &apos; respectivement.
A- <example>
<right-bracket> A la fois > et &gt; sont autorisés</right-bracket>
<double-quote> A la fois " et &quot; sont autorisés</double-quote>
<apostrophe> A la fois ' et &apos; sont autorisés</apostrophe>
Cela est utile dans : <el value=" &apos; &quot; &apos; "/>
</example>

 Exemple 10 : Des commentaires peuvent figurer n'importe où dans un document


en dehors des autres balises. Un processeur XML peut permettre à une
application, sans que cela soit une obligation, d'extraire le texte des
commentaires. La chaîne de caractères "--" (deux tirets) ne doit pas figurer à
l'intérieur des commentaires.
A- <!-- doc A -->
<example>
<!-- <HEAD> -->
<!-- Caractères <&< -->
</example>
B- <example>
<!-- A -- B -->
</example>

 Exemple 11 : Les sections CDATA permettent de ne pas traiter les blocs de texte

133
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

comportant des caractères qui seraient normalement identifiés comme du


balisage. Les sections CDATA commencent par la chaîne "<![CDATA[" et se
terminent par la chaîne "]]>". La chaîne ']]>' ne doit pas figurer à l'intérieur d'une
section CDATA..
A- <example>
<![CDATA[ <aaa>bb&cc<<<]]>
</example>
B- <example>
<![CDATA[ <aaa>bb ]]>cc<<<]]>
</example>

 Exemple 12 : Les documents XML peuvent, et d'ailleurs doivent, commencer par


une déclaration XML qui précise la version de la norme XML utilisée.
A- <?xml version="1.0"?>
<text>Ce document respecte la spécification XML 1.0.</text>
B- <?xml version="1.0" encoding="ISO-8859-2"?>
<text>Si aucun codage n'est indiqué, UTF-8 est pris par défaut</text>
Correction :
 Exemple 1 :
A : Document XML bien formé comportant un élément
B : Document XML bien formé comportant plusieurs éléments
C : mal formé car un document XML doit comporter au moins un élément
 Exemple 2 :
A : Document XML bien formé, <book> est l'élément racine
B : Document XML bien formé, <list> est l'élément racine
C : mal formé car seul un élément racine est autorisé
 Exemple 3 :
A : Document XML bien formé, la balise de fin </book> correspond à la balise de début
<book>
B : Ce document bien formé comporte 4 éléments différents <list>, <item>, <ITEM> et
<Item>
C : Mal formé car <item> - </itm> et <item> - </ITEM> ne correspondent pas
 Exemple 4 :
A : Document XML bien formé, ces éléments sont correctement imbriqués.
B : Dans cet exemple il s'agit aussi d'un document bien formé
C : Mal formé car l'élément <italic> n'est pas correctement imbriqué
 Exemple 5 :
A : Document XML bien formé, chaque élément comporte une balise de fin ou adopte la
forme spéciale. Il n'y a aucune différence entre <AAA></AAA> et <AAA/> en XML.
B : Mal formé car une erreur très fréquente consiste à oublier la barre oblique
 Exemple 6 :
A : Document XML bien formé, document comportant des caractères autorisés.
B : Mal formé car ce document comporte plusieurs erreurs.
C : Mal formé car les noms ne peuvent pas commencer par xml
 Exemple 7 :
A : Document XML bien formé, document comportant des attributs bien formés.
B : Mal formé car le document comportant des attributs incorrects.
 Exemple 8 :
A : Document XML bien formé, substitution de & et de <.

134
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

B : Mal formé car les caractères & et < ne peuvent pas être utilisés dans du texte.
 Exemple 9 :
A : Document XML bien formé, Substitutions possibles.
 Exemple 10 :
A : Document XML bien formé, Les commentaires peuvent comporter n'importe quel
caractère à l'exception des caractères --.
B : Mal formé car les commentaires ne doivent pas comporter la chaîne de caractères --.
 Exemple 11 :
A : Document XML bien formé, section CDATA valide.
B : Mal formé car une section CDATA ne doit pas comporter la chaîne de caractères ']]>'.
 Exemple 12 :
A : Document XML bien formé, spécification de la version XML.
B : Document XML bien formé, spécification du codage.

Exercices 3 :
Le paragraphe suivant contient de l'information "en vrac". Réorganisez-la de manière à
mettre en évidence sa structure logique, sans forcément passer par une mise en forme
XML.
Une bouteille d'eau Cristaline de 150 cl contient par litre 71 mg d'ions positifs calcium, et
5,5 mg d'ions positifs magnésium. On y trouve également des ions négatifs comme des
chlorures à 20 mg par litre et des nitrates avec 1 mg par litre. Elle est recueillie à St-Cyr
la Source, dans le département du Loiret. Son code barre est 3274080005003 et son pH
est de 7,45. Comme la bouteille est sale, quelques autres matériaux comme du fer s'y
trouvent en suspension.
Une seconde bouteille d'eau Cristaline a été, elle, recueillie à la source d'Aurèle dans les
Alpes Maritimes. La concentration en ions calcium est de 98 mg/l, et en ions magnésium
de 4 mg/l. Il y a 3,6 mg/l d'ions chlorure et 2 mg/l de nitrates, pour un pH de 7,4. Le
code barre de cette bouteille de 50 cl est 3268840001008.
Une bouteille de même contenance est de marque Volvic, et a été puisée à... Volvic, bien
connu pour ses sources donnant un pH neutre de 7. Elle comprend 11,5 mg/l d'ions
calcium, 8,0 mg/l d'ions magnésium, 13,5 mg/l d'ions chlorures et 6,3 mg/l d'ions
nitrates. Elle contient également des particules de silice. Son code barre est
3057640117008.

PS : Volvic est dans le Puy-de-Dôme...


Solution
<?xml version="1.0" encoding="ISO-8859-1" ?>
- <cave>
- <bouteille>
<marque>Cristaline</marque>
- <composition>
<ion type="positif">calcium 71mg/l</ion>
<ion type="positif">magnésium 5,5mg/l</ion>
<ion type="negatif">chlorure 20mg/l</ion>
<ion type="negatif">nitrate 1mg/l</ion>
<autre type="metal">fer</autre>
</composition>
- <source>
<ville>St-Cyr la Source</ville>
<departement>Loiret</departement>
</source>

135
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<code_barre>3274080005003</code_barre>
<contenance unit="cl">150</contenance>
<ph>7,45</ph>
</bouteille>
- <bouteille>
<marque>Cristaline</marque>
- <composition>
<ion type="positif">calcium 98mg/l</ion>
<ion type="positif">magnésium 4mg/l</ion>
<ion type="negatif">chlorure 3,6mg/l</ion>
<ion type="negatif">nitrate 2mg/l</ion>
</composition>
- <source>
<ville>Aurèle</ville>
<departement>Alpes Maritimes</departement>
</source>
<code_barre>3268840001008</code_barre>
<contenance unit="cl">50</contenance>
<ph>7,4</ph>
</bouteille>
- <bouteille>
<marque>Volvic</marque>
- <composition>
<ion type="positif">calcium 11,5mg/l</ion>
<ion type="positif">magnésium 8mg/l</ion>
<ion type="negatif">chlorure 13,5mg/l</ion>
<ion type="negatif">nitrate 6,3mg/l</ion>
</composition>
- <source>
<ville>Volvic</ville>
<departement>Puy-de-Dôme</departement>
</source>
<code_barre>3057640117008</code_barre>
<contenance unit="cl">50</contenance>
<ph>7</ph>
</bouteille>
</cave>

Exercices 4 :
Il s'agit de structurer, sous la forme d'un fichier XML, le texte suivant :

Il existe diverses variétés de nuages. La plupart de ceux dont nous allons


parler ne produit aucun "hydrométéore", sauf le cumulonimbus, qui est
accompagné d'averses (parfois sous la forme de neige, de grésil ou de
grêle).
L'altocumulus et le cirrocumulus partagent les mêmes "espèces" :
lenticularis, stratiformis, castellanus et flocus. On retrouve ces deux espèces
également chez le cirrus, ainsi que les espèces spissatus, uncinus et fibratus.
Les espèces stratiformis, lenticularis et castellanus sont quant à elles
partagées également avec les strato-cumulus.
Ces derniers peuvent se traîner au ras du sol et monter à 2000m, mais
certains nuages ont une altitude minimale à peine plus élevée, puisqu'elle
n'est que de 200m pour les cumulus, et de 300m pour les cumulonimbus. Il
136
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

est vrai que ces derniers compensent en montant jusqu'à une altitude
maximale de 18000m, soit plus haut encore que les cirrus, qui plafonnent à
12000m. L'altitude minimale de ces derniers coïncide avec la fin de la
présence possible des altocumulus, à 6000m. Et c'est autour de cette zone,
entre 5000 et 7000m, que se trouvent les cirrocumulus. L'altitude minimale
des altocumulus est de 2000m, soit quatre fois moins que l'altitude
maximale des cumulus.
Ces pauvres cumulus ne sont pas favorisés en nom d'espèces, puisqu'ils se
trouvent affligés de noms tels que fractus, mediocris, humilis et congestus...
alors que les cumulonimbus ont des espèces aux noms plus... capillaires tels
que calvus, capillatus. Les très gros cumulonimbus sont appelés mammatus.

Solution
<?xml version="1.0" encoding="ISO-8859-1" ?>
- <nuages>
- <nuage>
- <nom>
altocumulus
<espece>lenticularis</espece>
<espece>stratiformis</espece>
<espece>castellanus</espece>
<espece>flocus</espece>
</nom>
<altitude max="6000" min="2000" />
<hydrometeores>Aucun.</hydrometeores>
</nuage>
- <nuage>
- <nom>
cirrus
<espece>flocus</espece>
<espece>castellanus</espece>
<espece>spissatus</espece>
<espece>uncinus</espece>
<espece>fibratus</espece>
</nom>
<altitude max="12000" min="6000" />
<hydrometeores>Aucun.</hydrometeores>
</nuage>
- <nuage>
- <nom>
cirrocumulus
<espece>lenticularis</espece>
<espece>stratiformis</espece>
<espece>flocus</espece>
<espece>castellanus</espece>
</nom>
<altitude max="7000" min="5000" />
<hydrometeores>Aucun.</hydrometeores>
</nuage>
- <nuage>
- <nom>
cumulus
<espece>fractus</espece>

137
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<espece>humilis</espece>
<espece>mediocris</espece>
<espece>congestus</espece>
</nom>
<altitude max="8000" min="200" />
<hydrometeores>Aucun en général.</hydrometeores>
</nuage>
- <nuage>
- <nom>
strato-cumulus
<espece>stratiformis</espece>
<espece>lenticularis</espece>
<espece>castellanus</espece>
</nom>
<altitude max="2000" min="0" />
<hydrometeores>Aucun.</hydrometeores>
</nuage>
- <nuage>
- <nom>
cumulonimbus
<espece>calvus</espece>
<espece>capillatus</espece>
<espece>mammatus</espece>
</nom>
<altitude max="18000" min="300" />
<hydrometeores>Averses (parfois de neige, de grésil ou de
grêle).</hydrometeores>
</nuage>
</nuages>

Exercices 5 :
On souhaite écrire un livre en utilisant le formalisme XML. Le livre est structuré en
sections (au moins 2), en chapitres (au moins 2) et en paragraphes (au moins 2).
Le livre doit contenir la liste des auteurs (avec nom et prénom).
Tous les éléments doivent posséder un titre, sauf le paragraphe qui contient du texte.
Proposez une structuration XML de ce document (avec 2 auteurs, 2 sections, 2 chapitres
par section et 2 paragraphes par chapitre).
Vérifiez, à l’aide de l’éditeur, que votre document est bien formé.
Attention : ne pas utiliser d’attributs ; l’encodage utilisé est ISO-8859-1
Votre document sera nommé livre1.xml.

Solution
Le fichier livre1.xml est le suivant :
<?xml version="1.0" encoding="iso-8859-1"?>
<livre>
<titre>Mon livre</titre>
<auteurs>
<auteur>
<nom>Brillant</nom>
<prenom>Alexandre</prenom>
</auteur>
<auteur>
<nom>Briand</nom>
<prenom>Aristide</prenom>

138
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</auteur>
</auteurs>
<sections>
<section>
<titre>Section 1</titre>
<chapitres>
<chapitre>
<titre>Chapitre 1</titre>
<paragraphes>
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</paragraphes>
</chapitre>
<chapitre>
<titre>Chapitre 2</titre>
<paragraphes>
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</paragraphes>
</chapitre>
</chapitres>
</section>
<section>
<titre>Section 2</titre>
<chapitres>
<chapitre>
<titre>Chapitre 1</titre>
<paragraphes>
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</paragraphes>
</chapitre>
<chapitre>
<titre>Chapitre 2</titre>
<paragraphes>
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</paragraphes>
</chapitre>
</chapitres>
</section>
</sections>
</livre>

Exercices 6 :
On souhaite compléter la structure du document XML de l’exercice précédent
(livre1.xml) par les attributs nom et prenom pour les auteurs et titre pour le livre, les
sections et les chapitres.
Analysez la structure du nouveau document. Y a-t-il des simplifications possibles ?
Vérifiez, à l’aide de l’éditeur, que votre document livre2.xml est bien formé.

Solution
Le fichier livre2.xml est le suivant :
<?xml version="1.0" encoding="iso-8859-1"?>
<livre>
<titre>Mon livre</titre>
<auteurs>
<auteur nom="Brillant" prenom="Alexandre"/>
<auteur nom="Briand" prenom="Aristide"/>

139
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</auteurs>
<sections>
<section titre="Section 1">
<chapitre titre="Chapitre 1">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
<chapitre titre="Chapitre 2">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
</section>
<section titre="Section 2">
<chapitre titre="Chapitre 1">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
<chapitre titre="Chapitre 2">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
</section>
</sections>
</livre>

Comme l’élément titre disparaît au profit de l’attribut, nous pouvons alléger notre
structure en éliminant les blocs superflus, comme chapitres et paragraphes.

Exercices 7 :
On se propose de créer un nouveau document livre2bis.xml reprenant l’exercice
précédent (livre2.xml). Dans l'élément section qui a pour titre section 2, dans le sous
élément chapitre qui a pour titre chapitre 2, placez dans les deux paragraphes, un bloc
de texte contenant l’extrait suivant :
<element id="10">&gt;</element>
Pour le premier paragraphe, employez les entités prédéfinies.
Pour le deuxième paragraphe, employez une section CDATA.

Solution
Le fichier livre2bis.xml est le suivant :
<?xml version="1.0" encoding="iso-8859-1"?>
<livre>
<titre>Mon livre</titre>
<auteurs>
<auteur nom="Brillant" prenom="Alexandre"/>
<auteur nom="Briand" prenom="Aristide"/>
</auteurs>
<sections>
<section titre="Section 1">
<chapitre titre="Chapitre 1">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
<chapitre titre="Chapitre 2">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>

140
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</section>
<section titre="Section 2">
<chapitre titre="Chapitre 1">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
<chapitre titre="Chapitre 2">
<paragraphe>
&lt;element
id=&quot;10&quot;&gt;&amp;gt;&lt;/element&gt;
</paragraphe>
<paragraphe><![CDATA[<element
id="10">&gt;</element>]]></paragraphe>
</chapitre>
</section>
</sections>
</livre>

141
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 18
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision B Développer des applications XML

Code Activité B018

Activité Rédiger un schéma DTD

Durée 4H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Rédiger un schéma DTD
Détails sur les objectifs  Répond à un ensemble type d’exigences.
visés par l’activité  Valider les données spécifiées dans un
document XML.

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
XmlSpy ou autre
outillage

142
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 :
Pour chaque exemple déterminer s'il s'agit d'un document valide ou non valide :

 Exemple 1 : Un document ne peut comporter qu'un seul élément racine tutorial


qui peut contenir du texte : <!ELEMENT tutorial (#PCDATA)>

A- <tutorial>Ceci est un document XML</tutorial>


B- <tutorial/>
C- <text>Ceci est un document XML</text>

 Exemple 2 : L'élément racine XXX doit précisément comporter un élément AAA,


suivi d'un élément BBB. Les éléments AAA et BBB peuvent contenir du texte,
mais aucun autre élément : <!ELEMENT XXX (AAA , BBB)>
<!ELEMENT AAA (#PCDATA)>
<!ELEMENT BBB (#PCDATA)>
A- <XXX>
<AAA>Début</AAA>
<BBB>Fin</BBB>
</XXX>
B- <XXX> <AAA/> <BBB/> </XXX>
C- <XXX> <AAA/> ___ </XXX>
D- <XXX> <BBB/> <AAA/> </XXX>
E- <XXX> <AAA/> <BBB/> <BBB/> </XXX>
F- <XXX> Eléments : <AAA/> <BBB/> </XXX>

 Exemple 3 : L'élément racine XXX peut contenir zéro, un ou plusieurs éléments


AAA, suivis précisément d'un élément BBB. L'élément BBB doit toujours être
présent :
<!ELEMENT XXX (AAA* , BBB)>
<!ELEMENT AAA (#PCDATA)>
<!ELEMENT BBB (#PCDATA)>
A- < XXX> <AAA/> <BBB/> </XXX>
B- <XXX> <BBB/> </XXX>
C- <XXX> <AAA/> <AAA/> <AAA/> <AAA/> <AAA/> <AAA/> <AAA/> <BBB/>
</XXX>
D- <XXX> ___ </XXX>
E- <XXX> <BBB/> <AAA/> </XXX>
F- <XXX> <AAA/> <AAA/> <AAA/> <AAA/> <BBB/> <AAA/> <AAA/> </XXX>

 Exemple 4 : L'élément racine XXX doit contenir un ou plusieurs éléments AAA,


suivis précisément d'un élément BBB. L'élément BBB doit toujours être présent
<!ELEMENT XXX (AAA+ , BBB)>
<!ELEMENT AAA (#PCDATA)>
<!ELEMENT BBB (#PCDATA)>
A- <XXX> <AAA/> <BBB/> </XXX>
B- <XXX> <AAA/> <AAA/> <AAA/> <AAA/> <AAA/> <AAA/> <AAA/> <BBB/>
</XXX>
C- <XXX> ___ ___ </XXX>
D- <XXX> ___<BBB/> </XXX>
143
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

E- <XXX> <BBB/> <AAA/> </XXX>


F- <XXX> <AAA/> <AAA/> <AAA/> <AAA/> <BBB/> <AAA/> <AAA/> </XXX>

 Exemple 5 : L'élément racine XXX peut contenir un élément AAA, suivi


précisément d'un élément BBB. L'élément BBB doit toujours être présent :
<!ELEMENT XXX (AAA? , BBB)>
<!ELEMENT AAA (#PCDATA)>
<!ELEMENT BBB (#PCDATA)>
A- <XXX> <AAA/> <BBB/> </XXX>
B- <XXX> <BBB/> </XXX>
C- <XXX> ___ </XXX>
D- <XXX> <AAA/> <AAA/> <AAA/> <AAA/> <AAA/> <AAA/> <AAA/> <BBB/>
</XXX>
E- <XXX> <BBB/> <AAA/> </XXX>

 Exemple 6 : L'élément racine XXX peut contenir un élément AAA, suivi d'un ou
de plusieurs éléments BBB. L'élément AAA peut contenir un élément CCC et
plusieurs éléments DDD. L'élément BBB doit précisément contenir un élément
CCC et un élément DDD
<!ELEMENT XXX (AAA? , BBB+)>
<!ELEMENT AAA (CCC? , DDD*)>
<!ELEMENT BBB (CCC , DDD)>
<!ELEMENT CCC (#PCDATA)>
<!ELEMENT DDD (#PCDATA)>
A- <XXX>
<AAA>
<CCC/><DDD/>
</AAA>
<BBB>
<CCC/><DDD/>
</BBB>
</XXX>
B- <XXX>
<AAA/>
<BBB>
<CCC/><DDD/>
</BBB>
</XXX>
C- <XXX>
<BBB>
<CCC/><DDD/>
</BBB>
</XXX>
D- <XXX>
<AAA/>
<BBB/>
</XXX>
E- <XXX>
<AAA>
<CCC/><CCC/>
<DDD/><DDD/>

144
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</AAA>
<BBB>
<CCC/><DDD/>
</BBB>
</XXX>

 Exemple 7 : L'élément racine XXX doit contenir un élément AAA, suivi d'un
élément BBB. L'élément AAA doit contenir un élément CCC, suivi d'un élément
DDD. L'élément BBB doit contenir soit un élément CCC, soit un élément DDD
<!ELEMENT XXX (AAA , BBB)>
<!ELEMENT AAA (CCC , DDD)>
<!ELEMENT BBB (CCC | DDD)>
<!ELEMENT CCC (#PCDATA)>
<!ELEMENT DDD (#PCDATA)>
A- <XXX>
<AAA>
<CCC/> <DDD/>
</AAA>
<BBB>
<CCC/>
</BBB>
</XXX>
B- <XXX>
<AAA>
<CCC/> <DDD/>
</AAA>
<BBB>
<DDD/>
</BBB>
</XXX>
C- <XXX>
<AAA>
<CCC/> <DDD/>
</AAA>
<BBB>
<CCC/> <DDD/>
</BBB>
</XXX>

D- <XXX>
<AAA>
<CCC/> <DDD/>
</AAA>
<BBB>
<DDD/> <CCC/>
</BBB>
</XXX>

 Exemple 8 : L'élément AAA peut contenir soit un élément BBB, soit un élément
CCC. En revanche, l'élément BBB peut contenir n'importe quelle combinaison de
texte et d'éléments CCC.

145
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<!ELEMENT XXX (AAA+ , BBB+)>


<!ELEMENT AAA (BBB | CCC )>
<!ELEMENT BBB (#PCDATA | CCC )*>
<!ELEMENT CCC (#PCDATA)>
A- <XXX>
<AAA>
<CCC>Précisément un élément.</CCC>
</AAA>
<AAA>
<BBB>
<CCC/>
<CCC/>
<CCC/>
</BBB>
</AAA>
<BBB/>
<BBB>
Voici <CCC/> une combinaison <CCC/> d'<CCC>éléments CCC
</CCC> et
de texte <CCC/>.
</BBB>
<BBB>
Uniquement du texte.
</BBB>
</XXX>
B- <XXX>
<AAA>
Elément : <CCC/>
</AAA>
<BBB>
Elément : <CCC/>
</BBB>
</XXX>

 Exemple 9 : Un attribut de type CDATA peut contenir n'importe quel caractère,


s'il respecte les contraintes de forme. L'attribut obligatoire doit toujours être
présent, tandis que l'attribut implicite est facultatif :
<!ELEMENT attributes (#PCDATA)>
<!ATTLIST attributes
aaa CDATA #REQUIRED
bbb CDATA #IMPLIED>
A- <attributes aaa="#d1" bbb="*~*">
Texte
</attributes>
B- <attributes bbb="$25" aaa="13%">
Texte
</attributes>
C- <attributes aaa="#d1" />
D- <attributes bbb="X24"/>

 Exemple 10 : Les attributs bbb et ccc doivent toujours être présents, tandis que

146
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

l'attribut aaa est facultatif :


<!ELEMENT attributes (#PCDATA)>
<!ATTLIST attributes
aaa CDATA #IMPLIED
bbb NMTOKEN #REQUIRED
ccc NMTOKENS #REQUIRED>
A- <attributes aaa="#d1" bbb="a1:12" ccc=" 3.4 div -4"/>
B- <attributes bbb="a1:12"
ccc="3.4
div
-4"/>
C- <attributes aaa="#d1" bbb="#d1" ccc="#d1"/>
D- <attributes bbb="A B C" ccc="A B C"/>

 Exemple 11 : Les attributs id, code et X identifient de manière unique leur


élément :
<!ELEMENT XXX (AAA+ , BBB+ , CCC+)>
<!ELEMENT AAA (#PCDATA)>
<!ELEMENT BBB (#PCDATA)>
<!ELEMENT CCC (#PCDATA)>
<!ATTLIST AAA
id ID #REQUIRED>
<!ATTLIST BBB
code ID #IMPLIED
list NMTOKEN #IMPLIED>
<!ATTLIST CCC
X ID #REQUIRED
Y NMTOKEN #IMPLIED>
A- <XXX>
<AAA id="a1"/>
<AAA id="a2"/>
<AAA id="a3"/>
<BBB code="QWQ-123-14-6" list="14:5"/>
<CCC X="zero" Y="16" />
</XXX>
B- <XXX>
<AAA id="L12"/>
<BBB code="QW" list="L12"/>
<CCC X="x-0" Y="QW" />
<CCC X="x-1" Y="QW" />
</XXX>
C- <XXX>
<AAA id="L12"/>
<BBB code="#QW" list="L12"/>
<CCC X="12" Y="QW" />
</XXX>
D- <XXX>
<AAA id="L12"/>
<BBB code="QW" list="L12"/>

147
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<CCC X="ZA" Y="QW" />


<CCC X="ZA" Y="QW" />
</XXX>

E- <XXX>
<AAA id="L12"/>
<BBB code="QW" list="L12"/>
<CCC X="L12" Y="QW" />
</XXX>

 Exemple 12 : Les attributs id, code et X identifient de manière unique leur


élément :
<!ELEMENT XXX (AAA+ , BBB+, CCC+, DDD+)>
<!ELEMENT AAA (#PCDATA)>
<!ELEMENT BBB (#PCDATA)>
<!ELEMENT CCC (#PCDATA)>
<!ELEMENT DDD (#PCDATA)>
<!ATTLIST AAA
mark ID #REQUIRED>
<!ATTLIST BBB
id ID #REQUIRED>
<!ATTLIST CCC
ref IDREF #REQUIRED>
<!ATTLIST DDD
ref IDREFS #REQUIRED>
A- <XXX>
<AAA mark="a1"/>
<AAA mark="a2"/>
<AAA mark="a3"/>
<BBB id="b001" />
<CCC ref="a3" />
<DDD ref="a1 b001 a2" />
</XXX>
B- <XXX>
<AAA mark="a1"/>
<AAA mark="a2"/>
<BBB id="b01" />
<CCC ref="a3" />
<DDD ref="a1 b001 a2" />
</XXX>
C- <XXX>
<AAA mark="a1"/>
<AAA mark="a2"/>
<AAA mark="a3"/>
<BBB id="b001" />
<CCC ref="a1 b001 a2" />
<DDD ref="a1 b001 a2" />
</XXX>

 Exemple 13 : Cette DTD définit précisément les valeurs autorisées :

148
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<!ELEMENT XXX (AAA+, BBB+)>


<!ELEMENT AAA (#PCDATA)>
<!ELEMENT BBB (#PCDATA)>
<!ATTLIST AAA
vrai ( oui | non ) #REQUIRED>
<!ATTLIST BBB
mois (1|2|3|4|5|6|7|8|9|10|11|12) #IMPLIED>
A- <XXX>
<AAA vrai="oui"/>
<AAA vrai="non"/>
<AAA vrai="oui"/>
<BBB mois="8" />
<BBB mois="2" />
<BBB mois="12" />
</XXX>
B- <XXX>
<AAA vrai="oui"/>
<AAA vrai="non"/>
<AAA vrai="peut-être"/>
<BBB mois="8" />
<BBB mois="2" />
<BBB mois="16" />
</XXX>

 Exemple 14 : Les deux attributs sont implicites. Leur valeur par défaut est définie
:
<!ELEMENT XXX (AAA+, BBB+)>
<!ELEMENT AAA (#PCDATA)>
<!ELEMENT BBB (#PCDATA)>
<!ATTLIST AAA
vrai ( oui | non ) "oui">
<!ATTLIST BBB
mois NMTOKEN "1">
A- <XXX>
<AAA vrai="oui"/>
<AAA vrai="non"/>
<AAA/>
<BBB mois="8" />
<BBB mois="2" />
<BBB/>
</XXX>

 Exemple 15 : Les éléments AAA ne peuvent contenir que des attributs, mais pas
de texte :
<!ELEMENT XXX (AAA+)>
<!ELEMENT AAA EMPTY>
<!ATTLIST AAA
vrai ( oui | non ) "oui">
A- <XXX>
<AAA vrai="oui"/>
<AAA vrai="non"></AAA>

149
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</XXX>
B- <XXX>
<AAA vrai="oui"/>
<AAA vrai="non"></AAA>
<AAA> </AAA>
<AAA>Salut !</AAA>
</XXX>

Solution
 Exemple 1 :
A : Document XML valide comportant du texte
B : Ce document est également valide
C : Document non valide, l'élément texte n'est pas conforme à la DTD spécifiée

 Exemple 2 :
A : Document valide
B : Ce document est également valide
C : Document non valide, l'élément BBB est absent
D : Document non valide, l'élément BBB doit suivre l'élément AAA
E : Document non valide, l'élément racine XXX ne peut contenir qu'un élément BBB
F : Document non valide, l'élément racine XXX ne doit contenir aucun texte

 Exemple 3 :
A : Document valide
B : Autre document valide, l'élément AAA n'est pas obligatoire
C : Document valide, Plusieurs éléments AAA peuvent figurer dans le document
D : Document non valide, l'élément BBB est absent
E : Document non valide, l'élément BBB doit suivre l'élément AAA
F : Document non valide, l'élément AAA ne doit pas suivre l'élément BBB

 Exemple 4 :
A : Document valide
B : Document valide, plusieurs éléments AAA peuvent figurer dans le document
C : Document non valide, les éléments AAA et BBB sont absents
D : Document non valide, au moins un élément AAA doit être présent
E : Document non valide, L'élément BBB doit suivre l'élément AAA
F : Document non valide, l'élément AAA ne doit pas suivre l'élément BBB

 Exemple 5 :
A : Document valide
B : Document valide, l'élément AAA n'est pas obligatoire
C : Document non valide, l'élément BBB est absent
D : Document non valide, un élément AAA au maximum peut figurer une seule fois dans
le document
E : Document non valide, l'élément BBB doit suivre l'élément AAA

 Exemple 6 :
A : Document valide
B : Document valide, les éléments fils de l'élément AAA ne sont pas obligatoires
C : Document non valide, l'élément AAA peut être omis

150
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

D : Document non valide, l'élément BBB doit contenir les éléments CCC et DDD
E : Document non valide, l'élément AAA peut contenir un élément CCC au maximum

 Exemple 7 :
A : Document valide
B : Autre document valide
C : Document non valide, l'élément BBB peut contenir soit un élément CCC, soit un
élément DDD, mais pas les deux à la fois
D : Document non valide, L'élément BBB peut contenir soit un élément CCC, soit un
élément DDD, mais pas les deux à la fois

 Exemple 8 :
A : Document valide exploitant plusieurs possibilités
B : Document non valide, l'élément AAA ne peut pas contenir de texte

 Exemple 9 :
A : Document valide, l'attribut de type CDATA peut contenir n'importe quel caractère
respectant les contraintes de forme
B : Document valide, l'ordre des attributs n'a pas d'importance
C : Document valide, l'attribut bbb peut être omis, car il est implicite
D : Document non valide, l'attribut aaa étant obligatoire, il doit donc être toujours
présent

 Exemple 10 :
A : Document valide, tous les attributs obligatoires sont présents et le type de leur valeur
est correct
B : Document valide, tous les attributs obligatoires sont présents et le type de leur valeur
est correct
C : Document valide, le caractère # est interdit dans les attributs de type NMTOKEN et
NMTOKENS
D : Document non valide, l'espace est interdit dans les attributs de type NMTOKEN

 Exemple 11 :
A : Document valide, toutes les valeurs ID sont uniques
B : Document valide, les attributs list et Y sont de type NMTOKEN, et pas de type ID. Ils
peuvent donc avoir la même valeur que les attributs ID ou la même valeur dans plusieurs
éléments
C : Document non valide, l'attribut ID ne doit pas commencer par un nombre ou
contenir un caractère interdit pour le type NMTOKEN
D : Document non valide, l'attribut ID doit comporter une valeur unique
F : Document non valide, l'attribut ID doit comporter une valeur unique. Les attributs id
et X sont tous les deux de type ID

 Exemple 12 :
A : Document valide, toutes les valeurs des attributs ID sont uniques et tous les attributs
IDREF et IDREFS pointent vers des éléments comportant des attributs ID appropriés
B : Document non valide, il n'y a aucun attribut ID ayant a3 ou b001 comme valeur
C : Document non valide, l'attribut ref de l'élément CCC est de type IDREF. Il ne peut
contenir qu'une seule référence

151
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

 Exemple 13 :
A : Document valide, Toutes les valeurs sont définies dans la DTD
B : Document non valide, L'attribut vrai ne peut pas avoir "peut-être" comme valeur, et
l'attribut mois ne peut pas avoir "16" comme valeur

 Exemple 14 :
A : Document valide, les différentes valeurs de l'attribut vrai sont oui, non et oui. Les
différentes valeurs de l'attribut mois sont 8, 2 et 1

 Exemple 15 :
A : Document valide, ces deux formes sont autorisées. Dans le second cas, la balise de fin
doit immédiatement suivre la balise de début
B : Document non valide, l'élément AAA ne doit pas contenir de texte

Exercices 2 :
Créez la DTD carnet.dtd suivante :
<!ELEMENT carnet (personne+)>
<!ELEMENT personne EMPTY>
<!ATTLIST personne
nom CDATA #REQUIRED
prenom CDATA #IMPLIED
telephone CDATA #REQUIRED>

Créez un document XML qui soit valide par rapport à cette DTD.
Correction :
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE carnet SYSTEM "carnet.dtd">
<carnet>
<personne nom="dupont" prenom="jean" telephone="001122"/>
<personne nom="dupond" telephone="221100"/>
</carnet>

Exercices 3 :
Créez une DTD livre.dtd à partir du document livre2.xml suivant :
<?xml version="1.0" encoding="iso-8859-1"?>
<livre>
<titre>Mon livre</titre>
<auteurs>
<auteur nom="Brillant" prenom="Alexandre"/>
<auteur nom="Briand" prenom="Aristide"/>
</auteurs>
<sections>
<section titre="Section 1">
<chapitre titre="Chapitre 1">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
<chapitre titre="Chapitre 2">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
</section>
<section titre="Section 2">
<chapitre titre="Chapitre 1">
<paragraphe>Premier paragraphe</paragraphe>

152
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
<chapitre titre="Chapitre 2">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
</section>
</sections>
</livre>

Correction :
<!ELEMENT livre (auteurs,sections)>
<!ELEMENT auteurs (auteur+)>
<!ELEMENT auteur EMPTY>
<!ELEMENT sections (section+)>
<!ELEMENT section (chapitre,chapitre+)>
<!ELEMENT chapitre (paragraphe,paragraphe+)>
<!ELEMENT paragraphe (#PCDATA)>
<!ATTLIST livre titre CDATA #REQUIRED>
<!ATTLIST section titre CDATA #REQUIRED>
<!ATTLIST chapitre titre CDATA #REQUIRED>
<!ATTLIST auteur nom CDATA #REQUIRED prenom CDATA #REQUIRED>

Exercices 4 :
Modifiez la DTD créée dans l’exercice 3 pour faire en sorte que la définition de l’attribut
titre soit unique à l’aide d’une entité paramétrique.
Correction :
<!ELEMENT livre (auteurs,sections)>
<!ELEMENT auteurs (auteur+)>
<!ELEMENT auteur EMPTY>
<!ELEMENT sections (section+)>
<!ELEMENT section (chapitre,chapitre+)>
<!ELEMENT chapitre (paragraphe,paragraphe+)>
<!ELEMENT paragraphe (#PCDATA)>
<!ENTITY % titre "titre CDATA #REQUIRED">
<!ATTLIST livre %titre;>
<!ATTLIST section %titre;>
<!ATTLIST chapitre %titre;>
<!ATTLIST auteur nom CDATA #REQUIRED prenom CDATA #REQUIRED>

Exercices 5 :
Rédiger une DTD pour une bibliographie. Cette bibliographie :
 Contient des livres et des articles ;
 Les informations nécessaires pour un livre sont :
- Son titre général ;
- Les noms des auteurs ;
- Ses tomes et pour chaque tome, leur nombre de pages ;
- Des informations générales sur son édition comme par exemple le nom de
l'éditeur,
le lieu d'édition, le lieu d'impression, son numéro ISBN ;
 Les informations nécessaires pour un article sont :
- Son titre ;
- Les noms des auteurs ;
- Ses références de publication : nom du journal, numéro des pages, année de
publication et numéro du journal
 On réservera aussi un champ optionnel pour un avis personnel.

153
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Tester cette DTD avec un fichier XML.


Correction :
<?xml version="1.0" encoding="utf-8"?>
<!ELEMENT biblio (livre,article)*>
<!ELEMENT livre (titre, auteur+, tome*, edition, avis?)>
<!ELEMENT titre (#PCDATA)>
<!ELEMENT auteur (#PCDATA)>
<!ELEMENT tome (nb_pages)>
<!ELEMENT nb_pages (#PCDATA)>
<!ELEMENT edition (editeur, lieu_edition, lieu_impression, isbn)>
<!ELEMENT editeur (#PCDATA)>
<!ELEMENT lieu_edition (#PCDATA)>
<!ELEMENT lieu_impression (#PCDATA)>
<!ELEMENT isbn (#PCDATA)>
<!ELEMENT avis (#PCDATA)>
<!ELEMENT article (titre, auteur+, journal)>
<!ELEMENT journal (nom_journal, page, num_journal, annee)>
<!ELEMENT nom_journal (#PCDATA)>
<!ELEMENT page (#PCDATA)>
<!ELEMENT num_journal (#PCDATA)>

Exercices 6 :
Modifier la DTD précédente...
 en ajoutant un attribut optionnel soustitre à l'élément titre ;
 en faisant de l'élément tome un élément vide et en lui ajoutant un attribut requis
nb_pages et un attribut optionnel soustitre ;
 en faisant de l'élément nom_journal un attribut de l'élément journal et en lui
donnant comme valeur par défaut Feuille de Chou ;
 en faisant de l'élément annee un attribut de type énuméré, prenant comme
valeurs possibles 2000, 2001, 2002, "avant_2000" et "inconnue" et proposant
comme valeur par défaut inconnue.
Utiliser cette DTD pour créer un fichier XML valide.
Correction :
<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT biblio (livre|article)*>
<!ELEMENT livre (titre, auteur+, tome*, edition, avis?)>
<!ATTLIST titre soustitre CDATA #IMPLIED>
<!ELEMENT titre (#PCDATA)>
<!ELEMENT auteur (#PCDATA)>
<!ELEMENT tome EMPTY>
<!ATTLIST tome nb_pages CDATA #REQUIRED soustitre CDATA #IMPLIED>
<!ELEMENT edition (editeur, lieu_edition, lieu_impression, isbn)>
<!ELEMENT editeur (#PCDATA)>
<!ELEMENT lieu_edition (#PCDATA)>
<!ELEMENT lieu_impression (#PCDATA)>
<!ELEMENT isbn (#PCDATA)>
<!ELEMENT avis (#PCDATA)>
<!ELEMENT article (titre, auteur+, journal)>
<!ELEMENT journal (page, num_journal)>
<!ATTLIST journal nom_journal CDATA "Feuille de Chou"
annee (2000 | 2001 | 2002 | avant_2000 |
inconnue) "inconnue">
<!ELEMENT page (#PCDATA)>
<!ELEMENT num_journal (#PCDATA)>
<!ELEMENT annee (#PCDATA)>

154
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercices 7 :
1- Rédiger un document XML de quelques mots, comportant une DTD externe déclarant
deux éléments :
 elt.racine peut contenir autant de fois que l'on veut du texte ou elt.enfant ;
 elt.enfant peut contenir du texte.
2- Déclarer dans la DTD une entité paramétrique entite1 permettant d'insérer dans la
DTD la chaîne de caractères "#PCDATA|elt.enfant". Utiliser cette entité dans la
déclaration de l'élément elt.racine.
3- Compléter la déclaration de type de document du fichier XML, dans le document XML
lui-même en :
 déclarant une entité entite2 permettant d'insérer
"<elt.enfant>entité</elt.enfant>" et l'appeler dans un corps de texte d'elt.racine.
 déclarant l'entité de caractère Eacute comme étant le caractère &#201; (qui
correspond à É). L'appeler dans un corps de texte.
Correction : Fichier xml
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE elt.racine SYSTEM "exo6.dtd">
<elt.racine>
A l'intérieur d'un élément enfant:
<elt.enfant>sgrogneugneu</elt.enfant>
Avec une entité de caractère: ‫ة‬
</elt.racine>
Le fichier exo7.dtd :
<?xml version="1.0" encoding="UTF-8"?>
<!ENTITY % entite1 "#PCDATA|elt.enfant">
<!ELEMENT elt.racine (%entite1;)*>
<!ELEMENT elt.enfant (#PCDATA)>

155
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 19
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision B Développer des applications XML

Code Activité B019

Activité Rédiger un schéma XSD

Durée 4H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Rédiger un schéma XSD
Détails sur les objectifs  Répond à un ensemble type d’exigences.
visés par l’activité  Valider les données spécifiées dans un
document XML.

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
XmlSpy ou autre
outillage

156
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 :
Soit un document XML contenant un nombre indéterminé d’éléments sous la forme :
<contact titre="..." techno="...">
<nom>...</nom>
<prenom>...</prenom>
<telephone> ...</telephone>
<email>...</email>
<email>...</email>
...
</contact>
L’élément telephone et l’attribut techno sont en option . Les textes seront des chaînes
simples
xs:string.
Vous utiliserez les types complexes numerosType et contactType pour construire un
schéma
nommé annuaire.xsd.
Correction :
<?xml version="1.0" encoding="ISO-8859-1"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:complexType name="numerosType">
<xs:sequence>
<xs:element name="contact" type="contactType"
maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="contactType">
<xs:sequence>
<xs:element name="nom" type="xs:string"/>
<xs:element name="prenom" type="xs:string"/>
<xs:element name="telephone" type="xs:string" minOccurs="0"/>
<xs:element name="email" type="xs:string"
maxOccurs="unbounded"/></xs:sequence>
<xs:attribute name="titre" type="xs:string" use="required"/>
<xs:attribute name="techno" type="xs:string" use="optional"/>
</xs:complexType>
<xs:element name="numeros" type="numerosType"/>
</xs:schema>

Exercice 2 :
Créez un schéma annuaire2.xsd à partir du schéma de l’exercice précédent.
Définissez et utilisez les types simples suivants :
• technoType : énumération dont les valeurs possibles sont XML, Java, Autre.
• telType : liste de 5 entiers (attention : créez d’abord un type pour la liste d’entiers).
• emailType : pattern [a-z]+@[a-z]+\.[a-z]{2,3}
Validez ce nouveau schéma sur un document de votre conception.

Correction :
<?xml version="1.0" encoding="ISO-8859-1"?>
<xs:schema
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:simpleType name="technoType">
<xs:restriction base="xs:string">
<xs:enumeration value="XML"/>
<xs:enumeration value="Java"/>

157
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<xs:enumeration value="Autre"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="listIntType">
<xs:list itemType="xs:int">
</xs:list>
</xs:simpleType>
<xs:simpleType name="telType">
<xs:restriction base="listIntType">
<xs:length value="5"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="emailType">
<xs:restriction base="xs:string">
<xs:pattern value="[a-z]+@[a-z]+\.[a-z]{2,3}"/>
</xs:restriction>
</xs:simpleType>
<xs:complexType name="numerosType">
<xs:sequence>
<xs:element name="contact" type="contactType"
maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="contactType">
<xs:sequence>
<xs:element name="nom" type="xs:string"/>
<xs:element name="prenom" type="xs:string"/>
<xs:element name="telephone" type="telType" minOccurs="0"/>
<xs:element name="email" type="emailType" maxOccurs="unbounded"/>
</xs:sequence>
<xs:attribute name="titre" type="xs:string" use="required"/>
<xs:attribute name="techno" type="technoType" use="optional"/>
</xs:complexType>
<xs:element name="numeros" type="numerosType"/>
</xs:schema>
Exercice 3
Réalisez le schéma livre.xsd pour le document livre2.xml (construit dans le chapitre
précédent).
Consignes :
1. N’utilisez pas de type complexe anonyme.
2. Créez et utilisez un groupe représentant une liste d’auteurs (auteursGrp).
3. Créez et utilisez un groupe d’attributs (avecTitre) représentant un titre.
4. Faites en sorte que chaque section puisse également contenir une liste d’auteurs
(donc en
utilisant le groupe).

Correction :
<?xml version="1.0" encoding="ISO-8859-1"?>
<xs:schema
attributeFormDefault="unqualified"
elementFormDefault="qualified"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:complexType name="livreType">
<xs:sequence>
<xs:element name="auteurs" type="auteursType"/>
<xs:element name="sections" type="sectionsType"/>
</xs:sequence>
<xs:attributeGroup ref="avecTitre"/>
</xs:complexType>
158
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<xs:complexType name="auteursType">
<xs:group ref="auteursGrp"/>
</xs:complexType>
<xs:group name="auteursGrp">
<xs:sequence>
<xs:element maxOccurs="unbounded" name="auteur"
type="auteurType"/>
</xs:sequence>
</xs:group>
<xs:attributeGroup name="avecTitre">
<xs:attribute name="titre" type="xs:string" use="required"/>
</xs:attributeGroup>
<xs:complexType name="auteurType">
<xs:simpleContent>
<xs:extension base="xs:string">
<xs:attribute name="nom" type="xs:string" use="required"/>
<xs:attribute name="prenom" type="xs:string" use="required"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
<xs:complexType name="sectionsType">
<xs:sequence>
<xs:element maxOccurs="unbounded" minOccurs="2" name="section"
type="sectionType"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="sectionType">
<xs:sequence>
<xs:group minOccurs="0" ref="auteursGrp"/>
<xs:element maxOccurs="unbounded" minOccurs="2" name="chapitre"
type="chapitreType"/>
</xs:sequence>
<xs:attributeGroup ref="avecTitre"/>
</xs:complexType>
<xs:complexType name="chapitreType">
<xs:sequence>
<xs:element maxOccurs="unbounded" minOccurs="2" name="paragraphe"
type="xs:string"/
>
</xs:sequence>
<xs:attributeGroup ref="avecTitre"/>
</xs:complexType>
<xs:element name="livre" type="livreType"/>
</xs:schema>

Exercice 4 :
Créez un schéma livre2.xsd à partir du schéma livre.xsd élaboré dans l’exercice 6.
Créez un type complexe avecTitreType contenant l’attribut titre. Faites dériver tous les
types avec cet attribut du type avecTitreType.
Testez votre nouveau schéma en validant livre2.xml.

Correction :
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:complexType name="avecTitreType">
<xs:attribute name="titre" type="xs:string"/>
</xs:complexType>
<xs:complexType name="livreType">
<xs:complexContent>
<xs:extension base="avecTitreType">
<xs:sequence>
159
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<xs:element name="auteurs" type="auteursType"/>


<xs:element name="sections" type="sectionsType"/>
</xs:sequence>
</xs:extension>
</xs:complexContent>
</xs:complexType>
<xs:complexType name="auteursType">
<xs:group ref="auteursGrp"/>
</xs:complexType>
<xs:group name="auteursGrp">
<xs:sequence>
<xs:element maxOccurs="unbounded" name="auteur"
type="auteurType"/>
</xs:sequence>
</xs:group>
<xs:complexType name="auteurType">
<xs:simpleContent>
<xs:extension base="xs:string">
<xs:attribute name="nom" type="xs:string" use="required"/>
<xs:attribute name="prenom" type="xs:string" use="required"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
<xs:complexType name="sectionsType">
<xs:sequence>
<xs:element maxOccurs="unbounded" minOccurs="2" name="section"
type="sectionType"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="sectionType">
<xs:complexContent>
<xs:extension base="avecTitreType">
<xs:sequence>
<xs:group minOccurs="0" ref="auteursGrp"/>
<xs:element maxOccurs="unbounded" minOccurs="2" name="chapitre"
➥type="chapitreType"/>
</xs:sequence>
</xs:extension>
</xs:complexContent>
</xs:complexType>
<xs:complexType name="chapitreType">
<xs:complexContent>
<xs:extension base="avecTitreType">
<xs:sequence>
<xs:element maxOccurs="unbounded" minOccurs="2" name="paragraphe"
type="xs:string"/>
</xs:sequence>
</xs:extension>
</xs:complexContent>
</xs:complexType>
<xs:element name="livre" type="livreType"/>

Exercice 5 :
Créez le document annuaire3.xsd à partir du schéma annuaire2.xsd élaboré dans
l’exercice 5.
Ajoutez les attributs id et enRelation à l’élément contact.
Employez les clés et les références de clés pour garantir l’unicité des id et l’usage de lien
correct (par enRelation).
Créez un document XML et validez-le.

160
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Aide : utilisez les expressions XPath : contact, @id et @enRelation. Placez les key et
keyRef dans l’élément racine.

Correction :
<?xml version="1.0" encoding="ISO-8859-1"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:simpleType name="listIntType">
<xs:list itemType="xs:int"/>
</xs:simpleType>
<xs:simpleType name="telType">
<xs:restriction base="listIntType">
<xs:length value="5"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="emailSansAttributType">
<xs:restriction base="xs:string">
<xs:pattern value="[a-z]+@[a-z]+\.[a-z]{2,3}"/>
</xs:restriction>
</xs:simpleType>
<xs:complexType name="emailType">
<xs:simpleContent>
<xs:extension base="emailSansAttributType">
<xs:attribute name="nature" use="required">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration value="perso"/>
<xs:enumeration value="travail"/>
</xs:restriction>
</xs:simpleType>
</xs:attribute>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
<xs:complexType name="numerosType">
<xs:sequence>
<xs:element maxOccurs="unbounded" name="contact"
type="contactType"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="contactType">
<xs:sequence>
<xs:element name="nom" type="xs:string"/>
<xs:element name="prenom" type="xs:string"/>
<xs:element minOccurs="0" name="telephone" type="telType"/>
<xs:element maxOccurs="unbounded" name="email" type="emailType"/>
</xs:sequence>
<xs:attribute name="titre" type="xs:string" use="required"/>
<xs:attribute name="techno" use="optional">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration value="XML"/>
<xs:enumeration value="Java"/>
<xs:enumeration value="Autre"/>
</xs:restriction>
</xs:simpleType>
</xs:attribute>
<xs:attribute name="id" type="xs:string"/>
<xs:attribute name="enRelation" type="xs:string"/>
</xs:complexType>
<xs:element name="numeros" type="numerosType">

161
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<xs:key name="id">
<xs:selector xpath="contact"/>
<xs:field xpath="@id"/>
</xs:key>
<xs:keyref name="refId" refer="id">
<xs:selector xpath="contact"/>
<xs:field xpath="@enRelation"/>
</xs:keyref>
</xs:element>
</xs:schema>

Exercice 6 :
Créez un schéma auteurs.xsd contenant tous les types et groupes liés aux auteurs (faites
un copier-coller à partir de livre.xsd).
Créez un schéma livre3.xsd à partir du schéma livre.xsd élaboré dans l’exercice 6 en
éliminant les types et les groupes liés aux auteurs et en incluant auteur.xsd. Testez votre
nouveau schéma dans un document XML.
Quels sont les avantages de l’inclusion ?

Correction :
auteurs.xsd
<?xml version="1.0" encoding="ISO-8859-1"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:complexType name="auteursType">
<xs:group ref="auteursGrp"/>
</xs:complexType>
<xs:group name="auteursGrp">
<xs:sequence>
<xs:element name="auteur" type="auteurType"
maxOccurs="unbounded"/>
</xs:sequence>
</xs:group>
<xs:complexType name="auteurType">
<xs:simpleContent>
<xs:extension base="xs:string">
<xs:attribute name="nom" type="xs:string" use="required"/>
<xs:attribute name="prenom" type="xs:string" use="required"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:schema>
livre3.xsd
<?xml version="1.0" encoding="ISO-8859-1"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:include schemaLocation="auteurs.xsd"/>
<xs:complexType name="livreType">
<xs:sequence>
<xs:element name="auteurs" type="auteursType"/>
<xs:element name="sections" type="sectionsType"/>
</xs:sequence>
<xs:attributeGroup ref="avecTitre"/>
</xs:complexType>
<xs:attributeGroup name="avecTitre">
<xs:attribute name="titre" type="xs:string" use="required"/>
</xs:attributeGroup>
<xs:complexType name="sectionsType">
<xs:sequence>
<xs:element name="section" type="sectionType" minOccurs="2"
➥maxOccurs="unbounded"/>

162
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</xs:sequence>
</xs:complexType>
<xs:complexType name="sectionType">
<xs:sequence>
<xs:group ref="auteursGrp" minOccurs="0"/>
<xs:element name="chapitre" type="chapitreType" minOccurs="2"
➥maxOccurs="unbounded"/>
</xs:sequence>
<xs:attributeGroup ref="avecTitre"/>
</xs:complexType>
<xs:complexType name="chapitreType">
<xs:sequence>
<xs:element name="paragraphe" type="xs:string" minOccurs="2"
➥maxOccurs="unbounded"/>
</xs:sequence>
<xs:attributeGroup ref="avecTitre"/>
</xs:complexType>
<xs:element name="livre" type="livreType"/>
</xs:schema>

163
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 20
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision B Développer des applications XML

Code Activité B020

Activité Utilisation de xPath et XSLT

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Ecrire un chemin XPath.
Détails sur les objectifs  Comprendre un chemin XPath.
visés par l’activité  Utilisation de Xpath avec XSLT
 Utilisation des CSS

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
XmlSpy ou autre
outillage

164
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 :
Soit le document XML suivant :
<livre titre="Mon livre">
<auteurs>
<auteur nom="nom1" prenom="prenom1"/>
<auteur nom="nom2" prenom="prenom2"/>
</auteurs>
<sections>
<section titre="Section1">
<chapitre titre="Chapitre1">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
</section>
<section titre="Section2">
<chapitre titre="Chapitre1">
<paragraphe>Premier paragraphe</paragraphe>
<paragraphe>Deuxième paragraphe</paragraphe>
</chapitre>
</section>
</sections>
</livre>

Écrivez les expressions XPath suivantes au format non abrégé :


– trouver la liste des chapitres de la première section ;
– trouver la liste des attributs du premier auteur ;
– trouver la valeur (fonction string) de l’attribut nom du deuxième auteur ;
– trouver la liste des chapitres contenant deux paragraphes ;
– trouver la liste des chapitres dont un paragraphe possède le mot Premier ;
– trouver la liste des sections ayant un chapitre ;
– trouver la liste des éléments ayant un seul attribut ;
– trouver la liste des éléments ayant un ancêtre sections, sous deux formes ;
– trouver la liste des attributs titre ;
– trouver la liste des éléments ayant deux fils et pas d’attributs ;
– trouver la liste des sections sans paragraphe ;
– trouver la liste des éléments dont le texte contient le mot paragraphe.

Correction :
Il existe plusieurs possibilités, à chaque fois plus ou moins optimales, sachant que l’on
peut jouer sur le nombre de parcours nécessaires dans l’arbre.
– Trouver la liste des chapitres de la première section :
/child::livre/child::sections/child::section[1]/child::chapitre
– Trouver la liste des attributs du premier auteur :
/child::livre/child::auteurs/child::auteur[1]/attribute::*
– Trouver la valeur de l’attribut nom du deuxième auteur :
string( /child::livre/child::auteurs/child::auteur[2]/attribute::nom )
– Trouver la liste des chapitres contenant deux paragraphes :
/descendant::chapitre[count(child::paragraphe)=2]
– Trouver la liste des chapitres dont un paragraphe possède le mot Premier :

165
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

/descendant::chapitre[contains(child::paragraphe,'Premier')]
– Trouver la liste des sections ayant un chapitre :
/descendant::section[count(child::chapitre)=1]
– Trouver la liste des éléments ayant un seul attribut :
/descendant::*[count(attribute::*)=1]
– Trouver la liste des éléments ayant un ancêtre sections :
1. /child::livre/child::sections/descendant::*
2. /descendant::*[ancestor::sections]
– Trouver la liste des attributs titre :
/descendant::*/attribute::titre
– Trouver la liste des éléments ayant deux fils et pas d’attribut :
/descendant-or-self::*[count(child::*)=2 and count(attribute::*)=0]
– Trouver la liste des sections sans paragraphe :
/descendant::section[count(descandant::paragraphe)=0]
– Trouver la liste des éléments dont le texte contient le mot paragraphe :
//descendant::text()[contains(self::text(), 'paragraphe')]/parent::*

Exercice 2 :
À l’aide du même document que dans l’exercice A :
– trouver la liste de noeuds auteur ;
– trouver la liste de tous les noeuds section ;
– trouver la liste des chapitres de la première section ;
– trouver la liste des attributs du premier auteur ;
– trouver la valeur de l’attribut nom du deuxième auteur ;
– trouver la liste des sections avec deux chapitres ;
– trouver la liste des paragraphes dont le parent a pour titre Chapitre1.

Correction :
– Trouver la liste de noeuds auteur :
//auteur
– Trouver la liste de tous les noeuds section :
//section
– Trouver la liste des chapitres de la première section :
/livre/sections/section[1]/chapitre
– Trouver la liste des attributs du premier auteur :
/livre/auteurs/auteur[1]/@*
– Trouver la valeur de l’attribut nom du deuxième auteur :
string( /livre/auteurs/auteur[2]/@nom )
– Trouver la liste des sections avec deux chapitres :
//section[count(chapitre)=2]
– Trouver la liste des paragraphes dont le parent a pour titre Chapitre1 :
//paragraphe[../@titre='Chapitre1']

Exercice 3 :
À partir du document de l’exercice 1, que vous modifierez pour avoir de un à trois
paragraphes
dans les chapitres, réalisez les expressions suivantes :
– afficher la liste des chapitres avec plus de deux paragraphes à l’aide d’une expression
FLWOR ;
– afficher une séquence de texte avec la liste des sections et les chapitres liés

166
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Correction :
– Afficher la liste des chapitres avec plus de deux paragraphes à l’aide d’une expression
FLWOR :
for $ch in //chapitre where count($ch/*) > 2
return concat( $ch/@titre, ' ' )
– Afficher une séquence de texte avec la liste des sections et les chapitres liés :
for $sec in //section
return
(
'&#10;',
string( $sec/@titre ),
'&#10;',
for $ch in $sec/chapitre
return string( $ch/@titre )
)
Nous avons ajouté des entités &#10; pour forcer un retour à la ligne sur chaque section.
La séquence n’est composée que de chaînes ; nous avons donc enrobé chaque valeur
par
la fonction string.

Exercice 4
Effectuez une transformation XSL sur le document de l’exercice 1 pour afficher, dans un
document
HTML, une table des matières avec les sections et les chapitres. Dans un deuxième
temps, complétez le document pour avoir une numérotation des titres et un lien interne
vers le
détail de chaque partie.

Correction :
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/livre">
<html>
<body>
<xsl:apply-templates select="sections" mode="TM"/>
<xsl:apply-templates select="sections" mode="FULL"/>
</body>
</html>
</xsl:template>
<xsl:template match="sections" mode="TM">
<xsl:for-each select="section">
<a href="#{@titre}">
<xsl:number/>
<xsl:text> </xsl:text>
<xsl:value-of select="@titre"/>
</a>
<br />
<xsl:for-each select="chapitre">
<a href="#{@titre}">
<xsl:number count="section|chapitre" level="multiple"/>
<xsl:text> </xsl:text>
<xsl:value-of select="@titre"/>
</a>
<br />
</xsl:for-each>
167
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</xsl:for-each>
</xsl:template>
<xsl:template match="sections" mode="FULL">
<xsl:for-each select="section">
<a name="{@titre}">
<h1>
<xsl:number/>
<xsl:text> </xsl:text>
<xsl:value-of select="@titre"/>
</h1>
</a>
<xsl:for-each select="chapitre">
<a name="{@titre}">
<h2>
<xsl:number count="section|chapitre" level="multiple"/>
<xsl:text> </xsl:text>
<xsl:value-of select="@titre"/>
</h2>
</a>
<xsl:apply-templates select="paragraphe"/>
</xsl:for-each>
</xsl:for-each>
</xsl:template>
<xsl:template match="paragraphe">
<p>
<xsl:value-of select="."/>
</p>
</xsl:template>
</xsl:stylesheet>

Exercice 5
À partir du document de l’exercice 4, utilisez XSL pour réaliser un document XML selon
la structure suivante :
livre
titre
auteurs
auteur / attribut nomPrenom
section
titre
chapitre
titre
para

Correction :
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="iso-8859-1"
indent="yes"/>
<xsl:template match="/">
<livre>
<titre>
<xsl:value-of select="livre/@titre"/>
</titre>
<auteurs>
<xsl:for-each select="livre/auteurs/*">
<auteur>
<xsl:attribute name="nomPrenom">
<xsl:value-of select="@nom"/>-<xsl:value-of select="@prenom"/>

168
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

</xsl:attribute>
</auteur>
</xsl:for-each>
</auteurs>
<xsl:for-each select="//section">
<section>
<titre><xsl:value-of select="@titre"/></titre>
<xsl:for-each select="chapitre">
<chapitre>
<titre><xsl:value-of select="@titre"/></titre>
<xsl:for-each select="*">
<para>
<xsl:value-of select="."/>
</para>
</xsl:for-each>
</chapitre>
</xsl:for-each>
</section>
</xsl:for-each>
</livre>
</xsl:template>
</xsl:stylesheet>

Exercice 6
Soit le fichier XML suivant :
<?xml version="1.0" encoding="windows-1252"?>
<telephone>
<portable>
<nom>Sony Ericsson Z520i</nom>
<poids>94 g</poids>
<dimension>46*83*24mm</dimension>
<autonomie_veille>400 h d‘autonomie en veille </autonomie_veille>
<points_forts>caméra vidéo intégré + quadri-bandes </points_forts>
<prix>2640 DH</prix>
</portable>
<portable>
<nom>Nokia E50</nom>
<poids>104 g</poids>
<dimension>113*43,5*15,5mm</dimension>
<autonomie_veille>215 h d‘autonomie en veille </autonomie_veille>
<points_forts>appareil photo intégré + enregistreur vidéo</points_forts>

<prix>2640 DH</prix>
</portable>
</telephone>

Créer une feuille de style CSS permettant de produire la page HTML suivante :

169
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Correction :
telephone , portable{}
nom {
display: block;
width: 250px;
font-size: 16pt ;
font-weight: bold;
background-color: teal;
color: white;
padding-left: 10px;
padding-right:10px;
}
poids {
display: block;
font-size: 11pt;
padding-left: 10px;
}

dimension {
display: block;
font-size: 11pt ;
padding-left: 10px;
}
autonomie_veille {
display: block;
font-size: 11pt ;
padding-left: 10px;
}
points_forts {
display: block;
font-size: 12pt;
padding-left: 10px;
}
prix {
display: block;
font-size: 12pt;
color: red ;
font-weight: bold;
font-style:italic;
padding-left: 10px;
}

170
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercice 7
Créer le fichier XML suivant :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<recette>
<entete>
<ville>Marrakech </ville>
<titre> Madfouna</titre>
<remarque>Pour 8 personnes</remarque>
</entete>
<ingredient>
<item>1 kg de farine de blé ou farine force </item>
<item>1,5 kg de filet de bŒuf </item>
<item>0,1 kg de graisse </item>
<item>2 gros oignons </item>
<item>0,1gr d'amandes </item>
<item> Sel, poivre, paprika </item>
<item>4 Œufs durs </item>
<item>1 botte du persil et coriandre </item>
<item>0,1 l d'huile d'olive de préférence </item>
</ingredient>
<procedure>
préparation de la pâte:préparation de la pate à pain moulle et laisser
reposer.
préparation de la farce : Couper le filet en dés très petits, et incorporer
les épices, les oignons et fines herbes hachis, verser dessus un filet
d'huile d'olive, malaxer. Emonder les amandes et écailler les Œufs durs
et les couper en tranches. Préparer le pain rond de grande dimension sur
une plaque à four, y disposer la farce en l'étalant sur toute la surface,
décorer avec les amandes et les tranches d'Œufs et des tranches de
graisse. Couvrir le tout avec un autre pain fin de la même
dimension, plier les bords.
Cuire dans un four à pain à température normale pendant 30 minutes.
Dresser sur un plat à taos, servir très chaud avec du thé à la menthe.
</procedure>
</recette>

Créer une feuille de style XSL permettant à partir de cette fiche recette de produire une
page HTML qui :
• a pour titre le contenu de la balise titre ;
• commence par un titre <h1> ayant comme contenu le contenu de l'élément ville
• affiche par un titre <h2>Recette : le contenu de la balise titre ;
• affiche ensuite le mot Remarque : puis le contenu de l'élément remarque ;
• affiche Procédure en niveau <h3> ;
• dans un paragraphe, présente la procédure à suivre.

Correction :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="html4.01" encoding="ISO-
8859-1" doctype-public="-//W3C//DTD
HTML 4.01//EN" doctype-
system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:template match="/">
<html>
<head>
171
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

<title><xsl:value-of select="//titre"/></title>
</head>
<body>
<h1><xsl:value-of select="//ville"/></h1>
<h2>Recette:<xsl:value-of select="//titre"/></h2>
<p><b>Remarque:</b> <xsl:value-of select="//remarque"/></p>
<h3>Procédure</h3>
<p><xsl:value-of select="//procedure"/></p>
</body>
</html>
</xsl:template>
</xsl:stylesheet

172
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 21
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision C Développer un web service

Code Activité C021

Activité Créer un service Web XML

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Créer un service Web XML
Détails sur les objectifs  Tester le service Web XML
visés par l’activité  Utiliser le service Web XML

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

173
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : service Web sous IIS
1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, cliquez sur Nouveau site Web.
La boîte de dialogue Nouveau site Web s'affiche.
3. Sous Modèles Visual Studio installés, cliquez sur Service Web ASP.NET.
4. Cliquez sur Parcourir.
5. Cliquez sur Serveur IIS local.
6. Cliquez sur Site Web par défaut.
7. Cliquez sur Créer une application Web.
Visual Web Developer crée une application Web IIS.
8. Tapez le nom ServiceWebTempérature.
9. Cliquez sur Ouvrir.
La boîte de dialogue Nouveau site Web s'affiche, avec le nom du nouveau site
Web dans la liste Emplacement la plus à droite. L'emplacement inclut le
protocole ( http://) et l'emplacement ( localhost). Cela indique que vous utilisez
un site Web IIS local.
10. Dans la liste Langage, cliquez sur le langage de programmation C#.
11. Cliquez sur OK.
Visual Studio crée le service Web et ouvre une nouvelle classe nommée Service qui est
le service Web par défaut. Toutefois, vous créerez un service Web avec un nom spécifié
dans la procédure suivante et vous n'utiliserez pas la classe Service.
12. Fermez la classe Service.
13. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site
Web (http://localhost/ServiceWebTempérature), puis cliquez sur Ajouter un
nouvel élément.
14. Sous Modèles Visual Studio installés, cliquez sur Service Web, puis dans la
zone Nom, tapez Convertir.
15. Assurez-vous que la case à cocher Placer le code dans un fichier distinct est
activée, puis cliquez sur Ajouter.
Visual Web Developer crée un service Web qui est composé de deux fichiers.Le
fichier Convertir.asmx est le fichier qui peut être appelé pour appeler des
méthodes de service Web et il indique le code du service Web.Le code lui-même
est dans un fichier de classe (Convertir.vb, Convertir.cs, ou Convertir.jsl, selon le
langage de programmation) dans le dossier App_Code.Le fichier de code
contient un modèle pour un service Web.Le fichier de code inclut du code pour
une méthode de service Web.

Vous créerez deux méthodes dans le service Web.La première méthode convertit les
températures mesurées en degrés Fahrenheit en degrés Celsius et la deuxième méthode
convertit les températures mesurées en degrés Celsius en degrés Fahrenheit.

Exercices 2 : créer les méthodes de conversion


1. Ajoutez le code suivant à l'intérieur de la classe, après la méthode HelloWorld :

[System.Web.Services.WebMethod()]
public double FahrenheitToCelsius(double Fahrenheit)
{
return ((Fahrenheit - 32) * 5) / 9;
}

[System.Web.Services.WebMethod()]
174
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

public double CelsiusToFahrenheit(double Celsius)


{
return ((Celsius * 9) / 5) + 32;
}
2. Notez que les noms de fonctions sont précédés d'un attribut
[System.Web.Services.WebMethod()]dans le cadre de la déclaration
de fonction.
3. Après avoir entré les fonctions, enregistrez le fichier.

Vous pouvez à présent tester le service Web dans Visual Studio.

Exercices 3 : tester le service Web


1. Dans l'Explorateur de solutions, cliquez sur Convertir.asmx, puis appuyez sur
CTRL+F5.
Le service Web est appelé et une page s'affiche dans le navigateur qui affiche les
méthodes qui sont exposées par le service Web.
2. Cliquez sur CelsiusToFahrenheit qui appelle cette méthode.
Une page s'affiche, vous invitant à entrer les valeurs de paramètre pour la
méthode CelsiusToFahrenheit.
3. Dans la zone Celsius, tapez 100, puis cliquez sur Appeler.
Une nouvelle fenêtre qui affiche le XML que le service Web retourne lorsque la
méthode CelsiusToFahrenheit est appelée s'affiche. La valeur 212 apparaît
dans le XML.
4. Fermez le navigateur qui contient les résultats de méthode.
5. Dans le navigateur d'origine, cliquez sur Précédent pour revenir à la liste de
méthodes.
6. Cliquez sur FahrenheitToCelsius et testez pour vous assurer que la méthode
retourne bien les résultats que vous attendez.
Si vous tapez 212, la méthode FahrenheitToCelsius retournera 100.
7. Fermez le navigateur.

La création du service Web étant terminée, l'étape suivante consiste à l'utiliser.

Exercices 4 : utiliser le service Web


1. Dans le menu Fichier, cliquez sur Nouveau site Web.
2. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
3. Cliquez sur Parcourir.
4. Cliquez sur Serveur IIS local.
5. Cliquez sur Site Web par défaut.
6. Cliquez sur Créer une application Web.
Visual Web Developer crée une application Web IIS.
7. Tapez le nom TempératureWeb.
8. Cliquez sur Ouvrir.
9. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
10. Cliquez sur OK.
Visual Studio crée un site Web IIS local et une page nommée Default.aspx.

Pour créer une référence au service Web


11. Dans le menu Site Web, cliquez sur Ajouterune référence Web.
La boîte de dialogue Ajouter une référence Web apparaît, comme illustré dans
la capture d'écran suivante.

175
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Boîte de dialogue Ajouter une référence Web

12. Dans la liste URL, entrez l'URL suivante pour le service Web, puis cliquez sur
Aller à :
http://localhost/ServiceWebTempérature/Convertir.asmx
Lorsque Visual Web Developer recherche le service Web, les informations sur le
service Web s'affichent dans la boîte de dialogue Ajouter une référence Web.
13. Cliquez sur l'un des liens de méthode.
La page de test pour la méthode s'affiche.
14. Cliquez sur Ajouter une référence.
Visual Web Developer crée un dossier App_WebReferences et y ajoute un
dossier pour la nouvelle référence Web.Un espace de noms est assigné par
défaut aux références Web, qui correspond à leur nom de serveur (en
l'occurrence, localhost). Veillez à bien noter le nom de l'espace de noms de la
référence Web.Dans le dossier, Visual Web Developer ajoute un fichier .wsdl qui
référence le service Web.Il ajoute également des fichiers de prise en charge, tels
que les fichiers de découverte (.disco et .discomap), qui contiennent des
informations sur l'emplacement du service Web.

Vous pouvez maintenant utiliser le service Web.Dans cette procédure pas à pas, vous
ajouterez des contrôles à Default.aspx, puis vous programmerez les contrôles pour
convertir une température spécifiée à la fois en degrés Fahrenheit et en degrés
Celsius.Lorsque cette page sera exécutée, elle doit ressembler à l'illustration suivante :

176
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Pour appeler les méthodes de service Web


15. Ouvrez la page Default.aspx et basculez en mode Design.
16. À partir du groupe Standard dans la Boîte à outils, faites glisser les contrôles
suivants dans la page et définissez leurs propriétés comme indiqué :
Contrôle Propriétés
Textbox ID : TemperatureTextbox
Text : (vide)

Button ID : ConvertButton
Text : Convert

Label ID : FahrenheitLabel
Text : (vide)

Label ID : CelsiusLabel
Text : (vide)

17. Ajoutez éventuellement le texte à la page pour les légendes.


Pour cette procédure pas à pas, la disposition de la page n'a pas d'importance.
18. Double-cliquez sur ConvertButton pour créer un nouveau gestionnaire
d'événements pour cet événement Click.
Assurez-vous que le code de votre gestionnaire d'événements correspond au code
de l'exemple suivant.

protected void ConvertButton_Click(object sender, EventArgs e)


{
localhost.Convert wsConvert = new localhost.Convert();
double temperature =
System.Convert.ToDouble(TemperatureTextbox.Text);
FahrenheitLabel.Text = "Fahrenheit To Celsius = " +
wsConvert.FahrenheitToCelsius(temperature).ToString();
CelsiusLabel.Text = "Celsius To Fahrenheit = " +
wsConvert.CelsiusToFahrenheit(temperature).ToString();
}
19. Appuyez sur CTRL+F5 pour exécuter la page.
20. Dans la zone de texte, tapez une valeur, telle que 100 , puis cliquez sur
Convertir.
La page affiche le résultat de la conversion de la valeur de la température à la
177
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

fois en degrés Fahrenheit et en degrés Celsius.

Exercices 5 : activer le débogage


1. Dans le menu Fichier, cliquez sur Ouvrir le site Web.
2. Cliquez sur Serveur IIS local.
3. Cliquez sur ServiceWebTempérature, puis sur Ouvrir.
4. Dans le menu Site Web, cliquez sur Configuration ASP.NET pour ouvrir l'outil
Administration de site Web.
5. Cliquez sur Application, puis cliquez sur Configuration de l'application.
6. Sous Débogage et traçage, cliquez sur Configurer le débogage et le traçage.
7. Activez la case à cocher Activer le débogage.
L'outil Administration de site Web crée un fichier Web.config pour le site Web et
affecte l'activation du débogage à une option de configuration.
8. Fermez l'outil Administration de site Web.
Vous devez maintenant activer le débogage pour le site Web qui utilise le service Web.
Activer le débogage dans le site Web
1. Ouvrez le site TemperatureWeb.
2. Dans le menu Site Web, cliquez sur Configuration ASP.NET pour ouvrir l'outil
Administration de site Web.
3. Cliquez sur Application, cliquez sur Configuration de l'application, sous
Débogage et traçage, cliquez sur Configurer le débogage et le traçage, puis
activez la case à cocher Activer le débogage.
4. Fermez l'outil Administration de site Web.
5. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx,
puis cliquez sur Afficher le code.
Visual Web Developer ouvre le fichier de code de la page.
6. Placez le pointeur dans la ligne suivante :

double temperature =
System.Convert.ToDouble(TemperatureTextbox.Text);
7. Appuyez sur F9 pour définir un point d'arrêt sur la ligne.

Test du débogage
Le site Web et le service Web étant tous deux configurés pour le débogage, vous pouvez
à présent essayer de déboguer.Vous démarrerez dans la page Default.aspx et exécuterez
le code pas à pas jusqu'à ce que le code appelle le service Web.Le débogueur basculera
vers le service Web et continuera l'exécution du code pas à pas.

Pour déboguer la page et le service Web


1. Appuyez sur F5 pour exécuter la page Default.aspx avec le débogage.
La page s'affiche dans le navigateur.
2. Dans la zone, tapez une valeur, telle que 100, puis cliquez sur Convertir.
Visual Web Developer commence à exécuter le code de la page, s'arrête et met
en surbrillance la ligne contenant le point d'arrêt.
3. Appuyez sur F11 pour passer à la ligne suivante.
4. Appuyez à nouveau sur F11.
Étant donné que la ligne suivante appelle le service Web, le débogueur effectue
un pas à pas détaillé dans le service Web, en s'arrêtant à la première ligne de la
méthode FahrenheitToCelsius.
5. Continuez à appuyer sur F11.
Le débogueur effectue un pas à pas détaillé dans le reste de la méthode, puis
retourne à la page appelante.Si vous continuez le pas à pas, le débogueur
178
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

effectuera un pas à pas détaillé vers l'arrière dans le service Web et dans la
méthode CelsiusToFahrenheit.
6. Fermez le navigateur, ce qui ferme également le débogueur.

179
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 22
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision D Installation d’un serveur d’application

Code Activité D022

Activité Installer et configurer IIS

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Installer IIS
Détails sur les objectifs  Configurer IIS
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

180
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Installation IIS 7.5 sur Windows 7
Vous pouvez effectuer cette procédure à l'aide de l'interface utilisateur ou d'un script.
Utilisation de l'interface utilisateur

1. Cliquez sur Démarrer, puis sur Panneau de configuration.


2. Dans le Panneau de configuration, cliquez sur Programmes puis sur Activer ou
désactiver des fonctionnalités de Windows.
3. Dans la boîte de dialogue Fonctionnalités de Windows, cliquez sur Services
Internet (IIS), puis sur OK.

Utilisation d'un script

Tapez la commande suivante dans un script :


start /w pkgmgr /iu:IIS-WebServerRole;IIS-WebServer;IIS-CommonHttpFeatures;IIS-
StaticContent;IIS-DefaultDocument;IIS-DirectoryBrowsing;IIS-HttpErrors;IIS-
HttpRedirect;IIS-ApplicationDevelopment;IIS-ASPNET;IIS-NetFxExtensibility;IIS-
ASP;IIS-CGI;IIS-ISAPIExtensions;IIS-ISAPIFilter;IIS-ServerSideIncludes;IIS-
HealthAndDiagnostics;IIS-HttpLogging;IIS-LoggingLibraries;IIS-RequestMonitor;IIS-
HttpTracing;IIS-CustomLogging;IIS-ODBCLogging;IIS-Security;IIS-
BasicAuthentication;IIS-WindowsAuthentication;IIS-DigestAuthentication;IIS-
ClientCertificateMappingAuthentication;IIS-
IISCertificateMappingAuthentication;IIS-URLAuthorization;IIS-RequestFiltering;IIS-
IPSecurity;IIS-Performance;IIS-HttpCompressionStatic;IIS-
HttpCompressionDynamic;IIS-WebServerManagementTools;IIS-
ManagementConsole;IIS-ManagementScriptingTools;IIS-ManagementService;IIS-
IIS6ManagementCompatibility;IIS-Metabase;IIS-WMICompatibility;IIS-
LegacyScripts;IIS-LegacySnapIn;IIS-FTPPublishingService;IIS-FTPServer;IIS-
FTPManagement;WAS-WindowsActivationService;WAS-ProcessModel;WAS-
NetFxEnvironment;WAS-ConfigurationAPI

Exercices 2 : Installation IIS 7.5 sur Windows Server® 2008 R2


Vous pouvez effectuer cette procédure à l'aide de l'interface utilisateur ou d'un script.
Utilisation de l'interface utilisateur

1. Cliquez sur Démarrer, sur Outils d'administration, puis sur Gestionnaire de


serveur.
2. Dans Résumé des rôles, cliquez sur Ajouter des rôles.
3. Utilisez l'Assistant Ajout de rôles pour ajouter le rôle de serveur Web.

Utilisation d'un script

Tapez la commande suivante dans un script :


CMD /C START /w PKGMGR.EXE /l:log.etw /iu:IIS-WebServerRole;IIS-WebServer;IIS-
CommonHttpFeatures;IIS-StaticContent;IIS-DefaultDocument;IIS-
DirectoryBrowsing;IIS-HttpErrors;IIS-HttpRedirect;IIS-ApplicationDevelopment;IIS-
ASP;IIS-CGI;IIS-ISAPIExtensions;IIS-ISAPIFilter;IIS-ServerSideIncludes;IIS-
HealthAndDiagnostics;IIS-HttpLogging;IIS-LoggingLibraries;IIS-RequestMonitor;IIS-
HttpTracing;IIS-CustomLogging;IIS-ODBCLogging;IIS-Security;IIS-
BasicAuthentication;IIS-WindowsAuthentication;IIS-DigestAuthentication;IIS-

181
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

ClientCertificateMappingAuthentication;IIS-
IISCertificateMappingAuthentication;IIS-URLAuthorization;IIS-RequestFiltering;IIS-
IPSecurity;IIS-Performance;IIS-HttpCompressionStatic;IIS-
HttpCompressionDynamic;IIS-WebServerManagementTools;IIS-
ManagementScriptingTools;IIS-IIS6ManagementCompatibility;IIS-Metabase;IIS-
WMICompatibility;IIS-LegacyScripts;WAS-WindowsActivationService;WAS-
ProcessModel;IIS-FTPServer;IIS-FTPSvc;IIS-FTPExtensibility;IIS-WebDAV;IIS-
ASPNET;IIS-NetFxExtensibility;WAS-NetFxEnvironment;WAS-ConfigurationAPI;IIS-
ManagementService;MicrosoftWindowsPowerShell

Exercices 3 : Créer un site Web (IIS 7)


Si vous souhaitez publier un contenu accessible via Internet ou une connexion intranet,
vous pouvez ajouter un site Web sur votre serveur Web afin d'y stocker ce contenu.
Lors de l'installation d'IIS 7, une configuration de site Web par défaut est créée dans le
répertoire \Inetpub\Wwwroot sur votre serveur Web. Vous pouvez utiliser ce répertoire
par défaut pour publier votre contenu Web, ou vous pouvez créer un répertoire à
l'emplacement de système de fichiers de votre choix.
Lorsque vous ajoutez un site Web dans IIS 7, une entrée de site est créée dans le fichier
ApplicationHost.config. Cette entrée spécifie la liaison réseau pour le site, mappe le site
à un emplacement dans le système de fichiers et, éventuellement, indique les
informations d'identification de l'utilisateur pour l'accès au contenu.

1. Ouvrez le Gestionnaire des services Internet (IIS).


2. Dans le volet Connexions, cliquez avec le bouton droit sur le nœud Sites dans
l'arborescence, puis cliquez sur Ajouter un site Web.
3. Dans la boîte de dialogue Ajouter un site Web, tapez un nom convivial pour le
site Web dans la zone Nom du site Web.
4. Cliquez sur Sélectionner si vous souhaitez sélectionner un pool d'applications
différent de celui mentionné dans la zone Pool d'applications. Dans la boîte de
dialogue Sélectionner un pool d'applications, sélectionnez un pool
d'applications dans la liste Pool d'applications et cliquez sur OK.
5. Dans la zone Chemin d'accès physique, indiquez le chemin d'accès physique
du dossier du site Web ou cliquez sur le bouton Parcourir (...) pour accéder au
système de fichiers et y rechercher le dossier.
6. Si le chemin d'accès physique que vous avez indiqué à l'étape 5 est celui d'un
accès distant, cliquez sur Se connecter en tant que pour spécifier les
informations d'identification permettant d'accéder au chemin d'accès. Si vous
n'utilisez pas d'informations d'identification spécifiques, sélectionnez l'option
Utilisateur de l'application (authentification directe) dans la boîte de
dialogue Se connecter en tant que.
7. Sélectionnez le protocole du site Web dans la liste Type.
8. La valeur par défaut dans la zone Adresse IP est Toutes non attribuées. Si vous
devez spécifier une adresse IP statique pour le site Web, tapez cette adresse
dans la zone Adresse IP.
9. Tapez le numéro de port dans la zone Port.
10. De manière facultative, tapez le nom d'en-tête d'hôte du site Web dans la zone
En-tête de l'hôte.
11. Si vous n'avez pas de modifications à apporter à ce site, et si vous souhaitez le
rendre immédiatement disponible, activez la case à cocher Démarrage
immédiat du site Web.
12. Cliquez sur OK.

182
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 23
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision F Déploiement d’une application Web

Code Activité F023

Activité Déploiement d’un site Web

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Utiliser l’outil copier le site Web
Détails sur les objectifs
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

183
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Création d’un site Web partagé
1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
4. Dans la liste Emplacement la plus à gauche, cliquez sur Système de fichiers,
puis dans la liste Emplacement la plus à droite, entrez C:\SiteWebPartagé.
5. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
6. Cliquez sur OK.

Exercices 2 : créer des pages de test


1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site
Web, puis cliquez sur Ajouter Nouvel élément.
2. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
3. Dans la zone Nom, tapez Services.aspx.
4. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
5. Cliquez sur Ajouter.
La nouvelle page s'affiche dans l'éditeur.
6. Basculez en mode Design.
7. Dans la page, tapez Services, sélectionnez le texte que vous venez d'entrer en le
mettant en surbrillance, puis dans la barre d'outils Mise en forme, cliquez sur
Heading 1 <H1>.
8. Positionnez le pointeur à la fin du texte.
9. Appuyez sur ENTRÉE pour créer un nouveau paragraphe, puis tapez Cette page
répertorie les services que nous offrons.
10. Enregistrez la page.
11. Répétez les étapes 1 à 9 pour créer une page nommée Products.aspx avec le
titre Products et le texte Cette page répertorie les produits que nous
vendons.
12. Ouvrez la page Default.aspx et basculez en mode Design.
13. Dans la page, tapez le titre Home et le texte Bienvenue sur notre site Web.
Maintenant, vous allez ajouter des contrôles sur la page d'accueil (Default.aspx) pour
créer une liaison avec les pages que vous venez de créer.

Exercices 3 : ajouter des liens sur la page d'accueil


1. Ouvrez la page Default.aspx et basculez en mode Design.
2. À partir du groupe Standard de la boîte à outils, faites glisser un contrôle
Hyperlink sur la page.
3. Affectez Products à Text et ~/Products.aspx à NavigateUrl.
4. Faites glisser un autre contrôle Hyperlink sur la page, puis affectez Services à
Text et ~/Services.aspx à NavigateUrl.
5. Enregistrez vos fichiers.
Test du site Web
Maintenant vous allez vérifier que le site Web fonctionne comme vous l'attendez.

184
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Pour tester le site Web


1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx,
puis cliquez sur Afficher dans le navigateur.
La page s'affiche dans le navigateur.
2. Cliquez sur Products et Services pour confirmer que les liens fonctionnent.
3. Fermez le navigateur.

Exercices 4 : Création du site Web source


1. Dans le menu Fichier, cliquez sur Fermer le projet pour fermer SiteWebPartagé.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
4. Dans la liste Emplacement la plus à gauche, cliquez sur Système de fichiers,
puis dans la liste Emplacement la plus à droite, entrez C:\SiteWebLocal.
5. Cliquez sur OK.

Exercices 5 : Copie de fichiers du site Web partagé vers le site Web


local
1. Dans le menu Site Web, cliquez sur Copier le site Web.
L'outil Copier <Nom du site Web> s'affiche.
2. Cliquez sur Se connecter.
La boîte de dialogue Ouvrir le site Web s'affiche.
3. Cliquez sur Système de fichiers.
4. Dans la zone Dossier, tapez C:\SiteWebPartagé.
Si le site partagé était sur un autre ordinateur, vous taperiez l'URL du serveur.
5. Cliquez sur Ouvrir.
Les fichiers du site partagé sont répertoriés sous Site Web distant.
De nombreux fichiers apparaissent accompagnés de symboles qui indiquent leur
état.Le symbole de flèche vous indique la direction dans laquelle un fichier sera
copié, si vous synchronisez les sites.Actuellement, les fichiers Services.aspx et
Products.aspx dans la liste Site Web distant pointent vers la liste Site Web
source, car si vous synchronisez les sites Web, les fichiers Services.aspx et
Products.aspx seront copiés du site partagé vers le site local.
Des points d'interrogation (?) sont affichés en regard des fichiers
Default.aspx.Cela indique que le fichier possède le même nom dans les deux
sites, mais des données d'horodatage différentes et aucune information sur la
dernière copie des fichiers.Si vous synchronisez les sites Web, ces fichiers ne
seront pas copiés automatiquement.À la place, pour chaque fichier, une boîte de
dialogue contenant trois options s'affiche : copier le fichier du site Web source
vers le site Web distant, copier le fichier du site Web distant vers le site Web
source ou ne pas les synchroniser.
6. Sous Site Web distant, sélectionnez tous les fichiers et les dossiers en les
mettant en surbrillance.
Dans ce cas, vous souhaitez obtenir des copies de tous les fichiers du site
partagé.Vous émulez un scénario dans lequel vous êtes un nouveau
développeur sur un site Web existant et vous souhaitez obtenir les versions les
plus actuelles des fichiers du site Web.Étant donné que vous avez créé un
nouveau site local, vous ne devez pas copier tous les fichiers du site local vers le
site partagé.
7. Cliquez sur le bouton représentant une flèche vers la gauche pour copier les
fichiers sélectionnés du site partagé vers le site local.
185
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Le bouton représentant une flèche vers la gauche n'est pas doté d'une étiquette
sauf si vous déplacez le pointeur sur ce bouton, auquel cas une info-bulle
s'affiche.La flèche pointe vers Site Web source.
Visual Web Developer commence la copie des fichiers.Lorsqu'il arrive au fichier
Default.aspx, il vous invite à confirmer le remplacement de la copie locale du
fichier par le fichier du site partagé.
8. Dans la boîte de dialogue Confirmer le remplacement du fichier, activez la
case à cocher Appliquer à tous, puis cliquez sur Oui.
Dans ce cas, il est possible de substituer toutes les versions locales des fichiers
qui ont des noms de copies de fichiers, car vous souhaitez disposer des versions
de fichiers du site partagé.Lorsque le processus de copie est terminé, les listes
de Site Web source et Site Web distant sont les mêmes.

Exercices 6 : Copie de pages individuelles


Vous pouvez utiliser l'outil Copier le site Web pour copier tous les fichiers ou des fichiers
individuels.Dans cette partie de la procédure pas à pas, vous créerez une page Web dans
le site Web source, puis vous copierez le nouveau fichier de pages Web dans le site Web
partagé.
Pour créer et copier un fichier individuel
1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site
Web, puis cliquez sur Ajouter Nouvel élément.
2. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
3. Dans la zone Nom, tapez Extra.aspx.
4. Cliquez sur Ajouter.
Il n'est pas nécessaire d'ajouter du contenu à la page.
5. Fermez la page.
La nouvelle page est affichée dans Site Web source, accompagnée de flèches
pointant vers Site Web distant. Si vous effectuez une synchronisation
maintenant, les fichiers seront copiés du site Web local vers le site Web partagé.
6. Sous l'onglet Copier le site Web, sélectionnez la ou les nouvelles pages en les
mettant en surbrillance.
7. Cliquez sur le bouton représentant une flèche vers la gauche/droite pour copier
les fichiers sélectionnés du site Web local vers le site Web partagé.
Ce bouton n'est pas doté d'une étiquette sauf si vous déplacez le pointeur sur
ce bouton, auquel cas une info-bulle s'affiche.
La nouvelle page est copiée vers le site Web partagé et la liste de Site Web
distant est mise à jour.

Exercices 7 : Synchronisation de sites Web


La synchronisation signifie la copie de la version la plus actuelle de chaque fichier afin
que les deux sites Web disposent des mêmes copies de tous les fichiers.Utilisez la
synchronisation si les fichiers du site Web partagé peuvent être mis à jour par quelqu'un
d'autre que vous.Dans cette partie de la procédure pas à pas, vous modifierez d'abord le
site Web local et le site Web partagé, puis vous synchroniserez les modifications entre
les sites.
Pour modifier les sites Web locaux et les sites Web partagés
1. Sous l'onglet Copier <Nom du site Web>, sous Site Web source, cliquez sur
Extra.aspx, puis cliquez sur le bouton Supprimer.
2. Lorsque vous êtes invités à confirmer la suppression du fichier, cliquez sur Oui.
Les fichiers de la page supprimée apparaissent dans Site Web source
accompagnés d'un symbole qui indique que les fichiers ont été supprimés.
186
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

1. Dans Windows, démarrez le Bloc-notes, puis ouvrez


C:\SiteWebPartagé\Products.aspx.
2. Ajoutez des espaces supplémentaires ou d'autres caractères au fichier,
enregistrez le fichier, puis fermez le Bloc-notes.
Vous modifiez le fichier pour émuler ce qui se produirait si un autre développeur
modifiait le fichier du site Web partagé.
3. Dans Visual Web Developer, sous l'onglet Copier <Nom du site Web> , cliquez
sur Actualiser le site Web distant.
Une flèche s'affiche en regard du fichier Products.aspx pointant vers Site Web
source.
4. Sous Site Web distant, sélectionnez tous les fichiers et les dossiers pour les
mettre en surbrillance, puis cliquez sur le bouton synchroniser pour synchroniser
le fichier sélectionné entre les mêmes chemins d'accès relatifs dans
SiteWebLocal et dans SiteWebPartagé.
Ce bouton n'est pas doté d'une étiquette sauf si vous déplacez le pointeur sur
ce bouton.Le bouton possède une flèche vers la gauche et vers la droite pour
indiquer les deux volets.
5. Lorsque vous êtes invité à supprimer le fichier Extra.aspx dans le site Web
distant, ce qui, de fait, répercute la suppression sur le site Web distant, cliquez
sur Oui.
La page Products.aspx est copiée du site Web distant vers le site Web source.

187
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 24
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision F Déploiement d’une application Web

Code Activité F024

Activité Déploiement d’un site Web

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Utiliser l’outil publier le site Web
Détails sur les objectifs
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

188
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Création du site Web
1. Ouvrez Visual Studio 2010.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
4. Dans la liste Emplacement la plus à gauche, cliquez sur Système de fichiers.
5. Dans la liste Emplacement la plus à droite, entrez le nom du dossier dans lequel
vous souhaitez conserver les pages du site Web.
Par exemple, tapez le nom du dossier C:\SitesWeb.
6. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
7. Cliquez sur OK.

Exercices 2 : Création d'une page et d'une classe de test


Pour créer la page et ajouter des contrôles
1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site
Web, puis cliquez sur Ajouter un nouvel élément.
2. Sous Modèles Visual Studio installés, cliquez sur Formulaire Web.
3. Dans la zone Nom, tapez SamplePage.aspx.
4. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
5. Cliquez sur Ajouter.
6. Basculez en mode Design.
7. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
Label sur la page.
8. À partir du groupe Standard dans la Boîte à outils, faites glisser un contrôle
Button sur la page et positionnez-le à côté du contrôle Label.
Ensuite, vous créerez le code source pour une classe simple qui contient une seule
propriété.Vous utiliserez cette classe dans le code de votre page.

Pour créer une classe


1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site
Web, cliquez sur Ajouter le dossier ASP.NET, puis sur App_Code.
Un nouveau dossier nommé App_Code apparaît dans votre application dans
l'Explorateur de solutions.Le dossier App_Code est un dossier d'application
ASP.NET réservé spécial.Pour plus d'informations, consultez Disposition des
sites Web ASP.NET.
2. Cliquez avec le bouton droit sur le dossier App_Code, puis cliquez sur Ajouter
un nouvel élément.
3. Sous Modèles Visual Studio installés, cliquez sur Classe.
4. Dans la zone Nom, tapez TestClass.
5. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
6. Cliquez sur Ajouter.
Visual Web Developer crée un fichier classe squelette dans le langage de
programmation spécifié.Notez que l'extension du nom de fichier de classe
correspond au langage que vous avez sélectionné.Par exemple, si vous créez
une classe dans Microsoft Visual Basic, l'extension de nom de fichier est .vb.
7. Créez une propriété nommée TestProperty.

189
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Lorsque vous avez terminé, votre fichier de classe doit se présenter comme suit :

using System;
public class TestClass
{
public TestClass() { }
private string TestPropertyValue;
public string TestProperty
{
get{ return TestPropertyValue; }
set{ TestPropertyValue = value; }
}
}

À présent, vous pouvez utiliser la classe dans la page.Notez que vous ne devez pas
compiler le fichier de classe avant de l'utiliser.

Pour utiliser la classe dans le code de la page


1. Ouvrez SamplePage.aspx, puis basculez en mode Design.
2. Double-cliquez sur le contrôle Button afin de créer un gestionnaire Click pour
celui-ci.
3. Dans le gestionnaire Click, créez une instance du TestClass que vous avez créé
dans la procédure précédente, assignez une valeur à la propriété TestProperty,
puis affichez la valeur TestProperty dans le contrôle Label.
Le code complet se présentera comme suit :
protected void Button1_Click(object sender, EventArgs e)
{
TestClass testClass = new TestClass();
testClass.TestProperty = "Hello";
Label1.Text = testClass.TestProperty;
}

Pour tester le site Web


1. Ouvrez la page SamplePage.aspx.
2. Appuyez sur la combinaison de touches CTRL+F5.
La page s'affiche dans le navigateur.
3. Cliquez sur Button et assurez-vous que ce texte apparaît dans le contrôle Label.
4. Fermez le navigateur.

Exercices 3 : Publication du site Web


Pour publier le site Web
1. Dans le menu Générer, cliquez sur Publier le site Web.
La boîte de dialogue Publier le site Web s'affiche.
2. Dans la zone Emplacement cible, entrez c:\SiteCompilé.
3. Cliquez sur OK.
Visual Web Developer précompile le contenu du site Web et écrit la sortie dans
le dossier spécifié.La fenêtre Sortie affiche des messages d'avancement. Si une
erreur se produit pendant la compilation, elle est rapportée dans la fenêtre
Sortie.
4. Si des erreurs se produisent pendant la publication, résolvez les erreurs, puis
répétez l'étape 1.

190
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Pour examiner la sortie de la commande Publier le site Web


1. Dans l'Explorateur Windows, accédez au dossier que vous avez spécifié en tant
que dossier cible pour la commande Publier le site Web.
2. À l'aide d'un éditeur de texte, tel que le Bloc-notes, ouvrez le fichier
SamplePage.aspx.
Notez que le fichier ne contient pas le balisage qui se trouvait initialement dans
le fichier.À la place, la page .aspx est uniquement un espace réservé qui peut
être utilisé dans une URL.
3. Accédez au dossier Bin.
Le dossier contient deux types de fichiers :
 des fichiers .compiled qui correspondent aux pages ;
 des fichiers .dll qui contiennent le code exécutable pour le site Web, tel
que le fichier de classe que vous avez créé.
Rappelez-vous que la page, son code et le fichier de classe séparé que vous aviez créé
ont tous été compilé dans du code exécutable.

Pour tester le site Web publié


1. Créez un répertoire virtuel IIS qui pointe vers le dossier cible.
Vous pouvez utiliser les outils d'administration IIS ou bien procéder comme
suit :
a. Dans l'Explorateur Windows, cliquez avec le bouton droit sur le nom du
dossier cible, puis cliquez sur Partage et sécurité.
b. Sous l'onglet Partage Web, cliquez sur Partager ce dossier.
La boîte de dialogue Modifier l'alias s'affiche.
c. Si vous le souhaitez, modifiez le nom de l'alias.
Les autorisations par défaut autorisent l'accès Lire et l'exécution des
scripts, tels que les pages ASP.NET.
d. Cliquez sur OK pour fermer la boîte de dialogue Modifier l'alias, puis
cliquez sur OK pour fermer la boîte de dialogue Propriétés.
2. Ouvrez le navigateur, puis tapez l'URL suivante :
http://localhost/SiteCompilé/SamplePage.aspx
La page SamplePage.aspx s'affiche.Toutefois, vous voyez cette fois-ci la version
de la page qui a été créée par le précompilateur pour le déploiement.

191
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 25
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision G Sécurité des applications Web

Code Activité G025

Activité Authentification utilisateur

Durée 4H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Configurer l’appartenance
 L’authentification utilisateur
Détails sur les objectifs
 Le contrôle d’accès
visés par l’activité
 Modification et récupération des mots de
passe

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

192
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Création du site Web
1. Ouvrez Visual Studio.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
3. Sous Modèles Visual Studio installés, sélectionnez Site Web ASP.NET.
4. Dans la zone de liste Emplacement, cliquez sur HTTP. Cliquez sur Parcourir.
La boîte de dialogue Choisir un emplacement s'affiche.
5. Sélectionnez Serveur IIS local.
6. Ouvrez Serveurs Web locaux.
7. Sélectionnez Site Web par défaut.
8. Cliquez sur l'icône Créer une application Web ( ) au-dessus de la liste de
sites Web puis nommez le nouveau site Web appartenance.
9. Cliquez sur Ouvrir.
La boîte de dialogue Choisir un emplacement s'affiche.
10. Dans la zone Langages, cliquez sur le langage de programmation que vous
préférez utiliser.
Le langage de programmation que vous choisissez sera la valeur par défaut pour
votre site Web, mais vous pouvez définir individuellement les langages de
programmation pour chaque page.
11. Cliquer sur OK dans la boîte de dialogue Nouveau site Web

Exercices 2 : Configuration de l'appartenance

Pour ajouter un nouveau dossier au site Web


1. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur le nom de
votre site Web, puis cliquez sur Nouveau dossier.
2. Nommez le dossier PagesMembres.
Pour créer un utilisateur d'appartenance
1. Dans le menu Site Web, cliquez sur Configuration ASP.NET.
2. Sélectionnez l'onglet Sécurité, cliquez sur le lien vers Utilisez l'Assistant
Installation de sécurité pour configurer la sécurité étape par étape, puis
cliquez sur Suivant.
3. Passez à l'étape 2 de l'Assistant et sélectionnez l'option À partir d'Internet.
L'Assistant affiche une page dans laquelle vous pouvez sélectionner la méthode
d'authentification que votre site Web utilisera.Cette option spécifie que votre
application utilisera l'authentification par formulaire, dans laquelle les
utilisateurs se connecteront à l'application à l'aide d'une page de connexion que
vous créerez à une étape ultérieure de cette procédure.
4. Cliquez sur Suivant.
L'Assistant affiche un message qui déclare que les informations utilisateur seront
stockées à l'aide de Paramètres avancés des fournisseurs. Par défaut, les
informations d'appartenance sont stockées dans un fichier de base de données
Microsoft SQL Server Express dans le dossier App_Data de votre site Web.
5. Cliquez sur Suivant.
L'Assistant affiche une option pour créer des rôles.Vous effectuerez cette étape
séparément à une étape ultérieure de cette procédure pas à pas.
6. Désactivez la case à cocher Active les rôles pour ce site Web et cliquez sur
Suivant.
L'Assistant affiche une page dans laquelle vous pouvez créer de nouveaux

193
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

utilisateurs.
7. Entrez les informations qui définissent un utilisateur de votre application.Utilisez
les valeurs suivantes comme indications (vous pouvez utiliser toutes valeurs que
vous souhaitez, mais assurez-vous de noter vos entrées pour une étape
ultérieure de la procédure pas à pas) :
 Nom d'utilisateur Votre nom (sans espaces) ou un nom d'exemple.
 Mot de passe Un mot de passe. Un mot de passe fort est requis (mot
de passe qui inclut des majuscules et des minuscules, un signe de
ponctuation et qui comprend au moins huit caractères).
 Adresse de messagerie Votre adresse de messagerie personnelle. À
une étape ultérieure de cette procédure pas à pas, vous vous enverrez
un message électronique, vous avez donc besoin d'une adresse de
messagerie valable.
 Question de sécurité et Réponse de sécurité Tapez une question et
une réponse à la question qui puissent être utilisées ultérieurement si
vous avez besoin de récupérer votre mot de passe.
8. Cliquez sur Créer un utilisateur.
L'Assistant affiche une page de confirmation.

Pour définir des règles d'accès pour le sous-répertoire PagesMembres


1. Dans l'Assistant, cliquez sur Suivant.
L'Assistant affiche une page qui vous permet de créer des règles d'accès.
2. Dans la zone Ajouter une nouvelle règle d'accès, développez le nœud de votre
site Web.
3. Sélectionnez PagesMembres, le dossier que vous avez créé précédemment.
4. Sous La règle s'applique à, sélectionnez Utilisateurs anonymes.
5. Sous Autorisation, sélectionnez Refuser.
La règle que vous créez refuse l'accès aux utilisateurs anonymes, c'est-à-dire les
utilisateurs qui ne sont pas connectés.
6. Cliquez sur Ajouter cette règle.
La nouvelle règle est affichée dans la grille au-dessous.Lorsque les utilisateurs
demandent une page du sous-répertoire PagesMembres, les règles sont
vérifiées pour déterminer si l'accès à la page est autorisé à l'utilisateur.
7. Cliquez sur Terminer.
Vous en avez maintenant fini avec l'Assistant.L'Assistant ferme et vous revenez à
l'onglet Sécurité de l'outil Administration de site Web.

Exercices 3 : Configuration de la messagerie électronique

Pour configurer l'application afin d'utiliser un serveur SMTP spécifique


1. Dans l'outil Administration de site Web, cliquez sur l'onglet Application.
2. Sous Paramètres SMTP, cliquez sur Configurer les paramètres de messagerie
SMTP.
L'outil affiche une page dans laquelle vous pouvez configurer la messagerie
électronique.
3. Si vous utilisez le serveur virtuel SMTP qui est sur votre ordinateur, entrez
localhost comme Nom du serveur ; sinon, entrez le nom de serveur approprié.
Incluez les informations relatives au numéro de port et à l'authentification selon
la configuration requise de votre serveur SMTP.Consultez votre administrateur
pour plus d'informations sur la configuration de ces paramètres.
4. Dans la zone De, tapez une adresse de messagerie valide.

194
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

5. Cliquez sur Enregistrer et dans la page de confirmation, cliquez sur OK.


L'outil Administration de site Web crée un fichier Web.config (s'il n'existe pas
déjà) avec les paramètres que vous avez définis.
6. Fermez l'outil Administration de site Web.

Exercices 4 : Connexion de l'utilisateur


Pour créer une page d'accueil avec un bouton de connexion
1. Ouvrez ou basculez vers la page Default.aspx de votre site. (Si vous n'avez pas
de page Default.aspx, vous pouvez en ajouter une ou utiliser une page
différente.)
2. Basculez en mode Design.
3. Tapez le texte statique tel que Bienvenue sur notre site et dans la barre d'outils
Mise en forme, utilisez la liste déroulante Format du bloc pour mettre en
forme le texte en Heading 1.
4. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
LoginStatus sur la page.
Par défaut, le contrôle LoginStatus est affiché comme un lien. Lorsque les utilisateurs
cliquent sur ce dernier, l'application affiche une page de connexion.Vous pouvez à
présent créer la page de connexion.

Pour créer une page de connexion


1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur votre
application Web, puis sélectionnez Ajouter un nouvel élément. Ajoutez un
Formulaire Web nommé Login.aspx à votre site.
1. Dans la page Login.aspx, basculez en mode Design.
2. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
Login sur la page.
Le contrôle Login est un contrôle unique qui invitera l'utilisateur à entrer les
informations d'identification et les validera.

Affichage des erreurs de connexion


Le contrôle Login inclut la validation qui aide les utilisateurs à entrer des informations
correctes. Par exemple, si un utilisateur ignore le mot de passe, un contrôle de validateur
affiche un astérisque (*) en regard de la zone Mot de passe. Vous pouvez fournir des
informations plus complètes sur les erreurs de connexion en ajoutant un contrôle
ValidationSummary à la page.

Pour afficher des informations détaillées sur les erreurs de connexion


1. À partir du groupe Validation de la Boîte à outils, faites glisser un contrôle
ValidationSummary sur la page.
2. Dans la fenêtre Propriétés pour le contrôle ValidationSummary, affectez
Login1, qui est l'ID par défaut du contrôle Login que vous avez ajouté
précédemment, à la propriété ValidationGroup .

Affichage d'informations pour les utilisateurs connectés


Vous allez maintenant modifier la page d'accueil pour personnaliser l'affichage selon
que l'utilisateur est connecté ou non.Les utilisateurs anonymes voient s'afficher un
message générique qui les invite à ouvrir une session.Les utilisateurs connectés voient
s'afficher un message qui les accueille avec leur nom de connexion.

195
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Pour personnaliser l'affichage pour les utilisateurs connectés


1. Basculez vers la page Default.aspx ou ouvrez-la.
2. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
LoginView sur la page.
Le contrôle LoginView est affiché avec son modèle AnonymousTemplate
ouvert. Ce modèle vous permet de définir le contenu que les utilisateurs verront
avant qu'ils se soient connectés.
3. Cliquez sur la zone d'édition du contrôle LoginView pour activer l'édition.
4. Dans la zone d'édition du modèle AnonymousTemplate du contrôle LoginView,
tapez « Vous n'êtes pas connecté. Cliquez sur le lien Connexion pour vous
inscrire. ».
5. Dans le panneau Tâches LoginView, dans la liste Affichages, cliquez sur
LoggedInTemplate. Si vous ne voyez pas le panneau Tâches LoginView,
cliquez avec le bouton droit sur le titre du contrôle LoginView et sélectionnez
Afficher la balise active.
Vous définissez à présent le contenu qui sera affiché aux utilisateurs qui se sont
déjà connectés.
6. Cliquez sur la zone d'édition du contrôle LoginView pour activer l'édition, puis
tapez Vous êtes connecté. Bienvenue,
7. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
LoginName sur le modèle après le texte.

Pour tester la connexion


1. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur Default.aspx,
puis cliquez sur Définir comme page de démarrage.
Cela configure le site Web de sorte que, lorsque vous exécutez le site, la page
Default.aspx apparaisse en premier.
2. Appuyez sur CTRL+F5 pour exécuter le site Web.
La page d'accueil (Default.aspx) s'affiche dans le navigateur, en affichant le lien
Connexion et le message générique.
3. Cliquez sur le lien Connexion.
La page de connexion que vous avez créée est affichée.
4. Tapez le nom de connexion de l'utilisateur que vous avez créé précédemment
dans la procédure pas à pas, puis cliquez sur Se connecter. (N'entrez pas encore
de mot de passe.)
Un astérisque (*) est affiché en regard de la zone Mot de passe et un message
d'erreur est affiché dans le contrôle ValidationSummary.
5. Entrez un nom d'utilisateur et un mot de passe puis cliquez sur Se connecter.
Si vous avez entré des informations d'identification correctes, vous revenez à la
page d'accueil.La page affiche maintenant un lien Déconnexion, votre nom
d'utilisateur et le message d'accueil que vous avez défini pour l'utilisateur
connecté.
6. Fermez le navigateur.

Exercices 5 : Limitation de l'accès aux pages réservées aux membres


Pour créer les pages réservées aux membres
1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le dossier
PagesMembres, cliquez sur Ajouter un nouvel élément et ajoutez un nouveau
formulaire Web nommé Members.aspx.
1. En mode Design, ajoutez le texte à la page, comme Bienvenue aux membres ! Le
texte exact importe peu, tant que vous serez en mesure de reconnaître cette
196
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

page lorsque vous la verrez dans le navigateur.


Vous pouvez à présent ajouter un lien vers les pages réservées aux membres à partir de
la page d'accueil.Dans une application réelle, vous mettriez probablement le lien des
pages réservées aux membres dans le modèle connecté du contrôle LoginView. Ainsi,
les visiteurs de votre site ne verront pas le lien tant qu'ils ne se seront pas
connectés.Pour cette procédure pas à pas, toutefois, vous mettrez le lien à disposition de
tous les utilisateurs pour que vous constatiez l'effet d'une tentative d'affichage d'une
page réservée aux membres sans connexion préalable.

Pour ajouter un lien vers les pages réservées aux membres


1. Basculez vers la page Default.aspx ou ouvrez-la.
2. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
HyperLink sur la page.
3. Dans la fenêtre Propriétés pour le contrôle HyperLink, affectez page Membres
à la propriété Text et ~/PagesMembres/Members.aspx à la propriété
NavigateUrl pour indiquer la page que vous avez créée précédemment.

Pour tester les pages réservées aux membres


1. Appuyez sur CTRL+F5 pour exécuter le site Web.
2. Lorsque la page Default.aspx s'affiche dans le navigateur, ne vous connectez
pas.À la place, cliquez sur le lien Page Membres.
Vous êtes redirigés vers la page Login.aspx parce que l'accès à la page des
membres est refusé pour les utilisateurs anonymes.
3. Dans la page de connexion, entrer le nom d'utilisateur et le mot de passe que
vous avez utilisés précédemment dans la procédure pas à pas pour vous
connecter.
Vous êtes redirigés vers la page Members.aspx car le nom d'utilisateur avec
lequel vous vous êtes connecté a été autorisé à accéder à la page.
4. Fermez la fenêtre de navigateur.

Exercices 6 : Création d'utilisateurs


Pour créer une page d'inscription
1.Dans l' Explorateur de solutions, cliquez avec le bouton droit sur le nom de
votre site Web, cliquez sur Ajouter un nouvel élément et ajoutez un nouveau
formulaire Web nommé Register.aspx.
1. Dans la page Register.aspx, basculez en mode Design et tapez le texte statique
tel que Inscription dans la page. Dans la barre d'outils Mise en forme, utilisez la
liste déroulante Format du bloc pour mettre en forme le texte en Heading 1.
2. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
CreateUserWizard sur la page.
3. Dans la fenêtre Propriétés pour le contrôle CreateUserWizard, affectez
~/Default.aspx à la propriété ContinueDestinationPageUrl.
Cela configure le contrôle afin que lorsque les utilisateurs cliquent sur
Continuer après avoir créé un utilisateur, le contrôle retourne à la page
d'accueil.
4. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
HyperLink sur la page. Dans la fenêtre Propriétés pour le contrôle HyperLink,
affectez Accueil à la propriété Text et ~/Default.aspx à la propriété
NavigateUrl.
Vous pouvez à présent ajouter un lien vers la page d'accueil qui affiche la page

197
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

d'inscription.Pour cette procédure pas à pas, supposez que vous souhaitez afficher le
lien d'inscription uniquement aux utilisateurs qui ne sont pas connectés.

Pour créer un lien d'inscription sur la page d'accueil


1.Basculez vers la page Default.aspx ou ouvrez-la.
2.Cliquez avec le bouton droit sur le contrôle LoginView ajouté précédemment,
puis sélectionnez Afficher la balise active. Dans le panneau Tâches LoginView,
sélectionnez AnonymousTemplate dans la zone de liste Affichages pour
activer l'édition dans le modèle anonyme.
3. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
HyperLink sur le modèle anonyme. Dans la fenêtre Propriétés pour le contrôle
HyperLink, affectez Inscription à la propriété Text et Register.aspx à la
propriété NavigateUrl. Le lien Inscription sera affiché uniquement aux
utilisateurs qui ne sont pas connectés.
Vous pouvez à présent tester le processus d'inscription.

Pour tester l'inscription


1. Appuyez sur CTRL+F5 pour exécuter le site Web et afficher la page Default.aspx.
Étant donné que vous n'êtes pas connecté, la page contenant le lien Inscription
est affichée.
2. Cliquez sur le lien Inscription.
La page d'inscription est affichée.
3. Dans les zones de texte, entrez un nouveau nom d'utilisateur, un mot de passe
fort, une adresse de messagerie, une question de sécurité et sa réponse.(Les
cinq renseignements sont requis.)
4. Cliquez sur Créer un utilisateur.
Un message de confirmation est affiché.
5. Cliquez sur le bouton Continuer.
Vous revenez à la page d'accueil en tant qu'utilisateur connecté.Notez que le
lien Connexion s'est transformé en Déconnexion et que les informations
affichées dans le contrôle Login proviennent de la propriété
LoggedInTemplate et non de la propriété AnonymousTemplate.
6. Cliquez sur le lien Connexion.
La page change pour afficher les informations pour les utilisateurs anonymes.
7. Cliquez sur le lien Connexion.
8. Entrez les informations d'identification de l'utilisateur que vous venez de créer.
Vous êtes connecté en tant que nouvel utilisateur.
9. Fermez la fenêtre de navigateur.

Exercices 7 : Modification de mots de passe


Pour créer une page de modification de mot de passe
1. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur le dossier
PagesMembres, cliquez sur Ajouter un nouvel élément et ajoutez un nouveau
formulaire Web nommé ChangePassword.aspx.
2. Vous mettez la page dans le dossier réservé aux membres parce que seuls les
utilisateurs connectés peuvent modifier leur mot de passe.
3. Dans la page ChangePassword.aspx, basculez en mode Design et tapez du texte
statique tel que Modifier le mot de passe. Dans la barre d'outils Mise en forme,
utilisez la liste déroulante Format du bloc pour mettre en forme le texte en
Heading 1.
198
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

4. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle


ChangePassword sur la page.
5. Dans la fenêtre Propriétés pour le contrôle ChangePassword, affectez
~/Default.aspx à la propriété ContinueDestinationPageUrl.
6. Cela configure le contrôle de sorte que, lorsque les utilisateurs cliquent sur
Continuer après avoir modifié un mot de passe, le contrôle retourne à la page
d'accueil.
Vous pouvez à présent ajouter un lien vers la page d'accueil qui affiche la page de
modification de mot de passe.Vous rendrez le lien disponible uniquement aux
utilisateurs qui sont connectés.

Pour créer un lien de modification de mot de passe sur la page d'accueil


1.Basculez vers la page Default.aspx ou ouvrez-la.
2.Cliquez avec le bouton droit sur le contrôle LoginView, puis cliquez sur Afficher
la balise active. Dans le menu Tâches LoginView, dans la liste Affichages,
cliquez sur LoggedInTemplate.
Cela bascule le contrôle LoginView en mode édition pour le contenu qui
s'affichera aux utilisateurs qui sont connectés.
3. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
HyperLink sur la zone d'édition. Dans la fenêtre Propriétés, pour le contrôle
HyperLink, affectez Modifier le mot de passe à la propriété Text et
~/PagesMembres/ChangePassword.aspx à la propriété NavigateUrl.
Le lien Modifier le mot de passe sera affiché uniquement aux utilisateurs qui
sont connectés, contrairement au lien Inscription que vous avez créé
précédemment.
Vous pouvez à présent tester le processus de modification de mot de passe.

Pour tester la modification de mot de passe


1. Appuyez sur CTRL+F5 pour exécuter le site Web.
2. Dans la page Default.aspx, cliquez sur le lien Connexion et connectez-vous en
tant qu'un des utilisateurs que vous avez créés.
Lorsque vous avez terminé, vous revenez à la page d'accueil en tant
qu'utilisateur connecté.
3. Cliquez sur le lien Modifier le mot de passe.
4. Dans la page de modification de mot de passe, entrez l'ancien mot de passe et
le nouveau mot de passe, puis cliquez sur Modifier le mot de passe.
5. Cliquez sur Continuer.
6. Dans la page d'accueil, cliquez sur Déconnexion.
7. Cliquez sur le lien Connexion.
8. Entrez le nouveau mot de passe.
Vous vous connectez avec le nouveau mot de passe.
9. Fermez la fenêtre de navigateur.

Exercices 8 : Récupération d'un mot de passe


Pour ajouter la récupération de mot de passe
1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom de
votre site Web, cliquez sur Ajouter un nouvel élément et ajoutez un nouveau
formulaire Web nommé RecoverPassword.aspx.
1. Dans la page RecoverPassword.aspx, basculez en mode Design et tapez du texte
statique tel que Redéfinir la valeur de mon mot de passe. Dans la barre d'outils

199
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Mise en forme, utilisez la liste déroulante Format du bloc pour mettre en


forme le texte en Heading 1.
2. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
PasswordRecovery sur la page.
3. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
HyperLink sur la page. Dans la fenêtre Propriétés pour le contrôle HyperLink,
affectez Accueil à la propriété Text et ~/Default.aspx à la propriété NavigateUrl.
4. Basculez vers la page Default.aspx.
5. Cliquez avec le bouton droit sur le contrôle LoginView, puis cliquez sur Afficher
la balise active. Dans le menu Tâches LoginView, dans la liste Affichages,
cliquez sur AnonymousTemplate.
Cela bascule le contrôle LoginView en mode édition pour le contenu qui
s'affichera aux utilisateurs qui ne sont pas connectés.
6. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
HyperLink sur le modèle. Dans la fenêtre Propriétés pour le contrôle
HyperLink, affectez à la propriété Text la valeur Vous avez oublié votre mot
de passe ? et à la propriété NavigateUrl la valeur ~/RecoverPassword.aspx.
Vous pouvez à présent tester la récupération de mot de passe.

Pour tester la récupération de mot de passe


1. Appuyez sur CTRL+F5 pour exécuter le site Web.
2. Par défaut, vous n'êtes pas connecté, vous consultez donc le modèle anonyme
du contrôle LoginView.
3. Cliquez sur Vous avez oublié votre mot de passe ?.
La page RecoverPassword.aspx s'affiche.
4. Tapez votre nom d'utilisateur et cliquez sur Envoyer.
La question de sécurité est affichée et vous êtes invités à taper la réponse à la
question de sécurité.
5. Tapez la réponse et cliquez sur Envoyer.
Si vous avez entré une réponse correcte, le site Web réinitialise votre mot de
passe et vous envoie un message électronique avec le nouveau mot de passe.

200
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 26
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision G Sécurité des applications Web

Code Activité G026

Activité Gestion des utilisateurs

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Créer des dossiers à accès restreint
Détails sur les objectifs  Assigner des rôles aux utilisateurs
visés par l’activité

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

201
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Création du site Web
1. Ouvrez Visual Studio.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
3. Sous Modèles Visual Studio installés, sélectionnez Site Web ASP.NET.
4. Dans la zone de liste Emplacement, cliquez sur Système de fichiers.
5. Cliquer sur Parcourir, puis sélectionnez un répertoire pour votre application,
telle que C:\WebSiteRoles.
6. Dans la zone Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
Le langage de programmation que vous choisissez sera la valeur par défaut pour
votre site Web, mais vous pouvez définir individuellement les langages de
programmation pour chaque page.
7. Cliquer sur OK dans la boîte de dialogue Nouveau site Web

Exercices 2 : Créer des dossiers à accès restreint


1. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur la racine de
votre site Web, cliquez sur Nouveau dossier puis nommez le dossier
PagesMembres.
Ce dossier contiendra une page qui n'est accessible qu'à certains de vos
utilisateurs.
2. Cliquez avec le bouton droit sur la racine de votre site Web, cliquez sur
Nouveau dossier, puis nommez le dossier PagesInvités.
Ce dossier contiendra une page accessible à tout utilisateur connecté (mais pas
aux utilisateurs anonymes).

Configuration de l'appartenance et des rôles du site Web


Après avoir créé le site Web de base, vous pouvez le configurer pour utiliser
l'appartenance et les rôles.

Pour configurer l'appartenance et les rôles du site Web


1. Dans le menu Site Web, choisissez Configuration ASP.NET.
2. Sélectionnez l'onglet Sécurité, cliquez sur le lien vers Utilisez l'Assistant
Installation de sécurité pour configurer la sécurité étape par étape, puis
cliquez sur Suivant.
3. Passez à l'étape 2 de l'Assistant et sélectionnez l'option À partir d'Internet.
L'Assistant affiche une page dans laquelle vous pouvez sélectionner la méthode
d'authentification que votre site Web utilisera.
Cette option spécifie que votre application utilisera l'authentification par
formulaire, dans laquelle les utilisateurs se connecteront à l'application à l'aide
d'une page de connexion que vous créerez à une étape ultérieure de cette
procédure.
4. Cliquez sur Suivant.
L'Assistant affiche un message qui déclare que les informations utilisateur seront
stockées à l'aide de Paramètres avancés des fournisseurs. Votre application
utilisera le fournisseur par défaut qui stocke des informations d'appartenance
dans un fichier de base de données SQL Server Express, dans le dossier
App_Data de votre site Web.
5. Cliquez à nouveau sur Suivant.

202
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

6. Dans Étape 4: Définissez les rôles, sélectionnez la case à cocher Activez des
rôles pour ce site Web, puis cliquez sur Suivant.
7. Lorsque vous y êtes invités, créez deux rôles, membres et invités, puis cliquez sur
Suivant.
8. Dans l' étape 5 : Ajouter des utilisateurs, créez trois utilisateurs nommés
membre1, invité1 et membreInvité.
Le site Web que vous créez permettra aux utilisateurs d'accéder aux différentes pages
selon leurs rôles.Par conséquent, vous devez créer quelques règles d'accès qui
déterminent quels rôles ont accès à quels dossiers.

Pour configurer des règles d'accès pour les dossiers du site


1. Dans l'Assistant de sécurité de l'outil Administration de site Web, cliquez sur
Suivant.
L' étape 6 : Ajouter des règles d'accès affiche une page sur laquelle vous
pouvez créer des règles qui déterminent quels rôles (ou utilisateurs) peuvent
accéder aux pages de votre site Web.
2. Sous Sélectionnez un répertoire pour cette règle, développez le nœud racine,
puis cliquez sur PagesInvités.
3. Sous La règle s'applique à, sélectionnez Utilisateurs anonymes.
4. Sous Autorisation, sélectionnez Refuser.
La règle que vous créez refuse l'accès aux utilisateurs anonymes, c'est-à-dire les
utilisateurs qui ne sont pas connectés.
5. Cliquez sur Ajouter cette règle.
La nouvelle règle est affichée dans la grille en bas de la page.Lorsque les
utilisateurs demandent une page du répertoire PagesInvités, les règles sont
vérifiées dans l'ordre, de haut en bas, pour déterminer si l'utilisateur est autorisé
à accéder à la page. Si l'utilisateur n'est pas connecté, les pages contenues dans
ce dossier ne seront pas affichées.
6. Sous Sélectionnez un répertoire pour cette règle, cliquez sur PagesMembres.
7. Sous La règle s'applique à,sélectionnez Rôle puis, dans la liste déroulante,
cliquez sur membres.
8. Sous Autorisation, sélectionnez Autoriser.
La règle que vous créez autorise l'accès au dossier PagesMembres à tous les
utilisateurs appartenant au rôle membres.
9. Cliquez sur Ajouter cette règle.
10. Sous Sélectionnez un répertoire pour cette règle, cliquez sur PagesMembres.
11. Sous La règle s'applique à, sélectionnez Tous les utilisateurs.
12. Sous Autorisation, sélectionnez Refuser.
13. Cliquez sur Ajouter cette règle.
La deuxième règle du dossier PagesMembres vérifie que seuls les utilisateurs
dans le rôle membres ne peuvent accéder au dossier. Les règles sont traitées
dans l'ordre, de haut en bas, lorsque vous les consultez dans la grille.
La première règle (Autoriser) accorde l'accès aux utilisateurs dans le rôle
membres.La deuxième règle (Refuser) refuse l'accès à tous les autres
utilisateurs.Vous pouvez créer autant de règles Autoriser ou Refuser que
nécessaire à votre application.Lorsque les utilisateurs demandent une page du
répertoire PagesMembres, les règles sont appliquées dans l'ordre, de haut en
bas, pour vérifier si l'utilisateur a le droit d'accéder à cette page.
14. Cliquez sur Terminer pour revenir à l'onglet Sécurité.

203
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Exercices 3 : assigner des rôles aux utilisateurs


1. Dans l'onglet Sécurité de l'outil Administration de site Web, sous Utilisateurs,
cliquez sur Gérer les utilisateurs.
2. Dans la ligne invité1, cliquez sur Modifier les rôles.
La zone Rôles contient une liste de rôles disponibles.
3. Sélectionnez la case à cocher invités pour assigner le rôle invités à l'utilisateur
invité1.
4. Dans la ligne pour membre1, cliquez sur Modifier les rôles et assignez le rôle
membres à l'utilisateur membre1.
5. À l'aide de la même technique, assignez les rôles invités et membres à
l'utilisateur membreInvité.
6. Fermez l'outil Administration de site Web, puis procédez comme suit :
a. Dans l'Explorateur de solutions, cliquez sur l'icône de rafraîchissement.
b. Dans le menu Site Web, cliquez sur Configuration ASP.NET pour
redémarrer l'outil Administration de site Web.
Cela garantit que la connexion à la base de données d'appartenance qui
a été utilisée par l'outil Administration de site Web est fermée.
c. Fermez à nouveau l'outil Administration de site Web.

Exercices 4 : Ajout de pages à l'accès restreint


Pour tester votre appartenance et vos paramètres de rôle, vous devez créer un moyen
pour que les utilisateurs puissent se connecter afin que vous puissiez les identifier.Vous
devez également créer quelques pages Web qui vous permettront de tester les règles
d'accès que vous avez créées.

Pour créer une page par défaut pour tous les utilisateurs
1. Basculez vers Visual Studio.
2. Ouvrez ou basculez vers la page Default.aspx, puis basculez en mode Design.
Si vous n'avez pas de page Default.aspx, ajoutez-en une à la racine de votre site
Web.
1. Ajoutez un titre qui contient du texte, tel que Bienvenue !
2. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
LoginStatus sur la page.
Une fois que vous avez cliqué sur le contrôle LoginStatus, il accepte des
utilisateurs sur la page Login.aspx qui ne sont pas connectés.
3. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
LoginName sur la page. Attribuez à la propriété FormatString la valeur "Hello
{0}".
Le contrôle LoginName affichera le nom de l'utilisateur, si l'utilisateur est
connecté.
4. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
HyperLink sur la page. Dans le panneau Propriétés du contrôle HyperLink,
affectez Invités et membres à la propriété Text et ~/PagesInvités/Invités.aspx à
la propriété NavigateUrl.
1. À partir du groupe Standard de la Boîte à outils, faites glisser un autre contrôle
HyperLink sur la page. Dans le panneau Propriétés du contrôle HyperLink,
affectez Membres à la propriété Text et ~/PagesMembres/Membres.aspx à la
propriété NavigateUrl.

Vous avez maintenant une page d'accueil qui est disponible à tous les utilisateurs.De
cette page, les utilisateurs peuvent établir des liaisons aux pages supplémentaires, dont
204
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

certaines seront restreintes.L'étape suivante consiste à créer une page de connexion


simple.

Pour créer une page de connexion


1. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur le dossier
racine de votre site Web et sélectionnez Ajouter un nouvel élément. Ajoutez
un Formulaire Web nommé Login.aspx à votre site Web.
2. Dans la page Login.aspx, basculez en mode Design.
3. À partir du groupe Connexion de la Boîte à outils, faites glisser un contrôle
Login sur la page.
4. Dans le panneau Propriétés du contrôle Login, affectez ~/Default.aspx à la
propriété DestinationPageUrl.

Enfin, vous devez créer quelques pages qui représentent le contenu restreint de votre
site.

Pour créer des pages restreintes


1. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur le dossier
PagesInvités, cliquez sur Ajouter un nouvel élément et ajoutez un Formulaire
Web nommé Invités.aspx dans ce dossier.
2. Basculez en mode Design et ajoutez un titre à la page Invités.aspx, tel que
Bienvenue sur la page Invités !
3. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
HyperLink sur la page. Dans le panneau Propriétés du contrôle HyperLink,
affectez Accueil à la propriété Text et ~/Default.aspx à la propriété NavigateUrl.
4. Dans l' Explorateur de solutions, cliquez avec le bouton droit sur le dossier
PagesMembres, sélectionnez Ajouter un nouvel élément et ajoutez un
Formulaire Web nommé Membres.aspx.
5. Basculez en mode Design et ajoutez un titre à la page Membres.aspx, tel que
Bienvenue sur la page Membres !
6. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle
HyperLink sur la page.
7. Dans le panneau Propriétés du contrôle HyperLink, affectez Accueil à la
propriété Text et ~/Default.aspx à la propriété NavigateUrl.
Vous n'êtes pas obligé d'ajouter du code aux pages pour restreindre l'accès.Leur
accès est restreint parce qu'elles résident dans des dossiers protégés par des
règles d'accès.

Exercices 5 : Test de rôles


Pour tester des rôles
1. Basculez sur la page Default.aspx, puis appuyez sur CTRL+F5 pour l'exécuter.
2. Cliquez sur Invités et membres.
Vous êtes redirigés sur la page Login.aspx parce que vous tentez d'accéder à
une page qui n'autorise pas d'utilisateurs anonymes.
3. Connectez-vous en tant que invité1 qui est dans le rôle invités.
Une fois connecté, vous êtes redirigé à la page Invités.aspx.
Cliquez sur Accueil pour retourner à la page Default.aspx.
La page Default.aspx affiche le texte Hello, invité1, dans lequel vous placez le
contrôle LoginName. De plus, le contrôle LoginStatus a remplacé le texte
Connexion par Déconnexion, parce que vous êtes connecté en tant que invité1.
4. Cliquez sur Invités et membres.
205
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Cette fois ci, vous allez droit à la page Guests.aspx car vous êtes déjà connecté
comme utilisateur dans le rôle invités.
5. Cliquez sur Accueil pour retourner à la page Default.aspx.
6. Cliquez sur Membres.
Vous êtes redirigé vers la page Connexion.aspx, car invité1 n'a pas
l'autorisation d'accéder à la page Membres.aspx.
7. Connectez-vous en tant que membre1 ou que membreInvité.
Vous êtes redirigé sur la page Membres.aspx parce que vous êtes maintenant
connecté en tant qu'utilisateur dans le rôle membres.
8. Cliquez sur Accueil pour retourner à la page Default.aspx.
La page reflète maintenant votre nouveau nom de connexion.

206
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

Activité d’apprentissage 27
Développement et Déploiement de Sites Web
Module TDI-21
Dynamiques

Précision I Programmer avec ajax

Code Activité I027

Activité Créer un site Web Ajax

Durée 3H

Phase d’apprentissage BASE

Cette activité d’apprentissage doit vous permettre


de :
 Créer site Web Ajax
Détails sur les objectifs  Utiliser le contrôle UpdatePanel
visés par l’activité  Utiliser le contrôle UpdateProgress

Poste de travail avec Windows 7 ou plus et éditeur


Matière d’œuvre et/ou
Visual Studio 2010
outillage

207
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

DESCRIPTION DE L’ACTIVITÉ
Exercices 1 : Créer un site Web
1. Ouvrez Visual Web Developer.
2. Dans le menu Fichier, cliquez sur Nouveausite Web.
La boîte de dialogue Nouveau site Web s'affiche.
3. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.
4. Dans la zone Emplacement, entrez le nom du dossier dans lequel vous
souhaitez conserver les pages de votre site Web.
Par exemple, tapez le nom du dossier C:\SitesWeb.
5. Dans la liste Langage, cliquez sur le langage de programmation que vous
préférez utiliser.
6. Cliquez sur OK.

Exercices 2 : Ajout d'un contrôle UpdatePanel


Après avoir créé un site Web, vous créez une page Web ASP.NET qui inclut un contrôle
UpdatePanel. Avant d'ajouter un contrôle UpdatePanel à la page, vous devez ajouter
un contrôle ScriptManager. Le contrôle UpdatePanel dépend du contrôle
ScriptManager pour la gestion des mises à jour de pages partielles.

Pour créer une nouvelle page Web ASP.NET.

1. Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le nom du site,
puis cliquez sur Ajouter un nouvel élément.
La boîte de dialogue Ajouter un nouvel élément s'affiche.

2. Sous Modèles Visual Studio installés, sélectionnez Formulaire Web.

3. Nommez la nouvelle page Employees.aspx et désactivez la case à cocher Placer


le code dans un fichier distinct.

4. Sélectionnez le langage à utiliser.

5. Cliquez sur Ajouter.

6. Basculez en mode Design.

7. Sous l'onglet Extensions AJAX de la boîte à outils, double-cliquez sur le


contrôle ScriptManager pour l'ajouter à la page.

208
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

8. Faites glisser un contrôle UpdatePanel à partir de la boîte à outils et déposez-le


sous le contrôle ScriptManager.

Exercices 3 : Ajout de contenu à un contrôle UpdatePanel


Le contrôle UpdatePanel exécute des mises à jour de pages partielles et identifie le
contenu mis à jour indépendamment du reste de la page. Dans cette partie de la
procédure pas à pas, vous allez ajouter un contrôle lié aux données qui affiche des
données de la base de données AdventureWorks.

Pour ajouter du contenu à un contrôle UpdatePanel

1. À partir de l'onglet Données de la boîte à outils, faites glisser un contrôle


GridView dans la zone de contenu du contrôle UpdatePanel.

2. Dans le menu Tâches GridView, cliquez sur Mise en forme automatique.

3. Dans le panneau Mise en forme automatique, sous Sélectionner un schéma,


sélectionnez Couleur, puis cliquez sur OK.

4. Dans le menu Tâches GridView, sélectionnez <Nouvelle source de données>


dans la liste Choisir la source de données.
L'Assistant Configurer la source de données s'affiche.

5. Sous D'où l'application obtiendra-t-elle les données ?, sélectionnez Base de


données.et cliquez sur OK.

6. Dans l'Assistant Configurer la source de données, pour l'étape Choisir votre


connexion de données, configurez une connexion à la base de données
AdventureWorks puis cliquez sur Suivant.

7. Pour l'étape Configurer l'instruction Select, sélectionnez Spécifiez une


instruction SQL personnalisée ou une procédure stockée puis cliquez sur
Suivant.

8.Sous l'onglet SELECT de Définir des instructions personnalisées ou des


procédures stockées, entrez l'instruction SQL suivante :
SELECT FirstName, LastName FROM HumanResources.vEmployee ORDER BY
LastName, FirstName
209
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques
OFPPT
CDC TIC

1. Cliquez sur Suivant.

2. Cliquez sur Terminer.

3. Dans le menu Tâches GridView, activez la case à cocher Activer la pagination.

4. Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page


dans un navigateur.

Exercices 4 : Ajout d'un contrôle UpdateProgress


Le contrôle UpdateProgress affiche un message d'état pendant la demande du nouveau
contenu du contrôle UpdatePanel.

Pour ajouter un contrôle UpdateProgress à la page

1. De l'onglet Extensions AJAX de la boîte à outils, faites glisser un contrôle


UpdateProgress sur la page et placez-le sous le contrôle UpdatePanel.

2. Sélectionnez le contrôle UpdateProgress et, dans la fenêtre Propriétés, affectez


UpdatePanel1 à la propriété AssociatedUpdatePanelID.
Le contrôle UpdateProgress est alors associé au contrôle UpdatePanel que
vous avez ajouté précédemment.

3. Dans la zone modifiable du contrôle UpdateProgress, tapez Getting Employees


... .

4. Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page


dans un navigateur.
S'il y a un délai d'attente pendant l'exécution de la requête SQL, le contrôle
UpdateProgress affiche le message que vous avez introduit dans le contrôle
UpdateProgress.

Pour ajouter un délai à l'exemple d'application

1. A l'intérieur du contrôle UpdatePanel, sélectionnez le contrôle GridView.

2. Dans la fenêtre Propriétés, cliquez sur le bouton Événements.

3. Double-cliquez sur l'événement PageIndexChanged pour créer un gestionnaire


d'événements.

4. Ajoutez le code suivant au gestionnaire d'événements PageIndexChanged pour


créer artificiellement un délai de trois secondes :
//Include three second delay for example only.
System.Threading.Thread.Sleep(3000);

5. Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page


dans un navigateur.

210
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web dynamiques