UNIVERSITAS KLABAT
FAKULTAS ILMU KOMPUTER
PROGRAM STUDI INFORMATIKA

RPS-57202-IFMI351
RENCANA PEMBELAJARAN SEMESTER
MATA KULIAH (MK) KODE Rumpun MK BOBOT (sks) SEMESTER Tanggal Penyusunan
Pengembangan Web Front-End/Front-End Web Development IFMI351 Software Process T= 3 5 01 Jul 2024
Pengesahan Dosen Pengembang RPS Koordinator RMK Ka PRODI

Stenly Ibrahim Adam, S.Kom., M.Sc.
Taju, Semmy Wellem
Semmy Wellem Taju, S.Kom., M.S., PhD
Capaian Pembelajaran CPL-PRODI yang dibebankan pada MK
CPL07 Menguasai konsep teoritis bidang pengetahuan Ilmu Komputer/Informatika dalam mendesain dan mensimulasikan aplikasi teknologi multi-platform yang relevan dengan kebutuhan industri dan masyarakat.
CPL11 Kemampuan menganalisis, merancang, membuat dan mengevaluasi user interface dan aplikasi interaktif dengan mempertimbangkan kebutuhan pengguna dan perkembangan ilmu transdisiplin.
CPL12 Kemampuan mendesain, mengimplementasi dan mengevaluasi solusi berbasis computing multi-platform yang memenuhi kebutuhan-kebutuhan computing pada sebuah organisasi.
Capaian Pembelajaran Mata Kuliah (CPMK)
CPMK10 Mampu menerapkan konsep statistika, probabilitas, dan kalkulus dalam analisis data dan pengambilan keputusan.
CPMK14 Mampu merancang dan mengembangkan aplikasi web front-end dan back-end secara terintegrasi.
CPMK16 Mampu mengembangkan aplikasi berbasis platform spesifik (mobile, web, desktop, embedded) dengan arsitektur yang tepat.
CPMK22 Mampu mengimplementasikan solusi komputasi menggunakan bahasa pemrograman dan framework yang sesuai.
CPMK23 Mampu mengintegrasikan komponen sistem (database, jaringan, UI, logika bisnis) dalam satu solusi utuh.
CPMK24 Mampu mengoptimalkan performa sistem melalui tuning algoritma, database, dan infrastruktur.
CPMK28 Mampu merancang solusi TI terintegrasi untuk organisasi (web, mobile, cloud, IoT, keamanan).
Kemampuan akhir tiap tahapan belajar (Sub-CPMK)
sub.cpmk.IFMI351.CPMK10.1 Mahasiswa mampu memanfaatkan data dan state aplikasi sederhana untuk mendukung pengambilan keputusan pada antarmuka web interaktif.
sub.cpmk.IFMI351.CPMK14.1 Mahasiswa mampu merancang dan mengembangkan aplikasi web front-end menggunakan ReactJS yang terintegrasi dengan REST API dan layanan backend.
sub.cpmk.IFMI351.CPMK16.1 Mahasiswa mampu mengembangkan aplikasi web responsif berbasis ReactJS dengan struktur komponen dan routing yang sesuai.
sub.cpmk.IFMI351.CPMK22.1 Mahasiswa mampu mengimplementasikan antarmuka web interaktif menggunakan JavaScript ES5, ES6, dan framework ReactJS.
sub.cpmk.IFMI351.CPMK23.1 Mahasiswa mampu mengintegrasikan antarmuka pengguna dengan REST API dan layanan Firebase dalam aplikasi web modern.
sub.cpmk.IFMI351.CPMK24.1 Mahasiswa mampu mengelola state aplikasi dan struktur komponen React untuk meningkatkan efisiensi dan performa antarmuka web.
sub.cpmk.IFMI351.CPMK28.1 Mahasiswa mampu merancang dan mempresentasikan proyek aplikasi web terintegrasi berbasis ReactJS sesuai kebutuhan pengguna dan organisasi.
Korelasi CPMK terhadap Sub-CPMK
CPMK10 sub.cpmk.IFMI351.CPMK10.1
CPMK14 sub.cpmk.IFMI351.CPMK14.1
CPMK16 sub.cpmk.IFMI351.CPMK16.1
CPMK22 sub.cpmk.IFMI351.CPMK22.1
CPMK23 sub.cpmk.IFMI351.CPMK23.1
CPMK24 sub.cpmk.IFMI351.CPMK24.1
CPMK28 sub.cpmk.IFMI351.CPMK28.1
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) The Front-end Web Development course is a course with material on creating web applications that are real-time, dynamic and have a responsive appearance. The programming language used is JavaScript with the ReactJS framework. In this course students will also learn how to work together to create web applications as a team using git and github tools. The final result that students must achieve is the ability to create web applications that are integrated with Firebase and have CRUD (create, read, update and delete) features.
Bahan Kajian : Materi Pembelajaran JavaScript and React Introduction, Basic JavaScript ES5, Basic JavaScript ES6, Version Control, Basic ReactJS, Presentasi dan demo hasil Proyek 1, Routing and REST API Integration, State Manajemen, Firebase Integration, Presentasi dan demo hasil Proyek 2
Pustaka Utama
  • 1. Marijn Haverbeke, Eloquent JavaScript, A Modern Introduction to Programming, 3rd Ed, 2018
  • 2. Official git documentation. [Online]. Available: https://git-scm.com/doc
  • 3. Offical ReactJS documentation. [Online]. Available: https://reactjs.org/docs/getting-started.html
  • 4. Offical Firebase documentation. [Online]. Available: https://firebase.google.com/docs/guides?hl=id
