## IMPLEMENTASI FRAMEWORK TAILWINDCSS PADA FRONTEND WEBSITE SUPPLY CHAIN MANAGEMENT CV. MARVELINDO UTAMA
Rayhan Hafidh Wiarso, Toni Anwar Teknik Informatika, Institut Teknologi Telkom Purwokerto Jl. DI Panjaitan No.128, Purwokerto Kidul, Kec. Purwokerto Sel., Kabupaten Banyumas, Indonesia
20102138@ittelkom-pwt.ac.id

## ABSTRAK
CV Marvelindo Utama adalah perusahaan telekomunikasi yang berfokus pada penjualan produk Smartfren. Tantangan utamanya adalah manajemen data yang melibatkan banyak spreadsheet terkait pengadaan, produksi, distribusi, dan manajemen stok, sehingga proses bisnis menjadi kurang efisien dan efektif. Penelitian ini bertujuan mengatasi  masalah  tersebut  dengan  membuat  platform Supply  Chain  Management (SCM)  berbasis  website menggunakan  TailwindCSS  untuk frontend .  Metode Rapid  Application  Development (RAD)  digunakan  untuk pengembangan sistem yang cepat dan  mudah beradaptasi dengan perubahan, serta pengujian dilakukan dengan Blackbox Testing . Data dikumpulkan melalui observasi dan wawancara dengan pemilik CV Marvelindo Utama, Bapak  Pinky  Widya  Halim.  Hasil  penelitian  menghasilkan  solusi  dari  permasalahan  yang  dialami  perusahaan yaitu sebuah sistem  manajemen rantai pasok berbasis website dengan persentasi keberhasilan  blackbox testing sebesar 100% .
Kata kunci :  Website, Manajemen Rantai Pasok, Rapid Application Development, Frontend, TailwindCSS.

## 1. PENDAHULUAN
CV  Marvelindo  Utama  adalah  perusahaan  yang berlokasi  di  Cilacap,  Jawa  Tengah.  Perusahaan  ini berfokus  pada  penjualan  produk  Smartfren,  seperti kartu  perdana  dan  voucher  paket  data,  baik  fisik maupun digital. Perusahaan mempunyai outlet cabang yang  tersebar  di  Banyumas  Raya.  Sekarang perusahaan  sedang  menghadapi  masalah  dalam pendistribusian  barang  ke  outlet  cabang,  banyaknya data  transaksi  pendistribusian  barang  berdampak mengurangi  efektivitas  perusahaan.  Pendistribusian yang  lebih  luas  dan  mudah  diperoleh  dapat meningkatkan  efektivitas  distribusi  dan  peluang penjualan produk[1].
Meskipun  telah  menggunakan  komputerisasi, perusahaan  masih  menghadapi  kendala  dengan banyaknya  data  spreadsheet  yang  dikelola  secara manual  terkait  pengadaan,  produksi,  distribusi,  dan manajemen  stok.  Hal  ini  mengurangi  efisiensi  dan efektivitas  operasional.  Oleh  karena  itu,  CV Marvelindo  Utama  memerlukan  sistem  yang  lebih sistematis  dan  terorganisir  untuk  pengelolaan  alur pasokan barang berupa manajemen rantai pasok.
Usaha  yang  dilakukan  oleh  CV  Marvelindo Utama adalah pengembangan manajemen rantai pasok berbasis website .  Manajemen  rantai  pasok  adalah kolaborasi  antara  penyedia  yang  bekerja  sama  untuk mengelola  proses  bisnis,  memastikan  ketersediaan produk,  jasa,  dan  pertukaran  informasi.  Tujuan utamanya  adalah  menciptakan  nilai  tambah  bagi pelanggan  dan  pihak-pihak  terkait.  Implementasi manajemen  rantai  pasok  dalam  operasional  bisnis memerlukan integrasi rantai pasok untuk meningkatkan efisiensi dan efektivitas prosedur, serta kepuasan konsumen. Integrasi  ini  juga  meningkatkan transparansi  dan  visibilitas  dalam  rantai  pasokan,
meminimalkan  risiko,  dan  meningkatkan  ketepatan pengiriman  [2] [3].
Isu yang perlu diperhatikan dalam pengembangan website adalah  terkait frontend . Frontend  adalah  elemen  sistem  yang  memberikan tampilan  kepada  pengguna,  bertanggung  jawab  atas pembangunan  aspek  visual  dan  antarmuka  pengguna pada suatu sistem [4].
Salah satu framework yang dapat meningkatkan frontend adalah  TailwindCSS,  yang  digunakan sebagai  kerangka  kerja  CSS  dalam  pengembangan web.  TailwindCSS  membantu  proses  implementasi desain antarmuka website dengan mendefinisikan gaya setiap  komponen  dan  elemen  dalam  bentuk class attribute [5].
Metode pengembangan website yang digunakan yaitu  metode Rapid Application Development (RAD) dan alat yang digunakan dalam pengujian website yang digunakan yaitu blackbox testing yang dilakukan oleh tenaga ahli .

