Contexte
Pour ce projet solo, nous devions concevoir un site web lié à une base de données (BDD) permettant des interactions simples à la fois avec la base de données et avec les composants des pages en 2 semaines.
Contraintes
Base de données
↳ Au minimum 3 tables et 2 relations
↳ Lié au contenu du site et ne concerne pas la gestion des utilisateurs
↳ Manipulation de la BDD (modification, suppression et création de données)
↳ Au minimum 1 requête avec une jointure
Site et traitement des données
↳ Plusieurs pages (HTML / PHP)
↳ Affichage d’informations récupérées dans la BDD
↳ Page avec formulaire pour ajouter, supprimer ou modifier des données de la BDD
↳ Au minimum 1 requête avec une jointure
JavaScript
↳ Pas le droit aux plugins et librairies
↳ Bonne documentation des fonctions
↳ Au minimum 3 interactions JS avec plusieurs difficultés
Style
↳ Organisation des feuilles de style
Hébergement
↳ Site disponible en ligne
Choix techniques & compétences utilisés
→ Utilisation de l’IDE Visual Studio Code
→ Utilisation de Xampp pour pouvoir faire tourner le site en local
→ Création de dossier pour chaque itération afin de les tester indépendamment pour voir si elle fonctionnait correctement et donc pouvoir savoir s’il y avait des erreurs.
→ Utilisation d’un débogueur avec points d’arrêt
→ Choix d’un autre hébergeur que celui proposé par l’IUT car plante trop souvent
Processus de création
Le sujet du site
↳ Site de vente avec un système de panier, mais sans pouvoir payer (pas assez sécurisé) ou un système de favori. Mais j’ai vite abandonné cette idée, car je ne pensais pas pouvoir la réaliser en temps et en heure. Je suis donc passée sur un site vitrine, mais en affichant tout de même le prix et la taille disponible, pour peut-être plus tard essayer de le passer en site de vente.
↳ Liste des informations présente sur le site
↳ Réflexion sur la maquette / wireframe pour l’organisation des pages et des données
La bdd
↳ Création du MCD puis du MLD
↳ Codage de la BDD en SQL
↳ Ajout des données avec aide de ChatGPT pour la génération de certains textes
Création du squelette du site
↳ Ajout des pages du site
↳ Ajout des éléments les plus important des pages (titres + header et footer dans des fichiers séparés)
↳ Ajout et création de requête SQL afin de récupérer les données souhaitées
↳ Utilisation de boucle PHP pour afficher plusieurs fois les informations, mais pour des produits différents
La partie Admin
↳ Accès, avec identifiant et mot de passe (formulaire avec la méthode POST)
↳ Utilisation de formulaire pour choisir quel produit supprimer ou modifier
↳ Utilisation de formulaire pour ajouter un produit avec redirection vers une autre page afin d’ajouter les collections et tailles du produit
↳ Utilisations de requête SQL afin de supprimer, modifier le produit sélectionné ou de créer le produit avec les informations
Les Interactions JavaScript
↳ Bouton jour/nuit dans le header (niveau facile)
↳ Bouton impression dans la page produit.php (niveau facile)
↳ Bouton retour vers le haut de la page (niveau facile)
↳ Carrousel d’image dans la page d’accueil (niveau avancé)
↳ Vérification du formulaire de connexion vers la page admin avec fenêtre pop-up (niveau facile ou intermédiaire)
↳ Fenêtres pop-ups personnalisés avec communication entre les fenêtres dans la page contact.php (niveau avancé)
↳ Rajout des itérations dans la page du site une fois fonctionnelles
Le Style du site
↳ Finalisation de la maquette/wirefram avec les bonnes couleurs et typographie choisie pour le site
↳ Création de 3 fichiers CSS, un pour le thème “dark”, un plus général et un pour les pop-ups
↳ Ajout des images de fond et des polices (différente entre les titres et le reste du texte)
↳ Personnalisation du header et footer avec logo qui tourne, animation d’agrandissement des boutons du menu et du bouton jour/nuit au passage de la souris avec un effet néon autour des boutons (utilisation du :hover)
↳ Effet “néon” utiliser en clignotement sur les titres du site et au passage de la souris sur les différents produits proposés sur le site (se voit moins en mode “jour”)
↳ Utilisation de “display flex” et de @media afin d’avoir un site disponible sur tous les supports même si sur Ipad il y a quelques petits soucis
Difficultés
→ Trouver un hébergeur gratuit
→ Trop d’idée, pas assez de temps ou manque de compétence
→ Des erreurs signalées au mauvais endroit donc compliquées à trouver
→ Modification des tailles et collections de produits trop compliqué avec conseil de rester juste sur l’ajout
→ Perte de temps à cause d’un point-virgule (demande d’aide à ChatGPT, car l’erreur ne donnait pas la bonne ligne qui posait problème.)
Résultats
Le site n’est plus en ligne car l’hébergeur à fermé, voici une petite vidéo du rendu du site