boychawin.com
How to use CRUD with Prisma in Next.js

How to use CRUD with Prisma in Next.js

การใช้งาน CRUD (Create, Read, Update, Delete) กับ Prisma ใน Next.js

Boy Chawin
Boy Chawin

Dec 12, 2023

การใช้งาน CRUD (Create, Read, Update, Delete) กับ Prisma ใน Next.js นั้น เริ่มต้นด้วยการเซ็ตอัพ Prisma ในโปรเจคของคุณ แล้วใช้ Prisma Client ที่ถูกสร้างขึ้นเพื่อทำการดึงข้อมูลจากฐานข้อมูลของคุณ

ขั้นตอนการเตรียมข้อมูล

  1. ติดตั้ง Prisma ใน Next.js

  2. ติดตั้ง เซิร์ฟเวอร์จำลอง เช่น MAMP แล้วคลิกที่ปุ่ม "Start Servers"

  3. ไปที่โปรแกรมจัดการฐานข้อมูล เช่น http://localhost/phpmyadmin/

  4. สร้าง database ตั้งชื่อ เช่น mydb

ตัวอย่างการใช้ Prisma CRUD ใน Next.js (14)

สมมติว่าคุณมีโมเดล Todo ใน schema ของ Prisma:

// schema.prisma
model Todo {
  id        Int      @id @default(autoincrement())
  task      String
  completed Boolean  @default(false)
}

การสร้างหน้าตารางงาน (Todo List) ที่มีการใช้งานฟอร์มและปุ่มสำหรับการเพิ่ม/แก้ไข/ลบงานต่าง ๆ บนแอปพลิเคชันนี้เป็นระบบ CRUD (Create, Read, Update, Delete) โดยมีรายละเอียดดังนี้:

ส่วนของโค้ด

import และ interface

import { FormButton } from './FormButton';
import { create, deleteTodo, edit, todoStatus } from '@/utils/action';

interface Todo {
    id: number;
    task: string;
    completed: boolean;
}

interface Props {
    todos: Todo[] | null;
}
  • FormButton: เป็นคอมโพเนนต์ที่ใช้สร้างปุ่มในแอปพลิเคชัน
  • create, deleteTodo, edit, todoStatus: ฟังก์ชันที่ใช้สำหรับการจัดการข้อมูลฝั่งเซิร์ฟเวอร์ (สร้าง, ลบ, แก้ไข, และอัปเดตสถานะงาน)

TodoList Component

const TodoList: React.FC<Props> = ({ todos }) => {
    // ส่วนที่แสดงรายการ Todo และฟอร์มสำหรับแก้ไข/ลบงานแต่ละรายการ
}
  • TodoList: คอมโพเนนต์ที่ใช้แสดงรายการงานทั้งหมด รับ todos เป็น props เพื่อแสดงรายการงาน

ส่วนของการแสดงผล

ส่วนของฟอร์มเพิ่มงาน

<form action={create} className="flex mt-4">
    {/* ฟิลด์สำหรับกรอกข้อมูลงานใหม่ */}
    <input required name='input' className="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker" placeholder="Add Todo" />
    {/* ปุ่มสำหรับการเพิ่มงาน */}
    <FormButton classNames="flex-no-shrink p-2 border-2 rounded  border-green-500 hover:text-white text-green-500 hover:bg-green-500">Add</FormButton>
</form>
  • ฟอร์มสำหรับเพิ่มงานใหม่ มีช่องใส่ข้อความและปุ่มสำหรับการเพิ่ม

ส่วนของแสดงรายการงานแต่ละรายการ

{todos?.map(({ id, task, completed }) => (
    <div key={id} className={`flex mb-4 items-center`} >
        {/* การแสดงข้อความงาน แบ่งเป็นส่วนที่เสร็จและยังไม่เสร็จ */}
        {/* ฟอร์มสำหรับแก้ไขงาน */}
        {/* ฟอร์มสำหรับเปลี่ยนสถานะงาน (เสร็จ/ยังไม่เสร็จ) */}
        {/* ฟอร์มสำหรับลบงาน */}
    </div>
))}
  • แสดงรายการงานทั้งหมด แต่ละงานมีตัวเลือกในการแก้ไข/เปลี่ยนสถานะ/ลบ