## 2. TINJAUAN PUSTAKA
2.1. Penelitian Sebelumnya
Terdapat  beberapa jurnal yang memiliki keterkaitan  dengan  penelitian  ini.  Berikut  adalah sejumlah  penelitian  sebelumnya  yang  berfokus  pada frontend website yang berhubungan dengan penelitian ini.
Pada  penelitian  [5],  penelitian  ini  bertujuan membuat  sistem  yang  dapat  memenuhi  alur  operasi standar dalam pendaftaran dan pendataan diklat, serta perekaman  jam  pelajaran  dari  setiap  ASN  yang terdaftar. Sistem ini dirancang menggunakan pendekatan  yang  berfokus  pada  objek,  menerapkan model desain Model-View-Controller , dan mengimplementasikan  model  pengembangan  SDLC Waterfall .  Bahasa  pemrograman  PHP, framework
Laravel,  dan  MySQL  digunakan  untuk  membangun aplikasi  ini,  dengan  dukungan  TailwindCSS  untuk antarmuka sistem.
Kemudian penelitian [6], Penelitian ini  membuat galeri  fotografi  untuk  memudahkan  fotografer menyimpan dan memamerkan fotografi secara daring menggunakan  CSS framework TailwindCSS  yang dilengkapi dengan fitur responsif agar pengguna dapat membuka situs melalui perangkat seluler.
Penerapan metode rapid application development pada  penelitian  [7],  Penelitian  ini dirancang  untuk  menangani  kendala  yang  dihadapi oleh Anbiya Jastip, terutama terkait dengan pencatatan dan  penyelidikan  barang  secara  manual.  Dengan adanya  sistem  informasi  ini,  diharapkan  proses pencatatan  serta  pemantauan  dapat  berjalan  lebih efektif  dan  terorganisir.  Selain  itu,  sistem  ini  juga diharapkan  dapat  memberikan  kemudahan  bagi pelanggan dalam mengetahui biaya kirim tanpa perlu men- download banyak gambar.
Kemudian  penerapan  metode rapid application development (RAD) dan CSS framework TailwindCSS  pada  penelitian  [8],  Penelitian  ini bertujuan  membuat  aplikasi  untuk  mempermudah pelanggan  dalam  memperoleh  informasi  tentang informasi  barang  yang disewakan tanpa harus datang ke tempat penyewaan serta dapat melakukan booking barang yang akan disewa.
Penelitian  [9]  tentang  metode  pengembangan rapid  application  development (RAD)  dan  CSS framework TailwindCSS.  Penelitian  ini  bertujuan mengembangkan  aplikasi  penyedia  jasa  pernikahan yang  dibuat  untuk  membantu  calon  pengantin menemukan  dan  memilih  vendor  atau  penyedia layanan  pernikahan,  seperti  vendor  catering,  vendor dekorasi, vendor video dan foto, dan sebagainya.

## 2.1. LANDASAN TEORI 2.2. Manajemen Rantai Pasok
Manajemen  rantai  pasok  adalah  mekanisme untuk mengoptimalkan produktivitas total perusahaan dalam  rantai  suplai  dengan  mengoptimalkan  waktu, lokasi,  dan  aliran  kuantitas  bahan.  Penerapan  SCM memungkinkan perusahaan untuk memenuhi kepuasan  pelanggan,  mengembangkan  produk  tepat waktu, mengurangi biaya pengelolaan persediaan dan pengiriman  produk,  serta  mengelola  industri  dengan cermat dan fleksibel [10].

