1
00:00:01,280 --> 00:00:10,100
In 1989, Tim Berners Lee invented the HTML that changed the world, but HTML wouldn't really do much

2
00:00:10,100 --> 00:00:14,390
if we couldn't fetch documents from around the world and different computers.

3
00:00:15,270 --> 00:00:23,130
For that to happen, Tim built the hypertext transfer protocol, or HTTP for short.

4
00:00:24,140 --> 00:00:28,640
Now, remember these arrows from the diagrams that we've had?

5
00:00:29,900 --> 00:00:37,100
We told you that these errors were simply the connected wires and cables that connected the World Wide

6
00:00:37,100 --> 00:00:37,520
Web.

7
00:00:38,720 --> 00:00:41,060
This right, you remember the diagram?

8
00:00:43,080 --> 00:00:50,700
But you see, these are just wires, there are no instructions on how to do things for that, and you

9
00:00:50,700 --> 00:00:52,950
need something called a protocol.

10
00:00:53,730 --> 00:00:56,490
Think of it as a standard that everyone follows.

11
00:00:56,730 --> 00:01:01,680
If everyone agrees, then the protocol works and can be used by everyone.

12
00:01:03,300 --> 00:01:12,690
HTP that I have here is a protocol which allows the fetching of resources such as ASML documents, I

13
00:01:12,690 --> 00:01:16,290
mean, it's in the name, right, hypertext transfer protocol.

14
00:01:17,400 --> 00:01:27,300
Now, with the use of ASML and HDP, we now have the World Wide Web, we can grab a HTML files and receive

15
00:01:27,300 --> 00:01:27,620
them.

16
00:01:27,810 --> 00:01:33,870
If we go to Google dot com slash about, we go to the about HTML page, we grab it and receive it.

17
00:01:34,170 --> 00:01:40,950
So HDB is the protocol or the rules that we use over the wires.

18
00:01:43,280 --> 00:01:50,600
It is the foundation of any data exchange on the Web, and it paved the way for something called a client

19
00:01:50,600 --> 00:01:59,900
server protocol, which means requests are initiated by the recipient, which in our case is the Web

20
00:01:59,900 --> 00:02:00,350
browser.

21
00:02:01,810 --> 00:02:04,710
So they sent out a request using HTP.

22
00:02:05,740 --> 00:02:13,900
The server now understands what the Web browser saying because it's speaking in HTP and the server can

23
00:02:13,900 --> 00:02:20,890
now respond with HTML and the browser understands it because it's speaking through HTP once again.

24
00:02:21,820 --> 00:02:29,460
So you should think of HDP as a common language that a client and a server can use to communicate.

25
00:02:29,830 --> 00:02:33,160
They're simply saying, hey, can you give me this document?

26
00:02:33,990 --> 00:02:37,080
And the server can say, yeah, no problem, here it is.

27
00:02:37,770 --> 00:02:42,300
And up until this point, we haven't really spoken to a server in Europe, have we?

28
00:02:43,290 --> 00:02:50,140
We build the front end applications or the client facing applications using e-mail, access, javascript

29
00:02:50,140 --> 00:02:50,820
and react.

30
00:02:51,830 --> 00:02:56,270
But we lived in our own world, no communications with another computer.

31
00:02:57,770 --> 00:03:04,660
HDP allows us now to communicate with servers with the outside world, so let's go over the terminology

32
00:03:04,660 --> 00:03:06,730
one more time clients.

33
00:03:07,870 --> 00:03:12,760
And servers can communicate by exchanging individual messages.

34
00:03:13,950 --> 00:03:21,630
The messages sent by the client, usually a Web browser, are called requests and the messages sent

35
00:03:21,630 --> 00:03:22,440
by the server.

36
00:03:23,580 --> 00:03:25,950
Are usually called responses.

37
00:03:28,110 --> 00:03:35,370
So if HDP is the language that allows us to communicate between these two, teach me some of the words,

38
00:03:35,370 --> 00:03:35,620
right?

39
00:03:36,120 --> 00:03:37,560
I mean, that's a good question.

40
00:03:37,650 --> 00:03:43,110
And lucky for you, HTP is quite easy to learn because you only have a few words.

41
00:03:43,950 --> 00:03:45,750
And I'm going to show you what they are right now.

42
00:03:45,900 --> 00:03:48,990
You have get you have post.

43
00:03:49,080 --> 00:03:50,070
You have put.

44
00:03:51,810 --> 00:03:53,850
And finally, you have the late.

45
00:03:57,210 --> 00:04:05,070
And now you're thinking, that's it, and yeah, HTP is beautiful because it's just simple, you don't

