Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.  
  6.   <meta charset="utf-8">
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  9.   <meta name="description" content="">
  10.   <meta name="author" content="">
  11.   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  12.   <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  13.   <link href="<?= base_url() ?>assets/css/sb-admin-2.css" rel="stylesheet">
  14.   <link href="<?= base_url() ?>assets/DataTables-1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet">
  15.  
  16.   <link href="<?= base_url() ?>assets/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet">
  17.   <link href="<?= base_url() ?>assets/css/style.css" rel="stylesheet">
  18.   <link href="<?= base_url() ?>assets/images/Logo.png" rel="icon">
  19.   <title>Toko MI</title>
  20.   <style>
  21.       @media print{
  22.           #wrapper {
  23.               display:none;
  24.               }
  25.          
  26.           .modal-footer, .modal-header {
  27.               display:none;
  28.               }
  29.  
  30.           title{
  31.             display: none;
  32.           }
  33.           }
  34.   </style>
  35. </head>
  36.  
  37. <body id="page-top">
  38.  
  39.   <!-- Page Wrapper -->
  40.   <div id="wrapper">
  41.  
  42.     <!-- Sidebar -->
  43.     <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
  44.  
  45.       <!-- Sidebar - Brand -->
  46.       <a class="sidebar-brand d-flex align-items-center justify-content-center" href="<?= site_url() ?>">
  47.         <div class="sidebar-brand-icon rotate-n-15">
  48.         <i class="fas fa-cash-register"></i>
  49.         </div>
  50.         <div class="sidebar-brand-text mx-3">
  51.           <?php if($this->session->userdata('level')==1)
  52.           {
  53.             echo 'admin';
  54.           }else{
  55.             echo 'kasir';
  56.           }
  57.           ?>
  58.         </div>
  59.       </a>
  60.       <!-- Divider -->
  61.       <hr class="sidebar-divider my-0">
  62.  
  63.       <!-- Nav Item - Dashboard -->
  64.       <li class="nav-item active">
  65.         <a class="nav-link" href="<?= site_url() ?>">
  66.           <i class="fas fa-fw fa-cash-register"></i>
  67.           <span>Kasir</span></a>
  68.       </li>
  69.       <!-- Divider -->
  70.       <hr class="sidebar-divider">
  71.  
  72.       <!-- Nav Item - Tables pembelian -->
  73.       <li class="nav-item">
  74.         <a class="nav-link" href="<?= site_url() ?>option/data_barang">
  75.           <i class="fas fa-fw fa-cubes"></i>
  76.           <span>Data Barang</span></a>
  77.       </li>
  78.       <!-- Divider -->
  79.       <hr class="sidebar-divider">
  80.  
  81.       <!-- Nav Item - Tables -->
  82.       <li class="nav-item">
  83.         <a class="nav-link" href="<?= site_url() ?>option/data_penjualan">
  84.         <i class="far fa-handshake"></i>
  85.           <span>Riwayat Penjualan</span></a>
  86.       </li>
  87.       <!-- Divider -->
  88.       <hr class="sidebar-divider">
  89.  
  90.       <!-- Nav Item - Pages Collapse Menu -->
  91.       <li class="nav-item">
  92.         <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
  93.         <i class="fas fa-money-bill-wave"></i>
  94.           <span>Keuntungan</span>
  95.         </a>
  96.         <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
  97.           <div class="bg-white py-2 collapse-inner rounded">
  98.             <a class="collapse-item" href="<?= site_url() ?>option/laba_tabel"><i class="fas fa-table"></i> Tabel</a>
  99.             <a class="collapse-item" href="<?= site_url() ?>option/laba_diagram"><i class="far fa-chart-bar"></i> Diagram</a>
  100.         </div>
  101.       </li>
  102.       <!-- Divider -->
  103.       <hr class="sidebar-divider">
  104.  
  105.       <?php if($this->session->userdata('level')==1){ ?>
  106.  
  107.       <!-- Nav Item - Dashboard -->
  108.       <li class="nav-item">
  109.         <a class="nav-link" href="<?= site_url() ?>option/data_user">
  110.         <i class="far fa-user"></i>
  111.           <span>Data User</span></a>
  112.       </li>
  113.       <!-- Divider -->
  114.       <hr class="sidebar-divider">
  115.  
  116.       <!-- Nav Item - Dashboard -->
  117.       <li class="nav-item">
  118.         <a class="nav-link" href="<?= site_url() ?>option/data_toko">
  119.         <i class="fas fa-store"></i>
  120.           <span>Toko</span></a>
  121.       </li>
  122.       <!-- Divider -->
  123.       <hr class="sidebar-divider">
  124.  
  125.       <?php
  126.       }
  127.       ?>
  128.  
  129.  
  130.       <!-- Sidebar Toggler (Sidebar) -->
  131.       <div class="text-center d-none d-md-inline">
  132.         <button class="rounded-circle border-0" id="sidebarToggle"></button>
  133.       </div>
  134.  
  135.     </ul>
  136.     <!-- End of Sidebar -->
  137.  
  138.     <!-- Content Wrapper -->
  139.     <div id="content-wrapper" class="d-flex flex-column">
  140.  
  141.       <!-- Main Content -->
  142.       <div id="content">
  143.  
  144.         <!-- Topbar -->
  145.         <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
  146.  
  147.           <!-- Sidebar Toggle (Topbar) -->
  148.           <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
  149.             <i class="fa fa-bars"></i>
  150.           </button>
  151.  
  152.           <div class="h3 ml-auto">Kasir</div>
  153.  
  154.          
  155.           <!-- Topbar Navbar -->
  156.           <ul class="navbar-nav ml-auto">
  157.  
  158.             <div class="topbar-divider d-none d-sm-block"></div>
  159.  
  160.             <!-- Nav Item - User Information -->
  161.             <li class="nav-item dropdown no-arrow">
  162.               <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  163.                 <span class="mr-2 d-none d-lg-inline text-gray-600 small"><?= $this->session->userdata('username') ?></span>
  164.                 <img class="img-profile rounded-circle" src="<?= site_url() ?>assets/images/profil.png">
  165.               </a>
  166.               <!-- Dropdown - User Information -->
  167.               <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
  168.                 <a class="dropdown-item" href="<?= base_url() ?>option/akun">
  169.                   <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
  170.                   Profile
  171.                 </a>
  172.                 <div class="dropdown-divider"></div>
  173.                 <a class="dropdown-item" href="<?= base_url() ?>option/logout">
  174.                   <i class="fas fa-power-off fa-sm fa-fw mr-2 text-gray-400"></i>
  175.                   Logout
  176.                 </a>
  177.               </div>
  178.             </li>
  179.  
  180.           </ul>
  181.  
  182.         </nav>
  183.         <!-- End of Topbar -->
  184.  
  185.         <!-- Begin Page Content -->
  186.         <div class="container-fluid">
  187.          
  188.             <div class="col-sm-12">
  189.                 <div class="row">
  190.                     <div class="col-sm-12 col-md-6 ">
  191.  
  192.                         <form class="form-horizontal" id="form_transaksi" role="form">
  193.  
  194.                             <div class="form-group row">
  195.                               <label class="col-md-3 col-form-label">ID/Nama</label>
  196.                                 <div class="col-md-9">
  197.                                   <input class="form-control reset" id="pencarian"  name="id" type="text" placeholder="id / nama" >
  198.                                 </div>
  199.                             </div>
  200.                            
  201.                             <div class="form-group row">
  202.                               <label class="col-md-3 col-form-label">Nama</label>
  203.                                 <div class="col-md-9">
  204.                                   <input class="form-control reset" type="text" id="nama_barang" name="nama" readonly="" placeholder="nama" >
  205.                                 </div>
  206.                             </div>
  207.                            
  208.                             <div class="form-group row">
  209.                               <label class="col-md-3 col-form-label">Harga</label>
  210.                                 <div class="col-md-9">
  211.                                   <input class="form-control reset" type="text" name="harga" id="harga"  readonly="" placeholder="0"value="">
  212.                                 </div>
  213.                             </div>
  214.                            
  215.                               <input type="hidden" class="reset" id="jenis_promo" name="jenis_promo">
  216.                               <input type="hidden" class="reset" id="potongan" name="potongan">
  217.                               <input type="hidden" class="reset" id="harga_potongan" name="harga_potongan">
  218.                                
  219.                             <div class="form-group row">
  220.                               <label class="col-md-3 col-form-label">Jumlah</label>
  221.                                 <div class="col-md-9">
  222.                                   <input class="form-control reset" type="number" readonly="readonly" onkeyup="subTotal(this.value)" id="qty" min="0" name="qty" placeholder="jumlah">
  223.                                 </div>
  224.                             </div>
  225.                            
  226.                             <div class="form-group row">
  227.                               <label class="col-md-3 col-form-label">Sub total</label>
  228.                                 <div class="col-md-9">
  229.                                   <input class="form-control reset" type="text" name="sub_total" id="sub_total"  readonly="" placeholder="0" value="">
  230.                                 </div>
  231.                             </div>
  232.                         </form>
  233.  
  234.                         <button type="button" class="btn btn-md btn-primary" id="tambah" disabled="disabled" onclick="addbarang()"><i class="fa fa-shopping-cart"></i> input</button>
  235.                     </div>
  236.  
  237.                     <div class="col-sm-12 col-md-6 ">
  238.  
  239.                         <div class="form-group row">
  240.                           <label class="col-md-3 col-form-label">Total</label>
  241.                             <div class="col-md-9">
  242.                               <input class="form-control form-control-lg res" type="text" readonly="" name="total" id="total" value="<?= number_format(
  243.                                   $this->cart->total(), 0 , '' , '.' ); ?>" >
  244.                             </div>
  245.                         </div>
  246.                        
  247.                         <div class="form-group row">
  248.                           <label class="col-md-3 col-form-label">Bayar</label>
  249.                             <div class="col-md-9">
  250.                               <input class="form-control form-control-lg res" type="number" id="bayar" name="bayar" onkeyup="showKembali(this.value)"  placeholder="0">
  251.                             </div>
  252.                         </div>
  253.                        
  254.                         <div class="form-group row">
  255.                           <label class="col-md-3 col-form-label">Kembali</label>
  256.                             <div class="col-md-9">
  257.                               <input class="form-control form-control-lg res" type="text" id="kembali" readonly="" name="kembali"  >
  258.                             </div>
  259.                         </div>
  260.                        
  261.                     </div>
  262.                 </div>
  263.             </div>
  264.            
  265.               <table id="tabelBarang" class="table table-striped table-bordered nowrap" style="width:100%">
  266.                 <thead>
  267.                   <tr>
  268.                     <th>No</th>
  269.                     <th>Nama</th>
  270.                     <th>Jenis</th>
  271.                     <th>Potongan</th>
  272.                     <th>Harga Potong</th>
  273.                     <th>Harga</th>
  274.                     <th>Jumlah</th>
  275.                     <th>Sub total</th>
  276.                     <th>Opsi</th>
  277.                   </tr>
  278.                 </thead>
  279.                 <tbody>
  280.                 </tbody>
  281.               </table>
  282.                   <button type="button" class="btn btn-md btn-primary" id="selesai" disabled="disabled" >selesai </button>
  283.         </div>
  284.         <!-- /.container-fluid -->
  285.  
  286.       </div>
  287.       <!-- End of Main Content -->
  288.  
  289.       <!-- Footer -->
  290.       <footer class="sticky-footer bg-white">
  291.         <div class="container my-auto">
  292.         </div>
  293.       </footer>
  294.       <!-- End of Footer -->
  295.  
  296.     </div>
  297.     <!-- End of Content Wrapper -->
  298.  
  299.   </div>
  300.   <!-- End of Page Wrapper -->
  301.  
  302.   <!-- Scroll to Top Button-->
  303.   <a class="scroll-to-top rounded" href="#page-top">
  304.     <i class="fas fa-angle-up"></i>
  305.   </a>
  306.  
  307.   <script src="<?= base_url() ?>assets/jquery/jquery-3.2.1.min.js"></script>
  308.   <script src="<?= base_url() ?>assets/bootstrap-4.1.3/js/bootstrap.min.js"></script>
  309.   <script src="<?= base_url() ?>assets/js/sb-admin-2.js"></script>
  310.   <script src="<?= base_url() ?>assets/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
  311.   <script src="<?php echo base_url() ?>assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
  312.   <script src="<?php echo base_url() ?>assets/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
  313.   <script>
  314.       var table;
  315.       $(document).ready(function(){
  316.           table = $('#tabelBarang').DataTable({
  317.               paging: false,
  318.               "info": false,
  319.               "searching": false,
  320.               "ajax": {
  321.                   "url": "<?php echo base_url() ?>option/list_transaksi",
  322.                   "type": "POST"
  323.                   },
  324.               "columnDefs": [
  325.               {
  326.                   "targets": [ 2,3,4,5,6,7,8 ],
  327.                   "orderable": false,
  328.               },
  329.               ],
  330.               });
  331.            
  332.            $('#pencarian').focus();
  333.        });
  334.        
  335.        function reload_table(){
  336.            table.ajax.reload(null,false);
  337.        }
  338.        
  339.       function subTotal(qty){
  340.           var harga = $('#harga').val().replace(".", "").replace(".", "");
  341.           var promo = $('#jenis_promo').val();
  342.           var potongan = $('#potongan').val();
  343.           var hrg_potong = $('#harga_potongan').val();
  344.           if(promo == 'minimal'){
  345.               var induk = Math.floor(qty / potongan);
  346.               var sisa = qty% potongan;
  347.               var sub = (induk*hrg_potong)+(harga*sisa);
  348.               $('#sub_total').val(convertToRupiah(sub));
  349.               $('#tambah').removeAttr("disabled");
  350.           }else{
  351.               var diskon = harga - (harga*potongan/100);
  352.               $('#sub_total').val(convertToRupiah(diskon*qty));
  353.               $('#tambah').removeAttr("disabled");
  354.           }
  355.          
  356.       }
  357.      
  358.       function addbarang(){
  359.           var id = $('#id').val();
  360.           var qty = $('#qty').val();
  361.           $.ajax({
  362.               url : "<?php echo base_url() ?>option/add_keranjang",
  363.               type: "POST",
  364.               data: $('#form_transaksi').serialize(),
  365.               dataType: "JSON",
  366.               success: function(data){
  367.                   reload_table();
  368.                   $('#tambah').attr("disabled","disabled");
  369.                   $('#qty').attr("readonly","readonly");
  370.                   $('#bayar').focus();
  371.               },
  372.               error: function (jqXHR, textStatus, errorThrown){
  373.                   alert('Error adding data');
  374.               }
  375.           });
  376.           showTotal();
  377.           showKembali($('#bayar').val());
  378.           $('.reset').val('');
  379.       }
  380.      
  381.       document.onkeydown = function(e){
  382.         var q = $('#qty').val();
  383.         var byr = $('#bayar').val();
  384.         if(q !==''){
  385.           switch(e.keyCode){
  386.           case 13:
  387.           addbarang();
  388.           break;
  389.         }
  390.         }
  391.  
  392.         if(byr !==''){
  393.           switch(e.keyCode){
  394.           case 13:
  395.           selesai();
  396.           break;
  397.         }
  398.         }
  399.       // 113 f2
  400.       // 37 kiri 38 atas 39 kanan 40 bawah
  401.       switch(e.keyCode){
  402.         case 113:
  403.         $('#pencarian').focus();
  404.         break;
  405.       }
  406.       };
  407.      
  408.       function showTotal(){
  409.           var total = $('#total').val().replace(".", "").replace(".", "");
  410.           var sub_total = $('#sub_total').val().replace(".", "").replace(".", "");
  411.           $('#total').val(convertToRupiah((Number(total)+Number(sub_total))));
  412.       }
  413.      
  414.       function showKembali(str)
  415.       {
  416.           var total = $('#total').val().replace(".", "").replace(".", "");
  417.           var bayar = str.replace(".", "").replace(".", "");
  418.           var kembali = bayar-total;
  419.           $('#kembali').val(convertToRupiah(kembali));
  420.           if (kembali >= 0)
  421.           {
  422.               $('#selesai').removeAttr("disabled");
  423.           }
  424.           else
  425.           {
  426.               $('#selesai').attr("disabled","disabled");
  427.           }
  428.           if (total == 0)
  429.           {
  430.               $('#selesai').attr("disabled","disabled");
  431.           }
  432.     }
  433.        
  434.       function convertToRupiah(angka)
  435.       {
  436.           var rupiah = '';
  437.           var angkarev = angka.toString().split('').reverse().join('');
  438.           for(var i = 0; i < angkarev.length; i++)
  439.           if(i%3 == 0) rupiah += angkarev.substr(i,3)+'.';
  440.           return rupiah.split('',rupiah.length-1).reverse().join('');
  441.       }
  442.        
  443.        $(function(){
  444.             $("#pencarian").autocomplete({
  445.                 minLength: 1,
  446.                 delay : 400,
  447.                 source: function(request, response) {
  448.  
  449.                     jQuery.ajax({
  450.                         url: "<?php echo base_url() ?>option/cari_barang",
  451.                         data: {
  452.                           keyword : request.term
  453.                         },
  454.                         dataType: "json",
  455.                         success: function(data){
  456.                           response(data);
  457.                         }  
  458.                     })
  459.                 },
  460.                 select:  function(e, ui){
  461.                     var nama = ui.item.nama_barang;
  462.                     var code = ui.item.id_barang;
  463.                     $("#pencarian").val(code);
  464.                     $("#nama_barang").val(nama);
  465.                     $("#harga").val(convertToRupiah(ui.item.harga_jual));
  466.                     $("#jenis_promo").val(ui.item.jenis_promo);
  467.                     $("#potongan").val(ui.item.potongan);
  468.                     $("#harga_potongan").val(ui.item.harga_ahir);
  469.                     $('#qty').removeAttr("readonly");
  470.                     $('#qty').focus();
  471.                     return false;
  472.                 }
  473.             })
  474.             .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  475.                return $( "<li>" )
  476.                .append( "<a>" + item.id_barang + " " + item.nama_barang + "</a>" )
  477.                .appendTo( ul );
  478.             };
  479.         });
  480.        
  481.         $('#selesai').click(function(){
  482.             var bayar=$('#bayar').val();
  483.             var kembali=$('#kembali').val();
  484.             $.ajax({
  485.                 url:"<?php echo base_url() ?>option/cetak_nota/",
  486.                 data:{bayar:bayar,kembali:kembali},
  487.                 method:"POST",
  488.                 success:function(data){
  489.                     $('#modalNota').modal('show');
  490.                     $('#isiModal').html(data);
  491.                     }
  492.                 });
  493.         });
  494.  
  495.         function selesai()
  496.         {
  497.           var bayar=$('#bayar').val();
  498.             var kembali=$('#kembali').val();
  499.             $.ajax({
  500.                 url:"<?php echo base_url() ?>option/cetak_nota/",
  501.                 data:{bayar:bayar,kembali:kembali},
  502.                 method:"POST",
  503.                 success:function(data){
  504.                     $('#modalNota').modal('show');
  505.                     $('#isiModal').html(data);
  506.                     }
  507.                 });
  508.         }
  509.        
  510.         function print_nota(){
  511.             window.print();
  512.             cetak_struk();
  513.         }
  514.        
  515.         function cetak_struk()
  516.         {
  517.             $.ajax({
  518.                 url : "<?php echo base_url() ?>option/shoping/",
  519.                 type: "post",
  520.                 dataType:"json",
  521.                 success:function(result){
  522.                     if(result.status == true){
  523.                         $('#modalNota').modal('hide');
  524.                         reload_table();
  525.                         $('.res').val('');
  526.             $('#pencarian').focus();
  527.                     }else{
  528.             alert('gagal melakukan transaksi')
  529.           }
  530.                 },
  531.                 error: function(err){
  532.                     alert('error transaksi')
  533.                 }
  534.             });
  535.         }
  536.        
  537.         function deletebarang(id,sub_total)
  538.         {
  539.             $.ajax({
  540.                 url : "<?= site_url('option/deletebarang')?>/"+id,
  541.                 type: "POST",
  542.                 dataType: "JSON",
  543.                 success: function(data){
  544.                     reload_table();
  545.                 },
  546.                 error: function (jqXHR, textStatus, errorThrown){
  547.                     alert('Gagal hapus barang');
  548.                 }
  549.             });
  550.             var ttl = $('#total').val().replace(".", "");
  551.             $('#total').val(convertToRupiah(ttl-sub_total));
  552.             showKembali($('#bayar').val());
  553.         }
  554.   </script>
  555.  
  556.   <!-- Modal -->
  557.         <div class="modal fade" id="modalNota" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  558.           <div class="modal-dialog modal-sm">
  559.             <div class="modal-content">
  560.                
  561.               <div class="modal-header">
  562.                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  563.               </div>
  564.            
  565.               <div class="modal-body" id="isiModal">
  566.                
  567.               </div>
  568.            
  569.               <div class="modal-footer">
  570.                 <button type="button" class="btn btn-success" OnClick="print_nota()"><span class="fa fa-print"></span>  Cetak</button>
  571.                 <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="fa fa-close"></span>  Tutup</button>
  572.                 </div>
  573.             </div>
  574.           </div>
  575.         </div>
  576.     <!-- akhir kode modal dialog -->
  577.  
  578.      
  579. </body>
  580.  
  581. </html>