Liz's Blog

12 in 12 challenges #5:如何用Rails4打造電影評論網

| Comments

繼前四週做過類Reddit部落格食譜、類Pinterest網站,第五週進入電影評論網的挑戰。

一樣是練習MVC,但本週用比較多scaffold來做,除了之前練習過的devise、bootstrap-sass、paperclip,還有練習searchkick。

Mackenzie Child原影片Github。根據不同而稍做修改的版本,請參考我的Github

【開啟新專案movie_review】
1.終端機:rails new movie_review
2.終端機:cd movie_review
3.終端機:git init
4.終端機:git add .
5.終端機:git commit -am "Inital Commit"
6.用另一視窗開啟終端機:rails s

【安裝devise會員系統】
1.終端機:rails g scaffold Movie title:string description:text movie_length:string director:string rating:string
2.終端機:rake db:migrate
3.安裝devise

Gemfile
gem 'devise', '~> 4.3'

4.終端機:bundle install
5.用另一視窗重啟終端機:rails s
6.終端機:rails g devise:install
7.

config/environments/development.rb
....
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
end

8.

config/routes.rb
....
root 'movies#index'
....

9.

app/views/layouts/application.html.erb
....
<body>
    <% flash.each do |name, msg| %>
      <%= content_tag(:div, msg, class: "alert alert-info") %>
    <% end %>
<%= yield %>

</body>
....

10.終端機:rails g devise:views
11.終端機:rails g devise User
12.終端機:rake db:migrate
13.用另一視窗重啟終端機:rails s
14.終端機:rails g migration add_user_id_to_movies user_id:integer
15.終端機:rake db:migrate
16.

app/controllers/movies_controller.rb
....
before_action :authenticate_user!, except: [:index, :show]
....
def new
  @movie = current_user.movies.build
end
....
def create
  @movie = current_user.movies.build(movie_params)
....

17.

app/models/movie.rb
....
belongs_to :user
....

18.

app/models/user.rb
....
has_many :movies
....

19.終端機:rails c
20.終端機:@movie = Movie.first
21.終端機:@movie.user_id = 1
22.終端機:@movie
23.終端機:@movie.save
24.終端機:git status
25.終端機:git add .
26.終端機:git commit -am "Add movie scaffold and user"

【安裝paperclip上傳圖片】
1.paperclip

Gemfile
gem 'paperclip', '~> 5.1'

2.終端機:bundle install
3.用另一視窗重啟終端機:rails s
4.

app/models/movie.rb
....
has_attached_file :image, styles: { medium: "400x600#" }
validates_attachment_content_type :image, content_type: /\Aimage\/.*\Z/
....

5.終端機:rails g paperclip movie image
6.終端機:rake db:migrate
7.

app/views/movies/_form.html.erb
<%= form_for @movie, html: { multipart: true } do |f| %>
  <% if @movie.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@movie.errors.count, "error") %> prohibited this movie from being saved:</h2>

      <ul>
      <% @movie.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div class="field">
    <%= f.label :movie_length %><br>
    <%= f.text_field :movie_length %>
  </div>
  <div class="field">
    <%= f.label :director %><br>
    <%= f.text_field :director %>
  </div>
  <div class="field">
    <%= f.label :rating %><br>
    <%= f.text_field :rating %>
  </div>
  <div class="field">
    <%= f.label :image %><br>
    <%= f.file_field :image %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

8.刪除show.html.erb最上面的notice,並加入圖片。

app/views/movies/show.html.erb
<%= image_tag @movie.image.url(:medium) %>
....

9.

app/controllers/movie_controller.erb
....
def movie_params
  params.require(:movie).permit(:title, :description, :movie_length, :director, :rating, :image)
end
....

10.

app/views/movies/index.html.erb
....
<td><%= image_tag movie.image.url(:medium) %></td>
....

11.終端機:git status
12.終端機:git add .
13.終端機:git commit -am "Add paperclip for image upload"
14.

.gitignore
....
/public/systems/movies/images

【安裝bootstrap-sass版型設計】
1.安裝bootstrap-sass,請參考此篇

Gemfile
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'

2.終端機:bundle install
3.另一視窗重啟終端機:rails s
4.將application.css修改成application.css.scss,加入下列兩行,並刪除= require_self及= require_tree .。

app/assets/stylesheets/application.css.scss
....
 @import "bootstrap-sprockets";
 @import "bootstrap";

