Langsung ke konten
Belajar PHP

Tutorial Mengelola Form Isian Kalkulator PHP dari Dasar

Foto TaufiqOleh Taufiq
Belajar Mengelola Form Isian (Kalkulator PHP)

Membuat kalkulator PHP sederhana adalah salah satu proyek terbaik untuk pemula yang ingin memahami cara kerja form HTML dan pengolahan data di sisi server. Lihat juga Cara Memberi Komentar di HTML PHP CSS JavaScript. Lewat proyek ini, Anda belajar langkah demi langkah: membuat form isian di HTML, mengirim datanya ke server, memproses input dengan PHP, memvalidasi data, lalu menampilkan hasil perhitungan kembali ke halaman web. Konsep yang dipelajari di sini — menerima input, memvalidasi, mengolah, dan menampilkan hasil — persis seperti alur kerja aplikasi web nyata seperti sistem login, keranjang belanja, atau formulir pendaftaran. Tutorial ini disusun untuk pemula total: tidak perlu pengalaman pemrograman, cukup komputer, teks editor, dan server lokal seperti XAMPP.

Prasyarat: Yang Perlu Anda Siapkan

Sebelum mulai menulis kode, pastikan peralatan berikut sudah siap:

  • XAMPP / Laragon / MAMP — Server lokal untuk menjalankan PHP di komputer Anda.
  • Teks editor — VS Code, Notepad++, atau editor apa pun yang Anda nyaman.
  • Browser — Untuk mengakses hasil kerja di localhost.
  • Pengetahuan dasar PHP — Variabel, operator, dan struktur dasar PHP. Jika belum, pelajari dulu tutorial PHP dasar di infanthree.com.

Pastikan server lokal sudah berjalan.

Untuk memahami logika perhitungan dasar yang diterapkan di kalkulator ini, pelajari juga tutorial pemrograman matematika lainnya. Jalankan XAMPP Control Panel, klik Start pada Apache. Buka folder htdocs di direktori instalasi XAMPP dan buat folder baru bernama kalkulator. Semua file proyek kita akan diletakkan di folder ini.

Langkah 1: Membuat Form HTML

Buat file index.html di dalam folder kalkulator. File ini akan menampilkan form isian kepada pengguna.

HTML Snippet HTML 
<!DOCTYPE html>
<html lang="id">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kalkulator PHP Sederhana</title> <style> body { font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f2f5; } .calculator { background: white; padding: 30px 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 350px; } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: 600; color: #333; } input, select { width: 100%; padding: 10px 12px; border: 2px solid #ddd; border-radius: 6px; font-size: 16px; box-sizing: border-box; } button { width: 100%; padding: 12px; background-color: #0073aa; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; } button:hover { background-color: #005177; } </style>
</head>
<body> <div class="calculator"> <h1>Kalkulator PHP</h1> <form action="proses.php" method="POST"> <div class="form-group"> <label for="angka1">Angka Pertama:</label> <input type="number" id="angka1" name="angka1" step="any" required placeholder="Masukkan angka pertama"> </div> <div class="form-group"> <label for="operator">Operasi:</label> <select id="operator" name="operator" required> <option value="">-- Pilih Operasi --</option> <option value="tambah">+ Penjumlahan</option> <option value="kurang">- Pengurangan</option> <option value="kali">* Perkalian</option> <option value="bagi">/ Pembagian</option> <option value="pangkat">^ Pangkat</option> </select> </div> <div class="form-group"> <label for="angka2">Angka Kedua:</label> <input type="number" id="angka2" name="angka2" step="any" required placeholder="Masukkan angka kedua"> </div> <button type="submit">Hitung!</button> </form> </div>
</body>
</html>

Ada beberapa hal penting dalam form di atas:

  • action="proses.php" — Form mengirim data ke file proses.php saat tombol submit diklik.
  • method="POST" — Data dikirim lewat metode POST, lebih aman dibanding GET untuk data yang tidak ingin tampil di URL.
  • type="number" — Input hanya menerima angka, membantu validasi di sisi browser.
  • step="any" — Memungkinkan input angka desimal (pecahan).
  • required — Field wajib diisi; browser mencegah submit jika kosong.
  • <select> — Dropdown untuk memilih jenis operasi matematika.

Langkah 2: Membuat File PHP untuk Memproses Data

Buat file proses.php di folder yang sama. File ini akan menerima data dari form, memproses perhitungan, dan menampilkan hasilnya.

