Task #4


<?php
// cms.php
$host = '127.0.0.1';
$db   = 'tyrfl709';
$user = 'tyrfl709';
$pass = '[q8OXd*BEbxW6bM4';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
    $stmt = $pdo->query('SELECT * FROM pages');
    $pages = $stmt->fetchAll();
} catch (PDOException $e) {
    die("Erreur DB: " . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>CMS</title>
    <style>
        body { font-family: sans-serif; background: #f0f0f0; padding: 20px; }
        .page-item { margin-bottom: 10px; }
        .modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.2); }
        .modal.active { display: block; }
        .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
        .overlay.active { display: block; }
    </style>
</head>
<body>
<h1>Gestion des pages</h1>
<div id="pages">
    <?php foreach ($pages as $page): ?>
        <div class="page-item">
            <strong><?= htmlspecialchars($page['title']) ?></strong>
            <button onclick="openModal(<?= $page['id'] ?>, '<?= htmlspecialchars(addslashes($page['title'])) ?>', '<?= htmlspecialchars(addslashes($page['text'])) ?>', '<?= htmlspecialchars(addslashes($page['image'])) ?>')">Modifier</button>
        </div>
    <?php endforeach; ?>
</div>

<button onclick="openModal()">+ Ajouter une page</button>

<div class="overlay" id="overlay"></div>
<div class="modal" id="modal">
    <h2 id="modalTitle">Modifier une page</h2>
    <form id="pageForm">
        <input type="hidden" name="id" id="pageId">
        <label>Titre:<br><input type="text" name="title" id="title"></label><br><br>
        <label>Texte:<br><textarea name="text" id="text" rows="5" cols="40"></textarea></label><br><br>
        <label>Image:<br><input type="text" name="image" id="image"></label><br><br>
        <button type="submit">Enregistrer</button>
        <button type="button" onclick="closeModal()">Annuler</button>
    </form>
</div>

<script>
function openModal(id = '', title = '', text = '', image = '') {
    document.getElementById('modalTitle').textContent = id ? 'Modifier la page' : 'Ajouter une page';
    document.getElementById('pageId').value = id;
    document.getElementById('title').value = title;
    document.getElementById('text').value = text;
    document.getElementById('image').value = image;
    document.getElementById('modal').classList.add('active');
    document.getElementById('overlay').classList.add('active');
}

function closeModal() {
    document.getElementById('modal').classList.remove('active');
    document.getElementById('overlay').classList.remove('active');
}

document.getElementById('pageForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const id = formData.get('id');

    const response = await fetch(id ? 'updatePage.php' : 'addPage.php', {
        method: 'POST',
        body: formData
    });
    const result = await response.text();
    alert(result);
    window.location.reload();
});
</script>
</body>
</html>