Study Case : Membuat Aplikasi Perpustakaan dengan PDO dan Bootstrap. Assalamualaikum, halo semuanya kembali lagi di sahretech. Kali ini saya akan berbagi tutorial dalam studi kasus cara membuat aplikasi CRUD (create, read, update, dan delete) perpustakaan dengan menggunakan ekstensi PDO yang ada di php, dan untuk mempermudah pembuatan tampilan saya akan menggunakan bootstrap
Pengertian PDO
Diartikan lansung dari website php.net. PDO adalah singkatan dari php data object, yaitu ekstensi ringan yang digunakan sebagai interface (penghubung) untuk mengakses basis data di php. Setiap basis data yang menggunakan PDO dapat mengekspos fitur spesifik basis data sebagai fungsi ekstensi reguler.PDO dapat digunakan di semua basis data yang mendukungnya. Berbeda dengan myqsli extension yang hanya dapat digunakan pada database mysql saja. Sehingga apabila suatu hari kalian ingin migrasi dari mysql ke PostgreSQL, kalian hanya perlu menggati cara memanggil PDOnya saja dan seluruh kode program akan bisa langsung dijalankan. Dan inilah salah satu alasan kenapa banyak orang mulai beralih menggunakan PDO.
Selain dapat digunakan hampir di semua basis data yang mendukungnya. PDO juga telah mendukung pemrograman berorientasi objek (PBO). Karena alasan itu penerapannya sedikit berbeda dibandingkan saat kalian menggunakan mysqli extension. Ok tidak masalah, yang penting pada tutorial kali ini kalian punya php yang sudah versi 5.1 ke atas.
Cara Mengaktifkan PDO Extension pada Xampp
Tidak semua DBMS secara default mengaktifkan ekstensi PDO, hal ini mungkin berkaitan dengan masalah performa, sehingga php menonaktifkan beberapa driver database seperti Oracle atau postgreSQL.
Untuk menghidupkan ekstensi PDO kita harus merubah settingan pada file php.ini. Untuk mencari file php.ini kalian bisa buka folder xampp > php > php.ini. Lalu search kata "pdo". Hasilnya akan tampil seperti gambar di bawah ini. Dan untuk mengaktifkan ekstensinya, hapus tanda titik koma (;) yang berada di awal baris pada driver yang ingin digunakan. Jika sudah ctrl + s untuk menyimpan. Dan jangan lupa untuk merestart xampp kalian.
 |
| Cara menghidupkan ekstensi PDO pada pengaturan php |
Membuat Aplikasi CRUD dengan Menggunakan PDO Extension
- 1. Buat database baru dengan nama perpustakaan, lalu buat table baru dengan nama buku dan buatlah field-fieldnya seperti gambar di bawah ini
 |
