[SHARE] Cara menambah fitur sms verifikasi pada form registrasi member web agan

Beranda

...

Website, Webmaster, Webdeveloper
[SHARE] Cara menambah fitur sms verifikasi pada form registrasi member web agan

partyanimal123

17-12-2013 12:37

[SHARE] Cara menambah fitur sms verifikasi pada form registrasi member web agan

Now Available - LIVE DEMO - klik disini

Selamat siang, sore, malam, pagi dan sebagainya agan agan emoticon-Ngakak

Siang siang begeneh daripada ngantuk, ane mau share sedikit ilmu ane yang pas pasan buat agan sistah semua..ok, duduk manis dan scroll kebawah pelan-pelan yah..HERE WE GO

Apa yang dimaksud dengan SMS Verifikasi?

Spoiler for jawabannya adalaaah:

SMS Verifikasi adalah fitur sms memberikan kepastian bahwa nomor handphone yang digunakan oleh seorang User tersebut benar-benar aktif. Ketika sebuah form yang ada pada aplikasi atau web diisi bersama nomor handphone yang digunakan User, SMS Verifikasi pun dikirimkan kepada nomor handphone yang di inputkan User pada form tersebut. SMS Verifikasi berisikan kode verifikasi dimana sang User dapat mengkonfirmasikannya dengan mengetikannya pada laman pengecekan/verifikasi.

Kenapa harus menggunakan SMS Verifikasi?

Spoiler for jawabannya adalaaah:

Apabila anda memiliki web dan ingin memastikan member yang ada pada website anda dapat dihubungi untuk beberapa keperluan dan memastikan akun user yang akan mendaftar bukan bot yang mencoba untuk menyerang website anda.

Siapa saja yang menggunakan SMS Verifikasi?

Spoiler for jawabannya adalaaah:

1. Google
selain dikenal melalui search enginenya, google juga memiliki fitur email bernama GMAIL yang pada tahun 2013 berjumlah sekitar 425 juta di dunia. GMAIL sendiri menggunakan verifikasi via sms ketika user pertama kali mendaftar untuk mendapatkan akun emailnya dan sekarang menerapkan sistem keamanan ganda berupa aplikasi bernama Google authenticator dan SMS gateway sebagai kunci untuk dapat masuk ke akun google anda.
2. Twitter
Selain Google twitter juga menerapkan sistem keamanan ganda untuk para pengguna twitter agar dapat mengakses twitter.
3. Whatsapp
Messaging App dengan jumlah terbanyak di dunia pada tahun ini dengan pengguna sekitar 350 juta orang jatuh pada whatsapp, Whatsapp adalah aplikasi online messaging multi platform yang dapat berjalan pada Android OS, iOs, Windows Mobile OS dan Symbian Os. Dengan jumlah pengguna sebanyak itu, Whatsapp menerapkan sistem SMS Verifikasi untuk memastikan Akun yang baru akan dibuat memang terbukti valid.

Nah, terbukti layanan-layanan tersebut menggunakan fitur SMS Verifikasi untuk memastikan keabsahan nomor handphone penggunanya. Kini, bagi anda yang memiliki website dengan hak akses membership juga dapat menggunakan fitur SMS Verifikasi juga. Sebelum mulai menggunakan fitur ini pada website anda, ada baiknya anda memahami terlebih dahulu cara kerja dari SMS Verifikasi. Berikut Penjelasannya :

Spoiler for cara kerja:

Cara kerja :

Spoiler for cara kerja:

1. User mengisi form pendaftaran dan menginputkan nomor handphone asli untuk selanjutnya dikirimkan SMS Verifikasi.
2. User mendapatkan SMS berisi Kode Verifikasi yang selanjutnya akan di isi pada halaman web untuk melengkapi registrasi.
3. User mengisi kolom verifikasi dengan kode yang tertera pada SMS dan kemudian melengkapi registrasi sekaligus resmi menjadi member yang terdaftar. Apabila kode verifikasi yang diketikan oleh user tidak sesuai dengan apa yang ada pada isi SMS Verifikasi, maka User harus menginputkan kembali kode yang benar.

Berikut ini adalah tutorial untuk menambahkan fitur sms verifikasi berupa kode verifikasi yang akan diterima oleh calon member dan selanjutnya akan di inputkan pada kolom verifikasi untuk melengkapi registrasi dan menjadi member yang terdaftar.

Spoiler for tutorial:

1. Untuk bisa memiliki fasilitas SMS pada web atau blog Anda harus mempunyai SMS gateway berfunsi sebagai pengirim SMS secara otomatis begitu ada pengunjung yang melakukan pendaftaran. Namun jangan khawatir Anda tidak perlu membeli software SMS gateway. Saya menggunakan SMS gateway online, silakan daftar disiniGRATIS! emoticon-Ngacir2

2. Buatlah halaman html bernama reg.html dan isikan dengan script berikut :

Code:



