Pada postingan kali ini saya akan share kepada sobat semua Cara Membuat Kalkulator Sederhana Dengan PHP. Sebelum kita belajar cara menggunakan bahasa pemrograman PHP kita harus mengetahui apa itu PHP. PHP / Hypertext Preprocessor Adalah bahasa skrip yang dapat ditanamkan atau diselipkan dalam HTML. Kalkulator Sederhana adalah bahasa pemrograman dasar dalam PHP jadi jangan terlalu bangga jikalau sobat sudah bisa membuat Kalkulator Sederhana.
A. Pendahuluan
1. Pengertian
Kalkulator adalah alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu. Pada perkembangannya sekarang ini, kalkulator sering dimasukkan sebagai fungsi tambahan daripada komputer, handphone, bahkan sampai jam tangan.
2. Latar Belakang
Di masa globalisasi seperti sekarang ini, banyak sekali perkembangan yang terjadi pada teknologi yang dapat mempermudah kegiatan manusia dalam segala hal. Salah satunya adalah pada bidang teknologi komunikasi yang dinilai paling cepat perkembangannya.
3. Maksud dan Tujuan
Sebagai alat bantu manusia dalam menghitung.
B. Alat dan Bahan
- Pc/Laptop
- Sublime text / Text Editor
C. Jangka Waktu Pelaksanaan
-
D. Tahapan Pelaksanaan
D. Tahapan Pelaksanaan
File Yang Harus di Buat :
- kalkulator.php
- style.css
kalkulator.php
<?php
if (isset($_POST['proses'])) {
$pertama = $_POST['pertama'];
$kedua = $_POST['kedua'];
$operasi = $_POST['operasi'];
switch ($operasi) {
case 'tambah':
$hasil = $pertama + $kedua;
break;
case 'kurang':
$hasil = $pertama - $kedua;
break;
case 'kali':
$hasil = $pertama * $kedua;
break;
case 'bagi':
$hasil = $pertama / $kedua;
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ipin Boys Kalkulator Sederhana</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<body>
<div class="kalkulator">
<h1>KALKULATOR</h1>
<form action="" action="" method="post">
<input class="number" type="number" name="pertama" placeholder="Masukkan Bilangan Pertama">
<input class="number" type="number" name="kedua" placeholder="Masukkan Bilangan Kedua">
<select class="option" name="operasi">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">x</option>
<option value="bagi">/</option>
</select>
<input type="submit" name="proses" class="tombol" value="Hitung">
</form>
<?php if(isset($_POST['proses'])){ ?>
<input type="text" value="<?php echo $hasil; ?>" class="number">
<?php }else{ ?>
<input type="text" value="0" class="number">
<?php } ?> <br>
<a class="sumber" href="https://muhammadainularifin.blogspot.co.id/" target="_blank">IPIN BOYS</a>
</div>
</body>
</html>
if (isset($_POST['proses'])) {
$pertama = $_POST['pertama'];
$kedua = $_POST['kedua'];
$operasi = $_POST['operasi'];
switch ($operasi) {
case 'tambah':
$hasil = $pertama + $kedua;
break;
case 'kurang':
$hasil = $pertama - $kedua;
break;
case 'kali':
$hasil = $pertama * $kedua;
break;
case 'bagi':
$hasil = $pertama / $kedua;
}
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Ipin Boys Kalkulator Sederhana</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<body>
<div class="kalkulator">
<h1>KALKULATOR</h1>
<form action="" action="" method="post">
<input class="number" type="number" name="pertama" placeholder="Masukkan Bilangan Pertama">
<input class="number" type="number" name="kedua" placeholder="Masukkan Bilangan Kedua">
<select class="option" name="operasi">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">x</option>
<option value="bagi">/</option>
</select>
<input type="submit" name="proses" class="tombol" value="Hitung">
</form>
<?php if(isset($_POST['proses'])){ ?>
<input type="text" value="<?php echo $hasil; ?>" class="number">
<?php }else{ ?>
<input type="text" value="0" class="number">
<?php } ?> <br>
<a class="sumber" href="https://muhammadainularifin.blogspot.co.id/" target="_blank">IPIN BOYS</a>
</div>
</body>
</html>
style.css
body{
background: skyblue;
font-family: "Times New Roman" times, serif;
}
.kalkulator{
width: 360px;
background: darkblue;
margin: 130px auto;
padding: 10px 20px 60px 20px;
border-radius: 8px;
box-shadow: 0px 10px 10px 0 #D1D1D1;
}
.number{
width: 330px;
margin: 5px;
border: none;
font-size: 16pt;
border-radius: 5px;
padding: 10px;
}
.option{
font-size: 20pt;
width: 180px;
margin: 5px;
border: 20px;
border-radius: 5px;
padding: 10px;
}
.tombol{
background: crimson;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
margin-left: 13px;
border-radius: 10px;
padding: 12px 30px;
font-size: 25px;
color: #fff;
border-bottom: 2px solid white;
cursor: pointer;
}
h1{
text-align: center;
font-family: sans-serif;
color: #fff;
}
.sumber{
text-decoration: none;
font-family: sans-serif;
text-align: right;
color: white;
float: right;
padding: 10px;
}
background: skyblue;
font-family: "Times New Roman" times, serif;
}
.kalkulator{
width: 360px;
background: darkblue;
margin: 130px auto;
padding: 10px 20px 60px 20px;
border-radius: 8px;
box-shadow: 0px 10px 10px 0 #D1D1D1;
}
.number{
width: 330px;
margin: 5px;
border: none;
font-size: 16pt;
border-radius: 5px;
padding: 10px;
}
.option{
font-size: 20pt;
width: 180px;
margin: 5px;
border: 20px;
border-radius: 5px;
padding: 10px;
}
.tombol{
background: crimson;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
margin-left: 13px;
border-radius: 10px;
padding: 12px 30px;
font-size: 25px;
color: #fff;
border-bottom: 2px solid white;
cursor: pointer;
}
h1{
text-align: center;
font-family: sans-serif;
color: #fff;
}
.sumber{
text-decoration: none;
font-family: sans-serif;
text-align: right;
color: white;
float: right;
padding: 10px;
}
Setelah itu kita cek di localhost/kalkulator.php
E. Kesimpulan
perlu ketelitian dalam membuat source code dan jangan mudah menyerah apabila mendapat suatu error
F. Refrensi
http://www.script-kiddies.org
G. Penutup
Sekian postingan kali ini semoga bermanfaat guys.
Tidak ada komentar:
Posting Komentar