Feb 11
জেকোয়েরি মোবাইল ব্যবহার করে টেবিল সাজানো ।
জেকোয়েরি মোবাইল ব্যবহার করে টেবিল সাজানো ।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
আজ আমরা জেকয়েরি মোবাইল ব্যবহার করে রেস্পন্সিভ টেবিল বানানো শিখবো যা সকল সাইজের স্ক্রীনে ভালভাবে সাপোর্ট করবে ।
রেস্পন্সিভ টেবিল(Responsive Tables):
আপনি যখন আপনার সাইটের সকল পেজের সব কন্টেন্টকে সকল প্রকার ডিভাইসে দেখাতে চান তখন রেস্পন্সিভ ডিজাইন খুব কার্যকরী হবে ।
শুধু একটা সাধারন ক্লাসের নাম জেকোয়েরি মোবাইলকে সকল সাইজের স্ক্রীনের ডিভাইসকে তার কনটেন্টগুলোকে সমানভাবে দেখাতে সাহায্য করবে ।
রেস্পন্সিভ টেবিল অনেক বড় সাইজের টেবুলার ডাটা গুলোকে মোবাইল এবং কম্পিউটার ডিভাইস উভয়তে অনেক আকর্ষণীয়ভাবে দেখাতে অনুমতি দেয় ।
দুই ধরণের রেস্পন্সিভ টেবিল আছে । reflow এবং column toggle.
১। Reflow Table:
এটা ডাটাকে যতদূর পারে সারি আকারে দেখায় । যদি এর জায়গাতে সবগুলো না ধরে তখন এটি লম্বালম্বিভাবে দেখায় ।
একটি টেবিল তৈরি করে <table> এলিমেন্টের সাথে data-role=”table” এবং “ui-responsive” ক্লাস যোগ করা হয় ।
<table data-role=”table” class=”ui-responsive”>
রেস্পন্সিভ টেবিলকে ভালভাবে কাজ করাতে হলে আপনাকে অবশ্যই এবং এলিমেন্ট যোগ করতে হবে । rowspan অথবা colspan এট্রিবিউট যোগ করা যাবে না । কারণ তারা রেস্পন্সিভ টেবিলে সাপোর্ট করে না ।
২। Column Toggle Table:
এটা ডাটাকে সব সময় সারি আকারে দেখায় । যদি এটার জায়গাতে সবগুলো না ধরে তাহলে এতে reflow এর মত নিচে চলে যায় না । যখন একটা দেখতে দেখতে যাওয়া হয় তখন আরেকপাশ থেকে ঢেকে যেতে থাকে ।
column toggle table তৈরি করতে হলে নিচের মত করে <table> এলিমেন্ট এর সাথে যোগ করতে হবে ।
<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive” id=”myTable”>
ডিফল্টভাবে জেকোয়েরি মোবাইল ডান দিকের টেবিলগুলো ঢেকে রাখে । আপনি চাইলে কখন কোন কলাম(column) বা ফিল্ড(field) দেখা যাবে বা কোনটা কখন ঢেকে যাবে তা নির্দেশ করে দিতে পারেন । টেবিলের হেডারের সাথে data-priority এট্রিবিউট যোগ করতে হবে এবং ১ থেকে ৬ এর ভিতর একটা নাম্বার নির্দেশ করে দিতে হবে ।
<th>I will never be hidden</th>
<th data-priority=”1″>I am very important – I will probably not be hidden</th>
<th data-priority=”3″>I am less important – I could be hidden</th>
<th data-priority=”5″>I am not that important – there is a good chance that I will be hidden</th>
আপনি যদি কলাম নাম্বার উল্লেখ করে না দেন তাহলে ঐ কলামটি আর ঢাকবে না ।
নিচের কোডগুলোকে একসাথে রেখে আপনি একটা column toggle table তৈরি করতে পারেন । এই ফ্রেমওয়ার্ক টেবিলের আগে ডানপাশে একটা বাটন তৈরি করবে যার মাধ্যমে ব্যবহারকারীরা তাদের পছন্দমত টেবিল ঢেকে রাখতে পারবে ।
<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive” id=”myTable”>
<thead>
<tr>
<th data-priority=”6″>CustomerID</th>
<th>CustomerName</th>
<th data-priority=”1″>ContactName</th>
<th data-priority=”2″>Address</th>
<th data-priority=”3″>City</th>
<th data-priority=”4″>PostalCode</th>
<th data-priority=”5″>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
Alfreds Futterkiste
<td>Maria Anders</td>
Obere Str. 57
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
</tbody>
</table>
toggle table বাটনের লেখাকে পরিবর্তন করতে হলে data-column-btn-text এট্রিবিউট যোগ করতে হবে ।
<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive” data-column-btn-text=”Click me to hide or show columns!” id=”myTable”>
টেবিলকে স্টাইলিশ করা(Styling Tables):
শ্যাডো যোগ করা(Add shadow):
টেবিলকে শ্যাডো দিতে “ui-shadow” ক্লাস ব্যবহার করতে হবে ।
<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive ui-shadow” id=”myTable”>
সকল টেবিলের সারির নিচে রেখার সাহায্যে সীমা যোগ করা(Add a bottom border to all table rows):
<style>
tr {
border-bottom: 1px solid #d6d6d6;
}
</style>
সকল এলিমেন্ট এবং ব্যাকগ্রাউন্ডের রেখার সীমা যোগ করা(Add a bottom border to all elements and a background color to all even table rows):
<style>
th {
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even) {
background: #e9e9e9;
}
</style>
এভাবে খুব সহজে আপনি টেবিলকে নিজের মত করে সাজাতে এবং ডিজাইন করতে পারবেন । এজন্য জেকোয়েরি মোবাইলের ব্যবহার সবচাইতে বেশি ।
http://www.w3schools.com/jquerymobile/jquerymobile_tables.asp
Feb 11
জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery – Get and Set CSS Classes) ।
জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery – Get and Set CSS Classes) ।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
কেমন আছেন সবাই? আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো । সাথে সাথে উপাদান গুলোর CSS class পরিবর্তন করবো যেমন নতুন css class যোগ করা।
জেকোয়েরি দিয়ে খুব সহজে সিএসএস ক্লাস গুলোকে পরিচালনা করা যায় ।
জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery Manipulating CSS):
সিএসএস পরিচালনা করার জন্য জেকোয়েরি এর কয়েকটি পদ্ধতি আছে । আমরা এর ভিতর নিচের পদ্ধতি গুলো অনুসরণ করবো ।
১। addClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস যোগ করা যায় ।
২। removeClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস দূরীভূত করা যায় ।
৩। toggleClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করা যায় ।
৪। css() ঃ স্টাইল এট্রিবিউটকে সেট করে থাকে ।
স্টাইলশিট এর উদাহরণঃ
নিচের উদাহরণটি আজ সবখানে ব্যবহার করবো । তাই খুব ভালভাবে খেয়াল করুন ।
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
১। jQuery addClass() Method:
নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর সাথে কিভাবে ক্লাস এট্রিবিউটস যোগ করতে হয় । যখন ক্লাস যোগ করা হয় তখন অবশ্যই আপনি অনেকগুলো এলিমেন্টস একসাথে নির্বাচন করতে পারবেন ।
$(“button”).click(function(){
$(“h1,h2,p”).addClass(“blue”);
$(“div”).addClass(“important”);
});
addClass() method এর মাধ্যমে আপনি একসাথে অনেক গুলো ক্লাস কে নির্দেশনা দিতে পারবেন ।
$(“button”).click(function(){
$(“#div1”).addClass(“important blue”);
});
২। jQuery removeClass() Method:
নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর থেকে কিভাবে ক্লাস এট্রিবিউটসকে দূর করতে হয় ।
$(“button”).click(function(){
$(“h1,h2,p”).removeClass(“blue”);
});
৩। jQuery toggleClass() Method:
নিচের উদাহরণের মাধ্যমে আমরা দেখতে পাবো jQuery toggleClass() Method ব্যবহার করতে হয় । এই মেথড নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করে ।
$(“button”).click(function(){
$(“h1,h2,p”).toggleClass(“blue”);
});
৪। jQuery css() Method:
এই মেথড স্টাইল এট্রিবিউটকে সেট করে থাকে । এটা অনেকভাবে স্টাইল করে থাকে । তাই পরে এটা নিয়ে একটি পোস্ট করবো ।
তাই এই গুলো আপাতত প্র্যাকটিস করতে থাকুন । দেখা হবে পরবর্তী পোস্টে jQuery css() Method নিয়ে । ততক্ষণ আমাদের সাথেই থাকুন ।
http://www.w3schools.com/jquery/jquery_css_classes.asp
Feb 11
জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা (jQuery Mobile Popups)
জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা (jQuery Mobile Popups)
লেখাঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
জেকোয়েরি মোবাইল দিয়ে আপনার মনের মত করে একটি ওয়েব সাইটের সব কিছুই তৈরি করে সাজাতে পারবেন । আজ আমি জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা শিখাবো ।
জেকোয়েরি মোবাইল পপ-আপ(jQuery Mobile Popups):
পপ-আপ গুলো ডায়ালগ বক্সের মত একই রকম দেখতে । এই পপ-আপ আর ডায়ালগ বক্স দুটোই একটি ওয়েবপেজের অবিচ্ছেদ্য অংশ । কোনো ম্যাসেজ বা লেখা, ছবি, ম্যাপ, ফেসবুক লাইক বক্স অথবা অন্যন্য কনটেন্ট দেখানোর জন্য পপ-আপ খুবই গুরুত্বপূর্ণ ।
একটি পপ-আপ তৈরির জন্য আপনাকে <a> element এবং <div> element নিয়ে শুরু করতে হবে । <a> এলিমেন্টের সাথে data-rel=”popup” এট্রিবিউট যোগ করতে হবে এবং <div> এলিমেন্টের সাথে data-role=”popup” এট্রিবিউট যোগ করতে হবে । তারপর <div> এর জন্য একটি আইডি ঠিক করতে হবে । তারপর href কে <a> এর সাথে ঐ একই আইডিতে যোগ করতে হবে । তারপর <div> এর সাথের উপাদানগুলো হবে আসল কনটেন্ট । যখন ইউজার লিংকে ক্লিক করবে তখন পপ-আপ হয়ে ঐ কন্টেন্টকে দেখাবে ।
<a href=”#myPopup” data-rel=”popup” class=”ui-btn ui-btn-inline ui-corner-all”>Show Popup</a>
<div data-role=”popup” id=”myPopup”>
<p>This is a simple popup.</p>
</div>
মনে রাখবেন, লিংকের সাথে একই ওয়েবপেজে অবশ্যই <div>কে থাকতে হবে ।
আপনি যদি অতিরিক্ত প্যাড বা মার্জিন চান তাহলে <div> এর সাথে “ui-content” ক্লাস ব্যবহার করতে হবে ।
<div data-role=”popup” id=”myPopup” class=”ui-content”>
পপ-আপ ক্লোজ(Closing Popups):
ডিফল্টভাবে পপ-আপের বাইরে ক্লিক করলে অথবা “Esc” বাটন চাপলে পপ-আপ ক্লোজ হয় । আপনি যদি এটা বন্ধ করতে চান তাহলে পপ-আপের সাথে data-dismissible=”false” এট্রিবিউট যোগ করতে হবে । আপনি যদি পপ-আপের বামে অথবা ডানে পপ-আপ ক্লোজ বাটন যোগ করতে চান তাহলে আপনাকে data-rel=”back” এট্রিবিউট যোগ করতে
হবে এবং সিএসএস ক্লাস দিয়ে একে পজিশন করতে হবে ।
১। Right close button
২। Left close button
৩। Undismissible Popup
পপ-আপের পজিশন করা(Positioning Popups):
ডিফল্টভাবে ক্লিক করলে তার সাথেই পপ-আপ দেখায় । একে নিজের মত করে দেখাতে ঐ লিংকের সাথে data-position-to attribute এট্রিবিউট যোগ করতে হবে । আপনি তিনভাবে এট্রিবিউট যোগ করে এটা করতে পারবেন ।
এট্রিবিউট ১ঃ data-position-to=”window”
বর্ণনাঃ পপ-আপ ডিসপ্লের মাঝামাঝি ওপেন হবে ।
এট্রিবিউট ২ঃ data-position-to=”#myId”
বর্ণনাঃ পপ-আপ একটি সিলেক্ট করা আইডির উপর ওপেন হবে ।
এট্রিবিউট ৩ঃ data-position-to=”origin”
বর্ণনাঃ এটা ডিফল্ট । ক্লিক করা এলিমেন্টের উপর ওপেন হবে ।
উদাহরণঃ
<a href=”#myPopup1″ data-rel=”popup” class=”ui-btn” data-position-to=”window”>Window</a>
<a href=”#myPopup2″ data-rel=”popup” class=”ui-btn” data-position-to=”#demo”>id=”demo”</a>
<a href=”#myPopup3″ data-rel=”popup” class=”ui-btn” data-position-to=”origin”>Origin</a>
ট্রানজিশনস(Transitions):
ডিফল্টভাবে পপ-আপে কোনো ট্রানজিশন ইফেক্ট দেয়া থাকে না । আপনি আপনার নিজের মত করে আগের ট্রানজিশনে বলা যেকোনো একটা ইফেক্ট ব্যবহার করতে পারেন । শুধু data-transition=”value” এট্রিবিউট এর লিংকের সাথে যোগ করে দিলেই হবে ।
<a href=”#myPopup” data-rel=”popup” class=”ui-btn” data-transition=”fade”>Fade</a>
পপ-আপ অ্যারো(Popup Arrows):
পপ-আপ অ্যারো ব্যবহারের জন্য data-arrow attribute যোগ করতে হবে এবং “l” (left), “t” (top), “r” (right) অথবা “b” (bottom) এর যেকোনো একটা মান উল্লেখ করে দিতে হবে ।
<a href=”#myPopup” data-rel=”popup” class=”ui-btn”>Open Popup</a>
<div data-role=”popup” id=”myPopup” class=”ui-content” data-arrow=”l”>
<p>There is an arrow on my LEFT border.</p>
</div>
পপ-আপ ডায়ালগ(Popup Dialogs):
হেডার, ফুটার অথবা কন্টেন্টে আপনি পপ-আপ ডায়ালগ বা টেক্সট যোগ করতে পারবেন ।
<a href=”#myPopupDialog” data-rel=”popup” class=”ui-btn”>Open Dialog Popup</a>
<div data-role=”popup” id=”myPopupDialog”>
<div data-role=”header”><h1>Header Text..</h1></div>
<div data-role=”main” class=”ui-content”><p>Some text..</p><a href=”#”>some links..</a>
<div data-role=”footer”><h1>Footer Text..</h1></div>
</div>
ছবির পপ-আপ(Popup Photos):
আপনি ইচ্ছা করলে ছবিও পপ-আপ হিসেবে যোগ করতে পারবেন ।
<a href=”#myPopup” data-rel=”popup” data-position-to=”window”>
<img src=”skaret.jpg” alt=”Skaret View” style=”width:200px;”>
<div data-role=”popup” id=”myPopup”>
<img src=”skaret.jpg” style=”width:800px;height:400px;” alt=”Skaret View”>
</div>
আপনি কয়েকটি ছবি একসাথে দেখাতে পারবেন । কিন্তু ৫০০ ছবির অ্যালবাম একসাথে পপ-আপে দেখাতে পারবেন না ।
তাহলে দেখলেন তো পপ-আপ তৈরি কত সহজ । এবার ভালভাবে প্র্যাকটিস করে পপ-আপকে আরো সুন্দর করে কাস্টোমাইজ করুন ।
http://www.w3schools.com/jquerymobile/jquerymobile_popups.asp
Feb 11
জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো(jQuery Mobile Forms) ।
জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো(jQuery Mobile Forms) ।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
প্রতিদিন আমরা জেকোয়েরি মোবাইলের নতুন একেকটি বিষয় শিখছি , আজ আমাদের শেখার বিষয় হলো জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো ।
জেকোয়েরি মোবাইল এইচটিএমএল ফর্মকে স্টাইল করে আরো আকর্ষণীয় এবং টাচকে আরো উন্নত করে তোলে ।
জেকোয়েরি মোবাইলের ফর্মের গঠন(jQuery Mobile Form Structure):
জেকোয়েরি মোবাইল সিএসএস ব্যবহার করে এইচটিএমএল এলিমেন্টস গুলোকে আরো আকর্ষণীয় এবং ব্যবহারে খুব সহজ করে তোলে ।
জেকোয়েরি মোবাইলে আপনি নিচের কনট্রোল গুলো ব্যবহার করতে পারবেন ।
- Text Inputs
- Search Inputs
- Radio Buttons
- Checkboxes
- Select Menus
- Sliders
- Flip Toggle Switches
যখন আপনি জেকোয়েরি মোবাইল ফর্ম নিয়ে কাজ করবেন তখন আপনার নিচের বিষয়গুলো অবশ্যই মনে রাখতে হবে ।
১। <form> এলিমেন্ট অবশ্যই একটি মেথড এবং এটা একটি কার্যকরী এট্রিবিউট(action attribute) ।
২। সকল ফর্মের একটি স্বতন্ত্র আইডি নাম্বার থাকবে । সাইটের সকল পেজে এই আইডি গুলো স্বতন্ত্রভাবে আড়াআড়ি থাকবে । কারণ জেকোয়েরি মোবাইলের সিঙ্গেল পেজ নেভিগেশন মডেলে(jQuery Mobile’s single-page navigation model) একই সাথে অনেক পেজকে একসাথে রাখে ।
৩। সকল ফর্ম এট্রিবিউটের একটি করে অবশ্যই লেবেল থাকবে । লেবেলের আইডি কে এলিমেন্টের আইডির সাথে মেলানোর জন্য for attribute ব্যবহার করতে হয় ।
উদাহরণঃ
<form method=”post” action=”demoform.asp”>
<label for=”fname”>First name:</label>
<input type=”text” name=”fname” id=”fname”>
</form>
আপনি ইচ্ছা করলে ফর্মের সাথে placeholder ট্যাগ ব্যবহার করে কিছু সংকেত বা সাহায্যপূর্ণ ইঙ্গিত রাখতে পারেন ।
<label for=”fname”>First name:</label>
<input type=”text” name=”fname” id=”fname” placeholder=”First name…”>
লেবেল ঢেকে রাখার জন্য “ui-hidden-accessible” ক্লাস ব্যবহার করতে পারেন । এটা মাঝে মাঝে দরকার হতে পারে ।
<label for=”fname class=”ui-hidden-accessible””>First name:</label>
<input type=”text” name=”fname” id=”fname” placeholder=”First name…”>
আপনি যদি একটি ক্লিয়ার বাটন চান তাহলে data-clear-btn=”true” এট্রিবিউট ব্যবহার করতে পারেন ।
<label for=”fname”>First name:</label>
<input type=”text” name=”fname” id=”fname” data-clear-btn=”true”>
এই ক্লিয়ার বাটন
জেকোয়েরি মোবাইল ফর্ম বাটন(jQuery Mobile Form Buttons):
ফর্মের বাটনগুলো এইচটিএমএল <input> এলিমেন্টস দ্বারা কোড করা হয়ে থাকে । তারা স্বয়ংক্রিয়ভাবে ডিজাইন করা থাকে । আপনি একে খুব সহজে আকর্ষণীয় এবং ডেস্কটপ এবং মোবাইলে সহজভাবে ব্যবহারের জন্য সাজাতে পারেন ।
<input type=”button” value=”Button”>
<input type=”reset” value=”Reset Button”>
<input type=”submit” value=”Submit Button”>
আপনি <input> বাঁটনকে নিচের লিস্ট থেকে data-* এট্রিবিউট ব্যবহার করে আরো সুন্দরভাবে ডিজাইন করতে পারেন ।
এট্রিবিউটঃ data-corners
মানঃ true | false
বর্ণনাঃ বাটনের কোণা গুলো গোলাকার হবে কিনা তা নির্দেশ করে ।
এট্রিবিউটঃ data-icon
মানঃ Icons Reference
বর্ণনাঃ বাটনের আইকনকে নির্দেশ করে ।
এট্রিবিউটঃ data-iconpos
মানঃ left | right | top | bottom | notext
বর্ণনাঃ আইকনের পজিশন নির্দেশ করে ।
এট্রিবিউটঃ data-inline
মানঃ true | false
বর্ণনাঃ বাটন কি একই লাইনে হবে কিনা তা নির্দেশ করে ।
এট্রিবিউটঃ data-mini
মানঃ true | false
বর্ণনাঃ বাটনের আকার কেমন হবে তা নির্দেশ করে ।
এট্রিবিউটঃ data-shadow
মানঃ true | false
বর্ণনাঃ বাটনে ছায়া(shadow) থাকবে কিনা তা নির্দেশ করে ।
উপরের মোটা অক্ষরের মান গুলো ডিফল্টভাবে থাকবে ।
আপনার চাওয়া মতে নিচের এট্রিবিউট গুলো যোগ করতে পারেন ।
<input type=”submit” value=”Submit” data-icon=”check” data-iconpos=”right” data-inline=”true”>
ফিল্ড কন্টেইনার(Field Containers) :
লেবেল এবং ফর্মের উপাদানগুলোকে চওড়া স্ক্রীনে(wider screen) দেখানোর জন্য লেবেলের বা ফর্মের চারিদিকে <div> অথবা <fieldset> এর সাথে “ui-field-contain” ক্লাস যোগ করতে হবে ।
<form method=”post” action=”demoform.asp”>
<div class=”ui-field-contain”>
<label for=”fname”>First name:</label>
<input type=”text” name=”fname” id=”fname”>
<label for=”lname”>Last name:</label>
<input type=”text” name=”lname” id=”lname”>
</div>
</form>
এটা পেজের চওড়ার(width) উপর নির্ভর করে দেখাবে । 480px এর উপর বা নিচে হলে পরিবর্তন করে দেখাবে ।
জেকোয়েরি মোবাইল যাতে ক্লিক করা এলিমেন্টগুলোকে স্টাইল না করে এজন্য আপনাকে data-role=”none” এট্রিবিউট ব্যবহার করতে হবে ।
<label for=”fname”>First name:</label>
<input type=”text” name=”fname” id=”fname” data-role=”none”>
জেকোয়েরি মোবাইলে ফর্ম সাবমিশন করা(Form submission in jQuery Mobile) :
জেকোয়েরি মোবাইল অ্যাজাক্স ব্যবহার করে স্বয়ংক্রিয়ভাবে ফর্ম সাবমিশন নিয়ন্ত্রণ করতে পারে । সার্ভারের রেসপন্স অনুসারে অ্যাপ্লিকেশনের DOM কে নিয়ন্ত্রণ করতে পারে ।
তাহলে আমরা কিন্তু জেকোয়েরি ব্যবহার করে একটি ফর্মকে কিভাবে সাজাতে হয় তা শিখে ফেললাম । এরপর আমরা যখন জেকোয়েরিতে আরো বেশি এক্সপার্ট হয়ে যাবো তখন ফর্মকে আমাদের মনের মত করে আরো সুন্দর করে কাস্টোমাইজ করতে পারবো ।
http://www.w3schools.com/jquerymobile/jquerymobile_form_basic.asp
Feb 11
জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods) ।
জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods) ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
কেমন আছেন সবাই ? আজ আমি আপনাদের সাথে জেকোয়েরি অ্যাজাক্স মেথডস সম্পর্কে আলোচনা করবো ।
জেকোয়েরি অ্যাজাক্স মেথডস(jQuery AJAX Methods):
অ্যাজাক্স হলো এমন একটা কৌশল যা পুরো পেজ রিলোড না করে সার্ভারের সাথে ডাটা ট্রান্সফার করে একটি ওয়েব পেজকে আপডেট করে ।
আমরা যখন ফেসবুক ব্যবহার করি তখন যখন নিচের দিকে নামি তখন অ্যাজাক্স কিন্তু পেজটা রিলোড না করে পরের পোস্টগুলো দেখায় ।
তাহলে আসুন আমরা অ্যাজাক্স এর সকল মেথড গুলো শিখে ফেলি ।
মেথডঃ $.ajax()
মেথডের বর্ণনাঃ async AJAX রিকোয়েস্ট সম্পাদন করে ।
মেথডঃ $.ajaxPrefilter()
মেথডের বর্ণনাঃ যখন একটা রিকোয়েস্ট পাঠানো হয় $.ajax() প্রসেস করার আগে তখন কাস্টম অ্যাজাক্স অপশনগুলো নিয়ন্ত্রণ করে অথবা আগের অপশনগুলোকে সংশোধন করে ।
মেথডঃ $.ajaxSetup()
মেথডের বর্ণনাঃ ভবিষ্যতের অ্যাজাক্স রিকোয়েস্ট এর জন্য ডিফল্ট ভেলু গুলো ঠিক করা হয় ।
মেথডঃ $.ajaxTransport()
মেথডের বর্ণনাঃ একটি অবজেক্ট তৈরি করা হয় যা অ্যাজাক্স ডাটার পরিবর্তন নিয়ন্ত্রণ করতে পারে ।
মেথডঃ $.get()
মেথডের বর্ণনাঃ AJAX HTTP GET request সার্ভার থেকে ডাটা লোড নেয় ।
মেথডঃ $.getJSON()
মেথডের বর্ণনাঃ AJAX HTTP GET request সার্ভার থেকে JSON-encoded ডাটা লোড নেয় ।
মেথডঃ $.getScript()
মেথডের বর্ণনাঃ AJAX HTTP GET request সার্ভার থেকে জাভাস্ক্রীপ্ট লোড নেয় ।
মেথডঃ $.param()
মেথডের বর্ণনাঃ কোনো অবজেক্টের শ্রেণীবিন্যাস করে তার সিরিয়ালি প্রদর্শন করে ।
মেথডঃ $.post()
মেথডের বর্ণনাঃ AJAX HTTP POST request সার্ভার থেকে ডাটা লোড নেয় ।
মেথডঃ ajaxComplete()
মেথডের বর্ণনাঃ যখন অ্যাজাক্স রিকোয়েস্ট পূরণ হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । কোন ফাংশন চালাবে সেটা আপনি নির্দেশ করে দিতে পারবেন ।
মেথডঃ ajaxError()
মেথডের বর্ণনাঃ যখন অ্যাজাক্স রিকোয়েস্ট এরর দেখিয়ে সম্পন্ন হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । এখানে পরের ফাংশনের কাজ শুরু করে দেয় ।
মেথডঃ ajaxSend()
মেথডের বর্ণনাঃ যখন অ্যাজাক্স রিকোয়েস্ট পাঠানোর আগে একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । এই ফাংশনটা হতে পারে আপনার নির্দেশ করা কোনো ফাংশন ।
মেথডঃ ajaxStart()
মেথডের বর্ণনাঃ যখন প্রথম অ্যাজাক্স রিকোয়েস্ট শুরু হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় ।এই ফাংশনটা হতে পারে আপনার নির্দেশ করা কোনো ফাংশন ।
মেথডঃ ajaxStop()
মেথডের বর্ণনাঃ যখন সকল অ্যাজাক্স রিকোয়েস্ট সম্পন্ন হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । রিকোয়েস্ট সম্পন্ন হলে এরপর কোন ফাংশন চালিত হবে তা আপনি নির্দেশ করে দিতে পারেন অথবা এর আগের ফাংশনের রিকোয়েস্ট গুলো চেক করবে ।
মেথডঃ ajaxSuccess()
মেথডের বর্ণনাঃ যখন সকল অ্যাজাক্স রিকোয়েস্ট সফলভাবে সম্পন্ন হয় তখন একটি ফাংশন চালানোর জন্য নির্দেশিত হয় । এই ফাংশনটা হতে পারে আপনার দেখানো কোনো ম্যাসেজ অথবা টেক্সট ।
মেথডঃ load()
মেথডের বর্ণনাঃ সার্ভার থেকে ডাটা লোড নেয় এবং সেই ডাটা সিলেক্টেড এলিমেন্টে পাঠায় ।
মেথডঃ serialize()
মেথডের বর্ণনাঃ অনেকগুলো এলিমেন্ট থেকে ডাটা সংগ্রহ করে ফর্ম আকারে সিরিয়ালি তা সাবমিট করে ।
মেথডঃ serializeArray()
মেথডের বর্ণনাঃ ফর্মের উপাদান থেকে নাম এবং ভেলু গুলোকে সংগ্রহ করে সিরিয়াল করে সাজায় । আপনি যেভাবে নির্দেশ করবেন সেভাবে এটা নাম এবং মানগুলোকে সিরিয়াল করবে । হতে পারে সেটা বড় মান থেকে ছোট মান অথবা ছোট থেকে বড় । নামের ক্ষেত্রেও কিন্তু তেমন A থেকে Z অথবা Z থেকে A তে সাজাতে পারবে ।
খুব মজার কিন্তু । আর এর ভিতরেই আমরা কিন্তু খুব সহজে জেকোয়েরি অ্যাজাক্সের সকল মেথড গুলো শিখে ফেললাম ।
http://www.w3schools.com/jquery/jquery_ref_ajax.asp
Feb 11
পিএইচপি এক্সএমএল এক্সপ্যাট পার্সার (PHP XML Expat Parser in Bangla)
পিএইচপি’র বিল্ট-ইন এক্সএমএল এক্সপ্যাট পার্সার (XML Expat Parser) এক্সএমএল ডকুমেন্টকে পিএইচপি’তে প্রসেস করা সম্ভবপর করেছে।
এক্সএমএল এক্সপ্যাট পার্সার
এক্সপ্যাট পার্সারটি হলো ইভেন্ট-বেজড পার্সার অর্থাৎ এটি ইভেন্টের উপর নির্ভর করে একজিকিউট হয়। নিচের এক্সএমএল এর অংশটিকে দেখুনঃ
<from>Jani</from>
একটি ইভেন্ট-বেজড পার্সার উপরের এক্সএমএল’টিকে তিনটি ইভেন্টের সিরিজ হিসেবে রিপোর্ট করেঃ
- স্টার্ট এলিমেন্ট হলোঃ from
- CDATA সেকশানকে শুরু করে যার ভ্যালুঃ Jani
- ক্লোজ এলিমেন্টঃ from
এক্সএমএল এক্সপ্যাট পার্সার ফাংশনগুলো পিএইচপি কোরের অংশ। এই ফাংশনগুলোকে ব্যবহার করতে কোন ইন্সটলেশনের দরকার পড়েনা।
এক্সমএমএল ফাইল
নিচের উদাহরণে “note.xml” এক্সএমএল ফাইলটি ব্যবহৃত হবেঃ
<?xml version="1.0" encoding="UTF-8"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>
এক্সএমএল এক্সপ্যাট পার্সার’কে শুরু করা
আমরা চাই এক্সএমএল এক্সপ্যাট পার্সার’টিকে পিএইচপি’তে শুরু করতে, ভিন্ন ভিন্ন এক্সএমএল ইভেন্টের জন্য কিছু হ্যান্ডলার ডিফাইন করতে, এবং তারপর এক্সএমএল ফাইলটিকে পার্স করতে।
<?php
// Initialize the XML parser
$parser=xml_parser_create();
// Function to use at the start of an element
function start($parser,$element_name,$element_attrs) {
switch($element_name) {
case "NOTE":
echo "-- Note --<br>";
break;
case "TO":
echo "To: ";
break;
case "FROM":
echo "From: ";
break;
case "HEADING":
echo "Heading: ";
break;
case "BODY":
echo "Message: ";
}
}
// Function to use at the end of an element
function stop($parser,$element_name) {
echo "<br>";
}
// Function to use when finding character data
function char($parser,$data) {
echo $data;
}
// Specify element handler
xml_set_element_handler($parser,"start","stop");
// Specify data handler
xml_set_character_data_handler($parser,"char");
// Open XML file
$fp=fopen("note.xml","r");
// Read data
while ($data=fread($fp,4096)) {
xml_parse($parser,$data,feof($fp)) or
die (sprintf("XML Error: %s at line %d",
xml_error_string(xml_get_error_code($parser)),
xml_get_current_line_number($parser)));
}
// Free the XML parser
xml_parser_free($parser);
?>
উপরের উদাহরণটির ব্যাখ্যা
- xml_parser_create() ফাংশনের মাধ্যমে এক্সএমএল পার্সারটিকে শুরু করা হয়
- ভিন্ন ভিন্ন ইভেন্ট হ্যান্ডলারের সাথে ব্যবহারের জন্য ফাংশন তৈরি করা হয়
- যখন পার্সারটি ওপেনিং ও ক্লোজিং ট্যাগের সম্মুক্ষীণ হবে তখন কোন ফাংশনটি একজিকিউট হবে তা ঠিক করতে xml_set_element_handler() ফাংশনটিকে যোগ করা হয়।
- যখন পার্সারটি ক্যারেক্টার ডাটার সম্মুক্ষীণ হবে তখন কোন ফাংশনটি একজিকিউট হবে তা ঠিক করতে xml_set_character_data_handler() ফাংশনটিকে যোগ করা হয়।
- xml_parse() function ফাংশনের মাধ্যমে “note.xml” ফাইলটিকে পার্স করা হয়।
- কোন এরর বা সমস্যার ক্ষেত্রে, একটি এক্সএমএল এরর’কে টেক্সট ডেসক্রিপশানে কনভার্ট করতে xml_error_string() ফাংশনটিকে যোগ করা হয়।
- xml_parser_create() ফাংশনের সাথে নির্ধারণ করা মেমোরিকে মুক্ত করতে xml_parser_free() ফাংশনকে কল করা হয়।
Feb 10
পিএইচপি – এক্সএমএল DOM পার্সার (PHP XML DOM Parser in Bangla)
শেখ মাহফুজুর রহমান
পিএইচপি’র বিল্ট-ইন ডম (DOM) পার্সারের জন্য পিএইচপি’তে এক্সএমএল ডকুমেন্ট প্রসেস করা সম্ভব হয়েছে।
এক্সএমএল DOM পার্সার
DOM পার্সার একটি ট্রি-বেজড (DOM ট্রি) পার্সার। নিচের এক্সএমএল ডকুমেন্ট ফ্র্যাকশনটির দিকে তাকানঃ
<?xml version="1.0" encoding="UTF-8"?> <from>Jani</from>
DOM উপরের এক্সএমএল’টিকে একটি ট্রি স্ট্রাকচার হিসেবে দেখেঃ
লেভেল ১: এক্সএমএল ডকুমেন্ট
লেভেল ২: রুট এলিমেন্টঃ
লেভেল ৩: টেক্সট এলিমেন্টঃ “Jani”
ইন্সটলেশন
DOM পার্সার ফাংশনগুলো পিএইচপি কোরের অংশ। এই ফাংশনগুলোকে ব্যবহার করার জন্য কোন ইন্সটলেশনের দরকার পড়েনা।
একটি এক্সএমএল ফাইল
নিচের এক্সএমএল ফাইলটি আমাদের উদাহরণে ব্যবহৃত হবেঃ
<?xml version="1.0" encoding="UTF-8"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>
লোড এবং এক্সএমএল আউটপুট
আমরা চাই এক্সএমএল পার্সারটিকে চালু করতে, এক্সএমএল’টিকে লোড করতে এবং এটা থেকে আউটপুট পেতে।
উদাহরণঃ
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("note.xml");
print $xmlDoc->saveXML();
?>
উপরের কোডটির আউটপুট হবেঃ
Tove Jani Reminder Don’t forget me this weekend!
আপনি যদি ব্রাউজার উইন্ডোতে “View source” সিলেক্ট করেন তাহলে নিচের এইচটিএমএলটি দেখতে পাবেনঃ
<?xml version="1.0" encoding="UTF-8"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>
উপরের উদাহরণটি একটি DOMDocument-Object তৈরি করে এবং “note.xml” থেকে এক্সএমএল’টিকে এর মধ্যে লোড করে। তারপর saveXML() ফাংশনটি ভিতরের এক্সএমএল ডকুমেন্টটিকে একটি স্ট্রিং-এ রাখে, ফলে আমরা এটিকে আউটপুট হিসেবে পেতে পারি।
এক্সএমএল এর মধ্যে দিয়ে লুপিং
আমরা চাই এক্সএমএল পার্সারটিকে চালু করতে, এক্সএমএল’টিকে লোড করতে এবং এলিমেন্টের সবগুলো এলিমেন্টের মধ্যে লুপ তৈরি করতেঃ
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("note.xml");
$x = $xmlDoc->documentElement;
foreach ($x->childNodes AS $item) {
print $item->nodeName . " = " . $item->nodeValue . "<br>";
}
?>
উপরের কোডটির আউটপুট হবেঃ
#text =
to = Tove
#text =
from = Jani
#text =
heading = Reminder
#text =
body = Don’t forget me this weekend!
#text =
উপরের উদাহরণটিতে আপনি দেখতে পাবেন যে প্রত্যেকটি এলিমেন্টের মধ্যে খালি (empty) টেক্সট নোড রয়েছে। যখন এক্সএমএল তৈরি হয় তখন নোডগুলোর মধ্যে প্রায়ই হোয়াইট-স্পেস থাকে। এক্সএমএল DOM পার্সার এগুলোকে সাধারণত এলিমেন্ট হিসেবে বিবেচনা করে এবং আপনি যদি এগুলোর সম্পর্কে জ্ঞাত না হন তাহলে মাঝে মাঝে এগুলো সমস্যার সৃষ্টি করে।
Feb 09
অ্যাজাক্স পরিচিতি (AJAX Introduction)
শেখ মাহফুজুর রহমান
একটি ওয়েব পেজ পুরোটা রিলোড না করে পেজের একটি অংশকে আপডেট করার প্রক্রিয়াই হলো অ্যাজাক্স।
অ্যাজাক্স কি?
AJAX এর মানে হলো Asynchronous JavaScript and XML । অ্যাজাক্স হলো ফাস্ট এবং ডাইনামিক ওয়েব পেজ তৈরির একটি কৌশল। অ্যাজাক্স ওয়েব পেজকে অ্যাসিংক্রোনাসলি (asynchronously) সার্ভারের সাথে সামান্য পরিমাণ ডাটা বিনিময় (–) করেই আপডেট করতে সাহাজ্য করে। এর মানে হলো একটি পেজকে পুরোপুরি লোড না করে পেজের একটি অংশকে আপডেট করা সম্ভব। ক্লাসিক ওয়েব পেজগুলোতে, যেগুলো অ্যাজাক্স ব্যবহার করেনা, কন্টেন্ট পরিবর্তন করার পর পরিবর্তিত পেজকে পেতে চাইলে অবশ্যই তা রিলোড করতে হবে।
অ্যাজাক্স ব্যবহারকারী অ্যাপ্লিকেশনের উদাহরন হলোঃ গুগল ম্যাপ, জিমেইল, ইউটিউব এবং ফেসবুক ট্যাব।
কিভাবে অ্যাজাক্স কাজ করে
১)ব্রাউজারঃ
একটি ইভেন্ট তৈরি হয়…
একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়
HttpRequest পাঠানো হয়
—->> ইন্টারনেট —->>
২) সার্ভার
HttpRequest কে প্রসেস করে
একটি রেসপন্স তৈরি করে এবং সেই ডাটা ব্রাউজারে প্রেরণ করে
—->> ইন্টারনেট —->>
৩) ব্রাউজার
ফেরত আসা ডাটাগুলো প্রসেস করে
পেজের কন্টেন্ট আপডেট করে
ইন্টারনেট স্ট্যান্ডার্ড নির্ভর অ্যাজাক্স
ইন্টারনেট স্ট্যান্ডার্ডের উপর নির্ভর করে অ্যাজাক্স কাজ করে এবং নিচের কম্বিনেশনগুলো ব্যবহার করেঃ
- XMLHttpRequest অবজেক্ট (সার্ভারের সাথে অ্যাসিংক্রোনাসলি ডাটা বিনিময় করার জন্য)
- জাভাস্ক্রিপ্ট/DOM (তথ্যকে দেখানো/ইন্টারেক্ট করতে)
- সিএসএস (ডাটাকে স্টাইল করতে)
- এক্সএমএল (বিনিময়কৃত ডাটা ফরমেট হিএবে ব্যবহৃত হয়)
নোটঃ অ্যাজাক্স অ্যপ্লিকেশনগুলো ব্রাউজার এবং প্লাটফর্ম ইন্ডিপেন্ডেন্ট হয়ে থাকে অর্থাৎ যেকোন প্লাটফর্মে অ্যাজাক্স কার্যকর।
গুগল সাজেস্ট
অ্যাজাক্স ২০০৫ সালে Google Suggest অ্যাপ্লিকেশনে ব্যবহার হওয়ার মাধ্যমে গুগলের হাত ধরে জনপ্রিয় হয়েছিল।
Google Suggest ডাইনামিক ওয়েব ইন্টারফেস তৈরি করতে অ্যাজাক্স ব্যবহার করছেঃ যখন আপনি গুগলের সার্চ বক্সে কিছু টাইপ করেন, একটি জাভাস্ক্রিপ্ট অক্ষরগুলোকে সার্ভারে পাঠায় এবং সার্ভার একটি সাজেশন লিস্ট পাঠিয়ে দেয় যা আপনি দেখতে পান।
আজকেই অ্যাজাক্স ব্যবহার শুরু করুন
আমাদের পিএইচপি টিউটরিয়ালে আমরা ব্যাখ্যা করবো কিভাবে অ্যাজাক্স একটি ওয়েব পেজের পুরোটা রিলোড না করে পেজের একটি অংশকে আপডেট করতে পারে। সার্ভার স্ক্রিপ্টটি পিএইচপি’তে লেখা হবে। অ্যাজাক্স সম্পর্কে আরও বেশি জানতে চাইলে আমাদের অ্যাজাক্স টিউটোরিয়ালটি ভিজিট করুন।
