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

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

บทเรียนตอนที่ 2 ของการนำ Storage และ Database ของ Firebase มาทำระบบ CMS บนเว็บไซต์ด้วย Javascript หลังจาก Authentication เข้าระบบมาแล้ว

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

ถ้าทำตามตอนที่ 1 มาแล้วนั่นแปลว่าตอนนี้เราจะมีหน้า index.html ไว้ Login ผ่าน Firebase Authentication เมื่อสำเร็จจะมายังหน้า main.html ซึ่งยังไม่ได้เตรียมการอะไร แต่เราได้เพิ่ม add.html ไว้เพิ่มข้อมูลลงใน Storage และ Database ของ Firebase เป็นที่เรียบร้อยไปแล้ว ดังนั้นรอบนี้เราจะมาเขียนหน้า main.html กัน โดยขั้นตอนคือไปหา Table Component ของ Material Design Lite ในเว็บ http://getmdl.io มาใช้กัน

และนี่คือ HTML ของหน้า main.html

ซึ่งการทำงานของ Javascript นั้นทำงานดังนี้ แทรกการทำงานต่อไปนี้ต่อจากบรรทัด <!–Include firebase.js–> ก่อนปิด </body>

เราจะทำการเรียกข้อมูลของ Firebase Database ผ่านคำสั่งต่อไปนี้:

เก็บลงตัวแปร database ต่อจากนี้การดึงข้อมูลของ Firebase จะใช้คำสั่งการดึงข้อมูลผ่าน Data Snapshot ข้อมูลมาทั้งชุดแปลง Array

โดยตัวอย่างเราจะเรียกไปที่ Node ที่ชื่อ app/ เพื่อไปดึง Child ของ Node ดังกล่าวคือ data ตามภาพโครงสร้าง:

ใช้ innHTML ของ JavaScript เขียน Element ID ของ ตาราง Table ที่มี id ว่า ex-table ไปตามจำนวนลูปที่วน Array ของ Node ที่เราทำ DataSnapshot มาเลย

โดยพื้นฐานของ Firebase เวลาที่เรา Push ค่าเข้าไปในระบบใหม่จะมี Key ที่ถูก Random Generate  มาให้เป็น Key ในการอ้างอิงเราสามารถดึง Key นี้มาแสดงได้ผ่านคำสั่ง

ในตัวอย่างมีการสร้างตัวแปร val มารับค่า data.val(); ดึง Value ทั้งหมดมา เพื่อง่ายต่อการดึง Key ที่เป็น Child ของแต่ละ Node เช่น title, content, thumbnail ดังนั้นเวลาแสดงผลจะเป็นดังนี้

นี่คือตัวอย่าง บทที่ 2 ของการทำ CMS บนเว็บไซต์ด้วย Firebase ในบทเรียนต่อไปเราจะทำหน้า Edit ข้อมูล และ Delete ข้อมูลให้กับ CMS ของเรา

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

Comments

daydevthailand@gmail.com

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

Review overview
%d bloggers like this: