PENDAHULUAN

Perkembangan teknologi web telah menggeser fungsi website dari yang sebelumnya hanya digunakan sebagai sarana penyampaian informasi menjadi infrastruktur utama dalam mendukung aktivitas bisnis digital. Dalam konteks bisnis saat ini, website tidak lagi hanya berperan sebagai media untuk menampilkan produk, tetapi juga menjadi pusat interaksi yang menghubungkan pelanggan dengan berbagai proses, mulai dari pencarian informasi, penilaian produk, transaksi, layanan, hingga kegiatan setelah pembelian. Kajian mengenai customer journey menunjukkan bahwa pengalaman pengguna dalam lingkungan digital dipengaruhi oleh berbagai komponen yang terdapat pada sebuah website. Setiap elemen antarmuka berkontribusi terhadap pembentukan respons kognitif, emosional, maupun perilaku pengguna selama proses interaksi berlangsung [1], [2]. Oleh karena itu, kualitas website menjadi faktor yang tidak dapat diabaikan dalam mendukung terciptanya pengalaman pengguna yang optimal sekaligus menunjang efektivitas aktivitas bisnis berbasis digital.

Dalam dunia e-commerce, halaman depan sebuah situs web menjadi jembatan utama yang menghubungkan pelanggan dengan sistem secara langsung. Melalui antarmuka inilah pelanggan dapat menjelajahi berbagai produk yang tersedia, memperoleh informasi yang mereka butuhkan sebelum mengambil keputusan, memasukkan pilihan mereka ke dalam keranjang belanja, hingga akhirnya merampungkan proses pembelian melalui pembayaran. Lebih dari sekadar tampilan visual, kenyamanan pengguna dalam bernavigasi dan kejelasan informasi yang disajikan turut menentukan apakah sebuah transaksi dapat berjalan lancar dari awal hingga akhir. Penelitian sebelumnya menunjukkan bahwa kualitas atribut website, baik dari aspek efisiensi maupun pengalaman pengguna, memiliki pengaruh terhadap loyalitas pelanggan serta efektivitas interaksi pada platform digital [2]. Selain itu, pengembangan sistem e-commerce berbasis website terbukti mampu mendukung pengelolaan produk, transaksi, dan pengalaman belanja agar menjadi lebih mudah bagi pengguna [3], [4], [5]. Oleh karena itu, frontend tidak dapat dianggap hanya sebagai tampilan visual semata, melainkan sebagai komponen penting yang berperan dalam menjamin kelancaran alur interaksi serta keberhasilan transaksi digital.

Batik Giri Alam menjalankan dua jenis kegiatan bisnis sekaligus, yaitu menjual produk fisik dan menawarkan layanan workshop sebagai sarana edukasi. Kombinasi keduanya menciptakan kebutuhan operasional yang tidak bisa disamaratakan, karena proses jual beli produk nyata jelas berbeda cara kerjanya dibandingkan dengan sistem pemesanan jadwal workshop. Oleh karena itu, platform digital yang dibangun untuk mendukung bisnis ini perlu mampu menangani kedua jenis aktivitas tersebut secara bersamaan, termasuk menyediakan berbagai fitur dasar yang diperlukan agar bagian penjualan produk dapat berjalan dengan baik. Arsitektur sistem harus mampu memfasilitasi visualisasi katalog yang interaktif, penyajian spesifikasi produk yang mendalam, efisiensi pengelolaan keranjang belanja, penanganan modul checkout serta gerbang pembayaran yang aman, hingga penyediaan sistem pelacakan pesanan yang transparan bagi konsumen.

Di sisi lain, layanan workshop memerlukan alur interaksi yang berbeda. Pengguna tidak hanya membutuhkan akses terhadap daftar kegiatan dan deskripsi workshop, tetapi juga fasilitas untuk memilih jadwal yang tersedia, melakukan registrasi, menyelesaikan pembayaran, serta memperoleh informasi mengenai status dan detail pemesanan. Karakteristik tersebut mencerminkan kompleksitas kebutuhan sistem yang melampaui implementasi e-commerce konvensional. Oleh sebab itu, rancangan frontend perlu mampu mengintegrasikan proses transaksi produk dan reservasi layanan dalam satu lingkungan digital yang terpadu sehingga pengguna dapat mengakses seluruh layanan melalui mekanisme yang konsisten.

Dalam kerangka tersebut, frontend memegang peranan sentral karena seluruh aktivitas pengguna berlangsung melalui antarmuka website. Kualitas desain dan fungsionalitas antarmuka akan memengaruhi kemudahan akses informasi, kelancaran navigasi, serta efektivitas interaksi yang terjadi selama pengguna memanfaatkan layanan yang disediakan oleh sistem. Pengguna perlu dapat berpindah dari halaman publik menuju katalog produk, detail produk, keranjang belanja, checkout, hingga pemesanan workshop dengan alur yang konsisten dan mudah dipahami. Literatur mengenai pengujian aplikasi web juga menekankan bahwa aplikasi web menjadi media utama dalam interaksi antara pengguna dan sistem digital, sehingga kualitas alur, konsistensi navigasi, serta validasi fungsi merupakan aspek penting yang perlu diperhatikan [6]. Dengan demikian, frontend pada Batik Giri Alam tidak hanya berperan sebagai lapisan tampilan, tetapi juga sebagai pengelola dua perjalanan digital yang berbeda, yaitu perjalanan pembelian produk dan perjalanan pemesanan workshop.

Penelitian sebelumnya yang memiliki kedekatan paling tinggi dengan topik ini adalah penelitian yang dilakukan oleh Angeline et al. [8] terkait pengembangan frontend e-commerce berbasis mobile web pada Koperasi KIKA. Penelitian tersebut menerapkan metode Waterfall dan memusatkan pengembangan pada fitur-fitur frontend, seperti login, halaman beranda, transaksi, belanja, profil, keranjang, dan checkout. Hasil studi tersebut menunjukkan bahwa frontend dapat menjadi fokus utama dalam penelitian pengembangan sistem berbasis web, khususnya ketika penelitian diarahkan pada perancangan alur interaksi serta implementasi modul yang digunakan secara langsung oleh pengguna. Selain itu, penerapan black-box testing dalam penelitian tersebut juga menjadi landasan metodologis yang relevan untuk menguji fungsi frontend berdasarkan perilaku sistem yang tampak dari sisi pengguna.

Namun, penelitian tersebut masih memiliki keterbatasan karena hanya menitikberatkan pada domain e-commerce. Alur sistem yang dikembangkan terbatas pada proses transaksi produk dan belum mencakup layanan berbasis pemesanan atau booking. Padahal, sistem booking memiliki karakteristik yang berbeda dibandingkan dengan sistem pembelian produk. Dalam layanan booking, pengguna tidak hanya memilih item, tetapi juga perlu mempertimbangkan jadwal, ketersediaan slot, status pemesanan, serta proses pembayaran layanan. Penelitian Kaluza et al. [9] menunjukkan bahwa status booking dan ketersediaan slot pada sistem reservasi daring dapat memengaruhi keputusan pengguna. Penelitian lain mengenai sistem reservasi berbasis website juga menegaskan pentingnya formulir reservasi, pengelolaan data booking, fitur instant booking, serta integrasi pembayaran daring dalam menunjang proses layanan secara efisien [10], [11], [12], [13]. Temuan tersebut menunjukkan bahwa frontend untuk layanan booking tidak dapat disamakan dengan frontend e-commerce pada umumnya.

Berdasarkan hasil telaah tersebut, kesenjangan penelitian dalam studi ini terdapat pada masih minimnya kajian yang secara khusus membahas pengembangan frontend website yang mampu mengintegrasikan alur penjualan produk dan pemesanan layanan dalam satu sistem terpadu. Penelitian mengenai frontend e-commerce yang telah ada pada umumnya lebih berfokus pada alur katalog, keranjang belanja, dan checkout [3], [4], [8], sedangkan penelitian tentang sistem reservasi daring lebih banyak menyoroti proses reservasi, pengaturan jadwal, ketersediaan slot, status booking, serta pembayaran layanan [10], [11], [12], [13]. Oleh karena itu, kajian yang menawarkan model frontend multi-domain yang secara bersamaan mendukung alur e-commerce dan alur booking dalam satu lingkungan website yang sama masih relatif terbatas.

Kebaruan dalam penelitian ini terletak pada pengembangan frontend website multi-domain yang menggabungkan tiga domain utama, yaitu transaksi produk, pemesanan workshop, dan monitoring operasional oleh admin. Integrasi tersebut menjadi pembeda antara penelitian ini dan pengembangan frontend e-commerce pada umumnya, karena sistem yang dikembangkan tidak hanya mencakup katalog, keranjang, dan checkout produk, tetapi juga mendukung pemilihan workshop, pengisian formulir booking, pembayaran layanan, tampilan status booking, serta pemantauan aktivitas operasional melalui halaman admin. Impak dari penelitian ini meluas melampaui sekadar penyelesaian teknis bagi problem spesifik di Batik Giri Alam. Pada cakupan yang lebih makro, arsitektur pengembangan frontend ini menyajikan cetak biru ( blueprint) aplikatif bagi pelaku industri kreatif lain yang beroperasi pada domain serupa yakni entitas yang menyeimbangkan perdagangan komoditas fisik dengan manajemen jasa berbasis okupansi waktu. Keberhasilan mengonstruksi model hibrida ini membuktikan bahwa simplifikasi dua klaster transaksi yang berbeda ke dalam satu ekosistem digital yang kohesif sangat krusial untuk dieksplorasi lebih lanjut.

Kesenjangan teknologi akibat langkanya kerangka kerja frontend terpadu yang mampu menjembatani dualitas fungsi tersebut melandasi urgensi pengembangan situs web Batik Giri Alam. Rekayasa sistem ini dirancang secara simultan demi mengasimilasi modul niaga batik dan penjadwalan workshop tanpa mengorbankan pengalaman pengguna. Oleh sebab itu, prioritas fase pengembangan dititikberatkan pada perancangan antarmuka adaptif yang mengawal seluruh siklus belanja konvensional; standardisasi ini mencakup penjelajahan katalog yang intuitif, transparansi spesifikasi produk, fleksibilitas manipulasi item pada keranjang belanja, hingga finalisasi gerbang checkout yang reliabel. Selain itu, sistem juga dirancang untuk memfasilitasi alur pemesanan workshop melalui penyajian daftar kegiatan, informasi detail workshop, pemilihan jadwal, pengisian data pemesanan, mekanisme pembayaran, serta akses terhadap informasi booking yang telah dilakukan pengguna.

Agar kedua layanan dapat berjalan secara terkoordinasi, frontend yang dikembangkan turut dihubungkan dengan domain administratif. Integrasi tersebut memungkinkan aktivitas transaksi produk maupun pemesanan workshop dimonitor dan dikelola secara operasional melalui satu lingkungan sistem yang terpusat, sehingga mendukung efektivitas pengelolaan layanan secara menyeluruh. Keempat, mengevaluasi hasil implementasi frontend menggunakan black-box testing untuk memastikan bahwa setiap fitur utama berjalan sesuai dengan kebutuhan sistem. Dengan demikian, penelitian ini diharapkan mampu memberikan kontribusi praktis bagi proses digitalisasi Batik Giri Alam serta kontribusi akademik berupa model pengembangan frontend multi-domain bagi bisnis digital yang mengombinasikan e-commerce dan layanan berbasis pemesanan.

M ETODE

A. METODE PENGEMBANGAN

Penelitian ini termasuk dalam penelitian pengembangan sistem berbasis web pada bidang rekayasa perangkat lunak. Luaran utama dari penelitian ini adalah artefak frontend website Batik Giri Alam yang dirancang, dikembangkan, dan divalidasi sesuai dengan kebutuhan sistem. Pendekatan pengembangan sistem digunakan karena penelitian ini tidak hanya menghasilkan rancangan secara konseptual, tetapi juga menghasilkan implementasi frontend yang dapat dimanfaatkan untuk mendukung proses penjualan produk batik, pemesanan workshop, serta monitoring operasional oleh admin.

Penelitian ini menggunakan model Waterfall sebagai pendekatan utama dalam proses pengembangan sistemnya. Pemilihan model ini bukan tanpa alasan sejak awal, kebutuhan sistem sudah dapat dipetakan dengan jelas dan tidak banyak berubah selama proses berlangsung. Kondisi itulah yang membuat Waterfall menjadi pilihan yang masuk akal, karena model ini memang bekerja paling baik ketika ruang lingkup proyek sudah terdefinisi sejak awal dan tidak memerlukan banyak penyesuaian di tengah jalan.

Secara garis besar, cakupan pengembangan dalam penelitian ini meliputi lima area utama, yaitu tampilan halaman publik, area khusus pelanggan, alur transaksi dan checkout produk, fitur pemesanan workshop, serta dasbor untuk keperluan pengelolaan sistem oleh admin.

Karena kebutuhan proyek relatif stabil dari awal hingga akhir, setiap bagian sistem bisa dirancang terlebih dahulu sebelum masuk ke tahap pembangunan. Dalam situasi seperti ini, Waterfall memberikan manfaat nyata berupa alur kerja yang runtut dan mudah dipantau. Setiap tahap memiliki keterkaitan langsung dengan tahap sebelumnya, sehingga proses pengembangan bisa berjalan lebih terarah. Selain itu, pendekatan ini juga memudahkan penelusuran kembali setiap hasil pekerjaan, mulai dari analisis kebutuhan, perancangan sistem, pembangunan antarmuka, hingga pengujian akhir untuk memastikan sistem berjalan sesuai dengan yang sudah direncanakan. Penggunaan metode ini juga selaras dengan penelitian Angeline et al. [8] yang menerapkan Waterfall dalam pengembangan frontend e-commerce berbasis mobile web. Dalam penelitian ini, Waterfall digunakan untuk memastikan bahwa setiap kebutuhan frontend dapat diterjemahkan ke dalam rancangan, diimplementasikan menjadi modul sistem, dan diuji secara fungsional.

Tahapan Waterfall dalam penelitian ini terdiri atas analisis kebutuhan, perancangan frontend, implementasi, pengujian, deployment, dan pemeliharaan. Tahapan-tahapan tersebut ditampilkan pada Gambar 1.

Gambar 1 Diagram Waterfall Pengembangan Frontend Website Batik Giri Alam.

Fokus utama dalam investigasi ini bertumpu pada perancangan frontend website Batik Giri Alam. Basis material penelitian diekstraksi langsung dari dinamika operasional lapangan, yang pada akhirnya mengonstruksi fondasi bagi pengolahan data produk dan spesifikasi workshop. Metrik perancangan kemudian diformulasikan ke dalam serangkaian skenario pengujian konkrit: mulai dari simulasi transaksi komoditas, alur reservasi layanan, hingga visibilitas pemantauan sistem pada level admin.

Infrastruktur digital ini direalisasikan di atas ekosistem web dengan memanfaatkan Blade dan Livewire sebagai tulang punggung arsitektur antarmuka. Kombinasi teknologi kerangka kerja tersebut diimplementasikan secara spesifik untuk membangun modul-modul esensial aplikasi. Target pengembangannya mencakup halaman landing, gerbang autentikasi, manajemen cart, proses checkout, katalog workshop, dan panel administratif.

Guna meminimalisasi deviasi antara spesifikasi teknis dan produk akhir, siklus rekayasa diorkestrasikan melalui instrumen yang terkalibrasi. Editor kode difungsikan sebagai ruang kerja absolut dalam memahat seluruh struktur frontend. Validasi pasca-pengkodean mutlak dilakukan secara berkala. Tahap iteratif ini mengeksploitasi kapabilitas browser desktop modern untuk menguji presisi render visual, sekaligus menggaransi bahwa setiap fungsi interaktif merespons instruksi pengguna secara akurat. Sebagai landasan struktural yang menopang seluruh fase teknis tersebut, perancangan diagram pemodelan sistem dikerahkan guna memetakan topologi, mendikte aliran proses, serta mempertegas simpul integrasi antar komponen di dalam arsitektur perangkat lunak.

Pemanfaatan perangkat tersebut memungkinkan proses pengembangan dilakukan dalam kondisi yang mendekati implementasi nyata. Melalui pendekatan ini, perilaku sistem dapat direpresentasikan secara lebih akurat, terutama pada fitur-fitur utama yang mencakup penelusuran katalog produk, pengelolaan transaksi melalui checkout dan pembayaran, mekanisme pemesanan workshop, serta aktivitas pemantauan operasional yang dilakukan oleh administrator. Ketersediaan lingkungan pengembangan dan pengujian yang memadai juga mendukung proses validasi terhadap fungsi-fungsi yang telah dirancang sebelum sistem diimplementasikan secara penuh.

1. Tahapan Penelitian

Tahapan penelitian dirancang secara sistematis dengan mengikuti model Waterfall. Setiap tahapan menghasilkan artefak yang digunakan sebagai landasan untuk melanjutkan ke tahap berikutnya. Pada tahap analisis kebutuhan, dihasilkan daftar kebutuhan sistem serta pemetaan aktor. Tahap perancangan menghasilkan struktur domain frontend, diagram sistem, dan rancangan alur interaksi. Selanjutnya, tahap implementasi menghasilkan modul frontend yang dapat dijalankan. Tahap pengujian menghasilkan validasi fungsional terhadap setiap modul utama. Melalui susunan tahapan tersebut, proses pengembangan dapat ditelusuri dengan jelas, mulai dari identifikasi kebutuhan awal hingga hasil pengujian akhir.

a. Analisis Kebutuhan

Tahap analisis kebutuhan dalam penelitian ini dijalankan dengan cara menelaah secara menyeluruh bagaimana alur bisnis Batik Giri Alam berjalan sehari-hari. Dari proses penelaahan tersebut, tim pengembang dapat memetakan kebutuhan-kebutuhan spesifik yang harus dipenuhi oleh sisi frontend aplikasi. Hasilnya, sistem kemudian dibagi ke dalam lima area kerja utama yang masing-masing memiliki fungsi dan tanggung jawab yang berbeda, yaitu area publik, area pelanggan, proses checkout produk, layanan workshop, dan panel pengelolaan admin.

Area publik sengaja dirancang sebagai pintu masuk utama bagi semua orang yang mengunjungi situs, tanpa terkecuali dan tanpa mengharuskan mereka untuk login atau membuat akun terlebih dahulu. Filosofi di balik keputusan ini cukup sederhana pengunjung baru seharusnya bisa bebas menjelajahi apa yang ditawarkan tanpa hambatan apapun. Maka dari itu, area ini dilengkapi dengan berbagai halaman informatif yang mencakup halaman utama sebagai wajah pertama situs, halaman profil yang memperkenalkan bisnis Batik Giri Alam secara lebih dalam, halaman katalog yang menampilkan seluruh produk yang tersedia beserta detail masing-masingnya, informasi lengkap mengenai workshop yang diselenggarakan, serta halaman kontak yang memudahkan pengunjung untuk berkomunikasi langsung dengan pihak toko.

Sementara itu, area pelanggan hadir sebagai ruang yang lebih personal dan eksklusif, yang hanya dapat diakses oleh pengguna yang sudah terdaftar dan masuk ke dalam akunnya. Area ini menjadi tempat di mana seluruh aktivitas belanja dikelola secara mandiri oleh pelanggan itu sendiri. Di dalamnya, pelanggan bisa dengan leluasa mengatur isi keranjang belanja mereka, menyimpan produk-produk yang menarik perhatian ke dalam daftar wishlist untuk dipertimbangkan di kemudian hari, memantau riwayat pesanan yang pernah dilakukan beserta status dan rinciannnya, serta melakukan berbagai pengaturan akun seperti memperbarui informasi profil, mengganti kata sandi demi keamanan, dan mengelola berbagai alamat pengiriman yang dimiliki.

Proses pembelian secara resmi dituntaskan melalui area checkout, yang dirancang dengan alur yang terstruktur dan mudah diikuti oleh siapa pun. Pengguna tidak akan dibiarkan bingung karena sistem akan membimbing mereka langkah demi langkah, mulai dari memastikan alamat tujuan pengiriman sudah benar, memilih jasa pengiriman yang diinginkan, melanjutkan ke tahap pembayaran, hingga akhirnya mendarat di halaman konfirmasi pesanan. Transparansi setelah transaksi juga menjadi perhatian penting dalam perancangan area ini. Halaman konfirmasi dirancang agar dapat menampilkan status transaksi secara langsung dan dinamis, sehingga pengguna bisa langsung mengetahui apakah pembayaran mereka berhasil diproses, mengalami kendala, atau masih menunggu verifikasi dari sistem.

Tidak hanya melayani transaksi produk fisik, sistem ini juga dilengkapi dengan area khusus yang menangani layanan workshop. Melalui area ini, pengguna dapat menelusuri seluruh daftar workshop yang sedang atau akan tersedia, membaca informasi lengkap mengenai setiap kegiatan yang diselenggarakan, mengisi formulir pendaftaran untuk mengamankan tempat, menyelesaikan pembayaran reservasi, menerima konfirmasi pemesanan, dan kapan saja dapat kembali melihat detail booking yang sudah mereka lakukan sebelumnya.

Di balik semua aktivitas yang terjadi di sisi pengguna, terdapat area admin yang berperan sebagai pusat kendali operasional seluruh sistem. Dari area inilah segala sesuatunya dipantau dan dikelola. Admin dapat mengawasi seluruh transaksi produk yang masuk, mengelola dan memperbarui data workshop yang ditampilkan kepada publik, memantau aktivitas pemesanan workshop dari para pelanggan, serta mengatur informasi pengiriman yang digunakan sebagai acuan dalam proses distribusi produk ke tangan pelanggan.

Secara keseluruhan, sistem ini membagi seluruh penggunanya ke dalam tiga peran utama yang memiliki hak akses dan kemampuan yang berbeda-beda, yaitu Pengunjung, Pelanggan, dan Admin. Pengunjung berada pada lapisan paling dasar, di mana interaksi mereka dengan sistem terbatas pada konsumsi informasi umum seperti melihat profil toko, menjelajahi katalog produk, membaca deskripsi workshop, dan mengakses saluran kontak. Pelanggan memiliki hak akses yang jauh lebih luas karena mereka adalah pengguna aktif yang bertransaksi. Mereka dapat mengelola keranjang belanja, menyelesaikan proses checkout dan pembayaran, serta menelusuri riwayat pesanan maupun booking workshop yang pernah dilakukan. Adapun Admin memegang tingkatan akses tertinggi dalam hierarki sistem ini. Mereka memiliki kendali penuh atas jalannya operasional, mulai dari memantau arus pesanan produk yang masuk, memvalidasi setiap pemesanan workshop, memperbarui konten dan data workshop, hingga mengelola pengaturan pengiriman yang memengaruhi seluruh proses distribusi. Gambaran lengkap mengenai pembagian peran ini beserta batasan akses masing-masing pihak divisualisasikan secara lebih jelas pada Gambar 3.

Gambar 3 Use Case Diagram Frontend Website Batik Giri Alam.

Hasil analisis menunjukkan bahwa frontend Batik Giri Alam membutuhkan pendekatan multi-domain karena harus mampu mendukung dua jenis layanan yang memiliki karakteristik berbeda, yaitu transaksi produk fisik dan pemesanan workshop. Pemisahan kebutuhan tersebut menjadi penting karena sistem booking memiliki pola interaksi yang tidak sama dengan transaksi produk, khususnya pada aspek pemilihan jadwal, status pemesanan, serta alur pembayaran layanan [10], [11], [12], [13].

b. Perancangan Frontend

Tahap perancangan frontend dilakukan dengan membagi halaman dan fitur ke dalam lima domain utama, yaitu domain publik, customer, checkout produk, workshop, dan admin. Pembagian ini bertujuan untuk mempertahankan prinsip separation of concern, sehingga setiap domain memiliki tanggung jawab yang jelas dan spesifik, namun tetap terhubung dalam satu kesatuan alur pengalaman pengguna. Dalam sudut pandang customer journey, rancangan tersebut menjadi penting karena website tidak hanya dituntut untuk menyediakan fitur, tetapi juga harus mampu mengarahkan perpindahan pengguna dari satu tahap ke tahap berikutnya secara konsisten serta mudah dipahami [1], [7].

Pada fase perancangan ini, struktur navigasi antarmuka dibangun dengan membaginya ke dalam dua jalur utama yang masing-masing memiliki tujuan berbeda. Pembagian ini dilakukan agar setiap pengguna bisa diarahkan dengan lebih tepat sesuai dengan apa yang ingin mereka lakukan, apakah itu berbelanja produk atau memesan layanan workshop. Jalur pertama sepenuhnya difokuskan untuk mendukung proses pembelian produk fisik. Perjalanan pengguna di jalur ini dimulai begitu mereka membuka halaman utama situs. Dari sana, mereka secara alami akan diarahkan untuk menelusuri halaman katalog, tempat di mana seluruh produk yang tersedia ditampilkan secara terorganisir. Ketika sebuah produk menarik perhatian, pengguna dapat melanjutkan ke halaman detail produk untuk melihat spesifikasi dan informasi lebih lengkap. Setelah yakin dengan pilihannya, pengguna dapat memasukkan produk tersebut ke dalam keranjang belanja sebagai langkah persiapan sebelum transaksi. Dari keranjang belanja, alur kemudian berlanjut ke halaman checkout di mana pengiriman dan metode pembayaran ditentukan, dan diakhiri dengan proses penyelesaian pembayaran sebagai tanda bahwa transaksi telah berhasil dilakukan.

Sebagai titik terminasi, sistem akan merender representasi visual berupa detail pesanan.

Skema navigasi sekunder diorientasikan secara spesifik untuk memfasilitasi akuisisi jasa. Alur pemesanan workshop ini mengambil titik tolak operasional dari beranda maupun laman agregator publik. Pengunjung diarahkan untuk mengeksplorasi daftar ketersediaan sesi, menelaah detail kurikulum kegiatan, hingga berlabuh pada tahap pengisian formulir reservasi. Rangkaian interaksi pengguna ini ditutup melalui tahapan pelunasan, penerbitan konfirmasi booking, beserta akses menuju rincian kehadiran.

Melengkapi orkestrasi pada sisi konsumen tersebut, infrastruktur navigasi turut memetakan lapis kendali manajerial tingkat atas. Ruang operasional eksklusif bagi admin ini dipusatkan pada sebuah dashboard yang komprehensif. Visibilitas tata kelolanya dikonfigurasi secara ketat untuk mengakomodasi fungsi monitoring pesanan konvensional, manipulasi basis data workshop, pengawasan lalu lintas booking harian, serta kalibrasi parameter geografis penentuan asal pengiriman logistik. Perancangan sistem divisualisasikan melalui beberapa diagram, yaitu diagram arsitektur sistem, activity diagram pembelian produk, activity diagram pemesanan workshop, activity diagram admin, component diagram, class diagram konseptual, sequence diagram checkout produk, dan sequence diagram booking workshop.

Gambar 2. Diagram Arsitektur Sistem Frontend Website Batik Giri Alam

Diagram arsitektur sistem menjelaskan keterkaitan antara aktor pengguna, modul frontend, serta layanan pendukung yang digunakan dalam sistem. Diagram tersebut memperlihatkan bahwa Pengunjung, Customer, dan Admin memiliki hak akses serta kebutuhan interaksi yang berbeda sesuai dengan perannya masing-masing. Selain itu, diagram ini juga menunjukkan hubungan frontend dengan beberapa layanan pendukung, seperti payment gateway, layanan ongkir, email atau notifikasi, serta penyimpanan data.

Gambar 4. Activity Diagram Pembelian Produk pada Website Batik Giri Alam

Activity diagram pembelian produk menjelaskan alur yang dilalui pengguna dalam melakukan transaksi produk. Proses ini diawali dengan mengakses halaman beranda, kemudian pengguna menelusuri katalog produk, membuka detail produk, memilih ukuran dan jumlah, menambahkan produk ke keranjang, melakukan checkout, mengisi alamat, memilih metode pengiriman, melakukan pembayaran, melakukan konfirmasi, hingga sistem menampilkan detail pesanan.

Gambar 5. Activity Diagram Pemesanan Workshop pada Website Batik Giri Alam

Diagram aktivitas tersebut menggambarkan rangkaian interaksi pengguna dalam proses reservasi workshop yang tersedia pada sistem. Alur dimulai ketika pengguna mengakses halaman workshop untuk meninjau daftar kegiatan yang ditawarkan. Setelah menentukan workshop yang diminati, pengguna diarahkan ke halaman detail guna memperoleh informasi yang lebih lengkap sebelum melanjutkan ke tahap pemesanan. Proses reservasi kemudian dilakukan melalui pengisian formulir booking yang telah disediakan, dilanjutkan dengan penyelesaian transaksi pembayaran sesuai mekanisme yang berlaku pada sistem.

Setelah pembayaran diproses, sistem menampilkan informasi booking yang memuat rincian pemesanan beserta status transaksi yang terkait. Rangkaian aktivitas tersebut menunjukkan bahwa layanan workshop memiliki mekanisme operasional yang berbeda dibandingkan alur transaksi produk. Meskipun demikian, kedua proses dirancang untuk berjalan secara terpadu dalam satu lingkungan frontend, sehingga pengguna dapat mengakses layanan pembelian produk maupun reservasi workshop melalui platform yang sama tanpa perlu berpindah sistem.

Gambar 6. Activity Diagram Admin untuk Monitoring Operasional Website Batik Giri Alam

Diagram ini menggambarkan alur aktivitas admin dalam menjalankan fungsi operasional pada sistem. Aktivitas admin diawali dengan proses login ke dashboard, kemudian dilanjutkan dengan mengakses fitur monitoring pesanan, pengelolaan workshop, monitoring booking workshop, serta pengaturan pengiriman. Diagram ini berperan penting untuk menunjukkan bahwa frontend tidak hanya dikembangkan bagi pengguna umum dan customer, tetapi juga dirancang untuk memenuhi kebutuhan operasional admin dalam mengelola seluruh aktivitas sistem secara menyeluruh.

Gambar 7. Component Diagram Frontend Website Batik Giri Alam

Diagram tersebut menunjukkan susunan modular frontend pada website Batik Giri Alam. Komponen-komponen utama, seperti halaman publik, autentikasi, katalog produk, keranjang belanja, checkout, modul workshop, dashboard customer, dan dashboard admin, direpresentasikan sebagai bagian yang saling berkaitan dalam menunjang proses bisnis sistem. Diagram ini berfungsi untuk menjelaskan pembagian peran dan tanggung jawab antar modul pada frontend, sehingga hubungan antara setiap komponen sistem dapat dipahami dengan lebih terarah, terstruktur, dan sistematis.

Gambar 8. Class Diagram Konseptual Frontend Website Batik Giri Alam

Diagram tersebut merepresentasikan struktur data konseptual yang menjadi landasan bagi pengembangan frontend website. Model data yang ditampilkan mencakup sejumlah entitas utama yang terlibat dalam operasional sistem, seperti pengguna, produk, keranjang belanja, pesanan, pembayaran, workshop, dan booking. Masing-masing entitas dirancang untuk mengakomodasi kebutuhan data yang muncul selama proses interaksi pengguna dengan sistem.

Relasi yang terbentuk antarentitas menggambarkan keterkaitan data dalam mendukung berbagai proses bisnis yang tersedia pada platform. Hubungan tersebut memungkinkan aliran informasi berjalan secara konsisten, mulai dari aktivitas penelusuran dan pembelian produk hingga proses reservasi workshop beserta pengelolaan transaksinya. Keberadaan keterhubungan data ini menjadi aspek penting untuk memastikan integritas informasi yang digunakan oleh setiap fitur pada sistem.

Selain berfungsi sebagai representasi struktur data, diagram konseptual tersebut juga memberikan gambaran mengenai fondasi yang mendasari implementasi antarmuka frontend. Melalui model ini, keterkaitan antara kebutuhan fungsional sistem dan data yang dikelola dapat dipahami secara lebih sistematis, sehingga mendukung proses perancangan dan pengembangan antarmuka yang selaras dengan kebutuhan operasional platform.

Gambar 9. Sequence Diagram Checkout Produk pada Website Batik Giri Alam

Diagram ini menggambarkan rangkaian interaksi antarbagian sistem dalam proses checkout produk. Alur interaksi dimulai ketika pengguna memilih produk, menambahkannya ke keranjang, melanjutkan proses ke tahap checkout, hingga sistem memproses pembayaran dan menampilkan detail pesanan. Sequence diagram ini menekankan urutan komunikasi antara halaman atau modul dalam sistem, sehingga proses transaksi dapat dipahami secara lebih mendalam berdasarkan aliran pesan serta respons yang diberikan oleh sistem.

Gambar 10. Sequence Diagram Booking Workshop pada Website Batik Giri Alam

Diagram ini memaparkan urutan interaksi dalam proses pemesanan workshop. Alur dimulai ketika pengguna memilih workshop, kemudian melihat detail workshop, mengisi formulir pemesanan, dan melanjutkan proses ke tahap pembayaran hingga sistem menampilkan detail booking. Diagram ini memperlihatkan bahwa proses booking memiliki rangkaian interaksi tersendiri yang perlu dirancang secara jelas, sehingga pengguna dapat menyelesaikan pemesanan workshop dengan baik dan terarah.

Secara konseptual, perancangan frontend dalam penelitian ini tidak hanya berorientasi pada pengaturan tata letak halaman, tetapi juga menekankan konsistensi alur interaksi serta keterhubungan antarfitur. Pada domain produk, rancangan difokuskan untuk memperjelas katalog, informasi detail produk, serta mengurangi hambatan selama proses checkout. Sementara itu, pada domain workshop, rancangan diarahkan pada kejelasan informasi jadwal, formulir pemesanan, status booking, dan alur pembayaran. Pendekatan ini sesuai dengan temuan yang menunjukkan bahwa atribut website dan struktur interaksi berpengaruh terhadap keterlibatan, kepercayaan, serta kemajuan pengguna menuju transaksi aktual, baik dalam konteks e-commerce maupun layanan daring berbasis pemesanan [2], [3].

c. Implementasi

Tahap implementasi merupakan proses penerapan rancangan frontend ke dalam modul-modul sistem yang terdapat pada website Batik Giri Alam. Implementasi dilakukan secara modular berdasarkan hasil perancangan, dimulai dari landing page dan halaman publik, kemudian dilanjutkan pada katalog produk, detail produk, cart, checkout, serta status pembayaran untuk domain e-commerce. Implementasi pada domain workshop mencakup sejumlah fitur utama yang mendukung keseluruhan proses reservasi layanan, mulai dari halaman daftar workshop, informasi detail kegiatan, formulir pemesanan, proses pembayaran, konfirmasi booking, hingga penyajian detail reservasi yang telah dilakukan pengguna. Sistem ini juga menyediakan ruang khusus bagi pengguna yang sudah memiliki akun terdaftar. Ruang tersebut hadir dalam bentuk dashboard pelanggan, yaitu halaman pribadi tempat pengguna bisa melihat dan mengelola seluruh riwayat aktivitas akun mereka secara mandiri. Di sisi lain, admin juga memiliki area tersendiri yang dilengkapi dengan berbagai fitur pengelolaan. Melalui dashboard admin, pengelola sistem dapat memantau pesanan yang masuk, mengurus data workshop, mengawasi aktivitas booking, serta mengatur titik asal pengiriman yang digunakan dalam proses distribusi produk.

Pemisahan antara area pelanggan dan area admin ini bukan hanya soal tampilan semata. Pembagian tersebut mencerminkan cara sistem dibangun sejak awal, yaitu dengan memisahkan setiap fungsi ke dalam area yang memang dikhususkan untuk tujuan tertentu. Pendekatan ini membuat struktur aplikasi lebih rapi dan mudah dikembangkan ke depannya.

Dari sisi teknis, pembangunan tampilan frontend memanfaatkan dua teknologi utama yang sudah tersedia dalam proyek, yaitu Blade dan Livewire. Keduanya digunakan secara berdampingan dengan pembagian tugas yang jelas. Livewire menangani bagian-bagian yang membutuhkan respons cepat dan interaksi langsung dari pengguna, seperti perubahan isi keranjang belanja, pengelolaan wishlist, dan proses checkout yang terdiri dari beberapa langkah. Sementara itu, Blade digunakan untuk halaman-halaman yang bersifat lebih statis dan hanya menampilkan informasi tanpa banyak interaksi, seperti halaman publik, halaman workshop, dan panel admin.

Perpaduan kedua teknologi ini membawa dampak yang cukup signifikan terhadap kualitas aplikasi secara keseluruhan. Tampilan frontend tidak lagi sekadar berfungsi sebagai pajangan visual yang pasif, melainkan berkembang menjadi sebuah antarmuka yang mampu merespons berbagai tindakan pengguna secara langsung dan menyeluruh. Berbagai aktivitas penting kini dapat berjalan di bawah satu sistem yang terpadu dan tidak terpecah-pecah. Mulai dari menambahkan produk ke keranjang, menyelesaikan pembayaran bertahap, memperbarui status transaksi, hingga melakukan pemesanan slot workshop semuanya berjalan lancar tanpa hambatan antar bagian sistem.

Yang tidak kalah penting, pendekatan berbasis pemisahan domain ini juga memiliki nilai tersendiri dari sudut pandang metodologi pengembangan. Cara kerja ini memastikan bahwa apa yang sudah dirancang di atas kertas benar-benar tercermin dalam wujud nyata aplikasi yang dibangun. Setiap bagian dari tampilan yang dikembangkan dapat ditelusuri kembali ke rancangan awal, sehingga keutuhan dan konsistensi proses pengembangan dari awal hingga akhir tetap terjaga dengan baik.

d. Pengujian

Tahap pengujian dilaksanakan melalui metode black-box testing untuk memastikan bahwa fungsi-fungsi utama frontend berjalan sesuai dengan perilaku sistem yang dapat diamati oleh pengguna. Metode black-box testing digunakan karena fokus penelitian ini terletak pada hasil keluaran sistem, alur perpindahan halaman, respons antarmuka, serta kesesuaian fungsi dengan kebutuhan sistem, bukan pada analisis terhadap struktur kode internal. Pemilihan pendekatan ini juga sejalan dengan penelitian Angeline et al. [8] yang menerapkan black-box testing dalam proses verifikasi fungsi frontend e-commerce.

Instrumen pengujian dirancang dalam bentuk skenario uji fungsional. Setiap skenario mencakup modul yang diuji, tujuan pengujian, tahapan pengujian, input yang digunakan, keluaran yang diharapkan, keluaran aktual, serta status hasil pengujian. Keberhasilan pengujian ditentukan berdasarkan tiga indikator utama. Pertama, halaman atau komponen dapat ditampilkan sesuai dengan fungsi yang telah ditetapkan. Kedua, proses navigasi dapat berjalan mengikuti alur yang telah dirancang. Ketiga, sistem mampu memberikan respons yang tepat terhadap input pengguna, seperti menampilkan data, memproses transaksi, mengarahkan pengguna ke halaman berikutnya, maupun menampilkan status pembayaran dan booking. Suatu modul dikategorikan berhasil apabila seluruh indikator tersebut terpenuhi tanpa adanya kesalahan fungsional.

Kegiatan validasi sistem dilaksanakan oleh peneliti yang sekaligus berperan sebagai pengembang aplikasi. Proses evaluasi mengacu pada kebutuhan operasional Batik Giri Alam yang telah dirumuskan pada tahap analisis, sehingga setiap fungsi yang diimplementasikan dapat diperiksa kesesuaiannya terhadap kebutuhan tersebut. Pendekatan ini memungkinkan verifikasi dilakukan secara sistematis terhadap fitur-fitur yang telah dibangun pada frontend.

Untuk memastikan sistem berjalan sebagaimana mestinya, pengujian dilakukan menggunakan peramban desktop yang umum digunakan saat ini. Proses pengujian ini tidak dilakukan secara asal-asalan, melainkan dirancang secara menyeluruh dengan menelusuri satu per satu jalur interaksi yang tersedia di dalam aplikasi. Skenario yang diuji mencakup berbagai situasi yang mungkin dialami oleh pengguna nyata, mulai dari aktivitas pengunjung biasa di halaman publik, penggunaan berbagai fitur di area pelanggan, penyelesaian transaksi melalui proses checkout, pengujian fitur pemesanan workshop, hingga pemeriksaan fungsi-fungsi yang ada di panel admin. Semua tahapan ini diuji dengan satu tujuan yang jelas, yaitu memastikan bahwa navigasi berjalan dengan benar, tampilan antarmuka tersusun rapi dan konsisten, serta setiap fitur berfungsi sesuai dengan apa yang sudah dirancang sejak awal.

Perlu dicatat bahwa pengujian pada tahap ini sengaja dibatasi hanya pada verifikasi fungsionalitas frontend saja. Fokusnya adalah membuktikan bahwa setiap fitur mampu menjalankan tugasnya dengan baik, baik dari sudut pandang pengguna umum maupun dari sisi admin yang mengelola sistem. Dengan pembatasan ini, beberapa aspek pengujian yang lebih lanjut memang belum masuk ke dalam cakupan penelitian saat ini. Hal-hal seperti pengukuran performa sistem saat menerima beban berat, pemeriksaan celah keamanan, maupun pengukuran tingkat kepuasan pengguna belum disentuh dalam fase ini.

Pembatasan tersebut sebenarnya merupakan keputusan yang disengaja dan memiliki alasan yang cukup kuat. Sebelum sebuah aplikasi bisa dievaluasi dari sisi yang lebih kompleks, fondasinya harus dipastikan terlebih dahulu. Memastikan bahwa seluruh fungsi dasar frontend bekerja dengan benar adalah langkah awal yang tidak bisa dilewati begitu saja, karena inilah yang menjadi pijakan bagi semua proses evaluasi lanjutan yang akan dilakukan setelahnya.

Kisi-kisi instrumen pengujian black-box disajikan pada Tabel 1.

Tabel 1. Kisi-Kisi Instrumen Pengujian Black-Box Frontend Website Batik Giri Alam

Berpijak pada matriks pengujian yang telah dikonstruksi, evaluasi fungsional dieksekusi melintasi lima domain krusial pada frontend. Pengejawantahan instrumen ini menargetkan validasi menyeluruh terhadap arsitektur antarmuka aplikasi. Fase pertama membedah domain publik. Sasaran utamanya bertumpu pada pengujian aksesibilitas serta reliabilitas navigasi bagi pengunjung anonim. Penelusuran visual ini merambah halaman beranda, profil korporat (about), etalase digital (shop), spesifikasi komoditas, kurikulum workshop, hingga kanal komunikasi. Targetnya absolut. Setiap susunan informasi dalam sistem harus tampil dengan benar di layar guna memastikan perpindahan antarhalaman berjalan sesuai dengan rancangan yang sudah dibuat sebelumnya. Setelah area publik selesai diuji, pengujian kemudian dilanjutkan ke area pelanggan. Di bagian ini, seluruh fitur yang diperuntukkan bagi pengguna terdaftar diperiksa satu per satu dengan teliti. Mulai dari proses masuk ke akun, penelusuran isi dashboard, pengelolaan keranjang belanja, penambahan produk ke wishlist, pengecekan riwayat pesanan, hingga perubahan informasi profil di halaman pengaturan semuanya diuji untuk memastikan tidak ada hambatan yang dialami pengguna saat menggunakan fitur-fitur tersebut.

Pengujian kemudian bergerak ke alur transaksi, khususnya pada proses checkout. Bagian ini diperiksa secara bertahap mengikuti urutan yang seharusnya dialami oleh pengguna. Dimulai dari produk yang sudah ada di keranjang belanja, lalu ke pengisian alamat tujuan pengiriman, penghitungan ongkos kirim, pemilihan metode pembayaran, hingga kemunculan halaman konfirmasi pesanan dan informasi status pembayaran. Keseluruhan rangkaian ini perlu dipastikan berjalan mulus dari awal hingga akhir agar tidak terjadi kesalahan atau gangguan di tengah proses transaksi yang sedang berlangsung.

Selanjutnya, pengujian diarahkan ke area workshop dengan fokus pada ketahanan sistem pemesanan yang tersedia. Alur yang diuji mencakup proses pemilihan workshop yang diinginkan, pengisian formulir pendaftaran secara lengkap dan benar, penyelesaian pembayaran, serta kemampuan pengguna untuk mengakses detail pemesanan yang sudah dikonfirmasi. Semua tahapan ini perlu berjalan tanpa hambatan agar layanan workshop dapat diandalkan oleh pengguna.

Sebagai bagian terakhir dari rangkaian pengujian, area admin juga tidak luput dari pemeriksaan. Panel pengelolaan ini diuji kemampuannya dalam memantau transaksi produk yang masuk, mengelola dan memperbarui data workshop, mengawasi aktivitas pemesanan workshop dari hari ke hari, serta mengatur informasi asal pengiriman yang menjadi acuan dalam proses distribusi produk kepada pelanggan.

basis data workshop, mengawasi fluktuasi booking harian, serta mengkalibrasi parameter asal pengiriman.

Pada akhirnya, agregasi dari keseluruhan metrik evaluasi ini berfungsi sebagai parameter final penentu kelayakan aplikasi. Data empiris yang ditarik dari kelima domain tersebut mengonfirmasi tingkat presisi antara realisasi wujud frontend dengan spesifikasi fungsional yang dirumuskan saat tahap analisis awal. Komparasi ini secara mutlak memvalidasi bahwa seluruh komponen di dalam ekosistem perangkat lunak telah beroperasi tegak lurus dengan postulat perancangan.

