Aller au contenu principal

TP2 créer un projet et implémenter des fonctionnalités

Lien GitHub vers les fichiers de démarrage​

Consignes​

  • L'utilisation de l'IAG pour créer partiellement ou totalement des éléments du travail entraînera automatiquement la note de zéro et un plagiat
  • Vous DEVEZ faire, au moins, les migrations et les commits demandés, mais vous pouvez en faire plus sans problème, tant que vous les documentez correctement.

Création du projet​

  1. Créez un dépôt GitHub PRIVÉ portant le nom 3W6_TP2_NOM_PRENOM et ajoutez votre enseignant comme collaborateur
  2. Créez un nouveau projet MVC qui se nomme NutriVie
  3. Utilisez la version .NET 10
  4. Installez les packages suivants :
    • Microsoft.EntityFrameworkCore 10.0.12 (Dernière version stable)
    • Microsoft.EntityFrameworkCore.Design 10.0.12 (Dernière version stable)
    • Microsoft.EntityFrameworkCore.SqlServer 10.0.12 (Dernière version stable)
    • Microsoft.EntityFrameworkCore.tools 10.0.12 (Dernière version stable)
    • Microsoft.VisualStudio.Web.CodeGeneration.Design 10.0.2 (Dernière version stable)
      • NuGet.Packaging 7.9.0 (Dernière version stable)
      • NuGet.Protocol 7.9.0 (Dernière version stable)
info

Les paquets NuGet.Packaging et NuGet.Protocol utilisés dans le paquet Microsoft.VisualStudio.Web.CodeGeneration.Design ont des vulnérabilités importantes et empêchent le bon fonctionnement de la solution. Il est donc important de mettre manuellement les deux paquets afin de pallier temporairement le problème.

Mise en place des fichiers de base du projet​

Le dossier Fichiers de départ contient plusieurs éléments que vous devrez intégrer à votre projet pour le faire fonctionner correctement.

  1. Remplacez le contenu du fichier de Layout de votre projet /Views/Shared/_Layout.cshtml par celui qui est dans le fichier _Layout.txt.
  2. Remplacez le contenu du fichier d’index de votre projet /Views/Home/Index.cshtml par celui qui est dans le fichier index.txt.
  3. Remplacez le contenu du fichier de style de votre projet /wwwroot/css/site.css par celui qui est dans le fichier site.css fourni.
  4. Ajoutez le dossier images fourni dans le dossier /wwwroot/ de votre projet.
  5. Avant de continuer, assurez-vous que votre page d’accueil soit identique à celle-ci :

Image 1

  1. C’est le moment de faire votre commit et votre push, voir comment bien faire vos messages de commit.

Configuration de la base de données et du service SQL Server​

  1. Faites les modifications nécessaires dans les fichiers de votre projet pour que la base de données soit fonctionnelle. Celle-ci devra se nommer NutriVieEF. La classe pour votre DbContext devra se nommer NutriVieDbContext.cs
  2. C’est le moment de faire votre commit et votre push.

Gestion des services​

La section « Pourquoi Nutrivie ? » de la page d’accueil présente une liste de trois services (Recettes Saines, Plan Nutritionnels, Conseils d’Experts).

Image 2

Pour le moment, ces éléments sont codés de façon statique. Nous allons plutôt stocker ces informations dans la base de données et ensuite les afficher.

  1. Dans le répertoire /Models/, créez une classe nommée Service qui sera gérée par Entity Framework (EF)
  2. À partir du diagramme ci-dessous, ajoutez les champs et les annotations nécessaires à votre classe Service. Note : Puisque les services sont dans la page d’accueil (/Views/Home/Index.cshtml), il ne sera pas nécessaire de créer un contrôleur MVC pour la classe Service. Nous utiliserons le contrôleur HomeController déjà présent (/Controllers/HomeController.cs).
  3. Ajoutez un seed de données pour la classe Service. Utilisez les informations des trois services disponibles sur la page d’accueil pour remplir votre seed.

