My Sinatra CRUD App

Ernesto Ramirez
5 min readMar 5, 2021

After I finished developing my CLI project for Flatiron school, I gained more confidence in what I could make as a programmer. My introduction to Sinatra felt overwhelming at first, however, I got a good grasp onto it and felt eager to start my Sinatra project. I built a MVC, CRUD TV show review app using Sinatra. It allows users to create/read/update/delete reviews on the app, with security. Thanks to Active Record and other Ruby gems, this made the task at hand less mind boggling.

App Structure

MVC Visualizer

In order to create a full MVC, models/views/controllers, based app I used the Corneal gem to provide all the necessary features. I had to change the names of the generated files in order to make it easier for me to navigate through the MVC.

Database

Shows Table
Reviews Table
Users

Corneal also generated migrations files for my database for each model. I created a table for each model, show/user/review, and created a series of strings and integers that matched the column names that I wanted for each table. For example, the Shows table has a name column that contains strings which are the show names.

Models

Show Model
User Model
Review Model

In order to build relationships between my models I used has_many and belongs_to methods from Active Record. These relationships allow data created in the database to either belong_to a column, or, a column can has_many strings or integers. For example, a user has_many reviews and a review belongs_to a reviewer with a class name of user. After these relationships have been built I ran my migration files, using rake db:migrate, in order to build my schema.

Schema

Controllers

App Controller
Review Controller
Show Controller
User Controller

The logic of the controllers are responsible for all of the CRUD actions as well as handling redirects between pages. I created 3 different controllers that are made for each model, and edited the application controller that was already generated by Corneal.

For the edits I made to the application controller I added a redirect to the /shows page if a user tries to visit the root of the app. I created helpers in order to define if a user is logged_in?. I also defined a current_user method that finds and matches a user with their id and session. I also created a session_secret for security and session_info method for information about the session.

The review controller allows the user to create/read reviews as well as edit/delete their own reviews. It prevents users from posting identical shows and shows an invalid submission error. There are also functions written to prevent a user from editing and deleting other users reviews.

The show controller allows the user to get/post new shows. There is also an error messages implemented if the show does not exist that states ‘Invalid form submission please try again’.

The user controller allows the user to get/post to the login/signup page. There’s a logout function that destroys the users current session. A users username cannot be duplicated.

All controllers inherit from the application controller and the application controller requires the config.ru file that runs the application.

Views

Review Edit View
Show View
User Reviews View

The views are where I render out and test the routes that were setup in the controllers. I picked 3 different view pages from the 3 different models that I created in my app.

The review edit view allows the user to edit their own reviews using the POST method and redirects the user to the review they just edited after submitting their edit form.

The show view allows users to view their own review, along with other users reviews, on a specific shows page. It also allows the user to add their own review if a user is logged in. If the show has no reviews then the page will render a messages that states the shows has no reviews. This view also has links that route to a specific user in order to view other reviews that user has posted.

The user reviews view shows all the reviews that a user has posted. If the user has not posted any reviews then a message is rendered which states that the user hasn’t posted any reviews. When it comes to posting delete and patch routes I needed to insert addition input tags in order for editing and deleting to be possible. Examples of these tags can be seen at the end of all the views files. All of these views files are linked to a css file, linked in the head tag, that allows the page to be styled using bootstrap.

<input id=”hidden” type=”hidden” name=”_method” value=”patch”>
<input id=”hidden” type=”hidden” name=”_method” value=”delete”>

Conclusion

This project came with plenty of highs and lows, but in the end I am glad that I was able to create something that I could be proud of.

Check out my repo here.

--

--