Aplikasi berbasis web memang berbeda dengan aplikasi berbasis Desktop. Aplikasi Desktop tidak memerlukan reload page untuk mengirim ataupun menerima request, sedangkan aplikasi berbasis web memerlukan reload page untuk mengirim dan menerima request. Hal ini, tentu saja menyulitkan developer web dalam membuat aplikasi yang memerlukan request dan respon tanpa reload page.
Pada kesempatan kali ini saya ingin sharing tentang bagaimana menampilkan field ke textbox (input text) berdasarkan kode dengan ajax. Apa itu AJAX?. Ajax atau Asynchronous Javascript And XML merupakan sebuah metode yang digunakan untuk berkomunikasi dari client ke server menggunakan javascript. AJAX memungkinkan client mengirimkan request ke server dan server akan memberikan respon dengan cepat. Request dan Respon dilakukan tanpa reload page sehingga users bahkan tidak mengetahui apa yang terjadi.
Sesuai dengan judulnya, disini saya akan menggunakan framework PHP yaitu Codeigniter sebagai framework utama, selain itu saya juga menggunakan JQuery dan BOOTSTRAP.
Untuk mendownload file yang disebutkan diatas, silahkan download di official websitenya sebagai berikut:
www.codeigniter.com (Codeigniter)
www.jquery.com (JQuery)
www.getbootstrap.com (BOOTSTRAP)
Pada kasus kali ini, saya ingin menampilkan nama barang, harga, serta satuan berdasarkan kode barang atau kode barcode. Dimana disaat kode barang / barcode di input maka akan tampil nama barang, harga, dan satuan pada textbox(input text) yang berhubungan. Hal ini sangat bermanfaat bagi Anda yang ingin membuat aplikasi POS (Point Of Sale) berbasis web.
Aplikasi POS yang selama ini dibuat menggunakan Desktop aplikasi, sekarang bisa dibuat menggunakan Web. Saya dan team telah mengimplementasikan aplikasi POS di 3 minimarket dikota Bengkulu yang buat menggunakan web. Banyak keuntungan yang kita dapatkan jika membuat aplikasi POS menggunakan web. diantaranya yaitu:
Kecepatan, aplikasi web memungkinkan meload data yang sangat banyak dengan cepat, dikarenakan data dilimit menggunakan pagination.
Mudah diupgrade/customize , jika ada penambahan modul sistem, hanya diupgrade di sisi server tanpa mengupgrade di sisi client. Bahkan dapat dilakukan tanpa menghentikan proses transaksi.
Kemudahan dalam penambahan Kasir, jika ada kebutuhan kasir tambahan, tidak perlu menginstall aplikasi di komputer kasir. Cukup daftarkan akun untuk kasir, buka browser di sisi kasir, kemudian kasir langsung bisa digunakan.
Dan masih banyak lagi keuntungan lainnya.
Ok, sekarang kita masuk ke pembahasan, seperti yang telah dipaparkan diatas, bahwasanya saya akan sharing tentang bagaimana menampilkan nama barang, harga, dan satuan berdasarkan kode barang.
Ok, tanpa basa-basi lagi silahkan ikuti langkah berikut:
1. Buat database dan tabel dengan mengeksekusi query berikut:
CREATE DATABASE db_pos; USE db_pos; CREATE TABLE barang( kode VARCHAR(15) PRIMARY KEY, nama_barang VARCHAR(150), harga DOUBLE, satuan VARCHAR(15) )ENGINE INNODB;
2. Input beberapa data dengan mengeksekusi query berikut:
INSERT INTO barang(kode,nama_barang,harga,satuan) VALUES
('8997022850060','Mr jelly anggur 15 gr',3500,'Pcs'),
('8997020580068','Dyna puding cocopandan110 g',9200,'Pcs'),
('8851123212038','M-150 Botol',5000,'Pcs'),
('8992696402386','Nestle carnation kkm 388 gr',5650,'Pcs');
3. Instalasi Codeigniter
Extract codeigniter ke folder webserver anda. Extract ke folder www jika anda menggunakan wampserver, extract ke folder htdocs jika anda menggunakan xampp.
Setelah di-extract, rename (ganti nama) menjadi ci_pos. Kemudian lakukan konfigurasi berikut:
Buka application/config/autoload.php atur menjadi seperti berikut:
$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');
Buka application/config/config.php dan atur menjadi seperti berikut:
$config['base_url'] = 'http://localhost/ci_pos/';
Terakhir buka application/config/database.php
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'db_pos',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
4. Buat folder dengan nama assets sejajar dengan folder application dan system. Kemudian buat folder css dan js kedalam folder assets, kemudian masukan file boostrap.css kedalam folder css dan file jquery.js kedalam folder js. Sehingga terlihat struktur folder kita seperti berikut:
application
assets
css
bootstrap.css
js
jquery.js
system
5. Buat controller dengan nama Pos.php dengan kode sebagai berikut:
<?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);
}
}
6. Buat model dengan nama M_pos dengan kode sebagai berikut:
<?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;
}
}
7. Buat view dengan nama v_pos.php dengan kode sebagai berikut:
<!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>
8. Kunjungi URL berikut untuk menjalankan aplikasi yang telah dibuat:
http://localhost/ci_pos/index.php/pos
Kemudian masukkan salah satu kode barang yang ada di database ke textbox kode barang, maka akan tampil nama barang, harga, dan satuan.
Ok, sampai disini dulu tutorial kali ini. Jika tutorial ini bermanfaat untuk Anda, silahkan bantu share. Siapa tau tutorial ini dibutuhkan juga oleh teman Anda.
(1) Komentar