Image 3

  1. Ajoutez une migration et mettez à jour votre base de données.
  2. Modifiez l’action Index() du HomeController pour qu’elle retourne la liste des services à la vue index.cshtml
  3. Modifiez la vue index.cshtml pour qu’elle utilise les données retournées par l’action Index(). Si vous avez correctement implémenté le code, vous devriez obtenir le même résultat :

Image 2

  1. C’est le moment de faire votre commit et votre push.

Gestion des catégories et des recettes​

Nous voulons créer des recettes et associer celles-ci à des catégories, par exemple : Cuisine française.

  1. Créez une classe nommée Categorie et copiez le contenu du fichier ClasseCategorie.txt dedans.
attention

Elle est partiellement complétée, vous aurez à compléter les relations plus tard.

  1. Créez une classe nommée Recette et copiez le contenu du fichier ClasseRecette.txt dedans.
attention

Elle est partiellement complétée.

  1. Complétez les relations entre les classes Catégorie et Recette sachant qu’une recette appartient à une catégorie et qu’une catégorie peut contenir plusieurs recettes.
  2. Générez un contrôleur MVC avec vues pour la classe Catégorie.
  3. Générez un contrôleur MVC avec vues pour la classe Recette.
  4. Ajoutez le seed de données pour Catégorie et Recette qui est fourni dans le fichier seed.txt.
  5. Faites une migration et mettez à jour votre base de données.
  6. Modifiez le code pour que les onglets Catégories et Recettes des menus de navigation (header et footer) mènent vers les pages Index respectives.
  7. À ce point, vous devriez pouvoir faire des opérations CRUD pour les entités Catégorie et Recette.
attention

Si vous voulez tester la suppression d'une catégorie ou d’une recette, nous vous recommandons d'en ajouter une nouvelle plutôt que de supprimer celles déjà présentes.

  1. C’est le moment de faire votre commit et votre push.

Modifications dans les vues Recettes​

Dans la vue Index​

  1. Affichez le nom de la catégorie plutôt que le Id.
  2. Triez les recettes par catégorie et ensuite par nom.
  3. Affichez les images des recettes avec une largeur de 150 px si elles sont présentes (style intraligne).
  4. Changez la largeur du contenu de la colonne Description à 250 px (style intraligne).
  5. Changez les entêtes TempsPreparation et TempsCuisson du tableau par « Durée (min) » et « Cuisson (min) ».
  • Résultat attendu :

Image 4

Dans la vue Détails​

  1. Affichez le nom de la catégorie plutôt que le Id.
  2. Affichez l'image de la recette en pleine résolution si elle est présente.
  3. Placez la catégorie avant l’image.
  4. Si ce n’est pas déjà le cas, changez les titres TempsPreparation et TempsCuisson du tableau par « Durée (min) » et « Cuisson (min) ».
  • Résultat attendu :

Image 5

Dans la vue Delete​

  1. Affichez le nom de la catégorie plutôt que le Id.
  2. Retirez le temps de préparation, le temps de cuisson et l’image.
  • Résultat attendu :

Image 6

Dans les vues Edit et Create​

  1. Dans le Select des catégories, affichez le nom de la catégorie plutôt que le Id.
  2. Le label de ce champ doit être « Catégorie » plutôt que « CategorieId ».
info

Pour la photo, on garde ça simple pour l'instant et on doit taper le nom de l'image de la recette.

  • Résultat attendu :

Image 7 Image 8

  1. C’est le moment de faire votre commit et votre push.

Modification de la vue index de categorie​

  1. Ajoutez une colonne qui affiche les recettes pour chaque catégorie.
  2. Les catégories doivent être classées en ordre alphabétique inverse.
  3. Pour chaque catégorie, les recettes doivent être ajoutées en ordre alphabétique.
  4. Pour chaque recette, nous aimerions afficher le temps de préparation entre parenthèses (voir l’image plus bas).
  5. Lorsque l’on clique sur une recette, on doit être redirigé vers la page Edit de cette recette.
  • Résultat attendu :

Image 9

info

Si l’on clique sur une recette (ex. : Couscous royal), nous serons redirigés vers la page d’édition de cette recette.

  1. C’est le moment de faire votre commit et votre push.

