Mini Project

 

Mini Project: Aplikasi Self-Service Kiosk Pemesanan Makanan

Studi Kasus

Sebuah restoran cepat saji ingin menyediakan mesin kiosk digital agar pelanggan dapat memesan makanan sendiri tanpa melalui kasir seperti yang digunakan pada McDonald's.

Mahasiswa diminta membuat aplikasi Android sederhana yang mensimulasikan sistem pemesanan makanan pada kiosk.

---

1. Tujuan Mini Project

Mahasiswa mampu:

• Membuat aplikasi Android sederhana

• Mengimplementasikan UI pemesanan makanan

• Mengelola data menu

• Menghitung total pesanan

• Menampilkan ringkasan pesanan

---

2. Fitur Aplikasi

Fitur minimum yang harus dibuat mahasiswa:

1. Halaman Menu Makanan

Menampilkan daftar menu seperti:

• Burger

• Fried Chicken

• French Fries

• Soft Drink

Informasi yang ditampilkan:

• Nama menu

• Harga

• Gambar menu

---

2. Halaman Pilih Pesanan

Pengguna dapat:

• memilih menu

• menentukan jumlah pesanan

---

3. Keranjang Pesanan (Cart)

Menampilkan:

• daftar pesanan

• jumlah item

• harga per item

• total harga

---

4. Halaman Pembayaran

Simulasi pembayaran:

• QR payment

• Cash

---

5. Halaman Nomor Pesanan

Setelah pembayaran berhasil:

• tampil nomor pesanan

• pesan "Silakan tunggu pesanan Anda"

---

3. Struktur Halaman Aplikasi

Flow aplikasi:

Welcome Screen
      ↓
Menu Screen
      ↓
Cart Screen
      ↓
Payment Screen
      ↓
Order Success Screen

---

4. Desain UI Sederhana

Halaman Menu

---------------------------------
       KIOSK RESTAURANT
---------------------------------

Burger           Rp 25.000   [+]
Fried Chicken    Rp 20.000   [+]
French Fries     Rp 15.000   [+]
Soft Drink       Rp 10.000   [+]

-------------------------------
        Lihat Keranjang
-------------------------------

---

Halaman Keranjang

---------------------------------
          KERANJANG
---------------------------------

Burger x2        Rp 50.000
French Fries x1  Rp 15.000

---------------------------------
TOTAL            Rp 65.000
---------------------------------

[ Bayar Sekarang ]

---

Halaman Pembayaran

---------------------------------
        METODE PEMBAYARAN
---------------------------------

[ QR Payment ]
[ Cash ]

---------------------------------

---

Halaman Sukses

---------------------------------
      PESANAN BERHASIL
---------------------------------

Nomor Pesanan:
A105

Silakan tunggu pesanan Anda.

---------------------------------

---

5. Struktur Project Android

Struktur folder:

kiosk-app
│
├── activities
│   ├── MainActivity
│   ├── MenuActivity
│   ├── CartActivity
│   ├── PaymentActivity
│   └── OrderSuccessActivity
│
├── model
│   └── MenuItem
│
├── adapter
│   └── MenuAdapter
│
└── layout
    ├── activity_menu.xml
    ├── activity_cart.xml
    ├── activity_payment.xml

---

6. Contoh Model Data Menu (Kotlin)

data class MenuItem(
    val name: String,
    val price: Int,
    val image: Int
)

---

7. Contoh Data Menu

val menuList = listOf(
    MenuItem("Burger", 25000, R.drawable.burger),
    MenuItem("Fried Chicken", 20000, R.drawable.chicken),
    MenuItem("French Fries", 15000, R.drawable.fries),
    MenuItem("Soft Drink", 10000, R.drawable.drink)
)

---

8. Logika Hitung Total Pesanan

var total = 0

for (item in cartList) {
    total += item.price * item.quantity
}

textTotal.text = "Rp $total"

---

9. Rubrik Penilaian

