Skip navigation

Tag Archives: HTML


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

Iklan

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)


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)


Tugas besar Pemrograman Internet kali ini adalah untuk menyusun sebuah situs mirip jejaring sosial yang berisi profil-profil diri dari anggota kelompok yang terkait satu sama lain menggunakan hyperlink. Salah satu poin yang gw propose di spesifikasi tugas besar tersebut adalah Web Standard compliance.

Apa sih itu Web Standard? Web Standard adalah sebuah teknologi atau spesifikasi yang telah disusun untuk membuat atau menginterpretasikan konten berbasis web. Standar-standar ini didefinisikan terutama oleh World Wide Web Consortium. Setiap pengembang web seharusnya mengikuti standar yang telah ditetapkan tersebut. Dan untungnya Pak Riza, dosen yang bersangkutan, sangat setuju dengan adanya spesifikasi tersebut.

Kenapa sih harus ikut Web Standard?

Read More »

%d blogger menyukai ini: