=============

| index.php |
=============

1. Bikin table di xampp

2. Copy start template di bootstrap

3. Cari navbar (Search) lalu modif

- Buat .container dahulu lalu paste

4. Cari Typography (Alignment)

- Ubah jadi data buku yang tersedia dan di bawahnya CRUD : Create, Read, Update
dan Delete

- Di <figure class tambhakan mt-3 di dalam text-center

5. Cari Tables (Overview) Sesuaikan dengan tabel di xampp lalu modif

- Di table class Tambahkan table-hover, table-bordered, align-middle

- hapus row 2 dan row 3

6. edit scope=row seperti pada database

7. Cari buttons (primary) paste diatas <table class="table table-hover table-

bordered align-middle>

- Ganti primary jadi tambah

- Tambahkan mb-3 di class

8. Cari icon (plus) lalu copy html

- Paste setelah mb-3">...Tambah</button>

9. Tambahkan scope Aksi setelah Gambar

- <th scope="col">Aksi</th>

10. Cari icon (Pencil fill) lalu copy html

- Bikin <td></td> baru setelah <td><img src=" echo$data></td>

code = <svg xmlns="http: ....></svg>

- lalu paste

11. Cari icon (trash) lalu copy html

- paste di bawah <svg xmlns="http: ....></svg>

12. Ubah index.html jadi index.php

----------------
| CODE |
----------------
1. Diatas <tr> scope="row>1 buat code php

<?php
$query="select * from tb_buku";
$sql=mysqli_query($konek,$query);
$no=1;
while($data=mysql_fetch_array()){
?>

- Buka tag php dan tambahkan tutup kurawal di bawah </tr>

fungsinya untuk mengauto incrementkan id

<?php
$no++;
} ?>

2. Buka tag php di row 1 <td>Pemrograman Web</td> dan ganti (seuaikan dengan table)

<th scope="row"><?php echo $no; ?></th>

<td><?php echo $data['judul']; ?></td>
<td><?php echo $data['pengarang']; ?></td>
<td><?php echo $data['penerbit']; ?></td>
<td><?php echo $data['kategori']; ?></td>
<td><img src="gambar/<?php echo $data['gambar']?>" alt="Gambar" style width
100px;></td>

3. Tambahkan data mysql di phpmyadmin

===============
| koneksi.php |
===============

1. Buat file koneksi.php

2. Buat code untuk mengetahui apakah file yang kita buat terkoneksi dengan file
index dan isi

<?php
$konek=mysqli_connect("localhost","root","");
$db=mysqli_select_db($konek,"db_buku");
if($konek){
echo "Koneksi Berhasil"}?>

3. Buat koneksi di file index.php dan isi (Jika berhasil maka tampil di localhost
"Koneksi berhasil")

<?php
include 'koneksi.php';
?>

- Hapus code if($konek) di koneksi.php

 ============
| olah.php |
============

1. Buat file baru olah.php

2. Cari Starter templete lalu paste

- Hapus <h1>Hello wordl!</h1>

- Buat .container lalu paste di <div class="container">

- Copy dari <nav class="container"> sampai </figure> di <div class="container">

- Hapus <form class="d-flex">

- Hapus tag <button> ganti jadi <a href="olah.php" </a>

3. Cari Forms (Raadonly plain text) lalu copy html

- Copy <div>password

- Paste di bawah </figure>

- Modif tag <label for="password"> jadi <label for="judul">

- Modif tag <input type="password"> jadi <input type="text" id="judul"

name="judul"

4. Copy <div class="mb-3 row"> lalu paste menjadi 4 section

<label for="judul">Judul</label>
<label for="pengarang">Pengarang</label>
<label for="penerbit">Penerbit</label>
<label for="kategori">Kategori</label>
<label for="gambar">Gambar</label>
<div>
<select name="kategori" id="kategori" class-"form-control">
<option value="Umum">Umum</option>
<option value="Peminatan">Peminatan</option>
</select>
</div>

5. Cari button (Primary) lalu copy html

<button type="button” class="btn btn-primary”>Tambah Data</button>

6. Menghubungkan index.php atau memberi tahu id dari buku mana yang mau diedit
dengan cara tambahkan <a href="olah.php?id=<?php echo $data['id']; ?"> di samping
<svg xmlns="http: ... > dan penutup setelah </svg></a>

----------------
| CODE |
----------------

1. Ubah di Tombol Tambah yaitu "Tambah Data" menjadi "Simpan Perubahan" Maka di
olah.php kita harus bedakan dengan cara

<div class="mb-3 row">

 <button type="button" class="btn btn-primary">Tambah Data</button>

MENJADI =

<?php
if(isset($_GET['edit'])){
echo "<button type='button' class='btn btn-primary' name='btnProses'
value='edit'>Simpan Perubahan</button>";
}else{
echo "<button type='button' class='btn btn-primary' name='btnProses'
value='tambah'>Tambah Data</button>";
}
?>

2. Kita perlu membuat di atas <div><label>Judul</label> dengan code

<form action="proses.php" method="post">

dan tutup di bawah div if else </form>

==============
| proses.php |
==============

1. Buat file proses.php dan buat koneksi ke koneksi.php

<?php
include 'koneksi.php';
if(isset($_POST['btnProses'])){
if($_POST['btnProses']=="tambah"){
echo "tambah data";
}else {
echo "edit data";
}
}
?>

2.