e-Miage - module C216 - devoir 2

Objectifs pédagogiques et organisation du travail

Ce devoir reprend les notions introduites au devoir 1, telles que la programmation de pages dynamiques ou la gestion des sessions, et y rajoute l'interfaçage avec une base de données et un peu de scripting côté client.

Pour réaliser cette application, vous allez procéder en suivant les étapes suivantes :

• création d'une base de données, de ses tables et ses utilisateurs,
• conception et réalisation de la logique applicative,
• réalisation des éléments d'interface et des scripts côté client.

Description de l'application

Une petite entreprise possède un stock d'articles, identifiés chacun par une référence unique. Elle tient également à jour une liste de clients qui achètent ces articles. Le croisement des articles et des clients correspond à la liste des achats effectués.

Deux types d'employés sont considérés ici :

• les vendeurs de l'entreprise, qui ont pour tâche de vendre ces articles, et d'enregistrer ces achats, ce qui peut les obliger à mettre à jour les stocks et à référencer de nouveaux clients,
• les comptables, qui peuvent accéder aux différentes informations mais pas les modifier.

Dans ce devoir, vous allez réaliser une petite application de gestion de stocks en PHPMySQL, permettant la gestion conjointe des articles, des clients et des achats, et présentant des fonctionnalités différentes en fonction des autorisations données aux commerciaux et aux comptables.

En fonction de ces autorisation, les différents utilisateurs pourront accéder aux interfaces suivantes :

• connexion (avec login et mot de passe),
• interface de consultation (pour tous les utilisateurs identifiés),
• interface d'insertion et de modification (commerciaux seulement).

L'image ci-dessous présente un exemple de ce que pourrait être l'une des interfaces de modification pour un vendeur.

Création de la base de données et des utilisateurs

La première chose à faire est de créer la base, les tables et les utilisateurs de votre base de données MySQL. Pour cela, vous utiliserez l'interface d'administration de votre serveur PHP-MySQL.

• Connexion à l'interface d'administration : clic droit sur le service EasyPHP et choix du menu "Administration".
• Accès à l'interface d'administration de la BD : clic sur le lien "Gestion BDD", dans la ligne "PHPMYADMIN" de la page d'accueil de l'interface d'administration.
• Création d'une BD :
• dans le champ "Créer une base de données", entrez le nom de la base qui sera utilisée dans ce devoir : "c216_devoir2",
• laissez les autres valeurs des champs par défaut, et validez le formulaire (bouton "Créer").
• Création des utilisateurs de cette base :
• pour accéder à l'interface de création d'utilisateurs, cliquez sur l'onglet "Privilèges", puis sur le lien "Ajouter un utilisateur",
• dans le premier formulaire, modifiez la valeur de la zone de sélection serveur, et choisissez "local" (la valeur "localhost" doit apparaître dans le champ texte à sa droite),
• créez le premier utilisateur en renseignant les autres champs texte de la colonne de droite : nom = mot de passe = "vendeur", mais ne lui donnez aucun privilège (toutes les cases de la partie suiveante du formulaire doivent rester décochées),
• validez (bouton "Exécuter").
• revenez au formulaire de gestion des utilisateurs (onglet "Privilèges"), et renouvelez cette opération avec un second utilisateur : nom = mot de passe = comptable.
• Spécification des droits des utilisateurs sur la base de données créée :
  • dans la vue d'ensemble des utilisateurs (onglet "Privilèges"), cliquez sur l'icône qui vous permet de changer les privilèges de l'un des utilisateurs que vous venez de créer (à droite de la ligne),
  • dans la zone "Privilèges spécifiques à une base de données" du formulaire suivant, sélectionnez le nom de votre base ("c216_devoir2") dans la première boîte de dialogue,
  • dans le nouveau formulaire qui apparaît, cochez, dans la colonne "Données", les cases correspondant aux privilèges que vous souhaitez accorder à chacun de vos utilisateurs, en fonction de ce qui est indiqué dans la partie de description de l'application. Vous indiquerez dans votre rapport les permissions que vous avez données à chacun de vos utilisateurs.
• Création des tables : pour la création des tables, vous exécuterez les requêtes de création ci-dessous, de façon à ce que tout le monde ait les mêmes structures de tables. Pour cela, retournez dans l'interface "Bases de données" (onglet correspondant), cliquez sur le nom de votre base et exécutez les requêtes de création suivantes (onglet "SQL"):

