[라라벨+mysql]게시판 만들기 강좌 #26. 댓글 수정하기 2/2

이번엔 수정할때 이미지가 있는 경우를 해보도록 하자.

 

 

댓글 수정할때 이미지를 이렇게 첨부하고 첨부한 이미지가 있는 댓글은

 

 

이렇게 삭제 버튼을 붙여서 첨부한 이미지만 삭제할 수 있도록 해 주려고 한다.

 

근데 이게 좀 복잡하고 어렵다. 일단 소스를 좀 보자.

 

/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">

            <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" id="{{ 'memolist_'.$m->id }}">

                <p class="card-text">

                    @if($m->filename)

                        <img src='/images/{{ $m->filename }}' width='100' />

                    @endif

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

                </p>

                @auth()

                    <span style="float:right;">

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

                            <span class="badge bg-dark" style="cursor:pointer;padding:10px;"><a onclick="memo_modify('{{ $m->id }}')">수정</a></span>

                            <span class="badge bg-dark" style="cursor:pointer;padding:10px;"><a onclick="memo_delete('{{ $m->id }}','{{ $boards->num }}')">삭제</a></span>

                        @endif

                    </span>

                @endauth

            </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="modimemoid" id="modimemoid" value="0">

        <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));

                }

            });

        }

    function memoatt(m){

        $("#modimemoid").val(m);

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

    }

    $("#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 modimemoid = $("#modimemoid").val();

        console.log("modimemoid:"+modimemoid);

        var formData = new FormData();

        formData.append("file", file);

        formData.append("pid", memopid);

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

        formData.append("modimemoid", modimemoid);

        $.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;'>";

                if(modimemoid>0){

                    $("#modi_att_view_"+modimemoid).html(html);

                    $("#modi_att_view_"+modimemoid).show();

                    $("#modimemoimg_"+modimemoid).hide();

                }else{

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

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

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

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

                }

            }

            , beforeSend: function () {

                if(modimemoid>0){

                    $("#modimemoimg_"+modimemoid).hide();

                    $("#modi_att_view_"+modimemoid).show();

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

                }else{

                    $("#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 () {

            }

            });

    }

    function memo_modify(m){

            var data = {

                memoid : m

            };

            $.ajax({

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

                type: 'post',

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

                dataType: 'json',

                data: data,

                success: function(data) {

                    if(data.attfile == true){

                        var html='<div class="input-group" id="modifymemo" style="margin-top:10px;margin-bottom:10px;"><div id="af_'+data.att.id+'" class="card h-100" style="text-align:center;"><img src="/images/'+data.att.filename+'" width="80" /><a href="javascript:;" onclick=\'memodeletefile("'+data.att.filename+'","'+data.att.id+'","'+data.att.pid+'")\'><span class="badge text-bg-warning">삭제</span></a></div><input type="hidden" name="memopid" id="memopid" value="'+m+'"><input type="hidden" name="memo_modi_file" id="memo_modi_file"><textarea class="form-control" aria-label="With textarea" style="height:100px;" name="memomodify_'+m+'" id="memomodify_'+m+'">'+data.memos.memo+'</textarea><button type="button" class="btn btn-secondary" style="float:right;" id="memo_modifyup" onclick="memomodifyup('+m+')">수정</button></div>';

                    }else{

                        var html='<div class="input-group" id="modifymemo" style="margin-top:10px;margin-bottom:10px;"><span class="input-group-text" id="modi_att_view_'+m+'" style="display:none;"></span><button type="button" id="modimemoimg_'+m+'" class="btn btn-secondary" onclick="memoatt('+m+')">이미지첨부</button><input type="hidden" name="memopid" id="memopid" value="'+m+'"><input type="hidden" name="memo_modi_file" id="memo_modi_file"><textarea class="form-control" aria-label="With textarea" style="height:100px;" name="memomodify_'+m+'" id="memomodify_'+m+'">'+data.memos.memo+'</textarea><button type="button" class="btn btn-secondary" style="float:right;" id="memo_modifyup" onclick="memomodifyup('+m+')">수정</button></div>';

                    }

                    $("#memolist_"+m).html(html);

                },

                error: function(data) {

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

                }

            });

    }

    function memomodifyup(m){

            var memo=$("#memomodify_"+m).val();

            var data = {

                memo : memo,

                memoid : m

            };

            $.ajax({

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

                type: 'post',

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

                dataType: 'json',

                data: data,

                success: function(data) {

                    location.reload();

                },

                error: function(data) {

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

                }

            });

    }

    function memodeletefile(fn,fid,pid){

        if(!confirm('삭제하시겠습니까?')){

            return false;

        }

        var data = {

            fn : fn,

            fid : fid,

            pid : pid

        };

        $.ajax({

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

            type: 'post',

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

            dataType: 'json',

            data: data,

            success: function(data) {

                alert("삭제했습니다.");

                memo_modify(pid);

            },

            error: function(data) {

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

            }

        });

    }

    </script>

    @endsection    

 

여기까지 따라온 사람들이라면 이해할 수 있을 것이라 생각한다. 좀 어렵지만 소스를 잘 보도록 하자.

 

콘트롤러도 약간 수정해야한다.

 

/app/Http/Controllers/BoardController.php

    public function saveimage(Request $request)

    {

        $request->validate([

            'file' => 'required|image|max:2048'

        ]);

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

            $image = $request->file('file');

            $new_name = rand().'_'.time().'.'.$image->getClientOriginalExtension();

            $image->move(public_path('images'), $new_name);

            $pid = $request->modimemoid?$request->modimemoid:$request->pid;

            $fid = rand();

            $form_data = array(

                'pid' => $pid,

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

                'code' => $request->code,

                'filename' => $new_name

            );

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

            return response()->json(array('msg'=> "등록했습니다.", 'result'=>'succ', 'fn'=>$new_name, 'fid'=>$fid), 200);

        }else{

            return response()->json(array('msg'=> "로그인 하십시오", 'result'=>'fail'), 200);

        }

    }

 

수정인 경우에는 분명 어떤 메모를 수정하는지 그 값이 있을 것이다. 그래서 그 값을 가져오도록 했다. 없으면 기존처럼 시간을 pid로 받아서 처리해주고 업데이트 해주면 된다.

 

다음 시간엔 댓글을 삭제하는 것을 해보자.