Nah masuk ke client side juga ahirnya , saya coba ngasih pencerahan sedikit buat combine PHP dengan jQuery biar lebih interaktif dan indah pastinya , dan lebih efisien dalam masalah pengaksesan ,
Balik
ke pengertian awal , PHP merupkan bahasa yang digunakan atau di akses
langsung ke server maka dari itu PHP disebut dengan pemrograman Server
side , nah lalu apa JQuery ?
JQuery merupakan
library/perpustkaan javascript , dimana sudah terdapat fungsi-fungsi
yang bisa langsung kita gunakan pada JQuery tersebut , ke pengertian
awal javascript , javascript merupakan bahasa pemrograman yang berjalan
dibrowser atau disebut dengan client site
ya langsung
aja ke kasus , bagaimana sih insert data tanpa harus pindah halaman ,
dengan JQuery ini kita dibantu untuk mengakses file PHP tanpa terlihat
melalui browser .
langkah pertama download dulu plugin JQuerynya di http://www.4shared.com/document/a7xL0t1l/Plugin.html
setelah
itu buat sebuah database , dan sebuah table . disini saya menggunakan
database dan table yang pernah saya buat di artikel sebelumnya bisa di
lihat di http://arsencycle.blogspot.com/2013/01/menggunakan-header-untuk-membuat-report.html
buat file index.html , file ini berisikan form dan view database , bericut codenya
<html>
<head>
<title>Ajax</title>
<script type="text/javascript" src="Plugin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function view(){
$.ajax({
url : "view.php",
success: function(data){
$("#view").html(data);
}
});
}
view();
$("#x").click(function(){
var nis = $("#nis").val();
var nama = $("#nama").val();
$("#message").fadeIn(3000).html("Insert berhasil").delay(1000).fadeOut();
$.ajax({
type : "POST",
url : "simpan.php",
data : "nis="+nis+"&nama="+nama,
success : function(data){
view();
}
});
});
//kurung buat $(document).ready yang paling atas
});
</script>
</head>
<body>
<div id="message"></div>
<div id="content">
<input type="text" id="nis" placeholder="masukan nis">
<input type="text" id="nama" placeholder="masukan nama">
<input type="submit" id="x" value="simpan">
</div>
<div id="view"></div>
</body>
</html>
penjelasan :
1. <script type="text/javascript" src="Plugin.js"></script>
script diatas berfungsi untuk memanggil file Plugin.js
2.$(document).ready(function(){});
code diatas berfungsi untuk memulai JQuery
3.function view() fungsi
ini berfungsi untuk mengambil file view.php , file ini akan dijalan
ketika nama fungsi nya din panggil seperti pada contoh diatas view();
4.$("#x").click(function(){})
code diatas berfungsi ketika tombol di click maka event akan dijalankan
langkah selanjutnya buat file simpan.php untuk proses insertnya , berikut code nya
<?php
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$nis = $_POST['nis'];
$nama = $_POST['nama'];
$sql = "insert into siswa (nis,nama) values ('$nis','$nama')";
$query= mysql_query($sql);
?>
selanjutnya buat file view.php untuk menampilkan data yang tersimpan di database
<?php
mysql_connect('localhost','root','');
mysql_select_db('latihan');
$sql = "select * from siswa";
$query= mysql_query($sql);
?>
<table border=1>
<tr>
<th>NIS</th>
<th>Nama</th>
</tr>
<?php
while($array=mysql_fetch_array($query)){
?>
<tr>
<td><?php echo $array[0];?></td>
<td><?php echo $array[1];?></td>
</tr>
<?
}
?>
</table>
selamat mencoba dan selamat menikmati indahnya JQuery dan Ajax :D
$("#message").fadeIn(3000).html("Insert berhasil").delay(1000).fadeOut();
ReplyDeleteperintah apa bang???
fungsi fadeIn() buat munculin efek fadeIn kaya di ppt , fungsi html() buat ngerubah content sesuai dengan apa yang kita ingin , delay() buat menunda sampai kapan efek tersebut muncul dan fadeOut untuk menutup atau menghilangkan efek tersebut
ReplyDelete