Pembahasan UKK RPL Paket 1 Aplikasi Kalkulator Tahun 2025

Ujian Kompetensi Keahlian (UKK) merupakan salah satu tahapan penting bagi siswa jurusan Rekayasa Perangkat Lunak (RPL) untuk menguji pemahaman dan keterampilan mereka dalam pengembangan perangkat lunak. Salah satu topik yang sering muncul dalam UKK RPL adalah pembuatan aplikasi kalkulator, yang menguji kemampuan siswa dalam pemrograman, logika matematika, serta antarmuka pengguna.

Learningku Indonesia dalam artikel ini, kita akan melakukan Pembahasan Soal UKK RPL Paket 1 Aplikasi Kalkulator, mulai dari analisis soal, langkah-langkah penyelesaian, hingga teknik pemrograman yang bisa diterapkan. Panduan ini diharapkan dapat membantu siswa dalam memahami konsep yang diujikan serta meningkatkan kesiapan mereka dalam menghadapi UKK.

Gabung Ke Grup Learningku Indonesia di Telegram : https://t.me/learningku

Daftar Isi

Ringkasan Soal UKK RPL Paket 1

Tentukan Struktur Data
Pilih struktur data yang sesuai untuk menyimpan angka dan hasil perhitungan (misalnya variabel atau array untuk menyimpan input angka).
Rancang Antarmuka Pengguna (UI)
a. Desain antarmuka yang memungkinkan pengguna memasukkan dua angka dan memilih operasi matematika (penjumlahan, pengurangan, perkalian, atau pembagian).
b. Gunakan komponen seperti TextBox untuk input angka, dan Button untuk operasi matematika.
Implementasikan Logika Program
a. Tulis kode untuk menangani input pengguna dan memilih operasi berdasarkan tombol yang ditekan.
b. Gunakan kondisi if-else atau switch-case untuk menentukan operasi matematika yang diinginkan dan lakukan perhitungan.
c. Pastikan untuk menangani pembagian dengan nol dengan memberi peringatan atau pesan kesalahan.
Validasi Input Pengguna
a. Periksa apakah input yang diberikan oleh pengguna adalah angka yang valid.
b. Tangani kasus ketika pengguna memasukkan nilai yang tidak valid atau kosong.
Tampilkan Hasil
a. Setelah operasi matematika selesai, tampilkan hasil perhitungan pada antarmuka pengguna menggunakan Label atau TextBox.
b. Berikan pesan kesalahan yang jelas jika terjadi pembagian dengan nol atau kesalahan lainnya.
Uji Coba Program
a. Jalankan aplikasi dan lakukan pengujian dengan berbagai input untuk memastikan aplikasi bekerja sesuai harapan.
b. Uji kasus-kasus seperti operasi dengan angka negatif, angka desimal, dan pembagian dengan nol.
Perbaikan dan Penyempurnaan
a. Perbaiki bug atau kesalahan yang ditemukan selama pengujian.
b. Pastikan aplikasi memberikan respons yang cepat dan hasil yang akurat untuk setiap operasi.
Pengujian Akhir
a. Lakukan pengujian akhir untuk memastikan aplikasi berfungsi dengan baik dan memenuhi semua persyaratan.
b. Pastikan antarmuka pengguna mudah digunakan dan aplikasi bebas dari kesalahan.
Penyelesaian dan Dokumentasi
a. Dokumentasikan kode dan cara penggunaan aplikasi untuk memudahkan pemeliharaan di masa mendatang.
b. Siapkan aplikasi untuk distribusi atau implementasi.

Pembahasan UKK RPL Paket 1 – Index.html

Berikut ini adalah pembahasan UKK RPL Paket 1 pada halaman home atau pada file index.html

Halaman index.html

1. Struktur Dasar

Kode menggunakan standar HTML5 dan memiliki elemen utama seperti <head> dan <body>.

<html lang="en">

lang="en" menandakan bahwa bahasa utama halaman ini adalah Bahasa Inggris.

2. Bagian <head>

Berisi meta informasi dan sumber daya eksternal.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Aplikasi My Swipoa - Kalkulator Sederhana">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="wahyup">
<title>Aplikasi Kalkulator Sederhana</title>

charset="UTF-8" → Menggunakan encoding karakter UTF-8.
viewport → Agar tampilan responsif di berbagai perangkat.
description → Deskripsi halaman untuk SEO.
keywords → Kata kunci terkait halaman ini.
author → Menunjukkan pembuat halaman.
title → Judul yang muncul di tab browser.

Menghubungkan CSS

<link rel="stylesheet" href="style.css">

