SHARE MEMBUAT APLIKASI POS (POINT OF SALE) ; [PHP]

RayMantic · 13 Sep 2018

[HIDE]

POINT OF SALE
[/HIDE]

[HIDE]

sistem POS dalam bisnis cukup membantu dalam transaksi jual-beli karena dapat membantu menangani pengolahan transaksi pembelian, penjualan, laporan transaksi dan lain sebagainya. Saat ini sistem POS terus dikembangkan menjadi lebih moderen. Dahulu penyimpanan data pada sistem POS hanya disimpan pada Komputer lokal namun saat ini data dapat disimpan pada server melalui jaringan internet. Data yang tersimpan pada server dapat diakses kapan saja dan dimana saja asalkan terdapat koneksi jaringan internet. Untuk membuat sistem POS memang tidak mudah karena banyak hal yang perlu dibuat, seperti: input-output data transaksi, back office, barcode scanner dan lain sebagainya.

1. Membuat file PHP
source HTML & PHP

Code:

<html>
<head>
<title> POS by Ozynx</title>
 <script type="text/javascript" src="jquery-1.11.2.js"></script>
 <link rel="stylesheet" href="style.css" />
</head>
<body>
 <div class="body">
  <div class="header">
   <div class="menu_header">
    <ul>
<li><a href="#">Home</a></li>
<li><a href="#">POS</a></li>
<li><a href="#">Back Office</a></li>
<li><a href="#">Maintenance</a></li>
<li><a href="#">Service</a></li>
</ul>
</div>
</div>
<div class="main_content">
   <div class="badan_content">

    <div class="panel_belanja">
     <div class="panel_search">
      <input class="element_panel_search"type="text" value="Barcode Scanner" onfocus="if (this.value == 'Barcode Scanner') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Barcode Scanner';}" />
     </div>
<div class="judul_panel_belanja">
      <div class="element_judul_x">
X</div>
<div class="element_judul_product">
Product</div>
<div class="element_judul_qty">
Qty</div>
<div class="element_judul_price">
Price</div>
</div>
<div class="list_panel_belanja" id="list_panel_belanja">
 
     </div>
<div class="total_item_list_belanja">
        <div class="element_list_qty">
Total Item </div>
<div class="hasil_item_list_belanja" id="hasil_item_list_belanja">
</div>
</div>
<div class="total_price_list_belanja">
        <div class="element_list_price">
Total Belanja </div>
<div class="hasil_price_list_belanja" id="hasil_price_list_belanja">
Rp. 0,-</div>
</div>
<div class="total_discount_list_belanja">
        <div class="element_list_discount">
Total discount (10%)</div>
<div class="hasil_discount_list_belanja" id="hasil_discount_list_belanja">
Rp. 0,-</div>
</div>
<div class="total_tagihan_list_belanja">
        <div class="element_list_tagihan">
Total tagihan </div>
<div class="hasil_tagihan_list_belanja" id="hasil_tagihan_list_belanja">
Rp. 0,-</div>
</div>
</div>
<div class="panel_barang">
    <div class="menu_content">
Jenis Barang</div>
<div class="panel_jenis_barang">
      <ul>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Roti</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Sabun</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Shampo</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Sikat Gigi</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Minyak</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Kopi</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Gula</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Susu</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Teh</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Sirup</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Snack</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Garam</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Kecap</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Saos</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Mentega</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Kerupuk</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Air Mineral</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Sosis</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Telur</a></li>
<li><a href="#" onClick="Masukkan_Item(this.innerHTML);">Cuka</a></li>
</ul>
</div>
</div>
</div>
<div class="menu_content2">
    <div class="panel_menu_conten2_pembayaran">
     <div class="menu_content2_pembayaran">
       <ul>
      <a href="#">Cancel</a>
      <a href="#">Hold</a>
      <a href="#">Payment</a>
       </ul>
</div>
</div>
<div class="panel_menu_daftar_barang">
     <div class="menu_content2_daftar_barang">
       <ul>
      <a href="#"><</a>
      <a href="#">></a>
       </ul>
</div>
</div>
</div>
</div>
<div class="footer">
     <p>
