HTML and PHP

[MUSIC] 0:00 Up to this point, this course has strictly used PHP, but 0:04 PHP was designed to make building Web pages easier. 0:08 So let's put this on the Web. 0:12 I've included the HTML and CSS we'll be using for this course, but 0:14 you should be familiar with how HTML and CSS work. 0:18 If you haven't gone through our introduction to HTML and 0:22 CSS course yet, check out the link in the teacher's notes. 0:25 Click the Launch Workspace button to launch a new workspace with 0:29 all the files that we'll need for this section. 0:33 In the new workspace, we see an index.html file as well as a css folder 0:36 with styles.css and an image folder with a couple images. 0:42 These are the files that make up the basic Web page we'll be working with. 0:46 You'll also see the php files we've created throughout the rest of 0:50 this course. 0:53 If you click on the Preview button, the icon in the top right-hand corner, 0:54 it will open a new browser window. 0:58 This shows our index page. 1:01 You'll see here that we have a simple informational page with the treehouse logo 1:03 and some text. 1:07 If we switch back over to our workspaces, we can open the index.html file. 1:08 And we can actually see the code that's displayed on the page. 1:14 Let's start adding some PHP. 1:18 Let's replace this Name heading on the left-hand side. 1:21 We can add a php code block anywhere we want in the HTML by adding the opening and 1:24 closing php tags. 1:29 Then we put our php code within those tags, nothing fancy yet or 1:35 even very useful. 1:39 I'm just going to echo my name. 1:41 Let's save this file and switch back over to the preview. 1:46 When we refresh, we don't see any name at all. 1:49 So now let's go view the source. 1:52 You'll see the new php code block. 1:56 But why isn't our php code working? 1:57 Well we haven't told our server that this is a php file. 2:00 So it doesn't know it's supposed to do anything special. 2:03 Let's go back to workspaces and rename this file from index.html to index.php. 2:06 Without the php extension, it's just plain HTML. 2:16 Now we can go back to our browser. 2:20 This time, we see my name, just like I wanted. 2:23 A PHP file can include HTML outside the PHP code block. 2:26 And that HTML will be processed the same way an HTML file would be processed. 2:30 PHP only executes the code within the code blocks. 2:35 Great job, you've now used PHP 2:40 in combination with HTML to create your first PHP webpage. 2:42 I know, I know, it's really not very impressive yet. 2:47 And you could have done this in pure HTML. 2:50 Don't worry, I've got you covered. 2:52 In the next couple videos, we'll learn how PHP can reduce busywork and 2:54 maintenance, allowing us to work faster and be more productive. 2:58 Finally, we'll include the other scripts that we wrote and 3:02 put all these projects together. 3:05