Pendukung
  • 5. Bootstrap official documentation. [Online]. Available: https://getbootstrap.com/docs/5.3/getting-started/introduction/
  • 6. React Router official documentation. [Online]. Available: https://reactrouter.com/en/main
  • 7. Axios official documentation. [Online]. Available: https://axios-http.com/docs/intro
  • 8. Redux official documentation. [Online]. Available: https://redux.js.org/introduction/getting-started
Dosen Pengampu Adam, Stenly, Taju, Semmy Wellem
Mata Kuliah Syarat [IFAP274] Pemrograman Berorientasi Objek/ Object Oriented Programming - 3 credit(s)
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.IFMI351.CPMK22.1-Mahasiswa mampu mengimplementasikan antarmuka web interaktif menggunakan JavaScript ES5, ES6, dan framework ReactJS. Kriteria
Partisipasi aktif
Teknik
 kehadiran,Ceramah,[CR=180 Menit]
 Topik
Pengantar Pengembangan Web & JavaScript Dasar (ES5)
Sub Topik
Sintaks dasar ES5, variabel, tipe data, control flow (perkondisian dan perulangan), fungsi dasar, serta integrasi HTML/CSS dengan JavaScript
 6
2 sub.cpmk.IFMI351.CPMK22.1-Mahasiswa mampu mengimplementasikan antarmuka web interaktif menggunakan JavaScript ES5, ES6, dan framework ReactJS. Kriteria
Kesesuaian output dengan spesifikasi yang diminta
Teknik
 Latihan,Pembelajaran Mandiri,[PM=180 Menit]
 Topik
