Ruby on rails - 가상 은행 입금기능 만들기 (CR)

Ruby on rails - 가상 은행 입금기능 만들기 (CR)

> CRUD 의 create , read 를 이용하여 가상의 은행에서 입금을 하는 화면을 실습할 것입니다.
가상의 은행을 만들어보자!

입금을 하는 기능을 만들겁니댜!

| 1. 프로젝트 만들기

rails new bank

프로젝트를 만들어 줍니다.

| 2.컨트롤러 만들기

rails g controller bank index deposit deposit_create

위와 같이 bank 컨트롤러에 index deposit deposit_create 액션을 만들어줍니다.

#app/controllers/bank_controller.rb
​
class BankController < ApplicationController
  def index
  end
​
  def deposit
  end
​
  def deposit_create
  end
end

그러면 위와 같이 컨트롤러안에 index, deposit, deposit_create 세가지 액션이 담긴 채로 생성된 것을 확인해 볼 수 있습니다.

#routes.rb
​
Rails.application.routes.draw do
  get 'bank/index'
  #get 'bank/index' => 'bank#index'
  get 'bank/deposit' 
  #get 'bank/deposit' => 'bank#deposit'
  get 'bank/deposit_create'
  #get 'bank/deposit_create' => 'bank#deposit_create'
  
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
​

라우트를 가보면 위와 같이 자동으로 라우트가 만들어져 있는것도 확인할 수 있습니다.
| 3.모델 만들기

rails g model Banking name:string account:string bank_name:string price:integer

위의 명령어로 모델의 attribute들 역시 한번에 생성해줍니다.
Banking이라는 모델을 name이라는 attribute를 string 타입으로, account 라는 attribute를 string 타입으로, bank_name을 string 타입으로, price를 integer 타입으로 생성해주는 것을 말합니다.

#app/models/banking.rb
class Banking < ApplicationRecord
end

모델이 생성완료되었습니다.

#db/migrate/xxx.rb
​
class CreateBankings < ActiveRecord::Migration[5.1]
  def change
    create_table :bankings do |t|
      t.string :name
      t.string :account
      t.string :bank_name
      t.integer :price
​
      t.timestamps
    end
  end
end

마이그레이션 파일 생성완료되었습니다.

이쯤에서 서버를 한번 실행해 봅시다.

앞으로 자주보게 될 화면입니다! 이는 db를 생성만 해주고 migration을 해주지 않아서 인데요. rake db:migrate라는 명령어로 문제를 해결해주기만 하면 됩니다ㅎㅎ db migration은 꼭 해주셔야합니다!!

| 4. create 액션 만들기
입금의 역할을 하는 deposit_create 액션을 아래와 같은 코드를 넣어 create 기능을 수행하는 액션을 만들어 줍시다.

#controllers/bank_controller.rb
​
def deposit_create
    @bank = Banking.new
    @bank.name =params[:name]
    @bank.account =params[:account]
    @bank.bank_name =params[:bank_name]
    @bank.price =params[:price]
    @bank.save
    
    redirect_to '/bank/index'
end

| 5. route 수정 및 create 액션에 해당하는 view 만들기

#app/views/bank/deposit.html.erb
​
<h1>입금화면</h1>
<form action='/bank/deposit_create' method='post'>
   <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
   입금자<br>
   <input type="text" name="name"><br>
   계좌번호<br>
   <input type="text" name="account"><br>
   은행명<br>
   <input type="text" name="bank_name"><br>
   입금금액<br>
   <input type="text" name="price">원<br>
   <input type="submit" value="제출">
</form>

위의 코드를 deposit.html.erb에 넣어줍니다.
여기서 잠깐!만약  <%= hidden_field_tag :authenticity_token, form_authenticity_token %> 부분이 없다면?

위와 같이 invalid authenticity token 에러가 뜨게됩니다.  말그대로 invalid(유효하지않은) authenticity token (인증 토큰) 을 보냈다는 것인데요. 레일즈에서는 이러한 인증토큰이 없이 데이터를 post 방식으로 요청하게되면 위와 같은 에러가 뜨게됩니다. csrf 공격을 방지하기 위해서 토큰을 넣어줘야 합니다.(csrf란 웹페이지에 악성코드나 링크를 보내주는 방법)

CSRF란? 사이트 간 요청 위조(Cross-site Request Forgery) 웹 어플리케이션 취약점 중 하나로 사용자가 자신의 의지와 무관하게 공격자가 의도한 행동을 하는것
<%= hidden_field_tag :authenticity_token, form_authenticity_token %> 따라서 이와 같은 코드가 이를 방지하는 인증토큰을 만들어 주게 되는것입니다.

