Crud PHP HTML
Crud PHP HTML
BAGIAN I
CRUD DENGAN PHP DAN HTML
Proyek yang akan kita buat sebagai materi belajar adalah project CRUD (Create, Retrieve/Read,
Update dan Delete) sederhana dengan menggunakan bahasa pemrograman PHP.
Ada beberapa tahap yang perlu dipersiapkn dalam pembuatan project ini adalah sebagai berikut:
1.1 Kebutuhan Software
a. Web Server dan DBMS = XAMPP
XAMPP dapat diunduh dari laman apachefriends.org atau dari laman sourceforge.net.
b. Text Editor = Notepad++ (Recommended)
Notepad++ dapat diunduh dari laman notepad-plus-plus.org
c. Browser = Google Chrome (Recommended)
Browser Google Chrome dapat diunduh dari laman google.co.id
d. MySQL Tool = SQLyog (optional)
SQLyog dapat diunduh dari laman webyog.com atau dari laman github.com
1.2 Persiapan
Hal-hal penting yang harus dipersiapakan untuk pembuatan project CRUD ini selain kebutuhan
software di atas adalah:
1.2.1 Membuat Folder
Persiapan membuat folder ini sangat penting karena folder ini akan berfungsi sebagai wadah
untuk menampung file-file utama dan file-file pendukung project yang akan dibuat. Buat nama folder
sesuai format berikut ini crud_php_MK_KLS
MK = Singkatan nama Matakuliah
PT = Pemrograman Terstruktur
PBD = Praktikum Basis Data
MABD = Manajemen dan Administrasi Basis Data
PMW = Pemrograman Mobile Web
KLS = Nama Kelas. Misalnya kelas A, B, C dan seterusnya
PENTING !!!
Contoh: Untuk matakuliah Pemrograman Mobile Web Kelas G, maka penulisan nama
foldernya adalah crud_php_pmw_g (semuanya huruf kecil/lower case dan
menggunakan simbol underscore “_” sebagai pengganti spasi).
Misalnya matakuliah yang anda program adalah adalah Pemrograman Terstruktur
Kelas A maka nama folder yang harus anda buat adalah crud_php_pt_a sesuai format.
CATATAN:
Bagian yang di-highlight warna MERAH pada penulisan nama folder di atas disesuaikan
dengan nama matakuliah dan nama kelas anda
2. Buat juga dua sub folder di dalamnya yaitu folder config dan modul
3. Di dalam folder modul, buat lagi sub folder dengan nama jenjang, prodi dan mahasiswa
C:\xampp\htdocs
- crud_php_pmw_g
- config
- modul
- jenjang
- mahasiswa
- prodi
CATATAN:
Bagian yang di-highlight warna MERAH pada penulisan nama database di atas disesuaikan dengan
nama matakuliah dan nama kelas anda
6. Klik tombol Create di sebelah kanan textbox Database name untuk mulai proses pembuatan
database. Jika proses berhasil maka tampak jendela Create table dan anda diminta untuk
membuatkan tabel-tabel yang dibutuhkan di dalam database yang baru dibuat tersebut.
Untuk membuat tabel pada gambar 3 di atas, berikut digambarkan struktur tabel-tabel yang akan
dibuat yang dapat dilihat pada sub-bab 1.2.3 Membuat Tabel
tbl_jenjang
Name Type Length/Values Null Index A_I
kode_jenjang Varchar 3 No Primary No
nama_jenjang Varchar 50 No - No
Setelah tombol Go diklik maka tampil form isian untuk menginputkan kedua field yang diminta
pada proses pembuatan tabel pada langkah kedua di atas. Kedua field ini adalah kode_jenjang dan
nama_jenjang.
Ikuti langkah-langkah berikut ini untuk mengisi form pada gambar 5 di atas.
1. Ketikkan kode_jenjang di bagian nama pada baris pertama
Untuk langkah ke-4 sampai langkah ke-6, ikuti langkah ke-1 sampai langkah ke-3 di atas
dengan mengikuti aturan yang tertera pada tabel daftar Tabel 1.
Gambar 6. Jendela form create field pada table tbl_jenjang dan isiannya
Gambar 7. Jendela form create field pada table tbl_jenjang dan add index
if( !$db ){
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}
CATATAN:
Bagian yang di-highlight warna MERAH pada penulisan nama database di atas disesuaikan dengan
nama matakuliah dan nama kelas anda
5. Simpan script di atas dengan nama koneksi.php ke dalam folder config yang telah dibuat
sebelumnya yaitu di 📁 C:\xampp\htdocs\crud_php_pmw_g\config\koneksi.php
<?php
function periksa_kode($namaTabel, $namaField, $nilaiField)
include "koneksi.php";
$sql = "SELECT * FROM $namaTabel WHERE $namaField='$nilaiField'";
$query = mysqli_query($db, $sql);
$row = mysqli_fetch_assoc($query);
return (is_array($row) && count($row)>0);
}
?>
Simpan script di atas dengan nama fungsi.php ke dalam folder config yang telah dibuat
sebelumnya yaitu di 📁 C:\xampp\htdocs\crud_php_pmw_g\config\fungsi.php
1.3.2 CRUD
1.3.2.1 CRUD Jenjang
Ada beberapa 6 file yang harus dibuat untuk menunjang proses CRUD jenjang yang disimpan di
dalam folder 📁 C:\xampp\htdocs\crud_php_pmw_g\modul\jenjang yaitu:
daftar_data_read.php - Untuk menampilkan daftar data dari tabel (Read/Retrieve)
form_tambah.php - Form untuk input data baru (Create)
proses_tambah_create.php - Untuk menambahkan data baru ke dalam tabel (Create)
form_edit.php - Form untuk edit/ubah data (Update)
proses_edit_update.php - Untuk merubah isi data yang sudah ada (Update)
proses_hapus_delete.php - Untuk menghapus data dari tabel (Delete)
1. Source Code
a. File daftar_data_read.php
Simpan script di atas dengan nama form_tambah.php pada folder folder 📁 C:\xampp\htdocs\
crud_php_pmw_g\modul\jenjang\form_tambah.php
b. File form_tambah.php
c. File proses_tambah_create.php
f. File proses_hapus_delete.php
Jika tombol OK pada konfirmasi diklik maka data akan dikirimkan ke file
proses_hapus_delete.php dan proses akan dialihkan ke dafftar_data_read.php seperti
tampak pada gambar 16 berikut ini.
3. Tekan tombinasi tombol Ctrl + C untuk menyalin/copy file-file terseleksi pada gambar 17 di
atas
4. Buka folder 📁 C:\xampp\htdocs\crud_php_pmw_g\modul\prodi lalu tekan kombinasi
tombol Ctrl + V untuk templekan/paste file-file yang disalin dari folder jenjang tadi
5. Buka aplikasi text editor Notepad++ lalu tutup semua jendela lain yang sedang terbuka di
sana
6. Dari aplikasi text editor Notepad++ pada gambar 19 di atas, tekan kombinasi Ctrl + O untuk
membuka file-file dari folder prodi tadi:
📁 C:\xampp\htdocs\crud_php_pmw_g\modul\prodi
7. Jika folder prodi sudah ditemuka dan sudah terbuka maka selanjutnya tekan kombinasi
tombo Ctrl + A untuk memilih semua file
8. Klik tombol Open pada gambar 20 di atas untuk membuka semua file yang ada di dalam
folder prodi maka hasilnya sebagai berikut
Pada dasarnya source code jenjang dan source code untuk prodi adalah sama untuk semua file
yang terbuka pada gambar 21 di atas. Yang berbeda adalah nama tabel dan nama-nama fieldnya.
Perhatikan struktur tabel kedua tabel yaitu tabel tbl_jenjang dan tabel tbl_prodi pada tabel 1 dan
tabel 2 di atas yang disalin kembali pada tabel 4 dan tabel 5 berikut.
Tampak pada tabel 4 dan tabel 5 di atas perbedaan kedua tabel tersebut. Yang di-hightlight warna
merah adalah yang berubah dari tabel tbl_jenjang, dan yang di-hightlight warna ungu adalah yang tidak
ada pada tabel tbl_jenjang. Maka dari hasil perbandingan kedua tabel ini dapat diubah pada source code
ke-6 file pada folder prodi yang disalin dari folder jenjang.
Hal-hal yang perlu diubah pada source code tersebut dengan menggunakan teknik Find and
Replace pada text editor Notepad++ adalah:
Tabel 6. Tabel rangkuman untuk find dan replace
Find Replace
jenjang prodi
Jenjang Prodi
1. Dari jendela aplikasi text editor Notepad++ seperti tampak pada gambar 21 di atas, tekan
kombinasi tombol Ctrl + H untuk menampilkan jendela Replace
Lakukan langkah 1 sampai langkah 6 di atas untuk mengganti semua teks yang ada pada tabel 6 di
atas maka hasil akhirnya akan seperti ini:
1. Source Code
a. File daftar_data_read.php
b. File form_tambah.php
c. File proses_tambah_create.php
d. File form_edit.php
e. File proses_edit_update.php
f. File proses_hapus_delete.php
Berikut adalah potongan script yang harus ditambahkan pada setiap file prodi.
a. File daftar_data_read.php
...
...
...
<table border="1">
<thead>
<tr>
<th>No</th>
Potongan script yang di-highlight warna MERAH adalah bagian yang harus ditambahkan pada source code hasil
find and replace
b. File form_tambah.php
...
...
...
Potongan script yang di-highlight warna MERAH adalah bagian yang harus ditambahkan pada source code hasil
find and replace dan yang berwarna UNGU adalah bagian yang harus diganti nilainya
c. File proses_tambah_create.php
...
...
...
if(isset($_POST['tombol_simpan'])){
$kode_prodi_dari_form = $_POST['kode_prodi'];
$nama_prodi_dari_form = $_POST['nama_prodi'];
$kode_jenjang_dari_form = $_POST['kode_jenjang'];
$cek=periksa_kode('tbl_prodi', 'kode_prodi', $kode_prodi_dari_form);
if($cek){
$sessData['pesan']['tipe_pesan'] = 'warning';
$sessData['pesan']['isi_pesan'] = 'Maaf, data dengan Kode <b>'.
$kode_prodi_dari_form.'</b> sudah ada di dalam tabel';
$_SESSION['sessData'] = $sessData;
header('Location: daftar_data_read.php');
exit();
}
$sql = "INSERT INTO tbl_prodi (
kode_prodi
, nama_prodi
, kode_jenjang
)
VALUES (
'$kode_prodi_dari_form'
, '$nama_prodi_dari_form'
, $kode_jenjang_dari_form
)";
$query = mysqli_query($db, $sql);
...
Potongan script yang di-highlight warna MERAH adalah bagian yang harus ditambahkan pada source code hasil
find and replace
d. File form_edit.php
...
...
...
Potongan script yang di-highlight warna MERAH adalah bagian yang harus ditambahkan pada source code hasil
find and replace
...
...
...
if(isset($_POST['tombol_edit'])){
$kode_prodi_dari_form = $_POST['kode_prodi'];
$nama_prodi_dari_form = $_POST['nama_prodi'];
$kode_jenjang_dari_form = $_POST['kode_jenjang'];
$sql = "UPDATE tbl_prodi SET
kode_prodi='$kode_prodi_dari_form'
, nama_prodi='$nama_prodi_dari_form'
, kode_jenjang='$kode_jenjang_dari_form'
WHERE kode_prodi='$kode_prodi_dari_form'";
$query = mysqli_query($db, $sql);
...
...
...
Potongan script yang di-highlight warna MERAH adalah bagian yang harus ditambahkan pada source code hasil
find and replace
f. File proses_hapus_delete.php
Source code pada file ini tidak ada penambahan maupun perubahan setelah proses find and replace
3. Hasil
a. Hasil daftar_data_read.php
Untuk melihat hasil program CRUD Prodi dapat dilakukan dengan mengetikkan perintah
berikut pada address bar browser.
http://localhost/crud_php_pmw_g/modul/prodi/daftar_data_read.php
Hasilnya adalah:
b. Hasil form_tambah.php
4. Hasil Tambahan
Hasil tambahan ini adalah hasil preview program di browser setelah menambahkan potongan-potongan
script untuk proses CRUD jenjang pada bagian 2 di atas
d. Hasil form_tambah.php
5. Tambahan
Perlu di perhatikan bahwa elemen Kode Jenjang pada form tambah data maupun form edit data
pada gambar 28 dah 29, sama-sama menggunakan elemen text input. Jika kode jenjang pada kedua
form ini harus diinputkan datanya melalui combo box atau dropdown select maka ganti bagian kode
jenjang dengan script berikut ini.
a. Dropdown Select Tambah
<p>
<label for="kode_jenjang">Jenjang: </label>
<select name="kode_jenjang">
<option value="">-- Pilih Jenjang --</option>
<?php
include "../../config/koneksi.php";
$sql = "SELECT * FROM tbl_jenjang ORDER BY nama_jenjang
ASC";
$query = mysqli_query($db, $sql);
if(mysqli_num_rows($query) > 0){
while($row = mysqli_fetch_array($query)){
?>
<option value="<?=$row['kode_jenjang']?>"><?
=$row['nama_jenjang']?> </option>
<?php
}
}
?>
</select>
</p>
Cara membuat CRUD Mahasiswa ini sama persis dengan membuat CRUD Prod di atasi. Oleh karena itu maka
semua file-file project yang ada di dalam folder prodi harus disalin ke folder mahasiswa
1. Source Code
Setelah dilakukan manipulasi pada keenam file yang ada di folder mahasiswa maka harus
ditambahkan beberapa script yang dibutuhkan sesuai field-field yang ada di dalam tabel
tbl_mahasiswa seperti jenis_kelamin, tempat_lahir dan tanggal_lahir:
Jenis kelamin harus dipilih dari dropdown select
Tempat lahir bertipe text
Tanggal lahir bertipe date
2. Hasil
Hasil dari find dan replace juga beberapa perubahan pada keenam file di dalam folder mahasiswa
akan tampak sebagai berikut:
a. Hasil daftar_data_read.php
Untuk melihat hasil program CRUD Mahasiswa dapat dilakukan dengan mengetikkan
perintah berikut pada address bar browser.
http://localhost/crud_php_pmw_g/modul/mahasiswa/daftar_data_read.php
Hasilnya adalah:
b. Hasil form_tambah.php
Menu utama ini berupa salah satu halaman yang berfungsi sebagai penghubung antar link yang ada di
dalam program CRUD yang dibuat. Cara membuat menu utama ini adalah dengan menyiapkan satu file
bernama index.php dan disimpan di dalam folder utama project ini yaitu folder crud_php_pmw_g
Script pada file index.php adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar CRUD</title>
</head>
<body>
<header style="text-align:center">
<h1>BELAJAR CRUD PHP</h1>
<h2>Pendataan Mahasiswa</h2>
</header>
<nav style="background-color:#eeeeee; padding:10px">
<ul style="font-family:Arial;line-height:1.6">
<li><a href="modul/jenjang/daftar_data_read.php">Jenjang
Pendidikan</a></li>
<li><a href="modul/prodi/daftar_data_read.php">Program
Studi</a></li>
<li><a
href="modul/mahasiswa/daftar_data_read.php">Mahasiswa</a></li>
</ul>
Full source code CRUD dengan PHP dan HTML ini dapat diunduh pada link berikut ini:
CRUD dengan PHP dan HTML