Males Koding

Icon

Blog yang isinya ternyata banyak kodingannya

Agustus 20, 2009 • 11:23 pm 0

Simple Partial Loading di JQuery

(belakangan pengen ngeposting artikel yang gampang mikirnya, hehehe)

Kemarin ada seorang junior yang sedang belajar JQuery. Dia nanya bagaimana caranya meload bagian dari halaman HTML tanpa harus meload bagian-bagian halaman lain. Fungsi ini merupakan salah satu kegunaan dari AJAX di mana kita melakukan HTTP request tanpa harus meload halaman baru.

JQuery sudah menyediakan sebuah method yakni load. Method ini akan melakukan request ke sebuah halaman dan kemudian menginjeksikan responsenya ke dalam DOM elemen tersebut.

Contoh penggunaannya

<html>
	<head>
		<title>Test</title>
		<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" language="javascript">
		$(document).ready(function(){
			$("#kotak").load("test5_1.html");
			$("#button1").click(function(){
				$("#kotak").load("test5_1.html");
				return false;
			});
			$("#button2").click(function(){
				$("#kotak").load("test5_2.html");
				return false;
			});
		});
	</script>

	</head>
	<body>
<ul>
	<li><a href="" id="button1">Test 1</a></li>
	<li><a href="" id="button2">Test 2</a></li>
</ul>
<div id="kotak"></div>
</body>
</html>

Untuk membuat sebuah tabpage pada HTML dan melakukan load seperti di atas, JQuery UI sudah menyediakan widget yang menarik dan high customable.

Source code dapat diambil di sini. (rename ke zip dan jangan lupa menambahkan script JQuerynya)

Filed under: HTML, Javascript, Snippets, Very Easy, Web Programming, tutorial , , , , , ,

Agustus 15, 2009 • 3:01 pm 3

Bingkai Gradasi pada Halaman HTML

Sedikit sharing tentang desain HTML. Gw beberapa hari ini lagi bikin theme wordpress buat website kantor meski pada dasarnya gw gak jago desain. Meski demikian, gw lumayan bisa kalo layout HTML dan CSS. Oke, sering kita ngeliat pada halaman web sering ada sebuah halaman yang memiliki bingkai gradasi atau pola-pola menarik. Di CSS yang sekarang kita gak bisa set bingkai (border) sebuah elemen menjadi sebuah gradasi atau pola. Tapi kita bisa menyiasatinya.

Layout HTML yang dipakai adalah sebagai berikut

<body>
<div id="page_wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

Selanjutnya kita sediakan sebuah gambar berukuran 920*2 pixel. Sebenarnya ukurannya lebarnya bisa terserah berkisar antara 900 s.d. 800an pixel dan tingginya hanya 1 s.d. 3 pixel. Di kedua pinggirnya kita siapkan pola atau gradasi. Contoh dapat dilihat di sini.

Nah, setelah itu kita tinggal bermain-main CSS.

