[라라벨+mysql]게시판 만들기 강좌 #23. 댓글에 이미지 첨부

이미 화면에서 댓글에 이미지를 달 부분이 어디인지 확인했었다. 이미지첨부 버튼을 클릭하면 이미지를 첨부 할 수 있도록 작업을 해보자.

 

/resources/views/boards/view.blade.php

@extends('boards.layout')

@section('header')

    @include('boards.toptitle', ['toptitle'=>'게시판 보기', 'multi'=>$boards->multi])

@endsection

@section('content')

    <table class="table table-striped table-hover">

        <tbody>

            <tr>

                <th width="200">제목</th>

                <td>{{ $boards->subject }}</td>

            </tr>

            <tr>

                <td colspan="2">글쓴이 : {{ $boards->userid }} / 조회수 : {{ number_format($boards->cnt) }} / 등록일 : {{ $boards->regdate }}</td>

            </tr>

            <tr>

                <th width="200">내용</th>

                <td>{!! nl2br($boards->content) !!}</td>

            </tr>

            @if(count($attaches)>0)

            <tr>

                <th width="200">첨부 이미지</th>

                <td>

                    <div class="row row-cols-1 row-cols-md-6 g-4" id="attachFiles" style="margin-left:0px;">

                    @foreach ($attaches as $att)

                    <div id='af_{{ $att->id }}' class='card h-100' style='width:120px;margin-right: 10px;margin-bottom: 10px;'><a href="#" onclick="window.open('/boards/imgpop/{{ $att->filename }}','imgpop','width=600,height=400,scrollbars=yes');"><img src='/images/{{ $att->filename }}' width='100' /></a></div>

                    @endforeach

                    </div>

                </td>

            </tr>

            @endif

        </tbody>

    </table>

    <div align="right">

        @auth()

            @if($boards->userid==auth()->user()->userid)

                <a href="/boards/write/{{ $boards->multi }}/{{ $boards->bid }}"><button type="button" class="btn btn-secondary">수정</button></a>

                <a href="/boards/delete/{{ $boards->bid }}/{{ $boards->pagenumber }}" class="btn btn-secondary" onclick="return confirm('삭제하시겠습니까?');">삭제</a>

            @endif

        @endauth

        <a href="/boards/{{ $boards->multi }}/?page={{ $boards->pagenumber }}" class="btn btn-primary">목록</a>

    </div>

    <div style="padding:10px;">

    </div>

    <!--댓글 리스트 시작 -->

    <div id="reply">

        @foreach ($memos as $m)

        <div class="card mt-2" id="{{ 'memolist_'.$m->id }}">

            <div class="card-header p-2">

                <table>

                    <tbody>

                        <tr class="align-middle">

                            <td rowspan="2" class="pr-2">

                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-chat-square-dots" viewBox="0 0 16 16">

                                    <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>

                                    <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>

                                </svg>

                            </td>

                            <td class="ml">{{ $m->userid }}</td>

                        </tr>

                        <tr>

                            <td>

                                {{ disptime($m->created_at) }}

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

            <div class="card-body">

                <p class="card-text">

                    {!! nl2br($m->memo) !!}

                </p>

            </div>

        </div>

        @endforeach

    </div>

    <!-- 댓글 리스트 끝 -->

    <!-- 댓글 입력 -->

    <div class="input-group" id="firstmemo" style="margin-top:10px;margin-bottom:10px;">

        <span class="input-group-text" id="memo_image_view" style="display:none;"></span>

        <button type="button" id="attmemoimg" class="btn btn-secondary">이미지첨부</button>

        <input type="hidden" name="memopid" id="memopid" value="{{ time() }}">

        <input type="hidden" name="memo_file" id="memo_file">

        <input type="file" name="upfile" id="upfile" accept="image/*" style="display:none;">

        <textarea class="form-control" aria-label="With textarea" style="height:100px;" name="memo" id="memo" placeholder="댓글을 입력해주세요"></textarea>

        @auth()

            <button type="button" class="btn btn-secondary" style="float:right;" id="memo_submit" onclick="memoup()">입력</button>

        @else

            <button type="button" class="btn btn-secondary" style="float:right;" id="memo_submit" onclick="alert('로그인 하셔야 입력할 수 있습니다.');">입력</button>

        @endauth

    </div>

    <!-- 댓글 입력 끝-->

    <div style="padding:20px;">

    </div>

    <script>

        function memoup(){

            var memo=$("#memo").val();

            var memo_file=$("#memo_file").val();

            var data = {

                memo : memo,

                memo_file : memo_file,

                bid : {{ $boards->bid }}

            };

            $.ajax({

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

                type: 'post',

                url: '{{ route('boards.memoup') }}',

                dataType: 'json',

                data: data,

                success: function(data) {

                    location.reload();

                },

                error: function(data) {

                console.log("error" +JSON.stringify(data));

                }

            });

        }

    $("#attmemoimg").click(function () {

        $('#upfile').click();

    });

   

    $("#upfile").change(function(){

        var formData = new FormData();

        var files = $('#upfile').prop('files');

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

            attachFile(files[i]);

        }

    });

    function attachFile(file) {

        var memopid = $("#memopid").val();

        var formData = new FormData();

        formData.append("file", file);

        formData.append("pid", memopid);

        formData.append("code", "memoattach");

        $.ajax({

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

            url: '{{ route('boards.saveimage') }}',

            data: formData,

            cache: false,

            contentType: false,

            processData: false,

            dataType : 'json' ,

            type: 'POST',

            success: function (return_data) {

                var html = "<img src='/images/"+return_data.fn+"' style='max-width:100%;height:88px;'>";

                $("#memo_image_view").html(html);

                $("#memo_image_view").show();

                $("#attmemoimg").hide();

                $("#memo_file").val(return_data.fn);

            }

            , beforeSend: function () {

                $("#attmemoimg").hide();

                $("#memo_image_view").show();

                $('#memo_image_view').html('<div class="spinner-border text-dark" role="status"><span class="visually-hidden">Loading...</span></div>');

            }

            , complete: function () {

            }

            });

    }

    </script>

    @endsection    

 

