Mar 05

jQuery Mobile – Page Event

জেকোয়েরি ইভেন্টঃ

ইভেন্টঃ

ওয়েব পেজে ইউজার কখনও মাউস ক্লিক করে (কোন একটা লিংক বা যেকোন কিছুর উপর), কিবোর্ড দিয়ে টাইপ করে (ফর্ম থাকলে), কখনও কোন একটা এলিমেন্টের উপর মাউস নিয়ে যেতে পারে এটা কোন লিংক, প্যারাগ্রাফ, ইনপুট ফিল্ড বা যেকোন কিছুর উপরে হতে পারে। এগুলি হচ্ছে এক একটা ইভেন্ট। যেমনঃ কোন একটা প্যারাগ্রাফ বা বাটনের উপর ক্লিক করলেন, তাহলে এটা একটা ইভেন্ট (ক্লিক ইভেন্ট)। কোন একটা এলিমেন্টের উপর মাউস নিয়ে গেলেন এটা একটা ইভেন্ট (মাউস হোভার ইভেন্ট)। এরুপ আরো ইভেন্ট আছে যেমনঃ scroll ইভেন্ট, load ইভেন্ট, focus ইভেন্ট ইত্যাদি।

ইভেন্ট হ্যান্ডলারঃ

ওয়েব পেজে এমন অনেক ইভেন্ট ঘটে, এই ইভেন্টগুলি ধরে আমরা ইচ্ছে করলে কোন কাজ করতে পারি, কোন জেকোয়েরির কোড (jQuery Code) এক্সিকিউট করাতে পারি। জেকোয়েরিতে অনেক ফাংশন আছে যেগুলি শুধু এসব কোন ইভেন্ট ঘটলে এক্সিকিউট হবে এই ফাংশনগুলিকে বলে ইভেন্ট হ্যান্ডলার। ready(), click(), hover() এরুপ আরো অনেক ইভেন্ট হ্যান্ডলার আছে। যখনি একটা ইভেন্ট ঘটল, এটাকে টেকনিকাল ভাষায় বলে অমুক ইভেন্ট fire হল। একটা ইভেন্ট fire হওয়ার সাথে সাথে ঐ ইভেন্ট সংশ্লিষ্ট হ্যান্ডলার এর ভিতর কোড এক্সিকিউট হয়।
কোন একটা এলিমেন্ট সিলেক্ট করে এরপর যদি ready() ইভেন্ট হ্যান্ডলার ব্যবহার করেন তাহলে ঐ এলিমেন্টটি পেজে সম্পূর্ন লোড হওয়ার পর ready() এর ভিতর কোডগুলি কাজ করা শুরু করবে। যদি এলিমেন্ট লোড হওয়া পূর্ন না হয় তাহলে এর ভিতরের কোড কাজ করবেনা বরং অপেক্ষা করবে। সাধারনত জেকোয়েরির কোডের শুরুতেই এই হ্যান্ডলার ব্যবহার করে অর্থ্যাৎ পুরো পেজ সম্পূর্ন লোড হবে এরপর জেকোয়েরির অন্যসব কোডগুলি কাজ করা শুরু করবে।
অনুরুপ অন্যান্য ইভেন্ট হ্যান্ডলার এর ক্ষেত্রেও প্রযোজ্য যেমনঃ $(‘#test’).click() এভাবে থাকলে এর অর্থ হচ্ছে test আইডি সম্বলিত এলিমেন্টটি তে ক্লিক করার পর click() ইভেন্ট হ্যান্ডলার এর ভিতরের কোড এক্সিকিউট হবে।

এখন উপরের এই প্যারাগ্রাফটির click এর জায়গায় hover শব্দটি প্রতিস্থাপন করুন অথবা যেকোন ইভেন্ট হ্যান্ডলার এর নাম প্রতিস্থাপন করুন এবং লাইনটি পড়ুন।

ধন্যবাদ।

Mar 05

পিএইচপি ৫ সেশন্স (PHP 5 Sessions)

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

পিএইচপি সেশান কি?

আপনি যখন একটি অ্যাপ্লিকেশনে কাজ করেন তখন আপনি সেটিকে চালু করেন, কিছু পরিবর্তন তৈরি করেন এবং তারপর আপনি অ্যাপ্লিকেশনটিকে ক্লোজ করেন। এটি একটি সেশানের মতো। কম্পিউটার এখানে জানে আপনি কে। এটা জানে আপনি কখন অ্যাপ্লিকেশনটি চালু করেছেন এবং কখন বন্ধ করেছেন। কিন্তু ইন্টারনেটের ক্ষেত্রে এখানে একটি সমস্যা রয়েছেঃ ওয়েব সার্ভার জানেনা, আপনি কে এবং কি করেন, কারন এইচটিটিপি অবস্থা বজায় বা মনে রাখেনা।

সেশান ভ্যারিয়েবলগুলো ইউজারদের তথ্য সংরক্ষণের মাধ্যমে এই সমস্যাটির সমধান করতে পারে যে তথ্য অসংখ্য পেজে ব্যবহার করা যায় ( যেমন ইউজারনেম, প্রিয় রং ইত্যাদি)। ডিফল্ট হিসেবে সেশান ভ্যারিয়েবলগুলো ইউজার বা সাইট ব্যবহারকারী ব্রাউজার বন্ধ করা পর্যন্ত কার্যকর থাকে।
তাই, সেশান ভ্যারিয়েবলগুলো একজন মাত্র ইউজারের তথ্য ধারণ করে এবং একটি অ্যাপ্লিকেশনের মধ্যে সবগুলো পেজে কার্যকর থাকে।

টিপসঃ আপনার যদি একটি একটি স্থায়ী তথ্য সেভ করার জায়গার দরকার হয় তাহলে আপনি সেই তথ্য ডাটাবেজে সেভ করতে পারেন।

 

একটি পিএইচপি সেশান শুরু করা

session_start() ফাংশনের মাধ্যমে একটি সেশান শুরু হয়। পিএইচপি গ্লোবাল ভ্যারিয়েবলের ( $_SESSION ) মাধ্যমে সেশান ভ্যারিয়েবলগুলো নির্দিষ্ট করা হয়। এখন “demo_session1.php” নামের একটি নতুন পেজ তৈরি করা যাক। এই পেজে আমরা একটি নতুন পিএইচপি সেশান শুরু করি এবং কিছু ভ্যারিয়েবল সেট করিঃ

< ?php
 // Start the session
 session_start();
 ?>
 < !DOCTYPE html>
< ?php
 // Set session variables
 $_SESSION["favcolor"] = "green";
 $_SESSION["favanimal"] = "cat";
 echo "Session variables are set.";
 ?>

 

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

 

পিএইচপি সেশান ভ্যারিয়েবলগুলোর ভ্যালু পাওয়া

তারপর, আমরা “demo_session2.php” নামের আরেকটি পেজ তৈরি করি। এই পেজ থেকে আমরা সেশানের তথ্যকে অ্যাক্সেস করি যা আমরা প্রথম পেজে (“demo_session1.php”) সেট করেছিলাম।

লক্ষ্য করুন, সেশান ভ্যারিয়েবলগুলো প্রত্যেকটি নতুন পেজে আলাদাভাবে চলে যায়নি, এর পরিবর্তে এগুলো ঐ সেশান থেকে পাওয়া যায় যা আমরা প্রত্যেকটি পেজের শুরুতে চালু (“demo_session1.php”) করেছিলাম। আরও লক্ষ্য করুন, সবগুলো সেশান ভ্যারিয়েবল global $_SESSION ভ্যারিয়েবলে সেভ হয়ঃ

<?php
 session_start();
 ?>
 <!DOCTYPE html>
 <html>
 <body>
 
 <?php
 // Echo session variables that were set on previous page
 echo "Favorite color is " . $_SESSION["favcolor"] . ".<br>";
 echo "Favorite animal is " . $_SESSION["favanimal"] . ".";
 ?>

 

একটি ইউজার সেশানের জন্য সবগুলো সেশান ভ্যারিয়েবল ভ্যাল্যুকে দেখানোর অন্য একটি পদ্ধতি হলো নিচের কোডটিকে রান করাঃ

< ?php
 session_start();
 ?>
 < !DOCTYPE html>
< ?php
 print_r($_SESSION);
 ?>

 

কিভাবে এটি কাজ করে? কিভাবে এটি আপনাকে চেনে?

বেশিরভাগ সেশান ইউজারদের কম্পিউটারে একটি ইউজার-কি সেট করে যা এরকম দেখায়ঃ 765487cf34ert8dede5a562e4f3a7e12 । তারপর, যখন অন্য পেজে আরেকটি সেশান খোলা হয়, এটি ইউজার-কি খুঁজে পেতে কম্পিউটারকে স্ক্যান করে। যদি কোন মিল খুঁজে পাওয়া যায়, এটা ঐ সেশানে অ্যাক্সেস করে; যদি না পাওয়া যায় তাহলে এটি নতুন সেশান শুরু করে।

 

একটি পিএইচপি সেশান ভ্যারিয়েবল মডিফাই করা

সেশান ভ্যারিয়েবলকে পরিবর্তন করতে, শুধু এটাকে অভার রাইট করুনঃ

< ?php
 session_start();
 ?>
 < !DOCTYPE html>
< ?php
 // to change a session variable, just overwrite it
 $_SESSION["favcolor"] = "yellow";
 print_r($_SESSION);
 ?>

 

একটি পিএইচপি সেশানকে শেষ করে দেয়া

সবগুলো গ্লোবাল সেশান ভ্যারিয়েবলকে মুঁছে দিতে এবং নষ্ট করে দিতে session_unset() এবং session_destroy() ব্যবহার করুনঃ

< ?php
 session_start();
 ?>
 < !DOCTYPE html>
< ?php
 // remove all session variables
 session_unset();
// destroy the session
 session_destroy();
 ?>

 

Mar 05

জেকোয়েরি দিয়ে মোবাইল ফরমের মেনু সিলেকশন তৈরি ।

জেকোয়েরি দিয়ে মোবাইল ফরমের মেনু সিলেকশন তৈরি ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরি দিয়ে কিন্তু সব কিছুই করা যায় । যদি আপনি জেকোয়েরি ভাল করে বুঝতে পারেন এবং আপনি সেটাকে নিজের মত করে ব্যবহার করতে পারেন । আজ আমি আপনাদের জেকোয়েরি দিয়ে মোবাইল ফরমের মেনু সিলেকশন তৈরি করা শিখাবো ।

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

<form method=”post” action=”demoform.asp”>
<fieldset class=”ui-field-contain”>
<label for=”day”>Select Day</label>
<select name=”day” id=”day”>
<option value=”mon”>Monday</option>
<option value=”tue”>Tuesday</option>
<option value=”wed”>Wednesday</option>
</select>
</fieldset>
</form>

এখানে <select> element দিয়ে কতগুলো অপশন রাখা হয়েছে সিলেক্ট করার জন্য । আর <option> elements গুলো অপশন গুলো ড্রপ-ডাউন আকারে দেখাতে সাহায্য করছে ।

যদি আপনার অপশন লিস্ট অনেক বড় হয় তাহলে নিচের মত করে <optgroup> element যোগ করে আরো অপশন হিসেবে যোগ করতে পারেন ।
<select name=”day” id=”day”>
<optgroup label=”Weekdays”>
<option value=”mon”>Monday</option>
<option value=”tue”>Tuesday</option>
<option value=”wed”>Wednesday</option>
</optgroup>
<optgroup label=”Weekends”>
<option value=”sat”>Saturday</option>
<option value=”sun”>Sunday</option>
</optgroup>
</select>

নিজের মত করে মেনু সিলেকশন
আমি আগেই বলেছি আইফোন আর এন্ড্রয়েডের আলাদা আলাদা মেনু সিলেকশনের কথা । আপনি আইলেই কিন্তু সব মোবাইলে নিজের মত করে একই রকম মেনু সিকশন দেখাতে পারেন । এজন্য আপনাকে data-native-menu=”false” attribute যোগ করত হবে নিচের মত করে ।
<select name=”day” id=”day” data-native-menu=”false”>

একাধিক মেনু সিলেকশন
আমরা দেখি আমাদের অ্যালার্ম ক্লকে একাধিক বারের জন্য অ্যালার্ম সিলেক্ট করার অপশন থাকে । এটা করার জন্য আপনাকে <select> element এর ভিতর নিচের মত করে multiple অপশনটা যোগ করে দিতে হবে ।
<select name=”day” id=”day” multiple data-native-menu=”false”>

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

Mar 04

jQuery Mobile – Navigation Bars

লিখেছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল নেবিগেশন বার

জেক্যুয়েরি নেবিগেশন বার হল অনেকগুলো লিঙ্কের সমন্বয়ে গঠিত একটি গ্রুপ যা হেডারে বা ফুটারে আড়াআড়ি বা খাড়াখাড়ি অবস্থায় থাকে। [image] এই বারের লিঙ্কগুলো

ইলিমেন্টের ভেতরে আনঅর্ডারড লিস্ট হিসেবে থাকে এবং

ইলিমেন্টে data-role=”navbar” অ্যাট্রিভিউট ব্যবহার করা হয়।

উদাহরণঃ

ইঙ্গিতঃ নেভিগেশন বারের লিঙ্কগুলো ডিফল্টভাবেই বাটনে পরিবর্তিত হয় (“ui-btn” অথবা data-role=”button” ক্লাস ব্যবহার করার দরকার হয় না)। বাটনের প্রস্থ কন্টেন্ট হিসেবে ডিফল্টভাবেই নির্ধারিত হয়। আনঅর্ডারড লিস্টের কন্টেন্টগুলো বাটনের সম্পূর্ণ জায়গাকে % অনুসারে ভাগ করে নেয়, ১টি বাটন হলে ১০০% ২টি বাটন হলে ৫০% করে ৩টি বাটন হলে ৩৩.৩% করে ইত্যাদি। যদি নেভিগেশন বারে ৫টির বেশি বাটন থাকে তাহলে তা স্বয়ংক্রিয়ভাবে দ্বিতীয় লাইনে চলে যায়।

নেভিগেশন বারের আইকনঃ নেভিগেশন বারে আইকন অ্যাড করতে চাইলে data-icon অ্যাট্রিভিউট ব্যবহার করতে হয়। উদাহরণঃ Search আইকন চ্যাপ্টারে বর্ণিত CSS ক্লাসের নির্দিষ্ট ভ্যালুগুলোই data-icon অ্যাট্রিভিউট ব্যবহার করে, তবে একমাত্র পার্থক্য হল- “ui-icon-value” ক্লাসের পরিবর্তে data-icon=”value” অ্যাট্রিভিউট ব্যবহার করতে হয়।

অ্যাট্রিভিউট ভ্যালু data-icon=”home” data-icon=”arrow-r” data-icon=”search”

পজিশনিং আইকনঃ একেবারে “ui-btn-icon-position” ক্লাসের মতো (আইকন চ্যাপ্টারে বর্ণিত), আপনাকে শুধু বাছাই করতে হবে আইকনটি আপনি নেভিগেশন বাটনের কোথায় ব্যবহার করতে চানঃ লেফট, রাইট, আপ অথবা বোটম। আইকনের পজিশন নেভিগেশন বার কন্টেইনারে ঠিক করে দিতে হয় কারণ প্রত্যেকটা বাটনের জন্য আলাদা আলাদা করে পজিশন ঠিক করে দেয়া সম্ভব নয়। পজিশন ঠিক করার জন্য data-iconpos অ্যাট্রিভিউট ব্যবহার করতে হয়ঃ

অ্যাট্রিভিউট ভ্যালু বর্ণনা data-iconpos=”top” আইকন টপে প্রদর্শিত হবে data-iconpos=”right” আইকন রাইট সাইডে প্রদর্শিত হবে data-iconpos=”bottom” আইকন বোটমে প্রদর্শিত হবে data-iconpos=”left” আইকন লেফট সাইডে প্রদর্শিত হবে ইঙ্গিতঃ ডিফল্ট ভাবে আইকনের পজিশন টেক্সটের উপরে ঠিক হয়ে থাকে।

অ্যাকটিভ বাটনঃ নেভিগেশন বারের কোন লিঙ্কে যখন কিল্ক করা হয় তখন এটি সিলেক্টেড হয়েছে এরকম দেখানো হয় (নিচের দিকে কিছুটা ডাউন হয়ে যায়)। এই লুকটি আনার জন্য “ui-btn-active” ক্লাস ব্যবহার করতে হয়ঃ

উদাহরণঃ

 

অনেকগুলো পেজের জন্য যে পেজগুলোতে ইউজার অলরেডি ভিজিট করেছে সেগুলোকে সিলেক্টেড দেখানো দরকার হয়। এজন্য লিঙ্কে “ui-state-persist” ক্লাস এবং বাটনে “ui-btn-active” ক্লাস ব্যবহার করতে হয়ঃ

 

Mar 04

jQuery Mobile – Collapsibles

লিখেছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল কলাপ্সিবলস

কলাপ্সিবল কন্টেন্ট ব্লকঃ
কলাপ্সিবলের সাহায্যে আপনি কোন কন্টেন্টকে হাইড অথবা শো করতে পারবেন, এর ফলে কন্টেন্টে কোন তথ্যের কিছু অংশ স্টোর করে রাখা যায়।
ব্যাপারটা অনেকটা এরকম- ধরুন, আপনি আপনার পেজের কোন তথ্যের সম্পূর্ণ অংশ শো না করে শুধু হেডিং শো করবেন এবং বিস্তারিত পড়ার জন্য more বা + সাইন এরকম কিছু দিবেন। যদি কেউ বিস্তারিত পড়তে আগ্রহী হয় তাহলে সেই সাইনে ক্লিক করলে বাকি তথ্য শো করবে।

কোন কন্টেন্ট ব্লককে কলাপ্সিবল করার জন্য কন্টেইনারে data-role=”collapsib­le” অ্যাট্রিবিউট অ্যাড করতে হবে।
উদাহরণঃ

Click me – I’m collapsible!

I’m the expanded content.

ডিফল্টভাবে কন্টেন্ট ক্লোজ থাকে। পেজ লোড হওয়ার সময় কন্টেন্টকে রান করার জন্য data-collapsed=”fals­e” অ্যাট্রিবিউট অ্যাড করতে হবে।
উদাহরণঃ

Click me – I’m collapsible!

I’m now expanded by default.

ন্যাস্টেড কলাপ্সিবল ব্লকসঃ
কলাপ্সিবল কন্টেন্ট ব্লক ন্যাস্টেডও হতে পারে (অর্থাৎ একটি কলাপ্সিবল ব্লকের ভেতর অন্য একটি কলাপ্সিবল ব্লক অ্যাড করা)।
উদাহরণঃ

Click me – I’m collapsible!

I’m the expanded content.

Click me – I’m a nested collapsible block!

I’m the expanded content in the nested collapsible block.

ইঙ্গিতঃ কলাপ্সিবল কন্টেন্টকে অনেকবার পর্যন্ত ন্যাস্টেড করা সম্ভব।

কলাপ্সিবল সেটসঃ
অনেকগুলো কলাপ্সিবল ব্লকের গ্রুপকে একত্রে কলাপ্সিবল সেট বলে। একটি ব্লক যখন ওপেন হয় অন্য ব্লকগুলো তখন ক্লোজ থাকে। কিছু কলাপ্সিবল ব্লক তৈরি করে সেই ব্লকগুলোকে কলাপ্সিবল সেটের ভেতর data-role=”collapsib­leset” অ্যাট্রিবিউট দ্বারা একত্র করতে হয়।
উদাহরণঃ

Click me – I’m collapsible!

I’m the expanded content.

Click me – I’m collapsible!

I’m the expanded content.

Mar 04

jQuery Mobile – Tables

অনুবাদক: ফয়সাল রকি (এম.এ)

——–

রেসপন্সিভ টেবিল (Responsive Tables)
যখন আপনি আপনার মোবাইল ওয়েব পেইজটির content কে ব্যবহারকারী ডিভাইসের স্ক্রীন সাইজ এবং ওরিয়েন্টশন অনুযায়ী পরিবর্তন করতে চাইবেন তখন রেসপন্সিভ ডিজাইন গুরুত্বপূর্ণ ভূমিকা পালন করে। jQuery Mobile নামক class এর সাহায্যে ব্যবহারকারী ডিভাইসের স্ক্রীন সাইজ জানা যায় এবং উক্ত স্ক্রীন সাইজের জন্য content কে স্বয়ংক্রিয়ভাবে resize করা হয়।
Responsive tables এর সাহায্যে a large set of tabular data কে মোবাইল এবং ডেস্কটপ উভয়ের জন্যই সুন্দরভাবে উপস্থাপন করা যায়।
দুই প্রকারের responsive tables রয়েছে, যথা:
১) reflow এবং
২) column toggle

