TOP4 뷰 헬퍼사용법

<a> / <img> / <form> / <input>

잘가!

시작 전 질문?

<%= link_to %>

<a> 태그 대신

<%= link_to ‘텍스트’, ‘URL’ %>

<%= link_to ‘텍스트’, ‘URL’ %>

<a> 텍스트 </a>

<%= link_to ‘텍스트’, ‘URL’ %>

<a> 텍스트 </a>

<a href=“URL”> 텍스트 </a>

Route

1번째 방법 - url을 직접 입력

텍스트 URL

텍스트URL

1번째 방법 - url을 직접 입력

잠깐 짚고 넘어가는 RUBY 문법!

루비 문법을 써야하는 상태에서“문자열” 안에 문자 그대로가 아닌

변수/값 등을 넣으려면 #{} 로 감싸준 후 써준다!*주의 ! ‘ ’(작은 따음표) 는 안되고 “ ”(큰 따음표) 안에서만 가능!

“posts/destroy/post.id”

=> 문자 그대로 ~/post.id URL로 이동

=> post.id 값에 따라서posts/destroy/1posts/destroy/2

등등으로 이동

이 앞 부분은 항상 바뀔 수 있는 부분이기 때문에root URL 뒷 부분만 작성해주자!

바람직하지 못한 방법

Route

posts 컨트롤러의 destroy 액션이 처리!

2번째 방법 – 컨트롤러와 액션을 명시

Route

posts 컨트롤러의 destroy 액션이 처리!

2번째 방법 – 컨트롤러와 액션을 명시

Route

URL로 넘겨주는 post의 id 값!

id: post의 id 값

주의! :posts / :destroy 지만:post.id가 아니다!!!

2번째 방법 – 컨트롤러와 액션을 명시

3번째 방법 – url에 이름을 붙여서 사용

3번째 방법 – url에 이름을 붙여서 사용

Route

3번째 방법 – url에 이름을 붙여서 사용

Route

3번째 방법 – url에 이름을 붙여서 사용

Route

이 route에post_destroy 라는 이름을 준다!

3번째 방법 – url에 이름을 붙여서 사용

Route

Route에서 이름 붙인 것에 ‘_path’ 를 이어서 써 줌!

3번째 방법 – url에 이름을 붙여서 사용

Route

Route에서 id 라는 이름으로 post의 id 값을 보낸다고 했으니까(id: post.id)로 값을 보내준다!

link_to 정리

<%= link_to ‘텍스트’, ‘URL’ %>

link_to 정리

link_to URL에 2개의 값 보낼 때 -1

link_to URL에 2개의 값 보낼 때 -2

Route

link_to URL에 2개의 값 보낼 때 -2

Route

값을 보낼 이름: 실제 값

post_id: post.id

id: comment.id

link_to URL에 2개의 값 보낼 때 -3

Route

link_to URL에 2개의 값 보낼 때 -3

Route

Route에서_내가_정한_이름_url(값을 보낼 이름: 실제 값)

<%= link_to %>꾸미기

<%= link_to %>에class 주기

link_to 꾸미기1 – class 주기

<a> 와<%= link_to %>는 같다.

<a>에 class를 줄땐?<a class=“link”>

link_to 꾸미기1 – class 주기

<a> 와<%= link_to %>는 같다.

<%= link_to %> 에 class를 줄땐?

<%= link_to ‘텍스트’, ‘URL’, class: “link” %>*순서 중요!

link_to 꾸미기1 – class 주기

<%= link_to ‘텍스트’, ‘URL’, class: “hi” %>

link_to 꾸미기1 – class 주기

<%= link_to ‘텍스트’, ‘URL’, class: “hi” %>

link_to 꾸미기1 – class 주기

<%= link_to %>에텍스트 말고 다른 tag 들 넣기

link_to 꾸미기2 – 여러 태그 넣기

<a> 태그가 넣는 법

link_to 꾸미기2 – 여러 태그 넣기

<a> / </a>로 감싼다!

<%= link_to %> 태그가 넣는 법

do / end로 감싼다!

link_to 꾸미기2 – 여러 태그 넣기

<%= link_to %> 태그가 넣는 법

do / end로 감싼다!

