บทความสุดท้ายแล้วนะครับในเรื่องการทำปฏิทิน โดยก่อนหน้านี้เราได้ทำปฏิทินที่สามารถเลื่อนเปลี่ยนเดือนได้มาแล้ว ในบทความเรื่อง
ซึ่งเราจะพบว่าหากเรานำไปใช้กับเนื้อหาภายในเว็บไซต์หนึ่งๆนั้นเมื่อเราคลิกเพื่อเลื่อนไปดูเดือนอื่นๆ เราจะพบว่าหน้าเว็บไซต์เราจะต้องถูก รีเฟรช ไปด้วยซึ่งมันอาจจะทำให้เราไม่สะดวกในทุกๆครั้งที่เลื่อนไปดูเดือนต่างๆ (ซึ่งหากเราจะคลิกไปดูเดือนต่างๆ มันก็ไม่สะดวกอยู่แล้ว เดี๋ยวบทความต่อไปเราจะมาเลือกดูเดือนต่างๆแบบง่ายๆกัน)
ดังนั้นวิธีที่ดีที่สุดคือการทำให้มันไม่ต้องรีเฟรชหน้าใหม่ในทุกๆครั้งที่เลื่อนไปเดือนต่างๆ แล้วเราจะทำอย่างไร วิธีนี้เราสามารถใช้ความสามารถของ 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>
