การแก้ไขข้อมูลใน Firebase ด้วย $key

สวัสดีครับวันนี้ เรามาต่อกันเรื่องการแก้ไขข้อมูล firebase ด้วย $key กันนะครับ โอเครครับ ก่อนอื่นต้องแสดงข้อมูลลงในตารางก่อน ตามผมมาเลย

อันนี้โค้ดเก่า อยู่ในรูปแบบ UL แต่มันไม่สวยเลยตอนรันนะครับ

แบบนี้นะครับ ไม่สวยเลย คราวนี้เดี่ยวเรา เอาข้อมูลมาใส่ตารางดีกว่า มาดูก่อนครับ

สร้างตารางแล้ว วนลูปข้อมูลลงไปในตารางให้เรียบร้อย จากนั้น button ขึ้นมาอันนึง พร้อมกำหนด event ให้แล้วส่งค่าไปให้เรียบร้อย ในตัวอย่างส่งค่าตัวแปรไปคือ item คือจะเก็บค่า record ของ firebase แต่ละแถว

ได้ข้อมูลลงตารางเรียบร้อยครับ แต่ยังไม่สวย เดี่ยวเราเขียน css แต่งตารงนิดนึงนะครับ

เริ่มแรกสร้าง class=”table” ขึ้นมาก่อน จากนั้นเขียน css ตามใจขอบเลย

แต่งเท่านี้ก่อนครับเดียวยาว เรามาดูผลกัน

พอรันแล้วประมาณนี้ครับ แต่ว่าสามารถแต่งเพิ่มได้นะ หรือใช้ css framework มาช่วยเพิ่มนะครับ ต่อไปเดี่ยวดราสร้าง method edit แล้วรับค่ามาดูครับ พร้อม debug ไปด้วยเลยว่าค่ามาถูกต้องไหม

เขียนแค่นี้พอครับ แล้วลองรัน กด edit ด้วยนะครับ

พอเรากด edit มาดูที่ console จะเห็นว่าค่าที่ได้มาจะไม่เหมือนกัน คราวนี้ที่ผมจะทำก็คือ พอกด edit แล้วให้ค่ามาแสดงที่ form เพื่อรอการแก้ไข

แก้นิดเดียว คราวนี้ลองเทสโปรแกรมดูนะครับ สังเกตุใน ฟอร์มด้วยนะครับ จะมีค่าเข้าไปในฟอร์มพร้อมแก้ไข

จะเห็นว่าหละงจากกดแก้ไขแล้วข้อมูลแสดงที่ ฟอร์มเรียบร้อยแล้วครับ พร้อมแก้ไข ต่อไปเราก็มาสร้างปุ่มแก้ไขกันเลยครับ

สร้างปุ่ม update ขึ้นมาแล้วใส่ event update ลงไปนะครับ อย่าลืมรับค่ามาแก้ไขด้วยนะครับ

แล้วเราก็ไปเขียนโปรแกรมแก้ไขข้อมูลลง firebase ได้เลยครับ

โปรแกรมอัพเดทก้เขัยนได้ตามนี้เลยครับ ก่อนอื่นตรวจสอบตัวแปร $key ก่อนว่ามีค่าไหม ถ้ามีค่ามาถึงให้อัพเดท ถ้าไม่มีก็ไม่ต้องให้อัพเดท ส่วนคำสั่ง update ก็สามารถเรียกใช้ได้ง่ายๆครับ this.items.update($key, dataobject) แค่นี้เราก็สามารถอัพเดทได้แล้วนะครับ

เมื่อผมทำการแก้ไขข้อมูลอายุให้เป็น 30 แล้วกดอัพเดท มันจะแสดงข้อความออกมาว่า update ok ตามโค้ดที่เราเขียน

ข้อมูลก็เปลี่ยนเรียบร้อยแล้วครับ ง่ายไหมละครับ เพียงไม่กี่บรรทัด ได้โปรแกรมแก้ไขข้อมูลแล้ว ง่ายๆเรื่อง ไฟร์เบส แล้วเจอกันใหม่โอกาสหน้านะครับ

Show your support

Clapping shows how much you appreciated Sutin Injitt’s story.