สวัสดีครับวันนี้เรามาทำปฏิทินต่อจากบทความที่ผ่านมา ซึ่งบทความตอนที่แล้วนั้นเราได้ใส่สีสันให้กับปฏิทินเราด้วยเทคนิค CSS จนมีหน้าตาสวยงามไปแล้วนะครับ ดูได้จาบทความนี้นะครับ
สำหรับวันนี้เราก็จะมาทำการเพิ่มเติมรูปแบบปฏิทินของเราให้มีฟังก์ชั่นที่น่าใช้งานมากยิ่งขึ้นอีก นั่นคือการเพิ่มการเลื่อนแสดงปฏิทินไปเดือนที่ผ่านมา / เดือนก่อนหน้านะครับ
หลักการทำงานของเราก็ง่ายๆเพียงเราเพิ่มลิงค์ที่ใช้สำหรับการเลื่อนดูปฏิทินที่ส่วนหัวของตาราง แล้วก็เก็บค่า Timestamp ของเดือนนั้นๆไว้มาทำงานต่อในส่วนของการสร้างปฏิทินนะครับ เรามาลุยกันเลย
เริ่มต้นก็ขอให้คัดลอกโค้ดนี้ไปก่อนนะครับ แล้วเรามาอธิบายโค้ดคำสั่งต่างๆกัน
ไฟล์ calendar_3.php
ไฟล์ calendar_3.php
<html>
<head>
<title>ปฏิทินเบื้องต้น</title>
<style>
.sunday{color: white;background-color:red;}
.saturday{color: white;background-color:#9900CC;}
.default{color: black;background-color:white;}
.today{color: blue;background-color:yellow;}
</style>
</head>
<body>
<?
$now = strtotime("now");
if(isset($_GET['now']) && !empty($_GET['now'])){
$now = $_GET['now'];
}
$month = date('n',$now);
$year = date('Y',$now);
$first = strtotime("$year-$month-1");
$first_day = date('w',$first);
$num_day = date('t',$now);
$today = date("Y-n-j");
$TH_Day = array("อา.","จ.","อ.","พ.","พฤ.","ศ.","ส.");
$TH_Month = array(1 => "มกราคม","กุมภาพันธ์","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน",
"กรกฏาคม","สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม");
$TH_Year = $year+543;
$class = "default";
$url_togo = $_SERVER['PHP_SELF'] . "?now=";
$last_month = strtotime("-1 month $year-$month");
$next_month = strtotime("+1 month $year-$month");
$url_lastMonth = "<a href=\"" . $url_togo . $last_month . "\">«</a>";
$url_nextMonth = "<a href=\"" . $url_togo . $next_month . "\">»</a>";
echo("<table border=0 cellspacing=1 cellpadding=7 bgcolor=#FFCC99>
<tr>
<th>$url_lastMonth</th>
<th colspan=5>พุทธศักราช $TH_Year<p>$TH_Month[$month]</th>
<th>$url_nextMonth</th>
</tr>
<tr bgcolor=#FFFACD><th>" . implode("</th><th>",$TH_Day) . "</th></tr>");
$start = 1 - $first_day;
$w = 1;
for($d = $start; ;$d++){
$class = "default";
$date = "$year-$month-$d";
if($w == 1){
$class = "sunday";
echo("<tr align=center class=$class>");
}else if($w == 7){
$class = "saturday";
}else{
$class = "default";
}
if($d < 1){
echo("<td class=$class> </td>");
}else if($d >= $num_day){
if($d == $num_day){
if($today == $date){
$class = "today";
}
echo("<td align=center class=$class>$d</td>");
}else{
if($w == 7){
$class = "saturday";
}else{
$class = "default";
}
echo("<td class=$class> </td>");
}
if($w == 7){
echo("</tr>");
break;
}
}else{
if($today == $date){
$class = "today";
}
echo("<td align=center class=$class>$d</td>");
}
if($w == 7){
echo("</tr>");
$w = 1;
}else{
$w++;
}
}
?>
</table>
</body>
</html>
อธิบายการทำงาน
ผมได้นำไฟล์เดิมจาก calendar_2.php ในบทความตอนที่แล้วมาทำการแก้ไขเพิ่มเติมนะครับ โดยผมขออธิบายในส่วนที่เพิ่มเติมเข้ามานะครับ (ผมปรับปรุงการแสดงผลนิดหน่อย หาดูเองนะไม่ยาก อิอิ)
ขั้นแรกเวลาเราจะสร้างปฏิทินโดยสามารถเลื่อนไปเดือนก่อนหน้า และเดือนถัดไปได้นั้น เราจะต้องมีตัวแปรตัวหนึ่งมาเก็บค่า Timestamp ของเดือนนั้นๆได้
$now = strtotime("now");
if(isset($_GET['now']) && !empty($_GET['now'])){
$now = $_GET['now'];
}
ในที่นี้ จะเป็นการตรวจสอบว่าหากมีการเก็บค่า Timestamp แล้วก็จะดำเนินการให้ตัวแปร $now เก็บค่า Timestamp นั้นๆไว้แทน โดยเริ่มต้นค่า Timestamp นั้นจะเป็นค่าของวันที่ปัจจุบัน ดูได้จากการเก็บค่าแรกดังนี้
$now = strtotime("now");
แล้วค่า Timestamp ในการเปลี่ยนแปลงแต่ละเดือนนั้นเราได้มาจากการที่เรา คลิก เดือนก่อนหน้า หรือว่า คลิก เดือนถัดไป จากโค้ด
$last_month = strtotime("-1 month $year-$month");
$next_month = strtotime("+1 month $year-$month");
$url_lastMonth = "<a href=\"" . $url_togo . $last_month . "\">«</a>";
$url_nextMonth = "<a href=\"" . $url_togo . $next_month . "\">»</a>";
การเลื่อนไปเดือนก่อนหน้านี้ คือ การ -1 เดือนปัจจุบัน
$last_month = strtotime("-1 month $year-$month");
การเลื่อนไปเดือนถัดไป คือ การ +1 เดือนปัจจุบัน
$next_month = strtotime("+1 month $year-$month");
ซึ่งมันจะเกี่ยวข้องกับการทำงานของลิงค์ที่เราใช้สำหรับคลิกเลื่อนเดือนนั้นด้วย ให้นึกถึงเวลาเราจะส่งข้อมูลไปโดยวิธี GET ซึ่งมันจะระบุข้อมูลเราพ่วงไปที่ท้าย URL ไปด้วยนะครับ เราก็ใช้ดังนี้
$url_togo = $_SERVER['PHP_SELF'] . "?now=";
มันก็จะระบุไปตาม Address ของเรา เช่น
"http://localhost/webmon1/calendar/calendar_3.php?now=**********"
ส่วน Timestamp จะเป็นอะไรก็ว่ากันไปตามเดือนต่างๆ
แล้วการทำงานอย่างอื่นหล่ะ ... เหมือนเดิมทุกอย่างครับ ในการสร้างปฏิทินตัวแปรตัวแรกที่เราจับมันมาทำงานนั่นก็คือ $now โดยเราจะใช้ค่านี้มาทำต่อในทุกๆครั้ง ดังนั้นเราจึงไม่ต้องแก้ไขในส่วนอื่นๆอีกครับ เพราะเราจัดการให้มันแล้วตั้งแต่ที่คุณ คลิก เพื่อเลื่อนไปเดือนต่างๆ
 |
| ผลลัพธ์เดิมจาก calendar_2.php |
|
| ผลลัพธ์ใหม่ โดยเลื่อนเดือนได้ จาก calendar_3.php |
การแสดงผลของเราเมื่อคลิกที่ลิงค์ เดือนก่อนหน้า หรือเดือนถัดไป URL ของเราจะมีการเพิ่มตัวแปร now=.... แนบท้ายไปด้วยเพื่อทำการส่ง Timestamp ใหม่ให้ระบบดำเนินการสร้างปฏิทินต่อไป (ในกรอบสีแดง)
 |
| เดือนถัดไป |
 |
| เดือนก่อนหน้า |
ในตอนต่อไปเราจะมาปรับปรุงการแสดงผลให้ดูเนียนตาขึ้นกว่าเดิมด้วยการใช้เทคนิคที่เรียกว่า Ajax จะเป็นแบบไหนติดตามกันด้วยนะครับในตอนต่อไป
PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 4)
:)
No comments:
Post a Comment