Premier site avec SQL

Les spécifications sont :

d'utiliser les enregistrements de la base de données pour générer le menu
de générer automatiquement la page du pont sélectionné à partir d'une page générique

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.

bdd.inc.php

<?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”].
Ne pas oublier de renommer le lien du bouton de retour en index.php.
Les informations sur le pont sont remplacées par celles fournies par 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 des nouveaux ponts dans la base de données.

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Table des matières

Premier site avec SQL

Gestion de la base de données

La page du menu

La page des ponts

Améliorations

Outils de la page