Setelah pada kesempatan sebelumnya kita berhasil membuat form yang dilengkapi dengan recapthca, kali ini saya akan membahas tentang bagaimana menampilkan google recaptcha lebih dari satu dalam satu halaman.
Mungkin kita menginginkan halaman login dan registrasi berada pada satu halaman dan keduanya memerlukan recaptcha. Permasalahannya adalah bagaimana cara kita menampilkan dua recatpcha dalam halaman yang sama. Untuk menyelesaikan permasalahan tersebut kita perlu menggunakan fungsi grecaptcha.render secara manual. Jadi kita akan membuat fungsi yang menjalankan grecaptcha.render. Fungsi tersebut akan dipanggil ketika halaman diload. Kita masih menggunakan file yang kemarin, dan kita hanya akan melakukan perubahan pada controller dan view saja. Berikut ini adalah controller Welcome.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { function __construct() { parent::__construct(); $this->load->helper(array('url', 'form')); $this->load->library(array('form_validation', 'Recaptcha')); } public function index() { $data = array( // untuk login 'action' => site_url('welcome/login'), 'username' => set_value('username'), 'password' => set_value('password'), // untuk register 'action2' => site_url('welcome/register'), 'username2' => set_value('username2'), 'password2' => set_value('password2'), ); $this->load->view('welcome_message', $data); } public function login() { // validasi form $this->form_validation->set_rules('username', ' ', 'trim|required'); $this->form_validation->set_rules('password', ' ', 'trim|required'); $this->form_validation->set_error_delimiters('<div class="text-danger">', '</div>'); $recaptcha = $this->input->post('g-recaptcha-response'); $response = $this->recaptcha->verifyResponse($recaptcha); if ($this->form_validation->run() == FALSE || !isset($response['success']) || $response['success'] <> true) { $this->index(); } else { // lakukan proses validasi login disini // pada contoh ini saya anggap login berhasil dan saya hanya menampilkan pesan berhasil // tapi ini jangan di contoh ya menulis echo di controller hahahaha echo 'Berhasil Login'; } } public function register() { // validasi form $this->form_validation->set_rules('username2', ' ', 'trim|required'); $this->form_validation->set_rules('password2', ' ', 'trim|required'); $this->form_validation->set_error_delimiters('<div class="text-danger">', '</div>'); $recaptcha = $this->input->post('g-recaptcha-response'); $response = $this->recaptcha->verifyResponse($recaptcha); if ($this->form_validation->run() == FALSE || !isset($response['success']) || $response['success'] <> true) { $this->index(); } else { // lakukan proses validasi login disini // pada contoh ini saya anggap login berhasil dan saya hanya menampilkan pesan berhasil // tapi ini jangan di contoh ya menulis echo di controller hahahaha echo 'Berhasil Register'; } } } |
dan berikut ini adalah view welcome_message.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> <!doctype html> <html> <head> <title>Recaptcha - harviacode.com</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> <style> .login-box{ width: 300px; margin-top: 100px; } </style> <script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script> </head> <body> <div class="row"> <div class="col-md-2"> </div> <div class="col-md-4"> <div class="login-box"> <h3>Please Sign In</h3> <?php echo form_open($action); ?> <div class="form-group"> <label>Username</label> <?php echo form_input('username', $username, 'class="form-control"'); ?> </div> <div class="form-group"> <label>Password</label> <?php echo form_password('password', $password, 'class="form-control"'); ?> </div> <div class="form-group"> <div id="captcha1"></div> </div> <div class="form-group"> <?php echo form_submit('login', 'login', 'class="btn btn-primary"'); ?> </div> </form> </div> </div> <div class="col-md-4"> <div class="login-box"> <h3>Register</h3> <?php echo form_open($action2); ?> <div class="form-group"> <label>Username</label> <?php echo form_input('username2', $username2, 'class="form-control"'); ?> </div> <div class="form-group"> <label>Password</label> <?php echo form_password('password2', $password2, 'class="form-control"'); ?> </div> <div class="form-group"> <div id="captcha2"></div> </div> <div class="form-group"> <?php echo form_submit('register', 'register', 'class="btn btn-primary"'); ?> </div> </form> </div> </div> <div class="col-md-2"> </div> </div> <script> var CaptchaCallback = function () { grecaptcha.render('captcha1', {'sitekey': '6LdN2w0TAAAAAGlQcnEYzBFn3Mc03TlTjE2p5Zfj'}); grecaptcha.render('captcha2', {'sitekey': '6LdN2w0TAAAAAGlQcnEYzBFn3Mc03TlTjE2p5Zfj'}); }; </script> </body> </html> |
Cobalah untuk melakukan login dan register.
Video Demo
Mudah bukan, semoga bermanfaat. Terima kasih telah berkungjung ke harviacode.com, jangan lupa di share ya.
thanks mas.
akhirnya solved juga masalah ane..
mantap mas fikry.
kerenn gann thanks banget, ane nyari2 nih
terima kasih mas