Express JS - Server Side Basics and Form Handling

Updated on: Dec. 2, 2025

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 them. It would make it easy to do the below tasks.

To complete this task, you need to understand:

1. Starting server in express that listen for HTTP requests
2. Maping HTTP request to a handler defined in express. based on HTTP Method and URL Pattern
3. Reading query string parameters using req.query object
4. Using EJS to render dynamic data

Here is the task description:

1. Make a header in header.ejs and include this header in all EJS templates you create. In same way, make a footer in footer.ejs and include it all other EJS tempates.
   
   
2. In script where you define your request handlers, initialize a global array of objects where each object should represent a product. Product attributes shall include: product title, category, original_price, discounted_price, available (true/false), etc. Feel free to use ChatGPT to create and initialize this array. Add Products link in header that shall point to home page i.e. served at / URL pattern. Define a handler for it, it shall display all products on brower using products-display.ejs template. If 'available' attribute is set to false, render 'Product out of stock' message, and do not show price of such products. Create separate EJS file to display product information, include that EJS file in your products-display.ejs, passing the product object.
   
   
3. Write basic CSS in styles.css for above created pages and put this file under public folder. Include the CSS in HTML in header section. Declare 'public' folder as static resource. Put logo.png in images folder and show this logo in header. Place the images folder in 'public' folder to serve it as static resource.
   
   
4. Display Delete link on products page, in actions column of table that contains products information, when the link is clicked, the associated handler should delete that product from the products array and display appropriate message. Tip: pass product id as query string to handler and read the passed id using req.query.id
   
   
5. Display Edit link too with Delete link (explained above), when click, show a pre-filled with product current information. When user update the product info and submit, you should update that product data in global products array. So that updated product information is served when user access home page. Tip: when edit link is clicked, pass that product id to the handler. that shall find product with given ID and pass it to form defined in EJS.
   
   
6. Update code such that, the data should preserve accross the script the restarts. Whenever a new recrod is added, updated or removed, convert JS array to JSON and save in a file. When you run the server, load the products data from file. (Use writeFileSync and readFileSync method of fs module to write and read JSON file, see express0 folder for code samples)

After we are done with using body-parser and redirect, please add below two features too. 

1. At home page, add a link Add New Product. When clicked it should open a new page to add new product. Form should make use of POST method to submit data. In form handler, add submitted product information in products global array and save array as JSON to file.
   
   
2. After Add, Edit and Delete operations, redirect to home page. and display alert to show confirmation message that user requested task is done e.g. New Product Added, Product Updated or Product Removed.
   
   
3. Please do/learn this part yourself to demonstate your learnig ability. There is code sample named app5c fileupload.js in my shared code samples that make use of express-fileupload module to upload files. Use this to upload product picture on Add New Product form. Also update home and edit page too, to let user view and update the product picture as well. On edit page, add Remove link below the product picture, when clicked, that picture shall be removed from record using AJAX and appropriate message shall be displayed on AJAX call success i.e. Picture Removed. Also remove the picture node from DOM, so that user is updated that no more picture is attached to the current product. If user do not remove the picture but attach new one, then you should replace that picture i.e. remove earlier and upload new.