1. Laravel
  2. PHP

Menambahkan halaman update profile Laravel

This entry is part 5 of 6 in the series Laravel Authentication

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 http://localhost:8000/profile. maka anda akan melihat halaman seperti dibawah ini.

update profile page

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.

required validation

Menambahkan link ke halaman update profile

Selanjutnya, 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>
Edit profile link
Series Navigation<< Memodifikasi proses Login LaravelMenambahkan halaman update Password Laravel >>
https://www.lab-informatika.com/
Comments to: Menambahkan halaman update profile Laravel

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

Login

Welcome to Typer

Brief and amiable onboarding is the first thing a new user sees in the theme.
Join Typer
Registration is closed.