Preview
Video Player
00:00
00:00
A Form to Edit an Existing Page
7:32Our 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.
[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