How to Use PHP in HTML

I know what you're thinking. In fact, 98% of developers know exactly what you're thinking and how you feel about approaching server application development. Okay, I made that number up, but hopefully you get the idea. Being brand new in the world of server application development is very daunting. And if you've chosen php as your first server side language then one, you're very wise, and two, you've come to the right place. I'm Jeremy McPeak with Tuts+. And in this video, I will show you how you can use PHP in HTML. But first, if you're looking to create a professional website or you want to add features to make your website stand out, then head over to Code Canyon, the marketplace for high quality JavaScript and PHP components, HTML5 and mobile templates, and so much more.

 The items that Code Canyon can help you easily add the functionality and eye popping visuals that you need to meet your businesses goals. You'll find a massive library that contains thousands of JavaScript and PHP components, and almost 20,000 HTML and mobile templates. Needless to say, you'll find what you're looking for to take your site to the next level. When you're writing a PHP application, your code is going to go inside of a PHP file. So let's start by creating one, and we'll just call it time.php. Now let's first of all talk about the extension, because the extension is very important. PHP is code that executes on the server. And the extension of a file tells the server how to handle that file. Like, for example, if you have a file called time.html, well, because it is an HTML file, the server knows that it needs to find that file on the file system and then send that file back to the browser. But it does a little bit more than that. It also says, hey, browser, this is an HTML file, because the browser itself doesn't know. So the server sends that file back, says hey, this is HTML. And then the browser then knows to treat that file as an HTML file. It does the same thing for CSS and JavaScript and images and all of that, but for PHP, it's a little bit different. Because on the server is a program called PHP. And whenever you request a PHP file, well, the server sees that PHP extension and it says, I need to take this and I need to send that to the PHP program, and then it is going to execute our code inside of that file. So you can think of a single PHP file as a mini little application because that is essentially what is being done on the server. It's executing that code and then we get to see the result of that code in the browser. So let's do this.

 We're gonna add some markup. And you might think that a PHP file can only have PHP code, and that's not the case. In fact I'm willing to bet that the majority of PHP files have some markup. And you don't even have to have PHP code. So if we just have some content, then, of course, that's what we're going to see in the browser. And if we view the page source, well, we're going to see what we would expect to see.

 There's all of our markups. But, of course, that kind of defeats the purpose because if you have a PHP file, the idea is that there's going to be PHP code to execute. So we are going to do the same exact thing, except we're going to use PHP code to output that content here. So the first thing we need to do is add that PHP code. And we do so with what looks like a very weird HTML tag. It has an opening angle bracket, followed by a question mark, and then PHP. And then anything that comes after this is considered to be PHP code. So if we left it just like this, and we go back to the browser, let's refresh the page and we see that there is some kind of parse error. And this would be a little bit easier to see inside the rendered content. And you can see that there's this unexpected token, this opening angle bracket. Well, that's because we are inside of PHP code. And there's this closing body tag, which is not PHP code. So our little application said, woah, I don't know how to do this. And so if you're going to have PHP code inside of your HTML, then you need to close out of the PHP code. And you do that with a question mark followed by a closing angle bracket. Then whenever we go back to the browser, we can see that everything's okay. But we no longer have our content, so we need to output something here. And one of the easiest ways to do that is to use echo. So we'll echo out this content here. We'll go back to the browser, and we can see that the content is right there. And, of course, that would be rendered as it should. Now, this, of course, isn't very dynamic because all we are doing is outputting this string. So let's do this. Let's output the current time because the seconds are always changing, every second it changes. So to do this, we're going to call this function called date. Even though it says to date, we get both the date and the time, but we have to tell this how we want to display that information. And all we really care about is the time. So we're going to use a format that is the hour, followed by the minutes, which is not m, it's i, followed by the seconds. And then I went to include the AM or PM. So we'll just have that there. And I know that that looks cryptic, but that's kinda part of working with dates and times. So if we go back to the browser and refresh, we now see the current time. And if I refresh the page, we can see that the seconds are updating. So the content is being updated as that code executes on the server. And if we look at the source code, now one thing to notice is that there is no PHP code at all. What we see is the result of executing that PHP code. So what is sent to the browser is just pure HTML. Now we can do this a little bit easier by using what's called a short code. All we are doing is outputting some data. And we can do this with a short tag, which begins with an opening angle bracket followed by a question mark, but then we have an equal sign. And then whatever it is that we want to output, which of course in this case is going to be the time. And if we go back to the browser and refresh, we see the same result. So if you just need to output something, this is a much cleaner and concise way of doing that, using that shortcode. Well, let's create a new file. Let's call it names.php. And let's add in our markup. But in this case we're going to have multiple code blocks. And that's one of the beautiful things about PHP. We can put PHP code anywhere. So we can put PHP code at the very top. Or if we wanted to in between this last meta element and the title, we could have PHP code there. We can even have PHP code inside of an attribute, which we will look at here in a moment. But let's first of all create an array called names. And we'll have three names here. We'll have James, Michelle, and then John. And we want to display these names in a list in HTML. So inside of the body, let's have an h1 that says just simply Names. Then we will have our unordered list. And then of course inside of this list, we want the LI elements for James, Michelle, and John. And since that information is in an array, one of the easiest things to do is to use a loop. And in this case we're going to use a for each loop. So we want to switch into PHP code. We're going to use foreach($names as $name. And then we will have the body of that loop. Now remember that inside of a PHP code block, it is expecting PHP code. So we can't unfortunately just switch into HTML and output the individual name. That would be really wonderful, but we can't because it is expecting PHP code. What we can do, however, is this. It's a little bit more work, but we're going to begin with the foreach definition in one little PHP code block. Then we will have the closing curly brace inside of another PHP code block. And then anything inside of this is still part of that foreach loop. So here, all we want to do is output the name. So we will use that short tag, output the name. And whenever we navigate to that page, let's do that. We will see the names, James, Michelle, and John. And, of course, as we add elements to this array, let's have Jerry. Whenever we view this in the browser, we will see Jerry added to the list. Well, let's add some style here. And we'll use PHP to dynamically apply that style. So we'll have two classes, one for let's say a background-color of Navy. And we're gonna call this some-names. And in fact we're going to do a little bit more here. We'll have the background-color of navy and we will also have the foreground color of white, that way we can see the text. And then we will have more names, and we'll set the background-color to simply gray. And let's say that we want to change the background-color of this ul element based upon the amount of names that we have. So if we have, let's say three names, we will use the some-names class. If we have four names, we will use the more-names class. And we will do that just like this. We are going to use PHP, we'll use the short tag, and we want to get the length of our names array. So if it is greater than 3, then we want to use the more-names class. Otherwise, it's going to be the some-names. Let's save this. Let's go back to the browser. Let's refresh. And we see the background color of navy and the text is white. But let's add back in that Jerry. And by that, whenever we refresh the page, we're going to see that it completely changes. We now have a background color of gray. Now the last thing that we will look at is including other PHP files, because that's one of the features that PHP gives us. Not only can we have markup and code inside of our PHP file, but we can also include a completely separate file. So let's create a new PHP file. We're gonna to call this style.php. The idea being that we are going to take the style that we just wrote. We're going to cut that out and paste that inside of the style.php file. The idea is that we would want to use these classes in multiple files. And yes, of course, we could do this with CSS. So I guess let's change this, something that would be a little bit more realistic. We'll call it header.php. And what we will do is take the entire head, and we will cut that out of names. And then we will put that inside of header. So that then we would want to include this inside of both the names and the time. And we can do that by calling a function called include. We just pass in the name of the file that we want to include, header.php in this case. But of course we need to switch into PHP mode to do that. And then we will make the same modification to the time.php file. Now, the include function is just one of the ways that you can include a separate file, there are other functions that serve slightly different purposes. So let's go in to time. Let's paste in the include of that header. And if we just view the source here, we're going to see that we now have the head from that header.php. You can see that we are inside of the time.php file. If we change this to names, we're going to see something similar. And if we make any modifications to that header file, that is going to be noticeable in all of the pages. So if we change the title to PHP Stuff, then inside of the browser we're going to see that title change. This is names. If we look at time, then we will see the same thing. So mixing HTML and PHP is relatively straightforward. You, of course, want a file that is a PHP file, meaning that it has a PHP extension. And then you can add your markup or your PHP however you need. And, of course, there are many different techniques of how to do that. In fact, we cover that and so much more in the PHP Fundamentals course here at Tuts+. It's completely free, so be sure to check that out. Thank you so much for watching this tutorial. If you liked this video and want to see more, be sure to subscribe to the Envato Tuts+ YouTube channel. And of course if you want to learn more, check out the other fantastic tutorials that Envato Tuts+ plus has to offer. I'm Jeremy and I will see you next time.