1

00:00:01,200 --> 00:00:01,589

2
00:00:01,589 --> 00:00:06,360
So our application is lacking some important features at this point.

3
00:00:06,390 --> 00:00:11,790
For example, we don't have a link to actually go to the editing form.

4
00:00:11,790 --> 00:00:13,830
Let's quickly fix that.

5
00:00:14,320 --> 00:00:26,560
So I am inside the show blade and maybe right below the dates I will add a div
element with a normal

6
00:00:26,560 --> 00:00:28,360
link to the edit form.

7
00:00:28,600 --> 00:00:37,060
So let's call that edit and I'll use the route and that's tasks.

8
00:00:38,200 --> 00:00:42,390
Edit I need to pass the task ID so the parameter is task.

9
00:00:42,400 --> 00:00:45,880
That's task ID.

10
00:00:50,810 --> 00:01:00,830
All right, so that's the link we can now edit Also, um, if you would pass just the
task, which is

11
00:01:00,830 --> 00:01:08,180
an entity and it has the ID, I think Laravel is smart enough that it will know that
it needs to use

12
00:01:08,180 --> 00:01:08,630
the ID.

13
00:01:09,440 --> 00:01:10,670
Yes, that's correct.

14
00:01:10,670 --> 00:01:16,000
So it knows that you are passing an entity which has some kind of primary key.
15
00:01:16,010 --> 00:01:23,690
So it needs to take this primary key value, which means here you also don't need to
pass the task ID

16
00:01:23,690 --> 00:01:24,760
property.

17
00:01:24,770 --> 00:01:28,730
It's enough to just pass the whole model.

18
00:01:29,000 --> 00:01:29,690
All right.

19
00:01:29,840 --> 00:01:37,730
But when we go to this editing page, you might have noticed that we don't have the
checkbox for setting

20
00:01:37,730 --> 00:01:39,140
the task as done.

21
00:01:40,480 --> 00:01:49,270
Now that's intentional, as we would like to instead have a toggle button that you
can click and mark

22
00:01:49,270 --> 00:01:52,450
the task as done or as not complete.

23
00:01:52,450 --> 00:01:56,710
And this is what we will do in this video.

24
00:01:56,740 --> 00:02:04,810
But before we begin, let's add one more thing, and that would be a link to add a
new task on the main

25
00:02:04,810 --> 00:02:06,280
index view.

26
00:02:09,320 --> 00:02:18,200
So before we display any content at all, let's add a link to route tasks.

27
00:02:19,480 --> 00:02:20,500
Create.

28
00:02:20,650 --> 00:02:22,990
This does not need any parameter.
29
00:02:22,990 --> 00:02:27,580
Let's say add task which looks like this.

30
00:02:27,610 --> 00:02:31,360
We will be working on making this look a little better.

31
00:02:31,390 --> 00:02:31,690
Um.

32
00:02:32,860 --> 00:02:33,310
All right.

33
00:02:33,310 --> 00:02:34,690
I've made a mistake.

34
00:02:34,960 --> 00:02:35,410
Um.

35
00:02:35,500 --> 00:02:39,580
Yes, I did forget about the double curly braces.

36
00:02:40,210 --> 00:02:41,950
So it needs to be like this.

37
00:02:41,980 --> 00:02:48,310
You might have noticed that while I was typing, So let me refresh.

38
00:02:48,310 --> 00:02:50,470
And now it works.

39
00:02:51,790 --> 00:02:57,760
All right, so let's get to see how to do this toggle complete feature.

40
00:02:57,790 --> 00:03:02,920
The first thing we need to do is we will have to add another route.

41
00:03:06,170 --> 00:03:08,440
So let's call that route.

42
00:03:08,480 --> 00:03:13,160
Put tasks slash ID.

43
00:03:14,670 --> 00:03:18,090
And toggle complete.

44
00:03:20,720 --> 00:03:25,370
Then we define a function and we use route model binding.

45
00:03:25,370 --> 00:03:29,840
So we will have the task immediately fetched.

46
00:03:30,620 --> 00:03:31,040
All right.

47
00:03:31,040 --> 00:03:40,790
So at this point we might, since we have the task fetched, we can do task completed
as a negative

48
00:03:40,790 --> 00:03:42,140
of task completed.

49
00:03:42,140 --> 00:03:52,310
So we are toggling it and then do task save and then just return a redirect to a
route.

50
00:03:52,700 --> 00:03:59,300
Or just you can use the back function to just go back to the last page, which makes
sense because we'll

51
00:03:59,300 --> 00:04:13,880
be clicking from the task view page with some flash message saying um, task updated
successfully.

52
00:04:16,130 --> 00:04:25,800
So this would definitely work, but what you can also do is those models that are
not expected to be

53
00:04:25,800 --> 00:04:30,750
empty, you can add methods to them and this is considered a good practice.

54
00:04:30,750 --> 00:04:36,450
So you can add methods to your models later on.

55
00:04:36,450 --> 00:04:42,270
You will also learn about things called scopes, but that's much more advanced.

56
00:04:42,270 --> 00:04:51,090
For now, let's just add a method called toggle complete, which would do essentially
what we have here.
57
00:04:52,710 --> 00:05:00,780
So it will set this because we are working on the actual model to complete it and
then it will also

58
00:05:00,780 --> 00:05:01,620
save it.

59
00:05:03,580 --> 00:05:04,150
All right.

60
00:05:04,150 --> 00:05:06,160
So now it's much simpler.

