Cara Membuat Tabel dan Form Dengan jQuery Mobile

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

 

Tags: , , ,