Liz's Blog

12 in 12 Challenges #9:如何用Rails4做出維基百科

| Comments

作者:Mackenzie Child
影片:How to build a Wikipedia clone in Rails 4
Github:Wiki

我的Github練習。

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

【安裝gems】
1.安裝hamlbootstrap-sasssimple_formdevise

Gemfile
gem 'haml', '~> 5.0', '>= 5.0.1'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
gem 'devise', '~> 4.3'
gem 'simple_form', '~> 3.5'

2.終端機:bundle install
3.用另一視窗重啟終端機:rails s
4.application.css重新命名為application.css.scss,並且移除*= require_tree .*= require_self

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

5.在jquery下行加入。

....
//= require bootstrap-sprockets
....

6.終端機:rails g devise:install
7.

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

8.

app/views/layouts/application.html.erb
....
<body>

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

<%= yield %>

</body>
....

9.終端機:rails g devise user
10.終端機:rake db:migrate
11.終端機:rails g devise:views
12.終端機:rails g simple_form:install --bootstrap
13.終端機:rails s
14.終端機:git status
15.終端機:git add .
16.終端機:git commit -am "Add Application Gems"

【建立MVC】
1.終端機:rails g model Article title:string content:text
2.終端機:rake db:migrate
3.終端機:rails g controller articles
4.

config/routes.rb
....
resources :articles

root "articles#index"
....

5.

app/controllers/articles_controller.rb
def index
end

6.

app/views/articles/index.html.haml
%h1 This is the articles#index placeholder

7.

app/controllers/articles_controller.rb
def index
end

def new
    @article = Article.new
end

def create
    @article = Article.new(article_params)
    if @article.save
        redirect_to @article
    else
        render 'new'
    end
end

private

def article_params
    params.require(:article).permit(:title, :content)
end

8.新增new.html.haml檔案。

app/views/articles/new.html.haml
%h1 New Article

= render 'form'

= link_to "Back", root_path

9.新增_form.html.haml檔案。

app/views/articles/_form.html.haml
= simple_form_for @article do |f|
    =f.input :title
    =f.input :content
    =f.submit

10.git status
11.git add .
12.git commit -am "Add model, controller, views"

【show page】
1.

app/controllers/articles_controller.rb
....
    before_action :find_article, only: [:show]
    def index
    end

    def show
    end

    def new
        @article = Article.new
    end

    def create
        @article = Article.new(article_params)
        if @article.save
            redirect_to @article
        else
            render 'new'
        end
    end

    private

    def find_article
        @article = Article.find(params[:id])
    end

    def article_params
        params.require(:article).permit(:title, :content)
    end
....

2.

app/views/show.html.haml
%h1= @article.title
%p= @article.content

= link_to "Back", root_path

3.終端機:git status
4.終端機:git add .
5.終端機:git commit -am "created article show pages"

【index】
1.

app/controllers/articles_controller.rb
....
    def index
        @articles = Article.all.order("created_at DESC")
    end
....

2.

app/views/articles/index.html.haml
- @articles.each do |article|
    %h2= article.title
    %p
        Published at
        = article.created_at.strftime('%b %d, %Y')
    %p= truncate(article.content, length: 200)

= link_to "New Article", new_article_path

3.終端機:git status
4.終端機:git add .
5.終端機:git commit -am "Loop articles on index"

【建立article&user關聯性】
1.

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

2.

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

3.終端機:rails g migration add_user_id_to_articles user_id:integer
4.終端機:rake db:migrate
5.

app/controllers/articles_controller.rb
....
    def new
        @article = current_user.articles.build
    end

    def create
        @article = current_user.articles.build(article_params)
        if @article.save
            redirect_to @article
        else
            render 'new'
        end
    end
....

6.終端機:rails c
7.終端機:@article = Article.last
8.終端機:@article.user_id = 1
9.終端機:@article.save
10.終端機:@article = Article.find(2)
11.終端機:@article.user_id = 1
12.終端機:@article.save
13.ctrl+D
13.終端機:git status
14.終端機:git add .
15.終端機:git commit -am "Add association between user and article"

【新增使用者認證】
1.

app/controllers/articles_controller.rb
....
    before_action :authenticate_user!, except: [:index, :show]
....

2.

app/views/articles/index.html.haml
....
- if user_signed_in?
    = link_to "New Article", new_article_path

