Boucherie Agadir
Site web complet pour moderniser la présence en ligne de la boucherie.
Aperçu du projet
Ce projet a consisté à concevoir et développer un site web pour la Boucherie Agadir afin de simplifier le parcours client et faciliter la gestion quotidienne du commerce.
L'objectif principal était de permettre aux clients de consulter les produits, créer un compte, passer commande en ligne et choisir un retrait en boutique via un système de click & collect.
Contexte du stage
Dans le cadre de mon stage, j’ai été chargé de structurer une solution web complète pour digitaliser l’activité de la boucherie. Le besoin ne se limitait pas à une vitrine : il fallait proposer une expérience de commande simple pour les clients (compte utilisateur, panier, click & collect) tout en offrant au commerçant un espace d’administration clair pour gérer les produits, les comptes et les commandes, sans compétences techniques en développement.
Langages utilisés
Technologies mobilisées pour ce projet.
HTML5
CSS3
JavaScript
PHP
MySQL
Outils utilisés
Environnement et outils mobilisés pendant le projet.
Base de données (BDD)
Présentation du modèle de données et de son rôle dans le fonctionnement du site.
La structure BDD a été conçue pour centraliser les produits, les comptes clients et les commandes afin de rendre le suivi quotidien plus rapide, fiable et simple pour le commerçant.
Organisation des données
Le schéma relie les entités clés pour gérer le catalogue, les utilisateurs et le cycle de commande click & collect.
- → Gestion centralisée des produits et des stocks
- → Suivi des comptes clients et de l’historique des commandes
- → Mise à jour rapide des informations depuis l’espace admin
Schéma de la BDD
Page contact
Présentation de l’interface de contact client et de son implémentation.
Cette page a été conçue pour rendre la prise de contact rapide et claire : le client peut envoyer une demande facilement, et le commerçant reçoit des informations structurées pour traiter la demande plus efficacement.
Vue utilisateur
Interface visible par les clients pour envoyer un message ou une demande de renseignement.
Vue développement
Extrait du code utilisé pour structurer le formulaire, valider les champs et faciliter la maintenance.
FormSubmit utilisé pour l’envoi
Pour gérer l’envoi des messages sans développer de backend dédié, j’ai utilisé FormSubmit. Cet outil permet de transmettre les données du formulaire directement par email, avec une intégration simple en HTML.
- Configuration rapide de l’action du formulaire
- Réception des demandes de contact par email
- Solution légère, adaptée à un site vitrine
Formulaires de connexion et d’inscription
Présentation des écrans et de l’implémentation liés à l’authentification des clients.
Pour fluidifier l’expérience utilisateur, le site intègre un formulaire de connexion et un formulaire d’inscription permettant aux clients de créer leur compte, accéder à leur espace personnel et suivre leurs commandes.
Formulaire de connexion
Cette partie permet aux clients déjà inscrits de se connecter rapidement à leur espace personnel.
Formulaire d’inscription
Cette partie gère la création de compte client pour accéder aux fonctionnalités de commande et de suivi.
Fonctionnalités principales
- Catalogue produit consultable sur mobile et ordinateur
- Création de compte et connexion client
- Tunnel de commande avec option click & collect
- Espace administrateur pour gérer produits, clients et commandes
- Interface pensée pour une utilisation simple, sans coder