파일 첨부하는 방법은 비슷하다. 기존에 쓰던 saveimage 콘트롤러를 그대로 썼다. 그래서 라우터나 콘트롤러는 수정할 것이 없다. 대신 메모를 등록할때 첨부한 이미지파일에 대한 정보를 수정해줘야 하기때문에 메모를 등록할때 사용했던 콘트롤러를 조금 수정해야한다.

 

/app/Http/Controllers/BoardController.php

    public function memoup(Request $request)

    {

        $form_data = array(

            'memo' => $request->memo,

            'bid' => $request->bid,

            'pid' => $request->pid??null,

            'userid' => Auth::user()->userid

        );

        if(auth()->check()){

            $rs=Memos::create($form_data);

            if($rs){

                Board::find($request->bid)->increment('memo_cnt');//부모글의 댓글 갯수 업데이트

                Board::where('bid', $request->bid)->update([//부모글의 댓글 날짜 업데이트

                    'memo_date' => date('Y-m-d H:i:s')

                ]);

                if($request->memo_file){

                    FileTables::where('filename', $request->memo_file)->where('userid', Auth::user()->userid)->where('code','memoattach')->update(array('pid' => $rs->id));

                }

            }

            return response()->json(array('msg'=> "succ", 'num'=>$rs), 200);

        }

    }

 

 

메모를 작성할때 첨부파일이 있다면 해당 첨부파일에 대한 file_tables 테이블에 pid 값을 memos 테이블의 id값으로 업데이트 해줘야 한다. 그래야 어떤 댓글에 달린 첨부 파일인지 알 수 있기 때문이다.

 

요렇게 이미지첨부 부분에 이미지가 보이면 성공이다.

 

다음 시간에는 댓글에 첨부한 이미지를 화면에 표시하는 걸 해보려고 한다. 지금까지 안해봤던 join이나 sub쿼리 같은걸 해볼것이기때문에 조금 어려울 수 있다.