Skip to content

Instantly share code, notes, and snippets.

@dirumahrafif
Last active May 23, 2023 17:06
Show Gist options
  • Save dirumahrafif/85a56f6af4dac62dda7e6585bb8dade4 to your computer and use it in GitHub Desktop.
Save dirumahrafif/85a56f6af4dac62dda7e6585bb8dade4 to your computer and use it in GitHub Desktop.
Simple form to display data books
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Buku</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body class="bg-light">
<main class="container">
<!-- START FORM -->
<div class="my-3 p-3 bg-body rounded shadow-sm">
<form action='' method='post'>
<div class="mb-3 row">
<label for="judul" class="col-sm-2 col-form-label">Judul Buku</label>
<div class="col-sm-10">
<input type="text" class="form-control" name='judul' id="judul">
</div>
</div>
<div class="mb-3 row">
<label for="nama" class="col-sm-2 col-form-label">Pengarang</label>
<div class="col-sm-10">
<input type="text" class="form-control" name='pengarang' id="pengarang">
</div>
</div>
<div class="mb-3 row">
<label for="tanggal_publikasi" class="col-sm-2 col-form-label">Tanggal Publikasi</label>
<div class="col-sm-10">
<input type="date" class="form-control w-50" name='tanggal_publikasi' id="tanggal_publikasi">
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-10"><button type="submit" class="btn btn-primary" name="submit">SIMPAN</button>
</div>
</div>
</form>
</div>
<!-- AKHIR FORM -->
<!-- START DATA -->
<div class="my-3 p-3 bg-body rounded shadow-sm">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-1">No</th>
<th class="col-md-4">Judul</th>
<th class="col-md-3">Pengarang</th>
<th class="col-md-2">Tanggal Publikasi</th>
<th class="col-md-2">Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Laskar Pelangi</td>
<td>Andrea Hirata</td>
<td>2020-02-01</td>
<td>
<a href="" class="btn btn-warning btn-sm">Edit</a>
<a href="" class="btn btn-danger btn-sm">Del</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- AKHIR DATA -->
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment