Implementation of UI/UX Design and Front-end Development on Web-Based Audit System at PT Aneka Coffee Industry Implementasi Desain UI/UX dan Pengembangan Front-end pada Sistem Audit Berbasis Web di PT Aneka Coffee Industry Zani Yurida suprianto@umsida.ac.id Suprianto suprianto@umsida.ac.id Program Studi Informatika FST-Umsida Indonesia Program Studi Informatika FST-Umsida Indonesia 06 10 2026 07102026 Pendahuluan

Industri kopi memiliki peran strategis dalam perekonomian nasional Indonesia. PT Aneka Coffee Industry, sebagai salah satu perusahaan terkemuka di sektor pengolahan kopi instan, menghadapi tantangan operasional yang semakin kompleks seiring dengan pertumbuhan permintaan pasar domestik dan internasional. Di tengah perkembangan ini, audit internal menjadi elemen penting dalam menjaga akurasi dan transparansi proses operasional perusahaan. Namun, saat ini PT Aneka Coffee Industry masih mengandalkan sistem audit manual yang kurang efisien, rawan kesalahan, dan membutuhkan waktu lama dalam pelaporannya. Ketergantungan pada sistem manual ini dapat memperlambat proses pengambilan keputusan dan menurunkan daya saing perusahaan di pasar global.

Pengembangan sistem audit berbasis web merupakan solusi potensial untuk mengatasi masalah ini. Sistem ini memungkinkan otomatisasi proses audit, mengurangi risiko kesalahan manusia, dan menyediakan akses real-time ke data audit. Hal ini tidak hanya akan meningkatkan efisiensi operasional tetapi juga memperkuat akurasi dalam pelaporan audit, sehingga mendukung pengambilan keputusan yang lebih cepat dan tepat.

Dalam pengembangan sistem berbasis teknologi, dua elemen kunci yang harus diperhatikan adalah User Interface (UI) dan User Experience (UX). UI berfokus pada tampilan visual aplikasi, seperti tata letak, warna, dan tipografi, yang bertujuan untuk membuat interaksi pengguna lebih nyaman dan menarik. Sementara itu, UX mencakup seluruh aspek pengalaman pengguna saat berinteraksi dengan sistem, mulai dari kemudahan navigasi hingga kepuasan pengguna. Kedua elemen ini sangat penting dalam memastikan sistem audit yang efektif dan efisien, terutama ketika diakses melalui berbagai perangkat seperti desktop dan mobile.

Pengembangan front-end menjadi bagian vital dalam proses ini. Front-end adalah bagian dari sistem yang berinteraksi langsung dengan pengguna, menggunakan teknologi seperti HTML, CSS, dan JavaScript. Dengan front-end yang responsif dan user-friendly, pengalaman pengguna dalam mengakses sistem audit akan lebih intuitif dan mendukung efisiensi proses audit itu sendiri.

Kajian literatur menunjukkan bahwa banyak perusahaan telah beralih ke sistem audit berbasis teknologi untuk meningkatkan efisiensi dan akurasi audit internal. Penelitian oleh Firmansyah et al. (2024) menunjukkan bahwa penerapan teknologi digital seperti virtualisasi audit dapat mengurangi risiko kesalahan manusia dan mempercepat pengambilan keputusan berbasis data. Selain itu, Martusa et al. (2020) menekankan pentingnya audit berkelanjutan (continuous auditing), yang memungkinkan pemantauan dan pembaruan data audit secara real-time, sehingga meminimalkan potensi kesalahan.

Namun, aspek penting lain yang perlu diperhatikan adalah pengalaman pengguna (UX) dan antarmuka pengguna (UI) yang responsif. Penelitian sebelumnya sering kali mengabaikan aspek ini, meskipun penggunaan sistem audit oleh pemangku kepentingan dengan literasi teknologi yang berbeda-beda membutuhkan antarmuka yang intuitif dan mudah digunakan. Analisis gap dari penelitian terdahulu mengungkapkan bahwa meskipun banyak sistem audit digital telah dikembangkan, aspek UI/UX sering kali diabaikan, terutama dalam pengembangan sistem yang responsif di berbagai perangkat.

Oleh karena itu, proyek ini bertujuan untuk mengatasi keterbatasan tersebut dengan mengembangkan sistem audit internal berbasis web di PT Aneka Coffee Industry. Sistem ini akan memadukan perancangan UI/UX yang intuitif dan pengembangan front-end yang responsif, dengan tujuan meningkatkan efisiensi audit melalui otomatisasi proses, mengurangi risiko kesalahan manusia, serta mempermudah akses data audit secara real-time di berbagai perangkat.

Tujuan utama dari proyek ini adalah untuk merancang dan mengembangkan sistem audit internal berbasis web yang dapat meningkatkan efisiensi operasional audit, memberikan antarmuka pengguna yang ramah dan responsif, serta memfasilitasi pengambilan keputusan yang lebih akurat melalui integrasi data yang lebih baik..

 Metode

2.1 Subjek Perancangan

Subjek perancangan dalam proyek ini adalah sistem audit internal berbasis web yang diterapkan di PT Aneka Coffee Industry. Fokus utama dari sistem ini adalah untuk mengotomatisasi proses audit internal yang sebelumnya dilakukan secara manual, dengan tujuan meningkatkan efisiensi, akurasi, dan transparansi dalam pengelolaan data audit perusahaan.

2.2 Bahan dan Platform yang digunakan

Dalam pengembangan sistem ini, digunakan berbagai bahan, perangkat lunak, dan teknologi untuk mendukung setiap tahap pengembangan, meliputi:

Figma

Figma adalah alat desain yang digunakan untuk pengembangan antarmuka pengguna (UI) dan pengalaman pengguna (UX). Alat ini mendukung kolaborasi real-time, memungkinkan tim desain untuk bekerja bersama secara efektif dan membuat prototipe interaktif. Figma juga menawarkan berbagai fitur yang mendukung desain responsif dan pengujian antarmuka secara menyeluruh.

Canva

Canva digunakan untuk pembuatan desain grafis tambahan, seperti elemen visual dan materi presentasi. Dengan berbagai template dan alat yang mudah digunakan, Canva memungkinkan pembuatan desain yang menarik dan konsisten secara cepat dan efisien.

Visual Studio Code

Visual Studio Code adalah editor kode yang digunakan untuk penulisan dan pengeditan kode sumber. Editor ini menyediakan fitur penyorotan sintaksis, debugging, dan ekstensi untuk mendukung pengembangan front-end dengan berbagai bahasa pemrograman dan framework.

Web Browser

Web browser, seperti Google Chrome atau Mozilla Firefox, digunakan untuk menguji dan memverifikasi tampilan serta fungsionalitas aplikasi web. Browser ini memungkinkan evaluasi interaktivitas dan kompatibilitas aplikasi web di berbagai platform dan perangkat.

HTML, CSS, dan JavaScript

Bahasa pemrograman yang digunakan untuk membangun struktur dan tampilan halaman web. HTML digunakan untuk membuat elemen struktural, CSS untuk tata letak visual, dan JavaScript untuk interaktivitas.

Bootstrap

Framework CSS yang digunakan untuk mempercepat pengembangan UI yang responsif. Bootstrap memudahkan pembuatan layout yang adaptif, sehingga sistem dapat berjalan di berbagai ukuran layar.

2.3 Tahapan Perancangan Proyek

2.3.1 Analisis Kebutuhan

Tahap pertama dalam pengembangan sistem audit berbasis web adalah analisis kebutuhan. Pada tahap ini, wawancara mendalam dilakukan dengan staf audit dan pemangku kepentingan di PT Aneka Coffee Industry untuk memahami masalah yang dihadapi dalam proses audit manual. Masalah yang sering dihadapi antara lain adalah lambatnya proses audit, tingginya potensi kesalahan pencatatan, serta kurangnya integrasi antar-departemen. Wawancara juga digunakan untuk mengidentifikasi fitur-fitur penting yang dibutuhkan dalam sistem baru, seperti pencarian laporan yang cepat, pengelolaan data yang mudah, serta akses laporan audit secara real-time.

Selain wawancara, dilakukan juga studi pustaka yang mengumpulkan teori dan data sekunder terkait proses audit berbasis teknologi. Studi pustaka ini memberikan dasar teori untuk mendukung pengembangan sistem baru, termasuk metode terbaik dalam menerapkan audit digital yang efisien dan akurat..

1 Diagram alur proses analisis kebutuhan.

2.3.2 Pengumpulan Data

Pengumpulan data dilakukan melalui dua metode utama:

1) Metode Wawancara

Wawancara dilakukan dengan berbagai pihak terkait di PT Aneka Coffee Industry, termasuk petugas lapangan dan staf yang terlibat dalam proses audit serta infrastruktur jaringan komputer. Wawancara ini dirancang untuk mendapatkan wawasan mendalam mengenai kebutuhan dan tantangan yang dihadapi dalam sistem audit manual yang saat ini digunakan. Informasi yang diperoleh melalui wawancara ini memberikan pandangan praktis yang sangat berharga untuk memahami kelemahan sistem yang ada serta ekspektasi dari sistem baru yang akan dikembangkan.

2) Metode Data Sekunder

Metode pengumpulan data sekunder. Studi ini melibatkan pencarian dan penelaahan literatur yang relevan, termasuk buku-buku, artikel ilmiah, dan sumber online lainnya yang berkaitan dengan pengembangan sistem audit berbasis website.

