naufal-yafi/gallery-photos

Photo Gallery App

Final Course Project

NOTES

• Pada skeleton kode yang terdapat file main.test.js tidak boleh diubah sama sekali.
• Dilarang mengganti nama function yang diberikan.
• Dilarang mengganti atau mengutak-atik file pada folder server.
• Wajib menjalankan npm install atau pnpm install sebelum mengerjakan final project.

Description

Untuk final project kali ini, terdapat sisi client dan server. Pada sisi server berada pada folder server dan kalian hanya diminta untuk menjalankannya dengan perintah npm run start:server. Sedangkan untuk sisi client kalian diminta untuk membuat CRUD dengan ketentuan dibawah ini.

Header application/json ketika melakukan request selain GET

Pastikan ketika teman-teman melakukan request selain GET untuk menambahkan header application/json.

Create - POST

Untuk proses create kalian diminta untuk mengerjakan pada file AddPhoto.jsx, dan melakukan POST data ke API yang terdapat pada local server dengan url berikut:

http://localhost:3001/photos
atau
https://gallery-app-server.vercel.app/photos

Kalian diminta untuk melakukan create new data yang akan dikirim ke server. Data yang perlu kalian buat terdiri dari beberapa hal, yaitu:

• imageUrl : berisi url dari photo yang akan kalian upload dalam bentuk string.

• captions : berisi captions dari photo yang akan kalian upload dalam bentuk string.

• createdAt : berisi tanggal dan waktu kapan kalian upload dalam bentuk string.

• updatedAt : berisi tanggal dan waktu kapan kalian upload atau terkahir kali kalian melakukan edit/update data dalam bentuk string.

• secret : berisi secret untuk melakukan upload data dalam bentuk string. secret memiliki beberapa ketentuan, antara lain:

  • Memiliki nilai berupa string "password".
  • Jika nilai pada secret berupa string "password", maka proses create berhasil dan halaman berpidah ke path /photos dan menampilkan seluruh data termasuk data terbaru yang di uplaod.
  • Jika nilai pada secret TIDAK berupa string "password", maka proses create di nyatakan gagal dan pada bagian atas form akan menunjukan error messege yang di bawa dari server berupa "You are not authorized".

Fields	Data type
imageUrl	string
captions	string
createdAt	string
updatedAt	string
secret	string

Untuk createdAt dan updatedAt tidak perlu dibuat fields khusus pada form, kalian diperbolehkan memberikan nilainya secara langsung pada bagian body yang dikirim pada method fetch.

Read All- GET

Untuk proses read all kalian diminta untuk mengerjakan pada file Photos.jsx, dan melakukan GET data dari API yang terdapat pada local server dengan url berikut:

http://localhost:3001/photos
atau
https://gallery-app-server.vercel.app/photos

Setiap kali component Photos dirender maka secara otomatis data akan langsung di tampilkan. Pada file ini juga kalian diminta untuk melakukan sort by id dan search data yang akan dilakukan pada server dengan cara melempar query params pada url dengan format berikut:

• _sort : parameter yang digunakan untuk menentukan berdasarkan properti apa yang digunakan ketika melakukan sort data. misal, _sort=id
• _order : parameter yang digunakan untuk menentukan bentuk urutan ketika melakukan sort data. misal, _order=asc
• q : parameter yang digunakan untuk mencari data berdasarkan keyword yang dijadikan valuenya. misal, ketika kita ingin mencari data dengan kata "banyak", maka kita bisa melakukannya dengan cara q=banyak

Read by Id - GET

Untuk proses read by id kalian diminta untuk mengerjakan pada file EditPhoto.jsx, dan melakukan GET data berdasarkan id dari API yang terdapat pada local server dengan url berikut:

http://localhost:3001/photos/<photo id>
atau
https://gallery-app-server.vercel.app/photos <photo id>

Ketika data dari server sudah di dapat maka secara otomatis akan di tampilkan pada form.

Update - PATCH

Untuk proses update kalian diminta untuk mengerjakan pada file EditPhoto.jsx, dan melakukan PATCH data berdasarkan id ke API yang terdapat pada local server dengan url berikut:

http://localhost:3001/photos/<photo id>
atau
https://gallery-app-server.vercel.app/photos <photo id>

Kalian diminta untuk melakukan update data yang akan dikirim ke server. Data yang perlu kalian update terdiri dari beberapa hal, yaitu:

• imageUrl : berisi url dari photo yang akan kalian upload dalam bentuk string.
• captions : berisi captions dari photo yang akan kalian upload dalam bentuk string.
• updatedAt : berisi tanggal dan waktu kapan kalian upload atau terkahir kali kalian melakukan edit/update data dalam bentuk string.

Fields	Data type
imageUrl	string
captions	string
updatedAt	string

Jika proses update data berhasil maka halaman berpidah ke path /photos dan menampilkan seluruh data termasuk data terbaru yang di update.

Untuk updatedAt tidak perlu dibuat fields khusus pada form, kalian diperbolehkan memberikan nilainya secara langsung pada bagian body yang dikirim pada method fetch.

Delete - DELETE

Untuk proses delete kalian diminta untuk mengerjakan pada file Photos.jsx didalam function deletePhoto, dan melakukan DELETE data berdasarkan id ke API yang terdapat pada local server dengan url berikut:

http://localhost:3001/photos/<photo id>
atau
https://gallery-app-server.vercel.app/photos <photo id>

Pastikan setiap kali data dihapus maka data tersebut langsung hilang dari tampilan di browser tanpa perlu dilakukan refresh.