UNIVERSITAS KLABAT
FAKULTAS ILMU KOMPUTER
PROGRAM STUDI SISTEM INFORMASI

RPS-57201-SISW315
RENCANA PEMBELAJARAN SEMESTER
MATA KULIAH (MK) KODE Rumpun MK BOBOT (sks) SEMESTER Tanggal Penyusunan
Pengembangan Web Front-End/ Front-End Web Development SISW315 Application Development / Programming 3 0 5 05 Jan 2026
Pengesahan Dosen Pengembang RPS Koordinator RMK Ka PRODI

Regi Fernando Najoan
Regi Fernando Najoan
Jimmy Herawan Moedjahedy
Capaian Pembelajaran CPL-PRODI yang dibebankan pada MK
CPL08 Lulusan memiliki kemampuan untuk merancang aplikasi interaktif dan sistem informasi yang efisien, mempertimbangkan aspek fungsionalitas, keamanan, dan user experience.
CPL09 Lulusan mampu mengembangkan dan mengimplementasikan aplikasi atau sistem informasi yang telah dirancang dengan memanfaatkan teknologi dan metodologi terkini, memastikan kesesuaian dengan kebutuhan organisasi.
Capaian Pembelajaran Mata Kuliah (CPMK)
CPMK04 Mampu merancang dan mengembangkan sistem dan aplikasi inovatif
CPMK09 Mampu merancang aplikasi sistem informasi dengan user experience dan keamanan
CPMK23 Mampu merancang aplikasi interaktif dan sistem informasi
Kemampuan akhir tiap tahapan belajar (Sub-CPMK)
sub.cpmk.SISW315.CPMK04.1 Memahami sejarah JavaScript, framework JS, dan cara menjalankan JS di browser/NodeJS
sub.cpmk.SISW315.CPMK04.2 Menggunakan syntax dasar JavaScript untuk menyelesaikan masalah
sub.cpmk.SISW315.CPMK04.3 Menggunakan fitur ES6 (let, const, arrow function, destructuring)
sub.cpmk.SISW315.CPMK04.4 Menggunakan konsep asynchronous JS dan class
sub.cpmk.SISW315.CPMK04.5 Studi kasus pengembangan aplikasi web lengkap
sub.cpmk.SISW315.CPMK04.6 Presentasi dan demo aplikasi web real-time
sub.cpmk.SISW315.CPMK09.1 Integrasi React dengan Bootstrap dan routing
sub.cpmk.SISW315.CPMK09.2 Integrasi aplikasi dengan REST API menggunakan Axios
sub.cpmk.SISW315.CPMK09.3 Mengelola state aplikasi menggunakan Redux
sub.cpmk.SISW315.CPMK09.4 Integrasi aplikasi dengan Firebase
sub.cpmk.SISW315.CPMK09.5 Implementasi authentication dan realtime database
sub.cpmk.SISW315.CPMK09.6 Implementasi CRUD menggunakan Firebase
sub.cpmk.SISW315.CPMK23.1 Mengoperasikan Git melalui terminal untuk version control
sub.cpmk.SISW315.CPMK23.2 Menggunakan GitHub repository dan konsep branching serta pull request
sub.cpmk.SISW315.CPMK23.3 Memahami konsep ReactJS (component, props, state)
sub.cpmk.SISW315.CPMK23.4 Demonstrasi proyek React dasar dengan Git
Korelasi CPMK terhadap Sub-CPMK
CPMK04 sub.cpmk.SISW315.CPMK04.1
sub.cpmk.SISW315.CPMK04.2
sub.cpmk.SISW315.CPMK04.3
sub.cpmk.SISW315.CPMK04.4
sub.cpmk.SISW315.CPMK04.5
sub.cpmk.SISW315.CPMK04.6
CPMK23 sub.cpmk.SISW315.CPMK23.1
sub.cpmk.SISW315.CPMK23.2
sub.cpmk.SISW315.CPMK23.3
sub.cpmk.SISW315.CPMK23.4
CPMK09 sub.cpmk.SISW315.CPMK09.1
sub.cpmk.SISW315.CPMK09.2
sub.cpmk.SISW315.CPMK09.3
sub.cpmk.SISW315.CPMK09.4
sub.cpmk.SISW315.CPMK09.5
sub.cpmk.SISW315.CPMK09.6
Deskripsi Singkat MK Mata kuliah Front-end Web Development merupakan mata kuliah dengan materi pembuatan aplikasi web yang real-time, dinamis dan memiliki tampilan yang responsive. Bahasa pemograman yang digunakan adalah JavaScript dengan framework ReactJS. Dalam mata kuliah ini mahasiswa juga akan belajar bagaimana bekerja sama dalam membuat aplikasi web secara tim dengan menggunakan tools git dan github. Hasil akhir yang harus dicapai mahasiswa adalah kemampuan membuat aplikasi web yang terintegrasi dengan Firebase dengan memiliki fitur CRUD (create, read, update dan delete)
Bahan Kajian : Materi Pembelajaran Marijn Haverbeke, Eloquent JavaScript, A Modern Introduction to Programming, 3rd Ed, 2018 Official git documentation. [Online]. Available: https://git-scm.com/doc Offical ReactJS documentation. [Online]. Available: https://reactjs.org/docs/getting-started.html Offical Firebase documentation. [Online]. Available: https://firebase.google.com/docs/guides?hl=id
Pustaka Utama
  • 1. Marijn Haverbeke, Eloquent JavaScript, A Modern Introduction to Programming, 3rd Ed, 2018
  • 6. Official git documentation. [Online]. Available: https://git-scm.com/doc
  • 7. Offical ReactJS documentation. [Online]. Available: https://reactjs.org/docs/getting-started.html
  • 8. Offical Firebase documentation. [Online]. Available: https://firebase.google.com/docs/guides?hl=id
