7 : 上載圖像

上章 : 作聊天室:總結

Coffeecup header7

0 : 這個章的目的

 到上章,作了聊天室。

在這個章,會員資料上顯示圖像吧。


 使用Windows的話,不能學習這裡的內容。

 請看下章吧。



 解釋在這裡做的網頁吧!

 首先在打入編輯的會員資料的users」資料庫的「edit」網頁Chrome messages users 1 edit no image 像上面圖像一樣,作 選擇文件的輸入框。

選擇文件之後,點擊 登錄 會顯示 Chrome messages users 1 edit upload image 像上面圖像一樣上載的圖像。

在這裡上載的圖像,可以從別的網頁上看。 Chrome messages users 1 after upload images Chrome messages rooms 1 messages with images
  在這裡使用「paperclip」的「gem」,上載圖像。

那麽做做看吧!

 圖像是用河出書房新社的『Tonio Kröger』(トーマス・マン,翻譯 平野卿子)的封面。謝謝!


1 : 導入Paperclip

首先導入「Paperclip」吧!
導入Paperclip之前,
為了使用這個,安裝imageMagick的環境。

在terminal上打入下面的內容吧

 terminal
1 brew install imagemagick

這樣導入imageMagick了!
※ 這樣安裝好了,以後不用打入這個命令了
那麽,安裝Paperclip吧!

打開Sublime Text之後,編輯Gemfile的內容吧。
※ 使用Sublime Text打開文件的方法請參考這裡

 Gemfile
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
32 gem 'paperclip'

大概在第32行,追加內容。
編輯好了之後,導入設定的內容。在terminal上打入下面的命令吧。

 terminal
1 bundle install

 不動的話,刪除「Gemfile.lock」之後再試試看吧。

  這樣「Paperclip」的導入好了!

使用這個「Paperclip」,上載圖像吧!


2 : 上載圖像

使用「Paperclip」,上載圖像吧!

 ① : 上載圖像是怎麼做呢?


使用Paperclip上載圖像是要怎麼做呢?

 在這裡再看看網站上的動作吧。

  首先打開「users」資料庫的「edit」網頁, Chrome messages users 1 edit no image 打開圖像的輸入框選擇圖像, Chrome messages users 1 edit select images 點擊登錄 之後, Chrome messages users 1 edit upload image 會上面圖像會顯示。
 那麽,圖像是在哪裡保存呢?

這些圖像在public > system裡保存。 Sublime text public system images 網頁上顯示,在這裡保存的圖像。
 接着解釋,顯示保存的圖像的方法。

為了用會員資料顯示圖像,在users」資料庫裡追加保存圖像的名字的框子

users
image_file_name image_content_type image_file_size image_updated_at
sample.jpg image/jpeg 164788 2016-04-25 04:45:48
使用這樣的框子,顯示圖像。

 例如說,「id」是「1」的會員的話, Sublime text public system 圖像會保存在public > system > users > images > 000 > 000 > 001 > medium > 圖像的名字裡面。

上面的圖像的名字裡放追加的「image_file_name」的框子的內容,顯示圖像。

 途中有「medium」的文件夾,這個是設定圖像的大小

圖像的大小,在這裡設定
  • original(原來的大小)
  • medium(中)
  • thumb(小)
這個3個,在各個文件夾裡保存圖像文件。

 那麽用用看「Paperclip」吧!


 ② : 使用「Paperclip」


在這裡,使用Paperclip上載圖像。
Paperclip設定的內容是
  • 資料庫裡追加框子
  • users
    image_file_name image_content_type image_file_size image_updated_at
    sample.jpg image/jpeg 164788 2016-04-25 04:45:48
  • 資料操作的設定
  • 為了保存圖像,編輯上面的資料的框子。

  • 網頁顯示的設定
  • 設定網頁上顯示圖像的內容。

這個3個。

 那麽做做看吧!

 ⑴ : 編輯資料庫


 首先在資料庫裡追加圖像的框子吧。

為了追加設定圖像的框子,在terminal上打入

 terminal
