Cara Membuat Project Baru Pada Intel XDK

Membuat project baru pada intel xdk dibutuhkan koneksi internet untuk mendownload file library yang dibutuhkan dari internet baik cordova, phonegap, ionic, angular dan lain-lain. Membuat project baru pada intel xdk sangat mudah dan akan kita bahas dibawah ini, setelah pembuatan project selanjunnya cuma drag-drop komponen atau item kedalam desain area beserta dengan pengaturan disamping kanan yang umumnya terdiri dari pengaturan icon, link href (id page tujuan: #id_page), dan style.

Untuk membuat project baru, pastikan bahwa anda telah menginstall intel xdk, jika belum silahkan baca di Cara Install Intel XDK Pada PC (Windows) dan setelah itu ikuti langkah-langkah dibawah ini.

1. Jalankan intel xdk kemudian akan muncul splash seperti gambar dibawah ini.

buka intel xdk

2. Kemudian pilih Layout and User Interface, pilih List View App (atau terserah Anda), Conteng Use App Designer dan klik Continue

buat project baru pada intel xdk

3. Beri nama project Anda dengan nama apa saja dan tempat simpan project Anda diatas kemudian klik Create untuk membuat dan mengunduh file library dari internet.

beri nama project baru pada intel xdk

4. Akan masuk Desain yang terdiri dari Page (membuat halaman), Control (drag-drop komponen), Properties (pengaturan link, icon, judul, id), Style (untuk pengayaan) dan Code disamping kiri pojok atas atau edit html juga sama untuk code base atau edit kode.

disain layout aplikasi pada intel xdk

5. Menjalankan Aplikasi kita ke Emulator

emulator intel xdk

6. Menciptakan Apk atau aplikasi yang dapat berjalan pada Android, selain Android, Anda juga bisa membuat aplikasi IOS atau Window Phone.

build app android pada intel xdk

Selesai, terima kasih telah berkunjung, kalau ada pertanyaan silahkan komentar dibawah ini.

Cara Membuat Tabel dan Form Dengan jQuery Mobile

Seperti pada tutorial yang lalu yang membahas dasar beserta dengan pembuatan toolbar, list menu sidebar panel, dan listview beserta dengan search form dan button juga disertai dengan page, kali ini kita juga akan membuat page, toolbar, button dengan ditambah dengan table dan form, untuk membuat project ini silahkan ikuti langkah-langkah dibawah ini.

Perlu anda perhatikan bahwa dalam pembuatan project ini adalah bisa kembangkan hasil project dengan mengabungkan dengan bahasa pemrograman yang berbasis aksi atau manajemen data seperti php, javascript dan framework keduanya.

1. Pastikan anda telah membaca artikel sebelumnya – Cara Membuat Web Mobile Menggunakan jQuery Mobile

2. Buatlah file baru dengan nama apa saja, pada tutorial ini menggunakan index.html dan copy pastekan kode dibawah ini kedalam file tersebut.

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <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.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

 <!-- Tempat page yang ber-id home, tambah dan lihat -->
 
</body>
</html>

3. Tempelkan kode dibawah ini kedalam tag <body> sebelum </body> untuk membuat page pertama yang berisi dengan tabel dan button icon toolbar yang mengarah ke page lainnya.

jQuery Mobile CRUD Table

<!-- Start of first page -->
 <div data-role="page" id="home">

  <div data-role="header" data-position="fixed">
   <h1>My App</h1>
   <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-right">
    <a href="#tambah" data-transition="pop" class="ui-btn ui-btn-icon-right ui-icon-plus">Tambah</a>
    <a href="#lihat" data-transition="slide" class="ui-btn ui-btn-icon-right ui-icon-check">Lihat</a>
    <a href="#" class="ui-btn ui-btn-icon-right ui-icon-delete">Keluar</a>
   </div>
  </div><!-- /header -->

  <div role="main" class="ui-content">
  
   <table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
    <thead>
      <tr class="ui-bar-d">
     <th data-priority="2">Rank</th>
     <th>Movie Title</th>
     <th data-priority="3">Year</th>
     <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
     <th data-priority="5">Reviews</th>
      </tr>
    </thead>
    <tbody>
      <tr>
     <th>1</th>
     <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
     <td>1941</td>
     <td>100%</td>
     <td>74</td>
      </tr>
      <tr>
     <th>2</th>
     <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
     <td>1942</td>
     <td>97%</td>
     <td>64</td>
      </tr>
      <tr>
     <th>3</th>
     <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
     <td>1972</td>
     <td>97%</td>
     <td>87</td>
      </tr>
      <tr>
     <th>4</th>
     <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
     <td>1939</td>
     <td>96%</td>
     <td>87</td>
      </tr>
      <tr>
     <th>5</th>
     <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
     <td>1962</td>
     <td>94%</td>
     <td>87</td>
      </tr>
      <tr>
     <th>6</th>
     <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
     <td>1964</td>
     <td>92%</td>
     <td>74</td>
      </tr>
      <tr>
     <th>7</th>
     <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
     <td>1967</td>
     <td>91%</td>
     <td>122</td>
      </tr>
      <tr>
     <th>8</th>
     <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
     <td>1939</td>
     <td>90%</td>
     <td>72</td>
      </tr>
      <tr>
     <th>9</th>
     <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
     <td>1952</td>
     <td>89%</td>
     <td>85</td>
      </tr>
      <tr>
     <th>10</th>
     <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
     <td>2010</td>
     <td>84%</td>
     <td>78</td>
      </tr>
    </tbody>
     </table>
   
  </div><!-- /content -->

  <div data-role="footer" data-position="fixed">
   <h2>Footer</h2>
  </div><!-- /footer -->
  
 </div><!-- /page -->

4. Tempelkan kode page yang ber-id tambah dibawah page pertama (id: home) yang berguna untuk membuat form area yang berguna menyimpan atau mengedit data.

jQuery Mobile CRUD Form

<!-- Start of second page -->
 <div data-role="page" id="tambah">

  <div data-role="header">
   <a href="#home" data-transition="fade" class="ui-btn ui-shadow ui-corner-all ui-icon-back ui-btn-icon-notext">Back</a>
   <h1>Tambah</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   
   <div class="ui-body ui-body-a ui-corner-all">
    <h3>Form Area (Tambah)</h3>
    <p>
     <form method="post">
      <p>
       <label for="text-basic">Text input:</label>
       <input name="text-basic" id="text-basic" value="" type="text">
      </p>
      <p>
       <label for="textarea">Textarea:</label>
       <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
      </p>
      <p>
       <label for="select-choice-a" class="select">Custom select menu:</label>
       <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
        <option>Custom menu example</option>
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
       </select>
      </p>
      <fieldset data-role="controlgroup">
       <legend>Radio buttons, vertical controlgroup:</legend>
        <input name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" type="radio">
        <label for="radio-choice-1">Cat</label>
        <input name="radio-choice-1" id="radio-choice-2" value="choice-2" type="radio">
        <label for="radio-choice-2">Dog</label>
        <input name="radio-choice-1" id="radio-choice-3" value="choice-3" type="radio">
        <label for="radio-choice-3">Hamster</label>
        <input name="radio-choice-1" id="radio-choice-4" value="choice-4" type="radio">
        <label for="radio-choice-4">Lizard</label>
      </fieldset>
      <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b">Submit</button>
     </form>
    </p>
   </div>
   
  </div><!-- /content -->
  
 </div><!-- /page -->

5. Tempelkan kode page yang ber-id lihat dibawah page yang ber-id tambah yang berguna untuk menampilkan data-data tabel dalam bentuk lainnya.

jQuery Mobile CRUD Lihat

<!-- Start of third page -->
 <div data-role="page" id="lihat">

  <div data-role="header">
   <a href="#home" data-transition="fade" class="ui-btn ui-shadow ui-corner-all ui-icon-back ui-btn-icon-notext">Back</a>
   <h1>Lihat</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   
   <table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive">
     <thead>
    <tr>
      <th data-priority="1">Rank</th>
      <th data-priority="persist">Movie Title</th>
      <th data-priority="2">Year</th>
      <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th data-priority="4">Reviews</th>
    </tr>
     </thead>
     <tbody>
    <tr>
      <th>1</th>
      <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>2</th>
      <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
      <td>1942</td>
      <td>97%</td>
      <td>64</td>
    </tr>
    <tr>
      <th>3</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
      <td>1972</td>
      <td>97%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>4</th>
      <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
      <td>1939</td>
      <td>96%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>5</th>
      <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
      <td>1962</td>
      <td>94%</td>
      <td>87</td>
    </tr>
    <tr>
      <th>6</th>
      <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
      <td>1964</td>
      <td>92%</td>
      <td>74</td>
    </tr>
    <tr>
      <th>7</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
      <td>1967</td>
      <td>91%</td>
      <td>122</td>
    </tr>
    <tr>
      <th>8</th>
      <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
      <td>1939</td>
      <td>90%</td>
      <td>72</td>
    </tr>
    <tr>
      <th>9</th>
      <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
      <td>1952</td>
      <td>89%</td>
      <td>85</td>
    </tr>
    <tr>
      <th>10</th>
      <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
      <td>2010</td>
      <td>84%</td>
      <td>78</td>
    </tr>
     </tbody>
   </table>
   
  </div><!-- /content -->
  
 </div><!-- /page -->

 

Cara Membuat Web Mobile Menggunakan jQuery Mobile

Apa itu jQuery Mobile ? jQuery Mobile adalah sebuah framework yang dibangun untuk membuat sebuah web (HTML5, CSS3 dan JavaScript) berjalan dan digunakan untuk perangkat mobile seperti smartphone ataupun tablet, jQuery Mobile dibuat oleh jQuery foundation yang bertujuan untuk memudahkan para developer web dalam membuat aplikasi mobile seperti Android, IOS, Windows Phone, Ubuntu Phone, Blackberry, dan Webos.

Menggunakan jQuery Mobile dalam hal disain lebih mudah dan lebih singkat penulisan kode dibandingkan dengan mendisain lewat sebuah activity yang mengharuskan kita menulis banyak kode, file dan variabel. Apa saja yang dibutuhkan dalam membuat aplikasi mobile menggunakan jQuery Mobile ini ? Anda cukup download jQuery Mobile disini kemudian ekstrak dan gunakan atau copy paste file yang berektensi .css, .js dan juga sertakan folder images kedalam sebuah folder baru, selanjutnya buatkan file index.html atau bisa ikuti langkah-langkah dibawah ini dan juga bisa akses dokumentasi dan demo jQuery Mobile.

1. Download jQuery Mobile, ekstrak file download dimana saja kemudian copy pastekan file .css, .js dan folder images kedalam sebuah folder baru untuk project kita, jangan lupa juga copy paste juga jquery.js, selanjutnya buatkan file index.html dan isikan kode dasar dari jquery mobile.

File jQuery Mobile

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
 <script src="jquery.min.js"></script>
 <script src="jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
 ...content goes here...
</body>
</html>

2. Jika anda malas melakukan download anda bisa menggunakan cdn seperti jQuery CDN, cdnjs, Google CDN, Microsoft CDN, MaxCDN atau lainnya, untuk pemanggilan css dan js seperti kode dibawah ini cukup edit atau sesuaikan dengan kode yang diatas.

<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.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

3. Pembuatan page yang berguna untuk membuat halaman yang akan dieksekusi pada saat dijalankan yaitu halaman pertama kemudian jika diklik id halaman kedua maka akan muncul halaman dua yang dibuat dalam satu file saja yaitu index.html, cara pembuatannya yaitu gantikan …content goes here… yang ada pada kode diatas

<body>

 <!-- Start of first page -->
 <div data-role="page" id="foo">

  <div data-role="header">
   <h1>Foo</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   <p>I'm first in the source order so I'm shown as the page.</p>
   <p>View internal page called <a href="#bar">bar</a></p>
  </div><!-- /content -->

  <div data-role="footer">
   <h4>Page Footer</h4>
  </div><!-- /footer -->
 </div><!-- /page -->

 <!-- Start of second page -->
 <div data-role="page" id="bar">

  <div data-role="header">
   <h1>Bar</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
   <p><a href="#foo">Back to foo</a></p>
  </div><!-- /content -->

  <div data-role="footer">
   <h4>Page Footer</h4>
  </div><!-- /footer -->
 </div><!-- /page -->

</body>

4. Pembuatan header dan footer atau dengan istilah lainnya adalah pembuatan toolbar widget, jika anda buka dokumentasi atau demo dari jQuery Mobile anda bisa buka menu Toolbar Widget dan bisa lihat toolbar yang mana yang anda suka begitu juga dengan selainnya, toolbar yang dibuat dengan posisi fixed dan cara pembuatannya gandikan header diatas dengan header dibawah ini dan footer cukup tambahkan atribut seperti data-role=”footer” data-position=”fixed”, untuk toolbar kesukaan saya seperti dibawah ini.

jQuery Mobile Toolbar

<div data-role="header" data-position="fixed">
 <a href="#mypanel1" class="ui-btn-left ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
 <h1>My App</h1>
 <a href="#mypanel2" class="ui-btn-right ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all">No text</a>
</div><!-- /header -->
  
<div data-role="footer" data-position="fixed">
 <h2>Footer</h2>
</div><!-- /footer -->

5. Pembuatan panel yang berguna untuk membuat list menu saat diklik pada tombol kedua icon pada toolbar header, selain list menu panel juga sering diisi form atau text info, cara menggunakannya cukup copy paste kode di bawah header dan footer didalam page.

jQuery Mobile Panel

<body>

 <div data-role="page" id="foo">

  <div data-role="header" data-position="fixed">
   <a href="#mypanel1" class="ui-btn-left ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
   <h1>My App</h1>
   <a href="#mypanel2" class="ui-btn-right ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all">No text</a>
  </div><!-- /header -->

  <div role="main" class="ui-content"></div><!-- /content -->

  <div data-role="footer" data-position="fixed"></div><!-- /footer -->
  
  <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="mypanel1">
   
   <ul data-role="listview">
    <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
     <li><a href="#panel-fixed-page2">Accordion</a></li>
     <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
     <li><a href="#panel-fixed-page2">Autocomplete</a></li>
     <li><a href="#panel-fixed-page2">Buttons</a></li>
     <li><a href="#panel-fixed-page2">Checkboxes</a></li>
     <li><a href="#panel-fixed-page2">Collapsibles</a></li>
     <li><a href="#panel-fixed-page2">Controlgroup</a></li>
     <li><a href="#panel-fixed-page2">Dialogs</a></li>
     <li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
     <li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
     <li><a href="#panel-fixed-page2">Footer toolbar</a></li>
     <li><a href="#panel-fixed-page2">Form elements</a></li>
     <li><a href="#panel-fixed-page2">Grids</a></li>
     <li><a href="#panel-fixed-page2">Header toolbar</a></li>
     <li><a href="#panel-fixed-page2">Icons</a></li>
     <li><a href="#panel-fixed-page2">Links</a></li>
     <li><a href="#panel-fixed-page2">Listviews</a></li>
     <li><a href="#panel-fixed-page2">Loader overlay</a></li>
     <li><a href="#panel-fixed-page2">Navbar</a></li>
     <li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
     <li><a href="#panel-fixed-page2">Pages</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">Popup</a></li>
     <li><a href="#panel-fixed-page2">Radio buttons</a></li>
     <li><a href="#panel-fixed-page2">Select</a></li>
     <li><a href="#panel-fixed-page2">Slider, single</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
     <li><a href="#panel-fixed-page2">Transitions</a></li>
   </ul>

  </div><!-- /panel -->
  
  <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="mypanel2">
   
   <form class="userform">

    <h2>Login</h2>

    <label for="name">Username:</label>
    <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

    <label for="password">Password:</label>
    <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

    <div class="ui-grid-a">
     <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
     <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
    </div>
   </form>

  </div><!-- /panel -->
  
 </div><!-- /page -->

</body>

6. Pembuatan listview kedalam layout area dari jQuery Mobile beserta dengan search form dan juga pembuatan button dibawahnya beserta dengan grid, cara pembuatannya cukup dengan copy paste kode didalam atau cocokkan kedalam role=”main” class=”ui-content” seperti dibawah ini.

jQuery Mobile Listview dan Grids

<div role="main" class="ui-content">
  
 <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Cherry</a></li>
  <li><a href="#">Cranberry</a></li>
  <li><a href="#">Grape</a></li>
  <li><a href="#">Orange</a></li>
 </ul>
   
 <div class="ui-grid-b">
  <div class="ui-block-a"><a href="#" class="ui-shadow ui-btn ui-corner-all">Anchor</a></div>
  <div class="ui-block-b"><div class="button-wrap"><button class="ui-shadow ui-btn ui-corner-all">Button</button></div></div>
  <div class="ui-block-c"><input value="Input" type="button"></div>
 </div>
   
 <div class="ui-grid-d center">
  <div class="ui-block-a"><a class="ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline">Button</a></div>
  <div class="ui-block-b"><a class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a></div>
  <div class="ui-block-c"><a class="ui-shadow ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext ui-btn-inline">Button</a></div>
  <div class="ui-block-d"><a class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-btn-inline">Button</a></div>
  <div class="ui-block-e"><a class="ui-shadow ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext ui-btn-inline">Button</a></div>
 </div>
   
</div><!-- /content -->

Cukup sekian tutorial kali ini kita akan lanjutkan pada artikel yang lainnya. Untuk kode yang penuh dalam pembuatan project jQuery Mobile dibawah ini

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <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.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

 <!-- Start of first page -->
 <div data-role="page" id="foo">

  <div data-role="header" data-position="fixed">
   <a href="#mypanel1" class="ui-btn-left ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">No text</a>
   <h1>My App</h1>
   <a href="#mypanel2" class="ui-btn-right ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all">No text</a>
  </div><!-- /header -->

  <div role="main" class="ui-content">
  
   <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
   </ul>
   
   <div class="ui-grid-b">
    <div class="ui-block-a"><a href="#" class="ui-shadow ui-btn ui-corner-all">Anchor</a></div>
    <div class="ui-block-b"><div class="button-wrap"><button class="ui-shadow ui-btn ui-corner-all">Button</button></div></div>
    <div class="ui-block-c"><input value="Input" type="button"></div>
   </div>
   
   <div class="ui-grid-d center">
    <div class="ui-block-a"><a class="ui-shadow ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-btn-inline">Button</a></div>
    <div class="ui-block-b"><a class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a></div>
    <div class="ui-block-c"><a class="ui-shadow ui-btn ui-corner-all ui-icon-grid ui-btn-icon-notext ui-btn-inline">Button</a></div>
    <div class="ui-block-d"><a class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-notext ui-btn-inline">Button</a></div>
    <div class="ui-block-e"><a class="ui-shadow ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext ui-btn-inline">Button</a></div>
   </div>
   
  </div><!-- /content -->

  <div data-role="footer" data-position="fixed">
   <h2>Footer</h2>
  </div><!-- /footer -->
  
  <div data-role="panel" data-position-fixed="true" data-display="push" data-theme="b" id="mypanel1">
   
   <ul data-role="listview">
    <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
     <li><a href="#panel-fixed-page2">Accordion</a></li>
     <li><a href="#panel-fixed-page2">Ajax Navigation</a></li>
     <li><a href="#panel-fixed-page2">Autocomplete</a></li>
     <li><a href="#panel-fixed-page2">Buttons</a></li>
     <li><a href="#panel-fixed-page2">Checkboxes</a></li>
     <li><a href="#panel-fixed-page2">Collapsibles</a></li>
     <li><a href="#panel-fixed-page2">Controlgroup</a></li>
     <li><a href="#panel-fixed-page2">Dialogs</a></li>
     <li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
     <li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
     <li><a href="#panel-fixed-page2">Footer toolbar</a></li>
     <li><a href="#panel-fixed-page2">Form elements</a></li>
     <li><a href="#panel-fixed-page2">Grids</a></li>
     <li><a href="#panel-fixed-page2">Header toolbar</a></li>
     <li><a href="#panel-fixed-page2">Icons</a></li>
     <li><a href="#panel-fixed-page2">Links</a></li>
     <li><a href="#panel-fixed-page2">Listviews</a></li>
     <li><a href="#panel-fixed-page2">Loader overlay</a></li>
     <li><a href="#panel-fixed-page2">Navbar</a></li>
     <li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
     <li><a href="#panel-fixed-page2">Pages</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">Popup</a></li>
     <li><a href="#panel-fixed-page2">Radio buttons</a></li>
     <li><a href="#panel-fixed-page2">Select</a></li>
     <li><a href="#panel-fixed-page2">Slider, single</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">New</a></li>
     <li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
     <li><a href="#panel-fixed-page2">Transitions</a></li>
   </ul>

  </div><!-- /panel -->
  
  <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="mypanel2">
   
   <form class="userform">

    <h2>Login</h2>

    <label for="name">Username:</label>
    <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

    <label for="password">Password:</label>
    <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

    <div class="ui-grid-a">
     <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
     <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
    </div>
   </form>

  </div><!-- /panel -->
  
 </div><!-- /page -->

 <!-- Start of second page -->
 <div data-role="page" id="bar">

  <div data-role="header">
   <h1>Bar</h1>
  </div><!-- /header -->

  <div role="main" class="ui-content">
   <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
   <p><a href="#foo">Back to foo</a></p>
  </div><!-- /content -->

  <div data-role="footer">
   <h4>Page Footer</h4>
  </div><!-- /footer -->
 </div><!-- /page -->

</body>
</html>

Cara Install Intel XDK Pada PC (Windows)

Intel XDK adalah sebuah IDE yang dapat berjalan lintas platform yang mendukung Windows, Linux dan Mac OS X, kegunaan ide ini adalah untuk membuat aplikasi mobile baik Android, IOS, Windows Phone, Blackberry, dan lain-lain dalam satu perangkat pc, kelebihan dari Intel XDK adalah mendukung IOS karena Apple tidak memberikan Xcode untuk perangkat selain Mac OS X, jadi inilah kelebihan dari Intel XDK karena bisa membuat aplikasi IOS walaupun menggunakan perangkat Windows atau Linux.

Intel XDK menggunakan building aplikasi menggunakan sistem cload/awannya sendiri jadi saat anda ingin mempublikasi atau mencetak apk maka anda perlu koneksi internet beserta dengan login member pada saat ingin melakukan build app. Menginstall Intel XDK tidak terlalu ribet seperti harus ini harus itu dengan Intel XDK cuma install langsung pakai, untuk cara instalasinya seperti langkah-laangkah dibawah ini.

1. Download intalasinya di https://software.intel.com/en-us/intel-xdk

cara download intel xdk

2. Tunggu proses download mencapai 100%

tunggu proses download intel xdk

3. Simpan dan jalankan intalasi yang telah didownload

jalankan setup download intel xdk

4. Tunggu splash screen baru muncul

muncul splash screen intel xdk

5. Klik next untuk pembukaan pemasangannya

pemasangan intel xdk

6. Browse.. atau pilih lokasi tempat untuk install Intel XDK-nya dan klik next

penyimpanan data intel xdk

7. Klik next saja biar lanjut

penjelasan lisensi

8. Muncul penjelasan maka klik install untuk memasang Intel XDK kedalam sistem

konfirmasi penyimpanan intel xdk dan install

9. Tunggu proses intalasinya

8-proses-instalasi-intel-xdk

10. Conteng yang pertama dan klik finish

11. Jika muncul gambar dibawah ini maka lihat setelan pada nomor 12, (muncul ini karena kita menggunakan proxy khusus buka proxy otomatis)

konfigurasi proxy server komputer kita

12. Buka Control Panel > pilih Intenet Options > buka tab Connections > klik tombol LAN Settings, conteng Automatically detect settings dan klik ok.

cara setting proxy server pada laptop atau kamputer kita

13. Conteng Public network …. dan klik tombol Allow access

12-allow-akses

14. Buat akun Intel XDK anda (Akun berguna untuk membuka system cloud xdk dan membuat apk aplikasi kita)

daftar akun intel xdk

15. Login kedalam aplikasi menggunakan akun xdk untuk memudahkan pembuatan dan juga akun anda akan login otomatis walaupun anda sedang offline.

login akun intel xdk

16. Selesai, ini adalah gambar Intel XDK saat dibuka.

project dari intel xdk