Kamis, 11 Juni 2026

Source Code

<!DOCTYPE html>

<head>

<title>CourseHub - Kursus Online</title>

</head>

<body>

<h1>CourseHub</h1>

<p>Belajar Kapan Saja dan Di Mana Saja</p>

</header>

<nav>

<a href="#home">Home</a> |

<a href="#about">About</a> |

<a href="#course">Course</a> |

<a href="#contact">Contact</a>

</nav>

<hr>

<h2>Belajar Skill Digital Masa Kini</h2>

<img

src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200"

width="100%"

alt="Online Learning">

<p>

Tingkatkan kemampuan Anda melalui berbagai kursus online

berkualitas yang dapat diakses kapan saja.

</p>

<button>Mulai Belajar</button>

</section>

<hr>

<h2>Tentang CourseHub</h2>

<img

src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800"

width="500"

alt="Mahasiswa Belajar">

<p>

CourseHub adalah platform pembelajaran online yang membantu

pelajar, mahasiswa, dan masyarakat umum memperoleh

keterampilan digital secara praktis.

</p>

<p>

Menjadi platform pembelajaran digital terbaik di Indonesia.

</p>

<ul>

<li>Menyediakan kursus berkualitas.</li>

<li>Mendukung pembelajaran fleksibel.</li>

<li>Meningkatkan kompetensi digital masyarakat.</li>

</ul>

</section>

<hr>

<h2>Daftar Kursus</h2>

<tr>

<th>Kursus</th>

<th>Durasi</th>

<th>Level</th>

</tr>

<tr>

<td>HTML Dasar</td>

<td>Beginner</td>

</tr>

<tr>

<td>CSS Dasar</td>

<td>Beginner</td>

</tr>

<tr>

<td>JavaScript Dasar</td>

<td>Intermediate</td>

</tr>

</table>

<br>

<h3>Kursus Populer</h3>

<img

src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=300"

width="300"

alt="HTML">

<img

src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=300"

width="300"

alt="CSS">

<img

src="https://images.unsplash.com/photo-1509062522246-3755977927d7?w=300"

width="300"

alt="JavaScript">

</section>

<hr>

<h2>Form Pendaftaran</h2>

<form>

<label>Nama Lengkap</label>

<br>

<label>Email</label>

<br>

<label>Nomor HP</label>

<br>

Daftar Sekarang

</button>

</form>

</section>

<hr>

<h2>Kontak</h2>

<p>Email : info@coursehub.com</p>

<p>Telepon : +62 812-3456-7890</p>

<p>Alamat : Surabaya, Jawa Timur</p>

</section>

<hr>

<p>

</p>

</footer>

</body>

</html>

Learn Web 1

https://drive.google.com/file/d/15ystus__HMZ7_VU7nJq_MIlkZ0SgWLA5/view?usp=drive_link

https://drive.google.com/file/d/1pKYlTxYJvHem7R6ybY3HuYuNc_34gV_y/view?usp=drive_link

Materi Studi Kasus Web Programming: Dari Beginner hingga Profesional

(Frontend + Backend + Deployment Hosting Public)

Materi ini cocok untuk mata kuliah Web Programming, Full Stack Development, atau Software Engineering Project. Mahasiswa akan membangun aplikasi secara bertahap mulai dari HTML sederhana hingga aplikasi yang dapat diakses publik melalui hosting.

Roadmap Pembelajaran


Level 1 : Basic Frontend
↓
Level 2 : Responsive Frontend
↓
Level 3 : Dynamic Frontend
↓
Level 4 : Basic Backend
↓
Level 5 : Database Integration
↓
Level 6 : Authentication & Security
↓
Level 7 : REST API
↓
Level 8 : Full Stack Project
↓
Level 9 : Testing & Optimization
↓
Level 10 : Deployment & Public Hosting

Studi Kasus Utama

Sistem Manajemen Kursus Online (CourseHub)

Fitur akhir:

Registrasi User
Login User
Dashboard
CRUD Kursus
Upload Thumbnail
Pendaftaran Kursus
REST API
Role Admin & Member
Report PDF
Deploy ke Hosting

LEVEL 1 — Beginner

HTML Fundamental

Studi Kasus

Membuat Landing Page Kursus Online

Tujuan

Mahasiswa memahami:

HTML Structure
Semantic HTML
Form
Table
Media

Tampilan


Home
About
Course
Contact

Komponen

Header


<header>
    <h1>CourseHub</h1>
</header>

Navigation


<nav>
    <a href="#">Home</a>
    <a href="#">Course</a>
</nav>

Form Pendaftaran


<form>
    <input type="text">
    <button>Daftar</button>
</form>

Output:

Landing page statis.

LEVEL 2 — Beginner+

CSS & Responsive Design

Studi Kasus

Mempercantik Landing Page

Materi

CSS Fundamental
Flexbox
Grid
Responsive Design
Media Query

Layout


-------------------
Header
-------------------
Hero Section
-------------------
Course Cards
-------------------
Footer
-------------------

Contoh:


.course-container{
 display:flex;
 gap:20px;
}

Media Query:


@media(max-width:768px){
 .course-container{
   flex-direction:column;
 }
}

Output:

Website responsif mobile.

LEVEL 3 — Frontend Intermediate

JavaScript

Studi Kasus

Membuat Katalog Kursus Interaktif

Fitur

Search Course

Filter Category

Dark Mode

Contoh:


function searchCourse(){
 let keyword =
 document.getElementById("search").value;

 console.log(keyword);
}

Materi:

DOM
Event
Array
Object
Fetch API

Output:

Frontend interaktif.

LEVEL 4 — Backend Beginner

PHP Fundamental

Studi Kasus

Sistem Registrasi User

Flow


Form Register
↓
PHP
↓
Database
↓
Success

Form:


<form action="register.php">

Backend:


$name=$_POST['name'];
$email=$_POST['email'];

Materi:

Variable
Function
Array
Session
Include

Output:

Data dapat diproses server.

LEVEL 5 — Database Integration

Studi Kasus

Menyimpan Data User

Database:


users

id	name	email

Koneksi:


$conn =
mysqli_connect(
"localhost",
"root",
"",
"coursehub"
);

Insert:


INSERT INTO users

Output:

Data tersimpan ke MySQL.

LEVEL 6 — CRUD Project

Studi Kasus

Manajemen Kursus

Admin

Tambah Kursus

Edit Kursus

Hapus Kursus

Lihat Kursus

Struktur


course_create.php
course_edit.php
course_delete.php
course_list.php

Contoh Query:


SELECT * FROM courses

Output:

CRUD berjalan penuh.

LEVEL 7 — Authentication

Studi Kasus

Database


users

Tambahan:


password
role

Password Hash


password_hash()

Verifikasi


password_verify()

Session


$_SESSION['user']

Output:

LEVEL 8 — Security

Studi Kasus

Mengamankan Aplikasi

Ancaman

SQL Injection

XSS

CSRF

Brute Force

Solusi

Prepared Statement


$stmt =
$conn->prepare(
"SELECT * FROM users
WHERE email=?"
);

Escape Output


htmlspecialchars()

Role Middleware


if(role!='admin')

Output:

Aplikasi lebih aman.

LEVEL 9 — Upload File

Studi Kasus

Upload Thumbnail Kursus

Flow


User
↓
Upload Image
↓
Server
↓
Folder Upload
↓
Database

PHP


move_uploaded_file()

Folder


uploads/

Output:

Gambar tersimpan.

LEVEL 10 — Dashboard Admin

Studi Kasus

Dashboard Monitoring

Statistik

Jumlah User

Jumlah Kursus

Jumlah Pendaftaran

Contoh Query


SELECT COUNT(*) FROM users

Tampilan


Card Statistic
Chart
Recent Activity

Output:

Dashboard profesional.

LEVEL 11 — REST API

Studi Kasus

Membuat API Kursus

Endpoint:


/api/courses

Response:


{
 "id":1,
 "title":"PHP"
}

PHP


header(
'Content-Type:
application/json'
);

Materi:

GET
POST
PUT
DELETE

Output:

Backend siap diakses Mobile App.

LEVEL 12 — Frontend Consume API

Studi Kasus

Menampilkan Data API

JavaScript


fetch('/api/courses')
.then(response=>response.json())
.then(data=>{
 console.log(data)
})

Output:

Frontend dan backend terhubung.

