Membuat Portal SMS dengan Laravel 8 dan Twilio

Admin・ 5 Agustus 2021

14 min read ・ 2794 views

SMS Laravel 8 Twilio - Sebelumnya, kami telah membagikan artikel yang membahas cara membuat verifikasi akun dengan nomor telephone (OTP) di laravel 8 dan Twilio. Dan di artikel ini, kami akan membagikan lagi artikel tentang penggunaan layanan Programmable Messaging API dari Twilio pada laravel project yaitu membuat portal sms untuk mengirimkan pesan sms atau broadcast sms.

Baca: Cara Membuat Verifikasi Akun Di Laravel 8 Dengan Twilio Verify

Apa itu portal SMS ? Kenapa kita membuat portal SMS dengan laravel 8 ?

Pada suatu sistem, mungkin juga akan diperlukan adanya fitur notifikasi untuk memberikan informasi penting ke user seperti melalui web push, whatsapp, email, panggilan telephone atau SMS. Beberapa metode pemberian informasi penting atau notifikasi ke user membutuhkan jaringan internet kecuali pemberian notifikasi via SMS. Push notification via SMS merupakan opsi yang banyak dipilih oleh pengembang sistem atau aplikasi karena merupakan metode yang tidak memerlukan adanya jaringan internet, sehingga user yang sulit mendapatkan jaringan internet yang bagus bisa tetap mendapatkan atau menerima sms notification.

Pernahkan kamu mendapatkan sms seperti informasi kode OTP ? sms spam seperti penawaran pinjaman online ? atau sms seperti pemberitahuan memenangkan hadiah ratusan juta ?

Nah, pada tutorial ini nanti, kita akan coba membuat simple system untuk broadcast sms untuk mengirim pesan sms ke beberapa contact atau nomor telephone sekaligus.

Skenario pada percobaan kali ini yaitu ketika kita menambahkan data contact maka akan mengirimkan sebuah notifikasi sms bahwa data contact berhasil di tambahkan. Selain itu, kita juga akan coba membuat simple system untuk broadcast sms ke data contact (nomor telephone) yang terdaftar di database. Untuk broadcast sms ini sepertinya mirip dengan sistem yang digunakan atau dipakai oleh beberapa pihak yang biasanya menyebar sms spam.

Daftar Akun Twilio

Sebelum install laravel 8 untuk mulai membuat fitur kirim sms atau broadcast sms, kita perlu mendaftar akun di Twilio terlebih dahulu. Untuk itu silahkan kunjungi website resmi Twilio, kemudian klik Sign up.

Di halaman registrasi, masukkan data first name, last name, email dan password, kemudian klik checkbox dan klik button Start your free trial. Nanti selanjutnya akan diarahkan ke halaman verifikasi nomor telepon.

Ok, jika sudah berhasil register akun Twilio, kita akan di arahkan ke halaman dashboard. Sampai disini, kita sudah berhasil mendapatkan trial balance sebesar $15.50 yang bisa kita gunakan untuk uji coba membuat sistem broadcast SMS atau portal SMS di laravel 8 dengan Twilio. Jika trial balace sudah habis dan kita masih ingin membuat percobaan secara gratis, kita bisa mendaftarkan akun baru lagi dengan email yang berbeda dan nomor telephone yang sama. Tapi jika tidak ingin mendaftar akun lagi, kita bisa upgrade pro dengan harga sesuai yang tertera di halaman pricing. 

Untuk membuat simple system portal sms atau broadcast sms dengan laravel 8 dan Twilio, kita perlu mendapatkan trial number dari Twilio. Silahkan kik button Get a Trial Number untuk mendapatkan trial number.

Dengan menekan button Get a Trial Number, akan menampilkan pop up seperti gambar di atas. Pada langkah ini, silahkan langsung saja klik Choose this Number. Ok, sampai disini kita sudah mendapatkan apa yang akan kita perlukan untuk membuat portal sms atau broadcast sms dengan laravel 8 dan Twilio yaitu;

TWILIO_SID="INSERT YOUR TWILIO SID HERE"
TWILIO_AUTH_TOKEN="INSERT YOUR TWILIO TOKEN HERE"
TWILIO_NUMBER="INSERT YOUR TWILIO NUMBER"

3 point SID, Token dan Number dari Twilio tersebut akan kita gunakan untuk configurasi di file .env nantinya. *Semuanya bisa dilihat di dashboard Twilio.

Install Laravel 8

composer create-project laravel/laravel sms-portal-laravel-twilio

Setelah melalui proses registrasi akun Twilio dan kita sudah mendapatkan kode SID, Auth Token dan Twilio Number, kita akan lanjutkan koding untuk mulai membuat simple system portal sms dengan laravel 8 dan Twilio. Buka terminal, arahkan ke direktori dimana kita ingin letakkan laravel project ini dan jalankan perintah install laravel seperti di atas. Dengan perintah di atas, akan menjalankan proses installasi dengan nama project sms-portal-laravel-Twilio. Jika proses sudah selesai, masuk ke direktori project dengan cd sms-portal-laravel-Twilio.

