Salah satu alasan kenapa saya lebih menyukai jsp dibanding viewer-viewer lainnya adalah karena saya bisa lebih bebas berkreasi dengan CSS dan Javascript pada web aplikasi yang saya buat.
Pembaca yang budiman, kutipan diatas adalah salah satu jawaban ketika orang bertanya kepada saya kenapa saya lebih suka menggunakan jsp sebagai front-end aplikasi web yang saya buat. Buat sebagian developer java, css dan javascript adalah suatu hal yang benar2 menyita waktu dan momok tersendiri dalam membangun sebuah web aplikasi. Tapi bagi saya, itu sangat menyenangkan dan penuh dengan pengalaman tersendiri.
Ketika saya menggunakan javascript dalam halaman jsp yang saya buat, saya juga menggunakan JQuery sebagai sebuah framework javascript yang mampu membuat pekerjaan client side programming web aplikasi saya menjadi lebih mudah. Beberapa pembaca mungkin juga sudah tahu, bahwa saat ini JQuery adalah sebuah framework javascript yang sangat populer digunakan dalam pemrograman client-side scripting. Semua hal mengenai JQuery dapat kita temukan pada websitenya di http://jquery.com.
Dalam tutorial kali ini kita akan membahas pemakaian JQuery sebagai pemersatu halaman-halaman hingga menjadi sebuah halaman utuh. Perhatikan sketsa tampilan sebuah halaman depan berikut ini:
Pada sketsa tsb kita punya sebuah halaman yang terdiri dari blok-blok header, menu, content, widget dan footer. Untuk lebih mengorganisir struktur file pada project maka kita bisa membuat tiap halaman tersendiri untuk tiap blok yang ada, jadi footer nanti akan diisi oleh footer.html, kemudian menu nanti diisi oleh menu.html dan seterusnya, sehingga nantinya jika kita ingin memodifikasi blok-blok yang ada akan menjadi lebih fokus.
Untuk membuat tampilan dasarnya, anda bebas membuatnya dengan menggunakan metode layout apapun, bisa dengan layout table, bisa juga dengan menggunakan layout div. Hanya saja yang harus diperhatikan adalah kita harus membuat id untuk masing-masing blok yang ada untuk memudahkan pemrograman dengan menggunakan JQuery nantinya.
Untuk pembahasan kali ini saya akan menggunakan metode layout div, dengan css sebagai positioning blok-blok tersebut. Berikut kode html untuk layout tersebut.
<html>
<head></head>
<body>
<div id="all">
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content</div>
<div id="widget">Widget</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Sementara untuk mengatur positioning, ukuran tampilan lainnya kode-kode css-nya adalah sebagai berikut:
body{
font-family:verdana,tahoma, sans-serif;
font-size:11px;
background-color: #b5b1b1;
}
#all{
width:1200px;
margin-left:auto;
margin-right:auto;
}
#header{
background:#cfc99a;
padding:10px;
border:1px solid white;
margin:3px;
width:1165px;
height:50px;
clear:left;
}
#menu{
border:1px solid white;
width:180px;
margin:3px;
float:left;
min-height:540px;
background: #f7e8a1;
padding:10px;
}
#widget{
border:1px solid white;
margin:3px;
width:180px;
min-height:540px;
background: #f7e8a1;
padding:10px;
float:left;
}
#content{
border:1px solid white;
margin:3px;
float:left;
width:750px;
min-height:540px;
background: #f7e8a1;
padding:10px;
}
#footer{
padding:10px;
border:1px solid white;
margin:3px;
width:1165px;
height:15px;
clear:left;
background-image:url("../images/menu_bg.gif");
}
Setelah layout tersebut jadi maka tinggal kita menambahkan JQuery pada halaman ini. Anda dapat men-download JQuery pada websitenya atau langsung memakai link CDN (content delivery network) seperti yang disarankan pada website-nya.
Langkah selanjutnya adalah tentu saja anda harus membuat masing-masing halaman yang akan mengiisi blok-blok tersebut, kita skip saja langkah ini, silahkan berkreasi sesuai dengan yang anda sukai.
Kemudian langkah selanjutnya adalah membuat kode-kode yang dapat memuat file-file yang akan mengisi blok-blok tersebut.
Secara teoritis sebenarnya kita akan mengisi blok-blok tersebut dengan halaman yang ada dengan menggunakan teknologi ajax, dan JQuery adalah salah satu framework yang mendukung teknologi ajax secara penuh dengan metode yang beragam pula. Berikut ini adalah kode-kode javascript untuk me-load halaman-halaman tersebut ke dalam blok-blok yang ada.
Berikut adalah kode-kode javascript yang memanggil halaman-halaman yang akan mengisi layout yang sudah kita buat tadi.
Berikut adalah kode-kode javascript yang memanggil halaman-halaman yang akan mengisi layout yang sudah kita buat tadi.
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('header.html', function(data) {
$("#header").html(data);
});
$.get('footer.html', function(data) {
$("#footer").html(data);
});
$.get('menu.html', function(data) {
$("#menu").html(data);
});
});
</script>
$(document).ready(function() {
}
Bagian ini adalah bagian penting dalam pemanfaatan JQuery, namun bagian ini tidak harus selalu diimplementasikan. Bagian ini memerintahkan kepada browser supaya semua perintah yang ada dalam kurung kurawal baru bisa dieksekusi setelah dokumen html ter-load sepenuhnya dalam browser (document.ready).
$.get('header.html', function(data) {
$("#header").html(data);
});
Sementara bagian ini adalah perintah untuk mengambil content “header.html” menggunakan ajax melalui method http get, yang kemudian content dari header.html tersebut diletakkan pada div header yang sudah kita rancang sebelumnya. Baris-baris berikutnya pada dasarnya sama dengan baris ini, hanya saja content yang diambil berasal dari file yang berbeda dan diletakkan pada div yang berbeda pula.
Demikianlah. Contoh diatas adalah salah satu penggunaan fitur-fitur jquery yang membuat pemrograman client-side terutama modul viewer jadi lebih mudah, dan lebih cepat.
Semoga bermanfaat
Josescalia
2 comments:
terimakasih tutonya.....moga bertambah terus ilmunya bang...
thank's
Post a Comment