TP - FETCH

Exercice 1 : Résoudre une équation du second degré

Nous considérons les 2 fichiers suivant :

  • Resultat.html
  • Calcul.php

L’objectif est d’externaliser la résolution d’une équation du second degré le serveur (Calcul.php). Le résultat doit s’afficher dans la page Resultat.html sans que la page soit rechargée. ATTENTION :

On utilisera la méthode POST pour envoyer les informations au fichier Calcul.php

TIPS

  • Écrire des puissances en php => pow
  • Écrire des racines carrées en php => sqrt

Exercice 2 : Médiathèque

Nous considérons le fichier mediatheque.json suivant :

[
{
        "titre":"Jurassic Park",
        "realisateur":"Steven Spielberg",
        "annee de realisation": 1993,
        "duree": 128
    },
    {
        "titre":"Harry Potter",
        "realisateur":"Chris Colombus",
        "annee de realisation": 2001,
        "duree": 159
    },
   {
        "titre":"Le Seigneur des anneaux",
        "realisateur":"Peter Jackson",
        "annee de realisation": 2001,
        "duree": 228
    },
    {
        "titre":"Star Wars",
        "realisateur":"Georges Lucas",
        "annee de realisation": 1977,
        "duree": 125
    }
]
  1. Créer la page la page gestionMedia.php qui affiche le contenu du fichier mediatheque.json
  2. Ajouter un formulaire permettant d’ajouter des nouveaux films.
  3. Créer la page ajouter.php qui ajoute au fichier JSON les informations du formulaire, via FETCH. Attention on utilisera un format JSON pour le nouveau film et la méthode POST
  4. Mettre à jour le contenu du tableau html pour qu’il soit identique au fichier JSON. Pour réaliser cela, il faut rajouter les balises <tr> et <td> lorsque le nouveau film a été ajouté

TIPS

  • Lire un fichier JSON en php => json_decode
  • Vérifier si JSON est correct => parser Attention c’est important car sinon les fonctions de lectures/écritures de php peuvent être impactées
  • Ajouter une fonction javascript sur un input de type button
<input type="button" value="valider" onclick="maFonction()">
  • Récupèrer des valeurs d’un input en javascript
maVar = document.getElementById("maVar").value;
  • Créer un format JSON en Javascript => diapo 37
  • Lire du format JSON en PHP => diapo 38
  • Manipuler du JSON avec PHP et Javascript => ici
  • Ajouter des données à un JSON :
Solution 1 :
    /* Récuperer le contenu du fichier JSON */
    $tab = file_get_contents("montab.json");

    /* Décoder le contenu */
    $array_data = json_decode($tab, true);

    /* Les infos que l'on souhaite ajouter */
    $maChaineDeCaractere="{nom:plant,prenom:robert}";

    /* Transformer la chaine de caractère en tableau */
    $array_data[] = json_decode($maChaineDeCaractere);

    /* Encoder le tableau en json */
    $final_data = json_encode($array_data);

    /* Ajouter les données au fichier json */
    file_put_contents("montab.json", $final_data);
Solution 2 :
    /* Récuperer le contenu du fichier JSON */
    $tab = file_get_contents("montab.json");

    /* Décoder le contenu */
    $array_data = json_decode($tab, true);

     /* Transformer les infos du formulaire en tableau */
    $newdata = array(
            "nom"=>"plant",
            "prenom"=>"robert"
        );

    /* ajouter ce tableau à l'ancien tableau*/
    $array_data[]=$newdata;

    /* Encoder le tableau en json */
    $final_data = json_encode($array_data,JSON_PRETTY_PRINT);

   /* l'option => JSON_PRETTY_PRINT : permet d'afficher le json avec les infos lignes par lignes

    /* Ajouter les données au fichier json */
    file_put_contents("montab.json", $final_data);
  • Ajouter des balises html en javascript
//Création d ' une ligne
tr = document.createElement('tr');

//Création de 2 colonnes
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));

//Remplir les colonnes
tr.cells[0].appendChild(document.createTextNode("toto"));
tr.cells[1].appendChild(document.createTextNode("tutu"));

//Récupération du tableau dont l'id est media
element = document.getElementById("media");

//Ajout de la ligne contenant les colonnes à l'élément dont l'id est media
element.appendChild(tr);

Exercice 3 : Le pendu

Nous souhaitons réaliser le jeu du pendu. Le mot mystère sera tiré aléatoirement depuis le fichier mots.txt et sera stocké dans la session. Le choix des lettres sera fait par des boutons (un bouton par lettre), et une zone de “ETAT” sera prévu afin d’indiquer le nombre de coup restant et les lettres déjà jouées. Si la lettre sur laquelle le joueur a cliqué appartient au mot mystère, alors l’affichage du mot évolue afin defaire apparaître la lettre au bon endroit dans le mot. Sinon, il y a un coup restant en moins.

Ce traitement doit être géré avec la méthode fetch. Une fois la lettre demandée, le bouton ne doit plus être cliquable afin de ne pas demander plusieurs fois la même lettre. En bas de la page, un bouton Nouvelle partie doit permettre de recommencer une partie de pendu avecun autre mot tiré aléatoirement.