Assalamualaikum Wr. Wb
Kali ini saya akan beri tutorial tentang membuat kalkulator sederhana menggunakan PHP
Langsung saja berikut source codenya.
Penjumlahan :
<!DOCTYPE html> <!--menunjukkkan HTML versi 5-->
<html> <!--Tag <html> memberitahu browser bahwa ini adalah dokumen HTML
Tag <html> merupakan akar dari sebuah dokumen HTML.
Tag <html> merupakan wadah bagi semua elemen HTML lain (kecuali untuk <! DOCTYPE> tag).-->
<head> <!--Tanda <head> merupakan wadah untuk semua elemen kepala-->
<title> Web Penjumlahan</title> <!--membuat judul halaman web-->
</head>
<body> <!--Tanda <body> mendefinisikan tubuh dokumen-->
<h1 align = "center">PENJUMLAHAN</h1> <!--memberikan tulisan judul Penjumlahan bertype heading 1 dengan rata tengah-->
<form method = "post"> <!--Tanda <form> digunakan untuk membuat bentuk HTML dari input pengguna-->
<!--method = "post" untuk menunjukkkan hasil submit, hanya di tampilkan saja tanpa meneruskan URL-->
<table border="5" align = "center"> <!--membuat tabel dengan frame ukuran 5 dan rata tengah-->
<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td align = "center"> Angka 1 </td> <!--Baris tabel Angka 1 dengan rata tengah-->
<td><input type = "number" name = "angka1" value="<?php echo $_POST['angka1'];?>" required></td> <!--Menginputkan nomer pada textfield dgn nama angka1, Required menunjukkan peringatan bahwa kolom tidak boleh kosong-->
</tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td align = "center"> Angka 2 </td> <!--Kolom tabel Angka 2 dengan rata tengah-->
<td><input type = "number" name = "angka2" value="<?php echo $_POST['angka2'];?>" required></td> <!--Menginputkan nomer pada textfield dgn nama angka2, Required menunjukkan peringatan bahwa kolom tidak boleh kosong-->
<?php //menunjukkan script PHP untuk melakukan perhitungan matematika//
if(isset($_POST["penjumlahan"])) { //isset menunjukkan nilai true, apabila true akan menjalankan perhitungan//
$hasil = $_POST["angka1"]+ $_POST["angka2"]; //rumus hitung penjumlahan//
}
?>
<td align = "center">+</td> <!--Kolom untuk menulis tanda plus dgn rata tengah-->
</tr>
<tr> <!--Tanda <tr> mendefinisikan baris dalam sebuah tabel HTML-->
<td align = "center"> Hasil Penjumlahan</td> <!--Kolom untuk menulis hasil penjumlahan dgn rata tengah-->
<td><input type = "text" name = "hasil" disabled value="<?php echo $hasil;?>"></td> <!--menampilkan hasil perhitungan pada textfield yg tidak bisa di edit, tanda echo untuk mengeksekusi-->
<td><input type= "submit" name = "penjumlahan" value = "Hitung"></td> <!--membuat submit tombol hitung untuk melakukan penjumlahan-->
</tr>
</table>
</form>
<body>
</html>
Dan tampilannya :
Pengurangan :
<!DOCTYPE html>
<html>
<head>
<title> Web Penguragan</title>
</head>
<body>
<h1 align = "center">PENGURANGAN</h1> <!--memberikan tulisan judul Pengurangan bertype heading 1 dengan rata tengah-->
<form method = "post">
<table border="5" align = "center">
<tr>
<td align = "center"> Angka 1 </td>
<td><input type = "number" name = "angka1" value="<?php echo $_POST['angka1'];?>" required></td>
</tr>
<tr>
<td align = "center"> Angka 2 </td>
<td><input type = "number" name = "angka2" value="<?php echo $_POST['angka2'];?>" required></td>
<?php
if(isset($_POST["pengurangan"])) {
$hasil = $_POST["angka1"]- $_POST["angka2"]; //rumus hitung pengurangan//
}
?>
<td align = "center">-</td>
</tr>
<tr>
<td align = "center"> Hasil Pengurangan</td>
<td><input type = "text" name = "hasil" disabled value="<?php echo $hasil;?>"></td>
<td><input type= "submit" name = "pengurangan" value = "Hitung"></td> <!--membuat submit tombol hitung untuk melakukan pengurangan-->
</tr>
</table>
</form>
<body>
</html>
[/soucecode]
Dan tampilannya :
<a href="https://abdulwafi6661.wordpress.com/wp-content/uploads/2014/03/kurang.jpg"><img class="alignnone size-full wp-image-123" src="https://abdulwafi6661.wordpress.com/wp-content/uploads/2014/03/kurang.jpg" alt="kurang" width="507" height="227" /></a>
<strong>Perkalian : </strong>
<!DOCTYPE html>
<html>
<head>
<title> Web Perkalian</title>
</head>
<body>
<h1 align = "center">PERKALIAN</h1> <!--memberikan tulisan judul Perkalian bertype heading 1 dengan rata tengah-->
<form method = "post">
<table border="5" align = "center">
<tr>
<td align = "center"> Angka 1 </td>
<td><input type = "number" name = "angka1" value="<?php echo $_POST['angka1'];?>" required></td>
</tr>
<tr>
<td align = "center"> Angka 2 </td>
<td><input type = "number" name = "angka2" value="<?php echo $_POST['angka2'];?>" required></td>
<?php
if(isset($_POST["perkalian"])) {
$hasil = $_POST["angka1"]* $_POST["angka2"]; //rumus hitung perkalian//
}
?>
<td align = "center">x</td> <!--Kolom untuk menulis tanda kali dgn rata tengah-->
</tr>
<tr>
<td align = "center"> Hasil Perkalian</td> <!--Kolom untuk menulis hasil perkalian dgn rata tengah-->
<td><input type = "text" name = "hasil" disabled value="<?php echo $hasil;?>"></td>
<td><input type= "submit" name = "perkalian" value = "Hitung"></td> <!--membuat submit tombol hitung untuk melakukan perkalian-->
</tr>
</table>
</form>
<body>
</html>
Dan tampilannya :
Pembagian :
<!DOCTYPE html>
<html>
<head>
<title> Web Pembagian</title>
</head>
<body>
<h1 align = "center">PEMBAGIAN</h1> <!--memberikan tulisan judul Pembagian bertype heading 1 dengan rata tengah-->
<form method = "post">
<table border="5" align = "center">
<tr>
<td align = "center"> Angka 1 </td>
<td><input type = "number" name = "angka1" value="<?php echo $_POST['angka1'];?>" required></td>
</tr>
<tr>
<td align = "center"> Angka 2 </td>
<td><input type = "number" name = "angka2" value="<?php echo $_POST['angka2'];?>" required></td>
<?php
if(isset($_POST["pembagian"])) {
$hasil = $_POST["angka1"]/ $_POST["angka2"]; //rumus hitung pembagian//
}
?>
<td align = "center">:</td>
</tr>
<tr>
<td align = "center"> Hasil Pembagian</td>
<td><input type = "text" name = "hasil" disabled value="<?php echo $hasil;?>"></td>
<td><input type= "submit" name = "pembagian" value = "Hitung"></td> <!--membuat submit tombol hitung untuk melakukan pembagian-->
</tr>
</table>
</form>
<body>
</html>
Berikut tampilannya
Sekian terimakasih, semoga bermanfaat..!!
24 Maret 2014
Abdul Wafi
Abdul Wafi 