| Struktur tabel buku |
- 2. Buat folder baru di dalam folder htdocs dan beri nama "perpustakaan".
- 3. Buat file baru bernama koneksi.php lalu isi file tersebut dengan script di bawah ini.
<?php
$servername = "localhost";
$username = "root";
$password = "";
//membuat koneksi ke database
try {
$conn = new PDO("mysql:host=$servername;dbname=perpustakaan", $username, $password);
// Pengaturan koneksi ke database
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//echo "Connected successfully";
}catch(PDOException $e){
echo "Connection failed: " . $e->getMessage();
}
?>
- 4. Jalankan file tersebut, buka browser kalian dan ketik localhost/perpustakaan/koneksi.php jika hasilnya seperti gambar di bawah maka kalian telah berhasil mengkoneksikan database kalian dengan PDO extension
- 5. Buat file index.php isi file tersebut dengan script di bawah ini.
<html>
<head>
<!--menggunakan bootstrap CDN untuk mendapatkan source-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.1/css/scroller.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<!--memberi jarak-->
<br>
<div class="container">
<div class="jumbotron"> <!--memberi efek kotak berwarna abu-abu dengan class jumbotron-->
<button data-toggle="modal" data-target="#modaltambah" class="btn btn-danger">Tambah Data Buku</button>
<!--Modal untuk tambah data buku-->
<div class="modal fade" id="modaltambah" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="proses.php?proses=tambah&id=" method="post">
<div class="formgroup">
<label>Nama Buku</label>
<input type="text" name="namabuku" class="form-control" placeholder="Silahkan Masukan Nama Buku">
</div>
<div class="formgroup">
<label>Jenis Buku</label>
<select name="jenisbuku" class="form-control">
<option value="Agama">Agama</option>
<option value="Teknik">Teknik</option>
<option value="Komputer">Komputer</option>
<option value="Humor">Humor</option>
<option value="Sains">Sains</option>
</select>
</div>
<div class="formgroup">
<label>Pengarang</label>
<input type="text" name="pengarang" class="form-control" placeholder="Silahkan Masukan Nama Pengarang Buku">
</div>
<div class="formgroup">
<label>tahunterbit</label>
<input type="year" name="tahunterbit" class="form-control" placeholder="Silahkan Masukan Tahun Terbit">
</div>
<div class="formgroup">
<label>penerbit</label>
<input type="text" name="penerbit" class="form-control" placeholder="Silahkan Masukan Penerbit">
</div>
<div class="formgroup">
<label>ISBN</label>
<input type="text" name="isbn" class="form-control" placeholder="Silahkan Masukan No ISBN">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<br>
<br>
<table class="table table-striped" id="example" style="width:100%"> <!--menggunakan datatable client side-->
<thead>
<tr>
<th>No</th>
<th>Nama Buku</th>
<th>Pengarang</th>
<th>Tahun Terbit</th>
<th>Penerbit</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$no=1;
$sql = "SELECT * FROM buku";
$data = $conn->query($sql);
foreach($data as $hasil){ ?>
<tr>
<td><?=$no++; ?></td>
<td><?=$hasil['namabuku'];?></td>
<td><?=$hasil['pengarang'];?></td>
<td><?=$hasil['tahunterbit'];?></td>
<td><?=$hasil['penerbit'];?></td>
<td>
<button data-toggle="modal" data-target="#modaledit<?=$hasil['idbuku']; ?>" class="btn btn-primary">Edit</button>
<div class="modal fade" id="modaledit<?=$hasil['idbuku']; ?>">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="proses.php?proses=edit&id=<?=$hasil['idbuku'];?>" method="post">
<div class="formgroup">
<label>Nama Buku</label>
<input type="text" name="namabuku" value="<?=$hasil['namabuku'];?>" class="form-control" placeholder="Silahkan Masukan Nama Buku">
</div>
<div class="formgroup">
<label>Jenis Buku</label>
<select name="jenisbuku" class="form-control">
<option <?=$hasil['jenisbuku'] == 'Agama' ? 'selected':''; ?> value="Agama">Agama</option>
<option <?=$hasil['jenisbuku'] == 'Teknik' ? 'selected':''; ?> value="Teknik">Teknik</option>
<option <?=$hasil['jenisbuku'] == 'Komputer' ? 'selected':''; ?> value="Komputer">Komputer</option>
<option <?=$hasil['jenisbuku'] == 'Humor' ? 'selected':''; ?> value="Humor">Humor</option>
<option <?=$hasil['jenisbuku'] == 'Sains' ? 'selected':''; ?> value="Sains">Sains</option>
</select>
</div>
<div class="formgroup">
<label>Pengarang</label>
<input type="text" name="pengarang" class="form-control" value="<?=$hasil['pengarang'];?>" placeholder="Silahkan Masukan Nama Pengarang Buku">
</div>
<div class="formgroup">
<label>tahunterbit</label>
<input type="text" name="tahunterbit" class="form-control" value="<?=$hasil['tahunterbit'];?>" placeholder="Silahkan Masukan Tahun Terbit">
</div>
<div class="formgroup">
<label>penerbit</label>
<input type="text" name="penerbit" class="form-control" value="<?=$hasil['penerbit'];?>" placeholder="Silahkan Masukan Penerbit">
</div>
<div class="formgroup">
<label>ISBN</label>
<input type="text" name="isbn" class="form-control" value="<?=$hasil['ISBN'];?>" placeholder="Silahkan Masukan No ISBN">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<a href="proses.php?proses=hapus&id=<?=$hasil['idbuku'];?>" class="btn btn-danger">Hapus</button>
</td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.1/js/dataTables.scroller.min.js"></script>
</body>
</html>
Penjelasan :
Baris 3 - 9 : memanggil source css dan js bootstrap
Baris 15 : membuat kotak abu-abu
Baris 16, 96 : membuat tombol trigger modal
Baris 19 - 68, 96 - 97 : membuat modal dialog untuk tambah dan edit data
Baris 29 - 65, 107 - 142 : membuat form tambah dan edit data
Baris 71 : menggunakan datatable client side
Baris 84 : memanggil file koneksi.php
Baris 86 : membuat query tampil data dan dimasukkan ke dalam variabel $sql
Baris 87 : mengambil data
Baris 88 - 150 : menampilkan data dengan fungsi foreach, semua data yang akan diulang dimasukkan kedalam foreach
Baris 155- 162 : script untuk pakai datatable client side
- 6. Buat file proses.php dan isi file tersebut dengan script di bawah ini
<?php
error_reporting(0);
include 'koneksi.php';
$id = $_GET['id'];
$proses = $_GET['proses'];
$namabuku = $_POST['namabuku'];
$jenisbuku = $_POST['jenisbuku'];
$pengarang = $_POST['pengarang'];
$tahunterbit = $_POST['tahunterbit'];
$penerbit = $_POST['penerbit'];
$isbn = $_POST['isbn'];
if($proses == "tambah"){
$sql = "INSERT INTO buku (namabuku,jenisbuku,pengarang,tahunterbit,penerbit,ISBN) VALUES ('$namabuku','$jenisbuku','$pengarang','$tahunterbit','$penerbit','$isbn')";
$data = $conn->prepare($sql);
$hasil = $data->execute([$namabuku,$jenisbuku,$pengarang,$tahunterbit,$penerbit,$isbn]);
if($hasil){
echo
'<script>alert("Berhasil");window.location="index.php";</script>';
}else{
echo
'<script>alert("Gagal");window.location="index.php";</script>';
}
}elseif($proses == "edit"){
$sql = "UPDATE buku set namabuku='$namabuku',jenisbuku='$jenisbuku',pengarang='$pengarang',tahunterbit='$tahunterbit',penerbit='$penerbit',ISBN='$isbn' WHERE idbuku='$id'";
$data = $conn->prepare($sql);
$hasil = $data->execute([$namabuku,$jenisbuku,$pengarang,$tahunterbit,$penerbit,$isbn]);
if($hasil){
echo
'<script>alert("Berhasil");window.location="index.php";</script>';
}else{
echo
'<script>alert("Gagal");window.location="index.php";</script>';
}
}elseif($proses == 'hapus'){
$sql = "DELETE FROM buku WHERE idbuku='$id'";
$data = $conn->prepare($sql);
$hasil = $data->execute([$id]);
if($hasil){
echo
'<script>alert("Berhasil");window.location="index.php";</script>';
}else{
echo
'<script>alert("Gagal");window.location="index.php";</script>';
}
}
?>
Penjelasan :
Baris 2 : error_reporting() berfungsi untuk menhiraukan error yang terjadi
Baris 3 : memanggil file koneksi.php
Baris 4 - 11 : menyimpan variabel yang dikirm dari form sebelumnya
Baris 13 - 23, 24 - 34, 35 - 45 : menggunakan if else if
Baris 14, 25, 36 : menyiapkan query yang disimpan ke dalam variabel $sql
Baris 15 - 16, 26 - 27, 37 - 38 : menyiapkan data dan mengeksekusinya
Baris 17 - 23, 28 - 34, 39 - 45 : jika eksekusi berhasil dijalankan maka tampil pesan dan kembali ke halaman index
- 7. Jalankan aplikasi perpustakaan kalian, ketik localhost/perpustakaan, maka hasilnya akan tampak seperti gambar di bawah ini
Bagaimana, apakah kalian tertarik untuk beralih menggunakan PDO ?. Untuk pemula penggunaannya bisa kita samakan dengan penggunaan mysqli extension. Selanjutnya kita harus belajar lebih dalam bagaimana menggunakan Php berorientasi objek. Ok bagi kalian yang kesulitan bisa download soruce codenya di github saya. Klik tombol download di bawah ini !
Mudah-mudahan dengan studi kasus penggunaan PDO ini bisa memudahkan kalian untuk memahami bagaimana PDO bekerja.Ok, cukup sekian tutorial Study Case : Membuat Aplikasi CRUD Perpustakaan dengan PDO dan Bootstrap. Lebih kurangnya saya mohon maaf, dan apabila ada pertanyaan, kritik dan saran silahkan tinggalkan di kolom komentar di bawah ini. Happy coding :)
No comments
Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik
Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi