Jumat, 28 Desember 2012

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.

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

34 komentar:

  1. keren mas..
    bru liat aj dh lgsung naksi..
    apalagi kalu berhasil nyoba..
    insya allah berhasil amiennnn

    BalasHapus
    Balasan
    1. thanks gan...
      aamiin... selamat mencoba gan...
      btw sori baru bls... lama tak OL soalnya

      Hapus
  2. mas ko ga bisa ya?jadi tanggalnya malah ke detect tahun tuh di database,padahal saya udah ikutin persis kaya yg mas kasih..

    BalasHapus
    Balasan
    1. wah... coba saya cek controller n modelnya (jika ada sedikit yg d ubah)... agak susah soalnya klo harus mengira2.. hehe
      sori telat balesnya

      Hapus
  3. waahh...baguss sekali ini mas,..
    boleh saya tau nama FB anda mas??
    mau belajar nih untuk TA saya mengenai event plan,..

    BalasHapus
    Balasan
    1. thanks gan... cek aja nama saya...

      Hapus
    2. 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..

      Hapus
    3. coba d load dulu url helper nya....

      bisa cek d config/autoload.php
      atau cek di
      http://ellislab.com/codeigniter/user-guide/helpers/url_helper.html

      Hapus
  4. Kebetulan month cari bahan wat referenci nulis blog, makasih atas pencerahanya anga..

    BalasHapus
  5. Fatal error: Call to undefined function site_url() in http:\\localhost\kalender\index.php\mynotes.php on line 99

    gitu tu kenapa ya mas?? padahal saya dah sama kan persis lokasi penempatan file2 .php nya..
    mohon pencerahannya.. terimakasih kakak.. :)

    BalasHapus
    Balasan
    1. coba d load dulu url helper nya....

      bisa cek d config/autoload.php

      Hapus
  6. Object not found!

    The requested URL was not found on this server. If you entered the URL manually please check your spelling and try again.

    If you think this is a server error, please contact the webmaster.

    Error 404

    localhost
    Apache/2.4.3 (Win32) OpenSSL/1.0.1c PHP/5.4.7


    kenapa kalo saya download selalu seperti ini, padahal urlnya sudah saya setting

    BalasHapus
    Balasan
    1. Ok, thanks infonya... dah saya perbaiki link nya....

      Hapus
  7. mas ini bikin dulu data base nya ga di xampp?
    maaf masih newbie

    BalasHapus
    Balasan
    1. klo contoh aplikasi yang aku berikan buat database dengan nama "mynotes" lewat phpmyadmin yg ada di xampp, trus buat tabel dengan nama t_notes. demikian

      Hapus
  8. mengapa pas saya coba muncul tulisan gini terus gan "No direct script access allowed"

    BalasHapus
  9. Kenapa muncul gini gan "No direct script access allowed"

    BalasHapus
  10. mas klo dimasukin kedlm frame gtu koq error ya???
    mohon bantuannya, trus bwt update sma tmbahnya jga error

    BalasHapus
  11. untuk multiple event dalam satu hari gimana gan ?

    BalasHapus
    Balasan
    1. cek d mari gan
      http://zawaruddin.blogspot.com/2013/06/multiple-event-calendar-with-codeigniter.html

      Hapus
  12. Unable to connect to your database server using the provided settings.

    BalasHapus
  13. mohon bantuan mesej spt Unable to connect to your database server using the provided settings.

    Filename: C:\wamp\www\mynotes\system\database\DB_driver.php

    Line Number: 124

    BalasHapus
    Balasan
    1. setting untuk koneksi ke databasenya masih salah... cek koneksi database nya dulu...

      Hapus
  14. terimakasih kaka :) kalo mau silahkan kunjungi juga web saya di www.zona-ramdhan.16mb.com

    BalasHapus
  15. bang, ane pakai xampp yang phpnya versi 7 apa bisa jalan bang?
    kan drivermysql sudah diganti mysqli

    BalasHapus
    Balasan
    1. dicoba aja bang...
      NB : ni evencal pake CI 2 belum CI 3

      Hapus
  16. sangat bermanfaat bos...
    terimakasih

    BalasHapus
  17. bang, eror sya disini
    A PHP Error was encountered

    Severity: Runtime Notice

    Message: Only variables should be passed by reference

    Filename: models/mynotes_model.php

    Line Number: 10


    pas mau tambah catatanya bang , tapi ane cek di database ane mau dia masuk data catatanya cuman di browser nya tampilannya masih eror bang, mohon solusinya , makasi :)

    BalasHapus
  18. bang, punya ane masis eror sperti ini

    A PHP Error was encountered

    Severity: Runtime Notice

    Message: Only variables should be passed by reference

    Filename: models/mynotes_model.php

    Line Number: 10


    Pass mau nambahin catatan eror bang , tapi sya cek di databasenya mau nambah , tapi di tampilan browsernya masih eror sperti ini bang
    mohon pencerahannya bang , pas bnget sma tugas yg sedang ane kerjain ini bang , makasi :)

    BalasHapus
  19. coba buka link yg ini, link ini update terbaru dengan beberapa perbaruan dan menggunakan CI 3

    http://zawaruddin.blogspot.com/2013/06/multiple-event-calendar-with-codeigniter.html

    BalasHapus
  20. makasih banyak gan, artikelnya sangat bermanfaat..

    BalasHapus