সোলায়মান হায়দার

কয়েকদিন আগে একটা ক্লায়েন্টের জন্য একটা মাল্টি-ইউজার এপ্লিকেশন বানাচ্ছিলাম। এপ্লিকেশনে সম্পুর্নভাবে ওয়ার্ডপ্রেস এডমিন প্যানেল এভয়েড করা হয়েছে। যেহেতু কাস্টম ড্যাশবোর্ড তৈরি করা হয়েছে, সেহেতু ড্যাশবোর্ডের সাথে ম্যাচ করে কাস্টম লগিন/রেজিস্ট্রেশন ইউআই বানানো অত্যন্ত জরুরি ছিলো।

আগে এই কাজগুলি লগিন/রেজিস্ট্রেশন পেজে পোষ্ট রিকুয়েস্ট দিয়ে করে ফেলতাম। কিন্তু এই এপ্লিকেশনে ডিফল্ট লগিন/রেজিস্ট্রেশন পেজগুলিকে রিস্ট্রিক্টেড করে দেয়া হয়েছে। সুতরাং, ফর্ম হ্যান্ডেলিং এর জন্য ফাংশন তৈরি করে নিয়েছি এবং সেটাকে WP_AJAX এ অথরাইজ করে দিয়েছি।

মাল্টি-ইউজার এপ্লিকেশনের জন্য AJAX ইউজ করে ওয়ার্ডপ্রেস সাইটে কাস্টম লগিন এবং রেজিস্ট্রেশন ফর্ম ডেভেলপ করতে এই স্টেপগুলি অনুসরন করুন।

AJAX কল অথরাইজেশনঃ

থিমে এই ফাংশনটি দিয়ে এজাক্স কল অথরাইজ করে দিয়েছি।

function ajax_auth_init(){	

    wp_register_script('validate-script', plugin_dir_path( __FILE__ ) . 'assets/js/jquery.validate.js', array('jquery') ); 
    wp_enqueue_script('validate-script');

    wp_register_script('ajax-auth-script', plugin_dir_path( __FILE__ ) . 'assets/js/ajax-auth-script.js', array('jquery') ); 
    wp_enqueue_script('ajax-auth-script');

    wp_localize_script( 'ajax-auth-script', 'ajax_auth_object', array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'redirecturl' => home_url(),
        'loadingmessage' => __('Sending user info, please wait...')
    ));

    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
    add_action( 'wp_ajax_nopriv_ajaxregister', 'ajax_register' );

}

ajax_auth_init() ফাংশনটি সিমপ্লি ajax_login() এবং ajax_register() ফাংশন কে এজাক্স এর মাধ্যমে এক্সিকিউট করার অথরাইজেশন দিচ্ছে। আর ফর্ম ভেলিডেশন স্ক্রিপ্টও এখান থেকে ইনকিউ করা হয়েছে।

এখন ajax_auth_init() ফাংশনটিকে ইনিশিয়েট করতে হবে। যেহেতু এটা লগিন/রেজিস্ট্রেশন ফর্ম, সেহেতু শুধুমাত্র নট লগড-ইন ভিজিটরের জন্য এটা ইনিশিয়েট করবো।

if (!is_user_logged_in()) {
    add_action('init', 'ajax_auth_init');
}

এজাক্স অথরাইজেশন, ইনিশিয়েট এবং ভেলিডেশন স্কিপ ইঙ্কিউ শেষ। এখন চলে যাবো ফ্রন্ট-এন্ড ফর্ম সেটাপে।

লগিন সিস্টেমঃ

লগিন দিয়েই শুরু করা যাক। সম্পুর্ন লগিন সেটাপের জন্য আমাদের লগিন ফর্ম, লগিন ফাংশন (ajax_login) এবং এজাক্স কল সেটাপ করতে হবে।

লগিন ফর্মঃ

এখানে ন্যাকেড এইচটিএমএল ফর্ম দেয়া হলো। আপনি ইচ্ছামতো মার্কআপ বানিয়ে নিতে পারেন।

<form id="loginform" role="form" method="post">
    <input class="form-control" id="userloginemail" placeholder="Email" type="text" name="log" required>
    <input id="userloginpwd" class="form-control" placeholder="Password" type="password" name="pwd">
    <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
    <button id="loginformsubmit" type="submit" class="btn btn-primary my-4">SIGN IN</button>
    <p id="loginformerror"></p>
