Belajar, Sharing, Tips dan Trik Web Programming, Vector dan Bitmap Graphic

Mengubah Dropdown List dengan Ajax dan PHP

noreply@blogger.com (Zups) — Tue, 19 Jan 2010 19:52:44 PST

Sudah banyak artikel yang mengupas tentang mengubah dropdown list dengan Ajax dan PHP. Saya hanya akan mereview aja. Mungkin aja boz lupa sintaknya, betul gak? Keuntungan kalau website atau aplikasi yang kita buat telah menggunakan Ajax adalah halaman tidak perlu direfresh saat menampilkan data. Itu artinya pengguna tidak harus menunggu lama untuk melihat data yang diinginkan.

Kita langsung membahas contoh kasusnya ya boz. Misalnya pada sebuah aplikasi terdapat sebuah form untuk memasukkan data barang dimana setiap barang tergabung ke dalam sebuah grup barang. Contohnya kita punya sebuah grup barang dengan nama TV yang mempunyai beberapa merk barang seperti Soni, Sarap, ElGe, Dijitak, dan Sungsang.

Mari kita mulai dengan membuat dua buah tabel yaitu tabel grupbarang dan tabel barang. Kemudian masukkan beberapa sample data.

CREATE TABLE IF NOT EXISTS `grupbarang` (

`idgrupbarang` varchar(10) NOT NULL,

`grupbarang` varchar(40) NOT NULL,

PRIMARY KEY (`idgrupbarang`)

);

INSERT INTO `grupbarang` (`idgrupbarang`, `grupbarang`) VALUES

('Tv', 'Televisi'),

('Ant', 'Antena'),

('Kbl', 'Kabel');

CREATE TABLE IF NOT EXISTS `barang` (

`idbarang` varchar(20) NOT NULL,

`idgrupbarang` varchar(10) NOT NULL,

`barang` varchar(50) NOT NULL,

PRIMARY KEY (`idbarang`)

);

INSERT INTO `barang` (`idbarang`, `idgrupbarang`, `barang`) VALUES

('Tv1', 'Tv', 'Soni'),

('Tv2', 'Tv', 'Sarap'),

('Tv3', 'Tv', 'ElGe'),

('Ant1', 'Ant', 'Antena UHF PF Goceng'),

('Ant2', 'Ant', 'Antena UHF PF Ceban'),

('Tv4', 'Tv', 'Dijitak'),

('Tv5', 'Tv', 'Sungsang'),

('Kbl1', 'Kbl', 'Kabel Roll Hitam'),

('Kbl2', 'Kbl', 'Kabel Rol Bening'),

('Kbl3', 'Kbl', 'Kabel Antena Gepeng'),

('Kbl4', 'Kbl', 'Kabel Antena Bulat');

Sekarang kita buat file PHP dan Javascript.

InputForm.php

<?php

// sesuaikan path penyimpanan library adodb anda

include("../libs/adodb/adodb.inc.php");

$db=ADONewConnection('mysql');

$db->Connect('localhost','root', '','test');

?>

<!-- Sertakan file ajax.js -->
<script language="javascript" src="ajax.js"></script>

<h2>Input Data Barang</h2>

<form method="post" action="" name="inputform" id="inputform">

<?php

// ambil data grup barang dari tabel grubarang

$GB=$db->Execute("SELECT idgrupbarang, grupbarang FROM grupbarang");

?> 

Grup barang :
<select name="idgrupbarang" onChange="showHint(this.value)">

<option value="" selected="selected">Pilih Grup Barang</option>

<?php

while(!$GB->EOF){

?>

<option value="<?php echo $GB->fields['idgrupbarang']?>"><?php echo $GB->fields['grupbarang']?></option>

<?php

$GB->MoveNext();

}

?> 

</select>

<br />City :
<select name="idbarang" id="idbarang">

<option>-</option>

</select>

</form>

ajax.js

var xmlHttp

function showHint(str){

if (str.length==0){ 

document.getElementById("idbarang").innerHTML="";

return;

}

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null){

alert ("Browser anda tidak support AJAX!");

return;

}

var url="CariBarang.php";

url=url+"?id="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

} 

function stateChanged() { 

if (xmlHttp.readyState==4){ 

document.getElementById("idbarang").innerHTML=xmlHttp.responseText;

}

}

function GetXmlHttpObject(){

var xmlHttp=null;

try {

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}catch (e){

// Internet Explorer

try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}catch (e){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

CariBarang.php

<?php

// sesuaikan path penyimpanan library adodb anda

include("../libs/adodb/adodb.inc.php");

$db=ADONewConnection('mysql');

$db->Connect('localhost','root', '','test');

/*

Nilai variabel $id diambil dari variabel id yang dideklarasikan pada file ajax.js

*/

$id=$_GET['id'];

$B=$db->Execute("SELECT idbarang, barang FROM barang WHERE idgrupbarang='$id'");

$hint="";

while(!$B->EOF){

$hint.="<option value=".$B->fields['idbarang'].">".$B->fields['barang']."</option>";

$B->MoveNext();

}

if ($hint == ""){

$response="Tidak ada data barang";

}else{

$response=$hint;

}

//output responnya

echo $response;

?>

Antara file InputForm.php, ajax.js, dan CariBarang.php saling berhubungan. Pada InputForm.php kita menyertakan ajax.js.

<script language="javascript" src="ajax.js"></script>

Pada saat grup barang sudah kita pilih, method onChange="showHint(this.value)" akan mengirimkan data idgrupbarang yang baru saja dipilih ke ajax.js dan disimpan pada variabel id (url=url+"?id="+str;). Oleh ajax.js diteruskan ke file CariBarang.php, di file inilah terjadi query ke tabel barang berdasarkan nilai dari variabel id. Setelah proses query selesai, CariBarang.php mengirimkan hasil query ke ajax.js kemudian diteruskan ke InputForm.php dan diletakkan pada atribut id="idbarang".

Preview

Saat pertama kali dibuka, file InputForm.php akan menampilkan form seperti ini :

Setelah memilih salah satu grup barang, maka akan muncul daftar barang berdasar grub barang yang dipilih seperti ini :

Menggunakan Perulangan While untuk Menampilkan Data Employees

noreply@blogger.com (Zups) — Tue, 19 Jan 2010 15:11:10 PST

Setelah sekian lama tidak mengupdate blog ini, akhirnya tumbuh lagi semangat untuk terus selalu berbagi ilmu dengan kalian semua. Boz, kali ini saya akan menjelaskan bagaimana menampilkan data dari sebuah tabel dan ditampilkan menggunakan fungsi while. Tentu saja koneksi ke databasenya menggunakan ADOdb.

Pertama, saya siapkan tabelnya terlebih dahulu dan saya beri nama tabel employees. Berikut ini adalah sintak SQL-nya:

CREATE TABLE IF NOT EXISTS `employees` (

`id` int(6) NOT NULL AUTO_INCREMENT,

`name` char(20) DEFAULT NULL,

`lastname` char(20) DEFAULT NULL,

`salary` float DEFAULT NULL,

`age` int(2) DEFAULT NULL,

`afiliation` date DEFAULT NULL,

`status` int(1) DEFAULT NULL,

`active` tinyint(1) DEFAULT NULL,

`workeddays` int(2) DEFAULT NULL,

`photo` char(30) DEFAULT NULL,

PRIMARY KEY (`id`)

);

Dan berikut ini adalah datanya. Sengaja saya berikan sample datanya karena terkadang kita... Kita? Situ aja kali, aku mah enggak. Iya deh, saya. Terkadang kita, ups! Saya suka malas kalau mengisi sample data. Makanya saya sertakan sample data berikut ini untuk mengisi tabel yang telah dibuat sebelumnya.

INSERT INTO `employees` (`id`, `name`, `lastname`, `salary`, `age`, `afiliation`, `status`, `active`, `workeddays`, `photo`) VALUES

(1, 'Ana', 'Trujillo', 2000, 45, '2005-05-13', 2, 0, 10, '1.jpg'),

(2, 'Jennifer', 'Aniston', 3500, 23, '2004-10-22', 1, 0, 0, '2.jpg'),

(3, 'Michael', 'Norman', 1200, 19, '2007-01-10', 1, 1, 5, '3.jpg'),

(4, 'Vanessa55', 'Black', 7500, 31, '2000-11-05', 1, 0, 30, '4.jpg'),

(5, 'Michael', 'Strauss', 3200, 45, '2006-10-21', 2, 0, 22, '5.jpg'),

(6, 'William', 'Brown', 2300, 21, '2001-03-10', 1, 1, 10, '6.jpg'),

(7, 'Lucca', 'Normany', 2800, 36, '2006-10-02', 3, 0, 20, '7.jpg');

Sekarang, asumsinya, kita sudah mempunyai sebuah tabel dan berisi sample data. Selanjutnya kita tampilkan sample data tadi menggunakan fungsi perulangan while. Agar data yang ditampilkan di browser terlihat rapi, kita gunakan tag table, tr, th, dan td untuk membuat sebuah tabel. Sintaknya seperti ini dan simpan sebagai employees.php :

<table width="100%"  border="1" cellspacing="0" cellpadding="2">

<tr>

<th>No.</th>

<th>First Name</th>

<th>Last Name</th>

<th>Salary</th>

<th>Age</th>

<th>Afiliation</th>

<th>Status</th>

<th>Active</th>

<th>Workeddays</th>

<th>Photo</th>

</tr>
<tr>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

Pada sintak diatas, tag-tag yang berwarna biru adalah tag yang akan berulang sesuai dengan banyaknya sample data yang ada. Agar kita bisa menampilkan sample data yang diambil dari database, maka kita harus menambahkan sintak untuk membuat koneksi ke database. Berarti kita harus mengedit file employees.php dan tambahkan script berikut ini di awal file.

<?php

include("../libs/adodb/adodb.inc.php");

/*******************************************************

Aturan dalam membuat koneksi ke database menggunakan ADOdb

$db=ADONewConnection($DRIVER);

$db->Connect($HOST,$USER_NAME, $PASSWORD,$USER_DATABASE);

*******************************************************/

$db=ADONewConnection('mysql');

$db->Connect('localhost','root', '','test');

?>

Selanjutnya adalah menambahkan sintak SQL yang membuat query ke tabel employees. Tambahkan sintak SQL berikut di bawah script koneksi yang telah dibuat sebelumnya.

$E=$db->Execute("SELECT id, name, lastname, salary, age, afiliation, status, active, workeddays, photo FROM employees");

Membuat koneksi ke database sudah, membuat sintak SQL juga sudah. Berarti sekarang tinggal membuat script untuk menampilkan data dengan menggunakan perulangan while. Kalau boz membaca artikel ini dari atas, pasti boz akan melihat kumpulan tag html yang berwarna biru. Tag-tag html yang berwarna biru kita edit menjadi seperti ini :

<?php

// beri nilai awal untuk nomor

$i=1;

// melakukan perulangan selama data masih ada untuk ditampilkan

// jika data sudah ditmpilkan semua(EOF = End Of File), perulangan while akan berhenti

while(!$E->EOF){

?>

<tr>

<td><?php echo $i?></td>

<td><?php echo $E->fields['name']?></td>

<td><?php echo $E->fields['lastname']?></td>

<td><?php echo $E->fields['salary']?></td>

<td><?php echo $E->fields['age']?></td>

<td><?php echo $E->fields['afiliation']?></td>

<td><?php echo $E->fields['status']?></td>

<td><?php echo $E->fields['active']?></td>

<td><?php echo $E->fields['workeddays']?></td>

<td><?php echo $E->fields['photo']?></td>

</tr>

<?php

$i++;

$E->MoveNext();

}

?>

Pusing ya boz kalau penjelasan sintaknya terpisah-pisah. Ya udah, kita gabungkan deh. Nah, kalau kita gabungkan maka sintaknya harusnya sih seperti ini :

<?php

include("../libs/adodb/adodb.inc.php");

/*******************************************************

Aturan dalam membuat koneksi ke database menggunakan ADOdb

$db=ADONewConnection($DRIVER);

$db->Connect($HOST,$USER_NAME, $PASSWORD,$USER_DATABASE);

*******************************************************/

$db=ADONewConnection('mysql');

$db->Connect('localhost','root', '','test');

$E=$db->Execute("SELECT id, name, lastname, salary, age, afiliation, status, active, workeddays, photo FROM employees");

?>

<table width="100%"  border="1" cellspacing="0" cellpadding="2">

<tr>

<th>No.</th>

<th>First Name</th>

<th>Last Name</th>

<th>Salary</th>

<th>Age</th>

<th>Afiliation</th>

<th>Status</th>

<th>Active</th>

<th>Workeddays</th>

<th>Photo</th>

</tr>

<?php

// beri nilai awal untuk nomor

$i=1;

// melakukan perulangan selama data masih ada untuk ditampilkan

// jika data sudah ditmpilkan semua(EOF = End Of File), perulangan while akan berhenti

while(!$E->EOF){

?>

<tr>

<td><?php echo $i?></td>

<td><?php echo $E->fields['name']?></td>

<td><?php echo $E->fields['lastname']?></td>

<td><?php echo $E->fields['salary']?></td>

<td><?php echo $E->fields['age']?></td>

<td><?php echo $E->fields['afiliation']?></td>

<td><?php echo $E->fields['status']?></td>

<td><?php echo $E->fields['active']?></td>

<td><?php echo $E->fields['workeddays']?></td>

<td><?php echo $E->fields['photo']?></td>

</tr>

<?php

$i++;

$E->MoveNext();

}

?>

</table>

Hasilnya seperti ini :

Ganti Tombol Submit dengan Gambar

noreply@blogger.com (Zups) — Tue, 22 Sep 2009 16:11:42 PDT

Saat saya berseluncur ke website tetangga, saya melihat sebuah tombol submit yang bagus. Sepertinya tombol ini menggunakan gambar sebagai backgroundnya, saya berpikir seperti itu. Tapi saya salah sangka (Fuihh.. untung saja tidak berdosa). Setelah saya telanjangi kodenya, ternyata seperti ini:

<input type="image" value="Submit" src="url-image" />

Ternyata website tersebut menggunakan atribut type="image". Harus diakui kalau saya baru tau caranya seperti ini, hehehe.. Maka saya pun mulai bereksperimen dengan menambahkan beberapa kode javascript dan styles.

File HTML

<html>

<head>

<title>Styled Text Area by CSS-Tricks</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<form action="#" method="post">

<div id="page-wrap">

<textarea name="styled-textarea" id="styled" onfocus="if (this.value == 'Ketik komentar anda disini') {this.value = '';};" onblur="if (this.value == '') {this.value = 'Ketik komentar anda disini';};">Ketik komentar anda disini</textarea>

<br />

<input type="image" value="Submit" src="submit-4.gif" class="kanan" />

</div>

</form>

</body>

</html>

File CSS

#page-wrap {

margin: 20px auto;

width: 616px;

}

textarea#styled {

width: 600px;

height: 60px;

border: 2px inset #cccccc;

padding: 3px;

font-family: Tahoma, sans-serif;

background-image: url(bg.gif);

background-position: bottom right;

background-repeat: no-repeat;

}

.kanan {

float: right;

margin-bottom: 25px;

margin-right: 17px;

}

Gambar

Dibawah ini adalah gambar-gambar yang digunakan dalam latihan kali ini. Silakan anda gunakan.

Ada yang mau menambahkan eksperimen yang saya lakukan? Silakan dicoba.

Kombinasi Sintak Regular Expression dengan PHP Reg Ex Functions

noreply@blogger.com (Zups) — Thu, 17 Sep 2009 20:09:58 PDT

Bagi pemula seperti kita, regular expression (regexp) tampaknya akan sulit untuk dipelajari dan digunakan. Tapi kalau mengingat pentingnya memahami dan menggunakan regexp maka kita akan selalu semangat dalam mempelajarinya. Sebelum kita menyelam jauh ke dalam regexp, mari kita lihat sintak dasar regexp:

Regular expressions syntax

Regular Expression	Hasil
foo	The string "foo"
^foo	mendeteksi "foo" di awal sebuah string
foo$	mendeteksi "foo" di akhir sebuah string
^foo$	mendeteksi kata "foo"
[abc]	mendeteksi a, b, atau c
[a-z]	mendeteksi setiap yang dicetak lowercase
[^A-Z]	mendeteksi setiap karakter yang tidak dicetak uppercase
(gif\|jpg)	Mencocokkan format gambar "gif" atau "jpeg"
[a-z]+	mendeteksi satu atau lebih karakter yang dicetak lowercase
[0-9.-]	mendeteksi angka, titik (dot), atau tanda minus
^[a-zA-Z0-9_]{1,}$	mendeteksi teks baik huruf, angka atau tanda underscore (_) minimal satu buah
([wx])([yz])	mendeteksi wy, wz, xy, atau xz
[^A-Za-z0-9]	mendeteksi simbol apapun yang bukan huruf atau angka
([A-Z]{3}\|[0-9]{4})	membandingkan tiga buah huruf atau empat buah angka

Fungsi-fungsi PHP regular expression

Fungsi	Penjelasan
preg_match()	fungsi preg_match() akan mencari data yang sesuai dengan pola yang telah ditentukan (misalnya [^A-Za-z0-9]), jika sesuai akan mengembalikan nilai true dan jika tidak sesuai makan akan mengembalikan nilai false
preg_match_all()	fungsi preg_match_all() akan mencari data secara keseluruhan yang sesuai dengan pola, misalnya digunakan dalam memvalidasi URL
preg_replace()	preg_replace() mempunyai fungsi yang sama dengan ereg_replace(), tapi pada regular expressions dapat digunakan sebagai pola dan dapat digunakan untuk memanipuasi data. Misalnya kita ingin menandai setiap kata PHP dengan warna merah.
preg_split()	preg_split() mempunyai fungsi yang sama dengan split(), tapi pada regular expressions dapat digunakan sebagai as input parameters untuk pola.
preg_grep()	fungsi preg_grep() mencari semua elemen dari input_array, dan mencocokkan semua elemen dengan pola regexp.
preg_ quote()	Menambahkan tanda kutip dua (") pada karakter regular expression

Validasi pada URL

Memverifikasi apakah URL yang dimasukkan sudah benar atau belum.

$url = "http://duniacopypaste.blogspot.com/";

if (preg_match('/^(http|https|ftp)://([A-Z0-9][A-Z0-9_-]*(?:.[A-Z0-9][A-Z0-9_-]*)+):?(d+)?/?/i', $url)) {

echo "URL ok.";

} else {

echo "Wrong URL.";

}

Memberikan warna latar belakang pada kata tertentu yang berada dalam kalimat

Regexp ini sangat berguna untuk digunakan pada hasil pencarian.

$text = "Walaupun Regexp cukup sulit dipelajari oleh kita sebagai pemula, tapi Regexp sangat bermanfaat dalam memproteksi sistem dari data yang salah atau kode porgram yang jahat.";

$text = preg_replace("/b(Regexp)b/i", '1', $text);

echo $text;

}

Contoh implementasinya dapat di lihat pada artikel Validasi Form dengan Regular Expression

Membuat Koneksi Multipel Database dengan ADOdb Library

noreply@blogger.com (Zups) — Mon, 21 Sep 2009 20:21:14 PDT

Untuk pada programmer Windows, membaca ADOdb mungkin pikirannya langsung tertuju pada ADODB pada VB. ADOdb yang ini tidak ada hubungannya dengan VB boz, kerabatnya juga bukan. ADOdb adalah pustaka yang diciptakan oleh John Lim - sekarang sudah rilis versi 4 - untuk memudahkan para programmer dalam memanipulasi database. Saat ini ADOdb telah mendukung MySQL, Oracle, Microsoft SQL Server, Sybase, Sybase SQL Anywhere, Informix, PostgreSQL, FrontBase, Interbase (Firebird dan Borland variants), Foxpro, Access, ADO dan ODBC. Jadi para programmer PHP tidak akan kesulitan bila ingin bermigrasi dari sebuah DBMS ke DBMS lainnya. Karena drivernya telah tersedia, ADOdb.

Biasanya programmer PHP pemula seperti kita, saat membuat sebuah website atau sistem, akan menggunakan MySQL sebagai DBMS-nya dan menggunakan fungsi built-in dalam melakukan koneksi dan manipulasi database. Misalnya mysql_connect, mysql_query dan masih banyak lagi. Bayangkan kalau misalnya kita sudah mempunyai banyak file dan menggunakan fungsi-fungsi bawaan tersebut dalam melakukan koneksi dan manipulasi data, kemudian suatu saat kita ingin mengganti DBMS kita dari MySQL ke Oracle misalnya. Wah, artinya kita harus lembur tuh boz. Kenapa? Kita kan harus mengganti fungsi-fungsi bawaan ntuh boz.

Fungsi-fungsi built-in bukannya tidak bagus boz, justru praktis dan powerfull. Dengan catatan kalau kita memang hanya akan menggunakan MySQL. Tapi kalau dari awal akan menggunakan DBMS selain MySQL, gunakanlah ADOdb sebagai drivernya. Apa sih keuntungan menggunakan ADOdb?

Bagi programmer Windows akan lebih mudah dalam penggunaannya karena dengan Microsoft ADO.
ADOdb memberikan dukungan dalam menangani manipulasi database dan dapat diadaptasi ke banyak database.
Mempunyai sistem metatype built-in sehingga kita dapat mengetahui jenis data seperti Char, String dan walaupun dalam database berbeda.
ADOdb juga mendukung session.

Cara menginstall ADOdb

Pastikan kalau boz sudah mengupgrade versi PHP ke versi 4.0.5 atau lebih tinggi. Download library ADOdb kemudian simpan ke dalam direktori pada web server.

Cara menginstall ADOdb

Untuk pengembang yang ingin melakukan instalasi minimal, cukup Copy Paste filefile berikut ini dan simpan pada web server:

adodb.inc.php
adodb-lib.inc.php
adodb-time.inc.php
drivers/adodb-$database.inc.php
license.txt
adodb-php4.inc.php
adodb-iterator.inc.php

Sekarang saatnya menguji koneksi. Kita buat sebuah database dengan nama dbcoba dan sebuah tabel dengan nama tblcoba. Kalau saat membaca artikel ini boz juga mempraktekkannya, isilah tblcoba dengan beberapa record data untuk kita jadikan indikator keberhasilan koneksi nantinya. Buat sebuah file yang berisi kode program seperti ini:

<?php

// Sesuaikan path-nya

include('adodb/adodb.inc.php');

// Menentukan DSN

$db = ADONewConnection("mysql");

// Fungsi debug akan menampilkan sintak SQL di layar, bisa digunakan untuk memeriksa sintak SQL.

// isi dengan false atau 0 jika sintak SQL tidak ingin muncul di layar

$db->debug = true;

// Format koneksi ->$server, $user, $password, $database

$db->Connect("localhost", "root", "", "dbcoba");

$rs = $db->Execute('select * from tblcoba');

print "<pre>";

print_r($rs->GetRows());

print "</pre>";

?>

Jika tidak ada kesalahan koneksi dan fungsi debug tetap berisi true (bisa juga diisi dengan angka 1) maka di layar akan muncul sintak SQL beserta data yang ada pada tblcoba.

Sederhanakan Koneksi Agar Mudah Mengelolanya

Pada contoh di atas, proses koneksi dan SQL berada dalam satu file. Coba bayangkan (lagi), kita mempunyai banyak file dimana pada masing-masing file terdapat baris koneksi dan sintak SQL seperti contoh di atas. Kemudian kita akan mengganti lagi DBMS-nya. Sudah pasti lembur lagi nih boz, karena harus membuka file satu persatu dan mengganti DSN-nya ($db = ADONewConnection($DSN)). Kok masih repot yah walaupun sudah memakai ADOdb? Tenang. Pisahkan saja baris koneksi menjadi file tersendiri, nanti file koneksi tersebut dapat dipanggil oleh file-file lainnya. Misalnya seperti ini:

<?php

// Sesuaikan path-nya

include('adodb/adodb.inc.php');

// Menentukan DSN

$db = ADONewConnection("mysql");

// Format koneksi ->$server, $user, $password, $database

$db->Connect("localhost", "root", "", "dbcoba");

?>

Simpan kode di atas dengan nama koneksi.php misalnya. File manapun yang membutuhkan koneksi ke database tinggal memanggil file koneksi.php. Praktis yah. Sekarang kembali ke anda sendiri boz, apa masih mau menggunakan fungsi-fungsi built-in PHP-MySQL atau menggunakan ADOdb. Yang mana yang terbaik kan relatif, tergantung kasusnya. Pilihan di tangan anda boz.

PHP: Validasi Form dengan Regular Expression

noreply@blogger.com (Zups) — Thu, 17 Sep 2009 20:10:55 PDT

Saat bekerja dengan form yang menyimpan data ke dalam database, kita harus hati-hati dalam menanganinya. Seperti yang kita tahu, form adalah media interaksi antara pengguna dengan web atau sistem yang kita buat. Oleh karena itu, kita harus menambahkan validasi pada setiap form inputan agar data yang dimasukkan oleh pengguna sesuai dengan yang kita inginkan. Jika kita tidak menerapkan validasi pada form yang kita buat maka bisa fatal akibatnya. Tanpa validasi, pengguna yang iseng bisa saja memasukkan kode program yang jahat yang bisa mengetahui data yang sensitif dan rahasia atau bahkan lebih parah lagi melumpuhkan sistem.

Pada artikel kali ini, kita akan coba membuat validasi dengan menggunakan Regular Expression. Kita akan menggunakan dua buah file yaitu file yang berisi form dan file yang berisi kode program yang memeriksa informasi yang dikirimkan oleh form.

Langkah ke-1

Di bawah ini adalah kode HTML untuk membuat form yang akan digunakan untuk mengisi informasi username, email, dan URL.

<html>

<head>

</head>

<body>

<form method="post" action="form_validasi.php">

Username : <input type="text" name="username" size="20" maxlength="20" /><br />

Email : <input type="text" name="email" size="20" /><br />

URL : <input type="text" name="url" size="30" /><br />

<input type="submit" />

</form>

</body>

</html>

Saat kita klik tombol Submit maka akan diarahkan pada file form_validasi.php.

Langkah ke-2

Pada file form_validasi.php akan berisi validasi untuk ketiga informasi (username, email, URL) yang dikirim oleh form. Berikut adalah skrip file form_validasi.php:

<?

// Memvalidasi username, hanya boleh berisi alpha-numeric (a-z, A-Z, 0-9), underscore,

// dan minimal berisi 5 karakter dan maksimum 20 karakter

// Anda bisa mengganti jumlah minnimun dan maksimum karakter sesuai kebutuhan

$username = $_POST['username'];

if (preg_match('/^[a-z\d_]{5,20}$/i', $username)) {

echo "Username anda ok.<br />";

} else {

echo "Format username salah.<br />";

}

// Solusi dalam memvalidasi email adalah menggunakan filter_var

if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){

echo "Email anda ok.<br />";

} else {

echo "Format alamat email salah.<br />";

}

// memvalidasi domain

$url = $_POST['url'];

if (preg_match('/^(http|https|ftp):\/\/([A-Z0-9][A-Z0-9_-]*(?:\.[A-Z0-9][A-Z0-9_-]*)+):?(\d+)?\/?/i', $url)) {

echo "URL anda ok.";

} else {

echo "URL salah.";

}

?>

PHP: Membuat dan menangani form

noreply@blogger.com (Zups) — Sun, 13 Sep 2009 20:49:44 PDT

Membuat kode untuk form adalah perkerjaan yang cukup menantang karena kita harus membuat kode yang bagus dan mempunyai tingkat keamanan yang tinggi. Pada blog-blog yang kita jumpai, biasanya selalu ada form untuk mengirim komentar. Kalau form komentar tersebut tidak dilengkapi dengan validasi yang bagus, bisa-bisa blog kita di hack orang lain. Kali ini kita fokus dulu ke dalam pembuatan sebuah form dan cara penangananya. Kita akan bahas validasi pada form di artikel selanjutnya ya boz.

Terdapat dua method dalam mengirimkan data pada form yaitu method="post" dan method="get". keduanya mempunyai fungsi yang sama yaitu megirimkan data, yang membedakan hanya cara penangananya saja.

Fungsi $_POST

Fungsi $ _POST digunakan untuk mengumpulkan nilai dari formulir yang dikirim dengan metode = "post". Informasi dikirimkan dari sebuah form dengan metode POST ini tidak terlihat oleh orang lain dan tidak memiliki batasan pada jumlah informasi yang dikirimkan. Tapi saat kita membuat form untuk mengupload file, untuk ukuran file yang boleh dikirim maksimal secara default adalah 8 MB. Kalau ingin bisa mengupload dengan ukuran file lebih dari 8MB, kita bisa mengaturnya pada directive post_max_size di file php.ini).

<form method="post" action="selamatdatang.php">
Nama: <input name="nama" />
Umur: <input name="umur" />
<input value="Kirim" type="submit">
</ form>

Ketika kita mengklik tombol "Kirim", informasi Nama dan Umur akan dikirimkan ke file selamatdatang.php. Pada file selamatdatang.php juga harus menggunakan fungsi $ _POST untuk menerima data formulir :

Selamat datang <?php echo $_POST["nama"];?>!

Anda <? php echo $_POST["umur"];?> Tahun.

Fungsi $_GET

Fungsi $ _GET Fungsi digunakan untuk mengumpulkan nilai dari formulir yang dikirim dengan metode = "get". Informasi dikirimkan dari sebuah form dengan metode GET dapat dilihat oleh semua orang karena nama form dan nilainya akan ditampilkan pada address bar browser. Jumlah informasi yang dikirim melalui metode "get" maksimal 100 karakter, lebih dari 100 karakter maka akan dipotong secara otomatis.

<form action="selamatdatang.php" method="get">
Nama: <input type="text" name="nama" />
Umur: <input type="text" name="umur" />
<input value="Kirim" type="submit" />
</form>

Ketika kita mengklik tombol "Kirim", URL yang dikirim ke server dapat terlihat pada address bar seperti ini:

http://sitename/selamatdatang.php?nama=Zups&umur=17

Pada file selamatdatang.php, kita gunakan fungsi $_GET untuk mengumpulkan data formulir seperti ini:

Selamat datang <? php echo $_GET["nama"];?>. <br />
Anda <? php echo $_GET["umur"];?> Tahun!

Catatan: Metode ini tidak boleh digunakan bila mengirim password atau informasi sensitif lainnya!

Fungsi $_REQUEST

Fungsi $ _REQUEST dapat menampung informasi yang dikirim dari formulir yang menggunakan metode $ _POST dan $ _GET, juga bisa menampung data $ _COOKIE. Misalnya file selamatdatang.php kita ganti fungsinya menjadi $_REQUEST.

Selamat datang <? php echo $_REQUEST["nama"];?>!

Anda <? php echo $_REQUEST["umur"];?> Tahun.
</form>

Membuat Logo Bertema "Go Green"

noreply@blogger.com (Zups) — Wed, 09 Sep 2009 19:39:26 PDT

Setelah pemanasan global mulai terasa, sekarang orang mulai berkampanye tentang menyelamatkan bumi. Pokoknya Go Green! dimanapun. Terinspirasi dari kampanye pemanasan global dan dari seorang master vector design, saya mencoba membuat desain logo bernuansa hijau dengan menggunakan CorelDraw. Kalau ada yang tertarik untuk mencoba membuatnya, saya sediakan langkah-langkahnya disini.

Langkah ke-1

Buat dokumen baru. Pilih jenis huruf yang boz sukai (saya menggunakan Arial Bold). Selanjutnya, ketik kata atau frase yang boz inginkan. Kalau saya kan mengetik CopyPaste.

Langkah ke-2

Dengan teks dalam keadaan dipilih (selected), buat Linear Gradient menggunakan tool Fountain Fill (F11) dari Panel Toolbox. Pada Type, ubah tipe gradasi menjadi Linear. Pada kotak Color Blend, warna From diisi dengan warna hijau terang (C = 40, M = 0, Y = 100, dan K = 0) dan warna To menjadi warna hijau gelap (C = 60 M = 16 Y = 100 K = 0). Pada kotak Options, ubah nilai Angle menjadi -90 derajat sehingga hasilnya adalah warna hijau terang berada di bagian atas dan warna hijau gelap berada di bagian bawah.

Langkah ke-3

Sekarang kita akan membuat desain daun. Mulailah dengan menggambar bentuk daun dengan Pen Tool (P). Jika daun sudah terbentuk, hilangkan garis tepi daun agar terlihat lebih smooth dengan mengklik menu Arrange -> Convert Outline To Object kemudian tekan tombol Delete pada keyboard.

Langkah ke-4

Sekarang kita akan memotong daun menjadi dua bagian dengan menggunakan tool Trim (klik menu Window -> Dockers -> Shaping untuk memunculkan kotak dialog Shaping). Sebelumnya copy paste dulu gambar daun menjadi dua Sehingga sekarang kita mempunyai dua buah gambar daun. Supaya lebih mudah, kita namai daun yang ke-1 menjadi daun1 dan daun yang ke-2 menjadi daun2. Buat sebuah objek mengikuti lengkungan daun1 bagian tengah dengan menggunakan Pen Tool, beri warna hitam. Tempatkan objek hitam tersebut di bagian atas daun sampai menutupi setengah bagian daun. Dengan objek hitam dalam keadaan terpilih, klik tombol Trim pada kotak dialog Shaping, kemudian klik potongan daun1 bagian atas. Nah, sekarang daun1 menjadi tinggal sepotong (bagian atasnya saja). Dengan menggunakan teknik yang sama, potong daun2 dan ambil bagian bawahnya. Supaya ukurannya lengkungnya sama dengan daun1, maka potong daun2 menggunakan potongan daun1. Sekarang kita mempunyai dua buah daun dimana daun1 hanya mempunyai daun bagian atas saja dan daun2 hanya mempunyai bagian bawahnya. Gabungkan kedua potongan daun tersebut sampai membentuk sebuah daun. Ribet ya. Dibikin dua, dipotong-potong, disatukan lagi. Tenang boz, ini berguna untuk memberikan efek gradasi pada daun nantinya.

