Input dan Menampilkan Data Tanpa Reload dengan Jquery Ajax

Share:

Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan kali ini saya akan berbagi tutorial cara membuat aplikasi input dan menampilkan data sederhana dengan teknik ajax. Keuntungannya, kalian bisa membuat single page application tanpa reload. Penasaran?, ayo ikuti tutorialnya berikut ini.



Aplikasi yang kita akan buat adalah aplikasi input dan tampil data mahasiswa. Dimana dalam 1 halaman terdapat form input di sebelah kiri halaman, dan tabel data di sebelah kanan halaman. Pada latihan kali ini kita tidak menggunakan data api, tapi cukup meload component-component tertentu saja. Dan untuk mempercantik tampilan, saya menggunakan bootstrap. Semua library akan menggunakan cdn agar pembuatan lebih cepat dan mudah dimengerti.

Baca Artikel Lain ✨
📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more
📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more
📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more


Membuat Halaman Input & Menampilkan Data dengan Jquery Ajax


1. Membuat Database dan Tabel

Buatlah sebuah database baru dengan nama latihan, lalu buat tabel di dalamnya dengan nama mahasiswa. Adapaun struktur tabelnya dapat kalian lihat pada gambar di bawah ini.

tabel mahasiswa sahretech
tabel mahasiswa



2. Membuat File Koneksi ke Database

Buatlah sebuah folder baru di dalam folder xampp/htdocs dengan nama "webtanpareload". Lalu buat file connect.php di dalamnya. Copy script di bawah ini dan pastekan di file tersebut.



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

Buka xampp control panel, lalu hidupkan apache dan mysql kalian. Buka web browser lalu jalankan http://localhost/webtanpareload/connect.php. Jika tidak berhasil konek maka akan memunculkan tulisan gagal melakukan koneksi ke database. Dan jika berhasil halaman tidak akan memunculkan pesan apapun.



3. Membuat File index.php

Kemudian buatlah sebuah file baru dengan nama index.php. Lalu copy script di bawah ini dan pastekan ke dalam file index.php. 



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <br> <div class="container"> <h2 class="alert alert-success text-center"> Cara Input dan Tampil Data Tanpa Reload dengan Ajax Jquery </h2> <div class="row"> <div class="col-5"> <div class="card"> <div class="card-body"> <form id="form-input"> <div class="form-group"> <label for="exampleInputEmail1">Nama</label> <input type="text" class="form-control" id="nama" name="nama" placeholder="Input Nama"> </div> <div class="form-group"> <label for="exampleInputPassword1">Jurusan</label> <input type="text" class="form-control" id="jurusan" name="jurusan" placeholder="Input Jurusan"> </div> <div class="form-group"> <label for="exampleInputPassword1">Jenis Kelamin</label> <select name="jk" class="form-control" id="jk"> <option value="laki-laki">Laki-laki</option> <option value="perempuan">Perempuan</option> </select> </div> <button type="submit" id="tombol-simpan" class="btn btn-primary">Submit</button> </form> </div> </div> </div> <div class="col-7"> <div id="tabeldata"> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.2/dist/jquery.validate.js"></script> <script> $(document).ready(function () { update(); }); $("#tombol-simpan").click(function () { //validasi form $('#form-input').validate({ rules: { nama: { required: true }, jurusan: { required: true } }, //jika validasi sukses maka lakukan submitHandler: function (form) { $.ajax({ type: 'POST', url: "simpan.php", data: $('#form-input').serialize(), success: function () { //setelah simpan data, update data terbaru update() } }); //kosongkan form nama dan jurusan document.getElementById("nama").value = ""; document.getElementById("jurusan").value = ""; return false; } }); }); //fungsi tampil data function update() { $.ajax({ url: 'datamahasiswa.php', type: 'get', success: function(data) { $('#tabeldata').html(data); } }); } </script> </body> </html>

Buka web browser lalu jalankan http://localhost/webtanpareload/index.php. Maka tampilannya akan tampak seperti gambar di bawah ini. Halaman yang kita buat belum menampilkan data apapun. Perhatikan <div id="tabeldata"></div>, nantinya data akan kita tampilkan di dalam div tersebut.


aplikasi jquery ajax sahretech
Tampilan aplikasi




Penjelasan Script di Atas

Fungsi Input Data

        

$("#tombol-simpan").click(function () {     //validasi form     $('#form-input').validate({         rules: {             nama: {                 required: true             },             jurusan: {                 required: true             }         },         //jika validasi sukses maka lakukan         submitHandler: function (form) {             $.ajax({                 type: 'POST',                 url: "simpan.php",                 data: $('#form-input').serialize(),                 success: function () {                     //setelah simpan data, update data terbaru                     update()                 }         });         //kosongkan form nama dan jurusan         document.getElementById("nama").value = "";         document.getElementById("jurusan").value = "";         return false;         }     }); });

saat #tombol-simpan diklik, maka #form-input akan divalidasi. Nama dan jurusan bertipe required: true, artinya harus diisi, jika kosong maka form tidak berhasil dikirimkan. Lalu submitHandler akan dijalankan jika validasi berhasil. Dimana data yang diinput akan dikirim ke simpan.php dan diproses di halaman tersebut, nanti kita harus membuat file terbebut.

success: function () digunakan untuk melakukan aksi jika proses penyimpanan berhasil dilakukan. Fungsi update() adalah fungsi yang akan mengudpate ulang data yang terbaru dari database. Untuk penjelasannya akan dibahas di bawah ini.

Sebelum ditutup, kita perlu mengosongkan form input sebelumnya. Kan gak mungkin, setelah input data formnya nggak dikosongin. Caranya dengan menambahkan document.getElementById('nama-idnya').value = ""


Fungsi Tampil Data


function update() { $.ajax({ url: 'datamahasiswa.php', type: 'get', success: function(data) { $('#tabeldata').html(data); } }); }

fungsi update() bertujuan agar script yang lain bisa menggunakan fungsi ini. Karena biasanya setiap kali ada aksi, data terbaru harus ditampilkan. Biar nggak capek kita buat 1 fungsi dan tinggal pake di script-script lainnya saat dibutuhkan.

Data yang akan kita update barasal dari datamahasiswa.php. Dimana di dalam file tersebut terdapat tabel yang berisi data dari database. $('#tabeldata').html(data). Digunakan untuk menampilkan tabel di dalam <div id="tabeldata"></div>. Fungsinya sama seperti include pada php, tapi ini menggunakan javascript.



4. Membuat File datamahasiswa.php

File ini berisi tabel dan data yang diambil dari database. file ini akan kita gabungkan ke dalam file index. dengan menggunakan teknik ajax. Penjelasannya fungsinya ada di bagian penjelasan fungsi tampil data.

Buatlah sebuah file baru dengan nama datamahasiswa.php. Lalu copy script di bawah ini dan pastekan ke dalam file tersebut.


<table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Nama</th> <th scope="col">Jurusan</th> <th scope="col">Jenis Kelamin</th> </tr> </thead> <tbody> <?php include "connect.php"; $no=1; $query=mysqli_query($connect, "SELECT * FROM Mahasiswa"); while ($result=mysqli_fetch_array($query)) { ?> <tr> <td> <?php echo $no++; ?> </td> <td> <?php echo $result['nama']; ?> </td> <td> <?php echo $result['jurusan']; ?> </td> <td> <?php echo $result['jk']; ?> </td> </tr> <?php } ?> </tbody> </table>

Penjelasan Script di Atas

Kita buat sebuah tabel sederhana, dimana ada kolom nama, jurusan dan jenis kelamin. Lalu di bawahnya kita ambil data dari database dan  meloopingnya data dari database dengan menggunakan while().



5. Membuat File simpan.php

Buatlah file baru dengan nama simpan.php. Copy script di bawah ini dan pastekan ke dalam file tersebut.


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


Jalankan aplikasi kalian, buka http://localhost/webtanpareload/index.php. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini. Coba untuk menginput data baru dengan memasukkan nama, jurusan, dan jenis kelamin

tampilan aplikasi sahretech
Tampilan aplikasi




Untuk membandingkan, semua file dan scriptnya bisa kalian download di link berikut ini https://drive.google.com/file/d/1zZ3FGlOE5VWpAzDdafliu90oFDM1Vi1o/view?usp=sharing
Sekian tutorial cara input dan menampilkan data tanpa reload dengan jquery ajax. Semoga bermanfaat. Bagi kalian yang masih merasa bingung, silahkan tanya di kolom komentar di bawah ini dan mari kita diskusikan bersama. Sampai jumpa di tutorial seru lainnya.


No comments

Kalo baca, tolong kasih komentar dong!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik