Tutorial jQuery Mobile Sederhana dengan json dan ajax


jquery-mobile-logoLangsung saja ke TKP, sebelumnya yang belum punya perlengkapan tempurnya dan menegetahui apa itu jQuery Mobile intip situs resminya jQuery Mobile. Disini saya menggunaka adobe Dreamweaver cs4.Monggo disimak njeeh ??.

1. Buat database dengan nama ” uir “, nama tabel ” tbl_mahasiswa “.

db

selanjutnya insert database secara manual

2. Copas script code dibawah ini, dan save dengan nama file index.html

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile | duniagama.wordpress.com</title>
<link rel=”stylesheet” href=”jquery/jquery.mobile-1.3.1.min.css” />
<script src=”jquery/jquery-1.9.1.min.js”></script>
<script src=”jquery/jquery.mobile-1.3.1.min.js”></script>
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#cek”).click(function(){
// Post string
var post_npm = $.trim($(“#npm”).val());
$.ajax({
type: “GET”,
data: ({npm: post_npm}),
dataType: “json”,
cache: false,
url: “json_data.php”,
timeout: 2000,
error: function() {
alert(“Failed to submit”);
},
success: function(data) {
$.each(data, function(i, j){
var row = “Nama : “+j.nama+”<br> JenKel : “+j.jenkel+”<br> Kelas : “+j.kelas+”<br> eMail : “+j.email;
$(“#tampil”).html(row);
});
}
});
});
});
</script>
</head>
<body>
<div data-role=”page” id=”indexPage”>
<div data-role=”header”>
<h1>JQuery Mobile + AJAX + JSON</h1>
</div>
<div data-role=”content”>
<div data-role=”fieldcontain”>
<label for=”np”>NPM :</label>
<input type=”text” id=”npm” name=”npm” value=”” />
</div>
<input id=”cek” name=”cek” type=”button” value=”Cek Mahasiswa” />
<div id=”tampil”></div>
</div>
<div data-role=”footer”>
<h1>Latihan jQuery Mobile</h1>
</div>
</div>
</body>
</html>

3. copas script code dibawah ini, save dengan nama file config.php

<?php
// Sesuaikan nama database yang dibuat
$mysql_hostname = “localhost”;
$mysql_user = “root”;
$mysql_password = “”;
$mysql_database = “uir”;
$prefix = “”;
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die(“Could not connect database”);
mysql_select_db($mysql_database, $bd) or die(“Could not select database”);
?>

4. copas script code dibawah ini, save dengan nama file json_data.php

<?php
include(‘config.php’);
//$npm=$_GET[‘npm’];
$npm=$_GET[‘npm’];
$sql=mysql_query(“select * from tbl_mahasiswa where npm=’$npm’ limit 1”);
//echo ‘{“mahasiswa”: [‘;
echo ‘[‘;
while($row=mysql_fetch_array($sql))
{
$nama=$row[‘nama’];
$jenkel=$row[‘jenkel’];
$kelas=$row[‘kelas’];
$tahun_masuk=$row[‘tahun_masuk’];
$email=$row[’email’];
echo ‘
{
“nama”:”‘.$nama.'”,
“jenkel”:”‘.$jenkel.'”,
“kelas”:”‘.$kelas.'”,
“tahun_masuk”:”‘.$tahun_masuk.'”,
“email”:”‘.$email.'”
},’;
}
//echo ‘]}’;
echo ‘]’;
?>

5. Run, pastikan xampp anda telah aktif. Maka hasilnya seperti ini

haasil

Berikut ini file yang sudah jadi

1. Download

2. Extract file yang sudah didownload

3. copas folder pram di xampp>htdocs

4. pastikan database telah dibuat

Selamat mencoba πŸ™‚

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s