LEVEL 13 — Report PDF

Studi Kasus

Laporan Pendaftaran Kursus

Library:

FPDF
TCPDF
DomPDF

Contoh:


$pdf=new FPDF();
$pdf->AddPage();
$pdf->Output();

Output:

Laporan PDF.

LEVEL 14 — Email Notification

Studi Kasus

Konfirmasi Pendaftaran

Tools:

PHPMailer
SMTP

Flow:


Register
↓
Database
↓
Email Terkirim

Output:

Notifikasi otomatis.

LEVEL 15 — Full Stack Project

Studi Kasus

CourseHub Final Project

Modul

User Management

Course Management

Enrollment

Payment Simulation

Report

Dashboard

API

Authentication

Database


users
courses
enrollments
payments

Output:

Aplikasi Full Stack.

LEVEL 16 — Git dan Version Control

Studi Kasus

Kolaborasi Tim

Git Workflow


Main
↓
Develop
↓
Feature Branch

Command


git init
git add .
git commit
git push

Output:

Project terkelola.

LEVEL 17 — Deployment

Studi Kasus

Hosting Public

Pilihan Hosting

Shared Hosting
VPS
Cloud Hosting

Persiapan


Domain
Hosting
Database
SSL

Upload:


File Manager
FTP
Git Deploy

Output:

Website online.

LEVEL 18 — Hosting VPS Profesional

Studi Kasus

Deploy ke Linux Server

Stack:

Ubuntu
Apache/Nginx
PHP
MySQL

Arsitektur:


Internet
↓
Domain
↓
Cloudflare
↓
Nginx
↓
PHP
↓
MySQL

Materi:

SSH
Linux Command
Firewall
SSL
Backup

Output:

Production Ready.

LEVEL 19 — CI/CD

Studi Kasus

Auto Deployment

Tools:

GitHub
GitHub Actions

Flow:


Developer
↓
Git Push
↓
GitHub
↓
Deploy
↓
Server

Output:

Deployment otomatis.

LEVEL 20 — Professional Software Architecture

Studi Kasus

Membangun Startup EdTech

Layer Architecture


Presentation Layer
↓
Business Layer
↓
Data Access Layer
↓
Database Layer

Folder Structure


app/
controllers/
models/
views/
config/
middleware/
api/
uploads/
public/

Teknologi

Frontend:

HTML
CSS
Bootstrap
JavaScript

Backend:

PHP
MySQL

DevOps:

Git
Docker
CI/CD

Hosting:

VPS
Cloud Server

Output:

Aplikasi siap digunakan ribuan pengguna.

Capstone Project Akhir Semester

Judul

CourseHub – Learning Management System

Fitur wajib:

✅ Register Login

✅ Role User/Admin

✅ CRUD Kursus

✅ Upload File

✅ Dashboard

✅ REST API

✅ Report PDF

✅ Email Notification

✅ Responsive Design

✅ Git Repository

✅ Hosting Public

✅ SSL HTTPS

Learning Outcome

Setelah menyelesaikan seluruh tahapan ini, mahasiswa mampu:

Mengembangkan frontend modern.
Membangun backend berbasis PHP dan MySQL.
Mendesain database relasional.
Mengimplementasikan autentikasi dan keamanan web.
Mengembangkan REST API.
Melakukan deployment ke hosting publik.
Mengelola proyek full-stack secara profesional menggunakan Git dan CI/CD.
Menghasilkan portofolio web application yang siap dipublikasikan dan digunakan oleh pengguna nyata.

Rabu, 10 Juni 2026

Dokumen Pendukung Software Engineering

https://drive.google.com/file/d/1NFG-muFlwC9DMvd5POlbdVFabANKbsQw/view?usp=drive_link

https://drive.google.com/file/d/1RhQu6yhUecODUakBgklea6qEyGqF2gVH/view?usp=drive_link

https://drive.google.com/file/d/15qD6A7hCbdwOcRKt2Vl8JEQ71RmU_FCE/view?usp=drive_link

https://drive.google.com/file/d/1uTpp_b0Txs2L8hJuv-RpRncK_dOdq-wN/view?usp=drive_link

https://drive.google.com/file/d/1w064zztP-2qHCs0E02HEgee9KYXL3O3F/view?usp=drive_link

