Menambahkan halaman update profile Laravel

Seperti pada kebanyakan aplikasi tentu saja sebuah project memerlukan sebuah fitur untuk mengizinkan pengguna mengupdate data profile mereka. Pada artikel kali ini kita akan membahas bagaimana menambahkan fitur update profile pada Laravel.

Edit Profile

Untuk menambahkan fitur update profile pada Laravel, pertama kita akan membuat sebuah halaman untuk menampilkan profile user.

Profile Controller

Pertama kita buat controller baru dengan nama class misalnya ProfileController. Gunakan perintah artisan untuk membuat controller baru.

php artisan make:controller ProfileController

Kemudian tambahkan method dengan nama edit untuk menampilkan halaman edit profile.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ProfileController extends Controller
{
    /**
     * Show the update profile page.
     *
     * @param  Request $request
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function edit(Request $request)
    {
        return view('profile.edit', [
            'user' => $request->user()
        ]);
    }
}

Route

Tambahkan route untuk menampilkan halaman edit profile dan jangan lupa menambahkan auth middleware pada route ini untuk memastikan hanya user yang login yang bisa mengakses halaman ini.

Route::group(['middleware' => 'auth'], function () {
    Route::get('profile', 'ProfileController@edit')->name('profile.edit');
});

View Edit Profile

Kemudian buat view baru (resources/views/profile/edit.blade.php) untuk menampilkan halaman edit profile.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    Update Profile
                </div>

                <div class="card-body">
                    <form method="POST" action="{{ route('profile.update') }}">
                        @method('patch')
                        @csrf

                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name', $user->name) }}" autocomplete="name" autofocus>

                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="username" class="col-md-4 col-form-label text-md-right">{{ __('Username') }}</label>

                            <div class="col-md-6">
                                <input id="username" type="text" class="form-control @error('username') is-invalid @enderror" name="username" value="{{ old('username', $user->username) }}" autocomplete="username" autofocus>

                                @error('username')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email', $user->email) }}" autocomplete="email">

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Update Profile
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Untuk mengakses halaman update profile, buka browser anda dan masukan alamat https://localhost:8000/profile. maka anda akan melihat halaman seperti dibawah ini.

Update Profile

Setelah kita bisa menampilkan halaman edit profile, selanjutnya kita akan membuat proses untuk mengupdate profile user di database.

Profile Controller

Untuk menambahkan proses update profile, tambahkan sebuah method pada controller Profile untuk menangani proses update database.

/**
 * Update user's profile
 *
 * @param  Request $request
 * @return \Illuminate\Contracts\Support\Renderable
 */
public function update(Request $request)
{
    $request->user()->update(
        $request->all()
    );

    return redirect()->route('profile.edit');
}

Route

Tambahkan route untuk menangani method update pada controller profile kemudian beri nama route dengan nama profile.update karena kita menggunakan nama route ini pada halaman edit profile.

Route::group(['middleware' => 'auth'], function () {

    Route::get('profile', 'ProfileController@edit')
        ->name('profile.edit');

    Route::patch('profile', 'ProfileController@update')
        ->name('profile.update');
});

Menambahkan validasi update profile

Untuk memvalidasi input pengguna pada saat update profile, tambahkan FormRequest untuk menangani proses validasi ini dengan menjalankan perintah dibawah ini.

php artisan make:request UpdateProfileRequest

Perintah diatas akan membuat sebuah file baru (app\Http\Requests\UpdateProfileRequest.php), kemudian ubah class UpdateProfileRequest seperti dibawah ini:

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\Rule;

class UpdateProfileRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return Auth::check();
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'name' => [
                'required', 'string', 'max:255'
            ],
            'username' => [
                'required', 'string', 'max:255',
                Rule::unique('users', 'username')->ignore(Auth::user()->id)
            ],
            'email' => [
                'required', 'email', 'max:255',
                Rule::unique('users', 'email')->ignore(Auth::user()->id)
            ],
        ];
    }
}

Sesuaikan rules sesuai dengan kebutuhan project kita dan inject class UpdateProfileRequest pada controller Profile.

/**
 * Update user's profile
 *
 * @param  UpdateProfileRequest $request
 * @return \Illuminate\Contracts\Support\Renderable
 */
public function update(UpdateProfileRequest $request)
{
    $request->user()->update(
        $request->all()
    );

    return redirect()->route('profile.edit');
}

Kemudian coba update profile dengan mengosongkan nama pada form.

Menambahkan link ke halaman update profile

Langkah terakhir dalam implementasi menambahkan halaman update profile pada project Laravel, kita akan menambahkan halaman untuk update profile pada layout utama project kita (resources/views/layouts/app.blade.php).

<a href="{{ route('profile.edit') }}" class="dropdown-item">
    Edit Profile
</a>

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S