Membuat Kalkulator Dengan Tombol Flat Design menggunakan PHP tanpa Javascript
Untuk membuat sebuah kalkulator sederhana untuk menghitung penghitungan aritmatika; tambah, kurang, kali,bagi dalam bahasa php, yang dibutuhkan adalah pertama-tama membuat file *.php yang berisi baris kode untuk penghitungan matematikanya. Sedangkan untuk membuat flat design nya menggunakan css (cascading style sheet)
Untuk baris koding phpnya, silahkan copy-paste kode berikut kedalam file index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kalkulator sederhana dengan PHP</title>
<link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
<?php
$teksSblmnya = null;
if (isset($_POST["hapus"])) {
$teksSblmnya=null;
$nilai=null;
}
if (isset($_POST["ditekan"])) {
$teksSblmnya=$_POST["screen"];
$nilai=$_POST["ditekan"];
}
if (isset($_POST["hasil"])) {
$teksSblmnya=$_POST["screen"];
}
?>
<form method="post" action="">
<table border="0" align="center">
<tr>
<td colspan="4" align="center"><a href="index2.php" class="maksimal" >Kalkulator</a></td>
</tr>
<tr>
<td colspan="3"><label for="screen"></label>
<input type="text" name="screen" id="screen" class="Screen" readonly placeholder="0" value=
<?php
if (isset($_POST["ditekan"])) {
if($teksSblmnya=="Salah")
{
echo $nilai;
}
else{
echo $teksSblmnya, $nilai;
}
}
elseif (isset($_POST["hasil"])) {
try {
$hasil = @eval('return '.$teksSblmnya.';');
echo $hasil;
} catch (ParseError $e) {
echo "Salah";
}
$teksSblmnya=null;
}
?>
>
</td>
<td><button name="hapus" value="hapus" class="TombolHapus">Hapus</button></td>
</tr>
<tr>
<td><button name="ditekan" value="1">1</button></td>
<td><button name="ditekan" value="2">2</button></td>
<td><button name="ditekan" value="3">3</button></td>
<td><button name="ditekan" value="*">x</button></td>
</tr>
<tr>
<td><button name="ditekan" value="4">4</button></td>
<td><button name="ditekan" value="5">5</button></td>
<td><button name="ditekan" value="6">6</button></td>
<td><button name="ditekan" value="/">÷</button></td>
</tr>
<tr>
<td><button name="ditekan" value="7">7</button></td>
<td><button name="ditekan" value="8">8</button></td>
<td><button name="ditekan" value="9">9</button></td>
<td><button name="ditekan" value="-">-</button></td>
</tr>
<tr>
<td><button name="ditekan" value=".">.</button></td>
<td><button name="ditekan" value="0">0</button></td>
<td><button name="hasil" value="hasil">=</button></td>
<td><button name="ditekan" value="+">+</button></td>
</tr>
<tr>
<td colspan="4"><p align="center">2017. All right Reserved. Created by Azhar Azziz</p></td>
</tr>
</table>
</form>
</body>
</html>
Sedangkan untuk css nya copy-paste kan kode berikut kedalam file default.css
body {
background-image: url("bg.jpg"); <!--- Untuk mengganti background--!>
background-color: #cccccc;
}
header{
background:#2C97DF;
}
button{
background:#2C97DF;
color:white;
border-top:0;
border-left:0;
border-right:0;
border-bottom:5px solid #2A80B9;
padding:10px 20px;
text-decoration:none;
font-family:'digital-clock-font';
font-size:20pt;
width: 100px;
height: 100px;
border-radius: 5px;
text-shadow: 1px 1px #111111;
}
.TombolHapus{
background:#2C97DF;
color:white;
border-top:0;
border-left:0;
border-right:0;
border-bottom:5px solid #2A80B9;
padding:10px 20px;
text-decoration:none;
font-size:11pt;
width: 100px;
height: 35px;
}
.Screen{
width: 97%;
height: 30px;
font-family: 'digital-clock-font', sans-serif;
font-size: 24px;
text-align: right;
border-radius: 5px;
padding: 0px 5px 0px 0px;
box-decoration-break: none;
color: grey;
}
button:hover {
opacity: 0.8;
}
button:active {
background: #2A80E9;
}
p{
font-family: 'digital-clock-font', sans-serif;
color: #FFFFFF;
text-shadow: 1px 1px #111111;
}
.maksimal{
font-family: 'digital-clock-font', sans-serif;
color: #FFFFFF;
text-shadow: 5px 5px #111111;
text-align: center;
font-size: 80px;
text-decoration: none;
padding: 20px 0px 20px 0px;
}
table{
background: rgba(150, 150, 150, 0.5);
border-radius: 10px;
padding: 0px 20px 0px 20px;
vertical-align: middle;
}
@font-face{
font-family:'digital-clock-font';
src: url('font/digital-7 (mono).ttf'); <!----direktori font---->
}
untuk membuat fontnya menjadi font seven-segment seperti yang diharapkan,silahkan download font "digital-7" lalu buat folder font di dalam direktori menyimpan file php diatas, lalu paste-kan file ttf dari font digital-7 (mono).ttf ke dalam folder font yang sudah dibuat.tambahkan juga file bg.jpg kedalam direktori untuk menambahkan background
Demo webnya bisa diakses di sini
Komentar
Posting Komentar