You are currently viewing Tutorial Membuat Kalkulator Sederhana Menggunakan PHP

Tutorial Membuat Kalkulator Sederhana Menggunakan PHP

  • Post category:PHP
  • Post comments:0 Comments

Tutorial Membuat Kalkulator Sederhana Menggunakan PHP – Hallo teman–teman semua, selamat datang kembali di situs resmi dari Kecoak Sakti Official yaitu BlogBelajarOfficial. Pada artikel kali ini kita akan belajar tentang cara membuat kalkulator sederhana menggunakan Pemrograman PHP. Pada proses pembuatan kalkulator ini kita menggunakan beberapa operator Artimatika dasar. Operator Aritmatika merupakan operator yang digunakan untuk mengolah suatu bilangan. Adapun beberapa operator aritmatika tersebut adalah Penjumlahan, Pengurangan, Pembagian, Perkalian dan lain sebagainya.

Pada Tutorial Membuat Kalkulator Sederhana ini kita akan mencoba menggunakan dan menggabungkan beberapa materi yang telah kita perlajari sebelumnya. Salah satu materi yang kita gunakan pada tutorial kali ini adalah materi tentang Request Method pada PHP.  Adapun Method yang kita gunakan pada Pembuatan Kalkulator Sederhana ini adalah method POST ($_POST).

Baca Juga: Mengenal Konsep Request Method Pada Form Menggunakan PHP

Membuat Kalkulator Sederhana Menggunakan Pemrograman PHP

Tahapan pertama sebelum membuat Kalkulator sederhana ini yaitu kita harus membuat sebuah Folder Project dan file PHP dengan nama kal_standar.php. File ini kita letakkan pada Folder Project yang kita buat sebelumnya. Jika teman – teman menggunakan XAMPP CONTROL PANEL maka lokasi tempat peletakan atau pembuatan Folder project ini berada pada folder htdocs. Pada Project kali ini nama folder Project dari kalkulator ini adalah Kalkulator. Sehingga jika ingin di akses maka kita harus mengakses lokasi Folder Project kita pada Web Browser kita.

Tahapan Pertama kita harus membuat sebuah file dengan nama kal_standar.php pada file Project kita dan menyiapkan tampilan dari project Kalkulator yang kita buat ini.

<!DOCTYPE html>
<html>
<head>
    <title>Kalkulator</title>
</head>
<body>
    <form method="POST">
        <div class="kal">
        <h1>Kalkulator Sederhana</h1>
        <hr>
        <p>Bilangan Pertama :</p>
        <input class="FormInput" type="number" name="bil1" value="0">
        <p>Bilangan Kedua :</p>
        <input class="FormInput" type="number" name="bil2" value="0">
        <p>Aksi</p>
        <select class="FormSelect" name="aksi">
            <option value="tambah">Tambah (+)</option>
            <option value="kurang">Kurang (-)</option>
            <option value="kali">Kali (X)</option>
            <option value="bagi">Bagi (/)</option>
        </select>
        <button type="submit" name="kirim">Hitung</button>
        <?php 
            if (empty($output)) {
                $hasil = 0;
            } else {
                $hasil = $output;
            }
         ?>
        <input class="FormHasil" type="number" value="<?= $hasil ?>" readonly>
    </div>
    </form>
</body>
</html>

Sekarang kita tambahkan fungsi PHP untuk memproses inputan dari form HTML diatas. Fungsi PHP ini diletakkan pada file yang sama ini yaitu kal_standar.php  tepatnya pada posisi atas dari sintak <form>.

<?php 
    if (isset($_POST['kirim'])) {
        $bil1 = $_POST['bil1'];
        $bil2 = $_POST['bil2'];
        $aksi = $_POST['aksi'];

        switch ($aksi) {
            case 'tambah':
                $output = $bil1 + $bil2;
                break;
            case 'kurang':
                $output = $bil1 - $bil2;
                break;
            case 'kali':
                $output = $bil1 * $bil2;
                break;
            case 'bagi':
                $output = $bil1 / $bil2;
                break;			
        }
    }
?>

Pada Project Kalkulator Sederhana ini, kita menggunakan Sintak atau Method POST dalam pengiriman data untuk di proses atau dihitung. Sedangkan untuk proses perhitungan data bilangan kita menggunakan Sintak SWITCH CASE untuk memproses permintaan aksi yang akan dilakukan. Seperti pemilihan aksi TAMBAH, KURANG, BAGI dan KALI.

Baca Juga: Mengenal Konsep Request Method Pada Form Menggunakan PHP

Pada sintak ini juga kita menggunakan Sintak/function isset(). Sintak/function isset() berfungsi untuk memeriksa ketersediaan data dari suatu variabel. Misalnya pada project ini, sintak isset() kita gunakan untuk memeriksa hasil kiriman data bilangan ketika button atau tombol Hitung di tekan.

Tahapan selanjutnya kita akan menambahkan Desain atau Style dari Project kalkulator yang kita buat ini. Desain ini kita tambahkan menggunakan sintak CSS yang diletakkan pada file project ini juga. Peletakan sintak CSS ini berada pada didalam tag <head> tepatnya di bawah sintak <title>.

<style type="text/css" media="screen">
    body {
        background: #F2F2F2;
    }

    .kal {
        width: 350px;
        height: 490px;
        border: 1px solid black;
        margin: 80px auto;
        padding: 10px;
        border-radius: 10px;
        background-color: black;
    }

    h1 {
        text-align: center;
        color: white;
    }

    .FormInput {
        padding: 10px;
        display: block;
        width: 94%;
        font-size: 15px;
        border-radius: 5px;
        border: none;
    }

    .FormSelect {
        padding: 10px;
        display: block;
        width: 100%;
        font-size: 15px;
        border-radius: 5px;
        border: none;
        font-weight: bold;
    }

    .FormHasil {
        margin-top: 10px;
        padding: 30px 10px;
        display: block;
        width: 94%;
        font-size: 30px;
        border-radius: 5px;
        border: none;
    }

    button {
        padding: 10px;
        font-weight: bold;
        margin-top: 10px;
        width: 100%;
        font-size: 20px;
        background-color: red;
        color: white;
        border: none;
        cursor: pointer;
    }

    p {
        font-weight: bold;
        margin-bottom: 5px;
        color: white;
    }
</style>

Jika teman-teman sudah mengikuti semua langkah-langkah diatas maka selesai sudah proses pembuatan kalkulator Sederhana menggunakan PHP ini selesai. Kemudian kita jalankan project ini pada Browser kita dengan mengakses halaman localhost lalu panggil folder project kita dan panggil file PHP yang kita gunakan.

http://localhost/LatihanPHP/Kalkulator/kal_standar.php

Disini contohnya nama project saya yaitu Kalkulator Sedangkan nama file Project PHP kita adalah kal_standar.php . Jadi kita panggil saja nama project dan file project kita pada browser kita. Setelah itu akan muncul hasil seperti berikut ini.

Sekarang kita coba setiap fungsi – fungsi dari kalkulator sederhana ini. Disini contohnya kita menggunakan fungsi tambah dimana Bilangan Pertama = 70 dan Bilangan Kedua = 30. Maka hasil dari Kalkulator ini akan seperti gambar dibawah ini.

Sekian tutorial Membuat Kalkulator Sederhana menggunakan Pemrograman PHP. Untuk Project lengkapnya dapat didownload pada link ((GITHUB)) kami ini.

Leave a Reply