Studi Kasus Web - Aplikasi Perpustakaan

 

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

Deskripsi Sistem

Sebuah perpustakaan perguruan tinggi masih melakukan pendaftaran anggota secara manual menggunakan formulir kertas. Proses tersebut menimbulkan beberapa kendala, seperti antrean pendaftaran, kesalahan pencatatan data, kesulitan mencari informasi anggota, dan lambatnya pembuatan kartu anggota.

Untuk mengatasi masalah tersebut, perpustakaan membutuhkan aplikasi web bernama LibraryReg — Aplikasi Pendaftaran Anggota Perpustakaan. LibraryReg menyediakan landing page yang menampilkan informasi perpustakaan, menu navigasi yang terstruktur, formulir pendaftaran anggota secara online, dan halaman pengelolaan data anggota untuk petugas perpustakaan.

Pada tahap pembelajaran ini, mahasiswa berfokus pada front end. Data anggota dapat dikelola sementara menggunakan JavaScript dan localStorage, sehingga mahasiswa dapat mempraktikkan interaksi antarmuka tanpa harus langsung membangun backend atau database server.

Reverse Engineering Anything

 

https://www.youtube.com/watch?v=gjCBASA-1as

https://github.com/morluto/rea

https://aiengineeringfromscratch.com/learning-paths

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.