Fungsi & Aplikasi Web

Roadmap Belajar Modul Ini

Kita mulai dari konsep fungsi di Python, lanjut ke membangun UI interaktif menggunakan Streamlit.

Functions & Streamlit Jadikan logika Python bisa dipakai ulang & tampil menarik

Fungsi Dasar Kenali struktur def, parameter, dan return lewat contoh sederhana.

Return & Keputusan Lihat bagaimana fungsi membantu memisahkan logika kondisi agar kode tetap rapi.

Streamlit UI Bangun antarmuka tanpa HTML dengan komponen dasar dan umpan balik ke pengguna.

Eksperimen Gunakan playground dan tantangan akhir untuk menguji pemahamanmu.

Analogi Fungsi

Fungsi = Resep Membuat Sandwich

Sumber: codeanalogies.com

Arguments (Argumen) = Bahan-bahan yang kamu siapkan (roti, daging, sayur)
Parameters (Parameter) = Tempat untuk menerima bahan dalam resep
Return Value = Sandwich jadi yang dihasilkan

💻 Contoh Kode Python

                    def
                     buatSandwich(daging, sayur, roti):
                  

                    sandwich = roti + daging + sayur
                  

                    return
                     sandwich
                  

                    # Panggil fungsi
                  

                    hasil = 
                    buatSandwich
                    (
                    🥩
                    , 
                    🥬
                    , 
                    🍞
                    )
                  

                    print
                    (hasil) 
                    # Output: 
                    🥪
                  

💡 Lihat: Fungsi menerima 3 emoji (arguments), proses di dalam (function body), lalu return sandwich! Sama persis seperti mesin pembuat sandwich di dunia nyata.

Kenalan dengan Fungsi

Fungsi adalah blok kode yang hanya dijalankan ketika dipanggil. Dengan fungsi, kita bisa mengikuti prinsip Don't Repeat Yourself, membuat program modular, dan memisahkan logika berdasarkan tugasnya.

Anatomi Fungsi def untuk mendefinisikan, parameter untuk menerima data, dan return untuk mengembalikan hasil.

Kapan Dipakai? Saat ada logika berulang, proses yang panjang, atau ketika kamu ingin menamai sebuah aksi agar lebih mudah dipanggil.

Susun Modular Pecah aplikasi besar menjadi fungsi-fungsi kecil agar debugging dan kolaborasi jadi lebih mudah.

Template dasar fungsi:

Coba Edit & Jalankan

def tambah(angka1, angka2):
    hasil = angka1 + angka2
    return hasil

# Panggil fungsi
output = tambah(3, 5)
print(f"Hasil: {output}")

Hasil

Tulis kode Anda dan tekan 'Jalankan Kode'

Jenis-Jenis Fungsi

Tiga pola ini sering kamu temui saat menulis fungsi. Perbedaan utamanya terletak pada apakah fungsi menerima input dan apakah ia mengembalikan nilai.

Tanpa Parameter & Return

Eksperimen

def sapa():
    print("Halo! Selamat belajar Python!")

# Panggil fungsi
sapa()
sapa()

Hasil

Tekan 'Jalankan Kode' untuk melihat hasil

Fungsi ini hanya menjalankan perintah visual tanpa butuh data dari luar.

Dengan Parameter

Eksperimen

def sapa(nama):
    print(f"Halo {nama}!")

# Panggil fungsi dengan nama berbeda
sapa("Budi")
sapa("Ani")

Hasil

Tekan 'Jalankan Kode' untuk melihat hasil

Parameter membuat fungsi fleksibel menyapa siapa pun yang dipanggil.

Mengembalikan Nilai

Eksperimen

def kali(a, b):
    return a * b

# Simpan hasil ke variabel
hasil = kali(3, 4)
print("Hasil:", hasil)

Hasil

Tekan 'Jalankan Kode' untuk melihat hasil

return mengirimkan hasil proses agar bisa dipakai lagi di bagian kode lain.

Jika fungsi adalah dapur, parameter adalah bahan yang masuk, blok kode di dalamnya adalah proses memasak, dan return adalah hidangan yang keluar kembali ke pemanggil.

Simulasi Fungsi Interaktif

