The Interactive Internet

Melissa Gonzalez
Adventures in Code
Published in
5 min readJul 18, 2017

Receiving Data with Parameters

The internet has allowed the world to becoming highly interactive, sending and receiving terabytes of data by the second. While it’s true receiving information is still a major reason why people go online, they are increasingly expecting websites to be interactive and allow them to send information as well.

People want to read news story, but also be able to post comments and opinions as well. They will look up recipes to use at home but expect to be able to leave a comment on whether it was a good recipe or not. They want to connect with friends from all over the world, not only to see what their friends’ lives are like, but also to post about their own lives.

This interaction is possible because websites are able to receive and store information from the user, then process and display the information. Up until now, we’ve been using our terminal to input and manipulate information on our own computers, but websites are able to receive and process information from users all over the internet without needing to use the terminal.

There are 3 methods for websites to input and process information from a user. They are:

  1. Query Parameters
  2. URL Segment Parameters
  3. Forms

Query Parameters

Query parameters are defined in the web address by way of a question mark followed by “=” and “&” symbols.

This method is used by sites such as Google and any site search engine where the results url is followed by a question mark. The questions mark is followed by parameter keys and values that tell the website how to process the information it received from the user.

Since these keys and values are defined AFTER the url rather than WITHIN it, the website can run just fine even if the page doesn’t use the parameters within its code. Rails doesn’t actually do anything with the values besides store it.

A site using query parameters have a web address of the format:

http://www.mysite.com/search?first_name=John&last_name=Doe&email=johndoe@email.com

where everything after the ? is saved as the following hash:

params = {“first_name” => “John”, “last_name” => “Doe”, “email” => “johndoe@email.com”}

Since query parameters come after the url, no special routes have to be made in order to handle them. They will get processed using the usual get “/url” command.

URL Segment Parameters

The second method for receiving user inputs is via URL segment parameters. URL segment parameters work very similarly to query parameters.

However, as the name implies, these parameters are defined within the actual url rather than after it. Since URL segment parameters are defined within a url, a route must be created in order for the information to be processed. The command to do this will look like:

get “/url_segment_url/:variable” => “controller#url_segment_method”

Then within the url_segment_method, you will be able to use & process the variable that the user inputted.

Forms

The third and generally most useful way to receive and process user inputs is through forms. Luckily, HMTL has built-in form functionality, so building a form online is as simple as reading up on the appropriate HTML tags.

Forms require the most coding of the 3 methods of getting information from the user. Receiving an input requires two steps:

  1. Displaying the form so that the user can enter their information and submit.
  2. Process the form to store the information and send back a results page.

Forms: Step 1

To display the form, you simply do the usual Routes → Controller → Views path to create the form. Your route will look something like:

get “form_url” => “controller#form_method”

And your Controller method will likely just render an html.erb file

Within your html.erb page, you will include a form whose method will “post” the results. Rails will not allow you to set up a regular HTML form due to security reason, so you must use a Rails form tag to create the form. The Rails form tag uses the format:

<%= form_tag “/form_result_url”, method: :post do %>
<! — Form contents example ->
<label>First Name: </label><input type=“text” name=“first_name”>
<label>Last Name: </label><input type=“text” name=“last_name”>
<label>email: </label><input type=“text” name=“email”>
<input type=“submit” value=“Submit”>
<% end %>

All the parameter keys will be defined within the form itself in the input tags, using the attribute name="parameter_name". In the example above, the keys to the params hash are “first_name”, “last_name”, and “email”. The params hash values will be defined by the user inputs. Once you have your form set up, it’s time to create the form results path!

Forms: Step 2

Since you can only get to the form results by submitting the form, the routes verb for the results page will be “post” rather than “get”. This is alluded to in the form html.erb file within the form_tag that shows the method for the form_result_url is :post.

The route for the results will look like:

post “form_results_url” => “controller#form_results_method”

With that, you can use the params hash within the controller methods or html files to process and display the information as necessary. You can also save information to the database!

These 3 methods for receiving information from the user are quite powerful for making websites more interactive. Query parameters are often used by search engines to return search results. URL segment parameters can be used by online shops to display products individually without having to create a separate route and html page for each product. And forms are quite versatile, allowing sites to receive information from the user without the users needing to know anything about how websites or programming works!

--

--

Melissa Gonzalez
Adventures in Code

Aspiring Web Developer. Fitness Enthusiast. Foodie. Beer Lover. Triathlete. Former Research Scientist.