</form>

খেয়াল রাখবেন wp_nonce_field টা যেনো মিসিং না হয়। ফর্ম সাবমিশন সিকিউরিটি চেকিং এর জন্য এটা অবশ্যই ব্যভার করতে হবে।

লগিন ফাংশনঃ

অথরাইজেশন ফাংশনে আমরা ajax_login() কে এজাক্স থেকে এক্সিকিউটেবল করেছিলাম, এখন ফাংশনটা লিখবো। সিকিউরিটি চেকিং, এরর হ্যান্ডেলিং, এবং ফাইনালি লগিন, সবকিছুই এই ফাংশন থেকেই হবে।

function ajax_login() {

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-login-nonce', 'security' );

    //Nonce is checked, get the POST data and sign user on
    $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'=>__( 'Wrong username or password!' )));
    } else {
        echo json_encode( array( 'loggedin'=>true, 'message'=>__('Login successful, redirecting...' )));
    }

    die();

}

যদি POST করা ইউজার নেম ও পাসওয়ার্ড সঠিক হয়, এটি ইউজারকে লগিন করাবে এবং এজাক্স রেস্পন্সে লগড-ইন মেসেজ রিটার্ন করবে, যেটা চেক করে আমরা ফ্রন্ট-এন্ডে রিডাইরেক্ট ইনিশিয়েট করবো। আর কোন এরর থাকলে সেটা এজাক্স রেস্পন্সে রিটার্ন করবে এবং সেটা আমরা ফ্রন্ট-এন্ডে শো করাবো।

AJAX কলঃ

লগিন সিস্টেমের শেষ ধাপ, এজাক্স কল এবং রিটার্ন হওয়া ডাটা হ্যান্ডেল করা।

$("#loginform").submit(function(e) {

    e.preventDefault();

    var form = $(this);
    $("#loginformsubmit").text("Signing In...");
    $("#loginformerror").html('');

    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: ajax_auth_object.ajaxurl,
        data: { 
            'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
            'username': $('#userloginemail').val(), 
            'password': $('#userloginpwd').val(), 
            'security': $('#security').val() 
        },

        success: function(data){
            $("#loginformsubmit").text("Sign In");
            if (data.loggedin == true){
                $("#loginformerror").html(data.message);
                $("#loginformsubmit").text("Redirecting...");
                document.location.href = "<?php echo home_url('/');?>";
            } else {
                $("#loginformerror").html(data.message);
            }
        }
    });

});

নোটঃ জেকুয়েরির সাহায্য নেয়া হয়েছে এখানে, সো জেকুয়েরি লোড হওয়ার পর কোডটা এক্সিকিউট হতে হবে।

এখানে ফর্ম থেকে ইউজারনেম এবং পাসওয়ার্ড নিয়ে wp_ajax এর মাধ্যমে ajax_login() ফাংশনে পাঠানো হয়েছে। ফাংশনে ডাটা প্রসেস হওয়ার পর রিটার্ন হওয়া ডাটাতে যদি দেখা যায় যে সব ঠিক আছে এবং লগিন হয়েছে তাহলে এটি ইউজারকে হোমপেজে রিডাইরেক্ট করে দিবে। আর যদি কোন এরর থাকে (যেমন ভুল পাসওয়ার্ড), তাহলে ফর্মে সেটি শো করবে।

রেজিস্ট্রেশন সিস্টেমঃ

রেজিস্ট্রেশন সিস্টেমেও অলমোস্ট সেম প্রসেস। ফর্ম, এজাক্স কল, রেজিস্ট্রেশন ফাংশন এবং এক্সট্রা হিসেবে অটো লগিন ফাংশন।

রেজিস্ট্রেশন ফর্মঃ

লগিন ফর্মের মতো এখানেও ন্যাকেড এইচটিএমএল ফর্ম দেয়া হলো, আপনার প্রয়োজনমতো সাজিয়ে নিবেন।

<form id="userregisterform" role="form" action="/wp-login.php" method="post">
    <input class="form-control" placeholder="First Name" type="text" name="fname" id="userfname">
    <input class="form-control" placeholder="Last Name" type="text" name="lname" id="userlname">
    <input class="form-control" placeholder="Email" type="text" name="email" id="useremail">
    <input class="form-control" placeholder="Password" type="password" name="pwd" id="userpwd">
    <?php wp_nonce_field('ajax-register-nonce', 'signonsecurity'); ?>  
    <button id="registerformsubmit" type="submit" class="btn btn-primary my-4">REGISTER</button>
    <div id="loginformerror"></div>
 </form>

এখানেও সিকিউরিটি নিশ্চিত করতে wp_nonce_field ফিল্ডটা রিকুয়ার্ড।

রেজিস্ট্রেশন ফাংশনঃ

এখন এজাক্স কল প্রসেস করার জন্য ajax_register() ফাংশনটি লিখতে হবে যেটি আমরা প্রথমেই এজাক্স এক্সিকিউটেবল করে দিয়েছিলাম।

function ajax_register(){

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-register-nonce', 'security' );

    // Nonce is checked, get the POST data and sign user on
    $info = array();
    $info['user_nicename'] = sanitize_text_field( $_POST['fname']);
    $info['nickname'] = sanitize_text_field( $_POST['fname']);
    $info['first_name'] = sanitize_text_field( $_POST['fname']);
    $info['last_name'] = sanitize_text_field( $_POST['lname']);
    $info['user_login'] = sanitize_email( $_POST['email']);
    $info['user_pass'] = sanitize_text_field($_POST['password']);
    $info['user_email'] = sanitize_email( $_POST['email']);

    // Register the user
    $user_register = wp_insert_user( $info );

    if ( is_wp_error($user_register) ){	

        $error  = $user_register->get_error_codes()	;

        if(in_array('empty_user_login', $error))

            echo json_encode(array('loggedin'=>false, 'message'=>__($user_register->get_error_message('empty_user_login'))));

        elseif(in_array('existing_user_login',$error))

            echo json_encode(array('loggedin'=>false, 'message'=>__('This username is already registered.')));

        elseif(in_array('existing_user_email',$error))

        echo json_encode(array('loggedin'=>false, 'message'=>__('This email address is already registered.')));

    } else {

    auth_user_login($info['user_login'], $info['user_pass'], 'Registration');       

    }

    die();

}

ফাংশনটি POST করা সব ডাটা চেক করে যদি কোন এরর পায় তাহলে সেটি রিটার্ন করবে, এবং রিটার্ন হওয়া ডাটা চেক করে ফর্মে এরর শো করাবো।

আর যদি সব ঠিক থাকে, তাহলে ইউজার ক্রিয়েট করে ইউজারকে অটো লগিন করার জন্য অটো লগিন ফাংশন (auth_user_login) কল করবে। যদি আপনি অটো লগিন না চান, তাহলে অটো লগিন ফাংশন কল না করে ইউজার ক্রিয়েশন সাক্কেসফুল ডেটা রিটারন করতে পারেন। সেক্ষেত্রে আপনাকে এজাক্স রিটার্ন ডাটা হ্যান্ডলিংটাও কাস্টমাইজ করতে হবে। এখানে আমি অটো লগিনেই এগিয়ে যাচ্ছি।

অটো লগিন ফাংশনঃ

ajax_register() ইউজার রেজিস্ট্রেশন সফল হওয়ার পর নতুন ইউজারকে অটোম্যাটিক লগিন করাতে auth_user_login() ফাংশনটি লিখতে হবে।

function auth_user_login($user_login, $password, $login){

	$info = array();
    $info['user_login'] = $user_login;
    $info['user_password'] = $password;
    $info['remember'] = true;


	$user_signon = wp_signon( $info, '' ); // From false to '' since v4.9

    if ( is_wp_error($user_signon) ){

		echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.')));

    } else {

		wp_set_current_user($user_signon->ID); 
        echo json_encode(array('loggedin'=>true, 'message'=>__($login.' successful, redirecting...')));

    }

	die();

}

