#1 Sign Up - Tutorial Membuat Chat App dengan Laravel 8 dan Push Notification

Halo semuanya apa kabar nih? semoga kalian semua sehat ya, kali ini kita mau membuat fitur sign up atau account registration di tutorial kali ini ayo simak baik baik. Tapi tunggu dulu ada beberapa syarat sebelum kita mulai apa tuh? silahkan cek dibawah ya:

• HTML, CSS Javascript
• PHP dan MySQL
• Laravel (sebelum belajar laravel lebih baik belajar CodeIgniter dahulu)

Materi - materi di atas dapat kalian pelajari di channel youtubenya Web Programming Unpas dan jangan lupa dukung channel youtubenya agar youtubernya semangat. Mari kita mulai membuat web chat appsnya, pastikan kalian sudah menginstall composer, git, node.js(untuk penggunaan npm nya), dan xampp dengan PHP versi >= 7.3 pada komputer/laptop kalian ya.
Pertama - tama buat sebuah folder dengan nama chat dimana aja terserah kalian, lalu masuk ke dalam folder chat, klik kanan di area di dalam folder chat, lalu klik git bash here. Gambar:

kemudian buat sebuah project di composer dan kita akan beri nama projectnya rest-server. Gambar:

Setelah selesai membuat project baru yang diberi nama rest-server, buatlah sebuah database di phpMyAdmin dan beri nama databasenya chat. Kemudian kita sambungkan project rest-server dengan database dengan mengatur file .env yang ada di dalam folder rest-server. Gambar:

Buat authenticationnya untuk sign up dan sign in dengan laravel jetstream. Gambar:

Lalu install Jetstream dengan Livewire:

Kemudian tinggal kita npm install dan migrate:

sudah selesai membuat authenticationnya selanjutnya kita membuat oauth2 server dengan passport, install Passport via Composer di git bash kalian:

lakukan migrasi agar di database kita terdapat tabel - tabel yang dibutuhkan passport:

tinggal passport:install aja deh:

Selanjutnya kita harus memanggil Passport::routes dan kita tempatkan di dalam method boot, caranya buka file AuthServiceProvider.php yang ada di chat\rest-server\app\Providers\AuthServiceProvider.php:

<?php

namespace App\Providers;

use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Illuminate\Support\Facades\Gate;
// tambahkan ini
use Laravel\Passport\Passport;
                    

public function boot()
{
    $this->registerPolicies();

    // nah panggil passport:routesnya
    Passport::routes();
}
                    

buka file auth.php yang ada di chat\rest-server\config\auth.php lalu ubah jadi seperti ini:

'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        // awalnya driver ini valuenya token kita ganti menjadi passport
        'driver' => 'passport',
        'provider' => 'users',
        'hash' => false,
    ],
],
                    

buka file AuthServiceProvider.php yang ada di chat\rest-server\app\Providers\AuthServiceProvider.php dan atur jangka waktu expired token nya menjadi seperti ini:

public function boot()
{
    $this->registerPolicies();

    // nah panggil passport:routesnya
    Passport::routes();

    // access token kita atur expirednya menjadi 1 jam 
    Passport::tokensExpireIn(now()->addHours(1));

    // sedangkan refresh token kita atur expirednya menjadi 70 menit
    Passport::refreshTokensExpireIn(now()->addMinutes(70));
}
                    

Nah sekarang kita akan membuat rest api untuk sign up atau account registration, buat sebuah controller dengan php artisan yang akan kita beri nama BaseController dan berada di dalam folder API. Gambar:

dan satu lagi controller yang akan diberi nama SignUpController. Gambar:

class BaseController extends Controller
{
    // jika berhasil mengirim response kirim datanya
    public function sendResponse($result, $message)
    {
        $response = [
            'success'   => true,
            'data'      => $result,
            'message'   => $message
        ];

        return response()->json($response, 200);
    }

    // sedangkan jika error kirim pesan errornya
    public function sendError($error, $errorMessages = [], $code = 404)
    {
        $response = [
            'success'   => false,
            'message'   => $error
        ];

        if(!empty($errorMessages)){
            $response['data'] = $errorMessages;
        }

        return response()->json($response, $code);
    }
}
                    

ada yang akan diubah di table usersnya jadi buat dulu migrationnya:

public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('username')->unique()->nullable()->after('id');
        $table->string('fullname')->nullable()->after('username');
    });
}
                    

jangan lupa juga dimigrate ya:

selanjutnya buka file SignUpController.php di chat\rest-server\app\Http\Controllers\API\SignUpController.php lalu buat method store untuk menyimpan data user baru:

<?php

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Http\Controllers\API\BaseController;
use App\Models\User;
use Laravel\Fortify\Rules\Password;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
                    

