/Travaux Dirigés/TD2-Form

Travaux dirigés sur PHP et mySQL pour réaliser des formulaires

  

28 janvier 2014

Objectifs

Il s'agit ici de s'approprier la création de formulaires HTML traités en PHP et reliés à des données d'une base de données mySQL :

Une pratique très courante pour coder en PHP est de s'approprier des codes proposés par d'autres. Les manipulations à faire ici sont basé sur un code initial à faire évoluer.

Dans ce TD, il s'agit pour tous :

  1. de s'approprier les codes fournis
  2. d'ajouter des textes qui s'afficheront en trace et permettront la "mise au point"
  3. de rajouter des informations dans la base de données en "élargissant" la table des colonnes : AdEl (pour l'adresse électronique) et Texte
  4. d'adapter les affichages du formulaire de saisie et d'affichage de tous les contacts
  5. d'adapter les actions du formulaire pour prendre en compte ces informations supplémentaires

Pour les "non débutants", il faudra aussi remplacer les boutons radios qui permettent de de ne sélectionner qu'un "enregistrement" à la fois par des cases à cocher, de façon à pouvoir supprimer plusieurs enregistrements en 1 seule action.

Pour les "moins débutants encore", il faudra proposer les cases à cocher aussi pour modifier plusieurs enregistrements avec 1 seul affichage du formulaire.

Exercices

Exercice 1 :

comprendre le processus de transmission des valeurs renseignées dans un formulaire HTML, récupérer les valeurs renseignées dans un formulaire HTML lorsqu'il est "soumis" (="envoyé") et faire afficher les valeurs obtenues dans une page Web

  1. dans un nouveau fichier monform.php, copier le code suivant :
    <form action="monform.php" method="get">
      <fieldset><legend>Nouveau</legend>
        <input type="text" name="quoi" >
      </fieldset>
      <input type="submit" value="lancer" name="go">
    </form>
  2. visualiser le fichier avec le protocole HTTP et utiliser le formulaire.
  3. observer le changement d'URL entre avant et après la soumission du formulaire (cliquer sur le bouton intitulé lancer)
  4. renommer le fichier form.php, visualiser-le à nouveau dans le navigateur et soumettez-le
  5. expliquer pourquoi "ça ne marche plus" ...
  6. modifier la ligne
    <form action="monform.php" method="get">
    en
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
  7. visualiser le fichier avec le protocole HTTP et utiliser le formulaire.
  8. chercher la documentation de référence sur PHP ce qu'est $_SERVER['PHP_SELF']
  9. chercher dans les outils de développement Web du navigateur celui pour afficher les requêtes "réseau" et l'activer
  10. comparer l'affichage de informations échangées lors de la requête de chargement du formulaire, et lors de son lancement sans donnée dans le champ textuel de saisie et lors de son lancement après avoir renseigné le champ textuel
  11. expliquer comment (=où & quand) sont transmises les valeurs pour chacune des méthodes GET et POST
  12. ajouter un code PHP avant la balise <form...
    <?php 
    foreach ($_GET as $cle => $valeur) {
      echo "\n<p><b>$cle</b> <tt>$valeur</t></p>";
    }
    ?>
  13. recharger le formulaire et observer l'affichage obtenu
  14. remplacer $_GET par @$_GET
  15. recharger le formulaire et observer l'affichage obtenu
  16. chercher dans la doc sur PHP le rôle de @ lorsqu'il est mis devant le $ du nom d'une variable et expliquer la différence entre les 2 affichages précédents
  17. renseigner des valeurs dans le champ de texte du formulaire et expliquer l'affichage obtenu.

Vous pouvez tester directement l'exemple dans http://tiprof.fr/SitesWebDynamic/Techniques-swd/matériel/form_getpost/mini-form.php

Exercice 2 :

encodage de la page du formulaire et soumission

  1. ajouter les balises <HTML>, <HEAD>, <BODY>, etc. (toutes les balises utiles et attendues dans un fichier HTML)
  2. recharger le formulaire et observer l'affichage obtenu
  3. ajouter la balise qui définit l'encodage dans l'entête du fichier HTML
  4. recharger le formulaire et observer l'affichage obtenu
  5. sauver le fichier form.php avec un autre encodage, qui n'est pas celui de la balise
    <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
  6. recharger le formulaire et observer l'affichage obtenu
  7. expliquer ...

Exercice 3 :

réaliser une action adaptée au bouton qui a lancé l'envoi du formulaire

  1. dans le code du fichier form.php, juste après la balise fermante de l'élément <fieldset> :
      <fieldset><legend>Nouveau</legend>
        <input type="text" name="quoi" >
      </fieldset>
      <input type="submit" value="lancer" name="go">
    ajouter un deuxième bouton "submit" avec la valeur sauver :
      <input type="submit" value="sauver" name="go">
  2. observer le changement d'URL entre avant et après la soumission du formulaire
  3. déplacer le code du deuxième bouton pour qu'il soit après la balise fermante </form>
  4. observer le changement d'URL entre avant et après la soumission du formulaire et expliquer pourquoi c'est différent de la soumission précédente.
  5. remettre le code du deuxième bouton avant la balise fermante </form> et ajouter juste après la balise <form> le code suivant :
    <?php 
    switch ($_GET['go']) {
      case 'lancer': 
        echo "\n<p>Bien reçu !</p>";
      case 'sauver': 
        echo "\n<p>On va le faire...</p>";
       break;
      default:  
        echo "\n<p>Cliquer sur un bouton pour soumettre le formulaire, </p>";
    }
    ?>
  6. essayer les 2 boutons et comparer les affichages obtenus en retour
  7. modifier le code PHP pour que la soumission avec le bouton lancer n'affiche qu'une seule ligne (et non pas deux lignes contenant l’une « Bien reçu ! » et la suivante « On va le faire... » ).
  8. modifier le code PHP pour que la soumission du formulaire affiche la valeur à sauver en retour d'information quand on a cliqué sur le bouton lancer et affiche qu'il n'y a rien à sauver si le champ de texte n'avait pas été renseigné

Exercice 4 :

structurer le code : inclure des fichiers pour les types de formulaire

  1. créer un nouveau fichier formulaire.php et y coller le code : et sauver le ficher en UTF-8
  2. quel cas du switch est exécuté lorsqu’on clique sur le bouton lancer ?
  3. modifier la fin de l’URL pour que le paramètre go transmette la valeur sauver, et expliquer ce que le formulaire affiche ?
  4. modifier la fin de l’URL pour que le paramètre go transmette la valeur modifier, et expliquer ce que le formulaire affiche
  5. tester le formulaire et expliquer ce qu'il fait, et ce qu'il ne fait pas et devrait faire (par exemple, on ne peut pas sortir de l’état « initial » du formulaire sans changer le lien dans l’URL, il n’affiche pas de zone de saisie, quand on clique sur lancer, on voudrait que le formulaire affiche...)
  6. créer un dossier _bin et y créer nouveau fichier, nommé fieldset_nouveau.php et y coller le code :
    et sauver le ficher en UTF-8 . Remarquez que l’appel à la fonction lire() est dans des commentaires : elle ne sera donc pas exécutée, ce qui est préférable puisque cette fonction n’est pas encore définie.
  7. dans le dossier _bin, créer un autre nouveau fichier, nommé fieldset_affiche.php et y coller le code :
    Le code qui appelle la fonction lire() est ici aussi en commentaire. Sauver le ficher en UTF-8
  8. modifier le code du formulaire, en ajoutant au « bon endroit » l’une des 2 lignes de code suivantes, pour qu’il demande à enregistrer une valeur :
    include('_bin/fieldset_nouveau.php'); et include('_bin/fieldset_affiche.php');
  9. modifier à nouveau le code du formulaire pour qu’on puisse demander d’enregistrer la valeur renseignée dans le champ de saisie et qu’il affiche, en retour d'information, qu’il va bien enregistrer la valeur (en ajoutant au « bon endroit » l’une des 2 lignes de code suivantes) :
    include('_bin/fieldset_nouveau.php'); et include('_bin/fieldset_affiche.php');
  10. visualiser le formulaire et son code source (depuis le navigateur) et expliquer ce que fait la fonction PHP include()
  11. visualiser le formulaire et son code source (depuis le navigateur) et expliquer ce que fait la fonction PHP include()
  12. ajouter des commentaires dans les codes pour les rendre compréhensible et se souvenir de leur "logique"

Exercice 5 :

réaliser les actions et définir des fonctions pour sauver et lire dans un fichier

  1. continuer à partir du code atteint à la fin de l'exercice précédent
  2. dans le dossier _bin, créer un nouveau fichier fonctions.php avec le code
    et le sauver en UTF-8
  3. ajouter une ligne de code PHP pour inclure le fichier des fonctions dans le code du formulaire, c’est-à-dire, juste avant la ligne ajouter
    switch ($_GET['go']) {
    en
    include('_bin/fonctions.php');
    switch ($_GET['go']) {
  4. enlever les signes de début et fin de commentaire PHP (respectivement /* et */ ) présents dans les codes <?php /* echo lire(); */ ?> des fichiers fieldset_nouveau.php et fieldset_affiche.php
  5. insérer dans le code la ligne suivante
    sauver($_GET['quoi']);
    au bon endroit du code du formulaire, pour que quand on ajoute à la fin de l’URL le texte ?go=sauver&quoi=blabla le formulaire sauve bien le texte blabla dans le fichier _CONTENT.txt
  6. vérifier que le dossier où est situé le formulaire est bien « ouvert » en écriture, c’est à dire que les permissions d’accès à sont contenu autorisent l’écriture (n’a pas la valeur « en lecture seule »)
  7. visualiser et tester le formulaire en renseignant le champ de saisie quand il le demande et en le soumettant (en cliquant sur le bouton lancer), et résumer l’observation
  8. regarder si un fichier _CONTENT.txt s'est crée dans le dossier où est le formulaire et regarder le contenu de ce fichier . Si aucun fichier _CONTENT.txt ne s'est crée, chercher dans le code du formulaire quelle est la ligne de code qui en donne l’ordre.

Pour vous aider, lire le manuel de référence en ligne sur les fonctions file_get_contents() et file_put_contents()
http://fr.php.net/file_get_contents et http://fr.php.net/file_put_contents

Attention : ces 2 fonctions sont du PHP5 ! ce qui n'est pas la version par défaut chez les hébergeurs.

Le code atteint à cette étape est form.zip

Attention : dans la vraie vie, un tel formulaire est dangereux car aucune vérification n’est faite sur le contenu soumis et mémorisé sur le serveur. Ces questions sont l’objet d’un autre TD.

Exercice 7 :

A partir de cet exercice, les contenus préparent le TD suivant

se familiariser avec un code déjà écrit qui réalise un formulaire et l'adapter

  1. récupérer le code fournis dans l'archive http://tiprof.fr/PHP-mySQL/Travaux%20Dirig%C3%A9s/TD2-Form/cartes-v0.zip et le placer dans le dossier servi par le serveur HTTP installé en local
  2. visualiser sa page cartes.php dans le navigateur (avec le protocole HTTP), en particulier, renseigner le formulaire "nouveau" et lancer l'enregistrement
  3. si le code PHP est entièrement affiché dans la vue "Code source" du navigateur, remplacer
          tous les <?= par <?php echo ,
          et les <? par <?php ,
      puis tester à nouveau l'affichage de la page
  4. ouvrir dans un éditeur de code le fichier cartes.php et modifier son contenu pour qu'il prenne en compte aussi des actions pour Modifier et Supprimer : le navigateur doit afficher dans chaque cas un texte rassurant l'utilisateur que son action vas bien être prise en compte, avec les valeurs récupérées par le serveur quand il a reçu la requête
  5. visualiser la page cartes.php et tester en agissant sur les boutons

Pour des explications sur la nécessité du remplacement de <? par <?php , consulter http://php.net/manual/fr/language.basic-syntax.phptags.php qui explique que le fichier de configuration du PHP sur le serveur peut activer la directive de configuration short_open_tag ou non.

Exercice 8 :

ajuster le paramétrage de la connexion au serveur mySQL

  1. ouvrir dans un éditeur de code le fichier connexion.php et modifier son contenu pour qu'il permette la connexion avec le serveur mySQL local et vérifier que le code contient bien les instructions nécessaires pour afficher un message d'erreur si tel est le cas
  2. visualiser sa page cartes.php dans le navigateur (avec le protocole HTTP) et vérifier que la connexion à la base de données ne produit pas l'affichage d'une erreur si tout s'est bien passe, mais qu'en revanche il en afiche un sinon

Pour vous aider, consulter :
la page sur la communication entre MySQL et un serveur Apache avec PHP : http://tiprof.fr/PHP-mySQL/%284%29/Php_MySQL.html d'après http://www.phpinfo.net/?p=articles&rub=phpmysql et http://magali.contensin.free.fr/html/MySQL/Cours_MySQL.html
un diaporama faisant "le tour" de la question : http://cyberzoide.developpez.com/php4/mysql/ ( copie locale sur http://tiprof.fr/SGBasesDonnees/Supports-Cours/initMySQL/ )
et un extrait avec le "minimum vital" pour le projet : http://tiprof.fr/SGBasesDonnees/Supports-Cours/initMySQL/extrait-mysql.pdf

Exercice 9 :

créer la table dans PhpMyAdmin

  1. ouvrir phpMyAdmin en local
  2. créer la table avec les champs à renseigner dans le formulaire, plus un identifiant et la date d'insertion

Pour vous aider, consulter

Exercice 10 :

récupéreer les requêtes utiles dans PhpMyAdmin

  1. manipuler PhpMyAdmin sur votre table pour récupérer des exemples de requêtes : INSERT, SELECT, DELETE, et UPDATE qu'on utilisera comme "modèle" de requête
  2. modifier les codes fournis pour fair afficher le "modèle" de requête adapté à la situation

Exercice 11 :

adapter les codes des requêtes récupérées dans PhpMyAdmin avec les paramètres transmis par les formulaires

  1. visualiser la page cartes.php dans le navigateur et vérifier que les affichages attendus se produisent "au bon moment"
  2. modifier les "modèles" de requête en modifiant les chaînes pour qu'elles prennent en compte les valeurs transmises par la soumission du formulaire
  3. visualiser la page cartes.php dans le navigateur et vérifier que les affichages attendus se produisent "au bon moment"
  4. modifier les codes pour que les requêtes soient réellement envoyées au serveur de bases de données
  5. visualiser la page cartes.php dans le navigateur et vérifier que les affichages attendus se produisent "au bon moment"

Des liens

Pour vous aider, vous pouvez consulter :

Quelques étapes à suivre pour concevoir le "programme principal"
http://www.tiprof.fr/SitesWebDynamic/Techniques-swd/mat%C3%A9riel/mysql/
Sur le découpage d'une page en zones chacune générée par un code PHP dédié
http://www.tiprof.fr/SitesWebDynamic/Techniques-swd/mat%C3%A9riel/pageauto/
http://www.tiprof.fr/PHP-mySQL/ressources/conception/
Début sur PhpMyAdmin
http://www.tiprof.fr/SitesWebDynamic/Techniques-swd/07_MySQL-et-connectPhp/debut-PhpMyAdmin.html
remonter plus récent revenir
LicPro - PAGORA