Reflow Table
reflow mode এর সাহায্যে minimum size অতিক্রম না করা পর্যৃন্ত table data কে horizontally রাখা হয় এবং সকল row কে vertically গ্রুপ করা হয়।
টেবিল তৈরি করার সময়

element এর মধ্যে data-role=”table” ও class=”ui-responsive” যোগ করতে হবে। নিম্নে উদাহরনের সাহায্যে দেখানো হলো:সঠিকভাবে রেসপন্সিভ টেবিল ব্যবহারের ক্ষেত্রেওelement ব্যবহার করতে হবে। এক্ষেত্রে rowspan ও colspan attributes ব্যবহার করা যাবে না, কেননা উক্ত attribute গুলো responsive table সাপোর্ট করে না।

Column Toggle Table
“column toggle” mode-এ যেসকল কলামের ক্ষেত্রে পর্যাপ্ত width পায় না সেসকল কলামকে hide করে দেয়া হয়।
Column Toggle Table তৈরি করার জন্য

element টি নিম্নোক্তভাবে data-role, data-mode, id ও class যোগ করতে হবে:সাধারণত jQuery Mobile টেবিলের ডানদিক হতে কলামকে hide করে দেয়, তবে আপনি কলামের গুরুত্ব অনুযায়ী order নির্দিষ্ট করে দিতে পারেন। এক্ষেত্রে table এর header () এ data-priority attribute টি যোগ করতে হবে, যেখানে সর্বোচ্চ priority মান হলো=১ এবং সর্বনিম্ন priority মান হলো=৬।I will never be hiddenI am very important – I will probably not be hiddenI am less important – I could be hiddenI am not that important – there is a good chance that I will be hiddenএখন, নিম্নোক্ত উদাহরণের মতো সকল কোডগুলোকে একত্রিত করে একটি column toggle table তৈরি করুন। দেখা যাবে যে, টেবিলের উপরের ডান প্রান্তে framework স্বয়ংক্রিয়ভাবে একটি বাটন তৈরি করেছে যার সাহায্যে ব্যবহারকারী কোন কোন কলাম দেখানো হবে তা নির্ধারণ করতে পারবে।
উদাহরণ:

