Feb 16

ASP.NET MVC টিউটোরিয়াল

ASP.NET MVC টিউটোরিয়াল
লিখেছেন ইন্দ্র ভূষণ শুভ

Minor Edit by Sayed Ahmed

ASP.NET হলো HTML, CSS, JavaScript এবং server scripting দিয়ে ওয়েব পেইজ এবং ওয়েব সাইট তৈরির একটি  কাঠামো (Framework)।

ASP.NET তিনটি ভিন্ন ভিন্ন মডেল সমর্থন করেঃ
ওয়েব পেইজ, এমভিসি (Model View Controller), এবং ওয়েব ফর্ম।
এই টিউটরিয়ালটি এমভিসি (Model View Controller) নিয়ে

MVC প্রোগ্রামিং মডেল
ASP.NET প্রোগ্রামিং মডেলের মধ্যে MVC একটি।
MVC হলো MVC (Model View Controller) ডিজাইন ব্যবহার করে ওয়েব অ্যাপ্লিকেশন তৈরির একটি কাঠামো/Framework।

 

মডেলটি/Model একটি অ্যাপ্লিকেশন এর কোর উপস্থাপন করে ( উদাহরণস্বরুপ একটি ডাটাবেস থেকে রেকর্ডের তালিকা নিয়ে আসা । ডাটাবেজ এ তথ্য জমা করা এবং

ভিউ/view: তথ্য প্রদর্শন করে (মডেল থেকে ডাটা নিয়ে)
কন্ট্রোলার/controller: ব্যবহার কারি/user এর ইনপুটকে/interaction নিয়ন্ত্রণ করে

 

এছাড়াও MVC মডেল এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্টের উপর পূর্ণ নিয়ন্ত্রণ রক্ষা করে।

MVC মডেল ৩ টি যুক্তি স্তরে ওয়েব অ্যাপ্লিকেশনকে
সংজ্ঞায়িত করেঃ
The business layer (Model logic)
The display layer (View logic)
The input control (Controller logic)

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

নিয়ন্ত্রক/Controller হলো অ্যাপ্লিকেশনের একটি অংশ যা ব্যবহারকারীদের মিথষ্ক্রিয়া/Interaction নিয়ন্ত্রণ করে।
নিয়ন্ত্রক সাধারণত ভিউ থেকে তথ্য পড়ে, ব্যবহারকারীর ইনপুট নিয়ন্ত্রণ করে, মডেলে ইনপুটের তথ্য প্রেরণ করে।
MVC বিভক্তি আপনাকে জটিল অ্যাপ্লিকেশন পরিচালনা করতে সাহায্য করবে, কারণ আপনি একই সময়ে এক এক রকম দৃষ্টিভঙ্গিতে নজড় দিতে পারবেন। এছাড়াও এটি একটি অ্যাপ্লিকেশনকে সহজেই পরীক্ষা করতে পারে।
MVC বিভক্তি গ্রুপ উন্নয়নকে সহজসাধ্য কওরে। ভিন্ন ভিন্ন ব্যবহারকারী একই সাথে the view, the controller logic, এবং the business logic কে কাজ করতে পারে।

ওয়েব ফর্ম Application বনাম MVC Application
MVC প্রোগ্রামিং মডেল গতানুগতিক ASP.NET (ওয়েব ফর্ম) থেকে একটু আলাদা। এটিতে  ASP.NET এর বৈশিষ্ট্য বিদ্যমান যেমন   মাস্টার পেজ, নিরাপত্তা । কিন্তু এটি  লাইটওয়েট, এবং সহজে testable.

ভিসুয়াল স্টুডিও এক্সপ্রেস ২০১২/২০১০
ভিসুয়াল স্টুডিও এক্সপ্রেস মাইক্রোসফট ভিসুয়াল স্টুডিও একটি মুক্ত সংস্করণ।
ভিসুয়াল স্টুডিও এক্সপ্রেস MVC ( এবং ওয়েব ফর্ম ) এর জন্য উন্নয়নের দক্ষ হাতিয়ার।

ভিসুয়াল স্টুডিও এক্সপ্রেসে রয়েছেঃ
MVC এবং ওয়েব ফর্ম
ওয়েব নিয়ন্ত্রণের ড্রাগ- এবং- ড্রপ এবং ওয়েব উপাদান
ওয়েব সার্ভারের ভাষা (Razor using VB or C# )
ওয়েব সার্ভার (IIS Express)
ডাটাবেস সার্ভার (SQL Server Compact)
পরিপূর্ণ ওয়েব উন্নয়ন কাঠামো (ASP.NET)

আপনি যদি ভিসুয়াল স্টুডিও এক্সপ্রেস ইন্সটল করেন, আপনি এই টিউটরিয়াল থেকে আরও লাভ পেতে পারেন।
আপনি যদি ভিসুয়াল স্টুডিও এক্সপ্রেস ইন্সটল করতে চান, এই লিঙ্কগুলোতে ক্লিক করেনঃ
Visual Web Developer 2012 ( আপনার যদি Windows 7 বা Windows 8 থেকে থাকে )
Visual Web Developer 2010 (Windows Vista অথবা XP জন্য )

ASP.NET MVC তথ্যসূত্র
এই টিউটরিয়ালটি শেষে আপনি ASP.NET MVC সম্পর্কে একটি পরিপুর্ণ তথ্য পাবেন।

 

Feb 16

এস ই ও এর জন্য বিশেষজ্ঞ নিয়োগ । SEO – Hiring an Expert

নয়ন চন্দ্র সরকার

 

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

যে কাজগুলোর জন্য এস ই ও বিশেষজ্ঞ নিয়োগ করা যেতে পারে

  1. কোড এর বৈধতা নিশ্চিতকরণ এবং এর সার্বিক গুনাগুন অটুট রাখতে, এবং কোড যেন সার্চ ইঞ্জিন-সুলভ ইত্যাদি বিষয়ের জন্য বিশেষজ্ঞ নিয়োগের প্রয়োজন হয়।
  2. এস ই ওর অন পেজ অপটিমাইজেসন যেমন, পেজ টাইটেল, কল টু অ্যাকশান কপি রাইটিং ইত্যাদি কাজের জন্য।
  3. প্রাসঙ্গিক সাইটগুলোর সাথে ভাল মানের লিঙ্ক বিল্ডিং নিশ্চিতকরণ।
  4. ওয়েব সাইট এর বিষয়বস্তুর উপর ভিজিটরের আগমন নির্ভর করে। আর একজন এস ই ও বিশেষজ্ঞ এই বিষয়টি নিশ্চিত করেন।
  5. অফ পেজ অপটিমাইজেসন এর বিভিন্ন কাজ যেমন, আর্টিকেল সাবমিশন, ব্লগের ব্যবহার, লিঙ্ক বিল্ডিং, ডিরেক্টরি সাবমিশন ইত্যাদি কাজের জন্য একজন এস ই ও বিশেষজ্ঞ প্রয়োজন।

পরিশেষে বলা যায় যে, আপনি যদি নিজেই এর কাজগুলো করতে পারেন তাহলে বিশেষজ্ঞ নিয়োগের কোন প্রয়োজন নেই।

কিভাবে এস ই ও বিশেষজ্ঞ বাছাই করবেন

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

  1. আপনি আপনার বন্ধু বা পরিচিত কারোর মাধ্যমে খোঁজ করতে পারেন।
  2. এস ই ও সম্পর্কিত অনেক ফোরাম আছে যেগুলোতে আপনি এ সম্পর্কে ফিডব্যাক পেতে পারেন।
  3. উনি সাম্প্রতিকালে যেসব ওয়েব সাইট এ কাজ করেছেন সেগুলোর খোঁজ-খবর রাখতে পারে।
  4. এস ই ও কোম্পানি গুলোকে অটোমেটিক কাজ করা হতে বিরত রাখবেন।
  5. সস্তা এস ই ও বিশেষজ্ঞ নিয়োগ করবেন না। তবে ভাল দক্ষতা থাকলে ভেবে দেখতে পারেন।
  6. আর্টিকেল বা ওয়েবসাইট এর বিষয়বস্তুর উপর ভিত্তি করে কোন এস ই ও কোম্পানি কে নিয়োগ দেবেন না।
  7. ওদের ওয়েব সাইট এ প্রসংশা পত্রের প্রাচুর্যটা দেখে কখনই মুগ্ধ হবেন না।

এই বিষয় গুলো মাথাই রাখলেই আপনি একজন ভাল মানের এস ই ও অভিজ্ঞ লোক বা প্রতিষ্ঠানের সন্ধান পেতে পারেন।

Feb 16

পিএইচপি – মাইএসকিউএল থেকে ডাটা সিলেকশন নির্দিষ্ট করা (PHP Limit Data Selections From MySQL in Bangla)

MYSQL এর LIMIT প্যারামিটার ব্যবহার করে নির্দিষ্ট সংখ্যক রো পাওয়া যায়।

অনেকগুলো পেজ এ ফলাফল ডিসপ্লে করতে অথবা pagination এর ক্ষেত্রে LIMIT প্যারামিটার টা খুব সহজ।

অনেক বড় টেবিল এর জন্য এটা খুব উপকারী।

মনে করি আমরা একটি order নামক টেবিল থেকে প্রথম ৩০ টা ডাটা দেখতে চাই তার জন্য SQL query টি হবে

$sql = "SELECT * FROM Orders LIMIT 30";

যখন এটি রান করা হবে তখন প্রথম ৩০ টি ডাটা দেখা যাবে। যদি আমরা ১৬-২৫ এই রেকর্ড দেখতে চাই

$sql = "SELECT * FROM Orders LIMIT 10 OFFSET 15";

উপড়ের query টি OFFSET 15 সেট করার ফলে আমরা ১৫ এর পরের থেকে ১০ টি ডাটা দেখতে পারব। আমরা এর পরিবর্তে আরও একটি query চালাতে পারি যা এক ফলাফল পাওয়া যাবে

$sql = "SELECT * FROM Orders LIMIT 15, 10";

লক্ষ্য করার বিষয় নাম্বারগুলো এখন উলটো যখন কমা ব্যবহার করা হয়।

Feb 15

পিএইচপি – এক্সএমএল পার্সার (PHP XML Parsers)

এক্সএমএল কি?

এক্সএমএল ল্যাঙ্গুয়েজ হলো ডাটা বা তথ্যকে স্ট্রাকচার করার একটি পদ্ধতি যা ওয়েবসাইটগুলোতে তথ্য শেয়ার করার জন্য ব্যবহৃত হয়ে থাকে। আরএসএস ফিড এবং পডকাস্টের মতো অনেক ধরণের ওয়েব টেকনোলজি এক্সএমএল দিয়ে লেখা হয়। এক্সএমএল তৈরি করা সহজ। এটি অনেকটাই এইচটিএমএল এর মতো, পার্থক্য হলো এখানে আপনি নিজেই ট্যাগ তৈরি করেন; এইচটিএমএল এর ট্যাগগুলো ডব্লিওথ্রিসি’র নীতিমালা অনুসারে তৈরি হয়েছে। এক্সএমএল সম্পর্কে আরও জানতে আপনি আমাদের এক্সএমএল টিউটরিয়ালগুলো পড়ে দেখতে পারেন।

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

একটি এক্সএমএল ডকুমেন্টকে পড়তে, আপডেট করতে, তৈরি এবং ম্যান্যুপিউলেট করতে একটি এক্সএমএল পার্সারের দরকার পড়ে। পিএইচপি’তে প্রধানত দুই ধরণের এক্সএমএল পার্সার রয়েছেঃ

১) ট্রি-বেজড পার্সার
২) ইভেন্ট-বেজড পার্সার

ট্রি-বেজড পার্সার

ট্রি-বেজড বা ট্রি নির্ভর পার্সার পুরো ডকুমেন্টকে মেমোরিতে ধারণ করে এবং এক্সএমএল ডকুমেন্টটিকে একটি ট্রি স্ট্রাকচারে রয়পান্তরিত করে। এটি পুরো ডকুমেন্টটিকে বিশ্লেষণ করে এবং ট্রি এলিমেন্টে (DOM) প্রবেশ (access) করতে দেয়।

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

ট্রি-বেজড পার্সারের উদাহরণঃ

  • SimpleXML
  • DOM

ইভেন্ট-বেজড পার্সার

ইভেন্ট-বেজড বা ইভেন্ট নির্ভর পার্সার পুরো ডকুমেন্টকে মেমোরিতে ধারণ করেনা, তার পরিবর্তে, সেগুলো একবারে শুধু একটি নোডকে পড়ে এবং আপনাকে রিয়েল টাইমে ( যে সময়টিতে আপনি ডকুমেন্টটি নিয়ে কাজ করছেন) ডকুমেন্টের ঐ নোডটি’র সাথে ইন্টারেক্ট করতে দেয়। একবার আপনি পরবর্তী নোডে চলে গেলে পূর্বের নোডটি ফেলে দেয়া হয় মেমোরি থেকে।

