Mar 16

MongoDB সীমাবদ্ধ রেকর্ডস

MongoDB সীমাবদ্ধ রেকর্ডস
নয়ন চন্দ্র দত্ত

* Limit() পদ্ধতি
MongoDB তে রেকর্ডকে সীমাবদ্ধ করতে হলে limit() মেথড বা পদ্ধতি ব্যবহার করতে হবে। Limit() পদ্ধতি এক নাম্বারের টাইপ সমর্থন করে যা ডকুমেন্টের নাম্বার এবং আপনি প্রদর্শন করতে চাইছেন।

সিনট্যাক্সঃ
limit() এর বেসিক সিনট্যাক্স নিম্নরূপঃ

>db.COLLECTION_NAME.find().limit(NUMBER)

উদাহরণঃ
নিম্নলিখিত তথ্যের সাথে myycol কালেকশনটি বিবেচনা করুনঃ

{ “_id” : ObjectId(5983548781331adf45ec5), “title”:”MongoDB Overview”}
{ “_id” : ObjectId(5983548781331adf45ec6), “title”:”NoSQL Overview”}
{ “_id” : ObjectId(5983548781331adf45ec7), “title”:”Tutorials Point Overview”}

ডকুমেন্ট quering এর সময় নিচের উদাহরণটি কেবলমাত্র ২টি ডকুমেন্ট প্রদর্শন করবেঃ

>db.mycol.find({},{“title”:1,_id:0}).limit(2)
{“title”:”MongoDB Overview”}
{“title”:”NoSQL Overview”}
>

যদি আপনি Limit() পদ্ধতিতে ডকুমেন্টের নাম্বার উল্লেখ না করেন তাহলে এটি কালেকশনের সকল ডকুমেন্ট প্রদর্শন করবে।

* MongoDB Skip() পদ্ধতি
এছাড়াও limit() পদ্ধতি ছাড়া আরও একটি পদ্ধতি skip() আছে যা ডকুমেন্টের সংখ্যার টাইপ সমর্থন করে এবং সেই নাম্বারের ডকুমেন্ট এড়িয়ে(skip) চলে।

সিনট্যাক্সঃ
skip() এর বেসিক সিনট্যাক্স নিম্নরূপঃ

>db.COLLECTION_NAME.find().limit(NUMBER).skip(NUMBER)

উদাহরণঃ
নিম্নলিখিত উদাহণটি শুধু দ্বিতীয় ডকুমেন্ট প্রদর্শন করবেঃ

>db.mycol.find({},{“title”:1,_id:0}).limit(1).skip(1)
{“title”:”NoSQL Overview”}
>

অনুগ্রহ করে লক্ষ্য করুন- skip() পদ্ধতিতে ডিফল্ট মান ০ ।

Mar 16

A Modern Web Dev’s Toolkit . ওয়েব ডেভেলপার দের আধুনিক টুলস

A Modern Web Dev’s Toolkit . ওয়েব ডেভেলপার দের আধুনিক টুলস

নোড এবং এন পি এমঃ

নোড এনেছে সার্ভার ও ডেস্কটপ জাভা স্ক্রিপ্ট। প্রথমে যদিও জাভা স্ক্রিপ্ট প্রধানত ব্রাউজার এর ভাষার ওপর ভিত্তি করে  ব্যবহার করা হত, এখন নোড দ্বারা আপনি আপনার সার্ভার সাইড ব্যাক বা একটি ডেস্কটপ অ্যাপ্লিকেশন তৈরি করতে পারেন  আপনার নোড-ওয়েবকিটের সাহায্যে (যারা বেশী উদ্বিগ্ন জন্য)। Node.js® হলো, ক্রোমের জাভাস্ক্রিপ্ট রানটাইম উপর নির্মিত একটি প্ল্যাটফর্ম, যা দ্বারা  দ্রুত ও সহজে আকার পরিবর্তনযোগ্য নেটওয়ার্ক অ্যাপ্লিকেশন।

একটি ওয়েব সার্ভার তৈরি করা অত্যন্ত সহজ যদি নিম্নক্ত লাইনগুলো অনুসরণ করা যায়।

var http = require(‘http’);

http.createServer(function (req, res) {

res.writeHead(200, {‘Content-Type’: ‘text/plain’});

res.end(‘Hello World\n’);

}).listen(1337, ‘127.0.0.1’);

