Site Portfolio

Ma démarche pour ce projet repose sur une approche "Data-first", où l'organisation des informations prime sur l'esthétique.
Analyse et architecture de l'information : Ma première action consiste à lister l'ensemble des contenus nécessaires : projets (titres, descriptions, dates, catégories), compétences, parcours de formation et formulaire de contact. Pour modéliser les données d'une application Web (AC14.05), je vais créer un schéma logique des données. Par exemple, je dois définir comment un "Projet" est lié à des "Apprentissages Critiques" ou à des "Outils utilisés" (Adobe Suite, VS Code, etc.). Cette modélisation permet d'anticiper la structure de la base de données ou du système de gestion de contenu (CMS) que j'utiliserai.
Conception de l'interface (Figma) et de l'identité : Une fois la structure des données établie, je vais réaliser la charte graphique (logo, typographies, couleurs) et la maquette haute fidélité sur Figma. Cette étape visuelle est directement guidée par ma modélisation : chaque bloc sur Figma correspond à un type de donnée défini précédemment. Par exemple, la "carte projet" sur ma page d'accueil sera le reflet visuel de mon modèle de données "Projet".
Projection technique et évolutivité : En modélisant les données dès maintenant, je m'assure que mon portfolio pourra accueillir de nouveaux projets dans deux ans sans avoir à refaire toute la structure. Cette compétence de modélisation (AC14.05) est ce qui transforme un simple site "statique" en une véritable application web dynamique où le contenu est séparé de la mise en forme.

Commentaire pour ton évaluation :
Bien que le projet soit en cours, insiste sur le fait que l'AC14.05 est une étape de réflexion. Tu peux dire au jury : "Avant de dessiner, j'ai réfléchi à la manière dont mes projets allaient être stockés et organisés en catégories (Audiovisuel, Dev, Design), ce qui est le cœur de la modélisation de données."

