Cara Kirim Notifikasi Whatsapp Pada Laravel Dengan Wablas Whatsapp Gateway

Whatsapp Gateway – Haloo semuanya, Assalaamualaikum wr wb.. Semoga sehat selalu..

Kali ini mimin ingin memberikan tutorial mengenai cara mengirim notifikasi whatsapp pada aplikasi laravel kita dengan menggunakan Wablas sebagai Whatsapp Gateway nya..

Whatsapp Gateway

Nanti kita akan coba mempelajari bagaimana cara melakukan registrasi di wablas nya, sampai bagaimana cara untuk melakukan integrasi nya..

Untuk skenario nya sederhana, nanti kita akan coba membuat sebuah form yang memiliki inputan no WA dan Description nya, yang mana ketika form tersebut di submit, maka akan mengirimkan pesan WA ke nomor tersebut..

Langsung saja, mari kita coba..

Instalasi Laravel Nya Terlebih Dahulu

Untuk versi laravel nya bisa kalian gunakan versi berapapun, tapi untuk kali ini, saya akan menggunakan Laravel versi 8..

Untuk cara instalasi nya, bisa kalian kunjungi langsung halaman dokumentasi laravel nya disini..

Registrasi Wablas

Setelah proses instalasi laravel nya selesai, sekarang kita akan melakukan registrasi pada Wablas nya..

Silakan kalian kunjungi halaman resmi nya di https://wablas.com..

Kemudian pada pojok kanan atas, kalian klik button register, maka nanti akan diarahkan ke halaman berikut:

Pada halaman register ini, silahkan kalian pilih server apa yang ingin kalian gunakan..

Tapi semenjak updatean Whatsapp tahun 2022 yang sudah multi device, pilihan server hanya ada 2, yaitu Solo dan Pati..

Silahkan kalian pilih salah satunya, tapi terakhir kali saya mencoba registrasi, server Solo sudah full, yang tersisa hanya server Pati, jadi silahkan kalian pilih server Pati..

Atau jika nanti sudah ada pilihan server yang terbaru, silahkan boleh pilih yang terbaru..

Silahkan kalian lanjutkan proses registrasi nya sampai bisa masuk ke dashboard seperti berikut:

Integrasi Laravel dengan Wablas

Nah sekarang waktunya untuk integrasi Wablas kedalam Aplikasi Laravel nya..

Menghubungkan Device Wablas dengan Whatsapp pada hp kalian

Hal pertama yang perlu kalian lakukan yaitu menghubungkan whatsapp kamu kedalam wablas nya..

Pada dashboard wablas nya, silahkan kalian masuk kedalam menu device nya, nah nanti disana akan muncul list device yang sudah kalian daftarkan..

Device pertama yang akan terdaftar yaitu no Whatsapp yang sudah kalian daftarkan pada saat proses registrasi..

Jika masih kosong, kalian bisa tambahkan dengan mengklik button Add New Device di pojok kanan atas..

Disana kalian bisa melihat no WA apa saja yang sudah kalian daftarkan, Expired Date nya, jumlah quota nya, dan juga status nya apakah Connect atau Disconnect..

Jika status nya Disconnect, maka kalian perlu melakukan scan QR terlebih dahulu..

Pada kolom Action, kalian klik icon qr yang berada pada urutan ketiga..

Maka nanti kalian akan diarahkan kehalaman berikut:

Silahkan kalian klik button Generate Qr Code, maka nanti akan muncul QR yang bisa kalian scan menggunakan Whatsapp pada hp kalian..

Kalo kalian buka lagi halaman list device nya, maka seharusnya sekarang status nya sudah berubah menjadi connected seperti pada gambar berikut:

Get Security Token & Domain Server

Setelah status nya sudah berubah menjadi connected, maka sekarang selanjutnya kita perlu menyimpan security token dan domain server dari device tersebut..

Pada kolom action silahkan kalian klik icon gear seperti pada gambar berikut:

Maka nanti akan diarahkan ke halaman detail dari device tersebut..

Kalian cari security tokens dan domain, kemudian kalian copy..

