#Ajax - #JQuery

Input Data Ke Database Tanpa Reload Dengan Ajax JQuery

By Diki Alfarabi Hadi
29 February 2016
Ajax JQuery

Input Data Ke Database Tanpa Reload Dengan Ajax JQuery

Input Data Ke Database Tanpa Reload Dengan Ajax JQuery – Jika sebelumnya kita telah belajar membuat CRUD dengan PHP, seperti menginput data ke database, mengedit data, menampilkan data dari database, serta menghapus data dari database dengan PHP. maka pada tutorial kali ini kita akan belajar cara membuat input data ke database tanpa reload dengan ajax jquery.

Silahkan teman-teman baca tutorial sebelumnya tentang tutorial membuat crud dengan php.

Pengertian Ajax JQuery

Ajax JQuery adalah sebuah metode/teknik atau fungsi juga yang di sediakann oleh jquery untuk membuat suatu aksi dengan tanpa reload atau tanpa refresh halaman. lebih spesifikasi nya tentang ajax akan saya jelaskan pada lain kesempatan di lain tutorial. intinya adalah dengan ajax jquery memungkinkan kita untuk membuat aksi tanpa reload. contohnya seperti di tutorial ini. yaitu kita bisa membuat input data ke database tanpa reload dengan ajax jquery. bukan hanya input data sih. bisa juga mengedit data, menghapus data. tapi di tutorial ajax jquery ini saya hanya akan menjelaskan tentang cara input data tanpa reload dengan jquery. input data tanpa refresh. dan jika cara menampilkan data dari database tanpa reload dengan menggunakan fungsi load jquery.

Seiring perkembangan dunia web development, teknik ajax sudah sangat populer. dan sangat banyak di gunakan di hampir semua aplikasi berbasis web yang modern. karena salah satu kelebihan ajax jquery adalah halaman aplikasi tidak perlu refresh/reload. dan yang lebih menguntungkan nya lagi aplikasi bisa lebih ringan dan menghemat source. oke lanjut langsung ke tutorial ajax jquery.

Artikel yang mungkin anda sukai : Aplikasi penjualan dengan php dan mysql gratis.

silahkan teman-teman perhatikan penjelasan berikut ini tentang cara menginput data tanpa refresh.

Persiapan Membuat Input Data Ke Database Tanpa Reload

Point membuat input form tanpa reload dengan ajax jquery:

buat database dengan nama “malasngoding”.
buat koneksi database dengan php. (koneksi.php).
buat file index.php
buat file aksi.php
style.css
download file library jquery di situs resminya. jquery.js

Langsung saja teman-teman kita masuk ke tutorial membuat input data ke database tanpa reload. yaitu dengan menggunakan ajax jquery. untuk mulai mengikuti tutorial ajax jquery menginput data ke database tanpa reload ini. silahkan teman-teman buat dulu sebuah database dengan nama “malasngoding”. dan kemudian buat table bernama user. dan isikann column nya id, nama, alamat dan pekerjaan. biar lebih cepat silahkan teman-teman import saja sql berikut ini.

-- phpMyAdmin SQL Dump

-- version 3.5.2.2

-- http://www.phpmyadmin.net

-- Host: 127.0.0.1

-- Generation Time: Feb 29, 2016 at 10:02 AM

-- Server version: 5.5.27

-- PHP Version: 5.4.7

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8 */;

-- Database: `malasngoding`

-- --------------------------------------------------------

-- Table structure for table `user`

CREATE TABLE IF NOT EXISTS `user` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`nama` varchar(50) NOT NULL,

`alamat` text NOT NULL,

`pekerjaan` varchar(50) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

setelah database malasngoding dan table user jadi langsung buat koneksi php dan mysql nya. baca tutorial sebelumnya tentang cara membuat koneksi database php dan mysql.

koneksi.php

<?php

mysql_connect("localhost","root","xxx");

mysql_select_db("malasngoding");

teman-teman sesuaikan saja password mysql teman-teman. password mysql saya xxx. silahkn teman-teman ganti dengan password mysql teman-teman. kalau kosong silahkan teman-teman kosongkan saja.

Input Data Ke Database Tanpa Reload Dengan Ajax JQuery

Setelah selesai membuat database dan membuat file untuk menghubungkan php dan mysql. sekarang yang paling terpenting adalah download dulu file jquery.js nya. input data tanpa refresh.download di situs resminya saja. di jquery.com.

setelah teman-teman selesai mendownloadnya. buat sebuah file php lagi dengan nama index.php

index.php

<!DOCTYPE html>

<html>

<head>

<title>Membuat Input Data Ke Database Tanpa Reload Dengan Ajax JQuery | www.malasngoding.com</title>

</head>

<body>

<h1>Membuat Input Data Ke Database Tanpa Reload Dengan Ajax JQuery<br/>www.malasngoding.com</h1>

<table>

<tr>

</tr>

<tr>

<td>Alamat</td>

</tr>

<tr>

<td>Pekerjaan</td>

</tr>

<tr>

<td><a class="tombol-simpan">Simpan</a></td>

</tr>

</table>

</form>

</div>

$(document).ready(function(){

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

var data = $('.form-user').serialize();

$.ajax({

type: 'POST',

url: "aksi.php",

data: data,

success: function() {

$('.tampildata').load("tampil.php");

}

});

</script>

</body>

</html>

letakkan file index.php ini satu directory dengan file jquery.js dan style.css. kemudian di file index.php ini kita hubungkan dulu dengann style.css dan file jquery nya.seperti syntax di atas.

1 2	<link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script>

dan kemudian seperti yang teman-teman lihat pada index.php di atas. kita buat form untuk tempat penginputan data nya.

<table>

<tr>

</tr>

<tr>

<td>Alamat</td>

</tr>

<tr>

<td>Pekerjaan</td>

</tr>

<tr>

<td><a class="tombol-simpan">Simpan</a></td>

</tr>

</table>

</form>

action form nya hilangkan saja seperti syntax di atas. jangan lupa juga memberikan class atau id di form inputnya seperti contoh di atas.

1	<form method="post" class="form-user">

pada form di atas saya membuat class dengan nama form-user. ini berguna untuk mendapatkan data yang di input nantinya.

dan juga terdapat class

1	<a class="tombol-simpan">Simpan</a>

yang kita jadikan sebagai pengirim data nya. sampai di sini kita telah sampai pada intinya. perhatikan perintah jquery di file index.php

$(document).ready(function(){

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

var data = $('.form-user').serialize();

$.ajax({

type: 'POST',

url: "aksi.php",

data: data,

success: function() {

$('.tampildata').load("tampil.php");

}

});

</script>

saya tidak menjelaskan lagi cara penulisan syntax jquery dan cara-cara penggunaan fungsi nya ya. teman-teman bisa melihat di tutorial jquery sebelumnya di www.malasngoding.com. baca di sini.

seperti yang teman-teman lihat pada syntax di atas. kita buat pada saat class .tombol-simpan di klik maka semua data yang ada pada form kita simpan ke variabel data.

1	var data = $('.form-user').serialize();

dan kemudian kita gunakan fungsi ajax jquery. untuk membuat input data tanpa reload dengan ajax jquery.

$.ajax({

type: 'POST',

url: "aksi.php",

data: data,

success: function() {

$('.tampildata').load("tampil.php");

}

});

nah ada beberaa property fungsi ajax jquery yang harus teman-teman perhatikan di sini untuk membuat ajax. yaitu:

type = untuk mendeklarasikan metode pengiriman data dari form.
url = untuk mendeklarasikan file/method yang memproses form.
data = untuk mendeklarasikan data yang di kirim. pada contoh ini kita isi dengan variabel data. dan variabel data kita sudah berisi data yang di input pada form. kita mendapatkan data dari form nya dengan fungsi serialize() jquery.
success = untuk mendeklarasikan aksi yang terjadi pada saat proses ajax berhasil di lakukan.

mudah-mudahan penjelasan di atas dapat mudah di pahami. oh ya satu lagi. di sini pada saat ajax berhasil di lakukan kita menampilkann file tampil.php pada element <div class=”tampildata”></div> di file index.php.

1	$('.tampildata').load("tampil.php");

sekarang kita akan membuat file aksi.php. karena kita mengarahkan pemprosesan form ini ke file aksi.php.

aksi.php

<?php

include 'koneksi.php';

$nama = $_POST['nama'];

$alamat = $_POST['alamat'];

$pekerjaan = $_POST['pekerjaan'];

mysql_query("insert into user values('','$nama','$alamat','$pekerjaan')");

di file index.php ini sama seperti cara penginputan data ke database dengan cara yang telah kita bahas di tutorial CRUD php sebelumnya.

lalu buat file tampil.php. di file tampil.php ini kita akan menampilkan data dari database.

tampil.php

<?php

include 'koneksi.php';

<tr>

<th>Alamat</th>

<th>Pekerjaan</th>

</tr>

<?php

$data = mysql_query("select * from user");

while($d=mysql_fetch_array($data)){

<tr>

</tr>

<?php } ?>

</table>

style.css

body{

font-family: "roboto";

background: #fcfcfc;

}

h1{

text-align: center;

}

.wrap{

width: 500px;

margin: 10px auto;

}

.tombol-simpan{

background: #232323;

padding: 5px 10px;

color: #fff;

}

table tr td,table tr th{

padding: 10px;

}

.data{

border-collapse: collapse;

}

.data tr th,.data tr td{

border: 1px solid #232323;

}

Oke saya rasa selesai sudah. dan berikut adalah hasil input data tanpa reload dengan ajax jquery.

input data ke database tanpa reload dengan ajax jquery

klik simpan.

membuat input data tanpa reload dengan ajax jquery

data pun berhasil tersimpan tanpa reload sedikit pun.

Di tutorial ini kita telah belajar ajax jquery. yaitu membuat input data dengan ajax. tanpa refresh atau reload.

Oke sekian dulu tutorial menampilkan data tanpa reload dan Input Data Ke Database Tanpa Reload Dengan Ajax JQuery. pada tutorial selanjutnya akan kita bahas tentang cara membuat hapus data di database tanpa reload. dan edit/update data tanpa reload.

silahkan download source code input data tanpa reload ini di tombol di bawah ini. silahkan juga di share asalkan tetap mencantumkan alamat aslinya. https://www.malasngoding.com/

[sociallocker id=764]

Download

[/sociallocker]

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.