পিএইচপি ৫ ফাইল আপ্লোড (PHP 5 File Upload)

Sheikh Mahfuzur Rahman

 

পিএইচপি’র সাহায্যে খুব সহজেই সার্ভারে ফাইল আপলোড করা যায়। যাহোক, সহজ হওয়ার কারণে বিপদও বেশি হতে পারে! তাই সার্ভারে ফাইল আপলোডের সুযোগ দেয়ার সময় সতর্ক হোন!

 

“php.ini” ফাইল কনফিগার করা

প্রথমে, ফাইল আপলোড করার জন্য পিএইচপি কনফিগার করা হয়েছে কিনা তা নিশ্চিত করতে হবে। আপনার “php.ini” ফাইলে file_uploads ডিরেক্টিভকে খুঁজে বের করুন এবং এটিকে সচল (On) করুনঃ


file_uploads = On

 

এইচটিএমএল ফর্ম তৈরি করা

তারপর একটি এইচটিএমএল ফর্ম তৈরি করুন যা ইউজারদেরকে ইমেজ ফাইল সিলেক্ট করে আপলোড করার সুযোগ করে দেয়:


<!DOCTYPE html>
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
 Select image to upload:
 <input type="file" name="fileToUpload" id="fileToUpload">
 <input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>

 

উপরের ফর্মটি তৈরি করার সময় নিচের নিয়মগুলো অনুসরন করুন

  • ফর্মটি যেন method=”post” কে ব্যবহার করে তা নিশ্চিত করতে হবে।
  • ফর্মটির উল্লেখিত এট্রিবিউটগুলোরও প্রয়োজন পড়বেঃ enctype=”multipart/form-data”। ফর্মটি সাবমিট করার সময় কোন কনটেন্ট-টাইপ ব্যবহার করতে হবে তা এটা ঠিক করে দেয়।

উপরের উপকরণগুলো ছাড়া ফাইল আপলোড হবেনা।

 

অন্যান্য যেসব দিকে খেয়াল রাখতে হবে

<input> ট্যাগের type=”file” এট্রিবিউট ইনপুট-ফিল্ডকে, ইনপুট-কন্ট্রোল এর পাশে একটি “Browse” বাটনসহ, একটি ফাইল-সিলেক্ট কন্ট্রোল হিসেবে দেখায়।

উপরের ফর্মটি “upload.php” নামক ফাইলের কাছে, যা আমরা এরপর তৈরি করবো, ডাটা পাঠায়।

 

আপলোড ফাইল পিএইচপি স্ক্রিপ্ট তৈরি করা

“upload.php” ফাইলটি ফাইল আপলোডের কোড ধারণ করেঃ


<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
     $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
     if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
     } else {
        echo "File is not an image.";
        $uploadOk = 0;
     }
}
?>

উপরের পিএইচপি স্ক্রিপ্টটির ব্যাখ্যা

  • $target_dir = “uploads/” – ফাইলটি কোন ডিরেক্টরিতে রাখা হবে তা ঠিক করে
  • $target_file – ফাইলটি আপলোড করার পাথ নির্ধারণ করে
  • $uploadOk=1 – এটি এখনো ব্যবহার করা হয়নি (পরবর্তীতে ব্যবহার করা হবে)
  • $imageFileType – এটি ফাইলের ফাইল এক্সটেনশন ধারণ করে

এরপর স্ক্রিপ্টটি চেক করে দেখে যে ইমেজ ফাইলটি সত্যিকার ইমেজ ফাইল কিনা।

লক্ষ্যণীয়ঃ আপনাকে ‘”upload.php” ফাইলটি যে ডিরেক্টরিতে আছে সেখানে “uploads” নামের ডিরেক্টরি তৈরি করতে হবে। আপলোড করা ফাইলগুলো সেখানে সেভ হবে।

 

কোন ফাইল ইতোমধ্যেই আছে কিনা চেক করা

এখন আমরা কিছু সীমাবদ্ধতা আরোপ করবো।

প্রথমেই, আমরা চেক করবো ফাইলটি এর মধ্যেই ‘”uploads” ফোল্ডারে আছে কিনা। যদি সেটি থাকে তাহলে একটি এরর মেসেজ দেখায় এবং $uploadOk শূন্যতে সেট হয়ঃ


// Check if file already exists
 if (file_exists($target_file)) {
     echo "Sorry, file already exists.";
     $uploadOk = 0;
 }

 

ফাইল সাইজ লিমিট করা

আমাদের এইচটিএমএল ফর্মের ইনপুট ফিল্ডটির নাম “fileToUpload”
এখন আমাদের ফাইলের সাইজ ঠিক করতে চাই। যদি ফাইলটি ৫০০কিলোবাইটের চেয়ে বড় হয় তাহলে একটি এরর মেসেজ দেখায় এবং $uploadOk শূন্যতে সেট হয়ঃ


 // Check file size
 if ($_FILES["fileToUpload"]["size"] > 500000) {
     echo "Sorry, your file is too large.";
     $uploadOk = 0;
 }

 

ফাইল টাইপ সীমিত করা

নিচের কোডটি শুধুমাত্র ইউজারদের JPG, JPEG, PNG, এবং GIF ফাইল আপলোড করতে দেয়। অন্য ধরণের ফাইল টাইপগুলো একটি এরর মেসেজ দেখায় এবং $uploadOk শূন্যতে সেট করেঃ


// Allow certain file formats
 if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
 && $imageFileType != "gif" ) {
     echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
     $uploadOk = 0;
 }

 

আপলোড ফাইলের পিএইচপি স্ক্রিপ্ট সম্পূর্ণ করা

সম্পূর্ণ “upload.php” ফাইলটি ঠিক এমন দেখাবেঃ


<?php
 $target_dir = "uploads/";
 $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
 $uploadOk = 1;
 $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
 // Check if image file is a actual image or fake image
 if(isset($_POST["submit"])) {
     $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
     if($check !== false) {
         echo "File is an image - " . $check["mime"] . ".";
         $uploadOk = 1;
     } else {
         echo "File is not an image.";
         $uploadOk = 0;
     }
 }
 // Check if file already exists
 if (file_exists($target_file)) {
     echo "Sorry, file already exists.";
     $uploadOk = 0;
 }
 // Check file size
 if ($_FILES["fileToUpload"]["size"] > 500000) {
     echo "Sorry, your file is too large.";
     $uploadOk = 0;
 }
 // Allow certain file formats
 if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
 && $imageFileType != "gif" ) {
     echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
     $uploadOk = 0;
 }
 // Check if $uploadOk is set to 0 by an error
 if ($uploadOk == 0) {
     echo "Sorry, your file was not uploaded.";
 // if everything is ok, try to upload file
 } else {
     if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
         echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
     } else {
         echo "Sorry, there was an error uploading your file.";
     }
 }
 ?>

 

পিএইচপি’র ফাইল সিস্টেম ফাংশনগুলোর পূর্ন রেফারেন্সের জন্য আমাদের পিএইচপি ফাইল সিস্টেম রেফারেন্সে যান।

 

jQuery Mobile – Events

jQuery Mobile এর Event গুলো
ইন্দ্র ভূষণ শুভ

Events= একটি ওয়েব পেইজ যা সমস্ত পরির্দশকের বিভিন্ন কর্মকান্ডে সাড়া দিতে পারে।

jQuery Mobile এর Event গুলো

jQuery Mobile এ আপনি যেকনো মানের jQuery Events ব্যবহার করতে পারেন।
উপরন্ত, jQuery Mobile আপনাকে বিভিন্ন ধরনের Events ব্যবহারের সুযোগ দিবে যা মোবাইলে ব্রাউজিং করার উপযুক্ত।
Touch Events- যখন একজন ব্যবহারকারী পর্দা স্পর্শ করে তখনই শুরু হয় (tap এবং swipe)
Scroll Events- যখন একজন ব্যবহারকারী উপর এবং নীচে স্ক্রল করে তখন শুরু হয়
Orientation events- যখন যন্ত্রটি উল্লম্বভাবে বা অনুভূমিকভাবে আবর্তিত করা হয় তখন শুরু হয়
Page events- একটি পাতা যখন দেখানো, লুকানো, তৈরি, লোড অথবা আনলোড করা হয় তখন শুরু করে
jQuery Mobile এর সমস্ত Events এর reference এর জন্য, দয়া করে jQuery Mobile Events Reference পেইজটি পরিদর্শন করুন।
jQuery Mobile Events এর প্রণালীঃ
jQueryতে, আপনি jQuery কোড প্রতিরোধ করে শুরু হওয়ার পুর্বে শেষ হবে এমন document তৈরির event শিখতে পারেন (প্রস্তুত)

