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.
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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
--phpMyAdmin SQL Dump
--version3.5.2.2
--http://www.phpmyadmin.net
--
--Host:127.0.0.1
--Generation Time:Feb29,2016at10:02AM
--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 */;
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Data Ke Database Tanpa Reload Dengan Ajax JQuery|www.malasngoding.com</title>
<h1>Membuat Input Data Ke Database Tanpa Reload Dengan Ajax JQuery<br/>www.malasngoding.com</h1>
<div class="wrap">
<form method="post"class="form-user">
<table>
<tr>
<td>Nama</td>
<td><input type="text"name="nama"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text"name="alamat"></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td><input type="text"name="pekerjaan"></td>
</tr>
<tr>
<td></td>
<td><aclass="tombol-simpan">Simpan</a></td>
</tr>
</table>
</form>
<div class="tampildata"></div>
</div>
<script type="text/javascript">
$(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.
dan kemudian seperti yang teman-teman lihat pada index.php di atas. kita buat form untuk tempat penginputan data nya.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form method="post"class="form-user">
<table>
<tr>
<td>Nama</td>
<td><input type="text"name="nama"></td>
</tr>
<tr>
<td>Alamat</td>
<td><input type="text"name="alamat"></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td><input type="text"name="pekerjaan"></td>
</tr>
<tr>
<td></td>
<td><aclass="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
<aclass="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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(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.
1
2
3
4
5
6
7
8
$.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
1
2
3
4
5
6
7
8
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
include'koneksi.php';
?>
<table class="data">
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Pekerjaan</th>
</tr>
<?php
$data=mysql_query("select * from user");
while($d=mysql_fetch_array($data)){
?>
<tr>
<td><?phpecho$d['nama']?></td>
<td><?phpecho$d['alamat']?></td>
<td><?phpecho$d['pekerjaan']?></td>
</tr>
<?php}?>
</table>
style.css
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body{
font-family:"roboto";
background:#fcfcfc;
}
h1{
text-align:center;
}
.wrap{
width:500px;
margin:10pxauto;
}
.tombol-simpan{
background:#232323;
padding:5px10px;
color:#fff;
}
table tr td,tabletrth{
padding:10px;
}
.data{
border-collapse:collapse;
}
.data tr th,.data trtd{
border:1pxsolid#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/
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Membuat crud menggunakan ajax php pada operasi hapus data pada database. Artikel ini lanjutan dari artikel sebelumnya mengenai bagaimana cara menginput data menggunakan ajax jquery. ...
Membuat crud menggunakan ajax php dalam operasi input data. Artikel ini dilanjutkan dari materi sebelumnya yang membahas bagaimana cara menampilkan data menggunakan ajax dan php. ...
Membuat CRUD menggunakan Ajax PHP adalah salah satu materi yang menarik untuk dipelajari. CRUD merupakan singkatan dari Create, Read, Update, Delete. Definisi dari CRUD adalah ...
Materi membuat select option dinamis dengan ajax merupakan salah satu materi yang paling dicari untuk programmer pemula dalam mengembangkan aplikasi. Dikarenakan saya pribadi sering lupa ...
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.
bagaimana cara menambahkan syarat terentu yang mau di tampilkan, pada form tampil :
Nama
Alamat
Pekerjaan