Copyright ©  2018 by.Ozynx. All rights reserved.</p>
</div>
</div>
<script language="javascript" type="text/javascript">
var jumlah_item = 0;
var total_belanja = 0;
var total_tagihan = 0;
var total_discount = 0;
var discount = "10%";
var id_item = 0;


function Masukkan_Item(nama_item)
{
 var harga = 15000;
 var qty = 1;

 $("#list_panel_belanja").append('<div class="list_panel_pilihan_barang" id="list_panel_pilihan_barang_' + id_item + '">
<div class="element_judul_x" >
<div class="element_pilihan_barang_x" >
<div onClick="Menghapus('+ id_item +');">
<img src=images/remove.png/></div>
</div>
</div>
<div class="element_judul_product">
<div class="element_pilihan_barang_product">
' + nama_item + '</div>
</div>
<div class="element_judul_qty">
 <div class="element_pilihan_barang_qty">
' + qty + '</div>
</div>
<div class="element_judul_price">
 <div class="element_pilihan_barang_price">
' + harga + '</div>
</div>
</div>
');
 id_item++;


 Hitung_Item(1);
 Hitung_Belanjaan(harga);
 Hitung_Discount();
 Hitung_Tagihan();
}
function Hitung_Item(tambah)
{
 jumlah_item += tambah;
 document.getElementById('hasil_item_list_belanja').innerHTML = "" + jumlah_item.toString() + " ";

}
function Hitung_Belanjaan(tambahan)
{
 total_belanja += tambahan;
 document.getElementById('hasil_price_list_belanja').innerHTML = "Rp. " + total_belanja.toString() + ",-";

}
function Hitung_Tagihan()
{
 var total;
 
 total = total_belanja - total_discount;
 document.getElementById('hasil_tagihan_list_belanja').innerHTML = "Rp. " + total.toString() + ",-";

}
function Hitung_Discount()
{
 var percent_check;
 var disc;

 percent_check = discount.substr(discount.length - 1, 1);

 if (percent_check == "%")
 {
  disc = discount.substr(0, discount.length - 1);
  disc = parseInt(disc);
  if (isNaN(disc))
  {
   disc = 0;
  }
  total_discount = total_belanja * disc / 100;
 }
 else
 {
  total_discount = parseInt(discount);
  if (isNaN(total_discount))
  {
   total_discount = 0;
  }
 }

 document.getElementById('hasil_discount_list_belanja').innerHTML = "Rp. " + total_discount.toString() + ",-";
}

function Menghapus(id)
{


 var element = document.getElementById("list_panel_pilihan_barang_" + id);
 element.parentNode.removeChild(element);
}

</script>
</body>
</html>

2. Desain tampilan
source CSS

Code:

/* bagian body */
  body
   {
    background-image: url('images/body.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    width:  1360px;
    margin-top: -10px;
    margin-left: -10px;
 
   }
/* end bagian body */

/* bagian header */
  .header
   {
    background-image: url('images/header.png');
    position: relative;
    width:  1600px;
    height: 70px;
    text-align: center;
    overflow: hidden;
   }
/* end header */

/* bagian Menu header */

  .menu_header
   {
    width: 760px;
    height: 80px;
    margin: 0 595px;
    background: rgba(40, 144, 207, 0);
   }

  .menu_header ul
   {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
   }

  .menu_header li
   {
    display: inline;
    margin: 0;
    padding: 0;
   }

  .menu_header a
   {
    display: block;
    float: left;
    width: 125px;
    height: 50px;
    padding-top: 27px;
    background: #A8D7F8 url(images/img02.gif) no-repeat;
    border-left: 1px solid #1777B1;
    font-family: arial;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
    color: #1777B1;
   }

  .menu_header a:hover
   {
    background: #FF9009 url(images/img03.gif) no-repeat;
    color: #005826;
   }
/* end menu header */

/* bagian content*/
  .main_content
   {
      background-color:rgba(133, 157, 242, 0.22);
      margin: 0px 10px 0 135px;
      width: 1100px;
      height: 580px;
 
   }
/* end bagian content*/

/* bagian menu content*/
  .menu_content
   {
      background: #E9E9E9 ;
      position: relative;
      margin-top: 10px;
      width: 690px;
     height: 50px;
      box-shadow: 1px 1px 1px #888;
     float: left;
     margin-left: 13px;
     margin-bottom: 10px;
     text-align: center;
     padding-top: 10px;
         font-size: 30px;
 
 
 
   }

/*end menu content*/

/*badan content*/
 
/*end badan content*/

/* panel search*/
  .panel_search
   {
    font-size: 18px;
    font-family: arial;
    font-weight: bold;
    background-color: rgba(47, 225, 44, 0.3);
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    text-align: center;
    width: 320px;
    height: 23px;
   }
  .element_panel_search
   {
    font-size: 15px;
    font-family: arial;
    font-weight: normal;
    text-align: left;
    color: rgba(5, 1, 1, 0.24);
    width: 310px;
    height: 22px;
   }
/* end panel search*/


/* begian panel belenja */
  .panel_belanja
   {
    display:inline-block;
    background-color: #F2F3F1;
    margin: 10px 10px 10px 10px;
    width: 340px;
    height: 450px;
    box-shadow: 5px 5px 5px #888888;
    font-size: 18px;
    font-family: arial;
    font-weight: bold;
    float: left;
   }
  .judul_panel_belanja
   {
    font-size: 18px;
    font-family: arial;
    font-weight: bold;
    background-color: rgba(47, 225, 44, 0.3);
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    text-align: left;
    width: 320px;
    height: 23px;
   }
 
  .element_judul_x
   {
    display: inline-block;
    width: 20px;
    text-align: center;
   }
 
  .element_judul_product
   {
    display: inline-block;
    width: 140px;
    text-align: left;
   }
 
 
  .element_judul_qty
   {
    display: inline-block;
    width: 60px;
    text-align: center;
   }

  .element_judul_price
   {
    display: inline-block;
    width: 50px;
    text-align: right;
   }
 
 
  .list_panel_belanja
   {
    height: 250px;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
   }
 
  .list_panel_pilihan_barang
   {
    font-size: 12px;
    font-family: arial;
    font-weight: normal;
    margin: 5px 5px 5px 5px;
    background-color: rgba(135, 196, 225, 0.3);
    text-align: left;
    float: left;
    width: 320px;
    height: 20px;
   }
 
  /*bagian menghitung item*/
  .total_item_list_belanja
   {
    font-size: 18px;
    font-family: arial;
    font-weight: bold;
    background-color: rgba(47, 225, 44, 0.3);
    text-align: left;
    float: left;
    width: 330px;
    height: 25px;
    margin: 1px 5px 0px 5px;
    box-shadow: 0px 0px 1px 0px #888888;
   }
 
 
  .element_list_qty
   {
    display: inline-block;
    width: auto;
    text-align: left;
   }
  .hasil_item_list_belanja
   {
    display: inline-block;
    width: auto;
    text-align: left;
   }
  /*end bagian menghitung item*/
 
  /*bagian menghitung price*/
  .total_price_list_belanja
   {
    font-size: 18px;
    font-family: arial;
    font-weight: bold;
    background-color: rgba(47, 225, 44, 0.3);
    text-align: left;
    float: left;
    width: 330px;
    height: 25px;
    margin: 1px 5px 0px 5px;
    box-shadow: 0px 0px 1px 0px #888888;
   }
 
 
  .element_list_price
   {
    display: inline-block;
    width: auto;
    text-align: left;
   }
  .hasil_price_list_belanja
   {
    display: inline-block;
    width: auto;
    text-align: left;
   }
  /*end bagian menghitung price*/
 
 
  /*bagian menghitung discount*/
  .total_discount_list_belanja
   {
    font-size: 18px;
    font-family: arial;
    font-weight: bold;
    background-color: rgba(47, 225, 44, 0.3);
    text-align: left;
    float: left;
    width: 330px;
    height: 25px;
    margin: 1px 5px 0px 5px;
    box-shadow: 0px 0px 1px 0px #888888;
   }
 
 
  .element_list_discount
   {
    display: inline-block;
    width: auto;
    text-align: left;
   }
  .hasil_discount_list_belanja
   {
    display: inline-block;
    width: auto;
    text-align: left;
   }
  /*end bagian menghitung discount*/
 
  /*bagian menghitung belanja*/
  .total_tagihan_list_belanja
   {
    font-size: 18px;
    font-family: arial;
    font-weight: bold;
    background-color: rgba(44, 104, 225, 0.3);
    text-align: left;
    float: left;
    width: 330px;
    height: 25px;
    margin: 1px 5px 0px 5px;
    box-shadow: 0px 0px 1px 0px #888888;
   }
 
 
  .element_list_tagihan
   {
    display: inline-block;
    width: auto;
    text-align: left;
   }
  .hasil_tagihan_list_belanja
   {
    display: inline-block;
    width: auto;
    text-align: left;
   }
  /*end bagian menghitung belanja*/
 
 
  .element_pilihan_barang_x
   {
    display: inline-block;
    width: 30px;
    text-align: left;
   }
 
  .element_pilihan_barang_product
   {
    display: inline-block;
    width: 170px;
    text-align: left;
   }
 
 
  .element_pilihan_barang_qty
   {
    display: inline-block;
    width: 90px;
    text-align: center;
   }

  .element_pilihan_barang_price
   {
    display: inline-block;
    width: 50px;
    text-align: right;
   }
/*end panel belanja*/

/*bagian panel barang*/
  .panel_barang
   {
    display:inline-block;
    background-color: #F2F3F1;
    margin: 10px 10px 10px 0px;
    width: 720px;
    height: 450px;
    box-shadow: 5px 5px 5px #888888;
    font-size: 18px;
    font-family: arial;
    font-weight: bold;
    float: right;
   }
  .panel_jenis_barang
   {
    width: 680px;
    height: 390px;
    margin: 15px;
    padding: 5px 5px 5px 5px;
 
   }

  .panel_jenis_barang ul
   {
    margin: 0;
    padding:5px 5px 5px 20px;
    list-style: none;
    line-height: normal;
   }

  .panel_jenis_barang li
   {
    display: inline;
    margin: 0;
    padding: 0;
   }

  .panel_jenis_barang a
   {
    display: block;
    float: left;
    width: 125px;
    height: 55px;
    padding-top: 27px;
    background: url(images/img04.gif) no-repeat;
    margin: 2px;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
    color: #000;
   }

  .panel_jenis_barang a:hover
   {
    background:  url(images/jenis_barang.gif) no-repeat;
    color: #FF6706;
   }
/*end bagian panel barang*/

/* begian menu content2 pembayaran */
  .menu_content2
   {
    display:-moz-box;
    position: relative;
    width: 100%;
    height: 70px;
 
   }
  .panel_menu_conten2_pembayaran
   {
    display:inline-block;
    background-color: #F2F3F1;
    margin: 10px 10px 10px 10px;
    width: 340px;
    box-shadow: 5px 5px 5px #888888;
    float: left;
   }
 
  .menu_content2_pembayaran a
   {
    float: left;
    width: 80px;
    height: 38px;
    margin: 1px 5px 11px 0px ;
    padding: 10px 2px 2px 2px;
    background: url(images/pembayarn.gif) no-repeat;
    font-family: arial;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    box-shadow: 1px 1px 1px 1px #888888;
   }

  .menu_content2_pembayaran a:hover
   {
    background:url(images/pembayaran2.gif) no-repeat;
    color: #005826;
   }

/* end menu content2 pembayaran */

/* begian menu content2 daftar barang */
  .panel_menu_daftar_barang
   {
    display:inline-block;
    background-color: #F2F3F1;
    margin: 10px 10px 10px 10px;
    width: 720px;
    box-shadow: 5px 5px 5px #888888;
    float: left;
   }
  .menu_content2_daftar_barang a
   {
    float: left;
    width: 80px;
    height: 38px;
    margin: 1px 100px 11px 130px ;
    padding: 10px 2px 2px 2px;
    background: url(images/pembayarn.gif) no-repeat;
    font-family: arial;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    color: #black;
    box-shadow: 1px 1px 1px 1px #888888;
   }

  .menu_content2_daftar_barang a:hover
   {
    background:url(images/pembayaran2.gif) no-repeat;
    color: #005826;
   }

/* end menu content2 daftar barang*/

/* bagian footer */

 .footer
  {
   background-image: url('images/header.png');
   position: absolute;
   width: 1600px;
   height: 50px;
   padding-top: 5px auto;
   text-align: center;
   font-family: arial;
   font-size: 16px;
   color: #000;
  }
/* end footer */

VIDEO DEMO

[/HIDE]

SELESAI GAN

hulu · 28 Sep 2018

Makasih gan. Lumayan buat tugas kuliah ganti dikit boleh kan gan?

RayMantic · 28 Sep 2018

Gpp hu . bisa share hasil jadinya suhu..
Semoga cepet lulus ya..

yang-kemarin · 12 Oct 2018

Terima kasih suhu
sangat berfaedah

RayMantic · 12 Oct 2018

Mohon di share suhu yg sdh jadi siapa tahu ada penambahan fitur viar bs buat tambahan refrensi ..

beachcats · 12 Oct 2018

Newbie mohon ijin belajar suhu....

RayMantic · 25 Oct 2018

beachcats said:
Newbie mohon ijin belajar suhu....

Silahkan suhu..bs pm nubi kl umpama mau bikin pos buat usahanya ...tengkyu udah ngunjungi thread nubi..

RayMantic · 25 Oct 2018

BahlulDoang said:
Untuk di android bisa?
Buat di warkop.... rencananya mau pakai tablet aja.

Bisa lewat PM aja om ...

RayMantic · 25 Oct 2018

BahlulDoang said:
Untuk di android bisa?
Buat di warkop.... rencananya mau pakai tablet aja.

Deskripsi
Paket POS Android Mobile anda bisa ...
(Tab Samsung 7" /asus fonepad 7+ mobile printer bluethoot dan program MPos )

1. Cetak Nota - Input Transaksi Mudah dan Menyenangkan, tinggal sentuh Foto/Icon Item yang dijual sejumlah quantitynya, Pilih Jumlah Pembayaran (ditawarkan nominal terdekat otomatis) .... Nota penjualan langsung tercetak

2. Cetak Slip Setoran - Sudah nggak jaman karyawan mesti rekap dan mengarang nota (karena pas ramai gak sempat bikin nota) untuk setoran. Tinggal klik menu Tutup Kasir, Slip Setoran (modal awal + Total Penjualan) sekaligus Rekap Penjualan per Item akan di Cetak. Anda sebagai Owner akan di SMS otomatis waktu Tutup Kasir (anda akan dapat SMS per outlet)

3. SMS Report - Tidak perlu lagi anda sering nelpon ke outlet sekedar menanyakan Omzet,anda akan dapat SMS otomatis dari tiap-tiap outlet, terjadwal sesuai waktu yang sudah anda program sebelumnya. Misal Jam 13:00, Jam 18:00 dst.

4. Laporan - Salah satu kelemahan bisnis UKM adalah pencatatan, kini itu semua sudah langsung tersedia.Cetak Slip Setoran, Rekap Penjualan per Item, Total Penjualan Harian, Bulanan semudah 1x klik

RayMantic · 25 Oct 2018

BahlulDoang said:
Untuk di android bisa?
Buat di warkop.... rencananya mau pakai tablet aja.

Seperti ini satu paket plus software..itu modelnya integrad ke android agan.

RayMantic · 25 Oct 2018

BahlulDoang said:
Software aja mungkin yaa..
saya PM ya...

Iya pm aja suhu

SHARE MEMBUAT APLIKASI POS (POINT OF SALE) ; [PHP]

More options

RayMantic

Moderator

hulu

Suka Semprot

RayMantic

Moderator

yang-kemarin

Semprot Baru

RayMantic

Moderator

beachcats

Suka Semprot

RayMantic

Moderator

RayMantic

Moderator

RayMantic

Moderator

RayMantic

Moderator

RayMantic

Moderator

Similar threads