Pratikum Pemograman Web II

Modul
1 CRUD Menggunakan PHP PDO
Pada modul ini kita akan mempelajari bagaimana penerapan PDO untuk
database MYSQL di PHP. Kita akan membangun project sederhana untuk menampilkan
data, edit, tambah, dan hapus (CRUD) di php.

Persiapan
1. Install apliksi XAMPP untuk menjalankan project yang akan dibuat.
2. Buatlah sebuah database dengan nama db_karyawan, kemudian buatlah sebuah table
dengan struktur table sebagai berikut:

Figure 1 Desain Tabel

3. Selanjutnya buatlah dua buah record untuk mengisi table yang sudah dibuat.
[Silahkan isi dengan data sesuai dengan kolom yang ada].
4. Untuk desain tampilan download lah library CSS Bootstrap pada link berikut
[https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css].
5. Siapkan sebuah folder untuk menyimpan project pada webserver anda. Disini kita
menggunakan XAMPP maka simpan lah folder project anda didalam folder
HTDOCS. Misalkan nama foder project adalah web_pdo.
6. Selanjutnya simpanlah file CSS yang di download didalam folder web_pdo,
kemudian siapkan 4 file PHP berikut:

1
D-IV Rekayasa Perangkat Lunak
 Pratikum Pemograman Web II

Figure 2 Tampilan File Project

Pembuatan Project
1. Karena kita akan membuat crud dengan konsep OOP, sehingga perintah yang
digunakan untuk berkomunikasi dengan database akan di letakkan pada sebuah class,
dan akan dibagi pada masing – masing method, class tersebut akan kita buat didalam
file library.php. berikut code untuk library.php.

1. <?php
2. class Library
3. {
4. public function __construct()
5. {
6. $host = "localhost";
7. $dbname = "db_karyawan";
8. $username = "root";
9. $password = "root";
10. $this->db = new PDO("mysql:host={$host};dbname={$dbname}", $username, $password);
11. }
12. public function add_data($nama_karyawan, $divisi, $alamat)
13. {
14. $data = $this->db->prepare('INSERT INTO tb_karyawan (nama_karyawan,divisi,alamat) VALUES (?, ?, ?)');

15. $data->bindParam(1, $nama_karyawan);

16. $data->bindParam(2, $divisi);
17. $data->bindParam(3, $alamat);

18. $data->execute();
19. return $data->rowCount();
20. }
21. public function show()
22. {
23. $query = $this->db->prepare("SELECT * FROM tb_karyawan");
24. $query->execute();
25. $data = $query->fetchAll();
26. return $data;
27. }

28. public function get_by_id($id_karyawan){

29. $query = $this->db->prepare("SELECT * FROM tb_karyawan where id_karyawan=?");
30. $query->bindParam(1, $id_karyawan);
31. $query->execute();
32. return $query->fetch();
33. }

34. public function update($id_karyawan,$nama_karyawan,$divisi,$alamat){

35. $query = $this->db->prepare('UPDATE tb_karyawan set nama_karyawan=?,divisi=?,alamat=? where id_karyawan=?');

36. $query->bindParam(1, $nama_karyawan);

37. $query->bindParam(2, $divisi);
38. $query->bindParam(3, $alamat);
39. $query->bindParam(4, $id_karyawan);

40. $query->execute();
41. return $query->rowCount();
42. }

43. public function delete($id_karyawan)

44. {
45. $query = $this->db->prepare("DELETE FROM tb_karyawan where id_karyawan=?");

46. $query->bindParam(1, $id_karyawan);

47. $query->execute();
48. return $query->rowCount();
49. }

50. }
51. ?>

Penjelasan:

2
D-IV Rekayasa Perangkat Lunak
 Pratikum Pemograman Web II

 Pada line 4 fungsi [function __construct] adalah perintah untuk terkoneksi dengan
database.
o Variable dengan nama $host digunakan untuk menyimpan alamat server database,
menggunakan alamat localhost
o Variabel dengan nama $dbname digunakan untuk menyimpan nama database, dalam
contoh ini adalah db_karyawan
o Variabel dengan nama $username digunakan untuk menyimpan user dari database,
dalam hal ini adalah root
o Variabel dengan nama $password digunakan untuk menyimpan password dari
database, dalam hal ini kita buat kosong karena standart password database mysql
untuk xampp adalah kosong
 Pada line 10 kita melakukan koneksi ke database dengan menggunakan function PDO,
dengan menyertakan parameter yang sebelumnya nilainya kita buat dalam sebuah
variabel, dan hasil koneksi kita simpan di variabel $db.

2. Selanjutnya file index.php digunakan untuk menampilkan data yang terkoneksi ke

database. Berikut code file index:
1. <?php
2. include('library.php');
3. $lib = new Library();
4. $data_karyawan = $lib->show();
5. if(isset($_GET['hapus_karyawan']))
6. {
7. $id_karyawan = $_GET['hapus_karyawan'];
8. $status_hapus = $lib->delete($id_karyawan);
9. if($status_hapus)
10. {
11. header('Location: index.php');
12. }
13. }
14. ?>
15. <html>
16. <head>
17. <title></title>
18. <link rel="stylesheet" href="bootstrap.min.css">
19. </head>
20. <body>
21. <div class="container">
22. <div class="card">
23. <div class="card-header">
24. <h3>Data Karyawan</h3>
25. </div>
26. <div class="card-body">
27. <a href="form_add.php" class="btn btn-success">Tambah</a>
28. <hr/>
29. <table class="table table-bordered" width="60%">
30. <tr>
31. <th>No</th>
32. <th>Nama</th>
33. <th>Divisi</th>
34. <th>Alamat</th>
35. <th>Action</th>
36. </tr>
37. <?php
38. $no = 1;
39. foreach($data_karyawan as $row)
40. {
41. echo "<tr>";
42. echo "<td>".$no."</td>";
43. echo "<td>".$row['nama_karyawan']."</td>";
44. echo "<td>".$row['divisi']."</td>";
45. echo "<td>".$row['alamat']."</td>";
46. echo "<td><a class='btn btn-info' href='form_edit.php?id_karyawan=".$row['id_karyawan']."'> Update</a>
47. <a class='btn btn-danger' href='index.php?hapus_karyawan=".$row['id_karyawan']."'> Hapus</a></td>";
48. echo "</tr>";
49. $no++;
50. }
51. ?>
52. </table>
53. </div>
54. </div>
55. </div>
56. </body>
57. </html>

3
D-IV Rekayasa Perangkat Lunak
 Pratikum Pemograman Web II

Penjelasan

 Line 2 kita include file library.php yang berisi class Library yang sebelumnya telah kita
buat.
 Line 3 kita membuat object dengan nama $lib dengan menggunakan class Library.
 Line 4 kita buat variabel $data_karyawan digunakan untuk menyimpan hasil
pengembalian data saat kita mengakses method show() pada class Library
 Perhatikan isi dari method show pada class Library (file library.php) line 21, kita
menuliskan query pada line 23, dengan menggunakan $this->db->prepare itu merupakan
fungsi PDO yang digunakan untuk menuliskan query SQL hasil query disimpan di
variabel $query, kenapa kita menggunakan $this->db karena variabel ini yang
menyimpan koneksi ke database.
 Line 24 (library.php) kita menjalankan perintah query dengan menggunakan perintah
$query->execute()
 Line 25 (library.php) kita menuliskan perintah $query->fetchAll() untuk mendapatkan
hasil query, dan menyimpannya kedalam variabel $data, berikutnya kita return variabel
$data, untuk mengembalikan hasil query yang telah disimpan di variabel $data.
 Line 4 (index.php) variabel $data_karyawan sudah berisi data Karyawan hasil return
dari method show pada class Library.
 Line 39 (index.php) kita menggunakan perintah foreach untuk extract data yang ada di
variabel $data_karyawan, dan untuk menampilkan isi masing – masing kolom, kita
harus menyebutkan nama kolom pada elemen array (Line 42 – 45 file index.php)
 Line 46 (index.php) kita membuat tombol edit yang mengakses file form_edit.php
dengan mengirimkan variabel id_karyawan dengan method get dengan nilai dari kolom
id_karyawan.
 Line 47 (index.php) kita membuat tombol delete yang mengakses file ini sendiri
index.php dengan mengirimkan variabel hapus_karyawan dengan method get dengan
nilai dari kolom id_karyawan
 Line 27 kita membuat tombol tambah, yang mengakses file form_add.php yang
