สวัสดีครับ/สวัสดีค่ะ ในบทความนี้เราจะสอนทำเว็บร้านค้าออนไลน์โดยใช้เทคโนโลยี Node.js, Express.js, React.js และ MySQL ซึ่งเป็นเครื่องมือที่สามารถช่วยให้เราสร้างร้านค้าออนไลน์ได้อย่างมีประสิทธิภาพ โดยช่วงนี้ E-Commerce กำลังเป็นที่นิยม ถ้าคุณสนใจทำธุรกิจออนไลน์ อย่าพลาดที่จะอ่านบทความนี้เลย!
ในตอนที่ 7 ของเรื่องเราจะมาเรียนรู้วิธีการเพิ่มสินค้าลงในเว็บร้านค้าของเรา โดยการเชื่อมต่อระบบของเรากับฐานข้อมูล MySQL เพื่อเก็บข้อมูลสินค้าที่ประกอบไปในระบบ
- ติดตั้ง 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/
- สร้าง 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)
);- เชื่อมต่อ 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');
});- เพิ่มสินค้าในระบบ
เริ่มต้นโดยสร้างหน้าเว็บในโฟลเดอร์ 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>- สร้าง 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');
});
});- ทดสอบการทำงาน
เรียกใช้โปรแกรมโดยใช้คำสั่ง
node index.jsเข้าไปที่ http://localhost:3000/addProduct.html เพื่อเพิ่มสินค้าในระบบ
นั่นคือขั้นตอนทั้งหกที่จะสอนทำเว็บร้านค้าออนไลน์ด้วย Node.js, Express.js, React.js และ MySQL ในบทความนี้ เราได้เรียนรู้วิธีการเพิ่มสินค้าลงในระบบ eCommerce ของเรา อย่าลืมทยอไปขั้นตอนถัดไปในบทความต่อไปนะครับ/คะ!
ขอบคุณครับผมม ถ้าอยากเคลียร์ฟอร์ม หลังบันทึกมีคำสั่งไหนครับผม
ขอบคุณครับ โปรเจคที่ทำนี่สามารถ deploy ใน share hosting ได้ไหมครับ
ขอบคุณครับ
ไปกันต่อครับ 🙂
ดีมากๆเลยครับซีรีส์นี้ ตามจนจะครบแล้วครับ // ขอถามนิดนึงนะครับ ตรง tag <table> ถ้าเอาไว้นอกกับไว้ใน tag <form> ต่างกันยังไงหรอครับ หรือไม่มีผลอะไรจะเอาไว้ตรงไหนก็ได้รึป่าวครับบบ
สุดยอดทุกคลิปเลยครับ
สุดยอดเช่นเคย อธิบายได้ชัดเจนฟังง่าย…ถ้ามีเรื่อง หน้ารายงาน pdf ซักหน่อยไว้ตอนท้ายๆจะดีไม่น้อยครับ
🚩✌✌✌
วีดีโอทรงคุณค่าจริงๆครับ