Membuat SMS Gateway Menggunakan Nexmo di Laravel 8

Membuat SMS Gateway Menggunakan Nexmo di Laravel 8

Ruang Coder - Yups sesuai judulnya, pada artikel kali ini saya sendiri admin utama dari blog ini akan Membuat SMS Gateway Menggunakan Nexmo di Laravel 8 saya sendiri sudah lama tidak aktif pada blog ini, dikarenakan berbagai banyak macam hal, dan sampai lupa juga cara nya posting di blog ini, apa - apa aja menu nya hehehe, saya sudah sempet searching dan, lumayan susah buat cari tutorial Membuat SMS Gateway maupun Whatsapp Gateway berhubung saya bisa, jadi saya ingin share, seperti layaknya di youtube saya, tentang berbagai tutorial crud, cuma pada artikel yang saya akan bahas ini kita akan membuat SMS Gateway nya terlebih dahulu, baru masuk ke artikel pembuatan Whastapp Gateway nya, tapi sebelum masuk lebih jauh, apaka kalian tau Nexmo itu apa?

Pengertian Nexmo

Nexmo sendiri adalah salah satu vendor penyedia layanan SMS, Whatsapp, Video Gateway berbasis cloud yang bisa kalian gunakan untuk mengirimkan sms ke semua negara yang disupport oleh nexmo. jadi bukan hanya indonesia saja yang disupport, negara lain juga tentu bisa.

Sebelum masuk lebih jauh, ada beberapa hal yang perlu kalian ketahui, untuk seorang developer yang akan membuat SMS Gateway pihak nexmo memberikan credit dengan mata uang Euro yang bisa kalian lihat di dashboard dengan nominal 2 euro Nexmo kalian nantinya, fungsinya credit tersebut membuat SMS Gateway kalian masuk ke Handphone / No HP yang kalian daftarkan di Nexmo atau biasa saya sebut whitelist.

Pada akun demo nexmo, kalian hanya bisa mengirim SMS ke nomor yang kalian daftarkan pada saat registrasi akun nexmo pertama kalian, jika ingin ke berbagai nomor, kalian harus upgrade ke yang versi berbayar.

