See the attached

1 Homewor k #1 CIS 562 – John P. Baugh, Ph.D. University of Michigan - Dearborn Points: ________ / 100 Objectives • To better understand REST ful APIs • To understand CRUD operations • To gain fundamental full -stack experience o Using Node.js, Express.js, and MySQL with basic HTML, CSS, and JavaScript front -end Instructions Using the Node -Express -MySQL code we looked at in clas s as a starting point, you must do t he following , as described in the checklist.  Make the front end “prettier” and more user friendly using basic HTML, CSS, and JavaScript o No libraries/frameworks like React, Angular, Vue allowed in this homework o All user interaction should occur through the front end  Provide back -end functionalit y to display data about a single pet, given the pet ID o This may or may not actually be needed in the fron t end depending on how you implement it o But, you must provide this functionality (that we left incomplete in our example code)  Allow the user to add new pets o This would be the POST method through the REST API provide d by Node.js and Express o POST corresponds to Create in CRUD  Allow the us er to update a pet, by selecting one of the pets in the l ist o Provide a sensible/re asonable interface to allow the user to edit the pet information once they have selected a pet to edit o Once executed, t his will overwrite the data currently in the table o This uses PUT through the API o PUT corresponds to Update in CRU D  Allow the user to delete a pet, by selecting one of the pets in a list o This uses DELETE through the API o DELETE corresponds to Delete in CRUD 2 Notes: • You may need to rebuild the pets table or run a SQL dump given to you by the instructor i f he ’s feeling generous. • Some REST verbs (e.g., PUT , DELETE ) require that you send information in the header o See info for front end (Fetch API): ▪ https://www.topcoder.com/thrive/articles/fetch -api -javascript -how -to-make - get -and -post -requests ▪ https://www.freecodecamp.org/news/javascript -fetch -api -tutorial -with -js- fetch -post -and -header -examples/ o See info for the back -end application server : ▪ https://expressjs.com/e n/starter/basic -routing.html o See info for the back -end database server interaction : ▪ https://www.w3schools.com/mysql/mysql_delete.asp ▪ https://www.w3schools.com/mysql/mysql_update.asp Deliverables To turn in the assignment, please : 1. Create a zip file of a folder containing the following: a. The VS Code (or other environment) folder containing both client and server code, completed b. Screenshots of your code working properly with all major functionality implemented – pla ce the screenshots at the top level of the folder you zip 2. Upload th e zip file to the appropriate assignm ent/homework directory on Canvas