Desain Halaman Transaksi Penjualan (POS) Menggunakan Admin LTE

Desain Form Transaksi

Berikut adalah halaman yang akan kita desain : 

Desain Halaman Transaksi Penjualan (POS) Menggunakan Admin LTE

Buatlah sebuah file baru dengan nama index.php pada folder kemudian simpan file teresbut pada lokasi folder berikut : admin-module-jual-index.php. masukan script berikut pada file tersebut :
 <div class="content-wrapper">
 	<!-- Content Header (Page header) -->
 	<section class="content-header">
 		<div class="container-fluid">
 			<div class="col-sm-12">
 				<?php if (isset($_GET['success'])) { ?>
 					<div class="alert alert-success">
 						<p>Tambah Data Berhasil !</p>
 					</div>
 				<?php } ?>
 				<?php if (isset($_GET['remove'])) { ?>
 					<div class="alert alert-danger">
 						<p>Hapus Data Berhasil !</p>
 					</div>
 				<?php } ?>
 			</div>
 			<div class="row mb-2">
 				<div class="col-sm-6">
 					<h1>No Transaksi : <?= $lihat->notransaksi() ?></h1>
 				</div>
 				<div class="col-sm-6">
 					<ol class="breadcrumb float-sm-right">
 						<li class="breadcrumb-item"><a href="#">Home</a></li>
 						<li class="breadcrumb-item active">Transaksi</li>
 					</ol>
 				</div>
 			</div>
 		</div><!-- /.container-fluid -->
 	</section>
 	<section class="content">
 		<div class="container-fluid">
 			<div class="row">
 				<div class="col-sm-4">
 					<div class="card card-primary mb-3">
 						<div class="card-header bg-primary text-white">
 							<h5><i class="fa fa-search"></i> Cari Barang</h5>
 						</div>
 						<div class="card-body">
 							<input type="text" id="cari" class="form-control" name="cari" placeholder="Masukan : Kode / Nama Barang  [ENTER]">
 						</div>
 					</div>
 				</div>
 				<div class="col-sm-8">
 					<div class="card card-primary mb-3">
 						<div class="card-header bg-primary text-white">
 							<h5><i class="fa fa-list"></i> Hasil Pencarian</h5>
 						</div>
 						<div class="card-body">
 							<div class="table-responsive">
 								<div id="hasil_cari"></div>
 								<div id="tunggu"></div>
 							</div>
 						</div>
 					</div>
 				</div>
 				<div class="col-sm-12">
 					<div class="card card-primary">
 						<div class="card-header bg-primary text-white">
 							<h5><i class="fa fa-shopping-cart"></i> KASIR
 								<a class="btn btn-danger float-right" onclick="javascript:return confirm('Apakah anda ingin reset keranjang ?');" href="fungsi/hapus/hapus.php?penjualan=jual">
 									<b>RESET KERANJANG</b></a>
 							</h5>
 						</div>
 						<div class="card-body">
 							<div id="keranjang" class="table-responsive">
 								<table class="table table-bordered">
 									<tr>
 										<td><b>Tanggal</b></td>
 										<td><input type="text" readonly="readonly" class="form-control" value="<?php echo date("j F Y, G:i"); ?>" name="tgl"></td>
 									</tr>
 								</table>
 								<!-- //xxxxxxxxxxxxxxxxxxxxxxxxxxx -->
 								<table class="table table-bordered w-100" id="example1">
 									<thead>
 										<tr>
 											<td> No</td>
 											<td> Nama Barang</td>
 											<td style="width:10%;"> Jumlah</td>
 											<td style="width:20%;"> Total</td>

 											<td> Aksi</td>
 										</tr>
 									</thead>
 									<tbody>
 										<?php $total_bayar = 0;
											$no = 1;
											$hasil_penjualan = $lihat->penjualan(); ?>
 										<?php foreach ($hasil_penjualan  as $isi) { ?>
 											<tr>
 												<td><?php echo $no; ?></td>
 												<td><?php echo $isi['nama_barang']; ?></td>
 												<td>
 													<!-- aksi ke table penjualan -->
 													<form method="POST" action="fungsi/edit/edit.php?jual=jual">
 														<input type="number" name="jumlah" value="<?php echo $isi['jumlah']; ?>" class="form-control">
 														<input type="hidden" name="id" value="<?php echo $isi['id_penjualan_detail']; ?>" class="form-control">
 														<input type="hidden" name="id_barang" value="<?php echo $isi['id_barang']; ?>" class="form-control">
 												</td>
 												<td>Rp.<?php echo number_format($isi['total']); ?>,-</td>
 												<td>
 													<button type="submit" class="btn btn-warning">Update</button>
 													</form>
 													<!-- aksi ke table penjualan -->
 													<a href="fungsi/hapus/hapus.php?jual=jual&id_penjualan=<?php echo $isi['id_penjualan'] ?>" class="btn btn-danger"><i class="fa fa-times"></i>
 													</a>
 												</td>
 											</tr>
 										<?php $no++;
												$total_bayar += $isi['total'];
											} ?>
 									</tbody>
 								</table>
 								<br />
 								<?php $hasil = $lihat->jumlah(); ?>
 								<div id="kasirnya">
 									<table class="table table-stripped">
 										<?php
											// proses bayar dan ke nota
											if (!empty($_GET['nota'] == 'yes')) {
												$total = $_POST['total'];
												$bayar = $_POST['bayar'];

												if (!empty($bayar)) {
													$hitung = $bayar - $total;

													if ($bayar >= $total) {

														$id_barang = $_POST['id_barang'];
														$jumlah = $_POST['jumlah'];
														$total = $_POST['total1'];
														$tgl_input = $_POST['tgl_input'];
														$periode = $_POST['periode'];
														$jumlah_dipilih = count($id_barang);

														for ($x = 0; $x < $jumlah_dipilih; $x++) {
															$sql_barang = "SELECT * FROM barang WHERE id_barang = ?";
															$row_barang = $config->prepare($sql_barang);
															$row_barang->execute(array($id_barang[$x]));
															$hsl = $row_barang->fetch();

															$stok = $hsl['stok'];
															$idb  = $hsl['id_barang'];

															$total_stok = $stok - $jumlah[$x];

															// echo $total_stok;
															$sql_stok = "UPDATE barang SET stok = ? WHERE id_barang = ?";
															$row_stok = $config->prepare($sql_stok);
															$row_stok->execute(array($total_stok, $idb));
														}

														//bayar
														$sql_bayar = "UPDATE penjualan_master SET bayar = ?,kembali=?,`status`=? WHERE id_penjualan_master = ?";
														$row_stok = $config->prepare($sql_bayar);
														$jmlbayar[] = $bayar;
														$jmlbayar[] = $hitung;
														$jmlbayar[] = 1;
														$jmlbayar[] = $_SESSION['notransaksi'];
														$row_stok->execute($jmlbayar);
														$_SESSION['notransaksi'] = "";
														//endbayar

														echo '<script>alert("Belanjaan Berhasil Di Bayar");window.location="index.php?page=jual"</script>';
													} else {
														echo '<script>alert("Uang Kurang ! Rp.' . $hitung . '");</script>';
													}
												}
											}
											?>
 										<!-- aksi ke table nota -->
 										<form method="POST" action="index.php?page=jual&nota=yes#kasirnya">
 											<?php foreach ($hasil_penjualan as $isi) {; ?>
 												<input type="hidden" name="id_barang[]" value="<?php echo $isi['id_barang']; ?>">
 												<input type="hidden" name="jumlah[]" value="<?php echo $isi['jumlah']; ?>">
 												<input type="hidden" name="total1[]" value="<?php echo $isi['total']; ?>">
 												<input type="hidden" name="tgl_input[]" value="<?php echo $isi['tanggal_input']; ?>">
 												<input type="hidden" name="periode[]" value="<?php echo date('m-Y'); ?>">
 											<?php $no++;
												} ?>
 											<tr>
 												<td>Total Semua </td>
 												<td><input type="text" class="form-control" name="total" value="<?php echo $total_bayar; ?>"></td>

 												<td>Bayar </td>
 												<td><input type="text" class="form-control" name="bayar" value="<?php echo $bayar; ?>"></td>
 												<td><button class="btn btn-success"><i class="fa fa-shopping-cart"></i> Bayar</button></td>

 											</tr>
 										</form>
 										<!-- aksi ke table nota -->
 										<tr>
 											<td>Kembali</td>
 											<td><input type="text" class="form-control" value="<?php echo $hitung; ?>"></td>
 										</tr>
 									</table>
 									<br />
 									<br />
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</section>
 </div>

Langkah-Langkah melakukan Transaksi

  • Buka halaman transaksi pada menu Transaksi-Penjualan pada sidebar.
  • ketika halaman transaksi terbuka akan muncul sebuah notransaksi baru yang akan digunakan untuk melakukan penjualan
  • pada halaman cari barang, kita dapat memasukan kode atau nama barang yang akan dijual.
  • barang yang muncul bisa saja lebih  dari satu tergantung seleksi yang digunakan. jika barang sudah muncul anda dapat memilihnya dengan menekan tombol keranjang.
  • selanjutnya kita dapat mengubah jumlah barang yang akan dijual kemudian tekan tombol update. dengan mengganti angka jumlah barang, secara default jumlah barang adalah satu.
  • untuk melakukan pembayaran, masukan terlebih dulu jumlah uang yang dibayar kemudian tekan tombol bayar.
  • ketika ditekan tombol bayar maka data akan tersimpan kedatabase, data yang udah tersimpan dapat digunakan untuk kebutuhan seperti pembuatan nota ataupun laporan penjualan dikemudian hari.

Posting Komentar untuk "Desain Halaman Transaksi Penjualan (POS) Menggunakan Admin LTE"