Membuat SMS Gateway Dengan Nexmo Di Laravel

  1. Langkah pertama kalian kunjungi website nemxo nya sendiri untuk membuat account di nexmo.com, Setelah berhasil membuat account di nexmo, maka kalian akan mendapatkan Key dan secret seperti gambar di bawah ini.

  2. Secret Key Nexmo

  3. Langkah kedua kalian silahkan menginstall laravel dengan command git bash kalian, untuk lebih jelasnya saya tidak perlu rinci ya, kalian masuk dan baca artikel ini, saya anggap kalian sudah bisa menggunakan Laravel 8.
  4. composer create-project --prefer-dist laravel/laravel siponpes
  5. Buka project siponpes yang baru kalian install pada direktori installan ( kalau saya sering diletakkan di desktop). Pada percobaan ini, saya menggunakan editor Visual Studio Code sehingga step-stepnya masuk folder siponpes di dalam desktop pc dengan nama siponpes.
  6. Sekarang kalian  Install nexmo dengan composer. Jalankan command seperti di bawah ini pada terminal.
  7. php artisan vendor:publish

    Kemudian pilih Provider: Nexmo\Laravel\NexmoServiceProvider atau ketikkan angka 12 pada terminal kemudian Enter. ( Ini sesuai kalian urutan berapa ya vendornya jangan disamain banget ketik angka 12 )

  8. Dan langkah kelima ini adalah hal yang lumayan sepesial bagi saya, kenapa karena dari banyak tutorial, hanya menyediakan secret api dan key nya di enviroment, disini saya akan membuatnya dinamis, jadi masuk di database, tanpa kalian masuk ke enviroment, pertama buat migrations nya terlebih dahulu dengan ketikkan command dibawah ini :
  9. php artisan make:model -m Sms
  10. Selanjutnya pada tabel migrations silahka kalian ketikkan beberapa schema table seperti gambar dibawah ini.


  11. Langkah selanjutnya, kalian jalankan migrasi nya, dengan cara ketikkan command dibawah ini.
  12. php artisan migrate
  13. Setelah itu silahkan kalian buka local database kalian, dan isikan secara manual api key, dan secret key nya, yang kalian bisa dapatkan pada langkah pertama.
  14.  Dan dimodel SMS kalian hanya perlu menambahkan code ini saja.
  15.     use HasFactory;
        protected $fillable = ['id', 'api_key', 'api_secret'];
        protected $guraded = ['id'];
  16. Lalu kalian buat resource conttroller kalian, mengetikkan di command kalian.
  17. php artisan make:resource SmsController

  18. Selanjutkan silahkan kalian ketikan codingan seperti gambar dibawah ini pada controller SMS kalian.
  19. <?php
    
    namespace App\Http\Controllers\Admin;
    
    use Illuminate\Http\Request;
    use Nexmo\Laravel\Facade\Nexmo;
    use App\Models\Sms;
    use App\Http\Controllers\Controller;
    
    class SmsController extends Controller
    {
        public function index()
        {
            return view('sms.index', [
                'sms' => Sms::all()
            ]);
        }
    
        public function create()
        {
            return view('sms.create', [
                'sms' => Sms::all()
            ]);
        }
    
        public function store(Request $request)
        {
            $validateData = $request->validate([
                'api_key' => 'required',
                'api_secret'  => 'required',
            ]);
    
            Sms::create($validateData);
            return redirect('/extra/sms/create')->with('success', 'API Key has been created!!');
        }
    
        public function destroy(Sms $sms)
        {
            Sms::destroy($sms->id);
            return redirect('/extra/sms/create')->with('warning', 'API Key has been deleted!');
        }
    
        public function send(Request $request)
        {
            try {
                $basic  = new \Nexmo\Client\Credentials\Basic($request->api_key, $request->api_secret);
                $client = new \Nexmo\Client($basic);
    
                $message = $client->message()->send([
                    'to' => $request->to,
                    'from' => $request->from,
                    'text' => $request->message,
                ]);
    
                return redirect('/extra/whatsapp')->with('success', 'SMS Gateway has been sending!');
            } catch (\Exception $e) {
                return redirect('/extra/whatsapp')->with('error', 'SMS Gateway not sent!');
            }
        }
    }
    
  20. Selanjutnya adalah, kalian silahkan setting route kalian dengan copas codingan dibawah ini, dan bikin routes nya seterah ya, ini versi admin sesuaikan dengan project kalian
  21. Route::resource('/extra/sms', SmsController::class);
    Route::post('/extra/sendSMS', [SmsController::class, 'send'])->name('sendSMS');
  22. Selanjutnya kalian buat file index dan create pada folder view kalian buat dulu folder sms baru buat file index dan create.
  23. Selanjutnya silahkan kettikan codingan pada oflder index terlebih dahulu seperti dibawah, dan btw ini udah make layouting saya ya, jadi silahkan kalian sesuaikan dengan layout project kalian saja, sekali lagi jangan disamain, ambil intinya ada pada form inputnya dan method csrf nya aja, soalnya ini udah make layouting dan make toast untuk validasinya
  24. @extends('layouts.app')
    @section('container')
    @push('css-toast')
        <link rel="stylesheet" href="{{ asset('assets/bundles/izitoast/css/iziToast.min.css') }}">
    @endpush
    <section class="section">
    <div class="section-body">
      <div class="row">
        <div class="col-12 col-md-6  col-lg-6">
          <div class="card">
            <form method="POST" action="/extra/sendSMS">
              @csrf
              <div class="card-header">
                <h4>SMS Gateway</h4>
              </div>
              <input type="hidden" name="api_key" value="{{ $sms[0]->api_key }}">
              <input type="hidden" name="api_secret" value="{{ $sms[0]->api_secret }}">
              <div class="card-body">
                <div class="form-group">
                  <label>Recipent Number</label>
                  <input type="text" name="to" class="form-control" value="6289xxxxxxxxx" readonly>
                </div>
                <div class="form-group">
                  <label>From</label>
                  <input type="email" name="from" class="form-control" value="SiPONPES" readonly>
                </div>
                <div class="form-group mb-0">
                  <label>Message</label>
                  <textarea class="form-control" name="message" required=""></textarea>
                </div>
              </div>
              <div class="card-footer text-right">
                <button class="btn btn-primary">Send Message</button>
              </div>
            </form>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-6">
          <div class="card card-success">
            <div class="card-header">
              <h4>Documentation</h4>
            </div>
            <div class="card-body">
                <p>Hello, all of these SMS gateway menus use a package called <b>Nexmo</b> which you can register <a href="https://dashboard.nexmo.com/">Here</a>, because using this free feature you can only send SMS when your account and mobile number are registered with <b>Nexmo</b>.</p>
                <p>If you want to send free you can upgrade your nexmo account, here I just explain the logic
                You can see the full <a href="https://dashboard.nexmo.com/" class="badge badge-success">Documentation Here</a>.</p>
    
                <p>In the <b>Recipent Number</b>, please replace it with your cellphone number, if you are a <b>Nexmo</b> subscription feature, you can leave <b><i>readonly on my script</i></b> so that it can be filled with something else
                for delivery (<b>sender</b>) it's because it's free, adjust it if you use paid features.</p>
    
                <button type="button" class="btn btn-light btn-icon icon-left mt-3">
                  <i class="fab fa-github"></i> <a href="https://github.com/nexmo" class="badge badge-light">Github Nexmo</a></span>
                </button>
                <button type="button" class="btn btn-light btn-icon icon-left mt-3">
                  <i class="fab fa-github"></i> <a href="https://github.com/nurd0tid" class="badge badge-light">Github Me</a></span>
                </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    </section>
    @push('js-toast')
      <script src="{{ asset('assets/bundles/izitoast/js/iziToast.min.js') }}"></script>
    @endpush
    @push('popup-toast')  
      @if (session()->has('success'))
      <script>
          $(function() {
          iziToast.success({
            title: '👋',
            message: '{{ session("success") }}.',
            position: 'topRight'
          });      
        });
      </script>     
      @elseif (session()->has('error'))
      <script>
          $(function() {
          iziToast.error({
            title: 'Whoops!',
            message: '{{ session("error") }}.',
            position: 'topRight'
          });      
        });
      </script>     
      @endif
    @endpush
    @endsection
  25. Selanjutnya pada file create, dimana fungsi file create ini untuk membuat dinamis api key dengan di isikan ke database, dan sekali lagi jangan di ikutin semuanya ambil intinya sesuaikan dengan layouting kalian karena ini udah layouting saya.
  26. @extends('layouts.app')
    @section('container')
    @push('css-toast')
        <link rel="stylesheet" href="{{ asset('assets/bundles/izitoast/css/iziToast.min.css') }}">
    @endpush
    <section class="section">
    <div class="section-body">
      <div class="row">
        <div class="col-12 col-md-6  col-lg-6">
          <div class="card">
            <form method="POST" action="/extra/sms">
              @csrf
              <div class="card-header">
                <h4>API Key</h4>
              </div>
              <div class="card-body">
                <div class="form-group">
                  <label>Nexmo Key</label>
                  <input type="text" name="api_key" class="form-control @error('api_key')is-invalid @enderror">
                    @error('api_key')
                    <div class="invalid-feedback">
                      {{ $message }}
                    </div>
                    @enderror             
                </div>
                <div class="form-group">
                  <label>Nexmo Secret</label>
                  <input type="text" name="api_secret" class="form-control @error('api_secret')is-invalid @enderror">
                    @error('api_secret')
                    <div class="invalid-feedback">
                      {{ $message }}
                    </div>
                    @enderror                
                </div>
              </div>
              <div class="card-footer text-right">
                <button class="btn btn-primary">Setup Credentials</button>
              </div>
            </form>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-6">
          <div class="card">
            <div class="card-header">
              <h4>Message API KEY</h4>
            </div>
            <div class="card-body">
                <p>For SMS, MMS, Facebook, WhatsApp, Viber and much more: Messages API allows easy integration with multiple messaging platforms through a single integration. This API is currently in Beta, so expect some changes before it is production-ready.</p>
                <table class="table table-hover">
                    <thead>
                      <tr class="text-center">
                        <th scope="col">#</th>
                        <th scope="col">Nexmo Key</th>
                        <th scope="col">Nexmo Secret</th>
                        <th scope="col">Action</th>
                      </tr>
                      <tbody>
                        @foreach ($sms as $sms)
                        <tr class="text-center">
                          <td>{{ $loop->iteration }}</td>
                          <td>{{ $sms->api_key }}</td>
                          <td>{{ $sms->api_secret }}</td>
                          <td>
                            <form action="/extra/sms/{{ $sms->id }}" method="post">
                                @method('delete')
                                @csrf                           
                                <button class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')"><i class="fas fa-trash"></i></button>
                            </form>                       
                          </td>
                        </tr>
                        @endforeach
                      </tbody>
                    </thead>
                </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    </section>
    @push('js-toast')
      <script src="{{ asset('assets/bundles/izitoast/js/iziToast.min.js') }}"></script>
    @endpush
    @push('popup-toast')  
      @if (session()->has('success'))
      <script>
          $(function() {
          iziToast.success({
            title: '👋',
            message: '{{ session("success") }}.',
            position: 'topRight'
          });      
        });
      </script>     
      @elseif (session()->has('warning'))
      <script>
          $(function() {
          iziToast.warning({
            title: 'Whoops!',
            message: '{{ session("warning") }}.',
            position: 'topRight'
          });      
        });
      </script>     
      @endif
    @endpush
    @endsection
  27. Selesai....
Sudah selesai untuk artikel Membuat SMS Gateway Menggunakan Nexmo di Laravel 8 fungsi menerima api key dan secret key sudah dinamis, sekali lagi, jangan di ikutin semua, karena itu udah layouting bawaan saya, dan untuk kalian seperti saya katakan sebelumnya, untuk SMS Gateway kalo demo hanya bisa kirim SMS ke nomor yang di whitelist saat kalian pertama kali daftar, tapi jika kalian tetep maksa dan Kekeh pengen make codingan seperti di artikel, tenang saya kasih open source ko projectnya, ini project terus berkembang, silahkan kalian bisa clone di github saya disini. dan jangan lupa dikasih Star ya.

Jika kalian kebingungan jangan sungkan untuk bertanya, baik itu komentar, dan via email, instagram ya intinya sosmed saya, kalau saya gak sibuk fast respown ko, semoga artikel ini bermanfaat ya, dan maaf saya sendiri jarang update artikel, next artikel akan kita bahas Membuat Whatsapp Gateway Menggunakan Nexmo di Laravel 8 sebenernya gak jauh beda sih caranya, oke see you, terimakasih sudah berkunjung.