All language subtitles for Create and style the first page.en

- [Instructor] In the previous movie,

we created the starting
structure of the files

that we're going to need,
the basics of our project.

Now we want to bring
those up in a text editor,

so that we can work with them.

For most text editors, you can simply

drag the directory onto the
icon for the text editor,

in order to open up the entire
project in a project view,

all at once, I've already done that here.

It works the same way whether
you're using TextMate,

or Sublime, or something else.

The overall idea is that
my project is now visible

in one column, I can navigate
the files that I want to edit,

and I can edit them over
in the window on the right.

Let's begin by opening
up the index.php page.

It's immediately inside
the public directory.

Inside this file, you'll
see that I've included

a very simple HTML5 template.

Nothing special about this,
it's just the beginning

of an HTML5 document, that we could then

serve up to the public.

PHP pages are just HTML pages that have

PHP embedded in them, so this makes sense,

that we would have this
as a starting point.

Now let's think for a moment, index.php,

inside the public
directory, is going to be

the root of our website.

That's because we're going
to tell our web server

that the document root that
it should serve to the public

is this public directory, so for example,

if we had a globebank.com as
our URL, then globebank.com

would load up index.php
as its default page.

So I'm going to put in here
for the title, just Globe Bank.

And then in the body,
for now, I'm going to put

h1, Globe Bank: Coming Soon.

Now we're going to come back and work

on the public site later, for now,

I just want to have a placeholder
here that we can look at.

Let's save that file, and let's

bring it up in our web browser,

so we can see that it's working.

At this point, you should
have already installed PHP,

and have it enabled for your web server.

You'll also want to make
sure that your web server,

whichever one you choose to use,

is running, and able to serve files

when your browser requests them.

If you need help with any of that,

you can refer to the course on installing

and setting up PHP with MySQL.

I'm going to navigate to that project.

Now for me, in development, my
web document for development,

is localhost, and then ~kevinskoglund.

Now yours may be different,
you'll have to use

whatever is your default,
it might just simply be

localhost on its own, or it
might be something different.

Change it to fit your needs, but that's

going to be my document root.

And from there, then I'll
need to have my project,

which is globe_bank, and
then the public directory.

That's how I'm going to
navigate to that index.php page.

Now when we launch this to the public,

remember, the public's not
going to type all that.

The public's just going to
type our URL, globebank.com,

and it's going to go to
this exact same spot,

right here, to start with.

So all of that is just for development,

that's why we're going to
have that full root path

in there while we're developing.

And you see that I get
Globe Bank: Coming Soon.

So that's great, we now
know that we're able

to locate the correct
file via our browser,

and our web server was able to handle

the fact that it was a
PHP file, with no problem.

All right, so now let's go
back over to our project,

and now, let's take a
look at this staff page,

staff/index.php.

Now here, let's just change the title.

Let's make it GBI, just the initials

for Globe Bank International,
and let's add in here,

to our body, a little bit
more, let's add a header tag,

and let's do one for navigation.

Just mistyped that, there we go,

and let's do one for footer.

Okay, those are just
some basic HTML5 tags.

Inside the header, we'll put h1,

and let's make this one
just say, GBI Staff Area.

That's indented a little too far,

let's take one of those out.

For the navigation, let's put in ul tags.

We'll put in one li tag,
which is going to be a link,

a href="index.php", and,
it's going to be Menu.

And then let's close our li
tag, and close our ul tag.

And then down here in the footer,

let's put © that'll
be the HTML entity

for the copyright symbol, 2017 Globe Bank.

Okay, so we can save that file,

and we should be able to
bring this up in our browser.

But before we do that,
I'm just going to go ahead

and add in our first bit of PHP code here.

I'm just going to drop in,
instead of 2017 for the date,

we're going to go put in
php echo date, capital Y.

That'll call the PHP date function,

it'll return the current year.

So now we've actually got
our first bit of PHP code,

and we're going to make sure that

that is working correctly, as well.

If not, you'll need to troubleshoot that,

and make sure you've got PHP working.

So let's go back now, now,
in order to get to this page,

it's in the public directory,
and then, inside staff.

Now we could type out index.php,

but by default, it should
render that index.php page.

And sure enough, here
it is, GBI Staff Area,

and you see we've got Menu link,

and the PHP code did load up correctly.

We did get the year's 2017.

Now if you're watching this in the future,

your year will be different,
that's not a problem.

Just make sure that you did, in fact,

get a year there, and not an error

saying the PHP code didn't render.

Okay, so we've now got it
working, but this is pretty ugly.

What we need to do is
introduce a style sheet,

so that we can style this
code, and to do that,

I'm just going to hide
these files for a moment,

and I'm going to go here
to this staff.css file.

I've already got a style sheet written up,

we'll take a look at it,
but I'm going to drag it

into my stylesheets
directory of my project.

Then I can come in here,
to my project again,

and let's take a look at what's in there.

So you can see, I've just
got some basic styling.

You can pause the movie if
you want to copy this down,

it's also included in the exercise files.

So you go down here, you see
we've got a header, header h1.

I've got navigation, I've got some styling

on the navigation ul and li elements.

I've got content, which
we're going to add in later.

I've got in the footer, and
then I've got some styles here

that we're going to be using as we go on.

I wanted to go ahead and add them now,

so that we don't have
to come back to them.

I'm styling some of the different elements

that we're going to be
using as we create forms,

and create all the different
parts of the website.

So there we go, we've got our errors.

So that's it, it's a pretty
simple style sheet, altogether.

Again, it's included
in your exercise files.

Now we need to tell our page

that it's going to use that style sheet.

So the way we do that is we
come up here into the head

of our index.php that's in the staff page,

and we're going to add a link
tag, with rel=stylesheet,

and the media for that is going to be all.

Everyone should get this style sheet,

href=, and I'm just go
leave that blank for now,

and then close out the rest of the tag.

Okay, so now we need the
path to the style sheet.

So what is the path to this style sheet?

If you've worked with HTML before,

then you already know how you do this.

You need to navigate
backwards one directory,

because we're in the staff directory now,

and we need to go out
of the staff directory,

and then into the stylesheets
directory to get to staff.css.

So that means that we've
got to go .., which means

go backwards a directory
to the parent directory,

and then locate the stylesheets directory,

and then staff.css.

Now this href is telling it
to go backwards in the URL.

This is a browser path, not a file path.

Now they're very similar, because it also

happens to be the file path, as well,

but I just wanted to make that point.

We're going to come back
to it a couple of times.

This is the browser path,
it's telling the browser

to back up one level, and then

look for stylesheets, staff.css.

So let's save it, and
let's go back and try it,

see if it worked out,
let's reload our page.

And there you go, now
there's not a lot there

at the moment, because I
don't have my content element,

I think that's the one that
probably gives it the real meat.

Let's add that, div id="content".

And there we go, save it, go back,

and I think that should probably give it,

yeah, a nice big chunk of space here,

that we can fill in below.

And then we've got one link
on the page, which is Menu.

If we click that, you
can see it just brings us

back to this same page, index.php.

So for now, make sure that you're able

to bring up pages in your browser,

make sure that PHP works, so that you have

a date at the bottom of the footer,

and that you are able to
access the style sheet,

that you do have the ability

to link to the staff style sheet.