Tutorial Kalkulator Sederhana Menggunakan PHP dan CSS ~ FIRDAUS N S

Assalammualaikum WR.WB

Kalian tahu benda apa ini? Pasti sudah tidak asing lagi bagi agan – agan sekalian. Yups…. Ini adalah kalkulator, alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu. Pada perkembangannya sekarang ini, kalkulator sering dimasukkan sebagai fungsi tambahan daripada komputer, handphone, bahkan sampai jam tangan.

Nah disini penulis akan memberikan tutorial membuat kalkulator sederhana menggunakan php dan css.. untuk lebih jelasnya yuk lanjut gan kebawah….

Pertama siapkan dulu xamp kemudian jalankan xampnya yaitu pada Apachenya gan..

Kemudian siapkan text editor seperti notepad++, sublime, atau atom.

Kedua, kita buat file bernama index.php untuk membuat tampilan dari kalkulator dan berikut codingnya.

<html>
<head>
  <title>Membuat Kalkulator Sederhana</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="kalkulator">
    <div class="kotak1">
      <h2 class="judul">
Kalkulator</h2>
</div>
<div class="kotak2">
      <div class="bg1">
        <center>
          <img class="circular" src="me2.jpg" alt="photo profile">
        </center>
<div class="box1">
          <table>
<tr>
              <td style="text-align:left">Nama</td><td> : Firdaus N.S</td>
            </tr>
<tr>
              <td>NIM</td><td> : 14090015</td>
            </tr>
<tr>
              <td>Jenis Kelamin</td><td> : Laki - Laki</td>
            </tr>
<tr>
              <td>Email</td><td> : firdausns44@gmail.com</td>
            </tr>
</table>
</div>
</div>
<div class="bg2">
        <form method="post" action="rumus.php">
          <br/><br/><br/><br/><br/><br/>
          <input type="text" name="nilai1" class="angka" autocomplete="off" placeholder="Bilangan Pertama"/>
          <select class="opt" name="operator">
            <option value="tambah">+</option>
        <option value="kurang">-</option>
        <option value="kali">x</option>
        <option value="bagi">/</option>
          </select>
          <input type="text" name="nilai2" class="angka" autocomplete="off" placeholder="Bilangan Kedua"/><br/>
          <input type="submit" class="samadengan" value="=" />
          <input type="submit" class="c" value="C" /><br/>
          <input type="text" value="<?php if (isset($_GET['bil3'])) echo $_GET['bil3']?>" class="hasil">
        </form>
</div>
<div class="bg3">
        <center>
          <img class="circular" src="arin.jpg" alt="photo profile">
        </center>
<div class="box3">
          <table style="text-align:left">
<tr>
              <td>Nama</td><td> : Narindra O.</td>
            </tr>
<tr>
              <td>NIM</td><td> : 14090035</td>
            </tr>
<tr>
              <td>Jenis Kelamin</td><td> : Laki - Laki</td>
            </tr>
<tr>
              <td>Email</td><td> : narindray@gmail.com</td>
            </tr>
</table>
</div>
</div>
</div>
<div class="maker">
      <marquee> <font face = "Calibri">Copyright ©
        <a class="brand" color ='red' href="http://www.firdausns44.blogspot.com">firdausns44.blogspot.com</a> and
        <a class="brand" href="http://www.narindray.wordpress.com">narindray.wordpress.com</a>
      </marquee>
    </div>
</div>
</body>
</html>

Ketiga, kita buat file bernama rumus.php yang isinya rumus untuk menghitung.

Keempat, buat file bernama style.css yang berguna untuk mempercantik tampilan kalkulator.