link_to 꾸미기2 – 여러 태그 넣기

<%= link_to %> 태그가 넣는 법

link_to 꾸미기2 – 여러 태그 넣기

<%= link_to ‘텍스트’, ‘URL’, class: “hi” do %><~원하는 html tag~>

<% end %>

‘URL’ ‘class’

<%= image_tag%>

<img> 태그 대신

<%= image_tag “사진 경로”, class: ”hi”%>

<%= image_tag “사진 경로”, class: ”hi”%>

<img src=“사진경로” class=“hi”>

원래 app/assets/images 에 있는 사진을 쓰려면..

assets

images

lion.png

*이전 보조강의 참고!

뷰헬퍼로 app/assets/images 에 있는 사진을 쓰려면..

assets

images

lion.png images 폴더 안에 있는이미지의 이름만 쓰면

알아서 경로를 찾아 줌!

*주의! app/assets/images에 넣지 않고Public 폴더에 넣은 사진은 모든 경로를 다 적어줘야 함!

public

img

lion.png

image_tag에 class를 주고 싶다면!

public

img

lion.png

<%= form_tag %>

<form> 태그 대신

<form> 태그엔 반드시..!

<form method=“방법” action=“정보를 보낼 주소”>

<%= form_tag %> 태그엔 반드시..!

<%= form_tag(“URL”, method: “post/get”) do %>

정보 보낼 주소 방법 input들을감싸니까 do

<% end %>

★ form 뷰헬퍼를 반드시 써야하는 이유 ★

★ form 뷰헬퍼를 반드시 써야하는 이유 ★

★ form 뷰헬퍼를 반드시 써야하는 이유 ★

자동으로 2개의 input을 추가 해준다..! 왜..?

보안 문제 때문에!!!!!

기억하시나요..?

app/controllers/application_controller.rb

app/controllers/application_controller.rb

한번 작성해보자!

app/controllers/application_controller.rb

Form 태그에서 날라온 값들 중에authenticity_token 이름으로

정확한 값이 날라왔는지 확인해줌!

html <from> 태그는 토큰 값을 자동으로 만들어 주지 못해서일단 주석 처리하고 작업 했던 것임..!

<%= form_tag %>를 쓰면 토큰 input을 자동 생성해줘서 해결!

왜 토큰 값이 필요할까..?

해커가 내 사이트에 마음대로게시글을 쓰거나 글을 삭제할 수 있음!

우리의 route

즉, 내 사이트 뿐만 아니라 외부에서왼쪽 URL대로 요청을 보내기만 한다면

해당 요청을 모두 처리 해버림!

코딩 예시

Route

Route

<%= text_field_tag %>

<input> 태그 대신

<input> 태그엔 반드시..!

input 태그의 종류와 이름

<input> 태그엔 반드시..!

<input> 태그엔 반드시..!

태그 이름 자체가태그 종류

바로 뒤에붙는 “”가name 값

*종류가 많으니필요할때마다 찾아보기!

<input> 태그엔 반드시..!

두 번째 값으로 오는 건input의 value=“” 속성을 의미

즉, 처음부터 기본 값이 들어가게 할 때 설정!안 할꺼면 nil, 할꺼면 “기본값” 이렇게 쓰기

<input> 태그엔 반드시..!

<%= link_to %> 와<%= form_tag %> 를

Route에서 커스터마이징 한이름으로 경로를 바꿔보자!

<실습>

조금만 더 해보자!

<%= form_for %>

<%= form_for %>

모델과 연동이 되는 form 태그로‘수정’에 매우 용이하다!

*사실 이걸 주로 써야함

수정 기능의 핵심

수정 기능의 핵심

미리 값이 들어가 있어야 한다!

*찬하 update 강의 참고…

<%= form_for 테이블row값, url: post_create_path, method: “post” do |f| %>

<% end %>

<%= form_for 테이블row값, url: post_create_path, method: “post” do |f| %>

<% end %>

테이블의 1개의 row 값 어떻게 가져오더라..?

id title content

1 첫번째 와우!

2 제목이다 멋사짱짱

3 아나 두근두근

4 멋쟁이 사자처럼

테이블의 1개의 row 값 어떻게 가져오더라..?

