Building Ribbit in Rails

jieforest

There are three areas that we change with this code. First, we remove the HTML form at the top and replace it with a call to the form_for helper function. Of course, it makes sense that we only need a text area for the content (we already know the current user’s ID).

Note that form_for accepts a @ribbit as the parameter, and we need to add that object to the users_controller#show method (app/controllers/users_controller.rb):

1. def show
   
2.     @user = User.find(params[:id])
   
3.     @ribbit = Ribbit.new
   
4. end
   

复制代码

Notice that we wrap the whole form section (the <div id="createRibbit">) with an if statement. If there’s no current user (meaning no one is logged in), we won’t show the ribbit form.

jieforest

Next, we want to display the number of the user’s ribbits. That number appears just above their follower count. Remember that our user instance has a ribbits property. So, we can replace our filler text with this:

1. <%= @user.ribbits.size %> Ribbits

复制代码

We need to show the user’s ribbits. We can loop over that same ribbits array, and display each ribbit in turn. That’s the final part of the code above.

jieforest

Lastly, (at least as far as ribbit creation is concerned), we need to modify the create method in the ribbits controller (app/controllers/ribbits_controller.rb. The method executes when the user clicks the “Ribbit!” button.

1. def create
   
2.   @ribbit = Ribbit.new(params[:ribbit])
   
3.   @ribbit.userid = current_user.id</p>
   
4.   if @ribbit.save
   
5.       redirect_to current_user
   
6.   else
   
7.       flash[:error] = "Problem!"
   
8.       redirect_to current_user
   
9.   end
   
10. end
    

复制代码

I know the “Problem!” error message isn’t very descriptive, but it will do for our simple application. Really, the only error that could occur is a ribbit longer than 140 characters.

So, give it a try: start the server (rails server), log in, go to your profile page (http://localhost:3000/users/, but of course, any user profile page will do), write a ribbit, and click “Ribbit!”. The new ribbit should display in the ribbit list on your profile page.

jieforest

Okay, let’s commit these changes:

1. git add .
   
2. git commit -m 'ribbit functionality created'
   

复制代码

Step 8: Creating the Public Tweets Page

Next up, we want to create a public page that includes all the ribbits made by all users. Logically, that should be the ribbits index view, found at /ribbits. The controller method for this is ribbits_controler#index. It’s actually a very simple method:

1. def index
   
2.     @ribbits = Ribbit.all include: :user
   
3.     @ribbit = Ribbit.new
   
4. end

复制代码

jieforest

The first line fetches all the ribbits and their associated users, and the second line creates the new ribbit instance (this page will have a ribbit form).

The other step, of course, is the template (app/view/ribbits/index.html.erb). It’s similar to the user profile template:

1. <% if current_user %>
   
2. <div id="createRibbit" class="panel right">
   
3.     <h1>Create a Ribbit</h1>
   
4.     <p>
   
5.     <%= form_for @ribbit do |f| %>
   
6.         <%= f.textarea :content, class: 'ribbitText' %>
   
7.         <%= f.submit "Ribbit!" %>
   
8.     <% end %>
   
9.     </p>
   
10. </div>
    
11. <% end %>
    
12. <div class="panel left">
    
13.     <h1>Public Ribbits</h1>
    
14.     <% @ribbits.each do |ribbit| %>
    
15.         <div class="ribbitWrapper">
    
16.             <a href="<%= user_path ribbit.user %>">
    
17.             <img class="avatar" src="<%= ribbit.user.avatar_url %>">
    
18.             <span class="name"><%= ribbit.user.name %></span>
    
19.             </a>
    
20.             @<%= ribbit.user.username %>
    
21.             <span class="time"><%= time_ago_in_words(ribbit.created_at) %></span>
    
22.             <p> <%= ribbit.content %> </p>
    
23.         </div>
    
24.     <% end %>
    
25. </div>

复制代码

jieforest

In this template, the avatar image and the user’s name are surrounded by a link that points to the user’s profile page. Let’s also add a link to the public tweets page. Just before the logout link inapp/view/layouts/application.html.erb, add this:

1. <%= link_to "Public Ribbits", ribbits_path %>

复制代码

Finally:

1. git add .
   
2. git commit -m 'added the public ribbits page'

复制代码

jieforest

Next up, we want to relate the User model with this Relationship model, which we do from both sides. First, in the Relationship class (app/models/relationship.rb), we want to add these two lines:

1. belongs_to :follower, classname: "User"
   
2. belongs_to :followed, classname: "User"

复制代码

The first line relates a User record to the follower_id field, and the second line relates a User record to the followed_id field. It’s important to include the class name, because Rails can’t infer the class from the property names (‘follower’ and ‘followed’). It can, however, infer the correct database fields (follower_idand followed_id) from those names.

jieforest

Now, in the User class (app/model/user.rb), we have to first connect each user model to its associated relationships:

1. has_many :follower_relationships, classname: "Relationship", foreign_key: "followed_id"
   
2. has_many :followed_relationships, classname: "Relationship", foreign_key: "follower_id"

复制代码

We need to create two associations, because we have two sets of relationships per user: all the people following them and all the people they follow. And no, those foreign keys shouldn’t be switched. Thefollower_relationship association is responsible for all of your followers. Hence, it needs thefollowed_id foreign key.

Then, we can use those relationships to get to the followers on the other side of them:

1. has_many :followers, through: :follower_relationships
   
2. has_many :followeds, through: :followed_relationships

复制代码

jieforest

These give our user records the followers and followeds methods. They’re both methods that return the arrays of our followers or the people we follow, respectively.
Finally, let’s add two methods to our user model that helps us with the UI:

1. def following  user
   
2.     self.followeds.include  user
   
3. end
   
4. def follow user
   
5.     Relationship.create follower_id: self.id, followed_id: user.id
   
6. end

复制代码

Let’s commit these changes before tweaking the UI.

1. git add .
   
2. git commit -m 'created user relationships infrastructure'

复制代码

jieforest

Now, the UI is all on the user profile pages, which is app/views/users/show.html.erb. We’ll start with something simple: the follower and following count. See where we have this?

1. <span class="spacing">XX Followers</span>
   
2. <span class="spacing">XX Following</span>

复制代码

We’ll replace these placeholder values, like so:

1. <span class="spacing"><%= @user.followers.count %> Followers</span>
   
2. <span class="spacing"><%= @user.followeds.count %> Following</span>

复制代码