Retourne une chaîne format e
Créer un système de panier d'achat avec PHP et MySQL
Nous utiliserons l'interface PDO pour accéder à notre base de données MySQL avec PHP, car elle nous permettra d'interagir plus facilement avec notre base de données et de manipuler nos tables.
Le système de panier d'achat que nous allons créer contiendra 4 produits. Ces produits sont essentiellement des gadgets/accessoires que nous utiliserons comme exemples pour ce tutoriel. Vous pourrez ajouter vos propres produits plus tard dans le tutoriel.
Le pack Advanced comprend des fonctionnalités supplémentaires et un lien de téléchargement vers le code source.
1. Pour commencer à créer notre panier d’achat
Il y a quelques étapes à franchir avant de créer notre système de panier. Nous devons configurer notre environnement du serveur Web (si ce n'est pas déjà fait) et nous assurer que les extensions requises sont activées.
1.1. Démonstrations
Vous trouverez ci-dessous un lien vers le démo de panier d'achat. Le démo du tutoriel que nous allons créer.
1.2. Exigences
Si vous ne disposez pas d'un serveur web local, vous devez télécharger et installer un (par exemple celui que moi j’utilise WampServer).
Assurez-vous que l'extension PDO est activée (elle devrait être incluse et activée par défaut).
1.3. Ce que vous allez apprendre dans ce tutoriel
Nous allons voir la conception de modèles à savoir:
- Concevoir une page d'accueil,
-une page produit, qui donne les détails d’un produit donnée
-une page de produits, pour voir touts les produits de notre site
- une page de panier
-et une page de commande avec HTML5 et CSS3,
Nous apprenons comment mettre en œuvre le système de modèles avec PHP et HTML :
- Créer des formulaires HTML et gérer les requêtes de données avec PHP.
- Comment préparer les requêtes SQL pour éviter les injections SQL.
- Validation des données de formulaire envoyées au serveur.
- Initialisation des sessions et stockage des produits du panier d'achat.
1.4. Structure et configuration des fichiers
Nous pouvons maintenant démarrer notre serveur web et créer les fichiers et répertoires que nous allons utiliser pour notre système de panier d'achat.
Lancez le serveur local que vous avez installé (pour moi c’est wampserver)
Ouvrez le répertoire racine de votre serveur (pour wampserver c’est C:\wamp\www).
Créez les répertoires et fichiers suivants :
Un dossier que moi j’ai nommé panier et y créer les fichiers, qui serons vide pour l'instant, nous les éditons au fur et à mesure tout au long de notre tutoriel:
- fonction.php, Ce fichier contiendra toutes les fonctions dont nous avons besoin pour notre système de panier (en-tête de modèle, pied de modèle et fonctions de connexion à la base de données).
- index.php, Ce fichier contient le modèle principal (en-tête, pied de page, etc.) et le routage de base afin que nous puissions inclure les pages ci-dessous.
- home.php, Ce fichier sera la page d'accueil qui contiendra l’image de présentation du site panier d’achat et les 4 produits récemment ajoutés.
- panier.php, page du panier d'achat qui affichera tous les produits ajoutés au panier, ainsi que les quantités, les prix totaux et les prix partiels.
- placercommande.php, Un message de base qui sera affiché à l'utilisateur lorsqu'il passe une commande.
- produit.php, Ce fichier affichera un produit ainsi qu’une description de ce produit et contiendra un formulaire qui permettra au client de modifier la quantité et d'ajouter le produit au panier.
- produits.php, Ce fichier servira à afficher tous les produits avec une pagination de base.
- style.css, La feuille de style (CSS) que nous utiliserons pour notre site Web de panier d'achat.
Et toujours dans le répertoire panier créer un dossier "imgs" pour y mettre les images dont on aura besoin pour notre site(image de présentation du site, images de produits, etc.)
2. Création de la base de données et mise en place des tables
Pour cette partie, vous devrez accéder à votre base de données MySQL, soit en utilisant phpMyAdmin, soit en utilisant votre application de gestion de base de données MySQL préférée.
Si vous utilisez phpMyAdmin, suivez ces instructions :
Accédez à http://localhost/phpmyadmin/ ou cliquer sur l’icône wamserver dans la barre des tache puis sur phpMyAdmin
Cliquez sur l'onglet Bases de données en haut
Sous Créer une base de données, tapez le nom que vous voulez donner à votre base de données moi je choisis «shoppingpanier» dans la zone de texte nom de base de données.
Dans la liste déroulante interclassement sélectionnez utf8_general_ci (UTF-8 est le codage par défaut dans HTML5).
Cliquez sur Créer
N'hésitez pas à utiliser votre propre nom de base de données, bien que vous pouvez laisser celui que j’ai utilisé.
Nous pouvons maintenant passer à la création de la table des produits. Nous utiliserons cette table pour stocker tous nos produits, avec les colonnes nom du produit, description, image, prix, prix RRP, quantité et date d'ajout. Nous récupérerons ces produits plus tard dans le tutoriel avec PHP.
Cliquez sur la base de données (shoppingPanier) dans le panneau latéral gauche
Cliquez sur l'onglet SQL en haut et saisissez le code de la requête dans la zone de texte (vous pouvez copier et coller ce code)
Code de la requête SQL
Code SQL
CREATE TABLE IF NOT EXISTS `produits` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nom` varchar(200) NOT NULL, `description` text NOT NULL, `prix` decimal(7,2) NOT NULL, `prix_Réel` decimal(7,2) NOT NULL DEFAULT '0.00', `quantité` int(11) NOT NULL, `img` text NOT NULL, `date_ajou` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8; INSERT INTO `produits` (`id`, `nom`, `description`, `prix`, `prix_Réel`, `quantité`, `img`, `date_ajou`) VALUES (1, 'Écouteur Bluetooth', '<p>Écouteur Bluetooth sans fil casque ecouteurs F9 écouteur stéréo HIFI sport casque Support iOS/Android téléphones HD appel.</p>\r\n<h3>Détails</h3>\r\n<ul>\r\n<li>Nom: Casque Bluetooth F9</li><li>Couleur: noir</li><li>Matériel: ABS</li><li>Version bluetooth: V5.0</li><li>Affichage de la batterie: prise en charge d\'Android, IOS</li><li>Distance de travail: 10 mètres</li><li>Sensibilité: 108 ± 2db</li><li>Impédance: 16 ± 5% Ω</li><li>Batterie: Casque 60mah</li><li>Batterie de chargement: 1200MAH</li><li>Utilisation continue du casque: 3-5 heures</li><li>Taille du bac de chargement: 8 * 5,5 ** 3CM</li>\r\n</ul>', '29.99', '0.00', 14.99, 'ecouteurBluetooth.png', '2021-10-13 17:55:22'), (2, 'Support-Telephone', '<h3>Détails</h3>\r\n<ul>\r\n<li>Support pour votre smartphone! Flexible, il vous permet de tordre la tige afin de trouver la hauteur idéale et l’emplacement parfait où placer votre téléphone.<br>Support flexible universel pour Smartphones, téléphones portables et liseuses - 60 cm de hauteur </li><li>Installation on ne peut plus simple , il suffit de :\r\n<ol>\r\n <li>– Insérer la boule de la tige à l’arrière du support téléphone</li><li>– visser la molette pour bloquer l’angle de vue choisi</li><li>- clipper la pince sur la surface choisie (bord de table ou autre)</li><li>– placer le téléphone dans le support en pinçant pour ouvrir, et refermer doucement autour du téléphone</li>\r\n</ol>\r\n</li>\r\n</ul>', '14.99', '19.99', 34, 'Support-Telephone.jpg', '2021-10-13 18:52:49'), (3, 'Headphones', '', '19.99', '0.00', 23, 'headphones.jpg', '2021-10-13 18:47:56'), (4, 'Chargeur Rapide', '<div><h3>Détails Chargeur Rapide Haute Qualité Turbo Charger 18W avec Cable type-c.</h3>\r\nVous pouvez charger vos téléphones plus rapidement avec ce chargeur.<br> Vous pouvez vérifier les valeurs de sortie du produit nommé ...... dans la section des spécifications du produit. Ce chargeur peut être utilisé sur tous les modèles Type-c USB-C Input.<br>Permet une charge rapide des téléphones ou des appareils mobiles avec prise en charge de la charge rapide. Vous pouvez également charger en toute sécurité d\'autres appareils.<br>Le chargeur peut fournir une puissance de charge différente pour différents appareils Android et iOS.</div>', '11.99', '0.00', 7, 'ChargeurRapide.jpg', '2021-10-13 17:42:04');
Le code de la requête SQL ci-dessus créera la table des produits avec les colonnes suivantes :
id - ID unique pour le produit, il sera incrémenté automatiquement.
nom - Le nom du produit.
description - La description du produit.
prix - Le prix du produit.
Prix_réel - Le prix réel, auquel le produit se vent normalement sa valeur est plus élevée que le prix de vente sur le site.
date_ajou - La date à laquelle le produit a été ajouté, nous l'utiliserons pour trier les produits.
L'instruction SQL insère également 4 produits comme exemple que nous utiliserons à des fins de test. Vous pourrez les modifier/supprimer plus tard dans le tutoriel, lorsque nous aurons implémenté le code
3. Conception du système de panier à provisions avec CSS
Dans ce code css j’ai utilisé du CSS simple sans aucune bibliothèque comme Bootstrap.
Vous pouvez le modifier comme vous voulez.
Ouvrez le fichier (style.css) que nous avons crée auparavant ou créez le si ce n’est pas fait.
Modifiez le fichier style.css on y ajoutant ajoutez le code:
Code CSS
* {
box-sizing: border-box;
font-family: -apple-system, ubuntu, cantarell, "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
color: #555555;
background-color: #FFFFFF;
margin: 20px;
padding-bottom: 100px; /* Same height as footer */
padding-left:2em;
}
h1, h2, h3, h4, h5 {
color: #394352;
}
a{text-decoration:none;
}
.content-wrapper {
width: auto;
margin: 0 auto;
}
header {
border-bottom: 1px solid #EEEEEE;
}
header .content-wrapper {
display: flex;
}
header h1 {
display: flex;
flex-grow: 1;
flex-basis: 0;
font-size: 20px;
margin: 0;
padding: 24px 0;
}
header nav {
display: flex;
flex-grow: 1;
flex-basis: 0;
justify-content: center;
align-items: center;
}
header nav a {
text-decoration: none;
color: #555555;
padding: 10px 10px;
margin: 0 10px;
}
header nav a:hover {
border-bottom: 1px solid #aaa;
}
header .link-icons {
display: flex;
flex-grow: 1;
flex-basis: 0;
justify-content: flex-end;
align-items: center;
position: relative;
}
header .link-icons a {
text-decoration: none;
color: #394352;
padding: 0 10px;
}
header .link-icons a:hover {
color: #4e5c70;
}
header .link-icons a i {
font-size: 18px;
}
header .link-icons a span {
display: inline-block;
text-align: center;
background-color: #63748e;
border-radius: 50%;
color: #FFFFFF;
font-size: 12px;
line-height: 16px;
width: 16px;
height: 16px;
font-weight: bold;
position: absolute;
top: 22px;
right: 0;
}
main .featured {
display: flex;
flex-direction: column;
background-image: url(imgs/ecommerce.png);
background-repeat: no-repeat;
background-size: cover;
height: 400px;
align-items: center;
justify-content: center;
text-align: center;
}
main .featured h2 {
display: inline-block;
margin: 0;
width: 1050px;
font-family: Rockwell, Courier Bold, Courier, Georgia, Times, Times New Roman, serif;
font-size: 68px;
color: #FFFFFF;
padding-bottom: 10px;
}
main .featured p {
font-weight:900;
display: inline-block;
margin: 0;
width: 1050px;
font-size: 24px;
color: #e72f2f;
}
main .recentlyadded h2 {
display: block;
font-weight: normal;
margin: 0;
padding: 40px 0;
font-size: 24px;
text-align: center;
width: 100%;
border-bottom: 1px solid #EEEEEE;
}
main .recentlyadded .products, main .products .products-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 40px 0 0 0;
}
main .recentlyadded .products .product, main .products .products-wrapper .product {
display: block;
overflow: hidden;
text-decoration: none;
width: 25%;
padding-bottom: 60px;
}
main .recentlyadded .products .product img, main .products .products-wrapper .product img {
transform: scale(1);
transition: transform 1s;
}
main .recentlyadded .products .product .name, main .products .products-wrapper .product .name {
display: block;
color: #555555;
padding: 20px 0 2px 0;
}
main .recentlyadded .products .product .price, main .products .products-wrapper .product .price {
display: block;
color: #999999;
}
main .recentlyadded .products .product .prix_Réel, main .products .products-wrapper .product .prix_Réel {
color: #BBBBBB;
text-decoration: line-through;
}
main .recentlyadded .products .product:hover img, main .products .products-wrapper .product:hover img {
transform: scale(1.05);
transition: transform 1s;
}
main .recentlyadded .products .product:hover .name, main .products .products-wrapper .product:hover .name {
text-decoration: underline;
}
main > .product {
display: flex;
padding: 40px 0;
}
main > .product > div {
padding-left: 15px;
}
main > .product h1 {
font-size: 34px;
font-weight: normal;
margin: 0;
padding: 20px 0 10px 0;
}
main > .product .price {
display: block;
font-size: 22px;
color: #999999;
}
main > .product .prix_Réel {
color: #BBBBBB;
text-decoration: line-through;
font-size: 22px;
padding-left: 5px;
}
main > .product form {
display: flex;
flex-flow: column;
margin: 40px 0;
}
main > .product form input[type="number"] {
width: 400px;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
color: #555555;
border-radius: 5px;
}
main > .product form input[type="submit"] {
background: #4e5c70;
border: 0;
color: #FFFFFF;
width: 400px;
padding: 12px 0;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
main > .product form input[type="submit"]:hover {
background: #434f61;
}
main > .products h1 {
display: block;
font-weight: normal;
margin: 0;
padding: 40px 0;
font-size: 24px;
text-align: center;
width: 100%;
}
main > .products .buttons {
text-align: right;
padding-bottom: 40px;
}
main > .products .buttons a {
display: inline-block;
text-decoration: none;
margin-left: 5px;
padding: 12px 20px;
border: 0;
background: #4e5c70;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
}
main > .products .buttons a:hover {
background: #434f61;
}
main .cart h1 {
display: block;
font-weight: normal;
margin: 0;
padding: 40px 0;
font-size: 24px;
text-align: center;
width: 100%;
}
main .cart table {
width: 100%;
}
main .cart table thead td {
padding: 30px 0;
border-bottom: 1px solid #EEEEEE;
}
main .cart table thead td:last-child {
text-align: right;
}
main .cart table tbody td {
padding: 20px 0;
border-bottom: 1px solid #EEEEEE;
}
main .cart table tbody td:last-child {
text-align: right;
}
main .cart table .img {
width: 80px;
}
main .cart table .remove {
color: #777777;
font-size: 12px;
padding-top: 3px;
}
main .cart table .remove:hover {
text-decoration: underline;
}
main .cart table .price {
color: #999999;
}
main .cart table a {
text-decoration: none;
color: #555555;
}
main .cart table input[type="number"] {
width: 68px;
padding: 10px;
border: 1px solid #ccc;
color: #555555;
border-radius: 5px;
}
main .cart .subtotal {
text-align: right;
padding: 40px 0;
}
main .cart .subtotal .text {
padding-right: 40px;
font-size: 18px;
}
main .cart .subtotal .price {
font-size: 18px;
color: #999999;
}
main .cart .buttons {
text-align: right;
padding-bottom: 40px;
}
main .cart .buttons input[type="submit"] {
margin-left: 5px;
padding: 12px 20px;
border: 0;
background: #4e5c70;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
}
main .cart .buttons input[type="submit"]:hover {
background: #434f61;
}
main .placeorder h1 {
display: block;
font-weight: normal;
margin: 0;
padding: 40px 0;
font-size: 24px;
text-align: center;
width: 100%;
}
main .placeorder p {
text-align: center;
}
footer {
position: absolute;
bottom: 0;
border-top: 1px solid #EEEEEE;
padding: 20px 0;
width: 100%;
}
.price {
color: #f00;
}
td {
padding-left: 3em;
text-align:center;
}
.prix_Réel {
text-decoration: line-through;
}
Et voici le code que nous allons utiliser dans ce tutoriel pour notre panier d’achats.
4. Création du fichier de fonctions
Le fichier fonctions.php contient toutes les fonctions php que nous allons utiliser dans notre système de panier d'achat, notamment l'en-tête et le pied de page du modèle, ainsi que les fonctions de connexion à la base de données.
C’est le fichier Template (en quelque sorte le squelette ) de toutes les pages de notre panier d’achat que notre site affichera au clients.
Modifiez le fichier fonctions.php en y ajoutant ce code :
CODE DU FICHIER (fonction.php)
Code PHP
<?php
session_start();
function pdo_connect_mysql(){
// Mettez à jour les détails ci-dessous avec les données de votre base de données MySQL.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'shoppingpanier';
try {
return new PDO('mysql:host=' . $DATABASE_HOST . ';dbname=' . $DATABASE_NAME . ';charset=utf8', $DATABASE_USER, $DATABASE_PASS);
} catch (PDOException $exception) {
// S'il y a une erreur de connexion, arrêtez le script et affichez le message erreur.
exit('Echec de la connexion à la base de données !');
}
}
// Template de l'entete de notre page, vous pouvez le personnaliser.
function template_header($title) {
// Obtenez le nombre de produits dans le panier, il sera affiché dans l'en-tête.
$num_items_in_panier = isset($_SESSION['panier'])? count($_SESSION['panier']) : 0;
echo <<<EOT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>$title</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="content-wrapper">
<h1>Shopping Panier System</h1>
<nav>
<a href="index.php" tite="accueil"><i class="fas fa-home"></i>Accueil </a>
<a href="index.php?page=produits" title="page des
produits">produits</a>
</nav>
<div class="link-icons">
<a href="index.php?page=panier" title="panier d'achat"><i class="fas fa-shopping-panier"> </i><spanstyle="color:#f00;background:#fff; border:solid 0.5px"> $num_items_in_panier</span></a>
</div>
</div>
</header>
<main>
EOT;
}
// Template pied de page
function template_footer() {
$year = date('Y');
echo <<<EOT
</main>
<footer>
<div class="content-wrapper">
<p>© $year, Système de panier d'achats</p>
</div>
</footer>
</body>
</html>
EOT;
}
?>
Ces fonctions nous permettront de nous connecter plus facilement à la base de données et de mettre en forme nos pages.
Nous inclurons ce fichier dans la majorité de nos fichiers PHP. Au lieu d'écrire le même code de modèle à plusieurs reprises, nous pouvons facilement exécuter le nom de la fonction. Nous pouvons également modifier la mise en page de notre système de panier d'achat sans avoir à modifier chaque fichier.
Nous utilisons Font Awesome (bibliothèque d'icônes gratuite) pour nos icônes de police.
Pour pouvoir utiliser font Awesome le CDN de la feuille de style est inclus avec un link dans la section HTML head (fonction template_header).
Voici la balise link de la feuille de style pour le font Awesome à mettre dans la partie head de votre page web:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
Et voici le link pour notre feuille de style:
<link href="style.css" rel="stylesheet" type="text/css">
5. Création du fichier (index.php)
Le fichier index.php sera essentiellement notre fichier principal pour accéder à toutes nos pages.
Nous allons mettre en place un routage de base et utiliser des requêtes GET pour déterminer quelle page doit être affichée.
5.1. Connexion à la base de données MySQL
Nous commençons par créer la session avec la fonction session_start.
Par la suite, le script se connectera à la base de données MySQL en utilisant la fonction de connexion à la base de données que nous avons créée plus tôt, dans le fichier functions.php.
Remarque : mettez à jour les variables de connexion à la base de données si vous ne parvenez pas à vous connecter à la base de données MySQL.
Editer le fichier index.php en y ajoutant le code suivant :
Code PHP
<?php /* Inclure des fonctions et se connecter à la base de données en utilisant PDO MySQL*/ include'fonctions.php'; $pdo= pdo_connect_mysql();
5.2. Routage de base
La méthode de routage de base utilisée ci-dessous vérifie si la variable de requête GET ($_GET['page']) existe. Si ce n'est pas le cas, la page par défaut sera définie sur la page home.php, alors que si elle existe, elle sera la page affichée./p>
Pour cela télécharger l’image:
C’est l’image de présentation, enregistrer la dans le répertoire imgs que nous avons créé tout au début de ce tutoriel
Par exemple, si nous voulons accéder à la page des produits, nous pouvons utiliser:
http://localhost/panier/index.php?page=products
Editer le fichier index.php en y ajoutant au code ci-dessus le code :
Code PHP
/* Si aucune autre page n'est ren voyée dans les parametres http, la Page (home.php) est définie par défaut comme page d'accueil , de sorte que lorsque le visiteur se rend sur le site, c'est la page qui lui sera affichée.*/ $page = isset($_GET['page']) && file_exists($_GET['page'] . '.php') ? $_GET['page'] : 'home'; // Inclure et afficher la page demandée include $page.'.php';?>
Et voila notre fichier index.php est terminé et peut être afficher, mais si vous le faites maintenant, la page apparaîtra vide, c'est parce que nous n'avons pas encore édité le fichier home.php.
6 Création de la page d'accueil
La page d'accue sera la première page que nos clients verront.
Dans cette page, nous pouvons ajouter une image et un texte de présentation, ainsi qu'une liste de produits récemment ajoutés, que nous avons ici fixées à 4 produits.
Pour cela télécharger les images:
Et enregistrer les dans le répertoire imgs que nous avons créé tout au début de ce tutoriel
6.1. Récupérer 4 produits de la base de données
Modifiez le fichier home.php en y ajoutant le code :
Code java script
<?php
// Obtenez les 4 produits récemment ajoutés
$stmt = $pdo->prepare('SELECT * FROM produits ORDER BY date_ajou DESC LIMIT 4');
$stmt->execute();
$recently_added_produits = $stmt->fetchAll(PDO::FETCH_ASSOC);?>
Ce code exécutera une requête SQL qui récupérera les quatre produits les plus récemment ajoutés dans notre base de données. Tout ce que nous avons à faire avec cette requête est d'ordonner par la colonne date_ajou et de limiter la quantité à 4, Puis nous stockons le résultat dans la variable $recently_added_produits sous forme de tableau associé.
6.2. Créer la template home
Ajouter le code à votre fichier home.php:
Code PHP
<?=template_header('Home')?>
<div class="featured">
<h2>Téléphone</h2>
<p>Accessoires Téléphone</p>
</div>
<div class="recentlyadded content-wrapper">
<h2>Recently Added produits</h2>
<div class="produits" width="100%"><table style="margin: auto;"><tr>
<?php foreach ($recently_added_produits as $produit): ?>
<td><a href="index.php?page=produit&id=<?=$produit['id']?>" class="produit"> <img src="imgs/<?=$produit['img']?>" width="150" height="150" alt="<?=$produit['nom']?>"><br>
<span class="name"><?=$produit['nom']?></span><br>
<span class="price">
$<?=$produit['prix']?>
<?php if ($produit['prix_Réel'] > 0): ?>
<span class="prix_Réel">$<?=$produit['prix_Réel']?></span> <?php endif; ?>
</span>
</a></td>
<?php endforeach; ?>
</tr></table>
</div></div>
<?=template_footer()?>
Ce qui nous permettra de créer un modèle de page d'accueil de base. Le code ci-dessus va parcourir la variable $recently_added_products et la remplir en conséquence. Le prix_réel sera inclus seulement si la valeur est supérieure à 0.
Si vous préférez utiliser votre propre devise, vous pouvez modifier le code de l'entité $.
<span class="prix_Réel">$<?=$produit['prix_Réel']?></span>
Voici le lien pour les différents codes de devises: cliquer ici
Remarque : toutes les images des produits se trouvent dans le répertoire imgs. Vous devrez télécharger les images de ces produits si vous utilisez les exemples de produits que nous avons créés précédemment.
7. Créer la page produits.php
La page des produits sera l'endroit où nos clients vont aller pour consulter tous nos produits. Nous allons limiter le nombre de produits à afficher sur chaque page et ajouter une pagination qui doit permettre aux clients de naviguer entre les pages.
7.1. Get Products from Database with Pagination
Editer la page produits.php en y ajoutant le code:
Code php
<?php
/* Determiner le nombre de produits à afficher sur chaque page*/
$nbr_produits_sur_chaque_page = 2;
/* La page actuelle, apparaîtra dans l'URL comme index.php?page=produits&p=1 ou p=2 ce signifié la page 1 l& page 2 etc...*/
$current_page = isset($_GET['p']) && is_numeric($_GET['p']) ? (int)$_GET['p'] : 1;
/* Sélectionnez les produits commandés par la date ajoutée*/
$stmt = $pdo->prepare('SELECT * FROM produits ORDER BY date_ajou DESC LIMIT ?,?');
/* bindValue nous permettra d'utiliser des entiers dans la déclaration SQL, que nous devons utiliser pour LIMIT.*/
$stmt->bindValue(1, ($current_page - 1) * $nbr_produits_sur_chaque_page, PDO::PARAM_INT);
$stmt->bindValue(2, $nbr_produits_sur_chaque_page, PDO::PARAM_INT);
$stmt->execute();
/* récupérer les produits de la base de données et retourner le résultat sous la forme d'un tableau.*/
$produits = $stmt->fetchAll(PDO::FETCH_ASSOC);
La mise à jour de la variable $nbr_produits_sur_chaque_page limitera le nombre de produits à afficher sur chaque page.
Pour déterminer sur quelle page se trouve le client, nous pouvons utiliser une requête GET, dans l'URL cela ressemblera à index.php?page=produits&p=1 etc, et dans notre script PHP le paramètre p peut être récupéré avec la variable $_GET['p']. En supposant que la requête est valide, le code exécutera une requête qui récupérera les produits limités de notre base de données.
7.2. Obtenir le nombre total de produits
Ajouter au code ci-dessus le code:
Code PHP
// Obtenir le nombre total de produits
$total_produits = $pdo->query('SELECT * FROM produits')->rowCount();
?>
Le code ci-dessus permet d'obtenir le nombre total de produits dans notre table de produits. Le client pourra voir le nombre total de produits en haut de la page des produits.
7.3. Créer le modèle de produits
Ajouter après la balise de fermeture de PHP :
Code PHP
<?=template_header('produits')?>
<div class="produits content-wrapper">
<h1>produits</h1>
<p><?=$total_produits?> produits</p>
<div class="produits-wrapper"><table><tr>
<?php foreach ($produits as $produit): ?>
<td><a href="index.php?page=produit&id=<?=$produit['id']?>" class="produit"> <img src="imgs/<?=$produit['img']?>" width="200" height="200" alt="<?=$produit['nom']?>"><br>
<span class="nom"><?=$produit['nom']?></span><br>
<span class="price">
$<?=$produit['prix']?>
<?php if ($produit['prix_Réel'] > 0): ?>
<span class="prix_Réel">$<?=$produit['prix_Réel']?></span>
<?php endif; ?>
</span>
</a></td>
<?php endforeach; ?>
</tr></table>
</div>
<div class="buttons">
<?php if ($current_page > 1): ?>
<a href="index.php?page=produits&p=<?=$current_page-1?>"><i class="fas fa-angle-double-left"> </i> Prev</a>
<?php endif; ?>
<?php if ($total_produits > ($current_page * $nbr_produits_sur_chaque_page) - $nbr_produits_sur_chaque_page + count($produits)): ?>
<a href="index.php?page=produits&p=<?=$current_page+1?>">Next <i class="fas fa-angle-double-right"> </i></a>
<?php endif; ?>
</div>
</div>
<?=template_footer()?>
Vous vous souvenez des produits récemment ajoutés que nous avons créés pour la page d'accueil ? Nous utilisons essentiellement le même code, mais il est déterminé par la page des produits et la variable $nbr_produits_sur_chaque_page.
Les boutons Suivant et Précédent ne seront visibles pour l'utilisateur que si le nombre total de produits est supérieur à la variable $nbr_produits_sur_chaque_page.
Remarque : Nous exécutons des requêtes en utilisant des instructions préparées, ce qui permet d'éviter totalement les injections SQL. C'est une bonne pratique de préparer des instructions avec les requêtes GET et POST.
C'est à peu près tout ce que nous devons faire pour la page des produits, des fonctions supplémentaires telles que le tri des produits par catégorie ou prix... peuvent être ajoutées.
Et donc ce que je vous donne ici c’est le code basique que vous pouvez améliorer comme bon vous semble.
8. Créer la page produit.php
La page du produit affiche tous les détails d'un produit donné, déterminé par la variable ID de la requête GET.
Les clients peuvent voir le prix, l'image et la description du produit.
Le client pourra modifier la quantité et l’ajouter au panier en cliquant sur le bouton «Ajouter au panier».
8.1. Obtenir un produit de la base de données avec la requête GET
Editez le fichier produit.php et ajoutez le code:
Code PHP
<?php
// Vérifiez si le paramètre id est spécifié dans l'URL.
if (isset($_GET['id'])) {
// Pour éviter toute injection SQL, préparez l'instruction et exécutez-la.
$stmt = $pdo->prepare('SELECT * FROM produits WHERE id = ?');
$stmt->execute([$_GET['id']]);
/* Récupérer le produit de la base de données et retourner le résultat sous forme de tableau.*/
$produit = $stmt->fetch(PDO::FETCH_ASSOC);
/* Vérifiez si le produit existe (le tableau n'est pas vide)*/
if (!$produit) {
/*Erreur simple à afficher si l'id du produit n'existe pas (le tableau est vide)*/
exit('le produit n\'existe pas!');
}
} else {
// Erreur simple à afficher si l'id n'a pas été spécifié.
exit('le produit n\'existe pas!');
}
?>
Le code ci-dessus va vérifier si la variable id demandée (demande GET) existe. Si c'est le cas, le code ira chercher le produit dans la table des produits de notre base de données.
Si le produit n'existe pas dans la base de données, le code produira une simple erreur, la fonction exit() empêchera l'exécution du script et affichera l'erreur.
8.2. Créer la Template produit
Ajouter le code après la balise de fermeture de php :
Code PHP
<?=template_header('Produit')?>
<div class="produit content-wrapper">
<img src="imgs/<?=$produit['img']?>" width="500" height="500" alt="<?=$produit['nom']?>">
<div>
<h1 class="name"><?=$produit['nom']?></h1>
<span class="price"> $<?=$produit['prix']?>
<?php if ($produit['prix_Réel'] > 0): ?>
<span class="prix_Réel"> $<?=$produit['prix_Réel']?></span>
<?php endif; ?>
</span>
<form action="index.php?page=panier" method="post">
<input type="number" name="quantité" value="1" min="1" max="<?=$produit['quantité']?>" placeholder="Quantité" required>
<input type="hidden" name="produit_id" value="<?=$produit['id']?>"> <input type="submit" value="Ajouter au panier">
</form>
<div class="description">
<?=$produit['description']?>
</div>
</div></div>
<?=template_footer()?>
Dans cette partie du code nous avons:
Le modèle( template) que nous avons utilisé pour la page du produit.
Un formulaire est créé, l’attribut action est défini sur la page du panier (index.php?page=panier) et la méthode est définie sur post. La page du panier d'achat (panier.php) ajoutera le produit au panier.
Avec le champ quantité du formulaire, nous pouvons définir une valeur de la quantité voulue, par default cette valeur est fixée à la quantité du produit récupérée dans la page produit.php).
L'ID du produit est également ajouté au formulaire, afin que nous sachions quel produit le client a ajouté.
Il n'est pas nécessaire d'inclure le nom du produit, sa description, etc., car nous pouvons consulter ces données dans la page produit.php de notre base de données avec l'ID du produit.
9. Editer le fichier panier.php pour créer la page panier d’achat.
La page du panier d'achat est l'endroit où le client pourra voir la liste de ses produits ajoutés au panier d'achat. Il aura la possibilité de supprimer des produits et de mettre à jour les quantités..
9.1. Ajout d'un produit au Panier
Editer le fichier panier.php en y ajoutant le code:
Code PHP
<? php
/* Si l'utilisateur a cliqué sur le bouton "Ajouter au panier" sur la page du produit, nous pouvons vérifier les données du formulaire.*/
if (isset($_POST['produit_id'], $_POST['quantité']) && is_numeric($_POST['produit_id']) && is_numeric($_POST['quantité'])) {
/* Définissez les variables post afin que nous puissions les identifier facilement, assurez-vous également qu'elles sont entières.*/
$produit_id = (int)$_POST['produit_id'];
$quantité = (int)$_POST['quantité'];
/* Préparez l'instruction SQL, nous vérifions essentiellement si le produit existe dans notre base de données.*/
$stmt = $pdo->prepare('SELECT * FROM produits WHERE id = ?');
$stmt->execute([$_POST['produit_id']]);
/* Récupère le produit depuis la base de données et renvoie le résultat sous forme de tableau.*/
$produit = $stmt->fetch(PDO::FETCH_ASSOC);
// Vérifier si le produit existe (le tableau n'est pas vide)
if ($produit && $quantité > 0) {
/*Le produit existe dans la base de données, maintenant nous pouvons créer/mettre à jour la variable de session pour le panier.*/
if (isset($_SESSION['panier']) && is_array($_SESSION['panier'])) {
if (array_key_exists($produit_id, $_SESSION['panier'])) {
// Le produit existe dans le panier, il suffit de mettre à jour la quantité.
$_SESSION['panier'][$produit_id] += $quantité;
} else {
// Le produit n'est pas dans le panier, ajoutez-le
$_SESSION['panier'][$produit_id] = $quantité;
}
} else {
/* Il n'y a aucun produit dans le panier, ceci ajoutera le premier produit au panier.*/
$_SESSION['panier'] = array($produit_id => $quantité);
}
}
// Empêcher la resoumission des formulaires...
header('location: index.php?page=panier');
exit;
}
Dans le code ci-dessus, nous utilisons les variables de session PHP. Nous pouvons utiliser les sessions PHP pour mémoriser les produits du panier d'achat, par exemple, lorsqu'un client navigue vers une autre page etc., le panier d'achat contiendra toujours les produits précédemment ajoutés jusqu'à ce que la session expire.
Ce code va vérifier si un produit a été ajouté au panier. Si vous retournez au fichier produit.php, vous pouvez voir que nous avons créé un formulaire HTML. Nous vérifions les valeurs de ce formulaire, si le produit existe, nous procédons à la vérification du produit en le sélectionnant dans la table des produits de notre base de données. Nous ne voudrions pas que les clients manipulent le système et ajoutent des produits inexistants.
La variable de session panier sera un tableau de produits associé, et avec ce tableau, nous pouvons ajouter plusieurs produits au panier d'achat. La clé du tableau sera l'ID du produit et la valeur sera la quantité. Lorsqu’un produit existe déjà dans le panier, tout ce que nous avons à faire est de mettre à jour la quantité.
9.2. suprimer un produit du Panier
Ajouter aussi le code:
Code PHP
/* Retirez le produit du panier, vérifiez le paramètre "remove" de l'URL, c'est l'identifiant du produit, assurez-vous qu'il s'agit d'un numéro et vérifiez s'il est dans le panier.*/
if (isset($_GET['remove']) && is_numeric($_GET['remove']) && isset($_SESSION['panier']) && isset($_SESSION['panier'][$_GET['remove']])) {
// Remove the produit from the shopping panier
unset($_SESSION['panier'][$_GET['remove']]);
}
Sur la page du panier d'achat, le client aura la possibilité de retirer un produit du panier. Lorsque le bouton est cliqué, nous pouvons utiliser une requête GET pour déterminer le produit à retirer, par exemple, si nous avons un produit avec l'ID 1, l'URL suivante le retirera du panier d'achat:
http://localhost/panier/index.php?page=panier&remove=1
9.3. Mise à jour des quantités de produits
Ajouter au fichier panier.php le code:
Code PHP
/* Mettre à jour les quantités de produits dans le panier si l'utilisateur clique sur le bouton "Mettre à jour" sur la page du panier d'achat*/
if (isset($_POST['update']) && isset($_SESSION['panier'])) {
/* Boucle à travers les données postales afin de mettre à jour les quantités pour chaque produit du panier.*/
foreach ($_POST as $k => $v) {
if (strpos($k, 'quantité') !== false && is_numeric($v)) {
$id = str_replace('quantité-', '', $k);
$quantité = (int)$v;
// Effectuez toujours des contrôles et des validations
if (is_numeric($id) && isset($_SESSION['panier'][$id]) && $quantité > 0) {
// Mise à jour de la nouvelle quantité
$_SESSION['panier'][$id] = $quantité;
}
}
}
// Empêcher la re-soumission de formulaires...
header('location: index.php?page=panier');
exit;
}
Le code ci-dessus va parcourir les produits dans le panier d'achat et mettre à jour les quantités. Le client aura la possibilité de modifier les quantités sur la page du panier d'achat. En cliquant sur le bouton de mise à jour, c'est ainsi que le code saura quand mettre à jour les quantités en utilisant une requête POST.
9.4. Traitement du placement de la commande
Ajouter le code:
Code PHP
/* Diriger l'utilisateur vers la page de commande s'il clique sur le bouton Passer la commande, le panier ne doit pas être vide.*/
if (isset($_POST['placerCommade']) && isset($_SESSION['panier']) && !empty($_SESSION['panier'])) {
header('Location: index.php?page=placerCommade');
exit;
}
Cela redirigera l'utilisateur vers la page de passation de commande s'il clique sur le bouton Passer la commande.
9.5. Récupérer les produits dans le panier et les sélectionner dans la base de données
Ajouter le code:
Code PHP
/* Vérification de la variable de session pour les produits en panier*/
$produits_in_panier = isset($_SESSION['panier']) ? $_SESSION['panier'] : array();
$produits = array();
$subtotal = 0.00;
// S'il y a des produits dans le panier
if ($produits_in_panier) {
/* Il y a des produits dans le panier, nous devons donc sélectionner ces produits dans la base de données.*/
/* Mettre les produits du panier dans un tableau de chaîne de caractères avec point d'interrogation, nous avons besoin que l'instruction SQL inclue ( ?,?, ?,...etc).*/
$array_to_question_marks = implode(',', array_fill(0, count($produits_in_panier), '?'));
$stmt = $pdo->prepare('SELECT * FROM produits WHERE id IN (' . $array_to_question_marks . ')');
/* Nous avons uniquement besoin des clés du tableau, pas des valeurs, les clés sont les identifiants des produits. */
$stmt->execute(array_keys($produits_in_panier));
/* Récupérer les produits de la base de données et retourner le résultat sous la forme d'un tableau.*/
$produits = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Calculez le total partiel
foreach ($produits as $produit) {
$subtotal += (float)$produit['prix'] * (int)$produits_in_panier[$produit['id']];
}
}
?>
S'il y a des produits dans le panier, nous récupérons ces produits dans notre table de produits dans la base de données , avec le nom des colonnes suivantes : nom du produit, description, image et prix, car auparavant nous n'avons pas stocké ces informations dans notre variable de session.
Nous calculons également le sous-total en parcourant les produits et en multipliant le prix par la quantité.
9.6. Create Shopping Panier Template
Ajoutez après la balise de fermeture PHP le code :
Code PHP
<?= template_header('Panier')
?>
<div class="panier content-wrapper">
<h1>Panier d'achat</h1>
<form action="index.php?page=panier" method="post">
<table>
<thead>
<tr>
<td colspan="2">produit</td>
<td>prix</td>
<td>quantité</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<?php if (empty($produits)): ?>
<tr>
<td colspan="5" style="text-align:center;">Vous n'avez aucun produit ajouté dans votre panier</td>
</tr>
<?php else: ?>
<?php foreach ($produits as $produit): ?>
<tr>
<td class="img">
<a href="index.php?page=produit&id=<?=$produit['id']?>">
<img src="imgs/<?=$produit['img']?>" width="50" height="50" alt="<?=$produit['nom']?>">
</a>
</td>
<td><a href="index.php?page=produit&id=<?=$produit['id']?>"><?=$produit['nom']?></a>
<br>
<a href="index.php?page=panier&remove=<?=$produit['id']?>" class="remove"><i class="fas fa-trash"> </i>Supprimer </a></td>
<td class="prix">$<?=$produit['prix']?></td>
<td class="quantité"><input type="number" name="quantité-<?=$produit['id']?>" value="<?=$produits_in_panier[$produit['id']]?>" min="1" max="<?=$produit['quantité']?>" placeholder="quantité" required></td>
<td class="prix">$<?=$produit['prix']*$produits_in_panier[$produit['id']]?></td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
<div class="subtotal">
<span class="text">Subtotal</span>
<span class="prix">$<?=$subtotal?></span>
</div>
<div class="buttons">
<input type="submit" value="Mettre à jour" name="update">
<input type="submit" value="Passer la commande" name="placerCommade"> </div>
</form>
</div>
<?=template_footer()?>
C'est tout ce que nous devons faire pour la page du panier d'achat. Le client peut maintenant supprimer des produits et mettre à jour les quantités.
10. Editer le fichier ‘placerCommade.php’ pour créer de la page Passer une commande
Cette page permet au client de savoir qu'il a passé une commande. Le client doit avoir des produits dans son panier après avoir cliqué sur le bouton Passer la commande sur la page du panier..
10.1. Créer le modèle de passage de la commande
Modifier le fichier placerCommande.php et y ajouter le code:
Code PHP
<?=template_header( placerCommade') ?> <div class="placeorder content-wrapper"> <h1>Votre commande a été passée</h1> <p>Cher ..., </p> <p>Votre commande est prise en cosideration avec succès.</p> <p>Merci de faire vos achats sur ....! </p> <p>Nous vous contacterons par e-mail avec les détails de votre commande.</p> </div> <?=template_footer()?>
N'hésitez pas à modifier le code pour y apporter des améliorations.
Conclusion
Félicitations ! Vous avez réussi à créer un système de panier d'achat avec PHP et MySQL, que faire ensuite ?
Pensez à ajouter une page de paiement et à intégrer une méthode de paiement, telle que PayPal.
PayPal fournit sa propre API aux développeurs. Vous pouvez également consulter notre guide:
Comment intégrer système de payement PayPal avec PHP et MySQL.
N'oubliez pas qu'il ne s'agit que d'un système de panier de base à partir duquel vous pouvez travailler, nous ne prétendant nullement que c’est complet. C’est pourquoi ne nous vous recommandons pas de passer à la production avant d'avoir effectué un nombre raisonnable de modifications et d'ajouts, vous devrez ajouter votre propre gestion des erreurs, votre méthode de paiement et votre validation.
Si vous avez apprécié ce tutoriel et vous souhaitez nous soutenir, n'oubliez pas à le partager sur votre réseau social, cela nous aidera à créer plus de contenu au futur.
Retour à l'accueil du site
Par carabde 10 October 2021