docDEUG MIAS 2ème année
download 
Plainte Transcription
DEUG MIAS 2ème année
Licence Informatique
Interface Homme Machine
TD 8
Application Internet ASP.net Modèle MVC
La création sous l’EDI de Visual Studio 2013, d’une application de type Application Web Asp.net modèle MCV permet la
génération d’un squelette d’applications dont certains fichiers sont décrits en annexe 1 (_Layout.cshtml), annexe 2 (Index.cshtml),
annexe 3 (HomeController.cs).
L’exécution du squelette de cette application sans modification présente l’interface suivante :
On souhaite modifier et compléter ce squelette d’application pour l’application de gestion d’un magasin en utilisant les classes
Produit et Magasin étudiées dans les précédents TD, mais pour une application Web.
Les classes Produit et Magasin sont décrites dans l’annexe 4 (extrait).
L’interface de l’application de gestion de magasin souhaitée s’appuie sur la présentation de l’interface du squelette et est de la
forme suivante :
Le bouton Lister et l’option Lister de la barre de navigation permettent d’afficher tous les produits du magasin. Le bouton
Rechercher et l’option Détail d’un produit permettent de rechercher un produit à partir de son code et d’afficher le détail de ce
produit. Le bouton Ajouter et l’option Ajouter un produit permettent d’ajouter un nouveau produit à l’aide d’un formulaire de
saisie.
1. Modification de la vue partagée _Layout.csthml
En étudiant le code donné en annexe 1 qui correspond au fichier _Layout.cshtml du squelette de l’application, identifier
les éléments visuels de cette vue qui sont affichés dans la page d’accueil et indiquer les éléments à modifier pour :
a. Modifier la barre de navigation pour changer le texte « Nom d’application » en « IHM Application »
b. Ajouter les 3 options Lister, Détail d’un produit et Rechercher un produit.
c. Ajouter des actions pour ces trois options, avec pour l’option Lister, le déclenchement de l’action (la méthode)
Lister du contrôleur ListerController, pour l’option Détail d’un produit, le déclenchement de l’action Afficher
du contrôleur AfficherController, et pour l’option Ajouter un produit, l’action Ajouter du contrôleur
AjouterController.
d. Rappeler le système de routage utilisé pour le déclenchement des actions en expliquant quelle est la requête http
utilisée.
e. Modifier le pied de page pour avoir le message « © 2016 - IHM Application » au lieu du message proposé dans
le squelette.
f. Modifier également la valeur du titre (Title) de la propriété ViewBag en « IHM Apllication »
2. Modification de la page d’accueil (Index.csthml)
En étudiant le code donné en annexe 2 qui correspond au fichier Index.cshtml du squelette de l’application identifier les
éléments visuels de cette vue qui sont affichés dans la page d’accueil et
a. Indiquer les parties textuelles à modifier (en accord avec la page de l’application IHM présentée ci-dessus)
b. Indiquer les modifications à faire pour gérer les boutons et leur permettre de réaliser les mêmes actions que les
options de la barre de navigation
3. Modèle de données
a. En utilisant l’annexe 4, expliquer les annotations qui sont définies dans la classe Produit (fichier Produit.cs)
b. Et expliquer le patron de conception utilisé pour la classe Magasin (fichier Magasin.cs)
4. Mise en place de l’option Lister (en utilisant le CM7)
a. Donner le code du contrôleur qui permet de demander l’affichage de la liste des produits (classe
ListerController, méthode Lister)
b. Donner le code de la vue correspondante
5. Mise en place de l’option Détail d’un produit (ou Afficher) (en utilisant le CM7)
a. Donner le code du contrôleur qui permet de demander l’affichage du détail d’un produit en fonction du code
saisi (classe AfficherController, méthode Afficher)
b. Donner le code de la vue correspondante
6. Mise en place de l’option d’ajout d’un produit (en utilisant le CM7)
a. Donner le code du contrôleur qui permet l’ajout d’un nouveau produit (classe AjouterController, méthodes
Ajouter pour les actions get et post)
b. Donner le code de la vue correspondante
ANNEXE 1
Fichier _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Mon application ASP.NET</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" datatarget=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Nom de l'application", "Index", "Home", null, new { @class =
"navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Accueil", "Index", "Home")</li>
<li>@Html.ActionLink("À propos de", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
ANNEXE 2
Fichier Index.cshtml
@{
ViewBag.Title = "Home Page";
}
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web
applications using HTML, CSS and JavaScript.</p>
<p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn
more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update
libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn
more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price
for your applications.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn
more »</a></p>
</div>
</div>
ANNEXE 3
Classe HomeController
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
ANNEXE 4
Classe Produit et Magasin
public class Produit
{
private int code;
private string nom;
private float prix;
private CategorieProduit cat;
private string sousCat;
public Produit()
{ code = -1; nom = "Inconnu"; prix = 0; cat = CategorieProduit.Consommable; sousCat="";
}
public Produit(int c, string n, float p, CategorieProduit ct, string sc
{ code = c; nom = n; prix = p; cat = ct; sousCat = sc;
}
public int Code
{ get {return code;} set{ code=value;}}
public string Nom
{ get {return nom;} set{ nom=value;}}
public float Prix
{ get {return prix;} set{ prix=value;}}
public CategorieProduit Categorie { get { return cat; } set { cat = value; } }
[Display (Name = "Catégorie")]
public string CategorieS
{
get { return Enum.Format(typeof(CategorieProduit), cat, "g"); }
set { cat = (CategorieProduit)Enum.Parse(typeof(CategorieProduit), value, false); }
}
[Display(Name = "Sous-Catégorie")]
public string SousCat
{ get { return sousCat; } set { sousCat = value; } }
public override string ToString()
{
string s = "";
s += "Code " + code + "\nNom " + nom + "\n";
s += "Categorie " + CategorieS + "\nPrix " + prix + "\n";
s += "Sous-categorie " + sousCat + "\n";
return s;
}
. . .
}
public class Magasin
{
private static Magasin instance = null;
private
private
private
private
private
string idMag;
string nom;
string tel;
string ville;
List<Produit> listeProd;
public
static Magasin Instance
{get { if ( instance == null) instance= new Magasin(); return instance;}}
public Magasin()
{
idMag = "MagDijon";
nom = "Hypermarché IHM";
tel = "123457890";
ville = "Dijon";
listeProd = new List<Produit>();
init();
}
public string IDMag
{ get { return idMag;} set {idMag=value;}}
public string Nom
{ get { return nom;} set {nom=value;}}
public string Tel
{ get { return tel;} set {tel=value;}}
public string Ville
{ get { return ville;} set {ville=value;}}
public List<Produit> ListeProd
{ get { return listeProd;} }
public int NbProduits
{ get {return listeProd.Count; }}
public void init()
{. . .}
public void ajoutProd(Produit p)
{ listeProd.Add(p) ; }
public override string ToString()
{
. . .
}
public Produit GetProduit(int c)
{ foreach (Produit p in listeProd)
{ if (p.Code == c)
return p;
}
return null;
}
. . .
}
