Jumat, 28 Desember 2012

Event Calendar with Codeigniter

At this time i'll share about create event calendar with Codeigniter. I use Codeigniter 2.1.3 to create it. well, it's my first calendar... XD

the screenshot :  


First, we should create a database table
CREATE TABLE t_notes (
  `date` DATE NOT NULL,
  notes VARCHAR(30) NOT NULL,
  PRIMARY KEY (`date`)
)

and then, make sure configuration of database and autoload (database, url, form) has been set.
The controller, mynotes.php :
<?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}');
 }
}

next step is about model,  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;
  }
 }
}?>

and then, final step, it's about view. There're 3 files in view to display the calendar
  1. mynotes.php (to display the main page)
  2. add_note.php (to adding the event), and
  3. updel_note.php (to update or delete event)
Remember this calendar require  jquery and jquery colorbox.
for 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>

next view file,  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>

and then the last view file,  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>

This is it my sharing about event calendar with codeigniter.
Sorry about my english :D
You can download the source here or via github.

Keyword : Codeigniter Event Calendar,  calendar

To appreciate the IPR (Intellectual Property Rights), reference sources that I use and I have learned will be displayed.
Referensi    : Codeigniter User Guide - Calendar Library, www.java2s.com/Code/HTMLCSS/CSS-Controls/Calendarwithtable.htm
Author        : Moch. Zawaruddin Abdullah, www.zawaruddin.blogspot.com

18 komentar:

  1. gan kalo nambah waktu di bawah content di calendar tu gmna??? help please

    BalasHapus
    Balasan
    1. maaf baru bals, maklum liburan...
      klo ingin nambahin waktu bisa disisipkan time picker jquery pada form insert nya, atau bisa diketik manual aja...

      Hapus
  2. Gan...Misal content-nya ambil data dari bbrp field dari database gimana yach??? contoh : notes1, notes2, notes3.

    Thanks

    BalasHapus
    Balasan
    1. bisa aja gan, tinggal tambah field, tambah form input note dan select field2 yang akan d tampilkan d kalender...
      tp permasalahannya adalah space tampilan nya jadi penuh...
      bisa saja di edit dulu untuk style kalendernya...

      Hapus
  3. When I try to translate this into English - the code breaks. Can you help me out? Much Thanks.

    BalasHapus
  4. When I try to translate the code into English, the code breaks. Can you help me with the Translation? I love this Calendar. Thank You Very Much!
    Sal

    BalasHapus
    Balasan
    1. ah sorry... i'm busy about my job so don't have time to check my blog...

      Hapus
  5. Translation Completed. There is much for me to learn about globalization. If I can ever help you, please send me a note. Thank You Again for your terrific work.

    BalasHapus
    Balasan
    1. well, good to hear that....
      u r welcome...

      now i'm developing about multiple event calendar.... :D

      Hapus
    2. I've finished building the application multiple event calendar.. ^_^

      Hapus
  6. Fatal error: Call to undefined function site_url() in C:\xampp\htdocs\ci_kalender\application\controllers\mynotes.php on line 95

    Maaf klo ada pesan error seperti di atas, kira2 salah dimananya ya?? mohon pencerahannya.. BTW terima kasih kakak untuk share ilmunya..

    BalasHapus
    Balasan
    1. udah d load belum url helpernya?

      cek d application/config/autoload.php
      baris 67

      tambahin
      $autoload['helper'] = array('url');

      Hapus
    2. alhamdulillh berhasil di load calendar nya :D terima kasih banyak..
      barusan saya juga nyoba event calendar, postingan terbaru Anda..
      tapi ada masalah pada bagian saat save nya..kira2 knp ya? terima kasih :)
      http://imageshack.us/photo/my-images/443/xbbr.jpg/

      Hapus
    3. load juga helper untuk form nya....

      Hapus
    4. Sudah saya load helper form nya.. tapi tetap.. maaf sebelumnya masih newbie..

      Hapus
    5. load default yg ada pada aplikasi ini

      $autoload['libraries'] = array('database');
      $autoload['helper'] = array('url','form');

      atau bisa download lgsg aja aplikasinya... link ada d bagian terakhir dari tutorial...

      Hapus
  7. bagaimana mas jika menambahkan session agar cuma admin yang bisa tambah catatan?
    masih newbie soalnya :)
    terima kasih :D

    BalasHapus
    Balasan
    1. boleh juga....
      disini saya hanya share untuk event calendar nya...

      agan eksplore aja, trus dikasih previllege ttg siapa saja yg bisa mengakases kalendernya.. :)

      Hapus