TUTORIAL
MEMBUAT APLIKASI CRUD SISWA
Assalamu’alaikum
wr.wb
A.Pendahuluan
Pada kesempatan kali ini saya akan membuat tutorial
bagaimana “Cara Membuat Aplikasi CRUD siswa”
B.
Latar Belakang
CRUD adalah singkatan dari
Create Read Update Delete , yang sering digunakan pada aplikasi-aplikasi
pengolahan data yang kebanyakan mengguanakan fungsi CRUD didalamnya . Fungsi
ini digunakan untuk menambahkan data, menghapus data, serta mengupdate data.
C. Alat dan Bahan
·
Laptop / Pc komputer
·
Aplikasi XAMPP
·
Web Browser
·
Notepad++ atau Sublime
Text
D. Pembahasan
CRUD adalah singkatan dari Create Read Update Delete , yang
sering digunakan pada aplikasi-aplikasi pengolahan data yang kebanyakan
mengguanakan fungsi CRUD didalamnya . Fungsi ini digunakan untuk menambahkan
data, menghapus data, serta mengupdate data.
Mari kita simak dengan baik tutorial
Berikut :
1. Pertama kita aktifkan dulu XAMPP pada Pc kita
3. Kemudian Create database dengan nama crud2
4. Lalu buatlah Tabel dengan ketentuan sebagai berikut :
5. Jika sudah maka langkah selanjutnya adalah membuat Folder di
Xampp/ htdocs/crud2
6.
Dan buat dulu file koneksi.php, file ini yang akan menghubungkan antara script php dengan
database MySQl nanti. Berikut Script nya :
<?php
$koneksi = mysqli_connect
(
"localhost",
"root",
"",
"crud2"
);
if (mysqli_connect_errno())
{
echo "Koneksi Gagal"
.mysqli_connect_error();
}
?>
7.
Setelah itu kita buat file index.php dengan script berikut :
<html>
<title>Aplikasi CRUD
Sederhana</title>
<head>
<link
rel="stylesheet" href="style/bootstrap.min.css" />
</head>
<body>
<div
class="container" style="margin-top:8%">
<div
class="row">
<div class="col-md-8
col-md-offset-2">
<p>
<center>
<h2>Aplikasi Crud
Sederhana</h2>
Oleh : <a
href="https://www.smkhasankafrawi.web.id"
target="_blank">SMK HK Keren</a>
</center>
</p>
<br>
<p>
<a class="btn btn-primary"
href="tambah.php">Tambah</a>
</p>
<table class="table
table-bordered">
<tr>
<th>
No
</th>
<th>
Nama
</th>
<th>
Jenis Kelamin
</th>
<th>
Telepon
</th>
<th>
Alamat
</th>
<th>
Opsi
</th>
</tr>
<?php
include"koneksi.php";
$no = 1;
$data = mysqli_query
($koneksi, " select
id_mahasiswa,
nama,
jenis_kelamin,
telepon,
alamat
from
mahasiswa
order by id_mahasiswa
DESC");
while ($row =
mysqli_fetch_array ($data))
{
?>
<tr>
<td>
<?php echo $no++; ?>
</td>
<td>
<?php echo $row['nama'];
?>
</td>
<td>
<?php echo
$row['jenis_kelamin']; ?>
</td>
<td>
<?php echo
$row['telepon']; ?>
</td>
<td>
<?php echo
$row['alamat']; ?>
</td>
<td>
<a
href="detail.php?id=<?php echo $row['id_mahasiswa'];
?>">Detail</a> |
<a
href="edit.php?id=<?php echo $row['id_mahasiswa'];
?>">Edit</a> |
<a
href="hapus.php?id=<?php echo $row['id_mahasiswa'];
?>">Hapus</a>
</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<p>
<center>Copyright @
2019 by : <a href="https://www.smkhasankafrawi.web.id"
target="_blank">SMK HK Keren</a> All rights
reserved.</center>
</p>
</div>
</body>
</html>
Simpan dan kita coba
jalankan di browser, hasilanya kurang lebih seperti di bawah ini
8. Selanjutnya kita akan membuat form untuk
mengisi data. Dengan nama form.php
Dengan script sebagai berikut :
<html>
<title>Aplikasi CRUD GEMBEL</title>
<head>
<link rel="stylesheet"
href="style/bootstrap.min.css" />
</head>
<body>
<div class="container"
style="margin-top:8%">
<div
class="row">
<div
class="col-md-8 col-md-offset-2">
<p>
<center>
<h2>Aplikasi CRUD GEMBEL</h2>
Oleh : <a href="https://smk-hasankafrawi.blogspot.com/"
target="_blank">SMK HASAN KAFRAWI</a>
</center>
</p>
<br>
<form
role="form" method="post" action="input.php">
<div
class="form-group">
<label>Nama</label>
<input class="form-control" name="nama">
</div>
<div
class="form-group">
<label>Jenis Kelamin</label>
<div class="radio">
<label>
<input type="radio" name="jenis_kelamin"
value="Laki-laki" checked>Laki-laki
</label>
</div>
<div class="radio">
<label>
<input
type="radio" name="jenis_kelamin"
value="Perempuan">Perempuan
</label>
</div>
</div>
<div
class="form-group">
<label>Telepon</label>
<input class="form-control" name="telepon">
</div>
<div
class="form-group">
<label>Alamat</label>
<textarea name="alamat" class="form-control"
rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary
pull-right">Simpan</button>
<a
href="index.php" class="btn btn-success pull-right" style="margin-right:1%;">Batal</a>
</form>
</div>
</div>
<p>
<center>Copyright @ 2018 by : <a
href="https://smk-hasankafrawi.blogspot.com/"
target="_blank">SMK HASAN KAFARWI</a> All rights
reserved.</center>
</p>
</div>
</body>
</html>
Cek dengan cara jalankan di
browser, berikut hasilnya :
9. Setelah membuat form untuk mengisi data tersedia, kita buat
lagi file dengan nama input.php, file ini
berfungsi untuk mengirim data di form ke database mysql.
<?php
include"koneksi.php";
$nama = $_POST['nama'];
$jenis_kelamin =
$_POST['jenis_kelamin'];
$alamat =
$_POST['alamat'];
$telepon =
$_POST['telepon'];
$query = "insert
INTO mahasiswa SET
nama = '$nama',
jenis_kelamin = '$jenis_kelamin',
alamat =
'$alamat',
telepon =
'$telepon'
";
mysqli_query($koneksi,
$query)
or die ("Gagal
Perintah SQL".mysql_error());
header('location:index.php');
?>
10. Selanjutnya kita akan buat fitur melihat detail data, buat
file dengan nama detail.php dengan script di
bawah ini :
<html>
<title>Aplikasi
CRUD GEMBEL</title>
<head>
<link
rel="stylesheet" href="style/bootstrap.min.css" />
</head>
<body>
<?php
include"koneksi.php";
$no = 1;
$data = mysqli_query ($koneksi, "
select
id_mahasiswa,
nama,
jenis_kelamin,
telepon,
alamat
from
mahasiswa
where
id_mahasiswa = $_GET[id]");
$row = mysqli_fetch_array ($data);
?>
<div
class="container" style="margin-top:8%">
<div class="row">
<div class="col-md-8
col-md-offset-2">
<p>
<center>
<h2>Aplikasi Crud
GEMBEL</h2>
Oleh : <a
href="https://smk-hasankafrawi.blogspot.com/"
target="_blank">SMK HASAN KAFRAWI</a>
</center>
</p>
<br>
<p>
<a class="btn
btn-success" href="index.php">Kembali</a>
</p>
<table class="table
table-stripped">
<tr>
<td
style="width:10%;">
Nama
</td>
<td>
: <?php echo
$row['nama']; ?>
</td>
</tr>
<tr>
<td>
Telepon
</td>
<td>
: <?php echo
$row['telepon']; ?>
</td>
</tr>
<tr>
<td>
Alamat
</td>
<td>
: <?php echo
$row['alamat']; ?>
</td>
</tr>
</table>
</div>
</div>
<p>
<center>Copyright @ 2018 by : <a
href="https://smk-hasankafrawi.blogspot.com/" target="_blank">SMK
HASAN KAFRAWI</a> All rights reserved.</center>
</p>
</div>
</body>
</html>
Kita coba jalankan apakah sudah berhasil atau belum. Jika sudah maka akan muncul tampilan seperti ini
11. Buat file edit.php, script
ini akan mengambil id data yang mau di edit dan di tampilkan ke dalam form.
<html>
<title>Aplikasi
CRUD GEMBEL</title>
<head>
<link
rel="stylesheet" href="style/bootstrap.min.css" />
</head>
<body>
<div
class="container" style="margin-top:8%">
<div class="row">
<div class="col-md-8
col-md-offset-2">
<p>
<center>
<h2>Aplikasi CRUD
GEMBEL</h2>
Oleh : <a
href="https://smk-hasankafrawi.blogspot.com/"
target="_blank">SMK HASAN KAFRAWI</a>
</center>
</p>
<br>
<form
role="form" method="post" action="input.php">
<div
class="form-group">
<label>Nama</label>
<input class="form-control" name="nama">
</div>
<div
class="form-group">
<label>Jenis Kelamin</label>
<div class="radio">
<label>
<input type="radio" name="jenis_kelamin"
value="Laki-laki" checked>Laki-laki
</label>
</div>
<div class="radio">
<label>
<input
type="radio" name="jenis_kelamin"
value="Perempuan">Perempuan
</label>
</div>
</div>
<div
class="form-group">
<label>Telepon</label>
<input class="form-control" name="telepon">
</div>
<div
class="form-group">
<label>Alamat</label>
<textarea name="alamat" class="form-control"
rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary
pull-right">Simpan</button>
<a
href="index.php" class="btn btn-success pull-right"
style="margin-right:1%;">Batal</a>
</form>
</div>
</div>
<p>
<center>Copyright @ 2018 by : <a
href="https://smk-hasankafrawi.blogspot.com/"
target="_blank">SMK HASAN KAFRAWI</a> All rights
reserved.</center>
</p>
</div>
</body>
</html>
12. Seperti form tambah, form edit juga membutuhkan action untuk
memproses data yang di isikan ke dalam database.. kita buat update.php
dengan script di bawah ini :
<?php
include"koneksi.php";
$id = $_POST['id_mahasiswa'];
$nama = $_POST['nama'];
$jenis_kelamin =
$_POST['jenis_kelamin'];
$telepon =
$_POST['telepon'];
$alamat = $_POST['alamat'];
$query = "UPDATE
mahasiswa SET
nama = '$nama',
jenis_kelamin =
'$jenis_kelamin',
telepon
= '$telepon'
alamat =
'$alamat',
WHERE
id_mahasiswa = '$id'
";
mysqli_query($koneksi,
$query)
or die ("Gagal
Perintah SQL".mysql_error());
header('location:index.php');
?>
13. Kita buat file hapus.php dengan script di bawah ini :
<?php
include"koneksi.php";
$query = "DELETE FROM mahasiswa
WHERE id_mahasiswa ='$_GET[id]'
";
mysqli_query($koneksi, $query)
or die ("Gagal Perintah SQL".mysql_error());
header('location:index.php');
?>
14. Setelah semua file kita
buat saatnya menjalankan aplikasi yang telah kita buat tadi, Dengan cara buka
browser terus ketik tulisan
Jika berhasil maka akan muncul tampilan
sebagai berikut :
E. Refrensi
F. Kesimpulan
Dari artikel diatas kita jadi tahu
bagaimana cara membuat Aplikasi CRUD serta kita jadi tau bagaimana
langkah-langkahnya.
G.Penutup
Sekian yang dapat saya sampaikan
kurang dan lebihnya saya mohon ma’af.
Wassalamu’alaikum wr.wb
