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

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>

 

 

Jika sekiranya bermanfaat bagi anda, mungkin saja juga berguna buat orang lain. Dengan teramat sangat silahkan untuk share info tersebut dengan mengklik button dibawah ini.

Terimakasih telah membaca Web Programming 2 - Web Programming : Meet 10 (Radio Button, datepicker, combobox). Silahkan tinggalkan komentar, saran dan pesan Anda untuk kemajuan website  IT.DewAdy.Com. Terimakasih untuk dukungan dan partisipasi Anda.


Maaf untuk sementara fitur komentar menggunakan Facebook Kami Nonaktifkan

0 Komentar
  • Nama harus diisi, Email tidak akan disebarluaskan, Terimakasih.
  • Mohon untuk menggunakan ejaan yang benar / kata-kata yang mudah dimengerti

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.


Pencarian . . .

IP Address : 54.226.36.60
Sistem Operasi : Unknown
Browser : Unknown
Versi : ?
00001998
Contact Me

FB : Ady

TW : @ady_rhs

About Me
Sekilas tentang SAYA . . . Saya ADY Blogger asal sebuah desa kecil nan jauh disana. :D yang sekarang berdomisili di Kota Cantik, Palangka Raya, Kalimantan Tengah,
Membuat website Edukasi yang bermanfaat berdasarkan hasil pengalaman yang pernah dicoba dan sharing tentang hal yang saya rasa berguna lebih khusus kepada diri sendiri lebih-lebih jika bisa bermanfaat buat para pembaca sekalian. Hidup itu indah jika kita bisa menjadi orang yang bermanfaat bagi orang lain.
Email :
ady@dewady.com atau dewady.com@gmail.com


Web Hosting
Link Rujukan