블로그 이미지
App 개발에 대한 내용을 다룰 예정입니다. AppleSherbet

카테고리

분류 전체보기 (39)
한국프로야구 어플 (18)
세미나 (2)
Java Development (13)
Android App소개 (3)
기타 (2)
당근마켓 (1)
Total297,962
Today12
Yesterday16
Viewing and posting comments
 
이전 튜토리얼에서 홈페이지(말그대로 index페이지)를 완성했었다. 이제 Post 상세 페이지를 작성해보자.
Post 페이지는 현재 포스트 내용, 포스트에 붙은 Comment들을 보여준다. 그리고 이번장에서 새로운 Comment를 추가 하는 것 까지 해보겠다.
 
Creating the 'show' action
 
Post 상세 페이지를 보여주기 위해서 Appliation 컨트롤러에 show() 액션을 만들자.
/yabe/app/controller/Application.java
 
public static void show(Long id) {
    Post post = Post.findById(id);
    render(post);
}
 
show() 액션은 매우 심플하다. 특정 포스트에 대한 id값을 인자로 받아서 Post.findById(id)를 이용해 Post 객체를 얻는다. 그리고 render(post) 를 호출하여 show.html을 브라우져에 렌더링 할 것을 요청한다.
 
[여기서 잠깐]
만약 show 액션에 들어온 id 파라메터가 정상적인 값이 아닌 경우 id값은 null이 되고 Play는 자동으로 validation error를 error 컨테이너에 넣게 된다. 차후 validation 값을 체크해 해당 에러를 핸들링 할 수 있다.
 
이제 브라우져에 보이게 될 show.html 을 만들자.
/yabe/app/views/Application/show.html
 
#{extends 'main.html' /}
#{set title:post.title /}
 
#{display post:post, as:'full' /}
 
우리가 이미 display tag를 만들어 놓았기 때문에 코드는 아주 간단하다. display tag를 full 모드로 호출하고 있다.
 
Adding links to the details page
 
이제 Post 상세 페이지로 이동 할 수 있는 링크를 만들자. 기존에 만들었던 display tag에 모든 링크는 '#' 로 남겨 두었다. 이 #으로 남겨놓은 링크 부분을 Application.show 액션을 호출 하게끔 해야한다. 이전에 설명 했듯이 Play에서는 @{...} 노테이션을 이용하면 쉽게 링크를 만들 수 있다. (만약 @{...} 의 기능을 눈으로 확인하고 싶다면 렌더링된 html 페이지를 '소스보기'로 한번 확인해 보면 이해가 쉬울 것이다.)
자 이제 /yabe/app/views/tags/diaplay.html 을 수정하자.
 

${_post.title}

 
홈페이지를 refresh 하고 post 의 타이틀을 클릭해보자.


잘나오는 것을 볼 수 있다. 이제 다시 홈으로 돌아갈 수 있도록 blog title 에 홈으로 가는 링크를 달아보자.
/yabe/app/views/main.html 을 열자
 
About this blog

${blogTitle}

${blogBaseline}

 
이제 홈과 Post 상세 페이지를 왔다갔다 할 수 있게 됐다.
 
Specifying a better URL
 
브라우져상에서 보면 상세 페이지의 URL이 아래와 같다.
 
/application/show?id=1
 
이렇게 나오는 이유는 Play에서 route 파일에 특별히 명시해두지 않은 URL의 요청이 오면 'catch all' route를 타기 때문이다.
 
*    /{controller}/{action}            {controller}.{action}  
 
Post 의 show액션을 위해 더 나은 URL을 명시해보자. REST Architecture에서 보면 URL 혹은 URI는 Web에 존재하는 모든 리소스를 표현하는 주소라고 이야기 한다. 그만큼 URL자체가 명확하게 표현하고자 하는바를 나타내는 것이 좋다.
/yabe/conf/routes 파일을 수정하자.
 
GET     /posts/{id}                             Application.show
 
{id} 라고 명시된 부분은 URL path에서 추출되는 것이다. URI pattern에 대해 궁금하다면 이곳을 한번 읽고 넘어가자.
 
브라우져를 refresh하고 URL이 수정한대로 잘 나오는지 보자.


Adding pagination
 
Post간의 이동을 쉽게 하기 위해 pagenation(페이지 번호)을 추가 할 것이다. view template에서 사용할 수 있게Post 클래스에 이전/다음 포스트를 리턴하는 메소드를 추가하자.
/yabe/app/models/Post.java
 
public Post previous() {
    return Post.find("postedAt < ? order by postedAt desc", postedAt).first();
}
 
