Optimization Of The Process Of Inputting Official Travel Orders (Sppd) Through An Application With A User Friendly Interface In Bpvp Sidoarjo (Case Study : Front-End Design)Optimalisasi Proses Penginputan Surat Perintah Perjalanan Dinas (Sppd) Melalui Aplikasi Dengan Antarmuka Ramah Pengguna Di Bpvp Sidoarjo (Studi Kasus : Perancangan Front-End)KautsarIrwan Alnarusirwan@umsida.ac.idAnggoroGilang Dwiirwan@umsida.ac.idProgram Studi Informatika, Fakultas Sains dan Teknologi, Universitas Muhammadiyah SidoarjoIndonesiaProgram Studi Informatika, Fakultas Sains dan Teknologi, Universitas Muhammadiyah SidoarjoIndonesia0610202607102026Pendahuluan
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.
Metode
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
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)
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.
Hasil dan Pembahasan
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 :
Permasalahan
Penyelesaian
Sistem masih manual menggunakan Microsoft exel.
Mengganti sistem manual dengan sistem digital berbasis web atau aplikasi yang memungkinkan penginputan data secara cepat dan efisien.
Tampilan yang kurang menarik.
Membuat antarmuka / interface yang sederhana, menarik dan mudah dipahami.
Kurangnya fitur otomatisasi.
Menambahkan fitur otomatisasi untuk pembuatan laporan perjalanan dinas, kalkulasi biaya, serta notifikasi otomatis, guna mempercepat dan mengurangi kesalahan dalam proses administrative.
Penginputan data yang terlalu memakan waktu yang lama.
Dengan sistem berbasis form digital, proses penginputan data akan menjadi lebih cepat dan efisien.
Kendala dalam eksesibilitas.
Sistem dapat diakes dari berbagai perangkat, baik komputer, tablet, maupun smartphone sehingga pegawai dapat mengelola data perjalanan dinas darimana saja.
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.
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.
Gambar 3.Flowchart
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.
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.
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.
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.
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
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.
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.
Gambar 11.Sesudah mengklik Manage Data
Gambar 12.Sebelum menginputkan data SPM
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.
Gambar 14.Sebelum menginputkan data SP2D
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.
Gambar 17.Lembar dokumen dari SPPD
13. Tampilan Kuitansi
Tampilan pada halaman kwitansi bertujuan untuk memberikan bukti resmi bahwa pembayaran atau penerimaan uang telah dilakukan.
Gambar 18.Tampilan Kwitansipada menu sppd yang sudah di tambahkan pada menu delegasi pegawai
Simpulan
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.