การใช้งาน PostgreSQL Select from Table Using Prepared Statement ในภาษา Next.js

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

ความสำคัญของ Prepared Statement

ก่อนที่จะเริ่มต้นเขียนโค้ด เรามาทำความเข้าใจกันก่อนว่า Prepared Statement คืออะไร? Prepared Statement เป็นวิธีหนึ่งในการตั้งค่าคำสั่ง SQL ที่มีการใช้งานหลายครั้ง โดยจะมีการปรับปรุงสภาพแวดล้อมสำหรับการให้บริการข้อมูลซ้ำบ่อยครั้ง ซึ่งช่วยลดค่าใช้จ่ายในการสร้างคำสั่ง SQL ที่ซ้ำซาก และยังช่วยป้องกัน SQL Injection อีกด้วย

สร้างโปรเจ็กต์ Next.js

ก่อนอื่นเราจะสร้างโปรเจ็กต์ Next.js ใหม่ โดยใช้คำสั่งต่อไปนี้ใน command line:

 npx create-next-app my-app
cd my-app

ติดตั้ง PostgreSQL Client

เพื่อให้สามารถเชื่อมต่อกับ PostgreSQL เราต้องติดตั้งไลบรารีที่ใช้ในการเชื่อมต่อ PostgreSQL ด้วยโปรเจ็กต์ Next.js ของเรา โดยใช้คำสั่ง:

 npm install pg

การตั้งค่า PostgreSQL

ในการเชื่อมต่อกับฐานข้อมูล PostgreSQL คุณต้องมีข้อมูลการเชื่อมต่อ เช่น ชื่อผู้ใช้ รหัสผ่าน ชื่อฐานข้อมูล และพอร์ต นี่คือวิธีการตั้งค่าการเชื่อมต่อ:

1. สร้างไฟล์ `db.js` ในโฟลเดอร์ `lib` และใส่โค้ดต่อไปนี้เข้าไป:

 // lib/db.js

import { Pool } from 'pg';

const pool = new Pool({
  user: 'your_username',
  host: 'localhost',
  database: 'your_database',
  password: 'your_password',
  port: 5432,
});

export default pool;

การสร้างฟังก์ชันที่ใช้ Prepared Statement

ต่อไปเราจะสร้างฟังก์ชันในการดึงข้อมูลจากตารางที่เราสร้างไว้ในฐานข้อมูล โดยใช้ Prepared Statement ประกอบด้วยตัวอย่างโค้ดดังนี้:

 // pages/api/users.js

import db from '../../lib/db';

export default async function handler(req, res) {
  const { id } = req.query;

  try {
    // ใช้ Prepared Statement
    const result = await db.query('SELECT * FROM users WHERE id = $1', [id]);

    // ส่งข้อมูลกลับไปให้ผู้ใช้งาน
    res.status(200).json(result.rows);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

ในโค้ดข้างต้น `db.query()` เป็นการเรียกใช้คำสั่ง SQL ในฐานข้อมูล โดย `$1` เป็น Placeholder ที่ใช้สำหรับการป้องกัน SQL Injection ซึ่งจะถูกแทนที่ด้วยค่าจริงที่มาจาก `id`

การใช้งาน API

เมื่อเราได้สร้าง API แล้ว เราสามารถเรียกใช้ได้จากหน้า frontend ของเราโดยใช้ fetch API:

 // pages/index.js

import { useEffect, useState } from 'react';

export default function Home() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/users?id=1');
      const data = await res.json();
      setUsers(data);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

Use Case ในโลกจริง

การใช้ Prepared Statement มีประโยชน์อย่างมากในโลกจริง โดยเฉพาะในเมื่อเราต้องการดึงข้อมูลจากตารางที่มีขนาดใหญ่ หรือมีแนวโน้มที่จะมีการโจมตี SQL Injection การใช้ Prepared Statement จะช่วยให้ระบบของเราแข็งแกร่งและปลอดภัยมากขึ้น ดูตัวอย่างสถานการณ์ดังนี้:

เสริมสร้างทักษะของคุณที่ EPT

หากคุณต้องการเรียนรู้เกี่ยวกับการพัฒนาโปรแกรมอย่างลึกซึ้งและต้องการอัปสกิลของคุณในการใช้ฐานข้อมูลและ Next.js ทีมงาน EPT (Expert-Programming-Tutor) ของเรายินดีที่จะช่วยให้คุณเติบโตในเส้นทางการเรียนรู้ของคุณ ไม่ว่าคุณจะเป็นผู้เริ่มต้นหรือมืออาชีพ เรายินดีเปิดโอกาสในการเรียนรู้ที่จะช่วยเสริมสร้างความเชี่ยวชาญของคุณได้

สรุป

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

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