<!DOCTYPE html>
<html lang=”id”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Informatika Kelas 9 – Program Analisis Data</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f6f9;
margin: 20px;
padding: 20px;
}
.container {
max-width: 600px;
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin: auto;
}
h2 {
color: #2c3e50;
text-align: center;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input, select {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #27ae60;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #219150;
}
.hasil-box {
margin-top: 20px;
padding: 15px;
background-color: #eef9f1;
border-left: 5px solid #27ae60;
display: none;
}
</style>
</head>
<body>
<div class=”container”>
<h2>📊 Analisis Data Transaksi Kantin</h2>
<p>Program sederhana pemrosesan data otomatis (Informatika Kelas 9).</p>
<hr>
<!– FORM INPUT DATA –>
<div class=”input-group”>
<label for=”namaMenu”>Nama Menu Makanan/Minuman:</label>
<select id=”namaMenu”>
<option value=”Nasi Goreng”>Nasi Goreng (Rp10.000)</option>
<option value=”Mie Ayam”>Mie Ayam (Rp10.000)</option>
<option value=”Soto Ayam”>Soto Ayam (Rp12.000)</option>
<option value=”Es Teh”>Es Teh (Rp3.000)</option>
</select>
</div>
<div class=”input-group”>
<label for=”porsi”>Jumlah Porsi Terjual:</label>
<input type=”number” id=”porsi” placeholder=”Masukkan angka porsi…” min=”1″>
</div>
<button onclick=”prosesData()”>Hitung & Analisis Data</button>
<!– OUTPUT HASIL ANALISIS –>
<div id=”hasilBox” class=”hasil-box”>
<h3>🔍 Hasil Pengolahan Data:</h3>
<p><strong>Menu:</strong> <span id=”outMenu”>-</span></p>
<p><strong>Total Porsi:</strong> <span id=”outPorsi”>-</span> porsi</p>
<p><strong>Total Pendapatan:</strong> Rp<span id=”outTotal”>-</span></p>
<p><strong>Kategori Penjualan:</strong> <span id=”outStatus”>-</span></p>
</div>
</div>
<script>
// LOGIKA PENGOLAHAN DATA (JAVASCRIPT)
function prosesData() {
// 1. Mengambil data dari input HTML
let menu = document.getElementById(“namaMenu”).value;
let porsi = parseInt(document.getElementById(“porsi”).value);
// Validasi Pembersihan Data sederhanan (Data Cleaning)
if (isNaN(porsi) || porsi <= 0) {
alert(“⚠️ Harap masukkan jumlah porsi yang valid (angka positif)!”);
return;
}
// 2. Pemrosesan Data (Menentukan harga berdasarkan menu)
let harga = 0;
if (menu === “Nasi Goreng” || menu === “Mie Ayam”) {
harga = 10000;
} else if (menu === “Soto Ayam”) {
harga = 12000;
} else if (menu === “Es Teh”) {
harga = 30000; // Harga default
harga = 3000;
}
// Menghitung Total Pendapatan
let totalPendapatan = porsi * harga;
// 3. Analisis Data / Penarikan Kesimpulan Sederhana
let statusPenjualan = “”;
if (porsi >= 20) {
statusPenjualan = “🔥 Sangat Laris (Rekomendasi: Perbanyak Stok)”;
} else if (porsi >= 10) {
statusPenjualan = “👍 Penjualan Sedang”;
} else {
statusPenjualan = “⚠️ Kurang Laris (Rekomendasi: Evaluasi Menu)”;
}
// 4. Menampilkan Hasil ke Tampilan HTML
document.getElementById(“outMenu”).innerText = menu;
document.getElementById(“outPorsi”).innerText = porsi;
document.getElementById(“outTotal”).innerText = totalPendapatan.toLocaleString(“id-ID”);
document.getElementById(“outStatus”).innerText = statusPenjualan;
// Tampilkan kotak hasil
document.getElementById(“hasilBox”).style.display = “block”;
}
</script>
</body>
</html>