การสร้างระบบ Login ด้วย Express, MySQL, และ EJS โดยใช้ Session

คู่มือสร้างระบบ Login แบบง่ายๆ โดยไม่เข้ารหัสรหัสผ่าน พร้อมการออกแบบด้วย Bootstrap

1. ติดตั้ง express-session

เริ่มต้นด้วยการติดตั้ง express-session สำหรับการจัดการ session ใน Express:


npm install express-session
            

2. ตั้งค่า session ใน app.js

เปิดไฟล์ app.js แล้วเพิ่มการตั้งค่า session:


// app.js
const session = require('express-session');

// ตั้งค่า session
app.use(session({
  secret: 'your_secret_key', // คีย์ลับสำหรับ session
  resave: false,
  saveUninitialized: true,
  cookie: { secure: false } // ถ้าใช้ HTTPS ให้เปลี่ยนเป็น true
}));
            

3. เพิ่มเส้นทาง (Route) สำหรับการ Login และ Logout

เปิดไฟล์ index.js แล้วเพิ่มเส้นทางสำหรับจัดการระบบ Login และ Logout:


// index.js
const express = require('express');
const router = express.Router();
const db = require('./db');

// Route สำหรับแสดงหน้า Login
router.get('/login', (req, res) => {
  res.render('login');
});

// Route สำหรับจัดการ Login
router.post('/login', (req, res) => {
  const { username, password } = req.body;
  
  // ตรวจสอบ username และ password จากฐานข้อมูล
  db.query('SELECT * FROM users WHERE username = ? AND password = ?', [username, password], (err, results) => {
    if (err) throw err;

    if (results.length > 0) {
      // ถ้า login สำเร็จ ให้บันทึก session
      req.session.loggedin = true;
      req.session.username = username;
      res.redirect('/');
    } else {
      // ถ้า login ไม่สำเร็จ ให้แสดงข้อความแจ้งเตือน
      res.send('Incorrect Username or Password!');
    }
  });
});

// Route สำหรับหน้า Home ที่ต้อง Login ก่อนเข้าใช้งาน
router.get('/', (req, res) => {
  if (req.session.loggedin) {
    res.render('index', { username: req.session.username });
  } else {
    res.send('Please login to view this page!');
  }
});

// Route สำหรับ Logout
router.get('/logout', (req, res) => {
  // ลบ session
  req.session.destroy((err) => {
    if (err) throw err;
    res.redirect('/login');
  });
});

module.exports = router;
            

4. สร้าง View สำหรับการ Login

สร้างไฟล์ login.ejs ในโฟลเดอร์ views สำหรับหน้า Login:





  
  
  Login
  


  

Login

5. แก้ไขหน้า Home เพื่อแสดงข้อมูลผู้ใช้งานที่เข้าสู่ระบบ

แก้ไขไฟล์ index.ejs เพื่อแสดงข้อมูลผู้ใช้งานที่เข้าสู่ระบบ:


Welcome, <%= username %>!

Logout

6. การทดสอบระบบ

เพื่อทดสอบระบบ ให้เรียกใช้เซิร์ฟเวอร์ด้วยคำสั่ง:


npm start
            

จากนั้นเปิดเบราว์เซอร์แล้วไปที่ http://localhost:3000/login เพื่อเข้าสู่ระบบด้วย username และ password ที่มีในฐานข้อมูล