Recent Articles

Tuesday, January 19, 2010

Mengubah Dropdown List dengan Ajax dan PHP

Tuesday, January 19, 2010 - 2 Comments


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


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 :



Monday, September 21, 2009

Ganti Tombol Submit dengan Gambar

Monday, September 21, 2009 - 3 Comments

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.

Thursday, September 17, 2009

Kombinasi Sintak Regular Expression dengan PHP Reg Ex Functions

Thursday, September 17, 2009 - 0 Comments

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

Tuesday, September 15, 2009

Membuat Koneksi Multipel Database dengan ADOdb Library

Tuesday, September 15, 2009 - 0 Comments

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?
  1. Bagi programmer Windows akan lebih mudah dalam penggunaannya karena dengan Microsoft ADO.
  2. ADOdb memberikan dukungan dalam menangani manipulasi database dan dapat diadaptasi ke banyak database.
  3. Mempunyai sistem metatype built-in sehingga kita dapat mengetahui jenis data seperti Char, String dan walaupun dalam database berbeda.
  4. 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

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.";
}
?>

Sunday, September 13, 2009

PHP: Membuat dan menangani form

Sunday, September 13, 2009 - 0 Comments

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>

Tuesday, September 8, 2009

Membuat Logo Bertema "Go Green"

Tuesday, September 8, 2009 - 1 Comment


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.

Read more »

Wednesday, September 2, 2009

Sintak XHTML

Wednesday, September 2, 2009 - 0 Comments

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

Daftar atribut yang diminimisasi

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

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>.

Monday, August 31, 2009

Penggunaan ID dan Class

Monday, August 31, 2009 - 0 Comments

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

  1. Setiap elemen hanya dapat memiliki satu ID
  2. 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

  1. Kita dapat menggunakan kelas yang sama di beberapa elemen.
  2. 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


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.

© 2013 CoPas Galeria. All rights reserved.
Designed by SpicyTricks