46
00:04:05,070 --> 00:04:06,330
need to overcomplicate things.

47
00:04:07,620 --> 00:04:15,930
You learn these four words and these languages and he can build the app of your dreams, so let's go

48
00:04:15,930 --> 00:04:18,750
through it one by one get means.

49
00:04:18,750 --> 00:04:22,360
Well, I want to get an e-mail file.

50
00:04:22,530 --> 00:04:27,990
So you ask to get something and the server responds with that request.

51
00:04:28,290 --> 00:04:31,620
A post says, I want to post something.

52
00:04:31,620 --> 00:04:35,130
So that is I'm going to send over some data to Google servers.

53
00:04:35,340 --> 00:04:41,280
And I want you to post I want you to add it to your servers or your database.

54
00:04:42,360 --> 00:04:50,220
Put is I'm going to send you some data and I want you to update some data that already exists in Google

55
00:04:50,220 --> 00:04:56,370
servers and just updated with this new information and then delete means we'll delete a piece of data

56
00:04:57,180 --> 00:04:59,760
on the back end on the servers are on the database.

57
00:05:01,140 --> 00:05:08,190
So if we use Twitter as an example, get will be to receive that Twitter feed with all the tweets from

58
00:05:08,190 --> 00:05:16,920
today, post would be if you created a new user and you want to add that user to the Twitter servers.

59
00:05:17,940 --> 00:05:24,750
Put would be if you made a tweet, but you want to make a change or an edit, so you added that tweet

60
00:05:25,170 --> 00:05:30,120
and delete will mean, well, you either delete your user account or delete a tweet.

61
00:05:30,930 --> 00:05:35,190
And don't worry, we're going to use this when we get to the back end section and we build our final

62
00:05:35,190 --> 00:05:35,610
project.

63
00:05:36,390 --> 00:05:41,400
Now, over the years, HTP was extended to not only worry about text.

64
00:05:42,470 --> 00:05:51,050
Not only fetch hypertext documents like HTML, but also images and videos and post content to servers

65
00:05:51,050 --> 00:05:59,930
like with HTML form results and can also be used to fetch part of documents to update Web pages on demand,

66
00:05:59,960 --> 00:06:01,220
which is called Ajax.

67
00:06:01,580 --> 00:06:03,980
And we have a video coming up talking about this.

68
00:06:04,910 --> 00:06:12,230
But the main idea still stands using these four verbs we just learned we can now communicate with service.

69
00:06:13,190 --> 00:06:21,260
All right, so we know that this area over here at the top uses HDB to make requests using one of these

70
00:06:21,260 --> 00:06:22,040
four verbs.

71
00:06:23,300 --> 00:06:25,640
OK, so I think you get the request part.

72
00:06:27,110 --> 00:06:32,930
Now, what does a server respond with, what above response here the server sends you to Maine thinks?

73
00:06:34,390 --> 00:06:43,280
One is an HTP message that is something that you've definitely seen before, and I'll link to this W3

74
00:06:43,330 --> 00:06:44,500
school's resources.

75
00:06:46,110 --> 00:06:52,530
A two hundred message means successful, you probably have seen two hundred, OK, before, you might

76
00:06:52,530 --> 00:06:56,930
have seen four or four messages, which means not found.

77
00:06:57,240 --> 00:06:58,660
If you enter a U.

78
00:06:58,710 --> 00:07:04,230
RL that doesn't exist, you'll get a four four and maybe sometimes you'll get a five hundred error message.

79
00:07:04,230 --> 00:07:04,710
That is.

80
00:07:04,980 --> 00:07:07,020
Well, there's something wrong with the server.

81
00:07:07,410 --> 00:07:14,340
So this is just a no code that comes with every response that tells you the response of the server.

82
00:07:14,880 --> 00:07:15,810
So that's the first one.

83
00:07:18,270 --> 00:07:24,690
The second one is usually some sort of data like e-mail, and so far that's what we've been doing.

84
00:07:25,710 --> 00:07:31,050
But in the next videos, I'll show you that it can send other things other than just simple e-mail.

85
00:07:31,110 --> 00:07:33,180
So let's add to the diagram now.

86
00:07:34,110 --> 00:07:40,830
We want to say that this also has a status code and we'll say two hundred for now, that everything

87
00:07:41,400 --> 00:07:42,480
was fine.

88
00:07:43,430 --> 00:07:50,480
And the response we give the status code, plus the new HTML file.

89
00:07:50,870 --> 00:07:56,660
All right, let's actually demonstrate this online to see how you can watch this action take place.

90
00:07:58,200 --> 00:08:04,350
I have over here a great website called Example Dotcom, and it's a simple website you can go visit

91
00:08:04,350 --> 00:08:09,240
of right now, but the cool part about it is if you open up your developer console.

92
00:08:11,360 --> 00:08:15,020
Up to this point, we've looked at the 11 step and then the console.

93
00:08:16,280 --> 00:08:21,350
I want to show you the network tab that we have here now, the network tab.

94
00:08:21,860 --> 00:08:27,860
You might have to click on some of these icons and you'll see that different things will pop up, make

95
00:08:27,860 --> 00:08:30,620
sure that the filter is gone.

96
00:08:31,600 --> 00:08:36,340
Everything is on clicked and now an example, dotcom, while this is open.

97
00:08:37,510 --> 00:08:39,909
Just simply refresh.

98
00:08:42,840 --> 00:08:47,010
And look at that, I'm going to click on this icon, which makes it a little bit bigger.

99
00:08:47,820 --> 00:08:50,040
This is a plug in, so don't worry about this JavaScript.

100
00:08:50,250 --> 00:08:57,390
But the top thing it says example, dotcom status, two hundred, OK, and type document.

101
00:08:57,390 --> 00:09:03,060
And it even tells me the size, the time that it took to get this, which is fifty three milliseconds.

102
00:09:03,090 --> 00:09:03,850
That's pretty fast.

103
00:09:04,620 --> 00:09:08,760
So that means the server responded with two hundred if I click on this.

104
00:09:09,840 --> 00:09:15,360
I got a whole bunch of things that we don't really need to worry about, but a few things request requested

105
00:09:15,370 --> 00:09:17,310
URL, this is what we requested.

106
00:09:18,060 --> 00:09:25,200
We get a status code of two hundred from the server and if we click on the response.

107
00:09:26,240 --> 00:09:31,640
There's a response message we received the e-mail document from the server.

108
00:09:32,700 --> 00:09:38,670
If we go back to headers, we also see that our request method was a get we did a get request.

109
00:09:40,760 --> 00:09:42,980
Let's close this and refresh again.

110
00:09:44,340 --> 00:09:51,690
I now get a three or four status, a three or four, if we look over here, it means not modified,

111
00:09:51,690 --> 00:09:56,130
indicates the request has not been modified since the last requested.

112
00:09:57,150 --> 00:10:03,150
Because I've already requested this now Google is smart enough to say, oh, I'm not going to worry

113
00:10:03,150 --> 00:10:07,590
about the server and requesting the same thing over and over, I already have it memorized.

114
00:10:07,600 --> 00:10:08,370
So here it is.

115
00:10:10,020 --> 00:10:13,440
Very cool, so network tab is really, really useful for that.

116
00:10:13,890 --> 00:10:19,800
All right, so you can go ahead and play with example Dotcom and see for yourself how HTP works.

117
00:10:21,790 --> 00:10:29,020
And by the way, yes, this HTP that you see here, that's what it means when you do an HTP request,

118
00:10:29,020 --> 00:10:31,270
it says, hey, do HTP.

119
00:10:32,530 --> 00:10:39,850
We're using the worldwide web and go request this from the server, Rakel, and if you're wondering

120
00:10:39,850 --> 00:10:43,620
about the don't worry, I'll let you know at the end of this video what that means as well.

121
00:10:46,270 --> 00:10:52,990
All right, now, what if I want to send data, if we go back to our diagram, I'm just doing a get

122
00:10:52,990 --> 00:10:59,680
request, but what if I want to actually send some information to the server other than some you are

123
00:10:59,890 --> 00:11:01,720
saying I want this information?

124
00:11:02,020 --> 00:11:04,150
Well, there's two ways that you can do it.

125
00:11:05,330 --> 00:11:07,310
One is something called query string.

126
00:11:08,340 --> 00:11:11,520
And then the second one is through the body of the request.

127
00:11:13,150 --> 00:11:20,500
So I'm going to show you how both of those work I have over here, the form that we created in our first

128
00:11:20,500 --> 00:11:23,470
advanced H.M.S. when we only knew.

129
00:11:24,730 --> 00:11:25,870
Let's open this file up.

130
00:11:29,660 --> 00:11:31,730
I have it over here if I double click.

131
00:11:33,030 --> 00:11:34,470
You remember this, don't you?

132
00:11:34,530 --> 00:11:42,300
We've come a long, long way in this form, if you remember, we had a form method get.

133
00:11:43,350 --> 00:11:50,370
And now you might understand what this gap means, it's saying with this form, I want you to do a get

134
00:11:50,550 --> 00:11:51,150
request.

