Berikut code html "tambah produk" dengan react CLI
pertama kita buat file html biasa dengan nama tambahProduk.html, di dalam body kita membuat form dan button untuk mengirimkan data.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgih
eMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<script src="./public/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>
<a href="/index.html" class="button mx-5 mt-5 green">
<i class="fas fa-arrow-left pr-2 green"></i>Kembali</a>
<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</label>
<div class="control">
<input type="text" class="input ">
</div>
</div>
<div class="masukan mb-2 px-5">
<label for="inputNama" class="label">Harga</label>
<div class="control">
<input type="text" class="input ">
</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>
<div class="hscroll">
<table class="table">
<thead>
<tr>
<td>No</td>
<td>Nama Produk</td>
<td>Jumlah</td>
<td>Satuan</td>
<td>Harga</td>
<td>Total Harga</td>
<td>Aksi</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kangkung</td>
<td>5</td>
<td>Ikat</td>
<td>Rp. 4000</td>
<td>Rp. 20.000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Lemuru</td>
<td>3</td>
<td>Kg</td>
<td>Rp. 4000</td>
<td>Rp. 20.000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Cabai</td>
<td>10</td>
<td>Kg</td>
<td>Rp. 4000</td>
<td>Rp. 20.000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah
</button>
</td>
</tr>
<tr>
<td>4</td>
<td>Tomat</td>
<td>10</td>
<td>Kg</td>
<td>Rp. 4000</td>
<td>Rp. 20.000</td>
<td>
<button class="button is-rounded bg-green white is-small">Ubah
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="is-flex mx-4">
<label for="harga total">Total Bayar : </label>
<div class="harga-total">Rp 80.000</div>
</div>
<button class="button bg-green white is-rounded my-5 mx-4"type="submit">
Simpan
</button>
</body>
</html>
Output
Komentar
Posting Komentar