5.在jquery_ujs下方加入。

app/assets/javascripts/application.js
....
//= require bootstrap-sprockets
....

6.

app/views/layouts/application.html.erb
....
<body>
  <%= render 'layouts/header' %>
....

7.新增_header.html.erb檔案。

app/views/layouts/_header.html.erb
<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Movie Reviews", root_path, class: "navbar-brand" %>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <% if user_signed_in? %>
          <li><%= link_to "New Movie", new_movie_path, class: "active" %></li>
          <li><%= link_to "Account", edit_user_registration_path %></li>
        <% else %>
          <li><%= link_to "Sign Up", new_user_registration_path, class: "active" %></li>
          <li><%= link_to "Sign In", new_user_session_path, class: "active" %></li>
        <% end %>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

8.

app/views/movies/index.html.erb
<div class="row">
  <% @movies.each do |movie| %>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <%= link_to (image_tag movie.image.url(:medium), class: 'image'), movie %>
      </div>
    </div>
  <% end %>
</div>

9.

app/views/application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>MovieReview</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
  <%= render 'layouts/header' %>
      <div class="container">
        <% flash.each do |name, msg| %>
            <%= content_tag(:div, msg, class: "alert alert-info") %>
        <% end %>
        <%= yield %>
      </div>
</body>
</html>

10.

app/views/movies/index.html.erb
<% if !user_signed_in? %>
  <div class="jumbotron">
    <h1>Your Favorite Movies Reviewed</h1>
    <p>Hashtag hoodie mumblecore selfies. Authentic keffiyeh leggings Kickstarter, narwhal jean shorts XOXO Vice Austin cardigan. Organic drinking vinegar freegan pickled.</p>
    <p><%= link_to "Sign Up To Write A Review", new_user_registration_path, class: "btn btn-primary btn-lg" %></p>
  </div>
<% end %>
....

11.刪除app/assets/stylesheets/movie.css檔案。
12.

app/views/movies/show.html.erb
<div class="panel panel-default">
  <div class="panel-body">
    <div class="row">
      <div class="col-md-4">
        <%= image_tag @movie.image.url(:medium) %>
        <div class="table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td><strong>Title:</strong></td>
                <td><%= @movie.title %></td>
              </tr>
              <tr>
                <td><strong>Description:</strong></td>
                <td><%= @movie.description %></td>
              </tr>
              <tr>
                <td><strong>Movie length:</strong></td>
                <td><%= @movie.movie_length %></td>
              </tr>
              <tr>
                <td><strong>Director:</strong></td>
                <td><%= @movie.director %></td>
              </tr>
              <tr>
                <td><strong>Rating:</strong></td>
                <td><%= @movie.rating %></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<%= link_to 'Edit', edit_movie_path(@movie) %> |
<%= link_to 'Back', movies_path %>

13.

app/assets/sytlesheets/application.css.scss
....
body {
    background: #AA4847;
 }

 .review_title {
    margin: 0 0 20px 0;
 }
 .reviews {
    padding: 15px 0;
    border-bottom: 1px solid #EAEAEA;
    .star-rating {
        padding-bottom: 8px;
    }
 }

14.終端機:git status
15.終端機:git add .
16.終端機:git commit -am "Added bootstrap and styled"

【用scaffold快速建立Review】
1.終端機:rails g scaffold Review rating:integer comment:text
2.終端機:rake db:migrate
3.終端機:rails g migration add_user_ud_to_reviews user_id:integer
4.終端機:rake db:migrate
5.

app/models/user.rb
....
  has_many :reviews, dependent: :destroy
end

6.

app/models/review.rb
class Review < ActiveRecord::Base
  belongs_to :user
end

7.終端機:rails c
8.終端機:@review = Review.first
9.

app/controllers/reviews_controller.rb
....
before_action :authenticate_user!
....
def create
    @review = Review.new(review_params)
    @review.user_id = current_user.id
....

10.刪除app/views/reviews/index.html.erb檔案。
11.刪除app/views/reviews/show.html.erb檔案。
12.按ctrl+D離開console。
13.終端機:git status
14.終端機:git add .
15.終端機:git commit -am "Review scaffold"

【設定movie及review的關聯性】
1.終端機:rails g migration add_movie_id_to_reviews movie_id:integer
2.終端機:rake db:migrate
3.終端機:rails c
4.終端機:@review = Review.last
5.

