14. 코멘트의 작성과 표시

이 곳은 제가 개인적으로 YII framework의 블로그 만들기를 번역해 놓은 곳입니다.

제가 영어 전공자도.. 그렇다고 영어랑 친하지도 않습니다.

그래서 보시면 뭔가 글도 엉성하고 말이 안맞는게 많습니다.

잘못 오역된 부분이라던지 그런 부분들 친절하게 알려주시면 바로 수정하겠습니다.

이 페지의 원글 http://www.yiiframework.com/doc/blog/1.1/en/comment.create

코멘트의 작성과 표시

댓글보기
댓글 작성
AJAX 기반의 검증

이 섹션에서는 코멘트보기 및 작성 기능을 구현합니다.

사용자의 상호 작용을 향상시키기 위해, 입력란에 입력이 확정 될 때마다 오류 표시를합니다. 이른바 클라이언트 측 유효성 검사 (client-side input validation)입니다. 이를 Yii에서하는 방법을 설명합니다. 매우 쉽고 완벽하게 작업이 되는것을 볼수 있습니다. 이 기능은 Yii 버전 1.1.1 이상에서만 지원되는 기능입니다.

1. 댓글보기

댓글 표시·작성을 별도의 페이지를 사용하는 대신에 게시물의 상세 페이지 (PostController 의 view 액션에서 생성되는)를 사용합니다. 게시물 내용의 표시 아래에 먼저 그 기사에 속하는 코멘트를 나열하고 다음 댓글 양식을 표시합니다.

게시물 상세 페이지에 코멘트를 표시하기 위해 뷰 스크립트 /wwwroot/blog/protected/views/post/view.php 을 다음과 같이 수정합니다.

...post view here...
 
<div id="comments">
    <?php if($model->commentCount>=1): ?>
        <h3>
            <?php echo $model->commentCount . 'comment(s)'; ?>
        </h3>
 
        <?php $this->renderPartial('_comments',array(
            'post'=>$model,
            'comments'=>$model->comments,
        )); ?>
    <?php endif; ?>
</div>

위의 예에서는 현재 게시물에 속하는 코멘트를 표시하기 위해 _comments 라는 부분 뷰를 지정하고 renderPartial() 을 호출 합니다. 뷰에서 $model->comments 형식을 사용하여 문서에 속하는 댓글을 취득하고있는 것에 명심하세요. 이 형식을 사용한 이유는 Post 클래스 comments 관계를 선언하고 있기 때문입니다. 이 형식을 계산하면 암시 적으로 데이터베이스의 JOIN 쿼리가 실행되고 적절한 코멘트가 반환됩니다. 이 기능은 지연 관계형 쿼리 로 알려져 있습니다.

부분 뷰 (partial view)의 _comments 그다지 흥미로운 것은 없습니다. 코멘트를 하나 하나 처리, 코멘트 정보를 표시합니다. 관심있는 분은 /wwwroot/yii/demos/blog/protected/views/post/_comments.php 를 참조하십시오.

2. 댓글 작성

댓글 작성을 처리하기 위해 PostController 의 actionView () 메서드를 다음과 같이 수정합니다.

public function actionView()
{
    $post=$this->loadModel();
    $comment=$this->newComment($post);
 
    $this->render('view',array(
        'model'=>$post,
        'comment'=>$comment,
    ));
}
 
protected function newComment($post)
{
    $comment=new Comment;
    if(isset($_POST['Comment']))
    {
        $comment->attributes=$_POST['Comment'];
        if($post->addComment($comment))
        {
            if($comment->status==Comment::STATUS_PENDING)
                Yii::app()->user->setFlash('commentSubmitted','Thank you for your comment. Your comment will be posted once it is approved.');
            $this->refresh();
        }
    }
    return $comment;
}

그리고 Post 모델 클래스를 수정하여 addComment() 메서드를 다음과 같이 추가합니다.