Menghubungkan file style.css untuk styling tampilan.

Menggunakan Bootstrap 5

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Bootstrap digunakan untuk mempercantik tampilan UI.

3. Bagian <body>

3.1. Kontainer Kalkulator

<div class="calculator">

Elemen utama yang membungkus kalkulator.

3.2. Notifikasi Alert

<div class="text-center alert alert-warning alert-dismissible fade show" role="alert">
    <a href="https://github.com/wahyupambudi/mini-calculator" target="_blank" class="alert-link">Source Code Here!</a>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Menampilkan notifikasi dengan Bootstrap alert.
Tombol “Close” untuk menutup notifikasi.
Link ke GitHub mengarah ke kode sumber kalkulator.

3.3. Judul Kalkulator

<h1 align="center" style="font-weight: bold; font-size: 30px; color: white; font-family: consolas">Aplikasi Kalkulator</h1>

Judul halaman, ditampilkan di tengah dengan font Consolas.

3.4. Layar Input Kalkulator

<input type="text" id="screen" style="border-radius: 5px" placeholder="0">

<input> sebagai layar tampilan angka.
id="screen" untuk referensi di JavaScript.
placeholder="0" agar tampilan awal menampilkan angka 0.

3.5. Tombol-Tombol Kalkulator

<div class="container-button">
    <span class="button operator">C</span>
    <span class="button operator">Del</span>
    <span class="button operator">.</span>
    <span class="button operator">/</span>
    <span class="button">7</span>
    <span class="button">8</span>
    <span class="button">9</span>
    <span class="button operator">*</span>
    <span class="button">4</span>
    <span class="button">5</span>
    <span class="button">6</span>
    <span class="button operator">+</span>
    <span class="button">1</span>
    <span class="button">2</span>
    <span class="button">3</span>
    <span class="button operator">-</span>
    <span class="button nol">0</span>
    <span class="button hitung">=</span>
</div>

Tombol operator: C (clear), Del (hapus), ., /, *, +, -, =.
Angka: 0-9.
Kelas CSS digunakan untuk styling tombol.

4. Bagian <script> (JavaScript)

4.1. File JavaScript Eksternal

<script src="calc.js"></script>

calc.js adalah file yang mengontrol logika kalkulator.

4.2. jQuery dan Bootstrap JS

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

jQuery → Mempermudah manipulasi elemen.
Popper.js → Mendukung fitur Bootstrap seperti tooltip dan popover.
Bootstrap JS → Untuk mendukung interaksi komponen Bootstrap.

Pembahasan UKK RPL Paket 1 – style.css

Berikut ini adalah pembahasan UKK RPL Paket 1 pada penampilan atau styling halaman home atau pada file stlye.css

1. Global Body Styles

