Menampilkan Notification di Laravel 8 dengan Laravel Notify Package

Menampilkan Notification di Laravel 8 dengan Laravel Notify Package

Admin
Admin・ 22 Agustus 2021
8 min read ・ 311 views

Laravel Notification - Fitur notification merupakan pesan singkat yang berisikan informasi dan bersifat penting yang dikirimkan ke user. Fitur Notification sangat diperlukan untuk aplikasi-aplikasi yang termasuk dalam kategori e-commerce, social media, blog dan lain-lain. Bentuk notification sangat beragam mulai dari email notification, whatsapp, sms, toast notification (biasanya muncul di halaman website atau aplikasi).

Jika kita membangun aplikasi atau website dengan menggunkanan laravel sebagai frameworknya, kita bisa dengan mudah membuat notification dengan media siaran melalui email, sms, slack, whatsapp dan toast notification.

Laravel notify package

Nah. pada artikel ini, kami akan coba menjelaskan dan membagikan tutorial tentang bagaimana cara mudah untuk membuat toast notification di laravel versi 8. Di tutorial ini, kita akan membuat toast notification menggunakan laravel notify package dari mckenziearts. Laravel notify adalah package yang memungkinkan kita menambahkan fitur notification di proyek kita. Laravel notify package juga telah menyediakan beragam notification design menarik yang bisa kita gunakan secara gratis.

Sebagai percobaan, kita akan menggunakan atau mengimplementasikan laravel notify untuk memberikan notification ke user yang telah berhasil register di aplikasi atau website kita. Untuk itu, pada percobaan ini nanti kita memerlukan fitur authentication dan kita akan menggunakan laravel ui package.

Oke, mari kita langsung ke koding 🚀 👨‍🚀

Step 1: Install Laravel Versi Terbaru

laravel new laravel-notify

Langkah pertama yang harus kita lakukan tentu saja dimulai dengan menginstall laravel versi terbaru (saat ini versi 8). Ada beberapa cara untuk menginstall laravel, antara lain dengan laravel installer dengan perintah seperti di atas dan menggunakan composer dengan perintah seperti di bawah ini.

composer create-project laravel/laravel laravel-notify

Silahkan memilih salah satu cara yang ingin digunakan untuk installasi laravel. Dari kedua contoh perintah installasi laravel di atas, akan sama-sama menghasilkan atau generate laravel project dengan nama laravel-notify.

Tunggu hingga proses installasi selesai dan jika sudah selesai, jangan lupa untuk masuk ke direktori project menggunakan perintah cd laravel-notify.

Step 2: Install Laravel UI

composer require laravel/ui
php artisan ui bootstrap --auth
npm install && npm run dev

Kemudian, kita perlu menginstall laravel ui package untuk membuat fitur authentication di laravel. Jalankan perintah-perintah seperti di atas secara berurutan. Dan jika saat menjalankan perintah npm install && npm run dev terjadi error, coba jalankan lagi perintah tersebut.

Step 3: Setup Database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_notify
DB_USERNAME=root
DB_PASSWORD=

Di langkah ketiga, kita perlu untuk membuat database baru untuk menampung tabel-tabel yang akan digunakan untuk data-data seperti data users. Buat database baru dan jangan lupa untuk menyesuaikan DB_DATABASE di file .env seperti contoh di atas.

php artisan migrate

Dan jika sudah selesai membuat database baru dan setup file .env, jalankan perintah php artisan migrate.

Step 4: Install Laravel Notify Package

composer require mckenziearts/laravel-notify

Kemudian, kita perlu menginstall laravel notify package ke dalam laravel project kita. Jalankan perintah seperti di atas untuk menginstall laravel notify.

php artisan vendor:publish --provider="Mckenziearts\Notify\LaravelNotifyServiceProvider"

Publish config file dan assets dengan menjalankan perintah seperti di atas.

composer dump-autoload

Selanjutnya, jalankan perintah composer dump-autoload seperti di atas.

Step 5: Setup Layout

<!doctype html>
<html>
    <head>
        <title>Laravel Notify</title>
        @notifyCss
    </head>
    <body>
        
        
        @include('notify::messages')
        // Laravel 7 or greater
        <x:notify-messages />
        @notifyJs
    </body>
</html>

Di view, kita cukup menambahkan styles links dengan @notifyCss, scripts links dengan @notifyJs dan sertakan notify partial ke master layout kita dengan @include('notify::messages') atau untuk laravel versi 7 keatas bisa menggunakan <x:notify-messages/>. Untuk peletakan scripts tersebut di view, bisa dilihat seperti contoh di atas.

