Slide
Latihan
1. Tujuan Website
Menyediakan platform pembelajaran online interaktif untuk siswa/mahasiswa/pemula yang ingin mempelajari dasar-dasar Web Programming dengan materi terstruktur: HTML, CSS, PHP, dan JavaScript.
2. Target Pengguna
-
Siswa/mahasiswa jurusan IT atau non-IT yang ingin belajar membuat website.
-
Pemula yang ingin belajar dasar web programming dari nol.
-
Profesional yang ingin memperdalam keterampilan front-end & back-end.
3. Fitur Utama
🔹 Homepage
-
Banner kursus (hero section) dengan tagline motivatif.
-
Informasi singkat tentang course (durasi, level, sertifikat).
-
Daftar topik utama (HTML, CSS, PHP, JavaScript).
-
Tombol Call-to-Action: "Daftar Sekarang" / "Mulai Belajar".
🔹 Halaman Course
-
Daftar materi per bab:
-
HTML Dasar → struktur dokumen, heading, paragraf, link, image, tabel, form.
-
CSS → selector, box model, layout, positioning, flexbox, grid.
-
JavaScript → variabel, function, DOM, event, interaksi web.
-
PHP → syntax dasar, form handling, koneksi database MySQL, CRUD sederhana.
-
-
Konten pembelajaran berupa:
-
Video tutorial
-
Teks & catatan
-
Kode contoh (code snippet)
-
Latihan interaktif
-
🔹 Dashboard Pengguna
-
Progress bar belajar per modul.
-
Riwayat materi yang sudah dipelajari.
-
Sertifikat setelah menyelesaikan semua course.
🔹 Forum Diskusi
-
Tanya jawab antar siswa & instruktur.
-
Dukungan komentar dengan notifikasi.
🔹 Quiz & Evaluasi
-
Soal pilihan ganda & coding exercise per bab.
-
Ujian akhir berbasis proyek (misalnya membuat website sederhana).
🔹 Admin Panel
-
Manajemen pengguna (siswa/instruktur).
-
Upload materi course (video, teks, file).
-
Melihat progress & statistik pengguna.
4. Spesifikasi Teknis
-
Front-End:
-
HTML5, CSS3, JavaScript (ES6), Bootstrap/Tailwind CSS.
-
Responsif untuk mobile & desktop.
-
-
Back-End:
-
PHP 8.x
-
Framework opsional: Laravel/CodeIgniter.
-
REST API untuk integrasi data.
-
-
Database:
-
MySQL/MariaDB (untuk data user, progress, materi, quiz).
-
-
Hosting & Deployment:
-
Shared hosting / VPS.
-
Domain khusus e-learning.
-
-
Keamanan:
-
Autentikasi login (JWT/session).
-
Enkripsi password (bcrypt).
-
5. Desain UI/UX
-
Warna utama: biru & putih (profesional, bersih).
-
Layout: minimalis, fokus pada konten belajar.
-
Navigasi: menu atas → Home, Course, Dashboard, Forum, Login/Register.
6. Rencana Pengembangan
-
Versi 1.0: Materi HTML & CSS + latihan dasar.
-
Versi 2.0: Tambah JavaScript interaktif.
-
Versi 3.0: Tambah PHP & database.
-
Versi 4.0: Quiz online & sertifikat otomatis.
-
Versi 5.0: Fitur forum diskusi & marketplace mini project siswa.
Referensi
- https://fajarbaskoro.blogspot.com/2018/03/pweb-2-3-css.html
- https://fajarbaskoro.blogspot.com/2025/09/latihan-css-course-web-programming.html
- https://www.geeksforgeeks.org/css/top-10-projects-for-beginners-to-practice-html-and-css-skills/#1-a-tribute-page
- https://repository.unimal.ac.id/view/creators/Abdullah=3ADahlan=3A=3A.html#group_teaching=5Fresource
- https://repository.unimal.ac.id/294/1/pertemuan-4-css-cascading-style-sheet.pdf
- https://www.w3schools.com/css/default.asp
- https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
- https://sko.dev/position-css#apa-itu-position-pada-css
- https://codesandbox.io/p/sandbox/3gv3zd?file=%2Fstyle.css
- https://www.rumahweb.com/journal/css-adalah/
- https://www.rumahweb.com/journal/belajar-css-bagian-2/
- https://www.rumahweb.com/journal/belajar-html/
- https://www.geeksforgeeks.org/css/top-10-projects-for-beginners-to-practice-html-and-css-skills/
- https://blog.rumahweb.com/script-html-bucin/
- https://internetingishard.netlify.app/html-and-css/hello-css/
- https://htmlcheatsheet.com/css/
- https://www.codecademy.com/resources/cheatsheets/language/html-css
- https://ilovecoding.org/blog/htmlcss-cheatsheet
Monitoring
Form Monitoring Tugas
Absensi
