CS50 Lecture: Week 9 - Building Dynamic Web Applications 🌐

Overview

• Week 9: Synthesis of web programming knowledge from previous weeks.
• Languages covered: Python, SQL, HTML, CSS, JavaScript.
• Focus on creating dynamic web applications rather than static websites.

Key Topics

HTTP Server Recap

• Previous tool: Used for serving web pages in Codespaces on nonstandard ports (80, 443).
• What it did: Served static content like HTML, CSS, JavaScript.
• Limitation: Limited to static content. No interactivity.

Dynamic Web Applications

• Requirement: Need input and output to create interactive experiences (e.g., Google search, Gmail).
• Modern tool: Flask framework for Python.

Flask Framework

Introduction to Flask

• What is Flask: A microframework for building web applications in Python.
• Usage: Simplifies implementation of web apps by using conventions and third-party code.
• Advantages: Easy to use, lightweight compared to alternatives like Django.

Setting Up Flask

• Basic commands:
  • flask run: Starts the web server.
  • render_template: Renders HTML templates.
• File structure:
  • app.py: Main Python file.
  • templates/: Folder for HTML templates.
  • static/: Folder for static files like CSS, JavaScript, images.
  • requirements.txt: Specifies third-party libraries.

Building Your First Flask App: Hello World

• Step-by-step:
  • Create and move files into the templates folder.
  • Define routes using @app.route.
  • Use Flask functions to handle user input via URL parameters.
  • Render templates dynamically with render_template.

Advanced Flask Features

User Input and Forms

• Handling Forms: Use request.args for GET and request.form for POST requests to handle form data.
• Input validation: Ensure fields are not empty and values are expected.

Example: Frosh IMs Registration

• Purpose: Collect user input for sports registration.
• Features:
  • Handling GET and POST methods.
  • Validating form inputs.
  • Storing inputs in a dictionary.

Template Inheritance

• Why: Avoid code duplication in HTML templates.
• How: Use extends and block tags to create a base layout.

Implementing User Sessions

Introduction to Cookies and Sessions

• Cookies:
  • Used for maintaining state between the client and server.
  • Headers: Set-Cookie from server, Cookie from client.
• Sessions: Managed by Flask for storing user state.

Creating Login Feature

• Steps:
  • Use session variable to store user data.
  • Define routes for login and logout.
  • Implement user input handling with form submissions.

Creating a Simple Store

Bookstore Example

• Features:
  • Display a catalog of books.
  • Add books to a shopping cart.
  • Use sessions to maintain the shopping cart state.

Implementation Details

• Routes: Implement /, /cart, and more for managing the store.
• Database: Using SQLite for storing book data.

Modern Web Functionality

AJAX (Asynchronous JavaScript and XML)

• Purpose: Make web apps more dynamic by fetching data without reloading the page.
• Example: Autocomplete search for a TV show database.

JSON (JavaScript Object Notation)

• Usage: A standard format for transmitting data between server and client.
• Benefit: More standardized and easier to parse.

Final Thoughts

• Integration: Combining SQL, web development, and Flask to create robust applications.
• Real-world applications: Concepts covered are foundational for building real-world web applications like Gmail, Amazon, etc.

Wrapping Up

• Emphasis on modern web development and creating dynamic, interactive applications.
• Looking forward to final projects using these concepts.

[End of Lecture] 🎉