Premier site avec SQL

Les spécifications sont :

Utiliser les enregistrements de la base de données pour générer le menu

Générer automatiquement la page du pont sélectionné

Sur notre serveur nous allons créer un nouveau site “sitesql” et y copier le fichier “style1.css” du premier site avec CSS.

Gestion de la base de données

Il est une bonne habitude de regrouper la gestion de la base de donnée dans un fichier unique qui facilitera les modifications. Ajoutez sur notre site le fichier suivant.

<?php // Connexion à la Base de données $db = new PDO ("mysql:host=localhost;dbname=premier_site", "root", ""); // Création de la liste de tous les ponts par ordre alphabétique function listePonts() { global $db; $rqt = $db->query("SELECT Id, nom, pays, ville FROM ponts ORDER BY nom;"); return $rqt->fetchAll(PDO::FETCH_ASSOC); } // Récupération des informations du pont dont l'Id est dans $p function selectPont($p) { global $db; $rqt = $db->query("SELECT * FROM ponts WHERE Id=$p;"); return $rqt->fetch(PDO::FETCH_ASSOC); } ?>

La page du menu

Le fichier “index.html” est copié et renommé “index.php” avant d'être modifié.

On remplace le contenu de la liste <ul>...</ul> par le code ci-dessous.

<ul class='menu'> <?php include "bdd.inc.php"; // Connexion à la base de données $menu = listePonts (); // Récupère la liste des ponts foreach ($menu as $v) // Affiche l'entrée du menu pour chaque pont récupéré printf ("\t\t\t<li><a href='page.php?pont=%d'>%s - %s - %s</a></li>\n", $v["Id"], $v["nom"], $v["pays"], $v["ville"]); ?> </ul>

Lorsque l'on cliquera sur une ligne du menu, la page “page.php” sera appelée en indiquant de quel pont il s'agit [?pont=Id_du_pont].

La page des ponts

Un des fichiers “pagex.html” est copié et renommé “page.php” avant d'être modifié.

Au début, on ajoute la connexion à la base de de donnée et la récupération des infos du pont demandé dans le paramètre $_GET[“pont”].

Les informations du pont sont insérées grâce à la commande “echo”.

<?php include "bdd.inc.php"; $pont = selectPont($_GET["pont"]); ?> <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-15" /> <link rel='stylesheet' href='style1.css' type='text/css' /> <title>Ponts du monde</title> </head> <body> <a href='index.php'><input type='button' value='Retour' /></a> <h1><?php echo $pont["nom"]; ?></h1> <img src='<?php echo $pont["image"]; ?>' alt='<?php echo $pont["nom"]; ?>'/> <p>Lieu : <span class='info'><?php echo $pont["ville"] . " - " . $pont["pays"]; ?></span></p> <p>Catégorie : <span class='info'><?php echo $pont["type"] . " - " . $pont["materiaux"]; ?></span></p> <p><?php echo $pont["description"]; ?></p> </body> </html>

Améliorations

On peut maintenant modifier la page du menu pour filtrer les ponts par pays ou par type ...

Il faut aussi prévoir une nouvelle page de type formulaire pour insérer les nouveaux ponts dans la base de données.