Introduction

QR Codes are useful for a number of different data types. You can easily store URLs, text, and much more in a simple barcode that is easily readable by most smart phones. In this article we will show you how to generate QR codes from within your application. Let's get started.

Application Setup

To generate the QR codes we will use rqrcode-with-patches gem. The rqrcode-with-patches gem is an improved version of the original rqr-code gem. Add the line below to your gemfile to use this gem now.

Gemfile:

gem 'rqrcode-with-patches', '~> 0.5.4'

Now run a bundle install to install the gem.

Terminal Commands:

bundle install

Great, now we need to create a controller called QRCodes with 2 methods, new and create. The new method on the QRCodes controller will display a form asking us to input the data we wish to embed within the QR Code, and the create method will create the QR Code and return the result. Run the command below to create this now.

Terminal Commands:

rails g controller qr_codes new create

Great, now let's modify our routes file to properly set up the routes for the controller we just created. Modify your routes file so that it looks like the code listed below.

config/routes.rb:

Rails.application.routes.draw do
  resources :qr_codes, only: [:new, :create]
  root to: "qr_codes#new"
end

Great, now let's add a line to our environment.rb file to include the rqrcode-with-patches library in our project. Modify your environment.rb file so that it looks like the code listed below.

config/environment.rb:

# Load the Rails application.
require 'rqrcode'
require File.expand_path('../application', __FILE__)

# Initialize the Rails application.
Rails.application.initialize!

Great, now let's add in our controller code. Open up the QRCodes controller and modify it so that it looks like the code listed below.

app/controllers/qr_codes_controller.rb:

class QrCodesController < ApplicationController
  def new
  end

  def create
    @qr = RQRCode::QRCode.new( qr_code_params[:text], size: 4)
  end

private 
  def qr_code_params
    params.require(:qr_code).permit(:text)
  end
end

Now let's create our views, first open up the new view for the QRCodes controller and modify it so that it looks like the code listed below.

app/views/qr_codes/new.html.erb:

<%= form_for :qr_code, url: qr_codes_path do |f| %>
	<%= f.label :text %>
	<%= f.text_field :text %>
	<%= f.submit %>
<% end %>

Now let's add in some code for the create view. Open up the create view for the QRCodes controller and modify it so that it looks like the code listed below.

app/views/qr_codes/create.html.erb:

<table class="qr-code">
<% @qr.modules.each_index do |x| %>
  <tr>
  <% @qr.modules.each_index do |y| %>
   <% if @qr.dark?(x,y) %>
    <td class="black"/>
   <% else %>
    <td class="white"/>
   <% end %>
  <% end %>
  </tr>
<% end %>
</table>
<br />
<br />
<%= link_to "New QR Code", new_qr_code_path %>

The QR Code generated does not actually look like a QR Code until we generate it (see the code above), lets add some CSS to our application.css to make it look like a real QR Code. Modify your application.css file so that it looks like the code listed below.

app/assets/stylesheets/application.css:

/*
 *= require_tree .
 *= require_self
 */

table.qr-code {
  border-width: 0;
  border-style: none;
  border-color: #0000ff;
  border-collapse: collapse;
}
table.qr-code td {
  border-width: 0;
  border-style: none;
  border-color: #0000ff;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  width: 15px;
  height: 15px;
}
table.qr-code td.black { background-color: #000; }
table.qr-code td.white { background-color: #fff; }

Now if you start the Rails Development Server and navigate to http://localhost:3000 you will see that you are able to quickly and easily generate QR codes. For more information, check out the rqrcode-with-patches GitHub page. That's it! Thanks for reading!