1
00:00:00,470 --> 00:00:04,359
To let users create new Wiki pages
we needed two Sinatra routes.

2
00:00:04,359 --> 00:00:08,850
First, the get route that let their
browser retrieve a blank HTML form.

3
00:00:08,850 --> 00:00:13,400
Second, a post route that accepted
the form data and saved it on the server.

4
00:00:13,400 --> 00:00:15,722
We implemented both of those
in the previous stage.

5
00:00:15,722 --> 00:00:21,090
To let users edit existing wiki pages,
we need two more Sinatra routes.

6
00:00:21,090 --> 00:00:25,520
First, a get route that lets a browser
retrieve an HTML form that's prepopulated

7
00:00:25,520 --> 00:00:30,130
with the existing pages data and second,
a route that accepts the form data and

8
00:00:30,130 --> 00:00:31,049
saves it on the server.

9
00:00:32,070 --> 00:00:35,570
But ideally we would not use
a post request for this.

10
00:00:35,570 --> 00:00:36,960
Post requests are intended for

11
00:00:36,960 --> 00:00:41,470
brand new resources that you haven't
assigned a path to on the server.

12
00:00:41,470 --> 00:00:44,730
But this time we're modifying
an existing resource on the server,

13
00:00:44,730 --> 00:00:49,810
one we have already assigned a path for,
a slash followed by the page title.

14
00:00:49,810 --> 00:00:53,130
When you're modifying an existing
resource with a known URL,

15
00:00:53,130 --> 00:00:56,740
it's recommended to use a put request,
not a post request.

16
00:00:56,740 --> 00:00:59,920
See the teacher's notes if you'd
like the technical details on this.

17
00:01:01,020 --> 00:01:04,750
So, it would be better to use
a put request to submit this form.

18
00:01:04,750 --> 00:01:06,140
But how do we do that?

19
00:01:06,140 --> 00:01:10,370
Let's try a web search for
the HTML form elements method attribute.

20
00:01:10,370 --> 00:01:13,430
HTML, form method.

21
00:01:18,830 --> 00:01:22,950
We'll search for the method attribute
in the documentation method.

22
00:01:24,550 --> 00:01:29,510
It looks like the only answer you values
that browser support are post and get.

23
00:01:29,510 --> 00:01:31,301
So it looks like we have no choice but

24
00:01:31,301 --> 00:01:34,126
to set the method attribute
of our form element to post.

25
00:01:38,258 --> 00:01:42,580
But Sinatra can support put requests
in spite of this limitation.

26
00:01:42,580 --> 00:01:43,830
It's been programmed to look for

27
00:01:43,830 --> 00:01:47,326
an additional parameter in form data,
named _method.

28
00:01:47,326 --> 00:01:50,960
The underscore is to prevent conflicts
in case you have an actual form

29
00:01:50,960 --> 00:01:52,460
field named method.

30
00:01:52,460 --> 00:01:55,675
If it sees an underscore method parameter,
and its value is put,

31
00:01:55,675 --> 00:02:00,530
then Sinatra will treat the post
request as if it was a put request.

32
00:02:00,530 --> 00:02:03,120
But how do we add the parameter
to our form data?

33
00:02:03,120 --> 00:02:07,600
We don't want to add another text field,
that would be ugly and confusing to users.

34
00:02:07,600 --> 00:02:10,790
That's why HTML forms offer
another input type, hidden.

35
00:02:12,570 --> 00:02:16,570
We can just add an input tag,
set its type attribute to hidden,

36
00:02:17,760 --> 00:02:25,800
we can assign the hidden input a name
of _method, and a value of put.

37
00:02:28,870 --> 00:02:31,950
That way an underscore method parameter
will be included with the other

38
00:02:31,950 --> 00:02:34,710
form parameters but
your users will never see it.

39
00:02:34,710 --> 00:02:39,010
Well, not unless they inspect
the HTML source of the form, anyway.

40
00:02:39,010 --> 00:02:40,430
Just as with post requests,

41
00:02:40,430 --> 00:02:43,120
we need to specify what path
put requests should go to.

42
00:02:44,185 --> 00:02:46,770
Ideally, this will be the path
of the resource we're modifying,

43
00:02:46,770 --> 00:02:48,962
which is a slash followed
by the page title.

44
00:02:48,962 --> 00:02:56,878
So we'll add an action attribute
that will specify the path.

45
00:02:56,878 --> 00:03:02,259
It needs to start with a slash and
then we'll use an erb

46
00:03:02,259 --> 00:03:07,053
output tag to embed
the title in the attribute.

47
00:03:12,713 --> 00:03:13,900
Save that when we're done.

48
00:03:15,030 --> 00:03:16,769
And now if we restart our server.

49
00:03:20,476 --> 00:03:22,730
Reload the edit form and click submit.

50
00:03:22,730 --> 00:03:27,540
We'll see the usual Sinatra
doesn't know this ditty error,

51
00:03:27,540 --> 00:03:29,360
because there's no matching route.

