CRUD Operations ด้วย Svelte 3

3 min readJun 6, 2021

แนะนำเนื้อหาในบทความ

จากบทความ ทดลองใช้งาน Angular, React, Vue และ Svelte ในการสร้างตารางแสดงข้อมูลที่ได้รับจาก API บทความนี้ จะเป็นส่วนหนึ่งของตอนที่ 2 ซึ่งจะลงรายละเอียดเกี่ยวกับ CRUD Operations ด้วย Svelte 3 ครับ

สามารถดูตัวอย่างผลลัพธ์ได้ที่ https://table-cfa4f.web.app/svelte/

การใช้งาน Bootstrap ในตัวอย่างนี้จะใช้ Tag HTML ปกติ จึงต้องไปทำการเรียกใช้งานโดยเพิ่มโค้ดที่ไฟล์ index.html ที่อยู่ใน Folder: public

เพิ่มข้อมูล

เพื่อให้การเขียนโค้ดแบ่งเป็นสัดส่วนและแยกระหว่างข้อมูลกับส่วนอื่นๆ จึงขอใช้วิธีการสร้าง Service สำหรับเรียกใช้งาน API แยกออกเป็นอีกไฟล์ โดยให้สร้าง Folder: services และสร้างไฟล์ People.js ภายใต้ Folder:src ดังภาพ

เมื่อเปลี่ยนโครงสร้าง Folder ตามนี้ จึงต้องทำการเปลี่ยน Path ในการอ้างถึงไฟล์ โดยให้แก้ไขไฟล์ main.js ดังนี้

import Table from “./components/Table.svelte”;

จากนั้นให้เพิ่มโค้ดในไฟล์ People.js ตามโค้ดด้านล่างนี้

จากนั้นให้ทำการแก้ไขไฟล์ Table.svelte ตามโค้ดด้านล่างนี้

สำหรับ Svelte สามารถใช้ HTML ปกติได้ เลยในส่วนของการแสดงผล สำหรับโค้ดในบรรทัดต่างๆ มีการทำงาน ดังนี้

บรรทัดที่ 2 เป็นการ import function ที่สร้างไว้มาใช้
บรรทัดที่ 3 เป็นการ import onMount มาใช้
บรรทัดที่ 5-7 เป็นส่วนของการกำหนดตัวแปรที่จะนำมาใช้งาน
บรรทัดที่ 9–19 ใช้สำหรับการเรียกข้อมูลทั้งหมด
บรรทัดที่ 21–33 ใช้สำหรับเพิ่มข้อมูลทั้งหมด
บรรทัดที่ 35–38 ใช้เพื่อเรียกใช้ function realAll เมื่อมีการเปิดหน้าจอนี้ขึ้นมา และกำหนดให้ตัวแปร loading เป็น true เพื่อที่จะยังไม่แสดงข้อมูลถ้ายังโหลดไม่เสร็จ
บรรทัดที่ 43 เป็นการ กำหนดเงื่อนไขในการแสดงผล โดยตารางจะแสดงหลังจาก Load ข้อมูลเรียบร้อยแล้ว
บรรทัดที่ 97 ที่เพิ่ม on:submit|preventDefault={create(person)} ขึ้นมา หากมีการ submit form จะเรียกใช้ function create โดยไม่มีการเปลี่ยนหน้าจอ

ส่วนโค้ดที่เหลือใน input ต่างๆ จะเพิ่ม bind:value={person.fname} เพื่อทำการ blinding ค่าระหว่าง input กับตัวแปรที่กำหนดไว้

เมื่อถึงขั้นตอนนี้ หากกดปุ่ม Show Form จะแสดง Modal สำหรับเพิ่มข้อมูล โดยมีหน้าตาประมาณนี้

เมื่อกรอกข้อมูลแล้วกดปุ่ม Create ข้อมูลที่กรอกจะถูกเพิ่มเรียบร้อย โดยส่วนของ avatar จะแสดงเป็นรูปแมว ดังภาพ

การทำ Form Validation

ในตัวอย่างนี้จะใช้วิธีการที่คิดว่าง่ายที่สุดโดยใช้ Attribute “required” เพิ่มไปใน input ซึ่งตั้งแต่ HTML 5 การ Submit Form จะสามารถ Validate พื้นฐานตามชนิดของ input ได้ โดยจะทดลองกับ Form สำหรับการเพิ่มข้อมูล ให้แก้ไขไฟล์ Table.svelte ในแต่ละ input โดยเพิ่ม required (บรรทัดที่ 9) ตามโค้ดด้านล่างนี้

เมื่อแก้โค้ดเรียบร้อยและทำการทดสอบกดปุ่ม Create ดู Form จะสามารถ Validate ได้ตาม type ของ input ดังภาพ

เรียกดูข้อมูลทีละรายการ

สร้าง Service สำหรับ เรียกใช้ข้อมูลทีละรายการ โดยให้เพิ่มโค้ดที่ไฟล์ People.js ตามโค้ดด้านล่างนี้

เพิ่มโค้ดที่ไฟล์ Table.svelte ตามโค้ดด้านล่างนี้

ในบรรทัดที่ 2 เป็นการ import function ที่สร้างไว้มาใช้
ในบรรทัดที่ 35–44 เป็น function ในการเรียกข้อมูลทีละรายการ
ในบรรทัดที่ 46–48 เป็นฟังก์ชันที่ใช้ในการกำหนดค่าเริ่มต้นให้กับ Form
ในบรรทัดที่ 65 จะเป็นการเรียกใช้ function readOne(person.id) โดยจะส่ง id ไปด้วย
ในบรรทัดที่ 66 จะเปลี่ยนให้ Mouse วางแล้วเป็นรูปนิ้วเพื่อให้เห็นว่าคลิกได้
ในบรรทัดที่ 67–68 จะเป็นการสั่งให้เปิด Modal ขึ้นมา
ในบรรทัดที่ 86 จะเป็นการเรียกใช้ฟังก์ชัน clearForm เพื่อกำหนดค่าเริ่มต้นให้ input เมื่อกดปุ่ม Show Form ซึ่งการเพิ่มโค้ดในจุดนี้ ต้องไม่ใส่ () ระบบจึงจะทำงานได้ตามปกติ

ถึงจุดนี้เมื่อคลิกที่แต่ละแถวจะแสดง Modal โดยมีหน้าตา เหมือนกัน Form สำหรับเพิ่มข้อมูล ซึ่งต้องทำการเพิ่มเติมโค้ดเพื่อให้แสดงเป็น Form สำหรับดูข้อมูล โดยให้แก้ไขโค้ด ที่ไฟล์ Table.svelte ตามโค้ดด้านล่างนี้

ในบรรทัดที่ 8 เพิ่มโค้ดเพื่อใช้งานตัวแปร modalView โดยมีค่าเริ่มต้นเป็น false
ในบรรทัดที่ 37 ทำการกำหนดค่า modalView เป็น true เพื่อเป็นตัวกำหนดเงื่อนไขในการแสดงผลว่าเป็นการเรียกดูข้อมูล
ในบรรทัดที่ 89 เพิ่มโค้ดเพื่อเรียกใช้ฟังก์ชัน clearForm() โดยเมื่อเรียกใช้ฟังก์ชันในรูปแบบนี้ ให้ใส่ () ตามปกติได้
ในบรรทัดที่ 90 ให้การกดปุ่ม Show Form มีการปรับค่าตัวแปร modalView เป็น false ซึ่งจะมีความสัมพันธ์กับปุ่ม Create ในบรรทัดที่ 177 ซึ่งกำหนดไว้ว่า modalView เป็น false จึงจะแสดงปุ่มนี้
ในบรรทัดที่ 113–117 เป็นการกำหนดเงื่อนไขเพื่อให้เกิดการแสดงผลตามที่กำหนด
ในบรรทัดที่ 128 เป็นการเพิ่มในส่วนของการแสดงรูป avatar โดยหากไม่ได้เปิด Modal มาเพื่อดูข้อมูล โค้ดในส่วนนี้จะไม่ทำงาน โดยจากใช้วิธีการตรวจสอบจาก modalView

โดยหน้าตา Modal เมื่อเลือกดูข้อมูลแต่ละรายการจะเป็นดังภาพ

ปรับปรุงข้อมูลที่เลือกดู

สร้าง Service สำหรับ ปรับปรุงข้อมูลที่เลือกดู โดยให้เพิ่มโค้ดที่ไฟล์ People.ts ตามโค้ดด้านล่างนี้

จากนั้นให้เพิ่มโค้ดที่ไฟล์ Table.svelte เพื่อเรียกใช้ service ที่สร้างไว้ ตามโค้ดด้านล่างนี้

ในบรรทัดที่ 6 เป็นการ import service ที่สร้างไว้มาใช้งาน
ในบรรทัดที่ 53–63 ใช้สำหรับการปรับปรุงข้อมูล
ในบรรทัดที่ 198–208 เป็นการเพิ่มเงื่อนไขในการแสดงปุ่ม Update เพื่อไม่ให้แสดงผลในหน้าจอการเพิ่มข้อมูล และกำหนดให้สามารถ Click แล้วเรียกใช้ Function update()

เมื่อถึงขั้นตอนนี้ เมื่อกดปุ่ม Update ข้อมูลที่ปรากฏใน Form จะได้รับการปรับปรุงข้อมูล

ลบข้อมูลที่เลือกดู

สร้าง Service สำหรับ ลบข้อมูลทีเลือกดู โดยให้เพิ่มโค้ดที่ไฟล์ People.ts ตามโค้ดด้านล่างนี้

ในบรรทัดที่ 7 เป็นการ import service ที่สร้างไว้มาใช้งาน
ในบรรทัดที่ 66–76 ใช้สำหรับการลบข้อมูล ซึ่งใช้ตั้งชื่อฟังก์ชันตรงๆ ว่า delete ไม่ได้จึงเติมตัว f เข้าไป
ในบรรทัดที่ 220–226 เป็นการเพิ่มปุ่ม Delete และกำหนดให้สามารถ Click แล้วเรียกใช้ Function deletef()

ซึ่งเมื่อกดปุ่ม Delete ข้อมูลที่ปรากฏใน Form จะถูกลบทันที

หากต้องการให้มีการปิด Modal ทุกครั้งที่ เพิ่ม ลบ แก้ไข สามารถทำได้โดยการแก้ไขโค้ดที่ไฟล์ Table.svelte 2 จุด ดังนี้

จุดแรกคือปุ่ม Close ของ Modal ให้เติม Attribute id ในบรรทัดที่ 2 ตามโค้ด้านล่างนี้

จุดที่สองให้เพิ่มโค้ดในฟังก์ชัน readAll ในบรรทัดที่ 7 ตามโค้ด้านล่างนี้

CRUD Operations ด้วย Svelte 3 ในมุมที่ตั้งใจจะลองทำก็เสร็จเรียบร้อยแล้ว โดยโค้ดทั้งหมดของบทความนี้อยู่ที่ https://github.com/wutthiponghub/table-svelte/tree/CRUD