TDM 10200: Project 13 — Spring 2024

Motivation: Flask is a web application framework. It provides tools, libraries, and technologies to build a web application.

Context: Create simple conceptual webpage using Flask

Scope: Python, Flask, Visual Studio Code

Learning Objectives

  • Create a development environment to building a web application on Anvil

  • Develop skills and techniques to create a webpage using Flask (and also using Visual Studio Code)

Readings and Resources

Questions

Question 1 (2 points)

  1. Following the instructions on Visual Studio Code Starter Guide, launch VS Code on Anvil

  2. Following the instructions on Visual Studio Code Starter Guide, including the Initial Configuration of VS Code, and install the Python extension for Visual Studio

  3. Following the instructions on Visual Studio Code Starter Guide, select the Python interpreter path to /anvil/projects/tdm/apps/lmodbin/python-seminar/python3

  4. Open a new terminal in Visual Studio Code. Show the current path for the Python interpreter by typing which python3 (it should show /anvil/projects/tdm/apps/lmodbin/python-seminar/python3 for the output).

(You can stop reading when you get to the section on "Debugging Python Code" in the starter guide.)

For Question 1a, follow the sections of "How can I launch VS Code on Anvil?" Choose the following options:

  • Allocation: "cis220051"

  • CPU Cores: 1

  • Starting Directory: "Home Directory"

If you get "Do you trust the authors of the files in this folder" window pop up, click "Yes, I trust the authors"

Refer to Code Editing in Visual Studio Code to see how to edit and run code

Question 2 (2 points)

  1. Create a python file in Visual Studio Code called helloWorld.py, simply to create and display a greeting sentence

  2. Run the file in the terminal using: python3 helloWorld.py

Question 3 (2 points)

  1. After you setup Visual Studio Code, create a simple flask application that only defines a Flask instance; call it app. It should look like this (make sure that you get the indenting correct:

    from flask import Flask

app = Flask(__name__)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8050, debug=True)

  2. Run the python file

  • A popup window will show the message: "Your application running on port 8050 is available…​". Click the "Open in Browser" button to open a browser.

  • You might need to change the port (say, to 8051, or 8052, etc., depending on how many other students are trying it at the same time!).

  • There will be an error displayed, when you click the "Open in Browser", as discussed in Question 4.

Question 4 (2 points)

  1. You should get a 404 page - "Not Found page" for your Question 3, since you have not (yet) defined a route for the home page. The browser likely will say "The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again." Now update the code to add a route for the home page, as shown in the tip below.

    • Use a decorator for the home ("/") route, followed by a function you would like to run. It is ok if you just output a greeting message like "Hello World!" This should be added to your file, just before the if statement.

    @app.route('/')
def hello():
    return "Hello World!"

  2. Run the python file

If you already ran something in the Python terminal and you want it to stop running, you can click into the terminal and type Control-C.

Question 5 (2 points)

  1. You should get your message in a webpage in Question 4. Now let us (separately) add an html file, instead of putting the content for the message inside the python file. Create a folder named templates, in the same location where your python file is located, and then create a simple html file named index.html in the folder, to hold the greeting message. (Or you may create a fancy html page, but you do not need to make it fancy!)

  2. Update your python file root decorator to render the information to the webpage from index.html

    • Flask’s function called render_template is useful. You can import it by the following statement

    from flask import Flask
from flask import render_template

    and you can change your definition of hello like this:

    def hello(name=None):
    return render_template('index.html', name=name)

  3. Run the python file

Your index.html needs to be inside a templates directory, and that templates directory needs to be in the same place where your application is saved. For instance, Dr Ward’s file is located here: /home/x-mdw/templates/index.html

For instance, Dr Ward’s html page looks like this:

<html>
<head>
The head of my example page.
</head>
<body>
Greetings from Dr Ward and Cookie Monster!
</body>
</html>

Project 13 Assignment Checklist

  • Jupyter Lab notebook with your code, comments and output for the assignment

    • firstname-lastname-project13.ipynb

  • Python file with code and comments for the assignment

    • firstname-lastname-project13.py

  • Submit files through Gradescope

Please make sure to double check that your submission is complete, and contains all of your code and output before submitting. If you are on a spotty internet connection, it is recommended to download your submission after submitting it to make sure what you think you submitted, was what you actually submitted.

In addition, please review our submission guidelines before submitting your project.