Flask Tutorial Web Development with Python 3 - Bootstrap and Jinja Templates

Key Takeaways

what's going on everybody Welcome to the third Python and Flash practical tutorial video in this video we're going to be talking about building our kind of homepage using bootstrap and stuff like that so let's go ahead and get started so bringing win SCP over here uh when you first log into win SCP this is probably what you'll see just this is the directory for your root user but we actually want to go to the root directory which is all the way way back here then to find your actual files uh for flask you saved them in VAR www flask app and then that's where we made the wsgi it'll probably not really changed anything there but then here's where the the main bits of our our flas Gap begin this is our init.py file and you'll see that when we double click that this comes up and this is that file that we created initially and we created it via SSH now normally when you double click on a file at least vile win win SCP it'll come up I don't know probably via notepad++ if that if you have that installed otherwise notepad now this is kind of annoying uh you want your python files to come up with a python editor so to do that in when SCP although in really any of these file transferring uh applications you should be able to change the editor so you might want to figure out how to do that but anyways for us we'll go to options preferences come on down to editors and in here basically mask is the file extension and in the you basically write these in the order that you want them to check so the very first one is Idle anything that ends in dopy try to open with idle otherwise everything else open with notepad++ so basically you're going to you're going to mod you know modify two major types of file types that's going to be HTML andp but also you might be editing JavaScript or css or whatever uh and everything will open in notepad++ basically except forp files so I'm going to close out of this now and so yeah now when I open up init.py it's obviously in um in Python now I'm also going to make the font size here just little bigger okay so now uh what do we want to do first we mentioned that we're going to be using bootstrap so uh we know we want to go there but first let's go ahead and get started with with some templates so uh we're going to come into templates uh before we go any I'll explain static in a little bit actually uh this video don't worry but we'll we'll get to that uh so first let's go into templates and there's nothing here templates is where we're going to put all of our HTML files so I rightclick new and now I'm going to call this main. HTML that brings up um this main file here let me move this here this down and this will be our kind of like our if you're familiar with old school kind of uh paradigms this will be kind of like a header file only now the header file contains both the header and the footer and you don't really have to have like top and bottom don't worry about it if if you don't know but it is it can be kind of confusing if you're coming from traditional PHP kind of styled paradigms so this is our main file and now we're ready to build an HTML file so again a lot of HTML is simply copy and paste so for example we can come over to bootstrap and let's just view the source so to view a source of a website you can rightclick view Source view page Source or if you're in Chrome you can do control U and so on so you see here they have all of this stuff and it's contained uh at least all of this is contained within a pretty large head actually we don't really want to do all of that but basically all websites start with the following they've got do type and then HTML and then they begin with this head tag again you don't need to know a lot of HTML but I hope that you understand the basics of tags and all this stuff but you see they start with this head some meta stuff blah blah blah blah blah some of this stuff here meta names and stuff like that so basically we want to do the same thing so let's just copy that at least those first three lines we want those this just identifies this type is HTML this identifies the HTML language as English We Begin the head well go ahead and close the head now and now we're going to put some stuff within the header tags now generally I don't really see too many people indent the head even though the head is within HTML and in fact let's close off our HTML tags as well um I never really see people indent but it since you're we're all python folk um you do want to maintain some degree of Standards so python automatically indents you know blocks of code for you HTML doesn't you could actually code HTML all on one line so you could do something like this and have like all of your HTML code on liter oops not deleted but all on one line you you that's totally fine um but it's just bad standards so you don't want to do that enally gen General generally anyways generally what you'll want to do is you'll want to indent over stuff that's contained generally again people don't do it between the HTML tags but everything else they do uh so now we're going to do the S do that uh car set so we'll come back over here I'm sure they yeah they defined caret we'll just copy that tab paste basically this defines the encoding for your web page it's utf8 enter and now we're ready to put some more stuff uh next thing is the page title so this will just be you know what's the title of your page basically and it'll appear in the tab you know up here and we're going to call this uh Python programming tutorials move this over here um and so that's our title easy enough let's see if they did the viewport they sure did we'll copy their viewport as well let me zoom into this one as well uh so this is the viewport basically let's just let's copy that first uh viewport is kind of uh it's code specifically for your browser really all of this is HTML is interpreted by everyone's browser that's why HTML is so Universal and it works on everything you know and that's why websites in general are very Universal because actually just inter they at the end of the day they spit out HTML that's interpreted by browsers on all the operating systems so it's actually a really nice system I think anyways this is some browser code basically it it encourages the browser to use the full size of the browser okay so the idea of bootstrap is that it's very responsive and it it works on multiple screens uh so that's obviously something we want so next we've got the viewport and now you're gener going to see uh CSS sheets so let's see if they've got a CSS sheet anywhere that we can copy and paste I'm not here we go here's one uh so let's just say that this is so this is a stylesheet this is how you link to a stylesheet so basically the link HF is the reference to where is that stylesheet stored and then you tell the browser hey by the way this is a stylesheet so uh we're going to do the same thing and our stylesheet is actually going to be um called bootstrap r. min. CSS but uh with flask in traditional again PHP uh everything is stored and visited via the URL path identically so the URL path to a file is exactly the path to the file on the server sometimes it's a local path though uh like if you're using shared hosting or VPS is generally shared to um but it's it's the same path right uh with flask not the case so say you're on uh like a website or you're you're on a web page that is like the following let's say pythonprogramming.net slome test and you told the browser that the stylesheet is located in let's say uh static SL bootstrap uh. CSS let's say it's going to look for this file at the following location it's going to look for it here and with us it's not going to find it there because that's not where the file is so flask has a nice way to dynamically link to files and here's how it works you use the phrase URL 4 and it's a variable and the way that we Define variables in flask is with these double curly braces this is a variable you also have logic and logic is defined with the Cur curly brace and then the percent sign and this is logic and anytime you have logic you need to also have end logic because this is the templating code so again coming from python it's a very unfamiliar thing when you have to close off uh things like you know you have start and end and um and that's just not something that is done in Python but we here this is actually called ginger templating and it's required with ginger templating you do not need an end are though so anyway that's logic so we're going to use a logic in variables so we're going to use a variable code and the variable code is going to be a variable that is the result of this URL 4 which is a flask function and it's uh is going to be URL for and then for what where is this item that we're looking for well it's within the static directory and then um you'll do a comma and then you'll say what fi what's the file name within the static directory and for us we're static is the only directory that's like directly accessible by the user so I'll show you that hopefully in a little bit uh we don't have anything in static right now so I can't show it to you right now but that's the only directory where people will be able to access it because they'll be able to go to pythonprogramming.net I and they'll find your stuff and in fact I can show you because I can show you on pythonprogramming.net so let's do here paste and you can see all the stuff that's contained in pythonprogramming.net or slatic but we also there is also templates right templates is in the same directory as static so could we do templates to see all of uh pythonprogramming.net templates no we can't we get a 404 error with this lovely snake I've drawn um so anyways so just so you know static is is the only directory viewable but you don't necessarily well never mind anyways we're going to get out of that uh so static and then within static we're going to have a bunch of different files so we did here as well so you'll see since this is the website we're building within CSS or I'm sorry within static we have different things we got CSS documents downloads basically everything you want that user to be able to D access directly not just the access but the user is in static if you want something hosted privately you push it somewhere else and then you temporarily send it to the browser and there's all kinds of fancy things you can do but uh static is for public stuff so again in static we've got the CSS directory which stores CSS we also have a JS for JavaScript videos images just all kinds of stuff in here so anyways we want to have CSS and that's where we're going to store all of our CSS stuff so coming back over here so the URL for the static directory and within the static directory we're looking for the file name equal to uh CSS because it'll be in the CSS directory forward SL bootstrap.min.css that's what we're looking for okay so next actually let me just full screen this no no sense in uh leaving the other stuff on the screen so anyways uh that's our CSS uh sheet and then now we just have one more thing we want to reference and that's going to be our uh our shortcut icon so that's the icon that appears as soon as I uh uh is right here right it's your fave icon is what it's generally called so we want to reference that as well so we're going to say link uh and we're going to say relation is uh shortcut icon and hre is equal and again we're going to use basically the same thing so I'm going to copy and paste this URL 4 here paste and it's inst static it's not in its own directory and it is going to be called fave icon. I oops fave icon. we'll save that but of course bootstrap.min.css and fave icon just don't exist yet so we need to create those so I'm going to move this over now and we're going to uh deal with getting those icons and the bootstrap stuff so for Python Programming specific files and stuff really no no reason for me to provide them to you in like a directory or something that you can download they are all available on pythonprogramming.net so for example we do need uh the fave icon so we'll come here and we'll take this fave icon here um let me just drag and drop it to the desktop I suppose last time I did this yeah I converted it to a PNG I don't know why it's doing this let me save it let's try saving it yeah so it saves as a fa fav icon. I but if I take it from the or from here to my desktop it just does not want to be you know good so anyway um oh no looks like we we still disconnected from I I guess it was too long for it uh to hold for me that's okay anyway uh downloads and there's my fave icon so now uh come to win SCP I'll go into the directory which was static just flat static and I'm going to click and drag this fave icon over so we've at least done that and now we need to get bootstrap so let's go ahead and grab bootstrap move some stuff over so here's my download directory just fave icon in there and then we're going to come to bootstrap here and we just want to download bootstrap uh we don't want the source code we want just bootstrap that's uh you need a compiler to use that in stuff so once you have bootstrap you get this we'll rightclick extract all extract and now we've got bootstrap disc and then in here you got CSS fonts and JavaScript so CSS is the stylesheets that we're going to use fonts things like glyph icons which we are going to use and then JavaScript so now again we click and drag and we're going to click and drag that into the static directory so do that and it might take a little bit I don't it shouldn't be too long these files aren't really huge and then once that's done we should have everything we'll go ahead and refresh just to make sure uh main. HTML did we actually save our our main do yeah we did uh let me minimize this let's come over here and let's refresh and just see that oh okay right there's one more thing well there's a couple more things we needed to do um man I'm really bummed that I got to reload this uh thing let me all right once we've made it this far sorry I had to restart this and now it's telling me I need a system restart I'm sure it's telling you guys the same thing so at the end of this series or at the end of this tutorial rather run a pseudo reboot if I forget to tell you uh so it should be totally fine to continue on at least for now but it might cause TR trouble later so don't forget to do a reboot if you need it um let's see okay so flask app we've got our templates main. HTML now we need to actually call upon main. HTML so we go into flask app and we're going to open up init.py and for now we see that right now homepage just returns uh hi the there how you doing now we're going to talk about how do we uh have it return a template so what we're going to do is from flask import flask comma render uncore template We'll add a space there just to be clean and what render template does is exactly what it sounds like render a template so instead of returning a string we return render unor template and now you give the path to the template starting from the template directory so in our case uh we go into template directory and we see it's just straight main. HTML so the path is main. HTML but if you could and you can and we will or at least I do I'm pretty sure I'll can I'll at least show you how I've done it so uh there will be more directories in here and you'll have various meanings for these directories and names and stuff and then say you had another directory that was like I don't know footer you might have something like this footer .html and that would be acceptable as well so anyways we'll save that and once we've done that anytime you make a change to the init.py or any of the Python files whoops I didn't mean to click on that link uh you need to issue a service Apache to restart so we'll restart Apache you might get something like this it does not matter we'll come over here refresh and at least we see our fave icon works we don't see anything else but we can view the source and we see all this stuff and and remember that here's our main. HTML right this was a variable right it was a variable to our static stylesheets but we come over here and we see it's actually given you know the relative path basically to it we can click it and we can see that yep indeed we are actually getting there cool I think that's really cool I love the idea of variables in the HTML and then we we can even do logic that's just awesome so anyway uh the next thing we can we can do though just to show you it works is we can add some paragraph tags really quick and say like hi there how you doing save that we've modified the HTML do we need to restart Apache no refresh hi there how you doing pretty cool and you might even notice that the font is different uh and the reason the font is different is because we've loaded in our Styles sheet so because of bootstrap we already have a better looking font um and and that's really it this is 20 minutes so we'll cut that off now and then we'll continue on making our homepage and stuff in the next video if you have any questions or comments please feel free to leave them below otherwise as always thanks for watching thanks for all the support and subscriptions and until the next video