loading...
Cover image for My First CRUD Web App

My First CRUD Web App

szam profile image Samuel Grasse-Haroldsen ・4 min read

Real Recipes

Back here at Flatiron our second milestone project is creating a web application where users can sign up for accounts, login, and create as much content as they would like. Along with the creation of content obviously comes the need to read, update, and delete everything created as well. I decided to create an app that allows users to store recipes along with little tidbits about the recipe like a link and tags.

Enter Sinatra

Sinatra is a fantastic little gem that makes use of rack (another great gem) that lets us focus more on our code rather than on HTTP headers. With the gem installed we can create a simple web app with the following code:

require_relative 'config/environment'

class App < Sinatra::Base
  get '/' do
    "Hello Web!"
  end
end

There is a little bit more code including the environment file and a config.ru, but the majority of work you will need to do is here in your App class!

Active Record

I'm sure many have heard of SQL, relational databases, etc. In our first few weeks of Mod 2 at FIS using SQLite we learned how to make databases, write queries, and then started learning about ORMs. It was really interesting stuff, challenging but interesting. As I was starting to wonder if I would ever master complex queries (at least they seemed complex to me), we started to learn about Active Record, a powerful tool that would generate queries for us based on our Ruby code. With this gem we could now easily select rows, add columns, update information, and delete entire tables without writing a single query.

To The Web

With my new knowledge I started my project confident in my abilities. During the course of Mod 2 I definitely felt the steep incline of acquiring new skills but with time and patience and pod meetings with my instructor, I was feeling more and more confident about creating my CRUD application. Starting the project was familiar enough. A fellow student had mentioned a useful gem corneal that made starting a Sinatra project painless. It included pretty much everything you'd want when working with an MVC design: a public directory with css stylesheets, a layout.erb to make your views consistent with each other, and of course a db directory for the database files and migrations (Ruby code that allows us to create and manipulate our db utilizing Active Record).

MVC

I created two models for my app: users and recipes. Users have many recipes and recipes belong to users. Users would have passwords (encrypted using the bcrypt gem) and usernames. Recipes would have names, ingredients, cooking times, tags, and a link to another web page where the recipe was found (later I would add a color attribute for more pop in the recipes view). Creating the views was simple enough: a homepage to login or sign up, a view of all recipes, view a specific recipe, a new recipe form, and an edit recipe form with a delete button (simple HTML with some embedded Ruby). Now came the tricky part: the controller.

Application Controller

This is where all of my logic would be for moving around web pages, sending information to the right places, all the actions a CRUD app needs to do, all the logic that comes with accounts including session cookies, denying access to someone not logged in, not letting other users see your recipes, etc. It was a lot of work but I utilized a few helper functions and things turned out pretty well. The hardest part was adding the logic for just in case someone tried to access a recipe that didn't exist, but by using some nested if statements I finished the job.

CSS

Seeing how Flatiron starts students off with a nice, syntactically friendly language (Ruby) and not JavaScript, it makes sense that we would learn back-end first (Ruby on Rails is next and I can't wait!). So when I wanted to make my site pretty I had to muster all my memory of CSS from my web design class in high school. It was a struggle and like many programmers I couldn't understand why my code wasn't working and now that it does work, I don't understand why. It may not look like Instagram but with lots of research I was able to get a navbar, center things, and even use grid to display my recipes. I hope to be able to update the CSS and add features as time passes but for now I am happy with the results.

Headed to the Rails Station

I honestly loved this mod because it really challenged me. The SQL queries were so frustrating at times, and I felt like every other day I was learning about some new technology like http, rack, sinatra, active record, etc. When I would start to get down and wonder if I would ever fully understand all these new concepts/technologies, I would think to myself you don't have to know all the transistor logic to create a killer app. You don't have to personally mine the resources from the earth to design the fastest CPU. We are human and we abstract things so we can focus on a higher level of design to create absolutely amazing things. We build on each other's work and keep innovating. So with that in mind, I'm onto the next layer of abstraction! Ruby on Rails!

Posted on by:

Discussion

markdown guide