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