[SOLVED] database WDE-Slides-10.pptx

WDE-Slides-10.pptx

Web System Development with
Ruby on Rails

Day 10(1/Dec/2016)

File uploading and Image Display

Todays Theme
p Upload image files to the database, and

let Chirps store the image file.

Design Concept of
Image (Figure) Attachment
l Table Name: figures
l Model name : figure
l Relationship : (memos : figures)=> 1 to many

l One memo can have many images (figures)
l One picture belongs to only one memos
l Memos which do not have figures have no problem

without having any figures with it.

l Figures has memo_id field for relation
information.

the last
year design

Design Concept of Image Attachment
l Add field columns to Chirps table, which can

contain image storage/display information.
l Abandon the design of last year, which allows

the one (chirp/tweet) to many (images)
relationship by adding the new table of
attachment.

Photo display andmetadata
To upload and display photo, add photo

method, and add metadata information to
the chirps_controller.rb

def photo
@chirp = Chirp.find( params[:id] )
send_data @chirp.photo, :filename => @chirp.file_name,

:type => @chirp.file_type
end

chirps_controller.rb

Modify create method
# POST /chirps
# POST /chirps.json
def create
if params[:chirp][:photo]
@file = params[:chirp][:photo]
@chirp = Chirp.new(
:user_id => current_user.id,
:chirp => params[:chirp][:chirp],
:photo => @file.read,
:file_name => @file.original_filename,
:file_type => @file.content_type
)
respond_to do |format|
if @chirp.save
format.html { redirect_to @chirp, notice: Chirp was successfully created. }
format.json { render :show, status: :created, location: @chirp }
else
format.html { render :new }
format.json { render json: @chirp.errors, status: :unprocessable_entity }
end
end
else
@chirp = Chirp.new(chirp_params)
@chirp.user_id = current_user.id
respond_to do |format|
if @chirp.save
format.html { redirect_to @chirp, notice: Chirp was successfully created. }
format.json { render :show, status: :created, location: @chirp }
else
format.html { render :new }
format.json { render json: @chirp.errors, status: :unprocessable_entity }
end
end
end
end

Original Part

chirps_controller.rb
Retrieve the file information such as file

name, file type, and the binary image of
the photo contents, from :photo

Confirm that :photo is in the params list in

the controller method.

chirps_controller # create (P1/2)

chirps_controller # create (P2/2)

To accept :photo in chirp
In order to accept image file to chirp/tweet,

we have changed _form.html.erb.

views/chirps/_form.html.erb

New Chirp input screen

Now next step is to show the image
Now image file is saved to the chirps table.

Next step is to show the photo.In order to

support the image display we are going
to;

(1)Modify show.html.erb file,
(2)Add photo display method, (done)
(3)Add photo method routings.

Views/chirps/show.html.erb

<%= notice %>

User:
<%= @chirp.user.email %>

Chirp:
<%= @chirp.chirp %>

Chirped at:
<%= @chirp.chirped_at %>

<% if @chirp.photo %>
Photo:
<% if @chirp.file_type =~ /^image/.*?(png|jpeg|gif|bmp)$/ %>
<%= image_tag url_for({:action => photo, :id => @chirp.id,

:filename => @chirp.file_name} ), :alt => @chirp.file_name %>
<% end %>
<% end %>

<%= link_to ‘Edit’, edit_chirp_path(@chirp) %> |
<%= link_to ‘Back’, chirps_path %>

views/chirps/show.html.erb

Add route for chirps#photo

Edit config/routes.rb
Before resources :chirps, add
get chirps/photo => chirps#photo

Check routing specs
Type
rake routes

to know the current routing settings.

Check to see if chirp is added?
Add New Chirp

Now then modify the index screen
Replace

<%= chirp.photo %>

with the following in views/chirps/

index.html.erb

<% if chirp.photo %>

<% if chirp.file_type =~ /^image/.*?(png|jpeg|gif)$/ %>
<%= image_tag url_for({:action => photo, :id=> chirp.id,
:filename => chirp.file_name}), :alt => chirp.file_name %>
<% end %>

<% end %>

views/chirps/index.html.erb

Now todays goal screen is

Practice
Let your chirps system would have the

image file uploaded.

How to control the image size?Try!

chirps_controller # update method
# PATCH/PUT /chirps/1
# PATCH/PUT /chirps/1.json
def update
if params[:chirp][:photo]
@file = params[:chirp][:photo]
respond_to do |format|
if @chirp.update(
:chirp => params[:chirp][:chirp],
:photo => @file.read,
:file_name => @file.original_filename,
:file_type => @file.content_type
)
format.html { redirect_to @chirp, notice: Chirp was successfully updated. }
format.json { render :show, status: :ok, location: @chirp }
else
format.html { render :edit }
format.json { render json: @chirp.errors, status: :unprocessable_entity }
end
end
else
respond_to do |format|
if @chirp.update(chirp_params)
format.html { redirect_to @chirp, notice: Chirp was successfully updated. }
format.json { render :show, status: :ok, location: @chirp }
else
format.html { render :edit }
format.json { render json: @chirp.errors, status: :unprocessable_entity }
end
end
end
end

chirps_controller # update (1 / 2)

chirps_controller # update (2 / 2)