BAB

CRUD + BOOTSTRAP

2.1 Tujuan

a. Mengetahui apa itu CRUD

b. Mengetahui cara pembuatan form crud menggunakan framework Bootstrap 5

2.2 Pembahasan

A. CRUD
CRUD adalah singkatan dari create, read, update, and delete. Keempat poin ini
menurut Techopedia merupakan fungsi-fungsi utama yang diimplementasikan dalam
aplikasi database.

Akronim CRUD mengidentifikasi semua fungsi utama yang melekat pada database
relasional dan aplikasi yang digunakan untuk mengelolanya, termasuk Oracle Database,
Microsoft SQL Server, MySQL, dan lainnya.

Create

Fungsi CRUD yang pertama adalah create. Fungsi ini memungkinkanmu

membuat record baru dalam database. Dalam aplikasi SQL, fungsi create sering disebut
juga sebagai insert.

Read

Fungsi read hampir mirip dengan fungsi search. Fungsi ini memungkinkan kamu untuk
mencari dan mengambil data tertentu dalam tabel dan membaca nilainya.
 Update

Untuk memodifikasi record yang telah tersimpan di database, fungsi CRUD yang bisa
kamu gunakan adalah fungsi update.

Delete

Ketika ada record atau data yang tidak lagi dibutuhkan dalam database, fungsi CRUD yang
digunakan adalah fungsi delete. Fungsi ini dapat digunakan untuk menghapus data tersebut.

B. Pengimplementasian Framework Bootsrap di sebuah websaite

Disini kita akan mencoba membuat sebuah Website yang berisikan Formulir untuk
menginput data mahasiswa dan melihat data nya dengan menggunakan framework
Bootsrap 5
1. Langkah pertama siapkan text editor yang akan digunakan untuk menaruh dan
menjalankan kodingan disini kita menggunakan visual studio code

2. Langkah berikutnya siapkan folder kosong lalu di beri nama IMKCRUD.

3. Simpan file di localhost dengan cara taruh file pada folder instalan XAMPP >> pilih
XAMPP >> htdocs lalu simpan file di dalam folder tersebut.

4. Setelah itu buka folder di visual studio code dengan cara klik File > Open Folder >
Pilih Folder IMKCRUD > Open
5. Setelah itu buat file baru didalam folder yang tadi telah kita buat cara nya klik
New File lalu beri nama file tersebut dengan index.php
6. Setelah itu kita buka bootstrap 5 di browser di sini kita menggunakan google chrome
Dengan cari di kolom pencarian dengan kata kunci getbootsrap.com

7. Stelah itu kita akan menulis scrip dasar bootstrap nya terlebih dahulu dengan cara
buka bootsrap> Docs > klik Getting started > introduction >setelah itu pilih started
Template

8. Selanjutnya setelah menemukan scrip dasar boostrap nya kita bias langsung copy
scrip nya setelah itu paste scrip di file index.php
 Paste scrip lalu hapus beberapa komentar pada scrip

 Menjadi seperti ini

 Kita lihat hasil nya pada browser kita dengan cara menuliskan url seperti ini
http://localhost/IMKCRUD/index.php

 Apabila tampilan sudah seperti itu maka koneksi bootsrap dan juga localhost sudah dapat
di gunakan, selanjutnya kita akan membuat form untuk wadah kita menginputkan data-
data pribadi mahasiswa
 Kita buka lagi bootstrap5 lalu kita cari CARD

 Pilih card Header and footer lalu copy script nya dan masukan ke text editor

 Hingga hasil nya seperti ini

 Selanjutnya kita akan memodifikasi card yang kita telah ambil dari bootsatrap sebagai
base kita untuk membuat sebuah formlir

1. Hapus beberapa code

2. Lalu tambahkan code

<div class="container"

Fungsing nya agar card kita akan menyesuaikan posisi atau layout yang telah ada pada
bootstrap

3. Setelah itu kita beri judul pada card nya dengan judul Formulir Data Mahasiswa dan
hasil nya seperti ini

4. Didalam card body kita akan membuat kolom-kolom untuk mengisikan data atau kita
akan membuat formulir di dalam sebuah card
 Setelah kita tambahkan code terdebut maka hasil nya akan seperti ini

 Selanjut nya buatlah beberapa kolom serupa dengan cara copy paste saja code ini

<form method="post" action="">

