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!”.
Terakhir, karena jika berhasil menyimpan data ke database akan langsung di arahkan ke file yang bernama index.php. maka otomatis kita harus membuat file baru dengan nama index.php di dalam folder sekolah.
Dan untuk pembahasan index.php akan kita bahas pada artikel selanjutnya. Untuk index.php ini adalah tahap bagaimana data ditampilkan dari Database ke browser atau aplikasi kita.