jQuery Mobile : Tutorials Part 1

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
:-)

Post a Comment