Kalender Catatan/Acara dengan Codeigniter

Event Calendar with Codeigniter

Pada kali ini saya akan berbagi tentang cara membuat kalender catatan atau kalender acara dengan menggunakan Codeigniter dan database MySQL.

DEMO

Srceenshot nya :

Pertama-tama kita siapkan database-nya. Cukup simpel hanya butuh 1 tabel dan 2 atribut

CREATE TABLE t_notes (
  `date` DATE NOT NULL,
  notes VARCHAR(30) NOT NULL,
  PRIMARY KEY (`date`)
)

Selanjutnya kita buat controller-nya (mynotes.php), tp sebelumnya silahkan set konfigurasi codeigniter untuk database dan autoload untuk library (databse) dan helper (url, form).

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Mynotes extends CI_Controller {
 
 function __construct(){
  parent::__construct();
  $this->load->model('mynotes_model', 'mynotes');
  $this->load->library('calendar', $this->_setting());
 }
 
 function index(){
  redirect('mynotes/notes');
 }
 
 // untuk konversi nama bulan
 function _month($mon){
  $mon = (int) $mon;
  switch($mon){
   case 1 : $mon = 'Januari'; Break;
   case 2 : $mon = 'Februari'; Break;
   case 3 : $mon = 'Maret'; Break;
   case 4 : $mon = 'April'; Break;
   case 5 : $mon = 'Mei'; Break;
   case 6 : $mon = 'Juni'; Break;
   case 7 : $mon = 'Juli'; Break;
   case 8 : $mon = 'Agustus'; Break;
   case 9 : $mon = 'September'; Break;
   case 10 : $mon = 'Oktober'; Break;
   case 11 : $mon = 'November'; Break;
   case 12 : $mon = 'Desember'; Break;
  }
  return $mon;
 }
 
 // untuk menambahkan catatan pada tanggal
 function add_note($date){
  $data = array(
     'day'   => $date,
     'mon'   => $this->input->post('mon'),
     'month' => $this->_month($this->input->post('mon')),
     'year'  => $this->input->post('year'),
    );
  $this->load->view('add_note', $data);
 }
 
 // aksi insert catatan
 function do_add($year, $mon, $day){
  $this->mynotes->addNote($year, $mon, $day, $this->input->post('note', true));
  $this->notes($year, $mon);
 }
 
 // menampilkan opsi untuk menghapus atau edit catatan
 function updel_note($date){
  $data = array(
     'day'   => $date,
     'mon'   => $this->input->post('mon'),
     'month' => $this->_month($this->input->post('mon')),
     'year'  => $this->input->post('year'),
     'note'  => $this->mynotes->getNote($this->input->post('year'), $this->input->post('mon'), $date)
    );
  $this->load->view('updel_note', $data);
 }
 
 // aksi untuk edit catatan
 function edit_note($year, $mon, $day){
  $this->mynotes->editNote($year, $mon, $day, $this->input->post('note', true));
  $this->notes($year, $mon);
 }
 
 // aksi untuk hapus catatan
 function delete_note($year, $mon, $day){
  $this->mynotes->deleteNote($year, $mon, $day);
  $this->notes($year, $mon);
 }
 
 // fungsi utama untuk menampilkan kalender catatan
 function notes($year = null, $mon = null){
  $year = (empty($year) || !is_numeric($year))?  date('Y') :  $year;
  $mon  = (empty($mon) || !is_numeric($mon))?  date('m') :  $mon;
  
  $date = $this->mynotes->getCalendar($year, $mon);
  $data = array(
     'notes' => $this->calendar->generate($year, $mon, $date),
     'year'  => $year,
     'mon'   => $mon
    );
  $this->load->view('mynotes', $data);
 }
 
 // setting tampilan kalender
 function _setting(){
  return array(
   'start_day'   => 'sunday',
   'show_next_prev'  => true,
   'next_prev_url'  => site_url('mynotes/notes'),
   'month_type'     => 'long',
            'day_type'       => 'short',
   'template'    => '{table_open}<table class="date">{/table_open}
           {heading_row_start}&nbsp;{/heading_row_start}
           {heading_previous_cell}<caption><a href="{previous_url}" class="prev_date" title="Previous Month">&lt;&lt;</a>{/heading_previous_cell}
           {heading_title_cell}{heading}{/heading_title_cell}
           {heading_next_cell}<a href="{next_url}" class="next_date"  title="Next Month">&gt;&gt;</a></caption>{/heading_next_cell}
           {heading_row_end}<col class="weekend_sun"><col class="weekday" span="5"><col class="weekend_sat">{/heading_row_end}
           {week_row_start}<thead><tr>{/week_row_start}
           {week_day_cell}<th>{week_day}</th>{/week_day_cell}
           {week_row_end}</tr></thead><tbody>{/week_row_end}
           {cal_row_start}<tr>{/cal_row_start}
           {cal_cell_start}<td>{/cal_cell_start}
           {cal_cell_content}<a href="'.site_url('mynotes/updel_note').'/{day}" class="act_note" title="Edit/hapus catatan untuk tanggal {day}"><div class="active act_note" val="{day}" title="Edit/Hapus catatan untuk tanggal {day}">{day}</div></a><div class="notes">{content}</div></div>{/cal_cell_content}
           {cal_cell_content_today}<a href="'.site_url('mynotes/updel_note').'/{day}" class="act_note" title="Edit/hapus catatan untuk tanggal {day}"><div class="t_active" title="Edit/Hapus catatan untuk tanggal {day}">{day}</div></a><div class="t_notes">{content}</div>{/cal_cell_content_today}
           {cal_cell_no_content}<a href="'.site_url('mynotes/add_note').'/{day}" class="act_note" title="Tambah catatan untuk tanggal {day}"><div class="day" title="Tambah catatan untuk tanggal {day}">{day}</div></a>{/cal_cell_no_content}
           {cal_cell_no_content_today}<a href="'.site_url('mynotes/add_note').'/{day}" class="act_note" title="Tambah catatan untuk tanggal {day}"><div class="today" title="Tambah catatan untuk tanggal {day}">{day}</div></a>{/cal_cell_no_content_today}
           {cal_cell_blank}&nbsp;{/cal_cell_blank}
           {cal_cell_end}</td>{/cal_cell_end}
           {cal_row_end}</tr>{/cal_row_end}
           {table_close}</tbody></table>{/table_close}');
 }
}

Selanjutnya untuk model dengan nama mynotes_model.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Mynotes_model extends CI_Model {
 function getCalendar($year, $mon){
  $year  = ($mon < 9 && strlen($mon) == 1) ? "$year-0$mon" : "$year-$mon";
  $query = $this->db->select('date, notes')->from('t_notes')->like('date', $year, 'after')->get();
  if($query->num_rows() > 0){
   $data = array();
   foreach($query->result_array() as $row){
    $data[(int) end(explode('-',$row['date']))] = $row['notes'];
   }
   return $data;
  }else{
   return false;
  }
 }
 
 function addNote($year, $mon, $day, $note){
  $mon = (strlen($mon) == 2)? $mon : "0$mon";
  $day = (strlen($day) == 2)? $day : "0$day";
  $this->db->query("INSERT INTO t_notes(date, notes) VALUES ('$year-$mon-$day', ?)", array($note));
 }
 
 function editNote($year, $mon, $day, $note){
  $mon = (strlen($mon) == 2)? $mon : "0$mon";
  $day = (strlen($day) == 2)? $day : "0$day";
  $this->db->query("UPDATE t_notes SET notes = ? WHERE date = '$year-$mon-$day'", array($note));
 }
 
 function deleteNote($year, $mon, $day){
  $mon = (strlen($mon) == 2)? $mon : "0$mon";
  $day = (strlen($day) == 2)? $day : "0$day";
  $this->db->query("DELETE FROM t_notes WHERE date = '$year-$mon-$day'");
 }
 
 function getNote($year, $mon, $day){
  $mon   = (strlen($mon) == 2)? $mon : "0$mon";
  $day   = (strlen($day) == 2)? $day : "0$day";
  $query = $this->db->query("SELECT notes FROM t_notes WHERE date = '$year-$mon-$day'");
  if($query->num_rows() == 1){
   $query = $query->row_array();
   return $query['notes'];
  }else{
   return false;
  }
 }
}?>

Tahap terakhir adalah view, untuk view terdapat 3 file yaitu

1. mynotes.php (untuk tampilan utama)
2. add_note.php (untuk form tambah catatan), dan
3. updel_note.php (untuk form edit atau hapus catatan)

Perlu diingat untuk tampilan form kalender mengunakan jquery dan jquery colorbox.
untuk mynotes.php : 

<html lang="en">
<head>
 <meta charset="utf-8">
 <title>My Calendar</title>
 <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>css/style.css"/>
 <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/colorbox.css"/>
 
 <script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="<?php echo base_url();?>js/jquery.colorbox-min.js"></script>
</head>
<body>
 <div align="center">
  <?php echo $notes?>
  <span> by Cemplux</span>
 </div>
 <script>
 $(function(){
  $(".act_note").colorbox({ 
    overlayClose: false,
    data:{year:<?php echo $year;?>,mon:<?php echo $mon;?>}
  });
 });
</script>
</body>
</html>

selanjutnya untuk add_note.php :

<div style="width:500px; height:130px; overflow:auto; color:#000000; margin-bottom:20px;" align="center">
 <h4>Tambah catatan untuk tanggal <?php echo "$day $month $year"?></h4>
 <?php echo form_open("mynotes/do_add/$year/$mon/$day");?>
 <table>
  <tr><td>Note</td><td>:</td><td><input type="text" name="note" maxlength="30" size="40" /></td></tr>
  <tr><td colspan="2"></td><td><input type="button" name="Batal" value="Batal" class="cancel">&nbsp;&nbsp;
          <input type="submit" name="OK" value="OK"></td></tr>
 </table>
 </form>
 <script> 
 $('.cancel').click(function(){
  var data = false;
  $.fn.colorbox.close(data);
 });
 </script>
</div>

dan yang terakhir untuk updel_note.php :

<div style="width:500px; height:130px; overflow:auto; color:#000000; margin-bottom:20px;" align="center">
 <h4>Edit/hapus catatan untuk tanggal <?php echo "$day $month $year"?></h4>
 <?php echo form_open("mynotes/edit_note/$year/$mon/$day", ' class="submit"');?>
 <table>
  <tr><td>Note</td><td>:</td><td><input type="text" name="note" maxlength="30" size="40" value="<?php echo $note?>" /></td></tr>
  <tr><td colspan="2"></td><td><input type="button" name="Batal" value="Batal" class="cancel">&nbsp;&nbsp;
     <input type="submit" name="OK" value="OK">&nbsp;&nbsp;
     <a href="<?php echo site_url("mynotes/delete_note/$year/$mon/$day")?>" title="hapus note">
     <input type="button" name="hapus" value="Hapus" class="del"></a></td>
  </tr>
 </table>
 </form>
 <script> 
 $('.cancel').click(function(){
  var data = false; $.fn.colorbox.close(data);
 });
 
 $('.del').click(function(){
  if(confirm('hapus  catatan?')){ return true; }else{ return false;}
 })
 
 $('.submit').submit(function(){
  if(confirm('edit catatan?')){ return true; }else{ return false; }
 })
 </script>
</div>

Demikian sharing bagian inti dari kalender catatan. Untuk source-nya bisa di download disini atau melalui github.

Cukup sekian tips nya... :D

Alhamdulillah bisa berbagi tips lagi... :D 

Keyword : Codeigniter Event Calendar,  Kalender acara, Codeigniter

Untuk menghargai HKI(Hak Kekayaan Intelektual), sumber referensi yang saya pakai dan saya pelajari akan ditampilkan.
Referensi    : Codeigniter User Guide - Calendar Library, www.java2s.com/Code/HTMLCSS/CSS-Controls/Calendarwithtable.htm
Author        : Moch. Zawaruddin Abdullah, www.zawaruddin.blogspot.com