ทั้งหมดนี้เป็นส่วนของแอปพลิเคชันที่ใช้งาน CRUD ของ Todo List ด้วย React ซึ่งใช้ฟอร์มและปุ่มสำหรับการจัดการงานแต่ละรายการ โดยมีการใช้ฟังก์ชันต่าง ๆ จาก @/utils/action (มีโค้ดให้) ในการทำ CRUD กับฐานข้อมูลของ Todo List บนฝั่งเซิร์ฟเวอร์ด้วย Prisma

Preview

demo.png

อย่าลืมอ่านเอกสารของ Prisma สำหรับข้อมูลและแนวทางการใช้งานที่ละเอียดของ Prisma ในโปรเจค Next.js ของคุณนะครับ ถ้ามีข้อสงสัยหรือต้องการข้อมูลเพิ่มเติมก็สามารถถามได้เสมอครับ!

ระบบจองห้อง/โต๊ะ PHP & MySQLi

ระบบจองห้อง, ระบบจัดการทรัพยากรสารสนเทศ

ระบบจองห้อง/โต๊ะ PHP & MySQLi

Nov 22, 2023

Web ระบบเบิก-จ่ายวัสดุ

ระบบเบิก-จ่ายวัสดุ อุปกรณ์และเครื่องเขียนสำนักงาน API PHP/MySQL

Web ระบบเบิก-จ่ายวัสดุ

Dec 5, 2023

How to install LINE (LIFF) ร่วมกับ React

การใช้ LINE Front-end Framework (LIFF) ร่วมกับ React และ TypeScript สำหรับการรับรองตัวตนและการเข้าถึงข้อมูล

How to install LINE (LIFF) ร่วมกับ React

Dec 6, 2023

เข้าสู่ระบบด้วย Credentials Provider In NextAuth.js Prisma EP.3

เข้าสู่ระบบโดยใช้ชื่อผู้ใช้และรหัสผ่าน ได้ง่ายๆ ด้วย provider credentials.

เข้าสู่ระบบด้วย Credentials Provider In NextAuth.js Prisma EP.3

Dec 6, 2023

How to install Prisma in Next.js 14

การติดตั้งและ setup โปรเจกต์ Next.js เพื่อใช้งานกับ Prisma อาจมีขั้นตอนหลายอย่างที่ต้องทำเพื่อให้โปรเจกต์สามารถเชื่อมต่อกับฐานข้อมูลและใช้ Prisma ได้อย่างถูกต้อง

How to install Prisma in Next.js 14

Dec 7, 2023

How to install Next.js 14 แบบมีรายละเอียด

พา setup โปรเจกต์ Next.js 14 เบื้องต้น

How to install Next.js 14  แบบมีรายละเอียด

Dec 7, 2023

[Free] Next.js Admin Dashboard Template with Tailwind CSS

Tailwind CSS-Powered Next.js Admin Dashboard Template

[Free] Next.js Admin Dashboard Template with Tailwind CSS

Dec 11, 2023

How to Install and using MAMP

ขั้นตอนในการติดตั้งและใช้งาน MAMP (Mac,Windows, Apache, MySQL, PHP)

How to Install and using MAMP

Dec 12, 2023

ระบบร้านอาหาร RESTFul API in Golang

Restaurant System API

ระบบร้านอาหาร  RESTFul API in Golang

Dec 18, 2023

สร้างตารางข้อมูล Excel โดย PhpSpreadsheet ด้วย PHP

สร้างตารางข้อมูลใน Excel โดยใช้ไลบรารี PhpSpreadsheet ซึ่งเป็นไลบรารีสำหรับจัดการไฟล์ Excel ด้วย PHP

สร้างตารางข้อมูล Excel โดย PhpSpreadsheet ด้วย PHP

Dec 21, 2023