Build forms

- [Instructor] In this chapter, we will learn to use PHP to build pages which have forms for submitting data. And we'll begin by reviewing the basics of HTML forms and then adding some forms to our project. There are two main ways in which we can interact with websites using the HTTP protocol. The first is what we've been doing in the last few movies, and that is get requests. Whenever you type a URL into your browser bar, or when you click on a link, you're going to be issuing a get request to the server. And it's called get, because the idea is that we're getting back information. We're making a request to read information back from the server. Forms work differently because with forms, we're not just reading data back, we want to submit data to the server. So they use a different method, they use post. So those are the two main ways that we communicate with the web server. They're not the only ones, but they're by far and away the most common. Links allow us to get data, forms allow us to post data. This is what a basic HTML form looks like. And you'll notice that inside those form tags, I have attributes for action and method. And the method here is post. It doesn't have to be post, but most of the time, that's what you're going to want it to be. The action is where we're going to submit this form data to, it's a lot like the H ref that's inside a link, it says where this data will be submitted. Inside the form, we've got all of the form text, all of the places we want the user to fill out so that we can submit that information. And you can see I've got inputs of type text for city, state, and zip code. Those names are going to be used to label the data that's submitted. And then the last one you can see is just a big submit button. And the value that's on that attribute is what the button text is going to say. In this case, it'll just say, submit. Let's add a form to our project. I want to start by adding one to our staff subjects, new page. We were working with this in the last chapter and we went ahead and added some code to the top. We can leave all of that, but let's take out this last bit here that says, echo no error, and the else that comes right before it, so that it won't actually output anything except for our form. Now, right below all that PHP, I'm going to paste in some code, quite a lot of code actually. It's included in the exercise files if you want to get it from there. Let's take a look at what we've got. It's very similar to what we had for other pages. You can see I'm setting a page title to create subject. We've got the header being put in the top. Inside my content div, I've got a back link to take me back to the subject's list. And then I've got another div here with an H one for create subject. And then my form. This is the key part of this page. You can see that my form has a blank action for now. We'll come back and talk about the action later. And my form has a method of post for submitting it. And then I've got a series of form fields. You see, I've got an input of type text here for menu name, and I'm also using some HTML just to maintain the structure of that on the page. I like to use these dl, dt and dd tags, that sends for data list, data term and data definition. You could also use divs or spans or a table, whatever you want. But the overall idea is that we just have a label here followed by the field that we're going to fill out next to it. I've also got one for position, which is going to be a select option where we can pull down a list of choices. And then I've got a check box here for whether the item ought to be visible. So it's an input of type check box, the name is visible and the value is one. Now you'll notice that in addition to the check box, I also have an input of type hidden right above it, which has the same name. What's that about? Here's the thing, and there's a very important point to remember. When we have a checkbox, if the checkbox is checked, then our form data will send this value. So it'll have a value of visible equals one in the form data that it sends. But if our check box is not checked, it's not going to send visible equals nothing, it's going to send no attribute for visible whatsoever. It just won't be included in our form data, as if we never put it on the form at all. That's just how HTML works. That can be undesirable when you're processing the form, because we want to know that visible was there and that the user chose not to check it. So in order to do that, one work around is to put a hidden field right before it and hidden input with the same name and with a default value. So now what happens is if the form is checked, then this value takes precedence because it comes later on the form, that's the value that's going to be submitted with the form. If it's not checked, then this line is not going to output anything at all. And the only thing submitted in the form data is going to be visible equals zero, because it's still in the hidden input. It's a handy trick, and it's an important part of any web developers toolbox. And then down here, you can see I've got an input of type submit and my footer at the bottom. Let's save our page. And before we go look in our browser, let's also go to a subjects index.php. And right here, you can see I've got a placeholder for a create new subject link. Let's go ahead and put a link there for that. So PHP echo URL for, and what is our URL going to be /staff/subjects/new.php. That's going to be the link to it. Let's go try it out. I'll go into subjects, create new subject. When I click on the link, now I get a form that allows me to create a new subject. I can type the menu name here, I can choose the position and I can check whether it's visible or not, and then submit the form. So this form will allow us to create a new subject in the database. Now let's give some thought to once we create that subject, what happens if we want to make changes to it. We want to edit the existing data that's in the database. We would want to have a form for that as well. Let's do that by creating a new page here, let's call it edit.php. And I'm going to go to new.php, I'm going to copy all of this information, and then let's go over to edit.php and let's paste it all in there. Then let's go up to the top of the file and let's go down and see what changes we need to make to make it an edit page. Obviously it's not going to be called create subjects it'll be called edit subject. Scroll down a little further. And we can change this class to say edit, and change this H one to say edit, let's scroll down further. Now all these form fields are the same. We still want to be able to edit the menu name, we still want to be able to edit the position and the visibility. So those are going to get reused. The label on the button will also say edit subject. And that's it. Let's save it. And let's go over and let's take a look. So I'm going to change new.php to be edit.php. And there we are. Now we have our edit subject form. This is what would allow us to edit a subject. Now, eventually we're going to want to actually go to the database and get that existing subject data, and pre-populate those fields with the current values. That's what's different between the new and the edit forms. New will not need to have an existing object in the database. We're creating one from scratch. Edit is going to be using existing data and just allow us to make modifications to it. So, let's keep that in mind. Most of the time, the forms between the two are going to be almost identical because data that we create in the database is probably data we want to edit later on, but they're not going to be exactly the same. For one thing, we know that our edit subject is going to need to find an existing record in the database. So when we come back over here, let's go take our link from create new subject and let's copy it. Let's scroll down here to where we have a placeholder for an edit link, and let's paste that in there. It's not just going to be going to the edit.php page we just created, it's also going to need to look up the existing record. So we're going to need to tell it which record that is. And we know how to do that 'cause we did it up here for show. Let me just copy all of this right here and there. Now you can see it's going to append the subject ID to the end. So now the edit page is going to know what our current subject is, what are we looking for. It's going to go the database, it'll get that information out, it'll pre-populate our form with it. We didn't need that up here for new. New didn't need to have any additional information it just needed to display a blank form. Let's save that page. Let's go over here and let's try it out. Let's go back to list. And now when I click on edit next to small business, you can see that it says ID equals three. So now it would know to go to the database and retrieve the subject that had ID three and use that to pre-populate these fields. There's another difference too, which is that this action is going to be different here at the top as well, because the action involved with creating a new subject