Secara default apabila kita baru saja menggunakan Laravel untuk membangun web aplikasi, kita akan menggunakan email untuk login. Tips ini akan menunjukkan bahwa kita bisa menggunakan username untuk login ke dalam aplikasi. Cara nya sangat mudah, kita hanya perlu memodifikasi sedikit file dan tambahkan beberapa baris kode.
Kita mulai dari nol.
1. Install Laravel
Buka program terminal, masuk ke dalam root directory, kemudian install laravel :
|
1 |
composer create-project --prefer-dist laravel/laravel indocoder |
Tunggu hingga instalasi selesai, masuk ke dalam direktori project, kemudian jalankan server :
|
1 2 |
> cd indocoder > php artisan serve |
Default laravel akan menggunakan port 8000 di server. Buka browser dan ketik urlnya :
2. Siapkan Database
Buat file .env dengan cara melakukan copy .env.example yang sudah ada :
|
1 |
> cp .env.example .env |
Apabila file .env sudah ada, kita masukkan nama database serta username dan passwordnya. Kita akan menggunakan MySQL, sebelumnya harus sudah diinstall di dalam komputer. Saya menggunakan MariaDB serta Sequel Pro untuk GUI nya.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=root |
Jalankan migrasi untuk membuat tabel users di dalam aplikasi.
|
1 |
> php artisan migrate |
3. Install Laravel UI dan Auth
Untuk melakukan authentikasi seperti Register user dan Login, di Laravel 7 menggunakan paket dari laravel/ui. Kita perlu melakukan instalasi paket ini dengan mengetikkan perintah berikut pada terminal :
|
1 |
> composer require laravel/ui |
Setelah installasi laravel ui selesai, selanjutnya kita akan menginstall authentikasi dengan perintah :
|
1 |
> php artisan ui bootstrap --auth |
|
1 |
> npm install && npm run dev |
Setelah instalasi selesai, jalankan lagi server dengan php artisan serve kemudian buka browser, maka di pojok kanan atas terdapat text yang bisa di klik untuk melakukan login dan register.
4. Modifikasi Tabel Users
Selanjutnya, kita akan memodifikasi tabel users untuk menambahkan kolom ‘username’ yang akan kita gunakan untuk melakukan login.
Pada terminal, jalankan perintah untuk membuat migration :
|
1 |
> php artisan make:migration alter_users_add_username --table=users |
Akan muncul satu file baru di folder database/migrations, modifikasi file tersebut untuk menambahkan username :
|
1 2 3 4 5 6 |
public function up() { Schema::table('users', function (Blueprint $table) { $table->string('username'); }); } |
Jalankan perintah migrate untuk mengeksekusi:
|
1 |
> php artisan migrate |
Sekarang kita memiliki kolom username di tabel users.
5. Modifikasi Form Register
Selanjutnya, kita akan memodifikasi form register untuk menambahkan field username. Sebelumnya, tambahkan ‘username’ pada model App\User.php
|
1 2 3 |
protected $fillable = [ 'name', 'email', 'password', 'username' ]; |
resources/views/auth/register.blade.php
Tambahkan input untukk username di file ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Selanjutnya, modifikasi RegisterController pada function validator dan create:
App/Http/Auth/RegisterController.php
|
1 2 3 4 5 6 7 8 9 |
protected function validator(array $data) { return Validator::make($data, [ 'name' => ['required', 'string', 'max:255'], 'username' => ['required', 'string', 'max:255'], 'email' => ['required', 'string', 'email', 'max:255', 'unique:users'], 'password' => ['required', 'string', 'min:8', 'confirmed'], ]); } |
|
1 2 3 4 5 6 7 8 9 |
protected function create(array $data) { return User::create([ 'name' => $data['name'], 'username' => $data['username'], 'email' => $data['email'], 'password' => Hash::make($data['password']), ]); } |
Selanjutnya, coba klik text Register dan lakukan registrasi :
Kita berhasil masuk ke menu dashboard, selanjutnya coba logout dan login menggunakan username yang baru kita buat. Kita tidak akan bisa melakukan login, karena harus login menggunakan email :
Bagaimana cara untuk login menggunakan username? Langkah berikutnya adalah :
6. Modifikasi Form Login dan LoginController
resources/views/auth/register.blade.php
Ubah input untuk email menjadi seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Modifikasi LoginController.php dengan menambahkan function username untuk login:
App/Http/Auth/LoginController.php
|
1 2 3 |
public function username() { return 'username'; } |
Coba kita buka halaman login, dan login menggunakan username :
Berhasil!
Mudah kan?
untuk membuat fitur login register forgot pass yang di jadikan rest api gmn ya gan ?
Disini gan : https://indocoder.com/laravel-vue/laravel-7-backend-api-and-vuejs-simple-crud/
kok saya mencoba tpi bnyk error yk bro?
Error nya apa ya?
Terima kasih banyak sangat membantu!