class SignUpController extends BaseController
{
    public function signup(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'username' => ['required', 'string', 'max:255', 'unique:users'],
            'fullname' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', new Password]
        ])->validate();

        User::create([
            'username' => $request['username'],
            'fullname' => $request['fullname'],
            'name' => $request['fullname'],
            'email' => $request['email'],
            'password' => Hash::make($request['password'])
        ]);

        return $this->sendResponse([], 'Registrasi akun berhasil');
    }
}
                    

buka file api.php di chat\rest-server\routes\api.php dan buat route api agar kita bisa mengakses method signupnya:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\API\SignUpController;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->group( function () {
    Route::post('/signup', [SignUpController::class, 'signup']);
});

                    

edit juga file model usernya di chat\rest-server\app\Models\User.php:

protected $fillable = [
    // username dan fullname yang ditambahkan
    'username',
    'fullname', 
    'name',
    'email',
    'password',
];
                    

Sekarang kita akan membuat project yang diberi nama rest-client, buka folder chat lalu git bash here (ingat di dalam folder chat bukan di folder rest-server) terus tinggal buat pakai composer:

buat controller di dalam folder project rest-client dan kita akan beri nama controllernya OauthController dengan php artisan:

untuk bisa menggunakan http client kita harus mendownload dahulu packagenya menggunakan composer dan kita tempatkan di rest-client:

buka file controller OauthController.php di chat\rest-client\app\Http\Controllers\OauthController.php lalu kita buat method untuk refresh token dan access tokennya:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class OauthController extends Controller
{
    // access token
    public function access()
    {
        $response = Http::post(config('services.oauth_server.uri') . '/oauth/token', [
            'grant_type' => 'password',
            'client_id' => config('services.oauth_server.client_id'),
            'client_secret' => config('services.oauth_server.client_secret'),
            'username' => config('services.oauth_server.username'),
            'password' => config('services.oauth_server.password'),
            'scope' => '*'
        ]);

        $response = $response->json();

        $expired = now()->addSeconds($response['expires_in'])->isoFormat('DDMMYYYYHHmmss');
        session([
            'access_token' => $response['access_token'],
            'expires_in' => $expired,
            'refresh_token' => $response['refresh_token']
        ]);
    }

    // refresh token
    public function refresh()
    {
        $response = Http::post(config('services.oauth_server.uri') . '/oauth/token', [
            'grant_type' => 'refresh_token',
            'refresh_token' => session('refresh_token'),
            'client_id' => config('services.oauth_server.client_id'),
            'client_secret' => config('services.oauth_server.client_secret'),
            'scope' => '*',
        ]);

        $response = $response->json();

        session()->forget(['access_token', 'expires_in', 'refresh_token']);

        $expired = now()->addSeconds($response['expires_in'])->isoFormat('DDMMYYYYHHmmss');
        session([
            'access_token' => $response['access_token'],
            'expires_in' => $expired,
            'refresh_token' => $response['refresh_token']
        ]);
    }
}

                    

edit file services.php di chat\rest-client\config\services.php tambahkan:

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Third Party Services
    |--------------------------------------------------------------------------
    |
    | This file is for storing the credentials for third party services such
    | as Mailgun, Postmark, AWS and more. This file provides the de facto
    | location for this type of information, allowing packages to have
    | a conventional file to locate the various service credentials.
    |
    */

    'mailgun' => [
        'domain' => env('MAILGUN_DOMAIN'),
        'secret' => env('MAILGUN_SECRET'),
        'endpoint' => env('MAILGUN_ENDPOINT', 'api.mailgun.net'),
    ],

    'postmark' => [
        'token' => env('POSTMARK_TOKEN'),
    ],

    'ses' => [
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
    ],

    'oauth_server' => [
        'client_id' => env('OAUTH_SERVER_ID'),
        'client_secret' => env('OAUTH_SERVER_SECRET'),
        'uri' => env('OAUTH_SERVER_URI'),
        'username' => env('OAUTH_SERVER_USERNAME'),
        'password' => env('OAUTH_SERVER_PASSWORD'),
    ]

];

                    

giliran file .env nih yang ada di chat\rest-client\.env kita setting jadi seperti ini taruh di baris paling bawah ya:

OAUTH_SERVER_ID=isi dengan client id password grant client contoh: 2
OAUTH_SERVER_SECRET=isi dengan client secret password grant client contoh: 63g3h42h2h3h324h24h24j2jj2h3h5k5b
OAUTH_SERVER_URI=isi dengan url rest-server nya ya contoh: http://127.0.0.1:8000
OAUTH_SERVER_USERNAME=isi dengan email yang kalian buat di halaman registrasi user rest-server contoh: sesuatu@gmail.com
OAUTH_SERVER_PASSWORD=isi dengan password yang kalian buat di halaman registrasi user rest-server contoh: sebuahapelyangjatuh
                    