2.3.3 Perancangan UI/UX

Setelah tahap analisis kebutuhan selesai dilakukan, langkah berikutnya dalam pengembangan sistem audit internal berbasis web adalah perancangan UI/UX. Pada tahap ini, desain antarmuka pengguna (User Interface/UI) dan pengalaman pengguna (User Experience/UX) dikembangkan menggunakan Figma, sebuah alat desain yang mendukung kolaborasi secara real-time dan memungkinkan pembuatan prototipe interaktif.

Proses perancangan UI/UX ini dimulai dengan pembuatan wireframe atau kerangka dasar dari tampilan sistem. Wireframe ini membantu menentukan tata letak elemen-elemen utama pada halaman, seperti navigasi, formulir input, tabel data, dan fitur pencarian. Gambar di bawah ini menunjukkan contoh wireframe yang dikembangkan, memperlihatkan penempatan elemen utama dengan jelas sebelum desain visual lengkap dibuat.

2 Tampilan Wireframe dari Sistem Audit Internal.

Fokus utama dalam perancangan ini adalah menciptakan antarmuka yang intuitif, di mana pengguna dapat dengan mudah menemukan fitur yang mereka butuhkan tanpa harus mengalami kesulitan navigasi. Kemudahan penggunaan sangat diutamakan mengingat sistem ini akan digunakan oleh staf dengan berbagai tingkat pemahaman teknologi.

Desain prototipe interaktif kemudian dibuat untuk memvisualisasikan alur kerja dari sistem audit ini. Pengguna dapat melihat bagaimana interaksi dengan elemen-elemen UI terjadi, termasuk bagaimana data audit dimasukkan dan ditampilkan. Gambar 2 menunjukkan prototipe interaktif yang dirancang menggunakan Figma, di mana elemen-elemen seperti form input, tabel data audit, dan menu navigasi telah ditempatkan dengan tata letak yang rapi dan terstruktur

3 Tampilan Prototipe UI

Pada tahap ini, dilakukan uji pengguna (usability testing) secara iteratif, di mana prototipe diujikan pada calon pengguna yang nantinya akan menggunakan sistem ini. Umpan balik yang diterima dari pengguna sangat berharga dalam menyempurnakan desain. Proses iteratif ini terus dilakukan hingga prototipe yang dihasilkan sesuai dengan kebutuhan pengguna dan telah meminimalkan kesalahan interaksi.

Desain responsif menjadi salah satu aspek penting dalam perancangan ini, mengingat sistem harus bisa diakses dengan baik di berbagai perangkat, baik desktop maupun mobile. Gambar menunjukkan contoh tampilan responsif pada perangkat mobile dan desktop, di mana antarmuka pengguna dioptimalkan untuk berbagai ukuran layar. Dengan menggunakan grid responsif dan komponen yang dapat beradaptasi dengan berbagai ukuran layar, sistem ini memastikan bahwa pengalaman pengguna tetap optimal di berbagai platform. Tampilan yang sederhana dan konsisten juga diterapkan untuk mempermudah pengguna dalam beradaptasi dengan sistem, baik saat diakses melalui layar besar seperti desktop, maupun layar kecil seperti tablet atau smartphone.

4 Tampilan Responsif pada Desktop

Melalui pendekatan perancangan yang iteratif dan berbasis umpan balik pengguna, desain UI/UX sistem audit internal ini mampu menciptakan pengalaman pengguna yang optimal, memastikan bahwa sistem dapat dioperasikan dengan mudah dan efisien, serta mendukung berbagai perangkat yang digunakan oleh staf PT Aneka Coffee Industry.

2.3.4 Pengembangan Front-End dan Sistem Login

Setelah desain UI/UX disetujui oleh tim pengembang dan melalui validasi dengan pengguna, langkah berikutnya adalah pengembangan front-end. Front-end adalah bagian yang langsung diakses oleh pengguna, dan oleh karena itu sangat penting untuk memastikan bahwa sistem ini responsif, mudah digunakan, serta dapat diakses di berbagai perangkat.

Elemen-elemen utama yang dikembangkan dalam tahap ini meliputi:

1) Navigasi

Sistem navigasi yang jelas dan mudah digunakan untuk memastikan bahwa pengguna dapat menjelajahi berbagai fitur sistem dengan cepat dan efisien.

2) Tabel Dinamis

Tabel untuk menampilkan data audit dengan fitur pengurutan dan pemfilteran data, mempermudah pengguna dalam menemukan dan menganalisis informasi penting secara real-time.

3) Interaktivitas Lainnya

Berbagai fitur interaktif lainnya dikembangkan untuk meningkatkan pengalaman pengguna, seperti fitur hover pada tabel, tombol aksi cepat, serta pengelolaan halaman yang dinamis.

