Add Admin.php & Api.php & Functionnal Planets DATABASE

2026-05-04 22:46:20 +02:00
parent bda9fbf7cb
commit dddc22d4a4
7 changed files with 260 additions and 23 deletions
@@ -0,0 +1,108 @@
+<?php
+session_start();
+
+$error = '';
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'login') {
+    if ($_POST['username'] === 'admin' && $_POST['password'] === 'admin') {
+        $_SESSION['admin_logged_in'] = true;
+        header('Location: admin.php');
+        exit;
+    } else {
+        $error = 'Identifiants incorrects.';
+    }
+}
+
+if (isset($_GET['logout'])) {
+    session_destroy();
+    header('Location: admin.php');
+    exit;
+}
+
+$host = 'localhost';
+$dbname = 'OpenPlanetsMaps';
+$db_user = 'admin';
+$db_pass = 'admin';
+
+$message = '';
+if (isset($_SESSION['admin_logged_in']) && $_SESSION['admin_logged_in'] === true && $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'add') {
+    try {
+        $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $db_user, $db_pass);
+        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+        
+        $planete = $_POST['planete'];
+        $nom = $_POST['nom'];
+        $date = $_POST['date'];
+        $url = $_POST['url'];
+        $description = $_POST['description'];
+        
+        $tablesAutorisees = [
+            'mercure' => 'MERCURY', 'venus' => 'VENUS', 'terre' => 'EARTH', 
+            'mars' => 'MARS', 'jupiter' => 'JUPITER', 'saturne' => 'SATURN', 
+            'uranus' => 'URANUS', 'neptune' => 'NEPTUNE'
+        ];
+        
+        if (array_key_exists($planete, $tablesAutorisees)) {
+            $nomTable = $tablesAutorisees[$planete];
+            $stmt = $pdo->prepare("INSERT INTO $nomTable (nom, date, url, description) VALUES (?, ?, ?, ?)");
+            $stmt->execute([$nom, $date, $url, $description]);
+            
+            $message = "<p style='color: #4ade80; text-align: center; margin-bottom: 1rem;'>Ligne ajoutée avec succès dans la table $nomTable !</p>";
+        }
+    } catch (PDOException $e) {
+        $message = "<p style='color: #f87171; text-align: center; margin-bottom: 1rem;'>Erreur SQL : " . $e->getMessage() . "</p>";
+    }
+}
+?>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Panel Admin - OpenPlanetsMaps</title>
+    <link rel="stylesheet" href="style.css">
+    <style>
+        body { background-color: #0f172a; color: #e0e0e0; display: flex; justify-content: center; align-items: center; padding: 2rem; min-height: 100vh; }
+        .admin-box { background-color: #1e293b; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); width: 100%; max-width: 500px; border: 1px solid #334155; }
+        .admin-box h1 { color: #00bfff; text-align: center; margin-bottom: 1.5rem; }
+        .form-group { margin-bottom: 1rem; }
+        .form-group label { display: block; margin-bottom: 0.5rem; color: #b9bbbe; font-size: 0.9rem; }
+        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem; background: #0f172a; border: 1px solid #334155; border-radius: 4px; color: white; font-family: inherit; }
+        .btn-submit { width: 100%; padding: 0.75rem; background-color: #00bfff; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; margin-top: 1rem; transition: background 0.2s; }
+        .btn-submit:hover { background-color: #009acd; }
+        .links { text-align: center; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
+        .links a { color: #94a3b8; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
+        .links a:hover { color: #ffffff; }
+    </style>
+</head>
+<body>
+    <div class="admin-box">
+        <?php if (!isset($_SESSION['admin_logged_in']) || $_SESSION['admin_logged_in'] !== true): ?>
+            <h1>Connexion Admin</h1>
+            <?php if ($error): ?><p style="color: #f87171; text-align: center; margin-bottom: 1rem;"><?= $error ?></p><?php endif; ?>
+            <form method="POST">
+                <input type="hidden" name="action" value="login">
+                <div class="form-group"><label>Utilisateur</label><input type="text" name="username" required></div>
+                <div class="form-group"><label>Mot de passe</label><input type="password" name="password" required></div>
+                <button type="submit" class="btn-submit">Se connecter</button>
+            </form>
+            <div class="links"><a href="index.html">← Retour au site</a></div>
+        <?php else: ?>
+            <h1>Ajouter une ligne</h1>
+            <?= $message ?>
+            <form method="POST">
+                <input type="hidden" name="action" value="add">
+                <div class="form-group"><label>Planète cible</label><select name="planete" required>
+                    <option value="mercure">Mercure</option><option value="venus">Vénus</option><option value="terre">Terre</option>
+                    <option value="mars">Mars</option><option value="jupiter">Jupiter</option><option value="saturne">Saturne</option>
+                    <option value="uranus">Uranus</option><option value="neptune">Neptune</option>
+                </select></div>
+                <div class="form-group"><label>Nom de la mission / de l'élément</label><input type="text" name="nom" required></div>
+                <div class="form-group"><label>Date (ex: 24/01/1986)</label><input type="text" name="date"></div>
+                <div class="form-group"><label>URL (Lien vers une image ou un site)</label><input type="url" name="url"></div>
+                <div class="form-group"><label>Description / Explication</label><textarea name="description" rows="4"></textarea></div>
+                <button type="submit" class="btn-submit">Ajouter aux données</button>
+            </form>
+            <div class="links"><a href="admin.php?logout=1" style="color: #f87171;">Se déconnecter</a><a href="index.html">← Retour au site</a></div>
+        <?php endif; ?>
+    </div>
+</body>
+</html>
@@ -0,0 +1,40 @@
+<?php
+header('Content-Type: application/json');
+
+$host = 'localhost';
+$dbname = 'OpenPlanetsMaps';
+$username = 'admin';
+$password = 'admin';
+
+try {
+    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
+    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
+    
+    $planetId = isset($_GET['planet']) ? $_GET['planet'] : '';
+    
+    $tablesAutorisees = [
+        'mercure' => 'MERCURY',
+        'venus'   => 'VENUS',
+        'terre'   => 'EARTH',
+        'mars'    => 'MARS',
+        'jupiter' => 'JUPITER',
+        'saturne' => 'SATURN',
+        'uranus'  => 'URANUS',
+        'neptune' => 'NEPTUNE'
+    ];
+    
+    if (!array_key_exists($planetId, $tablesAutorisees)) {
+        echo json_encode([]);
+        exit;
+    }
+    
+    $nomTable = $tablesAutorisees[$planetId];
+    $stmt = $pdo->prepare("SELECT * FROM $nomTable");
+    $stmt->execute();
+    
+    $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    echo json_encode($data);
+} catch (PDOException $e) {
+    http_response_code(500);
+    echo json_encode(['error' => 'Erreur de base de données : ' . $e->getMessage()]);
+}
@@ -12,7 +12,7 @@
    <header>
        <div class="menu-icon" onclick="toggleSidebar()">☰</div>
        <h1>Open Planets Maps</h1>
-        <button class="help-btn">?</button>
+        <button class="help-btn" onclick="window.location.href='admin.php'">Admin</button>
    </header>

    <nav id="sidebar" class="sidebar">
@@ -28,11 +28,14 @@ async function fetchData(planetId) {
    tbody.innerHTML = '<tr><td colspan="3">Chargement des données depuis la BDD...</td></tr>';

    try {
-        const mockDB = {
-        };
+        const response = await fetch(`api.php?planet=${planetId}`);
        
-        await new Promise(resolve => setTimeout(resolve, 500));
-        const data = mockDB[planetId] || [];
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(errorData.error || `Erreur HTTP: ${response.status}`);
+        }
+        
+        const data = await response.json();

        tbody.innerHTML = '';

@@ -41,20 +44,75 @@ async function fetchData(planetId) {
            return;
        }

-        data.forEach(row => {
+        const columns = Object.keys(data[0]).filter(col => col.toLowerCase() !== 'copyright');
+        
+        const thead = tbody.parentElement.querySelector('thead');
+        thead.innerHTML = '<tr>' + columns.map(col => {
+            const colLower = col.toLowerCase();
+            const isDesc = colLower.includes('desc') || colLower.includes('expl');
+            const isUrl = colLower.includes('url') || colLower === 'image' || colLower === 'img';
+            
+            let className = '';
+            if (isDesc) className = ' class="col-desc"';
+            else if (isUrl) className = ' class="col-url"';
+            return `<th${className}>${col.toUpperCase()}</th>`;
+        }).join('') + '</tr>';
+
+        data.forEach((row, index) => {
            const tr = document.createElement('tr');
-            tr.innerHTML = `
-                <td>${row.nom}</td>
-                <td><div class="img-placeholder">${row.image}</div></td>
-                <td>${row.date}</td>
-            `;
+            
+            if (index >= 10) {
+                tr.classList.add('hidden-row');
+            }
+            
+            let rowHtml = '';
+            columns.forEach(col => {
+                const colLower = col.toLowerCase();
+                if (colLower.includes('url') || colLower === 'image' || colLower === 'img') {
+                    const url = row[col];
+                    if (url && url.trim() !== '') {
+                        rowHtml += `<td class="col-url">
+                            <a href="${url}" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: underline; font-weight: 500;">
+                                ${url}
+                            </a>
+                        </td>`;
+                    } else {
+                        rowHtml += `<td class="col-url">N/A</td>`;
+                    }
+                } else if (colLower.includes('desc') || colLower.includes('expl')) {
+                    const text = row[col] || '';
+                    let fontSizeStyle = '';
+                    if (text.length > 200) fontSizeStyle = ' font-size: 0.75rem;';
+                    else if (text.length > 100) fontSizeStyle = ' font-size: 0.85rem;';
+                    rowHtml += `<td class="col-desc" style="${fontSizeStyle}">${text}</td>`;
+                } else {
+                    rowHtml += `<td>${row[col]}</td>`;
+                }
+            });
+            tr.innerHTML = rowHtml;
            tbody.appendChild(tr);
        });

+        const tableContainer = tbody.closest('.table-container');
+        
+        const existingBtn = tableContainer.querySelector('.show-more-btn');
+        if (existingBtn) existingBtn.remove();
+
+        if (data.length > 10) {
+            const btn = document.createElement('button');
+            btn.innerHTML = 'Voir la suite ⬇';
+            btn.className = 'show-more-btn';
+            btn.onclick = () => {
+                tbody.querySelectorAll('.hidden-row').forEach(row => row.classList.remove('hidden-row'));
+                btn.remove();
+            };
+            tableContainer.appendChild(btn);
+        }
+
        tbody.setAttribute('data-loaded', 'true');

    } catch (error) {
        console.error("Erreur de connexion à la BDD :", error);
-        tbody.innerHTML = '<tr><td colspan="3">Erreur lors de la récupération des données.</td></tr>';
+        tbody.innerHTML = `<tr><td colspan="3" style="color: #ff4444;">Erreur technique : ${error.message}</td></tr>`;
    }
 }
@@ -179,7 +179,7 @@ header h1 {

 .data-table {
    width: 100%;
-    max-width: 900px;
+    max-width: 1300px;
    margin: 0 auto;
    border-collapse: collapse;
 }
@@ -193,22 +193,53 @@ header h1 {
    vertical-align: middle;
 }

+.col-desc {
+    width: 40%;
+    min-width: 300px;
+    text-align: justify !important;
+    font-size: 0.9rem;
+    line-height: 1.4;
+    padding: 0.8rem !important;
+}
+
+.col-url {
+    width: 15%;
+    max-width: 350px;
+    word-wrap: break-word;
+    word-break: break-all;
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
 .data-table th {
    font-weight: 600;
    background-color: rgba(150, 150, 150, 0.1);
 }

-.img-placeholder {
-    width: 100px;
-    height: 60px;
+.hidden-row {
+    display: none !important;
+}
+
+.show-more-btn {
+    display: inline-block;
+    margin: 1.5rem auto 0;
+    padding: 0.6rem 1.5rem;
+    background-color: rgba(150, 150, 150, 0.1);
+    color: inherit;
+    border: 1px solid currentColor;
+    border-radius: 20px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    opacity: 0.85;
+}
+
+.show-more-btn:hover {
+    opacity: 1;
    background-color: rgba(150, 150, 150, 0.2);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    font-size: 0.85rem;
-    border: 1px dashed currentColor;
-    margin: 0 auto;
+    transform: translateY(2px);
 }

 .desc-box {