File manager

File manager - Edit - /home/webapp68.cm.in.th/u68319090004/Final/categories.php

Back
<!DOCTYPE html> <html lang="th"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>จัดการหมวดหมู่ - CMS ข่าวสาร</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f7fa; color: #333; } .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 20px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .header h1 { font-weight: 300; font-size: 1.8rem; } .container { display: flex; min-height: calc(100vh - 80px); } .nav { width: 250px; background: #2c3e50; padding: 20px 0; box-shadow: 2px 0 5px rgba(0,0,0,0.1); } .nav a { display: flex; align-items: center; padding: 15px 20px; color: #ecf0f1; text-decoration: none; transition: all 0.3s ease; border-left: 3px solid transparent; } .nav a:hover { background: #34495e; border-left-color: #3498db; transform: translateX(5px); } .nav a.active { background: #34495e; border-left-color: #e74c3c; color: #fff; } .nav a::before { content: ''; width: 8px; height: 8px; background: #95a5a6; border-radius: 50%; margin-right: 12px; } .nav a.active::before { background: #e74c3c; } .main { flex: 1; padding: 30px; background: #fff; margin: 20px; border-radius: 10px; box-shadow: 0 2px 20px rgba(0,0,0,0.1); } .main h2 { color: #2c3e50; margin-bottom: 30px; font-weight: 600; font-size: 1.6rem; } .btn { padding: 10px 16px; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; transition: all 0.3s ease; display: inline-block; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .btn-edit { background: #27ae60; color: white; margin-right: 5px; } .btn-edit:hover { background: #2ecc71; } .btn-delete { background: #e74c3c; color: white; } .btn-delete:hover { background: #c0392b; } .btn-add { background: #3498db; color: white; padding: 12px 20px; margin-bottom: 20px; font-size: 16px; } .btn-add:hover { background: #2980b9; } .search-container { margin-bottom: 20px; } .search-box { padding: 12px 16px; border: 2px solid #ddd; border-radius: 8px; width: 300px; font-size: 16px; transition: border-color 0.3s ease; } .search-box:focus { outline: none; border-color: #3498db; } table { width: 100%; border-collapse: collapse; margin-top: 20px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } th, td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; } th { background: #f8f9fa; font-weight: 600; color: #2c3e50; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } tr:hover { background: #f8f9fa; } tr:last-child td { border-bottom: none; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; backdrop-filter: blur(5px); } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 15px; width: 90%; max-width: 500px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .modal h3 { margin-bottom: 20px; color: #2c3e50; font-size: 1.4rem; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; color: #555; font-weight: 600; } .form-group input, .form-group textarea { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 16px; transition: border-color 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #3498db; } .form-group textarea { resize: vertical; height: 80px; } .modal-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; } .btn-cancel { background: #95a5a6; color: white; } .btn-cancel:hover { background: #7f8c8d; } .btn-save { background: #27ae60; color: white; } .btn-save:hover { background: #2ecc71; } .close { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #999; } .close:hover { color: #333; } .no-data { text-align: center; padding: 40px; color: #7f8c8d; font-size: 1.1rem; } @media (max-width: 768px) { .container { flex-direction: column; } .nav { width: 100%; min-height: auto; display: flex; overflow-x: auto; padding: 10px 0; } .nav a { white-space: nowrap; padding: 10px 15px; } .main { margin: 10px; } .search-box { width: 100%; } table { font-size: 14px; } th, td { padding: 10px 8px; } } </style> </head> <body> <div class="header"> <h1>🗞️ ระบบจัดการข่าวสาร (CMS)</h1> </div> <div class="container"> <nav class="nav"> <a href="#">Dashboard</a> <a href="#">บทความ</a> <a class="active" href="#">หมวดหมู่</a> <a href="#">ความคิดเห็น</a> <a href="#">ผู้ใช้งาน</a> <a href="#">สื่อ</a> <a href="#">ตั้งค่า</a> </nav> <main class="main"> <h2>📁 จัดการหมวดหมู่</h2> <div class="search-container"> <input type="text" class="search-box" id="searchBox" placeholder="🔍 ค้นหาหมวดหมู่..." onkeyup="filterCategories()"> </div> <a href="#" class="btn btn-add" onclick="openAddModal()">➕ เพิ่มหมวดหมู่ใหม่</a> <table id="categoryTable"> <thead> <tr> <th>รหัสหมวดหมู่</th> <th>ชื่อหมวดหมู่</th> <th>คำอธิบาย</th> <th>จำนวนบทความ</th> <th>การจัดการ</th> </tr> </thead> <tbody id="categoryTableBody"> <!-- Data will be populated by JavaScript --> </tbody> </table> <div id="noData" class="no-data" style="display: none;"> ไม่พบหมวดหมู่ที่ตรงกับการค้นหา </div> </main> </div> <!-- Modal for Add/Edit Category --> <div id="categoryModal" class="modal"> <div class="modal-content"> <span class="close" onclick="closeModal()">×</span> <h3 id="modalTitle">เพิ่มหมวดหมู่ใหม่</h3> <form id="categoryForm" onsubmit="saveCategory(event)"> <div class="form-group"> <label for="categoryName">ชื่อหมวดหมู่:</label> <input type="text" id="categoryName" required> </div> <div class="form-group"> <label for="categoryDescription">คำอธิบาย:</label> <textarea id="categoryDescription" placeholder="อธิบายเกี่ยวกับหมวดหมู่นี้..."></textarea> </div> <div class="modal-buttons"> <button type="button" class="btn btn-cancel" onclick="closeModal()">ยกเลิก</button> <button type="submit" class="btn btn-save">บันทึก</button> </div> </form> </div> </div> <script> // Sample data let categories = [ { id: 1, name: 'ข่าวสารทั่วไป', description: 'ข่าวสารและประกาศต่างๆ ที่สำคัญ', articleCount: 15 }, { id: 2, name: 'เทคโนโลยี', description: 'ข่าวสารด้านเทคโนโลยีและนวัตกรรม', articleCount: 8 }, { id: 3, name: 'การเงิน', description: 'ข่าวสารด้านการเงินและการลงทุน', articleCount: 12 }, { id: 4, name: 'กีฬา', description: 'ข่าวสารด้านกีฬาและการแข่งขัน', articleCount: 6 }, { id: 5, name: 'บันเทิง', description: 'ข่าวสารด้านบันเทิงและวัฒนธรรม', articleCount: 20 }, { id: 6, name: 'การศึกษา', description: 'ข่าวสารด้านการศึกษาและการเรียนรู้', articleCount: 9 } ]; let filteredCategories = categories; let editingId = null; let nextId = 7; // Render categories table function renderCategories(data = filteredCategories) { const tbody = document.getElementById('categoryTableBody'); const noData = document.getElementById('noData'); if (data.length === 0) { tbody.innerHTML = ''; noData.style.display = 'block'; return; } noData.style.display = 'none'; tbody.innerHTML = ''; data.forEach(category => { const row = document.createElement('tr'); row.innerHTML = ` <td>${category.id}</td> <td>${category.name}</td> <td>${category.description}</td> <td><span style="background: #3498db; color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px;">${category.articleCount}</span></td> <td> <a href="#" class="btn btn-edit" onclick="editCategory(${category.id})">✏️ แก้ไข</a> <a href="#" class="btn btn-delete" onclick="deleteCategory(${category.id})">🗑️ ลบ</a> </td> `; tbody.appendChild(row); }); } // Filter categories function filterCategories() { const searchTerm = document.getElementById('searchBox').value.toLowerCase(); filteredCategories = categories.filter(category => category.name.toLowerCase().includes(searchTerm) \|\| category.description.toLowerCase().includes(searchTerm) ); renderCategories(filteredCategories); } // Open add modal function openAddModal() { editingId = null; document.getElementById('modalTitle').textContent = 'เพิ่มหมวดหมู่ใหม่'; document.getElementById('categoryName').value = ''; document.getElementById('categoryDescription').value = ''; document.getElementById('categoryModal').style.display = 'block'; document.body.style.overflow = 'hidden'; } // Edit category function editCategory(id) { const category = categories.find(cat => cat.id === id); if (category) { editingId = id; document.getElementById('modalTitle').textContent = 'แก้ไขหมวดหมู่'; document.getElementById('categoryName').value = category.name; document.getElementById('categoryDescription').value = category.description; document.getElementById('categoryModal').style.display = 'block'; document.body.style.overflow = 'hidden'; } } // Save category function saveCategory(event) { event.preventDefault(); const name = document.getElementById('categoryName').value.trim(); const description = document.getElementById('categoryDescription').value.trim(); if (!name) { alert('กรุณาใส่ชื่อหมวดหมู่'); return; } if (editingId) { // Update existing category const index = categories.findIndex(cat => cat.id === editingId); if (index !== -1) { categories[index] = { ...categories[index], name: name, description: description }; } } else { // Add new category categories.push({ id: nextId++, name: name, description: description, articleCount: 0 }); } closeModal(); filterCategories(); // Re-render with current filter } // Delete category function deleteCategory(id) { const category = categories.find(cat => cat.id === id); if (!category) return; if (confirm(`คุณแน่ใจว่าต้องการลบหมวดหมู่ "${category.name}" หรือไม่?\n\nการลบนี้จะส่งผลต่อบทความ ${category.articleCount} บทความในหมวดหมู่นี้`)) { categories = categories.filter(cat => cat.id !== id); filterCategories(); // Re-render with current filter } } // Close modal function closeModal() { document.getElementById('categoryModal').style.display = 'none'; document.body.style.overflow = 'auto'; } // Close modal when clicking outside window.onclick = function(event) { const modal = document.getElementById('categoryModal'); if (event.target === modal) { closeModal(); } } // Close modal with Escape key document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { closeModal(); } }); // Initialize renderCategories(); </script> </body> </html>

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