2.3.4.1 Pengembangan Front-End:

Pada tahap ini, pengembangan front-end dilakukan menggunakan HTML, CSS, dan JavaScript:

HTMLDigunakan untuk membangun struktur halaman web, termasuk elemen-elemen penting seperti formulir login dan tabel untuk menampilkan data audit. HTML juga menyediakan elemen navigasi yang memudahkan pengguna menjelajahi sistem.

CSS Berfungsi untuk mengatur tata letak dan tampilan visual halaman, memastikan desain yang dibuat sebelumnya di Figma dapat diwujudkan secara konsisten di sistem web. CSS memastikan tampilan halaman login dan dashboard yang responsif di berbagai perangkat.

Bootstrap Framework ini digunakan untuk mempercepat pengembangan tata letak responsif. Bootstrap memudahkan pembuatan elemen antarmuka yang beradaptasi secara otomatis dengan berbagai ukuran layar, mulai dari desktop hingga perangkat mobile, memastikan sistem tetap fungsional dan mudah digunakan.

Gambar 5 di bawah ini menunjukkan cuplikan kode HTML untuk bagian tampilan tabel hasil audit yang dibuat menggunakan Bootstrap dan JavaScript. Tabel ini dapat menampilkan data secara dinamis, memungkinkan pengguna untuk melihat data audit secara real-time dengan fitur filter dan sorting yang interaktif.

5 Cuplikan kode HTML untuk komponen Report

2.3.4.2 Implementasi Sistem Login

Sistem login dirancang untuk memverifikasi kredensial pengguna dengan aman. Pengguna memasukkan email dan password mereka, yang kemudian dikirim ke server melalui POST request. Di sisi server, PHP digunakan untuk memproses dan memverifikasi kredensial. Jika kredensial valid, sistem akan membuat sesi pengguna menggunakan variabel $_SESSION, yang menyimpan user_id dan role (peran pengguna). Berdasarkan peran ini, pengguna akan diarahkan ke halaman yang sesuai:

Admin memiliki akses penuh untuk manajemen pengguna, termasuk menambah, mengedit, dan menghapus akun pengguna lain.

Auditor memiliki akses terbatas yang hanya mencakup halaman dan data yang relevan dengan tugas audit mereka.

Keamanan sistem login dijaga dengan hashing password menggunakan algoritma bcrypt, yang memastikan password disimpan dalam bentuk hash untuk melindungi data dari penyalahgunaan jika terjadi kebocoran informasi.

Role-Based Access Control (RBAC) diterapkan untuk mengelola hak akses berdasarkan peran pengguna. Dengan RBAC, sistem menjamin bahwa:

Admin memiliki akses ke semua fitur sistem, termasuk manajemen pengguna dan pengaturan administratif.

Auditor hanya dapat mengakses informasi dan fitur yang relevan dengan tugas mereka, tanpa hak untuk mengelola data atau pengguna lain.

 6 use case sistem login

Gambar 6 menggambarkan interaksi antara dua aktor, yaitu Admin dan Auditor/Pengguna, dengan fungsionalitas yang berbeda dalam ACI Audit Portal. Admin memiliki akses penuh untuk mengelola pengguna, termasuk melihat, menambah, mengedit, dan menghapus pengguna, serta melihat riwayat login. Di sisi lain, Auditor hanya memiliki akses terbatas, yakni login, melihat halaman yang relevan, dan logout. Sistem ini menggunakan Role-Based Access Control (RBAC) untuk memastikan bahwa Admin dapat mengakses semua fitur manajemen pengguna, sementara Auditor hanya dapat mengakses data terkait tugas audit mereka, tanpa hak untuk mengelola pengguna lain. Dengan RBAC, sistem menjamin keamanan dan distribusi akses yang tepat sesuai dengan peran pengguna.

2.3.5 Uji Website dan Evaluasi Sistem

Tahap uji aplikasi dilakukan setelah pengembangan front-end dan back-end sistem selesai. Pengujian ini mencakup beberapa aspek penting, seperti fungsi, responsivitas, dan kompatibilitas. Uji aplikasi dilakukan dengan melibatkan berbagai perangkat, seperti desktop, laptop, tablet, dan smartphone, untuk memastikan bahwa sistem responsif dan dapat diakses di berbagai resolusi layar. Pengujian juga dilakukan di berbagai browser, termasuk Google Chrome, Mozilla Firefox, dan Microsoft Edge, untuk memastikan kompatibilitas lintas platform.

Proses pengujian meliputi:

Pengujian fungsionalitas

Memastikan semua fitur berjalan dengan benar, seperti pencarian laporan, pengurutan, tampilan tabel, dan fitur interaktif lainnya.