1 rails g paperclip user image

的命令。
這樣作好了,users」資料庫裡追加「image」的框子的設定文件「日子_add_attachment_image_to_users.rb
※ 「image」的框子,可以使用「photo」這樣子自己喜歡的名字。
看看作好的設定文件吧。
打開db > migrate > 日子_add_attachment_image_to_users.rb,看看內容吧!

 日子_add_attachment_image_to_users.rb
1 2 3 4 5 6 7 8 9 10 11 class AddAttachmentImageToUsers < ActiveRecord::Migration def self.up change_table :users do |t| t.attachment :image end end def self.down remove_attachment :users, :image end end

為了適用這個設定,在terminal上打入

 terminal
1 rake db:migrate

這個命令吧!
 不動的話,在前面追加「bundle exec」,打入「bundle exec rake ...」吧。

這樣,資料庫的設定好了!
Sequel Pro看看資料庫有沒有作好!
※ 打開Sequel Pro的方法,請參考這裡

「created_at」「updated_at」的後面,
有沒有追加image」的框子嗎? Sequel pro images


 ⑵ : 資料操作


 接着做資料操作吧。

資料操作有
  • 可以編輯「image」的設定(users_controller.rb)
  • 「image」的大小,文件的種類的設定(user.rb)
這個兩個設定。

 首先從「users_controller.rb」的編輯開始做吧。

圖像的上載使用,在users」資料庫的「edit」網頁裡選擇的圖像 Chrome messages users 1 edit no imageupdate」網頁上載。
在這裡設定,update」網頁裡允許編輯「image」資料的內容。

打開app > controllers > users_controller.rb,編輯裡面的內容吧!

 users_controller.rb(編輯第31行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
28 29 30 31 32 33 34 35 36 37 38 def update @user = User.find(params[:id]) if @user.id == current_user.id @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction, :age, :image)) redirect_to "/users/#{@user.id}/edit" flash[:notice] = "編輯好了" else redirect_to "/" flash[:alert] = "無效的會員" end end

在第31行的後面

1 permit( ... , :age, :image)

這樣設定,允許image的編輯。
 接着在「user.rb」追加設定。

為了使用「Paperclip」,在user.rb上設定
  • 圖像的大小的設定
  • 圖像的文件的種類的設定
這個兩個內容。

 那麽,從第一個「圖像的大小的設定」開始做吧。

Paperclip裡使用px,設定要上載的圖像的大小。

在這裡設定
  • 上下300/左右300
  • 上下50/左右50
這個兩個大小。

