PERTEMUAN KE-5 CRUD

Capaian Pembelajaran

Mahasiswa mampu memahami dan mendemonstrasikan cara membuat program sederhana menggunakan perintah CRUD

Bahan Pokok Pembelajaran

Pengertian CRUD
Fungsi CRUD
Contoh penggunaan CRUD
Tugas

Indikator Penilaian

Ketetapan mahasiswa dalam menangani bahan dari pokok pembelajaran

1. Pengertian CRUD

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

Beriukut ini adalah diagram dari CRUD:

Gambar 5.1. Contoh Digaram CRUD

2. Fungsi dari CRUD

Berikut ini adalah fungsi create, read, update, and delete CRUD:

a. Create

Fungsi CRUD yang pertama adalah create. Fungsi ini memungkinkan kita membuat record (data) baru dalam database. Dalam aplikasi SQL, fungsi create sering disebut juga sebagai insert.

b. Read

Fungsi read hampir mirip dengan fungsi search. Fungsi ini memungkinkan kita untuk mencari dan mengambil data tertentu dalam tabel dan membaca nilainya. Kita dapat menemukan record yang di inginkan menggunakan kata kunci, atau dengan memfilter data berdasarkan kriteria yang di inginkan.

c. Update

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

Namun, perlu mengubah berbagai informasi terkait agar bisa memodifikasi record yang diinginkan secara utuh. Record yang ada dalam database harus diubah dan semua nilai atribut diubah untuk mencerminkan karakteristik baru yang diinginkan.

d. 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.

3. Contoh Studi Kasus CRUD

Pada pembahasan ini kita akan membuat program sederhana yang bisa melakukan perintah CRUD. Dimana untuk studi kasus yang akan dilesaikan yaitu Silahkan buat program sederhana untuk pengelolaan data karyawan pt XYZ.

Adapun contoh studi kasus seperti gambar dibawah ini:

Gambar 5.2. Studi Kasus

Berikut ini merupakan Langkah-langkah yang harus di lakukan dalam penyelesai studi kasus diatas:

a. Mengaktifkan Xampp

Sebelum memulai sebuah pekerjaan di PHP, kita harus terlebih dahulu mengaktifkan Xampp control agar bisa masuk kedalam webserver.

Berikut ini adalah contoh dari pengaktifkan xampp control seperti gambar dibawah ini:

Gambar 5.3. Mengaktifkan Xampp

b. Membuat Folder Baru

Setelah Xampp sudah aktif seperti gambar diatas, selanjutnya adalah membuat folder baru di folder Xampp. Folder ini yang nantinya akan menampung proyek CRUD yang akan di buat.

Berikut ini merupakan cara membuat folder baru di Xampp Yaitu silahkan buka folder tempat saudara menginstal Xampp (biasanya pada DATA C, XAMPP, HTDOCTS, dan Buat Folder di dalam HTDOCTS dengan nama folder “Proyek_CRUD”).

Adapun bentuk susunan foldernya seperti gambar dibawah ini:

Gambar 5.4. Folder Proyek CRUD

c. Buka Text Editor

Membuka Kembali aplikasi text editor yang di pakai dalam pembuatan proyek CRUD. Untuk text editor yang dipakai pada buku adalah Sublime Text. Kemudian silahkan panggil atau masukan folder proyek_CRUD yang sudah dibuat sebelumnya kedalam aplikasi text editor. Adapun Langkah-langkah yang digunakan seperti yang sudah dijelaskan pada bagian sebelumnya.

Berikut ini adalah tampilan halaman text editor ketika sudah berhasil memasukan folder proyek_CRUD ke dalam text editor.

Gambar 5.5. Tampilan Text Editor

d. Membuka Halaman Web Server

Web Server adalah serangkaian perangkat yang memudahkan pengguna ketika mengakses website. Web server terdiri dari hardware dan software yang menerima permintaan HTTP/HTTPS dari klien atau web browser. Setelah itu, web server kembali mengirimkan respon atas permintaan tersebut kepada client dalam bentuk halaman web. Webserver yang digunakan pada pembahasan ini adalah Xampp.

Silahkan buka xampp di browser dengan cara menulis “localhost/phpmyadmin” pada URL browser yang dimiliki sehingga tampil halaman webserver seperti gambar berikut ini:

Gambar 5.6. Tampilan Web Server

e. Membuat Database

Langkah selanjutnya membuat database dan table dengan nama database “db_karyawan” selanjutnya nama table “tb_karyawan”. Untuk “ID” nya, pada bagian index nya yaitu primary dan Auto nya di ceklis seperti gambar di bawah.

Gambar 5.7. Database

