UNIVERSITAS AMIKOM YOGYAKARTA
FAKULTAS ILMU KOMPUTER
PROGRAM STUDI INFORMATIKA

RPS-S1IF-ST084
RENCANA PEMBELAJARAN SEMESTER
MATA KULIAH (MK) KODE Rumpun MK BOBOT (sks) SEMESTER Tanggal Penyusunan
PEMROGRAMAN WEB ST084 Kelompok Mata Kuliah Algoritma dan Pemrograman T= 2 P= 2 4 12 Mar 2026
Pengesahan Dosen Pengembang RPS Koordinator RMK Ka PRODI

Arifiyanto Hadi Negoro, S.Kom., M. T.
Rifda Faticha Alfa Aziza, M.Kom
ELI PUJASTUTI, M. KOM.
Capaian Pembelajaran CPL-PRODI yang dibebankan pada MK
CPLP05 Mampu menganalisis, merancang dan mengevaluasi perangkat lunak pada berbagai platform untuk memenuhi kebutuhan industri atau masyarakat
CPLP09 mampu menjelaskan metode analisis, perancangan sistem, pengujian perangkat lunak pada berbagai platform untuk memenuhi kebutuhan industri atau masyarakat
Capaian Pembelajaran Mata Kuliah (CPMK)
CPMK16 Mahasiswa mampu merancang perangkat lunak pada berbagai platform digital
CPMK18 Mahasisiwa mampu menganalisis kebutuhan industri atau masyakarat
CPMK37 Mahasiswa mampu menerapkan metode perancangan perangkat lunak.
CPMK38 Mahasiswa mampu menganalisis platform yang sesuai untuk kebutuhan industri atau masyarakat
Kemampuan akhir tiap tahapan belajar (Sub-CPMK)
sub.cpmk.ST084.CPMK16.1 Mahasiswa mampu menerapkan penggunaan Database NoSQL menggunakan MongoDB Atlas + Mongoose
sub.cpmk.ST084.CPMK16.2 Mahasiswa mampu menerapkan penggunaan Framework CSS (Bootstrap/Tailwind di React)
sub.cpmk.ST084.CPMK18.1 Mahasiswa mampu merancang website menggunakan HTML
sub.cpmk.ST084.CPMK37.1 Mahasiswa mampu merancang website menggunakan React dan CSS
sub.cpmk.ST084.CPMK37.2 Mahasiswa mampu merancang website menggunakan Javascript (React, Axios, useEffect, state)
sub.cpmk.ST084.CPMK37.3 Mahasiswa mampu merancang website menggunakan NestJS untuk membangun sisi backend
sub.cpmk.ST084.CPMK38.1 Mahasiswa mampu merancang website secara Full Stack berbasis Microsevices menggunakan React + NestJS + MongoDB
sub.cpmk.ST084.CPMK38.2 Mahasiswa mampu membangun REST API dan mengintegrasikannya dengan frontend
Korelasi CPMK terhadap Sub-CPMK
CPMK18 sub.cpmk.ST084.CPMK18.1
CPMK37 sub.cpmk.ST084.CPMK37.1
sub.cpmk.ST084.CPMK37.2
sub.cpmk.ST084.CPMK37.3
CPMK16 sub.cpmk.ST084.CPMK16.1
sub.cpmk.ST084.CPMK16.2
CPMK38 sub.cpmk.ST084.CPMK38.1
sub.cpmk.ST084.CPMK38.2
Deskripsi Singkat MK Mata kuliah ini membahas konsep dan implementasi pemrograman web modern yang mencakup frontend (HTML, CSS, JavaScript, React) dan backend (NestJS, Node.js, REST API) serta database NoSQL (MongoDB Atlas). Perkuliahan diselenggarakan dalam 14 pertemuan teori (ganjil) dan 14 pertemuan praktikum (genap). Mahasiswa akan belajar membangun aplikasi full-stack terintegrasi mulai dari desain UI, pengelolaan state, pembuatan API, koneksi database, hingga uji coba dengan Postman. Pembelajaran berbasis proyek (Final Project) diterapkan untuk mengasah kemampuan analisis, perancangan, dan implementasi perangkat lunak sesuai kebutuhan industri.
Bahan Kajian : Materi Pembelajaran Materi yang dibahas dalam mata kuliah ini meliputi arsitektur website, konsep layout web, HTML, CSS, framework CSS, JavaScript, React, Javascript, PHP, NestJS, Node.js, REST API.
Pustaka Utama
  • 1. Dean, J. (2018). Web Programming with HTML5, CSS, and JavaScript. Jones & Bartlett Learning
  • 2. Robbins, J. N. (2012). Learning Web Design. O'Reilly Media
  • 4. Kapexhiu, D. (2022). NestJS: A Progressive Node.js Framework. Packt Publishing
  • 10. Banks, A., & Porcello, E. (2020). Learning React Modern Patterns for Developing React Apps. O'Reilly Media