body {
	background: linear-gradient(to right, #fe4775, #6346ff);
}

background: Mengatur latar belakang halaman dengan linear gradient yang berpindah dari warna merah muda (#fe4775) ke biru (#6346ff). Ini memberikan efek transisi warna yang halus dari kiri ke kanan.

2. Kalkulator (Container)

.calculator {
	width: 350px;
	margin: 20px auto 0px auto;
	padding: 10px;
	border-radius: 10px;
}

width: Mengatur lebar elemen kalkulator menjadi 350px.
margin: Memberikan ruang otomatis di kiri dan kanan (auto), serta jarak 20px di atasnya dan 0px di bawahnya.
padding: Menambahkan ruang di dalam kalkulator sebesar 10px dari tepi.
border-radius: Membuat sudut kalkulator menjadi melengkung dengan radius 10px.

3. Layar Kalkulator (Input)

#screen {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #F0EFEF;
	font-size: 25px;
	font-weight: bold;
	color: grey;
	padding: 7px 5px;
	text-align: right;
	outline: none;
	margin-bottom: 10px;
}

width: 100%: Memastikan layar kalkulator mengambil lebar penuh dari elemen induknya.
box-sizing: border-box: Menghitung padding dan border dalam lebar elemen, memastikan elemen tetap pas dalam container.
border: Memberikan border tipis dengan warna #F0EFEF (abu-abu terang).
font-size dan font-weight: Mengatur ukuran font menjadi 25px dan menjadikannya tebal.
color: Mengatur warna teks menjadi abu-abu.
padding: Memberikan jarak dalam elemen (di dalam input) sebesar 7px di atas dan bawah, serta 5px di kiri dan kanan.
text-align: right: Mengatur teks agar sejajar di sebelah kanan, sesuai dengan fungsi kalkulator.
outline: none: Menghapus garis fokus di sekitar input saat diklik.
margin-bottom: Memberikan jarak bawah 10px antara layar input dan tombol kalkulator.

4. Container Tombol

.container-button {
	display: flex;
	flex-wrap: wrap;
}

display: flex: Menggunakan flexbox untuk menata tombol secara baris dan kolom.
flex-wrap: wrap: Memungkinkan tombol untuk membungkus ke baris berikutnya jika ruang di baris pertama sudah penuh.

5. Tombol Umum

.button {
	display: flex;
	width: 23%;
	margin: 1%;
	font-size: 20px;
	color: white;
	font-weight: bold;
	height: 60px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	background-color: #26294b;
	border-radius: 5px;
}

width: 23%: Lebar tombol 23% dari lebar kontainer, memungkinkan empat tombol di satu baris.
margin: 1%: Memberikan jarak 1% di sekitar tombol.
font-size: 20px: Ukuran font tombol.
color: white: Mengatur warna teks tombol menjadi putih.
font-weight: bold: Membuat teks tombol menjadi tebal.
height: 60px: Tinggi tombol 60px.
box-sizing: border-box: Menjamin padding dan border dihitung dalam ukuran tombol.
justify-content: center dan align-items: center: Mengatur teks di dalam tombol untuk terpusat.
background-color: #26294b: Warna latar belakang tombol #26294b (abu-abu gelap dengan nuansa biru).
border-radius: 5px: Memberikan sudut melengkung 5px pada tombol.

6. Efek Hover pada Tombol

.button:hover {
	background-color: #4A4E7D;
	cursor: pointer;
	opacity: 0.9;
	color: white;
}

background-color: #4A4E7D: Mengubah warna latar belakang saat tombol di-hover menjadi biru tua.
cursor: pointer: Mengubah kursor menjadi bentuk tangan saat berada di atas tombol.
opacity: 0.9: Mengurangi sedikit transparansi tombol saat di-hover.
color: white: Menjaga teks tetap putih saat di-hover.

7. Tombol Nol (Button “0”)

.nol {
	flex-grow: 1;
}

flex-grow: 1: Membuat tombol nol tumbuh untuk mengisi ruang yang tersedia di dalam baris.

8. Tombol Operator

.operator {
	background-color: #1C1E3A;
}

background-color: #1C1E3A: Mengubah latar belakang tombol operator (seperti C, Del, dll.) menjadi warna biru gelap.

9. Tombol Hitung (Button “=”)

.hitung {
	color: #1C1E3A;
	background-color: #ffffff;
}

color: #1C1E3A: Mengatur teks tombol menjadi biru gelap.
background-color: #ffffff: Memberikan latar belakang putih pada tombol “=”.

.hitung:hover {
	background-color: #F2F2F2;
	color: orange;
}

background-color: #F2F2F2: Mengubah latar belakang tombol “=” saat di-hover menjadi abu-abu terang.
color: orange: Mengubah warna teks menjadi oranye saat tombol di-hover.

10. Media Queries untuk Responsif

@media screen and (max-width: 900px) {
	.calculator {
		width: 350px;
		margin: 10px auto 0px auto;
		padding: 10px;
		border-radius: 10px;
	}
}

@media screen and (max-width: 600px) {
	.calculator {
		width: 350px;
		margin: 10px auto 0px auto;
		padding: 10px;
		border-radius: 10px;
	}
}

Media queries digunakan untuk mengubah tampilan kalkulator saat lebar layar lebih kecil dari 900px dan 600px. Dalam kasus ini, lebar kalkulator tetap 350px dengan margin dan padding yang sudah ditentukan.

Pembahasan UKK RPL Paket 1 – calc.js

Berikut ini adalah pembahasan UKK RPL Paket 1 dengan menggabungkan javascript yaitu calc.js yang berisi logika program yang akan dikembangkan.

1. Mengambil Elemen HTML

let button = document.querySelector(".container-button");
let screen = document.querySelector("#screen");

button → Mengambil elemen dengan class .container-button, yang merupakan container untuk semua tombol kalkulator.
screen → Mengambil elemen dengan ID #screen, yang merupakan layar kalkulator tempat hasil perhitungan ditampilkan.

2. Menambahkan Event Listener pada Klik Tombol

button.addEventListener("click", function (e) {
  let buttonClick = e.target;
  let valueButton = buttonClick.innerText;

Event listener “click” dipasang pada elemen button (container tombol).
e.target → Mendapatkan elemen yang diklik.
buttonClick.innerText → Mengambil teks dari tombol yang diklik (angka atau operator).

3. Memastikan yang Diklik adalah Tombol

  if (!buttonClick.classList.contains("button")) {
    return;
  }

Jika elemen yang diklik bukan tombol kalkulator (bukan elemen dengan class .button), maka fungsi akan berhenti (return).

Ini mencegah bug jika pengguna mengklik area kosong di dalam container tombol.

4. Menangani Tombol Khusus

a) Tombol “C” (Clear)

  if (valueButton == "C") {
    screen.value = "";
  }

Jika tombol yang diklik adalah “C”, maka layar kalkulator dikosongkan ("").

b) Tombol “Del” (Delete)

  else if (valueButton == "Del") {
    screen.value = screen.value.slice(0, -1);
  }

Jika tombol yang diklik adalah “Del”, maka karakter terakhir di layar dihapus.
slice(0, -1) → Menghapus karakter terakhir dari screen.value.

c) Tombol “=” (Hitung)

