jQuery ajax method | SP Foundationbd

Jqueyr দিয়ে এজাক্সের কাজ করার জন্য ajax() method টি সবচেয়ে পাওয়ারফুল । এই method দিয়ে এখানে একটা rating system application তৈরী করে দেখাচ্ছি।

Application সম্পর্কে:ডেটাবেসে বিভিন্ন পন্যের তথ্য থাকবে।প্রথমে এই এপ্লিকেশনের কাজ হচ্ছে database থেকে php দিয়ে এই পন্যের তালিকা প্রাসঙ্গিক তথ্যসহ একটা ওয়েব পেজে দেখাবে।এই পেজে প্রতিটি পন্যের বিপরীতে রেটিং দেয়ার অপশন থাকবে।যে কেউ রেটিং দেয়ার সাথে এই ajax() method দিয়ে সেটাকে database save করা হবে এবং সব রেটিং ক্যালকুলেশন করে সবশেষে গড় রেটিং দেখাবে।ডেটাবেস এই অপারেশনগুলি চলবে,ডেটা ঢুকবে, query ,calculation ইত্যাদির পরে data আবার সেই ওয়েব পেজেই দেখাবে তবে page reload হবেনা বরং যতক্ষন আমাদের php code execute হবে ততক্ষন আমরা একটা loadig এর ছবি দেখাতে পারি।

 

প্রথমেই এই প্রজেক্টটি download করে আপনার সার্ভারে রাখুন (আমি local সার্ভারে করেছি তাই htdocs এছিল : XAMPP )

index.php ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title> spfoundationbd 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="/ spfoundationbd /script.js" type="text/javascript"></script>

08.</head>

  1. 10. 11.<body>

12.<div id="content">

13.<?php

14.$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.<?php

20.

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

  1. 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">

  1. 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>

  1. 46.</div>

47.<?php }?>

48.<?php }?>

49.</div>

50.</body>

51.</html>

ব্যাখ্যা:কিভাবে ডেটাবেসের সাথে কানেকশন করতে হয়,কোয়েরি করতে হয় ইত্যাদি আমরা php mysql টিউটোরিয়ালে আগে দেখিয়েছি।এগুলি জানেন এটা ধরে নিয়ে ব্যাখ্যা দিচ্ছি।২২ নম্বর লাইনে mysql_num_rows() function ব্যবহার করেছি,এই ফাংশনে প্যারামিটার হিসেবে কোয়েরি রেজাল্ট পাঠালে সেই কোয়েরি কতটি row return করবে সেই সংখ্যাটি বের করে দেবে।এই গননা করা হয়েছে এই জন্য যে আমরা দেখতে চাই প্রতিটি পন্যের বিপরীতে মোট কতটি করে rating জমা পরেছে।পরে এই ফলাফল $totalRating ভেরিয়েবলে জমা করেছি এবং সাইটের ফ্রন্টইন্ডে দেখিয়েছি যে এই পন্যের জন্য মোট কতটি rating দেয়া হয়েছে।

আর গড় rating বের করার জন্য আমরা ২৩ নম্বর লাইনে এগ্রিগেইট function (aggregate function) AVG ব্যবহার করেছি।এরপর এই গড় ৪৪ নম্বর লাইনে পেজে echo করার সময় পিএইচপির floor() ফাংশন ব্যবহার করেছি।floor() ফাংশন প্যারামিটার হিসেবে সংখ্যা গ্রহন করে এবং এই সংখ্যা যদি ভগ্নাংশ হয় তাহলে তাকে নিচের দিকে টেনে পূর্ন সংখ্যায় রুপান্তর করে দেবে।যেহেতু আমার চাইনা যে গড় রেটিং ৪.৫৮,৪.৩৬ এরুপ ভাবে না দেখানো হোক তাই এই function ব্যবহার করেছি।আপনি যদি চান এভাবেই ভগ্নাংশ দেখাক তাহলে এই function উঠিয়ে দিলেই হবে।আর যদি রাখেন তাহলে ৪.৫৬ কে সে ৪ বানাবে,৩.৯৮ কে ৩ বানাবে ইত্যাদি।

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

  1. 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.});

ব্যাখ্যা: Jquery র কোডে দুটি অংশ আছে।প্রথম অংশে সাদা রেটিং তারকা চিহ্নের উপর mouse নিয়ে গেলে হলুদ তারকা দেখাবে। সাধারনত rating system এভাবেই সাজানো থাকে যে যত নম্বর তারকা চিহ্নের উপর mouse হোভার করবেন এটা সহ আগেরগুলি সব selected দেখাবে।

Jquery র দ্বিতীয় অংশ হচ্ছে এজাক্সের জন্য।

প্রথম অংশের জন্য ব্যবহৃত prevAll() মেথডের কাজ হচ্ছে পুর্ববর্তী সব element কে ধরা আর andSelf() method বর্তমান সিলেক্টেড element কে ধরা।সুতরাং

  1. $(this).prevAll().andSelf().addClass('rating_over');

এই লাইন দ্বারা ratings ক্লাস সম্বলিত ডিভের ভিতরে যেকোন লিংকের উপর (a tag) mouse নিয়ে গেলে (যেহেতু hover() event হ্যান্ডলার ব্যবহার করা হয়েছে) সেই লিংক সহ পুর্ববর্তী সব a ট্যাগে "rating_hover" নামে একটি class যোগ হবে। এরপরের ৪ নম্বর লাইনটি দিয়ে "rating_hover" class টি মুছে দেয়া হচ্ছে যদি পরবর্তী কোন a ট্যাগে এই class টি থেকে থাকে।

তারপরে যে function টি আছে সেটি mouse যখন সরিয়ে নেবে তখন কি সেই জন্য।অর্থ্যাৎ

  1. $(this).prevAll().andSelf().removeClass('rating_over');

এই লাইন দিয়ে এই নির্দেশনা দেয়া হচ্ছে যে "যে লিংকের উপরে থেকে মাউস সরিয়ে নেয়া হচ্ছে সেটাসহ তার পুর্ববর্তী সব a ট্যাগ থেকে rating_over ক্লাস মুছে দাও" 

এরপর দ্বিতীয় অংশ এবং এটাই আসল অংশ।এই অংশে ratings অধীনস্থ a ট্যাগে ক্লিক করলে যে code ব্লকে ঢুকবে (১০ নম্বর লাইন) সেখানে প্রথমেই ২ টি  variable set করেছি।

rate ভেরিয়েবলে যে লিংকে ক্লিককরবে সেই লিংকের ভিতর যে মান আছে তা নেয়া হচ্ছে।

p_id এর ভিতর পন্যের ID করা হচ্ছে

এরপর ajax() method শুরু হয়েছে,এই মেথডে প্যারামিটার হিসেবে পাঠানোর জন্য অনেক অনেক option আছে।আমরা মাত্র ৩টি ব্যবহার করেছি।

type অপশনে data কোন পদ্ধতিতে নেবে সেটা উল্লেখ করে দিতে হয় যেমন আমরা দিয়েছি GET method।

url অপশনে যে পেজে request পাঠাতে চান সেই পেজের ঠিকানা, By default বর্তমান পেজ থাকে। আমরা যেহেতু method GET দিলাম তাই এখানে url টি সেভাবে configure করে নিয়েছি যাতে url থেকে php পেজে data নিতে পারি।url টিতে দুটি প্যারামিটার নিয়েছি একটি হচ্ছে r যার মান হবে rate ভেরিয়েবলে যেটা আসবে সেটা।এরপর id প্যারামিটারে নিচ্ছি p_id ভেরিয়েবলের মান।

*জাভাস্ক্রিপ্টে + (প্লাস চিহ্ন) দিয়ে এভাবে concatenate করতে হয়।

