#100DaysOfWeb in Python Transcripts
Chapter: Days 45-48: Build a simple Django app
Lecture: Template settings and create a child template
0:01 Next we can finally create
0:02 the quotes list templates.
0:06 So I'm going back into my quotes app
0:09 and in my view I defined quotes/quote_list.html.
0:15 Now first going back to settings
0:21 I just want to make sure we're clear
0:23 on the templates.
0:24 So we just defined our base template in
0:27 mysite/templates and Django finds that
0:30 because I added it to DIRS.
0:32 The other dir setting is APP_DIRS=True.
0:36 And that makes that templates dir that are in our apps
0:39 so in this case quotes, will be found dynamically.
0:43 And Django's convention is, in an app
0:46 so in this case quotes, to make a templates dir.
0:54 And inside the templates dir I make another directory
0:56 with the name of the app, in this case quotes.
0:59 It's a bit redundant, but it's how Django works
1:02 it's how it auto detects templates.
1:05 So now I can make a template inside templates quotes
1:10 we're going to call it quote_list.html.
1:14 And here I paste in our HTML.
1:20 I touch upon humanize in a bit.
1:22 The most important thing here
1:24 is we're going to extend the base.html.
1:27 And this is where it all ties together
1:29 with the pathing defined in the settings
1:32 Django knows where to find base.html.
1:35 And what this does is, it loads in all the HTML
1:38 and where we have this content log defined
1:42 I open that up here and then add my
1:44 customized HTML content for that log
1:49 and then close it.
1:56 So it's like displaying this whole template
2:00 and where I see content here, it inserts
2:05 this HTML which is specific to our quote_list template.
2:10 So that's pretty cool. So quote_list inherits
2:14 from base.html and has its own content.
2:19 And around this we get all the generic stuff
2:22 we want to have for all the pages.
2:29 So we make a table, we use MUI classes
2:32 to style it nicely. We have a table header.
2:37 And here we see the quotes data we got passed in.
2:41 So again, in the view, we call render with the template.
2:46 And the dictionary see as the third argument
2:49 is the quotes data we loaded from the URL.
2:52 And here we look through that query set
2:54 I was going to say list, but it's actually a query set.
2:57 And for each quote in that query set
3:00 we can access the attribute, so author, added, quote id.
3:08 And here make a link to go into the quote
3:10 which will be another function in the view.
3:12 So we have the quotes namespace
3:15 and the quote_detail which we will write next
3:18 in the view. So here you can see
3:20 that it's coming together.
3:24 We have the quote, author added
3:27 and we have two buttons to edit quote
3:30 and to delete the quote.
3:32 And those again lead to quote_edit and quote_delete
3:37 which are views in our quotes namespace.
3:41 And we will write those, in a later video.
3:46 And finally, outside of the table, we have a link
3:49 or button to add a new quote.
3:52 And that's linked to URL quotes namespace quote new.
3:56 And that's of course then this view
3:58 which we will write, in the next video.
4:03 Again, any logic is in curly braces percentage
4:08 and balancing variables is in double curly braces.
4:11 And that's it, that's a quote_list template.
4:13 Ah, lastly, I use humanize to
4:15 instead of printing a date time, make it like
4:19 human readable. So make it like the social media websites
4:23 where you see like posted three minutes ago
4:25 posted one hour and 37 minutes ago.
4:28 Posted three days ago.
4:29 Posted just now etcetera.
4:31 And I can use a filter, and I use a filter
4:34 in Django by balancing the variable name
4:38 pipe, and then I use the time since filter.
4:41 And that converts the date time into a more
4:44 readable timestamp. And humanize is what enables that.
4:48 The other thing that I need to do though
4:49 is go back to mysite settings.
4:54 And enable it in installed apps.
4:57 Which is not so, by default.
5:01 So I have to edit here, just as other
5:03 building blocks of Django.
5:06 And to add humanize so we can use it in our template.
5:09 And then I can dynamically load it here
5:12 and then I can use it.
5:17 All right? Save that.
5:20 Let's try this out.
5:28 Look at that! Cool right?
5:30 We got nice designs, we got the base template here.
5:34 Inside we have the quotes template
5:37 we have the quotes showing up
5:38 with links to their detail pages.
5:40 Which is not working yet because we have to
5:43 define that view next. We have an add new button
5:48 that's not working because we have not defined a view yet.
5:50 But it links properly. We have the added
5:55 also links properly.
5:58 And delete again
5:59 we also need to write a corresponding view.
6:04 And we have humanize going on
6:06 so we have four days and eight hours ago.
6:09 That this quote was added, that's much nicer than just
6:11 showing a raw date time object. So pretty cool, right?
6:15 Ah, and the favicon is displayed here.
6:18 And the fact that it's looking nice, also means
6:22 that the CSS was found. So here those files are working.
6:27 Those are properly linked. This is my CSS.
6:32 Excellent. So next we're going to write the views
6:36 to look at an individual quote
6:37 and to add a new one.