Implementation of a Drag-and-Drop Interface Based on DND Kit and JSON Data Structure for Managing Dynamic Web Page Layouts

Abstract

Pengelolaan tata letak halaman web yang dinamis menuntut adanya antarmuka yang intuitif serta struktur data yang fleksibel untuk menangani hierarki konten yang kompleks dan bersarang. Kegiatan ini bertujuan untuk mengimplementasikan antarmuka Drag-and-Drop (DnD) berbasis pustaka DND Kit yang terintegrasi dengan struktur data JSON untuk merepresentasikan dan memanipulasi tata letak halaman secara real-time pada studi kasus Studi Kasus: Platform Web Content Management System (WCMS) Berbasis Headless. Sistem ini dirancang untuk memungkinkan pengguna menyusun elemen visual secara mandiri tanpa perlu berinteraksi langsung dengan kode program. Pengembangan sistem dilakukan menggunakan metodologi Agile Iterative guna memastikan adaptabilitas terhadap kebutuhan antarmuka pengguna yang terus berkembang. Fungsionalitas sistem divalidasi melalui pengujian Black Box Testing yang mencakup manajemen halaman, manipulasi tata letak, dan publikasi konten. Hasil pengujian terhadap 19 skenario uji utama menunjukkan tingkat keberhasilan sebesar 94,7%. Hasil ini membuktikan bahwa integrasi mekanisme DnD dengan struktur data JSON mampu memfasilitasi pengelolaan tata letak bersarang (nested layout) dan pembaruan properti komponen secara akurat dan responsif sesuai dengan rancangan fungsional, selain itu, kegiatan ini memberikan kontribusi pada perancangan model editor visual berbasis JSON yang bersifat schema-agnostic sehingga mudah dikembangkan dan diintegrasikan pada arsitektur Headless CMS, pendekatan ini juga mendukung agar perubahan tata letak dapat dikelola secara konsisten dan efisien.