Memodifikasi Halaman Register Laravel

Ketika menggunakan Laravel authentication scaffold yang merupakan template standar yang disediakan oleh Laravel, tentu saja kita harus menyesuaikan dengan kebutuhan pada project kita, oleh karena itu pada artikel ini kita akan membahas bagaimana memodifikasi halaman register pada Laravel.

Menambahkan field baru pada halaman register

Untuk menambahkan field baru pada halaman register, kita hanya perlu merubah halaman view register (resources/views/auth/register.blade.php)

Sebagai contoh, kita akan menambahkan field username pada saat pengguna mendaftar pada project kita.

Database Migration

Pertama, kita harus menambahkan field username terlebih dahulu pada table users.

php artisan make:migration add_username_to_users --table=users

Perintah diatas akan membuat file migration baru pada directory database/migrations. Selanjutnya ubah seperti kode berikut ini untuk menambahkan field username pada table users.

<?php

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

class AddUsernameToUsers extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('username')->unique();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn('username');
        });
    }
}

Kemudian jalankan perintah migrate untuk mengeksekusi migrations.

php artisan migrate

Setelah menjalankan perintah diatas, kita akan memiliki field username pada table users.

View register

Tambah kode dibawah ini untuk menambahkan input username pada halaman register.

<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') }}" required autocomplete="username" autofocus>

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

Setelah menambahkan kode diatas, halaman registrasi pada project kita akan terlihat seperti ini.

Register Controller

Setelah menambahkan field username pada halaman register, langkah selanjutnya adalah update controller Register untuk memvalidasi input dan menyimpan input ke database.

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;

class RegisterController extends Controller
{
    //

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'username' => ['required', 'string', 'unique:users', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'username' => $data['username'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }
}

Silahkan sesuaikan validasi field sesuai dengan kebutuhan project anda.

Model User

Langkah terakhir yaitu merubah model User dengan menambahkan username pada property fillable / mass assignment.

<?php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable implements MustVerifyEmail
{
    //

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'username', 'email', 'password',
    ];

   //
}

Menambahkan data untuk field baru

Pada saat memodifikasi halaman register pada Laravel, terkadang kita juga perlu untuk menambahkan field baru yang mana datanya mengambil dari source lain, misalnya database. Untuk kasus ini, kita perlu merubah controller untuk register dengan mengirimkan data ke view register.

Register Controller

Langkah pertama, kita harus update RegisterController class (app/Http/Controllers/Auth/RegisterController.php) dengan menambahkan data yang harus kita kirim ke view.

Sebagai contoh, kita perlu menambahkan field negara pada saat user registrasi. Jika anda perlu untuk mengambil data dari database, silahkan sesuaikan dengan data yang diperlukan.

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;

class RegisterController extends Controller
{
    //

    /**
     * Show the application registration form.
     *
     * @return \Illuminate\Http\Response
     */
    public function showRegistrationForm()
    {
        return view('auth.register', [
            'countries' => ['Indonesia', 'Australia']
        ]);
    }

    //
}

Pada contoh diatas, kita mengirimkan data country ke view register, sehingga kita bisa menampilkan daftar negara pada view register. Selanjutnya, ubah view register (resources/views/auth/register.blade.php) dengan menambahkan input baru.

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

    <div class="col-md-6">
        <select name="country" id="country" class="form-control">
            @foreach ($countries as $country)
                <option value="{{ $country }}">
                    {{ $country }}
                </option>
            @endforeach
        </select>

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

Setelah menambahkan field country pada view register, halaman register project kita akan terlihat seperti ini:

Sama seperti menambahkan username yang telah dibahas sebelumnya, kita juga harus memodifikasi controller Register dan model User untuk bisa menyimpan data country ke database.

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