บทความสุดท้ายแล้วนะครับในเรื่องการทำปฏิทิน โดยก่อนหน้านี้เราได้ทำปฏิทินที่สามารถเลื่อนเปลี่ยนเดือนได้มาแล้ว ในบทความเรื่อง
ซึ่งเราจะพบว่าหากเรานำไปใช้กับเนื้อหาภายในเว็บไซต์หนึ่งๆนั้นเมื่อเราคลิกเพื่อเลื่อนไปดูเดือนอื่นๆ เราจะพบว่าหน้าเว็บไซต์เราจะต้องถูก รีเฟรช ไปด้วยซึ่งมันอาจจะทำให้เราไม่สะดวกในทุกๆครั้งที่เลื่อนไปดูเดือนต่างๆ (ซึ่งหากเราจะคลิกไปดูเดือนต่างๆ มันก็ไม่สะดวกอยู่แล้ว เดี๋ยวบทความต่อไปเราจะมาเลือกดูเดือนต่างๆแบบง่ายๆกัน)
ดังนั้นวิธีที่ดีที่สุดคือการทำให้มันไม่ต้องรีเฟรชหน้าใหม่ในทุกๆครั้งที่เลื่อนไปเดือนต่างๆ แล้วเราจะทำอย่างไร วิธีนี้เราสามารถใช้ความสามารถของ Ajax มาใช้ได้ครับนั่นคือ การที่เราต้องทำหน้าที่แสดงปฏิทินขึ้นมาส่วนหนึ่ง และส่วนที่เป็นระบบการสร้างปฏิทินอีกส่วนหนึ่ง โดยการเรียกการทำงานผ่านรูปแบบของ Ajax โดยการใช้ JavaScript นั่นแหละครับ การทำงานแบบนี้เป็นส่วนหนึ่งของรูปแบบที่เรียกว่า XHTML นั่นเอง
ขั้นตอนที่เราต้องทำงานนี้ ผมขอแบ่งไฟล์เพื่อให้สะดวกในการจัดการใหม่เลยนะครับ โดยใช้ไฟล์เดิมจากบทความที่แล้วมานั่นแหละ แต่เรามาแยก ทำใหม่ให้ดูง่าย จัดการง่ายไปอีกขั้นแค่นั้นเอง
ไฟล์ที่ต้องใช้
1. ไฟล์ calendar_4.php สำหรับเป็นส่วนของการแสดงผลปฏิทิน
2. ไฟล์ ajaxCalendar.php สำหรับเป็นส่วนของ ระบบที่ใช้สร้างปฏิทิน
3. ไฟล์ styles.css เป็นส่วนของ CSS ใช้สำหรับกำหนดการแสดงผลในหน้าเว็บไซต์
4. ไฟล์ ajax_framework.js ใช้สำหรับเป็นเฟรมเวิร์คของ A่jax
เริ่มกันเลยนะครับ ก่อนอื่นก็ขอให้คัดลอกโค้ดจากไฟล์ต่างๆตามนี้ไปบันทึกไว้ให้ครบครันกันก่อน แล้วมาอธิบายกันหลังจากนี้ครับ (บันทึกไว้ที่เดียวกันนะครับ)
ไฟล์ calendar_4.php
<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');
}
</script>
</head>
<body>
<span id=mk_calendar><script>calendar('');</script></span>
<br />
<span id=sh_time>หน้านี้โหลดเมื่อ : <?echo(date('j F Y') . " @ " . date('G:i:s'));?></span>
</body>
</html>
อธิบายไฟล์ calendar_4.php
ส่วนนี้เป็นส่วนที่เราจะต้องการให้แสดงผลนะครับ ซึ่งก่อนอื่นเราต้องอ้างอิงถึงไฟล์ที่เราต้องการใช้งานร่วมกันก่อนเพื่อไม่ให้มันน้อยใจ .. ไม่ใช่!! เพื่อไม่ให้เกิดความผิดพลาดในการแสดงผลเพราะว่ามันหากันไม่เจอ อิอิ โดยเราต้องอ้างอิงไฟล์ 2 ไฟล์ด้วยกันคือ
ไฟล์ styles.css ที่ใช้สำหรับการควบคุมการแสดงผลของเว็บไซต์
และ ไฟล์ ajax_framework.js ที่ใช้ในสำหรับเป็นเฟรมเวิร์คของ Ajax
<link rel="stylesheet" type="text/css" href="styles.css" /> <script src="ajax_framework.js"></script>
เมื่อกำหนดไฟล์ดังกล่าวแล้วผมก็เริ่มทำการสร้างฟังก์ชั่นในการเรียกใช้ Ajax เพื่อการแสดงผลปฏิทินดังนี้
<script>
function calendar(now){
var data= "now=" + now;
var url = "ajaxCalendar.php";
ajaxLoad('get',url,data,'mk_calendar');
}
</script>
โค้ดดังกล่าวจะเข้าไปดูที่ไฟล์ ajaxCalendar.php และทำการเรียกใช้
ajaxLoad('get',url,data,'mk_calendar');
ซึ่งจะใช้การส่งแบบ get ไปต้องทำการส่ง data ไปด้วยซึ่งเป็นค่า Timestamp จากตัวแปร now ที่มาจากไฟล์ ajaxCalendar.php นั่นเอง
จากนั้นเราก็กำหนดพื้นที่การแสดงผลที่เราต้องการ ตัวอย่างผมทำให้ปฏิทินอยู่ในแท็ก <span> โดยกำหนดให้มี id=mk_calendar
<span id=mk_calendar>...</span>
สำหรับการเรียกฟังก์ชั่นเพื่อการแสดงปฏิทินนั้นเราต้องทำดังนี้
<script>calendar('');</script>
ผมได้เพิ่มโค้ดส่วนหนึ่งเข้ามานั่นคือ
<span id=sh_time>หน้านี้โหลดเมื่อ : <?echo(date('j F Y') . " @ " . date('G:i:s'));?></span>
เป็นส่วนที่ใช้สำหรับแสดงให้เห็นว่าไม่มีการรีเฟรชเกิดขึ้นในขณะที่เราทำการเลื่อนไปยังเดือนต่างๆ ผมจะแสดงตัวอย่างการทำงานให้ดูในหัวข้อต่อไป
ไฟล์ ajaxCalendar.php
<?
$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=\"javascript: calendar($last_month )\">«</a>";
$url_nextMonth = "<a href=\"javascript: calendar($next_month )\">»</a>";
$mk_calendar = "<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";
$mk_calendar .= "<tr align=center class=$class>";
}else if($w == 7){
$class = "saturday";
}else{
$class = "default";
}
if($d < 1){
$mk_calendar .= "<td class=$class> </td>";
}else if($d >= $num_day){
if($d == $num_day){
if($today == $date){
$class = "today";
}
$mk_calendar .= "<td align=center class=$class>$d</td>";
}else{
if($w == 7){
$class = "saturday";
}else{
$class = "default";
}
$mk_calendar .= "<td class=$class> </td>";
}
if($w == 7){
$mk_calendar .= "</tr>";
break;
}
}else{
if($today == $date){
$class = "today";
}
$mk_calendar .= "<td align=center class=$class>$d</td>";
}
if($w == 7){
$mk_calendar .= "</tr>";
$w = 1;
}else{
$w++;
}
}
$mk_calendar .= "</table>";
header("content-type: text/html; charset = UTF-8");
echo $mk_calendar;
?>
อธิบายไฟล์ ajaxCalendar.php
สำหรับไฟล์นี้คือการยกไฟล์ calendar_3.php มาทั้งหมดแล้วตัดส่วนหัวกับส่วนหางทิ้ง เพราะในส่วนนี้เราใช้เพื่อสร้างปฏิทินเท่านั้น ซึ่งโค้ดในส่วนนี้จะถูกประมวลผลผ่านคำสั่ง calendar() ที่ไฟล์ calendar_4.php อีกที สรุปง่ายๆไฟล์นี้ใช้เพิ่อประมวลผลและสร้างปฏิทินตามระบบเดิมนั่นเอง ไม่ต้องมีการแสดงผลแต่อย่างใด
ไฟล์ styles.css
สำหรับไฟล์นี้คือการยกไฟล์ calendar_3.php มาทั้งหมดแล้วตัดส่วนหัวกับส่วนหางทิ้ง เพราะในส่วนนี้เราใช้เพื่อสร้างปฏิทินเท่านั้น ซึ่งโค้ดในส่วนนี้จะถูกประมวลผลผ่านคำสั่ง calendar() ที่ไฟล์ calendar_4.php อีกที สรุปง่ายๆไฟล์นี้ใช้เพิ่อประมวลผลและสร้างปฏิทินตามระบบเดิมนั่นเอง ไม่ต้องมีการแสดงผลแต่อย่างใด
ไฟล์ styles.css
.sunday{color: white;background-color:red;}
.saturday{color: white;background-color:#9900CC;}
.default{color: black;background-color:white;}
.today{color: blue;background-color:yellow;}
อธิบายไฟล์ styles.css
ส่วนนี้ไม่มีอะไรเปลี่ยนแปลงครับมันคือโค้ดที่ใช้ในการกำหนดลักษณะเอกสารอันเดิมของเรา เป็นโค้ด CSS ซึ่งเป็นในส่วนของแท็ก <style>...</style> ตัวเดิมเพียงแต่เรานำมาใส่ในไฟล์ใหม่ แล้วตัดหัว-ท้ายแท็กออกไป
สำหรับการแสดงผลก็เหมือนเดิมครับไม่ได้ปรับแต่งอะไรเพิ่มเติม
ไฟล์ ajax_framework.js
ส่วนนี้ไม่มีอะไรเปลี่ยนแปลงครับมันคือโค้ดที่ใช้ในการกำหนดลักษณะเอกสารอันเดิมของเรา เป็นโค้ด CSS ซึ่งเป็นในส่วนของแท็ก <style>...</style> ตัวเดิมเพียงแต่เรานำมาใส่ในไฟล์ใหม่ แล้วตัดหัว-ท้ายแท็กออกไป
สำหรับการแสดงผลก็เหมือนเดิมครับไม่ได้ปรับแต่งอะไรเพิ่มเติม
ไฟล์ ajax_framework.js
function ajaxLoad(method, URL, data, displayId) {
var AJAX = null;
if(window.ActiveXObject) {
AJAX = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
AJAX = new XMLHttpRequest();
}
else {
alert("Your browser doesn't support AJAX");
return;
}
method = method.toLowerCase();
URL += "?temp=" + (new Date()).getTime();
if(method=="get") {
URL += "&" + data;
data = null;
}
AJAX.open(method, URL);
if(method=="post") {
AJAX.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
AJAX.onreadystatechange = function() {
if(AJAX.readyState==4 && AJAX.status==200) {
var ctype = AJAX.getResponseHeader("Content-Type").toLowerCase();
ajaxCallback(ctype, displayId, AJAX.responseText);
delete AJAX;
AJAX = null;
}
}
AJAX.send(data);
}
function ajaxCallback(contentType, displayId, responseText) {
if(contentType.match("text/javascript")) {
eval(responseText);
}
else {
if(displayId==null) {
return;
}
var el = document.getElementById(displayId);
el.innerHTML = responseText;
}
}
function getFormData(form_name_or_id) {
var frm = document.forms[form_name_or_id];
if(frm==null) {
alert("Form: '" + form_name_or_id + "' not found!");
return;
}
var data = "";
var num_el = frm.elements.length;
for(i=0; i<num_el; i++) {
var el = frm.elements[i];
if(el.name=="" && el.id=="") {
continue;
}
var param_name = "";
if(el.name!="") {
param_name = el.name;
}
else if(el.id!="") {
param_name = el.id;
}
var t = frm.elements[i].type;
var value = "";
if(t=="text"||t=="password"||t=="hidden"||t=="textarea") {
value = encodeURIComponent(el.value);
}
else if(t=="radio"||t=="checkbox") {
if(el.checked) {
value = encodeURIComponent(el.value);
}
else {
continue;
}
}
else if(t=="select-one") {
value = encodeURIComponent(el.options[el.selectedIndex].value);
}
else if(t=="select-multiple") {
for(j=0; j<el.length; j++) {
if(el.options[j].selected) {
if(data!="") {
data += "&";
}
data += param_name + "=";
data += encodeURIComponent(el.options[j].value);
}
}
continue;
}
if(data!="") {
data += "&";
}
data += param_name + "=" + value;
}
return data;
}
อธิบายไฟล์ ajax_framework.js
ไฟล์ส่วนนี้เป็นเฟรมเวิร์คสำหรับการทำงานของ Ajax ซึ่งผมนำมาจากหนังสือ พัฒนาเว็บด้วยเทคนิค Ajax และ PHP ของคุณ บัญชา ปะสีละเตสัง โดยนำมาประยุกต์ต่อ ดังนั้นมันจะมีโค้ดบางส่วนที่ไม่จำเป็นต่องานนี้อยู่ด้วย แต่ผมก็เอาติดไว้ก่อนเพราะต่อไปจะมีประโยชน์อย่างยิ่งในบทความต่อๆไป (ใช้ไฟล์นี้เป็นพื้นฐานได้เลย) ผมขออธิบายส่วนที่ต้องใช้ในที่นี้เท่านั้นนะครับ
การใช้งาน Ajax นั้นก่อนอื่นเราต้องทำการเรียกการใช้งานเมธอดที่ทำให้แสดงผลข้อมูลต่างๆได้นั่นคือ
โดยที่
method คือ ส่วนในการส่งข้อมูลว่าเราจะส่งไปแบบใดจะแบบ get หรือ post
URL คือ ตำแหน่งของไฟล์ที่เราต้องการส่งข้อมูล
data คือ ข้อมูลที่เราต้องการส่งไปทำงาน
displayId คือ ตำแหน่งที่เราต้องการให้แสดงผล
โดยเริ่มแรกเราต้องตรวจสอบว่าเว็บเบาร์เซอร์ของเรานั้นมันรองรับการทำงานของ Ajax หรือไม่ซึ่งมีข้อแตกต่างกันระหว่างแต่ละเว็บเบาร์เซอร์ที่ต้องตรวจสอบด้วย
การใช้งาน Ajax นั้นก่อนอื่นเราต้องทำการเรียกการใช้งานเมธอดที่ทำให้แสดงผลข้อมูลต่างๆได้นั่นคือ
function ajaxLoad(method, URL, data, displayId) {...
โดยที่
method คือ ส่วนในการส่งข้อมูลว่าเราจะส่งไปแบบใดจะแบบ get หรือ post
URL คือ ตำแหน่งของไฟล์ที่เราต้องการส่งข้อมูล
data คือ ข้อมูลที่เราต้องการส่งไปทำงาน
displayId คือ ตำแหน่งที่เราต้องการให้แสดงผล
โดยเริ่มแรกเราต้องตรวจสอบว่าเว็บเบาร์เซอร์ของเรานั้นมันรองรับการทำงานของ Ajax หรือไม่ซึ่งมีข้อแตกต่างกันระหว่างแต่ละเว็บเบาร์เซอร์ที่ต้องตรวจสอบด้วย
var AJAX = null;
if(window.ActiveXObject) {
AJAX = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
AJAX = new XMLHttpRequest();
}
else {
alert("Your browser doesn't support AJAX");
return;
}
เมื่อเราได้ทำการกำหนดค่าตามที่ต้องการแล้วเราก็ดำเนินการต่อในส่วนของการส่งข้อมูล ซึ่งจะทำตามที่เรากำหนดว่าเราส่งเป็นแบบใด
method = method.toLowerCase();
URL += "?temp=" + (new Date()).getTime();
if(method=="get") {
URL += "&" + data;
data = null;
}
AJAX.open(method, URL);
if(method=="post") {
AJAX.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
เมื่อสถานะของเซิร์ฟเวอร์ว่างระบบจะทำการคืนค่าการแสดงผลต่อและจะทำการล้างขั้นตอนการทำงานเดิมทิ้งทั้งหมดเพื่อรับการทำงานใหม่ต่อไป
จากนั้นเราก็ทำการคืนค่าข้อมูลเพื่อทำการแสดงผล
ตัวอย่างการทำงาน
จะสังเกตได้นะครับว่าทั้งสามภาพแรกนั้น เมื่อเราคลิกเลื่อนไปตามเดือนต่างๆ เวลาที่แสดงด้านล่างนั้นไม่มีการเปลี่ยนแปลงเลย และยังคงทำงานอยู่ที่ไฟล์เดิมไม่มีการแสดงค่าจากการส่งด้วยเมธอด get ให้เห็น อันเป็นผลสืบเนื่องมาจากการใช้เทคนิค Ajax ของเรานั่นเอง
ครับสำหรับบทความนี้ก็จบลงด้วยการใช้เทคนิค Ajax มาทำให้การเลื่อนเปลี่ยนเดือนต่างๆได้เนียนตาขึ้นไม่ต้องมีการรีเฟรชหน้าจอให้เกิดความรำคาญแต่อย่างใด แต่มันยังไม่สมบูรณ์ครับ เพราะมันยังไม่สามารถตอบสนองความต้องการของเราได้ดีพอ เช่น หากผมต้องการไปดูวันที่ 26 เดือน พฤศจิกายน ปี พ.ศ. 2531 ผมต้องเลื่อนไปกี่วันกว่าจะถึงเนี่ย ... โห นั่นแหละครับ ในส่วนของบทความต่อไปเราก็จะมาทำการเพิ่มส่วนของการเรียกดูปฏิทินให้เกิดความสะดวกยิ่งขึ้น และเช่นเดิมยังคงใช้เทคนิค Ajax เพิ่อให้เกิดความศิวิไลซ์ต่อไป ฮ่าๆๆ โปรดติดตามได้ในบทความต่อไป
PHP : มาสร้างปฏิทินกันเถอะ(ตอนที่ 5)
AJAX.onreadystatechange = function() {
if(AJAX.readyState==4 && AJAX.status==200) {
var ctype = AJAX.getResponseHeader("Content-Type").toLowerCase();
ajaxCallback(ctype, displayId, AJAX.responseText);
delete AJAX;
AJAX = null;
}
}
AJAX.send(data);
จากนั้นเราก็ทำการคืนค่าข้อมูลเพื่อทำการแสดงผล
function ajaxCallback(contentType, displayId, responseText) {
if(contentType.match("text/javascript")) {
eval(responseText);
}
else {
if(displayId==null) {
return;
}
var el = document.getElementById(displayId);
el.innerHTML = responseText;
}
}
ตัวอย่างการทำงาน
จะสังเกตได้นะครับว่าทั้งสามภาพแรกนั้น เมื่อเราคลิกเลื่อนไปตามเดือนต่างๆ เวลาที่แสดงด้านล่างนั้นไม่มีการเปลี่ยนแปลงเลย และยังคงทำงานอยู่ที่ไฟล์เดิมไม่มีการแสดงค่าจากการส่งด้วยเมธอด get ให้เห็น อันเป็นผลสืบเนื่องมาจากการใช้เทคนิค Ajax ของเรานั่นเอง
สำหรับภาพนี้แสดงว่าเราได้ส่งคำสั่งอะไรไปเมื่อเราคลิกปุ่มเลื่อนเดือน นั่นคือเราได้เรียกใช้ ฟังก์ชั่น calendar() โดยมีการส่งค่า Timestamp ไปด้วยนั่นเอง
ครับสำหรับบทความนี้ก็จบลงด้วยการใช้เทคนิค Ajax มาทำให้การเลื่อนเปลี่ยนเดือนต่างๆได้เนียนตาขึ้นไม่ต้องมีการรีเฟรชหน้าจอให้เกิดความรำคาญแต่อย่างใด แต่มันยังไม่สมบูรณ์ครับ เพราะมันยังไม่สามารถตอบสนองความต้องการของเราได้ดีพอ เช่น หากผมต้องการไปดูวันที่ 26 เดือน พฤศจิกายน ปี พ.ศ. 2531 ผมต้องเลื่อนไปกี่วันกว่าจะถึงเนี่ย ... โห นั่นแหละครับ ในส่วนของบทความต่อไปเราก็จะมาทำการเพิ่มส่วนของการเรียกดูปฏิทินให้เกิดความสะดวกยิ่งขึ้น และเช่นเดิมยังคงใช้เทคนิค Ajax เพิ่อให้เกิดความศิวิไลซ์ต่อไป ฮ่าๆๆ โปรดติดตามได้ในบทความต่อไป
PHP : มาสร้างปฏิทินกันเถอะ(ตอนที่ 5)
ที่มา : ขอขอบคุณไฟล์ ajax_framework.js จาก
บัญชา ปะสีละเตสัง,พัฒนาเว็บด้วยเทคนิค Ajax และ PHP,ซีเอ็ด:กรุงเทพฯ.541หน้า
No comments:
Post a Comment