Ajax untuk simpan data ke mysql

Question

Table of Contents Show

1. Membuat Database dan Table
2. Membuat File connect.php
3. Membuat File data.php
4. Membuat File fungsi.js
5. Membuat File index.php
Tambahan: Membuat Add Data dengan Jquery Ajax
6. Add Script Form Inputan
7. Add Fungsi Javascript
8. Membuat File simpan.php

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

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.

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

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.

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.

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.

kode mysql AJAX Sederhana