Université de Monastir
Faculté des sciences de Monastir
AU : 2024-2025 Niveau : LSI-GL2
Module : Programmation Web
TP-4
Exercice1 :
Donner le code (HTML, CSS, JavaScript) d’un formulaire qui comporte deux boutons « incrémenter »
et « décrémenter » et un élément HTML qui permet d’afficher le contenu d’une variable initialement
initialisée à 0. Le clic sur incrémenter ajoute 1 à la variable et le clic sur décrémenter lui soustrait 1.
Exercice2 :
On considère le tableau d’objets suivant :
PersTab = [{cin : “02365487”, nom : “Ali”, age :”20”}, {cin : “06545129”, nom : “Salah”, age :”19”},
{cin : “04175863”, nom : “Mourad”, age :”22”}]
1- Donner une fonction JavaScript DisplayPers qui prend comme paramètre le tableau d’objets et qui
l’affiche sous la forme d’un tableau HTML comme suit :
CIN Nom Age
02365487 Ali 20
06545129 Salah 19
04175863 Mourad 22
2- On veut maintenant que les informations concernant les personnes soient saisies à travers un
formulaire HTML (cf. figure ci-dessous). Le clic sur le bouton Ajouter engendre l’ajout des
informations saisies au tableau d’objets JavaScript. Ce dernier sera ensuite affiché au-dessous du
formulaire à l’aide de la fonction de la question précédente.
CIN :
Nom :
Age :
Ajouter
CIN Nom Age
02365487 Ali 20
06545129 Salah 19
04175863 Mourad 22
1
3- Dans cette partie, il est question de développer les trois opérations de base : Ajouter, Modifier
et Supprimer les informations concernant une personne. Le lancement de ces opérations sera fait à
travers un menu comportant trois boutons correspondant chacun à l’une de ces actions. L’IHM doit
prendre en compte les considérations suivantes :
Toutes les opérations doivent se dérouler dans la même page HTML.
Le menu et le tableau seront toujours affichés. L’interface affichera dynamiquement les
formulaires d’édition selon l’action sélectionnée dans le menu.
Ajouter Modifier Supprimer
CIN Nom Age
02365487 Ali 20
06545129 Salah 19
04175863 Mourad 22
- Le clic sur le bouton Ajouter engendre l’affichage du formulaire ci-dessous. Dans ce formulaire, le
clic sur le bouton Enregistrer permet d’ajouter les informations saisies et leur affichage dans le
tableau ainsi que la fermeture du formulaire d’ajout. Le clic sur le bouton Annuler engendre la
fermeture du formulaire d’ajout.
Ajouter Modifier Supprimer
CIN :
Nom :
Age :
Enregistrer Annuler
CIN Nom Age
02365487 Ali 20
06545129 Salah 19
04175863 Mourad 22
- Le clic sur le bouton Modifier du menu engendre l’affichage d’un formulaire qui permet de
sélectionner le CIN de la personne dont on veut modifier les informations.
2
Ajouter Modifier Supprimer
Donner le numéro CIN de la personne
concernée :
04175863
Trouver Annuler
- Le clic sur le bouton Trouver engendre la fermeture du formulaire de sélection et l’affichage des
informations concernant la personne sélectionnée dans un formulaire d’édition comme suit.
CIN : 04175863
Nom : Mourad
Age : 22
Enregistrer Annuler
L’utilisateur pourra alors faire les modifications nécessaires. Ensuite, le clic sur Enregistrer permet
d’enregistrer ces modifications et leur affichage dans le tableau. Le clic sur Annuler engendre la
fermeture du formulaire de modification sans enregistrement.
- Le clic sur le bouton Supprimer du menu engendre l’affichage du formulaire suivant qui permet de
sélectionner le CIN de la personne à supprimer.
Ajouter Modifier Supprimer
Donner le numéro CIN de la personne
concernée :
04175863
Supprimer Annuler
- Le clic sur le bouton Supprimer du formulaire engendre la fermeture du formulaire et la
suppression de la personne en question de la liste des personnes du tableau. Le clic sur le bouton
Annuler engendre tout simplement la fermeture du formulaire sans suppression.
4- Ajouter des fonctionnalités de contrôle et de validation de la saisie aux différents formulaires des
questions précédentes. Ces contrôles doivent porter sur les points suivants :
o Le CIN doit être une chaine numérique composée de 8 caractères.
o L’âge doit être numérique positif.
3
o La saisie dans les formulaires de sélection (pour la modification et la suppression) d’un
numéro de CIN inexistant dans la liste doit engendrer l’affichage du message
suivant : « Numéro de CIN inexistant dans la liste ».
o Lors de l’ajout d’une nouvelle personne, la saisie d’un numéro de CIN déjà existant dans la
liste doit bloquer l’opération et afficher le message suivant : « Numéro de CIN déjà utilisé »
o Lors de la modification des informations, la saisie d’un nouveau numéro de CIN existant
dans la liste doit afficher le message suivant : « Numéro de CIN déjà utilisé ».
Exercice 3 :
Dans cet exercice on va reprendre les mêmes traitements de l’exercice 2 mais selon un autre mode
d’interaction. Ce mode est donné par la figure ci-dessous
Ajouter
CIN Nom Age Actions
02365487 Ali 20 Modifier | Supprimer
06545129 Salah 19 Modifier | Supprimer
04175863 Mourad 22 Modifier | Supprimer
- Le clic sur le lien Ajouter engendre l’affichage du formulaire d’ajout des informations
concernant une personne (même formulaire que celui de l’exercice 2). Le clic sur le bouton
Enregistrer de ce formulaire engendre la fermeture de ce dernier et la mise à jour du contenu
du tableau.
- Le clic sur le lien Modifier d’une ligne donnée engendre l’affichage des informations de la
personne de la ligne en question dans un formulaire de modification (même formulaire que
celui de l’exercice 2). Le clic sur le bouton Enregistrer de ce formulaire engendre la fermeture
de ce dernier et la mise à jour du contenu du tableau.
- Le clic sur le lien Supprimer d’une ligne donnée engendre la suppression de la personne de la
même ligne aussi bien de l’affichage que de la liste des objets personnes.
Remarque :
Toutes les opérations doivent se faire dans la même page HTML.
L’IHM doit implémenter les mêmes contraintes de contrôle et de validation de la saisie
indiquées dans l’exercice 2.