Express JS - Server Side Basics and Form Handling

Below listed programming tasks are designed to practice different concepts of server side web programming using Express JS and related packages. These small tasks are designed to understand the core web concepts' implementation. Before you implement below tasks, its suggested to go through provided code samples, run and understand. It would make it easy to do the below tasks.

1. Make a header in header.ejs and include this header in all EJS templates you write. Add Home link in header that shall point to /home URL. In same way, make a footer in footer.ejs and include it other EJS tempates.
   
   
2. Add Products link in header and define appropriate handler for it, that shall serve list of products on the page. You can use ChatGPT to create an array of product objects. Each product object shall include attributes like: product title, category, original_price, image_url, discount_price, available (true/false), etc. If a product's available attribute is false, render 'Product out of stock', and do now show price of such products. Create separate ejs to display product information, include that EJS into products EJS, passing the product object.
   
   
3. Write basic css in sytels.css for above created pages. Include the CSS in HTML. Declare the CSS as static resource. Put logo.png in images folder and show this logo on all pages' header. It is suggested to put all static resources inside 'public' folder and declare the 'public' folder as static resource.
   
   
4. Make a handler /queryhandler, it shall display all query string parameters sent to server at server console. (they are stored in req.query obeject)
   
   
5. Make another handler i.e. /queryhandler2, on GET request, it shall display all submitted request parameters to user screen using show.ejs (in this case, you just need to pass req.query to the template)
   
   
6. (a).
   Create a form that shall let user to add new book, serve the form at /add-book URL. Let user input Book Title, Author Name, Published Year and Publisher Name. Handle form using POST at same URL. When the form is submitted, display all submited information on next page, use show-book-info.ejs for this.
   
   (b).
   Update above form such that it shall let user to upload book picture. Save the picture at server in /public/images folder when the form is submitted. Update handler and template that it shall also display the submitted picture. (Use express-fileupload or some other package for handling the file upload).
   
   (c).
   The URL /dashboard page shall display list of books added so far in a tabular form with Update and Remove link in actions column. When Update link is clicked, serve update form to update the book. When Remove link is clicked, remove that book at server using AJAX DELETE request. On /dashboard page, put Add New Book link that shall lead to /add-book page.
   
   Store books records in a JSON file at server side e.g. books.json to preserve books data accross browser requests and server restarts. (Use writeFileSync and readFileSync method of fs module to write and read JSON file, see express0 folder for code samples)
    
7. Create two handlers for /display-req-params to display all submitted request parameters dynamically in tabular form, regardless of HTTP GET or POST method. Use display-req-params.ejs for rendering.
• Add a form at /dynamic-params-form to test the handler.
• Link this form from /home.ejs.
• Submit the form to /display-req-params to display parameters.
• You can use the same EJS template or separate ones for GET and POST.
  
  
8. Use static resources middleware and serve Bootstrap and JQuery files, your custom CSS/JS files along with some images. Show these images at /home using home.ejs you can also integrate Bootstrap in above task.
   
   
9. Make a JS operations.js that shall work as module. Fom this module, export add(user), update(userID, userObj), delete(userID), get(userID) and getAll() methods. Take required parameters in these methods as per operation it perform (btw, I have mentioned to give you an idea). These methods shall perform the said operations on users.json file. You can take any 3-4 common attributes for each user object. Create app.js script that shall 'require' the operations.js module. Add a handler /operations-demo, call all methods passing required data in the form of literals. And at the end, display all users data on webpage using EJS. The ideas is, you should understand how to decouple data saving and retrieval logic from HTTP request handlers. It would help you to appreciate the design in which we try to keep our controller/request-handlers thin. Add /operations-demo link at /home page.