Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@meow_o_o(!)

laravel プロフィール編集機能　ユーザー名・メールアドレス、パスワードの変更（更新）

Last updated at Posted at 2021-11-09

#やりたいこと

プロフィールの編集（ユーザーのユーザー名・メールアドレス、パスワードの変更）

#準備

まずが【プロフィール編集画面】に飛べるように設定

<a class="dropdown-item" href="{{route('profile')}}"><span class="text-primary">プロフィール編集</span></a>
web.php
Route::group(['middleware' => 'auth'], function () {

//プロフィール編集画面表示
Route::get('/profile', 'UserController@show')->name('profile');
//プロフィール編集
Route::put('/profile', 'UserController@profileUpdate')->name('profile_edit');
//パスワード編集
Route::put('/password_change', 'UserController@passwordUpdate')->name('password_edit');
}

ユーザーコントローラーの作成

$ php artisan make:controller UserController
UserController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

//↓以下を追加
use Illuminate\Support\Facades\Auth;
use App\User;

class UserController extends Controller
{
    /**
     * プロフィール編集画面表示
     * @param
     * @return View プロフィール編集画面
     */
    public function show()
    {
        return view('profile');
    }

    /**
     * プロフィール編集機能（ユーザー名、メールアドレス）
     * @param
     * @return Redirect 一覧ページ-メッセージ（プロフィール更新完了）
     */
    public function profileUpdate()
    {
        return redirect()->route('articles_index')->with('msg_success', 'プロフィールの更新が完了しました');
    }

    /**
     * パスワード編集機能
     * @param
     * @return Redirect 一覧ページ-メッセージ（パスワード更新完了）
     */
    public function passwordUpdate()
    {
        return redirect()->route('articles_index')->with('msg_success', 'パスワードの更新が完了しました');
    }
}
profile.php
@extends('layout.article_layout')
@section('content')
    <div class="card w-50 mx-auto m-5">
        <div class="card-body">



        </div>
    </div>
@endsection

#ユーザー名・メールアドレスの変更

UserController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\User;
use Illuminate\Validation\Rule;

class UserController extends Controller
{
    /**
     * プロフィール編集画面表示
     * @return View プロフィール編集画面
     */
    public function show()
    {
        $user = Auth::user();
        return view('profile', ['user' => $user]);
    }

    /**
     * プロフィール編集機能（ユーザー名、メールアドレス）
     * @param Request $request
     * @return Redirect 一覧ページ-メッセージ（プロフィール更新完了）
     */
    public function profileUpdate(Request $request, User $user)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => ['required', 'string', 'email', 'max:255', Rule::unique('users')->ignore(Auth::id())],
        ]);

        try {
            $user = Auth::user();
            $user->name = $request->input('name');
            $user->email = $request->input('email');
            $user->save();

        } catch (\Exception $e) {
            return back()->with('msg_error', 'プロフィールの更新に失敗しました')->withInput();
        }

        return redirect()->route('articles_index')->with('msg_success', 'プロフィールの更新が完了しました');
    }

    /**
     * パスワード編集機能
     * @param
     * @return Redirect 一覧ページ-メッセージ（パスワード更新完了）
     */
    public function passwordUpdate()
    {
        return redirect()->route('articles_index')->with('msg_success', 'パスワードの更新が完了しました');
    }
}
profile.php
@extends('layout.article_layout')
@section('content')
    <div class="card w-50 mx-auto m-5">
        <div class="card-body">
            <div class="pt-2">
                <p class="h3 border-bottom border-secondary pb-3">プロフィール編集</p>
            </div>
            {!! Form::open(['route' => ['profile_edit'], 'method' => 'PUT']) !!}
            {!! Form::hidden('id',$user->id) !!}
            <div class="m-3">
                <div class="form-group pt-1">
                    {{Form::label('name','ユーザー名')}}
                    {{Form::text('name', $user->name, ['class' => 'form-control', 'id' =>'name'])}}
                    <span class="text-danger">{{$errors->first('name')}}</span>
                </div>
                <div class="form-group pt-2">
                    {{Form::label('email','メールアドレス')}}
                    {{Form::email('email', $user->email, ['class' => 'form-control', 'id' =>'email'])}}
                    <span class="text-danger">{{$errors->first('email')}}</span>
                </div>
                <div class="form-group pull-right">
                    {{Form::submit(' 更新する ', ['class'=>'btn btn-success rounded-pill'])}}
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
@endsection

