Tambah Fields pada Form Registrasi Laravel

Secara default form registrasi Laravel terdapat Name, E-Mail Address, Password and Confirm Password. Kita juga bisa menambahkan field baru seperti username, phone. Bagaimana caranya untuk menambahkan field pada form registrasi di framework Laravel ?

Mari mulai development kasus ini:

Untuk menjalankan perintah composer dan artisan pastikan kita sudah masuk ke folder project Laravel.

// masuk ke folder project pada linux
cd /var/www/html/blog

Step 1 — Membuat Authentication Laravel

Baca tutorial Authentication Laravel melalui tautan berikut:

Membuat Authentication pada Laravel

Step 2— Tambah field username pada table users

Pada step ini kita akan membuat migration baru untuk menambahkan field username pada table users. Kita menggunakan datatype varchar pada field username.

Buka terminal dan jalankan perintah artisan berikut:

php artisan make:migration add_username_column_to_users_table
// Created Migration: xx_xx_xx_xx_add_username_column_to_users_table

Kemudian edit file migration xx_xx_xx_xx_add_username_column_to_users_table yang ada pada folder database/migrations:

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class AddUsernameColumnToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('username')->unique()
                  ->after('email');
        });
    }    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {

        });
    }
}

Jalankan migration dengan perintah artisan berikut pada terminal:

php artisan migrate

Step 3— Edit view form register

Kemudikan buka file resources/views/auth/register.blade.php dan tambahkan bari kode HTML untuk field username berikut pada form register:

// edit file register.blade.php
<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">
@error('username')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>

Kita baru saja menambahkan field username pada form register :

Akses route http://localhost:8000/register

Step 3— Modify RegisterController

Buka file controller Auth/RegisterController.php lalu ubah method validator() seperti berikut:

// edit method validator
protected function validator(array $data)
{
    return Validator::make($data, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => ['required', 'string', 'min:8', 'confirmed'],
        'username' => ['required', 'string', 'min:4', 'max:255', 'unique:users'],
    ]);
}

dan edit method create() seperti berikut:

// edit method create
protected function create(array $data)
{
    return User::create([
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => Hash::make($data['password']),
        'username' => $data['username'],
    ]);
}

Final kode RegisterController.php

// edit file RegisterController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use App\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
class RegisterController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Register Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation. By default this controller uses a trait to
    | provide this functionality without requiring any additional code.
    |
    */
    use RegistersUsers;
    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }
    /**
     * 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'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
            'username' => ['required', 'string', 'min:4', 'max:255', 'unique:users'],
        ]);
    }
    /**
     * 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'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
            'username' => $data['username'],
        ]);
    }
}

Step 4— Edit Model User.php

Buka file model app/User.php dan tambahkan field “username” pada property $fillable :

// property $fillable
protected $fillable = [
    'name', 'email', 'password', 'username',
];

Final kode model User.php

// app/User.php
<?php
namespace App;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
    use Notifiable;
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password', 'username',
    ];
    /**
     * 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',
    ];
}

Step 5— Buka route pada browser

Jalankan perintah php artisan serve pada terminal. Akses route register dan input test data pada browser.

Fom Register

Kemudian check data pada database table users:

Data users dengan tambahan field username

Next Chapter

On progress

Support the Author

Jika suka dengan artikel ini, bisa support saya ditautan berikut ini https://karyakarsa.com/tobidsn :)

Cheers
Tobi Ahmad