jadi client id dan client secret kita dapatkan dari command php artisan passport:install yang akan membuat "personal access" dan "password grant" client, isi di OAUTH_SERVER_ID dengan kolom id dan OAUTH_SERVER_SECRET dengan kolom secret yang ada yang bernama laravel password grant client di tabel oauth_clients database chat:

OAUTH_SERVER_URI diisi dengan url rest-server kalian, disini saya untuk url rest-server yaitu http://127.0.0.1:8000 sedangkan untuk rest-client yaitu http://127.0.0.1:8001. Untuk mengisi value OAUTH_SERVER_USERNAME dan OAUTH_SERVER_PASSWORD kita resgistrasi akun baru dahulu di rest-server, buka folder chat\rest-server\ klik kanan lalu git bash here kemudian ketik:

buka browser ketik url http://127.0.0.1:8000/register maka akan diarahkan ke halaman registrasi akun baru di project rest-server, jika sudah selesai registrasi akun sekarang buka phpmyadmin nya buka database chat -> table users lalu copy email dan password akun nya ke OAUTH_SERVER_USERNAME dan OAUTH_SERVER_PASSWORD

buatlah sebuah controller di rest-client bernama PagesController dengan php artisan:

kemudian buka file PagesController.php di chat\rest-client\app\Http\Controllers\PagesController.php lalu edit isi filenya:

class PagesController extends Controller
{
    public function home()
    {
        return redirect('/signup');
    }

    public function signup()
    {
        return view('signup');
    }
}
                    

buka file web.php di chat\rest-client\routes\web.php lalu kita isi filenya:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PagesController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

// Route::get('/', function () {
//     return view('welcome');
// });


Route::get('/', [PagesController::class, 'home']);
Route::get('/signup', [PagesController::class, 'signup']);
                    

buat folder dengan nama layout di chat\rest-client\resources\views\ kemudian buat file di dalam folder layout dengan nama app.blade.php, isi file app.blade.php dengan ini:

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="@yield('description')">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- icon dari font awesome -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
    <!-- custom css -->
    <link rel="stylesheet" type="text/css" href="{{ url('/') }}/assets/css/style.css">

    <title>@yield('title')</title>
  </head>
  <body>

    @yield('container')

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

                    

next buat folder dengan nama assets di chat\rest-client\public\ , buat folder lagi di dalam folder assets dengan nama css, lalu buat file style.css di dalam folder css dan kita isi filenya:

.sc-card {
    height: 100vh;
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

    .sc-container {
        padding: 0;
    }

}
                    

kita buat tampilan signupnya dengan cara buat file signup.blade.php di chat\rest-client\resources\views\signup.blade.php terus isi filenya:

@extends('layout.app')

@section('description', 'Simple chat sign up page')
@section('title', 'Sign Up - Simple Chat')

@section('container')
    <div class="container sc-container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-6">
                <div class="card sc-card">
                  <div class="card-header">
                    <div class="row">
                      <div class="col align-self-center text-center">
                        <h5>Sign Up</h5>
                      </div> 
                    </div>
                  </div>
                  <div class="card-body">
                    <form method="post" action="/signup">
                      @csrf
                      <div class="form-group">
                        <label for="exampleInputText1">Username</label>
                        <input type="text" class="form-control @if(session('msg_username')) is-invalid @endif" id="exampleInputText1" name="username" value="{{ $username ?? '' }}">
                        @if(session('msg_username'))<div class="invalid-feedback">{{ session('msg_username') }}</div>@endif
                      </div>
                      <div class="form-group">
                        <label for="exampleInputText2">Full Name</label>
                        <input type="text" class="form-control @if(session('msg_fullname')) is-invalid @endif" id="exampleInputText2" name="fullname" value="{{ $fullname ?? '' }}">
                        @if(session('msg_fullname'))<div class="invalid-feedback">{{ session('msg_fullname') }}</div>@endif
                      </div>
                      <div class="form-group">
                        <label for="exampleInputEmail1">Email</label>
                        <input type="email" class="form-control @if(session('msg_email')) is-invalid @endif" id="exampleInputEmail1" name="email" value="{{ $email ?? '' }}">
                        @if(session('msg_email'))<div class="invalid-feedback">{{ session('msg_email') }}</div>@endif
                      </div>
                      <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control @if(session('msg_password')) is-invalid @endif" id="exampleInputPassword1" name="password">
                        @if(session('msg_password'))<div class="invalid-feedback">{{ session('msg_password') }}</div>@endif
                      </div>
                      <button type="submit" class="btn btn-primary mb-3">Sign up</button>
                      <p>Have an account? <a href="{{ url('/signin') }}">Sign in</a></p>
                    </form>
                  </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
