Bagi Anda pengembang software berbasis desktop tentu sudah tidak asing lagi dalam membuat perhitungan secara dinamis dalam sebuah form. Misalnya seperti gambar berikut :
Pada gambar diatas, bila pengguna memilih jenis paket yang ada dalam combobox, maka secara otomatis textbox detail akan ikut berubah sesuai dengan paket yang dipilih oleh pengguna. Kemudian, bila pengguna mengisikan harga beserta jumlah, secara otomatis total akan ditampilkan.
Nah bagaimana jika cara tersebut dibuat menjadi web based ??
Apakah hal tersebut dapat dibuat dengan menggunakan bahasa pemrograman PHP ?
Berdasarkan fakta, PHP tidak diciptakan untuk bekerja secara langsung pada komputer client. Semua data harus dikirim terlebih dahulu ke server yang kemudian hasil perhitungan akan dikembalikan lagi kepada client. Berdasarkan fakta tersebut, pembuatan form dinamis menggunakan PHP hampir dipastikan MUSTAHIL karena PHP bersifat server side.
Jika memang begitu, apa alternatifnya ?
Sebenarnya, terdapat banyak alternative yang mungkin bisa digunakan. Salah satunya kita akan menggunakan client side scripting yang akan dibahas dalam tutorial kali ini, so?? CeKidOt..!! hahaha..
Jika Anda ingin membaca secara offiline, silakan download disini
Jika sudah, langkah selanjutnya adalah mengubah name pada masing-masing list, textarea maupun textield sebagai berikut :
Jika sudah, langkah selanjutnya adalah mengubah name pada masing-masing list, textarea maupun textield sebagai berikut :
Paket = list = paket
Detail = textarea = detil
Harga = Textfield =harga
Jumlah = Textfield = jumlah
Total = Textfield =total
Jika sudah, Ketikanlah kode javascript ini pada bagian kepala dari HTML. Javascript ini berfungsi untuk menerima event dari aktivitas yang dilakukan oleh pengguna dan melakukan komputasi
Catatan : Sebenarnya Javascript bisa diletakan dimana saja didalam sebuah halaman. Hanya saja supaya seragam maka pada kasus ini kita buat didalam tag HEAD
<script language="javascript">
function rincian(){
//Mengeset variabel pilihan dengan nilai pada list opsion
var pilihan=document.form1.paket.options.selectedIndex;
//Mengeset variabel game dengan data yang sesuai/ bisa juga diambil dari database
var gamer="Motherboard : Asus \nProsessor : iCore7 Extreme 980\nMemory : 8 GB DDR3\n ATI 580 Eyefinity";
var office="Motherboard : Gigabyte \nProsessor : Intel Atom 250n 1.6 Ghz \nMemory : 1 GB DDR2\n Nvidia 8800 GTX";
switch (pilihan){
case 0:
document.form1.detil.value=gamer;
document.form1.harga.value=30000000;
break;
case 1:
document.form1.detil.value=office;
document.form1.harga.value=5000000;
break;
}
}
function hitung(){
//Mengeset variabel harga dan jumlah yang sebelumnya dikonversi terlebih dahulu
var harga=Number(document.form1.harga.value);
var jumlah=Number(document.form1.jumlah.value);
var total=jumlah*harga;
if(document.form1.detil!=""){
if(document.form1.jumlah!=0 || document.form1.harga!=0){
document.form1.total.value=total;
}else{
alert("Jumlah/Harga Harus Diisi dan Tidak Boleh Nol");
}
}else{
alert("Paket Belum Diisi");
}
}
</script>
Jika sudah, kembali ke tab code dan tambahkan kode berkut pada list. Kode ini berfungsi menangkap event perubahan nilai pada list kemudian menjalankan fungsi rincian().
Selanjutnya masih di tab code, ketikan kode berkut pada pada tombol hitung. Kode ini berfungsi menangkap event klik pada tombol hitung pada tombol kemudian menjalankan fungsi hitung().
Pada kode diatas tipe submit sengaja diubah menjadi button agar halaman tidak ter-refresh pada saat tombol hitung ditekan.
Baiklah, kita telah samapi di hujung tutorial. Untuk pengembangan lebih lanjut, Anda dapat meningkatkan penggunaan tutorial ini menjadi lebih interaktif seperi gambar bdibawah ini. Sampai jumpa dipertemuan selanjutnya! :p
“Belajarlah pada orang yang tepat di bidang yang Anda tekuni, Jangan belajar dari orang yang hanya bisa membual. Karena Anda tidak akan pernah mendapat instisari apapun dari mereka karena mereka tidak pernah mencapai apa yang mereka kata kepada Anda.”
bang,,,,makasih tutonya,,sangat membantu,,
tp saya kembang kan lagi pakai text field kok g bisa ya??
var pilihan=document.form1.paket.value;
g bisa muncul.huhu kenapa ya??apa yg salah?makasih
Maaf, baru kebaca.
m. mungkin bisapos kan seikit kode na agar saya bisa mengetahui detilnya.
:p