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

เนื่องจากมีน้องคนหนึ่งให้ช่วยดูโค้ดเกี่ยวกับ Fullcalendar ให้หน่อย แล้วพอดีช่วงนี้ผมก็กำลังสนใจปฏิทิน Fullcalendar อยู่พอดี จึงลองหาสาเหตุที่ไม่สามารถแสดงข้อมูลจาก MySQL และไม่สามารถแทรก icon เข้าไปใน Fullcalendar ได้ จากที่สังเกตุได้ครั้งแรกคือ Error ที่ Console ของ Firefox เกี่ยวกับฟังก์ชั่นที่เขียนผิด และก็มีการ echo ค้างไว้ในส่วนของไฟล์ getCalendar.php ก็เลยจัดการทดสอบแล้วลบ echo ออกให้เหลือแค่ echo json_encode($event_array); ที่ได้ใช้งานจริงเท่านั้น ขั้นตอนการตรวจสอบความถูกต้องของโค้ด PHP 1) ต้องแน่ใจว่าคำสั่งที่เขียนไว้ สามารถดึงข้อมูลมาแสดงผลได้ด้วยการ echo $sql; 2) นำคำสั่งที่ได้ไปรันในโปรแกรมจัดการฐานข้อมูล ในที่นี้คือ phpMyAdmin 3) เมื่อตรวจสอบดูผลลัพธ์ที่ได้ หากถูกต้องมีข้อมูลก็แสดงว่าการ Query ทำงานได้ 4) มาดูการทำงานของ JavaScript ในส่วนของ jQuery มีการแจ้งเตือนที่ฟังก์ชั่น .on() ซึ่งจะใช้กับ jQuery เวอร์ชั่นใหม่เท่านั้น นั่นหมายถึงเวอร์ชั่น jQuery ที่มากับ Fullcalendar เป็นเวอร์ชั่นเก่า ก็ให้เปลี่ยนไปใช้ .live() แทน ก็จะทำงานได้ปกติ 5) ม...

หลักการทำงาน เรียกข้อมูลจากตาราง tb_event ด้วยฟังก์ชั่นของ MySQLi ข้อมูลจากฐานข้อมูลจะถูกวนลูปเก็บไว้ใน $data และจะถูกส่งไปที่ Fullcalendar ด้วยการแปลงข้อมูลจาก PHP ให้อยู่ในรูปแบบ JSON อาร์เรย์ด้วยฟังก์ชั่น json_encode() PHP Code <?php //Database $data = array(); $link = mysqli_connect("127.0.0.1", "tobedev", "1234", "tobedev_example"); mysqli_set_charset($link, 'utf8'); if (!$link) {     echo "Error: Unable to connect to MySQL." . PHP_EOL;     echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;     echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;     exit; } $query = "SELECT * FROM tb_event"; if ($result = $link->query($query)) {     /* fetch object array */     while ($obj = $result->fetch_object()) {        $data[] = array(                 ...

หลังจากที่เคยลองเขียนปฏิทินไว้ใช้เองแล้วเริ่มยากขึ้นเรื่อยๆ ก็มีคนแนะนำว่า "เฮ้ยพี่ Fullcalendar มันเจ๋งมากเลยนะ" และจากวันนั้นผมก็เลิกเขียนปฏิทินเองไปเลยครับ เรามาลองใช้ Fullcalendar กันดูบ้างดีกว่าครับ

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

สำหรับบทความนี้เราจะมาลองเขียนโปรแกรมภาษา PHP เพื่อสร้างปฏิทินและนำข้อมูลกิจกรรมจากฐานข้อมูล MySQL มาแสดงในปฏิทินด้วย PHP โครงสร้างฐานข้อมูลและซอร์สโค๊ดมีดังนี้  

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

       จากบทความเดิมที่เป็นตัวอย่างการสร้างปฏิทิน PHP ใน มุมมองแบบรายเดือน และปฏิทิน PHP ใน มุมมองแบบรายสัปดาห์   จะเป็นแค่เพียงตัวอย่างการเขียนโปรแกรม PHP เพื่อสร้างปฏิทินเปล่าๆ และแบบแสดงข้อมูลกิจกรรมเท่านั้น ในบทความนี้จะมานำเสนอการตรวจสอบเงื่อนไขการจอง เพื่อแสดงเป็นสีพื้นหลังให้ทราบสถานะการจองในแต่ละวันกันครับ กำหนดให้ในแต่ละวัน ลูกค้าสามารถจองคิวได้เพียง 3 รายเท่านั้น $bookPerDay = 3; หากวันใดที่ไม่มีรายการจองให้แสดงพื้นหลังเป็นสีเขียว หากจองแล้วแสดงพื้นหลังเป็นสีเหลือง หากจองคิวครบแล้วให้แสดงเป็นสีแดง <style type="text/css">     .book_status1{ background-color : green;}     .book_status2{ background-color : yellow;}     .book_status3{ background-color : red;} </style>

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

การสร้างตารางปฏิทินนั้น มีขั้นตอนหลักๆ อยู่ประมาณ 5 ขั้นตอนครับ 1. ค้นหาตำแหน่งของวันที่ 1 ของเดือนที่ต้องการ $startPoint = date('w', $timeDate); //จุดเริ่มต้น วันในสัปดาห์ 2. หากไม่ได้เริ่มจากช่องซ้ายมือช่องแรกสุด ให้แทนที่ด้านหน้าเป็นช่องว่าง if($startPoint < 7){ //ถ้าวันอาทิตย์จะเป็น 7     echo str_repeat("<td> </td>", $startPoint); } 3. เริ่มวนลูปตั้งแต่วันที่ 1 จนถึงวันสุดท้ายของเดือนนั้น for($i=1; $i <= $lastDay; $i++) 4. สร้างข้อมูลให้ครบ 7 วัน หรือ 7 คอลัมน์ ถ้าครบขึ้นบรรทัดใหม่ if($col % 7 == false) 5. ถ้าวันที่สุดท้ายของเดือนไม่ได้อยู่ช่องสุดท้าย ให้แทนที่ช่องที่เหลือด้วยค่าว่าง if($col < 7){ // ถ้ายังไม่ครบ7 วัน     echo str_repeat("<td> </td>", 7-$col); } ผลลัพธ์ที่ได้