회원가입과 로그인 링크를 달아 보자. 목록 페이지를 조금 수정한다.
/resources/views/boards/index.blade.php
@extends ( 'boards.layout' )
@section ( 'header' )
< div class = "d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom" >
< span class = "fs-4" > 게시판 목록 </ 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 () -> nickName }} </ span > /
< a href = "/logout" >< button class = "text-xl" > 로그아웃 </ button ></ a >
</ form >
@endauth
</ nav >
</ div >
@endsection
@section ( 'content' )
< div style = " text-align:right;" >
< 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 ;
$idx = $boards -> 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
</ tbody >
</ table >
< div >
{!! $boards -> withQueryString () -> links () !!}
</ dvi >
@endsection
header라는 section을 추가했다. layout에도 header라는 section이 들어갈 곳을 만들어 주기 위해 조금 수정해야 한다.
/resources/views/boards/layout.blade.php
<! doctype html >
< html lang = "kr" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< title > 게시판 </ title >
</ head >
< body >
< div class = "container" >
< header >
@yield ( 'header' )
</ header >
@yield ( 'content' )
</ div >
</ body >
</ html >
@yield('header')라고 지정한 부분에 @section('header')부분이 들어오게 된다.
그런데 이렇게 저장하고 새로고침하면 오류가 난다. 왜냐하면
< a href = " {{ route ('auth.login') }} " class = "text-xl" > 로그인 </ a > /
< a href = " {{ route ('auth.signup') }} " class = "text-xl" > 회원가입 </ a >
이 부분 때문이다. {{route('auth.login')}} 이 부분은 별명 같은 것인데 라우터에 이부분을 만들어주지 않았기때문에 해당 별명이 없다고 오류가 난다. 그럼 오류가 나지 않게 라우터에 추가해보자.(물론 <a href="/login">로그인</a>이렇게 별명 안쓰고 링크 걸면 오류가 안난다)
/routes/web.php
<?php
use Illuminate\Support\Facades\ Route ;
use App\Http\Controllers\ BoardController ;
use App\Http\Controllers\ MemberController ;
Route :: get ( '/' , function () {
return view ( 'welcome' );
});
//게시판
Route :: get ( '/boards' , [ BoardController :: class , 'index' ])-> name ( 'boards.index' );
Route :: get ( '/boards/show/{id}/{page}' , [ BoardController :: class , 'show' ])-> name ( 'boards.show' );
//회원
Route :: get ( '/login' , [ MemberController :: class , 'login' ])-> name ( 'auth.login' );
Route :: get ( '/signup' , [ MemberController :: class , 'signup' ])-> name ( 'auth.signup' );
이렇게 만들어 줬다. 이제 다시 목록 페이지를 새로고침하면 정상적으로 나오는 것을 알 수 있다.
이렇게 보이면 성공이다.
다음엔 저 링크를 클릭하면 MeberController에 있는 signup이라는 함수를 찾아 가게 된다. 만들어 보자.
/app/Http/Controllers/MemberController.php
<?php
namespace App\Http\Controllers ;
use App\Models\ Member ;
use Illuminate\Http\ Request ;
class MemberController extends Controller
{
public function login (){
return view ( 'member.login' );
}
public function signup ()
{
return view ( 'member.signup' );
}
}
signup 함수를 봤더니 member 폴더밑에 signup.blade.php를 찾아가라고 한다. 또 만들어보자.
/resources/views/member/signup.blade.php
@extends ( 'boards.layout' )
@section ( 'content' )
< section class = "vh-100" style = " background-color: #e3e4e6;" >
< div class = "container h-100" >
< div class = "row d-flex justify-content-center align-items-center h-100" >
< div class = "col-xl-9" >
< h1 class = "mb-4" style = " text-align:center;" > 회원가입 </ h1 >
< div class = "card" style = " border-radius: 15px;" >
< div class = "card-body" >
< div class = "row align-items-center pt-4 pb-3" >
< div class = "col-md-3 ps-5" >
< h6 class = "mb-0" > 이름(닉네임) </ h6 >
</ div >
< div class = "col-md-9 pe-5" >
< input type = "text" name = "name" id = "name" class = "form-control form-control-lg" />
< br >
< span id = "namemsg" ></ span >
</ div >
</ div >
< hr class = "mx-n3" >
< div class = "row align-items-center py-3" >
< div class = "col-md-3 ps-5" >
< h6 class = "mb-0" > 이메일 </ h6 >
</ div >
< div class = "col-md-9 pe-5" >
< input type = "email" name = "email" id = "email" class = "form-control form-control-lg" placeholder = "example@example.com" />< br >
< span id = "emailmsg" ></ span >
</ div >
</ div >
< hr class = "mx-n3" >
< div class = "row align-items-center py-3" >
< div class = "col-md-3 ps-5" >
< h6 class = "mb-0" > 비밀번호 </ h6 >
</ div >
< div class = "col-md-9 pe-5" >
< input type = "password" name = "password1" id = "password1" class = "form-control form-control-lg" />
</ div >
</ div >
< hr class = "mx-n3" >
< div class = "row align-items-center py-3" >
< div class = "col-md-3 ps-5" >
< h6 class = "mb-0" > 비밀번호 확인 </ h6 >
</ div >
< div class = "col-md-9 pe-5" >
< input type = "password" name = "password2" id = "password2" class = "form-control form-control-lg" />
</ div >
</ div >
< hr class = "mx-n3" >
< div class = "px-5 py-4" style = " text-align:center;" >
< button type = "button" data-mdb-button-init data-mdb-ripple-init class = "btn btn-primary btn-lg" id = "signup" > 가입하기 </ button >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ section >
@endsection
목록에서 회원가입 버튼을 클릭하면 해당 페이지가 열리게 된다.
요렇게 뜨면 성공이다. 너무 길어졌으니 다음에 회원가입 처리를 해보도록 하자.