Selamat pagi, Sobat Sandio! Pernahkah Sobat menggunakan aplikasi berbasis web yang menyediakan menu interaktif? — Tentunya pernah. Namun, pernahkan Sobat mengamati bahwa ada kalanya sebuah menu dapat mengubah konten halaman tanpa menyebabkan browser memuat ulang (refresh) halaman. Misalkan Sobat berada pada sebuah halaman game online, sebut saja http://www.contoh.com/game-perang.html . Anggap saja Sobat klik pada menu Toko Persenjataan. Tampilan toko muncul dan Sobat dapat membeli barang-barang, namun alamat pada addressbar di browser masih tetap http://www.contoh.com/game-perang.html dan bahkan, browser tidak menunjukkan aktivitas memuat halaman seperti ketika membuka sebuah halaman pada umumnya. Berikut akan kami ulas cara membuat halaman sejenis itu.


Hal yang dibutuhkan dalam percobaan kali ini adalah:

  • JQuery libraries yang dapat diunduh » di sini «
  • Browser dengan Javascript enabled
  • Sebuah halaman html dengan beberapa menu

Saatnya beraksi…


Pertama, buat sebuah halaman, sebut saja main.html kemudian isi dengan tampilan menu interaktif. Misalnya:

<html>
<head>
<title>Belajar JQuery</title>
<style>
body{
 background:#FFFFFF;
 color:#000000;
}

a{text-decoration:none}

#wraper{
 margin:0 auto;
 width:350px;
 border:1px #000 solid;
}

#menu ul{
 list-style:none;
 padding:0;
 margin:0;
 height:40px;
}

#menu ul li{
 display:inline;
 line-height:40px;
 color:#FFFFFF;
 font-weight:600;
 background:#000099;
 padding:10px;
 cursor:pointer;
}

#menu ul li:hover{background:#006600}

#content{padding:15px;}
</style>

</head>

<body>

<div id="wraper">
 <div id="menu">
  <ul>
    <li class="home">Home</li>
    <li class="profil">Profil</li>
    <li class="inbox">Inbox</li>
  </ul>
 </div>
<!-- Setiap list item diberi class sesuai isi -->

 <div id="content">
   <div id="home">
    Halaman Depan<br>
 Apa yang akan Sobat tulis di sini?<br><br><br><br>
 Mungkin Sobat bisa menulis ucapan selamat datang.
   </div>
   <div id="profil">
    Profil Sobat<br><br>
 Apakah Sobat memiliki sesuatu yang ingin dibagi?<br><br><br>
 Atau mungkin sekedar biodata?
   </div>
   <div id="inbox">
    Tempat Menyimpan Pesan<br><br>
 Tentu Sobat sudah tak asing dengan istilah inbox<br><br>
 Sobat yang memiliki ponsel pasti paham artinya<br>
 Dan mungkin yang punya email... pasti paham.
   </div>
 </div>
<!-- Setiap element <div> pada content diberi id sesuai pada menu -->
</div>

</body>
</html>

Setelah itu, compile JQuery libraries dengan cara meletakkan sintaks berikut pada halaman Sobat (sebaiknya di dalam tag <head></head>)

<script src="nama_file"></script>
Ganti nama_file sesuai dengan lokasi JQuery libraries yang Sobat unduh, misalkan “jquery-1.6.4.js”


Setelah libraries ter-compile, saatnya memberi JQuery script pada bagian paling bawah halaman sebelum </body>

<script>

// MENYEMBUNYIKAN ELEMENT DENGAN ID "PROFIL" DAN "INBOX"
$("#profil").hide();
$("#inbox").hide();

// JIKA ELEMENT DENGAN CLASS TERSEBUT DI KLIK, MAKA...
$(".home").click(function() {
 $("#home").show();     // TAMPILKAN ELEMENT DENGAN ID "HOME"
 $("#profil").hide();   // SEMBUNYIKAN ELEMENT DENGAN ID "PROFIL"
 $("#inbox").hide();    // SEMBUNYIKAN ELEMENT DENGAN ID "INBOX"
});

$(".profil").click(function() {
 $("#home").hide();     // SEMBUNYIKAN ELEMENT DENGAN ID "HOME"
 $("#profil").show();   // TAMPILKAN ELEMENT DENGAN ID "PROFIL"
 $("#inbox").hide();    // SEMBUNYIKAN ELEMENT DENGAN ID "INBOX"
});

$(".inbox").click(function() {
 $("#home").hide();     // SEMBUNYIKAN ELEMENT DENGAN ID "HOME"
 $("#profil").hide();   // SEMBUNYIKAN ELEMENT DENGAN ID "PROFIL"
 $("#inbox").show();    // TAMPILKAN ELEMENT DENGAN ID "INBOX"
});

</script>

Simpan hasil kerja Sobat lalu buka dengan browser. Silakan coba klik pada bagian menu yang ada, dan… voila, tampilan berganti namun halaman masih tetap sama.

Pada percobaan kali ini, kita menggunakan fungsi show() dan hide() yang dimiliki oleh JQuery untuk memanipulasi tampilan halaman. Secara sederhana, cara kerja JQuery yang kita gunakan adalah:

  • Menghilangkan semua <div> pada element content menggunakan function hide() — Home tidak dihilangkan agar tampil sebagai halaman depan.
  • Memberi perintah kepada setiap tombol menu untuk mengatur element apa saja yang harus ditampilkan / dihilangkan.

Hasil dari percobaan di atas adalah: » seperti ini «


[Semoga Bermanfaat]

Artikel ini telah mengalami penyesuaian dari versi terdahulu yang dipublikasikan pada blog Belajar Web dengan judul Membuat Web dalam Satu File.

Membuat Web dalam Satu File
Tagged on: