AJAX yang dimaksud disini bukanlah nama club sepakbola yang berasal dari Amsterdam, Anda atau pun nama pahlawan dalam sejarah perang Trojan, tetapi AJAX di sini adalah singkatan dari Asynchronous JavaScript and XML. Pada intinya ajax itu merupakan gabungan beberapa teknologi yang bertujuan untuk menghindari page reload. Dengan menghindari page reload, kita dapat menghindari paradigma click-and-wait serta memberikan sebuah fitur yang cukup kompleks pada website seperti validasi data secara realtime, drag n drop dan fitur-fitur lain yang belum dimiliki web biasa.
Dengan AJAX, suatu aplikasi web dapat mengambil data kemudian diolah di client melalui request asynchronous HTTP yang diinisialisasi oleh Javascript, sehingga dapat mengupdate bagian-bagian tertentu dari web tanpa harus memanggil keseluruhan halaman web. Request ini dapat dieksekusi dalam beberapa cara dan beberapa format transmisi data. Dikombinasikannya cara pengambilan data remote dengan interaktivitas dari Document Object Model (DOM) telah menghasilkan generasi terbaru dari aplikasi web yang menggebrak aturan-aturan tradisional tentang apa yang dapat terjadi di dalam web. Keuntungan dari aplikasi web berbasis AJAX adalah memungkinkan untuk membuat website dan aplikasi web yang lebih baik dan lebih responsif. Sehingga meningkatkan kemudahan pengguna.
Codeignter sebenarnya tidak terpengaruh dengan teknik ajax ini karena ajax bekerja di sisi clinet sedangkan CI bekerja disisi server. Yang perlu dipersiapkan hanya di sisi template dan view. Untuk bagian library template kita melakukan perubahan dengan menambahkan pengecekan apakah sebuah request tersebut merupakan ajax request apa bukan.
application/libraries/template.php
1. <?php
2. class Template {
3. protected $_ci;
4.
5. function __construct()
6. {
7. $this->_ci =&get_instance();
8. }
9.
10. function display($template,$data=null)
11. {
12. if(!$this->is_ajax())
13. {
14. $data[‘_content’]=$this->_ci->load->view($template,
15. $data, true);
16. $data[‘_header’]=$this->_ci->load->view(‘template/header’,
17. $data, true);
18. $data[‘_top_menu’]=$this->_ci->load->view(‘template/menu’,
19. $data, true);
20. $data[‘_right_menu’]=$this->_ci->load->view(
21. ‘template/sidebar’,$data, true);
22. $this->_ci->load->view(‘/template.php’,$data);
23. }
24. else
25. {
26. $this->_ci->load->view($template,$data);
27. }
28. }
29.
30. function is_ajax()
31. {
32. return (
33. $this->_ci->input->server(‘HTTP_X_REQUESTED_WITH’)&&
34. ($this->_ci->input->server(‘HTTP_X_REQUESTED_WITH’)==
35. ‘XMLHttpRequest’));
36. }
37. }
Perhatikan fungsi is_ajax, fungsi tersebut untuk mengecek apakah request tersebut merupakan sebuah request ajax. Perhatikan baris 26, jika request tersebut merupakan request ajax maka akan ditampilkan view area content saja.
Selain itu, disisi view juga perlu diberi perubahan
1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
2. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
3. <htmlxmlns=”http://www.w3.org/1999/xhtml”xml:lang=”en”lang=”en”>
4. <head>
5. <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
6. <link rel=”stylesheet” type=”text/css” href=”
7. <?php echo base_url();?>public/style.css”/>
8. <script src=”<?php echo base_url();?> public/js/jquery-
1.4.2.min.js”>
9. </script>
10. <script>
11. $(document).ready(function(){
12. $(‘.ajax’).click(function(e){
13. e.preventDefault();
14. $.get($(this).attr(‘href’),function(Res){
15. $(‘#content’).html(Res);
16. });
17. })
18. })
19. </script>
20. <title>Sistem Template CodeIgniter Template</title>
21. </head>
22. <body>
23.
24. <div id=”wrap”>
25. <div id=”header”>
26. <!–
27. Area Header
28. –>
29. <?php echo $_header;?>
30. </div>
31.
32. <div id=”menu”>
33. <!–
34. Area Menu
35. –>
36. <?php echo $_top_menu;?>
37. </div>
38.
39. <div id=”contentwrap”>
40. <div id=”content”>
41. <!–
42. Area content
43. –>
44. <?php echo $_content;?>
45. </div>
46. <div id=”sidebar”>
47. <!–
48. Area Right Menu
49. –>
50. <?php echo $_right_menu;?>
51. </div>
52. <div style=”clear: both;”></div>
53. </div>
54. <div id=”footer”>
55. <p>Copyright ©<ahref=”#”>You</a> | Design by
56. <a href=”http://www.readcrazyreviews.com”>Read Crazy Reviews</a></p>
57. </div>
58.
59. </div>
60.
61. </body>
62. </html>
Perhatikan baris 8-18, pada kode tersbut kita menggunakan jquery untuk mempermudah melakukan request ajax. Pada kode di atas kita akan menyari semua link yang memiliki kelas ajax lalu meloadnya melalui ajax (lihat view template/menu.php).
application/view/template/menu.php
1. <ul>
2. <li><a class=”ajax” href=”<?php echo base_url();?>”>Home</a></li>
3. <li><a class=”ajax” href=”<?php echo site_url(‘welcome/page1’);?>”>
4. Page Ajax 1</a></li>
5. <li><a class=”ajax” href=”<?php echo site_url(‘welcome/page2’);?>”>
6. Page Ajax 2</a></li>
7. <li><a class=”ajax” href=”<?php echo site_url(‘welcome/page3’);?>”>
8. Page Ajax 3</a></li>
9. <li><a class=”ajax” href=”<?php echo site_url(‘welcome/page4’);?>”>
10. Page Ajax 4</a></li>
11. </ul>
Untuk bagian controller tidak melakukan perubahan apa-apa. kita hanya menambahkan page yang dapat dipanggil
1. <?php if (! defined(‘BASEPATH’)) exit(‘No direct script access
allowed’);
2.
3. class Welcome extends CI_Controller {
4.
5. function __construct()
6. {
7. parent::__construct();
8. $this->load->library(‘template’);
9. $this->load->helper(‘url’);
10. }
11.
12. function index()
13. {
14. $this->template->display(‘welcome_message’);
15. }
16.
17. function page1()
18. {
19. $this->template->display(‘page1’);
20. }
21.
22. function page2()
23. {
24. $this->template->display(‘page2’);
25. }
26.
27. function page3()
28. {
29. $this->template->display(‘page3’);
30. }
31.
32. function page4()
33. {
34. $this->template->display(‘page4’);
35. }
36. }
37.
38. /* End of file welcome.php */
39. /* Location: ./application/controllers/welcome.php */
Ketika kita mengakses page 1 secara langsung maka library template akan memampilkan page secara utuh tetapi melalui ajax hanya akan memberikan area content.
Sumber : Buku Framework CodeIgniter
Andra Wisata's Blog 
Leave a comment