News Portal
Spesifikasi Aplikasi Web News Portal
1. Gambaran Umum Sistem
Aplikasi News Portal adalah sistem publikasi berita online yang memungkinkan:
A. Pengguna umum
-
Melihat daftar berita
-
Membaca detail berita
-
Melihat kategori
-
Melakukan pencarian
B. Admin
-
Login ke dashboard
-
Mengelola berita (CRUD)
-
Mengelola kategori
-
Mengelola pengguna/editor
-
Mengunggah gambar berita
Aplikasi menggunakan arsitektur 3 tier:
-
Presentation Layer: HTML, CSS, JavaScript
-
Application Layer (Business Logic): PHP
-
Data Layer: MySQL
2. Modul Utama Sistem
A. Presentation Layer (Front End)
Menggunakan HTML + CSS + JS
Modul Front-End
-
Home Page
-
Daftar berita terbaru
-
Slider headline news
-
Highlight kategori
-
-
News Detail Page
-
Judul berita
-
Isi berita
-
Tanggal publikasi
-
Penulis
-
Gambar utama
-
-
Category Page
-
Daftar berita berdasarkan kategori
-
-
Search Page
-
Kolom pencarian
-
Hasil pencarian berita
-
-
Login Page
-
Form login untuk admin/editor
-
Validasi sisi klien (JavaScript)
-
3. Application Layer (Back-End / Business Logic)
Ditulis dalam PHP
Modul Back-End
-
Authentication Module
-
Login admin/editor
-
Validasi akun
-
Manajemen session
-
-
News Management Module
-
Tambah berita
-
Edit berita
-
Hapus berita
-
Upload featured image
-
Set kategori
-
-
Category Management Module
-
Tambah kategori
-
Edit kategori
-
Hapus kategori
-
-
User Management Module (opsional)
-
Tambah admin/editor
-
Edit user level
-
Reset password
-
-
Image Upload Module
-
Validasi ukuran file
-
Validasi ekstensi (jpg, png, webp)
-
Penyimpanan ke folder
/uploads/
-
-
API Response Module (opsional)
-
Menghasilkan response JSON untuk AJAX
-
4. Data Layer (MySQL Database)
Struktur Tabel News Portal
1. Tabel users
Untuk admin atau editor.
| Field | Type | Description |
|---|---|---|
| id | INT (PK, AI) | ID user |
| username | VARCHAR(50) | Nama login |
| password | VARCHAR(255) | Password (bcrypt) |
| fullname | VARCHAR(100) | Nama lengkap |
| role | ENUM('admin','editor') | Hak akses |
| created_at | DATETIME | Timestamp |
2. Tabel categories
Kategori berita.
| Field | Type |
|---|---|
| id | INT (PK, AI) |
| name | VARCHAR(100) |
| slug | VARCHAR(120) |
| description | TEXT |
3. Tabel news
Tabel utama untuk berita.
| Field | Type | Description |
|---|---|---|
| id | INT (PK, AI) | |
| category_id | INT (FK) | Kategori berita |
| title | VARCHAR(200) | Judul berita |
| slug | VARCHAR(220) | URL slug |
| content | TEXT | Isi berita |
| image | VARCHAR(255) | Nama file gambar |
| author_id | INT (FK -> users.id) | Penulis |
| published_at | DATETIME | Waktu publish |
| status | ENUM('draft','published') | Status berita |
| created_at | DATETIME | Dibuat |
| updated_at | DATETIME | Diubah |
4. Tabel comments (opsional)
| Field | Type |
|---|---|
| id | INT (PK, AI) |
| news_id | INT (FK) |
| name | VARCHAR(100) |
| VARCHAR(150) | |
| comment | TEXT |
| created_at | DATETIME |
5. Alur Kerja Sistem (Workflow)
A. Admin Side
-
Admin login melalui
/admin/login -
Sistem memvalidasi username & password
-
Admin menuju dashboard:
-
Menambahkan berita baru
-
Mengatur kategori
-
Mengelola pengguna
-
-
Data dikirim ke Application Layer (PHP)
-
PHP memvalidasi dan menyimpan ke MySQL
-
Halaman front-end otomatis membaca data terbaru
B. User Side
-
User mengakses beranda
-
Front-end mengambil data berita (Query MySQL → PHP → HTML)
-
User memilih berita tertentu
-
System menampilkan detail berita
-
User dapat membaca tanpa login
6. Fitur Tambahan Opsional
-
Pagination berita
-
Sistem komentar
-
Notifikasi publish
-
Mode dark/light (CSS)
-
Panel analytics
-
API JSON untuk mobile app
Front End User
FRONT END Admin
Arsitektur Aplikasi Web
Arsitektur aplikasi web adalah struktur bagaimana komponen-komponen web saling terhubung untuk memberikan fungsi tertentu kepada pengguna. Tujuannya adalah memastikan aplikasi mudah dikembangkan, aman, cepat, dan dapat diperluas.
1.Presentation Layer (Front-End)
Bagian yang dilihat dan digunakan oleh user.
Teknologi:
-
HTML → struktur konten
-
CSS → tampilan
-
JavaScript → interaksi
-
Framework modern: React, Vue, Angular (opsional untuk perkuliahan)
Tanggung jawab:
-
Menampilkan UI
-
Mengirim request ke server
-
Menampilkan response dari server
Contoh alur:
User klik “Login” → browser mengirim data ke backend.
2. Application Layer (Back-End / Logic Layer)
Bagian yang menjalankan logika bisnis.
Teknologi:
-
PHP, Node.js, Python (Django/Flask), Java Spring, Go, dll.
-
Framework PHP: Laravel, CodeIgniter, Slim
Tanggung jawab:
-
Memproses request dari front-end
-
Validasi data
-
Autentikasi & otorisasi
-
Mengakses database
-
Mengembalikan response (HTML/JSON)
Contoh:
Validasi username & password → cek ke database → kembalikan status login.
3. Data Layer (Database Layer)
Tempat penyimpanan data permanen.
Teknologi:
-
MySQL, PostgreSQL, MariaDB
-
MongoDB (NoSQL)
-
Redis (cache)
Tanggung jawab:
-
Menyimpan dan mengambil data
-
Menjaga konsistensi & integritas data
Contoh:
Tabel users, produk, transaksi.
Bentuk Arsitektur Lainnya
1. Client–Server Architecture
Browser (client) berkomunikasi dengan server menggunakan HTTP.
2. MVC Architecture (Umum pada PHP/Laravel/CI)
Memisahkan aplikasi ke:
Model → data & logika database
View → tampilan
Controller → penghubung model–view
3. Microservices Architecture
Aplikasi dipecah menjadi layanan kecil:
Service User
Service Product
Service Order
Komunikasi menggunakan REST/Message Queue.
Contoh Arsitektur Web Modern
Studi Kasus
Absensi
Video Kuliah
Latihan
1. STUDI KASUS: Aplikasi Manajemen Data Siswa
Aplikasi Manajemen Data Siswa Berbasis Web (CRUD + Upload Foto)
Teknologi:
Front-End: HTML, CSS, JavaScript (Fetch API)
Back-End: PHP Native
Database: MySQL
Arsitektur: Three-Tier (Presentation – Logic – Data Layer)
Deskripsi Singkat
Aplikasi ini digunakan untuk mengelola data siswa, meliputi:
Front-End: HTML, CSS, JavaScript (Fetch API)
Back-End: PHP Native
Database: MySQL
Arsitektur: Three-Tier (Presentation – Logic – Data Layer)
Deskripsi Singkat
Aplikasi ini digunakan untuk mengelola data siswa, meliputi:
Input data siswa baru
Menampilkan daftar siswa
Update data siswa
Hapus data siswa
Upload foto profil siswa
Menampilkan daftar siswa
Update data siswa
Hapus data siswa
Upload foto profil siswa
Monitoring
Form Monitoring Tugas
Referensi :
Spesifikasi Manajemen Kursus
1. Nama Aplikasi
BIMBINGKU – Sistem Manajemen Kursus & Bimbingan Belajar
2. Deskripsi Singkat
BIMBINGKU adalah aplikasi web manajemen kursus dan bimbingan belajar yang memfasilitasi interaksi antara siswa, pengajar, dan admin cabang dalam satu platform terpadu. Aplikasi ini menyediakan sistem pendaftaran online, pengelolaan kelas, presensi, penilaian, materi belajar, serta verifikasi pembayaran secara terpusat.
3. Role dan Hak Akses (Authentication Role-Based)
| Role | Deskripsi | Hak Akses Utama |
|---|---|---|
| Admin Pusat | Pengelola utama sistem | Manajemen cabang, pengajar, laporan keuangan, monitoring global |
| Admin Cabang | Pengelola operasional di masing-masing cabang | Manajemen kelas, pendaftaran, verifikasi pembayaran |
| Pengajar | Guru/pengajar yang mengelola kelas dan materi | Melihat jadwal, mengisi presensi, memberi nilai, upload materi |
| Siswa | Peserta kursus | Melihat kelas, mengikuti presensi, mengunduh materi, melihat nilai |
| Keuangan (opsional) | Staff keuangan | Mengelola dan memverifikasi transaksi pembayaran siswa |
https://drive.google.com/file/d/15VD5hEu0A-t52PYHK71nQeMjwzAbQQ6W/view?usp=sharing
https://drive.google.com/file/d/1KYXLfwDICE-MkWs4sT9z1b7l8B9EYePA/view
Monster Mart
Deskripsi Umum
Sistem Vending Snack Machine adalah aplikasi yang mensimulasikan mesin penjual otomatis untuk makanan dan minuman. Pengguna dapat memilih jenis produk, melakukan pembayaran, dan menerima produk yang telah disiapkan oleh mesin.Sistem ini mengelola makanan dan minuman, memproses pembayaran, serta memberikan laporan transaksi dan status mesin.
Alur Sistem (Flow)
Alur kerja Vending Coffee Machine
- Mesin aktif → menampilkan menu pilihan produk.
- Pengguna memilih jenis produk
- Mesin menampilkan total harga.
- Pengguna melakukan pembayaran.
- Mesin memverifikasi pembayaran → jika cukup → mengeluarkan produk
- Transaksi disimpan ke log.
- Jika stok habis → admin diingatkan untuk refill.
Ketentuan
- Tentukan fitur yang ada pada mesin
- Gambarkan rancangan kelas dan rancangan obyek vending Snack Machine
- Buatkan output simulasi vending snack machine
- Implementasikan dalam bentuk aplikasi simulasi vending snack machine
- Buatlah Video Presentasi yang menjelaskan pekerjaanmu kemudian upload di Youtube
- Buat Dokumentasi pengerjaan di blog, kemudian isi google form Link Pengumpulan ETS
Detail Jawaban Link Looker
Vending Coffe Machine
Deskripsi Umum
Sistem Vending Coffee Machine adalah aplikasi yang mensimulasikan mesin penjual otomatis untuk minuman kopi. Pengguna dapat memilih jenis kopi, ukuran gelas, menambahkan gula atau susu, melakukan pembayaran, dan menerima kopi yang telah disiapkan oleh mesin.Sistem ini mengelola stok bahan (kopi, gula, susu, air), memproses pembayaran, serta memberikan laporan transaksi dan status mesin.
Alur Sistem (Flow)
Alur kerja Vending Coffee Machine
- Mesin aktif → menampilkan menu pilihan kopi.
- Pengguna memilih jenis dan ukuran kopi.
- Pengguna menambah gula/susu (opsional).
- Mesin menampilkan total harga.
- Pengguna melakukan pembayaran.
- Mesin memverifikasi pembayaran → jika cukup → membuat kopi.
- Kopi disajikan → sistem mengurangi stok.
- Transaksi disimpan ke log.
- Jika stok habis → admin diingatkan untuk refill.
Ketentuan
- Tentukan fitur yang ada pada mesin
- Gambarkan rancangan kelas dan rancangan obyek vending coffee mashin
- Buatkan output simulasi vending coffe machine
- Implementasikan dalam bentuk aplikasi simulasi vending coffe machine
- Buatlah Video Presentasi yang menjelaskan pekerjaanmu kemudian upload di Youtube
- Buat Dokumentasi pengerjaan di blog, kemudian isi google form Link Pengumpulan ETS
Detail Jawaban Link Looker
PWEB - Evaluasi Tengah Semester 1
Semua anak pasti suka bermain. Agar si kecil gembira, orang tua pun sering kali membelikan berbagai mainan. Sayangnya, beberapa mainan cukup menguras kantong. Sewa mainan anak Surabaya dapat menjadi solusi tepat masalah ini. Bermain adalah aktivitas paling menyenangkan bagi anak-anak. Namun, rupanya bermain tidak hanya membuat anak gembira. Pasalnya, bermain dengan berbagai mainan memberikan manfaat positif bagi perkembangan anak.
Ketentuan
1. Buatlah desain Landing page yang di dalamnya memuat
- 1. Header / Hero Section
- 2. Benefit Section
- 3. Social Proof / Testimoni
- 4. Detail Produk / Penjelasan Layanan
- 5. Offer / Promo (opsional)
- 6. Formulir / Lead Capture
- 7. FAQ (Frequently Asked Questions)
- 8. Footer
2. Implementasikan konsep yang telah dibuat ke dalam sebuah aplikasi web. Setiap menu atau fitur yang ada mengarah ke page baru. Jika menggunakan css buat dalam file yan berbeda.
3. Hostingkan aplikasi web yang dibangun dan daftarkan nama domainnya.
4. Buatlah Video Presentasi yang menjelaskan pekerjaanmu kemudian upload di Youtube
5. Buat Dokumentasi pengerjaan di blog, kemudian isi google form Link Pengumpulan ETS
Pengecekan Jawaban Link Looker Studio
Detail Jawaban Link Looker
Absensi
PWEB - Evaluasi Tengah Semester 2025
Buatlah halaman website landing page untuk mengelola jasa kendaraan Travel antar kota.
Website ini berkolaborasi dengan komunitas mobil travel / mobil daerah / mobil sewa untuk layanan pengantaran penumpang ataupun paket kirim barang. Websiter ini digunakan untuk melayani penumpang dan penitip barang mempermudah akses mendapatkan mobil travel secara cepat dan fleksibel.
Website ini berkolaborasi dengan komunitas mobil travel / mobil daerah / mobil sewa untuk layanan pengantaran penumpang ataupun paket kirim barang. Websiter ini digunakan untuk melayani penumpang dan penitip barang mempermudah akses mendapatkan mobil travel secara cepat dan fleksibel.
Ketentuan
1. Buatlah desain Landing page yang di dalamnya memuat
- 1. Header / Hero Section
- 2. Benefit Section
- 3. Social Proof / Testimoni
- 4. Detail Produk / Penjelasan Layanan
- 5. Offer / Promo (opsional)
- 6. Formulir / Lead Capture
- 7. FAQ (Frequently Asked Questions)
- 8. Footer
2. Implementasikan konsep yang telah dibuat ke dalam sebuah aplikasi web.
3. Hostingkan aplikasi web yang dibangun dan daftarkan nama domainnya.
4. Buatlah Video Presentasi yang menjelaskan pekerjaanmu kemudian upload di Youtube
5. Buat Dokumentasi pengerjaan di blog, kemudian isi google form Link Pengumpulan ETS
Pengecekan Jawaban Link Looker Studio
Detail Jawaban Link Looker
Absensi
Subscribe to:
Comments (Atom)