Baikdeh Setelah kalian baca tutorial di part 1 kita telah membuat dan merancang sebuah database untuk kita gunakan dalam seri pembuatan crud kali ini nih. Nah dan di part 2 kali ini kita akan melanjutkan membuat sebuah form input atau tampilan input yang akan kita gunakan untuk memasukan data nih langsung aja deh ya tanpa basa basi lagi.
 |
| picture by ilmunya-ngoding.blogspot.co.id |
Seperti biasa kalian hidupkan apache dan mysql kalian di xampp dan jangan lupa buka text editor kalian juga.
Langkah pertama, kita buat terlebih dahulu folder di dalam htdocs xampp kalian. Kasih nama aja crud dan setelah itu buka text editor kalian. file pertama yang harus kita buat adalah file koneksi. Karena file ini sangat penting untuk menghubungkan antara web crud yang akan kita buat dengan database mysql yang juga telah kita buat di part 1 sebelumnya. Script dan penjelasan seperti berikut
koneksi.php
<?php
$conn = mysqli_connect("localhost", "root", "", "db_crud");
if($conn){
} else {
echo "database error";
}
?>
$conn = mysqli_connect("localhost", "root", "", "db_crud");
if($conn){
} else {
echo "database error";
}
?>
penjelasan
baris kode $conn = mysqli_connect("localhost", "root", "", "db_crud"); script ini lah yang akan mengubungkan ke database phpmyadmin di dalam function mysqli_connect terdapat empat data yang harus di isi.
- Bagian Pertama adalah web server kita, karena kita di sini pakai localhost maka isi saja dengan "localhost"
- Bagian Kedua adalah username yang kita pakai di phpmyadmin. karena pada dasarnya jika kita ingin meng akses phpmyadmin maka kita memerlukan akun nah akun ini sudah di buatkan sejak pertama kita menginstall xampp. Dan default akunya username nya adalah "root"
- Dan bagian yang Ketiga adalah password, untuk passoword defaultnya adalah kosong.
- Dan yang terahkir adalah nama database kita. Karena database kita kemarin namanya adalah db_crud maka kita tulisdeh "db_crud" di bagian yang terahkir
baris kode if dan else adalah pengkondisian jadi kita masukan kondisinya terlebih dahulu di situ saya sudah masukan $conn yang isi nya adalah fungsi dari koneksi nah jika $conn tadi berhasil maka saya memberi pesan kosong tapi jika gagal atau else maka beri pesan atau echo "database error" jadi itulah penjelasanya.
Setelah selesai kita membuat file koneksi.php kalian juga boleh cek terlebih dahulu filenya jika tidak ada tulisan error maka file koneksi.php yang telah kita buat sukses deh dan kita tinggal lanjut buat file tambah-data.php
Setelah selesai kita membuat file koneksi.php kalian juga boleh cek terlebih dahulu filenya jika tidak ada tulisan error maka file koneksi.php yang telah kita buat sukses deh dan kita tinggal lanjut buat file tambah-data.php
tambah-data.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Halaman Tambah data - ilmunya ngoding</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<label>Nama lengkap : </label><input type="text" name="nama" placeholder="nama siswa"><br><br>
<label>Alamat : </label><textarea name="alamat" id="" cols="30" rows="2" placeholder="alamat anda"></textarea><br><br>
<label>Kelas : </label><input type="text" name="jurusan" placeholder="jurusan anda" ><br><br>
<label>jurusan : </label><input type="text" name="jurusan" placeholder="jurusan anda" ><br><br>
<input type="submit" name="kirim" value="tambah">
</form>
<?php
include 'koneksi.php';
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$kelas = $_POST['kelas'];
$jurusan = $_POST['jurusan'];
if(isset($_POST['kirim'])){
$tambah = mysqli_query($conn, "INSERT INTO tb_siswa VALUES(NULL, '".$nama."', '".$alamat."', '".$kelas."', '".$jurusan."')");
if($tambah){
echo "data sukses di tambah";
} else {
echo "data gagal di tambah";
}
}
?>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Halaman Tambah data - ilmunya ngoding</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<label>Nama lengkap : </label><input type="text" name="nama" placeholder="nama siswa"><br><br>
<label>Alamat : </label><textarea name="alamat" id="" cols="30" rows="2" placeholder="alamat anda"></textarea><br><br>
<label>Kelas : </label><input type="text" name="jurusan" placeholder="jurusan anda" ><br><br>
<label>jurusan : </label><input type="text" name="jurusan" placeholder="jurusan anda" ><br><br>
<input type="submit" name="kirim" value="tambah">
</form>
<?php
include 'koneksi.php';
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$kelas = $_POST['kelas'];
$jurusan = $_POST['jurusan'];
if(isset($_POST['kirim'])){
$tambah = mysqli_query($conn, "INSERT INTO tb_siswa VALUES(NULL, '".$nama."', '".$alamat."', '".$kelas."', '".$jurusan."')");
if($tambah){
echo "data sukses di tambah";
} else {
echo "data gagal di tambah";
}
}
?>
</body>
</html>
Penjelasan
Untuk penjelasanya admin cukup jelasin bagian script php nya aja ya hehe. Nah hal yang pertama harus kita lakukan adalah memanggil file koneksi.php yang telah kita buat tadi scriptnya yang include 'koneksi.php';
Setelah itu biar rapi kita mendeklasarikan terlebih dahuludeh variable dari name-name yang ada di dalam tag <form></form>
Nah setelah kita men deklarasikan variable supaya lebih rapi kita akan membuat sebuah kondisi di bagian if isset jadi itu baca nya gini ketika kita pencet tombol submit maka lakukan script atau perintah di dalam ini.
Nah script di dalam tersebut terdapat lagi sebuah variable yaitu $tambah dan isi dari variable tambah sendiri adalah query untuk memasukan data ke dalam database.
Setelah itu kita buat sebuah pengkondisian lagi deh untuk meng uji $tambah tadi berhasil atau tidak jika berhasil maka tampilan tulisan atau pesan "data sukses di tambah" dan jika tidak berhasil maka tampilkan pesan atau tulisan "data gagal di tambah" nah jadi itulah penjelasan sedikit atau cara baca script tersebut. Etss hal yang paling penting jangan sampai lupa untuk mengecek untuk mengujinya jika berhasil maka akan tampil gambar seperti di bawah ini
 |
