, ,

เรียนรู้สร้างเว็บร้านค้าออนไลน์ด้วย Node.js, Express.js, React.js และ MySQL | อาจจะเรียนรู้การเพิ่มสินค้าด้วย! | EP 7

Posted by


สวัสดีครับ/สวัสดีค่ะ ในบทความนี้เราจะสอนทำเว็บร้านค้าออนไลน์โดยใช้เทคโนโลยี Node.js, Express.js, React.js และ MySQL ซึ่งเป็นเครื่องมือที่สามารถช่วยให้เราสร้างร้านค้าออนไลน์ได้อย่างมีประสิทธิภาพ โดยช่วงนี้ E-Commerce กำลังเป็นที่นิยม ถ้าคุณสนใจทำธุรกิจออนไลน์ อย่าพลาดที่จะอ่านบทความนี้เลย!

ในตอนที่ 7 ของเรื่องเราจะมาเรียนรู้วิธีการเพิ่มสินค้าลงในเว็บร้านค้าของเรา โดยการเชื่อมต่อระบบของเรากับฐานข้อมูล MySQL เพื่อเก็บข้อมูลสินค้าที่ประกอบไปในระบบ

  1. ติดตั้ง Node.js, Express.js, React.js และ MySQL

ก่อนที่จะเริ่มต้นการเขียนโค้ด เราต้องติดตั้ง Node.js, Express.js, React.js และ MySQL ลงในเครื่องของเราก่อน โดยสามารถดาวน์โหลด Node.js ได้จากเว็บไซต์ https://nodejs.org/en/ ส่วน Express.js และ React.js สามารถติดตั้งผ่าน npm (Node Package Manager) ได้ โดยใช้คำสั่ง

npm install express react

สำหรับ MySQL สามารถดาวน์โหลดได้จากเว็บไซต์ https://www.mysql.com/

  1. สร้าง MySQL Database

หลังจากที่เราติดตั้ง MySQL เรียบร้อยแล้ว เราต้องสร้าง Database ของเรา โดยสามารถใช้คำสั่ง SQL ด้านล่างเพื่อสร้างตารางสำหรับเก็บข้อมูลสินค้า

CREATE DATABASE ecommerce;
USE ecommerce;

CREATE TABLE products (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255),
    price DECIMAL(10, 2),
    description TEXT,
    image VARCHAR(255)
);
  1. เชื่อมต่อ Express.js กับ MySQL

เริ่มต้นโดยสร้างไฟล์ index.js ในโฟลเดอร์ของโปรเจ็กต์ของเรา จากนั้นเขียนโค้ดในไฟล์ด้านล่างนี้เพื่อการเชื่อมต่อ Express.js กับ MySQL

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

const app = express();

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

connection.connect((err) => {
    if (err) {
        console.error('Error connecting to MySQL: ' + err.stack);
        return;
    }

    console.log('Connected to MySQL as id ' + connection.threadId);
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});
  1. เพิ่มสินค้าในระบบ

เริ่มต้นโดยสร้างหน้าเว็บในโฟลเดอร์ public โดยสร้างไฟล์ addProduct.html และเขียนโค้ด HTML ด้านล่างเพื่อสร้างฟอร์มเพื่อเพิ่มสินค้าในระบบ

<!DOCTYPE html>
<html>
<head>
    <title>Add Product</title>
</head>
<body>
    <h1>Add Product</h1>
    <form action="/product" method="POST">
        <input type="text" name="name" placeholder="Product Name"><br>
        <input type="text" name="price" placeholder="Product Price"><br>
        <textarea name="description" placeholder="Product Description"></textarea><br>
        <input type="file" name="image"><br>
        <button type="submit">Add Product</button>
    </form>
</body>
</html>
  1. สร้าง API สำหรับเพิ่มสินค้าในระบบ

ในไฟล์ index.js เพิ่มโค้ดด้านล่างนี้เพื่อสร้าง API สำหรับเพิ่มสินค้าในระบบ

app.post('/product', (req, res) => {
    const { name, price, description, image } = req.body;

    connection.query('INSERT INTO products (name, price, description, image) VALUES (?, ?, ?, ?)', [name, price, description, image], (err, result) => {
        if (err) {
            console.error('Error adding product to database: ' + err.stack);
            return res.status(500).send('Error adding product');
        }

        res.status(200).send('Product added successfully');
    });
});
  1. ทดสอบการทำงาน

เรียกใช้โปรแกรมโดยใช้คำสั่ง

node index.js

เข้าไปที่ http://localhost:3000/addProduct.html เพื่อเพิ่มสินค้าในระบบ

นั่นคือขั้นตอนทั้งหกที่จะสอนทำเว็บร้านค้าออนไลน์ด้วย Node.js, Express.js, React.js และ MySQL ในบทความนี้ เราได้เรียนรู้วิธีการเพิ่มสินค้าลงในระบบ eCommerce ของเรา อย่าลืมทยอไปขั้นตอนถัดไปในบทความต่อไปนะครับ/คะ!

0 0 votes
Article Rating

Leave a Reply

9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@last-year
1 day ago

ขอบคุณครับผมม ถ้าอยากเคลียร์ฟอร์ม หลังบันทึกมีคำสั่งไหนครับผม

@ธนกฤตตาสุขะ
1 day ago

ขอบคุณครับ โปรเจคที่ทำนี่สามารถ deploy ใน share hosting ได้ไหมครับ

@witty2175
1 day ago

ขอบคุณครับ

@krittinklinhom9017
1 day ago

ไปกันต่อครับ 🙂

@totokung8
1 day ago

ดีมากๆเลยครับซีรีส์นี้ ตามจนจะครบแล้วครับ // ขอถามนิดนึงนะครับ ตรง tag <table> ถ้าเอาไว้นอกกับไว้ใน tag <form> ต่างกันยังไงหรอครับ หรือไม่มีผลอะไรจะเอาไว้ตรงไหนก็ได้รึป่าวครับบบ

@10bestbest
1 day ago

สุดยอดทุกคลิปเลยครับ

@delphidelphidelphi
1 day ago

สุดยอดเช่นเคย อธิบายได้ชัดเจนฟังง่าย…ถ้ามีเรื่อง หน้ารายงาน pdf ซักหน่อยไว้ตอนท้ายๆจะดีไม่น้อยครับ

@jokerbanny
1 day ago

🚩✌✌✌

@arichaikongsawang5925
1 day ago

วีดีโอทรงคุณค่าจริงๆครับ

9
0
Would love your thoughts, please comment.x
()
x