Aspek	Bobot
UI aplikasi	20%
Navigasi halaman	20%
Pengolahan data menu	20%
Perhitungan total	20%
Struktur kode	20%

---

10. Pengembangan Lanjutan (Bonus)

Mahasiswa dapat menambahkan fitur:

• gambar menu

• animasi

• database SQLite

• Firebase database

• QR code payment

• rekomendasi menu

---

11. Output Mini Project

Mahasiswa harus mengumpulkan:

1. Source code Android Studio

2. APK aplikasi

3. Screenshot aplikasi

4. Dokumentasi singkat

---

Android - Materi 1

 

https://developer.android.com/courses/android-basics-compose/course

https://www.youtube.com/watch?v=7WRY_J5RyuQ&list=PLsuNW-DXT40r8Fb5XGHXSsoLlS88elvi7

https://www.youtube.com/watch?v=xI_udOx4xAU

https://www.youtube.com/watch?v=_DCvi7Zds9I

https://www.youtube.com/watch?v=4M0hNugPJV8

https://www.youtube.com/watch?v=iYrgWO2oibY

https://info448.github.io/introduction.html

https://developer.android.com/about/versions

https://developer.android.com/courses/android-basics-compose/course

https://developer.android.com/courses

https://web.stanford.edu/class/cs194a/

https://www.geeksforgeeks.org/android/android-tutorial/

https://www.geeksforgeeks.org/android/android-jetpack-compose-tutorial/

https://www.geeksforgeeks.org/android/text-in-android-using-jetpack-compose/

https://www.geeksforgeeks.org/android/how-to-create-a-new-project-in-android-studio-canary-version-with-jetpack-compose/

https://kotlinlang.org/docs/home.html

https://repository.unikom.ac.id/50008/1/Pertemuan%202%20-%20Materi%20%5BMP%20-%202016%5D.pdf

Slide

https://uni.dcdev.ro/y2s2/pmd/slides/C1_C2_PMD.pdf

https://www.ctahr.hawaii.edu/courses/PEPS691/PPT/week9&10/w10_mobile_apps.pdf

https://developer.android.com/teach

https://instiki.ac.id/wp-content/uploads/2022/02/Modul-Mobile-Programming-Android.pdf

https://www.researchgate.net/profile/Hendro-Wijayanto/publication/348716129_Buku_Ajar_Pemrograman_Mobile_Berbasis_Android/links/600c5c2f45851553a0677045/Buku-Ajar-Pemrograman-Mobile-Berbasis-Android.pdf

Class

https://web.stanford.edu/class/cs193a/videos.shtml

https://web.stanford.edu/class/cs193a/

https://web.stanford.edu/class/cs193a/links.shtml

https://www.webstepbook.com/samples-2ed.shtml

https://web.stanford.edu/class/archive/cs/cs193a/cs193a.1154/lectures.shtml

Materi Web Programming https://www.webstepbook.com/supplements.shtml

https://www.cs.utexas.edu/~witchel/371M/index.html?utm_source=chatgpt.com

https://web.stanford.edu/class/cs194a/

WEB - Studi Kasus 1

 

https://drive.google.com/file/d/1_DHUJd7qktrt8L5G70rf7zAnguWiXlEX/view?usp=drive_link

https://drive.google.com/file/d/1BNWIjBTaQGff3KrCEJA6DFNLd_qcTMPp/view?usp=drive_link

https://drive.google.com/file/d/1BNWIjBTaQGff3KrCEJA6DFNLd_qcTMPp/view?usp=drive_link

KUMPULAN PROMPT STUDI KASUS HTML ONLY

---

🧩 STUDI KASUS 1

📌 Website Profil Sekolah Vokasi

🎯 Prompt untuk Mahasiswa

Buatlah sebuah website profil sekolah vokasi menggunakan HTML murni (tanpa CSS dan JavaScript).
Website harus terdiri dari minimal 3 halaman yang saling terhubung.

📋 Kebutuhan Halaman

1️⃣ index.html

• Header berisi:

  • Nama Sekolah

  • Logo (gunakan tag <img>)

• Navigation menu (Home, Jurusan, Kontak)

• Section:

  • Sambutan Kepala Sekolah

  • Visi & Misi (gunakan <ul> atau <ol>)

• Footer:

  • Copyright

2️⃣ jurusan.html

• Daftar jurusan menggunakan:

  • <h2>

  • <p>

  • <ul>

• Buat tabel jumlah siswa tiap jurusan menggunakan <table>

3️⃣ kontak.html

• Form kontak menggunakan:

  • <form>

  • <input type="text">

  • <input type="email">

  • <textarea>

  • <button>

---

🎓 Tujuan Pembelajaran

Mahasiswa mampu menggunakan:

• Struktur HTML5

• Semantic layout (header, nav, section, footer)

• Table

• Form

• Hyperlink antar halaman

---

---

🧩 STUDI KASUS 2

📌 Website UMKM Makanan

(Sesuai dengan latar belakang Bapak sebagai owner UMKM ayam goreng 👌)

🎯 Prompt

Buat website sederhana untuk UMKM Ayam Goreng Nusantara menggunakan HTML saja.

📋 Struktur Halaman

index.html

• Nama brand

• Gambar produk

• Deskripsi usaha

• Menu makanan (gunakan <ol>)

menu.html

• Tabel daftar menu:

  • Nama

  • Harga

  • Keterangan

order.html

• Form pemesanan:

  • Nama

  • Alamat

  • Pilihan menu (gunakan <select>)

  • Jumlah

  • Metode pembayaran (radio button)

---

🎓 Evaluasi

Mahasiswa dinilai dari:

• Kerapian struktur HTML

• Penggunaan semantic tag

• Validasi struktur dokumen

• Navigasi antar halaman

---

---

🧩 STUDI KASUS 3

📌 Sistem Informasi Perpustakaan

🎯 Prompt

Buat sistem informasi perpustakaan sederhana berbasis HTML saja.

📋 Halaman yang Harus Ada

1. Beranda

2. Daftar Buku

3. Form Peminjaman

---

📘 Spesifikasi

Daftar Buku
Gunakan <table> dengan kolom:

• No

• Judul

• Pengarang

• Tahun

• Status

Form Peminjaman
Gunakan:

• Input text

• Date

• Dropdown

• Submit

---

---

🧩 STUDI KASUS 4

📌 Portal Berita Sederhana

(Sesuai dengan pengalaman Bapak mengajar web portal berita)

🎯 Prompt

Buat portal berita sederhana dengan HTML saja.

📋 Struktur Wajib

• Header (nama portal)

• Navigation (Kategori)

• Section berita utama

• Section berita terbaru

• Aside (berita populer)

• Footer

Gunakan:

• <article>

• <section>

• <aside>

• <time>

---

---

🧩 STUDI KASUS 5

📌 Dashboard Mahasiswa (HTML Static)

🎯 Prompt

Buat halaman dashboard mahasiswa tanpa CSS dan JavaScript.

📋 Isi Halaman

• Biodata mahasiswa

• Tabel KRS

• Tabel Nilai

• Link download KHS (dummy link)

• Form update profil

---

📊 Rubrik Penilaian (Untuk Dosen)

Aspek	Bobot
Struktur HTML benar	25%
Semantic Tag digunakan	20%
Navigasi antar halaman	15%
Form & Table valid	20%
Kerapian & konsistensi	20%

---

🚀 BONUS: Prompt Tingkat Lanjut

Buat website Company Profile Startup Digital dengan:

• Minimal 5 halaman

• Menggunakan semantic HTML lengkap

• Tabel pricing

• Form registrasi

• Embed video YouTube

• Embed Google Maps

FRONT END - Html Coding

 

https://www.youtube.com/watch?v=tVBuw-RkUU4&list=PLQW-B1cY2ZzN-AuoEoaDYa8ROgwVMbzVE

https://www.youtube.com/watch?v=WG5ikvJ2TKA

