This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
When multiple routes match a request path, the one that was defined first takes priority. It's important to define your routes in the correct order, so they don't override each other.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up