Aldi My Teacher is WWW. #Tidak ada rugi untuk belajar hal baru.

Membuat autocomplete dengan framework codeigniter + Source code

2 min read

Membuat autocomplete dengan framework codeigniter Source code min min

Kali ini saya akan membuat auto complete menggunakan framework codeigniter sederhana… Berikut tutorialnya…

1.Buat Databases dengan nama db_pos

CREATE TABLE IF NOT EXISTS `barang` (
  `kode` varchar(15) NOT NULL,
  `nama_barang` varchar(150) DEFAULT NULL,
  `harga` double DEFAULT NULL,
  `satuan` varchar(15) DEFAULT NULL,
  PRIMARY KEY (`kode`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `barang` (`kode`, `nama_barang`, `harga`, `satuan`) VALUES
('111', 'M-150 Botol', 5000, 'Pcs'),
('222', 'Nestle carnation kkm 388 gr', 5650, 'Pcs'),
('333', 'Dyna puding cocopandan110 g', 9200, 'Pcs'),
('444', 'Mr jelly anggur 15 gr', 3500, 'Pcs');

2.Buat Controller baru dengan nama Pos dan codingan seperti ini :

<?php
class Pos extends CI_Controller{
	function __construct(){
		parent::__construct();
		$this->load->model('m_pos');
	}
	function index(){
		$this->load->view('v_pos');
	}

	function get_barang(){
		$kode=$this->input->post('kode');
		$data=$this->m_pos->get_data_barang_bykode($kode);
		echo json_encode($data);
	}
}

3.Buat Model baru dengan nama M_Pos dan codingan seperti ini :

<?php
class M_pos extends CI_Model{

	function get_data_barang_bykode($kode){
		$hsl=$this->db->query("SELECT * FROM barang WHERE kode='$kode'");
		if($hsl->num_rows()>0){
			foreach ($hsl->result() as $data) {
				$hasil=array(
					'kode' => $data->kode,
					'nama_barang' => $data->nama_barang,
					'harga' => $data->harga,
					'satuan' => $data->satuan,
					);
			}
		}
		return $hasil;
	}

}

4.Buat View baru dengan nama v_Pos dan codingan seperti ini :

<!DOCTYPE html>
<html>
<head>
	<title>Point Of Sale</title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
	<div class="container">
		<div class="col-md-12 col-md-offset-1">
		<hr/>
			<form class="form-horizontal">
				<div class="form-group">
                    <label class="control-label col-xs-3" >Kode Barang</label>
                    <div class="col-xs-9">
                        <input name="kode" id="kode" class="form-control" type="text" placeholder="Kode Barang..." style="width:335px;">
                    </div>
                </div>
				<div class="form-group">
                    <label class="control-label col-xs-3" >Nama Barang</label>
                    <div class="col-xs-9">
                        <input name="nama" class="form-control" type="text" placeholder="Nama Barang..." style="width:335px;" readonly>
                    </div>
                </div>
				<div class="form-group">
                    <label class="control-label col-xs-3" >Harga</label>
                    <div class="col-xs-9">
                        <input name="harga" class="form-control" type="text" placeholder="Harga..." style="width:335px;" readonly>
                    </div>
                </div>
				<div class="form-group">
                    <label class="control-label col-xs-3" >Satuan</label>
                    <div class="col-xs-9">
                        <input name="satuan" class="form-control" type="text" placeholder="Satuan..." style="width:335px;" readonly>
                    </div>
                </div>
			</form>
		</div>
	</div>

	<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			 $('#kode').on('input',function(){
                
                var kode=$(this).val();
                $.ajax({
                    type : "POST",
                    url  : "<?php echo base_url('index.php/pos/get_barang')?>",
                    dataType : "JSON",
                    data : {kode: kode},
                    cache:false,
                    success: function(data){
                        $.each(data,function(kode, nama_barang, harga, satuan){
                            $('[name="nama"]').val(data.nama_barang);
                            $('[name="harga"]').val(data.harga);
                            $('[name="satuan"]').val(data.satuan);
                            
                        });
                        
                    }
                });
                return false;
           });

		});
	</script>
</body>
</html>

Note : Perlu diperhatikan jika tampilan kacau kamu perlu menambah asset boostrap dan jquery

Jika masih kebingungan saya juga memberi source code nya di link https://github.com/IDaldi/autocomplete-ci

Semoga Bermanfaat…

Aldi My Teacher is WWW. #Tidak ada rugi untuk belajar hal baru.

Leave a Reply

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