Post Search

Jquery & Ajax

jQuery plugin development | SP Foundationbd

Jquery র plugin তৈরীর জন্য প্রথমেই নির্দিষ্ট একটি কাঠামোর ভিতর কোড লিখতে হয়।এই কাঠামো নিজের ইচ্ছেমত তৈরী করতে পারেন (নিয়মানুযায়ী)।তবে সাধারনত একই কাঠামো বেশি ব্যবহার করা হয়ে থাকে যদি পরিবর্তন করার প্রয়োজনীয় কারন না থাকে।যেমন আমি এখানে স্লাইডিং এর জন্য একটা ছোট্ট plugin তৈরী করব এবং এর কাঠামো হবে এরুপ:  1.(function($) {

2.$.fn.sliderPlugin = function() {

3.return this.each(function() {

4.//here goes our plugin code

5.});

6.};

7.})(jQuery);

ব্যাখ্যা: $ চিহ্ন এখানে Jquery Object (jQuery) এর শটকার্ট প্রতীক।এভাবে ফাংশনের প্যারামিটার হিসেবে এই চিহ্ ..... ..... ......

Java Script

জাভাস্ক্রিপ্ট ডেট tutorials | SP Foundationbd

তারিখ, সময় ইত্যাদির জন্য জাভাস্ক্রিপ্টে Date অবজেক্ট আছে। এই অবজেক্টে প্রচুর method আছে তারিখ নিয়ে কাজ করার জন্য। Date অবজেক্ট তৈরী করতে হয় new keyword দিয়ে। যেমন

1.var currentTime = new Date();

Date() কনস্ট্রাক্টরের মধ্যে কোন প্যারামিটার না দিলে বর্তমান সময় নিয়ে একটা object তৈরী হয়।

তবে এখানে প্যারামিটার দেয়া যায়। যেমন

1.new Date(milliseconds);

2.new Date(datestring);

3.new Date(year,month,date[,hour,minute,second,millisecond ]);

milliseconds (যেমন 10000, 5000 ইত্যাদি) দিলে 1970/01/01 থেকে তত সেকেন্ড যোগ হবে যেমন ১০০০০ দিলে ১০ সেকেন্ড যোগ হবে।

datestring (যেমন August 26, ..... ..... ......

Java Script

জাভাস্ক্রিপ্ট Popup tutorials | SP Foundationbd

javascript  popup এখন কম ব্যবহার হয়, আগে খুব প্রচলন ছিল। user কে অতিরিক্ত তথ্য আলাদা window খুলে দেখানো যায় পপআপ দিয়ে।

window.open() এই্ ফাংশন ব্যবহার করে মূলত পপআপ তৈরী করা হয়। open() এর ভিতর বেশ কিছু প্যারামিটার ব্যবহারের সুযোগ যেগুলি দিয়ে popup উইন্ডোকে customize করা যায়।

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<script>

05.function pop() {

06.window.open( "http://www.google.com/" );

07.}

08.</script>

09.</head>

10.<body>

  1.  

12.<form>

13.<input type="button" onClick="pop()" value="Old fashion pop">

14.</form>

15.<p onClick="pop()">Another pop</p>

  1.  

17.</body>

18.</html>< ..... ..... ......

Jquery & Ajax

jQuery ajax method | SP Foundationbd

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

Application সম্পর্কে:ডেটাবেসে বিভিন্ন পন্যের তথ্য থাকবে।প্রথমে এই এপ্লিকেশনের কাজ হচ্ছে database থেকে php দিয়ে এই পন্যের তালিকা প্রাসঙ্গিক তথ্যসহ একটা ওয়েব পেজে দেখাবে।এই পেজে প্রতিটি পন্যের বিপরীতে রেটিং দেয়ার অপশন থাকবে।যে কেউ রেটিং দেয়ার সাথে এই ajax() method দিয়ে সেটাকে database save করা হবে এবং সব রেটিং ক্যালকুলেশন করে সবশেষে গড় রেটিং দেখাবে।ডেটাবেস এ ..... ..... ......

Jquery & Ajax

jQuery load method Tutorial in Bangla | SP Foundationbd

Jquery তে বেশ কিছু method আছে যেগুলি এজাক্স ব্যবহার করে সার্ভারের সাথে data বিনিময় বা data তুলে এনে ব্রাউজারে দেখাতে পারে। Ajax এমন একটি নতুন প্রযুক্তি যেটা দিয়ে একটা ওয়েব পেজ reload করা ছাড়াই সার্ভারের সাথে যোগাযোগ করতে পারে।নতুন একটা পিএইচপি পেজে যাবে ঠিকই এবং পিএইচপি কোড ভিতরে ভিতরে execute হবে তবে বাইরে থেকে দেখা যাবে শুধু সার্ভার থেকে পাওয়া ডেটা বা কোন ফলাফল।আর যতক্ষন কোড এক্সিকিউট হবে ততক্ষন ইউজারকে সাধারনত একটা loading এর ছবি দেখানো হয় যাতে সে বুঝতে পারে যে কোন ক ..... ..... ......

Jquery & Ajax

jQuery tab system tutorial | SP Foundationbd

এবার একটি Tab system তৈরী করে দেখাচ্ছি

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

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

08.</head>

  1. 10.<body>

11.<div id="tab_system">

12.<ul id="tab_bar">

13.<li>

14.<a href="#">Current Hits</a>

15.</li>

16.<li>

17.<a href="#">Our Favourites</a>

18.</li>

19.<li>

20.<a href="#">All Time</a>

21.</li>

22.</ul>

23.<ul id="current" class="tab_list">

24.<li>

25.<a href="http://www.spfoundationbd.com">Who behind behind this | About us</a>

26.</li>

27.<li>

28.<a href="http://www. spfoundationbd.com"> ..... ..... ......

Java Script

জাভাস্ক্রিপ্ট রিডাইরেক্ট Tutorials | SP Foundationbd

Page রিডাইরেক্ট করা অনেক সময় প্রয়োজন হয়ে পরে। Page রিডাইরেক্ট হচ্ছে user একটা পেজে যাবে এবং যাওয়ার সাথে সাথে অটোমেটিক অন্য কোন পেজে তাকে নিয়ে যাবে। সাধারনত নিম্নোক্ত ক্ষেত্রগুলিতে page রিডাইরেক্ট করা প্রয়োজন হয়

==> আপনি আপনার সাইটের domain পরিবর্তন করেছেন। ধরুন আগে আপনার সাইটের নাম ছিল www.spfoundationbd.com এখন আপনি সাইটের domain পরিবর্তন করে নতুন নাম নিয়েছেন www. spfoundationbd.com. কিন্তু ইউজার এটা জানেনা যে আপনি নাম বদলেছেন। যাইহোক www. spfoundationbd.com এ ইউজার যখন ঢুকবে তখন javascript দিয়ে রিডাইরেক্ট করে ইউজ ..... ..... ......

Java Script

জাভাস্ক্রিপ্ট Print tutorials | SP Foundationbd

JavaScript print function টি একই কাজ করে যেমন টি করে আপনার ব্রাউজার উইন্ডোর file মেনুর print অপশনটি । JavaScript print ফাংশন টি  ওয়েবপেজ এর কনটেন্ট কে ব্যবহারকারীর(user)প্রিন্টারে পাঠিয়ে দেয়।

অনেকে এই function টিকে অনর্থক মনে করে।অনেকে আছে যারা computer সম্বন্ধে ভাল যানে না তাদের ক্ষেত্রে এই option টি থাকলে অনেক সুবিধা হবে।

JavaScript Print Script - window.print():

JavaScript print function যা window.print() এটি webpage কে print করে ।এই function টি কে html বাটনে রাখবো যা onClick event এর মাধ্যমে কাজ করবে।

1.<form>

2.<input type="button" value="Print This Page" onClick="window.print()" /> ..... ..... ......

Java Script

জাভাস্ক্রিপ্ট Prompt tutorials | SP Foundationbd

Javascript প্রম্পট ব্যবহার করে ইউজারের কাছ থেকে তথ্য নেয়া যায়। input বক্সে user তথ্য দিয়ে Ok দিলে (Input না দিলেও) true return করবে এবং Cancel দিলে false return করবে।

prompt() ফাংশনে দুটি প্যারামিটার দেয়া যায়। প্রথম প্যারামিটারে আপনি যে message user কে দেখাতে চান সেটা আর দ্বিতীয় প্যারামিটারে input বক্সে যদি কোন default মান দেখাতে চান সেটা। যেমন

01.<head>

02.<script type="text/javascript">

  1. 04.functionprompter() {

05.var answer = prompt("What is your favorite site", " spfoundationbd.com")

06.if(answer){

07.alert( "Your favorite site is " +  answer + "!");

08.}else{

09.alert("canceled");

10.}

11.}

  1.  

13.</script>

14.</h ..... ..... ......

Java Script

জাভাস্ক্রিপ্ট Confirm tutorials | SP Foundationbd

alert() method দিয়ে শুধু একটা message দেয়া যায় এবং OK click করা ছাড়া ইউজারের আর কোন option নেই। confirm() আরেকটা method আছে এটা Ok এবং Cance l এদুটি option সহ message (alert) প্রদর্শন করে। ফলে ইউজার Ok অথবা Cancel করতে পারবে।

মূলত যে কাজে এটা বেশি ব্যবহার হয় সেটা হল ডিলিটের সময় user কে একটা সতর্কীকরন মেসেজ দেয়া। প্রথম ক্লিকেই user কে সতর্কীকরন message দেয়া হয় যে আপনি নিশ্চিত কিনা যে delete করার ব্যাপারে যদি Ok দেয় তাহলে confirm() method true return করে এবং Cancel দিলে false return করে।

ডিলিটের ব্যাপার আসে যখন php তে কাজ করবেন এবং ইউজারের জন্য কোন panel ইত্যাদি থ ..... ..... ......