Now to begin, all we need is a simple Flask application.
You can either write this out from scratch for practice,
or you can head over to the course resources and you can download this file as a
zip file. Once you've unzipped it and opened it in PyCharm,
you should see a server.py file
which contains all of the basic code that is required to render hello world onto
the screen.
So if we go ahead and just run this file and go to the local URL of our website,
you should just be able to see hello world. Now,
the next thing I want you to do is to create an HTML file
which you'll call index, and inside this HTML file,
we're going to give it a title of just my website and the more important part is
going to occur in the body. For practice,
go ahead and see if you can create an h1 that says hello world
instead of returning just a hello world as text, and render this index HTML onto
the screen instead. Pause the video and see if you can complete this challenge.
All right.
So the first thing we have to do was to create an h1 that said hello world.
And once we've created our index.html,
we want to render it as a template instead of just returning this text.
So to do that, we're gonna need this render template function at the top.
So if we're going to say render template,
and then the template we want to render is called index.html.
But one thing you have to remember is that this file has to be inside a folder
called templates because Flask has specific requirements for things like
static files and templates.
So now we should be ready to rerun our app so that it will take into account the
new files and then go to our website and you should see this hello world is
being rendered from our index.html. Now,
one of the things you might be wondering is why is this a template?
Why are we rendering a template
when in fact what we're doing is just sending over an HTML file?
Well, the HTML files can actually act as a template
as long as we know how to work with a templating language.
The templating language that we're going to use is called Jinja
and this is specific for Python.
It allows us to use some syntax like these curly braces, percentage signs,
or double curly braces in order to specify inside the HTML file
which parts should actually be evaluated as Python code.
Let me show you something.
We've already seen that just by putting this text in between the h1
we get this rendered as text in the h1.
And if I go ahead and I wrote something like 5 * 6,
what would you expect our website to look like? Well,
if I go ahead and hit save, and because we're in debug mode,
then our server should allow us to refresh the page and you see,
it's just the plain text of what I wrote right here. Now, however,
if I go ahead and add two curly braces around this expression,
then this now suddenly becomes evaluated as Python code.
So let's hit save again and let's hit refresh and you can see now
instead of 5 * 6, I get 30.
So this is actually being seen as Python code
and the calculated outcome is being put into this h1.
This is why this is known as a templating language,
because it means that we can have an HTML
which acts as the template where the title doesn't change, the head doesn't
change,
the styling doesn't change, and only the parts which we specify inside these curly
braces actually get evaluated as Python code and inserted into the template.
I'm going to add back the hello world inside an h1
and also our Python expression inside this Jinja markup so that you can see
both versions.
The next thing I want to do is what if I wanted to generate a random number?
Let's say I was to create an h3 and inside here
I wanted to generate a random number. How would I do that?
Well, when we're working with something that requires an import, for example,
to get a random number, we're going to need to import the random module,
then it's best to write our code inside our Python server.
Let me show you how this works.
Let's go ahead and import random so that we can generate a random number.
And I'm going to do that inside this home function. Now,
in this case, I'm just going to generate a random number between 1 and 10.
But the most important thing is I want to be able to send this random number
over to my index.html and incorporate it into this template when I render
it. So what I can do after the first parameter
which is the name of the template file,
I can add as many keyword arguments as I need.
If we take a look at this render template,
you can see that after the name of the template,
the next parameter has the double star context.
This is basically the same as when you see the double star keyword arguments or
kwargs.
Basically it says that you can add as many keyword arguments as you want
and each of these keyword arguments need to have a name for the variable and a
value for the variable.
And the reason why they need have a name and value is because we can refer to
that variable by its name inside the templated HTML file.
So for example, if I go ahead and send over a variable
which I'll call num and then set it equal to this random number we've generated
here. Well, now, once this template gets rendered,
it's going to pass over this variable with this name and with this value.
So now in our index.html, I can tap into that variable name
which is num
and I can insert it using these double curly braces into the position that I
want it to be. So that's going to go inside that h3.
And now if I hit save and go ahead and refresh my website,
you can see I've got this random number and then a number show up.
And every time I hit refresh,
you can see that number changes to a different random number between 1 and 10.
So we've seen how we can render an HTML file just by using render
template, but we've also seen that inside the template,
we can use these double curly braces in order to create single lines of Python
expressions
which can be evaluated and then inserted into the position that we desire.
Now, we've also seen that we can pass over any variable
we desire as keyword arguments after the name of the template.
So now I've got a challenge for you. On a lot of websites, for example
if you go to the Jinja website which you'll find in the course resources
and you scroll to the very bottom, there's usually a line of copyright text.
So it will say copyright and the current year
and then the name of the creator or the company.
Now that year is supposed to be the current year to say that this website's
copyright is valid in this current year.
But very often, even Jinja included,
they don't actually update their footer because it's probably just some hard-
coded text, as you can see right here. Now,
this is something that annoys a lot of web developers and web designers.
And they are outraged by the idea that people would have just some plain text
as their copyright. We're programmers, right?
We should be able to update our footer dynamically by using code.
And this is a website which has a pretty much a sort of campaign against
websites with outdated footers. And if you take a look at their footer,
you can see that this is not just a piece of plain text.
This is actually a script using JavaScript to work out the value of the current
year. And so it's always going to be up to date no matter what year it is.
So we also want to have a dynamic footer year,
but we're not going to be doing it with JavaScript and definitely not with PHP.
We're going to be doing it with Python.
So this is the challenge for you. Using what you've learned in this lesson,
see if you can create a footer element so we can put it inside a footer tag
like this. And inside this footer tag,
I want you to create a paragraph element that can say any piece of text
as long as it contains the copyright year, which should be the current year
worked out programmatically using Python.
Pause the video and have a think about how you might solve that challenge.
All right.
So the first thing we're going to do is create our paragraph and we're going to
say something like copyright and then the year
and then we're going to say, um,
something like built by... This is a pretty common footer.
Now what we want to do is we want to replace these YYYYs
with the actual year. So, as you can imagine,
I'm going to be using these double curly braces to insert the year into here.
But first I have to generate that. So going back to our server.py,
I'm going to import the datetime module
which you've used many times before to generate the current date and time.
And we're going to use it specifically this time though,
to generate the current year.
And it's going to be done using the datetime module, the datetime class,
and then we're going to call the now method in order to get the current date
time and then we're going to tap into the year property.
So now in addition to passing over that random number as num,
I'm also going to pass over a new variable with the name of year and the value
of the current year that we just worked out from here.
So now when this template is rendered,
it's also going to receive a variable called year
which we can insert right here into the copyright like that.
So now if I go ahead and hit save, go back to our website,
hit refresh, you can see our footer show up copyright 2020,
which is the current year I'm living in, and it has the rest of the text.
So now no matter which year it is
we will never need to update our footer ever again because it's being automatically
updated using code.