Flask Web Development in Python - 3 - Variables in your HTML

Key Takeaways

[Music] hello everybody and welcome to the next part of our python with flas web development tutorial video series uh in the last video we got our basic website showing up here and this is what it looks like um we just have this one page though we want to add some more pages and we want to learn some of the basics about making our website uh you know look like a a more interesting website so uh with that let's go ahead and get started so the first thing uh I want to to do so come over here to SCP oops hello and there's a few things I want to do immediately in SCP so if you're using um some other program than SCP I highly suggest you try to do the same thing in that program um but anyway uh at least in win SCP you can go options preferences editors and then you can specify the specific editor that you want to use for the specific file type so for my files I use idle for my editor and for every other file I try to use notepad++ so basically for HTML files I want to use notepad++ but for all python files I want to use idle and just for the record Python's idle is located um in this here's the path to it cpython 27 libidol lib and then you want to use idle. py you can use the executable version of idol uh it's just going to make a little window pop up every time that's kind of annoying but you can do whatever you want but anyway this is the path to it uh just in case so anyway cool so that's that notepad++ depending on where you've installed notepad++ at least for me c program files x86 notepad++ notepad++ plus exe if you don't have notepad plus plus I highly recommend you get it uh it's a really great uh notepad editor kind of thing it's like a it really is like the you know uh Plus+ version of notepad so anyways hit it okay there all set so now if you go and open up init.py for example I double click that and up Pops this for me because I'm using um SCP and I've specified this as my editor so this is the actual uh script so I could go like hey there like this save that uh you can see it just uploaded to the server and then we should we can probably refresh that yeah and get the new stuff but if you've just dealt with an error or you maybe just created an error don't forget to uh just run service Apache to restart just to be certain on your updates uh so we'll come back over um whoops thought I was going back there we go refresh every all is well um oh also since we didn't get a chance I I I don't have app. debug working for me so uh I want to show you guys really quickly um kind of another solution if app do debug works for you great but and then also if anybody has a suggestion on on why app. debug is equals true doesn't work for me um please let me know because I'd love to have it but anyway so homepage basically what you could you can you can encase things in try and accept so you can have try you know something and then finally return that and then you can have accept uh exception comma e so your typical uh exception and then return and then just have it return the string e and later on you can make this much more impressive so here we have return High there but we can also try uh x + 5 as well or 56 in in this case hit okay Enter refresh and we see that we got our error and it says Global name X is not defined so had we not done try and accept though and um you know we could tab this back back over save refresh bunch of times see if shift F5 will do it for us okay so so seriously that's you know you've got to do a Apache restart I swear it's like server side you know anyway um now you get the internal server error and you have no idea like what went wrong that's why app. debug is so useful but for whatever reason I can't get it to work um so we'll come back back to SCP here and so we've got a uh you know returning High there but this is actually I mean this is pretty um pretty useless you know if like you have to return um let's see I want to get rid of this one and anyway so that's not really that helpful so what we want to do now is we want to use what are called we call called templates so we use a template to like load information um from an HTML file and then we can use Python to pass through variables into that HTML file and then we actually also have the ability to uh run logic statements uh through the HTML file so with that let's go ahead and show that so come over to SCP and we're going to go into our uh templates directory and right now there's nothing so let's go ahead and go new file and I'm going to call this index.html and so index.html is just going to be um you know the typical page that we reference so um just so I don't forget everything I want to bring a copy of HTML over here and here we go so for the most part you can get away with just using HTML tags these days so HTML and then close your HTML tags um if you don't if you're not already familiar with HTML um I wouldn't I I would suggest you kind like look into maybe some basic HTML tutorials also JavaScript um just just to get a general understanding of like how that stuff kind of works and just so you know like what's possible and what's not that way when you come up to a problem you know what to look for um so anyway in your HTML tags and then we're going to have our head tags here head and head and here goes like meta tags and like when we get a style sheet we'll throw the stylesheet in there uh but for now we don't really have anything that we need to put in there so we're not going to put anything in there and then we have the body class and this is where like all of your you know act bday body this is where body goodness this is where like all your like actual stuff like your navbar your logo your actual website content basically everything goes in the body tag and then that's about it so now in our body tag uh we have a couple of things you can have uh with the HTML 5 you can add in like header tags so you can have header oh my goodness header tags you can have footer tags down at the bottom too and those will be like footer um but header and footer corresponds to like groups of things so like you might think the footer only goes on the bottom but no there's a header and footer for like every uh like if you throw stuff in what's called a div tag um that's going to be header and footer for that div tag so anyway that's why it's really useful to look into uh some basic HTML tutorials if if you're getting lost uh oh hopefully we won't uh have to cover too much HTML anyway so that's okay so now um we have body and then within our body so here body you can say body class equals um we'll just say the main body but body okay now within body you have another body right and that's what I meant about like header and footer tags so like you could have a header and footer to the main body class but then you've got child body classes um talking about bodies of children now anyway body body um and then Within These body tags this is where we can pass um some general information so like let's say let's you know well I don't want to make a Blog but it's so hard to like avoid blog like things but say you want to just make a like a basic static web page right so this static web page every web page is going to have um a title and we'll say we want the title and header three tags so kind of bigger font and then you're going to have you know some paragraph stuff right so some paragraph data SL P so like like say here title and then we'll come into paragraph and like you know paragraph data paragraph stuff save that uh we'll come over to putty here run a quick refresh just to make sure come over to our website we'll refresh uhoh server error what do we do what we got going on let's see go back to init.py return hi there I'm conf oh maybe we just never saved it or something let's try that again fresh okay hi there okay so cool now how do we render that that template well what you're going to want to do is you come back over to uh your script which is here and instead of just returning text you can return a template and so to do that we're going to come up to the top of our script here it says from flask import flask and in fact let me uh configure idle here make it a little larger so everybody can see it so from flask import flask and then comma and we also want to uh have it import render undor template and it's going to automatically know to look for templates in the template directory um same thing with like static stuff so when you have like a CSS file um um some basic JavaScript stuff it's going to just automatically kind of know to look in static although with a CSS F uh I think yeah you'll you'll still probably put URL 4 and then you'll go into the static directory but anyway render template always going to look in templates so anyway Define homepage return and instead of this like let's say we want to return HTML so we're going to return render uncore template and then in parameters you put the template that you want to return in our case that's index . HTML and then there's some magic that can happen you can add some more parameters to this and pass through variables and that's where things get great but excuse my dog if you can hear that um but we'll get there so hold on let's uh restart a patchy real quick and we come over here refresh and now you see we've rendered our HTML where we've got title paragraph stuff okay now this is where the true magic happens so as I said you can pass through variables and you can use logic statement so first let's do this so we come over to index.html our uh in our templates and instead of title what we can say instead is this the following so we can do um what curly braces I suppose the name of this so double curly braces space title space double curly braces and then um again double curly braces space space double curly brace and then in here paragraph and I'm just going to undercase title just because it's going to be a variable so these double curly braces denote um variables in HTML so you'll see what I mean in a moment so go ahead and save index.html and now we're going to come back over to um our init.py um file here and render template index.html and now we want to pass through a title variable so we're going to say comma title equals and then what do we want the title to be so we're going to say um epic tutorials and then we're going to do comma and then we're going to say paragraph equals and then um wow I am learning so much great stuff exclamation mark so we'll save that we'll come over to our server we'll do a quick restart come over to our page and we'll refresh and now we see that actually we've taken python we've used python code and we've passed variables through to our HTML um page here to basically dynamically load some text to the screen okay so that's how we can pass through uh variables in from python to HTML using these uh these basically curly braces now there are a few other things that we can do we can we can do loops so we can do like a for Loop and we can also do a conditional statements like if else L if and all that so that's what we're going to be covering in the next uh video or two so stay tuned for that if you guys have any questions or comments on this video feel free to leave them below as always thanks for watching thanks for all the support and subscriptions and until next time