Laman

Rabu, 08 Juni 2011

Kalkulator Sederhana Menggunakan HTML + PHP

Kalkulator merupakan alat sederhana yang biasa kita pakai khusus untuk menghitung. Walau sebenarnya komputer juga memiliki fungsi yang sama, hanya saja, kalkulator lebih dominan dibanding komputer.
Sudah terlalu banyak program aplikasi alat hitung di dalam komputer dan tersebar untuk siap unduh di dunia maya. Sangkin banyaknya, terkadang percuma juga membuatnya. Jangan berfikir sudah banyak sehingga kita menjadi malas untuk membuatnya.
Dengan mencoba untuk membuatnya, setidaknya kita tau bagaimana fungsi-fungsi yang ada di dalam sebuah kalkulator itu. Di bawah ini terdapat contoh membuat kalkulator sederhana menggunakan HTML+PHP yang terbilang cukup mudah.

Langkah pertama :
Membuat rangkaian dasar atau interface dari kalkulator kita, masukkan kode seperti berikut :

"
<?//calculator?>
<html>
<head>
            <title>Adorable-Calculator</title>
</head>
<bodY>
<table border="0" cellspacing="0" cellpadding="0" bgcolor="grey" width="276">
            <tr>
                        <td width="10">
                        </td>
                        <td>
                                    <font face="Franklin Gothic Book" color="white" size="2">KALKULATOR</font>
                        </td>
            </tr>
            <tr height="3">
                        <td>
                        </td>
                        <td>
                        </td>
            </tr>
</table>

            <form action="calfunction.php" method="get" target="hasil">
            <table border="0" cellspacing="0" cellpadding="0" bgcolor="grey">
            <tr>
                        <td>
                        <table border="0" cellspacing="0" cellpadding="0">
                                    <tr height="3"><td></td></tr>
                                    <tr>
                                                <td width="3"></td>
                                                <td bgcolor="white" align="center" valign="center">
                                                            <iframe name="hasil" frameborder="0" width="155" height="80"></iframe>
                                                </td>
                                    </tr>
                                    <tr height="2">
                                                <td></td>
                                    </tr>
                                    <tr>
                                                <td></td>
                                                <td align="center" valign="center">
                                                            <input type="text" name="input_number1" size="8" maxlength="12">
                                                            <input type="text" name="input_number2" size="9" maxlength="12">
                                                </td>
                                    </tr>
                                    <tr height="3"><td></td></tr>
                        </table>
                        </td>
                       
                        <td width="3">
                        </td>
                       
                        <td>
                        <table border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="+">
                                                </td>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="%">
                                                </td>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="sqrt">
                                                </td>
                                    </tr>
                                    <tr height="5">
                                                <td>
                                                </td>
                                    </tr>
                                    <tr>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="-">
                                                </td>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="^2">
                                                </td>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="^3">
                                                </td>
                                    </tr>
                                    <tr height="5">
                                                <td>
                                                </td>
                                    </tr>
                                    <tr>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="*">
                                                </td>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="1/x">
                                                </td>
                                    </tr>
                                    <tr height="5">
                                                <td>
                                                </td>
                                    </tr>
                                    <tr>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="/">
                                                </td>
                                                <td align="center">
                                                            <input type="submit" name="opt" value="CE">
                                                </td>
                                    </tr>
                        </table>
                        </td>
                        <td width="3">
                        </td>
            </tr>
            <tr>
                        <td>
                                    <table border="0" cellspacing="0" cellpadding="0" bgcolor="grey">
            <tr height="3">
                        <td>
                        </td>
                        <td>
                        </td>
            </tr>
            <tr>
                        <td width="10">
                        </td>
                        <td>
                                    <font face="Franklin Gothic Book" color="white" size="2">kalkulator&copy;2011 </font>
                        </td>
            </tr>
            <tr height="3">
                        <td>
                        </td>
                        <td>
                        </td>
            </tr>
</table>
                        </td>
            </tr>
            </table>
            </form>
</body>
</html> " 


