Contoh Aplikasi Penjualan Sederhana Menggunakan Vue.js

Desain Form Penjualan

Sebelum mengerjakan project ini sebaiknya baca terlebih dahulu materi pada artikel berikut :
 
Contoh Aplikasi Penjualan Sederhana Menggunakan Vue.js

Coding Desain Form Penjualan

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Hello</title>
  <script src="lib/vue.js"></script>
  <link rel="stylesheet" href="lib/css/bootstrap.min.css">
</head>

<body>
  <div id="app">
    <div class="jumbotron">
      <h1>Aplikasi Penjualan</h1>
      <h3>TOKO ABC</h3>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-sm-6">
          <div class="form-group">
            <label>Kode Barang :</label>
            <input type="text" class="form-control" v-model="kode_barang">
          </div>
          <div class="form-group">
            <label>Nama Barang :</label>
            <input type="text" class="form-control" v-model="nama_barang">
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group">
            <label>Harga :</label>
            <input type="number" class="form-control" v-model="harga">
          </div>
          <div class="form-group">
            <label>Jumlah Beli :</label>
            <input type="number" class="form-control" v-model="jml">
          </div>
        </div>
      </div>
      <button class="btn btn-primary" onclick="vm.hitung()">Hitung</button>
      <div class="row">
        <div class="col-sm-6">
          <label>Kode Barang :</label>
          <span>{{kode_barang}}</span>
        </div>
        <div class="col-sm-6">
          <label>Nama Barang :</label>
          <span>{{nama_barang}}</span>
        </div>
        <div class="col-sm-6">
          <label>Harga :</label>
          <span>{{harga}}</span>
        </div>
        <div class="col-sm-6">
          <label>Jumlah Beli:</label>
          <span>{{jml}}</span>
        </div>
        <div class="col-sm-6">
          <label>Potongan:</label>
          <span>{{potongan}}</span>
        </div>
        <div class="col-sm-6">
          <label>Total:</label>
          <span>{{hasil}}</span>
        </div>
      </div>
    </div>
  </div>
  <script src="lib/js/bootstrap.min.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        kode_barang: '',
        nama_barang: '',
        harga: 0,
        jml: 0,
        potongan: 0,
        hasil: 0
      },
      methods: {
        hitung() {

        },
      },
    })
  </script>
</body>

</html>

Posting Komentar

© Contoh Aplikasi. All rights reserved. Premium By FC Themes