Anon — Mini eCommerce en PHP (Panier avec sessions)

Anon est une mini-boutique en ligne qui permet de parcourir des produits, de les ajouter à un panier et de consulter/supprimer les articles du panier. Le projet est volontairement simple pour l’apprentissage: PHP (procédural) + MySQL, avec HTML/CSS pour l’interface.

Sommaire 📚

• Fonctionnalités
• Aperçu visuel
• Stack technique
• Prérequis
• Installation
• Configuration
• Utilisation
• Structure du projet
• Base de données
• Flux du panier
• Routes et pages
• Scripts et assets
• FAQ
• Dépannage
• Sécurité & bonnes pratiques
• Feuille de route
• Auteur

Fonctionnalités ✨

• 🗂️ Affichage d’un catalogue de produits depuis MySQL
• ➕ Ajout d’un produit au panier via la session utilisateur
• 🧮 Visualisation du panier, quantités et total
• 🗑️ Suppression d’un article du panier
• 📱 Design responsive (template CSS inclus)

Aperçu visuel 🖼️

Le dépôt inclut une capture d’écran image.png. Vous pouvez également ouvrir le projet en local et visiter la page d’accueil pour un aperçu dynamique.

Stack technique 🧰

• Backend: PHP ≥ 7.3 (sessions, mysqli)
• Base de données: MySQL / MariaDB
• Frontend: HTML5, CSS (fichiers assets/css), Google Fonts, Ionicons

Prérequis ✅

• Un environnement AMP (Apache, MySQL, PHP) via XAMPP, WAMP, MAMP ou LAMP
• Accès à phpMyAdmin (optionnel mais pratique)

Installation 🛠️

1. Installez un serveur local:

   • WAMP: https://www.wampserver.com/
   • XAMPP: https://www.apachefriends.org/index.html
   • MAMP: https://www.mamp.info/en/

2. Placez le dossier du projet dans le répertoire web:

   • Windows (XAMPP): C:\xampp\htdocs\Anon
   • Windows (WAMP): C:\wamp\www\Anon
   • Linux (LAMP): /var/www/html/Anon

3. Base de données:

   • Démarrez MySQL et ouvrez phpMyAdmin
   • Créez une base nommée anon
   • Importez le fichier Anon.sql (fourni à la racine)

Configuration ⚙️

Modifiez la connexion MySQL si besoin dans con_dbb.php:

<?php
$con = mysqli_connect("localhost", "root", "", "anon");
if (!$con) {
  die('Erreur de connexion : ' . mysqli_connect_error());
}
?>

• localhost: hôte MySQL (en local, gardez localhost)
• root / mot de passe: selon votre stack (XAMPP/WAMP en local: mot de passe souvent vide)
• anon: nom de la base importée

Utilisation 🚀

1. Démarrez Apache et MySQL depuis votre panneau de contrôle (XAMPP/WAMP)
2. Ouvrez votre navigateur sur:

http://localhost/Anon/index.php

• Ajoutez des produits via l’icône “sac” sur chaque carte produit
• Consultez le panier: http://localhost/Anon/panier.php

Structure du projet 🗂️

Panier_PHP/
  add.php            # Ajout d’un produit au panier (GET id)
  panier.php         # Affichage du panier + suppression d’articles (GET del)
  index.php          # Page d’accueil, liste des produits
  con_dbb.php        # Connexion MySQL
  Anon.sql           # Schéma + données exemples
  assets/
    css/             # Styles (template)
    images/          # Logos, produits
    js/              # Scripts front (ionicons, interactions)

Base de données 🗄️

• Base: anon
• Table attendue: products avec au minimum les colonnes:
  • id (INT, PK)
  • name (VARCHAR)
  • price (DECIMAL/INT en XOF)
  • img (VARCHAR) — image principale dans assets/images/products
  • img2 (VARCHAR) — image au survol

Le fichier Anon.sql contient la structure et des données de démonstration pour products.

Flux du panier 🧺

• Session PHP: la clé $_SESSION['anon'] contient un tableau associatif [productId => quantity]
• Ajout: add.php?id=XX
  • Vérifie l’existence du produit en BDD, puis incrémente la quantité
  • Redirige vers index.php
• Affichage/Suppression: panier.php
  • Affiche chaque article, quantité, et total
  • Suppression via panier.php?del=XX (retire l’article de la session)

Routes et pages 🧭

• index.php: liste les produits, bouton d’ajout au panier
• add.php?id=ID: action GET pour ajouter un produit
• panier.php: récapitulatif du panier, suppression d’articles

Scripts et assets 🎨

• Styles: assets/css/style-prefix.css, assets/css/style.css
• Images produits: assets/images/products/*.jpg
• Icônes: Ionicons (CDN)
• Script front: assets/js/script.js

FAQ ❓

• “Je ne vois aucun produit sur la page d’accueil”

  • Assurez-vous d’avoir importé Anon.sql et d’avoir des lignes dans products
  • Vérifiez les chemins d’images img/img2 pointant vers assets/images/products

• “Le total affiche 0”

  • Ajoutez au moins un produit via le bouton “sac”
  • Vérifiez que les sessions PHP sont actives et non bloquées par votre navigateur

Dépannage 🧯

• Erreur de connexion MySQL: vérifiez con_dbb.php (hôte, utilisateur, mot de passe, base)
• Page blanche/erreur PHP: activez display_errors en local ou consultez les logs d’Apache
• Sessions qui ne se conservent pas: vérifiez que session_start() est bien appelé et que les cookies ne sont pas bloqués

Sécurité & bonnes pratiques 🔒

• Ce projet est pédagogique. Pour un usage réel, ajoutez:
  • Requêtes préparées (mysqli_stmt / PDO) pour éviter l’injection SQL
  • Filtrage/validation stricte des entrées (id, del via GET)
  • Protection CSRF pour les actions d’ajout/suppression
  • Gestion d’authentification utilisateur si besoin

Feuille de route 🗺️

• Quantité modifiable directement depuis panier.php
• Message de confirmation/toast à l’ajout
• Recherche produit côté serveur
• Passage de commande (checkout) simulé

Auteur ✍️

• Auteur: 𝕹𝖎𝖓_𝕾𝖍𝖎𝖓𝖔𝖇𝖎🥷🏾
• GitHub: @Nin-Shinobi
• Repository: https://github.com/Nin-Shinobi/Panier_PHP