Form Lain! Hosting free?!
Minggu ini saya ditugaskan untuk membuat suatu form pembayaran air, dengan bantuan PHP serta CSS yang klasik. Untuk webnya bisa klik disini!
Tampilan
Source Code
index.php
<!DOCTYPE html>
<html>
<head>
<title>Pembayaran Rekening Air</title>
<link rel="stylesheet" type="text/css" href="pembayaran_air.css">
</head>
<body>
<div class="content">
<form class="modal-content" action="invoice.php" method="post">
<h1 align="center">Form Pembayaran Rekening Air</h1><hr><br>
<table width="100%">
<tbody>
<tr>
<td width="10%"><label for="fullname">Nama</label></td>
<td width="40%">
<input type="text" placeholder="Masukkan Nama Anda" name="fullname" maxlength="50" required>
</td>
<td><label for="id">ID Pelanggan</label></td>
<td>
<input type="number" placeholder="Masukkan ID Pelanggan Anda" name="id" required>
</td>
</tr>
<tr>
<td><label for="address">Alamat</label></td>
<td>
<input type="text" placeholder="Masukkan Nama Jalan, Nomor" name="address" required>
</td>
<td><label for="city">Daerah</label></td>
<td>
<select name="city">
<option value="pilih">-Pilih Salah Satu-</option>
<option value="Bandung">Bandung</option>
<option value="Banyuwangi">Banyuwangi</option>
<option value="Jakarta">Jakarta</option>
<option value="Jogjakarta">Jogjakarta</option>
<option value="Malang">Malang</option>
<option value="Medan">Medan</option>
<option value="Semarang">Semarang</option>
<option value="Surabaya">Surabaya</option>
<option value="Surakarta">Surakarta</option>
</select>
</td>
</tr>
<tr>
<td><label for="type">Tipe</label></td>
<td>
<select name="type">
<option value="pilih">-Pilih Salah Satu-</option>
<option value="Pabrik">Pabrik</option>
<option value="Instansi">Instansi</option>
<option value="Rumah">Rumah</option>
</select>
</td>
<td><label for="month">Bulan</label></td>
<td>
<select name="month">
<option value="pilih">-Pilih Salah Satu-</option>
<option value="Januari">Januari</option>
<option value="Februari">Februari</option>
<option value="Maret">Maret</option>
<option value="April">April</option>
<option value="Mei">Mei</option>
<option value="Juni">Juni</option>
<option value="Juli">Juli</option>
<option value="Agustus">Agustus</option>
<option value="September">September</option>
<option value="Oktober">Oktober</option>
<option value="November">November</option>
<option value="Desember">Desember</option>
</select>
</td>
</tr>
<tr>
<td><label for="use">Pemakaian</label></td>
<td>
<input type="number" placeholder="Masukkan Jumlah Debit Air (m3)" name="use" required>
</td>
<td width="10%"><label for="weight">Beban</label></td>
<td>
<input type="number" placeholder="Masukkan Jumlah Beban" name="weight" required>
</td>
</tr>
<tr>
<td colspan="2" align="right" style="padding-right: 25px">
<button type="submit" value="">SUMBIT</button>
</td>
<td colspan="2" align="left" style="padding-left: 25px">
<button type="reset" value="">RESET</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
invoice.php
<?php
function input($data){
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$use = input($_POST["use"]);
$weight = input($_POST["weight"]);
$pay = ($use * 5000);
$tax = ($pay / 10);
$total = $pay + $tax + $weight;
?>
<!DOCTYPE html>
<html>
<head>
<title>Tagihan Pembayaran Air PDAM</title>
<link rel="stylesheet" type="text/css" href="pembayaran_air.css">
</head>
<body>
<div class="model-content">
<h1 align="center">Tagihan Pembayaran Air</h1><hr>
<div class="invo">
<table>
<tr>
<td colspan="4" align="right">
Invoice #1711 <br>
Tanggal : <?php echo date("d/m/Y") ?>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Nama</td>
<td width="40%">: <?php echo $_POST["fullname"]; ?></td>
<td>ID Pelanggan</td>
<td width="40%">: <?php echo $_POST["id"]; ?></td>
</tr>
<tr>
<td>Daerah</td>
<td>: <?php echo $_POST["city"]; ?></td>
<td>Tipe</td>
<td>: <?php echo $_POST["type"]; ?></td>
</tr>
<tr>
<td>Bulan</td>
<td>: <?php echo $_POST["month"]; ?></td>
<td>Pemakaian/m<sup>3</sup></td>
<td>: <?php echo $_POST["use"]; ?></td>
</tr>
<tr>
<td>Beban</td>
<td>: Rp <?php echo $_POST["weight"]; ?></td>
<td>Harga/m<sup>3</sup></td>
<td>: Rp 5000</td>
</tr>
</table>
<br>
<table>
<tr>
<td style="font-size: large;"><b>Rincian Pembayaran</b></td>
</tr>
<tr>
<td>Pajak</td>
<td>: Rp <?php echo $tax ?></td>
</tr>
<tr>
<td>Total Pembayaran</td>
<td>: Rp <?php echo $total ?></td>
</tr>
</table>
</div>
</body>
</html>
pembayaran_air.css
@import url('https://fonts.googleapis.com/css?family=Abel');
@import url('https://fonts.googleapis.com/css?family=Questrial');
@import url('https://fonts.googleapis.com/css?family=Righteous');
body{
background: #f3f3f3;
color: #333;
width: 100%;
font-family: 'Abel', sans-serif;
margin: 25px 0 25px 0;
}
.content{
width: 80%;
margin: auto;
height: 450px;
padding: 0.1px;
background: #fff;
color: #333;
}
h1{
padding-top: 25px;
font-family: 'Righteous', cursive;
}
/* Full-width input fields */
input[type=text], input[type=number], select {
width: 80%;
padding: 10px;
margin: 5px 5px 15px 5px;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=number]:focus, select:focus{
background-color: lightpink;
outline: double;
}
/* Set a style for all buttons */
button {
background-color: black;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 25%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
button:hover{
background-color: lightpink;
font-family: 'Abel', sans-serif;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 0px auto 25px auto; /* 5% from the top, 5% from the bottom and centered */
width: 90%; /* Could be more or less, depending on screen size */
}
.model-content {
background-color: #fefefe;
margin: 0px auto 25px auto; /* 5% from the top, 5% from the bottom and centered */
width: 50%; /* Could be more or less, depending on screen size */
}
.invo {
width: 75%;
height: 275px;
margin: 0px auto 25px auto;
padding: 0.1px;
color: #333;
}
Komentar
Posting Komentar