PHP Snippet PHP 
<?php
// proses.php - File pemrosesan kalkulator // Memeriksa apakah form telah dikirim
if ($_SERVER['REQUEST_METHOD'] === 'POST') { // Mengambil data dari form $angka1 = $_POST['angka1']; $angka2 = $_POST['angka2']; $operator = $_POST['operator']; // Validasi: pastikan semua input terisi if (empty($angka1) || empty($angka2) || empty($operator)) { die('Error: Semua field harus diisi!'); } // Mengubah tipe data string ke float $angka1 = (float) $angka1; $angka2 = (float) $angka2; // Variabel untuk menyimpan hasil dan simbol operasi $hasil = 0; $simbol = ''; // Memproses berdasarkan jenis operasi yang dipilih switch ($operator) { case 'tambah': $hasil = $angka1 + $angka2; $simbol = '+'; break; case 'kurang': $hasil = $angka1 - $angka2; $simbol = '-'; break; case 'kali': $hasil = $angka1 * $angka2; $simbol = '&times;'; break; case 'bagi': // Validasi pembagian dengan nol if ($angka2 == 0) { $hasil = 'Error'; $simbol = '/'; $pesanError = 'Tidak bisa membagi dengan nol!'; } else { $hasil = $angka1 / $angka2; $simbol = '/'; } break; case 'pangkat': $hasil = pow($angka1, $angka2); $simbol = '^'; break; default: $hasil = 'Error'; $pesanError = 'Operasi tidak dikenali!'; }
} else { // Jika diakses langsung (bukan dari form) die('Error: Akses langsung tidak diperbolehkan.');
}
?>

Langkah 3: Menampilkan Hasil Perhitungan

Sekarang tambahkan bagian tampilan HTML di bawah kode PHP di file proses.php. PHP bisa bercampur dengan HTML: tulis kode PHP untuk logika, lalu HTML untuk tampilan.

PHP Snippet PHP 
<!DOCTYPE html>
<html lang="id">
<head> <meta charset="UTF-8"> <title>Hasil Perhitungan</title> <style> body { font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f2f5; } .result-box { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-align: center; width: 400px; } .calculation { font-size: 28px; color: #333; margin: 20px 0; padding: 20px; background-color: #f8f9fa; border-radius: 8px; } .result { font-size: 36px; font-weight: bold; color: #0073aa; margin: 20px 0; } .error { color: #dc3545; font-size: 20px; } .back-btn { display: inline-block; margin-top: 15px; padding: 12px 30px; background-color: #0073aa; color: white; text-decoration: none; border-radius: 6px; font-weight: 600; } .back-btn:hover { background-color: #005177; } </style>
</head>
<body> <div class="result-box"> <h1>Hasil Perhitungan</h1> <?php if (isset($pesanError)): ?> <div class="calculation"> <?php echo htmlspecialchars($angka1); ?> <?php echo $simbol; ?> <?php echo htmlspecialchars($angka2); ?> </div> <div class="error"><?php echo htmlspecialchars($pesanError); ?></div> <?php else: ?> <div class="calculation"> <?php echo htmlspecialchars($angka1); ?> <?php echo $simbol; ?> <?php echo htmlspecialchars($angka2); ?> = </div> <div class="result"> <?php echo htmlspecialchars($hasil); ?> </div> <?php endif; ?> <a href="index.html" class="back-btn">Hitung Lagi</a> </div>
</body>
</html>

Perhatikan pola isset($pesanError) — ini cara PHP menampilkan pesan error secara kondisional. Jika ada error (misalnya pembagian dengan nol), tampilkan pesannya; jika tidak, tampilkan hasil perhitungan.

Langkah 4: Pengamanan dan Validasi Input

Keamanan input adalah hal penting bahkan untuk proyek kalkulator sederhana. Berikut langkah-langkah yang sudah diterapkan beserta penjelasannya.

Sanitasi dengan htmlspecialchars()

Fungsi htmlspecialchars() mengubah karakter HTML berbahaya seperti <, >, &, dan " menjadi entity yang aman. Ini mencegah Cross-Site Scripting (XSS) — serangan di mana penjahat menyisipkan script berbahaya ke input form Anda. Detail lengkapnya ada di dokumentasi resmi PHP: htmlspecialchars().

PHP Snippet PHP 
// BAHAYA - Jangan lakukan ini:
echo $_POST['angka1']; // AMAN - Selalu gunakan ini:
echo htmlspecialchars($_POST['angka1']);

Validasi Tipe Data

Konversi tipe data menggunakan (float) memastikan input diolah sebagai angka, bukan string. Ini mencegah error tak terduga saat operasi matematika.

PHP Snippet PHP 
// Validasi tipe data
if (!is_numeric($angka1) || !is_numeric($angka2)) { die('Error: Input harus berupa angka!');
} $angka1 = (float) $angka1;
$angka2 = (float) $angka2;

Pengecekan Pembagian dengan Nol

Pembagian dengan nol menyebabkan error fatal. Selalu cek sebelum membagi:

PHP Snippet PHP 
if ($angka2 == 0) { echo 'Error: Tidak bisa membagi dengan nol!';
} else { $hasil = $angka1 / $angka2;
}

Langkah 5: Mengelola Beberapa Form dan Operasi dalam Satu File

Untuk proyek yang lebih canggih, Anda bisa mengelola beberapa form sekaligus atau menambahkan fitur seperti riwayat perhitungan. Berikut pola dasar pengelolaan form yang bisa dikembangkan:

PHP Snippet PHP 
<?php
// Mengelola banyak form dalam satu file PHP
// Periksa form mana yang dikirim if (isset($_POST['form_kalkulator'])) { // Proses form kalkulator $angka1 = (float) $_POST['angka1']; $angka2 = (float) $_POST['angka2']; $operator = $_POST['operator']; $hasil = hitung($angka1, $angka2, $operator); } elseif (isset($_POST['form_konversi'])) { // Proses form konversi satuan $nilai = (float) $_POST['nilai']; $dari = $_POST['dari_satuan']; $ke = $_POST['ke_satuan']; $hasil = konversi($nilai, $dari, $ke);
} // Fungsi kalkulator
function hitung($a, $b, $op) { switch ($op) { case 'tambah': return $a + $b; case 'kurang': return $a - $b; case 'kali': return $a * $b; case 'bagi': return $b != 0 ? $a / $b : 'Error'; case 'pangkat': return pow($a, $b); default: return 'Operasi tidak dikenali'; }
} // Fungsi konversi satuan
function konversi($nilai, $dari, $ke) { $konversi = [ 'km_m' => 1000, 'm_km' => 0.001, 'kg_g' => 1000, 'g_kg' => 0.001, 'c_f' => function($v) { return ($v * 9/5) + 32; }, 'f_c' => function($v) { return ($v - 32) * 5/9; }, ]; $key = $dari . '_' . $ke; if (isset($konversi[$key])) { $faktor = $konversi[$key]; return is_callable($faktor) ? $faktor($nilai) : $nilai * $faktor; } return 'Konversi tidak tersedia';
}
?>

