สัปดาห์นี้ได้รับแจ้งจากเหมียว (จิราพรรณ คนฉลาด) ว่าต้องการมอบหมายหน้าที่ผู้จัดการระบบจองห้องให้กับแอน (อำภา ยาตรา) จึงได้ถือโอกาสปรับปรุงหน้าตาของเว็บให้ใช้ง่ายมากขึ้น และหวังว่าจะสวยงามขึ้นนิดหน่อยด้วย
บันทึกฉบับนี้มีไว้เพื่อ
- บันทึกการเปลี่ยนแปลงหน้าตาของระบบจองห้อง
- บันทึกวิธีการเปลี่ยนแปลงชื่อและข้อมูลติดต่อของผู้จัดการระบบจองห้อง
ระบบจองห้องอยู่ที่ไหน?
- http://celt.li.kmutt.ac.th/booking
- หรือคลิกจากหน้าแรกของเว็บ CELT: เมนู Services -> Room Reservation
หน้าตา: Before
โอโห ทำไมมันดูเก่าแก่จังเลย อดทนใช้มาตั้งเกือบปีได้อย่างไร? >_<
หน้าตา: After
ไฉไลขึ้นเยอะเลย 🙂 ที่สำคัญไม่ใช่แค่สวยขึ้น แต่ใช้สะดวกมากขึ้นด้วย (not just prettier, but more usable)
การเปลี่ยนแปลง
- เดิมแสดงรายชื่อห้องเป็น list ปัจจุบันแสดงเป็น panel ขนาดใหญ่ พร้อมรูปภาพ
- ใช้ได้ง่ายขึ้นเพราะ target size ใหญ่ขึ้น (สามารถคลิกได้ทั้ง Panel)
- ระบบจะดึงภาพจาก /var/www/celt/img_celt/rooms มาแสดงให้โดยอัตโนมัติ โดยจะเลือกภาพแบบสุ่ม (ดังนั้นเมื่อกด refresh ภาพที่เห็นจะเปลี่ยนไป)
- ปรับเปลี่ยนตามขนาดหน้าจอ (responsive)
- บนโทรศัพท์จะแสดงแบบ 1 column
- ในขนาด browser ปกติ จะแสดงแบบ 2 columns
- แต่ถ้า browser ขนาดใหญ่มากพอ จะแสดงแบบ 4 columns ดังภาพ:
- เพิ่มแผนผังของห้องที่สามารถคลิกได้ไว้ด้านล่าง (วาดโดยเมตตา เมื่อนานมาแล้ว)
- เดิมจะต้องพิมพ์ url ว่า http://celt.li.kmutt.ac.th/booking.php แต่ปัจจุบัน ไม่จำเป็นต้องพิมพ์ .php ก็ได้
- ปุ่ม admin ด้านล่างขวา มองเห็นได้ง่ายขึ้น
วิธีเปลี่ยนผู้จัดการระบบ
หากเราต้องการเปลี่ยนผู้จัดการระบบ เราจะต้องทำ 3 อย่างนี้คือ
- เปลี่ยนแปลง list ของ emails ที่ระบบจะส่งแจ้งเตือนคำร้องขอจองห้อง
- เปลี่ยนแปลงคำลงท้ายจดหมายที่ส่งถึงผู้ใช้
- เปลี่ยนแปลงข้อมูลติดต่อที่แสดงบนเว็บไซต์ หลังจากผู้ใช้ยืนยันคำร้องเสร็จแล้ว
STEP 1: เปลี่ยนแปลง list ของ emails ที่ระบบจะส่งแจ้งเตือนคำร้องขอจองห้อง
- แก้ไขไฟล์ /var/www/celt/booking/booking_settings.php
- แก้ไขตัวแปร array ชื่อ $adminEmailList_4celtBooking ให้เป็นรายการอีเมลของผู้จัดการระบบ
- จะใส่กี่ email ก็ได้
- ผู้จัดการระบบจะได้รับอีเมลเมื่อมีคนจองห้อง และกด confirm เรียบร้อยแล้ว
STEP 2: เปลี่ยนแปลงคำลงท้ายจดหมายที่ส่งถึงผู้ใช้
- แก้ไขไฟล์ /var/www/celt/booking/booking_settings.php (เช่นเดิม)
- แก้ไขตัวแปร string ชื่อ $email_footer_4celtBooking เพื่อให้เป็นคำลงท้ายจดหมายที่จะส่งออกไปยังผู้จองห้องในทุกๆ อีเมล
- ข้อความปัจจุบันคือ
Best regards, CELT Facility Management System Center for Effective Learning and Teaching http://celt.li.kmutt.ac.th
- ข้อความนี้จะถูกส่งในกรณีที่
- ระบบต้องการให้ผู้ใช้กดยืนยันการจองในอีเมล
- ระบบแจ้งผู้ใช้ว่าผลการจองเป็นอย่างไร
- ระบบแจ้งผู้ใช้ว่ามีการยกเลิกการตัดสินใจ
- ปัจจุบันเป็นความตั้งใจของผู้ออกแบบระบบที่จะไม่ใส่ชื่อ อีเมล และหมายเลขโทรศัพท์ของผู้จัดการระบบจองห้อง เนื่องจากผู้ใช้อาจยังไม่ได้กดยืนยันการจอง
- ข้อความปัจจุบันคือ
- แก้ไขตัวแปร 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 ในอีเมล
- แก้ไขไฟล์ /var/www/celt/book_confirm.php
- แก้ไขข้อความใน boxSuccess ให้เป็นตามที่ต้องการ
- อย่าลืมแก้ข้อมูลทั้งภาษาไทยและภาษาอังกฤษ
Acknowledgement
- ไพฑูรย์ อนันต์ทเขต ถ่ายรูปตามห้องต่างๆ
- เมตตา มงคลธีรเดช วาดภาพแผนผังห้อง และร่วมออกแบบเว็บ
Tools
- image map maker:
http://imagemap-generator.dariodomi.de - Image Map Resizer (javascript library for responsive images)
https://github.com/davidjbradshaw/image-map-resizer
เยี่ยมมากๆค่ะ
อธิบายได้ชัดเจน ทำให้คนรุ่นโบฯ เข้าใจง่าย สื่อสารได้เยี่ยมมากค่ะ