Membuat Website Wlijo Realisasi Belanja Menggunakan HTML dan CSS

-

   

Cara Membuat Realisasi Belanja dengan HTML & CSS - Setiap halaman website tentunya kita sering menjumpai tampilan design berupa teks pada menunya 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 Realisasi Belanja dengan HTML & CSS.

Sebelum membuat kita harus mempunyai patokan design prototypenya terlebih dahulu untuk mempermudah. disini saya sudah mempunyai design prototype wlijo halaman home, 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 realisasiBelanja.css dan dalam folder pages buat file baru juga dengan nama realisasiBelanja.html,  Selanjutnya kita buat menu kerangka realisasi belanja terlebih dahulu dengan kode 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="assets/css/realisasiBelanja.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet">

<link rel="shortcut icon" href="../WLIJO/image/logo.png">
<title>Wlijo</title>
</head>
<body>
<nav>
<div class="wrapper-nav">
<div class="avatar">
<div class="img-usr-wrapper">
<img src="../WLIJO/image/user.png" alt="avatar-user">
</div>
<div class="namaUser">
<h2>Mitra Ria</h2>
</div>
</div>
<ul>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Belanja</a>
</li>
<li>
<a href="#">Penjualan</a>
</li>
</ul>
</div>
</nav>
<div class="text-rencana">
<span class="satu1">Rencana Belanja</span>
<span class="dua2"> > Realisasi Belanja</span>
<span class="satu1"> > Validasi Belanja</span>
</div>
<div class="text1-rencana">
<p>Realisasi Belanja</p>
</div>
<button class="button-lanjut">Lanjut</button>
<table class="table1">
<tr>
<th>No</th>
<th>Ada</th>
<th>Nama</th>
<th>Rencana Pembelian</th>
<th>Satuan</th>
<th>Jumlah Pembelian</th>
<th>Satuan</th>
<th>Harga Beli</th>
<th>Aksi</th>
</tr>
<tr>
<td>1</td>
<td><input type='checkbox' name='tersedia1' value='' checked='checked' /></td>
<td>Kangkung</td>
<td>5</td>
<td>Ikat</td>
<td>3</td>
<td>Ikat</td>
<td>6000</td>
<td>
<button class="button-ubah">Ubah</button>
</td>
</tr>
<tr>
<td>2</td>
<td><input type='checkbox' name='tersedia1' value='' checked='checked' /></td>
<td>Lemuru</td>
<td>3</td>
<td>Kg</td>
<td>2</td>
<td>Kg</td>
<td>10000</td>
<td>
<button class="button-ubah">Ubah</button>
</td>
</tr>
<tr>
<td>3</td>
<td><input type='checkbox' name='tersedia1' value='' checked='checked' /></td>
<td>Cabai</td>
<td>10</td>
<td>Kg</td>
<td>10</td>
<td>Kg</td>
<td>60000</td>
<td>
<button class="button-ubah">Ubah</button>
</td>
</tr>
<tr>
<td>4</td>
<td><input type='checkbox' name='tersedia1' value='' checked='checked' /></td>
<td>Tomat</td>
<td>10</td>
<td>Kg</td>
<td>10</td>
<td>Kg</td>
<td>50000</td>
<td>
<button class="button-ubah">Ubah</button>
</td>
</tr>
<tr>
<td>5</td>
<td><input type='checkbox' name='tersedia1' value='' checked='checked' /></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><input type='checkbox' name='tersedia1' value='' checked='checked' /></td>
<td>Gula</td>
<td>10</td>
<td>Kg</td>
<td>10</td>
<td>Kg</td>
<td>120000</td>
<td>
<button class="button-ubah">Ubah</button>
</td>
</tr>
<tr>
<td>7</td>
<td><input type='checkbox' name='tersedia1' value='' checked='checked' /></td>
<td>Pakcoy</td>
<td>10</td>
<td>Ikat</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>8</td>
<td><input type='checkbox' name='tersedia1' value='' checked='checked' /></td>
<td>Daging Ayam</td>
<td>10</td>
<td>Kg</td>
<td>8</td>
<td>Kg</td>
<td>128000</td>
<td>
<button class="button-ubah">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-ubah">Ubah</button>
</td>
</tr>
</table>
<form class="form">
<label>Nama Barang</label>
<input class="lb1" type="text" placeholder="Nama Barang"></br>
<div class="dua">
<div class="wrap">
<label>Jumlah Pembelian</label><br>
<input type="text" placeholder="Jumlah" class="lb2">
</div>
<div class="wrap">
<label>Satuan</label><br>
<input type="text" placeholder="Pilih Satuan" class="lb2">
</div>
</div>
<label>Kategori</label>
<input class="lb1" type="text" placeholder="Pilih Kategori">
<button class="button-tambah">Tambah</button>
</form>
</body>
</html>

Kode CSS

Setelah membuat kerangka menu seperti diatas, langkah selanjutnya untuk membuat menu realisasi belanja terlihat lebih menarik kita akan desain menunya dengan kode CSS berikut.
@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;
}
.body{
background-color: rgb(233, 233, 233);
}