f. Meginput Data Di Database

Setelah database berhasil dibuat seperti pada gambar diatas, selanjutnya adalah menginputkan data ke dalam database tersebut. Berikut ini adalah contoh data yang sudah di input ke database pada tabel tb_karyawan:

Gambar 5.8. Input Data ke Database

Pada gambar diatas terdapat 3 buah data yang sudah di inputkan pada db_karyawan yaitu ada darmansah, sarah dan shandy.

g. Membuat halaman Index.php

Setelah pada tahapan sebelumnya sudah menginputkan data ke dalam database, selanjutnya adalah membuat halaman index.php. halaman ini nanti yang akan menampilkan semua data yang kita input ke database.

Berikut adalah Langkah-langkah yang di gunakan saat membuat file index.php:

a) Membuat File Baru Pada Text Editor

Silahkan buat file baru pada text editor yang sudah di persiapan pada tahapan sebelumnya, Adapun nama file yang dibuat adalah index.php dan simpan pada folder Proyek_CRUD. Berikut ini adalah contoh tampilan halaman text editor:

Gambar 5.9. Tampilan Text Editor

Berikut adalah bentuk tampilan pada folder proyek_CRUD:

Gambar 5.10. Tampilan Folder Proyek CRUD

b) Buka File Index.php

Setelah selesai membuat file index.php dan disimpan pada folder proyek_CRUD, selanjutnya adalah membuat skrip tampil (Read) pada file index.php tersebut.

Berikut ini adalah contoh dari skrip tersebut:

<!DOCTYPE html>

<html>

<head>

<title>Tampil Data Karyawan</title>

</head>

<body>

<br>

<a href="tambah.php">Tambah data karyawan</a>

</br>

<tr>

<td>Nomor</td>

<td>Alamat</td>

</tr>

</table>

</body>

</html>

Adapun bentuk skrip pada text editor adalah seperti berikut ini:

Gambar 5.11. Skrip Pada Text Editor

Setelah skrip tersebut selesai, selanjutnya akan kita jalankan pada web browser. Berikut ini adalah tampil halaman web browser dengan skrip yang sudah kita tulis di file index.php:

Gambar 5.12. Tampilan Halaman Web

Pada gambar diatas sudah bisa dilihat tampil halaman web dari data karyawan tersebut. Data pada halaman web tersebut baru berupa header tabel yang akan menampilkan data yang sudah di input ke database sebelumnya.

h. Membuat Function

Fungsi (function) adalah sub modul atau sub program yang dibuat untuk menyelesaikan hal tertentu. Fungsi memiliki nama dan dalam ANSI/C, diimplementasi untuk hal-hal yang khusus dan dapat dipanggil berkali-kali (berulang) dalam program.

Jadi Untuk menampilkan data yang terdapat pada database sebelumnya, kita perlu membuat file baru dengan nama Function.php. file Function ini nanti yang akan kita pakai untuk membuat skrip Tambah, Tampil, Edit dan Hapus data.

Berikut ini adalah tampilan text editor kita file function sudah disimpan:

Gambar 5.13. File Function

Selanjutnya adalah membuat koneksi antara file function.php dengan database yang sudah dibuat sebelumnya.

Berikut ini adalah skrip untuk membuat koneksi dari file function ke database:

<?php

//membuat konkesi

$koneksi= mysqli_connect("localhost","root","","db_karyawan");

Berikut ini adalah contoh tampilan text editor pada halaman function.php:

Gambar 5.14. Halaman File Function

i. Membuat Koneksi

setelah kita berhasil membuat koneksi dari file function ke database, selanjutnya adalah membuat koneksi dari file function.php ke file index.php.

Adapun Langkah-langkah membuat koneksi tersebut seperti berikut ini:

a) Buku Kembali File Index.Php

Silahkan buka Kembali file index.php dan tulis krip berikut dibagian paling atas dari halaman index.php tersebut:

<?php

include'function.php';

$ambil = query("SELECT * FROM tb_karyawan");

Adapun bentuk tampilkan skrip pada halaman file index.php seperti dibawah ini (koneksi yang di tanyai kotak hijau)

Gambar 5.15. Function Koneksi

b) Membuat Record Pada Halaman Web

Setelah membuat koneksi dari file function.php ke index.php, selanjutnya adalah membuat tabel record yang nantinya akan menampilkan data dari database.

Silahkan buka Kembali file index.php dan tulis skrip berikut di atas tanda penutup “</table>”:

<?php $i= 1; ?>

<?php foreach ($ambil as $row): ?>

<tr>

<td>

<a href="edit.php?id=<?php echo $row["Id"]; ?>">Edit</a> |

