Django Tutorial - Templates & Custom HTML

Key Takeaways

hey guys and welcome back so in today's video what we're gonna be doing is covering templates so templates are essentially a way to make your HTML actually look good and display it on the screen they're really nice and Jango because you can actually put your own Python code and you can pass variables through to your templates which means that you can make dynamic HTML which will change based upon whatever you pass to it which is really nice so it's a really easy way to connect your kind of backend with your front-end and that's one of the reasons why a lot of people obviously love Django is because of the fact that you can do stuff like this now I just want to quickly go over what I'm gonna be doing in the rest of the series for some of you that were asking I have plans to make a video on how to add a proper sidebar to your website how to do forms because forms are actually their own thing that are kind of complicated in Django but I want to do a whole tutorial on that I want to do user registration so like login register sending emails all that kind of stuff and then obviously near the end of the series we'll get into more videos longer videos where I'm not just doing features but I'm kind of working on development of the website and actually probably hosting it using Heroku or something like that and showing you guys how to actually deploy this and hopefully for free online so if you guys are excited about that please make sure you leaving a like on the video and letting me know in the comments and with that being said let's get started with templates now if you remember where we left off we had it so essentially we could view different parts or different to-do lists from our database by typing the integer into our bar and that's really all that we had now what I'm gonna do in this video is create templates which will allow us to see our to-do list on the screen in somewhat of a nice form and in future videos I'll add bootstrap onto the website and start doing some custom CSS classes and stuff but for now we're screen use plain HTML and then we'll design and style it all after because styling is really a pain and it takes a long time so the first thing I'm gonna do is I want to create a home page for my website so right now we have this on this page where you type in number you can see it we don't have any homepage so let's do that first so I'm gonna add a link here which is just a blank string and use dot home and name equals home like this and then inside of our views file here so views DUP hi I'll create a new function called home so define home and then we'll have response and we don't have any variable so that's fine and in here I'm just gonna pass for right now is we're not finished coding that yet okay so templates so right now what we've been doing is we've been passing HTTP response to our views so that's the way that we're literally putting the HTML in here you can see the tags right now this is obviously not an efficient and not scalable way to make a website so what we're gonna do is write our own HTML files and then we're gonna load them up from here actually render them and display them to the screen so that's what we have to do first so the first step to do that is to actually create a directory called templates inside of our application directory so inside of main here I'm gonna go to new folder and call this templates like so so if I go in main now I got this folder called templates and now inside of this folder templates I'm going to create a new folder called main ok now this might seem kind of weird how we have main and we have templates and we have main but it's just the way that Django works it's really weird I don't really want to explain it is you just need a folder inside here with the same name as your application to load the templates so that's what we're gonna do so now inside of this folder is where we're gonna put our actual HTML files so let's create a new file and let's just start coding some HTML and I'll talk about what this is gonna be compared to our other templates so let's just set up an HTML document here slash HTML and you know let's save this as base dot HTML and we'll talk about why I'm calling this base in just a minute so in here now I'm going to add some head tags like that and then we add some body tags like that so inside of our head we'll simply just start by adding a title we will be adding a lot of other stuff into this later in the video but for now we're just going to keep it nice and simple for demonstration purposes so I'm just gonna call this Tim's website and then inside of my body tags I'm just gonna create a paragraph and we'll just call this base template okay so that's all we're gonna do for now inside of that template and let's create one more template inside of here and this one we're gonna call home okay so if I save this I say home dot HTML like that and hit enter then in here I'm going to talk now about template inheritance so a really nice thing with Jango that makes building websites super scalable is they have something called template inheritance now right now I've created this template and I've called it based HTML and what I want this template to be is well the base or the standard layout of every single one of my web pages so for example okay so let's just go to Instagram or something and I can show you what I mean by a base template in terms of this so for example a base template for Instagram is this like bar up at the top like every page you go to has this at least on the website right it has this Instagram it has a search bar and then it has these icons and then obviously it's gonna be different depending on what page you are or what account you're on what its gonna show but the base template would be like this top aspect okay so what I want to do is create a base template which will have something that'll be on all of my web page so for example on my actual website if I go to attack with Tim net you can see that this up at the top here this bar would be and actually what do you call it this logo thing as well is the base template it's on every single page so what I want to do is make sure that I don't have to actually code that in to each HTML file that I make because think about it if you have like hundreds of HTML files I don't want to have to code in that menu bar every time so what we're gonna do is we're gonna code all the stuff we want in always on the website in what's known as a base template and then we're going to inherit that template with just one line of code from all of our other templates this one's our base and this is going to show up on all of the pages unless we override it from the child templates so to actually inherit this base template what we do is we use the kind of the Django syntax here which is we open and close a curly brace it and then we put two percent signs like and inside of here we type extends and then we're gonna actually put in single quotes main slash and then in this case bass dot HTML now we just need to include main here because inside the main folder and what this means is just like in Java extending your class you're going to extend this template essentially take everything from this template and use it here now you're gonna say well how do I change stuff in here well we're gonna get to that in a second but let's demonstrate this first so now that we've done that what we need to do is actually render and use these templates so I gotta go back into views here and right now you can see that all we're doing is returns HTTP response so what I need to actually do is render my template so to do that I'm gonna remove HTTP response we're actually not gonna use that anymore we're gonna use the keyword render and then here we're gonna put response which lines up with this parameter here we're going to put the template location so in this case main slash and we'll do base dot HTML for this one okay and then we'll do a comma and we're going to put a open dictionary okay now I'll talk about this dictionary more later but for now it's we're just gonna leave it blank now we're gonna copy this return I'm gonna do the same thing at home except instead of base I'm going to do home HTML and that's actually going to be all we need to do to show these HTML templates that I've created it's pretty straightforward to do this so now obviously I'm going to have to run my site so let's I gotta activate my virtual environment one second here and we'll just do Python manage dot pi run server okay so I didn't make any mistakes it doesn't seem like so let's load up Google here and to enter and now you can see that we've directed to the home page and we get base template okay now so let's see how this worked so when we run in URLs we didn't type any number so we were passed just that empty string so what we did is we navigate it to the home page so the home page is right here this is the function and what it does is it render this home HTML file so now we go to home dot HTML and in here we can see that we're extending the base dot HTML file which means we're gonna use everything from that so what we do is we go to base out HTML we say ok this is what based out HTML looks like let's use that and then it uses that and we get based on HTML so now let's try using for example one now before when we used one what happened was we saw the to-do list and the item now we're not gonna see that because we haven't programmed that into our HTML but just notice what happens when I type slash one query does not exist ok of course it doesn't exist anyways just pretend like that popped up I'm now I'm frustrated why that didn't work because it week the to-do list there's no to-do list that has ID one apparently hmm that's interesting let's try 2 or something and see if that works over 0 because this should really be giving us something - there we go okay - so apparently the object we have in there has ID 2 so anyways now that we have some objects we have ID - you can see that again it's showing this base template because we're rendering the based on HTML template from our index view and when we went to URLs we type some number so we went to index and we passed in the ID as that number that we typed into the address bar perfect that is literally how templates work in terms of rendering them now it's time to show how we can make some dynamic templates that I'll actually change based on what you're typing so obviously right now so this one's branding are based on HTML this one's rendering home dot HTML in previously we had passed through some value which was our to-do list name and we displayed that on the screen so how can we do that now using templates well inside of our templates so this is based on HTML what we can actually do is we can use some variables that are passed from views and we can display those in our HTML so for example rather than putting base template here say I wanted the base template to show all of our what do you call it sorry are different to-do lists then what we can actually do in here is we can put two so we can of these so open and close curly braces two of them and inside here we can type a variable name and then we will pass that variable in from our views so for example if I want the to-do list name maybe I'll pass that in as the variable name so I'm gonna put a name here now what this means is we're gonna be using a variable called name now what I need to do is I go inside view spy and I say okay so we're using a variable name we need to give that variable to our view to do that we use these right here this dictionary so we are gonna type the corresponding name so name here to what we've typed in our HTML and then we're gonna do a colon and put the value that we want to pass whoa what just happened with my lights one second guys sorry something just happened okay anyways um now what we're gonna do is we do LS dot name so we're gonna say the variable name inside of our based on HTML corresponds to LS name now because we've done that there we're gonna run into an issue in our home one because we're looking for some variable name inside our base HTML but inside our home HTML file we're extending base which means you need to pass that variable as well so for right now I'd this obviously is not ideal we're gonna change this in a second I'm just gonna put a name and then this case I'll just say test just so that we actually get something that's working but let's try this out now and see if everything is the same so if I run this now you can see that instead of showing me nothing our strongly based template it's showing me first list which is the name of our first list and if I go to the home page you can see that we just get tests because that's what we've passed in as a variable so that's really the easy way to pass variables is through this dictionary here and it's nice because you don't actually have to type the dictionary here like you can make like my underscore or dick equals and then you can update it with a for loop or you can pass a ton of different stuff into this dictionary and then just put for example my underscore dict here and it'll work the exact same way okay so now we've done that we've kind of understood how this works now let's go back in templates and talk about some more advanced stuff that we can do so for example ideally we've kind of messed this up a little bit because inside of our base HTML we're displaying what do you call it the name of our to-do list we probably don't want to do that because on our home page we probably want to say something else right or we just our base page probably shouldn't do that so what I'm actually gonna do inside here is I'm gonna set up what's known as a Content block which can be over overrode from other templates and you'll see how this works in a second so if I just do my two percent signs here I'm going to type the word block and then give it a name so in this case all right well I won't do name I'll do block content and then what I'm gonna do under here is I'm going to do two signs like this and I'm going to say block or sorry and block okay now just for good practice I will put this inside of a div so I'm just gonna say div and I'll say ID equals in this case content and then name equals content just in case I want to reference this later we'll do that and we'll just end the div here so type that in and now what I'm able to do actually is from inside my other templates that extend this template I can pick what's gonna go inside of this block so for example the web titles nobody's gonna be the same but if I want to put something specific inside here depending on what web page you're on I can do that from other templates so on home for example I probably want to say like home page or something like that so to do this I'm gonna do a very similar to thing to what I've done here I'm literally just going to type the same thing and say block content okay and then I'm going to close the block like this by saying end block and inside here I'm gonna put a parrot or actually I'll put an h1 tag and I'll just simply say Wade code home page like this okay so now I'm just gonna go in views and I'm gonna remove this these variables from here because we don't need them anymore and let's run this now and see what we're getting so on the home page if I hit enter you can see now we're getting homepage so what we've done is we've said okay so this is our base template the content for each of the pages that inherit this is gonna go inside of this block content so if I go here and I type block content I can put whatever I want here and it's just gonna paste it inside of here for me now this works the same with other kind of blocks you can create more than one block and you can choose whether you want to use them or not so for example if I want the title to be different what I can do is inside of here and there's no really limit on how you use the block so you can use them however you want I can say block title and then here I can end this block again and you always have to end your block so you can't just leave them open otherwise you're gonna run into some issues do end block and then I can set a default title in here if I wanted to for example Tim's site like that and then here I can make this block again so if I I'll just copy this actually and paste it up here and name this title and then here I can just name it whatever I want so in this case I'll just say home okay so now what's gonna happen is this block title is gonna be again overridden by this and it's gonna put that as the title of our webpage let's try this out and you can see that now up here at the top it's changed to home as opposed to Tim's site now if I go to like / - you can see there's nothing here just because I haven't set any base stuff to show up inside of my base content if I wanted something default to show up what I would do is just type like hello or something in here and then that would show up but that's how the blocks work and that's the first step to kind of template inheritance now I'm gonna show you how we can actually write code inside of our templates to do things more dynamically so this based on HTML file is fine this home file is fine but I actually don't want to be using this based on HTML file inside of my as one of my views I just want to inherit from it and then customize it from each individual view so what I'm gonna do is create another view or another template my bad sorry and I'm gonna call this file new file and we will call this one ice should we call it view I want to view the to-do list so maybe we'll just call it like a list like that okay list dot HTML and what this is gonna do is display our to-do list for us so the name of this to-do list and then each item on the do list it's gonna display that in a list form that's what I want to do so I have to start by extending from my based on HTML so it really simple again extends in quotes I don't think it matters if it's singular double quotes and then we'll say main or based HTML like that we'll set up our blocks so our first block is going to be the title block so my percent signs so block title and then here we'll go and block like that then inside here which is our title B maybe we'll just say like you view list or something we could change that later if we want and then we'll set up our content block which will be actually displaying the list for us so block content and then inside here we will obviously end the block and then inside of the content what I'm gonna do now is start working with some variables that we pass in from views so actually the only thing we really need I guess is we can say LS is LS and then from there we can determine if we want the name here if we want the items we can do all that kind of stuff so let's start by just doing an h1 tag which is the name of the list so to do this I'm going to h1 and then in here what we'll put remember our two curly brace sets and we're gonna say LS dot name okay because we're passing that LS object so we can call any methods on it that we want inside here so we have the name now but we also want all of the items and here's where things get a bit tricky kind of tricky but actually just really cool and how they work so we could technically have infinite items we don't know how many items we're gonna have so we need to loop through all of the items and then display them in kind of a list form so to do this we're now gonna start actually writing some code some long code Python ish code inside of our html5 so I'm gonna write a for loop I'm going to show you how to do this for loop inside of your templates you're gonna start by literally just typing the four so you can say four and in this case I'm gonna say item in LS dot and then item underscore it's set dot all now some of you might think you need brackets here for some reason when you put the brackets you run into an issue so if you're gonna be looping through something don't put the brackets like that just leave it like this and it should work so if you're running into an issue that says something like it can't decipher these brackets just get rid of them and that should work for you that's an issue that I was running into we need to also end this for loop so I'm just gonna type n four here and now inside of here I'm gonna show you what we do to display a ton of different items using a loop so essentially I mean maybe you will indent this to be a bit nicer inside this for loop I want every time this for loops runs to get the name of my item and display it on the screen so to do that I'm going to set up a list so I think what I do is I do you l haven't done HTML for a while so this could be a little bit rusty new UL which stands for our list okay and then inside here what I'm gonna do is I'm gonna say Li like this will end that Li tag and then in here we're gonna use a variable but our variable this time is gonna be item dot text okay because we're gonna get the item which is that item object in our database from the item set of our list and then we'll display that as a list item now I don't even know if I have any items in my list so we might have to add those in a second but that's fine we can deal with that when we get to it so now that we've saved this let's make sure that we're actually going to return list HTML from our views so instead of returning base let's change this to list and then let's run our site here quickly okay so we get first list and we don't we're not running into any issues but I'm pretty sure the reason we're not seeing all of the different items is because we don't have any so if I want to add some let's this and let's add some items to that list so I guess to do this now I get a refresh my memory is we're gonna do a Python manage pie shell and then I need to import from my database so from import main dot models are ice from Maine dot models from Maine dot models will import to do list like that and then what we're gonna do is we're gonna say I guess we'll say LS equals to do list dot objects job gets ID equals to well print LS out we see we get first list let's look at the item set quickly so item underscore set dot all we don't have any so let's add some in there so item set dot create and in this case I guess what do we just need we need a text for that right so we'll say text equals and then in this case we'll say first item and I guess we'll do complete equals false ok so we added that let's actually add another item and we'll call this one second item and while we're at it let's do a third well ok so now we've done that we can get out of this by just typing quit and then run the server again and then see if we've updated our list let's cross the fingers there we go and now all of our list items are showing up so first item second item third item and that's how you use a for loop inside of your templates and that's really like look how cool that is we don't have to we don't have to type a ton of HTML we just do a for loop like we would in Python we were very familiar with and then we can just type whatever we want inside of the for loop in terms of HTML and that'll show up on the screen for us that's how that works and that's really cool now we can also do if statements and else statements and stuff like that so I will now show if statements it's gonna be this a hard example actually what I can do is say well do another block in here and in this case what we'll do is we will only show the item if it's not if it's complete right or if it's not complete if we're gonna have it complete we probably shouldn't show it so first of all I don't know why this is trailing here and get rid of that and in here I'm now I'm just gonna do my percent signs again I'll say if and in this case item dot complete equals equals false and then I will simply end if here so do percent percent and if like that so we always have to end our statements I know it's annoying but if you think about it we're not really working with indentation in these files so it's not gonna be able to tell what's in which statement unless we do an ENDIF or we less are we end our statements so we need to do that okay so we've done that and now I will actually just go back into the shell again I know seemed pretty counterproductive and make an item that is actually complete otherwise we're not gonna see that so I just gonna have to import this again so from Maine dot models import to-do list will say LS equals to-do list dot objects dog gets ID equals two okay LS dot item underscore set don't create and then this case will say text equals not showing and then complete equals true okay so true like that hit enter not showing quit that and rerun the server probably should have done this before guys but you know that's fine so if I run this now you can see that we're not seeing that item that I just created but if I change this to be true okay and save this now and hopefully this updates quickly now you can see that we're only seeing the item that is complete so these if statements work just the way they work in Python we you can see only the complete items only did not complete items and yeah that's really how you do that we can also do like an else and an else if and stuff so if I want to do an else statement in here I can just type else and then put whatever I want on else and we don't need to type and else because ending the if will tell us that were done the entire kind of chain statement so what we'll do actually and this is kind of interesting as well is inside of here we'll do the item dot text if it's complete but we'll do in all capitals complete after it just so we know that it's finished otherwise we will say incomplete like that so let's try running this now and see if I made any mistakes you know okay so there we go so we can see first item incomplete second item incomplete third item incomplete not showing complete awesome so that is essentially the basics of templates how we do the kind of inheritance for them you can obviously have a template inheriting a template that inherits another template and in future videos we're gonna be making these look a lot nicer I just want to give you guys the basics here and make sure that was working in fact let me make sure the home page works oh forget if I showed that okay it does so anyways that has been it for this video if you guys enjoyed please make sure you leave a like and subscribe and if you need any help anything I feel free to leave a comment down below I'm always answering those and I love to chat to guys [Music]