Minggu, 20 Maret 2016

Tutorial membuat Kalkulator sederhana menggunakan php

Assalamualaikum Wr. Wb
Hai Kawan J

Saya akan membagikan Tutorial membuat Kalkulator sederhana menggunakan PHP dan CSS, tetapi sebelum ke tutorialnya alangkah baiknya kita mengetahui terlebih dahulu apa sih PHP? J
Sekilas dahulu mengenai apa sih KalkulatorKalkulator merupakan alat bantu hitung seperti penjumlahan, pengurangan, perkalian, dan pembagian. Kalkulator yang digunakan untuk melakukan perhitungan standar seperti diatas biasanya disebut jenis kalkulator sederhana. Sedangkan untuk melakukan perhitungan yang lebih rumit, seperti rumus matematika digunakan jenis kalkulator yang sering disebut scientific calculator.
PHP adalah singkatan dari "PHP: Hypertext Preprocessor", yang merupakan sebuah bahasa scripting yang terpasang pada HTML. Sebagian besar sintaks mirip dengan bahasa C, Java dan Perl, ditambah beberapa fungsi PHP yang spesifik. Tujuan utama penggunaan bahasa ini adalah untuk memungkinkan perancang web menulis halaman web dinamik dengan cepat.
Hubungan PHP dengan HTML
Halaman web biasanya disusun dari kode-kode html yang disimpan dalam sebuah file berekstensi .html. File html ini dikirimkan oleh server (atau file) ke browser, kemudian browser menerjemahkan kode-kode tersebut sehingga menghasilkan suatu tampilan yang indah. Lain halnya dengan program php, program ini harus diterjemahkan oleh web-server sehingga menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. Program ini dapat berdiri sendiri ataupun disisipkan di antara kode-kode html sehingga dapat langsung ditampilkan bersama dengan kode-kode html tersebut. Program php dapat ditambahkan dengan mengapit program tersebut di antara tanda . Tanda-tanda tersebut biasanya disebut tanda untuk escaping (kabur) dari kode html. File html yang telah dibubuhi program php harus diganti ekstensi-nya menjadi .php3 atau .php.
PHP merupakan bahasa pemograman web yang bersifat server-side HTML=embedded scripting, di mana script-nya menyatu dengan HTML dan berada si server. Artinya adalah sintaks dan perintah-perintah yang kita berikan akan sepenuhnya dijalankan di server tetapi disertakan HTML biasa. PHP dikenal sebagai bahasa scripting yang menyatu dengan tag HTML, dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis seperti ASP (Active Server Pages) dan JSP (Java Server Pages).
Sekarang kita coba bikin kalkulator sederhananya yuk J
Berikut Tutorial membuat Kalkulator dengan menggunakan PHP dan CSS :
1.    Langkah pertama yaitu kita sudah menginstall XAMPP dan Notepad++. Jika teman-teman bingung bagaimana cara menginstall XAMPP dan Notepad++ teman-teman bisa melihatnya dipostingan saya sebelumnya J
2.    Setelah terinstall XAMPP dan Notepad++, copy script berikut ini :
<html>
<head>
 <title>Web Kalkulator</title>
