Liz's Blog

12 in 12 Challenges #7:如何利用Rails4打造出求職網站

| Comments

12週挑戰終於過了一半,第六週(To Do Lists)和第七週求職網都是相對簡單的挑戰,呼~

作者:Mackenzie Child
影片:How to build a jobs board in Rails 4
Github:Jobs_Board

我的Github:jobsboard

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

【讓求職網具有新增、觀看、更新及刪除工作的功能】
1.終端機:rails g model job title:string description:text company:string url:string
2.終端機:rake db:migrate
3.終端機:rails g controller jobs
4.

config/routes.rb
....
  resources :jobs

  root "jobs#index"
end

5.

app/controllers/jobs_controller.rb
....
def index
end
....

6.安裝simple_formhamlbootstrap-sass

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

7.終端機:bundle install
8.另一視窗重啟終端機:rails s
9.將 app/assets/stylesheets/application.css重新命名為application.css.scss。

app/assets/stylesheets/application.css.scss
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 */

 @import "bootstrap-sprockets";
 @import "bootstrap";

10.在jquery下面加入。

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

11.終端機:rails g simple_form:install --bootstrap
12.用另一視窗重啟終端機:rails s
13.新增index.html.haml檔案。

app/views/jobs/index.html.haml
%h1 This is the Index Page

14.

app/controllers/jobs_controller.rb
....
class JobsController < ApplicationController
  before_action :find_job, only: [:show, :edit, :update, :destroy]

  def index
  end

  def show
  end

  def new
      @job = Job.new
  end

  def create
      @job = Job.new(jobs_params)

      if @job.save
        redirect_to @job
    else
        render "New"
      end
  end

  def edit
  end

  def update
  end

  def destroy
  end

  private

  def jobs_params
      params.require(:job).permit(:title, :description, :company, :url)
  end

  def find_job
      @job = Job.find(params[:id])
  end
end
....

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

app/views/jobs/new.html.haml
%h1 New Job

= render 'form'

= link_to "Back", root_path

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

app/views/jobs/_form.html.haml
= simple_form_for(@job, html: { class: 'form-horizontal'}) do |f|
    = f.input :title, label: "Job Title"
    = f.input :description, label: "Job Description"
    = f.input :company, label: "Your Company"
    = f.input :url, label: "Link to Job"
    %br/
    = f.button :submit

17.新增show.html.haml檔案。

app/views/jobs/show.html.haml
%h1= @job.title
%p= @job.description
%p= @job.company

= link_to "Home", root_path

18.

app/views/jobs/index.html.haml
- @jobs.each do |job|
    %h2= link_to job.title, job
    %p= job.company

= link_to "New Job", new_job_path

19.

app/controllers/jobs_controller.rb
....
def index
  @jobs = Job.all.order("created_at DESC")
end
....

20.

app/controllers/jobs_controller.rb
....
    def update
        if @job.update(jobs_params)
            redirect_to @job
        else
            render "Edit"
        end
    end

    def destroy
        @job.destroy
        redirect_to root_path
    end
....

21.

app/views/jobs/show.html.haml
....
= link_to "Home", root_path
= link_to "Edit", edit_job_path(@job)
= link_to "Delete", job_path(@job), method: :delete, data: { confirm: "Are you sure?"}

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

app/views/jobs/edit.html.haml
%h1 Edit Job

= render 'form'

= link_to "Back", root_path

23.終端機:git status
24.終端機:git add .
25.終端機:git commit -am "Add jobs CRUD ability"

【讓工作依照工作型態來分類】
1.終端機:rails g model category name:string
2.終端機:rake db:migrate
3.終端機:rails g migration add_category_id_to_jobs category_id:integer
4.終端機:rake db:migrate
5.

app/models/category.rb
....
  has_many :jobs
....

6.

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

7.終端機:rails c
8.終端機:Category.connection
9.終端機:Catogory
10.終端機:Category.create(name: "Full Time")
11.終端機:Category.create(name: "Part Time")
12.終端機:Category.create(name: "Freelance")
13.終端機:Category.create(name: "Consulting")
14.終端機:Category.all
15.終端機:Job
16.

