Tutorial Implementasi Jquery Mobile dan JSP. 1. Definisi Jquery Mobile

Tutorial Implementasi Jquery Mobile dan JSP

Tutorial Implementasi Jquery Mobile dan JSP 1. Definisi Jquery Mobile

Jquery mobile : framework tampilan berbasis HTML 5, sehingga situs responsive baik di desktop, tablet atau smarphone. 2. Download Jquery Mobile

Download dari web resminya : http://www.jquerymobile.com

Klik latest stable, download versi 1.4.5 – extract file zip yang didownload, maka akan mendapatkan full code Jquery js,css dan demos sample.

Dosen : Dimas Prasetyo Tegar Asmoro, M.Kom. STMIK Swadharma

1

Tutorial Implementasi Jquery Mobile dan JSP

3. Buka Project JSP pada perkuliahan sebelumnya di dalam netbeans anda, copy paste beberapa file/folder di jquery mobile berikut ke project anda : a. Folder demos/_assets, copy semua folder _assets ke project Netbeans b. Folder demos/js , buat folder dengan nama js di project netbeans, kemudian copy 2 file : jquery.min.js dan jquery.mobile-1.4.5.min.js c. Folder demos/css/themes, copy folder themes ke dalam project netbeans.

Dosen : Dimas Prasetyo Tegar Asmoro, M.Kom. STMIK Swadharma

2

Tutorial Implementasi Jquery Mobile dan JSP

4. Saat nya mengedit code index.jsp, pertama yang perlu di perhatikan adalah mengimport library js ke dalam index.jsp dengan lokasi yang benar. Diantara masukan script berikut : <script src="js/jquery.min.js"> <script src="_assets/js/index.js">

<script src="js/jquery.mobile-1.4.5.min.js">

5. Menambahkan library datepicker apabila suatu saat form anda ingin menggunakan jquery datepicker ( pilihan inputan tanggal ) :

Dosen : Dimas Prasetyo Tegar Asmoro, M.Kom. STMIK Swadharma

3

Tutorial Implementasi Jquery Mobile dan JSP

<script src="http://cdn.rawgit.com/jquery/jqueryui/1.10.4/ui/jquery.ui.datepicker.js"> <script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobiledatepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"> 6. Menambahkan library css : 7. Sehingga kurang lebih seperti ini :

8. Setelah itu, modifikasi bentuk form agar sesuai dengan jquery mobile, kita tidak perlu lagi menggunakan table,tr dan td . tetapi untuk menuliskan text nya kita perlu menggunakan tag dengan aturan < label for=”id objectnya”> Tetapi khusus inputan type text dan yang berbentuk textbox kita cukup bermain di atribut placeholder. Kurang lebih menjadi seperti ini : 9. Untuk radio kita perlu memberikan group dan legend, menjadi seperti ini :

Jenis Kelamin

Laki-Laki Perempuan

Dosen : Dimas Prasetyo Tegar Asmoro, M.Kom. STMIK Swadharma

4

Tutorial Implementasi Jquery Mobile dan JSP

10. Untuk lebih rapi, form di dalam div dengan class ui-corner-all dan custom-corner, header didalam div ui-bar dan ui-bar-a, untuk benda form di dalam div ui-body dan ui-body-a. susunan code seperti berikut :

11. Test running,Tampilan sementara akan seperti ini :

12. Jangan lupa, form edit dibuat dengan susunan yang sama, buang format dengan table,tr dan td. Code jadi seperti berikut :

13. Test running, klik button edit, tampilan seperti berikut :

Dosen : Dimas Prasetyo Tegar Asmoro, M.Kom. STMIK Swadharma

5

Tutorial Implementasi Jquery Mobile dan JSP

14. Untuk table data tambahkan data-role=”table” dan class=”ui-responsive table-stroke” id="table-data" data-mode="columntoggle" :

15. Untuk tombol edit dan delete tambahkan attribute data-inline=”true”

16. Tampilan menjadi :

Dosen : Dimas Prasetyo Tegar Asmoro, M.Kom. STMIK Swadharma

6

Tutorial Implementasi Jquery Mobile dan JSP

17. Jika ingin menggunakan inputan tanggal, cukup tambahkan data-role=date di input an text. Code index.jsp yang sudah jadi bisa anda download terpisah di postingan blog http://dimasboim.wordpress.com

Dosen : Dimas Prasetyo Tegar Asmoro, M.Kom. STMIK Swadharma

7