[라라벨+mysql]게시판 만들기 강좌 #11. 멀티게시판으로 변신

기존에 하던 강의에서도 얘기했었던것 같은데 게시판은 multi 파라미터에 값을 바꿔주는 것만으로 여러개의 다른 게시판을 만들 수 있다. 예를 들어서.

 

http://localhost:8000/boards?multi=free 또는 http://localhost:8000/boards?multi=humor 머 이런식으로 해서 다른 게시판을 만든다는 것이다.

 

라라벨은 어떨까? 라라벨은 일단 주소체계가 다르다. 라라벨은 파라미터를 저런식으로 받지 않기때문에 설정을 여러개 바꿔주어야한다.

 

라라벨의 주소는 http://localhost:8000/boards/free 또는 http://localhost:8000/boards/humor 이렇게 돼야 한다. 이렇게 했을때 서로 다른 게시판이 되도록 지금부터 변경해보자 우선 라우터부터 바꿔보자.

 

/routes/web.php

//게시판

Route::get('/boards/{multi?}', [BoardController::class, 'index'])->name('boards.index');

Route::get('/boards/show/{id}/{page}', [BoardController::class, 'show'])->name('boards.show');

Route::middleware('auth') -> group(function (){

    Route::get('/boards/write/{multi}', [BoardController::class, 'write'])->name('boards.write');

    Route::post('/boards/create', [BoardController::class, 'create'])->name('boards.create');

});

 

Route::get('/boards/{multi?}', [BoardController::class, 'index'])->name('boards.index');

 

이 부분을 보자. /boards 뒷부분에 multi? 가 들어갔다. 이 의미는 뒷부분에 파라미터가 들어올수도 있고 안들어올수도 잇다는 것이다. 즉 http://localhost:8000/boards 이렇게만 쳐주면 기본적인 multi값을 디폴트값으로 입력하겠다는 것이다. 콘트롤러를 보면 알 수 있다. 

 

/app/Http/Controllers/BoardController.php

   

    public function index($multi = "free"){

        $boards = Board::where('multi',$multi)

                        ->where('status',1)

                        ->orderBy('bid','desc')->paginate(20);

        return view('boards.index', ['boards' => $boards, 'multi' => $multi]);

    }

 

이 전에 index와 많이 달라졌다. 기본적으로 $multi값을 받아 오는데 값이 없으면 "free"가 입력된다. 쿼리는 multi값이 $multi인 것과 status가 1인 게시물들을 불러오도록 수정했다. status가 1이라는 의미는 삭제가 되지 않았다는 뜻이다. 후에 삭제를 하면 삭제된 게시물들은 status를 0으로 바꿀 것이다.

 

이번엔 view를 수정해보자.

 

/resources/views/boards/index.blade.php

@extends('boards.layout')

@section('header')

    @include('boards.toptitle', ['toptitle'=>'게시판 목록', 'multi'=>$multi])

@endsection

@section('content')

    @if ($errors->any())

    <div class="alert alert-danger">

        <ul>

            @foreach ($errors->all() as $error)

            <li>{{ $error }}</li>

            @endforeach

        </ul>

    </div>

    @endif

    <div style="text-align:right;">

        <a href="/boards/write/{{ $multi }}"><button class="text-xl">등록</button></a>

    </div>

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

        <colgroup>

            <col width="10%"/>

            <col width="15%"/>

            <col width="45%"/>

            <col width="15%"/>

            <col width="15%"/>

        </colgroup>

        <thead>

        <tr>

            <th scope="col">번호</th>

            <th scope="col">이름</th>

            <th scope="col">제목</th>

            <th scope="col">조회수</th>

            <th scope="col">등록일</th>

        </tr>

        </thead>

        <tbody>

            <?php

                $pagenumber = $_GET["page"]??1;

                $total = $boards->total();

                $idx = $total-(($boards->currentPage()-1) * 20);

            ?>

            @foreach ($boards as $board)

                <tr>

                    <th scope="row">{{ $idx-- }}</th>

                    <td>{{ $board->userid }}</td>

                    <td><a href="/boards/show/{{$board->bid}}/{{$pagenumber}}">{{ $board->subject }}</a></td>

                    <td>{{ number_format($board->cnt) }}</td>

                    <td>{{ date("Y-m-d",strtotime($board->regdate)) }}</td>

                </tr>

            @endforeach

            @if(!$total)

                <tr>

                    <th scope="row" colspan="5">게시물이 없습니다.</td>

                </tr>

            @endif

        </tbody>

    </table>

    <div>

        {!! $boards->withQueryString()->links() !!}

    </dvi>