Jika input kosong

  else if (valueButton == "=" && screen.value == "") {
    alert("Silahkan Masukkan Angka!");
  }

Jika pengguna menekan tombol “=”, tetapi layar kosong, muncul peringatan (alert).

Jika ada ekspresi matematika

  else if (valueButton == "=") {
    try {
      screen.value = eval(screen.value);
    } catch {
      alert("Input tidak valid!");
    }
  }

eval(screen.value) → Mengeksekusi ekspresi matematika yang ada di layar.
Try-catch digunakan untuk menangani kesalahan:
- Jika ekspresi valid, hasil perhitungan ditampilkan di layar.
- Jika ekspresi tidak valid, muncul peringatan “Input tidak valid!”.

5. Menangani Input Angka & Operator

  else {
    let lastChar = screen.value.slice(-1); // Karakter terakhir di layar
    let operators = [".", "+", "-", "*", "/"]; // Daftar operator

lastChar → Mengambil karakter terakhir dari layar.
operators → Array yang berisi daftar operator yang didukung.

a) Jika Tombol yang Ditekan adalah Operator

    if (operators.includes(valueButton)) {

includes(valueButton) → Memeriksa apakah tombol yang diklik adalah operator (+, -, *, /, .).

1. Mencegah Operator Ganda

      if (operators.includes(lastChar)) {
        screen.value = screen.value.slice(0, -1) + valueButton;
      }

Jika karakter terakhir di layar adalah operator, maka operator terakhir diganti dengan operator yang baru diklik.
Contoh:
- Jika layar berisi “5+”, lalu pengguna menekan tombol *, maka hasilnya menjadi “5”* (bukan “5+*”).

2. Tambahkan Operator Jika Ada Angka

      else if (screen.value !== "") {
        screen.value += valueButton;
      }

Jika layar tidak kosong dan karakter terakhir bukan operator, operator baru ditambahkan ke layar.
Ini mencegah operator muncul di awal input.

b) Jika Tombol yang Ditekan adalah Angka

    else {
      screen.value += valueButton;
    }

Jika tombol yang diklik bukan operator, maka angka akan langsung ditambahkan ke layar.

Full Kode UKK RPL Paket 1 – Aplikasi Kalkulator

index.html

<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Aplikasi My Swipoa - Kalkulator Sederhana">
	<meta name="keywords" content="HTML, CSS, JavaScript">
	<meta name="author" content="wahyup">
	<title>Aplikasi Kalkulator Sederhana</title>
	<link rel="stylesheet" href="style.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
	<div class="calculator">
		<div class="text-center alert alert-warning alert-dismissible fade show" role="alert">
			<a href="https://github.com/wahyupambudi/mini-calculator" target="_blank" class="alert-link">Source Code
				Here!</a>
			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		</div>

		<h1 align="center" style="font-weight: bold; font-size: 30px; color: white; font-family: consolas">Aplikasi
			Kalkulator</h1>
		<input type="text" id="screen" style="border-radius: 5px" placeholder="0">
		<div class="container-button">
			<span class="button operator">C</span>
			<span class="button operator">Del</span>
			<span class="button operator">.</span>
			<span class="button operator">/</span>
			<span class="button">7</span>
			<span class="button">8</span>
			<span class="button">9</span>
			<span class="button operator">*</span>
			<span class="button">4</span>
			<span class="button">5</span>
			<span class="button">6</span>
			<span class="button operator">+</span>
			<span class="button">1</span>
			<span class="button">2</span>
			<span class="button">3</span>
			<span class="button operator">-</span>
			<span class="button nol">0</span>
			<span class="button hitung">=</span>
		</div>
	</div>
	<script src="calc.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
		integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
		crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
		integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
		crossorigin="anonymous"></script>
</body>

</html>

style.css