2. Arsitektur Sistem

Arsitektur frontend Batik Giri Alam dirancang ke dalam tiga lapisan pokok. Lapisan pertama merupakan lapisan aktor pengguna yang terdiri atas Pengunjung, Customer, dan Admin. Lapisan kedua adalah lapisan frontend website yang meliputi halaman publik, autentikasi, modul customer, checkout produk, modul workshop, serta modul admin. Lapisan ketiga merupakan lapisan layanan pendukung yang mencakup payment gateway, layanan ongkir, email atau notifikasi, dan penyimpanan data. Sistem ini dibangun dengan membagi arsitekturnya ke dalam tiga lapisan utama yang masing-masing memiliki peran dan tanggung jawab yang sudah ditentukan sejak awal. Pembagian ini bukan keputusan yang dibuat secara kebetulan, melainkan dilakukan dengan sengaja agar setiap bagian sistem memiliki batas yang jelas antara satu sama lain. Dengan cara ini, hubungan antar komponen dalam sistem menjadi jauh lebih mudah dipahami dan dipetakan. Lebih dari sekadar membuat rancangan terlihat lebih rapi, pembagian beban kerja ke dalam lapisan-lapisan tersebut juga terbukti membantu menyederhanakan proses analisis, pengembangan teknis, hingga pengujian sistem secara keseluruhan.

Pembagian lapisan ini kemudian tercermin secara langsung pada bagaimana hak akses pengguna diatur di dalam aplikasi. Pada tingkatan paling dasar, pengguna yang belum login atau belum memiliki akun hanya dapat menjelajahi halaman-halaman yang bersifat publik. Area publik ini sekaligus menjadi titik awal sebelum pengguna memutuskan untuk masuk lebih jauh ke dalam sistem dengan melakukan login atau pendaftaran akun.

Setelah berhasil masuk dengan akun yang valid, status pengguna berubah menjadi pelanggan. Perubahan status ini secara otomatis membuka akses ke berbagai fitur transaksi yang sebelumnya tidak tersedia. Sebagai pelanggan, pengguna dapat mengatur informasi akun mereka sendiri, menyelesaikan proses pembelian melalui halaman checkout, hingga melakukan pemesanan slot workshop sesuai kebutuhan mereka.

Di puncak hierarki sistem, kendali penuh diserahkan kepada administrator. Berbeda dengan dua peran sebelumnya, area admin dirancang khusus sebagai pusat kendali yang memiliki wewenang paling luas dalam mengatur dan mengawasi jalannya seluruh sistem. Dari sinilah semua aktivitas operasional dipantau, dikelola, dan dikendalikan agar sistem secara keseluruhan tetap berjalan dengan stabil dan sesuai dengan yang diharapkan. Seluruh denyut nadi operasional platform dikendalikan dari satu titik terpusat. Kapabilitas dasbor manajerial tersebut memungkinkan administrator untuk melakukan audit lalu lintas pesanan, memodifikasi basis data workshop, serta memonitor beragam manuver tata kelola lainnya guna menggaransi keberlangsungan layanan. Pada bagian layanan pendukung, proses checkout produk dan booking workshop terhubung dengan payment gateway Tripay. Selain itu, checkout produk juga terintegrasi dengan layanan ongkir untuk mendukung kebutuhan pengiriman. Fitur contact dan autentikasi berkaitan dengan email atau notifikasi, sedangkan seluruh modul frontend memerlukan penyimpanan data untuk menampilkan informasi produk, workshop, pesanan, booking, dan status transaksi.

Arsitektur ini berperan sebagai penghubung antara proses perancangan, implementasi, dan pengujian. Melalui arsitektur yang terstruktur, setiap modul frontend dapat ditelusuri kembali pada kebutuhan sistem, setiap alur interaksi dapat dihubungkan dengan diagram perancangan, dan setiap skenario pengujian black-box dapat diarahkan pada domain yang sesuai. Dengan demikian, arsitektur sistem tidak hanya berfungsi sebagai dokumen teknis, tetapi juga sebagai kerangka evaluasi untuk memastikan bahwa frontend Batik Giri Alam dikembangkan secara modular, terintegrasi, dan selaras dengan kebutuhan operasional usaha.

H ASIL DAN P EMBAHASAN

A. Hasil Pengembangan Frontend Website

Hasil dari penelitian ini adalah frontend website Batik Giri Alam yang dikembangkan untuk menyatukan dua layanan utama, yaitu penjualan produk batik dan pemesanan workshop, ke dalam satu platform berbasis web. Frontend yang dihasilkan tidak hanya berperan sebagai sarana penyampaian informasi, tetapi juga menjadi antarmuka utama yang mengatur alur interaksi pengguna mulai dari eksplorasi layanan, pemilihan produk atau workshop, proses transaksi, pembayaran, hingga pemantauan status pesanan dan booking.

Arsitektur frontend yang diimplementasikan disusun berdasarkan lima domain fungsional yang saling terintegrasi, yaitu domain publik, customer, checkout produk, workshop, dan admin. Spesifikasi beban kerja pada arsitektur ini didistribusikan secara presisi melintasi berbagai klaster domain. Delineasi tersebut merupakan respons langsung terhadap disparitas peran dan manuver operasional pengguna di dalam sistem. Domain publik, sebagai garda terdepan, difungsikan murni menjadi etalase penyajian informasi bagi pengunjung anonim. Begitu eskalasi hak akses terjadi, entitas terdaftar akan dialihkan menuju domain customer. Area pelanggan berfungsi sebagai ruang pribadi yang memungkinkan setiap pengguna untuk mengatur informasi akun mereka sendiri sekaligus melihat kembali seluruh riwayat transaksi yang pernah dilakukan. Sementara itu, semua proses yang berkaitan dengan pembelian produk fisik ditangani secara khusus oleh area checkout. Area ini dirancang agar transaksi berjalan dalam urutan yang jelas dan tidak membingungkan, mulai dari titik di mana pengguna sudah menentukan produk yang ingin dibeli hingga proses pembayaran berhasil diselesaikan.

Berbeda dengan alur pembelian produk, proses pemesanan layanan workshop dikelola oleh area yang terpisah dan memiliki mekanisme kerjanya sendiri. Kelancaran area ini sangat bergantung pada dua hal utama, yaitu ketersediaan jadwal workshop yang selalu diperbarui dan sistem pemesanan yang berjalan dengan tepat dan akurat. Tanpa keduanya, pengalaman pengguna dalam memesan workshop bisa terganggu.

Di atas semua area tersebut, panel admin hadir sebagai bagian yang menanggung beban operasional paling besar dalam keseluruhan sistem. Melalui dashboard yang tersedia, admin dapat memantau seluruh aktivitas harian yang terjadi di platform, mengelola data-data penting yang menjadi tulang punggung sistem, serta mengawasi arus transaksi yang berlangsung secara langsung tanpa jeda waktu.

Keseluruhan pembagian area fungsional yang diterapkan dalam sistem ini pada akhirnya membuktikan satu hal yang cukup penting. Arsitektur frontend yang dibangun tidak hanya sekadar memenuhi standar platform e-commerce pada umumnya, tetapi sudah berkembang menjadi sesuatu yang lebih dari itu. Sistem ini mampu mengelola berbagai jenis layanan yang berbeda dalam satu aplikasi yang terintegrasi, sehingga transaksi produk dan pemesanan workshop bisa berjalan secara bersamaan tanpa saling mengganggu dan tanpa membuat pengalaman pengguna terasa tidak konsisten dari satu halaman ke halaman lainnya.

Implementasi yang dihasilkan memperlihatkan bahwa integrasi antara penjualan produk batik dan layanan workshop dalam satu platform digital memberikan nilai strategis bagi model bisnis kreatif yang dijalankan Batik Giri Alam. Arsitektur konvensional pada ekosistem e-commerce lazimnya terkungkung pada fungsionalitas dasar. Fokus sistem umumnya sebatas pada kurasi katalog, manajemen keranjang belanja, gerbang checkout, serta resolusi pembayaran. Pendekatan multi-domain yang diterapkan dalam sistem ini hadir untuk menjawab keterbatasan yang tidak bisa diselesaikan oleh arsitektur konvensional. Salah satu keunggulan terbesar dari pendekatan ini adalah kemampuannya dalam menangani dua jenis layanan yang secara mendasar memiliki cara kerja yang sangat berbeda, yaitu proses jual beli produk fisik di satu sisi, dan pengelolaan pemesanan layanan berbasis jadwal di sisi lainnya. Kedua hal ini biasanya sulit untuk disatukan dalam satu sistem tanpa mengorbankan salah satunya, namun pendekatan multi-domain berhasil menjembatani perbedaan tersebut dengan cara yang terstruktur.

Dampak dari pendekatan ini tidak hanya dirasakan pada bertambahnya jumlah fitur yang tersedia, tetapi lebih dari itu, seluruh lapisan antarmuka ikut berkembang menjadi infrastruktur yang mampu menopang kebutuhan bisnis yang jauh lebih kompleks dari sebelumnya. Frontend yang awalnya mungkin hanya dirancang untuk keperluan dasar, kini telah bertransformasi menjadi sebuah platform yang cukup matang untuk mengelola dua alur bisnis sekaligus dalam satu lingkungan yang terpadu dan saling mendukung.

Signifikansi dari rekayasa sistem ini melampaui sekadar resolusi atas kendala operasional yang spesifik di Batik Giri Alam. Luaran pengembangan yang dihasilkan sejatinya memproyeksikan cetak biru implementasi frontend yang sangat aplikatif bagi industri digital berbasis hibrida. Peleburan ragam trayektori layanan ke dalam satu ekosistem terpadu ini memberikan sebuah validasi empiris yang kuat. Strategi multi-domain terbukti esensial sekaligus sangat efektif sebagai landasan arsitektural; sebuah alternatif solusi yang presisi bagi organisasi manapun yang berambisi mengawinkan transaksi ritel dengan tata kelola penjadwalan pemesanan di bawah satu payung platform digital yang kohesif.

B. Implementasi Halaman Publik

Pengembangan domain publik difokuskan pada penyediaan informasi yang dapat diakses oleh seluruh pengunjung sekaligus berfungsi sebagai titik awal interaksi dengan layanan yang tersedia pada platform. Domain ini dirancang untuk mendukung kebutuhan penyampaian informasi, promosi layanan, serta navigasi menuju berbagai fitur utama yang disediakan oleh sistem.

Beberapa halaman telah diimplementasikan untuk memenuhi kebutuhan tersebut, Spektrum domain publik pada sistem ini diartikulasikan melalui integrasi laman home, about, dan shop. Halaman utama atau beranda dirancang sebagai titik pertama yang akan ditemui oleh siapa pun yang mengunjungi situs Batik Giri Alam. Lebih dari sekadar halaman pembuka biasa, beranda ini dibuat untuk mencerminkan identitas dan karakter bisnis Batik Giri Alam secara visual kepada pengunjung yang baru pertama kali datang. Selain menampilkan sejumlah produk unggulan sebagai gambaran awal koleksi yang tersedia, halaman ini juga sekaligus menjadi pintu masuk bagi pengunjung yang ingin mengetahui lebih lanjut tentang layanan workshop yang ditawarkan. Dengan kata lain, beranda tidak hanya berfungsi sebagai etalase, tetapi juga sebagai pemandu awal yang mengarahkan pengunjung ke berbagai bagian penting di dalam situs.