app/views/jobs/_form.html.haml
= simple_form_for(@job, html: { class: 'form-horizontal'}) do |f|
    = f.collection_select :category_id, Category.all, :id, :name, {promt: "Choose a category" }
    = f.input :title, label: "Job Title"
    = f.input :description, label: "Job Description"
    = f.input :company, label: "Your Company"
    = f.input :url, label: "Link to Job"
    %br/
    = f.button :submit

17.

app/controllers/job_controller.rb
....
def jobs_params
  params.require(:job).permit(:title, :description, :company, :url, :category_id)
end
....

18.終端機:reload!
19.終端機:@job = Job.last
20.終端機:@job = Job.find(3)
21.終端機:@job = Job.find(4)
22.將application.html改成haml檔。

app/views/layouts/application.html.haml
!!!
%html
%head
    %title Ruby on Rails Jobs
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

%body
    - Category.all.each do |category|
        = link_to category.name, jobs_path(category: category.name)
    = yield

23.

app/controllers/jobs_controller.rb
....
    def index
        if params[:category].blank?
            @jobs = Job.all.order("created_at DESC")
        else
            @category_id = Category.find_by(name: params[:category]).id
            @jobs = Job.where(category_id: @category_id).order("created_at DESC")
        end
    end
....

24.終端機:git status
25.終端機:git add .
26.終端機:git commit -am "Add categories to jobs"

【修改版型】
1.

app/views/layouts/application.html.haml
!!!
%html
%head
    %title Ruby on Rails Jobs
    = 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
        .container
            .navbar-brand Rails Jobs
            %ul.nav.navbar-nav
                %li= link_to "All Jobs", root_path
                - Category.all.each do |category|
                    %li= link_to category.name, jobs_path(category: category.name)
            = link_to "New Job", new_job_path, class: "navbar-text navbar-right navbar-link"
    .container
        .col-md-6.col-md-offset-3
            = yield

2.

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import "bootstrap";

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    height: 100%;
  background: -webkit-linear-gradient(90deg, #1D976C 10%, #93F9B9 90%);
  background:    -moz-linear-gradient(90deg, #1D976C 10%, #93F9B9 90%);
  background:     -ms-linear-gradient(90deg, #1D976C 10%, #93F9B9 90%);
  background:      -o-linear-gradient(90deg, #1D976C 10%, #93F9B9 90%);
  background:         linear-gradient(90deg, #1D976C 10%, #93F9B9 90%);
  font-family: 'Lato', sans-serif;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.navbar-default {
    background-color: white;
    border-radius: 0;
    height: 80px;
    padding: 15px 0;
    border: none;
}

.navbar-brand {
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: 2em;
    font-weight: 300;
    color: #1D976C !important;
}

#jobs {
    .job {
        padding: 1em 0;
        border-bottom: 1px solid rgba(250,250,250, 0.5);
        h2 {
            font-size: 2.5em;
            font-weight: 300;
            margin-bottom: 0;
            color: white;
            a {
                color: white;
            }
        }
        p {
            color: rgba(250,250,250, 0.5);
        }
    }
}

#links {
    margin-top: 2em;
}

3.

app/views/jobs/index.html.haml
#jobs
    - @jobs.each do |job|
        .job
            %h2= link_to job.title, job
            %p= job.company

4.

app/views/jobs/show.html.haml
#jobs
    .job
        %h2= @job.title
        %p= @job.description
        %p= @job.company
        %button.btn.btn-default= link_to "Apply for Job", @job.url

#links
    = link_to "Back", root_path, class: "btn btn-sm btn-default"
    = link_to "Edit", edit_job_path(@job), class: "btn btn-sm btn-default"
    = link_to "Delete", job_path(@job), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-sm btn-default"

5.

app/views/jobs/_form.html.haml
= simple_form_for(@job, html: { class: 'form-horizontal'}) do |f|
    = f.collection_select :category_id, Category.all, :id, :name, {promt: "Choose a category" }, input_html: { class: "dropdown-toggle" }
    = f.input :title, label: "Job Title", input_html: { class: "form-control" }
    = f.input :description, label: "Job Description", input_html: { class: "form-control" }
    = f.input :company, label: "Your Company", input_html: { class: "form-control" }
    = f.input :url, label: "Link to Job", input_html: { class: "form-control" }
    %br/
    = f.button :submit

6.終端機:git status
7.終端機:git add .
8.終端機:git commit -am "Styling"

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