Register Account dengan Email dan captcha


Mekanisme pendaftaran pada sebuah website bias memberikan rasa malas kepada seseoarang apalagi jumlah form yang disediakan cukup banyak, ini tentu saja menguras waktu yang cukup lama hanya karna untuk mendaftar saja. Pada tutorial kali ini saya akan menunjukan bagaimana mekanisme pendaftaran dengan menggunakan email saja ditambah captcha sebagai pembeda pendaftar bukan bot, password pendaftar akan secara otomatis dikirim ke email bersangkutan.

Oke langsung saja, pertama yang harus dipahami adalah alur dari mekanisme pendaftaran ini, alur tersebut kira-kira seperti ini

User -> ketik email & captcha -> system akan mengirim email yang isinya informasi login user (username dan password), password yang dikirim ke email user berupa huruf acak.

  1. Halaman view.
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>AdminLTE 2 | Registration Page</title>
    
    <!-- Tell the browser to be responsive to screen width -->
    
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    
    <!-- Bootstrap 3.3.6 -->
    
    <link rel="stylesheet" href="<?php echo base_url();?>assets/bootstrap/css/bootstrap.min.css">
    
    <!-- Font Awesome -->
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    
    <!-- Ionicons -->
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    
    <!-- Theme style -->
    
    <link rel="stylesheet" href="<?php echo base_url();?>assets/dist/css/AdminLTE.min.css">
    
    <!-- iCheck -->
    
    <link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
    
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    
    <!--[if lt IE 9]>
    
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    
    <![endif]-->
    
    </head>
    
    <body class="hold-transition register-page">
    
    <div class="register-box">
    
    <div class="register-logo">
    
    <a href="../../index2.html"><b>REGISTER</b></a>
    
    </div>
    
    <?php if ($this->session->flashdata('message'))echo "<div class='alert alert-danger'>".$this->session->flashdata('message')."</div>";?>
    
    <?php $data = $this->session->flashdata('error');
    
    if ($data!=""){
    
    ?>
    
    <div class="alert alert-danger"><?=$data ;?></div>
    
    <?php };?>
    
    <?php $data2 = $this->session->flashdata('sukses');
    
    if ($data2!=""){
    
    ?>
    
    <div class="alert alert-success"><?=$data2 ;?></div>
    
    <?php };?>
    
    <div class="register-box-body">
    
    <p class="login-box-msg">Register a new membership</p>
    
    <form action="<?php echo site_url('user/submit') ;?>" method="post">
    
    <div class="form-group has-feedback">
    
    <input type="text" name="email" required class="form-control" placeholder="Email">
    
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
    
    </div>
    
    <div class="form-group">
    
    <div class="col-xs-6"><?=$image ;?></div>
    
    <div class="col-xs-6"><input type="text" name="captcha" required placeholder="security code.." class="form-control"></div>
    
    </div><br><br>
    
    <div class="row">
    
    <div class="col-xs-8">
    
    <div class="checkbox icheck">
    
    </div>
    
    </div>
    
    <!-- /.col -->
    
    <div class="col-xs-4">
    
    <button type="submit" class="btn btn-primary btn-block btn-flat">Register</button>
    
    </div>
    
    <!-- /.col -->
    
    </div>
    
    </form>
    
    <div class="social-auth-links text-center">
    
    <a href="<?php echo site_url('login');?>" class="text-center">I already have a membership</a>
    
    </div>
    
    <!-- /.form-box -->
    
    </div>
    
    <!-- /.register-box -->
    
    <!-- jQuery 2.2.3 -->
    
    <script src="<?php echo base_url();?>assets/plugins/jQuery/jquery-2.2.3.min.js"></script>
    
    <!-- Bootstrap 3.3.6 -->
    
    <script src="<?php echo base_url();?>assets/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- iCheck -->
    
    <script src="<?php echo base_url();?>assets/plugins/iCheck/icheck.min.js"></script>
    
    <script>
    
    $(function () {
    
    $('input').iCheck({
    
    checkboxClass: 'icheckbox_square-blue',
    
    radioClass: 'iradio_square-blue',
    
    increaseArea: '20%' // optional
    
    });
    
    });
    
    </script>
    
    </body>
    
    </html>

     

     

