IMPLEMENTASI ARSITEKTUR MODEL-VIEW-VIEWMODEL PADA APLIKASI FRONTEND E-SIGNATURE UNIVERSITAS MERCU BUANA BERBASIS NEXT.JS DAN TAILWIND CSS

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.

[img]
Preview
Text (HAL COVER)
01 COVER.pdf

Download (1MB) | Preview
[img] Text (BAB I)
02 BAB 1.pdf
Restricted to Registered users only

Download (160kB)
[img] Text (BAB II)
03 BAB 2.pdf
Restricted to Registered users only

Download (273kB)
[img] Text (BAB III)
04 BAB 3.pdf
Restricted to Registered users only

Download (172kB)
[img] Text (BAB IV)
05 BAB 4.pdf
Restricted to Registered users only

Download (5MB)
[img] Text (BAB V)
06 BAB 5.pdf
Restricted to Registered users only

Download (98kB)
[img] Text (DAFTAR PUSTAKA)
07 DAFTAR PUSTAKA.pdf
Restricted to Registered users only

Download (145kB)
[img] 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.

Item Type: Thesis (S1)
NIM/NIDN Creators: 41522110012
Uncontrolled Keywords: Tanda Tangan Elektronik, Frontend Development, (Model-View�ViewModel) MVVM, Next.js, Tailwind CSS, React, Digitalisasi Kampus.
Subjects: 000 Computer Science, Information and General Works/Ilmu Komputer, Informasi, dan Karya Umum > 000. Computer Science, Information and General Works/Ilmu Komputer, Informasi, dan Karya Umum > 004 Data Processing, Computer Science/Pemrosesan Data, Ilmu Komputer, Teknik Informatika
600 Technology/Teknologi > 600. Technology/Teknologi
900 Geography and History/Sejarah, Geografi dan Disiplin Ilmu yang Berkaitan > 920 Biography, Obituary/Biografi, Obituari > 929 Genealogy, names, insignia > 929.8 Awards, Orders, Decorations, Autographs/Penghargaan, Tanda Tangan > 929.88 Autographs/Tanda Tangan
Divisions: Fakultas Ilmu Komputer > Informatika
Depositing User: khalimah
Date Deposited: 28 Aug 2026 04:17
Last Modified: 28 Aug 2026 04:17
URI: http://repository.mercubuana.ac.id/id/eprint/103465

Actions (login required)

View Item View Item