aisyahnadhira / Final-Basic-Frontend-Web_development

Library App

Final Project

NOTES

• Pada skeleton kode yang terdapat file main.test.js tidak boleh diubah sama sekali.
• Dilarang mengganti nama function yang diberikan.
• Dilarang mengganti struktur dari skeleton kode yang diberikan.
• Dilarang untuk mengedit file initial.json yang terdapat pada folder server.
• Wajib menjalankan npm install atau pnpm install sebelum mengerjakan project.

Objectives

• Dapat menggunakan DOM untuk membuat website.
• Dapat melakukan call API.

Description

Pada Final Project kali ini kalian akan diminta untuk membuat sebuah website yang dapat melakukan operasi CRUD (Create, Read, Update, Delete) data buku untuk sebuah perpustakaan.

Komunikasi data antara website dengan server menggunakan API.

Beberapa hal yang sudah disediakan untuk membantu kalian dalam menyelesaikan website ini:

• API Server sudah disediakan pada folder server dengan nama file library-db.json. API Server ini menggunakan json-server yang dapat kalian jalankan dengan menggunakan command pnpm start:server.

  server akan berjalan pada http://localhost:3333

  API Server ini memiliki beberapa endpoint, antara lain:

  • GET /books (untuk mendapatkan seluruh data buku)

    Example Result:

    [
        {
            "id": 1,
            "title": "Buku A",
            "author": "Author A",
            "year": 2020,
            "quantity": 10
        },
        {
            "id": 2,
            "title": "Buku B",
            "author": "Author B",
            "year": 2020,
            "quantity": 10
        }
    ]

  • POST /books (untuk menambahkan data buku)

    Payload yang dikirimkan harus memiliki format sebagai berikut:

    {
      "title": "string",
      "author": "string",
      "year": "number",
      "quantity": "number"
    }

  • PUT /books/id (untuk mengubah data buku)

    Payload yang dikirimkan harus memiliki format sebagai berikut:

    {
      "title": "string",
      "author": "string",
      "year": "number",
      "quantity": "number"
    }

  • DELETE /books/id (untuk menghapus data buku berdasarkan id)

    Jika id ditemukan maka akan menghapus data buku dan mengembalikan response status code 200.

• Skeleton code client sudah disediakan pada folder client dengan nama file main.js. Kalian hanya perlu mengimplementasikan kode yang dibutuhkan untuk menyelesaikan website ini. Beberapa function sudah disediakan comment yang menjelaskan apa yang harus dilakukan oleh function tersebut. Untuk menjalankan client bisa menggunakan command pnpm start:client.

  client akan berjalan pada http://localhost:3000

---

Web Application ini akan berjalan dengan general requirements sebagai berikut:

1. Ketika halaman web di render pertama kali, data buku pada database secara otomatis di tampilkan kedalam table.
2. Ketika tombol "Add Book" di klik maka tampilan akan berubah menjadi form untuk menambahkan data buku. Ketika form di submit maka data buku akan di tambahkan kedalam database dan data terbaru akan langsung di tampilkan secara realtime tanpa perlu melakukan refresh halaman.
3. Ketika tombol "Edit" di klik maka tampilan akan berubah menjadi form untuk mengubah data buku. Semua informasi mengenai buku yang akan di edit sudah berada di dalam form input. Ketika form di submit maka data buku akan di ubah kedalam database dan data terbaru akan langsung di tampilkan secara realtime tanpa perlu melakukan refresh halaman.
4. Ketika tombol "Hapus" di klik maka akan menghapus data buku dalam database dan data buku yang di delete secara otomatis di hilangkan tanpa perlu melakukan refresh halaman.
5. Aplikasi harus di deploy ke netlify, kemudian link deploy nya harus di jadikan variable NetlifyDeployUrl pada file deployData.js, jangan lupa sertakan nama dan CAMPID kalian pada file tersebut (contoh bisa dilihat didalam file tersebut)

Untuk penjelasan lebih lanjut, silahkan lihat di comment yang sudah disediakan pada skeleton code.

Video demo Applikasi: