การสอนการสร้างเว็บไซต์ร้านค้าออนไลน์ด้วย Node.js, Express.js, React.js และ MySQL | E-Commerce | ตอนที่ 5

สวัสดีครับ/ค่ะ ในตอนนี้เราจะมาเรียนรู้วิธีการสร้างเว็บร้านค้าออนไลน์โดยใช้เทคโนโลยี Node.js, Express.js, React.js และ MySQL ซึ่งเป็นเทคโนโลยีที่มีความนิยมและใช้งานได้ง่าย โดยเราจะมาเริ่มต้นจากตอนที่ 5 ของคอร์สนี้

ในตอนที่ 5 เราจะทำการสร้างฟอร์มให้ผู้ใช้สามารถเพิ่มสินค้าใหม่ลงในร้านค้าของเราได้ โดยเราจะใช้ React.js ในการสร้าง UI และ Express.js ทำหน้าที่เป็น API ที่จะช่วยในการส่งข้อมูลระหว่าง Frontend กับ Backend

เริ่มจากการสร้าง React Component สำหรับฟอร์มเพิ่มสินค้า โดยสร้างไฟล์ AddProduct.js ในโฟลเดอร์ src/components

import React, { useState } from 'react';

const AddProduct = () => {
  const [productName, setProductName] = useState('');
  const [price, setPrice] = useState('');

  const handleSubmit = async () => {
    try {
      const response = await fetch('/api/products', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ productName, price })
      });
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error adding product:', error);
    }
  };

  return (
    <div>
      <input type="text" placeholder="Product Name" value={productName} onChange={(e) => setProductName(e.target.value)} />
      <input type="text" placeholder="Price" value={price} onChange={(e) => setPrice(e.target.value)} />
      <button onClick={handleSubmit}>Add Product</button>
    </div>
  );
};

export default AddProduct;

จากนั้นสร้าง route ใหม่ใน Express.js ที่จะรับข้อมูลการเพิ่มสินค้าจากฟอร์ม

app.post('/api/products', async (req, res) => {
  const { productName, price } = req.body;

  try {
    const result = await pool.query('INSERT INTO products (product_name, price) VALUES (?, ?)', [productName, price]);
    res.status(201).json({ message: 'Product added successfully' });
  } catch (error) {
    console.error('Error adding product:', error);
    res.status(500).json({ message: 'Error adding product' });
  }
});

และสร้าง SQL query ในการเพิ่มสินค้าใหม่ในฐานข้อมูล MySQL

INSERT INTO products (product_name, price) VALUES (?, ?);

ทดสอบโปรเจคของคุณโดยทำการเข้าไปใน Folder ของ Frontend และ Backend และรันคำสั่งตัวนี้

npm start

หลังจากนี้คุณจะสามารถเข้าถึงฟอร์มการเพิ่มสินค้าในหน้าเว็บได้ และเมื่อคุณกรอกข้อมูลและกดปุ่ม Add Product ข้อมูลจะถูกส่งไปยัง Express.js API และบันทึกลงในฐานข้อมูล MySQL อย่าลืมทดสอบให้แน่ใจว่าคุณสามารถเพิ่มสินค้าได้สำเร็จ

หวังว่าทุกคนจะพอใจกับคอร์สนี้แล้วและขอให้โชคดีในการพัฒนาเว็บร้านค้าออนไลน์ของคุณครับ/ค่ะ ขอบคุณครับ/ค่ะ!