Cara Membuat Halaman Realisasi Belanja dan Detail Produk dengan Bulma - 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 Realisasi Belanja dan Detail Produk dengan Bulma.
Sebelum membuat kita harus mempunyai patokan design prototypenya terlebih dahulu untuk mempermudah. disini saya sudah mempunyai design prototype wlijo halaman Realisasi Belanja dan Detail Produk, seperti dibawah ini:
Realisasi Belanja
Detail Produk
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 realisasiBelanja-bulma.html dan detailProduk-bulma.html Selanjutnya kita buat kerangka terlebih dahulu dengan kode HTML.
realisasiBelanja-bulma.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">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="./assets/script/script.js"></script>
</head>
<body>
<nav class="navbar navigasi" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="./image/user.png" class="avatar" width="40" height="40" alt="">
<h2 class="title is-size-3-desktop is-size-5-mobile pl-2 green">Ridho Ganteng</h2>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Dashboard
</a>
<a class="navbar-item">
Belanja
</a>
<a class="navbar-item">
Penjualan
</a>
<a class="navbar-item">
Laporan
</a>
</div>
</div>
</nav>
<form action="" class="my-5 is-size-4 mobile pl-2 has-text-centered"><h1>Rencana Belanja ><span style="color: #1E7A1B"> Realisasi Belanja</span> > Validasi Belanja</h1>
<br/>
<div class="px-5 is-justify-content-space-between is-flex is-align-items-center">
<label for="inputNama" class="label is-size-4" style="color: #1E7A1B;">Realisasi Belanja</label>
<button class="button bg-green white is-rounded " type="submit">Lanjut</button>
</div>
</form>
<div class="hscroll">
<table class="table">
<thead>
<tr>
<td>No</td>
<td>Ada</td>
<td>Nama Produk</td>
<td>Rencana Pembelian</td>
<td>Satuan Rencana</td>
<td>Jumlah Pembelian</td>
<td>Satuan Pembelian</td>
<td>Harga Beli</td>
<td>Aksi</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<label class="checkbox">
<input type="checkbox" checked="checked">
</label>
</td>
<td>Kangkung</td>
<td>5</td>
<td>Ikat</td>
<td>3</td>
<td>Ikat</td>
<td>6000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<label class="checkbox">
<input type="checkbox" checked="checked">
</label>
</td>
<td>Lemuru</td>
<td>3</td>
<td>Kg</td>
<td>2</td>
<td>Kg</td>
<td>10000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah</button>
</td>
</tr>
<tr>
<td>3</td>
<td>
<label class="checkbox">
<input type="checkbox" checked="checked">
</label>
</td>
<td>Cabai</td>
<td>10</td>
<td>Kg</td>
<td>10</td>
<td>Ons</td>
<td>60000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah</button>
</td>
</tr>
<tr>
<td>4</td>
<td>
<label class="checkbox">
<input type="checkbox" checked="checked">
</label>
</td>
<td>Tomat</td>
<td>10</td>
<td>Kg</td>
<td>10</td>
<td>Kg</td>
<td>5000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah</button>
</td>
</tr>
<tr>
<td>5</td>
<td>
<label class="checkbox">
<input type="checkbox">
</label>
</td>
<td>Gula Merah</td>
<td>10</td>
<td>Kg</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>6</td>
<td>
<label class="checkbox">
<input type="checkbox" checked="checked">
</label>
</td>
<td>Gula</td>
<td>10</td>
<td>Kg</td>
<td>10</td>
<td>Kg</td>
<td>120000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah</button>
</td>
</tr>
<tr>
<td>7</td>
<td>
<label class="checkbox">
<input type="checkbox">
</label>
</td>
<td>Pakcoy</td>
<td>10</td>
<td>Ikat</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>8</td>
<td>
<label class="checkbox">
<input type="checkbox" checked="checked">
</label>
</td>
<td>Daging Ayam</td>
<td>10</td>
<td>Kg</td>
<td>8</td>
<td>Kg</td>
<td>128000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah</button>
</td>
</tr>
<tr>
<td>9</td>
<td></td>
<td>Wortel</td>
<td>-</td>
<td>-</td>
<td>5</td>
<td>Kg</td>
<td>20000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah</button>
</td>
</tr>
</tbody>
</table>
</div>
<form action="" class="is-flex is-flex-direction-column form my-6 ">
<div class="masukan mb-2 px-5">
<label for="inputNama" class="label">Nama Produk</label>
<div class="control">
<input type="text" class="input ">
</div>
</div>
<div class="masukan mb-2 px-5">
<label for="inputNama" class="label">Jumlah Pembelian</label>
<div class="control">
<input type="text" class="input ">
</div>
</div>
<div class="masukan mb-2 px-5">
<label for="inputNama" class="label">Satuan</label>
<div class="select">
<select>
<option>Ons</option>
<option>Kg</option>
<option>Liter</option>
<option>Ikat</option>
<option>Buah</option>
</select>
</div>
</div>
<div class="masukan mb-2 px-5">
<label for="inputNama" class="label">Kategori</label>
<div class="select">
<select>
<option>Sayur</option>
<option>Buah</option>
<option>Ikan</option>
<option>Daging</option>
<option>Bumbu Dapur</option>
</select>
</div>
</div>
</div>
<div class="masukan my-2 px-5">
<div class="control">
<button class="button bg-green white is-rounded " type="submit">Tambah</button>
</div>
</div>
</form>
</body>
</html>
detailProduk-bulma.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">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="./assets/script/script.js"></script>
</head>
<body>
<nav class="navbar navigasi" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="./image/user.png" class="avatar" width="40" height="40" alt="">
<h2 class="title is-size-3-desktop is-size-5-mobile pl-2 green">Ridho Ganteng</h2>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Dashboard
</a>
<a class="navbar-item">
Belanja
</a>
<a class="navbar-item">
Penjualan
</a>
<a class="navbar-item">
Laporan
</a>
</div>
</div>
</nav>
<form action="" class="my-5 is-size-4 mobile pl-2 px-5">
<div class="my-5">
<label for="inputNama" class="label is-size-4" style="color: #1E7A1B;">Persediaan Barang</label>
</div>
<div class="control has-icons-left">
<input class="input is-large" placeholder="Cari Produk">
<span class="icon is-medium is-left">
<i class="fas fa-search"></i>
</span>
</div>
</form>
<div class="px-5 py-5" style="background-color: rgb(252, 227, 227);">
<form class="px-5 is-justify-content-space-between is-flex is-align-items-center">
<div class="is-flex is-align-items-center has-text-left">
<img class="image is-128x128" src="./image/cabai.png">
<div class="px-5">
<div class="is-size-5-mobile is-size-4-desktop">Cabai</div>
<div>Harga Jual</div>
<div class="is-size-5-mobile is-size-4-desktop" style="color: green;">Rp. 600 /Ons</div>
</div>
</div>
<div>
<button class="button" style="color: white; background-color: green;">Detail Stok</button>
<div style="color: red;">Stok : 50 Ons</div>
</div>
</form>
<br/>
<div class="block mx-1 tp-border"></div>
<form class="px-5 is-justify-content-space-between is-flex is-align-items-center">
<div class="is-flex is-align-items-center has-text-left">
<img class="image is-128x128" src="./image/tomat.jpg">
<div class="px-5">
<div class="is-size-5">Tomat</div>
<div>Harga Jual</div>
<div class="is-size-5" style="color: green;">Rp. 10.000 /Kg</div>
</div>
</div>
<div>
<button class="button" style="color: white; background-color: green;">Detail Stok</button>
<div style="color: red;">Stok : 2 Kg</div>
</div>
</form>
<br/>
<div class="block mx-1 tp-border"></div>
<form class="px-5 is-justify-content-space-between is-flex is-align-items-center">
<div class="is-flex is-align-items-center has-text-left">
<img class="image is-128x128" src="./image/daging ayam.jpg">
<div class="px-5">
<div class="is-size-5">Daging Ayam</div>
<div>Harga Jual</div>
<div class="is-size-5" style="color: green;">Rp. 10.000 /Ons</div>
</div>
</div>
<div>
<button class="button" style="color: white; background-color: green;">Detail Stok</button>
<div style="color: red;">Stok : 50 Kg</div>
</div>
</form>
</div>
<div class="buttons is-right px-5 my-3">
<button class="button control has-icons-right is-size-3 is-ghost">
<span class="icon is-large" style="color: black;">
<i class="fas fa-arrow-right fa-stack-2x"></i>
</span>
</button>
</div>
<div class="box is-size-5 mx-5" style="color: red; background-color: rgb(179, 179, 179);">Detail Stok : Cabai</div>
<div class="hscroll">
<table class="table">
<thead>
<tr>
<td>Tanggal</td>
<td>Catatan</td>
<td>Masuk</td>
<td>Keluar</td>
<td>Unit</td>
<td>Harga</td>
<td>Jumlah</td>
</tr>
</thead>
<tbody>
<tr>
<td>01/10/2021</td>
<td>Persediaan Awal</td>
<td></td>
<td></td>
<td>10 Ons</td>
<td>500</td>
<td>5000</td>
</tr>
<tr>
<td>02/10/2021</td>
<td>Pembelian</td>
<td>100 Ons</td>
<td></td>
<td>110 Ons</td>
<td>600</td>
<td>66000</td>
</tr>
<tr>
<td>05/10/2021</td>
<td>Penjualan</td>
<td></td>
<td>30 Ons</td>
<td>80 Ons</td>
<td>600</td>
<td>48000</td>
</tr>
<tr>
<td>06/10/2021</td>
<td>Penjualan</td>
<td></td>
<td>40 Ons</td>
<td>40 Ons</td>
<td>600</td>
<td>24000</td>
</tr>
<tr>
<td>07/10/2021</td>
<td>Pembelian</td>
<td>10 Ons</td>
<td></td>
<td>50 Ons</td>
<td>400</td>
<td>20000</td>
</tr>
<tr>
<td>01/10/2021</td>
<td>Persediaan Awal</td>
<td></td>
<td></td>
<td>10 Ons</td>
<td>500</td>
<td>5000</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
Kode CSS
Setelah membuat kerangka seperti diatas, langkah selanjutnya untuk membuat css Realisasi Belanja dan Detail Produk agar terlihat lebih menarik, berikut kode CSS
style.css
.white{
color : white;
}
.gray{
color : gray;
}
.green {
color : green;
}
.navbar-item {
color : green;
font-size: medium;
}
.navbar-end .navbar-item:hover {
color: white;
background-color : green;
border-radius: 50px;
}
.navigasi {
padding:10px 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.bg-green {
background-color: green;
}
.navbar-brand .navbar-item img {
max-height: 50px;
background-color: green;
border-radius: 50%;
}
.divi {
border-right: 2px solid gray;
}
.active {
color: green;
}
div.aksi .button:hover {
color: white;
}
.btm-border {
border-bottom: 2px solid green;
}
.tp-border {
border-top: 2px solid green;
}
.masukan {
width: 80
}
form.form{
max-width: 1000px;
}
.hscroll {
overflow-x: auto;
padding : 10px;
margin: 10px;
}
Kode JS
Kemudian kita buat js agar website menjadi responsive, berikut kodenya
script.js
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
Output
Realisasi Belanja
Komentar
Posting Komentar