https://www.youtube.com/watch?v=XBu54nfzxAQ

Analisis Kebutuhan

      ↓

Buat Struktur Halaman

      ↓

Wireframe (Low → High)

      ↓

Setup Project

      ↓

HTML (Struktur)

      ↓

CSS (Tampilan)

      ↓

JavaScript (Interaksi)

      ↓

Testing

      ↓

Deploy

Link slide https://drive.google.com/file/d/1KX8js03Je4BThAiL3oEqnqdJrlay6Ohh/view?usp=drive_link

https://drive.google.com/file/d/1dNC928S57Ojwczl5PyxpNzQigZFjc7TL/view?usp=drive_link

LANGKAH-LANGKAH MEMBUAT FRONT-END

(Dari Konsep hingga Implementasi)

---

1️⃣ ANALISIS KEBUTUHAN (Requirement)

🎯 Tujuan

Menentukan apa yang akan dibangun dan untuk siapa.

Langkah:

1. Identifikasi pengguna (user persona)

2. Tentukan tujuan aplikasi

3. Tentukan fitur utama

4. Buat user flow sederhana

Contoh Studi Kasus

Aplikasi: Sistem Pemesanan Makanan UMKM

Fitur utama:

• Lihat daftar menu

• Tambah ke keranjang

• Checkout

• Konfirmasi pesanan

---

2️⃣ MENYUSUN STRUKTUR HALAMAN (Information Architecture)

🎯 Tujuan

Menentukan halaman apa saja yang dibutuhkan.

Contoh struktur:

• Home

• Menu

• Detail Produk

• Cart

• Checkout

---

3️⃣ MEMBUAT WIREFRAME

🎯 Tujuan

Membuat gambaran layout sebelum coding.

---

A. Low Fidelity Wireframe

4

Ciri-ciri:

• Hitam putih

• Kotak-kotak layout

• Belum ada warna

• Fokus struktur

Langkah membuat:

1. Tentukan header

2. Tentukan navigasi

3. Tentukan area konten

4. Tentukan footer

Bisa dibuat di:

• Kertas

• Whiteboard

• Figma

---

B. High Fidelity Wireframe (Mockup)

4

Ciri-ciri:

• Sudah ada warna

• Sudah ada font

• Sudah mirip tampilan final

Langkah:

1. Tentukan color palette

2. Tentukan typography

3. Gunakan grid system

4. Pastikan konsisten

---

4️⃣ SETUP PROJECT FRONT-END

🎯 Tujuan

Menyiapkan struktur kerja yang rapi.

Struktur Folder

project/
│
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── assets/
    └── images/

Langkah:

1. Buat folder project

2. Buat file HTML

3. Hubungkan CSS

4. Hubungkan JS

---

5️⃣ IMPLEMENTASI HTML (Membangun Struktur)

🎯 Tujuan

Menerjemahkan wireframe menjadi struktur HTML.

Gunakan Semantic HTML:

<header>
  <h1>UMKM Food</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">Menu</a>
  </nav>
</header>

<main>
  <section class="menu">
    <article class="card">
      <h3>Ayam Goreng</h3>
      <p>Rp 15.000</p>
      <button>Beli</button>
    </article>
  </section>
</main>

<footer>
  <p>&copy; 2026 UMKM</p>
</footer>

Prinsip:

• Gunakan tag sesuai fungsi

• Gunakan heading berurutan

• Tambahkan alt pada image

---

6️⃣ IMPLEMENTASI CSS (Styling & Layout)

🎯 Tujuan

Mengubah struktur HTML menjadi tampilan sesuai desain.

---

A. CSS Dasar

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

header {
  background: #2E7D32;
  color: white;
  padding: 1rem;
}

---

B. Gunakan Flexbox

.menu {
  display: flex;
  gap: 20px;
}

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  width: 200px;
}

---

C. Responsive Design

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

---

7️⃣ IMPLEMENTASI JAVASCRIPT (Interaktivitas)