Jika menggunakan XAMPP, save file tersebut di C:\xampp\htdocs\calculator\index.html
Langkah kedua :
Pada langkah kedua, buatlah file fungsi seperti berikut.
"
<html>
<head><title></title></head>
<body bgcolor="white">
<?php
            $input_number1 = $_GET['input_number1'];
            $input_number2 = $_GET['input_number2'];
            $opt= $_GET['opt'];
            $hasil = 0;
                       
            $input_number1 =  $input_number1 / 1;
            $input_number2 = $input_number2 / 1;
           
            if($opt=="+")
            {
                        $hasil=$input_number1+$input_number2;
                        echo "<font face='Terminal'>";
                        echo "$hasil";
                       
                        //simpan ke log
                        $file='C:\xampp\htdocs\calculator\log.txt';
                        $fo=fopen($file,'w');
                        $data=$hasil;
                        fwrite($fo,$data);
                        fclose($fo);
            }
            else if($opt=="-")
            {
                        $hasil=$input_number1-$input_number2;
                        echo "<font face='Terminal'>";
                        echo "$hasil";
                       
                        //simpan ke log
                        $file='C:\xampp\htdocs\calculator\log.txt';
                        $fo=fopen($file,'w');
                        $data=$hasil;
                        fwrite($fo,$data);
                        fclose($fo);
            }
            else if($opt=="*")
            {
                        $hasil=$input_number1*$input_number2;
                        echo "<font face='Terminal'>";
                        echo "$hasil";
                       
                        //simpan ke log
                        $file='C:\xampp\htdocs\calculator\log.txt';
                        $fo=fopen($file,'w');
                        $data=$hasil;
                        fwrite($fo,$data);
                        fclose($fo);
            }
            else if($opt=="/")
            {
                        $hasil=$input_number1 / $input_number2;
                        echo "<font face='Terminal'>";
                        echo "$hasil";
                       
                        //simpan ke log
                        $file='C:\xampp\htdocs\calculator\log.txt';
                        $fo=fopen($file,'w');
                        $data=$hasil;
                        fwrite($fo,$data);
                        fclose($fo);
            }
            else if($opt=="%")
            {
                        $hasil=($input_number1 * $input_number2) / 100;
                        echo "<font face='Terminal'>";
                        echo "$hasil";
                       
                        //simpan ke log
                        $file='C:\xampp\htdocs\calculator\log.txt';
                        $fo=fopen($file,'w');
                        $data=$hasil;
                        fwrite($fo,$data);
                        fclose($fo);
            }
            else if($opt=="^2")
            {
                        $hasil1=($input_number1 * $input_number1);
                        $hasil2=($input_number2 * $input_number2);
                        echo "<font face='Terminal'>";
                        echo "A = $hasil1<br>";
                        echo "B = $hasil2";
                       
                        //simpan ke log
                        $file='C:\xampp\htdocs\calculator\log.txt';
                        $fo=fopen($file,'w');
                        $data=$hasil;
                        fwrite($fo,$data);
                        fclose($fo);
            }
            else if($opt=="1/x")
            {
                        $hasil1=(1 / $input_number1);
                        $hasil2=(1 /  $input_number2);
                        echo "<font face='Terminal'>";
                        echo "A = $hasil1<br>";
                        echo "B = $hasil2";
                       
                        //simpan ke log
                        $file='C:\xampp\htdocs\calculator\log.txt';
                        $fo=fopen($file,'w');
                        $data=$hasil;
                        fwrite($fo,$data);
                        fclose($fo);
            }
            else if($opt=="^3")
            {
                        $hasil1=($input_number1 * $input_number1 * $input_number1);
                        $hasil2=($input_number2 * $input_number2 * $input_number2);
                        echo "<font face='Terminal'>";
                        echo "A = $hasil1<br>";
                        echo "B = $hasil2";
                       
                        //simpan ke log
                        $file='C:\xampp\htdocs\calculator\log.txt';
                        $fo=fopen($file,'w');
                        $data=$hasil;
                        fwrite($fo,$data);
                        fclose($fo);
            }
            else if($opt=="sqrt")
            {
                        $hasil1=sqrt($input_number1);
                        $hasil2=sqrt($input_number2);
                        echo "<font face='Terminal'>";
                        echo "A = $hasil1<br>";
                        echo "B = $hasil2";
                       
                        //simpan ke log
                        $file='C:\xampp\htdocs\calculator\log.txt';
                        $fo=fopen($file,'w');
                        $data=$hasil;
                        fwrite($fo,$data);
                        fclose($fo);
            }
            else if($opt=="CE")
            {
                       
            }
           
            else
            {
                        echo 'Operator cannot defined';
                        echo '<br>';
                        echo 'Calculation function is aborted ...';
                        exit;
            }
?>
</body>
</html> "

Kemudian save file-nya dengan nama calfunction.php, dan simpan di lokasi folder yang sama dengan index.html. Langkah selanjutnya, yaitu membuat satu file log.txt kosong di dalam folder yang sama juga. Kemudian tes di dalam browser, dengan cara mengubah URL-nya menjadi http://localhost/calculator/index.html, secara otomatis php akan terbaca dan siap untuk diproses.



Berikut ini adalah tampilan implementasinya :


Berikut adalah tampilan hasil dari pengimputan dengan mengklik salah satu option button di samping :

Itulah sedikit latihan pengolahan data inputan berupa angka yang diolah menjadi sebuah hasil, baik itu tambah, kurang, bagi, kali, atau pangkat X. Semoga latihan ini bisa bermanfaat bagi yang sedang belajar php.  

Tidak ada komentar:

Poskan Komentar