Back to Basic ใช้แค่ HTML, CSS, JavaScript และ API ทำเว็บสำหรับ CRUD ข้อมูล พื้นฐานที่นักพัฒนาควรรู้
บทความนี้จะเป็นพื้นฐานแบบสุดๆ เรียกได้ว่า Back to Basic เลยทีเดียว สำหรับการเป็นนักพัฒนา Web Application นะครับ เพราะจะเป็นการสร้างหน้า Web โดยใช้แค่ HTML, CSS และ JavaScript บนพื้นฐานของ Bootstrap 5 เพื่อทำการ CRUD ข้อมูล ซึ่งประกอบไปด้วย Create (สร้าง), Read (อ่าน), Update (แก้ไข) และ Delete (ลบ) ข้อมูล ผ่านการเรียกใช้ API
ขอแปะ clip การทำตามบทความนี้ไปด้วยนะครับ เผื่อใครอยากลองทำตาม clip ก็ได้เลยครับ
API ตัวจำลองที่จะใช้ในบทความนี้มาจาก MeCallAPI.com ครับ ถ้าอยากลองใช้ API สำหรับจำลองการทำ CRUD หรือ Authentication ก็เข้าไปดูรายละเอียดได้เลยครับ
ส่วนผลลัพธ์ของบทความนี้ มีตัวอย่างให้ลองทดสอบได้ที่ https://www.mecallapi.com/crud/
Software Installation
มีแค่ IDE 1 ตัว (แนะนำ VS Code) และ Web Browser (แนะนำ Chrome) แค่นี้ก็สามารถทำตามได้เลยครับ
Let’s Code! (HTML and CSS)
เริ่มจากการสร้างไฟล์ HTML ซึ่งเป็นเสมือนกับเอกสารที่มีการใส่คำสั่ง HTML ต่าง ๆ ไว้ เพื่อจัดวางเนื้อหาต่าง ๆ ในรูปแบบข้อความ รูปภาพ ปุ่ม ตาราง และอื่น ๆ ให้สามารถแสดงผลบน Web Browser ได้
สร้างไฟล์ index.html สำหรับแสดงตารางข้อมูล User นะครับ โดยจะมีการ link กับไฟล์อื่น ๆ ดังนี้
- Bootstrap 5 เป็น framework สำหรับทำหน้า web แบบ responsive (บรรทัดที่ 9 และ 54)
- Sweetalert ใช้ทำ popup สวย ๆ ด้วย JavaScript (บรรทัดที่ 53)
- index.css สำหรับกำหนด Cascading Style Sheets (CSS) ที่ใช้ปรับแต่งการแสดงผลในหน้า index.html เพิ่มเติมจากที่ใช้ Bootstrap (บรรทัดที่ 13)
- index.js สำหรับเขียน JavaScript ที่ใช้ในหน้า index.html เพื่อเรียก API (บรรทัดที่ 52)
สร้างไฟล์ index.css ไฟล์ Cascading Style Sheets (CSS) ที่ใช้ปรับแต่งการแสดงผลในหน้า index.html เพิ่มเติมจากที่ใช้ Bootstrap
Read การอ่านข้อมูล (JavaScript)
สร้างไฟล์ index.js เพื่อทำการเรียก API เพื่อทำการ CRUD ข้อมูล
เริ่มต้นด้วย Read การอ่านข้อมูล
ใช้ API URL: https://www.mecallapi.com/api/users
Method: GET
การอ่านข้อมูลใน JavaScript นี้ จะใช้เทคนิค AJAX (Asynchronous JavaScript And XML) เพื่อให้หน้า Web ของเรามีการอัพเดทหน้าจอแบบ Asynchronously ซึ่งหมายถึงมีการแลกเปลี่ยนข้อมูลกับ API อยู่เบื้องหลัง และเมื่อได้รับข้อมูลมาก็สามารถนำมาแสดงบนหน้า Web ได้เลยโดยที่ไม่ต้อง refresh หน้าจอ
เราจะใช้ XMLHttpRequest เป็นตัวเรียก API เพื่อนำข้อมูล (ในรูปแบบ JSON) ที่ได้รับกลับมาแสดงบนหน้าจอด้วยการแก้ไขเนื้อหาและโครงสร้างของ HTML หรือที่เรียกว่า HTML DOM (Document Object Model) ซึ่งถ้าเราอยากรู้ว่าจะแก้ไข HTML อะไรได้บ้าง ก็ควรจะศึกษา DOM เพิ่มเติม โดยใน code ด้านล่างจะเป็นการแก้ไขตารางข้อมูลโดยอ้างอิงจาก id ของ HTML element ข้อมูลตารางที่มีชื่อว่า mytable (บรรทัดที่ 21)
ทำการเปิดไฟล์ index.html บน Web Browser จะเห็นผลลัพธ์ดังภาพ
Create การสร้างข้อมูล (JavaScript)
ใช้ API URL: https://www.mecallapi.com/api/users/create
Method: POST
ตัวอย่าง Body (JSON):
{
"fname": "Cat",
"lname": "Chat",
"username": "cat.chat@mecallapi.com",
"email": "cat.chat@mecallapi.com",
"avatar": "https://www.mecallapi.com/users/cat.png"
}เพิ่ม code ดังต่อไปนี้ใน index.js
ทำการ refresh index.html และทดสอบการสร้างข้อมูล User คนใหม่ ดังภาพ
UPDATE การแก้ไขข้อมูล (JavaScript)
ใช้ API URL: https://www.mecallapi.com/api/users/update
Method: PUT
ตัวอย่าง Body (JSON):
{
"id": 11,
"fname": "Cat",
"lname": "Gato",
"username": "cat.gato@mecallapi.com",
"email": "cat.gato@mecallapi.com",
"avatar": "https://www.mecallapi.com/users/cat.png"
}เพิ่ม code ดังต่อไปนี้ใน index.js
ทำการ refresh ไฟล์ index.html และทดสอบการแก้ไขข้อมูล User คนใหม่ ดังภาพ
DELETE การลบข้อมูล (JavaScript)
ใช้ API URL: https://www.mecallapi.com/api/users/delete
Method: DELETE
ตัวอย่าง Body (JSON):
{
"id": 11
}เพิ่ม code ดังต่อไปนี้ใน index.js
ทำการ refresh ไฟล์ index.html และทดสอบการลบข้อมูล User คนใหม่ ดังภาพ
โดยรวมแล้ว Code จะค่อนข้างเยอะเพราะไม่ได้ใช้เครื่องมือหรือ framework มากนัก (นอกจาก Bootstrap) ทั้งนี้การจะใช้เครื่องมือใด ๆ ก็ควรจะรู้ถึงพื้นฐานก่อน ผู้เขียนก็หวังว่าจะบทความนี้จะเป็นประโยชน์ในการปูพื้นฐานการพัฒนา Web Application ซึ่งจำเป็นต่อการต่อยอดในการใช้ framework สำหรับพัฒนา Web Application เช่น React, Angular และ Vue เป็นต้น
บทความโดย อ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต
