Demo aplikasi Nuxt Hotfrog : https://nuxt-hotfrog.variancode.com – penjelasan kerja aplikasi silahkan lihat video Youtube di atas.

Halaman Login / Signin : https://nuxt-hotfrog.variancode.com/signin

Username : rian
Password : rahasiadong

Petunjuk instalasi : https://www.youtube.com/watch?v=uPInBKlR5-4

Source code : https://variancode.com/contoh-crud-restful-api-jwt-pada-vue-js-laravel-lumen/

Meskipun sama-sama melakukan panggilan ke REST API melalui Axios, Nuxt Store masih belum menerapkan implementasi backend secara utuh. Oleh karena itu, konsep frontend – backend tersebut kini disempurnakan di Nuxt Hotfrog. Studi kasus ini mencoba membuat kloningan / tiruan dari portal iklan https://www.hotfrog.co.id dengan goal utama yaitu pengelola website dapat menambahkan, mengedit dan menghapus iklan jasa di kota / kabupaten dan kategori berbeda-beda.

Nuxt Hotfrog menggunakan framework CSS BootstrapVue (Bootstrap 4) dan boilerplate Nuxt.js. Build Nuxt diset ke SSR (Server Side Rendering), bukan SPA (Single Page Application), agar halaman Vue.js dapat ter-indeks oleh mesin pencari seperti Google – penting jika optimasi mesin pencari atau SEO (Search Engine Optimization) menjadi prioritas Anda.

Nuxt Hotfrog menerapkan 4 (empat) grid options / breakpoints, masing-masing : xs (extra-small), sm (small), md (medium) dan lg (large) agar tampilan website menjadi responsive / dapat menyesuaikan ukuran layar device yang berbeda-beda.

Nuxt Hotfrog akan selalu mengirim request GET ke sisi REST API (Laravel Lumen) di https://lumen-hotfrog.variancode.com untuk memperoleh data yang akan ditampilkan sebagai konten. Ketika request berlangsung, indikator berupa progress bar berwarna hijau tampil di bagian atas layar.

Nuxt Hotfrog menggunakan autentikasi JWT (JSON Web Token), masing-masing adalah token access (x-access) dan token refresh (x-refresh). Setiap kali token access kadaluwarsa, nilai token access akan digantikan oleh token refresh. Akan tetapi, jika tidak ada aktivitas apapun sampai token refresh kadaluwarsa, user akan diarahkan ke halaman signin. Yang perlu diperhatikan, karena JWT sangat mudah di-decode oleh siapa pun melalui website https://jwt.io, maka payload JWT harus di-enkripsi agar informasi penting di dalamnya (jika ada) tidak mudah terbaca oleh orang lain.

Autentikasi JWT digunakan agar akses ke dashboard dapat dibatasi hanya bagi user dengan token valid saja (sudah melakukan signin). Selain JWT, seluruh operasi CRUD yang melibatkan request HTTP di dashboard juga disertai dengan API Rate Limit sebagai proteksi tambahan. Sedangkan validasi form digunakan untuk memastikan bahwa data yang di-input telah sesuai dengan format yang dibutuhkan, misal : field gambar tidak boleh diisi dengan tipe file lain seperti PDF.

Studi kasus terkait :

Aspek yang dapat Anda pelajari dari source code Nuxt Hotfrog :[/fusion_text]

  • EventBus, SweetAlert, Toast

  • Promise, Resolve, Reject.

  • Context, FormData, URLSearchParams

  • Laravel Lumen sebagai REST API.

  • Route Middleware di Nuxt.js dan Lumen
  • CORS (Cross-Origin Resource Sharing).

  • Autentikasi JWT – Token Access dan Refresh.

  • API Rate Limit per menit.

  • User Role dan Privileges (hak akses user).

  • Eloquent ORM dan PDO (PHP Data Objects).

  • Model relationship, table migrations dan seeding.

  • Validasi form (backend) dan Try Catch Exceptions.

  • Infinite scroll (auto load more content).

  • Manipulasi gambar (square cropping, resize).