এখানে এরর হওয়ার সম্ভাবনা নেই বললেই চলে কারন ইউজার ক্রিয়েট করা হয়েছে যেই ডাটা দিয়ে, লগিনও করা হচ্ছে সেম ডাটা দিয়েই। তারপরও অভার শিউর হওয়ার জন্য এরর চেকিং রাখা হয়েছে।

কোন এরর না পেলে এটি ইউজারকে লগিন করিয়ে দিবে এবং লগিন ফাংশনে যেই লগিন সফল মেসেজ রিটার্ন করা হচ্ছে, সেই সেম মেসেজ রিটার্ন করবে।

AJAX কলঃ

রেজিস্ট্রেশন ফর্মের সকল ব্যাক-এন্ড ফাংশনালিটিস শেষ, এখন সময় এসেছে ফ্রন-এন্ডে হাত দেয়ার এবং এজাক্স কল করার।

$("#userregisterform").submit(function(e) {
    e.preventDefault();

    var form = $(this);
    var url = form.attr('action');
    $("#registerformsubmit").text("Signing In...");
    $("#loginformerror").html('');
    email = $('#useremail').val(), 
    fname = $('#userfname').val(), 
    lname = $('#userlname').val(), 
    password = $('#userpwd').val(), 
    security = $('#signonsecurity').val()

    $.ajax({

        type: 'POST',
        dataType: 'json',
        url: ajax_auth_object.ajaxurl,
        data: { 
            'action': 'ajaxregister', //calls wp_ajax_nopriv_ajaxlogin
            'email': email, 
            'fname': fname, 
            'lname': lname, 
            'password': password, 
            'security': security
        },

        success: function(data){
            $("#registerformsubmit").text("Register");
            if (data.loggedin == true){
                $("#loginformerror").html(data.message);
                $("#registerformsubmit").text("Redirecting...");
                document.location.href = "<?php echo home_url('/');?>";
            } else {
                $("#loginformerror").html(data.message);
            }
        }

    });
});

লগিন ফর্মের মতোই, এখানেও ফর্ম থেকে ইউজারের ডাটা নিয়ে ajax_register() এ পাঠানো হচ্ছে প্রসেস করার জন্য। ajax_register() যদি এরর রিটার্ন করে (যেমন ইউজার অলরেডি এক্সিস্ট), তাহলে ফর্মে এরর দেখানো হবে। আর যদি সব ঠিক থাকে এবং auth_user_login() এর মাধ্যমে লগড-ইন রিটার্ন হয়, তাহলে সাক্কেস মেসেজ দেখিয়ে ইউজারকে হোমপেজে রিডাইরেক্ট করে দিবে।

চেস্টা করেছি সহজভাবে বুঝানোর জন্য। যদি বুঝতে কোন সমস্যা হয়, নিচে কমেন্ট সেকশন ২৪ ঘন্টা খোলা আছে।

পোস্টের মন্তব্যগুলি

কমেন্ট লোড হচ্ছে...

এই ধরনের আরও পোস্ট

কিভাবে ওয়ার্ডপ্রেস এর ইমোজি ফিচার বন্ধ করবেন

৮ বছর আগে পোস্ট করা হয়েছে

কিভাবে ওয়ার্ডপ্রেস এর ইমোজি ফিচার বন্ধ করবেন

ওয়ার্ডপ্রেস প্রত্যেক আপডেটেই কিছু না কিছু নতুন ফিচার এনে থাকে। বেশিরভাগ ফিচারই প্রয়জনিয় হলেও, কিছু কিছু ফিচার কারো জন্যে বিরক্তির কারণও। সেরকমই এক ফিচার হল টুইটার ওপেন সোর্স এর ইমোজির কোর সাপোর্ট। ওয়ার্ডপ্রেস ৪.২, যার কোড নেমঃ Powell তে এই ফিচারটি যোগ করা হয়েছে। হ্যাঁ, এটা অনেকের জন্যই ভালো। কিন্তু আমরা কয় জনই বা পোস্টের মধ্যে ইমোশন আইকন ব্যবহার…

ওয়ার্ডপ্রেস সাইট এ থিম এবং প্লাগিন ইন্সটল

৯ বছর আগে পোস্ট করা হয়েছে

ওয়ার্ডপ্রেস সাইট এ থিম এবং প্লাগিন ইন্সটল

