Okay.
As promised, let's get into URL encoding.
And before I get into the nitty-gritty, let's just take a step back and understand why it's necessary
in the first place.
We know that computers can only deal in numbers.
In fact, they can only deal in electrical impulses.
Something's either there, or it's not.
In other words, it's binary.
At the end of the day, it's a 1 or a 0.
But we know in our language itself, there are a lot more than just two binary values.
And of course, we have a combination of, call-it, numbers to represent letters, characters.
So if that's the case, then let's look at an example.
Let's say that my computer uses the following character map. For A, B, and C, it assigns the numbers
1, 2, 3 and 4.
Pretty simple.
But now let's say your computer uses a different character map. For the letter A, it assigns the number
5, for B the number 6, for C the number 7, and D is represented by the number 8.
Why would this pose a problem?
Well, let's say I wanted to send you the message,
"Hi".
Then the numbers, according to my character set would be 8 and 9, and those numbers would whiz
across the wire to your machine.
But for your computer, 8 or 9 will represent the letters D and E - it won't represent H, and I like
mine.
So your machine's going to decode the message to DE ... more like, heh 🤷‍♀️??? So can you see the problem we have
with this?
I'm sure you can.
It just means that two computers won't be able to speak to each other.
So to communicate effectively, we need a standard way of encoding characters to numbers.
And of course, we've looked at a few.
We've looked at ASCII, ISO, UTF-8, etc etc.
These are just different encoding types that have been developed over the years.
"Okay
Clyde, but this course isn't about encoding, it's about forms."
Okay.
Well, let's talk about encoding in the context of forms.
We know that when data in an HTML form is submitted, the names and values are sent to the server using
either the GET or the POST method.
By default, it's the GET method.
But anyway, let's look at a very simple form, just asking for a user's name and their password.
And one of my courses wouldn't be fulfilled if I didn't incorporate Wally into everything.
So here we go.
Let's say the name of the user is Wally Warthog, and his password is secret1.
And as I mentioned, the default method on a form is GET.
So let's just assume for now, because we're talking about URL encoding, that we're using a GET method
on our form.
What's going to happen now when the user clicks submit?
Well, that's right.
We're going to get this very long URL string. And I guess those characters, the actual W A L L Y, for example,
that makes sense.
That's also in the URL.
But what's useful and what's interesting to us developers is what are all these random characters?
The ? = +, the & ... what is all this and why are they there?
Well, my dear students, in order to understand this, you need to know a little bit about URLs themselves.
So let's look at a URL.
Let's just take a very simple URL.
Nothing too crazy about that, is there?
But let's break it up.
In fact, we can break it up into four parts.
Can you see which four parts?
Well, firstly, we've got what's known as the schema.
It always comes before the colon and the two forward slashes and it tells the web client, aka, it
tells the web browser, how to access the resource.
In this case, it's telling the web client to use the HyperText Transfer Protocol.
In other words, it's telling the browser to use HTTP to make the request for the resource.
But we don't only have HTTP. We have other protocols, we have other schemes like FTP, Mailto or
GIT, but the ones we mostly use is HTTP.
So that's the first part of this URL.
The second part is this "www.foo.com" - that's referred to as the host.
And you can think of this as just telling the browser where the resource is hosted or located.
The next part of the URL is what's known as the path.
And the path of the URL is optional, and it basically just digs deeper.
It's basically telling the browser what local resource is being requested.
And then finally we've got this funky thing on the end that begins with that question mark.
What is that?
That's referred to as the query string.
We're going to be talking more about this later and you'll see it in some of our code.
The query string is just made up of query parameters and it's used to send data to the server.
And of course when you're not sending data, you don't need it.
So this part of the URL is also optional.
Okay.
So that's a very high level overview of a URL.
And as I mentioned in the previous lecture, just as there are specifications for CSS, HTML and JavaScript,
there are also specs 📜 for working with URIs or URLs.
And one of the major, major specs that we're going to be looking at is the one specified by the Internet
Engineering Task Force in a document called RFC 3986, and also in fact 3987.
I don't want to jump ahead of myself.
We're going to be talking in more detail about these specs shortly.
But for now, just know that URLs are designed to only accept certain characters, not all characters.
Well, if they can only accept certain characters, what are they?
Well, historically, only US-ASCII characters were allowed to be in the URL.
But this poses a massive problem because often a URL contains characters outside of the ASCII character
set, and sometimes there are going to be reserved characters that are being used. Reserved characters
like spaces and tabs, etc etc.
And when these characters are used, the browser needs a way to convert them to valid ASCII format in
the URL itself, because the spec says we only allow certain characters.
And my dear students, this is exactly what URL encoding aka percent encoding, is all about.
It's the process of converting characters of a URL so that they can be safely transmitted over the internet.
So don't get lost in all the detail.
This lecture, kind-of, just was very high level, showing you why we need to have encoding in the first
place, because we need a standard way of machines talking to each other over the web.
And we've got these specs that define how a URL should be constructed.
Lump all of those together, and
we've got URL encoding to ensure that all the rules are being followed.
So that's what it's all about.
But enough of introductions.
Let's get into the meat.