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

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

บทเรียนการสร้าง CMS บนเว็บด้วย Javascript ร่วมกับการเก็บข้อมูลเข้า Firebase แบบ JSON ผ่าน Realtime Database และเก็บไฟล์ภาพที่ Storage

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

เราจะได้ตัวอย่างจากบทความก่อนหน้าคือหน้า index.html พร้อมการเข้าระบบ เมื่อทำการเข้าระบบผ่าน Firebase Authentication แล้วหน้า index.html จะมีการ redirect ไปยังหน้า main.html ที่เราค้างไว้ ดังนั้นเราจะเริ่มต้นจากหน้าดังกล่าว คือการเพิ่มเมนู และ link ไปที่หน้า add.html เพื่อสร้างหน้าสำหรับกรอกข้อมูล และอัพโหลดรูปภาพ

สร้างหน้า add.html ขึ้นมา ทำการออกแบบหน้าจอดังนี้

หากทำการแสดงผล ตัวอย่างนี้ได้มีการนำ Material Design Lite มาใช้ตกแต่งแล้ว

ดังนั้นขั้นตอนต่อไปคือการ สร้างฟังก์ชันที่ <!– Insert JS–> สำหรับ เพิ่มไฟล์รูปผ่านการอัพโหลด ไปยัง Storage ของ Firebase หลังจากนั้นค่อยนำค่า URL รูปภาพไปยัดเป็น Node ข้อมูลหนึ่งของ Database บน Firebase

ฟังก์ชัน Javascript ที่จะใส่แทรกเข้าไปตำแหน่งบรรทัดของ <!– Insert JS–> คือ

คำสั่งในการรับค่า File ที่ต้องการอัพโหลดนั้นจะผ่านส่วนของ การเรียก getElementById ของ Javascript ส่วนของ id ที่ชื่อ “filebutton” หรือปุ่มอัพโหลดรูปภาพ  ดังนั้นเราต้องทำการแทรกรูปภาพแล้วทำการอัพโหลดให้เสร็จเป็นที่เรียบร้อยก่อน

บรรทัดข้างต้นคือการ put ไฟล์รูปภาพไปยัง Storage  ส่วนการบันทึกข้อมูลลง Real Time Database ของ Firebase นั้น ตัวอย่างในบทเรียนนี้จะทำการสร้าง node “app/data” ก่อนแล้วค่อย push ค่า node ใหม่ลงไปด้วยคำสั่ง:

กระบวนการนี้จะทำการ push() ข้อมูล JSON โดยแนบ title,content และ thumbnail ไปทันทีเมื่อกดปุ่ม add-data ใน HTML Form

ทีนี้มาพิจารณาส่วนของ Rule บน Firebase Console

เราจะเห็นว่า Rule ของ Storage นั้นต้องมีการเข้าระบบก่อนจึงจะอัพโหลดได้

แก้ไขเป็น

 

ดังนั้นก่อนจะทดสอบเราต้องทำการ Login ก่อนให้พิมพ์คำสั่งต่อไปนี้ใน Terminal หรือ CMD:

ทำการเข้าระบบหน้า Login ใน index.html ใหม่อีกครั้งผ่าน Firebase Authentication แล้วทำการชี้ URL ไปที่ http://localhost:5000/add.html เพื่อกรอกข้อมูล

ทำการแนบไฟล์รูปภาพ และกรอกข้อมูลลงไปสักหน่อย แล้วกดปุ่ม SUBMIT หากเสร็จสิ้นขั้นตอนแล้ว ให้ไปที่ Firebase Console ที่ Storage และ Database เพื่อตรวจสอบข้อมูล ว่าไฟล์ชื่อ 512x512bb.jpg ถูกอัพโหลดขึ้นไปยัง Firebase Storage หรือยัง

จะเห็นว่าข้อมูลถูกอัพโหลดขึ้นไปแล้ว สามารถคลิกดูรายละเอียดได้

แปลว่า Storage ของ Firebase ทำงานได้ถูกต้องแล้วงั้นส่วนของ Database ทำงานถูกต้องไหมต้องไปดูกัน ข้อมูลที่พิมพ์ไป และ Path  รูปภาพจะปรากฏดังนี้:

สังเกตว่าตอนนี้เราจะเห็นว่า Node ข้อมูลใหม่เข้าไปเก็บพร้อม Path รูปภาพเป็นที่เรียบร้อยแล้ว ลองทดลองทำดูนะครับ แล้วบทความต่อจากนี้คือตอนที่ 2: จะเป็นการสร้างหน้า main.html เพื่อดึงข้อมูล DataSnapshot มาเรียงผ่าน Table ให้เราลบและแก้ไขข้อมูลของ CMS ได้ครับ

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

เพราะเราคือสังคมแห่งการแบ่งปัน

Comments

daydevthailand@gmail.com

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

Review overview