1. Codeigniter Framework (CodeIgniter Framework Tutorial) Basic Tutorials of Codeigniter Framework
  2. কোডইগনাইটার ইনস্টল (CodeIgniter Install Tutorial in Bangla)
  3. How to create First Application in CodeIgniter
  4. কোডইগনাইটারের URL স্ট্রাকচার (structure of codeigniter)
  5. Codeigniter দিয়ে query করা এবং result দেখা (CI Query & Show Results)
  6. Database থেকে Data দেখা (CI Fetch Data from Database)
  7. Model তৈরী এবং কন্ট্রোলারে Access (Create Model & Access in Controller)
  8. Codeigniter দিয়ে ডেটাবেসে data ঢুকানো (CodeIgniter Insert Data to Database)
  9. Form দিয়ে ডেটাবেসের data সম্পাদনা (Data Edit in Database Via Form | Codeigniter Tutorials)
  10. ডেটাবেসের data delete (Data Delete in Database | Codeigniter Tutorials) | SP Foundationbd
  11. Form Validation টিউটোরিয়াল (CI Form Validation Tutorial | Codeigniter Tutorials) | SP Foundation
  12. Form validation tutorials (CI Form Validation Tutorial) - আরও উন্নত validation
  13. Codeigniter bootstrap integration এবং best প্রাকটিস | SP Foundationbd
  14. Codeigniter পেজিনেশন Tutorials (CodeIgniter Pagination Tutorial) | SP Foundationbd
  15. কোডইগনাইটার pagination tutorials (CodeIgniter Pagination Tutorial) - ২য় পদ্ধতিতে pagination
  16. Codeigniter সেশন Management (Session Management CodeIgniter) part one
  17. Codeigniter session ম্যানেজমেন্ট (Session Management CodeIgniter) - সেশন ড্রাইভার part two
  18. কোডইগনাইটার file আপলোড (CodeIgniter File Upload)
  19. কোডইগনাইটার Ajax টিউটোরিয়াল (CodeIgniter Ajax Tutorial) | SP Foundationbd
  20. কোডইগনাইটার URI রাউটিং টিউটোরিয়াল (CodeIgniter URI Routing Bangla Tutorials) | SP Foundationbd
  21. কোডইগনাইটারে একসাথে একাধিক ডেটাবেস ব্যবহার (Use Multiple Database Together in CodeIgniter)

কোডইগনাইটার Ajax টিউটোরিয়াল (CodeIgniter Ajax Tutorial) | SP Foundationbd

বর্তমানে php র application মানেই এজাক্স থাকবে। ajax দিয়ে পেজ reload ছাড়াই ডেটাবেস কিংবা অন্য কোন সোর্স থেকে নতুন ডেটা ব্রাউজারে দেখতে পারে। এর আগেও Jquery তে একটা ajax tutorial  দিয়েছিলাম। তবে সেটা raw PHP তে ছিল। এবার এই টিউটোরিয়ালে codeigniter দিয়ে কিভাবে এজাক্সের কাজ করা যায় সেটা দেখাচ্ছি।

প্রথমেই বলে রাখি অনেকভাবে একই কাজ করা যায়, এখানে একভাবে দেখাচ্ছি আপনি ইচ্ছে করলে এর চেয়ে ভাল কোন পদ্ধতি আবিষ্কার করতে পারেন। এর আগের CRUD প্রজেক্টে যে edit ডিলিটের কাজ ছিল সেটার edit তথা সম্পাদনার কাজটি ajax দিয়ে করব।

 এই টিউটোরিয়ালে যা করব : project download করে কোড আগে দেখে নিন, একাই বোঝার চেষ্টা করুন। আমরা শুধু গুরত্বপূর্ন code অংশের ব্যাখ্যা দেব। কেননা code গুলি এতই সহজ এবং অনেক বড় তাই প্রতিটি লাইনের ব্যাখ্যা দিলে আপনারও পড়তে বিরক্ত লাগবে আর এটা অপ্রয়োজনীয়। তবে কোডের কোথাও বুঝতে সমস্যা হলে সেটার ব্যাখ্যা নিতে ফোরামে সমস্যাটি লিখুন।

