 Hello, this is Christian. And this week, we're going to dive into Unit 7. This is part two of the Flask application development. So now you know how to create a simple Flask application. We're gonna do a little bit more. We're gonna build another Flask application. And this will be the similar one that you created using the Node.js Express in one of the units before, okay? So I have here the Unit 7 data. You should download this from Blackboard. Once you unzip that folder, and in this file, you're gonna see three files or folders. Okay, so the providers here is just a JSON data file. If you open this file, you're gonna see just plain JSON data, okay? So it has that information about the company. I removed some of the information about the company. So we just have like five fields, and it's gonna be a hundred records here, I think, or around there or so. Okay, so we use that to populate the form, and we're gonna also use the templates in here. I provided all the templates already, so we don't have to spend time doing that. We'll be working mostly on the providers here. We have two forms. We'll do the list first, and then next time we'll do the add form. Why should we do the add in the list form for this assignment, okay? So that's available. And then there's another one called static. These are just some bootstraps and CSS files just used for styling the forms, okay? So make sure you download and extract this first. We're gonna add this to the program. So I'll leave that open right here for now. And then I'm gonna go and create my unit seven in here. This will be my unit seven project folder. You can call it unit seven apply, or what are we gonna call it, okay? So I'm gonna go in here and I'm just do some shortcuts here. So go to CMD, load the command terminal, and then type code space dot and press enter. And that should load the, where is it at? That should load this Visual Studio Co-Oplication. It will start here, okay? But before I do this though, let me see. I need to, yeah. So make sure you're in this program now. And then we wanna go into the terminal. So again, press Ctrl J shortcut. And you should be in unit seven or the project folder. If you're not, just make sure you navigate to that location. Okay, so the first thing we wanna do is we want to create the virtual environment for Python to work with or for Flask to work with. So we wanna do and type in the Python dash M for module and then the V and V and then V and V again. So we're creating a virtual environment, a virtual environment folder. This is similar to the no modules and no JS allocation. So as you can see, it's really quick. We have a folder here now. Okay, so this is the root directory of our project. So it should be in the V and V folder, where it resides. And then next thing is you want to go ahead and activate the environment. So you wanna go and type in V, E and V and you just hit the tab key and it should grab that for you. Inside the V and V, there's a folder called script. So again, you just type in S, hit Tab and then A for activate and then hit Enter. And now you should be in the environment. By looking at this one here, you see it's this little green thing here. It shows you that you are in that environment. Yours may not be green, but it doesn't matter, okay? So it must always be in this environment to build applications for Flask. So now we are going to create a install Flask to the program. Okay, so that's the next thing we're gonna do. So let me clear this. So just do a pip install and then Flask hit Enter. And that's gonna install it for you. Should be fairly quick. It's just a small micro framework. All right, so here we go. We got that. Nothing's here, but it's inside of every folder you're gonna see inside a library. You'll see that Flask is now here, okay? So now the next thing we're gonna do is we're going to create the main entry file to the program. So I'm gonna go over here in the left column and just right click or click this little plus sign here and we'll call it main.py. And small, I hope you can see it. Okay, so this is the main file. We'll leave it blank for now. We'll come back later after we create some other information. The next thing we're gonna do is we want to create a environment file called dot Flask ENV, okay? So inside this file, we're going to just include two statements, all cast Flask underscore ENV for environment. And we want to set it to development environment. We want to do that because we're just developing. So once you ready to go live, you wanna change that to production or you want to remove that out completely. And also I want to type in Flask underscore app. This is the link or the reference to the main application. File hours is called main.py, right? So main.py. So this file is gonna point to this main file if you call it something else and it should be named that, okay? So that is good, say that. And then you can close this file now. So the next thing I wanna do is we want to install a module called python.env. And that file where that module will load will look inside this Flask ENV and run application from here. And not only that, it will also manage the state application while it's running live. So it's this very similar to the known monitor or known mon and Node.js. So again, down here we're gonna go pip install and it's called python-dotenv, okay? And then just hit enter. And that should install that for us very quickly. So we're good there. Right, next we're going to create a folder to store all the source code and other application, other framework that might use SRC for source. But for us it's commonly known as app. So we're gonna create a folder called app. Okay, so inside the app folder here, there's nothing here yet. Now the next thing we wanna create inside here is a special file with the under underscore. So if you make sure you select this folder here, click here at a file, let's go underscore underscore init and the underscore underscore dot pi, okay? This is a special file that signifies that this folder called app is a Python module. It's very common. You will see that in most of the folders. So if you go in here, you're gonna see in here too is somewhere like go to library. You're gonna see that somewhere here you have, you can see this one here. If you go here, you're gonna see this one here as well, okay? So this is just a way to tell Python that this is a module and then when you access the data here, you can just access the folder name without the under init name. So this is like one of the, I guess, magic files, okay? So what can I have in here is we're going to include the following. I wanna say if I'm gonna import a flask from the flask, from the flask framework, I'm gonna import flask. I can only ask, did you say it's a class? We're gonna use that class to instead change object called app. So here we should say flask and then it's a constructor. We pass in here the underscore is two underscore, okay? Under under name, under under, okay? It just means that this file, this load this file as the main entry file. And then finally down here, we're gonna also import from the app. You see this a little bit differently, a little bit weird how it's done here. It's like, it cycles through the whole thing, but you're gonna import a file or a module called routes, okay? So we're gonna create that in a minute. So that is the init actualization for this. So save your file, this app. And then now, since we created the application already, we have an object called app. So we need to import that into the main program. So go here, the main program, and then we are ready to now import from the app. Yeah, app, import app. It's the same name, right? The first app here is the folder and then the app here is the actual object name, which is we call it app. So if you call it application or something, right? Like this, A-A-P-P, then this could be called A-A-P-P. And this is the object name, okay? Folder name, object name, or whatever you would call it, object, classes, functions. It's over here. So that's it for this file. You can close the main file, save it and close that. You can also close this. We're not gonna add anything more until much later if you wanna go into like databases and all those stuff. So we'll leave this as is and this is pretty good for now, okay? So now we can then go ahead and create a file inside the app folder in the same place in here. So create the file, we call it routes. So add a new file, we'll call this one here, routes.py. So this routes.py contains mostly all the code to run the application. Of course, you can build out and move some of these code to another file and put it back and of course, once it gets really big, but absolutely tiny. So we're just gonna do everything here, okay? So the first thing we wanna do is we go into create or import from the app and then import app again, right? Looks a little bit weird, but usually that's what you do. And then the next thing we wanna do is we wanna create a route in here. So it's the app symbol, call it app.route. And then this takes, as you can see, a couple of parameters. The first one here is just the name of the route or the pattern. It's the backslash, that is the home directory. So we'll leave it at that. And then the app symbol, that app here, this is called a decorator. Okay, we decorate the following function and to do certain things. So inside here, we're gonna call it function call index. What do you call it home? What do you wanna call it? Usually call it index here. And then we just wanna say return the word hello, okay? We're just testing to make sure it works, right? So say this file and then now we're gonna run and test and see if this works. I'm gonna close this init file here. Okay, so in the terminal, make sure again, you're always in the virtual environment and we're gonna type in flask. Okay, if it's all successful, you're gonna see here that you're in a development environment, the debug is on and the URL is at this link. So I'm gonna copy this. You can also hold down control, click and load that into the browser. But I'm gonna go ahead and just copy that and load to the browser over here and put in URL. At 4500, you're gonna see really tiny messages in Hello Flask, okay? So that means we are good to go, we are ready to go on to the next step, right? So now we go into, I'm gonna just move this out and go back in here. As you can see, you can leave this running if you want, you can close it up for now, you can add another one but I'm gonna just exit out and that's the running by the way. So the next thing I wanna do is we're gonna go and add those folder I showed you earlier. So if you go back to your folder, which is the unit seven data, this is the one, okay, remember this one here. So we're gonna add these three data to our file. And the one you wanna get is, this should be the one that says, let's see, yeah, the static template. Yeah, all of these will go inside the app folder, okay? So just make sure you drag inside the app folder here. I can just do, and I'll move things around later, but for now, we're gonna move all these inside the app folder. So right in here, make sure it's in the app folder and now they're here, okay? So we have the static data here, static folder, the templates, as you can see, it has all these templates, it's just HTML. This looks very similar to exactly the one that we created for the Node.js Express. And then there are two folders, two files for the providers, okay? So this is the list, we're gonna complete this part here. And then this is the add form, again, all the fields already filled in for you, just to make things move it faster. So, and then the JSON file, which is this provider JSON here. So what I'm gonna do is, I'm not gonna use this just as is, okay? I'll leave it here, but I'm gonna create another folder and we call it model, okay? You can put it inside the app folder, which is fine, or you can put it outside the unit seven, that's okay too, either way, how are you gonna do it? So let's say that I put outside the unit seven, or out here in the global space, okay? Just to show you flexibility. So I'm gonna add a folder here, I call it models, okay? And I'm gonna move this provider's JSON into the folder here and just say yes. Okay, so now inside the models module folder here, I will come back and do later, okay? So this is a folder, so again, we'll create something similar to the init file, but we'll do that later. Okay, for now, let's go back to your route. And as you can see now, we just display some data to the browser using HTML, we'll be using plain text. So what I wanna do is we want to load using, you know, the templates, right? So we're gonna go and update this using the template, and that means we're gonna call from import from Plask a function called render render template. So up here, let's say from Plask import the render template. This is the one we need to render the template. So instead of returning hello here, I'm gonna comment this out and I'm gonna load in here, return, and then the render template. And then I pass to this template, usually two things. The first thing here, the first argument is the name of the template. And so it's our template, it's inside of templates folders. Okay, so you must have the templates folder and the app folder here so that Flask would know where it is calling that from. So it would start from the templates folder if your name is something else, it's not gonna find it. So in here, the first argument is the name of the file. And ours is called, so if you look in here, we have a couple of files. Let me go over this a little bit here. So we're not gonna use a lot of these just for demonstration purposes. But if you look at the layout template here, this template is the root template. Okay, it's called layout. You can call it like root, if you want, or home template doesn't matter. And this is the root template, or the layout template. At the top here, I already put some code in here just to say that if the title is included, then show the title of the title name, otherwise show the default name of this app. Okay, and then it has some links to some of these static files. You can see here static. And it's coming from the root bootstrap render. That means that there's a folder called static. It will look inside the static folder and it's at the bootstrap. And then it goes from here and loads some bootstrap CSS. Okay, so that's all set up for you. So, you know, we have time, go over there and look at this and see how this is structured. Okay, so that's all your CSS here. Now this is the body of the HTML from line 33 all the way down to line 61 is the navigation. So let me collapse this, you can see. And then here is the footer down here, collapse that and then red load the footer against some scripts that are coming from the static folder inside the bootstrap again. So these are just used for the bootstrap. Now, in between here, you're gonna see a block content. This is ginger syntax, wait, okay. So it's a special tag to tell the ginger template that this is where we're gonna inject all the content using this template. So if you're familiar with, you know, like especially ASP.net, I look just like that. This is like the master file or the master site, right? And then in here, you have a content placeholder to load the content to this area, exactly same idea. Okay, so every page you're gonna use, this is gonna be used as the layout. The things that are different are the things that are injected into this content. So this is a placeholder, okay. And here, our main page is indexed. So I named it exactly as it is, it's called indexed. This index HTML is gonna be the home page, the landing page. As you can see here, it just contains the header and then some stuff in here, really, really simple stuff. I didn't include any, you know, major information here, but this is for the landing page. So what we're gonna do is that we're going to modify this just a little bit and I'll show you why in a minute, but before I do that, let's go back to leave this open and go through the routes here and we're gonna render the index, okay, the whole name. And I'm gonna pass to the index, you know, the title. Title will be, you can call it, I don't know, home page or something, okay. It doesn't want to embed it, we call it. So this title exists in the way it should replace what we showed earlier. Okay, so this is the name of the template. Make sure it's a valid HTML file with the extension everything. Okay, so now let's save this file and if your application is still running, just go to the browser and refresh the page, okay. You can see that it's loading something, right? Except the only thing is that it's not style because we did not include the main layout, right? So if you do the source view, you're gonna see this is exactly what you saw in the template, okay. So now we're going to include this inside the template and to do that, let's go back. So in the templates here, you want to include the other stuff, right? So you want this to be part of the content and so on. So the way to do this is that inside this template, you want to include the layout template and you do that by adding the very top, a flag that says, let me remember, extends, so you're extending or including the layout, okay. So layout.html, so again, this is very similar to many programs like if you think about ASP.net, this is like I'm loading the master page, okay. Same idea. And then here, this is what the block content goes for, again, block and then space content, right? Very similar to ASP.net. This is the content, it's gonna be injected into the content area, right? That's what it means. And then make sure down here, I close the content down here. So I'll say and block, the block here. So very straight, very standard. So all your templates should have this, okay. So you're including the master page or the layout page inside the master page. There is a block content inside the block content, matching this block content here, okay. So in there, inject this information, right? That's what it just means. So while we're here, I'm gonna go and copy this and go to all these HTML page and add it to the top and then make sure I do all of them and we're just gonna, we'll fix it later, but later. We'll continue on next. Okay, so forget password. Again, some of these are, we're not gonna use it, but I'm just putting it anyway. So if you have time, you want to explore and finish this up, you can do that, okay. So that's that. And then the bottom, we'll make sure we close it. So on the right bottom, let's again type in block. No, yeah. Make sure you spell it correctly and then close it with a curly, okay. So if you don't do that, it's not gonna work. I'm gonna copy this and then add it to every other file. So if you finish that, I can close that one. The next one down here, save that, next one. Okay, save that and then save that one. This is the next one. Okay, so index is good and then now we're done. So let's go back to the browser and refresh and we'll see what that looks like. Okay, wasn't there about static instead. Okay, all right. So I have a problem here probably due to the routing. Let's go back and fix it. If you wanna know what's going on, if you have this kind of error, write this blue bar, you click on it and it will tell you what's wrong. And usually it's down here at the bottom. It says you could not build the endpoint of about, okay. Did you mean the static instead? So it's just some clues to tell you. And so if you go back to the code and over here, so I'm loading the templates here, which is fine. I'm loading index page. I'm not sure why it's going the other place. Layout HTML all down here because I'm using a link about. So it does not know what this one is, okay. So before we run the app, let's go ahead and add another one to load this HTML because this link exists by doesn't know to find it. I think that's where it is. So why don't we go ahead and create another one. And I'm gonna copy this and put it right below here. And this will be the slash about. And then this will be, this changed the function to say about. And let me turn this off. And we're gonna just, the template will be just about. And then the title will be about for now, okay. Just really simple like that. And then that should be, maybe that will take care of the problem. So let's see, save this. And then go to the page again and refresh. Okay, all right. So I'm not sure why this problem here, probably this, those templates again, maybe our templates are not working the way it should. Okay, so I think it's the same thing, right? Because I provided some links already in the template. So why don't we go ahead and build all those first? Okay, so you stop crashing. Because I'm loading the about page. And if you go to the about page, right? So this links to the providers, that means that I have to have the providers available if I go to the providers and it's gonna keep going, okay? So let's go and add some of these other routes. Let's finish all of them while we're here. Go here and then go and put here. This will be, what does it be? See contact, let's go contact first. Contact, copy this, make it quick. Contact, contact, and then the contact. Okay, so again, I'll copy this, put the next one. And we'll call this is the register. Again, we're not gonna implement these, but we'll create these anyway. One more, show me more, I have one for the providers. Maybe just like the login, I do one more down here. So this is the login, and this is the providers. Okay, so we have those URLs and I'll put here to function will be the same as this. Let's come back in a minute here, login, register. Okay, so let's make this a little bit nicer. Okay, providers here, I'll call it service providers. Now, our providers template is not, if you just do this, it's not gonna work because we named ours differently, right? It's inside the providers folder and then it's called providers list, okay? So in here you have to say providers slash providers dash list.html. It has to be that name or it wouldn't work, okay? And then we have one more way for the forget password. Again, just copy this, we'll put right below here. And we'll call it forget dash password. And since we cannot use dash for the function name, we'll call it forget underscore password. And here would be again the name of that template is forget password HTML and here you see, okay. Okay, I think that's pretty much everything, right? We'll see, we'll see what it tells us, okay? And then up here, notice I have a backslash. I can also add another route, you can stack this up. I also wanna say the backslash goes to the homepage or backslash index, okay? So both of those will take you to the homepage. So let's say this and let's go to the browser and see if the errors are fixed. Oh, there you go, okay. So if all those links are created properly, this is gonna be okay. If this is, that's is the slash. If I go here, the about page, the service provider, as you can see, it doesn't work yet because we did not include, I think we forgot to include the header and the content yet. And then the contact page, login, register. Great, so let's fix this provider's page. So again, back to the template here. I'm gonna copy this top, open the provider's list. We did not do this too here. So make sure we do both of these. And then we're gonna just wanna copy this. We're close at the end as well, bottom here. And then the bottom here as well. Okay, so save those and you can close these out. So now let's refresh one more time and see if that looks like, okay, perfect. So now when we add provider, we haven't created yet, we're gonna add it later. But now we're gonna go and update the data, the JSON data, and we're gonna populate this table here with this data, okay? So let's go back to the code and add those data. So now in the models folder, so what is something like we did earlier? Let me close this templates here. So any folder, I mean, you don't have to do this, but I'm gonna show you, this is the typical way to do it. Okay, so every folder that you have, you wanna turn that into a module. So again, create a file called under under and it under under that pie. Okay, what is this for? Well, we're gonna import the data file in here so that we can access directly from this folder. And I'll show you what that means in a minute. But first, let's create a file called not providers, but I'm gonna call it inside a models folder, okay? I'm gonna call it, we should call it a little bit confusing, but providers.py, okay? As opposed to the JSON and maybe you don't need the JSON anymore, but so is the pie. So in here, I'm going to create a function and we'll call it providers list. Okay, it's a function. And this function will return the JSON data. So I'm gonna copy the JSON data. So just copy everything here, control A, copy everything, go to the function here and just paste right in here. Okay, return all of that. That's all I'm saying, return the entire list. I'm using a function to return that, okay? So if it's not in the right places, let me show you, it's correct. Let me see, I want to indent this a little bit. Let's see, I want to fix it just a little bit. Just in case it doesn't crash my program. Remember indentation is pointing to Python. Let's see, that's it. Yeah, maybe that's fine. We'll give it a try, okay? If there's an error, we'll fix it. So again, save this file because this is a function called providers list. So when we go into the routes page, right? At the very top here, when we import the data, we usually would do something like this. So from the app that, no, actually from the models folder, right? And then inside the mouse folder, there's a file called providers.py. So it'll be that providers, okay? From that file, you want to import a function called provider list, okay? You can do it this way, which is fine, absolutely. So if you have a different name, like providers, you have users.py, you have, you know, whatever.py, you can go through the models folder this way. This is okay, but what I want to show you is that I don't need to go through the provider. I just want to do something like this, okay? In this case, if you're gonna do this way, then that's why the init file is used for. So that means I'm going to import it in here as opposed to in here, okay? So that I can just grab it and then load it very quickly. So in here, I'm gonna do from the models folder, even though it's itself as a models.providers, import the providers list, okay? So now, because this is imported, available in this init file, this module, then when I import from other locations, I just reference the folder name. I don't have to include that because it's already available, right? So to show you, if I go and remove and type providers, you'll see it's on the list, okay? So it's a little bit shorter. All right, so I import the list and then the next thing I wanna do is because, okay, this is a function, by the way, okay, this is a function and you have two options. Remember, this is a function. You can also create a, you can load the function over here. So if you just pass in a function over, which is fine, or you can do this too. It's up to you, lots of ways. So I can say providers is equal to providers list and you call the function, right? So it's a little confusing because providers, you can say providers data doesn't matter. So if I do it this way, I can then, you know, import this directly from here. Instead of say providers list, I can just load providers and that is the object. But you can see it's confusing, which one I'm using, right? This is the symbol, it just means it's a Python file. This is the data, this is a function, right? So confusing. So let's say that I'm gonna go back in here and call the same name. So it's not confusing. I don't know. Yeah, I'll let you decide, okay? So I have the same name, but then I'm calling the function to assign to that. Maybe not the best idea, but so again, I'll call the providers list. So now it's not a function anymore, it's the actual data, okay? So that's that. And so, and then down here in the providers list, I need then to load that providers list to the template. So I had the title, I can go over here, add another one. I'll call it the same, I call it providers is equal to providers list. Okay, so now I'm importing the entire list to the providers as an object. And I call that because I wanna access the providers to the providers object. Okay, so we save that. Now go to the providers list HTML and we're gonna complete that part in the body here, okay? So in here, we're going to load the data. So we call it providers. So in here, we're gonna call it loop. Let's do that first. It's gonna be a full loop. So in say for every provider and the providers list, right? Because we call it providers, this is the name that we pass to, we call it providers. Okay, if you call it X, it's gonna be X. And let me go and turn this off. All this stuff is confusing. So now in this list, okay, we're gonna, now we have access to each of those providers. And then the end, just forget, don't forget to close it, so it's a N4. So in here, we're gonna do the following, right? So I'm gonna create every TR and then, let me just move that up. And then here I have every TD, right? Then it's gonna match these like an ID, first name, last name, position, company. And then the action will be like delete and edit, just those two. So here, I will put the master tag inside here. It's gonna be the provider, okay, of the ID. Okay, I will reference that using the square brackets. It's like the key provider is an object, right? It's a product ID. And I'm gonna also style this using our scope it to say row. It's a row, okay. So you can duplicate this. Again, I think alt shift down a couple of times. The ID is the first name, last name, position, company and actions, okay? So the actions, of course, you're not gonna use this. And I'll leave that up for now because that's just some buttons. So the ID, this is gonna be the first name, okay? So make sure the name here, these properties have to match your data, right? So whatever you call here, has to be exactly this otherwise you won't find it, okay? So the first name, just the last name and then position, company. So that's those and then down here, we're gonna add just two links to do some operations. So this will be going to the URL called providers and we want to edit this, okay? So edit and we're gonna add the ID to this link, okay? We want to add that ID. So in the URL is gonna say provider slash edit slash whatever the ID is, right? For each of those links. And we want to also use the class called, this is a bootstrap class, it's gonna be a button. And we'll call it button secondary, it's like a secondary, it's like blue, right? Blue link and one, they're going to be a small, I said, yeah, why doesn't do that, they're wrapped, okay? Okay, so let me close this over here, give some room. So this is the link for the edit. I'm gonna just close that first and I'll call it edit, okay? And I'll duplicate this again, out shift down and this is gonna be the delete. So I'll put here delete, say my ID and then over here I'm gonna say delete, right? And we'll put from this operation later for now. So we'll see if this is correct. It should render all the data here to the browser, okay? So let's see, I think it looks good here. We'll see what happens. So let's go into the browser and refresh our page. So here we go, all right? So we got the data here, as you can see, all of them. And the button here, for some reason it's not blue. I probably missed something here. But anyway, so edit here, as you can see, it goes to edit and then has the ID. We go to implement that, implement this feature later. The delete as well goes to delete URL and then delete that ID. Okay, cool. Okay, so if you see this, really good. And we're gonna go ahead and do the add provider. So we click the add here, as you can see, it's gonna go to the providers slash add provider. And we're gonna load that form here. So we're gonna build a URL for this as well. I'm not sure why the color is not correct. I want to show like blue and red here. Maybe I, let's see, let's change that. I want the button to be like really red. So the, maybe not secondary, this will be like danger. Danger, I think danger is the red. Yeah, that's the red. And then button secondary should be like, I was hoping for blue, but I guess primary is blue. Secondary is gray. Okay, maybe that's what it is. So let's see if it's red. I want it to be red, like you're red. There we go. Just means danger, right? So there we go. Okay, perfect. All right, so let's go ahead and add this provider here. Okay, so we need this URL providers slash and an app provider. Okay, so you can copy this and then we're going to go to the code again. And this time we're going to go and add that to the bottom here, right? So we can go and add here and copy. I'll put it here for now if I don't forget. I'm going to copy this and put it right below here. And I'll add this into the pattern here. So this is the add provider. Okay, so now, so all of these are we just performing like, it's a getter, right? It's a get request. So we're just getting, so by default, you can access the data this way. But when you post form data to the server, then we need to add the second parameter here. Okay, this is where it gives you the ability to access form data. So if you don't include that, you're not going to be able to like load data. So in here is a second parameter called methods. And the methods are usually just those two, it's a list of those methods. And you see like the get here, the post, right? And mainly those two, the get post, because you're loading this from the browser. So if you do include this, you're not going to get the post. And because we want to submit the form data over, you want to submit through the post, okay? So you include that inside the route here. So the function will be providers underscore, well, should we call it providers add or, we just call it add is fine. Yeah, we can just call it add, it's okay. And I'll put here, so these would be like your APIs. Let me put this here, okay? Because we have the get, this is like the get API. It's like you get all, almost like that. And this would be like the post or add API, right? Okay, so in here, once you do the add, then we have to load the form. So the form is called provider add form. I think that's what's called, let's go back and see. Yeah, provider add form is singular. It's like provider's folder, okay? So make sure that there, we'll call it add a provider, right? Okay, app provider is fine. And so that looks good. Okay, so for now, I just want to test to see, make sure that the form is loading and then we'll go from there. So say that, go back to the browser and refresh. So having a problem here, URLs app provider probably didn't match. Let's go back and try to get. Okay, so it's not correctly with the slash. So maybe because of the slasher, okay, let's try because maybe it doesn't match our code here. So that provider, oh, the slash in the front, there we go. Very tricky, okay? Slash provider slash app provider, there we go. Now save it again, go back to the browser and refresh and wait a minute, is it this thing? Yeah, without the backslash, okay? So let's go back to the service provider. The link says, yeah, what the backslash we hear, right? You see that is important. So either we include that in the URL or don't include it. Okay, if you don't include it, then that means the link has to be fixed. So let's fix it without including that URL. So that means inside the provider's list HTML, the link that go to the provider, let's remove that slash, right? If you want to, you can include both, right? Like I mentioned earlier, just in case you might have that issue, you can go here and add two of those. Like this, right? Like that or like that, right? Again, that's okay. There's a different way to do this using the API, but for now, we're just gonna assume that it's gonna be just without the slash. Okay, so that looks good. Now, so the form did load and we're going to then fill out this information here if you try to click submit, right? It's already required. So you can't do that. If I do this, it clicks submit. As you can see, this for here, a at b.com. And if I load that, it's gonna go and call the ad form. And we don't want this up here, right? This is a get method, wanna go post, okay? So let's go fix our form and we are almost done. So back here and the provider's not list, but the ad form, okay. So everything is already filled in for us, which is great. We just need to add the form head up here. So it's called, let's call the action to go to the providers, which is the same page slash add provider, okay? We can leave it blank. It should load the same page, but I'll just do that just for safety reasons. And then the method, I want to go through the past, okay? So that's gonna go through the body of the submission. So we're not gonna see that, which is gonna be perfect. Okay, so save that. And then now when the data comes back, right? It will have the first name, last name, position, email and company. I have actually more than what I need a phone number. I don't think we need a phone number here, do we? Yeah, I don't need email and yeah, we don't have email and phone number. Our data doesn't have those. So if you go and see, yeah, just first, last ID, position and then company, okay? So we're gonna remove that email and add on the email and I don't need that phone number. So let's delete those two fields. Okay, so just be, you know, five fields. And notice I did not include the ID because I want to auto generate the ID using a random number, okay? So it would just be, you know, four fields here really. And yeah, so let's go back and take a look at it again. So let's reload this page. As you can see, just four fields, right? And then we're gonna do it again. And submit, so perfect, right? It goes to the same URL, but we did not capture that in the backend. So it's working perfectly fine. So now let's go and add our form. So I'm gonna close this, close this here, go through the route. When the data comes back, okay? It's gonna come back through the post. And so usually when it comes back, you can check to see if it's really coming up post or get. So by default, notice it loads the same URL, right? When I go to the app page, it's loaded in the same URL. When I submit data coming back, it's either coming through a get or through the post request. So when you load the form itself, it's automatically the get request. So however you, when you catch the data come back as they post, this is very similar to PHP, right? When you submit the form, you get from the post request as opposed to the get. So that means up here, I can check it. You say, if the request, now there's a request object, we need to include them here. Method is equal to post. If that is the case, then that means that this route or the form has been submitted, okay? Because we call it post. Otherwise, this will not match. So the request object, it's not available yet. So I need to pour that in from the flask. So at the very top here, oh, which you did already, which is great, right? Perfect. The request did not automatically import it. You have to import that here from the flask, okay? And that should be good for this part. So we're gonna go ahead and complete the rest. Okay, so perfect. So back down here, that means when the data comes back in the post, we're going to generate a random number and I'll call this ID is equal to a, we're gonna also import that. We'll see if it automatically imports it now, okay? It's through the random class, oops, random. And then a dot is a random int, okay? That's, it's going to randomize an int number. It will get a range from, let's just say anywhere between 1,000 and comma 9999, okay? So it's gonna match our ID, I mean our ID, right? So you can see that it has like a lot more, actually, but so yeah, six numbers, that's making it a little bit bigger between 100,000 and 999, yeah, six digits, one more. Okay, so yeah, it will randomize between 100,000 to 999, okay? So kind of match that. And let's see if random is important. If it's not, we can import that up here. So it's not, okay? So you have to import, just wait and import random because it will pull that from the library, perfect. So I got my ID and then the next thing is I'm going to build that provider, that new provider should look identical to this syntax here, okay? So you can copy this. This looks exactly like this in order to work. So over here, then I'm going to create, say a new provider, a call provider is equal to that object, right? And let me just indent this a little bit because it doesn't like the indentation here. Well, it looks something like that. And so the ID will be this ID here. So I put the ID here. Now the first name is gonna be coming from the request object dot form. And then it's a list of fields. So it's called first name, right? That's the first name field. And then you include that to every of those fields and they should match all those files. So I'm gonna go and do the same thing for the second one, copy that. And then just replace this. I'll copy this as well. Okay, so just copy that over. And this fields over here has to match the few in the form. Otherwise you're not gonna get the correct data. Okay, so once I got my data, this is the new provider and then I'm going to add this to this list over here, my new list, which is the provider's list. Okay, remember that in the models folder, we initialize it. We created a list from the function because the function here returns a list of objects. So therefore, all we have to do is we're gonna add to this list. And you add that by using a function co-append. So providers, this dot append, append the new provider. Okay, we're gonna add that to the provider. That is all. And I think that's it. And then once we're done, okay? So if this is the case, we're gonna go here in random number, build that new provider with the data from the form and then we're gonna push that or append that to the provider's list and then what, right? And if you don't do anything else, it's gonna go out of the if block and it's gonna load our same page again, right? So once we added the data, we want to go to a different page, okay? So initially we load this page. It's a get request, so it doesn't match this. So this will be ignored. We're gonna load the ad form. Once we submit it to the post, it goes inside here and then what, right? So usually after this, you want to return to a different page. So you do that by calling another function call redirect. And this redirect here will also need to import if it's not import automatically, which I think it may have already import up here. If it's not, you can import it from this flask as well. It's called redirect, okay? It will redirect the user to a different URL. So down here, we just basically give the link, right? The link of that URL. In our case, we want to redirect the user back to the provider's page. So we put here slash providers. If you wanted to take it, the user back to the whole page, you put slash index or just slash, right? So wherever you wanna take the user to, okay? I choose this because it's gonna go add to the provider's page and you're gonna see the new data there. So we'll see this works. So let's say that go to our page and now we're gonna just refresh it, make sure it's reloading. Let's go back here again, add, make sure it loads. Okay, so make sure that our data, if you can see has everything here. If it is updated, it should be at the very bottom of the list down here, okay? Because we're gonna append it to the end of the list. So I'll put my name. I'm the CEO of my company. Okay, so hit app provider. Just as you can see, it takes back to the provider's page and if it's correct, then it should be at the very bottom of the list. And here it is. Perfect, okay? So that's how you add data to the list. Now, of course, this is just a RAM, right? So it's not permanent data store. So usually you would add this to a database and then you would store that permanent data. So we just added some data here and it looks pretty good. So what's next? Oh, I think that's a skill for now. So next time we will continue on with this application. We're going to implement the edit and the delete features.