File manager

File manager - Edit - /home/webapp68.cm.in.th/u68319090026/final/news/articles.html

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <title>จัดการบทความ</title> <link href="https://fonts.googleapis.com/css2?family=Sarabun&display=swap" rel="stylesheet" /> <style> body { font-family: "Sarabun", sans-serif; max-width: 700px; margin: 20px auto; background: #f5f7fa; color: #333; } nav { text-align: center; margin-bottom: 20px; } nav a { margin: 0 10px; text-decoration: none; color: #3366cc; font-weight: 600; } nav a:hover { text-decoration: underline; } h1 { text-align: center; margin-bottom: 20px; } .item-list > div { background: white; padding: 12px; margin-bottom: 8px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; } label { font-weight: 600; margin-top: 12px; display: block; } input, select, textarea { width: 100%; padding: 8px; margin-top: 4px; border-radius: 4px; border: 1px solid #bbb; box-sizing: border-box; } textarea { resize: vertical; height: 80px; } button { padding: 8px 12px; border: none; border-radius: 4px; background-color: #3366cc; color: white; cursor: pointer; margin-top: 10px; } button:hover { background-color: #254a99; } .edit-btn { background-color: #007bff; margin-left: 8px; } .edit-btn:hover { background-color: #0056b3; } .delete-btn { background-color: #dc3545; margin-left: 8px; } .delete-btn:hover { background-color: #c9302c; } .cancel-btn { background-color: #6c757d; margin-left: 8px; } .cancel-btn:hover { background-color: #5a6268; } .message { margin-top: 12px; padding: 10px; border-radius: 6px; } .message.success { background: #d4edda; color: #155724; } .message.error { background: #f8d7da; color: #721c24; } </style> </head> <body> <nav> <a href="admin_dashboard.html">Dashboard</a> <a href="summary.html">สรุปจำนวนบทความ</a> <a href="users.html">จัดการผู้ใช้งาน</a> <a href="categories.html">จัดการหมวดหมู่</a> <a href="articles.html">จัดการบทความ</a> </nav> <h1>จัดการบทความ</h1> <div id="article-list" class="item-list"></div> <form id="article-form"> <label>รหัสบทความ (แก้ไขได้)</label> <input type="text" id="article-id" readonly /> <label>หัวข้อบทความ</label> <input type="text" id="article-title" required /> <label>หมวดหมู่</label> <select id="article-category" required> <option value="">-- เลือกหมวดหมู่ --</option> </select> <label>เนื้อหาบทความ</label> <textarea id="article-content" required></textarea> <button type="submit" class="save-btn">บันทึก</button> <button type="button" id="cancel-edit" class="cancel-btn" style="display:none;">ยกเลิก</button> </form> <div id="article-message" class="message" style="display:none;"></div> <script> const STORAGE_KEY = 'college_news_articles'; const CATEGORY_KEY = 'college_news_categories'; function getArticles() { return JSON.parse(localStorage.getItem(STORAGE_KEY)) \|\| []; } function saveArticles(data) { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } function getCategories() { return JSON.parse(localStorage.getItem(CATEGORY_KEY)) \|\| []; } function renderCategoryOptions() { const categories = getCategories(); const select = document.getElementById('article-category'); select.innerHTML = '<option value="">-- เลือกหมวดหมู่ --</option>'; categories.forEach(cat => { select.insertAdjacentHTML('beforeend', `<option value="${cat}">${cat}</option>`); }); } function renderArticles() { const articles = getArticles(); const container = document.getElementById('article-list'); if (articles.length === 0) { container.innerHTML = '<p>ไม่มีบทความ</p>'; return; } container.innerHTML = articles.map(a => ` <div> <div> <strong>${a.title}</strong> <small>(${a.category \|\| 'ไม่ระบุ'})</small> </div> <div> <button class="edit-btn" onclick="editArticle('${a.id}')">แก้ไข</button> <button class="delete-btn" onclick="deleteArticle('${a.id}')">ลบ</button> </div> </div> `).join(''); } function showArticleMessage(msg, type = 'success') { const el = document.getElementById('article-message'); el.textContent = msg; el.className = `message ${type}`; el.style.display = ''; setTimeout(() => el.style.display = 'none', 3000); } function generateArticleId() { const articles = getArticles(); if (!articles.length) return 'A001'; const nums = articles.map(a => parseInt(a.id.slice(1))); return 'A' + String(Math.max(...nums) + 1).padStart(3, '0'); } document.getElementById('article-form').addEventListener('submit', e => { e.preventDefault(); const id = document.getElementById('article-id').value; const title = document.getElementById('article-title').value.trim(); const category = document.getElementById('article-category').value; const content = document.getElementById('article-content').value.trim(); if (!title \|\| !category \|\| !content) { showArticleMessage('กรุณากรอกข้อมูลให้ครบ', 'error'); return; } let articles = getArticles(); if (id) { // แก้ไขบทความ const idx = articles.findIndex(a => a.id === id); if (idx !== -1) { articles[idx] = { id, title, category, content }; showArticleMessage('แก้ไขบทความเรียบร้อย', 'success'); } } else { // เพิ่มบทความใหม่ const newId = generateArticleId(); articles.push({ id: newId, title, category, content }); showArticleMessage('เพิ่มบทความใหม่เรียบร้อย', 'success'); } saveArticles(articles); renderArticles(); resetForm(); }); function editArticle(id) { const articles = getArticles(); const article = articles.find(a => a.id === id); if (!article) return; document.getElementById('article-id').value = article.id; document.getElementById('article-title').value = article.title; document.getElementById('article-category').value = article.category; document.getElementById('article-content').value = article.content; document.getElementById('cancel-edit').style.display = ''; window.scrollTo({ top: 0, behavior: 'smooth' }); } function deleteArticle(id) { if (!confirm('ต้องการลบบทความนี้หรือไม่?')) return; let articles = getArticles(); articles = articles.filter(a => a.id !== id); saveArticles(articles); renderArticles(); showArticleMessage('ลบบทความเรียบร้อย', 'success'); resetForm(); } document.getElementById('cancel-edit').addEventListener('click', resetForm); function resetForm() { document.getElementById('article-id').value = ''; document.getElementById('article-title').value = ''; document.getElementById('article-category').value = ''; document.getElementById('article-content').value = ''; document.getElementById('cancel-edit').style.display = 'none'; } window.onload = () => { renderCategoryOptions(); renderArticles(); }; </script> <div style="text-align: center; margin-top: 40px;"> <a href="admin_dashboard.html" style="text-decoration: none; color: #3366cc; font-weight: bold;">← กลับไปหน้า Dashboard</a> </div> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.48 | proxy | phpinfo | Settings