success অপশনে একটি function করেছি।এখানে এরুপ কলব্যাক ফাংশন ব্যবহার করতে পারেন যেটা শুধুমাত্র এজাক্স request অপারেশন সফল হলেই execute হবে। 

error একটি অপশন আছে যেটা ব্যবহার করলে যদি কোন ভুল হয় তাহলে সেটা সম্পর্কে তথ্য বের করা যায়।এগুলিকে বলে লোকাল Ajax ইভেন্ট এবং শুধুমাত্র ajax() মেথডের ভিতরেই রাখতে হবে যদি একাধিক ajax() মেথড ব্যবহার করেন (একই স্ক্রিপ্টে)।এছাড়া কিছু global ajax event আছে যেগুলি সব ajax মেথডে না লিখে একবারে স্ক্রিপ্টের কোথাও লিখে দিতে পারেন ফলে আর বারবার সব মেথডে এগুলি আলাদা আলাদা কল করতে হবেনা। ajaxSetup() দিয়ে গ্লোবাল ইভেন্ট সেট করা যায়।ajaxStart() এবং ajaxStop() মেথড দিয়ে যেকোন ডিভে লোডিং এর ছবিটি দেখাতে পারেন

যাইহোক অনেক অপশন আছে সবগুলি আলোচনা করা প্রয়োজনীয় নয় কারন মুল কোড লেখা বুঝতে পারলে এরপর অপশনগুলি জেকোয়েরির সাইট থেকে দেখলেই ব্যবহার করতে পারবেন।

ajax মেথডে url এ যে php পেজ দেয়া আছে সেই পেজ

ratings.php ফাইল

1.<?php

2.$ip = $_SERVER['REMOTE_ADDR'];

3.$db = mysql_connect('localhost','root','');

4.mysql_select_db('rating_db',$db);

  1. $query = 'INSERT INTO ratings(product_id,rating,client_ip) VALUES("'.$_GET['id'].'","'.$_GET['r'].'","'.$ip.'")';

6.$result = mysql_query($query);

7.?>

ব্যাখ্যা:যেহেতু আমরা ajax মেথডে GET method দিয়ে data পাঠাচ্ছি তাই এই পেজে আমরা url থেকে সেই ডেটাগুলি ধরতে পারব।এই পেজে সেটাই করেছি।url থেকে ডেটা নিয়ে ডেটাবেসে ইনসার্ট করে দিয়েছি। আর ইউজারের IP Address বের করার জন্য $_SERVER অ্যারে ব্যবহার করেছি।পিএইপি ম্যানুয়ালে এই অ্যারে সম্পর্কে আরো বিস্তারিত তথ্য পাবেন।REMOTE_ADDR এর জায়গায় আরো অনেক option দেয়ার ব্যবস্থা আছে এবং এসব দিয়ে হেডার,ব্রাউজার, location ইত্যাদি বের করা যায়।

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.}

বি.দ্র:সাধারনত একজন user একবার রেটিং দিতে পারে একটা পন্যের জন্য।তাই প্রফেশনালি এরুপ rating system তৈরীর সময় যেটা করা হয় যে rating submit করার সাথে সাথে ঐ ইউজারের আইপি এবং তার ID ইত্যাদি দিয়ে database থেকে চেক করা হয় যে সে এর আগে এই পন্যে কোন rating দিয়েছে কিনা?দিয়ে থাকলে সেটা মেসেজ দেখাবে যে আগে রেটিং দিয়েছেন আর দিতে পারবেননা।আমরা এভাবে করিনি কারন অনেক আইপ দিয়ে check করতে হত যেটা অনেক বিরক্তিকর।আমরা শুধু ধারনা এবং সিস্টেম তৈরীর basic দিয়ে দিলাম এরপর আপনি আপনার এপ্লিকেশনের চাহিদা অনুযায়ী ঠিক করে নেবেন।

এই প্রজেক্টটির যেহেতু সার্ভারে রান করাতে হবে এবং ডেটাবেস লাগে তাই এখানে সরাসরি Output দেয়া হয়নি,আপনি সার্ভারে রান করান