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 connect.php

File ini dibuat untuk menghubungkan project yang kita buat dengan database. Buat file baru dengan nama connect.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="fungsi.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');
		}
	});
});


8. Membuat File simpan.php

File ini digunakan untuk menangkap data yang diinput, kemudian disimpan ke dalam database. Buatla file baru dengan nama simpan.php lalu copy script di bawah ini dan pastekan di dalam file tersebut.



<?php include('connect.php'); $nama = $_POST['nama']; $jurusan = $_POST['jurusan']; $insert = mysqli_query($connect, "insert into mahasiswa set nama='$nama', jurusan='$jurusan'"); ?>

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.

18 comments:

  1. kalau menggunakan codeigniter bagaimana min

    ReplyDelete
    Replies
    1. mudah gan, controllernya dibuat data json seperti data.php di atas, terus pada file viewnya coba disamain dengan file index.php terus tinggal ditambah fungsi seperti yang ada di file fungsi.js

      Delete
    2. function update() {
      $.getJSON('index.php', function (data) {
      index.php kalau pakai ci4 diganti apa ya min?
      kan kalau ci4 memanggil halaman pakai base_url()

      Delete
  2. untuk yang index.php line 11 bagian src="tampil.js" salah... seharusnya src="fungsi.js" sesuai arahan anda pada no 4. btw nice tutorialnya sukses terus

    ReplyDelete
    Replies
    1. Terima kasih kunjungan dan masukkannya. Siap saya benerin

      Delete
  3. thanks bro.. sangat bermafaat, saya implementasikan di CI3 dan berhasil

    ReplyDelete
    Replies
    1. terima kasih banyak atas kunjungannya mas, senang rasanya bisa membantu orang lain :)

      Delete
    2. boleh liat contoh implementasi ke ci3nya bagaimana ya

      Delete
  4. kalau untuk web yang sudah di upload di hosting gimana kak? sementara database nya di localhost pc, adakah cara agar bisa menampilkan database realtime dari localhost ke web yang sudah di upload di hosting?

    ReplyDelete
    Replies
    1. buat database baru di hostingnya mas, trus database local diexport dan diimport ke database hostinnya :)

      Delete
  5. Apa bisa data realtime di mysql ini dihost di sebuah real time data (RTD) server yg bisa push ke atau diakses MS-Excel?

    ReplyDelete
  6. Kak mau tanya caranya gimana ya supaya kita bisa update data lewat form input aja tanpa submit button real-time juga nantinya 🙏

    ReplyDelete
    Replies
    1. Bisa banget mas, coba cek artikel saya yang ini https://www.sahretech.com/2021/12/membuat-edit-data-langsung-di-tabel.html

      Delete
  7. menarik nih, oya, kira2 data yg masuk dari halaman web device berbeda, apakah data baru akan update ke halaman web kita?

    ReplyDelete
    Replies
    1. iya sama,otomatis akan berubah juga. Karena scriptnya menggunakan javascript yang ada di browser.

      ok terima kasih kunjugan dan komentarnya :)

      Delete
  8. wah sangat membantu, saya ingin bertanya untuk menambahkan fitur pencarian bagaimana ya? dikarenakan saat saya mencoba coding dari "Cara Membuat Fitur Pencarian Hanya dengan PHP dan MySQL" tidak bisa

    ReplyDelete
  9. function update() {
    $.getJSON("data.php", function(data) {

    Kak, mohon bantuan., misal disini kita juga post data, apa bisa ya? Ini kan buat ngambil data dari data.php., di data.php kan ada syntax.nya, nah di syntax itu mau di kasih pengkondisian berdasarkan data" yang di muat di halaman., bisa ga ya kak

    ReplyDelete
  10. mas boleh ajarkan tutorial dari awal pembuatan, masih newbie saya, jika berkenan kirim ke email rudi.fadli27@gmail.com

    ReplyDelete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi