Need help with Web Programming Assignment Help or Project Help? At Codersarts we offer 1:1 session with expert, Code mentorship, Course Training, and ongoing development projects. Get help from vetted Machine Learning engineers, mentors, experts, and tutors.
Overview:
Using your knowledge of NodeJS and ExpressJS and the Web App Template provided, complete the Favourite Book List web app that you will share on GitHub and deploy to Heroku (or another cloud provider). Your web app already includes basic navigation controls, a Landing Page, a BookList page and a BookDetails page. Your task is to complete the code that is missing from the routing files and the Books List page so that a user can Add, Delete and Edit any Book item from the Database.
Project Setup:
Rename the Web App Template provided to COMP229-F2020-MidTerm-[YourStudentID]. (e.g. COMP229-W2020-MidTerm-300929668).
You will need to create a new Mongo Database on MongoDB Atlas. You will need to change the URI variable in the db config file (config/db.js) to point MongoDB Atlas.
You will need to add some example Book data in the database.
Instructions:
The BooksList page (views/books/index.ejs) already lists your favourite books. Your job is to fix the Add Button, and insert the appropriate code for the Edit and Delete Buttons
Fix the Add Button on this page so that it links to the BookDetails page (views/books/details.ejs). Hint: insert the correct route in the href attribute
Add an Edit Button to each row of the existing Table (the insertion point has been marked for you). Ensure that when the user clicks on the Edit button, they are linked to the BookDetails page and the _id of the book they wish to edit is passed to that page via the URL. Hint: the href attribute requires a reference to the _id of the book being edited
Add a Delete Button to each row of the existing Table (the insertion point has been marked for you). Ensure that when the user clicks on the Delete button, that the _id of the book to be deleted is passed to the router. Hint: the href attribute requires both a link to the delete route and a reference to the _id of the book being edited
The Books Routing File (routes/books.js) already has a route working to find all the books in the books collection and render your BooksList page. Your task for this section is to complete the logic for each of the other routes to render the book details page when the Add or Edit Buttons are clicked, process a request to Add or Edit a Book, and process a request to Delete a book
Complete the get('/add') router logic that renders the book details page (views/books/details.ejs). The form on the book details page will initially be blank. You must pass an appropriate value for the title property and blank value for the books property
Complete the post('/add') router logic that processes the insertion of a new book into the database. You need to instantiate an object of the book model (excluding the _id property) and pass this object to the create method of the book model to add a new book to the database. Hint: the values for the book object will come from the name attributes of each field of the book details page. Redirect the user back to the BookList page ('/books') when the insertion is completed
Complete the get('/:id') router logic that renders the book details page (views/books/details.ejs) and uses the id from the URL to select the book to document to be updated. Declare an id variable and set its value to the id property of the request object. Pass this id to the book model’s findById method to render the book details view. You must set an appropriate title property value and set the books property to the book that was returned from the database as you render the view.
Complete the post('/:id') router logic that processes the update request of an existing book by using its id property. Declare an id variable and set its value to the id property of the request object. You need to instantiate an object of the book model (including the _id property) and pass this object to the update method of the book model to edit an existing book in the database. Hint: the values for the book object will come from the name attributes of each field of the book details page. Redirect the user back to the BookList page ('/books') when the update is completed
Complete the get('/delete/:id') router logic that processes the user’s delete request and removes an existing book from database by using its id property. Declare an id variable and set its value to the id property of the request object. Pass the id to the book model’s remove method. Redirect the user back to the BookList page ('/books') when the removal is completed
Include Internal Documentation for your site
Ensure you include a comment header for your JavaScript file that indicate: The File name, Author's name, StudentID, and Web App name
Ensure you include a section header for any JavaScript functions
Ensure all your code uses contextual variable names that help make the files humanreadable
Ensure you include inline comments that describe your GUI Design and Functionality. Note: Please avoid “over-commenting”
Share your files on GitHub to demonstrate Version Control Best Practices and push your site to a cloud host
Your repository must include your code and be well structured
Your repository must include commits that demonstrate the project being updated at different stages of development – each time a major change is implemented
You must deploy your site to your Cloud Server using git
Create a Short Video presentation on YouTube or another streaming provider. You must include a short PowerPoint (or Google Slides) Slide Deck that includes a single slide to start your video
The first (and only) Slide of your Slide Deck must include a current image of you (no avatars allowed) that is displayed appropriately on the page. You must also include your Full Name, Student ID, the Course Code, Course Name, and your Assignment information.
You will demonstrate your site’s functionality. You must show each page working properly
You will describe the code in your app.js file that drives the functionality of your site
Sound for your Video must at an appropriate level so that your voice may be clearly heard, and your screen resolution should be set so that your code and site details are clearly visible
Your Short Video should run no more than 5 minutes