Vous êtes sur la page 1sur 14

OFPPT

CDC TIC

Activité d'apprentissage 1

Module TDI-21 Développement et déploiement de sites web


dynamiques

Précision A Développer des composants serveur

Code Activité A001

Activité Récupérer et exploiter des données à partir d'une page


HTML avec méthodes get et post

Durée 2 h 30

Phase d’apprentissage BASE

Détails sur les objectifs Cette activité d’apprentissage doit vous permettre de :
visés par l’activité
§

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


La base de données Recettes qui sera utilisée dans cette activité (et dans beaucoup
d'activités qui vont suivre) permet de stocker des recettes de cuisine. Les recettes sont
classées par thème. Chaque recette appartient à un et seul thème et utilise un
ensemble d'ingrédients avec des quantités variées.
Remarques pratiques :
- Les numéros de recette et d'ingrédients sont des numéros auto
- Deux recettes ne peuvent pas porter le même nom
- Deux ingrédients ne peuvent pas porter le même nom
- Le champ Difficulté peut prendre trois valeurs Difficile, Moyen ou Facile
- Le champ Photo est une chaine de caractères qui stocke le nom de la photo.
L'image sera stockée dans un dossier Images/Recettes dans le site web (pour
éviter de surcharger la base de données)
- La base de données pourra indifféremment être implantée sous SQL Server ou
sous Access (on préférera ici SQL Server pour des raisons de sécurité)

Structure de la base de données

Travail à réaliser
1) Créer un projet web vide à partir de Visual Studio (Manuel.sln)
2) Créer une page html Themes.htm contenant un formulaire pour l'ajout des
thèmes. En plus des zones de saisie du code et du nom du thème, le formulaire
contient un bouton Réinitialiser pour vider les différentes zones et un bouton
Valider pour transmettre les données à une page AjoutThemes.aspx. Avant le
transfert des données, ce bouton contrôle si les zones sont vides. Si c'est le cas,
un message d'erreur "Données Obligatoires" s'affiche sinon la page Ajout.aspx
s'affiche.

3) Associer une feuille de style à cette page. Le choix des règles de styles est libre
(penser à utiliser les assistants offerts par Visual Studio dans ce sens)

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

4) Créer la page AjoutTheme.aspx qui, dans son événement page_Load, récupère


les données du formulaire, utilise les classes ADO.Net pour accéder à la base de
données Recettes et vérifier si ce thème existe déjà. Si c'est le cas, le message
d'erreur "Ce thème existe déjà" s'affiche dans la page sinon le thème est inséré
dans la base de données et un message "ajout effectué avec succès" s'affiche
dans la page.
Remarque :
L'activité sera réalisée dans un premier temps en utilisant la méthode POST puis
sera reprise en utilisant la méthode GET

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

Activité d'apprentissage 2
Module TDI-21 Développement et déploiement de sites web
dynamiques

Précision A Développer des composants serveur

Code Activité A002

Activité Contrôles serveur, contrôles de validation et gestion


d'état

Durée 7h30

Phase d’apprentissage BASE

Détails sur les objectifs Cette activité d’apprentissage doit vous permettre de :
visés par l’activité
§

§
§
§

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


Dans cette activité, on va utiliser différents contrôles serveur afin de se familiariser avec
les outils ASP.Net et on va répartir notre travail sur différentes pages afin d'exploiter
différentes techniques de gestion d'état.

Travail à réaliser

1) Mettre en place un procédé pour enregistrer dans un fichier texte les activités de
démarrage et de redémarrage du site web (date et heure) ainsi que les opérations
d'ouverture et de fermeture de sessions (date, heure et id).
2) Mettre en place un procédé pour récupérer le nombre d'utilisateurs actuellement
en ligne.
3) Créer une page Demarrer.aspx. Au chargement de la page, le programme vérifie
la présence d'un cookie nommé UserRecetteSite sur le disque. Ce cookie contient
le nom de l'utilisateur qui s'est connecté. La page affiche alors "Bonjour [Nom
Utilisateur]" avec un lien hypetexte vers la page CreerRecette.aspx qui sera créée
plus tard.

Si le cookie n'existe pas, l'utilisateur doit fournir son nom et appuyer sur le bouton
Valider.

Si le navigateur autorise les cookies, le nom sera stocké dans un cookie


UserRecetteSite qui expire dans 3 mois. Si par contre le navigateur n'autorise
pas les cookies, le nom sera stocké dans une variable de session du même nom.
La fenêtre de bienvenue avec le lien vers la page CreerRecette.aspx s'affiche. Le
nom de l'utilisateur devra s'afficher dans les pages CreerRecette.aspx et
DetailRecette.aspx utilisées dans les questions ci-après.

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

4) Créer une page CreerRecette.aspx

Les règles suivantes doivent être respectées :


- La difficulté est à choisir dans un contrôle RadioButtonList (par défaut la
recette est de difficulté moyenne)
- Le thème est à choisir dans un contrôle DropDownList qui sera rempli à partir
de la table thème de la base de données Recettes. Les noms de recettes sont
visibles et les codes sont stockés comme valeur. Au choix d'un thème, son
nom s'affichera à côté dans un contrôle Label (attention au postBack)
- La photo sera sélectionnée à partir d'un contrôle FileUpload. Au choix d'une
photo, la photo s'affiche dans un contrôle Image (par défaut le contrôle Image
affiche l'image DefaultRecette.png)

5) Mettre en place des contrôles de validation :


