Now we only need to replace some lines so that we can use the form on any “potential pages” that will use this form. First of all we need to direct this form to a specific page that will deal with the login process. Then we need to create the div’s needed in order to contain the error messages.

In order to create an AJAX call, we need to use javascript, but… as usual, we are lazy and will use jQuery.

Let’s see what we’ve done here… By using jQuery we told the page that when our login form (“.login-form”) is submitted we want javascript to take over and redirect the form to a method called ajax_login and pass it the username and password in POST variables. Also, on success, we will retrieve data in json format to work with it. For the moment, we will simply console log a message in order to see if it works or not.

Now, going to our User controller, we will create a method called ajax_login() and make it so that it will return a “hello world” message variable in json format when called.

PHP

1

2

3

4

5

6

publicfunctionajax_login()

{

$response['message']='hello';

header("content-type:application/json");

echojson_encode($response);

}

If we now return to our login form and just submit it, if we have developer window opened, we will see that we are greeted with a hello message. Cool. Everything seems ok.

“BUT…”, you may ask… “WHY NOT USE THE LOGIN METHOD WE ALREADY BUILT???”. Niiiiice… You are on the right way towards DRY philosophy. So why not use the login() method we already created in a previous tutorials? We can do this simply by adding a new POST variable to the request, let’s call it “ajax” and give it the value “1“. (Did you know that CodeIgniter also has a method called is_ajax_request()…)

So, returning to our footer view, we simply change the ajax request:

PHP

1

2

3

url:"<?phpechosite_url('user/login');?>",

type:"post",

data:{ajax:1,username:username,password:password},

Cool… now let us delete the ajax_login() method from our User controller, and take a look at the login() method in the same controller:

So what do we do here? Let us for starters change the part where the user was not logged in…:

PHP

1

2

3

4

5

6

else

{

$_SESSION['auth_message']=$this->ion_auth->errors();

$this->session->mark_as_flash('auth_message');

redirect('user/login');

}

In here, instead of redirecting to another page, we first ask if a POST variable named “ajax” was also sent with our form and if that ajax variable is set to “1“. If it is, instead of redirecting to a new page, we will send the necessary data in a json format:

PHP

1

2

3

4

5

6

7

8

9

10

11

12

13

else

{

if($this->input->post('ajax'))

{

$response['error']=$this->ion_auth->errors();

header("content-type:application/json");

echojson_encode($response);

exit;

}

$_SESSION['auth_message']=$this->ion_auth->errors();

$this->session->mark_as_flash('auth_message');

redirect('user/login');

}

Now, returning to our footer view, we take over the message and put it just before the login form.

PHP

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<script>

$('.login-form').on('submit',function(e)

{

varusername=$('#username').val();

varpassword=$('#password').val();

$.ajax({

url:"<?php echo site_url('user/login');?>",

type:'post',

data:{ajax:1,username:username,password:password},

cache:false,

success:function(json){

varerror_message=json.error;

if(typeoferror_message!=="undefined")

{

$(".login-message").html(error_message);

}

}

});

e.preventDefault();

});

</script>

To test it, we should try to login with wrong credentials.

Now what if the user successfully logged in? for this we must look again inside the login() method of our User controller:

PHP

1

2

3

4

if($this->ion_auth->login($username,$password,$remember))

{

redirect('dashboard');

}

In here we should also verify if the user logged in using ajax, and act accordingly:

PHP

1

2

3

4

5

6

7

8

9

10

11

if($this->ion_auth->login($username,$password,$remember))

{

if($this->input->post('ajax'))

{

$response['logged_in']=1;

header("content-type:application/json");

echojson_encode($response);

exit;

}

redirect('dashboard');

}

Returning to our footer, after the “if” block we also insert an else if:

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

$('.login-form').on('submit',function(e)

{

varusername=$('#username').val();

varpassword=$('#password').val();

$.ajax({

url:"<?phpechosite_url('user/login');?>",

type:'post',

data:{ajax:1,username:username,password:password},

cache:false,

success:function(json){

varerror_message=json.error;

varsuccess=json.logged_in;

if(typeof error_message!=="undefined")

{

$(".login-message").html(error_message);

}

elseif(typeof success!=="undefined"&&success=="1")

{

$(".login-message").html("You've been successfully logged in!");

$(".login-form").hide();

}

}

});

e.preventDefault();

});

As you can see, when someone logs in successfully, a message is set in the “.login-message” div and the login form is hidden. Now you may ask, what if the user is moving to another page, wouldn’t the login form appear again?

You could simply output the login form by first checking if the user is logged in or not by using the Ion Auth’s logged_in() method

PHP

1

2

3

4

5

6

7

8

9

10

<?php

if(!$this->ion_auth->logged_in())

{

echo'the form...';

}

else

{

echo'logout button';

}

?>

Now how about if we try to post an empty form? Well, then we put the ajax call in an if else block:

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

$('.login-form').on('submit',function(e)

{

varusername=$('#username').val();

varpassword=$('#password').val();

if(username.length==0||password.length==0)

{

$(".login-message").html("You need to have a username and a password to login");

}

else

{

$.ajax({

url:"<?phpechosite_url('user/login');?>",

type:'post',

data:{ajax:1,username:username,password:password},

cache:false,

success:function(json){

varerror_message=json.error;

varsuccess=json.logged_in;

console.log(json);

if(typeof error_message!=="undefined"){

$(".login-message").html(error_message);

}

elseif(typeof success!=="undefined"&&success=="1"){

$(".login-message").html("You've been successfully logged in!");

$(".login-form").hide();

}

}

});

}

e.preventDefault();

});

But this won’t help us on server side validation, so let us return to the login() method of the User controller, at the part where the form validation return false. In here we put our “ajax condition” and pass the errors to password_error and username_error:

PHP

1

2

3

4

5

6

7

8

9

10

11

12

13

if($this->form_validation->run()===FALSE)

{

if($this->input->post('ajax'))

{

$response['username_error']=form_error('username');

$response['password_error']=form_error('password');

header("content-type:application/json");

echojson_encode($response);

exit;

}

$this->load->helper('form');

$this->render('user/login_view');

}

Now returning to our footer… again… we finish the if-else block with the final else condition, by adding the error messages to their respective divs. Now let’s see the footer script again:

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

<script>

$(".login-form").on("submit",function(e)

{

varusername=$("#username").val();

varpassword=$("#password").val();

if(username.length==0||password.length==0)

{

$(".login-message").html("You need to have a username and a password to login");

Hope you liked this tutorial. Sorry for not finding the time to make tutorials more often. Maybe if I drink some coffee it should help me. But don’t worry. There is a PayPal donation button in the right sidebar if you are in a giving mood.