Coba fungsi secara langsung! Ubah input dan lihat bagaimana fungsi memproses data dan menghasilkan output.

🎮 Function Playground

Pilih fungsi, masukkan input, dan lihat hasilnya secara real-time!

📝 Fungsi: sapa_user(nama)

def sapa_user(nama):
    return
                    f"Halo {nama}, siap mengikuti quiz?"

Input nama:

Klik 'Jalankan' untuk melihat hasil

🎯 Fungsi: hitung_skor(jawaban, kunci)

def hitung_skor(jawaban, kunci):
    if
                    jawaban.lower() == kunci.lower():
        return
                    1
    return 0

Jawaban User:

Kunci Jawaban:

Klik 'Jalankan Fungsi' untuk melihat hasil

🧮 Fungsi: kalkulator(a, b, operasi)

def kalkulator(a, b, operasi):
    if
                    operasi == "+":
        return
                    a + b
    elif operasi == "-":
        return
                    a - b
    # dst...

Klik 'Hitung' untuk melihat hasil

Latihan: Studi Kasus Sederhana

Coba terapkan konsep fungsi dengan membuat sistem penilaian otomatis. Edit kode di bawah dan jalankan!

Sistem Penilaian Otomatis

# Buat fungsi untuk menentukan grade

def hitung_grade(skor):
    if skor >= 90:
        return "A - Sempurna!"
    elif skor >= 80:
        return "B - Bagus!"
    elif skor >= 70:
        return "C - Cukup"
    else:
        return "D - Perlu Belajar Lagi"

# Coba nilai beberapa siswa
print("=== HASIL NILAI SISWA ===\n")

siswa1 = hitung_grade(95)
siswa2 = hitung_grade(82)
siswa3 = hitung_grade(68)

print(f"Siswa 1 (skor 95): {siswa1}")
print(f"Siswa 2 (skor 82): {siswa2}")
print(f"Siswa 3 (skor 68): {siswa3}")

Hasil

Tekan tombol 'Jalankan Kode' untuk melihat hasil

Setup Streamlit & Hello World

Streamlit adalah library Python open-source untuk membuat aplikasi web secara instan. Kamu cukup menulis script Python biasa, jalankan dengan streamlit run, dan UI langsung muncul di browser.

Install dengan pip install streamlit.
Uji instalasi: streamlit hello akan membuka demo resmi.
Buat file app.py dan jalankan streamlit run app.py.
💡 Tip GitHub Codespaces: Kamu bisa run Streamlit langsung di GitHub Codespaces! Port akan otomatis di-forward dan bisa diakses lewat browser. Pastikan visibility port diset ke Public agar bisa diakses.

Contoh Streamlit App

# Simpan sebagai app.py dan jalankan: streamlit run app.py

import streamlit as st

st.title("Aplikasi Quiz Sederhana")
st.write("Selamat datang di aplikasi quiz!")

nama = st.text_input("Masukkan nama kamu:")

if st.button("Mulai Quiz"):
    st.write(f"Halo, {nama}! Ayo kita mulai kuisnya.")

Komponen Dasar Streamlit

Streamlit menyediakan banyak komponen yang siap dipakai. Berikut beberapa yang paling sering digunakan untuk membangun prototipe cepat.

Komponen	Fungsi
`st.title()`	Judul besar di halaman aplikasi.
`st.write()`	Teks biasa, angka, dataframe, atau objek Python lainnya.
`st.text_input()`	Input teks satu baris untuk menangkap respon pengguna.
`st.button()`	Tombol aksi yang biasanya dipadukan dengan `if`.

Interaksi Lanjutan

Tambahkan gambar, pilihan ganda, dan umpan balik visual agar aplikasi terasa hidup.

Media & Pilihan

Contoh Kode Streamlit

import streamlit as st

st.image("logo.png", caption="Logo Quiz", width=200)

pertanyaan = "Apa ibu kota Indonesia?"
pilihan = ["Jakarta", "Bandung", "Surabaya"]

jawaban = st.radio(pertanyaan, pilihan)
st.write(f"Jawaban dipilih: {jawaban}")

Feedback Pengguna

Contoh Kode Streamlit

import streamlit as st

jawaban = st.text_input("Jawaban kamu:")

