Berita:

Projek aktif: RPG OJ v0.3
Projek sampingan: Zion TCG, SETH
Projek ditunda: Tales of Another Journey

Main Menu

Buat Web yuk! (PHP + MySQL)

Dimulai oleh Èxsharaèn, 21 Oktober 2008, 01:26:49

« sebelumnya - berikutnya »

0 Anggota dan 1 Pengunjung sedang melihat topik ini.

Èxsharaèn

Sudah bisa bikin Web sendiri? Pastinya ya :) nah, sekarang kita akan melanjutkan perjalanan dengan mempelajari pembuatan Web dinamis. Dinamis di sini maksudnya adalah dapat berubah sesuai kebutuhan. Misalnya, perhatikan saja bahwa isi halaman forum ini berubah sesuai dengan konteksnya; forum ini adalah salah satu dari milyaran Web dinamis. Sebaliknya, situs yang isinya tetap itu-itu saja disebut Web statis; contohnya adalah situs RPGFWID sendiri.

Jadi, apa saja yang kita perlukan untuk membuat sebuah Web dinamis? Ada banyak jalan sebenarnya, tapi intinya kita butuh pemrograman Web lebih lanjut, tidak sekedar XHTML dan CSS saja. Sebelum itu, aku perkenalkan dua istilah dulu: client dan server. Client adalah kita, yang meminta sebuah halaman Web, sementara server adalah komputer yang memproses permintaan kita dan mengembalikan apa yang kita mau. Dengan demikian, ada 2 macam pemrograman Web:

1. Client-side programming
Pemrograman Web ini dilakukan di sisi klien (kita), jadi setelah kita mendapatkan halaman Web yang kita mau, komputer kita nanti akan dapat melakukan proses lebih lanjut. Contoh paling mudah, pernah tidak saat mengisi password, petunjuk kekuatan password berubah sendiri? Itu dapat dilakukan menggunakan client-side programming. Kelebihan pemrograman cara ini adalah prosesnya dilakukan di komputer klien, jadi server tidak terbebani pekerjaan ekstra. Kelemahannya, coding kita dapat dilihat siapa saja (menggunakan View Source di seluruh peramban).

Ironisnya, kadang-kadang pemrograman sisi-klien ini disalahgunakan untuk menginvasi komputer kita, misalkan mengeluarkan pop up yang mengganggu, atau menginstal sesuatu dengan diam-diam. Yup, ini adalah JavaScript dan VBScript. VBScript hanya dapat berjalan di Windows (karena memang ini bikinannya Microsoft), sementara JavaScript dapat berjalan di mana saja, selama perambannya mendukung dan mengaktifkan fitur ini. Namun, dengan penggunaan yang tepat, pemrograman sisi-klien dapat digunakan untuk mempermudah banyak hal. Bahkan, kini pemakaiannya digabungkan dengan pemrograman sisi-server, yang dikenal dengan AJAX (Asynchronous JavaScript And XML), tapi untuk sekarang kita tidak bahas.

2. Server-side programming
Kebalikannya, pemrograman ini dilakukan di sisi server. Saat kita meminta halaman Web ke server, server akan melihat apakah ada pemrograman yang perlu dilakukan. Jika ada, server akan memprosesnya, mengeluarkan hasilnya, baru hasilnya dikembalikan ke kita. Contoh yang paling populer adalah melakukan registrasi akun baru, mengisi komentar, dsb.. Kelebihan pemrograman ini, coding-nya tidak dapat terlihat oleh klien (kita hanya dapat HTML hasil prosesnya). Kelemahannya, kalau programnya tidak efisien, server dapat terbebani sehingga dapat mengganggu lalu lintas situs Web yang lain.

Contoh pemrograman sisi-server adalah CGI, ASP (termasuk ASP.NET), PHP, dan banyak lagi. Topik ini akan khusus mempelajari PHP, karena lisensinya gratis.

Sekilas tentang PHP, PHP (http://www.php.net) adalah akronim rekursif (rekursif maksudnya berulang) dari PHP Hypertext Preprocessor. Dia menggunakan sintaks yang mirip sekali dengan C, jadi yang pernah belajar C pasti tidak terlalu kesulitan. Cara kerjanya, server akan membaca berkas PHP kita (yup, PHP menggunakan berkas PHP bukannya HTML), apakah ada kode PHP di sana. Kalau ada, kode itu akan diterjemahkan (geeks: interpret) ke bahasa yang dimengerti mesin, lalu dijalankan. Hasilnya akan ditambahkan ke berkas PHP yang kita minta (jika ada hasil). Begitu seterusnya sampai tidak ada lagi kode PHP yang harus dijalankan. Kemudian, berkas hasilnya akan dikirimkan ke kita.

Nah, apa yang diperlukan untuk belajar PHP?
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Catatan: Tata nama map pada artikel ini menggunakan tata nama Windows, misalkan My Documents\My Pictures.

Karena PHP adalah bahasa pemrograman sisi-server, kita tentu saja memerlukan server. Wah, apa itu berarti kita harus beli komputer baru yang menggunakan sistem operasi UNIX? Tidak perlu. Kita cukup menginstal program server ini ke komputer kita, sekalipun kita menggunakan Windows. Windows memang sudah mempunyai server bawaan, yaitu IIS (Internet Information Service), namun ini tidak tersedia di seluruh versi Windows (versi Home XP dan Vista tidak memilikinya) dan pada dasarnya tidak aktif. Karena itu, kita pakai server lain yang gratis dan sangat umum digunakan, yaitu Apache (http://www.apache.org). Aku menyarankan menggunakan versi terbaru, yaitu Apache 2.

Setelah Apache terinstal, kita memerlukan program interpreter PHP-nya sendiri, yaitu PHP. PHP bisa didapat di situs PHP. Versi PHP yang aku sarankan ada dua, PHP 4 dan PHP 5. Kebanyakan Web host sudah menggunakan PHP 5, namun masih ada yang menggunakan PHP 4. Tidak ada perbedaan pada sintaks, namun PHP 5 sudah 100% berbasis objek (baca artikel ini tentang apa itu pemrograman berbasis objek). Silakan pilih salah satu.

Pada tahap ini, sebenarnya kita sudah dapat melakukan pengembangan Web dinamis, namun ada satu lagi kombinasi yang belum didapatkan: MySQL. MySQL (http://www.mysql.com) adalah salah satu sistem manajemen basis data yang gratis dan sangat populer digunakan dalam pengembangan Web dinamis, berdampingan dengan PHP. Rasanya sudah mustahil menemukan PHP tanpa MySQL. Silakan pilih versi yang diperlukan, disarankan versi 4 atau 5.

Bagi yang tidak ingin repot-repot menginstal ketiganya secara terpisah lalu melakukan konfigurasi yang terkadang membingungkan (aku sendiri juga bingung kalau harus menginstal ketiganya terpisah), komunitas Internet sudah berbaik hati menggabungkan ketiganya dalam satu paket. Silakan pilih dari AppServ (http://www.appservnetwork.com), WAMP (http://www.wampserver.com/en/), XAMPP (http://www.apachefriends.org/en/xampp.html), dan sebagainya. Aku tidak akan bahas cara instalasi ketiganya di sini, karena wizard yang diberikan cukup mudah untuk diikuti. Kalau tidak mau install, gunakan XAMPP yang cukup ekstrak arsip saja (ZIP atau 7Z self-extract), bahkan bisa dibawa di UFD (dan bisa digabung ke PortableApps.com).

Nah, setelah menginstal AppServ/WAMP/XAMPP (atau Apache + PHP + MySQL), saatnya mencoba membuat halaman Web dinamis pertama kita!
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Sebagai tradisi, yuk keluarkan tulisan "Hello World!" Jalankan Notepad (disarankan Notepad++ atau pengganti lain yang sesuai) atau program manajemen situs (Adobe Dreamweaver atau yang lain), lalu ketikkan kode di bawah ini:

<?php echo "Hello World!"?>

Simpan dengan nama hello.php (perhatikan, ekstensinya PHP). Tergantung paket yang diinstalasi, letakkan di map yang bersesuaian (misalkan AppServ di %map instalasi AppServ%\www, XAMPP di %map instalasi XAMPP%\htdocs\). Atau, untuk memastikan, cari berkas httpd.conf dalam map %map Apache%\conf dan lihat pengaturan DocumentRoot, itu adalah map server kita. Lalu, jalankan di peramban kesukaan.

AWAS! Cara menjalankan di peramban bukan dengan menggunakan Open, namun kita harus mengaksesnya seolah-olah kita sedang online. Caranya? Karena ada server terinstal di komputer kita, kita bisa menggunakan alamat khusus yang secara otomatis akan merujuk pada komputer kita sendiri: http://localhost. localhost atau IP-nya 127.0.0.1 adalah DNS (Domain Name Server, nama yang mewakili IP tertentu) khusus yang berarti server tersebut ada di komputer kita sendiri. http://localhost akan merujuk pada map yang ditunjuk sebagai lokasi situs Web kita (lihat catatan di atas). Selanjutnya, gunakan path absolut untuk menemukan berkas yang diinginkan. Pada kasus kita, hello.php diakses dengan URL http://localhost/hello.php.

Coba jalankan. Bisa kan? Kalau tidak keluar, pastikan Apache dan PHP sudah berjalan dan dikonfigurasikan dengan benar (untuk paket instalasi Apache/PHP/MySQL, biasanya tidak ada pengaturan lebih lanjut yang diperlukan).

CATATAN
Kode di atas sebenarnya tidak dianjurkan, karena bisa dilihat kita sama sekali tidak menggunakan HTML. Walaupun berkasnya PHP, kita tetap memerlukan HTML untuk menampilkan berkas dengan benar.

Yuk analisis sedikit kode kita di atas!
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Perhatikan bahwa ada tag <?php di awal kode kita. Tag ini diperlukan untuk menandai bahwa kita memulai pemrograman PHP. Setelah selesai dengan PHP, tutup dengan tag ?>. Dengan pengaturan khusus, tag ini bisa dipersingkat menjadi <? saja, atau bahkan mengikuti style ASP, tapi aku sarankan menggunakan tag biasa. Apapun yang ada di kedua tag tersebut akan diinterpretasikan dulu oleh PHP, diolah, dan dikeluarkan hasilnya (jika ada).

Kemudian, kita bertemu echo. Ini adalah versi PHP untuk perintah cout pada C. Gampangnya, echo digunakan untuk mengeluarkan string tertentu yang mengikutinya. Masih ingat ya apa itu string? Nah, string pada PHP diapit tanda kutip ganda "" atau tanda kutip tunggal ''. Silakan pilih mana yang hendak dipakai. Aku menyarankan menggunakan tanda kutip ganda.

Pada akhir baris tiap perintah PHP, jangan lupakan tanda titik koma ;. Ini menandakan PHP bahwa baris kita sudah berakhir. Sama dengan C kan?

Nah, kalau ingin mengeluarkan tanda kutip sendiri, gimana dong? Misalkan aku punya string "It's me!". Apa kira-kira seperti ini kodenya?

<?php
echo "It's me!";
echo 
'It's me!';
?>


Coba jalankan.

KutipParse error: syntax error, unexpected T_STRING, expecting ',' or ';' in F:\xampp\htdocs\hello.php on line 3

Error? Ya, karena pada baris 3 kita melakukan kesalahan. Tanda kutip tunggal kedua (milik It's) dianggap mengakhiri string, sehingga setelahnya tidak dikenali oleh PHP. Solusinya, gunakan escape character \:

<?php
echo "It's me!";
echo 
'It\'s me!';
?>


Mudah kan?

Well, setelah ini, terpaksa kita mengulang dasar-dasar pemrograman, karena kita perlu tahu sintaks PHP. Jangan khawatir, ini singkat saja kok :)
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Pada PHP, nama variabel selalu dimulai dengan tanda dolar $. Contohnya, variabel bernama x ditulis $x. Operasi-operasi aritmatika tetap sama seperti bahasa lainnya, jadi kita tidak perlu bahas. Yang berbeda adalah operasi penggabungan dua atau lebih string (geeks: concatenation), PHP menggunakan tanda titik . . Contoh:

<?php
$nama 
"Sapi";
echo 
"Hello, " $nama "!"// operasi normal
echo "Hello, $nama!"// dengan tanda kutip ganda, kita bisa mengeluarkan nilai sebuah variabel dengan hanya memanggil namanya di dalam string...
echo "Hello, {$nama}!"// ...atau dengan menggunakan format seperti ini: nama variabel diapit tanda kurung kurawal...
echo 'Hello, $nama!'// ...tapi ini tidak berlaku di tanda petik tunggal. Lihat saja hasilnya.
?>


Pada PHP, variabel tidak perlu dideklarasikan tipe datanya dulu seperti di C. Langsung saja gunakan:

<?php
$jari 
25;
echo 
"Luas lingkaran ini adalah " . (M_PI pow($jari2)) . " cm<sup>2</sup>.";
echo 
"Keliling lingkaran ini adalah $keliling cm."// kosong
?>


Konstanta lain lagi:

<?php
define
("KONSTANTAKU""Sapi saya satu."); // disarankan nama konstanta ditulis dalam UPPERCASE untuk membedakannya dengan konstanta biasa, ...
echo KONSTANTAKU;
define("pi"3.14);
echo 
pi// ... walaupun ini sah
?>


Komentar sudah didemonstrasikan dari tadi, dan kebetulan sama persis dengan C:

<?php // ini komentar satu baris
/*
Ini komentar yang lebih dari satu baris.
Ini juga bisa digunakan untuk menutup baris kode tertentu yang nantinya ternyata tidak diperlukan lagi,
namun terlalu berharga untuk dihapus (tapi ingat, komentar memakan ruang pada ukuran berkas).
*/
?>


Fungsi dideklarasikan seperti berikut:

<?php
// Deklarasi fungsi
function fungsiku()
{
echo "<p>Ini fungsiku</p>";
}

// Dengan parameter...
function fungsimu($parameter)
{
echo "<p>Ini fungsimu, ada nilai parameternya: $parameter</p>";
}

// Dengan parameter bernilai dasar...
function fungsinya($param1$param2 "aku")
{
echo "<p>Ini fungsinya $param1 dan $param2</p>";
}

// Cara menggunakan fungsi, panggil saja namanya (berikan parameter jika perlu)
fungsiku();
fungsimu(12);
fungsinya("saya""kamu");
fungsinya("saya"); // tanpa parameter kedua, fungsi akan mengisinya dengan nilai dasar pada deklarasi
?>


Selanjutnya...
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Untuk percabangan, blok if dan switch bentuknya sama persis dengan C seperti ini:

<?php
// If sederhana
if(== 2)
echo "Ngawur!!!<br />";

// If dengan else
if(== 2)
echo "Ngawur!!!<br />";
else
echo "Benar!!!<br />";

// If dengan banyak syarat
$umur 17;
if(
$umur && $umur 17)
echo "Anak-anak<br />";
elseif(
$umur >= 17 && $umur 25)
echo "Remaja<br />";
else
echo "Dewasa<br />";

// If dengan lebih dari satu baris perintah
if(!= 2)
{
echo "Good!<br />";
echo "Kamu masih waras!<br />";
}

// If bersarang
$jk "L";
if(
$jk == "L"// perbandingan string bisa juga dengan fungsi strcmp()
{
if($umur 21)
echo "Belum dewasa<br />";
else
echo "Sudah dewasa<br />";
}

// Digabung dengan HTML (biasanya saat kita lebih banyak menuliskan HTML, alih-alih menggunakan echo)
if($jk == "L")
{
?>

<p>Cari wanita yang seperti apa?</p>
<p>Yang penting cantik, yang penting pintar, atau dua-duanya?</p>
<?php
}

// Untuk IF yang kondisinya banyak, bisa gunakan blok SWITCH:
$kota "Surabaya";
switch(
$kota)
{
// single case
case "Jakarta":
echo "Jawa bagian barat<br />";
break;
// multiple case
case "Semarang":
case 
"DIY":
echo "Jawa bagian tengah<br />";
break;
case 
"Surabaya":
echo "Jawa bagian timur<br />";
break;
// Kalau tidak ada yang memenuhi syarat
default:
echo "Bukan di Jawa?<br />";
break; // opsional sebenarnya di PHP, karena default dikerjakan terakhir
}

// Bentuk lain: gantikan kurung kurawal buka { dengan : dan gantikan kurung kurawal tutup } dengan endif; atau endswitch;
// Ini juga berlaku untuk kontrol while, for, dan foreach nantinya
// Contoh, IF ketiga di atas bisa ditulis:
if($umur && $umur 17):
echo "Anak-anak<br />";
elseif(
$umur >= 17 && $umur 25):
echo "Remaja<br />";
echo "Baru akil balig ya :)<br />";
else:
echo "Dewasa<br />";
endif;
?>



Perulangan menggunakan blok for, while, atau do-while (tidak ada blok until):

<?php
// <hr /> di sini hanya untuk memisahkan hasil tiap blok
for($i 1$i <= 10$i ++)
{
echo $i;
}

echo 
"<hr />";
// AWAS! $i masih dikenali di sini.
while($i <= 10)
{
echo $i;
$i ++;
}

// Untuk mendapatkan efek di atas, reset dulu $i atau gunakan variabel lain
while($j <= 0)
{
echo $j;
$j ++;
}

echo 
"<hr />";
// Blok do-while...
$k 0;
do
{
echo $k;
}while(
$k <= 10);


// Bentuk alternatif juga berlaku:
echo "<hr />";
$j 1;
while(
$j <= 10):
echo $j;
$j ++;
endwhile;

echo 
"<hr />";
for(
$i 1$i <= 10$i ++):
echo $i;
endfor;
?>


Ada satu lagi bentuk for, yaitu foreach, tapi untuk sementara kita tunda dulu sampai kita menjumpai array.
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

#6
Array dan Hash, menariknya, mirip dengan Array dan Hash di Ruby. Langsung contoh ya!

Deklarasi array dan hash:

<?php
$arrayku 
= array(); // membuat array kosong
$arrayku2 = array(123); // array 1 dimensi
print_r($arrayku2); // cetak isi array ini
$hash = array("Januari" => 30"Februari" => "28"); // hash tetap diperlakukan sebagai array. Formatnya: $key => $value
echo "<p>Banyak hari dalam bulan Januari adalah {$hash['Januari']}</p>"// cara akses nilai hash jika menggunakan tanda kutip ganda: {$hash['key']}
// Array 2 dimensi
$array2d = array(
=> array(123),
=> array(456)
);
echo 
$array2d[1][2]; // 3. Ingat, indeks array dimulai dari 0
?>


Nah sekarang kita bisa kenalan dengan blok foreach. Ini berguna untuk menjelajahi isi array dan hash tanpa perlu tahu berapa banyak isi array-nya. Formatnya:

<?php
// Untuk array, atau bisa juga untuk hash jika kita tidak peduli key-nya
foreach($nama_array as $value)
{
// Lakukan proses di sini
// $value akan berisi nilai dari tiap elemen array
}
// Untuk hash, atau bisa juga untuk array kalau kita peduli key-nya
foreach($nama_array as $key => $value)
{
// Lakukan proses di sini
// $key akan berisi indeks dari tiap elemen array
}
?>


$key dan $value namanya bisa diganti sesuka kita. Penggunaannya seperti ini:

<?php
// Contoh array-nya dulu...
$buah = array("apel""pisang""jambu");
foreach(
$buah as $nama_buah)
{
echo $nama_buah;
}
// Contoh hash
$pet = array("Andi" => "kucing""Budi" => "sapi""Cinta" => "ikan");
foreach(
$pet as $pemilik => $binatang)
{
echo "<p>Peliharaan $pemilik adalah $binatang.</p>";
}
?>


Nggak susah kan?

Oke, itu dasar-dasar PHP. Kita bisa mulai masuk ke tingkat berikutnya, yaitu bagaimana berinteraksi dengan pengunjung situs kita.
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Nah, sebagai pembuat situs web dinamis, kita tentu saja ingin pengunjung bisa berinteraksi dengan situs kita kan? Bagaimana caranya? Mudah saja, ini bisa dilakukan dengan form. Form sendiri sebenarnya adalah HTML, jadi kita kembali sebentar ke HTML ;)

<form>

Tag ini digunakan untuk membuat form pada halaman web kita. Kaya apa sih form itu? Coba saja tengok kotak Jawab-Cepat di bawah, itu form. Coba klik Quick-Edit, akan keluar form. Jadi, intinya, form pada halaman Web ya sama persis pada form di "dunia lama" (baca: kertas isian form).

Tag form memiliki beberapa atribut penting yang tidak boleh dilupakan tiap kali kita hendak membuat form:

name
Sebenarnya bisa diabaikan, namun biasakan memberi nama form. Beberapa peramban lama tidak mengenal atribut ini, tapi mereka bisa diabaikan untuk saat ini (siapa sih yang tidak pakai peramban versi terbaru? ;)). Atau, kalau memang khawatir, berikan nilai yang sama pada atribut id.

action
Ini menentukan ke halaman mana data isian form kita akan dikirim dan diolah lebih lanjut. Sebuah form bisa saja mengirimkan data ke halaman lain, atau bahkan dikirim ke dirinya sendiri untuk pengolahan lebih lanjut. Sementara kita gunakan cara pertama saja supaya tidak bingung.

method
Ini menentukan metode pengiriman data form kita. Nilainya hanya ada dua: get dan post. Hapalkan keduanya dan pahami perbedaannya, karena ini akan sangat mempengaruhi form kita!
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Kita bahas yang pertama dulu.

method="get"

Pada mode GET, data yang kita kirimkan akan ditambahkan ke belakang URL halaman target (ingat ya halaman target itu siapa? Nilai atribut action.) Pernah lihat kan URL yang ada tanda ?-nya? Apapun di belakang tanda ? dinamakan query string. Dengan menggunakan metode GET, semua nilai pada form kita akan ditambahkan sebagai query string. Contoh query string adalah index.php?action=post&id=1. Cara bacanya, action akan bernilai post dan id bernilai 1.

Metode ini biasa digunakan dalam mesin pencari (coba saja ke Google, cari sesuatu dan amati URL-nya; kata kunci kita akan keluar di parameter q). Keunggulannya, karena data form kita ditambahkan ke URL, halaman tersebut bisa ditandai (bookmark) untuk akses berikutnya (dan tentu saja para mesin pencari juga bisa mengindeks halaman tersebut lengkap dengan hasil prosesnya). Kelemahannya, panjang URL terbatas (tidak sama untuk setiap perambah, namun konon panjang maksimal yang diizinkan 65.535 karakter), jadi tidak cocok untuk form yang memerlukan data cukup banyak (misalkan teks). Satu lagi, karena semua nilai form kelihatan, jangan gunakan metode GET untuk data yang sensitif (misalkan form login)!!!

Cara mengambil data dari form yang menggunakan metode GET akan diberikan kemudian. Kita kenalan dengan metode satunya dulu.
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Berikutnya, ada metode yang cukup umum digunakan untuk form yang datanya cukup banyak:

method="post"

Perbedaannya dengan metode GET, metode POST tidak akan menampakkan data pada kita. Jadi, URL halaman tujuan akan tetap bersih (kecuali jika halaman tujuannya sendiri sudah punya query string); data form tidak akan nampak di situ. Lha terus, apa datanya benar-benar terkirim? Tentu saja! Nanti kita akan lihat bagaimana caranya membaca data form yang menggunakan metode POST di halaman tujuan.

Kelebihan metode ini, karena data yang dikirim tidak kelihatan secara langsung dari sisi pengguna, kita bisa menggunakannya untuk mengirim data yang agak sensitif (form login biasa menggunakan metode POST, karena tentu saja datanya rahasia!), walaupun prakteknya kalau ada yang "mencium" (baca: mencegat) data itu selagi dikirim, tetap saja datanya bisa diambil :D tapi jangan khawatir, kasus belakangan biasanya tidak terjadi di situs-situs yang tidak krusial (atau, kalau mau solusi, bisa menggunakan HTTPS untuk mengenkripsi data yang dikirim, tapi kita tidak bahas itu sekarang). Kelebihan lain, besar data yang kita kirim tidak terbatas. Jadi, mau kirim apa saja, termasuk berkas (nanti kita akan pelajari bagaimana caranya mengunggah sebuah berkas).

Kelemahannya, halaman tujuan benar-benar tergantung pada halaman tempat form kita berada supaya bisa memproses hasilnya. Kalau kita langsung membuka halaman tujuan tanpa mengirim data terlebih dahulu, halaman tujuan tidak akan memperoleh hasil apa-apa. Karena itu, metode POST tidak terlalu disarankan untuk mesin pencarian.

Nah, kita sudah berkenalan dengan kedua metode pengiriman data form. Saatnya berkenalan dengan tag lain untuk mulai membuat form kita!
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Oke, tag form selesai sampai di situ (walaupun sebenarnya ada satu lagi atribut yang perlu dikenal, tapi kita tidak akan sentuh sampai kita sampai ke cara mengunggah berkas). Tapi, tag ini tidak berfungsi apa-apa tanpa "teman akrab"-nya:

<input>

Tag inilah yang berfungsi menampung data kita, sekaligus memberi sentuhan visual ke dalam form kita. Tag inipun memiliki banyak jenis, yang dibedakan melalui atribut type. Sebelum itu, kita kenali dulu atribut-atribut yang wajib dimiliki semua tipe input.

name
Tak kenal maka tak sayang. Tak ada nama, kita tak tahu datanya! :D beberapa peramban lama hanya mengenal atribut id, tapi sejatinya atribut id sekarang digunakan untuk styling CSS.

value
Tidak semua input memiliki atribut ini, dan perilakunya berbeda-beda untuk tiap tipe. Nanti kita akan ketahui fungsi atribut ini saat kita mengenal tiap tipe input.

disabled
Kalau diisi, input kita nanti tidak akan bisa dipilih. Lha terus untuk apa? Ada beberapa kegunaan nanti sesuai kebutuhan, tapi untuk sekarang kita bisa abaikan dulu :)

Nah, apa saja jenis-jenis input yang bisa kita pakai?
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Ada 10 jenis input yang tersedia, yang didefinisikan pada atribut type. Mungkin tidak semua akan kita pakai, namun pada beberapa kasus kita akan menggunakannya. Mereka adalah:

Text box (type="text")
Tipe ini adalah standar; jika kita lupa tidak mengisi atribut type atau isinya salah, peramban akan otomatis menganggapnya sebagai teks. Fungsinya untuk menampung... teks! :D

Contoh:



Aku abaikan atribut name karena ini hanya contoh tampilan :P

Jika kita mengisi atribut value, nilainya akan tampak di dalam boks teks seperti ini:



Oh ya, tag input ini berdiri sendiri, jadi jangan lupa nutupnya untuk XHTML ;)

Ada juga atribut readonly (atribut tunggal), yang membuat boks teks kita tidak bisa diedit tapi masih bisa dipilih:



Perlu membatasi jumlah karakter yang boleh dimasukkan? Gunakan atribut maxlength:



Kurang lebar boksnya, atau kelebaran? Gunakan atribut size untuk mendefinisikan lebar boks (dalam satuan karakter):



Check box (type="checkbox")
Pernah mengisi pilihan yang boleh dipilih lebih dari satu? Di Web, kita menggunakan check box. Atribut value menunjukkan nilai pilihan kita. Selain itu, ada atribut checked yang kalau diberi nilai (ini atribut tunggal), check box kita akan otomatis ditandai. Contoh:

Ini check box biasa
Ini sudah dipilih


Radio button/option (type="radio")
Kebalikan check box, bagaimana kalau hanya boleh satu saja yang dipilih? Kita gunakan tipe input ini. Atribut value dan checked masih sama dengan check box. Perbedaannya dengan checkbox, kita harus memberikan nama yang sama untuk kelompok pilihan kita.

Bingung? Nii contohnya:

Kelompok pertama:
Apel
Pisang
Jambu
Kelompok kedua:
Gajah
Kucing
Monyet


Perhatikan HTML-nya:

Kelompok pertama: <br />
<input type="radio" name="buah" value="1" />Apel<br />
<input type="radio" name="buah" value="2" />Pisang<br />
<input type="radio" name="buah" value="3" />Jambu<br />
Kelompok kedua: <br />
<input type="radio" name="hewan" value="1" checked="checked" />Gajah<br />
<input type="radio" name="hewan" value="2" />Kucing<br />
<input type="radio" name="hewan" value="3" />Monyet


Andaikan tidak kuberi nama, pilihan keempat, kelima, dan keenam akan dijadikan satu dengan tiga pilihan pertama.

Password (type="password")
Ini mirip boks teks, hanya saja biasa digunakan untuk password. Teks yang diketikkan di sini tidak akan tampak, tapi digantikan tanda * atau bulatan (tergantung peramban). Karena mirip boks teks, semua atribut milik boks teks juga berlaku untuk password.

Contoh!



Tombol (type="button")
Ini biasanya tidak berguna jika sendirian, karena fungsinya membuat... tombol visual. Gabungkan dengan JavaScript pada atribut onclick untuk menggunakan tombol ini dalam kasus tertentu. Atribut value mengatur teks yang muncul.

Contoh:



Bedakan dengan dua tombol khusus yang akan kita temui nanti.

File (type="file")
Inilah yang akan kita pakai untuk mengunggah berkas. Contoh!



Kita akan kenali tipe input ini lebih jauh nanti.

Hidden (type="hidden")
Sesuai namanya, input ini... tersembunyi! ;D Lalu, apa gunanya? Misalkan saja untuk menyimpan nilai tertentu yang tidak seharusnya diketahui pengunjung situs, atau tidak terlalu penting untuk diketahui. Biasanya kita akan menggunakan atribut value untuk menggunakan tipe input ini (kalau tidak, ya tidak berguna :D).

Nggak perlu contoh ya, toh nggak tampak apa-apa :D

Nah, tiga tipe sisanya adalah tipe khusus...
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Aku bahas dua tipe dulu yang biasanya berpasangan.

Submit (type="submit") dan Reset (type="reset")
Sesuai namanya, kedua tombol ini digunakan untuk mengirim data (submit) atau mengembalikan form ke keadaan semula (reset). Contoh!

Kali ini aku gunakan HTML lengkap (menggunakan tag form).



Harap jangan klik tombol pertama, pindah halaman nanti ;D

Keduanya punya atribut value untuk mengatur teks apa yang muncul. Kalau tidak diberikan, yang muncul adalah teks dasar yang ditentukan peramban (biasanya Submit dan Reset, tapi di Google Chrome Indonesia nilainya justru Kirim dan Atur ulang).

Tidak suka dengan tombol Submit? Pakai saja ini:

Image (type="image")
Fungsinya sama persis seperti tombol Submit, hanya saja sekarang kita bisa pakai gambar apa saja yang kita mau. Nggak perlu contoh ya, aku nggak punya gambarnya :P jangan lupa, karena ini gambar, atribut src dan alt wajib diisi.

Oke! Itu tipe-tipe input yang tersedia. Tapi, masih ada 1 lagi tag khusus yang tidak termasuk dalam tag input, tapi bisa menampung data:
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Merasa masukan untuk boks teks kurang besar? Bagaimana kalau teks yang dimasukkan agak banyak dan bisa berbaris-baris? Boks teks biasa tidak akan mampu melakukannya. Karena itu, kita bisa minta bantuan tag

<textarea>

Ini bukan tag tunggal, karena apapun yang diapitnya akan muncul di dalam boks teks yang lebih besar (mirip atribut value, hanya saja tag ini tidak punya atribut tersebut). Contoh:



Wah, kurang lebar dan kurang tinggi... Atur atribut rows dan cols untuk keperluan ini. cols dihitung dalam satuan karakter, rows dalam satuan baris.



Tag ini memang agak mirip dengan box teks biasa (<input type="text" />), karenanya atribut disabled, readonly, dan (tentu saja) name juga dimiliki.

Selesai! Sekarang kita bisa membangun form kita sendiri, kemudian mengambil data yang dikirim dengan bantuan PHP. Yuk mulai!
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen

Èxsharaèn

Kita mulai dengan metode GET terlebih dulu. Dari tadi cuma bicara teorinya saja kan, belum tahu penerapannya seperti apa? Yuk kita coba!

Buat halaman baru (misal saja form.php, bahkan form.html pun tidak apa-apa) dan ketikkan kode berikut. Andaikan kita akan mengirimkan datanya ke halaman hasil.php (kali ini HARUS berkas PHP):

<form action="hasil.php" method="get">
Nama Anda: <input type="text" name="nama" /><input type="submit" />
</form>


Hasilnya (jangan dicoba di sini!!!):

Nama Anda:


Silakan isi dan tekan Submit. Sementara halamannya akan error, karena kita belum buat halaman hasil.php, tapi coba perhatikan URL-nya: http://localhost/hasil.php?nama=sapi

Jelas kan, data kita ditambahkan ke URL halaman tujuan? Coba lagi dengan masukan yang lebih banyak:

<form action="hasil.php" method="get">
Nama Anda: <input type="text" name="nama" /><br />
Jenis kelamin: <input type="radio" name="jk" value="L" />Laki-laki  <input type="radio" name="jk" value="P" />Perempuan<br />
Sudah menikah? <input type="checkbox" name="nikah" value="y" /><br />
<input type="submit" />
</form>


Contoh URL-nya seperti ini: http://localhost/hasil.php?nama=sapi&jk=L&nikah=y

Nah, sekarang kita buat halaman hasil.php. Kita gunakan contoh form kedua (yang inputnya agak banyak). Gimana caranya mengekstrak data tersebut dari URL? Kita bisa minta bantuan variabel khusus PHP, yaitu $_GET. Variabel ini khusus menangani query string. Tidak hanya dari hasil form GET saja, tapi andaikan kita beri URL dengan query string pun dia akan menangkapnya.

Bingung? Coba dulu buat halaman asal.php dan ketikkan kode ini:

<?php
echo "Halo, " $_GET['n'];
?>


Kemudian, akses dengan menambahkan query string n=asal (bebas sebetulnya), sehingga URL-nya menjadi seperti ini: http://localhost/asal.php?n=asal. Keluar "Halo, asal"?

Nah, dengan cara yang sama, kita bisa menangkap data dari form kita. Buat halaman hasil.php dan ketikkan kode berikut:

<?php
echo "Halo, ";
switch(
$_GET['jk'])
{
case 
"L":
echo "Tuan ";
break;
case 
"P":
echo "Nyonya ";
break;
}
echo 
$_GET['nama'] . "!";
if(
$_GET['nikah'] == "y")
echo " Anda sudah menikah rupanya.";
else
echo " Masih jomblo ya?";
?>


Silakan dicoba dengan variasi apapun yang diinginkan. Kalau malas mengisi form lagi, silakan utak-atik saja query string-nya (ini juga kelemahan metode GET, nilainya bisa diubah saat itu juga tanpa harus mengirim form lebih dahulu).

Mudah kan? Bagaimana dengan metode POST?
Jangan lupa ikutan serunya petualangan Our Journey!
~ A, èxshna il utnön qu our journey shallaran a èndh... ~

Profiles
About.me https://about.me/hoshiro.exsharaen