Woohoo! A new Figma course has dropped! 🤩

🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding to and Iterating a List

13:43 with Craig Dennis

Let’s create a list of ideas and display them in our template. You will explore using the Model in our View that was passed to you from your Controller. MVC in action!

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Learn more:

Model View Controller - MVC - Pattern
Post/Redirect/Get - PRG - Pattern
We’ve got a course in the works on Functional Programming. Check back soon! For now, check out the official Oracle tutorial on Streams

The updated design from our design team!

body{
  background-color: #eaeaea;
  font-family: Arial;
}

  a{
    color: #2c89ba;
    text-decoration: none;
  }

  a:hover{
    color: #174963;
    text-decoration: underline;
  }

  ul{
    padding: 0;
  }

    li{
      border-bottom: 1px solid #eaeaea;
      list-style: none;
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
    li:last-child{
      border: 0;
      margin: 0;
      padding: 0;
    }

  .page{
    background-color: #fff;
    border-radius: 5px;
    margin: 40px auto;
    padding: 20px 40px 40px 40px;
    width: 600px;
  }

    input{
      border-radius: 5px;
      border: 1px solid #ccc;
      padding: 10px;
    }

    button{
      background-color: #2c89ba;
      border: none;
      border-radius: 5px;
      color: #fff;
      padding: 10px;
    }

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

All right, let's get into the meat of our application. 0:00

Let's allow students who we know to submit ideas, and 0:03

then we'll display them in a list. 0:06

How are we gonna make sure that we know the student? 0:10

I know, let's expose a link in our if statement that 0:13

checks if we know their username. 0:16

Okay, so let's start out by opening up our index.hbs page. 0:19

So that's this guy here, index.hbs. 0:23

And I'm going to get rid of this TODO because we TO-DID that. 0:26

And so inside the if block here, we want to add a hyperlink and 0:30

a hyperlink will do that using an anchor tag. 0:35

So let's make a new paragraph here, and we'll say View and if I do a and 0:39

then I do a Tab, it's gonna build out and 0:43

that href there is the reference of where we want it to go. 0:46

So we want it to go to /ideas, which we havent built yet, but we will. 0:50

And we'll make it say View all course ideas. 0:55

And that makes that a link, right? 0:59

So when you click all course ideas, it will make a get request to /ideas. 1:01

So we better catch that, right? 1:07

So let's flip over back to main.Java. 1:08

Let's add a new get, and we'll say get ideas. 1:13

And that of course gets our request and response object route. 1:19

We know it's gonna be a multi-liner. 1:24

And we know that it's gonna take the new HandlebarsTemplateEngine. 1:27

Okay. 1:35

Why don't we just pop our ideas into the model context, right? 1:37

Now obviously at first there won't be any but that's okay. 1:42

Let's do it. 1:45

So we'll make a new model. 1:46

[BLANK] Yeah, 1:48

that of course is a HashMap. 1:51

It's getting repetitive, isn't it? 1:57

Sure wish that that auto-completed. 2:01

There's probably a way to do that. 2:03

Okay, so inside the model, let's put our ideas, a collection of ideas. 2:06

And now we have access to our data access object. 2:13

And remember, we made one called findAll, 2:17

and our implementation returns a copy of the list. 2:20

Cool. 2:23

Sorry, we don't want String String on this one, we actually want String object. 2:24

Okay, and we're going to return new ModelAndView, 2:32

and we're gonna return the model and 2:36

we're gonna have that go to our ideas page that doesn't yet exist. 2:39

So, let's go make that. 2:45

So, we'll make a new ideas.hbs file. 2:47

Okay, and we want to first say what we're gonna inherit from. 2:53

Let's inherit from base.hbs. 2:57

Now that that's out of the way we can add our new partial at the top. 3:00

We want this to be the partial for content. 3:06

Great. 3:10

Okay, so we know that this is the idea page so that's a good heading, right? 3:11

So, let's say Current Ideas. 3:15

So in HTML when you want to display a list you actually have a few options. 3:20

So one of the most obvious ones to use first is an unordered list, 3:24

and that's a ul. 3:28

So you type ul and each one of those has a thing called an li which is a list item. 3:29

So what we want to do is we want to loop through each of the ideas and 3:35

make a list item. 3:39

So in order to do that Handle Bars has a really nice block helper and 3:40

it's called each. 3:44

You can kind of imagine this as doing a for each loop. 3:45

So we're gonna say, #each, and then you loop on the object. 3:48

Now remember when we pushed ideas into the context, so 3:52

we're gonna loop through each idea. 3:55

So basically this is saying for each idea in ideas. 3:59

And we'll add a new li. 4:03

Or list item for each of those ideas and now this is a little bit different. 4:06

Inside this each loop, it's the block scope is against the idea. 4:10

So actually all we want to do here is we want to show the title, right? 4:16

So we're going to show the title of the idea. 4:21

Now wait a second, how does it know about the word title? 4:25

The course idea object, if we take a look at that, it only has getTitle, right? 4:28

This is a private thing so it can't see that, so it only sees this getTitle. 4:34

So the handlebars.java implementation understands POJO, or 4:37

plain old java object syntax. 4:42

So it knows that it can call the getTitle method on our object. 4:45

It's pretty cool, right? 4:48

So, we didn't need to write getTitle here. 4:50

We just wrote title and it pulled it out. 4:53

Okay, so let's walk that one more time. 4:58

So, we passed in a list of course ideas into our model context, 5:01

right, for model and view. 5:05

And then, there's a block helper and it's called each. 5:07

It works with each item in this list. 5:12

For each of those items, it puts it into this block's scope. 5:16

In here, this block's scope is that item. 5:21

And it pushed in a course idea object, which has a method called getTitle, 5:25

and it can be accessed here by not putting the get prefix. 5:31

Make sense? 5:34

Okay. 5:36

So now after that each, let's go ahead and let's add a form to add a new one. 5:37

So, let's make it post to the same page, to ideas, right? 5:44

But we want it to post, right? 5:50

Cuz we're adding information. 5:52

Okay. 5:55

Inside this form let's 5:57

have a field called title. 6:01

Let's make the placeholder say "What's your idea? 6:06

And we're gonna name that title so 6:12

when it comes across it will be title in the query string. 6:14

All right. 6:18

And then let's make a button that says Suggest. 6:19

So clicking that button will submit this form via post to ideas. 6:27

So we better go catch that, right? 6:33

So let's go back to Main, and we already have one for 6:36

ideas here, but we can also do a post version to the same URI. 6:41

So we'll do req and res. 6:49

Okay, so let's pull the title from the form submission. 6:57

So we wanna get a title out. 6:59

So the title is going 7:01

to be req.queryParams. 7:06

And we named that field "title". 7:13

Great, okay, so now we have the title, and let's make a new course idea. 7:15

We'll use the title and then we'll pull the username from the cookie. 7:21

Okay, so we'll say new 7:26

CourseIdea = new CourseIdea. 7:30

No, not course idea. 7:36

Let's go ahead and say that it's that, and we want to pass on the title and 7:37

it takes a title and it takes a username. 7:43

So we'll pull that from the cookie. 7:49

It's a little interesting, right? 7:53

We're binding our implementation detail to the fact that it's using a cookie. 7:55

What if we wanted to change that later? 7:59

What I'm gonna do, I'm gonna leave a TODO here, 8:01

because that feels a little awkward doesn't it? 8:02

It feels like the only way that we know who's logged in is by a cookie. 8:04

We don't wanna expect that, so let's leave it the TODO here and csd is my initials. 8:09

So, this username is tied to the cookie implementation. 8:14

That's not good stuff. 8:20

We wanna fix that. 8:21

Okay, and our data access objects exposed a method that lets us add. 8:23

We should probably use it, right? 8:27

So, the data access object add(courseIdea). 8:28

Now we could show a page that says it was added but that seems kinda silly, right? 8:35

What should happen is that the user should just see their idea on the list, right? 8:40

But we can do this. 8:43

Why don't we just refresh the ideas page and it should just show up, right? 8:45

Because we added it and before in the get we lifted them all so 8:49

it should just show up. 8:51

So this is known as redirection. 8:53

What we'll do is we'll redirect the client to the Ideas page 8:55

which will hit our get route here. 9:00

Cool? 9:03

So let's add it. 9:04

So, on the response there is a method called redirect and you pass in the URI. 9:05

So, redirect it, it's gonna do a get, so it's gonna do a get there. 9:12

And we have to return something, so the pattern is that you return null. 9:16

Okay, what do you say we give that a go? 9:22

Let's do it. 9:24

So I'm going to run my server, restart yours if yours is running, 9:25

mine had stopped. 9:30

Okay, and I'm gonna flip over here, go to localhost. 9:35

I am currently logged in, so we saw that in the if statement. 9:41

We can stop that. 9:45

Let's bring that up and let's take a look at the resources. 9:46

We'll wipe this cookie. 9:51

Let's make sure that we don't see the view all course ideas. 9:55

Awesome. 9:57

Okay, so do, now that we know who's there. 9:59

This page is kind of ugly, we need to get rid of this. 10:06

Now we can do this. 10:09

We can click on View all course ideas. 10:10

What's your idea? 10:12

I think that we should have one on how to test spark. 10:13

So we should do Spark Testing. 10:17

Now I had to type that in before, that's why that showed up there. 10:18

I'm gonna click Suggest. 10:20

Whoa, look at that. 10:23

It just showed up. 10:24

So again, what happens is we posted and 10:26

then the response added it to the list and then it redirected to ideas. 10:30

Now, the browser knows how to handle what a redirect is. 10:35

It tells the browser to make a new get request. 10:38

So, really, what happened here was two request response loops, right? 10:40

So, I put in the idea. 10:44

So, let's say that I wanted to do a course on 10:45

CSS Basics and we click Suggest. 10:48

So that's gonna do a post. 10:57

And then it's sending the new get, right? 10:59

So what this is known as is the post-redirect get pattern or PRG. 11:02

More in the teacher's notes. 11:07

So remember, this simple course idea, Data Access Objects, we built here, 11:09

it only exists in memory. 11:13

So if we were to reboot, it would just go away. 11:15

But many others at this time could hit this site, and also add their ideas. 11:18

One second here, I just got a ping on my messenger. 11:22

[LAUGH] Just like I thought, a designer coworker friend of mine walked by my desk, 11:24

and saw what we were doing, and sent me a message saying, dude, what is it, the 90s? 11:30

Here's some CSS in a better wrapper. 11:34

[LAUGH] I love working here. 11:35

All right, so he gave me some CSS. 11:37

So I'm gonna go ahead, I'm gonna grab the CSS I put in the teacher's notes. 11:39

So, if you wanna copy it to your clipboard, which I'm doing right now, 11:43

and if we paste that in our main CSS 11:49

file and go ahead and save that. 11:54

It's a lot of stuff there. 11:59

I'm trusting him because I trust my co-workers. 12:01

I'm gonna flip over here to my 12:03

base page cuz he wants us to add a new wrapper around our page. 12:09

And because we have a page wrapper we can do that. 12:15

So I'm gonna make a new div which is like a divider or 12:17

division a section like thing. 12:19

So we're gonna say class = page. 12:22

And that div is gonna span all the way across our content. 12:29

All right. 12:32

So, this is what Sully, my designer friend, wanted us to do, 12:35

my coworker, so let's take a look. 12:40

Let's go ahead and refresh our page. 12:43

Wow, nice. 12:47

Look at our ideas. 12:49

Much better. 12:52

Thank you for bringing us into the current century. 12:54

>> Great job getting that list of ideas displayed and 12:58

adding a form that updates our data. 13:00

This is really starting to come together. 13:02

One thing that jumped out to me, is that we blocked unknown users, but 13:05

only by not showing them the View All Ideas link. 13:09

But the way that the Internet works, anyone can pass a URL around, so 13:13

just keeping that link hidden behind an If block 13:17

isn't really the best way to protect a page. 13:20

You know, now that we learned that redirect trick, 13:23

wouldn't it be cool if we didn't have the right credentials, 13:26

if we didn't have their username, if we could block them from continuing? 13:29

Let's do just that after this break. 13:33

I was thinking, do you think you can remove that silly page after sign-in and 13:36

just have it redirect to the home page after they submit their username? 13:40

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up