nantinya akan berisi form untuk menambahkan data.

3. Selanjutnya kita akan membuat form untuk menambahkan data dengan koding
sebagai berikut:
1. <?php
2. include('library.php');
3. $lib = new Library();
4. if(isset($_POST['tombol_tambah'])){
5. $nama_karyawan = $_POST['nama_karyawan'];
6. $divisi = $_POST['divisi'];
7. $alamat = $_POST['alamat'];
8.
9. $add_status = $lib->add_data($nama_karyawan, $divisi, $alamat);
10. if($add_status){
11. header('Location: index.php');
12. }
13. }
14. ?>
15. <html>
16. <head>
<title></title>

4
D-IV Rekayasa Perangkat Lunak
 Pratikum Pemograman Web II

<link rel="stylesheet" href="bootstrap.min.css">

17. </head>
18. <body>
19. <div class="container">
<div class="card">
<div class="card-header">
<h3>Tambah Data karyawan</h3>
</div>
<div class="card-body">
<form method="post" action="">
<div class="form-group row">
<label for="nama_karyawan" class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-10">
<input type="text" name="nama_karyawan" class="form-control" id="nama_karyawan">
</div>
</div>
<div class="form-group row">
<label for="divisi" class="col-sm-2 col-form-label">Divisi</label>
<div class="col-sm-10">
<input type="text" name="divisi" class="form-control" id="divisi">
</div>
</div>
<div class="form-group row">
<label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
<div class="col-sm-10">
<textarea class="form-control" name="alamat" id="alamat"></textarea>
</div>
</div>
<div class="form-group row">
<label for="alamat" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input type="submit" name="tombol_tambah" class="btn btn-primary" value="Tambah">
</div>
</div>
</form>
</div>
</div>
20. </div>
21. </body>
22. </html>

Penjelasan:
 Pada tag form dengan attribute action=”” artinya form akan diproses di file yang sama,
lalu menggunakan method post.
 Line 2 (form_add.php) kita include file library.php yang berisi class Library yang
sebelumnya telah kita buat
 Line 3 (form_add.php) kita membuat object dengan nama $lib dengan menggunakan
class Library.
 Line 4 (form_add.php) kita melakukan pengecekan apakah tombol tambah diklik
dengan menggunakan perintah isset, jika tombol tambah diklik maka akan menjalankan
code dibaris 5 – 7
 Line 5 (form_add.php) kita menangkap isi dari inputan nama_karyawan dari form
 Line 6 (form_add.php) kita menangkap isi dari inputan divisi dari form
 Line 7 (form_add.php) kita menangkap isi dari inputan alamat dari form
 Line 9 (form_add.php) kita mengakses method add_data pada class Library, dengan
mengirimkan beberapa parameter, antara lain : $nama_karyawan, $divisi, dan $alamat.
 Perhatikan pada line 12 (Library.php) kita membuat function add_data
 Line 14 (Library.php) kita membuat query insert dengan menuliskannya pada bagian
prepare statement, perhatikan kita membuat 3 tanda tanya, jumlah tanda tanya ini kita
samakan dengan jumlah kolom yang akan di isi.
 Line 16,17,18 (Library.php) kita mengisikan nilai pada tanda tanya tersebut, dengan
menggunakan perintah bindParam, tanda panah pertama dengan nilai variabel
$nama_karyawan, kedua dengan nilai $divisi, dan ketiga dengan nilai $alamat, dan kita
jalankan query tersebut dengan perintah $data->execute (line 20), lalu kita return jumlah
data yang berhasil ditambahkan dengan perintah return $data->rowCount();
 Sehingga saat data berhasil diinsert maka akan redirect halaman ke index.php perintah
ini diatur pada line 10 – 11 file form_add.php.

5
D-IV Rekayasa Perangkat Lunak
 Pratikum Pemograman Web II

4. Terakhir kita akan membuat form untuk mengubah data dengan koding sebagai
berikut:
<?php
include('library.php');
$lib = new Library();
if(isset($_GET['id_karyawan'])){
$id_karyawan = $_GET['id_karyawan'];
$data_karyawan = $lib->get_by_id($id_karyawan);
}
else
{
header('Location: index.php');
}

