tutorialswb

TutorialsWB hadir sebagai wadah bagi teman-teman yang ingin "Belajar PHP Dasar". Sehingga kami yakin bahwa TutorialsWB akan menjadi Pusat "Belajar Bahasa Pemrograman PHP" Disamping PHP website ini menyediakan berbagai tips dan trik Blogger. Kami menerima Pemasangan iklan banner atau artikel.

Hubungi Saya

Membuat Kalender Event Menggunakan Jquery dan Ajax



Selamat sore, bagaimana kabar anda, apakah anda sudah mempunyai rencana dimana anda akan merayakan tahun baru? Jika kalian belum maka itu sama dengan kami.

kalender event menggunakan jquery dan ajax


Langsung saja kedalama pembahasan kali ini kami akan share bagaimana membuat calender kalender event menggunakan Jqueru dan Ajax, dan untuk memperbagus interface tak lupa kami juga menggunakan Bootstrap.

Yang pertama buat database terlebih dahulu dengan nama calender, kemudian masukkan struktur database dibawah ini.
 
CREATE TABLE `events` (
 `id` int(11) NOT NULL,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `date` date NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Block'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; 

Kedua buat file dengan nama dbConfig.php file ini sebagai koneksi kedalam database.
 <?php
$dbhost = 'localhost';
$dbusername = 'root';
$dbpassword = '';
$dbname = 'calender';
$db = new mysqli($dbhost, $dbusername, $dbpassword, $dbname);
if ($db->connect_error) {
 die("Connection failed: " . $db->connect_error);
}
?> 

Berikutnya buat file dengan nama functions.php kemudian masukkan code dibawah ini.
 <?php
if(isset($_POST['func']) && !empty($_POST['func'])){
 switch($_POST['func']){
  case 'getCalender':
  getCalender($_POST['year'],$_POST['month']);
  break;
  case 'getEvents':
  getEvents($_POST['date']);
  break;
  case 'addEvent':
  addEvent($_POST['date'],$_POST['title']);
  break;
  default:
  break;
 }
}
function getCalender($year = '',$month = '')
{
 $dateYear = ($year != '')?$year:date("Y");
 $dateMonth = ($month != '')?$month:date("m");
 $date = $dateYear.'-'.$dateMonth.'-01';
 $currentMonthFirstDay = date("N",strtotime($date));
 $totalDaysOfMonth = cal_days_in_month(CAL_GREGORIAN,$dateMonth,$dateYear);
 $totalDaysOfMonthDisplay = ($currentMonthFirstDay == 7)?($totalDaysOfMonth):($totalDaysOfMonth + $currentMonthFirstDay);
 $boxDisplay = ($totalDaysOfMonthDisplay <= 35)?35:42;
 ?>
 <div id="calender_section">
  <h2>
   <select name="month_dropdown" class="month_dropdown dropdown"><?php echo getAllMonths($dateMonth); ?></select>
   <select name="year_dropdown" class="year_dropdown dropdown1"><?php echo getYearList($dateYear); ?></select>
  </h2>
  <div id="event_list" class="none"></div>
  <div id="event_add" class="none">
   <p>&nbspAdd Event On <span id="eventDateView"></span></p>
   <p><b>Add Event Name: </b><input type="text" id="eventTitle" value=""/></p>
   <input type="hidden" id="eventDate" value=""/>
   <input type="button" id="addEventBtn" value="ADD"/>
  </div>
  <div id="calender_section_top">
   <ul>
    <li>Sun</li>
    <li>Mon</li>
    <li>Tue</li>
    <li>Wed</li>
    <li>Thu</li>
    <li>Fri</li>
    <li>Sat</li>
   </ul>
  </div>
  <div id="calender_section_bot">
   <ul>
    <?php 
    $dayCount = 1; 
    for($cb=1;$cb<=$boxDisplay;$cb++){
     if(($cb >= $currentMonthFirstDay+1 || $currentMonthFirstDay == 7) && $cb <= ($totalDaysOfMonthDisplay)){
      $currentDate = $dateYear.'-'.$dateMonth.'-'.$dayCount;
      $eventNum = 0;
      include 'dbConfig.php';
      $result = $db->query("SELECT title FROM events WHERE date = '".$currentDate."' AND status = 1");
      $eventNum = $result->num_rows;
      if(strtotime($currentDate) == strtotime(date("Y-m-d"))){
       echo '<li date="'.$currentDate.'" class="grey date_cell">';
      }elseif($eventNum > 0){
       echo '<li date="'.$currentDate.'" class="light_sky date_cell">';
      }else{
       echo '<li date="'.$currentDate.'" class="date_cell">';
      }
      echo '<span>';
      echo $dayCount;
      echo '</span>';
      echo '<div id="date_popup_'.$currentDate.'" class="date_popup_wrap none">';
      echo '<div class="date_window">';
      echo '<div class="popup_event">EVENTS ('.$eventNum.')</div>';
      echo ($eventNum > 0)?'<a href="javascript:;" onclick="getEvents(\''.$currentDate.'\');">View Events</a><br/>':'';
      echo '<a href="javascript:;" onclick="addEvent(\''.$currentDate.'\');">Add Event</a>';
      echo '</div></div>';
      echo '</li>';
      $dayCount++;
      ?>
     <?php }else{ ?>
      <li><span>&nbsp;</span></li>
     <?php } } ?>
    </ul>
   </div>
  </div>
  <script type="text/javascript">
   function getCalendar(target_div,year,month){
    $.ajax({
     type:'POST',
     url:'functions.php',
     data:'func=getCalender&year='+year+'&month='+month,
     success:function(html){
      $('#'+target_div).html(html);
     }
    });
   }
   
   function getEvents(date){
    $.ajax({
     type:'POST',
     url:'functions.php',
     data:'func=getEvents&date='+date,
     success:function(html){
      $('#event_list').html(html);
      $('#event_add').slideUp('slow');
      $('#event_list').slideDown('slow');
     }
    });
   }
   function addEvent(date){
    $('#eventDate').val(date);
    $('#eventDateView').html(date);
    $('#event_list').slideUp('slow');
    $('#event_add').slideDown('slow');
   }
   $(document).ready(function(){
    $('#addEventBtn').on('click',function(){
     var date = $('#eventDate').val();
     var title = $('#eventTitle').val();
     $.ajax({
      type:'POST',
      url:'functions.php',
      data:'func=addEvent&date='+date+'&title='+title,
      success:function(msg){
       if(msg == 'ok'){
        var dateSplit = date.split("-");
        $('#eventTitle').val('');
        alert('Event Created Successfully.');
        getCalendar('calendar_div',dateSplit[0],dateSplit[1]);
       }else{
        alert('Some problem occurred, please try again.');
       }
      }
     });
    });
   });
   $(document).ready(function(){
    $('.date_cell').mouseenter(function(){
     date = $(this).attr('date');
     $(".date_popup_wrap").fadeOut();
     $("#date_popup_"+date).fadeIn(); 
    });
    $('.date_cell').mouseleave(function(){
     $(".date_popup_wrap").fadeOut();  
    });
    $('.month_dropdown').on('change',function(){
     getCalendar('calendar_div',$('.year_dropdown').val(),$('.month_dropdown').val());
    });
    $('.year_dropdown').on('change',function(){
     getCalendar('calendar_div',$('.year_dropdown').val(),$('.month_dropdown').val());
    });
    $(document).click(function(){
     $('#event_list').slideUp('slow');
    });
   });
  </script>
  <?php
 }
 function getAllMonths($selected = ''){
  $options = '';
  for($i=1;$i<=12;$i++)
  {
   $value = ($i < 01)?'0'.$i:$i;
   $selectedOpt = ($value == $selected)?'selected':'';
   $options .= '<option value="'.$value.'" '.$selectedOpt.' >'.date("F", mktime(0, 0, 0, $i+1, 0, 0)).'</option>';
  }
  return $options;
 }
 function getYearList($selected = ''){
  $options = '';
  for($i=2018;$i<=2030;$i++)
  {
   $selectedOpt = ($i == $selected)?'selected':'';
   $options .= '<option value="'.$i.'" '.$selectedOpt.' >'.$i.'</option>';
  }
  return $options;
 }
 function getEvents($date = ''){
  include 'dbConfig.php';
  $eventListHTML = '';
  $date = $date?$date:date("Y-m-d");
  $result = $db->query("SELECT title FROM events WHERE date = '".$date."' AND status = 1");
  if($result->num_rows > 0){
   $eventListHTML = '<h2>Events On '.date("l, d M Y",strtotime($date)).'</h2>';
   $eventListHTML .= '<ul>';
   while($row = $result->fetch_assoc()){ 
    $eventListHTML .= '<li>'.$row['title'].'</li>';
   }
   $eventListHTML .= '</ul>';
  }
  echo $eventListHTML;
 }
 function addEvent($date,$title){
  include 'dbConfig.php';
  $currentDate = date("Y-m-d H:i:s");
  $insert = $db->query("INSERT INTO events (title,date,created,modified) VALUES ('".$title."','".$date."','".$currentDate."','".$currentDate."')");
  if($insert){
   echo 'ok';
  }else{
   echo 'err';
  }
 }
 ?> 

Kami akan menjelaskan sedikit code di atas yang pertama code berikut.
 function addEvent(date){
   $('#eventDate').val(date);
   $('#eventDateView').html(date);
   $('#event_list').slideUp('slow');
   $('#event_add').slideDown('slow');
  }
  $(document).ready(function(){
   $('#addEventBtn').on('click',function(){
    var date = $('#eventDate').val();
    var title = $('#eventTitle').val();
    $.ajax({
     type:'POST',
     url:'functions.php',
     data:'func=addEvent&date='+date+'&title='+title,
     success:function(msg){
      if(msg == 'ok'){
       var dateSplit = date.split("-");
       $('#eventTitle').val('');
       alert('Event Created Successfully.');
       getCalendar('calendar_div',dateSplit[0],dateSplit[1]);
      }else{
       alert('Some problem occurred, please try again.');
      }
     }
    });
   });
  }); 

Dalam kode JavaScript diatas fungsi getEvents memerlukan modifikasi dan kode baru yang diperlukan untuk menangani penambahan peristiwa. addEvent ditambahkan dan Ajax akan dipanggil pada #addEventBtn.

Berikutnya script addEvent yang berfungsi untuk menambahkan file atau event kedalam database MySQL.
 function addEvent($date,$title){
 include 'dbConfig.php';
 $currentDate = date("Y-m-d H:i:s");
 $insert = $db->query("INSERT INTO events (title,date,created,modified) VALUES ('".$title."','".$date."','".$currentDate."','".$currentDate."')");
 if($insert){
  echo 'ok';
 }else{
  echo 'err';
 }
} 

Jika kalian ingin menambahkan batasan tahun sesuai dengan yang anda inginkan silahkan ubah kode beriktu pada kode di atas.
 function getYearList($selected = ''){
  $options = '';
  for($i=2018;$i<=2030;$i++)
  {
   $selectedOpt = ($i == $selected)?'selected':'';
   $options .= '<option value="'.$i.'" '.$selectedOpt.' >'.$i.'</option>';
  }
  return $options;
 } 

Pada kode di atas saya memberi batasan dari tahun 2018 sampai 2030, kalian bisa mengubahnya sesuai kebutuhan anda.

Sekian share kali ini kalian bisa mendownload filenya lansgung dibawah ini, kalian bebas mengabah dan mencobanya secara langsung.


Selain menggunakan Jquery dan Ajax sudah ada beberapa plugin yang menyediakan yang sangat cocok digunakan dalam membuat project anda diantaranya full calender, dan pada artikel berikutnya kami akan mencoba membahas bagaimana membuat calender event menggunakan plugin tersebut. Referencess : rinvizle



Baca Juga

closed