@endsection

 

include부분이 조금 변경됐다. toptitle.blade.php 파일을 변경하자.

 

/resources/views/boards/toptitle.blade.php

    <?php

        if($multi=="free"){

            $boardtitle="자유";

        }else if($multi=="humor"){

            $boardtitle="유머";

        }

    ?>

    <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">

        <span class="fs-4">{{ $boardtitle." ".$toptitle }}</span>

        <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">

        @guest()

            <a href="{{route('auth.login')}}" class="text-xl">로그인</a> /

            <a href="{{route('auth.signup')}}" class="text-xl">회원가입</a>

        @endguest

        @auth()

            <form action="/logout" method="post" class="inline-block">

                @csrf

                <span class="text-xl text-blue-500">{{auth()->user()->userid}}</span> /

                <a href="/logout"><button class="text-xl">로그아웃</button></a>

            </form>

        @endauth

        </nav>

    </div>

 

이렇게 수정해주고 다시 게시판 메인화면을 열어보자.

 

http://localhost:8000/boards

 

이렇게 자유게시판 목록이라고 뜨면 성공이다. 이번엔 다른 게시판을 열어보자.

 

http://localhost:8000/boards/humor

 

이렇게 구분된다. 글쓰기와 보기 페이지도 변경해보자. 라우터는 저 위에 올려놓은 그대로다. 이미 변경된걸 올려 두었다. 콘트롤러에서 글쓰기와 보기에 관련된 콘트롤러를 변경한다.

 

/app/Http/Controllers/BoardController.php

    public function show($bid,$page)

    {

        Board::find($bid)->increment('cnt');

        $boards = Board::findOrFail($bid);

        $boards->content = htmlspecialchars_decode($boards->content);

        $boards->pagenumber = $page??1;

        return view('boards.view', ['boards' => $boards]);

    }

    public function write($multi)

    {

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

            return view('boards.write', ['multi' => $multi]);

        }else{

            return redirect()->back()->withErrors('로그인 하십시오.');

        }

    }

 

각각의 view도 수정한다.

 

/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="100">제목</th>

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

            </tr>

            <tr>

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

            </tr>

            <tr>

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

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

            </tr>

            @if($boards->attachfiles)

            <tr>

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

                <td>

                    <img src="/images/{{ $boards->attachfiles }}" style="max-width:100%;"><br>

                </td>

            </tr>

            @endif

        </tbody>

    </table>

    <div align="right">

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

    </div>

    @endsection    

 

/resources/views/boards/write.blade.php

@extends('boards.layout')

@section('header')

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

@endsection

@section('content')

<br />

    <form method="post" action="/boards/create" enctype="multipart/form-data">

        @csrf

        @method('post')

        <input type="hidden" name="attcnt" id="attcnt" value="0">

        <input type="hidden" name="imgUrl" id="imgUrl" value="">

        <input type="hidden" name="attachFile" id="attachFile" value="">

        <div class="form-group">

            <div class="col-md-12">

                <input type="text" name="subject" id="subject" class="form-control input-lg" placeholder="제목을 입력하세요." />

            </div>

        <br />

        </div>

        <div class="form-group">

            <div class="col-md-12">

                <textarea class="form-control" id="content" name="content" rows="5" placeholder="내용을 입력하세요."></textarea>

            </div>

        </div>

        <br />

        <div class="form-group">

            <div class="col-md-12">

                <input type="file" name="afile" id="afile" accept="image/*" multiple class="form-control" aria-label="Large file input example">

            </div>

        </div>

        <br />

        <br />

        <div class="form-group">

            <div class="col-md-12 text-center">

                <button type="button" name="edit" class="btn btn-primary input-lg" onclick="sendsubmit()">등록</button>

            </div>

        </div>

    </form>

<script>

    function sendsubmit(){

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

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

        var formData = new FormData();

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

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

        //     console.log(files[i]);

        // }

        // return false;

        formData.append("afile", files[0]);

        formData.append("subject", subject);

        formData.append("content", content);

        formData.append("multi", '{{ $multi }}');

        // var data = {

        //     subject : subject,

        //     content : content

        // };

        $.ajax({

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

            type: 'post',

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

            dataType: 'json',

            enctype: 'multipart/form-data',

            contentType: false,

            processData: false,

            data: formData,

            success: function(data) {

                location.href='/boards/show/'+data.bid+'/1';

            },

            error: function(data) {

                console.log("error" +data);

            }

        });

    }

</script>    

@endsection

 

수정하고 페이지를 확인해보면...

 

 

이렇게 나오면 성공이다.