body {
	background: linear-gradient(to right, #fe4775, #6346ff);
}

.calculator {
	width: 350px;
	margin: 20px auto 0px auto;
	padding: 10px;
	border-radius: 10px;
}

#screen {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #F0EFEF;
	font-size: 25px;
	font-weight: bold;
	color: grey;
	padding: 7px 5px;
	text-align: right;
	outline: none;
	margin-bottom: 10px;
}

.container-button {
	display: flex;
	flex-wrap: wrap;
}

.button {
	display: flex;
	width: 23%;
	margin: 1%;
	font-size: 20px;
	color: white;
	font-weight: bold;
	height: 60px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	background-color: #26294b;
	border-radius: 5px;
}


.button:hover {
	background-color: #4A4E7D;
	cursor: pointer;
	opacity: 0.9;
	color: white;
}

.nol {
	flex-grow: 1;
}

.operator {
	background-color: #1C1E3A
}

.hitung {
	color: #1C1E3A;
	background-color: #ffffff;
}

.hitung:hover {
	background-color: #F2F2F2;
	color: orange;
}

@media screen and (max-width: 900px) {
	.calculator {
		width: 350px;
		margin: 10px auto 0px auto;
		padding: 10px;
		border-radius: 10px;
	}
}

@media screen and (max-width: 600px) {
	.calculator {
		width: 350px;
		margin: 10px auto 0px auto;
		padding: 10px;
		border-radius: 10px;
	}
}

calc.js

let button = document.querySelector(".container-button");
let screen = document.querySelector("#screen");

button.addEventListener("click", function (e) {
  let buttonClick = e.target;
  let valueButton = buttonClick.innerText;

  // Pastikan elemen yang diklik memiliki class "button"
  if (!buttonClick.classList.contains("button")) {
    return;
  }

  if (valueButton == "C") {
    screen.value = "";
  } else if (valueButton == "Del") {
    screen.value = screen.value.slice(0, -1);
  } else if (valueButton == "=" && screen.value == "") {
    alert("Silahkan Masukkan Angka!");
  } else if (valueButton == "=") {
    try {
      screen.value = eval(screen.value);
    } catch {
      alert("Input tidak valid!");
    }
  } else {
    // Logika untuk mengganti operator sebelumnya jika operator ditekan berurutan
    let lastChar = screen.value.slice(-1); // Karakter terakhir di layar
    let operators = [".", "+", "-", "*", "/"]; // Daftar operator

    // jika input operator bernilai true dengan yang ada di operator
    if (operators.includes(valueButton)) {
      // jika operator lastChar yang sudah ada operator maka
      if (operators.includes(lastChar)) {
        // Ganti operator terakhir dengan operator baru
        screen.value = screen.value.slice(0, -1) + valueButton;
      } else if (screen.value !== "") {
        // Tambahkan operator jika ada angka sebelumnya
        screen.value += valueButton;
      }
    } else {
      // Tambahkan nilai tombol ke layar jika bukan operator
      screen.value += valueButton;
    }
  }
});

Kesimpulan UKK RPL Paket 1

Dari pembahasan UKK RPL Paket 1 pada aplikasi pembuatan kalkulator sederhana, berikut ini adalah beberapa hal yang dapat di ambil kesimpulan.

Kode ini adalah aplikasi kalkulator sederhana berbasis HTML, CSS, dan JavaScript dengan fitur: ✅ Tampilan responsif menggunakan Bootstrap.
✅ Tombol interaktif untuk operasi matematika.
✅ Notifikasi alert dengan link ke kode sumber di GitHub.
✅ Script JavaScript (calc.js) untuk menangani logika perhitungan.

CSS di atas memberikan desain yang responsif dan menarik untuk kalkulator web. Desain ini memastikan tombol-tombol kalkulator teratur, dengan efek interaktif saat tombol di-hover, serta latar belakang yang menarik menggunakan gradient. Tombol-tombol memiliki warna yang jelas dan mudah dibedakan, dengan desain yang responsif untuk berbagai ukuran layar.

Kode ini berfungsi sebagai logika kalkulator sederhana dengan fitur berikut:

✅ Menampilkan angka yang ditekan pada layar.
✅ Mendeteksi tombol khusus seperti “C” (hapus semua), “Del” (hapus satu karakter), dan “=” (hitung hasil).
✅ Mencegah kesalahan input, seperti dua operator berturut-turut.
✅ Menampilkan pesan peringatan jika terjadi kesalahan dalam perhitungan.

Dengan kode ini, kalkulator dapat melakukan operasi matematika dasar dengan pengalaman pengguna yang baik pada UKK RPL Paket 1! 🚀