PWPB | CRUD Relasi 2 Tabel
CRUD Menggunakan Relasi 2 Tabel
Assalamualaikum warahmatullahi wabarakatuh, salam sejahtera bagi kita semua, Shalom, Om Swastiastu, Namo Buddhaya, dan Salam Kebajikan. Pada blog kali ini saya akan berbagi ilmu mengenai Relasi antar tabel di dalam CRUD menggunakan bahasa pemogramman PHP. Langsung saja kita ke materinya dan siapkan seperti biasa text editor, xampp, dan DBMS.
Langkah - Langkah :
1. Buat Tabel kelas di database PWPB dengan data seperti di bawah ini :
2. Kosongkan tabel siswa dengan cara masuk ke operasi dan scroll ke bawah lalu tekan TRUNCATE seperti gambar di bawah ini :
setelah di truncate hasilnya akan seperti gambar di bawah ini :
3. Ubah kolom kelas di tabel siswa menjadi id_kelas lalu samakan tipe data dan length nya sesuai tabel kelas setelah itu tambahkan foreign key di tabel siswa, seperti gambar di bawah ini
4. Ubah query sql di index.php menjadi seperti di bawah untuk menerapkan relasi menggunakan INNER JOIN
5. Ubah kolom kelas menjadi nama kelas pada file v_index.php, seperti gambar di bawah ini :
6. Tambahkan kodingan di bawah ini pada file tambah.php (sebelum include v_tambah.php)
setelah di truncate hasilnya akan seperti gambar di bawah ini :
4. Ubah query sql di index.php menjadi seperti di bawah untuk menerapkan relasi menggunakan INNER JOIN
$sql = 'SELECT * FROM siswa INNER JOIN kelas ON (siswa.id_kelas = kelas.id_kelas)';
5. Ubah kolom kelas menjadi nama kelas pada file v_index.php, seperti gambar di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link href="Assets/fontawesome/css/all.min.css" rel="stylesheet" type="text/css">
<!-- plugin bootstrap jquery dan toastr -->
<script src="Assets/media/js/jquery.min.js"></script>
<script src="Assets/media/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="Assets/media/css/bootstrap.min.css">
<link rel="stylesheet" href="Assets/media/plugins/toastr/toastr.min.css">
<script src="Assets/media/plugins/toastr/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="Assets/css/style.css">
<style>
tr th {
padding:5px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
color:white;
}
</style>
</head>
<body>
<br><br>
<center>
<div class="judul">
<div class="smk">
<img src="Assets/img/smk.png" width="50%">
</div>
<div class="jdl"><br><br>
<h1>Data Siswa SMK Negeri 4 Bandung</h1>
</div>
<div class="ava">
<img src="Assets/img/ava.png" width="50%">
</div>
</div>
<!-- Tambahan Fitur Search -->
<div class="search">
<form method="GET" action="index.php">
<input type="text" name="search" id="search" value="<?= @$search ?>" autocomplete="off">
<button type="submit" class="cari" name="cari" id="tombol-cari"><i class="fas fa-search"></i></button>
</form>
<form action="">
<button type="submit" class="sync" style="margin-left: 5px;"><i class="fas fa-sync"></i></button>
</form>
<a href="tambah.php" class="tdata"><i class="fas fa-plus"></i> Tambahkan Data</a>
<a href="logout.php" class="logout" onclick="return confirm('Yakin Akan Logout ?');"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
<!-- Tambahan Fitur Ordering -->
<table border="1" cellspacing="0.1" cellpadding="0.1" width="95%">
<thead>
<tr>
<th class="text-center">No</th>
<th class="text-center">Foto</th>
<th class="text-center">
NIS
<a href="index.php?sort=nis&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=nis&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th class="text-center">
Nama Lengkap
<a href="index.php?sort=nama_lengkap&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=nama_lengkap&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th class="text-center">
Gender
<a href="index.php?sort=jenis_kelamin&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=jenis_kelamin&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th class="text-center">
Kelas
<a href="index.php?sort=kelas&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=kelas&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th class="text-center">
Jurusan
<a href="index.php?sort=jurusan&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=jurusan&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th class="text-center">
Alamat
<a href="index.php?sort=alamat&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=alamat&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th class="text-center">
Goldar
<a href="index.php?sort=golongan_darah&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=golongan_darah&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th class="text-center">
Nama Ibu
<a href="index.php?sort=nama_ibu&order=asc"><i class="fas fa-arrow-up" style="color:#37C4D7"></i></a>
<a href="index.php?sort=nama_ibu&order=desc"><i class="fas fa-arrow-down" style="color:#37C4D7"></i></a>
</th>
<th class="text-center" colspan="2">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
while ($siswa = @$list_siswa->fetch_array()) {
?>
<tr align="center">
<td height="40"><?= $i++ ?></td>
<td>
<img width="90" height="90" src="<?php echo base_url()?>/Assets/image/<?php echo $siswa['file']?>">
</td>
<td><?= $siswa['nis'] ?></td>
<td><?= $siswa['nama_lengkap']?></td>
<td><?= $siswa['jenis_kelamin']?></td>
<td><?= $siswa['nama_kelas']?></td>
<td><?= $siswa['jurusan']?></td>
<td><?= $siswa['alamat']?></td>
<td><?= $siswa['golongan_darah']?></td>
<td><?= $siswa['nama_ibu']?></td>
<!-- link untuk mengedit data -->
<td><a href="edit.php?nis=<?= $siswa['nis']?>"><div class="edit"><div class="br"></div><i class="fas fa-edit"></i></div></a></td>
<!-- link untuk menghapus data -->
<td><a class="btnDelete" href="delete.php?nis=<?= $siswa['nis']?>"><div class="delete"><div class="br"></div><i class="fas fa-trash"></i></div></a></td>
</tr>
<?php } ?>
</tbody>
</table>
</center>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="float:left;"></h4>
</div>
<div class="modal-body" style="float:left;">
</div><br><br>
<div class="modal-footer">
<button type="button" class="btn btn-primary btnYa">Ya</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Tidak</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(".btnDelete").on("click", function(e) {
e.preventDefault();
var nama = $ (this).parent().parent().children()[3];
nama = $(nama).html();
var tr = $(this).parent().parent();
$(".modal").modal('show');
$(".modal-title").html('Konfirmasi');
$(".modal-body").html('Anda Yakin Ingin Menghapus Data <b>' + nama + '</b> ? ');
var href = $(this).attr('href');
$('.btnYa').off();
$('.btnYa').on('click', function() {
$.ajax({
'url' : href,
'type' : 'POST',
'success': function(result) {
if (result == 1) {
$(".modal").modal('hide');
tr.fadeOut();
toastr.success('Data <b>'+ nama +'</b> Berhasil dihapus', 'Informasi');
} else {
$(".modal").modal('hide');
toastr.error('Data Tidak Berhasil dihapus', 'Informasi');
}
}
});
});
});
});
</script>
</body>
</html>
6. Tambahkan kodingan di bawah ini pada file tambah.php (sebelum include v_tambah.php)
$sql = "SELECT * FROM kelas";
$dataKelas = $mysqli->query($sql) or die ($mysqli->error);
7. Ubah Kodingan di file v_tambah dengan kodingan di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" type="text/css" href="Assets/css/style_tambah.css">
</head>
<body>
<?php
$action = 'tambah.php';
$disabled = '';
$judul = 'Input Data Siswa';
if (!empty($siswa)){
$action = 'edit.php';
$disabled = 'readonly';
$judul = 'Edit Data Siswa';
}
?>
<center>
<!-- action diisi sesuai kondisi diatas -->
<form action="<?= $action ?>" method="POST" enctype="multipart/form-data">
<fieldset>
<legend><?= $judul ?></legend>
<table align="center" width="100%">
<tr>
<td><label for="">Foto</label></td>
<td>
<?php if ($action == "edit.php"){ ?>
<img width="100" height="110" src="<?php echo base_url()?>/Assets/image/<?php echo @$siswa['file']?>">
<br>
<input type="hidden" name="foto" value="<?php echo @$siswa['file']?>">
<?php } ?>
<input type="file" name="foto" class="border" autocomplete="off"></td>
</tr>
<tr>
<td><label for="nis">NIS</label></td>
<td><input autocomplete="off" type="text" name="nis" value="<?= @$siswa['nis'] ?>" <?= $disabled ?>></td>
</tr>
<tr>
<td><label for="nama_lengkap">Nama Lengkap</label></td>
<td><input autocomplete="off" type="text" name="nama_lengkap" value="<?= @$siswa['nama_lengkap'] ?>"></td>
</tr>
<tr>
<td><label for="jenis_kelamin">Jenis Kelamin</label></td>
<td>
<input autocomplete="off" type="radio" name="jenis_kelamin" value="L" <?= @$siswa['jenis_kelamin'] == 'L' ? 'checked' : '' ?>>Laki - Laki
<input autocomplete="off" type="radio" name="jenis_kelamin" value="P" <?= @$siswa['jenis_kelamin'] == 'P' ? 'checked' : '' ?>>Perempuan
</td>
</tr>
<tr>
<td><label for="kelas">Kelas</label></td>
<td>
<select name="id_kelas" class="select1">
<option value="">[ Pilih Kelas ]</option>
<?php while($murid = @$dataKelas->fetch_array()) { ?>
<option value="<?php echo $murid['id_kelas'] ?>" <?php echo @$siswa['id_kelas'] == $murid['id_kelas'] ? 'selected' : '' ?>>
<?php echo $murid['nama_kelas'] ?>
</option>
<?php } ?>
</select>
</td>
</tr>
<tr>
<td><label for="jurusan">Jurusan</label></td>
<td><input autocomplete="off" type="text" name="jurusan" value="<?= @$siswa['jurusan'] ?>"></td>
</tr>
<tr>
<td valign="top"><label for="alamat">Alamat</label></td>
<td><textarea name="alamat"cols="40" rows="10"><?= @$siswa['alamat'] ?></textarea></td>
</tr>
<tr>
<td><label for="golongan_darah">Golongan Darah</label></td>
<td>
<select name="golongan_darah" class="select2">
<option value="A" <?= @$siswa['golongan_darah'] == 'A' ? 'selected' : '' ?>>A</option>
<option value="AB" <?= @$siswa['golongan_darah'] == 'AB' ? 'selected' : '' ?>>AB</option>
<option value="B" <?= @$siswa['golongan_darah'] == 'B' ? 'selected' : '' ?>>B</option>
<option value="O" <?= @$siswa['golongan_darah'] == 'O' ? 'selected' : '' ?>>O</option>
</select>
</td>
</tr>
<tr>
<td><label for="nama_ibu">Nama Ibu</label></td>
<td><input autocomplete="off" type="text" name="nama_ibu" value="<?= @$siswa['nama_ibu'] ?>"></td>
</tr>
<tr>
<td><label for="nama_ayah">Nama Ayah</label></td>
<td><input autocomplete="off" type="text" name="nama_ayah" value="<?= @$siswa['nama_ayah'] ?>"></td>
</tr>
<tr>
<td colspan="3" valign="middle" ><br>
<input type="submit" value="Submit">
<a href="index.php"><div class="link"><div class="br"></div>Kembali</div></a>
</td>
</tr>
</table>
</fieldset>
</form><br><br><br>
</center>
</body>
</html>
8. Ubah isi data variable kelas yang asalnya 'kelas' menjadi 'id_kelas', seperti gambar di bawah ini :
$kelas = htmlspecialchars($_POST['id_kelas']);
9. Ubah kodingan edit.php yang sebelumnya menjadi kodingan di bawah ini (yang terbaru)
<?php
include 'lib/library.php';
// Digunakan untuk mengambil value dari GET parameter dengan key nis
$nis = $_GET['nis'];
// Digunakan untuk memeriksa apakah ada request dalam bentuk POST yang dikirim ke halaman ini? (Halaman edit.php)
if ($_SERVER['REQUEST_METHOD']=='POST') {
// Digunakan untuk mengambil data dalam bentuk POST dari form
$nis = htmlspecialchars($_POST['nis']);
$nama_lengkap = htmlspecialchars($_POST['nama_lengkap']);
$jenis_kelamin = htmlspecialchars($_POST['jenis_kelamin']);
$kelas = htmlspecialchars($_POST['id_kelas']);
$jurusan = htmlspecialchars($_POST['jurusan']);
$alamat = htmlspecialchars($_POST['alamat']);
$golongan_darah = htmlspecialchars($_POST['golongan_darah']);
$nama_ibu = htmlspecialchars($_POST['nama_ibu']);
$nama_ayah = htmlspecialchars($_POST['nama_ayah']);
$file = $_POST['foto'];
$foto = $_FILES['foto'];
if (!empty($foto) && $foto['error'] == 0) {
$path = './Assets/image/';
$upload = move_uploaded_file($foto['tmp_name'], $path . $foto['name']);
if (!$upload) {
flash('error', "Upload file gagal!");
header('location:index.php');
}
$file = $foto['name'];
}
// Digunakan untuk membuat SQL string untuk mengubah data pada tabel siswa
$sql = "UPDATE siswa SET
nama_lengkap = '$nama_lengkap',
jenis_kelamin = '$jenis_kelamin',
id_kelas = '$kelas',
jurusan = '$jurusan',
alamat = '$alamat',
golongan_darah = '$golongan_darah',
nama_ibu = '$nama_ibu',
nama_ayah = '$nama_ayah',
file = '$file'
WHERE nis = '$nis'";
$mysqli->query($sql) or die ($mysqli->error);
header('location: index.php');
}
$sql = "SELECT * FROM kelas";
$dataKelas = $mysqli->query($sql) or die ($mysqli->error);
// Digunakan untuk memeriksa apakah parameter nis ada pada url? Jika tidak ada maka arahkan halaman kembali ke index.php
if(empty($nis)) header('location : index.php');
// Mengambil data dari tabel siswa berdasarkan nis sesuai dengan parameter get nya
$sql = "SELECT * FROM siswa WHERE nis = '$nis' ";
$query = $mysqli->query($sql);
// $query->fetch_array() tanpa looping artinya hanya mengambil hasil query baris pertama saja (1 data)
$siswa = $query->fetch_array();
// Digunakan untuk memeriksa apakah data siswa dengan nis tersebut ada pada tabel siswa? Jika tidak ada maka arahkan halaman kembali ke index.php
if(empty($siswa))header('location : index.php');
include 'views/v_tambah.php';
?>
catatan : penjelasan mengenai kodingan ada di dalam kodingan itu sendiri menggunakan komen
Tester
1. Kita tambahkan data pada tabel kelas, seperti gambar di bawah ini (sebagai contoh ) :
2. Masuk ke halaman index ( jangan lupa login ) maka hasil awalnya seperti di bawah (data masih kosong)
3. Tambahkan data seperti biasa tetapi di dalam form kelas sudah tersedia opsi kelas yang tadi telah kita tambahkan di database pada tabel kelas, seperti gambar di bawah ini :
Ya mungkin cukup sekian materi yang dapat saya bagikan semoga bermanfaat dan dapat dijadikan bahan pelajaran agar lebih jago ngoding nya jangan lupa bagikan ke temen kalian yang belum bisa mengenai materi relasi pada crud. Terima kasih telah berkunjungan ke blog saya
Wassalamualaikum
1 Comments
This comment has been removed by the author.
ReplyDelete