A Form to Edit an Existing Page

[MUSIC] 0:00 Our users can create new wiki pages, but they can't go back and 0:04 edit the page after that. 0:07 Our next step should be to provide the multiple form that allows editing. 0:09 In the previous stage, we set up a Sinatra route that lets users send a GET request 0:13 to retrieve an HTML form for a new wiki page. 0:17 Then we added another route that accepts a POST request with the data from 0:20 the completed form and saves it as a new page. 0:23 In this stage, we'll need to set up another pair of new Sinatra routes. 0:27 The first route will accept GET requests and return an HTML form for 0:31 a wiki page, just like before. 0:34 The difference is that this HTML form will be pre-populated 0:36 with an existing page's content. 0:40 The second route will accept the completed form data, also just like before. 0:42 But there will be a difference here, too. 0:46 Since we're updating existing data on the server rather than adding new data, 0:48 we need to send a put request, not a post request. 0:53 We'll talk more about put requests in a bit. 0:56 Let's start by adding an Edit link to the show.erb template. 0:59 That will let users view any page and click a link to edit that page. 1:02 We're going to want some CSS styling later to visually separate the Edit link from 1:06 the page content. 1:10 So we'll wrap the link in a DIV element to make it easier to style. 1:11 Within the DIV, we'll add an anchor tag to create the link. 1:14 We'll set the link text to edit this page. 1:19 We need to set the anchor's href attribute to specify what path 1:26 the browser should request. 1:29 The path needs to start with a slash. 1:33 Since this will send a GET request for an HTML form to edit this page, our app needs 1:35 to be able to determine which page we're editing based solely on the request path. 1:39 So we use an ERB output tag to embed the current page title in the link path. 1:44 We set the title instance variable to the current page title in our Sinatra route 1:49 for use in the page heading. 1:53 We can just reuse that same variable here in the link path. 1:54 And will end the path with another segment saying slash edit so 1:58 it's clear were editing the page and not viewing it. 2:02 Let's start our server app and try this out. 2:05 We'll launch preview on port 4567. 2:09 So now, if we go view and edit page Type in the path for 2:13 an existing page, we'll see an Edit link at the bottom. 2:18 If we click it though, we'll see Sinatra doesn't know this ditty. 2:23 We'll need to set up a route to accept requests for the edit path. 2:26 You remember our get new route within the app. 2:30 It renders an ERB template with an HTML form to create a new wiki page. 2:32 You also remember our Get title row, 2:38 which uses a URL parameter to get a page's title, loads that pages content, and 2:40 renders an ERB template to show that content. 2:45 This route we're going to create will be like a cross between these two 2:48 existing routes. 2:51 It'll get a page title from a URL parameter, load content for 2:51 that page, and then render an HTML form containing that content. 2:56 We're not submitting the HTML form right now, we're getting it. 3:02 So we'll be expecting an HTTP GET request. 3:05 We'll define our new route using the GET method. 3:08 The path will start with a slash, followed by the page title, 3:11 which will use a URL parameter the capture title. 3:14 Then another slash, and the word edit. 3:18 The slash edit segment at the end of the path will keep edit 3:21 requests from getting confused with the GET title route. 3:23 So it's okay to define this route after the GET title route. 3:26 Now, we'll need a block for the edit route. 3:30 And in that block, we're going to set up instance variables to hold the page title 3:34 and name, just like we did in the route to show a page. 3:37 So to get the page title, we're gonna take the title parameter from the URL. 3:41 So, params, title, 3:45 which will contain whatever segment of the URL was at this position. 3:47 We'll assign that to an instance variable called Title. 3:54 Then we need to use that title to load content for the page. 3:57 We'll call the page content method. 4:00 And we'll just reuse the title instance variable as a parameter to page content. 4:04 We'll assign the content we get back to an instance variable named content. 4:11 Lastly, we're going to use those values in those instance variables to render an ERB 4:17 template named edit. 4:22 Let's be sure to save that. 4:25 That call to ERB edit will look for a file within the views directory named Edit.ERB. 4:28 So let's create that file now. 4:33 In that file, we'll need to set up an HTML form to edit an existing wiki page. 4:39 That form will actually look very similar to our form to create a new page. 4:44 So let's go into the new .ERB template, 4:48 copy everything, and paste it into edit.erb. 4:52 Then we'll go through and modify it for editing a page instead of creating one. 4:56 The heading at the top of the page currently says we're adding a new page, 5:01 but we're actually editing one. 5:04 So let's update that to say edit page 5:05 Followed by the title of the page we're editing 5:10 which will use an ERB embed tag to insert. 5:15 We'll access the value of the title instance variable which was set 5:20 back in our route. 5:23 We're going to need to make some changes to how the form is submitted later, so 5:25 let's just remove the method and action attributes from the form tag. 5:28 We're not going to want users to change the page title as that affects what 5:34 file it will be saved into. 5:37 So, let's remove the entire field set for the title field. 5:38 We will still want the content field and the submit button. 5:43 So we're going to leave those alone. 5:46 Be sure to save that when we're done. 5:48 Let's see how our edit form looks so far. 5:50 We'll restart our app. 5:52 Visit an existing page, reload it, and click the edit link. 5:57 Our edit route is invoked, and it loads our form template. 6:02 You can see the page title appear at the top. 6:05 The content text area is blank, though. 6:09 We're going to want it pre-populated with the existing page content so 6:11 the user can make changes to it. 6:15 The browser will treat any text you place between the opening text area tag and 6:18 the closing text area tag as the initial field value, 6:21 the value the field has before you make any edits. 6:24 For the new wiki page form, the element was empty and so the field was empty. 6:28 But this time, we're going to need some text in there. 6:32 Let's try adding a placeholder now. 6:34 Initial, text. 6:36 If we reload the template, we'll see initial text in the form field. 6:41 We can use this to set our existing page content as the initial text area value. 6:46 Back in our Sinatra route, 6:51 we store the existing page content in the content instance variable. 6:52 So we can just place an ERB output tag inside of the text area element. 6:56 And use it to embed the value of the content instance variable into the HTML 7:06 output. 7:11 Save that, reload our view. 7:13 And we'll see our existing page contents preloaded in the text area, ready for 7:17 us to edit them. 7:21 As before though, if we submit the form, the data isn't saved. 7:23 We're going to need a separate Sinatra route to receive and 7:26 process the form data. 7:29 We'll set that up next. 7:30