반응형

회원가입과 로그인 링크를 달아 보자. 목록 페이지를 조금 수정한다.

 

/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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <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  

 

목록에서 회원가입 버튼을 클릭하면 해당 페이지가 열리게 된다.

 

요렇게 뜨면 성공이다. 너무 길어졌으니 다음에 회원가입 처리를 해보도록 하자.

 

반응형

+ Recent posts