Nama : Bobbi Aditya
NRP : 05111740000099
Kelas : PWEB C
Disini saya akan menyampaikan source code dan hasil dari tugas pembuatan form pendaftaran pembayaran air, beserta dengan bukti pembayarannya.
Source Code laman pendaftaran
<!DOCTYPE html>
<html>
<head>
<title>Rekening Air</title>
<link rel="stylesheet" type="text/css" href="form.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>
<body>
<?php
$namaErr = $alamatErr = $nomorErr ="";
$nama = $alamat = $nomor = $daerah = $tipe ="";
$pemakaian = $harga = $beban = $pajak = $tagihan = $pembayaran="";
?>
<h1>
Pembayaran rekening air
</h1>
<form method="post" action="invoice.php">
<div class="content">
Nama
<br>
<div>
<input type="text" name="nama" value="">
</div>
</div>
<div class="content">
Alamat
<br>
<div><input type="text" name="alamat" value="">
</div>
</div>
<div class="content">
Nomor Pelanggan
<br>
<div><input type="number" name="nomor" value="">
</div>
</div>
<div class="content">
Daerah
<br>
<div><input type="text" name="daerah" value="">
</div>
</div>
<div class="content">
Tipe
<div>
<select name="tipe">
<option value="rumah">Rumah</option>
<option value="rm">Rumah Makan</option>
<option value="kantor">Kantor</option>
<option value="toko">Toko</option>
<option value="pabrik">Pabrik</option>
</select>
</div>
</div>
<div class="content" style="float: left; width: 290px;">
Pemakaian air(m3)
<br>
<div><input type="number" name="pemakaian" value="">
</div>
</div>
<div class="content">
Beban
<br>
<div style="width: 50%; float: right;padding-left: 5px;"><input type="number" name="beban" value="">
</div>
</div>
<div class="content" style="float: left; width: 290px;">
Harga(setiap m3)
<br>
<div><input type="number" name="harga" value="">
</div>
</div>
<div class="content">
Pajak
<br>
<div style="width: 50%; float: right; padding-left: 5px;"><input type="number" name="pajak" value="">
</div>
</div>
<div class="content">
Tagihan
<br>
<div><input type="number" name="tagihan" value="">
</div>
</div>
<div class="btnn">
<button type="submit" class="btn" value="">Submit</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="form.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<title>Bukti Pembayaran</title>
</head>
<body>
<h1>Pembayaran rekening air</h1>
<h1>PT Samudra Air</h1>
<div class="content" style="padding-left: 120px">
<br>
<br>
<pre><p>Nama : <?php echo $_POST["nama"]; ?></p></pre>
<pre><p>Nomor : <?php echo $_POST["nomor"]; ?></p></pre>
<pre><p>Alamat : <?php echo $_POST["alamat"]; ?></p></pre>
<pre><p>Daerah : <?php echo $_POST["daerah"]; ?></p></pre>
<pre><p>Tipe : <?php echo $_POST["tipe"]; ?></p></pre>
</div>
<br>
<br>
<div style="padding-left: 120px">
<pre><p>Pemakaian : <?php echo $_POST["pemakaian"] ; ?> KWh</p></pre>
<pre><p>Harga : Rp <?php echo $_POST["beban"]; ?></p></pre>
<pre><p>Pajak : Rp <?php echo $_POST["pajak"]; ?></p></pre>
<pre><p>Total pembayaran: Rp <?php echo $_POST["tagihan"]; ?></p></pre>
</div>
<br>
<br>
<div style="float: right;padding-right: 180px;">
Malang, 20 Oktober 2020
<br>
<br>
<br>
<br>
<br>
<br>
<?php echo $_POST["nama"]; ?>
</div>
</body>
</html>
Source code css
body{
margin: auto;
background: #CFEFF0;
background-size: auto;
font-family: 'Comfortaa', cursive;
}
h1{
text-align:center;
font-family: 'Inconsolata', monospace;
background: #F6FEFE;
margin-top: 0;
margin-bottom: 0;
}
form {
border-radius: 5px;
max-width: 600px;
width: 100%;
margin: 5% auto;
background-color: white;
overflow: hidden;
}
content{
/* margin: auto;
*/ background: #016B6E;
}
.btn{
background-color: #00595B;
border: none;
color: white;
padding: 15px 32px;
margin-top: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
}
.btn:hover{
background-color: #08E0E6;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #00C3C8;
color: white;
}
input[type=number]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #00C3C8;
color: white;
}
select{
width: 30%;
padding: 12px 20px;
margin:8px 0;
box-sizing: border-box;
border: none;
background-color: #00C3C8;
color: white;
}
.btnn {
text-align: center;
margin-top: 10px;
}
table{
border-collapse: collapse;
margin: 0 auto;
background: #00C3C8;
}
table,td,tr
{
text-align: center;
border: 2px black solid;;
}
p
{
font-family: 'Comfortaa', cursive;
margin:5px; font-size: 16px;
}
Hasilnya adalah seperti berikut, atau bisa langsung dicoba di link berikut(Ini linknya)
Comments
Post a Comment