61
00:05:06,160 --> 00:05:10,480
I just do task toggle complete and that's everything.

62
00:05:11,050 --> 00:05:13,150
And then we just do a redirect.

63
00:05:14,380 --> 00:05:15,040
All right.

64
00:05:15,040 --> 00:05:21,870
And now from within the show Blade, we need to trigger it.

65
00:05:21,880 --> 00:05:25,120
So let me just add another div element.

66
00:05:25,660 --> 00:05:31,360
We'll be using a form because the endpoint is using the put verb.

67
00:05:31,360 --> 00:05:33,610
So we need a form for that.

68
00:05:34,330 --> 00:05:38,830
And maybe I can just give this route a name first.

69
00:05:40,330 --> 00:05:42,850
So this will be tasks.

70
00:05:42,970 --> 00:05:44,020
Um.

71
00:05:45,060 --> 00:05:46,580
How should I call that?

72
00:05:46,590 --> 00:05:50,010
Maybe tasks toggle complete.

73
00:05:51,720 --> 00:05:52,260
All right.

74
00:05:52,290 --> 00:05:54,780
Now I do an action.

75
00:05:54,780 --> 00:06:02,250
I use double curly braces, route tasks toggle complete.

76
00:06:02,250 --> 00:06:09,870
And, um, I'm not sure if that should be the the parameter.

77
00:06:09,870 --> 00:06:10,620
Yes.

78
00:06:10,620 --> 00:06:14,010
So the parameter should be called task instead.

79
00:06:14,700 --> 00:06:15,450
Um, yes.

80
00:06:15,450 --> 00:06:17,670
So we are passing the task.

81
00:06:20,150 --> 00:06:20,990
Oh, right.

82
00:06:21,620 --> 00:06:32,150
We as with every form we add this directive, we need to add method spoofing as it
is a put request

83
00:06:32,360 --> 00:06:35,930
and then we add a button.

84
00:06:37,820 --> 00:06:40,340
Which is of type submit.

85
00:06:41,490 --> 00:06:44,730
And we need to add a label here.
86
00:06:44,820 --> 00:06:47,340
So let's do mark us.

87
00:06:47,610 --> 00:06:56,940
And depending on the state of the current well, current state of the task, we do
not completed or

88
00:06:56,940 --> 00:06:58,110
completed.

89
00:07:01,540 --> 00:07:04,050
All right, that's everything.

90
00:07:04,060 --> 00:07:05,650
Let's see if that works.

91
00:07:07,730 --> 00:07:09,350
So here is the button.

92
00:07:09,720 --> 00:07:10,640
Um.

93
00:07:19,670 --> 00:07:20,930
Think I forgot the method.

94
00:07:20,930 --> 00:07:22,760
Yes, that was by default.

95
00:07:22,760 --> 00:07:23,870
The method is get.

96
00:07:23,900 --> 00:07:27,860
It needs to be post for the method spoofing to work.

97
00:07:27,860 --> 00:07:30,650
So I need to refresh this page.

98
00:07:32,000 --> 00:07:32,390
All right.

99
00:07:32,390 --> 00:07:42,290
So by looking at the button and the updated date, we can tell that the task was
indeed changed to being
100
00:07:42,290 --> 00:07:44,060
completed or not.

101
00:07:44,420 --> 00:07:51,440
The thing that we are missing, though, is, well, it's not clearly specified whether
the task is

102
00:07:51,440 --> 00:07:53,240
completed or not.

103
00:07:53,930 --> 00:08:03,950
So we can do if task completed, we can say completed.

104
00:08:11,330 --> 00:08:18,560
Otherwise using ls not completed and close that using.

105
00:08:18,590 --> 00:08:19,580
And if.

106
00:08:21,450 --> 00:08:21,720
All right.

107
00:08:21,720 --> 00:08:23,760
So now it's clear the task is completed.

108
00:08:23,760 --> 00:08:25,440
Now we can toggle it.

109
00:08:26,940 --> 00:08:36,390
And every time we call this endpoint, we get redirected back because we have called
the redirect back

110
00:08:36,390 --> 00:08:36,809
method.

111
00:08:36,809 --> 00:08:38,309
So that's something new.

112
00:08:42,230 --> 00:08:52,190
Now, one thing about why we are using all those put verbs when it will be much
simpler to just use

113
00:08:52,190 --> 00:09:00,770
a get verb and then use a normal link, well, this is not considered safe, so it is
a good practice
114
00:09:00,770 --> 00:09:07,160
that whenever you are changing something on the server so you are modifying the
data, you are adding

115
00:09:07,160 --> 00:09:11,630
the data, you should use post or put verbs.

116
00:09:11,630 --> 00:09:13,220
Never get verbs.

117
00:09:13,220 --> 00:09:18,590
They should always be used only for data retrieval, basically.

118
00:09:19,310 --> 00:09:26,390
So what we are doing here is basically for safety because it is very easy to then
add a link which you

119
00:09:26,390 --> 00:09:33,140
can just click and this can have some unexpected consequences.

120
00:09:33,650 --> 00:09:37,790
So what we are doing here is basically the best practice.

121
00:09:37,970 --> 00:09:39,860
All right, so that's everything.

122
00:09:40,280 --> 00:09:44,610
Also, remember that you can add methods to your models.

123
00:09:44,610 --> 00:09:45,660
It's fine.

124
00:09:45,660 --> 00:09:47,610
It is a good practice.