Web App—Basic CRUD with Javascript, Bootstrap 4 and Realtime Database

สวัสดีครับเพื่อนๆ มาพบกันอีกแล้วครับ วันนี้ผมจะมานำเสนอวิธีการสร้าง Web App ที่มีพื้นฐานกระบวนการ Create/Read/Update/Delete กับระบบฐานข้อมูลผ่านทางหน้าเว็บไซต์แบบง่ายๆ กัน

แล้วกระบวนการ CRUD คืออะไร?

CRUD ย่อมาจากคำ 4 คำคือ (Create, Read, Update, Delete)

C = Create หมายถึงการเพิ่มเข้ามาหรือการสร้างข้อมูลใหม่ ๆ ขึ้นมาในระบบฐานข้อมูล
R = Read หมายถึงการสืบค้นหรือการเรียกข้อมูลขึ้นมาตรวจสอบ คำนวณหรือแสดงผลในหน้าเว็บไซต์
U = Update หมายถึงการปรับปรุงแก้ไขข้อมูลเดิมที่มีอยู่ในระบบฐานข้อมูลอยู่แล้ว
D = Delete หมายถึงการลบข้อมูลออกไปจากระบบฐานข้อมูล

CRUD จึงเป็นกระบวนการในการทำงานที่มีความเกี่ยวข้องกับระบบฐานข้อมูล โดยหลัก ๆ แล้วมี action อยู่ 4 อย่างด้วยกันคือการ เพิ่ม เรียกดู ปรับปรุง และลบข้อมูล

ที่มา — https://www.codebee.co.th

ซึ่งจะพบเห็นกระบวนการนี้ในระบบต่างๆ เช่น ระบบจองห้องประชุม, ระบบรายงานต่างๆ เป็นต้น โดยผมจะทดลองสร้างหน้าเว็บไซต์ระบบการจองห้องประชุมแบบง่ายๆ ขึ้นมาครับ โดยแบบฟอร์มทั้งหมดผมใช้ Bootstrap 4 เป็น CSS Framework ใครสนใจการสร้างหน้าแบบฟอร์มออนไลน์ก็อ่านเพิ่มเติมได้ที่บทความ Bootstrap — สร้างฟอร์มจองห้องประชุมให้ดูแพงด้วย BS4 พร้อมกับเขียนฟังก์ชั่นสำหรับกระบวนการ CRUD ด้วย Javascript และใช้ Firebase Realtime Database เป็นระบบฐานข้อมูล ถ้าพร้อมแล้วก็มาเริ่มลงมือกันเลยดีกว่าครับ 🎢


1. สร้างแบบฟอร์มด้วย HTML5 และ Bootstrap 4

เพื่อให้ง่ายต่อการดูการเปลี่ยนแปลงข้อมูล ผมเลยสร้างแบบฟอร์มและตารางการแสดงผลไว้ในหน้าเดียวกันเลยครับ จะได้เห็นการเปลี่ยนแปลงข้อมูลได้ง่ายๆ โดย Code HTML สำหรับแบบฟอร์มจะแบ่งเป็น 2 ส่วน นั่นคือแบบฟอร์มหลักและแบบฟอร์มสำหรับแก้ไขอัพเดทข้อมูล โดยแบบฟอร์มอัพเดทผมจะเขียนฟังก์ชั่นใน Javascript ให้มาแสดงผลแทนแบบฟอร์มหลักทั้งหมดครับ ส่วนการแสดงผลจะเขียนฟังก์ชั่นใน Javascript ให้เรียกข้อมูลจากฐานข้อมูลมาแสดงผลในรูปแบบตารางพร้อมกำหนด Action ให้สามารถแก้ไขหรือลบข้อมูลได้เลย

แบบฟอร์มหลัก สำหรับการสร้างข้อมูลใหม่ ๆ ขึ้นมาในระบบฐานข้อมูล
แบบฟอร์มอัพเดท การปรับปรุงแก้ไขข้อมูลเดิมที่มีอยู่ในระบบฐานข้อมูลอยู่แล้ว

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

สำหรับไฟล์ตัวอย่าง HTML และ CSS สำหรับแบบฟอร์มหลัก และตารางแสดงผลจากฐานข้อมูล ดูได้ตามนี้เลยครับ

HTML

CSS


2. สร้างฟังก์ชั่นกระบวนการ CRUD ด้วย Javascript

เนื่องจากผมใช้ Firebase Realtime Database สำหรับเป็นระบบฐานข้อมูลเพื่อนๆ สามารถไปสร้าง Project ใหม่ และทำการ Setting เพื่อเชื่อมต่อ Web App ของเราเข้ากับ Firebase ได้เลยครับ อ่านรายละเอียดเพิ่มเติมได้ที่ Firebase Installation & Setup in JavaScript

