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
In this part, we’ll do the following:
- Sign up from the sign-up page.
- Add username attribute to the User model.
- Add not_null constraint to username attribute for User model
- Edit styling for the sign-up page
- Fix errors for sign-ups
- Edit styling for the User Edit page
- Fix errors for User Edit page
- 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.
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.
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:
We can verify the username attribute generated in schema.rb:
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, falseend
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:
Now if we refresh http://localhost:3000/users/sign_up, we can see that the sign-up page looks totally different.
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.
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:
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" }
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.
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.
Let’s click user123 (or whatever your username is). and we’ll see an edit user page like in Fig 13.
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).
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):
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.
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
In the Event model and User model, add the highlighted part shown in Fig 18 and in Fig 19.
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.
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.
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.
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.