[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-6":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":10,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},343,"6","Membuat live push notification di Laravel dengan Pusher dan VueJs","Agus Yusida December 4, 2018 Halo teman ngide, pada tutorial kali ini kita akan belajar bagaimana cara membuat live notification atau notifikasi realtiem pada framework laravel dengan bantuan pusher d",null,[],"2019-04-16T16:00:00Z","2026-07-14T04:39:32.097358Z","\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>  \u003Cimg alt=\"Go to the profile of Agus Yusida\" src=\"http:\u002F\u002F0.gravatar.com\u002Favatar\u002Fc0b0eeb94d5a7fd159a09fd4a506d27b?s=96&d=mm&r=g\"\u002F>  Agus Yusida December 4, 2018\u003Cp>Halo teman ngide, pada tutorial kali ini kita akan belajar bagaimana cara membuat live notification atau notifikasi realtiem pada framework laravel dengan bantuan pusher dan juga vuejs. Jadi nanti tujuan dari tutorial ini adalah kita mampu membuat live notification tanpa harus mereload halaman.\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Ch3>Step 1: Install Laravel\u003C\u002Fh3>\u003Cp>Laravel yang di gunakan dalam tutorial ini adalah versi 5.6. Untuk menginstall Laravel, kita bisa menggunakan composer dengan memanggil perintah berikut ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>composer create-project --prefer-dist laravel\u002Flaravel live-notif\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Untuk detail tentang instalasi laravel, kamu bisa kunjungi link berikut: \u003Ca href=\"https:\u002F\u002Flaravel.com\u002Fdocs\u002F5.6\u002Finstallation\">Laravel Documentation\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Pindah ke root folder project kamu dan jalankan npm install untuk mendownload semua npm depedency.\u003C\u002Fp> \u003Ch3>2. Install Pusher dan Laravel Echo.\u003C\u002Fh3>\u003Cp>Kita akan mengintalll 1 package untuk laravel dan 2 npm package.\u003C\u002Fp>\u003Cp>\u003Ccode>composer require pusher\u002Fpusher-php-server\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>\u003Ccode>npm install --save laravel-echo pusher-js\u003C\u002Fcode>\u003C\u002Fp>\u003Ch3>3. Mendaftar Pusher\u003C\u002Fh3>\u003Cp>Untuk mendaftar pusher, kamu bisa mengunjungi website pusher pusher.com, Silakan pilih paket yang free.\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cp>Setelah itu buat sebuah channel app. Isikan nama app sesuai dengan pilihan kamu misalnya kita beri saja nama \u003Cem>PushNotif\u003C\u002Fem>.\u003C\u002Fp>\u003Cp>Setelah mendaftar, di bagian overview kamu akan melihat detail \u003Cem>app_id\u003C\u002Fem>, \u003Cem>key\u003C\u002Fem> dan yang lainnya yang akan kita gunakan nanti di  dalam config laravel.\u003C\u002Fp>\u003Ch3>4.  Edit .env\u003C\u002Fh3>\u003Cp>Buka file .\u003Cem>env\u003C\u002Fem> dan edit pada bagian pusher dengan data yang sudah kita dapatkan tadi.\u003C\u002Fp>\u003Cpre>\u003Ccode>BROADCAST_DRIVER=pusherPUSHER_APP_ID=your_app_idPUSHER_APP_KEY=your_app_keyPUSHER_APP_SECRET=your_app_secretPUSHER_APP_CLUSTER=your_app_cluster\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jangan lupa untuk merubah \u003Cem>BROADCAST_DRIVER\u003C\u002Fem> menjadi pusher.\u003C\u002Fp>\u003Ch3>5. Edit config\u002Fapp.php\u003C\u002Fh3>\u003Cp>Buka file \u003Ccode>config\u002Fapp.php\u003C\u002Fcode> dan uncomment pada bagian \u003Ccode>AppProvidersBroadcastServiceProvider::class\u003C\u002Fcode>\u003C\u002Fp>\u003Ch3>6. Buat Event SendGlobalNotification\u003C\u002Fh3>\u003Cp>Buat sebuah event dengan nama \u003Cem>SendGlobalNotification\u003C\u002Fem> yang nanti berfungsi untuk mengirim data ke pusher saat event tersebut di panggil.\u003C\u002Fp>\u003Ch3>php artisan make:event SendGlobalNotification\u003C\u002Fh3>\u003Cp>Buka file \u003Ccode>SendGlobalNotification.php\u003C\u002Fcode> dan isikan code nya seperti di bawah ini:\u003C\u002Fp> \u003Cp>Beberapa yang perlu di perhatikan:\u003C\u002Fp>\u003Cul>\u003Cli>Ingat untuk \u003Cem>implements\u003C\u002Fem> \u003Cem>ShouldBroadcast\u003C\u002Fem>\u003C\u002Fli>\u003Cli>Dalam method \u003Ccode>broadcastOn()\u003C\u002Fcode>, akan berisi nama channel dimana pesan kita di kirim. Kita akan menggunakan public channel.\u003C\u002Fli>\u003C\u002Ful>Rekomendasi:  Tutorial Drag & Drop Upload Gambar Dengan PHP dan Dropzone Js\u003Ch3>7. Tambahkan broadcast channel\u003C\u002Fh3>\u003Cp>Buka file \u003Ccode>routes\u002Fchannel.php\u003C\u002Fcode> dan tambahkan sebuah \u003Cem>Broadcast\u003C\u002Fem> channel baru:\u003C\u002Fp>\u003Cpre>\u003Ccode>Broadcast::channel('global-notif', function () {    return true;});\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sesuaikan nama channelnya dengan nama channel yang kamu pakai di file \u003Cem>SendGlobalNotification\u003C\u002Fem>.\u003C\u002Fp>\u003Cp>Kita return true, karena tidak ada proses authentikasi dalam channel tersebut.\u003C\u002Fp>\u003Cp>Sekarang kita sudah selesai melakukan setup awal, kita bisa melakukan test untuk mengirim pesan ke pusher.\u003C\u002Fp> \u003Ch3>8. Test kirim pesan ke Pusher.\u003C\u002Fh3>\u003Cp>Buka file \u003Ccode>routes\u002Fweb.php\u003C\u002Fcode> dan tambahkan sebuah route baru.\u003C\u002Fp>\u003Cpre>\u003Ccode>Route::get('send-notif\u002F{name}', function ($name) {    event(new AppEventsSendGlobalNotification($name));    return \"Event has been sent!\";});\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Jadi saat route tersebut di panggil, maka akan memanggil event \u003Cem>SendGlobalNotification\u003C\u002Fem> yang akan mengirimkan pesan ke pusher.\u003C\u002Fp>\u003Cp>Jalankan local server kamu: \u003Ccode>php artisan serve\u003C\u002Fcode> dan buka route tersebut:\u003C\u002Fp>\u003Cp>http:\u002F\u002Flocalhost:8000\u002Fsend-notif\u002Fjohn\u003C\u002Fp>\u003Cp>Jika tidak ada kesalahan maka, di dashboard pusher kamu akan muncul total pesan yang masuk.\u003C\u002Fp>\u003Cp>Sekarang kita sudah berhasil mengirim pesan ke pusher, lalu selanjutnya kita akan menampilkan notifikasi ke laravel setiap ada event tersebut di panggil.\u003C\u002Fp>\u003Ch3>9. Edit file boostrap.js\u003C\u002Fh3>\u003Cp>Buka dan edit file r\u003Ccode>esource\u002Fassets\u002Fjs\u002Fbootstrap.js\u003C\u002Fcode> den tambahkan config pusher.\u003C\u002Fp>\u003Cfigure>\u003Cimg alt=\"\" src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Ffigure>\u003Cpre>\u003Ccode>import Echo from 'laravel-echo'window.Pusher = require('pusher-js');window.Echo = new Echo({     broadcaster: 'pusher',     key: window.Laravel.pusherKey,     cluster: window.Laravel.pusherKey.pusherCluster,     encrypted: true });\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>10. Edit file welcome.blade.php\u003C\u002Fh3>\u003Cp>Kita akan mengganti file \u003Ccode>welcome.blade.php\u003C\u002Fcode> dengan code di bawah ini:\u003C\u002Fp>\u003Cpre><!DOCTYPE html>\u003Cbr\u002F><html>\u003Cbr\u002F><head>\u003Cbr\u002F>    <meta charset=\"utf-8\">\u003Cbr\u002F>    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\u003Cbr\u002F>    <meta name=\"csrf-token\" content=\"{!! csrf_token() !!}\">\u003Cbr\u002F>    <title>Laravel<\u002Ftitle>\u003C\u002Fp>\u003Cp><link href=\"{{ mix('\u002Fcss\u002Fapp.css') }}\" rel=\"stylesheet\" >\u003Cbr\u002F>    <!-- Scripts -->\u003Cbr\u002F>    <script>\u003Cbr\u002F>        window.Laravel = {!! json_encode([\u003Cbr\u002F>            'csrfToken' => csrf_token(),\u003Cbr\u002F>            'pusherKey' => config('broadcasting.connections.pusher.key'),\u003Cbr\u002F>            'pusherCluster' => config('broadcasting.connections.pusher.options.cluster')\u003Cbr\u002F>        ]) !!};\u003Cbr\u002F>    <\u002Fscript>\u003Cbr\u002F><\u002Fhead>\u003Cbr\u002F><body>\u003Cbr\u002F>    <div id=\"app\">\u003Cbr\u002F>        <example-component><\u002Fexample-component>\u003Cbr\u002F>    <\u002Fdiv>\u003Cbr\u002F>    <script src=\"{{ mix('\u002Fjs\u002Fapp.js') }}\"><\u002Fscript>\u003Cbr\u002F><\u002Fbody>\u003Cbr\u002F><\u002Fhtml>\u003Cbr\u002F>\u003C\u002Fpre>\u003Ch3>11. Edit file ExampleComponent\u003C\u002Fh3>\u003Cp>Kita akan menggunakan yang namanya single file component dari VueJs. Jika kalian belum mengerti tentang Vuejs, disini juga ada beberapa tutorial tentang VueJs. Search aja ya.\u003C\u002Fp>\u003Cpre>\u003Ccode><template>\u003C\u002Fcode>\u003Ccode>    <div class=\"container\">\u003C\u002Fcode>\u003Ccode>        <div class=\"row\">\u003C\u002Fcode>\u003Ccode>            <div class=\"col-md-8 col-md-offset-2\">\u003C\u002Fcode>\u003Ccode>                <div class=\"panel panel-default\">\u003C\u002Fcode>\u003Ccode>                    <div class=\"panel-heading\">Example Push Notification<\u002Fdiv>\u003C\u002Fcode>\u003Ccode>                    <div class=\"panel-body\">\u003C\u002Fcode>\u003Ccode>                        <ul class=\"list-group\">\u003C\u002Fcode>\u003Ccode>                            <li class=\"list-group-item\"  v-for=\"item in notification\">\u003C\u002Fcode>\u003Ccode>                          {{ item }}\u003C\u002Fcode>\u003Ccode>                            <\u002Fli>\u003C\u002Fcode>\u003Ccode>                        <\u002Ful>\u003C\u002Fcode>\u003Ccode>                    <\u002Fdiv>\u003C\u002Fcode>\u003Ccode>                <\u002Fdiv>\u003C\u002Fcode>\u003Ccode>            <\u002Fdiv>\u003C\u002Fcode>\u003Ccode>        <\u002Fdiv>\u003C\u002Fcode>\u003Ccode>    <\u002Fdiv>\u003C\u002Fcode>\u003Ccode><\u002Ftemplate>\u003C\u002Fcode>\u003Ccode><script>\u003C\u002Fcode>\u003Ccode>    export default {\u003C\u002Fcode>\u003Ccode>        data: function(){\u003C\u002Fcode>\u003Ccode>            return {\u003C\u002Fcode>\u003Ccode>                notification: []\u003C\u002Fcode>\u003Ccode>            }\u003C\u002Fcode>\u003Ccode>        },\u003C\u002Fcode>\u003Ccode>        mounted() {\u003C\u002Fcode>\u003Ccode>            var x = this;\u003C\u002Fcode>\u003Ccode>            Echo.channel('global-notif')\u003C\u002Fcode>\u003Ccode>            .listen('SendGlobalNotification', (e) => {\u003C\u002Fcode>\u003Ccode>                console.log(e.message.replace('{name}', e.name));\u003C\u002Fcode>\u003Ccode>                this.notification.push(e.message.replace('{name}', e.name))\u003C\u002Fcode>\u003Ccode>            });\u003C\u002Fcode>\u003Ccode>        }\u003C\u002Fcode>\u003Ccode>    }\u003C\u002Fcode>\u003Ccode><\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Sedikit saya jelaskan fungsi component di atas adalah ketika ada pesan yang di kirim oleh pusher, maka akan di tangkap oleh Laravel Echo yang kemudian data yang dikirim tersebut di push ke dalam data \u003Cem>notification\u003C\u002Fem> yang isinya array push notification.\u003C\u002Fp>Rekomendasi:  Tips simple untuk simple code: part 4. Batasi penggunaan variable yang tidak perlu\u003Ch3>12. Build File\u003C\u002Fh3>\u003Cp>Sekarang saatnya membuild file \u003Cem>css\u003C\u002Fem> dan \u003Cem>js\u003C\u002Fem> tersebut. Caranya dengan memanggil perintah:\u003C\u002Fp>\u003Cp>\u003Ccode>npm run build\u003C\u002Fcode> di root folder project kamu.\u003C\u002Fp>\u003Cp>Tunggu beberapa saat sampai proses build selesai dan tidak ada error. \u003C\u002Fp>\u003Cp>Jika sudah silakan buka kembali di browser \u003Ccode>http:\u002F\u002Flocalhost:8000\u002F\u003C\u002Fcode>\u003C\u002Fp>\u003Ch3>13. Testing push notification\u003C\u002Fh3>\u003Cp>Step terakhir adalah mengetes notification yang kita buat. Caranya kamu bisa buka 2 tab browser, tab 1 buka \u003Ccode>http:\u002F\u002Flocalhost:8000\u002F\u003C\u002Fcode> dan tab 2 buka \u003Ccode>http:\u002F\u002Flocalhost:8000\u002Ftest-notif\u002Fjohn\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>Saat kamu mereload tab 2, maka di tab 1 akan muncul push notification secara langsung. \u003C\u002Fp>\u003Cp>Sekian tutorial kita kali ini tentang bagaimana cara mengirimkan push notification di Laravel dengan Pusher dan VueJs. \u003C\u002Fp>Please follow and like us:\u003Ca href=\"http:\u002F\u002Fwww.specificfeeds.com\u002Fwidgets\u002FemailSubscribeEncFeed\u002FUmN5cWduWHlmN09VS1JQcFMrLzFJODRBMlMxY3R4RWlzQnFqb2REQlVwRWxodzRTT3NLYTNxQ2FUbzFvSkJTM2hFMU9SOVdWdGNiSlF0N3ZFMjdqR1A0U2VoL0tFYXdjb1JOUnRldUlqd2ZHYU84K2lvQXZ4aHNXQ3hYZ2g2N018RlF5OExKZXdlaW1QWllodDc3c3ZscmliQ1pDaTFBSFdTWUQ3MElieVNIST0=\u002FOA==\u002F\">\u003Cimg src=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\u002F>\u003C\u002Fa>\u003Ca href=\"http:\u002F\u002Ftwitter.com\u002Fshare\">\u003C\u002Fa>\u003Ca href=\"https:\u002F\u002Fwww.pinterest.com\u002Fpin\u002Fcreate\u002Fbutton\u002F?url=&media=&description=\">\u003C\u002Fa> Tags: Laravel PHP programming","Agus Yusida December 4, 2018 Halo teman ngide, pada tutorial kali ini kita akan belajar bagaimana cara membuat live notification atau notifikasi realtiem pada f",[],[],0]