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>
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 ‘텍스트’, ‘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대로 요청을 보내기만 한다면
해당 요청을 모두 처리 해버림!
<%= text_field_tag %>
<input> 태그 대신
<input> 태그엔 반드시..!
input 태그의 종류와 이름
<input> 태그엔 반드시..!
<input> 태그엔 반드시..!
태그 이름 자체가태그 종류
바로 뒤에붙는 “”가name 값
*종류가 많으니필요할때마다 찾아보기!
<input> 태그엔 반드시..!
두 번째 값으로 오는 건input의 value=“” 속성을 의미
즉, 처음부터 기본 값이 들어가게 할 때 설정!안 할꺼면 nil, 할꺼면 “기본값” 이렇게 쓰기
<input> 태그엔 반드시..!
<%= link_to %> 와<%= form_tag %> 를
Route에서 커스터마이징 한이름으로 경로를 바꿔보자!
<실습>
<%= 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 = [email protected] = params[:post][:title]@post.content = params[:post][:content]@post.save
Posts 컨트롤러 create 액션
[:title], [:content]를 또 한번 써줘야 함!
이렇게 작성 해주는건, 이후에 Strong Parameter 라는 개념을 쓰기 위함…
View
Controller
*Form_for에서는method 기본값이 post임
따라서 생략가능