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
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
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
Add some style
The app is great, it works well, but it doesn't look good at all! It's time to improve this.
There are many ways to add colors, styles and other features to your pages. We will use the simplest one – a library called Bootstrap.
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:
As with Devise, we have to install the gems. Save the file, open the terminal and type:
$ bundle install
Import Bootstrap styles in
@import "bootstrap-sprockets"; @import "bootstrap";
Note: if the file is not
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.
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.
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
- using the command line
- Ruby and Ruby on Rails
And we created:
- 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.