บทความวันนี้เรามาทำกันต่อจากเดิมนะครับ โดยครั้งก่อนเราสามารถเลื่อนเปลี่ยนเดือนได้โดยการคลิกที่ ลิงค์ด้านข้างเพื่อเปลี่ยนเดือนไปมา ในบทความนี้ครับ
โดยในบทความที่แล้วเราใช้ความสามาถของ Ajax ในการเลื่อนเปลี่ยนไปเดือนต่างๆ โดยที่ไม่มีการรีเฟรชหน้าจอ ทำให้ในการใช้งานจริงเราสามารถที่จะควบคุมการแสดงผลแบบต่อเนื่องได้ เราสามารถที่จะนำไปประยุกต์ต่อได้อีกมากมายเลยครับ เช่น ปฏิทินบันทึกและแสดงเหตุการณ์ต่างๆ ปฏิทินข่าว ปฏิทินนัดหมาย ฯลฯ แต่ว่าในบทความที่แล้วนั้นปฏิทินเรายังไม่สมบรูณ์เพราะว่าจะสังเกตได้ว่าหากเราต้องการเลื่อนเปลี่ยนไปดูในเดือนต่างๆใน พ.ศ.อื่นๆ จะลำบากมากเพราะเราต้องคลิกต่อๆไปเรื่อยๆ วันนี้เราจึงมีทางแก้ไขครับโดยการ ทำให้มันเลือกได้ ซะเลยทั้งเดือน ทั้ง พ.ศ. เป็นอย่างไรเรามาลองทำกันดูครับ
การทำงานในบทความนี้เรายังคงอิงจากไฟล์เดิมในบทความที่แล้วนะครับ แต่จะมีการปรับแก้ไขในบางส่วน ผมจะแสดงเฉพาะไฟล์ที่แก้ไขใหม่นะครับ คือไฟล์ calendar_4.php ผมจะบันทึกในชื่อ calendar_5.php ส่วนไฟล์ ajaxCalendar.php, ajax_framework.js, styles.css นั้นไม่มีการแก้ไขอะไรเลยนะครับใช้ของเดิมได้เลย เรามาลองทำกันเลยครับ คัดลอกโค้ดนี้ไปแล้วเดี๋ยวเรามาอธิบายกันต่อไป
Showing posts with label วัน. Show all posts
Showing posts with label วัน. Show all posts
Wednesday, September 5, 2012
Friday, August 31, 2012
PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 4)
บทความสุดท้ายแล้วนะครับในเรื่องการทำปฏิทิน โดยก่อนหน้านี้เราได้ทำปฏิทินที่สามารถเลื่อนเปลี่ยนเดือนได้มาแล้ว ในบทความเรื่อง
ซึ่งเราจะพบว่าหากเรานำไปใช้กับเนื้อหาภายในเว็บไซต์หนึ่งๆนั้นเมื่อเราคลิกเพื่อเลื่อนไปดูเดือนอื่นๆ เราจะพบว่าหน้าเว็บไซต์เราจะต้องถูก รีเฟรช ไปด้วยซึ่งมันอาจจะทำให้เราไม่สะดวกในทุกๆครั้งที่เลื่อนไปดูเดือนต่างๆ (ซึ่งหากเราจะคลิกไปดูเดือนต่างๆ มันก็ไม่สะดวกอยู่แล้ว เดี๋ยวบทความต่อไปเราจะมาเลือกดูเดือนต่างๆแบบง่ายๆกัน)
ดังนั้นวิธีที่ดีที่สุดคือการทำให้มันไม่ต้องรีเฟรชหน้าใหม่ในทุกๆครั้งที่เลื่อนไปเดือนต่างๆ แล้วเราจะทำอย่างไร วิธีนี้เราสามารถใช้ความสามารถของ 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>
Wednesday, August 29, 2012
PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 3)
สวัสดีครับวันนี้เรามาทำปฏิทินต่อจากบทความที่ผ่านมา ซึ่งบทความตอนที่แล้วนั้นเราได้ใส่สีสันให้กับปฏิทินเราด้วยเทคนิค 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'];
}
Wednesday, August 22, 2012
PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 2)
ในบทความนี่เรามาปรับปรุงปฏิทินต่อจากบทความที่แล้วกันนะครับ ซึ่งการปรับแต่ปฏิทินในครั้งนี้เราจะใช้ เทคนิคการจัดรูปแบบเอกสารตามมาตรฐานของ WWW แบบใหม่นั่นก็คือ CSS หรือเรียกชื่อเต็มๆว่า Cascading Style Sheets โดยในส่วนของรายละเอียดในการจัดรูปแบบต่างๆนั้นขอแนะนำให้ไปศึกษาเพิ่มเติมเองนะครับ
ทำไมถึงต้องเป็น CSS นั่นก็เพราะรูปแบบ CSS นั้นถูกนำมาใช้เพื่อเสริมการทำงานของ HTML ให้มีประสิทธิภาพมากยิ่งขึ้น โดยเน้นไปที่การจัดรูปแบบและโครงร่างของเอกสารเป็นหลัก ทำให้เราสามารถที่จะกำหนดรูปแบบเอกสารให้หลากหลายมากยิ่งขึ้น แก้ไขง่าย จัดการง่าย ควบคุมง่าย ตามสไตล์ของ CSS นั่นเอง
สำหรับการจัดรูปแบบปฏิทินในวันนี้เราจะมาตกแต่งใส่สีสันลงไปเพื่อเพิ่มความสวยงาม โดยมีส่วนที่ต้องตกแต่งอยู่ 5 ส่วนด้วยกัน คือ
ทำไมถึงต้องเป็น CSS นั่นก็เพราะรูปแบบ CSS นั้นถูกนำมาใช้เพื่อเสริมการทำงานของ HTML ให้มีประสิทธิภาพมากยิ่งขึ้น โดยเน้นไปที่การจัดรูปแบบและโครงร่างของเอกสารเป็นหลัก ทำให้เราสามารถที่จะกำหนดรูปแบบเอกสารให้หลากหลายมากยิ่งขึ้น แก้ไขง่าย จัดการง่าย ควบคุมง่าย ตามสไตล์ของ CSS นั่นเอง
สำหรับการจัดรูปแบบปฏิทินในวันนี้เราจะมาตกแต่งใส่สีสันลงไปเพื่อเพิ่มความสวยงาม โดยมีส่วนที่ต้องตกแต่งอยู่ 5 ส่วนด้วยกัน คือ
- ส่วนหัวปฏิทิน
- ส่วนหัวสัปดาห์
- ส่วนที่แสดงเป็นวันอาทิตย์
- ส่วนที่แสดงเป็นวันเสาร์
- ส่วนแสดงวันที่ปัจจุบัน
เนื่องจากเราต้องจัดการกำหนดรูปแบบที่หลากหลายเช่นนี้ CSS จึงเหมาะกับการทำงานดังกล่าว เรามาลองเริ่มจัดรูปแบบปฏิทินกันเลยครับ
Saturday, August 18, 2012
PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 1)
หลายคนคงเคยเห็นปฏิทินที่แสดงบนหน้าเว็บไซต์ต่างๆมาแล้ว อาจเกิดความสงสัยกันนะครับว่าปฏิทินที่เราเห็นกันนั้นมันทำได้อย่างไรกันนะ ผมก็อดสงสัยไม่ได้เช่นกันก็เลยนำความสงสัยนั้นมาลองทำเล่นๆดูจนได้เป็นบทความนี้นั่นเอง ฮ่าๆๆ สำหรับบทความนี้จะมีเนื้อหาต่อจากบทความที่แล้วนะครับ ในเนื้อหาเรื่อง
ซึ่งลองเข้าไปอ่านดูกันก่อนนะครับจะได้มีพื้นฐานเบื้องต้นก่อน
เริ่มกันเลยนะครับ
ซึ่งลองเข้าไปอ่านดูกันก่อนนะครับจะได้มีพื้นฐานเบื้องต้นก่อน
เริ่มกันเลยนะครับ
Subscribe to:
Posts (Atom)





