Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini saya akan berbagi tutorial cara membuat aplikasi input dan menampilkan data sederhana dengan teknik ajax. Keuntungannya, kalian bisa membuat single page application tanpa reload. Penasaran?, ayo ikuti tutorialnya berikut ini.
Aplikasi yang kita akan buat adalah aplikasi input dan tampil data mahasiswa. Dimana dalam 1 halaman terdapat form input di sebelah kiri halaman, dan tabel data di sebelah kanan halaman. Pada latihan kali ini kita tidak menggunakan data api, tapi cukup meload component-component tertentu saja. Dan untuk mempercantik tampilan, saya menggunakan bootstrap. Semua library akan menggunakan cdn agar pembuatan lebih cepat dan mudah dimengerti.
| Baca Artikel Lain ✨ |
| 📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more |
| 📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more |
| 📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more |
Membuat Halaman Input & Menampilkan Data dengan Jquery Ajax
1. Membuat Database dan Tabel
Buatlah sebuah database baru dengan nama latihan, lalu buat tabel di dalamnya
dengan nama mahasiswa. Adapaun struktur tabelnya dapat kalian lihat pada
gambar di bawah ini.
|
| tabel mahasiswa |
2. Membuat File Koneksi ke Database
Buatlah sebuah folder baru di dalam folder xampp/htdocs dengan nama "webtanpareload".
Lalu buat file connect.php di dalamnya. Copy script di bawah ini dan pastekan
di file tersebut.
<?php
$connect = mysqli_connect('localhost', 'root', '', 'latihan');
if(mysqli_connect_error()){
echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
}else{
}
?>Buka xampp control panel, lalu hidupkan apache dan mysql kalian. Buka web browser lalu jalankan http://localhost/webtanpareload/connect.php. Jika tidak berhasil konek maka akan memunculkan tulisan gagal
melakukan koneksi ke database. Dan jika berhasil halaman tidak akan
memunculkan pesan apapun.
3. Membuat File index.php
Kemudian buatlah sebuah file baru dengan nama index.php. Lalu copy script di
bawah ini dan pastekan ke dalam file index.php.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<br>
<div class="container">
<h2 class="alert alert-success text-center">
Cara Input dan Tampil Data Tanpa Reload dengan Ajax Jquery
</h2>
<div class="row">
<div class="col-5">
<div class="card">
<div class="card-body">
<form id="form-input">
<div class="form-group">
<label for="exampleInputEmail1">Nama</label>
<input type="text" class="form-control" id="nama" name="nama" placeholder="Input Nama">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Jurusan</label>
<input type="text" class="form-control" id="jurusan" name="jurusan"
placeholder="Input Jurusan">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Jenis Kelamin</label>
<select name="jk" class="form-control" id="jk">
<option value="laki-laki">Laki-laki</option>
<option value="perempuan">Perempuan</option>
</select>
</div>
<button type="submit" id="tombol-simpan" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<div class="col-7">
<div id="tabeldata">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script>
<script>
$(document).ready(function () {
update();
});
$("#tombol-simpan").click(function () {
//validasi form
$('#form-input').validate({
rules: {
nama: {
required: true
},
jurusan: {
required: true
}
},
//jika validasi sukses maka lakukan
submitHandler: function (form) {
$.ajax({
type: 'POST',
url: "simpan.php",
data: $('#form-input').serialize(),
success: function () {
//setelah simpan data, update data terbaru
update()
}
});
//kosongkan form nama dan jurusan
document.getElementById("nama").value = "";
document.getElementById("jurusan").value = "";
return false;
}
});
});
//fungsi tampil data
function update() {
$.ajax({
url: 'datamahasiswa.php',
type: 'get',
success: function(data) {
$('#tabeldata').html(data);
}
});
}
</script>
</body>
</html>
Buka web browser lalu jalankan http://localhost/webtanpareload/index.php. Maka tampilannya akan tampak seperti gambar di
bawah ini. Halaman yang kita buat belum menampilkan data apapun. Perhatikan <div id="tabeldata"></div>, nantinya data akan kita tampilkan di
dalam div tersebut.
 |
| Tampilan aplikasi |
Penjelasan Script di Atas
Fungsi Input Data
$("#tombol-simpan").click(function () {
//validasi form
$('#form-input').validate({
rules: {
nama: {
required: true
},
jurusan: {
required: true
}
},
//jika validasi sukses maka lakukan
submitHandler: function (form) {
$.ajax({
type: 'POST',
url: "simpan.php",
data: $('#form-input').serialize(),
success: function () {
//setelah simpan data, update data terbaru
update()
}
});
//kosongkan form nama dan jurusan
document.getElementById("nama").value = "";
document.getElementById("jurusan").value = "";
return false;
}
});
});
saat #tombol-simpan diklik, maka #form-input akan divalidasi. Nama dan jurusan
bertipe required: true, artinya harus diisi, jika kosong maka form tidak
berhasil dikirimkan. Lalu submitHandler akan dijalankan jika validasi
berhasil. Dimana data yang diinput akan dikirim ke simpan.php dan diproses di
halaman tersebut, nanti kita harus membuat file terbebut.
success: function () digunakan untuk melakukan aksi jika proses penyimpanan
berhasil dilakukan. Fungsi update() adalah fungsi yang akan mengudpate ulang
data yang terbaru dari database. Untuk penjelasannya akan dibahas di bawah
ini.
Sebelum ditutup, kita perlu mengosongkan form input sebelumnya. Kan gak
mungkin, setelah input data formnya nggak dikosongin. Caranya dengan
menambahkan document.getElementById('nama-idnya').value = ""
Fungsi Tampil Data
function update() {
$.ajax({
url: 'datamahasiswa.php',
type: 'get',
success: function(data) {
$('#tabeldata').html(data);
}
});
}
fungsi update() bertujuan agar script yang lain bisa menggunakan fungsi ini.
Karena biasanya setiap kali ada aksi, data terbaru harus ditampilkan. Biar
nggak capek kita buat 1 fungsi dan tinggal pake di script-script lainnya saat
dibutuhkan.
Data yang akan kita update barasal dari datamahasiswa.php. Dimana di dalam
file tersebut terdapat tabel yang berisi data dari database.
$('#tabeldata').html(data). Digunakan untuk menampilkan tabel di dalam <div
id="tabeldata"></div>. Fungsinya sama seperti include pada php, tapi
ini menggunakan javascript.
4. Membuat File datamahasiswa.php
File ini berisi tabel dan data yang diambil dari database. file ini akan kita
gabungkan ke dalam file index. dengan menggunakan teknik ajax. Penjelasannya
fungsinya ada di bagian penjelasan fungsi tampil data.
Buatlah sebuah file baru dengan nama datamahasiswa.php. Lalu copy script di
bawah ini dan pastekan ke dalam file tersebut.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama</th>
<th scope="col">Jurusan</th>
<th scope="col">Jenis Kelamin</th>
</tr>
</thead>
<tbody>
<?php
include "connect.php";
$no=1;
$query=mysqli_query($connect, "SELECT * FROM Mahasiswa");
while ($result=mysqli_fetch_array($query)) {
?>
<tr>
<td>
<?php echo $no++; ?>
</td>
<td>
<?php echo $result['nama']; ?>
</td>
<td>
<?php echo $result['jurusan']; ?>
</td>
<td>
<?php echo $result['jk']; ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>Penjelasan Script di Atas
Kita buat sebuah tabel sederhana, dimana ada kolom nama, jurusan dan jenis kelamin. Lalu di bawahnya kita ambil data dari database dan meloopingnya data dari database dengan menggunakan while().
5. Membuat File simpan.php
Buatlah file baru dengan nama simpan.php. Copy script di bawah ini dan
pastekan ke dalam file tersebut.
<?php
include('connect.php');
$nama = $_POST['nama'];
$jurusan = $_POST['jurusan'];
$jk = $_POST['jk'];
$insert = mysqli_query($connect, "insert into mahasiswa set nama='$nama', jurusan='$jurusan', jk='$jk'");
?>
Jalankan aplikasi kalian, buka http://localhost/webtanpareload/index.php. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini. Coba untuk menginput data baru dengan memasukkan nama, jurusan, dan jenis kelamin
 |
| Tampilan aplikasi |
Untuk membandingkan, semua file dan scriptnya bisa kalian download di link
berikut ini https://drive.google.com/file/d/1zZ3FGlOE5VWpAzDdafliu90oFDM1Vi1o/view?usp=sharing
Sekian tutorial cara input dan menampilkan data tanpa reload dengan jquery
ajax. Semoga bermanfaat. Bagi kalian yang masih merasa bingung, silahkan tanya
di kolom komentar di bawah ini dan mari kita diskusikan bersama. Sampai jumpa
di tutorial seru lainnya.
Mantapp
ReplyDelete