পিএইচপি – সিম্পল-এক্সএমএল পার্সার (PHP SimpleXML Parser in Bangla)

সিম্পল-এক্সএমএল (SimpleXML) হলো একটি পিএইচপি এক্সটেনশান যা আমাদেরকে সহজে এক্সএমএল ডাটা ম্যান্যুপিউলেট করতে এবং পেতে (get) সাহাজ্য করে।

সিম্পল-এক্সএমএল পার্সার

সিম্পল-এক্সএমএল একটি ট্রি-বেজড বা ট্রি নির্ভর পার্সার। যদি আপনি এক্সএমএল ডকুমেন্ট’টির স্ট্রাকচার বা লেআউট সম্পর্কে জেনে থাকেন তাহলে সিম্পল-এক্সএমএল একটি এলিমেন্টের নাম, এট্রিবিট এবং টেকচুয়াল ( টেক্সট) কন্টেন্টকে সহজেই পেতে সাহাজ্য করে।

সিম্পল-এক্সএমএল একটি এক্সএমএল ডকুমেন্টকে ডাটা স্ট্রাকচারে রূপান্তরিত করে যাকে নিয়ে আপনি এক গুচ্ছ এরে ( arrays ) বা অবজেক্টের মতো বারবার কাজ করতে পারেন। DOM অথবা এক্সপ্যাট পার্সারের তুলনায় সিম্পল-এক্সএমএল একটি এলিমেন্ট থেকে টেক্সট ডাটা পড়তে অল্প কিছু কোড লাইন নিয়ে কাজ করে।

ইন্সটলেশান

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

পিএইচপি সিম্পল-এক্সএমএল – স্ট্রিং থেকে পড়া

পিএইচপি simplexml_load_string() ফাংশনটি একটি স্ট্রিং থেকে এক্সএমএল ডাটা পড়তে ব্যবহৃত হয়। মনে করি, নিচেরটির মতো আমাদের একটি এক্সএমএল ভ্যারিয়েবল রয়েছে যা এক্সএমএল ডাটা ধারণ করেঃ


$myXMLData =
"<?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>";

 

নিচের উদাহরণটি আমাদের দেখায়, কিভাবে simplexml_load_string() ফাংশনটিকে ব্যবহার করে একটি স্ট্রিং থেকে এক্সএমএল ডাটা পড়তে হয়ঃ


<?php
$myXMLData =
"<?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>";

$xml=simplexml_load_string($myXMLData) or die("Error: Cannot create object");
print_r($xml);
?>

 

উপরের কোডটির আউটপুট হবেঃ


SimpleXMLElement Object ( [to] => Tove [from] => Jani [heading] => Reminder [body] => Don’t forget me this weekend! )


 

এরর হ্যান্ডল করার টিপসঃ ডকুমেন্ট লোড করার সময় libxml ফাংশানালিটিকে সবগুলো এক্সএমএল এরর ত্রুটিকে ফিরে পেতে ব্যবহার করুন এবং তারপর এররগুলো সারানোর উপর কাজ করুনঃ


<?php
libxml_use_internal_errors(true);
$myXMLData =
"<?xml version='1.0' encoding='UTF-8'?>
<document>
<user>John Doe</wronguser>
<email>john@example.com</wrongemail>
</document>";

$xml = simplexml_load_string($myXMLData);
if ($xml === false) {
    echo "Failed loading XML: ";
    foreach(libxml_get_errors() as $error) {
        echo "<br>", $error->message;
    }
} else {
    print_r($xml);
}
?>

 

উপরের কোডটির আউটপুট হবেঃ


Failed loading XML:
Opening and ending tag mismatch: user line 3 and wronguser
Opening and ending tag mismatch: email line 4 and wrongemail


 

পিএইচপি সিম্পল-এক্সএমএল – ফাইল থেকে পড়া

পিএইচপি simplexml_load_file() ফাংশনটি একটি ফাইল থেকে এক্সএমএল ডাটা পড়তে ব্যবহৃত হয়। মনে করি আমাদের “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>

 

নিচের উদাহরণটি আমাদেরকে দেখায়, কিভাবে simplexml_load_file() ফাংশনটি ব্যবহার করে ফাইল থেকে এক্সএমএল ডাটা পড়তে হয়ঃ


