Site Web: fonctionnement, structure et programmation
Navigation
Exercices de synthèse
Exercice 1
Créez une page web s'appuyant sur le modèle ci-dessous uniquement à l'aide du langage XHTML 1.0 Strict puis corrigez votre code à l'aide de l'outil de validation en ligne pour finalement héberger votre page dans votre répertoire personnel de la plateforme Educanet2. Afin de faciliter votre tâche, vous disposerez du matériel suivant:
Objectif
Intégrer tous les principes de structuration d'un document HTML au travers d'un exemple complet de page web
Outils
Editeur de texte (Notepad ++, Sublime Text, Visual Studio Code,...)
Formatez la page réalisée à l'exercice 1 en vous appuyant sur le modèle et le plan ci-dessous. Votre solution doit être valide selon les critères du W3C et être hébergée dans votre répertoire personnel de la plateforme Educanet2. Afin de faciliter votre tâche, vous disposerez du matériel suivant:
Objectif
Intégrer tous les principes de présentation d'un document HTML au travers d'un exemple complet de page web
Outils
Editeur de texte (Notepad ++, Sublime Text, Visual Studio Code,...)
Dans le cadre du développement d'un logiciel de gestion des clients d'une maison d'édition, vous êtes appelé à écrire une application Web à l'aide de CherryPy capable de rechercher, d'ajouter, de supprimer et de modifier les données relatives à des clients situées dans la table Client de la base de données Librairie.sq3 dont la structure est rappelée ci-dessous:
Schéma relationnel de la base de données librairies
Une version-test de cette application peut être téléchargée ici. Le document téléchargé contient l'exécutable de l'application permettant d'effectuer des tests, un squelette de départ ainsi que l'ensemble des fichiers HTML statiques nécessaires à la création des différentes pages dynamiques de l'application.
Afin d'aboutir au résultat escompté, il est vivement conseillé de suivre chacune des étapes suivantes:
Etape 1: Création du menu de l'application
Le but de cette étape consiste à étudier le code de création de la page d'accueil de l'application qui permettra à l'utilisateur de naviguer entre les différents services offerts par l'application au moyen de deux liens hypertextes faisant référence à deux gestionnaires de requêtes HTTP:
Page d'accueil de l'application
A ce dessein, étudiez le code du fichier GestionClientSquelette.py situé dans le répertoire que vous avez précédemment téléchargé. Ce fichier vous donnera quelques pistes de réflexion et vous servira de base pour la suite de l'exercice.
Etape 2: Gestion des recherches de clients
Le but de cette étape consiste à créer le formulaire de recherche accessible via le premier lien hypertexte de la page d'accueil de l'application. Ce formulaire permettra à l'utilisateur de sélectionner ses critères de recherche qu'il transmettra à l'application Web à l'aide du bouton d'envoi. Les critères de recherches seront traités par l'application qui transmettra les enregistrements correspondant sous la forme d'un tableau HTML:
Formulaire de recherche
Résultat d'une recherche
A ce dessein, implémentez et testez les deux méthodes suivantes situées dans la classe de gestionnaires RechercheClient:
index
Cette méthode est invoquée lors d'un clic de l'utilisateur sur le lien correspondant de la page d'accueil. La méthode affichera le formulaire de recherche dont le code est basé sur le modèle situé à l'adresse annexes/formulaire.html. Les données entrées par l'utilisateur devront être traitées par la méthode gestion située dans la classe de gestionnaires RechercheClient.
gestion
Cette méthode sera invoquée lors du clic de l'utilisateur sur le bouton d'envoi du formulaire de recherche. La méthode récupérera les données entrées dans le formulaire à l'aide des variables associées à chacun des champs du formulaire, lancera une requête de recherche dans la base de données Librairie.sq3 en vue de récupérer les enregistrements correspondant aux critères de recherche et les affichera dans un tableau HTML à l'aide de la méthode html_from_sql_result de la classe RechercheClient. Bien évidemment, la requête créée dynamiquement ne tiendra compte que des champs non vide du formulaire. En particulier, si aucun champs n'est rempli par l'utilisateur, la requête récupérera tous les enregistrements situés dans la table Client.
Notons que les pages affichant le formulaire ainsi que le tableau des résultats d'une recherche posséderont chacune en bas de page un lien hypertexte permettant de retourner à la page d'accueil du site, respectivement au formulaire de recherche du site.
Etape 3: Gestion des ajouts de clients
Le but de cette étape consiste à créer le formulaire d'ajout de clients accessible via le deuxième lien hypertexte de la page d'accueil de l'application. Ce formulaire permettra à l'utilisateur d'entrer les données relatives à un nouveau client qu'il transmettra à l'application Web à l'aide du bouton d'envoi. Les données seront traitées par l'application qui effectuera leur insertion dans la base de données et transmettra à l'utilisateur un message confirmant le bon déroulement de cette insertion:
Formulaire d'ajout
Résultat d'un ajout
A ce dessein, implémentez et testez les deux méthodes suivantes situées dans la classe de gestionnaires AjouterClient:
index
Cette méthode est invoquée lors d'un clic de l'utilisateur sur le lien correspondant de la page d'accueil. La méthode affichera le formulaire d'ajout dont le code est basé sur le modèle situé à l'adresse annexes/formulaire.html. Les données entrées par l'utilisateur devront être traitées par la méthode gestion située dans la classe de gestionnaires AjouterClient.
gestion
Cette méthode sera invoquée lors du clic de l'utilisateur sur le bouton d'envoi du formulaire d'ajout. La méthode récupérera les données entrées dans le formulaire à l'aide des variables associées à chacun des champs du formulaire, contrôlera que chaque champ ait été complétée - faute de quoi un message sera retourné à l'utilisateur l'invitant à remplir tous les champs -, lancera une requête d'insertion dans la base de données Librairie.sq3 et transmettra à l'utilisateur un message confirmant le bon déroulement de l'insertion.
Notons que les pages affichant le formulaire ainsi que le message de confirmation posséderont chacune en bas de page un lien hypertexte permettant de retourner à la page d'accueil du site, respectivement au formulaire d'ajout du site.
Etape 4: Gestion des suppressions de clients
Le but de cette étape consiste à créer le formulaire de suppression de clients accessible dans le tableau de résultat d'une recherche. Ce formulaire permettra à l'utilisateur de cocher les enregistrements qu'il veut supprimer de la base de données et de transmettre son choix à l'application Web à l'aide du bouton d'envoi situé dans la dernière ligne du tableau HTML. Les enregistrements sélectionnés seront dès lors supprimés définitivement de la base de données et un message de confirmation sera renvoyé à l'utilisateur:
Formulaire de suppression
Résultat d'une suppression
A ce dessein, implémentez et testez les deux méthodes suivantes situées dans la classe de gestionnaires RechercheClient:
html_from_sql_result
Cette méthode doit être modifiée de telle sorte que le tableau de récupération des résultats d'une recherche contienne une dernière colonne intitulée Supprimer composée d'une case à cocher par ligne. La variable récupérant les cases cochées s'intitulera toDelete et elle contiendra l'identifiant de tous les enregistrements sélectionnés pour la suppression. Son contenu sera traitée par la méthode suppression de la classe RechercheClient lors d'un clic de l'utilisateur sur le bouton d'envoi. Ce bouton d'envoi sera placé dans la dernière ligne du tableau de résultats d'une recherche.
suppression
Cette méthode sera invoquée lors du clic de l'utilisateur sur le bouton d'envoi du formulaire de suppression. La méthode récupérera la liste des identifiants des enregistrements à supprimer à l'aide de la variable toDelete, lancera une requête de suppression de tous les enregistrements sélectionnés dans la base de données Librairie.sq3 et transmettra à l'utilisateur un message confirmant le bon déroulement de la suppression. Notons que la variable toDelete sera de type None si aucun enregistrement n'aura été précédemment sélectionné, de type string si un seul enregistrement aura été sélectionné et de type list si plusieurs clients doivent être supprimés. La vérification du type de cette variable peut être réalisée à l'aide de la fonction isinstance.
Notons que les pages affichant le formulaire de suppression ainsi que le message de confirmation posséderont chacune en bas de page un lien hypertexte permettant de retourner au formulaire de recherche du site.
Etape 5: Gestion des mises à jour de clients
Le but de cette étape consiste à rajouter des liens hypertextes sur les identifiants de chaque enregistrement situé dans le tableau de résultat d'une recherche de telle sorte qu'en cliquant dessus l'utilisateur puisse apporter des modifications aux données du client sélectionné via un formulaire d'édition. Ce formulaire d'édition contiendra les données actuelles du client sélectionné que l'utilisateur pourra modifier à son gré. Ces modifications seront transmises à l'application Web à l'aide du bouton d'envoi qui les transmettra à la base de données et confirmera la réussite de l'opération à l'aide d'un message envoyé à l'utilisateur:
Formulaire d'édition
Résultat d'une mise à jour
A ce dessein, implémentez et testez les trois méthodes suivantes:
html_from_sql_result de la classe RechercherClient
Cette méthode doit être modifiée de telle sorte que le tableau de récupération des résultats d'une recherche contienne un lien hypertexte sur l'identifiant de chacun des enregistrements qui s'y trouvent. Un clic sur un lien devra engendré un appel à la méthode EditerClient.index avec comme valeur du paramètre identifiant l'identifiant du client sélectionné.
index de la classe EditionClient
Cette méthode sera invoquée lors du clic de l'utilisateur sur le lien hypertexte de l'identifiant du client à mettre à jour. La méthode récupérera en paramètre l'identifiant du client à éditer qu'elle enregistrera dans l'attribut d'instance id, fera une requête sur la base de donnée Librairie.sq3 afin de récupérer les actuelles valeurs des attributs du client à traiter qu'elle placera en valeurs des champs du formulaire d'édition à retourner. Ce formulaire se basera sur le code du fichier annexes/formulaireEdition.html. L'utilisateur n'aura alors qu'à modifier les données actuelles du client et transmettre ces modifications à la méthode gestion de la classe EditionClient qui se chargera de les traiter.
gestion de la classe EditionClient
Cette méthode sera invoquée lors du clic de l'utilisateur sur le bouton d'envoi du formulaire d'édition. La méthode récupérera en paramètres toutes les données situées dans les champs du formulaire d'édition, fera une requête de mise à jour à la base de données Librairie.sq3 en précisant que l'enregistrement à modifier est celui dont l'identifiant est enregistré dans l'attribut d'instance id et transmettra un message à l'utilisateur lui confirmant le bon déroulement de la mise à jour effectuée.
Notons que les pages affichant le formulaire d'édition ainsi que le message de confirmation posséderont chacune en bas de page un lien hypertexte permettant de retourner au menu principal de l'application.
Internet