Jadi, karena kita telah menggunakan laravel ui package yang artinya kita juga sudah mempunyai master layout yaitu app.blade.php yang terletak di direktori resources/views/layouts, maka kita perlu menambahkan tiga scripts tersebut di file app.blade.php

Step 6: Edit RegistersUsers.php

public function register(Request $request)
    {
        $this->validator($request->all())->validate();

        event(new Registered($user = $this->create($request->all())));

        $this->guard()->login($user);

        if ($response = $this->registered($request, $user)) {
            return $response;
        }

        notify()->success('Hi '.$request->name.', welcome to codelapan');

        return $request->wantsJson()
                    ? new JsonResponse([], 201)
                    : redirect($this->redirectPath());
    }

Kemudian buka file RegistersUsers.php yang terletak di direktori vendor/laravel/ui/auth-backend/RegistersUsers.php. Pada method register, sisipkan script notify()->success('Hi '.$request->name.', welcome to codelapan');. Dengan penambahan script tersebut, ketika user berhasil register maka akan menampilkan toast notification seperti pada cover artikel ini.

Laravel notify menyediakan 5 type notification, yaitu:

  1. Toast notification (seperti yang telah diimplementasikan pada file RegistersUsers.php di atas)
    notify()->success('Welcome to Laravel Notify ⚡️')
    or
    notify()->success('Welcome to Laravel Notify ⚡️', 'My custom title')
  2. Connectify notification
    connectify('success', 'Connection Found', 'Success Message Here')
  3. Drakify notification (menampilkan alert notification)
    drakify('success') // for success alert 
    or
    drakify('error') // for error alert 
  4. Smilify notification (menampilkan simple custom toast notification menggunakan smiley (😊) emoticon)
    smilify('success', 'You are successfully reconnected')
  5. Emotify notification (menampilkan simple custom toast notification menggunakan vector emoticon)
    emotify('success', 'You are awesome, your data was successfully created')

 

Kita dapat mendefinisikan preset notification di config file dengan menggunakan struktur seperti di bawah ini. 

'preset-messages' => [
    'user-updated' => [
        'message' => 'The user has been updated successfully.',
        'type'    => 'success',
        'model'   => 'connect',
        'title'   => 'User Updated',
    ],
    'user-deleted' => [
        'message' => 'The user has been deleted successfully.',
        'type'    => 'success',
        'model'   => 'connect',
        'title'   => 'User Deleted',
    ],
],

*Config file untuk laravel notify ini terletak di folder config dengan nama notify.php.

Jika kita memiliki notifikasi khusus yang digunakan di beberapa tempat berbeda di sistem kita, kita dapat mendefinisikan sebagai preset notification di config file. Hal ini dapat memudahkan untuk mempertahankan notification yang umum digunakan di satu tempat.

notify()->preset('common-notification')

Sebagai contoh, untuk menggunakan preset notification telah didefinisikan dengan nama "common-notification", gunakan script seperti contoh di atas.

notify()->preset('common-notification', ['title' => 'This is the overridden title'])

Jika diperlukan, kita juga bisa mengganti value yang ditetapkan dalam config file. Misalnya, notification ini bisa berguna untuk umum, tetapi kita ingin mengubah icon di satu tempat tertentu yang digunakan tanpa harus menulis notification secara manual. Untuk melakukan hal seperti ini, cukup berikan array yang memiliki key attribute yang ingin kita timpa dan value yang ingin kita timpa. Sebagai contoh, kita dapat mengganti 'title' dari 'common notification' dengan menggunakan script seperti di atas.

Step 7: Testing

Oke, setelah melewati langkah-langkah mulai dari install laravel versi terbaru (saat ini versi 8), install laravel ui package, install laravel notify package sampai langkah untuk setup blade view dan RegistersUsers.php, maka di langkah terakhir ini kita akan menguji apakan toast notification yang telah kita buat dengan laravel notify package ini sudah bekerja atau belum.

Untuk mengujinya, cukup dengan menjalan laravel project terlebih dahulu dengan perintah php artisan serve, kemudian buka browser dengan mengakses URL 127.0.0.1:8000/register atau laravel-notification.test/register.

Di halaman register, silahkan isi data pada form-form yang tersedia, lalu klik register, maka kita akan diarahkan ke halaman Home dan toast notification dengan text "Hi yourname, welcome to codelapan" juga akan muncul disebelah kanan atas halaman.

Selamat mencoba, semoga artikel ini bisa bermanfaat dan sampai jumpa di artikel berikutnya. Happy coding 🚀 🚀 🚀

 

Full Documentation: Laravel Notify

Tinggalkan Komentar
Loading Comments