Selamat padi sahabat kretif dan saya ucapkan terimakasih untuk kunjungan ke blog yang sederhana ini...
Pada kesempatan kali ini saya akan membagikan tutorial membuat kalkulator sederhana dengan php.
tools yang harus di persiapkan :
- Notepad++ /
netbeans/dreamweaver(pilih salah satu aja) - Mozilla Firefok / Google Crhome / browser lainnya
- XAMPP
Sebelum sobat membat program php, alangkah baiknya jika sobat instal aplikasi XAMPP terlebih dahulu karena program PHP tidak bisa langsung di jalankan pada browser
Langkah - langkahnya..
Buat folder pada local C:\xampp\htdocs dengan nama belajar
Buka Notepad++ lalu simpan dengan nama kalkulator.php pada C:\xampp\htdocs\belajar
hasilnya seperti ini :
buatlah program tampilan/ desain kalkulator sederhana
kode :
<!DOCTYPE html>
<html>
<head>
<title>kalkulator Sederhana</title>
</head>
<body >
<form method="get" >
<table>
<tr>
<td colspan="4" align="center"><h1>KALKULATOR RHAOMLIE</h1></td>
</tr>
<tr>
<td>Angka 1</td>
<td>Angka 2</td>
<td></td>
<td>Hasil</td>
</tr>
<tr>
<td><input type="number" name="angka2" /></td>
<td>=</td>
<td><input type="text" name="hasil" disabled/></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit" name="tambah" value="+" />
<input type="submit" name="kurang" value="-" />
<input type="submit" name="kali" value="x" />
<input type="submit" name="bagi" value="/" />
</div></td>
</tr>
</table>
</form>
</body>
</html>
membuat program inputan angka dengan php
lihat kode text field untuk menampilkan angka1 dan angka2 dan hasil
<tr>
<td><input type="number" name="angka1" /></td>
<td><input type="number" name="angka2" /></td>
<td>=</td>
<td><input type="text" name="hasil" disabled/></td>
</tr>
tambahkan kode php pada text field tersebuat
<?php echo $angka1; ?>
<?php echo $angka2; ?>
<?php echo $hasil; ?>
hasilnya akan seperti ini
<tr>
<td><input name="angka1" type="number" required value="<?php echo $angka1; ?>" /></td>
<td><input name="angka2" type="number" required value="<?php echo $angka2; ?>" /></td>
<td>=</td>
<td><input name="hasil" type="text" disabled value="<?php echo $hasil; ?>"/></td>
</tr>
keterangan
required : agar ada keterangan text field tidak boleh kosong
disable :
nah sekarang mengaktifkan tombol button + - x /
tambahkan kode berikut diatas <!DOCTYPE html>
<?php
$hasil ="";
if(isset($_GET['angka1']) and isset($_GET['angka2']) ){
$angka1 = $_GET['angka1'];
$angka2 = $_GET['angka2'];
if(isset($_GET['tambah'])){
$hasil = $angka1+$angka2;
}
else if(isset($_GET['kurang'])){
$hasil = $angka1 - $angka2;
}
else if(isset($_GET['kali'])){
$hasil = $angka1 * $angka2;
else if(isset($_GET['bagi'])){
$hasil = $angka1 /$angka2;
}
}
?>
nah sekarang programnya sudah jadi tinggal modifikasi tampilan aja
modifikasi background
cari kode <body> ubahlah menjadi kode <body bgcolor="#99FF33" background="green.jpg" marginwidth="100">keterangan :
bgcolor="#99FF33" : warna background
background="green.jpg" : gambar background
marginwidth="100" : lebar form
kayak apa sih hasilnya, kayak gini :
udah berwana kan, tapi masih ada yang kurang kayaknya, modifikasi lagi yuk pada text fieldnya...
cari kode ini :
<tr>
<td><input name="angka1" type="number" value="<?php echo $angka1; ?>" /></td>
<td><input name="angka2" type="number" value="<?php echo $angka2; ?>" /></td>
<td>=</td>
<td><input name="hasil" type="text" disabled value="<?php echo $hasil; ?>"/></td>
</tr>
<tr>
tambahakan pada kode text field angka1 dan angka2 ( style="background-color:#CCFF00")
lalu pada hasil (style="background-color:#FC0")
kodenya akan berubah seperti ini
coba test ulang..
tuh kan sudah warna wani... acik acikk.....
test dulu siapa tau ada yang gak sesuai...
masukkan angka pada salah satu filed..
tu kan ada pemberitahuan jika text field tidak boleh kosong
coba cek kedua ..
hasilnya udah muncul, WOW WOW WOWW... HO.. HOO..
SELESAI
0 Komentar Sahabat:
Post a Comment
Jadilah yang pertama...