Dasar - dasar PHP
Pada kesempatan kali ini saya akan membahas dasar-dasar php dengan membuat sebuah kalkulator online. Kurang lebih tampilan kalkulatornya seperti ini:
bagaimana proses pembuatannya? langsung intip script dibawah ini. Digambar sudah saya beri penjelasan (zoom).
<!DOCTYPE html> <!-- deklarasi html5 -->
<html> <!-- mendefinisikan dokumen sebagai HTML -->
<head> <!-- Judul Yang ada di tab browser -->
<title>Coba PHP</title>
<script> // deklarasi java script
function validasi(form){ //fungsi form dengan nama validasi
if (form.angka1.value==""){//kondisi jika inputfield Angka1 dari form kosong
alert ("Mohon isi data Angka 1");//muncul pemberitahuan
form.angka1.focus();//kursor akan fokus di inputfield Angka1 dari form
return(false);//mengembalikan nilai false jika inputfield tidak kosong
}
if (form.angka2.value==""){//kondisi jika inputfield Angka2 dari form kosong
alert ("Mohon isi data Angka 2");//muncul pemberitahuan
form.angka2.focus();//kursor akan fokus di inputfield Angka2 dari form
return(false);//mengembalikan nilai false jika inputfield tidak kosong
}
return(true);//mengembalikan nilai benar dari fungsi
}
</script> <!-- akhir dari statement java script -->
</head> <!-- akhir dari statement head -->
<body bgcolor=#DCDCDC> <!-- mendefinisikan isi web dengan warna background Gainsboro -->
<h1 align="center"><font face="Arial Narrow" color="#483D8B">KALKULATOR ONLINE</h1>
<!-- h1 untuk deklarasi heading atau judul yang ada di body, dengan gaya rata tengah, font Arial narrow, warna Darkslateblue -->
<form onSubmit="return validasi(this)" method="post">
<!-- deklarasi form, onSubmit adalah perintah yang digunakan ketika input bertype submit diklik,
maka menjalankan perintah function dari form ini,
method post digunakan untuk tidak menampilkan nilai variabel yang di inputkan di URL-->
<table border="1" align="center" cellspacing="0" cellpadding="2">
<!-- pembuatan tabel dengan rata tengah, border 1px, cellspacing atau jarak antara border dan tabel sebesar 0px
cellpadding atau jarak border sisi dalam tabel dengan text sebesar 2px -->
<!-- isi dari tabel -->
<tr> <!-- baris1 -->
<td colspan="2" align="center">Angka 1</td> <!-- kolom 1, colspan digunakan untuk menggabungkan atau istilahnya merge kolom-->
<td colspan="2" align="center">Angka 2</td> <!-- kolom 2, colspan digunakan untuk menggabungkan atau istilahnya merge kolom-->
</tr>
<tr> <!-- baris2 -->
<td colspan="2"><input type="number" name="angka1"></td>
<td colspan="2"><input type="number" name="angka2"></td>
<!-- inputfield dengan tipe data number supaya jika di isi selain angka muncul pemberitahuan,
name untuk inisialisasi field -->
</tr>
<tr> <!-- baris3 -->
<td align="center"><input type="submit" name="jumlah" style="width: 50px" value="+"></td> <!-- kolom 1 -->
<td align="center"><input type="submit" name="kurang" style="width: 50px" value="-"></td> <!-- kolom 2 -->
<td align="center"><input type="submit" name="kali" style="width: 50px" value="x"></td> <!-- kolom 3 -->
<td align="center"><input type="submit" name="bagi" style="width: 50px" value="/"></td> <!-- kolom 4 -->
<!-- inputfield dengan tipe submit atau button dengan rata tengah,
name untuk set variabel php, style untuk merubah ukuran button-->
</tr>
<tr> <!-- baris4 -->
<?php //awal script php
if(isset($_POST["jumlah"])){ //isset berfungsi untuk mengecek apakah variabel "jumlah" sudah diset atau belum
$hasil = $_POST["angka1"] + $_POST["angka2"];
//karena variabel jumlah sudah diset dibutton pertama, maka variabel menjalankan perintah penjumlahan
}
if(isset($_POST["kurang"])){ //isset berfungsi untuk mengecek apakah variabel "kurang" sudah diset atau belum
$hasil = $_POST["angka1"] - $_POST["angka2"];
//karena variabel kurang sudah diset dibutton pertama, maka variabel menjalankan perintah pengurangan
}
if(isset($_POST["kali"])){ //isset berfungsi untuk mengecek apakah variabel "kali" sudah diset atau belum
$hasil = $_POST["angka1"] * $_POST["angka2"];
//karena variabel kali sudah diset dibutton pertama, maka variabel menjalankan perintah perkalian
}
if(isset($_POST["bagi"])){ //isset berfungsi untuk mengecek apakah variabel "bagi" sudah diset atau belum
$hasil = $_POST["angka1"] / $_POST["angka2"];
//karena variabel bagi sudah diset dibutton pertama, maka variabel menjalankan perintah pembagian
}
?> <!-- akhir script php --> <td colspan="2" align="right">HASIL</td> <!-- kolom 1 -->
<td colspan="2"><input type="text" name="hasil" disabled value="<?php echo $hasil;?>"></td> <!-- kolom 2 -->
<!-- inputfield yang digunakan untuk menampilkan hasil operasi matematika, disable supaya tidak bisa diedit, value atau nilainya diambil dari variabel hasil di php -->
</tr>
</table> <!-- akhir dari statement table -->
</form> <!-- akhir dari statement form -->
</body> <!-- akhir dari statement body -->
</html>
saya menggunakan function java script untuk notifikasi eror jika inputfield kosong, tampilan eror yang muncul seperti gambar dibawah ini:
type yang saya gunakan untuk inputfieldnya adalah number, supaya jika di isi selain angka muncul notifikasi bahwa field harus di isi angka. Screenshotnya seperti gambar dibawah ini:
dan ketika semua inputan berupa angka, hasilnya seperti ini:
untuk yang kurang jelas dan mau download file phpnya di sini
sekian dulu tutorial mengenai dasar-dasar php. Kita bertemu di kesempatan lain. Terima Kasih.
untuk yang kurang jelas dan mau download file phpnya di sini
sekian dulu tutorial mengenai dasar-dasar php. Kita bertemu di kesempatan lain. Terima Kasih.
Tidak ada komentar :
Posting Komentar