Skip to content
Rafi Akmal Widikta

fullstack

Rental Cosplay

Marketplace penyewaan kostum cosplay dengan tiga peran (admin, cosrent, dan user) tempat pemilik mendata kostumnya beserta varian foto dan penyewa mengajukan sewa lewat alur yang dimoderasi.

Tanggal
Desember 2024

Teknologi

  • laravel
  • inertia
  • react
  • tailwind css
  • laravel breeze
  • sanctum
  • octane
  • dompdf

Masalah

Marketplace penyewaan kostum harus menampung tiga jenis orang sekaligus, dan masing-masing hanya boleh melakukan satu hal: admin mengurus kategori dan memoderasi akun yang menyewakan kostum, cosrent mengelola kostumnya sendiri, dan user melihat lalu mengajukan sewa. Kerangka dari Laravel Breeze hanya memberi satu dashboard di balik satu login, tanpa konsep peran sama sekali: batas antara ketiganya adalah sesuatu yang harus dipaksakan aplikasinya, bukan diwarisi. Selama itu belum ada, setiap halaman yang bisa dibuka lewat URL bisa dibuka oleh siapa pun yang sudah login.

Sebagian besar sisanya bukan fitur, melainkan perbaikan, dan beberapa di antaranya hanya kelihatan dari jarak jauh. Migrasi galeri bertanggal lebih awal daripada tabel yang direferensikan, jadi migrate dari nol akan gagal pada foreign key yang menunjuk tabel yang belum ada. Foto unggahan dan logo situs tidak pernah ikut ter-commit karena berkas .gitignore di dalam storage/ mengecualikannya; gambarnya tampil di mesin yang mengunggahnya dan tidak di tempat lain. Field harga memakai type="number" padahal nilainya tetap sampai sebagai string, dan field telepon menerima apa pun yang diketik. Harga ditampilkan dengan toLocaleString() telanjang, yang bukan format dan bukan pula mata uang. Pencarian yang tidak menemukan apa pun mengembalikan grid kosong tanpa penjelasan. Pesan flash masih teks polos yang tidak bisa diumumkan pembaca layar. Dan halaman admin serta cosrent berupa satu berkas tunggal yang cukup besar sampai menemukan apa pun di dalamnya lebih lama daripada mengubahnya.

Solusi

Peran di sini adalah data, bukan tebakan. Model role, kolom foreign key di user beserta relasi belongsTo, dan seeder yang menetapkan tiga akunnya; lalu controller dashboard dengan satu pintu masuk per peran, masing-masing memeriksa nama peran pengguna yang sedang login dan membatalkan dengan 403 kalau tidak cocok. Login mendarat di dashboard yang memang milikmu, dan seluruh route diarsipkan di bawah prefix admin/, cosrent/, atau user/: pemisahannya hidup di tabel route alih-alih bergantung pada apakah sebuah controller ingat memeriksanya.

Perbaikannya dikerjakan satu akar pada satu waktu. Urutan migrasi diselesaikan dengan mengganti nama migrasi galeri supaya dieksekusi paling akhir: kasar, tapi jujur. Kedua foreign key yang ditujunya sudah ada saat ia berjalan, apa pun yang diklaim nama berkasnya. Berkas ignore di dalam storage/ dihapus dan logonya di-commit, sehingga repositori akhirnya membawa gambar yang dipakai halamannya; dua percobaan sebelumnya menambal gejalanya, yang ini membuang penyebabnya. URL penutup dibuat null-safe supaya berkas yang hilang menghasilkan ketiadaan alih-alih error. Harga pindah ke input teks dengan penyaring yang hanya meloloskan angka (di JavaScript nilainya tetap string, jadi lebih baik string yang isinya hanya yang seharusnya), dan field telepon mendapat penyaring yang sama. Harga kini memakai satu Intl.NumberFormat berkonfigurasi id-ID dan IDR, sehingga setiap angka rupiah diformat oleh satu aturan, bukan oleh komponen yang kebetulan ingat.

Pencarian mendapat empty state, jadi kata kunci yang tidak cocok mengembalikan satu kalimat alih-alih grid kosong. Pesan flash menjadi alert dengan ikon dan role="alert". Dan halamannya ditata ulang menjadi satu App.jsx per modul di bawah Admin/, Cosrent/, dan User/: perubahan yang membuat sisanya aman dikerjakan, karena berkas yang hanya memuat satu modul bisa ditulis ulang tanpa menyeret yang lain. Pekerjaannya juga harus digabung, bukan hanya ditulis: beberapa branch berjalan bersamaan, dan bentuk akhirnya baru ada setelah semuanya bertemu di satu tempat.

Kontak

Tertarik untuk bekerja sama?

Ceritakan apa yang sedang Anda bangun dan apa yang dibutuhkan. Catatan singkat sudah cukup.

Back to top