Les fonctionnalités de la Partie Publique (Accessibles à tous)
Consultation des réalisations ("Traces") : C'est le cœur du site. Le visiteur (recruteur ou enseignant) peut lister, filtrer et afficher le détail de vos travaux (vidéos, codes, designs). Chaque fiche projet affiche dynamiquement son titre, sa description, sa date, le visuel associé, ainsi que l'argumentaire de compétence (l'Apprentissage Critique ou AC validé).
Espace de contact (Formulaire de contact) : Un formulaire standard permettant à un visiteur ou un recruteur de vous envoyer un message directement depuis le site. Il doit inclure des champs obligatoires (Nom, Adresse e-mail, Sujet, Message) avec une vérification de la validité des données saisies (côté client et côté serveur).
Téléchargement du CV : Un bouton ou un lien d'accès direct permettant de télécharger votre CV au format PDF.
Système d'inscription et de connexion (Authentification) : * Formulaire d'inscription : Permet aux enseignants (évaluateurs) de se créer un compte sur le site.
Formulaire de connexion : Permet à l'étudiant (administrateur) et aux enseignants de se connecter de façon sécurisée à leur espace respectif grâce à une session PHP.

2. Les fonctionnalités de l'Espace Membre (Authentifié - Rôle "Évaluateur")
Espace de dépôt de commentaires : Une fois connecté, l'enseignant évaluateur a le privilège de pouvoir laisser des commentaires sous vos différentes "traces" ou réalisations.
Consultation enrichie : L'enseignant peut voir l'intégralité de vos auto-évaluations et le suivi de vos compétences pour vous guider ou valider votre progression académique.

3. Les fonctionnalités du Back-Office (Authentifié - Rôle "Administrateur / Concepteur")
En tant que concepteur du site, vous disposez d'un contrôle total sur les données grâce à un système CRUD (Create, Read, Update, Delete) lié à votre base de données SQL :
Gestion des Traces (CRUD complet) :
Créer (Ajouter) : Un formulaire pour ajouter une nouvelle réalisation (titre, type de média, année de BUT, l'AC associé, le texte d'argumentation et l'upload du fichier/image).
Lire (Consulter) : Une vue en tableau ou en liste de toutes vos traces pour avoir un aperçu global de votre travail d'administration.
Mettre à jour (Modifier) : Un formulaire pour corriger un texte, changer une image ou modifier l'AC lié à un projet existant.
Supprimer : Un bouton pour retirer définitivement une trace devenue obsolète.
Gestion des Utilisateurs / Modération :
Validation des comptes : Pour éviter que n'importe qui s'inscrive comme enseignant, vous devez valider manuellement les comptes des évaluateurs avant qu'ils ne puissent commenter.
Modération des commentaires : Possibilité de lire, valider ou supprimer les commentaires déposés par les enseignants sous vos projets.

4. Fonctionnalités et Contraintes Techniques Transverses (Sous le capot)
Sécurité et Session : Gestion de la sécurité des formulaires (protection minimale contre les injections SQL grâce aux requêtes préparées en PHP, et contre les failles XSS). Protection des pages du Back-Office (si un utilisateur non connecté tente d'accéder à l'adresse du Back-Office, il est automatiquement redirigé vers la page de connexion).
Pagination et Tri : Si vous commencez à avoir beaucoup de réalisations, le site doit être capable d'organiser l'affichage (par exemple, afficher les traces par ordre chronologique ou les trier par compétence).
Zéro API tierce : Tout le système de traitement de données (tri, authentification, commentaires) doit être codé par vos soins en PHP/SQL natif, sans dépendre de modules ou d'API externes.


1. Les Technologies et Langages Utilisés (Le Stack Technique)
Dans cette sous-partie, vous devez lister les langages imposés par la SAÉ 2.03 et expliquer précisément à quoi sert chacun d'eux dans votre projet :
HTML5 (HyperText Markup Language) : C'est la structure sémantique de votre portfolio. Il sert à définir les éléments de vos pages (titres, paragraphes, formulaires, conteneurs des traces).
CSS3 & Framework (ex: Bootstrap) : CSS sert à la mise en forme (couleurs, polices, dispositions). L'utilisation d'un framework comme Bootstrap (si vous l'avez choisi) permet de créer un design professionnel, moderne et surtout responsive (adapté aux smartphones et tablettes).
JavaScript (Optionnel/Front-end) : Il est utilisé pour dynamiser l'expérience utilisateur côté client (par exemple, valider un formulaire de contact avant son envoi, créer des animations ou filtrer les traces de manière fluide).
PHP (Hypertext Preprocessor) : C'est le cœur logique (Back-end) de votre site. PHP s'exécute sur le serveur pour :
Sécuriser et traiter les formulaires (contact, inscription, connexion).
Gérer les sessions des utilisateurs (vérifier si la personne connectée est un évaluateur ou l'administrateur).
Faire le lien entre les pages HTML et la base de données.
SQL (Structured Query Language) : Le langage utilisé pour communiquer avec votre système de gestion de base de données (comme MySQL). Il permet d'effectuer les requêtes CRUD (ex: INSERT INTO pour ajouter une trace, SELECT pour afficher les commentaires).

2. Le Type d’Hébergement
Un site web ne peut pas rester uniquement sur votre ordinateur local (localhost). Vous devez expliquer où et comment il est rendu accessible sur Internet.
Le serveur web : Vous devez mentionner l'hébergeur utilisé (souvent l'hébergement universitaire fourni par l'IUT, ou un hébergeur gratuit/payant type Alwaysdata, OVH, Hostinger).
Fonctionnement : Expliquez que les fichiers PHP/HTML/CSS sont transférés sur ce serveur distant via le protocole FTP (avec un logiciel comme FileZilla). L'hébergeur fournit également un serveur de base de données (généralement accessible via phpMyAdmin) pour stocker vos tables SQL en ligne.

3. Le Modèle Conceptuel de Données (MCD) : Entités et Associations
Le MCD est un schéma graphique qui formalise la structure de votre base de données avant de créer les tables. Il est indispensable pour montrer aux correcteurs que vous avez réfléchi à l'organisation de vos données.
Les Entités (Les objets du site) : Ce sont les blocs principaux qui contiennent des informations (les attributs). Pour votre projet, vous avez généralement 3 entités majeures :
UTILISATEUR (Attributs : id_user, login, mot_de_passe, role, est_valide)
TRACE / REALISATION (Attributs : id_trace, titre, description, date_creation, type_media, argumentaire_ac)
COMMENTAIRE (Attributs : id_commentaire, texte, date_publication)
Les Associations (Les verbes/liens entre les entités) : Elles expliquent comment les entités interagissent entre elles, accompagnées des cardinalités (les chiffres 1,1, 0,N, etc.).
Exemple 1 : Un Utilisateur (enseignant) peut Écrire de 0 à N (plusieurs) Commentaires. Un Commentaire est écrit par 1,1 (un et un seul) Utilisateur.
Exemple 2 : Une Trace peut Recevoir de 0 à N Commentaires. Un Commentaire est lié à 1,1 (une seule) Trace.

4. Le Schéma Relationnel de Données (MLD ou Schéma Relationnel)
Le schéma relationnel est la traduction textuelle ou graphique du MCD. C'est l'étape juste avant l'écriture des tables en SQL. C’est ici qu’apparaissent les notions de Clés Primaires (CP) et Clés Étrangères (CE).
En gros, les associations du MCD se transforment en liens physiques. Voici à quoi devrait ressembler votre schéma relationnel :
Utilisateur (id_user, login, mot_de_passe, role, est_valide)
Trace (id_trace, titre, description, date_creation, type_media, argumentaire_ac)
Commentaire (id_commentaire, texte, date_publication, #id_user, #id_trace)
Note : Dans la table Commentaire, id_user et id_trace (précédés d'un #) deviennent des clés étrangères. Elles permettent de savoir quel utilisateur a écrit ce commentaire spécifique, et sous quelle réalisation il l'a posté.