WEBVTT

00:05.970 --> 00:11.730
In this video you're going to build the breadcrumb for your folder web page.

00:12.090 --> 00:21.120
So to make things easy to read and well structured we're going to create a function which will build

00:21.180 --> 00:23.080
the breadcrumb for us.

00:23.400 --> 00:31.170
So the outputs of the function is going to be stored inside a variable breadcrumb.

00:31.180 --> 00:34.980
Okay so let's call this function for example build

00:37.680 --> 00:40.510
bread crump

00:47.390 --> 00:53.950
and this function will take the path name as a parameter arguments.

00:56.690 --> 01:04.390
Because obviously we just need the path name to build this breadcrumb.

01:04.490 --> 01:14.830
Okay so again to make things well structured we're going to place this function in a separate file which

01:14.830 --> 01:25.370
we will link to our respond though J as well so I'm gonna go to the lib folder and create this file

01:26.210 --> 01:32.770
and let's call it bread crumb those dance

01:37.130 --> 01:43.990
and to link this file to our respond though J as we're gonna go to file imports

01:47.890 --> 02:01.640
and then create our function build breadcrumb which will set to require the location of our new file.

02:02.560 --> 02:06.520
So again the location starts from where we are forward slash

02:09.780 --> 02:10.190
lip

02:13.500 --> 02:15.260
on actually it's actually in the same folder.

02:15.300 --> 02:22.030
So it's just where we are forced slash red chrome those deaths.

02:22.540 --> 02:22.810
Okay.

02:22.830 --> 02:31.620
So let's go to our new file and create the function build red Chrome just the

02:37.440 --> 02:40.520
okay and write on the end.

02:40.520 --> 02:51.370
We're going to export this function by setting module exports equals this function

02:56.400 --> 03:10.360
so to test things for now we will just return the path name just to see what we get.

03:10.410 --> 03:17.410
So once you return the path name you will need to use us to fill the web page.

03:17.410 --> 03:17.950
So

03:27.250 --> 03:33.880
so just like we did with the page title we gonna have a string inside our templates which we will replace

03:34.120 --> 03:36.920
using the breadcrumb variable.

03:37.000 --> 03:39.700
So let's go back to our templates and see

03:46.580 --> 03:49.830
where we gonna put the string so

03:52.780 --> 03:53.980
this is a breadcrumb

03:58.630 --> 04:06.460
so let's just add something after the breadcrumbs call its path name for example and let's replace

04:13.810 --> 04:18.630
bath name inside the data string

04:24.010 --> 04:33.950
using the value of breadcrumb so you'll see to things you will see the breadcrumb first and then the

04:33.980 --> 04:34.700
path named.

04:34.920 --> 04:38.380
So let's try this okay.

04:38.410 --> 04:39.570
Let's check the error.

04:39.770 --> 04:42.840
So it says that this is not defined art.

04:42.850 --> 04:44.880
Line 65.

04:44.920 --> 04:49.710
So let's take the name of function

04:52.440 --> 04:53.620
and we've got an error.

04:53.970 --> 04:57.360
Okay so let's try again okay.

04:57.380 --> 05:02.510
So here is our templates breadcrumb and we replaced us with path name

05:14.950 --> 05:15.710
in this video.

05:15.730 --> 05:24.460
You're going to build the breadcrumb for your folder web page so to make things easy to read and well

05:24.520 --> 05:32.380
structured we're going to create a function which will build the breadcrumb for us.

05:32.380 --> 05:39.890
So the outputs of the function is going to be stored inside a variable breadcrumb.

05:40.050 --> 05:41.070
Okay.

05:41.470 --> 05:43.960
So it is called this function for example build

05:46.660 --> 05:49.480
bread crump

05:56.360 --> 06:00.940
and this function will take the path name as a promise.

06:02.210 --> 06:02.900
When arguments

06:05.660 --> 06:13.200
because obviously we just need the path name to build this breadcrumb.

06:13.460 --> 06:23.770
Okay so again to make things well structured we're going to place this function in a separate file which

06:23.770 --> 06:27.850
we will link to our respond though js file.

06:27.850 --> 06:41.730
So I'm gonna go to the lib folder and create this file and let's call it bread crumb both jars

06:46.130 --> 06:52.950
and to link this file to our respond the j as we're gonna go to file imports

06:56.800 --> 07:10.570
and then create a function build a breadcrumb which will set to require the location of on your file.

07:11.550 --> 07:14.670
So again the location starts from where we are.

07:14.740 --> 07:15.510
Forward slash

07:18.740 --> 07:19.130
lib

07:22.460 --> 07:24.240
or actually it's actually in the same folder.

07:24.280 --> 07:31.050
So it's just where we are for slash red Crump those deaths.

