পিএইচপি ৫ ফর্ম হ্যান্ডলিং (PHP 5 Form Handling)

আক্তারুজ্জামান

Department of CSE, University of Chittagong

 

ইউজার এর কাছ থেকে বিভিন্ন ধরনের তথ্য সংগ্রহ করতে ফর্ম (form) ব্যাবহার করা হয়। এই তথ্যগুলো পিএইচপি প্রোগ্রামের মাধ্যমে ডাটাবেজে স্টোর করা হয়। পিএইচপি তে দুটি সুপার গ্লুবাল ভেরিয়েবল আছে যা ফর্ম থেকে বিভিন্ন উপাত্ত বা ইউজার এর ইনপুট তুলে আনতে ব্যাবহৃত হয়। এই দুইটি ভেরিয়েবল হল $_GET এবং $_POST।

নিচের উদাহরণে একটি সিম্পল এইচটিএমএল ফর্ম দেওয়া হয়েছে যেখানে ২ টি ইনপুট ফিল্ড এবং একটি সাবমিট বাটন রয়েছে।


<html>
 <body>
 
 <form action="welcome.php" method="post">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name="email"><br>
 <input type="submit">
 </form>
 
 </body>
 </html>

 

যখন ইউজার এই ফর্মের ডাটা ফিল্ড গুলো পূর্ণ করে সাবমিট বাটনে ক্লিক করবে তখন উক্ত ডাটা গূলো “welcome.php” ফাইলে চলে যাবে। এখানে যেহেতু মেথড “post” ব্যাবহার করা হয়েছে তাই ডাটা গুলো HTTP POST মেথডের মাধ্যমে সেন্ড হবে।
সাবমিট করা ডাটা গুলো খুব সহজে নিচের মত করে “welcome.php” ফাইলে প্রদর্শন করা যাবে।


 <html>
 <body>
 
 Welcome <?php echo $_POST["name"]; ?><br>
 Your email address is: <?php echo $_POST["email"]; ?>
 
 </body>
 </html>

 

এই কোডটির আউটপূট হবে নিচের মতঃ


Welcome John
Your email address is john.doe@example.com


 

একই ভাবে HTTP GET মেথডে ব্যাবহার করেও কাজটি করা যাবে।
উদাহরনঃ


 <html>
 <body>
 
 <form action="welcome_get.php" method="get">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name="email"><br>
 <input type="submit">
 </form>
 
 </body>
 </html>

 

এখেত্রে “welcome_get.php” ফাইলটি নিচের মত হবেঃ


<html>
 <body>
 
 Welcome <?php echo $_GET["name"]; ?><br>
 Your email address is: <?php echo $_GET["email"]; ?>
 
 </body>
 </html>

 

গেট বনাম পোষ্ট (GET vs. POST)

  • GET এবং POST উভয়েইএকটি অ্যারে নির্মাণ করে (যেমনঃ array( key => value, key2 => value2, key3 => value3, …))। এখানে key,key1,key2 হল ফর্ম কন্ট্রোল গুলোর নামে এবং value,value1,value2 হল ইউজারের ইনপুট ডাটা।
  • GET এবং POST উভয়েই $ _GET এবং $ _POST হিসাবে গণ্য হয়। এইগুলো হল সুপার গ্লুবালস অর্থাৎ এইগুলো সবসময় সব ফাংশন এবং সব ক্লাস থেকে এক্সেস করা যাবে।
  • ফর্মের ডাটা GET মেথড ব্যাবহার করে সেন্ড করলে সকল ডাটা ব্রাউজার এড্রেসবারে URL এ প্রদর্শিত হয়। অন্য দিকে ফর্মের ডাটা POST মেথড ব্যাবহার করে সেন্ড করলে ডাটা ব্রাউজার এড্রেসবারে URL এ প্রদর্শিত হয় না।

 

কখন GET ব্যবহার করতে হবে? (When to use GET?)

GET এর মাধ্যমে পাঠানো ডাটা সবাই দেখতে পায়। GET এর মাধ্যমে খুব বেশি ডাটা পাঠানো যায় না ,সর্বোচ্চ 2000 characters পাঠানো যায়। সেনসিটিভ ডাটা যেমন passwords সেন্ড করার জন্য কখনো GET ব্যাবহার করা উচিত নয়।

 

কখন POST ব্যবহার করতে হবে? (When to use POST?)