<?php
$xml=simplexml_load_file("note.xml") or die("Error: Cannot create object");
print_r($xml);
?>

 

উপরের কোডটির আউটপুট হবেঃ


SimpleXMLElement Object ( [to] => Tove [from] => Jani [heading] => Reminder [body] => Don’t forget me this weekend! )


 

টিপসঃ পরবর্তী অধ্যায়ে একটি এক্সএমএল ফাইল থেকে কিভাবে নোড ভ্যালুগুলো পেতে হয় তা দেখানো হবে।

বুটস্ট্র্যাপ বাটন (Bootstrap Buttons)

Button স্টাইল

Bootstrap এ সাতটি স্টাইলের button ব্যবহৃত হয়, যথা:

এই সাতটি স্টাইলের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

  • Default – .btn-default
  • Primary – .btn-primary
  • Success – .btn-success
  • Info – .btn-info
  • Warning – .btn-warning
  • Danger – .btn-danger
  • Link – .btn-link

 

নিম্নোক্ত উদাহরণে ভিন্ন ভিন্ন button এর স্টা্ইলের দেখানো হলো:


<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

 

button এর class গুলো সাধারণত <a>, </a><button><a> কিংবা <input type="text" /> এলিমেন্টে যোগ করা হয়। যেমন:


<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

 

কেন <a> এলিমেন্টের href এট্রিবিউটে # ব্যবহার করা হয়েছে?

যেহেতু যোগ করার মতো আমাদের হাতে এখনো কোন link নেই এবং লিংক না থাকার কারণে যে “404” message দেখানো হয় সেটাও দেখাতে চাই না কাজেই এখানে # ব্যবহার করা হয়েছে। তবে বাস্তব ক্ষেত্রে অবশ্যই # এর পরিবর্তে একটি লিংক যোগ করতে হবে।

 

বাটনের আকার

Bootstrap এ চারটি সাইজের Button ব্যবহৃত হয়, যথা:

Button এর এই চারটি সাইজের প্রত্যেকটির জন্য ভিন্ন ভিন্ন class ব্যবহৃত হয়, যথা:

  • Large – .btn-lg
  • Medium – .btn-md
  • Small- .btn-sm
  • XSmall – .btn-xs

নিম্নোক্ত উদাহরণে Button এর ভিন্ন ভিন্ন চারটি সাইজ দেখানো হলো:


<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

 

Block Level Buttons

parent element এর পুরো width জুড়ে Button তৈরি করাকে Block Level Buttons বলা হয়।

Block Level Buttons তৈরি করতে .btn-block class টি যোগ করা হয়। যেমন:


<button type="button" class="btn btn-primary btn-block">Button 1</button>

 

Active/Disabled Buttons

কোনো Button এর status এমনভাবে set করা যেতে পারে যেন তা active (যা active রয়েছে এমন) বা disabled (যা Click করা যায় না এমন) হতে পারে।

active Button তৈরি করার জন্য .active class এবং disabled Button তৈরি করার জন্য .disabled class যোগ করতে হয়। যেমন:


<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

 

বুটস্ট্র্যাপ জাম্বট্রন এবং পেজ হেডার (Bootstrap Jumbotron and Page Header)

বুটস্ট্র্যাপ জাম্বট্রন এবং পেজ হেডার

জাম্বট্রন তৈরির পদ্ধতি

কোন স্পেশাল কন্টেন্ট বা তথ্যের প্রতি ইউজারের মনোযোগ আকর্ষণের জন্য ওয়েবপেজে বড় স্পেস বা বক্সকে নির্দেশ করাই হচ্ছে জাম্বট্রন।

জাম্বট্রনের ব্যাকগ্রাউন্ড কালার সাধারনত গ্রে হয়ে থাকে এবং এর কর্নারগুলো একটু রাউন্ড আকৃতির হয়।

জাম্বট্রনের ভেতরে যেই টেক্সটগুলো থাকে সেগুলো সেগুলোর ফন্টসাইজও স্বয়ংক্রিয়ভাবে বড় হয়ে থাকে।

টিপসঃ জাম্বট্রনের ভেতরে আপনি ভ্যালিড HTML এর ইলিমেন্ট এবং বুটস্ট্র্যাপের অন্যান্য ইলিমেন্ট ও ক্লাস ব্যবহার করতে পারবেন।

