Le TP sera réalisé sur les ordinateurs de la salle informatique au travers de la machine virtuelle (appelée VM pour Virtual Machine) mise à votre disposition.
Cette VM simule un serveur informatique, en particulier un serveur WEB + une base de données MySQL vous permettant de développer votre site WEB dynamique avec le langage PHP.

Cette première partie nommée "préparatifs" permet de mettre en place une base de données complète à partir d'un fichier fourni.

1. Lancer la machine virtuelle depuis le raccourci (VM-Pole Info) sur le bureau du PC hôte

2. Exécuter PhpMyAdmin en utilisant les identifiants suivants:
   utilisateur : etudiant ; mot de passe : etudiant



3. Créer une base de données nommée tp2

4. Sélectionner la base que vous venez de créer dans l’onglet Bases de données

5. Dans le dossier Importer de la VM, vérifier la présence du fichier tpSQL.sql dans le sous-dossier HEI3_NDC1_TP_CommWEB/TP2

6. Importer, via le menu import de PhpMyAdmin, le fichier tpSQL.sql dont le rôle est de créer les tables de la base de données ainsi que leurs contenus

7. Supprimer tous les fichiers contenus dans le répertoire www présent dans home de la machine virtuelle

IMPORTANT

Le dossier www est le dossier par défaut du serveur WEB.
Lorsque vous lancez le navigateur Web à l'adresse http://localhost, le serveur WEB "regarde" le contenu du répertoire www.

Si, dans ce dossier www, il existe un fichier comme index.html ou index.php, celui-ci sera lancé systématiquement par le navigateur.

Si ce fichier n'existe pas, vous visualiserez alors l'arborescence du contenu du répertoire www, donc vos fichiers créés tout au long de ce TP

Vous enregistrez donc par la suite, dans ce dossier www, tous les fichiers WEB que vous créerez ainsi que les éléments attachés s'ils existent (images, photos,...)

Visuel partiel de la base de données :
Les tables "fournisseurs", "produits" et "Catégories" ainsi que leurs liens

 

On souhaite établir une requête permettant de récupérer les données suivantes:

Affichage des noms des fournisseurs (ici société)
par ordre alphabétique
et
pour chaque fournisseur,
le coût du stock
pour la catégorie « Boissons » (ici NomCategorie)

1. Dans PhpMyAdmin, tapez la requête ci-dessous repondant à ce souhait (cette étape vous permet de valider que la requête est fonctionnelle):

SELECT fournisseur.societe as nom,
sum(prixunitaire*unitesstock) as total
FROM produit
inner join fournisseur
on fournisseur.numfournisseur=produit.numfournisseur
inner join categorie
on produit.codecategorie=categorie.codecategorie
WHERE categorie.Nomcategorie='Boissons'
GROUP BY fournisseur.societe

 

On souhaite maintenant afficher ce résultat en dehors de PhpMyadmin, plus particulièrement dans une page WEB créée de toute pièce.

2. Dans le répertoire www du dossier home, créer un fichier intitulé afficherbrut.php

3. Ouvrir ce fichier avec l'éditeur "sublime Text" et insérer dans ce fichier :

• les éléments minimum structurant une page Web HTML

• Dans le corps de la page, mettre les éléments de connexion à la base de données MySQL. Vous utiliserez les données ci-dessous pour la connexion à la base de données:
  

serveur: localhost || utilisateur: etudiant || mot de passe : etudiant || base : tp2

4. Mettre le code nécessaire dans la page WEB permettant l'affichage des données brutes de la requête précédente comme le montre la figure suivante :

On souhaite maintenant afficher les données précédentes dans un tableau et ajouter une ligne supplémentaire faisant la somme des montants de chaque ligne.

1. Avec l'éditeur Sublime text, dupliquer la page afficherbrut.php en affichertableau.php

2. Modifier la page affichertableau.php pour obtenir un résultat de la requête dans un tableau centré sur la page, avec des bordures, comportant des titres de colonnes et une ligne par résultat (voir résultat ci-dessous)

3. Ajouter une dernière ligne de tableau qui affiche le coût total du stock ; ce coût sera calculé en PHP.

Indice pour réaliser cette question:
Profiter de la boucle d'affichage des lignes du tableau pour faire un calcul sommatoire afin d'obtenir le coût total du stock que vous mémoriserez dans une variable $coutStock pour pouvoir être affiché par la suite. Quand toutes les lignes du tableau sont affichées, ajouter une ligne avec le cout total

On souhaite afficher les résultats du tableau précédent sous forme de graphique. Pour ce faire, on fabriquera un histogramme où chaque barre sera fabriquée avec la balise <hr />. Cet élément HTML possède plusieurs attributs comme le montre l'exemple ci-dessous :

• align= "right" : gère l’alignement de la ligne par rapport à la marge droite
• color="red" : affiche la ligne en couleur rouge
• size="1" : trace une ligne d’épaisseur 1 px
• width= "20" : trace une ligne de longueur 20 px

• Avec sublime text, dupliquer le fichier affichertableau.php en affichertableaugraphique.php
• Dans ce nouveau fichier, dupliquer toutes les lignes de code nécessaires pour avoir un affichage WEB avec deux fois le même tableau l'un en dessous de l'autre