console.log(‘Server running at http://127.0.0.1:1337/’);

 

এটি চালানোর জন্য করতে হবে

$ node start

Server running at http://172.0.0.1:1337/

 

নোড এর অন্নতম একটি বিষয় হলো এর গুরুত্বপূর্ণ কমিউনিটি, যা NPM ডিরেক্টরি, নোড প্যাকেজ ম্যানেজার তৈরি করে এবং তথাকথিত নোড মডিউল প্রকাশ করে। বর্তমানে এ সম্পর্কে 90,000 মডিউল আছে এবং গত মাসে প্রায় 390,000 ডাউনলোড করা হয়েছে।

নোড ইনস্টলিং এর নিয়মঃ

শুরুতেই আপনাকে প্রথমে নোড রানটাইম ইনস্টল করতে হবে। এটি স্বয়ংক্রিয়ভাবে আপনার মেশিনে NPM ইনস্টল করবে।

এটি সম্পন্ন হলে, লিখতে হবে

$ node -v

নোড প্যাকেজ ইনস্টলিং এর নিয়মঃ

একটি নোড প্যাকেজ ইনস্টল করা সহজ।

$ npm install grunt

 

এটি node_modules নামক একটি ফোল্ডারে ইনস্টল হবে।

একটি প্যাকেজ আন–ইনস্টল করতেঃ

একটি প্যাকেজ আনইনস্টল করতে নিম্নক্ত পদ্ধতি অবলম্বন করুন।

$ npm uninstall –save-dev grunt

এর ফলে package.json থেকে প্যাকেজটি মুছে যাবে।

 

বিশ্বব্যাপী প্যাকেজসমূহঃ

প্যাকেজ ইনস্টলের পাশাপাশি dev বা রানটাইম নির্ভর করে।

$ npm install grunt –g

 

প্যাকেজ পুনরুদ্ধারের নিয়মঃ

আপনার VCS করতে node_modules ফোল্ডার কমিট করবেন না।

রুট ডিরেক্টরিতে নির্বাহ করতেঃ

$ npm install

সংস্করণ করাঃ

  • একটি সংস্করণ সংখ্যা হলো MINOR.PATCH
  • যখন আপনি অসামঞ্জস্যপূর্ণ মেজর সংস্করণ করেন, তখন API- র পরিবর্তন হয়।
  • ক্ষুদ্র সংস্করণ হয় যখন আপনি পিছন দিকে একটি উপযুক্ত পদ্ধতিতে কার্যকারিতা যোগ করেন, এবং যখন আপনি পিছন দিকে-সামঞ্জস্যপূর্ণ বাগ সংশোধন করেন, তখন প্যাচ সংস্করণ হয়।
  • NPM 1.3.5: প্যাকেজ (সবচেয়ে নিয়ন্ত্রণমূলক) দেওয়া সংস্করণ ব্যবহার করতে বলে।
  • বাড়তি প্যাচ সংস্করণের (সাধারণত বাগ) জন্য3.5 বা 1.3.x: NPM শুধুমাত্র আপগ্রেড দেওয়া প্যাকেজকে এভাবে উল্লেখ করে => = 1.3.5-0
  • 4.0-0: NPM এটি সংজ্ঞায়িত করে এভাবে ~ 1.3.5
  • ^ 1.3.5: <2.0.0: এটি প্রধান রিলিজের চেয়ে পরবর্তী কোনো সংস্করণে আপগ্রেড করতে NPM এভাবে উল্লেখ করেঃ :<2.0.0 ।
  • যখন আপনি নোড প্যাকেজ ইনস্টল করবেন তখন নতুন NPM 1.3.5 ডিফল্ট সিস্টেম এভাবে টা প্রদর্শন করবে => = 1.3.5-0 <2.0.0-0

 

 

বোয়ারঃ

এটা একটি প্যাকেজ ম্যানেজার যা আপনার সামনের শেষ উন্নয়ন লাইব্রেরি যেমন jQuery, বুটস্ট্র্যাপ এর জন্য।

$ npm install -g bower

 

একটি bower.json ফাইলের উদাহরণ।

একটি প্যাকেজ আন-ইনস্টল করতে হলে এই পদ্ধতি অনুসরণ করুনঃ

$ bower uninstall –save jquery

ইওম্যানঃ

ইওম্যান এক ধরণের জেনারেটর দ্বারা ।

ইওম্যান এর জেনারেটরগুলো একটি নোড মডিউল হিসাবে বিতরণ করা হয়।

এটি ইনস্টল করতেঃ

$ npm install -g yo

Gruntfile.js :

Gruntfile.js সেই স্থান যেখানে আপনি আপনার প্রকল্পের কাজটি কনফিগার করবেন। এই ফাইলটি সহজে শুরু করতে:

module.exports = function(grunt) {

// Do grunt-related things in here

};

গ্রান্ট মডিউলসঃ

গ্রান্ট মডিউল নোড এর NPM ডিরেক্টরির মাধ্যমে বিতরণ করা হয়। গ্রান্ট মডিউলসই  ইনস্টল করতে আমার দেখানো পদ্ধতি অনুসরণ করুনঃ

$ npm install –save-dev grunt-contrib-uglify

গ্রান্ট টাস্কের কারণ বিশ্লেষণঃ

আপনি বিল্ড টাস্ক নির্ধারণ শুরু করতে চাইলে আমার আগে উল্লেখ করা গ্রান্ট বইটির উদাহরণস্বরূপ stringCheck টাস্কটিকে অনুসরণ করবেন।

module.exports = function(grunt){

…

grunt.initConfig({

stringCheck: {

file: ‘./src/somefile.js’,

string: ‘console.log(‘

}

});

}

আপনি দেখতে পাবেন, একটি টাস্ক কেবলি একটি ফাংশন যা আপনি রেজিস্টার করবেন গ্রান্ট এর সাথে।

module.exports = function(grunt){

grunt.registerTask(‘stringCheck’, function() {

//fail if configuration is not provided

grunt.config.requires(‘stringCheck.file’);

grunt.config.requires(‘stringCheck.string’);

 

//retrieve filename and load it

var file = grunt.config(‘stringCheck.file’);

var contents = grunt.file.read(file);

 

//retrieve string to search for

var string = grunt.config(‘stringCheck.string’);

 

if(contents.indexOf(string >= 0))

grunt.fail.warn(‘”‘ + string + ‘” found in “‘ + file + ‘”‘);

});

}

একাধিক টাস্কঃ

গ্রান্ট আপনাকে দিচ্ছে একটি টাস্ক সঞ্চালনের গ্রুপ।নিম্নক্তঃ

module.exports = function(grunt){

…

grunt.initConfig({

stringCheck: {

target1: {

file: ‘./src/somefile.js’,

string: ‘console.log(‘

},

target2: {

file: ‘./src/somefile.js’,

string: ‘eval(‘

}

}

});

}

 

 

গ্লোবিং:

 

ফাইল গ্লোবিং বা ওয়াইল্ডকার্ড সাদৃশ্যকরণ  একটি বড় গ্রুপের ফাইল ক্যাপচার করার একটি পদ্ধতি।

চলমান কর্মঃ

আপনি যদি একটি টাস্ক রান করতে চাইলে নিম্নের পদ্ধতি অনুসরণ করুনঃ

$ grunt task1 task2

যদি আপনার একাধিক টাস্কের উদ্দেশ্য থাকে, তাহলে নিম্নক্ত পদ্ধতি অনুসরণ করুনঃ

$ grunt task:target1

আপনি যদি এর পরিবর্তে গ্রান্ট চালান, তাহলে ডিফল্ট টাস্ক চলতে থাকবে যা আপনি নিম্নরূপ কনফিগার করতে পারেনঃ

module.exports = function(grunt) {

grunt.registerTask(‘build’, function() {

console.log(‘building…’);

});

 

grunt.registerTask(‘test’, function() {

console.log(‘testing…’);

});

 

grunt.registerTask(‘default’, [‘build’, ‘test’]);

};

 

গাল্পঃ

নোড কখনই পূর্ণতা পাবে না, যদি আমরা গাল্পকে উল্লেখ না করি। গাল্প হলো জাভা স্ক্রিপ্ট টাস্কের এর আগত নতুন সঞ্চালক যা Node.js প্রবাহের উপর নির্মিত। এটি স্ক্রিপ্টকে সহজে নির্মাণের লক্ষে “অনুরক্ত কনফিগারেশন  কোড”  ব্যবহার করা হয়।

Mar 16

এসইও – ডিজাইন ও লেআউট বা বিন্যাস । SEO – Design & Layout

নয়ন চন্দ্র দত্ত

 

ওয়েবসাইট ডিজাইন এবং বিন্যাস আপনার সাইট সম্পর্কে প্রথম ছাপ ফেলে। অনেক সাইট আছে যা খুব অভিনব এবং নিয়মিত নেট surfers ঐ সাইটে পৌঁছায় এবং তৈরি করা ছাড়াই একটি ক্লিকেই এসে পড়ে।

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

প্রকৃত পেজে কন্টেন্ট প্রায় 10% এর একটি শব্দ ঘনত্ব থাকতে হবে এবং প্রায় 200 শব্দ এ তৈরী করা উচিত কিন্তু এসইও বিশেষজ্ঞদের এই সম্পর্কে অনেক মতামত আছে। অনেকে বলে, শব্দ ঘনত্ব 5% হতে হবে আবার অনেকে বলে এটা 20% হতে হবে। আপনি 10% সঙ্গে যেতে পারেন যা যথেষ্ট ভাল।

এখানে কয়েকটি নির্দেশিকা আছে যা একটি ওয়েব পেজ নকশা করার সময় আপনি মনে রাখতে পারেনঃ

  1. আপনার HTML element এর চেয়ে বেশি টেক্সট কন্টেন্ট থাকতে হবে
  2. কোন ফ্রেম নয় তারা সার্চ ইঞ্জি্নের শত্রু এবং সার্চ ইঞ্জিন ফ্রেমের শত্রু
  3. যদি সম্ভব হয় তাহলে কোন বিজ্ঞাপন দিবেন না কারণ বিজ্ঞাপনগুলো বেশীরভাগ জাভা – স্ক্রিপ্ট ব্যবহার করে যা পরামর্শ দেওয়া হয় না
  4. কোন জাভাস্ক্রিপ্ট না। যদি জাভাস্ক্রিপ্ট প্রয়োজন হয় তাহলে HTML ফাইল এ কোড ডাম্পিং চেয়ে একটি বহিরাগত ফাইল থেকে নিন
  5. টপিক পেজে কিছু নিবেন না যা পুরোপুরি মিশবে না
  6. কোন অপ্রয়োজনীয় ডিরেক্টরি দিবেন না। যথাসম্ভব রুটের কাছাকাছি আপনার ফাইল রাখুন।
  7. যদি না অত্যাবশ্যক হয় তাহলে কোন অভিনব জিনিস নয়। যেমন- ফ্ল্যাশ , স্প্ল্যাশ, প্রাণবন্ত gifs , rollovers , ইত্যাদি ।

Mar 16

সি প্রোগ্রামিং ল্যাংগুয়েজ পরিচিতি (C – Language Overview)

সি প্রোগ্রামিং ল্যাঙ্গুয়েজ
নাফিরুল ইসলাম

সি প্রোগ্রামিং ল্যাঙ্গুয়েজ প্রথম উদ্ভাবিত হয়েছিল ডেনিশ এম রিচসি এর মাধ্যমে যার প্রধান লক্ষই ছিল উনিক্স অপারেটিং সিস্টেম ব্যবহার উন্নত পর্যায়ে নিয়ে যাওয়া। DEC PDP-11 কম্পিউটারে ১৯৭২ এই সি প্রোগ্রামিং ল্যাঙ্গুয়েজ এর ব্যবহার প্রথম লক্ষ্য করা যায়।

১৯৭২ সালে ব্রায়ান কারনিঘান এবং ডেনিশ রিচসি দুজনে মিলে সি প্রোগ্রামিং ল্যাঙ্গুয়েজ প্রথম বিবরণ বের করেন যা এখন K&R Standard নামে পরিচিত।

উনিক্স অপারেটিং সিস্টেম, সি কম্পাইলার এবং উনিক্স অপারেটিং সিস্টেম এর সব গুরুত্বপূর্ণ প্রোগ্রামগুলো সি প্রোগ্রামিং ল্যাঙ্গুয়েজ এ রচিত। এখন তা বিভিন্ন কারনে টেকনোলজি বিশ্বে জনপ্রিয়তা অর্জন করেছে। এগুলোর মধ্যে উল্লেখযোগ্য কিছু কারন হল,
১. এটা সহজেয় শেখা যায়।
২. এটা একটা সুগঠিত প্রোগ্রামিং ভাষা।
৩. এটা সাবলীল প্রোগ্রাম তৈরিতে ব্যবহার করা হয়।
৪. এটা ল-লেভেল কাজ গুলো রক্ষা করতেও ব্যবহার করা হয়।
৫. এটা কম্পিউটার এর বিভিন্ন প্লাটফর্মে প্রয়োগ করা যাবে।

সি ল্যাঙ্গুয়েজ সম্পর্কে যা কিছু সত্যি

১. এটা প্রধানত উনিক্স অপারেটিং সিস্টেম তৈরিতে প্রথম উদ্ভাবন করা হয়েছিল।
২. ১৯৭০ সালের বি ল্যাঙ্গুয়েজ এর উত্তরসরি হল সি ল্যাঙ্গুয়েজ।
৩. এটা ১৯৮৮ সালে American National Standard Institute এর দ্বারা প্রাতিষ্ঠানিক রূপ দেয়া হয়েছিল।
৪. ১৯৭৩ সালে উনিক্স অপারেটিং সিস্টেম এর পুরোটাই সি ল্যাঙ্গুয়েজ এ তৈরি করা হয়েছিল।
৫. আজকের অতীব জনপ্রিয় অপারেটিং সিস্টেম লিনাক্স এর অপারেটিং সিস্টেম এবং RBDMS মাইএসকিউএল সি ল্যাঙ্গুয়েজ এ রচিত হয়েছে।

Mar 16

জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস (jQuery Mobile List Views)

জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস (jQuery Mobile List Views)
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার।)

জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস:

জেক্যুয়েরিতে মোবাইল লিস্ট ভিউস এইচটিএমএল এর আদর্শ লিস্টস্: অর্ডার্ড (<ol>) এবং আনঅডার্ড (<ul>).
একটি লিস্ট তৈরি করার জন্য, =”listview” ডাটা-রোলটি <ol> অথবা <ul> এলিমেন্ট এ প্রয়োগ করতে হবে।আইটেমকে ট্যাপাবল (tappable) করার জন্য লিস্ট আইটেম (<li>) এর মধ্যে লিংক স্পেসিফাই করুন:

উদাহরণ:
<ol data-role=”listview”>
<li><a href=”#”>List Item</a></li>
</ol>

<ul data-role=”listview”>
<li><a href=”#”>List Item</a></li>
</ul>

লিস্টকে বৃত্তাকার কোণ এবং কিছু মার্জিন এর মাধ্যমে স্টাইল করার জন্য “true” এট্ট্রিবিউট ডাটা-ইনসার্ট (data-insert) হিসেবে ব্যবহার করুন:
উদাহরণ:
<ul data-role=”listview” data-inset=”true”>

# ডিফল্টরূপে, একটি লিস্ট আইটেম এর ভিতরে লিংক স্বয়ংক্রিয়ভাবে একটি বাটন এ পরিণত হয় (ui-class=”btn” or data-role=”button” এগুলোর কোন প্রয়োজন নেই)।

লিস্ট ডিভাইডার (List Dividers
)
লিস্ট ডিভাইডার ব্যবহার করা হয় বিভাগ (categories) /সেকশনস কে সংগঠিত করা এবং গ্রুপ আইটেমস করার জন্য।

একটি লিস্ট ডিভাইডার কে নির্দেশ (specify) করার জন্য data-role=”list-divider” এট্রিবিউট একটি <li> এলিমেন্ট এ অন্তভূক্ত করতে হবে:

উদাহরণ:
<ul data-role=”listview”>
<li data-role=”list-divider”>Europe</li>
<li><a href=”#”>Norway</a></li>
<li><a href=”#”>Germany</a></li>
</ul>

আপনার যদি একটি বর্ণানুক্রমে তালিকা থাকে, (যেমন একটি ফোন বুক)<ol> অথবা <ul> এলিমেন্ট এ data-autodividers=”true” এট্রিবিউট jQuery মোবাইল স্বয়ংক্রিয়ভাবে সঠিক ডিভাইডার যোগ করে:

উদাহরণ:
<ul data-role=”listview” data-autodividers=”true”>
<li><a href=”#”>Adele</a></li>
<li><a href=”#”>Agnes</a></li>
<li><a href=”#”>Billy</a></li>
<li><a href=”#”>Calvin</a></li>
…
</ul>

data-autodividers=”true” অ্যাট্রিবিউট আইটেম এর টেক্সট এ প্রথম অক্ষর বড় হাতের অক্ষর দিয়ে বিভক্ত সৃষ্টি করে.

আরো উদাহরণ

Read-only lists
লিঙ্ক ছাড়া তালিকা তৈরি করুন (বাটন হবে না এবং ট্যাপাবল হবে না).

Panels
কিভাবে আপনার লিস্ট আইটেম এ প্যানেল সন্নিবেশ করবেন.

Mar 16

jQuery Mobile Panels

jQuery Mobile Panels
parijat biswas
student of CSE
university of Asia Pacific
jQuery Mobile Panels
jQuery Mobile panel বাম অথবা ডান দিক থেকে অতিরিক্ত content এর সাথে slide out হবে।
panel টি open করতে নিচের বাটন টি click করুন।
OPEN PANEL
একটি panel তৈরি করতে data-role=”panel” যোগ করুন <div> element এ ,এবং একটি id নির্ধারণ করুন।
এই <div> element এর ভিতরে যেকোনো html markup বসান, যা আপনি আপনার panel এ display করতে চান।
<div data-role=”panel” id=”myPanel”>
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
বি.দ্র. : panel markup অবশ্যই header,content এবং jQuery mobile page এবং footer inside এর পূর্বে বা পরে বসবে।
Panel এ প্রবেশ করতে একটি link তৈরি করুন যা panel id <div> কে প্রকাশ করে। যখন ব্যবহারকারী link এ click করবে, তখন panel টি open হবে।
<a href=”#myPanel” class=”ui-btn ui-btn-inline”>Open Panel</a>
নিচে একটি সাধারন উদাহরণ দেওয়া হলঃ
উদাহরণ
<div data-role=”page” id=”pageone”>
<div data-role=”panel” id=”myPanel”>
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
</div>

<div data-role=”header”>
<h1>Standard Page Header</h1>
</div>

<div data-role=”main” class=”ui-content”>
<p>Click on the button below to open the Panel.</p>
<a href=”#myPanel” class=”ui-btn ui-btn-inline”>Open Panel</a>
</div>

<div data-role=”footer”>
<h1>Footer Text</h1>
</div>
</div>
* নিজে চেষ্টা করে দেখুন।
Closing Panels ( Panel বন্ধ করা )
আপনি panel এর বাইরে click করে বা esc বাটন চেপে panel বন্ধ করতে পারেন।
<div> প্যানেল এ additional data-* যোগ করে আপনি clicking এবং swiping ফিচার disable করতে পারেনঃ
Attribute value description(ব্যাখ্যা)

data-dismissible true | false বাইরে click করলে panel close হবে নাকি হবে না, তা নির্ধারণ করে ।
data-swipe-close true | false swiping করলে panel close হবে নাকি হবে না , তা নির্ধারণ করে ।
আপনি একটি বাটন ব্যবহার করেও panel close করতে পারেনঃ শুধুমাত্র <div> panel এর ভিতরে data-rel=”close” এর সাথে একটি link যুক্ত করুন । আপনি href attribute দিয়েও page id point করতে পারবেন যখন ব্যবহারকারী panel close করবে।
উদাহরনঃ
<div data-role=”panel” id=”myPanel”>
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
<a href=”#pageone” data-rel=”close” class=”ui-btn ui-btn-inline”>Close Panel</a>
</div>
* নিজে চেষ্টা করে দেখুন।
Panel Display
আপনি panel এর display mode control করতে পারেন data-display attribute দিয়েঃ
Attribute value ব্যাখ্যা
data-display=”overlay” প্রদত্ত প্যানেল প্রদর্শন করে
data-display=”push” প্যানেল এবং পাতা একই সময়ে animate করে
data-display=”reveal” ডিফল্ট। পেজের নিচে panel থাকবে এবং প্রকাশ করবে যেহেতু page slide হবে।

উদাহরনঃ
<div data-role=”panel” id=”overlayPanel” data-display=”overlay”>
<div data-role=”panel” id=”revealPanel” data-display=”reveal”>
<div data-role=”panel” id=”pushPanel” data-display=”push”>

* নিজে চেষ্টা করে দেখুন।

Positioning Panels ( প্যানেল এর পজিশনিং)
স্বয়ংক্রিয়ভাবে panel পেজের বাম পাশে থাকবে । পেজের ডান পাশে panel নিতে data-position=”right” attribute টি ব্যবহার করতে হবে ।
উদাহরনঃ
<div data-role=”panel” id=”myPanel” data-position=”right”>
* নিজে চেষ্টা করে দেখুন।
তাছাড়া যখন page scroll করা শুরু হয় page content কোথাই / কিভাবে বসাবেন তা আপনি নির্ধারণ করতে পারবেন। স্বয়ংক্রিয়ভাবে, panel পেজ scroll করতে শুরু করবে( কিন্তু panel content পেজের একদম উপরে থাকবে ) যদি আপনি সবসময়ই panel content প্রদর্শন করতে চান তাহলে data-position-fixed=”true” attribute টি panel এ ব্যবহার করুন ।
উদাহরনঃ
<div data-role=”panel” id=”myPanel” data-position-fixed=”true”>
* নিজে চেষ্টা করে দেখুন।

Mar 16

jQuery Mobile পরিচিতি – jQuery Mobile Introduction

jQuery Mobile পরিচিতি

পারিজাত বিশ্বাস (Student of CSE at university of Asia Pacific)
jQuery Mobile হল, মোবাইল ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য একটি web framework.
আপনার jQuery Mobile শুরু করার আগে, নিচের বিষয়গুলো সম্পর্কে মৌলিক জ্ঞান থাকতে হবেঃ
১. HTML
২. CSS
৩. jQuery

jQuery Mobile কি?
jQuery Mobile হচ্ছে মোবাইল web অ্যাপ্লিকেশান তৈরির জন্য touch-optimized web framework.
jQuery Mobile সকল প্লাটফর্ম এ কাজ করে । যেমনঃ
১. iOS
২. অ্যান্ড্রয়েড
৩. ব্ল্যাকবেরি
৪. bada
৫. উইন্ডোজ ফোন
৬. সিম্বিয়ান
৭. পাম অপারেটিং সিস্টেম
৮. MeeGoo
jQuery Mobile হল jQuery library এর উপর নির্মিত ,আপনার যদি jQuery জানা থাকে তবে খুব সহজেই এটি শিখতে পারবেন।
এটি HTML5, CSS3, JavaScript এবং AJAX ব্যবহার করে সংক্ষিপ্ত স্ক্রিপ্টিং এর মাধ্যমে এর কাজ করে।

কেন jQuery Mobile ব্যবহার করবেন ?
jQuery mobile এর স্লোগান হচ্ছে, “ write less, do more”. এটি স্বয়ংক্রিয়ভাবে ওয়েব পেজ ডিজাইন করে যা খুব আকর্ষণীয় ও ব্যবহার করা সহজ এবং যা সকল মোবাইল ডিভাইস এ একই ভাবে কাজ করে ।
পূর্বে প্রতিটা OSOS এর জন্য আলাদা অ্যাপ্লিকেশান ব্যবহার করা হত। যেমনঃ
১. অ্যান্ড্রয়েড ও ব্ল্যাকবেরিতে java ব্যবহার করা হয়।
২. ios এ Objective C ব্যবহার করা হয়।
৩. উইন্ডোজ ফোনএ C# এবং .net ব্যবহার করা হয় ।
jQuery Mobile এই সমস্যার সমাধান করেছে। এটি শুধুমাত্র HTML, CSS and JavaScript ব্যবহার করে, যা সব মোবাইল ওয়েব ব্রাউজার জন্য আদর্শ !
Best Reading Experience (সেরা পড়ার অভিজ্ঞতা)।
jQuery Mobile সব মোবাইল ডিভাইসের উপর কাজ করে, এমনকি যদিও এটা ডেস্কটপ কম্পিউটারের কিছু বিষয় এর সাথে মিল থাকতে পারে ( সীমিত CSS 3 সমর্থন এর কারনে )।

Mar 16

জেকোয়েরি মোবাইলের পরিচয় ।

জেকোয়েরি মোবাইলের পরিচয় ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরি মোবাইল হলো একটি ওয়েব ফ্রেমওয়ার্ক যা মোবাইল ওয়েব-অ্যাপ্লিকেশন তৈরি করতে ব্যবহার করা হয় ।

জেকোয়েরি মোবাইল শেখার আগে যা জানা অত্যাবশ্যক
জেকোয়েরি মোবাইল শেখার আগে আপনাকে অবশ্যই এইচটিএমএল, সিএসএস এবং জেকোয়েরি সম্পর্কে ব্যাসিক জ্ঞান থাকতে হবে ।
এ জন্য আমাদের আগের টিউটোরিয়াল গুলো অবশ্যই শিখে নিতে হবে ।

জেকোয়েরি মোবাইল কি?
জেকোয়েরি মোবাইল হলো একটি টাচ সাপোর্টেড ওয়েব ফ্রেমওয়ার্ক যা মোবাইল ওয়েব-অ্যাপ্লিকেশন তৈরি করতে ব্যবহার করা হয় । জেকোয়েরি মোবাইল সকল প্রকার জনপ্রিয় স্মার্টফোন এবং ট্যাবলেট গুলোতে সাপোর্ট করে । এর ভিতর আইওএস, এন্ড্রোয়েড, ব্লাকবেরি, বাদা, ইউন্ডোজ ফোন, পাম ওয়েব ওস, সিম্বিয়ান, মিগো উল্লেখযোগ্য ।
জেকোয়েরি মোবাইল জেকোয়েরি লাইব্রেরি এর সবার উপরে থাকে । আপনি যদি জেকোয়েরি শিখে থাকেন তাহলে আপনার এটা শিখতে অনেক সহজ হবে । এটা এইচটিএমএল ৫, সিএসএস ৩ এবং অ্যাজাক্স ব্যবহার করে খুব অল্প পরিমান স্ক্রিপ্ট ব্যবহার করে কাজ করে ।

জেকোয়েরি মোবাইল কেনো ব্যবহার করবো ?
জেকোয়েরি মোবাইল হলো অল্প লেখা কিন্তু কাজ বেশি । মানে এটা কথা বলার চেয়ে কাজে দেখাতে বেশি ভালবাসে । এটা স্বয়ংক্রিয়ভাবে ওয়েব পেজ আকর্ষণীয়ভাবে তৈরি করে । এটা ব্যবহার খুবই সহজ । এটা সকল মোবাইল ডিভাইসে একই ভাবে কাজ করে ।

সকল মোবাইল ডিভাইস বা ওএস এ অ্যাপ্লিকেশন লিখতে যা ব্যবহার করেঃ
১। এড্রোয়েড এবং ব্লাকবেরি জাভা তে লেখা হয় ।
২। আইওএস Objective C তে লেখা হয় ।
৩। উইন্ডোজ ফোনে C# এবং .net প্রভৃতি ব্যবহার করা হয় ।

জেকোয়েরি মোবাইল এই সমস্যা দূর করতে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে যা সকল মোবাইল ওয়েব ব্রাউজারের জন্য যথেষ্ট ।

পড়াতে নতুন অভিজ্ঞতা
জেকয়েরি মোবাইল সকল মোবাইল ডিভাইসে খুব ভালভাবে সাপোর্ট করে । তাই আপনি সকল সাইটের সবকিছু পড়তে গিয়ে পাবেন এক নতুন অভিজ্ঞতা । কিন্তু ডেস্কটপ কম্পিউটারের ক্ষেত্রে জেকোয়েরি মোবাইল এর কিছু সামঞ্জস্য সমস্যা দেখা দেয় ।

তাহলে আজ জেকোয়েরি মোবাইল এর ধারণা নিলেন । পরের পোস্টে আরো বিস্তারিত নিয়ে হাজির হবো ।

Mar 16

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার । jQuery Mobile CSS Classes

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।

কি খবর ? কেমন আছেন সবাই? আজকে একটু ঠাণ্ডা বেশি, তাই সবাই মনে হয় লেপের ভিতর থেকে ভালোই আছেন । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখাবো ।

jQuery CSS Classes
জেকোয়েরি মোবাইল তার উপাদান সমূহকে বিভিন্ন ভাবে ডিজাইন করার জন্য সিএসএস ক্লাস ব্যবহার করে থাকে । আজ আমরা তাই সিএসএস ক্লাসের কিছু সাধারণ ব্যবহার দেখাবো ।

Global Classes
এই Global Classes গুলো জেকোয়েরি মোবাইল উইজেটস যেমন বাটন, টুলবার, প্যানেল, টেবিল, লিস্ট প্রভৃতি যোগ করার কাজে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-corner-all
ক্লাসের বর্ণনাঃ উপাদানের গোলাকার কোণা তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-shadow
ক্লাসের বর্ণনাঃ উপাদান সমূহের শ্যাডো মানে ছায়া তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-overlay-shadow
ক্লাসের বর্ণনাঃ মাত্রাতিরিক্ত ছায়া তৈরিতে এটা ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-mini
ক্লাসের বর্ণনাঃ উপাদাঙ্গুলোকে ছোট করতে এটা ব্যবহার করা হয় ।

Button Classes
<a> অথবা <button> উপাদানগুলোকে Global Classes এর সাথে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn
ক্লাসের বর্ণনাঃ বাটনগুলোকে বিভিন্ন স্টাইলে সাজাতে এই <a> উপাদানসমূহকে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-inline
ক্লাসের বর্ণনাঃ বাটন গুলোকে একই সারিতে দেখাতে এটি ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-icon-top
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার উপরে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-right
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার ডান দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-bottom
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার নিচে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-left
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার বাম দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-notext
ক্লাসের বর্ণনাঃ শুমুমাত্র আইকন দেখাবে ।

ক্লাসের নামঃ ui-btn-a|b
ক্লাসের বর্ণনাঃ a এবং b দুইটি ব্যাকগ্রাউণ্ডের কালার দেখাবে । a এর কালার ডিফল্ট থাকে যা হল ধূসর ব্যাকগ্রাউণ্ডের সাথে কালো লেখা । শুধুমাত্র b কালো ব্যাকগ্রাউণ্ডের সাথে সাদা লেখার পরিবর্তন করবে ।

Icon Classes
সকল <a> এবং <button> উপাদানের ক্লাসসমূহ দেয়া হল ।

ক্লাসের নামঃ ui-icon-action
ক্লাসের বর্ণনাঃ অ্যাকশন বাটন ।

ক্লাসের নামঃ ui-icon-alert
ক্লাসের বর্ণনাঃ একটা ত্রিভূজের ভিতর বিস্ময় চিহ্ন ।

ক্লাসের নামঃ ui-icon-audio
ক্লাসের বর্ণনাঃ স্পিকারের চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-l
ক্লাসের বর্ণনাঃ নিচের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-r
ক্লাসের বর্ণনাঃ নিচের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-l
ক্লাসের বর্ণনাঃ উপরের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-r
ক্লাসের বর্ণনাঃ উপরের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-l
ক্লাসের বর্ণনাঃ বাম দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-r
ক্লাসের বর্ণনাঃ ডান দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d
ক্লাসের বর্ণনাঃ নিম্নগামী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-back
ক্লাসের বর্ণনাঃ ব্যাক বাটন ।

ক্লাসের নামঃ ui-icon-bars
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল দাগের বাটন ।

ক্লাসের নামঃ ui-icon-bullets
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল ফোটার বাটন ।

ক্লাসের নামঃ ui-icon-calendar
ক্লাসের বর্ণনাঃ ক্যালেন্ডার বাটন ।

ক্লাসের নামঃ ui-icon-camera
ক্লাসের বর্ণনাঃ ক্যামেরা বাটন ।

ক্লাসের নামঃ ui-icon-carat-d
ক্লাসের বর্ণনাঃ নিম্নগামী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-l
ক্লাসের বর্ণনাঃ বামমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-r
ক্লাসের বর্ণনাঃ ডানমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-check
ক্লাসের বর্ণনাঃ চেক মার্ক ।

ক্লাসের নামঃ ui-icon-clock
ক্লাসের বর্ণনাঃ ঘড়ির আইকন ।

ক্লাসের নামঃ ui-icon-cloud
ক্লাসের বর্ণনাঃ মেঘের আইকন ।

ক্লাসের নামঃ ui-icon-comment
ক্লাসের বর্ণনাঃ কমেন্ট বা ম্যাসেজ বাটন ।

ক্লাসের নামঃ ui-icon-delete
ক্লাসের বর্ণনাঃ ডিলিট বাটন ।

ক্লাসের নামঃ ui-icon-edit
ক্লাসের বর্ণনাঃ এডিট অথবা পেন্সিল আইকন ।

ক্লাসের নামঃ ui-icon-eye
ক্লাসের বর্ণনাঃ চোখের আইকন ।

ক্লাসের নামঃ ui-icon-forbidden
ক্লাসের বর্ণনাঃ নিষিদ্ধ আইকন ।

ক্লাসের নামঃ ui-icon-forward
ক্লাসের বর্ণনাঃ ফরওয়ার্ড আইকন ।

ক্লাসের নামঃ ui-icon-gear
ক্লাসের বর্ণনাঃ সেটিংস বাটন ।

ক্লাসের নামঃ ui-icon-grid
ক্লাসের বর্ণনাঃ গ্রিড চিহ্ন ।

ক্লাসের নামঃ ui-icon-heart
ক্লাসের বর্ণনাঃ হার্ট অথবা লাভ চিহ্ন ।

ক্লাসের নামঃ ui-icon-home
ক্লাসের বর্ণনাঃ হোম বাটন ।

ক্লাসের নামঃ ui-icon-info
ক্লাসের বর্ণনাঃ ইনফরমেশন বাটন ।

ক্লাসের নামঃ ui-icon-location
ক্লাসের বর্ণনাঃ লোকেশন বাটন ।

ক্লাসের নামঃ ui-icon-lock
ক্লাসের বর্ণনাঃ তালার আইকন ।

ক্লাসের নামঃ ui-icon-mail
ক্লাসের বর্ণনাঃ মেইল আইকন ।

ক্লাসের নামঃ ui-icon-minus
ক্লাসের বর্ণনাঃ বিয়োগ আইকন ।

ক্লাসের নামঃ ui-icon-navigation
ক্লাসের বর্ণনাঃ নেভিগেশন আইকন ।

ক্লাসের নামঃ ui-icon-phone
ক্লাসের বর্ণনাঃ টেলিফোন আইকন ।

ক্লাসের নামঃ ui-icon-power
ক্লাসের বর্ণনাঃ পাওয়ার বাটন । বা অন অফ বাটন ।

ক্লাসের নামঃ ui-icon-plus
ক্লাসের বর্ণনাঃ যোগ বাটন ।

ক্লাসের নামঃ ui-icon-recycle
ক্লাসের বর্ণনাঃ রিসাইকেল চিহ্ন ।

ক্লাসের নামঃ ui-icon-refresh
ক্লাসের বর্ণনাঃ রিফ্রেশ বাটন ।

ক্লাসের নামঃ ui-icon-search
ক্লাসের বর্ণনাঃ সার্চ বাটন ।

ক্লাসের নামঃ ui-icon-shop
ক্লাসের বর্ণনাঃ দোকান অথবা ব্যাগের আইকন ।

ক্লাসের নামঃ ui-icon-star
ক্লাসের বর্ণনাঃ তারার চিহ্ন ।

ক্লাসের নামঃ ui-icon-tag
ক্লাসের বর্ণনাঃ ট্যাগ বাটন ।

ক্লাসের নামঃ ui-icon-user
ক্লাসের বর্ণনাঃ ব্যবহারকারী বাটন ।

ক্লাসের নামঃ ui-icon-video
ক্লাসের বর্ণনাঃ ভিডিও বা ক্যামেরা আইকন ।

Theme Classes
জেকোয়েরি মোবাইল সাধারণত ধূসর এবং কালো এই দুই ধরনের থিম সরবরাহ করে থাকে । কিন্তু আপনি আপনার ইচ্ছামত এটা পরিবর্তন করে নিতে পারেন । আপনি (a-z) মত আপনার থিমটি কাস্টোমাইজ করতে পারবেন ।

ক্লাসের নামঃ ui-bar-(a-z)
ক্লাসের বর্ণনাঃ হেডার, ফুটার এবং অন্যান্য বারের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-body-(a-z)
ক্লাসের বর্ণনাঃ কনটেন্ট ব্লক যেমন page content panes , listview items, popups, collapsibles, loader, sliders, এবং panels এর কালার নির্দেশ করে ।

ক্লাসের নামঃ ui-btn-(a-z)
ক্লাসের বর্ণনাঃ বাটন এবং আইকনের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-group-theme-(a-z)
ক্লাসের বর্ণনাঃ গুরুপ ভিত্তিক রঙ নির্দেশ করে দেয় ।

ক্লাসের নামঃ ui-overlay-(a-z)
ক্লাসের বর্ণনাঃ ডায়ালগ, পপ-আপ এবং পেজের উপাদানসমূহের রঙ ঠিক করে দেয় ।

ক্লাসের নামঃ ui-page-theme-(a-z)
ক্লাসের বর্ণনাঃ প্রত্যেক পেজের রঙ নির্দেশ করে ।

Grid Classes
গ্রিডের কলাম গুলো বিন্নভাবে থাকতে পারে। সাধারণত ৫ ধরণের গ্রিড ব্যবহার করা হয়ে থাকে ।

গ্রিড ক্লাসঃ ui-grid-solo
কলামঃ 1
কলামের ব্যাপ্তিঃ 100%
সুসঙ্গত হয়ঃ ui-block-a

গ্রিড ক্লাসঃ ui-grid-a
কলামঃ 2
কলামের ব্যাপ্তিঃ 50% / 50%
সুসঙ্গত হয়ঃ ui-block-a|b

গ্রিড ক্লাসঃ ui-grid-b
কলামঃ 3
কলামের ব্যাপ্তিঃ 33% / 33% / 33%
সুসঙ্গত হয়ঃ ui-block-a|b|c

গ্রিড ক্লাসঃ ui-grid-c
কলামঃ 4
কলামের ব্যাপ্তিঃ 25% / 25% / 25% / 25%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d

গ্রিড ক্লাসঃ ui-grid-d
কলামঃ 5
কলামের ব্যাপ্তিঃ 20% / 20% / 20% / 20% / 20%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d|e

আর এর ভিতরেই কিন্তু আমরা জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখে গেলাম । কোথাও না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।

Mar 16

জেকোয়েরি দিয়ে মোবাইল টুলবার এর বাটন বানানো . jQuery Mobile Toolbars

জেকোয়েরি দিয়ে মোবাইল বাটন বানানো

লেখকঃ মোস্তাফিজুর ফিরোজ ।

আমরা প্রত্যেক সাইটে ঢুকলে অনেক ধরণের বাটন দেখি । এগুলো আমাদের সাইটটিকে খুব সহজে ভিজিট করতে আর এক পেজ থেকে হোম পেজ অথবা অন্য কোন পেজে নেভিগেশনে সাহায্য করে । আসুন আজ খুব সহজে জেকোয়েরি দিয়ে বাটন বানানো শিখবো ।

জেকোয়েরি মোবাইল বাটনগুলো সাধারণত হেড এবং ফুটারে বসানো হয়ে থাকে । কারণ এই দুইটি স্থান থেকেই সবাই পেজ নেভিগেশন করতে চায় ।

হেডার বারের কোড সমূহ
হেডার বার বলতে একটা সাইটের পেজের উপরিভাগকে বুঝায় । হেডার সাধারণত একটি পেজের নাম অথবা লোগো অথবা হোম, অপশন অথবা খোঁজার জন্য এক অথবা দুইটি বাটন থাকে ।
আপনি খুব সহজেই হেডারের বাম অথবা ডান সাইডে বাটন যোগ করতে পারেন জেকোয়েরি ব্যবহার করে ।

<div data-role=”header”>
<a href=”#” class=”ui-btn ui-icon-home ui-btn-icon-left”>Home</a>
<h1>Welcome To My Homepage</h1>
<a href=”#” class=”ui-btn ui-icon-search ui-btn-icon-left”>Search</a>
</div>

উপরের কোডটুকু আপনাকে পেজের বাম সাইডে একটা হোম বাটন এবং ডান সাইডে একটা খোঁজ বাটন যুক্ত করতে সাহায্য করবে ।

<div data-role=”header”>
<a href=”#” class=”ui-btn ui-btn-left ui-icon-home ui-btn-icon-left”>Home</a>
<h1>Welcome To My Homepage</h1>
</div>

এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের বাম সাইডে একটা বাটন যুক্ত করতে পারবেন ।

<div data-role=”header”>
<h1>Welcome To My Homepage</h1>
<a href=”#” class=”ui-btn ui-btn-right ui-icon-home ui-btn-icon-left”>Search</a>
</div>

এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের ডান সাইডে একটা বাটন যুক্ত করতে পারবেন ।

মনে রাখবেন হেডারে আপনি একসাথে দুইটির বেশি বাটন রাখতে পারবেন না । কিন্তু ফুটারে বাটনের কোনো সীমাবদ্ধতা নেই । আপনি আপনার ইচ্ছামত বাটন ব্যবহার করতে পারবেন ।

ফুটার বারের কোড সমূহ
একটি পেজের সবথেকে নিচের অংশকে ফুটার বলা হয় । ফুটার হেডারের চেয়ে বেশি পরিবর্তন করা সহজ । এতে বেশি পেজ লিংক, বাটন ইত্যাদি যোগ করে একে আরো বেশি আকর্ষণীয় করে তোলা যায় ।

<div data-role=”footer”>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Facebook</a>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Twitter</a>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Instagram</a>
</div>

এই কোডটি ফুটারে বসিয়ে আপনি খুব সহজে ফেসবুক, টুইটার, ইন্সটাগ্রামের বাটন যোগ করতে পারবেন ।

কিন্তু ফুটারের বাটনগুলো সাধারণত মাঝখানে বসে না । তাই এই জন্য আপনাকে নিচের সিএসএস কোড দিয়ে পরিবর্তন করে নিতে হবে ।
<div data-role=”footer” style=”text-align:center;”>

তাছাড়া আপনি গুরুপ বাটন গুলো ফুটারে নিচের কোড দিয়ে সমান্তরালে অথবা আনুভূমিকভাবে ব্যবহার করতে পারবেন ।

<div data-role=”footer” style=”text-align:center;”>
<div data-role=”controlgroup” data-type=”horizontal”>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Facebook</a>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Twitter</a>
<a href=”#” class=”ui-btn ui-icon-plus ui-btn-icon-left”>Add Me On Instagram</a>
</div>
</div>

হেডার এবং ফুটারের পজিশন ঠিক করা
হেডার এবং ফুটারের পজিশন তিনভাবে ঠিক করা যায় ।
১। ইনলাইনঃ এটা ডিফল্টভাবে যেটা দেয়া থাকে । মানে হেডার এবং ফুটার পেজের উপাদানের সাথে একই লাইনে থাকে ।

২। ফিক্সডঃ হেডার এবং ফুটার যথাক্রমে পেজের উপরে এবং নিচে থাকে ।

৩। ফুল স্ক্রীনঃ এটা ফিক্সড পজিশনের মত । কিন্তু এতে হেডার এবং ফুটার পেজের উপাদান সমূহের উপরে থাকে ।

আসুন তাহলে এবার কোড গুলো দেখে নেই ।
১। ইনলাইন পজিশনের কোডঃ
<div data-role=”header” data-position=”inline”></div>
<div data-role=”footer” data-position=”inline”></div>

২। ফিক্সড পজিশনের কোডঃ
<div data-role=”header” data-position=”fixed”></div>
<div data-role=”footer” data-position=”fixed”></div>

৩। ফুল স্ক্রীন পজিশনের কোডঃ
<div data-role=”header” data-position=”fixed” data-fullscreen=”true”></div>
<div data-role=”footer” data-position=”fixed” data-fullscreen=”true”></div>

এতে উপরের মত data-position=”fixed” রাখতে হবে ।
ফুল স্ক্রীন পজিশন ছবি, ভিডিও সাইটের জন্য খুব উপযোগী ।

আর এরই ভিতর কিন্তু আমরা খুব সহজে জেকোয়েরি দিয়ে মোবাইল বাটন বানানো শিখে গেলাম । খুব সহজ তাই না । হুম, আমার কাছেও এটা খুব সহজ লাগে । তবুও কোথাও না বুঝলে কমেন্ত করতে ভুলবেন না কিন্তু ।