WEBVTT 00:05.430 --> 00:11.340 In this video you're going to build the main content of your for the page and that's the contents of 00:11.340 --> 00:19.890 the table which is the different rows showing the name of the file or folder its size and the time it 00:19.890 --> 00:25.130 was last modified so to make things structured. 00:25.220 --> 00:34.970 We're gonna use again a function thus I'm going to call build main contents 00:38.650 --> 00:43.260 so we will stories inside a variable. 00:44.130 --> 00:53.150 Let's call this variable mean contents like that's so this function will take any parameters that we 00:53.150 --> 00:57.990 need in order to build this content right there. 00:58.580 --> 01:07.340 And just to structure our code further I'm going to place these lines where we replace contents inside 01:07.550 --> 01:10.980 the data variable going to place them 01:16.200 --> 01:20.980 right there and let's take this one as well. 01:23.900 --> 01:24.900 Place it's right there 01:28.430 --> 01:36.140 so once we are done with the main contents we'll do the same thing and we'll just replace whatever we 01:36.140 --> 01:44.200 want to replace inside our template with the value of our variable main contents. 01:44.690 --> 01:49.010 So let's go to our templates and see what we've got inside the table. 01:49.130 --> 01:50.610 So that's the table head. 01:50.840 --> 01:53.960 And these are the different rows inside the table body. 01:54.350 --> 02:02.020 So let's say that we're gonna have something right the saying main concerns 02:06.650 --> 02:10.730 so we'll just replace that string main contents 02:14.090 --> 02:22.880 with the value of our variable main contents just like we did with the function breadcrumb we'll create 02:22.910 --> 02:33.950 this function main contents in a or build the main contents in a separate file and we'll link our current 02:33.950 --> 02:35.360 file to that file. 02:35.520 --> 02:36.020 So 02:38.840 --> 02:42.530 we're going to require the path of that file so let's call it. 02:42.530 --> 02:43.280 For example 02:48.260 --> 02:53.600 main contents both chairs uh list created. 02:53.850 --> 02:59.170 I'm going to create is in the same folder or we of course responded both J is 03:05.260 --> 03:07.020 okay and 03:12.150 --> 03:13.400 so what we're gonna do here. 03:13.410 --> 03:17.490 We're going to create our function then export is so 03:20.720 --> 03:21.770 let's call its 03:27.900 --> 03:36.870 billed main contents so other moments we don't know yet what promises we're going to pass to the function 03:36.930 --> 03:51.210 we'll see that's a bit and rights of the end we are going to sets onto those exports to this function 03:52.890 --> 03:58.630 just to make sure that things are working let's just return 04:01.960 --> 04:02.860 something like 04:07.250 --> 04:19.150 a table room and let's play some dummy data inside it's the name of our file and then size. 04:19.390 --> 04:26.440 For example a hundred and laws modified for instance. 04:26.490 --> 04:27.000 Let's take 04:32.460 --> 04:32.860 okay. 04:32.910 --> 04:38.460 So let's just this and now if you try your code just like that it's not going to work because you've 04:38.460 --> 04:47.280 got the return keyword alone in one line so javascript will just treat this as a return statements and 04:47.280 --> 04:49.710 it will ignore anything that comes after. 04:49.710 --> 05:01.540 So to avoid as you can just have or start your string right there and then carry on with your table. 05:02.280 --> 05:04.530 So let's save and try this 05:12.490 --> 05:16.520 so we can see our table row right there. 05:16.550 --> 05:22.460 All right now let's start building our build main content. 05:22.460 --> 05:22.850 Function 05:27.760 --> 05:32.140 so let's have a look first ask the structure of this function. 05:32.140 --> 05:39.820 So first of all you will need to loop through the elements of your folder so that's going to be the 05:39.850 --> 05:41.380 first step. 05:43.360 --> 05:57.380 Loop through the elements inside the folder then the next step is to get the following elements for 05:57.380 --> 05:58.040 each item. 06:02.200 --> 06:07.360 So you want the name of the item to displays like that you want. 06:07.360 --> 06:16.080 Also the link to the item so that you can click on that and it will take you to the correct item. 06:16.330 --> 06:24.010 And also you wants the size and the last modified information 06:27.940 --> 06:30.750 and also you want the icon. 06:30.760 --> 06:41.320 So lets on that right that the icon will depend on whether it's a file or a folder 06:47.650 --> 06:57.750 to make things easy you can create a variable can call its main contents on the top which you will amend 06:57.810 --> 07:03.570 using any details you retrieve and then write on the end you can return 07:07.690 --> 07:10.490 that variable. 07:10.540 --> 07:14.620 So for now let's just say that you will set this variable 07:19.040 --> 07:23.330 to events and return this content. 07:23.760 --> 07:29.720 Okay so let's start with looping through the elements inside the folder. 07:30.000 --> 07:41.180 So to do this there is a very useful method inside the filesystem module called Reid directory sink. 07:41.280 --> 07:47.640 So we're going to use the sink version again because we want to wait for the outputs before we move 07:47.850 --> 07:50.620 to any other gate. 07:50.820 --> 07:58.120 So this is the method read directory sink. 07:58.330 --> 08:06.970 So this will take the full static path of your folder so we will need to pass that to the function. 08:06.970 --> 08:10.170 So for the static path. 08:10.450 --> 08:16.560 So when you call the function right there you're going to call it 08:20.380 --> 08:31.980 and pass to it's the faults US static path variable okay. 08:32.010 --> 08:36.900 And this is what we're going to pass to the method read directory sync. 08:36.990 --> 08:42.870 Now again you need to do the error handling because we're not using the callback so you need to take 08:42.870 --> 08:45.480 care of the error handling yourself. 08:45.570 --> 08:46.470 So let's do that. 08:46.680 --> 08:49.680 So you gonna use a try Kaj statements 09:01.260 --> 09:07.800 so this method will return an array showing the different items inside the folder. 09:07.800 --> 09:15.420 So let's store it's inside a variable and call it items 09:20.770 --> 09:27.240 and let let's console log items just to see what we've got. 09:27.280 --> 09:34.340 And if you get any errors you will just console not log error 09:40.700 --> 09:47.290 followed by the error. 09:47.320 --> 09:49.570 All right so let's try this 09:53.660 --> 09:54.180 OK. 09:54.210 --> 09:57.650 FSD is not defined so it is defined as the top 10:13.270 --> 10:15.340 try again. 10:15.340 --> 10:15.910 And here we go. 10:15.910 --> 10:21.490 So you can see the contents of our folder up landing page. 10:21.490 --> 10:25.830 So these are the different items that you find inside this folder. 10:25.900 --> 10:35.580 And let's check once safe we go to static and then projects our landing page. 10:35.620 --> 10:42.950 So these are the elements that you found or you find inside this folder perfect. 10:42.990 --> 10:52.080 Now if there is an error you can also do something like return 10:55.970 --> 10:58.900 internal server error. 10:58.910 --> 10:59.570 For example 11:04.640 --> 11:10.030 so let's say that instead of F has well let's keep EVAs and not define its 11:12.960 --> 11:21.360 you'll get something like that's actually in your webpage can also place this inside a div 11:25.180 --> 11:25.720 if you like 11:29.400 --> 11:30.660 and give it a class 11:33.910 --> 11:35.880 alerts and alerts. 11:35.880 --> 11:43.010 Danger since you are using Bootstrap and this will look better by the way. 11:43.220 --> 11:46.280 We don't see this inside the table because it's not a table row. 11:46.520 --> 11:50.780 So that's why it shows on top of the table. 11:51.480 --> 11:52.750 Okay. 11:53.120 --> 11:59.060 So this will fire if there is any problem executing that method for you. 11:59.130 --> 12:05.490 So let's go back to the working code and here we go. 12:05.490 --> 12:13.380 Now let's loop through our items array and get these details which we will use to build our table. 12:13.770 --> 12:14.220 So 12:18.090 --> 12:21.180 to do that we're going to use it for each method 12:31.750 --> 12:32.320 and 12:35.240 --> 12:38.440 let's place our function inside the method. 12:39.230 --> 12:44.960 So the name is going to be the value of the variable item. 12:44.960 --> 12:47.480 So we are okay with that. 12:47.480 --> 12:54.770 Now let's move to the icon or let's start with the link first because the icon is going to be a little 12:54.770 --> 12:55.830 bit more complicated. 12:55.850 --> 12:59.340 We need to differentiate between folders and files. 12:59.360 --> 13:03.040 So for now let's move to the link. 13:04.250 --> 13:07.040 So the link if you check 13:10.400 --> 13:14.120 so let's go to the final projects 13:19.100 --> 13:19.720 and try 13:26.240 --> 13:27.650 inspects this for example 13:31.560 --> 13:36.500 so here you see that the link is forward slash the name 13:41.170 --> 13:43.390 of that folder. 13:43.430 --> 13:52.810 Now if we go inside and we inspect this for example that you can see that the link is for large projects 13:52.840 --> 14:00.250 which is the link of the current folder then forward slash the name of this folder. 14:00.310 --> 14:09.760 So basically to build the link you get the path name of the current folder and you add to it the name 14:09.790 --> 14:12.340 of your item okay. 14:12.550 --> 14:23.670 So what we can do we can create the link like this by joining the bath name of the current folder and 14:23.670 --> 14:27.230 the name of the item which is the value of the variable item. 14:27.990 --> 14:38.110 So now we will need the bath name which we can pass as a parameter that say let's go back to respond 14:38.120 --> 14:41.920 though Jesus and the path named there as well 14:48.460 --> 14:49.140 okay. 14:49.180 --> 14:54.580 And now the main content is going to change. 14:54.670 --> 14:55.180 So 14:59.910 --> 15:07.550 the first column is going to have the name of our item like but 15:12.560 --> 15:16.130 which we will place inside a link like this 15:18.850 --> 15:20.350 so let's go ahead and do this 15:32.290 --> 15:34.360 and the strength of our link 15:40.230 --> 15:45.490 is going to be the link variable before testing our code. 15:45.540 --> 15:51.660 Let's make a couple of changes so we are using the path module so we'll need to include that on the 15:51.660 --> 15:51.950 top 15:54.950 --> 15:56.320 right. 15:56.360 --> 16:08.820 And also if you look at our variable scoping you can see that the items variable is block scoped so 16:09.570 --> 16:15.230 we will need to change that because we need the item is variable later on indicate right there. 16:15.460 --> 16:16.810 So you can define 16:21.880 --> 16:30.230 the variable right there using letters instead of concerts and then change it later on. 16:30.230 --> 16:34.910 Also this piece of code will need to go inside our for each 16:38.410 --> 16:51.200 like this note as this code and this time you can see that's our contents changed but you've got only 16:51.200 --> 16:56.270 one row and that's because we sense the whole contents to want wrote only. 16:56.270 --> 17:03.070 So to fixed us we're going to use plus equal so that every time we just add one group. 17:03.080 --> 17:06.860 So let's try again and here we go. 17:06.860 --> 17:15.560 Now you can see all the files inside our folder and you can check that's why you're going to your folder 17:18.170 --> 17:19.100 and here you go. 17:19.430 --> 17:22.860 This is matching what we got that. 17:22.990 --> 17:24.410 All right so perfect. 17:24.410 --> 17:29.840 So other moments we've got the name and we've got the link so let's check the if the link is working 17:31.040 --> 17:32.520 and here we go. 17:32.520 --> 17:36.630 Now we can see the contents of our link or our new folder. 17:37.140 --> 17:45.870 So now you can go back to your templates and just get rid of the existing table the rows 17:50.510 --> 17:51.710 save you save. 17:51.760 --> 17:57.150 Try this again you'll see only the contents of your folder okay. 17:57.150 --> 18:06.720 Perfect so I'm not going to try to click on files because we haven't written the code yet. 18:06.720 --> 18:07.460 What files. 18:07.520 --> 18:13.650 But we can see us our folders do work. 18:13.900 --> 18:14.330 All right. 18:14.350 --> 18:20.710 In the next video you're going to add the correct icon to your files or folders and then calculates 18:20.710 --> 18:22.990 the size of your elements.