 Hello, this is Christian. Welcome. In this episode, we're going to focus on the controller. Before we go there, though, I just want to spend maybe a minute or two just to go over this NVC model. If you are already familiar with this, you can skip ahead. But here is the model that you might see in hundreds or thousands of times already about the NVC. I put here a diagram to show you also the relationship between the client and the server. So this gray bar line here represents the boundary between the client side and the server side. Now, the client side in this case is just basically the web browser. And then the server side is what is inside this blue box here. And then behind that you have another server, which is a data source, because this data source could be another database, which is in itself an almost separate server or it could be from another data source outside of this server. Of course, the NVC model here is a what I have here is I put it on the server side, but it doesn't have to be because I'm representing the Laravel model. So it's a server side framework, as I put it here. But really, this could also be on the front end as well. Like Angular, for example, is it's a NVC model on the client side only. So just focus on the model here as opposed to what the server and client side. Okay, so here are the three major components of the NVC model. We looked at the model already. We created a very simple model called projects, even though the project's data is not actually a database system source, it's still a model because we created a class called project that actually stores or represents the shape of our data. So that's pretty typical for that to be developed that way. And then we have the view. We created lots of views already. And the job of the view is really to render content to the browser. That's mainly its job. But you will see that there is a push and pull system going on between the model and the view here, where sometimes the model can actually push some data if there's a state change or some sort to the view to render. And then you can also do a pull of the model and use that as well. But usually its job is mainly just to render data. Okay, so over here, the controller. The controller is where all the logic happens. All the we call the actions, right? All the processing going on inside a controller. And then it will then either make some state change to your data source, if it requires it, or I may not require it, it doesn't really matter. And its job is also to select a view to render to the browser. Okay, so that's basically what a controller does. And so right now, we haven't created a controller yet. It's there. We haven't used it yet. All the code that we've been creating so far are actually inside the router file called web.php. So now we're going to move those out to the controller area so that I will code up more side loading to their own specific area. Okay, so we can, you know, maintain them easily. We can debug them easily. And also the file is not really loaded. So the router issue will be responsible for this routing information, routing process or request in this matter to the controller. The controller is responsible for, you know, do anything what's to do in the process here. And then it needs to select the correct view. And then the view is going to render that to the browser. Okay, so here we go again, we have the request coming in, and then the response going out. Okay, so let's go and see what we can do with our program. So again, make sure your app is running. All right. So I want to be sure that it's still running over here. Okay, so this is the view, right? And we're going to move these actions to a controller. So this one here is the portfolio page. I'll leave this as is, but we want to add a new project, right? I want to move that to the controller. And when we also do the edit, also want to move that to the controller and send the word that the lead as well. So all these current operations is going to be moved out to its own place. And we have a really simple projects here only. So usually we have a feature or a group of features on your website, you move those out into the own area, we call those controllers, right? So if you are familiar with the dot net ASP that net framework, you will see that this is very, very similar to that. Okay, so let's go and I'll leave this running over another terminal here. I'm going to use it. Okay. Now, if you go here, so notice in the routes, our web file, let me close it for now. You can see that it has a lot of, you know, actions here is called actions, by the way. And also these are routes, right? Routes, but they also perform actions. Actions are these, these are actions. And it's really, you know, we're messy, if you look at it, we're messy. It's really hard to find. I even had hard time looking for this as well. So this is not really clean. You want to move all these out into the own area. Okay, so here in the controller, which is found in the app folder, HTTP controllers, right? There is one file, which is the base class that all the controllers should extend. Right. So this we're not going to touch this file. But we're going to create a controller class in here. And usually by convention, we will use the name of the file called like, you know, user controller, main controller. In our case, I'll call it project controller. Okay, you can create the class about manually yourself, which is okay, but it's not recommended because there's a shortcut for that. Right. So if you go to the terminal over here, and the command terminal, we're going to use the PHP artisan command to create a controller. So PHP artisan, make colon controller, and then space will give the name of the controller. So ours will going to be called project controller. Okay, I want to show you this now as is, and I will show you another method. Okay, so hit enter. And it's going to create a class or file called project controller. You can see, open that up. It has this already had a force by default. So we just go ahead and add all the events in here. Okay, so you see this a blank control class, I showed you another one here, if you go and then do a very simple one, we call it maybe, you know, test controller, okay. And put a flag call dash dash resource, hit enter. Okay, now we have another file called test controller. But look what you see in here. Check this out. But you have an index action index will be like the homepage. You have a create. Okay, for adding new data, you have a store. It's kind of similar as store data. We have a show is a gap. Here is an edit for update. And also the update here same thing. One of the other one, this could be, you know, the actually for the post. This is the gap for the update. Okay, and then we have a destroy for delete. So you have actually what's called a crud operations already created for you in here, ready to go if you want to go in and use these same functions. Really neat. So ours will be kind of similar, except we call different name. Okay, so you can keep this and recreate the controller for the project control and do that, or we can manually do ourselves. Okay, so I'm going to do manual because we have already created the functions. And so I'm going to delete this when you're not too confusing myself. But I just want to show you that you can do that by generating that for you for us, because you know, it's very common when we do crud operations. Alright, so in the controller, what happens in here? What kind of events all these should be related to the project feature. Okay, so if you look at the web file over here. Okay, I'm going to move basically the add, delete, right, all the edit to edits here, and we'll figure out which one to use, maybe we'll change a little bit here. And the ad ad here as well. And then there's a. Yeah, that's it. This one here will leave it here because it's not it is a gap, but I'll leave it here for now. But you can also move that's fine. So let's let's go up here and do something here very quick. All right, so we get the, where's it at? Okay, let's move the ad here. Okay, ad here, as you can see, it's very simple. We can I'm going to copy this. Okay, for now. And let me do this way, you can see a little better. Okay, so I'm going to copy the ad and move over here. I will copy and clean it later. Okay, my ad the delete this one as well. We're over here. And then the edit here. It's another edit is the post by the way, but that's fine. Put it here. And then there is that's the post that's the update. And this is the ad as well. This is the ad but then we add some data. Yeah, then we just show the form, right? So the ad goes in here as well. And then I think that's, yeah, that's it. There's a delete somewhere. We already got it. Yeah, we're missing the delete. I probably missed it somewhere. Where is the delete? Okay, right here. So I need the delete as well. Oh, actually got it. Yeah, I missed I just right here. Okay. Alright, so over here. Now let's go and handle this first, right? And then close this for now. Okay, so we're going to create a function here called ad. Okay, and what you can do is you can do this. This too. Actually, yeah, a little bit different because the way I have it here will be a function. So I'll just put here a shortcut. If you end, okay, and hit tab, and just put here a tab over. This is going to be called an ad. And we don't need anything to go with the ad. So no parameters. And then whatever goes in here actually goes in between here. So this this is a little different here. So I'm going to basically return not this one, I use a return here. Okay, so return statement here or the function here. And it's going to return to the ad. And then the title will be just place that with this right here. And then I can remove this ad. Okay, so that is our ad feature, right? Now this is the get. So the get here, as you can see, it's only a function. So basically, we're going to remove this. Okay, replace that with the word public. And then the name of the function is called. What do we call? I could delete. Okay, so this is the delete one. So we put here function delete, need ID. And then we just remove the tool tags over here. And we're done. This is the delete function, as you can see. And then this one here is the edit. Okay, so the same thing, remove that replace with public. And it's function called edit. And this edit function returns the view only. So notice we did not use every question to edit here, right? This is coming from the form. This is just a get feature, right? Again, requests, which is basically rendered to the view. So we can change this to a different function. Maybe instead of edit, we'll say, we'll put a show edit form. I use a different function for that. All right. And then so that's all he does. Okay, so the next one here is the edit. So this is the actual edit. So you can use like edit. And then maybe this is called update, right? Like the one example we showed earlier, but it's not entirely up to you. I'll keep it just like that. And this one here will be, this is the edit. And it does take the request and ID. I think here stays the same. We just basically remove the last two characters here. Okay, so you can see, let me make this a little bit cleaner. And then here, this is the add. So again, this one here takes a request. It's coming from the data source as opposed to the first one, right? The first one here, we just basically show the ad form. So I want to change this to say, show add form instead, because we're not, you know, processing the form yet. And so down the bottom, then this is the actual add function. So I'm going to change this to say, and then we just remove the last two characters. And now we're done. So one problem here is the project, right? Remember, this project is coming from a model. So we need to import that in. And all you have to do is put muscle with that, control spacebar and select from add models. Once you do that, though, it does make some change in your variable industry, change it back to say project. And if you do that correctly at the very top, you're going to see that it's imported the app models project class for us to use it. Okay, perfect. So everything looks good here. No error or no moxie looks looks good. So save this file. Now we need to go and then over here handle the routes. Okay, so now we're not going to, you know, use this anymore. All we have to do is that when we come to this link, add, we're going to render that using the controller to handle it. And the syntax to do that is this. So this process stays the same. We're going to use a instead of a view, I'm going to change this to a gap. Okay, I get the add function. And this part here is not the controller part. Controller, you put into an array like this. And the name of the controller is called project or colon, colon class. Okay, so the first parameter is the class, the second is a string of the name of that action, we call it show add form. So really, this is the name of the function that will run when we navigate to this ad URL. Okay, the controller should have been being imported automatically, if it did not make sure you import that up here as well. All right, so that is going to be what I would, you know, roughly look like. Now I'm going to have and go ahead and duplicate this a few times. Just hold down here and copy old shift and then down arrow a couple of times. Edit, edit, delete, and a couple of those. Okay, so the delete is this thing right here. I'm going to copy this URL, make it and put it right here. Okay. Yeah, and then that it's going to go to a function called delete. So we got that. And I can close this, a comment, this stuff for now so I can see what's going on. All right, so we got that one there. The other one is the edit right here. This is the get. So it's going to be right here. And it's going to go to the show edit form. It would not processing is that it's a get request so that we can turn this off. And then this is the post for the edit. This one here is the actual data, right? So we need to go and then put here the same thing. This is going to go to the edit function. But then we want to change this to a post and not a get. Okay. And finally, this is the post for the add. And then the ad is going to go to just say add function. Right. So these are the crowd operations for that. And so now we can then, you know, let's move this to maybe the top or the bottom of this matter, I guess, maybe the move to the bottom because it's yeah, let's put it right above the get here. Okay, right here. And then I can turn this off. Well, this contact that's part of that controller, the ad here, I don't need it. I'm going to delete it. Okay, you just delete it. Don't need that one anymore. The edit, I don't need that anymore. The get and edit. So this can be deleted. Okay, so I think that's pretty much it. These are for the other ones, right? And these are the other ones as well. So you can see here that these five links are going to the controller called project controller. And if you save it now, if everything works correctly, it should still work. So let's give it a try. Right. We never know. Okay, so let's go into the browser and see what happens. If it crashes, it will let us know right away. So portfolio here looks okay, if I go to the ad project, as you can see, it works just fine. They go and do a edit. Right. Work just fine. And if I do a delete, it should still work just fine. Perfect. Okay. Now, how do I know if it's really working or not? Well, you saw we made some changes. So if I go back and change the ad to something else, let's say that in the ad here, if I put add with another D, right, if it doesn't work, it should not go here. And if you fail in the ad, if I go and, you know, refresh my page, go to add, as you can see, it failed. It's not found because, you know, it's not located. If I put another D here, you will see they come back up. Okay, so we know that it's working and working beautifully. Now, so this is okay. As you can see, we moved everything out already. And it's good as is. Okay, now I want to do one more thing here. We learned about prefix previous in one of the previous videos, where I want to change the URL to, you know, usually you call the API or something like that. But I wanted to show so that your will go to something like, you know, project slash projects slash ad project slash delete and so forth. So this is going to be the prefix. Okay, so remember to do that, we can group this together inside one particular prefix or a group, right? And we can do that by just, you know, creating a route, or a prefix, give it a name to prefix, I want to call it projects. Don't put any like any other character just like that. It will add the backslash automatically for us. And it's going to be called another function called group. And this group here takes a callback function. Then inside this color function is where we're going to move all of these in there. So just drag all these inside the group function. And then make sure you terminate that statements and fix a little bit. And now they are now prefixed with the projects for all these links here. Once we do this, the way to make some changes to our code. But I do want to show you that it should work like this. Okay. And it's pretty cool because, you know, I'll show you in a minute. So now if I go to portfolio here, if I try to go to the ad new project, you will see that now it's no longer worth because the URL says add. But if you type in the projects slash add, right, comes right back. So you can see I can group these actions under the project prefix. Okay. So that means the link needs to be modified. If you hover over that, on the bottom, you see it just says slash add, or it says slash project ads, and simply with an edit. So you can see that if I do edit, it's not going to find it because we changed the URL. And not only that, the logo here, it doesn't work anymore. Right. If you saw earlier that this is not working because of the URL here. And when you display images, I'll show you why you should use the URL or the the asset function to prevent this from happening. Okay, so let's go back and do some fixes. The first thing I want to do is I'm going to create a variable. Okay, right here. I'll call it prefix. Set it to projects. And then I'm going to replace this with the variable product prefix. And then also need this. And when I create a portfolio, I need to add that down here. So I'm going to add it as a third parameter here called prefix point to that variable. I need to use it. So in the function here, you have to put your use prefix. Okay, so now I can then use this prefix and the portfolio template. We go to the resources and the portfolio right here, open that. Now the add function, I mean, I think right here, it needs to say, right, project, I don't want to come here and do, you know, project like this. What if I change it in the future, right? I don't want that. So that's why I use the prefix. So therefore, put here, the prefix, if I change the prefix to something else, it automatically updates these. If I remove the prefix, change it to an empty statement or empty string, then I'll go back to what was before. So really, really useful. I'm going to copy this and do the same thing down here for the other two links, which is the edit and then the delete as well. Okay, so that's good here. Perfect, so save that. And then now I also want to do one thing for the edit as well. The edit here, even the add also. I'm going to add, remember, we take the action goes to the slash add, it's not going to find that. Right? So you can also do this with the prefix, but then you have to add the prefix to this page, right? So instead of doing this way, I'm going to the same add link anyway. So instead of doing this way, I'm going to do just really simple using the PHP, super global called server, and then call the PHP itself. I mean, it loads itself. Okay, so basically, that's what it does. I do the same thing with the edit as well. So go here. I think here it looks good. The edit form, same thing right here. Okay, so instead of edit here, I'm going to the same place. So let's put that inside here. And I'm including the ID also. So that means I can merge these together and just use the fact, right? And join them together. And it's going to say the current file, whatever that is, slash ID, very simple fix. Okay, looks good here. Let's see what that looks like. And let's go to the browser and make sure it still works. So let's refresh the page here. I go to the add. And there it is. Now, as you can see, the URL changes. If I look at the source view as well, you will see that the action is also changed to the correct place, right? index slash project slash add. Perfect. Okay, so if I add a new project, here, you know, to and, you know, my interactive page, and then HTTP web to calm, click submit. And boom, there it is, right there. Okay, now if I do the edit, if you notice on the bottom left, URL also changes to the edit by edit that, as you can see, it loads correctly. And if you look at the source review for the action, you will see that it changes to that rights project slash edit. And here's the ID for that. Okay, so see this correct, I'm going to go ahead and make it to project 24. And then hit submit. And there it is. Nope, we did not change that. So somehow we didn't process it correctly. Yeah, didn't update that. Okay, let's see if the delete works. So let's delete. And there it is. And let's delete them all. Let's make sure that it still does work. And boom, all right. So now if I go and clear, I'm going to do the clear, have to go to slash C. See here. Okay, everything comes back here. Okay, now one more thing I want to show you if you do the edit. Right, now that works fine because we find it. What if I change that 12345, not found, right? So everything is still good, just as is. Okay, so now let's see why the ad was not working. And I think we're pretty much done with this one here. So in the ad form, when we load the ad, it goes to the controller. And the ad comes in here. So the edit here, the ad. Okay. I think that looks okay. Oh, I mean, not the ad. I think it was the edit, right? The edit. Yeah, I think it looks fine. We didn't make any changes. It should not be here. Maybe it's in here somewhere. We'll see. I noticed something that when we look at the view, the source view over here, right on the edit, right? And the edit here you see right here, it's kind of small. The URL has, we duplicate the ID here twice. So it's not going to find that ID when we process it. It should just be the 644864 four year. And I know why that happens because I wasn't aware of it. But if you remember, like in the code here, when we do this, the PHP self here, that includes the part of the URL already, right? So I don't need to include the ID again. If I do that, I'm adding it twice. That's what happens. So I don't really need that just get this self. And whatever that URL is, it's going to take that same URL. Okay, so that I think that's the one issue was so save that. And let's go to the page again, and see if we can fix the issue. Alright, so let's close this, and load the page again, make it smaller. And let's edit the first one. Okay, looks good. So this is URL. If I do a source view again. Okay, so perfect. Now you see that the index is going to the right place and the edit ID number is correct. So now it should work. Okay, if I change it to personal side to and we just put here something like that, it doesn't really matter and submit. And there it is. Perfect. All right. So that is basically how you use controller to control your actions. So again, controller, these are called actions. Basically, just function that does the processing here. Remember, in the controller is responsible for fetching data, right, make changes to a state which we did make state changes. You can see right here, we do this, we make state changes, we save them, and we see responsible for selecting which view to render to the view. Okay, so that's done. Now, why don't you go ahead and see if you can create one to move all these functions, all these actions here to another controller, right? So maybe all of these can be grooving to a controller called main controller or home controller, it will perform all these actions so that it's not, you know, all residing this web file. And then you can move all of that out. So the only files that you have only function you have here are maybe the clear function and maybe the fallback function. The rest will be in the controller and you can use a prefix where you don't have to, but, you know, you can group something to look something like this. Now, here's the power of the prefix here. So notice the project is something like that. If I remove it back, it would just do that, right? Delete it and save it. Watch what happens when I go back to the page. If I go refresh the page here, notice if I go to the add, boom, you see that the URL is not going to change back to normal. And it should still work just fine. abc.test.htp.abc.com. Okay. And everything works beautifully just like before. I can edit it. I can, so you can see, you know, delete it and so forth. So very powerful feature. And that is what the prefix is used for. Okay, well, any questions, please put a comment or let me know. Otherwise, I will see you in the next video.