0515. view helper

View helper
5 / 15 (화)
멋쟁이 사자처럼 at 이화여대
Tutor . 김민정

<%= %> <% %>
.html.erb 파일에서 ruby문법을 쓰기 위해 썻던 저 괄호!!
View에서 ruby문법 적용하기!

[application.html.erb]
First.html.erb Second.html.erb Third.html.erb

루비 문법으로 html 태그를 만들 수 있다!

1. 사이트의 전체적인 디자인을 한꺼번에 적용할 수 있다.
2. 개별 템플릿에 페이지 자체의 내용만 작성할 수 있다.
3. 사이트 구조에 일관성을 부여할 수 있다.
즉, html로 여러 번 쓸 것을 helper를 이용해서 한 번에 쓴다!
Html : 정적인 text Helper : 동적인 ruby 코드

[application.html.erb]
엇 html의 태그랑 비슷한 이 view helper는 뭐지?
축제 사이트 : (URL)
F12 (개발자 도구)를 눌러보자!

자주쓰는 view helper tag
<%= link_to %>
<%= Form_tag %>
<%= Image_tag %>

https://github.com/mjung1798/ruby1-n
C9 create! / git clone

<%= link_to %>
<a></a>와 같은 역할

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

<a>텍스트</a>
<a href =‘URL’>텍스트</a>
https://github.com/mjung1798/ruby1-n.git

[Routes.rb]

[Routes.rb]
1. url을 직접 입력

[Routes.rb]
1. url을 직접 입력
텍스트
텍스트
URL
URL

# { }

# { }
Helper를 써야하는 상태에서
“문자열”안에 변수, 값을 넣으려면 #{} 로 감싸준다
*주의 : ‘’(작은 따옴표)는 안되고 “”(큰 따옴표)안에서만 가능*

# { }
x.Id 값에 따라서
Home/destroy/1
Home/destroy/2
등등으로 이동
“home/destroy/x.id”
문자 그대로 ~/x.id URL로 이동

# { }
이 앞 부분은 항상 바뀔 수 있는 부분이므로 root URL의 뒷부분만 작성!

[Routes.rb]
2. 컨트롤러와 액션을 명시
home 컨트롤러의 destroy 액션이 처리한다!

[Routes.rb]
주의! :home / :destroy지만 :x.id가 아니다!
post의 id값을 post_id로 지정한다!
이 post_id는 url로 해당 값을 넘겨줄 때 사용된다

3. URL에 이름을 붙여서 사용

[Routes.rb]

[Routes.rb]
이 route에 post_destroy라는 이름을 준다

[Routes.rb]
Route에서 이름 붙인 것에 ‘_path’를 이어서 써준다

[Routes.rb]
Route에서 post_id라는 이름으로 x.id값을 보낸다고 했으니까!
(post_id: x.id)로 값을 보내준다

<link_to 정리>

link_to 꾸미기 – 1. class 주기
<%= link_to ‘텍스트’, ‘URL’, class: “likelion”%>
<a href=“URL” class=“likelion”>텍스트</a>

link_to 꾸미기 – 1. class 주기
<%= link_to ‘텍스트’, ‘URL’, class: “likelion”%>

link_to 꾸미기 – 2. 여러 태그넣기
<%= link_to %>에
텍스트 말고 다른 tag들 넣기

<%= link_to %>
<a>
<a></a>로 감싼다!
do end 로 감싼다!

<%= link_to %> do end 로 감싼다!

‘URL’ ‘class’

<%= link_to ‘텍스트’, ‘URL’, class:”likelion” do%>
<원하는 html tag!>
<%end%>
‘URL’ ‘class’

<%= form_tag %>
<form>태그와 같은 역할

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

<%end%>
‘정보를 보낼 주소’
방법
Input을 감싸니까 do

[f12 개발자도구]
자동으로 2개의 input추가

보안 문제!
contollers/application_controller.rb

Form 태그에서 날라온 값들 중에
authenticity_token이름으로 정확한 값이
날라왔는지 확인해준다.
html의 <form>태그는 토큰 값을 자동으로 만들어주지 못해서
일단 주석처리하고 작업했다!
<%=form_tag%>를 쓰면 토큰 input을 자동 생성해줘서 해결!

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

왜 토큰 값이 필요할까..?
해커가 내 사이트에 마음대로
게시글을 쓰거나 글을 삭제할 수 있다.

route
내 사이트 뿐만 아니라 외부에서
왼쪽 URL대로 요청을 보내기만 한다면
해당 요청을 모두 처리해버림

<%end%>

<%end%>
엇 대체 할 수 있지 않을까? link_to의 3가지 방법!

1. URL 직접 입력
3. URL에 이름을 붙여 사용

[실습!]
<form action =“/home/create” method= “post”>
1. veiw헬퍼로 만들기
2. Action부분을 link_to의 3가지 방법으로!

solution 2. 컨트롤러와 액션을 명시

solution 3. URL에 이름을 붙여 사용

<%= text_field_tag %>
<input>태그와 같은 역할

<%= text_field_tag “태그의 이름”, nil%>
<input type=“태그의 종류”, name =“태그의 이름” >

<%= text_field_tag “태그의 이름”, nil, placeholder: “제목”%>
태그의 이름 자체가 태그 종류
*종류가 많으니 필요할때마다 찾기*
바로 뒤에 붙는 “”가 name 값

두번째 값으로 오는건 input의 value=“” 속성!
즉, 처음부터 기본값이 들어가게 할 때 설정!
안할꺼면 nil, 할꺼면 “기본값” 이렇게 쓰기

이후에 class style등의 부가적인 속성!

이제 남은건?
<%=image_tag%>
<%=form_for%>
<%=text_area%>
<%=button_tag%>
<input>

해커톤 때 구글링으로 해결하기

끝!!!
-힘들어요… 자러갈꺼에요…

0515. view helper

More Related Content

What's hot (12)

Similar to 0515. view helper (20)

More from 민정 김 (10)

0515. view helper

Editor's Notes