Making a Simple Task List App with Sinatra

on
Introduction

If you’re looking for a fun project that has some utilitarian uses, a to do list is a great place to start.  This app will use Ruby's Sinatra with a model / view / controller file structure.


File Structure





The Gems



The Models

There are two basic models set up in this project with ActiveRecord: 

The User Class-
The user class has a secure password through the ‘bcrypt’ gem, a user can have many lists.  Also within this class is the slug and find_by_slug methods for converting user names into html viable addresses.




The Database Setup & Migrations

There are two migrations made in this project.  One to setup a user account and another to hold and associate their individual ToDo list.



The Controllers

    The Application Controller
    This is a pretty simple file that is the first controller ran by ‘config.ru’ upon initial page loading.  This file will set turn on our sessions, set up where to load our HTML views and also is where you will find the helper functions.

Helpers
 Each of these helper methods are used to check the status of the client and make sure that the session only allows the account holder to view and read write permissions to only their list.



The User’s Controller

This file will handle the user account side of the routing including the creation of a new user account.  



The Lists Controller

The Final Controller is for the CRUD methods for adding, deleting and editing the todo list.



The Views

There are several views for this app.  These views are erb files with embedded HTML.  For full examples of each view, feel free to checkout the entire GitHub repo, however below I will give an example of the main ‘/lists’ page.

A few things to note on these views

  • Lines 10 - 14 create a container that sits at the top of the page and greets each user by username.
  • Views utilize a cms version of bootstrap for the css (helped me get the css productively prototyped)  You can see the link in the <head> of the layout.erb file.
  • Each task is put onto its own bootstrap card component with edit buttons
  • The “Completed Task” button actually deletes and removes the task from the list





Conclusion

I learned a lot with this project and some of the more abstract logic in the controllers really seemed to click into place after building this bare bones to-do app, it really helped me in grasping how the MVC architecture works together.

Comments

Post a Comment