Scribd
Unggah
483 tayangan15 halaman

Input Dan Menampilkan Data Tanpa Reload Dengan Jquery Ajax

Dokumen tersebut memberikan tutorial cara membuat aplikasi input dan menampilkan data sederhana tanpa reload menggunakan teknik ajax dengan jQuery. Tutorial tersebut menjelaskan cara membuat database, file koneksi, form input, dan menampilkan data dari database ke tabel menggunakan ajax.

Diunggah oleh

Mustafa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
483 tayangan15 halaman

Input Dan Menampilkan Data Tanpa Reload Dengan Jquery Ajax

Dokumen tersebut memberikan tutorial cara membuat aplikasi input dan menampilkan data sederhana tanpa reload menggunakan teknik ajax dengan jQuery. Tutorial tersebut menjelaskan cara membuat database, file koneksi, form input, dan menampilkan data dari database ke tabel menggunakan ajax.

Diunggah oleh

Mustafa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 15

sahretech.

com

Input dan Menampilkan Data Tanpa Reload


dengan Jquery Ajax
11-14 minutes

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.

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

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/[email protected]/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-
[email protected]/dist/jquery.validate.js"></script>

<script>

$(document).ready(function () {

update();

});

$("#tombol-simpan").click(function () {

$('#form-input').validate({

rules: {

nama: {

required: true

},
jurusan: {

required: true

},

submitHandler: function (form) {

$.ajax({

type: 'POST',

url: "simpan.php",

data: $('#form-input').serialize(),

success: function () {

update()

});

document.getElementById("nama").value = "";

document.getElementById("jurusan").value = "";

return false;

});

});

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.
Tampilan aplikasi

Penjelasan Script di Atas

Fungsi Input Data

$("#tombol-simpan").click(function () {

    $('#form-input').validate({

        rules: {

            nama: {

                required: true

            },

            jurusan: {


                required: true

            }

        },

        submitHandler: function (form) {

            $.ajax({

                type: 'POST',

                url: "simpan.php",

                data: $('#form-input').serialize(),

                success: function () {

                    update()

                }

        });

        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

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.

Anda mungkin juga menyukai