Python Roadmap

 

RoadMap Developer

 

Websites for Designers

Infografik “Websites for Designers” merupakan panduan berisi kumpulan situs web yang dapat membantu desainer grafis, UI/UX designer, web designer, dan kreator digital dalam mengembangkan keterampilan serta menghasilkan desain yang lebih baik.

Pesan utama infografik ini adalah Design Better, Create More, Inspire Always — mendesain lebih baik, menciptakan lebih banyak karya, dan terus mendapatkan inspirasi.

Infografik membagi sumber daya desain ke dalam 9 kategori, mulai dari inspirasi visual, ikon, warna, tipografi, UI/UX, mockup, foto, pembelajaran, hingga alat bantu produktivitas.

Graphic Design & Inspiration

Tujuan: mencari inspirasi dan referensi desain.

• Behance — memamerkan portofolio karya kreatif.

• Dribbble — melihat karya desainer, terutama UI, ilustrasi, dan visual digital.

• Pinterest — mengumpulkan ide dan referensi visual.

• Awwwards — mempelajari desain website yang inovatif.

• Designspiration — menemukan dan menyimpan konsep desain.

Contoh penggunaan: mahasiswa mencari referensi desain landing page sebelum mulai membuat proyek website.

NET - Studi Kasus SISMA

 

PRD - Sisma

https://chatgpt.com/c/6acefc6b-5cbc-83ec-924e-df8d11bd7e98

Modul Rich UI WPF

Hands-on Labs SISMA

Web - Studi Kasus News Hub

 

https://chatgpt.com/c/6acdd78a-4754-83ec-9265-3899c6f1ffb5

Outline Materi News Hub

PRD-News Hub

Pertemuan 1 - Analisis News Hub

Pertemuan 2 - Struktur HTML

Pertemuan 3 - CSS Design System

Pertemuan 4 - Bootstrap Responsive Design

Pertemuan 5 - JavaScript

Pertemuan 6 - Front End Detil Berita

Pertemuan 7 - Database MySQL

Pertemuan 8 - Evaluasi Front End

Pertemuan 9 - PHP Server Side

Pertemuan 10 - PDO Rendering Data

Pertemuan 11 - Mencari Berita

Pertemuan 12 - CRUD Tambah Berita

Pertemuan 13 - Admin Update Berita

Pertemuan 14 - Autentifikasi

Pertemuan 15 - Pencetakan PDF

Pertemuan 16 - Deployment Web

Pertemuan 17 - Integrasi Pengujian

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.

Android - Studi Kasus: Aplikasi Login Terhubung Database

 

https://chatgpt.com/c/6acdb501-2400-83ec-ab21-3950bf30db6d

Outline Android Login

Pertemuan 1

Pertemuan 2

Pertemuan 3 - SQL Lite

Pertemuan 4 - Registrasi Pengguna

Pertemuan 5 - Autentifikasi MVVM

Pertemuan 6 - Navigation Session Management

Pertemuan 7 - Integrasi BackEnd

Pertemuan 8 - Pengujian Aplikasi

Saya seorang lecture Android Programming. Buatkan outline materi kuliah untuk membuat aplikasi Login yang terhubung dengan database simple.

Buatkan materi kuliah. Pertemuan 1 — Analisis Kebutuhan dan Desain UI Login

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:

1. Membuat antarmuka login menggunakan Jetpack Compose.

2. Mengelola input pengguna menggunakan state dan event handling.

3. Menerapkan validasi email dan password.

4. Memahami struktur tabel pengguna dan operasi CRUD dasar.

5. Menghubungkan aplikasi Android dengan database lokal atau backend.

6. Mengimplementasikan proses autentikasi dan navigasi setelah login.

7. Menerapkan prinsip dasar keamanan penyimpanan kredensial.

Ordering Food

https://chatgpt.com/c/6acc4e87-6d48-83ec-a15c-1b45fde625e1

https://sites.google.com/view/foodorder80/halaman-muka

 

https://www.youtube.com/watch?v=ff3j4olCUig&list=PLkDaE6sCZn6FcgHaPRSxhtcZDBHVoDMwi

PROMPT: FOOD ORDERING APPLICATION

GOAL

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:

1. Data pelanggan: nama lengkap, nomor telepon, alamat pengiriman.

2. Data makanan: ID, nama, kategori, deskripsi, gambar, harga, dan status ketersediaan.

3. Data keranjang: produk, jumlah item, dan catatan khusus.

4. Data checkout: alamat, metode pembayaran, kode promo jika tersedia.

5. Data admin: perubahan menu, harga, ketersediaan, serta status pesanan.

OUTPUT

Aplikasi harus menghasilkan:

1. Katalog makanan dengan foto, nama, harga, dan kategori.

2. Ringkasan keranjang dan perhitungan total secara otomatis.

3. Konfirmasi checkout dan nomor pesanan unik.

4. Informasi status pesanan secara bertahap.

5. Riwayat pesanan pelanggan.

6. Dashboard admin yang menampilkan jumlah pesanan, total pendapatan, dan menu terlaris.

7. 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

1. Search menu berdasarkan nama makanan.

2. Filter menu berdasarkan kategori.

3. Tambah makanan ke keranjang.

4. Ubah jumlah item dan hapus item.

5. Hitung subtotal, diskon, ongkos kirim, dan total secara otomatis.

6. Validasi input dan checkout.

7. Pilihan pembayaran COD dan transfer bank sebagai opsi simulasi.

8. Pembuatan nomor pesanan unik.

9. Pelacakan status: Menunggu Konfirmasi, Diproses, Siap Diantar, Dalam Pengiriman, dan Selesai.

10. Riwayat pesanan pelanggan.

11. Autentikasi dan pembatasan akses pelanggan/admin.

12. CRUD menu makanan untuk admin.

13. Pengelolaan pesanan dan perubahan status oleh admin.

14. Dashboard ringkasan transaksi dan pendapatan.

15. Notifikasi ketika status pesanan berubah.

16. Desain responsif dan aksesibilitas dasar.

17. Penanganan loading, data kosong, validasi, dan error.

18. 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.