#config/routes.rb
​
Rails.application.routes.draw do
  get 'bank/index'
​
  get 'bank/deposit'
​
  post 'bank/deposit_create'
​
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

위와 같이 'bank/deposit_create'에 해당하는 라우트를 post로 바꿔줍니다.
웹을 개발하면서, 위와같이 서버에 요청을 보낼때 get, post 라는 단어들에 대해 궁금증이 생기실겁니다. 웹에 대해 경험이 있으신분들은 이미 알고있는 개념이겠지만, 저도 그랬듯이 처음 웹개발을 시작할때, 어떨때는 form을 이용해 요청을 get으로 보내주기도하고, post로 보내주기도 하는데 그 이유가 뭐지? 차이가뭐지?라는 의문이 많이 들었고, get하나만 쓰면되지 왜 post도 써야 하지?라는 생각도 들었었습니다. 이러한 궁금증이 생기는 분들을 위해 포스팅한 글주소를 첨부하겠습니다.
http://ideveloper2.tistory.com/61

위와 같은 화면이 만들어진것을 확인할 수 있습니다. 초큼 못생긴화면이지만 조금있다가 꾸며줄 예정입니다 ㅎㅅㅎ

• 자,이제 우리의 실습에서 입금기능에 해당하는 create 부분은 만들어 주었습니다. 
• 이제는, 이렇게 create 해준 우리의 입금데이터들을 read 하는 기능을 만들어줄것입니다.

| 6. read에 해당하는 액션, index 액션 뷰 만들어주기

#app/controllers/bank_controller
​
  def index
   @banks=Banking.all
  end

• 위와 같이 index액션을 수정합니다. @banks=Banking.all 이라는 것에 대해 설명하면, 앞에서 만들어준 Banking 이라는 모델에 저장된 데이터를 모두(all) 불러와 @banks 라는 변수에 담아주고, 이를 이용해 뷰에서 데이터들을 보여주게 되는 것입니다.

#app/views/bank/index.html.erb
<h1>입금내역을 조회합니다.</h1>
<% @banks.each do |bank| %>
    입금자명: <%= bank.name %><br>
    은행명: <%= bank.bank_name %><br>
    입금계좌: <%= bank.account %><br>
    입금금액: <%= bank.price %><br>
    <br>
<% end %>
<a href="/bank/deposit">입금하러 가기</a>

• 위와 같이 index 뷰 화면을 수정해 줍니다. @banks 라는 변수에 데이터를 담고, each do 라는 메소드로 데이터들을 뿌려주게 됩니다. 말그대로 쌓인 데이터들을 each (각각의 데이터들로) do (기능을 수행한다) 라는 뜻입니다.
  

• 위와같이 디비에 저장된 데이터들을 보여줄수 있었습니다! 앞서 본 화면들은 너무 보기에 좋지 않으니 예쁘게 꾸며줍시다.!

| 7. 부트스트랩으로 꾸며주기
https://getbootstrap.com/docs/4.0/getting-started/introduction/ 주소로가서,
css, js에 해당하는 부분을 복사해서, app/views/layouts/application.html.erb 의 <head> </head> 사이에 넣어줍니다.
이제, 부트스트랩의 컴포넌트 들을 활용해봅시다.

https://getbootstrap.com/docs/4.0/components/card/ 로 들어가, 아래의컴포넌트 ui를 활용해봅시다.

• 위의 코드를 복사해서,

#app/views/bank/index.html.erb 
<div class="card text-center">
  <div class="card-header">
   <h1>입금내역을 조회합니다.</h1>
  </div>
  <div class="card-body">
    <% @banks.each do |bank| %>
        입금자명: <%= bank.name %><br>
        은행명: <%= bank.bank_name %><br>
        입금계좌: <%= bank.account %><br>
        입금금액: <%= bank.price %><br>
        <br>
    <% end %>
    <a href="/bank/deposit" class="btn btn-primary">입금하러 가기</a>
  </div>
  <div class="card-footer text-muted">
    produced by -이승규-
  </div>
</div>

• 위와 같이 부트스트랩 사이트에서 복사했던 내용과 기존의 코드를 합쳐줍시다.
  

정말 예뻐졋네용 !! (아님말공)

과제:

이제 입금하는 화면을 부트스트랩 컴포넌트를 활용하여 예쁘게 꾸며봅시다!