public Post next() {
    return Post.find("postedAt > ? order by postedAt asc", postedAt).first();
}
 
위 코드는 최적화된 코드는 아니나 지금은 이정도로 충분하다. 이제 show.html template에 pagination 링크를 달아보자.  (#{display /} 바로 전에 추가)
/yabe/app/views/Application/show.html 
 

 
 
자 이제 comment form 을 만들시간이다. Application controller 에 postComment() 메소드를 만드는 것으로 부터 시작해보자.
/yabe/app/controllers/Application.java
public static void postComment(Long postId, String author, String content) {
    Post post = Post.findById(postId);
    post.addComment(author, content);
    show(postId);
}

postComment()에서는 Post 클래스에 미리 만들어 놓았던 addComment()를 사용하고 있다. 그리고 곧바로 show() 액션을 호출한다. 이제, show.html에 Comment 입력할 수 있는 form을 만들자. (html의 기본을 알고 있다면 form에 대해서는 쉽게 이해할 수 있을 것이다.)

show.html (#{display /} 부분 바로앞)에 아래의 코드를 추가하자.
/yabe/app/views/Application/show.html 

Post a comment

#{form @Application.postComment(post.id)}

#{/form}

코드에서 보면 현재 #{form @Application.postComment(post.id)} 라고 호출하고 있다. 실제 postComment 메소드를 살펴보면postComment(Long postId, String author, String content) 라고 되어있고 이는 post.id 외에 나머지 인자는 form 안에 name="author" 부분과 name="content" 부분에서 유저가 입력하는 값이 전달 됨을 알 수 있다.
 

이제 Comment 를 달수 있게 됐다. 

 

Adding validation

현재로썬 Comment를 만들때 아무런 validation 체크를 하지 않고 있다. author 필드와 content 필드는 모두 필수 입력 항목이므로 validation을 추가해보자. Play validation 메카니즘을 이용해 쉽게 http 파라메터의 validation 체크를 할 수 있다.
postComment() 액션 메소드에 @Required validation을 추가해보자.
/yabe/app/controllers/Application.java
 

public static void postComment(Long postId, @Required String author, @Required String content) {
    Post post = Post.findById(postId);
    if (validation.hasErrors()) {
        render("Application/show.html", post);
    }
    post.addComment(author, content);
    show(postId);
}

위처럼 인자에 @Required 어노테이션의 추가한후 Error 가 발생했는지 여부를 확인해 간단히 validation 체크를 할 수가 있다.
validation 객체는 controller에서 사용할 수 있는 헬퍼이고 validation.hasErrors() 메소드를 통해 에러 여부를 확인한다. 즉, 둘 값중 하나라도 값이 비어있으면 hasError()메소드는 false를 리턴한다. validation error 가 있을 경우 render("Application/show.html", post) 를 호출함으로써 명시적으로 post 인자를 전달하면서 show 템플릿을 호출한다. - 사실 단순히 show(postId); 를 호출해줘도 show 템플릿이 보여질 것이다. 하지만 stateless 한 특징상 show액션이 다시 불리면 validation error 정보가 사라지게 된다. 

자 이제 show.html 을 수정해서 validation error 가 있을 경우 저장되어있는 error 정보를 표시해주자. 
/yabe/app/views/Application/show.html 
 
 

Post a comment

#{form @Application.postComment(post.id)} #{ifErrors}

All fields are required!

#{/ifErrors}

#{/form}

Play 에서는 validation error 가 발생할 경우 뷰에서 사용할 수 있는 몇가지 유용한 태그를 제공한다. 위에서 사용한 #{ifErrors} 태그는 validation error 가 발생했을 경우에만 true 가 된다. #{else} 구문과 함께 사용할 수 있으며, 관련 다른 태그로 #{errors} - 순환을 하며 에러 메세지를 출력가능, #{error '필드 이름'/} - 특정 필드의 에러 메세지 출력할때 사용 등이 있다.

또 한가지 주목할 부분은 각 필드에 ${params.author} , ${params.content} 를 사용했다는 것이다. 이것은 postComment() 액션 호출시 넘겨진 파라메터들을 기억해서 값이 있을 경우 해당 필드에 표시해주는 역할을 한다. 

이제 포스팅을 하는 사용자에게 좀 더 그럴듯한 UI 를 제공하기 위해 에러가 날 경우 자동으로 포커싱해주는 약간의 JavaScript 코드를 넣겠다. 우선 [JQuery][JQuery Tools Expose] 자바스크립트 라이브러리 두개를 다운로드 받자. 그리고 yabe/public/javascripts 폴더에 복사한다. 
이제 라이브러리를 넣기 위해 main.html 을 아래와 같이 수정하자. (</head> 바로 위에 넣자)


    


이제 이 스크립트들을 사용할 수 있게됐다. show.html 템플릿을 아래처럼 수정하자.(show.html 맨 아래에 추가한다.)




예전보다 상당히 좋아졌다. 우리는 여기에 두 가지만 더 구현해 보겠다. 첫째로 성공적으로 comment 를 달았을 경우 성공했다는 메세지를 표시해보자. 우리는 flash scope 를 이용해 구현할 것이다. flash scope 란 ruby on rails 의 flash 와 거의 동일하다. 즉, 특정 컨트롤러의 액션에서 flash 메세지를 만들고 다음 액션의 처리까지만 메세지가 유지된다. 액션 A에서 만들어진 flash 메세지는 곧 이어 호출되는 액션 B에서 까지만(액션B의 template 포함) 유효한것이다. 

이제 postComment 액션을 수정해서 flash 에 성공 메세지를 추가하자. 

public static void postComment(Long postId, @Required String author, @Required String content) {
    Post post = Post.findById(postId);
    if(validation.hasErrors()) {
        render("Application/show.html", post);
    }
    post.addComment(author, content);
    flash.success("Thanks for posting %s", author);
    show(postId);
}

이제 flash scope 동안 전달된 메세지를 표시하기위해 show.html 을 수정하자. (show.html 가장 위에 추가한다)

…
#{if flash.success}
    

${flash.success}

#{/if} #{display post:post, as:'full' /} …


이제 마지막으로 postComment 액션을 위한 깜~~끔한 URL 을 새로 정의하자. (현재는 catch all route를 사용한다.)
/conf/routes 파일을 아래 처럼 수정하자.
POST    /posts/{postId}/comments                Application.postComment
Play framework으로 블로그 개발하기 (4) - Viewing and posting comments (끝)
저작자 표시
신고
Posted by AppleSherbet
 Building the first screen 
 
  전 시간에서 Model (데이터 베이스) - User, Post, Comment 를 만들어 보았다. 이제 드디어 우리 블로그의 첫 페이지를 만들어 보자. 누구나 그렇듯 UI가 보여야 개발하는 재미가 생기고 특히 요즘은 개발 기술만큼이나 UI가 중요하게 여겨지는 시대가 온 것 같다. 아래의 이미지는 우리가 만들 블로그의 Mock-up 이미지이다.


 
 Bootstrapping with default data


  시작하기 전에 먼저 test data를 로드 하는 부분을 추가하자. 아무리 블로그를 이쁘게 만든다고 해도 data가 없다면 블로그가 횡해 보이지 않겠는가! 또한 아직 아무런 UI도 만들지 않았기 때문에 우리가 포스팅을 할 수 조차 없다. 데이터를 DB에 로딩하는 가장 좋은 방법은 예전에도 설명했던 Fixture 를 이용하는 방법이다. 어플리케이션이 로드할때 Fixture를 이용해 초기 데이터를 DB에 저장하는 것이다. 그렇게 하기 위해
/yabe/app/Bootstrap.java 파일을 만들어보자.
import play.*;
import play.jobs.*;
import play.test.*;
 
import models.*;
 
@OnApplicationStart
public class Bootstrap extends Job {
 
    public void doJob() {
        // Check if the database is empty
        if(User.count() == 0) {
            Fixtures.loadModels("initial-data.yml");
        }
    }
 
}
  눈치 챘겠지만 우리가 주목해야할 부분은
@OnApplicationStart 어노테이션이다. 이 어노테이션은 Play로 하여금 어플리케이션이 처음 시작할때 BootStrap 클래스의 doJob() 메소드를 자동으로 수행하도록 해준다. test 시 사용했던 data.yml 파일을 yabe/conf/initial-data.yml 로 복사하자. 이미 만들어 놓은 것이 있기 때문에 그대로 사용하면 된다. 이제 play run 커맨드를 이용해 http://localhost:9000 페이지가 브라우져에 별 에러 없이 나오는지 확인해보자.

 The blog home page

  이제 진짜 블로그 페이지를 만들어보자. 맨 처음 설명했었던 어떻게 index.html이 렌더링 되는지 기억하는가? 요약하면 사용자가 브라우져를 통해 / (루트) URL에 접속하면 request를 받은 play 서버는 route 파일을 참조해
controllers.Application.index() 액션 메소드를 수행한다. index() 액션에서는 다시 render() 함수가 호출되고 render 함수는 index와 같은 이름을 가진 /yabe/app/views/Application/index.html 을 찾아 랜더링을 수행한다.
이제 index 코드를 먼저 우리의 블로그에 맡게 수정해보자.
/yabe/app/controllers/Application.java 파일을 열고 index() 액션 메소드를 Post의 리스트를 로딩하도록 수정한다.
package controllers;
 
import java.util.*;
import play.*;
import play.mvc.*;
import models.*;
 
public class Application extends Controller {
 
    public static void index() {
        Post frontPost = Post.find("order by postedAt desc").first();
        List<Post> olderPosts = Post.find(
            "order by postedAt desc"
        ).from(1).fetch(10);
        render(frontPost, olderPosts);
    }
}
  코드에서 볼 수 있듯이 render 메소드로 Object type을 넘길 수 있다. 또한 넘길 수 있는 파라메터 수의 제한도 없다. Model 을 상속 받으므로써 사용할 수 있는 find() 헬퍼 메소드의 사용 또한 주목해서 보자. first() 메소드는 쿼리 결과 리스트의 첫번째 Post를 리턴하고, from~fetch() 메소드는 특정 번호부터 10개의 Post들을 리런해준다. frontPost는 가장 최신 포스팅을 의미하며 olderPosts는 최신 10개의 포스팅들을 의미한다.(가장 최신 포스트를 메인화면에 자세히 보여주고 나머지 10개의 최근 포스팅들을 리스트로 보여주려는 의도)
이제
/yabe/app/views/Application/index.html 을 열어서 frontPost와 olderPosts로 저장된 객체를 표시하도록 수정하자.
#{extends 'main.html' /}
#{set title:'Home' /}
 
#{if frontPost}
    

${frontPost.title}

${frontPost.content.nl2br()}
#{if olderPosts}

Older posts from this blog

#{list items:olderPosts, as:'oldPost'}

${oldPost.title}

#{/list}
#{/if} #{/if} #{else}
There is currently nothing to read here.
#{/else}
  index.html 에서는 예상했듯이 render메소드로 전달된 frontPost, olderPosts 객체를 그대로 사용할 수 있다. 물론 frontPost.author, frontPost.postedAt 등의 값에 접근도 가능하다. 여기서
frontPost.postedAt.format('MMM dd') 를 주목하자. 우리는 따로 format('MMM dd') 를 정의해준 적이 없다. 또한  frontPost.postedAt은 Date 타입인데 JDK Java 의 Date 타입에는 format이라는 메소드가 있지도 않다. 결론부터 말하면 Java object extentions 라고 해서 Play에서는 특정 타입의 변수에 유용한 메소드들을 추가적으로 정의해 두어 런타임시에 view에서 쉽게 사용할 수 있다.
 
  Custom extension또한 정의가 가능하다. 즉, 개발자가 특정 java object type에 필요한 메소드를 추가적으로 정의하면 어디서든 해당 type의 변수에서 custom extension을 쓸 수 있다. 이러한 extension 기능은 view의 코드를 깔끔하게 유지시켜주고 중복또한 제거해 줄 수 있어서 매우 유용하다. 이곳에서 간단하게 읽어보고 진행하는 것을 추천한다.

  Java object extentions을 사용한 부분이 한군데 더 있다. 바로
frontPost.comments.size().pluralize() 이다 이 메소드는 size()가 복수의 값을(>=2) 리턴할 경우 문자열에 "s"를 추가해 복수를 표현해 준다.
  또 한가지 봐야 할 부분은 Groovy 를 사용했다는 점이다.
#{list items:olderPosts, as:'oldPost'} 가 대표적인 예인데 Java와 문법이 흡사하다. 즉, olderPost 리스트에 있는 item 갯수만큼 순환을 돌게되며 #{list }... #{/list} 안에서는 oldPost 로(as:'oldPost' 에 의해) 접근 할 수 있다. 나머지 문법들도 jsp 와 같은 스크립트 언어를 사용해 봤다면 쉽게 이해할 수 있을 것이다.

자, 이제 브라우져에서 refresh를 해보자.


UI는 좀 별루지만 아무튼 잘 보이고 있다.

  이미 눈치챈 분들도 있겠지만 index.html을 보면 거의 같은 코드가 중복되고 있다. 또한 앞으로 우리는 그와 같은 코드를 몇몇 다른 코드에서 다시 사용할 것이므로 중복된 코드를 따로 분리해보자. Play에서는 이런 기능을 지원하기 위해 Play tag 를 지원해준다. Tag를 만들기 위해
/yabe/app/views/tag/display.html 파일을 만들자. display tag는 두개의 파라메터를 인자로 갖는다: Post object와 display mode(여기선 "home", "teaser", "full). Display tag 를 아래처럼 구현해준다.
*{ Display a post in one of these modes: 'full', 'home' or 'teaser' }*
 

${_post.title}

#{if _as != 'teaser'}
Detail:
${_post.content.nl2br()}
#{/if}
#{if _as == 'full'}

${_post.comments.size() ?: 'no'} comment${_post.comments.size().pluralize()}

#{list items:_post.comments, as:'comment'}
Detail:
${comment.content.escape().nl2br()}
#{/list}
#{/if}
  /yabe/app/views/tag/ 에 만드는 것은 관례이므로 따라야 한다. display tag는 _as 값에 따라 다르게 결과를 표시해주는 것을 볼 수 있다. 이제 중복 코드를 분리했으니 다시 index.html 을 아래 처럼 수정하자.
#{extends 'main.html' /}
#{set title:'Home' /}
#{if frontPost}
    #{display post:frontPost, as:'home' /}
    #{if olderPosts.size()}
        

Older posts from this blog

#{list items:olderPosts, as:'oldPost'} #{display post:oldPost, as:'teaser' /} #{/list}
#{/if} #{/if} #{else}
There is currently nothing to read here.
#{/else}
  index 코드를 보면 #{display post:olderPosts, as:'oldPost'} 와 같이 post, as 란 이름으로 파라메터를 전달한다. display tag에서는 이와 같이 전달된 파라메터에 '_' 를 앞에 붙인 _post, _as 로 접근해 해당인자를 사용할 수 있다. 다시 브라우져를 refresh 해보자.

 Improving the layout

  index.html 을 보면 main.html 을 상속(extends)받고 있는 것을 볼 수 있다. 모든 view에서 공통으로 보여주고 싶은 layout 즉, blog title, 로그인 link 등을 추가하기 위해
main.html을 수정하자.

/yabe/app/views/main.html
    
        #{get 'title' /}		
        
        
        
    
    
        
        
        
        
#{doLayout /}
  자 이제 다시 브라우져를 refresh 해보자. blogTitle, blogBaseLine 부분을 제외하고는 잘 동작 하는 것 같다. 잘 동작하도록 해주기 위해 render(...) 메소드에 해당 파라메터를 넘겨주는 방법이 있다 하지만 main.html 은 모든 view에서 공통으로 사용될 것이므로 조금 다른 방법으로 파라메터를 넘겨보자. Application controller에 아래와 같이 addDefault() 메소드를 추가하자.
@Before
static void addDefaults() {
    renderArgs.put("blogTitle", Play.configuration.getProperty("blog.title"));
    renderArgs.put("blogBaseline", Play.configuration.getProperty("blog.baseline"));
}
  renderArgs에 put을 통해 넣은 파라메터는 모든 template 에서 사용가능하다는 장점이 있다. @Before 어노테이션을 이용해 다른 액션이 불리기 전에 가장 먼저 수행 하도록 했다. 여기서 우리는 Play.configuration 객체를 이용해 파라메터를 가져오고 있는 것을 볼 수 있다. 아직 configuration 파일에 필요한 정보를 넣지 않았으므로 /yabe/conf/application.conf에 configuration 정보를 넣어주자.
# Blog engine configuration
# ~~~~~
blog.title=Yet another blog
blog.baseline=We will write about nothing
  이제 Play.configuration.getProperty 메소드는 정상적으로 설정 정보 즉, Yet another blog와 We will... 에 대한 문자열 정보를 읽어올 수 있을 것이다.
다시 브라우져를 refresh 해보자. 잘 나오는가!
 

Adding some style
 

  자 이제 블로그의 홈페이지가 거의 완성되어 간다. 하지만 정말 볼품이 없다. style을 추가해서 블로그를 멋지게 바꿔보자. 좀 전에 main.html 에 이미 우리는 /public/stylesheets/main.css 경로를 추가 했었다. 그러므로 해당 파일을 /public/stylesheets/ 폴더에 넣어주기만 하면 될 것이다.
  css 에 대해 이곳에서 설명하는 것은 무리가 있으므로 생략하겠다. 혹시 css에 대해 전혀 모른다면 wikipedia 에서 간단히 개념 정도는 알고 넘어가자.

  그럼 이곳에서 main.css파일을 다운받아
/public/stylesheets/ 폴더에 넣어주자. 다시 브라우져를 refresh 해보자. 몇배 알흠다워진 우리 블로그를 볼 수 있다.

 

저작자 표시
신고
Posted by AppleSherbet

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

티스토리 툴바