This code implements a simple web-based calculator using PHP and...

February 4, 2025 at 11:44 AM

<?php
$angka1 = "";
$angka2 = "";
$operator = "";
$hasil = "";
$error = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $angka1 = isset($_POST["angka1"]) ? floatval($_POST["angka1"]) : null;
    $angka2 = isset($_POST["angka2"]) ? floatval($_POST["angka2"]) : null;
    $operator = $_POST["operator"] ?? "";

    if (!is_numeric($angka1) || !is_numeric($angka2)) {
        $error = "Masukkan angka yang valid.";
    } else {
        switch ($operator) {
            case "+":
                $hasil = $angka1 + $angka2;
                break;
            case "-":
                $hasil = $angka1 - $angka2;
                break;
            case "*":
                $hasil = $angka1 * $angka2;
                break;
            case "/":
                if ($angka2 == 0) {
                    $error = "Tidak dapat membagi dengan nol!";
                } else {
                    $hasil = $angka1 / $angka2;
                }
                break;
            default:
                $error = "Pilih operasi yang valid, anjing!";
                break;
        }
    }
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Sederhana</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
    <div class="bg-white p-8 rounded-lg shadow-lg w-96">
        <h2 class="text-2xl font-bold text-center mb-4">Kalkulator Sederhana</h2>
        <form method="POST" class="space-y-4">
            <input type="text" name="angka1" class="w-full p-2 border rounded-md" placeholder="Masukkan angka pertama" required>
            <select name="operator" class="w-full p-2 border rounded-md">
                <option value="+">+ (tambah)</option>
                <option value="-">- (kurang)</option>
                <option value="*">× (kali)</option>
                <option value="/">÷ (bagi)</option>
            </select>
            <input type="text" name="angka2" class="w-full p-2 border rounded-md" placeholder="Masukkan angka kedua" required>
            <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700">Hitung</button>
        </form>
        <?php if ($hasil !== ""): ?>
            <p class="mt-4 p-3 bg-green-200 text-green-800 text-center rounded-md">Hasil: <?= $hasil ?></p>
        <?php endif; ?>
        <?php if ($error !== ""): ?>
            <p class="mt-4 p-3 bg-red-200 text-red-800 text-center rounded-md">Error: <?= $error ?></p>
        <?php endif; ?>
    </div>
</body>
</html>

This code implements a simple web-based calculator using PHP and HTML with Tailwind CSS for styling.

Key Features of the Code:

Input Handling:
- The user can enter two numbers (angka1 and angka2) and select an operator (+, -, *, or /).
- These inputs are sent to the server via an HTTP POST request upon form submission.
Validation:
- The server-side code verifies that both inputs are numeric.
- If either input is not a valid number, an error message (Masukkan angka yang valid.) is displayed.
Calculator Functionality:
- Based on the selected operator:
  - + performs addition.
  - - performs subtraction.
  - * performs multiplication.
  - / performs division. If the second number is 0, an error message (Tidak dapat membagi dengan nol!) is displayed.
Error Handling:
- An error message is displayed for invalid inputs or unsupported operators.
Showing Results:
- If no errors occur, the result of the calculation is displayed below the form.
Styling:
- The interface is styled with Tailwind CSS for a modern look.

Processing Flow:

The user fills in the form with:
- Two numbers.
- An operator (+, -, *, /).
Upon submission, the PHP script processes the inputs:
- It checks if the inputs are valid.
- It performs the chosen mathematical operation if valid.
- It generates an error or result based on the calculations.
The result or error message is displayed below the form.

Example Usage:

Input:
- angka1: 10
- operator: +
- angka2: 5
Result: Hasil: 15
Input:
- angka1: 12
- operator: /
- angka2: 0
Error: Tidak dapat membagi dengan nol!

Notes:

The message for an unsupported operator (Pilih operasi yang valid, anjing!) contains an informal word ("anjing" translates to "dog" but is sometimes used as slang). Depending on the context, this might need to be adjusted for professionalism.
Use of floatval ensures inputs are converted to numerical format for calculations.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr