Tutorial CRUD PHP & MySQLi Dengan Bootstrap : Membuat Koneksi Database
CRUD PHP & MySQLi Dengan Bootstrap : Membuat Koneksi
Database - Halo teman-teman semuanya, pada kesempatan kali ini kita
semua akan belajar tentang bagaimana cara mudah membuat CRUD PHP
& MySQLi Dengan Bootstrap secara terstruktur step by step.
Untuk pembahasan pertama di tutorial kali ini kita akan membahas
bagaimana cara membuat koneksi antara PHP kita ke Database.
PHP adalah bahasa pemrogramman web yang dinamis dan sangat populer
yang biasanya digunakan untuk membagun website secara dinamis, salah
satu membuat website secara dinamis adalah dengan cara menyimpan
data yang ada kedalam database dan bisa dimanupulasi dengan sesuka
keinginan.
Pertama, kita buat sebuah database baru dulu, untuk teman-teman yang
biasa menggunakan XAMPP, silahkan diaktifkan apache dan mysql.
Setelah itu silahkan ketikkan [Link] kita akan
melihat tampilan dari PHP MyAdmin, disitu kita bisa membuat database
dan tabel.
Sekarang kita bikin database baru dengan nama db_sekolah, setelah
database berhasil terbuat langkah selanjutnya kita akan memulai
menyiapkan kode PHP untuk menyambungkannya.
Sekarang kita buat folder baru dengan nama sekolah di dalam C: /
XAMPP / htdocs ( jika kalian menggunakan XAMPP). Jika folder sudah
terbuat, sekarang kita buat file baru didalam folder tersebut dengan
nama [Link].
Dan sekarang kita ketikkan kode berikut ini kedalam file [Link], berikut
kodenya :
<?php
//deklasrasi variabel
$db_host = "localhost";
$db_user = "root";
$db_pass = "";
$db_name = "db_sekolah";
$connection = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if($connection) {
echo "Koneksi Berhasil!";
} else {
echo "Koneksi Gagal! : ". mysqli_connect_error();
}
?>
Dari kode diatas, mari kita bahas bersama dan kita pahami fungsi-
fungsinya.
$db_host - variabel ini digunakan untuk menyimpan nama host kita,
yaitu localhost.
$db_user - variabel ini digunakan untuk menyimpan username dari
MySQL kita, jika kita menggunakan XAMPP maka default isinya
adalah root.
$db_pass - variabel ini digunakan untuk menympan password dari
MySQL kita, secara default adalah kosong, maka kita tidak perlu
mengisi variabel ini.
$db_name - variabel ini digunakan untuk menyimpan nama database
yang sudah kita buat sebelumnya.
Kemudian kita perhatikan kode ini juga :
if($connection) {
echo "Koneksi Berhasil!";
} else {
echo "Koneksi Gagal! : ". mysqli_connect_error();
}
Dari kode diatas, kita membuat sebuah kondisi atau pengecekan apakah
variabel $connection itu bernilai TRUE atau FALSE atau terpenuhi atau
tidak.
Maka jika kondisi dari variabel $connection itu terpenuhi maka jika kita akses
koneksi kita di web browser dengan cara
mengetikkan [Link] maka akan keluar pesan
:
Koneksi Berhasil!
Atau kita bisa lihat seperti gambar dibawah ini:
Akan tetapi jika variabel $connection itu tidaak terpenuhi atau
bernilai FALSE, maka pesan yang akan ditampilkan adalah kurang lebih
seperti berikut ini:
Koneksi Gagal! : + disertai penjelasan error
Atau kita bisa lihat seperti gambar dibawah ini:
Tutorial CRUD PHP & MySQLi Dengan Bootstrap : Input Data Ke Database
CRUD PHP & MySQLi Dengan Bootstrap : Input Data Ke Database -
Halo teman-teman semuanya diartikel sebelumnya kita sudah membahas
bagaimana cara membuat sebuah koneksi dari PHP ke Database kita.
Pada tutorial kali ini, kita semua akan belajar bagaimana caranya
memasukkan data atau input data dari PHP ke database yang sudah kita
buat sebelumnya.
Untuk teman-teman yang baru belajar, silahkan dibaca artikel sebelumnya
tentang cara membuat koneksi dari PHP ke Database di Part 1.
Sebelum kita membuat form yang digunakan untuk menyimpan data ke
database, langkah pertama kita harus buat sebuah tabel baru terlebih
dahulu di dalam database db_sekolah yang sudah kita buat di artikel
pertama.
Silahkan buka dan klik db_sekolah. Dan buatlah tabel baru dengan
nama tbl_siswa, kurang lebih seperti gambar dibawah ini.
Dari gambar pembuatan tabel diatas, berikut penjelasan singkatnya:
id_siswa - digunakan sebagai PRIMARY KEY dan dijadikan AUTO
INCREMENT dengan tipe data INT dan dengan Lenght / Value 11,
dimana kolom ini sebagai perwakilan satu record / satu baris.
nisn - kolom ini digunakan untuk menyimpan data NISN dengan tipe
data VARCHAR dengan Lenght / Value 50.
nama_lengkap - kolom ini digunakan untuk menyimpan nama lengkap
dari siswa dengan tipe data VARCHAR dengan Lenght / Value 200.
alamat - dan yang kolom terakhir ini adalah untuk menyimpan alamat
dari data siswa, di kolom ini kita menggunakan tipe data TEXT dan
kita tidak perlu meberikan isian dari Lenght / Value.
Jika sudah berhasil semuanya, kita sekarang lanjut membuat tampilan form
yang digunakan untuk menyimpan data siswa ke dalam database.
Silahkan buat file baru dengan nama [Link] di dalam folder
sekolah, jadi kurang lebih strukturnya seperti pada gambar berikut ini.
Pada kesempatan kali ini, untuk tampilan kita akan
menggunakan Bootstrap 4, jadi kita tidak perlu membuat CSS lagi dari
awal dan proses pembuatan tampilan akan sangat cepat dan terbantu.
Untuk file Bootstrap yang akan kita gunakan adalah online atau
mengambil dari CDN, jika teman-teman ingin mencobanya secara offline,
teman-teman bisa mengunduh file bootstrap dan di taruh di folder project
kita.
Untuk kode [Link], silahkan teman-teman copy dan paste kode
dibawah ini kedalam file [Link] yang sudah kalian buat
sebelumnya.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<link rel="stylesheet"
href="[Link]
<title>Tambah Siswa</title>
</head>
<body>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-header">
TAMBAH SISWA
</div>
<div class="card-body">
<form action="[Link]" method="POST">
<div class="form-group">
<label>NISN</label>
<input type="text" name="nisn" placeholder="Masukkan NISN Siswa"
class="form-control">
</div>
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" name="nama_lengkap" placeholder="Masukkan
Nama Siswa" class="form-control">
</div>
<div class="form-group">
<label>Alamat</label>
<textarea class="form-control" name="alamat"
placeholder="Masukkan Alamat Siswa” rows="4"></textarea>
</div>
<button type="submit" class="btn btn-success">SIMPAN</button>
<button type="reset" class="btn btn-warning">RESET</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="[Link]
<script
src="[Link]
script>
</body>
</html>
Dan jika dijalankan dengan mengetikkan [Link]
[Link], maka jika berhasil tampilannya kurang lebih seperti berikut ini:
Perlu di perhatikan pada baris kode berikut ini :
<form action="[Link]" method="POST">
Dari kode diatas, form yang sudah kita buat akan mengarah ke file baru
yang bernama [Link], jadi proses input dari form akan langsung
di proses oleh file yang bernama [Link] dengan menggunakan
method POST.
Sekarang kita buat file baru dengan nama [Link] didalam
folder sekolah, yang mana file ini sejajar dengan file [Link].
Dan silahkan masukkan kode berikut ini kedalam file [Link]:
<?php
//include koneksi database
include('[Link]');
//get data dari form
$nisn = $_POST['nisn'];
$nama_lengkap = $_POST['nama_lengkap'];
$alamat = $_POST['alamat'];
//query insert data ke dalam database
$query = "INSERT INTO tbl_siswa (nisn, nama_lengkap, alamat) VALUES ('$nisn',
'$nama_lengkap', '$alamat')";
//kondisi pengecekan apakah data berhasil dimasukkan atau tidak
if($connection->query($query)) {
//redirect ke halaman [Link]
header("location: [Link]");
} else {
//pesan error gagal insert data
echo "Data Gagal Disimpan!";
?>
Lihat pada kode berikut ini :
//get data dari form
$nisn = $_POST['nisn'];
$nama_lengkap = $_POST['nama_lengkap'];
$alamat = $_POST['alamat'];
Kode diatas adalah sebuah deklarasi variabel yang mana isinya mengambil
dari hasil input Form.
Dan coba perhatikan pada baris kode berikut ini :
//query insert data ke dalam database
$query = "INSERT INTO tbl_siswa (nisn, nama_lengkap, alamat) VALUES ('$nisn',
'$nama_lengkap', '$alamat')";
Pada kode diatas itu adalah sebuah Query yang digunakan untuk
menyimpan data ke dalam database.
Dan untuk lihat kode berikut ini :
//kondisi pengecekan apakah data berhasil dimasukkan atau tidak
if($connection->query($query)) {
//redirect ke halaman [Link]
header("location: [Link]");
} else {
//pesan error gagal insert data
echo "Data Gagal Disimpan!";
}
Kode diatas adalah sebuah kondisi dimana jika variabel bernilai TRUE atau
Query berjalan maka otomatis kita akan diarahkan ke dalam file yang
bernama [Link].
Tapi jika kondisi tidak terpenuhi atau bernilai FALSE, maka akan
mengeluarkan pesan error “Data Gagal Disimpan!”.
utorial CRUD PHP & MySQLi Dengan Bootstrap : Menampilkan Data Dari
Database
CRUD PHP & MySQLi Dengan Bootstrap : Menampilkan Data Dari
Database - Selamat datang teman-teman semuanya di artikel lanjutan dari
seri membuat CRUD PHP & MySQLi Dengan Bootstrap di Part 3 yaitu
menampilkan data dari database.
Jika diartikel sebelumnya kita sudah membahas tentang bagaimana cara
memaukkan data atau input data dari From ke Database, maka di artikel
kali ini kita semua akan belajar bagaimana cara menampilkan data yang
sudah berhasil diinputkan ke database.
Pada artikel kali ini kita akan menampilkan data dari database
menggunakan Library yang bernama Datatables. Kenapa
menggunakan Datatables ? dengan Datatables kita tidak harus membuat
pencarian dan paginasi data secara manual, semuanya sudah disediakan
secara otomatis.
Penasaran? mari kita mulai materinya, diartikel sebelumnya kita sudah
membuat file yang bernama [Link] dan file tersebut masuh kosong.
Maka ditutorial kali ini kita akan menuliskan beberapa kode di
file [Link] tersebut.
Karena file [Link] inilah yang bertugas untuk menampilkan data dari
database ke layar browser kita. Oke sekarang silahkan kalian copy dan
paste kode dibawah ini dikedalam file [Link] :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<link rel="stylesheet"
href="[Link]
<link rel="stylesheet"
href="//[Link]/1.10.20/css/[Link]">
<title>Data Siswa</title>
</head>
<body>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
DATA SISWA
</div>
<div class="card-body">
<a href="[Link]" class="btn btn-md btn-success"
style="margin-bottom: 10px">TAMBAH DATA</a>
<table class="table table-bordered" id="myTable">
<thead>
<tr>
<th scope="col">NO.</th>
<th scope="col">NISN</th>
<th scope="col">NAMA LENGKAP</th>
<th scope="col">ALAMAT</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
<?php
include('[Link]');
$no = 1;
$query = mysqli_query($connection,"SELECT * FROM
tbl_siswa");
while($row = mysqli_fetch_array($query)){
?>
<tr>
<td><?php echo $no++ ?></td>
<td><?php echo $row['nisn'] ?></td>
<td><?php echo $row['nama_lengkap'] ?></td>
<td><?php echo $row['alamat'] ?></td>
<td class="text-center">
<a href="[Link]?id=<?php echo $row['id_siswa'] ?>"
class="btn btn-sm btn-primary">EDIT</a>
<a href="[Link]?id=<?php echo $row['id_siswa'] ?
>" class="btn btn-sm btn-danger">HAPUS</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="[Link]
<script
src="[Link]
script>
<script
src="//[Link]/1.10.20/js/[Link]"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Oke kita bahas kodenya step by step, perhatikan untuk kode berikut ini :
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
Kode diatas adalah kode bagaimana Datatable diapply ke sebuah table
dengan id myTable, jika teman-teman perhatikan di tag table, teman-
teman pasti melihat id dengan isi myTable.
Oke, jika kalian jalankan dengan mengetikkan di
browser [Link] maka kurang lebih tampilannya seperti
berikut ini :
Tutorial CRUD PHP & MySQLi Dengan Bootstrap : Edit dan Update Data ke
Database
CRUD PHP & MySQLi Dengan Bootstrap : Edit Dan Update Data Ke
Database - Halo teman-teman semuanya pada kesempatan kali ini kita
akan melanjutkan artikel dari seri CRUD PHP & MySQLi Dengan
Bootstrap. Dan pada artikel kali ini kita semua akan belajar bagaimana
cara mengedit dan mengupdate data kedalam database.
Jika sebelumnya kita sudah banyak membahas tentang seri ini, mulai dari
membuat koneksi database, memasukkan data atau input
data hingga menampilkannya ke layar atau web browser.
Oke pada kesemptan kali ini kita mencoba membuat edit dan update data,
jika teman-teman belum membaca artikel sebelumnya maka teman-teman
harus membacanya dari part 1 atau dari awal.
Oke langsung saja, buatlah sebuah file baru didalam folder / project kita
yang bernama sekolah, buat file dengan nama [Link]. Kemudian
masukkan kode berikut ini :
<?php
include('[Link]');
$id = $_GET['id'];
$query = "SELECT * FROM tbl_siswa WHERE id_siswa = $id LIMIT 1";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_array($result);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<link rel="stylesheet"
href="[Link]
<title>Edit Siswa</title>
</head>
<body>
<div class="container" style="margin-top: 80px">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-header">
EDIT SISWA
</div>
<div class="card-body">
<form action="[Link]" method="POST">
<div class="form-group">
<label>NISN</label>
<input type="text" name="nisn" value="<?php echo $row['nisn'] ?
>" placeholder="Masukkan NISN Siswa" class="form-control”>
<input type="hidden" name="id_siswa" value="<?php echo
$row['id_siswa'] ?>">
</div>
<div class="form-group">
<label>Nama Lengkap</label>
<input type="text" name="nama_lengkap" value="<?php echo
$row['nama_lengkap'] ?>" placeholder="Masukkan Nama Siswa" class="form-control">
</div>
<div class="form-group">
<label>Alamat</label>
<textarea class="form-control" name="alamat"
placeholder="Masukkan Alamat Siswa" rows="4"><?php echo $row['alamat'] ?
></textarea>
</div>
<button type="submit" class="btn btn-success">UPDATE</button>
<button type="reset" class="btn btn-warning">RESET</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="[Link]
<script
src="[Link]
script>
</body>
</html>
Oke kita bahas kode diatas mulai dari kode berikut ini :
<?php
include('[Link]');
$id = $_GET['id'];
$query = "SELECT * FROM tbl_siswa WHERE id_siswa = $id LIMIT 1";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_array($result);
?>
Dari potongan kode diatas ini digunakan untuk mencari data siswa ke
database dengan ID yang kita ambil dari URL atau link. Jika kita perhatikan
ketika klik tombol edit maka URL yang dihasilkan kurang lebih seperti
ini [Link]
Kemudian jika kita perhatikan di baris kode berikut ini :
<form action="[Link]" method="POST">
Kita sedang mengarahkan form kita saat melalkukan update ke file yang
bernama [Link], maka dari itu kita sekarang harus membuat file
yang bernama [Link] didalam project sekolah kita.
Dan kemudian masukkan kode berikut ini kedalam file [Link] :
<?php
//include koneksi database
include('[Link]');
//get data dari form
$id_siswa = $_POST['id_siswa'];
$nisn = $_POST['nisn'];
$nama_lengkap = $_POST['nama_lengkap'];
$alamat = $_POST['alamat'];
//query update data ke dalam database berdasarkan ID
$query = "UPDATE tbl_siswa SET nisn = '$nisn', nama_lengkap = '$nama_lengkap',
alamat = '$alamat' WHERE id_siswa = '$id_siswa'";
//kondisi pengecekan apakah data berhasil diupdate atau tidak
if($connection->query($query)) {
//redirect ke halaman [Link]
header("location: [Link]");
} else {
//pesan error gagal update data
echo "Data Gagal Diupate!";
}
?>
Lihat pada kode berikut ini :
//get data dari form
$id_siswa = $_POST['id_siswa'];
$nisn = $_POST['nisn'];
$nama_lengkap = $_POST['nama_lengkap'];
$alamat = $_POST['alamat'];
Kode diatas adalah sebuah deklarasi variabel yang mana isinya mengambil
dari hasil input Form.
Dan coba perhatikan pada baris kode berikut ini :
//query update data ke dalam database berdasarkan ID
$query = "UPDATE tbl_siswa SET nisn = '$nisn', nama_lengkap = '$nama_lengkap',
alamat = '$alamat' WHERE id_siswa = '$id_siswa'";
Pada kode diatas itu adalah sebuah Query yang digunakan untuk
mengupdate data ke dalam database dengan berdasarkan ID siswa.
Dan untuk lihat kode berikut ini :
//kondisi pengecekan apakah data berhasil diupdate atau tidak
if($connection->query($query)) {
//redirect ke halaman [Link]
header("location: [Link]”);
} else {
//pesan error gagal update data
echo "Data Gagal Diupate!”;
Kode diatas adalah sebuah kondisi dimana jika variabel bernilai TRUE atau
Query berjalan maka otomatis kita akan diarahkan ke dalam file yang
bernama [Link], yang artinya edit dan update data berhasil dilakukan.
Tapi jika kondisi tidak terpenuhi atau bernilai FALSE, maka akan
mengeluarkan pesan error “Data Gagal Diupdate!”.
Selanjutnya, untuk edit dan sekaligus update data siswa akan kita bahas
pada atikel selanjutnya.
Tutorial CRUD PHP & MySQLi Dengan Bootstrap : Hapus Data dari Database
CRUD PHP & MySQLi Dengan Bootstrap : Hapus Data Dari Database -
Halo teman-teman semuanya melanjutkan di pembahasan artikel
sebelumnya yaitu edit dan update data, pada kesempatan artikel kali ini
kita semua akan bersama-sama belajar bagaimana cara membuat delete
data dari database.
Langsung saja kita mulai, silahkan teman-teman perhatikan pada
file [Link] yang sudah kita buat seelumnya. Pada bagian button hapus
data teman-teman akan melihat URL untuk menghapus data berdasarkan
parameter ID, kurang lebih seperti ini [Link]
id=ID.
Dari link diatas, kita bisa mengetahui bahwasanya kita harus membuat file
dengan nama [Link] di dalam folder project sekolah kita.
Sekarang silahkan buat file dengan nama [Link] dan masukkan
kode dibawah ini.
<?php
include('[Link]');
//get id
$id = $_GET['id'];
$query = "DELETE FROM tbl_siswa WHERE id_siswa = '$id'";
if($connection->query($query)) {
header("location: [Link]");
} else {
echo "DATA GAGAL DIHAPUS!";
}
?>
Dari kode diatas kita bisa tau ada sebuah Query delete data siswa
berdasarkan ID yang didapatkan dari URL / link.
Sekarang coba teman-teman mengahapus sebuah data, jika berhasil maka
teman-teman akan diarahkan kembali ke [Link] dengan data sudah
terhapus.
Apabila gagal, teman-teman akan mendapatkan pesan error atau pesan
kesalahan "DATA GAGAL DIHAPUS!”.