Implémentation de la logique d’affaires​

  1. Empêchez la suppression d’une catégorie si celle-ci est associée à au moins une recette.
  2. Affichez un message d’erreur approprié (voir image).
  3. Assurez-vous que la suppression d’une catégorie qui ne contient pas de recettes fonctionne aussi.
  • Résultat attendu :

Image 10

  1. Empêchez l’ajout d’une catégorie du même nom.
  2. Affichez un message d’erreur approprié (voir images).
  3. Il faut tenir compte de la casse : Orientale et orientale déclenchent le message d’erreur.
  • Résultat attendu :

Image 11 Image 12

  1. C’est le moment de faire votre commit et votre push.

Vues partielles et Fontawesome​

  1. Créez des vues partielles pour regrouper les boutons d’action Create, Edit et Delete ainsi que le bouton Back to List.
  2. Pour obtenir le résultat attendu, vous devrez faire quelques modifications au niveau des classes Bootstrap (voir détails plus bas).
  3. Vos vues partielles devront être utilisées dans les vues suivantes :
    • Categories/Create
    • Categories/Edit
    • Categories/Delete
    • Recettes/Create
    • Recettes/Edit
    • Recettes/Delete
attention

Au total, vous ne devrez pas avoir plus de trois vues partielles différentes pour cette section, car il existe 3 actions (Create, Edit et Delete). Chacune de ces vues partielles devra aussi contenir l’action Back to List.

Classes Bootstrap​

Pour Categories/Create, Recettes/Create et la vue partielle associée :​

  1. Remplacez la classe form-group du div contenant la vue partielle par la classe d-flex pour que les boutons soient côte à côte.
  2. Ajoutez une classe Bootstrap pour espacer les deux boutons.
  3. Ajoutez les classes btn et btn-secondary sur le bouton d’action Back to List.
  • Résultat attendu :

Image 13

Pour Categories/Delete, Recettes/Delete et la vue partielle associée :​

  1. Ajoutez les classes btn et btn-secondary sur le bouton d’action Back to List.
  2. Retirez le symbole pipe (|).
  • Résultat attendu :

Image 14

Pour Categories/Edit, Recettes/Edit et la vue partielle associée :​

  1. Faire les mêmes modifications que pour Create.
  • Résultat attendu :

Image 15

Utilisez FontAwesome pour les boutons suivants.​

  1. Ce n’est pas grave si vous n’avez pas exactement les mêmes symboles.

Image 16

  • Résultats attendus :

Image 17Image 18Image 19

  1. C’est le moment de faire votre commit et votre push.

LINQ : mise en place​

  1. Avant de commencer cette section, ajoutez une nouvelle classe nommée Aliment.
  2. Utilisez le code fourni dans le fichier Classe_Aliment.txt du dossier Fichiers_section_Linq.
  3. Il y a une relation plusieurs à plusieurs entre Recette et Aliment. Ajoutez la propriété de navigation nécessaire dans la classe Recette.
  4. Ajoutez le seed pour Aliment contenu dans le fichier Seed_Aliment.txt et le DbSet.
  5. Mettez à jour votre BD.
  6. Puisqu’il s’agit d’une relation plusieurs à plusieurs, vous remarquerez qu’une table associative AlimentRecette a été ajoutée dans la BD.
  7. Nous allons créer cette table manuellement pour y stocker de l’information. Créez une nouvelle classe nommée AlimentRecette et utilisez le code fourni dans le fichier Classe_AlimentRecette.txt.
attention

Ne rajoutez pas de clé primaire à cette classe, une clé composée est déjà définie dans la création du dbContext.

  1. Ajoutez le seed pour AlimentRecette contenu dans le fichier Seed_AlimentRecette.txt et le DbSet.
  2. Puisque Recette et Aliment ne sont plus liés directement, il faut modifier les propriétés de navigation des deux classes.
  3. Retirez les propriétés de navigation qui liaient les deux classes et ajoutez cette nouvelle propriété de navigation dans les deux classes :
[ValidateNever]
public List<AlimentRecette> AlimentRecettes { get; set; }
  1. Ainsi, les classes Recette et Aliment sont maintenant liées à la classe associative AlimentRecette.
  2. Mettez à jour la BD.
  3. C’est le moment de faire votre commit et votre push.