Pastekan kedalam file .env, sehingga nanti pada file .env nya akan ada tambahan 2 key baru seperti berikut:

Membuat Halaman Form Untuk Kirim Pesan Whatsapp Nya

Setelah kita berhasil mendapatkan security token dan domain server nya, sekarang kita akan coba buat sebuah halaman yang berisi form untuk pengiriman pesan text nya..

Kita buat 2 buah route terlebih dahulu, buka file “../routes/web.php”, kemudian tambahkan 2 route seperti berikut:

<?php

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

/*
|--------------------------------------------------------------------------
| 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('form-send', [FormController::class, 'index']);
Route::post('form-send', [FormController::class, 'store']);

Perhatikan pada baris ke-21 dan ke-22, kita membuat 2 buah route dengan url yang sama, yaitu “../form-send”..

Yang membedakan nya yaitu method pada masing-masing route tersebut, yaitu get dan post..

Sekarang buat file Controller baru dengan menjalankan perintah:

php artisan make:controller FormController

Pada function index kalian buat seperti berikut:

....
class FormController extends Controller
{
    public function index()
    {
        return view('form_send');
    }
}

Pada function index diatas, kita langsung mengarahkan nya kedalam view “../resources/views/form_send.blade.php”..

Kita buka aja file nya, dan isi seperti berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="jumbotron text-center">
        <h1>Sangcahaya.id</h1>
        <p>Cara Kirim Notifikasi Whatsapp Pada Laravel Dengan Wablas Whatsapp Gateway</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-4">

                <form action="{{ url('form-send') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label for="\">No WA</label>
                        <input type="text" name="no_wa" class="form-control" id="" placeholder="No WA">
                    </div>
                    <div class="form-group">
                        <label for="\">Pesan</label>
                        <textarea name="pesan" class="form-control" cols="30" rows="5" placeholder="Pesan"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>

            </div>
        </div>
    </div>

</body>

</html>

Sekarang kalau kalian buka url “http://127.0.0.1:8000/form-send”, maka seharusnya akan tampil seperti berikut:

Proses Integrasi nya

Kemudian selanjutnya, untuk penulisan proses logic nya akan kita tulis kedalam sebuah trait..

Bagi temen-temen yang belum mengetahui apa itu trait, silahkan bisa coba buka halaman berikut..

Buat file baru dengan nama WablasTrait.php didalam folder “../app/Traits/WablasTrait.php”.. Kemudian kalian isi seperti berikut:

<?php

namespace App\Traits;

trait WablasTrait
{
    public static function sendText($data = [])
    {
        $curl = curl_init();
        $token = env('SECURITY_TOKEN_WABLAS');
        $payload = [
            "data" => $data
        ];
        curl_setopt(
            $curl,
            CURLOPT_HTTPHEADER,
            array(
                "Authorization: $token",
                "Content-Type: application/json"
            )
        );
        curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($payload));
        curl_setopt($curl, CURLOPT_URL,  env('DOMAIN_SERVER_WABLAS') . "/api/v2/send-message");
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);

        $result = curl_exec($curl);
        curl_close($curl);
    }
}

Coba kalian perhatikan script diatas, pada baris ke-10 kita memanggil SECURITY_TOKEN_WABLAS yang ada pada file .env..

env('SECURITY_TOKEN_WABLAS');

Dan pada baris ke-25, kita memanggil DOMAIN_SERVER_WABLAS nya yang ada pada file .env nya..

env('DOMAIN_SERVER_WABLAS')

Pada method sendText() tersebut juga terdapat sebuah parameter array dengan nama data, parameter tersebut akan kita passing melalui controller nya..

Sekarang buka lagi file FormController nya, dan ubah seperti berikut:

<?php

namespace App\Http\Controllers;

use App\Traits\WablasTrait;
use Illuminate\Http\Request;

class FormController extends Controller
{
    public function index()
    {
        return view('form_send');
    }

    public function store()
    {
        $kumpulan_data = [];

        $data['phone'] = request('no_wa');
        $data['message'] = request('pesan');
        $data['secret'] = false;
        $data['retry'] = false;
        $data['isGroup'] = false;
        array_push($kumpulan_data, $data);

        WablasTrait::sendText($kumpulan_data);

        return redirect()->back();
    }
}

Coba kalian perhatikan script diatas, pada baris ke-5 kita memanggil namespace dari file WablasTrait nya..

Kemudian pada baris ke-15 kita membuat mehod baru dengan nama store()..

Didalam method store tersebut, kita membuat sebuah variable array dengan nama data, yang mana key nya yaitu terdiri dari phone, message, secret, retry, dan isGroup..

ke-5 key tersebut berasal dari dokumentasi wablas nya, bisa kalian cek disini..

Kemudian variable data tersebut kita masukkan kedalam variable kumpulan_data dengan perintah berikut:

array_push($kumpulan_data, $data);

Selanjutnya kita panggil method sendText yang ada pada file WablasTrait dengan mem-passing variable kumpulan_data nya..

WablasTrait::sendText($kumpulan_data);

Dan jika sukses, maka kita akan diarahkan kembali kedalam halaman sebelumnya..

return redirect()->back();

Pengetesan

Sekarang waktunya kita test..

Kalian buka url “http://127.0.0.1:8000/form-send”..

Kemudian kalian isi form nya dengan no wa tujuan dan juga isi pesan nya.. contoh nya seperti berikut:

Kemudian klik submit dan tunggu beberapa detik..

Maka nanti seharusnya pesan tersebut akan sampai ke no tujuan nya..

Cara Kirim Ke Banyak Nomor

Sekarang gimana caranya kalo kita kirim ke banyak nomor WA???

Sebetulnya secara teknis metode nya sama saja, kita hanya perlu melakukan perubahan sedikit saja pada controller nya..

Misalkan sebagai contoh, kita menambahkan 1 inputan baru untuk memasukkan no wa kedua..

Pada file “../resources/views/form_send.blade.php” kalian ubah seperti berikut:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="jumbotron text-center">
        <h1>Sangcahaya.id</h1>
        <p>Cara Kirim Notifikasi Whatsapp Pada Laravel Dengan Wablas Whatsapp Gateway</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-4">

                <form action="{{ url('form-send') }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label for="\">No WA 1</label>
                        <input type="text" name="no_wa" class="form-control" id="" placeholder="No WA">
                    </div>
                    <div class="form-group">
                        <label for="\">No WA 2</label>
                        <input type="text" name="no_wa2" class="form-control" id="" placeholder="No WA">
                    </div>
                    <div class="form-group">
                        <label for="\">Pesan</label>
                        <textarea name="pesan" class="form-control" cols="30" rows="5" placeholder="Pesan"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>

            </div>
        </div>
    </div>

</body>

</html>

Kalau kalian refresh halaman nya, maka akan menjadi seperti berikut:

Sekarang kita sudah mempunya 2 inputan untuk no wa nya..

Untuk inputan pertama kita kasih atribut name no_wa, dan inputan kedua kita kasih atribut name no_wa2..

Kemudian pada file FormController, pada method store nya kita modifikasi menjadi seperti berikut:

public function store()
{
    $kumpulan_data = [];

    $data['phone'] = request('no_wa');
    $data['message'] = request('pesan');
    $data['secret'] = false;
    $data['retry'] = false;
    $data['isGroup'] = false;
    array_push($kumpulan_data, $data);

    $data['phone'] = request('no_wa2');
    $data['message'] = request('pesan');
    $data['secret'] = false;
    $data['retry'] = false;
    $data['isGroup'] = false;
    array_push($kumpulan_data, $data);

    WablasTrait::sendText($kumpulan_data);

    return redirect()->back();
}

Kemudian silahkan kalian coba submit lagi form nya..

Dan pastinya pesan tersebut akan berhasil masuk ke 2 nomor tersebut

Bagaimana, mudah bukan? Jika ada pertanyaan silahkan berkomentar dibawah yaa.. Terima Kasih..

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

Terima kasih..