Halaman login adalah sebuah keharusan dalam membuat sebuah website yang memiliki unsur membership ataupun sebagainya, tanpa adanya hal itu maka kita tidak mengetahui apakah website tersebut adalah website komunitas ataupun tidak.

Dalam menggunakan Wordpress kalian bisa dapat memanfaatkannya sebagai sosial media seperti menggunakan plugins BuddyPress, namun bagaimana jika kalian hanya ingin menggunakan halaman loginnya saja untuk masuk ke dalam Wordpress.

Kalian tak perlu lagi menggunakan plugins jika telah menemukan artikel ini, sebelumnya artikel ini juga digunakan untuk membuat halaman login pada Kolombaru. namun karena tutorial ini bersifat free dan didapatkan dari beberapa sumber maka kali ini saya akan memberikannya kepada kalian dan berikut adalah langkah-langkahnya :

1. Buat file template-logreg.php pada direktori tema

Kenapa file ini harus dibuat ?, karena untuk membuat halaman baru pada wordpress yang isinya adalah halaman login dan pada pembuatannya file ini tidak terdapat code <?php the_content ();?> atau sejenisnya didalamnya.

Apakah nama file harus sama ?, jika kalian ingin membuatnya berbeda maka kalian bisa mengubahnya namun dengan prefix yang sama yaitu template-bebas.php namun jika ingin sama seperti yang ada di artikel ini juga tidak ada masalah selagi mengikuti step by step. untuk informasi lebih lanjut tentang pembuatan file template halaman, kalian bisa melihatnya pada halaman Codex Wordpress.

2. Membuat session untuk member yang belum login dan sudah login

Dalam pembuatan halaman login pasti ada saja pertanyaan, kenapa saya masih melihat halaman login padahal saya sudah login ke dalam Wordpress ?. maka dari itu pastikan beberapa code dalam membuat template-logreg.php sudah sama atau agak mirip seperti contoh dibawah.

<?php  
/* 
Template Name: Login Page
*/


?>
<?php the_post()?>
<?php get_header()?>




<?php get_footer() ?>

Kenapa tidak ada <?php the_content();?> ?, alasannya adalah nanti kita tidak akan mengisi konten pada saat membuat halaman Login pada WP-Admin jadi kita hanya cukup melakukan setting pada judul halaman dan permanentlink saja.

Setelah selesai maka mulailah input codenya untuk membuat session di halaman login yang kurang lebih codenya seperti ini :

<?php
if ( is_user_logged_in() ){
?>
/* 
Kondisi Saat Login
*/
<?php }else {?>
/* 
Kondisi Saat Tidak Login
*/
<?php }?>

3. Masukkan code function untuk membuat perintah login

Untuk membuat halaman ini berfungsi kalian cukup untuk membuat menyalin apa yang ada di artikel ini, letakkan code dibawah ini sesudah <?php get_header()?>

    <?php
        global $wpdb;
        
        $err = '';
        $success = '';
        
        if(isset($_POST['task']) && $_POST['task'] == 'login' )
        {
            //We shall SQL escape all inputs to avoid sql injection.
            $username = $wpdb->escape($_POST['log']);
            $password = $wpdb->escape($_POST['pwd']);
            $remember = $wpdb->escape($_POST['remember']);
            
            
            if( $username == "" || $password == "" ) {
                $err = 'Please don't leave the required field.';
            } else {
                $user_data = array();
                $user_data['user_login'] = $username;
                $user_data['user_password'] = $password;
                $user_data['remember'] = $remember;  
                $user = wp_signon( $user_data, false );
                
                if ( is_wp_error($user) ) {
                    $err = $user->get_error_message();
                    echo '<h3 class="heading"><a href="/login-register">Ada kesalahan dalam menginput data</a></h3>
                    <p>Silahkan kembali ke halaman <a href="/login-register">masuk</a> untuk memasukkan kembali username dan password atau mendaftar menjadi anggota baru. Jika ini bukan karena kesalahan anda silahkan Kontak Administrator untuk informasi lebih lanjut.</p> ';
                    exit();
                } else {
                    wp_set_current_user( $user->ID, $username );
                    do_action('set_current_user');
                    
                    echo '<meta http-equiv="refresh" content="0; url='. get_bloginfo('url') .'">
                    <h3 class="heading">Anda telah berhasil login, mohon tunggu sebentar</h3>';  
                    exit(); 
                }
            }
        }
    ?>
    <?php 
        if( !empty($sucess) ) 
            echo $sucess;
        if( !empty($err) )
            echo '<p class="error">'.$err.'';
    ?>

Code yang boleh dirubah :

echo '<h3 class="heading"><a href="/login-register">Ada kesalahan dalam menginput data</a></h3><p>Silahkan kembali ke halaman <a href="/login-register">masuk</a> untuk memasukkan kembali username dan password atau mendaftar menjadi anggota baru. Jika ini bukan karena kesalahan anda silahkan Kontak Administrator untuk informasi lebih lanjut.</p> ';
echo '<meta http-equiv="refresh" content="0; url='. get_bloginfo('url') .'"><h3 class="heading">Anda telah berhasil login, mohon tunggu sebentar</h3>';
  <?php 
        if( !empty($sucess) ) 
            echo $sucess;
        if( !empty($err) )
            echo '<p class="error">'.$err.'';
    ?>