POST এর মাধ্যমে পাঠানো ডাটা অন্যরা দেখতে পায় না এবং এইখানে যত ইচ্ছা তথ্য পাঠানো যায়। এছাড়াও POST এর মাধ্যমে সার্ভারে ফাইল আপলোড করা যায় যেটা GET এর মাধ্যমে করা সম্ভব না।

 

বুটস্ট্র্যাপ ট্যাক্সট / টাইপোগ্রাফি (Bootstrap Text/Typography)

Bootstrap এর প্রাথমিক (default ) ফন্ট সাইজ হল ১৪ পিক্সেল, যার প্রতি লাইনের উচ্চতা (height) ১.৪২৮ ।

এটা <body> এবং সমস্ত প্যরাগ্রাফে ব্যবহার করা হয় ।

উপরন্তু, সকল <p> elements এর একটি bottom margin থাকে যেটা তাদের নির্ণিত line-height এর সমান অথবা অর্ধেক (ডিফল্ট হিসেবে 10px)

বুটস্ট্র্যাপ বনাম ব্রাউজার ডিফল্ট 

এই অনুশীলনীতে আমারা দেখব বুটস্ট্র্যাপ এবং এর পরে ব্রাউজার এর সাহায্যে HTML এলিমেন্টকে কিছুটা ভিন্নতরভাবে স্টাইল করা।

<h1> – <h6>

Default হিসাবে, বুটস্ট্র্যাপ HTML হেডিংকে (<h1> to <h6>) নিম্নোক্তভাবে স্টাইল করে :

কোড :


<div class="container">
  <h1>h1 Bootstrap heading (36px)</h1>
  <h2>h2 Bootstrap heading (30px)</h2>
  <h3>h3 Bootstrap heading (24px)</h3>
  <h4>h4 Bootstrap heading (18px)</h4>
  <h5>h5 Bootstrap heading (14px)</h5>
  <h6>h6 Bootstrap heading (12px)</h6>
</div>

 

উল্লেখ্য : এই অনুচ্ছেদের প্রতিটি উদাহরণ নিয়ে কাজ করার ক্ষেত্রে হেড অংশে নিম্নোক্ত কোড অবশ্যই লিখতে হবে :


  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap
.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>

 

 

<small>

Bootstrap এ HTML <small> এলিমেন্টকে কিছুটা আলোকিত এবং দ্বীতিয় পর্যায়ের টেক্স তৈরি করার জন্য ব্যবহার করা হয়।

কোড :


<div class="container">
  <h1>Lighter, Secondary Text</h1>
  <p>The small element is used to create a lighter, secondary text in any heading:</p>       
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
</div>

 

<mark>

Bootstrap, HTML <mark> এলিমেন্টকে নিম্নোক্তভাবে স্টাইল করে।

কোড :


<div class="container">
  <p>Use the mark element to <mark>highlight</mark> text.</p>
</div>

 

<abbr>

Bootstrap, HTML <abbr> এলিমেন্টকে নিম্নোক্তভাবে স্টাইল করে।

কোড :


<div class="container">
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

 

<blockquote>

HTML <blockquote> এলিমেন্ট Bootstrap এ নিচের মত স্টাইল হয় :

কোড :


<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote>
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading 
conservation organization, WWF works in 100 countries and is supported by 1.2 million members 
in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
  </blockquote>
</div>

 

.blockquote-reverse class টি ব্যবহার করা হয় ডান পাশে quote দেখানোর জন্য

কোড :


<div class="container">
  <h1>Blockquotes</h1>
  <p>To show the quote on the right use the class .blockquote-reverse:</p>
  <blockquote class="blockquote-reverse">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading 
conservation organization, WWF works in 100 countries and is supported by 1.2 million members 
in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
  </blockquote>
</div>

 

<dl>

HTML <dl> এর সাহায্যে Bootstrap এ নিচের style টি তৈরি হয়

কোড :


<div class="container">
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

 

<code>

Bootstrap এ HTML <code> এলিমেন্ট নিচের মত স্টাইল হয় :

কোড :


<div class="container">
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> 
defines a section in a document.</p>
</div>

 

<kbd>

Bootstrap এ HTML <kbd> এলিমেন্ট নিচের মত স্টাইল হয় :

কোড:


<div class="container">
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

 

<pre>

HTML <pre>এর সাহায্যে Bootstrap এ নিচের style তৈরি হয়

কোড:


