PWEB5 - Membuat Form Pembayaran Air
TUGAS 4 - Pemrograman Web
Membuat Form Pembayaran Air serta menampilkan datanya ke dalam tabel dengan PHP
Nama : Bastian Farandy
NRP : 05111740000190
Kelas : Pemrograman Web C
Source Code
Membuat Form Pembayaran Air serta menampilkan datanya ke dalam tabel dengan PHP
Nama : Bastian Farandy
NRP : 05111740000190
Kelas : Pemrograman Web C
Source Code
form.html
<!DOCTYPE html>
<html>
<head>
<title>Form Pembayaran HTML</title>
<style type="text/css">
table
{
border-collapse: collapse;
vertical-align: middle;
padding: 10px;
align-content: center;
}
.ket
{
text-align: center;
}
body
{
background-image: url("bg1.jpg");
background-position: center;
}
</style>
</head>
<body>
<form action="data.php" method="post" id="form">
<table width="750" height="800" align="center" bgcolor="white">
<tr>
<td colspan="4" align="center"><h1>Form Pembayaran Rekening Air</h1></td>
</tr>
<tr>
<td width="272" class="ket">Nama</td>
<td width="343" colspan="3"><input type="text" name="nama" placeholder="Enter Your Name" maxlength="50" required/></td>
</tr>
<tr>
<td class="ket">Alamat</td>
<td><input type="text" placeholder="Nama Jalan, Nomor, Kota" colspan="3" name="address" required/></td>
</tr>
<tr>
<td class="ket">ID Pelanggan</td>
<td><input type="text" placeholder="Masukkan ID anda" colspan="3" name="nomor" required/></td>
</tr>
<tr>
<td class="ket">Daerah</td>
<td>
<input type="text" name="daerah" placeholder="Pilih salah satu" colspan="3" list="daerah" required/>
<datalist id="daerah">
<option value="Medan">Medan</option>
<option value="Bandung">Bandung</option>
<option value="Jogjakarta">Jogjakarta</option>
<option value="Semarang">Semarang</option>
<option value="Surakarta">Surakarta</option>
<option value="Surabaya">Surabaya</option>
<option value="Malang">Malang</option>
<option value="Banyuwangi">Banyuwangi</option>
<option value="Cirebon">Cirebon</option>
</datalist>
</td>
</tr>
<tr>
<td class="ket">Tipe</td>
<td><input type="text" placeholder="Pilih salah satu" colspan="3" name="Tipe" list="Tipe"/>
<datalist id="Tipe">
<option value="Pabrik">Pabrik</option>
<option value="Instansi">Instansi</option>
<option value="Perumahan">Perumahan</option>
</datalist>
</td>
</tr>
<tr>
<td class="ket">Kode</td>
<td><input type="text" colspan="3" placeholder="Nomor kode pembayaran" name="kode" required/></td>
</tr>
<tr>
<td class="ket">Pemakaian</td>
<td><input type="text" placeholder="Jumlah debit air" name="pemakaian" required/></td>
<td class="ket">Beban</td>
<td><input type="text" placeholder="Masukan jumlah beban" name="beban" required/></td>
</tr>
<tr>
<td class="ket">Harga</td>
<td><input type="text" placeholder="Harga per satu meter kubik" name="harga" required/></td>
<td class="ket">Pajak</td>
<td><input type="text" placeholder="Jumlah pajak yang harus dibayar" name="pajak" required/> </td>
</tr>
<tr>
<td class="ket">Tagihan</td>
<td><input type="text" name="Tagihan" colspan="3" placeholder="Total tagihan" required/></td>
</tr>
<tr>
<td class="ket">Pembayaran</td>
<td><input type="text" name="Pembayaran" colspan="3" placeholder="jumlah yang sudah dibayar" required/></td>
</tr>
<tr>
<td align="center" colspan="4"><input type="submit" name="proses" onclick="popup()"></a></td>
</tr>
</table>
</form>
<script>
function popup()
{
alert("Bukti Pembayaran anda sudah berhasil direkam.");
}
</script>
</body>
</html> data.php
<html>
<style type="text/css">
.b1
{
border: 2px solid black;
vertical-align: middle;
text-align: center;
}
.dv1
{
background-color: white;
width: 80%;
height: 75%;
display: flex;
align-content: top;
justify-content: center;
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
}
body
{
background-image: url("bg1.jpg");
background-position: center;
}
.table
{
border-collapse: collapse;
vertical-align: middle;
align-content: center;
background-color: white;
width: 80%;
height: 75%;
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
}
</style>
<body>
<div class="dv1">
<table class="table">
<tr>
<td colspan="13" align="center"><h1>Data Pembayaran Rekening Air</h1></td>
</tr>
<tr class="b1">
<td class="b1"><h2>No</h2></td>
<td class="b1"><h2>Nama</h2></td>
<td class="b1"><h2>Alamat</h2></td>
<td class="b1"><h2>Nomor</h2></td>
<td class="b1"><h2>Daerah</h2></td>
<td class="b1"><h2>Tipe</h2></td>
<td class="b1"><h2>Kode</h2></td>
<td class="b1"><h2>Pemakaian</h2></td>
<td class="b1"><h2>Beban</h2></td>
<td class="b1"><h2>Harga</h2></td>
<td class="b1"><h2>Pajak</h2></td>
<td class="b1"><h2>Tagihan</h2></td>
<td class="b1"><h2>Pembayaran</h2></td>
</tr>
<tr>
<td class="b1">1</td>
<td class="b1"><?php echo $_POST["nama"]; ?></td>
<td class="b1"><?php echo $_POST["address"]; ?></td>
<td class="b1"><?php echo $_POST["nomor"]; ?></td>
<td class="b1"><?php echo $_POST["daerah"]; ?></td>
<td class="b1"><?php echo $_POST["Tipe"]; ?></td>
<td class="b1"><?php echo $_POST["kode"]; ?></td>
<td class="b1"><?php echo $_POST["pemakaian"]; ?></td>
<td class="b1"><?php echo $_POST["beban"]; ?></td>
<td class="b1"><?php echo $_POST["harga"]; ?></td>
<td class="b1"><?php echo $_POST["pajak"]; ?></td>
<td class="b1"><?php echo $_POST["Tagihan"]; ?></td>
<td class="b1"><?php echo $_POST["Pembayaran"]; ?></td>
</tr>
<tr>
<td style="padding-top: 20px;" colspan="13" align="center"><a href="form.html"><button>Kembali ke form</button></a>
</td>
</tr>
</table>
</div>
</body>
</html>Screenshot
Link : Form Pembayaran Air
makasih min
ReplyDeleteSolder Temperatur