- 🟣 E-commerce Boutique Exam DWWM-2024 🟣
- ✅ E-commerce Boutique Exam DWWM 2024 ✅
- ✔ Présentation du projet
- ✔ Ressources
- ✔ Accès au Site
- ✔ Technologies Utilisées:
- ✔ Demarage le projet (!)
- ✔ Front-end:
- ✔ Back-end:
- ✔ Payement
- ✔ Principaux Problèmes Rencontrés
- ✔ Prochaines étapes
- ✔ Contributions
- Remerciements
Le projet Boutique E-commerce-2024 est une application web pour la vente de produits festifs pour le Nouvel An. Son objectif est de répondre aux besoins des professionnels du développement et de divers domaines, en leur permettant de présenter leurs travaux et de découvrir d'autres projets. “Boutique du Nouvel An”, cette boutique en ligne présente un concept innovant où le site reste fermé pendant l’année, avec un compte à rebours jusqu’à l’ouverture 7 jours avant le Nouvel An. Ce projet a nécessité l’utilisation de plusieurs compétences techniques :
• Structurer et styliser les pages avec HTML et CSS. • Gérer le compte à rebours et les interactions utilisateur dynamiques avec JavaScript. • Développer la logique serveur et la gestion des données backend avec PHP. • Utiliser SQL pour la gestion des produits et des utilisateurs. • Concevoir des maquettes et interfaces utilisateur avec Figma.
La boutique offre des fonctionnalités complètes pour les utilisateurs et les administrateurs, incluant l’inscription, l’authentification, la gestion des utilisateurs et des produits, ainsi qu’un système de paiement sécurisé via Stripe.
Fonctionnalités du site:
Pour les utilisateurs: Enregistrement de nouveaux utilisateurs : Permet aux nouveaux utilisateurs de créer un compte sur le site. Connexion des utilisateurs existants : Permet aux utilisateurs déjà enregistrés de se connecter à leur compte. Sélection de produits : Une fois connectés, les utilisateurs peuvent choisir des produits.
Pour les administrateurs: Création de nouveaux profils utilisateurs : Les administrateurs peuvent créer de nouveaux profils pour les utilisateurs. Édition des profils (admin/utilisateur) : Ajouter, modifier ou supprimer des informations. Changer le mot de passe. Création de nouveaux produits : Les administrateurs peuvent ajouter de nouveaux produits au catalogue. Édition des produits : Ajouter ou modifier le prix. Supprimer des produits. Visualisation de l'historique des achats : Voir l'historique de ses propres achats. Voir l'historique des achats des utilisateurs.
Pour les utilisateurs connectés: Édition du profil utilisateur : Ajouter, modifier ou supprimer des informations. Changer le mot de passe. Visualisation de l'historique des achats : Consulter l'historique de ses propres achats. Gestion du panier : Ajouter des produits au panier. Modifier la quantité des produits dans le panier. Supprimer des lignes de produits du panier.
Note : Si vous ne payez pas votre panier avant de vous déconnecter, celui-ci sera supprimé. Les paiements peuvent être effectués via le système de paiement Stripe.
Le site est disponible sur localhost. Vous pouvez y accéder via l'URL suivante :
-
La modeleFigma
- Maquetage Figma pour Desktop
- Maquetage Figma pour Ipad 768 * 981
- Maquetage Figma pour Iphone 14 Pro & 15 Pro 393 * 852
-
Organisation de projet: Trello
GitHub est une plateforme très utilisée en France par les développeurs, les équipes de développement et les entreprises pour la gestion et la collaboration sur des projets de développement logiciel.
- Collaboration : GitHub facilite la collaboration entre développeurs, même à distance.
- Communauté : Grande communauté de développeurs en France et dans le monde, permettant l'échange de connaissances et de bonnes pratiques.
- Gestion de projets open source : GitHub est la plateforme de référence pour de nombreux projets open source.
- Intégration avec d'autres outils : Compatible avec divers outils de développement et de gestion de projets.
- Projet à presenter (Iphone14, Lambordghini, Solar, achivements, README+sponsors, github-bot, telegrambot, symfonyExoAdvanced, Personal-Card, wp-Event-Marseille, Portfolio, php-Panier, Nissan calculateur)
- Code
git init,git add remote origin SSH,git add .,git checkout -b dev,git commit -m"comment",git push origin main.
ChatGPT pour les développeurs web: Un outil précieux.
ChatGPT peut être un outil extrêmement utile pour les développeurs web. Voici quelques raisons pour lesquelles il peut s'avérer précieux :
- Aide au codage et au débogage.
- Explication des concepts.
- Génération de code.
- Recommandations et meilleures pratiques.
- Documentation. Il peut aider à rédiger la documentation de votre code, facilitant ainsi la maintenance et l'évolution du projet.
- Résolution de problèmes et de bugs. ChatGPT peut proposer des solutions pour les bugs et les erreurs dans le code, aidant ainsi à comprendre où et pourquoi quelque chose ne fonctionne pas.
- Apprentissage de nouvelles technologies. Il peut servir de ressource éducative en fournissant des informations sur de nouvelles bibliothèques, frameworks et outils, aidant ainsi à rester à jour avec les dernières tendances en développement web.
- Amélioration des performances. ChatGPT peut suggérer des moyens d'optimiser le code et d'améliorer les performances des applications web.
Le PHP procédural est un style de programmation qui se concentre sur l'exécution d'une séquence de commandes ou de procédures. Contrairement à la programmation orientée objet (POO), l'approche procédurale se base sur des fonctions et un flux logique d'exécution du code.
Avantages du PHP procédural: Simplicité : Plus facile à comprendre et à utiliser pour les débutants. Le code est généralement linéaire et séquentiel, ce qui en simplifie la lecture et la compréhension.
Rapidité de développement :
Le code procédural peut être écrit et déployé rapidement.
Bien adapté aux petits projets simples.
Utilisation minimale de la mémoire :
Pas besoin de créer des objets, ce qui réduit la charge mémoire.
Débogage et test simplifiés :
Les procédures et les fonctions peuvent être facilement testées individuellement.
Le débogage est plus simple, car le code s'exécute de manière séquentielle.
Inconvénients du PHP procédural: Complexité de gestion des grands projets : Avec l'augmentation de la taille du projet, le code devient difficile à gérer et à maintenir. Difficile de suivre les dépendances et les interactions entre les fonctions.
Répétition de code :
Le code procédural présente souvent des duplications, car il n'est pas possible d'utiliser l'héritage et le polymorphisme comme en POO.
Manque de flexibilité :
Il est plus difficile d'adapter et d'étendre le code sans réécrire des parties significatives du programme.
Moins de possibilités de réutilisation du code :
Les objets et les classes permettent de mieux structurer et réutiliser le code dans différentes parties de l'application.
Conclusion:
Le PHP procédural peut être utile pour les petits projets où la rapidité de développement et la simplicité du code sont essentielles. Il est facile à comprendre et convient aux débutants. Cependant, pour des projets plus importants, il est préférable d'utiliser une approche orientée objet, qui offre une meilleure structure de code, une réutilisation accrue et une maintenance facilitée.
La programmation orientée objet (POO) est un paradigme de programmation basé sur le concept d'« objets », qui peuvent contenir des données et du code : les données sous forme de champs (souvent appelés attributs ou propriétés) et le code sous forme de procédures (souvent appelées méthodes). Les principes fondamentaux de la POO incluent l'encapsulation, l'héritage et le polymorphisme. Principes Fondamentaux de la POO.
Encapsulation :
Description : L'encapsulation consiste à regrouper les données (attributs) et les méthodes qui manipulent ces données en une seule entité (classe).
Avantages : Masquage de l'implémentation interne de l'objet, protection des données contre une utilisation incorrecte.
Héritage :
Description : L'héritage permet de créer de nouvelles classes à partir de classes existantes en héritant de leurs propriétés et méthodes.
Avantages : Réutilisation du code, simplification de la structure des programmes.
Polymorphisme :
Description : Le polymorphisme est la capacité des objets de différentes classes à traiter des messages du même type de manière différente.
Avantages : Simplification de la hiérarchie des classes, flexibilité et extensibilité du code.
Abstraction :
Description : L'abstraction consiste à extraire les caractéristiques communes des objets tout en masquant les détails de l'implémentation.
Avantages : Simplification de la compréhension des systèmes complexes, amélioration de la lisibilité et de la maintenance du code.
MVC est un modèle architectural qui organise le code de manière à séparer les données (Modèle), l'interface utilisateur (Vue) et la logique de l'application (Contrôleur). MVC est généralement utilisé dans la programmation orientée objet, mais peut être adapté au style procédural.
Conclusion: CRUD : opérations sur les données. PDO : outil pour travailler avec les bases de données. MVC : modèle architectural pour organiser le code. PHP procédural : style de programmation se concentrant sur la séquence de procédures et de fonctions.
Structure du code :
Style procédural : Le code est organisé sous forme de séquence de fonctions.
POO : Le code est organisé sous forme de classes et d'objets.
Réutilisation du code :
Style procédural : La réutilisation du code est atteinte par l'appel de fonctions.
POO : La réutilisation du code est atteinte par l'héritage et le polymorphisme.
Maintenabilité :
Style procédural : Peut devenir complexe pour les grands projets, car les dépendances entre les fonctions peuvent devenir confuses.
POO : Plus facile à maintenir et à étendre grâce à une structure claire et à l'encapsulation.
Sécurité :
Style procédural : Toutes les données sont accessibles globalement, ce qui peut entraîner des erreurs.
POO : Les données sont encapsulées dans des objets, ce qui améliore la sécurité.
La POO offre des outils puissants pour organiser, gérer et étendre le code. Elle est particulièrement utile pour les grands projets où il est important de maintenir une structure, une sécurité et une réutilisation du code. Le style procédural, bien que plus simple pour les petites tâches, peut devenir encombrant et complexe dans les grands projets. Chacun de ces concepts et outils a ses propres caractéristiques et domaines d'application. Le choix entre eux dépend des exigences spécifiques du projet et des préférences du développeur.
Terminal + code
- Langage de Programmation: [HTML] [CSS] [JavaScript]
Description.
Description.
Description.
- Framework: Bootstrap 5.3.3
Ajouter le link [Bootstrap]
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">dansindex.php.
-
Compatibilité entre navigateurs 🌐: Assure-toi que ton site s'affiche correctement sur tous les navigateurs populaires (Chrome, Firefox, Safari, Edge).
-
Validité selon les standards ✅ Le code doit être propre et valide : Utilise des validateurs HTML et CSS (par exemple, W3C Markup Validation Service). Évite les balises et attributs obsolètes ou non pris en charge.
-
Erreurs dans la console 🔍: La console du navigateur doit être exempte d'erreurs :
Vérifie et corrige toutes les erreurs et avertissements. Utilise console.log pour le débogage, mais pense à les supprimer ou les commenter avant le déploiement.
-
Adaptabilité du site 📱💻: Le site doit s'afficher correctement sur tous les appareils : Utilise des media queries (@media). Vérifie le site sur différents appareils et résolutions. Envisage d'utiliser des frameworks pour le design adaptatif, comme Bootstrap ou Tailwind CSS.
-
Optimisation du site ⚡: La performance du site est cruciale : Optimise les images (compression sans perte de qualité jpg-webP). Minimise les fichiers CSS et JS. Charge les images et le contenu de manière paresseuse (lazy loading). Utiliser meta description pour SEO
<meta name="description" content="">Utilise des outils comme Google Lighthouse pour évaluer les performances. -
Attribut alt pour les images 🖼️ Remplis l'attribut alt pour toutes les images : C'est important pour l'accessibilité et le SEO. Décris l'image de manière claire et concise.
- Langage de Programmation: [PHP ]
- Base de Données: [MySQL]
- MAMP [Macintosh,Apache,MySQL,PHP]
- PhpMyAdmin: [PhpMyAdmin] Avantages de MAMP: Facilité d'installation : En quelques clics, MAMP est installé et prêt à être utilisé, ce qui est parfait pour les débutants. Développement local : Travailler localement signifie que vous n'avez pas besoin d'être connecté à Internet pour développer et tester vos sites web. Sécurité : Vos projets restent sur votre ordinateur jusqu'à ce que vous décidiez de les mettre en ligne, réduisant ainsi les risques de sécurité pendant le développement. Polyvalence : En plus de PHP, MAMP supporte également d'autres langages comme Python, Perl et Ruby.
CRUD est une conception des opérations sur les données dans une base de données. Elle peut être réalisée à la fois dans un style procédural et dans un style orienté objet. CRUD est un acronyme qui désigne les quatre opérations principales effectuées sur les données dans une base de données :
Create: Ajout de nouvelles entrées dans la base de données.
Read: Lecture des données à partir de la base de données.
Update: Mise à jour des entrées existantes dans la base de données.
Delete: Suppression des entrées de la base de données.
Discription (ex Stripe)
Dans cette section, je souligne certains défis auxquels j'ai été confronté lors du développement du projet. Ce sont des points qui nécessitent une attention et des efforts supplémentaires pour améliorer la qualité et l'efficacité du projet.
-
**Problème 1 : ... **
- Context: ... .
- Impact: J'ai perdu plusieurs temps avant que ... .
- Solutions possibles: Choisir quelques ... pour l... . Si la ... est une question de principe, alors prévoir plus de temps pour ... .
-
**Problème 2: ... **
- Context: ... .
- Impact: ... .
- Solutions possibles: ... .
Étant donné qu'il s'agit d'un projet relativement court, j'ai envisagé quelques implémentations possibles pour l'avenir.
Amélioration 1: Ajouter plus l'interactivité dans le site
- Context: Amélioration du calculateur de ..., ... .
- Objectif: Améliorer le calculateur de ... en intégrant des fonctionnalités avancées telles que le calcul ... .
- Plan d'action: 1. Effectuer une analyse approfondie des besoins des ... .
- Concevoir et mettre en œuvre une interface conviviale et intuitive pour ... .
- Intégrer des données ... .
- Effectuer des tests utilisateurs pour évaluer ... .
- Continuer à mettre à jour ... .
Si vous êtes intéressé à aborder l'un des problèmes mentionnés ou à contribuer avec des idées pour les prochaines étapes, vous pouvez me contacter via les liens ci-dessous.
Je tiens à exprimer ma sincère gratitude envers Pierre Danaës, dont la disponibilité constante et la précision ont grandement contribué à la réalisation de ce projet. Son aide précieuse a transformé cette expérience en une aventure épique.
