{"id":1260,"date":"2023-12-18T15:15:58","date_gmt":"2023-12-18T07:15:58","guid":{"rendered":"https:\/\/www.tonghin.com.my\/blog\/?p=1260"},"modified":"2023-12-18T15:16:00","modified_gmt":"2023-12-18T07:16:00","slug":"implement-crud-functions-by-using-api","status":"publish","type":"post","link":"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/","title":{"rendered":"Implement CRUD Functions by Using API"},"content":{"rendered":"\n<p>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.<br><br>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 \u201cSaving\u2026.\u201d And when it is completed, it will show \u201cSave\u201d 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.<br><br>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 \u201cStore\u201d 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Implement CRUD Functions by Using API&#8221;<\/span><\/a><\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Implement CRUD Functions by Using API | Tong Hin&#039;s Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implement CRUD Functions by Using API | Tong Hin&#039;s Blog\" \/>\n<meta property=\"og:description\" content=\"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 &hellip; Continue reading &quot;Implement CRUD Functions by Using API&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Tong Hin&#039;s Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-18T07:15:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-18T07:16:00+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\",\"name\":\"TONG HIN MACHINERY\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"sameAs\":[\"https:\/\/www.youtube.com\/channel\/UC60EoxJMNbu8mV0LuEGfrBg\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/wp-content\/uploads\/2020\/10\/web_logo_180_180.jpg\",\"width\":180,\"height\":180,\"caption\":\"TONG HIN MACHINERY\"},\"image\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#website\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"name\":\"Tong Hin&#039;s Blog\",\"description\":\"Sharing About Technology\",\"publisher\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.tonghin.com.my\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/#webpage\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/\",\"name\":\"Implement CRUD Functions by Using API | Tong Hin&#039;s Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#website\"},\"datePublished\":\"2023-12-18T07:15:58+00:00\",\"dateModified\":\"2023-12-18T07:16:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/\",\"url\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/\",\"name\":\"Implement CRUD Functions by Using API\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#\/schema\/person\/0a4f4c1643f00588066281a801cc7f69\"},\"headline\":\"Implement CRUD Functions by Using API\",\"datePublished\":\"2023-12-18T07:15:58+00:00\",\"dateModified\":\"2023-12-18T07:16:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#organization\"},\"articleSection\":\"Experiential\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.tonghin.com.my\/blog\/2023\/12\/18\/implement-crud-functions-by-using-api\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#\/schema\/person\/0a4f4c1643f00588066281a801cc7f69\",\"name\":\"Tan Hui Ying\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.tonghin.com.my\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2743a34b5a8d2de074f4531c061b78f7?s=96&d=mm&r=g\",\"caption\":\"Tan Hui Ying\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/1260"}],"collection":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/comments?post=1260"}],"version-history":[{"count":3,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/1260\/revisions"}],"predecessor-version":[{"id":1296,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/posts\/1260\/revisions\/1296"}],"wp:attachment":[{"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/media?parent=1260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/categories?post=1260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tonghin.com.my\/blog\/wp-json\/wp\/v2\/tags?post=1260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}