MondAro23 : ajax

Showing posts with label ajax. Show all posts

Wednesday, September 5, 2012

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 5)

บทความวันนี้เรามาทำกันต่อจากเดิมนะครับ โดยครั้งก่อนเราสามารถเลื่อนเปลี่ยนเดือนได้โดยการคลิกที่ ลิงค์ด้านข้างเพื่อเปลี่ยนเดือนไปมา ในบทความนี้ครับ

PHP : มาสร้างปฎิทินกันเถอะ (ตอนที่ 4)

โดยในบทความที่แล้วเราใช้ความสามาถของ Ajax ในการเลื่อนเปลี่ยนไปเดือนต่างๆ โดยที่ไม่มีการรีเฟรชหน้าจอ ทำให้ในการใช้งานจริงเราสามารถที่จะควบคุมการแสดงผลแบบต่อเนื่องได้ เราสามารถที่จะนำไปประยุกต์ต่อได้อีกมากมายเลยครับ เช่น ปฏิทินบันทึกและแสดงเหตุการณ์ต่างๆ ปฏิทินข่าว ปฏิทินนัดหมาย ฯลฯ แต่ว่าในบทความที่แล้วนั้นปฏิทินเรายังไม่สมบรูณ์เพราะว่าจะสังเกตได้ว่าหากเราต้องการเลื่อนเปลี่ยนไปดูในเดือนต่างๆใน พ.ศ.อื่นๆ จะลำบากมากเพราะเราต้องคลิกต่อๆไปเรื่อยๆ วันนี้เราจึงมีทางแก้ไขครับโดยการ ทำให้มันเลือกได้ ซะเลยทั้งเดือน ทั้ง พ.ศ. เป็นอย่างไรเรามาลองทำกันดูครับ

การทำงานในบทความนี้เรายังคงอิงจากไฟล์เดิมในบทความที่แล้วนะครับ แต่จะมีการปรับแก้ไขในบางส่วน ผมจะแสดงเฉพาะไฟล์ที่แก้ไขใหม่นะครับ คือไฟล์ calendar_4.php ผมจะบันทึกในชื่อ calendar_5.php ส่วนไฟล์ ajaxCalendar.php, ajax_framework.js, styles.css นั้นไม่มีการแก้ไขอะไรเลยนะครับใช้ของเดิมได้เลย เรามาลองทำกันเลยครับ คัดลอกโค้ดนี้ไปแล้วเดี๋ยวเรามาอธิบายกันต่อไป

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 4)

บทความสุดท้ายแล้วนะครับในเรื่องการทำปฏิทิน โดยก่อนหน้านี้เราได้ทำปฏิทินที่สามารถเลื่อนเปลี่ยนเดือนได้มาแล้ว ในบทความเรื่อง

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 3)

ซึ่งเราจะพบว่าหากเรานำไปใช้กับเนื้อหาภายในเว็บไซต์หนึ่งๆนั้นเมื่อเราคลิกเพื่อเลื่อนไปดูเดือนอื่นๆ เราจะพบว่าหน้าเว็บไซต์เราจะต้องถูก รีเฟรช ไปด้วยซึ่งมันอาจจะทำให้เราไม่สะดวกในทุกๆครั้งที่เลื่อนไปดูเดือนต่างๆ (ซึ่งหากเราจะคลิกไปดูเดือนต่างๆ มันก็ไม่สะดวกอยู่แล้ว เดี๋ยวบทความต่อไปเราจะมาเลือกดูเดือนต่างๆแบบง่ายๆกัน)

ดังนั้นวิธีที่ดีที่สุดคือการทำให้มันไม่ต้องรีเฟรชหน้าใหม่ในทุกๆครั้งที่เลื่อนไปเดือนต่างๆ แล้วเราจะทำอย่างไร วิธีนี้เราสามารถใช้ความสามารถของ 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>

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 3)

สวัสดีครับวันนี้เรามาทำปฏิทินต่อจากบทความที่ผ่านมา ซึ่งบทความตอนที่แล้วนั้นเราได้ใส่สีสันให้กับปฏิทินเราด้วยเทคนิค CSS จนมีหน้าตาสวยงามไปแล้วนะครับ ดูได้จาบทความนี้นะครับ

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 2)

สำหรับวันนี้เราก็จะมาทำการเพิ่มเติมรูปแบบปฏิทินของเราให้มีฟังก์ชั่นที่น่าใช้งานมากยิ่งขึ้นอีก นั่นคือการเพิ่มการเลื่อนแสดงปฏิทินไปเดือนที่ผ่านมา / เดือนก่อนหน้านะครับ

หลักการทำงานของเราก็ง่ายๆเพียงเราเพิ่มลิงค์ที่ใช้สำหรับการเลื่อนดูปฏิทินที่ส่วนหัวของตาราง แล้วก็เก็บค่า Timestamp ของเดือนนั้นๆไว้มาทำงานต่อในส่วนของการสร้างปฏิทินนะครับ เรามาลุยกันเลย

เริ่มต้นก็ขอให้คัดลอกโค้ดนี้ไปก่อนนะครับ แล้วเรามาอธิบายโค้ดคำสั่งต่างๆกัน

ไฟล์ 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 . "\">&laquo;</a>";
$url_nextMonth = "<a href=\"" . $url_togo . $next_month . "\">&raquo;</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>&nbsp;</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>&nbsp;</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'];
}

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 2)

ในบทความนี่เรามาปรับปรุงปฏิทินต่อจากบทความที่แล้วกันนะครับ ซึ่งการปรับแต่ปฏิทินในครั้งนี้เราจะใช้ เทคนิคการจัดรูปแบบเอกสารตามมาตรฐานของ WWW แบบใหม่นั่นก็คือ CSS หรือเรียกชื่อเต็มๆว่า Cascading Style Sheets โดยในส่วนของรายละเอียดในการจัดรูปแบบต่างๆนั้นขอแนะนำให้ไปศึกษาเพิ่มเติมเองนะครับ
ทำไมถึงต้องเป็น CSS นั่นก็เพราะรูปแบบ CSS นั้นถูกนำมาใช้เพื่อเสริมการทำงานของ HTML ให้มีประสิทธิภาพมากยิ่งขึ้น โดยเน้นไปที่การจัดรูปแบบและโครงร่างของเอกสารเป็นหลัก ทำให้เราสามารถที่จะกำหนดรูปแบบเอกสารให้หลากหลายมากยิ่งขึ้น แก้ไขง่าย จัดการง่าย ควบคุมง่าย ตามสไตล์ของ CSS นั่นเอง
สำหรับการจัดรูปแบบปฏิทินในวันนี้เราจะมาตกแต่งใส่สีสันลงไปเพื่อเพิ่มความสวยงาม โดยมีส่วนที่ต้องตกแต่งอยู่ 5 ส่วนด้วยกัน คือ

ส่วนหัวปฏิทิน
ส่วนหัวสัปดาห์
ส่วนที่แสดงเป็นวันอาทิตย์
ส่วนที่แสดงเป็นวันเสาร์
ส่วนแสดงวันที่ปัจจุบัน

เนื่องจากเราต้องจัดการกำหนดรูปแบบที่หลากหลายเช่นนี้ CSS จึงเหมาะกับการทำงานดังกล่าว เรามาลองเริ่มจัดรูปแบบปฏิทินกันเลยครับ

MondAro23

Wednesday, September 5, 2012

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 5)

Friday, August 31, 2012

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 4)

Wednesday, August 29, 2012

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 3)

Wednesday, August 22, 2012

PHP : มาสร้างปฏิทินกันเถอะ (ตอนที่ 2)