Pengujian responsivitas

Memastikan tampilan antarmuka berfungsi dengan baik di berbagai ukuran layar dan perangkat.

Pengujian kompatibilitas lintas browser

Mengidentifikasi potensi masalah yang mungkin muncul pada browser tertentu dan memastikan antarmuka tetap konsisten.

Pengujian kinerja

Mengukur kecepatan pemuatan halaman dan respons sistem saat menangani banyak data audit secara real-time.

Evaluasi melibatkan pengguna akhir, termasuk staf PT Aneka Coffee Industry, untuk memastikan bahwa sistem memenuhi kebutuhan mereka. Pengguna diminta untuk mencoba sistem dalam skenario nyata, seperti mengakses laporan audit, mengelola data, dan menavigasi fitur sistem. Umpan balik pengguna sangat penting dalam tahap ini untuk mengidentifikasi masalah teknis atau pengalaman pengguna (UX) yang perlu diperbaiki sebelum sistem diimplementasikan secara penuh.

2.3.6 Rencana Implementasi

Setelah sistem berhasil diuji dan dievaluasi, tahap berikutnya yang direncanakan adalah implementasi. Pada tahap ini, sistem audit internal berbasis web akan diintegrasikan ke dalam lingkungan operasional PT Aneka Coffee Industry. Rencana implementasi akan dilakukan secara bertahap untuk mengurangi risiko gangguan operasional. Proses ini mencakup beberapa langkah yang telah dirancang:

1) Migrasi data audit lama

Data audit yang sebelumnya dikelola secara manual atau menggunakan sistem lama akan dimigrasikan ke dalam sistem baru. Migrasi data akan dilakukan dengan hati-hati untuk memastikan bahwa tidak ada data yang hilang atau rusak selama proses transfer.

2) Pelatihan pengguna

Pengguna akhir, termasuk auditor dan staf terkait, akan diberikan pelatihan tentang bagaimana menggunakan sistem yang baru. Pelatihan ini akan mencakup penggunaan antarmuka sistem, cara mencari laporan, serta fitur lain yang diperlukan untuk mendukung audit internal.

3) Implementasi bertahap

Implementasi akan dilakukan dalam beberapa fase untuk memastikan bahwa sistem berjalan dengan baik pada setiap tahap. Pada fase pertama, hanya beberapa fitur inti yang akan diimplementasikan, dan setelah sistem berfungsi dengan baik, fitur tambahan akan diperkenalkan secara bertahap.

4) Pemantauan dan troubleshooting

Setelah implementasi awal, tim teknis akan memantau kinerja sistem untuk memastikan bahwa tidak ada masalah teknis atau bug yang muncul. Setiap masalah yang terdeteksi akan segera diperbaiki untuk memastikan kelancaran operasional perusahaan.

2.3.7 Pemeliharaan Rutin

Setelah implementasi berhasil, tahap terakhir adalah pemeliharaan rutin untuk memastikan bahwa sistem audit internal tetap berfungsi dengan optimal. Pemeliharaan rutin mencakup beberapa aspek penting:

1) Pembaruan sistem secara berkala

Pembaruan sistem dilakukan untuk menambah fitur baru, memperbaiki bug, atau meningkatkan kinerja sistem. Pembaruan juga mencakup peningkatan pada antarmuka pengguna berdasarkan umpan balik dari staf audit.

2) Perbaikan bug

Setiap bug atau masalah teknis yang ditemukan setelah implementasi diidentifikasi dan diperbaiki secara cepat. Tim pengembang bertanggung jawab untuk memastikan bahwa bug tidak mengganggu operasional perusahaan.

3) Peningkatan fungsionalitas

Berdasarkan umpan balik pengguna, fitur dan fungsionalitas sistem terus ditingkatkan. Hal ini mencakup penambahan fitur baru yang dapat membantu meningkatkan efisiensi proses audit atau memberikan nilai tambah lainnya.

4) Keamanan data

Salah satu prioritas utama dalam pemeliharaan adalah menjaga keamanan data. Sistem audit menangani data yang bersifat sensitif, sehingga langkah-langkah keamanan harus diperkuat. Ini termasuk pembaruan pada sistem keamanan, enkripsi data, serta kontrol akses yang lebih ketat untuk memastikan bahwa hanya pihak yang berwenang yang dapat mengakses data audit.

5) Rencana cadangan dan pemulihan data (backup and recovery)

Untuk mengantisipasi kemungkinan gangguan atau kegagalan sistem, rencana cadangan dan pemulihan data harus diterapkan. Data audit secara rutin akan dicadangkan ke server terpisah atau layanan cloud guna memastikan bahwa semua data audit yang penting tetap aman. Cadangan ini dijadwalkan secara berkala, misalnya harian atau mingguan, tergantung pada tingkat kritisnya data.

