Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter we're going to talk about how we can create the public side of our CMS. We've made a lot of progress on our CMS so far, let's go back and review our initial blueprint. We've got our Admin menu section taken care of, that was pretty quick, and now we've got the Manage Content section. That's the navigation, the subject's CRUD, and the page is CRUD. I want us to now jump away from the admin area, and go over to the public area. And that's because we're going to come back and talk about user authentication later. Which is login, log out. And all the admin crud that goes with it.
So we're going to look at the public area next. The public area's going to look very similar to what we had for the admin area. We're going to have a navigation, still going to run down the left side, exactly the same. We're going to have page content over on the right side. The big difference is that it's going to be read only. We're not going to have all the other things that we added to the admin side. Users are just going to be browsing the pages that we've created. That's it. It's going to be reading only. There are also a few other differences we should talk about. So besides not having create, update, and delete, there's also going to be a different appearance and some different user interface elements. Part of the reason we want to do that is just for our own sanity. It should be easy to see the difference between the public side and the admin side.
Now, I like the fact that the two share a common theme and they feel like part of the same website. We should never be confused about which page I'm on right now. Am I on a public page, or am I on an admin page? So we'll work to differentiate them. Another difference in the interface is going to be the way that the navigation works. In the admin navigation right now, we're seeing all subjects and all pages all the time. On the public side, I want the user to focus a little more on the subject that they're on, just that current subject. And so what's going to happen is when they click on a subject, they'll see just the pages for that subject.
If they pick a different subject, then they'll see the pages for that subject. It'll feel more like they're moving around between the subjects, instead of just throwing all the information at them all the time. You may also remember that the admin area show subjects and pages that are both visible and invisible. We need to see them both so that we can manage them and edit them. But the whole reason that we have visibility is because on the public side, we don't want to show things. So we're going to want to hide subjects and pages which we've marked to be not visible. We're not going to display them like we did in the admin area.
And I think we're also going to need to give some thought to default page content for subjects. In the admin area, it's okay if we click on a subject, and we just see the subject's name. But that's not okay for the public. We want to go ahead and give them a better user experience, and serve them up some default content in that case. So we'll work on solving that as well. Let's start by tackling the differences in the navigation. Now, all of the public side is going to take place on index.php. That's the default page that servers serve up. And we've just got a basic HTML there right now. What we want here is something very similar to what we have for manage_content.
So let's use that as a starting point. Let's just copy all of manage_content and paste it into index.php. Now we can go through this and we can review the parts that we want and don't want. Our navigation, for example, isn't going to have a main menu, we're not going to be able to add a subject. We don't need to display a message. And instead of saying current subject here and having menu name position visible, let's take out a lot of that. We're not going to need our pages and subject. Just keep going down, get all of that out of there, so that we really just have manage subject and the menu name for now. And we'll come back and clean up this a little more later. But that's good enough for now.
The manage page we know what we want to show, if someone clicks on a page, we don't want to see manage page anymore, we want to see the page content. Where is our page content? It's right down here. So, let's just take that whole thing and just as is, let's say that it's our page content. And come back and style it a little more later. And then please select a subject or a page, we'll leave that as a good placeholder to start with now. Alright, so let's just bring this up and take a look at it and see what it looks like. So for me, that's going to be inside Local Host, Kevin Scogland, Widget Corp, Public.
And then I could just hit Return, right there. Or I can actually ask for index.PHP. So here it is, this is what it looks like. Notice, if I roll over any of these, that the length that it's going to take me to is manage content.php. That's my old Admin area code. That's because those links are being generated by the navigation. So our navigation that we had before isn't going to work for us. We're going to need something different. So I'm going to go ahead, and just save index.php. And let's jump over here to our functions, where we have that navigation.
So here it is. Now, we could go in, and actually edit this navigation. Instead, what I'm going to do is just take this, for now, and make a new one. Just copy it. And let's call it public navigation. Now I have the ability to just make changes in here and not worry that they're going to affect my other navigation. I'll change this to index.php, and this one also, down here, to index.php. So now that I've made that change there, let's save that. And let's jump back over to index.php, and let's call our new function, public navigation.
Save it. We'll go back over and we'll reload our index.php page, and now as I click around you'll see that I don't go to the admin area any more. I stay on my index.php page. I stay in the public area. Now we also noted that our navigation should function a little differently, that it should have a little bit of a different user interface to it. So let's do that now. Let's go over here. What we want is we want it to go ahead and display all the subjects just like normal. Alright, we'll talk about visible subjects a little later.
For now, we want to just display subjects normally. But then, when we get to the pages for the subject. We only want to display them if the current subject is selected. And the result is going to be sort of an accordion effect. When the user clicks on one subject, we'll see that pages that are below it. They pick a different subject. The first ones will disappear. Now, we'll see the pages that are below that. So what we need to do is just have a conditional. Right here before we start outputting our UL for pages, we just want to put IF, and then some conditional. We'll come back and write the conditional in a second. And all of this that's here, all the way down to where we free the page set. Right? The page set results. All of that to there.
We're going to indent, and then close our loop. Now there's one other thing though, notice this is a ul that we open? Here's where we close that ul. We actually need to break this .$output. And this needs to inside the loop. While this stays outside the loop, 'cuz this is the end of subject, end of the subject li. Okay. So now we can focus on writing this conditional.
So we only want to display these pages if this current subject is selected. Well, the current subject is passed in here as subject_array. So subject_array id will tell us what that is. So if subject array id is equal to the current subject id that I'm iterating through, then we want to do this otherwise we don't. Let's try it. Let's come back over here. Look at that, Widget Corp. Products, services, right.
So, as you click one, the old one closes and the new one opens. It's sort of an accordion effect. Now, the problem with this is that, let's click on large widgets, albeit disappeared. It's only sensitive to when we have a subject set. So, we also need to change our conditional here and save. Or, the other possibility is that our page_array, let me just copy this and make it page_array, that it's subject ID is equal to this subject ID. So one of those two things.
Either we have a subject that matches, or we have a page whose subject matches. Now let's go back and try it. And now you can see that the effect is that it stays open as you click around among that subject. So, we now have a different user interface for our public than we have for our admins. Now, our navigation's not perfect, because we still have a problem here. We have Find_All_Subjects, and we have Find_Pages_For Subject, both of which are going to display all of them. And we instead want to display only ones that are visible.
You could write yourself a function that is find all visible subjects. That's perfectly valid. But in the next movie I'll show you an alternative way we can do that using context.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97106 Viewers
61 Video lessons · 84412 Viewers
71 Video lessons · 68620 Viewers
56 Video lessons · 101108 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.