Laravel - 회원 정보 수정

https://sung-jun.tistory.com/125

Laravel - 회원가입

이 글에 이어서 회원 정보 수정 기능입니다.

 

github.com/sungjun-ever/LaravelCustom.git

sungjun-ever/LaravelCustom

전체 코드는 위에서 확인 할 수 있습니다.

 

회원 가입 부분 코드 위치를 옮겼습니다.

기존 views에 있던 register.blade.php 파일을 auth 폴더 안으로 옮기고

RegisterController에 있는 코드를 LoginController로 옮기고 RegisterController를 삭제했습니다.

물론 web.php도 수정했습니다.

 

또한 회원가입 폼에 nickname을 추가해서 DB 테이블과 모델 모두 수정했습니다.

 

LoginController.php

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;


class LoginController extends Controller
{

    public function registerIndex(){
        return view('auth.register');
    }

    public function store(Request $request)
    {
        $validation = $request -> validate([
            'userId' => 'required|min:6|max:12|unique:users|string',
            'password' => 'required|min:10|max:16|confirmed',
            'nickname' => 'required|min:2|max:10|unique:users',
            'email' => 'required|email|unique:users',
            'tel' => 'required|min:11|max:11|unique:users'
        ]);

        User::create([
            'userId' => $validation['userId'],
            'password' => Hash::make($validation['password']),
            'nickname' => $validation['nickname'],
            'email' => $validation['email'],
            'tel' => $validation['tel']
        ]);

        return redirect('/');

    }

    public function index(){
        return view('auth.login');
    }

    public function login(Request $request){
        $validation = $request -> validate([
            'userId' => 'required',
            'password' => 'required',
        ]);

        $remember = $request -> input('remember');

        if(Auth::attempt($validation, $remember)){
            return redirect()->route('main');

        } else{
            return redirect()->back();
        }
    }

    public function logout(){
        Auth::logout();

        return redirect()->route('main');
    }

  
}

 

web.php

<?php

use App\Http\Controllers\LoginController;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\userMenuController;
use App\Http\Controllers\FreeController;
use \Illuminate\Support\Facades\Auth;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


Route::get('/', function () {
    return view('index');
}) -> name('main');

Route::get('auth/login', [LoginController::class, 'index']) -> name('login');
Route::post('auth/login', [LoginController::class, 'login']);
Route::post('auth/logout', [LoginController::class, 'logout']) -> name('logout');

Route::get('auth/register', [LoginController::class, 'registerIndex']) -> name('register');
Route::POST('auth/register', [LoginController::class, 'store']);

 

User.php(모델)

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;


    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'userId',
        'email',
        'password',
        'nickname',
        'tel',

    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

 

DB(users 테이블)

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('userId');
            $table->string('nickname');
            $table->string('email');
            $table->string('password');
            $table->string('tel');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

 

---

이제 회원 정보 수정을 만들어 보겠습니다.

제 git에서 코드를 받으셨다면 views > layouts 폴더 안에 main.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">
    <meta name="csrf-token" content="{{ csrf_token()}}">
    <script src="{{asset('js/index.js')}}"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <title>@yield('title', '연습')</title>
</head>
<body>
    <header class="bg-gray-800 min-w-full h-16 flex flex-row shadow-2xl">
        <div class="flex-initial w-3/12 py-2 text-right mr-3">
            <a href="{{route('main')}}" class="text-3xl text-white">Allonsy</a>
        </div>
        <div class="flex-initial w-6/12 h-full py-5 ml-12">
            <ul class="flex flex-row">
                <li class="flex-initial mx-2 text-white text-base hover:text-gray-400">
                    <a href="{{route('freemain')}}" >자유게시판</a></li>
            </ul>
        </div>

        <div class="flex-initial w-3/12 text-left py-4">
            @guest
                <a href="{{route('login')}}" class="inline-block text-lg text-white mr-1 hover:text-gray-400">로그인</a>
                <i class="xi-ellipsis-v text-xl text-white"></i>
                <a href="{{route('register')}}" class="text-lg text-white ml-1 mr-8 hover:text-gray-400">회원가입</a>
            @endguest

            @auth
                <a href="{{route('userMenu')}}" class="text-lg text-white mr-1 hover:text-gray-400">{{Auth::user()->nickname}}</a>
                <i class="xi-ellipsis-v text-xl text-white"></i>
                <form class="inline-block" method="post" action="/auth/logout">
                    @csrf
                    <input type="submit" class="bg-transparent cursor-pointer text-lg text-white ml-1 mr-8 hover:text-gray-400" value="로그아웃">
                </form>
            @endauth
        </div>
    </header>

    @yield('submenu')

    <section class="bg-gray-100 min-h-screen py-16">
    @yield('content')
    </section>
    <footer class="bg-white h-32">

    </footer>
</body>
</html>

 

사용자가 로그인 하지 않았을 때는 로그인, 회원가입

로그인 했을 때는 사용자 닉네임과 로그아웃 메뉴가 나타나게 했습니다.

그리고 닉네임을 눌렀을 때 회원 정보과 관련된 페이지로 가게했습니다.

 

그 다음 views > usermenu 폴더 안에 userMenu.blade.php 파일을 만들어줍니다.

@extends('layouts.main')
@section('submenu')
    <div class="w-full bg-gray-100 mx-auto pt-4">
        <div class="w-1/2 mx-auto text-lg text-center">
            <a href="{{route('updateUser')}}" class="hover:text-gray-500">회원 정보</a>
            <i class="xi-ellipsis-v mx-4"></i>
            <a href="#" class="hover:text-gray-500">작성 글 보기</a>
            <i class="xi-ellipsis-v mx-4"></i>
            <a href="#" class="hover:text-gray-500">작성 댓글 보기</a>
        </div>
    </div>

