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
Our users can create new wiki pages, but they can't go back and edit the page after that. Our next step should be to provide them with a form that allows editing. First, we'll need to present them with a form that contains the existing page text, so they can modify it.
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
[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
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