Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In software development it's best to keep your code organized so that it's not duplicated. This is what as known as the _don't repeat yourself_ principle or DRY.
Further Reading
[MUSIC]
0:00
There's often a lot of repetition in
dynamic or even static websites.
0:04
A lots of the head tags contain the same
stuff and the footers are the same too.
0:09
We're going to use a principle called DRY,
or Don't Repeat Yourself.
0:14
There's no need to have this duplication
in multiple files.
0:18
We'll split up our HTML into unique parts
and
0:22
we'll add placeholders for dynamic
information.
0:25
This will form the templates for our
dynamic site.
0:28
Okay.
So
0:32
we've got our design files here in the
design folder.
0:32
We'll take a look at each one
individually.
0:36
And then see what common patterns we can
pull out.
0:38
And we'll extract them and put them into a
views folder.
0:42
So let's just quickly create that folder
now.
0:46
[BLANK_AUDIO]
0:48
And let's take a look at our error page.
0:53
And as you can see at the top here there's
some CSS embedded,
0:57
then there's the body, and then there's
the error.
1:01
Then there's this search form, and then
body in HTML.
1:05
In the index, we've got the same header
again
1:10
the image with the search, and this footer
here.
1:17
And with the profile, we've got all the
embedded CSS, as well.
1:23
And there's a new div called profile with
information in it and the bottom.
1:30
So the commonality between all three is
that they've got this same header
1:35
of html head.
1:40
All this stuff here, all the way up to the
top of the body.
1:44
So, we'll extract all of that into a
header.html.
1:49
So let's do New File.
1:56
Header.html.
1:59
And I just copied all that from the top of
the other page and pasted it in.
2:04
Save.
2:09
Now let's create the footer.
2:11
So New File, footer.html.
2:14
And in this one we want just the body and
the html.
2:22
And just ignore the red because that's
just saying that we don't have an opening
2:34
and closing, we'll be dynamically
generating this from these pages.
2:37
We're gonna put the header at the top and
the footer at the bottom,
2:41
so when it gets sent to the client it will
be valid html.
2:44
Now, let's look at some of the parts which
are common in both places.
2:49
If we look at the error, we've got this
image here, which is the search image.
2:54
And we've got this form here.
3:01
So, we could extract that out and call
that search,
3:04
because we already have that here on the
home page.
3:07
So, we can just copy all that, and
3:12
then create a new file called search.html.
3:16
[BLANK_AUDIO]
3:22
And make sure it's in the views folder.
3:26
And paste in the image.
3:30
So you can hover over the image to see
what it is.
3:33
And you can see that, that's the form and
it posts to the home route, which is cool.
3:36
And that's it.
3:42
Let's take a look at the error page again.
3:44
And we have this one error message here,
this div, so
3:48
we could extract that into its own HTML
file as well, so
3:51
let's call it error.html.
3:56
And we just paste that in.
4:04
And the only thing that we're missing now
is the profile page,
4:07
so if we look at the top of the profile
page,
4:10
we've got the header and then we've got
the profile information.
4:14
So let's just go from that div, the
profile div to the end of the profile div,
4:18
because the body and HTML are the footer.
4:23
And we can copy that.
4:26
Create a New File, profile.html.
4:28
Here's the n.
4:33
Save it.
4:37
And, I think that's it when we come to our
views, we've kept our views dry and cool.
4:39
That's it.
4:46
What we need to do now is we need to
generify or make generic the profile page.
4:47
Cuz at the moment its got an image of
Waldo, we want a picture of the username,
4:54
so we can just swap out this with anything
that we want.
4:59
We can put in maybe two squiggly brackets,
so that when we search
5:04
through this later on in our code, we can
just swap out with whatever we want.
5:10
So we can call this avatarUrl,
5:15
just like what we did in our router, if
you remember.
5:17
In the home not the home route,
5:23
the user route we had avatarurl, username
but it's in javacriptPoints.
5:26
So let's keep to that same standard that
we did before.
5:30
So in here we can put username.
5:35
[BLANK_AUDIO]
5:37
In here we can put badges.
5:42
[BLANK_AUDIO]
5:44
In here we can do javascriptPoints.
5:49
[BLANK_AUDIO]
5:52
And the error.
6:00
It can be also a number of reasons why
there's an error.
6:03
There could be a parsing error, there
could be a not found, etc.
6:05
We can change this with to whatever we
want.
6:09
So let's just do errorMessage.
6:12
Like that.
6:17
Cool.
So what we've done is,
6:19
we've gone through all of our designs.
6:21
We've found the common parts.
6:23
We've extracted them, into their own
separate,
6:26
distinct view files, which we're gonna
read in later on.
6:29
You need to sign up for Treehouse in order to download course files.
Sign up