First Sinatra Program

I have to admit, I'm proud of myself right now. Not because the program I'm about to outline is impressively complex or even that it showcases a concept that is particularly innovative; rather, I'm proud of myself because I completed my first cradle-to-grave web application utilizing Ruby and Sinatra.

The Concept

For my first full-blown Sinatra Program, I decided to design a web application that focused on one of my favorite things: top ten lists. Now, this instantly makes me think of the episode of The Office "The List", where the employees of Dunder Mifflin discover what looks like a ranking system of some sort in Robert California's notebook:

Robert California attempts to minimize the list by explaining that it is essentially a "doodle" and should be of no concern. The funny thing is I actually completely understand the concept of the "list doodle" because it's one of my favorite things to do to pass the time. In particular, I've always loved top ten lists. It forces you to really consider your ranking of various items and make tough choices.

So, for my Sinatra program I envisioned a web application that allowed users to create Top Ten lists on a variety of topics and view other users' lists.

Designing The Program

The essential object-oriented architecture of the program was simple enough: there would be a User who created lists, and of course the List object itself, which contained content, a title, and a category.

The first major design decision was determining how to handle the list category. On one hand category could be an object unto itself, and I could allow the user to create that category as they saw fit. For the sake of simplicity, I opted to set the categories myself, and fix them in the program as enums.

Enums are essentially fixed attributes you can declare in your object class, but they map to integers in your database. Here is an example:

The beauty of using enums in this case it allows you to sort by by the enum attribute. In this case, I created 9 enum "categories" in my List class:

Arts and Entertainment
Sports
Politics and History
Food
Recreation
Business
Math and Sciences
Geography
Other The enums would come in handy later of course because I ultimately wanted to create "show_category" pages for each of these categories. Using the enum attribute, I was easily able to sort the lists.

The Biggest Hurdle

Easily the most challenging part of creating this program was designing the "New List" form. For a web application structured around allowing Users to create and view lists, this is essentially the life blood of the program. My first instinct was to create a relatively simple form where the user could input the title, select from the category options and then input/format the list as they saw fit in a textarea tag. Something like this...

So, essentially I would save this singular block of text as list content to the database. And then I realized the problem: when you accessed this to display the list, it would display horizontally... 1. Number 2 2. Number 2 3. Number 3... which makes total sense!

To solve this problem, I eventually decided to to make each list item it's own input in the form that is already numbered 1 to 10 like so...

That was the easy part. The more difficult question was what to do once the data posted with 10 different list inputs. What I ultimately did was this...

In the post controller route, I iterated through the hash containing the list items, progressively adding each item to to an empty string labeled list_content. In the iteration, I added a delimiter (a simple dash, -) I could use later to split the list. After the iteration, you would get something like...

-Item 1 -Item 2 -Item 3 -Item4 -Item5 -Item6 -Item 7 -Item 8 -Item 9 -Item 10...

Later, when it would be time to access this list_content, I could easily split the list at the (-) and then just iterate over each item and display in an ordered list on the page.

After that complexity was handled, the rest of the application ran smoothly. I programmed it to allow users to view lists by category, click on individual users to see all of their lists, or click on an individual list.