CustomerID CustomerName ContactName Address City PostalCode Country
1 Alfreds Futterkiste Maria Anders Obere Str. 57 Berlin 12209 Germany

toggle table button এর text পরিবর্তন করার জন্য data-column-btn-text attribute যোগ করুন।
উদাহরণ:

Styling Tables
টেবিলের shadow যোগ করতে “ui-shadow” class যোগ করুন।
shadow যোগ করুণ:

টেবিলে আরোও বেশি style যোগ করতে চাইলে CSS যোগ করতে পারেন।
সকল table row এ bottom border যোগ করতে নিচের উদাহরণটি দেখুন:সকলelements এ bottom border এবং সকল even table row এ background color যোগ করতে নিচের উদাহরণটি দেখুন:

Mar 04

jQuery Mobile – Forms

লিখেছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল ফর্ম

জেক্যুয়েরি মোবাইল স্বয়ংক্রিয়ভাবেই HTML ফর্ম তৈরি করে যেন তা দেখতে অত্যন্ত মনোরম এবং স্পর্শের অনুকূল হয়। [image]

জেক্যুয়েরি মোবাইল ফর্ম স্টাকচারঃ জেক্যুয়েরি মোবাইল ইলিমেন্ট হিসেবে HTMLকে স্টাইল করার জন্য CSS ব্যবহার করে, ইলিমেন্টকে আকর্ষণীয় এবং ব্যবহার উপযোগী করে তোলে। জেক্যুয়েরি মোবাইলে আপনি নিচের কন্ট্রোলগুলো ব্যবহার করতে পারবেনঃ • Text Inputs • Search Inputs • Radio Buttons • Checkboxes • Select Menus • Sliders • Flip Toggle Switches

