Membuat SMS Verifikasi saat member registrasi di form registrasi dengan PHP dan HTML

Hello sob,






Pasti sobat ga asing dengan mendaftar di google ya, terkadang google akan mengharuskan anda untuk mengkonfirmasi kode verifikasi yang biasanya dikirimkan lewat sms oleh Google. Fungsi dari fitur ini jelas untuk meyakinkan bahwa anda benar-benar manusia, dan bukan robot.



Nah disini saya mau share sedikit tentang kode untuk sederhana untuk membuat form registrasi dan verifikasi via sms. Untuk layanan SMS  nya saya menggunakan SMSFortunata , karena layanan ini GRATIS.

Oke langsung saja:
1. Persiapkan akun dan password anda di SMSFortunata. Daftar dulu gratis kok !!
2. Buat file style.css (sekalian saya percantik saja dengan css) dan copas file berikut:

 html{  
   background-color: #f3f3f3;  
 }  
 .form-register{  
   max-width: 1000px;  
   width: 100%;  
   margin: 0 auto;  
   font: bold 14px sans-serif;  
   text-align: center;  
 }  
 .form-register-with-email{  
   position: relative;  
   display: inline-block;  
   vertical-align: top;  
   margin-right: 130px;  
   text-align: center;  
 }  
 .form-register-with-email .form-white-background{  
   width: 570px;  
   box-sizing: border-box;  
   background-color: #ffffff;  
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);  
   padding: 60px 80px;  
   margin-bottom: 35px;  
 }  
 .form-register-with-email .form-row{  
   text-align: left;  
   margin-bottom: 23px;  
 }  
 .form-register-with-email .form-title-row{  
   text-align: center;  
   margin-bottom: 50px;  
 }  
 .form-register-with-email h1{  
   display: inline-block;  
   box-sizing: border-box;  
   color: #4c565e;  
   font-size: 24px;  
   padding: 0 20px 15px;  
   border-bottom: 2px solid #6caee0;  
   margin: 0;  
 }  
 .form-register-with-email .form-row > label span{  
   display: inline-block;  
   box-sizing: border-box;  
   color: #5f5f5f;  
   width: 125px;  
   text-align: right;  
   padding-right: 25px;  
 }  
 .form-register-with-email input{  
   color: #5f5f5f;  
   box-sizing: border-box;  
   width: 230px;  
   box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);  
   padding: 12px 18px;  
   border: 1px solid #dbdbdb;  
 }  
 .form-register-with-email .form-checkbox input{  
   margin-left: 128px;  
   margin-right: 10px;  
   width: auto;  
   vertical-align: top;  
 }  
 .form-register-with-email .form-row .form-checkbox span{  
   font-size: 12px;  
   font-weight: normal;  
   display: inline-block;  
   text-align: left;  
   width: 220px;  
   margin: 0;  
 }  
 .form-register-with-email .form-checkbox span a{  
   text-decoration: none;  
   color: #6caee0;  
 }  
 .form-register-with-email button{  
   display: block;  
   border-radius: 2px;  
   background-color: #6caee0;  
   color: #ffffff;  
   font-weight: bold;  
   box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);  
   padding: 15px 35px;  
   border: 0;  
   margin: 55px auto 0;  
   cursor: pointer;  
 }  
 .form-register-with-email .form-log-in-with-existing{  
   text-decoration: none;  
   padding: 4px 8px;  
   font-weight: normal;  
   color: #7b9d62;  
   background-color: #d6f0c3;  
 }  
 .form-register-with-email:after{  
   border-radius: 50%;  
   background-color: #edeca5;  
   width: 50px;  
   height: 50px;  
   color: #93923b;  
   font-size: 17px;  
   line-height: 50px;  
 }  
 .form-sign-in-with-social{  
   display: inline-block;  
   max-width: 180px;  
   box-sizing: border-box;  
   vertical-align: top;  
   text-align: center;  
   margin-top: 100px;  
 }  
 .form-sign-in-with-social .form-title-row{  
   margin-bottom: 50px;  
 }  
 .form-sign-in-with-social .form-title{  
   box-sizing: border-box;  
   color: #4c565e;  
   font-size: 24px;  
   padding: 15px 20px;  
   border-bottom: 2px solid #6caee0;  
 }  
 .form-sign-in-with-social .form-google-button{  
   color: #ffffff;  
   display: block;  
   width: 145px;  
   height: 40px;  
   font-size: 12px;  
   line-height: 40px;  
   background-color: rgba(222, 110, 60, 0.9);  
   box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.08);  
   border-radius: 2px;  
   margin: 8px auto;  
   text-decoration: none;  
 }  
 .form-sign-in-with-social .form-facebook-button{  
   color: #ffffff;  
   display: block;  
   width: 145px;  
   height: 40px;  
   font-size: 12px;  
   line-height: 40px;  
   background-color: rgba(75, 136, 194, 0.9);  
   box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.08);  
   border-radius: 2px;  
   margin: 8px auto;  
   text-decoration: none;  
 }  
 .form-sign-in-with-social .form-twitter-button{  
   color: #ffffff;  
   display: block;  
   width: 145px;  
   height: 40px;  
   font-size: 12px;  
   line-height: 40px;  
   background-color: rgba(123, 195, 226, 0.9);  
   box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.08);  
   border-radius: 2px;  
   margin: 8px auto;  
   text-decoration: none;  
 }  
 /*     Making the form responsive. Remove these media queries  
   if you don't need the form to work on mobile devices. */  
 @media (max-width: 900px) {  
   .form-register{  
     margin: 20px auto;  
   }  
   .form-register-with-email{  
     position: relative;  
     display: block;  
     margin: 0;  
   }  
   .form-register-with-email .form-white-background{  
     margin: 0 auto 32px;  
   }  
   .form-register-with-email:after{  
     bottom: -80px;  
     left: 50%;  
     margin-left: -25px;  
   }  
   .form-sign-in-with-social {  
     margin-top: 105px;  
   }  
 }  
 @media (max-width: 600px) {  
   .form-register-with-email .form-white-background{  
     width: 300px;  
     padding-left: 35px;  
     padding-right: 35px;  
   }  
   .form-register-with-email .form-row > label span{  
     display: block;  
     text-align: left;  
     padding: 0 0 10px;  
   }  
   .form-register-with-email input{  
     display: block;  
     margin: 0 auto;  
   }  
   .form-register-with-email .form-checkbox input{  
     display: inline-block;  
     margin-left: 0;  
   }  
   .form-register-with-email .form-checkbox span{  
     width: 200px !important;  
   }  
   .form-register-with-email:after{  
     bottom: -80px;  
     left: 50%;  
     margin-left: -25px;  
   }  
 }  