Pendukung
  • 5. W3Schools – HTML, CSS, JavaScript, React Tutorial. https://www.w3schools.com
  • 6. MongoDB Docs – MongoDB Atlas & Mongoose. https://www.mongodb.com/docs/
  • 7. NestJS Documentation – https://docs.nestjs.com
  • 8. Postman Learning Center – https://learning.postman.com
  • 9. Axios GitHub – https://github.com/axios/axios
Dosen Pengampu Rifda Faticha Alfa Aziza, S.Kom., M.Kom., Yudha Riwanto, M.Kom, Muhammad Rudyanto Arief, S.T., M.T, Mujiyanto, M.Kom, Hastari Utama, M.Cs
Mata Kuliah Syarat -
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.ST084.CPMK18.1-Mahasiswa mampu merancang website menggunakan HTML Menjelaskan arsitektur web modern dan peran HTML Kriteria
Rubrik Skala Persepsi
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Tugas,[T=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Tugas,[T=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Pengantar Pemrograman Web Modern & Arsitektur Full-Stack
Sub Topik
1. Konsep client-server 2. Pengenalan Front End dan Back End 3. Web statis vs dinamis 4. Server Side Scripting dan Client Side Scripting 5. Struktur dasar HTML 6. Tools pengembangan 7. Instalasi VS Code
  • [1] Hal: 1-20
  • [2] Hal: 19-60
  • [5] Hal: HTML
1
2 sub.cpmk.ST084.CPMK18.1-Mahasiswa mampu merancang website menggunakan HTML Menginstal tools dan membuat halaman HTML pertama Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Setup Environment & HTML Dasar
Sub Topik
1. Pengenalan Code Editor 2. Instalasi VS Code, Node.js, Git 3. Pengenalan Struktur HTML dasar 4. Pengenalan tag heading, paragraf, link, image 5. Penjelasan mengenai element dan atribut HTML 6. Challenge praktikum instalasi github dan impementasi HTML basic
  • [1] Hal: 1-20
  • [2] Hal: 19-60
  • [5] Hal: HTML
1
3 sub.cpmk.ST084.CPMK18.1-Mahasiswa mampu merancang website menggunakan HTML Menjelaskan dan menggunakan tag HTML tabel, form, dan semantic Kriteria
Rubrik Analitik
Teknik
Kuis 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Kuis,[K=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Kuis,[K=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
HTML Lanjutan (Tabel, Form, Semantic)
Sub Topik
1. Struktur tabel & merging cell 2. Form & input types 3. Semantic HTML (header, nav, main, footer) 4. Kuis HTML
  • [1] Hal: 1-66
  • [2] Hal: 51-163
  • [5] Hal: HTML
1
4 sub.cpmk.ST084.CPMK18.1-Mahasiswa mampu merancang website menggunakan HTML Membuat halaman profil dengan HTML tabel dan form Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
HTML Lanjutan (Tabel, Form, Semantic)
Sub Topik
1. Implementasi list, tabel, form 2. Validasi form sederhana (required, pattern) 3. Challenge praktikum HTML tabel & HTML form
  • [1] Hal: 1-66
  • [2] Hal: 51-163
  • [5] Hal: HTML
2
5 sub.cpmk.ST084.CPMK37.1-Mahasiswa mampu merancang website menggunakan React dan CSS Menjelaskan cara penggunaan CSS dalam komponen React Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Pengantar React & CSS di React
Sub Topik
1. Penjelasan konsep CSS 2. CSS modules vs inline style vs styled-components 3. Pengenalan React component 4. JSX dan styling
  • [1] Hal: 73-297
  • [2] Hal: 187-358
  • [5] Hal: CSS & React
  • [10] Hal: 1-95
0.5
6 sub.cpmk.ST084.CPMK37.1-Mahasiswa mampu merancang website menggunakan React dan CSS Membuat komponen React dengan styling CSS Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Praktikum React & CSS pada React
Sub Topik
1. Membuat card component 2. Menggunakan CSS modules 3. Layout dengan Flexbox/Grid di React 4. Challenge CSS pada React
  • [1] Hal: 73-297
  • [2] Hal: 187-358
  • [5] Hal: CSS & React
  • [10] Hal: 1-95
1.5
7 sub.cpmk.ST084.CPMK16.2-Mahasiswa mampu menerapkan penggunaan Framework CSS (Bootstrap/Tailwind di React) Menjelaskan konsep dan keuntungan framework CSS di React Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Framework CSS di React (Bootstrap/Tailwind)
Sub Topik
1. Integrasi Bootstrap dengan React 2. Integrasi Tailwind CSS 3. Penggunaan komponen siap pakai
  • [1] Hal: 73-297
  • [2] Hal: 187-358
  • [5] Hal: CSS & React
  • [10] Hal: 1-95
0.5
8 sub.cpmk.ST084.CPMK16.2-Mahasiswa mampu menerapkan penggunaan Framework CSS (Bootstrap/Tailwind di React) Membangun landing page responsif dengan Tailwind/Bootstrap di React Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Framework CSS di React (Bootstrap/Tailwind)
Sub Topik
1. Implementasi grid system 2. Navbar, card, button, modal 3. Challenge Framework CSS
  • [1] Hal: 73-297
  • [2] Hal: 187-358
  • [5] Hal: CSS, React, Bootstrap
  • [10] Hal: 1-95
1.5
9 sub.cpmk.ST084.CPMK37.2-Mahasiswa mampu merancang website menggunakan Javascript (React, Axios, useEffect, state) Menjelaskan konsep state, event handling, dan efek samping Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
JavaScript Dasar untuk React
Sub Topik
1. useState hook 2. Event handling di React 3. useEffect untuk side effects 4. Conditional rendering
  • [1] Hal: 311-483
  • [10] Hal: 1-287
0.5
10 sub.cpmk.ST084.CPMK37.2-Mahasiswa mampu merancang website menggunakan Javascript (React, Axios, useEffect, state) Membuat aplikasi counter dan to-do list dengan state Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
React State & Effect
Sub Topik
1. Counter dengan useState 2. To-do list (tambah, hapus, toggle) 3. useEffect untuk menyimpan ke localStorage
  • [1] Hal: 311-483
  • [10] Hal: 1-287
1.5
11 sub.cpmk.ST084.CPMK37.2-Mahasiswa mampu merancang website menggunakan Javascript (React, Axios, useEffect, state) Menjelaskan cara mengambil data dari API menggunakan Axios Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Data Fetching dengan Axios
Sub Topik
1. Install dan konfigurasi Axios 2. GET request dengan async/await 3. Loading & error state 4. Menampilkan data dari API
  • [1] Hal: 311-483
  • [10] Hal: 1-287
  • [9] Hal: -
0.5
12 sub.cpmk.ST084.CPMK37.2-Mahasiswa mampu merancang website menggunakan Javascript (React, Axios, useEffect, state) Mengambil dan menampilkan data dari public REST API Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Data Fetching dengan Axios
Sub Topik
1. Fetch data dari JSON Placeholder 2. Menampilkan list post/user 3. Loading indicator & error handling 4. Challenge Axios
  • [1] Hal: 311-483
  • [10] Hal: 1-287
  • [9] Hal: -
1.5
13 sub.cpmk.ST084.CPMK37.3-Mahasiswa mampu merancang website menggunakan NestJS untuk membangun sisi backend Menjelaskan arsitektur NestJS dan peran backend Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Pengenalan Backend & NestJS
Sub Topik
1. Node.js & framework backend 2. NestJS architecture (module, controller, service) 3. Dependency Injection 4. Setup proyek NestJS
  • [7] Hal: -
0.5
14 sub.cpmk.ST084.CPMK37.3-Mahasiswa mampu merancang website menggunakan NestJS untuk membangun sisi backend Membuat REST endpoint GET pertama dengan NestJS Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Setup NestJS & First Endpoint
Sub Topik
1. Instalasi NestJS CLI 2. Generate module & controller 3. Membuat endpoint /ping 4. Testing dengan Postman
  • [7] Hal: -
  • [8] Hal: -
1.5
15 sub.cpmk.ST084.CPMK16.1-Mahasiswa mampu menerapkan penggunaan Database NoSQL menggunakan MongoDB Atlas + Mongoose sub.cpmk.ST084.CPMK16.2-Mahasiswa mampu menerapkan penggunaan Framework CSS (Bootstrap/Tailwind di React) Mengerjakan soal teori dan praktik frontend Kriteria
Rubrik Analitik
Teknik
UTS 		Ujian terjadwal,Durasi sesuai DAAK,[D=100 Menit]
 Ujian terjadwal,Durasi sesuai DAAK,[D=100 Menit]
 Topik
Materi pertemuan 1 sampai 14
Sub Topik
Materi pertemuan 1 sampai 14
 25
16 sub.cpmk.ST084.CPMK16.1-Mahasiswa mampu menerapkan penggunaan Database NoSQL menggunakan MongoDB Atlas + Mongoose Menjelaskan konsep database NoSQL dan ODM Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
MongoDB Atlas & Mongoose
Sub Topik
1. Database relasional vs NoSQL 2. MongoDB Atlas setup (cluster, user, network) 3. Mongoose Schema & Model 4. Koneksi dari NestJS ke MongoDB
  • [6] Hal: -
0.5
17 sub.cpmk.ST084.CPMK16.1-Mahasiswa mampu menerapkan penggunaan Database NoSQL menggunakan MongoDB Atlas + Mongoose Membuat Schema & Model, melakukan operasi CRUD dengan Mongoose Kriteria

Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
MongoDB Atlas & Mongoose
Sub Topik
1. Membuat schema (Product/Todo) 2. Create, Read, Update, Delete data 3. Uji coba via Postman 4. Challenge Database
  • [6] Hal: -
1.5
18 sub.cpmk.ST084.CPMK37.3-Mahasiswa mampu merancang website menggunakan NestJS untuk membangun sisi backend Menjelaskan metode HTTP dan implementasi CRUD di NestJS Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
REST API CRUD dengan NestJS
Sub Topik
1. GET, POST, PUT, DELETE 2. DTO (Data Transfer Object) 3. Validation pipe 4. Service & Repository pattern
  • [7] Hal: -
0.5
19 sub.cpmk.ST084.CPMK38.2-Mahasiswa mampu membangun REST API dan mengintegrasikannya dengan frontend Membangun REST API CRUD lengkap dengan NestJS + MongoDB Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
REST API CRUD dengan NestJS
Sub Topik
1. API untuk entitas (Product/Todo) 2. Testing semua endpoint di Postman 3. Validasi input 4. Challenge REST API
  • [6] Hal: -
  • [7] Hal: -
  • [8] Hal: -
1.5
20 sub.cpmk.ST084.CPMK38.2-Mahasiswa mampu membangun REST API dan mengintegrasikannya dengan frontend Menjelaskan alur integrasi React dengan backend API Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Integrasi Frontend & Backend (CORS, Axios)
Sub Topik
1. Menghubungkan React dengan API NestJS 2. Mengatasi CORS 3. Environment variable (API URL) 4. Axios interceptor
  • [7] Hal: -
  • [8] Hal: -
  • [9] Hal: -
0.5
21 sub.cpmk.ST084.CPMK38.2-Mahasiswa mampu membangun REST API dan mengintegrasikannya dengan frontend Menampilkan data dari API backend di React Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Full-Stack 1 (GET Data)
Sub Topik
1. React memanggil API GET NestJS 2. Menampilkan data dalam list 3. Loading & error handling 4. Challenge Full-Stack 1 (GET Data)
  • [7] Hal: -
  • [8] Hal: -
  • [9] Hal: -
1.5
22 sub.cpmk.ST084.CPMK38.1-Mahasiswa mampu merancang website secara Full Stack berbasis Microsevices menggunakan React + NestJS + MongoDB Menjelaskan implementasi CREATE, UPDATE, DELETE dari frontend Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Full-Stack CRUD Lengkap
Sub Topik
1. Form untuk tambah/edit data 2. Mengirim POST/PUT request ke NestJS 3. DELETE request 4. Refetch data setelah operasi
  • [6] Hal: -
  • [7] Hal: -
  • [8] Hal: -
  • [9] Hal: -
1
23 sub.cpmk.ST084.CPMK38.1-Mahasiswa mampu merancang website secara Full Stack berbasis Microsevices menggunakan React + NestJS + MongoDB Membangun aplikasi full-stack CRUD (tambah, edit, hapus, tampil) Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Full-Stack CRUD Lengkap
Sub Topik
1. Form input + submit POST 2. Tombol edit (prepopulate form) 3. Tombol hapus (DELETE) 4. Update tampilan otomatis 5. Challenge Full-Stack 2 (CRUD Penuh)
  • [6] Hal: -
  • [7] Hal: -
  • [8] Hal: -
  • [9] Hal: -
2
24 sub.cpmk.ST084.CPMK38.1-Mahasiswa mampu merancang website secara Full Stack berbasis Microsevices menggunakan React + NestJS + MongoDB Menjelaskan konsep microservices dan penerapannya Kriteria
Rubrik Analitik
Teknik
Diskusi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Proses Belajar,[PB=60 Menit]
Kuliah,Diskusi,[DS=30 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Microservices & Arsitektur Full-Stack Modern
Sub Topik
1. Monolith vs Microservices 2. Service communication (HTTP, message broker) 3. API Gateway 4. Studi kasus microservices sederhana
  • [6] Hal: -
  • [7] Hal: -
  • [8] Hal: -
  • [9] Hal: -
1
25 sub.cpmk.ST084.CPMK38.1-Mahasiswa mampu merancang website secara Full Stack berbasis Microsevices menggunakan React + NestJS + MongoDB Mengembangkan final project full-stack dengan microservices sederhana Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Final Project Development
Sub Topik
1. Integrasi final React + NestJS + MongoDB 2. Testing menyeluruh 3. Persiapan deployment
  • [6] Hal: -
  • [7] Hal: -
  • [8] Hal: -
  • [9] Hal: -
2
26 sub.cpmk.ST084.CPMK38.1-Mahasiswa mampu merancang website secara Full Stack berbasis Microsevices menggunakan React + NestJS + MongoDB Menjelaskan cara presentasi proyek dan deployment Kriteria
Rubrik Analitik
Teknik
Presentasi 		Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Presentasi,[PS=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Kuliah,Persiapan Perkuliahan,[P=10 Menit]
Kuliah,Presentasi,[PS=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Presentasi Final Project & Deployment
Sub Topik
- Struktur presentasi proyek - Deployment frontend (Vercel/Netlify) - Deployment backend (Render/Railway) - Best practice microservices
  • [6] Hal: -
  • [7] Hal: -
  • [8] Hal: -
  • [9] Hal: -
10
28
27 sub.cpmk.ST084.CPMK38.1-Mahasiswa mampu merancang website secara Full Stack berbasis Microsevices menggunakan React + NestJS + MongoDB Menyelesaikan proyek full-stack secara utuh Kriteria
Rubrik Analitik
Teknik
Tugas 		Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum,[P=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Praktikum,Persiapan Perkuliahan,[P=10 Menit]
Praktikum,Praktikum Online,[PR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Finalisasi & Uji Coba Final Project
Sub Topik
- Bug fixing - Dokumentasi API dengan Swagger - Persiapan presentasi & laporan
  • [6] Hal: -
  • [7] Hal: -
  • [8] Hal: -
  • [9] Hal: -
2
29 sub.cpmk.ST084.CPMK38.1-Mahasiswa mampu merancang website secara Full Stack berbasis Microsevices menggunakan React + NestJS + MongoDB Mengerjakan soal praktik full-stack secara individu Kriteria
Rubrik Analitik
Teknik
Responsi 		Responsi,Persiapan Perkuliahan,[P=10 Menit]
Responsi,Tugas Responsi,[TR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Responsi,Persiapan Perkuliahan,[P=10 Menit]
Responsi,Tugas Responsi,[TR=90 Menit]
Pemahaman materi mandiri,Kegiatan Mandiri,[PM=70 Menit]
 Topik
Responsi
Sub Topik
Membuat mini full-stack app (CRUD) dari awal: NestJS API + React frontend + MongoDB
  • [6] Hal: -
  • [7] Hal: -
  • [8] Hal: -
  • [9] Hal: -
11
30 sub.cpmk.ST084.CPMK38.1-Mahasiswa mampu merancang website secara Full Stack berbasis Microsevices menggunakan React + NestJS + MongoDB sub.cpmk.ST084.CPMK38.2-Mahasiswa mampu membangun REST API dan mengintegrasikannya dengan frontend Mengerjakan soal praktik full-stack secara individu Kriteria
Rubrik Analitik
Teknik
UAS 		Ujian terjadwal,Durasi sesuai DAAK,[D=100 Menit]
 Ujian terjadwal,Durasi sesuai DAAK,[D=100 Menit]
 Topik
Materi pertemuan 16 sampai 29
Sub Topik
Materi pertemuan 16 sampai 29
 25

Teknik Penilaian CPMK

CPL MK CPMK Diskusi Tugas Kuis Tes Tulis (UTS) Presentasi Responsi Tes Tulis ( UAS )
CPLP05 PEMROGRAMAN WEB CPMK16 Y Y Y
CPLP05 PEMROGRAMAN WEB CPMK18 Y Y Y
CPLP09 PEMROGRAMAN WEB CPMK37 Y Y
CPLP09 PEMROGRAMAN WEB CPMK38 Y Y Y Y Y

Prosedur Penilaian CPMK

1. Komponen Penilaian CPMK
CPL CPMK Sub-CPMK Detail Penugasan (Teknik Penilaian) Bobot % Kriteria Penilaian
CPLP05 CPMK18 sub.cpmk.ST084.CPMK18.1 Diskusi 1 Rubrik Skala Persepsi
CPLP05 CPMK18 sub.cpmk.ST084.CPMK18.1 Tugas 1 Rubrik Analitik
CPLP05 CPMK18 sub.cpmk.ST084.CPMK18.1 Kuis 1 Rubrik Analitik
CPLP05 CPMK18 sub.cpmk.ST084.CPMK18.1 Tugas 2 Rubrik Analitik
CPLP09 CPMK37 sub.cpmk.ST084.CPMK37.1 Diskusi 0.5 Rubrik Analitik
CPLP09 CPMK37 sub.cpmk.ST084.CPMK37.1 Tugas 1.5 Rubrik Analitik
CPLP05 CPMK16 sub.cpmk.ST084.CPMK16.2 Diskusi 0.5 Rubrik Analitik
CPLP05 CPMK16 sub.cpmk.ST084.CPMK16.2 Tugas 1.5 Rubrik Analitik
CPLP09 CPMK37 sub.cpmk.ST084.CPMK37.2 Diskusi 0.5 Rubrik Analitik
CPLP09 CPMK37 sub.cpmk.ST084.CPMK37.2 Tugas 1.5 Rubrik Analitik
CPLP09 CPMK37 sub.cpmk.ST084.CPMK37.2 Diskusi 0.5 Rubrik Analitik
CPLP09 CPMK37 sub.cpmk.ST084.CPMK37.2 Tugas 1.5 Rubrik Analitik
CPLP09 CPMK37 sub.cpmk.ST084.CPMK37.3 Diskusi 0.5 Rubrik Analitik
CPLP09 CPMK37 sub.cpmk.ST084.CPMK37.3 Tugas 1.5 Rubrik Analitik
CPLP05 CPMK16 sub.cpmk.ST084.CPMK16.1, sub.cpmk.ST084.CPMK16.2 UTS 25 Rubrik Analitik
CPLP05 CPMK16 sub.cpmk.ST084.CPMK16.1 Diskusi 0.5 Rubrik Analitik
CPLP05 CPMK16 sub.cpmk.ST084.CPMK16.1 Tugas 1.5
CPLP09 CPMK37 sub.cpmk.ST084.CPMK37.3 Diskusi 0.5 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.2 Tugas 1.5 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.2 Diskusi 0.5 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.2 Tugas 1.5 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.1 Diskusi 1 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.1 Tugas 2 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.1 Diskusi 1 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.1 Tugas 2 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.1 Presentasi 10 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.1 Tugas 2 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.1 Responsi 11 Rubrik Analitik
CPLP09 CPMK38 sub.cpmk.ST084.CPMK38.1, sub.cpmk.ST084.CPMK38.2 UAS 25 Rubrik Analitik
Total 100
2. Penilaian CPMK
CPL MK CPMK Diskusi Tugas Kuis Tes Tulis (UTS) Presentasi Responsi Tes Tulis ( UAS ) Total
CPLP05 PEMROGRAMAN WEB CPMK16 1% 3% 0% 25% 0% 0% 0% 29%
CPLP05 PEMROGRAMAN WEB CPMK18 1% 3% 1% 0% 0% 0% 0% 5%
CPLP09 PEMROGRAMAN WEB CPMK37 2.5% 6% 0% 0% 0% 0% 0% 8.5%
CPLP09 PEMROGRAMAN WEB CPMK38 2.5% 9% 0% 0% 10% 11% 25% 57.5%
100%