🎯 Tujuan

Menambahkan behavior ke dalam aplikasi.

---

A. Tambah Event Click

const buttons = document.querySelectorAll("button");

buttons.forEach(button => {
  button.addEventListener("click", function() {
    alert("Produk ditambahkan ke cart!");
  });
});

---

B. Validasi Form

const form = document.querySelector("form");

form.addEventListener("submit", function(e) {
  e.preventDefault();
  alert("Pesanan berhasil!");
});

---

8️⃣ TESTING

Checklist:

✅ Semua tombol berfungsi
✅ Layout rapi di mobile
✅ Tidak ada error console
✅ Gambar tampil sempurna
✅ Link tidak rusak

Gunakan:

• Chrome DevTools

• Inspect Element

• Lighthouse

---

9️⃣ DEPLOY WEBSITE

Langkah:

1. Upload ke GitHub

2. Aktifkan GitHub Pages
   atau

3. Deploy ke Netlify / Vercel

https://codestudio80.blogspot.com/2026/02/langkah-membuat-front-end.html

https://codestudio80.blogspot.com/2026/02/langkah-membuat-frontend-1.html

C++ Review

 

https://www.youtube.com/watch?v=L8FELWEPYu8&list=PLnKe36F30Y4ZDNIOZ51sX25pWKQ1pkpTE

https://www.kennyyipcoding.com/

https://www.youtube.com/@KennyYipCoding/playlists

https://www.youtube.com/watch?v=R0dGmkVf0b0

https://www.geeksforgeeks.org/cpp/cpp-programming-examples/

• https://codestudio80.blogspot.com/2026/02/data-structure-in-c.html
• https://codestudio80.blogspot.com/2026/02/sylabus-struktur-data-using-cpp.html
• https://codestudio80.blogspot.com/2026/02/kuliah-struktur-data-1.html
• https://www.programiz.com/cpp-programming/online-compiler/
• https://cpp.sh/
• https://runestone.academy/ns/books/published/cppds/Introduction/ReviewofBasicCpp.html
• https://cplusplus.com/reference/
• https://cplusplus.com/doc/tutorial/program_structure/
• https://code.visualstudio.com/docs/cpp/config-mingw
• https://www.youtube.com/watch?v=DMWD7wfhgNY
• https://chatgpt.com/codex?app-landing-page=true
• https://www.geeksforgeeks.org/cpp/c-plus-plus/
• https://www.geeksforgeeks.org/cpp/features-of-cpp/
• https://www.geeksforgeeks.org/cpp/cpp-programming-intro/
• https://www.geeksforgeeks.org/cpp/cpp-programming-intro/
• https://www.geeksforgeeks.org/cpp/features-of-cpp/
• https://www.geeksforgeeks.org/cpp/cpp-programming-examples/

Materi Pemrograman Bergerak

 

https://www.youtube.com/watch?v=B8tKvlpCHh8&list=PLUTEb-RFH7TC2AUoBQh5JLmwmUmDmgnwq

https://www.youtube.com/watch?v=x1b554ikbFM&list=PLkOobWi4XsSPAKrYOBoWjGnXRsekshJKF&index=1

https://www.youtube.com/watch?v=6dSNbskzlz4&list=PL-CtdCApEFH_hja5vRJgQOXylCiQud7Qa

https://www.youtube.com/watch?v=XLt_moCoauw&t=508s

https://www.youtube.com/watch?v=nr2DnU5GCTs&list=PLdeKwQ1BTfKm1ROWXfSHfkNLANTOa5t6k

https://www.youtube.com/watch?v=JX3BSZffkrU

Mas Guru Digital Canva

 

https://www.youtube.com/watch?v=WfSPMZRIej8&list=PLzBNzCP26zLUTbt6_HMqLAxN7Juz0Cq6k

https://www.youtube.com/watch?v=kpCFXEZ4tQc&t=689s

https://www.youtube.com/watch?v=OA_lRktO31Q&t=82s