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 http://localhost/phpmyadmin dan 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 koneksi.php.

Dan sekarang kita ketikkan kode berikut ini kedalam file koneksi.php, 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 http://localhost/sekolah/koneksi.php, 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 tambah-siswa.php 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 tambah-siswa.php, silahkan teman-teman copy dan paste kode

dibawah ini kedalam file tambah-siswa.php 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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<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="simpan-siswa.php" 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="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></
script>
</body>
</html>

Dan jika dijalankan dengan mengetikkan http://localhost/sekolah/tambah-

siswa.php, maka jika berhasil tampilannya kurang lebih seperti berikut ini:
Perlu di perhatikan pada baris kode berikut ini :
<form action="simpan-siswa.php" method="POST">

Dari kode diatas, form yang sudah kita buat akan mengarah ke file baru
yang bernama simpan-siswa.php, jadi proses input dari form akan langsung
di proses oleh file yang bernama simpan-siswa.php dengan menggunakan
method POST.

Sekarang kita buat file baru dengan nama simpan-siswa.php didalam

folder sekolah, yang mana file ini sejajar dengan file tambah-siswa.php.

Dan silahkan masukkan kode berikut ini kedalam file simpan-siswa.php:

<?php

//include koneksi database

include('koneksi.php');

//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 index.php

header("location: index.php");

} 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 index.php

header("location: index.php");

} 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 index.php.

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 index.php dan file tersebut masuh kosong.
Maka ditutorial kali ini kita akan menuliskan beberapa kode di
file index.php tersebut.

Karena file index.php inilah yang bertugas untuk menampilkan data dari

database ke layar browser kita. Oke sekarang silahkan kalian copy dan
paste kode dibawah ini dikedalam file index.php :
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<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="tambah-siswa.php" 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('koneksi.php');
$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="edit-siswa.php?id=<?php echo $row['id_siswa'] ?>"
class="btn btn-sm btn-primary">EDIT</a>
<a href="hapus-siswa.php?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="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></
script>
<script
src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></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 http://localhost/sekolah, 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 edit-siswa.php. Kemudian
masukkan kode berikut ini :
<?php

include('koneksi.php');

$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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<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="update-siswa.php" 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="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></
script>
</body>
</html>

Oke kita bahas kode diatas mulai dari kode berikut ini :
<?php

include('koneksi.php');

$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 http://localhost/sekolah/edit-siswa.php?id=ID.

Kemudian jika kita perhatikan di baris kode berikut ini :

<form action="update-siswa.php" method="POST">
Kita sedang mengarahkan form kita saat melalkukan update ke file yang
bernama update-siswa.php, maka dari itu kita sekarang harus membuat file
yang bernama update-siswa.php didalam project sekolah kita.

Dan kemudian masukkan kode berikut ini kedalam file update-siswa.php :

<?php

//include koneksi database

include('koneksi.php');

//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 index.php
header("location: index.php");
} 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 index.php

header("location: index.php”);

} 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 index.php, 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 index.php 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 http://localhost/hapus-siswa.php?
id=ID.

Dari link diatas, kita bisa mengetahui bahwasanya kita harus membuat file
dengan nama hapus-siswa.php di dalam folder project sekolah kita.
Sekarang silahkan buat file dengan nama hapus-siswa.php dan masukkan
kode dibawah ini.
<?php

include('koneksi.php');

//get id
$id = $_GET['id'];

$query = "DELETE FROM tbl_siswa WHERE id_siswa = '$id'";

if($connection->query($query)) {
header("location: index.php");
} 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 index.php dengan data sudah
terhapus.

Apabila gagal, teman-teman akan mendapatkan pesan error atau pesan

kesalahan "DATA GAGAL DIHAPUS!”.