body{
 background: url(bg22.jpg) no-repeat center center fixed;
    -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;
 font-family: sans-serif;
}
.kalkulator{
 background: url(bg25.jpg) no-repeat center center fixed;
    -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;
 width: 90%;
 height: 90%;
 margin: 30px auto;
 padding: 5px 20px 5px 20px;
 border-radius: 5px;
 border: blue outset 3px;
 box-shadow: 0px 10px 20px 0px #0D47A1;
}
.kotak1{
 width: 90%;
 height: 17%;
 margin: 10px auto;
 padding: 1px 20px 1px 20px;
 border-radius: 5px;
 border: blue outset 3px;
 box-shadow: 0px 10px 20px 0px #0D47A1;
}
.judul{
  text-align: center;
 text-transform:uppercase;
 color: #F4511E;
 font-size: 28pt;
 text-shadow: 9px 9px 9px rgba(0,0,0,0.6);
}
.kotak2{
 width: 90%;
 height: 68%;
 margin: 10px auto;
 padding: 1px 20px 1px 20px;
 border-radius: 5px;
 border: blue outset 3px;
 box-shadow: 0px 10px 20px 0px #0D47A1;
}
.bg1{
 width: 30%;
 height: 100%;
 color: white;
 float: left;
}
.box1{
 margin: 5px;
 padding: 10px;
 width: 90%;
 height: 30%;
 background: white;
 color: black;
 font: 18px, Serif;
 filter:alpha(opacity=100);
 -moz-opacity:50;
 opacity:0.8;
 -khtml-opacity:50;
 border-radius: 5px;
}
.circular{
 width: 130px;
 height: 130px;
 margin-top: 60px;
 border-radius: 50%;
 border: 3px solid #ddd;
 box-shadow: 0 0 18px rgba(0, 0, 0, .8);
 -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, .8);
 -moz-box-shadow: 0 0 18px rgba(0, 0, 0, .8);
}
.bg2{
 width: 40%;
 height: 100%;
 float: left;
}
.bg3{
 width: 30%;
 height: 100%;
 color: white;
 float: left;
}
.box3{
 margin: 5px;
 padding: 10px;
 width: 90%;
 height: 30%;
 background: white;
 color: black;
 font: 18px, Serif;
 filter:alpha(opacity=100);
 -moz-opacity:50;
 opacity:0.8;
 -khtml-opacity:50;
 border-radius: 5px;
}
.angka{
 width: 167px;
 margin: 5px;
 border: none;
 font-size: 16pt;
 border-radius: 5px;
 border-bottom:4px solid black;
 padding: 10px;
 text-align: right;
}
.opt{
 background: #76FF03;
 font-size: 13pt;
 border: none;
 width: 60px;
 margin: 5px;
 border-radius: 5px;
 border-bottom:4px solid #64DD17;
 padding: 10px;
}
.c{
 background: #D32F2F;
 font-size: 16pt;
 border: none;
 width: 60px;
 margin: 5px;
 border-radius: 5px;
 border-bottom:4px solid #EF5350;
 padding: 10px;
}
.samadengan{
 background: #FFEB3B;
 text-align: center;
 width: 352px;
 border: none;
 font-size: 16pt;
 border-radius: 5px;
 border-bottom:4px solid #F9A825;
 margin: 5px;
 padding: 10px;
}
.hasil{
 text-align: right;
 width: 430px;
 font-size: 16pt;
 border-radius: 5px;
 border-bottom:4px solid black;
 margin: 5px;
 padding: 10px;
}
.maker{
 margin-left: 35px;
 float: left;
 font-size: 24px;
 color:purple;
 text-align: center;
 width:93.5%;
 height:5%;
 background:#ccccff;
 border-radius: 5px;
 border: blue outset 2px;
}

Sekarang tinggal tahap uji coba gan.. masuk ke web browser agan, disini saya menggunakan google chrome kemudian ketikan di alamat url dengan alamat http://localhost/pemprogamanweb/tugas3/index.php alamat tersebut tergantung dimana anda menyimpan filenya. Ingat file php hanya bisa dieksekusi jika filenya di taruh di folder htdocs di xamp. Disini saya menyimpan file di Localdisk(c:), folder xamp, folder, htdocs, pemprogamanweb/tugas3/index.php

Pertama kita masukan bilangan pertama misal saya isi 4, kemudian saya memasukan bilangan kedua dengan nilai 7 kemudian saya pilih pada tombol hijau yaitu kali lalu pilih tombol kuning sama dengan dan akan menghasilkan nilai 28.

Nah pada tombol merah atau C digunakan untuk mereset perhitungan.

Barang kali agan malas untuk mengetik source codingnya atau ingin mencoba, memodifikasi dan menambahkan fitur lainnya sesuai selera agan – agan bisa download aja di link github saya monggo..

https://github.com/firdausshinoda/kalkulator-sederhana-php-dan-css

Cukup sekian tutorial membuat kalkulator sederhana dengan php dan css. Kurang lebihnya mohon Wassalammualaikum WR.WB

Sampai bertemu di tutorial selanjutnya..

Referensi:

1. https://id.wikipedia.org/wiki/Mesin_hitung

FIRDAUS N S

Blog Archive

Total Tayangan Halaman

Pengikut

Mengenai Saya

Minggu, 20 Maret 2016

Tutorial Kalkulator Sederhana Menggunakan PHP dan CSS

0 komentar:

Posting Komentar