<div class="form-group">
<label>NPM</label>
<input type="text" name="npm" class="form-
control" placeholder="Input NPM anda disini" required />

Sesuaikan banyak kolom dengan data base yang akan dipakai pada formulir yang akan kita
buat nanti.

Contoh nya seperti ini

 Setelah kita berhasil membuat beberapa text input untuk form kita, kita disini akan
menambahkan tombol untuk simpan dan juga tobol reset cara nya kita buat dulu clas button
<button></button> seperti ini lalu taro kodingan tersebut di bawah dari form yang telah
kita buat

<button type="submit" class="btn btn-success mt-

3" name="bsimpan">Simpan</button>
<button type="reset" class="btn btn-danger mt-
3" name="breset">Reset</button>

Untuk button yang ber type submit merupakan metode dari button tersebut yang akan
menyimpan dan success itu untuk warna hijau pada tombol sedangkan untuk reset kita
tuliskan saja type nya dengan reset maka otomatis akan langsung berfungsi untuk mereset
itu semua karena kita menggunakan bootsrap

Hasil nya akan seperti ini

 Oke setelah formulir kita telah buat kita akan membuat sebuah tabel yang dimana nanti
akan menunjukan data yang telah kita simpan
 Cara nya kita gunakan lagi card dari bootsrap sama seperti kita membuat form atau tinggal
copy paste saja kodingan card sebelum nya lalu hapus semua body nya
 Beri judul Daftar mahasiswa
 maka hasil nya akan seperti ini

 Setelah itu kita buat tabel di dalam card daftar mahasiswa dengan menambahkan kodingan
seperti ini
  Dan Hasil nya akan seperti ini

Dan berikut tampilan interface darai formulir yang kita telah buat, untuk mengkoneksikan data
bese di dalam nya kita hanya perlu menambahkan beberapa script PHP
1. Scrpit koneksi dan untuk mengaktifkan tombol simpan
2. <?php
3. //koneksi database
4. $server = "localhost";
5. $user = "root";
6. $pass = "";
7. $database = "mahasiswa";
8.
9. $koneksi = mysqli_connect($server, $user, $pass, $database)or die(mys
qli_error($koneksi));
10.
11. //Tombol simpan
12. if(isset($_POST['bsimpan']))
13.
14. {
15. $npm = $_POST["npm"];
16. $nama = $_POST["nama"];
17. $email = $_POST["email"];
18. $alamat = $_POST["alamat"];
19. $jurusan = $_POST["jurusan"];
20. $fakultas = $_POST["fakultas"];
21. $agama = $_POST["agama"];
22. $no_tlp = $_POST["no_tlp"];
23.
24. $simpan = mysqli_query($koneksi, "INSERT INTO mhs VALUES('$npm','$n
ama','$email','$alamat','$jurusan', '$fakultas','$agama','$no_tlp')");
25. if($simpan)
26. {
27. echo "<script>
28. alert('data berhasil ditambah!');
29. document.location.href = 'index.php';
30. </script>";
31. }
32. else
33. {
34. echo "<script>
35. alert('data gagal ditambah!');
36. document.location.href = 'index.php';
37. </script>";
38. }
39. }
40.
41. ?>
Taruh Scrip ini di atas <!doctype html>

Lalu tambahkan script dibawah ini untuk mengaktifkan tabel data mahasiswa

<?php
$no = 1;
$tampil = mysqli_query($koneksi, "SELECT * from mhs order by
npm desc");
while($data = mysqli_fetch_array($tampil)) :
?>
<tr>
<td><?=$no++;?></td>
<td><?=$data['npm']?></td>
<td><?=$data['nama']?></td>
<td><?=$data['email']?></td>
<td><?=$data['alamat']?></td>
<td><?=$data['jurusan']?></td>
<td><?=$data['fakultas']?></td>
<td><?=$data['agama']?></td>
<td><?=$data['no_tlp']?></td>
<td>
<a href="#" class="btn btn-warning"> EDIT </a>
<a href="#" class="btn btn-danger"> HAPUS </a>
</td>
</tr>
<?php endwhile; //penutup perulangan?>

Taruh scrip ini di bawah tabel yang ada di card 2 yaitu card tabel mahasiswa

Untuk penjelasn lebih lanjut akan dijelaskan di parktikum basis data lanjut
Dan hasil nya sepertu ini