বড় এক্সএমএল ডকুমেন্টের জন্য এই ধরণের পার্সার খুবই কার্যকর। এটি খুব দ্রুততর গতিতে পার্স করে এবং কম মেমোরি দখল করে।

ইভেন্ট বেজড পার্সারের উদাহরণঃ

  • XMLReader
  • XML Expat Parser

Feb 14

পিএইচপি ৫ সরটিং অ্যারে (PHP 5 Sorting Arrays)

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

Department of CSE, University of Chittagong

 

একটি অ্যারের ইলিমেন্টগূলো বর্ণানুক্রমিক (alphabetical) অথবা সংখ্যাসূচক (numerical) ক্রম অনুসারে সাজানো যায়। এই সাজানোটা ascending (ঊর্ধ্বগামী) অথবা descending (অধোগামী) উভয় প্রকারের হতে পারে।

পিএইচপি তে অ্যারে সাজানোর বা sort করার জন্য যে সব ফাংশন ব্যাবহার করা হয় ঐগুলো নিচে দেওয়া হলঃ

 

পিএইচপি – অ্যারে ফাংশন সর্ট করা

  • sort() – এই ফাংশনটি একটি অ্যারেকে ascending order (ছোট থেকে বড় ক্রম) এ sort করে।
  • rsort() – এই ফাংশনটি একটি অ্যারেকে descending order (বড় থেকে ছোট ক্রম) এ sort করে।
  • asort() – এটি অ্যাসোসিয়েটিভ অ্যারেকে মান অনুসারে ascending order এ sort করে বা সাজায়।
  • ksort() – এটি অ্যাসোসিয়েটিভ অ্যারেকে key অনুসারে ascending order এ sort করে বা সাজায়।
  • arsort() – এটি অ্যাসোসিয়েটিভ অ্যারেকে মান অনুসারে descending order এ sort করে বা সাজায়।
  • krsort() – এটি অ্যাসোসিয়েটিভ অ্যারেকে key অনুসারে descending order এ sort করে বা সাজায়।

 

অ্যারেকে ছোট থেকে বড় ক্রমে সাজানো – sort()

নিচের উদাহরণটি $cars নামের একটি array কে ছোট থেকে বড়তে বর্ণানুক্রমিক (alphabetical) ক্রম অনুসারে সাজায়।

<?php
 $cars = array("Volvo", "BMW", "Toyota");
 sort($cars);
 ?>

 

নিচের উদাহরণটি $numbers নামের একটি array কে ছোট থেকে বড়তে সংখ্যাসূচক (numerical) ক্রম অনুসারে সাজায়।

< ?php
 $numbers = array(4, 6, 2, 22, 11);
 sort($numbers);
 ?>

 

অ্যারেকে বড় থেকে ছোট ক্রমে সাজানো – rsort()

নিচের উদাহরণটি $cars নামের একটি array কে বড় থেকে ছোটতে বর্ণানুক্রমিক (alphabetical) ক্রম অনুসারে সাজায়।

<?php
 $cars = array("Volvo", "BMW", "Toyota");
 rsort($cars);
 ?>

 

নিচের উদাহরণটি $numbers নামের একটি array কে বড় থেকে ছোটতে সংখ্যাসূচক (numerical) ক্রম অনুসারে সাজায়।

< ?php
 $numbers = array(4, 6, 2, 22, 11);
 rsort($numbers);
 ?>

 

