Section 2 Overview0:00
Alright, welcome back, and congratulations, you've now reached Section 2 of PHP for Beginners. So yeah, Section 1 was all about the initial fundamentals. And granted, I get it, there's plenty of things we haven't yet reviewed, like classes, and objects, and object-oriented programming. But yeah, at least the initial fundamentals, I hope, should now be part of your skill set. So now Section 2 is all about figuring out, at least initially, what it looks like to build a website or an application using PHP and MySQL. So let's get started. Now, to make things a little easier on the eye, and also so that we have something to work with, I think we should start with an existing HTML boilerplate or skeleton.
Importing Tailwind CSS1:45
You're not going to be tested on it. It's just a quick way to have something pretty in the browser. Okay, so now the only remaining step before we check it out in the browser is to follow the instructions here and then import the Tailwind CSS. So notice we need to add these classes to our HTML tag. So I will do that now. Class and paste that in. And then on the body tag, we need a class of h-full. That stands for height full or height is 100%. Okay, that's it.
Updating Navigation Links3:45
Okay, why don't we change dashboard to home? And that will take us to, well, /, the homepage. So if I come back and refresh, sure enough, that has been updated. Let's do the same thing for a couple others. So we'll say, how about, we have one for home, one for about us. And that will link to, how about, /about. And then we'll come back to that in a moment. And then I'll have another one that ideally would link to /contact. All right, let's have a look. Come back to Firefox and give it a refresh, and there we go.
Creating an About Page4:19
All right, let's have a look. Come back to Firefox and give it a refresh, and there we go. Okay, so the next step is, let's create an about page. So how do we do that? Well, let's see. We have index.php, and I've removed all the variables from the previous episodes. But in real life, you probably have some data gathering to do. At the moment, it just requires a view. So why don't we do the same thing for about? About.php will load a view called about.view.php.
So why don't we do the same thing for about? About.php will load a view called about.view.php. And to do that, at least initially, I'm going to duplicate index.view.php, and we'll call it about.view.php. All right, and yeah, as I'm doing this, hopefully, alarm bells are going off in your head. Think about it, what about when we have 20 different pages? Am I duplicating this massive HTML 20 different times? Well, if I did, I'd end up with a sort of N plus 1 problem where, let's say you need to change or tweak the navigation bar or import a script.
Okay, so yeah, we're on the homepage. Let's try clicking on about.php, and the address bar updates. But notice it still says welcome to the homepage, which is weird. That doesn't seem right. So whenever you're in doubt, of course, just click that refresh button a bunch of times and cross your fingers. But no dice, it doesn't make a difference. Okay, well, if we have a look, it is about.php. So yeah, let's give that a shot. Come back, about.php, aha, it works.
Understanding PHP Server Routing6:10
So yeah, let's give that a shot. Come back, about.php, aha, it works. Okay, so now we're starting to learn something about how php's built-in server works. And it looks like if we request something that it can't match or identify, it'll defer to the default. And remember, index.php, that file name is always the default. Okay, but yeah, it would be nice if I could just do slash about. I don't always want to add the extension here. Well, I'll show you how to get around that.
I don't always want to add the extension here. Well, I'll show you how to get around that. But for now, it's a little bit, just a little bit above our pay grade. But I promise I'll show you how to do that in a handful of episodes. So for now, let's stick with the full file name. So with that in mind, I'm going to go back to index.php. I'm sorry, our view. And here's our navigation bar. And yeah, it sounds like I need to update this to /about.php. And whenever we do create a contact file, that would be contact.php.
And yeah, it sounds like I need to update this to /about.php. And whenever we do create a contact file, that would be contact.php. Okay, and now notice I have to do the exact same thing for the about page. So update that. Yeah, so clearly, imagine making a change like this across 20 different views. It would be a nightmare, right? And we can't allow it. So I'm only duplicating myself once before we solve this problem. Okay, so come back to Firefox, give it a refresh. And now if I click on about, it takes me to /about.php.
Adding Contact Page7:29
Okay, so come back to Firefox, give it a refresh. And now if I click on about, it takes me to /about.php. And we do see the corresponding page. If I want to go back, that works as well. So let's finish up by doing one more for contact. So I'll duplicate this again, contact.php. We'll do the same thing for contact.view. We will begrudgingly duplicate that HTML just for a few moments. And then down here at the bottom, where are we? Contact us.
And then down here at the bottom, where are we? Contact us. And then did I update the view? No, gotta do that here. All right, so yeah, let's cross our fingers. Here's the home page, and pay attention to the copy here, the about page, and the contact page. So now we can even update the headers. So let's do this, and index.php. And yeah, notice to go through all of this HTML, it's just a slog.
So let's do this, and index.php. And yeah, notice to go through all of this HTML, it's just a slog. It's a nightmare. I can't even find it. Where's the header? There we go. All right, so this is our home page. I'll do the same thing for about, search for header. All right, maybe about us, and then to contact, contact us. Okay, give it a refresh, and now it's a little bit more clear.