ইউজার তালিকা পেজে এডিট আইকনের উপর ক্লিক করলে আর নতুন কোন পেজে যাবেনা। টেবিলেই সংশিষ্ট row টি এডিট করে সেভ আইকনে click করলে save হবে এবং নতুন সেভকৃত ডেটা row তে (টেবিলে) দেখতে পাবেন। এই পুরো প্রসেসটি অর্থ্যাৎ ডেটাবেস অপারেশনের কাজ এবং আপডেট হয়ে নতুন data দেখানো হবে কোন পেজ রিলোড ছাড়াই।

এজাক্স কোড

প্রথমেই webch.js নামে একটি ফাইল তৈরী করে footer.php view ফাইলে যোগ করেছি এবং এই webch.js ফাইলেই সব জেকোয়েরি + এজাক্স কোড লেখা হয়েছে। উপরের ছবিতে দেখুন Edit, Cancel ইত্যাদি আইকনে ক্লিক করলে কি হবে এসব প্রজেক্টে আছে এবং এগুলি আসলে জেকোয়েরির কাজ। জেকোয়েরির টিউটোরিয়াল ভালভাবে পড়লে এসব পারবেন তাই এগুলির ব্যাখ্যা দিচ্ছিনা। এখানে শুধু এজাক্সের code এবং ব্যাখ্যা দিচ্ছি

01.$('.save').click(function () {

02.var base_url = $('#base_url').val();

03.var site_url = $('#site_url').val();

04.var username = $(this).parent().siblings('.username').find('.username_box').val();

05.var email = $(this).parent().siblings('.email').find('.email_box').val();

06.var user_id = $(this).parent().find('.user_id').val();

07.$.ajax({

08.context: this,

09.url: site_url + '/users/save',

10.type: 'post',

11.dataType: 'text',

12.data: {

13.username: username,

14.email: email,

15.user_id: user_id

16.},

17.beforeSend: function () {

18.$(this).parent().append('<img id="loader" src="' + base_url + 'assets/images/loader.gif" alt="loading"/>');

19.},

20.success: function (response) {

21.if (response !== 'problem') {

22.var info = response.split('|');

23.$(this).parent().find('.supress_icon').hide();

24.$(this).parent().find('.edit').show();

25.var user_td = $(this).parent().siblings('.username');

26.var mail_td = $(this).parent().siblings('.email');

27.user_td.html(info[0]);

28.mail_td.html(info[1]);

29.} else {

30.alert('There ais a problem');

31.}

32.$('#loader').remove();

33.}

34.});

35.});

ব্যাখ্যা: প্রথমে base_url এবং site_url দুটি ভেরিয়েবলে site এবং রিসোর্সের (lodar ছবিটি) URL নিয়েছি। users.php ভিউ ফাইলে আগে থেকে দুটি হিডেন ফিল্ডে base_url() এবং site_url() echo করে রেখেছি। এরপর username ভেরিয়েবলে username ইনপুট বক্সের মান নিয়েছি (এডিট আইকনে ক্লিক করলে যে ইনপুট টি ইউজার নাম কলামে আসে) এবং একইভাবে email ভেরিয়েবলে ইমেইল নেয়া হয়েছে। তারপর user_id ভেরিয়েবলে হিডেন ফিল্ড থেকে সংশ্লিষ্ট ইউজার আইডি নেয়া হয়েছে। এই ইউজার আইডিও users.php ফাইলে হিডেন ফিল্ডে আগেই বের করে রেখেছি। 

এরপর জেকোয়েরির ajax ফা্ংশন।

১ম অপশন : context: this  এ্টার এজন্য দেয়া হয়েছে কারন ajax মেথডের ভিতরের ফাংশন যেমন success, complete ইত্যাদিতে $(this) সাধারনভাবে কাজ করেনা। তবে context:this দেয়াতে এখন $(this) এটা কাজ করবে।

২য় অপশন : site_url + 'users/save' এটা হচ্ছে কোডইগনাইটারের লিংকটি যেখানে Save আইকনে click করলে ডেটা যাবে। raw পিএইচপিতে যে .php ফাইলের URL.

৩য় অপশন : type: 'post' এটা হল Save আইকনে click করলে form টি কোন মেথডে ডেটা পাঠাবে সেটার নাম। post দেয়াতে form টির ডেটা post মেথডে কোডইগনাইটারের URL যাবে।

