 Hello, this is Christian. This is video five of the Laravel project tutorial. In this video, we're going to look at how to create routes and Laravel. And these are the five major topics we'll cover in this video. We'll take a look at the basic routing, mainly the quad operations. You will not be creating or performing any operations in here. I'm just going to show you how to use them, how to create them, basically. And we'll look at the view routes, how to use the view function to generate a route, basically for a GET request. And I'll show you how to also redirect a route to a different URL. And most importantly, when you develop forms or path parameters to a route or URL, how do you do that? How do you reach previous data? And finally, we'll look at how to create route prefixes and how to use them in your program. Okay, so let's go ahead and get started. Now, in the IDE here, I do want to make a change. I did notice that in my previous video in the views, especially the contact view, I did not include the title. I accidentally deleted that. So I put that back there and make sure you fix that. I also added a class called contact to make it so that the buttons are in center. Okay, in addition to that, I added some images inside the CSS, I mean the public folder here. These are provided for you as well. If you want to access these layouts, they are available in the repository. If I go over here now, under this repository, all the layouts and the views are in here for your views. Okay, so let's go and run our application first. So back in here, go to the terminal. Make sure you go to the hello project. And then I'm going to a PHP artist on there. Now I'm going to go over something a little bit here, just in case if you run to some issues like with port conflict, things like that. Notice that the default port number is indeed 8,000. If you want to change that port, you can. And I'll show you how to do that just in case. But anyway, so here is the program is running right now. And I did change the contact form to have the word contact me here and also center my buttons right here. So that's what the, that's the difference here. Now, so back here here. So in the port number, I'm using for 8,000. If you want to change it, right? The quick way to do that is if I can, so now run my command here, you can add a flag here, dash dash port and set the equal to a port number of your choice. Okay, so when you run this application, it only runs that instance, okay? If you run it again, you have to create a new port or something, but that's another way. So let's say I want to change it to 9,000 instead. So when I do that, as you can see, it overrides to default 8,000 and it's now 9,000. I go back, try to refresh with it for 8,000. It's not going to work anymore until I change it to the 9,000, okay? So that is one way to do that. Another way you can do is it's more of a, I guess semi-permanent, let me close this again, is go and change the actual port number. I mean, I don't recommend it unless you really want to do that, but you probably don't want to do that. You can. If you go to the vendor, again, vendor and the framework, okay, the Laravel framework in here, under the SRC and the foundations, and under the, I think console, and there is a file called a server command or serve command, right? This serve command, this file, if you scroll down, you see that in line number 184 here, it has the port number is set to 8,000 and this is what the port number is, okay? And it's like really complicated. It's hidden really deep inside of here, the framework, but this is where you would change to a different number if you want to do that. Notice it reads the port number from the command terminal when you do a serve, right? It has a port 9,000 because it looks at the port number. If I don't include it, then it's going to use the 8,000. Otherwise, we use the port number, okay? So let's say I put here 10,000, okay? So that's the default port and go back to our terminal and run without the port flag. You should see that it would use 10,000 as opposed to 8,000, okay? So that's where you would change in here. Again, don't do it unless you really have to. So I'm going to revert it back to its default, which is 8,000 and close that and then rerun my command again down here. Okay, so we are now good to go and I can close this, but I'm going to create another one here just in case I use it later, right? So I'll close this both terminal, make sure my site is running back to 8,000 and we are now good to go. Okay, so the first thing is we want to create routes. Now let me collapse everything and reopen the whole thing here again. Your routes exist inside the routes folder under the web PHP file, okay? So these are the routes that we created earlier in the previous video. Now these are all the GET routes only, meaning that you only retrieve a GET request, right? So if you know the collaborations, that's what these are for. And so this is pretty straightforward. Now the route uses a GET function for the GET request. There is a POST and a GET POST delete put, okay, all those collaborations in here. So if you want to use it, just change it to the, like the POST would be used for, if you're using a form and you POST data to your database, then you will use the POST function, okay? The other would be delete. If you want to delete the data, then you need to send a delete function and calling it to like an API or some sort and you match the data here based on the DB request type. And the others are like put for updating your data. So just for that. And so forth, like a patch and the options as well. Okay, so we'll do those later. We'll do the collaborations, but basically that's how we do it. So route that GET, route that colon, colon put and so forth. Now I'm going to put back to GET. So for this video, we'll just focus on the GET because easier for us to understand. So you notice that it takes at least two parameters. The first is indeed the name of the URL or the pattern in string format. And the slash is always the root directory. This is about page if you will slash about directory, contact portfolio and so forth. Okay, so the second parameter is a callback function or a closure that usually or usually it should return something to the view, okay? So the return function here, I mean return here returns a view to the browser and the view function here takes at least two parameters. The first one here is actually they're more proud but the one that is usually more relevant is the index or the view here, the name of the view. This is the name of your blade view. I would just say blade because we want to use blade syntax. So that's the view instance set of resources, views and these are your templates, okay? Again, the name of the view only do not include the extension that that blade, that PHP or anything like that. If you do pass data to this view, then the second parameter is where you do that, okay? Usually you use it in an array like this, a key value pair or associated array. If you pass more than one data, right? If you just do one piece of data, then you can also do something like this instead of saying, you know, that you can use the width function and I can pass that too. But I will stick with this array, okay? What I meant was like, you could do this so I can do about and then here arrow and then we'll put here and see if this works with and then the width functions, you can see it takes the parameter here followed by the value and we'll see if this works. Okay, so it's only for like, you know, one parameter or some sort. I mean, this way or that way it doesn't matter. And if I say that, let me just do something here about me, what exclamation mark, just to make sure that it does work, okay? So go back to the browser and go to that about me and you see that it does work, all right? So I can use the width function or again, my recommendation is just to use the array here. Okay, all right. So now one thing you wanna do also is if you want to see all your routes whether they are created in this web file because later on when you create a lot of routes you tend to break them out, put into separate files and all over the place, right? And so how do you track all these routes? Now in the command terminal, if you go back in here using the other PowerShell command here, you can actually see a list of all your routes by typing the word PHP, artisan and route colon list. Okay, this will tell you here all the routes that this application is using. So you can see that there are some routes that are generated by the framework or some third party, like it tells you what type of route it is. As you can see both of these, this is a get, this is a post, get, post and you can see these are the ones that I create, right? Except, you know, the last one here. So if you wanna see what type it is, so for example, let's just say that I'm gonna change the about to a post and I'll change your contact to delete just so you can see, I'm not gonna do any operations here. Save the file, go back in here and run the command again and now you see that the about has been changed to a post, right? And then the delete, your contact has to change to delete, okay? If you do wanna see just the one that you create just your own, then you can also do that by following the same command, except over here, you want to list a flag to say dash, dash accept and then dash render. That will remove all the other routes that not created by you, okay? So now you can see these are all the routes that you create your own custom routes and there should be about, you know, five of them, including, you know, this gap is, so they have five, yeah. All right, so that's kind of useful. I wanna go back and change back to about, right? So now let's see how another way you can generate routes and reviews. So notice that when we, this is the typical way how to generate a route, a view, okay? Using the return function and the callback function, we turn that to the thing, to the view. You do this way because it's a function and maybe instead of function, you wanna perform some operations, right? So this is not a big deal. Maybe like in your portfolio, we do a get a certain user ID or something to search your database, we turn some data back. So you do some operations in here, okay? And then you would then include that in your view and so forth. If you don't do any operations, any special operations in here at all, then you can actually just render this view to the browser using a different method using what's called the view function here, okay? So let me go back and maybe we'll change this about here or for now, okay? So let's rewrite that one using a different method here. So this is called the view routes. So colon, colon, view function as opposed to the get. Okay, so the view here is usually always the get. It's a default to the get. That means you're gonna render some view to the browser only. So it's gonna take the URL of about and then over here, you just have to basically give the name of the view, which is in this case will be about it. If you pass any data, then that's the third parameter over here, then put a semicolon just to terminate that thing. And then the data will be the title here, right? So again, I'm gonna put, let me copy this, put it in here. And the title is about me. Remove that exclamation mark again. And then let me turn this off. Okay, so you can see that it's shorter. Okay, I don't have to use the function. I don't use the return statement of things like that. It just the URL, the name what you view and any parameter you need to pass to that view. Again, this optional, all right? So now if I save this and go back to the browser and go to the about page, you can see it's still work just fine. All right, so that's a shortcut. If you want to just render a view without doing any other operations, if you want to do operations, then you wanna use the call by function. Okay, so that's it for that one. The next one is let's do it redirect. Let's say that when I navigate to the contact page or I don't know, the maybe homepage here, okay? Let's go to the homepage and then I would then redirect to the about page, okay? So in here, you can call the redirect function as opposed to the view. So instead of saying return view, I would do a return and then redirect. So again, here it is simple. As you can see, it takes a string. The string is the view, which is the URL we're gonna pass to. In this case, it's gonna be the about page. And basically that's the minimum you will need. Now, because I have two return statements, this is not gonna run, okay? I will leave it here, but I'm just not gonna run. It's the first one, it will redirect. So that means when I go to the homepage, it's going to redirect this to the about page. So this is useful for redirecting to a different page. Let's say you have a new webpage or new content page of some sort and the URL has been changed. And if people still accessing your old URL, right? Because they still save that or favorite the URL, then you can redirect it to the new page and that's how you do it, okay? So let's save that and go back to the browser. And if I go to the homepage, you will see that it should take me back to the about page. So now I lost access to the homepage, basically, okay? So we can see and it takes me right to the about page. So that's what we're directing. And you can do more of that, just redirecting. I'm just giving you a very simple one where you just put the URL into the redirect. You can also use a named route and we will do that later, but that's enough for this one. Now the next one I'm gonna look at is, let me turn this off. I don't wanna go back to that route is parameters, okay? So let's say that I'm going to maybe the portfolio here. I like to, yeah, just for testing purposes. Okay, so let's say I want to include an ID or some sort, okay? So maybe the ID of my project, right? Because if you look at the, and we'll do later when we do the model, you can actually search for a particular project. So the way that parameter works is that right at the slash year, you can put in a variable, wrap inside a pair of curly braces like this and then name of the variable. Go to what you wanna call it. It's a valid variable name, like basically ID, okay? So notice I do not put a dollar sign like this, okay? So just the regular ID here. And then how you access this is you must pass this ID to the function here, okay? So you pass it as an ID. The name has to match with the dollar sign, in this case now. And the way I have here because ID is required, okay? As is these URLs required. So they're both required. That means if I don't include the ID or if I include data here, it's gonna fail, okay? And let's say I'm gonna pass ID to the project as well. So you put here the ID that maps to the ID field. Okay, what do I pass to? It's gonna pass here. And then I'm going to update my portfolio blade plate right here. And let's just put here a regular paragraph followed by the ID. So it's very simple. Save that. Now go back to the browser and refresh my portfolio. And you will see that now it fails because I did not include the ID. So again, the URL doesn't match anymore. So it fails. So in this case, I must include an ID, okay? Okay, so you can see that ID three has been, oops, let's see ID, oh, I missed type D in my code. So let's see, call it ID. Where did I put that the RID in here? Okay, so you can see that now it's required to include the ID and it's printed here. Now, if you give me anything, I could be anything like that, A, B, C, one, two, three, anything you put here will be accepted, all right? Now, what if you don't want to include ID but you still want to get there, right? So by doing that, you can do something what's called an optional parameter. And you can easily do that by pre-pending the ID here with the question mark, okay? The question mark here has been used sometimes as a safe operator, meaning that if it's not included, then it's optional. Now, the only caveat is that if you include an optional parameter, your ID must also be set to a default value. If you don't set default value, the ID here will, it will accept but it's gonna fail in here if I'm not mistaken. So let's say I say this and go back to the browser and just refresh the page here, okay? So you can see that it's not found because I did not have a default value of some sort, okay? So let's go back and fix that by including in here, ID is set to a default value. You can pull it in all if you want or set to a default value of one, two, three, what doesn't matter, okay? So now since no is not, I'm gonna pass this. So let's put here, I put zero, zero, zero, okay? Or just zero, doesn't matter. Maybe maybe 1,000 as my default. So then if I go back and refresh the page, so okay, something's not right. I think I put in the wrong place. Yeah, it's probably the wrong place, it's after. Sorry about that. So after and so here we go. So it's a thousand here, right? And that's the optional is optional parameter. So I don't have to include it. If I do include it, it's gonna override my thousand and then and so forth. You can do a lot more. I'm not gonna go into detail, but you can restrict so that your URL, this ID only accepts numbers, right? Or only characters or punctuation marks or the number of number you can have, right? Using regular expression. Again, refer to the documentation, look at rig X and they will help you to do all the stuff. Okay, okay, so that is pretty much it for this one here. You can have multiple parameters. I just put one here. I could do another one. Let's say ID and then slash, maybe, you know, I don't know, object, repeat and then here I just say that it's gonna take another ID here called year, okay? Like that, right? So I have two parameters. So therefore then I can include two parameter here as well. Again, I'll put default to 2022. That's the default year. And I'll pass that as well. So we can see that it's actually working and look for here. Okay, so I follow this pattern, okay? So the portfolio slash ID slash P and then slash year, P, I guess, project, I don't know. And then in my program here, I'm gonna put another one here, look at this and this would be the year. Okay, so let's go to the browser and again, make sure I match the pattern. If I don't do that, it's gonna fail, right? So it's not that one followed by the P followed by the year 2023 and boom, there it is. Okay, so you can have multiple parameters. You can do a lot more. I can generally make this as a random variable. I can only accept only like certain categories like P, Q, T, whatever, right? You can do that as well. Very flexible and Laravel and also quite powerful as well. Okay, so that's that. Now the last one I'll look at is the prefix. Now, what does it mean prefix? Okay, so, for example, let's say that, for example, let's say all your routes here, maybe you contact and the home page is okay, but let's say these three routes here belong to like admins or users, right? So I can prefix this with another URL called maybe I don't know what the users, okay? And then we'll put that here as well. Users here, user contact, user portfolio. So now my URL has been changed, right? And because they have been changed, my navigation no longer works, but I just wanna show it in a way. So we'll go over here, home page works fine. If I go to the about page, you will see I did not match the URL. It has to go to the user and then about, right? And then user contact, okay? So you can see that I grouped this into a user's group. So this is how you can generate unique URLs for any group you want, right? I did not create any directories and the code at all. I just basically name it what I want. So instead of doing this way, like in your code, I can group this together and under this user's group, okay? So you don't have to do this the whole time. And you can change it just one place and it can actually change everywhere else, which is pretty cool, okay? So how to do that is you can write a function, group this three together. So right out here, you gotta nest these groups inside another route called prefix. You give it a name, in this case it's called users, okay? And the user's there is going to point to a group function and this group function here takes a callback function like that. And then inside this callback function is where all these routes will live. So you move all these into the group function here, tab it over, it looks nice. So you can see that now there are group inside this group. So I don't need to use the users anymore. I'm gonna go back to just the about contact portfolio and because I'm using the prefix function, level of prefix all these routes using the users here, just like had before, okay? So that's, so this way I can change it in time of one. I wanna change it to students or products or whatever it is, just doing one place and everywhere else is changed automatically. So very powerful, very cool feature. So save that. And let's go back to the browser and run again and it should still work as you can see. Prefixes, okay, something's wrong with my code. I define prefix, let's try again. Probably didn't correct. Prefix group function looks good to me. Wonder why it's not letting me do it. I don't know, looks okay to me though. Let's see, oh, maybe I typed, oh yeah, right here. I'm missing the double colon, okay. So that should resolve it. Let's go back and try again. And then you will see that now it uses the user's prefix as opposed to just the about. If I click it again, that the about is not gonna work, okay? So that's another way to quickly create any prefixes. Now I promise this is the last one I forgot to mention is that I want to create a fallback route. A fallback route is a route where like if you go here, you have it not found, right? It's just gonna ugly, you know, give this message to the user. So instead of doing this way, you can create a route that will capture or catch all the other routes not in here, right? So I'm gonna go back and turn off this feature here. Now your fallback route must be at the very bottom of the page down here, okay? If you pull on the top, it's gonna capture everything and all the other routes will not get it. So you will use a route called fallback, just the name fallback, which is kind of nice. And you don't put any per hours in here, other than just a callback function. And this function here, basically you return a view. It's a return of view. What's the view called? I'll call it 404 because it is a 404 and I'll create a blade for that. And we'll put here the title as well. Kind of the same thing, and we'll create a view to make it a little bit nicer. So I'm gonna copy one of these, maybe the about one. Yeah, copy that one, control paste, and replace it with a 404.blade. Now, in the content here, I'm going to include a, but that would be the same. This is the same here. Message would be something like, you know, sorry, I fail to find what you are looking for. Please try again. Yeah, I already included an image I'm gonna use in here in the public folder, the cry emoji. So if you wanna, you know, add that in here, maybe right above here, I'll use a figure. People getting. So the image here, and it's coming from the images, crying emoji, okay, so, and that would put a kind of, I guess, a nice emoji on the side, so I'm gonna save this and go back to the browser and see what we have. So again, refresh, and there it is. No, this is okay. If we go to like, you know, ABC, right? So you can see my emojis not coming through, I probably mistyped this somewhere, but you can see that that's the message that's coming in and images, yeah, it's right. Not sure why it's not loading up, but crying emoji. Hmm, what's going on? All right, so it doesn't really like me today. Okay, PNG, okay, PNG. All right, let's see. Let's try again, and here we go. Okay, so in that center, you can make a nice, let's make a center and so forth. So that's what the fallback is for. Just make sure you put at the very bottom of your page, otherwise it's gonna capture that and it's gonna not gonna work for you. Okay, well, thanks for watching. In the next video, we'll look at the control of the model. Thanks, and I'll see you in the next video.