জেকোয়েরি এজাক্স মেথড (jQuery ajax method)
জেকোয়েরি
দিয়ে এজাক্সের কাজ করার জন্য ajax() মেথডটি সবচেয়ে পাওয়ারফুল।এই মেথড
দিয়ে এখানে একটা রেটিং সিস্টেম এপ্লিকেশন তৈরী করে দেখাচ্ছি।
এপ্লিকেশন সম্পর্কে:ডেটাবেসে বিভিন্ন পন্যের তথ্য থাকবে।প্রথমে এই এপ্লিকেশনের কাজ হচ্ছে ডেটাবেস থেকে পিএইচপি দিয়ে এই পন্যের তালিকা প্রাসঙ্গিক তথ্যসহ একটা ওয়েব পেজে দেখাবে।এই পেজে প্রতিটি পন্যের বিপরীতে রেটিং দেয়ার অপশন থাকবে।যে কেউ রেটিং দেয়ার সাথে এই ajax() মেথড দিয়ে সেটাকে ডেটাবেস সেভ করা হবে এবং সব রেটিং ক্যালকুলেশন করে সবশেষে গড় রেটিং দেখাবে।ডেটাবেস এই অপারেশনগুলি চলবে,ডেটা ঢুকবে,কোয়েরি,ক্যালকুলেশন ইত্যাদির পরে ডেটা আবার সেই ওয়েব পেজেই দেখাবে তবে পেজ রিলোড হবেনা বরং যতক্ষন আমাদের পিএইচপি কোড এক্সিকিউট হবে ততক্ষন আমরা একটা লোডিং এর ছবি দেখাতে পারি।
প্রথমেই এই প্রজেক্টটি ডাউনলোড করে আপনার সার্ভারে রাখুন (আমি লোকাল সার্ভারে করেছি তাই htdocs এ ছিল : XAMPP )
index.php ফাইল
ব্যাখ্যা:কিভাবে
ডেটাবেসের সাথে কানেকশন করতে হয়,কোয়েরি করতে হয় ইত্যাদি আমরা পিএইচপি
মাইএসকিউয়েল টিউটোরিয়ালে আগে দেখিয়েছি।এগুলি জানেন এটা ধরে নিয়ে ব্যাখ্যা
দিচ্ছি।২২ নম্বর লাইনে mysql_num_rows() ফাংশন ব্যবহার করেছি,এই ফাংশনে
প্যারামিটার হিসেবে কোয়েরি রেজাল্ট পাঠালে সেই কোয়েরি কতটি row রিটার্ন
করবে সেই সংখ্যাটি বের করে দেবে।এই গননা করা হয়েছে এই জন্য যে আমরা দেখতে
চাই প্রতিটি পন্যের বিপরীতে মোট কতটি করে রেটিং জমা পরেছে।পরে এই ফলাফল
$totalRating ভেরিয়েবলে জমা করেছি এবং সাইটের ফ্রন্টইন্ডে দেখিয়েছি যে এই
পন্যের জন্য মোট কতটি রেটিং দেয়া হয়েছে।
আর গড় রেটিং বের করার জন্য আমরা ২৩ নম্বর লাইনে এগ্রিগেইট ফাংশন (aggregate function) AVG ব্যবহার করেছি।এরপর এই গড় ৪৪ নম্বর লাইনে পেজে echo করার সময় পিএইচপির floor() ফাংশন ব্যবহার করেছি।floor() ফাংশন প্যারামিটার হিসেবে সংখ্যা গ্রহন করে এবং এই সংখ্যা যদি ভগ্নাংশ হয় তাহলে তাকে নিচের দিকে টেনে পূর্ন সংখ্যায় রুপান্তর করে দেবে।যেহেতু আমার চাইনা যে গড় রেটিং ৪.৫৮,৪.৩৬ এরুপ ভাবে না দেখানো হোক তাই এই ফাংশন ব্যবহার করেছি।আপনি যদি চান এভাবেই ভগ্নাংশ দেখাক তাহলে এই ফাংশন উঠিয়ে দিলেই হবে।আর যদি রাখেন তাহলে ৪.৫৬ কে সে ৪ বানাবে,৩.৯৮ কে ৩ বানাবে ইত্যাদি।
script.js ফাইল
ব্যাখ্যা:জেকোয়েরির
কোডে দুটি অংশ আছে।প্রথম অংশে সাদা রেটিং তারকা চিহ্নের উপর মাউস নিয়ে
গেলে হলুদ তারকা দেখাবে।সাধারনত রেটিং সিস্টেম এভাবেই সাজানো থাকে যে যত
নম্বর তারকা চিহ্নের উপর মাউস হোভার করবেন এটা সহ আগেরগুলি সব সিলেক্টেড
দেখাবে।
জেকোয়েরির দ্বিতীয় অংশ হচ্ছে এজাক্সের জন্য।
প্রথম অংশের জন্য ব্যবহৃত prevAll() মেথডের কাজ হচ্ছে পুর্ববর্তী সব এলিমেন্টকে ধরা আর andSelf() মেথড বর্তমান সিলেক্টেড এলিমেন্টকে ধরা।সুতরাং
এই লাইন দ্বারা ratings ক্লাস সম্বলিত ডিভের ভিতরে যেকোন লিংকের উপর (a
ট্যাগ) মাউস নিয়ে গেলে (যেহেতু hover() ইভেন্ট হ্যান্ডলার ব্যবহার করা
হয়েছে) সেই লিংক সহ পুর্ববর্তী সব a ট্যাগে "rating_hover" নামে একটি ক্লাস
যোগ হবে।এরপরের ৪ নম্বর লাইনটি দিয়ে "rating_hover" ক্লাসটি মুছে দেয়া
হচ্ছে যদি পরবর্তী কোন a ট্যাগে এই ক্লাসটি থেকে থাকে।
তারপরে যে ফাংশনটি আছে সেটি মাউস যখন সরিয়ে নেবে তখন কি সেই জন্য।অর্থ্যাৎ
এই লাইন দিয়ে এই নির্দেশনা দেয়া হচ্ছে যে "যে লিংকের উপরে থেকে মাউস
সরিয়ে নেয়া হচ্ছে সেটাসহ তার পুর্ববর্তী সব a ট্যাগ থেকে rating_over ক্লাস
মুছে দাও"
এরপর দ্বিতীয় অংশ এবং এটাই আসল অংশ।এই অংশে ratings অধীনস্থ a ট্যাগে ক্লিক করলে যে কোডব্লকে ঢুকবে (১০ নম্বর লাইন) সেখানে প্রথমেই ২টি ভেরিয়েবল সেট করেছি।
rate ভেরিয়েবলে যে লিংকে ক্লিককরবে সেই লিংকের ভিতর যে মান আছে তা নেয়া হচ্ছে।
p_id এর ভিতর পন্যের আইডি সেভ করা হচ্ছে
এরপর ajax() মেথড শুরু হয়েছে,এই মেথডে প্যারামিটার হিসেবে পাঠানোর জন্য অনেক অনেক অপশন আছে।আমরা মাত্র ৩টি ব্যবহার করেছি।
type অপশনে ডেটা কোন পদ্ধতিতে নেবে সেটা উল্লেখ করে দিতে হয় যেমন আমরা দিয়েছি GET মেথড।
url অপশনে যে পেজে রিকোয়েস্ট পাঠাতে চান সেই পেজের ঠিকানা,বাই ডিফল্ট বর্তমান পেজ থাকে।আমরা যেহেতু মেথড GET দিলাম তাই এখানে url টি সেভাবে কনফিগার করে নিয়েছি যাতে url থেকে পিএইচপি পেজে ডেটা নিতে পারি।url টিতে দুটি প্যারামিটার নিয়েছি একটি হচ্ছে r যার মান হবে rate ভেরিয়েবলে যেটা আসবে সেটা।এরপর id প্যারামিটারে নিচ্ছি p_id ভেরিয়েবলের মান।
*জাভাস্ক্রিপ্টে + (প্লাস চিহ্ন) দিয়ে এভাবে concatenate করতে হয়।
success অপশনে একটি ফাংশন করেছি।এখানে এরুপ কলব্যাক ফাংশন ব্যবহার করতে পারেন যেটা শুধুমাত্র এজাক্স রিকোয়েস্ট অপারেশন সফল হলেই এক্সিকিউট হবে।
error একটি অপশন আছে যেটা ব্যবহার করলে যদি কোন ভুল হয় তাহলে সেটা সম্পর্কে তথ্য বের করা যায়।এগুলিকে বলে লোকাল এজাক্স ইভেন্ট এবং শুধুমাত্র ajax() মেথডের ভিতরেই রাখতে হবে যদি একাধিক ajax() মেথড ব্যবহার করেন (একই স্ক্রিপ্টে)।এছাড়া কিছু গ্লোবাল এজাক্স ইভেন্ট আছে যেগুলি সব এজাক্স মেথডে না লিখে একবারে স্ক্রিপ্টের কোথাও লিখে দিতে পারেন ফলে আর বারবার সব মেথডে এগুলি আলাদা আলাদা কল করতে হবেনা। ajaxSetup() দিয়ে গ্লোবাল ইভেন্ট সেট করা যায়।ajaxStart() এবং ajaxStop() মেথড দিয়ে যেকোন ডিভে লোডিং এর ছবিটি দেখাতে পারেন
যাইহোক অনেক অপশন আছে সবগুলি আলোচনা করা প্রয়োজনীয় নয় কারন মুল কোড লেখা বুঝতে পারলে এরপর অপশনগুলি জেকোয়েরির সাইট থেকে দেখলেই ব্যবহার করতে পারবেন।
ajax মেথডে url এ যে পিএইচপি পেজ দেয়া আছে সেই পেজ
ratings.php ফাইল
ব্যাখ্যা:যেহেতু
আমরা ajax মেথডে GET মেথড দিয়ে ডেটা পাঠাচ্ছি তাই এই পেজে আমরা url থেকে
সেই ডেটাগুলি ধরতে পারব।এই পেজে সেটাই করেছি।url থেকে ডেটা নিয়ে ডেটাবেসে
ইনসার্ট করে দিয়েছি।আর ইউজারের আইপি এড্রেস বের করার জন্য $_SERVER অ্যারে
ব্যবহার করেছি।পিএইপি ম্যানুয়ালে এই অ্যারে সম্পর্কে আরো বিস্তারিত তথ্য
পাবেন।REMOTE_ADDR এর জায়গায় আরো অনেক অপশন দেয়ার ব্যবস্থা আছে এবং এসব
দিয়ে হেডার,ব্রাউজার,লোকেশন ইত্যাদি বের করা যায়।
style.css ফাইল
বি.দ্র:সাধারনত একজন ইউজার একবার রেটিং দিতে পারে একটা পন্যের জন্য।তাই প্রফেশনালি এরুপ রেটিং সিস্টেম তৈরীর সময় যেটা করা হয় যে রেটিং সাবমিট করার সাথে সাথে ঐ ইউজারের আইপি এবং তার আইডি ইত্যাদি দিয়ে ডেটাবেস থেকে চেক করা হয় যে সে এর আগে এই পন্যে কোন রেটিং দিয়েছে কিনা?দিয়ে থাকলে সেটা মেসেজ দেখাবে যে আগে রেটিং দিয়েছেন আর দিতে পারবেননা।আমরা এভাবে করিনি কারন অনেক আইপ দিয়ে চেক করতে হত যেটা অনেক বিরক্তিকর।আমরা শুধু ধারনা এবং সিস্টেম তৈরীর বেসিক দিয়ে দিলাম এরপর আপনি আপনার এপ্লিকেশনের চাহিদা অনুযায়ী ঠিক করে নেবেন।
এই প্রজেক্টটির যেহেতু সার্ভারে রান করাতে হবে এবং ডেটাবেস লাগে তাই এখানে সরাসরি আউটপুট দেয়া হয়নি,আপনি সার্ভারে রান করান যদি সমস্যা হয় তাহলে ফোরাম আছে
এপ্লিকেশন সম্পর্কে:ডেটাবেসে বিভিন্ন পন্যের তথ্য থাকবে।প্রথমে এই এপ্লিকেশনের কাজ হচ্ছে ডেটাবেস থেকে পিএইচপি দিয়ে এই পন্যের তালিকা প্রাসঙ্গিক তথ্যসহ একটা ওয়েব পেজে দেখাবে।এই পেজে প্রতিটি পন্যের বিপরীতে রেটিং দেয়ার অপশন থাকবে।যে কেউ রেটিং দেয়ার সাথে এই ajax() মেথড দিয়ে সেটাকে ডেটাবেস সেভ করা হবে এবং সব রেটিং ক্যালকুলেশন করে সবশেষে গড় রেটিং দেখাবে।ডেটাবেস এই অপারেশনগুলি চলবে,ডেটা ঢুকবে,কোয়েরি,ক্যালকুলেশন ইত্যাদির পরে ডেটা আবার সেই ওয়েব পেজেই দেখাবে তবে পেজ রিলোড হবেনা বরং যতক্ষন আমাদের পিএইচপি কোড এক্সিকিউট হবে ততক্ষন আমরা একটা লোডিং এর ছবি দেখাতে পারি।
প্রথমেই এই প্রজেক্টটি ডাউনলোড করে আপনার সার্ভারে রাখুন (আমি লোকাল সার্ভারে করেছি তাই htdocs এ ছিল : XAMPP )
index.php ফাইল
01.<!DOCTYPE html>02.<html>03.<head>04.<title>Webcoachbd jQuery ajax method tutorials</title>05.<link rel="stylesheet" href="/style.css" type="text/css" />06.<script src="/jquery_latest.js" type="text/javascript"></script>07.<script src="/webcoachbd/script.js" type="text/javascript"></script>08.</head>09. 10. 11.<body>12.<div id="content">13.<?php14.$db = mysql_connect('localhost','root','');15.mysql_select_db('rating_db',$db);16.$query = 'SELECT * FROM product';17.$result = mysql_query($query);18.while($row = mysql_fetch_array($result)){?>19.<?php20.$count_query = 'SELECT * FROM ratings WHERE product_id ='.$row['product_id'];21.$count_result = mysql_query($count_query);22.$totalRating = mysql_num_rows($count_result);23.$sql = 'SELECT AVG(rating) FROM ratings WHERE product_id ='.$row['product_id'];24.$results = mysql_query($sql);25. 26. 27. 28.while($rows = mysql_fetch_array($results)){?>29.<div class="header">30.<h3 class="title"><?php echo $row['title'];?></h3>31.<p class="p_id"><?php echo '[Product Id : '.$row['product_id'].']';?></p>32.</div>33.<p><?php echo $row['product_details'];?></p>34.<div class="ratings">35. 36.<a href="#">1</a>37.<a href="#">2</a>38.<a href="#">3</a>39.<a href="#">4</a>40.<a href="#">5</a>41.</div>42.<span class="h_id"><?php echo $row['product_id'];?></span>43.<div class="avg_rate">44.<p>Average Rating : <?php echo floor($rows['AVG(rating)']).' (Total rating given '.$totalRating.')';?></p>45. 46.</div>47.<?php }?>48.<?php }?>49.</div>50.</body>51.</html>আর গড় রেটিং বের করার জন্য আমরা ২৩ নম্বর লাইনে এগ্রিগেইট ফাংশন (aggregate function) AVG ব্যবহার করেছি।এরপর এই গড় ৪৪ নম্বর লাইনে পেজে echo করার সময় পিএইচপির floor() ফাংশন ব্যবহার করেছি।floor() ফাংশন প্যারামিটার হিসেবে সংখ্যা গ্রহন করে এবং এই সংখ্যা যদি ভগ্নাংশ হয় তাহলে তাকে নিচের দিকে টেনে পূর্ন সংখ্যায় রুপান্তর করে দেবে।যেহেতু আমার চাইনা যে গড় রেটিং ৪.৫৮,৪.৩৬ এরুপ ভাবে না দেখানো হোক তাই এই ফাংশন ব্যবহার করেছি।আপনি যদি চান এভাবেই ভগ্নাংশ দেখাক তাহলে এই ফাংশন উঠিয়ে দিলেই হবে।আর যদি রাখেন তাহলে ৪.৫৬ কে সে ৪ বানাবে,৩.৯৮ কে ৩ বানাবে ইত্যাদি।
script.js ফাইল
01.$(document).ready(function(){02.$('.ratings a').hover(function(){03.$(this).prevAll().andSelf().addClass('rating_over');04.$(this).nextAll().removeClass('rating_over');05.},function(){06.$(this).prevAll().andSelf().removeClass('rating_over');07.});08. 09. 10.$('.ratings a').click(function(e){11.var rate = $(this).text();12.var p_id = $(this).parent().next().text();13. 14.e.preventDefault();15.$.ajax({16.type : 'GET',17.url : 'ratings.php?r='+rate+'&id='+p_id,18.success : function(){19.window.location.reload(true);20.}21.});22.});23.});জেকোয়েরির দ্বিতীয় অংশ হচ্ছে এজাক্সের জন্য।
প্রথম অংশের জন্য ব্যবহৃত prevAll() মেথডের কাজ হচ্ছে পুর্ববর্তী সব এলিমেন্টকে ধরা আর andSelf() মেথড বর্তমান সিলেক্টেড এলিমেন্টকে ধরা।সুতরাং
1.$(this).prevAll().andSelf().addClass('rating_over');তারপরে যে ফাংশনটি আছে সেটি মাউস যখন সরিয়ে নেবে তখন কি সেই জন্য।অর্থ্যাৎ
1.$(this).prevAll().andSelf().removeClass('rating_over');এরপর দ্বিতীয় অংশ এবং এটাই আসল অংশ।এই অংশে ratings অধীনস্থ a ট্যাগে ক্লিক করলে যে কোডব্লকে ঢুকবে (১০ নম্বর লাইন) সেখানে প্রথমেই ২টি ভেরিয়েবল সেট করেছি।
rate ভেরিয়েবলে যে লিংকে ক্লিককরবে সেই লিংকের ভিতর যে মান আছে তা নেয়া হচ্ছে।
p_id এর ভিতর পন্যের আইডি সেভ করা হচ্ছে
এরপর ajax() মেথড শুরু হয়েছে,এই মেথডে প্যারামিটার হিসেবে পাঠানোর জন্য অনেক অনেক অপশন আছে।আমরা মাত্র ৩টি ব্যবহার করেছি।
type অপশনে ডেটা কোন পদ্ধতিতে নেবে সেটা উল্লেখ করে দিতে হয় যেমন আমরা দিয়েছি GET মেথড।
url অপশনে যে পেজে রিকোয়েস্ট পাঠাতে চান সেই পেজের ঠিকানা,বাই ডিফল্ট বর্তমান পেজ থাকে।আমরা যেহেতু মেথড GET দিলাম তাই এখানে url টি সেভাবে কনফিগার করে নিয়েছি যাতে url থেকে পিএইচপি পেজে ডেটা নিতে পারি।url টিতে দুটি প্যারামিটার নিয়েছি একটি হচ্ছে r যার মান হবে rate ভেরিয়েবলে যেটা আসবে সেটা।এরপর id প্যারামিটারে নিচ্ছি p_id ভেরিয়েবলের মান।
*জাভাস্ক্রিপ্টে + (প্লাস চিহ্ন) দিয়ে এভাবে concatenate করতে হয়।
success অপশনে একটি ফাংশন করেছি।এখানে এরুপ কলব্যাক ফাংশন ব্যবহার করতে পারেন যেটা শুধুমাত্র এজাক্স রিকোয়েস্ট অপারেশন সফল হলেই এক্সিকিউট হবে।
error একটি অপশন আছে যেটা ব্যবহার করলে যদি কোন ভুল হয় তাহলে সেটা সম্পর্কে তথ্য বের করা যায়।এগুলিকে বলে লোকাল এজাক্স ইভেন্ট এবং শুধুমাত্র ajax() মেথডের ভিতরেই রাখতে হবে যদি একাধিক ajax() মেথড ব্যবহার করেন (একই স্ক্রিপ্টে)।এছাড়া কিছু গ্লোবাল এজাক্স ইভেন্ট আছে যেগুলি সব এজাক্স মেথডে না লিখে একবারে স্ক্রিপ্টের কোথাও লিখে দিতে পারেন ফলে আর বারবার সব মেথডে এগুলি আলাদা আলাদা কল করতে হবেনা। ajaxSetup() দিয়ে গ্লোবাল ইভেন্ট সেট করা যায়।ajaxStart() এবং ajaxStop() মেথড দিয়ে যেকোন ডিভে লোডিং এর ছবিটি দেখাতে পারেন
যাইহোক অনেক অপশন আছে সবগুলি আলোচনা করা প্রয়োজনীয় নয় কারন মুল কোড লেখা বুঝতে পারলে এরপর অপশনগুলি জেকোয়েরির সাইট থেকে দেখলেই ব্যবহার করতে পারবেন।
ajax মেথডে url এ যে পিএইচপি পেজ দেয়া আছে সেই পেজ
ratings.php ফাইল
1.<?php2.$ip = $_SERVER['REMOTE_ADDR'];3.$db = mysql_connect('localhost','root','');4.mysql_select_db('rating_db',$db);5.$query = 'INSERT INTO ratings(product_id,rating,client_ip) VALUES("'.$_GET['id'].'","'.$_GET['r'].'","'.$ip.'")';6.$result = mysql_query($query);7.?>style.css ফাইল
01.body{02.font-family:Verdana;03.font-size:15px;04.background:#2F4D63;05.}06.#content{07.background:#ECFBD8;08.overflow:hidden;09.width:700px;10.margin:0 auto;11.border:1px solid #ccc;12.padding:10px;13.border-radius:8px;14.box-shadow:0px 0px 3px 0px #CCCCCC;15.}16..p_id{17.float:left;18.margin:20px 0 0 5px;19.}20..header{21.float:left;22.width:700px;23.}24.#content h3{25.color:#007BD8;26.float:left;27.}28..ratings{29.float:left;30.width:250px;31.position:relative;32.}33..h_id{34.display:none;35.}36..ratings a{37.background:url(images/rating_empty.png) no-repeat;38.display:block;39.float:left;40.width:20px;41.height:20px;42.text-indent:-9999px;43.}44..rating_over{45.background:url(images/rating.png) no-repeat!important;46.}47..avg_rate{48.float:left;49.width:420px;50.}51..avg_rate p{52.margin:0;53.float:left;54.}বি.দ্র:সাধারনত একজন ইউজার একবার রেটিং দিতে পারে একটা পন্যের জন্য।তাই প্রফেশনালি এরুপ রেটিং সিস্টেম তৈরীর সময় যেটা করা হয় যে রেটিং সাবমিট করার সাথে সাথে ঐ ইউজারের আইপি এবং তার আইডি ইত্যাদি দিয়ে ডেটাবেস থেকে চেক করা হয় যে সে এর আগে এই পন্যে কোন রেটিং দিয়েছে কিনা?দিয়ে থাকলে সেটা মেসেজ দেখাবে যে আগে রেটিং দিয়েছেন আর দিতে পারবেননা।আমরা এভাবে করিনি কারন অনেক আইপ দিয়ে চেক করতে হত যেটা অনেক বিরক্তিকর।আমরা শুধু ধারনা এবং সিস্টেম তৈরীর বেসিক দিয়ে দিলাম এরপর আপনি আপনার এপ্লিকেশনের চাহিদা অনুযায়ী ঠিক করে নেবেন।
এই প্রজেক্টটির যেহেতু সার্ভারে রান করাতে হবে এবং ডেটাবেস লাগে তাই এখানে সরাসরি আউটপুট দেয়া হয়নি,আপনি সার্ভারে রান করান যদি সমস্যা হয় তাহলে ফোরাম আছে
0 মন্তব্য(গুলি):
Post a Comment