<div class="container">
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

 

প্রাসঙ্গিক রং এবং ব্যাকগ্রাউন্ড

Bootstrap এ কিছু প্রাসঙ্গিক class আছে, যার মাধ্যমে অর্থবহ রং তৈরি করা যায়।

টেক্সট এর জন্য class গুলো হচ্ছে :.text-muted, .text-primary, .text-success, .text-info, .text-warning, এবং .text-danger:

কোড :


<div class="container">
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

 

ব্যাকগ্রাউন্ট এর জন্য class গুলো হচ্ছে : .bg-primary, .bg-success, bg-info, bg-warning, এবং .bg-danger:

কোড:


<div class="container">
  <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
</div>

 

অন্যান্য টাইপোগ্রাফি Class

  • .lead
  • .small
  • .text-left
  • .text-center
  • .text-right
  • .text-justify
  • .text-nowrap
  • .text-lowercase
  • .text-uppercase
  • .text-capitalize
  • .initialism
  • .list-unstyled
  • .list-inline
  • .dl-horizontal
  • .pre-scrollable

এগুলো ব্যবহারের ফলাফল দেখার জন্য  <p class=”lead”>এখানে আপনার টেক্সট লিখুন</p> লাইনের class=’উপরের যেকোন একটি ক্লাস’ লিখে চেষ্টা করুন।

 

বুটস্ট্র্যাপ গ্রিডস (Bootstrap Grids)

শেখ মাহফুজুর রহমান

 

বুটস্ট্র্যাপ গ্রিড সিস্টেম

বুটস্ট্র্যাপ গ্রিড সিস্টেম পুরো পেজে ১২টি কলাম যোগ করতে দেয়। যদি আপনি ১২টি কলাম আলাদা আলাদাভাবে ব্যবহার করতে না চান, তাহলে কয়েকটি কলামকে একসাথে একত্র করে প্রশস্ত কলাম তৈরি করতে পারেনঃ

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

 span 4

 span 4

 span 4

span 4

span 8

span 6

span 6

span 12

 

বুটস্ট্র্যাপ গ্রিড সিস্টেম রেসপনসিভ (ডিভাইস স্ক্রিন অনুসারে স্টাইল/লেআউট পরিবর্তিত হয়) এবং স্ক্রিনের সাইজ অনুযায়ী সয়ংক্রিয়ভাবে কলামগুলো রি-অ্যারেঞ্জ হবে।

গ্রিড ক্লাস

বুটস্ট্র্যাপ গ্রিড সিস্টেমের চারটি ক্লাস রয়েছেঃ

  • xs (ফোনের জন্য)
  • sm (টেবলেট এর জন্য)
  • md (ডেস্কটপের জন্য)
  • lg (বড় ডেস্কটপের জন্য)

উপরের ক্লাসগুলো একত্র করে আরও ডাইনামিক ও ফেক্সিবল লেআউট তৈরি করা সম্ভব।

 

একটি বুটস্ট্র্যাপ গ্রিডের বেসিক স্ট্রাকচার

নিচে একটি বুটস্ট্র্যাপ গ্রিডের বেসিক স্ট্রাকচার দেয়া হলোঃ


<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

 

প্রথমে একটি রো তৈরি করুন (<div class="row">)। তারপর ইচ্ছেমতো কলামের নাম্বারগুলো (tags with appropriate .col-*-* classes) যোগ করুন। লক্ষ্য রাখবেন, .col-*-* এর নাম্বারগুলো প্রত্যক রো এর জন্য ১২ পর্যন্ত হতে হবে।

 

নিচে কিছু বেসিক বুটস্ট্র্যাপ গ্রিড লেআউটের উদাহরণ দেয়া হলো।

তিনটি সমমাপের কলাম

.col-sm-4 .col-sm-4 .col-sm-4
নিচের উদাহরণে কিভাবে তিনটি সমমাপের কলাম পাওয়া যায় যেগুলোর ব্যবহার টেবলেট দিয়ে শুরু হয় এবং ডেস্কটপে বড় হয়ে যায় তা দেয়া হলো। মোবাইল ফোনে কলামগুলো স্তুপাকারে বিন্যস্ত হয়ে যাবেঃ

 <div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

ফলাফল : তিনটি-সমমাপের-কলাম

 

দুইটি অসম কলাম

.col-sm-4 .col-sm-8

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


 <div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

