API tools faq
paste
drzeo

modal

drzeo
Dec 18th, 2017
107
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 12.08 KB | None | 0 0
raw download clone embed print report
  1. <?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
  2. <!-- DataTables -->
  3. <link rel="stylesheet" href="<?= base_url("assets/"); ?>datatables/css/dataTables.bootstrap.css">
  4. <link rel="stylesheet" href="<?= base_url("assets/"); ?>bower_components/select2/dist/css/select2.min.css">
  5. <!-- Content Wrapper. Contains page content -->
  6. <div class="content-wrapper">
  7.   <!-- Content Header (Page header) -->
  8.   <section class="content-header">
  9.     <h1>
  10.      Produk
  11.    </h1>
  12.    <ol class="breadcrumb">
  13.     <li><a href=""><i class="fa fa-dashboard"></i>  Produk</a></li>
  14.     <li class="active">Daftar  Produk</li>
  15.   </ol>
  16. </section>
  17.  
  18. <!-- Main content -->
  19. <section class="content">
  20.  
  21.   <!-- Default box -->
  22.   <div class="box">
  23.     <div class="box-header with-border">
  24.       <h3 class="box-title">Daftar Produk</h3>
  25.  
  26.       <div class="box-tools pull-right">
  27.         <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
  28.         title="Collapse">
  29.         <i class="fa fa-minus"></i></button>
  30.         <button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
  31.           <i class="fa fa-times"></i></button>
  32.         </div>
  33.       </div>
  34.       <div class="box-body">
  35.         <div>
  36.           <button class="btn btn-primary" onclick="tambah()"><span class="fa fa-edit"></span> Tambah</button>
  37.           <button class="btn btn-default" onclick="reload_table()"><i class="glyphicon glyphicon-refresh"></i> Reload</button>
  38.           <button class="btn btn-warning " onclick="backupdatabase()"><span class="fa fa-file-excel-o"></span> BackUP Database</button>
  39.           <script type="text/javascript">
  40.             function backupdatabase()
  41.             {
  42.                 if(confirm('Anda yakin BackUP File Excel ?'))
  43.                 {
  44.                     window.location.assign("<?php echo site_url('admin/produk/backupdatabase'); ?>")
  45.                 }
  46.             }
  47.         </script>
  48.         </div><br>
  49.         <div class="box-body table-responsive no-padding">
  50.           <table id="mytable" class="table table-striped table-bordered table-hover" width="100%">
  51.             <thead>
  52.               <tr><th width="1%">No</th>
  53.                 <th>Nama Produk</th>
  54.                 <th>Kategori Produk</th>
  55.                 <th>Harga Modal</th>
  56.                 <th>Harga Pelanggan</th>
  57.                 <th>Harga Umum</th>
  58.                 <th>Stok</th>
  59.                 <th width="20%">Action</th>
  60.               </tr>
  61.             </thead>
  62.             <tbody>
  63.             </tbody>
  64.           </table>
  65.         </div>
  66.       </div>
  67.       <!-- /.box-body -->
  68.       <div class="box-footer">
  69.         Footer
  70.       </div>
  71.       <!-- /.box-footer-->
  72.     </div>
  73.     <!-- /.box -->
  74.  
  75.   </section>
  76.   <!-- /.content -->
  77. </div>
  78. <!-- /.content-wrapper -->
  79. <!--modal tambah dan edit -->
  80.   <div class="modal fade" id="modal_form" role="dialog">
  81.     <div class="modal-dialog">
  82.       <div class="modal-content">
  83.         <div class="modal-header">
  84.           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  85.           <h3 class="modal-title"></h3>
  86.         </div>
  87.         <div class="modal-body form">
  88.           <form action="#" id="form" class="form-horizontal">
  89.             <div class="modal-body">
  90.               <input type="hidden" value="" name="id"/>
  91.               <div class="form-group">
  92.                 <label for="exampleInputEmail1">Produk</label>
  93.                 <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Produk" name="nama" required/>
  94.                 <span class="help-block"></span>
  95.               </div>
  96.               <div class="form-group">
  97.                 <label for="exampleInputEmail1">Kategori Produk</label>
  98.                 <select class="form-control select2" id="select2" name="id_kategori_produk" style="width: 100%;">
  99.                   <option value="">Choose option</option>
  100.                   <?php foreach ($kategori_produk->result() as $key) {
  101.                     ?>
  102.                     <option value="<?= $key->id ?>"><?= $key->nama ?></option>
  103.                     <?php
  104.                   } ?>
  105.                 </select>
  106.                 <span class="help-block"></span>
  107.               </div>
  108.               <div class="form-group">
  109.                 <label for="exampleInputEmail1">Harga Modal</label>
  110.                 <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Harga Modal" name="modal" required onkeypress='return check_int(event)'/>
  111.                 <span class="help-block"></span>
  112.               </div>
  113.               <div class="form-group">
  114.                 <label for="exampleInputEmail1">Harga Pelanggan</label>
  115.                 <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Harga Pelanggan" name="pelanggan" required onkeypress='return check_int(event)'/>
  116.                 <span class="help-block"></span>
  117.               </div>
  118.               <div class="form-group">
  119.                 <label for="exampleInputEmail1">Harga Umum</label>
  120.                 <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Harga Umum" name="umum" required onkeypress='return check_int(event)'/>
  121.                 <span class="help-block"></span>
  122.               </div>
  123.             </div>
  124.           </form>
  125.         </div>
  126.         <div class="modal-footer">
  127.           <div class="pull-right">
  128.             <button type="button" id="btnSave" onclick="save()" class="btn btn-primary"><i class="fa fa-mail-forward "></i> Save</button>
  129.           </div>
  130.           <div class="pull-left">
  131.             <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-mail-reply"></i> Cancel</button>
  132.           </div>
  133.         </div>
  134.       </div><!-- /.modal-content -->
  135.     </div><!-- /.modal-dialog -->
  136. </div><!-- /.modal -->
  137. <!-- jQuery 3 -->
  138. <script src="<?= base_url("assets/"); ?>bower_components/jquery/dist/jquery.min.js"></script>
  139. <!-- DataTables -->
  140. <script src="<?= base_url("assets/"); ?>datatables/js/jquery.dataTables.min.js"></script>
  141. <script src="<?= base_url("assets/"); ?>datatables/js/dataTables.bootstrap.js"></script>
  142. <script src="<?= base_url("assets/"); ?>bower_components/select2/dist/js/select2.full.min.js"></script>
  143.  
  144. <script type="text/javascript">
  145.  
  146.   $('#select2').select2();
  147.  
  148.   //Fun Hapus
  149.     function hapus(id)
  150.     {
  151.       if(confirm('Anda yakin ingin menghapus data?'))
  152.       {
  153.             // ajax delete data to database
  154.             $.ajax({
  155.               url : '<?php echo site_url("admin/produk/hapus/'+id+'") ?>',
  156.               type: "POST",
  157.               dataType: "JSON",
  158.               success: function(data)
  159.               {
  160.                     //if success reload ajax table
  161.                     $('#modal_form').modal('hide');
  162.                     reload_table();
  163.                   },
  164.                   error: function (jqXHR, textStatus, errorThrown)
  165.                   {
  166.                     alert('Error deleting data');
  167.                   }
  168.                 });
  169.           }
  170.         }
  171.  
  172.     //fun tambah
  173.     function tambah()
  174.     {
  175.       save_method = 'add';
  176.         $('#form')[0].reset(); // reset form on modals
  177.         $('.form-group').removeClass('has-error'); // clear error class
  178.         $('.help-block').empty(); // clear error string
  179.         $('#modal_form').modal('show'); // show bootstrap modal
  180.         $('.modal-title').text('Tambah  Produk'); // Set Title to Bootstrap modal title
  181.       }
  182. //fun edit
  183. function edit(id)
  184. {
  185.   save_method = 'update';
  186.     $('#form')[0].reset(); // reset form on modals
  187.     $('.form-group').removeClass('has-error'); // clear error class
  188.     $('.help-block').empty(); // clear error string
  189.     $.ajax({
  190.       url : '<?php echo site_url("admin/produk/edit/'+id+'") ?>',
  191.       type: "GET",
  192.       dataType: "JSON",
  193.       success: function(data)
  194.       {
  195.         $('[name="id"]').val(data.id);
  196.         $('[name="nama"]').val(data.nama);
  197.         // $('[name="id_kategori_produk"]').val(data.id_kategori_produk);
  198.         $('[name="id_kategori_produk"]').val(data.id_kategori_produk);
  199.         $('[name="id_kategori_produk"]').trigger('change');
  200.         $('[name="pelanggan"]').val(data.pelanggan);
  201.         $('[name="umum"]').val(data.umum);
  202.         $('[name="modal"]').val(data.modal);
  203.             $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
  204.             $('.modal-title').text('Edit  Produk'); // Set title to Bootstrap modal title
  205.           },
  206.           error: function (jqXHR, textStatus, errorThrown)
  207.           {
  208.             alert('Error get data from ajax');
  209.           }
  210.         });
  211.   }
  212. //fun simpan
  213. function save()
  214. {
  215.     $('#btnSave').text('saving...'); //change button text
  216.     $('#btnSave').attr('disabled',true); //set button disable
  217.     var url;
  218.  
  219.     if(save_method == 'add') {
  220.       url = "<?php echo site_url('admin/produk/tambah')?>";
  221.     } else {
  222.       url = "<?php echo site_url('admin/produk/update')?>";
  223.     }
  224.  
  225.  
  226.  
  227.     // ajax adding data to database
  228.     var formData = new FormData($('#form')[0]);
  229.     $.ajax({
  230.       url : url,
  231.       type: "POST",
  232.       data: formData,
  233.       contentType: false,
  234.       processData: false,
  235.       dataType: "JSON",
  236.       success: function(data)
  237.       {
  238.             if(data.status) //if success close modal and reload ajax table
  239.             {
  240.               $('#modal_form').modal('hide');
  241.               reload_table();
  242.             } else
  243.             {
  244.               for (var i = 0; i < data.inputerror.length; i++)
  245.               {
  246.                     $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
  247.                     $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
  248.                   }
  249.                 }
  250.             $('#btnSave').text('save'); //change button text
  251.             $('#btnSave').attr('disabled',false); //set button enable
  252.           },
  253.           error: function (jqXHR, textStatus, errorThrown)
  254.           {
  255.             alert('Error adding / update data');
  256.             $('#btnSave').text('save'); //change button text
  257.             $('#btnSave').attr('disabled',false); //set button enable
  258.           }
  259.         });
  260.   }
  261.  
  262.   function check_int(evt) {
  263.     var charCode = ( evt.which ) ? evt.which : event.keyCode;
  264.     return ( charCode >= 48 && charCode <= 57 || charCode == 8 );
  265.   }
  266.  
  267.     // Aktif Navigasi
  268.     $(document).ready(function() {
  269.       $('#produk').addClass('active treeview');
  270.     });
  271. </script>
  272. <!-- page script -->
  273. <script type="text/javascript">
  274.  
  275.   $.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
  276.   {
  277.     return {
  278.       "iStart": oSettings._iDisplayStart,
  279.       "iEnd": oSettings.fnDisplayEnd(),
  280.       "iLength": oSettings._iDisplayLength,
  281.       "iTotal": oSettings.fnRecordsTotal(),
  282.       "iFilteredTotal": oSettings.fnRecordsDisplay(),
  283.       "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
  284.       "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
  285.     };
  286.   };
  287.  
  288.   var table = $('#mytable').DataTable({
  289.     oLanguage: {
  290.       sProcessing: "loading..."
  291.     },
  292.     processing: true,
  293.     serverSide: true,
  294.     ajax: {"url": "<?= base_url() ?>admin/produk/json", "type": "POST"},
  295.     columns: [
  296.     {
  297.       "data": "id",
  298.       "orderable": false
  299.     },
  300.     {"data": "nama"},
  301.     {"data": "nama_kategori_produk"},
  302.     {"data": "modal"},
  303.     {"data": "pelanggan"},
  304.     {"data": "umum"},
  305.     {"data": "qty"},
  306.     {"data": "view","orderable": false}
  307.     ],
  308.     order: [[1, 'asc']],
  309.     rowCallback: function(row, data, iDisplayIndex) {
  310.       var info = this.fnPagingInfo();
  311.       var page = info.iPage;
  312.       var length = info.iLength;
  313.       var index = page * length + (iDisplayIndex + 1);
  314.       $('td:eq(0)', row).html(index);
  315.     }
  316.   });
  317.  
  318.     //fun reload
  319.     function reload_table()
  320.     {
  321.         table.ajax.reload(null,false); //reload datatable ajax
  322.       }
  323.   </script>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!