Intro to Flask

CS 396: �Introduction to Web Development

Winter, 2022

Announcements

1. Lab 2 posted
1. Please read the instructions before coming to Lab
2. No class Monday (to commemorate Dr. Martin Luther King Jr.)
3. Class on Wednesday will be in person in LR2

Outline

1. CSS Review (from Monday). Start with slide 59
2. Approaches to creating websites
3. Flask Demo

Server-Side Programming

Your Web Server�(any language;�listens on port 80/443)

Client-Side Programming

Web Browser�(Only HTML, CSS, & JS)

Different Approaches to Creating Web Interfaces

1. Hand-editing HTML & CSS files
• Lab 1, HW1
2. Server-Generated HTML files
• Lab 2, HW2, today & next week
3. Client-Generated HTML files
• Coming up!
4. Hybrid Approach
• Both client-side and server-side rendering used

​

​

1. Hand-editing HTML & CSS files

1. Front-end programmer creates all of the HTML by hand (e.g. Lab1, HW1)
2. These “static” HTML files are then uploaded and stored one the web server’s file system.
• What makes a computer a web server?
• It’s listening for traffic on port 80/443
• It encode/decodes messages using the HTTP/S protocol
3. When these static files are requested by a client (browser, web crawler, etc.), the server sends them to the requestor (over the network, via the HTTP protocol)

​

2. Server-Generated HTML

• Back-end programmer writes some python code that can dynamically generates HTML files
• When a “route” (i.e. URL path) is requested by a client, the server runs the corresponding code, whereby templates are merged with data.
• This dynamic template, which has just been generated on-the-fly, is then sent to the requestor (over the network, via the HTTP protocol)
• What websites use this approach?
• Wikipedia, Craigslist, the course website (uses Jekyll), Google’s search results
• How can you tell? – Use the Browser Inspector

3. Client-Generated HTML

• Front-end programmer writes some JavaScript code that can dynamically generates the DOM Tree after a “skeleton” HTML is pulled down from the server. Basic flow:
• Minimalist HTML page loads, with links to a 1 or more JavaScript files
• JavaScript files are pulled down by Browser and interpreted
• JavaScript issues commands that dynamically generate the DOM, using client-side templates
• This often involves querying REST APIs for data (or embedding JSON strings)
• What websites use this approach?
• Instagram, Facabook
• How can you tell? – Use the Browser Inspector!

​

​

4. Hybrid Approach Server-Side & Client-Side Logic

• Baseline HTML file is generated, dynamically, from the back-end
• JavaScript logic also included for dynamic widgets and new data requests
• What websites use this approach?
• Most websites. Amazon is a good example.
• How can you tell? – Use the Browser Inspector!

​

​

Intro to Flask

1. Set up
2. Flask sends a static file
3. Flask generates dynamic HTML file
4. Flask injects data into HTML templates
5. render_to_template (easier way to do this)
6. Different data depending on URL (Spotify Artist Query)

​

Set Up

1. Install python3.x if you haven’t already
2. Install flask: pip3 install Flask
3. Set environment variables
• Windows:�set FLASK_APP=app.py�set FLASK_ENV=development
• Mac: �export FLASK_APP=app.py�export FLASK_ENV=development
4. Navigate to lecture04 files and run the web server: flask run

In-Class Challenges

• Exercise 1: Modify the template so that it greets the current user (Walter)
• Exercise 2: Use a template to do the same thing by adding data to the template’s context
• Pass the data into flask’s render_template function as a keyword argument
• Modify the template to access the data using {{ expression }} notation
• See if you can make a web page for a spotify artist with an embedded audio player.
• Feel free to search for your own artist using this URL: https://www.apitutor.org/spotify/simple/v1/search?q=boston&type=artist&limit=1