SI-001SISTEM INFORMASI
Portal Informasi Akademik
Struktur informasi untuk pengumuman, kalender, dan tautan layanan kampus.
HTML · CSS · JSONLihat contoh →
✳ PORTOFOLIO AKADEMIK PEMROGRAMAN WEB
Merekam proses.
Membangun solusi.
Kumpulan latihan, rancangan, dan eksperimen pemrograman web yang disusun sebagai rekam belajar. Setiap teknologi memiliki ruang contoh dan hasil yang dapat ditinjau secara terpisah.
CATATAN AKADEMIK · SEMESTER 5 / CILACAP, INDONESIA
UNIVERSITAS NAHDLATUL ULAMA AL GHAZALI CILACAPTERUS BELAJAR · TERUS BERTUMBUH
01 — TENTANG PORTOFOLIO
Latihan yang tertata menjadi pengetahuan yang bisa dibagikan.
Saya Rizqi Ghani Adinata, mahasiswa Sistem Informasi di UNUGHA Cilacap.
Halaman ini mendokumentasikan perjalanan belajar Pemrograman Web. Rekam proyek berisi contoh kasus dan keluaran demonstrasi; laboratorium menampilkan materi terpisah untuk Laravel, JSON, CSS, Java, serta JavaScript.
Seluruh data contoh bersifat fiktif untuk pembelajaran, tanpa koneksi ke sistem akademik atau data pribadi mahasiswa.
02 — ARSIP PEMBELAJARAN
Rekam proyek pilihan
Katalog 15 contoh kasus demonstrasi, disaring berdasarkan tema.
15REKAM
DEMONSTRASI
DEMONSTRASI
UI-002ANTARMUKA
Perpustakaan Digital
Antarmuka katalog koleksi dengan hierarki navigasi dan ringkasan buku.
HTML · CSS · JAVASCRIPTLihat contoh →
API-003DATA & API
Direktori Data Terbuka
Skema data demonstrasi dengan validasi bidang, label, dan status.
JSON · LARAVELLihat contoh →
LOG-004LOGIKA PROGRAM
Pengelompokan Nilai
Latihan pengelompokan nilai berdasarkan rentang dan status kelulusan.
JAVALihat contoh →
UI-005ANTARMUKA
Dasbor Administrasi
Rancangan dashboard untuk melihat ringkasan aktivitas dan indikator utama.
CSS · JAVASCRIPTLihat contoh →
SI-006SISTEM INFORMASI
Inventaris Laboratorium
Model pencatatan aset dengan identitas barang, kategori, dan kondisi.
LARAVEL · JSONLihat contoh →
API-007DATA & API
Respons API Terstruktur
Contoh pemetaan respons JSON ke daftar antarmuka yang mudah ditelusuri.
JSON · JAVASCRIPTLihat contoh →
LOG-008LOGIKA PROGRAM
Validasi Formulir
Aturan untuk memeriksa masukan wajib dan menampilkan umpan balik.
JAVA · JAVASCRIPTLihat contoh →
UI-009ANTARMUKA
Profil Institusi
Layout editorial formal dengan fokus pada keterbacaan dan navigasi responsif.
SI-010SISTEM INFORMASI
Manajemen Peminjaman
Alur pencatatan pinjam-kembali sebagai studi pemodelan proses.
LARAVEL · JSONLihat contoh →
API-011DATA & API
Daftar Jadwal Kuliah
Data jadwal terstruktur dengan kode, mata kuliah, hari, dan waktu.
JSON · CSSLihat contoh →
LOG-012LOGIKA PROGRAM
Pencarian dan Pengurutan
Latihan mengurutkan katalog dan mencari berdasarkan kata kunci.
JAVA · JAVASCRIPTLihat contoh →
SI-013SISTEM INFORMASI
Direktori Organisasi Mahasiswa
Skema katalog organisasi, bidang kegiatan, serta kanal informasi.
LARAVEL · JSONLihat contoh →
UI-014ANTARMUKA
Portofolio Proyek Kelas
Galeri karya dengan label teknologi dan deskripsi ringkas.
CSS · JAVASCRIPTLihat contoh →
API-015DATA & API
Endpoint Rekam Proyek
Rancangan sumber data REST sederhana beserta transformasi antarmuka.
LARAVEL · JSON · JSLihat contoh →
03 — LABORATORIUM KODE
Contoh terpisah per teknologi
Pilih bahasa untuk membuka berkas sumber dan meninjau keluarannya.
MODUL 01 · PHP FRAMEWORK
Laravel — Katalog API Proyek
Contoh controller Laravel dengan validasi dan resource response.
ProjectController.php
Memuat contoh Laravel…HASIL YANG DIHARAPKANJSON RESPONSE · 200
Cuplikan sumber Laravel; eksekusi route/controller memerlukan PHP dan Laravel.
{ "data": [{ "id": 1, "judul": "Portal Informasi Akademik", "status": "selesai" }] }MODUL 02 · FORMAT DATA
JSON — Rekam Proyek
15 rekam demonstrasi dengan ID, kategori, ringkasan, dan tumpukan teknologi.
projects.json
Memuat contoh JSON…PRATINJAU DATA15 REKAM
Memuat data demonstrasi…
MODUL 03 · PRESENTASI
CSS — Sistem Antarmuka
Token visual dan kartu formal responsif untuk memisahkan struktur dan tampilan.
theme.css
Memuat contoh CSS…PRATINJAU KOMPONENRESPONSIF
SI-001
Portal Informasi Akademik
Ringkasan informasi untuk komunitas kampus.
SISTEM INFORMASIMODUL 04 · PEMROGRAMAN
Java — Katalog Bertipe
Kelas bertipe untuk merepresentasikan dan menyaring rekam proyek.
ProjectCatalog.java
Memuat contoh Java…CONTOH KELUARANSIMULASI
Katalog Proyek Pemrograman Web
Jumlah contoh: 3
Urutan: SI-001 → UI-002 → API-003
Untuk menjalankan contoh, kompilasi dengan Java Development Kit (JDK).
MODUL 05 · INTERAKSI WEB
JavaScript — Filter Langsung
Filter katalog contoh melalui kata kunci tanpa memuat ulang halaman.
filter.js
Memuat contoh JavaScript…COBA INTERAKSILIVE DEMO
Ketik kata kunci lalu tekan Cari.
Catatan runtime: Situs ini statis di Cloudflare Pages. Cuplikan Laravel/PHP dan Java dapat dibaca/diunduh; eksekusi membutuhkan runtime PHP/Laravel atau JDK terpisah.
04 — PENDEKATAN BELAJAR
Dari pemahaman menuju hasil.
Setiap rekam mengikuti urutan kerja yang sederhana dan dapat ditinjau kembali.
- 01
Memahami kebutuhan
Menetapkan konteks dan tujuan setiap contoh.
- 02
Menyusun solusi
Memilih struktur data, alur, dan teknologi yang sesuai.
- 03
Menguji keluaran
Meninjau interaksi dan memastikan hasil sesuai skenario.
- 04
Mendokumentasikan
Menyimpan catatan agar mudah dikembangkan.
DISKUSI & KOLABORASI
Belajar lebih baik bersama.
Terbuka untuk bertukar gagasan seputar sistem informasi dan pengembangan web.