Redirect เว็บไซต์สำหรับมือถือด้วย Apache mod_rewrite

ทุกวันนี้หลายเว็บคงจะมีเว็บสำหรับ Mobile เพื่อรองรับการเข้าชมของอุปกรณ์ประเภท Smart Phone และ Tablet ซึ่งหากท่านใช้ CMS ที่สามารถแปลงเว็บไซต์จากหน้าเว็บแบบเข้าชมจากเครื่อง PC ไปเป็น Mobile ได้ก็คงไม่เป็นปัญหาอะไรมากนัก แต่ถ้าไม่มีก็คงต้องหาวิธีเขียนโปรแกรมเพื่อตรวจสอบเว็บเบราเซอร์กันเอาเอง วันนี้ผมมีวิธีง่ายๆ ในการ Redirect เว็บไซต์ ให้ถูกต้องตามอุปกรณ์ที่เรียกใช้กันครับ วิธีง่ายๆ ที่ว่าก็คือการใช้ mod_rewrite นี่แหละครับ
มาทำความเข้าใจกันก่อน สมมุติว่าคุณมีเว็บไซต์ที่ให้บริการผู้เข้าชม 2 แบบ คือแบบปกติเข้าชมผ่านเครื่องคอมพิวเตอร์ และแบบ Mobile เข้าชมผ่าน Smart Phone/Tablet มีโดเมนดังต่อไปนี้

  • เว็บปกติ http://www.my-example.com
  • เว็บสำหรับ Mobile http://m.my-example.com

หากผู้เข้าชมเปิดด้วยเครื่องคอมพิวเตอร์ปกติให้ Apache redirect ไปยังเว็บปกติ หากเป็น Smart Phone ก็ redirect ไปยังหน้าเว็บสำหรับ Mobile เงือนไขมีประมาณนี้ครับ มาลงมือกันเลย
เริ่มจากหน้าเว็บปกติคือ www.my-example.com ให้เพิ่ม .htaccess ใน document root ของ virtual host นี้เพื่อสั่ง redirect หากเข้าชมผ่าน Mobile ให้ redirect ไปที่ m.my-example.com เขียน rewrite rules ได้ดังนี้

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos" [NC]
RewriteRule ^$ http://m.my-example.com/ [L,R=302]
</IfModule>

ในหน้าเว็บ Mobile คือ m.my-example.com ให้เพิ่ม .htaccess ใน document root ของ virtual host นี้เพื่อสั่ง redirect หากเข้าชมผ่านคอมพิวเตอร์ ให้ redirect ไปที่ www.my-example.com เขียน rewrite rules ได้ดังนี้

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "!(android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos)" [NC]
RewriteRule ^$ http://www.my-example.com/ [L,R=302]
</IfModule>

เท่านี้ก็เรียบร้อยแล้ว 🙂

Rewrite URL ด้วย Apache mod_rewrite

คุณ Zee ส่งอีเมล์มาจากระบบติดต่อของ gotoknow.org มาถามเรื่อง DNS Wildcard จำได้ว่าเคยเขียนเรื่องนี้ใน ThaiOpenSource.Org มาแล้วแต่พอเข้าไปดู how-to ที่เคยเขียนเป็นกรณีที่เราสามารถแก้ไข DNS Record เองได้ในกรณีของคุณ Zee เช่าบริการโฮสติ้งแต่ทางผู้ให้บริการให้เพิ่ม subdomain ได้เพียง 1 ชื่อเท่านั้นดังนั้นการทำ DNS Wildcard จึงทำไม่ได้ คุณ Zee เลยเขียนจดหมายมาถามในทางกลับกันคือ ไม่ใช้ subdomain แต่อยากให้แบ่งคล้ายๆ กับ DNS Wildcard ได้มั๊ย
ผมมาพิจารณาดูจากกรณีของคุณ Zee เข้าใจว่าพยายามทำ Pritty URL ของเว็บไซต์ หรือ SEO ง่ายๆ จาก URL โดยคุณ Zee จะให้ชื่อ URL เป็น http://domain.com/yourname บอเบราส์ไปแล้วก็ไปเปิดหน้าของ yourname ซึ่งไม่มีไดเรคทอรี yourname อยู่จริงๆ ในเซิร์ฟเวอร์ เอ้าเอาเป็นว่าน่าจะพอเข้าใจปัญหาคร่าวๆ กันแล้ว หาใครเคยทำ Pritty URL หรือคุ้ยเคยกับ SEO มาบ้างก็จะบอกว่า Rewrite URL ใช่มั๊ยครับ
How-To วันนี้ก็จะเป็นเรื่อง Rewrite URL ให้สนับสนุนกับโค้ดของโปรแกรมที่พัฒนาครับ โดยปกติการเขียนโค้ดของโปรแกรมในแบบ dynamic เรามักเห็นตัวแปรยุบยับผ่านทาง URL เช่น http://domain.com/index.php?name=yourname เป็นต้น เรามาทำให้มันสวยอย่างนี้ http://domain.com/yourname ได้ ด้วยการ Rewrite URL ครับ แล้วจะทำอย่างไร? วิธีการง่ายๆ เราสามารถเขียนกฏการแปลง URL ผ่านทาง htaccess ได้ครับ เขียนอย่างนี้ครับ

# Don't show directory listings for URLs which map to a directory.
Options -Indexes
# Follow symbolic links in this directory.
Options +FollowSymLinks
# Customized error messages.
ErrorDocument 404 /index.php
# Set the default handler.
DirectoryIndex index.php
RewriteEngine on
#RewriteBase /mydir
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?name=$1 [L,QSA]

หลัง จากนั้นให้เขียน index.php ขึ้นมาไฟล์นึงแล้วตรวจสอบ ค่า $_GET[‘name’] ว่าเป็นค่าอะไร เช่น สมมุติ http://domain.com/anoochit ค่า $_GET[‘name’] ที่ได้คือ anoochit ใน Request URI จะเป็น index.php?name=/anoochit ให้อัตโนมัติ ง่ายๆ แค่นี้เองครับ