วันอาทิตย์ที่ 26 กุมภาพันธ์ พ.ศ. 2555

สอนทำปฏิทิน (Calendar) ด้วย PHP + jQuery (AJAX)

       กลับมาคราวนี้จะสอนทำปฎิทินบ้างครับ จะเป็นปฏิทินที่เขียนด้วย PHP โดยเราจะใช้ AJAX API ของ jQuery เพื่อ request เดือน/ปีของปฏิทินตามต้องการมาแสดงครับ
      สาเหตุที่ผมสอนทำปฏิทินด้วยภาษาDynamicแบบPHP เพราะว่า มันสามารถประยุกต์ใช้ร่วมกับฐานข้อมูล(Database) หรืออื่นๆได้ครับ อย่างเช่นเว็บนี้-> www.goragod.com ดังนั้นมันจึงมีความยืดหยุ่นมากกว่าปฏิทินที่สร้างด้วยJavascriptครับ
       ให้สร้างไฟล์ขึ้นมา 2 ไฟล์ คือ calendarshow.html,calendar.php
ไฟล์ calendarshow.html ->เป็นไฟล์htmlธรรมดาครับ โดยเราจะเขียน CSS และ jQuery (AJAX) ในไฟล์นี้ครับ โดยเราได้กำหนดพื้นที่สำหรับแสดงผลปฏิทินใน tag div ที่มี id ชื่อ calendar_show ให้พิมพ์คำสั่งดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>แสดงปฏิทินแบบAJAX</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$_CalendarShow=function(url,area){
 $.ajax({
  url:url,
  type:'GET',
  success:function(data){
   $('#'+area).html(data);
  }
 });
}
$(document).ready(function(){
 $_CalendarShow('calendar.php','calendar_show');//$_CalendarShow(ไฟล์ที่ร้องขอ,พื้นที่แสดงผล);
 $('#go_calendar').live('click',function(){
  $_CalendarShow($(this).attr('href'),'calendar_show');
  return false;//ให้ลิงค์หยุดการRedirect
 }); 
});
</script>
<style type="text/css">
    #calendar{
        font-family: Tahoma;
        font-size:12px;
        color:#666;
        border-collapse: collapse;     
        text-align: center;
        background-color:#F0F0F0;
    }
    #calendar td{
       padding:5px;
    }
    #calendar a{
        text-decoration: none;
        color:#ccc;
    }
    #calendar a:hover{
        text-decoration:underline;
        color:#fff;
    }
    #tr_month_title,#ft_calendar{
        background-color:#666;
        color:#ccc;
    }
    #tr_day_name{
        background-color:#555;
        color:#fff;
    }   
    .day_calendar{
        background-color:#ccc;
    }
    .holiday_calendar{
        background-color:#FC9;
    }
    .today_calendar{
        background-color:#FFCC00;
        border:1px solid #FF9933;
    }
</style>
</head>
<body>
<div id="calendar_show"><!--แสดงปฏิทินตรงนี้ --></div>
</body>
</html>

คำสั่งที่น่าสนใจในไฟล์นี้คือ
- $_CalendarShow('calendar.php','calendar_show'); เป็นfunctionแสดงผลปฏิทิน โดยการทำงานภายในฟังก์ชั่นนี้จะเป็นแบบ AJAX โดยจะร้องขอไฟล์ calendar.php มาแสดงใน calendar_show ซึ่งเป็นชื่อ id ของ Tag Div ครับ
- $('#go_calendar').live ('click',function(){
    $_CalendarShow($(this).attr('href'),'calendar_show');
    return false;//ให้linkหยุดการredirect
});   
เป็นคำสั่งที่ตรวจจับเหตุการณ์ (Event) จากการคลิก Click ที่เครื่องหมาย << ,>> ,เดือนปัจจุบัน เพื่อส่งค่าURL ($(this).attr(‘href’)) ไปร้องขอไฟล์ปฏิทิน(calendar.php)มาแสดงครับ

