Sinatra Todo app with ActiveRecord – Step 2

By | 14/08/2014

What are we building

This is part 2 of our small tutorial to build a Sinatra todo application. In this episode, we will make the final result a bit more attractive by applying some bootstrap styling to the code. For your reference, you can find part 1 of this tutorial here

To start applying the bootstrap styles, go to http://getbootstrap.com and download bootstrap.

Bootstrap

Unpack the downloaded archive and you’ll see that you end up with 3 directories, which are css, img and js, respectively the stylesheets, images and javascript files. Copy these directories and its content under a folder called ‘public’ in your Sinatra application.

Applying bootstrap to the layout.erb file

Next, we will want to beef up the layout a bit using the bootstrap components we just downloaded. As a reminder, the original layout.erb file was like:

<html>
<head>
   <title>Todo app</title>
</head>
 <body>
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
  <%= yield %>
 </body>
</html>

Next, to apply the bootstrap styling, we will do a couple of things:

  • add the css files to the head section
  • add the javascript files to the body section
  • apply some bootstrap components to the page

Applying the first two items, we get something like:

<html>
<head>
   <title>To do Application</title>
   <link href="/css/bootstrap.min.css" rel="stylesheet">
   <link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
</head>
<body>
     <ul>
         <li><a href="/">Home</a></li>
     </ul>
     <%= yield %>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
</body>
</html>

The layout file is having all the necessary components (css and js) for the bootstrap files.

Next thing to do is applying the bootstrap components to all files (bullet item 3 above). As we would like to have a nice top menu bar that appears on all pages, we can add the following to the layout.erb file. The below code, will create a top menu bar in black (because we are using the navbar-inverse).

 <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
       <a class="brand" href="/">Todo list</a>
    </div>
   </div>
</div>

Next, we would want all subpages to be rendered via the yield operation in a bootstrap container.

 <div class="container">
    <%= yield %>
 </div>

Applying bootstrap to view files

Each action (adding todo’s, deleting to do’s, viewing all todo’s….) also should use the bootstrap style, so we will need to apply bootstrap also to all individual view files. We’ll give an example for the index file.

We would like to have all todo items rendered in a Bootstrap bordered table. Therefore we will have to add the Bootstrap table style. In case you don’t know how to apply that, you can visit the bootstrap website for example code. For the table, you’ll find it here

<table class="table table-bordered">
<div class="control-group">
  <a href="/todos/new" class="btn btn-primary">Add todo item</a>
</div>
     <thead>
        <tr>
            <th>Id</th>
            <th>Todo item</th>
            <th>Created</th>
            <th>Completed</th>
            <th>Done</th>
            <th>Actions</th>
        </tr>
     </thead>
     <tbody>
      <% @todos.each do |todo| %>
        <tr>
          <td><%= todo[:id] %></td>
          <td><%= todo[:done] ? "<del>#{todo[:content]}</del>" : todo[:content] %></td>
          <td><%= prettify_date(todo[:created_at]) %></td>
          <td><%= prettify_date(todo[:completed_at]) %></td>
          <td>
            <% if todo[:done] %>
              <span class="label label-success">Completed</span>
            <% else %>
              <span class="label label-warning">Pending</span>
            <% end %>
          </td>
          <td><a href="/todos/edit/<%= todo[:id] %>" class="btn btn-danger">Edit</a>
              <a href="/todos/delete/<%= todo[:id] %>" class="btn btn-danger">Delete</a>
          </td>              
        </tr>
      <% end %>
     </tbody>
</table>

In the above code snippet, you can see that we have added the table with class “table table-bordered”. The table has a thead and a tbody section where respectively the column heading and the content will reside. In addition, we also put a button (before the table heading) to add to do items to our table and we have applied also the bootstrap styles to it by providing the class “btn btn-primary” to it. The buttons inside the table to delete and edit todo items were using similar styles, but we wanted to have it in red so instead of using class “btn btn-primary”, we apply class class “btn btn-danger” to it.

Eventually, this is the final result:

Todo_bootstrap

That’s it folks. As I didn’t explain it for all individual files, I have also uploaded the full source on Github