Blueprint the application

- [Instructor] We will begin our PHP work by blueprinting the web application that we intend to build throughout this course. This will provide us with a good overview of the work that lies ahead. The web application we're going to be building is a content management system or CMS for short. The idea is that web pages, which administrators can use to create and edit content, but the public has different pages where they can read the content, but which are not editable. An essential first step when starting any web project is to create a project blueprint. If the site is simple, you may be able just to type up a few notes or draw a picture. But if the site's complex, you may need page mock-ups and even flowcharts. The fundamental idea is that in either case to take what's in your head and put it on paper so that you can look it over and assess the work before you start. It helps you to clarify it and to force you to think about problems that you might otherwise have put off until you were down the road with your 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 a 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 and build the whole site all at once. I can tackle it piece by piece. I could even tack my blueprint up on the wall in front of me and refer to it as I develop. It's efficient and it's liberating. So that's what we're going to do. So let's start with our blueprint. The website we're going to build is going to have two areas, the public area and the admin or staff area. The public area is going to have the part that the public sees. It's going to have a navigation to allow them to move around between the different pieces of content. And then it's going to actually display content for them for the different pages that they've selected. So if they want to see the history of the company, they'll click on the history link and they'll see page content about the history. And that's all going to be read only. They're only going to be able to view that content. Now, on the other side, we have the admin area. The admin area is going to be password protected. So we're going to need a login form. We're going to need to have a username and a password to get in, and then once we're in there, we'll be able to manage the different pieces of content. We'll be able to manage the subject and pages content, manage which admins are allowed into the staff area, and then we'll also be able of course to log out as well. This course is part two of a two-part series. In the previous course, we built the basic admin area to interact with the database and to create new records, read existing records, edit records, and delete records. You remember that we used the acronym CRUD for these four basic operations: create, read, update, and delete. So we learned how to do that. And we already have the CRUD for the subjects and the pages already built as a result of that work we did in part one. In this course, we're going to build the public area, the CRUD that allows us to manage the admin users, and then the user authentication piece that will allow us to log in with a password, to log out, and also to make sure that only logged in users can see the different pages inside the admin area. In case you're still having trouble visualizing the CMS that I've described, let me show you a quick demo of the finished project that we'll be creating. So here we are on the public side. This is what the public is going to see. You can see that we have the logo for the company up here, and we have the homepage content they're going to see here. Over here, we have a navigation. It lets us choose between different items. I'm going to choose About Globe Bank and you'll see that it switches us to a new page of content, page that has About Globe Bank and it has all sorts of information here. In addition, I can click on history and it'll change to a different page. So I can switch between the different content that's in each one of these. And you can see that this opened up to reveal the pages that were below each subject as I did that. Okay, so now let's take a look at the admin area. You see, I've got a login page. I provide a username and password, which I've already typed in. I'll click submit, and you could see that it then takes me into the staff area and lets me manage the page content or the admins. We're also going to be creating the CRUD for the admins. You can see here I have this user. That's how I logged in as John Doe. And that will allow me then to review records about John Doe, to edit those, to make changes, everything like that. Be able to decide who gets into this admin area. And we can log out. And of course, if we try to go back to those pages, let's just click the back button here and let's go to edit admin, you'll see that it doesn't let me in. It just sends me to the login page. It doesn't matter if I go to, let's change this, actually type it into adminsedit.php, you'll see I get redirected to log in. It doesn't give me access to that page unless I'm logged in. So that gives us a blueprint and a peek at the kind of site that we're going to be developing throughout this course. In the next movie, let's get started building it.