Movie Comparison Website in Ruby on Rails
Building self-joins and triple-joins in Ruby on Rails — Part 3
This article is a continuation of Building Self-Joins and Triple-Joins in Ruby on Rails. Whereas the last article dealt with creating the back end, this article is specifically about getting that data onto the screen. Also known as front end.
The Series
Reviewing the series as a whole:
Part 1
The Coddfather: Relational Database Fundamentals
We asked: “What, pray tell, is a relational database?” We answered that question while exploring one-to-many, many-to-many, and many-to-many self-join relationships.
Part 2
Building Self-Joins and Triple-Joins in Ruby on Rails
We implemented a self-join relationship using Ruby on Rails, then implemented a triple-join relationship in the context of a user-based movie comparison application.
Part 3 (this article)
Movie Comparison Website in Ruby on Rails
We’ll draw upon the logic we cemented in part 2, to display movie comparison information on several inter-related web pages. We’ll then create methods that allow us to create new movie comparisons for individual users.
Our goal, by the end of this article, is to see all movies a particular user deems “superior” and all of those they called “inferior”, displayed on a single page.
We also want to be able to add to this list at will:
Both part 1 and part 2 were full of explanation.
Part 3 is the opposite. I want you to see the work you just did (creating a triple-join) on a web page as fast as possible. For a more detailed explanation of what’s going on when we create routes, views, and controllers in Rails, visit this article: Rails MVC.
If you’d like to see a styled version of the above, visit this website to search movies, create favorites, compare movies, and get recommendations:
Website (may take a few seconds for Heroku to load): MyMDb
Road Map
That said, here is our road map:
- Spin up a Rails server.
- Create an index page that displays all users.
- Display all comparisons related to a particular user on a show page.
- Create corresponding movie index and show pages.
- Build a “Create” form for new comparisons.
Let’s do it.
Access Rails Server
Navigate to the folder that contains the project we created in part 2. For me:
$ cd Desktop/Dev/movieComparisonApp
Note: The GitHub repo associated with this project is available here: exampleMovieComparisonApp.
If you have not created your back end, this article will not be helpful. Make sure your data is all set before moving forward.
Spin up a server:
$ rails s
Visit the localhost port defined in the above command line response. In your URL bar, type:
localhost:3000
You should see:
Create Users Index Page
In your terminal, use the Rails generator to create a controller and associated views folder:
$ rails g controller Users
Here is your controller:
Here is your user’s views folder:
Navigate to your config/routes.rb file and define an index route for ssers:
Create the corresponding controller action in your users controller:
Create the corresponding view in your newly minted views/users folder:
Return to your terminal and restart your server with rails s. You should now see the text “We’re live.” at this URL:
localhost:3000/users
Our goal was to get all users displayed on this page. Let’s go make that happen in the controller and views.
Controller:
View views/users/index.html.erb:
Now, when we revisit the URL localhost:3000/users, we should see:
Create User Show Page With Their Comparisons
First, define the new show route in config/routes.rb:
Create the corresponding show controller action in your users controller:
Create the corresponding view:
views/users/show.html.erb
Let’s test that we can access Christopher Nolan’s page by typing into our URL:
localhost:3000/users/1
You should see:
Now let’s display Christopher’s information, as opposed to a static screen with irrelevant text.
We’ll do this using a table format.
Note: We are utilizing the triple-join we already created in part 2 to retrieve inferior and superior movies associated with a particular user:
If you refresh your page, you should now see:
If you visit the second user’s page at localhost:3000/users/2, you should see different data displayed:
For the sake of clarity, before we move on, let’s link the index and show pages so we can travel easily back and forth from all users (index) to specific users (show).
app/views/users/index.html.erb:
Which results in:
app/views/users/show.html.erb:
Which results in:
Create Corresponding Movie Index and Show Pages
As we just went through this process with users, I’ll skip some steps in this section. First, draw both new movie routes in config/routes.rb:
Generate movies controller from the terminal:
$ rails g controller Movies
Then, define index and show controller actions:
Write the corresponding views in the newly minted app/views/movies/ folder.
Index:
Show:
When we visit localhost:3000/movies, we should see:
When we visit localhost:3000/movies/1, we should see:
Let’s use the instance variables we already created in our controller actions to display information on each of these view pages.
Note: We are using the .fans and .haters methods from the triple-join relationship we created in part 2. We use these two methods to retrieve users who either liked or didn’t like an individual movie (in comparison to another movie).
Index page:
Results:
Show page:
Results for localhost:3000/movies/1:
We’ve now demonstrated the basics. However, if you visit the show page for Citizen Kane (movie 3), you’ll notice that the Fans and Haters lists contain the same people:
We can imagine that, as the number of comparisons increases, the information presented on the show page will become less and less helpful.
Let’s make it more helpful:
The updated HTML provides a more descriptive list:
Build a Create Form for New Comparisons
This is the final step.
Thus far, we’ve only used the Rails relationships we created in part 2 to connect and display related data. In this next section, we’ll bake a “new comparison” form into your user show page.
Define a Create route for our new comparisons controller (which we’re about to generate) in config/routes/rb:
Now, let’s generate that controller using $ rails g controller Comparisons:
Delete the auto-generated folder app/views/controllers. We won’t need it.
Define an empty create action which we will fill in momentarily:
Move over to the users controller and create instance variables for movies and a new comparison, in addition to the individual user.
These instance variables will allow us to easily create a new comparison form. Let’s make that now.
Because we defined @comparisonas a new instance of a comparison in the users controller and made the variable accessible from the user show page, we can create a form_for @comparisonwhich will automatically seek out the create action in the comparison controller.
We utilize the @movies instance variable to create two collection_select helper methods. Each collection selected creates a drop-down list of all movies in the database.
The form:
Note the additional hidden field, which will carry with it the ID of the user whose page we are looking at.
The full show page, which includes the form at the bottom:
The result in our browser should look like this:
At this point, we can choose two movies that exist in the database from a drop-down and submit the form to the create action in the comparison controller.
However, nothing will happen, as that action is empty.
Let’s fill the create action out so that we create a new comparison with user_id equal to the hidden value being passed through the form, then the inferior_movie_id and superior_movie_id based on the submitted form’s drop-down information.
So long as all the IDs are in the correct spots, the triple-join will function properly and a new comparison instance should show up on the users page immediately.
Let’s see this in action by creating the comparison of The Dark Knight and Pulp Fiction, according to Christopher Nolan:
Conclusion
If you made it this far, well done. The page doesn’t look pretty. But that wasn’t the point of this exercise.
The point was to explore the use of comparative self-joins and triple-joins via Ruby on Rails, then to see them in action in a browser. With some CSS decoration, this app could be a lot of fun to use.
Click the below link to see a slightly more sophisticated version of the above:
Website: MyMDb
You can create a user, save movies to your favorites, create new comparisons, and eventually get movie recommendations that are relevant to your preferences!
(Note: It may take ten seconds for Heroku to load up the website. Once up, it should hum.)
Github For MyMDb
I hope this article series was helpful. If you have any questions or suggestions, I would love to hear them.
Github Tutorial Repo
For the full GitHub repo associated with the app we created in parts 2 and 3, you can visit this link: exampleMovieComparisonApp/
That’s it! Cheers to you. Have an awesome day.
Happy coding,
Jackson