On modifie maintenant les lignes de code du deuxième tableau pour faire apparaitre l'histogramme

• Modifier le code pour avoir dans le deuxième tableau une ligne horizontale d'épaisseur 10px, de couleur bleue et de longueur 120px, alignée à gauche.

• En normalisant les vrais résultats du tableau sur une largeur maximale de 600 pixels (100%), faire un graphique représentant chaque valeur du tableau en ligne <hr /> de longueur proportionnelle au résultat.
• Vous pouvez ajouter une colonne avec les % comme le montre la figure ci-dessous

Le but est de créer une nouvelle page web qui va permettre, via un formulaire, de modifier le stock (ajouter ou soustraire une quantité en stock)

Vous modifierez dans un premier temps le stock pour un seul produit.
Vous utiliserez l'exemple ci-après pour modifier son stock:

Le fournisseur Leka Trading (numfournisseur:20)
fournit un seul produit (NomProduit:Ipoh Coffee, RefProduit:43)
de la catégorie boissons (CodeCategorie=1)

• Créer la page stockmodif.html avec les éléments minimum d'une page web
• Dans cette page, mettre le code HTML permettant d'afficher un formulaire en méthode get qui aura pour cible le fichier stockresult.php avec les éléments suivants :
• un champ de saisie de name "nb" qui permettra à l'utilisateur de modifier le stock
• un bouton de validation de name "modif" et d'intitulé "modifier".

  

• Créer la page stockresult.php qui comporte les éléments minimum d'une page WEB ainsi que les élements de connexion à la base de données MySQL
• Dans cette page stockresult.php, récupérer la valeur de nb postée en méthode get par stockmodif.html ; cette valeur sera dans la variable $nb
• Dans cette page stockresult.php, créer la requête (UPDATE...) qui se charge de modifier le stock (en plus ou en moins) de la quantité saisie dans le formulaire.

Remarque :
Pour visualiser le stock modifié, Leka Trading possède à l'origine une quantité de 17 Ipoh Coffee à 23 euros pièce. A l'aide du formulaire, modifier le stock pour en avoir 100 au total puis 0 et vérifier en même temps le coût du stock en affichant la page affichertableau.php ou directement dans la base de données.

Le but est de créer une nouvelle page web qui va permettre, via un formulaire, de modifier le stock (pour la catégorie "boissons") en choisissant cette fois-ci le produit à modifier.

Pour éviter de retaper tout le code, on se servira des pages précédentes en les dupliquant pour ensuite les modifier

• Dupliquer la page stockmodif.html en boissonsformulaire.html
• Dupliquer la page stockresult.php en boissonsmodif.php

On personnalise maintenant ces nouvelles pages pour répondre à la question

Approche statique des références de produits

• Dans la page boissonsformulaire.html, mettre le code permettant d'afficher un formulaire en méthode get qui aura pour cible le fichier boissonsmodif.php avec les éléments suivants :
  • une liste déroulante statique de name refprod qui affiche uniquement 3 produits de la catégorie "boissons". vous prendrez les produits suivants :
    • Chai (refProduit =1)
    • Chang (refProduit=2)
    • Chartreuse verte (refProduit=39)
    
    Exemple de liste Choisissez... Choix 1 Choix 2 Choix 3
  
  
  • un champ de saisie de name "nb" qui permettra à l'utilisateur de modifier le stock
  • un bouton de validation de name "modif" et d'intitulé "modifier".

• Dans la page boissonsmodif.php, récuperer les valeurs nb et refprod postées en méthode get par boissonsformulaire.html ; ces valeurs seront stockées dans les variables $nb et $refProd.
• Dans la page boissonsmodif.php, créer la requête qui se charge de modifier le stock de la quantité saisie nb et du refprod dans le formulaire.
• Tester la page boissonsformulaire.html et vérifier que le stock est modifié directement dans la base de données ou dans la page affichertableau.php

Approche dynamique des références de produits

• Dupliquer la page boissonsformulaire.html en boissonsformulairefinal.php
• Mettre les éléments de connexion à la base de données dans cette nouvelle page
• Remplacer la liste déroulante statique affichant les 3 produits par une liste déroulante dynamique (Inspirez-vous de la page "déroulant dynamique" sur le site courses rubrique TD/TP/Exo)
  Le principe est de créer une requête qui fait une extraction de tous les produits et qui permet de créer une liste déroulante dynamique en affichant dans la liste tous les produits issus de la base de données.

Ci-dessous le barème des points attribués par question.

La note tiendra compte de la "propreté" du code à savoir le respect des indentations, les commentaires utiles à la compréhension, l'organisation de la structure de la page web et de la justesse des réponses attendues.

Partie	Points
1. Structure de la page PHP Requête OK dans phpmyadmin Affichage du résultat brut	1 2
2. Affichage des données dans un tableau Affichage correct du tableau Affichage du calcul du coût total du stock	1 2
3. Construction d'Histogramme Affichage des deux tableaux + barres Affichage histogramme normalisé	1 2
4. Modification du stock (version partielle) Page formulaire Requete update OK	1 2
5. Modification du stock (statique) Page formulaire Requete update OK	1 2
6. Modification du stock (dynamique) Page formulaire Requete update OK	1 2
Code correct (indentation, commentaires,...)	2