জেক্যুয়েরি মোবাইল ফর্ম নিয়ে কাজ করতে চাইলে আপনাকে অবশ্যই যে জিনিসগুলো জানতে হবেঃ •

ইলিমেন্টের অবশ্যই একটি মেথড এবং একটি অ্যাকশন অ্যাট্রিবিউট থাকতে হবে। • প্রত্যেক ফর্ম ইলিমেন্টের id অ্যাট্রিবিউট অবশ্যই ইউনিক হতে হবে। সাইটের সকল পেজের মধ্যেও id অ্যাট্রিবিউট ইউনিক হতে হবে। কারণ জেক্যুয়েরি মোবাইলের single-page navigation মডেল একইসাথে অনেকগুলো পেজকে রান করে। • প্রত্যেক ফর্ম ইলিমেন্টের অবশ্যই একটি লেভেল থাকতে হবে। ইলিমেন্টের id এর সাথে ম্যাচ করানোর জন্য লেভেলে for অ্যাট্রিবিউট সেট করতে হবে।

উদাহরণঃ

কৌশলঃ ইনপুট ফিল্ডে কি ধরনের ভ্যালু দেয়া যাবে তা সংক্ষেপে বোঝানোর জন্য placeholder ব্যবহার করা যায়। উদাহরণঃ