那麽編輯app > models > user.rb的內容吧!

 user.rb(追加第10行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 11 12 class User < ActiveRecord::Base # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable has_many :messages has_many :entries has_attached_file :image, styles: { medium: "300x300>", thumb: "50x50>" } end

這樣設定好了,保存300x300」「50x50的大小的圖像的內容了。
 接着做第2個「圖像的文件的種類的設定」吧。

在這裡設定,保存的文件的種類。

例如說,想要保存圖像的時候,不能保存播放音樂的mp4」文件吧。

在這裡設定,只讓
  • jpg
  • jpeg
  • png
  • gif
這個四個文件保存。

那麽打開app > models > user.rb,編輯裡面的內容吧!

 user.rb(追加第12行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 class User < ActiveRecord::Base # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable has_many :messages has_many :entries has_attached_file :image, styles: { medium: "300x300>", thumb: "50x50>" } validates_attachment :image, content_type: { content_type: ["image/jpg", "image/jpeg", "image/png", "image/gif"] } end

這樣設定了,不讓jpg」「jpeg」「png」「gif以外的文件保存的設定。

  這樣設定了資料操作的內容了。


 ⑶ : 網頁顯示


 接着做網頁顯示吧!

網頁顯示要做
  • 設定輸入框
  • Chrome messages users 1 edit no images no message
  • 顯示圖像

  •  顯示大小「medium」的圖像(300x300)の表示 Chrome messages users 1 after upload images  顯示大小「thumb」的圖像(50x50) Chrome messages rooms 1 messages with images
有這個兩個設定。

 首先設定輸入框的設定吧。

編輯會員資料的網頁users」資料庫的「edit」網頁裡,追加文件的輸入框的設定。 那麽編輯app > views > users > edit.html.erb的內容吧!

 edit.html.erb(追加第4〜6行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 ... <h1>編輯會員資料</h1> <hr> <%= form_for @user do |f| %> <p>頭像</p> <%= f.file_field :image, :class => "form-control my-form" %> <br> <p>姓字</p> <!-- 省略 -->

這樣設定好了文件的輸入框了。

像這樣,文件的輸入框要

6 <%= f.file_field :image, :class => "form-control my-form" %>

像上面的圖像一樣使用「file_field」設定。
在這裡也是用form-control,裝飾輸入框。
 輸入框的設定跟資料操作完成了,在這裡保存看圖像吧!

首先登入會員之後,移動到會員的資料的網頁吧!
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。 Chrome messages users 1 edit no images no message 有沒有顯示這樣子的畫面嗎?
網頁顯示之後,在圖像的輸入框裡選擇圖像, Chrome messages users 1 edit select images 點擊 登錄 吧!

這樣圖像保存好了,
看看在public > system裡面有沒有保存資料! Sublime text public system images 看看Sequel Pro,資料有沒有保存了沒! Sequel pro images user 1
 接着顯示圖像吧。

 首先顯示medium」(上下300左右300)的圖像。顯示的網頁是
  • users」資料庫的「show」網頁
  • Chrome messages users 1 after upload images
  • users」資料庫的「edit」網頁
  • Chrome messages users 1 edit upload image
這個兩個網頁!
那麽,先編輯app > views > users > show.html.erb的內容吧。

 show.html.erb(追加第5、6行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 ... <div class="row"> <div class="col-xs-6"> <h1>會員資料</h1> <hr> <%= image_tag @user.image.url(:medium) %> <br><br> <p>名字:<%= @user.family_name %><%= @user.first_name %>(<%= @user.age %>歲)</p> <p>自我介紹:<%= @user.self_introduction %></p> <br> <% if @user.id == current_user.id %> <!-- 省略 -->

裡面的

6 <%= image_tag @user.image.url(:medium) %>

在顯示圖像。

@user選擇會員資料,
顯示大小「medium」的「image的會員的圖像。
※ 後面追加兩個「<br>」,在圖像跟名字之間作空格 Chrome messages users 1 after upload images
同樣的在users」資料庫的「edit」網頁顯示圖像吧。

編輯app > views > users > edit.html.erb的內容吧!

 edit.html.erb(追加第5、6行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 <h1>編輯會員資料</h1> <hr> <%= form_for @user do |f| %> <p>頭像</p> <%= image_tag @user.image.url(:medium) %> <br><br> <%= f.file_field :image, :class => "form-control my-form" %> <br> <p>姓字</p> <!-- 省略 -->

在第5行的設定,在顯示圖像。 Chrome messages users 1 edit upload image
 接着顯示thumb」(上下50左右50)的圖像吧。顯示的網頁是,
  • rooms」資料庫的「show」網頁
  • Chrome messages rooms 1 messages with images
這個網頁。

thumb的大小的圖像是

1 <%= image_tag @user.image.url(:thumb) %>

這樣設定顯示的內容。
那麽編輯app > views > rooms > show.html.erb的內容吧!

 show.html.erb(編輯第22、30行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 ... <div class="col-xs-9"> <% if @messages.present? %> <% @messages.each do |m| %> <% if m.user_id == current_user.id %> <h4 class="text-right"> <p class="alert alert-success"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %> <%= image_tag m.user.image.url(:thumb) %></a></strong></small> </p> </h4> <% else %> <h4 class="text-left"> <p class="alert alert-info"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= image_tag m.user.image.url(:thumb) %> <%= m.user.family_name %> <%= m.user.first_name %></a></strong></small> </p> </h4> <% end %> <% end %> <% else %> <!-- 省略 -->

在第22、30行的顯示名字的部分的前面/後面,設定

1 <%= image_tag m.user.image.url(:thumb) %>

這個內容,顯示會員的頭像。
※ 使用m.user,選擇messages」資料在拿的會員。 Chrome messages rooms 1 messages with images  這樣顯示圖像了!


 ③ : 總結


總結,使用Paperclip的方法。
  • 追加資料庫

  • 為了追加資料庫的框子,作設定文件。

     terminal
    1 rails g paperclip user image

    這一次的打入是,users」資料庫裡追加「image」的框子的命令。

    在這個打入作了「日子_add_attachment_image_to_users.rb」的文件。

    做好之後,使用文件的內容。

     terminal
    1 rake db:migrate

  • 資料操作

  • 要做資料操作的時候要在,
    • users_controller.rb
    • user.rb
    這個兩個文件裡追加設定。

     users_controller.rb
    1 @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction, :age, :image))

     user.rb
    1 2 has_attached_file :image, styles: { medium: "300x300>", thumb: "50x50>" } validates_attachment :image, content_type: { content_type: ["image/jpg", "image/jpeg", "image/png", "image/gif"] }

  • 網頁顯示

  • 網頁顯示的設定要做
    • 顯示輸入框
    • 顯示圖像
    這個兩個設定。

     顯示輸入款

    1 <%= f.file_field :image, :class => "form-control my-form" %>

     顯示圖像

    1 <%= image_tag @user.image.url(:medium) %>

  使用「Paperclip」的圖像的顯示,到這裡。

接着使用條件判別,沒有圖像的會員的話, Chrome messages users 2 no image Chrome messages users 1 edit no image 像上面圖像一樣顯示
沒有頭像」「頭像還沒登錄」的文字吧!


3 : 圖像的判別

使用條件判別,設定圖像的顯示吧!
要判別會員資料裡有沒有圖像的條件,要使用present?」跟「if/else」
※ 詳細請參考這裡

所以在這裡,大概設定下面的內容。

1 2 3 4 5 <% if @user.image.present? %> <%= image_tag @user.image.url(:medium) %> <% else %> <h4>沒有圖像</h4> <% end %>

那麽在
  • users」資料庫的「show」網頁
  • Chrome messages users 2 no image
  • users」資料庫的「edit」網頁
  • Chrome messages users 1 edit no image
這個兩個網頁上設定內容。

 首先在「users」資料庫的「show」網頁追加設定。

編輯app > views > users > show.html.erb的內容。

 show.html.erb(追加第5、8〜10行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 11 12 ... <div class="row"> <div class="col-xs-6"> <h1>會員資料</h1> <hr> <% if @user.image.present? %> <%= image_tag @user.image.url(:medium) %> <br><br> <% else %> <h4>沒有頭像</h4> <% end %> <p>名字:<%= @user.family_name %><%= @user.first_name %>(<%= @user.age %>歲)</p> <p>自我介紹:<%= @user.self_introduction %></p> <!-- 省略 -->

這樣設定判別「@user」的「image」有沒有的條件判別了。
 接著在「users」資料庫的「edit」網頁上追加設定。

編輯app > views > users > edit.html.erb的內容。

 edit.html.erb(追加第5、8〜10行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <h1>編輯會員資料</h1> <hr> <%= form_for @user do |f| %> <p>頭像</p> <% if @user.image.present? %> <%= image_tag @user.image.url(:medium) %> <br><br> <% else %> <h4>頭像還沒登錄</h4> <% end %> <%= f.file_field :image, :class => "form-control my-form" %> <br> <p>姓字</p> <!-- 省略 -->

到這裡條件判別的設定好了。

 使用「Paperclip」的設定到這裡。

設定的內容請參考這裡

 公開網站的方法,可以從這裡學習。參考吧。


 到這裡「應用編」的內容完了。辛苦你了。

為了還想學習「Ruby on Rails」的人,介紹可以學習的網站,有興趣的話請參考。