135
00:11:52,230 --> 00:11:57,780
Let's see what happens when I click register while opening the network tab.

136
00:12:00,010 --> 00:12:01,960
I'm going to click register.

137
00:12:03,840 --> 00:12:12,600
All right, so we have this request, we see that we have made a request and it has created these things

138
00:12:12,600 --> 00:12:17,430
called Querrey Strings, the first way of sending data to the server.

139
00:12:18,500 --> 00:12:25,820
With a request, if you want to send information through a form, it adds it to the euro using this

140
00:12:26,240 --> 00:12:32,330
questionmark, which says, hey, I'm about to send you some query strings and it's going to have a

141
00:12:32,330 --> 00:12:35,180
key and a value in this case.

142
00:12:35,180 --> 00:12:37,280
First name, last name, everything's empty.

143
00:12:37,280 --> 00:12:38,270
So there's no information.

144
00:12:38,270 --> 00:12:43,280
But otherwise we'll say first name equals Andre if I click on this.

145
00:12:45,170 --> 00:12:49,130
We see that there's query string parameters that we've sent.

146
00:12:50,700 --> 00:12:56,850
We have first name, last name, email, password and birthday, which is blank, but if we scroll down

147
00:12:57,300 --> 00:13:01,590
in cars, default is vulval so that we have cars, Volvo.

148
00:13:02,590 --> 00:13:11,440
So this information now is sent to the server that's query string parameters using get and we did mention

149
00:13:11,440 --> 00:13:15,990
one thing, though, we see that we have password in here that's not very secure, is it?

150
00:13:16,420 --> 00:13:21,520
If I went back to the form and I type in secret and I click.

151
00:13:22,880 --> 00:13:24,170
Register again.

152
00:13:26,130 --> 00:13:32,250
Well, now I have my password out in the open, sent over the wire, and I even have it up here.

153
00:13:33,710 --> 00:13:34,670
My URL bar.

154
00:13:34,940 --> 00:13:36,170
All right, we'll get back to that.

155
00:13:37,650 --> 00:13:43,920
So that is one way, the second way is through the body of the request.

156
00:13:44,820 --> 00:13:45,960
Let me show you how that works.

157
00:13:46,710 --> 00:13:52,350
The way we send information to the body is we use a post request.

158
00:13:52,920 --> 00:13:59,280
And this is something that you'll more often see than a get request is that we want to add some form

159
00:13:59,280 --> 00:14:00,510
data to.

160
00:14:01,460 --> 00:14:07,400
The server, so we want to post something, if I change this over here, I'm going to save this and

161
00:14:07,400 --> 00:14:09,110
let's open up a new tab.

162
00:14:10,280 --> 00:14:18,980
With the new save data, this one is a post form by opening up here and I type in password secret.

163
00:14:20,140 --> 00:14:21,490
And I click on.

164
00:14:22,800 --> 00:14:23,490
Register.

165
00:14:26,440 --> 00:14:31,180
I get registered e-mail, but no query strings.

166
00:14:32,280 --> 00:14:33,270
If I click on this.

167
00:14:36,200 --> 00:14:45,380
I see that now, instead of Querrey Strings, it's form data and it even says content type application

168
00:14:45,770 --> 00:14:53,720
X, you form your URL encoding and this is just an HTML way of saying that this is a form and this is

169
00:14:53,750 --> 00:14:57,240
the body, but not displaying here.

170
00:14:57,740 --> 00:15:01,490
So now the server can access it, not from the query parents.

171
00:15:01,490 --> 00:15:06,860
And don't worry, I'll show you how servers do that when we get to the back end section instead of accessing

172
00:15:06,860 --> 00:15:11,640
it through the query programs, I can now access it through the form data.

173
00:15:12,020 --> 00:15:13,460
So let's go back to the diagram.

174
00:15:15,480 --> 00:15:17,820
We now understand that we can do.

175
00:15:19,150 --> 00:15:23,710
HTTP requests using get posted delete I can use.

176
00:15:24,980 --> 00:15:26,000
Querrey String's.

177
00:15:27,340 --> 00:15:33,250
Which are at the top of the euro to send the data or the body.

178
00:15:34,220 --> 00:15:40,400
Of the request, and then the server responds with a status code based on how my request was, and it

179
00:15:40,410 --> 00:15:47,600
returns that with a response, but the one issue we saw was that, well, the password.

180
00:15:48,490 --> 00:15:51,760
Was visible in both cases, wasn't it?

181
00:15:52,120 --> 00:15:55,960
And what if we had I have a scary looking person over here.

182
00:15:57,430 --> 00:15:57,950
There you go.

