Web Programming 2

Web Programming : Meet 10 (Radio Button, datepicker, combobox)

— 22/02/2018 add comment

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>

 

 

Recommended For You

Membuat Portal Berita Dengan CodeIgniter dan Bootstrap lanjutan 3

Membuat Portal Berita Dengan CodeIgniter dan Bootstrap Lanjutan

Membuat Portal Berita Dengan CodeIgniter dan Bootstrap

Web Programming : Meet 15 – 16 (Lanjutan)

About the Author: adyrhs

Leave a Reply

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