WEBVTT 00:06.230 --> 00:12.040 In this video you're going to go through the logic of your app before building your code structure. 00:12.140 --> 00:17.370 So to start a user is going to send a request to your server. 00:17.450 --> 00:22.650 The request is gonna be in this format your domain followed by a path mate. 00:22.970 --> 00:28.160 Then the server is going to receive that request by the way. 00:28.160 --> 00:31.850 The server is going to be listening to requests like this one. 00:33.200 --> 00:41.850 So once the server receives the request we're going to need to guess the U.R.L. path name from the request. 00:42.120 --> 00:48.230 So we're gonna pass the request and get only the path name from that. 00:48.270 --> 00:50.640 So now we've got the partnering. 00:50.760 --> 00:51.670 So let's have a look. 00:51.680 --> 00:53.520 Art's one example. 00:53.520 --> 01:01.020 So this request for example is gonna have a path name which is gonna be for Slash. 01:01.080 --> 01:08.510 Now if I try another new URL then the path named this time is going to be forwards large media. 01:08.700 --> 01:10.560 Okay let's go back. 01:11.700 --> 01:18.090 The next step is to guess the equivalent path in the static folder located on your server. 01:18.300 --> 01:25.080 So as we said earlier you're going to choose a static folder that you're going to be serving to your 01:25.260 --> 01:25.940 users. 01:26.010 --> 01:31.300 So any files inside that static folder is going to be served to your users. 01:31.320 --> 01:40.590 So in our example here the static folder is the home folder which corresponds to a specific for that 01:40.590 --> 01:48.900 in our server and we are serving every single folder and file located in that folder. 01:48.900 --> 01:49.500 Okay. 01:49.830 --> 01:57.180 So now that we've got the equivalence path in our server which is gonna be something like this going 01:57.180 --> 02:00.510 from the root directory of your server. 02:00.720 --> 02:09.490 Okay then the bath name at the end but before the bath name the name of the starting folder thus you 02:09.490 --> 02:11.450 chose at the beginning. 02:11.470 --> 02:16.290 So now we're gonna need to look for the formal path in the server. 02:16.730 --> 02:17.040 Okay. 02:17.080 --> 02:18.760 So what does it mean. 02:18.760 --> 02:24.580 So it means that we're gonna check if this full path but you've got there corresponds to something that 02:24.820 --> 02:27.200 really exists on the server. 02:27.310 --> 02:29.290 So we're gonna have a few scenarios here. 02:29.890 --> 02:38.470 So the first scenario is when you get no results or you still get a result but your path is not a folder 02:38.710 --> 02:39.760 and it's not a file. 02:39.760 --> 02:46.870 Now there are other types out there which we are not interested in but we want only folders and files. 02:46.900 --> 02:47.770 Okay. 02:47.950 --> 02:56.530 So in this case you're gonna send a 4 0 4 error page saying file not found to the user. 02:56.530 --> 02:58.510 Now there are two other scenarios. 02:58.540 --> 03:03.320 The first one is when you found a folder corresponding to that path. 03:03.640 --> 03:09.410 And in that case you're going to send a page showing the contents of the folder. 03:09.460 --> 03:14.800 The other scenario is when you found a file and in that case you're going to serve the file to the user. 03:14.800 --> 03:15.100 All right. 03:15.100 --> 03:19.490 Now let's start with the first scenario when you found a folder. 03:19.540 --> 03:26.290 So in this scenario you need to go through a few steps to show the contents of a folder. 03:26.290 --> 03:30.520 So first you will lead to says the title of the page to the for the name. 03:30.790 --> 03:37.390 So if you look at this example for instance you can see that the title of the page corresponds to the 03:37.390 --> 03:40.360 title of our folder. 03:40.360 --> 03:44.390 If you look at that one you can see that it's called home. 03:44.400 --> 03:46.880 That's because we are in the home directory. 03:46.970 --> 03:51.610 If you click on projects then I go to a page with a title project. 03:52.120 --> 03:52.410 Okay. 03:52.420 --> 03:56.710 And then you get the folder path and create the breadcrumb. 03:56.770 --> 04:03.940 So using before the path that you will create value breadcrumb which is located at the top of the page. 04:04.120 --> 04:10.360 The next step is to loop through the elements of your folder specifically files. 04:10.360 --> 04:17.710 And for this for each elements you get some details so you will leave the name of the file the size 04:18.190 --> 04:23.860 and last modified and you will need to get the size in a human readable format. 04:24.070 --> 04:32.590 You will also need the direct link to that folder or file so that you'll be able to click on it to get 04:33.100 --> 04:36.570 the direct U.R.L. to that folder or file. 04:37.210 --> 04:38.480 Okay. 04:38.920 --> 04:47.410 So once you get all those details you'll be able to build a table row using a schedule which you will 04:47.530 --> 04:58.710 then insert in this table and then you'll send the web page to the user after you build all this all 04:58.710 --> 05:05.710 right now let's move to the next scenario where you are serving a file. 05:06.050 --> 05:11.050 Now first of all you need to look for the file MIME type using its extension. 05:11.060 --> 05:17.630 So for example if you've got a PDA file the extension is going to be the PDA of the mind type is going 05:17.630 --> 05:20.000 to be application forward slash PDA. 05:20.030 --> 05:25.360 Now to get the correct MIME type for a certain extension there are plenty of ways to do to do that. 05:25.430 --> 05:32.610 Now we will use an external Jason File to give that's something we're going to come to shortly. 05:33.120 --> 05:38.200 So now you will check if the mime side has been found. 05:38.900 --> 05:45.220 So if you didn't find it then you're going to save the file ask texts for Slash plain. 05:45.690 --> 05:52.970 So we going to consider this as a text file and we will just read the contents of the file as text. 05:52.970 --> 05:59.030 Now if you found the MIME type we're going to distinguish if you scenarios where we have some specific 05:59.030 --> 05:59.360 types. 05:59.420 --> 06:06.410 So for example if you've got a PDA file you're going to serve the PDA of file using the inline method. 06:06.650 --> 06:12.800 So this means that the user is not going to have to download the PDA file on their computer and then 06:12.800 --> 06:13.400 read it. 06:13.550 --> 06:18.610 They can actually read the file directly on the browser without having to download it. 06:18.620 --> 06:24.500 Now if you've got an audio or video you're going to write some javascript code to make sure that the 06:24.530 --> 06:27.980 file is streamed by chunks. 06:28.040 --> 06:37.880 OK so this will improve the user experience because they don't have to wait for the whole audio or video 06:37.880 --> 06:39.860 to be downloaded so that they can view it. 06:39.890 --> 06:46.830 So they'll be able to stream its my chunks and also they'll be able to search through the audio or video. 06:47.150 --> 06:51.080 Now for any other types you will just save the file in a normal way. 06:51.080 --> 06:56.210 One more feature we need to cover is ordering your table rows by name. 06:56.300 --> 07:03.280 Size or last modified and you can do that by clicking on any of the table headers. 07:03.290 --> 07:10.430 So in this example I'm going to use local hosts because I've got some more meaningful data for last 07:10.430 --> 07:13.510 modified in this server. 07:13.610 --> 07:20.150 It shows the same data for last modified because all these files were uploaded on the same time to this 07:20.150 --> 07:20.510 server. 07:21.380 --> 07:26.070 So when you load the page you get something like this. 07:26.270 --> 07:30.450 None of these is actually audit. 07:30.920 --> 07:31.870 OK. 07:32.150 --> 07:42.040 Well by default the name is going to be ordered in the ascending order in the server and that's what 07:42.040 --> 07:42.650 you get. 07:42.700 --> 07:44.080 Normally by default. 07:44.080 --> 07:48.400 So let's click on the name header and see what we get. 07:48.430 --> 07:56.470 So we still get the same order because they were already ordered ascending OK by an old code. 07:56.640 --> 08:03.890 We will not recognize that they are ordered by name in ascending order at the beginning. 08:04.030 --> 08:10.430 But now once you click there then in the javascript code we know that these are actually ordered at 08:10.430 --> 08:11.090 the moment. 08:11.100 --> 08:17.760 If I click again then you can see that the icon has been updated and now we are ordering the rows by 08:17.760 --> 08:20.220 name in descending order. 08:20.270 --> 08:23.370 Now if you click on the size the same thing happens. 08:23.370 --> 08:30.580 So we've got ascending order here and then descending order and the same thing happens for at last modified 08:32.160 --> 08:35.790 so that's another really nice feature to have in our products. 08:35.790 --> 08:41.280 So the logic is pretty easy when you click on the name header for example you check first if the names 08:41.310 --> 08:43.000 are already sorted. 08:43.110 --> 08:48.660 Now even though we say that the names are sorted by default on this server and that's where you get 08:48.660 --> 08:53.270 normally by default we will still consider at the beginning that they are not sorted. 08:53.280 --> 09:01.410 So when you click for the first time on the name header we will answer this question No. 09:01.530 --> 09:05.400 And then we will source the rows my name in ascending order. 09:05.400 --> 09:12.040 Now if they are sorted already then we'll will check in which order they are sorted. 09:12.060 --> 09:18.150 So if they aren't sorted in ascending we'll sort the rows by name in descending order and also we'll 09:18.150 --> 09:19.590 update the icon. 09:19.740 --> 09:27.780 Otherwise we will sort them by name in ascending order and the same logic applies to the size and the 09:27.840 --> 09:29.930 dates. 09:30.050 --> 09:30.310 OK. 09:30.320 --> 09:37.850 So now that's you understood the logic of Europe you are now ready to build your code structure and 09:37.850 --> 09:40.250 this is what you're going to be doing in the next video. 09:41.380 --> 09:45.260 And I hope that you are really excited to build this fantastic project.