0
1
00:00:00,780 --> 00:00:01,040
All right
1

2
00:00:01,050 --> 00:00:01,380
guys.
2

3
00:00:01,380 --> 00:00:02,670
Welcome back.
3

4
00:00:02,670 --> 00:00:08,780
Now in the HTL module, we explored how to create and use HTML forms.
4

5
00:00:08,890 --> 00:00:15,690
Now in this lesson, armed with our knowledge of Javascript, Node, Express, we're going to put it to use
5

6
00:00:15,780 --> 00: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

7
00:00:22,320 --> 00:00:23,820
on it in our server.
7

8
00:00:24,030 --> 00:00:27,350
So first things first. We’re going to create a new file.
8

9
00:00:27,360 --> 00:00:33,900
So inside the Calculator directory, I'm going to create a new file called index.html.
9

10
00:00:34,050 --> 00: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

11
00:00:42,000 --> 00:00:44,960
And I'm just going to call this page ‘Calculator’.
11

12
00:00:45,510 --> 00:00:49,850
Now inside the body we're going to include a form.
12

13
00:00:49,940 --> 00:00:56,610
Now this form is not going to have a class, but it will have an action and a method.
13

14
00:00:56,610 --> 00: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

15
00:01:03,090 --> 00:01:04,430
just what those things are.
15

16
00:01:04,500 --> 00:01:07,050
But before we do that let's add a few inputs.
16

17
00:01:07,080 --> 00:01:11,900
So the first input is going to have a name of num1,
17

18
00:01:12,090 --> 00:01:14,690
and it's also going to have a placeholder,
18

19
00:01:14,700 --> 00:01:19,960
so that's that text in grey that tells the user what they should type in this text box.
19

20
00:01:20,190 --> 00: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

21
00:01:27,510 --> 00:01:36,740
a name of num2, and the placeholder is going to be “Second Number”.
21

22
00:01:36,940 --> 00: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

23
00:01:43,000 --> 00:01:47,860
uniquely identifies the data that’s inside this input.
23

24
00:01:47,860 --> 00:01:52,240
That's what we're going to be using and drawing on to perform our calculation.
24

25
00:01:52,240 --> 00: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

26
00:02:00,490 --> 00:02:06,620
the name is going to be “submit”, and the text in the button is simply going to read ‘Calculate’.
26

27
00:02:06,670 --> 00: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

28
00:02:14,680 --> 00:02:20,920
file when the browser tries to access the home route.
28

29
00:02:20,920 --> 00:02:26,420
Now when we use res.send, we’re sending individual bits of HTML data.
29

30
00:02:26,650 --> 00: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

31
00:02:33,310 --> 00: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

32
00:02:39,460 --> 00: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

33
00:02:45,130 --> 00:02:49,420
for example res.send, which is what we've been using so far.
33

34
00:02:49,600 --> 00:02:58,680
But there's also, if you scroll down, res.sendFile, and this transfers the file over to the browser
34

35
00:02:58,720 --> 00:03:00,610
when they make a get request.
35

36
00:03:00,730 --> 00:03:05,480
So, instead of saying res.send, we can say res.sendFile,
36

37
00:03:05,590 --> 00:03:12,160
and inside the parentheses we're going to give a single input, which is the location of the file that
37

38
00:03:12,160 --> 00:03:13,360
we want to send.
38

39
00:03:13,390 --> 00: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

40
00:03:20,260 --> 00:03:26,550
index.html, and it will go and search within the current file's location,
40

41
00:03:26,560 --> 00:03:31,280
so calculator.js, and look for something called index.html.
41

42
00:03:31,570 --> 00:03:37,180
Now this works a little bit differently when you have a server, because your server, at the moment,
42

43
00:03:37,180 --> 00:03:43,390
even though it's hosted on our own computer, and we know exactly where this Calculator project folder
43

44
00:03:43,390 --> 00:03:46,440
resides, it’s basically on our desktop,
44

45
00:03:46,540 --> 00:03:53,590
but in the future, when we deploy our server into the cloud or into somebody else's computer, then we
45

46
00:03:53,590 --> 00:03:56,090
have no idea what is that location.
46

47
00:03:56,230 --> 00: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

48
00:04:03,620 --> 00:04:08,450
__dir, or directory, name.
48

49
00:04:08,500 --> 00: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

50
00:04:16,420 --> 00:04:23,830
matter where it's hosted, on somebody else's computer, in the cloud, in a remote server, whatever it may
50

51
00:04:23,830 --> 00:04:24,410
be.
51

52
00:04:24,460 --> 00:04:29,580
And I just want to console.log this first, so I can show you what it looks like.
52

53
00:04:29,710 --> 00:04:38,640
So let's hit save and let's restart Nodemon. So let's head over to localhost:3000.
53

54
00:04:38,840 --> 00: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

55
00:04:45,890 --> 00:04:51,800
which is inside a directory called Calculator, which is inside the Desktop folder, which is inside angelayu,
55

56
00:04:51,800 --> 00:04:54,030
which is inside the Users folder.
56

57
00:04:54,140 --> 00:05:00,710
So this is the entire file path that it took to get to this current file.
57

58
00:05:00,950 --> 00:05:03,870
So instead of using.
58

59
00:05:04,460 --> 00:05:12,350
So instead of saying response.send, we’re going to use sendFile, and instead of using just simply
59

60
00:05:12,410 --> 00:05:19,700
the relative file path, we're going to send the directory as directory name, and then 
60

61
00:05:19,890 --> 00:05:23,820
“/index.html”.
61

62
00:05:24,020 --> 00:05:30,470
So what this full path will look like is it's going to be ‘Users/angelayu/Desktop/
62

63
00:05:30,470 --> 00:05:34,410
Calculator/index.html’.
63

64
00:05:34,460 --> 00:05:39,680
And that should provide a path to reach this index.html file.
64

65
00:05:39,680 --> 00:05:46,940
So now, if we hit save, our Nodemon updates our server, we go ahead and reload our calculator,
65

66
00:05:47,250 --> 00: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

67
00:05:55,520 --> 00:06:02,210
that when you update this index.html, it will update immediately over here using Nodemon.
67

68
00:06:02,210 --> 00:06:05,290
So I’m just going to add a heading called ‘Calculator’,
68

69
00:06:05,300 --> 00: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

70
00:06:13,580 --> 00:06:19,430
Now if this underscore underscore directory name is at all mysterious to you,
70

71
00:06:19,550 --> 00:06:24,770
what I want you to do is to create a new file called
71

72
00:06:24,850 --> 00:06:25,850
path.js,
72

73
00:06:26,060 --> 00:06:33,340
and, inside this path.js, we're simply going to console.log the directory name.
73

74
00:06:33,650 --> 00: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

75
00:06:41,360 --> 00:06:44,810
in, which is currently inside this Calculator.
75

76
00:06:44,810 --> 00:06:52,370
And then we drag that path.js into our desktop, and we navigate back to our desktop, and then rerun
76

77
00:06:52,640 --> 00:06:53,210
our node 
77

78
00:06:53,220 --> 00:06:54,330
path.js,
78

79
00:06:54,620 --> 00:07:02,000
then you can see now the path is Users/angelayu/Desktop. So have a play around with that and see
79

80
00:07:02,000 --> 00:07:03,410
if it makes sense.
80

81
00:07:03,410 --> 00:07:11,450
It's basically just a constant that allows us to grab hold of the current file location at any given
81

82
00:07:11,450 --> 00:07:16,940
time, so we can use that location and append the location of another file to it.
82

83
00:07:16,970 --> 00:07:20,610
This means that it doesn't matter if we're on any server,
83

84
00:07:20,690 --> 00:07:23,830
we don't have to know where this file resides.
84

85
00:07:23,870 --> 00:07:29,990
We can simply use directory name and then append the index.html, or whichever file you're trying to
85

86
00:07:30,110 --> 00:07:30,960
send.
86

87
00:07:30,980 --> 00:07:37,810
Now in the next lesson, we're going to be making some post requests from our index.html.
87

88
00:07:37,850 --> 00:07:40,130
So, once you're ready, head over to the next lesson.