Irwan Alnarus Kautsar (1), Gilang Dwi Anggoro (2)
General Background Public institutions rely heavily on official travel orders (SPPD) to manage administrative assignments and ensure operational accountability. Specific Background At BPVP Sidoarjo, the processing and generation of SPPD documents currently depend on manual data entry using Microsoft Excel. Knowledge Gap This manual approach leads to frequent typographical errors, lengthy data processing times, visual unattractiveness, and limited accessibility across mobile or tablet environments. Aims This study designs and optimizes a responsive web-based application front-end leveraging the Vue.js framework to streamline the SPPD input process. Results The system digitizes forms, automates report previews, supports multiple devices, and integrates modules for delegating tasks, managing payment orders (SPM), and generating official receipts. Novelty By implementing a structured front-end architecture using Vue.js combined with role authentication, the research transforms a spreadsheet-bound administrative workflow into a fully responsive, intuitive web interface specifically tailored for vocational training centers. Implications This system substantially improves administrative efficiency, reduces processing errors, and supports digital transformation goals within public sector institutions.
Key Findings Highlights
Web-based front-end digitization replaces manual spreadsheet entry to reduce input errors and speed up processing.
Responsive interface development using Vue.js ensures smooth administrative workflows across smartphones, tablets, and desktop computers.
Automated document modules seamlessly integrate travel delegation, payment orders, and receipt generation into printable official PDF forms.
Keywords Front-End Design, Interface Optimization, Official Travel Orders, Responsive Web Application, Vue Framework
Surat Perintah Perjalanan Dinas (SPPD) merupakan dokumen penting dalam mengatur dan mencatat perjalanan dinas pegawai, terutama dalam lembaga pemerintahan seperti Balai Pelatihan Vokasi dan Produktivitas (BPVP) Sidoarjo. Selama ini, proses pengelolaan SPPD di BPVP Sidoarjo masih dilakukan secara manual menggunakan aplikasi Microsoft Excel. Metode ini, meskipun familiar dan sederhana, memiliki banyak keterbatasan, seperti rentan terhadap kesalahan input, memerlukan waktu yang lama, serta kurang efisien dalam menangani volume data yang besar.
Proses manual yang ada saat ini menghadirkan tantangan bagi pegawai administrasi, termasuk keterlambatan dalam pemrosesan data, potensi kehilangan data, dan sulitnya melacak riwayat perjalanan dinas. Dalam era digital, ketergantungan pada metode manual ini dianggap tidak lagi relevan, mengingat teknologi aplikasi berbasis web yang semakin berkembang dapat menawarkan solusi yang lebih efisien dan andal.
Pengembangan aplikasi ini difokuskan pada sisi front-end dan menggunakan framework vue.js, di mana aspek keterbacaan, responsivitas, dan kemudahan penggunaan menjadi prioritas utama. Dengan demikian, aplikasi ini dapat mendukung transformasi digital di BPVP Sidoarjo, memperkuat efisiensi kerja, dan memberikan solusi jangka panjang untuk pengelolaan SPPD yang lebih efektif.
Penelitian ini menggunakan metode waterfall metode iniadalah salah satu model pengembangan perangkat lunak yang digunakan dalam manajemen proyek untuk mengatur proses pembangunan sistem atau aplikasi. Waterfall adalah pendekatan yang terstruktur dan linier, di mana setiap fase pengembangan harus diselesaikan sepenuhnya sebelum melanjutkan ke fase berikutnya. Model ini mengikuti alur kerja yang ketat dan terurut, mirip seperti air terjun (waterfall) yang mengalir dari atas ke bawah.
Teknik pengumpulan data yang digunakan :
Interview (wawancara)
Teknik ini melakukan wawancara langsung kepada pihak perusahaan mengenai bagaiamana sistem perjalanan dinas yang sedang berjalan di BPVP Sidoarjo.
Obervasi
Pada tahap observasi yaitu tahapan yang melibatkan langsung terhadap bagaimana pengguna berinteraksi dengan sistem yang ada, obervasi ini memungkinkan peneliti untuk mengidentifikasi tantangan dan area perbaikan dalam aplikasi.
Pengumpulan data manual
Melakukan pengumpulan data secara langsung dengan meminta data fisik maupun soft kepada Pegawai yang berkepentingan dengan data tersebut.
Model Waterfall
Tahap – tahap yang digunakan untuk pengembangan dari model waterfall adalah
Requirement Analysis (analisis kebutuhan), System design (perancangan design), Implementation (implementasi) :
Requirement Analysis (analisis kebutuhan)
Pada tahap ini, semua kebutuhan sistem dikumpulkan dan didokumentasikan secara detail. Tim pengembang dan pemangku kepentingan berdiskusi untuk memahami apa saja yang dibutuhkan oleh pengguna akhir. Semua spesifikasi sistem yang akan dibangun harus ditetapkan dengan jelas pada tahap ini.
System design (perancangan design)
Setelah kebutuhan sistem dikumpulkan, tim mulai merancang arsitektur sistem berdasarkan spesifikasi yang telah ditentukan. Pada tahap ini, desain logis dan fisik dari sistem dibangun, termasuk struktur database, antarmuka pengguna, dan sistem aliran data.
Implementation (implementasi)
Figure 1.
Gambar 1. Tahap – tahap model waterfall
Kebutuhan Keamanan Data
Keamanan data sistem perintah perjalanan dinas di BPVP Sidoarjo yaitu dengan metode authentication ini adalah proses untuk memverifikasi identitas seseorang atau sistem, memastikan bahwa pihak yang mengklaim identitas tersebut benar-benar sesuai dengan identitas yang diberikan. Authentication merupakan salah satu aspek penting dalam keamanan sistem informasi dan aplikasi, bertujuan untuk mencegah akses tidak sah dan melindungi data sensitif.
A. Hasil Pengamatan Selama PKL
Hasil dari penelitian di atas di temukan beberapa masalah seperti sistem manual yang masih menggunakan Microsoft exel, tampilan yang kurang menarik, kurangnya fitur otomatisasi, kendala dalam aksesibilitas, serta penginputan data yang terlalu memakan waktu yang lama.
Berikut masalah di atas di sajikan dalam bentuk tabel di bawah ini :
B. Pembahasan
a. Tools
Alat atau sarana yang digunakan untuk mempermudah dan mendukung pekerjaan atau aktivitas tertentu. Tools biasanya merujuk pada perangkat lunak, aplikasi, atau fitur tertentu yang digunakan untuk memproses data dan mendukung kegiatan pengguna secara efisien.
1. Flowgorithm
Pemrogaman visual yang digunakan untuk membuat diagram alur dengan tujuan membantu pemahaman konsep pemrogaman dan logika algoritma. Dengan flowgorithm pengguna dapat menggambar alur logika dari suatu progam.
2. Draw io
Aplikasi yang digunakan untuk membuat diagram alir (flowchart), peta jaringan dan berbagai representasi visual lainnya. Aplikasi ini cocok untuk berbagai keperluan, seperti pembuatan presentasi, pemodelan sistem, desain perangkat lunak dan kolaborasi tim dalam pengembangan proyek.
3. Visual Studio Code (VS Code)
Visual Studio Code adalah integrated development (IDE) yang dikembangkan oleh Microsoft untuk mempermudah software developer mengembangkan aplikasi pada paltform milik Microsoft. Visual Studio Code dapat digunakan untuk mengembangkan aplikasi mobile, web, desktop dan cloud. Visual Studio Code juga multiplatform yang dapat digunakan pada sistem operasi Windows, Linux dan Mac OSX.
4. Vue.js
Vue.js adalah sebuah framework JavaScript progresif yang digunakan untuk membangun antarmuka pengguna (user interface) dan aplikasi web single-page (SPA). Vue dirancang agar mudah digunakan dan diintegrasikan dengan proyek-proyek yang sudah ada. Framework ini menekankan pada pendekatan yang modular dan fleksibel, memungkinkan pengembang untuk mengembangkan aplikasi web yang interaktif dan dinamis.
C. Rancangan Design
1. Use Case Diagram
Alat visual yang digunakan untuk menggambarkan cara sistem berinteraksi dengan pengguna atau entitas eksternal lainnya. Diagram ini membantu kita memahami apa yang dilakukan sistem dan siapa yang terlibat dalam proses tersebut.
Figure 2.
2. Flowchart
diagram yang digunakan untuk menggambarkan langkah-langkah atau proses dalam urutan yang logis. Ini seperti peta visual yang menunjukkan bagaimana sebuah proses atau alur kerja berjalan dari awal hingga akhir. Flowchart membantu kita memahami dan mengikuti proses dengan cara yang jelas dan terstruktur.
Figure 3.
Gambar 3. Flowchart
Figure 4.
Figure 5.
Gambar 4 . Halaman Login dan Register
4. Halaman Dashboard
Di halaman dashboard pada sistem perjadin ini bertujuan menampilkan diagram – diagram yang memuat informasi terkait penginputan apa saja yang sudah dilakukan.
Figure 6.
Gambar 5 . Halaman Dashboard
5. Tampilan Halaman Profile
Tampilan ini bertujuan untuk area dimana pengguna dapat mengelola informasi pribadi pegawai dan mengatur preferensi terkait akun mereka.
Figure 7.
Gambar 6 . Halaman Profile
6. Tampilan Halaman Pegawai
Halaman ini bertujuan untuk menambahkan pegawai yang akan bertugas atau melakukan perjalanan dinas, di menu ini terdapat fitur tambah data, edit data, detail data dan hapus data.
Figure 8.
Gambar 7 . Halaman Pegawai
7. Tampilan Halaman Surat Tugas
Di halaman ini bertujuan untuk menambahkan Surat Tugas Pegawai yang akan bertugas melakukan perjalanan dinas di menu ini terdapat nomor surat tugas, tanggal surat tugas, uraian kegiatan.
Figure 9.
Gambar 8 . Halaman Surat Tugas
8. Tampilan Halaman SPPD
Halaman ini berfungsi untuk mengelola seluruh proses terkait perjalanan dinas, seperti nomor sppd, tanggal sppd, tujuan, tanggal berangkat, tanggal pulang dan lama penugasan
Figure 10.
Gambar 9 . Halaman SPPD
9. Tampilan Halaman Delegasi Pegawai
Halaman ini berfungsi untuk mengelola tugas dan tanggung jawab serta meningkatkan efisiensi operasional di sistem perjalanan dinas.
Figure 11.
10. Tampilan Halaman SPM
Halaman ini bertujuan untuk mengelola seluruh proses terkait dengan pengeluaran dan pembayaran resmi, mulai dari pembuatan dokumen hingga persetujuan dan pelaksaan pembayaran.
Figure 12.
Gambar 11 . Sesudah mengklik Manage Data
Figure 13.
Gambar 12 . Sebelum menginputkan data SPM
Figure 14.
Gambar 13 . Sesudah menginputkan data SPM dan klik simpan
11. Tampilan Halaman SP2D
Halaman ini sama hal nya dengan halaman SPM namun halaman SP2D ini berfungsi untuk mengelola seluruh proses terkait pencairan dana.
Figure 15.
Gambar 1 4 . Sebelum menginputkan data SP2D
Figure 16.
Gambar 15 . Sesudah menginputkan data SP2D dan klik simpan
12. Tampilan Halaman Laporan ST / SPPD
Halaman ini adalah hasil dari proses penginputan surat tugas dan SPPD yang ada dalam menu surat tugas. Halaman ini bertujuan untuk mencetak dari hasil penginputan surat tugas dan SPPD berupa lembar dokumen.
Figure 17.
Figure 18.
Gambar 17 . Lembar dokumen dari SPPD
13. Tampilan Kui tansi
Tampilan pada halaman kwitansi bertujuan untuk memberikan bukti resmi bahwa pembayaran atau penerimaan uang telah dilakukan.
Figure 19.
Gambar 18 . Tampilan Kwitansi pada menu sppd yang sudah di tambahkan pada menu delegasi pegawai
Berdasarkan kesimpulan dari pembahasan yang sudah di kerjakan dalam perancangan sistem perintah perjalanan dinas di BPVP Sidoarjo secara garis besar perancangan ini berfokus pada front-end desaign atau (perancangan front-end) berbasis website, aplikasi ini dirancang menggunakan framework vue.js, aplikasi atau sistem surat perjalanan dinas ini bertujuan untuk mempermudah kerja admin pegawai dalam penginputan data-data pegawai yang akan bertugas secara efisien dan tidak memerlukan waktu penginputan yang lama. Dan juga memperbaik tampilan yang sebelumnya masih dengan tampilan Microsoft excel ke dalam bentuk sistem yang mudah di pahami dan efektif. Sistem ini sudah dirancang dan dibangun secara kompleks dan responsive ketika di gunakan di semua perangkat antara lain handphone, tablet, dan juga laptop.
Ucapan Terima Kasih
Saya berterimakasih sebesar – besar nya kepada ibu Farhatul Muwahidah, S.H.I selaku Kepala Sub bagian Umum BPVP Sidoarjo, dan juga bapak Wahyu Winarno, S.T selaku Kepala Sub bagian Produktivitas yang sudah menerima saya untuk melaksanakan kegiatan Praktik Kerja Lapangan selama satu bulan, dan saya juga mendapatkan banyak pengetahuan dan manfaat tentang sistem apa saja yang ada di dalam BPVP Sidoarjo, dan saya juga berterima kasih kepada dosen pembimbing saya bapak Irwan A. Kautsar, S.Kom., M.Kom., Ph.D yang sudah membimbing saya selama satu bulan dengan sabar dan juga memberikan panduan atau masukan dalam penyusunan artikel. Dan demikian pula saya mengucapkan terimakasih untuk pihak – pihak lain yang mendukung dan terlibat dalam kegiatan Praktik Kerja Lapangan ini.
Pratama et al., “Rancang Bangun Aplikasi Perjalanan Dinas berbasis Laravel dan Vue (Studi Kasus: Balai Guru Penggerak Kalbar),” JIFOTECH (Journal of Information Technology), vol. 3, no. 2, pp. 1-8, 2023, doi: 10.47080/jifotech.v3i2.757.
D. Fikri Alfiansyah and J. Sasongko Wibowo, “Sistem Pengelolaan Surat Perintah Perjalanan Dinas (SPPD) PT Kawasan Industri Wijayakusuma Official Travel Order Management System (TOMS) PT Kawasan Industri Wijayakusuma,” Journal of Information Technology and Computer Science (INTECOMS), vol. 6, no. 2, pp. 633-640, 2023, doi: 10.31539/intecoms.v6i2.7037.
P. Savitri and I. S. Amaliah, “Rancang Bangun Sistem Perjalanan Dinas Sekretariat DPRD Provinsi Jawa Barat,” Jurnal Infotronik, vol. 2, no. 1, pp. 30-38, 2017, doi: 10.32801/jinh.v2i1.30.
M. Aldin Risaldi and P. Astuti, “Perancangan Sistem Informasi Menggunakan Metode Waterfall untuk Pengajuan Cuti dan Perjalanan Dinas pada PT. IGTAX Ekuseru Indonesia,” Jurnal Buffer Informatika, vol. 6, no. 2, pp. 35-44, 2020, doi: 10.25134/buffer.v6i2.3120.
Y. Mardoni and E. Arif, “Rancangan Aplikasi Surat Tugas dan Surat Perintah Perjalanan Dinas Berbasis Website,” Jurnal Pengkajian dan Penerapan Teknik Informasi, vol. 10, no. 2, pp. 88-95, 2021, doi: 10.33387/jpti.v10i2.3100.
N. Purnomo Aji and I. Santoso, “Pembangunan Sistem Informasi Surat Perjalanan Dinas Berbasis Website (Studi Kasus: BPS Kabupaten Sragen),” Prosiding Seminar Nasional Official Statistics, vol. 2021, no. 1, pp. 415-424, 2021, doi: 10.34123/semnasoffstat.v2021i1.1517.
R. A. Setyawan and A. B. Prasetyo, “Optimization of Web Front-End Architecture Using Vue.js for Enterprise Resource Planning Systems,” International Journal of Computer Applications, vol. 183, no. 42, pp. 15-22, 2021, doi: 10.5120/ijca2021921800.
M. I. Hanafri, A. S. Husain, and R. A. Pratama, “Web-Based Official Document Management System Using Waterfall Model,” Journal of Applied Computer Science and Technology, vol. 3, no. 1, pp. 45-52, 2022, doi: 10.52643/jacst.v3i1.2100.
F. A. Permana and E. S. Wijaya, “User Interface and User Experience Optimization for Administrative Web Applications,” IEEE Access, vol. 10, pp. 41230-41241, 2022, doi: 10.1109/ACCESS.2022.3168901.
H. K. Taufik and S. D. Nurhayati, “Design and Implementation of E-SPPD Application for Local Government Operations,” Journal of Information Systems and Informatics, vol. 5, no. 2, pp. 210-221, 2023, doi: 10.51519/journalisi.v5i2.480.
B. Putra and M. R. Lestari, “Performance Analysis of Vue.js Single Page Applications in Administrative Workflows,” ACM Transactions on Management Information Systems, vol. 14, no. 3, pp. 1-18, 2023, doi: 10.1145/3589000.
S. Rahmawati and T. A. Kurniawan, “Usability Evaluation of Web-Based Official Travel Reporting Systems in Public Sectors,” Procedia Computer Science, vol. 225, pp. 1102-1110, 2023, doi: 10.1016/j.procs.2023.10.100.
D. A. Prasetya and W. Maharani, “Implementation of Role-Based Authentication in Web Applications for Document Security,” IEEE Transactions on Engineering Management, vol. 71, pp. 3105-3114, 2024, doi: 10.1109/TEM.2024.3351200.
G. N. A. Suryawan and K. O. Widhiastra, “Modern Front-End Framework Adoption in E-Government Systems Transformation,” Government Information Quarterly, vol. 41, no. 1, pp. 101890, 2024, doi: 10.1016/j.giq.2024.101890.
M. F. Hasan and R. E. Putra, “Automated Official Travel Document Generator with Export Features using JavaScript Frameworks,” Applied Computer Science, vol. 20, no. 2, pp. 78-89, 2024, doi: 10.35784/acs-2024-015.