How To Use Python On A Web Page With Jinja2 - Flask Fridays #2

what's going on guys john elder here from kodi.com and in this video we're going to look at the jinja templating language for flask and python alright guys like i said in this video we're going to look at jinja 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 coding.com we have dozens of courses with hundreds of videos that teach you to code use coupon code youtube1 we get 30 off membership it's all my courses videos and books one-time fee just 49 which is insanely cheap all right it is flask friday again here in vegas last friday the happiest time of the week and in this video we're going to look at jinja 2. now jinja 2 is a templating language allows us to do very pythonic type things on our web pages so one of the great reasons for using a framework like django or flask is you can use sort of python on your web page and normally you can't do something like that so it makes the whole world of python available on a website almost and that's really cool i say almost it's not exactly you can't exactly use python on your web page but the templating language lets you use most of the main things that you would want to do things like using variables using if statements for logic loops and things like that uh there's some special things that you can do to capitalize things and lowercase things and we'll look at all those things in this video so if you're familiar with django you're probably familiar with the django templating language jinja 2 is very very similar but a little bit more powerful in my opinion so that's what we're going to look at in this video now if we head over to our terminal as you see i've got the server running running from the last video we can pip freeze and when we installed flask we also installed jinja 2 automatically it comes with flask so there's nothing for us to install there's nothing for us to import let me just run my server again here so that it's going it should just work so if we head back over here very quickly i just want to go to google type in jinja2 if you're curious you can go to the ginger website it's jinja.palettesprojects.com forward slash some stuff and this is the documentation you can see it's a modern designer friendly templating language for python modeled after django's templates but i think a little bit better so you can see right off the bat you could do things like for loops you can use blocks and things and you can come through here and read all about it if you want we're going to dig into this in the videos today and going forward so we don't actually read through this but if you're interested you can check that out so okay let's head back over to our code and if you remember in the last video we set up this user page here that sort of pulls a name from the url passes it into the function and then puts it on the screen using this format thing and this works fine for this little example but you know normally we're not going to return html in the function here we're going to do we're going to use a template like we did with our index template right there see so how do we do this but with a template well jinja will allow us to do that so let's just go ahead and come up to our templates directory right click and create a new file and then let's go file save as and let's save this as user dot html and you can see boom it pops right up there now we come back to our hello dot pi file and we can come down here let's go ahead and change this and let's use the same formatting we did here so i'm just gonna sort of paste this in here okay but instead of pointing this to index.html we want to point this to user.html and save this come back here to our user thing there's nothing in here so let's put a quick h1 and let's go hello and then name so if we save this and run it we can go user slash john like we did before and it says hello name here it doesn't say hello john so how do we get this john from right here in fact let me take this and go lower case just for fun how do we pass this john into the page using jinja well it's very very easy head back over here and all we have to do is pass in that variable so i can go name equals name right so this name is coming from right here right which is getting passed from right here so if this is confusing name equals name we can change this to a username if you want equals name now this we can access on our template page so i can copy this head over here to our user and instead of name here we can use our jinja tags which are double curly brackets and i could just paste in username now if we save this and reload our page now it says hello john and you'll notice it's lowercase but up here we passed it as lowercase if we passed it as uppercase boom it would be uppercase so that's how you use variables with jinja very very easy i'm going to change this back to lowercase like i said there's some little sort of tricky magicky things you can do with jinja with things like variables and we call those filters and there's just a whole bunch of filters i'm just going to mention a couple of them here and we can use filters by adding a bar and then just saying the filter so if we're passing a lowercase i want to i might want to convert this to uppercase so i just pass upper so if we save this come back over here and see now it's lowercase in the url it's lowercase on the page but now when i hit reload boom everything is uppercase we've converted everything to upper now that's probably not what we want we just want the first letter upper so instead of declaring everything up or upper we can capitalize so if we save this and reload boom now there's john so very very cool uh likewise we can lower case all of them so if i change this in the url to an uppercase john and then we come back over here to our code we can lower this right save this reload now it changes it to lower and there's several more of these we'll go over them in just a minute so let's head back over to our code and instead of playing around on this page let's head back to our main page and here's our index function here now in in this example we use something from the url but you don't have to you can just make a list of anything so i can just call a first underscore name set that equal to john and now i can pass that into our index page by calling first name equals first underscore name so this is this which is john and we can access that on our pay on our web page by accessing this variable right here so if we come back to our index.html page and it says hello world this is my first page isn't this cool i can say my name is and then use our double curly brackets paste in first name let's close our p tag just for fun there we go we can come back now to the main home page and it should say my name is john and it's just that easy now what can we pass in like that onto our web page we can pass in variables we can pass in python lists we can pass in dictionaries we can pass in objects we can pass in just about anything you can think of and that is really really cool and really powerful now i mentioned there are some other filters we can talk about let me just paste a quick list here and we can look at them because they're they're kind of interesting and they very quickly give you a lot of power over everything so here let me just create a comment here and let's go like that and so here are the main ones i want to talk about safe capitalize lower upper we've already looked at these three title trim strip tags and safe so let's just look at all these what is this safe one well let's say you want to pass in some html into your web page well that can be a little tricky because hackers can use that to put some weird code in to inject some code but if you know it's you doing it and it's not somebody else you may want to pass html and in those circumstances flask and jinjo will strip out that html by default as a security measure so to get it to not do that we use the safe tag so let's create some stuff here i'm just going to call this stuff and then let's say this is bold text and we want this to be bold so we use a strong html tag right so if we just pass stuff in and by the way if you want to do more than one variable see we've already got one here in fact let's put this on another line just to make this a little easier to read we could just slap a comma in and do another one so stuff equals stuff so here let's save this head back over to our index page and let's just let's put a p tag and let's just pass in our stuff all right so if we save this head back over here reload oh we get a an error about my little comments there so let's come back here and instead of these let's do this for some reason that was causing a problem okay so now let's come back here reload boom so now we see this is bold and these two html tags have been passed through well that's not what we want we want this to actually render the html and make this actually bold make it strong text but we can use the safe tag for that so we come back over here come back to our index page and to do that we just use a filter like we do with bar and then just pass safe so we save this and reload we see now boom this is bold text and the text is actually bold right very very cool and very easy now what's the difference between that and strip tags well let's see let's go ahead and come back over here and instead of safe let's try strip tags now what this will do is just what it sounds like it will strip any html tags completely out it won't ignore them it will remove them so if we save this and hit reload our bold text goes away but you'll notice the actual strong tags that were around that bold are completely removed and how is that different from not doing anything well if we just don't do anything if you remember those strong tags will come through and they'll be printed on the screen and we probably don't want that so there you go so why is that useful well let's say you have a message board or a commenting system on your blog and people are trying to pass html well you may not want them to be able to pass html because like i said hackers can use that to inject code that takes over your web server and stuff so you may want to strip out those tags that people try to use you would use that strip tags filter so very very cool let's see what else do we got here let's there's a couple more and let's let's change this to get rid of this and let me make all of these things lowercase so this is bold text this is capitalized the rest of these things are lowercase we can use the let's see what else the title filter what this will do is capitalize every first letter in every word so let's give that one a try real quick so we just boom boom save this reload i notice the first word of everything is capitalized that's kind of fun and that's pretty much it the other one that i have listed is trim this will remove trailing spaces from the end right which is not really there's no real way to see that so if you had a bunch of spaces at the end it would remove those spaces but you really wouldn't be able to tell that in html but it's still nonetheless it's a little bit useful so those are filters let me just comment filters all right and very very cool so what else can we do with jinja well we're passing a variable here let's go ahead and pass the python list so favorite underscore pizza and this is a python list and we could go pepperoni and maybe cheese and maybe mushrooms [Music] and we can use a word and we can use numbers 41 41's not really a favorite pizza but we could pass numbers in nonetheless and that's very cool so again to pass this into our web page using jinja we just in our render template function here we just slap another comma paste it in favorite pizza equals favorite pizza now this is sort of a convention using the same words you know down here i used username and name just to sort of show you that they're different but in reality most of the times i find myself using the same word so favorite pizza equals favorite pizza because it's easier to understand and we know that this is the thing we access on the web page this is the actual variable that is right here that holds the stuff right so now we can access his favorite pizza come over here let's head over to our index page and below here we can just we can add our tags and we can just paste it out now this is probably not what you want to do but you can and if we save this and reload you can see that it just prints out the entire python list which is probably not what you want right so jinja actually allows us to do logic and loops so we could do an if statement we could do a for loop we can do any kind of loop what we really probably want to do is loop through this and just print out each of these items on the screen and we can do that with jinja really easily so instead of just printing out this whole thing let's create an h3 tag and say favorite pizza and then underneath here we can use a for loop and to do that with jinja we use these brackets like this and we just go let's say for topping in then we reference this thing so we can get rid of that and then at the end here we always have to close our thing so we're using a for loop so we type in n4 if we were doing an if statement we would go and if right but we're not reading a force a for loop so now here what do we want to do well let's just use our double brackets and paste in top and print out topping now you'll notice the difference between these and these so the double curly brackets are usually used for variables right mostly just variables these are used for logic and for loops if statements things like that so when you're doing like functional things you use these when you're just spitting out variables or lists or dictionaries or whatever data use the double brackets so okay we could do that and let's put these on a separate line we can save this head back over here reload boom favorite pizza pepperoni cheese mushroom and 41 right so very very cool now we can also call an individual item from a list like you would any other python list all right so let's again paste this in and let's say we want the very first item in the list well that's the zeroth item remember python lists start at zero so if we head back over here and look pepperoni is the zeroth item cheese is the first item mushroom is the second item and 41 is the third item so zero one two three so if we wanna access pepperoni that's the zeroth item cheese is the first item right just like in python land so we can do that by calling dot zero so if we save this come back over here and hit reload we see boom pepperoni pops up we can change it to like i said the second item which is one which is i think cheese save this hit reload boom cheese so let's see what was the uh that's third one that's 41 right so if we save this and reload boom it says 41 41's a number it's not really a string so can we do number things we go plus 10. save this come back over here reload boom 51. we could do python we could do things like we can do math we can do other pythony things right in there right so very very cool if we change this to pepperoni plus 10 that's not really going to work because it's a string and a number but it will well throw an error right so this is an integer not a string so obviously that would throw an error so very very cool and very fun and just that easy so those are for loops we could also use if statements so inside of our for loop let's go let's create another one of these guys and let me just copy this and this is going to be an end this is going to be an if statement so i know to end if i always like to do that right at the beginning so i don't forget so we can say if topping equals 41 then we can print out topping plus a hundred else just print out topping there we go and we probably need a line break here okay so let me put this down there so we can see so we're going to loop through here and every time we do we're going to say this if statement if the topping equals 41 add 100 to it else just print out the topping so this should print out our list of toppings plus 141 instead of 41. so save this and run it or reload it i should say boom pepperoni cheese mushrooms 141 very very cool so that's jinja in a nutshell there's so much more you can do with jinja and as we move on throughout this playlist fast fridays we're gonna get into it in more detail but this is a pretty good sort of jump start on it if we head back over here remember there's filters you can head over to the ginger website and really look for all the filters but these are the sort of the big ones in fact if we went back over to the jinja website jinja2 i just google it usually because i can't ever remember the actual website and if we search for filters custom filters you can create your own filters we'll probably talk about that at some point uh there's filters see there's not a real uh here we go you see here's a list of built-in filters you get the absolute value of something that's really cool float oops float lower we can round which is awesome trim truncate safe we looked at safe already you notice these are functions we don't actually put the little function brackets when we use them we just reference the thing itself let's see format max select truncate unique that's a cool one min group by capitalize center cool indent that's neat slice upper url and code it's kind of interesting sort random that's a cool one and default dictionary join reject string i want to turn these turn something into a string that's maybe a that's maybe a uh integer or something in fact if we want to throw an error we could probably come down here to our index here and in this one we could go uh change this into a string then when we try to add 100 this should throw an error right if we reload this i don't know why we would want to do this but yep we get an error because now it's a string and you can't concatenate an integer to a string right so very fun i don't know why you would ever want to do that but in this example it doesn't quite work but there are circumstances maybe you want to change something into an integer integer or string what else we have reject word count that's cool last escape file size format length replace some word wrap title reverse oh reverse that's a fun one let's let's see what we can do with that one so let's come down here real quick and go favorite underscore pizza dot zero zeroth item and let's reverse it right save this and reload hey look in real pepperon right what if you did the whole list the whole python list itself without selecting an item from the list so if we save this let's reload this list reversed object l creates an object interesting very neat so check these out play around with them a little bit get to know the jinja templating language we're going to use that a lot we're going to do almost everything with it because we want to use python on our website that's the whole purpose of using flask getting to also use python because python is fantastic and this is how we're going to do it so that's all for this video if you like to be sure to smash the like button below and 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 to pages 49 taxes all my courses over 47 courses hundreds of videos in the bds of all my bestselling coding books join over a hundred thousand students learning to code just like you my name is john elder from codename.com and i'll see in the next video

Channel: Codemy.com

Views: 13,977

Keywords: jinja2, jinja2 template flask, jinja2 python, flask jinja2 if else, flask jinja2 tutorial, flask jinja2, flask jinja2 filters, flask jinja2 for loop, flask jinja2 loops, python flask jinja2, flask tutorial #2, flask friday, flask friday #2, codemy.com, john elder, john elder flask, codemy flask, flask john elder, flask codemy.com, flask templates, flask tutorial, jinja template tutorial, python flask web development, python jinja2 tutorial, jinja2 template tutorial

Id: 4yaG-jFfePc

Length: 21min 30sec (1290 seconds)

Published: Fri Jan 22 2021