Skip to main content
Framework jquery Mobile

Belajar Pemula Dasar jquery mobile

Pendahuluan jquery mobile

Pembahasan kali ini akan kita bahas tentang dasar belajar pembuatan aplikasi mobile menggunakan jquery mobile untuk pemula. Seperti saya katakan sebelumnya, jquery mobile ini cocok bagi pemula yang mencoba membuat aplikasi mobile. Belajar mengenal dasar jquery mobile juga sangat bagus sebelum kita belajar ketahapan yang tinggi. Pembahasan ini dikhususkan bagi pemula .Mengapa web app

Perkembangan meningkatnya teknologi informasi dan kemampuan smartphone dari sisi prosesor dan memory untuk penggunaan browser mobile. Tentunya ada kelebihan dan kekurangan antara aplikasi Web Mobile dengan Native.

Dan menjadi pilihan tersendiri nya bagi seorang Developer dalam memilih jenis aplikasi yang mau dikembangkan.

Pengenalan jquery mobile

jquery mobile adalah sebuah framework, dibuat berbasis jquery yang dikhususkan untuk pembuatan aplikasi di platform mobile. Dengan jquery mobile kita mampu membuat aplikai web dengan kemampuan Touch Screen. kenapa harus jquery mobile, salah satu hal utama yaitu mudah, banyak contoh dan forum yang membahas tentang framework ini.

User Interface jquery mobile

jquery mobile sangat bagus dari sisi tampilan, banyak komponen yang bisa digunakan untuk kebutuhan tampilan. Button, listview, header dan form serta navigasi atau kita sebut juga UI Widget.

Untuk lebih detailnya, silahkan kunjungi web resmi nya : Link

Instalasi jquery mobile

Hal pertama yang kita lakukan adalah mendownload file jquert mobile di : Download pilih saja versi terbaru nya, lihat gambar :

jquery mobile pemula
Download jquery mobile

Selanjutnya file hasil download, lakukan ekstrak bisa dimana saja, sebagai contoh saya akan ekstrak di C:/belajarjquerymobile. dalam file yang kita download terdapat banyak sekali contoh script yang bisa kita pelajari dengan mudah.

Aplikasi pertama jquery mobile

Untuk dasar akan coba kita buat sebuah aplikasi pembuka yaitu aplikasi hello world, langsung saja kita praktekkan. Buatkan sebuah folder baru beri nama : App_1. Kemudian dalam folder App_1 buatkan sebuah folder untuk menyimpan file jquery mobile, disini saya namakan : asset dan Pastekan file jquery mobile yang tadi kita download.

Selanjutnya, kita mulai pengetikan codingnya, dalam hal ini saya menggunakan IDE Notepad++, kalau mau pakai editor lain, bisa saja.

Note : Untuk penjelasan source code baca saja bagian komentar nya

Simpan file dengan nama : index.html

<html>
<head>
<!-- Judul Sebuah Halaman web -->
<title>Dasar jquery Mobile</title>
<meta charset="utf-8">
<!-- viewport Digunakan -> untuk zoom tampilan di browser smartphone kita.
X-UA-Compatible —> Untuk mengecek compabilitas perangkat yang digunakan. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Memanggil Script jQuery secara Offline -->
<link rel="stylesheet" href="asset/jquery.mobile-1.4.5.min.css" />
<script src="asset/jquery-1.11.1.min.js"></script>
<script src="asset/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- ISIKAN CODENYA -->

</body>
</html>

Script jquery mobile diatas adalah kerangka awal kita mendefiniskan pemanggilan jquery mobile. Kalau kita via browser, belum tampil apa alias BLANK.

kemudian kita tambahkan source code dibagian isinya (Content) :


<!-- Definisikan sebagai Halaman {page} -->

<div data-role="page">
<!-- Membuat Header -->

<header data-role="header">

<h1>Aplikasi Web Mobile Pertama</h1>

</header>

<!-- Bagian ISI (Konten web) -->

<div data-role="content">


HELLO DUNIA, ASSALMUALAIKUM 

</div>

<!-- Membuat Footer -->

<footer data-role="footer">

<h2>http://blogciqwan.com </h2>

</footer>

</div>

<!-- END -->

kemudian kita jalankan via browser, hasilnya :

jquery mobile pemula
jquery mobile pemula

Lengkap codenya :


<html>
<head>
<!-- Judul Sebuah Halaman web -->
<title>Dasar jquery Mobile</title>
<meta charset="utf-8">
<!-- viewport Digunakan -> untuk zoom tampilan di browser smartphone kita.
X-UA-Compatible —> Untuk mengecek compabilitas perangkat yang digunakan. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Memanggil Script jQuery secara Offline -->
<link rel="stylesheet" href="asset/jquery.mobile-1.4.5.min.css" />
<script src="asset/jquery-1.11.1.min.js"></script>
<script src="asset/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Definisikan sebagai Halaman {page} -->

<div data-role="page">
<!-- Membuat Header -->

<header data-role="header">

<h1>Aplikasi Web Mobile Pertama</h1>

</header>

<!-- Bagian ISI (Konten web) -->

<div data-role="content">


HELLO DUNIA, ASSALMUALAIKUM 

</div>

<!-- Membuat Footer -->

<footer data-role="footer">

<h2>http://blogciqwan.com </h2>

</footer>

</div>

<!-- END -->

</body>
</html>

Note :

File css dan js  jQueryMobile sendiri sebenarnya tidak perlu di-download karena dapat digunakan melalui CDN (Content  Delivery Network).  Artinya, kalau kita terhubung koneksi internet, pemanggilan script JS dan CSS bisa secara langsung, yaitu:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

tinggal ganti dipemanggilan file nya saja.

Jika bingung ,tonton video berikut:

 

Kesimpulan belajar dasar jquery mobile bagi pemula

  • framework jquery mobile cocok bagi pemula untuk membangun aplikasi mobile
  • jquery mobile gratis versi terbarunya : 1.4.5
  • pemanggilan JS dan CSS bisa dilakukan secara Offline dan Online yaitu via CDN
  • Jika menjalankan via browser Google Chrome tidak tampil or blank coba jalankan via firefox (Pastikan versi terbaru)

Salam developer

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com