Express Form Handling, File Upload, EJS, Redirect

Consider below HTML form. Its not mandatory to use same form, you can modify fields. What is important is, your form shall include all basic types of input fields e.g. text, password, radio, checkbox, option list, text area, etc. After this form, there are list of tasks that you should implement in same web app.

<title>Form with all controls</title>
<style> label { display: inline-block; width: 100px; }</style> 

<h1>User Registration Form</h1>

<form action="form-handler" method="POST">
  <h2>Student Registration Form</h2>

  <label>Name</label><input maxlength="8" name="name" size="20" type="text">

  <label>Password</label> <input name="password" size="20" type="password">   

<label>Subjects</label>
  <input name="Algorithms" type="checkbox"> Algorithms
  <input name="OOP" type="checkbox">OOP
  <input checked="checked" name="DataStructures" type="checkbox"> Data Structures  

<label>Credit Card</label>
<input checked="checked" name="credit_card" type="radio" value="Visa">Visa
<input name="credit_card" type="radio" value="Master Card">Master Card<input name="credit_card" type="radio" value="American Express">American Express  

<label>City</label>
<select name="city">
 <option selected="selected" value="Lahore">Lahore</option>
 <option value="Karachi">Karachi</option>
 <option value="Islamabad">Islamabad</option>
 </select>

<label>Favorite Languages</label>
<select multiple="multiple" name="languages" size="3">
   <option>Java</option>
   <option>PHP</option>
   <option>Ruby</option>
   <option>C</option>
   <option>C#</option>
</select> 

<input type="submit"></form>

1. Write form handler using ExpressJS that shall handle below form submission and dispaly all submitted data via EJS template
   
   
2. As we discussed in class, we make POST request followed by GET request to avoid double submission using Post, Redirect, Get (PRG) Pattern. Integrate PRG in form handler written in previous step. (You can save submitted data in JSON format in a file and redirect to another URL e.g. /show-data, the show-data handler shall read data from file and pass it to EJS template to render view to user.)
   
   
3. Serve the form via handler and using EJS instead of placing the form HTML in a static web page. Pass list of cities and languages as arrays from handler to EJS template and iterate them to renders input fields properly.
   
   
4. Place Bootsrap related files in /public/css and /public/js folder. Update above form HTML to make use of Bootstrap built-in classes for form and make use of table related classes on /show-data template to render view. Declare 'public' as static resource in Express so that Bootstrap and other static resources are served without going through handlers.
   
   
5. Add Bootstrap Nav and footer on both pages i.e. form and /show-data pages. You can copy nav and footer from Bootsrap examples. Place your web pages common top html section (html start tag, head, title, attached css/js files links, and nav section) in header.ejs and place footer content in footer.ejs. Include both templates using EJS include function in all web pages of your app.
   
   
6. Add two more input fields in the form to upload two files. Handle files using express-fileupload package. Let user upload profile picture and CV. Show the uploaded picture on /show-data page and provide a link Download CV on /show-data page to download it (i.e. when user click the Download CV link, the file shall be downloaded)
   
   
7. Each time the form is submitted, save data in JSON on a file (earlier records should not be deleted). Make /dashboard, it shall list all saved records basic fields (id, name, email) in a tabular format. Last column should be Options with View, Delete, Edit link. Pass record ID to that link and perform action based on the link user clicked. View link shall show page that shall display all fields of that record. Delete shall delete that record from json file. Update shall open a new form that shall be pre-filled with earlier data, when user change the form and submit again, that record shall be updated. You can make any number of templates and handlers etc. to fulfill these requirements. Treat user Id as primary key. You can generate ID using some random variable to Time.now() function.