Implement CRUD Functions by Using API

This week, I continued modified the Store page, there are 2 DTOs I should used in this page, they are used to facilitate communication between two systems like API and server without potentially exposing sensitive information. I used dto to display the details of the specific store like name, addresses and other details, the other dto is used to display a list of the store name.

Besides that, I received help from my colleague to add the API address to .env.local, this API address is important which allow me to get and post the data from or to the API. Since last week I was hard coded the CRUD function, so I modified some part to ensure all the data is success connect to the API and success fetch the data according to the CRUD function. I also added some CSS style for it. For example, I added the condition for saving progress, if the data are in the progress, the button will show the “Saving….” And when it is completed, it will show “Save” and the button is disabled to clicked. For the delete function, it will pop out an alert message to ask user a confirmation to delete the data again.

At the end of this week, Mr. Peter give me a new task, this task is about the generator which will generate a counter for the store. This task is same like the “Store” page which need to create the CRUD function first. Currently, I had completed the create function and update function. This task also consists of 2 DTOs, which consists the id, name, and other details but only detail has the count. Therefore, I need to create a page to ensure these functions in this task can run smoothly.

Leave a Reply