The Pizza Palace.
For my second project at Flatiron School, I was tasked with creating a CRUD, MVC app using Sinatra. While that sounds really fancy, the app itself is pretty basic. I created an app that allows users to see world-class pizza recipes from all over the world. The users can create/read/update/delete recipes from the app as well. Although I am still getting the hang of this, I will try to explain to you how I built this app!
Getting Started
When starting this project, the first thing I did was using the Corneal gem that another Flatiron student created. This gem was basically magic and saved me a ton of time with the initial setup. I made a few changes to the included files, but the final file configuration is shown below. It seems very complicated, and in a way the actual code is but the way it works together for the app is pretty simple.
Database Tables
After I set up the initial structure, I created migration files that inherit from the ActiveRecord base to create my tables. Because I was only working with two models, I only created two migrations, one to create a users table and one to create a pizza’s table. With these two tables, my app was able to store information about the users who signed up for the app and the pizzas created in the app.
The Pizza and Users Model
We were required to include at least one has_many / belongs_to relationship within our models for this project. To create that relationship, I used methods from ActiveRecord to show that a user can have many pizzas and a pizza belongs to a user. In my model files, you can also see I used validations to prevent users’ bad data entry.
Controllers
Once everything else was done, the next step was to create the logic for the application controllers. I created three controllers to ensure I had a separation of concerns, so each controller was only responsible for a task. To perform CRUD actions for the user, guess who is in control? The user controller, of course, inherits from the application controller. The pizza controller also inherits from the application controller and is in charge of the CRUD actions dealing with the pizza recipes. The application controller inherits from the Sinatra base and utilizes GET/POST methods. After all of the controllers were created they were then add to my config.ru file.
The view — the hardest part ;-)
Alright, now we are to the good stuff, what the users actually see. Creating the view files was the most challenging part of the project; I kept getting stuck on what I wanted the user to see vs. how I could code the project to get them to see it. Our view files are .erb files, which allow us to write HTML code in these files. In the view files, all of the forms are stored for the user to input information into the app. Sounds easy, but connecting these forms to respond correctly to the routes created in the controllers was very tricky. I made eight different view files to ensure each action I wanted the user to take had a different view. I will spare you the pictures from each of the views and just explain briefly what each does.
The welcome file is just that; it simply welcomes the user to the app and prompts them to sign up or sign in. The layout view is the overall layout of the app, what the user sees as styling elements on each page. The login in view is the page the user sees when they login to the app, while the create user view is the page the user sees when they want to sign up for the app.
When a user signs in, they will be shown the pizzas view, which lists all of the pizza recipes currently stored in the app. From there, the user can create a new pizza or search for a pizza. If they decide to search for a pizza, they will then be shown the show pizza view, and if they create a new pizza, they will be shown the new pizza view to list out all of the ingredients for the fresh pizza. The edit pizza view will only be displayed for pizza recipes the logged-in user actually created; in this view, they will have the option to edit or delete the pizza recipe they made.
Makes sense, right??? Kind of. Ok.
Finally, styling.
As stated earlier, I used the Corneal gem to start this project, so I did not do much to the CSS file. However, what I did do was change all of the site’s colors and changed the text styling. Oh, yea, and I added a bunch of pizza icons in there for fun, but nothing too fancy!
That is it! A very simple web app showcasing the best pizzas in the world. Feel free to check out my code here and give it a go!
