How to reuse code blocks easily with Jinja2 macros!

hi guys and welcome back in the last video in this channel we looked at how we can use flask with ginger 2 to easily create tables in html so that we can display data but it's not all that easy to use and scalable so in this video we're going to take it a bit further and learn how we can use ginger 2 macros to simplify the process of creating html tables let's get started so in case you missed the last video the process for creating and displaying tables using flask html and gta 2 starts with getting the data for our table in flask and we've got the headings for the table here so it's going to be a table with four columns and there's a few different rows of data in our table we're using this data and given it to our template tables.html which is then going to take this data and render the html template that will display it to the user of course we don't have the template here at the moment so you can either watch the last video to learn about this in detail or you can just go ahead and create the templates folder and then inside it create tables.html and here we're going to put our ginger2 code and our html code that are going to be responsible for taking that data and displaying it to the user and basically what we're going to have in there is something like this so we've got a simple html document that links our way to a css style sheet and inside the document we've got a table and the table has two main types of row it's got the table header row of data that contains for each header in the headings tuple that we got from app.py so for each of these values it contains a th element so that's going to populate our table columns the headers for each column rather then we're using ginger 2 to iterate over the data and produce a new row of data for each element in there remember that the data is a tuple of tuples so here we're going to create a new row in our table for each tuple in there and then within that row we are populating it with td elements one for each element in the row so that is going to end up giving us a nice table and again watch the previous video which is linked in the description below if anything is unclear we also have a static folder which contains the styles.css file which is what's going to style our table so in there we're putting something like this just to give it some nice styles this is all detailed again in the last video so once you've got these three files the app.py the tables.html and the styles.css we can go ahead and launch our flask app so what i've done is i've created a virtual environment i've installed flask init and all we have to do now is flask run when you do this you can go to 127.0.0.1 colon 5000 and you should see your table appear again this is all in the previous video so i'm going to hide away the console here and just focus on the ginger 2 side of things we're going to decompose this table into ginger to macros a macro in jinja 2 is very much like a function so we're going to go ahead and create a new template and i'm going to call it macros.html and in here we're going to write ginger to code then we're going to import this code from tables.html so at this point i'm going to close the sidebar since we don't need it anymore and we're going to focus on what we write here in ginger 2 a macro is a curly brace and the percent symbol and in here we write macro and then we write the macro name you can think of this as a function name so we're going to write heading row for example now from anywhere else in our ginger 2 set of files we can import this and use it to create the html that this macro creates you have to finish macros with end macro in here you can write any html that you want and that is what's going to get created when you call the macro so let me go to tables.html and i'm just going to copy this entire row which is the heading row and i'm just going to paste it in there okay i'm going to indent it a little bit so it's a little bit easier to see what's going on now clearly this macro here depends on the headings variable that has to exist but you can pass arguments to macros as well which is great and now whenever you call this macro you pass in the headings argument and it's going to be able to create this tr element obviously this tr element only makes sense if it's within a table so let's create the other macros that we'll need as well you can create multiple macros in one file and that's no problem at all so now i'm going to create another macro for the other rows of the table so again i'll go to tables.html and i'm going to copy this entire thing all the for loop all the row creation and all the cell creation okay so i've done that and now when we call this macro it's going to iterate over the data variable it's going to create all of the tr elements and then it's going to iterate over the rows and it's going to create all the td elements again this only makes sense in the context of a table element in html so we still need one more macro that will create the table element and also call these two other macros so i've gone ahead and created that macro you can see i've called it data table and it takes in two arguments the headings and the data and it creates a table element in html and then calls using the double curly brace notation the heading row macro to create the tr element and then the data rows macro to create all of the other tr elements that contain the data so if you take this and copy paste them all together because that's essentially what jinja 2 is doing you'll end up with exactly this code here only that because we've created the macro over there we can now delete this entirely and just call data table and passing the headings and the data of course we do have to import this macro so that table.html knows where it exists and we're going to do that with from macros.html import data table you can see this pattern emerging in ginger 2 where any interpolation anything we want to insert or create in our html template goes between double curly braces and anything that is a statement or something that jinja 2 will evaluate but it won't directly affect the html goes inside curly braces and percent symbols let me restart my app here and we can see if this works you can see that i've restarted there and refreshed the page and absolutely nothing has changed which is exactly what we wanted so there you have it macros in jinja 2 they are used to automate or be able to reuse the creation of html elements you can pass in arguments and they can use them inside the body of the macro remember to start and end macros with their appropriate keywords now in any other template that you want to use a table you just import the macro passing the headings and the data and you can start putting your tables anywhere you want without having duplicated ginger 2 code alright thank you guys for joining me in this video i know it's a bit of a shorter one but macros in ginger 2 are really important and they deserve their own video if you've enjoyed this video remember to like and subscribe and also check out the link in the description for our complete python web development course that i've put on sale just for you guys for the next five days so if you want to check that out i would really appreciate it alright thanks guys i'll see you in the next one [Music] [Applause] [Music]

Channel: teclado

Views: 18,274

Keywords: jinja, jinja2, jinja2 macro, jinja macro, flask jinja, flask templates, python tutorial, python flask, flask tutorial, python flask tutorial, python jinja, python jinja2, reuse code block jinja, reuse code jinja2, reuse code block jinja2, macro jinja2, macro jinja, flask template tutorial, python flask templates, python framework flask, tecladocode, simplify template jinja, simplify template jinja2, macros in jinja2, jinja2 tutorial, jinja2 tutorial python

Id: q9na89PgzGk

Length: 7min 55sec (475 seconds)

Published: Fri Oct 23 2020