BookShelf 응용 프로그램 제작 단계

15139 단어 워크숍
워크숍 슬라이드Slide Share를 참조하십시오.
PC의 환경 설정은 Rails 시작 시 설정을 참조하십시오.
첫 번째 설정
새 Rails 프로젝트
우선 아까와 마찬가지로 새로운 rails 앱을 만들어 봅시다.
$
cd
rails new book_shelf
cd book_shelf
subl .
Gemfile 편집
다음은 Gemfile 설정입니다.
문서 끝에 다음 코드를 복사하려면 Gemfile을 엽니다.
Gemfile

# apps
gem 'haml-rails'
gem 'haml', '~> 4.0.5'

# bootstrap
gem 'bootstrap-sass', '~> 3.3.4'

group :development, :test do
  # apps
  gem 'pry'
  gem 'pry-doc'
  gem 'pry-stack_explorer'
  gem 'pry-byebug' if RUBY_VERSION >= '2.0.0'
  gem 'pry-coolline'
  gem 'pry-rails'
end
Gemfile을 저장한 후 터미널에서 다음 명령을 실행합니다.
$
bundle install
Book 모형 제작
Book 모형 제작 명령 요약
$
rails generate scaffold book title:string author:string price:integer
rake db:migrate
※ 이번에 사용한 것은 scaffold라 불리는 MVC(Model View Controller)가 만든 지령을 취합한 것입니다.
명령의 독법
  • rails generate scaffold=>rails에서 scaffold를 사용하여 생성합니다.
  • book=>book Model을 생성합니다.
  • title:string=>title열(원소), title에string(문자열)이 포함되어 있습니다.
  • price:integer=>price열(요소), price에는 인덱스(정수)가 포함되어 있습니다.
  • rails generate 수정 방법
    타자 오류를 눈치채지 못하고 제작했다면 삭제하고 제작하세요.
    이전 명령 삭제generatedestroy입니다.
    rails destroy scaffold book title:string author:string price:integer
    
    migration 실행
    데이터베이스에 반영해야 합니다. scaffold를 만든 후 다음 명령을 입력하십시오.
    $
    rake db:migrate
    
    서버를 시작하여 액세스할 수 있는지 확인합니다.
    $
    rails server
    
    다음 URL은 해당 브라우저(chrome 등)에서 액세스할 수 있습니다.
    http://localhost:3000/books
    
    다음 화면이 표시되면 성공합니다.

    Book 데이터 만들기
    이제 뉴북에서 몇 가지 데이터를 만들어 봅시다.
    다음 그림은 Book 모델과 생성된 데이터 간의 관계식입니다.

    북의 모델을 기반으로 북에 로그인할 수 있다는 것이다.또 제작을 확인한 북에는 편집·삭제 기능도 추가됐다.
    Book 모델 편집
    아까 만든 북은요.
  • 타이틀 (제목)
  • autohor(필자)
  • price(가격)
  • 라는 세 가지 데이터를 담았다.
    이것만 봐도 책의 데이터에는 발매일, 평론, 개요 등이 들어 있다.
    따라서 Book 모델에 새로운 데이터를 추가하여 저장할 수 있는 데이터 종류를 늘려보세요.
    이번에는 북모델에 추가neko_id했다.
    $
    rails generate migration AddColumnNekoIdToBook neko_id:string
    rake db:migrate
    
    ※ 원래라면 네코id는 수치 neko_id: integer 이기 때문에 일반적이지만, 다음 수치 이외에도 넣기 때문에string (문자열) 을 지정합니다.
    명령 해설
    열 추가
    rails에서 이전 파일을 만든 후 이 파일들을 반영해서 데이터베이스를 조작합니다.
  • rails generate migration AddColumnNekoIdToBook neko_id:string는 마이그레이션 파일을 만드는 명령입니다.
  • 여기 만들어진 책표에 새 neko_id열을 추가해야 한다고 적혀 있습니다.
  • 데이터베이스에 반영하려면 마이그레이션을 수행해야 합니다.rake db:migrate 바로 그거야.
  • 기능 추가
    본 로그인, 편집, 삭제의 기본 기능은 scaffold를 사용하여 실현되었습니다.
    등록하고 싶은 데이터도 추가됐다.
    Review Model의 구성
    여기서 북과 리뷰의 관계를 살펴봅시다.
    그림과 같다.

    하나의 북에는 여러 개의 리뷰가 있습니다.
    Review의 데이터가 어느 북에 연결되는지 판별하기 위해 Review에서 북을 사용합니다아이디 있으래요.
    나는 scaffold로 북모델을 만들 때 id를 추가한 것을 기억하지 못할 것 같지만, 이것은 Rails가 자동으로 만든 것이다.
    따라서 리뷰 측이 어떤 북과 연관이 있는지 id로 지정하면 연관성을 나타낼 수 있다.
    Review Model 생성
    그럼 리뷰 모델도 실제로 만들어 보자.
    rails generate scaffold review title:text body:string book_id:integer
    
  • 리뷰로 등록된 데이터는 타이틀, 바디, 북아이디 3개를 만들어 봤어요.
  • 아까처럼 미그레이트 진행해.
    $
    rake db:migrate
    
    모델 간의 관계 정의
    그런 다음 Review Model과 Book Model의 관계를 정의합니다.
    반복적으로 Book 및 Review는 다음 그림과 같은 관계를 가집니다.

    상상Amazon해보면 이해하기 쉬울 텐데 책 한 권에 평론이 많아요.그것과 같다.
    코드에 이것을 표현하면 다음과 같다.
    app/models/book.rb
    class Book < ActiveRecord::Base
      has_many :reviews
    end
    
    app/models/review.rb
    class Review < ActiveRecord::Base
      belongs_to :book
    end
    
    이렇게 하면 북에서 리뷰를, 리뷰에서 북을 호출할 수 있습니다.
    입력 형식 개선
    방문localhost:3000/reviews, 방금 제작한 책 데이터와 관련된 데이터를 제작합니다.
    따라서 댓글의 새 화면에 다음과 같은 화면이 표시됩니다.

    평론을 하려면 어떤 책을 평론할지 선택해야 하지만 기본 형식에서 북은수치로 id를 선택하는 형식입니다.
    이해하기 어려운 만큼 우선 북의 이름(title)에서 View를 선택해야 한다.
    app/views/reviews/_form.html.haml
    〜中略〜
      / .field
      /   = f.label :book_id
      /   = f.number_field :book_id
      .field
        = f.label :book_id
        = f.select :book_id, options_for_select(Book.all.map{|book| [book.title, book.id]})
    
    〜中略〜
    
    코드의 전문은 여기에 있다
    여기에 많은 것을 설명해야 한다는 것을 이해하려면 복사해 주십시오.잘 반영되면 다음과 같은 뷰가 된다.

    이제 책을 선택해서 평론을 만들 수 있다.
    서버를 시작해서 실제 관련 데이터를 만들어 보세요.
    $
    rails s
    
    경로
    논리적으로 북과 리뷰가 연관되어 있습니다.
    이렇게 말하지만 브라우저 작업에서는 북과 리뷰가 분리됩니다.
    따라서 북스 차트에서 리뷰로 이동할 수 있는 새 페이지에 링크를 추가합니다.
    하는 일은 그리 어렵지 않다.
    books/index.html.haml
    / 中略
    
    = link_to 'New Book', new_book_path
    
    나는 이런 기술을 가지고 싶다.이 newbook_path가 책으로 날아가는 새 제작 페이지 설정이기 때문에 리뷰스의 새 제작 페이지로 날아가고 싶다면 newreview_그냥 path로 전화하면 돼.
    app/views/books/index.html.haml
    %h1 Listing Books
    = link_to 'レビューの新規作成', new_review_path
    
    따라서 페이지 상단에 링크 단추를 추가하여 회고 페이지를 만듭니다.
    코드의 전문은 여기에 있다

    ※ 자세히 알고 싶은 사람은 나중에 라일스의 루틴을 조사해 보세요.
    neko_id로 책 관리
    과제 설명
    다음은 과제다.
    다음 조건을 충족시키기 위해 실시neko_id해 보세요.
  • 8자리 랜덤 알파벳 숫자(전체 반각)
  • 8자리 숫자나 알파벳 모두 금지
  • 시작하는 문자는 1~9의 숫자 중 하나여야 한다
  • 이루다
    irb(ruby의 코드 실행 환경)
    상술한 실현은 라일스의 실현이라기보다는 루비의 논리적 제작이다.
    지령선에서 irb해 보세요.
    따라서 루비의 코드 실행 환경이 상승합니다.

    그리고 푸념을 늘어놓으면서 다양한 시도를 해보세요.
    neko_id 데이터 로그인 및 확인
    상기 논리가 있으면 등록과 확인이 가능하도록 수정됩니다.
    마음대로 질문하세요.

    bootstrap 가져오기
    궁금한 게 있어서요.
    너무 재미없어 보여!!
    따라서bootstrap의 가져오는 방법을 소개합니다.
    config/application.rb
    config.sass.preferred_syntax = :sass
    
    app/assets/stylesheets/application.css.sass
     /*
     *= require_tree .
     *= require_self
     */
    
    // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
    @import bootstrap-sprockets
    @import bootstrap
    
    app/assets/javascripts/application.js
    //= require jquery
    //= require bootstrap-sprockets
    
    사용 방법 참조Boostrap CSS.
    Bootstrap을 사용한 디자인
    여기서 시간을 내기를 원치 않기 때문에 책/index를 예로 들면 책strap으로 디자인하면 어떻게 되는지 소개해 드리겠습니다.
    app/views/books/index.html.haml
    %h1 書籍一覧
    = link_to '書籍の新規登録', new_book_path, class: 'btn btn-primary'
    = link_to 'レビューの新規作成', new_review_path, class: 'btn btn-primary'
    
    %table.table.table-striped
      %thead
        %tr
          %th Title
          %th Author
          %th Price
          %th
          %th
          %th
    
      %tbody
        - @books.each do |book|
          %tr
            %td= book.title
            %td= book.author
            %td= book.price
            %td= link_to '確認', book
            %td= link_to '編集', edit_book_path(book)
            %td= link_to '削除', book, :method => :delete, :data => { :confirm => 'Are you sure?' }
    
    
    bootstrap의 css를 적용하기 위해class를 지정했습니다.
    이에 대응하는 것은 아래 열거한 부분이다.
    예제
    # イコールのものは、文末に classを指定する。
    = link_to '書籍の新規登録', new_book_path, class: 'btn btn-primary'
    = link_to 'レビューの新規作成', new_review_path, class: 'btn btn-primary'
    
    # %からタグ指定があるものは、その後ろにドットをつければclassが反映される。
    %table.table.table-striped
    
    잘 반영된다면 다음과 같다.

    조금 예뻐졌어요!

    좋은 웹페이지 즐겨찾기