Sinatra - Movies catalog (Part-2)
Tags: ruby, codenewbie, sinatra, beginners
Published: 2020-11-04 06:22:13

# Welcome
Hello dear coders, friends, and enthusiasts!
Today, we are going to go on with our movie catalog project that we developed in ruby using 'sinatra' web application framework.
  
You can find the first part of the article here: [Part-1](https://dev.to/eminarium/sinatra-movies-catalog-part-1-21gl)
  
# A follow-up
Last time, in the first part of our blog, we developed part of the project. Let's remember what we already have and what is yet left to accomplish. 
  
__READY__
* **movie.rb** - Movie class to manipulate the movie object.
* **movie_store.rb** - A class where we will manipulate storage and retrieval of movies from the storage file.
  
__UNDONE__
* **app.rb** - the main file where we accept requests and redirect HTML content to users
* **index.html** - Main view file where we will list all movies
* **show.html** - A file where we will show info about a single movie
* **new.html** - A file that has a form to submit new movies
  
  
# APP.RB
This is the main file where we accept requests from users and send back response or redirect an HTML view file back to the user.  
  
For this to happen, we need to have certain endpoints. The endpoints are just URLs that need to be entered in the browser to get a certain response. Endpoints also should be sent using some HTTP method that depends on whether you are trying to get information or trying to submit one. To get the information we use the 'get' method and to send information we use the 'post' method.
  
First of all, we need to include the required files and initiate a storage file where we will store movies.
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9hl92nxzac6iwvlukgsj.png)
  
Here we include the 'sinatra' web app framework gem, a 'movie' class file, and 'movie_store' file that manipulates the storage and retrieval of movies from the 'movies.yml' storage file.
  
Now we have to show what endpoints we will have. Here they are in short.
* **get: '/movies'** - get all movies from the storage.
* **get: '/movies/new'** - get form to submit a new movie.
* **post: '/movies/create'** - get parameters for new movie.
* **get: '/movies/:id'** - get info about a certain movie.
  
__LIST MOVIES__
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/67f4vu4jh2o9tfq3rq48.png)
  
This is where we get a request to list all the movies. We use 'all' method of the 'store' object and serve the 'index.html' file with 'erb' function.
  
__NEW MOVIE FORM__
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bk638dpaiscfgns6ic16.png)
  
This method just serves the 'new.html' file which we will show a bit later and that just includes a form to submit a new movie.
  
__CREATE MOVIE__
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kvdn2j9qh28cp45jr2u7.png)
  
Here comes the one with the 'post' HTTP method. It means that we accept parameters from the user or form. 
By creating a new 'movie' object with the given parameters we give it to the 'store' objects 'save' method. All the parameters are sent in the 'params' hash. And at last, we redirect the user to the '/movies/new' endpoint that serves the 'new.html' file again.
  
__SHOW MOVIE INFO__
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1z42kvq9lwc4egaat0yf.png)
  
This is the final one and the one that gets the required movie info from the storage file and it is shown in the 'show.html' file.

# VIEW FILES
Let's take a look at the view files that we need.
I have to tell you that I just included the body part of the HTML documents. They all also include bootstrap to make the output a bit prettier. You can take a look at the full version on the Github repository.
  
**'new.html'**
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/57rquz5g8lj1i9pdq2vi.png)
  
It just includes corresponding fields for 'title', 'director', and 'year' fields.
  

**'index.html'**
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jqxjq09ok4nzy9ujq8u5.png)
  
Here we list the movies by passing through the '@movies' list.  

**'show.html'**
  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8lolwz7pciqfi8eryuey.png)
  
This file just shows the movie info that was passed to this file within the '@movie' object.
  
# Thank you
  
I have to thank you all, dear friends, for your patience. I tried to keep it short but to make it clearer I needed to divide it into two parts. I hope so much that you fully understood what is going in the project.
You can find the full code on the Github repository here: [Sinatra-movies-demo](https://github.com/eminarium/sinatra-movies-demo)  
  
Please send me your feedback. Let me know what you liked and what you did not. I would be very glad to hear them and goodbye till we meet in the next article.
BYE !!!