โดยในบทความที่แล้วเราใช้ความสามาถของ Ajax ในการเลื่อนเปลี่ยนไปเดือนต่างๆ โดยที่ไม่มีการรีเฟรชหน้าจอ ทำให้ในการใช้งานจริงเราสามารถที่จะควบคุมการแสดงผลแบบต่อเนื่องได้ เราสามารถที่จะนำไปประยุกต์ต่อได้อีกมากมายเลยครับ เช่น ปฏิทินบันทึกและแสดงเหตุการณ์ต่างๆ ปฏิทินข่าว ปฏิทินนัดหมาย ฯลฯ แต่ว่าในบทความที่แล้วนั้นปฏิทินเรายังไม่สมบรูณ์เพราะว่าจะสังเกตได้ว่าหากเราต้องการเลื่อนเปลี่ยนไปดูในเดือนต่างๆใน พ.ศ.อื่นๆ จะลำบากมากเพราะเราต้องคลิกต่อๆไปเรื่อยๆ วันนี้เราจึงมีทางแก้ไขครับโดยการ ทำให้มันเลือกได้ ซะเลยทั้งเดือน ทั้ง พ.ศ. เป็นอย่างไรเรามาลองทำกันดูครับ
การทำงานในบทความนี้เรายังคงอิงจากไฟล์เดิมในบทความที่แล้วนะครับ แต่จะมีการปรับแก้ไขในบางส่วน ผมจะแสดงเฉพาะไฟล์ที่แก้ไขใหม่นะครับ คือไฟล์ calendar_4.php ผมจะบันทึกในชื่อ calendar_5.php ส่วนไฟล์ ajaxCalendar.php, ajax_framework.js, styles.css นั้นไม่มีการแก้ไขอะไรเลยนะครับใช้ของเดิมได้เลย เรามาลองทำกันเลยครับ คัดลอกโค้ดนี้ไปแล้วเดี๋ยวเรามาอธิบายกันต่อไป
ไฟล์ calendar_5.php
<?
$today = strtotime("now");
$TH_Month = array("มกราคม","กุมภาพันธ์","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน",
"กรกฏาคม","สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม");
$TH_Day = array("อาทิตย์","จันทร์","อังคาร","พุธ","พฤหัสบดี","ศุกร์","เสาร์");
$date = date('j',$today);
$num_day = date('w',$today);
$month = date('n',$today);
$TH_Year = date('Y',$today)+543;
?>
<html>
<head>
<title>ปฏิทินเบื้องต้น</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="ajax_framework.js"></script>
<script>
function calendar(now){
var data = "now=" + now;
var url = "ajaxCalendar.php";
ajaxLoad('get',url,data,'mk_calendar');
}
function selectCalendar(strMonth,strYear){
IntYear = parseInt(strYear) - 543;
IntMonth = parseInt(strMonth) + 1;
var goto = IntYear.toString().concat("-").concat(IntMonth.toString());
var goto_timestamp = Date.parse(goto)/1000;
calendar(goto_timestamp);
}
</script>
</head>
<body>
<span>
<form name="frmSelectCalendar">เดือน :
<select name="slt_month" onchange="selectCalendar(this.value,slt_year.value)">
<?
for($i=0;$i<count($TH_Month);$i++){
if($i == $month-1){
echo "<option value=$i selected>" . $TH_Month[$i] . "</option>";
}else{
echo "<option value=$i>" . $TH_Month[$i] . "</option>";
}
}
?>
</select> ปี :
<select name="slt_year" onchange="selectCalendar(slt_month.value,this.value)">
<?
for($j=($TH_Year-30);$j<2600;$j++){
if($j == $TH_Year){echo "<option value=$j selected>" . $j . "</option>";}
echo "<option value=$j>" . $j . "</option>";
}
?>
</select>
</form>
</span>
<span id=mk_calendar><script>calendar('');</script></span>
<br />
<span id=today><a href="javascript: calendar(<?echo $today?>);">วันนี้ วัน <?echo $TH_Day[$num_day]?> ที่ <?echo $date?> เดือน <?echo $TH_Month[$month-1]?>
ปี <?echo $TH_Year?></a>
</span>
<br /><br />
<span id=sh_time>หน้านี้โหลดเมื่อเวลา @ <?echo(date('G:i:s'));?> น.</span>
</body>
</html>
อธิบายการทำงานของไฟล์
ในส่วนของการเลือกเดือนต่างๆ หรือ ปี พ.ศ. นั้นผมเลือกใช้แท็ก <select> โดยเราต้องกำหนดส่วนที่เราจะให้เลือกไปก่อนในเบื้องต้น คือส่วนของตัวเลือก ให้มีการแสดงผลเป็นภาษาไทยทั้ง เดือน และ ปี พ.ศ. โดยทำเหมือนกับในไฟล์ ajaxCalendar.php นะครับ
<?
$today = strtotime("now");
$TH_Month = array("มกราคม","กุมภาพันธ์","มีนาคม","เมษายน","พฤษภาคม","มิถุนายน",
"กรกฏาคม","สิงหาคม","กันยายน","ตุลาคม","พฤศจิกายน","ธันวาคม");
$TH_Day = array("อาทิตย์","จันทร์","อังคาร","พุธ","พฤหัสบดี","ศุกร์","เสาร์");
$date = date('j',$today);
$num_day = date('w',$today);
$month = date('n',$today);
$TH_Year = date('Y',$today)+543;
?>จากนั้นผมก็เริ่มสร้างตัวเลือกของเรา ซึ่งจะต้องสร้างเป็นฟอร์มก่อน โดยให้ส่วนเลือกเดือนมีชื่อว่า slt_month ดังนี้
<form name="frmSelectCalendar">เดือน :
<select name="slt_month" onchange="selectCalendar(this.value,slt_year.value)">
<?
for($i=0;$i<count($TH_Month);$i++){
if($i == $month-1){
echo "<option value=$i selected>" . $TH_Month[$i] . "</option>";
}else{
echo "<option value=$i>" . $TH_Month[$i] . "</option>";
}
}
?>
</select>โดยการแสดงผลนั้นเราใช้การส่งค่าเดือนจากอาเรย์ $TH_Month โดยการอ้างอิงจากตำแหน่งที่วนเรียกเข้าไปแสดงผลนั่นเอง อ่ออีกอย่างครับผมได้ใส่ ค่าประจำตำแหน่งแต่ละตำแหน่งไปด้วยเป็นค่าของตำแหน่งเดือนนั้นๆ เพื่อใช้สำหรับเรียกใส่ให้กับฟังก์ชั่นสร้างปฏิทินต่อไป
และส่วนของการเลือก ปี พ.ศ. ให้ชื่อว่า slt_year ผมจะให้มีการแสดงผลดังนี้ สำหรับโค้ดก็คล้ายๆกับเดือนเลยครับ
ปี :
<select name="slt_year" onchange="selectCalendar(slt_month.value,this.value)">
<?
for($j=($TH_Year-30);$j<2600;$j++){
if($j == $TH_Year){echo "<option value=$j selected>" . $j . "</option>";}
echo "<option value=$j>" . $j . "</option>";
}
?>
</select>
</form>ซึ่งสำหรับแท็ก <select> ที่ใช้สำหรับการเลือกทั้งเดือนและปี พ.ศ. นั้นผมได้ใช้การจัดการ event เป็น onchange() นะครับ คือให้มีการทำงานทุกๆครั้งที่มีการเลือกเกิดขึ้น โดยจะเข้าไปทำงานที่ส่วนของฟังก์ชั่นของจาวาสคริปต์ selectCalendar() นั่นเอง
function selectCalendar(strMonth,strYear){
IntYear = parseInt(strYear) - 543;
IntMonth = parseInt(strMonth) + 1;
var goto = IntYear.toString().concat("-").concat(IntMonth.toString());
var goto_timestamp = Date.parse(goto)/1000;
calendar(goto_timestamp);
}โดยในส่วนของฟังก์ชั่นนี้นั้นทำหน้าที่ในการรับค่า เดือน และ ปี พ.ศ. จากการที่เราเลือกเพื่อเปลี่ยนปฏิทินไปตามที่เราต้องการนั่นเองซึ่ง ค่าที่เรารับมานั้นเป็น string จึงต้องทำการแปลงให้เป็น Integer ก่อนเพื่อใช้ในการคำนวณต่อ ซึ่งในส่วนของ ปี พ.ศ. เราต้องทำการแปลงเป็น ปี ค.ศ. โดยการ - 543 ออกไป และในส่วนของเดือนนั้นเราต้องทำการ +1 เข้าไปเนื่องมาจากการทำงานของฟังก์ชั่นก่อนหน้าที่เริ่มต้นเดือนที่ตำแหน่ง 0 จึงต้องทำการบวก 1 ทดแทนเข้าไปให้เกิดเป็นเดือนจริงๆที่เริ่มต้นที่ 1 โดยการใช้งานดังนี้
IntYear = parseInt(strYear) - 543; IntMonth = parseInt(strMonth) + 1;
เมื่อแปลงค่าและกำหนดค่าเสร็จแล้วเราก็ต้องแปลงค่าที่เราได้ให้เป็นค่า Timestamp อีกที
var goto = IntYear.toString().concat("-").concat(IntMonth.toString());
var goto_timestamp = Date.parse(goto)/1000;การใช้ concat() คือการต่อ string โดยให้เป็นไปตามฟอร์แมตของ Timestamp ซึ่งเราได้แปลงค่าก่อนหน้านี้ให้เป็น string โดยการใช้ toString() จากนั้นใช้การแปลงเป็น Timestamp ต่อด้วยการเรียก Date.parse() สำหรับการ หารด้วย 1000 นั้นเพื่อให้เอาเศษมิลลิวินาทีออกไปนั่นเอง
เมื่อเราได้ค่า Timestamp ที่สมบูรณ์แล้วเราก็ทำการเรียกใช้ฟังก์ชั่นสำหรับสร้างปฏิทินให้เป็นไปดังที่เราเลือกดังนี้
calendar(goto_timestamp);
ในการใช้งาน เราจะเรียกใช้ฟังก์ชั่นนี้เมื่อเกิด Event กับ select ใดๆ แบบนี้
<select name="slt_month" onchange="selectCalendar(this.value,slt_year.value)">
ในการส่งค่าใดๆไปตามฟังก์ชั่น selectCalendar() นั้น ผมได้ส่งค่าสองค่าด้วยกันเข้าไปคือ ค่าของการเลือกเดือน และค่าของการเลือกปี พ.ศ. โดยจะดูจากการเลือกในแต่ละครั้งว่าเราได้ทำการเลือกส่วนไหนไป คือหากทำการเลือกเดือน ก็จะทำการส่งค่าของตัวเองกับ ปีพ.ศ. ขณะนั้นไปด้วย นั่นคือ slt_year.value หรือถ้าเลือก ปี พ.ศ. ก็จะทำการส่งค่าของปีนั้นไป คือ this.value และส่งค่าของเดือนขณะนั้นไปด้วย คือ slt_month.value ดังนี้
เลือกเดือน
<select name="slt_month" onchange="selectCalendar(this.value,slt_year.value)">
เลือกปี
<select name="slt_year" onchange="selectCalendar(slt_month.value,this.value)">
ในที่นี้หากเราเลื่อนไปยังเดือนอื่นๆ หรือ ปีพ.ศ. อื่นๆแล้ว เราสามารถกลับมาดูวันที่ปัจจุบันได้โดยคลิกลิงค์ของวันที่ปัจจุบันด้านล่าง มีโค้ดดังนี้ครับ
<span id=today><a href="javascript: calendar(<?echo $today?>);">วันนี้ วัน <?echo $TH_Day[$num_day]?> ที่ <?echo $date?> เดือน <?echo $TH_Month[$month-1]?> ปี <?echo $TH_Year?></a>
เมื่อเข้าใจแล้วลองทำดูนะครับจะได้หน้าตาแบบนี้ ไม่ว่าคุณจะเลือกเดือน หรือปี พ.ศ. ใดๆ หรือจะคลิกเลื่อนไปเอง หน้าจอจะไม่มีทางรีเฟรชเลยแน่นอน
ปฏิทินที่เราทำกันในวันนี้นั้นเป็นเพียงจุดเริ่มต้นของบทความต่อไปครับ ในบทความต่อไปเราจะได้มาลองทำ ปฏิทินนัดหมาย โดยเราสามารถที่จะบันทึกการนัดหมายของเรา และให้แสดงบนปฏิทินได้นั่นเอง โปรดติดตามในบทความต่อไปนะครับ
:)
รอติดตามผลงานตอนที่ 6 อยู่น่ะคับ
ReplyDeleteจะมีบทความเรื่องปฏิทินอีกไหมครับ
ReplyDeleteช่วงนี้ยังไม่มีเลยครับ ยุ่งกับงานนอกอยู่ครับ
Delete