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:

1. Presentation Layer: HTML, CSS, JavaScript

2. Application Layer (Business Logic): PHP

3. Data Layer: MySQL

2. Modul Utama Sistem

A. Presentation Layer (Front End)

Menggunakan HTML + CSS + JS

Modul Front-End

1. Home Page

   • Daftar berita terbaru

   • Slider headline news

   • Highlight kategori

2. News Detail Page

   • Judul berita

   • Isi berita

   • Tanggal publikasi

   • Penulis

   • Gambar utama

3. Category Page

   • Daftar berita berdasarkan kategori

4. Search Page

   • Kolom pencarian

   • Hasil pencarian berita

5. Login Page

   • Form login untuk admin/editor

   • Validasi sisi klien (JavaScript)

3. Application Layer (Back-End / Business Logic)

Ditulis dalam PHP

Modul Back-End

1. Authentication Module

   • Login admin/editor

   • Validasi akun

   • Manajemen session

2. News Management Module

   • Tambah berita

   • Edit berita

   • Hapus berita

   • Upload featured image

   • Set kategori

3. Category Management Module

   • Tambah kategori

   • Edit kategori

   • Hapus kategori

4. User Management Module (opsional)

   • Tambah admin/editor

   • Edit user level

   • Reset password

5. Image Upload Module

   • Validasi ukuran file

   • Validasi ekstensi (jpg, png, webp)

   • Penyimpanan ke folder /uploads/

6. 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)
email	VARCHAR(150)
comment	TEXT
created_at	DATETIME

5. Alur Kerja Sistem (Workflow)

A. Admin Side

1. Admin login melalui /admin/login

2. Sistem memvalidasi username & password

3. Admin menuju dashboard:

   • Menambahkan berita baru

   • Mengatur kategori

   • Mengelola pengguna

4. Data dikirim ke Application Layer (PHP)

5. PHP memvalidasi dan menyimpan ke MySQL

6. Halaman front-end otomatis membaca data terbaru

B. User Side

1. User mengakses beranda

2. Front-end mengambil data berita (Query MySQL → PHP → HTML)

3. User memilih berita tertentu

4. System menampilkan detail berita

5. 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

https://medium.com/storyblocks-engineering/web-architecture-101-a3224e126947

Studi Kasus

Absensi

Video Kuliah

https://youtu.be/wsGOWWDSSqo

https://youtu.be/9ROwj7KmAIk

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:

Input data siswa baru
Menampilkan daftar siswa
Update data siswa
Hapus data siswa
Upload foto profil siswa

2. Studi Kasus News Portal

Monitoring

Form Monitoring Tugas

Hasil Monitoring

Referensi :

https://www.geeksforgeeks.org/blogs/how-web-works-web-application-architecture-for-beginners/

https://en.ryte.com/wiki/Web_Architecture/

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