/*Awal Style Realisasi-Belanja*/
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);
}
.wrapper-nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.wrapper-nav ul{
list-style-type: none;
}
.wrapper-nav ul li{
float: left;
}
.wrapper-nav ul li a{
display: block;
text-decoration: none;
color :green;
padding : 0 10px;
}
.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;
}
.text-rencana{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
text-align: center;
font-weight: bold;
margin-top: 50px;
display: flex;
text-align: center;
padding-left: 33%;
}
.satu1{color: #717171;}
.dua2{color: #1E7A1B;}
.text1-rencana p{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: large;
font-weight: bold;
text-align: left;
color: #1E7A1B;
margin-top: 70px;
margin-left: 35px;
}
.table1 {
font-family: sans-serif;
color: #444;
border-collapse: collapse;
width: 50%;
border: 1px solid #f2f5f7;
margin-top: 40px;
margin-left: 16%;
}
.table1 tr th{
background: #1E7A1B;
color: #fff;
font-weight: normal;
border: 1px solid #fff;
margin-left: 35px;
}
.table1, th, td {
padding: 8px 20px;
border: 1px solid #1E7A1B;
text-align: center;
}
.table1 tr:hover {
background-color: #f5f5f5;
}
.table1 tr:nth-child(even) {
background-color: #f2f2f2;
}
.form{
margin-top: 70px;
}
.lb1 {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #1E7A1B;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 35px;
}
.lb2 {
width: 300px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #1E7A1B;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 35px;
}
.dua {
width: 52.5%;
display: flex;
justify-content: space-between;
}
.tiga {
width: 52.5%;
display: flex;
justify-content: space-between;
}
label{
margin-left: 35px;
margin-top: 5px;
}
.button-lanjut{
width: 100px;
height: 40px;
border: none;
background-color:#1E7A1B;
font-size: 14px;
color: #fafafa;
border-radius: 10px;
cursor: pointer;
margin-left: 1195px;
margin-top: 10px;
}
.button-tambah{
width: 100px;
height: 40px;
border: none;
background-color:#1E7A1B;
font-size: 14px;
color: #fafafa;
border-radius: 10px;
cursor: pointer;
margin-left: 30px;
margin-top: 10px;
}
.button-ubah{
width: 65px;
height: 25px;
border: none;
background-color:#1E7A1B;
font-size: small;
color: #fafafa;
border-radius: 10px;
cursor: pointer;
}
/*Akhir Style Realisasi-Belanja*/

Output



Gambar diatas merupakan output dari codingan HTML dan CSS yang telah kita buat. dimana outputnya sesuai dengan design prototype yang telah kita design di figma sebelumnya. Next, kita lanjutkan pada halaman selanjutnya ya teman-teman...see you!!

Komentar

Posting Komentar

Postingan populer dari blog ini

Design Prototype Checkout Wlijo di Figma

-
Gambar
  Pengertian Prototype      Definisi umum dari  prototype  adalah sebuah skema rancangan sistem yang membentuk model dan standar ukuran atau skalabilitas yang akan dikerjakan nantinya. Setiap pengembang maupun pengguna dapat berinteraksi langsung dengan model tersebut tanpa harus membuat produk nyatanya.   Sistem prototipe yang dibangun, menyesuaikan dengan kebutuhan awal  development software  untuk mengetahui beberapa fitur dan fungsi yang telah didefinisikan sebelumnya. Sehingga mampu mengetahui kesalahan lebih awal sebelum mengimplementasikan dan merilis produk secara keseluruhan. Tujuan Penggunaan Prototype      Lantas, apa tujuan sebenarnya dari pembuatan sebuah  prototype ? Tujuan utamanya adalah supaya produk yang akan dirilis sesuai dengan permintaan  user  atau pasar. Sehingga, peran dari prototipe sendiri adalah menjadi penghubung antara produsen dan konsumen untuk dapat mewujudkan produk berupa perang...
Baca selengkapnya

Cara Membuat Web Server Statis dengan Python

-
Gambar
  Gambar diatas merupakan ilustrasi yang dapat membantu pemahaman kalian bagaimana model komunikasi antara server dengan client dan protokol RFC yang terkait dengan komunikasi data tersebut.  Nah RFC atau kepanjangan dari Request For Comments itu serial dokumen protokol standar yang diterbitkan oleh lembaga-lembaga internasional dibawah naungan Intenet Society (ISOC). Sampai saat ini, ISOC itu sendiri masih dibawah koordinasi World Wide Web Consortium (W3C). Dimana W3C itu sendiri, sampai artikel ini saya tulis masih dikepalai oleh Tim Berners-Lee, sang penemu www itu sendiri. Dokumen pertama kali yang ditulis oleh tim penyunting RFC tercatat mulai tahun 1968. Dan dari tahun 1968 itu dokumen RFC terus bertambah sampai sekarang. Jumlah dokumen RFC sejak tahun 1968 sampai tahun 2020 tercatat sudah mencapai angka 8.715 dokumen. Delapan ribu dokumen protokol standar inilah yang akhirnya dipatuhi oleh berbagai macam kalangan, terutama pengembang aplikasi world wide web dan aplikasi...
Baca selengkapnya

Belajar Cara Kerja Komputer dan Assembler Menggunanakan NASM

-
Gambar
    Komputer merupakan perangkat listrik dimana kosakata bahasanya hanya ON yang dilambangkan angka 1 dan OFF yang dilambangkan angka 0. Dimana angka biner 0 artinya arus listrik diputus, sedangkan 1 artinya arus listrik tersambung.     Jaman dahulu, pada saat komputer generasi awal dibuat, teknologinya yang ada masih menggunakan tabung vakum. Sehingga 1 unit komputer merk Electronic Numerical Integrator and Computer (ENIAC), dibuat dari 18.000 tabung vakum, 70.000 resistor dan 5 juta titik solder. Komputer ENIAC ini setidaknya butuh ruang 500 meter persegi atau hampir seluas lapangan sepak bola. berbeda dengan saat ini yang ukurannya sudah sangat kecil. Bagaimana Cara Kerja Komputer? Komputer tidak menyimpan karakter sebagai karakternya sendiri, juga tidak ada gambar dan huruf yang tersimpan di harddisk komputer kita. Sebaliknya, setiap karakter dikodekan sebagai rangkaian bit biner : 1 dan 0 Misalnya kode huruf "A" adalah 01000001. Tapi bagaimana komputer mengetahu...
Baca selengkapnya