body {margin:0px;padding:0px;background:#aaffb0;}
#page_wrapper {width:920px;background:url(page-border.png) repeat-y;margin:auto;}
#header {width:860px;margin:0px 30px 0px 30px;height:100px;border:1px solid #00ff12;background:#00ff12;}
#content {width:860px;margin:0px 30px 0px 30px;height:400px;border:1px solid #00ff12;background:#ffffff;}
#footer {width:860px;margin:0px 30px 0px 30px;height:100px;border:1px solid #00ff12;background:#00ff12;}

Page wrapper adalah sebuah elemen yang menampilkan gambar background di atas dan membungkus elemen-elemen utama : header, content, dan footer. Pada gambar yang disertakan, ukuran gradasi adalah 30px masing-masing. Oleh karena itu ukuran lebar header harusnya 60px lebih kecil dari  page wrapper dan harus memiliki margin 30px di kedua sisi kanan dan kiri. Margin ini akan memberi tempat bagi bingkai tersebut agar dapat terlihat.

Hasilnya nanti seperti di bawah.

Kode dapat diunduh di sini.

(seperti biasa, rename extension ke *.zip)

Filed under: Easy, HTML, Web Programming, tutorial , , , , ,

April 23, 2009 • 3:07 pm 1

Design Pattern MVC Pada Pemrograman Web JSP/Servlet

Di dalam pemrograman web menggunakan JSP dan Servlet terdapat 2 macam design pattern untuk implementasi pola Modeller-Viewerer-Controller.

MVC 1 : Page-centric architecture

Di dalam arsitektur ini, sebenarnya tidak ada perbedaan antara Viewer dengan Controller karena keduanya ditangani oleh sebuah file JSP yang sama. Hal ini dapat dilakukan karena pada dasarnya sebuah file JSP adalah sebuah servlet. Oleh karena itu JSP memiliki atribut-atribut yang sama dengan sebuah Servlet dan memiliki banyak kemudahan. Model diimplementasikan dengan bentuk Javabean. Arsitektur ini nantinya akan sangat mirip dengan jika kita melakukan pengembangan pada bahasa PHP.

mvc1

MVC 2 : Servlet-centric architecture

Pada arsitektur ini sebuah servlet bertugas untuk menerima request dari web browser kemudian melakukan pemrosesan model berdasarkan request tersebut. Setelah itu servlet akan meminta file JSP untuk menangani tampilan dari data-data. Dengan arsitektur ini kita dapat melakukan pengembangan seperti layaknya kita melakukan pengembangan pada aplikasi Java seperti biasanya. JSP digunakan hanya untuk memudahkan desain tampilan.

mvc2


Filed under: Easy, HTML, Java, Programming, Web Programming , , , , , , ,

April 6, 2009 • 12:29 pm 0

XHR Wrapper

Baru bikin wrapper yang lumayan enak buat digunain.

/*AJAX Wrapper!*/
/**
 * @param method Request method
 * @param url Request URL
 * @param onLoad Function callback on request complete
 * @param onProgress Function callback on request progress
 * @param data
 */
function doRequest(method,url,async,onLoad,onProgress,data) {
    var xhr;
    try{
        xhr=new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try{
            xhr=new ActiveXObject("Msxml2.xhr");
        } catch (e) {
            try {
                xhr=new ActiveXObject("Microsoft.xhr");
            } catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    // W3C requests and streaming
    xhr.open(method,url,async);
    if (method == "POST") /* Set request header on POST */
    {
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.setRequestHeader("Content-length", data.length);
        xhr.setRequestHeader("Connection", "close");
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 3) // interactive mode
            onProgress(xhr.responseText);
        if (xhr.readyState == 4) // finished
            onLoad(xhr.responseText,xhr.status);
    }
    xhr.send(data); // finally send the request whether it be XDR or XHR
}

Read the rest of this entry »

Filed under: HTML, Javascript, PHP, Web Programming, tutorial , , , , , , ,

• 9:10 am 1

AJAX-JSON

Melanjutkan bahasan yang ada di blog gw tentang JSON. Penggunaan JSON sangat mudah karena sudah banyak fungsi bawaan dari berbagai bahasa yang dapat langsung kelakukan encode dan decode format data JSON.

Contoh sebuah kode PHP yang menghasilkan JSON.

//file: test2.php
<?php
	$user = array (
		"id" => 1,
		"username" => "petra",
		"fullname" => "Petra Barus"
	);

	echo json_encode($user);
?>

Jika kode ini ditampilkan secara biasa maka halaman akan menampilkan format JSON dari array $user tersebut

{"id":1,"username":"petra","fullname":"Petra Barus"}

Dengan menggunakan kode pada tulisan sebelumnya

//cut
/* Test AJAXnya */
function testAjax()
{
	var url = "test2.php";
	xmlHttp.onreadystatechange = function () {
			if (xmlHttp.readyState==4)
			{
				var user = eval("("+xmlHttp.responseText+")");
				alert("ID       : " + user.id+"\n" +
				      "Username : " + user.username +"\n" +
					  "Fullname : " + user.fullname);
			}
		};
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
}

Seperti sebelumnya, isi dari atribut XHR responseText akan berisi tampilan dari server scriptnya. Isi ini dapat langsung diubah mejadi objek Javascript dengan menggunakan fungsi eval. Sebenarnya fungsi eval dapat mengeksekusi kode javascript apa pun tidak hanya JSON. Oleh karena itu gunakan hanya untuk kode JSON yang dipercaya.

Kode penuhnya dapat diambil di sini. (rename extension ke zip)

Filed under: HTML, Javascript, PHP, Web Programming , , , , , , ,

• 8:40 am 1

XML HTTP Request

XML HTTP Request atau sering disingkat XHR adalah sebuah object pada API Javascript yang dapat dipakai untuk melakukan HTTP Request secara asynchronous yakni melakukan HTTP Request tanpa perlu melakukan page loading. Berikut contoh pemakaian XHR

Untuk kode client-sidenya

<html>
	<head>
		<script type="text/javascript" languange="javascript" src="test1.js"></script>
	</head>
	<body>
		<button id="button1" onclick="testAjax()">Test</button>
	</body>
</html>

Pada kode di atas halaman akan mengeksekusi fungsi testAjax setiap kali tombol button1 ditekan.
Read the rest of this entry »

Filed under: HTML, Javascript, PHP, Web Programming, tutorial , , , , , ,

About Me

avatar
Just a man who only knows how to code but really dislike doing it

Contact Me





Top Rated

Twitter Terbaru

Blog Stats

  • 8,085 hits