1
00:00:03,740 --> 00:00:11,475
We have already seen the use of the HTTP get operations in the previous two exercises,

2
00:00:11,475 --> 00:00:14,310
where we will able to go and fetch the data from

3
00:00:14,310 --> 00:00:17,505
the server and use it within our Angular application.

4
00:00:17,505 --> 00:00:23,159
But there are situations where you want to be able to post new data to the server,

5
00:00:23,159 --> 00:00:26,160
or to modify the existing data on the server,

6
00:00:26,160 --> 00:00:27,950
or even delete the data.

7
00:00:27,950 --> 00:00:30,480
So that is where the post,

8
00:00:30,480 --> 00:00:35,895
put, and delete operations of HTTP enable us to carry out this.

9
00:00:35,895 --> 00:00:41,540
In this exercise, we're going to look at the use of the put operation from

10
00:00:41,540 --> 00:00:48,735
HTTP client which enables us to modify an existing dish on the server side.

11
00:00:48,735 --> 00:00:50,715
Now, why would we need to do that?

12
00:00:50,715 --> 00:00:53,500
You saw that in one of the previous exercises,

13
00:00:53,500 --> 00:00:57,230
we allowed the user to post a comment to a Dish,

14
00:00:57,230 --> 00:01:01,825
and then we were able to insert the comment into the Dish object.

15
00:01:01,825 --> 00:01:08,160
Now, we want to persist this dish information onto the server,

16
00:01:08,160 --> 00:01:10,570
the modified dish to the server.

17
00:01:10,570 --> 00:01:15,955
This is where the use of the HTTP PUT operation comes to our rescue.

18
00:01:15,955 --> 00:01:18,345
So, using the HTTP PUT operation,

19
00:01:18,345 --> 00:01:23,360
we are able to send the modified Dish back to the server and then modify

20
00:01:23,360 --> 00:01:26,750
the existing Dish information on the server so that

21
00:01:26,750 --> 00:01:31,460
the newly added comment can be persisted on the server side.

22
00:01:31,460 --> 00:01:35,899
Thereby, when the information is fetched at a later date,

23
00:01:35,899 --> 00:01:41,770
the newly added comment will be there as part of the Dish information.

24
00:01:41,770 --> 00:01:44,770
So, this is what we'll explore in this exercise,

25
00:01:44,770 --> 00:01:48,225
where we'll look at saving changes to the server.

26
00:01:48,225 --> 00:01:50,280
So, how do we go about doing this?

27
00:01:50,280 --> 00:01:53,625
Let's explore this in the exercise.

28
00:01:53,625 --> 00:01:58,730
To enable us to be able to save the changes to the Dish to the server,

29
00:01:58,730 --> 00:02:02,765
let me introduce a new method into the Dish service here.

30
00:02:02,765 --> 00:02:09,040
Now, we will add a new method called as putDish to the server.

31
00:02:09,040 --> 00:02:11,335
So, how does the putDish method work?

32
00:02:11,335 --> 00:02:17,920
So, let me introduce the putDish method here which obviously receives the modified dish

33
00:02:17,920 --> 00:02:25,370
as its parameter and then it'll return an observable of type Dish.

34
00:02:25,370 --> 00:02:29,980
So, this will return the Dish that has been put into the server side.

35
00:02:29,980 --> 00:02:33,690
Now, once the Dish is modified on the server side,

36
00:02:33,690 --> 00:02:36,735
the modified Dish information will be sent back by the server,

37
00:02:36,735 --> 00:02:39,275
and then this modified Dish will be delivered

38
00:02:39,275 --> 00:02:42,330
back to the client so that the client can integrate that,

39
00:02:42,330 --> 00:02:48,605
and then update the user interface to reflect the change to the Dish.

40
00:02:48,605 --> 00:02:52,010
Now, obviously, we don't want to reflect the change to

41
00:02:52,010 --> 00:02:57,300
the user interface until the Dish information is saved on the server side.

42
00:02:57,300 --> 00:03:00,245
So, that is where we're going to be making use of

43
00:03:00,245 --> 00:03:05,265
the putDish method that we introduce into the Dish service.

44
00:03:05,265 --> 00:03:07,730
So, how do we design the putDish method?

45
00:03:07,730 --> 00:03:15,785
So, the first thing that we need to do is to set up some HTTP options so that we inform

46
00:03:15,785 --> 00:03:21,975
the server on what

47
00:03:21,975 --> 00:03:26,565
is being sent in the message here.

48
00:03:26,565 --> 00:03:29,880
So, we'll set up some headers information here.

49
00:03:29,880 --> 00:03:36,345
So, for the headers, we'll set up new HttpHeaders here,

50
00:03:36,345 --> 00:03:39,060
and in the new HttpHeaders,

51
00:03:39,060 --> 00:03:43,050
let's set up the header as

52
00:03:43,050 --> 00:03:49,940
Content-Type of the type application JSON.

53
00:03:49,940 --> 00:03:56,135
So, we are specifying to our server that the incoming request message

54
00:03:56,135 --> 00:03:58,730
contains the information in the form of

55
00:03:58,730 --> 00:04:02,840
a json object in the body of the incoming request message.

56
00:04:02,840 --> 00:04:04,865
So, the server will be able to extract

57
00:04:04,865 --> 00:04:09,165
the Dish information from the body of the message, parse it,

58
00:04:09,165 --> 00:04:13,200
and then be able to persist the modified Dish to the server,

59
00:04:13,200 --> 00:04:19,260
and then send back the updated Dish information from the server side.

60
00:04:19,260 --> 00:04:22,025
Now, once we have set up the options here,

61
00:04:22,025 --> 00:04:24,295
then we will use

62
00:04:24,295 --> 00:04:29,990
the HTTP client and then

63
00:04:29,990 --> 00:04:36,030
do a put which obviously carries the Dish in the body of the message,

64
00:04:36,030 --> 00:04:47,385
and then we'll specify baseURL+dishes and +dish.id.

65
00:04:47,385 --> 00:04:53,520
So, that is the URL to which we are sending the put operation so,

66
00:04:53,520 --> 00:04:57,775
baseURL+'dishes/ ' + dish.id.

67
00:04:57,775 --> 00:05:01,130
So, from your REST API knowledge,

68
00:05:01,130 --> 00:05:05,960
you'll see why we do a put operation to this end point.

69
00:05:05,960 --> 00:05:09,500
Then the second parameter is the Dish itself which we

70
00:05:09,500 --> 00:05:13,990
receive as the incoming parameter to the putDish method,

71
00:05:13,990 --> 00:05:23,770
and then the third parameter is the httpOptions that we just set up a short while ago.

72
00:05:23,770 --> 00:05:26,790
Then, once we obtain that,

73
00:05:26,790 --> 00:05:29,775
then we'll be able to pipe

74
00:05:29,775 --> 00:05:37,405
the any error to our handleError method hear, that's it.

75
00:05:37,405 --> 00:05:43,550
So, this call to the put on the server side will enable

76
00:05:43,550 --> 00:05:46,880
the Dish information to be persistent on the server side and then the server

77
00:05:46,880 --> 00:05:50,430
will return the updated dish information back to us,

78
00:05:50,430 --> 00:05:55,805
and then we will return that back to our component

79
00:05:55,805 --> 00:06:01,705
where the component can then use that to render the updated Dish information.

80
00:06:01,705 --> 00:06:04,835
So, this is the modification that we do to the Dish service.

81
00:06:04,835 --> 00:06:08,220
Now, go into the dishdetail component,

82
00:06:08,450 --> 00:06:11,130
in the dishdetail component,

83
00:06:11,130 --> 00:06:18,185
let me introduce one more variable here

84
00:06:18,185 --> 00:06:21,590
called dishcopy which will hold

85
00:06:21,590 --> 00:06:26,570
a copy of the modified Dish until it is posted to the server.

86
00:06:26,570 --> 00:06:29,890
So, the dishcopy will contain the modified dish.

87
00:06:29,890 --> 00:06:33,875
So, going into the route parameters here.

88
00:06:33,875 --> 00:06:41,305
So, what we do is anytime the Dish information is modified here in the route parameters,

89
00:06:41,305 --> 00:06:46,355
also along with saving the dish information to this.dish,

90
00:06:46,355 --> 00:06:52,470
I will also save a copy to

91
00:06:52,470 --> 00:06:55,980
the dishcopy also so that both the Dish and

92
00:06:55,980 --> 00:07:01,460
the dishcopy contain the exact copy of the same Dish here.

93
00:07:01,460 --> 00:07:04,370
So, that's the modification that we will do here.

94
00:07:04,370 --> 00:07:06,990
Now, in the onSubmit method,

95
00:07:06,990 --> 00:07:09,665
so here we have the onSubmit method here,

96
00:07:09,665 --> 00:07:13,310
where we are modifying the object here.

97
00:07:13,310 --> 00:07:20,220
So, here, you notice that we were originally pushing the comment to the Dish object here,

98
00:07:20,220 --> 00:07:24,945
instead, we will now push the comment to the dishcopy object.

99
00:07:24,945 --> 00:07:29,405
The reason why I'm doing this is that I want to first modify the dishcopy object,

100
00:07:29,405 --> 00:07:32,285
then I want to post that to the server,

101
00:07:32,285 --> 00:07:35,060
and then when the server replies back with

102
00:07:35,060 --> 00:07:37,850
the modified dish information to the server side,

103
00:07:37,850 --> 00:07:41,715
then I will persist that information into the Dish here.

104
00:07:41,715 --> 00:07:44,750
So, after doing the dishcopy here,

105
00:07:44,750 --> 00:07:54,735
then we'll say this.dishService.putDish,

106
00:07:54,735 --> 00:07:57,900
and then we will supply to the putDish

107
00:07:57,900 --> 00:08:04,250
the dishcopy as the parameter

108
00:08:04,250 --> 00:08:09,110
because the dishcopy contains the modified version of the dish here.

109
00:08:09,110 --> 00:08:10,955
So, we'll say dishcopy,

110
00:08:10,955 --> 00:08:16,600
and then when we receive the reply from the server side so,

111
00:08:16,600 --> 00:08:22,255
in the subscribe, we'll say Dish and right there,

112
00:08:22,255 --> 00:08:26,655
we will handle the incoming Dish here.

113
00:08:26,655 --> 00:08:31,855
So, in here, we'll say subscribe Dish and then we'll say,

114
00:08:31,855 --> 00:08:36,435
this.dish equal to dish here,

115
00:08:36,435 --> 00:08:45,910
and for the sake of completeness,

116
00:08:45,910 --> 00:08:49,380
I will also persist the same information into the dishcopy here.

117
00:08:49,380 --> 00:08:52,320
Now, if there is an error,

118
00:08:52,320 --> 00:08:54,120
then will have to handleError.

119
00:08:54,120 --> 00:08:57,625
So, to handleError, we'll say,

120
00:08:57,625 --> 00:09:03,080
errmess, and then at that point,

121
00:09:03,080 --> 00:09:07,040
we'll set that this.dish to null,

122
00:09:07,040 --> 00:09:14,330
and then the this dishcopy also to null because right now the dish is not valid,

123
00:09:14,330 --> 00:09:19,595
and then we'll say this.errMess is

124
00:09:19,595 --> 00:09:27,755
any errmess, that's it.

125
00:09:27,755 --> 00:09:31,445
That's the modification that we're going to make to the onSubmit method.

126
00:09:31,445 --> 00:09:34,695
So, by using this.dishService.putDish method,

127
00:09:34,695 --> 00:09:38,500
we are sending in the updated dishcopy here,