Cara Menjalankan Kalkulator PHP Sederhana

  1. Pastikan Apache XAMPP sudah berjalan (indikator hijau di samping “Apache”).
  2. Buka browser, akses http://localhost/kalkulator/.
  3. Masukkan dua angka, pilih operasi, lalu klik Hitung!.
  4. Hasil perhitungan akan ditampilkan di halaman baru.
  5. Klik Hitung Lagi untuk kembali ke form.

Troubleshooting: Error Umum yang Sering Muncul

  • “Undefined index” — Terjadi saat Anda mengakses $_POST['nama'] tapi field tersebut tidak dikirim. Solusi: gunakan isset() atau empty() sebelum mengakses.
  • “Headers already sent” — Terjadi jika ada output (spasi kosong atau HTML) sebelum fungsi header(). Pastikan tidak ada output sebelum redirect.
  • Halaman kosong — Kemungkinan error PHP tersembunyi. Tambahkan error_reporting(E_ALL); ini_set('display_errors', 1); di baris paling atas untuk debugging.
  • Form tidak terkirim — Pastikan atribut action mengarah ke file PHP yang benar dan nama field di HTML cocok dengan key di $_POST.

Pengembangan Lanjutan

Setelah menguasai kalkulator PHP sederhana ini, Anda bisa mengembangkan fitur-fitur berikut:

  • Riwayat perhitungan — Simpan setiap perhitungan ke database MySQL dan tampilkan sebagai daftar di bawah kalkulator.
  • Ajax Calculator — Gunakan JavaScript fetch() untuk mengirim data tanpa reload halaman, sehingga pengalaman pengguna terasa lebih mulus.
  • Kalkulator Ilmiah — Tambahkan operasi trigonometri, logaritma, dan akar kuadrat menggunakan fungsi built-in PHP seperti sin(), log(), sqrt().
  • Konversi Mata Uang — Integrasikan API mata uang untuk konversi real-time.

Kesimpulan

Proyek ini memberikan fondasi kuat dalam pengelolaan form HTML dengan PHP — sebuah skill fundamental yang akan Anda pakai di setiap proyek web development. Mulai dari membuat form, mengirim data dengan POST, memproses di sisi server, memvalidasi input, hingga menampilkan hasil. Untuk pendalaman operasi aritmatika di PHP, kunjungi dokumentasi resmi PHP: Arithmetic Operators. Selamat mencoba dan jangan ragu mengembangkannya menjadi proyek yang lebih besar!

Hal yang sering ditanyakan seputar Form Kalkulator PHP

Metode HTTP apa yang paling cocok untuk form kalkulator sederhana?

Metode POST atau GET; POST lebih disarankan agar input angka tidak memenuhi URL baris alamat.

Bagaimana cara mencegah error Division by Zero pada kalkulator PHP?

Selalu validasi nilai input pembagi dengan kondisi logika: if ($angka2 == 0) tampilkan pesan error sebelum melakukan operasi pembagian.

Fungsi sanitasi apa yang wajib diterapkan pada input form kalkulator?

Gunakan filter_var($input, FILTER_VALIDATE_FLOAT) atau is_numeric() untuk memastikan data yang masuk benar-benar angka.

kalkulator
Komentar

Memuat komentar…

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan.