Sinatra Web Application

For my first Sinatra project, I created a Content Management System Web Application for users and their collection of Analog Synthesizers.

For this application, I used the Sinatra framework with the MVC (Model-View-Controller) paradigm. Sinatra is a Domain Specific Language Web Framework that is Rack based. The MVC paradigm is a software design pattern that divides your application into groups of files that have specific jobs. The Models contain the logic of the web application that can manipulate your data. The Views are the front-end where the user interacts directly. These are .erb files (embedded Ruby) that can contain HTML, CSS and javascript. The Controllers are the ‘go-between’ for the Models. These files relay data from the browser to the application, and from the application to the browser. They contain routes that receive HTTP requests from the browser such as GET, POST, PATCH and DELETE. The ‘requests’ can be sent to Models to run code on them, then render the .erb (View) files for the user.

Active Record

Active Record is an Object Relational Mapping system (ORM). It allows software engineers to easily access and manipulate data in a database without having to know SQL. Active Record allows us to do a tremendous amount of work in a short period of time. There are many functions of Active Record, but for my application I stuck to the basics. CRUD

CRUD is an acronym for Create, Read, Update and Delete. Active Record has methods built in to allow an application to read and manipulate data stored in the database tables.

MVC

The file structure I used based on MVC is as follows:

First you’ll notice that there are multiple files for models, views and controllers. The reason for this is to separate specific ‘tasks’ into their own file to make your code easier to understand and debug.

models

user.rb is primarily used for validation and declaring the has_many association to :analog_synthesizers

analog_synthesizer.rb like user.rb it is used for validation and declaring the belongs_to association to :users.

views

There are several .erb files that are organized under 3 directories; analog_synthesizers, users and sessions. the .erb file names are self explanatory.

The layout.erb file is in the root of the views directory. This file is used to add common elements that are used across multiple pages in your application. Such as, navigation, headers, footers etc.

controllers

The analog_synthesizer_controller.rb contains the routes that are specific to Analog Synthesizers, such as “/analog_synthesizers/new” and “/analog_synthesizers/:id”.

The application_controller.rb contains the route to the ‘Home page’ as well as helpers and some settings, such as enabling sessions and setting the session_secret.

I also created a sessions_controller.rb for routes such as “/login” and “/logout”.

Last of the controllers is users_controller.rb, and as you probably have already figured out, this file contains routes specific to Users.

config

The config directory contains the environment.rb file that has multiple uses. It contains database connection information as well as a list of required files for your application to use.

db

This directory contains the database (in our case sqlite3), schema.rb which contains the schema of the database and a directory named migrate which contains the multiple migration files which are used for creating, adding and changing the database schema. Each file is time stamped, so can rollback any changes you made.

public

The public directory contains subdirectories for images, stylesheets for CSS files and favicon.ico which is the icon for the tab in your browser.

Remaining files in the root directory

.gitignore - Contains a list of files you do NOT want uploaded to Github.

config.ru - Is a Rack file that contains a list of your controllers and the run command for you application as well as many other things.

Gemfile - Contains a list of all the Gems my application depends on.

Rakefile - Part of the Rake Gem. This allows you to add tasks like commands to run Pry or make backups of your database for example.

README.md - Self explanatory. I used it for adding instructions for running my application such as run bundle install.

I hope this made sense as to what and why I created this file structure for building my Analog Synthesizer CMS.

Thank you,

Joe McPartland