Install Twilio SDK Package

composer require twilio/sdk

Untuk bisa menggunakan layanan Twilio di laravel 8, kita perlu menginstall Twilio SDK package. Jalankan perintah seperti di atas untuk mulai menginstall Twilio SDK package. Jika proses sudah selesai, sekarang kita sudah bisa menggunakan layanan dari Twilio.

Membuat Database dan Setup .ENV

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sms-portal-laravel-twilio
DB_USERNAME=root
DB_PASSWORD=
......................
......................
TWILIO_SID="INSERT YOUR TWILIO SID HERE"
TWILIO_AUTH_TOKEN="INSERT YOUR TWILIO TOKEN HERE"
TWILIO_NUMBER="INSERT YOUR TWILIO NUMBER"

Kita perlu membuat database baru untuk membuat table contact yang nanti akan kita gunakan untuk menampung data contact atau nomor telephone. Jika kita memakai XAMPP sebagai local server, kita bisa langsung saja membuat database baru di localhost/phpmyadmin.

Jika sudah membuat database baru, jangan lupa menyesuaikan DB_DATABASE di file .ENV. Kemudian tambahkan juga Twilio credentials untuk value Twilio_SID, Twilio_AUTH dan Twilio_NUMBER. *Twilio credentials bisa didapatkan di dashboard Twilio.

Membuat Contact Model & Migration File

php artisan make:model Contact -m

Selanjutnya kita perlu membuat file model dan migration untuk contact, untuk itu silahkan jalankan perintah di atas untuk generate kedua file tersebut. Perintah di atas akan menghasilkan 2 file yang terletak di /app/Models/Contact.php dan /databases/migrations/[timestamp]_create_contact_table.php.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('phone')->unique();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
} 

Kemudian buka file [timestamp]_create_contacts_table.php yang baru saja kita buat di langkah sebelumnya. Pada tutorial ini kita buat simple saja dengan hanya membuat 1 field di tabel contact yaitu phone yang bernilai unique.

php artisan migrate

Jika sudah, langsung saja jalankan perintah php artisan migrate untuk memigrasi file-file migration ke database yang telah kita buat.

Membuat Controller

php artisan make:controller HomeController

Jalankan perintah seperti di atas untuk generate file HomeController. File controller ini akan kita gunakan untuk membuat logic dari simple sytem portal sms atau broadcast SMS yang kita buat menggunakan laravel 8 dan Twilio.

<?php
namespace App\Http\Controllers;

use App\Models\Contact;
use Illuminate\Http\Request;
use Twilio\Rest\Client;

class HomeController extends Controller
{
   
    public function index()
    {
        $users = Contact::all();
        return view('welcome', ['users' => $users]);
    }
    
    public function store(Request $request)
    {
        \Validator::make($request->all(), [
            'phone' => 'required|unique:contacts|numeric'
        ])->validate();

        $contact = new Contact;
        $contact->phone = $request->phone;
        $contact->save();

        $this->sendMessage('Contact registered successfully!!', $request->phone);
        return back()->with(['success' => "{$request->phone} registered"]);
    }
   
    public function sendCustomMessage(Request $request)
    {
        \Validator::make($request->all(), [
            'contact' => 'required|array',
            'body' => 'required',
        ])->validate();
        $recipients = $request->contact;
     
        foreach ($recipients as $recipient) {
            $this->sendMessage($request->body, $recipient);
        }
        return back()->with(['success' => "Message on its way to recipients!"]);
    }
   
    private function sendMessage($message, $recipients)
    {
        $account_sid = getenv("TWILIO_SID");
        $auth_token = getenv("TWILIO_AUTH_TOKEN");
        $twilio_number = getenv("TWILIO_NUMBER");
        $client = new Client($account_sid, $auth_token);
        $client->messages->create($recipients, ['from' => $twilio_number, 'body' => $message]);
    }
} 

Buka file HomeController.php yang baru saja kita buat, kemudian copy kode di atas dan paste di file controller tersebut. Pada kode di atas kita buat beberapa method diantaranya:

1. Index, untuk menampilkan view dari file welcome.blade.php dengan data users yang diambil dari model Contact.
2. Store, dipanggil saat kita menambahkan data contact baru dan akan menyimpan data contact baru tersebut ke model Contact atau tabel contacts.
3. sendCustomMessage, digunakan saat kita menjalankan perintah broadcast SMS dengan pesan custom atau sesuai dari apa yang telah kita inputkan di textarea.
4. sendMessage, digunakan untuk mengirimkan pesan SMS baik itu saat tambah data contact maupun saat broadcast SMS dengan pesan custom. Di method sendMessage ini juga kita definisikan Twilio credentials yang diambil dari file .env.

