144 Tutorial Input Data Ke Database Dengan Ajax Jquery Dan PHP

Tweet Tweet 0 0
OOtthheerr MMeennuu
About us
Love Indonesia
Serba Serbi
Sitemap
Cerita Inspiratif
Linux
Jaringan Komputer
Tips dan Trik Komputer
TTuuttoorriiaall IInnppuutt DDaattaa kkee ddaattaabbaassee ddeennggaann aajjaaxx jjqquueerryy ddaann PPHHPP
Category: Web Programming
Published on Thursday, 11 July 2013 04:27
Written by Super User
Hits: 3332
Assalamualaikum all,, selamat malam rekan rekan tukang coding semua,, gimana puasanya nya nee.....?? mudah mudahan lancar,,, pada
kesempatan kali ini saya akan coba membuat tutorial sederhana,, ya lumayanlah buat bahan update blog jelek ku ini,,, nah kebetulan saya selesai
ngerjain tugas besar mata kuliah PHP ,, nah kali ini saya akan coba menjelaskan bagaimana proses insert data kedatabase MYSQL via ajax.
Mungkin rekan rekan yang sudah biasa main main dengan PHP udah familiar dengan ajax,, menurutku ajax ini sangat efesien dan sangat dinamis
dalam pembuatan sebuah sistem informasi khususnya yang berbasis web. dengan ajax kita bisa membuat sistem loading,, bisa mengirim data
kedatabase tanpa load halaman HTML,, pokoknya keren banget menurutku... OK lansung saja gan...
Nah pertama tama siapkan dulu databasenya buat sebuah database kali ini saya beri nama database Pln dan didalamnya buat sebuah tabel
dengan eld seperti berikut :
1. id
2. nama
3. username
4. password
5. email
Selanjutnya buat le koneksi.php seperti berikut :
<?php
$host = "localhost";
$user = "root";
$name = "pln";
$pass ="";
$conn = mysql_connect($host,$user,$pass);
$pilihdatabase = mysql_select_db($name, $conn) or die ("GAGAL");
Home
Android Programming
Web Programming
Java Programming
Tutorial C++
Pemograman Windows Phone
Share Share 4 Like Like Share Share
?>
Selanjutnya buat le index.html ,, le ini berisi form tempat menginputkan data,, seperti berikut :
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Boomer" />
<title>Untitled 1</title>
<script src="/js/jquery.js"></script>
<script src="/js/user.js"></script>
</head>
<body>
<form action="#" method="get" class="form-horizontal">
<div class="control-group">
<label class="control-label">Nama :</label>
<div class="controls">
<input type="text" class="span11" placeholder="name" id="nama"/>
<div id="error"></div>
</div>
</div>

<label class="control-label">Username :</label>
<input type="text" class="span11" placeholder="Enter Username" id="username" />
</div>
</div>
<label class="control-label">Password</label>
<input type="password" class="span11" placeholder="Enter Password" id="password" />
</div>
</div>

<label class="control-label">Email :</label>
<input type="text" class="span11" placeholder="Email" id="email" />
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success" id="simpan">Save</button>
</div>
</form>
</body>
</html>
Selanjutnya buat folder js didalam folder js tersebut buat sebuah le js kemudian beri nama user.js kemudian ketikkan script seperti berikut :
$(function () {

$('#simpan').click(function (){
var nama = $('#nama').val();
var username = $('#username').val();
var password = $('#password').val();
var email = $('#email').val();
alert(nama);

if (nama == '')
{
$('#error').html("tolong diisi file yang kosong");
}
else
{
$.ajax({
type: "Get",
url: "proses.php",
data:"nama="+nama+"&username="+username+"&password="+password+"&email="+email,
success: function(data) {
alert("Request Berhasil Dikirim");
$("#nama").val("");
$("#username").val("");
$("#password").val("");
$("#email").val("");

},
error: function(jqXHR, status, error) {
alert("Request Anda Gagal Dikirim ");

}
});
}
return false;

});

});

Selanjutnya buat sebuah le lagi kemudian beri nama proses.php letakkan le ini sejajar dengan lokasi le index kemudian ketikkan script
insertnya seperti berikut :
<?php
include "koneksi.php";
$nama = htmlspecialchars($_GET['nama']);
$username = htmlspecialchars($_GET['username']);
$password = htmlspecialchars($_GET['password']);
$email = htmlspecialchars($_GET['email']);
$query = mysql_query("insert into user (nama,username,password,email) values ('$nama','$username','$password','$email')");
if ($query)
{
echo "sukses";

}
else
{
echo "gagal";
}
?>
nah sampai disini kita sudah berhasil menginputkan data ke database menggunakan ajax jquery,, gimana gampang bukan..?? mungkin bagi rekan
rekan yang belum terbiasa denga ajax dan jquery ini akan lebih membutuhkan waktu memahaminya,, tapi tenang aja lama lama juga pasti bisa,,
oh ya bagi rekan rekan yang masih ragu atau sedikit bingun silahkan download sample codenya disini
Ok mungkin sampai disini tutorial singkat dari saya selamat mencoba,,
""""""""" Keep Coding and Happy Today""""""""""""""
NNeewweerr nneewwss iitteemmss::
Apa itu Sencha XTJS - 21/02/2014 15:54
OOllddeerr nneewwss iitteemmss::
Tutorial Membuat sistem Informasi Sekolah Sederhana dengan CI (Codeighneiter)) - 10/07/2013 05:24
Tutorial Membuat Web Blog dengan Framework Yii - 27/03/2013 09:07
Sejarah Jquery - 18/03/2013 03:16
Apa itu JQUERY - 18/03/2013 03:04
Tutorial Insert, Update, Delete dan Menampilkan data dengan codeigniter (CI) - 09/03/2013 02:09
< Prev
Next >
2 Comments 2 Comments
Login to Facebook to Post a Comment Login to Facebook to Post a Comment
Dede Irvan S
Sipp.. mantap min. tx contoh nya.
May 2
2 people

144 Tutorial Input Data Ke Database Dengan Ajax Jquery Dan PHP

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

144 Tutorial Input Data Ke Database Dengan Ajax Jquery Dan PHP

Diunggah oleh

Hak Cipta:

Format Tersedia

Tweet Tweet 0 0

Anda mungkin juga menyukai