Flask HTML templates with Jinja - Python on the web - Learning Flask Series Pt. 5

how everyone Julian here hope you were well welcome to episode 5 of the learning class series in this episode we're going to be looking at ginger and ginger is the default templating engine that comes with flask it's super powerful we can do all sorts of cool stuff with ginger we can create templates which we can then reuse throughout our HTML throughout our web application we can work with variables we can work with conditionals we can work with loops we can do all sorts of good stuff right within our HTML so let's get started so as always I do have a text-based version of this tutorial on the website I'll chop a link in the description we've got our terminal and we've got vs code up and running of course you don't have to use the S code you can use any editor you want it's your choice right so templates well first up let's get a rap run and as you can see we are here localhost on the flash development server and if we go to the root you can see we're left off with this stunning web page and we've got admin dashboard yeah and we've got admin profile and I believe we also have an about page yep there we go so that so let's just go back on okay so templates how do we work with them well first of all we need to create a base template now the base template is kind of what it says it is it's a base template and then we're going to create child templates which are going to inherit or extend post based templates so let's go ahead and do it and if you've been following along with this series you'll know that we've split our application up into nice logical blocks so let's go ahead and create a new directory inside our templates public directory let's create a new one called templates and let's do the same in admin let's create a new folder called templates and inside each of these we're gonna then create our based base template so let's go ahead and do that I'm going to call this one public template with dot HTML and inside admin templates let's do the same admin templates to HTML so let's start with our public one so how do we create a template well first of all I'm done about you guys bond getting a bit fed up of using plain old HTML so that's let's jazz it up with a bit of CSS and JavaScript so let's go ahead and get bootstrap and have you never worked or heard of bootstrap before it's a CSS and JavaScript library that's totally free to you so just come to the bootstrap website come to getting started scroll down so you just start template and copy and I'm gonna place that into a public template and I'm gonna paste that into our admin template I'm just gonna close it so we got a bit more room so let's start with our public template so what do we need to do well we want to import our CSS and our JavaScript that you know the files that we created so we can use them so we can what we can do in index dot HTML where we imported our style sheet and our JavaScript using the URL for function we can just reuse that code so let's go ahead and do that so back in our public template I'm just going to just put a note here and just say custom CSS and if you use a visual studio code control and forward slash to quickly give yourself a nice comment and we'll just place that in and give ourselves a bit of space and let's copy that over to our admin template because that's going to be using same CSS and then let's do the same with our JavaScript let's copy that and in our public template I'm just gonna go and stick this at the very bottom just before the closing body tag and save that and the same with our admin templates let's place that in and again just to recap we're using the URL for function we're giving it our directory our static directory which is up here and then a path to the file name and then flask is gonna look at this it's going to build a URL and essentially just replace whatever is in between these curly braces with the the path to the files that we want to load so let's create our base template so what we're going to do then we close this so in a base template you declare what's called blocks so let me show you how to declare a block and then I'll talk it through so we use a slightly different syntax we use the single set of curly braces and inside of those we have a set of percentage symbols and then inside here how do we declare a block well conveniently we write the word block followed by the name that we want to give the block so in this case we're going to call it block title and then you close a block by just the words in block and you can also end a block by using the name so you could put end block title but in this case we're just going to leave it at M block because it's pretty simple to understand what's going on you would use a named end block when you've got tons of blocks on a page and it you know it can get a bit complicated but in our post this is nice and simple so let's get rid of this hello world and let's create ourselves a new main tag and inside that main tag again let's create a new block can you guess what we're going to call it block main and let's end that block with end blocks so you know nice simple syntax that makes sense so what have we done here we've used these blocks we've created these blocks in our base template and what we're going to do we're we're going to create a child template which is going to inherit all of the code in this template and then whatever we put in the child templates we plug these gaps and it will make more sense when we create a child template so let's go ahead and create our first child template so make sure you got that saved and in our File Explorer let's come to our index so now this was the original page that we created and it's got all of this kind of boilerplate you know we've got the HTML tags we've got the head tags we're doing these imports well in fact what we're going to do is just go ahead and get rid of that so this is going to be our first child template so how do we do that so again we use the same syntax the set of single curly brackets and then a set of percentage symbols and then inside this what we're doing here we're going to extend our base template into our child template so we use the word extends and then we get this set of quotes and then we give it a path to the base template that we want to extend and in our case it's a and it's all from the templates directory so in our case it's going to be admin template and I'm not admin sorry because we're working in public it's going to be public templates public template so let's go ahead and do that public templates and then the name of the file the name of the base template file so public what do we call it public template cannot type today too early public template HTML sorry what we've done is extended our base template so whenever we render index.html it's gonna pull in all the code from our base template in this case public template died so it's going to pull it all in and render it into the browser so now we need to plug those blocks that we created so we created a block called title and we created a block called name so now we've got fill in these blocks so let's go ahead and do that and thankfully it's very very simple we just put block plus the name of the block so block title and then we can go ahead and close that block and now we can actually fill in the code that we want to put into our template we can plug those gaps so let's just put the title of the page so index and it is as simple as that and now let's do the same with our block main let's go ahead and in that block and then so whatever we put inside a block main is going to be plugged into this into this section here so really really nice so let's do a just some very very simple bootstrap so we've got a div with the class of container and let's put a row and a column and if you guys aren't using the S code or you don't know you can just to create to quit quickly create a div you just do a dot and then the name and the class of the div so in our case we just want a div with a class of coal so go ahead and do that and in here we're just going to put a h1 and we're gonna call this home cool so we've created our first child template so just to recap we've extended using the extends and then we give it a path to our base template and then we plug the gaps so we've got block title let's change that to home actually so we've got block title with home and we've got our block main and the HTML that we want to plug the gaps with so there we go so let's go ahead and render this so if we come back to our index and reload there we go we've got home and if we do I'm going to open the developer tools with ctrl alt I and then to inspect the ACO you can do control you so you can see what's happening here so we actually look at our views where we're just rendering this pledge here we're just rendering this HTML but because we've told it that we're extending a template and we're using these blocks to plug the gaps it's bringing in all of this HTML and then plug in the gaps so if we take a look at source code you can see our block title has translated it's transformed this section here and replaced it with the values that we want and it's also done the same with our block main so that's hot child template but it looks a you know it looks a little bit boring at the moment so why don't we give ourselves a nav that'll make things a little bit more visual so in the bootstrap documentation come down to components and then come down to navbar and I'm just going to scroll down and get ourselves a nice simple navbar and it's just this one here without any sort of bells and whistles so go ahead and copy that and back in vs code in our public template so in in your base templates you really want the code that you're going to be reusing across multiple pages so you know for example if we weren't using templates we would have to have all of this code in index.html and then if we make any changes then we have to change every page that features that same HTML so you can get extremely tedious so that's why using base and child templates is so convenient because we don't have to keep writing the same code you know it's sufficient there's a programming concept or principle dry and it just stands for don't repeat yourself because repeating yourself is stupid sorry let's go ahead and put on Aven so I just under the knee opening body tag I'm going to go ahead and stick in a nav and let me close that so you can see what's going on and I'll make this a little bigger and if you want to format some HTML you can just right-click and format document and that's going to clean things up nicely so this is our public base template so let's go ahead and let's just changed the name to flask so this is the navbar brand is the logo that's going to show it in the top left of the nav and I'm just going to delete some of this you can leave it or you can delete it we're going to take off the active because we're going to activate the icons in the nav with some JavaScript later on and let's go ahead and change some of the href tag so when someone clicks on an F I want it to take them home when someone clicks on the the brand logo in the top left on let's take them to our the root of our site and yeah we can leave that there for now we'll just have a another home link and we'll have and about and I'm going to go ahead and delete these two links we don't need that and let's change that to about okay so I think that's pretty much everything for the nav so let's save that and then come back to our browser boom so you can see now we've this nav is being rendered because it's in our basic template and if we click there we you know it takes us to the root and again to the root and if we click there we get to our about page obviously we haven't if we if we come to about we haven't told the about page that there's any kind of templates in fact I think if I remember correctly yeah about it's not even returning a template so we'll just leave that for now that's gonna be one of your assignments so just hang tight till the end of the episode so right let's move on let's let's work on our admin template so what I'm going to do is just everything in public template I'm going to copy and let me close out and if I I'm just going to control a to select everything control V to place that in everything else is pretty much the same I'm going to change this to admin and then what I'm going to do in fact there's something in the public template that I wanted to do I want to add a link so we can quickly get to the admin section of our site so what I'm going to do I'm just gonna space this div out of it this is the difficult in the links in the nav I'm gonna copy that down and in the UL I'm just gonna put a ml also I think that's going to fix I think that's going to do what I want it to do and then in the href I'm gonna put admin / dashboard and I'm gonna change that link text to not about to admin so let me just see how that looks let's come back to the roof and then we we got a nice link in the top corner to admin and that's going to take us to our admin dashboard so let's leave that for now in fact I might put just a little bit of margin below that nav and we can do that just in the nav attack in the class with amv - 3 and that just stands for margin bottom 3 so there we go nice bit of separation there so let's work on our admin template so we've got our links in the top left of the nav bar we've changed it to admin and let's go ahead and change that link to admin dashboard and here I just won admin dashboard again and I'm gonna change that to dashboard we've got an admin profile and I'm gonna change up to profile and also we need that little link in the top right which is going to take us back to our public site so again we can just go ahead and you know what that so let's format this those grabbed that one this is our link in the top right than that and we do that using the ML auto class which is quite handy just to move things around I'm going to change the href to the root and I'm just going to put return to site okay so that's pretty much our admin template done for now as far as I can see so let's change our dashboard that's we want this to inherit all of the HTML from admin templates so let's just go ahead and delete everything there and let's do the exact same as what we did in public template but we're gonna give it a different base template to inherit so extends and let's look our file tree here so it's admin template admin template HTML so that's going to extend our template and I sleep we're going to give it a block title and we're going to call this admin dashboard because that's the title of our page will end the block and let's do some content in the main block so block main the close up block and block not in block and let's put some HTML so I will do the exact same container and do a row hit tab Col hit tab and we'll do an h1 admin dashboard okay cool I still need to fix this so spicy Mishu format the document go ahead and click Save right so we've created our child template in the admin dashboard HTML which is going to inherit everything from the admin template in fact I think I've named that incorrect I've known that as admin templates so I'm gonna go ahead and rename that that shouldn't have an S on the end so if you if you did the same mistake as me then just go ahead and change that and in dashboard yep that's fine okay so that so let's reload our index and if we click on admin there we go that takes us through to the admin section of the site we get dashboard we get profile but obviously we haven't done anything with the profile root which you can see here we're just returning some text and let's go back and if we click on return to site then that takes us back to the home so that's pretty much it for this one what I want you to do as an assignment is go ahead and convert the about root in view spy and the profile root in the admin profile what I want you to do is do the same as what we've done with these two views so how you going to do that well we've already got our base templates so what I want you to do is create a and about HTML file and that's going to be your new child template I want you to return that in this route and I want you to inherit the templates for admin and for public and do the same in the about page here so about and profile create a new child template inherit their corresponding base templates and then render them to the page so that's your assignment so guys I hope you found this useful if you've got any questions leave them in the comments below and be sure to subscribe and like the video if you enjoyed it in the next episode we're going to be looking more at ginger we're going to be passing variables and values from our flask roots into a - no templates and then we're going to be working with them so we're gonna work with lists we're gonna work with variables when work classes with dictionaries we're gonna do all sorts of cool stuff in our HTML with ginger so I hope you guys enjoyed and I will see you on the next one

Channel: Julian Nash

Views: 19,569

Keywords: python, programming, tutorials, guides, flask, jinja, templates, html

Id: pj1iLRljwxI

Length: 22min 23sec (1343 seconds)

Published: Wed Feb 06 2019