Ajout de l'affichage des projets grâce à une requête SQL

functions/listProject.php

@@ -1,23 +1,77 @@
 <?php
-// On démarre une session au cas où le script soit exécuté directement par URL
-session_start();
 
+// Ajout de connexion a la bdd
+require_once('../functions/databaseConnection.php');
 
-// Fonction qui va permettre de lister les projets (le but de la fonction est que dans le futur il y aura toutes les fonctions par rapport à un seul thème dans un seul fichier)
+// Fonction qui va faire une requête SQL afin de collecter tous les projets
 function listeProjets() {
-    // On ajoute en dépendance la connexion à la base de donnée
-    require_once 'databaseConnection.php';
+    // Préparation de la variable
+    global $dbh;
 
-    // Préparation de la requête qui va lister les projets
-    $stmt = $dbh->prepare('SELECT * FROM projects');
-
-    // Execution de la requête
+    // Essayer
+    try {
+        // Requête SQL qui récupère titre, tags, description, image_url
+        $stmt = $dbh->prepare('SELECT title, tags, description, image_url FROM projects');
+        // Execution de la requête SQL
         $stmt->execute();
-    // On pourra même prévoir plus tard grâce à cette requête préparer d'ajouter des filtrages pour la liste (ex : En cours/Défjà fini etc...)
+        // Retourne toutes les données collectés dans un ARRAY
+        return $stmt->fetchAll(PDO::FETCH_ASSOC);
+    } catch (PDOException $e) { // En cas d'erreur 
+        die("Erreur de connexion à la base de donnée portfolio :".$e->getMessage());
+        return [];
+    }
+}
 
-    // On sauvegarde les données renvoyées
-    $donneerenvoyee = $stmt->fetch();
+// Fonction qui va afficher les projets
+function afficherProjets() {
+    // Récupération de la liste des projets
+    $projets = listeProjets();
 
-    // Puis on les renvoies
-    return $donneerenvoyee;
+    // Ajout de la class pour la liste des projets FUTUR CSS
+    echo '<div class="projects-list">';
+
+
+    // Pour chaque projet dans le ARRAY
+    foreach ($projets as $projet) {
+        // On récupère le titre, la description et l'image et le tableau avec les tags
+        $titre = htmlspecialchars($projet['title']);
+        $description = nl2br(htmlspecialchars($projet['description']));
+        $image = htmlspecialchars($projet['image_url']);
+        $tags = [];
+
+        // S'il y a des tags alors on les sépares grâce à la virgule que l'user à ajouté dans le champs (tags1,tags2,etcc...)
+        if (!empty($projet['tags'])) {
+            $tags = array_filter(array_map('trim', explode(',', $projet['tags'])));
+        }
+
+        echo '<article class="project-card">';
+
+        // Si la donnée avec l'image n'est pas null alors on l'affiche
+        if (!empty($image)) {
+            echo '<div class="project-banner">';
+            echo '<img src="' . $image . '" alt="Image du projet ' . $titre . '">';
+            echo '</div>';
+        }
+
+        // Ajout de la class project-content et du titre
+        echo '<div class="project-content">';
+        echo '<h2>' . $titre . '</h2>';
+
+        // Si les tags ne sont pas vides alors afficher
+        if (!empty($tags)) {
+            echo '<div class="project-tags">';
+            foreach ($tags as $tag) {
+                echo '<span class="tag">' . htmlspecialchars($tag) . '</span>';
+            }
+            echo '</div>';
+        }
+
+        // Ajout de la description et fin des classes 
+        echo '<p>' . $description . '</p>';
+        echo '</div>';
+
+        echo '</article>';
+    }
+
+    echo '</div>';
 }

pages/projects.php

@@ -16,7 +16,7 @@ if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') { ?>
 
     <!-- Formulaire de création de projet -->
     <div class="project-container">
-        <div class="project-card">
+        <div class="project-form-card">
             
             <div class="project-header">
                 <h2>Nouveau projet</h2>
@@ -50,9 +50,13 @@ if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin') { ?>
 // Affichages des projets
 ?>
 
-<p>Liste des projets</p>
+<p class="projects-title">Liste des projets</p>
 
 <?php
 
+require_once('../functions/listProject.php');
 
+
+// Appel de ma fonction dans Functions/listProject.php
+afficherProjets();
 ?>

styles/primary_css.css

@@ -120,7 +120,7 @@ nav a {
     padding: 40px 20px;
 }
 
-.project-card {
+.project-form-card {
     background-color: #111116; /* Fond très sombre comme sur l'image */
     border: 1px dashed #3a3a5e; /* Bordure pointillée */
     border-radius: 12px;
@@ -164,9 +164,9 @@ nav a {
 }
 
 /* Inputs reprenant ton style login */
-.project-card input[type="text"],
-.project-card input[type="url"],
-.project-card textarea {
+.project-form-card input[type="text"],
+.project-form-card input[type="url"],
+.project-form-card textarea {
     width: 100%;
     background-color: #1a1a24;
     border: 1px solid #2a2a3e;
@@ -210,3 +210,72 @@ nav a {
 .btn-submit:hover {
     background-color: #5a52e0;
 }
+
+.projects-title {
+    color: white;
+    font-size: 22px;
+    font-weight: bold;
+    margin: 0;
+    padding: 0 40px 20px 40px;
+}
+
+.projects-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 24px;
+    padding: 0 40px 40px 40px;
+}
+
+.projects-list .project-card {
+    background-color: #111116;
+    border: 1px solid #2a2a3e;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.projects-list .project-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
+}
+
+.project-banner img {
+    width: 100%;
+    height: 220px;
+    object-fit: cover;
+    display: block;
+}
+
+.project-content {
+    padding: 20px;
+}
+
+.project-content h2 {
+    margin: 0 0 12px;
+    font-size: 22px;
+    color: white;
+}
+
+.project-content p {
+    margin: 0;
+    color: #b8b8c7;
+    line-height: 1.6;
+}
+
+.project-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 16px;
+}
+
+.tag {
+    background-color: rgba(108, 99, 255, 0.15);
+    color: #8f88ff;
+    border: 1px solid rgba(108, 99, 255, 0.35);
+    padding: 6px 12px;
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: bold;
+}