Pendukung
  • 2. React Router official documentation. [Online]. Available: https://reactrouter.com/en/main
  • 3. Axios official documentation. [Online]. Available: https://axios-http.com/docs/intro
  • 4. Redux official documentation. [Online]. Available: https://redux.js.org/introduction/getting-started
  • 5. Bootstrap official documentation. [Online]. Available: https://getbootstrap.com/docs/5.3/getting-started/introduction/
Dosen Pengampu Adam, Stenly, Najoan, Regi
Mata Kuliah Syarat Web Development (HyperText Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript)
Pertemuan Ke Kemampuan akhir tiap tahapan belajar (Sub-CPMK) Penilaian Bentuk Pembelajaran; Metode Pembelajaran; Penugasan Mahasiswa; Materi Pembelajaran Bobot Penilaian
Indikator Kriteria & Teknik Luring Daring
1 sub.cpmk.SISW315.CPMK04.1-Memahami sejarah JavaScript, framework JS, dan cara menjalankan JS di browser/NodeJS Mahasiswa mampu menjelaskan perkembangan JavaScript Kriteria

Teknik
 kehadiran,Ceramah,[CR=180 Menit]
 Topik
Pengenalan JavaScript
Sub Topik

 0
2 sub.cpmk.SISW315.CPMK04.2-Menggunakan syntax dasar JavaScript untuk menyelesaikan masalah Mahasiswa mampu membuat program JS sederhana Kriteria

Teknik
 Topik
Basic JavaScript
Sub Topik
Variables, Operators
 0
3 sub.cpmk.SISW315.CPMK04.1-Memahami sejarah JavaScript, framework JS, dan cara menjalankan JS di browser/NodeJS sub.cpmk.SISW315.CPMK04.2-Menggunakan syntax dasar JavaScript untuk menyelesaikan masalah sub.cpmk.SISW315.CPMK04.3-Menggunakan fitur ES6 (let, const, arrow function, destructuring) Mahasiswa mampu menyelesaikan soal program sederhana Kriteria
Ketepatan metode atau prosedur penyelesaian
Teknik
Penugasan 		Topik
Struktur Program JS
Sub Topik
Program JS Conditional, Loop
 10
4 sub.cpmk.SISW315.CPMK04.3-Menggunakan fitur ES6 (let, const, arrow function, destructuring) sub.cpmk.SISW315.CPMK04.4-Menggunakan konsep asynchronous JS dan class Mahasiswa mampu memanipulasi data menggunakan array dan object Kriteria
Ketepatan perhitungan atau algoritma
Teknik
Praktik coding 		Topik
Struktur Data JS
Sub Topik
Array, Object
 5