অ্যারেকে ছোট থেকে বড় ক্রমে সাজানো (মান অনুসারে) – asort()

নিচের উদাহরণটি $age নামের একটি associative array কে ছোট থেকে বড়তে মান অনুসারে সাজায়।

< ?php
 $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
 asort($age);
 ?>

 

অ্যারেকে ছোট থেকে বড় ক্রমে সাজানো (key অনুসারে) – ksort()

নিচের উদাহরণটি $age নামের একটি associative array কে ছোট থেকে বড়তে key অনুসারে সাজায়।

< ?php
 $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
 ksort($age);
 ?>

 

অ্যারেকে বড় থেকে ছোট ক্রমে সাজানো (মান অনুসারে) – arsort()

নিচের উদাহরণটি $age নামের একটি associative array কে বড় থেকে ছোটতে মান অনুসারে সাজায়।

< ?php
 $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
 arsort($age);
 ?>

 

অ্যারেকে বড় থেকে ছোট ক্রমে সাজানো (key অনুসারে) – krsort()

নিচের উদাহরণটি $age নামের একটি associative array কে বড় থেকে ছোটতে key অনুসারে সাজায়।

< ?php
 $age = array("Peter"=>"35", "Ben"=>"37", "Joe"=>"43");
 krsort($age);
 ?>

 

Feb 14

Bootstrap Case: নেভিগেশান বার যোগ করা (Adding a Navigation Bar)

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

 

নেভিগেশান বার একটি নেভিগেশান বার হলো একটি নেভিগেশান হেডার যা পেজের উপরের দিকে যোগ করা হয়। বুটস্ট্র্যাপের মাধ্যমে একটি নেভিগেশান বারকে স্ক্রিনের সাইজ অনুযায়ী এক্সট্যান্ড অথবা কলাপ্স করা যায়। অর্থাৎ ডিভাইসের ধরণ অনুসারে সুবিধামতো নেভিগেশান বারকে সেটাপ করা যায়। <nav class=”navbar navbar-default”> এর সাহাজ্যে একটি সাধারণ নেভিগেশান বার তৈরি করা যায়। নিচের উদাহরণে কিভাবে পেজের টপে নেভিগেশান বার যোগ করতে হয় তা দেখানো হয়েছেঃ

<body>
 <nav class="navbar navbar-default">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li> 
         <li><a href="#">Page 3</a></li> 
       </ul>
     </div>
   </div>
 </nav>
 <body>

 

নোটঃ এই টিউটোরিয়ালটির সবগুলো উদাহরণই একটি নেভিগেশান বার তৈরি করবে যা ছোট স্ক্রিনে অনেক বেশি জায়গা দখল করে (যাহোক, বড় স্ক্রিনে নেভিগেশান বারটি শুধু এক লাইনের হিসেবে দেখাবে – কারণ বুটস্ট্র্যাপ রেসপন্সিভ হয়ে থাকে)। ছোট স্ক্রিনের এই সমস্যাটি এই চ্যাপ্টারের সর্বশেষ উদাহরণে সমধান করা হবে। ইনভার্টেড নেভিগেশান বার আপনি যদি ডিফল্ট নেভিগেশান বারের স্টাইল পছন্দ না করেন, বুটস্ট্র্যাপে এজন্য একটি অল্টারনেটিভ রয়েছে। শুধু .navbar-inverse এর মধ্যে .navbar-default ক্লাসটি পরিবর্তন করে দিনঃ

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

ফিক্সড নেভিগেশান বার নেভিগেশান বারটি পেজের উপরে বা নিচে ফিক্সড হতে পারে। ফিক্সড নেভিগেশান বার পেজ স্ক্রল করা হলেও একটি জায়গায় ফিক্সড বা স্থির থাকে। .navbar-fixed-top ক্লাসটি নেভিগেশান বারকে পেজের উপরে ফিক্সড করে রাখেঃ

<nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