<a href="hapus.php?id=<?php echo $row["Id"] ?>" onclick = "return confirm('anda yakin mengapus data ini?');">Hapus</a>

</td>

</tr>

<?php $i++; ?>

<?php endforeach; ?>

Berikut ini adalah tampilan text editor file index.php ketika sudah menambahkan skrip diatas (kotak warna hijau).

Gambar 5.16. Text Editor index.php

Setelah skrip diatas ditulis pada file index.php, maka ketika akan menjalankan tampilan halamannya pada web browser maka tampilan web browser akan terjadi error. Hal ini di sebabkan karena kita belum membuat skrip tampil (read) pada file function.php.

Berikut ini adalah contoh tampilan halaman web browser:

Gambar 5.17. Tampilan Web Browser

j. Membuat Skrip Tampil (Read)

Untuk menampilkan data yang sudah disimpan pada database sebelumnya. Maka selanjutnya adalah membuat skrip tampil (Read) pada file function.php. Silahkan buka Kembali file function.php dan tulis skrip berikut di bawah skrip sebelumnya di atas skrip “?>”:

function query($query) {

global $koneksi;

$result=mysqli_query($koneksi, $query);

$rows =[];

while ($row = mysqli_fetch_assoc ($result)) {

$rows[]= $row;

}

return $rows;

}

Berikut ini bentuk tampilan halaman file function.php pada text editor (ditandai dengan kotak hijau):

Gambar 5.18. Tampilan Function (Read)

Berikut ini adalah tampil halaman web browser ketika sudah membuat skrip tampil pada file function.php

Gambar 5.19. Tampilan Web Browser

Pada gambar diatas kita sudah berhasil menampilkan data data yang sudah di input pada database sebelumnya.

k. Membuat Halaman Input (Create)

Pada tahapan sebelumnya kita menambah data langsung pada database di halaman webserver. Pada perintah create ini, kita akan membuat sebuah halaman inputan menggunakan form. Form yang kita buat ini nantinya yang akan di gunakan untuk menambah nama karyawan baru.

Berikut ini adalah Langkah-langkah untuk membuat halaman input data (create):

a) Membuat File Tambah.Php

Untuk membuat halaman tambah data, maka terlebih dahulu kita harus membuat file baru dengan nama “tambah.php”. file tersebut di simpan pada folder sebelumnya yaitu pada folder “Proyek_CRUD”,

Berikut ini adalah tampilan folder Proyek_CRUD ketika kita sudah menambah file Tambah.php:

Gambar 5.20 Folder Proyek CRUD Tambah

Berikut ini merupakan tampilan halaman text editor:

Gambar 5.21. Tampilan Halaman Text Editor

b) Membuat Form Tambah

Setelah file tambah.php di buat dan disimpan pada folder Proyek_CRUD, Langkah selanjutnya adalah membuat form inputan/ halaman yang akan dijadikan sebagai penginput data.

Silahkan buka halaman tambah.php dan tulis skrip berikut ini:

<!DOCTYPE html>

<html>

<head>

<title>Form Input Data</title>

</head>

<body>

</body>

</html>

Berikut ini adalah tampilan halaman file tambah.php pada text editor:

Gambar 5.22. Text Editor Tambah

Selanjutnya tulis skrip berikut di dalam “<Body>”:

<table>

</table>

</form>

Berikut ini adalah tampilan halaman file tambah.php pada text editor (Skrip yang di tambahkan adalah yang dalam kotak hijau):

Gambar 5.23. Text Editor Tambah

Selanjutnya tulis skrip berikut di dalam “<table>”:

<tr>

<td colspan="2"><h3>Silahkan Input Data </h3></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Alamat</td>

<td>

</td>

</tr>

<tr>

</tr>

Berikut ini adalah tampilan halaman file tambah.php pada text editor (Skrip yang di tambahkan adalah yang dalam kotak hijau):

Gambar 5.24. Text Editor Tambah

Untuk melihat hasil pada halaman web browser hasil dari skrip yang sudah kita buat pada halaman tambah.php, kita buka Kembali tampilan halaman web browser sebelumnya yaitu seperti gambar dibawah ini.

Gambar 5.25. Halaman Tampil

Untuk melihat halaman form tambah data, tinggal “klik” menu “Tambah Data Karyawan” yang terdapat pada kotak yang berwarna hijau. Ketika menu itu di “klik” maka akan tampil form tambah data:

Berikut ini adalah tampilan web browser form tambah data:

Gambar 5.26. Form Tambah

Setelah kita selesai membuat form tambah data. Selanjutnya adalag membuat koneksi pada file tambah data. Silahkan tulis skrip berikut di bagian paling atas file tambah.php:

