Day 1 Round up

Edit the root route

Now that we have a working prototype, let's make it accessible to new users.

If you go now to localhost:3000, or if you had your app not on your local computer, but on your internet domain, you still see the default Rails welcome message.

We would like instead to see localhost:3000/cases page. Thus, if the user is signed in, they will see the cases page. Otherwise, they will be prompted to sign in, according to the before_filter we applied in the cases controller.

Let's tell our app what route to take by default, or as it is called in rails, where is the root of our app. In /config/routes.rb before the end keyword type:

root to: "cases#index"

This will send you by default to localhost:3000/cases, which is the address linked to the action cases#index.

In general, to verify which action leads to which browser path, type

$ rake routes

in the terminal. Now you can see that / is the address linked to cases#index.

Add some style

The app is great, it works well, but it doesn't look good at all! It's time to improve this.

Bootstrap

There are many ways to add colors, styles and other features to your pages. We will use the simplest one – a library called Bootstrap.

You can read more about it on the Bootstrap website. To see some websites built using Bootstrap, visit the Gallery.

Adding bootstrap to your app

In the Rails world, Bootstrap comes in the form of a gem, like Devise. Open the Gemfile and add the following:

gem 'bootstrap-sass'

As with Devise, we have to install the gems. Save the file, open the terminal and type:

$ bundle install

Import Bootstrap styles in app/assets/stylesheets/application.scss:

@import "bootstrap-sprockets";
@import "bootstrap";

Note: if the file is not app/assets/stylesheets/application.scss, but app/assets/stylesheets/application.css, rename it using Sublime Text by clicking the right mouse button and selecting Rename.

In case you have your server running, stop it Ctrl+C and then start it again rails server. You need to do this in order to apply the changes you just did.

Let’s style something!

Open your cases index view /app/views/cases/index.html.erb and edit it to the following:

<%=link_to("Create a new case", new_case_path) %>

<div class="container">
<h1>Cases</h1>
<ul>
  <% Case.all.each do |c| %>
    <div class="panel panel-default">
      <p> <%= "Case id: " +  c.id.to_s %> </p>
      <p> <%= "Created by: " + c.user.email %> </p>
      <p> 
        <% if current_user == c.user %>
          <%=link_to("Delete", case_path(c), method: :delete) %>
        <% end %>
      </p>
      <p> <%= image_tag(c.image_link, width: 600 ) %> <p>
    </div>
  <% end %>
</ul>
</div>

What we did was adding a couple of HTML tags to define containers and panels. You can read more about what tags are by browsing the Bootstrap documentation.

We also restricted the width of the image, using the width: 600 parameter in image_tag. This helps us avoid images overflowing the screen.

Now the layout is slightly more appealing:

Let's try something else. For instance, let's add a label to any post.

To do this, we got to the Bootstrap documentation and find the labels section. This is where we see the code:

<h3>Example heading <span class="label label-default">New</span></h3>

To display the user's email as a label, we have to adapt this example to our context. So, instead of the row:

<p> <%= "Created by: " + c.user.email %> </p>

we would use instead:

<span class="label label-default"><%= "Created by: " + c.user.email %></span>

Save the file and refresh the page. Now we have a nice label wrapped around the user's email.

Your turn!

Use the same approach to anything in your pages. If you like a component, but don't know how to use it, feel free to ask in our facebook group.

Review

Congratulations! You have your own app up and running There have been many steps, but it's done!

What we did

We learned the following:

variables, conditionals and functions
libraries
using the command line
Ruby and Ruby on Rails

And we created:

.html and .html.erb pages
authentication with Devise
databases, models and associations
database migrations
controllers, controller actions and views
links and forms
ways to view, create and delete posts from the browser and rails console
access restrictions
styling with Bootstrap

Not bad for a first day. We are also adding one extension: allowing users to edit content and a few quick tips that will help you improve the appearance of your application.

As with a new language, taking ten minutes of practice every day will get you a long way. Please take the time to check the homework assignments and extra tasks we've prepared.

Day 1 final touches