jQuery তে document প্রস্তুতের event

নিজে চেষ্টা করুন>>

যাহোক, jQuery Mobile এ আমরা পেইজ তৈরির event ব্যবহার করি, যা ঘটে যখন DOM এ পেইজ তৈরি হয়, কিন্তু বর্ধিতকরনের আগে সম্পূর্ণ হয়।
দ্বিতৃয় পরিমাপকটি ঘটনা উল্লেখ করতে (“#pageone”) পেইজ আইডি পয়েন্ট করেঃ

jQuery Mobile এ পেইজ তৈরির event
>

বিশেষ দ্রষ্টব্যঃ jQuery on() পদ্ধতি event হ্যান্ডলার জোড়ায় ব্যবহার করা হয়
পরবর্তী অধ্যায় jQuery Mobile এর কিছু অধিক জনপ্রিয় event ব্যাখ্যা করবে।

jQuery Mobile – Touch Events

Paste translated/written article here
মোবাইলের jQuery Touch Events
ইন্দ্র ভূষণ শুভ

Touch Events শুরু হয় যখন ব্যবহারকারী মোবাইলের পর্দা স্পর্শ করে।
Touch Events ডেস্কটপ কম্পিউটারেও কাজ করেঃ মাউসের tap and swipe এর মাধ্যমে।
মোবাইলে jQuery ট্যাপঃ
ব্যবহারকারী যখন কনো উপাদানে ট্যাপ করতে শুরু করে তখনই ট্যাপের ঘটনা আরম্ভ হয়। নীচের উদাহরণটি বলছেঃ বর্তমান

উপাদান আড়াল হয়ে যায়, যখন ট্যাপ

উপাদানে ইন্ধন যোগায়।
উদাহরণঃ
$(“p”).on(“taphold”,function(){
$(this).hide();
});
নিজে চেষ্টা কর>>
মোবাইলে jQuery ট্যাপহোল্ডঃ
যখন ব্যবহারকারী কোন উপাদান ট্যাপ এবং এক সেকেন্ডের জন্য তা ধরে রাখে তখন ট্যাপহোল্ড আরম্ভ হয়ঃ
উদাহরণঃ
$(“p”).on(“taphold”,function(){
$(this).hide();
});
নিজে চেষ্টা কর>>

মোবাইলে jQuery সুইপঃ
সুইপের ঘটনা তখনই শুরু হয় যখন ব্যবহারকারী 30px এর বেশীতে কোন উপাদানকে আনুভূমিকভাবে সুইপ করে।
উদাহরণঃ
$(“p”).on(“swipe”,function(){
$(“span”).text(“Swipe detected!”);
});
নিজে চেষ্টা কর>>

মোবাইলে jQuery সুইপলেফটঃ
সুইপলেফটের ঘটনা তখনই শুরু হয় যখন ব্যবহারকারী 30px এর বেশীতে কোন উপাদানকে বামদিকে সুইপ করে।
উদাহরণঃ
$(“p”).on(“swipeleft”,function(){
alert(“You swiped left!”);
});
নিজে চেষ্টা কর>>

মোবাইলে jQuery সুইপরাইটঃ
সুইপরাইট ঘটনা তখনই শুরু হয় যখন ব্যবহারকারী 30px এর বেশীতে কোন উপাদানকে ডানদিকে টানাটানি করে।
উদাহরণঃ
$(“p”).on(“swiperight”,function(){
alert(“You swiped right!”);
});
নিজে চেষ্টা কর>>

jQuery Mobile – Page Event

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

ইভেন্টঃ

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

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

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

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

ধন্যবাদ।

পিএইচপি ৫ সেশন্স (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();
 ?>

 

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

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

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

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

<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”>

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

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” ক্লাস ব্যবহার করতে হয়ঃ

 

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.

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 যোগ করতে নিচের উদাহরণটি দেখুন:

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” অ্যাট্রিবিউট ব্যবহার করতে হয়ঃ উদাহরণঃ ইঙ্গিতঃ ক্লিয়ার বাটন ইলিমেন্টে অ্যাড করা যায়,