View dalam hal ini menggunakan AdminLTE, jadi bias disesuaikan saja isinya. Script view diatas sudah mencakup untuk tampilan captcha dan pesan ketika pendaftaran berhasil.

  1. Buat Controller User.php
    function register(){
    
            $options = array (
    
                'img_path'     => './captcha/',
    
    'img_url'     => base_url().'captcha/',
    
    'img_width'     => '150',
    
    'img_height' => '35',
    
    'border' => 0,
    
    'expiration' => 7200
    
                );
    
            $cap = create_captcha($options);
    
            $data['image'] = $cap['image'];
    
            $this->session->set_userdata('captcha', $cap['word']);
    
            $this->load->view('admin/user/registe.php', $data);
    
            //$this->session->set_flashdata('message','Error Security Code ! type Again !');
    
        }
    
        function submit(){
    
            $postemail = $this->input->post('email');
    
            $q = $this->db->query("SELECT * from user where email='$postemail'");
    
            if ($q->num_rows()==0){
    
                if ($this->input->post('captcha')==$this->session->userdata('captcha')){
    
                    $kar = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789';
    
                $string = '';
    
                for ($i=0; $i < 9; $i++){
    
                    $pos = rand(0, strlen($kar)-1);
    
                    $string .=$kar{$pos};
    
                }
    
                $value = array(
    
                    'email' => $this->input->post('email'),
    
                    'password' => md5($string),
    
                    'role'=>'Member'
    
                    );
    
                $this->model_user->insert_data('user', $value);
    
                 $ci = get_instance();
    
    $ci->load->library('email');
    
    $config['protocol'] = "smtp";
    
    $config['smtp_host'] = "ssl://smtp.gmail.com";
    
    $config['smtp_port'] = "465";
    
    $config['smtp_user'] = "email_kamu";
    
    $config['smtp_pass'] = "password email";
    
    $config['charset'] = "utf-8";
    
    $config['mailtype'] = "html";
    
    $config['newline'] = "\r\n";
    
             // //memanggil library email dan set konfigurasi untuk pengiriman email
    
             $this->email->initialize($config);
    
             //konfigurasi pengiriman
    
             $this->email->from('email','Nama pengirim');
    
             $this->email->to($postemail);
    
             $this->email->subject("Account Information");
    
             $this->email->message(
    
             "<center>Congratulation, you have registered in our site.<br>
    
             Here is your Login Information<br>
    
             email : ".$postemail."<br>
    
             Password : ".$string."</center>"
    
             );
    
             if($this->email->send())
    
             {
    
             $this->session->set_flashdata('sukses','Registration Successfull please cek your email for Login Information');
    
             redirect('user/register');
    
             }else
    
             {
    
             $this->session->set_flashdata('sukses','Registration Successfull but we cannot send email to you please contact our support');
    
             redirect('user/register');
    
             }
    
                        $this->session->set_flashdata('sukses','Registration Successfull please cek your email for password');
    
                        redirect('user/register');
    
            } else {
    
                $this->session->set_flashdata('message','Error Security Code ! type Again !');
    
                redirect('user/register');
    
            }
    
            } else {
    
                $this->session->set_flashdata('error','email is already use');
    
                redirect('user/register');
    
            }
    
            //$this->load->library('email');
    
    //$config = array();
    
        }

     

     

     

     

    berikut penjelasan script pada controllernya

    function register(){
    
            $options = array (
    
                'img_path'     => './captcha/',
    
    'img_url'     => base_url().'captcha/',
    
    'img_width'     => '150',
    
    'img_height' => '35',
    
    'border' => 0,
    
    'expiration' => 7200
    
                );
    
            $cap = create_captcha($options);
    
            $data['image'] = $cap['image'];
    
            $this->session->set_userdata('captcha', $cap['word']);
    
            $this->load->view('admin/user/registe.php', $data);
    
            //$this->session->set_flashdata('message','Error Security Code ! type Again !');
    
        }

fungsi register diatas mengatur tempat disimpannya captcha, lebar dan tinggi gambar captcha dan tindakan ketika captcha salah diketik.

 

if ($q-&gt;num_rows()==0){             if ($this-&gt;input-&gt;post('captcha')==$this-&gt;session-&gt;userdata('captcha')){                 $kar = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789';             $string = '';             for ($i=0; $i &lt; 9; $i++){                 $pos = rand(0, strlen($kar)-1);                 $string .=$kar{$pos};             }             $value = array(                 'email' =&gt; $this-&gt;input-&gt;post('email'),                 'password' =&gt; md5($string),                 'role'=&gt;'Member'                 );             $this-&gt;model_user-&gt;insert_data('user', $value);</pre>

script diatas berfungsi untuk mengacak password yang dibuat, password yang diacak berdasarkan karakter yang telah ditentukan dan akan diacak sebanyak 10 karakter
<pre class="EnlighterJSRAW" data-enlighter-language="php"> $ci = get_instance();

$ci-&gt;load-&gt;library('email');

$config['protocol'] = "smtp";

$config['smtp_host'] = "ssl://smtp.gmail.com";

$config['smtp_port'] = "465";

$config['smtp_user'] = "email_kamu";

$config['smtp_pass'] = "password email";

$config['charset'] = "utf-8";

$config['mailtype'] = "html";

$config['newline'] = "\r\n";

         // //memanggil library email dan set konfigurasi untuk pengiriman email

         $this-&gt;email-&gt;initialize($config);

         //konfigurasi pengiriman

         $this-&gt;email-&gt;from('email','Nama pengirim');

         $this-&gt;email-&gt;to($postemail);

         $this-&gt;email-&gt;subject("Account Information");

         $this-&gt;email-&gt;message(

         "&lt;center&gt;Congratulation, you have registered in our site.&lt;br&gt;

         Here is your Login Information&lt;br&gt;

         email : ".$postemail."&lt;br&gt;

         Password : ".$string."&lt;/center&gt;"

         );

         if($this-&gt;email-&gt;send())

         {

         $this-&gt;session-&gt;set_flashdata('sukses','Registration Successfull please cek your email for Login Information');

         redirect('user/register');

         }else

         {

         $this-&gt;session-&gt;set_flashdata('sukses','Registration Successfull but we cannot send email to you please contact our support');

         redirect('user/register');

         }

                    $this-&gt;session-&gt;set_flashdata('sukses','Registration Successfull please cek your email for password');

                    redirect('user/register');

        } else {

            $this-&gt;session-&gt;set_flashdata('message','Error Security Code ! type Again !');

            redirect('user/register');

        }

        } else {

            $this-&gt;session-&gt;set_flashdata('error','email is already use');

            redirect('user/register');

        }

        //$this-&gt;load-&gt;library('email');

//$config = array();

script diatas mengatur settinga smtp server dari email yang digunakan untuk mengirim email ke client.

contoh pada script diatas menggunakan gmail, sebagai catatan untuk menggunakan gmail harus diaktifkan terlebih dahulu fitur less secure app di settingan gmail anda.

silahkan klik link dibawah ini untuk melihat demo aplikasinya

demo

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.