Study Notes on Web Application Development Using Express and HTTP Cookies

Introduction

The lecture begins with the professor greeting the class and outlining the agenda for the day. The main focus is on developing a web application relevant to the first assignment. Students are encouraged to pay close attention as the lecture contains essential information for completing their assignment.

Lecture Agenda

  1. Overview of Chapter 10

  2. Building a Registration Form Application

    • Use of Express framework

    • Template engine for rendering HTML

    • Collect data (username and password) from the user

  3. Storing Data Temporarily on the Server

    • Using an array to store data in memory

  4. Addressing Functional Requirements and Limitations

    • Introduction to HTTP cookies

    • Tools for managing user sessions and storing data securely

Building the Registration Form Application

The professor emphasizes creating a simple application to collect usernames and passwords. Requirements for the application include:

  • Use of Express framework

  • Implement a template engine

  • Collect data through an HTML form using POST method

Data Structure

The data (username and password) will be temporarily stored in an array on the server. The professor draws parallels to a capstone project where users need to create an account but assures students that for this exercise they will not be implementing a real database; instead, they will use an array to store data in the server's memory.

New Functional Requirement

A new requirement introduces a challenge which will demonstrate that storing data in an array has its limitations. The professor sets the stage for the discussion on HTTP cookies as a solution to the new requirement.

Practical Demonstration of Building the Application

The professor outlines the steps to create the application from scratch, including configuring necessary components. Key steps include:

  • Setting up a new project folder

  • Initializing Express and the template engine configurations

Details of Code Implementation

Initialization of Express:

  • Set up a view folder, informing Express of its location.

  • Identify and configure the template engine used during rendering.

Handling Form Data:
The POST data from the HTML form needs to be processed. The following components are essential:

  • Middleware for parsing URL-encoded data (The specific plugin needed is mentioned). The professor clarifies that data received in this format should be processed using appropriate methods to avoid parsing issues.

Creating Routes

The application requires two distinct routes:

  1. GET route for serving the registration form. This route renders the HTML form to the browser.

  2. POST route for processing the registration data. This route will handle the details submitted via the form (username and password).

The reason for requiring two routes is to keep responsibilities separate, preventing code complexity from becoming overwhelming.

Defining the Routes

GET Route

  • The server responds to GET requests by rendering the index view while passing the current users array to the template engine.

    • An object is passed where a property users holds the array containing registered users.

POST Route

  • The server must define behavior for the POST route to handle incoming registration data. The professor explains that the body of the request will contain the username and password.

  • Validation is required to ensure that both fields are populated before proceeding.

Server Response and Handling

Once data is submitted to the POST route:

  1. Validate that both the username and password fields have legitimate values.

  2. If valid, create a user object and append it to the users array.

  3. The server generates a response that instructs the browser to redirect back to the initial registration page.

Error Handling

  • The professor discusses potential issues such as failing to validate inputs leading to null values in the users array. An important practice highlighted is sending a status code (e.g., 400) back to the client to indicate a bad request whenever input validation fails.

Introduction of HTTP Cookies

As the course progresses, the need for HTTP cookies arises to resolve issues of state management for user sessions:

  • Explanation of what cookies are: small bits of data stored in the browser which the server can access with each request.

  • Implementation steps include how to set cookies, read cookies, and manage data flow securely between client and server.

Summary of Cookie Management

The lecture emphasizes implementing cookies to transition from a stateless server to a stateful server:

  1. Store user-specific data on the client-side.

  2. Each time a request is made, include relevant cookies to maintain session integrity and manage user data properly.

Best Practices with Cookies

  • Limitations on stored data size (approx. 4 KB).

  • Discuss security implications and user privacy regarding cookies.

  • Implementation of fallback measures for robust application performance despite cookie-related issues.

Conclusion

As the lecture wraps up, students are encouraged to ask questions about their understanding of the topics discussed, including the implications of state management through cookies. The professor reinforces the importance of conceptual clarity in web development and invites students to discuss practical examples involving real-world applications, such as authentication systems (like Gmail) which utilize cookies extensively.

Overall, today's lecture involves building a fundamental understanding of how to manage user data in web applications, with a practical focus on Express and client-server interactions.