สอนใช้ Template AdminLTE เบื้องต้น — เปลี่ยนหน้าเว็บให้ดูมืออาชีพใน 5 นาที!

โค้ดแซ่บสาย Dev | 5 พ.ย. 2568

ถ้าเว็บธรรมดามันดูจืดไป... ✨ ลองใช้ AdminLTE สิ! เทมเพลตแอดมิน (Admin Template) สุดฮิตที่เว็บใหญ่ ๆ ทั่วโลกใช้กัน เพราะมัน ฟรี สวย ฟังก์ชันครบ เหมาะมากสำหรับเว็บระบบจัดการข้อมูล หรือระบบหลังบ้าน (Back-End) เช่น ระบบร้านค้า, ระบบนักเรียน, หรือระบบเกมของครูยุ้ยเอง 😎

🧩 ขั้นตอนที่ 1: รู้จักกับ AdminLTE

AdminLTE คือเทมเพลตที่สร้างด้วย Bootstrap, HTML, CSS และ JavaScript ช่วยให้เราสร้างหน้า Dashboard แบบมี Sidebar, Navbar, Chart, Card และ Table ได้เลย โดยไม่ต้องออกแบบใหม่ทั้งหมด 💼

📦 สามารถดาวน์โหลดได้ฟรีที่ https://adminlte.io

🛠️ ขั้นตอนที่ 2: ดาวน์โหลดและแตกไฟล์

เมื่อเข้าเว็บ AdminLTE.io แล้ว คลิก Download เวอร์ชันล่าสุด (ปัจจุบันคือ v3 หรือ v4)

หลังจากแตกไฟล์ .zip แล้ว จะได้โฟลเดอร์ประมาณนี้:

adminlte/
├── dist/
│   ├── css/
│   ├── js/
│   ├── index.html
├── src/

ไฟล์ index.html คือหน้า Dashboard ตัวอย่าง เราสามารถเปิดในเบราว์เซอร์ดูได้ทันที 💫

💻 ขั้นตอนที่ 3: สร้างหน้าเว็บของเราเอง

ถ้าอยากสร้างหน้าเว็บของเราเอง ลองคัดลอก index.html มาตั้งชื่อใหม่ เช่น dashboard.html แล้วเปิดใน Code Editor เช่น VS Code

ลองลบส่วนที่ไม่ใช้ แล้วเก็บโครงสร้างหลักไว้แบบนี้ 👇

<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>แดชบอร์ดนักเรียน - AdminLTE</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <!-- เรียกใช้ไฟล์ CSS -->
  <link rel="stylesheet" href="./css/adminlte.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"/>
</head>

<body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
  <div class="app-wrapper">

    <!-- แถบเมนูบนสุด (Navbar) -->
    <nav class="app-header navbar navbar-expand bg-body">
      <div class="container-fluid">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
              <i class="bi bi-list"></i>
            </a>
          </li>
          <li class="nav-item d-none d-md-block">
            <a href="#" class="nav-link">หน้าแรก</a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- แถบด้านข้าง (Sidebar) -->
    <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
      <div class="sidebar-brand">
        <a href="./index.html" class="brand-link">
          <img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
          <span class="brand-text fw-light">AdminLTE 4</span>
        </a>
      </div>

      <div class="sidebar-wrapper">
        <nav class="mt-2">
          <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="navigation" aria-label="Main navigation" data-accordion="false" id="navigation">
            <li class="nav-item">
              <a href="#" class="nav-link">
                <i class="bi bi-house-door-fill"></i>
                <p>แดชบอร์ด</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">
                <i class="bi bi-person-fill"></i>
                <p>ข้อมูลนักเรียน</p>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </aside>

    <!-- ส่วนเนื้อหาหลัก (Main Content) -->
    <main class="app-main">
      <div class="app-content-header">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-6"><h3 class="mb-0">Dashboard</h3></div>
            <div class="content-wrapper">
              <div class="content-header">
                <h1 class="m-0">ยินดีต้อนรับสู่อาณาจักรดิจิทัล 🖥️</h1>
              </div>
              <div class="content">
                <p>หน้านี้สามารถใส่กราฟ ตาราง หรือข้อมูลนักเรียนได้เลย</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- ส่วนท้าย (Footer) -->
    <footer class="app-footer">
      <strong>Copyright &copy; 2025</strong> All rights reserved.
    </footer>
  </div>

  <!-- เรียกใช้ไฟล์ JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"></script>
  <script src="./js/adminlte.js"></script>

</body>
</html>

เปิดหน้าเว็บในเบราว์เซอร์ จะได้ Dashboard สวย ๆ พร้อม Sidebar ที่พับได้เหมือนเว็บระบบจริง! 🎉

🎯 ขั้นตอนที่ 4: ต่อยอดได้อีกเยอะ!

  • 📊 ใช้คู่กับ DataTables เพื่อแสดงข้อมูลนักเรียน
  • 📈 เพิ่ม Chart.js ทำกราฟแสดงคะแนนหรือยอดขาย
  • 📁 แบ่งหน้าเว็บเป็นโมดูล เช่น นักเรียน, ครู, รายวิชา

AdminLTE มีตัวอย่างครบหมดในโฟลเดอร์ pages/ เปิดดูแล้วลองปรับแก้ได้เลย เช่น charts/chartjs.html หรือ tables/data.html เหมาะมากกับการฝึกงานด้านเว็บแอปฯ ของเด็กอาชีวะ 🌱

🧠 สรุปสั้น ๆ สำหรับนักเรียน

สิ่งที่ได้เรียนรู้ สรุปใจความ
AdminLTE คืออะไร เทมเพลตสำเร็จรูปสำหรับสร้างหน้า Dashboard แบบมืออาชีพ
ใช้งานอย่างไร ดาวน์โหลด แตกไฟล์ แล้วแก้ไขหน้า index.html ได้ทันที
เทคโนโลยีที่ใช้ Bootstrap + jQuery + FontAwesome + Chart.js
เหมาะกับงานแบบไหน ระบบจัดการข้อมูล, เว็บไซต์หลังบ้าน, เว็บโปรเจกต์จบ

🌟 เคล็ดลับจากจีจี้

ให้ลองปรับชื่อเมนู ใส่โลโก้ หรือเปลี่ยนสีธีม จาก sidebar-dark-primary เป็น sidebar-light-success ก็ได้💚

ดาวน์โหลดไฟล์นี้ต้องใช้ 30 พ้อยต์
👁‍🗨 122 วิว 💖 13 ถูกใจ