| picture by ilmunya-ngoding.blogspot.co.id |
Langkah pertama, buat sebuah file dengan nama index.php karena file ini akan menampung data-data yang akan kita tampilkan maka beri nama saja file tersebut dengan nama index.php dan untuk script pertama yang akan kita buat adalah tampilan tabelnya terlebih dahulu. Kalian juga bisa kalian copy script di bawah ini
Index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Halaman Beranda - ilmunya-ngoding</title>
</head>
<body>
<h1 align="center">Tampilan data</h1>
<table border="1px" align="center">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Kelas</th>
<th>Jurusan</th>
<th>Aksi</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Penjelasan :
Script di atas adalah script untuk membuat sebuah tampilan table dan dalam seri ini kita tidak akan terlalu fokus ke dalam tampilan atau style atau gaya atau front end hehe banyak banget ya ataunya. Tapi kali ini kita akan fokus terlebih dahulu ke backend Trus back end itu apa ? jika kalian yang belum tahu bisa baca terlebih dahulu pembahasan tentang front end dan backend terlebih dahulu
Front end
front end adalah bagian dimana user melihat langsung dan user juga langsung dapat berinteraksi. Dan bagian ini di bangun dengan menggunakan html, css, dan javascript
Back end
Jika front end adalah bagian luar dalam sebuah website maka back end adalah bagian dalamnya atau bagian belakang layar. bahasa pemograman yang sering di gunakan adalah php,python,ruby dan masih banyak yang lainya.Dan kita kembali lagi ke topik awal kita jadi bisa kita simpulkan bahwa script di atas adalah bagian dari front end karena kita membangun atau membuat nya hanya dengan html saja. script yang yang buat di atas juga hanya script table biasa.
dan kali ini akan menambahkan script back end nya script nya seperti berikut
Index.php
<?php include 'koneksi.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Halaman Beranda - ilmunya-ngoding</title>
</head>
<body>
<h1 align="center">Tampilan data</h1>
<table border="1px" align="center">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Kelas</th>
<th>Jurusan</th>
<th>Aksi</th>
</tr>
<?php
$data = mysqli_query($conn, "SELECT * FROM tb_siswa");
$no = 1;
while($fetch = mysqli_fetch_array($data)){
?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $fetch['nama_siswa']; ?></td>
<td><?php echo $fetch['alamat']; ?></td>
<td><?php echo $fetch['kelas']; ?></td>
<td><?php echo $fetch['jurusan'] ?></td>
<td><a href="edit.php?id=<?php echo $fetch['id_siswa']; ?>">Edit</a> || <a href="hapus.php?id=<?php echo $fetch['id_siswa']; ?>">Hapus</a></td>
</tr>
<?php } ?>
</table>
</body>
</html>
Penjelasan :
Seperti yang telah kita bahas di tutorial yang sebelumnya hal yang paling utama dan utama adalah kita harus memanggil file koneksi terlebih dahulu. Karena script koneksi sangat lah penting maka di sini saya menaruhnya di baris kode paling atas.
Setelah kita memanggil file koneksi maka selanjutnya adalah kita membuat script query lagi. Etss tapi scriptnya tidak sama seperti yang kemarin ya di sini kita mengambil data dengan query SELECT * FROM Karena di tutorial sebelumnya kita memakai query INSERT INTO untuk menambahkan data ke dalam database.
Selanjutnya setelah kita memangambil data yang telah kita SELECT di dalam variable $data kita akan me looping dengan script while dan di dalam script while kita membuat sebuah variable $fetch untuk mengambil data satu per satu. dan $fetch ini sendiri akan kita taruh di dalam tag <td></td> seperti script di atas.
Dan sekalian kita tambahkan kolom aksi update dan delete untuk bagian update dan delete. mungkin itu sedikit penjelasan tentang script di atas semoga kalian bisa paham. aminn
Baiklah sekian dulu ya turorial CRUD - Part 2 (Create & Read) Membuat form input dan tampilan data seperti biasa jika artikel ini bermanfaat bagi kalian, bisa di shere ke temen temen nya ke keluarganya atau siapa aja yang membutuhkan ya. Dan jika kalian binggung atau masih mengalami kesulitan bisa di tanyakan di kolom komentara ya. dan buat kalian yang suka artikel ini atau ngak pengen ketinggalan artikel se lanjutnya klik aja lonceng merah di bawah pojok kanan dan nyalakan pemeberitahuan supaya kalian tidak ke tinggal update an artikel lainya. Sekian terimakasih, wasalam.
 Membuat form input dan tampilan data){kind=link}
1 Comments
Mantap gan bagus untuk refrensi :-)
ReplyDeleteKunjungan balik ya gan amtteknologi.xyz makasih