การใช้งาน NodeJS กับ MVC Framework เบื้องต้น ตอนที่ 1

[Nes224]

ในบทความนี้จะมาแชร์เรื่องการเขียน web application ด้วย NodeJS โดยใช้หลักการของ MVC Framework โดย MVC นั้นย่อมาจาก Model View Controller ซึ่งใช้เป็นรูปแบบของการพัฒนา software ที่ซึ่งออกเป็น 3 ส่วนตามหลักการ MVC โดย 3 ส่วนของ MVC ก็จะหน้าที่การทำงานที่แตกต่างกันออกไป โดยรูปแบบของ MVC ถูกใช้ไปเป็นขั้นตอนในการพัฒนาได้หลากหลายภาษา เพราะ MVC เป็น pattern ของการออกแบบโปรแกรม โดยในวันนี้จะพาทุกคนมาเข้าใจหลักการและการใช้ของ MVC โดยใช้ NodeJS ทำงาน


ในบทความนี้เราจะมาทำระบบการ Login และ Register โดยใช้หลักการของ MVC ซึ่งแน่นอนว่าพระเอกของเราก็ต้องเป็นเจ้า NodeJS
โดยให้ทุกคนทำการติดตั้ง เครื่องมือที่จะต้องใช้งานกันก่อน

• NodeJS
  MongoDB
  npm init -y
  npm install express ejs bcryptjs passport passport -local
  npm install mongodb

หลังจากที่ทำการติดตั้ง package เสร็จให้ทำการสร้าง folder ขึ้นมา 3 folder คือ controllers, views, models เพื่อให้เป็นหลักการของ MVC Framework

MVCFramework

MVC.jpg (11.86 KiB) Viewed 2338 times

• models คือ ส่วนที่ใช้ในการเก็บข้อมูลหรือรวบร่วมข้อมูล เรียกง่ายๆว่าเป็นในส่วนของการทำงานของ database
  โดยที่ตัว models จะค่อยจัดเตรียมจัดเก็บข้อมูลเพื่อรอการเรียกใช้งานจาก controllers
  
  views คือ ส่วนที่ใช้ในการแสดงผลหรือมีการ interactive หรือ interact กับ users ที่ใช้งานบนหน้าเว็บไซต์ของเรานั้นเอง
  โดยที่ตัว views จะค่อยรับคำสั่งมาจาก controllers
  
  controllers คือ ส่วนที่ค่อยรับการประมวลมาจาก views ซึ่งเมือ user มีการ interactive กับ UI views เพื่อทำอะไรสักอย่างกับ website ของอย่างเช่นขอดูข้อมูลของสถานที่ท่องเที่ยวของประเทศ ตัว controllers จะทำการรับคำสั่งและประมวลผลเพื่อไปติดต่อกับ models เพื่อขอข้อมูลสถานที่ท่องเที่ยวของประเทศไทยและทำการส่งกลับไปที่หน้า UI Views

หลังจากที่เราทำความเข้าใจหลักการของ MVC เบื้องต้นกันไปแล้วต่อไปจะมาลองทำการสร้าง website ด้วยหลักการ MVC Framework โดยให้ทำการสร้าง ไฟล์ app.js
ที่จะใช้รัน nodeJs

โค้ด: เลือกทั้งหมด

const express = require('express');
const app = express
app.listen(3000, () => {
	console.log('Server has start with port 3000');
});

ทำการสั่ง run server ด้วยคำสั่ง

โค้ด: เลือกทั้งหมด

node app.js

RunServer

result.jpg (7.9 KiB) Viewed 2338 times

ทำการสร้างไฟล์ html ที่จะใช้ติดต่อกับ user โดยให้ทำการสร้าง 4 ไฟล์ขึ้นมา

• login.ejs หน้า login เข้าใช้งานระบบ
  register.ejs หน้า ลงทะเบียน สำหรับสมัครสมาชิก
  dashboard.ejs ใช้แสดงข้อมูลของผู้ที่สมัครสมาชิก
  layout.ejs ใช้สำหรับการ included across ไฟล์ .ejs ใน views folder

HTML

ejs.jpg (17.81 KiB) Viewed 2338 times

หลังจากที่สร้างไฟล์ ejs ของหน้า UI ไปแล้วให้ทำการสร้าง folder routes จริงๆแล้ว ตัว router ก็เป็นส่วนหนึ่งของ controller แต่เราจะแยกส่วนนี้ให้ทำงานออกจากการ
ซึ่งจะอธิบายต่อไป ใน folder ของ controllers ให้ทำการสร้างไฟล์ loginController.js ขึ้นและ ใน folder ของ routes ทำการสร้างไฟล์ login.js

CreateRoute

route&controller.jpg (20.72 KiB) Viewed 2338 times

ในไฟล์ของ loginController.js ให้ทำการเขียนโค้ดดังต่อไปนี้

โค้ด: เลือกทั้งหมด

const registerView = (req,res) =>{
	res.render("register",{
	});
}

const loginView = (req,res) => {
	res.render("login",{
	});
}

module.exports = {
	registerView,
	loginView
};

ไฟล์การเขียนโค้ดของส่วน loginController , registerView, loginView จะเป็นการ render ไฟล์ของ register.ejs และ login.ejs ใน view
ในส่วนของไฟล์ 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;

จากโค้ดจะเห็นได้ว่า มีการ route ไปหา registerView และ loginView ซึ่งเป็นการ exported มาจาก folder ของ controllers จาก ไฟล์ loginController
จากนั้นให้กลับไปที่ไฟล์ 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');
});

ทำการออกแบบหน้า login ของ website และหน้า register

LoginPage

Login.jpg (12.57 KiB) Viewed 2338 times

RegisterPage

Register.jpg (19.38 KiB) Viewed 2338 times

หลังจากที่ทำการ design หน้าเว็บของการ login และ register แล้ว ต่อมาจะเป็นการ เชื่อมต่อ nodeJs เค้ากับ mongoDB

โค้ด: เลือกทั้งหมด

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');
});

ConnectDB

ConnectMongoDB.jpg (10.03 KiB) Viewed 2338 times

ในตอนนี้ที่ 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.