ในบทความนี้เราจะมาทำระบบการ Login และ Register โดยใช้หลักการของ MVC ซึ่งแน่นอนว่าพระเอกของเราก็ต้องเป็นเจ้า NodeJS
โดยให้ทุกคนทำการติดตั้ง เครื่องมือที่จะต้องใช้งานกันก่อน
- NodeJS
MongoDB
npm init -y
npm install express ejs bcryptjs passport passport -local
npm install mongodb
- models คือ ส่วนที่ใช้ในการเก็บข้อมูลหรือรวบร่วมข้อมูล เรียกง่ายๆว่าเป็นในส่วนของการทำงานของ database
โดยที่ตัว models จะค่อยจัดเตรียมจัดเก็บข้อมูลเพื่อรอการเรียกใช้งานจาก controllers
views คือ ส่วนที่ใช้ในการแสดงผลหรือมีการ interactive หรือ interact กับ users ที่ใช้งานบนหน้าเว็บไซต์ของเรานั้นเอง
โดยที่ตัว views จะค่อยรับคำสั่งมาจาก controllers
controllers คือ ส่วนที่ค่อยรับการประมวลมาจาก views ซึ่งเมือ user มีการ interactive กับ UI views เพื่อทำอะไรสักอย่างกับ website ของอย่างเช่นขอดูข้อมูลของสถานที่ท่องเที่ยวของประเทศ ตัว controllers จะทำการรับคำสั่งและประมวลผลเพื่อไปติดต่อกับ models เพื่อขอข้อมูลสถานที่ท่องเที่ยวของประเทศไทยและทำการส่งกลับไปที่หน้า UI Views
ที่จะใช้รัน nodeJs
โค้ด: เลือกทั้งหมด
const express = require('express');
const app = express
app.listen(3000, () => {
console.log('Server has start with port 3000');
});
โค้ด: เลือกทั้งหมด
node app.js
- login.ejs หน้า login เข้าใช้งานระบบ
register.ejs หน้า ลงทะเบียน สำหรับสมัครสมาชิก
dashboard.ejs ใช้แสดงข้อมูลของผู้ที่สมัครสมาชิก
layout.ejs ใช้สำหรับการ included across ไฟล์ .ejs ใน views folder
ซึ่งจะอธิบายต่อไป ใน folder ของ controllers ให้ทำการสร้างไฟล์ loginController.js ขึ้นและ ใน folder ของ routes ทำการสร้างไฟล์ login.js ในไฟล์ของ loginController.js ให้ทำการเขียนโค้ดดังต่อไปนี้
โค้ด: เลือกทั้งหมด
const registerView = (req,res) =>{
res.render("register",{
});
}
const loginView = (req,res) => {
res.render("login",{
});
}
module.exports = {
registerView,
loginView
};
ในส่วนของไฟล์ login.js
โค้ด: เลือกทั้งหมด
const express = require('express');
const {registerView, loginView} = require('../controllers/loginController.js');
const router = express.Router();
router.get('/register', registerView);
router.get('/, loginView);
module.exports = router;
จากนั้นให้กลับไปที่ไฟล์ app.js อีกที เพื่อทำการ update ให้ตัว server ได้ทราบ
โค้ด: เลือกทั้งหมด
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', require('./routes/login));
app.listen(3000, () => {
console.log('Server has start with port 3000');
});
โค้ด: เลือกทั้งหมด
const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient;
const url = "mongodb://localhost:27017/mydb";
MongoClient.connect(url, function(err,db){
if (err) throw err;
console.log("Database create!");
db.close();
});
app.set('view engine','ejs');
//Routes
app.use('/', require('./routes/login'));
app.listen(3000, () => {
console.log('server has start with port 3000');
});
ในตอนนี้ที่ 1 เราจะจบทิ้งท้ายด้วยกัน เชื่อมต่อ nodeJs เข้ากับ mongoDB ในบทความต่อไปในตอนที่ 2 จะเป็นการ ออกแบบในส่วนที่เหลือในเสร็จสิ้น
เพื่อเป็น pattern ของการออกแบบโปรแกรมในรูปแบบของ MVC Framework โดย NodeJS ให้สมบูรณ์แบบ
https://www.esparkinfo.com/build-node-js-mvc-application.html
https://www.section.io/engineering-education/nodejs-mongoosejs-mongodb/
https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm#:~:text=The%20Model%2DView%2DController%20(,the%20view%2C%20and%20the%20controller.&text=MVC%20is%20one%20of%20the,create%20scalable%20and%20extensible%20projects.