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