NodeJs & Express Js CRUD MySQL Part 2

สวัสดีครับ ในตอนที่ 2 นี้จะเป็นการใช้งาน Express Js เชื่อมต่อกับ MySQL กันครับ
โดยตัวอย่างที่แสดงนี้จะมีเนื้อหามาจากตอนที่ 1 ครับ
https://monkeywebstudio.com/nodejs-express-js-curd-mysql-part-1/

ก่อนอื่นเรามาทำการสร้างฐานข้อมูลกันก่อนเลยครับ

ตัวอย่างจะสร้างฐานข้อมูลชื่อว่า Demo

CREATE DATABASE demo;

จากนั้นสร้างตารางดังนี้ครับ

CREATE TABLE `posts` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(60) CHARACTER SET utf8 NOT NULL,
 `content` text CHARACTER SET utf8 NOT NULL,
 `author` varchar(20) CHARACTER SET utf8 NOT NULL,
 `created_at` date NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

จากนั้น Insert ข้อมูลเบื้องต้นดังนี้

INSERT INTO `posts` (`id`, `title`, `content`, `author`, `created_at`) VALUES
(1, 'Urna Nec Associates', 'facilisis, magna tellus faucibus leo, in lobortis tellus justo sit amet nulla. Donec non justo. Proin non massa non ante bibendum ullamcorper. Duis cursus, diam at pretium aliquet, metus urna convallis erat, eget tincidunt dui augue eu tellus. Phasellus elit pede, malesuada vel, venenatis vel, faucibus id, libero. Donec consectetuer', 'Noble Garrett', '2019-03-16'),
(2, 'Magna Phasellus Company', 'pede nec ante blandit viverra. Donec tempus, lorem fringilla ornare placerat, orci lacus vestibulum lorem, sit amet ultricies sem magna nec quam. Curabitur vel lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec dignissim magna a tortor. Nunc commodo auctor velit. Aliquam nisl. Nulla eu', 'Austin Dyer', '2018-08-29'),
(3, 'Velit Quisque Company', 'vel, mauris. Integer sem elit, pharetra ut, pharetra sed, hendrerit a, arcu. Sed et libero. Proin mi. Aliquam gravida mauris ut mi. Duis risus odio, auctor vitae, aliquet nec, imperdiet nec, leo. Morbi neque tellus, imperdiet non, vestibulum nec, euismod in, dolor. Fusce feugiat. Lorem ipsum dolor sit amet, consectetuer', 'Rogan Garza', '2019-11-15'),
(4, 'Vel Sapien Imperdiet Corp.', 'Curabitur egestas nunc sed libero. Proin sed turpis nec mauris blandit mattis. Cras eget nisi dictum augue malesuada malesuada. Integer id magna et ipsum cursus vestibulum. Mauris magna. Duis dignissim tempor arcu. Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus non magna. Nam ligula elit, pretium et, rutrum', 'Rigel Gutierrez', '2020-07-23'),
(5, 'In At Corp.', 'non, lacinia at, iaculis quis, pede. Praesent eu dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eget magna. Suspendisse tristique neque venenatis lacus. Etiam bibendum fermentum metus. Aenean sed pede nec ante blandit viverra. Donec tempus, lorem fringilla ornare placerat, orci lacus vestibulum lorem,', 'Hunter Burks', '2019-06-21');

จากนั้นเปิด Command Prompt ไปที่ Part ที่เราติดตั้ง Project ของเราไว้ ตัวอย่างไปที่
D:/nodeJs/demo
พิมพ์คำสั่ง  npm install mysql –save

จากนั้นแก้ไข Code ที่ nodeJs/demo/server.js อีกครั้ง เพื่อเรียกใช้งาน MySQL

const express = require('express')
const app = express()
const port = 3000

const mysql = require('mysql');

var connection = mysql.createConnection({
	host : 'localhost',
	user : 'root',
	password : '',
	database : 'demo'
});

connection.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
});

app.get('/',(req,res) => {
	connection.query('SELECT * FROM posts',(err,result) => {
		res.send(result);
	})
});

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

ทดสอบการทำงาน โดยการ รันคำสั่ง node server.js อีกครั้ง
(หมายเหตุ ทุกครั้งที่มีการแก้ไข ไฟล์ server.js ต้องมารันคำสั่ง node server.js ใหม่ทุกครั้ง)

ทดลองไปที่ url http://localhost:3000 ถ้าไม่มีอะไรผิดพลาดจะแสดงข้อมูลจาก Database MySQL ดังนี้

ต่อมาเราจะมาใช้งานสิ่งที่เรียกว่า template engines ใน Express Js

Template Engine คือ เครื่องมือช่วยในการเขียน และ แทนค่าตัวแปรต่าง ๆ   จากนั้นจะทำการสร้างเป็น html มาแสดงผลให้เราเห็นอีกครั้ง ซึ่ง Template Engine จะมีรูปแบบการเขียนที่แตกต่างกันออกไป

ในตัวอย่างนี้จะขอใช้ Template Engine ที่ชื่อว่า pug ครับ
ติดตั้งคำสั่ง

npm install pug

ดูรายละเอียดเพิ่มเติม การใช้งาน pug ได้ที่
https://pugjs.org

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ Template Engine สามารถดูเพิ่มเติมได้ที่
https://expressjs.com/en/resources/template-engines.html