LINQ : requêtes (faites d’abord la section « Mise en place »)​

  1. Vous devez créer une page pour afficher des informations sur l’application. Vous devrez avoir un contrôleur et une vue index.
  2. Ajoutez un onglet Stats dans le menu de navigation pour accéder à cette page.
  3. Vous devez utiliser un ViewModel qui devra contenir les informations à afficher dans cette vue. Nommez-le StatVM.
  4. Vous devrez utiliser LINQ pour obtenir les informations.
  5. Chaque information nécessitera l'utilisation d'au moins une méthode LINQ.
info

Vous devez utiliser au minimum les méthodes LINQ qui sont spécifiées dans les instructions.

  1. Informations à afficher :
    • Le nombre de recettes avec 3 aliments.
    • L’aliment le plus calorique.
    • Une liste des quatre recettes dont la durée totale est la plus courte (préparation et cuisson). Vous devez afficher le nom de la recette et le temps total.
    • Le nombre de calories de la recette française la moins calorique en utilisant Min et Sum.
Vous aurez besoin des attributs CaloriesPour100g de la classe Aliment et Poids de la classe associative AlimentRecettes pour faire votre calcul (le poids est en grammes).
  • Résultat attendu :

Image 20

info

Vous n’êtes pas obligé de présenter l’information exactement de la même façon.

  1. C’est le moment de faire votre commit et votre push.

Affichage d’un menu de recettes avec un accordéon Bootstrap​

  1. Pour cette dernière section, nous allons afficher dans une nouvelle vue des informations sur les recettes en utilisant un accordéon Bootstrap (allez voir le laboratoire 1 de la rencontre 10). Vous devez avoir fait la section LINQ : MISE EN PLACE avant de faire cette section.

  2. Voici un exemple de ce que l'on doit voir dans ce menu lorsque l'on clique sur une catégorie. Chaque catégorie contient sa liste de recettes et pour chaque recette, nous affichons certaines informations (détails plus bas).

Image 21 Image 22

  1. Pour ce menu, vous devrez utiliser une vue partielle pour afficher le tableau et vous devez également utiliser une vue partielle pour afficher le contenu de chaque rangée du tableau.

Image 23

  1. Vous devrez également utiliser un ViewModel qui doit se nommer RecetteCategorieVM.

  2. Vous devrez également utiliser un ViewModel qui doit se nommer RecetteInfoVM. Celui-ci contiendra les informations de la recette. Le temps total représente la somme du temps de préparation et du temps de cuisson.

  3. Le ViewModel RecetteCategorieVM doit, en plus de ses autres propriétés, contenir une List<RecetteInfoVM>.

  4. Vous pouvez nommer vos vues comme vous le voulez, mais voici une suggestion :

    • Vue principale avec l'accordéon (AllRecettes.cshtml)
      • Vue partielle avec le tableau (RecetteCategorie.cshtml)
        • Vue partielle avec une rangée du tableau (RecetteInfo.cshtml)

  5. Remarquez que, pour chaque titre de l'accordéon, on affiche le nom de la catégorie.

  6. Pour le statut, il faut afficher un de ces trois messages qui dépend directement du temps total de la recette qui est affiché dans la colonne précédente :

astuce

Recette de courte durée (50 minutes ou moins)

attention

Recette de durée moyenne (entre 51 et 90 minutes)

danger

Recette de longue durée (plus de 90 minutes)

Utilisez une couleur différente pour chaque message. Vous pouvez utiliser les classes (text-success, text-warning, text-danger). La logique pour cette fonctionnalité doit se faire dans la vue.

  1. C’est le moment de faire votre commit et votre push.

Pondération​

Éléments de correctionPondération
Création et mise en place du projet initial3
Configuration de la base de données et du service SQL Server2
Gestion des services3
Gestion des catégories et des recettes7
Modification de la vue index de catégorie4
Logique d’affaires4
Vues partielles et FontAwesome2
LINQ (mise en place et requêtes)5
Affichage du menu de recettes avec l’accordéon Bootstrap8
Consignes Git (commits/push)2
TOTAL40