How I Have Created an Eventbrite Clone with Ruby on Rails: Part II

This is Part 2 of a series: how to create an EventBrite Clone with Ruby on Rails.

Part I Part III Part IV Part V Part VI Part VII

Photo by Scott Graham on Unsplash

In this part, we’ll do the following:

1. Sign up from the sign-up page.
2. Add username attribute to the User model.
3. Add not_null constraint to username attribute for User model
4. Edit styling for the sign-up page
5. Fix errors for sign-ups
6. Edit styling for the User Edit page
7. Fix errors for User Edit page
8. Add associations between the event creator (as a User) and the event

Please refer to each number to follow this tutorial, or if you are only interested in a part of the tutorial.

Step 1. Create sign-up form.

Start the rails server if you haven’t. Open http://localhost:3000/users/sign_up in your web browser. Enter “user123@gmail.com” or any other email you’d like to use in email, and enter the password in the password and password_confirmation row. Immediately you’ll be redirected to the root_path. You can see the flash message displayed at the top of the page.

Fig 1. After a successfully sign-up

Step 2. Add Username to the User Model

You might realize that in many cases, you wouldn’t want your email address to be exposed in public, so here we will add a username for the user. This is necessary for us because by default, devise only creates a User model with email and password (devise saves the encrypted_password for the sake of security), which can be verified by schema.rb.

Fig 2. users table generated by devise

To add a username attribute for the User model, simply run

rails g migration add_username_to_users username:string 

in the terminal which will automatically generate the migration file for us, as in Fig 4:

Fig 3. command to add the username to users

Fig 4. Automatically generated migration file

We can verify the username attribute generated in schema.rb:

Fig 5. Verify username attribute is added to users table

Now let’s destroy the user we created just now. Enter rails c in the terminal. Then enter User.all to see all the users we have created so far. If you have multiple users created so far, run

users = User.all
users.each do |user|
    user.destroy!
end
users.count

to destroy all users. If you see an empty array at the end, it means that all created users are destroyed.

Step 3. Add not-null constraint to the username.

In the terminal, enter rails g migration add_not_null_to_users.

Then open the newly generated migration file and add the following code. Afterwards, in the terminal run rails db:migrate as shown in Fig 6.

def change
    change_column_null :users, :username, false
end

Fig 6. Command to add not_null to users

Before we make changes for view pages, let’s add another gem called simple_form. Add “simple_form” to your Gemfile, run “bundle install” and then run “rails generate simple_form:install” in the terminal. Restart the rails server afterwards.

Step 4. Modify the styling for sign-up page and user edit page.

First open new.html.erb in app/views/devise/registrations in your IDE, and change the code to look like this:

Fig 6. Styled new.html.erb for sign-ups

Now if we refresh http://localhost:3000/users/sign_up, we can see that the sign-up page looks totally different.

Fig 7. New sign-up page with username

Step 5. Fix errors for Sign-up Pages

One thing to pay attention to is that, now if we create a new user, we will have a failure, shown in Fig 8. This happens because, by default devise gem only allows email and password to be passed as strong parameters, and our newly added username is not.

Fig 8. unpermitted parameter error when creating a new user

To fix this error, we need to create a new registrations controller. For this task, I referred here. Create a RegistrationsController in app/controllers. Then add the following code:

Fig 9. Code to add in RegistrationsController

Then to let the RegistrationsController of devise to use our created RegistrationsController, we need to change the routing of devise, as in Fig 10.

devise_for :users, :controllers => {registrations: "registrations" }

Fig 10. Added RegistrationsController for devise

Restart the server and then see what we have done so far in work. Enter your desired username (I used user123) for username, email, password, and password_confirmation, and then click “Sign Up”. You should be able to see a screen similar to Fig 11, with a flash message on top of the navbar, and your username in the navbar.

Fig 11. Page after you successfully signed up

Step 6. Edit styling for User Edit page

Before we see what the edit user page looks like, we’ll change the styling first. Change the code in edit.html.erb in /app/views/devise/registrations to look like Fig 12.

Fig 12. /app/views/devise/registrations/edit.html.erb

Let’s click user123 (or whatever your username is). and we’ll see an edit user page like in Fig 13.

Fig 13. Updated edit user page

Step 7. Fix errors for the User Edit page

If I try to edit my username at the moment and I just want to enter a new username (here I use user1234), I won’t succeed. Devise will give me errors as shown in Fig 14. I didn't add extra style to the error messages from devise, since I am only showing to you that by default, devise doesn’t allow users to just change username without entering current_password (It doesn’t make sense to enter current_password unless we intend to change password).

Fig 14. Error shown when trying to update username

To fix this, add a new function update_resource in our self-defined RegistrationsController which is in app/controllers, above the two private functions we defined before (I have referred to this post for the solution):

Fig 15. RegistrationsController with a new function

Now if we update our username and we enter just username, we’ll succeed. You’ll see a flash message as in Fig 16, with the new username.

Fig 16. Username can be updated without entering current_password

We are good with our new styles for now. We should do the heavy lifting of the tutorial: adding the associations between an event_creator (as a user) and the event.

Step 8. Add association between the event creator (as a User) and the event

To add associations between an event creator and the events he/she created, we first need to run a rails migration in the terminal. This is to add a foreign key of users (the foreign key here is creator_id) to the events table. Here we need to specify the column name because when we normally add a foreign key in rails, the foreign key would be the same as the model name (in our case, it should be user_id), but here we need to change the foreign key to be different. If you still feel confused, refer here for more explanations.

rails g migration AddCreatorToEvents

Fig 17. Code to add to the migration file

In the Event model and User model, add the highlighted part shown in Fig 18 and in Fig 19.

Fig 18. Code in User model at the moment

Fig 19. Code in Event model at the moment

Then let’s run database migration in the terminal. Run rails db:migrate in the terminal. Upon a successful migration, we will see similar screen as in Fig 20.

Fig. A successful database migration

If you happen to see errors as shown in Fig 21, it means that the database migration failed because we have some events that don’t comply with the not null constraint which we have implemeneted for events.creator_id (which means that any event must have a creator). To solve the error, just enter rails console and destroy the existing events in the database.

Fig 21. Database migration failed because some existing events don’t comply with not null constraint for events.creator_id

Now you should have database migration successfully done. If it’s the case, open the rails console again to verify if the association between the event creator and event is indeed implemented.

Fig 22. Verify that the association between event creator and event is established

So far we have added styling for the sign-up page and user-edit page, added username for the User model, fixed errors for sign-up page and user-edit page, and established association between the event-creator and the event.

A complete list of changes made in this tutorial, please refer here and here.

In Part III of this tutorial, I will show add an EventsController so that when a user creates a new event, that event is automatically associated with the user, how to make the form to let users create a new event, update index page to display all created events, and more importantly, how to appropriately add associations between the User Model and the Event Model so that the user can register for an event, and related changes in controllers and views for the feature.

Thank you for reading this tutorial. If you have questions or suggestions, please leave me a comment.