 Right, so hey guys and welcome back to another Python tutorial. So in this tutorial We're going to be learning about some good practices that we can use while creating a flask website So we're going to be using the concept of parents and child classes to pretty much create a Layout template that's going to be used by all the files on our website So this might not make sense right now, but as we code it will make a lot of sense So what I'm going to do is go ahead and open visual studio code and then I'm going to open up my my website folder in here Which is already open which pretty much stores all the files that are needed by my website to run smoothly cool What I want to do next is I'm going to go ahead and go through the few things that are going on at the moment so my app.py file is pretty much the main file that my Server runs as soon as the server is started and the app.app underscore blueprint file stores pretty much all the roots and has a little temporary temporary Data structure like an array which stores different products in it now if you guys haven't already watched the first three of First four tutorials actually if you haven't watched those I recommend go ahead and watching those first as they're going to be linked in the Description because these tutorials are linked together. So it will make a lot more sense if you watch those first now if you only want to learn about how to use inheritance of a parent and child class and using a block concept and you can carry on watching Now you may say what do I mean by using a parent and child? Concept and using blocks So what what you want to do is? Encoding usually the rule of thumb is if in our templates folder. Let's open all the files, right? So in coding the rule of thumb usually is if something is repeating you need to make sure that it is Not repeated and just extracted from one place and placed here. So for example This code dot type htmo head body body and end htmo This code is repeating in every file. So as you see this code is very repetitive So what we could do instead is in our templates folder. We could create a new file So I'm going to go in my templates folder right here create a new file and I'm going to call this layout dot htmo Now in our layout dot htmo We can program this as a parent class which all our child classes which Means other files such as about contact and index dot htmo would use or inherit So in this htmo document we could include the structure which is needed by all files Which means we need to include the doc type htmo head body and end htmo and in the other files We can just include the content for the specific page now. This can be done using It's something that is known as a block So what you want to do in your layout dot htmo page is you want to code up the structure that is going to be used By all the files, so I'm going to do doc type I'm going to start an htmo opening tag and then in here I'm going to do a head tag and then I'm going to do a body tag Now this is the structure that pretty much all our files are going to have and since it is in common We don't want it repeating. That's why we're going to use only this layout htmo file To inherit this into the other files that we have going so to do this What we want to know is that where the content is going to be replaced? So obviously in a head tag each Each of these files is pretty much going to have a title, right? So in a head tag, we want to have a section for a title So we're going to create a block which will be replaced by the value of the title by each individual htmo document that inherits this so I'm going to do curly braces and then To add a code block. I'm going to do percentage signs and in the middle I'm going to say block because we are creating a block and then I'm going to call this Block title because this block is going to be used for title Now we need to also specify when this block is going to end so I'm going to end block and block and Now I'm going to specify which Block I am ending which is title block that I'm ending right here So what this means is this block called title can be replaced with any data We need from our child class now. Let me explain how that will work in a second So since we have our title block ready, let's go ahead and create a block in our body tag as well Since all of the data from our respective files would be different. That's why we need a block here step so that this can be replaced so block Content let's call this because it's going to be the content of the website And I'm going to paste that again, and I'm going to do block end. I mean end block Content so now that that's done this Layout.html file is pretty much complete now What we want to do to inherit these details into our other files is Import it into our other files. So we can do this by going on to our other file or so I'm going to start with My let's just start with about.html. So let's start with about.html And I'm going to start by going ahead and deleting all the stuff that is already in the layout.html So I've got the basic information already in my layout.html So I don't really need it repeating now. Let's get rid of that and now this is technically all the information I really need for this to be working now at the start of the document on line one what you want to do is specify where your Parent class is so create a code block and then specify where your code block is by typing in extends Which means it's going to extend its parent class and then type in the name of the parent class Which is for me layout.html. Now since they're in the same directory They should have no problems finding the layout.html file cool So this line right here specifies what the parent class is So it's going to this code right here is going to go ahead in this file and pretty much inherit all of this So it's going to take all of this and chuck it in here now You might say we want to place this title in the head section and obviously we want to paste the other content inside The body section so that's why we added blocks So the block title would be replaced by any block title content in here and the block Content would be replaced by any block content in here So I'll show you what I mean. Let me quickly go ahead and add a code block I'm going to type in block block title and then percentage sign and then obviously this is all that's going to be stored in our title or in the head section so and block title So what I'm saying right here is the title right here is going to be taken from here And then it's going to be placed in our head section because our title is between these head tags So it's going to take anything that's placed between these title block tags And then chuck all the information in here Cool, so now we can do the same for our body as well So for the body content we create a different code block. So we're going to do We're going to use block Content because that already exists and it's in our body tags and then we need to end it wherever the content ends So I'm going to go ahead and do end block for content Cool. Now if you did everything correctly There's the website on the about the HTML page should function just like before But without this information in there because it's already inheriting these details from our layout HTML So it's inheriting all its basic information from the layout HTML Cool, so I'm going to pretty much just indent this properly save this up And now I'm going to go ahead and open up our flask server. So cmd Let me zoom in here a bit for you guys to See easily so cd desktop So I'm typing today cd desktop and let's say My website because that's where my flask app is now. We'll do set flask Debug equals one because I want it to be able to debug and not just crash And we'll do flask run Cool now. I'm going to go ahead and open up a chrome window So I can show you guys what my website looks like so localhost 5000 and We have a connection as you see right here. We have a pretty basic store going so a concept of a store And in the last tutorial, we also learned about how to use conditional so pretty much show relevant information on specific items so I'm going to go ahead and navigate to my about page by tapping in about and We have an error. It says unexpected Unexpected and Okay, let's go ahead and see maybe we've got an extra Extra something Seems to be correct. Let's go ahead and see the layout To seems to be correct as well. Let's go into was complaining about the app top blueprint file. Oh, I see right now, she To about Cool, so seems to be fine and block title Let me see and that is in which file That is in layout or HTML Let's go back to our layout or HTML. Okay, so we're missing a percentage sign here my bad And I'm going to go ahead and make sure my server is running what it is and I'm going to go ahead and refresh this page Good let's just make sure the server is running again. Okay, and there we go so as you see right here, our code is working fine and That's because it's inheriting all the details from its templates So the top section says about as a title and the body section has the information needed too So we can inspect to confirm this because in our head tag as you see we have about the HTML and in our body tag We pretty much have all the content with that we needed to have So what we want to do next is pretty much use this for use this single template or this layout HTML in all of our files. We've only used it in about the HTML so far So I'm going to go ahead in my contact page. Get rid of this Get rid of this Not all of that get rid of this this this and this and then in here we're going to replace that with Our first code block which is going to be extends layout.html so that it knows where its parent class is then we're going to grab the Title so that we can chuck the title in there. Let's go ahead and indent this Then we can just copy this line paste it down here and we're going to do end block Then we're going to go ahead and copy the block for the content paste it down here We can just indent this too and then we're going to do another end block for our content Cool, so let's test that our contact page is working now as well So I'm going to go ahead and change this to contact and as you see it is working just fine So if I inspect it's pretty much inheriting all the basic information about the layout From the layout.html and the rest of the information is being gathered from the relevant contact.html page Let's go ahead and finish off the last files Just so that the entire website is uniform and just working fine So it's the last page index.html. So go ahead and Go ahead and delete the stuff that I don't need. So let's get rid of this. Let's get rid of this And let's get rid of this Let's go ahead and copy some stuff So extends layout.html to specify once again where to get its parents class from or parent class from Block title is going to be here. Then we're going to copy this and paste it down here and see end block And we're going to cut this in paste it in here Bish bash whoosh We're going to indent this properly so that it looks nice We're going to copy the block for content Paste it right here Then we're going to copy this and create an end block as well So end block for the content now. Let me check that my index.html page is working fine And as you see right here, it is working just fine And this page was a bit more complex because it had a loop and images as well So even with the loop and images and a bit more complex code than the other pages This is working just fine. So now this is good practice Because if I wanted to make a change So for example, if I wanted to add some bootstrap code to this I do not have to go to the head section in my individual files So I don't have to go into every template file that I have I can go ahead in my layout.html and add the bootstrap in my layout.html And then it will pretty much import this Code for the bootstrap that I've got in here to link bootstrap And then it will put it in pretty much all the child files that it has Which is pretty much all the templates apart from layout.html So that's the good practice as well as being able to change this main template as at any given time And then being able to have all those changes applied to all the child files Without having to go to them individually So that's it for today's tutorial guys. Hope you have enjoyed and learned something new If you guys have enjoyed this tutorial Please make sure to drop a rating on it, like, comment, subscribe and share because that really helps out If you guys would like to donate to the channel directly You can do so by signing up as a patron using the Patreon link in the description Or you can simply purchase a super chat emoji or highlighted message when this video premieres If you guys would like to check out my socials or join the discord channel for a bit of fun You can do that using the links in the description and guys I will see you beautiful faces in the next tutorial. Peace