What’s that you’re hearing? Oh, just your browser talking to you.

Once you get an app online with Sinatra or Rails, it quickly becomes important to be able to talk to your browser, and listen to it. How else will you tell it what to do? You need to understand a little bit of what’s going on to really be able to control the browser and get input from the user. The key to that, is the mysterious yet pervasive params hash.

Before we get into the specifics of the params hash, it’s important to know how we can get user input in the browser. There are two main ways to do this. The first is through the url or a link. The second is through a form. Let’s look at both of these options, and how the params hash plays a role.

If we have an app and don’t want to hard code the routes, we can use a symbol in the route that essentially plays the role of a variable. A great example of how this works is PlaceKitten. This is an adorable placeholder image site where you simply include the image size in the url and a kitten of the specified number of pixels appears. So for example, http://placekitten.com/300/100 would give me an image of a kitten that’s 300 pixels wide and 100 pixels high. In fact, it would give this kitten:


Now, how does PlaceKitten achieve this? Well, when the routes are defined, they wouldn’t hard code every possible option. That would take forever! And be impossible. Instead, something like the route /:width/:height would probably be listed as the route. Using symbols in the url lets us tell our framework, “Hey, pay attention to this! I don’t want this to actually be the width, but I want whatever the user puts here to be the value for the width key!” When the user types in the url at the route /300/100, then, it knows that it matches this route. And that’s when the params hash comes into play.

Ruby will take the symbols :width and :height (or :id, or :name, or whatever you want the symbol to be), and use it as a key in a hash called params. The value for this is whatever the user puts in the url. If you wanted to, you could also code in links for the route so that you have more control over where your user goes, but it uses the same concept. If you go here, the same things happen under the hood compared to typing http://placekitten.com/1200/800 directly in as a url. The params hash will have more information in it than what you need, but you can pull out the data you care about. In this example, the data you’re looking for will be able to be accessed with params[:width] or params[:height].

Now, as mentioned, the other way to talk to your browser is with the use of forms. Whenever information is submitted through a form you need to specify how it’s used or saved. Again, the params hash comes into play. When a form is submitted, the data sent is saved in the params hash. However, since one form can have multiple fields it actually creates a nested hash inside the params hash. The key for this nested hash is the singular of the name of the class you’re referencing with your form. So if you have a form to create a new dog, with the fields name and breed, your params hash would look something like params = {:dog => {:name => "Ein", :breed => "Corgi"}}. To reference the breed you’d need to go inside the nested hash and type params[:dog][:breed]. However, to reference all the information contained in the dog form you could also use params[:dog] and the key-value pairs belonging to the dog nested hash would be returned.

It’s also important to realize that both uses of the params hash can be combined. You can pull information from a form and from the url on the same time. So if you had the dog form example above at the route root/:animal, your params hash would look something like this: params = {:animal => "dog", :dog => {:name => "Ein", :breed => "Corgi}} and you could access any of the information contained within as needed.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>