Learn ExtJS, CodeIgniter and MySQL integration now - Internet & Computer Tricks and Tips (Gadgets and Tech Guru)

Breaking

Recent Comment

test banner

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

Friday, October 25, 2013

Home Unlabelled Learn ExtJS, CodeIgniter and MySQL integration now

Learn ExtJS, CodeIgniter and MySQL integration now

Thought I am a hardcore java/j2ee developer by compassion but I always explore other programming languages. One of My favorite Web scripting language is PHP and I like PHP because of its simplicity and its many OpenSource MVC frameworks.

So I have decided to use ExtJS, Code Igniter and MySQL today to demonstrate how we can use ExtJS as a Frond end java script library to connect to Code Igniter PHP framework.
First let write CodeIgnitor view which include ExtJS library and display Extjs form.
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-Type" content="text/html; charset=iso-8859-1" />
<title>ExtJS CodeIgniter Tutorial</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>extjs/resources/css/ext-all.css">
<script type="text/javascript" src="<?php echo base_url(); ?>extjs/ext-all-dev.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/scripts/Login.js"></script>
<style>
body {margin-left: 20px;margin-top:20px;}
h2{font-size:14px;color:red;}
.box {margin-top:10px;}
p {margin-top:5px;}
.fabold {font-family:arial;font-weight:bold;}
</style>
</head>
<body>
  <h2>ExtJS CodeIgniter MySQL Tutorial</h2>
  <p>Visit <?php echo anchor('http://www.techzoo.org','Tech Zoo'); ?> for More Tutorials</p>
  <div id="output" class="box"></div>
</body>
</html>
Now create ExtJS form which capture user details and send to CodeIgniter Controller, and display 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(function () {
  Ext.define('org.techzoo.LoginForm', {
    extend  : 'Ext.form.Panel',
    bodyPadding: 10,
    bodyStyle : {
     // backgroundColor: '#fff'
    },
    width : 280,
    frame : true,
    title : 'Login Form',
      items : [{
      xtype       : 'textfield',
      id          : 'name',
      allowBlank  : false,
      msgTarget   : 'side',
      fieldLabel  : '<span class="fabold">Name</span>'
    },{
      xtype       : 'textfield',
      id          : 'password',
      allowBlank  : false,
      msgTarget   : 'side',
      minLength   : 6,
      fieldLabel  : '<span class="fabold">Password</span>',
      inputType   : 'password'
    }],
    dockedItems: [{
      xtype   : 'toolbar',
      padding : '2 0 2 0',
      dock    : 'bottom',
      ui      : 'footer',
      items   : [{
        xtype: 'tbfill'
      },{
        text: 'Authenticate User',
        listeners : {
          click: function(btn){
            var frm = btn.up('form');
            if(frm.getForm().isValid()){
              var name = frm.down('#name');
              var pwd = frm.down('#password');
              var queryString = name.getValue() +'/'+pwd.getValue();
              Ext.Ajax.request({
                url   : 'auth/'+queryString ,
                success: function(resp) {
                  var response = Ext.decode(resp.responseText);
                  if(response.states === 'success') {
                    Ext.MessageBox.show({
                      title : 'User Authentication',
                      msg   : 'User is Authenticated.',
                      buttons: Ext.MessageBox.OK,
                      icon  : Ext.MessageBox.INFO
                    });
                  }
                }
              });
            }
          }
        }
      }]
    }],
  });
  Ext.create('org.techzoo.LoginForm', {renderTo : 'output'});
});
The CodeIgniter controller will look similar to 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 function __construct(){
    parent::__construct();
    $this->load->helper('url');
    $this->load->database();
  }
   
  public function index() {
    $query = $this->db->query('SELECT user_name FROM users');
    $data['records'] = 'Total Results: ' . $query->num_rows(); 
    $this->load->view('login/index.php',$data);
  }
 
  public function auth($name, $pwd) {
    $query = $this->db->query("SELECT user_name, password FROM users
      WHERE user_name = '$name' AND password = PASSWORD('$pwd')");
    $this->output->set_content_type('application/json');
    if($query->num_rows() >= 1){
      $this->output->set_output(json_encode(array(
        'status' => 'success',
        'isAuthenticated' => 'true')
      ));
    }
    else {
      $this->output->set_output(json_encode(
        array('status' => 'failure')
      ));
    }
  }
}
As you can see in CodeIgniter controller’s auth() function take username, password as parameter and return a json array as a response to view.
Following image is a screenshot of output.

Happy Coding…:)
Author Image

About Ankit Sharma

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Post Top Ad

Responsive Ads Here

Author Details

Templatesyard is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates which are professionally designed and perfectlly seo optimized to deliver best result for your blog.