Learn how to open Your application as a project in a text editor, as well as create the first PHP in the project, add basic HTML and CSS, and confirm that it works in a browser.
- [Instructor] In the previous movie, we created the starting structure of the files that we're going to need, the basics of our project. Now we want to bring those up in a text editor, so that we can work with them. For most text editors, you can simply drag the directory onto the icon for the text editor, in order to open up the entire project in a project view, all at once, I've already done that here. It works the same way whether you're using TextMate, or Sublime, or something else. The overall idea is that my project is now visible in one column, I can navigate the files that I want to edit, and I can edit them over in the window on the right.
Let's begin by opening up the index.php page. It's immediately inside the public directory. Inside this file, you'll see that I've included a very simple HTML5 template. Nothing special about this, it's just the beginning of an HTML5 document, that we could then serve up to the public. PHP pages are just HTML pages that have PHP embedded in them, so this makes sense, that we would have this as a starting point. Now let's think for a moment, index.php, inside the public directory, is going to be the root of our website.
That's because we're going to tell our web server that the document root that it should serve to the public is this public directory, so for example, if we had a globebank.com as our URL, then globebank.com would load up index.php as its default page. So I'm going to put in here for the title, just Globe Bank. And then in the body, for now, I'm going to put h1, Globe Bank: Coming Soon. Now we're going to come back and work on the public site later, for now, I just want to have a placeholder here that we can look at.
Let's save that file, and let's bring it up in our web browser, so we can see that it's working. At this point, you should have already installed PHP, and have it enabled for your web server. You'll also want to make sure that your web server, whichever one you choose to use, is running, and able to serve files when your browser requests them. If you need help with any of that, you can refer to the course on installing and setting up PHP with MySQL. I'm going to navigate to that project. Now for me, in development, my web document for development, is localhost, and then ~kevinskoglund.
Now yours may be different, you'll have to use whatever is your default, it might just simply be localhost on its own, or it might be something different. Change it to fit your needs, but that's going to be my document root. And from there, then I'll need to have my project, which is globe_bank, and then the public directory. That's how I'm going to navigate to that index.php page. Now when we launch this to the public, remember, the public's not going to type all that. The public's just going to type our URL, globebank.com, and it's going to go to this exact same spot, right here, to start with.
So all of that is just for development, that's why we're going to have that full root path in there while we're developing. And you see that I get Globe Bank: Coming Soon. So that's great, we now know that we're able to locate the correct file via our browser, and our web server was able to handle the fact that it was a PHP file, with no problem. All right, so now let's go back over to our project, and now, let's take a look at this staff page, staff/index.php. Now here, let's just change the title. Let's make it GBI, just the initials for Globe Bank International, and let's add in here, to our body, a little bit more, let's add a header tag, and let's do one for navigation.
Just mistyped that, there we go, and let's do one for footer. Okay, those are just some basic HTML5 tags. Inside the header, we'll put h1, and let's make this one just say, GBI Staff Area. That's indented a little too far, let's take one of those out. For the navigation, let's put in ul tags. We'll put in one li tag, which is going to be a link, a href="index.php", and, it's going to be Menu.
And then let's close our li tag, and close our ul tag. And then down here in the footer, let's put © that'll be the HTML entity for the copyright symbol, 2017 Globe Bank. Okay, so we can save that file, and we should be able to bring this up in our browser. But before we do that, I'm just going to go ahead and add in our first bit of PHP code here. I'm just going to drop in, instead of 2017 for the date, we're going to go put in php echo date, capital Y.
That'll call the PHP date function, it'll return the current year. So now we've actually got our first bit of PHP code, and we're going to make sure that that is working correctly, as well. If not, you'll need to troubleshoot that, and make sure you've got PHP working. So let's go back now, now, in order to get to this page, it's in the public directory, and then, inside staff. Now we could type out index.php, but by default, it should render that index.php page. And sure enough, here it is, GBI Staff Area, and you see we've got Menu link, and the PHP code did load up correctly.
We did get the year's 2017. Now if you're watching this in the future, your year will be different, that's not a problem. Just make sure that you did, in fact, get a year there, and not an error saying the PHP code didn't render. Okay, so we've now got it working, but this is pretty ugly. What we need to do is introduce a style sheet, so that we can style this code, and to do that, I'm just going to hide these files for a moment, and I'm going to go here to this staff.css file. I've already got a style sheet written up, we'll take a look at it, but I'm going to drag it into my stylesheets directory of my project.
Then I can come in here, to my project again, and let's take a look at what's in there. So you can see, I've just got some basic styling. You can pause the movie if you want to copy this down, it's also included in the exercise files. So you go down here, you see we've got a header, header h1. I've got navigation, I've got some styling on the navigation ul and li elements. I've got content, which we're going to add in later. I've got in the footer, and then I've got some styles here that we're going to be using as we go on. I wanted to go ahead and add them now, so that we don't have to come back to them.
I'm styling some of the different elements that we're going to be using as we create forms, and create all the different parts of the website. So there we go, we've got our errors. So that's it, it's a pretty simple style sheet, altogether. Again, it's included in your exercise files. Now we need to tell our page that it's going to use that style sheet. So the way we do that is we come up here into the head of our index.php that's in the staff page, and we're going to add a link tag, with rel=stylesheet, and the media for that is going to be all.
Everyone should get this style sheet, href=, and I'm just go leave that blank for now, and then close out the rest of the tag. Okay, so now we need the path to the style sheet. So what is the path to this style sheet? If you've worked with HTML before, then you already know how you do this. You need to navigate backwards one directory, because we're in the staff directory now, and we need to go out of the staff directory, and then into the stylesheets directory to get to staff.css. So that means that we've got to go .., which means go backwards a directory to the parent directory, and then locate the stylesheets directory, and then staff.css.
Now this href is telling it to go backwards in the URL. This is a browser path, not a file path. Now they're very similar, because it also happens to be the file path, as well, but I just wanted to make that point. We're going to come back to it a couple of times. This is the browser path, it's telling the browser to back up one level, and then look for stylesheets, staff.css. So let's save it, and let's go back and try it, see if it worked out, let's reload our page. And there you go, now there's not a lot there at the moment, because I don't have my content element, I think that's the one that probably gives it the real meat.
Let's add that, div id="content". And there we go, save it, go back, and I think that should probably give it, yeah, a nice big chunk of space here, that we can fill in below. And then we've got one link on the page, which is Menu. If we click that, you can see it just brings us back to this same page, index.php. So for now, make sure that you're able to bring up pages in your browser, make sure that PHP works, so that you have a date at the bottom of the footer, and that you are able to access the style sheet, that you do have the ability to link to the staff style sheet.
- Organizing project files
- Including and requiring files
- Working with URL parameters
- Encoding dynamic content
- Modifying headers and page redirection
- Creating forms and processing form data
- MySQL basics
- Using PHP to access database tables
- Creating, reading, updating, and deleting database records with PHP
- Validating data
- Preventing SQL injection