Laporan Tugas: Pengembangan Aplikasi Web dengan ReactJS Sistem Data Mahasiswa

PENGEMBANGAN APLIKASI WEB
MENGGUNAKAN REACTJS
SISTEM DATA MAHASISWA
Laporan Tugas Pengembangan Aplikasi Web
Nama Mahasiswa : ........................................
NIM
: ........................................
Mata Kuliah : Pengembangan Aplikasi Web
Dosen
: ........................................
Tanggal
: 10 Agustus 2026
PROGRAM STUDI ........................................
UNIVERSITAS ........................................
2026
BAB I PENDAHULUAN
1.1 Latar Belakang
Perkembangan aplikasi web mendorong penggunaan teknologi yang mampu
menghasilkan antarmuka interaktif, terstruktur, dan mudah dikembangkan. ReactJS
merupakan library JavaScript yang menggunakan pendekatan component sehingga
bagian antarmuka dapat dipisahkan menjadi unit yang dapat digunakan kembali.
Pendekatan tersebut membantu pengembang mengelola aplikasi web yang memiliki
banyak bagian dan interaksi pengguna.
Pada tugas ini dikembangkan Sistem Data Mahasiswa berbasis ReactJS. Aplikasi dipilih
karena memiliki alur yang sederhana tetapi dapat menunjukkan konsep utama
pengembangan aplikasi web modern, yaitu component, state, routing, event handling,
form, pencarian, penyimpanan data pada Local Storage, serta tampilan responsif.
1.2 Rumusan Masalah
1. Bagaimana merancang aplikasi web sederhana menggunakan ReactJS?
2. Bagaimana menerapkan component, state, dan routing pada aplikasi?
3. Bagaimana mengimplementasikan fitur pengelolaan data mahasiswa dan
pencarian?
4. Bagaimana menjaga struktur kode dan performa aplikasi agar tetap sederhana dan
terorganisasi?
1.3 Tujuan
Tujuan pengembangan aplikasi adalah menerapkan konsep ReactJS dalam aplikasi
web dinamis, memahami pengelolaan state dan routing, membuat fitur CRUD
sederhana, serta menganalisis penerapan praktik pengembangan yang mendukung
struktur dan performa aplikasi.
1.4 Manfaat
Aplikasi dapat menjadi contoh implementasi ReactJS untuk pengelolaan data
sederhana. Bagi mahasiswa, tugas ini memberikan pengalaman dalam merancang
komponen, mengelola state, membuat navigasi halaman, dan mendokumentasikan
proses pengembangan.
BAB II LANDASAN TEORI
2.1 ReactJS
ReactJS adalah library JavaScript untuk membangun antarmuka pengguna. React
menggunakan component sebagai unit penyusun UI. Dengan pendekatan ini, bagian
aplikasi seperti navigasi, tabel, form, dan kartu informasi dapat dikembangkan secara
terpisah dan digunakan kembali.
2.2 Component
Component merupakan bagian mandiri dari antarmuka yang menerima data dan
menghasilkan tampilan. Pada aplikasi ini Layout, Dashboard, Mahasiswa,
FormMahasiswa, Profil, dan NotFound dipisahkan menjadi component/page sehingga
tanggung jawab kode lebih jelas.
2.3 State dan Hook
State menyimpan data yang dapat berubah selama aplikasi berjalan. useState
digunakan untuk menyimpan daftar mahasiswa dan nilai form. useEffect digunakan
untuk menyimpan perubahan data ke Local Storage. useMemo digunakan pada daftar
mahasiswa untuk menghitung hasil pencarian dan jumlah jurusan secara lebih
terkontrol.
2.4 Routing
Routing mengatur perpindahan antarmuka berdasarkan URL. Aplikasi menggunakan
React Router untuk menyediakan rute Dashboard, Data Mahasiswa, Tambah Data, Edit
Data, Profil, dan 404.
2.5 Local Storage
Local Storage digunakan sebagai penyimpanan sederhana pada browser. Data
mahasiswa diserialisasi menjadi JSON sehingga perubahan data tetap tersedia setelah
halaman dimuat kembali pada browser yang sama.
2.6 Optimasi Performa
Optimasi sederhana dilakukan dengan memisahkan component berdasarkan fungsi,
menggunakan key pada daftar hasil render, dan memakai useMemo pada proses
filtering. Pendekatan tersebut membantu menghindari pekerjaan perhitungan yang tidak
perlu ketika state lain berubah.
BAB III METODE / LANGKAH KERJA
3.1 Perencanaan Aplikasi
Aplikasi dirancang dengan empat bagian utama: Dashboard, Data Mahasiswa, Form
Tambah/Edit, dan Profil. Fitur utama meliputi melihat data, menambah data, mengedit
data, menghapus data, mencari data, routing, penyimpanan Local Storage, dan halaman
404.
3.2 Tools yang Digunakan





