[MUSIC]

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 the multiple form that allows editing.

In the previous stage, we set up a Sinatra route that lets users send a GET request

to retrieve an HTML form for a new wiki page.

Then we added another route that accepts a POST request with the data from

the completed form and saves it as a new page.

In this stage, we'll need to set up another pair of new Sinatra routes.

The first route will accept GET requests and return an HTML form for

a wiki page, just like before.

The difference is that this HTML form will be pre-populated

with an existing page's content.

The second route will accept the completed form data, also just like before.

But there will be a difference here, too.

Since we're updating existing data on the server rather than adding new data,

we need to send a put request, not a post request.

We'll talk more about put requests in a bit.

Let's start by adding an Edit link to the show.erb template.

That will let users view any page and click a link to edit that page.

We're going to want some CSS styling later to visually separate the Edit link from

the page content.

So we'll wrap the link in a DIV element to make it easier to style.

Within the DIV, we'll add an anchor tag to create the link.

We'll set the link text to edit this page.

We need to set the anchor's href attribute to specify what path

the browser should request.

The path needs to start with a slash.

Since this will send a GET request for an HTML form to edit this page, our app needs

to be able to determine which page we're editing based solely on the request path.

So we use an ERB output tag to embed the current page title in the link path.

We set the title instance variable to the current page title in our Sinatra route

for use in the page heading.

We can just reuse that same variable here in the link path.

And will end the path with another segment saying slash edit so

it's clear were editing the page and not viewing it.

Let's start our server app and try this out.

We'll launch preview on port 4567.

So now, if we go view and edit page Type in the path for

an existing page, we'll see an Edit link at the bottom.

If we click it though, we'll see Sinatra doesn't know this ditty.

We'll need to set up a route to accept requests for the edit path.

You remember our get new route within the app.

It renders an ERB template with an HTML form to create a new wiki page.

You also remember our Get title row,

which uses a URL parameter to get a page's title, loads that pages content, and

renders an ERB template to show that content.

This route we're going to create will be like a cross between these two

existing routes.

It'll get a page title from a URL parameter, load content for

that page, and then render an HTML form containing that content.

We're not submitting the HTML form right now, we're getting it.

So we'll be expecting an HTTP GET request.

We'll define our new route using the GET method.

The path will start with a slash, followed by the page title,

which will use a URL parameter the capture title.

Then another slash, and the word edit.

The slash edit segment at the end of the path will keep edit

requests from getting confused with the GET title route.

So it's okay to define this route after the GET title route.

Now, we'll need a block for the edit route.

And in that block, we're going to set up instance variables to hold the page title

and name, just like we did in the route to show a page.

So to get the page title, we're gonna take the title parameter from the URL.

So, params, title,

which will contain whatever segment of the URL was at this position.

We'll assign that to an instance variable called Title.

Then we need to use that title to load content for the page.

We'll call the page content method.

And we'll just reuse the title instance variable as a parameter to page content.

We'll assign the content we get back to an instance variable named content.

Lastly, we're going to use those values in those instance variables to render an ERB

template named edit.

Let's be sure to save that.

That call to ERB edit will look for a file within the views directory named Edit.ERB.

So let's create that file now.

In that file, we'll need to set up an HTML form to edit an existing wiki page.

That form will actually look very similar to our form to create a new page.

So let's go into the new .ERB template,

copy everything, and paste it into edit.erb.

Then we'll go through and modify it for editing a page instead of creating one.

The heading at the top of the page currently says we're adding a new page,

but we're actually editing one.

So let's update that to say edit page

Followed by the title of the page we're editing

which will use an ERB embed tag to insert.

We'll access the value of the title instance variable which was set

back in our route.

We're going to need to make some changes to how the form is submitted later, so

let's just remove the method and action attributes from the form tag.

We're not going to want users to change the page title as that affects what

file it will be saved into.

So, let's remove the entire field set for the title field.

We will still want the content field and the submit button.

So we're going to leave those alone.

Be sure to save that when we're done.

Let's see how our edit form looks so far.

We'll restart our app.

Visit an existing page, reload it, and click the edit link.

Our edit route is invoked, and it loads our form template.

You can see the page title appear at the top.

The content text area is blank, though.

We're going to want it pre-populated with the existing page content so

the user can make changes to it.

The browser will treat any text you place between the opening text area tag and

the closing text area tag as the initial field value,

the value the field has before you make any edits.

For the new wiki page form, the element was empty and so the field was empty.

But this time, we're going to need some text in there.

Let's try adding a placeholder now.

Initial, text.

If we reload the template, we'll see initial text in the form field.

We can use this to set our existing page content as the initial text area value.

Back in our Sinatra route,

we store the existing page content in the content instance variable.

So we can just place an ERB output tag inside of the text area element.

And use it to embed the value of the content instance variable into the HTML

output.

Save that, reload our view.

And we'll see our existing page contents preloaded in the text area, ready for

us to edit them.

As before though, if we submit the form, the data isn't saved.

We're going to need a separate Sinatra route to receive and

process the form data.

We'll set that up next.