কৌশলঃ লেভেলকে হাইড করার জন্য “ui-hidden-accessible” ব্যবহার করা হয়। এটা সাধারনত তখন ব্যবহার করা যখন আপনি আপনার ফর্মের placeholderকে লেভেলের মতো করে দেখাতে চাইবেনঃ উদাহরণঃ

কৌশলঃ ক্লিয়ার বাটন (একটি X আইকন যা ইনপুট ফিল্ডের ডানপাশে থাকে কন্টেন্টকে মুছে ফেলার জন্য), অ্যাড করতে চাইলে data-clear-btn=”true” অ্যাট্রিবিউট ব্যবহার করতে হয়ঃ উদাহরণঃ ইঙ্গিতঃ ক্লিয়ার বাটন ইলিমেন্টে অ্যাড করা যায়,

Mar 03

পিএইচপি ৫ সুইচ স্ট্যাটমেন্ট (PHP 5 switch Statement)

পিএইচপি তে আমরা switch statement এর মাধ্যমে কোন শর্ত জুরে দিয়ে অনেকগুলো ব্লক code থেকে আমাদের নির্ধারিত ফলাফল পেতে পারি।

উদাহরণ এর মাধ্যমে আমরা এক এক করে switch statement এর বিষয় টি বুজতে পারব

 < ?php
 $favcolor = "red"; 
         /*এর মাধ্যমে আমরা নির্ধারণ করে দিলাম যে আমাদের red শব্দ টি দরকার*/
