Skip to content

Instantly share code, notes, and snippets.

@uluumbch

uluumbch/create.html

Created May 19, 2023 11:20
Show Gist options
  • Save uluumbch/02790bfb0b8120a0af83f2542223a190 to your computer and use it in GitHub Desktop.
Save uluumbch/02790bfb0b8120a0af83f2542223a190 to your computer and use it in GitHub Desktop.
Download ZIP
CRUD TEMPLATE BOOTSTRAP 5 WITH LOGIN
Raw
create.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">
<title>Home</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Tambah Data Buku</h2>
</div>
<div class="col-3">
<form action="" method="post">
<div class="mb-3">
<label for="judul" class="form-label">Judul</label>
<input type="text" class="form-control" id="judul" name="judul">
</div>
<div class="mb-3">
<label for="penulis" class="form-label">penulis</label>
<input type="text" class="form-control" id="penulis" name="penulis">
</div>
<div class="mb-3">
<label for="penerbit" class="form-label">penerbit</label>
<input type="text" class="form-control" id="penerbit" name="penerbit">
</div>
<div class="mb-3">
<label for="tahun_terbit" class="form-label">tahun terbit</label>
<input type="text" class="form-control" id="tahun_terbit" name="tahun_terbit">
</div>
<button type="submit" class="btn btn-primary">tambah</button>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">
</script>
</body>
</html>
Raw
edit.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">
<title>Edit Data</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Edit Data Buku</h2>
</div>
<?= var_dump($buku) ?>
<div class="col-3">
<form action="<?= base_url('/buku/'. $buku['id'] . '/edit') ?>" method="post">
<div class="mb-3">
<label for="judul" class="form-label">Judul</label>
<input type="text" class="form-control" id="judul" name="judul" value="<?= $buku['judul'] ?>">
</div>
<div class="mb-3">
<label for="penulis" class="form-label">penulis</label>
<input type="text" class="form-control" id="penulis" name="penulis" value="<?= $buku['penulis'] ?>">
</div>
<div class="mb-3">
<label for="penerbit" class="form-label">penerbit</label>
<input type="text" class="form-control" id="penerbit" name="penerbit" value="<?= $buku['penerbit'] ?>">
</div>
<div class="mb-3">
<label for="tahun_terbit" class="form-label">tahun terbit</label>
<input type="text" class="form-control" id="tahun_terbit" name="tahun_terbit" value="<?= $buku['tahun_terbit'] ?>">
</div>
<!-- <div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div> -->
<button type="submit" class="btn btn-primary">edit</button>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">
</script>
</body>
</html>
Raw
index.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">
<title>Home</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="pt-5 d-flex justify-content-between">
<div class="col">
<h1>Selamat Datang di Perpustakaan</h1>
<p>Ini adalah halaman home</p>
</div>
<div class="">
<a href="" class="btn btn-danger">Logout</a>
</div>
</div>
<!-- create list of books -->
<div class="row">
<div class="col-12">
<h2>Daftar Buku</h2>
<a class="btn btn-success" href="">Tambah Data</a>
</div>
<div class="col-12">
<table class="table">
<thead>
<tr>
<th>Judul</th>
<th>Penulis</th>
<th>Penerbit</th>
<th>Tahun Terbit</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pemrograman Web I</td>
<td>Bachrul Uluum</td>
<td>PT. Gramedia</td>
<td>2024</td>
<td>
<a href="" class="btn btn-sm btn-warning">Edit</a>
<a href="" class="btn btn-sm btn-danger">Hapus</a>
</td>
</tr>
<tr>
<td>Pemrograman Web I</td>
<td>Bachrul Uluum</td>
<td>PT. Gramedia</td>
<td>2024</td>
<td>
<a href="" class="btn btn-sm btn-warning">Edit</a>
<a href="" class="btn btn-sm btn-danger">Hapus</a>
</td>
</tr>
<tr>
<td>Pemrograman Web I</td>
<td>Bachrul Uluum</td>
<td>PT. Gramedia</td>
<td>2024</td>
<td>
<a href="" class="btn btn-sm btn-warning">Edit</a>
<a href="" class="btn btn-sm btn-danger">Hapus</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
Raw
login.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">
<title>Login</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<body>
<div class="container w-50 ">
<main class="form-signin w-100 m-auto text-center">
<form>
<h1 class="h3 mb-3 fw-normal">CRUD Login</h1>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<button class="w-100 mt-2 btn btn-lg btn-primary" type="submit">Sign in</button>
</form>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment