Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we've learned the fundamentals of PHP and also know how to connect PHP to MySQL, we're going to put it all together. We're going to build our first PHP project. That's going to give us the opportunity to apply what we've learned to see how to approach development tasks. And to get an overall feel for the flow of development, as well as to pick up a few more tips to help you to write better code and to avoid common mistakes. The project that we're going to be building is a Content Management System or CMS for short. Now if you've never worked with a CMS before, the idea is to have private web pages that help us to manage the content of our public website.
In other words, the public mostly just views our content. That is they read it from the database. But then there will be an admin area. And the admins will be able to do CRUD on the content. That is create, read, update, and delete the subject and pages of our website. An essential first step when starting any web project, is to create a project blueprint. If the site is simple, maybe you'll just type up a few notes or draw a picture on a single piece of paper. But if the site is complex, you may need page mockups and flow charts to draw it out. The fundamental idea in either case is to take what's in your head and to put it on paper, so that you can look it over and assess it before you start to work.
It really helps you to clarify the work ahead. It also forces you to think about problems that you may have otherwise put off until you were well down the road with the development. I usually do my blueprinting by getting out a pen and a piece of paper, and then drawing boxes to represent the different parts and pages of the site. I draw connections between the boxes, and I make lists inside the boxes. By the end, I have the full picture in front of me, and I don't have to hold all the moving parts in my head anymore. Instead, I can use that part of my brain for development. And then, I don't have to try to build the whole site at once. I can tackle it piece by piece, section by section. And I can tack my blueprint up on the one in front of me, and I can refer to the big picture constantly while I'm developing.
It's both efficient and liberating. So, let's try this blueprinting process together. The web site that we're going to build will need to have two areas. The public area, and the admin area. The public area is going to be fairly simple. The pages are all going to have a similar page structure. An area for navigation, like a menu of content. And an area for the content. User will pick a navigation item, and then the PHP that loads will show that page's content. PIck a new navigation item, get new content. And I want us to create sets of pages which are grouped by subject. So, we'll both be picking a subject and a page.
And for the admin area, I know that I'm going to need a login page where we can ask admin users to provide a username and a password to authenticate themselves, and gain access. If their login fails, we'll ask them to try again, we won't let them into the site. If they log in successfully, though, we'll take them to a Admin Menu page. That's just a simple landing page that lists the options that they have in the Admin Area. Those options are just links that take you to other pages. So, the menu choices will be Manage Content, Manage the Admins, and Logout. So, I'm going to now draw an arrow down to the manage content area. Now I don't know exactly what this area's going to look like yet. But I do know that it's going to need to allow us to perform subject CRUD and page CRUD.
That is, be able to create, read, update, delete subjects and pages. And I'll need a navigation of some sort to let me navigate between the different subjects and pages that I want to edit. Now I could create a separate page for each action in the CRUD, but because those actions are so common I think I can just call it CRUD. And I'll know what I mean, I'll know that I need a form when I want to create something, I'll need another form when I want to update something. I'll know that if I want to delete something I will need something maybe that says, are you sure you want to delete this page. It's the same idea every time. When I actually start work on it I might decide to map them out in more detail, but for now just saying CRUD will suffice.
And then I'll also need another CRUD section for the admin users, so it's going to be manage admins and this is where we'll decide what admins are allowed into site. We'll be able to create their user names and their passwords, delete them, edit them, that kind of thing. And then our final menu option is going to be log out which will form the action of logging us out and then take you back to the login page. Okay, so now that we have it blue printed out, what order should we tackle these in? Now in real life you could approach them in almost any order, but for the purpose of teaching you, I think it's going to be best if we start with building a navigation of subject and pages. And then get our navigation choices to retrieve and display page content and from there, we can start working on the CRUD for those pages. So, we can start managing our content.
Then, we'll move over to the public area, and we'll differentiate between the public side and the admin side. At that point, we'll have a CMS. But it's going to be missing the whole user authentication layer. So, we'll add our admins, our log-in and log-out pages, and learn how to perform authentication. In case you're still having trouble visualizing the CMS I've described, let me show you a quick demo of the finished project we'll be creating. So, this is what our finish Widget Corp application is going to look like. I'm looking at index.php, that's the default page that the public will see, the public side of the site. And you'll see that I have a header up here at the top that says Widget Corp. That's my fictional company I'll be using.
And then I have a navigation that runs down the left side with links in it. And over n the right side, I have page content. Which, right now, just has a simple welcome message. When I click on About Widget Corp, we can see that some pages open up beneath it. And it goes ahead and selects the first page, Our Mission. And displays that content over in the right area. And I've just some placeholder content there for what Widget Corp's mission might be. If I select the page for Our History, it changes to show our history instead over on that side. If I select a new subject, Products, you'll notice that the pages under about widget corp collapse. And now we see an expanded list of pages for products, large widgets and small widgets, and same thing for services where we just have one, which is Retrofitting.
So, that's the public side, that's what the public is going to see for the content management system. For the admins though we'll go to login.php. Widget Corp Admin, we put in our username and password, I have kskoglund and secret as mine. When I submit it, I'm now logged in. And I'm now at admin.php which is a menu page, it welcomes me by my username, kskoglund, and I have a couple of areas I can go to. The manage website content, manage admin users, or logout. Let's go to website content. I'll click on that link.
Please select a subject or a page. I have a very similar navigation to what I had on the public site, except that it's not collapsing those down. It's showing me all the things all the time. And you'll notice there's a few extra things there as well. Certification, Today's Widget Trivia for example. Those are items that were set to be visible no so that the public is not seeing them. But for us we are able to see them in the Admin Menu. We can also add a new subject or we can click on any subject and edit it. And then it shows us the pages that are in this subject and same thing, we can add a new page to it or we can edit those pages.
And that allows us to control the position. It allows us to set the visibility and edit the content itself. And then cancel, of course, will take us out of there. There's also a delete link that you might have seen there right at the bottom. It'll allow us to delete pages as well. Same thing is going to be true for subjects. Let's go back to the main menu and you'll see that for the admins, we have something very similar, where we're able to edit different admins. And change their passwords or add new admins to our system. And then, of course, last of all is logout. And once you're logged out, then of course you shouldn't be able to get to admin.php.
You shouldn't be able to get to manage_content.php. Those are protected areas and they just take you back to the log in page every time. So, that's what our finished product is going to look like. We're going to have our public area and we're going to have our admin area. And the admin area's going to be a password-protected place to manage the content that goes into our public area.
Get unlimited access to all courses for just $25/month.Become a member