เขียน PHP + Ajax ให้ประหยัดแบนด์วิธด้วยการแยก ข้อมูลดิบ ออกจาก HTML

"การเขียนโปรแกรมไม่ใช่เรื่องยาก"

ถึงแม้จะบอกว่าการเขียนโปรแกรมไม่ใช่เรื่องยาก แต่มันก็ไม่ง่ายเหมือนปอกกล้วยเข้าปากซะทีเดียว ผมเองก็ไม่ได้จบสายซอร์ฟแวร์โดยตรงดังนั้นซอร์ฟแวร์ที่ผมคลุกคลีอยู่กับมันล้วนแล้วแต่เป็นเรื่องของการลองผิดลองถูก นำโค๊ด PHP ของชาวบ้านมาลองดัดแปลงดู และสั่งสมประสบการณ์ทีละเล็กทีละน้อย และแล้ววันหนึ่งก็มานั่งเขียนโปรแกรมเช้ายันเย็น จนกระทั่งดึกดื่นมืดค่ำ บางทีก็ย่ำเช้า ^^"

บทความไหนที่ผมบอกว่าน่าใช้ก็คือ "มันแค่น่าใช้งานนะ >_< " ให้ลองเอาไปปรับใช้ดู อาจใช้ได้บ้างไม่ได้บ้างเพราะมีปัจจัยหลายอย่างที่เป็นตัวแปรให้ผลลัพธ์ที่ได้ต่างกันไป

รูปที่ 1 แผนผังการทำงาน

มาบทความนี้เราจะมาลองเขียนโปรแกรมโดยใช้เทคนิคที่ว่าจะช่วยลดการทำงานของเซิร์ฟเวอร์ที่เคยนำเสนอในบทความก่อนว่าจะทำได้จริงหรือไม่ และทำได้มากน้อยขนาดไหน หรือบางทีผลลัพธ์จากการเขียนโปรแกรมด้วยหลักการนี้อาจจะย่ำแย่กว่าที่คิดก็เป็นได้ >__<

จากบทความ PHP Calendar : ฝีกสร้างปฏิทินไว้ใช้ในงานต่างๆ เราจะลองนำมาเขียนโปรแกรมสร้างเป็นปฏิทิน PHP ฉบับสมบูรณ์โดยเพิ่มความสามารถพิเศษคือ สามารถเปลี่ยนมุมมองของปฏิทินให้มีหลายๆมุมมองโดยถ้าใครเคยใช้ Google Calendar จะเห็นว่ามีให้เลือกอยู่ 4-5 แบบด้วยกัน คือ มุมมองแบบวัน มุมมองแบบสัปดาห์ มุมมองแบบเดือน และสุดท้ายแบบแผนงาน

โดยเริ่มแรกเราจะให้มุมมองแรกที่แสดงเป็นแบบเดือน และเมื่อคลิกที่ปุ่มแต่ละแบบก็ให้เปลี่ยนมุมมองตามเงื่อนไขวันที่ที่เราได้เลือกไว้ ในการเปลี่ยนมุมมองแต่ละครั้ง จะมีการส่งเงื่อนไขสำหรับใช้เรียกข้อมูลจากฐานข้อมูลมาแสดงในปฏิทินด้วย

รูปที่ 2 การคืนค่าตารางปฏิทินที่สร้างและจัดรูปแบบด้วย PHP

สิ่งที่แตกต่างจากแบบเดิมคือ เราจะไม่เขียนโปรแกรมสร้างตารางปฏิทินโดยใช้โค๊ด PHP แต่เราจะหันไปใช้ JavaScript เป็นตัวสร้างตารางปฏิทินแทน ในส่วนของโค๊ด PHP นั้นเราจะเขียนโปรแกรมสำหรับดึงข้อมูลและส่งค่ากลับมาเท่านั้น

ลองเข้าไปทดสอบโค๊ด PHP ปฏิทิน ที่ผมสร้างไว้สำหรับเป็นตัวอย่าง ที่นี่