সবাইকে স্বাগতম জানাচ্ছি আজকের ওয়ার্ডপ্রেস টিউটোরিয়ালে। আজকে আমরা শিখবো কিভাবে ওয়ার্ডপ্রেস সাইটে থিম এবং প্লাগিন ইন্সটল করা যায়। তার আগে থিম এবং প্লাগিন সম্পর্কে কিছু আলোচনা করে নিব। ওয়ার্ডপ্রেস থিম কি? ওয়ার্ডপ্রেস সাইটের প্রাণ হল থিম। একটি ওয়ার্ডপ্রেস সাইটে কি কি ফিচার থাকবে এবং ডিজাইনটা কেমন হবে টা নির্ভর করে থিমের উপর। ওয়ার্ডপ্রেস থিম একটি…

রিলিজ হল ওয়ার্ডপ্রেস ৪.০ – এখুনি দেখে নিন নতুন কি কি আছে এই ভার্শনে

৯ বছর আগে পোস্ট করা হয়েছে

রিলিজ হল ওয়ার্ডপ্রেস ৪.০ – এখুনি দেখে নিন নতুন কি কি আছে এই ভার্শনে

আজকে রিলিজ হল ওয়ার্ডপ্রেস এর নতুন ভার্শন ৪.০ । যদিও আগে এই ভার্শনের বেটা ভার্শন বের হয়েছিল, কিন্তু আজকে রিলিজ হল পাবলিক ভার্শন। যা সবার জন্য ব্যবহারের জন্য উন্মুক্ত। দারুন কিছু ফিচার যুক্ত হয়েছে নতুন এই ভার্শনে। ওয়ার্ডপ্রেসের এই ভার্শনের কোড নেম হলঃ “Benny”. চলুন দেখে নেয়া যাক এই ভার্শনের নতুন কিছু ফিচারগুলি… মিডিয়া লাইব্রেরী…

কিভাবে ওয়ার্ডপ্রেস পোষ্ট রিভিশন বন্ধ করবেন?

৯ বছর আগে পোস্ট করা হয়েছে

কিভাবে ওয়ার্ডপ্রেস পোষ্ট রিভিশন বন্ধ করবেন?

ওয়ার্ডপ্রেস এর একটি দারুন ফিচার হল পোষ্ট রিভিশন। এটির মাধ্যমে আপনি পোষ্ট এডিট করার পরও পূর্বের পোষ্টে ফিরে যেতে পারবেন, অনেকটা “Ctrl+Z” এর মত। অনেকেই মনে করেন যেহেতু এটি একটি পোষ্টের অনেকগুল ভারশন সেভ করে রাখে, সেহেতু এটি সাইট স্লো বা ধীরগতির করে ফেলবে। ওয়ার্ডপ্রেস এর মতো জনপ্রিয় একটা সিএমএস এ এরকম একটা মারাত্মক ভুল…

কোনও প্লাগিন ছাড়াই ওয়ার্ডপ্রেস সাইটের কমেন্ট স্প্যাম বন্ধ করুন

৮ বছর আগে পোস্ট করা হয়েছে

কোনও প্লাগিন ছাড়াই ওয়ার্ডপ্রেস সাইটের কমেন্ট স্প্যাম বন্ধ করুন

স্প্যাম কমেন্ট বন্ধ করার জন্য ইন্টারনেটে এবং ওয়ার্ডপ্রেস ডাইরেক্টরিতে অনেক প্লাগিন আছে। আপনি সেই প্লাগিনগুলি ব্যবহার করে সহজেই স্প্যাম কমেন্ট বন্ধ করতে পারবেন। কিন্তু আপনার যদি কোডিং সম্পর্কে সামান্য ধারনা থাকে, তাহলে সহজেই এই কাজটি করতে পারবেন কোনও প্লাগিন ইন্সটল করা ছাড়াই। সাধারণত স্প্যামাররা কমেন্ট বট এর মাধ্যমে কোনও সাইটের কমেন্ট ফর্ম পূরণ করে কমেন্ট…

দুর্বল ইন্টারনেট কানেকশন

আপনার ইন্টারনেটের ধীরগতির জন্য পেজটি লোড হতে কিছুক্ষণ বেশী সময় লাগছে।