5 sub.cpmk.SISW315.CPMK04.3-Menggunakan fitur ES6 (let, const, arrow function, destructuring) sub.cpmk.SISW315.CPMK04.4-Menggunakan konsep asynchronous JS dan class sub.cpmk.SISW315.CPMK04.5-Studi kasus pengembangan aplikasi web lengkap Mahasiswa mampu menggunakan fitur ES6 Kriteria
Kesesuaian sintaks atau implementasi teknis
Teknik
Praktik coding 		Topik
JavaScript ES6
Sub Topik
Arrow Function, Let/Const
 5
6 sub.cpmk.SISW315.CPMK04.6-Presentasi dan demo aplikasi web real-time Mahasiswa mampu membuat program async Kriteria
Kemampuan pemecahan masalah
Teknik
Penugasan 		Topik
Asynchronous JS
Sub Topik
Promise, Async/Await
 5
7 sub.cpmk.SISW315.CPMK23.1-Mengoperasikan Git melalui terminal untuk version control Mahasiswa mampu menggunakan perintah Git Kriteria

Teknik
 Topik
Version Control
Sub Topik
Git Command
 0
8 sub.cpmk.SISW315.CPMK23.1-Mengoperasikan Git melalui terminal untuk version control sub.cpmk.SISW315.CPMK23.2-Menggunakan GitHub repository dan konsep branching serta pull request Mahasiswa mampu membuat repository dan bekerja dalam tim Kriteria
Kesesuaian sintaks atau implementasi teknis
Teknik
Project 		Topik
GitHub Collaboration
Sub Topik
Branch, Pull Request
 10
9 sub.cpmk.SISW315.CPMK23.3-Memahami konsep ReactJS (component, props, state) sub.cpmk.SISW315.CPMK23.4-Demonstrasi proyek React dasar dengan Git Mahasiswa mampu membuat aplikasi web sederhana berbasis React Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
Project & Presentasi 		Topik
React Project
Sub Topik
Component & UI dasar
 25
10 sub.cpmk.SISW315.CPMK23.3-Memahami konsep ReactJS (component, props, state) Mahasiswa mampu mengelola state aplikasi Kriteria

Teknik
 Topik
React Component
Sub Topik
Props, State
 0
11 sub.cpmk.SISW315.CPMK09.1-Integrasi React dengan Bootstrap dan routing Mahasiswa mampu membuat tampilan web responsive Kriteria
Kesesuaian hasil dengan topik atau requirement
Teknik
Praktik coding 		Topik
UI Framework
Sub Topik
Bootstrap Integration
 0
12 sub.cpmk.SISW315.CPMK09.1-Integrasi React dengan Bootstrap dan routing sub.cpmk.SISW315.CPMK09.2-Integrasi aplikasi dengan REST API menggunakan Axios Mahasiswa mampu mengambil data dari API Kriteria

Teknik
 Topik
API Integration
Sub Topik
Axios, HTTP Request
 0
13 sub.cpmk.SISW315.CPMK09.3-Mengelola state aplikasi menggunakan Redux Mahasiswa mampu mengelola state aplikasi skala besar Kriteria
Kemampuan troubleshooting atau perbaikan mandiri
Teknik
Praktik coding 		Topik
Redux
Sub Topik
Store, Reducer
 0
14 sub.cpmk.SISW315.CPMK09.4-Integrasi aplikasi dengan Firebase Mahasiswa mampu membuat aplikasi CRUD Kriteria
Validasi dan pengujian hasil kerja
Teknik
Project 		Topik
Firebase
Sub Topik
Setup Firebase
 15
15 sub.cpmk.SISW315.CPMK09.5-Implementasi authentication dan realtime database sub.cpmk.SISW315.CPMK09.6-Implementasi CRUD menggunakan Firebase Proyek berfungsi, inovatif, sesuai tujuan Kriteria

Teknik
 Topik
Firebase CRUD
Sub Topik
Create, Read, Update, Delete
 0