การเรียกปฏิทินจากโค๊ดตัวอย่าง จะเป็นการส่งผ่าน Ajax โดยใช้ jQuery เพื่อคืนค่าปฏิทินในช่วงเวลาต่างๆ ที่เราคลิกเลือก และโค๊ด PHP ก็จะทำการสร้างตารางตามเงื่อนไขที่เราเลือกและส่งคืนมาแสดงผลในพื้นที่เรากำหนด

รูปที่ 3 แสดงขนาดของข้อมูลที่คืนค่าแบบเดิม

รูปที่ 4 แสดงขนาดของข้อมูล หลังปรับแต่งการทำงานของโค๊ดแล้ว

จากรูปที่ 3 และรูปที่ 4 จะเห็นได้ว่าข้อมูลที่ส่งกลับมานั้นมีข้อมูลต่างกันประมาณ 1.3KB แต่ยังคงให้ผลลัพธ์ที่เหมือนกันดังรูปที่ 5 ซึ่งถ้าปฏิทินนี้มีคนเรียกแสดงผลวันละหมื่นครั้ง การแสดงผลปฏิทินด้วย PHP ทั้งหมด จะส่งข้อมูล 1.3 x 10,000 = 13MB ต่อวันเลยทีเดียว นี่ขนาดแค่ปฏิทินเล็กๆ ข้อมูลไม่มากมายแต่ยังใช้ขนาดนี้ทีเดียวนะครับ (ข้อมูลที่คำนวณมานี้เป็นเพียง การคิดด้วยหลักพื้นฐานผู้เขียนไม่ได้มีความรู้ทางด้านเทคนิคเชิงลึก ลองหาอ่านรายละเอียดเพิ่มเติมที่ http://www.thaicreate.com/web-host/web-host-disk-transfer-bandwidth.html)

รูปที่ 5 แสดงผลลัพธ์ในรูปแบบปฏิทินมุมมมองแบบเดือน

สรุปกันเลยละกันว่าถ้าต้องการให้ PHP ทำงานน้อยลงและประหยัดทรัพยากรระบบดังตัวอย่างที่นำเสนอมามีส่วนประกอบดังนี้
1. ใช้การโหลดข้อมูลด้วย Ajax จะได้ไม่ต้องโหลดข้อมูลทั้งหน้าเว็บ
2. ลดการเขียน HTML ด้วย PHP คือจะดึงเฉพาะข้อมูลเท่านั้น
3. นำข้อมูลที่ได้ไปจัดรูปแบบด้วย JavaScript

หมายเหตุ
1. การเขียนโปรแกรมด้วยวิธีนี้จะค่อนข้างยุ่งยากไปหน่อย เพราะต้องนำข้อมูลมาจัดรูปแบบทีหลัง
2. ถ้าใครที่เขียนโปรแกรม PHP ด้วย CodeIgninter อาจจะขัดใจหน่อยตรงที่ใช้มันมี
Template Parser Class ให้ใช้ ถ้าใช้วิธีนี้คงอดใช้ Template ที่สะดวกสะบาย
3. ถ้าจะใช้แนวคิดนี้เขียนโปรแกรมไม่ว่าอย่างไรก็ต้องโหลดหน้าเว็บเต็มๆ ในครั้งแรกอยู่ดี จะใช้เทคนิคนี้ก็ต่อเมื่อมีการรับ-ส่งข้อมูลผ่าน Ajax เท่านั้น (เพราะคงจะวุ่นวายน่าดูถ้าอะไรๆก็ JavaScript)
4. แล้วแต่ความคิดเห็นส่วนตัว ว่าจะเอาไปที่ที่ไหน เมื่อไหร่ อย่างไร

PHP วิถีเริ่มต้นของโปรแกรมเมอร์ รับทำเว็บไซต์

ค้นหาบล็อกนี้