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 :
Subscribe to:
Comments (Atom)