4. Buat file index.html dan copas file dibawah ini:
 <!DOCTYPE html>  
 <html>  
 <head>  
      <meta charset="utf-8">  
      <meta http-equiv="X-UA-Compatible" content="IE=edge">  
      <meta name="viewport" content="width=device-width, initial-scale=1">  
      <title>Form Pendaftaran</title>  
      <link rel="stylesheet" href="style.css">  
 </head>  
   <div class="main-content">  
     <form class="form-register" method="post" action="kirim.php">  
       <div class="form-register-with-email">  
         <div class="form-white-background">  
           <div class="form-title-row">  
             <h1>Daftar Akun Anda</h1>  
           </div>  
           <div class="form-row">  
             <label>  
               <span>Nama</span>  
               <input type="text" name="nama" id="nama" required>  
             </label>  
           </div>  
           <div class="form-row">  
             <label>  
               <span>Email</span>  
               <input type="email" name="email" id="email" required>  
             </label>  
           </div>  
           <div class="form-row">  
             <label>  
               <span>Password</span>  
               <input type="password" name="password" id="password" required>  
             </label>  
           </div>  
                          <div class="form-row">  
             <label>  
               <span>No.Handphone</span>  
               <input type="phone" name="phone" nama="phone" required>  
             </label>  
           </div>  
           <div class="form-row">  
             <label class="form-checkbox">  
               <input type="checkbox" name="checkbox" checked>  
               <span>Saya setuju <a href="#">ketentuan dan layanan</a></span>  
             </label>  
           </div>  
           <div class="form-row">  
             <button type="submit">Daftar</button>  
           </div>  
             <p><font color="#FF0000">*</font>Silahkan masukkan nomor handphone yang anda gunakan untuk menerima kode verifikasi.</p>  
         </div>  
       </div>  
     </form>  
   </div>  
 </body>  
 </html>  


5. Buat file kirim.php dan copas file dibawah ini: (masukkan username dan password)
pada kirim.php ini terjadi proses sms dengan curl dan SMS API smsfortunata.
 <?php  
 $phone=$_POST['phone'];  
 $kode="2274"; //kode ini silahkan anda sesuaikan , atau anda bisa merandomnya kemudian menyimpan didatabase dan dipanggil kembali di verifikasi utk dicocokkan.  
 $username="demo@gmail.com"; //username smsfortunata anda  
 $password="demo"; //password smsfortunata anda  
 $pesan="Kode verifikasi anda $kode.";  
 $pesan=str_replace(" ","+",$pesan);  
 //proses mengirimkan sms dengan smsfortunata API  
 $url = "http://smsfortunata.com/api?user=".$username."&pass=".$password."&pesan=".$pesan."&senderid=modem2&nomor=".$phone."";  
 $curlHandle = curl_init();  
 curl_setopt($curlHandle, CURLOPT_URL, $url);  
 curl_setopt($curlHandle, CURLOPT_POSTFIELDS,"");  
 curl_setopt($curlHandle, CURLOPT_HEADER, 0);  
 curl_setopt($curlHandle, CURLOPT_RETURNTRANSFER, 1);  
 curl_setopt($curlHandle, CURLOPT_TIMEOUT,0);  
 curl_setopt($curlHandle, CURLOPT_POST, 1);  
 curl_exec($curlHandle);  
 curl_close($curlHandle);  
 header("location: verifikasi.html");   
 ?>  




6. Kemudian buat halaman verifikasinya verifikasi.html dan copas file dibawah ini:

 <!DOCTYPE html>  
 <html>  
 <head>  
      <meta charset="utf-8">  
      <meta http-equiv="X-UA-Compatible" content="IE=edge">  
      <meta name="viewport" content="width=device-width, initial-scale=1">  
      <title>Verifikasi akun</title>  
      <link rel="stylesheet" href="style.css">  
 </head>  
   <div class="main-content">  
     <form class="form-register" method="post" action="proses.php">  
       <div class="form-register-with-email">  
         <div class="form-white-background">  
           <div class="form-title-row">  
             <h1>Masukkan kode verifikasi</h1>  
           </div>  
           <div class="form-row">  
             <label>  
               <span>Kode</span>  
               <input type="text" name="kode" id="kode" required>  
             </label>  
           </div>  
           <div class="form-row">  
                          <p>SMS Verifikasi telah dikirimkan ke nomor handphone anda</p>  
             <button type="submit" name="button" id="button">Verifikasi</button>  
           </div>  
         </div>  
       </div>  
     </form>  
   </div>  
 </body>  
 </html>  




7. Kemudian proses kode verifikasi tadi di halaman proses.php dan copas file dibawah ini:

 <?php  
 $kode=$_POST['kode'];  
 if($kode==2274)   
 {  
 header("location: member.php");   
 }  
 else{  
 header("location: ulangi.php");   
 }  
 ?>  






8. Dari file proses.php jelas jika kode sesuai maka masuk ke halaman member.php dan jika salah masuk ke halaman ulangi.php:

kode ulangi.php:

 <!DOCTYPE html>  
 <html>  
 <head>  
      <meta charset="utf-8">  
      <meta http-equiv="X-UA-Compatible" content="IE=edge">  
      <meta name="viewport" content="width=device-width, initial-scale=1">  
      <title>Verifikasi akun</title>  
      <link rel="stylesheet" href="style.css">  
 </head>  
   <div class="main-content">  
     <form class="form-register" method="post" action="proses.php">  
       <div class="form-register-with-email">  
         <div class="form-white-background">  
           <div class="form-title-row">  
             <h1>Masukkan kode verifikasi</h1>  
           </div>  
           <div class="form-row">  
             <label>  
               <span>Kode</span>  
               <input type="text" name="kode" id="kode" required>  
             </label>  
           </div>  
           <div class="form-row">  
                          <p>kode yang anda masukkan salah coba ulangi lagi</p>  
             <button type="submit" name="button" id="button">Verifikasi</button>  
           </div>  
         </div>  
       </div>  
     </form>  
   </div>  
 </body>  
 </html>  




kode member.php, contoh saja anda buat:
Berhasil masuk !!


File lengkapnya: Disini

Subscribe to receive free email updates:

4 Responses to "Membuat SMS Verifikasi saat member registrasi di form registrasi dengan PHP dan HTML"

  1. kok gak masuk y kode nya mas, apa ada yg kurang?

    ReplyDelete
    Replies
    1. iya pak layanan smsfortunata saat ini tidak aktif, cara tersebut bisa dipakai di layanan sms gateway lainnya.

      Delete