ไฟล์ calendar.php ->เป็นไฟล์รับการร้องขอ request จากไฟล์ calendarshow.html แล้วResponseค่าข้อมูลปฏิทินในเดือน/ปีที่ร้องขอ ไปแสดงที่ไฟล์ calendarshow.html
<?php
$dayname=array(0=>'อา.',1=>'จ.',2=>'อ.',3=>'พ.',4=>'พฤ.',5=>'ศ.',6=>'ส.');
$month_name=array(1=>'มกราคม',2=>'กุมภาพันธุ์',3=>'มีนาคม',4=>'เมษายน',5=>'พฤษภาคม',6=>'มิถุนายน',7=>'กรกฎาคม',8=>'สิงหาคม',9=>'กันยายน',10=>'ตุลาคม',11=>'พฤศจิกายน',12=>'ธันวาคม');
$m_y=$_GET['m_y']==''?date('Y-n'):$_GET['m_y'];
$sp_m_y=explode('-',$m_y);//แยกค่าเดือน/ปี ออกจากกันโดยใช้ แบ่งตามเครื่องหมาย "-" จะได้ $sp_m_y[0]=ปี,$sp_m_y[1]=เดือน
$nextMonth=date('Y-n', mktime(0,0,0,($sp_m_y[1]+1),1,$sp_m_y[0]));//หาเดือน/ปีก่อนหน้า
$prevMonth=date('Y-n',mktime(0,0,0,($sp_m_y[1]-1),1,$sp_m_y[0]));//หากเดือน/ปีถัดไป
$fistday=date('w',strtotime( $m_y.'-1' ));//หาวันแรกแรกของเดือนตรงกับวันอะไร(0-6)
$numsday=date('t',strtotime($m_y));//หาจำนวนวันในเดือนใดๆ
$tday1=$fistday+$numsday;//วันที่เหลือ+กับจำนวนวันทั้งหมดของเดือนปีใดๆ
$tday2=ceil($tday1/7)*7;//หาช่องแสดงวันที่ทั้งหมดของปฏิทินในเดือนปีใดๆ
echo '<table id="calendar">';
echo '<colgroup>
<col class="holiday_calendar" />
<col span="5" />
<col class="holiday_calendar" />
</colgroup>';
echo '<tr><td colspan="7" id="tr_month_title">';
echo '<a href="calendar.php?m_y='.$prevMonth.'" title="เดือนก่อนหน้า" id="go_calendar">&laquo;</a> ';
echo $month_name[$sp_m_y[1]*1];
echo ' ปี '.($sp_m_y[0]+543);
echo ' <a href="calendar.php?m_y='.$nextMonth.'" title="เดือนถัดไป" id="go_calendar">&raquo;</a></td></tr>';
echo '<tr id="tr_day_name">';
foreach($dayname as $val){
    echo '<td>'.$val.'</td>';
}
echo '</tr>';
for($i=1;$i <=$tday2;$i++){
    if($i%7==1){echo '<tr>';}
    $dayreal=($i-$fistday>=1&&$i-$fistday<=$numsday)?$i-$fistday:'';
    $today=date('Y-n-j')==$m_y.'-'.($i-$fistday)?'class="today_calendar"':'';
    echo '<td '.$today.'>';
    echo $dayreal;
    echo '</td>';
    if($i%7==0){
        echo '</tr>';
    }
}
echo '<tr><td colspan="7" id="ft_calendar"><a href="calendar.php?m_y='.date('Y-n').'" id="go_calendar">เดือนปัจจุบัน</a></td></tr>';
echo '</table>';
?>
ไฟล์นี้ไม่ต้องอธิบายนะครับ เพราะได้Comment เฉพาะคำสั่งที่สำคัญเอาไว้แล้วครับ เจอกันในบทความหน้าครับ แต่ก็ยังไม่รู้ว่าจะสอนอะไรดี - - ''
DEMO->http://pluto.host22.com/calendar/calendarshow.html

9 ความคิดเห็น :

  1. เยี่ยมเลยกำลังต้องการพอดี^^ขอบคุณครับ

    ตอบลบ
    คำตอบ
    1. ไฟล์ calendar.php ผมได้เปลี่ยนคำสั่งนิดหน่อยนะครับ จาก date('Y-n-d') เปลี่ยนเป็น date('Y-n-j') (บรรทัดที่ 31)

      ลบ
  2. ไม่ระบุชื่อ12 มิถุนายน 2555 01:09

    พอดีว่าเวลารันไฟล์ calendarshow.html แล้วไม่มีปฏิทินขึ้นมาน่ะครับ แต่ถ้ารันไฟล์ calendar.php แล้วจะมีปฏิทินขึ้นมาตามปกติครับ แค่ไม่มีสี ไม่มีเลือกวันที่ปัจจุบันครับ

    ตอบลบ
  3. ไม่ระบุชื่อ12 มิถุนายน 2555 01:46

    อ่า ตอนนี้ขึ้นแล้วครับ เป็นที่ path ของ jquery ครับ ผมรู้มาจากบทความของคุณนี่แหละ ยังไงก็ขอบคุณมากครับ ที่แบ่งปันสิ่งดีดี ^^

    ตอบลบ
  4. ไม่ระบุชื่อ4 สิงหาคม 2555 02:38

    ผมเจอปัญหาแบบเดียวกันครับ มันต้องแก้ยังไงอ่ะครับตัว path ของ JQuery เนี่ย ?

    ตอบลบ
    คำตอบ
    1. ถ้าระบุพาธไม่เป็น วิธีแก้คือ

      เอาคำสั่ง <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

      ไปแทนที่ คำสั่ง

      <script type="text/javascript" src="js/jquery.js"></script>

      ในไฟล์ calandarshow.html ครับ แต่ต้องต่อเนตด้วยนะครับ

      ลบ
  5. ไม่ระบุชื่อ10 พฤษภาคม 2557 21:38

    Notice: Undefined index: m_y ตัวแปรนีใช้ทำไรอ่าครับ

    ตอบลบ
    คำตอบ
    1. ไม่ระบุชื่อ10 พฤษภาคม 2557 21:58

      เหมือนมันหาอินเด็กm_yไม่เจออ่าครับ พอผมคลิกเปลี่ยนเดือน มันก็จะเปลี่ยนเพจไปลิ้งที่calendar.php

      ลบ
    2. ลองเปลี่ยนคำสั่งใหม่ครับ ปัญหาน่าจะมาจากเวอร์ชั่นของ PHP ครับ
      จาก
      $m_y=$_GET['m_y']==''?date('Y-n'):$_GET['m_y'];
      เป็น
      $m_y='';
      if(empty($_GET['m_y'])){
      $m_y=date('Y-n');
      }else{
      $m_y=$_GET['m_y'];
      }

      ลบ