Learning

HTML, CSS, and Javascript for Web Developers

admin

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="input-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
        <div id="message"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

styles.css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h2 {
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

.input-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#message {
    margin-top: 20px;
    color: red;
}

script.js

// ข้อมูลผู้ใช้และรหัสผ่านจำลอง
const users = {
    admin: { username: "admin", password: "admin123", role: "admin" },
    user: { username: "user", password: "user123", role: "user" }
};

// จัดการการล็อกอิน
document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // ป้องกันการรีเฟรชหน้า

    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const messageDiv = document.getElementById('message');

    let user = null;

    // ตรวจสอบข้อมูลผู้ใช้
    if (users.admin.username === username && users.admin.password === password) {
        user = users.admin;
    } else if (users.user.username === username && users.user.password === password) {
        user = users.user;
    }

    if (user) {
        messageDiv.style.color = 'green';
        messageDiv.textContent = `Login successful! Welcome, ${user.role}`;
        
        // เรียกฟังก์ชันเปลี่ยนหน้าเพื่อตามสิทธิ์ของผู้ใช้
        setTimeout(() => {
            redirectToDashboard(user.role);
        }, 1000); // รอ 1 วินาทีเพื่อแสดงข้อความ
    } else {
        messageDiv.style.color = 'red';
        messageDiv.textContent = 'Invalid username or password!';
    }
});

// ฟังก์ชันเปลี่ยนหน้าไปยังแดชบอร์ดของแต่ละสิทธิ์
function redirectToDashboard(role) {
    if (role === 'admin') {
        window.location.href = 'admin_dashboard.html';
    } else if (role === 'user') {
        window.location.href = 'user_dashboard.html';
    }
}

admin_dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>Admin Dashboard</h2>
        <p>Welcome, admin! You have full control over the system.</p>
        <button onclick="logout()">Logout</button>
    </div>

    <script>
        function logout() {
            window.location.href = 'index.html';
        }
    </script>
</body>
</html>

user_dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <h2>User Dashboard</h2>
        <p>Welcome, regular user!</p>
        <button onclick="logout()">Logout</button>
    </div>

    <script>
        function logout() {
            window.location.href = 'index.html';
        }
    </script>
</body>
</html>

อีกตัวอย่าง
ให้เข้าไปที่ https://codepen.io/pen

ตัวอย่างนี้จะแสดงการสร้างหน้า Login อย่างง่าย โดยแยกเป็น 3 ไฟล์: index.html, style.css, และ script.js พร้อมการจัดรูปแบบและตรวจสอบข้อมูลแบบพื้นฐาน (ไม่เชื่อมต่อ backend)

โครงสร้างไฟล์

login-example/
│
├── index.html
├── style.css
└── script.js

index.html

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Login Page</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="login-container">
    <h2>เข้าสู่ระบบ</h2>
    <form id="loginForm">
      <input type="text" id="username" placeholder="ชื่อผู้ใช้" required />
      <input type="password" id="password" placeholder="รหัสผ่าน" required />
      <button type="submit">เข้าสู่ระบบ</button>
      <p id="error-msg"></p>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>

style.css

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(120deg, #89f7fe, #66a6ff);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.login-container {
  background-color: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 300px;
  text-align: center;
}

.login-container h2 {
  margin-bottom: 20px;
}

input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

#error-msg {
  color: red;
  margin-top: 10px;
  font-size: 14px;
}

script.js

document.getElementById('loginForm').addEventListener('submit', function (e) {
  e.preventDefault();

  const username = document.getElementById('username').value.trim();
  const password = document.getElementById('password').value.trim();
  const errorMsg = document.getElementById('error-msg');

  // ตัวอย่าง user/pass ที่ hardcode
  if (username === 'admin' && password === '123456') {
    alert('เข้าสู่ระบบสำเร็จ!');
    window.location.href = "dashboard.html"; // เปลี่ยนหน้าได้หากมี
  } else {
    errorMsg.textContent = 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง';
  }
});

กรณีการรวมใน 1 ไฟล์

การรวมไฟล์ HTML, CSS และ JavaScript ให้อยู่ในไฟล์เดียว (เรียกว่า single-file HTML) เหมาะสำหรับการสอน, เดโม, หรือใช้งานง่ายๆ แบบไม่ต้องแยกไฟล์หลายส่วน โดยใช้หลักการดังนี้:

หลักการ

ส่วนวิธีการรวม
HTMLอยู่ใน <body> ปกติ
CSSใส่ใน <style> ภายใน <head>
JavaScriptใส่ใน <script> ภายใน <body> หรือ <head>

ตัวอย่าง Login (รวม 3 ไฟล์ไว้ใน index.html ไฟล์เดียว)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Login Page</title>

  <!-- 🔹 รวม CSS -->
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background: linear-gradient(120deg, #89f7fe, #66a6ff);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .login-container {
      background-color: white;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      width: 300px;
      text-align: center;
    }

    .login-container h2 {
      margin-bottom: 20px;
    }

    input {
      width: 100%;
      padding: 12px;
      margin-bottom: 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }

    button {
      width: 100%;
      padding: 12px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
    }

    button:hover {
      background-color: #0056b3;
    }

    #error-msg {
      color: red;
      margin-top: 10px;
      font-size: 14px;
    }
  </style>
</head>
<body>

  <!-- 🔹 HTML -->
  <div class="login-container">
    <h2>เข้าสู่ระบบ</h2>
    <form id="loginForm">
      <input type="text" id="username" placeholder="ชื่อผู้ใช้" required />
      <input type="password" id="password" placeholder="รหัสผ่าน" required />
      <button type="submit">เข้าสู่ระบบ</button>
      <p id="error-msg"></p>
    </form>
  </div>

  <!-- 🔹 JavaScript -->
  <script>
    document.getElementById('loginForm').addEventListener('submit', function (e) {
      e.preventDefault();

      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();
      const errorMsg = document.getElementById('error-msg');

      if (username === 'admin' && password === '123456') {
        alert('เข้าสู่ระบบสำเร็จ!');
        // window.location.href = "dashboard.html"; // redirect ได้ถ้ามีหน้าอื่น
      } else {
        errorMsg.textContent = 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง';
      }
    });
  </script>
</body>
</html>

สรุปข้อดี

  • พกพาง่าย (แค่เปิดไฟล์เดียว)
  • ใช้สอนได้ง่าย
  • เหมาะสำหรับการสาธิต, โค้ดแสดงตัวอย่าง หรือฝึกนักเรียน

ข้อควรระวัง

  • ไม่เหมาะกับระบบจริงที่มีขนาดใหญ่
  • ไม่แยกความรับผิดชอบของแต่ละไฟล์ (CSS/JS/HTML)

Related Posts