Introduction to PHP Script Input & The GET Method

Hello, and welcome back to Educator.com's Introduction to PHP course.0000

In today's lesson, we are going to be talking about how to provide input to your PHP script,0004

and specifically how input is provided using the GET HTTP method.0009

In today's lesson, we are going to talk about a couple of different methods that are available for providing input to a script.0017

We are going to talk, in particular, about the GET method, which is what we are going to be using throughout this course.0024

We are going to do a slight review of HTML forms, and then go over something known as URL encoding.0030

How do you provide input to a PHP script? Well, there are three basic ways that you can do that.0041

There are two HTTP methods known as the GET method and the POST method,0046

and if you have worked with HTML forms before, you may be familiar with that.0051

Also, you can use what are known as cookies to provide information, as well.0054

In this course, we are only going to be dealing with the GET method; and the reason for that is that the POST and cookie method0060

are somewhat more complicated and advanced topics, so we are going to save them for the advanced course.0065

In addition, by using the GET method, it makes debugging our scripts easier.0071

In a sense, we are just learning PHP, and we are going to be making mistakes along the way; using the GET method is going to help us with that.0075

Now, the way that these methods work, whether it's GET, POST, or cookies--they provide information to a script by name/value pairs.0082

For example, you might have the name username, which is just a property, let's say, called username; and you are going to set it the value JSmith.0091

Or, the user using your HTML web page is going to set that value.0102

This is a name/value pair, and what is going to be done is: it is going to be sent to the web server when the user submits the web page.0108

Now, let's talk a little bit more about the GET method, the HTTP method GET,0118

and how it works to provide input to a PHP script--or, in fact, any other script.0124

What it does is: it appends the name/value pairs that we had just talked about, or any number of name/value pairs,0129

to the destination script's URL; and it does so in the manner shown down here.0136

So, for example, we have a script named process.php, and using GET, we want to pass it a name/value pair.0143

In this case, we have name1 as the name and value1 as the value; they are just sample values for those.0152

The way you append them is with a question mark.0159

And so, any time the GET method provides input to a script, it does so appending stuff to the end of the URL.0164

When you append the name/value pairs to a URL, that is known as a query string.0173

So, everything after the question mark in this particular link is known as a query string, and it's composed of name/value pairs.0180

Now, one thing to note is that the GET method can actually be used to input data to a script using HTML forms, or it can be done manually.0188

So, when you have an HTML form (which we are going to get to in a little bit), you can set it to use the GET method,0199

and the HTML form automatically appends the name/value pairs you submit, that are created by your form, to the URL for you.0205

You alternatively can do it manually, as well, which we are going to look at a little bit towards the end of the lesson.0213

Let's take a look at a script here I've created called simpleForm.html.0220

Basically, what it is: it just has a simple text field and a Submit button.0228

Again, we are going to get into forms in a little bit; but it uses the GET method to submit things.0231

And so, if I type my name in--Matthew--and click Submit, you can see, up in the address bar of the browser,0237

that it has appended to the URL simpleForm.html a question mark, followed by text1=Matthew,0246

text1 being the name of the name/value pair, Matthew being the value that I supplied to the form.0254

You can also see that the question mark has been appended to simpleForm.html, which means,0261

when I submitted this form, I submitted it to the same page.0267

In this case, it submitted it to an HTML page, simpleForm.html; now, because simpleForm.html is just a raw HTML page,0271

it doesn't have the capabilities to process any input passed in the URL by a query string.0280

So, in this case, it actually does nothing; and what we are going to be doing in this course is using PHP scripts to receive the input.0287

And so, instead of having simpleForm.html followed by a query string, it might be simpleForm.php followed by a query string.0295

What that is going to do is load up a PHP script that is going to know how to extract the name/value pairs from this query string.0302

We are going to begin talking about that in the next lesson.0311

One thing I wanted to note: if you can see here, we had Firebug set up at the bottom of Firefox.0314

And the way you access that, again, is by clicking on the little bug icon in the bottom right-hand corner of the window.0320

There are a couple of different panels here; and today, we are going to be working with the Net panel.0327

And what you can see is: the Net panel provides information, for example,0332

about the HTTP that is going on behind the scenes when you request the web page.0336

So, when you request a web page...in this particular case, we requested the web page simpleForm.html, using the GET method.0341

We send that HTTP request to the server; in response, the HTTP server sends a response back,0349

which in this case, because it was the same page--it just outputs the same page.0358

Now, what you can do is: if you select the Net panel and select All from the next menu bar, you can click on the plus sign,0364

and what you can see is: there are a couple of different tabs; and the one we are going to click on is Headers.0377

What this shows is information about the request that was sent from your browser to the web server when you submitted the form,0383

and then the response that was sent back.0391

If we go down to the request header section, and if you click, there is a View Source link that you can click on.0393

It is going to show the raw HTTP header, and that is actually what was sent by HTTP to the server.0401

You don't need to be concerned with the details of what is included in this header; there is a lot of information there.0409

We are basically just going to be concerned with the first line, and the format of the first line of a request header is a method name0415

(in this case, it's GET, because we used the GET method), followed by the file or resource we were requesting, which is simpleForm.html.0423

And then, it also lists the HTTP version number that it is using.0433

However, as you can see, when we submitted the form, the URL is not just simpleForm.html;0437

it actually has a question mark with text1=Matthew appended to it.0442

And so, that is an example of a query string; and as we can see, using Firebug, this is a way to see what was submitted to a script.0447

And you will find, down the road, it will be a useful debugging tool.0460

Now, it provides the same information that was shown up here in the window, but it also provides a little more information.0463

And it also has a Params tab that will actually show you all of the name/value pairs that you submitted by a GET.0469

And, for example, you can see that we have that text1 is a name we submitted, and the value we set it to was Matthew.0481

And so, this is an example of using Firebug.0489

So now, let's talk a little bit about HTML forms; and this may be a review for some of you.0498

Basically, HTML forms are one way of submitting input to a script, and they can be done by the GET method0503

or the POST method, which some of you may be familiar with.0510

We are only going to be talking about the GET method in this course.0513

Basically, HTML forms are composed of what are known as input controls, and each input control0517

(such as a text box, or a dropdown menu, or a check box) has a name associated with it.0523

When the form that the input control is a part of is submitted to the web server, the current value associated with each input control0529

is associated with the name of the input control and sent as a name/value pair to the web server.0539

And, as mentioned, it does it by using the GET method as a query string, and it appends it to the end of the URL.0545

The way it does that is that each input control, as we will see, is an HTML tag that has a name attribute and a value attribute.0553

The value attribute is not always set, but the name value is always set;0565

and when you submit the form, that is going to be the name that is going to be submitted in the query string.0571

So, for example, you may have a text field that asks for a user's username,0577

and so the name you might assign to it--the name attribute--would be username.0583

So, in your query string, it will say username= and then the value will be whatever value the user had entered into that text field onto the form.0588

So again, basically, what happens is: when a form is submitted,0597

the name of each input control, along with its current value, are sent over to the web server.0600

How do we declare a form in HTML? And again, some of you may have experience with this.0609

The way we do it is using the form tag; and the form tag can contain input tags, select tags, option tags, and text area tags.0614

What those are, are input elements that will supply name/value pairs to the server when the form is submitted.0627

Now, the form tag itself has two important attributes: one called method and one called action.0635

The method attribute can be set either to the value GET or POST, and what that does is:0643

that describes the HTTP method that the form will use to submit the data.0649

It could be either GET or POST, and as mentioned, we are going to be working with GET, and so, that is what our forms will be using in this course.0654

But some of you may have used the POST method before.0662

The GET method--again, the way it works is by appending the name/value pairs after a question mark on the URL that you are sending the data to.0665

Additionally, probably the most important attribute is the action attribute.0674

That is the name of the script, or the URL of the destination script, that you are submitting your input to.0680

It is most likely go to be, for our course, in a PHP file.0687

That PHP file is going to be able to extract information from the URL query string,0691

and then make it available to you so that you can use it within your script.0697

We are going to be talking about that in the next lesson.0702

Let's take a look at another form that has a bunch of different elements on it, to demonstrate the different elements that are available.0707

If you go to lecture_12, there is a form called inputExamples.php.0723

What this is: just an HTML form that shows some of the different options that are available as input elements, or input controls, on a form.0730

We have a basic text field where you can type any sort of text.0740

We have a password field, which is the same thing as a text field, except that it blocks everything out,0747

so somebody looking over your shoulder can't see what you are writing.0753

Now, that said, the password field does not actually encrypt any password you write in there.0757

It is just sort of something for when you are using maybe a public computer, and so forth.0760

There is the check box input control, which you can use to check different options.0766

There are radio buttons, which are used to select one option from a group of several options.0772

So, in this example, we can select either Yes or No.0778

There is a select menu, which is essentially a dropdown menu with different options to be selected.0781

There is a large text field, for example, where you can enter maybe comments--like if you have a Contact Us page on a website.0788

There are also what are known as hidden fields, which is information--a name/value pair--that is passed on to a script0800

that the user has no control over--essentially, the user is not entering any value.0809

It is not extracting a value from a field; it is hard-coded into the HTML.0815

Then, the other input controls are the Submit button (which is how you submit the form)...0821

There is also what is known as an Image Submit button, which functions the same way as the Submit button does.0827

It submits the form, but it allows you to use an image to click on instead.0831

There is also a Reset button, and the Reset button allows you to reset the form to its default values; so it clears everything you entered.0836

If we go ahead and type some data here again...select yes...and let's pick option 1, and we click the Submit button,0844

we can see that, in this case, this HTML form actually, just as we did for simpleForm.html, just submits the data to itself.0860

The destination URL for this form data is inputExample.php.0870

And if we go ahead and look at the source code for this (let's look at it in the text editor), it's a PHP file, but it only contains HTML.0877

We can see here the form tag that we had just talked about; and it has the two important attributes, method and action.0897

We set method equal to get, because the GET method is what we are going to be using, which appends stuff to the URL.0906

The action is inputExamples.php.0911

So basically, when this form gets submitted, all of the name-value pairs that are generated by the form0915

are submitted to the URL inputExamples.php, which happens to be the same script.0920

Now, this script, though it's a PHP file, doesn't actually do anything with those values, but typically what is going to happen is:0926

your action is going to be to a PHP script; it is not going to be to an HTML file, because HTML files don't know how to handle the input data.0932

If we go back and look at the example, we see up here that it has appended all of the values0943

and names that they are associated with from our form to the URL.0952

And again, we can use the Firebug console (sometimes you have to refresh the page to get it to show up), and we can see the GET request.0957

If we view the source, we can see the long string that was created, and it shows that, for every input control we had on there,0969

it has its name and then the value that it had at the time the form was submitted.0977

And maybe the more useful thing would be to click on the Params tab again, and that is going to show0983

the names and associated values from all of our input controls that were submitted when we submitted the form.0988

So, we have checkbox1; the value is checkedValue; password1--I had typed password; in the text box, I typed Matthew.0994

In the text area, I typed "Here is a comment"; so this all shows up--this is a useful debugging tool to see what actually is sent to your script,1005

so you can figure out where the problems are, if maybe you are having trouble processing script information.1018

Now, the other thing is: we can also submit the form, just to show you, using the input Submit button.1023

When we click on it, it does the same exact thing: it submits the form,1034

and the browser itself generates the query string to append to the URL, which has all of the name/value pairs that the form represents.1039

And here, just for your use, I have listed a list of the common input controls used in HTML forms.1052

These are pretty much all the ones that you use; I think maybe in HTML5, they may have added some more options to this,1060

but these are the standard ones that have been used for years.1066

And as we had talked about, we had the text field, password field, checkbox, radio button, the select menu, which is a dropdown menu,1070

a large text field, and then hidden, two submit buttons, and a reset button.1080

The majority of these use an input HTML tag, and the way that they differentiate one type of input control from another is using the type attribute.1087

So, for example, the text field--you create the type attribute and set it equal to text.1097

The only two that don't use the input tag are: the select menu (and the select menu uses a select tag, and within it,1103

it has option tags, which describe all of the options that will be part of the menu); and then for the large text field,1114

where we enter comments that we want to send to the website, you use the text area tag.1120

So, as we mentioned, using the GET method, name/value pairs can be sent to a destination script,1133

using the HTML forms, or by manually appending a query string to the URL.1142

That is what we are going to talk about now: query strings and how they are formed and appended to a URL.1148

For example, we have a script test.php, and we want to submit to that form two name/value pairs; this is how we would do that.1154

This is something we could hard-code into, for example, an anchor link in your web page.1167

Or it is something that you could actually type into the browser itself.1174

What it does is: each name/value pair in query strings are separated by the ampersand, or the and sign.1178

And then, each name and value are separated by the equal sign.1186

And so, that is what a typical query string looks like.1192

And if you can think back on the other examples that we did, you were able to see that in the browser, as well.1194

Now, one thing to note is that query strings, because they are appended to the URL, are a part of the URL.1203

And as a result, they have to follow the syntax that URL's need to follow; and there is something known as URL encoding1208

that you need to do in order to make sure that the query strings that you append to a URL will work.1215

And for URL's, there are a couple of rules; one is that only uppercase and lowercase letters, decimal digits,1223

hyphens, periods, underscores, and tildes are allowed as is in the URL, which means you can just type them straight in there without any problem.1233

Spaces, however, must be URL encoded or replaced with the plus sign--so they will be replaced with this.1242

And any other characters that aren't of this setup here or a space must be encoded, using the hexadecimal ASCII value of the character.1251

The way that is specified is by using a percent sign, followed by xx,1264

where xx is two hexadecimal digits representing the hexadecimal ASCII value of the character.1270

So, for example, the name/value pair where we have person as the name and the value as Joe Smith, with a space in between Joe and Smith,1278

to properly encode that to be put in a URL, what it would do is: URL encoding replaces the space with a plus sign.1288

Additionally, let's say we have (and we'll learn about this in the next lesson) a name for an input element that is going to represent an array,1299

and so, it actually has two square brackets--an opening and closing square bracket--as part of the name.1311

Well, those don't fall into the category of the characters allowed, or a space, and so they need to be escaped or encoded.1316

The way they are is using the percent sign syntax.1324

It happens that, for the opening brace, the hexadecimal value is 5B, and for the closing brace, the hexadecimal value is 5D.1327

And so, grades[]=99, would be encoded as this here, which would be grades, the two hexadecimal values, =99.1338

And actually, if we go back to our original form simpleForm.html, we can see that when you use an HTML form1349

to submit GET data, the browser automatically encodes it for you.1364

So, for example, if we were to put as a text field...just put the opening and closing brackets and submit it,1369

and we look up here...well, sometimes--it didn't do it on this one, but sometimes--the browsers show it in user-friendly format,1379

but what it is doing behind the scenes is encoding it as a percent sign followed by two hexadecimal values.1387

Let's see if it shows up down here.1395

And actually, it properly shows up...what is happening is: Firefox is making it user-friendly,1402

and so, it shows the opening and closing brackets as is, so when you look at the URL as a human, it makes sense.1408

But actually, what is happening behind the scenes is: they are being encoded.1414

And if you look at View Source, you can see, under the Request Headers section in the first line, it says GET simpleForm.html.1419

It has the question mark, text1= , and then it has text and the opening and closing brackets encoded as hexadecimal values.1432

So, you can encode URL's if you want to supply information to a script by a query string and do it manually.1453

You can do it manually and just type it into the browser or type it into your code.1463

But PHP also offers a built-in function called urlencode, and what that will do is: it will reduce the amount of errors that you make,1469

because you may forget the ASCII hexadecimal value for an open bracket, for example.1477

Well, by using the urlencode method provided by PHP, what that is going to do is: you supply it with a string1483

that you want to be appended as a query string, and any characters (such as spaces or other characters like opening and closing brackets)1491

that need to be encoded--it does that for you.1500

The format for it is like a few other functions we have had experience with, like var_dump and print_r.1504

The function is called urlencode; you simple type urlencode, and it has a pair of opening and closing parentheses.1512

And within those parentheses, you include a string delimited by single quotes or double quotes.1519

What that is going to do is output the URL-encoded version of that string.1526

For example, if we call this method here, urlencode, with comments=Here, space, are, space, comments,1532

the urlencode is going to return a string that looks like this.1539

What you can see is: it encoded the URL by replacing the spaces with plus signs.1544

Let's take a look at another script that demonstrates this.1552

Here is a script called urlEncodingTest.php, and it has a form that uses the GET method to submit data.1561

For example, I could type Matthew and click submit, and if we look up at the top of the browser,1570

we can see the name associated with that text box is textSample, and it has been set equal to the value matthew.1578

That is how to do it in an HTML form; we also have down here a URL-encoded link, which if we click on it,1587

you can see that it says, "sampleText=Here+is+some+sample+text" which is the sentence Here is some sample text encoded.1599

Basically, the way we have done that is: this is a PHP file, and if we go and look at it in our text editor,1610

we can see at the top here that this is just the form that we use to demonstrate the GET method.1620

But also, what we have done here in PHP land is: we have created an anchor tag1627

and set the URL equal to urlEncodingTest.php, which is the current script.1636

And we create a question mark, and then add the name of the name/value pair that we want to submit to this script.1643

And what we have done is: then we append...because urlencode outputs a URL-encoded string, we pass it the variable sampleText,1654

which is equal to this string up here, "Here is some sample text."1665

urlencode is going to replace all of the spaces with plus signs, and it is going to add it to this string.1669

Here, we just close out the anchor tag and name it URL Encoded Link.1674

So, if we actually go back and look at the file in the browser and view the source, we can see that1683

this link, which was generated in our PHP code section, has taken that sample text "Here is some sample text" and properly encoded it, using + signs.1696

That is an example of how the urlencode method works.1707

What it basically does is: it is a way to keep you from making errors, if you are trying to manually insert query strings1710

within some of your PHP files or HTML files.1719

Today's homework challenge is going to relate to that.1727

Basically, I just want to have you create a script called processName.php, and in that script, in the PHP section of the script,1730

I want you to create an anchor tag with an href attribute and append a query string to it, just like we have done in the previous example.1739

And whatever query string you decide to use, you can assign a name to it--you can call it name, for example.1752

You can hard-code that into your PHP.1769

And then, what I want you to do is use, as a value for name, your first and last names, separated by a space.1771

And then, I want you to use the urlencode method to properly encode your name: that includes a space.1779

Now, if it is done correctly, what is going to happen is: when you load the page and click on the link, and you refresh the page,1787

you are not going to see anything change in the page, because the form doesn't actually process any of the data.1796

But you will see, at the top of the screen, in the address bar, the question mark followed by name= ,1801

and it will have your name properly encoded with a plus sign for the space.1806

That ends today's lecture; thank you for watching Educator.com, and I look forward to seeing you next time.1813