Assalamualaikum WR.WB
Selamat datang diblok belajar komputer semuanya..
Pada pada hari ini kita akan membahas cara pembuatan aplikasi kalkulator menggunakan PHP..Untuk coding yang akan kita gunakan adalah sebagai berikut beserta penjelasannya.
<html>
<head>
<!--digunakan untuk membuat judul-->
<title>Tutorial Membuat Kalkulator Dengan PHP MySQL</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--bagian untuk membuat hasil angka dari pertambahan, pengurangan, perkalian, dan pembagian-->
<?php
<!--fungsi isset( berfungsi untuk memeriksa ketersediaan data. Data yang di inputkan dari form saya simpan pada masing-masing variabel-->
if(isset($_POST['hitung'])){
$bil1 =$_POST['bil1'];
$bil2 =$_POST['bil2'];
$operasi=$_POST['operasi'];
<!--selanjutnya fungsi Switch case pada php berguna untuk mengecek operasi yang di pilih saat sebelum form di sumbit atau dijalankan.-->
switch ($operasi) {
<!--bagian untuk memeriksa operator apa yang di pilih untuk menghitung bilangan satu dan bilangan dua yang di input, jadi jika operator yang dipilih adalah tambah berarti bilangan satu ditambah bilangan dua, jika operator yang dipilih adalah kurang maka berarti bilangan satu dikurang bilangan dua begitu juga seterusnya dengan operator bagi dan kali jika dipilih-->
<!--dan masing masing operasi yang saya lakukan dirangkum kedalam sebuah variabel hasil dari operasinya seperti yang dapat dilihat pada syntax diatas. saya merangkum hasilnya ke dalam variabel $hasil.-->
case 'tambah':
$hasil = $bil1+$bil2;
break;
case 'kurang':
$hasil = $bil1-$bil2;
break;
case 'kali':
$hasil = $bil1*$bil2;
break;
case 'bagi':
$hasil = $bil1/$bil2;
break;
}
}
?>
<!--bagian untuk membuat judul di kakulator-->
<div class="kalkulator">
<h4 class="judul">KALKULATOR SEDERHANA</h4>
<!--metode POST untuk penangan data bilangan yang di input, pada bilangan satu diberi dengan nama "bil1" dan bilangan dua diberi nama "bil2".-->
<form method="post" action="./">
<input type="text" name="bil1" class="bil" placeholder="Bilangan 1" required/>
<input type="text" name="bil2" class="bil" placeholder="Bilangan 2" required/>
<select class="opt" name="operasi">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">x</option>
<option value="bagi">/</option>
<!--bagian untuk memasukan angka, menghitung dan mengeluarkan jumlah-->
</select>
<input type="submit" name="hitung" value="Hitung" class="tombol"/>
<a href="./" style="text-decoration:none;"><input type="button" value="Hapus" class="tombol"/></a>
</form>
<!--sampai disini berarti kita sudah memiliki hasil dari operasi aritmatikanya. Kemudian yang harus kita lakukan adalah menampilkan hasil operasinya-->
<?php if(isset($_POST['hitung'])){
?>
<!--kita periksa terlebih dahulu bagian untuk apakah sumbit telah dilakukan seperti cara menangkap data dari form di atas tadi-->
<input type="text" value="<?php echo $hasil; ?>" class="hasil"/>
<?php
}
else{
?>
<!--jika form belum disumbit atau dimasukan angkanya maka yang ingin saya tampilkan adalah nol "0"-->
<input type="text" value="0" class="hasil"/>
<?php
}
?>
</div>
<h3> Salsa Agzania </h3>
</body>
</html>
Itulah Contoh codingan membuat Aplikasi Kalkulator dengan PHP dengan penjelasannya. Jika teman ingin mencoba membuatnya , teman bisa memakai nya tetapi jangan menggunakan tanda [ <!-- ] dan [-->] karena itu cuman membuat penjelasan aja.
selanjutnya, Tampilan dari kalkulator masih tidak rapi, untuk mempercantik tampilan kita dapat menambahkan kode css di bawah ini. Buka kembali text editor kamu, dan ketiklah script code berikut.
body{
background: #f1c40f;
font-family: sans-serif;
}
.kalkulator{
width: 335px;
background: #3498db;
margin: 100px auto;
padding: 10px 20px 50px 20px;
border-radius: 5px;
box-shadow: 0px 10px 20px 0px #D1D1D1;
}
.bil{
width: 300px;
margin: 5px;
border: none;
font-size: 16pt;
border-radius: 5px;
padding: 10px;
}
.opt{
font-size: 16pt;
border: none;
width: 215px;
margin: 5px;
border-radius: 5px;
padding: 10px;
}
.tombol{
background: #EC5159;
border-top: none;
border-right: none;
border-left: none;
border-radius: 5px;
padding: 10px 20px;
color: #eee;
font-size: 15pt;
border-bottom:4px solid #BF3D3D;
}
.brand{
color: #eee;
font-size: 11pt;
float: right;
text-decoration: none;
margin: 12px;
}
.judul{
text-align: center;
color: #eee;
font-weight: normal;
}dan Ini hasilnya