Melengkapi kesan pertama yang sudah dibangun oleh beranda, halaman tentang kami hadir untuk memberikan gambaran yang lebih lengkap dan mendalam mengenai Batik Giri Alam sebagai sebuah entitas bisnis. Di sinilah pengunjung dapat mengenal lebih jauh latar belakang berdirinya usaha ini, nilai-nilai yang dipegang, serta bagaimana bisnis ini berkembang dan beroperasi hingga saat ini. Keberadaan halaman ini menjadi cukup penting karena tidak semua pengunjung langsung memutuskan untuk membeli sebagian dari mereka terlebih dahulu ingin memahami siapa yang ada di balik produk dan layanan yang mereka temui.

Bergeser pada sektor manajerial komersial, arsitektur laman shop diwujudkan layaknya sebuah agregator katalog digital. Ruang etalase ini direkayasa secara spesifik demi mengakselerasi efisiensi penelusuran atas seluruh variasi produk yang dijajakan. Ketika konsumen menuntut investigasi data yang lebih presisi, sistem secara otomatis meresponsnya melalui halaman product detail. Laman eksklusif ini membedah rincian komoditas secara granular menyajikan deskripsi fisik, spesifikasi teknis, beserta matriks informasi pendukung lainnya. Ketersediaan data yang terukur ini merupakan parameter krusial; perannya sangat vital dalam menopang rasionalisasi konsumen sebelum mereka memutuskan untuk mengeksekusi tahapan transaksi. Sebagai penyeimbang sirkulasi ritel tersebut, halaman workshop public didedikasikan murni untuk mendiseminasi agenda layanan jasa. Gambaran umum kegiatan, struktur kurikulum, hingga prasyarat partisipasi dipaparkan secara gamblang bagi para calon peserta.

Infrastruktur publik ini pada akhirnya dikunci oleh kehadiran laman contact. Modul tersebut diintegrasikan sebagai jembatan komunikasi asinkron antara ekosistem pengunjung dan administrator pengelola. Keberadaan saluran ini praktis meniadakan kebuntuan interaksi, membuka ruang selebar-lebarnya bagi audiens untuk melempar pertanyaan, mengajukan permohonan informasi spesifik, maupun mengomunikasikan ragam urgensi lainnya. Konfigurasi dari serangkaian instrumen pada domain publik ini memanifestasikan sebuah ekosistem informasi yang teramat kohesif. Orkestrasi navigasi yang dirancang terpadu ini menggaransi bahwa setiap pengunjung anonim sanggup mengekstraksi data secara akurat, sekaligus bermanuver melintasi berbagai klaster layanan tanpa mengalami disorientasi struktural.

Gambar 11. Implementasi Halaman Publik Website Batik Giri Alam

Hasil implementasi pada domain publik memperlihatkan bahwa frontend telah membentuk alur eksplorasi yang terarah dari halaman beranda menuju dua layanan utama, yaitu katalog produk dan workshop. Penyediaan dua jalur tersebut menjadi penting karena sejak awal pengguna dapat memahami bahwa Batik Giri Alam tidak hanya menawarkan produk batik, tetapi juga menyediakan layanan workshop. Dalam perspektif customer journey, susunan halaman publik berfungsi sebagai tahap awal yang berpengaruh terhadap kelanjutan interaksi pengguna dengan sistem. Hal ini selaras dengan pandangan bahwa kualitas struktur website dapat memengaruhi tingkat keterlibatan pengguna serta mendorong pengguna untuk melanjutkan ke tindakan berikutnya dalam lingkungan digital [1], [2].

Secara analitis, domain publik memiliki peran sebagai fondasi utama dalam frontend multi-domain karena halaman-halaman pada domain ini mengarahkan pengguna menuju dua alur layanan yang berbeda. Pengguna yang memiliki tujuan membeli produk dapat diarahkan ke katalog dan halaman detail produk, sedangkan pengguna yang berminat mengikuti workshop dapat diarahkan ke halaman workshop. Dengan demikian, halaman publik tidak hanya berfungsi sebagai sarana penyampaian informasi, tetapi juga sebagai titik awal navigasi yang menghubungkan pengguna dengan layanan yang sesuai dengan kebutuhannya.

C. Implementasi Halaman Customer

Setelah pengguna berhasil masuk ke dalam akun mereka, sistem akan langsung membuka akses ke area pelanggan yang memang dirancang khusus untuk mendukung berbagai kegiatan personal dan transaksi. Area ini menjadi tempat di mana pengguna bisa mengelola informasi akun, memantau aktivitas belanja, serta mengakses berbagai layanan yang berkaitan dengan proses transaksi mereka secara lebih terorganisir.

Secara keseluruhan, area pelanggan terdiri dari beberapa halaman utama, yaitu dashboard pelanggan, keranjang belanja, wishlist, daftar pesanan, detail pesanan, dan halaman pengaturan akun.

Dashboard pelanggan berfungsi sebagai halaman pusat yang menjadi tempat pertama yang dilihat pengguna setelah login. Halaman ini dirancang agar pengguna bisa langsung mendapatkan gambaran menyeluruh mengenai aktivitas mereka di dalam platform tanpa perlu berpindah-pindah halaman terlebih dahulu. Dari sini, pengguna juga bisa dengan mudah melompat ke fitur mana pun yang mereka butuhkan hanya dalam beberapa langkah.

Untuk urusan pengelolaan transaksi, sistem menyediakan dua fitur yang saling melengkapi, yaitu keranjang belanja dan wishlist. Keranjang belanja berperan sebagai tempat penampungan sementara bagi produk-produk yang sudah siap untuk dibeli. Sementara itu, wishlist hadir sebagai ruang penyimpanan untuk produk-produk yang menarik perhatian pengguna namun belum tentu langsung ingin dibeli saat itu juga. Pengguna bisa menyimpan produk tersebut dan mempertimbangkannya kembali di lain waktu. Kombinasi kedua fitur ini membuat pengguna memiliki lebih banyak kebebasan dan fleksibilitas dalam mengambil keputusan belanja mereka.

Setelah transaksi selesai dilakukan, pengguna bisa memantau seluruh riwayat pembelian mereka melalui halaman pesanan dan detail pesanan. Kedua halaman ini bekerja secara berdampingan untuk memastikan pengguna selalu memiliki akses yang transparan terhadap semua transaksi yang pernah mereka lakukan. Tidak hanya menampilkan daftar pesanan secara umum, sistem juga menyajikan informasi yang lebih rinci mengenai setiap transaksi, termasuk produk yang dipesan dan status pemrosesannya yang diperbarui secara berkala.

Melengkapi semua fitur di atas, halaman pengaturan memberikan kendali penuh kepada pengguna dalam mengelola data pribadi mereka. Dari halaman ini, pengguna bisa memperbarui informasi profil, mengganti kata sandi untuk menjaga keamanan akun, serta menambah atau mengubah alamat pengiriman yang tersimpan. Keberadaan halaman ini memastikan bahwa pengguna tidak perlu bergantung pada pihak lain untuk mengurus data akun mereka sendiri.

Dengan hadirnya semua komponen tersebut dalam satu area yang terintegrasi, area pelanggan berhasil menjadi pusat layanan yang lengkap dan mandiri. Arsitektur ini terbukti mampu menyatukan kebutuhan pengelolaan identitas pengguna dan dinamika transaksi belanja ke dalam satu sistem yang kohesif dan mudah digunakan.

Gambar 12. Implementasi Halaman Customer Website Batik Giri Alam

Hasil implementasi memperlihatkan bahwa halaman customer berperan sebagai pusat kendali bagi pengguna dalam mengelola aktivitasnya di dalam sistem. Melalui dashboard dan halaman riwayat, pengguna dapat memantau status pesanan produk serta booking workshop secara lebih terpusat. Fitur cart, wishlist, orders, dan settings juga mendukung keberlanjutan interaksi pengguna, karena sistem tidak hanya melayani transaksi secara sesaat, tetapi juga menyediakan fasilitas untuk mengelola aktivitas pengguna secara berkelanjutan.

Dalam kerangka frontend multi-domain, domain customer memiliki fungsi strategis karena menjadi penghubung antara alur layanan produk dan alur layanan workshop. Pengguna dapat mengatur transaksi produk sekaligus memantau aktivitas booking melalui satu lingkungan akun yang sama. Kondisi ini menjadi pembeda antara frontend Batik Giri Alam dan frontend e-commerce pada umumnya yang biasanya hanya menitikberatkan pada proses pembelian produk. Dengan adanya domain customer yang terintegrasi, frontend dapat mempertahankan konsistensi pengalaman pengguna setelah pengguna melewati tahap eksplorasi layanan.

D. Implementasi Checkout dan Pembayaran Produk

Implementasi fitur checkout dirancang untuk membentuk proses pembelian produk yang tersusun dalam beberapa tahap. Alur tersebut mencakup pengisian alamat pengiriman, pemilihan opsi pengiriman, penentuan metode pembayaran, konfirmasi pesanan, akses ke halaman pembayaran, serta penampilan status transaksi. Pembagian proses ke dalam tahapan tersebut bertujuan agar pengguna dapat menyelesaikan pembelian secara runtut, jelas, dan mudah diikuti tanpa mengalami kebingungan ketika berpindah dari satu langkah ke langkah berikutnya.

Gambar 13. Implementasi Halaman Checkout dan Pembayaran Produk

Hasil implementasi pada modul checkout memperlihatkan bahwa frontend telah mampu memfasilitasi proses transaksi produk secara menyeluruh, mulai dari tahap pemilihan produk sampai penyelesaian pembayaran. Pembagian checkout ke dalam beberapa langkah membuat pengguna lebih mudah memahami informasi yang perlu diisi serta keputusan yang harus ditentukan pada setiap tahap. Pusat kendali operasional bagi entitas pengguna terdaftar bermanifestasi secara utuh pada antarmuka customer dashboard. Laman ini direkayasa khusus sebagai titik kumpul agregasi informasi. Melalui instrumen ini, pengguna secara instan memperoleh visibilitas penuh atas rekam jejak aktivitas digital mereka, sekaligus mampu bermanuver cepat menuju berbagai utilitas tanpa perlu merunut hierarki menu yang kompleks.

Mengupas dimensi manajemen transaksi, kapabilitas platform diperkuat oleh integrasi modul cart dan wishlist. Antarmuka cart menjalankan peran esensial sebagai ruang tampung bagi komoditas yang siap dieksekusi menuju eskalasi pembelian. Sebagai penyeimbang fungsional, wishlist hadir memfasilitasi kebutuhan kurasi pasif. Konsumen diberikan ruang otonom untuk mengarsipkan produk-produk potensial guna dievaluasi pada jendela waktu yang berbeda. Konfigurasi sepasang fitur ini secara fundamental memperluas fleksibilitas taktis pengguna saat mematangkan keputusan komersial mereka.

Aspek penelusuran (traceability) pasca-interaksi diwadahi lewat ketersediaan instrumen orders dan order detail. Sinkronisasi kedua laman tersebut menggaransi terciptanya transparansi historis secara absolut. Konsumen tidak sekadar diajak memantau rekam log pesanan masa lalu. Sistem membedah setiap transaksi secara granular, menyajikan matriks data spesifik mengenai komoditas beserta fluktuasi status pemrosesannya secara aktual.