## 2.3. Website
Website atau  situs,  adalah  serangkaian  halaman yang menyajikan informasi dalam bentuk teks, gambar diam  atau  bergerak,  animasi,  video,  suara,  atau kombinasi  dari  semuanya.  Informasi  ini  bisa  bersifat statis atau dinamis, membentuk bangunan yang saling terhubung dan dapat diakses melalui jaringan halaman yang terhubung satu sama lain [11].
2.4. PHP  (Hypertext Preprocessor) PHP  ( Hypertext  Preprocessor )  adalah  bahasa scripting server-side yang digunakan untuk membentuk website dinamis.  Keunggulan  PHP dibandingkan  bahasa  pemrograman  lain  adalah kemudahannya  untuk  dipahami,  kompatibilitasnya dengan semua sistem operasi, dan kinerja yang cepat. PHP  juga  terkenal  karena  memiliki  fungsi built-in yang  lengkap.  Server-side  scripting  mengacu  pada serangkaian proses yang dijalankan di server sebelum hasilnya  dikirim  ke  browser  pengguna,  sehingga pengguna menerima file dalam format HTML [12].

## 2.5. Laravel
Laravel  merupakan  suatu framework  web berbasis  PHP  yang open  source dan  tidak  dipungut biaya.  Pencipta  laravel  yaitu  Taylor  Otwell.  Laravel ditujukan  untuk  pembangunan  aplikasi  web  berbasis pola MVC. Struktur pola MVC pada umumnya sedikit berbeda  dengan  struktur  pola  MVC  pada  laravel. Laravel memiliki routing yang dapat menghubungkan request  dari  user  dan  controller,  sehingga  controller tidak dapat secara langsung menerima request tersebut [13].

## 2.6. HTML (HyperText Markup Language)
HTML  ( HyperText  Markup  Language )  adalah bahasa pemrograman yang digunakan untuk membuat halaman  website,  memungkinkan  penyajian  berbagai informasi seperti gambar dan teks pada web browser. HTML terus berkembang seiring dengan meningkatnya pengguna internet. Untuk menciptakan halaman  web  yang  lebih  berkualitas,  HTML  perlu terus  ditingkatkan.  Pengembangan  HTML  dikelola oleh  organisasi  bernama  W3C  (World  Wide  Web Consortium) [14].

## 2.7. CSS (Cascading Style Sheets)
CSS  ( Cascading  Style  Sheets )  adalah  bahasa yang  digunakan  untuk  menampilkan  halaman  web dengan  mengatur  warna,  tata  letak,  dan font .  Web developer  dapat  menggunakan  CSS  untuk  membuat halaman web yang responsif terhadap berbagai ukuran layar.  Umumnya,  CSS  dibuat  terpisah  dari  halaman HTML, meskipun bisa juga ditambahkan langsung ke dalam  HTML.  Tujuan  pemisahan  ini  adalah  untuk mempermudah  pengaturan  halaman  HTML  yang memiliki desain serupa [15].

## 2.8. RAD  (Rapid Application Development)
RAD ( Rapid Application Development ) merupakan  metode  pengembangan  dan software terkait  yang  menerapkan  pendekatan  berorientasi objek  dalam  pembuatan  sistem  komputer  baru.  RAD memiliki tujuan untuk mempercepat proses perpindahan dari fase perancangan ke pengimplementasian sistem TI. Akhirnya, tujuan dari RAD adalah untuk menyikapi kebutuhan  bisnis  yang berkembang dengan konsisten [16].
Gambar 1. Siklus rapid application development[17].
Alur  penelitian  berdasarkan  siklus  RAD  ( Rapid Application  Development )  Pada  gambar  di  atas mencakup tahap Requirements Planning , RAD Design Workshop ,  dan Implementation .  Tahap  akhir  adalah pengujian dan pengenalan sistem. a. Requirements  Planning (Perencanaan  Syarat- Syarat) Pada tahap ini, pengguna dan analis bertemu untuk mengidentifikasi  tujuan  aplikasi  atau  sistem  serta mengidentifikasi  syarat-syarat  informasi  yang diperlukan untuk mencapai tujuan tersebut.
b. RAD Design Workshop (Workshop Desain RAD)
 Bekerja  dengan  pengguna  untuk  merancang sistem:
Pada  tahap  ini,  proses  desain  dilakukan  dan perbaikan  dilakukan  jika  ada  ketidaksesuaian desain  antara  pengguna  (user)  dan  analis. Keterlibatan  aktif  pengguna  sangat  penting untuk  mencapai  tujuan,  karena  mereka  dapat langsung  memberikan  komentar  jika  ada ketidaksesuaian pada desain.
 Membangun sistem:
Setelah  desain  sistem  disetujui  oleh  pengguna dan  analis,  programmer  mengembangkan desain menjadi program. Keterlibatan pengguna  sangat  diperlukan  supaya  sistem yang dikembangkan sesuai dengan permintaan mereka.
c. Implementation
Pada  tahap  implementasi,  analis  bekerja  secara intens  dengan  pengguna  selama  workshop  dan merancang  aspek-aspek  bisnis  dan  non-teknis perusahaan.  Setelah  aspek-aspek  ini  disetujui  dan sistem-sistem dibangun, pengujian aplikasi dilakukan  menggunakan  pengujian  blackbox testing.  Pengujian  ini  digunakan  untuk  mengukur fungsi yang ada pada website[17].

## 2.9. Blackbox Testing
Blackbox  testing berfokus  pada  kesesuaian software  dengan  kebutuhan  pengguna  yang  telah ditentukan  sejak  awal  perancangan.  Pengujian  ini bertujuan  untuk  memastikan  bahwa  kegunaan,  input, dan  output  dari  software  sesuai  dengan  persyaratan yang  dibutuhkan.  Item  uji  yang  telah  disusun dilakukan  sesuai  dengan  metode blackbox  testing . Hasil  dari  pengujian  ini  menunjukkan  bahwa keseluruhan  proses  sistem  berjalan  dengan  baik  . Blackbox testing menekankan verifikasi bahwa setiap proses  beroperasi  sesuai  dengan  kebutuhan  yang
diinginkan.  Penguji  dapat  mengartikan  himpunan kondisi  masukan  dan  menjalankan  pengujian  pada fungsi  khusus  dari  sistem.  Pengujian  ini  bertujuan menemukan  dan  memperbaiki  kesalahan  atau  error, sehingga  sistem  dapat  dinyatakan  layak  untuk digunakan [18] [19].

## 3. METODE PENELITIAN
Pada  penelitian  ini,  subjek  yang  digunakan adalah CV Marvelindo Utama. Sedangkan objek yang digunakan oleh peneliti adalah frontend website SCM milik  CV  Marvelindo  Utama  yang  mencakup dashboard admin.
Gambar 2. Diagram alir penelitian
Pada  diagram  alir  penelitian  yang  ditunjukan pada Gambar 2 dijelaskan bahwa.

## 3.1. Pengumpulan Data
Identifikasi masalah adalah tahap pertama dalam penelitian.  Tujuan  dari  identifikasi  masalah  adalah untuk mengidentifikasi, menetapkan, dan menjelaskan isu  atau  persoalan  yang  akan  menjadi  sasaran  utama dalam penelitian. Berdasarkan hasil observasi dengan stakeholder  CV  Marvelindo  Utama,  permasalahan yang  dihadapi  terkait  antarmuka  pengguna  untuk mengembangkan  pengalaman  pengguna  yang  positif, mengoptimalkan  aksesibilitas  dan  performa  aplikasi, dan membuat desain responsif.

## 3.2. Menentukan  Tujuan,  Rumusan,  Batasan Masalah, dan Metodologi Penelitian
Dalam  sebuah  penelitian,  menentukan  tujuan, rumusan  masalah,  batasan  masalah,  dan  metodologi penelitian, penting untuk memahami konteks
penelitian,  mengidentifikasi  masalah  yang  akan diteliti, dan menyusun strategi penelitian yang relevan dengan  permasalahan  yang  ingin  ditelusuri.  Pada penelitian ini, penulis memutuskan untuk menerapkan metode Rapid  Application  Development dalam membangun  antarmuka  pengguna  menggunakan framework TailwindCSS  pada website  supply  chain management milik  CV    Marvelindo  Utama  karena pengembangan  perangkat  lunak  dapat  diselesaikan dengan cepat dan efektif jika diimplementasikan pada aplikasi yang berskala kecil [20].

## 3.3. Studi Literatur
Studi literatur memiliki tujuan untuk mengembangkan  dua  aspek,  baik  aspek  teoritis maupun  praktis  dari  masalah  yang  sedang  diteliti. Studi literatur ini mencakup pencarian landasan teori, kerangka  berfikir,  dan  teori-teori  yang  berkaitan dengan  masalah  yang  diteliti  dalam  perancangan website SCM dari CV Marvelindo Utama.

## 3.4. Implementasi Rapid Application Development (RAD)
Proses pengerjaan dengan metode rapid application development terbagi menjadi tiga, yaitu:
a. Requirements Planning (Perencanaan Syarat- Syarat)
Pada  fase  perencanaan  dilakukan  pengumpulan data  yang  nantinya  dibutuhkan  dalam  proses perancangan desain system, seperti wawancara dan observasi.
b. RAD Design Workshop (Workshop Desain RAD)
Pada proses workshop desain dilakukan perancangan  desain  UML  dan  wireframe  untuk mempermudah  saat  pembuatan  system  atau pengkodingan.
c. Implementation Pada tahap ini dilakukan poses pembuatan system, system dibuat berdasarkan hasil desain yang telah dilakukan  sebelumnya.  Setelah  system  terbentuk maka selanjutnya system akan dites menggunakan blackbox testing untuk mengukur  fitur fungsional yang telah dibuat.

## 4. HASIL DAN PEMBAHASAN
4.1. Requirements Planning (Perencanaan Syarat-

## Syarat)
Dalam  tahap  ini  perwakilan  pihak  dari  CV. Marvelindo  Utama  dan  penulis  bertemu  untuk melakukan identifikasi tujuan penggunaan sistem serta melakukan  identifikasi  kebutuhan  sistem  yang  akan dibuat.  Peneliti  melakukan  identifikasi  kebutuhan menu  yang  diperlukan  dalam  perancangan  website SCM untuk admin CV. Marvelindo Utama. Mulai dari menu  dashboard  admin  yang  berisi  data  depo,  data cluster,  data  sales,  data  outlet,  data  petugas,  data produk,  data  barang  masuk,  data  jenis  barang,  data detail barang, data histori barang, data stok barang, dan data transaksi distribusi barang.
a. Analisa Kebutuhan Masalah.
 Analisa Sistem Berjalan
Pada  saat  ini,  sistem  yang  digunakan perusahaan dalam melakukan pendataan rantai pasok masih dilakukan secara manual menggunakan  spreadsheet  dalam  aplikasi Microsoft Excel.
 Kelemahan Sistem Berjalan Berdasarkan dari hasil analisis sistem berjalan, dapat disimpulkan bahwa perlu adanya website SCM yang digunakan untuk memudahkan alur pendataan rantai pasok barang perusahaan.
b. Analisa Pengguna Analisa  yang  dimaksud  adalah  untuk  mengetahui siapa  saja  pengguna/aktor  yang  berperan  dalam website  SCM  CV.  Marvelindo  Utama.    berikut dijelaskan dalam table 1.
Tabel 1. Karakteristik pengguna
No Kategori Pengguna Deskripsi Hak Akses 1. Super Admin Merupakan admin utama yang dapat mengatur seluruh isi didalam website. Mengatur admin cluster dan depo, Mempunyai semua akses semua bagian yang terdapat pada system , dapat mengedit ketersediaan stok baik cluster maupun depo. 2. Admin Cluster Merupakan admin yang hanya menangani pada cluster . Mengelola daftar depo, sales, outlet, melayani ketersediaan stok dan transaksi pendistribusian ke depo. 3. Admin Depo Merupakan admin yang hanya dapat melayani transaksi di depo. Hanya bisa melakukan transaksi produk dari cluster ke depo dan sales.
4.2. RAD  Design  Workshop  (Workshop  Desain RAD)
Diagram usecase yang  terdapat  pada  website SCM  terdiri  dari  dari  3  diagram  yang  terdiri  dari usecase diagram super admin, usecase diagram admin cluster  dan usecase diagram.  Berikut  salah  satu usecase diagram yang ditampilkan.
Gambar 3. Usecase super admin
Gambar 3 yang merupakan usecase diagram dari role Super Admin,  dimana Super Admin  merupakan admin yang mempunyai kemampuan akses ke seluruh fitur yang terdapat pada website SCM.
Gambar 4. Activity diagram login
Gambar 4 merupakan activity diagram dari login guna melakukan autentikasi admin sebelum memasuki halaman dashboard.
Gambar 5. Activity diagram create
Gambar  5  disajikan  aktivitas create atau penambahan  data  pada  website  SCM,  dimana  proses ini  merupakan proses umum  yang hampir terdapat  di semua sub-menu pada website.
Gambar 6. Activity diagram read
Pada  Gambar  6  dijelaskan  aktivitas read atau membaca  data  dari database ke  dalam  sistem menggunakan API.
Gambar 7. Activity diagram edit
Gambar 7 memaparkan aktivitas update atau edit data yang terdapat pada website SCM.
Gambar 8. Activity diagram delete
Gambar  8  menjelaskan  aktivitas delete atau menghapus  data.  Dimana  setelah  menekan  tombol hapus  maka  sistem  akan  menampilkan  dialog konfirmasi,  apabila  menekan  “ya”  maka  data  akan dihapus  dan  apabila  “tidak”  maka  tidak  terjadi  apa- apa.
Gambar 9. Sequence diagram login
Pada  Gambar  9  menggambarkan sequence diagram  dari login yang  prosesnya  diawali  admin mengirim  data  login  melalui  halaman  login  hingga proses API menerima dan menggembalikan respon ke Admin.
Gambar 10. Sequence diagram create
Gambar 10 menampilkan sequence diagram dari aktivitas create data.
Gambar 11 Sequence diagram read
Pada Gambar 11. ditampilkan sequence diagram dari aktivitas read data.
Gambar 12. Sequence diagram update
Pada Gambar 12 ditampilkan sequence diagram dari aktivitas update data.
Gambar 13. Sequence diagram delete
Gambar 13 dijelaskan sequence diagram dari delete data. Class diagram  dibuat  dengan  tujuan  untuk menjelaskan struktur, deskripsi class , atribut, metode dan  hubungan  antar  objek  dalam  sistem  website. Berikut  Gambar  14  yang  merupakan class diagram dari website SCM.
Gambar 14. Class diagram
Gambar 15. Wireframe login
Gambar 15 merupakan rancangan wireframe dari halaman login.
Gambar 16. Wireframe index
Gambar 16 terdapat wireframe dari halaman index data.
Gambar 17. Wireframe create dan edit
Gambar  17  merupakan wireframe dari  halaman create dan edit.

## 4.3. Implementasi Sistem
Berikut merupakan implementasi dari rancangan desain  yang  telah  dibuat  pada  tahap RAD  Design Workshop.
Gambar 18. Tampilan login
Gambar  18  merupakan  tampilan  halaman  login yang  merupakan  halaman  awal  sebelum  memasuki dashboard admin.

## Gambar 19. Tampilan index
Gambar  19  menampilkan  halaman index yang didalamnya  berisi  data-data  dari  tiap  model.  Pada halaman index terdapat  beberapa button seperti tambah, edit, dan hapus. Layout tabel disusun dengan library Datatables untuk membuat pagination , search bar dan styling .
Gambar 20. Tampilan create
Pada  Gambar  20  merupakan  tampilan  halaman create yang sudah dirancang menggunakan TailwindCSS.  Pada  halaman  ini  berfungsi  untuk menambah data.
Gambar 21. Tampilan edit
Gambar  21  merupakan  tampilan  edit  yang dirancang.  Pada  dasarnya  halaman  edit  sama  seperti halaman create, namun pada formulir edit sudah terisi data sebelumnya.

## 4.4. Pengujian
Setelah seluruh menu pada website sudah dibuat, peneliti dan dibantu tenaga ahli melakukan pengujian blackbox testing pada keseluruhan fitur yang terdapat pada website .  Berikut  beberapa  kasus  uji  blackbox testing yang dilakukan pada website manajemen rantai pasok yang dikembangkan. Tabel 2. Pengujian blackbox Komponen yang diujikan Skenario pengujian Hasil yang didapatkan Kesimpulan Halaman login. Mengisi username dan password yang salah lalu menekan tombol login. Sistem menolak akses dan memberi pesan error . Valid
Mengisi username dan password yang benar lalu menekan tombol login. Berhasil melakukan proses login dan redirect ke halaman dashboard . Valid Halaman dashboard. Menekan menu pada sidebar. Berhasil melakukan perpindahan halaman. Valid Halaman Cluster. Menampilkan data dari API. Berhasil menampilkan seluruh data. Valid Menambah data melalui halaman tambah. Berhasil melakukan penambahan data. Valid Mengedit data melalui halaman edit. Berhasil melakukan perubahan data. Valid Menekan tombol hapus untuk menghapus data. Berhasil melakukan penghapusan data. Valid.

## 5. KESIMPULAN DAN SARAN
Berdasarkan penelitian yang telah dilakukan dan hasil serta pembahasan yang telah dijelaskan pada bab sebelumnya,  dapat  disimpulkan  bahwa website manajemen  rantai  pasok  yang  dikembangkan  dapat membantu  meningkatkan  efektivitas  proses  kerja perusahaan dalam penyimpananan data pendistribusian  barang  dari  depo  ke  outlet  dan manajemen stok barang di depo, sales, dan outlet, serta memudahkan proses pembukuan sehingga tidak perlu melakukan  pencatatan  manual  dan  riwayat  transaksi bisa disimpan dalam bentuk file excel. Hasil pengujian blackbox testing menunjukkan persentase keberhasilan  sebesar  100%,  yang  berarti  seluruh fungsi  pada  website  berjalan  dengan  baik  dan  sesuai dengan yang diharapkan.
Penelitian  ini  telah  menghasilkan  frontend website  yang  sesuai  dengan  kebutuhan  pengguna, namun  masih  ada  beberapa  kekurangan  yang  dapat dioptimalkan  dalam  penelitian  selanjutnya.  Pertama, dapat  ditambahkan  fitur dark mode pada  tampilan website untuk  mengurangi  cahaya  terang  dan meningkatkan kenyamanan penggunaan dalam kondisi cahaya rendah. Kedua, diperlukan pengembangan server-side processing dalam pemrosesan data dan rendering halaman website untuk mengurangi beban rendering dari perangkat pengguna dan  meningkatkan  keamanan  data  sensitif.  Ketiga, diharapkan  penelitian  ini  dapat  menjadi  dasar  acuan bagi  penelitian  selanjutnya  yang  berfokus  pada pengembangan fitur baru guna meningkatkan kualitas website SCM CV Marvelindo Utama.

## DAFTAR PUSTAKA
[1]  E.  Rahim  and  R.  Mohamad,  “Strategi  Bauran Pemasaran ( Marketing Mix ) Dalam Perspektif Syariah,” MUTAWAZIN (Jurnal Ekon. Syariah) , vol. 2, no. 1, pp. 15–26, 2021.
[2]  M.  Jamaludin,  “Desain  Sistem  Informasi Manajemen  Rantai  Pasok  pada  PT  ‘ABCD’ Bandung Jawa Barat Indonesia,” J. Adm. Bisnis , vol. 10, no. 2, pp. 143–154, 2021.
[3]  A.  K.  Pakpahan,  “Pengaruh  Kepercayaan, Komitmen dan Integrasi Rantai Pasokan terhadap Kinerja  Operasional  pada  Perusahaan  Makanan di Jakarta,” J. Pendidik. Tambusai , vol. 7, no. 2, pp. 18719–18729, 2023.
[4]  D. Widhyaestoeti, S. Iqram, S. N. Mutiyah, and Y. Khairunnisa, “Black Box Testing Equivalence Partitions  Untuk  Pengujian  Front-End  Pada Sistem  Akademik  SITODA,” J.  Ilm.  Teknol. Infomasi Terap. , vol. 7, no. 3, pp. 211–216, 2021.
[5]  A. Syuhada, D. S. Rusdianto, and M. T. Ananta, “Pembangunan  Sistem  Manajemen  Pelatihan bagi ASN berbasis Website di Badan Kepegawaian dan Pengembangan Sumber Daya Manusia  Kabupaten  Situbondo,” J.  Pengemb. Teknol. Inf. dan Ilmu Komput. , vol. 7, no. 5, pp. 2107–2115, 2023.
[6]  F.  Rifandi,  Tri  Viqi  Adriansyah,  and  Rina Kurniawati,  “Website  Gallery  Development Using Tailwind CSS Framework,” J. E-Komtek , vol. 6, no. 2, pp. 205–214, 2022.
[7]  L. Suryani and R. Faisal Waliulu, “Perancangan Dan  Implementasi  Sistem  Informasi  Jasa Penitipan Paket Berbasis Website Menggunakan Framework  Bootstrap  (Studi  Kasus  Anbiya Jastip),” J. Elektro Luceat , vol. 7, no. 2, 2021.
[8]  M. K. Fataha, “Aplikasi Penyewaan Perlengkapan  Pendakian  Dengan  Menggunakan Tailwind CSS Framework,” pp. 1–55, 2022.
[9]  I. D. Ulhaq, “Implementasi Framework Laravel 8 Dan TailwindCSS Dalam Pengembangan Aplikasi  Penyedia  Vendor  Pernikahan  Pada Wangsit Event Organizer,” J. TRANSIT , vol. 11, no. 4, pp. 281–286, 2023.
[10]  S. Monalisa and D. Apsyarin, “Rancang Bangun Sistem  Informasi  Supply  Chain  Management Distribusi  Barang  Dan  Jasa  Berbasis  Web,” J. Ilm. Rekayasa dan Manaj. Sist. Inf. , vol. 7, no. 2, pp. 139–144, 2021.
[11]  W.  Andriyan,  S.  S.  Septiawan,  and  A.  Aulya, “Perancangan Website sebagai Media Informasi dan  Peningkatan  Citra  Pada  SMK  Dewi  Sartika Tangerang,” J. Teknol. Terpadu , vol. 6, no. 2, pp.
79–88, 2020.
[12]  D.  N.  Fitriana,  N.  A.  Setifani,  and  Y.  Amrozi, “Rancang  Bangun  Website  Sistem  Informasi Manajemen  Rantai  Pasok  Distribusi  Sepatu Lokal,” Ultim. InfoSys  J. Ilmu Sist. Inf. , vol. 11, no. 2, pp. 112–118, 2020.
[13]  D. Purnama Sari and R. Wijanarko, “Implementasi Framework Laravel pada Sistem Informasi  Penyewaan  Kamera  (Studi  Kasus  di Rumah  Kamera  Semarang),” J.  Inform.  dan Rekayasa Perangkat Lunak , vol. 2, no. 1, p. 32, 2020.
[14]  S.  R.  U.  A.  S.  Andy  Antonius  Setiawan,  Arie S.M.  Lumenta,  “Rancang  Bangun  Aplikasi Unsrat E-Catalog,” J. Tek. Inform. , vol. 14, no. 4, pp. 1–9, 2019.
[15]  I.  P.  Sari,  A.  Jannah,  A.  M.  Meuraxa,  A. Syahfitri,  and  R.  Omar,  “Perancangan  Sistem Informasi  Penginputan  Database  Mahasiswa Berbasis  Web,” Hello  World  J.  Ilmu  Komput. , vol. 1, no. 2, pp. 106–110, 2022.
[16]  B.  Susilo et  al. ,  “Rancang  Bangun  Sistem Informasi Keuangan  Pada  Kantor  Lurah Kotabaru Reteh Dengan Metode Rapid Application  Develovment  (Rad)  Design  and Build  a  Financial  Information  System  At  the Kotabaru  Reteh  Village  Head  Office  With  the Rapid Application Development (R,” J. Test. dan Implementasi  Sist. Inf. , vol. 1, no. 1, pp. 17–28, 2023.
[17]  M.  Y.  Fathoni,  S.  Wijayanto,  S.  Fernandez,  T. Anwar,  and  Y.  D.  Prasetyo,  “Implementasi Metode  RAD  Untuk  Pendaftaran  Lowongan Kerja Melalui Bursa Kerja Berbasis Website,” J. Teknol.  Dan  Sist.  Inf.  Bisnis ,  vol.  5,  no.  3,  pp. 319–325, 2023.
[18]  M. R. D. Wiradiputra, I. M. Candiasa, and D. G. H. Divayana,
“Pengembangan dan
PengujianSistem  Informasi  Manajemen  Jalan Untuk Pemeliharaan Jalan DiKabupaten Buleleng  Menggunakan  Standar  Iso  9126,” J. Ilmu Komput. Indones. , vol. 6, no. 1, pp. 17–26, 2021.
[19]  Y.  D.  Wijaya  and  M.  W.  Astuti,  “Pengujian Blackbox  Sistem  Informasi  Penilaian  Kinerja Karyawan PT INKA (Persero) Berbasis Equivalence  Partitions,” J.  Digit.  Teknol.  Inf. , vol. 4, no. 1, p. 22, 2021.
[20]  A.  Rahman,  “Rapid  Application  Development Sistem Pembelajaran Daring Berbasis Android,” Intech , vol. 1, no. 2, pp. 20–25, 2020.