You need to use server side code to process the submitted information, and then response html...

Question

You need to use server side code to process the submitted information, and then response html message back to client side.9.2C-Create a Response Page 9.2C: Create a Response Page Tasks You are provided with an online form that implements a simple Online Survey. The html code for this form is provided at the end of this document and a screenshot of the form is shown below: Task9.2.1 Example form layout You are required to implement the express server code to process the content of the submitted survey form and to return a formatted response. This would be implemented in Node.js application program (i.e., a .js file). When the form is completed by the user it can then be submitted to the server for processing. A sample of a completed form is shown below: SIT774 Web Technologies and Development Task 9.2C 2021/T1 1/8 Task9.2.2 Example completed form The Node.js application program should process the data submitted in the form and return a formatted response like that shown in the screenshot below: SIT774 Web Technologies and Development Task 9.2C 2021/T1 2/8 Task9.2.3 Example survey response NOTE: The processing of the form should include: 1. The current date/time the form was received. 2. The difference in ‘days’ between the current date and the submitted Birthday date. Hints Some things to consider in completing this task: In preparing the response page, consider using the data list (dl /dt /dd ) html fields, along with the Bootstrap panel card component, as used in the client- side survey form. In the server code, subtracting one Date object from another Date object will return the difference in milliseconds. To convert this to days, just multiply this by the appropriate factors. What will you submit? SIT774 Web Technologies and Development Task 9.2C 2021/T1 3/8 You should submit: Source code of the Node.js file (i.e., the .js file). Screenshot of the browser window showing the form web page with entered data. Screenshot of the browser window showing response message after the “Submit” button is clicked. Supporting Code Online Survey Front-end Code This code is also available through Ontrack. Node Express Example Feedback ONLINE SURVEY Personal Info Your Name: Your Gender: SIT774 Web Technologies and Development Task 9.2C 2021/T1 4/8 Your Gender: Male Female Your Postocde: Your Age: Interests Your Favourite Food: Select a food.. Pizza Vegatables Hamburgers Pasta Sushi Kebabs Curry Your Favourite Sport: Select a sport.. AFL Tennis Soccer Cricket Rugby Athletics SIT774 Web Technologies and Development Task 9.2C 2021/T1 5/8 Athletics Swimming Your Favourite Movie Genre: Action Drama Horror Comedy All Your Interests (multiple): Reading Jogging Knitting Music Coding Fishing

Amit Kumar · Accepted Answer

app.js
const mysql = require("mysql");
const express = require("express");
var app = express();
var fs = require("fs");
const router = express.Router();
app.use(express.json());
app.use(express.urlencoded());
const { Sequelize, DataTypes, Model } = require("sequelize");
const sequelize = new Sequelize("api", "root", "", {
  host: "localhost",
  dialect: "mysql",
  migrationStorage: "json",
  define: {
    charset: "utf8",
    collate: "utf8_general_ci",
    timestamps: true,
  },
});
sequelize
  .authenticate()
  .then((err) => {
    console.log("Connection successful");
  })
  .catch((err) => {
    console.log("Unable to connect to database");
  });
class Survey extends Model {}
Survey.init(
  {
    surveyId: {
      type: DataTypes.INTEGER,
      primaryKey: true,
      autoIncrement: true,
    },
    fname: {
      type: DataTypes.STRING,
      allowNull: true,
    },
    sname: {
      type: DataTypes.STRING,
      allowNull: true,
    },
    gender: {
      type: DataTypes.STRING,
      allowNull: true,
    },
    postcode: {
      type: DataTypes.STRING,
      allowNull: true,
    },
    bday: {
      type: DataTypes.STRING,
      allowNull: true,
    },
    food: {
      type: DataTypes.STRING,
      allowNull: true,
    },
    sport: {
      type: DataTypes.STRING,
      allowNull: true,
    },
    genre: {
      type: DataTypes.STRING,
      allowNull: true,
    },
    interests: {
      type: DataTypes.STRING,
      allowNull: true,
    },
  },
  {
    tableName: "survey",
    freezeTableName: true,
    timestamps: true,
    sequelize,
    modelName: "Survey",
  }
);
app.use(
  router.post("/survey", function (req, res, next) {
    const inter = req.body.interests;
    const data = req.body;
    if (inter.length > 0) {
      data.interests = inter.toString();
    } else {
      data.interests = inter;
    }
    Survey.create(data)
      .then((survey) => {
        const date = new Date(survey.createdAt);
        var options = {
          weekday: "long",
          day: "numeric",
          year: "numeric",
          month: "long",
        };
        var days = new Date(survey.bday).toLocaleTimeString("en-us", options);
        var x = days.split(",");
        var y = x[1].split(" ");
        const dispbdaydate = x[0] + " " + y[2] + " of " + y[1] + ", " + x[2];
        const dispbdaydays =
          (new Date() - new Date(survey.bday)) / (1000 * 60 * 60 * 24);
        res.send(`
        
          
        SURVEY REPORT
        
          Survey Report Details
          
            
              Thank you
              '${survey.fname} ${survey.sname}'
              for completing and submitting this survey. Please check carefuly
              that the details below are correct.
            
            
              Survery report received on: ${date}.
            
            
              
                Firstname entered:
              
${survey.fname}
            
            
              
                Surename entered:
              
${survey.sname}
            
            
              
                Gender entered:
              
${survey.gender}
            
            
              
                Postcode entered:
              
              ${survey.postcode}
            
            
              
                You were born on:
              
              ${survey.bday}
            
            
              
                Birtdate entered:
              
              ${dispbdaydate}
            
            
              
                Age in days:
              
              ${dispbdaydays}
            
            
              
                Favourite food
              
              ${survey.food}
            
            
              
                Favourite sports:
              
              ${survey.sport}
            
            
              
                Favourite Movie Genre:
              
              ${survey.genre}
            
            
              
                Interests selected:
              
              ${survey.interests}
            
            
              Thank you for your time and our team will be in touch with you
              shortly.

       `);
      })
      .catch(next);
  })
);
app.use(function (req, res) {
  fs.createReadStream(__dirname + "/form6.html").pipe(res);
});
app.listen(8080, function () {
  console.log("server is running on port -> http://localhost:8080/");
});
form6.html
    
    
      ONLINE SURVEY
      
        
          Personal Info
          
            
              
                Your Name:
                
                
              
              
                
                
                

            
              
                Your Gender:
                
                  
                    
                    Male
                  
                  
                    
                    Female
                  

              
                Your Postocde:
                

              
                Your Age:
                
                

        
          Interests
          
            
              
                Your Favourite Food:
                
                    Select a food..
                  
Pizza
Vegatables
Hamburgers
Pasta
Sushi
Kebabs
Curry
                
              
              
                Your Favourite Sport:
                
                    Select a sport..
                  
AFL
Tennis
Soccer
Cricket
Rugby
Athletics
Swimming
                

            
              
                Your Favourite Movie Genre:
                
                  
                    Action
                  
                  
                    Drama
                  
                  
                    Horror
                  
                  
                    Comedy
                  
                  
                    All
                  
                  

              
                Your Interests (multiple):

9.2C-Create a Response Page 9.2C: Create a Response Page Tasks You are provided with an online form that implements a simple Online Survey. The html code for this form is provided at the end of this...

ONLINE SURVEY

Answer To: 9.2C-Create a Response Page 9.2C: Create a Response Page Tasks You are provided with an online form...

Answer To This Question Is Available To Download

Related Questions & Answers

Submit New Assignment