Membuat kalkulator sederhana dengan php

Hallo guys, sudah lama nih mimin gak upload artikel ataupun tutorial seperti biasanya, maklumi saja kesibukan sekolah yang akhir-akhir ini padet jadi untuk sementara waktu fakum dari blogging dan fokus ke sekolah dulu. Tapi kali ini mimin kembali lagi dengan membawakan tutorial sederhana tapi insyaallah bermanfaat untuk semua Aamiin.

Ya kali ini kita akan coba membuat kalkulator sederhana menggunakan PHP. Yaps sekarang kita coba fokuskan pada pemrograman kita, di sini saya menggunakan fungsi dari "switch" untuk memberikan nilai pada perhitungan kita.

Untuk Source Codenya silahkan copy saja :

<!DOCTYPE html>

<html>

<head>

<title>Aplikasi Kalkulator sederhana | Malming.web.id</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<?php

if (isset($_POST['hasil'])) {

$angka1 = $_POST['angka1'];

$angka2 = $_POST['angka2'];

$proses = $_POST['proses'];

switch ($proses) {

case 'tambah':

$total = $angka1+$angka2; // jika angka di tambah

break;

case 'kurang':

$total = $angka1-$angka2; // jika angka di kurangi

break;

case 'kali':

$total = $angka1*$angka2; // jika angka di kali

break;

case 'bagi':

$total = $angka1/$angka2; // jika angka di bagi

break;

}

}

?>

<div class="kalkulator">

<div class="judul">Kalkulator Sederhana</div>

<form method="post" action="index.php">

<input type="text" name="angka1" placeholder="Masukan angka pertama" class="angka">

<input type="text" name="angka2" placeholder="Masukan angka kedua" class="angka">

<select name="proses" class="cara">

<option value="tambah">+</option>

<option value="kurang">-</option>

<option value="kali">X</option>

<option value="bagi">:</option>

</select>

<input type="submit" name="hasil" class="tombol">

</form>

<?php if (isset($_POST['hasil'])) { ?>

<input type="text" value="<?php echo $total; ?>" class="angka" >

<?php } else { ?>

<input type="text" value="0" class="angka">

<?php } ?>

</div>

<p>&nbsp</p>

<p>&nbsp</p>

<center>Copyright &copy Malming.web.id</center>

</body>

</html>

Nah simpan file tadi dengan nama index.php

Sampai sini aslinya kita sudah berhasil membuat kalkulator sederhana, akan tetapi tampilannya masih terasa kurang enak di pandang, kurang lebih tampilannya seperti ini.

Jika kita ingin mengubah tampilannya agar lebih menarik, lebih baik kita tambahkan CSS nya.

Berikut Source code CSS-nya.

body {

background: #91bfbc;

}

.judul{

text-align: center;

font-family: "kristen itc";

font-size: 16pt;

}

.kalkulator {

width: 335px;

background: #95c3c0;

margin: 50px auto;

border-radius: 5px;

}

.tombol {

width: 110px;

display: block;

margin: 0px auto;

background: #bdc3c7;

border: none;

font-family: 'Lato', sans-serif;

font-size: 14px;

padding: 15px 18px;

transition: 0.5s;

border-radius: 99em;

color: #333;

}

.tombol:hover {

cursor: pointer;

background: #a7b1b7;

}

.angka {

margin: 5px;

background: #2c3e50;

transition: 0.5s;

text-align: center;

box-shadow: none;

border: none;

font-size: 16pt;

border-radius: 5px;

padding: 10px;

width: 300px;

}

.angka:fokus {

border: 2px solid #ecf0f1;

outline: 0;

}

.cara {

font-size: 16pt;

border: none;

width: 315px;

margin: 5px;

border-radius: 5px;

padding: 10px;

}

Copy Source code di atas dan save dengan nama "style.css" tanpa tanda kutip. Maka hasilnya akan seperti ini.

Nah bagaimana? terlihat lebih menarik bukan? Mimin sarankan saat kalian meng copy script di atas mimin sarankan dari pada kalian asal copas atau jiplak saja lebih baik kalian menuliskan ulang code tersebut, walaupun dengan melihat contoh source code orang, tapi itu lebih baik dari pada cuman sebatas copas saja, karena jika kita hanya cuman memodalkan sebatas copy-paste saja maka kemampuan kita hanya sebatas itu-itu saja, tetapi jika kita mencoba menulis ulang code tersebut, walaupun dengan melihat contoh yang sudah di buat oleh orang lain, setidaknya kita akan paham dengan sendirinya maksud dari tiap code tersebut.

Nah jika kalian ingin langsung mendownload Source code di atas kalian bisa downloadnya di artikel ini :

Downloads

password : malming

4 komentar

Balas

Ikut Pintar

9 June 2017 at 14:18

wahh keren sekali tutorialnya, hampir sama seperti menggunakan visual basic ya penggunannya

Anonymous

9 June 2017 at 14:27

bagus yah gan berguna juga sih buat blog blog tertentu keren deh gan

Unknown

9 June 2017 at 14:55

saya pernah belajar PHP, intenet programming ya, sulit banget, sampai sekarang belum bisa-bisa, tapi tutorial ini mau saya coba dulu gan, sepertinya asyik.

Cheryl

9 June 2017 at 16:05

ijin test download
sangat bermanfaat artikelnya

Peraturan berkomentar di blog Malming

1. Gunakan bahasa yang sopan.
2. Dilarang menyisipkan url blog/website lain.
3. Tidak mengandung unsur pornografi.
4. Berkomentar serelevan mungkin.
EmoticonEmoticon

Share this

4 komentar