Building Ribbit in Rails

jieforest

Step 5: Writing The User UI

Building a UI in Rails means that we need to be aware of the routes that render our views. If you openconfig/routes.rb, you’ll find a line like this:

1. resources :users

复制代码

This was added to the routes.rb file when we generated the user resource, and it sets up the default REST routes. Right now, the route we’re interested in is the route that displays the form for creating new users: /users/new. When someone goes to this route, the new method on the users controller will execute, so that’s where we’ll start.

The users controller is found in app/controllers/users_controller.rb. It has no methods by default, so let’s add the new method within the UsersController class.

1. def new
   
2.     @user = User.new
   
3. end

复制代码

jieforest

As you know, Ruby instance variables begin with @ – making @user available from inside our view. Let’s head over to the view by creating a file, named new.html.erb in the app/views/users folder. Here’s what goes in that view:

1. <img src="/gfx/frog.jpg">
   
2. <div class="panel right">
   
3.   <h1>New to Ribbit </h1>
   
4.   <%= form_for @user do |f| %>
   
5.     <% if @user.errors.any  %>
   
6.       <ul>
   
7.         <% @user.errors.full_messages.each do |message| %>
   
8.           <li><%= message %></li>
   
9.         <% end %>
   
10.       </ul>
    
11.     <% end %>
    
12.     <%= f.text_field :email, placeholder: "email" %>
    
13.     <%= f.text_field :username, placeholder: "username" %>
    
14.     <%= f.text_field :name, placeholder: "name" %>
    
15.     <%= f.password_field :password, placeholder: "password" %>
    
16.     <%= f.password_field :password_confirmation, placeholder: "password" %>
    
17.     <%= f.submit "Create Account" %>
    
18.   <% end %>
    
19. </div>

复制代码

jieforest

This is actually the view that serves as the home page view, when a user is not logged in. We use the form_for helper method to create a form and pass it the @user variable as a parameter. Then, inside the form (which is inside the Ruby block), we first print out errors. Of course, there won’t be any errors on the page the first time around.

However, any input that fails our validation rules results in an error message that is displayed in a list item.

Then, we have the fields for our user properties. Since this design doesn’t have any labels for the text boxes, I’ve put what would be label text as the fields’ placeholder (using the placeholder attribute). These won’t display in older browsers, but that’s not relevant to our main goal here.

Now, what happens when the user clicks the “Create Account” button  This form will POST to the /usersroute, resulting in the execution of the create method in the users controller. Back to that controller, then:

1. def create
   
2.   @user = User.new(params[:user])
   
3.   if @user.save
   
4.     redirect_to @user, notice: "Thank you for signing up for Ribbit!"
   
5.   else
   
6.     render 'new'
   
7.   end
   
8. end

复制代码

jieforest

We start by creating a new user, passing the new method the values from our form. Then, we call the savemethod. This method first validates the input; if the data is in the correct format, the method inserts the record into the database and returns true. Otherwise, it returns false.

If @user.save returns true, we redirect the viewer to… the@user object itself?
This actually redirects to the path for that user, which will be /users/. If @user.save returns false, we re-render the /users/new path and display any validation errors. We also pre-populate the form fields with the the user’s previously provided information. Clever, eh?

Well, if we direct the viewer to their new user profile, we need to create that page next. This triggers theshow method in the users controller, so we’ll add that first:

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

复制代码

jieforest

This method looks at the id number in the route (for example, /users/4) and finds the associated user in the database. Just as before, we can now use this @user variable from the view.

Create the app/views/users/show.html.erb file, and add the following code:

1. <div id="createRibbit" class="panel right">
   
2.     <h1>Create a Ribbit</h1>
   
3.     <p>
   
4.     <form>
   
5.         <textarea name="text" class="ribbitText"></textarea>
   
6.         <input type="submit" value="Ribbit!">
   
7.     </form>
   
8.     </p>
   
9. </div>
   
10. <div id="ribbits" class="panel left">
    
11.     <h1>Your Ribbit Profile</h1>
    
12.     <div class="ribbitWrapper">
    
13.         <img class="avatar" src="<%= @user.avatar_url %>">
    
14.         <span class="name"><%= @user.name %></span> @<%= @user.username %>
    
15.         <p>
    
16.         XX Ribbits
    
17.         <span class="spacing">XX Followers</span>
    
18.         <span class="spacing">XX Following</span>
    
19.         </p>
    
20.     </div>
    
21. </div>
    
22. <div class="panel left">
    
23.     <h1>Your Ribbits</h1>
    
24.     <div class="ribbitWrapper">
    
25.         Ribbits coming . . .
    
26.     </div>
    
27. </div>
    

复制代码

jieforest

You’ll notice that we have a few placeholders in this view. First, there’s the form for creating a new ribbit. Then there’s the follower, following numbers, and the list of your ribbits. We’ll come to all this soon.

There’s one more thing to do in this step: we want the root route (/) to show the new user form for the time being. Open the config/routes.rb file again, and add this line:

1. root to: 'users#new'

复制代码

This simply makes the root route call the new method in the users controller. Now, we just need to delete thepublic/index.html file which overrides this configuration. After you delete that, run the following in the command line:

1. rails server

复制代码

You could also run rails s to achieve the same results. As you would expect, this starts the rails server.

jieforest

You can now point your browser to localhost:3000/, and you should see the following:

jieforest

Now, fill in the form and click “Create Account.” You should be sent to the user profile, like this:



Great! Now we have our user accounts working. Let’s commit this:

1. git add .
   
2. git commit -m 'User form and profile pages'

复制代码

jieforest

Step 6: Adding Session Support

Even though we implemented the user feature, a user cannot log in just yet. So, let’s add session support next.

You may have recognized the way we’ve created user accounts.

I’ve taken this general method from Railscast episode 250. That episode also demonstrates how to create session support, and I’ll use that approach for Ribbit.

We start by creating a controller to manage our sessions. We won’t actually store sessions in the database, but we do need to be able to set and unset session variables. A controller is the correct way to do that.

1. rails generate controller sessions new create destroy

复制代码

Here, we create a new controller, called sessions. We also tell it to generate the new, create, anddestroy methods. Of course, it won’t fill in these methods, but it will create their “shell” for us.

Now, let’s open the app/controllers/sessions_controller.rb file.

jieforest

The new method is fine as is, but the create method needs some attention. This method executes after the user enters their credentials and clicks “Log In.” Add the following code:

1. def create
   
2.     user = User.find_by_username(params[:username])
   
3.     if user && user.authenticate(params[:password])
   
4.         session[:userid] = user.id
   
5.         redirect_to rooturl, notice: "Logged in!"
   
6.     else
   
7.         flash[:error] = "Wrong Username or Password."
   
8.         redirect_to root_url
   
9.     end
   
10. end
    

复制代码

We use the find_by_username method on the User class to retrieve the user with the provided username. Then, we call the authenticate method, passing it the password. This method was added as part of theuse_secure_password feature.

If the user’s credentials pass muster, we can set the user_id session variable to the user’s ID. Finally, we redirect to the root route with the message “Logged in!”.