<?php

include 'function.php';

if (isset($_POST["tambah"])) {

if (simpan ($_POST) > 0) {

echo "

alert('data berhasil di tambahkan');

document.location.href = 'index.php';

</script> ";

}

else {

echo "

alert('data gagal di tambahkan');

document.location.href = 'index.php';

</script>";

}

Berikut ini adalah tampilan file tambah.php pada halaman text editor:

Gambar 5.27. Halaman Text Editor

c) Membuat Fungsi Simpan

Langkah terakhir adalah supaya isian data pada form inputan bisa di simpan dan tampil maka langkah selanjutnya yaitu silahkan buka kembali file “function.php” kemudian kita akan membuat fungsi tambah data di bawah skrip sebelumnya.

Silahkan sisipkan skrip berikut di bawah skrip sebelumnya di atas penutup “?>”:

function simpan($data){

global $koneksi;

$Nip = htmlspecialchars($data["Nip"]);

$Nama = htmlspecialchars($data["Nama"]);

$Alamat = htmlspecialchars($data["Alamat"]);

$query = "INSERT INTO tb_karyawan

values

('','$Nip','$Nama','$Alamat')";

mysqli_query($koneksi, $query);

return mysqli_affected_rows($koneksi);

}

Berikut ini adalah tampilan file function.php pada halaman text editor, skrip tambah data adalah yang terdapat dalam kotak warna hijau:

Gambar 5.28. Text Editor Simpan

d) Menambah Data

Untuk memastikan apakah skrip yang sudah di tullis pada tahapan create ini berjalan sesuai dengan yang kita harapkan, maka kita akan mencoba menginput data baru, jika data tersebut berhasil disimpan dan pada halaman tampil datanya bertambah, maka kita telah berhasil membuat perintah create.

Berikut ini adalah contoh data yang di tambahkan.

Gambar 5.29. Tambah Data

Tinggal “Klik tombol tambah” jika berhasil akan keluar pesan “Data berhasil disimpan” jika gagal, maka akan keluar pesan “Data gagal disimpan”.

Berikut ini adalah contoh pesan yang muncul ketika kita sudah mengisi data dan sudah menekan tombol “Tambah”:

Gambar 5.30. Data Berhasil Bertambah

Pada gambar diatas sudah keluar pesan “Data berhasil disimpan” itu berarti kita sudah berhasil menambah data baru pada database yang sudah dibuat pada tahapan sebelumnya.

Berikut ini adalah tampilan web browser ketika kita sudah berhasil menambahkan data. Data yang ditambahkan tadi di warnai dengan kotak hijau:

Gambar 5.31. Halaman Index

l. Membuat Halaman Ubah (Update)

Untuk membuat data yang sudah tersimpan pada database, kita selanjutnya membuat halaman web baru untuk bisa melakukan perubahan data/update.

Terdapat beberapa Langkah untuk membuat halaman update, diataranya adalah:

a) Buka Halaman index

Ketika ingin berubah data pada salah satu data yang terdapat pada halaman website, maka kita tinggal klik menu “Edit” (seperti yang di tandai kotak hijau):

Gambar 5.32. Halaman Index

Pada saat ini menu “Edit” tersebut belum berfungsi karena belum di tambahkan skrip untuk bisa menuju halaman edit. Maka untuk membuat menu “Edit” tersebut berfungsi perlu ditambahkan file baru.

b) Membuat File Edit

Silahka buat file baru dengan nama “edit.php” kemudian simpan pada folder “Proyek_CRUD”. Berikut ini adalah tampil folder Proyek_CRUD:

Gambar 5.33. Folder Proyek CRUD

c) Membuat Form Edit

Selanjutnya adalah membuat halaman edit atau form edit. Buka file edit.php dan tulis skrip berikut:

<!DOCTYPE html>

<html>

<head>

<title>Halaman Edit Data</title>

</head>

<body>

</body>

</html>

Berikut ini tampilan text editor pada file edit.php:

Gambar 5.34. File edit php

Kemudian silahkan skrip berikut di dalam “body” pada file yang sama:

form action="" method="POST">

<table>

<tr>

</tr>

<tr>

<td colspan="2"><h3>Silahkan Rubah Data </h3></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Alamat</td>

</tr>

<tr>

</tr>

</table>

</form>

Berikut ini tampilan text editor pada file edit.php:

Gambar 5.35. File edit php

d) Membuat Koneksi

Selanjutnya adalah membuat koneksi pada file edit.php.

Silahkan tulis skrip berikut ini pada bagian paling atas file edit.php :

<?php

