การรับข้อมูลจาก form และบันทึกลงใน MySQL ด้วย NodeJS

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

Nes224
PHP Super Member
PHP Super Member
โพสต์: 441
ลงทะเบียนเมื่อ: 20/12/2021 11:36 am

การรับข้อมูลจาก form และบันทึกลงใน MySQL ด้วย NodeJS

โพสต์ที่ยังไม่ได้อ่าน โดย Nes224 »

สวัสดีครับวันนี้ผมมีบทความอยากจะมาแชร์ความรู้เกี่ยวกับ NodeJS อีกครั้งโดยจะแชร์ความเกี่ยวกับการรับข้อมูลจาก form ที่ผู้ใช้งาน กรอกเข้ามาแล้วนำข้อมูลไป insert หรือ record ไว้ที่ตัว database ด้วย MySQL กัน ซึ่งจะเป็นประโยชน์อย่างมากสำหรับผู้เริ่มต้นที่กำลังศึกษาการใช้งาน NodeJS อยู่


หลังจากที่ได้ทำการเกริ่นนำหัวข้อกันไปแล้วให้ ทุกวันติดตั้ง
  • VsCODE
    NodeJS
    Xampp
จากนั้นทำการ create database ขึ้นมาซึ่งทุกคนจะตั้งชื่อเป็นอะไรก็ได้แล้วแต่ตามสะดวกกัน โดยในบทความนี้จะใช้ชื่อ database ว่า NodeJs_test และจะสร้าง table
โดยมีอยู่ด้วยกัน 4 column เพื่อใช้งานบันทึกข้อมูลที่รับมาจาก client หรือ form นั้นเอง หน้าตาของเจ้าตัว database และ table ก็จะเห็นได้ตามภาพ
structure
structure
database&table.jpg (30.52 KiB) Viewed 1777 times
หลังจากนั้นให้เราสร้างโฟลเดอร์ที่จะใช้สร้าง app ของ NodeJs สร้าง โฟล์เดอร์ และ ติดตั้ง package npm
  • npm init -y
    npm install express
    npm install ejs
    npm install mysql
    npm install body-parser
structure
structure
folder&file.jpg (12.63 KiB) Viewed 1777 times
ที่ไฟล์ app.js ทำการเขียนโค้ดเพื่อเชื่อมต่อกับ database

app.js

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

var mysql = require('mysql')
var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'nodejs_test'
})
หลังจากนั้นเราจะมาสร้าง form html จะใช้ในการรองรับการ insert ข้อมูล โดยให้ไปที่ folder views จะเห็นไฟล์ users.ejs อยู่ให้ทำการเขียนโค้ด html

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

<!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>
หลังจากที่หน้า UI ไปแล้ว ให้กลับมาที่ไฟล์ app.js ต่อเพื่อทำการสร้าง app.post ในการรองรับการ request จากผู้ใช้งาน

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

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"))
ให้ทำการทดลอง run โดยพิมพ์คำสั่งที่ terminal node app.js
portOn
portOn
result.jpg (8.2 KiB) Viewed 1777 times
หลังจากนั้นทำการสร้างตัวแปรที่จะใช้ในการรองรับข้อมูลที่ request มาจาก client และนำข้อมูลเหล่านั้นไป record ที่ ตัว database

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

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"))
ทำการลอง กรอกข้อมูลจากหน้า UI
result
result
Test.jpg (24.32 KiB) Viewed 1777 times
terminal
terminal
result1.jpg (22.63 KiB) Viewed 1777 times
ให้กลับไปที่ MySQL แล้วทำการ check ว่ามีข้อมูลถูกส่งมาที่ database หรือไม่
record
record
databaseResult.jpg (20.06 KiB) Viewed 1777 times

การใช้ 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
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 72