GALENTINO, EDRIC (2026) IMPLEMENTASI ARSITEKTUR MODEL-VIEW-VIEWMODEL PADA APLIKASI FRONTEND E-SIGNATURE UNIVERSITAS MERCU BUANA BERBASIS NEXT.JS DAN TAILWIND CSS. S1 thesis, Universitas Mercu Buana Jakarta.
|
Text (HAL COVER)
01 COVER.pdf Download (1MB) | Preview |
|
|
Text (BAB I)
02 BAB 1.pdf Restricted to Registered users only Download (160kB) |
||
|
Text (BAB II)
03 BAB 2.pdf Restricted to Registered users only Download (273kB) |
||
|
Text (BAB III)
04 BAB 3.pdf Restricted to Registered users only Download (172kB) |
||
|
Text (BAB IV)
05 BAB 4.pdf Restricted to Registered users only Download (5MB) |
||
|
Text (BAB V)
06 BAB 5.pdf Restricted to Registered users only Download (98kB) |
||
|
Text (DAFTAR PUSTAKA)
07 DAFTAR PUSTAKA.pdf Restricted to Registered users only Download (145kB) |
||
|
Text (LAMPIRAN)
08 LAMPIRAN.pdf Restricted to Registered users only Download (234kB) |
Abstract
This research aims to implement the Model–View–ViewModel (MVVM) architecture in the frontend development of the Universitas Mercu Buana electronic signature application using Next.js and Tailwind CSS. The system was developed as part of the university’s digital transformation initiative to streamline document authorization and improve administrative efficiency. The development stages included analyzing the UI design produced by the design team, structuring the frontend architecture, implementing dynamic interface components using React, and integrating key features such as document upload, PDF preview, signature placement, and QR code verification. The implementation applied a service layer pattern for communication between the interface and backend services, followed by functionality and performance testing to ensure consistency with the original design and responsiveness across devices. The results demonstrate that adopting the MVVM architecture and modern frontend technologies produces an interactive, efficient, and extensible interface. This study contributes to the adoption of best practices in modern frontend development for campus digital administration systems and provides a reference for future research on integrating design and implementation through structured architectural approaches. Keywords: Electronic Signature, Frontend Development, (Model-View�ViewModel) MVVM, Next.js, Tailwind CSS, React, Campus Digitalization. Penelitian ini bertujuan untuk mengimplementasikan arsitektur Model–View– ViewModel (MVVM) pada pengembangan frontend aplikasi tanda tangan elektronik Universitas Mercu Buana berbasis Next.js dan Tailwind CSS. Aplikasi ini dikembangkan sebagai bagian dari transformasi digital di lingkungan pendidikan untuk mempercepat proses otorisasi dokumen dan meningkatkan efisiensi administrasi. Tahapan pengembangan mencakup analisis desain antarmuka hasil perancangan tim UI/UX, perancangan struktur arsitektur frontend, implementasi komponen antarmuka dinamis berbasis React, serta integrasi fitur-fitur utama seperti unggah dokumen, pratinjau PDF, penempatan tanda tangan, dan verifikasi kode QR. Seluruh proses implementasi menerapkan pola service layer untuk komunikasi antara antarmuka dan layanan backend, serta diuji menggunakan pendekatan pengujian fungsionalitas dan performa guna memastikan konsistensi dengan rancangan UI serta responsivitas sistem. Hasil implementasi menunjukkan bahwa penerapan arsitektur MVVM dan integrasi teknologi modern mampu menghasilkan antarmuka yang interaktif, efisien, dan mudah diadaptasi untuk pengembangan lebih lanjut. Penelitian ini berkontribusi pada penerapan praktik terbaik pengembangan frontend modern dalam sistem administrasi digital kampus dan menjadi acuan bagi penelitian selanjutnya dalam integrasi desain dengan implementasi berbasis arsitektur terstruktur. Kata kunci: Tanda Tangan Elektronik, Frontend Development, (Model-View�ViewModel) MVVM, Next.js, Tailwind CSS, React, Digitalisasi Kampus.
Actions (login required)
![]() |
View Item |
