Pages Web et fenêtres modales
Comment créer de nouvelles pages et des fenêtres modales dans les applications Web ?
L'étape la plus importante dans la création de la plupart des applications Web consiste à organiser leur travail avec la base de données. Comment obtenir des données de la base de données, comment les afficher sur l'écran de l'utilisateur, et comment gérer et supprimer ces données.
C'est à ces questions qu'est consacré le nouveau module de cours. Dans le troisième module, nous avons créé une base de données et conçu des modèles pour enregistrer des informations sur les villes et les pays. Nous allons maintenant organiser le travail avec cette base de données. Nous devons faire ce qui suit :
- Créer une table pour sortir les informations de la base de données.
- Apprendre à ajouter des données à la base de données, ainsi qu'à les supprimer.
- Apprendre le fonctionnement des fenêtres modales pour créer une interface conviviale
- Comprendre le fonctionnement des tables liées
Pages
Commençons par la partie préparatoire. Notre application s'agrandit et ne tient plus que sur une seule page. Nous devons en créer au moins une autre. Ajoutons-la au menu de gauche.
Appelons la page créée "World" et définissons l'icône et une URL claire.
Fenêtres modales
Nous devons avoir la possibilité d'ajouter de nouveaux pays sur la page créée. Pour ce faire, nous avons besoin d'une fenêtre modale dans laquelle nous entrerons les données nécessaires et d'un bouton qui ouvrira cette fenêtre modale.
La fenêtre modale est un composant spécial. Il n'occupe pas d'emplacement spécifique sur la page et, en même temps, il combine les propriétés du composant (avec des paramètres spécifiques aux composants) et de la nouvelle page (avec son propre canevas pour ajouter d'autres composants). L'endroit le plus approprié pour placer une modale est la zone située en bas de la page. Elle est surlignée en vert, tout comme le composant modal lui-même.
Il est nécessaire de lui donner un nom approprié et, en appuyant sur le bouton, de lui attribuer une action simple : l'affichage de cette fenêtre modale.
L'étape suivante consiste à saisir les données requises. Nous avons déjà effectué une opération similaire dans le module précédent lorsque nous avons transmis les valeurs de X et Y. Maintenant, nous devons faire la même chose, sauf que le type de données est différent et que les champs de saisie se trouvent dans une fenêtre modale.
La base de données enregistre les informations les plus élémentaires sur les pays. Il s'agit de leur nom (typeString ) et de leur description générale (Text). Ce sont les champs de saisie que vous devez ajouter.
