Pada pertemuan sebelumnya kita telah mempelajari tentang cara membuat form di PHP dan bagaimana cara memprosesnya. Kita juga telah mencoba contoh-contoh sederhana dari beberapa jenis isian form HTML.
Untuk lebih memantapkan pemahaman dan menguatkan gambaran umum tentang bagaimana mengelola data dari Form, pada pertemuan kali ini insyaallah kita akan mempelajari bagaimana cara membuat kalkulator dengan PHP.
Kita akan mencoba untuk membuat dua buah kalkulator:
- Kalkulator sederhana
- Kalkulator Scientific (yang juga sederhana)
Persiapan
Agar bisa mengikuti tutorial ini dengan baik, saya anggap anda telah:
- mempelajari dasar-dasar PHP
- dan juga telah mengikuti tutorial php tingkat menengah (tidak wajib)
Kenapa? Karena di dalam tutorial ini akan melibatkan hal-hal dasar seperti macam-macam tipe data PHP, macam-macam operator, logika percabangan dan juga variabel casting.
Buat File PHP
Langsung saja, sebelum memulai ngoding, kita buat dulu 2 buah file php sebagai berikut:
kalkulator/
├── biasa.php
└── scientific.php
Masing-masing dari 2 file tersebut akan kita gunakan untuk menampilkan form, sekaligus juga menampilkan hasilnya.
Membuat Form Kalkulator Sederhana
Kita akan mulai dari membuat form untuk tipe kalkulator pertama. Kalkulator pertama ini hanya berupa dari dua buah inputan bertipe data number, dan satu inputan berupa dropdown (select) yang berisi operator aritmatika.
Langsung saja, buka file biasa.php lalu isi sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Biasa | Jago Ngoding</title>
</head>
<body>
<h1>Kalkulator Biasa</h1>
<form>
<input type="number" name="a" placeholder="Bilangan a">
<select name="operator">
<option selected disabled>Pilih Operator</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" name="b" placeholder="Bilangan b">
<div style="margin-top: 1rem">
<button type="button" onclick="location.href = '?clear'">Clear</button>
<button type="submit">Hitung</button>
</div>
</form>
</body>
</html>
Kode program di atas akan menghasilkan sebuah form sederhana seperti ini:
Proses Kalkulator Sederhana
Seperti yang telah kita bahas pada pertemuan sebelumnya, bahwa jika atribut action dan method pada tag <form> tidak didefinisikan, itu artinya secara bawaan ia akan menggunakan method GET, dan akan menjadikan “diri sendiri” sebagai action.
Di bawah tag <form>, silakan tambahkan kode program berikut:
<?php
if ($_GET): ?>
<pre><?php echo print_r($_GET) ?></pre>
<?php
endif; ?>
Coba isi setiap input dari form yang telah kita buat, lalu klik tombol Hitung.
Kita akan mendapatkan output kira-kira seperti ini:
Mempertahankan value form sebelumnya
Jika kita perhatikan, setelah kita klik tombol Hitung, maka kita akan mendapatkan output berupa isi dari variabel $_GET. Akan tetapi, kita saksikan bahwa 3 input yang sudah kita isi, ia kembali kosong seperti tidak pernah ada data sebelumnya.
Pada step ini, kita akan coba untuk mempertahankan nilai dari inputan sebelumnya.
Ubah ketiga input dari form kalkulator menjadi seperti ini:
<input type="number" name="a" placeholder="Bilangan a" value="<?php echo @$_GET['a'] ?>">
<select name="operator">
<option <?php echo !@$_GET['operator'] ? 'selected' : '' ?> disabled>Pilih Operator</option>
<option <?php echo @$_GET['operator'] === '+' ? 'selected' : '' ?> value="+">+</option>
<option <?php echo @$_GET['operator'] === '-' ? 'selected' : '' ?> value="-">-</option>
<option <?php echo @$_GET['operator'] === '*' ? 'selected' : '' ?> value="*">*</option>
<option <?php echo @$_GET['operator'] === '/' ? 'selected' : '' ?> value="/">/</option>
</select>
<input type="number" name="b" placeholder="Bilangan b" value="<?php echo @$_GET['b'] ?>">
Penjelasan:
- Kita menambahkan attribut
valueuntuk 2 tag<input>. Atribut tersebut akan mendefinisikan nilai dari input yang bersangkutan - Kita menambahkan atribut
selectedpada tag<option>yang terpilih untuk menandakan mana<option>yang aktif. Itu dikarenakan tag<select>tidak mendukung atributvalue - Kita menggunakan tanda
@sebelum variabel$_GETagar jika key yang kita panggil tidak tersedia, ia otomatis bernilai null dan tidak terjadi error. - Kita menggunakan percabangan ternary untuk mempersingkat kode program.
Logika kalkulator
Setelah kita mengetahui isi dari variabel $_GET dengan menggunakan perintah print_r, kita juga telah mempertahankan nilai masing-masing input ketika tombol Hitung ditekan. Sekarang saatnya kita mulai menulis kode untuk menyelesaikan logika kalkulator.
Logikanya sederhana: kita akan memeriksa masing-masing operator dan akan melakukan operasi yang sesuai dengan operator yang dipilih.
Hapus kode program berikut:
<?php
if ($_GET): ?>
<pre><?php echo print_r($_GET) ?></pre>
<?php
endif; ?>
Lalu ganti seperti ini:
<?php
if ($_GET):
$a = (double) @$_GET['a'];
$b = (double) @$_GET['b'];
$operator = @$_GET['operator'];
switch ($operator) {
case '+':
$hasil = $a + $b;
break;
case '-':
$hasil = $a - $b;
break;
case '*':
$hasil = $a * $b;
break;
case '/':
$hasil = $a / $b;
break;
}
?>
<div style="margin-top: 1rem">
Hasil: <strong><?php echo $hasil ?></strong>
</div>
<?php
endif; ?>
Setelah itu kalkulator yang telah kita buat sudah bisa dicoba:
Membuat Form Kalkulator Scientific (Sederhana)
Oke, kita telah sukses membuat kalkulator sederhana dengan PHP.
Sekarang kita akan membuat kalkulator scientific, yang juga sederhana.
Langsung saja buka file scientific.php dan buat form HTML-nya sebagai mana berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Scientific Sederhana | Jago Ngoding</title>
</head>
<body>
<h1>Kalkulator Scientific Sederhana</h1>
<form>
<input type="text" name="ekspresi" placeholder="Ekspresi aritmatika" value="<?php echo @$_GET['ekspresi'] ?>">
<div style="margin-top: 1rem">
<button type="button" onclick="location.href = '?'">Clear</button>
<button type="submit">Hitung</button>
</div>
</form>
</body>
</html>
Setelah kita coba jalankan, kira-kira beginilah tampilan yang kita dapatkan:
Memproses Form Kalkulator Scientific
Lanjut, setelah form beres dibuat. Kita tambahkan aksi ketika tombol Hitung diklik.
Kita akan menggunakan fungsi eval(). Ia adalah sebuah fungsi yang bertugas untuk mengeksekusi perintah program PHP yang disimpan dalam tipe data string.
Sehingga, fungsi eval() jangan sekali-kali kita pakai di project beneran, ya! Di sini kita hanya bereksperimen saja.
Langsung saja, dibawah tag </form>, tambahkan kode program berikut:
<?php
if ($_GET):
$ekspresi = @$_GET['ekspresi'];
$hasil = eval("return {$ekspresi};"); ?>
<div style="margin-top: 1rem">
Hasil <strong><?php echo $hasil ?></strong>
</div>
<?php
endif; ?>
Jika kita perhatikan kode program di atas, jumlah barisnya jauh lebih sedikit. Karena di sini kita langsung memasukkan apa yang user inputkan ke dalam fungsi eval(). Dan fungsi tersebut akan mengembalikan nilai dari ekspresi yang user masukkan.
Ketika kita coba inputkan ekspresi matematika semisal: 35 + 100 * (9 / 3). Kita bisa langsung mendapatkan hasilnya:
Canggih bukan?
Kode Program Lengkap
Untuk kode program tutorial ini, bisa kalian akses pada link github berikut: https://github.com/jagongoding-com/php-web-dinamis/tree/master/02-kalkulator.
Pembahasan Selanjutnya
Dengan mempraktikkan tutorial ini, kita bisa mendapatkan gambaran yang lebih jelas lagi tentang bagaimana membuat dan menangani sebuah form dalam PHP.
Akan tetapi, masih ada pembahasan yang kurang: yaitu tentang validasi form. Kenapa sebuah form butuh divalidasi? Karena kita tidak tahu apa yang akan user inputkan! User bisa menginputkan data apa pun yang tidak pernah kita bayangkan, bahkan situs kita bisa diretas gara-gara inputan berbahaya dari user.
Lalu bagaimana cara melakukan validasi form di PHP? Insyaallah kita akan ambil pembahasannya pada pertemuan yang akan datang.
Tetap ikuti tutorial ini, ya! Jangan lupa share dan kabarkan ke teman-temanmu. Terima kasih banyak.