128
00:09:38,500 --> 00:09:39,685
not the Dish here,

129
00:09:39,685 --> 00:09:43,965
and then when the server replies back to us with the modified Dish,

130
00:09:43,965 --> 00:09:47,605
at that point, we will persist the information into the this.dish.

131
00:09:47,605 --> 00:09:49,025
So that at that point,

132
00:09:49,025 --> 00:09:54,590
our UI will be updated with the updated version to Dish,

133
00:09:54,590 --> 00:09:57,560
I'm also persisting the same information to the dishcopy,

134
00:09:57,560 --> 00:09:59,180
and then if I encounter an error,

135
00:09:59,180 --> 00:10:02,585
then I will set the this.dish to null and the this.dishcopy to null

136
00:10:02,585 --> 00:10:06,680
and then set up the error message appropriately here.

137
00:10:06,680 --> 00:10:09,980
So that's it. Let's save the changes and then go and

138
00:10:09,980 --> 00:10:14,100
take a look at our application in the browser.

139
00:10:14,230 --> 00:10:19,050
Saving the changes, let's go back to the browser.

140
00:10:19,050 --> 00:10:27,785
Go into the browser, let's now go to the menu and then go to a specific Dish here.

141
00:10:27,785 --> 00:10:30,245
For the specific Dish,

142
00:10:30,245 --> 00:10:32,685
let's post a comment here.

143
00:10:32,685 --> 00:10:41,870
So, let me post a comment here with a rating here.

144
00:10:44,430 --> 00:10:48,815
So, as you see, as the comment becomes valid,

145
00:10:48,815 --> 00:10:52,370
the preview of the comment shows up there.

146
00:10:52,370 --> 00:10:54,950
Let's now submit this comment.

147
00:10:54,950 --> 00:10:56,520
When you submit the comment,

148
00:10:56,520 --> 00:11:02,160
you'll immediately see that the comment just got posted into my list of Dishes.

149
00:11:02,160 --> 00:11:05,645
Now, earlier, if you refresh the view,

150
00:11:05,645 --> 00:11:07,880
then this comment would disappear.

151
00:11:07,880 --> 00:11:13,250
Let me now refresh the view and then you will notice that the comment will still

152
00:11:13,250 --> 00:11:18,630
be part of the list of Dishes here.

153
00:11:18,630 --> 00:11:20,190
So, as you can see here,

154
00:11:20,190 --> 00:11:22,310
the comment still exists here.

155
00:11:22,310 --> 00:11:27,530
To further show you that indeed the comment has been persisted on the server side,

156
00:11:27,530 --> 00:11:31,440
let's go and look at the log of the server in the terminal.

157
00:11:31,440 --> 00:11:33,810
Going back to the terminals,

158
00:11:33,810 --> 00:11:36,710
we'll now see that in the log of the terminal,

159
00:11:36,710 --> 00:11:41,910
you see a new PUT /dishes/0 method.

160
00:11:41,910 --> 00:11:45,950
So, that shows that the modified Dish

161
00:11:45,950 --> 00:11:50,050
has been persisted back to the server right there and the after that,

162
00:11:50,050 --> 00:11:53,170
of course we got the dishes by refreshing

163
00:11:53,170 --> 00:11:55,975
the UI and so that's why we're

164
00:11:55,975 --> 00:11:59,485
fetching the dishes information again from the server side.

165
00:11:59,485 --> 00:12:03,640
So, this shows that we are able to use

166
00:12:03,640 --> 00:12:08,580
the HTTP PUT operation to persist the modified Dish to the server,

167
00:12:08,580 --> 00:12:10,810
and then when we receive the updated dish,

168
00:12:10,810 --> 00:12:14,025
we are able to update the user interface correspondingly.

169
00:12:14,025 --> 00:12:17,240
With this, we complete this exercise.

170
00:12:17,240 --> 00:12:21,380
This is a good time for you to do a GET commit with the message,

171
00:12:21,380 --> 00:12:24,300
saving changes to this server.