Complete Rails 6 Example — Part 3

What are we trying to achieve?

In this third part of the Complete Rails 6 Example Guide, we already have a Dockerized Rails 6 app, with a complete authentication mechanism and Bootstrap 4 styles.
Now we want to add our todos to let the user create, read, update, and delete (CRUD acronym).

Adding our Todos (Tasks)

Using Rails 6, this step of adding any functionality will be a little bit easier even having TSS in mind, thanks to the tools it puts in our hands. So let’s explore the steps to achieve it:

> docker-compose run --rm web rails g scaffold task name:string completed:boolean

Then, we will need to change permissions if we are on Linux since the prior command created some files with root privileges.

> sudo chown -R $USER:$USER .

Rails will know how to link the user and the task because of its convention names, revealing an important good practice called “Convention over Configuration”.

Now we will run migrations, as before:

> docker-compose run web rake db:migrate

2 of the newly created files contain notices, and because we already defined notices and alerts in the application HTML file, we will remove the lines “<p id=”notice”><%= notice %></p>” from app/views/tasks/show.html.erb and app/views/tasks/index.html.erb.

Now we have new routes, so we want our application main root to be our tasks list, let’s change it. In the file config/routes.rb, replace “root to: “pages#home” to:

root to: “tasks#index”

Remember when we added home.hmtl.erb? Well, now we need the same validation here, so the file app/views/tasks/index.html.erb should look like this (Note: In the code block below you can see I intentionally added some Bootstrap 4 styles):

<% if current_user %>
 <%= link_to "Sign Out", destroy_user_session_path, method: :delete %>
 
 <h1>Tasks</h1>
 
 <table>
   <thead>
     <tr>
       <th>Name</th>
       <th>Completed</th>
       <th colspan="3"></th>
     </tr>
   </thead>
 
   <tbody>
     <% @tasks.each do |task| %>
       <tr>
         <td><%= task.name %></td>
         <td><%= task.completed %></td>
         <td><%= link_to 'Show', task %></td>
         <td><%= link_to 'Edit', edit_task_path(task) %></td>
         <td><%= link_to 'Destroy', task, method: :delete, data: { confirm: 'Are you sure?' } %></td>
       </tr>
     <% end %>
   </tbody>
 </table>
 
 <br>
 
 <%= link_to 'New Task', new_task_path %>
 
<% else %>
   <h1>Sign in</h1>
   <%= link_to "Sign In", new_user_session_path %>
   <%= link_to "Sign Up", new_user_registration_path %>
<% end %>

Now after a reload (and guessing you’ve created your user and logged in), we should see our tasks list.

Styling

Now we have a complete working example of a simple todo app. Let’s add some Bootstrap 4 styles. To avoid boring you with CSS classes here, I’ll let you dive into GitHub, you’ll find the tag where all the changes reside. You can look into the following files:

• app/views/tasks/_form.html.erb
• app/views/tasks/edit.html.erb
• app/views/tasks/index.html.erb
• app/views/tasks/new.html.erb
• app/views/tasks/show.html.erb

So it will look like this:

Tada! In order to go through new changes to our To-dos, where we can apply TDD, please continue with the next part of this guide.