Instruksi Proyek: Rancang Bangun Website Berbasis CMS (Content Management System)
Pilihlah salah satu dari 4 level tantangan (Newbie, Basic, Hard, atau WNI). Proyek ini wajib dipresentasikan langsung di hadapan pengajar/rekan kelas pada pekan Ujian Akhir Semester.
Pilihan Level Proyek: Newbie, Basic, Hard, WNI
Tentukan target level proyek Anda. Setiap level mencerminkan kedalaman pemahaman teknis, kompleksitas fitur, dan batas maksimal nilai yang dapat diperoleh saat presentasi akhir semester.
Tutorial Following (CI3 + Bootstrap)
Mengikuti seluruh alur pembuatan CMS berdasarkan video tutorial resmi langkah demi langkah.
Tonton dan ikuti tahapan pembangunan CMS dari channel YouTube referensi berikut mulai dari pembuatan database, setup CI3, controller, model, view, hingga session login admin.
Spesifikasi Output Minimal:
- Mengikuti seluruh tahapan coding pada video tanpa ada error fatal saat dijalankan di localhost.
- Sistem Autentikasi Admin (Login & Logout dengan session dan password hash/enkripsi).
- CRUD Artikel / Berita (Create, Read, Update, Delete) + Upload gambar thumbnail artikel.
- Halaman publik menampilkan daftar artikel dan halaman detail baca berita secara utuh.
CI3/CI4 + 5 Fitur Ekstra Wajib
Memperluas video tutorial dengan 5 fitur wajib tambahan + fitur kreatif pilihan bebas.
5 Fitur Tambahan Wajib:
Wajib Demo LiveWidget kategori, search bar artikel, arsip berita, atau banner info samping.
Manajemen album & multiple upload foto dokumentasi dengan modal preview / lightbox.
Daftar berita terbaru di halaman utama + penghitung viewer atau post populer.
Floating widget chat WA atau formulir kontak yang otomatis me-redirect ke pesan WA Admin.
Halaman visi misi, sejarah, struktur organisasi / susunan tim, kontak & peta lokasi (Google Maps Embed).
Fullstack Laravel + Tailwind CSS
Seluruh fitur Level Basic dibangun ulang menggunakan standar arsitektur modern industri Laravel & Tailwind CSS.
Standar Arsitektur Laravel:
- Seluruh 5 Fitur Basic Terpenuhi: Sidebar, Album Galeri, Recent Posts, Direct WA, Profil Website, dan CRUD Berita.
- Database Migrations & Seeders: Struktur tabel dibuat via migration, foreign key terdefinisi, dan seeder dummy data.
-
Eloquent Relationship: Relasi antar model diterapkan (misal:
Post belongsTo Category,Album hasMany Photos). -
Form Request & Storage Symlink: Validasi input terisolasi via Form Request dan manajemen asset gambar via
storage:link. - Blade Component & Tailwind UI: Memanfaatkan layouting Blade (@extends / x-layout) dengan styling utility-first Tailwind CSS yang responsif.
Laravel REST API + Bebas Frontend Client
Arsitektur Headless/Decoupled. Backend murni API Laravel, frontend terpisah mengonsumsi endpoint secara asynchronous.
Ketentuan Arsitektur Decoupled:
Routing di routes/api.php, format response standar JSON (success, message, data), API Resource Transformer, autentikasi Token (Sanctum/JWT), CORS diatur dengan benar.
Boleh menggunakan: Alpine.js SPA, Vue.js, React.js, Next.js, Nuxt.js, Svelte, atau bahkan Mobile App (Flutter) yang bertugas menampilkan data publik dan dashboard admin melalui pemanggilan fetch() atau axios ke API Laravel.
Tabel Matriks Komparasi 4 Level (Newbie, Basic, Hard, WNI)
Ikhtisar perbedaan teknologi, fitur, dan batas maksimal nilai saat sesi presentasi akhir semester.
| Aspek Penentu | Level Newbie | Level Basic | Level Hard | Level WNI |
|---|---|---|---|---|
| Framework Backend | CodeIgniter 3 | CodeIgniter 3 / 4 | Laravel 10 / 11 / 12 | Laravel RESTful API |
| CSS & Tampilan | Bootstrap (Tutorial) | Bootstrap kustom | Tailwind CSS | Bebas Konsumsi API |
| Acuan / Sumber | Video Tutorial YT | Tutorial + 5 Fitur Wajib | Dokumentasi Laravel & Blade | API Standard + Frontend Client |
| Fitur Ekstra Wajib | Sesuai video saja | Sidebar, Galeri, WA, Profil | Sidebar, Galeri, WA, Profil | Semua Fitur via REST API |
| Database & ORM | Query Builder / Manual SQL | Query Builder | Eloquent + Migrations | Eloquent + API Resource |
| Maksimal Nilai UAS | 75 (B-) | 85 (B+) | 93 (A) | 100 (A+) |
Aturan Penggunaan Template & Kebijakan Orisinalitas
Harap dibaca dengan cermat untuk menghindari diskualifikasi nilai saat presentasi di akhir semester karena kesamaan template dengan rekan sekelas maupun se-angkatan.
Wajib 2 Template Berbeda: Admin & Publik
Setiap peserta wajib mengintegrasikan 2 template yang berbeda peruntukannya dalam satu kesatuan sistem CMS:
Digunakan khusus setelah login admin untuk mengelola database, posting artikel, mengunggah foto, dan konfigurasi profil web (contoh: AdminLTE, SB Admin, Stisla, Tabler, Flowbite Dashboard).
Digunakan untuk pengunjung publik (landing page, hero header, profil, katalog/berita, galeri, formulir kontak). Keduanya tidak boleh saling tertukar atau memakai template yang sama!
Larangan Kesamaan Template Antar Teman
Untuk memastikan keaslian pengerjaan dan keberagaman portofolio karya saat presentasi:
Peserta tidak boleh memakai kombinasi template publik dan admin yang persis dengan siswa lain.
Jika tanpa sengaja salah satu template (misal template publik) sama dengan teman, maka template pasangannya (template admin) wajib berbeda total, begitu pula sebaliknya (maksimal hanya boleh ada salah satu yang bertipe sama dengan syarat kustomisasi warna identitas dan menu harus berbeda jelas).
Desain halaman admin harus berformat dashboard manajemen, tidak boleh sekadar meng-copy template halaman depan.
Tema Website Bebas & Contoh Nyata Berbasis CMS
Tema website dibebaskan kepada kreativitas siswa asalkan memenuhi kaidah sistem CMS. Anda dapat mengambil inspirasi dari contoh website resmi berikut.
Website Sekolah / Kampus
Profil sekolah, jurusan/program keahlian, berita kegiatan, pengumuman, data guru/staf, album foto, dan kontak PPDB.
Company Profile Perusahaan
Layanan jasa, portofolio proyek selesai, profil pimpinan & tim, visi-misi, testimoni klien, dan chat WhatsApp CS.
Katalog Produk & UMKM
Showcase produk kerajinan/kuliner/sparepart, kategori barang, spesifikasi harga, dan tombol pesan langsung via WA.
Portal Berita / Organisasi
Portal komunitas, yayasan amal, portal warta daerah, majalah online, atau tema bebas inovatif lainnya.
Contoh Website Nyata Berbasis CMS (Live Benchmark)
Dapat dikunjungi langsung untuk referensi struktursmkn1sukoharjo.sch.id
Contoh website CMS institusi sekolah menengah kejuruan. Memiliki struktur menu komprehensif mulai dari profil kelembagaan, program keahlian, berita agenda, galeri kegiatan siswa, hingga pengumuman kelulusan.
sman1tawangsari.sch.id
Contoh website CMS portal akademik SMA. Mengutamakan penyampaian informasi transparansi publik, sambutan kepala sekolah, berita prestasi siswa, ekstrakurikuler, dan sarana kontak sekolah.
binayaindieglobal.id
Contoh CMS Company Profile badan usaha profesional (PT Binaya Indie Global). Memiliki tata letak modern yang menonjolkan lini bisnis, portofolio proyek industri, tim manajemen, dan channel konsultasi resmi.
bincorannusantara.id
Contoh web berbasis CMS publikasi dan agregasi informasi (Bincoran Nusantara). Menampilkan format majalah warta dinamis, pembagian rubrik berita tematik, artikel populer, dan indeks informasi terkini.
Checklist Persiapan Menuju Presentasi Akhir Semester
Centang komponen yang telah Anda selesaikan untuk menguji kesiapan sebelum tampil presentasi live di depan kelas dan penguji.
1. Fungsionalitas Inti & Database (Semua Level)
2. Kepatuhan Aturan Template (Semua Level)
3. Fitur Tambahan (Wajib Level Basic, Hard, WNI)
4. Standar Modern Laravel (Wajib Level Hard & WNI)
5. Standar RESTful API & Frontend Decoupled (Khusus Level WNI)
Ketentuan Presentasi Langsung di Akhir Semester
Proyek CMS ini tidak hanya dikumpulkan berkasnya, melainkan wajib dipresentasikan dan diuji secara langsung di depan pengajar dan kelas pada jadwal Ujian Akhir Semester.
1. Waktu & Sesi Demo (7–10 Menit)
Setiap mahasiswa/kelompok mendapatkan giliran maju ke depan kelas untuk mendemonstrasikan website secara live. Alokasi waktu mencakup pemaparan fitur utama, demo panel admin, dan tanya jawab.
2. Uji Langsung & Live Debugging
Penguji/guru berhak mencoba langsung form input artikel baru, mengunggah file gambar thumbnail, menguji tombol chat WhatsApp, dan memeriksa query/relasi database untuk membuktikan pemahaman kode.
3. Verifikasi Orisinalitas Template
Penguji akan mencocokkan template publik dan admin Anda dengan daftar template rekan sekelas. Jika terbukti duplikat tanpa diferensiasi yang disetujui, nilai akan dipotong signifikan.
5 Hal yang Wajib Ditunjukkan Saat Presentasi:
Tampilkan landing page, berita terbaru, sidebar, galeri foto, profil web, dan kontak WhatsApp.
Login admin, tambah artikel baru secara live beserta upload gambar thumbnail, lalu cek perubahannya di publik.
Tunjukkan layout template admin dan template publik tidak sama dan tidak menjiplak rekan sekelas.
Buka editor kode (VS Code): tunjukkan Controller, Model, Routing, dan Database sesuai level (Newbie s/d WNI).
Jawab pertanyaan teknis penguji terkait alur data atau penanganan validasi formulir.