Cara Membuat Halaman Validasi Belanja dan Persediaan Barang dengan HTML dan CSS - Setiap halaman website tentunya kita sering menjumpai tampilan design berupa teks pada menu dan juga yang dikombinasikan dengan icon pada setiap menunya. Berfungsi agar terlihat menarik dan mempunyai ciri khas pada websitnya. Nah, kali ini saya akan bagikan tutorial bagaimana Cara Membuat Halaman Validasi Belanja dengan Bulma.
Sebelum membuat kita harus mempunyai patokan design prototypenya terlebih dahulu untuk mempermudah. disini saya sudah mempunyai design prototype wlijo halaman validasi belanja dan Persediaan Barang, seperti dibawah ini:
Kode HTML
Jika sudah memiliki design prototype, langkah pertama tentunya kita siapkan folder css, image dalam satu directory. Dimana dalam folder css kita buat file baru dengan nama style.css dan dalam folder pages buat file baru juga dengan nama validasi-belanja.html, Selanjutnya kita buat kerangka terlebih dahulu dengan kode HTML.- validasi-belanja.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="Javascript toggle.js" type="text/JavaScript"></script>
<title>Validasi Belanja</title>
</head>
<body>
<nav>
<div class="wrapper-nav">
<div class="avatar">
<div class="img-usr-wrapper">
<img src="images/user.png" alt="avatar-user">
</div>
<div class="namaUser">
<h1>Mitra</h1>
</div>
</div>
<ul>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Belanja</a>
</li>
<li>
<a href="#">Penjualan</a>
</li>
<li>
<a href="#">Laporan</a>
</li>
</ul>
</div>
</nav>
<br/>
<div class="vb">
<h3>Rencana Belanja > Realisasi Belanja > <span style="color: #1E7A1B">Validasi Belanja</span></h3>
</div>
</div>
<br/>
<div class="wrapper-lanjut">
<h3 class="vali">Validasi Belanja</h3>
<button class="lj" type="submit">Lanjut</button>
</div>
<br/>
<div class="tab">
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Barang yang Terbeli</th>
<th>Satuan Beli</th>
<th>Harga Beli</th>
<th>Satuan Jual</th>
<th>Harga Jual</th>
</tr>
<tr>
<td class="no">1</td>
<td class="nama-produk">Kangkung</td>
<td class="no">3</td>
<td class="no">Ikat</td>
<td class="no">Rp. 6.000</td>
<td class="no">Ikat</td>
<td class="no">Rp. 3.000</td>
<td class="no"><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td class="no">2</td>
<td class="nama-produk">Ikan Lemuru</td>
<td class="no">2</td>
<td class="no">Kg</td>
<td class="no">Rp. 10.000</td>
<td class="no">Kg</td>
<td class="no">Rp. 14.000</td>
<td class="no"><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td class="no">3</td>
<td class="nama-produk">Cabai</td>
<td class="no">10</td>
<td class="no">Kg</td>
<td class="no">Rp. 60.000</td>
<td class="no">Ons</td>
<td class="no">Rp. 1.500</td>
<td class="no"><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td class="no">4</td>
<td class="nama-produk">Tomat</td>
<td class="no">10</td>
<td class="no">Kg</td>
<td class="no">Rp. 50.000</td>
<td class="no">Kg</td>
<td class="no">Rp. 6.000</td>
<td class="no"><button class="tombol-ubah-barang">Ubah</button></td>
<tr>
<td class="no">5</td>
<td class="nama-produk">Gula</td>
<td class="no">10</td>
<td class="no">Kg</td>
<td class="no">Rp. 120.000</td>
<td class="no">Kg</td>
<td class="no">Rp. 15.000</td>
<td class="no"><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td class="no">6</td>
<td class="nama-produk">Daging Ayam</td>
<td class="no">8</td>
<td class="no">Kg</td>
<td class="no">Rp. 128.000</td>
<td class="no">Kg</td>
<td class="no">Rp. 20.000</td>
<td class="no"><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td class="no">7</td>
<td class="nama-produk">Wortel</td>
<td class="no">5</td>
<td class="no">Kg</td>
<td class="no">Rp. 20.000</td>
<td class="no">Kg</td>
<td class="no">Rp. 5.000</td>
<td class="no"><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
</table>
</div>
</body>
</html>
- persediaan-barang.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Document</title>
</head>
<body>
<nav>
<div class="wrapper-nav">
<div class="avatar">
<div class="img-usr-wrapper">
<img src="images/user.png" alt="avatar-user">
</div>
<div class="namaUser">
<h2>Mitra</h2>
</div>
</div>
<ul>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Belanja</a>
</li>
<li>
<a href="#">Penjualan</a>
</li>
<li>
<a href="#">Laporan</a>
</li>
</ul>
</div>
</nav>
<br/>
<div class="pb">
<h2>Persediaan Barang</h2>
</div>
<br/>
<div class="pencarian">
<div class="search">
<i class="fas fa-search"></i></div>
<input type="text" name="" class="in" placeholder="Cari Barang">
</div>
</div>
<br/>
<div class="produk">
<div class="gambar">
<img src="images/cabai.png">
</div>
<div class="nama-produk">
<h2>Cabai</h2>
<h5>Harga Jual</h5>
<div class="wrapper-ds">
<h4>Rp. 600 /Ons</h4>
<div class="button-ds">
<button class="ds">Detail Stok</button>
<div class="stok">
<h4>Stok : 50 Ons</h4>
</div>
</div>
</div>
</div>
</div>
<hr>
<br/>
<div class="produk">
<div class="gambar">
<img src="images/tomat.jpg">
</div>
<div class="nama-produk">
<h2>Tomat</h2>
<h5>Harga Jual</h5>
<div class="wrapper-ds">
<h4>Rp. 600 /Ons</h4>
<div class="button-ds">
<button class="ds">Detail Stok</button>
<div class="stok">
<h4>Stok : 50 Ons</h4>
</div>
</div>
</div>
</div>
</div>
<hr>
<br/>
<div class="produk">
<div class="gambar">
<img src="images/daging ayam.jpg">
</div>
<div class="nama-produk">
<h2>Daging Ayam</h2>
<h5>Harga Jual</h5>
<div class="wrapper-ds">
<h4>Rp. 600 /Ons</h4>
<div class="button-ds">
<button class="ds">Detail Stok</button>
<div class="stok">
<h4>Stok : 50 Ons</h4>
</div>
</div>
</div>
</div>
</div>
<hr>
<br/>
<div class="icon-arrow">
<i class="fas fa-long-arrow-alt-right"></i>
</div>
<br/>
<div class="detail-stok">
<h3>Detail Stok : Cabai</h3>
</div>
<div class="el">
<table border="1">
<tr>
<th>Tanggal</th>
<th>Catatan</th>
<th>Masuk</th>
<th>Keluar</th>
<th>Unit</th>
<th>Harga</th>
<th>Jumlah</th>
</tr>
<tr>
<td class="no">01/10/2021</td>
<td>Persediaan Awal</td>
<td class="no"></td>
<td class="no"></td>
<td class="no">10 Ons</td>
<td class="no">Rp. 500</td>
<td class="no">Rp. 5.000</td>
</tr>
<tr>
<td class="no">02/10/2021</td>
<td>Pembelian</td>
<td class="no">100 Ons</td>
<td class="no"></td>
<td class="no">110 Ons</td>
<td class="no">Rp. 600</td>
<td class="no">Rp. 66.000</td>
</tr>
<tr>
<td class="no">05/10/2021</td>
<td>Penjualan</td>
<td class="no"></td>
<td class="no">30 Ons</td>
<td class="no">80 Ons</td>
<td class="no">Rp. 600</td>
<td class="no">Rp. 48.000</td>
</tr>
<tr>
<td class="no">06/10/2021</td>
<td>Penjualan</td>
<td class="no"></td>
<td class="no">40 Ons</td>
<td class="no">40 Ons</td>
<td class="no">Rp. 600</td>
<td class="no">Rp. 24.000</td>
<tr>
<td class="no">07/10/2021</td>
<td>Pembelian</td>
<td class="no">10 Ons</td>
<td class="no"></td>
<td class="no">50 Ons</td>
<td class="no">Rp. 400</td>
<td class="no">Rp. 20.000</td>
</tr>
</table>
</div>
</body>
</html>
Kode CSS
Setelah membuat kerangka seperti diatas, langkah selanjutnya untuk membuat css validasi belanja agar terlihat lebih menarik, berikut kode CSS@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
/* Penjualan Langsung */
nav {
background-color: white;
padding:10px 40px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 8px;
}
.wrapper-nav {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
}
.wrapper-nav ul{
list-style-type: none;
}
.wrapper-nav ul li{
float: left;
}
.wrapper-nav ul li a{
display: block;
text-decoration: none;
color : #1E7A1B;
padding : 0 10px;
}
.wrapper-nav ul li a:hover{
background-color: #1E7A1B;
color: white;
}
.img-usr-wrapper img {
border-radius: 50px;
background-color: #1E7A1B;
height: 50px;
}
.avatar {
display: flex;
align-items: center;
}
.avatar .namaUser {
padding-left : 10px;
color: #1E7A1B;
}
.vb{
font-size: 20px;
text-align: center;
color: #6e6e6e;
}
.pb{
margin-left: 40px;
color: #1E7A1B;
}
.vali{
text-align: left;
margin-left: 40px;
color: #1E7A1B;
font-size: 18px;
}
table{
margin-left: 20px;
background-color: #EAEAEA;
width: 1212px;
height: 350px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border: solid #1E7A1B;
border-collapse: collapse;
}
.nama-produk{
padding-left: 10px;
}
.no{
text-align: center;
}
.wrapper-lanjut{
display: flex;
justify-content: space-between;
padding-right: 40px;
}
.lj{
background-color: #1E7A1B;
font-size: 15px;
padding: 10px 25px;
border-radius: 10px;
color: white;
}
.lj:hover{
color: white;
background-color: #279e22;
}
.tab{
padding: 20px 20px;
}
.tombol-ubah-barang{
padding: 5px 15px;
border-radius: 12px;
color: white;
background-color: #1E7A1B;
}
.tombol-ubah-barang:hover{
background-color: #279e22;
color: white;
}
/* Persediaan Barang */
.wrapper-ds{
display: flex;
justify-content: space-between;
padding-right: 10px;
}
.icon-arrow{
margin-right: 60px;
text-align: right;
font-size: 60px;
}
.detail-stok {
color: red;
padding: 20px 20px;
margin: 2px 60px;
background-color: #C4C4C4;
}
.el{
margin: 2px 20px;
padding: 20px 20px;
}
.pencarian{
width:96%;
margin:5px 2%;
padding:15px 20px;
font-size: 25px;
border-radius: 10px;
background-color: #EAEAEA;
display: flex;
justify-content: left;
}
.in{
border: transparent;
background-color: #EAEAEA;
font-size: 25px;
}
.search{
color: #C4C4C4;
margin: 2px 20px;
padding: auto;
}
.ds{
background-color: #1E7A1B;
padding: 10px 20px;
font-size: 15px;
color: white;
border-radius: 10px;
margin-left: 919px;
}
.stok{
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
padding-top: 10px;
color: red;
margin-left: 919px;
}
.gambar{
display: flex;
justify-content: space-between;
width: 200px;
height: 150px;
}
.produk{
display: flex;
align-items: center;
}
.nama-produk{
align-items: flex-start;
}
Output
- Validasi Belanja
- Persedian Barang
Gambar diatas merupakan output dari codingan diatas yang telah dibuat. dimana outputnya sesuai dengan design prototype yang telah kita design di figma sebelumnya.
Komentar
Posting Komentar