Templates, Bootstrap Navbars, and Links - Flask Fridays #4

what's going on guys john elder here from coding.com and in this video we're going to look at templates nav bars and links for flask and python all right guys like i said in this video we're going to look at templates nav bars and links but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codingme.com where i have dozens of courses with hundreds of videos to teach you to code use coupon code youtube1 to get 30 on membership that's all my courses videos and books for one time fee is just 49 which is insanely cheap all right it is flask friday once again the best time of the week and in this video we'll look at setting up templates we're going to set up a nav bar and we're going to look at links now flask makes all of this incredibly easy and it's very similar to django so if you've done this sort of thing with django you're going to have no problem whatsoever doing this with flask it's almost completely identical so with any sort of website you're going to want to break your website apart into sections think about all the websites you've ever seen they all have the same sort of nav bar on each page of the site right they all have the same sort of footer section on every page of the site for the most part right so it sort of makes sense for us to break apart parts of a page that are going to be the same on every single page and put those in their own little file that way we only have to do it once and if we want to make changes to any of those things for instance if we want to add another link up here to our nav bar in the future we can change it in one file and then that will show up on every single page of our website we don't have to go change it on every single page all of those pages will pull from that one file and same with the footer and flask makes this very easy using templates and extensions extend base we're going to make a base file and so that's what we're going to look at we're also going to look at setting up the bootstrap css framework you see our site looks a lot better now we've got a nav bar we've got some colors and sort of hovers and things change we can click on this we're also going to look at links and this is sort of a dynamic link so user john i'll show you how to pass those types of things into links in this video so lots of stuff to do in this video let's jump right in it's flask friday all right so let's check out our code and the first thing i want to do is create a file called base.html in our templates directory so let's come up here to our templates directory right click and click new file and then i'm just going to write a way save this as base dot html now this is the file that's going to be our main template for the rest of the website all the pages of our website are going to pull stuff off of this page so what we need to do here is set up a couple of tags here and we need to create a block so let's go block and let's call this content and then anytime we open a tag like this we need to close it so we just type n block so inside of these two tags every page that uses this base.html file for instance our index page all of this stuff will sort of get pulled out by flask and sort of on the fly it will get sort of like pasted in right there now it's not actually pasting this stuff in it's all doing it behind the scenes whatever one of these pages is called so the stuff above this tag and below this tag so we can type above and let me put some line breaks and then let me just copy these line breaks and we can go below now whatever we put here and here will appear above and below the content this block content of our page so we go ahead and save this now we also need to take these and add them to each individual page so right up here at the top i'm just going to paste these in so we have our block content the end block goes at the end and i'm just going to kind of tab all this stuff over just so it's sort of understood where all this stuff is going so okay we also need one more tag up here we need to say hey use that base file in with this file and to do that we use the extends tag so we just go extends and then base dot html in quotation marks so i'm going to copy this and we need to put this on every single page of our website now we've only got a few pages here so this shouldn't take very long let me just put this and then for our 500 page and also our 400 page we also need the end block tag so come down here and copy this and put that on every page at the bottom and we don't have to tab this stuff in but i'm going to just because it makes sense and again end block here and let's tab save and finally the end block here and again let's tab that over save this okay so that looks good now if we come back to our website make sure our server is running so flask run notice we're in our c flasker directory we've got a virtual environment turned on we've got main so that means our git is initialized okay so our server's running head back over here so we hit reload we get above and below and something going on here probably from a prior video yeah so we can maybe take that out all right let's save this and now hit reload okay so we've got now above and below so if we go to for instance user slash john we get above and below on that one as well if we go to a page that doesn't exist we get our 404 error but we also get above and below so now if we want to change something on above or below like i said we could just change it in one place we could say this is above right if we wanted to make that change i don't know why we would but we made a change one time and we click here boom this is above we go back to this page hit reload it's there we go back to the main page hit reload it's there and so that's really cool so we can make a change on one page and it reflects on every single page so very very cool and very easy and that's all there is to it so now let's add the bootstrap css framework if you're not familiar with this go to getbootstrap.com this is a completely free css framework it's the most popular css framework in the world it allows us to create all kinds of cool visual things on our website just by copying and pasting code so i went over here and i clicked on docs documentation and then just scroll down here to starter template and let's copy this so let's bring this over and put this in our base.html file so we can get rid of this above and below stuff we don't really actually want that and instead let's paste in that base.html file so we're also going to need to move our block content tag so let me copy this and let's come up here to the top and look for the h1 stuff that's where we want our content to go so i can paste in those content blocks right there or we don't actually need a space there so okay that will work now i'm also going to put a line break to push this down a little bit and i always put a div here so let's go div class equals container and then close our div there we go now let's tab this in a bit okay so this container just takes everything and moves it over a little bit so it's not right on the edge of the screen that's just a bootstrap thing and okay we should be good to go so now this bootstrap theme should work on every page of our site because we've added it to our base.html file so let's go ahead and save this head back over to our website and hit reload now notice the the font right sort of look at the size and the color when we hit reload boom everything sort of changes a little bit the font is skinnier everything looks a little bit sleeker it's moved over that means bootstrap has been installed correctly now we're not actually installing bootstrap this way you could but we're just using this template file and it will call the css cdn content delivery network for bootstrap and it will also add the javascript stuff down here at the bottom so i find that that works just as well as installing bootstrap in your app so that's what we're gonna do so okay coming right along we've got our templates set up we've got bootstrap set up let's create a nav bar now so head back over to getbootstrap.com come down here to components and let's look for navbar and we scroll down here and we see here's a nav bar that's looks good so let's go ahead and copy it so to use stuff in bootstrap you almost always just copy the code paste it into your code modify it a little bit to suit your needs and then you're good to go that's why bootstrap is so cool because it's just this easy so let's head back over to our code and instead of putting this we could put this in our base.html file we could just put it right here right because this is where the navbar goes instead i want to break this even further into another file so let's come up to templates create new file and let's go file save as and let's just call this navbar.html because there's a lot of code here let's just paste in all of our nab navbar code and okay now the one thing i always do is i change it from light up here to dark because i like a dark navbar instead of that light gray so we can do that let's go ahead and save this now we need to sort of pull this in to our base.html file now we could use a block tag like this or we could also use the include tag so let's go include navbar dot html and you just put this wherever you want this nav bar to go so we want to put it first thing right under our body tag of our html this is right where the web page itself starts everything above here is just header stuff like this title so let's type in flasker whatever for our title okay so that should work so let's go ahead and save this head back over here and let's hit reload and boom we've got a nav bar awesome if we go to another page and hit reload we've got a nav bar there if we go to another page there our error page and hit reload boom we've got the nav bar there very very cool so let's go ahead and modify this nav bar a bit maybe we'll keep this search bar for now we might use that let's get rid of this disabled link let me go back to the home page here and we can do that by just looking through our nav bar code and towards the bottom just look for disabled and there it is and then just go up to the li tag this is the list element so weekend or list item i suppose so we can sort of click on it and the closing li tag highlights so i know to get rid of all of that so if we save this come back over here hit reload boom now that's gone and we got this drop down now we don't really need that for now let's go ahead and get rid of that same thing look around for drop down there it is right there come up to the li tag hit it you can see it highlights look for the closing li tag there it is so let's just go to all of this save this reload make sure that looks okay okay and i want to get rid of this home link as well we'll keep this one i like this sort of darker muted link instead of this bright link so let's get rid of this home link so again look around for home there it is there's our li tag there's our closing li tag and we can get rid of that save this reload okay so now navbar let's change that and let's just change this to say flasker for now save this reload okay so coming right along now let's knock out this link here so and let's actually add a link to this flasker thing right here too that goes back to the homepage so let's do that one first so to use links in flask we use something called the url4 tag so here's our html link right there's opening a tag closing a tag and the ref is where the link itself is pointing and so right now it says hashtag if we want to point this to somewhere else we use our double brackets and then the url four tags so just note we're not doing that kind of tag this is double brackets so it's sort of like a variable right so to use this we go url underscore four and this is a function and inside of here we can pass whatever we want so we want this to go to our homepage our index page so we reference the index route the index function of our hello.pi file so if we come back to our hello.pi file we see we've got these functions index user we've got page not found though i don't know why you would want to point a link to page not found but it's these function names here that we're referencing in the url4 tag so okay let's go ahead and make sure this is saved we've got our index right there let's come back over here and hit reload and when we do when i hover you can see down in the bottom left-hand corner down here it says 5000 so if we go to another page for instance this one and then click reload and now click here boom it goes back to our home page and that looks good so okay now let's change this link to point to our user profile so user slash john for instance right so this is dynamic anytime we change this to something else it creates another page and it says hello bob there so we want to point to let's just say john so let's say we were pretending to make this a user profile page so user slash how could we put this link here well this is different because we're passing information here for instance john right so how do we pass that into the link well it's actually pretty easy let's head back over here let's find that link there it is and i'm going to call this user profile and for our link we use our double brackets and it's the same thing url underscore 4 and it's a function now looking at our hello.pi file we want this to go to user but remember user is looking for a name so we can reference that in the link so let's head back over here and we want to point this to user but then we also want this we need to put the name equal to something so we want this to point to john so if we save this head back over here hit reload go back to home page user profile you see down at the bottom it's pointing to user slash john if we click on here it goes to user slash john so we can navigate back and forth and that's looking good one thing i will point out this is a little bit weird it's a little tricky i'm using single quotes here that's because this a tag here is using double quotes right here so if i wanted to use single quotes you can see it's throwing all kinds of errors because it thinks that this is the closing quote to this because they're both double quotes so if they're using double quotes here that means inside of here we need to use single quotes or we could and we could change it around we could use single quotes here right and then we'd have to use double quotes right here right that's just sort of how that works so so let's save this make sure that i didn't mess anything up there okay seems to work just fine so very very quickly and we can see john there let's change that to uppercase so let's go to user and and instead of lower let's go i don't know title all right that looks better and uh very cool so this search bar doesn't do anything yet we might mess with that later we've got a working nav bar that we can change on the fly and it will be reflected on every single page of our website we've only got a couple of pages of our website right now but you know hey we're coming right along and just that easy so remember templates we have to just extend out the base in every file we want to use it we just use this extends base file and then just wrap your content in this block content tag and that's all there is to it then on your base.html file put whatever you want in your base template and then just wherever you want the content to be output put the black content tag and that's where it will go so that's all for this flask friday video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codeme.com where you can use coupon code youtube1 to get 30 memberships they pay just 49 to access all my courses over 47 courses hundreds of videos in the pds of all my bestselling coding books join over 100 000 students learning to code just like you my name is john elder from codingme.com and i'll see in the next video

Channel: Codemy.com

Views: 10,733

Keywords: flask base.html, flask templates, flask template inheritance, flask templates tutorial, flask template bootstrap, flask templates python, jinja2 template flask, jinja template flask, flask render_template example, flask url_for, flask links, flask bootstrap templates, flask bootstrap navbar, flask bootstrap tutorial, flask bootstrap theme, flask bootstrap 4 tutorial, flask tutorial #4, codemy.com, john elder, john elder flask, codemy.com flask, codemy, codemy flask

Id: y62Dvo2Ml7o

Length: 16min 25sec (985 seconds)

Published: Fri Feb 05 2021