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