switch ($favcolor)  
         /*switch statement এর মাধ্যমে আমরা এর প্রক্রিয়া সুরু করলাম*/
 {
     case "red":  
         /*যদি declare করা value টি যদি মিলে যায় তাহলে এই case টি ডিসপ্লে হবে*/
         echo "Your favorite color is red!";
         break;
     case "blue":
         echo "Your favorite color is blue!";
         break;
     case "green":
         echo "Your favorite color is green!";
         break;
         /*এইভাবে করে আমরা অনেকগুলো case যুক্ত করতে পারি*/
      default:
         /*যদি আমাদের কোন case না মিলে তাহলে default হিসেবে এটি ডিসপ্লে করবে*/
         echo "Your favorite color is neither red, blue, or green!";
 }
 ?>

যদি ব্রাউজার এর মাধ্যমে আমরা রান করি তাহলে ফলাফল পাওয়া যাবে

Your favorite color is red!

এই ক্ষেত্রে বুঝা যাচ্ছে আমাদের প্রথম case টি কাজ করছে কারন প্রথম case টি আমরা বলেছি red এবং আমরা কোড এর শুরুতে নির্ধারণ করেছিলাম $favcolor = “red” ।

 

Mar 03

উইন্ডোজ 8.1 টিউটোরিয়াল: পিসির বিভিন্ন স্থানে যাওয়ার কৌশল (Getting around your PC)

উইন্ডোজ টিউটোনিয়াল : 11 এর 4

টাচ, মাউস এবং কীবোর্ড

