สำหรับบทความนี้เราจะมาลองเขียนโปรแกรมภาษา PHP เพื่อสร้างปฏิทินและนำข้อมูลกิจกรรมจากฐานข้อมูล MySQL มาแสดงในปฏิทินด้วย PHP โครงสร้างฐานข้อมูลและซอร์สโค๊ดมีดังนี้
ผลลัพธ์ที่ได้จะมีส่วนแสดงผลที่ผิดพลาดคือ กิจกรรมจะเกิดการซ้อนทับกัน จะเห็นว่ากิจกรรมที่ 1 กับกิจกรรมที่ 3 จะซ้อนทับกัน ซึ่งในส่วนนี้จะต้องหาวิธีแก้ไขโดยการตรวจสอบว่าวันดังกล่าวมีกิจกรรมหรือยัง โดยดูลำดับอาร์เรย์ว่ากิจกรรมนั้นๆอยู่ตำแหน่งที่เท่าใด แล้วก็กำหนดตำแหน่งเริ่มแสดงผลใหม่
ซึ่งในส่วนนี้เราจะต้องใช้ Javascript ในการช่วยกำหนดตำแหน่งการแสดงผล ในบทความต่อไปเราจะมาลองใช้ jQuery เพื่อปรับแต่งในส่วนการแสดงผลให้ถูกต้องต่อไป
สร้างตารางข้อมูลสำหรับเพิ่มกิจกรรมทดสอบ
--
-- Table structure for table `tb_event`
--
CREATE TABLE IF NOT EXISTS `tb_event` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`url` varchar(200) NOT NULL,
`start_date` date NOT NULL,
`stop_date` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
--
-- Dumping data for table `tb_event`
--
INSERT INTO `tb_event` (`id`, `title`, `url`, `start_date`, `stop_date`) VALUES
(1, 'กิจกรรม ทดสอบ 1', 'ddd', '2014-05-07', '2014-05-21'),
(2, 'กิจกรรม ทดสอบ 2', 'aaa', '2014-05-22', '2014-05-27'),
(3, 'กิจกรรม ทดสอบ 3', 'sssssssss', '2014-05-09', '2014-05-12');
ซอร์สโค๊ดปฏิทิน PHP และการนำข้อมูลจากฐานข้อมูลมาแสดงในปฏิทินด้วย PHP
<?php
/******** FUNCTION ********/
function dateDiff($strDate1,$strDate2){
return (strtotime($strDate2) - strtotime($strDate1))/ ( 60 * 60 * 24 ); // 1 day = 60*60*24
}
/******** CLASSES *********/
Class MyCalendar {
var $month;
var $data;
/**
* สรุปคือวนลูปจาก start ไปถึง stop แล้วนับไปเรื่อยๆ
* หากเกิน 6 ก็ให้เพิ่มเป็นอาร์เรย์ใหม่ ของวันนั้นๆ แล้วก็บวกจำนวนช่องใหม่
* เมื่อมีการข้ามหลายสัปดาห์ ก็ยังสามารถนับได้ถูกต้อง
*/
function setValue($startDate, $stopDate, $id, $title, $url)
{
$totalLen = dateDiff($startDate, $stopDate) + 1;//นับวันที่เริ่มด้วย
$timeDate = strtotime($startDate); //เปลี่ยนวันที่เป็น timestamp
$day = date('j', $timeDate);
$this->data[$day][$id]['title'] = $title;
$this->data[$day][$id]['url'] = $url;
$len = 0;
for($i=1;$i<$totalLen;$i++){
$len++;
$point = date('w', $timeDate);//ตำแหน่งวันปัจจุบัน
$this->data[$day][$id]['len'] = $len;
$timeDate = strtotime ( "+1 day" , $timeDate );
if($point == 6){//ขึ้นแถวใหม่
$day = date('j', $timeDate);//สร้างคีย์ของวันใหม่
$this->data[$day][$id]['title'] = $title;
$this->data[$day][$id]['url'] = $url;
$len = 0;
}
}
}
function getData($monYear)
{
$this->data = array();
$sql = "SELECT id, title, url, start_date, stop_date FROM tb_event
WHERE DATE_FORMAT( start_date, '%Y-%m' ) = '$monYear'
OR DATE_FORMAT( stop_date, '%Y-%m' ) = '$monYear'";
$result = mysql_query($sql) or die(mysql_error());
while($row = mysql_fetch_assoc($result)){
echo "$row[title] : $row[start_date] - $row[stop_date]<br/>";
$this->setValue($row['start_date'], $row['stop_date'], $row['id'], $row['title'], $row['url']);
}
return $this->data;
}
}
?>
<html>
<head>
<title>SUNZAN-DESIGN.COM - PHP Calendar</title>
<style>
table td{ width : 100px; height : 70px; }
table td, table th{border : 1px solid #eeeeee;}
.event{ position : absolute; border : 1px solid green; background-color: #CFFEF4;}
</style>
</head>
<body>
<?php
/************ PAGE ****************/
$hostname = "localhost"; //เครื่องที่ติดตั้ง Appserv หรือโปรแกรมจำลองเซิร์ฟเวอร์ต่างๆ จะใช้ localhost
$username = "root"; //ได้จากตอนติดตั้ง Appserv สามารถกำหนดใหม่ภายหลังได้เอง
$password = "123456"; //รหัสผ่านตอนที่ระบุตอนติดตั้ง Appserv สามารถกำหนดใหม่ได้ภายหลัง
$conn = mysql_connect($hostname, $username, $password);
if($conn )
{
mysql_query('SET NAMES UTF8');
mysql_select_db("test") or die(mysql_error());
}
else
{
echo "เชื่อมต่อฐานข้อมูลไม่ได้"; //แสดงข้อความหากติดต่อฐานข้อมูลสำเร็จ
}
$_POST['month'] = '05';
$_POST['year'] = '2014';
$monthYear = $_POST['year'] . "-" . $_POST['month'];//2014-05
$eventObj = new MyCalendar();
$data = $eventObj->getData($monthYear);
/********** CALENDAR ***********/
$dayOfWeek = array( 'อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสฯ', 'ศุกร์', 'เสาร์');
$monthOfThai = array( "01" => "มกราคม", "02" => "กุมภาพันธ์", "03" => "มีนาคม", "04" => "เมษายน",
"05" => "พฤษภาคม","06" => "มิถุนายน", "07" => "กรกฎาคม", "08" => "สิงหาคม",
"09" => "กันยายน", "10" => "ตุลาคม", "11" => "พฤศจิกายน", "12" => "ธันวาคม");
$month = isset($_POST['month']) ? $_POST['month'] : date('m'); //ถ้าส่งค่าเดือนมาใช้ค่าที่ส่งมา ถ้าไม่ส่งมาด้วย ใช้เดือนปัจจุบัน
$year = isset($_POST['year']) ? $_POST['year'] : date('Y'); //ถ้าส่งค่าปีมาใช้ค่าที่ส่งมา ถ้าไม่ส่งมาด้วย ใช้ปีปัจจุบัน
//วันที่
$startDay = $year.'-'.$month."-01"; //วันที่เริ่มต้นของเดือน
$timeDate = strtotime($startDay); //เปลี่ยนวันที่เป็น timestamp
$lastDay = date("t", $timeDate); //จำนวนวันของเดือน
$endDay = $year.'-'.$month."-". $lastDay; //วันที่สุดท้ายของเดือน
$startPoint = date('w', $timeDate); //จุดเริ่มต้น วันในสัปดาห์
//ลดเวลาลง 1 เดือน
$prevMonTime = strtotime ( '-1 month' , $timeDate );
$prevMon = date('m', $prevMonTime);
$prevYear = date('Y', $prevMonTime);
//เพิ่มเวลาขึ้น 1 เดือน
$nextMonTime = strtotime ( '+1 month' , $timeDate );
$nextMon = date('m', $nextMonTime);
$nextYear = date('Y', $nextMonTime);
$title = "เดือน ". $monthOfThai[$month];// ."<strong>". $startDay. " : ". $endDay."</strong>";
$row = 0; //นับว่าครบ 6 แถวหรือยัง
$col = $startPoint; //ให้นับลำดับคอลัมน์จาก ตำแหน่งของ วันในสับดาห์
echo '<div id="main">';
echo "<table id='tb_calendar' border='0' cellpadding='0' cellspacing='0'>"; //เปิดตาราง
echo "<tr><th>" . implode("</th><th>", $dayOfWeek) . "</th></tr>";
$prevDate = strtotime ( '-1 day' , strtotime ( $startDay ) ) ;
$lastPrevDay = date ( 'd' , $prevDate );
if($startPoint == 0){
$args = range($lastPrevDay - 6, $lastPrevDay);
$string = str_repeat("<td class='prev_month'>%s</td>", count($args));
echo "<tr>". vsprintf($string, $args) . "</tr>";
$row++;
}
echo "<tr>";
//สร้างคอลัมน์เปล่า กรณี วันแรกของเดือนไม่ใช่วันอาทิตย์
if($startPoint > 0 && $startPoint < 7){
$args = range($lastPrevDay - ($startPoint-1), $lastPrevDay);
$string = str_repeat("<td class='prev_month'>%s</td>", $startPoint);
echo vsprintf($string, $args);
}
for($i=1; $i <= $lastDay; $i++){ //วนลูป ตั้งแต่วันที่ 1 ถึงวันสุดท้ายของเดือน
$col++; //นับจำนวนคอลัมน์ เพื่อนำไปเช็กว่าครบ 7 คอลัมน์รึยัง
$title = '';
$day = $i;
if(isset($data[$day]) && is_array($data[$day]) ){
$layer = 1;
foreach($data[$day] as $rowId=>$rs){
$title .= '<div class="event layer'.$layer.'" style="width:'.($rs['len']*101).'px;">
<a href="index.php?page=view_detail&source='.$rs['url'].'&ref='.$rowId.'">'. $rs['title'] . '</a>
</div>';
$layer++;
}
}
echo "<td valign='top'><div>", $i, "</div>", $title , "</td>"; //สร้างคอลัมน์ แสดงวันที่
if($col % 7 == false){ //ถ้าครบ 7 คอลัมน์ให้ขึ้นบรรทัดใหม่
echo "</tr><tr>"; //ปิดแถวเดิม และขึ้นแถวใหม่
$col = 0; //เริ่มตัวนับคอลัมน์ใหม่
$row++;
}
}
// ถ้ายังไม่ครบ7 วัน สร้างคอลัมน์ให้ครบตามจำนวนที่ขาด
if($col < 7){
$c = 7-$col;
$args = range(1, $c);
$string = str_repeat("<td class='next_month'>%s</td>", $c);
echo vsprintf($string, $args);
$row++;
}
echo '</tr>';
//ถ้าไม่ครบ 6 แถว ให้เพิ่มอีกแถว
if($row < 6){
$c = max($args);
$args = range($c+1, $c+7);
$string = str_repeat("<td class='next_month'>%s</td>", count($args));
echo "<tr>", vsprintf($string, $args) , "</tr>";
}
echo '</table>';
echo "<pre>", print_r($data, true), "</pre>";
mysql_close();
?>
</body>
</html>
ผลลัพธ์ที่ได้จะมีส่วนแสดงผลที่ผิดพลาดคือ กิจกรรมจะเกิดการซ้อนทับกัน จะเห็นว่ากิจกรรมที่ 1 กับกิจกรรมที่ 3 จะซ้อนทับกัน ซึ่งในส่วนนี้จะต้องหาวิธีแก้ไขโดยการตรวจสอบว่าวันดังกล่าวมีกิจกรรมหรือยัง โดยดูลำดับอาร์เรย์ว่ากิจกรรมนั้นๆอยู่ตำแหน่งที่เท่าใด แล้วก็กำหนดตำแหน่งเริ่มแสดงผลใหม่
ซึ่งในส่วนนี้เราจะต้องใช้ Javascript ในการช่วยกำหนดตำแหน่งการแสดงผล ในบทความต่อไปเราจะมาลองใช้ jQuery เพื่อปรับแต่งในส่วนการแสดงผลให้ถูกต้องต่อไป
"PHP ไม่ได้สร้างสุดยอดโปรแกรมแต่ PHP ช่วยให้งานคุณง่ายขึ้นต่างหาก"
PHP CI MANIA - PHP Code Generatorโปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
สนใจสั่งซื้อเพียง 3,990 บาท
PHP CI MANIA - PHP Code Generator
โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ความคิดเห็น
แสดงความคิดเห็น