Développement web S2 (R213) – TP #5

Dans cette séance de TP vous allez faire un site web avec des albums de musique et des commentaires.

Liens utiles : TD #1 · TP #4

Dans le répertoire r213 que vous avez déjà créé, ajoutez un répertoire nommé r213-tp5 pour sauvegarder les exercices de cette séance (TP #5).

Dans ce répertoire r213-tp5, créez un répertoire appelé exo1 pour le premier exercice, exo2 pour le deuxième, etc. Vos exercices ne seront pas corrigés si vous ne respectez pas ces instructions.

À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire r213-tp5 avec tous vos exercices et le soumettre sur AMeTICE.

Seuls les exercices marqués avec une étoile (*) seront évalués. La date limite pour rendre vos exercices est visible sur AMeTICE, et aucun travail ne sera accepté après. Le corrigé sera affiché après l'évaluation des exercices.

Exercices

Vous allez faire un site web avec une liste d'albums de musique. En cliquant sur un album, on peut voir les commentaires des utilisateurs.

Pour ces exercices vous utiliserez cette base de données. Elle contient deux tables :

Remarquez que la relation entre les commentaires et les albums se fait par les identifiants. Le champ commentaires.album_id contient l'identifiant d'un album, c'est-à-dire album.id.

Exercice 1* noté

Dans cet exercice vous allez faire la page d'accueil index.php du site web.

Cette page ne contient qu'un formulaire avec des boutons radio pour choisir un album. Vous devez générer ce formulaire en PHP en utilisant la table albums de la base de données.

Le résultat doit être comme ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <form method="post" action="commentaires.php">
    <label>
      <input type="radio" name="album" value="talking-heads-77">
      Talking Heads: 77
    </label><br>
    <label>
      <input type="radio" name="album" value="more-songs-about-buildings-and-food">
      More Songs About Buildings and Food
    </label><br>
    ...
    <input type="submit" value="Valider">
  </form>
</body>
</html>

Il vous faut :

  1. Importer la base de données sur votre serveur (local ou externe).
  2. Faire la connexion à la base de données.
  3. Faire la requête SQL. Elle est très facile parce qu'il n'y a pas de variables. Nous avons vu en cours comment faire une requête sans variables.
  4. Récupérer les résultats.
  5. Pour chaque entrée de la table, faites un bouton radio. Notez que dans la valeur de l'attribut value il faut mettre le slug de l'album, qui se trouve dans la base de données.

Exercice 2* noté

Dans cet exercice vous allez faire la page commentaires.php qui affiche les commentaires d'un album.

Vous devez faire une requête à la base de données pour obtenir les commentaires de l'album qui a été choisi dans le formulaire. Ensuite vous affichez ces commentaires sous forme de liste à puces. Lé résultat doit être comme ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>R213</title>
</head>
<body>
  <p>
    Commentaires :
  </p>
  <ul>
    <li>tellement ridicule que ça me plait...."qu'est ce que c'est"...c'est grave docteur?</li>
    <li>Purée Psycho killer est tellement ridicule c’est dingue.</li>
    ...
  </ul>
  <p>
    <a href="index.php">Retour</a>
  </p>
</body>
</html>

Cette fois-ci, la requête SQL contient une variable (l'album), donc il vous faut utiliser un marqueur nominatif. De plus, la requête SQL doit faire une jointure interne pour bien identifier les commentaires à afficher. Voici un exemple de ce à quoi elle devrait ressembler :

SELECT * FROM commentaires 
INNER JOIN albums ON commentaires.album_id = albums.id 
WHERE albums.slug = 'talking-heads-77'

Si vous avez le temps, faites les exercices suivants.

Exercice 3

Dans cet exercice vous allez afficher le titre de l'album et son année de sortie avant la liste des commentaires.

Avant d'afficher la liste de commentaires, vous devez faire une requête à la base de données pour obtenir le titre de l'album et son année de sortie. Deux remarques :

  • La requête ne donne qu'un seul résultat. Vous n'avez pas donc besoin d'une boucle, vous pouvez retrouver directement le titre de l'album dans $results[0]['titre'].
  • Puisque vous devez vous connecter à la base de données pour retrouver ces informations, il n'y a pas besoin de se connecter une deuxième fois pour afficher la liste de commentaires.

Le résultat attendu est comme ceci :

...
<body>
  <p>
    Commentaires pour <strong>Talking Heads: 77</strong> (1977) :
  </p>
...

Exercice 4

Vous devez maintenant mettre un formulaire pour ajouter un nouveau commentaire dans le site web.

Dans la page qui affiche les commentaires d'un album, faites un formulaire pour écrire un nouveau formulaire, et envoyez cette information à une page ajouter_commentaire.php pour l'insérer dans la base de données.