৪র্থ অপশন : dataType: 'text' এটা হল return কৃত ডেটার টাইপ। text দিয়েছি এর মানে হল ২য় অপশনের URL টি প্রসেসিং এর পর text data রিটার্ন করবে। যদি অন্য কোন ডেটা রিটার্ন করে তাহলে সেটার টাইপ দিতে হবে যেমন html, json ইত্যাদি।

৫ম অপশন : data এখানে দেখুন username, email এবং user_id দিয়েছি। এই ডেটাই ২য় অপশনের URL এর কাছে ফর্ম ডেটা।

৬ষ্ঠ অপশনে beforeSend একটি ফাংশন লিখেছি যেটা দিয়ে ডেটা প্রসেসিং এর সময় একটি লোডার ছবিটি দেখাবে। যাতে ইউজার আন্দাজ করতে পারে যে ভিতরে কাজ হচ্ছে। যতক্ষন কোডইগনাইটার ব্যাকইন্ডে কাজ চালাবে ততক্ষন এই ছবিটি দেখাতে থাকবে।

৭ম option success এ্ আরেকটি ফাংশন লিখেছি। এটা তখনি কাজ করবে যখন ২য় অপশনের URL টি অপারেশন শেষ করবে (এবং ডেটা রিটার্ন করবে) save মেথড যে ডেটা রিটার্ন করবে সেটার উপর ভিত্তি করে success কোড লেখা হয়েছে। তাই আগে save মেথডের কোড (কোডইগনাইটারের) দেখে নিন

01.public function save() {

02.if ($this->input->is_ajax_request()) {

03.$user_id = $this->input->post('user_id');

04.$username = $this->input->post('username');

05.$email = $this->input->post('email');

06.$data = array(

07.'username' => $username,

08.'email' => $email

09.);

10.if (!$this->db->where('id', (int) $user_id)->update('users', $data)) {

11.echo 'problem';

12.} else {

13.$query = $this->db->where('id', (int) $user_id)->get('users');

14.$user = $query->row();

15.echo $user->username . '|' . $user->email;

16.}

17.}

18.}

is_ajax_request() এটা কোডইগনাইটারের একটি বিশেষ method input ক্লাসের। এটা দিয়ে check করা যায় এজাক্স রিকোয়েস্ট কিনা। যাইহোক প্রথমেই চেক করেছি ajax কিনা কারন save মেথডটি শুধু এজাক্স থেকেই কল হবে। এরপর এজাক্স থেকে পাঠানো ডেটা $user_id, $username, $email ভেরিয়েবলগুলি দিয়ে ধরেছি। post() দিয়ে ধরেছি কারন ajax এর type:'post' আছে। এরপরের কোডগুলি খুব পরিষ্কার। দেখুন $user_id দিয়ে শুধু সংশ্লিষ্ট row টি আপডেট করেছি। যদি আপডেট ঠিকমত হয় তাহলে নতুন ডেটা echo করেছি প্লেইন text হিসেবে। কোডইগনাইটারের যেসব method এখানে ব্যবহার করেছি এসব আগের টিউটোরিয়ালগুলিতে বিভিন্নবার আলোচনা হয়েছে। এখন  যদি আপডেট ঠিকমত না হয় তাহলে 'problem' এই স্ট্রিংটি রিটার্ন করবে তাই এজাক্সের success এটাই চেক করেছি যে response এর মান কি। save মেথড থেকে return কৃত ডেটা এই response সব পাওয়া যাবে। যদি এটার মান 'problem' না হয় অর্থ্যাৎ ঠিক মত আপডেট হয় তাহলে রিটার্নকৃত ইউজার নাম, ইমেইল ইত্যাদি নিয়ে সংশ্লিষ্ট row টির কলাম আপডেট করেছি এবং ইনপুট বক্স, লোডার ছবি ইত্যাদি সরিয়ে দিয়েছি।

পুরো প্রজেক্টের কোড দেখুন, সব ব্যাখ্যা দেয়া হয়নি কারন কোড দেখেই সব বোঝা যাচ্ছে। তাছাড়া এটা এডভান্স লেভেলের টিউটোরিয়াল তাই সংক্ষেপে ব্যাখ্যা দেয়া হল। তবে কারও বুঝতে সমস্যা হলে ফোরামে প্রশ্ন করতে পারেন। আমরা দেখব।