ফলাফল : দুইটি-অসম-কলাম

 

টিপঃ এই টিউটোরিয়ালের পরবর্তী অধ্যায়গুলোতে বুটস্ট্র্যাপ গ্রিড সম্পর্কে আরও বিস্তারিতভাবে জানতে পারবেন।

 

বুটস্ট্র্যাপ শেখা শুরু করা যাক (Bootstrap Get Started)

Bootstrap কি ????

  • Bootstrap হল ফ্রি front-end framework, সহজ এবং দ্রুত গতির web development এর জন্য
  • Bootstrap হল HTML এবং CSS নির্ভর মুদ্রণবিদ্যা, ফর্ম, বাটন, টেবিল, নেভিগেটর, মডালস, ইমেজ carousels এবং আরও অনেক কিছু, জাভা স্ক্রিপ্ট প্লাগিন সহ ডিজাইন templates তরির মাধ্যম
  • Bootstrap এর সাহায্যে তুমি যে কোন Responsive ডিজাইন ও করতে পারবে

 

Responsive Web Design কি?

Responsive Web Design হল ওয়েব সাইট তৈরি, যা সংক্রিয় ভাবে যে কোন ডিভাইসের জন্য নিজেদের সেরাটা উপস্থাপন করে, সেটা মোবাইল থেকে শুরু করে যে কোন বড় কম্পিউটারই হোক না কেন ।

 

Bootstrap ইতিহাস

Bootstrap প্রতিষ্ঠা লাভ করে Mark Otto and Jacob Thornton এর Twitter এর হাত ধরে এবং এটা সর্ব সাধারনের জন্য উন্মুক্ত করে দেয়া হয় August 2011 on GitHub ।

২০১৪ সালে এটা GitHub এর ১ নাম্বার প্রজেক্ট হিসাবে খ্যাতি লাভ করে ।

 

কেন Bootstrap ব্যবহার করবেন ?

Bootstrap এর উপকারিতাঃ

  • সহজলভ্যতাঃ HTML এবং CSS এর ব্যসিক ধারনা থাকলে যে কেউ Bootstrap ব্যবহার করা শুরু করতে পারেন
  • উল্লেখযোগ্য বৈশিস্টঃ Bootstrap’s responsive CSS মোবাইল, ট্যাব্লেট এবং ডেস্কটপের সাথে মানিয়ে নিতে পারে
  • Mobile-first approach: Bootstrap ৩ তে ব্যবহার করা হয়েছে core framework
  • ব্রাউজার উপযুক্ততা: Bootstrap বর্তমানে সকল ব্রাজারে কাজ করতে পারে

 

কোথায় Bootstrap পাওয়া যাবে ??

দুইটা উপায়ে Bootstrap ব্যবহার শুরু করা যায়

  • getbootstrap.com থেকে Bootstrap ডাউনলোড করে
  • CDN থেকেও Bootstrap করা যায়

 

ডাউনলোড Bootstrap

আপনি যদি Bootstrap ডাউনলোড করতে চান তাহলে ভিসিট করুন getbootstrap.com এবং নিয়মাবলি অনুসরণ করুন।

 

Bootstrap CDN

আপনি যদি Bootstrap ডাউনলোড করতে না চান তাহলে আপনি CDN ( Content Delivery Network ) এর সাথে যুক্ত হতে পারেন।

Bootstrap’s CSS and JavaScript এর জন্য CDN কে সহযোগিতা দেয় MaxCDN.

MaxCDN:


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.
min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

Bootstrap CDN ব্যবহারের একটি উপকারিতা

অন্যান্য সাইটে ভিজিট করার সময় অকেক ভিজিটর ইতিমধ্যেই MaxCDN থেকে Bootstrap ডাউনলোড করে ফেলেছে। এর ফলে তারা যখন আপনার সাইটে ভিজিট করে তখন cache থেকেই এটা লোড হয় যা আপনার সাইট দ্রুত লোড হওয়ার সহায়ক। অনেক CDN’s নিশ্চিত করেছে যে, যখন তারা একটা ফাইলের জন্য আবেদন করে তখন এটা সবচেয়ে কাছের সার্ভার থেকে লোড হয়, এটাও আপনার সাইট দ্রুত কাজ করার সহায়ক।

 

Bootstrap দিয়ে আপনার প্রথম ওয়েব সাইট তৈরি করুন

1. doctype হিসেবে HTML5 যোগ করুন

