Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We’ll set up a home route and section out the starter HTML into our reusable templates. Then, create a projects.py file to hold a list of our project dictionaries, that we can loop through in our projects.html template
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Are you ready to enter
into the world of Flask?
0:00
Let's start with importing
Flask into app.py.
0:03
From lowercase f,
import Flask with an uppercase F.
0:06
To start our site,
we must create an app variable and
0:10
set it equal to Flask,
and pass in dunder name.
0:14
Dunder name refers to the namespace
this is Its running in.
0:17
We'll be running this in app.py directly,
so the namespace will be dunder main.
0:21
If we were to import this
file to be used elsewhere,
0:26
it would take on the name of
the file it is located in.
0:30
In this case, app for app.py.
0:33
Now that we've created our app,
let's create our first route.
0:36
A route From the user side is just
like a URL like teamtreehouse.com.
0:39
From the application side, a route is
a command to run a specific function,
0:44
which returns the response to the user.
0:48
To create one,
we'll have to use a decorator @app.route.
0:52
Then give it a forward slash for
the route.
0:57
Decorators are functions that
wrap around other functions.
1:00
Next we'll define a function called index,
1:04
this is the function our
decorator wraps around.
1:07
Index is the typical name used for
the homepage.
1:11
Inside this function will return
a string that says Hello World.
1:14
Before running this though we
need to tell the app how to run.
1:19
I will place this inside of
a dunder main at the bottom here,
1:22
we're going to use our app
variable to call the run method.
1:26
This method is going to
take a few parameters.
1:29
First, we're going to set debug to true.
1:32
This will restart our server
every time we change the code.
1:35
Next, we're going to give it a port and
a host.
1:39
This is the address
the website will be running on.
1:42
We will use a port of 3,000 and
a host of local host.
1:45
Now we can save the file,
open the terminal, and
1:51
run python3 app.py in the terminal.
1:55
Excellent, it is running on the port and
host we set.
2:01
On Mac OS,
we can hold down the cmd key and
2:05
click the link to open it
in our default browser.
2:07
Hold Ctrl and click on Windows.
2:11
Perfect, our hello world string is showing
in the browser, time to start templating.
2:14
Templates are HTML files that Flask uses
to create the structure of our website.
2:20
First, we need to add a folder
to our project called templates.
2:26
Flask looks for
a folder named templates, specifically.
2:30
Let's copy and
2:35
paste the index.html file that Travis
created into our templates folder.
2:36
Next, we'll get ready to utilize the other
front end files by adding a static
2:45
folder and moving them into it.
2:49
Now, we can start editing the index.HTML
file in the templates folder, and
3:11
update the file paths for
the stylesheet and
3:15
JavaScript files to
match our new structure.
3:18
Now that we have the path
to the stylesheet edited,
3:22
I will press command plus the down arrow
key to quickly get to the bottom of
3:24
the file to update that script tag.
3:28
Then save the file.
3:33
To utilize our template,
3:36
we'll need to add to our imports in
app.py to access the render template.
3:37
Then in our index function,
we can delete the Hello World string and
3:45
call render template instead.
3:50
Passing it index.html, this tells
the app to go into the templates folder,
3:53
grab a file named index.html, and
then send it to the user as a response.
3:59
Now, we can save the app.py file and
refresh the browser.
4:06
Great, our front end is being displayed.
4:12
We will solve the image file path issue
when we work on the hero template.
4:15
Now, let's take our
templating to the next level.
4:19
As you can see,
Travis used semantic HTML elements, so
4:22
the page is nicely sectioned off.
4:26
We can take advantage of that by creating
reusable templates for each section.
4:29
This helps to organize our code better and
4:34
makes the HTML reusable
through template inheritance.
4:37
Let's create a new HTML template file and
call it layout.html.
4:41
This file will contain
our core HTML elements.
4:46
First, in index.html, we'll highlight
everything from the doc type
4:50
to the opening body tag, then cut and
paste it into layout.html.
4:55
Then we need to head to the bottom of
the index.html, cut out the script tag,
5:04
the closing body, and the HTML tags,
and then paste them into layout.html.
5:10
Here, you can change Chuck Bartowski
to your name in the title tag.
5:16
Next, we'll create template files for
each of the site's sections.
5:24
header.html.
5:28
Hero.html, about.html,
5:32
projects.html, contact.html,
5:40
and footer.html.
5:50
Now that we have the template files
created, we can start cutting and
5:54
pasting code from index.html.
5:59
We'll start with a header by first
changing the name on line 2,
6:01
Then cutting lines 1 through 46,
6:09
And pasting them into header dot html.
6:21
Next, we can update the image Path
that I mentioned earlier on line 7,
6:28
And the name on lines 8 and in 12.
6:40
Then, we'll cut lines 2 through 17,
and paste them into hero.html.
6:58
Next, we can cut lines 2 through 26
7:12
And paste them into about.html.
7:19
Feel free at this point to pause me to
personalize the text inside the about.html
7:23
template.
7:28
Next, we can cut lines 2 through 77,
7:32
And paste them into projects.html.
7:41
Don't worry about making any
personalization changes at this point,
7:46
we will be coming back to this template.
7:50
Next we can cut lines 2 through 63 and
paste them into contact.html
7:52
Feel free to pause me here and
personalize the social links.
8:07
Lastly, we change the name on line 4.
8:14
Then cut and
paste lines 3 through 5 into footer.html.
8:21
For now, we'll leave our index.html file
with just the remaining empty main tags.
8:30
Let's head back to the layout.html file
and add some template inheritance.
8:38
Our templates will inherit the core
HTML elements from our layout.html.
8:43
First, we must tell Flask where to
add each template's unique HTML.
8:49
We know our unique HTML goes
goes inside the body tag, so
8:54
here in our layout file, we must declare
that this is where our content will go.
8:58
This is done using a set of curly
brackets and percent symbols.
9:03
Then, inside we will write block
content and close it with endblock.
9:07
Check the teacher's notes for
more information about this jinja syntax.
9:12
Next, let's head back
to the Index.html file.
9:16
We must let Flask know we're
connecting this to our layout template.
9:20
To achieve that, we start again with
curly braces and percent symbols.
9:25
Inside of them,
we add extends layout.html.
9:29
Next, we indent and
add a block content statement and
9:33
a closing end block statement,
then move the main tags inside.
9:38
Any code we write between them will
be rendered between the body tags in
9:44
the browser.
9:49
Now, let's start bringing together
all of our other templates.
9:50
For this,
9:55
we will utilize include statements
starting with include header.html.
9:56
We can now utilize the HTML main tags as
that is where most of our templates will
10:02
render.
10:07
We can include the hero,
about, projects and
10:11
contact templates inside the main tags.
10:14
Finally, below the closing main tag,
we can include the footer.
10:29
Let's save the index.html file and
10:37
refresh the browser to see
if our page still renders.
10:39
Fabulous, it does.
10:43
We can now safely delete the original
index.html file in the project root.
10:45
If we look at our project's template, we
can see that currently all of the details
10:56
for the project are hard coded into the
HTML, which can be cumbersome to update.
11:01
Luckily, flask has a lot
of helpful statements and
11:06
expressions that we can use
to make this content dynamic.
11:09
First, we must create a list of
dictionaries for our project details.
11:13
Let's create a projects.py
file to store that in
11:18
Looking at the projects section
of the site, we know that for
11:24
each project, we will need a property for
a project image, name,
11:28
text used, description, and
links for the live site and repo.
11:32
First, we'll declare a projects list
to store our project dictionaries.
11:37
For the dictionary structure,
the image, name, live, and
11:44
repo properties will have string values.
11:48
The description being multiple lines long,
will need to be a multi line string.
11:50
The text value will be a list.
11:55
This is the structure we'll use for
each project object.
11:57
Add your project screenshots to the static
slash images folder to use as the value of
12:00
the image prop.
12:05
For now, we'll just have a hashtag symbol
as the value for the live property.
12:07
I will be covering hosting terminal-based
Python apps in a later video.
12:11
Pause the video here to add details for
your own projects.
12:16
I will go ahead and populate the list
with my project dictionaries.
12:22
Now for the fun stuff,
12:26
first we will open the app.py file
to import our projects.py file.
12:28
We'll add from projects
import projects on line two,
12:38
then we can pass our projects list as
part of our render templates parameters,
12:42
using projects equals projects.
12:48
This way, all of our templates
will have access to that data.
12:52
Let's save the app.py file and
head back to the project's template.
12:55
We can delete all but
one of the project article blocks.
12:59
We will wrap the remaining article
block with a four loop statement of for
13:08
project in projects.
13:12
Indent the article codeblock and
article closing end for statement.
13:17
Let's clean things up a bit.
13:23
We can now delete all
of the hard coded text.
13:25
Then we can interpolate the project
property values in side the loop and
13:36
inject them into the HTML.
13:41
First, we must add an image tag inside
the project image div with source and
13:43
alt attributes.
13:48
We will use an expression for
the values of those attributes.
13:49
The use of a double set of curly
braces denotes expressions.
13:53
We will use project.image for the source
value and project.name for the alt value.
13:56
Next, we can add an expression
inside the h3 tags for project.name.
14:02
For the text, we can utilize another for
loop to iterate over the text
14:09
list using for tech in project.techs and
a closing endfor statement.
14:14
We can add a span tag and then use
an expression for the tech inside it,
14:22
rendering each tech in its own span tag.
14:26
Next, we can add an expression for
our project description.
14:32
Lastly, we will change the href values for
our live and
14:39
repo links to be expressions containing
project.live and project.repo.
14:43
Then, save the file.
14:52
Let's refresh the browser to see if
our projects.py file was correctly
14:54
interpolated into, Into our templates.
14:58
Perfect it was.
15:04
Let's open the terminal, stop the server
commit and push our changes to github.
15:07
In the next video, we'll go over
hosting terminal based projects for
15:21
free using replimat.com.
15:25
I'll see you there.
15:27
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up