Yuk buat Login Dengan Menggunakan Ajax di WordPress kalian...

Sunday, June 21, 2015

Yuk buat Login Dengan Menggunakan Ajax di WordPress kalian...


Ada beberapa konsep yang dapat digunakan untuk menerapkan kotak/form login pada website anda. Pilihan Pertama, anda dapat membuat sebuah halaman khusus yang disebut “Login” dan membuat template baru dengan nama page-login.php atau template-login.php. Pilihan kedua, agar form login selalu terlihat anda bisa meletakannya di atas header atau di sidebar. Pilihan ketiga adalah dengan membuat sebuah button/link yang apabila link tersebut di klik maka akan muncul kotak login yang biasanya berupa popup modal. Pilihan ketigalah yang akan kita buat kali ini, tetapi tentu saja anda dapat dengan mudah menerapkan teknik ini pada konsep Login yang lainnya yang anda inginkan.

HTML

Letakan form berikut di antara tag <body>...</body>. Tag pembuka <body>...</body> bisa anda temukan di header.php dan tag penutup </body> bisa anda temukan di footer.php. Letakan kode berikut di mana anda menginginkannya.

<form id="login" action="login" method="post">
<h1>Site Login</h1>
    <p class="status"></p>
    <label for="username">Username</label>
    <input id="username" type="text" name="username">
    <label for="password">Password</label>
    <input id="password" type="password" name="password">
    <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lupa password anda?</a>
    <input class="submit_button" type="submit" value="Login" name="submit">
    <a class="close" href="">(close)</a>
    <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>

Kita juga akan membutuhkan button login dan logout untuk memanggil form di atas. Letakan kode berikut di mana anda menginginkannya.

<?php if (is_user_logged_in()) { ?>
<a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>">Logout</a>
<?php } else { ?>
<a class="login_button" id="show_login" href="">Login</a>
<?php } ?>

CSS

Ini hanya membutuhkan sedikit CSS, jadi anda bisa memasukan kode berikut ke file style.css yang terdapat pada direktori tema wordpress anda.

form#login{
display: none;
background-color: #333;
position: fixed;
top: 200px;
padding: 40px 25px 25px 25px;
width: 350px;
z-index: 999;
left: 50%;
margin-left: -200px;
}
 
form#login p.status{
display: none;
}
 
.login_overlay{
height: 100%;
width: 100%;
background-color: #F6F6F6;
opacity: 0.9;
position: fixed;
z-index: 998;
}

Mengirim Info User Lewat Ajax


Masukan kode berikut ke dalam file functions.php anda.

function ajax_login_init(){
    wp_register_script('vendor-script', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array('jquery') ); 
    wp_register_script('ajax-login-script', get_template_directory_uri() . '/includes/js/ajax-login-script.js', array('jquery') ); 
    wp_enqueue_script('vendor-script');
    wp_enqueue_script('ajax-login-script');
 
    wp_localize_script( 'ajax-login-script', 'ajax_login_object', array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'redirecturl' => home_url(),
        'loadingmessage' => __('Mengirim info user, harap tunggu...')
    ));
 
    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
 
if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}
 
function ajax_login(){
 
    check_ajax_referer( 'ajax-login-nonce', 'security' );
 
    $info = array();
    $info['user_login'] = $_POST['username'];
    $info['user_password'] = $_POST['password'];
    $info['remember'] = true;
 
    $user_signon = wp_signon( $info, false );
    if ( is_wp_error($user_signon) ){
        echo json_encode(array('loggedin'=>false, 'message'=>__('username atau password salah.')));
    } else {
        echo json_encode(array('loggedin'=>true, 'message'=>__('Login telah sukses, mengalihkan...')));
    }
 
    die();
}

Javascript / jQuery


Buat folder baru dengan nama includes pada direktori tema wordpress anda, selanjutnya di dalam folder includes buat folder baru dengan nama js, kemudian di dalam folder js buat file baru dengan nama ajax-login-script.js. Masukan kode berikut ke dalam file ajax-login-script.js lalu simpan.

jQuery(document).ready(function($) {
 
    $('a#show_login').on('click', function(e){
        $('body').prepend('
');
        $('form#login').fadeIn(500);
        $('div.login_overlay, form#login a.close').on('click', function(){
            $('div.login_overlay').remove();
            $('form#login').hide();
        });
        e.preventDefault();
    });
 
    $('form#login').on('submit', function(e){
        $('form#login p.status').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin', 
                'username': $('form#login #username').val(), 
                'password': $('form#login #password').val(), 
                'security': $('form#login #security').val() },
            success: function(data){
                $('form#login p.status').text(data.message);
                if (data.loggedin == true){
                    document.location.href = ajax_login_object.redirecturl;
                }
            }
        });
        e.preventDefault();
    });
 
});

Selesai

0 comments :