if st.button("Submit Jawaban"):
    if jawaban == "Jakarta":
        st.success("✅ Jawaban kamu benar!")
    else:
        st.error("❌ Jawaban salah, coba lagi!")

Trik Berguna

Contoh Kode Streamlit

import streamlit as st

st.warning("Peringatan: Waktu hampir habis!")
st.info("Info: Kamu sudah menjawab 5 soal")
st.metric(label="Skor", value=85, delta=5)

# Tip: Gunakan parameter 'key' di widget jika butuh banyak input serupa

Studi Kasus Quiz App

1) Proyek yang Akan Kita Buat

Kita akan membuat Quiz App sederhana menggunakan Streamlit. Pengguna akan membaca pertanyaan, mengisi jawaban, lalu menekan tombol submit. Aplikasi akan memberi feedback benar atau salah, kemudian menampilkan skor akhir.

2) Komponen yang Dipakai (Tabel + Contoh Kode)

Berikut komponen Streamlit inti yang kita butuhkan untuk membangun aplikasi ini.

Komponen	Fungsi	Contoh Kode
`st.title()`	Menampilkan judul utama aplikasi.	`st.title("Quiz App Sederhana")`
`st.text_input()`	Menerima jawaban pengguna untuk setiap pertanyaan.	`jawaban = st.text_input(pertanyaan)`
`st.button()`	Men-trigger proses pengecekan jawaban.	`if st.button("Submit"):`
`st.success()` / `st.error()`	Menampilkan feedback benar/salah.	`st.success("✅ Benar!")`
`st.metric()`	Menampilkan skor akhir pengguna.	`st.metric("Skor Akhir", "2/3")`

Contoh Penggunaan Komponen

import streamlit as st

st.title("Quiz App Sederhana")
pertanyaan = "1 + 1 = ?"
jawaban = st.text_input(pertanyaan)

if st.button("Submit"):
    if jawaban == "2":
        st.success("✅ Benar!")
    else:
        st.error("❌ Salah!")

st.metric("Skor Akhir", "1/1")

Preview Gambar Proyek

Berikut adalah contoh tampilan akhir dari Quiz App beserta komponen yang kita gunakan. Kamu bisa menambahkan styling dan fitur tambahan sesuai kreativitasmu!

3) Data yang Dibutuhkan + Cara Menyusunnya

Kita butuh data pertanyaan dan kunci jawabannya. Struktur paling sederhana adalah dictionary dengan format: {pertanyaan: jawaban_benar}. Struktur ini memudahkan loop dan pengecekan.

Struktur Data Quiz

qna = {
    "1 + 1 = ?": "2",
    "Hewan berkaki 8?": "Laba-laba",
    "Bahasa populer untuk AI?": "Python",
}

4) Kode Lengkap Aplikasi

Setelah memahami komponen dan datanya, berikut implementasi penuh Quiz App.

Contoh Quiz App Lengkap

# Simpan sebagai app.py dan jalankan: streamlit run app.py
import streamlit as st

st.title("Quiz App Sederhana")

qna = {
    "1 + 1 = ?": "2",
    "Hewan berkaki 8?": "Laba-laba",
    "Bahasa populer untuk AI?": "Python",
}

skor = 0

for pertanyaan, kunci in qna.items():
    jawaban = st.text_input(pertanyaan)

    if st.button(f"Submit {pertanyaan}"):
        if jawaban.lower() == kunci.lower():
            st.success("✅ Benar!")
            skor += 1
        else:
            st.error("❌ Salah!")

st.metric("Skor Akhir", f"{skor}/{len(qna)}")

Simpan logika penilaian dalam fungsi terpisah agar mudah diuji sebelum menghubungkannya ke Streamlit.

Latihan Mandiri

Saatnya mengasah kemampuan kamu! Kerjakan tantangan interaktif di Google Colab untuk mempraktikkan konsep fungsi dan Streamlit yang sudah kamu pelajari.

🚀 Tantangan Python

Uji Pemahaman di Google Colab

Kerjakan notebook latihan fungsi & Streamlit untuk memperkuat konsep sebelum lanjut ke proyek berikutnya.

Buka Tantangan Kembali ke Daftar Materi