Saya seorang lecture web programming. Buatkan desain uI Ux news portal
Saya seorang lecture Web Programming. Buatkan outline materi kuliah untuk membuat aplikasi News Hub yang terhubung dengan database simple. Materi kuliah meliputi front end dan back end. Bahasa yang digunakan html, css, javascript, bootstrap, php, mysql.
Buatkan materi kuliah. Ubah dalam format Docx. Pertemuan 1 — Pengenalan Proyek dan Analisis UI/UX NewsHub Materi: Menganalisis header, navbar, hero section, kategori, kartu berita, sidebar, dan footer; mengidentifikasi alur pengunjung dan admin; menyiapkan struktur folder. Output: Wireframe dan struktur proyek.
Fokus: memahami desain aplikasi pada gambar referensi.
Analisis kebutuhan fungsional dan nonfungsional.
Pengenalan project Android Studio dan Kotlin.
Struktur Composable: Column, Row, Text, TextField, Button.
Pengaturan warna, tipografi, ikon, dan layout responsif.
Praktik: membuat halaman Welcome Back tanpa database.
Ubah dalam format Docx
Studi Kasus: Aplikasi Login Terhubung Database
Materi ini dirancang untuk perkuliahan Android Programming dengan pendekatan project-based learning. Mahasiswa akan membangun aplikasi login berdasarkan referensi desain yang diberikan, mulai dari pembuatan antarmuka, validasi input, pengelolaan akun pengguna, hingga autentikasi menggunakan database sederhana.
Target proyek
Membuat aplikasi Android dengan fitur:
Login menggunakan email dan password.
Registrasi akun pengguna.
Validasi input dan pesan kesalahan.
Penyimpanan data pengguna dalam database.
Verifikasi akun saat login.
Halaman utama setelah login berhasil.
Logout dan pengelolaan sesi pengguna.
1. Capaian Pembelajaran
Setelah menyelesaikan materi, mahasiswa diharapkan mampu:
Membuat antarmuka login menggunakan Jetpack Compose.
Mengelola input pengguna menggunakan state dan event handling.
Menerapkan validasi email dan password.
Memahami struktur tabel pengguna dan operasi CRUD dasar.
Menghubungkan aplikasi Android dengan database lokal atau backend.
Mengimplementasikan proses autentikasi dan navigasi setelah login.
Menerapkan prinsip dasar keamanan penyimpanan kredensial.
Buat aplikasi web pemesanan makanan online bernama FoodOrder yang memungkinkan pelanggan melihat katalog makanan, mencari menu, memilih makanan, mengelola keranjang, melakukan checkout, dan memantau status pesanan. Sediakan dashboard admin untuk mengelola menu, transaksi, dan laporan penjualan.
INPUT
Aplikasi menerima input berikut:
Data pelanggan: nama lengkap, nomor telepon, alamat pengiriman.
Data makanan: ID, nama, kategori, deskripsi, gambar, harga, dan status ketersediaan.
Data keranjang: produk, jumlah item, dan catatan khusus.
Data checkout: alamat, metode pembayaran, kode promo jika tersedia.
Data admin: perubahan menu, harga, ketersediaan, serta status pesanan.
OUTPUT
Aplikasi harus menghasilkan:
Katalog makanan dengan foto, nama, harga, dan kategori.
Ringkasan keranjang dan perhitungan total secara otomatis.
Konfirmasi checkout dan nomor pesanan unik.
Informasi status pesanan secara bertahap.
Riwayat pesanan pelanggan.
Dashboard admin yang menampilkan jumlah pesanan, total pendapatan, dan menu terlaris.
Pesan sukses, validasi, dan kesalahan yang informatif.
LAYOUT
Buat desain UI/UX modern, menarik, responsif, dan mudah digunakan pada desktop, tablet, serta smartphone.
Header: logo FoodOrder, pencarian menu, navigasi kategori, tombol login, dan ikon keranjang.
Hero section: banner promosi makanan dengan tombol “Pesan Sekarang”.
Menu section: grid kartu makanan dengan foto, nama, harga, deskripsi singkat, dan tombol “Tambah”.
Detail makanan: gambar besar, informasi menu, harga, pilihan jumlah, dan catatan khusus.
Cart page: daftar item, tombol tambah/kurangi jumlah, subtotal, ongkir, diskon, dan total.
Checkout page: formulir pelanggan, alamat, pilihan pembayaran, serta ringkasan pesanan.
Order tracking: nomor pesanan dan progres status.
Admin dashboard: sidebar, kartu statistik, tabel menu, tabel pesanan, dan laporan penjualan.
Gunakan warna oranye sebagai warna utama, putih sebagai latar, aksen hijau untuk status berhasil, tipografi yang jelas, ikon konsisten, sudut kartu yang lembut, dan foto makanan berkualitas tinggi.
FEATURES
Search menu berdasarkan nama makanan.
Filter menu berdasarkan kategori.
Tambah makanan ke keranjang.
Ubah jumlah item dan hapus item.
Hitung subtotal, diskon, ongkos kirim, dan total secara otomatis.
Validasi input dan checkout.
Pilihan pembayaran COD dan transfer bank sebagai opsi simulasi.
Pembuatan nomor pesanan unik.
Pelacakan status: Menunggu Konfirmasi, Diproses, Siap Diantar, Dalam Pengiriman, dan Selesai.
Riwayat pesanan pelanggan.
Autentikasi dan pembatasan akses pelanggan/admin.
CRUD menu makanan untuk admin.
Pengelolaan pesanan dan perubahan status oleh admin.
Dashboard ringkasan transaksi dan pendapatan.
Notifikasi ketika status pesanan berubah.
Desain responsif dan aksesibilitas dasar.
Penanganan loading, data kosong, validasi, dan error.
Persistensi data melalui database, bukan hanya data statis di antarmuka.
TECHNICAL REQUIREMENTS
Pisahkan komponen UI, logika bisnis, dan akses data.
Gunakan struktur kode yang modular dan mudah dipelihara.
Pastikan total pembayaran dihitung dan divalidasi di sisi server.
Terapkan validasi input dan otorisasi untuk seluruh operasi admin.
Jangan menyimpan kata sandi atau secret key secara langsung di kode.
Gunakan data contoh jika backend belum tersedia, dan jelaskan bagian yang masih berupa simulasi.
Sertakan petunjuk instalasi, konfigurasi, dan menjalankan aplikasi.
ACCEPTANCE CRITERIA
Aplikasi dinyatakan berhasil jika pelanggan dapat memilih menu, mengubah keranjang, melakukan checkout, menerima nomor pesanan, dan melihat status pesanan. Admin dapat menambah atau mengubah menu serta memproses pesanan. Semua halaman responsif, validasi berjalan, dan data tersimpan dengan benar.
