Pemrograman Web: Tugas Membuat Kalkulator

AI

Berikut adalah contoh kode untuk membuat web kalkulator menggunakan pemrograman PHP dengan dua isian untuk angka dan pilihan drop down untuk memilih operator matematika:

<!DOCTYPE html>
<html>
<head>
	<title>Kalkulator</title>
</head>
<body>
	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
		<label for="angka1">Angka Pertama:</label>
		<input type="number" id="angka1" name="angka1"><br><br>
		<label for="angka2">Angka Kedua:</label>
		<input type="number" id="angka2" name="angka2"><br><br>
		<label for="operator">Operator:</label>
		<select id="operator" name="operator">
			<option value="tambah">+</option>
			<option value="kurang">-</option>
			<option value="kali">*</option>
			<option value="bagi">/</option>
		</select><br><br>
		<input type="submit" value="Hitung">
	</form>

	<?php
		if ($_SERVER["REQUEST_METHOD"] == "POST") {
			$angka1 = $_POST["angka1"];
			$angka2 = $_POST["angka2"];
			$operator = $_POST["operator"];

			switch ($operator) {
				case "tambah":
					$hasil = $angka1 + $angka2;
					break;
				case "kurang":
					$hasil = $angka1 - $angka2;
					break;
				case "kali":
					$hasil = $angka1 * $angka2;
					break;
				case "bagi":
					$hasil = $angka1 / $angka2;
					break;
			}

			echo "<br>Hasil: " . $hasil;
		}
	?>
</body>
</html>

Penjelasan kode:

Baris 6-18: Membuat form HTML dengan dua isian angka dan pilihan operator matematika menggunakan tag <input> dan <select>.
Baris 20-26: Memeriksa apakah form telah disubmit menggunakan metode POST.
Baris 27-29: Mengambil nilai dari isian angka dan operator yang dipilih.
Baris 31-41: Menggunakan switch untuk melakukan operasi matematika yang sesuai dengan operator yang dipilih.
Baris 43: Menampilkan hasil operasi menggunakan echo.

Dengan kode di atas, pengguna dapat memasukkan dua angka dan memilih operator matematika untuk melakukan operasi matematika yang sesuai. Hasilnya akan ditampilkan di bawah tombol "Hitung".

Tugas membuat kalkulator

index.php

<html>
<head>
    <title>Kalkulator Dengan PHP</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    <body>

        <?php
            if(isset($_POST['hitung'])){
                $bil1 = $_POST['bil1'];
                $bil2 = $_POST['bil2'];
                $operasi = $_POST['operasi'];
                
                switch ($operasi) {
                    case 'tambah':
                        $hasil = $bil1 + $bil2;
                        break;
                    case 'kurang':
                        $hasil = $bil1 - $bil2;
                        break;
                    case 'kali':
                        $hasil = $bil1 * $bil2;
                        break;
                    case 'bagi':
                        $hasil = $bil1 / $bil2;
                        break;
                }
            }
        ?>

        <div class="kalkulator">
            <h4 class="judul">KALKULATOR SEDERHANA</h4>
            <form method="post" action="">
                <input type="text" name="bil1" class="bil" placeholder="Bilangan ke 1" required/>
                <input type="text" name="bil2" class="bil" placeholder="Bilangan ke 2" required/>
                <select class="opt" name="operasi">
                    <option value="tambah">+</option>
                    <option value="kurang">-</option>
                    <option value="kali">x</option>
                    <option value="bagi">/</option>
                </select>
                
                <input type="submit" name="hitung" value="Hitung" class="tombol"/>
                <input type="reset" value="Reset" class="tombol"/>
            </form>

            <?php if(isset($_POST['hitung'])){ ?>
            
            <input type="text" value="<?php echo $hasil; ?>" class="hasil"/>
            
            <?php } else { ?>            
            <input type="text" value="0" class="hasil"/>            
            <?php } ?>

        </div>
    </body>
</html>

style.css

body{
    background: #68F3F8;
    font-family: sans-serif;
}

.kalkulator{
    width: 300px;
    background: #0081CF;
    padding: 10px 20px 30px 20px;
    border-radius: 5px;
    box-shadow: 0px 10px 10px 0px #FFFFFF;
}

.bil{
    width: 280px;
    margin: 10px;
    border: none;
    font-size: 14pt;
    border-radius: 5px;
    padding: 10px;
}

.opt{
    font-size: 14pt;
    border: none;
    width: 280px;
    margin: 10px;
    border-radius: 5px;
    padding: 10px;
}

.tombol{
    background: #A9A9A9;
    margin: 10px;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 5px;
    padding: 10px 20px;
    color: #eee;
    font-size: 15pt;
    border-bottom: 2px solid #64950;
}

.hasil{
    width: 280px;
    margin: 10px;
    border: none;
    font-size: 14pt;
    border-radius: 5px;
    padding: 10px;
    background: #eee;
}

.judul{
    text-align: center;
    color: #eee;
    font-weight: 300px;
}