.navbar-fixed-bottom ক্লাসটি নেভিগেশান বারকে পেজের নিচের দিকে ফিক্সড করে দেয়ঃ

<nav class="navbar navbar-inverse navbar-fixed-bottom">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>

 

ড্রপডাউনসহ নেভিগেশান বার নেভিগেশান বার ড্রপডাউন মেন্যুকেও ধারণ করতে পারে। নিচের উদাহরণটি “Page 1” বাটনের জন্য একটি ড্রপডাউন মেন্যু যোগ করেঃ

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
           <span class="caret"></span></a>
           <ul class="dropdown-menu">
             <li><a href="#">Page 1-1</a></li>
             <li><a href="#">Page 1-2</a></li>
             <li><a href="#">Page 1-3</a></li>
           </ul>
         </li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

রাইট-অ্যালাইন্ড নেভিগেশান বার .navbar-right ক্লাসটি নেভিগেশান বার বাটনগুলোকে পেজের ডানদিকে অ্যালাইন করতে ব্যবহৃত হয়। নিচের উদাহরণে আমরা নেভিগেশান বারের ডান দিকে একটি “Sign Up” এবং একটি “Login” বাটন যোগ করি। প্রত্যেকটি নতুন বাটনে আমরা একটি গ্লাইফিকোনও যোগ করিঃ

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div>
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li>
         <li><a href="#">Page 3</a></li>
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
       </ul>
     </div>
   </div>
 </nav>

 

নেভিগেশান বারকে কলাপস করা নেভিগেশান বার একটি ছোট স্ক্রিনে( যেমন মোবাইল) অনেক বেশি জায়গা নিয়ে নেয়। আমদের উচিত নেভিগেশান বারটিকে কলাপস বা হাইড করে রাখা এবং যখন দরকার তখন দেখানো। নিচের উদাহরণে নেভিগেশান বারটি উপরের ডান দিকের একটি বাটন দ্বারা প্রতিস্থাপিত হয়েছে। যখন বাটনটিতে ক্লিক করা হয় তখনই নেভিগেশান বারটি দেখা যায়ঃ

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" 
       data-target="#myNavbar">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span> 
       </button>
       <a class="navbar-brand" href="#">WebSiteName</a>
     </div>
     <div class="collapse navbar-collapse" id="myNavbar">
       <ul class="nav navbar-nav">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Page 1</a></li>
         <li><a href="#">Page 2</a></li> 
         <li><a href="#">Page 3</a></li> 
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
       </ul>
     </div>
   </div>
 </nav>

Feb 14

Bootstrap Case: একটি মেনু যোগ করার পদ্ধতি (Adding a Menu)

মেনু

অধিকাংশ ওয়েব পেইজ এর ই কিছু Menu রয়েছে।

Html এ, একটি মেনু প্রায়ই একটি unordered তালিকা <ul> এর মধ্যে সংজ্ঞায়িত করা হয়।

উদাহরনণঃ

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Menu 1</a></li>
   <li><a href="#">Menu 2</a></li>
   <li><a href="#">Menu 3</a></li>
 </ul>

 

Bootstrap উপরের Menu প্রদর্শনের জন্য দুইটি উপায় অবলম্বন করে, যেমনঃ tabs and pills.

Tabs

Tabs নির্মিত হয় <ul class=”nav nav-tabs”> নিয়ে।

বিঃদ্রঃ এ ছাড়াও বর্তমান পেইজেও <li class=”active”> চিহ্নিত ।

নীচের উদাহরণ গুলো navigation tabs তৈরি করেঃ

উদাহরনঃ

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

Tabs With Dropdown

ট্যাব গুলোতে dropdown Menu রাখা যায়।

নিম্নলিখিত উদাহরণে “মেনু 1” এ একটি ড্রপডাউন মেনু যোগ করা হয়েছে।
উদাহরনঃ

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="#">Submenu 1-1</a></li>
    <li><a href="#">Submenu 1-2</a></li>
    <li><a href="#">Submenu 1-3</a></li>
    </ul>
    </li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

Pills