</head>
<body>
<!--
Sebagai desaign model baik warna dan bentuk menggunakan CSS
-->
<style type="text/css">
 .h1{
  font-family: Comic Sans MS;
  font-weight: bold;
  font-size: 16px;
 }
 .input{
   background-color: #ffffff;
   border: 1px solid #4B0082;
   padding: 5px;
   font: 0.2em;
   border-radius: 3px;
   color: #00000;
  
  
 }
 .hasil{
  margin-top: 20px;
  font-family: Comic Sans MS;
  font-size: 14px;
  font-weight: bold;
  background-color: #87CEFA;
 }
 .td{
  font-family: Comic Sans MS;
  color: #ffffff;
  background-color: #FF1493;
 
 }
 body{
  background-color: #FFE4C4;
 }
 .text{
   background: #dcdcdc;
   border-bottom: 1px dotted silver;
   padding: 4px;
 }
 .tabel{
   font-size: 1em;
   font-family: sans-serif;
   border: 1px solid #020000;
   background-color: #efefef;
   border-spacing: 2px;

 }
 .tombol {
   font-weight: bold;
     display: inline-block;
     *display: inline;
     padding: 4px 12px;
     margin-bottom: 0;
     *margin-left: .3em;
     font-size: 14px;
     line-height: 20px;
     color: #333333;
     text-align: center;
     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   vertical-align: middle;
   cursor: pointer;
   background-color: #f5f5f5;
   *background-color: #FF69B4;
   background-image: -moz-linear-gradient(top, #ffffff, #FF69B4);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#FF69B4));
   background-image: -webkit-linear-gradient(top, #ffffff, #FF69B4);
      background-image: -o-linear-gradient(top, #ffffff, #FF69B4);
   background-image: linear-gradient(to bottom, #ffffff, #FF69B4);
   background-repeat: repeat-x;
   border: 1px solid #cccccc;
   *border: 0;
     border-color: #FF69B4 #FF69B4 #bfbfbf;
     border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
     border-bottom-color: #b3b3b3;
     -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
           border-radius: 4px;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
     *zoom: 1;
     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  }
 .tombol-aktif{
     color: #fffdfd;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
     background-color: #040000;
     *background-color: #040000;
     background-image: -moz-linear-gradient(top, #040000, #040000);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#040000), to(#040000));
     background-image: -webkit-linear-gradient(top, #040000, #040000);
     background-image: -o-linear-gradient(top, #040000, #040000);
     background-image: linear-gradient(to bottom, #040000, #040000);
     background-repeat: repeat-x;
     border-color: #ffffff #ffffff #ffffff;
     border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff01c5fe', endColorstr='#ffffffff', GradientType=0);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  }
</style>
<!--
Perintah JavaScript untuk memberitahukan pesan warning apabila ada field yang kosong
-->
<script>
 function check(input){
  if(input.value==''){
   input.setCustomValidity('Harus diisi !! ');
  }else{
   input.setCustomValidity('');
  }
 }
</script>     
<center class="h1">--** WEB PROGRAMMING -> KALKULATOR **--</center>
<center class="h2">By Novriani Hernawati dan Winda Komala Astriyani</center> <br></br>
 <form method="post" name="form" >
  <table align="center" height='20%' width='70%' class="tabel">
   <tr>
    <td align="center" class="td"><b>Angka 1</b></td>
    <td align="center" class="td"><b>Angka 2</b></td>
    <td align="center" colspan="3" class="td"><b>Operasi</b></td>
   </tr>
   <tr>
    <td align="center"><input type="text" class="input" oninvalid="check(this)" autofocus="true" required="true" style="width: 200px"
     name="angka1" placeholder="Masukkan angka ke-1" onkeypress="return isNumber(event)"></td>
    <td align="center"><input type="text" class="input" oninvalid="check(this)"  required="true" style="width: 200px"
     name="angka2" placeholder="Masukkan angka ke-2" onkeypress="return isNumber(event)"></td>
    <td align="center" >
     <input class="tombol" class="tombol tombol-aktif" type="submit" name="kali" value="x" title="Kali">
     <input class="tombol" type="submit" name="jumlah" value="+" title="Jumlah">
     <input class="tombol" type="submit" name="bagi" value=":" title="Bagi">
     <input class="tombol" type="submit" name="kurang" value="-" title="Kurang">
      <input class="tombol" type="submit" name="mod" value="%" title="Modulus">
    </td>
    
<!--
Perintah PHP dimana sebagai operasi untuk menghitung antara "angka1" dan "angka2" yang sudah diinputkan.
Ada proses perkalian,penjumlahan,pembagian dan pengurangan -->
    <?php
    if(isset($_POST["jumlah"])){
     $hasil = $_POST["angka1"] + $_POST["angka2"];
    }else if(isset($_POST["kali"])){
     $hasil = $_POST["angka1"] * $_POST["angka2"];
    }else if(isset($_POST["bagi"])){
     $hasil = $_POST["angka1"] / $_POST["angka2"];
    }else if(isset($_POST["kurang"])){
     $hasil = $_POST["angka1"] - $_POST["angka2"];
     }else if(isset($_POST["mod"])){
      $hasil = $_POST["angka1"] % $_POST["angka2"];
     }
   
    ?> 
   </tr>
  
   <tr>
   <td align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   <td align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   <td align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   </tr>
   <tr>
   <td align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   <td align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   <td align="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   </tr>
   <tr>
    <td class="hasil" colspan="3" align="center" ><input class="input" type="text" size="50" name="hasiljumlah" disabled="True"
     value='<?php echo $hasil; ?>' title="Hasil">&nbsp;<b>Hasil</b>
    </td>
   </tr>
  </table>
 </form>
</body>
</html>
#Catatan : Script diatas merupakan gabungan dari script CSS dan PHP disimpan menggunakan nama Kalkulator.php
3.    Setelah meng-copy scriptnya, simpan file tersebut di Local Disk (C) > folder XAMPP > pilih folder htdocs > buat folder baru dengan nama Tugas3_WP1 .
4.    Setelah tersimpan buka browser yang kalian biasa pakai untuk mencoba apakah pembuatan Kalkulator sederhana telah berhasil.
5.    Jika berhasil akan muncul tampilan seperti berikut :

Tampilan setelah dijalankan di browser


Tampilan melakukan perhitungan

YEY !! Sekian J Silahkan mencoba dan semoga berhasil yah J

Wassalamualaikum Wr. Wb

0 komentar:

Posting Komentar