Cara menghubungkan antara Codeigniter dan Ajax

AJAX yang dimaksud disini bukanlah nama club sepakbola yang berasal dari Amsterdam,Belanda.  Bukan club yang  melahirkan nama seperti suarez,ibrahimovic, atau pemain Barcelona yang baru bergabung yaitu Frangkie De jong pecinta sepakbola pasti tau lah ya wkwkwk, 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 kalian pasti tau lah bagaimana rasanya lelah menunggu 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.

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);

 $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. Perhatikan juga nanti dalam penulisan di codingan atau  di text editor kalian jangan copy paste dengan angka nya  hapus  saja angka di atas karena saya memasukkan angka di atas hanya untuk pembelajaran atau untuk mempermudah kalian saja untuk menemukan apa yang saya terangkan seperti di atas.

Selain itu, disisi view juga perlu diberi perubahan:

application/views/welcome_message.php

 

Perhatikan baris 11-20, 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

 

Untuk bagian controller tidak melakukan perubahan apa-apa. kita hanya menambahkan page yang dapat dipanggil

application/controllers/welcome.php 

1.

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 */

Ketika kita mengakses page 1 secara langsung maka library template akan memampilkan page secara utuh tetapi melalui ajax hanya akan memberikan area content.Nah cara ini yang kemarin saya janji akan membuat tutorialnya karena sekarang saya anggap kalian langsung memangggil view yang ada di dalam folder view sudah mahir lah ya, dan sekarang kalian tinggal memahami caranya meng-integrasikan antara Codeigniter dan Ajax.