Professional Documents
Culture Documents
OFPPT
CDC TIC
OFPPT
SECTEUR NTIC
Filière : TDI
Niveau Technicien spécialisé
Manuel de TP
Module 21 : Développement et Déploiement de Sites Web
Dynamiques
1
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
Durée 1H
2
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
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" />
<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>
3
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
4
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
Durée 3H
Description de l’activité
5
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
6
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
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 :
7
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
}
}
Pour cela on dispose d'un répertoire Images contenant trois images Pic0.png, Pic1.png
et Pic2.png :
9
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
}
imgGraph.Visible = false;
}
10
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];
11
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
12
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
}
}
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é.
13
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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;
}
}
14
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
e)
{
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 :
if (!this.IsPostBack)
{
lblColeur.Visible = false;
lblCoordonnees.Visible = false;
//Code à ajouter
pnlCouleur.Visible = CheckCouleur.Checked;
pnlTaille.Visible = CheckTaille.Checked;
}
15
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
16
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
Durée 3H
Description de l’activité
17
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
}
}
Une zone de texte et un bouton permettent à l'utilisateur d'ajouter des éléments dans la
liste :
18
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 :
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 :
// 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 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();
c.ColumnSpan = 2;
c.Text = "Badia";
20
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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);
21
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
22
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
23
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);
}
}
}
}
}
Le tableau est alors bien affiché à l'emplacement choisi quand l'utilisateur coche la case :
25
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
26
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Quand l'utilisateur clique sur le bouton mettre à jour, la carte de vœux est générée
(Figure 60):
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'arrière-plan :<br />
<asp:DropDownList ID="dplstBackColor" runat="server"
Height="16px"
Width="211px">
</asp:DropDownList>
<br /><br />
Au démarrage de l'application des valeurs initiales sont fixées (couleurs, Police, Bordure,
image) qui correspondent au code behind suivant :
Enum.GetNames(typeof(KnownColor));
for (int i = 0; i < tabColor.Length; i++)
{
dplstBackColor.Items.Add(tabColor[i]);
}
dplstBackColor.SelectedIndex = 163;
// Famille de police
// using System.Drawing.Text;
InstalledFontCollection fonts = new
InstalledFontCollection();
imgDefault.ImageUrl = "Images/DefaultPic.png";
}
}
29
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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
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
// Message de Vœux :
lblVœux.Text = txtVœux.Text;
}
30
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 :
31
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Figure 19 : mon_imagemap.jpg
<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"
32
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
</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.
33
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Figure 21 : txtImage.png
34
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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"
</div>
</form>
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
:
36
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
37
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
</Advertisements>
38
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
Durée 2H
Description de l’activité
39
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="txtNom" Display="Dynamic"
ErrorMessage="le champ nom est
obligatoir !">*</asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2"
runat="server"
ControlToValidate="txtPrenom" ErrorMessage="le
champ prénom est obligatoir !">*</asp:RequiredFieldValidator>
</script>
</head>
args.IsValid = false;
}
}
<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-
9]|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|
1[012])\/((1[6-9]|[2-
41
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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])|
Activité d’apprentissage 6
((16|[2468][048]|[3579][26])00))))$">!
</asp:RegularExpressionValidator>
Développement et Déploiement de Sites Web
Module TDI-21
Validation du champ Email : Dynamiques
Précision <asp:RegularExpressionValidator
A ID="RegularExpressionValidator1"
Développer des composants serveur
runat="server" ControlToValidate="txtEmail"
Display="Dynamic"
Code Activité ErrorMessage="Le
A006 champ email n'est pas valide !"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+
([-.]\w+)*">!</asp:RegularExpressionValidator>
Activité Utiliser les contrôles serveur
Validation du champ mot de passe : vérifier la correspondance entre le mot de passe
(txtMotPasse) et sa confirmation (txtRetaperMotPasse)
Durée 3H
<asp:CompareValidator ID="CompareValidator2" runat="server"
Phase d’apprentissage BASE
ControlToCompare="txtMotPasse"
ControlToValidate="txtRetaperMotPasse"
Cette activité
Display="Dynamic" d’apprentissagemots
ErrorMessage="Les doit de
vous permettre
passe ne
de :
correspondent pas">!</asp:CompareValidator>
Utiliser le contrôle Panel et PlaceHolder.
Configuration des choix de validation :
Détails sur les objectifs Utiliser le contrôle SiteMapPath.
Cette page fournit aussi des quatre cases à cocher qui vous permettent de tester le
visés par l’activité Utiliser les contrôles Menu et TreeView.
comportement des validateurs avec différentes options. Lorsqu’une case à cocher est
Utiliser le contrôle Calendar.
sélectionnée, elle entraîne une publication, et met à jour les nouvelles options, comme
indiqué dans le code suivant :
42
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
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 :
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 :
ph.Controls.Add(msg);
ph.Controls.Add(new TextBox());
}
44
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-
1.0" >
<siteMapNode title="Home" description="Home" url="~/home.aspx"
>
45
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.
<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>
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.
<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>
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:
48
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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
49
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;
Activité
break; d’apprentissage 7
case 2:
Développement
calDate.SelectedDate = et
newDéploiement de Sites
DateTime(2012, 05, Web
10);
Module TDI-21
Dynamiques = calDate.SelectedDate;
calDate.VisibleDate
break;
case 3:
Précision AcalDate.SelectedDate
Développer des = composants serveur 07, 02);
new DateTime(2012,
calDate.VisibleDate = calDate.SelectedDate;
break;
Code Activité caseA007
4:
calDate.SelectedDate = new DateTime(2012, 09, 01);
calDate.VisibleDate
Utiliser = calDate.SelectedDate;
les contrôles serveur
Activité break;
case 5:
calDate.SelectedDate = new DateTime(2012, 12, 27);
Durée calDate.VisibleDate = calDate.SelectedDate;
1H
break;
Phase d’apprentissage BASE
default :
calDate.Visible = false;
break;
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é
51
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
}
6. Implémenter une propriété pour changer la couleur du contrôle Web utilisateur :
52
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
7. Enregistrer et compiler
53
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
Activité
Gestion de l'état d'une application
Durée 3H
54
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
On veut utiliser le passage par URL dans la page Default1.aspx, pour afficher le nom saisi
dans le contrôle TextBox txtNom.
}
11. Dans la page Default2.aspx récupérer le nom dans un contrôle Label lblNom on
tapant le code suivant :
55
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
56
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
57
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
}
2. Double-cliquer sur « Button2 » et ajouter le code suivant :
58
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
59
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
Durée 4H
DESCRIption de l’activité
60
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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();
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.
}
61
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
}
6. Compiler le code et naviguer sur la page Default11.aspx :
Constater que ce header et footer sont ajoutés pour toute page de l’application
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 :
62
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
63
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
Durée 3H
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
64
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
65
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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).
66
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
//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++)
{
}
tb.Rows.Add(tr);
}
}
}
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
67
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
68
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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();
}
}
}
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 :
69
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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();
}
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();
}
}
Le bouton Créer nouveau permet d'initialiser les zones de saisie :
protected void btnCreer_Click(object sender, EventArgs e)
71
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
{
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
Convert.ToInt16(chkContrat.Checked));
int ajout = 0;
try
{
con.Open();
ajout= cmd.ExecuteNonQuery();
}
catch (Exception ex)
{
lblErreur.Text = ex.Message;
}
finally
72
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
{
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();
}
}
Convert.ToInt16(chkContrat.Checked));
int modification = 0;
try
{
con.Open();
modification = cmd.ExecuteNonQuery();
}
catch (Exception ex)
{
lblErreur.Text = ex.Message;
}
finally
{
con.Close();
}
if (modification > 0)
{
RemplirListeAuteur();
73
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
}
}
Activité d’apprentissage 11
Et enfin la suppression :
Développement et Déploiement de Sitese)Web
Module protected voidTDI-21 btnSupprimer_Click(object sender, EventArgs
{ Dynamiques
string sql = "DELETE FROM Authors WHERE au_id=@IdOriginal
Précision "; A Développer des composants serveur
SqlConnection con = new SqlConnection(ch);
SqlCommand cmd = new SqlCommand(sql, con);
Code Activité cmd.Parameters.AddWithValue("@IdOriginal",
A011
drpAuteurs.SelectedValue);
int suppression = 0;
Activité try Accéder aux données avec ADO.NET
{
con.Open();
Durée suppression
4H = cmd.ExecuteNonQuery();
}
Phase d’apprentissage BASE
catch (Exception ex)
{ Cette activité d’apprentissage doit vous permettre
lblErreur.Text = ex.Message;
} de :
finally Utiliser le mode déconnecté
{
Détails sur les objectifs
con.Close();
visés par l’activité }
if (suppression > 0)
{
RemplirListeAuteur();
txtID.Text = "";
txtPrenom.Text = "";
txtNom.Text = "";
txtTelephone.Text = "";
txtAdresse.Text = "";
txtCodePostal.Text = "";
Poste de travail avec Windows 7 ou plus et éditeur
Matière d’œuvre et/ou txtVille.Text = "";
Visual Studio 2010
outillage txtPays.Text = "";
chkContrat.Checked = false;
txtID.Focus();
}
}
74
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
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.
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 :
75
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
</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".
76
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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>
77
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>
78
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 + "'";
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 :
79
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
cmd.Connection = MyConnection;
MyConnection.Open();
GridView1.EmptyDataText = "No Records Found";
GridView1.DataSource = cmd.ExecuteReader() ;
GridView1.DataBind();
80
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
81
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
Durée 4H
82
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
83
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
84
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.
87
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
9. Si vous souhaitez, tapez Ville ou du texte similaire avant que la zone de texte
n'agisse comme une légende.
11. Cliquez avec le bouton droit sur le contrôle SqlDataSource, puis cliquez sur
Afficher la balise active.
88
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
18. Sous Propriétés du paramètre, dans la liste ControlID, cliquez sur textCity.
20. Cliquez sur OK pour fermer la page Ajouter une clause WHERE.
23. Dans la zone Valeur, tapez London, puis cliquez sur OK.
Les enregistrements de client pour London apparaissent.
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.
89
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
90
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
91
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
92
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
93
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
94
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
95
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.
96
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
97
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.
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.
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.
29. Cliquez sur Tester la connexion et, lorsque vous êtes sûr que la connexion
fonctionne, cliquez sur OK.
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.
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 :
100
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
2. Cliquez sur Tester la requête pour vous assurer de récupérer les données que
vous souhaitez.
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.
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.
101
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
4. Fermez le navigateur.
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.
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.
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.
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.
102
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
20. Cliquez sur la case d'option Liaison de champs et sélectionnez City pour Lié à.
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.
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.
103
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
104
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
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.
.
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.
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.
12. Pour ajouter une nouvelle page de contenu nommée About.aspx, suivez les
mêmes étapes que pour la page d'accueil.
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é.
106
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
107
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
Durée 3H
Description de l’activité
108
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
109
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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
Activité :
d’apprentissage 15
<%@ Page Language="C#" Theme="sampleTheme" AutoEventWireup="true"
CodeFile="Default2.aspx.cs" Inherits="Default2"
Développement %>
et Déploiement de Sites Web
Module 7. TDI-21
Appuyez sur CTRL+F5 pour exécuter la page à nouveau :
Dynamiques
Durée 3H
110
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
<system.web>
<anonymousIdentification enabled="true" />
<profile>
<properties>
<add name="PostalCode" type="System.String"
allowAnonymous="true" />
</properties>
</profile>
</system.web>
Lorsque vous définissez une propriété de profil, vous spécifiez son type de données en
111
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
TextBox ID = PostalCodeTextBox
Button ID = SetPostalCodeButton
Label ID = PostalCodeLabel
Text = (vide)
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.
112
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
113
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
114
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
115
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
116
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
Durée 3H
Description de l’activité
117
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
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.
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.
121
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 ???
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>
???
123
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
</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/>
<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>
124
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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>
<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
< à la place de < et & à la place de &.
A- <example>
<isLower>
23 < 46
</isLower>
<ampersand>
Dupond & 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 > ,
" et ' respectivement.
A- <example>
<right-bracket> A la fois > et > sont autorisés</right-bracket>
<double-quote> A la fois " et " sont autorisés</double-quote>
<apostrophe> A la fois ' et ' sont autorisés</apostrophe>
Cela est utile dans : <el value=" ' " ' "/>
</example>
Exemple 11 : Les sections CDATA permettent de ne pas traiter les blocs de texte
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 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 <.
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.
127
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Exercices 4 :
Il s'agit de structurer, sous la forme d'un fichier XML, le texte suivant :
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>
129
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<espece>castellanus</espece>
</nom>
<altitude max="7000" min="5000" />
<hydrometeores>Aucun.</hydrometeores>
</nuage>
- <nuage>
- <nom>
cumulus
<espece>fractus</espece>
<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"?>
130
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<livre>
<titre>Mon livre</titre>
<auteurs>
<auteur>
<nom>Brillant</nom>
<prenom>Alexandre</prenom>
</auteur>
<auteur>
<nom>Briand</nom>
<prenom>Aristide</prenom>
</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 ?
131
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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"/>
</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">></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>
132
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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>
<element
id="10">&gt;</element>
</paragraphe>
<paragraphe><![CDATA[<element
id="10">></element>]]></paragraphe>
</chapitre>
</section>
</sections>
</livre>
133
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
134
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
Durée 4H
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)>
135
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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/>
</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)>
137
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
<!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>
138
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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 10 : Les attributs bbb et ccc doivent toujours être présents, tandis que
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
139
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
-4"/>
C- <attributes aaa="#d1" bbb="#d1" ccc="#d1"/>
D- <attributes bbb="A B C" ccc="A B C"/>
E- <XXX>
<AAA id="L12"/>
<BBB code="QW" list="L12"/>
<CCC X="L12" Y="QW" />
</XXX>
140
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
141
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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>
</XXX>
B- <XXX>
<AAA vrai="oui"/>
<AAA vrai="non"></AAA>
<AAA> </AAA>
<AAA>Salut !</AAA>
</XXX>
Solution
Exemple 1 :
142
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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
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
143
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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
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 :
144
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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>
<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+)>
145
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
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)>
146
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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)>
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
147
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
148
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
Durée 4H
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>
149
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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"/>
<xs:enumeration value="Autre"/>
</xs:restriction>
</xs:simpleType>
<xs:simpleType name="listIntType">
<xs:list itemType="xs:int">
</xs:list>
</xs:simpleType>
150
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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>
<xs:complexType name="auteursType">
<xs:group ref="auteursGrp"/>
</xs:complexType>
<xs:group name="auteursGrp">
<xs:sequence>
<xs:element maxOccurs="unbounded" name="auteur"
type="auteurType"/>
151
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
</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>
<xs:element name="auteurs" type="auteursType"/>
<xs:element name="sections" type="sectionsType"/>
</xs:sequence>
</xs:extension>
</xs:complexContent>
</xs:complexType>
<xs:complexType name="auteursType">
152
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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.
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">
153
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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">
<xs:key name="id">
<xs:selector xpath="contact"/>
<xs:field xpath="@id"/>
</xs:key>
<xs:keyref name="refId" refer="id">
<xs:selector xpath="contact"/>
154
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="sectionType">
<xs:sequence>
<xs:group ref="auteursGrp" minOccurs="0"/>
<xs:element name="chapitre" type="chapitreType" minOccurs="2"
155
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
➥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>
156
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
Durée 3H
Description de l’activité
157
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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>
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 :
/descendant::chapitre[contains(child::paragraphe,'Premier')]
– Trouver la liste des sections ayant un chapitre :
/descendant::section[count(child::chapitre)=1]
158
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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
Correction :
– Afficher la liste des chapitres avec plus de deux paragraphes à l’aide d’une expression
FLWOR :
159
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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>
</xsl:for-each>
</xsl:template>
<xsl:template match="sections" mode="FULL">
<xsl:for-each select="section">
160
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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"/>
</xsl:attribute>
</auteur>
</xsl:for-each>
</auteurs>
161
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
<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 :
162
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;
}
Exercice 7
163
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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>
<title><xsl:value-of select="//titre"/></title>
164
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
</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
165
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
Durée 3H
166
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.
[System.Web.Services.WebMethod()]
public double FahrenheitToCelsius(double Fahrenheit)
{
return ((Fahrenheit - 32) * 5) / 9;
}
[System.Web.Services.WebMethod()]
167
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
168
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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 :
169
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Button ID : ConvertButton
Text : Convert
Label ID : FahrenheitLabel
Text : (vide)
Label ID : CelsiusLabel
Text : (vide)
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.
171
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
172
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
173
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Vous pouvez effectuer cette procédure à l'aide de l'interface utilisateur ou d'un script.
Utilisation de l'interface utilisateur
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.
dossier du site Web ou cliquez sur le bouton Parcourir (...) pour accéder au
système de fichiers et y rechercher le dossier.
Activité d’apprentissage 23
6. Si le chemin d'accès physique que vous avez indiqué à l'étape 5 est celui d'un
Développement
accès distant, cliquez sur et Déploiement
Se connecter en tant que pour spécifierde les
Sites Web
Module TDI-21
Dynamiques
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
Précision Utilisateur Fde l'application (authentification
Déploiement d’unedirecte) dans laWeb
application boîte de
dialogue Se connecter en tant que.
8. La valeur par défaut dans la zone Adresse IP est Toutes non attribuées. Si vous
Activité Déploiement d’un site Web
devez spécifier une adresse IP statique pour le site Web, tapez cette adresse
dans la zone Adresse IP.
Durée 3H
9. Tapez le numéro de port dans la zone Port.
Phase d’apprentissage BASE
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 Cette
l'hôte. activité d’apprentissage doit vous permettre
de :
11. Si vous n'avez pas de
modifications à apporter
Utiliser l’outil à cele
copier site, et siWeb
site vous souhaitez le
rendre immédiatement disponible, activez la case à cocher Démarrage
Détails sur les objectifs
immédiat du site Web.
visés par l’activité
175
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
179
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
Durée 3H
Description de l’activité
180
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
using System;
181
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
À 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.
183
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
Durée 4H
184
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
185
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.
186
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
187
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
188
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
texte exact importe peu, tant que vous serez en mesure de reconnaître cette
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.
189
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.
190
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Heading 1.
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.
191
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
statique tel que Redéfinir la valeur de mon 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.
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.
192
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
Durée 3H
193
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
Description de l’activité
194
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
195
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
196
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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
certaines seront restreintes.L'étape suivante consiste à créer une page de connexion
simple.
Enfin, vous devez créer quelques pages qui représentent le contenu restreint de votre
site.
197
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
198
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
Durée 3H
DESCRIPTION DE L’Activité
199
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
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.
200
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
201
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques
OFPPT
CDC TIC
4. Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans
un navigateur.
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.
5. Enregistrez vos modifications et appuyez sur CTRL+F5 pour afficher la page dans
un navigateur.
202
Manuels de Travaux Pratiques 2015 TDI-21 Développement et déploiement de sites web
dynamiques