suksit dot com

ปกติเวลาทำเว็บแล้วต้องการให้มี directory listing สำหรับให้ผู้ใช้ดาวน์โหลดไฟล์ โมดูลตัวแรกที่มักจะนึกถึงก็คือ Filebrowser ซึ่งถ้าติดตั้ง Drupal บนเซิร์ฟเวอร์ที่เป็นลินุกซ์ มันจะสามารถทำงานได้ตามปกติ แต่ปัญหาจะเกิดขึ้นทันทีเมื่อใช้เครื่องเซิร์ฟเวอร์ที่เป็นวินโดวส์

สาเหตุของปัญหาจริงๆ น่าจะเกิดจาก encoding ของระบบไฟล์ในวินโดวส์ที่มันไม่เป็น UTF-8 ทำให้มีปัญหาประหลาดๆ เมื่อใช้ฟังก์ชันของ PHP ในการอ่านชื่อไฟล์

ตัวอย่าง issue ที่น่าปวดหัวของ Filebrowser ก็มีประมาณนี้

• ไม่แสดงไฟล์
• ชื่อไฟล์เน่า ซึ่งทำให้เกิดปัญหาต่อเนื่องคือ
• URL คลิกแล้วใช้การไม่ได้

ทางแก้ที่เคยทำคือ ตั้งชื่อไฟล์ให้เป็นภาษาอังกฤษทั้งหมด ซึ่งก็ไม่ใช่ทางออกที่ดีนัก อีกวิธีคือแก้โค้ดของโมดูล Filebrowser ให้ใช้งานได้กับชื่อไฟล์ภาษาไทยบนวินโดวส์ เคยนั่งแก้โค้ดมาแล้วรอบนึงตอนทำ IS จบ ป.โท โดยได้อานิสงส์จากฟังก์ชัน utf8_to_tis620 และ tis620_to_utf8 ของ @sugree

เมื่อเร็วๆ นี้ก็โหลดโมดูล Filebrowser มานั่งแก้อีกรอบ โมดูลที่แก้แล้วทำงานได้ดีตามต้องการ จนกระทั่งไปทำเว็บให้คนอื่นแล้วพบว่าโลกนี้ไม่ได้มีแค่ชื่อไฟล์ภาษาไทยและภาษาอังกฤษ นั่นคือ ถ้ามีชื่อไฟล์เป็นภาษาอื่นๆ อีกก็จะเกิดปัญหาเดิมๆ ไม่สิ้นสุด T_T

ในระหว่างที่คิดว่าจะทำยังไงดี ก็บังเอิญเห็นว่า ฟีเจอร์ directory listing ที่มากับ Apache มันแสดงผลชื่อไฟล์ได้ถูกต้องทุกภาษา ติดว่าหน้าตามันเห่ยไปหน่อยเท่านั้น แต่ถ้าเอามาใส่ใน Drupal ได้เนียนๆ ก็จะแก้ปัญหาที่ว่ามาข้างต้นได้ทั้งหมด ตัวอย่างหน้าตา directory listing ของ Apache ก็ประมาณนี้

ลองอ่านรายละเอียดของ mod_autoindex ดู พบว่าเราสามารถตั้งค่าเพื่อจัดรูปแบบการแสดงผลได้หลายอย่าง เช่น กำหนดให้ output ออกมาเป็น HTML table, กำหนดความกว้างแต่ละคอลัมน์ได้ จัดเรียงให้โฟลเดอร์มาก่อนไฟล์เหมือนใน Windows Explorer ได้, เปลี่ยนไอคอนตามชนิด หรือตามนามสกุลของไฟล์ได้ ฯลฯ นอกจากนี้ยังสามารถกำหนดไฟล์ที่จะใช้เป็น header ของข้อมูล HTML ที่จะ output ออกมาได้ด้วย

option ที่ใช้หลักๆ จะมีประมาณนี้

IndexOptions FancyIndexing VersionSort
IndexOptions Charset=UTF-8
IndexOptions FoldersFirst IgnoreCase
IndexOptions HTMLTable XHTML
IndexOptions NameWidth=*
IndexOptions SuppressHTMLPreamble SuppressRules SuppressDescription
 
HeaderName /path/to/header/file.html

นอกจากนี้ก็เป็นการตกแต่งรายละเอียดเพิ่มเติม โดยในไฟล์ header เราสามารถ include JavaScript หรือ CSS อะไรก็ได้ตามที่ต้องการ ยกตัวอย่างเช่น ถ้าอยากได้ table แบบสลับสี ก็ใส่โค้ดเรียก jQuery ของ Drupal เข้าไป แล้วเขียนสคริปต์เพื่อทำ zebra table ให้มันใส่ class="odd" หรือ class="even" ให้ (อย่าลืม include CSS ของ Drupal ด้วย) เป็นต้น หรือถ้าอยากให้หน้าตาของ table เข้ากับธีมที่ใช้อยู่ ก็ include CSS ของธีมเข้ามาด้วย ฯลฯ

สุดท้ายเราจะได้หน้า directory listing แบบนี้

สามารถเอาไปวางใน page เพื่อทำตัวกลมกลืนกับ Drupal ได้โดยการใช้ <iframe> ช่วย สิ่งที่ไม่สะดวกเพียงอย่างเดียวคือ การทำ directory listing วิธีนี้ไม่สามารถใช้ร่วมกับระบบ access control ของ Drupal ได้ ถ้าต้องการความปลอดภัยมากขึ้นคงต้องใช้ htpasswd ช่วยอีกแรง