Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last movie, we learned how to detect if a form was being submitted to a page or whether the page was being loaded directly. We first learned it in order to keep our page from blowing up on us if our values weren't in the post array. However, there's another way that we can use it that's super-handy. It will allow us to have a single page that contains both the form and the form processing. We'll essentially have a form that submits to itself. Now there's nothing wrong with having the form and the processing on two separate pages. I'm not trying to tell you that one is better than the other. But having them on one page does add a few nice perks.
All the logic related to the form, then, is in one file. So, if you have a form that is for logging in, we have both the login html code that is for displaying the form. And the processing of it, all in a single file maybe called login.php. It also makes it very easy then to redisplay the form if there are errors, because if there are errors we just let the page keep processing. And guess what's further down the page? The form. It also makes it easy then to return error messages to that form, that's going to show up a little later.
And to populate those fields with previous values. So, let's say that you were asked to enter a country name. And the country value that you entered was not a valid country. Well we could redisplay the form and include the value you had before. So, that you could make a correction to it and resubmit it again. Now a single page form is not the only way to get these benefits. Especially the last three. You also know how to use include, to pull in a common form file for both pages that would also work. But I do want you to see this technique. I do want you to see how it works because this way of doing it can also be useful instead of just doing it by using include.
So, we already had our form, and our form processing pages. I just want to take these and resave them as a few file. So, I'm going to go to form.php and I'll use Save As on this, and we'll call this formsingle.php, we'll save it. Now instead of going to form processing we know it's going to submit to form single. So, it's going to submit to itself. Now once it gets there it needs to do some processing, so let's go to our form processing and let's steal some of the bits that we had here. What I mainly want to get is this line here that checks to see whether or not the submission took place.
And I'm going to put it before we even get up to the !doctype. Put all the way up here at the top inside some php tags there we go. So, if it has been submitted form was submitted that's what that tells us, if not we will go ahead and put an else here well do whatever happens if it's not submitted. So what do we want to do? If the form was submitted, then we want to set username equal to post and username. And we'll do the same thing for password. Password.
And for now, let's just go ahead and have it also output a message, we'll set message equal to logging in. And then we'll put the user name. So, this is a just placeholder, just so that we can see something come back to us when we're doing this. Of course we're not actually trying to login. We're not accessing a database or anything like that. We're just going to have it display I'm trying to log them in. And we'll just leave it at that. Now if it's not submitted, then let's have an alternative message. And that one's going to be please log in.
Nice and simple so now we have a message that occurs one time or not the other time. Let's drop down here into the form and let's just echo that message right above the form. We'll put our PHP tags echo the message and we'll put a br tag at the end. So, let's just try that let's bring that up and see what we get. And instead of form processing, let's load form single. So, there it is, I get please log in and now I"m going to try to log in... kevinskoglund, password password, and there it is. Logging in kevinskoglund. Now you can see that the two actions, the two possibilities for this page, one is if the form was submitted.
And one is if it's not, and in both cases it's going to redisplay the form to us right now. We'll take care of that in just a minute. Now we also could put in default values here. So, the username you notice when it came back and said logging in, it didn't give me the user name again. But what if this had been an error? Let's just do that, instead of logging in let's have it say, there were some errors. Now of course there aren't errors. We'll just reload the page this way. It'll ask me if I want to resubmit it with the post data. That's what it's asking me for. And then it comes back and says there were some errors. All right, so now let's imagine that there are errors. Well, we would want it to redisplay the username to us. Echo, make sure you use echo username, there we go. It's going to echo the username, but let's be careful here. We have now the condition where username is set if it was posted, but if it wasn't, this isn't going to have a value.
So, our form won't work in this case unless we provide the default value here. So, now we have a default value. Let's come back, we'll reload the page by hitting the Return key in the URL, and we get please log in. Kevin and Submit. There were some errors and it repopulated my username here with Kevin. Now, because that's something that the user is submitting, we want to make sure that we're careful about that and use HTML special chars on it. We learned about that. Put my semicolon at the end. So, that will make sure that no matter what the user typed in there, maybe they typed in a name that had a less than sign in it, it's still not going to break it. It comes back just fine.
The message here, we don't need to worry about putting HTML special chars on because we have control of that message. It's not something that the user would have submitted. Now the moment that we start putting user data in there, or database data in there. Then we'll want to also make sure we escape that, but for now I know what that message is going to be. It's going to be one of two things so I don't really need to be worried about it. So, let's also try incorporating a redirect. We saw how to do redirects earlier. I could add the redirect function to the top of this page but I'm actually going to do it the proper way. And I'm going to go over here to included functions that I was working with before.
And I'm just going to add a new function. Don't worry about, hello, that's fine. But I'm going to add that redirect to function from here, and this file then, can hold my functions. And then, I'll come back over here and I'll use require once on included functions.php. And now I can use that redirect too. The form was submitted. Let's put in a conditional that checks to see whether or not we've successfully logged in. Now we're not, don't have a database set up or anything, but let's just do a real simple one. Let's say the user name is equal to Kevin and the password is equal to Secret, then we'll have a successful login. Successful login.
If not, well, then there were some errors. Take this and paste it up here. I actually don't need password, because I'm not re-displaying the password to the user. But I do want to have username set, so that I get that nice value dropped back in my form. So a successful login now will redirect to. And let's just have it go to basic.html. So let's try it. Come back into my form, load it up. Please log in. I'll put in Kevin S, to begin with, with password of secret. That's not going to work. Oh, undefined variable user name, alright.
So I have a problem here. Let's go and take a look, at line seven. User name is not set. ha. I need to move this, up above. And I do need to add my password back in again. Password, password. Okay. So now, those will be set, and then I can check those values. Let's try it one more time. There's the form. Kevin S. Secret. Submit, there were some errors. My name re-displayed. let me fix that. It's kevin, secret, make sure I type it right, Submit and I got redirected to basic.html.
You're sure to see how this all comes together, how we're able to have different conditionals, the redirects, the default values, a form. All of this happens and we're doing it all on a single page. Now that we have some comfort working with forms, in the next movie I want to talk about how to validate form data.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98229 Viewers
61 Video lessons · 85539 Viewers
71 Video lessons · 69493 Viewers
56 Video lessons · 101831 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.