Pills নির্মিত হয় <ul class=”nav nav-pills”> দ্বারা । এ ছাড়াও <li class=”active”> বর্তমান page এ চিহ্নিত ।
উদাহরনঃ

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
 </ul>

Vertical Pills

Pills লম্বালম্বি ভাবেও প্রদর্শিত হতে পারে। এই ক্ষেত্রে শুধু “.nav-stacked” class টি ব্যবহার করতে হবে।

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

উদাহরনঃ

 <div class="col-md-3">
     <ul class="nav nav-pills nav-stacked">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Menu 1</a></li>
         <li><a href="#">Menu 2</a></li>
         <li><a href="#">Menu 3</a></li>
     </ul>
 </div>

 

 

Pills With Dropdown Menu

Pills এর মধ্যেও Dropdown রাখা যায়।

নিম্নলিখিত উদাহরণে “মেনু 1” এ একটি ড্রপডাউন মেনু যোগ করা হয়েছে।

উদাহরনঃ

 <ul class="nav nav-pills nav-stacked">

 <li class="active"><a href="#">Home</a></li>
     <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
     <span class="caret"></span></a>
   <ul class="dropdown-menu">
     <li><a href="#">Submenu 1-1</a></li>
     <li><a href="#">Submenu 1-2</a></li>
     <li><a href="#">Submenu 1-3</a></li>
   </ul>
 </li>

     <li><a href="#">Menu 2</a></li>
     <li><a href="#">Menu 3</a></li>

 </ul>

 

Feb 14

Bootstrap Case: একাধিক কলাম এর বিন্যাস (Multicolumn Layout)

একাধিক কলাম এর বিন্যাস

Bootstrap ব্যবহার করে সহজেই multicolumn layout তৈরি করা যায় ।

Bootstrap একটি প্রতিক্রিয়াশীল এবং mobile-first 12-column grid system দিয়ে থাকে।

বিভিন্ন স্ক্রীন সাইজে কলাম গুলো নিজেদের মধ্যে পুনরায় সজ্জিত হয়।

Grid এর লিছু নিয়মাবলিঃ

  • একটি ধারক দিয়ে শুরু করুন ।
  • <div class=”row”> দ্বারা এর মধ্যে সারি তৈরি করুন।
  • দ্রুত Grid column তৈরির জন্য কিছু পূর্বনির্ধারিত ক্লাস যেমন .col-md-4, .col-md-6 ইত্যাদি ব্যবহার করুন।
  • আপনার ইচ্ছা অনুযায়ী যেকোনো ১২ টি কলাম জুড়ে Grid কলাম তৈরি হয়।যেমনঃ তিনটি সমান কলামে তিনটি .col-MD-4 কলাম ব্যবহার করতে হবে
  • .col – *- * ক্লাস এর মধ্যের সংখ্যা গুলো সবসময় প্রতিটি সারির 12 পর্যন্ত যোগ করা উচিত।
  • বিষয়বস্তু Grid কলাম এর ভিতরে স্থাপন করা হয়।

উদাহরনঃ

 <div class="row">

      <div class="col-md-3">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod              
           tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <div class="col-md-3">
           <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
           ut aliquip ex ea commodo consequat.</p>
      </div>

      <div class="col-md-3">
           <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
           accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>

      <div class="col-md-3">
           <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae 
           vitae dicta sunt explicabo.</p>
      </div>

 </div>

ভিন্ন প্রশস্ততা বিশিষ্ট কলাম

এখন আমরা ভিন্ন ভিন্ন প্রশস্ততা বিশিষ্ট কলাম তৈরি করতে চাই।

নিম্নলিখিত উদাহরণটি একটি তিন কলাম বিশিষ্ট কাঠামো তৈরি করে যেখানে মাঝখানের কলামটি প্রথম ও দ্বিতীয় কলাম থেকে বেশি প্রশস্থ।

উদাহরনঃ

<div class="row">

     <div class="col-md-3">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
          tempor incididunt ut labore et dolore magna aliqua.</p>
     </div>

     <div class="col-md-6">
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
          ut aliquip ex ea commodo consequat.</p>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
          accusantium doloremque laudantium, totam rem aperiam.</p>
     </div>

     <div class="col-md-3">
          <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
          dicta sunt explicabo.</p>
     </div>

 </div>

 

