Exécutez l'application en mode débogage
Commençons cette troisième partie en testant ce que nous avons déjà réalisé. Ce chapitre a pour but de présenter le code généré par Entity Framework dans vos contrôleurs et vos vues en se basant sur les classes de modèle que vous avez créées. Une fois que vous vous serez familiarisé avec le code de base généré pour ces composants, nous identifierons les éléments que vous devez personnaliser pour répondre aux besoins de vos données et de votre application.
Le débogage de l'application est assez simple à ce stade. Compilez le projet pour vous assurer qu'il n'y a pas d'erreurs (s'il y en a, corrigez-les), puis appuyez sur F5 pour lancer le débogage.
Dans le chapitre 3 de la première partie, vous vous êtes inscrit en tant que nouvel utilisateur de votre application. Lorsque celle-ci est en cours d'exécution, inscrivez un nouvel utilisateur en cliquant sur le lien Register (Inscription) en haut à droite de la page. Testez ensuite la connexion pour vous assurer qu'elle fonctionne correctement.
Une fois connecté, vous verrez un écran comme celui-ci :
Il n'y a rien de spécial ici, juste la page d'index par défaut d'une application MVC. Vous remarquerez le message d'accueil en haut à droite, qui reprend l'adresse e-mail que vous avez utilisée pour vous connecter. Il est suivi d'un lien de déconnexion. Le message d'accueil avec votre adresse e-mail est un lien. Si vous cliquez dessus, vous accéderez à une page de gestion de compte où vous pourrez modifier votre mot de passe et d'autres informations personnelles. Cela ne nous concerne pas pour l'instant, mais je voulais simplement attirer votre attention sur son existence.
Vous êtes maintenant connecté, et l'application est prête à être testée. Mais, par où commencer ? Au vu de ce qui s'affiche à l'écran, vous avez bien raison de vous poser cette question. Identifions quelques éléments évidents à tester.
Identifiez les personnalisations nécessaires
La première chose que vous pourriez remarquer lorsque vous regardez la page d'accueil de votre application, c'est qu'elle n'offre aucun moyen à l'utilisateur d'accéder à sa liste de films personnelle ou à l'une des pages que vous avez générées automatiquement pour gérer les films dans la base de données. On peut donc envisager d'ajouter des éléments de menu. Allons-y.
Pas besoin d'arrêter l'application pour le faire. Toutes les modifications que vous souhaitez apporter aux vues peuvent être effectuées pendant que l'application est en cours d'exécution. En revanche, si des modifications doivent être apportées au code du contrôleur ou du modèle, vous devrez arrêter le débogage et reprendre le développement standard.
Vous pouvez trouver tout le code de navigation dans le menu dans le fichier de disposition de votre application : Views > Shared > _Layout.cshtml. Vers la ligne 31 de ce fichier, juste en dessous de l'appel de la vue partielle _LoginPartial, vous verrez une liste HTML de balises d'ancrage qui comprend les deux éléments de menu de votre barre de navigation : Home (Accueil) et Privacy (Confidentialité). Insérez deux nouveaux éléments de menu entre eux. Nommez le premier "Ma liste de films" et faites-le pointer vers la méthode Index du contrôleur ListeFilmsController. Nommez le second "Films" et faites-le pointer vers la méthode Index du contrôleur FilmsController. Lorsque vous aurez terminé, votre liste devrait ressembler à ceci :
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home"
asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area=""
asp-controller="ListeFilms" asp-action="Index">Ma liste de films</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Films"
asp-action="Index">Films</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home"
asp-action="Privacy">Privacy</a>
</li>
</ul>Enregistrez votre travail et actualisez la page dans votre navigateur. Vous devriez voir vos nouveaux éléments de menu dans la barre de navigation. Testez les éléments de menu en cliquant sur chacun d'eux et vérifiez qu'ils fonctionnent tous comme vous le souhaitez. Comme vous n'avez pas encore introduit de données, il n'y a pas grand-chose qui s'affiche, mais si les deux images suivantes correspondent aux écrans que vous voyez pour Ma liste de films et Films, vous êtes sur la bonne voie.
Exercice
Dans la page d'index des films, vous remarquerez un lien Create New (Créer nouveau) sous le titre Index, en haut de la page. (Ce lien est également présent dans la page d'index de la liste de films, mais nous le modifierons plus tard.)
Prenons quelques minutes pour ajouter certains de vos films préférés à la base de données en utilisant le lien Create New (Créer nouveau) dans la page d'index des films. La page de création de films s'affiche alors. Étudiez les modalités de saisie d'informations proposées par la page. Voyez-vous des améliorations à apporter ? Est-il possible de rendre cette page plus simple à utiliser et de limiter les erreurs ? Comment voudriez-vous que cette page soit présentée et mise en forme si vous deviez créer une page idéale ? Notez ces idées sur une feuille de papier et gardez-la sous le coude. Nous y reviendrons dans le chapitre suivant.
Faites de même pour les pages Edit (Modifier), Details (Détails), Delete (Supprimer) et Index.
Une dernière modification, juste pour le plaisir
Réfléchissons maintenant à l'ergonomie. Ne serait-il pas intéressant que l'utilisateur soit dirigé automatiquement vers sa liste de films lors de sa connexion ? Il n'y a aucun intérêt à le faire arriver sur la page d'accueil. En effet, il est fort probable qu'il utilise l'application pour interagir avec sa liste de films. Voyons comment ajouter cette fonctionnalité, puis exécutons à nouveau l'application. Puisque le code nécessaire se trouve dans un contrôleur, vous devez fermer l'application. Pour ce faire, fermez la fenêtre du navigateur ou cliquez sur le bouton Stop dans la barre d'outils de Visual Studio.
Ouvrez maintenant le contrôleur HomeController et examinez la méthode Index. Vous pouvez y ajouter une simple vérification pour rediriger l'utilisateur s'il est connecté lorsque la page d'accueil est demandée. Regardez attentivement le code ajouté ci-dessous :
public IActionResult Index()
{
if (User.Identity.IsAuthenticated)
{
return RedirectToAction("Index", "ListeFilms");
}
return View();
}Ce code supplémentaire exploite l'objet statique User fourni par le contrôleur. Il examine la propriété booléenne IsAuthenticated de la propriété Identity de l'objet User. Si l'utilisateur est connecté, il est considéré comme authentifié, et cette propriété sera vraie (true). Par conséquent, si cette propriété est vraie, vous pouvez rediriger l'utilisateur vers la méthode Index du contrôleur ListeFilms.
En résumé
Dans ce chapitre, vous avez testé une grande partie des fonctionnalités de notre application :
Vous avez inscrit un nouvel utilisateur, vous vous êtes connecté avec ce nouveau compte et vous avez ajouté plusieurs films à la base de données.
Vous avez également utilisé les autres pages CRUD pour les films et noté certaines modifications de conception et de mise en forme à apporter ultérieurement.
Dans le chapitre suivant, nous allons concrétiser ces changements.
