Using CI yuiyui ext and MySQL for Ajax Development
I've been using a combination of tools to build a website I'm working on. One of those tools, and the reason for this wiki, is Code Igniter. I've never done a Wiki entry here before, but there's been some questions about how to use various javascript frameworks with CI, and as I appear the only one to be going the yui-ext route, I'd share how I'm using it. I'm using several custom libraries and helpers with CI, so I guess here's the breakdown of what I'm using.
[pre] Code Igniter v1.5.0
- db_session library
- template library
- services_json library [/pre]
( I've uploaded a zip file that includes these at File:ci-yui-ext.zip )
MySQL
I use the db_session library to handle my sessions, rather than the default CI sessions implementation. I am running a custom user authentication system that's still in development, and store data in my sessions that I wouldn't want stored client side.
I use the template library to handle my page display. I use two templates, one for full pages, and one for AJAX requests.
The services_json library is a tool I use to convert php arrays into json for passing data to the front end. This could also be used for decoding json data if you wish to use json to pass back and forth between the front end and back end. So far I haven't gone this route, because using POST is just as functional, and of course gives immediate access to the CI Validation system without any customization.
First, I've stored my css and javascript off the route of the site. webroot/css, webroot/js. I have set up my .htaccess file to allow access to these folders as follows.
RewriteEngine on
RewriteCond $1 !^(index\.php|images|js|css|media|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]Now, as I said, I use two different templates, using the template library. For set up of this, I have set up my views as such. [pre] /system/application/views/default - frame.php, header.php, footer.php, data.php /system/application/views/ajax - frame.php, header.php, footer.php, data.php [/pre] The default template is used for new pages. The header.php includes the html to pull in the javascript libraries and css for the site. A new page display would be loaded like this in the controller. [pre] $this->template->load_template('index'); [/pre] index refers to the view being loaded into the template.
The ajax template is used for pages requested by xmlhttprequests. Internet Explorer is very aggressive about caching, which can create problems for xmlhttprequests. So the header.php for this folder is nothing other than php header functions to keep browsers from caching the pages.
header("Expires: Sun, 19 Nov 1978 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");If your controller is returning data to an xmlhttprequest, you'd use the template as follows.
$this->template->load_template('ajax_page', array(), 'ajax');ajax_page is the view to load, array() is the data passed to the view, and the 'ajax' tells the library to load the ajax template rather than the default one.
This is really all you need to start developing a "Web 2.0" application using CI. You can get the javascript libraries from the links referenced above, as well as find great documentation on how to use them. yui-ext.com's documentation system includes all the yui documentation as well, and is a great resource for both. All you need to do is tell you controller whether it is loading a default view, or an ajax view, and you're good to go.
Note: There is no "integration" of the javascript libraries into CI. The javascript exists entirely in the views. By seperating the javascript and php, I've found that I'm better able to take advantage of the javascript libraries power for presentation.