Feb 14

Bootstrap Case: বাটন ও আইকন যোগ করা (Adding Button and Icon)

বাটন যুক্ত করা

বাটন ক্লাস গুলোতে <a>, <button>, or <input> এই উপাদান সমুহে ব্যবহৃত হতে পারে।

নিম্নলিখিত উদাহরণে Jumbotron এর মধ্যে একটি বড় এবং হালকা নীল “Search” বাটন দেওয়া হল। এই effect টি পেতে হলে আমাদের .btn-lg এবং .btn-info ক্লাস গুলো ব্যবহার করতে হবে।
উদাহরনঃ

 <div class="jumbotron">
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <a href="#" class="btn btn-info btn-lg">Search</a>
 </div

বিঃদ্রঃ কেন আমরা লিঙ্কের href attribute এর মধ্যে একটি # রাখলাম?

খালি পেজ অথবা “404” বার্তা না পেতে চাইলে আমরা লিঙ্ক হিসেবে # ব্যবহার করব। বাস্তবে অবশ্যই আমরা “Search” পেজ এ আসল লিঙ্ক ব্যবহার করব।

 

আইকন যুক্ত করা

Bootstrap ২০০ Glyphicons দিয়ে থাকে।

Glyphicons প্রদর্শন করতে লিখুনঃ

<span class="glyphicon glyphicon-print"></span>

কোড লাইন উপরে একটি মুদ্রণ আইকন প্রদর্শন করবে।

নিম্নলিখিত উদাহরণে “Search” বাটনে একটি সার্চ আইকন যুক্ত করা হয়েছেঃ

 <div class="jumbotron">
      <h1>My first Bootstrap website!</h1>
      <p>This page will grow as we add more and more components from Bootstrap...</p>
      <a href="#" class="btn btn-info btn-lg">
      <span class="glyphicon glyphicon-search"></span> Search
      </a>
 </div>

 

Feb 14

Bootstrap Case: আমার প্রথম বুটস্ট্র্যাপ ওয়েবসাইট (My First Bootstrap Website)

অনুবাদ করেছেন Abu Jubair Mahin

 

স্ক্র্যাচ থেকে একটি বুটস্ট্র্যাপ ওয়েব পৃষ্ঠা তৈরি করুন

নিচের পৃষ্ঠায় Scratch (স্ক্র্যাচ) থেকে একটি বুটস্ট্র্যাপ ওয়েবসাইট কিভাবে নির্মাণ করা হয় সেটা প্রদর্শন করা হবে

আমরা একটি সহজ HTML পৃষ্ঠা দিয়ে শুরু করব, এবং পরে আমরা অনেক বেশি বেশি components সেখানে যোগ করব,
যতক্ষণ না আমরা একটি সম্পূর্ণরূপে কার্যকরী এবং প্রতিক্রিয়াশীল ওয়েবসাইট পাব ।

আমরা নিম্নলিখিত HTML পৃষ্ঠা দিয়ে শুরু করব:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 </head>
<body>
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </body>
 </html>

 

 

Bootstrap CDN যোগ এবং Containers এর ভিতরে বিভিন্ন উপাদান যুক্ত করা

আমাদের প্রথম কাজ হল Bootstrap CDN যুক্ত করা এবং jQuery তে একটি লিঙ্ক যুক্ত করা

পরবর্তীতে আমরা <body> এর ভিতর সকল HTML উপাদানগুলো যোগ করব এবং এর ভিতরে <div class=”container”> ও থাকবেঃ

উদাহরনঃ

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</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.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container">
      <h1>My first Bootstrap website!</h1>
      <p>This page will grow as we add more and more components from Bootstrap...</p>
      <p>This is another paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

 

টিপস: সম্পূর্ণ স্কিনটা পেইজ দিয়ে Fill করতে চাইলে .container কে পরিবর্তন করে .container-fluid লিখুনঃ

উদাহরনঃ

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</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.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
<div class="container-fluid">
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

ধন্যবাদ , আশা করি বুঝতে পেরেছেন।