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