Skip to content

Objectives

  • Create a new project
  • Create a new site structure
  • Create the site navigation
  • Publish to Github
  • Pass variables to html file

Step 1. Start by creating a new project

  • Create a new project called assignment_2
  • Install flask and python-dotenv
  • Create a new .flaskenv file (your application will be called app in this assignment)
  • Create your new requirements document (pip freeze > requirements.txt)

Step 2. Creating your new site structure

First start by creating a new file called app.py. This file should be in the root folder ‘assignment_2’. Be careful not to put it inside the venv folder. Add the following line of code to the file and close the file.

from app import app

Step 3. Create some more folders.

Create a new folder called app.

Create a folder inside app called templates.

Create a folder inside app called static.

Step 4. Create the new init file. Inside app create a new file called __init__.py, it is inside this file you will add the following code. Note this __ is actually two (2) _ _ underscores. 

from flask import Flask

app = Flask(__name__)

from app import routes

if __name__ == '__main__':
    app.run(debug=True)

Step 5. Create our routes.py file, for all our routes (this is the controller of the MVC framework). Inside the app folder create a new file called routes.py and put the following code. We are going to be using a new function called render_template form the flask library, so include it in the first from statement. Notice the render_template function calls the index.html file not base.html — important for later.

from flask import render_template

from app import app

@app.route('/')
def index():
     return render_template('index.html')

Step 6. Create the assets, css, and js folder. The objects inside those folders should be placed inside similar folders inside your static folder.

Create a folder css inside the static folder.

Create a folder assets inside the static folder.

Create a folder js inside the static folder.

You will be moving the css, favicons, pictures, and anything else used in the HTML into these folders.

Step 7. Create two more files base.html and index.html inside the templates folder. The base file will be the main view for all your files. Then all the other templates will be extended off of the base file.

Your base.html file should have the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block head %} {% endblock %}
</head>
<body>
    <p>My name is Dr. Marshall.</p>
    {% block body %} {% endblock %}
</body>
</html>

Your index.html file should have the following code:

{% extends 'base.html' %}

{% block head %}
    <title>Assignment 2 - Bryan Marshall</title>
{% endblock %}


{% block body %}
    <!-- Header-->
        <header class="py-4">
            <div class="container px-lg-5">
                <div class="p-4 p-lg-1 bg-light rounded-3 text-center">
                    <div class="m-4 m-lg-5">
                        <h1 class="display-5 fw-bold">Welcome to Assignment 2</h1>
                        <p class="fs-4">My name is Bryan Marshall and I love Flask.</p>

                    </div>
                </div>
            </div>
        </header>
{% endblock %}

Step 8. Send your files to GitHub. Go to VCS and “enable version control”. Select “GIT” as your version control. You will need a GitHub account, so if you have not done so, create one now. Connect your account to the PyCharm project.

To turn in your assignment, share your repository with bamarshall06 and upload your repository URL to GeorgiaView.