Cara Membuat Halaman Validasi Belanja 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 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, 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Validasi Belanja</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="./public/style/style.css">
</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="50" height="50" alt="">
<div class="namaUser">
<h1>Mitra</h1>
</div>
</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>
<br/>
<div class="vb">
<h1>Rencana Belanja > Realisasi Belanja ><span style="color: #1E7A1B;"> Validasi Belanja</span></h1>
</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>1</td>
<td>Kangkung</td>
<td>3</td>
<td>Ikat</td>
<td>Rp. 6.000</td>
<td>Ikat</td>
<td>Rp. 3.000</td>
<td class="no"><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td>2</td>
<td>Ikan Lemuru</td>
<td>2</td>
<td>Kg</td>
<td>Rp. 10.000</td>
<td>Kg</td>
<td>Rp. 14.000</td>
<td><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td>3</td>
<td>Cabai</td>
<td>10</td>
<td>Kg</td>
<td>Rp. 60.000</td>
<td>Ons</td>
<td>Rp. 1.500</td>
<td><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td>4</td>
<td>Tomat</td>
<td>10</td>
<td>Kg</td>
<td>Rp. 50.000</td>
<td>Kg</td>
<td>Rp. 6.000</td>
<td><button class="tombol-ubah-barang">Ubah</button></td>
<tr>
<td>5</td>
<td>Gula</td>
<td>10</td>
<td>Kg</td>
<td>Rp. 120.000</td>
<td>Kg</td>
<td>Rp. 15.000</td>
<td><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td>6</td>
<td>Daging Ayam</td>
<td>8</td>
<td>Kg</td>
<td>Rp. 128.000</td>
<td>Kg</td>
<td>Rp. 20.000</td>
<td><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
<tr>
<td>7</td>
<td>Wortel</td>
<td>5</td>
<td>Kg</td>
<td>Rp. 20.000</td>
<td>Kg</td>
<td>Rp. 5.000</td>
<td><button class="tombol-ubah-barang">Ubah</button></td>
</tr>
</table>
</div>
</body>
<script src="javascript-toogle.js" type="text/JavaScript"></script>
</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;
}
.bg-green{
background-color : #1E7A1B;
}
.navbar-item {
color : #1E7A1B;
font-size: 18px;
}
.navbar-end .navbar-item:hover {
color: white;
background-color : green;
border-radius: 10px;
}
.navigasi {
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: 10px;
}
.img-usr-wrapper {
background-color: #1E7A1B;
}
a {
color : #1E7A1B;
}
.namaUser {
padding-left : 20px;
font-size: 30px;
color: #1E7A1B;
}
.navbar-brand .navbar-item img {
max-height: 50px;
background-color: #1E7A1B;
border-radius: 50%;
}
.vb{
font-size: 30px;
text-align: center;
color: #6e6e6e;
}
.wrapper-lanjut{
display: flex;
justify-content: space-between;
padding-right: 40px;
}
.vali{
text-align: left;
margin-left: 40px;
color: #1E7A1B;
font-size: 20px;
}
.lj{
background-color: #1E7A1B;
font-size: 15px;
padding: 10px 25px;
border-radius: 10px;
color: white;
}
.lj:hover{
color: white;
background-color: green;
}
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;
text-align: center;
color: rgb(0, 0, 0);
}
.tab{
padding: 5px 20px;
margin-left: 20px;
}
.tombol-ubah-barang{
padding: 5px 15px;
border-radius: 12px;
color: white;
background-color: #1E7A1B;
}
.tombol-ubah-barang:hover{
background-color: green;
color: white;
}
.but{
text-align: center;
}
Kode JS
Kemudian kita buat js agar website menjadi responsive, berikut kodenya
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');
});
});
}
});
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
Output
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