@endsection

 

터미널에 php artisan make:controller userMenuController 를 입력해 컨트롤러를 만들어줍니다.

 

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;

class userMenuController extends Controller
{
    public function index(){
        return view('usermenu.userMenu');
    }
}

 

이제 web.php에 가서 라우트를 추가해줍니다.

Route::get('usermenu/userMenu', [userMenuController::class, 'index']) -> name('userMenu');

위 코드를 추가하고 닉네임을 클릭하면

 

updateUser

이렇게 화면이 나올겁니다.

 

이제 회원 정보를 누르면 회원 정보 수정 페이지로 가야합니다.

 

views > auth에 updateUser.blade.php 파일을 만들어줍니다.

@extends('layouts.main')
@section('title', '정보 수정')

@section('content')
    <div class="mx-auto p-8 max-w-3xl h-auto bg-white shadow-lg">
        <form method="POST" action="/auth/updateUser">
            @csrf
            <p class="border-b border-gray-400 text-left mb-8 pb-1 text-2xl">&nbsp 회 원 정 보</p>
            <p>
                <label for="userId" class="inline-block w-1/4 text-right mr-4">
                    <span class="text-sm text-red-500">*</span>
                    아이디</label>
                <input id="userId" type="text" name="userId" class="rounded-lg pl-1 outline-none" size="30" value="{{Auth::user()->userId}}" readonly>
            </p>
            <p class="mt-6">
                <label for="nickname" class="inline-block w-1/4 text-right mr-4">
                    <span class="text-sm text-red-500">*</span>
                    닉네임</label>
                <input id="nickname" type="text" name="nickname" class="rounded-lg pl-1 outline-none" size="30" value="{{Auth::user() -> nickname}}" readonly>
            </p>
            <p class="mt-6">
                <label for="email" class="inline-block w-1/4 text-right mr-4">
                    <span class="text-sm text-red-500">*</span>
                    이메일</label>
                <input id="email" type="email" name="email" class="rounded-lg pl-1 outline-none" size="30" value="{{Auth::user() -> email}}" readonly>
            </p>

            <p class="mt-6">
                <label for="password" class="inline-block w-1/4 text-right mr-4">
                    <span class="text-sm text-red-500">*</span>
                    비밀번호</label>
                <input id="password" type="password" name="password" class="{{$errors-> first('password') ? 'border-2 border-red-600' : 'border-2 border-blue-400'}}
                    rounded-lg pl-1 outline-none" size="30">
                <span class="ml-4 text-sm text-gray-500">10 ~ 16글자입니다</span>
                <p class="text-sm text-red-500 text-left w-5/12 mx-auto">{{Session::get('message')}}</p>

            </p>

            <p class="mt-6">
                <label for="password_confirmation" class="inline-block w-1/4 text-right mr-4">
                    <span class="text-sm text-red-500">*</span>
                    비밀번호 확인</label>
                <input id="password_confirmation" type="password" name="password_confirmation"
                       class="{{$errors-> first('password_confirmation') ? 'border-2 border-red-600' : 'border-2 border-blue-400'}}
                           rounded-lg pl-1 outline-none" size="30">
            </p>

            <p class="mt-6">
                <label for="tel" class="inline-block w-1/4 text-right mr-4">
                    <span class="text-sm text-red-500">*</span>
                    전화번호</label>
                <input id="tel" type="tel" name="tel" class="rounded-lg pl-1 outline-none" size="30" value="{{Auth::user() -> tel}}">
            </p>

            <p class="mt-8 text-center">
                <input class="bg-blue-600 rounded-xl hover:bg-blue-800 text-white px-6 py-2 mr-6" type="submit" value="수정">
                <input class="bg-red-600 rounded-xl hover:bg-red-800 text-white px-6 py-2" id="backMain" type="button"
                       value="취소" onclick="location.href = '{{route('main')}}'">
            </p>
        </form>
    </div>
@endsection

 

LoginController.php에 아래 코드를 추가해줍니다.

public function updateUser(){
        return view('auth/updateUser');
    }

 

web.php에 아래 코드를 추가합니다.

Route::get('auth/updateUser', [LoginController::class, 'updateUser']) -> name('updateUser');

 

이제 회원 정보 메뉴를 클릭하면

회원 정보

이렇게 수정 화면이 나옵니다.

비밀번호만 수정하게 만들었습니다.

 

이제 LoginController.php에 수정 코드를 만들어줍시다.

public function update(Request $request){
        $validate = $request -> validate([
            'password' => 'required|confirmed|min:10|max:16|',
        ]);

        $same = Hash::check($validate['password'], Auth::user() -> password);
        if ($same) {
            return redirect() -> back() -> with('message', '이전 비밀번호는 사용할 수 없습니다.');
        }

        $user = User::find(Auth::user()-> id);
        $user -> password = Hash::make($validate['password']);
        $user -> save();

        Auth::logout();
        return redirect() -> route('main');
    }

 

web.php에 라우터를 추가합니다.

Route::post('auth/updateUser', [LoginController::class, 'update']);

 

 

먼저 password 유효성 검증을 해줍니다.

$same은 이전 비밀번호와 같은지 체크 하는 부분입니다.

Hash::check 리턴 값이 boolean이기 때문에 if문을 저렇게 사용했습니다.

그래서 이전 비밀번호와 같다면 메세지와 함께 회원정보 수정 창으로 돌아가게했습니다.

 

에러 발생

비밀번호를 같게하면 이렇게 메세지가 출력됩니다.

 

그리고 $user는 현재 로그인한 사용자를 DB에서 찾아 정보를 저장하고 password를 바꿔줍니다.

정보를 바꾸었다면 로그아웃 시키고 다시 로그인하게 만들었습니다.