🐛TP01 : réalisation de la page listing.php

connexion de la page listing.php à la base de données

Pour pouvoir réaliser correctement l'exercice su votre VPS, vous devez avoir installé les paquets suivants sur votre serveur: php8.1-xml, php8.1-mysqli, php8.1-mbstring, php8.1-curl . Si vous avez un doute, avant de commencer, exécutez les commandes suivantes

sudo -i
apt update
apt install php8.1-xml php8.1-mysqli php8.1-mbstring php8.1-curl 

support de cours

vous pouvez vous appuyer sur le cours de R213 dons le support est ici: http://149.91.83.164/lectio/p-R213-developpement-web_cm-02.html#1

objectif

nous allons ici relier la page listing.php (qui pour l'instant ne contient que 2 ou 3 'articles' fictives) à la base de données.

dans notre exemple de présentation nous parlions de bandes dessinées reliées à une table d'auteurs.

connexion à la base de données

ouvrir votre fichier listing.php et commencer par inclure la ligne permettant la connexion à la base de données (à mettre au début, juste après body par exemple). attention changer monMotDePasse par votre propre mot de passe d'accès à votre base de données (celui du compte sae203)

<?php
$mabd = new PDO('mysql:host=localhost;dbname=sae203;charset=UTF8;', 'sae203', 'monMotDePasse');
?>

vous pouvez déjà tester votre page listing.php. En la testant, vous devez voir aucun changement, sauf si il y a un soucis de connexion à votre base de données et dans ce cas vous aurez un message d'erreur qu'il faudra résoudre (erreur de mot de passe, de nom de base de données, d'identifiant...)

passer l'envois de vos requêtes en UTF8

ajouter la ligne nécessaire

<?php
$mabd = new PDO('mysql:host=localhost;dbname=sae203;charset=UTF8;', 'sae203', 'monMotDePasse');

$mabd->query('SET NAMES utf8;');
?>

préparation de la requete

Après la connexion à la base de données, il est maintenant nécessaire de préparer et d'exécuter la requete SQL permettant de récupérer toutes les informations sur les albums avec le nom des auteurs (pour notre exemple ici! il faut bien sur adapter cela à vos propres données)

...
$req = "SELECT * FROM bandes_dessinees INNER JOIN auteurs ON bandes_dessinees._auteur_id = auteurs.auteur_id";
$resultat = $mabd->query($req);

affichage sommaire des informations

ajouter les lignes suivantes (en les adaptant à vos données!)

...
foreach ($resultat as $value) {
    echo $value['bd_titre'] . ' , ' . $value['bd_prix'] . ' euro ';
    echo '<br> auteur: ' . $value['auteur_nom']. '<hr>';
}

vous pouvez maintenant tester votre page 'listing.php' , et vous devez observer l'affichage (présentation sommaire) de toutes vos données

amélioration de l'affichage des informations

vous pouvez maintenant améliorer l'affichage des données en fonction de ce que vous aviez prévue en terme de html et css au début de la SAE.

exemple:

...
foreach ($resultat as $value) {
    echo '<div class="album">' ;
    echo '<h3>'.$value['bd_titre'] . '</h3>';
    echo '<p>tarif: ' . $value['bd_prix'] . ' euro </p>';
    echo '<p class="page">' . $value['bd_page'] . ' pages </p>';
    echo '<p class="auteur"> auteur: ' . $value['auteur_nom'] . '</p>';
    echo '</div>';
}

insertion des photos

vous pouvez ajouter dans le foreach, l'affichage du champs photo. il faut bien sur que vos photos soient dans un dossier images dans votre dossier de votre projet.

...
foreach ($resultat as $value) {
    echo '<div class="album">' ;
    echo '<h3>'.$value['bd_titre'] . '</h3>';
    ...
    echo '<img class="image" src="images/'.$value['bd_photo'].'">';
    ...
    echo '<p>tarif: ' . $value['bd_prix'] . ' euro </p>';
    echo '<p class="page">' . $value['bd_nb_page'] . ' pages </p>';
    echo '<p>Résumé: ' . $value['bd_resume'] . ' </p>';
    echo '<p class="auteur"> de ' . $value['auteur_nom'] . '</p>';
    echo '</div>';
}

vous pouvez maintenant tester votre page 'listing.php' , et vous devez observer l'affichage de toutes vos données y compris la photo. Vérifiez aussi l'affichage en version mobile.

votre page listing est maintenant opérationnelle, vous pouvez la peaufiner graphiquement.