1
00:00:00,190 --> 00:00:04,460
Okay, so we have a piping hot request
coming in that we need to catch.

2
00:00:04,460 --> 00:00:05,910
Now when we built that forum,

3
00:00:05,910 --> 00:00:10,820
we specified that it was going to
be using the HTTP method of post.

4
00:00:10,820 --> 00:00:14,360
Now that means, instead of placing
the name value pairs in the URL,

5
00:00:14,360 --> 00:00:17,850
things are going to be submitted
in the body of the request.

6
00:00:17,850 --> 00:00:20,440
Let's take a look at what was being
sent across and then let's handle it.

7
00:00:22,250 --> 00:00:24,840
Okay, so
in your browser I'm using Chrome here.

8
00:00:24,840 --> 00:00:28,260
There's most likely some
sort of web developer tools.

9
00:00:28,260 --> 00:00:30,340
Now I'm gonna open them
up here real quick.

10
00:00:30,340 --> 00:00:34,910
What I'm gonna do is I'm gonna choose
view, developer, developer tools.

11
00:00:34,910 --> 00:00:38,340
And what I'm gonna do is I'm gonna submit
and I'm gonna take a peek here underneath

12
00:00:38,340 --> 00:00:41,380
this network tab so you can see
the different parts of the page.

13
00:00:41,380 --> 00:00:44,700
Underneath the network
tab it will show you

14
00:00:44,700 --> 00:00:46,520
what happens when
the request comes across.

15
00:00:46,520 --> 00:00:48,410
So I'm gonna click sign in.

16
00:00:48,410 --> 00:00:52,920
And we'll see here that if 404,
you know, it's not found.

17
00:00:52,920 --> 00:00:55,490
But if we click it,
we can tell here that, well,

18
00:00:55,490 --> 00:00:56,590
the different headers that were sent.

19
00:00:56,590 --> 00:00:59,020
We'll see here that it
was a form URL encoded.

20
00:00:59,020 --> 00:01:01,650
And you'll see down here
there's a form data section.

21
00:01:01,650 --> 00:01:04,870
And I click view source, and
that's what went across.

22
00:01:04,870 --> 00:01:06,120
But this is what it is parsed.

23
00:01:06,120 --> 00:01:07,670
So, there is a key called username,

24
00:01:07,670 --> 00:01:10,180
and it's Craig Dennis,
which is what Craig Dennis is.

25
00:01:10,180 --> 00:01:10,790
Great.

26
00:01:10,790 --> 00:01:13,240
For more on these tools,
please check the teacher's notes.

27
00:01:13,240 --> 00:01:16,220
Okay, so
let's take that data from the request and

28
00:01:16,220 --> 00:01:18,670
provide a custom message
based on what they entered.

29
00:01:18,670 --> 00:01:22,020
So first,
we need to capture that post request.

30
00:01:23,570 --> 00:01:24,590
How do you think we do that?

31
00:01:26,340 --> 00:01:29,260
We have the get that capture get request.

32
00:01:29,260 --> 00:01:33,200
So why don't we see what
happens if we try post.

33
00:01:33,200 --> 00:01:33,770
Perfect.

34
00:01:33,770 --> 00:01:35,410
It is exactly what we thought it would be.

35
00:01:35,410 --> 00:01:37,960
It's awesome.
I love when APIs work like that.

36
00:01:37,960 --> 00:01:39,070
So it's complaining here.

37
00:01:39,070 --> 00:01:42,520
Let's see why.
We are going to static import.

38
00:01:42,520 --> 00:01:43,020
Post.

39
00:01:44,670 --> 00:01:45,760
Cool.

40
00:01:45,760 --> 00:01:49,710
So we'll say post and the name of,
we're doing a sign in.

41
00:01:49,710 --> 00:01:54,833
And then it takes the same lambda route

42
00:01:59,395 --> 00:02:04,186
We're gonna return a new ModelAndView, and
for now let's just pass null, and then

43
00:02:04,186 --> 00:02:08,960
the name of the template which we haven't
created yet we'll call sign-in.hbs.

44
00:02:08,960 --> 00:02:14,860
Great, then of course it's
our HandlebarsTemplate.

45
00:02:16,990 --> 00:02:21,120
Okay, so let's go make our new file and
we'll call it sign-in.hbs.

46
00:02:21,120 --> 00:02:28,155
So, we'll come under templates here,
say new, file, signin.h.

47
00:02:28,155 --> 00:02:33,105
This is gonna look very similar

48
00:02:33,105 --> 00:02:37,595
to the html markup that
we did on the index page.

49
00:02:37,595 --> 00:02:40,595
So if you're starting to
feel your spidey sense

50
00:02:40,595 --> 00:02:45,365
that we're breaking the dry principle,
the don't repeat yourself, you're right.

51
00:02:45,365 --> 00:02:47,170
So we'll fix that here in a bit.

52
00:02:47,170 --> 00:02:48,990
But let's stay focused
on the task at hand.

53
00:02:48,990 --> 00:02:51,050
So I'm gonna do HTML5 and
I'm gonna press tab.

54
00:02:52,550 --> 00:02:55,838
And then we'll say welcome or
let's say signed in.

55
00:03:00,197 --> 00:03:04,260
And then in the body here
let's add some dynamic text.

56
00:03:04,260 --> 00:03:06,910
We'll add a paragraph and that's a p tag.

57
00:03:06,910 --> 00:03:08,600
So p, and we'll say welcome.

58
00:03:10,040 --> 00:03:14,320
And we wanna show the user
name to make it dynamic.

59
00:03:14,320 --> 00:03:18,810
Now, in handlebars to show that
though you do double mustaches or

60
00:03:18,810 --> 00:03:20,410
curly braces around a variable.

61
00:03:26,230 --> 00:03:29,040
Two curly braces, and then we'll
say username, two curly braces.

62
00:03:29,040 --> 00:03:30,040
Welcome username.

63
00:03:32,310 --> 00:03:34,570
But wait a second, where is it
getting that data from, you ask.

64
00:03:34,570 --> 00:03:35,900
Where is the username coming from?

65
00:03:35,900 --> 00:03:38,260
Well, nowhere right now, right?

66
00:03:38,260 --> 00:03:40,630
This is the model that we set to null.

67
00:03:40,630 --> 00:03:43,530
So basically what can happen is you
can pass in any object in here.

68
00:03:43,530 --> 00:03:48,420
Whether that be a POJO, a plain old
java object, or a map-like object.

69
00:03:48,420 --> 00:03:50,440
And the template can
access it just like this.

70
00:03:52,450 --> 00:03:55,560
So let's switch back
over to our main here and

71
00:03:55,560 --> 00:04:02,600
in sign-in here let's make a new model.

72
00:04:02,600 --> 00:04:04,890
And we'll just use a simple map for
now, right?

73
00:04:04,890 --> 00:04:09,030
So we'll say Map, and again,
that's a java.util.Map, and

74
00:04:09,030 --> 00:04:15,320
it's a String Map of Strings to Strings in
the Java util map, that's what we want.

75
00:04:15,320 --> 00:04:17,040
Now let's call it model so it's clear.

76
00:04:18,070 --> 00:04:21,850
And we'll choose
the implementation of a HashMap.

77
00:04:21,850 --> 00:04:25,620
And I'm gonna use the diamond parameter so

78
00:04:25,620 --> 00:04:29,990
we don't need to redefine it there, okay.

79
00:04:29,990 --> 00:04:34,140
Now, let's store the user name
that's submitted from the form.

80
00:04:34,140 --> 00:04:39,690
So what you do is model.put right so we're
gonna add a new key called user name.

81
00:04:40,710 --> 00:04:46,010
And then we need to grab from
the request we need to grab

82
00:04:46,010 --> 00:04:49,420
the value of user name that
was submitted from the form.

83
00:04:50,590 --> 00:04:54,800
So let's flip back to the spark
documentation and see about the request.

84
00:04:57,110 --> 00:04:59,020
So here's the documentation.

85
00:04:59,020 --> 00:04:59,580
And here.

86
00:04:59,580 --> 00:05:01,120
Look request.

87
00:05:01,120 --> 00:05:01,640
Okay cool.

88
00:05:01,640 --> 00:05:05,820
So this shows you all the stuff that
you can pull off of the request.

89
00:05:05,820 --> 00:05:07,510
This is pretty great.

90
00:05:07,510 --> 00:05:08,850
Okay so here is something for the body.

91
00:05:08,850 --> 00:05:11,620
This pulls the request body
that was sent by the client.

92
00:05:11,620 --> 00:05:13,070
That's not exactly what we want.

93
00:05:14,120 --> 00:05:17,670
If you remember there was that
weird URL encoded string so

94
00:05:17,670 --> 00:05:19,530
we want to just access part of it.

95
00:05:19,530 --> 00:05:20,640
Okay, so here it is.

96
00:05:20,640 --> 00:05:21,890
queryParams.

97
00:05:21,890 --> 00:05:24,690
The value of foo in the query param.

98
00:05:24,690 --> 00:05:26,520
So that's what we need to do, right?

99
00:05:26,520 --> 00:05:29,420
So we're gonna say queryParams and
then we're gonna pass it username and

100
00:05:29,420 --> 00:05:30,950
that will pull that off of the request.

101
00:05:30,950 --> 00:05:33,370
That's a pretty nice subtraction, right?

102
00:05:33,370 --> 00:05:37,970
So let's go back to our page here.

103
00:05:37,970 --> 00:05:39,460
And we have req, right?

104
00:05:39,460 --> 00:05:42,050
Req was passed in.

105
00:05:42,050 --> 00:05:46,970
That is the request object, and
it has as you'll see, queryParams.

106
00:05:46,970 --> 00:05:48,370
And we're looking for the username.

107
00:05:48,370 --> 00:05:52,280
So we're gonna pull the username off,
and we're gonna put it into our map.

108
00:05:52,280 --> 00:05:53,620
And then in our new model and

109
00:05:53,620 --> 00:05:56,890
view, we're gonna push in
the model that we just created.

110
00:05:59,240 --> 00:06:04,690
Cool, so now, I am going to, restart your
server if it's running, mine was not.

111
00:06:04,690 --> 00:06:07,720
Choose run, actually, mine was.

112
00:06:07,720 --> 00:06:09,610
So you'll see this sometimes.

113
00:06:09,610 --> 00:06:11,300
The address is already in use,
you can see here.

114
00:06:11,300 --> 00:06:13,480
There's two mains running.

115
00:06:13,480 --> 00:06:16,620
And I'm going to close all.

116
00:06:16,620 --> 00:06:19,940
And I'm gonna go ahead and choose
disconnect, it will terminate the server.

117
00:06:19,940 --> 00:06:21,560
And now, let's do that run again.

118
00:06:24,360 --> 00:06:26,450
You'll know that things are running
because there's a little green

119
00:06:26,450 --> 00:06:27,220
dot down here.

120
00:06:27,220 --> 00:06:29,630
So I should have looked
at before I tried that.

121
00:06:29,630 --> 00:06:34,730
Okay, so now,
let's come back over to our page,

122
00:06:34,730 --> 00:06:37,460
and we'll say what is your username?

123
00:06:37,460 --> 00:06:39,850
and it's craigsdennis,
and we'll click sign in,

124
00:06:39,850 --> 00:06:42,110
and it says welcome craigsdennis.

125
00:06:42,110 --> 00:06:47,170
Bam, now we have some faked-out state,
right?

126
00:06:47,170 --> 00:06:49,360
Pretty straightforward too, wasn't it?

127
00:06:49,360 --> 00:06:51,920
Query parameters are pretty powerful.

128
00:06:51,920 --> 00:06:54,550
You should also know that when
the URL has a question mark,

129
00:06:54,550 --> 00:06:57,980
you all have access to those variables
in the request.query params.

130
00:06:59,300 --> 00:07:01,450
So now that we have
access to the username,

131
00:07:01,450 --> 00:07:04,980
because they submitted it on the page
before, does that mean we're gonna

132
00:07:04,980 --> 00:07:08,850
need to ask their name on every
page in order to have it available?

133
00:07:08,850 --> 00:07:12,080
Let's explore a solution to this
problem right after this quick break.