Membuat Route

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
/*
|--------------------------------------------------------------------------
| 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('/', [HomeController::class,'index']);
Route::post('/',  [HomeController::class,'store']);
Route::post('/custom',  [HomeController::class,'sendCustomMessage']);

Buka file routes/web.php, kemudian ubah atau tambahkan route seperti kode di atas. Dengan kode tersebut, kita membuat route untuk tampilan root project, route post untuk tambah data contact dan route post (/custom) untuk mengirim broadcats SMS dengan pesan custom atau sesuai dengan apa yang telah kita inputkan.

Setup View

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
        <title>SMS Portal - Laravel 8 & Twilio</title>
    </head>
    <body class="bg-light">
        <div class="container mt-5">
            <h1 class="text-center">SMS Portal - Laravel 8 & Twilio</h1>
            <div class="row p-4 border rounded-3 bg-body">
                <div class="col-6">
                    <div class="card">
                        <div class="card-header">
                            Add Phone Number
                        </div>
                        <div class="card-body">
                            <form action="/" method="POST">
                                @csrf
                                <div class="form-group">
                                    <label>Enter Phone Number</label>
                                    <input type="tel" class="form-control" name="phone" placeholder="+6282xxxxxxx">
                                </div>
                                <button type="submit" class="btn btn-primary mt-2">Add Contact</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card">
                        <div class="card-header">
                            Send SMS
                        </div>
                        <div class="card-body">
                            <form method="POST" action="/custom">
                                @csrf
                                <div class="form-group">
                                    <label>Select contact</label>
                                    <select name="contact[]" multiple class="form-control contact">
                                        @foreach ($users as $user)
                                        <option>{{$user->phone}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Message</label>
                                    <textarea name="body" class="form-control" rows="3"></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary mt-2">Send</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <script>
            $(document).ready(function() {
            $('.contact').select2();
            });
        </script>
    </body>
</html>

Kemudian kita perlu menyesuaikan file welcome.blade.php agar dapat menampilkan form input yang akan akan kita gunakan untuk membuat fitur tambah data contact dan fitur broadcast SMS. Untuk itu, silahkan copy semua kode di atas dan replace di file welcome.blade.php.

Di file welcome.blade.php ini, kita akan menggunakan bootstrap versi 5.2 untuk membuat tampilan interface yang lebih enak dipandang. Dan untuk select multiple kita menggunakan library select2. Karena kita menggunakan select2, jadi kita juga perlu menggunakan jquery.

Pengujian Broadcast SMS dengan Laravel 8

Setelah melewati proses-proses mulai dari daftar akun Twilio dan mendapatkan Twilio credentials, install laravel, install Twilio SDK package dan lain-lain, sekarang waktunya pengujian. Silahkan jalankan server dengan perintah php artisan serve, lalu buka di browser dengan URL 127.0.0.1:8000 atau sms-portal-laravel-Twilio.test (jika menggunakan valet). Tampilan root atau halaman project yang pertama tampil akan seperti pada gambar di atas. Terdapat dua card yang masing-masing memiliki fungsi fitur yang berbeda, yaitu untuk tambah data contact dan broadcast atau kirim sms dengan pesan custom.

Pengujian Tambah Data Contact

Pengujian yang pertama kita akan menguji fitur tambah data contact. Silahkan inputkan nomor telephone dengan kode negara (seperti +62) dan klik Add Contact, maka data contact akan berhasil ditambahkan ke tabel contacts dan sistem akan mengirimkan pesan SMS ke nomor telephone tersebut berupa text seperti pada contoh gambar di atas. Text pesan tersebut merupakan text yang telah kita definisikan pada method store di file HomeController.php.

Pengujian Broadcast SMS

Setelah menguji fitur tambah data contact dan sudah berhasil mengirimkan sms notifikasi, sekarang kita uji coba fitur broadcast SMS. Pada card dengan card header "Send SMS", Silahkan pilih contact mana saja yang akan menerima pesan broadcast SMS, kemudian coba ketikkan text apapun di textarea dan klik Send. Maka sistem dengan menggunakan layanan programmable messaging API dari Twilio akan mengirimkan pesan SMS dengan text sesuai apa yang telah diinputkan. Contoh pesan broadcast SMS bisa dilihat seperti pada contoh gambar di atas.

Kesimpulan

Pada tutorial ini, kita telah sama-sama belajar bagaimana cara membuat sistem broadcast SMS atau portal SMS sederhana dengan laravel 8 dan layananan programmable messaging API dari Twilio. Di akhir tutorial, kita juga sudah mencoba fitur tambah data contact yang akan mengirimkan notifikasi atau pesan SMS ke nomor contact yang telah ditambahkan dan juga sudah mencoba fitur broadcast SMS yang akan mengirimkan pesan SMS susuai dengan apa yang telah dinputkan ke banyak nomor telephone (contact).

Sampai disini artikel kali ini, jika ada kritik, saran, masukan atau apapun itu yang ingin didiskusikan, silahkan tulis komentar kalian di form komentar yang tersedia di bawah ini. See you

Doc: Twilio SMS

Credit: Marketing illustrations by Storyset