Selain itu, prosedur recovery (pemulihan) diimplementasikan untuk memungkinkan pemulihan data dengan cepat jika terjadi gangguan, seperti kerusakan sistem atau kegagalan server. Sistem pemulihan ini mencakup penggunaan redundansi server atau failover server, yang memungkinkan transfer otomatis ke server cadangan tanpa gangguan signifikan terhadap operasional perusahaan.

Dengan adanya rencana cadangan dan pemulihan yang matang, PT Aneka Coffee Industry dapat memastikan bahwa data audit tetap terlindungi dari risiko kehilangan akibat kegagalan sistem atau kerusakan teknis, serta dapat dipulihkan dengan cepat jika terjadi gangguan.

 Hasil dan Pembahasan

3.1 Hasil Pengujian di Perangkat Mobile dan Desktop

Pengujian sistem audit berbasis web ini dilakukan di dua platform utama, yakni perangkat mobile dan desktop. Pengujian ini dilakukan dengan skenario di mana pengguna mengakses fitur utama seperti pencarian laporan, pengunduhan dokumen audit, dan pengelolaan data audit di kedua platform. Hasil pengujian menunjukkan bahwa sistem berjalan dengan lancar di kedua platform, dengan antarmuka yang responsif dan mudah digunakan.

Pada perangkat mobile, sistem menunjukkan kemampuan adaptasi terhadap berbagai ukuran layar. Namun, ada beberapa catatan kecil terkait dengan tata letak yang perlu disesuaikan pada orientasi lanskap, seperti posisi tombol aksi yang kadang terlalu dekat dengan elemen lain. Meski begitu, hasil pengujian di perangkat mobile tetap positif, menunjukkan bahwa sebagian besar fitur dapat diakses tanpa hambatan teknis yang berarti. Di sisi desktop, antarmuka terlihat lebih luas dan mendukung navigasi yang lebih mudah, terutama pada halaman yang menampilkan data laporan audit dalam format tabel.

Menurut Wahyudin dan Rahayu (2020), sistem audit berbasis web yang responsif dapat meningkatkan aksesibilitas dan kenyamanan pengguna, terutama dalam lingkungan kerja yang memerlukan fleksibilitas platform. Hal ini terlihat dalam pengujian, di mana pengguna dapat mengakses sistem audit melalui desktop di kantor maupun perangkat mobile di lapangan, memperkuat fleksibilitas sistem dalam mendukung tugas-tugas audit.

7 Tampilan antarmuka pada perangkat desktop

8 Tampilan antarmuka pada perangkat mobile

3.2 Peningkatan Efisiensi dan Kemudahan Akses

Salah satu tujuan utama pengembangan sistem ini adalah meningkatkan efisiensi operasional dalam proses audit, khususnya dalam mengakses dan mengelola data audit. Berdasarkan hasil pengujian, pengguna dapat mengakses data audit dengan waktu yang lebih singkat dibandingkan metode manual sebelumnya. Pengguna melaporkan bahwa waktu pencarian laporan berkurang hingga 50%, terutama berkat penggunaan fitur pencarian dan filter yang diimplementasikan di dalam sistem.

Fitur filter laporan memungkinkan pengguna untuk menyortir laporan berdasarkan kategori seperti departemen, tanggal audit, dan status audit. Fitur ini diharapkan dapat mengurangi waktu yang dibutuhkan oleh auditor untuk menemukan laporan yang spesifik. Selain itu, pengunduhan laporan audit juga dapat dilakukan langsung dari sistem dengan hanya beberapa klik, sebuah proses yang sebelumnya memerlukan waktu lebih lama dengan metode manual.

Temuan ini mendukung penelitian Firmansyah et al. (2024) yang menyatakan bahwa penerapan teknologi dalam proses audit mampu mempercepat pengolahan data dan pengambilan keputusan manajerial. Dengan integrasi data lintas departemen, auditor tidak lagi harus meminta data dari berbagai sumber, melainkan dapat langsung mengakses data yang diperlukan dari satu platform. Ini memberikan kontribusi signifikan terhadap efisiensi kerja dan pengurangan beban administratif.

9 Tampilan fitur pencarian dan filter laporan audit di perangkat desktop.

3.3 Responsivitas dan Tampilan UI di Berbagai Perangkat

Tampilan antarmuka pengguna (UI) menjadi salah satu aspek penting yang dinilai dalam pengujian ini. Penggunaan framework Bootstrap memberikan keuntungan dalam hal responsivitas, memungkinkan sistem untuk beradaptasi secara otomatis terhadap berbagai ukuran layar perangkat. Pada perangkat desktop, tampilan UI terlihat optimal dengan penggunaan ruang yang lebih luas untuk menampilkan data dalam bentuk tabel dan grafik. Pengguna juga merasa nyaman dengan tata letak yang bersih dan terorganisir, sehingga memudahkan navigasi antarhalaman.