Langkah ke-5

Sekarang kita akan menerapkan gradasi pada daun1 dan daun2 supaya terlihat realistik. Klik daun1 (yang tersisa bagian atasnya). Dngan menggunakan Fountain Fill, Ubah Angle menjadi -120 derajat untuk membuat gradasi dari sudut kanan atas ke sudut kiri bawah. Warna From (C = 40, M = 0, Y = 100, dan K = 0) dan To (C = 60 M = 16 Y = 100 K = 0) sama seperti saat membuat teks. Klik daun2. Dengan menggunakan langkah yang sama, ubah Anglenya menjadi 45 derajat.

Langkah ke-6

Buat garis melengkung pada daun1. Gunakan 3 Point Curve Tool untuk membuatnya. Tambahkan efek gradasi pada objek tersebut menggunakan Fountail Fill. Ubah Anglenya menjadi -83.6 derajat dan pada Color Blend pilih Custom.

Langkah ke-7

Saatnya membuat tetesan air di atas daun. Gunakan Ellipse Tool untuk membuat gambar berbentuk oval. Gunakan Fountain Fill untuk membuat gradasi warnanya. Ubah Edge Pad menjadi 20, Type=Linear.

Buat gambar berbentuk oval yang lebih kecil dari gambar oval sebelumnya dengan menggunakan Ellipse Tool. Beri warna yang lebih terang dari oval sebelumya. Gunakan Fountain Fill untuk membuat gradasi warnanya dan tempatkan di atas oval yang lebih besar. Atur posisinya seperti yang terlihat pada gambar di bawah ini.

Copy paste oval yang lebih terang tersebut sebanyak dua kali dan tempatkan di atas oval yang lebih terang tadi. Hasilnya kira-kira seperti ini:

Langkah ke-8

Sekarang kita akan membuat kumbang. Dengan menggunakan Ellipse Tool, buat dua buah lingkaran dengan warna merah dan merah tua. Buat gambar berbetuk oval, beri warna hijau. Tempatkan oval hijau di atas lingkaran yang berwarna merah tua. Potong lingkaran merah tua oleh oval hijau dengan menggunakan Trim Tool pada Kotak Shaping. Setelah lingkaran merah tua terpotong bagian atasnya, gabungkan dengan lingkaran merah. Gabungkan dua buah lingkaran tersebut dengan mengklik menu Arrange -> Group.

Selanjutnya kita akan membuat beberapa bentuk oval pada tubuh kumbang. Buat beberapa lingkaran kecil dan beri warna hitam. Tempatkan lingkaran kecil tersebut pada lingkaran merah yang telah di-Group sebelumnya. Gunakan Intersect Tool pada kotak Shaping untuk memotong sebagian lingkaran hitam. Tambahkan sebuah lingkaran berwarna hitam sebagai kepala kumbang dan tempatkan di luar lingkaran merah. Tambahkan juga dua buah antena pada kepala kumbang. Untuk membuat antena, gunakan 3 Point Curve Tool dan beri warna hitam. Setelah kumbang selesai dibuat, kemudian gabungkan (Arrange -> Group).

Langkah ke-9

Gabungkan kumbang dengan daun yang telah dibuat. Hasilnya seperti ini:

Penyelesaian akhir

Buat kerikil dengan menggunakan Ellipse Tool. Tambahkan efek gradasi Radial dengan warna From hitam dan warna To coklat. Copy paste sebanyak mungkin dan tempatkan di bagian bawah teks CopyPaste. Tempatkan daun dan tetesan air pada beberapa teks. Agar teks terlihat seperti sebuah pohon, tambakan cabang di beberapa teks dengan menggunakan 3 Point Curver Tool dan meri warna yang sesuai dengan warna teks. Buat kotak persegi panjang dan beri warna hijau (C:41, M:12 Y:98, K:0), beri gradasi Radial dan tempatkan sebagai latar belakang. Hasil akhirnya seperti ini:

Download file .cdr

Sintak XHTML

noreply@blogger.com (Zups) — Sun, 13 Sep 2009 20:00:27 PDT

Pada XHTML Intro, penulisan elemen-elemen XHTML mempunyai beberapa aturan. Begitu pula saat kita menuliskan atribut-atribut yang berada didalam elemennya. Ini aturannya:

1. Nama atribut harus dalam huruf kecil (lowercase)

Mungkin boz terbiasa membuat desain layout menggunakan Photoshop, kemudian dipotong-potong menggunakan Slice Tools dan disimpan (Save For Web). Biasanya file HTML yang dihasilkan mengandung atribut-atribut yang ditulis dengan huruf kapital. Pokoknya tidak memenuhi aturan XHTMl deh. Misalnya seperti contoh dibawah ini, akan kita edit satu per satu kesalahannya sampai menjadi sebuah dokumen XHTML yang valid.

<HTML>
<HEAD>
<TITLE>TargetPreview</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<IMG SRC="TargetPreview.gif" WIDTH=342 HEIGHT=342 ALT="">
</BODY>
</HTML>

Contoh di atas tentu menyalahi aturan yang diberlakukan XHTML. Aturan yang ke-1 yaitu nama atribut harus dalam huruf kecil (lowercase). Menurut aturan yang ke-1, elemen-elemen kode diatas seharusnya seperti ini:

<html>
<head>
<title>TargetPreview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body> bgcolor=#FFFFFF leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<img src="TargetPreview.gif" width=342 height=342 alt=""> 
</body>
</html>

2. Nilai Atribut harus di dalam tanda kutip dua ("")

Kita lihat contoh sebelumnya yang telah mengalami perbaikan dengan mengganti semua nama elemen menjadi huruf kecil. Perhatikan pada nilai-nilai atributnya yang sebagian besar tidak disertai tanda kutip. Hal tersebut tentu saja menyalahi aturan XHTML. Karena contoh di atas masih salah, berarti harus kita edit lagi ya boz. Seperti ini seharusnya:

<html>
<head>
<title>TargetPreview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="TargetPreview.gif" width="342" height="342" alt="">
</body>
</html>

3. Tidak boleh ada atribut yang diminimisasi

Pada contoh di atas tidak ada atribut yang diminimisasi. Makanya sekarang kita tambahkan dua buah elemen yaitu elemen input yang bertipe radio dan bertipe text, yang mempunyai artibut yang diminimisasi (lihat kode di bawah ini yang berwarna biru). Kita tambahkan kedua elemen di bawah ini kepada contoh di atas:

<input type="radio" value="a" name="pilih" checked>
<input type="text" name="namadepan" disabled>

Sehingga kodenya secara keseluruhan menjadi seperti ini:

<html>
<head>
<title>TargetPreview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="TargetPreview.gif" width="342" height="342" alt="">
<input type="radio" value="a" name="pilih" checked>
<input type="text" name="namadepan" disabled>
</body>
</html>

Kode di atas tentu saja masih salah karena masih mengandung atribut yang diminimisasi yaitu checked dan disabled. Berarti kode di atas harus kita edit lagi? Tentu saja. Harusnya seperti ini boz:

<html>
<head>
<title>TargetPreview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="TargetPreview.gif" width="342" height="342" alt="">
<input type="radio" value="a" name="pilih" checked="checked">
<input type="text" name="namadepan" disabled="disabled">
</body>
</html>

Di bawah ini adalah daftar artibut yang biasa diminimisasi pada HTML 4.01

4. Atribut name harus diganti dengan atribut id

Sejauh ini kode kita sudah mengandung nama atribut yang ditulis dalam huruf kapital, nilai-nilai atribut sudah berada di dalam tanda kutip dua, dan tidak ada lagi atribut yang diminimisasi. Tapi contoh di atas masih belum memenuhi aturan XHTML karena masih ada atribut name, seharusnya kan atribut name diganti oleh atribut id. Tapi untuk sementara, agar kode HTML kita bisa tetap beroperasi dengan browser lama, gunakan kedua nama dan id dengan nilai yang sama. Berarti sekarang kodenya harus seperti ini ya:

<html>
<head>
<title>TargetPreview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="TargetPreview.gif" width="342" height="342" alt="">
<input type="radio" value="a" name="pilih" id="pilih" checked="checked">
<input type="text" name="namadepan" id="namadepan" disabled="disabled">
</body>
</html>

Setelah kita edit, ternyata kode di atas masih belum memenuhi aturan XHTML. Sudah sejauh ini masih ada yang salah? Yup! Kita menuju ke aturan XHTML yang ke-5.

5. Elemen XHTML DTD harus didefinisikan sebelum elemen <html>

Semua dokumen XHTML harus diawali dengan deklarasi DOCTYPE dan disimpan sebelum elemen <html>. Contoh yang kita edit sejauh ini tidak memiliki deklarasi DOCTYPE diatasnya. Ini berarti kode kita belum memenuhi aturan XHTML. Lalu bagaimana seharusnya? Harusnya seperti ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TargetPreview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="TargetPreview.gif" width="342" height="342" alt="">
<input type="radio" value="a" name="pilih" id="pilih" checked="checked">
<input type="text" name="namadepan" id="namadepan" disabled="disabled">
</body>
</html>

Lho ko elemen meta dan img masih berwarna biru? Apakah masih salah cara penulisannya? Ingat, meta dan img adalah elemen kosong dan tetap harus ditutup dengan menambahkan tanda "/" sebelum tanda ">". Agar dokumen XHTML kita kompatibel dengan browser sekarang, tambahkan spasi sebelum tanda "/".

Nah, setelah banyak mengalami pengeditan, akhirnya dokumen XHTML kita telah memenuhi aturan XHTML. Seperti ini kodenya:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TargetPreview</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="TargetPreview.gif" width="342" height="342" alt="" />
<input type="radio" value="a" name="pilih" id="pilih" checked="checked">
<input type="text" name="namadepan" id="namadepan" disabled="disabled">
</body>
</html>

Catat ya: deklarasi DOCTYPE bukanlah bagian dari dokumen XHTML itu sendiri dan bukan merupakan elemen XHTML. Atribut xlmns pada elemen <html> digunakan untuk menetapkan xml namespace dan diperlukan dalam dokumen XHTML. Namun, HTML validator di w3.org tidak masih memperbolehkan walaupun kita tidak menyertakan atribut xmlns. Hal ini karena namespace "xmlns = http://www.w3.org/1999/xhtml" adalah default, dan akan ditambahkan ke tag <html> walaupun kita tidak menyertakannya.

XHTML Intro

noreply@blogger.com (Zups) — Thu, 03 Sep 2009 17:17:27 PDT

XHTML singkatan dari Extensible HyperText Markup Language. XHTML adalah versi yang lebih ketat dan bersih dari HTML 4.01, dalam arti tidak lagi penulisan elemen, atribut, dan nilai atribut yang salah dalam membuat sebuah dokumen HTML. Sebelum memahami lebih jauh nih tentang XHTML, boz harus sudah paham dengan pembuatan dokumen HTML. Kenapa? Karena XHTML kan versi selanjutnya dari HTML. Bahkan XHTML berisi semua elemen dalam HTML 4.01.

Kenapa harus menggunakan XHTML?

Lha, masih nanya. Kalau tidak penting, tidak akan dibahas disini boz. Kalau kita browsing, banyak sekali dokumen HTML dibuat dengan HTML yang "buruk". Seperti ini misalnya:

<html>
<body>
<h1>Lorem ipsum dolor sit amet
</body>
</html>

Saat ini membuka halaman web kan tidak harus memakai PC atau laptop, bisa juga menggunakan ponsel atau perangkat kecil lainnya. Browser yang berjalan pada ponsel dan perangkat kecil lainnya tidak mempunyai kekuatan dalam menerjemahkan sebuah dokumen HTML yang buruk sehingga bisa saja dokumen yang boz buat tidak bisa ditampilkan di ponsel. Oleh karena itu migrasi dari HTML ke XHTML adalah jalan terbaik untuk menghasilkan sebuah dokumen yang "well-formed". XHTML sendiri adalah kombinasi antara HTML 4.01 dengan XML yang mempunyai aturan penulisan yang ketat.

Berikut ini adalah beberapa perbedaan antara HTML dengan XHTML sekaligus sebagai aturan dalam penulisan dokumen XHTML.

1. Semua elemen XHTML harus bersarang dengan benar

Contoh di bawah ini membuat dokumen dicetak tebal dan miring, tapi masih salah dalam penulisannya.

<b><i>Lorem ipsum dolor sit amet</b></i>

Karena contoh di atas masih salah makanya harus kita edit jadi seperti ini boz:

<b><i>Lorem ipsum dolor sit amet</i></b>

Saat kita membuat sebuah list dengan orderlist (<ol>) atau unorderlist (<ul>), karang lupa dalam menutup tag <li> saking banyaknya list yang kita buat. Apalagi kalau bersarang, misalnya di dalam tag <li> ada tag <ul> dan seterusnya. Seperti contoh di bawah ini:

<ul>
  <li>Susu</li>
  <li>Kopi
    <ul>
      <li>Kopi tubruk</li>
      <li>Kopi susu</li>
    </ul>
  <li>Teh</li>
</ul>

Coba perhatikan boz, apanya yang salah ya. Tidak ketemu? Iya, yang berwarna merah tidak bersarang dengan benar. Elemen <li> untuk Kopi tidak ditutup dibawahnya. Harus kita edit ini boz. Contoh yang benar seperti ini:

<ul>
  <li>Susu</li>
  <li>Kopi
    <ul>
      <li>Kopi tubruk</li>
      <li>Kopi susu</li>
    </ul>
</li>
  <li>Teh</li>
</ul>

2. Semua elemen XHTML harus selalu ditutup

Kita kadang lupa untuk menutup elemen HTML. Kita? Situ kali. Iya, iya. Siapapun deh. Kan kadang-kadang lupanya juga. Tapi lupa dalam menulis kode program bisa fatal akibatnya. Betul kan boz? Untung disini yang dibahas tentang HTML, jadi masih ada tolerasi untuk sedikit kesalahan. Tapi tidak untuk XHTML ya boz. Sedikit kesalahan, tagnya lupa ditutup misalnya, tetap saja salah. Kita lihat contoh yang salah di bawah ini:

<p>Lorem ipsum dolor sit amet

Contoh di atas sudah jelas salah ya boz. Harusnya seperti ini:

<p>Lorem ipsum dolor sit amet</p>

Lalu bagaimana dengan elemen kosong seperti <meta<, <br<, <hr<, dan <img<? Tetap harus ditutup boz. Kan tag-tag tersebut tidak ada tag penutupnya. Memang tidak ada tag penutupnya, namanya juga elemen/tag kosong. Tapi pada XHTML tetap harus ditutup. Lihat contoh di bawah ini yang belum ditambahkan penutup:

<html>
<head>
<title><title>
<meta>
<head>
<body>
Lorem ipsum dolor sit amet<br>
Sebuah Horizontal rule<hr>
Sebuah gambar <img src="gambar.gif" />
</body>
</html>

Lalu bagaimana cara menutupnya? Caranya seperti ini, tambahkan tanda "/" dan spasi sebelum tanda ">". Jadi contoh di atas kalau kita perbaiki harusnya seperti ini:

<html>
<head>
<title><title>
<meta />
<head>
<body>
Lorem ipsum dolor sit amet <br />
Sebuah Horizontal rule <hr />
Sebuah gambar <img src="gambar.gif" />
</body>
</html>

3. Penulisan elemen dan artibut XHTML harus dalam huruf kecil (lowercase)
Contoh di bawah ini masih salah. Cari tahu boz apanya yang salah.

<BODY>
<IMG SRC="gambar.gif" />
</BODY>

Yup! Betul boz. Penulisan tag <BODY> dan <IMG SRC="" /> masih salah karena tidak menggunakan huruf kecil. Contoh yang betul adalah seperti ini:

<body>
<img src="gambar.gif" />
</body>

4. Dokumen XHTML harus memiliki satu root elemen

Semua elemen XHTML harus bersarang di dalam elemen root <html> dan elemen child harus berpasangan dan bersarang dengan benar di dalam elemen root <html>.

Penggunaan ID dan Class

noreply@blogger.com (Zups) — Wed, 02 Sep 2009 20:02:00 PDT

Unsur-unsur (tag) dasar seperti <h1>, <p> dan <ul> sering digunakan untuk membeda-bedakan layout pada sebuah dokumen HTML/XHTML. Misalnya tag <h1> kita gunakan untuk judul sehingga bisa dibedakan dengan konten. Tapi tag-tag dasar tidak bisa mencakup segala bentuk tata letak dokumen. Oleh karena itulah kita perlu menggunakan ID atau Class sebagai solusinya.

Misalnya kita mempunyai beberapa data dan disimpan dalam bentuk list <ul>.

<html>
<head>
<title>Penggunaan ID dan Class</title>
</head>

<body>
<ul>
<li>Google</li>
<li>Yahoo!</li>
<li>MSN</li>
<li>AltaVista</li>
</ul>
</body>
</html>

Secara default, list akan ditampilkan dalam bentuk bullet/disc.

Google
Yahoo!
MSN
AltaVista

Dengan menggunakan ID atau Class, kita bisa mengganti desain list menjadi bentuk lainnya. Contoh di bawah ini menggunakan class:

<html>
<head>
<title>Penggunaan ID dan Class</title>
<style>
.nav { list-style-type:lower-greek;}
</style>
</head>

<body>
<ul class="nav">
<li>Google</li>
<li>Yahoo!</li>
<li>MSN</li>
<li>AltaVista</li>
</ul>
</body>
</html>

Hasilnya seperti ini:

Google
Yahoo!
MSN
AltaVista

Dengan menggunakan ID, kita juga bisa melakukan hal yang sama. Dalam beberapa hal, ID dan Class mempunyai fungsi yang sama. Lalu, adakah perbedaan antara ID dengan Class?

ID itu unik

Setiap elemen hanya dapat memiliki satu ID
Setiap halaman hanya dapat memiliki satu elemen dengan ID tertentu

Kedua item di atas bisa juga dikatakan sebagai aturan dalam penggunaan ID pada sebuah elemen HTML. Jika kita melanggar salah satu aturan di atas, misalnya menggunakan ID yang sama pada lebih dari satu elemen, maka kode kita tidak akan lolos validasi W3C.

Class itu tidak unik

Kita dapat menggunakan kelas yang sama di beberapa elemen.
Kita dapat menggunakan beberapa kelas pada elemen yang sama.

Jika kita memang perlu menerapkan sebuah styles yang sama pada beberapa elemen maka gunakanlah Class. Contohnya seperti ini:

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

Bahkan dengan Class, kita bisa menambahkan beberapa class pada sebuah elemen. Misalnya:

<div class="widget kecil"></div>

ID mempunyai fungsionalitas khusus pada browser, sedangkan Class tidak.

Misalnya boz memiliki URL seperti http://domainboz.com#komentar, browser akan mencoba menemukan elemen dengan ID "komentar" dan akan secara otomatis akan menggulung halaman untuk menunjukkan elemen tersebut.

Elemen dapat memiliki keduanya

Sebuah elemen dapat memiliki ID dan Class sekaligus. Ini sangat bagus boz, karena boz bisa menerapkan Class untuk membuat style pada teksnya sementara ID bisa digunakan sebagai acuan untuk menuju ke arah elemen tersebut.

<li id="comment-27299" class="item">

Mereset Margin dan Padding pada Website

noreply@blogger.com (Zups) — Mon, 31 Aug 2009 19:41:23 PDT

Secara default, jarak margin dan padding telah ditambahkan pada saat kita membuat layout website.

Sebetulnya apa sih perbedaan margin dan padding?

Saya pikir boz tidak akan menanyakan itu. Margin dan padding memang dapat membingungkan bagi web desainer pemula. Lagi pula, dalam beberapa hal, margin dan padding tampak seperti hal yang sama: ruang putih di sekeliling gambar atau objek. Ok, saya jelaskan yah.

Margin adalah ruang kosong di luar border, antara border dan unsur-unsur lain di samping objek ini. Dalam sebuah gambar misalnya, margin adalah wilayah di luar seluruh objek. Margin berjalan mengelilingi bagian luar sebuah objek: ada margin di atas, bawah, kanan, dan kiri.

Padding adalah ruang di antara border dan gambar yang sebenarnya atau isi sel. Perhatikan bahwa padding berjalan mengelilingi isi: ada padding di bagian atas, bawah, kanan dan kiri.

Terkadang, pada saat membuat layout (template) sebuah website, kita tidak membutuhkan ruang kosong yang ditimbulkan oleh margin atau padding. Masalahnya adalah semua objek, baik teks atau gambar yang ditampilkan, secara default mempunyai jarak margin dan padding. Kita mungkin bisa aja mereset margin atau padding pada masing-masing objek. Tapi itu terlalu lama. Ini dia trik yang lebih cepat dan sederhana dalam menghilangkan ruang yang ditimbulkan oleh margin atau padding:

* {
margin: 0;
padding: 0;
}

Kode CSS di atas telah menjadi teknik yang sangat populer akhir-akhir ini, dan untuk alasan yang baik. Teknik ini akan menghapus semua default margin dan padding untuk setiap objek pada halaman. Hasilnya adalah sebuah tampilan website yang bersih dan rapi.

Penerapan Background pada CSS

noreply@blogger.com (Zups) — Mon, 31 Aug 2009 03:45:20 PDT

Ada beberapa properti CSS yang digunakan untuk menentukan efek latar belakang suatu elemen HTML, antara lain:

background-color
background-image
background-repeat
background-attachment
background-position

Background Color

Properti background-color digunakan untuk menentukan warna latar belakang dari suatu elemen. Kalau kita ingin memberi warna background pada halaman maka harus didefinisikan di dalam body. Contohnya seperti ini boz:

body {background-color:#b0c4de}

Penerapan background-color bisa menggunakan beberapa cara, yaitu:

menggunakan nama warna seperti "blue"
Nilai RGB seperti "rgb(255,0,0)"
Nilai heksadesimal seperti "#ff0000"

Lihat contoh di bawah ini. Elemen p dan elemen span memiliki warna latar belakang yang berbeda:

p {background-color:#e0ffff}
div {background-color:#b0c4de}

Background Image

Properti background-image digunakan untuk menetapkan sebuah gambar untuk digunakan sebagai latar belakang suatu elemen. Secara default, jika gambarnya lebih kecil dari halaman HTML-nya maka gambar akan diulang secara horizontal dan vertikal sampai memenuhi seluruh elemen. Gambar latar belakang untuk halaman dapat diatur seperti ini:

body {background-image:url('paper.gif')}

Misalkan kita ingin agar gambar background hanya ingin diulang secara horizontal (repeat-x), maka sintaknya seperti ini:

body{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Gimana kalau kita punya gambar yang kecil dan ingin dijadikan background tapi background-nya tidak mau sampai berulang baik secara horizontal maupun vertikal. Ditambah lagi misalnya posisinya ingin berada disebelah kanan atas. Nah loh, gimana caranya tuh boz. Gampang. Untuk mengatur posisi gambar gunakan properti background-position. Coba lihat contohnya di bawah ini:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;
}

Kita lihat, contoh di atas terlihat terlalu panjang karena banyaknya properti. Kalau terlalu panjang, ya kita pendekkan aja cara penulisannya boz. Gunakan properti background (tanpa embel-embel image atau repeat). Gini caranya:

body {background:#ffffff url('img_tree.png') no-repeat top right}

Berikut ini adalah urutan jika boz mau menggunakan cara yang lebih pendek:

background-color

background-image

background-repeat

background-attachment

background-position

Gak masalah kalau misalnya kita hilangkan salah satu properti di atas. Misalnya background-color tidak disertakan pada CSS yang boz buat. Yang harus diperhatikan adalah urutan letak propertinya.

Dynamic Banner dengan CSS Sprite

noreply@blogger.com (Zups) — Wed, 02 Sep 2009 18:33:47 PDT

Terkadang kita melihat banner yang bisa berubah-ubah pada sebuah website. Kemudian kalau kita sorot banner tersebut dengan pointer maka gambar bannernya bisa berubah. Biasanya banner-banner tersebut berformat .swf. Ternyata bisa juga membuat banner serupa yang dinamis tapi menggunakan dua buah gambar dengan bantuan CSS sprite. Kalau ada yang udah tau gimana cara membuatnya, gak usah lanjutin baca artikel ini. Langsung aja baca artikel lainnya. kalau masih tertarik, ingin tau cara membuatnya. Lanjutkan!!!

CSS sprites adalah teknik yang powerful yang dapat digunakan untuk membuat rollover buttons, dynamic banners, dan lainnya sehingga membuat website kita lebih interaktif. Untuk artikel ini kita gunakan dua buah file .jpg, file HTML, dan file .css. Kali ini file CSS-nya kita pisahkan dari file HTML, dengan kata lain CSS-nya dipanggil dari file CSS eksternal. Tahap-tahapnya seperti ini:

1. download dulu kedua file gambarnya disini atau gunakan file-file gambar yang boz punya.
2. buat file HTML. Berikut ini adalah kode HTML-nya:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Sample Banner using CSS</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}

h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}

#bannercontainer{
width: 400px;
height: 100px;
padding: 0;
margin-left: auto;
margin-right: auto;
background: #eee;
border: 1px solid #000;
}

#bannercontainer a{
display: block;
width: 400px;
height: 100px;
padding: 0;
background: #eee url(dynamic_banner_images/banner1.jpg) 0 0 no-repeat;
}

#bannercontainer a:link,a:visited{
background: #eee url(dynamic_banner_images/banner1.jpg) 0 0 no-repeat;
}

#bannercontainer a:hover{
background: #eee url(dynamic_banner_images/banner2.jpg) 0 0 no-repeat;
}
</style>
</head>
<body>
<h1>Contoh Banner menggunakan CSS</h1>
<div id="bannercontainer"><a href=http://www.php.net
title="Download PHP now!"></a></div>
</body>
</html>

3. file CSS-nya

body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
#bannercontainer{
width: 400px;
height: 100px;
padding: 0;
margin-left: auto;
margin-right: auto;
background: #eee;
border: 1px solid #000;
}
#bannercontainer a{
display: block;
width: 400px;
height: 100px;
padding: 0;
background: #eee url(dynamic_banner_images/banner1.jpg) 0 0 no-repeat;
}
#bannercontainer a:link,a:visited{
background: #eee url(dynamic_banner_images/banner1.jpg) 0 0 no-repeat;
}
#bannercontainer a:hover{
background: #eee url(dynamic_banner_images/banner2.jpg) 0 0 no-repeat;
}

Kalau ingin mengganti gambarnya tinggal diganti nama file gambarnya dengan file gambar yang anda sukai. Cari sintak background: #eee url(dynamic_banner_images/banner1.jpg) 0 0 no-repeat;, kemudian ganti banner1.jpg dengan file yang telah anda tentukan. Jangan lupa untuk menyesuaikan letak penyimpanan gambarnya. Pada contoh ini, file gambar disimpan pada folder dynamic_banner_images. Selamat mencoba.

Apa Sebetulnya CSS Sprites dan Bagaimana menggunakannya

noreply@blogger.com (Zups) — Wed, 02 Sep 2009 18:36:35 PDT

Pernah melihat sebuah tombol yang mengunakan gambar yang sama dimana kalau disorot oleh kursor maka gambarnya akan berubah? Bagus yah. Apalagi kalau diterapkan pada website kita. Biasanya tombol-tombol seperti itu dibuat dalam bentuk file .swf. Ternyata bisa juga loh menggunakan CSS, yaitu dengan menggunakan teknik CSS sprite. Pada CSS sprite, gambar-gambar tertentu seperti icon digabungkan. Mengapa menggabungkan semua gambar? Bukankah lebih cepat untuk mendapatkan gambar yang lebih kecil?

Ya, memang kebanyakan programmer menggunakan teknik memotong gambar ke dalam ukuran yang kecil-kecil untuk meload halaman lebih cepat. Teknik seperti itu sudah ketinggalan boz. Kenapa? Sebetulnya dengan memotong-motong gambar menjadi bagian-bagian yang lebih kecil justru akan memperbanyak request HTTP ke server dan akhirnya halaman yang diload juga tetap aja lambat karena setiap gambar, apakah itu sebuah <img> tag atau background-image dari CSS akan melakukan HTTP-Request masing-masing.

Jadi bagaimana caranya menerapkan CSS sprite pada website kita?

Kirain gak tertarik boz. OK kita lanjutkan. Perhatikan CSS dibawah ini bagaimana setiap tag anchor memanggil background-image.

#nav li a.item1 {background-image:url('../img/bookmarks.jpg')}
#nav li a:hover.item1 {background-image:url('../img/bookmarks_hover.jpg')}
#nav li a.item2 {background-image:url('../img/delicious.jpg')}
#nav li a:hover.item2 {background-image:url('../img/delicious_hover.jpg')}
#nav li a.item3 {background-image:url('../img/digg.jpg')}
#nav li a:hover.item3 {background-image:url('../img/digg_hover.jpg')}
#nav li a.item4 {background-image:url('../img/technoratti.jpg')}
#nav li a:hover.item4 {background-image:url('../img/technoratti_hover.jpg')}...

Dengan menggunakan CSS Sprite, kita dapat mempercepat waktu loading website. Alih-alih membuat delapan gambar yang terpisah untuk masing-masing tombol (empat untuk gambar default dan empat untuk gambar roll-over), kita justru dapat menggabungkan semua gambar tersebut menjadi satu bagian. Saya tidak akan membahas detail tentang bagaimana hal ini dilakukan, saya akan hanya memberikan panduan dasar aja. Buat gambar yang baru selebar gambar yang akan dijadikan tombol dan tingginya kira-kira setinggi delapan gambar tersebut yang dijajarkan secara vertikal. Diantara gambar, sisakan ruang berwarna putih sebesar 1 pixel.

Kalau gambarnya sudah dibuat, perhatikan di CSS. Disitu hanya ada satu elemen anchor saja yang memanggil gambar dan yang lainnya hanya menggeser posisi koordinat Y menjadi negatif yang besarnya disesuaikan dengan besarnya gambar yang telah dibuat sebelumnya.

#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover.item1 {background-position:0px -48px;}
#nav li a.item2 {background-position:0px -96px;}
#nav li a:hover.item2 {background-position:0px -141px;}
#nav li a.item3 {background-position:0px -190px;}
#nav li a:hover.item3 {background-position:0px -236px;}
#nav li a.item4 {background-position:0px -283px;}
#nav li a:hover.item4 {background-position:0px -334px;}...

Download file contoh diatas:
File contoh sebelum menggunakan CSS Sprite
File contoh setelah menggunakan CSS Sprite

Vertical Show Hide Menu

noreply@blogger.com (Zups) — Fri, 04 Sep 2009 03:41:50 PDT

Ada yang pernah melihat barisan menu vertikal yang bisa disembunyikan dan ditampilkan? Gak tau? Wah, kemana aja boz :) Gini, misalnya kita mengunjungi sebuah website yang disamping kanannya (atau samping kiri juga terserah) terdapat banyak menu dan dibagi ke dalam beberapa bagian. Misalnya ada Main menu yang mempunyai beberapa sub menu, ada Usefull link yang mempunyai bebrapa sub menu, juga ada Friend's sites yang mempunyai banyak sub menu.

Nah, misalnya karena terlalu banyak sub menu, maka kita ingin agar menu-menu tersebut dapat disembunyikan dengan cara mengklik nama kategori menunya. Misalnya kita ingin menyembunyikan daftar menu Usefull links, tinggal klik pada Usefull links-nya maka daftar sub menu dibawahnya akan disembunyikan. udah terbayang ya sekarang? OK, kita lanjut. Agar tampilan kode menjadi lebih sederhana maka kita pisahkan antara kode HTML, CSS, dan Javascript-nya.Sekarang kita akan membuat tiga buah file. Dua buah file (CSS dan Javascript) lebih baik di download aja disini biar lebih cepat. Hehe.. Kemudian simpan ke dalam sebuah folder di komputer anda.

Sekarang kita buat file HTML-nya. Copy paste aja kodenya di bawah ini:

<html>
<head>
<title>Vertical Show Hide Menu</title>
<link rel="stylesheet" type="text/css" href="vertical_show_hide_menu.css" />
<script type="text/javascript" src="vertical_show_hide_menu.js"></script>
</head>
<body>
<h3 onClick="expandcontent('sc1')" class="title_menu">Main menu</h3>
<div id="sc1" class="switchcontent">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

<h3 onClick="expandcontent('sc2')" class="title_menu">Usefull links</h3>
<div id="sc2" class="switchcontent">
<ul>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://yahoo.com">Yahoo!</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="http://twitter.com/yoe5oep">Twitter</a></li>
</ul>
</div>

<h3 onClick="expandcontent('sc3')" class="title_menu">Friend's sites</h3>
<div id="sc3" class="switchcontent">
<ul>
<li><a href="#">Mr. Bean</a></li>
<li><a href="#">Tukul</a></li>
<li><a href="#">Budi Anduk</a></li>
<li><a href="#">Kick Andy!</a></li>
</ul>
</div>
</body>
</html>

Kalau sudah dibuat file HTML-nya, simpan di folder yang sama dengan file CSS dan Javascript-nya. Atau file HTML-nya bisa juga dibuat pada folder lainnya, tinggal menyesuaikan aja pathnya. Cari kode ini <link rel="stylesheet" type="text/css" href="vertical_show_hide_menu.css" /> untuk mengubah path (letak) file CSS. Untuk mengubah path file Javascript, cari kode ini <script type="text/javascript" src="vertical_show_hide_menu.js"></script>.

Ad Box pada Homepage

noreply@blogger.com (Zups) — Wed, 02 Sep 2009 18:39:15 PDT

Pernah berkunjung ke sebuah website dan saat pertama kali meload homepagenya muncul sebuah kotak berisi kata selamat datang (Welcome) atau berisi iklan misalnya? Bagus juga sebagai media untuk menyambut pengunjung yang melihat website kita. Bisa juga digunakan untuk mempromosikan sesuatu. Menarik bukan?! Pasti menarik lah. Kalau nggak, buat apa saya posting artikel ini. Hehehee...

Langsung saja kita buat file berkestensi HTML dan simpan dengan nama ad-box.html. Kemudian buat file berekstensi Javascript dengan nama ad-box.js. Berikut ini sintak file HTML dan Javascript.

1. ad-box.html

<html>
<head>
<title></title>

<script type="text/javascript" src="ad-box.js">

</script>
<head>
<body>
<div style="position:absolute; height:1; width:1px; top:0; left:0;visibility:hidden">
<table width="450px" height="350px" bgcolor="#999999"><tr><td>
<table width="445px" height="345px" bgcolor="#cccccc"><tr><td align="center" valign="middle">
<h1>Selamat datang sobat...</h1>
</td></tr></table></td></tr></table>
</div>
</body>
</html>

2. ad-box.js. Skripnya silakan anda download disini

Kalau kedua file di atas sudah dibuat, tinggal dites aja. Untuk mengatur durasi dalam menampilkan ad-box, buka file ad-box.js menggunakan teks editor kemudian edit bagian skrip adTime=3;. Pada contoh nilai adTime adalah 3, artinya ad-box akan ditampilkan selama 3 detik. Setelah itu akan menutup dengan sendirinya. Selamat mencoba.

Sumber:
Oleh Matt Gabbert
http://www.dynamicdrive.com

Membuat Fungsi

noreply@blogger.com (Zups) — Wed, 02 Sep 2009 18:42:26 PDT

Sekarang ini kebanyakan programmer sudah menggunakan cara Object Oriented Programming (OOP) dalam membuat program. Itu kan buat yang sudah mahir. Nah kita yang masih pemula, jangan dulu lah. Ya walaupun kita maish pemula, akan jauh lebih baik kalau mulai belajar menuju ke arah OOP. Pada OOP kan akan banyak menggunakan objek-objek class dan didalam sebuah class akan terdapat banyak fungsi yang kita buat untuk digunakan oleh file-file lainnnya dalam program. Pusing yah? Sama :) Lebih baik kita langsung saja belajar cara membuat fungsi dan cara menggunakannya.

Sebuah fungsi yang kita buat, akan dieksekusi kalau kita panggil nama fungsinya. Sebelumnya kita lihat dulu anatomi sebuah fungsi seperti di abwah ini:

function namaFungsi()
{
kode yang akan dieksekusi;
}

Tips bagaimana membuat nama fungsi yang baik:

Dalam membuat nama sebuah fungsi, sesuaikan dengan peruntukannya supaya kita tidak dipusingkan di kemudian hari. Ambil contoh begini, misalnya kita membuat sebuah fungsi untuk menghitung beberapa angka. Akan lebih mudah kalau kita buat nama fungsinya hitung(). Kemudian kita juga memerlukan sebuah fungsi
Nama fungsi harus diawali dengan karakter atau underscore (_). Contoh:

<html>
<body>
<?php
function tulisNama()
{
echo "Abdi Nagara";
}

echo "Nama saya adalah ";
tulisNama();
?>

</body>
</html>

Output dari kode di atas akan seperti ini:

Nama saya adalah Abdi Nagara

Menambahkan parameter pada sebuah fungsi

Parameter berguna untuk menambah fungsionalitas sebuah fungsi. Sebuah parameter didefinisikan setelah nama fungsi dan berada di dalam kurung. Contohnya di bawah ini akan membuat nama belakang yang sama tapi dengan nama depan yang berbeda.

<html>
<body>
<?php
function tulisNama($namadepan)
{
echo $namadepan." Nagara";
}

echo "Nama saya adalah";
tulisNama("Abdi");
echo "Adik saya adalah";
tulisNama("Cinta");
?>

</body>
</html>

Output dari kode di atas akan seperti ini:

Nama saya adalah Abdi Nagara
Adik saya adalah Cinta Nagara

Jika diperlukan, kita juga bisa menambahkan beberapa parameter pada sebuah fungsi. Misalnya pada fungsi perhitungan seperti kode di bawah ini:

<html>
<body>
<?php
function tambah($x,$y)
{
$jml=$x+$y;
return $jml;
}

echo "6 + 10 = " . tambah(6,10);
?>

</body>
</html>

Output dari kode di atas akan seperti ini:

6 + 10 = 16

Menyisipkan Gambar

noreply@blogger.com (Zups) — Wed, 02 Sep 2009 18:46:04 PDT

Sekarang kita coba belajar bagaimana menampilkan sebuah gambar pada file HTML. Gunakan tag <img /> untuk menampilkan gambar. Tag <img /> tidak mempunyai tag penutup. Atribut yang digunakan untuk menampilkan gambar adalah src (singkatan dari source). Nilai dari atribut src adalah URL tempat penyimpanan gambar.

Sintak untuk mendefinisikan gambar adalah seperti ini:

<img src="url" />

URL mengacu pada lokasi penyimpanan file yang akan ditampilkan. Contohnya seperti ini:

<html>
<body>
<p>Gambar yang diambil dari sebuah folder</p>
<img src="/images/chrome.gif" width="33" height="32"/>

<p>Gambar yang diambil dari sebuah website</p>
<img src="http://www.w3schools.com/images/w3schools_green.jpg" width="104" height="142"/>
</body>
</html>

Terkadang browser tidak dapat menampilkan gambar yang kita inginkan, entah itu karena loadingnya terlalu lama, penulisan lokasi file yang salah atau file gambarnya telah terhapus. Untuk mengantisipasi hal seperti itu, di dalam tag <img /> tambahkan atribut alt. Nilai atribut alt adalah berupa teks yang kita definisikan sendiri atau bisa juga kita isikan dengan URL gambarnya. Misalnya seperti ini:

<img src="boat.gif" alt="Big Boat" />

Menambahkan background image pada halaman HTML:

<html>
<body background="background.jpg">
</body>
</html>

Mengatur rataan sebuah gambar:

<html>
<body>
<p>Gambar <img src="hackanm.gif" align="bottom" width="48" height="48"> diantara teks</p>

<p><img src ="hackanm.gif" align="middle" width="48" height="48"> Gambar sebelum teks</p>

<p>Gambar setelah teks <img src ="hackanm.gif" align="top" width="48" height="48"></p>

<p>Gambar secara default mempunyai rataan "bottom"</p>
</body>
</html>

Misalkan kita ingin membuat sebuah link dengan menggunakan gambar. Contohnya seperti ini:

<html>
<body>
<p><a href="lastpage.html">
<img border="0" src="buttonnext.gif" width="65" height="38" />
</a></p>
</body>
</html>

Penerapan CSS pada Dokumen HTML

noreply@blogger.com (Zups) — Wed, 02 Sep 2009 18:50:48 PDT

Pada artikel sebelumnya, kita membahas tentang sintak-sintak CSS. Pertanyaannya sekarang, bagaimana penerapan sintak CSS pada tag-tag HTML? Ada tiga cara penerapan sintak CSS:

External Style Sheet

Ini adalah cara penerapan yang direkomendasikan. Kenapa? Karena dengan memisahkan sintak-sintak HTML dengan sintak-sintak CSS akan memudahkan kita dalam penggunaan CSS karena semua selector pada sebuah file CSS (berkestensi .css) dapat digunakan oleh banyak file HTML. Untuk memanggil file CSS gunakan tag <link /> dan disimpan diantara tag <head> dan </head>. Contohnya seperti ini:

<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Sebuah external style sheet tidak boleh mengandung tag-tag HTML. File CSS dapat dibuat dengan menggunakan teks editor dan disimpan dengan ekstensi .css. Jangan ada spasi antara nilai property dengan unitnya. Misalkan "margin-left:20 px", penulisan yang benar adalah "margin-left:20px". Jika spasi tetap dibiarkan maka CSS kamu hanya akan berlaku di IE dan tidak akan berjalan di Firefox atau Opera.

Internal Style Sheet

Sebuah internal style sheet disimpan dalam file HTML-nya langsung. Kelemahan internal style sheet adalah tidak bisa digunakan oleh banyak file HTML , jadi hanya berlaku untuk satu file saja. Penulisan internal style sheet yaitu diantara dengan tag <style> dan tag </style>, seperti ini:

<head>
<style type="text/css">
hr {color:black}
p {margin-left:10px}
body {background-image:url("images/top.gif")}
</style>
</head>

Catet ya, Sebuah browser biasanya akan mengabaikan tag yang tidak dikenal. Jika kita membuka sebuah file HTML pada browser versi yang lama, maka akan mengabaikan tag <style> tapi isi dari tag style (berupa sintak-sintak CSS) akan tetap ditampilkan pada browser. Cara mengantisipasinya adalah dengan menambahkan tag komentar diantara sintak-sintak CSS, seperti ini:

<head>
<style type="text/css">
<!--
hr {color:black}
p {margin-left:10px}
body {background-image:url("images/top.gif")}
-->
</style>
</head>

Inline Style Sheet

Cara ini benar-benar tidak disarankan, kecuali terpaksa. Karena dengan menggunakan cara ini berarti stylenya hanya berlaku untuk tag tertentu saja. Misalnya diterapkan pada sebuah tag p, berarti hanya berlaku pada tag p bersangkutan dan tidak berlaku apda tag p lainnya walaupun masih dalam file yang sama. Untuk menggunakan inline styles, gunakan atribut style pada tag yang relevan. Atribut style dapat berisi CSS seperti yang terlihat pada contoh di bawah ini:

<p style="color:black;margin-left:10px">Ini adalah sebuah paragraf.</p>

Sintak CSS

noreply@blogger.com (Zups) — Wed, 02 Sep 2009 19:29:47 PDT

Saatnya belajar mempercantik halaman website kita dengan CSS. CSS? Apa itu CSS? CSS singkatan dari Cascading Style Sheets, gunanya untuk mempercantik dan merapikan halaman website. Bagi kita programmer awam, memperindah tampilan website mungkin lebih mudah menggunakan software desain grafis. Konsekuensinya adalah halaman website kita jadi lama saat dibuka karena browser harus meload gambar-gambar backgroundnya. Maka gunakanlah CSS untuk menata tampilan website. Walaupun kita tidak akan terlepas dari menyisipkan gambar dalam membuat desain sebuah website, tapi kita bisa meminimalkan gambar dan lebih banyak menggunakan CSS.

Seperti apa sih bentuk kode-kode CSS? CSS juga mempunyai aturan dalam penulisan sintak-sintaknya. Sintak CSS terdiri dari tiga bagian : selector, property dan value.

selector {property:value}

Selector biasanya adalah tag HTML, atau bisa juga kita definisikan sendiri. Property adalah atribut yang dapat kita ganti nilainya sesuai keinginan seperti font, text-align dll. Value adalah nilai property yang kita ganti nilainya tadi. Lho, jadi bingung yah. Mending kita lihat langsung contohnya ya. O iya, property dan value harus berada dalam tanda kurung { } serta antara property dan value dipisahkan dengan tanda :

body {color:black}
p {font-family:"sans serif"}

Misalkan satu seelctor mempunyai beberapa property, maka dianatra property harus dibatasi oleh tanda ;

body {color:black}
p {text-align:justify;color:red;font-family:arial}

Contoh di atas berarti kita memformat sebuah paragraf dengan rataan teks justify, berwarna merah dan jenis hurufnya arial. Jika propertynya banyak, sebaiknya penulisannya satu baris per property agar bisa dibaca dengan baik.

body {color:black}
p {text-align:justify;
color:red;
font-family:arial}

Grouping

Kita bisa menggabungkan beberapa selector sekaligus yang dipisahkan dengan tanda koma. Pada contoh di bawah kita menggabungkan semua tag header dan memformat warna teksnya dengan warna biru.

h1,h2,h3,h4,h5,h6
{
color:blue
}

Dengan menggunakan class selector memungkinkan kita membuat styles yang berbeda pada tag HTML yang sama. Misalnya kita ingin memformat rataan (align) dua buah paragraf, yang satu ingin rata kiri dan yang satunya lagi ingin rata kanan. Caranya seperti ini:

p.right {text-align:right}
p.left{text-align:left}

Penerapan pada dokumen HTML-nya seperti ini:

<p class="left">Ini adalah paragraf dengan rata kiri.</p>
<p class="right">Ini adalah paragraf dengan rata kanan.</p>

Dalam satu tag HTML juga bisa mengandung dua selector. Kita ambil contoh paragraf di atas. Misalkan selain rata kiri, kita ingin semua hurufnya dicetak tebal (bold). Sintak CSS-nya seperti ini:

p.left{text-align:left}
.bold {font-weight:bold}

Penerapan pada dokumen HTML-nya seperti ini:

<p class="left bold">Ini adalah sebuah paragraf dengan rata kiri dan cetak tebal.</p>

Contoh paragraf di atas mempunyai style dengan class s "left" dan class "bold". Kita juga boleh membuat sebuah selector tanpa diawali dengan nama tag HTML. Misalnya selector p.left hanya berlaku untuk tag <p>. Kita ganti nama selectornya jadi .left maka selector ini berlaku untuk semua tag HTML pada dokumen. Pada contoh di bawah ini semua tag HTML yang mempunyai atribut class "center" maka semua teksnya akan rata tengah.

.center {text-align:center}

Pada contoh di bawah ini tag h1 dan tag p mempunyai class="center". Artinya kedua tag tersebut akan mempunyai aturan sesuai dengan isi dari class "center".

<h1 class="center">Ini adalah h1 dengan rata tengah</h1>
<p class="center">Paragraf ini teksnya juga rata tengah.</p>

Misalnya kita ingin mewarnai semua form input berjenis text dengan sebuah warna. Bisa tidak yah? Bisa dong, nih contohnya:

input[type="text"] {background-color:blue}

Id Selector.

Kita juga bisa mendefinisikan style untuk tag HTML dengan id selector. Penulisan id selector dimulai dengan tanda #. Style di bawah ini akan mengakibatkan semua tag HTML yang mempunyai atribut id="blue" akan mempunyai teks berwarna biru:

#blue{color:blue}

Jika penulisannya seperti ini:

p#blue{color:blue}

Artinya semua tag p yang mempunyai atribut id="blue" akan mempunyai teks dengan warna biru.

Catet ya, dalam menamai sebuah selector, baik class atau id, jangan menggunakan angka karena tidak akan berjalan di Mozilla. Jadi gunakan huruf saja.

Komentar pada Sintak CSS

Pada sintak CSS juga kita bisa menyisipkan komentar. Komentar akan sangat membantu jika suatu saat kita akan mengedit sebuah selector. Blok komentar pada CSS diawali dengan "/*" dan diakhiri dengan "*/". Sintaknya seperti ini:

/*ini adalah komentar*/
p{text-align:center;
/*Ini juga komentar*/
color:black;
font-family:arial
}

Variabel PHP

noreply@blogger.com (Zups) — Tue, 08 Sep 2009 22:27:52 PDT

Sebuah variabel digunakan untuk menyimpan nilai seperti string atau array. Semua variabel pada PHP diawali dengan tanda $. Kebanyakan programmer pemula sering melupakan tanda $ saat membuat sebuah variabel. Yang terjadi adalah munculnya pesan kesalahan. Ketika sebuah variabel dideklarasikan maka variabel tersebut dapat digunakan terus-menerus pada script. Berikut ini adalah cara yang benar dalam mendeklarasikan sebuah variabel.

$var_name = value;

Aturan Penamaan Sebuah Variabel

Sebuah variabel harus diawali dengan sebuah karakter atau sebuah underscore "_"

Penamaan variabel hanya boleh menggunakan karakter alpha-numeric dan underscores (a-z, A-Z, 0-9, dan _ )

Nama variabel tidak boleh mengandung spasi. Kalau kamu tetap ingin menggunakan dua buah kata dalam mendeklarasikan sebuah variabel, gunakanlah underscore ($my_string) atau pisahkan dengan huruf kapital ($myString)

Pada bahasa pemrograman lainnya, sebelum memasukkan sebuah nilai maka variabelnya harus dideklarasikan terlebih dahulu. Di PHP hal tersebut tidak diperlukan karena PHP secara otomatis akan mengkonversi sebuah variabel ke tipe data yang tepat berdasarkan nilainya.

$teks="Halo semua!";
$nilaiX=16;

Pada contoh di atas, kita lihat bahwa kita tidak harus mendeklarasikan tipe data terlebih dahulu. Dengan kata lain, PHP mendeklarasikan tipe data saat kita menggunakannya.

Sintak Dasar PHP

noreply@blogger.com (Zups) — Tue, 08 Sep 2009 22:25:12 PDT

Bagaimana kode PHP bekerja? Saat kita membuka file PHP di browser, kode PHP dieksekusi di server kemudian dikirim ke browser dalam bentuk HTML. Sebuah kode PHP dimulai dengan blok <?php dan ditutup dengan ?>. Kode PHP juga fleksibel, dapat disisipkan dimana saja pada file PHP.

Kode pembuka PHP juga bisa menggunakan blok yang pendek seperti <? dengan menghilangkan kata php, ini bisa berjalan jika server mensupport. Tapi untuk mendapatkan kompatibilitas yang maksimum, disarankan menggunakan format yang standar.

<?php
?>

Sebuah file PHP biasany disisipkan pada tag-tag HTML.

<html>
<body>

<?php
echo "Halo dunia!";
?>

</body>
</html>

Ada dua perintah dasar untuk menampilkan teks dengan PHP, yaitu echo dan print. Pada contoh di atas, kita menggunakan perintah echo untuk menampilkan teks "Halo dunia!" pada browser.

Catet: File harus berekstensi .php, karena jika filenye berekstensi .html maka blok skrip PHP diatas tidak akan dieksekusi.

Terkadang kita harus menambahkan komentar pada skrip PHP yang kita buat sebagai penjelasan jalannya program. Pertanyaannya, bagaimana menambahkan satu atau beberapa baris komentar pada file php?

<html>
<body>

<?php
//Ini adalah komentar dalam satu baris

/*
Ini adalah komentar
dalam
beberapa baris
*/
?>

</body>
</html>

Sebelum memulai belajar PHP

noreply@blogger.com (Zups) — Sun, 23 Aug 2009 00:32:56 PDT

Ada yang sudah tau apa itu PHP? Kalau sudah, silakan lanjutkan ke paragraf selanjutnya. Kalau belum tau, nih saya beri tau. PHP adalah bahasa pemrograman open-source berbasis server dimana skrip akan dieksekusi pada server kemudian dikirim ke client, pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Tidak usah panjang lebar membahas sejarah PHP yah, karena ini tutorial bukan pelajaran sejarah.

Sebelum mulai belajar PHP, sebaiknya kamu belajar HTML/XHTML terlebih dahulu karena skrip-skrip PHP tidak akan terlepas dari tag-tag HTML.

Supaya kita lebih semangat dalam mempelajari PHP, pastinya ingin tau dong apa keunggulan PHP dibanding dengan bahasa pemrograman sejenis. Ini dia keunggulan-keunggulannya.

PHP dapat dijalankan di banyak platforms (Windows, Linux, Unix, dsb.).

PHP sekarang kompatibel dengan semua server (Apache, IIS, dsb.)

PHP gratis dan dapat didownload pada website resmi PHP (http://php.net). Karena PHPbersifat open source maka banyak pengembang yang berkontribusi memperbaiki bug-bug yang ada sehingga dapat memperbaiki kemampuan PHP kedepannya.

PHP mudah dipelajari dan berjalan dengan efisien pada server sehingga komputer tidak akan menjadi lemot.

PHP mendukung banyak dabatase (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, dsb.)

Apa yang dibutuhkan sebelum mempelajari PHP?

Kamu butuh web server dan PHP. Kalau server yang terinstall di komputer kamu sudah mensupport PHP, tinggal buat saja file .php pada direktori web kamu. Karena gratis, kebanyakan penyedia layanan web hosting sudah mensupport PHP.

Tapi kalau server kamu tidak mensupport PHP, berarti kamu harus menginstall PHP.

Tutorial bagaimana menginstall PHP dapat kamu lihat disini http://www.php.net/manual/en/install.php

Download PHP gratis di http://www.php.net/downloads.php

Download Apache gratis di http://httpd.apache.org/download.cgi

Jadi, tunggu apa lagi? Mudah dipelajari dan gratis. Teriakan dalam hati, "Mulai belajar PHP sekarang!"

Link pada HTML

noreply@blogger.com (Zups) — Thu, 03 Sep 2009 03:41:19 PDT

Sebuah link pada website sama aja seperti alamat di dunia nyata. Dengan link kita akan diarahkan ke halaman tertentu atau bagian dokumen lainnya. Link pada HTML didefinisikan oleh tag <a>. Sintaknya seperti ini :

<a href="url">Link teks</a><br />

Tag pembuka berisi atribut href yang akan mengarahkan ke lokasi sesuai dengan isi dari atribut href. Selain teks, gambar juga bisa kita gunakan sebagai link. Kita lihat contoh dibawah ini :

<html>
<body>
<p>
<a href="index.html"> Teks ini</a> adalah sebuah link ke halaman lain pada website ini.<br />Sedangkan <a href="http://www.mozilla.com/"> Teks ini</a> adalah sebuah link ke website lain.
</p>
</body>
</html>

Hasilnya seperti ini

Teks ini adalah sebuah link ke halaman lain pada website ini.
Sedangkan Teks ini adalah sebuah link ke website lain.

Gimana caranya membuat sebuah link yang kalau kita mengkliknya akan diarahkan ke jendela browser yang baru? Lihat contoh sintak di bawah ini :

<html>
<body>
<a href="http://www.mozilla.com/" target="_blank">Home</a>
<p>
Jika kita set "_blank" target atribut sebuah link maka akan membuka jendela browser yang baru.
</p>
</body>
</html>

Nih hasilnya

Home

Jika kita set "_blank" target atribut sebuah link maka akan membuka jendela browser yang baru.

Nah, sekarang gimana caranya membuat link yang mengarah ke lokasi lain tapi masih di halaman yang sama? Lihat sintak di bawah ini:

<html>
<body>
<a href="#3" target="_blank">Lihat juga Bab 3</a>
<p>
<b>Bab 1</b><br /><br />Lorem ipsum dolor sit amet
</p>
<p>
<b>Bab 2</b><br /><br />Lorem ipsum dolor sit amet
</p>
<p>
<a name="3"><b>Bab 3</b></a><br /><br />Lorem ipsum dolor sit amet
</p>
</body>
</html>

Dan hasilnya seperti ini

Lihat juga Bab 3

Bab 1
Lorem ipsum dolor sit amet

Bab 2
Lorem ipsum dolor sit amet

Bab 3
Lorem ipsum dolor sit amet

Download contoh-contoh link HTML