Today we will consider creating of authorization on a site by means of Jquery and Condeigniter. Course for our problem Jquery, Jquery UI, and Codeigniter will be required us. I will not to consider their installing in this article, thanks to the Internet there is a lot of similar manuals.
Let’s begin with consideration of the template file (view)
#dialog { font-size: 70%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none; !important; cursor:pointer; position: relative; text-align: center; }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em; }
-->
<div id="user"></div>
<div id="dialog" title="Create new user">
<p id="validateTips">All form fields are required.</p>
<form>
<fieldset><label for="email">Email</label>
<input id="email" class="text ui-widget-content ui-corner-all" name="email" type="text" />
<label for="password">Password</label>
<input id="password" class="text ui-widget-content ui-corner-all" name="password" type="password" /></fieldset>
</form></div>
Here in the beginning we do a reference which will allude to the method login of controller main. Then a css code follows with a description of how it should looks like the window itself. The following description of fields that will contain the authorization form.
Let’s describe our model users_model.
class Users_model extends Model {
function Users_model() {
parent::Model();
}
function login($mail,$passw) {
$this->db->where('mail',$mail);
$this->db->where('passw',$passw);
$query = $this->db->get('users');
if($query->num_rows == 1){
return true;
}
}
}
In it I will show you a method of login, which actually receives data over a controller and then makes to request to our database. And in the case of successful finding row from the table returns a true (true).
Further we pass to our controller main.
In it we are interested in the method of login, which will take information over the user and then transmit them to the models, listen to the answer. Depending on the correctness of input of email and password is to save in session of user data or to report about error.
function login(){
$query = $this->users_model->login($_POST['email'],$_POST['password']);
if ($query){
$data = array (
'username' => $_POST['email'],
'is_log' => true
);
$this->session->set_userdata($data);
$answ = true;
}
else{
$answ = false;
}
echo $answ;
}
And in conclusion we consider the actual JavaScript code itself.
$(document).ready(function(){
var
email = $("#email"),
password = $("#password"),
allFields = $([]).add(email).add(password),
tips = $("#validateTips");
function updateTips(t) {
tips.text(t).effect("highlight",{},2000);
}
function checkLength(o,n,min,max) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass('ui-state-error');
updateTips("Length of " + n + " must be between "+min+" and "+max+".");
return false;
} else {
return true;
}
}
function checkRegexp(o,regexp,n) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass('ui-state-error');
updateTips(n);
return false;
} else {
return true;
}
}
function checkLogin(e,p) {
$.ajax({type:"POST",
url:'http://localhost/lottery/index.php/main/login/',
data:"email=" + e.val() +"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;password=" + p.val(),
dataType:"text",
cashe:false,
success:function(msg){
if(!msg){
e.addClass('ui-state-error');
p.addClass('ui-state-error');
updateTips("Login or password is incorrect");
}
else {
updateTips("Logining...");
allFields.val('').removeClass('ui-state-error');
window.location = "http://localhost/lottery/index.php/admin/";
}
}
})
}
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 'auto',
width : 320,
modal: true,
buttons: {
'Login': function() {
var bValid = true;
allFields.removeClass('ui-state-error');
bValid = bValid &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; checkLength(email,"email",6,80);
bValid = bValid &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; checkLength(password,"password",5,16);
bValid = bValid &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; checkRegexp(email,/^((([a-z]|\d|[!#\$%&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"eg. ui@jquery.com");
bValid = bValid &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");
if (bValid){
checkLogin(email,password);
}
},
'Cancel': function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$('#login').click(function(e) {
e.preventDefault();
$('#dialog').dialog('open');
})
});
Ajax login
The function of updateTips renews the state of informative panel. The function of checkLength checks made email and password on the line for desired length. The function of checkRegexp checks for accordance of the entered information regular expression. The function of checkLogin actually implements the technology of Ajax. Options on the input and the values entered password and email. Then data is sent by the method of POST to our controller of main. Then in the method of success we describe a function which takes an answer over a controller. In the case of success it does redirect on the protected page of site, otherwise a message.
I forgot to mention that for correct work should also put css styles being in the catalogue of Jquery , where your styles are located.
That would be like to complete the description of the solution of the problem. If you have any questions about using Jquery, Jquery UI and Codeigniter ask them in the comments. I will try to answer them.
At the request of Farhad spread source code example - Ajax login with Jquery and Codeigniter
#1 by Farhad on February 9, 2010 - 17:56
Quote
thanks for a nice tutorial
can you please give the source-code of this example
#2 by kirik on February 9, 2010 - 21:38
Quote
Update, now at the bottom of articles contain a link to the source
#3 by Jack on February 23, 2010 - 09:21
Quote
Could you please post the SQL?
#4 by kirik on February 24, 2010 - 20:37
Quote
Class User_model implements the SQL queries
#5 by Mr-H on May 12, 2010 - 10:53
Quote
great tuts but i prefer to deal with this by mootools
#6 by mr.sas on May 29, 2010 - 14:48
Quote
Unable to load the requested file: helpers/ckeditor_helper.php
#7 by Ashwin on May 30, 2010 - 05:16
Quote
I think @Jack was asking about the database structure.
The source code is a mess. Lot of not included models, and classes are used in it.
Anyway the tutorial is nice
#8 by Emily on June 2, 2010 - 13:39
Quote
thanks for a nice tutorial
can you please give the source-code of this example
#9 by Amy on June 5, 2010 - 10:48
Quote
Unable to load the requested file: helpers/ckeditor_helper.php