Flask Tutorial Web Development with Python 7- Dynamic Dashboard

Key Takeaways

hello everybody and welcome to the sth Python Programming with flask and general web development tutorial video in this video we're going to be talking about the dashboard which is basically this right here so this is the Crux of this website this is where all the logic is and this is the main uh quote unquote web app uh for my website so let's get started so first of all what we need is we we need to have our header file which we've already created the header file we've just done nothing with it and then we'll have dashboard actually uh I want to say inherit from it but it it's going to extend using flask lingo the header file so first let's make this header so what we need to do is we're going to take main. HTML and I'm going to just go ahead and highlight All Copy come over to dashboard or no I'm sorry header and paste now what we're going to do is within our body uh we're going to we'll keep this div here and let's get rid of cuz again this is our header so what we want to do is we're going to keep that div we'll delete we'll delete the video within it uh we'll keep the scripts because those are going to be necessary uh and then what we're going to do is height 100% And instead of just height we're going to say Min height 100% so it can be taller if it needs to be uh and then we're also going to we'll convert this to a container fluid and now what we're going to do is first of all we can do we're going to add some logic here so we've got uh block body and then we're going to do basically some more logic and then we have end block now what this is is this is flask code and this is for when we do an extension uh which we're about to do for dashboard so I'll show you a little bit more about that in a moment now the only other thing I want to go ahead and have us add real quick is this border row so right now um you can see that um let's just save this real quick and now we're just going let's just add the Border row and I'll I'll point it out in a moment so it's going to be div class equals and it's border Das row and then whoops style equals width colon 100% And then we're going to add a bit of a margin so margin-bottom colon 15 pixels and that's it and then we'll go ahead and close off that div so this is our header file and now we can come over to to our dashboard and we're not going to add too much right now to this dashboard but for now this is going to extend or or what I would want to call inherit from the header uh but it's going to extend it and so to extend we're going to use some logic here and it's going to be extends and then you put in quotes what it extends this one extends header. HTML and again extends is going to search for templates within the temp templates directory so if it's extending a template that say in templates uh footer let's say uh you would add the footer in here so footer slash okay so just keep that in mind uh and I'm going to go and delete footer cuz we're not actually going to use that but it's extending header. HTML and then we're going to use the same uh text here so block body and block we're going to do again here block body and basically block body is going to go all the way to the very uh end where you would have end block so you've got block body and then uh and block whoops and block and then here we could just have maybe some quick paragraph tags and say hello okay oops almost knocked over my water save that that's dashboard it's extending header. HTML our header. HTML was a copy and paste of our other uh page there so everything should be fine up to this point let's check refresh good so we can see that our um the init.py that we have is uh where are you here you are uh right here it is dashboard and it Returns the template dashboard. HTML which is this this is all that template is but it has successfully extended this template entering basically all of the content on dashboard right here between the block body and it's enforcing this 100% although you don't really see it cuz we don't have a footer at the moment but it's there uh one more thing is let's see the Border Row for whatever reason appears to not be appearing what are you that is weird I thought that was we needed for a border um like a line in the Border what am I missing let me go let's go back here and cuz we want that I do want that border row uh let's see got dashboard we'll keep scrolling down okay it would be yeah would it wouldn't it not be this right here let's let's just copy this from the website and we will come over here paste save that that is header fresh ah it's odd would like to know what the dealio is there um okay well I'll look into that and see what the heck is happening here I don't really know why that would happen that's very frustrating to anyways um I'd like to have it but we'll just ignore that for now it's not essential and I'm tired of HTML at this point so we're going to continue along so Appo dashboard Okay cool so now what do we want to do well now at this point we want to have uh we know we have all this content that we want of course now we've got to return to you know HTML whatever so we're going to go to get bootstrap and we are looking for uh those tabs hoping I can just scroll through and see them uh I'm pretty sure they're in let's do uh nav D oops over here nav Dash tabs okay not those tabs is not what we want maybe it's these y these are the tabs that we want okay so food truck fixie oh RW denim you probably it's interesting uh random text they have here so this is this toggleable tabs tab. JS that which means we'll have to probably include that it's been a while since I wrote it uh and so we have this this is our tab content let's let just copy and paste this markup that they have here so copy we'll come over here we'll come to our dashboard and we'll just paste in those tabs that they've given to us thank you thank you let's see if they work okay the tabs at least work I don't see the uh fade effect but it looks like I see it right down down here uh so let me just copy and paste that again so the Fades will come back over here is right under it so now in the tab content you just add fade and you have an active tab which is you know your starting tab so come back over here and that was all the div so we'll just do this boom save that refresh I assume it would fade but it is just we've got no content and I don't see our oh there it is right here here so we do have our dot dot dot but it is over and I think what's happening is that's because of our Center do we have a yeah so we've got this align Center nonsense uh let's get rid of that we don't need to be centering any alignment uh and then um I wonder if that's what was causing our Pro no cuz we were right above that let me let's refresh this one last time there we go at least this stuff is over here now uh Min height and let's say let's see if we can get away with width 80% for now okay so uh we'll we'll come back to that as well I hate deal with CSS and stuff so anyway um so at least we have the tabs here we see that it is fading these dot dot dots for us so now we want to talk about how do we actually add content to these tabs so right now they say home profile messages settings let's let's change those so we'll come uh we'll save header we'll just leave header alone for a while refresh this okay still working so now we come over here and so the way this works is you've got the href which is pound home and then you've got home here and then this is just the the name that goes on the tab but then you'll want to change home and home here to be identical to basically home wherever this ID is so instead of home we let's call this Basics and then we'll literally just call these Basics as well the little hashtags uh and then the ARA controls Basics Basics and then uh basic stuff here okay we've got Basics let's do uh webdev so we'll call that wdev copy paste paste and we'll say webdev and let's just get rid of settings I don't feel like doing an a third or a fourth one and then finally we'll do uh data analysis and we'll call it Dan for data analysis paste paste paste and then uh data analysis okay so save hopefully those at signs don't screw us over nope okay so now you can see that okay we've got these tabs got custom content in the tabs awesome now what we want to do is actually work on our content management uh system and that's going to be how do we actually populate these tabs with content and then not only that but how do we maybe manipulate it over time so of course we could come in and we could say that the basics tab first let's delete this we're going to make some space here because each tab is going to contain some stuff so now of course we could come in and we could add some tags here for unordered list and then we could add you know list oops not lie list item SL list item and then we could have uh copy that paste paste uh part one part two and part three and we could really just you know handw write all of this stuff that's within here we can make them links into the tutorial but the problem is for let's say in a week you decide you want to add more stuff you want to take away maybe you want to reorganize this whole table so to an extent you you want to have some sort of content management system in the back end or the background that kind of drives what shows here plus we are using python the whole point of using python is to use logic where we can to generate the HTML so that's what we're going to be talking about in the next video is how we're going to build build a Content management system to take say a list of topics some URLs organize them for us and link to the pages in a very custom manner uh so that's what we'll be talking about uh in the next video if you do have any questions or comments up to this point feel free to leave them below otherwise as always thanks for watching thanks for all the support and subscriptions and until the next video