Pada pertemuan ke 10 ini akan dibahas penggunaan Radio Button, Css/Jquery Datepicker dan Combobox pada CodeIgniter.
sebelumnya download dulu file pendukung css/jquery untuk datapicker disini
setelah di-download:
- kopi file datepicker.zip kedalam folder CodeIgniter (wp2) kemudian paste.
- extract here di dalam folder wp2
- hasilnya seperti pada gambar dibawah ini.
Selanjutnya akan dijelaskan lebih lanjut di Meet 10 (22/Februari/2018)
yang harus dilakukan selanjutnya edit file pada folder controllers (Biodata.php) menjadi seperti ini
<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); class Biodata extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('Biodata_model'); $this->load->library('form_validation'); } public function index() { $q = urldecode($this->input->get('q', TRUE)); $start = intval($this->input->get('start')); if ($q <> '') { $config['base_url'] = base_url() . 'biodata/index?q=' . urlencode($q); $config['first_url'] = base_url() . 'biodata/index?q=' . urlencode($q); } else { $config['base_url'] = base_url() . 'biodata/index'; $config['first_url'] = base_url() . 'biodata/index'; } $config['per_page'] = 10; $config['page_query_string'] = TRUE; $config['total_rows'] = $this->Biodata_model->total_rows($q); $biodata = $this->Biodata_model->get_limit_data($config['per_page'], $start, $q); $this->load->library('pagination'); $this->pagination->initialize($config); $data = array( 'biodata_data' => $biodata, 'q' => $q, 'pagination' => $this->pagination->create_links(), 'total_rows' => $config['total_rows'], 'start' => $start, ); $this->load->view('biodata/biodata_list', $data); } public function read($id) { $row = $this->Biodata_model->get_by_id($id); if ($row) { $data = array( 'id' => $row->id, 'nim' => $row->nim, 'nama' => $row->nama, 'jk' => $row->jk, 'tempat_lahir' => $row->tempat_lahir, 'tgl_lahir' => $row->tgl_lahir, 'alamat' => $row->alamat, 'jur' => $row->jur, 'jurus' => $row->jurusan, 'no_hp' => $row->no_hp, 'foto' => $row->foto, ); $this->load->view('biodata/biodata_read', $data); } else { $this->session->set_flashdata('message', 'Record Not Found'); redirect(site_url('biodata')); } } public function create() { $data = array( 'button' => 'Create', 'action' => site_url('biodata/create_action'), 'id' => set_value('id'), 'nim' => set_value('nim'), 'nama' => set_value('nama'), 'jk' => set_value('jk'), 'tempat_lahir' => set_value('tempat_lahir'), 'tgl_lahir' => set_value('tgl_lahir'), 'alamat' => set_value('alamat'), 'jur' => set_value('jur'), 'no_hp' => set_value('no_hp'), 'foto' => set_value('foto'), ); $this->load->view('biodata/biodata_form', $data); } public function create_action() { $this->_rules(); if ($this->form_validation->run() == FALSE) { $this->create(); } else { $data = array( 'nim' => $this->input->post('nim',TRUE), 'nama' => $this->input->post('nama',TRUE), 'jk' => $this->input->post('jk',TRUE), 'tempat_lahir' => $this->input->post('tempat_lahir',TRUE), 'tgl_lahir' => $this->input->post('tgl_lahir',TRUE), 'alamat' => $this->input->post('alamat',TRUE), 'jur' => $this->input->post('jur',TRUE), 'no_hp' => $this->input->post('no_hp',TRUE), 'foto' => $this->input->post('foto',TRUE), ); $this->Biodata_model->insert($data); $this->session->set_flashdata('message', 'Create Record Success'); redirect(site_url('biodata')); } } public function update($id) { $row = $this->Biodata_model->get_by_id($id); if ($row) { $data = array( 'button' => 'Update', 'action' => site_url('biodata/update_action'), 'id' => set_value('id', $row->id), 'nim' => set_value('nim', $row->nim), 'nama' => set_value('nama', $row->nama), 'jk' => set_value('jk', $row->jk), 'tempat_lahir' => set_value('tempat_lahir', $row->tempat_lahir), 'tgl_lahir' => set_value('tgl_lahir', $row->tgl_lahir), 'alamat' => set_value('alamat', $row->alamat), 'jur' => set_value('jur', $row->jur), 'no_hp' => set_value('no_hp', $row->no_hp), 'foto' => set_value('foto', $row->foto), ); $this->load->view('biodata/biodata_form', $data); } else { $this->session->set_flashdata('message', 'Record Not Found'); redirect(site_url('biodata')); } } public function update_action() { $this->_rules(); if ($this->form_validation->run() == FALSE) { $this->update($this->input->post('id', TRUE)); } else { $data = array( 'nim' => $this->input->post('nim',TRUE), 'nama' => $this->input->post('nama',TRUE), 'jk' => $this->input->post('jk',TRUE), 'tempat_lahir' => $this->input->post('tempat_lahir',TRUE), 'tgl_lahir' => $this->input->post('tgl_lahir',TRUE), 'alamat' => $this->input->post('alamat',TRUE), 'jur' => $this->input->post('jur',TRUE), 'no_hp' => $this->input->post('no_hp',TRUE), 'foto' => $this->input->post('foto',TRUE), ); $this->Biodata_model->update($this->input->post('id', TRUE), $data); $this->session->set_flashdata('message', 'Update Record Success'); redirect(site_url('biodata')); } } public function delete($id) { $row = $this->Biodata_model->get_by_id($id); if ($row) { $this->Biodata_model->delete($id); $this->session->set_flashdata('message', 'Delete Record Success'); redirect(site_url('biodata')); } else { $this->session->set_flashdata('message', 'Record Not Found'); redirect(site_url('biodata')); } } public function _rules() { $this->form_validation->set_rules('nim', 'nim', 'trim|required'); $this->form_validation->set_rules('nama', 'nama', 'trim|required'); $this->form_validation->set_rules('jk', 'jk', 'trim|required'); $this->form_validation->set_rules('tempat_lahir', 'tempat lahir', 'trim|required'); $this->form_validation->set_rules('tgl_lahir', 'tgl lahir', 'trim|required'); $this->form_validation->set_rules('alamat', 'alamat', 'trim|required'); $this->form_validation->set_rules('jur', 'jur', 'trim|required'); $this->form_validation->set_rules('no_hp', 'no hp', 'trim|required'); $this->form_validation->set_rules('foto', 'foto', 'trim|required'); $this->form_validation->set_rules('id', 'id', 'trim'); $this->form_validation->set_error_delimiters('<span class="text-danger">', '</span>'); } }
Kemudian pada folder models (Biodata_model.php)
<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); class Biodata_model extends CI_Model { public $table = 'biodata'; public $id = 'id'; public $order = 'DESC'; function __construct() { parent::__construct(); } // get data by id function get_by_id($id) { //$this->db->where($this->id, $id); //$this->db->select('b.*,j.*'); //$this->db->from('biodata b'); //$this->db->join('jurusan j','b.jur=j.id_jur','LEFT'); //return $this->db->get()->row(); return $this->db->query("SELECT b.*, j.* FROM biodata b LEFT JOIN jurusan j ON b.jur=j.id_jur WHERE id = '$id' ")->row(); } // get total rows function total_rows($q = NULL) { $this->db->like('id', $q); $this->db->or_like('nim', $q); $this->db->or_like('nama', $q); $this->db->or_like('tempat_lahir', $q); $this->db->or_like('tgl_lahir', $q); $this->db->or_like('alamat', $q); $this->db->or_like('jur', $q); $this->db->or_like('no_hp', $q); $this->db->from($this->table); return $this->db->count_all_results(); } // get data with limit and search function get_limit_data($limit, $start = 0, $q = NULL) { $this->db->order_by($this->id, $this->order); $this->db->select('b.*,j.*'); $this->db->from('biodata b'); $this->db->join('jurusan j','b.jur=j.id_jur','LEFT'); $this->db->like('id', $q); $this->db->or_like('nim', $q); $this->db->or_like('nama', $q); $this->db->or_like('tempat_lahir', $q); $this->db->or_like('tgl_lahir', $q); $this->db->or_like('alamat', $q); $this->db->or_like('jur', $q); $this->db->or_like('no_hp', $q); $this->db->limit($limit, $start); return $this->db->get()->result(); } // insert data function insert($data) { $this->db->insert($this->table, $data); } // update data function update($id, $data) { $this->db->where($this->id, $id); $this->db->update($this->table, $data); } // delete data function delete($id) { $this->db->where($this->id, $id); $this->db->delete($this->table); } }
Selanjutnya di folder views / biodata (biodata_form)
<!doctype html> <html> <head> <title>FORM BIODATA</title> <link rel="stylesheet" href="<?php echo base_url('bootstrap/css/bootstrap.min.css') ?>"/> <link rel="stylesheet" href="<?php echo base_url('datepicker/datepicker.css') ?>"/> <style> body{ padding: 15px; } </style> </head> <body> <h2 style="margin-top:0px">Biodata <?php echo $button ?></h2> <form action="<?php echo $action; ?>" method="post"> <div class="form-group"> <label for="varchar">Nim <?php echo form_error('nim') ?></label> <input type="text" class="form-control" name="nim" id="nim" placeholder="Nim" value="<?php echo $nim; ?>" /> </div> <div class="form-group"> <label for="varchar">Nama <?php echo form_error('nama') ?></label> <input type="text" class="form-control" name="nama" id="nama" placeholder="Nama" value="<?php echo $nama; ?>" /> </div> <div class="form-group"> <label for="int">Jenis Kelamin <?php echo form_error('jk') ?></label> <br/> <input name="jk" type="radio" class="" <?php if($jk=='1') echo "checked='checked'"; ?> value="1" /> Laki - Laki <br/> <input name="jk" type="radio" class="" <?php if($jk=='2') echo "checked='checked'"; ?> value="2" /> Perempuan </div> <div class="form-group"> <label for="int">Tempat Lahir <?php echo form_error('tempat_lahir') ?></label> <input type="text" class="form-control" name="tempat_lahir" id="tempat_lahir" placeholder="Tempat Lahir" value="<?php echo $tempat_lahir; ?>" /> </div> <div class="form-group"> <label for="date">Tgl Lahir <?php echo form_error('tgl_lahir') ?></label> <input type="text" class="form-control datepicker" name="tgl_lahir" id="tgl_lahir" placeholder="Tgl Lahir" value="<?php echo $tgl_lahir; ?>" /> </div> <div class="form-group"> <label for="alamat">Alamat <?php echo form_error('alamat') ?></label> <textarea class="form-control" rows="3" name="alamat" id="alamat" placeholder="Alamat"><?php echo $alamat; ?></textarea> </div> <div class="form-group"> <label for="int">Jur <?php echo form_error('jur') ?></label> <input type="text" class="form-control" name="jur" id="jur" placeholder="Jur" value="<?php echo $jur; ?>" /> </div> <div class="form-group"> <label for="varchar">No Hp <?php echo form_error('no_hp') ?></label> <input type="text" class="form-control" name="no_hp" id="no_hp" placeholder="No Hp" value="<?php echo $no_hp; ?>" /> </div> <div class="form-group"> <label for="varchar">Foto <?php echo form_error('foto') ?></label> <input type="text" class="form-control" name="foto" id="foto" placeholder="Foto" value="<?php echo $foto; ?>" /> </div> <input type="hidden" name="id" value="<?php echo $id; ?>" /> <button type="submit" class="btn btn-primary"><?php echo $button ?></button> <a href="<?php echo site_url('biodata') ?>" class="btn btn-danger">Cancel</a> </form> </body> <!-- untuk memanggil javascript --> <script src="<?php echo base_url('datepicker/jquery-2.1.4.min.js')?>"></script> <script src="<?php echo base_url('datepicker/bootstrap-datepicker.js')?>"></script> <script src="<?php echo base_url('datepicker/bootstrap-datepicker.id.js')?>"></script> <script type="text/javascript"> $(function() { $('.datepicker').datepicker({ language: 'id', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 3, minView: 2, forceParse: 0, format: 'yyyy-mm-dd', }); }); </script> CTRL+U </html>
Selanjutnya di folder views / biodata (biodata_list)
<!doctype html> <html> <head> <title>DAFTAR BIODATA</title> <link rel="stylesheet" href="<?php echo base_url('bootstrap/css/bootstrap.min.css') ?>"/> <style> body{ padding: 15px; } </style> </head> <body> <h2 style="margin-top:0px">Biodata</h2> <div class="row" style="margin-bottom: 10px"> <div class="col-md-4"> <a href="<?php echo base_url('biodata/create');?>" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Tambah Data</a> </div> <div class="col-md-4 text-center"> <div style="margin-top: 8px" id="message"> <?php echo $this->session->userdata('message') <> '' ? $this->session->userdata('message') : ''; ?> </div> </div> <div class="col-md-1 text-right"> </div> <div class="col-md-3 text-right"> <form action="<?php echo site_url('biodata/index'); ?>" class="form-inline" method="get"> <div class="input-group"> <input type="text" class="form-control" name="q" value="<?php echo $q; ?>"> <span class="input-group-btn"> <?php if ($q <> '') { ?> <a href="<?php echo site_url('biodata'); ?>" class="btn btn-default">Reset</a> <?php } ?> <button class="btn btn-primary" type="submit">Search</button> </span> </div> </form> </div> </div> <table class="table table-bordered" style="margin-bottom: 10px"> <tr> <th>No</th> <th>Nim</th> <th>Nama</th> <th>Jk</th> <th>Tempat Lahir</th> <th>Tgl Lahir</th> <th>Alamat</th> <th>Jurusan</th> <th>No Hp</th> <th>Foto</th> <th>Action</th> </tr><?php foreach ($biodata_data as $biodata) { if($biodata->jk == 1){ $jenis = 'Laki-laki'; }else{ $jenis = 'Perempuan'; } ?> <tr> <td width="80px"><?php echo ++$start ?></td> <td><?php echo $biodata->nim ?></td> <td><?php echo $biodata->nama ?></td> <td><?php echo $jenis; ?></td> <td><?php echo $biodata->tempat_lahir ?></td> <td><?php echo date('d-m-Y',strtotime($biodata->tgl_lahir)) ?></td> <td><?php echo $biodata->alamat ?></td> <td><?php echo $biodata->jurusan?></td> <td><?php echo $biodata->no_hp ?></td> <td><?php echo $biodata->foto ?></td> <td style="text-align:center" width="200px"> <?php echo anchor(site_url('biodata/read/'.$biodata->id),'Read'); echo ' | '; echo anchor(site_url('biodata/update/'.$biodata->id),'Update'); echo ' | '; echo anchor(site_url('biodata/delete/'.$biodata->id),'Delete','onclick="javasciprt: return confirm(\'Anda Yakin ?\')"'); ?> </td> </tr> <?php } ?> </table> <div class="row"> <div class="col-md-6"> <a href="#" class="btn btn-primary">Total Record : <?php echo $total_rows ?></a> </div> <div class="col-md-6 text-right"> <?php echo $pagination ?> </div> </div> </body> </html>