Desain Form Penjualan
Sebelum mengerjakan project ini sebaiknya baca terlebih dahulu materi pada artikel berikut :
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 untuk "Contoh Aplikasi Penjualan Sederhana Menggunakan Vue.js"
Posting Komentar