3.終端機:git status
4.終端機:git add .
5.終端機:git commit -am "Add user authentication"

【新增文章的類別】
1.終端機:rails g model Category name:string
2.終端機:rake db:migrate
3.終端機:rails g migration add_category_id_to_articles category_id:integer
4.終端機:rake db:migrate
5.

app/models/article.rb
....
  belongs_to :category
....

6.終端機:rails c
7.終端機:Category.connection
8.終端機:Category
9.終端機:Category.create(name: "Arts")
10.終端機:Category.create(name: "Technology")
11.終端機:Category.create(name: "Politics")
12.終端機:Category.count
13.終端機:@article = Article.last
14.

app/views/articles/_form.html.haml
= simple_form_for @article do |f|
  = f.collection_select :category_id, Category.all, :id, :name, { promt: "Choose a Category" }
....

15.

app/controllers/articles_controller.rb
....
    def index
        if params[:category].blank?
            @articles = Article.all.order("created_at DESC")
        else
            @category_id = Category.find_by(name: params[:category]).id
            @articles = Article.where(category_id: @category_id).order("created_at DESC")
        end
    end
....
    def article_params
        params.require(:article).permit(:title, :content, :category_id)
    end
....

16.修改成haml檔案。

app/views/layouts/application.html.haml
!!!
%html
%head
    %title Wiki
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
%body
    %p.notice= notice
    %p.alert= alert

    = yield

    %ul
        %li= link_to "All Articles", root_path
        - Category.all.each do |category|
            %li= link_to category.name, articles_path(category: category.name)

17.

app/views/articles/index.html.haml
....
- @articles.each do |article|
    %h2= link_to article.title, article
....

18.終端機:git status
19.終端機:git add .
20.終端機:git commit -am "Add Categories to Articles"

【修改及刪除文章功能】
1.

app/controllers/articles_controller.rb
....
  before_action :find_article, only: [:show, :edit, :update]
....
    def edit
    end

    def update
        if @article.update(article_params)
            redirect_to @article
        else
            render 'edit'
        end
    end
....

2.新增edit.html.haml檔案。

app/views/articles/edit.html.haml
%h1 Edit Article

= render 'form'

= link_to "Back", root_path

3.

app/views/articles/show.html.haml
....
= link_to "Back", root_path
= link_to "Edit", edit_article_path(@article)

4.

app/controllers/articles_controller.rb
....
  before_action :find_article, only: [:show, :edit, :update, :destroy]
....
    def destroy
        @article.destroy
        redirect_to root_path
    end
....

5.

app/views/articles/show.html.haml
....
= link_to "Delete", article_path(@article), method: :delete, data: { confirm: "Are you sure?" }

6.終端機:git status
7.終端機:git add .
8.終端機:git commit -am "Edit & Destroy Articles"

【修改版型】
1.

app/assets/stylesheets/application.css.scss
....
ul {
    list-style: none;
} 

2.

app/views/layouts/application.html.haml
!!!
%html
%head
    %title Wiki
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
%body
    %nav.navbar.navbar-default.navbar-fixed-top
        .container
            = link_to "Wiki", root_path, class: "navbar-brand"
            %ul.nav.navbar-nav.navbar-right
                - if user_signed_in?
                    %li= link_to "New Article", new_article_path
    %p.notice= notice
    %p.alert= alert

    .container
        .row
            .col-md-8
                = yield
            .col-md-4
                %ul.list-group
                    %li= link_to "All Articles", root_path, class: "list-group-item"
                    - Category.all.each do |category|
                        %li= link_to category.name, articles_path(category: category.name), class: "list-group-item"

3.

app/views/articles/index.html.haml
- @articles.each do |article|
    %h2= link_to article.title, article
    %p
        Published at
        = article.created_at.strftime('%b %d, %Y')
    %p= truncate(article.content, length: 200)

4.

app/views/articles/show.html.haml
%h1= @article.title
%p= @article.content

.btn-group
    = link_to "Back", root_path, class: "btn btn-default"
    - if user_signed_in?
        = link_to "Edit", edit_article_path(@article), class: "btn btn-default"
        = link_to "Delete", article_path(@article), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-default"

5.終端機:git status
6.終端機:git add .
7.終端機:git commmit -am "Add basic styles"

【延伸閱讀】
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