@endsection
                    

buat router baru untuk tempat url menampilkan pemberitahuan sign up berhasil di chat\rest-client\routes\web.php:

Route::get('/signin', [PagesController::class, 'signin']);
                    

kemudian buat method baru bernama signin() di chat\rest-client\app\Http\Controllers\PagesController.php:

public function signin()
{
    return view('signin');
}
                    

jangan lupa juga membuat file sign in page nya ya di chat\rest-client\resources\views\signin.blade.php untuk memberi tahu kalau akun baru kita berhasil dibuat:

@extends('layout.app')

@section('description', 'Simple chat sign in page')
@section('title', 'Sign In - Simple Chat')

@section('container')
    <div class="container sc-container">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-6">
                <div class="card sc-card">
                  <div class="card-header">
                    <div class="row">
                      <div class="col align-self-center text-center">
                        <h5>Berhasil</h5>
                      </div> 
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="alert alert-success" role="alert">
                      Akun baru anda berhasil dibuat!
                    </div>
                  </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
@endsection

                    

kita buat route baru untuk menyimpan data new account registration di chat\rest-client\routes\web.php:

Route::post('/signup', [PagesController::class, 'storeSignup']);
                    

buat method storeSignup() di chat\rest-client\app\Http\Controllers\PagesController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use App\Http\Controllers\OauthController;

class PagesController extends OauthController
{
    public function __construct()
    {
        $this->access();
    }

    public function home()
    {
        return redirect('/signup');
    }

    public function signup()
    {
        if(session('msg_username')) {
            session()->forget('msg_username');
        }

        if(session('msg_fullname')) {
            session()->forget('msg_fullname');
        }

        if(session('msg_email')) {
            session()->forget('msg_email');
        }

        if(session('msg_password')) {
            session()->forget('msg_password');
        }

        return view('signup');
    }

    public function storeSignup(Request $request)
    {
        $currentTime = now()->isoFormat('DDMMYYYYHHmmss');
        $expired = session('expires_in');

        if ($currentTime > $expired) {
            return $this->refresh();
        }

        $response = Http::withHeaders([
            'Accept' => 'application/json',
            'Authorization' => 'Bearer ' . session('access_token')
        ])->post(config('services.oauth_server.uri') . '/api/signup', [
            'username' => $request->username,
            'fullname' => $request->fullname,
            'email' => $request->email,
            'password' => $request->password
        ]);

        if($response->failed()) {
            if(empty($response['errors']['username'][0])) {
                $username = $request->username;
            } elseif(isset($response['errors']['username'][0])) {
                session()->flash('msg_username', $response['errors']['username'][0]);
                $username = $request->username;
            } else {
                $username = $request->username;
            }

            if(empty($response['errors']['fullname'][0])) {
                $fullname = $request->fullname;
            } elseif(isset($response['errors']['fullname'][0])) {
                session()->flash('msg_fullname', $response['errors']['fullname'][0]);
                $fullname = $request->fullname;
            } else {
                $fullname = $request->fullname;
            }

            if(empty($response['errors']['email'][0])) {
                $email = $request->email;
            } elseif(isset($response['errors']['email'][0])) {
                session()->flash('msg_email', $response['errors']['email'][0]);
                $email = $request->email;
            } else {
                $email = $request->email;
            }

            if(empty($response['errors']['password'][0])) {
                $emptyPassword = '';
            } elseif(isset($response['errors']['password'][0])) {
                session()->flash('msg_password', $response['errors']['password'][0]);
                $emptyPassword = '';
            } else {
                $emptyPassword = '';
            }

            return view('signup', compact('username', 'fullname', 'email'));
        }

        return redirect('/signin');
    }

    public function signin()
    {
        return view('signin');
    }
}
                    

Udah selesai nih ngodingnya ayo coba kita test. Pastikan kalian sudah menyalakan mysql nya ya di XAMPP, buka folder project rest-server nya lalu git bash here dan masukkan command berikut:

maka rest-server akan dijalankan di url http://127.0.0.1:8000. Selanjutnya giliran rest-client nih, buka folder project rest-client lalu git bash here dan masukkan command berikut(beda ya command nya sama yang tadi):

maka rest client akan dijalankan di url http://127.0.0.1:8001(buka link ini di browser kalian dan akan diarahkan ke halaman sign up) kita coba fitur signup nya:

jika akun baru nya berhasil dibuat:

Sampai disini dulu tutorial kali ini sampai jumpa.