07:31.570 --> 07:40.570
OK so let's go to our new file and create the function build read Chrome just the

07:46.380 --> 07:49.480
okay and write on the end.

07:49.480 --> 08:00.340
We're going to export this function by setting module exports equals this function

08:05.350 --> 08:19.330
so to test things for now we will just return the path name just to see what we get.

08:19.390 --> 08:26.380
So once you return the path name you will need to use those to fill the web page.

08:26.380 --> 08:26.880
So

08:36.210 --> 08:42.850
so just like we did with the page title we gonna have a string inside our templates which we will replace

08:43.090 --> 08:45.860
using the breadcrumb variable.

08:45.940 --> 08:48.670
So let's go back to our templates and see

08:55.550 --> 08:58.810
where we're gonna put the string so

09:01.740 --> 09:02.940
this is a breadcrumb

09:07.830 --> 09:15.430
let's just add something after the breadcrumbs and call it pardoning for example and let's replace

09:22.780 --> 09:27.600
bath name inside the data string

09:32.980 --> 09:40.370
using the value of breadcrumb so you'll see two things.

09:40.380 --> 09:43.570
You'll see the breadcrumb first and then the path named.

09:43.870 --> 09:47.340
So let's try this okay.

09:47.380 --> 09:48.500
Let's check the error.

09:48.730 --> 09:51.790
So it says that this is not defined art.

09:51.820 --> 09:53.820
Line 65.

09:53.890 --> 10:02.400
So let's take the name of function and we've got an error.

10:02.910 --> 10:03.840
Okay so let's try again.

10:05.330 --> 10:08.930
So path name hasn't been replaced with the value we want.

10:08.930 --> 10:18.520
And that's because we only used the replace method but we haven't saw those inside the data variable

10:18.550 --> 10:20.200
like this.

10:20.200 --> 10:21.190
So let's try again.

10:22.880 --> 10:23.290
Okay.

10:23.350 --> 10:25.540
And now we can see our path name.

10:26.170 --> 10:33.670
Now we need to writes the correct code inside our build breadcrumb function.

10:33.900 --> 10:41.480
So that's we show something similar to that instead of a path named like this.

10:41.970 --> 10:48.340
So first of all let's understand how a breadcrumb is built in bootstrap.

10:48.480 --> 10:57.720
So I'm going to inspect these elements from our final page just to see how this is built

11:00.740 --> 11:02.590
so that's our breadcrumb.

11:02.600 --> 11:04.130
It starts there.

11:04.280 --> 11:04.970
Okay.

11:05.090 --> 11:07.580
And inside is we've got list items.

11:07.580 --> 11:10.410
So let's start with the first list item which is home.

11:11.660 --> 11:17.330
So it's made of a list item of class breadcrumb item.

11:17.930 --> 11:21.250
And it's got a link inside it.

11:21.290 --> 11:34.460
So the first element is always going to be home and the ATF is fourth class the next elements is projects.

11:34.470 --> 11:43.370
In this example and its link is forward slash the name of these elements the next elements.

11:43.660 --> 11:52.480
Here is our planning page bootstrap and its link is actually made up of that link forward slash the

11:52.480 --> 11:53.610
name of the item

11:57.310 --> 11:58.210
and you can see the trend.

11:58.210 --> 12:02.170
Now the last one doesn't have a link it's just got a name.

12:02.170 --> 12:08.830
But you can see that's the link of the first element is used actually to build the link of the second

12:08.890 --> 12:19.060
element which is also used to build a link of the next element so this gives you an idea about how to

12:19.090 --> 12:22.130
create this breadcrumb.

12:22.180 --> 12:30.010
So what I suggest now is to pause the video build the breadcrumbs on your own and then come back to

12:30.040 --> 12:32.260
compare your findings with those ever.

12:32.290 --> 12:34.340
We're going to be doing in the video.

12:34.400 --> 12:34.680
All right.

12:34.690 --> 12:36.870
So hopefully you manage to find the solution.

12:36.970 --> 12:39.510
So let's go ahead and build this together.

12:39.520 --> 12:49.690
So first of all we're going to break our path name into different items and to do that we can create

12:49.720 --> 12:55.960
a variable let's call it path chunks.

12:56.340 --> 13:03.600
So we're going to use the path name string and then split it using the forward slash separator just

13:03.600 --> 13:04.320
like we did before.

13:05.160 --> 13:12.630
So path named splits using the forward slash.

13:13.800 --> 13:14.630
OK.

13:15.200 --> 13:19.940
So now this will give us an array of these items.

13:20.180 --> 13:24.050
Now let's consult the log.

13:24.140 --> 13:25.930
This just to see what we've got.

13:31.720 --> 13:32.050
OK.

13:32.060 --> 13:35.320
So this is what we have.