Namun, pada perangkat mobile, beberapa penyesuaian tata letak masih diperlukan, terutama dalam orientasi lanskap. Pengguna melaporkan bahwa beberapa elemen UI, seperti tombol aksi dan menu, masih terlalu berdekatan dalam mode lanskap. Meski demikian, hal ini tidak mengganggu penggunaan keseluruhan, karena sistem tetap berjalan dengan baik dan responsif.

Penelitian oleh Wahyudin dan Rahayu (2020) menunjukkan bahwa desain UI yang responsif dapat meningkatkan produktivitas pengguna, terutama dalam lingkungan yang memerlukan akses cepat ke data penting. Dalam konteks ini, responsivitas sistem audit berbasis web telah berhasil memenuhi kebutuhan akses multi-perangkat, meskipun beberapa perbaikan kecil masih diperlukan untuk meningkatkan kenyamanan pengguna pada perangkat mobile.

10 Tampilan halaman Berandat di perangkat desktop.

11 Tampilan halaman beranda di perangkat mobile.

3.4 Hasil Implementasi Sistem Login dan Kontrol Hak Akses

Pengembangan sistem login dan kontrol hak akses berbasis peran dilakukan untuk memastikan keamanan dan efisiensi akses pengguna ke dalam sistem. Berdasarkan pengujian yang dilakukan, sistem login dapat berfungsi sesuai dengan tujuan, yakni memverifikasi kredensial pengguna secara akurat dan membatasi akses berdasarkan peran.

3.4.1 Validasi Krediensial

Pada tahap autentikasi, sistem login memverifikasi kredensial pengguna melalui POST request. Hasil pengujian menunjukkan bahwa sistem dapat mengidentifikasi kredensial yang valid maupun tidak valid dengan tingkat akurasi yang tinggi. Ini dicapai melalui penerapan PHP dan hashing password dengan algoritma bcrypt. Algoritma bcrypt dipilih karena sifatnya yang adaptif, yang memungkinkan peningkatan kompleksitas hashing seiring perkembangan perangkat keras. Dengan demikian, sistem login dapat menjaga integritas data pengguna dengan baik meskipun terjadi kebocoran basis data.

12 Tampilan Halaman Login

3.4.2 Pembatasan Hak Akses

Sistem login juga dilengkapi dengan Role-Based Access Control (RBAC) yang membatasi akses berdasarkan peran pengguna. Pengujian menunjukkan bahwa Admin dapat mengakses seluruh fitur yang berhubungan dengan manajemen pengguna, sedangkan Auditor hanya memiliki akses terbatas pada data yang relevan dengan tugas audit. Implementasi RBAC ini signifikan dalam mengurangi risiko akses yang tidak sah, karena pengguna tidak dapat mengakses fitur yang tidak sesuai dengan peran mereka.

Hasil ini sejalan dengan literatur yang menyatakan bahwa RBAC adalah metode yang efektif untuk mengontrol akses dalam sistem multi-pengguna (Ferraiolo et al., 1992). Studi menunjukkan bahwa RBAC dapat mengurangi kemungkinan terjadinya penyalahgunaan data dan meningkatkan efisiensi kerja melalui pembatasan hak akses secara ketat.

13 Tampilan Alert akses dibatasi

3.4.3 Pengujian Fungsionalitas Dan Keamanan

3.4.3.1 Pengujian Fungsional

Sistem login diuji untuk memastikan bahwa kredensial pengguna yang valid dapat mengarahkan mereka ke halaman yang sesuai berdasarkan peran masing-masing. Hasil pengujian menunjukkan bahwa sistem mampu mengelola sesi pengguna secara efektif, dengan Admin mendapatkan akses penuh untuk menambah, mengedit, dan menghapus akun pengguna lain, sementara Auditor hanya dapat melihat halaman yang terkait dengan tugas audit.

Pengujian juga menunjukkan bahwa sistem mampu memberikan pesan kesalahan yang jelas saat pengguna memasukkan kredensial yang salah. Hal ini meningkatkan pengalaman pengguna dengan memberikan umpan balik yang langsung dan informatif, sesuai dengan prinsip usability dalam sistem interaktif (Nielsen, 1994).

14 Tampilan dashboard admin

3.4.3.2 Pengujian Keamanan

Dari sisi keamanan, sistem diuji untuk mendeteksi potensi kerentanan terhadap serangan seperti brute-force dan SQL injection. Hasil pengujian menunjukkan bahwa sistem mampu menahan serangan brute-force dengan membatasi jumlah percobaan login yang gagal dan memblokir akses untuk sementara waktu. Selain itu, pengujian SQL injection menunjukkan bahwa sistem aman dari manipulasi query, karena input pengguna disanitasi dengan baik menggunakan prepared statements dalam PHP.

15 Tampilan Pesan Akses Ditolak

3.4.4 Analisis Kontrol Hak Akses Berbasis Peran (RBAC)

3.4.4.1 Keamanan dan Efisiensi

Implementasi Role-Based Access Control (RBAC) memungkinkan distribusi hak akses yang terkontrol dengan baik. Pengguna dengan peran Admin dapat mengelola seluruh aspek sistem yang terkait dengan manajemen pengguna, sementara Auditor hanya memiliki akses terbatas pada halaman yang relevan. Hasil pengujian menunjukkan bahwa pembatasan ini berhasil mencegah akses tidak sah dan menjaga keamanan data sensitif. Dalam konteks sistem multi-pengguna, RBAC terbukti efektif dalam meminimalisasi risiko akses yang tidak sesuai (Kuhn et al., 2005).

Pembatasan hak akses ini juga meningkatkan efisiensi kerja, karena pengguna hanya dapat mengakses fitur yang relevan dengan tugas mereka. Ini mengurangi beban mental yang disebabkan oleh tampilan fitur yang tidak diperlukan, serta meningkatkan fokus dan produktivitas kerja.

Tabel berikut menggambarkan perbedaan hak akses antara Admin dan Auditor dalam sistem:

1 Perbedaan Hak Akses

Hak Akses Admin Auditor/Pengguna
Manajemen pengguna Dapat menambah, mengedit, dan menghapus pengguna Tidak memiliki akses
Akses laporan audit Dapat mengelola laporan audit Hanya dapat melihat laporan audit
Riwayat login pengguna Dapat melihat riwayat login pengguna lain Tidak memiliki akses
Akses dashboard Penuh Terbatas hanya pada fitur audit
Pengaturan sistem Dapat mengelola pengaturan sistem Tidak memiliki akses

3.4.4.2 Peningkatan Pengalaman Pengguna

Penerapan RBAC tidak hanya meningkatkan keamanan, tetapi juga memberikan pengalaman pengguna yang lebih baik. Dengan hak akses yang jelas dan terstruktur, pengguna mengalami interaksi yang lebih sederhana dan terarah. Dalam sistem ini, Admin dapat dengan mudah mengelola dan memantau aktivitas pengguna, sementara Auditor memiliki akses yang sesuai dengan tugas mereka, tanpa terganggu oleh fitur yang tidak relevan.

Peningkatan pengalaman pengguna ini dapat dijelaskan melalui model Human-Computer Interaction (HCI), yang menekankan bahwa sistem yang responsif dan aman dapat meningkatkan usability dan efisiensi operasional (Dix et al., 2004).

 Simpulan

4.1 Ringkasan Hasil

Pengembangan sistem audit internal berbasis web untuk PT Aneka Coffee Industry berhasil mengatasi tantangan utama yang terkait dengan proses audit manual. Sistem ini secara signifikan meningkatkan efisiensi operasi audit dengan mengotomatisasi beberapa langkah manual, mengurangi waktu yang dibutuhkan untuk mengakses dan melaporkan data audit, dan meminimalkan kesalahan manusia. Integrasi sistem di berbagai departemen juga meningkatkan akurasi data dan memfasilitasi akses real-time ke informasi audit yang penting.

Antarmuka pengguna yang responsif memungkinkan staf untuk mengakses sistem melalui desktop dan perangkat seluler, menawarkan fleksibilitas operasional. Selain itu, kemampuan sistem untuk merampingkan tugas-tugas audit dan menyediakan akses langsung ke laporan meningkatkan proses pengambilan keputusan di perusahaan. Umpan balik dari pengguna sangat positif, terutama mengenai kemudahan penggunaan dan fungsionalitas sistem.

4.2 Gagasan Selanjutnya

Untuk pengembangan lebih lanjut, sistem ini dapat disempurnakan dengan menambahkan fitur keamanan yang lebih canggih, seperti otentikasi multi-faktor dan kontrol akses berbasis peran, guna melindungi data audit yang bersifat sensitif. Selain itu, integrasi analitik data yang lebih mendalam dapat diimplementasikan untuk mendukung manajemen dalam memantau kinerja audit secara real-time dan meningkatkan strategi pengambilan keputusan.

Sistem ini juga memiliki potensi untuk diterapkan di perusahaan lain yang membutuhkan solusi audit berbasis web. Dengan beberapa penyesuaian sesuai kebutuhan industri yang berbeda, sistem ini dapat membantu meningkatkan efisiensi audit dan manajemen data secara signifikan.