เรามาลองใช้งานกันเลย

สร้าง Folder views  ไว้ที่ nodeJs/demo/views

จากนั้นสร้างไฟล์ nodeJs/demo/views/index.pug

html
	head
		meta(charset='utf-8')
		meta(http-equiv='X-UA-Compatible', content='IE=edge')
		meta(name='description', content='Some description')
		meta(name='viewport', content='width=device-width, initial-scale=1')
		link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css')
	body
		div.container
			h3 Todo 
			hr
			p
				a.btn.btn-primary(href='/add') Add New
			
			table.table.table-bordered
				tr
					th.text-center(width='5%') #
					th.text-left(width='35%') Title
					th.text-left(width='50%') Content
					th.text-left(width='5%') Edit
					th.text-left(width='5%') Delete
				for ps in posts
					tr
						td=ps.id
						td=ps.title
						td=ps.content
						td
							a.btn.btn-warning(href='edit/' + ps.id) Edit
						td
							a.btn.btn-danger(href='delete/' + ps.id) Delete

สร้างไฟล์ nodeJs/demo/views/add.pug

html
	head
		meta(charset='utf-8')
		meta(http-equiv='X-UA-Compatible', content='IE=edge')
		meta(name='description', content='Some description')
		meta(name='viewport', content='width=device-width, initial-scale=1')
		link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css')
	body
		div.container
			br 
			form(action='' method='POST')
				.form-group
					label(for='post_title') Title
					input#post_title.form-control(type='text' name='title' placeholder='Title' required='')
					label(for='post_content') Post Content
					textarea#post_content.form-control(style='height:100px;' name='content' placeholder='Write something' required='')
					label(for='author_name') Author Name
					input#author_name.form-control(type='text' name='author_name' placeholder='Enter author name' required='')
					br
					input.btn.btn-success(type='submit' value='ADD')
			
					a.btn.btn-info(href='/') Back

สร้างไฟล์ nodeJs/demo/views/edit.pug

html
	head
		meta(charset='utf-8')
		meta(http-equiv='X-UA-Compatible', content='IE=edge')
		meta(name='description', content='Some description')
		meta(name='viewport', content='width=device-width, initial-scale=1')
		link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css')
	body
		div.container
			br 
			form(action='' method='POST')
				.form-group
					label(for='post_title') Title
					input#post_title.form-control(type='text' name='title' placeholder='Title' value=post.title required='')
					label(for='post_content') Post Content
					textarea#post_content.form-control(style='height:100px;' name='content' placeholder='Write something' required='') #{post.content }
					label(for='author_name') Author Name
					input#author_name.form-control(type='text' name='author_name' placeholder='Enter author name' value=post.author required='')
					br
					input.btn.btn-success(type='submit' value='UPDATE')

					a.btn.btn-info(href='/') Back

ติดตั้งคำสั่ง npm install body-parser –save  เพื่อให้สามารถรับค่าข้อมูล Json ได้

npm install body-parser --save

แก้ไขไฟล์ nodeJs/demo/server.js ดังนี้

const express = require('express');
const app = express();
const port = 3000;
const mysql = require('mysql');
const bodyParser = require('body-parser')

app.set('view engine','pug');

app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

var connection = mysql.createConnection({
	host : 'localhost',
	user : 'root',
	password : '',
	database : 'demo'
});

connection.connect(function(err) {
  if (err) throw err;
  console.log("Connected!");
});

//app.get('/',(req,res) => res.send('hello world'));
app.get('/',(req,res) => {
	connection.query('SELECT * FROM posts',(err,result) => {
		res.render('index',{
			posts:result
		});
	})
});

app.get('/add',(req,res) => {
	res.render('add');
});

app.post('/add',(req,res) => {
	const title = req.body.title;
	const content = req.body.content;
	const author_name = req.body.author_name;
	const post = {
		title:title,
		content:content,
		author:author_name,
		created_at:new Date()
	}
	connection.query('INSERT INTO posts SET ?',post,(err) => {
		console.log('Data Inserted');
		return res.redirect('/');
	});
});

app.get('/edit/:id',(req,res) => {
	
	const edit_postID = req.params.id;
	
	connection.query('SELECT * FROM posts WHERE id=?',[edit_postID],(err,results) => {
		if(results){
			res.render('edit',{
				post:results[0]
			});
		}
	});
});

app.post('/edit/:id',(req,res) => {
	const update_title = req.body.title;
	const update_content = req.body.content;
	const update_author_name = req.body.author_name;
	const userId = req.params.id;
	connection.query('UPDATE `posts` SET title = ?, content = ?, author = ? WHERE id = ?', [update_title, update_content, update_author_name, userId], (err, results) => {
        if(results.changedRows === 1){
            console.log('Post Updated');
        }
		return res.redirect('/');
    });
});

app.get('/delete/:id',(req,res) => {
    connection.query('DELETE FROM `posts` WHERE id = ?', [req.params.id], (err, results) => {
        return res.redirect('/');
    });	
});

app.listen(port,() => console.log('Server Runing'));

ลองรัน Node Js ดูอีกครั้ง ด้วยคำสั่ง node server.js

ลองเปิด Web Browser http://localhost:3000

จะแสดงหน้าจอสำหรับ เพิ่ม แก้ และ ลบข้อมูลได้

Source Code ตัวอย่าง