52
00:03:29,360 --> 00:03:34,600
But if we open our browser's
developer tools, wwitch

53
00:03:34,600 --> 00:03:38,780
to the Network tab and then hit the back
button and submit the form again.

54
00:03:40,740 --> 00:03:44,330
We'll see that as far as the browser is
concerned, we're sending a post request

55
00:03:44,330 --> 00:03:47,610
but if we click on that request and
scroll to the form data at the bottom,

56
00:03:47,610 --> 00:03:51,670
we'll see an underscore method
parameter with a value of put.

57
00:03:51,670 --> 00:03:54,060
Also, if we close out
of developer tools and

58
00:03:54,060 --> 00:03:57,940
look at the bottom of the page, we'll see
that Sinatra is recommending we create

59
00:03:57,940 --> 00:04:01,770
a route to match this request
using a method named put.

60
00:04:01,770 --> 00:04:04,460
Our form submission is being
treated as a put request.

61
00:04:05,480 --> 00:04:06,715
So let's create that route.

62
00:04:06,715 --> 00:04:08,480
We'll go into our app code.

63
00:04:14,160 --> 00:04:17,980
And, just as the get method from Sinatra
creates a route for get requests and

64
00:04:17,980 --> 00:04:19,690
the post method creates a route for

65
00:04:19,690 --> 00:04:23,330
posts requests, the put method
creates a route for post requests.

66
00:04:24,820 --> 00:04:26,680
It works the same way
as the other methods.

67
00:04:26,680 --> 00:04:30,060
You pass it a string with
the request path to match, and

68
00:04:30,060 --> 00:04:32,580
a block to be invoked when
the matching request has received.

69
00:04:33,920 --> 00:04:37,970
We've set our form submission path up to
consist of a slash followed by the title

70
00:04:37,970 --> 00:04:39,603
of the page we're updating, so

71
00:04:39,603 --> 00:04:43,419
we'll use a slash followed by a title
URL parameter as path for this route.

72
00:04:48,273 --> 00:04:51,071
Within the block,
we'll call save content to save or

73
00:04:51,071 --> 00:04:52,760
update a page content to a file.

74
00:04:54,670 --> 00:04:58,280
The title parameter from the request
path will be our first argument

75
00:04:58,280 --> 00:05:00,560
used to determine the name
of the text file to update.

76
00:05:03,790 --> 00:05:07,400
The content parameter from the form's
text area will be our second argument

77
00:05:07,400 --> 00:05:09,420
that will get saved as the files contents.

78
00:05:13,170 --> 00:05:16,460
And just like in the route to create
a new page, we'll want to send a redirect

79
00:05:16,460 --> 00:05:20,050
response to the browser so that it sends
a get request to view the updated page.

80
00:05:20,050 --> 00:05:21,040
So redirect.

81
00:05:23,360 --> 00:05:26,914
And we'll interpolate in
the value of the title parameter.

82
00:05:31,191 --> 00:05:35,903
We also mustn't forget to call URI
escape on the path to encode any invalid

83
00:05:35,903 --> 00:05:37,720
characters URI.

84
00:05:37,720 --> 00:05:38,220
Escape.

85
00:05:41,058 --> 00:05:43,740
And we'll just pass at the path as it is.

86
00:05:43,740 --> 00:05:47,510
Since we're able to use the save content
method both to create new files and

87
00:05:47,510 --> 00:05:50,400
update existing files,
the block to update the page

88
00:05:50,400 --> 00:05:53,230
looks pretty much identical to
the block for creating a page.

89
00:05:55,260 --> 00:05:58,370
The only difference is that the title
parameter comes from the request

90
00:05:58,370 --> 00:06:00,730
path instead of the form data.

91
00:06:00,730 --> 00:06:01,659
Let's restart our server.

92
00:06:05,981 --> 00:06:07,810
And then we'll try editing a page again.

93
00:06:07,810 --> 00:06:09,663
We'll make a simple edit.

94
00:06:13,254 --> 00:06:16,900
And click the Submit button and
we'll see that our changes are saved and

95
00:06:16,900 --> 00:06:19,980
we're redirected to view the updated page.

96
00:06:19,980 --> 00:06:22,510
If we go into the pages
directory in our workspace and

97
00:06:22,510 --> 00:06:26,940
open the text file, we'll see
the changes reflected there as well.

98
00:06:26,940 --> 00:06:29,440
Our users can update
existing Wiki pages now.

99
00:06:30,510 --> 00:06:32,480
There's one more thing users can't do.

100
00:06:32,480 --> 00:06:34,800
They can't delete pages
they don't want anymore.

101
00:06:34,800 --> 00:06:36,760
In the final stage, we ll fix that.

102
00:06:36,760 --> 00:06:40,060
We'll also show you how to serve up
a CSS stylesheet to make the site

103
00:06:40,060 --> 00:06:41,380
look much better.

104
00:06:41,380 --> 00:06:42,350
See you in the last stage.