জাম্বট্রন তৈরির জন্য .jumbotron ক্লাসসহ <div> ইলিমেন্ট ব্যবহার করতে হয়।

 

কন্টেইনারের মধ্যে জাম্বট্রন তৈরির পদ্ধতি

আপনি যদি এরকম চান যেন জাম্বট্রন স্ক্রিনের একটি নির্দিষ্ট সীমার বাইরে বিস্তৃত না হয়, তাহলে জাম্বট্রনকে আপনার নির্দিষ্ট করা <div class="container"> এর ভেতরে সেট করতে হবেঃ


<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
    responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

ফলাফল : কন্টেইনারের মধ্যে জাম্বট্রন তৈরি

 

কন্টেইনারের বাহিরে জাম্বট্রন তৈরির পদ্ধতি

জাম্বট্রনকে ডিফল্টভাবে স্ক্রিনে শো করাতে চাইলে <div class="container"> এর বাইরে জাম্বট্রনকে সেট করতে হবেঃ


<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for 
  developing responsive,
  mobile-first projects on the web.</p>
</div>
<div class="container">
  <p>This is some text.</p>
  <p>This is another text.</p>
</div>

ফলাফল : কন্টেইনারের বাহিরে জাম্বট্রন তৈরি

 

পেজের হেডার তৈরির পদ্ধতি

পেজ হেডার অনেকটা সেকশন ডিভাইডারের মতো .page-header ক্লাস হেডিং লাইনের নিচে একটি লম্বা দাগের মতো অনুভূমিক লাইন তৈরি করে একইসাথে কিছু ইলিমেন্টের চারদিকে কিছুটা স্পেস দখল করে।

 

পেজ হেডারের উদাহরণঃ

পেজ হেডার তৈরির জন্য <div> ইলিমেন্টের ক্লাস .page-header হতে হবেঃ


<div class="page-header">
  <h1>Example Page Header</h1>
</div>

ফলাফল : পেজ হেডার

 

বুটস্ট্র্যাপ ইমেজেস (Bootstrap Images)

বুটস্ট্র্যাপ ইমেজ আকৃতি

Bootstrap এর সাহায্যে সহজেই Image কে তিন প্রকার Shape এ দেখানো যায়, যথা:

  1. গোলাকৃতির কোণ
  2. বৃত্ত
  3. থাম্বনেল

 

গোলাকৃতির কোণ

Image এর চারপাশে Rounded Corner তৈরি করার জন্য .img-rounded class টিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Corner সাপোর্ট করে না।

উদাহরণ:


 <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" 
height="236">

 

বৃত্ত

Image কে বৃত্তাকার বা Circle Shape এ দেখানোর জন্য .img-circle classটিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Cornerসাপোর্ট করে না।

উদাহরণ:


 <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" 
 height="236">

 

থাম্বনেল

Thumbnail Shape এ দেখানোর জন্য .img-thumbnail classটিকে যোগ করা হয়।
উদাহরণ:


 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" 
 height="236">

 

প্রতিক্রিয়াশীল ইমেজ

সাধারণত Image এবং screen এর size ভিন্ন ভিন্ন হতে পারে। আবার, রেসপন্সিভ ইমেজ (Responsive Images) screen এর size অনুযায়ী image কে resize করে parent element এর সাথে সামঞ্জস্য রেখে screen এ ডিসপ্লে করে। রেসপন্সিভ ইমেজ তৈরি করার জন্য .img-responsive class টিতে <img> ট্যাগে যোগ করা হয়। উল্লেখ্য যে, .img-responsive class এর ক্ষেত্রে max-width: 100%; এবং height: auto; প্রযোজ্য হয়।

উদাহরণ:


<img class="img-responsive" src="img_chania.jpg" alt="Chania">

ফলাফল : প্রতিক্রিয়াশীল ইমেজ

 

Image Gallery বা গ্যালারী তৈরি

Bootstrap’s grid system এ .thumbnail class যোগ করেও ইমেজ গ্যালারী তৈরি করা যায়।
উদাহরণ:


 <div class="row">
  <div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of 
      France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" 
      style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.
      </p>
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>
</div>

ফলাফল : ইমেজ গ্যালারী

 

প্রতিক্রিয়াশীল Embed

