1 00:00:00,345 --> 00:00:04,842 [MUSIC] 2 00:00:04,842 --> 00:00:07,865 Our users can create new wiki pages, but they can't go back and 3 00:00:07,865 --> 00:00:09,460 edit the page after that. 4 00:00:09,460 --> 00:00:12,340 Our next step should be to provide the multiple form that allows editing. 5 00:00:13,440 --> 00:00:17,290 In the previous stage, we set up a Sinatra route that lets users send a GET request 6 00:00:17,290 --> 00:00:20,480 to retrieve an HTML form for a new wiki page. 7 00:00:20,480 --> 00:00:23,670 Then we added another route that accepts a POST request with the data from 8 00:00:23,670 --> 00:00:26,170 the completed form and saves it as a new page. 9 00:00:27,430 --> 00:00:31,040 In this stage, we'll need to set up another pair of new Sinatra routes. 10 00:00:31,040 --> 00:00:34,630 The first route will accept GET requests and return an HTML form for 11 00:00:34,630 --> 00:00:36,760 a wiki page, just like before. 12 00:00:36,760 --> 00:00:40,020 The difference is that this HTML form will be pre-populated 13 00:00:40,020 --> 00:00:42,520 with an existing page's content. 14 00:00:42,520 --> 00:00:46,040 The second route will accept the completed form data, also just like before. 15 00:00:46,040 --> 00:00:47,770 But there will be a difference here, too. 16 00:00:48,890 --> 00:00:53,020 Since we're updating existing data on the server rather than adding new data, 17 00:00:53,020 --> 00:00:56,090 we need to send a put request, not a post request. 18 00:00:56,090 --> 00:00:57,970 We'll talk more about put requests in a bit. 19 00:00:59,130 --> 00:01:02,530 Let's start by adding an Edit link to the show.erb template. 20 00:01:02,530 --> 00:01:06,400 That will let users view any page and click a link to edit that page. 21 00:01:06,400 --> 00:01:10,020 We're going to want some CSS styling later to visually separate the Edit link from 22 00:01:10,020 --> 00:01:11,190 the page content. 23 00:01:11,190 --> 00:01:14,920 So we'll wrap the link in a DIV element to make it easier to style. 24 00:01:14,920 --> 00:01:18,088 Within the DIV, we'll add an anchor tag to create the link. 25 00:01:19,967 --> 00:01:22,767 We'll set the link text to edit this page. 26 00:01:26,019 --> 00:01:29,756 We need to set the anchor's href attribute to specify what path 27 00:01:29,756 --> 00:01:31,529 the browser should request. 28 00:01:33,106 --> 00:01:35,680 The path needs to start with a slash. 29 00:01:35,680 --> 00:01:39,880 Since this will send a GET request for an HTML form to edit this page, our app needs 30 00:01:39,880 --> 00:01:44,630 to be able to determine which page we're editing based solely on the request path. 31 00:01:44,630 --> 00:01:48,460 So we use an ERB output tag to embed the current page title in the link path. 32 00:01:49,510 --> 00:01:53,590 We set the title instance variable to the current page title in our Sinatra route 33 00:01:53,590 --> 00:01:54,870 for use in the page heading. 34 00:01:54,870 --> 00:01:57,620 We can just reuse that same variable here in the link path. 35 00:01:58,670 --> 00:02:02,740 And will end the path with another segment saying slash edit so 36 00:02:02,740 --> 00:02:05,620 it's clear were editing the page and not viewing it. 37 00:02:05,620 --> 00:02:07,833 Let's start our server app and try this out. 38 00:02:09,391 --> 00:02:13,530 We'll launch preview on port 4567. 39 00:02:13,530 --> 00:02:18,448 So now, if we go view and edit page Type in the path for 40 00:02:18,448 --> 00:02:21,420 an existing page, we'll see an Edit link at the bottom. 41 00:02:23,260 --> 00:02:26,500 If we click it though, we'll see Sinatra doesn't know this ditty. 42 00:02:26,500 --> 00:02:30,430 We'll need to set up a route to accept requests for the edit path. 43 00:02:30,430 --> 00:02:32,881 You remember our get new route within the app. 44 00:02:32,881 --> 00:02:38,400 It renders an ERB template with an HTML form to create a new wiki page. 45 00:02:38,400 --> 00:02:40,400 You also remember our Get title row, 46 00:02:40,400 --> 00:02:45,110 which uses a URL parameter to get a page's title, loads that pages content, and 47 00:02:45,110 --> 00:02:48,050 renders an ERB template to show that content. 48 00:02:48,050 --> 00:02:51,010 This route we're going to create will be like a cross between these two 49 00:02:51,010 --> 00:02:51,975 existing routes. 50 00:02:51,975 --> 00:02:56,239 It'll get a page title from a URL parameter, load content for 51 00:02:56,239 --> 00:03:00,831 that page, and then render an HTML form containing that content. 52 00:03:02,862 --> 00:03:05,970 We're not submitting the HTML form right now, we're getting it. 53 00:03:05,970 --> 00:03:08,745 So we'll be expecting an HTTP GET request. 54 00:03:08,745 --> 00:03:11,680 We'll define our new route using the GET method. 55 00:03:11,680 --> 00:03:14,730 The path will start with a slash, followed by the page title, 56 00:03:14,730 --> 00:03:18,650 which will use a URL parameter the capture title. 57 00:03:18,650 --> 00:03:21,150 Then another slash, and the word edit. 58 00:03:21,150 --> 00:03:23,860 The slash edit segment at the end of the path will keep edit 59 00:03:23,860 --> 00:03:26,950 requests from getting confused with the GET title route. 60 00:03:26,950 --> 00:03:30,221 So it's okay to define this route after the GET title route. 61 00:03:30,221 --> 00:03:32,325 Now, we'll need a block for the edit route. 62 00:03:34,173 --> 00:03:37,741 And in that block, we're going to set up instance variables to hold the page title 63 00:03:37,741 --> 00:03:40,080 and name, just like we did in the route to show a page. 64 00:03:41,270 --> 00:03:45,270 So to get the page title, we're gonna take the title parameter from the URL. 65 00:03:45,270 --> 00:03:47,084 So, params, title, 66 00:03:47,084 --> 00:03:52,627 which will contain whatever segment of the URL was at this position. 67 00:03:54,008 --> 00:03:57,720 We'll assign that to an instance variable called Title. 68 00:03:57,720 --> 00:04:00,660 Then we need to use that title to load content for the page. 69 00:04:00,660 --> 00:04:02,160 We'll call the page content method. 70 00:04:04,650 --> 00:04:11,010 And we'll just reuse the title instance variable as a parameter to page content. 71 00:04:11,010 --> 00:04:15,345 We'll assign the content we get back to an instance variable named content. 72 00:04:17,882 --> 00:04:22,681 Lastly, we're going to use those values in those instance variables to render an ERB 73 00:04:22,681 --> 00:04:23,960 template named edit. 74 00:04:25,890 --> 00:04:26,890 Let's be sure to save that. 75 00:04:28,150 --> 00:04:33,520 That call to ERB edit will look for a file within the views directory named Edit.ERB. 76 00:04:33,520 --> 00:04:35,677 So let's create that file now. 77 00:04:39,823 --> 00:04:44,050 In that file, we'll need to set up an HTML form to edit an existing wiki page. 78 00:04:44,050 --> 00:04:48,320 That form will actually look very similar to our form to create a new page. 79 00:04:48,320 --> 00:04:52,067 So let's go into the new .ERB template, 80 00:04:52,067 --> 00:04:56,490 copy everything, and paste it into edit.erb. 81 00:04:56,490 --> 00:05:01,050 Then we'll go through and modify it for editing a page instead of creating one. 82 00:05:01,050 --> 00:05:04,210 The heading at the top of the page currently says we're adding a new page, 83 00:05:04,210 --> 00:05:05,650 but we're actually editing one. 84 00:05:05,650 --> 00:05:08,413 So let's update that to say edit page 85 00:05:10,488 --> 00:05:15,781 Followed by the title of the page we're editing 86 00:05:15,781 --> 00:05:20,430 which will use an ERB embed tag to insert. 87 00:05:20,430 --> 00:05:23,890 We'll access the value of the title instance variable which was set 88 00:05:23,890 --> 00:05:25,720 back in our route. 89 00:05:25,720 --> 00:05:28,810 We're going to need to make some changes to how the form is submitted later, so 90 00:05:28,810 --> 00:05:32,980 let's just remove the method and action attributes from the form tag. 91 00:05:34,270 --> 00:05:37,520 We're not going to want users to change the page title as that affects what 92 00:05:37,520 --> 00:05:38,900 file it will be saved into. 93 00:05:38,900 --> 00:05:41,510 So, let's remove the entire field set for the title field. 94 00:05:43,380 --> 00:05:46,300 We will still want the content field and the submit button. 95 00:05:46,300 --> 00:05:48,070 So we're going to leave those alone. 96 00:05:48,070 --> 00:05:50,260 Be sure to save that when we're done. 97 00:05:50,260 --> 00:05:52,125 Let's see how our edit form looks so far. 98 00:05:52,125 --> 00:05:53,971 We'll restart our app. 99 00:05:57,057 --> 00:06:02,700 Visit an existing page, reload it, and click the edit link. 100 00:06:02,700 --> 00:06:05,540 Our edit route is invoked, and it loads our form template. 101 00:06:05,540 --> 00:06:07,430 You can see the page title appear at the top. 102 00:06:09,190 --> 00:06:11,910 The content text area is blank, though. 103 00:06:11,910 --> 00:06:15,250 We're going to want it pre-populated with the existing page content so 104 00:06:15,250 --> 00:06:16,840 the user can make changes to it. 105 00:06:18,220 --> 00:06:21,790 The browser will treat any text you place between the opening text area tag and 106 00:06:21,790 --> 00:06:24,690 the closing text area tag as the initial field value, 107 00:06:24,690 --> 00:06:27,190 the value the field has before you make any edits. 108 00:06:28,400 --> 00:06:32,400 For the new wiki page form, the element was empty and so the field was empty. 109 00:06:32,400 --> 00:06:34,830 But this time, we're going to need some text in there. 110 00:06:34,830 --> 00:06:36,760 Let's try adding a placeholder now. 111 00:06:36,760 --> 00:06:39,269 Initial, text. 112 00:06:41,536 --> 00:06:46,190 If we reload the template, we'll see initial text in the form field. 113 00:06:46,190 --> 00:06:51,230 We can use this to set our existing page content as the initial text area value. 114 00:06:51,230 --> 00:06:52,350 Back in our Sinatra route, 115 00:06:52,350 --> 00:06:56,290 we store the existing page content in the content instance variable. 116 00:06:56,290 --> 00:07:00,844 So we can just place an ERB output tag inside of the text area element. 117 00:07:06,282 --> 00:07:11,227 And use it to embed the value of the content instance variable into the HTML 118 00:07:11,227 --> 00:07:11,875 output. 119 00:07:13,777 --> 00:07:15,920 Save that, reload our view. 120 00:07:17,240 --> 00:07:21,380 And we'll see our existing page contents preloaded in the text area, ready for 121 00:07:21,380 --> 00:07:22,060 us to edit them. 122 00:07:23,060 --> 00:07:26,630 As before though, if we submit the form, the data isn't saved. 123 00:07:26,630 --> 00:07:29,050 We're going to need a separate Sinatra route to receive and 124 00:07:29,050 --> 00:07:30,460 process the form data. 125 00:07:30,460 --> 00:07:31,620 We'll set that up next.