a. Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>APLIKASI WEB MENGHITUNG PEMAKAIAN LISTRIK PT. M ADI SISWANTO</title>
<style>
.wrapper { width: 700px;
margin: auto;
}
.container .title { text-align: center;
font-size: 25px;
} .box {
margin: 20px 60px;
}
.box .yellow { height: 10px;
border-color: yellow;
background-color: yellow;
width: 100%;
}
.box .blue { height: 10px;
border-color: rgb(93, 93, 246);
background-color: rgb(93, 93, 246);
width: 100%;
}
.box .red { height: 10px;
border-color: red;
background-color: red;
width: 100%;
}
.box .table {
UNIVERSITAS PAMULANG
Alamat : Jl. Surya Kencana No. 1 Pamulang Barat, Kota Tangerang Selatan, Banten Telp/Fax (021)7412566/74709855
Laman. http:// unpam.ac.id Web Informatika: [email protected]
Nama Dosen : Shandi Noris S.Kom., M.Kom. Tanggal : 01 Juli 2023
Matakuliah : Pemrograman Web 1 (3 SKS) Nama Mahasiswa : Rediana Ilyas
Kelas : 05TPLE001 NIM : 201011450197
Tugas : Pertemuan 20
margin-top: 10px;
margin: auto;
}
.box .footer { text-align: center;
} </style>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1 class="title">
APLIKASI WEB MENGHITUNG PEMAKAIAN LISTRIK PT. M ADI SISWANTO
</h1>
<div class="box">
<div class="yellow"></div>
<div class="blue"></div>
<div class="red"></div>
<table class="table">
<tr>
<td>Nama Pelanggan</td>
<td>:</td>
<td>
<input type="text" id="id__nama" name="nama" />
</td>
</tr>
<tr>
<td>Kategori</td>
<td>:</td>
<td>
<select name="kategori" id="id__kategori">
<option value="Sosial">Sosial</option>
<option value="Rumah">Rumah</option>
<option value="Industri">Industri</option>
</select>
</td>
</tr>
<tr>
<td>Jumlah pemakaian listrik</td>
<td>:</td>
<td>
<input type="number" id="id__jumlah" name="jumlah" />
</td>
</tr>
</table>
<hr />
<div class="footer">
<button type="button" onclick="CalculateForm()">Proses</button>
<button type="button" onclick="ResetForm()">Reset</button>
</div>
<hr />
<table class="table">
<tr>
<td>Nama Pelanggan</td>
<td>:</td>
<td>
<div id="id__pelanggan">-</div>
</td>
</tr>
<tr>
<td>Subtotal</td>
<td>:</td>
<td>
<div id="id__subtotal">0</div>
</td>
</tr>
<tr>
<td>Pajak</td>
<td>:</td>
<td>
<div id="id__pajak">0</div>
</td>
</tr>
<tr>
<td>Bayar</td>
<td>:</td>
<td>
<div id="id__bayar">0</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script>
function CalculateForm() {
var nama = document.getElementById("id__nama").value;
var kategori = document.getElementById("id__kategori").value;
var jumlah = document.getElementById("id__jumlah").value;
var abodemen = 0;
var tarif_per_kwh = 0;
var pajak = 0;
var total_pajak = 0;
var subtotal = 0;
var total = 0;
if (kategori == "Sosial") { abodemen = 10000;
tarif_per_kwh = 300;
pajak = 0;
} else if (kategori == "Rumah") { abodemen = 30000;
tarif_per_kwh = 500;
pajak = 10;
} else if (kategori == "Industri") { abodemen = 50000;
tarif_per_kwh = 1000;
pajak = 30;
}
subtotal = jumlah * tarif_per_kwh + abodemen;
total_pajak = subtotal * (pajak / 100);
total = subtotal - total_pajak;
let subtotalRP = new Intl.NumberFormat("id-ID", { style: "currency",
currency: "IDR", }).format(subtotal);
let totalPajakRP = new Intl.NumberFormat("id-ID", { style: "currency",
currency: "IDR", }).format(total_pajak);
let totalRP = Intl.NumberFormat("id-ID", { style: "currency",
currency: "IDR", }).format(total);
document.getElementById("id__pelanggan").innerHTML = nama;
document.getElementById("id__subtotal").innerHTML = subtotalRP;
document.getElementById("id__pajak").innerHTML = totalPajakRP;
document.getElementById("id__bayar").innerHTML = totalRP;
}
function ResetForm() {
document.getElementById("id__nama").value = "";
document.getElementById("id__kategori").selectedIndex = -1;
document.getElementById("id__jumlah").value = "";
document.getElementById("id__pelanggan").innerHTML = "-";
document.getElementById("id__subtotal").innerHTML = 0;
document.getElementById("id__pajak").innerHTML = 0;
document.getElementById("id__bayar").innerHTML = 0;
} </script>
</html>
b. Screenshoot Website