Preview
Video Player
00:00
00:00
HTML and PHP
3:08PHP 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