แนวคิดการออกแบบปฏิทินกิจกรรมด้วย PHP แบบ Google Calendar

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

ในการเขียนโปรแกรมภาษา PHP ส่วนใหญ่เราจะใช้เขียนโปรแกรมเชื่อมต่อกับฐานข้อมูล MySQL เพื่อเรียกข้อมูลที่เก็บไว้ด้วยซอร์สโค๊ด PHP ที่เรากำหนดค่าการทำงานต่างๆไว้ ในส่วนของการแสดงผลเราจะใช้ javascript ช่วยเพื่อแบ่งเบาภาระเซิร์ฟเวอร์ให้ไม่ต้องคำนวณเองทั้งหมด

ในบทความนี้จะเป็นการนำเสนอแนวคิดการออกแบบปฏิทินแบบแสดงผลกิจกรรมแบบหลายวัน และแบบข้ามสัปดาห์ ว่าจะแสดงผลอย่างไร

ในตัวอย่างกิจกรรมเริ่มตั้งแต่วันที่ 2014-01-09 ถึงวันที่ 2014-01-13 รวมมั้งหมด 5 วันและจะต้องแสดงผลในสัปดาห์ที่สองและสามของปฏิทินด้วย สำหรับขั้นตอนที่จะต้องทำมีดังนี้

1) หาจำนวนวันระหว่างวันที่ เริ่มกิจกรรม และวันที่สิ้นสุด

2) นำจำนวนวันที่ได้ ไปคูณด้วยความกว้างของช่องปฏิทิน ในที่นี้คือ 5 x 100 จะได้ความยาวของกิจกรรมคือ 500px

3) สร้างแท็ก DIV เป็นเลเยอร์ที่แสดงกิจกรรมโดยกำหนดให้ position : absolute เพื่อให้ลอยอยู่เหนือตาราง

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

จะได้ (4+5) - 6 = 3 ความกว้างจะเท่ากับ 3 x 100 = 300px จะยาวได้พอดี

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

แต่เมื่อขึ้นสัปดาห์ใหม่ จะต้องเริ่มแสดงใหม่ดังนั้นก็ต้องมาเช็กอีกว่า รหัสกิจกรรมนี้เหลืออีกกี่วัน จะเห็นว่าในระหว่างวนลูปจะต้องเสียเวลาเช็กหลายรอบ ดังนั้นเราอาจจะใช้วิธีคำนวณไว้ก่อนแล้วเก็บเป็นแต่ละสัปดาห์ต้องแสดงในช่องไหนบ้าง

เช่น $data[21][12] = '200px'; กำหนดให้สัปดาห์ที่ 21 วันที่ 12 แสดงกิจกรรม 2 ช่อง (ในความเป็นจริงเราต้องเก็บอาร์เรย์หลายมิติเพื่อแสดงชื่อกิจกรรม และรหัสกิจกรรมเพื่อลิงค์ไปดูรายละเอียดอีกด้วย)

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

PHP สร้างเว็บไซต์ให้เป็นเรื่องง่ายๆ

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