WEBVTT 0 00:00.780 --> 00:01.040 All right 1 00:01.050 --> 00:01.380 guys. 2 00:01.380 --> 00:02.670 Welcome back. 3 00:02.670 --> 00:08.780 Now in the HTL module, we explored how to create and use HTML forms. 4 00:08.890 --> 00:15.690 Now in this lesson, armed with our knowledge of Javascript, Node, Express, we're going to put it to use 5 00:15.780 --> 00:22.320 in our web site, and we’re going to use the data that gets entered into the forms, and perform calculations 6 00:22.320 --> 00:23.820 on it in our server. 7 00:24.030 --> 00:27.350 So first things first. We’re going to create a new file. 8 00:27.360 --> 00:33.900 So inside the Calculator directory, I'm going to create a new file called index.html. 9 00:34.050 --> 00:42.000 So there is our brand new HTML file, and I'm going to use the html shortcut to create our HTML boilerplate. 10 00:42.000 --> 00:44.960 And I'm just going to call this page ‘Calculator’. 11 00:45.510 --> 00:49.850 Now inside the body we're going to include a form. 12 00:49.940 --> 00:56.610 Now this form is not going to have a class, but it will have an action and a method. 13 00:56.610 --> 01:03.090 So I want you to keep the method as post and the action as index.html. We’re going to explain really shortly 14 01:03.090 --> 01:04.430 just what those things are. 15 01:04.500 --> 01:07.050 But before we do that let's add a few inputs. 16 01:07.080 --> 01:11.900 So the first input is going to have a name of num1, 17 01:12.090 --> 01:14.690 and it's also going to have a placeholder, 18 01:14.700 --> 01:19.960 so that's that text in grey that tells the user what they should type in this text box. 19 01:20.190 --> 01:27.480 And this is going to be “First Number”. And then we're going to have another input that's going to have 20 01:27.510 --> 01:36.740 a name of num2, and the placeholder is going to be “Second Number”. 21 01:36.940 --> 01:43.000 Now this name is going to be equivalent to like a variable name, and it's going to be the thing that 22 01:43.000 --> 01:47.860 uniquely identifies the data that’s inside this input. 23 01:47.860 --> 01:52.240 That's what we're going to be using and drawing on to perform our calculation. 24 01:52.240 --> 02:00.490 Now just before our form ends, we're going to add a button, and this is going to be of type “submit”, and 25 02:00.490 --> 02:06.620 the name is going to be “submit”, and the text in the button is simply going to read ‘Calculate’. 26 02:06.670 --> 02:14.670 All right. So now that we've created our buttons and our form, we're going to send this entire index.html 27 02:14.680 --> 02:20.920 file when the browser tries to access the home route. 28 02:20.920 --> 02:26.420 Now when we use res.send, we’re sending individual bits of HTML data. 29 02:26.650 --> 02:33.280 But if we want to send an entire web page, such as our index.html, we have to use something different. 30 02:33.310 --> 02:39.460 So if we head over to the Express API reference, and you can see it’s organized by which part you're looking 31 02:39.460 --> 02:45.060 for. And we're looking for the response part, and you can see it has a whole bunch of different methods, 32 02:45.130 --> 02:49.420 for example res.send, which is what we've been using so far. 33 02:49.600 --> 02:58.680 But there's also, if you scroll down, res.sendFile, and this transfers the file over to the browser 34 02:58.720 --> 03:00.610 when they make a get request. 35 03:00.730 --> 03:05.480 So, instead of saying res.send, we can say res.sendFile, 36 03:05.590 --> 03:12.160 and inside the parentheses we're going to give a single input, which is the location of the file that 37 03:12.160 --> 03:13.360 we want to send. 38 03:13.390 --> 03:20.260 Now, what we've been working with so far are what are called relative file paths, so we can simply say 39 03:20.260 --> 03:26.550 index.html, and it will go and search within the current file's location, 40 03:26.560 --> 03:31.280 so calculator.js, and look for something called index.html. 41 03:31.570 --> 03:37.180 Now this works a little bit differently when you have a server, because your server, at the moment, 42 03:37.180 --> 03:43.390 even though it's hosted on our own computer, and we know exactly where this Calculator project folder 43 03:43.390 --> 03:46.440 resides, it’s basically on our desktop, 44 03:46.540 --> 03:53.590 but in the future, when we deploy our server into the cloud or into somebody else's computer, then we 45 03:53.590 --> 03:56.090 have no idea what is that location. 46 03:56.230 --> 04:03.310 So instead of just sending a relative file path, what we can do is we can use a constant that’s called 47 04:03.620 --> 04:08.450 __dir, or directory, name. 48 04:08.500 --> 04:16.420 So it's two underscores dirname, and this is going to give you the file path of the current file no 49 04:16.420 --> 04:23.830 matter where it's hosted, on somebody else's computer, in the cloud, in a remote server, whatever it may 50 04:23.830 --> 04:24.410 be. 51 04:24.460 --> 04:29.580 And I just want to console.log this first, so I can show you what it looks like. 52 04:29.710 --> 04:38.640 So let's hit save and let's restart Nodemon. So let's head over to localhost:3000. 53 04:38.840 --> 04:45.500 And now, if we have a look inside our command line, then you can see it's printing out the directory name, 54 04:45.890 --> 04:51.800 which is inside a directory called Calculator, which is inside the Desktop folder, which is inside angelayu, 55 04:51.800 --> 04:54.030 which is inside the Users folder. 56 04:54.140 --> 05:00.710 So this is the entire file path that it took to get to this current file. 57 05:00.950 --> 05:03.870 So instead of using. 58 05:04.460 --> 05:12.350 So instead of saying response.send, we’re going to use sendFile, and instead of using just simply 59 05:12.410 --> 05:19.700 the relative file path, we're going to send the directory as directory name, and then 60 05:19.890 --> 05:23.820 “/index.html”. 61 05:24.020 --> 05:30.470 So what this full path will look like is it's going to be ‘Users/angelayu/Desktop/ 62 05:30.470 --> 05:34.410 Calculator/index.html’. 63 05:34.460 --> 05:39.680 And that should provide a path to reach this index.html file. 64 05:39.680 --> 05:46.940 So now, if we hit save, our Nodemon updates our server, we go ahead and reload our calculator, 65 05:47.250 --> 05:55.520 then you can see that we get all of those things that we had inside our index.html. And you can see 66 05:55.520 --> 06:02.210 that when you update this index.html, it will update immediately over here using Nodemon. 67 06:02.210 --> 06:05.290 So I’m just going to add a heading called ‘Calculator’, 68 06:05.300 --> 06:13.580 I'm going to hit save, and now, if I refresh this web site, then bam, we've already got our calculator. 69 06:13.580 --> 06:19.430 Now if this underscore underscore directory name is at all mysterious to you, 70 06:19.550 --> 06:24.770 what I want you to do is to create a new file called 71 06:24.850 --> 06:25.850 path.js, 72 06:26.060 --> 06:33.340 and, inside this path.js, we're simply going to console.log the directory name. 73 06:33.650 --> 06:41.360 And now, if we run this path.js, node path.js, you can see we get the location where it is 74 06:41.360 --> 06:44.810 in, which is currently inside this Calculator. 75 06:44.810 --> 06:52.370 And then we drag that path.js into our desktop, and we navigate back to our desktop, and then rerun 76 06:52.640 --> 06:53.210 our node 77 06:53.220 --> 06:54.330 path.js, 78 06:54.620 --> 07:02.000 then you can see now the path is Users/angelayu/Desktop. So have a play around with that and see 79 07:02.000 --> 07:03.410 if it makes sense. 80 07:03.410 --> 07:11.450 It's basically just a constant that allows us to grab hold of the current file location at any given 81 07:11.450 --> 07:16.940 time, so we can use that location and append the location of another file to it. 82 07:16.970 --> 07:20.610 This means that it doesn't matter if we're on any server, 83 07:20.690 --> 07:23.830 we don't have to know where this file resides. 84 07:23.870 --> 07:29.990 We can simply use directory name and then append the index.html, or whichever file you're trying to 85 07:30.110 --> 07:30.960 send. 86 07:30.980 --> 07:37.810 Now in the next lesson, we're going to be making some post requests from our index.html. 87 07:37.850 --> 07:40.130 So, once you're ready, head over to the next lesson.