Bootstrap; HTML এলিমেন্ট এবং CSS প্রোপার্টি ব্যবহার করে, ফলে এর জন্য দরকার হয় HTML5 doctype

সবসময় পেজের শুরুতে lang attribute এবং সঠিক character set সাথে HTML5 doctype ব্যবহার করুন।


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

 

2. Bootstrap 3 প্রথমত মোবাইল এর জন্য।

Bootstrap 3 ডিজাইন করা হয়েছে Responsive Mobile Devices এর জন্য । Mobile-first স্টাইল কোর ফ্রেমওয়ার্ক এর অংশ।

সঠিক পরিবেশনা এবং টাচ জুমিং নিশ্চিত করার জন্য <head> এলিমেন্টের ভিতরে নিম্নোক্ত <meta> যুক্ত করুন:


<meta name="viewport" content="width=device-width, initial-scale=1">

 

width=device-width অংশ ডিভাইস এর স্ক্রিন এর প্রসস্থতাকে অনুসরণ করে পেজ এর প্রসস্থতা নির্ধারণ করে (যা ডিভাইসের উপর নির্ভর করে পরিবর্তিত হয়)।

3. Containers বা ধারক

সাইটের উপাদানগুলো মোড়ানোর জন্য Bootstrap এর জন্য একটি ধারক এলিমেন্ট এর প্রয়োজন হয়।

এর জন্য দুই ধরনের ধারক রেয়েছে:

  1. .container class টি fixed width container প্রদান করে
  2. .container-fluid class টি full width container প্রদান করে। ভিউ পয়েন্টকে সাপেক্ষে প্রদত্ত প্রসস্থতাকে চক্রাকারে ঘুরানোর জন্য।

বি.দ্রঃ Containers প্রতিস্থাপন যোগ্য নহে ।

 

দুইটি সাধারণ Bootstrap পেজ

নিচের উদাহরনটি একটি সাধারণ Bootstrap page প্রদর্শন করে (একটি fixed width ধারক পরিবেশনা):


 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

ফলাফল : একটি fixed width ধারক পরিবেশনা

 

নিচের উদাহরনটি একটি সাধারণ Bootstrap page প্রদর্শন করে (একটি পূর্ণ প্রস্থ ধারক এর সাথে):


 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

ফলাফল : একটি পূর্ণ প্রস্থ ধারক এর সাথে

 

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

প্রতাপ চন্দ্র

 

বুটস্ট্র্যাপ হচ্ছে রেসপনসিভ ও মোবাইল-বান্ধব ওয়েবসাইট তৈরীর জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের সবচেয় জনপ্রিয় ফ্রেমওয়ার্ক। এটি সম্পূর্ণ বিনামূল্যে ডাউনলোড করে ব্যবহার করা যায়। বুটস্ট্র্যাপ ব্যবহার করে খুব সহজে দৃষ্টিনন্দন ও রেসপনসিভ ওয়েবসাইট তৈরী করা যায়।

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

নিচে বুটস্ট্র্যাপের মাধ্যমে ওয়েবসাইট তৈরীর একটি উদাহরণ দেয়া হলো:


 <div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

 

ফলাফল : বুটস্ট্র্যাপ ৩ টিউটোরিয়াল

উপরের উদাহরণে ” Lorem ipsum dolor sit amet, consectetur adipisicing elit…” হচ্ছে বহুল পরিচিত ডামি টেক্সট। তিনটি আলাদা প্যারাগ্রাফ তৈরী করতে এই টেক্সটগুলো ব্যবহার করা হয়েছে। বুটস্ট্র্যাপের মাধ্যমে তৈরী করা এই পেজটির আকার পরিবর্তন করলে দেখতে পাবেন কোনো স্ক্রলবার আসছে না এবং স্বয়ংক্রিয়ভাবে নিজের আদল বদলে ফেলছে।

ওয়ার্ডপ্রেস সাইটকে দুই কলাম লেআউট থেকে তিন কলাম লেআউট-এ পরিবর্তন করুন । Change two columns layout to three columns layout for WordPress sites

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

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

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

মেইলঃ 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

জেকোয়েরি দিয়ে সিএসএস পরিচালনা(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

জেকোয়েরি মোবাইল দিয়ে পপ-আপ তৈরি করা (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

 

 

 

 

জেকোয়েরি মোবাইল ব্যবহার করে ফর্ম সাজানো(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