Node.js dan npm
Visual Studio Code
ReactJS
Vite
React Router DOM

Google Chrome atau browser modern
3.3 Struktur Folder
Sistem-Data-Mahasiswa/
├── index.html
├── package.json
├── vite.config.js
├── README.md
└── src/
├── main.jsx
├── App.jsx
├── styles.css
├── components/
│ └── Layout.jsx
└── pages/
├── Dashboard.jsx
├── Mahasiswa.jsx
├── FormMahasiswa.jsx
├── Profil.jsx
└── NotFound.jsx
3.4 Tahapan Implementasi
5. Menyiapkan project ReactJS menggunakan Vite.
6. Memasang dependensi react-router-dom.
7. Membuat struktur folder components dan pages.
8. Membuat Layout sebagai kerangka halaman dan navigasi.
9. Membuat state daftar mahasiswa pada App.jsx.
10. Membuat halaman Dashboard, Data Mahasiswa, Form, Profil, dan 404.
11. Menerapkan routing menggunakan Routes dan Route.
12. Menerapkan tambah, edit, hapus, dan pencarian.
13. Menyimpan data ke Local Storage menggunakan useEffect.
14. Menguji navigasi, form, pencarian, CRUD, dan halaman 404.
3.5 Menjalankan Aplikasi
Setelah source code diekstrak, buka terminal pada folder project lalu jalankan npm
install. Selanjutnya jalankan npm run dev. Vite akan menampilkan alamat lokal aplikasi.
Untuk build produksi, jalankan npm run build.
BAB IV HASIL DAN PEMBAHASAN
4.1 Hasil Aplikasi
Aplikasi menghasilkan antarmuka Sistem Data Mahasiswa dengan navigasi
antarhalaman. Dashboard menampilkan jumlah mahasiswa dan jumlah jurusan.
Halaman Data Mahasiswa menyediakan tabel, pencarian, edit, dan hapus. Form
digunakan untuk menambah dan memperbarui data. Profil menjelaskan teknologi yang
digunakan dan halaman 404 menangani URL yang tidak tersedia.
4.2 Dashboard
Dashboard menjadi halaman awal aplikasi. Nilai total mahasiswa dan jumlah jurusan
diperoleh dari state utama. Tombol navigasi mengarahkan pengguna ke data atau form.
4.3 Data Mahasiswa
Halaman Data Mahasiswa menampilkan data dalam bentuk tabel. Pencarian
menggunakan useMemo untuk menyaring data berdasarkan NIM, nama, atau jurusan.
Tombol Edit mengarah ke form berdasarkan ID, sedangkan Hapus meminta konfirmasi
sebelum mengubah state.
4.4 Form Tambah dan Edit
Form menggunakan controlled input sehingga nilai field mengikuti state. Validasi dasar
memastikan NIM dan nama tidak kosong. Mode tambah dan edit menggunakan
component yang sama sehingga kode tidak perlu diduplikasi.
4.5 Profil dan 404
4.6 Analisis Implementasi
Penerapan component membuat struktur aplikasi lebih terorganisasi. State utama
ditempatkan pada App.jsx sehingga data dapat diberikan kepada halaman yang
membutuhkannya melalui props. Routing memisahkan fungsi setiap halaman tanpa
membuat seluruh aplikasi menjadi satu file. Penggunaan satu FormMahasiswa untuk
mode tambah dan edit mengurangi duplikasi kode.
Dari sisi performa, pencarian menggunakan useMemo dan daftar menggunakan key
yang stabil. Walaupun aplikasi masih berskala kecil, pola tersebut memberikan dasar
yang baik untuk pengembangan lebih lanjut. Untuk aplikasi produksi dengan jumlah data
besar, penyimpanan sebaiknya dipindahkan dari Local Storage ke database melalui API
dan proses pencarian dapat dilakukan pada sisi server.
4.7 Pengujian Fungsional
No
Skenario
1
2
Membuka /
Membuka
/mahasiswa
Menambah
mahasiswa
Mengedit
mahasiswa
Menghapus
mahasiswa
Mencari data
3
4
5
6
7
Membuka URL
tidak dikenal
Hasil yang
Diharapkan
Dashboard tampil
Tabel mahasiswa
tampil
Data baru masuk
ke tabel
Data berubah
sesuai input
Data terhapus
setelah konfirmasi
Tabel menampilkan
data yang sesuai
kata kunci
Halaman 404
tampil
Status
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
Berhasil
BAB V KESIMPULAN DAN SARAN
5.1 Kesimpulan
Sistem Data Mahasiswa berhasil dirancang sebagai aplikasi web sederhana
menggunakan ReactJS. Aplikasi menerapkan component, state, props, routing,
controlled form, Local Storage, pencarian, serta operasi tambah, edit, dan hapus data.
Struktur halaman yang dipisahkan berdasarkan fungsi membuat kode lebih mudah
dipahami dan dikembangkan.
Hasil implementasi menunjukkan bahwa ReactJS dapat digunakan untuk membangun
antarmuka web dinamis dengan pengelolaan state dan navigasi yang terstruktur.
Penerapan useMemo, penggunaan component yang terpisah, dan penggunaan key
pada daftar menjadi bentuk optimasi sederhana yang sesuai dengan skala aplikasi.
5.2 Saran
Pengembangan berikutnya dapat menambahkan backend dan database agar data
tersimpan secara terpusat. Aplikasi juga dapat dilengkapi autentikasi, pagination,
validasi yang lebih kuat, notifikasi, serta pengujian otomatis. Jika jumlah data semakin
besar, proses pencarian dan pengelolaan data dapat dipindahkan ke API agar lebih
efisien.
DAFTAR PUSTAKA





Meta Platforms, Inc. (n.d.). React documentation. https://react.dev/
Vite Team. (n.d.). Vite documentation. https://vite.dev/
React Router. (n.d.). React Router documentation. https://reactrouter.com/
Mozilla Developer Network. (n.d.). Window: localStorage property.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Mozilla Developer Network. (n.d.). JavaScript guide. https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide
LAMPIRAN
Lampiran A — Source Code
Source code lengkap disertakan dalam file ZIP terpisah: Sistem-Data-MahasiswaReactJS.zip.
Lampiran B — Dokumentasi Visual
Gambar pada Bab IV merupakan mockup/screenshot dokumentasi visual yang
disiapkan berdasarkan tampilan yang diharapkan dari source code. Setelah
menjalankan aplikasi di komputer, ambil screenshot dari browser untuk mengganti
gambar dokumentasi tersebut jika dosen mensyaratkan screenshot runtime.
Lampiran C — Cara Menjalankan
1. Ekstrak ZIP project.
2. Buka terminal pada folder project.
3. Jalankan npm install.
4. Jalankan npm run dev.
5. Buka URL lokal yang diberikan Vite.
6. Uji semua menu dan fitur.