Kamis, 05 Maret 2026

HTML Crash Course

 


https://www.youtube.com/watch?v=UB1O30fR-EE&list=PLillGF-RfqbYeckUaD1z6nviTp31GLTH8


https://www.youtube.com/watch?v=yfoY53QXEnI&list=PLillGF-RfqbYeckUaD1z6nviTp31GLTH8&index=2


https://www.youtube.com/watch?v=hdI2bqOjy3c&list=PLillGF-RfqbYeckUaD1z6nviTp31GLTH8&index=3




di Tidak ada komentar:

Rabu, 04 Maret 2026

Android - Materi 2 Komponen Dasar UI

 


https://drive.google.com/file/d/1TKkBHXqgh0PHN_VA13Gvo-XuwXMyFuBq/view?usp=drive_link


Link



di Tidak ada komentar:

Praktikum Android

 


https://drive.google.com/file/d/1W8eFzuVr0reGA3IYQufv5t2OGCONwr6b/view?usp=drive_link
https://www.geeksforgeeks.org/android/android-jetpack-compose-tutorial/

Paket Praktikum Jetpack Compose

Mata Kuliah: Pemrograman Mobile Android

Platform

Android – Kotlin – Jetpack Compose

Durasi

16 Pertemuan (1 Semester)

Output Mahasiswa

Mahasiswa mampu membuat aplikasi Android modern menggunakan Jetpack Compose.

Struktur Pembelajaran

Fundamental Android
        ↓
UI Compose
        ↓
Layout & State
        ↓
Navigation
        ↓
List & Data
        ↓
API & Database
        ↓
Mini Project
        ↓
Final Project

Pertemuan 1

Pengenalan Mobile Development & Android

Materi

  • Evolusi Mobile App

  • Native vs Hybrid vs Cross Platform

  • Arsitektur Android

  • Komponen Android App

  • Pengenalan Kotlin

Praktikum

Install tools:

  • Android Studio

  • Emulator

  • SDK Android

Tugas

Mahasiswa membuat project Android pertama

Pertemuan 2

Struktur Project Android

Materi

  • Struktur folder Android

  • MainActivity

  • Activity lifecycle

  • Gradle

  • Manifest

Praktikum

Membuat project:

Hello Android App

Menampilkan:

Hello Mobile Programming

Pertemuan 3

Pengenalan Jetpack Compose

Materi

  • Apa itu Jetpack Compose

  • Declarative UI

  • Composable Function

  • Preview

Praktikum

Membuat UI:

Hello Compose
Nama Mahasiswa
NIM

Menggunakan:

  • Text

  • Column

Pertemuan 4

Layout Compose

Materi

Layout dasar:

  • Column

  • Row

  • Box

Praktikum

Membuat tampilan:

Menu Aplikasi

Home   Produk   Keranjang   Profil

Pertemuan 5

Modifier & Styling

Materi

Modifier:

  • padding

  • size

  • background

  • alignment

Praktikum

Membuat:

Card Profile Mahasiswa

Dengan:

  • Card

  • padding

  • alignment

Pertemuan 6

Input Form

Materi

Komponen input:

  • TextField

  • Button

  • State

Konsep:

remember
mutableStateOf

Praktikum

Membuat:

Form Login

Input:

  • username

  • password

Pertemuan 7

Navigation Compose

Materi

Navigasi antar halaman:

Login Screen
Dashboard Screen

Library:

Navigation Compose

Praktikum

Membuat:

Login → Dashboard

Pertemuan 8

List Data

Materi

List pada Compose:

  • LazyColumn

  • LazyRow

  • Item composable

Praktikum

Membuat aplikasi:

Daftar Mahasiswa

Pertemuan 9

Card & UI Components

Materi

UI Components:

  • Card

  • Image

  • Icon

  • Material Design

Praktikum

Membuat:

UI List Produk

Pertemuan 10

Scroll & Layout Advanced

Materi

  • VerticalScroll

  • Grid layout

  • LazyVerticalGrid

Praktikum

Membuat:

Gallery Produk

Pertemuan 11

State Management

Materi

Konsep state:

remember
mutableState
state hoisting

Praktikum

Membuat:

Aplikasi Counter

Pertemuan 12

Local Database (Room)

Materi

Database Android:

  • Room Database

  • Entity

  • DAO

Praktikum

Membuat aplikasi:

To Do List

CRUD:

  • Add

  • Edit

  • Delete

Pertemuan 13

API Integration

Materi

Mengambil data dari API:

  • Retrofit

  • JSON

  • Coroutine

Praktikum

Menampilkan data:

API Produk

Pertemuan 14

Mini Project

Project

Mahasiswa membuat aplikasi:

Aplikasi Kasir UMKM

Fitur:

  • login

  • list produk

  • keranjang

  • total harga

Pertemuan 15

Final Project Development

Mahasiswa membuat aplikasi Android bebas.

Contoh ide project:

Marketplace Produk

Login
List Produk
Detail Produk
Keranjang

Aplikasi To Do List

Tambah tugas
Edit tugas
Hapus tugas

Aplikasi Katalog UMKM

Produk
Detail
Kontak

Pertemuan 16

Presentasi Final Project

Mahasiswa mempresentasikan aplikasi.

Penilaian:

AspekBobot
UI Compose30%
Fitur30%
Kode20%
Presentasi20%

Contoh Final Project yang Direkomendasikan

1. Aplikasi Kasir UMKM

Fitur:

Login
Dashboard
List Produk
Keranjang
Total Harga

2. Aplikasi Marketplace Siswa SMK

Sangat cocok jika dikaitkan dengan program Pervekt (Program Entrepreneur Vokasi Kreatif Terpadu) yang Anda kembangkan.

Fitur:

Login
Produk Siswa
Detail Produk
Pesan Produk

3. Aplikasi Manajemen Tugas Mahasiswa

Tambah Tugas
Edit
Delete
Deadline

Tools yang Digunakan

ToolsFungsi
Android StudioIDE
KotlinBahasa
Jetpack ComposeUI
Navigation ComposeRouting
RoomDatabase
RetrofitAPI

Output Kompetensi Mahasiswa

Setelah 1 semester mahasiswa mampu:

✔ Membuat UI Android modern dengan Compose
✔ Membuat form input
✔ Membuat list data
✔ Menggunakan navigation
✔ Menggunakan database lokal
✔ Menggunakan API
✔ Membuat aplikasi Android lengkap

di Tidak ada komentar:

Selasa, 03 Maret 2026

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

AspekBobot
UI aplikasi20%
Navigasi halaman20%
Pengolahan data menu20%
Perhitungan total20%
Struktur kode20%

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

di Tidak ada komentar:

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/

di Tidak ada komentar:

Senin, 02 Maret 2026

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)

AspekBobot
Struktur HTML benar25%
Semantic Tag digunakan20%
Navigasi antar halaman15%
Form & Table valid20%
Kerapian & konsistensi20%

🚀 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

di Tidak ada komentar:

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

di Tidak ada komentar:
Langganan: Komentar (Atom)

HTML Crash Course

  https://www.youtube.com/watch?v=UB1O30fR-EE&list=PLillGF-RfqbYeckUaD1z6nviTp31GLTH8 https://www.youtube.com/watch?v=yfoY53QXEnI&li...

  • Coding Java - NoteApp
    Versi 1   Versi 2 Versi 3 Versi 4 Aplikasi ini versi GUI dengan Swing mempunyai  form input catatan...
  • Web Design Mastery - Booking Hotel
      https://www.youtube.com/watch?v=wUw8eLeJH0A&list=PLz_5rPRIvGECVDOGY8fMs3-8uZVlyJ-gr https://webdesignmastery.github.io/Royal_Hotel_31-...
  • Katong - Absensi Online
      https://www.youtube.com/watch?v=ronKK1MqcqE https://drive.google.com/file/d/1XG6bPRxZdLmujypKBONwBhlvhbLN0r1g/view https://drive.google.co...