tezcat/OpenPlanetsMaps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
tezcat
2026-05-04 22:46:20 +02:00
parent bda9fbf7cb
commit dddc22d4a4
7 changed files with 260 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SRC/DATA/data.sql
View File
SRC/DATA/structure.sql
View File
SRC/admin.php
+108
View File
@@ -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>
SRC/api.php
+40
View File
@@ -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()]);
}
SRC/index.html
+1 -1
View File
@@ -12,7 +12,7 @@
<header> <header>
<div class="menu-icon" onclick="toggleSidebar()">☰</div> <div class="menu-icon" onclick="toggleSidebar()">☰</div>
<h1>Open Planets Maps</h1> <h1>Open Planets Maps</h1>
<button class="help-btn">?</button> <button class="help-btn" onclick="window.location.href='admin.php'">Admin</button>
</header> </header>
<nav id="sidebar" class="sidebar"> <nav id="sidebar" class="sidebar">
SRC/main.js
+69 -11
View File
@@ -28,11 +28,14 @@ async function fetchData(planetId) {
tbody.innerHTML = '<tr><td colspan="3">Chargement des données depuis la BDD...</td></tr>'; tbody.innerHTML = '<tr><td colspan="3">Chargement des données depuis la BDD...</td></tr>';
try { try {
const mockDB = { const response = await fetch(`api.php?planet=${planetId}`);
};
await new Promise(resolve => setTimeout(resolve, 500)); if (!response.ok) {
const data = mockDB[planetId] || []; const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.error || `Erreur HTTP: ${response.status}`);
}
const data = await response.json();
tbody.innerHTML = ''; tbody.innerHTML = '';
@@ -41,20 +44,75 @@ async function fetchData(planetId) {
return; 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'); const tr = document.createElement('tr');
tr.innerHTML = `
<td>${row.nom}</td> if (index >= 10) {
<td><div class="img-placeholder">${row.image}</div></td> tr.classList.add('hidden-row');
<td>${row.date}</td> }
`;
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); 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'); tbody.setAttribute('data-loaded', 'true');
} catch (error) { } catch (error) {
console.error("Erreur de connexion à la BDD :", 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>`;
} }
} }
SRC/style.css
+42 -11
View File
@@ -179,7 +179,7 @@ header h1 {
.data-table { .data-table {
width: 100%; width: 100%;
max-width: 900px; max-width: 1300px;
margin: 0 auto; margin: 0 auto;
border-collapse: collapse; border-collapse: collapse;
} }
@@ -193,22 +193,53 @@ header h1 {
vertical-align: middle; 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 { .data-table th {
font-weight: 600; font-weight: 600;
background-color: rgba(150, 150, 150, 0.1); background-color: rgba(150, 150, 150, 0.1);
} }
.img-placeholder { .hidden-row {
width: 100px; display: none !important;
height: 60px; }
.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); background-color: rgba(150, 150, 150, 0.2);
display: inline-flex; transform: translateY(2px);
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 0.85rem;
border: 1px dashed currentColor;
margin: 0 auto;
} }
.desc-box { .desc-box {