Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, we're going to make our navigation functional. In other words, we're going to make the subjects and pages that right now we just have as a simple list. We're going to turn those into links. And we'll handle the response, when those links are clicked. So, the page that we're working with right now is manage content.PHP. Let's open that up. Here's our navigation. And here's where I've got my subject's menu name outputting. So, what I want to do is just wrap that in an HTML a href tag. And let's do the same thing down here for a page name.
I'll just drop to a new line, a href equals. And, in the A tag, bring that down to a new line as well, right? So now, these are just place holders, I don't have anything here for the href. Where should this link go? When we click on it, what should it do? The page that I want to send it to is the same page, I want it to just reload the manage content page. But, I want it to provide some information in the queries string that it can use. So, the page I'll be using is manage content.php. And then after, that I'm going to have a query string and I'm going to pass the subject ID, subject equals and then whatever its ID is.
Let's do the same thing down here for page real quick. So we'll just do manage content, but this time we're going to set the page ID equal to something. So, what is that something? The subject ID, and let's put in our PHP here. And we know that in the PHP we're going to want to echo something. What do we want to echo? The subject ID. Here it is, right here. Just copy it. Paste it in. Now remember, when we're working with query strings, it's a best practice for us to URL encode those. Now in truth, this is probably a safe value. It's just a simple integer, it comes from the database.
Well, we're still going to go ahead and use URL encode on it anyway. Now, let's do the same thing for the page, I'll just copy all that PHP and drop it right here. But instead of subject ID, it's page ID. Now let's save it, and let's go back over to our manage content page. We'll reload the page. And now when I roll over these, you'll see that they actually do highlight a little bit. They turn a slight white color, and Firefox tells me down at the bottom where the URL will go to. Let's click on a URL. It's fine to do. Let's click on About Widget Corp. And you'll see up here now it says subject equals 1.
On our mission, it says page equals 1. In our history, page equals 2. So, each one of these now is sending an ID up here in the URL string as a value. Letting it know what the current page is. So, all we need to do is read back that value and display it over here on the right-hand side. That's how we're going to respond do it. So in order to do that, let's jump up here to the top, and let's figure out what page is set. So, let's make some PHP code and let's start by saying well, let's check and see if the subject is set. If isset, and we know where that resides, it's in the GET super-global. The key for it is subject.
So if that's set, then, and let's set a variable, selected subject ID is going to be equal to, I'll just paste that in there. That takes care of when our subject is set. That will set a variable if that's set. Then, let's have an else statement, else if. I'm just going to copy this because we're going to do something similar. But instead of subject, we're going to check and see if page has been set. And depending on where the page is set, then we'll set another variable. Selected, page ID equals get and the value page.
Makes sense so far? Alright, let's drop down here to our manage content area. This is everything that's on that right side there, the lighter color, and let's just do simple echo. Echo back, selected, subject ID. And we'll do the same thing but with page ID, and we'll also put a BR tag in between them. Let's go back and let's reload our page. Now there's a problem with this. You may have spotted it, but if not, we're about to find out what it is. Reload the page, and wow, even managed content went away. The rest of the page loaded. So what happened? Well, if we View Source, Web Developer Page Source.
We look down here to see what's going on. We see that Manage Content is in fact there. But when things went crazy, because we have an error. That's what all this is. This is an error. My style sheet kept it from displaying properly. But if we take a look over here, you'll see, it tells us, notice undefined variables, selected subject ID in. And it tells us the line number where that took place. Line number 44. So we're calling selected subject ID, but it hasn't been defined. That's our problem. Let's come back over here, and let's take a look if subject is set. We're setting one variable, but we're not setting the other one. We get to the bottom, we're expecting them both to be defined so we've got a set of default value here.
That's easy enough to do. We'll just say, selected_page_id equals null. Null is perfectly valid to assign to it. This is enough to make PHP not complain. And let's do the same thing here, equals null. And there's one other case that we need to consider. When we first come to this page from our admin page. Go back there real quick and try that out, admin.php. Nothing is selected at the moment. We don't want it to blow up in that case either, so in that case will be default else. And in this case, we're going to grab these two page ID and move that up there.
Selected subject ID. Okay, so now, we have a value for both of these in every case. It's defined in every single case. So let's save it, let's go back, let's reload this page. That works. Clicking on a subject works, clicking on a page works. So, we're able to see different values down here under the managed content. Click around, see the difference. See how the numbers change, they actually jump up and down depending on whether I'm on a subject or a page. Just because I have BR tag in there. Now we have a clickable navigation, and we're able to know what page we're on.
Now, what we're doing with it is not very exciting. We're going to come back and deal with that a little bit later. First, I want us to address another issue. And that is the fact that right now, our Navigation menu doesn't highlight. Which item that we're on. It doesn't stay highlighted. It just highlights it on rollover. Right now, we have no way of knowing what page we're actually on. Our navigation doesn't show us. So, let's see how to highlight the current page in the next movie.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99158 Viewers
56 Video lessons · 112432 Viewers
71 Video lessons · 81245 Viewers
131 Video lessons · 39016 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.