Romp! A Sinatra CMS Application
Whew! Phase 2 of my software engineering program at Flat Iron got here fast. We are approaching the end of this phase which means one thing: project mode. We have been learnings tons of fun new things this phase- from CSS and HTML basics to ActiveRecord, SQL, and finally Sinatra. For this project, we were instructed to use Sinatra to build a content management system application. Our app must meet the following requirements:
- Build a Sinatra app using models, views, and controllers
- Use ActiveRecord
- Use multiple models
- Utilize “has-many” and “belongs-to” relationships
- Users must be able to sign up, sign in, and sign out
- Validate uniqueness of user login attributes
- Use CRUD actions in models
- Ensure users can only edit their own resources
- Validate user input
What is Sinatra?
Sinatra is a DSL, or domain-specific language, for building simple and elegant web interface ruby applications. In all its simplicity, Sinatra is actually a pretty powerful resource.
Sunny Ripert created this cool app, “So Nice”, to play, pause, change volume, or skip the currently playing song in iTunes, Spotify, and other media players.
After reading the Sinatra documentation, I started brainstorming what I wanted my app to do. I asked myself, “what problem will this web application solve?”
I have a foster turned rescue dog named Juna. She is the sweetest creature on four legs and we love taking her to the dog park. In DC, there are probably 25+ different dog parks in the metro area. The problem we run into, is that we can never remember which ones we’ve been to and liked, which ones have water available, and how big or small they are. So I decided to create an app that would allow me to track my favorite DC dog parks.
Getting Started
The first thing I did was create a rough site map for my app in a Google doc. I wanted to just get on paper the basics of what routes or pages it would have, what my models would be, and what controllers I would need.
The next thing I did was install the Corneal gem to set up the structure of my files within my app. This gem was created by another Flat Iron student and was a huge time saver.
Models
I determined I would need a dog park model and a user model for my app. So first I created my user model to add validations for my username and password, as well as establish my “has-many” dog parks relationship.
Controllers
Next, I got to work on my controllers. I created an application controller, a dog parks controller, a sessions controller, and a user controller. My application controller is where I created a route to my welcome page and created two helper methods; one for checking to see if a user is logged in and one for checking for the current user. Then I got to work on my sessions controller to enable a user to log in and log out. Next, I created my dog parks controller; which is where I stubbed out my routes to satisfy the CRUD action requirements -create, read, update, and destroy. Finally, I created my user controller to allow a user to sign up, view all other users or navigate to a specific user page.
Views
I worked on each view one at a time, as I built out the route in the corresponding controller. This app involved creating several forms, an edit feature, and a search feature. For my dog parks views, I created HTML docs that allow a user to see an index of all dog parks, create a new dog park, and edit or delete dog parks.
CSS and Layout
Admittedly, the most challenging part of this project for me was actually the CSS work. I’m a bit of a perfectionist and I really wanted the app to be user-friendly and look great. CSS was not even a requirement for this project, it was just something I personally wanted to work on. So I tweaked my fonts, colors, navbar layout, and added lots of fun photos of dog parks and cute dogs. Like I was warned, the most frustrating thing about CSS is trying to center an image. But alas, I preserved.
About Romp!
So, all in all, I’m very happy with the finished product of this web app. The welcome page is simple and clean and makes it very clear to the user what this app does and who it’s for.
From the welcome page, a user may sign up or log in. Once logged in, additional options appear in the navbar.
A logged-in user now has the option to view their profile, log a new dog park, view all dog parks(not just their own!) view other users, or log out.
To track a new dog park, a user must fill in the following form.
The validations I have in place ensure a user cannot leave a field blank or they will get an error message.
If you navigate to the All Dog Parks menu option, you will see a list of all dog parks that have been logged in the app. Each park is a link that a user may click on to see more information about that park.
The search feature allows a user to search for a particular dog park. Don’t remember the full name of the park? Not to worry! I have set up the search feature to allow a user to type in a few letters or part of the word and the dog park should still pop up.
