IT 231 -- Feb 29, 2024 , 2023 Notes

IT 231 -- Feb 29, 2024

Review Exercises

What is a parameter in a URL? How do you define a parameter and how do you obtain the value of a parameter in the main.js file?
Answer: A parameter is a value that is included at the end of a route entered in the browser address bar, for example:
```
localhost:3000/seeds/show/3
```
3 is the parameter. This parameter can be read by the main.js script and can determine the output displayed the browser window. You define a parameter using the app.get method, for example:
```
app.get("/seeds/show/:n", (req, res) => {
    // body of anonymous function goes here
});
```
The value of the parameter is obtained by main.js like this:
```
var n = req.params.n;
```
What is a query in a URL? How how do you obtain the values in a query in the main.js file?
Answer: a query consists of data appended to the route entered in the browser address bar. The query starts with a ? and consists of key-value pairs separated by &, where each key is separated by its corresponding value with =. For example:
```
localhost:3000/person&name=Alice&gender=F&age=11
```
In main.js, to obtain the query as an object literal:
```
var q = req.query;
```
The resulting value of q is
```
{ name: 'Alice', gender: 'F', age: '11' }
```

Create a form corresponding to the route /student_info that accepts the student information Full Name, Year, GPA. When the form is submitted, the resulting query is written to the JSON file student-info.json. Answer: here are the source code files.

-----------------------------------------
// Source code file: main.js
const express = require("express");
const fs = require("fs");
const app = express( );
app.set("view engine", "ejs");

app.get("/student_info", (req, res) => {
    res.render("student_info");
});

app.get("/write_info", (req, res) => {
    var output = JSON.stringify(req.query);
    fs.writeFile("data/student_info.json",
        output, (err) => {
        if (err) {
            res.send("Error writing to output file.");
        }
        else {
            res.send("Student info " +
                "written to JSON file.");
        }
    });
});

app.listen(3000, ( ) => {
    console.log("Server started.");
});
-----------------------------------------
<!DOCTYPE html>
<!-- Source code file: student_info.ejs -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Student Information</title>
    </head>
    <body>
        <h1>Student Information</h1>

        <form name="form1"
            action="/write_info"
            method="get">
            <label for="fullName">Full Name:</label><br>
            <input type="text" name="fullName"><br><br>
            <label for="year">Year:</label><br>
            <input type="text" name="year"><br><br>
            <label for="gpa">GPA:</label><br>
            <input type="text" name="gpa"><br><br>

            <input type="submit" value="Submit Student Info">
        </form>
    </body>
</html>
-----------------------------------------

What does CRUD mean?
Answer: the acronym CRUD means Create Read Update Delete. We will see how to implement Create and Read capability later today, and will see how to implement Update and Delete next week.

Tutorial 5

Complete Tutorial 5.

Project 3

Look at the Project 3 Description.

Practice Problems

Start with this array of object literals:

var pets = 
{
    ID1001: { name: 'Sadie', animalType: 'dog', age: 3 },
    ID1009: { name: 'Coco', animalType: 'cat', age: 4 },
    ID1013: { name: 'Slinkie', animalType: 'snake', age: 2 },
    ID1016: { name: 'Thumper', animalType: 'rabbit', age: 2 },
    ID1027: { name: 'Max', animalType: 'dog', age: 5 },
    ID1029: { name: 'Duke', animalType: 'dog', age: 7 },
};

How can you determine if an object contains a specified key, for example ID1016?

Write a for loop that computes the average age of the dogs.

Look at the TestEjs5 Example. Modify it so that the form uses method="post". Here is are the modified source code files. Test them. Here are the source code files:

-------------------------------------------------
// Display a name obtained from an input form with
// method=GET
// Source code file: main.js
const express = require("express");
const app = express( );
app.use(express.urlencoded({extended: false}));
app.set("view engine", "ejs");

app.get("/contact_info", (q, r) => {
    r.render("contact-info");
});
app.post("/contact_receipt", (q, r) => {
    console.log(q.body);
r.render("contact-receipt", q.body);
});
app.listen(3000, ( ) => {
    console.log("Listening on port 3000.");
});
-------------------------------------------------
// Source code file:
<!DOCTYPE html>
<!-- Source code file: contact-info.ejs -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TestEjs2 Example</title>
    </head>
    <body>
        <h2>TestEjs5 Example</h2>
        <form name="form1" 
              action="/contact_receipt" 
              method="post">
            <label for="fname">First Name:</label><br>
            <input type="text" name="fname"><br><br>
            <label for="lname">Last Name:</label><br>
            <input type="text" name="lname"><br><br>
            <label for="phone">Phone:</label><br>
            <input type="text" name="phone"><br><br>
            <label for="email">Email:</label><br>
            <input type="text" name="email"><br><br>
            <input type="submit" value="Submit Contact Info">
        </form>
    </body>
</html>
-------------------------------------------------
// Source code file:
<!DOCTYPE html>
<!-- Source code file: contact-receipt.ejs -->

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TestEjs5 Example</title>
    </head>
    <body>
        <h1>TestEjs5 Example</h1>

        <p>Your contact information has been received<br>
           Thank you for your information.</p>

        <table>
            <tr> 
                <th>First Name</th> <th>Last Name</th>
                <th>Phone</th> <th>Email</th> 
            </tr>
            <tr>
                <td><%= fname %></td> <td><%= lname %></td>
                <td><%= phone %></td> <td><%= email %></td>
            </tr>
        </table>
    </body>
</html>
------------------------------------------------