include 'function.php';

$id=$_GET["id"];

$data= query("SELECT * FROM tb_karyawan WHERE id = $id")[0];

if (isset($_POST["edit"])) {

if (ubah($_POST) > 0) {

echo "

alert('data berhasil di edit');

document.location.href = 'index.php';

</script>

}

else {

echo "

alert('data gagal di edit');

document.location.href = 'index.php';

</script>

}

e) Membuat Skrip Edit

Selanjutnya adalah membuat skrip edit pada file function.php Silahkan tulis skrip berikut dibawah skrip sebelumnya pada file function.php di atas skrip “>?”:

function ubah($data){

global $koneksi;

$id = $data["id"];

$Nip = htmlspecialchars($data["Nip"]);

$Nama = htmlspecialchars($data["Nama"]);

$Alamat = htmlspecialchars($data["Alamat"]);

$query = "UPDATE tb_karyawan SET

Nip ='$Nip',

Nama = '$Nama',

Alamat ='$Alamat'

WHERE id = $id

mysqli_query($koneksi, $query);

return mysqli_affected_rows($koneksi);

}

Berikut ini adalah contoh tampilan skrip ubah pada halaman file function.php.

Gambar 5.36. Skrip Ubah Di Function

f) Demo Program Edit

Setelah menyelesaikan semua tahapan edit, selanjutnya adalah mencoba menjalankan program untuk melakukan ubah data. Silahkan “klik Edit” pada halaman web browser sebelumnya, kemudian rubah salah satu data.

Berikut ini adalah tampilan ketika sudah lelakukan “Klik Tombol Edit” :

Gambar 5.37. Halaman Edit

Pada gambar diatas kita akan melakukan perubahan data untuk nama “Darmansah” menjadi “Darmansah 2”, kemudian “klik tombol edit”, jika data berhasil di edit maka akan keluar pesan “data berhasil di edit” jika gagal maka akan keluar data “data gagal di edit”.

Berikut ini adalah contoh pesan yang keluar jika kita sudah menekan tombol “edit”

Gambar 5.38. Pesan Edit

Setelah pesan seperti gambar diatas keluar tinggal klik tombol “ok” maka kita akan dibawah kehalaman index dari website.

Berikut ini adalah tampilan halaman index dari website:

Gambar 5.39. Halaman Index

m. Membuat Halaman Hapus (Delete)

Pada tahapan sebelumnya kita sudah membuat perintah read, create dan update selanjutnya kita akan membuat perintah delete. perintah delete ini berfungsi untuk menghapus data data yang terdapat pada database.

berikut ini adalah Langkah-langkah untuk membuat perintah delete.

a) Buka Kembali File Fucntion

Silahkan buka kembali file function.php kemudian tulis skrip berikut dibawah skrip sebelumnya di atas tanda “?>”:

function hapus($Id)

global $koneksi;

mysqli_query($koneksi, "DELETE FROM tb_karyawan where id = $Id");

return mysqli_affected_rows($koneksi);

}

Berikut ini merupakan tampilan pada text editor pada file function.php:

Gambar 5.40. File Function

b) Membuat file hapus

Buat file baru dengan nama “hapus.php” kemudian simpan pada folder “Proyek_CRUD” sebelumnya.

Gambar 5.41. Folder Proyek CRUD

selanjutkan buka file hapus.php dan tulis skrip berikut:

<?php

include 'function.php';

$id = $_GET["id"];

if (hapus ($id)) {

echo "

alert('data berhasil di hapus');

document.location.href = 'index.php';

</script>

}

else {

echo "

alert('data gagal di hapus');

document.location.href = 'index.php';

</script>

}

c) Demo Program Hapus

Setelah selesai membuat perintah hapus selanjutnya adalah menajalankan program hapus pada halaman web browser. Buka Kembali halaman web browser dan kemudian hapus salah satu data yang terdapat pada halaman tersebut.

Cara mengapus data tinggal klik tombol “Hapus” kemudian akan keluar perintah “anda yakin mengahpus data ini”, Adapun contohnya seperti gambar dibawah ini:

Gambar 5.42. Halaman Hapus

Jika yakin untuk menghapus data tersebut tinggal tekan tombol “Ok” dan data akan terhapus. Berikut ini adalah tampilan halaman index dari web site yang dibuat:

Gambar 5.43. Halaman Index

4. TUGAS

Kerjakan tugas berikut ini dengan cara berkelompok: rancanglah sebuah program sederhana menggunakan Bahasa pemrograman PHP dengan menerapkan perintah CRUD dan memiliki tampilan website minimal mempunyai 4 navigasi yang bisa di akses oleh user.