183
00:15:58,480 --> 00:15:59,740
What if we had.

184
00:16:00,760 --> 00:16:10,090
A person who was watching our communication, our HTP requests and monitoring it, if I used query strings

185
00:16:10,090 --> 00:16:17,050
to put my password in there, well, he can just look over my shoulders and see, oh, Andre's password

186
00:16:17,050 --> 00:16:18,000
is secret.

187
00:16:18,640 --> 00:16:20,830
I can now log into his Google account.

188
00:16:22,130 --> 00:16:32,180
Or if I use the body way of sending data, well, he can find a way to get this request to come over

189
00:16:32,180 --> 00:16:33,170
to him first.

190
00:16:35,360 --> 00:16:35,870
And.

191
00:16:36,780 --> 00:16:37,980
Just look at the.

192
00:16:39,630 --> 00:16:42,420
Form data and see that my password is secret.

193
00:16:43,900 --> 00:16:44,740
It's not very good, is.

194
00:16:46,300 --> 00:16:51,580
Well, one solution to this was the idea of HTP s.

195
00:16:53,990 --> 00:17:00,740
Now, HTP means hypertext transfer protocol secure, and you can see over here that.

196
00:17:02,270 --> 00:17:10,130
W three C uses the secure version of the communication between the browser and the websites are now

197
00:17:10,310 --> 00:17:11,030
encrypted.

198
00:17:12,140 --> 00:17:19,730
And what does that mean, encrypted just means that it's jumbled up so only the client and the server

199
00:17:20,150 --> 00:17:25,010
know the secret parts or secret key to read the message.

200
00:17:26,569 --> 00:17:34,400
And this is part the secret uses a technology called transport layer security, or its predecessor,

201
00:17:34,400 --> 00:17:39,320
Secure Sockets Layer or RTLS and SSL for short.

202
00:17:41,770 --> 00:17:51,070
So now, even with a GPS, if the attacker or what we call a man in the middle, the person who is just

203
00:17:51,070 --> 00:17:57,250
monitoring our requests, even if they get our password, it's going to be just complete gibberish.

204
00:17:57,550 --> 00:18:01,390
It's going to have something similar to this.

205
00:18:01,390 --> 00:18:03,820
And, well, that's not our pastor.

206
00:18:03,820 --> 00:18:05,630
So it's going to be meaningless.

207
00:18:05,680 --> 00:18:06,610
The voice that attack.

208
00:18:07,540 --> 00:18:08,650
This is just a tip.

209
00:18:09,130 --> 00:18:15,160
As a developer, they should tell all your friends if you're ever sending sensitive information.

210
00:18:16,210 --> 00:18:23,950
Maybe logging into a bank account, make sure that there's a https out there, if there's no https when

211
00:18:23,950 --> 00:18:27,220
you're sending maybe your log in with your password.

212
00:18:27,550 --> 00:18:29,230
Well, that's not secure.

213
00:18:30,290 --> 00:18:31,580
All right, let's review.

214
00:18:32,520 --> 00:18:41,910
Your Web browser is a HDB client sending requests to the server machines when the browser user enters

215
00:18:41,910 --> 00:18:49,770
FOI requests by either opening a file or typing a neutral or clicking on a hypertext link, an anchor

216
00:18:49,770 --> 00:18:56,250
tag, the browser builds and HTTP request and sends it to communicate with the server.

217
00:18:56,580 --> 00:18:59,970
Now the server can get information back to us.

218
00:19:00,240 --> 00:19:05,880
The earliest version we could use your URL parameters such as Google dot com about.

219
00:19:06,880 --> 00:19:09,350
And just specifically, get him out.

220
00:19:09,400 --> 00:19:09,880
That was it.

221
00:19:10,930 --> 00:19:13,330
Then came the form.

222
00:19:14,570 --> 00:19:20,140
So we can now actually send more data other than just the you are saying we want to go to this e-mail

223
00:19:20,180 --> 00:19:23,150
file now, we can use get.

224
00:19:24,850 --> 00:19:36,640
Or post to send it either through a body or a query string and a server can take action based on that

225
00:19:36,640 --> 00:19:38,770
data and return a new page.

226
00:19:40,490 --> 00:19:47,170
And this is the foundation of the Web and how the World Wide Web we have now was made possible through

227
00:19:47,210 --> 00:19:54,320
client server communication, in the next few videos, we're going to learn even more to really understand

228
00:19:54,320 --> 00:19:54,800
this power.

229
00:19:55,870 --> 00:19:56,830
I'll see you in the next one.

230
00:19:57,670 --> 00:19:58,030
Bubby.