JavaScript Modern (ES6) untuk Web Interaktif
Sub Topik
Fitur ES6 (arrow functions, template literals, destructuring, let/const, rest/spread operator, dan array methods seperti
 6
3 sub.cpmk.IFMI351.CPMK14.1-Mahasiswa mampu merancang dan mengembangkan aplikasi web front-end menggunakan ReactJS yang terintegrasi dengan REST API dan layanan backend. Kriteria
Partisipasi aktif
Teknik
 kehadiran,Ceramah,[CR=179 Menit]
 Topik
Pengenalan Ekosistem ReactJS & Komponen Dasar
Sub Topik
Introduction to React, instalasi (Vite/CRA), konsep JSX, Function Components, dan penggunaan Props untuk mengirim data antar komponen.
 6
4 sub.cpmk.IFMI351.CPMK16.1-Mahasiswa mampu mengembangkan aplikasi web responsif berbasis ReactJS dengan struktur komponen dan routing yang sesuai. Kriteria
Partisipasi aktif
Teknik
 Latihan,Studi Kasus,[SK=180 Menit]
 Topik
Membangun Antarmuka Responsif Berbasis Komponen React
Sub Topik
Responsive design dalam React, integrasi CSS Framework (seperti Tailwind atau Bootstrap) ke dalam komponen React, dan praktik layouting adaptif
 6
5 sub.cpmk.IFMI351.CPMK10.1-Mahasiswa mampu memanfaatkan data dan state aplikasi sederhana untuk mendukung pengambilan keputusan pada antarmuka web interaktif. Kriteria
Partisipasi aktif
Teknik
 kehadiran,Ceramah,[CR=180 Menit]
 Topik
State Aplikasi Sederhana untuk Antarmuka Interaktif
Sub Topik
Pengenalan useState, event handling di React, serta logika kondisional pada antarmuka berdasarkan perubahan data/state pengguna.
 6
6 sub.cpmk.IFMI351.CPMK24.1-Mahasiswa mampu mengelola state aplikasi dan struktur komponen React untuk meningkatkan efisiensi dan performa antarmuka web. Kriteria
Partisipasi aktif
Teknik
 Partisipasi,Studi Kasus,[SK=180 Menit]
 Topik
Manajemen State Lanjutan dan Efisiensi Performa Komponen
Sub Topik
Lifting state up, penggunaan useContext untuk global state sederhana, serta pemahaman siklus hidup komponen menggunakan useEffect untuk optimasi performa rendering.
 6
7 sub.cpmk.IFMI351.CPMK10.1-Mahasiswa mampu memanfaatkan data dan state aplikasi sederhana untuk mendukung pengambilan keputusan pada antarmuka web interaktif. Kriteria
Partisipasi aktif
Teknik
 kehadiran,Ceramah,[CR=180 Menit]
 Topik
Manajemen State Kompleks (State Management)
Sub Topik
Pendalaman State Management (seperti Redux Toolkit atau Zustand) untuk mengelola data transaksional atau analitik pada aplikasi.
 6
8 sub.cpmk.IFMI351.CPMK28.1-Mahasiswa mampu merancang dan mempresentasikan proyek aplikasi web terintegrasi berbasis ReactJS sesuai kebutuhan pengguna dan organisasi. Kriteria
Ketepatan metode atau prosedur penyelesaian
Teknik
 UTS,Studi Kasus,[SK=180 Menit]
 Topik
Evaluasi Tengah Semester (UTS) / Review Proyek 1
Sub Topik
Presentasi, demo hasil Proyek 1, evaluasi struktur komponen, dan review implementasi state management.
 11
9 sub.cpmk.IFMI351.CPMK16.1-Mahasiswa mampu mengembangkan aplikasi web responsif berbasis ReactJS dengan struktur komponen dan routing yang sesuai. Kriteria
Partisipasi aktif
Teknik
 kehadiran,Ceramah,[CR=180 Menit]
 Topik
Navigasi Aplikasi Web Menggunakan React Routing
Sub Topik
Pengenalan Routing, instalasi dan konfigurasi react-router-dom, pembuatan Multi-Page Application (MPA) di dalam Single Page Application (SPA), serta Dynamic Routing.
 6
10 sub.cpmk.IFMI351.CPMK14.1-Mahasiswa mampu merancang dan mengembangkan aplikasi web front-end menggunakan ReactJS yang terintegrasi dengan REST API dan layanan backend. Kriteria
Partisipasi aktif
Teknik
 kehadiran,Ceramah,[CR=180 Menit]
 Topik
Integrasi Aplikasi dengan REST API
Sub Topik
Konsep REST API, melakukan HTTP Request (menggunakan fetch atau axios), menampilkan data eksternal ke dalam komponen React, dan penanganan error (error handling).
 6
11 sub.cpmk.IFMI351.CPMK14.1-Mahasiswa mampu merancang dan mengembangkan aplikasi web front-end menggunakan ReactJS yang terintegrasi dengan REST API dan layanan backend. Kriteria
Partisipasi aktif
Teknik
 kehadiran,Ceramah,[CR=180 Menit]
 Topik
Sinkronisasi Backend dan Autentikasi Menggunakan Firebase
Sub Topik
Pengenalan Firebase, konfigurasi SDK Firebase di React, serta implementasi sistem Autentikasi (Sign In, Sign Out, Sign Up)
 6
12 sub.cpmk.IFMI351.CPMK23.1-Mahasiswa mampu mengintegrasikan antarmuka pengguna dengan REST API dan layanan Firebase dalam aplikasi web modern. Kriteria
Partisipasi aktif
Teknik
 kehadiran,Ceramah,[CR=179 Menit]
 Topik
Integrasi Komponen Sistem Utuh (REST API + Firebase)
Sub Topik
Menggabungkan UI, manajemen state, REST API eksternal, dan penyimpanan Firebase database/firestore menjadi alur kerja aplikasi (business logic) yang utuh.
 6
13 sub.cpmk.IFMI351.CPMK28.1-Mahasiswa mampu merancang dan mempresentasikan proyek aplikasi web terintegrasi berbasis ReactJS sesuai kebutuhan pengguna dan organisasi. Kriteria
Partisipasi aktif
Teknik
 kehadiran,Ceramah,[CR=179 Menit]
 Topik
Kolaborasi dan Version Control dalam Pengembangan Solusi TI
Sub Topik
Penggunaan Version Control System (Git & GitHub), manajemen branch (Git Branching), penyelesaian conflict code, serta persiapan deployment aplikasi web
 6
14 sub.cpmk.IFMI351.CPMK23.1-Mahasiswa mampu mengintegrasikan antarmuka pengguna dengan REST API dan layanan Firebase dalam aplikasi web modern. Kriteria
Ketepatan analisis dan interpretasi
Teknik
 Diskusi,Studi Kasus,[SK=180 Menit]
 Topik
Finalisasi Proyek dan Pengujian Aplikasi Terintegrasi
Sub Topik
Bug fixing, pengujian performa antarmuka (tuning performance), penyelarasan responsive design, serta persiapan dokumentasi proyek.
 6
15 sub.cpmk.IFMI351.CPMK28.1-Mahasiswa mampu merancang dan mempresentasikan proyek aplikasi web terintegrasi berbasis ReactJS sesuai kebutuhan pengguna dan organisasi. Kriteria
Proyek berfungsi, inovatif, sesuai tujuan
Teknik
 UAS,Ujian,[UJ=180 Menit]
 Topik
Evaluasi Akhir Semester (UAS) / Demo Proyek Akhir
Sub Topik
Presentasi akhir, demo hasil Proyek 2, pengujian langsung di depan dosen/penguji, serta evaluasi kesesuaian solusi TI terhadap kebutuhan industri serta penelitian.
 11

Teknik Penilaian CPMK

CPL MK CPMK Kehadiran Praktek Latihan Ujian Final Test (UAS)
CPL05 Pengembangan Web Front-End/Front-End Web Development CPMK10 Y
CPL07 Pengembangan Web Front-End/Front-End Web Development CPMK14 Y Y
CPL07 Pengembangan Web Front-End/Front-End Web Development CPMK16 Y Y
CPL10 Pengembangan Web Front-End/Front-End Web Development CPMK22 Y Y
CPL10 Pengembangan Web Front-End/Front-End Web Development CPMK23 Y
CPL10 Pengembangan Web Front-End/Front-End Web Development CPMK24 Y
CPL12 Pengembangan Web Front-End/Front-End Web Development CPMK28 Y Y Y

Prosedur Penilaian CPMK

1. Komponen Penilaian CPMK
CPL CPMK Sub-CPMK Detail Penugasan (Teknik Penilaian) Bobot % Kriteria Penilaian
CPL10 CPMK22 sub.cpmk.IFMI351.CPMK22.1 6 Partisipasi aktif
CPL10 CPMK22 sub.cpmk.IFMI351.CPMK22.1 6 Kesesuaian output dengan spesifikasi yang diminta
CPL07 CPMK14 sub.cpmk.IFMI351.CPMK14.1 6 Partisipasi aktif
CPL07 CPMK16 sub.cpmk.IFMI351.CPMK16.1 6 Partisipasi aktif
CPL05 CPMK10 sub.cpmk.IFMI351.CPMK10.1 6 Partisipasi aktif
CPL10 CPMK24 sub.cpmk.IFMI351.CPMK24.1 6 Partisipasi aktif
CPL05 CPMK10 sub.cpmk.IFMI351.CPMK10.1 6 Partisipasi aktif
CPL12 CPMK28 sub.cpmk.IFMI351.CPMK28.1 11 Ketepatan metode atau prosedur penyelesaian
CPL07 CPMK16 sub.cpmk.IFMI351.CPMK16.1 6 Partisipasi aktif
CPL07 CPMK14 sub.cpmk.IFMI351.CPMK14.1 6 Partisipasi aktif
CPL07 CPMK14 sub.cpmk.IFMI351.CPMK14.1 6 Partisipasi aktif
CPL10 CPMK23 sub.cpmk.IFMI351.CPMK23.1 6 Partisipasi aktif
CPL12 CPMK28 sub.cpmk.IFMI351.CPMK28.1 6 Partisipasi aktif
CPL10 CPMK23 sub.cpmk.IFMI351.CPMK23.1 6 Ketepatan analisis dan interpretasi
CPL12 CPMK28 sub.cpmk.IFMI351.CPMK28.1 11 Proyek berfungsi, inovatif, sesuai tujuan
Total 100
2. Penilaian CPMK
CPL MK CPMK Kehadiran Praktek Latihan Ujian Final Test (UAS) Total
CPL05 Pengembangan Web Front-End/Front-End Web Development CPMK10 12% 0% 0% 0% 0% 12%
CPL07 Pengembangan Web Front-End/Front-End Web Development CPMK14 12% 6% 0% 0% 0% 18%
CPL07 Pengembangan Web Front-End/Front-End Web Development CPMK16 6% 0% 6% 0% 0% 12%
CPL10 Pengembangan Web Front-End/Front-End Web Development CPMK22 6% 6% 0% 0% 0% 12%
CPL10 Pengembangan Web Front-End/Front-End Web Development CPMK23 12% 0% 0% 0% 0% 12%
CPL10 Pengembangan Web Front-End/Front-End Web Development CPMK24 0% 6% 0% 0% 0% 6%
CPL12 Pengembangan Web Front-End/Front-End Web Development CPMK28 6% 0% 0% 11% 11% 28%
100%