<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<form method="post" action="send.php">

 <h2>Form Registrasi Member</h2>

 <p> </p>

 <table width="306" border="0" cellspacing="5">

 <tr>

 <td width="143">Nama :</td>

 <td width="144"><input type="text" name="nama" id="nama" /></td>

 </tr>

 <tr>

 <td>Alamat :</td>

 <td><input type="text" name="alamat" id="alamat" /></td>

 </tr>

 <tr>

 <td>Email :</td>

 <td><input type="text" name="email" id="email" /></td>

 </tr>

 <tr>

 <td><font color="#FF0000">*</font>No. Handphone :</td>

 <td><input type="text" name="nohp" id="nohp" /></td>

 </tr>

 <tr>

 <td>Username :</td>

 <td><input type="text" name="username" id="username" /></td>

 </tr>

 <tr>

 <td>Password :</td>

 <td><input type="text" name="password" id="password" /></td>

 </tr>

 <tr>

 <td> </td>

 <td><input type="submit" name="Submit" id="Submit" value="Daftar" />

 <input type="reset" name="Reset" id="button" value="Batal" /></td>

 </tr>

 </table>

 <p><font color="#FF0000">*</font>Silahkan masukkan nomor handphone yang anda gunakan untuk menerima kode verifikasi.</p>

</form>

</body>

</html>

3. Berikut bentuk tampilan dari halaman reg.html

Spoiler for reg.html:

4. Kalau sudah, buat halaman php dan beri nama send.php dan isikan dengan script berikut :

Code:



<?php

$nohp=$_POST['nohp'];

$kode="182654"; //isikan sesuai dengan keinginan anda, tapi jangan masukkan huruf. hanya digit angka.

// Script Kirim SMS Api Zenziva

$userkey="userkeyanda"; // userkey lihat di zenziva

$passkey="passkeyanda"; // set passkey di zenziva

$message="Silahkan masukkan kode $kode pada kolom verifikasi untuk melengkapi registrasi anda. terima kasih.";



$url = "http://zenziva.com/apps/smsapi.php";

$curlHandle = curl_init();

curl_setopt($curlHandle, CURLOPT_URL, $url);

curl_setopt($curlHandle, CURLOPT_POSTFIELDS, 'userkey='.$userkey.'&passkey='.$passkey.'&nohp='.$nohp.'&pesan='.urlencode($message));

curl_setopt($curlHandle, CURLOPT_HEADER, 0);

curl_setopt($curlHandle, CURLOPT_RETURNTRANSFER, 1);

curl_setopt($curlHandle, CURLOPT_TIMEOUT,30);

curl_setopt($curlHandle, CURLOPT_POST, 1);

$results = curl_exec($curlHandle);

curl_close($curlHandle);



header("location: inputver.html"); 

?>

Halaman send.php berfungsi untuk mengirimkan sms verifikasi sekaligus mengarahkan user ke halaman input kode verifikasi.

5. Kemudian untuk membuat halaman dimana user menginputkan kode verifikasi, buatlah halaman html dan beri nama inputver.html. kemudian isikan dengan kode berikut :

Code:



<html>

<head>

<title>Untitled Document</title>

</head>



<body>

<form method="post" action="verify.php">

 <p>SMS Verifikasi telah dikirim.</p>

 <p>Silahkan input kode verifikasi pada kolom dibawah ini :

 </p>

 <p>

 <input type="text" name="kodever" id="kodever" />

 <input type="submit" name="button" id="button" value="Kirim" />

 </p>

</form>

</body>

</html>

6. Untuk melakukan verifikasi apakah kode yang dimasukkan benar atau salah, buatlah halaman php bernama verify.php dan isikan dengan script berikut :

Code:



<?php

$kode=$_POST['kodever'];

if($kode==182654) //isikan angka kode yang sesuai dengan yang ada pada halaman send.php

{

header("location: dasbor.php"); 

}

else{

header("location: cobalagi.php"); 

}

?>

7. buatlah halaman cobalagi.php untuk menampilkan user salah menginputkan kode verifikasi dan isikan script berikut :

Code:



<html>

<head>

<title>Untitled Document</title>

</head>



<body>

<form method="post" action="verify.php">

 <p><font color="#FF0000">Kode yang anda masukkan salah.</font></p>

 <p>Silahkan input kembali kode verifikasi anda :

 </p>

 <p>

 <input type="text" name="kodever" id="kodever" />

 <input type="submit" name="button" id="button" value="Kirim" />

 </p>

</form>

</body>

</html>

8. Dan untuk menampilkan halaman dasbor user apabila user memasukkan kode verifikasi dengan benar, maka buat halaman bernama dasbor.php dan inputkan script berikut :

Code:



<html>

<head>

<title> registrasi berhasil </title>

</head>

<body>

<p><br>

 <a href="#">home</a></br>

 <a href="#">profil</a></br>

 <a href="#">forum</a></br>

 <a href="#">logout</a></br>

</p>

<p>Selamat datang, anda telah berhasil registrasi dan terdaftar sebagai member kami </p>

</body>

<html>

WARNING!

Spoiler for warning:

Userkey dan passkey dapat dilihat di halaman dashboard zenziva setelah melakukan login.

[SHARE] Cara menambah fitur sms verifikasi pada form registrasi member web agan

Calon member akan menerima SMS berupa kode verifikasi setelah melakukan registrasi. Setelah Calon member mendaftar pada halaman reg.html, otomatis Calon member mendapatkan sms berupa kode verifikasi. Dan pada inputver.html, User menginputkan kode verifikasi sesuai dengan apa yang ada pada isi sms verifikasi dan kemudian melengkapi registrasi juga menjadi member baru yang terdaftar. Sekarang website Anda telah dilengkapi dengan fitur SMS Verifikasi. emoticon-Jempol