আপনি টাচ স্ক্রীণ, মাউস বা কীবোর্ড যেটাই ব্যবহার করেন না কেন, উইন্ডোজ 8.1 এবং উইন্ডোজ আরটি এর মৌলিক কিছু কাজ সম্পাদনের প্রক্রিয়া জানার মাধ্যমে আপনার পিসি দ্রততার এবং দক্ষতার সাথে ব্যবহারের দক্ষতা অর্জনের একটি দীর্ঘ পথ দ্রুত অতিক্রম করতে পারেন । কয়েকটি টোকা, ক্লিক বা কীবোর্ডে আঘাতের মাধ্যমে আপনি দ্রুত জিনিস খুঁজে পেতে পারেন, একাধিক খোলা অ্যাপ্লিকেশন এর একটি থেকে আরেকটিতে যেতে পারেন এবং আপনার পিসির সাথে অন্তরঙ্গতা বাড়াতে পারেন।

বিস্তারিত পড়ার আগে, এটি গুরুত্বপূর্ণ যে, আপনি ডেস্কটপ, Start Screen এবং App View এর সাথে পরিচিত কিনা। অ্যাপ্লিকেশন ব্যবহার, বন্ধুদের সাথে যোগাযোগ, ওয়েব সাইট পরিদর্শন করা এবং পিসিতে অন্য যেকোন কিছু, আপনি সম্ভবত কাজের সময় এর সবকিছুই ব্যবহার করেছেন।

ডেস্কটপDesktop

পূর্বের মতো ডেস্কটপ এখানেও বিদ্যমান। আপনি বিভিন্ন ব্যাকগ্রাউন্ড, রং এবং থিম দিয়ে এটিকে নিজের মতো করে সাজাতে পারেন এবং পছন্দের অ্যাপ্লিকেশনগুলোকে টাস্কবার এ পিন করে রাখতে পারেন।

ডেস্কটপ এ যাওয়ার জন্য Start Screen এর Desktop টাইলস এ টোকা দিন বা ক্লিক করুন অথবা কীবোর্ড থেকে উইন্ডোজ এর প্রতীক Windows Logo+ D চাপ দিন।

যদি ডেস্কটপ টাইলস Start Screen এ না থাকে তাহলে নিম্নোক্ত ধাপগুলো অনুসরণের মাধ্যমে এটিকে পিন করতে পারেন:

1. App View দেখার জন্য আপনার হাতের আঙুলের সাহায্যে Start Screen এর মাঝ বরাবর থেকে উপরের দিকে স্লাইড করুন অথবা Start Screen এর নিচের দিকে বাম পাশের অ্যারো Arrow এ ক্লিক করুন।
2. Desktop এর উপর চাপ দিন বা ধরে রাখুন বা রাইট ক্লিক করুন। তার পর Pin to Start এ টোকা দিন বা ক্লিক করুন। (যদি আপনি ডেস্কটপ টাইল না পান তাহলে Desktop লেখা শুরু করুন।)

 

স্টার্ট স্ক্রিণStart Screen

Start হচ্ছে এমন একটি জায়গা যেখানে আপনার অ্যাপ্লিকেশনগুলো, ব্যক্তি, ওয়েবসাইটগুলো, ফোল্ডার এবং অন্যান্য গুরুত্বপূর্ণ জিনিসগুলো দেখতে পারেন।
Start Screen এ যেতে পর্দার ডান প্রান্তের দিকে সুইপ করুন এবং Start এ টোকা দিন। যদি আপনি মাউস ব্যবহার করেন তাহলে মাউস পয়েন্টারকে পর্দার বাম প্রান্তের নিচের দিকে নিয়ে যান এবং Start বাটনে ক্লিক করুন।
Start Screen সম্পর্কে আরো জানতে দেখুন “Start সম্পর্কে সবকিছু”

 

অ্যাপ ভিউ95cd6947-bab3-42c8-b148-d03ad0f4f6f1_32

App View এ আপনার কম্পিউটারে ইনস্টল করা সকল অ্যাপ্লিকেশন দেখতে এর টাইলস দেখতে পারেন। App View এ আপনি অ্যাপ্লিকেশন খুলতে পারেন, Start এ পিন করতে পারবেন, বা তাদেরকে টাস্কবারে পিন করতে পারবেন।

App View দেখার জন্য আপনার হাতের আঙুলের সাহায্যে Start Screen এর মাঝ বরাবর থেকে উপরের দিকে স্লাইড করুন অথবা Start Screen এর নিচের দিকে বাম পাশের অ্যারো Arrow এ ক্লিক করুন।

টাচ এর মাধ্যমে সর্বত্র যাওয়া

Using Touch

স্পর্শ ব্যবহার করে সাধারণ কর্ম

নিম্নোক্ত টেবিল আপনার পিসিতে সাধারণ কাজগুলো টাচ ব্যবহার করে কিভাবে করবেন তা দেখাচ্ছে। সম্পূর্ণ তালিকা পেতে দেখুন “টাচ, সুইপ, টেপ  এবং অন্যান্য”।

