TP #2 – TABLEAU INTERACTIF

8WEB101 – Conception & programmation de sites web

Dans le cadre du cours, nous avons vu le HTML & le CSS. Le JS est observé à partir du cours d’aujourd’hui.

Afin d’appliquer les concepts vus en cours, il est demandé de réaliser un tableau interactif. Il devra contenir au
moins 5 colonnes, dont :

• Un identifiant unique (généré automatiquement)

• Au moins un nom
• Au moins un nombre (peut être un prix, une quantité, etc.).
• La dernière doit être réservée aux actions possibles.

Pour exemples, on peut penser à un tableau de stock, une liste d’épisodes de séries, de produits, peu importe. Il
faut également avoir environ 50 lignes de contenu (allez le chercher sur Internet !)

Exigences
10% de la note
➢ Le code HTML doit être valide auprès du W3C (https://validator.w3.org/) et lisible (indentation correcte !)
➢ Le code CSS doit être facilement lisible (indentation correcte !)
➢ Aucune librairie externe (sauf pour des icones) n’est tolérée

40% de la note
1. Le tableau ne doit pas dépasser la largeur de la fenêtre et doit être centré.
2. Sur les cinq colonnes, la première doit être l’identifiant unique, la deuxième un nom. Une parmi les deux
dernières doit être un nombre. La dernière doit contenir les actions possibles (ex. : modifier).
3. Le thead doit contenir les titres de colonnes, tandis que le tfoot contiendra nos inputs afin d’ajouter une
nouvelle ligne dans notre tableau.
4. Le thead ainsi que le tfoot doivent être très différents du design du tableau (ex. : blanc sur fond noir si le
tableau est en noir sur fond blanc).
5. Les lignes du tableau devront être facilement identifiables (background différent, une ligne sur deux)
6. Les input & boutons du tfoot ne devront pas avoir leur style initial.
7. De base, la dernière colonne ne doit contenir qu’un bouton « Modifier ». Une fois dans le mode de
modification, ce bouton doit laisser sa place à « Valider », « Supprimer » & « Annuler ».
 50% de la note
1. Lors du clic sur le bouton d’envoi, les informations des inputs doivent être collectées et ajoutées sur une
nouvelle ligne du tableau, à leur emplacement logique.
2. Lors du clic sur le bouton d’envoi, les inputs doivent être vidés une fois la ligne ajoutée
3. Un clic sur le bouton « Modifier » devra rendre la ligne complète modifiable. Chaque champ devient alors
un input avec la valeur actuelle. Ils peuvent tous être modifiés, sauf l’identifiant. Il ne s’agit pas de remplir
les champs d’ajout de contenu. Le bouton « Modifier » disparaitra et laissera sa place à trois boutons :
« Valider », « Supprimer », « Annuler ».
4. Au clic « Annuler », les inputs doivent redevenir du texte normal et le bouton « Modifier » doit
réapparaitre. Au clic « Supprimer », la ligne complète doit être supprimée. Au clic « Valider », les
modifications effectuées dans les inputs doivent être apportées au contenu.
5. Il doit être possible de trier le tableau en fonction d’une colonne. Il faudra aussi un indicateur de ce tri (en
plus du tableau actualisé automatiquement, ex. : icone https://fontawesome.com/icons/sort?style=solid)
Par exemple, si on clique sur le th « Nom », le tableau devra être trié alphabétiquement en fonction du
nom de façon croissante. Si on reclique sur le même header, il devra ensuite être trié de façon décroissante.
Évidemment, le clic sur le header « Actions » ne doit générer aucun tri.

Les boutons « Modifier », « Valider », « Supprimer », « Annuler » et « Ajouter » peuvent être des icones pour plus
de facilités
Pour finir, il est tout à fait normal que si l’on rafraichit la page, les données redeviennent celles initialement. Pour
les plus motivés, un bonus peut être accordé SI TOUTES LES AUTRES FONCTIONNALITES SONT CORRECTES et pour
un système de pagination. Chaque page devra alors afficher 20 éléments et ajouter un bouton « Previous page »,
« Next Page », ainsi qu’un indicateur de page. Ceci n’est en revanche que pour ceux qui se sentent à l’aise à le
réaliser. Il ne doit y avoir qu’un seul fichier HTML et un seul tableau dans l’ensemble du fichier HTML.

Format de rendu
Le projet DOIT respecter cette structure de dossiers. Le fichier « index.html » est à la racine du dossier. À côté de
celui-ci se trouvent les dossiers « css », « js » et « img ». Ils contiennent respectivement l’ensemble des fichiers CSS,
l’ensemble des fichiers JavaScript et l’ensemble des images nécessaires au projet.

Pour être valide, il faut aussi rendre un unique fichier .zip comportant le dossier racine. Ce fichier devra aussi être
nommé : « TP2_NOM_PRENOM.zip » en remplaçant bien entendu les « NOM » et « PRENOM » par vos noms et
prénoms respectifs.

Date de rendu
Le projet devra être remis avec un seul fichier .zip au plus tard le 27 octobre 2022 à 19h00. Le rendu se fera sur
Moodle via l’option créée à cet effet.