Membuat Web Dalam Satu File
Posted by Gora Santika
Sumber Gambar : rocketdock.com
Pernahkah anda menggunakan sebuah aplikasi berbasis web yang menyediakan beberapa menu yang ketika kita klik pada menu tersebut akan mengganti halaman kita? -- Tentunya pernah. Namun, pernahkan anda mengamati ketika link yang anda klik mengganti tampilan halaman anda, namun browser tidak menunjukkan tanda-tanda refresh? (tidak ganti halaman). Misalkan anda berada pada sebuah game perang online, sebut saja http://www.contoh.com/game-perang.html . Anggap saja anda klik pada menu Toko Persenjataan. Tampilan toko muncul dan anda dapat membeli barang-barang, namun alamat pada addressbar di browser masih http://www.contoh.com/game-perang.html dan bahkan, browser kita tidak menunjukkan aktifitas loading halaman seperti ketika membuka sebuah halaman pada umumnya. Berikut saya tuliskan cara membuat halaman sejenis itu.
Hal yang dibutuhkan dalam project kali ini adalah:
- JQuery libraries yang dapat di unduh » 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 anda tulis di sini?<br><br><br><br>
Mungkin anda bisa menulis ucapan selamat datang.
</div>
<div id="profil">
Profil Anda<br><br>
Apakah anda memiliki sesuatu yang ingin dibagi?<br><br><br>
Atau mungkin sekedar biodata?
</div>
<div id="inbox">
Tempat Menyimpan Pesan<br><br>
Tentu anda sudah tak asing dengan istilah inbox<br><br>
Anda 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 anda (sebaiknya di dalam tag <head></head>)
<script src="nama_file"></script>Ganti nama_file sesuai dengan lokasi JQuery libraries yang anda 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 anda lalu buka dengan browser. Silakan coba klik pada bagian menu yang ada, dan... voila, tampilan berganti namun halaman masih tetap sama.
Pada project 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]
numpang tanya mas bro kalo boleh aku tau jquery yang dipakai disini jquery versi berapa?
untuk contoh yg saya berikan menggunakan JQuery 1.7 min
seumpama dibuat menu sidebar bisa tidak bro?
kalo bisa scriptnya yang perlu dirubah yang bagian mana
itu tinggal agan atur aja lewat css.. itu kan menu bar ada di dalam div#menu, nah tinggal cssnya disesuaikan aja