Code Igniter ExtJs Integration - 3

So far, we’ve been prepare for the first steps how to code igniter and extjs integration (you could read the detail at: Code Igniter ExtJs Integration part 2). On this article, I’ll show you more about managing data using code igniter and extjs. Before starting make our code, there are many configuration settings that we should do, here’s the to do list :

  1. Make sure for database connection setting.
    • Edit configuration file at : C:\xampp\htdocs\ci-ext\system\application\config\database.php
    • Provide the variable that match to your database settings
  2. Make sure to load all libraries that we need it
    • Edit configuration file at : C:\xampp\htdocs\ci-ext\system\application\config\autoload.php
    • Make sure that you already set the variable : $autoload['helper'] = array(’url’);
    • Make sure that you already set the variable : $autoload['libraries'] = array(’session’, ‘jsonci’);
    • Url helper will be very helpful for our template coding
    • Session library will be very helpful for managing user authentication (we will not discuss more about it, please send me a message when you have a question about it)
    • JsonCi library will be very helpful for managing JSON output to communicate between client and server. Actually, this library is code igniter plugin, you could download it [here], then you should place it in : C:\xampp\htdocs\ci-ext\system\libraries
  3. We’ll create 3 files, that will be described below :
    • file M_activity.php located at : C:\xampp\htdocs\ci-ext\system\application\models
    • file V_activity.php located at : C:\xampp\htdocs\ci-ext\system\application\views\main
    • file C_activity.php located at : C:\xampp\htdocs\ci-ext\system\application\controllers
  4. We’ll create a table named “activity”, that will stored our data. You could download the SQL code [here] and create your database on your server.

Since you already done for all of the settings above, I’ll describe the features offered from this tutorial, here’s the detail features :

  1. Implementation for management data that well known as CRUD (Create Read Update Delete) using code igniter and extjs.
  2. Covered more about extjs grid component using grouping management, extjs form component, extjs form styling, extjs insert and update state form using window modal.
  3. Offered more user flexibility and really nice User Interface application
  4. More detail about MVC structured provides by code igniter


Read more…

Share/Save/Bookmark

ExtJs Form Layout using DOM Injection

web form template

That’s just a simple web form template (mostly generated by HTML code). We could render it using HTML input tag and create some column using HTML table tag for simple and fastest way. But maybe you wanna play with some of style sheet code using CSS. Since you’ll create web form template using CSS (well known as tabless method), you should know more about CSS styling concept that’s very sensitive rendering style depends on the browser (cross browser standard rendering issue). You could learn some of the CSS material in CSSPlay.co.uk or W3Schools.

On this article, we’ll explain about how to create the above web form template picture using ExtJs version 2.1. The first step, we’ll just create a simple HTML template that will be looks like this:

<html>
<head>
    <title>Dynamic Web Forms built with ExtJs 2.1</title>

    <!--
        Include All the ExtJs Library Resource HERE
        (CSS and Javascript files)
    -->
</head>
<body>

    <h1>Web Forms built with ExtJs 2.1 - DOM Injection</h1>
    <div id="elform_columnstyle"
      style="float: left; border: 1px solid; padding: 10px; margin: 5px;">
    </div>
    <div id="elform_injectstyle"
      style="float: left; border: 1px solid; padding: 10px; margin: 5px;">
    </div>

</body>
</html>

We’ll create javascript code based on ExtJs library to implement the example web form template looks like in the picture above. I’ll show you how to create the example web form using Column Layout method and using DOM Injection method.


Read more…

Share/Save/Bookmark

About Code Igniter ExtJs Integration - 2

On this article, it will show you step by step how to integrate CodeIgniter PHP Framework and ExtJs Javascript library. We’ll start it for CodeIgniter configuration before we can integrate it with ExtJs. Below is the CodeIgniter configuration steps :

  1. Create directory on your web root directory, we named it as “ci-ext” (Assume that your web root directory is in C:\xampp\htdocs that’s why your directory path should be C:\xampp\htdocs\ci-ext).
  2. We assume that you already have the latest CodeIgniter distribution file (We’ll use CodeIgniter version 1.6.3 for now). You can download it here: CodeIgniter Download
  3. Edit file that located at C:\xampp\htdocs\ci-ext\system\application\config\config.php
    • Make sure that base_url configuration is appropriate depends on your web server settings.
    • Assume that we just do it in local server, that’s why you just write the configuration as follow :
      • $config['base_url'] = “http://localhost/ci-ext/”;
    • For the other configuration options, you could read the manual entries guide in the code.
  4. Whoolaa… Your CodeIgniter instalation was successful (You’ll see the “Welcome message”)
  5. Maybe you could share what’s your experience about code igniter installation, it’s pretty easier right?

Before we start to do some coding, we’ll do some instructions here :

  1. Actually the default page was routed to the “welcome” controller, since the routes.php (located in C:\xampp\htdocs\ci-ext\system\application\config\routes.php) configured as that way.
  2. We’ll create new configuration route to “C_login” controller. That’s why we should edit the route configuration value to “C_login“, besides that we also should create 3 files that will describe as follow :
    • file M_login.php located at : C:\xampp\htdocs\ci-ext\system\application\models
    • file V_login.php located at : C:\xampp\htdocs\ci-ext\system\application\views
    • file C_login.php located at : C:\xampp\htdocs\ci-ext\system\application\controllers
  3. Let’s start these challenging part…

Here’s the detail code for every single file describe above :
Read more…

Share/Save/Bookmark

About Code Igniter ExtJs Integration - 1

On this article, we’ll discuss about how to integrate CodeIgniter PHP framework and ExtJs, that’s really such a lot question about it, then i made it as the programming categories for faqlist. have a nice reads.

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications. If you’re a developer who lives in the real world of shared hosting accounts and clients with deadlines, and if you’re tired of ponderously large and thoroughly undocumented frameworks.

Some features of CodeIgniter are :

A framework with a small footprint and exceptional performance, requires nearly zero configuration, does not require you to use the command line, and does not require you to adhere to restrictive coding rules.

Performs broad compatibility with standard hosting accounts that run a variety of PHP versions and configurations.

Help you favoring simple solutions.

More samples and documentations.

So, what’s the relation between CodeIgniter and ExtJs ?


Read more…

Share/Save/Bookmark