Menampilkan Data Secara Realtime dari Database Mysql Tanpa Reload dengan Jquery Ajax

Share:

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

Buatlah sebuah database baru dengan nama latihan dan buat tabel mahasiswa di dalamnya dengan nama mahasiswa. Dan jangan lupa untuk mengisi beberapa data di dalamnya. Untuk struktur tabelnya dapat dilihat pada gambar di bawah ini.

sahretech
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

File ini dibuat untuk menampilkan data-data dari database berupa json. Buat file baru dengan nama data.php lalu copy paste script di bawah ini lalu. Save lalu jalankan di web browser kalian untuk melihat hasilnya.


<?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));
?>

Jika berhasil, maka data akan ditampilkan sesuai yang ada di dalam database kalian. Dan jika muncul tulisan selain data yang ada di dalam database kalian, maka itu terjadi error. Perbaiki codingan kalian dengan membandingkan script yang telah saya tulis di atas.


4. Membuat File fungsi.js

File fungsi.js ini berisi fungsi javascript yang akan menampilkan data dari file data.php, di dalam file ini juga berisi fungsi request data setiap 2 detik sekali. Buat sebuah file baru dengan nama fungsi.js dan copy paste script di bawah ini.


$(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

Buat file baru dengan nama index.php lalu copy paste script di dalamnya. File ini akan berisi jquery cdn dan fungsi.js.


<!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>

Setelah semua tahapan di atas telah kalian jalankan, selanjutnya lihat hasilnya di web browser. Hasilnya akan tampak seperti gambar di bawah ini.

database realtime sahretech
database realtime



Tambahan: Membuat Add Data dengan Jquery Ajax

Pada tahap sebelumnya kita sudah berhasil menampilkan data secara realtime dari database. Rasanya tidak afdol jika data dimasukkan lewat phpmyadmin ya kan?, untuk itu, di sesi tambahan ini saya akan memberikan tutorial cara membuat add data dengan jquery ajax tanpa reload.

6. Add Script Form Inputan

Buka halaman index.php lalu tambahkan script di bawah ini tepat di bawah tag <body>. Script html di bawah ini berfungsi untuk membuat 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>

save lalu jalankan di web browser kalian, jika sukses maka hasilnya akan tampak seperti gambar di bawah ini.

sahretech
Hasil form input



7. Add Fungsi Javascript

Buka file fungsi.js lalu tambahkan script di bawah ini. Fungsi ini berguna untuk mengirimkan data yang telah kita isi sebelumnya di dalam form dan akan dikirimkan ke dalam database.


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

save lalu jalankan project kalian, coba untuk mengisi data lewat form dan coba untuk mengisi data lewat phpmyadmin secara langsung dan perhatikan hasilnya. Previewnya dapat kalian lihat di bawah ini.

saretech
input data tanpa reload



Sekian tutorial menampilkan data secara realtime dari database MySQL tanpa reload dengan jquer ajax. Semoga bermanfaat bagi para pembaca sekalian. Kurang lebihnya saya mohon maaf, jika ada pertanyaan silahkan tinggalkan komentar kalian di bawah ini.

No comments