Introduction to Django: Templates

Hello everyone! In the last video, we got some views set up for the betterreads project While we did create a few simple templates so we could see the output of the views, the resulting pages were pretty ugly

In this video, we're going to improve these pages so they show the data we want, in the format we want, and they're easier to manage and reuse What is a template? A template is a snippet of HTML that Django can merge with other templates and data to make an HTML page that can be served In Django, they can have variables and even have some logic capabilities The first thing I want to do is fix the page that shows one book Right now, it just displays the title of the book because that what the __str__ method returns

However, this page actually has all the information about a book available to it We just have to access it correctly Let's start by updating the view In the last video, I used the same template for each view There's nothing wrong with doing that, but in this case, I want to use a different template because I want the data to be displayed in a specific way

I'm going to call this new template 'detail_view' I'm also going to change the name of the template variable to 'book', since 'data' is a bit generic for my tastes With our view updated, let's create our new template This template will have access to all the data for one book, so let's expose that to the user Let's start with the title

True, we can get that just by putting 'book' in curly brackets, but one day we may change how the __str__ method works, and it may print out more than the title In order to access the title, we put booktitle in curly brackets This is how we're going to access all of the attributes of our book, so let me go ahead and put the rest of them on the page! As you can see, the pattern is pretty consistent when it comes to simple attributes: The variable followed by the attribute Let's load the new page and see what we get! As you can see, we can now see all of the details of our book! Lets update the views that have multiple books on them now

I could make a new template for each of these views, but when I think about it, both all books and old books are simply lists of books Why not create one template for both views? First, I'm going to update the all books view, changing the template to "list_viewhtml" and the template variable to 'books' I'm also going to add another value to our dictionary: "Title" I'm going to use this to store the title of the page, so I can tell what sort of data is on the page

So far, we've just been inserting data into templates Django templates also have a bit of logic in them, too! These are called template tags The first template tag we're going to work with is the `for` tag Just like in Python, for allows us to iterate through a list Let's create the new template for our list view

At the top, I'm going to put the title Next, I want to iterate through all of the books so I can display each one on its own line I open with a `for` tag which, save for the opening and closing syntax, looks a lot like a Python for loop Then, I write the HTML that I want to repeat In this case, it's just a paragraph, but I could put anything I wanted in here, like a table row or list item or div

Finally, I close the for loop with an endfor tag Unlike Python, HTML doesn't have whitespace, so we have to explicitly close our blocks Let's load up the page and see what we have! As you can see, I now have each book in its own paragraph! Let's do the same update for our out of print view Once again, I'm going to change the template to list_viewhtml, and I'm going to update the dictionary so that we have a title, and the 'data' variable is now called 'books'

Let's load up the out of print books page and see what we have! As you can see, this looks a lot like the page with all of the books, except the title is different and it's a different set of books Another useful template tag is the `if` tag With this tag, we can introduce some basic logic to our templates Let's update our detail view with the if tag I think we can make the "In print" part look a bit nicer, since "True" or "False" isn't very user friendly

Instead, I'm going to insert an if tag If a book is in print, I'm going to show the text "In print" The `if` tag can also have an `else` block, so if in_print is False, I'll show the text "out of print" Let's see what our new page looks like! Now, we have a line about the book status that's much more clear! The last thing I wanted to touch on is template inheritance Many of your pages are going to include a lot of the same HTML

For example, you may have the same navigation on most pages, and every page uses some of the same CSS files Django templates allow us to fit together bits of HTML to make a whole page, giving us fewer files to manage! The first thing I'm going to do is create a basehtml This is going to be the template that all of my other pages are going to be built off of It's extremely basic, with no real content in it

Note that I have one template tag in here: Block I'm going to call this block "main" The block tag allows us to define an area in a template where a chunk of HTML can be inserted into the page It can also be used to define what chunk of HTML should be inserted You can have more than one block, including blocks in the header, allowing you to insert code all over the rendered page as needed Now, I'm going to update my detail view to inherit from that template

First, I remove all HTML I won't need, since it exists in basehtml I use the `include` tag to tell Django to grab basehtml Finally, I wrap the content of the page in a block called "main_content" This tells Django that when it renders our HTML page, it should take the HTML in this block and insert into the block called "main" in base

html Let's look at our new page! It looks the same, which is exactly what I want! Now that we have basehtml set up, I'm going to update all of the other views to use it Now that all of our pages use basehtml, any changes we make to that file will affect all of the pages! So, if I change the background color to pink in the head of basehtml

All of my pages now have a pink background! And that's all I have for today! In the next video, I'll go over more complicated Model Fields If you have any questions, hit me up in the comments or track me down on Twitter And thanks for watching!