Super Simple Sinatra & Slim Site

With Portland Code School all wrapped up (or at least mostly–I was asked to TA for the current class, so I’ve been doing that a couple of nights a week), I decided it was time to knock the rust off my Ruby and apply some of the JavaScript stuff I learned to Ruby. To that end, I’ve started building an online version of RoboRally, a favorite old board game of mine (Here’s the GitHub repo). Most of what I’ve been doing so far is working out some game logic, but it seemed like it was about time to start working on the web interface side of things. The obvious choice for a Ruby web framework is Rails, so of course I decided to use Sinatra instead. In addition to sheer perversity, since Sinatra is more lightweight, it seemed like a better choice for really learning the ins and outs of how all this stuff goes together. For templating, I’ve gone with Slim.

There are a bunch of tutorials on Sinatra and Slim around, but I didn’t find too much about using them and a Ruby app all at once, so I did a lot of experimenting to see what would work. Now that I’ve got that more or less squared away, it seems like a good time to pass that info along.

What we’re going to do today is create a web app that will display a table with a user-specified number of rows and columns. Not terribly exciting, but it should illustrate how these things all work together. We’ll start out with the ruby that generates the table object. This file is called table.rb.

That’s pretty straightforward. You’ll note that all the Squares are given the same color in this example. That’s not super useful, but it would be fairly straightforward to have some code that gives different squares different colors.

With the ruby done and creating a Table object, it’s time to take a look at our server, main.rb:

So, that’s pretty straightforward. The first 3 lines bring the sinatra and slim gems. Sinatra is what responds to http requests, and slim is a templating language that makes HTML generation a bit easier. The next chunk of code defines how the server will respond to a GET request to the path /table. By default, Sinatra apps will be listening on port 4567, but you can change that if you need to.

In the first line of the function, we’re creating a new Table object using a couple of parameters for number of columns and number of rows. Those parameters get passed in as a query in the URL, making the entire URL something like http://localhost:4567/board?rows=4&cols=10. The params hash is a built-in part of Sinatra, so we don’t have to worry about creating that. the final line of the function tells the server what to respond to the request with–in this case, a slim template named index.slim. By default, Sinatra will look in a directory called /views for any templates, though again, you can change this if needed. Here’s index.slim:

One thing to note with Slim is that whitespace is semantic–all the indents have to be just right or funny things will happen to your page. Through the h1 tag should be pretty straightforward. After that, it checks to see if there’s an object around called table that it can use. if there is, it iterates through the contents to make rows, and in each row it further iterates to make cells. Each td that it creates also gets assigned a class based on the relevant Square‘s color, and an id based on the x and y coordinates.

The only thing left is the CSS, which Sinatra will start looking for in the public/ directory (though, once again, you can change this default if needed):

And there we go! With that, we’ve got a basic Sinatra server that will display a table of whatever size the user specifies. I’m sure there’s plenty of refactoring to be done in the code, but it should serve to illustrate the basics of how all this stuff hangs together.

Leave a Reply

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