#100DaysOfWeb in Python Transcripts
Chapter: Days 45-48: Build a simple Django app
Lecture: Template settings and create a child template
Login or
purchase this course
to watch this video and the rest of the course contents.
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.