Description

"Aplikasi Book Management"

1. Deskripsi Aplikasi

• Fitur Utama:
  • Manajemen Buku:
    • Create: Menambahkan buku baru ke dalam database.
    • Show: Melihat detail informasi buku.
    • Update: Mengedit informasi buku yang sudah ada.
    • Delete: Menghapus buku dari database.
    • Search: Mencari buku berdasarkan judul, penulis, atau kategori.
  • Manajemen Pengguna:
    • Register: Pendaftaran pengguna baru.
    • Login: Masuk ke aplikasi.
    • Update: Memperbarui informasi pengguna.
    • Logout: Keluar dari aplikasi.
• Struktur Basis Data:

• Tabel Buku: 

• Tabel Pengguna: 

• Teknologi yang Digunakan:
  • Backend: Laravel 11, SQLite, dan OpenAPI untuk dokumentasi API.
  • Frontend: Next.js 14, TailwindCSS, DaisyUI, dan SweetAlert.

3. Implementasi Backend (Laravel)

• Alur aplikasi:
  • Route
    • Contoh route

Pada route ini mengambil url yang dikirimkan frontend dan sebagiannya memprosesnya membutuhkan middleware auth untuk authentication dan sebagiannya lagi tidak. Untuk route books menggunakan bawaan laravel “resource” yang artinya menggunakan semua function pada controller (index, show, update, dll) dan dikecualikan function create dan edit.

• Validation
  • Contoh validation

Pada contoh di atas StoreBookRequest merupakan class untuk validasi input buku yang ingin disimpan ke database. Setiap input misalnya title harus melalui validasi required (tidak boleh kosong), string (harus berupa string), dan max:100 (tidak boleh lebih dari 100 karakter). Jika tidak lolos validasi maka akan mengembalikan http response berisi pesan kesalahan dan status code 422.

• Controller
  • Contoh controller

Pada controller book terdapat function index untuk menampilkan buku, store untuk menyimpan, show untuk menampilkan berdasarkan id, update dan terakhir destroy untuk delete buku, untuk update dan store membutuhkan validasi terlebih dahulu sebelum datanya bisa di proses. Jika berhasil, beberapa fungsi diatas akan mengembalikan BookResource yang berisi data dari buku

• Model 
  • Contoh model

Pada model terdapat relation rules BelongsTo dari book ke model user

• Endpoint API:
  • Manajemen Buku:
    • GET /api/books: Mendapatkan daftar semua buku.
      • Params : title, author, publisher, page
    • POST /api/books: Menambahkan buku baru.
    • GET /api/books/{id}: Melihat detail buku berdasarkan ID.
    • PUT /api/books/{id}: Mengupdate buku berdasarkan ID.
    • DELETE /api/books/{id}: Menghapus buku berdasarkan ID.
  • Manajemen Pengguna:
    • POST /api/register: Mendaftarkan pengguna baru.
    • POST /api/login: Masuk ke aplikasi.
    • POST /api/logout: Keluar dari aplikasi.
    • PATCH /api/current: Memperbarui informasi pengguna.
    • GET /api/current: Mendapatkan informasi pengguna.
• Dokumentasi OpenAPI:

• Feature Test:

Untuk memastikan apakah fitur benar-benar berjalan dibuatkan feature test untuk setiap case nya

4. Implementasi Frontend (Next.js)

• Struktur Proyek:

Pada next js menggunakan typescript dengan format app router. Not-found.tsx merupakan kostumisasi halaman jika path tidak ditemukan, global css berisi tailwindcss, layout dan page pada lapisan terluar merupakan halaman utama saat aplikasi di akses. 

• Komponen Utama:
  • Komponen books: Menampilkan daftar buku dalam bentuk tabel 
  • Komponen books/add: Formulir untuk menambah buku.
  • Komponen books/edit: Formulir untuk mengedit buku.
  • Komponen books/show: Menampilkan detail buku berdasarkan id.
  • Komponen Manajemen Pengguna: Formulir untuk register, login, update, dan logout.
• Tampilan aplikasi:

Landing Page

Login

User Profile

Books

Book add form

Book show

Sweetalert