- What is MVC? 3:10
- Model View Controller Basics 3 questions
- Create a Category Model 1:40
- Fix a Model 1 objective
- Add a CategoryRepository 5:41
- Add a CategoryController 9:40
- Fix a Controller 1 objective
- Code Two More Thymeleaf Templates 4:13
- Fix a Thymeleaf Template 1 objective
- Wrappin' It Up 1:18
- Spring MVC Review 3 questions
Preview
Video Player
00:00
00:00
Code Two More Thymeleaf Templates
4:13In this video, you are tasked with creating two Thymeleaf templates: one that lists all categories, and one that serves as a detail page for each category.
We've finally arrived at
the last task of the course, and
0:00
that is to code our remaining views.
0:03
Whether you were able to code
the category model, repository, and
0:06
controller on your own, or maybe you
needed to tweak some things after watching
0:09
my solution, either way,
congratulations on sticking with it.
0:13
Remember the goal is not to get it
correct in a pristine manner the first
0:18
time through.
0:22
The goal is to stick with rigorous
challenges trying your best to tackle them
0:23
as much as you can with the experience and
knowledge you have at the time.
0:27
So in either case, I commend you on
your persistence up to this point.
0:32
But we're not done yet.
0:37
You still need to update the category.html
and categories.html templates
0:38
to use the data that we made
available by the category controller.
0:44
I've tried to include descriptive
comments in these template files to
0:48
guide you through finishing this project.
0:51
These helpers come in
the form of HTML comments and
0:55
they look like the one you see
at the bottom of the screen.
0:57
So, have at it.
1:00
Wrap this thing up by coding the two
remaining time leaf templates,
1:02
category.html and categories.html.
1:05
When you're done, unpause and
I'll show you my solution.
1:09
Let's start with
the category.html template.
1:13
You probably noticed that
this one is almost identical
1:17
to the home.html template.
1:19
This makes sense because they both
are displaying a list of GIFs.
1:21
It's just that this template will
present only a given categories GIFs,
1:25
while the home template presents all GIFs.
1:29
Of course, that change actually comes
in the controller, and depends upon
1:31
the list we add to the model map, whereas
in the template it looks identical.
1:35
The only difference in this template is
that there's a div with a class name of
1:40
chip here.
1:44
And I've used the th:text attribute
to drop in the category name.
1:45
Pause here if you need
to take a closer look.
1:52
And now to the categories template.
1:54
Though this one has a slightly
different HTML structure the ideas
1:57
are essentially the same.
2:00
I'm gonna scroll down here to
the section that you work on.
2:02
In order to produce the loop that
repeats this div element for
2:05
as many times as there are category
objects in the categories collection,
2:10
we use this th:each attribute in the div.
2:16
So this is a lot like the Java for
each loop.
2:20
For each category object
in the categories object
2:23
that comes from the model
map produced this div.
2:28
For the anchor down below I
had two items to take care of.
2:31
There was the href attribute and then the
text that comes between the opening and
2:35
closing anchor tag.
2:38
For the href attribute,
I use a th:href attribute so
2:40
that the templating engine
will generate that for me.
2:43
And to get the correct URL,
2:46
I concatenate /category/ with the category
id that was added to the model map.
2:49
And then for the text that
comes between the opening and
2:55
closing anchor tags, I use a th:text
attribute and give it the value
2:58
of the name property of the category
object that was added to the model map.
3:03
If you want to see how it looks on
the web, head over to your browser after
3:08
redeploying, so I'm going to expand this
little bit, I'm going to stop my server
3:11
and then I'm going to click
boot run again to redeploy.
3:16
All right, it looks like our server is
booting nicely and I'm going to switch
3:22
over to the browser and from here
I'll click on the categories link.
3:26
And see what we have.
3:30
And there are all three of our categories.
3:32
If I click on any one of
the categories name's
3:34
I should see the GIFS that
are associated with that category.
3:37
Remember, we arbitrarily added these so
3:41
they may not make sense
with the category name.
3:43
I go back to Categories and
click on Destruction,
3:46
I should see something different.
3:49
And I see the favorites
are marked just as before.
3:51
If either of these pages on your own app
looks drastically different from mine,
3:55
you might check the HTML structure and
be sure you didn't remove or
3:58
change a class name, or
accidentally delete a closing tag.
4:01
Changes like those will affect how the CSS
is applied, thereby changing the look and
4:05
the feel of the page in the browser.
4:10