#100DaysOfWeb in Python Transcripts
Chapter: Days 1-4: Flask Intro
Lecture: A new template for a 100DaysOfCode page
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's create another page. As I said, it's going to be called 100Days.html. To do that let's create it here, 100Days.html.
0:12
We're going to speed this up a little bit. Now that I've explained it there's no need for us to type it all out one by one.
0:19
There is our Jinja code to create this template. Again, we are extending base.html. We're going to take that code, that template
0:27
that format from the base.html file and we're going to import it. We're going to extend it into this 100Days.html.
0:35
Essentially at the moment all we're taking in is that unique title code. That's the only real valuable stuff that we're taking in.
0:46
Let's throw in another H1 tag here. And let's throw in some unique text here. This is text from 100Days.html, not base.
1:04
Again, a little bit more proof to show that we are taking the code from this file not from the base file. And the one thing we didn't do previously
1:18
was edit the routes.py file because we already had an index.html route created. So let's edit this now. We need to create a route for our new page.
1:31
We need to tell our Flask app where it needs to go if someone says, "I want to load 100Days.html." So let's do that here, app.route.
1:43
And the URL end point that we're going to be using is 100Days.html. That's the file. I will show you something here. This won't work.
1:57
We can't actually use a number to start our function name. We have to use a letter. That's just a rule in Python. Notice the color change difference.
2:07
It knows, it knows too much. So let's put an arbitrary p there and continue. And all we need to do here is return, just like
2:20
the other one, return the render_template that we're going to be using for this. So in this case it is return render_template 100Days.html. That's all.
2:39
Just to recap, if you browse to 100Days.html that's the route that the app hits. We then load this HTML file. That's what this function does.
2:50
It returns that. That's all we need to do. Let's head over to our app and run it. Open up the browser again. Okay, we're in our browser. Hit enter.
3:05
You can see that it ran and we see our same site. Let's go to index, same thing. And now let's change that to 100 days.
3:17
And that hasn't worked obviously. Look at that and let's leave this area in because this is a really good point.
3:23
What I've done wrong here is in the routes.py I've actually left in the route here .html. That's not going to work. Let's get rid of that.
3:38
Let's restart the Flask app. Bring up the browser again. Okay, we have the browser up. Let's reload the page and there we go.
3:49
So you can see there's just a little bit of an error there. Congrats on starting your 100 Days of Code challenge.
3:55
That is text that came from the actual 100Days.html. Again, this is text from 100Days.html, not base. But this is our site.
4:07
This came from our base.html template. Now you can see how you can create as many web pages as you want within your templates
4:19
folder for whatever your website might have and they can all call on that one base.html file for the overall architecture of your page.