Ruby on Rails – Introductory Workshop¶ ↑

October 30th 2015 - VIA University Horsens

By Ásgeir Gunnarsson and Lars Hoeg.

See the slides from this workshop.

Getting started¶ ↑

A laptop with Ruby on Rails installed and a good code editor is a prerequisite for this workshop.

There are a few guides to help you install Ruby, Rails and other tools needed;

RailsBridge Installfest
RailsInstaller and SSL error workaround (in case you get this error after installation)

As code editor one example is Sublime Text 2.

Case: Suggestotron¶ ↑

The case we used as base for the workshop is RailsBridge Intro to Rails - Suggestotron, starting from Getting Started section.

This Github project is a quick run-through of the case used in our workshop, plus a few suggestions for further development.

Note: If you haven’t installed Node.js (or another Javascript interpreter), you may see an error. Remove the javascript_include_tag-line (line 6) in the application layout file app/views/layouts/application.html.erbfor now if this is the case.

You can follow my track commit-by-commit as I walk through this guide, and making the extra additions explained below.

Further steps¶ ↑

Super Simple Styling with Twitter Bootstrap¶ ↑

Adding Twitter Bootstrap is a very simple way to make even a quick testing project much more appealing in a matter of seconds. Here we will use the bootstrap-sass gem.

First, edit your project’s Gemfile and add:

gem 'bootstrap-sass'

and run bundle install.

Note: You will have to restart the Rails server after adding gems to your Gemfile.

Then change the application css file to scss:

git mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

(you have been using git for each step along the way, right?)

Add to app/assets/stylesheets/application.scss:

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

and to app/assets/javascripts/application.js below //= require jquery:

//= require bootstrap-sprockets

When you reload the page in your browser, you should notice the font just changed, but not a whole lot more. Yet…

Remove Rails’ default scaffolding stylesheet as it will get in our way!

git rm app/assets/stylesheets/scaffolds.scss

Now edit your application layout app/views/layouts/application.html.erb and replace

<%= yield %>

with

<div class="container">
  <%= yield %>
</div>

Edit your index view app/views/topics/index.html.erb and add a few Bootstrap-classes; change:

<table>

<table class="table">

and:

<td><%= button_to '+1', upvote_topic_path(topic), method: :post %></td>

<td><%= button_to '+1', upvote_topic_path(topic), method: :post, class: "btn btn-success" %></td>

and:

<%= link_to 'New Topic', new_topic_path %>

<%= link_to 'New Topic', new_topic_path, class: "btn btn-primary" %>

Reload the page and enjoy!

Edit the application layout app/views/layouts/application.html.erb and add the following HTML code right after the <body> tag:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Suggestotron app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/topics">Topics</a></li>
      </ul>
    </div>
  </div>
</nav>

and just before the </body> tag add:

<footer class="well">
  <div class="container">
    Ruby on Rails Workshop -- VIA University Horsens -- October 30th 2015
  </div>
</footer>

We then need a few extra bits of styling to set the page right; edit /app/assets/stylesheets/application.scss and append:

body { padding-top: 60px; }
footer { margin-top: 40px; }

Refresh your browser to see the result.

Upload an image¶ ↑

Wouldn’t it be nice if you could just upload a picture to show with each Topic? The carrierwave gem is one option here.

First, edit Gemfile and add:

gem 'carrierwave'

and run bundle install.

We then need to generate an Uploader (it is just a Ruby class; take a look under app/uploaders):

rails generate uploader Picture

Btw, don’t forget to restart the server.

We also need a new field on Topic to put information about the image; let’s call it picture:

rails g migration add_picture_to_topics picture:string
rake db:migrate

The Topic model needs to know how to handle an uploaded image; for this we add the following line to app/models/topic.rb:

mount_uploader :picture, PictureUploader

As Rails 4+ uses attribute whitelisting in hte controllers to prevent updating fields you are not allowed to, we also need to add the picture field here; open app/controllers/topics_controller.rb and near the bottom of the file change:

def topic_params
  params.require(:topic).permit(:title, :description)
end

def topic_params
  params.require(:topic).permit(:title, :description, :picture)
end

We then need to update the form with a file upload field, so open app/views/topics/_form.html.erb in your editor and add below the other input fields:

<div class="field">
  <%= f.label :picture %><br>
  <%= f.file_field :picture, accept: "image/*;capture=camera" %>
</div>

Uploading a file via HTTP(s) requires a a multipart HTTP request, we also need to change the line at the top:

<%= form_for(@topic) do |f| %>

<%= form_for @topic, :html => {:multipart => true} do |f| %>

Oh, and we need to show the image also. Open the show view app/views/topics/show.html.erb and add:

<%= image_tag(@topic.picture_url, :width => 200) if @topic.picture.present? %>

You also want to avoid the uploaded files being added to your git repository, so add to .gitignore:

public/uploads

Add image thumbnail on Topic index¶ ↑

It would also be nice to see a thumbnail on the Topic index page. So far we the uploaded image is just saved under ‘public/uploads`, but we could easily add post processing such as scaling the image to different formats etc.

Add the ‘mini_magick’ gem (you should know how by now).

We need to tell the uploader to resize the image to a new format. Edit app/uploaders/picture_uploader.rb. Uncomment the line include CarrierWave::MiniMagick and add just below:

version :thumb do
  process :resize_to_fill => [50, 50]
end

Edit app/views/topics/show.html.erb and add a dolumn the the table:

<th>Title</th>
...

<th>Title</th>
<th>Photo</th>
...

and

<td><%= link_to topic.title, topic %></td>
...

<td><%= link_to topic.title, topic %></td>
<td><%= image_tag topic.picture_url(:thumb) if topic.picture? %></td>
...

Note: Any previously uploaded images will not have this size yet, but it will happen automatically for newly uploaded images. The documentation will tell how to create the missing sizes/versions for existing images (hint: look for recreate_versions! method).

Further improvements¶ ↑

How to get on from here?¶ ↑

Learning Ruby¶ ↑

There are many great ressources on the internet for learning the Ruby language; I’ll point you to a few just to get a head start;

Learning Rubu on Rails¶ ↑

There are also a huge number of online resources, e.g.;

Credits¶ ↑

RailsBridge
RailsGirls
… and the great documentation provided by so many open source ruby gems out there!

License¶ ↑

This project is released under the MIT license:

www.opensource.org/licenses/MIT

lhoeg / ruby_rails_workshop Goto Github PK

ruby_rails_workshop's Introduction

Ruby on Rails – Introductory Workshop¶ ↑

Getting started¶ ↑

Case: Suggestotron¶ ↑

Further steps¶ ↑

Super Simple Styling with Twitter Bootstrap¶ ↑

Nav-bar and footer¶ ↑

Upload an image¶ ↑

Add image thumbnail on Topic index¶ ↑

Further improvements¶ ↑

How to get on from here?¶ ↑

Learning Ruby¶ ↑

Learning Rubu on Rails¶ ↑

Credits¶ ↑

License¶ ↑

ruby_rails_workshop's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Jobs