Tutorial Codeigniter Part 11 – Menggunakan Datepicker

codeigniter-kcdev
Advertisements

Tutorial kali ini melanjutkan aplikasi alumni sesuai dengan carutu kita pada tutorial part 0. Sebelumnya kita telah berhasil membuat modul login dan modul users. Sesaat lagi kita akan membuat modul events untuk menampilkan jadwal event-event terdekat. Setiap event yang akan kita input pastinya memiliki tanggal mulai dan tanggal berakhir nya. Nah disini kita akan membuat input tanggal ini menggunakan datepicker. Jadi kita tidak perlu menuliskan format tanggal secara manual pada form event kita nanti.

kcdev-dashboard

Framework CSS Materialize sendiri sudah mempunyai plugin datepicker sendiri yang bernama pickadate. Plugin inilah yang akan kita gunakan pada form kita. Oke kita mulai saja coding nya.

1. Membuat Table Events Pada Database

Pertama-tama kita harus membuat table events pada database dimana table inilah yang akan menampung semua data events pada aplikasi kita.

-- ----------------------------
-- Table structure for events
-- ----------------------------
DROP TABLE IF EXISTS `events`;
CREATE TABLE `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(50) NOT NULL,
  `contact` varchar(20) NOT NULL,
  `tanggal_mulai` date NOT NULL,
  `tanggal_berakhir` date NOT NULL,
  `keterangan` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of events
-- ----------------------------
INSERT INTO `events` VALUES ('1', 'Makan Makan', '08987654321', '2017-03-31', '2017-04-07', 'Pelepasan macan tutul');
INSERT INTO `events` VALUES ('2', 'Ngumpul', '08234567890', '2017-04-01', '2017-04-01', 'Lokasi @kedai Mama');

2. Membuat Controller Events

Sama seperti controller users yang telah kita buat sebelumnya, controller inilah yang akan menangani logic modul event. Pada folder application/controllers buat sebuah file baru bernama Events.php yang berisi kode berikut.

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

class Events extends MY_Controller {

  public function __construct()
  {
    parent::__construct();
    
    // Cek apakah user sudah login
    $this->cekLogin();

    // Load model events
    $this->load->model('model_events');
  }

  public function index()
  {
    // Data untuk page index
    $data['pageTitle'] = 'Events';
    $data['events'] = $this->model_events->get()->result();
    $data['pageContent'] = $this->load->view('events/eventList', $data, TRUE);

    // Jalankan view template/layout
    $this->load->view('template/layout', $data);
  }

  public function add()
  {
    // Jika form di submit jalankan blok kode ini
    if ($this->input->post('submit')) {
      
      // Mengatur validasi data nama event,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('nama', 'Nama Event', 'required');

      // Mengatur validasi data contact,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('contact', 'Contact Person', 'required');

      // Mengatur validasi data tanggal mulai,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('tanggal_mulai', 'Tanggal Mulai', 'required');

      // Mengatur validasi data tanggal berakhir,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('tanggal_berakhir', 'Tanggal Berakhir', 'required');

      // Mengatur validasi data tanggal berakhir,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('keterangan', 'Keterangan', 'required');

      // Mengatur pesan error validasi data
      $this->form_validation->set_message('required', '%s tidak boleh kosong!');

      // Jalankan validasi jika semuanya benar maka lanjutkan
      if ($this->form_validation->run() === TRUE) {

        $data = array(
          'nama' => $this->input->post('nama'),
          'contact' => $this->input->post('contact'),
          'tanggal_mulai' => date_format(date_create($this->input->post('tanggal_mulai')), 'Y-m-d'),
          'tanggal_berakhir' => date_format(date_create($this->input->post('tanggal_berakhir')), 'Y-m-d'),
          'keterangan' => $this->input->post('keterangan')
        );

        // Jalankan function insert pada model_events
        $query = $this->model_events->insert($data);

        // cek jika query berhasil
        if ($query) $message = array('status' => true, 'message' => 'Berhasil menambahkan event');
        else $message = array('status' => true, 'message' => 'Gagal menambahkan event');

        // simpan message sebagai session
        $this->session->set_flashdata('message', $message);

        // refresh page
        redirect('events/add', 'refresh');
      } 
    }
    
    // Data untuk page users/add
    $data['pageTitle'] = 'Tambah Data Event';
    $data['pageContent'] = $this->load->view('events/eventAdd', $data, TRUE);

    // Jalankan view template/layout
    $this->load->view('template/layout', $data);
  }

  public function edit($id = null)
  {
    // Jika form di submit jalankan blok kode ini
    if ($this->input->post('submit')) {
      
      // Mengatur validasi data nama event,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('nama', 'Nama Event', 'required');

      // Mengatur validasi data contact,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('contact', 'Contact Person', 'required');

      // Mengatur validasi data tanggal mulai,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('tanggal_mulai', 'Tanggal Mulai', 'required');

      // Mengatur validasi data tanggal berakhir,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('tanggal_berakhir', 'Tanggal Berakhir', 'required');

      // Mengatur validasi data tanggal berakhir,
      // # required = tidak boleh kosong
      $this->form_validation->set_rules('keterangan', 'Keterangan', 'required');

      // Mengatur pesan error validasi data
      $this->form_validation->set_message('required', '%s tidak boleh kosong!');

      // Jalankan validasi jika semuanya benar maka lanjutkan
      if ($this->form_validation->run() === TRUE) {

        $data = array(
          'nama' => $this->input->post('nama'),
          'contact' => $this->input->post('contact'),
          'tanggal_mulai' => date_format(date_create($this->input->post('tanggal_mulai')), 'Y-m-d'),
          'tanggal_berakhir' => date_format(date_create($this->input->post('tanggal_berakhir')), 'Y-m-d'),
          'keterangan' => $this->input->post('keterangan')
        );

        // Jalankan function insert pada model_events
        $query = $this->model_events->update($id, $data);

        // cek jika query berhasil
        if ($query) $message = array('status' => true, 'message' => 'Berhasil memperbarui event');
        else $message = array('status' => true, 'message' => 'Gagal memperbarui event');

        // simpan message sebagai session
        $this->session->set_flashdata('message', $message);

        // refresh page
        redirect('events/edit/'.$id, 'refresh');
      } 
    }
    
    // Ambil data user dari database
    $event = $this->model_events->get_where(array('id' => $id))->row();
    
    // Mengubah format tanggal dari database
    $event->tanggal_mulai = date_format(date_create($event->tanggal_mulai), 'd-m-Y');
    $event->tanggal_berakhir = date_format(date_create($event->tanggal_berakhir), 'd-m-Y');

    // Jika data user tidak ada maka show 404
    if (!$event) show_404();

    // Data untuk page users/add
    $data['pageTitle'] = 'Edit Data Event';
    $data['event'] = $event;
    $data['pageContent'] = $this->load->view('events/eventEdit', $data, TRUE);

    // Jalankan view template/layout
    $this->load->view('template/layout', $data);
  }

  public function delete($id)
  {
    // Ambil data user dari database
    $user = $this->model_events->get_where(array('id' => $id))->row();

    // Jika data user tidak ada maka show 404
    if (!$user) show_404();

    // Jalankan function delete pada model_events
    $query = $this->model_events->delete($id);

    // cek jika query berhasil
    if ($query) $message = array('status' => true, 'message' => 'Berhasil menghapus event');
    else $message = array('status' => true, 'message' => 'Gagal menghapus event');

    // simpan message sebagai session
    $this->session->set_flashdata('message', $message);

    // refresh page
    redirect('events', 'refresh');
  }
}

3. Membuat Model Events

Tugas selanjutnya adalah membuat model events. Pada folder application/models buat file baru bernama Model_events.php.

<?php
  class Model_events extends CI_Model {

    public $table = 'events';

    public function get()
    {
      // Jalankan query
      $query = $this->db->get($this->table);

      // Return hasil query
      return $query;
    }

    public function get_where($where)
    {
      // Jalankan query
      $query = $this->db
        ->where($where)
        ->get($this->table);

      // Return hasil query
      return $query;
    }

    public function insert($data)
    {
      // Jalankan query
      $query = $this->db->insert($this->table, $data);

      // Return hasil query
      return $query;
    }

    public function update($id, $data)
    {
      // Jalankan query
      $query = $this->db
        ->where('id', $id)
        ->update($this->table, $data);
      
      // Return hasil query
      return $query;
    }

    public function delete($id)
    {
      // Jalankan query
      $query = $this->db
        ->where('id', $id)
        ->delete($this->table);
      
      // Return hasil query
      return $query;
    }
    
  }

4. Membuat View Untuk Modul Events

Berikutnya kita akan membuat 3 file view sama seperti di modul users. Yaitu:

File application/views/events/eventList.php

session->flashdata('message')): ?>
">
</div> <?php endif; ?> <table class="bordered highlight"> <thead> <tr> <th>No</th> <th>Nama Event</th> <th>Contact</th> <th class="center-align">Tgl. Mulai</th> <th class="center-align">Tgl. Berakhir</th> <th>Keterangan</th> <th class="center-align">Action</th> </tr> </thead> <tbody> <?php if($events): ?> <?php $no = 0; foreach($events as $row): ?> <tr> <td><?php echo ++$no; ?></td> <td><?php echo $row->nama; ?></td> <td><?php echo $row->contact; ?></td> <td class="center-align"><?php echo $row->tanggal_mulai; ?></td> <td class="center-align"><?php echo $row->tanggal_berakhir; ?></td> <td><?php echo $row->keterangan; ?></td> <td class="center-align"> <a href="<?php echo base_url('events/edit/' . $row->id); ?>" class="btn-floating halfway-fab waves-effect waves-light tooltipped" data-position="top" data-tooltip="Edit Data"><i class="material-icons">edit</i></a> <a href="<?php echo base_url('events/delete/' . $row->id); ?>" class="btn-floating halfway-fab waves-effect waves-light tooltipped" data-position="top" data-tooltip="Delete Data"><i class="material-icons">delete</i></a> </td> </tr> <?php endforeach; ?> <?php else: ?> <tr> <td class="center-align" colspan="7">Belum ada data event</td> </tr> <?php endif; ?> </tbody> </table> </div> </div> </div> </div>

File application/views/events/eventAdd.php

', '

'); ?>
</div> <?php endif; ?> <?php if($message = $this->session->flashdata('message')): ?>
">
</div> <?php endif; ?>
">
">
">
">
">
</form> </div> </div> </div> </div>
Advertisements

Dan terakhir file application/views/events/eventEdit.php

', '

'); ?>
</div> <?php endif; ?> <?php if($message = $this->session->flashdata('message')): ?>
">
</div> <?php endif; ?>
nama; ?>">
contact; ?>">
tanggal_mulai; ?>">
tanggal_berakhir; ?>">
keterangan; ?>">
</form> </div> </div> </div> </div>

5. Memperbarui Template Sidebar Dan KCDEV.JS

Pada template sidebar kita akan menambahkan menu baru yaitu menu events. Menu baru ini bisa dilihat oleh semua level user.

<aside>
  <ul id="sidenav" class="side-nav fixed">
    
    <li>
      
">
<a href="#!user"><img class="circle" src="<?php echo base_url('assets/images/noavatar.png'); ?>"></a> <a href="#!name"><span class="white-text name"><?php echo ucwords(strtolower($this->session->userdata('username'))); ?></span></a> <a href="#!email"><span class="white-text email"><?php echo ucwords(strtolower($this->session->userdata('level'))); ?></span></a> </div> </li> <li> <a class="waves-effect" href="<?php echo base_url('dashboard'); ?>"><i class="material-icons">home</i>Dashboard</a> </li> <li> <a class="waves-effect" href="<?php echo base_url('events'); ?>"><i class="material-icons">event</i>Events</a> </li> <li>
</li> <?php if($this->session->userdata('level') === 'administrator'): ?> <li> <a class="subheader">Admin</a> </li> <li> <a class="waves-effect" href="<?php echo base_url('users'); ?>"><i class="material-icons">people</i>Users</a> </li> <li>
</li> <?php endif; ?> <li> <a class="waves-effect" href="<?php echo base_url('auth/logout'); ?>"><i class="material-icons">exit_to_app</i>Logout</a> </li> </ul> </aside>

Nah tugas yang terakhir adalah me-load plugin pickadate pada file kcdev.js.

$(document).ready(function() {
  $('.button-collapse').sideNav();
  $('select').material_select();
  $('.datepicker').pickadate({
    format: 'dd-mm-yyyy',
  });
});

6. Testing

Untuk mengetahui apakah pekerjaan yang telah kita lakukan berhasil, kita akan mencoba untuk menambahkan event baru melalui alamat http://localhost/codeigniter/events/add. Pada saat kita mengklik input tanggal mulai atau input tanggal berakhir maka secara automatis datepicker kita akan muncul seperti gambar di bawah ini. Jika tidak mungkin adiks melewatkan salah satu step-step di atas. Atau jika masih kebingugan bisa langsung clone fike-file yang digunakan pada tutorial ini -> disini <-

tutorial codeigniter menggunakan datepicker

Oke diks, tetap semangat belajar dan berbagi, seperti sabda Rasulullah SAW:

Siapa yang keluar untuk menuntut ilmu maka ia berjuang fisabilillah hingga ia kembali.

Advertisements

Semoga bermanfaat, sekian dan terima kasih.

kaceManaf

 

Author: kaceManaf

Founders of kcdev.id, freelance full stack web developer and also a web-tech wanderer. Passionate about code readability and simplicity. https://www.linkedin.com/in/nafplann/

13 Replies to “Tutorial Codeigniter Part 11 – Menggunakan Datepicker

  1. Tolong revisi gan, ada beberapa code yang hilang:
    File application/views/events/eventList.php (Baris 6 – 11)
    File application/views/events/eventAdd.php (Baris 9 – 12)
    File application/views/events/eventEdit.php (Baris 9 – 12)

Leave a Reply

Your email address will not be published. Required fields are marked *