13:37.920 --> 13:41.130
And you can see that the array actually starts with an empty elements.

13:41.130 --> 13:47.790
So let's get rid of all these empty elements by adding a filter

13:51.820 --> 14:00.970
like that which will just make sure that's all elements are different from the empty string.

14:01.010 --> 14:02.070
So let's try again.

14:04.510 --> 14:04.840
OK.

14:04.840 --> 14:07.340
And now we don't have any empty strings.

14:07.740 --> 14:12.790
Perfect now list starts building our breadcrumb.

14:12.870 --> 14:19.920
So the first item is always going to be that's one which is the home directory.

14:19.920 --> 14:37.710
So I can just copy that and say that's the very beginning we're gonna have breadcrumb sets to this okay

14:38.560 --> 14:46.180
now what we need to do we need to loop through the elements of our array path chunks and then build

14:46.270 --> 14:51.120
these elements while we are looping through the array.

14:51.550 --> 14:52.030
So

14:55.520 --> 15:09.050
we're going to use for each okay and our function is going to be item for each item we're going to do

15:09.290 --> 15:11.460
the following.

15:11.480 --> 15:21.060
So first of all we need to build the link which we'll use inside each item.

15:21.410 --> 15:23.880
The name we because it's lost the item by will.

15:23.930 --> 15:25.780
That's the name.

15:25.850 --> 15:27.560
Now we just need the link.

15:27.560 --> 15:34.980
So what we can do you can start from the first link which is this one.

15:35.070 --> 15:36.930
So we going to set the link at the beginning

15:43.800 --> 15:57.670
to four slash like that's and then we will change the link to a new value.

15:57.670 --> 16:03.250
And as we said before you build the link of the next item using the link of the previous item.

16:03.310 --> 16:07.380
So our first item when I first item link is that.

16:07.690 --> 16:16.410
So the next item is link is going to be made of that block and the name of this item so you can use

16:16.410 --> 16:17.550
path those join.

16:17.780 --> 16:22.110
And let's not forget to include the module at the top

16:34.150 --> 16:35.130
right.

16:35.170 --> 16:43.110
So we're gonna be linking or joining link and the item or the name or the item.

16:44.360 --> 16:53.980
OK so now let's use the link to add the next contents to our breadcrumb.

16:55.160 --> 16:55.700
So

17:00.820 --> 17:09.290
we're going to string something similar to this but we're gonna change the link

17:16.150 --> 17:25.370
to that and we're gonna change the name to the item variable.

17:25.380 --> 17:26.610
All right.

17:26.620 --> 17:31.490
Now if you check you will see that's the final item is slightly different from these ones is got an

17:31.510 --> 17:35.230
active class and also he's got an area current

17:38.090 --> 17:46.320
attributes set to page so we will need to distinguish here between all the other items on the lost item.

17:46.410 --> 17:55.500
So we will check if the index is different from the last one.

17:55.570 --> 18:05.590
So instead of item we're going to have item and index and we'll check if the index is different from

18:05.800 --> 18:09.840
path chunks that length minus one.

18:10.000 --> 18:15.040
And this means the loss index so does the case we will use this code.

18:15.040 --> 18:22.230
So the link is always the same so you shouldn't go there you go just the so.

18:22.250 --> 18:24.810
Otherwise we'll just use this AML code

18:28.280 --> 18:37.050
okay and let's replace the name of the item using our variable.

18:37.140 --> 18:37.650
Perfect.

18:38.370 --> 18:45.450
And finally after you finish the loop you will just return breadcrumb.

18:45.480 --> 18:48.980
Now let's try this on see what we get.

18:48.990 --> 18:49.260
All right.

18:49.260 --> 18:50.830
So this is what we're getting.

18:51.220 --> 18:53.860
And that's because we are returning only the list items.

18:54.730 --> 19:01.720
So in the templates you need to make a minor change.

19:01.900 --> 19:05.270
So we are building the list items here.

19:05.330 --> 19:06.020
All right.

19:06.150 --> 19:10.860
Say what you can do is push the path name string right there.

19:12.940 --> 19:15.540
So all you list items are gonna go inside.

19:15.540 --> 19:17.800
And now let's see what we get.

19:17.800 --> 19:22.450
And now we are getting the correct breadcrumb.

19:22.550 --> 19:29.510
We've got a link in the final one so let's see why it's because of a typo.

19:29.920 --> 19:30.230
OK.

19:30.280 --> 19:33.640
So let's try again and it works this time.

19:33.710 --> 19:34.990
Perfect.

19:35.000 --> 19:35.290
All right.

19:35.300 --> 19:43.310
So in the next video you're going to move to the next step which is to build the table rows which is

19:43.310 --> 19:46.840
the main contents of your folder webpage.