public function addComment($comment)
{
    if(Yii::app()->params['commentNeedApproval'])
        $comment->status=Comment::STATUS_PENDING;
    else
        $comment->status=Comment::STATUS_APPROVED;
    $comment->post_id=$this->id;
    return $comment->save();
}

위 코드는 view 를 표시하기 전에 newComment() 메서드를 부릅니다. newComment() 메서드는 Comment 인스턴스를 생성하고, 코멘트 양식이 제출되었는지 여부를 확인합니다. 만약 전송이 된 경우, $post->addComment($ comment) 을 불러 기사에 코멘트를 추가 하려고 합니다. 문제가 없이 진행되면 기사의 상세 페이지를 새로 고침합니다. 다시 나타난 페이지는 코멘트가 승인되지 않으면 새로 게시 된 의견이 표시됩니다. 표시 전에 댓글 승인이 필요한 경우는 플래시 메시지를 사용하여 승인이 필요하다는 것을 사용자에게 보여줍니다. 플래시 메시지는 주로 최종 사용자에게 메시지를 보여주는 것입니다. 사용자가 브라우저의 새로 고침 버튼을 클릭하면 메시지가 사라집니다.

물론 /wwwroot/blog/protected/views/post/view.php 를 수정합니다.

......
<div id="comments">
    ......
    <h3>Leave a Comment</h3>
 
    <?php if(Yii::app()->user->hasFlash('commentSubmitted')): ?>
        <div class="flash-success">
            <?php echo Yii::app()->user->getFlash('commentSubmitted'); ?>
        </div>
    <?php else: ?>
        <?php $this->renderPartial('/comment/_form',array(
            'model'=>$comment,
        )); ?>
    <?php endif; ?>
 
</div><!-- comments -->

위 코드는 플래시 메시지가 있으면 메시지를 표시합니다. 만약 없다면 부분 뷰/wwwroot/blog/protected/views/comment/_form.php 을 사용하여 댓글 입력 폼을 표시합니다.

3. AJAX 기반의 정의

사용자 경험을 향상시키기 위해, AJAX 기반의 폼 필드 검증을 사용할 수 있습니다. AJAX 기반의 검증은 사용자가 양식 항목에 입력을 할 때마다 검증 피드백을 얻을 수 있습니다. 즉, 전체 양식을 서버로 전송하기 전에 검증 피드백을 얻을 수 있습니다. 댓글 입력 폼에 AJAX 기반의 검증을 지원하기 위해, 코멘트 양식보기 /wwwroot/blog/protected/views/comment/_form.php 과 newComment() 메서드 모두에서 코드 변경을 해야 합니다.

_form.php 는 CActiveForm 위젯을 만들 때, CActiveForm::enableAjaxValidation 을 true로 설정합니다.

<div class="form">
 
<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'comment-form',
    'enableAjaxValidation'=>true,
)); ?>
......
<?php $this->endWidget(); ?>
 
</div><!-- form -->

그리고 newComment() 메소드에서 AJAX 확인 요청에 응답하는 코드를 추가합니다. 이 코드는 ajax 라는 POST변수가 있는지 확인합니다. 있다면, CActiveForm::validate 를 불러 검증 결과를 표시합니다.

protected function newComment($post)
{
    $comment=new Comment;
 
    if(isset($_POST['ajax']) && $_POST['ajax']==='comment-form')
    {
        echo CActiveForm::validate($comment);
        Yii::app()->end();
    }
 
    if(isset($_POST['Comment']))
    {
        $comment->attributes=$_POST['Comment'];
        if($post->addComment($comment))
        {
            if($comment->status==Comment::STATUS_PENDING)
                Yii::app()->user->setFlash('commentSubmitted','Thank you for your comment. Your comment will be posted once it is approved.');
            $this->refresh();
        }
    }
    return $comment;
}

Gogooma Sample

14. 코멘트의 작성과 표시

티스토리툴바

14. 코멘트의 작성과 표시

'Yii Framework/블로그 만들기' Related Articles

티스토리툴바