Route Priority

We're working to present users with a form to enter our Wiki pages title and 0:00 content, and then save that data to the server. 0:03 We're going to need to handle this feature in two parts. 0:07 First we're gonna need to let users retrieve an HTML form from the server 0:09 which they can fill out in their browser. 0:13 Then we're going to need to let users submit the completed 0:16 form data back to the server and save that data for them. 0:18 First let's create a link on our welcome page that our users can click to get to 0:23 the new page form. 0:27 So will edit the welcome.wrb template. 0:28 We'll add an HTML paragraph element at the bottom after the prompt to view a page, 0:30 or you can create a new page. 0:35 Then we'll convert that last bit of text to a link. 0:44 When the link is clicked, 0:53 the browser will send an HTTP GET request to retrieve the form for a new page. 0:54 We use an HTML anchor tag to set up the link. 0:59 The anchors href decides what the request path will be. 1:02 So we'll set it to a path of /new. 1:06 Now we need a Sinatra route that will match those requests. 1:11 We'll go into our app code, And 1:14 try adding the route here at the end. 1:19 We're trying to match HTTP get request. 1:22 So we'll set it up using the Sinatra get method, and we want to match a /path/new. 1:24 Like all other routes, we need to block. 1:30 Next. 1:33 And within that block, we're gonna call the ERB method to render any ERB template 1:37 and we're gonna render the new template. 1:41 That call to ERB new will look for a new .ERB file within our views directory. 1:44 So let's create that file now. 1:49 We'll just put some placeholder text in there for a moment. 1:58 Form for new pages will go here. 2:02 Save that, make sure to save our other files as well. 2:08 >> Okay, let's try this out, we'll launch the server. 2:14 >> And it's on port 4567, so that's the port we'll preview. 2:22 And it takes us straight to our root path and 2:28 let's try clicking the create a new page link. 2:30 And we can see in the address bar that our browser has sent a get requests for 2:34 the /new path. 2:37 But we don't see our form for new pages will go here placeholder text. 2:39 If we look at the page source in our browsers developer tools, 2:43 we see a level one heading with a page title of new. 2:46 We also see an empty paragraph tag. 2:50 It looks like it's rendering show.erb not new.erb. 2:53 Remember how we set up a get title route. 2:57 It had a URL parameter that would match any string that we placed after the slash. 3:00 The problem here is that Sinatra is seeing a request for the new path and 3:05 it thinks that new is a page title. 3:08 When multiple routes matched a request path, 3:11 the one that was defined first takes priority. 3:13 So the route with a title parameter 3:16 is taking priority over the route with the path of new. 3:19 And the new part of our path is being treated as a title. 3:24 To fix this, we need to move the new route before the route with the URL parameters, 3:28 so we can take priority. 3:32 Now let's restart our server and reload the /new path. 3:35 The /new route will take priority over the route with the URL parameter. 3:41 The new ERB template will be rendered and we'll see our placeholder text. 3:46 Okay, we've got a route in place and it's loading an ERB template. 3:50 Now we just need to add an HTML form to that template. 3:54 We'll do that next. 3:57