Melengkapi ekosistem tersebut, otoritas tata kelola data personal didelegasikan sepenuhnya lewat kehadiran halaman settings. Ruang konfigurasi ini menjamin kemandirian pengguna dalam melakukan modifikasi akun; mulai dari pembaruan atribut profil, kalibrasi kredensial keamanan (kata sandi), hingga rotasi titik koordinat alamat pengiriman logistik. Orkestrasi yang solid antar-komponen ini pada akhirnya mengukuhkan domain customer sebagai sentral layanan terpadu. Arsitektur antarmuka ini terbukti sukses menjahit kerumitan administrasi identitas dan dinamika niaga di dalam satu payung sistem yang persisten. Kondisi ini memperkuat peran frontend sebagai pengelola alur transaksi digital. Temuan tersebut selaras dengan kajian yang menyatakan bahwa kualitas atribut website dan struktur interaksi berpengaruh terhadap efektivitas pengalaman belanja serta kemajuan pengguna menuju transaksi aktual [2], [3].

E. Implementasi Pemesanan Workshop

Selain memfasilitasi transaksi produk, frontend Batik Giri Alam juga dikembangkan untuk mendukung proses pemesanan workshop. Modul workshop ini terdiri atas beberapa halaman, yaitu workshop list, workshop detail, booking form, booking payment, booking confirmation, dan booking detail. Pada halaman workshop list, pengguna dapat menelusuri berbagai workshop yang tersedia. Setelah pengguna menentukan salah satu workshop, sistem akan mengarahkan pengguna ke halaman workshop detail untuk melihat informasi layanan secara lebih rinci. Tahap berikutnya, pengguna mengisi formulir pemesanan, melanjutkan pembayaran melalui halaman booking payment, menerima konfirmasi pada halaman booking confirmation, dan melihat rincian akhir pemesanan melalui halaman booking detail.

Gambar 14. Implementasi Halaman Pemesanan Workshop

Hasil implementasi memperlihatkan bahwa frontend dapat mengakomodasi pola interaksi workshop yang memiliki karakteristik berbeda dari proses pembelian produk. Pada transaksi produk, perhatian pengguna lebih diarahkan pada pemilihan item, penentuan jumlah, opsi pengiriman, dan pembayaran. Sebaliknya, pada pemesanan workshop, pengguna perlu memahami informasi layanan, menentukan jadwal, mengisi data pemesanan, menyelesaikan pembayaran, serta memantau status booking. Perbedaan alur tersebut menunjukkan bahwa frontend untuk layanan workshop tidak dapat diperlakukan sepenuhnya sama dengan frontend e-commerce konvensional.

Secara akademik, bagian ini menjadi salah satu kontribusi penting dalam penelitian karena memperlihatkan perluasan peran frontend dari sekadar mendukung transaksi produk menjadi pengelola layanan berbasis pemesanan. Implementasi modul workshop menunjukkan bahwa frontend multi-domain harus mampu menangani variasi karakteristik layanan dalam satu sistem yang tetap konsisten. Hasil ini sejalan dengan penelitian mengenai sistem reservasi daring yang menegaskan bahwa kejelasan alur, status pemesanan, ketersediaan layanan, dan mekanisme pembayaran merupakan aspek penting dalam mendukung keputusan pengguna pada layanan booking [9], [10], [11], [12], [13].

F. Implementasi Halaman Admin

Pada sisi administratif, pengembangan frontend diarahkan untuk mendukung berbagai aktivitas operasional yang diperlukan dalam pengelolaan layanan Batik Giri Alam. Sejumlah halaman telah diimplementasikan untuk memfasilitasi kebutuhan tersebut, meliputi dashboard admin, orders, order detail, workshop management, booking monitoring, dan shipping origin settings. Kehadiran modul-modul tersebut memungkinkan proses pengawasan dan pengelolaan sistem dilakukan secara terpusat melalui satu lingkungan aplikasi.

Sebagai sentral komando operasional, dashboard admin diposisikan menjadi titik kendali absolut pada arsitektur perangkat lunak ini. Antarmuka tersebut memproyeksikan agregasi visual dari seluruh manuver yang tengah beroperasi di dalam ekosistem sistem. Kehadiran instrumen ini membebaskan administrator dari keharusan untuk mengeksplorasi setiap hierarki modul secara terfragmentasi. Laman ini secara otonom menyodorkan abstraksi yang komprehensif; merangkum sirkulasi transaksi konvensional beserta dinamika layanan operasional harian secara instan.

Berpindah pada ranah tata kelola niaga komoditas, infrastruktur sistem turut diperkuat oleh kehadiran modul orders dan order detail. Integrasi sepasang antarmuka ini secara krusial menopang kapabilitas audit tingkat manajerial. Administrator pada akhirnya dibekali instrumen yang valid untuk membedah anatomi pesanan secara granular. Fasilitas penelusuran ini memastikan setiap rincian historis maupun status faktual pada tiap entitas transaksi dapat ditinjau dan divalidasi dengan tingkat presisi yang maksimal.

Selain aktivitas penjualan produk, aspek pengelolaan workshop juga difasilitasi melalui modul workshop management. Modul ini digunakan untuk mengatur data workshop yang tersedia sehingga informasi yang ditampilkan kepada pengguna tetap terkelola dengan baik. Sementara itu, pemantauan terhadap reservasi workshop dilakukan melalui halaman booking monitoring yang menyediakan informasi mengenai aktivitas pemesanan yang terjadi pada sistem. Adapun kebutuhan yang berkaitan dengan proses distribusi produk didukung oleh fitur shipping origin settings, yang berfungsi untuk mengelola informasi asal pengiriman sebagai bagian dari pengaturan operasional layanan. Secara keseluruhan, implementasi domain admin dirancang untuk memastikan proses pengawasan, pengelolaan data, dan pengendalian operasional dapat dilakukan secara lebih efektif dan terintegrasi.

Gambar 15. Implementasi Halaman Admin Website Batik Giri Alam

Hasil implementasi menunjukkan bahwa frontend admin mampu mengakomodasi kebutuhan operasional yang tidak dapat dipenuhi jika sistem hanya difokuskan pada pengguna umum. Melalui dashboard dan fitur monitoring, admin dapat memantau pesanan produk serta pemesanan workshop secara terpusat. Hal tersebut penting karena keberhasilan frontend tidak hanya ditentukan oleh kemudahan pengguna dalam melakukan transaksi, tetapi juga oleh kemampuan sistem dalam mendukung pengelolaan kegiatan operasional.

Dalam konsep frontend multi-domain, domain admin berperan sebagai komponen utama yang memungkinkan pengelolaan internal terhadap dua layanan inti, yaitu penjualan produk dan pemesanan workshop. Jika domain admin tidak tersedia, sistem hanya akan berfungsi sebagai media transaksi bagi pengguna tanpa mendukung proses manajemen bisnis. Dengan demikian, implementasi halaman admin memperkuat nilai praktis penelitian ini karena frontend yang dikembangkan tidak hanya berfungsi sebagai media informasi dan transaksi, tetapi juga sebagai pendukung aktivitas operasional.

G. Hasil Pengujian Sistem

Pengujian sistem dilaksanakan dengan metode black-box testing untuk menilai kesesuaian fungsi frontend terhadap kebutuhan sistem yang telah ditetapkan. Fokus pengujian mencakup lima domain utama, yaitu domain publik, customer, checkout produk, workshop, dan admin. Setiap skenario uji disusun berdasarkan fungsi inti yang telah diidentifikasi pada tahap analisis kebutuhan dan direalisasikan pada tahap pengembangan. Suatu modul dinyatakan berhasil apabila input yang diberikan mampu menghasilkan keluaran sesuai fungsi yang diharapkan, halaman dapat ditampilkan secara tepat, serta alur navigasi berjalan tanpa adanya kesalahan fungsional.

Tabel 2. Hasil Pengujian Black-Box Frontend Website Batik Giri Alam

Berdasarkan hasil pengujian, 10 skenario black-box yang meliputi domain publik, customer, checkout produk, workshop, dan admin memperoleh status berhasil. Temuan ini menunjukkan bahwa seluruh fungsi utama pada frontend mampu berjalan sesuai dengan skenario pengujian yang telah ditentukan. Keberhasilan pada domain publik menandakan bahwa sistem dapat menyajikan informasi awal serta menyediakan akses menuju layanan utama. Keberhasilan pada domain customer membuktikan bahwa pengguna dapat mengelola akun dan aktivitas transaksinya. Keberhasilan pada domain checkout produk menunjukkan bahwa proses pembelian dapat dilakukan secara bertahap hingga sistem menampilkan status pembayaran. Keberhasilan pada domain workshop memperlihatkan bahwa proses booking dapat berjalan mulai dari pemilihan layanan hingga tampilan detail booking. Sementara itu, keberhasilan pada domain admin menunjukkan bahwa frontend dapat mendukung monitoring pesanan, monitoring booking, dan pengelolaan workshop.

Hasil pengujian tersebut menegaskan bahwa frontend Batik Giri Alam telah memenuhi kebutuhan fungsional utama yang ditetapkan pada tahap analisis. Selain itu, penerapan black-box testing sesuai dengan arah penelitian ini karena proses validasi dilakukan berdasarkan perilaku sistem yang dapat diamati oleh pengguna, bukan melalui pemeriksaan struktur kode internal. Pendekatan tersebut selaras dengan penelitian Angeline et al. [8] yang menggunakan black-box testing untuk memastikan bahwa fungsi frontend berjalan sesuai dengan rancangan. Bottom of Form

H. Pembahasan

Hasil dari proses pengembangan ini menunjukkan bahwa frontend website Batik Giri Alam berhasil membuktikan sesuatu yang cukup berarti. Dua jenis layanan yang sejatinya memiliki cara kerja dan karakteristik yang berbeda, yaitu penjualan produk fisik dan pemesanan workshop, kini dapat berjalan berdampingan dalam satu platform yang sama tanpa saling mengganggu. Penyatuan ini bukan sekadar pencapaian teknis semata, tetapi juga membawa manfaat yang langsung bisa dirasakan oleh pengguna dalam keseharian mereka. Dengan adanya satu antarmuka yang konsisten dan terpadu, pengguna tidak lagi perlu repot berpindah dari satu sistem ke sistem lain hanya karena ingin mengakses layanan yang berbeda. Semuanya kini tersedia di tempat yang sama, dengan tampilan yang seragam, sehingga pengalaman menggunakan platform ini terasa lebih nyaman, efisien, dan tidak membingungkan.

Secara konseptual, frontend yang dibangun dalam penelitian ini menembus batasan fungsinya yang selama ini hanya dikenal sebagai sekadar lapisan penyaji informasi visual. Lebih dari itu, komponen ini bertindak sebagai pengelola utama yang memfasilitasi dua alur interaksi digital secara berdampingan. Kedua alur tersebut telah dirancang secara khusus untuk menjawab ekspektasi pengguna, baik saat mereka ingin melakukan transaksi pembelian produk fisik maupun ketika memesan jadwal layanan.

Khusus pada skenario penjualan produk, frontend mengawal rangkaian transaksi pengguna dengan sangat mulus dan berkesinambungan. Tahapannya dibuat mengalir secara logis: mulai dari penjelajahan katalog, pembacaan rincian barang, pengelolaan item di keranjang belanja, hingga masuk ke proses checkout dan tahap pelunasan. Sebagai penutup, pengguna langsung menerima rincian pesanan yang telah mereka buat. Keterkaitan antarfitur yang tertata rapi ini sukses membentuk sistem transaksi yang terarah, sehingga pengalaman berbelanja menjadi jauh lebih efisien dan tentunya sangat mudah dipahami oleh siapa saja.. Sementara itu, pada alur workshop, frontend memfasilitasi pemilihan layanan, pengisian formulir booking, pembayaran, konfirmasi, serta pemantauan status booking.