যে কোনো রকম videos বা slideshows রেসপন্সিভ হিসাবে যোগ করা যেতে পারে। এক্ষেত্রে সরাসরি <iframe>, <embed>, <video>, এবং <object> এলিমেন্ট এ class যোগ করা যায়।

নিম্নোক্ত উদাহরণে <iframe> ট্যাগে .embed-responsive-item class টি যোগ করে video টিকে রেসপন্সিভ আকারে উপস্থাপন করা হয়েছে। এক্ষেত্রে ভিডিওটির containing <div> টি হলো ভিডিওটির parent element, কাজেরই <div> এর মাধ্যমে video টির ratio নির্ধারিত হবে।

উদাহরণ :


 <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ফলাফল : প্রতিক্রিয়াশীল Embed

 

aspect ratio বলতে কি বোঝায়?

কোনো image এর width ও height এর মধ্যকার আনুপাতিক হার বা সম্পর্কই হচ্ছে aspect ratio. সাধারণত দুই প্রকারের video aspect ratios ব্যবহৃত হয় যথা: ৪:৩ (বিংশ শতাব্দীর universal ভিডিও ফরমেট) এবং ১৬:৯ (HD televisio n ও European digital television এর universal ভিডিও ফরমেট)। সম্পূর্ণ Bootstrap Image রেফারেন্স: image এর সকল class এর পরিপূর্ণ রেফারেন্স পেতে Bootstrap Image Reference অধ্যায়টি দেখুন।

 

বুটস্ট্র্যাপ টেবিল (Bootstrap Tables)

Bootstrap বেসিক টেবিল

সাধারণত Bootstrap বেসিক টেবিলে light padding বা সামান্য প্যাডিং ও horizontal বা আনুভূমিক divider থাকে। এক্ষেত্রে divider বলতে Row এর bottom-border কে বোঝানো হয়েছে।
.table class ব্যবহার করে টেবিলের basic styling করা হয়। যেমন:

কোড :


<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal 
dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

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


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

 

Striped Rows

.table-striped class ব্যবহার করে টেবিলে zebra-stripes যোগ করা হয়। যেমন:

কোড:


<div class="container">     
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Bordered Table

.table-bordered class ব্যবহার করে টেবিলের ও সেলের চারদিকে বর্ডার যোগ করা হয়। যেমন:

কোড : 


<div class="container">     
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Hover Rows

টেবিলের row বা সারিতে hover ইফেক্ট দেবার জন্য .table-hover class টি যোগ করা হয়। যেমন:

কোড :


<div class="container">         
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Condensed Table

.table-condensed class টি ব্যবহার করলে টেবিলের সেল সাধারণ প্যাডিং অর্ধেক পরিমাণে কমে যায়। যেমন:

কোড :


<div class="container">         
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Contextual Classes

সাধারণত কোনো টেবিলের rows (<tr>) কিংবা cells (<td>) এ color দেবার জন্য Contextual Classes ব্যবহার করা হয়। যেমন:

কোড :


<div class="container">        
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

 

Contextual Class গুলো সাধারণত নির্দিষ্ট কিছু color কে নির্দেশ করে। যেসকল Contextual Class ব্যবহৃত হয় সেগুলো হলো:

 

.active কোনো টেবিলের row বা টেবিলের cell এর জন্য hover color এর জন্য ব্যবহৃত হয়।
.success সফল (successful ) বা ইতিবাচক (positive) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
.info নিরপেক্ষ বা তথ্যপূর্ণ (neutral informative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
.warning মনোযোগ আকর্ষণ করার জন্য বা সতর্কতামূলক (warning) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।
.danger বিপদজনক বা নেতিবাচক (dangerous or potentially negative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।

 

পিএইচপি ৫ ফর্ম হ্যান্ডলিং (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…” হচ্ছে বহুল পরিচিত ডামি টেক্সট। তিনটি আলাদা প্যারাগ্রাফ তৈরী করতে এই টেক্সটগুলো ব্যবহার করা হয়েছে। বুটস্ট্র্যাপের মাধ্যমে তৈরী করা এই পেজটির আকার পরিবর্তন করলে দেখতে পাবেন কোনো স্ক্রলবার আসছে না এবং স্বয়ংক্রিয়ভাবে নিজের আদল বদলে ফেলছে।