1. Deskripsi Masalah
Kita ingin membuat program untuk menghitung keliling sebuah persegi.
Sebuah persegi memiliki 4 sisi yang sama panjang.
Rumus:
Keliling = 4 × sisi
Contoh:
Jika panjang sisi = 5 cm, maka:
Keliling = 4 × 5 = 20 cm
2. Input, Proses, Output
| Komponen | Keterangan |
|---|---|
| Input | Panjang sisi persegi |
| Proses | Mengalikan sisi dengan 4 |
| Output | Keliling persegi |
Variabel
Kita membutuhkan dua variabel:
sisi
kelilingDengan:
sisi = panjang sisi persegi
keliling = hasil perhitungan keliling3. Rumus
Keliling = 4 × sisiatau dalam bentuk program:
keliling = 4 * sisi4. Algoritma
Algoritma adalah langkah-langkah penyelesaian masalah.
Algoritma Menghitung Keliling Persegi
- Mulai
- Tentukan nilai sisi persegi
- Masukkan panjang sisi
- Hitung keliling dengan rumus:
keliling = 4 × sisi - Tampilkan hasil keliling
- Selesai
5. Algoritma dalam Bentuk Pseudocode
ALGORITMA HitungKelilingPersegi
DEKLARASI
sisi : real
keliling : real
DESKRIPSI
Input sisi
keliling ← 4 × sisi
Output keliling
SELESAIVersi pseudocode yang lebih sederhana
BEGIN
INPUT sisi
keliling ← 4 * sisi
OUTPUT keliling
END6. Flowchart
Buat flowchartnya!
7. Implementasi dengan Python
Berikut kode Python paling sederhana:
# Program Menghitung Keliling Persegi
# Input
sisi = float(input("Masukkan panjang sisi persegi: "))
# Proses
keliling = 4 * sisi
# Output
print("Keliling persegi =", keliling)Contoh ketika dijalankan
Masukkan panjang sisi persegi: 5
Keliling persegi = 20.08. Python dengan Satuan
Kalau ingin hasilnya lebih mudah dipahami:
# Program Menghitung Keliling Persegi
sisi = float(input("Masukkan panjang sisi persegi (cm): "))
keliling = 4 * sisi
print("================================")
print(" HASIL PERHITUNGAN")
print("================================")
print("Panjang sisi :", sisi, "cm")
print("Keliling :", keliling, "cm")Output:
================================
HASIL PERHITUNGAN
================================
Panjang sisi : 5.0 cm
Keliling : 20.0 cm9. Python dengan Validasi Input
Untuk materi pemrograman yang lebih lengkap, kita bisa memastikan sisi harus lebih besar dari 0.
# Program Menghitung Keliling Persegi
sisi = float(input("Masukkan panjang sisi persegi (cm): "))
if sisi > 0:
keliling = 4 * sisi
print("\n=== HASIL PERHITUNGAN ===")
print("Panjang sisi :", sisi, "cm")
print("Keliling :", keliling, "cm")
else:
print("Panjang sisi harus lebih besar dari 0.")10. JavaScript + HTML
Sekarang kita buat versi berbasis web.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keliling Persegi</title>
</head>
<body>
<h1>Menghitung Keliling Persegi</h1>
<label for="sisi">Panjang Sisi:</label>
<input type="number" id="sisi">
<button onclick="hitungKeliling()">Hitung</button>
<h2 id="hasil"></h2>
<script>
function hitungKeliling() {
// Mengambil nilai sisi
let sisi = document.getElementById("sisi").value;
// Mengubah nilai menjadi angka
sisi = Number(sisi);
// Menghitung keliling
let keliling = 4 * sisi;
// Menampilkan hasil
document.getElementById("hasil").innerHTML =
"Keliling persegi = " + keliling;
}
</script>
</body>
</html>11. Penjelasan JavaScript
Bagian ini:
function hitungKeliling() {digunakan untuk membuat fungsi bernama hitungKeliling.
Ketika tombol diklik:
<button onclick="hitungKeliling()">Hitung</button>maka fungsi tersebut dijalankan.
Mengambil nilai input
let sisi = document.getElementById("sisi").value;Artinya JavaScript mengambil nilai dari:
<input type="number" id="sisi">Mengubah input menjadi angka
sisi = Number(sisi);Ini penting karena nilai dari input HTML pada dasarnya dibaca sebagai teks/string.
Menghitung keliling
let keliling = 4 * sisi;Ini adalah implementasi rumus:
Keliling = 4 × sisiMenampilkan hasil
document.getElementById("hasil").innerHTML =
"Keliling persegi = " + keliling;JavaScript mencari elemen:
<h2 id="hasil"></h2>kemudian memasukkan hasil perhitungan ke dalamnya.
12. Versi HTML + JavaScript yang Lebih Bagus
Untuk latihan mahasiswa, saya sarankan menggunakan versi ini karena sudah memiliki input, validasi, proses, dan output.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hitung Keliling Persegi</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 50px auto;
}
.container {
border: 1px solid #ddd;
padding: 25px;
border-radius: 10px;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
button {
padding: 10px 20px;
cursor: pointer;
}
#hasil {
margin-top: 20px;
padding: 15px;
background: #f5f5f5;
}
</style>
</head>
<body>
<div class="container">
<h1>Keliling Persegi</h1>
<label>Panjang Sisi</label>
<input
type="number"
id="sisi"
placeholder="Masukkan panjang sisi"
>
<button onclick="hitungKeliling()">
Hitung Keliling
</button>
<div id="hasil"></div>
</div>
<script>
function hitungKeliling() {
// Mengambil nilai dari input
let sisi = Number(
document.getElementById("sisi").value
);
// Validasi
if (sisi <= 0) {
document.getElementById("hasil").innerHTML =
"Sisi harus lebih besar dari 0.";
return;
}
// Proses perhitungan
let keliling = 4 * sisi;
// Menampilkan hasil
document.getElementById("hasil").innerHTML =
"Panjang sisi = " + sisi + "<br>" +
"Rumus = 4 × sisi<br>" +
"Keliling = " + keliling;
}
</script>
</body>
</html>13. Perbandingan Algoritma → Python → JavaScript
Ini bagian yang bagus untuk menjelaskan kepada mahasiswa bahwa algoritmanya sama, tetapi bahasa pemrogramannya berbeda.
| Algoritma | Python | JavaScript |
|---|---|---|
| Input sisi | input() | input.value |
| Simpan sisi | sisi | let sisi |
| Hitung | 4 * sisi | 4 * sisi |
| Simpan hasil | keliling | let keliling |
| Output | print() | innerHTML |
Yang paling penting:
ALGORITMA
↓
Input sisi
↓
Proses 4 × sisi
↓
Output kelilingPython:
sisi = float(input("Sisi: "))
keliling = 4 * sisi
print(keliling)JavaScript:
let sisi = Number(document.getElementById("sisi").value);
let keliling = 4 * sisi;
document.getElementById("hasil").innerHTML = keliling;Jadi logika/programming-nya tidak berubah. Yang berubah terutama adalah sintaks bahasa pemrogramannya.