โดยจะต้องทำการเรียกใช้ Firebase ในไฟล์ HTML ในข้อ 1 โดยการเพิ่ม Code ดังนี้

<!-- Firebase Javascript -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
<!-- Add Firebase products want to use -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-database.js"></script>

และตั้งค่า Firebase ในไฟล์ Javascript โดยการเพิ่ม Code ดังนี้

// Web app's firebase configuration
let firebaseConfig = {
  apiKey: "ํYour config",
  authDomain: "Your config",
  databaseURL: "Your config",
  projectId: "Your config",
  storageBucket: "Your config",
  messagingSenderId: "Your config",
  appId: "Your config",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

มาต่อด้วยการเชียนฟังก์ชั่นกระบวนการ CRUD ให้ครบถ้วนด้วย Javascript กันต่อเลยครับ

2.1 ฟังชั่นการเพิ่มข้อมูล และอ่านข้อมูลมาแสดงผลที่หน้าเว็บไซต์

โดย Code ตัวอย่างการเขียนฟังก์ชั่นเพิ่มข้อมูล createEvent() และอ่านข้อมูล readEvent() จะได้ประมาณนี้

ทำการเพิ่ม Eventlistener ให้กับ Element แบบฟอร์มหลักแล้วทำการเรียกใช้ฟังก์ชั่นการเพิ่มข้อมูลเมื่อมีการ Submit แบบฟอร์ม และเพิ่ม Eventlistener ให้กับ Element ตารางแสดงข้อมูลและทำการอ่านข้อมูลจากฐานข้อมูลมาแสดงผลในตาราง โดยมีตัวอย่าง Code ตามนี้

2.2 ฟังชั่นการแก้ไขข้อมูล

สำหรับฟังก์ชั่นการแก้ไขข้อมูล updateEvent() จะเป็นการกำหนดแบบฟอร์มอัพเดทขึ้นมาใหม่พร้อมกับเรียกค่าเดิมที่ต้องการแก้ไขมาแสดงที่แบบฟอร์มอัพเดทด้วย ลองดูในตัวอย่าง Code สำหรับการอัพเดทข้อมูลดูครับ

โดยเมื่อทำการอัพเดทข้อมูลแล้วจะทำการรีเซ็ทแบบฟอร์มให้เป็นแบบฟอร์มหลักด้วยฟังก์ชั่น reset()

ทำการเพิ่ม Eventlistener ให้กับ Element แบบฟอร์มอัพเดท แล้วทำการเรียกใช้ฟังก์ชั่นการเพิ่มข้อมูล createEvent() เมื่อมีการ Submit แบบฟอร์มอัพเดท และเพิ่ม Eventlistener ให้กับ Element ตารางแสดงข้อมูล และทำการอ่านข้อมูลจากฐานข้อมูลมาแสดงผลในตาราง readEvent() และทำการรีเซ็ทแบบฟอร์มอัพเดทให้กลับมาเป็นแบบฟอร์มหลักด้วยฟังก์ชั่น reset() โดยมีตัวอย่าง Code ตามนี้

2.3 ฟังก์ชั่นการลบข้อมูล

หากต้องการลบข้อมูลในฐานข้อมูล เมื่อคลิ๊กที่ปุ่มลบข้อมูลและทำการเรียกใช้ฟังก์ชั่นการลบข้อมูล deleteEvent() โดยมีตัวอย่าง Code ตามนี้


มาลองดูผลลัพธ์การทำงานของฟังก์ชั่นที่ได้เขียนขึ้นมากันครับ


ท้ายสุด เป็นอย่างไรบ้างครับกับการสร้างกระบวนการ CRUD ขึ้นมาแบบง่ายๆ ด้วยตัวอย่างระบบจองห้องประชุม ในตัวอย่าง Code อาจจะดูเยอะในส่วนของ HTML หน่อยน่ะครับ🤣 ใครอยากลองทำก็อาจจะปรับลดจำนวนข้อมูลในการกรอก และการแสดงผลจากฐานข้อมูลก็ได้ครับ จะได้เข้าใจได้ง่ายๆ จากตัวอย่างสามารถพัฒนาฟังก์ชั่นการทำงานได้อีกเยอะครับ ทั้งการเรียกข้อมูลจากฐานข้อมูลเฉพาะวันที่จองล่วงหน้าเท่านั้น พร้อมฟังก์ชั่นการเรียงวันที่การจองด้วยครับ😵 ไว้ค่อยมาเขียนให้อ่านกันครับถ้าไม่ลืมเสียก่อน😝 ก็หวังว่าบทความนี้จะเป็นแนวทางให้เพื่อนๆ ได้นำไปใช้ในการสร้าง Web App ที่ต้องใช้กระบวน CRUD ของตัวเองนะครับ Happy Coding…Happy Learning🔥🔥🔥


โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
🔗 https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
🔗 http://bit.ly/36q8A12