- Le nom, le temps de préparation, la méthode de préparation et le thème
sont des données obligatoires
- La photo sélectionnée doit avoir une extension png, jpg ou gif
6) Un bouton Créer permet d'enregistrer la recette dans la base de données. La date
de création prend la date en cours. La photo choisie devra être envoyée au
dossier Images/Recettes sur le serveur web et le nom de l'image sera enregistré
dans la base de données (si aucune photo n'a été choisie, on utilise la photo
DefaultRecette.png). Après l'enregistrement de la recette, la page
DetailRecette.aspx s'affiche. Elle récupère le numéro de la recette créée ainsi
que son nom dans l'URL.

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

7) la page DetailRecette.aspx affiche dans un contrôle Label le nom de la recette.


Un contrôle GridView affiche la liste de tous les ingrédients. Pour chaque
ingrédient il affiche, en plus du nom de l'ingrédient, une case à cocher (contrôle
CheckBox). En fait l'utilisateur doit cocher les ingrédients à utiliser et appuyer sur
le bouton Utiliser :

La liste des ingrédients choisis s'affiche dans un deuxième Gridview. Devant


chaque ingrédient, une zone de texte devrait permettre de saisir la quantité
utilisée.
Le bouton Valider permet d'enregistrer les ingrédients de la recette dans la base
de données.

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

Activité d'apprentissage 3
Module TDI-21 Développement et déploiement de sites web
dynamiques

Précision A Développer des composants serveur

Code Activité A003

Activité Pages Maitres, thèmes et menus d'accès

Durée 5h00

Phase d’apprentissage BASE

Détails sur les objectifs Cette activité d’apprentissage doit vous permettre de :
visés par l’activité
§

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

On veut, dans le projet web Manuel, appliquer des styles aux contrôles serveur. On
veut aussi créer un menu d'accès au site en utilisant un plan du site.

Travail à réaliser

1) Créer un thème permettant de changer l'apparence des contrôles serveur. Le


thème devra être appliqué à tout le site excepté la page Demarrer.aspx.
2) Créer une page maitre Site1.master qui affiche en haut sur toute la largeur de la
page une bannière publicitaire et un menu de navigation (le menu exploite un plan
de site et un contrôle siteMapDataSource). On affiche également le nom de
l'utilisateur connecté et le nombre de visiteurs en ligne (traités dans l'activité
précédente).
Appliquer un style au menu de manière à faire la différence entre le menu
sélectionné et les autres menus
Une bande à droite de la page devra inclure des informations supplémentaires que
nous verrons plus tard.

3) Créer une deuxième page maitre Site2.master qui affiche cette fois uniquement la
bannière et le menu

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

4) Modifier la page creerRecette.aspx pour qu'elle inclue la page maitre


site2.master et pour enlever les informations qui apparaitront dorénavant dans la
page maitre (nom et nombre d'utilisateurs en ligne). La page aura l'aspect suivant :

Remarque
Dans ce qui va venir, toutes les nouvelles pages seront des pages de contenu web
utilisant l'une des pages maitres créées.

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

Activité d'apprentissage 4
Module TDI-21 Développement et déploiement de sites web
dynamiques

Précision A Développer des composants serveur

Code Activité A004

Activité contrôles source de données et contrôles de liaison de


données

Durée 10H00

Phase d’apprentissage BASE

Détails sur les objectifs Cette activité d’apprentissage doit vous permettre de :
visés par l’activité
§
§

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


On souhaite créer des pages web pour la consultation et la mise à jour des recettes et
des ingrédients. On peut le faire en utilisant les différentes classes ADO.Net mais vu
que cette possibilité a été largement traitée dans un module précédent et qu'elle
nécessite un certain effort dans l'écriture du code, nous allons privilégier ici les
nouvelles possibilités offertes par ASP.Net plus rapides et aussi efficaces.

Travail à réaliser

1) Créer une page web Ingredients.aspx qui permet de consulter ou de mettre à jour
des ingrédients. Un contrôle source de données sera utilisé pour récupérer les
ingrédients à partir de la base de données (penser à activer la mise à jour et à
donner des alias aux champs dans les requêtes pour éviter la modification des
étiquettes au niveau de chaque modèle).
La page Ingredients.aspx doit offrir la possibilité de naviguer entre différentes
vues (contrôles MutiView) :

Chaque vue affiche la liste des ingrédients en utilisant un contrôle de données


différent :
- La vue DataList : Utilise un contrôle de données DataList pour afficher la liste
des ingrédients

- La vue DetailsView : Utilise un contrôle de données DetailesView pour


afficher et mettre à jour des ingrédients

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

- La vue FormView : Utilise un contrôle de données FormView pour afficher et


mettre à jour des ingrédients

- La vue GridView : Utilise un contrôle de données GridView pour afficher et


mettre à jour des ingrédients

- La vue ListView : Utilise un contrôle de données ListView pour afficher les


ingrédients

- La vue Repeater : Utilise un contrôle de données Repeater pour afficher les


ingrédients selon un modèle libre

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

2) Créer une page consulterRecettes.aspx qui utilise la page maitre Site1.Master.


Cette page permet de consulter les recettes par thème. L'utilisateur choisit un
thème dans un contrôle DropDownList et la liste des noms de recettes apparait
sous forme de liens hypertextes :

3) Quand l'utilisateur choisit une recette, il est redirigé vers la page


consulterRecettesDetail.aspx (Master2.aspx) pour plus d'informations sur la
recette (le numéro de recette est transmis dans l'URL) :

l'image en forme d'étoile à côté du nom de la recette est en fait un contrôle


ImageButton qui nous servira plus tard dans les activités à venir pour enregistrer
les recettes favorites.

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