File manager - Edit - /home/webapp68.cm.in.th/u68319090026/final/news/users.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: 600px; 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; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } label { font-weight: 600; margin-top: 12px; display: block; } input, select { width: 100%; padding: 8px; margin-top: 4px; border-radius: 4px; border: 1px solid #bbb; box-sizing: border-box; } 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; } .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="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="user-list" class="item-list"></div> <form id="user-form"> <label>รหัสผู้ใช้งาน (แก้ไขได้)</label> <input type="text" id="user-id" readonly /> <label>ชื่อผู้ใช้</label> <input type="text" id="user-username" required /> <label>รหัสผ่าน</label> <input type="password" id="user-password" required /> <label>บทบาท</label> <select id="user-role" required> <option value="">-- เลือกบทบาท --</option> <option value="แอดมิน">แอดมิน</option> <option value="สมาชิก">สมาชิก</option> </select> <button type="submit" class="save-btn">บันทึก</button> <button type="button" id="cancel-edit" class="cancel-btn" style="display:none;">ยกเลิก</button> </form> <div id="user-message" class="message" style="display:none;"></div> <script> if(localStorage.getItem('isAdminLoggedIn') !== 'true') { alert('เฉพาะแอดมินเท่านั้น'); window.location.href = 'index.html'; } const STORAGE_KEY = 'college_news_users'; function getUsers() { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; } function saveUsers(data) { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } function renderUsers() { const users = getUsers(); const html = users.map(u => ` <div> <span>${u.id} — ${u.username} (${u.role})</span> <div> <button class="edit-btn" onclick="editUser('${u.id}')">แก้ไข</button> <button class="delete-btn" onclick="deleteUser('${u.id}')">ลบ</button> </div> </div> `).join(''); document.getElementById('user-list').innerHTML = html; } function generateId() { return 'u' + Math.random().toString(36).substr(2, 9); } function editUser(id) { const users = getUsers(); const user = users.find(u => u.id === id); if (!user) return alert('ไม่พบผู้ใช้'); document.getElementById('user-id').value = user.id; document.getElementById('user-username').value = user.username; document.getElementById('user-password').value = user.password; document.getElementById('user-role').value = user.role; document.getElementById('cancel-edit').style.display = 'inline-block'; document.querySelector('.save-btn').innerText = 'อัปเดต'; } function deleteUser(id) { if (!confirm('คุณแน่ใจว่าจะลบผู้ใช้นี้?')) return; let users = getUsers(); users = users.filter(u => u.id !== id); saveUsers(users); renderUsers(); clearForm(); showMessage('ลบผู้ใช้เรียบร้อย', true); } function clearForm() { document.getElementById('user-form').reset(); document.getElementById('user-id').value = ''; document.getElementById('cancel-edit').style.display = 'none'; document.querySelector('.save-btn').innerText = 'บันทึก'; } function showMessage(msg, success) { const el = document.getElementById('user-message'); el.innerText = msg; el.className = 'message ' + (success ? 'success' : 'error'); el.style.display = 'block'; setTimeout(() => el.style.display = 'none', 3000); } document.getElementById('user-form').addEventListener('submit', e => { e.preventDefault(); const id = document.getElementById('user-id').value.trim(); const username = document.getElementById('user-username').value.trim(); const password = document.getElementById('user-password').value.trim(); const role = document.getElementById('user-role').value; if (!username || !password || !role) { return showMessage('กรุณากรอกข้อมูลให้ครบ', false); } let users = getUsers(); if (id) { // update const index = users.findIndex(u => u.id === id); if (index === -1) return showMessage('ไม่พบผู้ใช้ที่จะแก้ไข', false); users[index] = { id, username, password, role }; showMessage('แก้ไขข้อมูลเรียบร้อย', true); } else { // insert new if (users.find(u => u.username === username)) { return showMessage('ชื่อผู้ใช้นี้มีอยู่แล้ว', false); } users.push({ id: generateId(), username, password, role }); showMessage('เพิ่มผู้ใช้ใหม่เรียบร้อย', true); } saveUsers(users); renderUsers(); clearForm(); }); document.getElementById('cancel-edit').addEventListener('click', e => { e.preventDefault(); clearForm(); }); // เตรียมข้อมูลตัวอย่างถ้ายังไม่มี if (!localStorage.getItem(STORAGE_KEY)) { saveUsers([ { id: 'u1', username: 'admin', password: 'admin123', role: 'แอดมิน' }, { id: 'u2', username: 'member1', password: '1234', role: 'สมาชิก' } ]); } renderUsers(); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.46 |
proxy
|
phpinfo
|
Settings