posts

id title content

1 첫번째 와우!

2 제목이다 멋사짱짱

3 아나 두근두근

4 멋쟁이 사자처럼

테이블의 1개의 row 값 어떻게 가져오더라..?

posts

Post.find(1)

id title content

1 첫번째 와우!

2 제목이다 멋사짱짱

3 아나 두근두근

4 멋쟁이 사자처럼

테이블의 1개의 row 값 어떻게 가져오더라..?

posts

id title content

1 첫번째 와우!

2 제목이다 멋사짱짱

3 아나 두근두근

4 멋쟁이 사자처럼

테이블의 1개의 row 값 어떻게 가져오더라..?

posts

Post.find(2)

id title content

1 첫번째 와우!

2 제목이다 멋사짱짱

3 아나 두근두근

4 멋쟁이 사자처럼

테이블의 1개의 row 값 어떻게 가져오더라..?

posts

id title content

1 첫번째 와우!

2 제목이다 멋사짱짱

3 아나 두근두근

4 멋쟁이 사자처럼

테이블의 1개의 row 값 어떻게 가져오더라..?

posts

Post.new

<%= form_for 테이블row값, url: post_create_path, method: “post” do |f| %>

<% end %>

<%= form_for 테이블row값, url: post_create_path, method: “post” do |f| %>

<% end %>

테이블의 1개의 row 값 어떻게 가져오더라..?

id title content

1 첫번째 와우!

2 제목이다 멋사짱짱

3 아나 두근두근

4 멋쟁이 사자처럼

posts 테이블에 row를 추가 하는 form

<%= form_for Post.new, url: post_create_path, method: “post” do |f| %>

<% end %>

테이블의 1개의 row 값 어떻게 가져오더라..?

id title content

1 첫번째 와우!

2 제목이다 멋사짱짱

3 아나 두근두근

4 멋쟁이 사자처럼

posts 테이블에 row를 추가 하는 form

<%= form_for Post.find(3), url: post_create_path, method: “post” do |f| %>

<% end %>

id title content

1 첫번째 와우!

2 제목이다 멋사짱짱

3 아나 두근두근

4 멋쟁이 사자처럼

posts 테이블에 row를 수정 하는 form

<%= form_for Post.find(3), url: post_create_path, method: “post” do |f| %>

<% end %>

<%= f.text_field :title %>

<%= f.text_filed :content %>

<%= f.submit %>

각 input이Posts 테이블의 어떤 column 값에해당하는지 :column이름 으로 써준다!

그러면 알아서 Post.find(3)에 있는해당 값들이 input에 들어간다..!

<%= form_for Post.new, url: post_create_path, method: “post” do |f| %>

<% end %>

<%= f.text_field :title %>

<%= f.text_filed :content %>

<%= f.submit %>

데이터를 새로 만들 때도 똑같이!

<%= form_for @post, url: post_create_path, method: “post” do |f| %>

<% end %>

<%= f.text_field :title %><%= f.text_filed :content %><%= f.submit %>

보통은 컨트롤러/액션에서 변수로 테이블의 row 값을 선언해줌..!

@post = Post.new

컨트롤러/액션

뷰

@post = Post.find(params[:id])또는

*form_for로 보낸 값은 적용된 모델이름의 hash 안에 담겨서 보내진다!

<%= form_for @post, url: post_create_path, method: “post” do |f| %>

<% end %>

<%= f.text_field :title %><%= f.text_filed :content %><%= f.submit %>

Post.new

Submit 버튼을 누르면..!

post_create 경로로{“post” => {“title” => “title input에 적은 값”, “content” => “content input에 적은 값”}} 식의 hash를 보냄

따라서 params[:post]로 hash를 먼저 받아주고, 그 hash 안에서 또 값을 꺼내준다.

@post = Post.new@post.title = params[:post][:title]@post.content = params[:post][:content]@post.save

Posts 컨트롤러 create 액션

[:title], [:content]를 또 한번 써줘야 함!

이렇게 작성 해주는건, 이후에 Strong Parameter 라는 개념을 쓰기 위함…

View

Controller

*Form_for에서는method 기본값이 post임

따라서 생략가능