Form Pembayaran
Nama : Yusran Hadi
NRP : 05111740000105
Kelas : PWEB C
Disini saya akan menyampaikan source code dan hasil dari tugas pembuatan form pembayaran listrik, beserta dengan bukti pembayarannya.
1. Source Code
index.html
bayar.php
desain.css
2. Hasil
NRP : 05111740000105
Kelas : PWEB C
Disini saya akan menyampaikan source code dan hasil dari tugas pembuatan form pembayaran listrik, beserta dengan bukti pembayarannya.
1. Source Code
index.html
<html>
<head>
<title>Pembayaran</title>
<link rel="stylesheet" href="desain.css" media="screen">
</head>
<body>
<script type="text/javascript">
function validasi_input(form){
if (form.nama.value.length > 50 && form.nama.value.length !=0){
alert("Nama maksimal 50 Karater!");
form.nama.focus();
return (false);
}
else if (form.nama.value == ""){
alert("Harap isi data dengan lengkap!");
form.nama.focus();
return (false);
}
else if (form.nohp.value.length < 10 || form.nohp.value.length > 12){
alert("Nomor pelanggan Minimal 10 Karater dan Maksimal 12 Karater!");
form.nohp.focus();
return (false);
}
else if (isNaN(form.nohp.value)) {
alert("Nomor pelanggan tidak valid!");
form.nohp.focus();
return (false);
}
return (true);
}
</script>
<div class="login">
<form action="bayar.php" method="POST" onsubmit="return validasi_input(this)">
<div>
<br><label>Nomor Pelanggan</label>
<input type="nohp" name="nohp" id="nohp" />
</div>
<div>
<label>Nama</label>
<input type="text" name="nama" id="nama" />
</div>
<div>
<br><label>Alamat</label>
<textarea cols="40" rows="5" name="alamat" id="alamat"></textarea>
</div>
<div>
<br> <label>Tipe <select name="tipe"></label> <br>
<option value="pilih" selected>--Pilih--</option>
<option value="Rumah1">Rumah tipe 1</option>
<option value="Rumah2">Rumah tipe 2</option>
<option value="Perusahaan">Perusahaan</option>
<option value="Industri">Industri</option>
<option value="Instansi">Instansi</option>
<option value="Umum">Umum</option>
</select>
</div>
<div>
<br><br><center> <input type="submit" value="Lakukan Pembayaran" class="tombol"> </center>
</div>
</form>
</div>
</body>
</html>
bayar.php
<!DOCTYPE html>
<html>
<head>
<title>Form Pembayaran Listrik</title>
<link rel="stylesheet" href="desain.css" media="screen">
<style type="text/css">
.tagihan{
width: 60%;
margin: auto;
}
</style>
</head>
<body>
<div class="login">
<h1>Invoice <?php $invoice = 1; echo $invoice;?></h1>
<p>Tagihan Listrik</p>
<table>
<tr><td>Tangal</td><td> : <?php echo date("d/m/Y") . "<br>"; ?></td> </tr>
<tr><td>Tgl. Jatuh Tempo</td><td> : <?php echo date("d/m/Y", strtotime("+ 2 days")) . "<br>"; ?></td> </tr>
<tr><td>Nomor Pelanggan</td><td> : <?php echo $_POST['nohp'] ;?></td> </tr>
<tr><td>Nama</td><td> : <?php echo $_POST['nama'] ;?></td> </tr>
<tr><td>Alamat</td><td> : <?php echo $_POST['alamat'] ;?></td> </tr>
</table>
</div>
<div class="login">
<table>
<tr><td width="70%">Detail</td><td width="30%">Kuantitas</td><td width="20%">Total</td> </tr>
<tr><td width="70%">Listrik yang terpakai (Kwh)</td><td><?php $penggunaan = 60; echo $penggunaan ;?></td><td><?php $penggunaan = 60; echo $penggunaan*1600 ;?></td> </tr>
<tr><td width="70%">Biaya Administrasi</td><td width="30%">1</td><td width="20%"><?php $admin = 2500; echo $admin ;?></td> </tr>
<tr><td width="70%">Pajak</td><td width="30%">1</td><td width="20%"><?php $pajak = 2000; echo $pajak ;?></td> </tr>
<tr><td></td><td width="30%">Total</td><td width="20%"><?php $total = $penggunaan * 1600 + $admin + $pajak; echo $total ;?></td> </tr>
</table>
</div>
</body>
</html>
desain.css
body {
font-family: sans-serif;
}
h2 {
color: #fff;
}
.login {
padding: 1em;
margin: 1em auto;
background: rgb(156, 153, 153);
border-radius: 3px;
width: 40%;
height: 85%;
}
label {
font-size: 14pt;
color: rgb(0, 0, 0);
}
input[type="text"],
input[type="email"],
input[type="nohp"],
input[type="select"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #3498db;
color: #fff;
border: 0;
padding: 5px 8px;
bottom: 0%;
width: 30%;
height: 40px;
}
2. Hasil
Komentar
Posting Komentar