Firebase

สร้างเว็บ CMS ด้วย Firebase Realtime Database และ Storage ตอนที่ 3

บทเรียนตอนที่ 3 ของการสร้างเว็บ CMS ด้วย Firebase กับ Database, Storage หลังจาก Authentication เพิ่มข้อมูล แสดงรายการ ต่อไปคือการแก้ไข และลบรายการ

ศึกษาบทเรียนก่อนหน้า:

ผลลัพธ์ต่อเนื่องจากการเข้าระบบ Authenticationเพิ่มข้อมูล และหน้ารายการ main.html เราจะเป็นหน้าจอดังนี้:

ปุ่ม Edit ข้อมูลข้างหลังจากลองนำ เมาส์ไป Roll Over ดูจะพบว่ามันจะมีการส่งไปหน้า edit.html?id=หมายเลข Key ของ Firebase ที่เป็น Unique ดังนั้นเราจะรู้แล้วว่าเราต้องสร้างหน้า edit.html ขึ้นมา

การสร้างหน้า edit.html นั้นง่ายมากเพียงแค่เรานำ หน้า add.html มาแก้ไขเล็กน้อยดังนี้:

หน้าจอการกรอกข้อมูลจะใกล้เคียงหน้า add.html เพียงแค่เราต้องทำการ Snapshot ตัว Data ออกมาโดย Record ของ node ที่ดึงนั้นต้องอ้างอิง Parameter ที่ส่งผ่าน QueryString บน Browser ตัว edit.html?id= นั้นคือ Parameter ที่ชื่อ id ดังนั้น แทรกบรรทัด <!–Include firebase.js–> ด้วย Javascript ต่อไปนี้:

ตัวอย่างนี้จะลูกทุ่งเล็กน้อยคือ การรับค่า QueryString ง่ายๆ เลยที่ส่วนนี้:

เพื่อนำมาอ้างตอนที่เราทำ Data Snapshot

เมื่อเราเปิดหน้า edit โดยอ้างอิง id แบบ GET ตัว Parameter มาจะมีการกำหนดให้ getElementById แต่ละช่องมีการแทรกข้อมูลจาก Firebase เข้าไปทันที เพื่อให้เราได้แก้ไข อัพเด็ตข้อมูล ดังภาพ

ดังนั้นเราลองแก้ไขข้อมูลดูตามตัวอย่าง

อัพเด็ตรูปภาพใหม่ และแก้ไข title และ content กด Update ดูแล้วไปตรวจสอบข้อมูลใน Database เราจะเห็นว่าข้อมูลมีการอัพเด็ตเป็นที่เรียบร้อย

เพราะเราไม่ได้ push() ค่าเข้าไปใหม่แต่เป็นการเขียนทับ ค่าเดิมลงไปตรงๆ ตามคำสั่งบรรทัดนี้:

จะเห็นว่าข้อมูลสามารถอัพเด็ตได้อย่างสบายๆ ด้วยคำสั่ง Javascript ง่ายๆ ใน Concept ที่ไม่ต้องคิดอะไรลึกลับซับซ้อนมากมายอะไร สำหรับการทำความเข้าใจ Firebase

ต่อมาเรามาทำขั้นตอนการ ลบ ข้อมูล ให้ไปที่ main.html ไปแก้ไขส่วนของ innerHTML ใน foreach ดังนี้:

นั่นคือเราได้เพิ่มปุ่ม Delete ซึ่งเวลากด เราจะไปยังหน้า delete.html?id= โดยอ้าง Key ไปนั่นเอง

ไปสร้างหน้า delete.html เขียน code สั้นๆ ดังนี้

เป็นการเทียบไปเลยว่าถ้า Key ที่ส่งผ่าน Parameter id มามันตรงก็ลบไปเลย

ข้อมูลใน firebase ก็จะถูกลบไปดังนี้เลย (มันจะเป็นสีแดงหากดูแบบ Real Time)

ข้อมูลบแล้ว!!!

ผลลัพธ์ตารางของเราก็จะเป็นดังนี้:

ลบเรียบร้อย!

ทั้งหมดนี้คือ CMS อย่างง่ายในการใช้งาน firebase บนเว็บไซต์ทั้ง Authentication,Storage และ Database เพียงแค่แม่น JavaScript ก็เป็นอันเสร็จพิธี

อย่าลืมเวลาเอาขึ้น Deploy Hosting จริงๆก็

สามารถ พูดคุยแลกเปลี่ยนหรือ ขอ Source code ได้ที่ http://www.facebook.com/daydevthailand ผ่านทาง Meesage (กด Like) กันหน่อยล่ะ

Tags

Banyapon Poolsawasd

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน