Pada Tutorial kali ini, Teman-Teman akan belajar mengenai bagaimana membuat kalkulator sederhana dengan menggunakan PHP, HTML dan CSS.
Preview Kalkulator Sederhana yang akan dibuat:
 |
| Gambar1. Formulir Input Bilangan |
 |
| Gambar2. Hasil Perhitungan |
Spesifikasi Kalkulator Sederhana:
Kalkulator sederhana ini mampu untuk melakukan penjumlahan, pengurangan, perkalian dan pembagian antara dua bilangan.
Algoritma Kalkulator Sederhana:
- Masukkan bilangan pertama ($bilangan_pertama).
- Masukkan operasi ($operasi).
- Masukkan bilangan kedua ($bilangan_kedua).
- Bila $operasi adalah "+" maka $hasil = $bilangan_pertama+$bilangan_kedua;
- Bila $operasi adalah "-" maka $hasil = $bilangan_pertama-$bilangan_kedua;
- Bila $operasi adalah "*" maka $hasil = $bilangan_pertama*$bilangan_kedua;
- Bila $operasi adalah "/" maka $hasil = $bilangan_pertama/$bilangan_kedua;
- Selain itu (4,5,6,7) maka $hasil = "Operasi Salah";
Mari Membuat Kalkulator Sederhana dengan PHP,HTML dan CSS
- Buatlah folder sukalogika pada direktori www anda. Pada tahap ini struktur explorer akan terlihat seperti ini: C:\wamp\www\sukalogika>
- Buatlah folder kalkulator pada direktori sukalogika. Pada tahap ini struktur explorer akan terlihat seperti ini: C:\wamp\www\sukalogika\kalkulator>
- Bukalah text editor yang akan digunakan. Misalnya: Notepad atau Notepad++
- Ketik/Copy Paste kode berikut dan simpan dalam folder C:\wamp\www\sukalogika\kalkulator> dengan nama index.php.
<!DOCTYPE html>
<html>
<head>
<title>
Kalkulator
</title>
<link rel="stylesheet" type="text/css" href="kalkulator.css">
</head>
<body>
<h1>
Kalkulator
</h1>
<form action="hasil.php" method="post">
<table class="kalkulator">
<tr>
<td>
Bilangan Pertama
</td>
<td>
:
</td>
<td>
<input type="text" name="bilangan_pertama">
</td>
</tr>
<tr>
<td>
Operasi
</td>
<td>
:
</td>
<td>
<select name="operasi">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td>
Bilangan Kedua
</td>
<td>
:
</td>
<td>
<input type="text" name="bilangan_kedua">
</td>
</tr>
<tr>
<td colspan="3" class="tengah">
<input type="submit" name="aksi" value="Hitung">
</td>
</tr>
</table>
</form>
</body>
</html>
- Ketik / Copy Paste kode berikut dan simpan dalam folder C:\wamp\www\sukalogika\kalkulator> dengan nama kalkulator.css
body{
font-size:16px;
}
.tengah{
text-align:center;
}
- Ketik / Copy Paste kode berikut dan simpan dalam folder C:\wamp\www\sukalogika\kalkulator> dengan nama hasil.php
<?php
function menghitung($bilangan_pertama,$operasi,$bilangan_kedua){
if($operasi=="+"){
$hasil = $bilangan_pertama+$bilangan_kedua;
}
else if($operasi=="-"){
$hasil = $bilangan_pertama-$bilangan_kedua;
}
else if($operasi=="*"){
$hasil = $bilangan_pertama*$bilangan_kedua;
}
else if($operasi=="/"){
$hasil = $bilangan_pertama/$bilangan_kedua;
}
else{
$hasil = "Operasi Salah";
}
return $hasil;
}
$bilangan_pertama = $_POST["bilangan_pertama"];
$operasi = $_POST["operasi"];
$bilangan_kedua = $_POST["bilangan_kedua"];
if(isset($_POST["aksi"])&&($_POST["aksi"]=="Hitung")){
$hasil = menghitung($bilangan_pertama,$operasi,$bilangan_kedua);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>
Hasil
</title>
<link rel="stylesheet" type="text/css" href="kalkulator.css">
</head>
<body>
<h1>
Hasil Perhitungan
</h1>
<p>
<?php echo $bilangan_pertama;?>
<?php echo $operasi;?>
<?php echo $bilangan_kedua;?>
=
<?php echo $hasil;?>
<br>
<a href="index.php">
Kembali ke Kalkulator
</a>
</p>
</body>
</html>
-
Akses dengan alamat: http://localhost/sukalogika/kalkulator/ untuk melihat Kalkulator Sederhana anda.
- Selamat! Anda berhasil membuat program kalkulator sederhana dengan menggunakan PHP, HTML dan CSS
