Codeigniter - How to reveal info after is password entered via ajax

Question

Hi,

I am working on a codeigniter site, the client has requested that the price columns in a datatable are hidden from view unless a user enters a correct password(which they will give out to clients over the phone).

The obvious way is to make the user login which then reveals a new table/page with prices included.

Can I achieve this via AJAX somehow?, i.e. a dialog box appears, the user enters a password, a request is sent and a new table loads with prices included?

I am a total rookie at Codeigniter, but I am learning everyday, please could someone point me in the right direction?

Thanks Dan

Answer 1

You could achieve it via ajax: it would work something like this:

1.) User enters password in box and clicks button

2.) Click event on button triggers the following:

var xmlhttp =  new XMLHttpRequest();

xmlhttp.open('POST', 'getPrices.php', true);


xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.readState == 200)
            putPricesIntable(xmlhttp.responseXML)
    }
}

xmlhttp.send('password=' + 'password');  

Answer 2

This question really has very little to do with a specific language or framework, but more a matter of how to best approach a problem. The problem in this case is displaying a column only if a password is entered correctly. So first you need to have a means of allowing the user of the website to enter the password. How this is done is again fairly irrelevant, it could be a form on the page, or it could be a separate page.

Once the password is submitted and found to be correct a session will need to be created for the user. This session is basically what will tell the page whether or not to display the column.

You would probably not want to solely rely on an ajax method as if the user has JavaScript disabled then they would never be able to see the column, instead only use JavaScript to enhance the usability of the website.

Answer 3

actually its not really a code igniter issue, more javascript. add a controller function in ci which you call via ajax (a javascript framework like jquery is highly recommended).

to keep it simple you could add the password to the request. the controller function checks the password and if its correct it echos the price.

the javascript code might look something like that:

$.ajax({
type: "POST",
url: 'controller/function',
data: {'password': $('#password').attr(value)},
success: function(data){
    $('#price').html(data);
},
});

Answer 4

Ajax just means your login controller will return something machine readable (json/xml) rather than html.

Your controller really just needs to set a session variable.

class Login extends Controller {

    function __construct() {
          parent::Controller();
          $this->load->model('user_m');
    }

    function json_login() {
        $user = $this->user_m->get_user($_POST['username']);
        if($user->password == md5($_POST['password'])) {
            $this->session->set_userdata('username',$user->username);
            print json_encode($this->user);
        }
        else {
            print json_encode(FALSE);
        }
        return;
    }

   function logout() {
       $this->session->destroy();
       redirect('/theloginpage');
   }
}

Assuming you are using jquery for the javascript the ajax call could work something like this:

$('#login_form').submit(function(event) {
     event.preventDefault();
     $.ajax({
         type:"POST",
         data:$(this).serialize(),
         dataType:"json",
         url:"/login/json_login",
         success: function(data) {
             if(data['username'] != null) { 
                 $(this).append('<p>You are now logged in</p>');
                 reload_table_data(); 
             }
             else if(data == flase){
                 $(this).append('<p>Fail whale, wrong username or password</p>');
             }

         }
     });

}

Now when displaying the data check if the 'username' has been set in the session. Also don't forget to create a logout method which destroys the session. You can return the table data as an html snippet and insert it straight into the DOM or json/xml loop though it.

The login form could be displayed anywhere on the page and there are plenty of libraries for jquery, dojo, prototype etc which will provide a dialogue box.