কীবোর্ড শর্টকাট

কাজ

কিভাবে করবেন

কীবোর্ড শর্টকাট
Charm খোলা পর্দার ডান প্রান্তের দিকে সুইপ করুন উইন্ডোজ প্রতীক কী Windows Logo+ C
অ্যাপ্লিকেশন এর কমান্ড দেখা পর্দার উপর বা নিচে সুইপ করে যাওয়া উইন্ডোজ প্রতীক কী Windows Logo+ Z
শেষ ব্যবহৃত অ্যাপ এ যাওয়া পর্দার বাম প্রান্তে সুইপ করে যাওয়া উইন্ডোজ প্রতীক কী Windows Logo+ Tab
শেষ ব্যবহৃত অ্যাপগুলো দেখা পর্দার বাম প্রান্তে সুইপ করে যাওয়া এবং হাতের আঙুল চাপা রাখা অবস্থায় বাম প্রান্ত থেকে ফিরে আসা উইন্ডোজ প্রতীক কী Windows Logo+ Tab
একটি অ্যাপ বন্ধ করা পর্দার উপরের প্রান্ত থেকে অ্যাপটি পর্দার নিচের অংশে টেনে আনা Alt+F4
জুম দুই বা ততোধিক আঙুল দিয়ে পর্দা স্পর্শ করুন এবং আঙুলগুলো একে অপরেরদিকে (ছোট করার জন্য) বা বিপরীত দিকে (বড় করার জন্য) সরাণ। Ctrl + Plus Sign (+) or Ctrl + Minus Sign (-)
একটি আইটেম নির্বাচন করা নিচের দিকে বা আইটেম এর দিকে সুইপ করুন, বা চাপ দিন এবং ধরে রাখুন

 

 

মাউস ব্যবহার করে সর্বত্র যাওয়া

Using Mouse

মাউস ব্যবহার করে সাধারণ কর্ম

কাজ

কিভাবে করবেন

কীবোর্ড শর্টকাট
Charm খোলা মাউস পয়েন্টার উপরের ডান প্রান্তে বা নিচের বাম প্রান্তে সরান। যখন Charm দেখা যাবে উপর বা নিচে প্রান্তে সরান এবং যেটি চান তার উপর ক্লিক করুন । উইন্ডোজ প্রতীক কী Windows Logo+ C
অ্যাপ্লিকেশন এর কমান্ড দেখা অ্যাপ এর উপর ডান-ক্লিক করুন উইন্ডোজ প্রতীক কী Windows Logo+ Z
শেষ ব্যবহৃত অ্যাপ এ যাওয়া পর্দার উপরের বাম কর্ণারে মাউস পয়েন্টার এবং পর্দার নিচ প্রান্তের দিকে নিয়ে যান উইন্ডোজ প্রতীক কী Windows Logo+ Tab
একটি অ্যাপ বন্ধ করা মাউস পয়েন্টার পর্দার উপরের প্রান্তে নিয়ে যান এবং Close  Closeএ ক্লিক করুন। Alt+F4
জুম Ctrl এ চাপ দিয়ে মাউসের হুইল গুরান Ctrl+Plus Sign (+)or Ctrl+Minus Sign (-)
টাস্কবার দেখা মাউস পয়েন্টার পর্দার নিচের প্রান্তে নিয়ে যান উইন্ডোজ প্রতীক কী Windows Logo + T টাস্কবার এর প্রথম অ্যাপ সিলেক্ট করুন

Mar 03

SEO বা সার্চ ইঞ্জিন অপ্টিমাইজেশান এর সহজ কৌশল

আজকে আমি SEO বা সার্চ ইঞ্জিন অপ্টিমাইজেশান কৌশল নিয়ে আলোচনা করতে চাই. একটি ওয়েবসাইট প্রতিটি সার্চ ইঞ্জিনের ভিতরে একটি উচ্চাসন লাভ করতে চায়. আর এটা কি ভাবে করা যায় সেটাই হচ্ছে SEO বা সার্চ ইঞ্জিন অপ্টিমাইজেশান। SEO এর সবচেয়ে সহজ কৌশল হচ্ছে আপনার ওয়েব সাইটের লিঙ্কটি বিভিন্ন ওয়েব সাইটে শেয়ার করা, যেমন= সোশ্যাল নেটওয়ার্কিং সাইট (Facebook, Twitter, Google+, LinkedIn), বুকমার্কিং সাইট (Stumble, Pinterest , Digg, Reddit, Delicious), ব্লগ কমেন্টস্‌ এবং ফোরাম পোস্টিং ইত্যাদি কাজ গুলোর মাধ্যমে খুব সহজেই একটি ওয়েব সাইট কে গুগল পেজ-রেঙ্ক ১-৪ নিয়ে আসা যায়।