หลังจากที่ได้ทำการเกริ่นนำหัวข้อกันไปแล้วให้ ทุกวันติดตั้ง
- VsCODE
NodeJS
Xampp
โดยมีอยู่ด้วยกัน 4 column เพื่อใช้งานบันทึกข้อมูลที่รับมาจาก client หรือ form นั้นเอง หน้าตาของเจ้าตัว database และ table ก็จะเห็นได้ตามภาพ
หลังจากนั้นให้เราสร้างโฟลเดอร์ที่จะใช้สร้าง app ของ NodeJs สร้าง โฟล์เดอร์ และ ติดตั้ง package npm
- npm init -y
npm install express
npm install ejs
npm install mysql
npm install body-parser
app.js
โค้ด: เลือกทั้งหมด
var mysql = require('mysql')
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'nodejs_test'
})
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NodeJs</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class = "container p-5">
<h1 class = " mb-5 text-uppcase">Create Data User</h1>
<div class = "row">
<div class = "col-sm-5 bg-light rounded py-5 text-align: center">
<form method = "POST" action = '/users/create'>
<div class = "form-group">
<label>FullName</label><br>
<input type = "text" name = "FullName" class = "form-control" placeholder="Enter FullName"><br>
<label>Email</label><br>
<input type = "text" name = "Email" class = "form-control" placeholder = "Enter Email"><br>
<label>Age</label><br>
<input type = "number" name = "Age" class = "form-control" placeholder = "Enter Age"><br>
</div>
<button>
</form>
</div>
</div>
</div>
</body>
</html>
โค้ด: เลือกทั้งหมด
const mysql = require('mysql')
const express = require('express')
const app = express()
const ejs = require('ejs')
const bodyParser = require('body-parser')
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'nodejs_test'
})
app.set('view engine', 'ejs')
app.use(bodyParser.urlencoded({extended:true}))
app.use(bodyParser.json())
app.get('/', function(request,response) {
response.render('users')
})
app.post('/users/create', function(request,response) {
response.render('users')
})
app.listen(3000, () => console.log("Server started on port : 3000"))
โค้ด: เลือกทั้งหมด
const mysql = require('mysql')
const express = require('express')
const app = express()
const ejs = require('ejs')
const bodyParser = require('body-parser')
var connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'nodejs_test'
})
app.set('view engine', 'ejs')
app.use(bodyParser.urlencoded({extended:true}))
app.use(bodyParser.json())
app.get('/', function(request,response) {
response.render('users')
})
app.post('/users/create', function(request,response) {
var username = request.body.FullName
var email = request.body.Email
var age = request.body.Age
connection.query("INSERT INTO nodejs_form (fullname,email,age) VALUES(?,?,?)", [username,email,age], function(err,result,fields){
if (err) throw err
console.log(result )
})
response.render('users')
})
app.listen(3000, () => console.log("Server started on port : 3000"))
ให้กลับไปที่ MySQL แล้วทำการ check ว่ามีข้อมูลถูกส่งมาที่ database หรือไม่
การใช้ MySQL เพื่อรองรับข้อมูลจากผู้ใช้งานมีประโยชน์อย่างมากเพราะเป็น Database ที่เป็นที่นิยมใช้งานการ testing เพื่อให้เห็นว่าเราจะสามารถใช้ NodeJs แล้วทำการรับข้อมูลที่ได้จากผู้เพื่อนำไป record ไว้บน database mysql ได้อย่างไร และ ตัว body-parser นั้นก็จะเป็นตัวแปรสำคัญในการทำงานตรงนี้เพราะ body-parser ซึ่งเป็น package ตัวหนึ่งที่จะช่วยให้เราสามารถที่อ่านข้อมูลจากฝั่ง client POST ได้ โดยผ่าน request.body
https://www.sitepoint.com/using-node-my ... pt-client/
https://www.geeksforgeeks.org/body-pars ... r%20module.
https://www.npmjs.com/package/mysql