Links and URLs

- [Instructor] In the previous chapter, we built a simple web page and learned how to create reusable page assets. In this chapter, we're going to work on building web pages using PHP. Let's begin by learning how to create links between pages. You should already know how to code a simple HTML link. We use a tags around the word that we want to link, and then we use the href attribute of the a tag to define where we want the link to go to, in this case, index.php. Now, the first thing you should know is that there's no such thing as a PHP link. It's still an HTML link. We can use PHP in order to generate the link, but the output will still be a string that creates an HTML link. So the second example is using PHP, but it's still creating an HTML link exactly like the first one. Notice that it's using the word echo to output the string index.php. Echo is very important. We have to make sure that we actually output the content from PHP into the HTML in order to have it work. Let's start by adding a link to our project to the main menu page, so that's staff, index.php, and inside the content area here, I'm just going to paste some HTML. It's just going to be the main menu div that I'm creating, and let me just indent this a bit. There we go, and I'm missing a final div here. Here we go, div. All right, so you see it has a div, ID main menu. It has h3 tags that says Main Menu, and then I've got ul tags that'll just be a list of all the different things that we can do in the site, and you can see I've got an HTML link here for the subjects, right, so that's going to link to the subjects page, and the path to that page is inside the subjects directory, index.php. All right, so let's save this file, and let's try it out. Let's save it. We'll come over here to Firefox. Let's reload our page, and sure enough, main menu, and it says Subjects. Okay, so let's click on the Subjects link and see where it takes us. It came up with a Page Not Found. Notice the URL that it went to right here, localhost/subjects/index.php. Now, if you are on a production server and the root of your website was the same as the domain, this would have worked fine, but it didn't work for us because we're nested several layers deep here. It's not localhost, it's localhost and then a bunch of directories after that. When we use this forward slash, it gives us an absolute URL, and that's not what we want. What we want is a relative URL, so let's take that out. Let's save the file, and let's go back. Let's reload the page, and now let's click Subjects again, and now it takes us to the correct page, staff/subjects/index.php. That's where we wanted to be. So it works because we used a relative path instead, all right, so now let's go up here. We've got that link there. Let's jump over to staff_header, and notice that I've got this link that says Menu at the top of all my pages. The idea is that I have that Menu link and no matter where I am in the staff area, I can always click Menu and it'll just shoot me right back to that main menu so that I can navigate from there. So right now it's index.php. We already know that we can use PHP there and we can echo index.php and it does the exact same thing, so let's try that. Let's go back here. We'll load up the page. We'll reload our main menu, and if I click Menu, it takes me where we would expect. It takes me back to this same page, the page I'm already on. Let's click on Subjects, though, 'cause that's what we really want is to be able to click Menu on this page and shoot back to that other menu. So let's click it, and it didn't work, and the reason it didn't work is not because we used PHP. The reason it didn't work is because it's a relative URL and index.php is taking us back to the same page that it's already on, subjects index.php. What we really want is to tell it that it needs to go backwards a directory. It needs to go from relative from this page, we want to shoot backwards one. Let's save it. Let's go back over and go to Firefox, and let's reload this page, and now when I click Menu, it takes me to the right page. Well, let's click Menu again up here at the top of this page. Can you guess what's going to happen? Takes me back to my main home page. Why? Because I said, "Relative to this page, go up one directory," right? We look back at our structure. It went from this index.php page back to this one. That's not what we wanted. So you can see that we have a problem here, and the problem is that we have a shared header file that we're using on multiple pages and the links that we want to use, we want to use relative links, but they're relative to pages that are in different places. They're not in the same directory. Some of them are nested one level deeper, and they might even be nested several levels deeper. That's the exact same problem that we had with our style sheets before. The style sheet works correctly when we're on our staff index.php page, but when we go to subjects, what we really need is ../../stylesheets/staff.css. So PHP enabled us to have the shared template, but now we've got a problem. How do we solve it? PHP can help us to do that. A good trick is to set a constant that defines the web root. Let me just jump over here to initialize.php and we can define it here. Now, this is similar to what we just did at the end of the last movie with SHARED_PATH. You see that right here, but it's not the same, because there we were talking about file paths on the hard drive. If you actually output SHARED_PATH and do echo on it on one of your pages, you'll see that it's a path on your hard drive from the root of your hard drive all the way to the file that it's trying to find. That's not what we want here. We want a path for the URL. So we can do that a couple of different ways. I'm going to paste in some code. Some of it is instructions telling you you don't need to include the domain name. We want to use the same document root as the web server uses, and you can set a hard-coded value like this that would define WWW_ROOT and it would set it equal to my path, which is ~kevinskoglund/globe_bank/public. That's not the same for you. If you were on a production machine, you might define it as just being the root. It's just simply whatever the domain name is. It's not nested in anything deeper, or what I've got here is something that finds it dynamically. I'm doing it this way so that if you grab the code out of the exercise files, it'll work automatically for you in development. What it does is it looks for the presence of the word /public in the URL and figures out that that must be where the document root is, so that's how it defines WWW_ROOT dynamically. Any of these would work. The main thing is to make sure that you set this value equal to an absolute value that we can then use on all our pages. So once we have that set, now we can go back over to our staff_header, and instead we can use WWW_ROOT and append it with /staff/index.php. Now, I have to include the staff now, because WWW_ROOT is the root of the entire website, not the staff area. I could also define another one of these called STAFF_ROOT if I wanted, but here I'm using WWW_ROOT so that I can just use something generic. Let's try it, and let's see the difference. Let's take this style sheet back to what it was. Save our file. We'll come back over here and we'll reload our page, and now when I click Menu, it's correct here. When I click Subjects, now it's correct there. Both of them work the same, and we can do the same thing for our style sheets. Before we do that, though, I want to show you that there's another nice trick, which is that we can actually roll all this up into a function that we can use. So I'm going to define a function. I'm going to put it in functions.php, and I call it url_for. So url_for, and pass it in the path that you want. It goes ahead and takes care of figuring out whether you have the leading forward slash or not. If it's not there, it adds it for you in case you forget, and then it appends it to that WWW_ROOT and returns the value. It doesn't echo it. You still have to do the echoing, but it will calculate that value for you using that constant. All right, so let's save that. Now we've got our function. Let's come back over here into our header, and let's use it. We're going to use it right here, php echo, we still need to echo, url_for, and then in parentheses, let's just take stylesheets. It doesn't matter whether we put the forward slash or not, and close our PHP tags. All right, let's do the same thing down here. We'll do url_for, and we'll just surround the whole thing in parentheses. Oops, tapped one key too many. There we go. Okay, so now that we've got that, let's try it out. Let's reload the page. It works correctly. Menu works correctly. We click on Subjects. Look at that, our CSS is fixed now and Menu works correctly. So let's just review. Why does all that work correctly? It's because we've defined an absolute point that we can base all of our other URLs off of. We basically said, "Here's the root of the website. Base everything off of that." So now we have a single function that we can use which will make sure that we always have a URL that takes care of whether or not it's on a shared piece of code or whether it's something that's nested several layers deep. It'll always be a URL to the correct place. It's a really handy tool to have.