EP 4: สอนการสร้างร้านค้าออนไลน์ด้วย Node.js, Express.js, React.js และ MySQL | E-Commerce

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

ในตอนที่ 4 นี้เราจะเรียนรู้เกี่ยวกับการเพิ่มฟังก์ชันการชำระเงินให้กับเว็บร้านค้าออนไลน์ของเรา โดยเราจะใช้ Express.js และ MySQL เพื่อจัดการข้อมูลการชำระเงิน และ React.js เพื่อสร้างหน้า Checkout ให้กับผู้ใช้ที่ต้องการสั่งซื้อสินค้า

เริ่มต้นด้วยการเชื่อมต่อ React.js กับ Express.js โดยสร้างหน้า Checkout โดยใช้ React.js ให้ซอร์สโค้ดดังนี้:

import React, { useState } from 'react';

function Checkout() {
  const [billingInfo, setBillingInfo] = useState({
    firstName: '',
    lastName: '',
    email: '',
    address: '',
    city: '',
    zipCode: '',
  });

  const handleChange = (e) => {
    setBillingInfo({
      ...billingInfo,
      [e.target.name]: e.target.value
    });
  }

  const handleSubmit = () => {
    // ส่งข้อมูลการชำระเงินไปยัง Express.js
  }

  return (
    <div>
      <h1>Checkout</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" name="firstName" value={billingInfo.firstName} onChange={handleChange} placeholder="First Name" />
        <input type="text" name="lastName" value={billingInfo.lastName} onChange={handleChange} placeholder="Last Name" />
        <input type="email" name="email" value={billingInfo.email} onChange={handleChange} placeholder="Email" />
        <input type="text" name="address" value={billingInfo.address} onChange={handleChange} placeholder="Address" />
        <input type="text" name="city" value={billingInfo.city} onChange={handleChange} placeholder="City" />
        <input type="text" name="zipCode" value={billingInfo.zipCode} onChange={handleChange} placeholder="Zip Code" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default Checkout;

ต่อมาเราจะสร้าง API ใน Express.js เพื่อรับข้อมูลการชำระเงินจาก React.js โดยใช้ MySQL เก็บข้อมูลการชำระเงินดังนี้:

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

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

app.post('/checkout', (req, res) => {
  const { firstName, lastName, email, address, city, zipCode } = req.body;

  const sql = `INSERT INTO payments (firstName, lastName, email, address, city, zipCode) VALUES ('${firstName}', '${lastName}', '${email}', '${address}', '${city}', '${zipCode}')`;
  db.query(sql, (err, result) => {
    if (err) {
      res.status(400).send(err);
    } else {
      res.status(200).send('Payment successful!');
    }
  });
});

app.listen(3001, () => {
  console.log('Server is running on port 3001');
});

ในโค้ดข้างต้นเราได้สร้าง API /checkout ใน Express.js ซึ่งจะรับข้อมูลการชำระเงินจาก React.js และบันทึกข้อมูลลงในตาราง payments ใน MySQL หากการชำระเงินสำเร็จเราจะส่งข้อความว่า "Payment successful!" กลับไปยัง React.js

ลองรัน Express.js ด้วยคำสั่ง node server.js และ React.js ด้วยคำสั่ง npm start เพื่อเห็นว่าการชำระเงินทำงานอย่างถูกต้องหรือไม่

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