 Right, so hey guys and welcome to another flask tutorial today's tutorial We're gonna be learning how to pretty much serve up a static folder that exists in our directory and Also, we're gonna learn how to post content on our website Dynamically so in the last tutorial we learned about how to render out HTML templates But we only learned about how to render out kind of static templates So in this tutorial we're gonna be learning how to use Dynamic templates and pretty much grab information from the Python file and then serve it in our HTML file So first off what I'm gonna go ahead and do is open up visual studio code and then I'm going to open up the My website folder which pretty much stores all the files for my website and my web server So I'm gonna grab it and then drag it in here Cool, so now if you guys haven't already watched part one and part two of this tutorial It's gonna be linked in the description So I recommend you guys watch those short tutorials first because this is all linked and it will make more sense if you watch Those first if you already have a bit of knowledge about flask you can carry on watching this So first off what I'm gonna do is zoom in a bit so that it's easier for you guys to see Cool, so what we have going here is the app.py file which pretty much has the Blueprint to the different routes that we have on our web server and then we have a separate app.blueprint file or App underscore blueprint.py file, but which pretty much stores the different routes We have on our web server and then it stores the render function for rendering the different HTML files that we have So in the last tutorial that's what we did. We pretty much rendered static HTML files to the browser So what we're going to be doing today is first off we're going to be actually Creating a static folder Destination on our web server. So what do I mean by that? So technically what I mean is by default if I go ahead and run flask So I'm gonna go ahead and open up cmd. I'm going to go in my directory. So cd Desktop and my website and in here I'm gonna do set flask Underscore debug equals one now I'm setting this up because I don't want to keep refreshing the server every time I make a change to my app.py or any other related files If I enable debugging flask automatically detects those changes So what I'm gonna do next is type in flask run and Then it should pretty much start running the web server on the address right here So my local machine on port 5000 So I'm gonna open up Chrome and then I'm going to run my File or the link that I have and as you see We are greeted to our index.html page because that's the initial forward slash route So we have this So we're not gonna be obviously making the templates for the public because why would we want the users to view these files? In here because they are meant to be served according to the link that the user types into the URL bar So we're not going to be making this folder public This can stay private because that's private information only the server needs to know about So we're gonna go ahead and create another folder for okay. We're not gonna create the inside templates We're gonna be creating it in our main directory for my website And I'm gonna call this directory images So assuming that our website is gonna have different sort of images for our products because this is sort of like a store website That we're creating Just for the sake of this tutorial. So obviously products are gonna have images So we need an images folder where we store images of our products. So I'm gonna go ahead and Chrome and type in T shirt And then we'll just grab Let's just grab a t-shirt image from somewhere here So let's just go with Let's just go with this one for now. So I'm gonna go ahead. Okay. I can't really right-click there for some reason I'm gonna go ahead and save this image as and then I'm gonna go to my website and then the Directory that I just created which is called images and it's in my website So I'm gonna go ahead and save it over there And this extension is J FIF so you need to remember the extension of the image J FIF so JPEG So save that up and now that you're done You need to go back to your app.py file where you are initializing your flask object and you need to pass in an argument So the argument you're actually gonna pass in is called It's called comma gonna put a comma in there to pass an argument and the argument is going to be static folder Equals to and then the name and the directory of your folder So I'm going to go in my current directory by typing in dot forward slash That just means we're in our current directory and then I'm going to make the images folder available So now that I've done that as soon as the flask server restarts We need to specify what content we're looking for so the image we have in that folder is actually called images dot J FIF So if I actually go ahead and type in that we're able to see it But by default we wouldn't be able to see it now that we've made this folder available We are able to access the different files that are inside But if I just type in the name of the directory itself, nothing will show up because it's not allowed to show the contents of that directory It's only allowed to show the content if the name is directly accessed. So if I type in images dot J FIF which is the direct link to this image in that images folder That's the only time it's gonna work. Cool. So now that we've learned how to make a static folder available to Our clients. We're gonna go ahead and do is learn how to render out dynamic pages So I'm going to go back to my default page, which is the store right here So let's assume we have a section on this index.html page Which shows the user the most popular products that are being sold on the website And then it will show the user the name of the product the size of the product and then the price Since it's merchandise so clothing. So what I'm gonna do is go ahead into my app app underscore blueprint Dot pi file which is where all the routing is now obviously the routing for my index page is right here So this is where we're going to be dealing with the information But before that we're going to go ahead and create a quick variable Which is pretty much going to act as a dummy database, which is going to store the information about our products Now the information is going to be read from this variable. It's going to be a list type Which is going to store a dictionary of different product information So what we're going to do first is type in variables just to just so we know what's going on and then in there We're going to type in popular Products so we're going to create an array called popular products and in that array We're going to have a set of different dictionaries. So my first dictionary the name of the product is going to be Let's say Dear hand you do now T-shirt, so I'm going to make it really basic then maybe we have another another Key value pair in there called size Size where my size is going to be set small for this product and then another key value pair Which is going to include the price so price and the price is going to be Let's just say five for now now Also, we need to include an image link in here so that we can grab the image later So I'm going to do a key value pair for an image So the key is going to be called image and then the value is going to be the link to the image So the link to the image would be images folder and then what was the name of it again? It was images dot J F I F Now I'm going to set the same image that I downloaded for all of my products if you guys want different images You guys have to change this image Link that is specified in here So that's this whole dictionary that we've just created in our array is only for one product So that's for the product called your hand Godino t-shirt, which is a size small now I'm going to create two more products in here So I'm going to copy the first line and then paste it twice now make sure that you have commas in here because that's the separator for each Dictionary that is created in our array so it needs to have a comma as a separator now I'm going to keep the titles the same But I'm going to change the size on this one to medium and then I'm going to change the size on the last product to large and Then we're going to change the pride prices site slightly as well So I'll make this 10 because it's a medium bit expensive, but it's fine and then 15 because it's a large so we've pretty much got an Array going here called popular products and we've got dictionaries in there So each dictionary holds information about a specific product cool So now that we have a little database going what we're going to do is actually learn how to Grab this information and then render it out on our index.html page without having to physically type it in So first of what you want to do is where you're rendering the template you want to pass in a new argument and call it popular products and Then equals that to the variable or the list we just created which was called Popular products right here. So now whenever we run this index.html file This popular product array is going to be available to us in the index.html file. So in the actual index file the The popular product array that we've just created up here is going to be available And the name of that variable is set to popular products obviously Now you can change this to products or anything you like But I'm going to go with the name popular products because it's just relevant cool So now that we're done with that what I'm going to do is go ahead and my templates folder and then open up my Index.html file because that's the file that we're working on and it's going to be serving the different products that we have So if I open it up in here now as of now it only has your hand store and best merge in the game pretty cringe But that's fine. So I'm going to refresh. We have an error obviously because Okay, let's see what the error is. I'm going to go back to app.blueprint and Let's see what I say Okay, I don't think it has refreshed since the last time we've saved it So I'm going to go ahead and run it again Refresh, okay, so it is working fine. Cool. So this is what we have We just have your hand store and best merge in the game, which is a pretty static website Now we're going to be adding on the products that we saved in our Popular products array. We're going to be reading all the products from there and then adding them to this file right here Without typing it in manually So to do so what we're going to do is we're going to create a center tag first, which is not good practice But hey, it's not an HTML tutorial we're doing here So products and then this section is going to mark the product section So if I go ahead and refresh the page, I'll show you what I just did It's just created a product section right here now under this title product is going to be all the popular products Actually, let's just call this popular products Popular products and now what I'm going to do under there is going to be starting a loop So in this HTML file, we can actually run code There's going to be run by our flask engine. So the flask engine can interpret this code and pretty much Do dynamic stuff instead of just doing static stuff with it. So we're going to start a for loop So whenever we want to write code, we want to use curly braces and percentage sign One in the start one in the end and then you can write your code in there. So I'm going to write for product in popular Popular products now if you remember We if we go back to app dot blueprint we passed in this popular products argument right here Which is storing the popular products array, which is why we can access it in here We can access the popular products array because we passed it in there Now we don't use the normal format, which would have been using a colon We need to specify where this loop ends actually. So we need to create An end for this loop, which is why we're going to add another code block By doing curly braces and percentage signs in the start and end And then we're going to say end for which means end the for loop Now all the instructions that are going to be one inside the loop are going to be between the start for loop and the end for loop So I'm going to go ahead and create an h3 element in there Which is going to hold the product name. So I'm going to type in product name and then in here What we're going to be extracting is going to be the product name that we gather From our product object. So for each product object in our popular products array We're going to grab the name and display it in here. So whenever you're displaying a variable You need double curly braces in the start and double curly braces in the end And then you can specify the variable name. So I'm going to go with product dot name Obviously because product is the object we're accessing and then dot name is the name of the product So if I show you right here, we did that before dot name Is the name of the product dot size would be the size and then dot price would be the price and the image would be the image directory Cool. So we have gathered the product dot name. Now, let's save this up and refresh to see how we're doing So as I said before popular products, it says and now it's rendering pretty much all the product names from our list So it says product name johan gudino t-shirt and then it says it three times because we pretty much have three products in our popular product array Now obviously the names are the same Because we haven't changed them up. So let's go ahead and display the sizes and prices too So i'm going to for the prices Before we actually do prices actually we can show the image So it will be nice if we would show the image of the product after the product name So let's do image and set the source which of the image So we set the source of the image to product Dot img because dot img Means we're accessing the value of our Img key which pretty much is the directory to the image Cool. So if I go back here as you see dot img is the key and then that's the Link to the image so directory to the image. Let's save this and refresh to see if that works And as you see right here that works flawlessly as well Now all the images are the same because we've added the same image for all three products Now when this when it comes to size and prices It's going to show you different sizes and prices because each product has a different size and a different price So let's go ahead and do that. We're going to go ahead and display the size and the And the price so for this to display the size i'm going to do in a h4 And then i'm going to do double curly braces in the start and end because it's a variable That i'm trying to display and then i'm going to do product dot size because i want to display the size And then i'm going to go ahead and copy this and replace the h4 with a h5 because i want it to be a slight bit smaller than the h4 And then i'm going to do product dot price Cool And then after that our loop will successfully end because it's pretty much showing all the product details for each product that we have And our popular products are rated. So if i refresh this right now as you see right here It's his product name. Johan gidino t-shirt a nice little image small and then five pounds And then it says medium and 10 pounds large and then 15 pounds Now we need to add size and then price here so that it makes more sense So what we're going to do is add some static information. So instead of just showing the product size value, we're going to say Size and then whatever value is grabbed from our array and then we're going to say price And then whatever value is grabbed from our array and obviously we need a pound sign as well for it to make sense So if i refresh this now as you see right here As you see right here, we have our static element that we added which is size and colon And we have another static element price and Price colon and the pound sign. So as you see we have a decent looking or I wouldn't say decent looking but the hyper markup language version of a product store running So technically when you're doing this in a realistic scenario, you would have the data for all of these products in an actual MySQL database. We could do a tutorial on that in the future But for this tutorial, this should be fine because we're just using a temporary data structure where we're using an array to store different dictionaries of products So that was it for today's tutorial guys. Hope you have learned something new and you can Use this to implement your own websites instead of using a data structure like an array you can try using MySQL If you guys liked the video, please make sure to drop a like comment subscribe and share because sharing is quite important Um, I would like to thank you guys for all the support you guys have been showing me recently If you guys would like to support the channel directly, you can do so by signing up as a patron using the patreon link in the description If you do so, you're going to be quite lucky because i'm soon going to be posting a lot of exclusive videos on patreon Such as backend programming and backdoor using python as well So if you're interested sign up using the link in the description Also guys make sure to check out the discord channel and my socials in the description And I will see you beautiful faces in the next vlog tutorial. Peace