Dilihat dari sudut pandang pengalaman pengguna, pembagian frontend ke dalam domain publik, customer, checkout produk, workshop, dan admin mampu menciptakan alur interaksi yang lebih tertata. Struktur modular tersebut menjadi penting karena kualitas website tidak hanya ditentukan oleh banyaknya fitur yang tersedia, tetapi juga oleh kemampuan sistem dalam mengarahkan perpindahan pengguna dari satu tahap ke tahap berikutnya secara logis, konsisten, dan minim hambatan. Melalui pemisahan domain, pengguna dapat membedakan alur pembelian produk dan alur pemesanan workshop tanpa harus berpindah dari lingkungan website yang sama. Kondisi ini sejalan dengan pandangan bahwa kualitas pengalaman digital dipengaruhi oleh kemampuan sistem dalam mengelola customer journey secara konsisten [1], [2].

Pada domain transaksi produk, hasil implementasi menunjukkan bahwa katalog produk, detail produk, keranjang, checkout bertahap, pembayaran, dan detail pesanan telah mampu menunjang proses pembelian secara terstruktur. Susunan tersebut memperlihatkan bahwa frontend dirancang untuk menekan hambatan selama proses transaksi karena pengguna diarahkan melalui tahapan yang jelas. Dengan demikian, frontend tidak hanya menyediakan fitur pembelian, tetapi juga membentuk alur transaksi yang lebih mudah dipahami oleh pengguna. Temuan ini mendukung penelitian sebelumnya yang menyatakan bahwa atribut website dan struktur interaksi berpengaruh terhadap efektivitas pengalaman belanja digital [2], [3].

Penerapan sistem pada domain workshop memunculkan pola interaksi yang cukup unik. Kebutuhan operasional ini nyatanya sangat berbeda jika disandingkan dengan alur belanja fisik pada platform e-commerce konvensional.

Pada layanan jasa berbasis waktu ini, alur interaksi tidak berhenti pada sekadar memilih layanan. Pengguna diarahkan untuk melewati serangkaian tahapan prosedural yang lebih rinci; mulai dari proses memahami materi kegiatan, mencocokkan ketersediaan jadwal, mengisi formulir pemesanan, melunasi pembayaran, hingga memantau pembaruan status reservasi mereka.

Tingkat kerumitan tersebut menegaskan sebuah kesimpulan teknis. Perancangan frontend khusus untuk fasilitas workshop mutlak membutuhkan strategi antarmuka yang berbeda dari modul transaksi barang, kendati kedua layanan ini hidup dan saling terintegrasi di dalam satu ekosistem digital yang sama. Oleh sebab itu, keberadaan domain workshop menjadi salah satu aspek penting dalam arsitektur sistem yang dikembangkan karena memungkinkan integrasi layanan berbasis produk dan layanan berbasis reservasi secara terpadu.

Apabila dikaitkan dengan penelitian yang dilakukan oleh Angeline et al. [8], terdapat perbedaan yang cukup menonjol pada ruang lingkup layanan yang diakomodasi oleh frontend. Studi KIKA lebih menitikberatkan pada implementasi fitur-fitur e-commerce, seperti autentikasi pengguna, halaman utama, pengelolaan transaksi, keranjang belanja, dan proses checkout. Sementara itu, pengembangan yang dilakukan pada penelitian ini mencakup area yang lebih luas dengan menambahkan modul reservasi workshop serta domain administratif yang mendukung kebutuhan pengawasan operasional. Perluasan cakupan tersebut menghasilkan sebuah frontend yang mampu menangani tiga kebutuhan utama secara bersamaan, yaitu transaksi produk, pemesanan layanan, dan pengelolaan aktivitas operasional melalui panel administrasi.

Keandalan implementasi yang dihasilkan turut dikonfirmasi melalui pengujian fungsional menggunakan pendekatan black-box. Seluruh skenario pengujian yang diterapkan pada domain publik, customer, checkout produk, workshop, dan admin memberikan hasil yang sesuai dengan keluaran yang diharapkan. Temuan tersebut mengindikasikan bahwa fitur-fitur yang dikembangkan tidak hanya berhasil diwujudkan pada tingkat antarmuka, tetapi juga mampu menjalankan fungsi sesuai spesifikasi yang telah ditetapkan pada tahap analisis kebutuhan. Konsistensi hasil pengujian pada setiap domain memperlihatkan bahwa pendekatan pengembangan yang diterapkan mampu menghasilkan frontend yang terintegrasi dan memiliki pemisahan fungsi yang jelas antar modul.

Dari perspektif implementasi, sistem yang dibangun memberikan dukungan bagi Batik Giri Alam dalam mengelola aktivitas penjualan produk dan reservasi workshop melalui satu platform digital yang terpusat. Di sisi lain, kontribusi akademik yang dihasilkan terletak pada penyajian model pengembangan frontend multi-domain yang dapat dijadikan referensi pada konteks bisnis kreatif dengan karakteristik layanan yang beragam. Integrasi berbagai proses bisnis ke dalam satu lingkungan frontend menunjukkan bahwa kebutuhan e-commerce dan layanan berbasis booking dapat dikelola secara bersamaan tanpa mengurangi konsistensi pengalaman pengguna maupun efektivitas operasional sistem. Temuan ini memperluas perspektif pengembangan frontend dengan menempatkan integrasi layanan heterogen sebagai bagian penting dalam perancangan platform digital modern.

S IMPULAN

Pengembangan frontend website Batik Giri Alam menghasilkan sebuah platform yang mampu mengakomodasi dua jenis layanan dalam satu lingkungan digital yang terintegrasi, yaitu penjualan produk batik dan reservasi workshop. Arsitektur frontend disusun ke dalam lima domain fungsional yang meliputi domain publik, customer, checkout produk, workshop, dan admin. Struktur tersebut memungkinkan seluruh proses bisnis berjalan secara berkesinambungan, mulai dari penyampaian informasi kepada pengunjung, pengelolaan transaksi produk, pelaksanaan reservasi workshop, hingga aktivitas pengawasan yang dilakukan oleh administrator.

Hasil pengembangan sistem ini mempertegas bahwa peran frontend dalam sebuah aplikasi web sudah jauh melampaui fungsinya yang selama ini hanya dipahami sebagai tampilan visual penyampai informasi. Dalam konteks platform Batik Giri Alam, frontend justru menjadi tulang punggung yang menopang dan menggerakkan seluruh proses bisnis yang berjalan di dalamnya.

Pada sisi penjualan produk, antarmuka yang dibangun mampu menuntun pengguna melewati setiap tahapan belanja dengan cara yang terasa alami dan tidak membingungkan. Perjalanan pengguna dimulai dari menjelajahi katalog produk yang tersedia, membaca informasi detail setiap barang, mengatur isi keranjang belanja, melanjutkan ke proses checkout, menyelesaikan pembayaran, hingga akhirnya memantau status pesanan yang sudah ditempatkan. Setiap langkah dirancang agar sambung-menyambung dengan mulus sehingga pengguna tidak merasa terjeda di mana pun dalam prosesnya.

Hal serupa juga berlaku pada layanan workshop yang ditawarkan. Sistem menyediakan alur yang sama terstrukturnya bagi siapa saja yang ingin mendaftarkan diri. Mulai dari menelusuri daftar workshop yang tersedia, membaca informasi lengkap tentang setiap kegiatan, mengisi formulir pendaftaran, menyelesaikan pembayaran, hingga mendapatkan konfirmasi dan rincian pemesanan secara transparan semuanya dapat dilakukan dalam satu rangkaian proses yang runtut dan mudah diikuti.

Agar kedua lini layanan tersebut dapat berjalan dengan lancar setiap harinya, seluruh kendali operasional dipusatkan pada panel admin. Dari dashboard ini, pengelola platform memiliki akses ke berbagai alat bantu yang mereka butuhkan, mulai dari memantau transaksi produk yang masuk, memperbarui data dan jadwal workshop, mengawasi aktivitas pemesanan, hingga mengatur informasi pengiriman yang digunakan dalam distribusi produk kepada pelanggan.

Sebagai bukti akhir bahwa sistem ini benar-benar layak untuk digunakan, seluruh fungsionalitas yang telah dibangun kemudian diuji secara menyeluruh menggunakan metode black-box testing. Hasil pengujian ini memberikan konfirmasi yang kuat bahwa setiap fitur yang diuji berhasil memberikan respons yang tepat sesuai dengan skenario yang diberikan. Tidak ada fungsi yang meleset dari ekspektasi awal, sehingga dapat disimpulkan bahwa aplikasi ini telah berjalan sesuai dengan rancangan fungsional yang sudah ditetapkan sejak tahap perencanaan. Kebutuhan operasional turut diakomodasi melalui domain admin yang menyediakan fasilitas pemantauan transaksi, pengelolaan data workshop, monitoring reservasi, dan pengaturan informasi pengiriman. Kesesuaian implementasi terhadap kebutuhan yang telah dirumuskan sebelumnya diperkuat oleh hasil pengujian black-box, di mana seluruh skenario pengujian yang diterapkan menghasilkan keluaran sesuai dengan fungsi yang diharapkan.

Hasil rekayasa sistem ini menegaskan bahwa frontend tidak lagi sekadar etalase visual pembawa informasi, melainkan mesin penggerak yang menopang seluruh proses bisnis di dalam platform. Khusus pada sektor penjualan produk, antarmuka aplikasi dengan mulus memandu konsumen melewati serangkaian aktivitas niaga. Rute ini terbentang dari penjelajahan katalog, peninjauan rincian barang, pengaturan keranjang belanja, hingga tahapan checkout dan pembayaran yang ditutup dengan kemudahan melacak pesanan.

Berpindah pada lini layanan jasa, fasilitas workshop didukung oleh alur yang sama terstrukturnya. Sistem memfasilitasi calon peserta untuk mengeksplorasi daftar kegiatan, memahami informasi acara, mengisi formulir reservasi, menuntaskan kewajiban finansial, hingga mendapatkan rincian booking mereka secara transparan. Agar kedua roda bisnis tersebut berputar stabil, kelancaran operasional harian dikendalikan sepenuhnya melalui domain admin. Dasbor manajerial ini membekali pengelola dengan beragam utilitas sentral, mencakup pemantauan lalu lintas transaksi, pemutakhiran data workshop, pengawasan reservasi, serta pengaturan titik pengiriman logistik.

Sebagai pembuktian akhir atas keandalan sistem, presisi dari seluruh implementasi ini telah diuji secara komprehensif menggunakan metode pengujian black-box testing. Evaluasi teknis tersebut memberikan validasi yang mutlak; setiap skenario uji yang dieksekusi terbukti sukses merespons instruksi dengan akurat, menggaransi bahwa aplikasi telah beroperasi persis seperti rancangan fungsional awal.

U CAPAN T ERIMA K ASIH

Penulis mengucapkan terima kasih kepada Batik Giri Alam yang telah memberikan data, kebutuhan sistem, dan dukungan selama proses pengembangan frontend website penjualan produk dan pemesanan workshop. Ucapan terima kasih juga disampaikan kepada Universitas Amikom Purwokerto, dosen pembimbing, serta seluruh pihak yang telah memberikan arahan akademik, fasilitas, dan dukungan selama proses penelitian dan penyusunan artikel ini. Dukungan tersebut berperan penting dalam penyelesaian penelitian ini sehingga frontend website Batik Giri Alam dapat dirancang, diimplementasikan, dan diuji sesuai kebutuhan sistem.