CREATE TABLE `articles` (

CREATE TABLE `clients` (

CREATE TABLE `achats` (
`id_achat` INT NOT NULL AUTO_INCREMENT ,
`id_client` INT NOT NULL ,
`id_article` INT NOT NULL ,
`quantite` INT NOT NULL ,
`date` DATE NOT NULL ,
PRIMARY KEY ( `id_achat` ),
INDEX (`id_article`),
FOREIGN KEY (`id_article`)
REFERENCES articles(`reference`)
ON UPDATE CASCADE ON DELETE RESTRICT,
INDEX (`id_client`),
FOREIGN KEY (`id_client`)
REFERENCES clients(`numero`)
) ENGINE=INNODB;

Une fois ces trois tables créées, utilisez l'interface d'administration pour examiner leurs structure et comprendre la sémantique sous-jascente.

Remarque : compte tenu des contraintes données sur les clés étrangères, les champs à utiliser pour les jointures sont les suivants : le numéro de client et la référence d'un article sont respectivment représentés dans la table d'achats par "id_client" et "id_article". Par exemple, pour obtenir toutes les informations relatives aux différents achats, on formulera une requête du type :

SELECT * FROM achats, clients, articles WHERE achats.id_client = clients.numero AND achats.id_article = articles.reference;

Conception de l'application

Vous allez maintenant réaliser le coeur de votre application. La logique applicative se compose de trois parties : la connexion de l'utilisateur et la mémorisation de ses privilèges, l'insertion de données dans la base et la consultation des données.

Chacune de ces trois parties sera réalisée par une ou plusieurs pages PHP, qui peuvent éventuellement faire appel à d'autres pages pour les fonctions standard de connexion et de déconnexion à la base pour l'envoi des requêtes. Ci-dessous sont décrites les fonctionnalités à implémenter pour chaque partie. Les pages et éléments d'interface statiques sont décrits plus loin.

Connexion de l'utilisateur

Cette partie se compose d'un formulaire de connexion et d'une page de traitement des données envoyées par ce formulaire.

Formulaire de connexion (page d'accueil de l'application) : il s'agit d'une page PHP comportant le nom de votre application, un formulaire XHTML simple (des champs login et mot de passe et un bouton de validation), plus éventuellement un message d'erreur passé en paramètre, si la tentative de connexion précédente s'est mal passée.

Page de traitement : À la réception d'une requête HTTP provenant du formulaire de connexion, cette page utilisera les paramètres de cette requête pour effectuer une demande de connexion au serveur de BD (Aide : https://www.w3schools.com/php/php_mysql_connect.asp ; je vous conseille d'utiliser mysqli en procédural), et réagira en fonction de la réponse de celui-ci :

• si le serveur renvoie une erreur de connexion, l'utilisateur sera redirigé vers la page d'accueil, qui affiichera, en plus du formulaire de connexion, un message d'erreur,
• si le serveur ne renvoie pas d'erreur, cette page enverra au serveur de BD une nouvelle requête pour tester les privilèges de l'utilisateur connecté sur la base "c216_devoir2" (Aide : http://sqlpro.developpez.com/cours/sqlaz/dcl/#L4) ; en fonction du résultat, elle identifiera le type de l'utilisateur (vendeur ou comptable) ; ces informations (identifiant de connexion et type d'utilisateur) seront stockées dans des variables de session.

Indiquez clairement dans votre code la requête envoyée à la base pour déterminer le type d'utilisateur.

Modification de la base

Cette partie gère l'ajout et la modification des données de la base. Elle est réservée aux utilisateurs possédant des privilèges de vendeur. Elle fonctionne sur le même principe pour les trois tables de la base : si l'utilisateur souhaite effectuer une modification d'un enregistrement existant, il commence par le sélectionner. Ensuite, il accède à un formulaire de saisie (rempli ou non, en fonction de l'action - insertion ou modification - à effectuer), et envoie les données à une page de traitement qui se charge de l'insertion ou de la modification.

Formulaire de choix d'un item (modification) : ce formulaire présente simplement la liste des enregistrements de la table concernée, et propose un lien vers le formulaire de saisie, avec un paramètre contenant l'id de l'enregistrement choisi.

Formulaire de saisie (insertion et modification) : ce formulaire permet à l'utilisateur de saisir les valeurs des différents champs de chaque table (il est donc spécifique au format de cette table) ; s'il reçoit en paramètre l'id d'un des enregistrements de la table, il sera pré-rempli aux valeurs de cet enregistrement.

Remarques :

• l'utilisateur n'est pas autorisé à modifier les id des enregistrements (clés primaires), qui sont gérés directement par le SGBD,
• pour le formulaire de saisie d'un achat, faites en sorte que le renseignement des champs "id_client" et id_article" se fasse par sélection dans les enregistrements existants dans les tables correspondantes (et non en rentrant ces id à la main).

Page de traitement : cette page reçoit la requête HTTP du formulaire de saisie et va :

• vérifier que l'utilisateur est authentifié et a le droit d'effectuer les opérations demandées,
• formuler et envoyer des requêtes à la base de données,
• renvoyer des pages XHTML simples contenant les résultats (message de confirmation ou d'erreur).

Consultation de la base

Cette partie est constituée d'une unique page PHP, qui reçoit une requête HTTP de consultation sur une table, récupère les données correspondantes dans la base et génère une page web pour les afficher à l'utilisateur.

Remarque : l'affichage de la table des achats fera apparaître, en plus des données de cette table, le nom du client et de l'article impliqués dans l'achat, le prix unitaire de cet article, et le prix total de l'achat.

Structure et réalisation de l'interface

L'interface proposée à tous les utilisateurs sera structurée de la façon suivante :

• un titre, constitué de différents éléments, comme le nom de l'application, l'identifiant de l'utilisateur, l'opération en cours ("consultation" ou "modification"), etc.,
• un menu, indiquant les différentes fonctionnalités accessibles par l'utilisateur, et poposant des liens pour y accéder ; pour cela, le plus simple est de réaliser deux menus différents, et de tester lequel afficher en fonction des privilèges de l'utilisateur enregistrés dans ses variables de session,
• un contenu, correspondant à la réalisation de la fonctionnalité demandée.

Concernant les langages utilisés, vous réaliserez vos pages de façon à ce que le client reçoive du XHTML strict, c'est-à-dire n'incluant pas d'éléments ou d'attributs de mise en forme. Une feuille de style CSS commune pour toute votre application sera fournie dans un fichier à part. Vous pouvez toutefois utiliser des attributs de style CSS dans le contenu de votre page, si cela s'avère nécessaire.

L'image donnée plus haut est un exemple vous donnant une idée de la structure de cette interface, mais vous êtes libre de la structurer comme bon vous semble. Dans tous les cas, il vous est demandé de ne pas utiliser de cadres. Vous fonctionnerez avec des éléments table ou div, pour positionner les trois parties de l'interface, et localiserez les traitements correspondants dans d'autres fichiers PHP, inclus dans la page courante grâce à la directive PHP include.

"Dynamisation" de l'application

De façon à alléger un peu le travail du serveur tout en conservant un contrôle des erreurs de saisie, vous allez rajouter quelques fonctions JavaScript - dans un fichier à part - qui vont permettre de valider les contenus saisis dans les formulaires du côté client.

Pour cela, vous devez d'une part écrire ces fonctions, puis compléter le code XHTML pour indiquer les événements qui les déclencheront (Aide : http://openweb.eu.org/articles/validation_formulaire/)

Pour vous entraîner, commencez par ne repérer que les champs vides. Écrivez ensuite une fonction qui renvoie vrai si une chaîne de caractères est numérique et faux sinon. Créez-en ensuite d'autres, pour valider les champs entier, prix, code postal...

Question subsidiaire : vous pouvez aussi rajouter d'autres scripts, par exemple pour déployer automatiquement les menus quand vous passez dessus avec la souris, ou pour trier dynamiquement les tableaux de données par ordre croissant ou décroissant pour un champ donné. Vous trouverez de nombreux exemples de scripts à adapter sur http://www.toutjavascript.com/ et sur http://www.javascriptfr.com/.

Modalités de rendu du devoir

Le code (correctement commenté) de la dernière version du devoir sera compressé dans un fichier au format ZIP.

Vous enverrez ce fichier par courriel à Lionel Médini (lionel.medini _at_ univ-lyon1.fr). J'accuserai réception de vos messages pour vous signifier que je les aurai bien reçus et que les pièces jointes sont ouvrables. Le fait d'avoir reçu un accusé de réception à votre envoi ne signifie pas que le devoir a été corrigé, ou qu'aucun des fichiers de votre application ne manque.

L'objet du message devra impérativement contenir les mots "e-Miage", "C216", "rendu" et "devoir 2", ainsi que vos nom et prénom.