How to Render Django Templates with HTML

in this video we're going to be using Django templates to create actual HTML Pages like this one right here and this one as well so let's get right on into it make sure you're in your Django project and you have your virtual environment active and what we're going to do is go into our apps directory in here Django is going to look for your templates in a folder called templates so let's make a directory called templates let's go into that directory and real quick what is a Django template well in our case a Django template is going to be an HTML file and what's cool about them is that you can Define some HTML and use it on multiple pages and not only that but you can take python variables and kind of inject them into the HTML so that what is normally static HTML becomes Dynamic HTML now we're going to be dealing with the dynamic templates in the next video in this video we're just going to be using static HTML templates we're going to create two pages and Link them together okay so sounds easy enough let's go ahead and do it I'm going to make a file in here called index.html and I have some basic HTML skeleton boilerplate over here I'm just going to paste that in and if you're familiar with HTML you can recognize open close HTML element you got your head open closed your body open close and you have one single H1 element inner body that simply says hello world okay so pretty standard stuff now let's go up a level and if you remember from the last tutorial we were working in reviews dot Pi file and before we were just importing this HTTP response library and sending it back with the words hello world now this time we have an actual HTML page that we can return in our index function so let's go ahead and do that we're not going to use HTTP response anymore instead of that we're going to import from Django dot shortcuts import render and instead of returning this HTTP response we will return render and render takes minimal two arguments the first one is the request that you passed in so we'll pass that back out and then also the template file so it's going to be a string called index.html okay I'm going to save that file and just as a reminder in our urls.pi file when we go to the root of our website we're going to execute whatever we defined in our views.pi file in our Index definition which we were just working in so that should all still make sense now the one thing that we probably should have done in the last video was tell our Django project about our application so let me show you what I mean by that let's go back into the root of our project in inside of our project directory there's a file in here called settings we were in here before and we're going to scroll down to a section here called installed apps now we created an app in the last video called score okay and by default Django has all these apps that they have pre-installed with the project but we need to tell Django that we created our score app and to do that we simply just add in this list of other applications the name of our app which is score okay and the reason I'm bringing this all up is because down here there's a template directory I'm sorry there's a templates variable and one of the options in here is Appster right now it's set to true so basically what this is saying is that in the apps directories that you create in our case our apps directory is called score it's going to look for that templates directory that we created in the beginning of this tutorial so we should be good there let's go ahead and save this file and we'll do python manage.pi run server 0.0.0.0 colon 8000 hit enter and that's going to start up the development server now from before we had this simple hello world page if we refresh it we should now see hello world but much bigger because of the header one element and that's exactly what we get let's take a quick look at the page Source here and we see our HTML syntax that we Define in our template okay great we have one HTML page let's create a second HTML page now at this point most people will probably you know go into their app directory and then go into their templates directory and then simply make a copy of their index file and make a new file called about going to about and you know take this out because we want to change this part of the page to say about page but that is wrong because we are duplicating a whole bunch of code like this and I use code lightly a whole bunch of markup this is this is something that should be defined once and used on other pages and I kind of referenced this earlier in the tutorial where I said we can reuse part of that template and that's exactly what Django allows us to do with template inheritance okay so let me show you how to set that up I'm going to delete this about page so we just have our index.html page which this is going to become our base template okay so an appropriate name for that is going to be base.html so I'm going to rename that to base.html and let's open that and like I said every page is going to have this and this so the only thing that's unique to the index page is this so let me get rid of that and I'm going to define a block in here called content and then I'm going to close that block with end block now this is the just the Syntax for HTML templates in Django you have this curly bracket percent block the name of the block and then you're going to end the block below that so basically any template that inherits from base.html is going to Define this as well and anything that comes between here and here is going to show up inside of this so I think the best way to show that is through an example so let's go ahead and do that I'm going to make a new page called index.html and this is going to extend from base.html and we're going to Define that block again so block content and just so we don't forget we're going to close that block and block and like I said anything between here and here is going to show up in based on HTML where we Define that block so before we had header one hello world like that okay let's test it out I'm going to save that file go back into our project directory and do python manage.pi run server 0.0.0.0 colon 8000 and let's make sure that we didn't break anything so I'm going to open this up refresh the page and everything still shows up as expected we'll view the page source and it looks very similar to before we have a little bit more white space here but that's okay now now is time to make our second page and our second page is going to be a whole heck of a lot easier because instead of copying let's go into that directory instead of copying the old index.html we can just take this actual new index.html and make a copy of that which there's a whole heck of a lot less code duplication in there than we would have had before so let's make a copy of index.html and make a new page called about.html and now in here we're only going to change this one line about page okay I'm going to save that file and go up a level now we have to tell our application about this new page and if you remember from before we can do that in our views.pi file and we can copy these two lines make a couple changes to it so we're going to make a new page called about and we're going to render the about page pretty similar to what we were doing here with index so we'll save that we also have to modify our urls.pi file so let's open that and we're going to add another URL pattern so we can change this from what we had before this time we're going to actually go to our domain name or our IP address slash something slash about we'll go to the about page and that's going to be associated with views dot about and the name we'll give that is about so let's go ahead and save that from our project directory we'll start up our server again and let's see if the home page still shows up it does let's go to that slash about and that shows up too one last thing we want to do in this tutorial is link these two pages together because that's what HTML is all about so let's go ahead and do that I'm going to minimize this and stop our development server go back into our app directory in the templates directory and we're going to make a link from the about page to the index page and vice versa so I'm going to do standard HTML here a href equals slash and then say go home and again this is what most new people to Django would do and it's perfectly valid but Django actually has something called a template tag for URLs that we can take advantage of the names that we're giving to the URLs before let me let me show you how it looks and then we'll dive into it so instead of hard coding to go home or say we're in the the home page I'm going to go to the about page instead of doing that we can reference the template by name directly inside of the template so we're going to use that weird curly bracket percent sign syntax again we're going to use the URL template tag to go to the index page now where's that index name coming from well if you remember in our URL stop Pi file we have these URL patterns and we're giving each one of these paths a name so our views.index is name index and our views.about is named about so we can reference them in the template with that syntax so we did that for the about page let's do that for the index page and let's link that from here to the about page so ahref equals URL about and we'll say about page okay Let's test that out and if we refresh this page we got that link that says go home and we'll click on that and indeed it takes us home and we go to the about page from the home page and that works too great work in this video in the next video we're going to be working with Django models which allows us to interact with a database without needing to know SQL or any type of database language foreign

Channel: Tony Teaches Tech

Views: 5,434

Keywords: django html, django html template, django html templates, django render, django render template, django template, django template inheritance, django template language, django template render, django templates, django.shortcuts import render, python django render, render django, template.render django, templates django, templating django

Id: kiTAiRGaf6s

Length: 12min 3sec (723 seconds)

Published: Thu Jul 27 2023