In 1989, Tim Berners Lee invented the HTML that changed the world, but HTML wouldn't really do much
if we couldn't fetch documents from around the world and different computers.
For that to happen, Tim built the hypertext transfer protocol, or HTTP for short.
Now, remember these arrows from the diagrams that we've had?
We told you that these errors were simply the connected wires and cables that connected the World Wide
Web.
This right, you remember the diagram?
But you see, these are just wires, there are no instructions on how to do things for that, and you
need something called a protocol.
Think of it as a standard that everyone follows.
If everyone agrees, then the protocol works and can be used by everyone.
HTP that I have here is a protocol which allows the fetching of resources such as ASML documents, I
mean, it's in the name, right, hypertext transfer protocol.
Now, with the use of ASML and HDP, we now have the World Wide Web, we can grab a HTML files and receive
them.
If we go to Google dot com slash about, we go to the about HTML page, we grab it and receive it.
So HDB is the protocol or the rules that we use over the wires.
It is the foundation of any data exchange on the Web, and it paved the way for something called a client
server protocol, which means requests are initiated by the recipient, which in our case is the Web
browser.
So they sent out a request using HTP.
The server now understands what the Web browser saying because it's speaking in HTP and the server can
now respond with HTML and the browser understands it because it's speaking through HTP once again.
So you should think of HDP as a common language that a client and a server can use to communicate.
They're simply saying, hey, can you give me this document?
And the server can say, yeah, no problem, here it is.
And up until this point, we haven't really spoken to a server in Europe, have we?
We build the front end applications or the client facing applications using e-mail, access, javascript
and react.
But we lived in our own world, no communications with another computer.
HDP allows us now to communicate with servers with the outside world, so let's go over the terminology
one more time clients.
And servers can communicate by exchanging individual messages.
The messages sent by the client, usually a Web browser, are called requests and the messages sent
by the server.
Are usually called responses.
So if HDP is the language that allows us to communicate between these two, teach me some of the words,
right?
I mean, that's a good question.
And lucky for you, HTP is quite easy to learn because you only have a few words.
And I'm going to show you what they are right now.
You have get you have post.
You have put.
And finally, you have the late.
And now you're thinking, that's it, and yeah, HTP is beautiful because it's just simple, you don't
need to overcomplicate things.
You learn these four words and these languages and he can build the app of your dreams, so let's go
through it one by one get means.
Well, I want to get an e-mail file.
So you ask to get something and the server responds with that request.
A post says, I want to post something.
So that is I'm going to send over some data to Google servers.
And I want you to post I want you to add it to your servers or your database.
Put is I'm going to send you some data and I want you to update some data that already exists in Google
servers and just updated with this new information and then delete means we'll delete a piece of data
on the back end on the servers are on the database.
So if we use Twitter as an example, get will be to receive that Twitter feed with all the tweets from
today, post would be if you created a new user and you want to add that user to the Twitter servers.
Put would be if you made a tweet, but you want to make a change or an edit, so you added that tweet
and delete will mean, well, you either delete your user account or delete a tweet.
And don't worry, we're going to use this when we get to the back end section and we build our final
project.
Now, over the years, HTP was extended to not only worry about text.
Not only fetch hypertext documents like HTML, but also images and videos and post content to servers
like with HTML form results and can also be used to fetch part of documents to update Web pages on demand,
which is called Ajax.
And we have a video coming up talking about this.
But the main idea still stands using these four verbs we just learned we can now communicate with service.
All right, so we know that this area over here at the top uses HDB to make requests using one of these
four verbs.
OK, so I think you get the request part.
Now, what does a server respond with, what above response here the server sends you to Maine thinks?
One is an HTP message that is something that you've definitely seen before, and I'll link to this W3
school's resources.
A two hundred message means successful, you probably have seen two hundred, OK, before, you might
have seen four or four messages, which means not found.
If you enter a U.
RL that doesn't exist, you'll get a four four and maybe sometimes you'll get a five hundred error message.
That is.
Well, there's something wrong with the server.
So this is just a no code that comes with every response that tells you the response of the server.
So that's the first one.
The second one is usually some sort of data like e-mail, and so far that's what we've been doing.
But in the next videos, I'll show you that it can send other things other than just simple e-mail.
So let's add to the diagram now.
We want to say that this also has a status code and we'll say two hundred for now, that everything
was fine.
And the response we give the status code, plus the new HTML file.
All right, let's actually demonstrate this online to see how you can watch this action take place.
I have over here a great website called Example Dotcom, and it's a simple website you can go visit
of right now, but the cool part about it is if you open up your developer console.
Up to this point, we've looked at the 11 step and then the console.
I want to show you the network tab that we have here now, the network tab.
You might have to click on some of these icons and you'll see that different things will pop up, make
sure that the filter is gone.
Everything is on clicked and now an example, dotcom, while this is open.
Just simply refresh.
And look at that, I'm going to click on this icon, which makes it a little bit bigger.
This is a plug in, so don't worry about this JavaScript.
But the top thing it says example, dotcom status, two hundred, OK, and type document.
And it even tells me the size, the time that it took to get this, which is fifty three milliseconds.
That's pretty fast.
So that means the server responded with two hundred if I click on this.
I got a whole bunch of things that we don't really need to worry about, but a few things request requested
URL, this is what we requested.
We get a status code of two hundred from the server and if we click on the response.
There's a response message we received the e-mail document from the server.
If we go back to headers, we also see that our request method was a get we did a get request.
Let's close this and refresh again.
I now get a three or four status, a three or four, if we look over here, it means not modified,
indicates the request has not been modified since the last requested.
Because I've already requested this now Google is smart enough to say, oh, I'm not going to worry
about the server and requesting the same thing over and over, I already have it memorized.
So here it is.
Very cool, so network tab is really, really useful for that.
All right, so you can go ahead and play with example Dotcom and see for yourself how HTP works.
And by the way, yes, this HTP that you see here, that's what it means when you do an HTP request,
it says, hey, do HTP.
We're using the worldwide web and go request this from the server, Rakel, and if you're wondering
about the don't worry, I'll let you know at the end of this video what that means as well.
All right, now, what if I want to send data, if we go back to our diagram, I'm just doing a get
request, but what if I want to actually send some information to the server other than some you are
saying I want this information?
Well, there's two ways that you can do it.
One is something called query string.
And then the second one is through the body of the request.
So I'm going to show you how both of those work I have over here, the form that we created in our first
advanced H.M.S. when we only knew.
Let's open this file up.
I have it over here if I double click.
You remember this, don't you?
We've come a long, long way in this form, if you remember, we had a form method get.
And now you might understand what this gap means, it's saying with this form, I want you to do a get
request.
Let's see what happens when I click register while opening the network tab.
I'm going to click register.
All right, so we have this request, we see that we have made a request and it has created these things
called Querrey Strings, the first way of sending data to the server.
With a request, if you want to send information through a form, it adds it to the euro using this
questionmark, which says, hey, I'm about to send you some query strings and it's going to have a
key and a value in this case.
First name, last name, everything's empty.
So there's no information.
But otherwise we'll say first name equals Andre if I click on this.
We see that there's query string parameters that we've sent.
We have first name, last name, email, password and birthday, which is blank, but if we scroll down
in cars, default is vulval so that we have cars, Volvo.
So this information now is sent to the server that's query string parameters using get and we did mention
one thing, though, we see that we have password in here that's not very secure, is it?
If I went back to the form and I type in secret and I click.
Register again.
Well, now I have my password out in the open, sent over the wire, and I even have it up here.
My URL bar.
All right, we'll get back to that.
So that is one way, the second way is through the body of the request.
Let me show you how that works.
The way we send information to the body is we use a post request.
And this is something that you'll more often see than a get request is that we want to add some form
data to.
The server, so we want to post something, if I change this over here, I'm going to save this and
let's open up a new tab.
With the new save data, this one is a post form by opening up here and I type in password secret.
And I click on.
Register.
I get registered e-mail, but no query strings.
If I click on this.
I see that now, instead of Querrey Strings, it's form data and it even says content type application
X, you form your URL encoding and this is just an HTML way of saying that this is a form and this is
the body, but not displaying here.
So now the server can access it, not from the query parents.
And don't worry, I'll show you how servers do that when we get to the back end section instead of accessing
it through the query programs, I can now access it through the form data.
So let's go back to the diagram.
We now understand that we can do.
HTTP requests using get posted delete I can use.
Querrey String's.
Which are at the top of the euro to send the data or the body.
Of the request, and then the server responds with a status code based on how my request was, and it
returns that with a response, but the one issue we saw was that, well, the password.
Was visible in both cases, wasn't it?
And what if we had I have a scary looking person over here.
There you go.
What if we had.
A person who was watching our communication, our HTP requests and monitoring it, if I used query strings
to put my password in there, well, he can just look over my shoulders and see, oh, Andre's password
is secret.
I can now log into his Google account.
Or if I use the body way of sending data, well, he can find a way to get this request to come over
to him first.
And.
Just look at the.
Form data and see that my password is secret.
It's not very good, is.
Well, one solution to this was the idea of HTP s.
Now, HTP means hypertext transfer protocol secure, and you can see over here that.
W three C uses the secure version of the communication between the browser and the websites are now
encrypted.
And what does that mean, encrypted just means that it's jumbled up so only the client and the server
know the secret parts or secret key to read the message.
And this is part the secret uses a technology called transport layer security, or its predecessor,
Secure Sockets Layer or RTLS and SSL for short.
So now, even with a GPS, if the attacker or what we call a man in the middle, the person who is just
monitoring our requests, even if they get our password, it's going to be just complete gibberish.
It's going to have something similar to this.
And, well, that's not our pastor.
So it's going to be meaningless.
The voice that attack.
This is just a tip.
As a developer, they should tell all your friends if you're ever sending sensitive information.
Maybe logging into a bank account, make sure that there's a https out there, if there's no https when
you're sending maybe your log in with your password.
Well, that's not secure.
All right, let's review.
Your Web browser is a HDB client sending requests to the server machines when the browser user enters
FOI requests by either opening a file or typing a neutral or clicking on a hypertext link, an anchor
tag, the browser builds and HTTP request and sends it to communicate with the server.
Now the server can get information back to us.
The earliest version we could use your URL parameters such as Google dot com about.
And just specifically, get him out.
That was it.
Then came the form.
So we can now actually send more data other than just the you are saying we want to go to this e-mail
file now, we can use get.
Or post to send it either through a body or a query string and a server can take action based on that
data and return a new page.
And this is the foundation of the Web and how the World Wide Web we have now was made possible through
client server communication, in the next few videos, we're going to learn even more to really understand
this power.
I'll see you in the next one.
Bubby.