Wirayudha, Dafarel Fatih (2025) Visualisasi Penelusuran Produk Makanan Halal from Farm to Table Berdasarkan Web Teratai Menggunakan React.js dan Cytoscape. Other thesis, Institut Teknologi Sepuluh Nopember.
![]() |
Text
5025211120-Undergraduate_Thesis.pdf - Accepted Version Restricted to Repository staff only Download (4MB) | Request a copy |
Abstract
Pelacakan distribusi produk halal merupakan kebutuhan penting untuk menjamin kehalalan produk secara menyeluruh, mulai dari rantai pasok dari rumah potong hewan (RPH) hingga pelaku usaha. Proses monitoring produk halal yang ada saat ini seringkali tidak efisien akibat penyajian data yang kurang interaktif. Penelitian ini bertujuan untuk mengembangkan sistem visualisasi berbasis web yang dapat menelusuri dan memantau jalur distribusi produk makanan halal secara interaktif. Sistem dikembangkan menggunakan framework React.js dan library Cytoscape.js dengan metode pengembangan waterfall yang mencakup tahapan analisis, desain, implementasi, dan pengujian. Hasil penelitian menunjukkan bahwa sistem berhasil memvisualisasikan data rantai pasok yang kompleks secara koheren dan interaktif. Pengguna dapat melakukan eksplorasi data melalui fitur klik untuk detail, penyorotan jalur, dan drilldown untuk penelusuran mendalam. Pengujian fungsional terhadap 14 fitur utama melalui 7 skenario tugas menunjukkan bahwa seluruh fungsi sistem berjalan dengan sukses. Implementasi mekanisme caching menggunakan IndexedDB terbukti efektif dengan peningkatan performa pemuatan lanjutan (warm load) sebesar 93,88%. Berdasarkan hasil uji usability, sistem terbukti intuitif bagi pengguna, sehingga dapat menjadi solusi efektif untuk mendukung pemantauan distribusi produk halal yang lebih transparan dan efisien.
===================================================================================================================================
The traceability of halal product distribution is a critical requirement to ensure the end-to-end halal integrity of products, from the supply chain at slaughterhouses (RPH) to business actors. The current monitoring process for halal products is often inefficient due to non-interactive data presentation. This research aims to develop a web-based visualization system that can interactively trace and monitor the distribution channels of halal food products. The system was developed using the React.js framework and the Cytoscape.js library, following the waterfall development method, which includes analysis, design, implementation, and testing. The results show that the system successfully visualizes complex supply chain data in a coherent and interactive manner. Users can explore data through features such as click-for-details, path highlighting, and drill-down for in-depth tracing. Functional testing of 14 main features across 7 task scenarios demonstrated that all system functions operate successfully. The implementation of a caching mechanism using IndexedDB proved effective, achieving a 33,88%.performance increase on subsequent loads (warm load). Based on usability testing, the system was found to be intuitive for users, making it an effective solution to support a more transparent and efficient monitoring of halal product distribution.
Item Type: | Thesis (Other) |
---|---|
Uncontrolled Keywords: | Graph Visualization, Halal, Halal, Halal Supply Chain, Rantai Pasok Halal, Traceability, Traceability, Visualisasi Graf |
Subjects: | T Technology > T Technology (General) > T57.5 Data Processing T Technology > T Technology (General) > T58.5 Information technology. IT--Auditing T Technology > T Technology (General) > T58.6 Management information systems T Technology > T Technology (General) > T58.64 Information resources management |
Divisions: | Faculty of Intelligent Electrical and Informatics Technology (ELECTICS) > Informatics Engineering > 55201-(S1) Undergraduate Thesis |
Depositing User: | Dafarel Fatih Wirayudha |
Date Deposited: | 29 Jul 2025 08:54 |
Last Modified: | 29 Jul 2025 08:54 |
URI: | http://repository.its.ac.id/id/eprint/122899 |
Actions (login required)
![]() |
View Item |