Sisanya tidak disarankan, namun jika terdapat celah keamanan dan anda bisa menambalnya maka anda boleh melakukan perubahan pada seluruh code.

4. Membuat tampilan form HTML

Pada tahap finalisasi kalian diharuskan untuk membuat form HTML ya meskipun menggunakan PHP juga bisa, namun jika kalian menggunakan cara ini mungkin sangat saya haruskan. namun sebelumnya anda harus mengetahui bahwa di halaman ini ada code sessionnya, jadi jika kalian ingin form tersebut terlihat oleh pengguna yang sudah login maka ikutilah langkah-langkah dibawah ini :

Pertama replace code

/* 
Kondisi Saat Login
*/

Dengan :

<h3 class="heading">Upss, anda sudah login.</h3>
    <p>Anda saat ini telah melakukan login di situs ini, silahkan logout terlebih dahulu jika ingin login dengan akun yang berbeda.</p>

Pada langkah pertama kalian dapat mengkustomisasi seluruh HTML dan tidak ada konsekuensi apapun kecuali kalian tidak mengikuti langkah ini.

Kedua replace code

/* 
Kondisi Saat Tidak Login
*/

Dengan

Masukkan Username dan Password

Email

Password

Remember Me

Pada langkah kedua kalian dapat mengkustomisasi seluruh HTML dan tidak ada konsekuensi apapun dengan catatan input type pada code diatas tidak berubah karena dapat berpengaruh dengan apa yang akan dikirim ke server.

5. Buat halaman kosong dengan file template yang kita buat

Pada tahap akhir kalian hanya cukup membuat halaman kosong dengan judul dan permanen link yang sudah kita tentukan sendiri, namun pastikan juga anda sudah menggunakan file template yang dibuat tadi untuk dijadikan halaman login sehingga hasilnya akan sangat memuaskan saat dipublish.

Screenshot (30)

Untuk keseluruhan codenya kurang lebih ya seperti ini :

<?php  
/* 
Template Name: Login Page
*/


?>
<?php the_post()?>
<?php get_header()?>
    <?php
        global $wpdb;
        
        $err = '';
        $success = '';
        
        if(isset($_POST['task']) && $_POST['task'] == 'login' )
        {
            //We shall SQL escape all inputs to avoid sql injection.
            $username = $wpdb->escape($_POST['log']);
            $password = $wpdb->escape($_POST['pwd']);
            $remember = $wpdb->escape($_POST['remember']);
            
            
            if( $username == "" || $password == "" ) {
                $err = 'Please don't leave the required field.';
            } else {
                $user_data = array();
                $user_data['user_login'] = $username;
                $user_data['user_password'] = $password;
                $user_data['remember'] = $remember;  
                $user = wp_signon( $user_data, false );
                
                if ( is_wp_error($user) ) {
                    $err = $user->get_error_message();
                    echo '<h3 class="heading"><a href="/login-register">Ada kesalahan dalam menginput data</a></h3>
                    <p>Silahkan kembali ke halaman <a href="/login-register">masuk</a> untuk memasukkan kembali username dan password atau mendaftar menjadi anggota baru. Jika ini bukan karena kesalahan anda silahkan Kontak Administrator untuk informasi lebih lanjut.</p> ';
                    exit();
                } else {
                    wp_set_current_user( $user->ID, $username );
                    do_action('set_current_user');
                    
                    echo '<meta http-equiv="refresh" content="0; url='. get_bloginfo('url') .'">
                    <h3 class="heading">Anda telah berhasil login, mohon tunggu sebentar</h3>';  
                    exit(); 
                }
            }
        }
    ?>
    <?php 
        if( !empty($sucess) ) 
            echo $sucess;
        if( !empty($err) )
            echo '<p class="error">'.$err.'';
    ?>

Upss, anda sudah login.

Anda saat ini telah melakukan login di situs Kolombaru, silahkan logout terlebih dahulu jika ingin login dengan akun yang berbeda.

Masukkan Username dan Password

Email

Password

Remember Me

Atau menggunakan akun sosial media

Note : Jika kalian menggunakan akun sosial media, kalian diharuskan untuk login setiap saat menggunakan akun sosial media. karena akun yang mendaftar menggunakan akun sosial media akan dibuat otomatis dan tidak akan diberikan passwordnya. jika kalian ingin mendapatkan akun tersebut dengan password silahkan hubungi Administrator.

</div> <?php }?> <?php get_footer() ?>

Bagaimana apakah artikel ini bisa digunakan untuk bahan percobaan ?, jika kalian ingin bertanya mengenai hal ini kalian bisa langsung komentar pada artikel ini dan jangan lupa dirating ya.