16 sub.cpmk.SISW315.CPMK04.5-Studi kasus pengembangan aplikasi web lengkap sub.cpmk.SISW315.CPMK04.6-Presentasi dan demo aplikasi web real-time Mahasiswa mampu mempresentasikan dan mempertahankan aplikasi Kriteria
Ketepatan dan efektivitas dalam menyajikan dan mempertahankan hasil proyek visualisasi data
Teknik
Presentasi & Demo 		Topik
Final Project
Sub Topik
Demo aplikasi web
 25

Teknik Penilaian CPMK

CPL MK CPMK Kehadiran Latihan Tugas Praktek Project Mid Test (UTS) Final Test (UAS)
CPL03 Pengembangan Web Front-End/ Front-End Web Development CPMK04 Y Y Y
CPL08 Pengembangan Web Front-End/ Front-End Web Development CPMK09 Y
CPL08 Pengembangan Web Front-End/ Front-End Web Development CPMK23 Y Y

Prosedur Penilaian CPMK

1. Komponen Penilaian CPMK
CPL CPMK Sub-CPMK Detail Penugasan (Teknik Penilaian) Bobot % Kriteria Penilaian
CPL03 CPMK04 sub.cpmk.SISW315.CPMK04.1 0
CPL03 CPMK04 sub.cpmk.SISW315.CPMK04.2 0
CPL03 CPMK04 sub.cpmk.SISW315.CPMK04.1, sub.cpmk.SISW315.CPMK04.2, sub.cpmk.SISW315.CPMK04.3 Penugasan 10 Ketepatan metode atau prosedur penyelesaian
CPL03 CPMK04 sub.cpmk.SISW315.CPMK04.3, sub.cpmk.SISW315.CPMK04.4 Praktik coding 5 Ketepatan perhitungan atau algoritma
CPL03 CPMK04 sub.cpmk.SISW315.CPMK04.3, sub.cpmk.SISW315.CPMK04.4, sub.cpmk.SISW315.CPMK04.5 Praktik coding 5 Kesesuaian sintaks atau implementasi teknis
CPL03 CPMK04 sub.cpmk.SISW315.CPMK04.6 Penugasan 5 Kemampuan pemecahan masalah
CPL08 CPMK23 sub.cpmk.SISW315.CPMK23.1 0
CPL08 CPMK23 sub.cpmk.SISW315.CPMK23.1, sub.cpmk.SISW315.CPMK23.2 Project 10 Kesesuaian sintaks atau implementasi teknis
CPL08 CPMK23 sub.cpmk.SISW315.CPMK23.3, sub.cpmk.SISW315.CPMK23.4 Project & Presentasi 25 Kesesuaian output dengan spesifikasi yang diminta
CPL08 CPMK23 sub.cpmk.SISW315.CPMK23.3 0
CPL08 CPMK09 sub.cpmk.SISW315.CPMK09.1 Praktik coding 0 Kesesuaian hasil dengan topik atau requirement
CPL08 CPMK09 sub.cpmk.SISW315.CPMK09.1, sub.cpmk.SISW315.CPMK09.2 0
CPL08 CPMK09 sub.cpmk.SISW315.CPMK09.3 Praktik coding 0 Kemampuan troubleshooting atau perbaikan mandiri
CPL08 CPMK09 sub.cpmk.SISW315.CPMK09.4 Project 15 Validasi dan pengujian hasil kerja
CPL08 CPMK09 sub.cpmk.SISW315.CPMK09.5, sub.cpmk.SISW315.CPMK09.6 0
CPL03 CPMK04 sub.cpmk.SISW315.CPMK04.5, sub.cpmk.SISW315.CPMK04.6 Presentasi & Demo 25 Ketepatan dan efektivitas dalam menyajikan dan mempertahankan hasil proyek visualisasi data
Total 100
2. Penilaian CPMK
CPL MK CPMK Kehadiran Latihan Tugas Praktek Project Mid Test (UTS) Final Test (UAS) Total
CPL03 Pengembangan Web Front-End/ Front-End Web Development CPMK04 0% 5% 20% 0% 0% 0% 25% 50%
CPL08 Pengembangan Web Front-End/ Front-End Web Development CPMK09 0% 0% 0% 0% 15% 0% 0% 15%
CPL08 Pengembangan Web Front-End/ Front-End Web Development CPMK23 0% 0% 0% 0% 10% 25% 0% 35%
100%