if(isset($_POST['tombol_update'])){
$id_karyawan = $_POST['id_karyawan'];
$nama_karyawan = $_POST['nama_karyawan'];
$divisi = $_POST['divisi'];
$alamat = $_POST['alamat'];
$status_update = $lib->update($id_karyawan,$nama_karyawan,$divisi,$alamat);
if($status_update)
{
header('Location:index.php');
}
}
?>
<html>
<head>
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h3>Update Data karyawan</h3>
</div>
<div class="card-body">
<form method="post" action="">
<input type="hidden" name="id_karyawan" value="<?php echo $data_karyawan['id_karyawan']; ?>"/>
<div class="form-group row">
<label for="nama_karyawan" class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-10">
<input type="text" name="nama_karyawan" class="form-control" id="nama_karyawan"
value="<?php echo $data_karyawan['nama_karyawan']; ?>">
</div>
</div>
<div class="form-group row">
<label for="divisi" class="col-sm-2 col-form-label">Divisi</label>
<div class="col-sm-10">
<input type="text" value="<?php echo $data_karyawan['divisi']; ?>" name="divisi"
class="form-control" id="divisi">
</div>
</div>
<div class="form-group row">
<label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
<div class="col-sm-10">
<textarea class="form-control" name="alamat" id="alamat"><?php echo
$data_karyawan['alamat']; ?></textarea>
</div>
</div>
<div class="form-group row">
<label for="alamat" class="col-sm-2 col-form-label"></label>
<div class="col-sm-10">
<input type="submit" name="tombol_update" class="btn btn-primary" value="Update">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

Penjelasan:

 Line 2 (form_edit.php) kita include file (library.php) yang berisi class Library yang
sebelumnya telah dibuat.
 Line 3 (form_edit.php) kita membuat object dengan nama $lib dengan menggunakan
class Library.

6
D-IV Rekayasa Perangkat Lunak
 Pratikum Pemograman Web II

 Line 4 (form_edit.php) dilakukan pengecekan apakah saat file form_edit.php ini

diakses, juga menyertakan variabel id_karyawan dengan method get.
 Line 5 (form_edit.php) kita menangkap value dari variabel id_karyawan dengan method
get, dan menyimpannya pada variabel $ id_karyawan.
 Line 6 (form_edit.php) kita mengakses function get_by_id pada class Library dengan
menyertakan variabel $id_karyawan yang berisi data nilai id_karyawan yang akan
diedit.
 Line 31 (library.php) kita telah membuat function get_by_id yang digunakan untuk
menampilkan data karyawan, sesuai id_karyawan yang dikirimkan, dengan
menggunakan prepare statement, dan hasil nilainya akan di return pada file
form_edit.php
 Line 6 (form_edit.php) kita telah mendapatkan data karyawan yang diinginkan dan
disimpan pada variabel $data_karyawan.

5. Hasil:

Figure 3 Tampilan File Index

Figure 4 Tampilan Form Tambah Data

7
D-IV Rekayasa Perangkat Lunak
 Pratikum Pemograman Web II

Figure 5 Tampilan Form Update Data

8
D-IV Rekayasa Perangkat Lunak
 Pratikum Pemograman Web II

Latihan.
1. Buatlah sebuah DATABASE baru kemudian tambahkan 2 tabel baru pada
Database yang Ananda buat selanjutnya tambahkan 2 Record baru untuk setiap
table.
2. Buatlah halaman index yang berisikan navigasi menuju halaman untuk
menampilkan isi dari salah satu tabel yang sudah dibuat pada point 1.
3. Tambahkan FORM TAMBAH, UPDATE dan HAPUS data untuk melakukan
CRUD pada masing-masing table. Untuk Update dan Hapus tambahkan
Javasript untuk menampilkan Pesan Konfirmasi.
Contoh: “Data anda sudah ditambahkan!” atau “Anda yakin data ini dihapus?”
Berikut mapping halaman web yang akan dibuat:

Halaman
Index

Halaman Halaman
Tabel 1 Tabel 2

Form Form Form Form

Input Update Input Update

Figure 6 Mapping Tugas

Note
 Durasi pengerjaan sampai tanggal 20 Agusutus 2020
 Teknis pengumpulan tugas akan disampikan H-1

9
D-IV Rekayasa Perangkat Lunak