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' ; ?> |
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() . '}}' ; } ?> |
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" > <h 1 >Employee Directory</h 1 > </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> |
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" /> |
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