Projet

Création de mon site portfolio

Dans le cadre de ma formation BTS SIO SISR, j’ai dû créer un portfolio.

Pour mon portfolio, j’ai choisi de créer un site web dynamique en PHP, sans utiliser de CMS déjà existant comme WordPress. L’objectif était d’avoir un site personnalisé, adapté à mon besoin, dans lequel je peux présenter mon parcours, mes projets, mes épreuves de BTS et mes différentes activités.

Le site est organisé avec une arborescence simple. Les fichiers principaux du site se trouvent dans le dossier www. On y retrouve les pages PHP visibles par l’utilisateur, comme la page de présentation, la page des projets, les pages liées aux épreuves E5 et E6, ainsi que les fichiers nécessaires au fonctionnement global du site.

L’arborescence est structurée de cette manière :

www/

├── assets/

│   ├── css/

│   └── js/

├── data/

│   ├── pages.json

│   ├── site.json

│   └── projects.json

├── uploads/

├── config.php

├── index.php

├── presentation.php

├── projets.php

├── projet.php

├── e5.php

├── e6.php

└── veille.php


Le dossier assets contient les fichiers liés à l’apparence et au comportement du site, comme les fichiers CSS et JavaScript. Le dossier uploads sert à stocker les images et les fichiers ajoutés depuis l’interface d’édition. Le dossier data contient les données du site.

Pour la gestion des données, j’ai fait le choix d’utiliser des fichiers JSON plutôt qu’une base de données SQL classique. Cela permet de stocker les contenus du site de manière légère, sans avoir besoin d’un serveur MySQL. Par exemple, les pages, les projets, les éléments de la marge et certains paramètres du site sont enregistrés dans des fichiers comme pages.json, site.json ou projects.json.

Ce fonctionnement permet de modifier le contenu du site directement depuis une interface d’administration, sans avoir besoin de modifier manuellement le code à chaque fois. Quand je modifie une page, le contenu est sauvegardé dans les fichiers JSON, puis réaffiché dynamiquement sur le site.

J’ai également mis en place un système d’édition pour pouvoir personnaliser les pages. Le site permet d’ajouter différents types de blocs, comme des blocs de texte, des images, des fichiers téléchargeables ou des sous-pages. Cela me permet de construire mes pages de manière plus flexible, au lieu d’avoir une seule grande zone de texte figée.


La marge du site est aussi personnalisable. Elle sert de menu de navigation et permet d’accéder aux différentes parties du portfolio. Certaines catégories peuvent contenir des sous-pages, qui peuvent être masquées ou affichées avec une flèche. Cela permet de mieux organiser les projets ou les différentes parties d’une épreuve.

Pour les projets et les sous-pages, j’ai ajouté une navigation précédent/suivant en bas de page. Cela permet de passer facilement d’une sous-page à une autre lorsqu’une catégorie contient plusieurs éléments. Cette fonctionnalité améliore la navigation et rend le site plus agréable à consulter.

J’ai aussi intégré un système de fichiers téléchargeables. Au lieu d’afficher directement le nom complet du fichier, le site peut afficher un bouton personnalisé, par exemple “Télécharger”. Cela permet d’avoir un rendu plus propre, surtout pour les documents liés aux épreuves ou aux projets.


Au niveau de la sécurité, j’ai prévu plusieurs protections. L’accès à l’interface d’administration est protégé par identifiant et mot de passe. Les fichiers envoyés sur le site sont contrôlés afin d’éviter les extensions dangereuses. Le dossier d’upload est aussi protégé pour éviter l’exécution de scripts non autorisés. Le but est de limiter les risques liés aux fichiers envoyés depuis l’interface d’édition.

Ce projet m’a permis de travailler plusieurs compétences importantes : la structuration d’un site web, l’utilisation de PHP, la manipulation de fichiers JSON, la gestion des formulaires, l’upload de fichiers, la sécurisation d’un espace administrateur et l’organisation d’un contenu dynamique.

L’objectif final était d’obtenir un portfolio personnel, modifiable facilement, et suffisamment flexible pour présenter mes projets, mes missions en entreprise, mes épreuves de BTS et mes différentes compétences.

Fichier à télécharger

Télécharger
Connexion