Membuat Tambah Produk dengan React CLI

 

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