API tools faq
paste
Radityanugrap

Uji Level

Radityanugrap
Sep 14th, 2020
48
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 12.16 KB | None | 0 0
raw download clone embed print report
  1.     <!doctype html>
  2.     <html lang="en">
  3.     <head>
  4.         <!-- Required meta tags -->
  5.         <meta charset="utf-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8.         <!-- Bootstrap CSS -->
  9.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  10.  
  11.         <title>Uji Level 1</title>
  12.     </head>
  13.     <body>
  14.         <h1 class="text-center">Form Input Data</h1>
  15.  
  16.         <div class="container-sm mt-5">
  17.             <form class="border border-dark mx-5">
  18.                 <div class="form-group row mt-2 mx-5">
  19.                     <label for="kodeProduk" class="col-sm-2 col-form-label">Kode Produk</label>
  20.                     <div class="col-sm-10">
  21.                         <input type="text" class="form-control" id="kodeProduk" placeholder="MD-001" disabled>
  22.                     </div>
  23.                 </div>
  24.                 <div class="form-group row mx-5">
  25.                     <label for="namaProduk" class="col-sm-2 col-form-label">Nama Produk</label>
  26.                     <div class="col-sm-10">
  27.                         <input type="text" class="form-control" id="namaProduk" placeholder="makanan/minuman">
  28.                     </div>
  29.                 </div>
  30.                 <div class="form-group row mx-5">
  31.                     <label for="hargaProduk" class="col-sm-2 col-form-label">Harga Produk</label>
  32.                     <div class="col-sm-10">
  33.                         <input type="number" class="form-control" id="hargaProduk">
  34.                     </div>
  35.                 </div>
  36.                 <div class="form-group row mx-5">
  37.                     <label for="satuan" class="col-sm-2 col-form-label">Satuan</label>
  38.                     <div class="col-sm-10">
  39.                         <select class="form-control" id="satuan">
  40.                             <option disabled selected>Pilih</option>
  41.                             <option value="1">Gelas</option>
  42.                             <option value="2">Pcs</option>
  43.                         </select>
  44.                     </div>
  45.                 </div>
  46.                 <div class="form-group row mx-5">
  47.                     <label for="kategori" class="col-sm-2 col-form-label">Kategori</label>
  48.                     <div class="col-sm-10">
  49.                         <select class="form-control" id="kategori" onchange="kodep(this.value)">
  50.                             <option disabled selected>pilih</option>
  51.                             <option value="Minuman Dingun">Minuman Dingin</option>
  52.                             <option value="Makanan Ringan">Makanan Ringan</option>
  53.                             <option value="Makanan Cepat Saji">Makanan Cepat Saji</option>
  54.                         </select>
  55.                     </div>
  56.                 </div>
  57.                 <div class="form-group row mx-5 ">
  58.                     <label for="urlGambar" class="col-sm-2 col-form-label">URL Gambar</label>
  59.                     <div class="col-sm-10">
  60.                         <input type="text" class="form-control" id="urlGambar">
  61.                     </div>
  62.                 </div>
  63.                 <div class="form-group row mx-5">
  64.                     <label for="stokAwal" class="col-sm-2 col-form-label">Stok Awal</label>
  65.                     <div class="col-sm-10">
  66.                         <input type="number" class="form-control" id="stokAwal">
  67.                     </div>
  68.                     <button class="btn btn-success mt-3 ml-3" type="button" onclick="add()" id="button9">Simpan</button>
  69.                     <button class="btn btn-secondary mt-3 ml-3" type="button" onclick="batal()" id="button">Batal</button>
  70.                     <button class="btn btn-success mt-3 ml-3" type="button" onclick="editSimpan()" id="button6">Simpan</button>
  71.                 </div>
  72.             </form>
  73.    
  74.             <table class="table table-bordered mt-5">
  75.                 <thead class="thead-light">
  76.                     <tr>
  77.                         <th scope="col">No</th>
  78.                         <th scope="col">Kode Produk</th>
  79.                         <th scope="col">Nama Produk</th>
  80.                         <th scope="col">Kategori Produk</th>
  81.                         <th scope="col">Stok Produk</th>
  82.                         <th scope="col">Gambar Produk</th>
  83.                         <th scope="col">Action</th>
  84.                     </tr>
  85.                 </thead>
  86.                 <tbody id="tampildata">
  87.    
  88.                 </tbody>
  89.             </table>
  90.         </div>
  91.         <script>
  92.             var namapro = document.getElementById("namaProduk").value
  93. if (namapro == "") {
  94.     document.getElementById("button9").style.display = "inline"
  95.     document.getElementById("button6").style.display = "none"
  96.     document.getElementById("button").style.display = "none"
  97. }
  98. kodeproduk   = []
  99. nama         = []
  100. harga        = []
  101. satuan       = []
  102. gambar       = []
  103. kategori     = []
  104. stok         = []
  105.  
  106. tampil = document.getElementById('tampildata')
  107.  
  108. function showData() {
  109.     tampil.innerHTML = ""
  110.  
  111.     for (i = 0; i < nama.length; i++) {
  112.         nodata = i + 1
  113.         tampil.innerHTML += "<tr>" +
  114.             "<th>" + nodata + "</th>" +
  115.             "<td>" + kodeproduk[i] + "</td>" +
  116.             "<td>" + nama[i] + "</td>" +
  117.             "<td>" + kategori[i] + "</td>" +
  118.             "<td id='stock"+ nodata +"'>" + stok[i] + "</td>" +
  119.             "<td><img src=" + gambar[i] + " id='image' width='100' height=110'></td>" +
  120.             "<td>" +
  121.             "<button class='btn btn-warning mr-2' onclick='editdata(" +
  122.             i +
  123.             ")'>Edit</button>" +
  124.             "<button class='btn-danger btn' onclick='hapusdata(" + i +
  125.             ")'>Hapus</button>";
  126.         var stocks = document.getElementById('stock' + nodata + '')
  127.         if (Number(stocks.innerHTML) < 5) {
  128.             stocks.style.backgroundColor = "red"
  129.             stocks.style.color = "white"
  130.         } else {
  131.             stocks.style.backgroundColor = ""
  132.             stocks.style.color = ""
  133.         }
  134.     }
  135. }
  136.  
  137. function batal() {
  138.     document.getElementById('kodeProduk').value  = ""
  139.     document.getElementById('namaProduk').value  = ""
  140.     document.getElementById('hargaProduk').value = ""
  141.     document.getElementById('satuan').value      = ""
  142.     document.getElementById('kategori').value    = ""
  143.     document.getElementById('stokAwal').value    = ""
  144.     document.getElementById('urlGambar').value   = ""
  145.     document.getElementById("button9").style.display = "inline"
  146.     document.getElementById("button5").style.display = "none"
  147.     document.getElementById("button").style.display  = "none"
  148. }
  149.  
  150. function add() {
  151.     var newkode = document.getElementById('kodeProduk').value
  152.     var newnama = document.getElementById('namaProduk').value
  153.     var newharga = document.getElementById('hargaProduk').value
  154.     var newsatuan = document.getElementById('satuan').value
  155.     var newkategori = document.getElementById('kategori').value
  156.     var newstok = document.getElementById('stokAwal').value
  157.     var newgambar = document.getElementById('urlGambar').value
  158.  
  159.     if (newnama == '') {
  160.         alert('silahkan masukkan data terlebih dahulu!')
  161.     } else {
  162.         kodeproduk.push(newkode)
  163.         nama.push(newnama)
  164.         harga.push(newharga)
  165.         satuan.push(newsatuan)
  166.         gambar.push(newgambar)
  167.         kategori.push(newkategori)
  168.         stok.push(newstok)
  169.         showData()
  170.         document.getElementById('kodeProduk').value = ""
  171.         document.getElementById('namaProduk').value = ""
  172.         document.getElementById('hargaProduk').value = ""
  173.         document.getElementById('satuan').value = ""
  174.         document.getElementById('kategori').value = ""
  175.         document.getElementById('stokAwal').value = ""
  176.         document.getElementById('urlGambar').value = ""
  177.     }
  178. }
  179. var index = []
  180.  
  181. function editdata(i) {
  182.     document.getElementById('kodeProduk').value = kodeproduk[i]
  183.     document.getElementById('namaProduk').value = nama[i]
  184.     document.getElementById('urlGambar').value = gambar[i]
  185.     document.getElementById('satuan').value = satuan[i]
  186.     document.getElementById('hargaProduk').value = harga[i]
  187.     document.getElementById('kategori').value = kategori[i]
  188.     document.getElementById('stokAwal').value = stok[i]
  189.  
  190.     document.getElementById("button9").style.display = "none"
  191.     document.getElementById("button6").style.display = "inline"
  192.     document.getElementById("button").style.display = "inline"
  193.     index.push(i)
  194. }
  195.  
  196. function editSimpan() {
  197.     var newkode = document.getElementById('kodeProduk').value
  198.     var newnama = document.getElementById('namaProduk').value
  199.     var newharga = document.getElementById('hargaProduk').value
  200.     var newsatuan = document.getElementById('satuan').value
  201.     var newkategori = document.getElementById('kategori').value
  202.     var newstok = document.getElementById('stokAwal').value
  203.     var newgambar = document.getElementById('urlGambar').value
  204.  
  205.     if (newnama == '') {
  206.         alert('silahkan masukkan data terlebih dahulu!')
  207.     } else {
  208.         kodeproduk[index] = newkode
  209.         nama[index] = newnama
  210.         harga[index] = newharga
  211.         satuan[index] = newsatuan
  212.         gambar[index] = newgambar
  213.         kategori[index] = newkategori
  214.         stok[index] = newstok
  215.         showData()
  216.         index.pop()
  217.         document.getElementById('kodeProduk').value = ""
  218.         document.getElementById('namaProduk').value = ""
  219.         document.getElementById('hargaProduk').value = ""
  220.         document.getElementById('satuan').value = ""
  221.         document.getElementById('kategori').value = ""
  222.         document.getElementById('stokAwal').value = ""
  223.         document.getElementById('urlGambar').value = ""
  224.         document.getElementById("button9").style.display = "inline"
  225.         document.getElementById("button6").style.display = "none"
  226.         document.getElementById("button").style.display = "none"
  227.     }
  228. }
  229.  
  230. function hapusdata(i) {
  231.     if (confirm('apakah kamu yakin ingin menghapus data?')) {
  232.         nama.splice(i, 1);
  233.         kodeproduk.splice(i, 1);
  234.         kategori.splice(i, 1);
  235.         stok.splice(i, 1);
  236.         gambar.splice(i, 1);
  237.  
  238.         showData()
  239.     }
  240. }
  241.  
  242. function kodep(value) {
  243.     var idkode = []
  244.     var kodekatagori = value.split(" ").filter(function (e) {
  245.         return e.trim().length > 0;
  246.     });
  247.     for (i = 0; i < kodekatagori.length; i++) {
  248.         if (kodekatagori.length == 1) {
  249.             var code = kodekatagori[i].slice(0, 2)
  250.         } else {
  251.             var code = kodekatagori[i].slice(0, 1)
  252.         }
  253.         idkode.push(code)
  254.     }
  255.     var kodepr = idkode.join("")
  256.     kodepr = kodepr.toUpperCase()
  257.     if (idkode.length == 0) {
  258.         document.getElementById("kodeProduk").value = ''
  259.     } else {
  260.         var count = 1;
  261.         for (i = 0; i < kategori.length; ++i) {
  262.             if (kategori[i].toLowerCase() == value.toLowerCase()) {
  263.                 count++;
  264.             }
  265.         }
  266.         if (count < 10) {
  267.             document.getElementById("kodeProduk").value = kodepr + '-00' + count
  268.         } else if (count < 100) {
  269.             document.getElementById("kodeProduk").value = kodepr + '-0' + count
  270.         } else {
  271.             document.getElementById("kodeProduk").value = kodepr + '-' + count
  272.         }
  273.     }
  274. }
  275.         </script>
  276.  
  277.         <!-- Optional JavaScript -->
  278.         <script src="ujilevel1.js"></script>
  279.         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  280.         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  281.         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  282.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  283.     </body>
  284.     </html>
  285.     <!-- auto increment -->
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!