Thought I’m a hardcore java/j2ee developer by compassion however I all the time discover different programming languages. Certainly one of My favourite Net scripting language is PHP and I like PHP due to its simplicity and its many OpenSource MVC frameworks.
So I’ve determined to make use of ExtJS, Code Igniter and MySQL at present to show how we are able to use ExtJS as a Frond finish java script library to connect with Code Igniter PHP framework.
First let write CodeIgnitor view which embrace ExtJS library and show Extjs kind.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html>
<head>
<meta http–equiv=“Content material-Sort” content material=“textual content/html; charset=iso-8859-1” />
<title>ExtJS CodeIgniter Tutorial</title>
<hyperlink rel=“stylesheet” kind=“textual content/css” href=“ echo base_url(); ?>extjs/assets/css/ext-all.css”>
physique {margin-left: 20px;margin-top:20px;}
h2{font-size:14px;shade:crimson;}
.field {margin-top:10px;}
p {margin-top:5px;}
.fabold {font-family:arial;font-weight:daring;}
</head>
<physique>
<h2>ExtJS CodeIgniter MySQL Tutorial</h2>
<p>Go to echo anchor(‘http://www.techzoo.org’,‘Tech Zoo’); ?> for Extra Tutorials</p>
<div id=“output” class=“field”></div>
</physique>
</html>
|
Now create ExtJS kind which seize consumer particulars and ship to CodeIgniter Controller, and show response coming from Controller in a MessageBox.
|
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
Ext.onReady(operate () {
Ext.outline(‘org.techzoo.LoginForm’, {
lengthen: ‘Ext.kind.Panel’,
bodyPadding: 10,
bodyStyle : {
// backgroundColor: ‘#fff’
},
width : 280,
body : true,
title: ‘Login Type’,
gadgets: [{
xtype : ‘textfield’,
id : ‘identify’,
allowBlank : false,
msgTarget : ‘aspect’,
fieldLabel : ‘Identify‘
},{
xtype : ‘textfield’,
id : ‘password’,
allowBlank : false,
msgTarget : ‘aspect’,
minLength : 6,
fieldLabel : ‘Password‘,
inputType : ‘password’
}],
dockedItems: [{
xtype : ‘toolbar’,
padding : ‘2 Zero 2 0’,
dock : ‘backside’,
ui : ‘footer’,
gadgets : [{
xtype: ‘tbfill’
},{
textual content: ‘Authenticate Consumer’,
listeners : {
click on: operate(btn){
var frm = btn.up(‘kind’);
if(frm.getForm().isValid()){
var identify = frm.down(‘#identify’);
var pwd = frm.down(‘#password’);
var queryString = identify.getValue() +‘/’+pwd.getValue();
Ext.Ajax.request({
url : ‘auth/’+queryString ,
success: operate(resp) {
var response = Ext.decode(resp.responseText);
if(response.states === ‘success’) {
Ext.MessageBox.present({
title : ‘Consumer Authentication’,
msg : ‘Consumer is Authenticated.’,
buttons: Ext.MessageBox.OK,
icon : Ext.MessageBox.INFO
});
}
}
});
}
}
}
}]
}],
});
Ext.create(‘org.techzoo.LoginForm’, {renderTo : ‘output’});
});
|
The CodeIgniter controller will look just like following…
|
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
|
class Login_controller extends CI_Controller {
public operate __construct(){
father or mother::__construct();
$this->load->helper(‘url’);
$this->load->database();
}
public operate index() {
$question = $this->db->question(‘SELECT user_name FROM customers’);
$knowledge[‘data’] = ‘Complete Outcomes: ‘ . $question->num_rows();
$this->load->view(‘login/index.php’,$knowledge);
}
public operate auth($identify, $pwd) {
$question = $this->db->question(“SELECT user_name, password FROM customers
WHERE user_name = ‘$identify’ AND password = PASSWORD(‘$pwd’)”);
$this->output->set_content_type(‘utility/json’);
if($question->num_rows() >= 1){
$this->output->set_output(json_encode(array(
‘standing’ => ‘success’,
‘isAuthenticated’ => ‘true’)
));
}
else {
$this->output->set_output(json_encode(
array(‘standing’ => ‘failure’)
));
}
}
}
|
As you’ll be able to see in CodeIgniter controller’s auth() operate take username, password as parameter and return a json array as a response to view.
Following picture is a screenshot of output.
Completely happy Coding…:)
Supply techzoo.org
