screenshot-2016-09-21-14-13-20

การปรับปรุงระบบจองห้อง (CELT Booking)

Posted on By ผนวกเดช สุวรรณทัต
Print Friendly

สัปดาห์นี้ได้รับแจ้งจากเหมียว (จิราพรรณ คนฉลาด) ว่าต้องการมอบหมายหน้าที่ผู้จัดการระบบจองห้องให้กับแอน (อำภา ยาตรา) จึงได้ถือโอกาสปรับปรุงหน้าตาของเว็บให้ใช้ง่ายมากขึ้น และหวังว่าจะสวยงามขึ้นนิดหน่อยด้วย

บันทึกฉบับนี้มีไว้เพื่อ

  1. บันทึกการเปลี่ยนแปลงหน้าตาของระบบจองห้อง
  2. บันทึกวิธีการเปลี่ยนแปลงชื่อและข้อมูลติดต่อของผู้จัดการระบบจองห้อง

ระบบจองห้องอยู่ที่ไหน?

หน้าตา: Before

โอโห ทำไมมันดูเก่าแก่จังเลย อดทนใช้มาตั้งเกือบปีได้อย่างไร? >_<

screenshot-2016-09-21-11-44-19

หน้าตา: After

ไฉไลขึ้นเยอะเลย 🙂 ที่สำคัญไม่ใช่แค่สวยขึ้น แต่ใช้สะดวกมากขึ้นด้วย (not just prettier, but more usable)

screenshot-2016-09-21-11-45-32

การเปลี่ยนแปลง

  1. เดิมแสดงรายชื่อห้องเป็น list ปัจจุบันแสดงเป็น panel ขนาดใหญ่ พร้อมรูปภาพ
    • ใช้ได้ง่ายขึ้นเพราะ target size ใหญ่ขึ้น (สามารถคลิกได้ทั้ง Panel)
    • ระบบจะดึงภาพจาก /var/www/celt/img_celt/rooms มาแสดงให้โดยอัตโนมัติ โดยจะเลือกภาพแบบสุ่ม (ดังนั้นเมื่อกด refresh ภาพที่เห็นจะเปลี่ยนไป)
    • ปรับเปลี่ยนตามขนาดหน้าจอ (responsive)
      • บนโทรศัพท์จะแสดงแบบ 1 column
      • ในขนาด browser ปกติ จะแสดงแบบ 2 columns
      • แต่ถ้า browser ขนาดใหญ่มากพอ จะแสดงแบบ 4 columns ดังภาพ:
        screenshot-2016-09-21-11-56-57
  2. เพิ่มแผนผังของห้องที่สามารถคลิกได้ไว้ด้านล่าง (วาดโดยเมตตา เมื่อนานมาแล้ว)
  3. เดิมจะต้องพิมพ์ url ว่า http://celt.li.kmutt.ac.th/booking.php แต่ปัจจุบัน ไม่จำเป็นต้องพิมพ์ .php ก็ได้
  4. ปุ่ม admin ด้านล่างขวา มองเห็นได้ง่ายขึ้น
    screenshot-2016-09-21-11-59-32

วิธีเปลี่ยนผู้จัดการระบบ

หากเราต้องการเปลี่ยนผู้จัดการระบบ เราจะต้องทำ 3 อย่างนี้คือ

  1. เปลี่ยนแปลง list ของ emails ที่ระบบจะส่งแจ้งเตือนคำร้องขอจองห้อง
  2. เปลี่ยนแปลงคำลงท้ายจดหมายที่ส่งถึงผู้ใช้
  3. เปลี่ยนแปลงข้อมูลติดต่อที่แสดงบนเว็บไซต์ หลังจากผู้ใช้ยืนยันคำร้องเสร็จแล้ว

screenshot-2016-09-21-13-54-52

STEP 1: เปลี่ยนแปลง list ของ emails ที่ระบบจะส่งแจ้งเตือนคำร้องขอจองห้อง

  1. แก้ไขไฟล์ /var/www/celt/booking/booking_settings.php
  2. แก้ไขตัวแปร array ชื่อ $adminEmailList_4celtBooking ให้เป็นรายการอีเมลของผู้จัดการระบบ
    • จะใส่กี่ email ก็ได้
    • ผู้จัดการระบบจะได้รับอีเมลเมื่อมีคนจองห้อง และกด confirm เรียบร้อยแล้ว

STEP 2: เปลี่ยนแปลงคำลงท้ายจดหมายที่ส่งถึงผู้ใช้

  1. แก้ไขไฟล์ /var/www/celt/booking/booking_settings.php (เช่นเดิม)
  2. แก้ไขตัวแปร string ชื่อ $email_footer_4celtBooking เพื่อให้เป็นคำลงท้ายจดหมายที่จะส่งออกไปยังผู้จองห้องในทุกๆ อีเมล
    • ข้อความปัจจุบันคือ 
      Best regards,
CELT Facility Management System
Center for Effective Learning and Teaching
http://celt.li.kmutt.ac.th
    • ข้อความนี้จะถูกส่งในกรณีที่
      • ระบบต้องการให้ผู้ใช้กดยืนยันการจองในอีเมล
      • ระบบแจ้งผู้ใช้ว่าผลการจองเป็นอย่างไร
      • ระบบแจ้งผู้ใช้ว่ามีการยกเลิกการตัดสินใจ
    • ปัจจุบันเป็นความตั้งใจของผู้ออกแบบระบบที่จะไม่ใส่ชื่อ อีเมล และหมายเลขโทรศัพท์ของผู้จัดการระบบจองห้อง เนื่องจากผู้ใช้อาจยังไม่ได้กดยืนยันการจอง
  3. แก้ไขตัวแปร string ชื่อ $email_footer_with_staff_name_4celtBooking เพื่อให้เป็นคำลงท้ายจดหมายที่ส่งถึงผู้ใช้หลังจากที่ยืนยันการจองแล้ว
    • ข้อความปัจจุบันคือ 
      P.S. If you need to contact our staff, please email or call:

 CELT Reservation Manager
 Ampa Yatra
 email: ampa.yata@mail.kmutt.ac.th
 phone: 02-470-8394
    • ข้อความนี้ควรเขียนชื่อและข้อมูลการติดต่อของผู้จัดการระบบจองห้องด้วย

STEP 3: เปลี่ยนแปลงข้อมูลติดต่อที่แสดงบนเว็บไซต์ หลังจากผู้ใช้ยืนยันคำร้องเสร็จแล้ว

นี่คือข้อความที่แสดงต่อผู้ใช้หลังจากที่คลิกบน confirmation link ในอีเมล

screenshot-2016-09-20-10-19-33

  1. แก้ไขไฟล์ /var/www/celt/book_confirm.php
  2. แก้ไขข้อความใน boxSuccess ให้เป็นตามที่ต้องการ
    • อย่าลืมแก้ข้อมูลทั้งภาษาไทยและภาษาอังกฤษ

Acknowledgement

  • ไพฑูรย์ อนันต์ทเขต ถ่ายรูปตามห้องต่างๆ
  • เมตตา มงคลธีรเดช วาดภาพแผนผังห้อง และร่วมออกแบบเว็บ

Tools