Créer un catalogue produit dynamique en PHP / MySQL / CSS

Introduction

PHP + MySQL + CSS (tous open source) permettent un catalogue produit dynamique : PHP récupère les données produits en base, CSS met en forme l'affichage.

Étape 1 : Créer la table MySQL « products »

Via phpMyAdmin :

CREATE TABLE `votreBase`.`products` (
  `id` INT(100) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `description` VARCHAR(3000) NOT NULL,
  `upcNumber` VARCHAR(100) NOT NULL,
  `name` VARCHAR(100) NOT NULL,
  `price` VARCHAR(100) NOT NULL,
  `picture` VARCHAR(100) NOT NULL,
  `timestamp` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE = MYISAM;

Champs : ID, description, code UPC, nom, prix, nom_fichier_image, horodatage.

Étape 2 : Peupler la table

phpMyAdmin > Insérer > remplissez chaque champ par produit (nom dans name, UPC dans upcNumber, nom fichier image dans picture, etc.).

Étape 3 : Récupérer les données en PHP

<?php
mysql_connect("localhost", "votreUser", "votrePass") or die(mysql_error());
mysql_select_db("votreBase") or die(mysql_error());

$data = mysql_query("SELECT * FROM products ORDER BY id DESC") or die(mysql_error('Aucun enregistrement'));

while($info = mysql_fetch_array($data)) {
  $name = $info['name'];
  $description = $info['description'];
  $upcNumber = $info['upcNumber'];
  $imageFile = $info['picture'];
  $price = $info['price'];
  // Affichage HTML/CSS ci-dessous dans la boucle
}
?>

Note : extension mysql_* obsolète (PHP 5.5+). Préférez PDO ou mysqli avec requêtes préparées.

Étape 4 : Afficher et styler avec CSS (inline exemple)

<img src="<?php echo $imageFile; ?>" style="float:left;" />
<h1><?php echo $name; ?></h1>
<h4><?php echo $upcNumber; ?></h4>
<h5><?php echo $price; ?></h5>
<p><?php echo $description; ?></p>

Étape 5 : Intégrer l'affichage dans la boucle

Placez le bloc HTML/PHP de l'étape 4 à l'intérieur du while pour répéter pour chaque produit. Code final complet fourni dans l'article original.