Pertemuan 6 - 01/04/2026

Tugas Pertemuan 6 PPB B 2026

April 6, 2026

Nama  : Triana Velia Hutabalian

NRP   : 5025231190

Kelas  : PPB(B)

Pada pertemuan keenam ini, kami membuat aplikasi Kalkulator Sederhana menggunakan Kotlin dan Jetpack Compose di Android Studio. Aplikasi ini memiliki dua OutlinedTextField untuk input angka, empat tombol operator (+, -, *, /), serta teks hasil yang ditampilkan secara reaktif. Konsep utama yang dipelajari adalah pengelolaan State dengan remember dan mutableStateOf, validasi input dengan toDoubleOrNull(), dan penggunaan ekspresi when untuk logika perhitungan.

🛠 Langkah Pengerjaan

1

Membuat project baru di Android Studio dengan template Empty Activity, nama project SimpleCalculator, package com.example.simplecalculator, dan Minimum SDK API 24.

2

Mendeklarasikan tiga state di dalam composable CalculatorApp() menggunakan remember { mutableStateOf("") }, yaitu num1, num2 untuk menyimpan input angka, dan result untuk menyimpan hasil perhitungan.

3

Membuat fungsi lokal calculate(operator: String) di dalam composable yang mem-parse input dengan toDoubleOrNull(), menghitung menggunakan ekspresi when, dan menangani kasus pembagian dengan nol serta input tidak valid.

4

Menambahkan dua OutlinedTextField dengan keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number) agar keyboard numerik muncul otomatis saat field disentuh.

5

Menambahkan composable Text untuk menampilkan hasil yang dibungkus kondisi if (result.isNotEmpty()) sehingga hanya muncul setelah tombol operator pertama kali ditekan.

6

Membuat Row berisi empat Button operator menggunakan for (op in listOf("+", "-", "*", "/")) agar kode lebih ringkas. Setiap tombol memanggil calculate(op) saat ditekan.

7

Mengatur keseluruhan tata letak dengan Column, verticalArrangement = Arrangement.Center, dan horizontalAlignment = Alignment.CenterHorizontally agar semua elemen berada di tengah layar.

8

Menjalankan aplikasi di emulator Pixel 6 API 34 dan memverifikasi semua operasi berjalan benar, termasuk kasus pembagian dengan nol yang menampilkan pesan error.

💡 Konsep yang Dipelajari

remember + mutableStateOf

Menyimpan state UI agar tidak reset saat recomposition dan memicu pembaruan UI otomatis ketika nilainya berubah.

OutlinedTextField

Komponen input teks Material3 dengan border outline, mendukung onValueChange untuk memperbarui state setiap karakter diketik.

toDoubleOrNull()

Konversi String ke Double yang aman — mengembalikan null jika input bukan angka, mencegah aplikasi crash.

when expression

Ekspresi Kotlin yang memetakan operator ke operasi aritmatika yang sesuai, dapat mengembalikan nilai langsung ke variabel.

KeyboardType.Number

Opsi keyboard yang membuat HP menampilkan keyboard angka secara otomatis saat OutlinedTextField difokus.

Validasi pembagian nol

Pengecekan if (n2 != 0.0) sebelum operasi bagi untuk mencegah error dan menampilkan pesan yang informatif.

📄 Kode Program

MainActivity.kt

package com.example.simplecalculator

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.simplecalculator.ui.theme.SimpleCalculatorTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            SimpleCalculatorTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    CalculatorApp(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun CalculatorApp(modifier: Modifier = Modifier) {
    var num1 by remember { mutableStateOf("") }
    var num2 by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("") }

    fun calculate(operator: String) {
        val n1 = num1.toDoubleOrNull()
        val n2 = num2.toDoubleOrNull()
        if (n1 == null || n2 == null) {
            result = "Input tidak valid"
            return
        }
        result = when (operator) {
            "+" -> (n1 + n2).toString()
            "-" -> (n1 - n2).toString()
            "*" -> (n1 * n2).toString()
            "/" -> if (n2 != 0.0) (n1 / n2).toString()
                    else "Error: Tidak bisa dibagi nol"
            else -> "Operator tidak valid"
        }
    }

    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        OutlinedTextField(
            value = num1,
            onValueChange = { num1 = it },
            label = { Text("Angka pertama") },
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number
            ),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(12.dp))
        OutlinedTextField(
            value = num2,
            onValueChange = { num2 = it },
            label = { Text("Angka kedua") },
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number
            ),
            modifier = Modifier.fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(16.dp))
        if (result.isNotEmpty()) {
            Text(
                text = "Hasil: ",
                fontSize = 20.sp,
                fontWeight = FontWeight.SemiBold
            )
            Spacer(modifier = Modifier.height(16.dp))
        }
        Row(
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            for (op in listOf("+", "-", "*", "/")) {
                Button(onClick = { calculate(op) }) {
                    Text(text = op, fontSize = 18.sp)
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun CalculatorPreview() {
    SimpleCalculatorTheme {
        CalculatorApp()
    }
}

📸 Hasil Output

MainActivity.kt — Android Studio · Pixel 6 API 34