#パスワードの変更

Usercontroller.php
     /**
     * パスワード編集機能
     * @param Request $request
     * @return Redirect 一覧ページ-メッセージ（パスワード更新完了）
     */
    public function passwordUpdate(Request $request)
    {
        $request->validate([
            'password' => 'required|string|min:6|confirmed',
        ]);

        try {
            $user = Auth::user();
            $user->password = bcrypt($request->input('password'));
            $user->save();

        } catch (\Exception $e) {
            return back()->with('msg_error', 'パスワードの更新に失敗しました')->withInput();
        }

        return redirect()->route('articles_index')->with('msg_success', 'パスワードの更新が完了しました');
    }
profile.php
@extends('layout.article_layout')
@section('content')
    <div class="card w-50 mx-auto m-5">
        <div class="card-body">
            <div class="pt-2">
                <p class="h3 border-bottom border-secondary pb-3">プロフィール編集</p>
            </div>
            {!! Form::open(['route' => ['profile_edit'], 'method' => 'PUT']) !!}
            {!! Form::hidden('id',$user->id) !!}
            <div class="m-3">
                <div class="form-group pt-1">
                    {{Form::label('name','ユーザー名')}}
                    {{Form::text('name', $user->name, ['class' => 'form-control', 'id' =>'name'])}}
                    <span class="text-danger">{{$errors->first('name')}}</span>
                </div>
                <div class="form-group pt-2">
                    {{Form::label('email','メールアドレス')}}
                    {{Form::email('email', $user->email, ['class' => 'form-control', 'id' =>'email'])}}
                    <span class="text-danger">{{$errors->first('email')}}</span>
                </div>
                <div class="form-group pt-2">
                    <p>パスワード</p>
                    <div class="row g-3">
                        <div class="col-md-2">
                            <a>*****</a>
                        </div>
                        <div class="col-md-10">
                            <button type="button" class="btn-sm btn-success rounded-pill" data-toggle="modal"
                                    data-target="#exampleModal">パスワードを更新する
                            </button>
                        </div>
                    </div>
                </div>
                <div class="form-group pull-right">
                    {{Form::submit(' 更新する ', ['class'=>'btn btn-success rounded-pill'])}}
                </div>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <p class="modal-title">パスワード更新</p>
                </div>
                <div class="modal-body">
                    {!! Form::open(['route' => ['password_edit'], 'method' => 'PUT']) !!}
                    {!! Form::hidden('id', $user->id) !!}
                    <div class="form-group pt-1">
                        {{Form::label('password','新しいパスワード')}}
                        {{Form::password('password', ['class' => 'form-control', 'id' =>'password'])}}
                        <span class="text-danger">{{$errors->first('password')}}</span>
                    </div>
                    <div class="form-group pt-1">
                        {{Form::label('password_confirmation','新しいパスワード（確認）')}}
                        {{Form::password('password_confirmation', ['class' => 'form-control', 'id' =>'password_confirmation'])}}
                        <span class="text-danger">{{$errors->first('password_confirmation')}}</span>
                    </div>
                    <div class="w-25">
                        {{Form::submit(' 更新する ', ['class'=>'btn btn-success rounded-pill'])}}
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
    @if ($errors->any())
        <script src="{{ asset('js/modal.js') }}"></script>
    @endif
@endsection

public/js配下にjsファイルを作成

modal.js
$(function () {
    $('#exampleModal').modal();
});
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?