HTML and PHP3:08 with Alena Holligan
PHP was designed to make building web pages easier, so let's put these newly learned skills on the web. I've included the HTML and css we'll be using to include the PHP applications we've written on a website.
[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
You need to sign up for Treehouse in order to download course files.Sign up