การใช้ NodeJs ในการดึงข้อมูลจาก MySQL มาแสดง ติดต่อฐานข้อมูล express

Software testing ความรู้ สำหรับ Tester ผู้ทดสอบ เป็นส่วนสำคัญในการ test โปรแกรม การ ทดสอบโปรแกรมมีความรู้แนะนำไว้ในหมวดนี้

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

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

การใช้ NodeJs ในการดึงข้อมูลจาก MySQL มาแสดง ติดต่อฐานข้อมูล express

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

ในบทความนี้เราจะทำ workshop อย่างง่ายในการดึงข้อมูลจาก MySQL มาแสดง mysql โดยใช้ NodeJs



ใน workshop นี้ให้ทุกคนติดตั้ง Xampp, vscode และ nodeJs
โดยที่ต้องติดตั้ง package npm ดังนี้

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

npm init -y
npm install express
npm install ejs
npm install mysql
npm install express-validator 
จากนั้นให้เข้าไปที่ xampp เพื่อเข้าไปที่ mysql หรือ phpmyadmin กัน โดยให้สร้าง database, table, และ โครงสร้างตามดังรูปภาพ
database1.jpg
database1.jpg (27.48 KiB) Viewed 6140 times
จากนั้นให้เปิด Vscode ขึ้นมา และติดตั้ง package npm ให้เรียบร้อย สร้าง folder views และไฟล์ app.js ดังภาพ
โดย folder views เราจะใช้เก็บ templates หรือ layout ส่วนไฟล์ app.js เป็นตัว application nodejs ของเรา
app.jpg
app.jpg (6.06 KiB) Viewed 6140 times
เขียนโค้ดที่ไฟล์ app.js ดังนี้

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

const express = require('express')
const app = express()
const mysql = require('mysql')

app.set('view engine','ejs')
var conn = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'test'
})

conn.connect(function (error) 
{
    if(error){
        console.log(error)
    } else{
        console.log("MySQL Connected!")
    }
})

app.get("/", (request,response) =>{
    var sql = "SELECT test.* from person "

    conn.query(sql, function(error,results,fiels){
        if (error){
            console.log(error)
        } else{
            response.render("home",
            {
                resultsPerson : results
            })
        }
    })
})

app.listen(3000, () => console.log("Server started on port : 3000"))

// results คือค่าที่หน้าจะโยนออกไปแสดงผลที่ layout 
จากนั้นให้ไปที่โฟล์เดอร์ views ซึ่งถ้าทำการสร้างไฟล์ไว้แล้วก็เขียนโค้ดตามนี้

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

<!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>
</head>
<body>
    <h2>Hello</h2>
</body>
</html>
ที่หน้า layout เราจะทำการสร้าง table เพื่อใช้สำหรับการแสดงข้อมูลออกมา โดยมีโค้ดดังนี้

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

<!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>
</head>
<body>
    <table width = "800" border = "1">
        <thead>
            <th>Id</th>
            <th>Firstname</th>
            <th>Lastname</th>
        </thead>
        <tbody>
            <% if (resultsPerson.length > 0) { %>
                <% resultsPerson.forEach (function(recordPerson) { %>
                    <tr>
                        <td>
                            <%= recordPerson.id %>
                        </td>
                        <td>
                            <%= recordPerson.firstname %>
                        </td>
                        <td>
                            <%= recordPerson.lastname %>
                        </td>
                    </tr>
                <% }) %>
            <% } else { %>
                <tr>
                    <td colspan = "100%">- ไม่มีข้อมูล -</td>
                </tr>
            <% } %>
        </tbody>
    </table>
</body>
</html>
หลังจากนั้นไปที่ไฟล์ app.js เปิด terminal พิมพ์คำสั่ง node app.js เปิดสั่ง run server ขึ้นมา

running.jpg
running.jpg (6.78 KiB) Viewed 6140 times
ไปที่หน้า browser ที่ช่อง URL ให้พิมพ์ว่า localhost:3000 จากนั้นจะปรากฏหน้าต่างของ website ของเราขึ้นซึ่งยังไม่มีข้อมูล
results.jpg
results.jpg (11.59 KiB) Viewed 6140 times
ถ้าหากอยากให้มีการแสดงข้อมูลให้เราไปทำการ insert ข้อมูลจาก MySQL ดังรูปภาพนี้
record.jpg
record.jpg (8.6 KiB) Viewed 6140 times
จากนั้นให้เปิดหน้า website ขึ้นมาอีกครั้งเพื่อทำการแสดงผล
results2.jpg
results2.jpg (13.9 KiB) Viewed 6140 times

สรุปจากบทความนี้ เป็นความรู้จาก mini project ที่ได้รับ ซึ่งอยากจะแชร์ความรู้ออกมาเป็นบทความหาก เพื่อมีใครที่สนใจอยากรู้แนวทางเบื้องต้นในการใช้ NodeJs เราก็สามารถนำนี่ไปประยุกต์ใช้งาน ได้ และสามารถประยุกต์ใช้งานกับ ได้กับ form คือการรับข้อมูลมาจาก form จากฝั่งของ client ที่เข้ามาใช้งาน สามารถอ่านได้จาก บทความ
การรับข้อมูลจาก form และบันทึกลงใน MySQL ด้วย , NodeJS ซึ่งทั้ง 2 บทความจะเกี่ยวพันธ์กันเราสามารถเอาความรู้จากบทนี้และ บท ความ การรับข้อมูลจาก form และบันทึกลงใน MySQL ด้วย NodeJS มาใช้งานร่วมกันได้
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41125
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: การใช้ NodeJs ในการดึงข้อมูลจาก MySQL มาแสดง

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

ตามโค้ดตัวอย่างมีข้อปรับปรุงดังนี้

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

    var sql = "SELECT test.* from person "
แก้เป็น

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

    let sql = "SELECT * from person "
เปลี่น
var sql
เป็น
let sql
เพราะ ตัวแปลอยู่ใน block

เปลี่ยน test.* เป็น * เพราะ ไม่มีตารางชื่อ test ในการ query ครั้งนี้
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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