Membuat Counter Sederhana dengan PHP
Pernah mendengar counter antrian pada bank atau ditempat lain? konsep counter antrian sebenarnya sangat sederhana dan dapat dengan mudah diimplementasikan secara cepat pada web dengan menggunakan pemrograman PHP.
Cara kerja counter adalah menambahkan satu nilai setiap kali tombol di klik. Nah, bagaimana implementasi pada bahasa pemrograman web seperti php?
Berikut syntax php yang untuk counter
<!DOCTYPE html>
<html>
<head>
<title>COUNTER</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<?php
if (isset($_POST["navigasi"])) {
$navigasi=$_POST["navigasi"];
$nilai = $_POST["counter"];
}
?>
<div class="container">
<form method="post" action="">
<div>
<input type="text" name="counter" class="counter" value=
<?php
$nilai = @$_POST["counter"];
if ($nilai==null) {
echo "0";
}
if (isset($_POST["navigasi"])) {
if ($navigasi=="prev") {
echo --$nilai;
}
elseif ($navigasi=="next") {
echo ++$nilai;
}
}
?>
>
</div>
<div>
<button name="navigasi" value="prev" class="navigasi">prev</button>
<button name="navigasi" value="next" class="navigasi">next</button>
</div>
<div class="bigNumber">
<?php
if ($nilai==null) {
echo "0";
}
else {
echo $nilai;
}
?>
</div>
</form>
</div>
</body>
</html>
Untuk mempercantik tampilan, gunakan CSS berikut agar tampilannya lebih bagus.
body{
background: #675234;
}
.container{
width: 350px;
padding: 20px;
margin: 50px auto;
background: #ffffbb;
box-shadow: 0px 0px 20px #000;
border: 2px solid #4d5368;
border-radius: 20px;
text-align: center;
}
.counter{
width: 98%;
border-radius: 5px;
}
.navigasi{
width: 49%;
border-radius: 5px;
padding: 5px;
background: #764323;
color: white;
}
.bigNumber{
font-size: 90px;
}
Untuk Demo aplikasinya bisa di akses di sini
Komentar
Posting Komentar