Laravel、Ajaxを用いて動的なコメント閲覧画面の作成

2019年10月7日／マージBLOG、システム開発

ご無沙汰しております。
今回はLaravel(5.8)とAjaxを用いて下図の閲覧画面を作成します。
例えば、アンケートを実施した際にリアルタイムでコメントが見られたり、
プレゼンをしている時にリアルタイムで感想が見られたりなど使い方は様々です。

DB(PostgreSQL(11.3))

Questions(質問用テーブル)	Comments(コメント用テーブル)
id question	id question_id comment(コメント内容) name(回答者) created_at

1. ルートの設定

Route::get('/admin/result/{questionId}', 'Admin\ResultController@index');

Route::match(['get', 'post'], '/admin/result/ajax/{questionId}', 'Admin\ResultController@ajax');

2. 質問とそれに対応するコメントリストを取得するためのコントローラーを作成

/Controllers/admin/ResultController.php

// 閲覧画面を表示

public function index(Request $request, $questionId){

    $questionInfo = Question::where('id', $questionId)->first();

		return view('/admin/result', [

        	'questionId' => $questionId,

        	'questionInfo' => $questionInfo

    ]);

}

// コメントリストを取得してJSON形式で返す

public function ajax(Request $request, $questionId){

    $commentData = Comment::where('question_id', $questionId)->orderBy('created_at', 'desc')->get();



    $json = ["commentData" => $commentData];

    return response()->json($json);

}

3. viewに表示

/views/admin/result/index.blade.php



@extends('layouts.parent')

@include('layouts.head')



@section('content')



@section('header')







@endsection

@include('layouts.error')





    

        {{$questionInfo->question}}


    


    

        

            

                

                

            


        


    


@section('pageJs')

    

@endsection





@endsection



@include('layouts.footer')

4. Ajaxでコメントリストを取得、作成

/js/admin/result/comment.js



$(function(){

    get_data()

})

// コメントを取得

function get_data(){    

    $.ajaxSetup({

        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}

    });

    $.get({

        url: "/admin/result/ajax/" + questionId,

        method: 'POST',

        dataType: 'json'

    })

    .done(function(data){

        // 前のコメントリストを削除

        $('#comment-data').find('.comment-visible').remove();



        // コメントリストをクローンして表示

        for(var i = 0; i < data.commentData.length; i++){

            var commentClone = $('#comment-list').clone(true).removeAttr('style').addClass('comment-visible');

            commentClone.children('#name').first().append(data.commentData[i].name);

            commentClone.children('#comment').first().append(data.commentData[i].answer);

            $('#comment-data').append(commentClone);

        }

    })

    .fail(function(){

            

    })

    

    // 5秒ごとに更新

    setTimeout("get_data()", 5000);

}

CSSは各自でお願いします。
以上です！

新田（プログラマー）

Skill：PHP / Java / JavaScript / PostgreSQL　　Like：絵を描くこと、ピアノ

お知らせ

Laravel、Ajaxを用いて動的なコメント閲覧画面の作成

{{$questionInfo->question}}