Halo sobat Source Code Aplikasi, pada postingan kali ini admin mau berbagi tentang Sistem Informasi Kasir yang semoga dapat berguna untuk sobat dalam belajar pembuatan aplikasi berbasis PHP. Source code aplikasi ini dapat sobat unduh secara free dan dijadikan referensi coding guna pembuatan program atau juga bisa dimanfaatkan inspirasi pembuatan tugas kuliah, atau bahkan bisa juga diterapkan langsung, namun harus tetap memperhatikan copyright developer pada aplikasinya.

Deskripsi Aplikasi

README.md

ETS-PBKK

Sistem informasi kasir

Membuat Database

https://github.com/sudrajadhadi/ETS-PBKK/blob/master/penjualan_db.sql link tersebut merupakan pengisian database untuk sistem informasi pencatatan transaksi pada kasir

Menghubungkan database https://github.com/sudrajadhadi/ETS-PBKK/blob/master/application/config/database.php

$db['default'] = array(
  'dsn'	=> '',
  'hostname' => $CI->config->item("database_host"),
  'username' => $CI->config->item("database_user"),
  'password' => $CI->config->item("database_pass"),
  'database' => $CI->config->item("database_name"),
  '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
);

hostname, username, dan password diubah sesuai dengan apa yang ada pada https://github.com/sudrajadhadi/ETS-PBKK/blob/master/application/config/config.php

$config['database_host']	= 'localhost';
$config['database_user']	= 'root';
$config['database_pass'] 	= '';
$config['database_name']	= 'penjualan_db';

host diisi dengan localhost karena menggunakan xampp
user diisi sesuai dengan setting database pada komputer masing masing
password diisi sesuai dengan setting database pada komputer masing masing
database_name diisi sesuai dengan nama database yang diintegrasikan

Membuat Halaman Login

https://github.com/sudrajadhadi/ETS-PBKK/blob/master/application/views/secure/login_page.php merupakan halaman login pada sistem informasi kasir

<?php 
echo form_input(array(
'name' => 'username', 
'class' => 'form-control', 
'autocomplete' => 'off', 
'autofocus' => 'autofocus'
)); 
?>

sytax tersebut merupakan perintah untuk mengirimkan username pengguna yang nantinya akan divalidasi

echo form_password(array(
'name' => 'password', 
'class' => 'form-control', 
'id' => 'InputPassword'
));

syntax tersebut merupakan perintah untuk mengirimkan password pengguna yang nantinya akan divalidasi

$('#FormLogin').submit(function(e){
  e.preventDefault();
  $.ajax({
  	url: $(this).attr('action'),
  	type: "POST",
  	cache: false,
  	data: $(this).serialize(),
  	dataType:'json',
  	success: function(json){
  		//response dari json_encode di controller

  		if(json.status == 1){ window.location.href = json.url_home; }
  		if(json.status == 0){ $('#ResponseInput').html(json.pesan); }
  		if(json.status == 2){
  			$('#ResponseInput').html(json.pesan);
  			$('#InputPassword').val('');
  		}
  	}
  });
 });

code diatas mengirimkan username dan password ke controller untuk divalidasi dan mendapatkan response dari json_encode yang nantinya akan ditentukan kemana website akan diredirect
```
$('#ResetData').click(function(){
$('#ResponseInput').html('');
});
```
untuk meriset input yang dimasukkan sebelumnya

Membuat Halaman Transaksi

merupakan gambar halaman utama untuk melakukan transaksi

mengambil tanggal dan waktu terkini untuk data tanggal transaksi

$('#tanggal').datetimepicker({
 lang:'en',
 timepicker:true,
 format:'Y-m-d H:i:s'
});

fungsi tersebut untuk menampilkan data pelanggan yang ada di pojok kiri bawah halaman utama transaksi dan menambah baris baru untuk transaksi yang melebihi jumlah input yang disediakan

$(document).ready(function(){

 for(B=1; B<=1; B++){
 	BarisBaru();
 }

 $('#id_pelanggan').change(function(){
 	if($(this).val() !== '')
 	{
 		$.ajax({
 			url: "<?php echo site_url('penjualan/ajax-pelanggan'); ?>",
 			type: "POST",
 			cache: false,
 			data: "id_pelanggan="+$(this).val(),
 			dataType:'json',
 			success: function(json){
 				$('#telp_pelanggan').html(json.telp);
 				$('#alamat_pelanggan').html(json.alamat);
 				$('#info_tambahan_pelanggan').html(json.info_tambahan);
 			}
 		});
 	}
 	else
 	{
 		$('#telp_pelanggan').html('<small><i>Tidak ada</i></small>');
 		$('#alamat_pelanggan').html('<small><i>Tidak ada</i></small>');
 		$('#info_tambahan_pelanggan').html('<small><i>Tidak ada</i></small>');
 	}
 });

 $('#BarisBaru').click(function(){
 	BarisBaru();
 });

 $("#TabelTransaksi tbody").find('input[type=text],textarea,select').filter(':visible:first').focus();
});

fungsi tersebut digunakan untuk menampilkan field yang berguna untuk menambahkan kolom pada halaman transaksi setelah itu memanggil fungsi HitungTotalBayar()

function BarisBaru()
{
 var Nomor = $('#TabelTransaksi tbody tr').length + 1;
 var Baris = "<tr>";
 	Baris += "<td>"+Nomor+"</td>";
 	Baris += "<td>";
 		Baris += "<input type='text' class='form-control' name='kode_barang[]' id='pencarian_kode' placeholder='Ketik Kode / Nama Barang'>";
 		Baris += "<div id='hasil_pencarian'></div>";
 	Baris += "</td>";
 	Baris += "<td></td>";
 	Baris += "<td>";
 		Baris += "<input type='hidden' name='harga_satuan[]'>";
 		Baris += "<span></span>";
 	Baris += "</td>";
 	Baris += "<td><input type='text' class='form-control' id='jumlah_beli' name='jumlah_beli[]' onkeypress='return check_int(event)' disabled></td>";
 	Baris += "<td>";
 		Baris += "<input type='hidden' name='sub_total[]'>";
 		Baris += "<span></span>";
 	Baris += "</td>";
 	Baris += "<td><button class='btn btn-default' id='HapusBaris'><i class='fa fa-times' style='color:red;'></i></button></td>";
 	Baris += "</tr>";

 $('#TabelTransaksi tbody').append(Baris);

 $('#TabelTransaksi tbody tr').each(function(){
 	$(this).find('td:nth-child(2) input').focus();
 });

 HitungTotalBayar();
 }

fungsi tersebut digunakan untuk menghapus input transaksi dan memanggil fungsi HitungTotalBayar()

$(document).on('click', '#HapusBaris', function(e){
 e.preventDefault();
 $(this).parent().parent().remove();

 var Nomor = 1;
 $('#TabelTransaksi tbody tr').each(function(){
 	$(this).find('td:nth-child(1)').html(Nomor);
 	Nomor++;
 });

 HitungTotalBayar();
});

fungsi yang digunakan untuk melakukan auto complete berdasarkan kode barang dan nama barang pada saat pengisian field transaksi dan memanggil fungsi HitungTotalBayar();

function AutoCompleteGue(Lebar, KataKunci, Indexnya)
{
 $('div#hasil_pencarian').hide();
 var Lebar = Lebar + 25;

 var Registered = '';
 $('#TabelTransaksi tbody tr').each(function(){
 	if(Indexnya !== $(this).index())
 	{
 		if($(this).find('td:nth-child(2) input').val() !== '')
 		{
 			Registered += $(this).find('td:nth-child(2) input').val() + ',';
 		}
 	}
 });

 if(Registered !== ''){
 	Registered = Registered.replace(/,\s*$/,"");
 }

 $.ajax({
 	url: "<?php echo site_url('penjualan/ajax-kode'); ?>",
 	type: "POST",
 	cache: false,
 	data:'keyword=' + KataKunci + '&registered=' + Registered,
 	dataType:'json',
 	success: function(json){
 		if(json.status == 1)
 		{
 			$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(2)').find('div#hasil_pencarian').css({ 'width' : Lebar+'px' });
 			$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(2)').find('div#hasil_pencarian').show('fast');
 			$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(2)').find('div#hasil_pencarian').html(json.datanya);
 		}
 		if(json.status == 0)
 		{
 			$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(3)').html('');
 			$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(4) input').val('');
 			$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(4) span').html('');
 			$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(5) input').prop('disabled', true).val('');
 			$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(6) input').val(0);
 			$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(6) span').html('');
 		}
 	}
 });

 HitungTotalBayar();
 }

fungsi untuk menampilkan daftar barang yang disarankan untuk auto complete

$(document).on('click', '#daftar-autocomplete li', function(){
 $(this).parent().parent().parent().find('input').val($(this).find('span#kodenya').html());
 
 var Indexnya = $(this).parent().parent().parent().parent().index();
 var NamaBarang = $(this).find('span#barangnya').html();
 var Harganya = $(this).find('span#harganya').html();

 $('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(2)').find('div#hasil_pencarian').hide();
 $('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(3)').html(NamaBarang);
 $('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(4) input').val(Harganya);
 $('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(4) span').html(to_rupiah(Harganya));
 $('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(5) input').removeAttr('disabled').val(1);
 $('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(6) input').val(Harganya);
 $('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(6) span').html(to_rupiah(Harganya));

 var IndexIni = Indexnya + 1;
 var TotalIndex = $('#TabelTransaksi tbody tr').length;
 if(IndexIni == TotalIndex){
 	BarisBaru();
 	$('html, body').animate({ scrollTop: $(document).height() }, 0);
 }
 else {
 	$('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(5) input').focus();
 }

 HitungTotalBayar();
});

digunakan untuk mengecek apakah stock tersedia atau tidak pada database

$(document).on('keyup', '#jumlah_beli', function(){
 var Indexnya = $(this).parent().parent().index();
 var Harga = $('#TabelTransaksi tbody tr:eq('+Indexnya+') td:nth-child(4) input').val();
 var JumlahBeli =

Sistem Informasi Kasir