Jika anda sudah terbiasa dengan jQuery, tentunya anda tidak akan
terlalu sulit untuk memahami jQuery Mobile walaupun untuk pandangan
pertama sekalipun.
Apasih JQuery Mobile itu .
jQuery Mobile: Touch-Optimized Web Framework for Smartphones &
Tablets, jadi yang namanya framework secara umum berarti kita hanya
menggunakan atau tinggal memakai saja alias mengikuti teknik-teknik yang
sudah disediakannya dalam bentuk modul-modul. salah satu yg membuat
jQuery mobile ini cukup banyak digunakan karena dia sudah menggunakan
teknologi HTML5 khususnya untuk UI, sehingga secara otamitas tentunya
framework ini akan berjalan dengan normal di seluruh sistem operasi
mobile yang ada pada saat sekarang ini, walaupun dalam kenyataannya
framework web mobile lainnya juga sudah menggunakan teknologi HTML5
seperti sencha (
http://www.sencha.com/products/touch/) ataupun djojo (
http://dojotoolkit.org/) dan yang paling terbaru adalah JQTouch (
http://jqtouch.com/)
Silahkan di donwload versi terbarunya yg sudah versi final 1.0 di website resminya langsung
http://jquerymobile.com/
Setelah di donwload jadi gimana cara makainya,,, aduh… itu bukan
pertanyaan tentunya.. tinggal anda jalankan di platform yg anda gunakan,
baik itu android,iphone,ipad,bb,windows phone maupun tablet android,
tentunya sebelum bisa menjalankan anda memerlukan sdk untuk setiap
platform yang anda gunakan.
Dalam Tutorial kali ini akan kita coba lakukan costum fremework
JQuery untuk keperluan menampilkan data dari server, intinya kita akan
tetap menggunakan file js,css,dll dari Framework tersebut,
Langkah 1
Persiapkan Database dan Tabel yg akan kita gunakan, isi datanya sehingga
ada ntar yang di tampilkan di device client ( dalam hal ini akan di
praktekan di android, tentunya kalau mau jalankan di os lain tinggal
jalankan dari sdk nya).
buatlah database dan tabel seperti contoh berikut :
Langkah 2
Kita memerlukan file php sebagai service untuk menghubungkan kita dengan database
config.php
1
2
3
4
5
6
7
8
|
<?php
$dbhost = '127.0.0.1';
$dbuser = 'root';
$dbpass = '';
$dbname = 'directory';
?>
|
getemployee.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?php
include 'config.php';
$sql = "select e.id, e.firstName, e.lastName, e.managerId, e.title, e.department, e.city, e.officePhone, e.cellPhone, " .
"e.email, e.picture, m.firstName managerFirstName, m.lastName managerLastName, count(r.id) reportCount " .
"from employee e left join employee r on r.managerId = e.id left join employee m on e.managerId = m.id " .
"where e.id=:id group by e.lastName order by e.lastName, e.firstName";
try {
$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $dbh->prepare($sql);
$stmt->bindParam("id", $_GET[id]);
$stmt->execute();
$employee = $stmt->fetchObject();
$dbh = null;
echo '{"item":'. json_encode($employee) .'}';
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
?>
|
Langkah 3 : Buat layout/UI
index.html (bisa juga anda simpan dengan index.php sehingga arsitektur client servernya lebih jelas)
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
|
<!DOCTYPE HTML>
<html>
<head>
<title>Employee Directory</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div id="employeeListPage" data-role="page" >
<div data-role="header" data-position="fixed">
<h1>Employee Directory</h1>
</div>
<div data-role="content">
<ul id="employeeList" data-role="listview" data-filter="true"></ul>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="js/employeelist.js"></script>
<script src="js/employeedetails.js"></script>
<script src="js/reportlist.js"></script>
</body>
</html>
|
perhatikan file js di coding terakhir tersebut
(jquery.js,jquery.mobile adalah file js asli dari framework jQury
mobilenya, sedangkan file employeelist.js, employeedetails.js serta
reportlist.js adalah file yang kita buat sendiri untuk keperluan
aplikasinya kita dalam hal ini menampilkan data karyawan serta detailed
data karyawan tersebut.
begitu juga defenisi css kita
1
2
3
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
|
file jquery.mobile.css dan styles.css adalah file asli dari jQuery fremework tersebut.
Langkah 4 : File js
employeelist.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var employees;
$('#employeeListPage').bind('pageinit', function(event) {
getEmployeeList();
});
function getEmployeeList() {
$.getJSON(serviceURL + 'getemployees.php', function(data) {
$('#employeeList li').remove();
employees = data.items;
$.each(employees, function(index, employee) {
$('#employeeList').append('<li><a href="employeedetails.html?id=' + employee.id + '">' +
'<img src="pics/' + employee.picture + '"/>' +
'<h4>' + employee.firstName + ' ' + employee.lastName + '</h4>' +
'<p>' + employee.title + '</p>' +
'<span class="ui-li-count">' + employee.reportCount + '</span></a></li>');
});
$('#employeeList').listview('refresh');
});
}
|
Jalankan aplikasi di os mobile anda yang inginkan, baik itu akses
memalui browser maupun dijadikan native,, kalau dijadikan native
misalnya di android akan tampil seperti gambar berikut :
jika salah satu data di pilih akan muncul seperti berikut :
details employeelist nya akan nampil
Begitu cukup simple karena kita hanya menggunakan modul-modul yang telah digunakan…
full sourcecodenya
uxc.wilis
