Halo semuanya, kembali lagi di sahretech. Pernahkah kalian berfikir bagaimana cara menampilkan data pada sebuah halaman tanpa reload atau refresh halaman tersebut, seperti aplikasi pesan instant, atau update data perkembangan corona misalnya?, Jika kalian sedang mencari tutorial tersebut, mampir disni adalah pilihan yang tepat bagi kalian. Karena kita akan membahasnya disini dengan bahasa pemrograman php, DBMS MySQL dan Jquery ajax, untuk itu ayo ikuti tutorialnya berikut ini!.
Menampilkan Data Secara Realtime dengan Jquery Ajax
Ada saatnya kalian akan menyadari bahwa aplikasi web yang dibuat harus menampilkan data secara realtime tanpa harus melakukan refreshing halaman terlebih dahulu, dan php tidak dapat melakukan hal tersebut sendirian, perlu library tambahan yaitu jquery. Sedangkan cara kerjanya, jquery akan melakukan request data ke server per-berapa waktu sekali, sesuai dengan waktu yang kita buat tanpa ada campur tangan user.
Pertama buatlah sebuah folder baru di dalam htdocs dengan nama latihan atau sesuai dengan keinginan kalian masing-masing. Selanjutnya hidupkan apache webservice dan mysql service kalian lalu ikutilah langkah selanjuntya di bawah ini.
1. Membuat Database dan Table
 |
| table mahasiswa |
2. Membuat File koneksi.php
File ini dibuat untuk menghubungkan project yang kita buat dengan database. Buat file baru dengan nama koneksi.php lalu copy paste script di bawah ini. Save dan jalankan halaman ini di web browser kalian.
<?php
$connect = mysqli_connect('localhost', 'root', '', 'latihan');
if(mysqli_connect_error()){
echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
}else{
}
?>
Jika tidak menampilkan pesan apapun, maka koneksi ke database berhasil dilakukan, dan jika menampilkan pesan gagal melakukan koneksi ke database maka terjadi error dan koneksi ke database tidak berhasil dilakukan. Sebaiknya copy paste script di atas untuk menghindari typo penyebab error.
3. Membuat File data.php
<?php
include("connect.php");
$sql = mysqli_query($connect, "SELECT * FROM mahasiswa");
$result = array();
while ($row = mysqli_fetch_assoc($sql)) {
$data[] = $row;
}
echo json_encode(array("result" => $data));
?>
4. Membuat File fungsi.js
$(document).ready(function() {
selesai();
});
function selesai() {
setTimeout(function() {
update();
selesai();
}, 200);
}
function update() {
$.getJSON("data.php", function(data) {
$("table").empty();
var no = 1;
$.each(data.result, function() {
$("table").append("<tr><td>"+(no++)+"</td><td>"+this['nama']+"</td><td>"+this['jurusan']+"</td></tr>");
});
});
}
5. Membuat File index.php
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<table align="center" border=1>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script type="text/javascript" src="tampil.js"></script>
</body>
</html>
 |
| database realtime |
Tambahan: Membuat Add Data dengan Jquery Ajax
6. Add Script Form Inputan
<center>
<form method="post" class="form-user">
Nama : <input type="text" name="nama"><br>
Jurusan :
<select name="jurusan">
<optin>Sistem Informasi</option>
<option>Akuntansi</option>
<option>Informatika</option>
</select>
<br>
<button class="tombol-simpan">Simpan</button>
</form>
</center>
<hr>
 |
| Hasil form input |
7. Add Fungsi Javascript
$(".tombol-simpan").click(function(){
var data = $('.form-user').serialize();
$.ajax({
type: 'POST',
url: "simpan.php",
data: data,
success: function() {
alert('input data berhasil');
}
});
});
 |
| input data tanpa reload |
No comments