🛍️ Tech Store - E-Commerce avec PHP et MySQL

Site e-commerce complet avec frontend (HTML/CSS/JavaScript) et backend (PHP/MySQL) pour gérer les commandes des clients.

📋 Fonctionnalités

Frontend

• ✅ Page d'accueil avec slider de produits
• ✅ Pages de catégories (PC & Tablettes, Téléphones)
• ✅ Page de détail produit
• ✅ Formulaire de commande
• ✅ Page de contact
• ✅ Design responsive (mobile, tablette, desktop)
• ✅ Thème noir et rouge

Backend

• ✅ Sauvegarde des commandes dans MySQL
• ✅ Panneau d'administration pour voir les commandes
• ✅ Gestion des statuts de commande
• ✅ Statistiques (nombre de commandes, chiffre d'affaires)
• ✅ API REST pour les commandes

🗄️ Base de Données

Tables

• produits : Liste des produits disponibles
• commandes : Toutes les commandes des clients

Structure SQL

Voir le fichier database.sql pour la structure complète.

🚀 Installation Rapide

1. Prérequis

• XAMPP installé
• Navigateur web

2. Étapes

1. Copier les fichiers dans C:\xampp\htdocs\tech-store\

2. Démarrer XAMPP :

   • Ouvrir XAMPP Control Panel
   • Démarrer Apache et MySQL

3. Créer la base de données :

   • Aller à http://localhost/phpmyadmin
   • Onglet SQL
   • Copier-coller le contenu de database.sql
   • Cliquer sur Exécuter

4. Tester la connexion :

   • Aller à http://localhost/tech-store/test_connection.php
   • Vérifier que tout fonctionne

5. Accéder au site :

   • Site : http://localhost/tech-store/
   • Admin : http://localhost/tech-store/admin/orders.php

📁 Structure du Projet

tech-store/
├── index.html                  → Page d'accueil
├── product-detail.html         → Détail produit
├── pc_tablette.html            → Catégorie PC
├── telephones.html             → Catégorie Téléphones
├── contact.html                → Page contact
├── style.css                   → Styles
├── script.js                   → JavaScript
├── products-data.js            → Données produits
├── test_connection.php         → Test connexion BDD
├── database.sql                → Script SQL
├── INSTALLATION.md             → Guide d'installation détaillé
├── config/
│   └── database.php            → Configuration BDD
├── api/
│   ├── save_order.php          → API : Sauvegarder commande
│   ├── get_orders.php          → API : Récupérer commandes
│   └── update_order_status.php → API : Mettre à jour statut
└── admin/
    └── orders.php              → Panneau administration

🔌 API Endpoints

POST /api/save_order.php

Sauvegarde une nouvelle commande.

Body (JSON):

{
  "product_id": "iphone-15-pro",
  "product_name": "iPhone 15 Pro",
  "price": 13200,
  "quantity": 1,
  "name": "Nom Client",
  "phone": "+212 6XX XXX XXX",
  "email": "client@example.com",
  "city": "Casablanca",
  "address": "123 Rue Example",
  "notes": "Notes optionnelles"
}

GET /api/get_orders.php

Récupère toutes les commandes.

Paramètres optionnels:

• ?status=en_attente : Filtrer par statut

POST /api/update_order_status.php

Met à jour le statut d'une commande.

Body (JSON):

{
  "order_id": 1,
  "status": "confirmee"
}

📊 Panneau d'Administration

Accès : http://localhost/tech-store/admin/orders.php

Fonctionnalités :

• Vue d'ensemble des statistiques
• Liste de toutes les commandes
• Filtrage par statut
• Modification du statut des commandes
• Informations détaillées de chaque commande

🎨 Technologies Utilisées

• Frontend : HTML5, CSS3, JavaScript (ES6+)
• Backend : PHP 7.4+
• Base de données : MySQL 5.7+
• Serveur : Apache (XAMPP)

📝 Notes Importantes

1. Sécurité : Ce projet est pour développement/formation. Pour la production, ajoutez :

   • Validation côté serveur renforcée
   • Protection contre SQL Injection (déjà fait avec prepared statements)
   • Authentification pour l'admin
   • HTTPS

2. Configuration : Modifiez config/database.php selon votre configuration MySQL

3. Images : Placez vos images dans le dossier images/

🐛 Dépannage

Voir le fichier INSTALLATION.md pour le guide complet de dépannage.

📞 Support

Pour toute question, consultez :

• Le fichier INSTALLATION.md pour les instructions détaillées
• Les logs d'erreur Apache dans C:\xampp\apache\logs\error.log
• Les logs d'erreur PHP dans C:\xampp\php\logs\php_error_log

---

Développé avec ❤️ pour un projet e-commerce complet