1 00:00:00,000 --> 00:00:04,832 [MUSIC] 2 00:00:04,832 --> 00:00:08,508 Up to this point, this course has strictly used PHP, but 3 00:00:08,508 --> 00:00:12,370 PHP was designed to make building Web pages easier. 4 00:00:12,370 --> 00:00:14,233 So let's put this on the Web. 5 00:00:14,233 --> 00:00:18,548 I've included the HTML and CSS we'll be using for this course, but 6 00:00:18,548 --> 00:00:22,380 you should be familiar with how HTML and CSS work. 7 00:00:22,380 --> 00:00:25,600 If you haven't gone through our introduction to HTML and 8 00:00:25,600 --> 00:00:28,570 CSS course yet, check out the link in the teacher's notes. 9 00:00:29,680 --> 00:00:33,270 Click the Launch Workspace button to launch a new workspace with 10 00:00:33,270 --> 00:00:35,190 all the files that we'll need for this section. 11 00:00:36,890 --> 00:00:42,460 In the new workspace, we see an index.html file as well as a css folder 12 00:00:42,460 --> 00:00:46,500 with styles.css and an image folder with a couple images. 13 00:00:46,500 --> 00:00:50,110 These are the files that make up the basic Web page we'll be working with. 14 00:00:50,110 --> 00:00:53,260 You'll also see the php files we've created throughout the rest of 15 00:00:53,260 --> 00:00:54,820 this course. 16 00:00:54,820 --> 00:00:58,170 If you click on the Preview button, the icon in the top right-hand corner, 17 00:00:58,170 --> 00:01:00,090 it will open a new browser window. 18 00:01:01,760 --> 00:01:03,580 This shows our index page. 19 00:01:03,580 --> 00:01:07,190 You'll see here that we have a simple informational page with the treehouse logo 20 00:01:07,190 --> 00:01:08,610 and some text. 21 00:01:08,610 --> 00:01:14,080 If we switch back over to our workspaces, we can open the index.html file. 22 00:01:14,080 --> 00:01:18,869 And we can actually see the code that's displayed on the page. 23 00:01:18,869 --> 00:01:21,249 Let's start adding some PHP. 24 00:01:21,249 --> 00:01:24,227 Let's replace this Name heading on the left-hand side. 25 00:01:24,227 --> 00:01:29,601 We can add a php code block anywhere we want in the HTML by adding the opening and 26 00:01:29,601 --> 00:01:30,936 closing php tags. 27 00:01:35,794 --> 00:01:39,594 Then we put our php code within those tags, nothing fancy yet or 28 00:01:39,594 --> 00:01:41,230 even very useful. 29 00:01:41,230 --> 00:01:42,282 I'm just going to echo my name. 30 00:01:46,066 --> 00:01:48,320 Let's save this file and switch back over to the preview. 31 00:01:49,820 --> 00:01:52,240 When we refresh, we don't see any name at all. 32 00:01:52,240 --> 00:01:53,640 So now let's go view the source. 33 00:01:56,010 --> 00:01:57,930 You'll see the new php code block. 34 00:01:57,930 --> 00:02:00,690 But why isn't our php code working? 35 00:02:00,690 --> 00:02:03,630 Well we haven't told our server that this is a php file. 36 00:02:03,630 --> 00:02:06,870 So it doesn't know it's supposed to do anything special. 37 00:02:06,870 --> 00:02:12,578 Let's go back to workspaces and rename this file from index.html to index.php. 38 00:02:16,448 --> 00:02:20,042 Without the php extension, it's just plain HTML. 39 00:02:20,042 --> 00:02:21,730 Now we can go back to our browser. 40 00:02:23,190 --> 00:02:26,030 This time, we see my name, just like I wanted. 41 00:02:26,030 --> 00:02:30,590 A PHP file can include HTML outside the PHP code block. 42 00:02:30,590 --> 00:02:35,135 And that HTML will be processed the same way an HTML file would be processed. 43 00:02:35,135 --> 00:02:38,770 PHP only executes the code within the code blocks. 44 00:02:40,570 --> 00:02:42,980 Great job, you've now used PHP 45 00:02:42,980 --> 00:02:47,630 in combination with HTML to create your first PHP webpage. 46 00:02:47,630 --> 00:02:50,670 I know, I know, it's really not very impressive yet. 47 00:02:50,670 --> 00:02:52,960 And you could have done this in pure HTML. 48 00:02:52,960 --> 00:02:54,560 Don't worry, I've got you covered. 49 00:02:54,560 --> 00:02:58,810 In the next couple videos, we'll learn how PHP can reduce busywork and 50 00:02:58,810 --> 00:03:02,920 maintenance, allowing us to work faster and be more productive. 51 00:03:02,920 --> 00:03:05,720 Finally, we'll include the other scripts that we wrote and 52 00:03:05,720 --> 00:03:07,310 put all these projects together.