Simple Forms using ERB in Sinatra

Let’s say we have a simple website. On this website we list news articles that are submitted by our users. We need to have a way to take in that information from the user so let’s create a simple form. Here is how you do it…

form.png

What is happening here? First things first, anything that you want to be included in your form will be wrapped up in opening and closing form tags.

Let’s take a look at the first line of this.

 

In this line we are specifying to different things.

  1. action="/articles' is saying, when the submit button has been clicked, take the information gathered from this form and send it over to the page /articles
  2. method="post" is saying, when you get to the page that is designated in action (i.e /articles) we want to take the information gathered and append it to something (store it on our server).

The form is going to want to do something with submitted information, this is why we designate a destination for the information and then, just as important, is what TO DO with the information. We do not want to GET the information, we want to store it. GET would simply display it, we want first store it with a POST method and then later we can call on it from its new location if we want to later display it on some other page.

What does Title:  mean?

Label does something for us that will enhance user experience, what is that? If you click on the text Title: the input box will get highlighted and direct you to submit information. If you look at the line below it, we see that the attributes of id and name both share the same value as for in our label tag. When we see for="insertValue" in a label tag it will be pointing towards an input tag, but more specifically towards the name attribute of that input tag. This way they are now linked up nicely.

For this example we have 3 fields we want to be submitted, “name, url and description“. We will have label tags associated with each input field. The final touch to this is of course our submit button. This is straightforward and does exactly what we want it to do. If you want to get fancy and rename submit to display some other type of text on the button you can add an attribute to the input field like this:  and there you have it.

If you were wondering about what happens with our information, here is an idea of what you could expect to see on our Server.rb file.

THING.png

So here, we have taken our data and redirected it back to /articles. We already have an /articles method in our server.rb file but our form has designated this information to be a POST so we create a POST method for that page like so.

If you were to throw in a binding.pry here (highly recommended to get used to how data is being transferred and shared) you could type into your terminal params . This would return a Hash of values. This is going to be the information inputted by the user.

The problem with params is that the Hash is temporary. If we do not store it somewhere, it will purge itself once the redirect is complete. So, we create variables and assign them to each key/value pair inside of our params hash.

This is then appended to a CSV file and then we are redirected back to /articles which we are actually already on, but this time it will be a GET method that picks it up and not POST  since we did not designate it to be a POST in our redirect.

From there we will be able to call on our CSV file and display it if we like. Congratulations, you just created a simple form and successfully stored user data on your localhost server!

Resources:

Submit a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s