WEBVTT 00:00.650 --> 00:05.660 So the first thing that we need to build into the new project is routing. 00:05.870 --> 00:08.480 Can't really do anything without routes. 00:08.570 --> 00:14.810 So let's remind ourselves how we built the previous router in the contact form project. 00:15.290 --> 00:18.650 It was a simple file based routing. 00:18.680 --> 00:26.930 You just had to create a specific file with specific name and HTTP method, and you got a route. 00:27.380 --> 00:37.550 So we also had the dispatch method that converted the URIs into specific files that just needed to be 00:37.550 --> 00:40.220 placed inside the specific directory. 00:40.220 --> 00:41.480 That was everything. 00:41.510 --> 00:48.800 Now we'd like some maybe not more complex, but more universal solution. 00:49.400 --> 00:54.200 And we'd like to be more flexible in what routes we define. 00:54.230 --> 00:58.970 We'd also like to accept parameters as a part of a route. 00:59.000 --> 01:01.740 So first let me show you the diagram. 01:01.740 --> 01:06.270 Super simple diagram of what do we expect, what we would like to do. 01:06.270 --> 01:10.920 And we're gonna base that on the example. 01:11.400 --> 01:16.380 So this is an example route I'd like to be able to define. 01:16.980 --> 01:24.870 So for the HTTP method get I'd like a page that can display a specific blog post under slash or forward 01:24.870 --> 01:25.800 slash posts. 01:25.800 --> 01:27.360 Forward slash ID. 01:27.660 --> 01:32.610 Now this would be marking a parameter in a route. 01:33.060 --> 01:35.940 So this is the parameter name. 01:35.940 --> 01:40.440 And you surround the parameter name with curly braces. 01:41.100 --> 01:44.970 And this is what we expect to match by such route. 01:46.950 --> 01:49.020 So this is post forward slash. 01:49.020 --> 01:53.220 And that's the parameter value that we would like to read. 01:55.800 --> 02:01.540 So we will just tell our router class what routes do we have? 02:01.540 --> 02:06.880 And those routes need to match to controllers and actions. 02:06.880 --> 02:11.140 So we're gonna be talking in details about that later. 02:11.200 --> 02:15.310 For now, let me just explain how this routing should work. 02:15.370 --> 02:20.170 So it is important that we're going to have a segment separator. 02:21.250 --> 02:26.890 So the whole UI will be chunked into segments. 02:26.920 --> 02:29.110 That's a segment separator. 02:29.140 --> 02:37.030 That's why in the route definition we've got one segment called posts and another segment where we have 02:37.030 --> 02:38.050 a parameter. 02:38.350 --> 02:47.530 And the way we're going to match the URIs to the defined routes is first we're gonna compare if we have 02:47.530 --> 02:48.850 the same segment count. 02:48.880 --> 02:55.240 Now this would apply to all the defined routes until we find a matching one. 02:55.570 --> 03:01.340 So for every route that we consider we're going to first check if the segment count is the same. 03:01.340 --> 03:03.140 Here you can see it is the same. 03:03.140 --> 03:04.760 We've got two segments. 03:06.770 --> 03:10.910 Then we are either going to compare the segments literally. 03:10.910 --> 03:14.870 Like in this case post is exactly matching posts. 03:14.870 --> 03:21.530 Or if we encounter a curly brace, we are just going to read the parameter value because this is what 03:22.010 --> 03:23.690 what is expected. 03:23.780 --> 03:27.560 And essentially that's our way for matching routes. 03:27.560 --> 03:28.610 Super simple. 03:28.610 --> 03:30.830 But I think it will work great. 03:30.860 --> 03:34.910 Okay, so I just wanted to explain that before we start. 03:34.910 --> 03:42.950 So you know what our goals are and our goals are to create this routing class, this router class, 03:42.980 --> 03:50.660 I will try to reuse as much code as possible from what we have created before, but we need to remember 03:50.660 --> 03:53.630 that we are doing things a little bit differently. 03:53.630 --> 03:56.420 And now we would like to use classes and objects. 03:56.450 --> 03:59.910 Okay, now let's jump into the code editor. 04:02.400 --> 04:08.970 Okay, so you might be asking yourself, why can't we just use the solution from the previous project? 04:08.970 --> 04:10.350 It worked well. 04:10.380 --> 04:17.190 Well, it did work well, but first we'd like to move to objects and classes second. 04:17.220 --> 04:20.880 This solution is not really flexible. 04:20.880 --> 04:28.290 I'd like to implement routing the way it works in the more modern frameworks like Laravel or Symphony. 04:28.290 --> 04:31.800 And the third reason is we are here to learn. 04:31.800 --> 04:40.200 So we need to see a lot of solutions and a lot of ways that we can solve the same problem on different 04:40.200 --> 04:44.550 levels, not just building the specific projects. 04:44.550 --> 04:50.490 So that's my reasoning at why we should be building things over and over again. 04:50.520 --> 04:57.090 Now we're gonna reuse some code from this router so not everything will go to waste. 04:57.090 --> 05:01.960 I just want to build a more flexible solution as we advance. 05:01.990 --> 05:10.660 Okay, having this set, let me just scaffold first all the methods and things that this class needs. 05:10.660 --> 05:13.390 And then we're going to be implementing that. 05:13.540 --> 05:17.290 The first thing is having the field defined. 05:17.320 --> 05:19.180 Let it be protected. 05:19.480 --> 05:20.830 That's an array. 05:20.830 --> 05:24.220 And it will just hold all the routes. 05:24.220 --> 05:25.300 So it's an array. 05:25.300 --> 05:27.550 You can add more routes. 05:27.550 --> 05:29.320 There are not files. 05:29.320 --> 05:31.660 You can be much more flexible. 05:31.660 --> 05:34.180 You can even add routes at runtime. 05:34.180 --> 05:36.940 And that's exactly what we'll be doing. 05:37.090 --> 05:41.350 This means we need a function to add a route. 05:42.280 --> 05:45.220 So it needs to accept a method. 05:45.220 --> 05:48.040 Then it needs a URI. 05:48.910 --> 05:53.440 And then finally it needs a controller. 05:53.920 --> 05:57.070 It's void doesn't return anything. 05:57.110 --> 06:00.200 Implementation will be added later. 06:00.590 --> 06:03.950 Then we need the dispatch method. 06:03.980 --> 06:05.210 It's public. 06:05.270 --> 06:12.530 And this one would be well it would be having the same arguments as our previous implementation. 06:12.920 --> 06:17.180 So we are only passing the URI and the method. 06:17.540 --> 06:21.590 And this time we expect it to return a string. 06:23.090 --> 06:27.110 Then we've got some internal methods for the router logic. 06:27.110 --> 06:40.280 One of those is find route for the given URI and for the given method we need to return a specific route. 06:40.280 --> 06:43.790 And the argument here is a nullable array. 06:43.940 --> 06:52.640 Now it is a nullable array because if no route could be found, we return null and if a route can be 06:52.640 --> 06:56.180 found, we return the passed parameters. 06:57.030 --> 07:03.090 So let me quickly remind you how the roots can look like and how they are defined. 07:03.690 --> 07:08.040 So we are writing the roots the way the URI looks like. 07:08.040 --> 07:13.590 So we use the separator, but we have static parts like this posts. 07:13.620 --> 07:16.710 This needs to just be matched literally. 07:16.710 --> 07:21.810 This is what we literally expect in the URI like in this example here. 07:21.840 --> 07:27.960 But then it can also have parameters and in case of parameters they are inside curly braces. 07:27.960 --> 07:30.030 They have a name like ID in here. 07:30.030 --> 07:32.460 And we just need to grab the value. 07:32.460 --> 07:38.880 And every route has those segments separated by a forward slash. 07:39.240 --> 07:42.990 This is an example of the identified segments. 07:42.990 --> 07:47.760 And then we compare the count of segments and every individual segment. 07:48.990 --> 07:50.880 So this is what will be happening here. 07:50.880 --> 08:00.910 Either null mean meaning nothing can be matched or an array with all the parsed parameters, then we're 08:00.910 --> 08:02.290 going to have another method. 08:02.320 --> 08:06.370 This time it will be called match route. 08:07.210 --> 08:11.620 So match route will be used inside the find route. 08:12.430 --> 08:23.920 So this will be doing all the heavy lifting comparing the route URI with the actual request URI. 08:25.270 --> 08:31.330 So remember the things that I have explained how this would behave on the diagram. 08:31.390 --> 08:37.030 This function will be doing the heavy lifting comparing a specific two routes. 08:37.060 --> 08:40.660 But remember that we can have many routes defined. 08:40.690 --> 08:48.790 That's why this find route function will be running match route for every single route we have defined. 08:48.820 --> 08:56.840 Unless we find a matching one and it returns the same type A Nullable array. 08:57.170 --> 08:59.960 Then we have another method. 09:00.200 --> 09:02.720 It's called call action. 09:04.730 --> 09:08.990 It's just going to run the code if we match a specific route. 09:08.990 --> 09:12.500 So controller is essentially a controller class. 09:12.500 --> 09:15.320 And action is the method name. 09:15.320 --> 09:21.980 So this would involve some dynamic class creation and dynamic method calling. 09:22.610 --> 09:25.460 I think this would be pretty interesting. 09:26.240 --> 09:31.130 For now let's assume that the response if is of type string then. 09:31.130 --> 09:36.410 Additionally we're going to add a Notfound and a redirect methods. 09:36.410 --> 09:42.350 But I think we can do that in the next videos after we implement the essentials here. 09:42.380 --> 09:49.610 Let's now take a break, because I think there was a lot of theory and explaining of what we are about 09:49.610 --> 09:50.330 to do. 09:50.540 --> 09:55.820 Then next up, we need to actually go ahead and implement this logic.