https://drive.google.com/file/d/1eT2SVFpvllWBXBi-YD-8harEpmYIZy_B/view?usp=drive_link

Arsitektur Design dan Struktur File

Product Documentation

Technical Documentation

User Documentation

API Documentation

Operational Documentation

Project Documentation

Buatkan slide menyerupai PPT dengan ukuran 16:9. Pada pojok kiri ditulisi Slide 1. Tambahkan foto, gambar, ilustrasi, icon, tabel, atau grafik yang releva. Outline Slide 1 – Cover PRODUCT DOCUMENTATION Dokumentasi Produk yang Jelas, Produk yang Sukses Studi Kasus: ShopEasy E-Commerce Platform Ilustrasi: Laptop menampilkan dokumentasi produk Smartphone aplikasi ShopEasy Icon dokumen, user guide, dan knowledge base

Buatkan slide menyerupai PPT dengan ukuran 16:9. Pada pojok kiri ditulisi Slide 1. Tambahkan foto, gambar, ilustrasi, icon, tabel, atau grafik yang relevan. Outline Slide 2 – Apa Itu Product Documentation?

Definisi

Product Documentation adalah kumpulan dokumen yang menjelaskan:

Gambaran produk

Fitur-fitur produk

Cara penggunaan

Cara implementasi

Panduan teknis

Referensi pengguna

Tujuan

Membantu pengguna dan tim memahami produk secara menyeluruh.

Ilustrasi:

Product → Documentation → User → Success

Buatkan slide menyerupai PPT dengan ukuran 16:9. Pada pojok kiri ditulisi Slide 3. Tambahkan foto, gambar, ilustrasi, icon, tabel, atau grafik yang relevan.Outline Slide 3 – Mengapa Product Documentation Penting?

Manfaat

Untuk Pengguna

✓ Memahami fitur lebih cepat

✓ Mengurangi kesalahan penggunaan

✓ Meningkatkan kepuasan pengguna

Untuk Tim

✓ Mengurangi pertanyaan berulang

✓ Mempercepat onboarding

✓ Menjadi sumber pengetahuan utama

Icon:

User

Support

Team

Knowledge

Kamis, 11 Juni 2026

Learn Web - LEVEL 1

Aset

Output

Source Code

Learn Web 1

Materi Studi Kasus Web Programming: Dari Beginner hingga Profesional

(Frontend + Backend + Deployment Hosting Public)

Roadmap Pembelajaran

Studi Kasus Utama

Sistem Manajemen Kursus Online (CourseHub)

LEVEL 1 — Beginner

HTML Fundamental

Studi Kasus

Tujuan

Tampilan

Komponen

LEVEL 2 — Beginner+

CSS & Responsive Design

Studi Kasus

Materi

Layout

LEVEL 3 — Frontend Intermediate

JavaScript

Studi Kasus

Fitur

LEVEL 4 — Backend Beginner

PHP Fundamental

Studi Kasus

Flow

LEVEL 5 — Database Integration

Studi Kasus

LEVEL 6 — CRUD Project

Studi Kasus

Admin

Struktur

LEVEL 7 — Authentication

Studi Kasus

Database

LEVEL 8 — Security

Studi Kasus

Ancaman

Solusi

LEVEL 9 — Upload File

Studi Kasus

Flow

LEVEL 10 — Dashboard Admin

Studi Kasus

Statistik

LEVEL 11 — REST API

Studi Kasus

LEVEL 12 — Frontend Consume API

Studi Kasus

LEVEL 13 — Report PDF

Studi Kasus

LEVEL 14 — Email Notification

Studi Kasus

LEVEL 15 — Full Stack Project

Studi Kasus

Modul

Database

LEVEL 16 — Git dan Version Control

Studi Kasus

Git Workflow

LEVEL 17 — Deployment

Studi Kasus

Pilihan Hosting

Persiapan

LEVEL 18 — Hosting VPS Profesional

Studi Kasus

LEVEL 19 — CI/CD

Studi Kasus

LEVEL 20 — Professional Software Architecture

Studi Kasus

Layer Architecture

Folder Structure

Teknologi

Capstone Project Akhir Semester

Judul

Learning Outcome