การใช้งาน MySQL Insert Data to Table Using Prepared Statement ในภาษา Next.js แบบง่ายๆ

ในโลกของการพัฒนาเว็บแอปพลิเคชันที่เป็นที่นิยมในปัจจุบัน Next.js คือหนึ่งในเฟรมเวิร์กที่ใช้ในการสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพสูง และยังให้เราสามารถทำงานกับฐานข้อมูล MySQL ได้อย่างรวดเร็ว จากบทความนี้เราจะมาสอนการใช้งาน MySQL ในการแทรกข้อมูล (Insert) ลงในตารางโดยใช้ Prepared Statement ซึ่งเป็นแนวทางที่ดีที่สุดในการป้องกัน SQL Injection และเพิ่มความปลอดภัยในการทำงานกับฐานข้อมูล

ทำความรู้จักกับ MySQL และ Prepared Statement

สำหรับผู้เริ่มต้น MySQL คือระบบการจัดการฐานข้อมูลเชิงสัมพันธ์ (RDBMS) ที่ได้รับความนิยมมากในหมู่ผู้พัฒนาแอปพลิเคชัน เพื่อการจัดการข้อมูลอย่างมีประสิทธิภาพ ในส่วนของ Prepared Statement คือรูปแบบการเขียน SQL ที่เตรียมพร้อมล่วงหน้า ทำให้เราสามารถป้องกันการโจมตีจาก SQL Injection และทำให้ประสิทธิภาพในการส่งคำสั่งให้กับฐานข้อมูลดีขึ้น

ความสำคัญของการใช้ Prepared Statement

การใช้ Prepared Statement มีข้อดีหลายประการในการพัฒนาแอปพลิเคชัน เช่น

การติดตั้ง Dependencies ที่เกี่ยวข้อง

ก่อนที่เราจะเริ่มเขียนโค้ด เราต้องมั่นใจว่าเราได้ติดตั้ง dependencies ที่จำเป็นแล้ว เราสามารถใช้ `mysql2` เป็น driver ในการเชื่อมต่อ MySQL กับ Next.js โดยรันคำสั่ง:

 npm install mysql2

โค้ดตัวอย่างการ Insert ข้อมูลด้วย Prepared Statement

เราจะสร้างฟังก์ชันการ insert ข้อมูลลงในฐานข้อมูล MySQL โดยใช้ Next.js ในการสร้าง API Route

1. สร้าง Database และ Table

ก่อนอื่นให้สร้างฐานข้อมูลและตารางใน MySQL ตามตัวอย่างด้านล่าง

 CREATE DATABASE testdb;

USE testdb;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL
);

2. สร้างฟังก์ชัน API ใน Next.js

สร้างไฟล์ใหม่ในโฟลเดอร์ `pages/api` ชื่อ `addUser.js`

 import mysql from 'mysql2/promise';

const connectionConfig = {
  host: 'localhost',
  user: 'yourUsername',
  password: 'yourPassword',
  database: 'testdb',
};

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body;

    try {
      const connection = await mysql.createConnection(connectionConfig);
      const sql = 'INSERT INTO users (name, email) VALUES (?, ?)';
      const [result] = await connection.execute(sql, [name, email]);

      res.status(201).json({ id: result.insertId, name, email });
    } catch (error) {
      res.status(500).json({ error: 'Error inserting data in the database' });
    } finally {
      if (connection && connection.end) connection.end();
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

3. การอธิบายโค้ด

Use Case ในโลกจริง

การใช้ Prepared Statement ในการ Insert ข้อมูลเหล่านี้มีประโยชน์ในหลายสถานการณ์ เช่น เว็บแอปพลิเคชันที่ใช้ระบบลงทะเบียนผู้ใช้ หากไม่มีการป้องกันที่ดี อาจมีผู้ไม่ได้รับอนุญาตพยายามโจมตีเพื่อแทรกข้อมูลที่ไม่ถูกต้องหรือข้อมูลที่เป็นอันตรายเข้าสู่ฐานข้อมูล ซึ่งอาจทำให้เกิดการสูญเสียข้อมูลหรือความเสียหายอื่น ๆ ต่อระบบของเรา

ตัวอย่างการใช้ API

เมื่อเราเขียนโค้ด API เสร็จ ให้สร้างฟอร์มสำหรับการเพิ่มผู้ใช้ใช้ในฟรอนต์เอนด์:

 import { useState } from 'react';

export default function AddUser() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('/api/addUser', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name, email }),
    });
    const data = await response.json();
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        required
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <button type="submit">Add User</button>
    </form>
  );
}

สรุป

การใช้ Prepared Statement ในการ Insert ข้อมูลลงใน MySQL ผ่าน Next.js นั้นไม่เพียงแต่จะทำให้การพัฒนาของเรามีความปลอดภัยขึ้น แต่ยังสามารถจัดการข้อมูลได้ง่ายและประสิทธิภาพดีกว่า การมีความรู้เกี่ยวกับฐานข้อมูลและวิธีการทำงานกับมัน เป็นเรื่องที่สำคัญสำหรับนักพัฒนาทุกคน

หากคุณมีความสนใจที่จะเรียนรู้การเขียนโปรแกรมเพิ่มเติม และพัฒนาทักษะทางด้านนี้ EPT (Expert-Programming-Tutor) พร้อมที่จะช่วยเหลือคุณ เพื่อเสริมสร้างความรู้และทักษะของคุณในด้านการพัฒนาซอฟต์แวร์และเทคโนโลยีที่เกี่ยวข้อง!

มาร่วมเรียนรู้ไปด้วยกันที่ EPT และสานฝันของคุณในโลกของการพัฒนาโปรแกรม!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง