Tutorial Input Data Menggunakan AJAX Jquery

Tutorial Input Data Menggunakan AJAX Jquery - Halo semua, di tutorial kali ini kita akan belajar menggunakan method / metode POST pada AJAX untuk melakukan input data menggunakan ajax jquery. Pada artikel sebelumnya, kompikaleng sudah memberikan tutorial membuat CRUD dengan gabungan dari AJAX dan Codeigniter. Nah, tutorial kali ini merupakan bahasan lanjutan mengenai script ajax yang ada di artikel sebelumnya. Setelah tutorial kali ini, diharapkan kalian bisa lebih paham sintaks – sintaks ajax dan paham implementasi ajax jquery untuk melakukan input data ke database

AJAX adalah suatu teknik / metode dalam pemrograman suatu laman web untuk melakukan proses pertukaran data pada background.Dengan begitu, proses pertukaran data tidak memerlukan reload page dari browser dan tidak perlu menunggu proses sebelumnya alias dapat dilakukan beberapa proses sekaligus.

Bagi kalian yang sudah baca artikel sebelumnya, seharusnya udah paham ya tentang ajax jquery ini.

Nah, pada tutorial singkat kali ini. Kita akan mensimulasikan metode post pada ajax dan PHP.

Persiapan

Langkah pertama, kita siapkan dulu apa saja yang kita butuhkan untuk simulasi input data menggunakan ajax jquery kali ini.

Buatlah folder baru di web server kalian, kemudian isi dengan struktur sebagai berikut :

Untuk menggunakan Jquery ajax, tentu saja kita memerlukan library jquery sebagai base javascriptnya. Sedangkan, untuk tampilan disini admin menggunakan boostrap 3.

Download assetsnya disini gan.

Disini, admin menggunakan PHP native sebagai serverside untuk menerima metode post dari ajax nantinya.

Cara Input Data Menggunakan AJAX Jquery

Setelah menyiapkan file file resources, kita mulai dari serverside dulu untuk menangkap data dari tampilan nantinya.

Terima.php

Buat file baru kemudian beri nama terima.php. Lalu isi dengan script berikut :

<?php
$nama = $_POST['nama']; //Menangkap inputan nama dari metode post
$umur = $_POST['umur']; //Menangkap inputan umur dari metode post

$data['nama'] = $nama; //Membungkus variabel nama dalam array variabel data
$data['umur'] = $umur; //Membungkus variabel umur dalam array variabel data

print_r(json_encode($data)); //Print out hasil encode json dari array variabel data.

?>

Nah, penjelasan masing – masing kode sudah saya beri di bagian komen ya. Silahkan dipahami. Kalau kurang jelas atau tidak paham bisa ditanyakan di kolom komentar ya.

Index.html

Setelah selesai membuat server side untuk menangkap nilai dari tampilan, tentunya setelah itu kita membuat tampilannya.

Disini karena hanya untuk sekedar pembelajaran, kali ini kita menggunakan Form sederhana yang terdiri dari nama dan umur, seperti gambar di bawah :

Buat file baru, kemudian beri nama index.html. Lalu, isi dengan script di bawah untuk membuat tampilan

Script :

<!DOCTYPE html>
<html>
<head>
<title>Input Data Ajax KompiKaleng</title>
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="assets/jquery/jquery-3.3.1.min.js"></script>
</head>
<body style="margin: 20px;">
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
Input Data Ajax KompiKaleng
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<div class="col-md-3">
<label for="nama">Nama</label>
<input type="text" id="nama" name="nama" class="form-control"></input>
</div>
<div class="col-md-3">
<label for="umur">Umur</label>
<input type="text" id="umur" name="umur" class="form-control"></input>
</div>
</div>
</div>

<div class="row">
<div class="form-group col-md-12">
<div class="col-md-6">
<button class="btn btn-success" id="btn_kirim">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Setelah membuat tampilan, saatnya kita mulai ke javascriptnya.

Pastekan script di bawah ini pada bagian bawah </html> script di atas,

<script type="text/javascript">
$(document).ready(function(){

$("#btn_kirim").on('click',function(){
var nama = $("input[name='nama']").val();
var umur = $("input[name='umur']").val();
$.ajax({
url: 'terima.php',
type: 'POST',
dataType: 'json',
data: {nama:nama,umur:umur},
success: function(response){
alert('Nama anda adalah '+response['nama']+ '. Umur Anda adalah '+response['umur']+' tahun.');
}
})
})
})
</script>

Mari kita bahas javascript di atas,

$(document).ready(function(){
//kode
})

Blok script di atas, merupakan syntax dasar jquery untuk mengeksekusi fungsi yang ada di dalamnya setelah ‘dokumen’ atau tampilan telah siap.

$("#btn_kirim").on('click',function()

Potongan script di atas merupakan event handler on Click ya temen – temen. Artinya, fungsi yang ada di dalam event on Click ini akan dipanggil / diekseskusi setelah selectornya ‘di-klik’ atau dipencet.

Dalam kasus ini, Button dengan id btn_kirim lah sebagai selectornya.

var nama = $("input[name='nama']").val();
var umur = $("input[name='umur']").val();

Potongan script di atas, digunakan untuk menyimpan value / nilai dari inputan nama dan umur.

Syntax Ajax

Selanjutnya, kita akan memahami sintaks dasar ajax untuk melakukan metode post dan get pada PHP khususnya.

$.ajax({
url: 'terima.php', //url tujuan terima.php
type: 'POST', // metode request post
dataType: 'json', // format data yang dikembalikan dari server
data: {nama:nama,umur:umur}, // variabel yang akan dikirimkan
success: function(response){
alert('Nama anda adalah '+response['nama']+ '. Umur Anda adalah '+response['umur']+' tahun.');
}
})

Menurut web resmi jquery langsung , sintaks dasar ajax adalah sebagai berikut :

jQuery.ajax( url [, settings ] )

Jika kita mengacu pada script ajax yang kita gunakan pada simulasi kali ini, dapat kita liat bahwa terdapat beberapa settings parameter yang kita gunakan untuk mengatur ajax request.

Settings parameter yang digunakan pada tutorial kali ini yaitu url, type, dataType, data, success.

Kita bahas satu – satu ya,

url

adalah URL yang akan dituju / dikirimkan pada request ajax.

type

adalah tipe dari request ajax bisa dikatakan metode dari request ajax (POST,GET dan lain-lain).

dataType

adalah format data yang akan dikembalikan ke response ajax.

data

merupakan settings yang berisikan variabel dan nilai yang akan kita bawa di request ajax. Sebagai contoh, di tutorial ini saya membawa variabel nama dan umur untuk dikirmkan ke server.

Sintaks :

data: {key_name:value_name, key_name_2:value_name_2, .....}

key_name merupakan nama yang akan kita ‘tangkap’ pada request post di serverside nantinya. Sedangkan, value_name merupakan nilai yang akan disimpan di key_name.

success

merupakan fungsi yang dipanggil ketika request ajax berhasil dengan response code = 200. Fungsi success ini membawa 3 argumen antara lain data yang direturn dari proses request ajax, string textstatus, dan, jqxhr object. Kalian bisa baca lebih lengkap mengenai api – api jquery disini

Tapi, di antara 3 argumen tersebut yang paling penting yaitu argumen data hasil return dari request ajax. Argumen tersebut dapat kita deklarasikan dengan menambah parameter di fungsi success. seperti script di bawah :

success: function(response){
alert('Nama anda adalah '+response['nama']+ '. Umur Anda adalah '+response['umur']+' tahun.');
}

response merupakan argumen yang berisikan data hasil response, kalian bisa ganti dengan nama yang lain.

Pada script di atas kita akan membuat alert berisi hasil request ajax ketika request ajax success.

Dapat kita liat, response yang kita dapat dari request ajax berformat objek.

Kemudian kita tampilkan hasil response tersebut pada alert,

Dengan menggunakan ajax untuk melakukan proses pertukaran data, kita dapat lebih memaksimalkan UI ( User Interface ) dan juga UX (User Experience ) pada laman web kita. Karena, dengan menggunakan ajax proses pertukaran data dapat dilakukan di latar belakang / background sehingga browser tidak perlu refresh / reload.

Bagaimana? apa kalian sudah sepenuhnya paham dengan pengaplikasian AJAX Jquery?.

Kalau kalian merasa artikel ini bermanfaat, jangan lupa tinggalkan komentar ya :).

Terima kasih.

Tutorial Input Data Menggunakan AJAX Jquery

Persiapan