Cara Menampilkan Data Realtime Tanpa Reload di PHP

Cara menampilkan data realtime tanpa reload di PHP merupakan tutorial teknik CRUD read database MySQL menggunakan library Jquery Ajax sehingga tidak perlu reloading atau refresh halaman web. Menampilkan data tanpa reload sering dijumpai pada aplikasi publik sosial media seperti pesan instan, infografis, status progress, aplikasi nomor antrian, dan aplikasi web service lainnya. Mengapa harus menampilkan data realtime php dengan jquery ajax, karena PHP sendiri tidak dapat melakukan read data secara real-time tanpa action reload atau refresh, oleh karena itu PHP memerlukan library tambahan yaitu jquery. Jadi pada tutorial cara menampilkan data tanpa reload refresh kali ini diperlukan bahasa pemrograman PHP, database MySQL, dan library Jquery ajax.

Tutorial cara menampilkan data realtime tanpa reload di php sehingga dapat menampilkan data dari database secara realtime tanpa action reload ini sangat diperlukan kemahiran dalam penggunaan Jquery Ajax. Jquery akan bekerja untuk melakukan request data ke server secara periodik per berapa waktu sekali, dimana interval waktu tersebut dapat ditetapkan tanpa ada campur tangan user. Tutorial terkait dengan cara menampilkan data tanpa reload di php ini juga tersedia pada artikel membuat widget live chat dengan php mysql.

Sebagai informasi bahwa tutorial cara menampilkan data tanpa reload di php tanpa refresh ini dilakukan pada pemrograman PHP 7, database MySQL, dan library Jquery Ajax.

Cara Menampilkan Data Realtime Tanpa Reload di PHP

data realtime php

Baiklah, berikut adalah tutorial cara menampilkan data realtime tanpa reload di php secara detail step by step menggunakan library jquery ajax, sehingga data akan tampil tanpa refresh.

• Membuat Folder Tutorial
• Membuat Tabel dan Database MySQL
• Koneksi Database MySQL
• Membuat Query Tampil Data.
• Membuat Function Javascript setTimeout, insert, getJSON
• Desain Form Input Data
• Query INSERT Data.

1. Membuat Folder Direktori Tutorial.

Nama folder tidak ada ketentuan kusus, tetapi karena akan memproses kode php sebaiknya terletak di dalam direktori xampp htdocs atau sesuaikan dengan web server yang digunakan. Contoh nama folder yang dibuat adalah "data-realtime-ajax", sehingga url folder menjadi c:\xampp\htdocs\data-realtime-ajax\. Semua file php, javascript, dan assets lain harus tersimpan di dalam folder direktori ini.

2. Membuat Database MySQL dan Tabel.

Dalam tutorial cara menampilkan data realtime tanpa reload di php ini kita membutuhkan database mysql dan tabel yaitu tabel pegawai untuk menampung data pegawai yang diinput. Sebagai contoh nama databasenya adalah "tutorial" sedangkan nama tabelnya adalah "tb_pegawai".

3. Koneksi ke Database MySQL.

Koneksi yang dimaksud adalah menghubungkan project tutorial ini ke engine mysql, sehingga dapat melakukan komunikasi dengan database.

Simpan sebagai koneksi.php

<?php
	$connect	=mysqli_connect("localhost", "root", "", "tutorial");
	if(mysqli_connect_error()){
		echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error();
	}
?>

4. Membuat Query Tampil Data dari Database MySQL.

Query ini berfungsi untuk menampilkan data dari database berupa json yang akan dieksekusi di dalam file javascript.

Simpan sebagai data.php

<?php
	include "koneksi.php";
    $sql	=mysqli_query($connect, "SELECT * FROM tb_pegawai");
    $result	=array();
    while ($row	=mysqli_fetch_assoc($sql)) {
        $data[]	=$row;
    }
    echo json_encode(array("result" => $data));
?>

5. Membuat Function Javascript.

Pada tutorial cara menampilkan data realtime tanpa reload di php function javascript berfunsgi untuk update data dari file data.php, fungsi request data setiap 2 detik sekali, dan fungsi lainnya. Fungsi javascript ini juga berfungsi sekaligus untuk mengirimkan input data yang telah diisi pada form dan akan dikirimkan ke dalam database.

Simpan sebagai fungsi.js

$(".tombol-simpan").click(function(){
	var data = $('.form-user').serialize();
	$.ajax({
		type: 'POST',
		url: "simpan.php",
		data: data
	});
});

$(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['status']+"</td></tr>");
		});
	});
}

6. Membuat Form Input Data di Dalam Index.

Di dalam index ini terdapat jquery cdn, fungsi js, form input dan juga sekaligus untuk menampilkan data hasil input secara realtime.

Simpan sebagai index.php

<!DOCTYPE html>
<html>
<head>
	<title>Menampilkan Data Realtime Tanpa Reload di PHP</title>
</head>
<body>
	<h3>Menampilkan Data Realtime PHP</h3>
	<form method="POST" class="form-user">		
		Nama   : <input type="text" name="nama" /><br />
		Status : 
		<select name="status">
			<option>PNS</option>
			<option>CPNS</option>
			<option>PPPK</option>
			<option>Honorer</option>
		</select>
		<br />
		<br />
		<button class="tombol-simpan">Simpan</button>
	</form>
	<hr />
	<table 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="fungsi.js"></script>
</body>
</html>

7. Membuat Query INSERT Data.

Di dalam tutorial cara menampilkan data realtime tanpa reload di php ini, Query dimaksud digunakan untuk menerima data yang diinput untuk kemudian disimpan ke dalam database MySQL.

Simpan sebagai simpan.php

<?php 
	include "koneksi.php";
	$nama	=$_POST['nama'];
	$status	=$_POST['status']; 
	$insert	=mysqli_query($connect, "INSERT INTO tb_pegawai (nama, status) VALUES ('$nama', '$status')");
?>

Setelah semua source code di atas dibuat dan pastikan disimpan secara benar pada folder direktori yang telah dibuat, silahkan jalankan pada web browser. Maka akan tampil seperti gambar di bawah ini.

Sekian penjelasan tutorial cara menampilkan data realtime tanpa reload di php yang memungkinkan kita untuk menampilkan data dari database secara realtime tanpa action reload. Untuk menampilkan data realtime php dengan jquery ajax di atas, silahkan langsung kopi saja source code pada jendela kode di atas atau download melalui tautan di bawah.

Cara Menampilkan Data Realtime Tanpa Reload di PHP

Download Script PHP

Sekian penjelasan tentang cara menampilkan data realtime tanpa reload di php menggunakan library jquery ajax sehingga dapat tampil data tanpa reload atau refresh. Untuk mendapatkan source code atau script menampilkan data realtime php, silahkan Anda dapat langsung copas melalui coding yang tampil di atas, jika script error mohon hubungi kami melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :

• Membuat CRUD dengan PHP MySQL - Tutorial
• Fungsi POST dan GET pada PHP
• Script PHP Menghitung Nilai Rata-rata - Tutorial
• Mengatasi Error Mysql Shutdown Unexpectedly - XAMPP
• Script PHP Mengurangi Stok Barang

Cara Menampilkan Data Realtime Tanpa Reload di PHP

Tags: menampilkan data realtime php, cara menampilkan data realtime, menampilkan data tanpa refresh, menampilkan data tanpa reload, menampilkan data realtime tanpa reload di php