Rails: CarrierWave file uploads

CarrierWave bootstrapCarrierWave file uploads

Installing CarrierWavein your Gemfile

gem 'carrierwave'

CarrierWave provides a generator called uploader to do this to which we pass the name we want to give our uploader, in this case image.

rails g uploader image

edit your show.html.erb which become

Next we’ll need to add the uploader to the Painting model.

rails g scaffold Painting name:string image:string

Next we’ll add the uploader to the Painting model which is done by calling the mount_uploader method

class Painting < ActiveRecord::Base
    
  attr_accessible :name, :image
  mount_uploader :image, ImageUploader
end

and then in your app/views/paintings/_form.html.erb edit your code, which become

  <div class="control-group">
    <%= f.label :image, :class => 'control-label' %>
    <div class="controls">
        <%= f.file_field :image, :class => 'text_field' %>
   </div>
  </div>

edit your show.html.erb which become

<dd><%= image_tag @painting.image_url.to_s %></dd>

Uploading Image via URL
adding line in _form.html.erb

<div class="control-group">
  <%= f.label :image, "or image URL", :class => 'control-label' %>
    <div class="controls">
     <%= f.text_field :remote_image_url %>
    </div>
  </div>

As we’ve added a field to the painting form we’ll need to add it to the list of attr_accessible fields in the Painting model

class Painting < ActiveRecord::Base
  attr_accessible :name, :image,  :remote_image_url
 
  mount_uploader :image, ImageUploader
end

Rails : Associating has_many relationships

bootstrap has_many associationproduct category model has_many association

we’ll start with a new App and we’ll generate a scaffold product model and category model, following this bellow:

rails g scaffold Product name:string price:decimal
rails g scaffold Category name:string
rails g migration add_category_id_to_products category_id:integer

don’t forget

rake db:migrate

in category model

class Category < ActiveRecord::Base
  has_many :product
  attr_accessible :name
end

next in Product Model

class Product < ActiveRecord::Base
  belongs_to :category
  attr_accessible :name, :price, :category_id
end

finally, edit your code in app/views/product model, in index.html.erb and show.html.erb

<%= @product.category_id %>

which become

<%= @product.category.name %>

and specially
_form.html.erb

<div class="control-group">
      <%= f.label :category_id, :class => 'control-label' %>
      <div class="controls">
        <%= f.collection_select :category_id, Category.all, :id, :name %>
     
      </div>
    </div>

error message: ActiveModel::MassAssignmentSecurity::Error in OrdersController#create

ActiveModel::MassAssignmentSecurity::Error in OrdersController#create

Can’t mass-assign protected attributes: name, address, email
I’m trying and use a book -> Pragmatic Agile Web Development with Rails 4th Edition.

edit the order model app/models/order.rb


class Order < ActiveRecord::Base
has_many :line_items, dependent: :destroy	
attr_accessible :name, :address, :email, :pay_type

end

adding :name, :address, :email to the attr_accessible line in the order model

first rails deploy to heroku

this’s first time I deploy to heroku,. with one page without database

 rails g controller Store index

and delete public/index.html.
root :to => ‘store#index’

I am put in my Gemfile

group :development, :test do
  gem 'sqlite3'
end
group :production do
  gem 'pg'
end

and then

 bundle install --without production

Store my Application in git as usual

   $ git init
   $ git add .
   $ git commit -m "init"

deploy my Application in Heroku

   $ heroku login
   $ heroku create
   $ git push heroku master

visit my Application

$ heroku ps:scale web=1
$ heroku ps
$ heroku open

and then, open my App
my first trial

and second time, with several pages and adding the stylesheets (css)
also ‘heroku logs’ is useful for tracing error

In config/application.rb, add

config.assets.initialize_on_precompile = false

second trial

css github buttons

CSS3 github buttons is awesome button style, this is similar button in github.com, helps you easily create GitHub-style buttons from links, buttons, and inputs. this article is example for use github style button as written in rails code
http://nicolasgallagher.com/lab/css3-github-buttons/
for example:

<a class="button" href="#">Get Started</a>

and

<%=  button_to 'Add to Cart', line_items_path(product_id: product), :class => "button big" %>
<%= f.submit "Create Product", :class => "button big"%>

css3 Pricing Table on rails 3

when designing the pricing table for list of product.  so, in this article is a how to build a price table for listing the products in Rails code

<h1>Products List</h1>
<pre>
<% @products.each do |product| %>
<ul class="pricing_table">
	<li>
<div class="footer">
<h3>Product <%= product.id %></h3>
</div>
<h3><%= product.name %></h3>
<div class="price_body">
<div class="price"><%= product.price %></div>
</div>
<div class="features">
<ul>
	<li><%= product.description %></li>
</ul>
</div>
<div class="footer"><a class="action_button" href="#">Get Started</a></div></li>
</ul>
<pre>
<% end %>

pricing_table
CSS file

 .pricing_table {
	width: 700px;
	color:#fff;
	font-size:12px;
	font-family: Ubuntu, arial, verdana;
	line-height: 150%;
	text-align: center;
	margin: 10px auto 0 auto;
	text-shadow: 0px 1px 0px rgba(0,0,0,.5);

}

/**/

.pricing_table>li {
 background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 2px solid #103c56;
    -webkit-box-shadow: inset 0px 2px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 2px 0px 0px #6ad2ef;
    box-shadow: inset 0px 2px 0px 0px #6ad2ef;

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    width: 33.33%;
	float: left;
	list-style-type: none;
	/*For smooth hover effects if .active is replaced by :hover*/
	transition: all 0.2s;

    margin-bottom:20px;

}

.pricing_table>li.active {
	background: linear-gradient(#F9B84A, #DB7224);
	transform: scale(1.03);
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
}
.pricing_table h3 {
	text-transform: uppercase;
	padding: 15px 0;
	font-size: 14px;
	font-weight: bold;
}
.pricing_table .price_body {
	width: 125px;
	height: 125px;
	margin: 0 auto 15px auto;
	border: 2px solid #fff;
	border-radius: 100%;
	display: table;
}
.pricing_table .price {
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
	/*Lets vertically center align the price now*/
	vertical-align: middle;
	display: table-cell;
}
.pricing_table .price .price_figure {
	display: block;
}
.pricing_table .price .price_term {
	font-size: 11px;
	font-weight: normal;
}

.pricing_table .features li {
	list-style-type: none;
	padding: 5px 0;
}

.pricing_table .footer {
	padding: 10px;
	background: #333;
	margin-top: 10px;
}

.pricing_table .footer .action_button{
	color: #fff;
	font-size: 11px;
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	background: #000;
	padding: 4px 20px;
	border-radius: 8px;
	background: linear-gradient(#666, #333);
}
.pricing_table .active .footer .action_button {
	background: linear-gradient(#F9B84A, #DB7224);
}

.pricing_table li.active .footer :hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	background-color:#ce0100;
}

.pricing_table .active .footer .signup_button {

	margin-left: auto;
    margin-right: auto;
    text-align: center;
	-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	background-color:#fe1a00;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	border:1px solid #d83526;
	display:block;
	color:#ffffff;
	font-family:arial;
	font-size:20px;
	font-weight:bold;
	padding:24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #b23e35;
}

thi’s the products list of Indonesian food
css3 products list