<\/p>\n\n\n\n
La cr\u00e9ation d’un backoffice pour un portfolio est un exercice passionnant qui permet de mettre en pratique les fondamentaux du d\u00e9veloppement web avec PHP. Ce projet, \u00e9tal\u00e9 sur trois s\u00e9ances, m’a permis d’explorer diff\u00e9rentes facettes de la programmation c\u00f4t\u00e9 serveur, depuis la gestion des formulaires jusqu’\u00e0 l’interaction avec une base de donn\u00e9es MySQL. Voici comment j’ai abord\u00e9 ce d\u00e9fi et les solutions que j’ai impl\u00e9ment\u00e9es.<\/p>\n\n\n\n
Premi\u00e8re Phase : Structuration des Formulaires<\/strong><\/p>\n\n\n\n Le travail a commenc\u00e9 par la conception de l’interface d’accueil du backoffice. J’ai cr\u00e9\u00e9 un formulaire principal offrant trois options : afficher les r\u00e9alisations existantes, en ajouter de nouvelles ou supprimer des entr\u00e9es. Cette premi\u00e8re \u00e9tape \u00e9tait cruciale pour \u00e9tablir l’architecture de base du syst\u00e8me.<\/p>\n\n\n\n Lorsque l’utilisateur s\u00e9lectionne l’option d’ajout, un second formulaire plus d\u00e9taill\u00e9 appara\u00eet. Celui-ci collecte toutes les informations n\u00e9cessaires pour d\u00e9crire une r\u00e9alisation : titre, ann\u00e9e, mati\u00e8re, description et image. J’ai pris soin de valider chaque champ, notamment en limitant l’ann\u00e9e \u00e0 quatre caract\u00e8res pour garantir la coh\u00e9rence des donn\u00e9es.<\/p>\n\n\n\n Gestion des Donn\u00e9es Sans Base de Donn\u00e9es<\/strong><\/p>\n\n\n\n Avant de passer \u00e0 la persistance des donn\u00e9es, j’ai exp\u00e9riment\u00e9 avec des tableaux PHP pour simuler le stockage des r\u00e9alisations. Bien que cette approche soit limit\u00e9e (les donn\u00e9es \u00e9tant perdues \u00e0 chaque actualisation de la page), elle m’a permis de travailler sur la logique d’affichage et de manipulation des donn\u00e9es.<\/p>\n\n\n\n J’ai impl\u00e9ment\u00e9 un syst\u00e8me d’affichage sous forme de tableau HTML, o\u00f9 chaque r\u00e9alisation occupe une ligne avec ses diff\u00e9rentes caract\u00e9ristiques. Pour les images, j’ai d’abord affich\u00e9 simplement le nom du fichier avant d’int\u00e9grer la balise <img> pour un rendu visuel plus immersif.<\/p>\n\n\n\n Int\u00e9gration de la Base de Donn\u00e9es<\/strong><\/p>\n\n\n\n La v\u00e9ritable puissance du syst\u00e8me est venue avec l’int\u00e9gration de MySQL. J’ai cr\u00e9\u00e9 une table portfolio avec des champs adapt\u00e9s : id auto-incr\u00e9ment\u00e9, titre, ann\u00e9e, mati\u00e8re, description et nom de l’image. La connexion \u00e0 la base est g\u00e9r\u00e9e par une fonction d\u00e9di\u00e9e connectDB() qui simplifie les interactions avec le serveur SQL.<\/p>\n\n\n\n Pour l’affichage, j’ai am\u00e9lior\u00e9 le tableau existant en y int\u00e9grant dynamiquement les donn\u00e9es de la base. Chaque r\u00e9alisation est maintenant persistante entre les sessions, et les images s’affichent directement dans le tableau avec un effet de zoom au survol pour une meilleure exp\u00e9rience utilisateur.<\/p>\n\n\n\n Upload d’Images<\/strong><\/p>\n\n\n\n Une des parties les plus techniques a \u00e9t\u00e9 la gestion de l’upload des images. J’ai impl\u00e9ment\u00e9 un syst\u00e8me qui v\u00e9rifie le type de fichier (uniquement JPG, JPEG, PNG et GIF autoris\u00e9s) avant de le d\u00e9placer dans le r\u00e9pertoire Images\/. Le nom de chaque fichier est pr\u00e9fix\u00e9 par un timestamp pour \u00e9viter les conflits.<\/p>\n\n\n\n La s\u00e9curit\u00e9 n’a pas \u00e9t\u00e9 n\u00e9glig\u00e9e : j’utilise mysqli_real_escape_string() pour \u00e9chapper les entr\u00e9es utilisateur et pr\u00e9venir les injections SQL. De plus, le champ ann\u00e9e est strictement valid\u00e9 pour ne pas d\u00e9passer quatre caract\u00e8res.<\/p>\n\n\n\n Interface Utilisateur et Exp\u00e9rience<\/strong><\/p>\n\n\n\n L’interface a \u00e9t\u00e9 soigneusement stylis\u00e9e avec CSS pour une exp\u00e9rience agr\u00e9able. J’ai opt\u00e9 pour un design moderne avec des d\u00e9grad\u00e9s de bleu, des ombres port\u00e9es et des animations subtiles au survol. Le tableau des r\u00e9alisations est responsive et met en valeur les donn\u00e9es gr\u00e2ce \u00e0 un code couleur et un alternance de lignes pour une meilleure lisibilit\u00e9.<\/p>\n\n\n\n Chaque action (ajout, suppression) est confirm\u00e9e par un message visuel avec un code couleur : vert pour les succ\u00e8s, rouge pour les erreurs. Ces retours imm\u00e9diats guident l’utilisateur dans son utilisation du backoffice.<\/p>\n\n\n\n D\u00e9fis Rencontr\u00e9s et Solutions<\/strong><\/p>\n\n\n\n Le principal d\u00e9fi a \u00e9t\u00e9 la gestion des \u00e9tats entre les diff\u00e9rents formulaires. J’ai r\u00e9solu cela en utilisant des variables cach\u00e9es et en structurant le code avec des blocs conditionnels bas\u00e9s sur la m\u00e9thode HTTP et les actions demand\u00e9es.<\/p>\n\n\n\n L’upload des images a \u00e9galement n\u00e9cessit\u00e9 plusieurs it\u00e9rations pour g\u00e9rer correctement les erreurs et valider les types de fichiers. J’ai finalement impl\u00e9ment\u00e9 un syst\u00e8me robuste qui v\u00e9rifie \u00e0 la fois le type MIME et l’extension du fichier.<\/p>\n\n\n\n Perspectives d’Am\u00e9lioration<\/strong><\/p>\n\n\n\n Bien que fonctionnel, ce backoffice pourrait \u00eatre enrichi de plusieurs mani\u00e8res. L’ajout d’un syst\u00e8me d’authentification s\u00e9curiserait les op\u00e9rations sensibles comme la suppression. Une fonctionnalit\u00e9 de recherche ou de filtrage par ann\u00e9e ou mati\u00e8re rendrait l’outil plus puissant pour g\u00e9rer un grand nombre de r\u00e9alisations.<\/p>\n\n\n\n En conclusion, ce projet m’a permis de consolider mes comp\u00e9tences en PHP et MySQL tout en d\u00e9veloppant une application concr\u00e8te et utile. La progression par \u00e9tapes, depuis les tableaux m\u00e9moire jusqu’\u00e0 la base de donn\u00e9es relationnelle, a \u00e9t\u00e9 particuli\u00e8rement instructive pour comprendre l’\u00e9volution naturelle des syst\u00e8mes d’information web.<\/p>\n","protected":false},"excerpt":{"rendered":" La cr\u00e9ation d’un backoffice pour un portfolio est un exercice passionnant qui permet de mettre en pratique les fondamentaux du d\u00e9veloppement web avec PHP. Ce projet, \u00e9tal\u00e9 sur trois s\u00e9ances, m’a permis d’explorer diff\u00e9rentes facettes de la programmation c\u00f4t\u00e9 serveur, depuis la gestion des formulaires jusqu’\u00e0 l’interaction avec une base de donn\u00e9es MySQL. Voici comment j’ai abord\u00e9 ce d\u00e9fi et les solutions que j’ai impl\u00e9ment\u00e9es. Premi\u00e8re Phase : Structuration des Formulaires Le travail a commenc\u00e9 par la conception de l’interface d’accueil du backoffice. J’ai cr\u00e9\u00e9 un formulaire principal offrant trois options : afficher les r\u00e9alisations existantes, en ajouter de nouvelles ou supprimer des entr\u00e9es. Cette premi\u00e8re \u00e9tape \u00e9tait cruciale pour \u00e9tablir l’architecture de base du syst\u00e8me. Lorsque l’utilisateur s\u00e9lectionne l’option d’ajout, un second formulaire plus d\u00e9taill\u00e9 appara\u00eet. Celui-ci collecte toutes les informations n\u00e9cessaires pour d\u00e9crire une r\u00e9alisation : titre, ann\u00e9e, mati\u00e8re, description et image. J’ai pris soin de valider chaque champ, notamment en limitant l’ann\u00e9e \u00e0 quatre caract\u00e8res pour garantir la coh\u00e9rence des donn\u00e9es. Gestion des Donn\u00e9es Sans Base de Donn\u00e9es Avant de passer \u00e0 la persistance des donn\u00e9es, j’ai exp\u00e9riment\u00e9 avec des tableaux PHP pour simuler le stockage des r\u00e9alisations. Bien que cette approche soit limit\u00e9e (les donn\u00e9es \u00e9tant perdues \u00e0 chaque actualisation de la page), elle m’a permis de travailler sur la logique d’affichage et de manipulation des donn\u00e9es. J’ai impl\u00e9ment\u00e9 un syst\u00e8me d’affichage sous forme de tableau HTML, o\u00f9 chaque r\u00e9alisation occupe une ligne avec ses diff\u00e9rentes caract\u00e9ristiques. Pour les images, j’ai d’abord affich\u00e9 simplement le nom du fichier avant d’int\u00e9grer la balise <img> pour un rendu visuel plus immersif. Int\u00e9gration de la Base de Donn\u00e9es La v\u00e9ritable puissance du syst\u00e8me est venue avec l’int\u00e9gration de MySQL. J’ai cr\u00e9\u00e9 une table portfolio avec des champs adapt\u00e9s : id auto-incr\u00e9ment\u00e9, titre, ann\u00e9e, mati\u00e8re, description et nom de l’image. La connexion \u00e0 la base est g\u00e9r\u00e9e par une fonction d\u00e9di\u00e9e connectDB() qui simplifie les interactions avec le serveur SQL. Pour l’affichage, j’ai am\u00e9lior\u00e9 le tableau existant en y int\u00e9grant dynamiquement les donn\u00e9es de la base. Chaque r\u00e9alisation est maintenant persistante entre les sessions, et les images s’affichent directement dans le tableau avec un effet de zoom au survol pour une meilleure exp\u00e9rience utilisateur. Upload d’Images Une des parties les plus techniques a \u00e9t\u00e9 la gestion de l’upload des images. J’ai impl\u00e9ment\u00e9 un syst\u00e8me qui v\u00e9rifie le type de fichier (uniquement JPG, JPEG, PNG et GIF autoris\u00e9s) avant de le d\u00e9placer dans le r\u00e9pertoire Images\/. Le nom de chaque fichier est pr\u00e9fix\u00e9 par un timestamp pour \u00e9viter les conflits. La s\u00e9curit\u00e9 n’a pas \u00e9t\u00e9 n\u00e9glig\u00e9e : j’utilise mysqli_real_escape_string() pour \u00e9chapper les entr\u00e9es utilisateur et pr\u00e9venir les injections SQL. De plus, le champ ann\u00e9e est strictement valid\u00e9 pour ne pas d\u00e9passer quatre caract\u00e8res. Interface Utilisateur et Exp\u00e9rience L’interface a \u00e9t\u00e9 soigneusement stylis\u00e9e avec CSS pour une exp\u00e9rience agr\u00e9able. J’ai opt\u00e9 pour un design moderne avec des d\u00e9grad\u00e9s de bleu, des ombres port\u00e9es et des animations subtiles au survol. Le tableau des r\u00e9alisations est responsive et met en valeur les donn\u00e9es gr\u00e2ce \u00e0 un code couleur et un alternance de lignes pour une meilleure lisibilit\u00e9. Chaque action (ajout, suppression) est confirm\u00e9e par un message visuel avec un code couleur : vert pour les succ\u00e8s, rouge pour les erreurs. Ces retours imm\u00e9diats guident l’utilisateur dans son utilisation du backoffice. D\u00e9fis Rencontr\u00e9s et Solutions Le principal d\u00e9fi a \u00e9t\u00e9 la gestion des \u00e9tats entre les diff\u00e9rents formulaires. J’ai r\u00e9solu cela en utilisant des variables cach\u00e9es et en structurant le code avec des blocs conditionnels bas\u00e9s sur la m\u00e9thode HTTP et les actions demand\u00e9es. L’upload des images a \u00e9galement n\u00e9cessit\u00e9 plusieurs it\u00e9rations pour g\u00e9rer correctement les erreurs et valider les types de fichiers. J’ai finalement impl\u00e9ment\u00e9 un syst\u00e8me robuste qui v\u00e9rifie \u00e0 la fois le type MIME et l’extension du fichier. Perspectives d’Am\u00e9lioration Bien que fonctionnel, ce backoffice pourrait \u00eatre enrichi de plusieurs mani\u00e8res. L’ajout d’un syst\u00e8me d’authentification s\u00e9curiserait les op\u00e9rations sensibles comme la suppression. Une fonctionnalit\u00e9 de recherche ou de filtrage par ann\u00e9e ou mati\u00e8re rendrait l’outil plus puissant pour g\u00e9rer un grand nombre de r\u00e9alisations. En conclusion, ce projet m’a permis de consolider mes comp\u00e9tences en PHP et MySQL tout en d\u00e9veloppant une application concr\u00e8te et utile. La progression par \u00e9tapes, depuis les tableaux m\u00e9moire jusqu’\u00e0 la base de donn\u00e9es relationnelle, a \u00e9t\u00e9 particuli\u00e8rement instructive pour comprendre l’\u00e9volution naturelle des syst\u00e8mes d’information web.<\/p>\n","protected":false},"author":1,"featured_media":1788,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpement-web"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/posts\/444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":2,"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":1787,"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/posts\/444\/revisions\/1787"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/media\/1788"}],"wp:attachment":[{"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portfolio.ilan.molia.mmi-velizy.fr\/wordpress-6.7.2-fr_FR\/wordpress\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}