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…