app/models/movie.rb
....
has_many :reviews
....

6.

app/models/review.rb
....
belongs_to :movie
....

7.

app/views/reviews/_form.html.erb
<%= form_for([@movie, @review]) do |f| %>
....

8.

config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  resources :movies do
    resources :reviews, except: [:show, :index]
  end
  root 'movies#index'
end

9.終端機:rake routes
10.

app/controllers/reviews_controller.rb
class ReviewsController < ApplicationController
  before_action :set_review, only: [:show, :edit, :update, :destroy]
  before_action :set_movie
  before_action :authenticate_user!

  # GET /reviews/new
  def new
    @review = Review.new
  end

  # GET /reviews/1/edit
  def edit
  end

  # POST /reviews
  # POST /reviews.json
  def create
    @review = Review.new(review_params)
    @review.user_id = current_user.id
    @review.movie_id = @movie.id

    respond_to do |format|
      if @review.save
        format.html { redirect_to @review, notice: 'Review was successfully created.' }
        format.json { render :show, status: :created, location: @review }
      else
        format.html { render :new }
        format.json { render json: @review.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /reviews/1
  # PATCH/PUT /reviews/1.json
  def update
    respond_to do |format|
      if @review.update(review_params)
        format.html { redirect_to @review, notice: 'Review was successfully updated.' }
        format.json { render :show, status: :ok, location: @review }
      else
        format.html { render :edit }
        format.json { render json: @review.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /reviews/1
  # DELETE /reviews/1.json
  def destroy
    @review.destroy
    respond_to do |format|
      format.html { redirect_to reviews_url, notice: 'Review was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_review
      @review = Review.find(params[:id])
    end

    def set_movie
      @movie = Movie.find(params[:movie_id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def review_params
      params.require(:review).permit(:rating, :comment)
    end
end

11.

app/views/reviews/edit.html.erb
<h1>Editing Review</h1>

<%= render 'form' %>

<%= link_to 'Back', movie_path(@movie) %>

12.

app/views/reviews/new.html.erb
<h1>New Review</h1>

<%= render 'form' %>

<%= link_to 'Back', movie_path(@movie) %>

13.

app/controllers/reviews_controller.rb
....
def create
  @review = Review.new(review_params)
  @review.user_id = current_user.id
  @review.movie_id = @movie.id

  if @review.save
    redirect_to @movie
  else
    render :new
  end
end

14.

app/views/movies/show.html.erb
....
</table>
<%= link_to "Write a Review", new_movie_review_path(@movie) %>
....

15.

app/views/movies/show.html.erb
<div class="panel panel-default">
  <div class="panel-body">
    <div class="row">
      <div class="col-md-4">
        <%= image_tag @movie.image.url(:medium) %>
        <div class="table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td><strong>Title:</strong></td>
                <td><%= @movie.title %></td>
              </tr>
              <tr>
                <td><strong>Description:</strong></td>
                <td><%= @movie.description %></td>
              </tr>
              <tr>
                <td><strong>Movie length:</strong></td>
                <td><%= @movie.movie_length %></td>
              </tr>
              <tr>
                <td><strong>Director:</strong></td>
                <td><%= @movie.director %></td>
              </tr>
              <tr>
                <td><strong>Rating:</strong></td>
                <td><%= @movie.rating %></td>
              </tr>
            </tbody>
          </table>
          <%= link_to "Write a Review", new_movie_review_path(@movie) %>
        </div>
      </div>
      <div class="col-md-7 col-md-offset-1">
        <h1 class="review_title"><%= @movie.title %></h1>
        <p><%= @movie.description %></p>

        <% if @reviews.blank? %>
          <h3>No reviews just yet, would you like to add the first!</h3>
          <%= link_to "Write Review", new_movie_review_path(@movie), class: "btn btn-danger" %>
        <% else %>
          <% @reviews.each do |review| %>
            <div class="reviews">
              <p><%= review.rating %></p>
              <p><%= review.comment %></p>
            </div>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</div>

16.

app/controllers/movies_controller.rb
....
def show
  @reviews = Review.where(movie_id: @movie.id).order("created_at DESC")
end
....

17.下載JQuery Rating並放到app/assets/javascripts資料夾下。
18.並加入star-on、star-off、star-half.png到app/assets/images資料夾下。
19.

app/views/movies/show.html.erb
....
<% @reviews.each do |review| %>
  <div class="reviews">
    <div class="star-rating" data-score= <%= review.rating %> ></div>
      <p><%= review.comment %></p>
....

<script>
    $('.star-rating').raty({
      path: '/assets/',
      readOnly: true,
      score: function() {
            return $(this).attr('data-score');
    }
  });
</script>

20.

app/views/reviews/_form.html.erb
<%= form_for([@movie, @review]) do |f| %>
  <% if @review.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@review.errors.count, "error") %> prohibited this review from being saved:</h2>

      <ul>
      <% @review.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <div id="star-rating"></div>
  </div>
  <div class="field">
    <%= f.label :comment %><br>
    <%= f.text_area :comment %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<script>
  $('#star-rating').raty({
    path: '/assets/',
    scoreName: 'review[rating]'
  });
</script>

21.

app/controllers/movies_controller.rb
....
  def show
    @reviews = Review.where(movie_id: @movie.id).order("created_at DESC")

    if @reviews.blank?
      @avg_review = 0
    else
      @avg_review = @reviews.average(:rating).round(2)
    end
  end
....

22.

app/views/movies/show.html.erb
....
<%= image_tag @movie.image.url(:medium) %>
  <div class="star-rating" data-score= <%= @avg_review %> ></div>
  <em><%= "#{@reviews.length} reviews" %></em>
  <div class="table-responsive">
....

23.終端機:git status
24.終端機:git add .
25.終端機:git commit -am "Convert review rating to stars"

【安裝searchkick】
1.安裝searchkick

Gemfile
gem 'searchkick', '~> 2.3'

2.終端機:bundle install
3.終端機:brew install elasticsearch
4.終端機:brew services start elasticsearch
5.打開http://localhost:9200
6.

app/models/movie.rb
....
searchkick
....

7.rake searchkick:reindex CLASS=Movie
8.

config/routes.rb
....
  resources :movies do
    collection do
      get 'search'
    end
    resources :reviews, except: [:show, :index]
  end
....

9.

app/views/layouts/_header.html.erb
<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to "Movie Reviews", root_path, class: "navbar-brand" %>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <% if user_signed_in? %>
          <li><%= link_to "New Movie", new_movie_path, class: "active" %></li>
          <li><%= link_to "Account", edit_user_registration_path %></li>
        <% else %>
          <li><%= link_to "Sign Up", new_user_registration_path, class: "active" %></li>
          <li><%= link_to "Sign In", new_user_session_path, class: "active" %></li>
        <% end %>
      </ul>
      <%= form_tag search_movies_path, method: :get, class: "navbar-form navbar-right", role: "search" do %>
        <p>
          <%= text_field_tag :search, params[:search], class: "form-control" %>
          <%= submit_tag "Search", name: nil, class: "btn btn-default" %>
        </p>
      <% end %>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

10.

app/controllers/movies_controller.rb
....
def search
  if params[:search].present?
    @movies = Movie.search(params[:search])
  else
    @movies = Movie.all
  end
end
....

11.

app/views/movies/search.html.erb
<div class="row">
  <% @movies.each do |movie| %>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <%= link_to (image_tag movie.image.url(:medium), class: 'image'), movie %>
      </div>
    </div>
  <% end %>
</div>

12.終端機:git status
13.終端機:git add .
14.終端機:git commit -am "searchkick gem and implement search functionality"

【延伸閱讀】
1.12 in 12 Challenges #1:如何利用Rails4打造出Reddit或Hacker News類型的網站
2.12 in 12 Challenges #2:如何用Rails4做出部落格
3.12 in 12 challenges #3:如何用Rails4打造一個食譜網站
4.12 in 12 challenges #4:如何用Rails4打造Pinterest
5.12 in 12 challenges #5:如何用Rails4打造電影評論網
6.12 in 12 challenges #6:如何用Rails4打造待做清單
7.12 in 12 Challenges #7:如何利用Rails4打造出求職網站
8.12 in 12 Challenges #8:如何用Rails4做出健身紀錄
9.12 in 12 Challenges #9:如何用Rails4做出維基百科
10.12 in 12 Challenges #10:如何用Rails4做出論壇
11.12 in 12 Challenges #11:如何用Rails4做出Notebook
12.12 in 12 Challenges #12:如何用Rails4做出Dribbble

Comments

comments powered by Disqus