Feb 17

এএসপি.নেট এমভিসি – ইন্টারনেট অ্যাপ্লিকেশন . ASP.NET MVC – Internet Application

এএসপি.নেট এমভিসি – ইন্টারনেট অ্যাপ্লিকেশন
Sheikh Mahfuzur Rahman
Bangla word: 180

এএসপি.নেট এমভিসি ( ASP.NET MVC ) সম্পর্কে শিখতে গিয়ে আমরা একটি ইন্টারনেট অ্যাপ্লিকেশন তৈরি করবো।

প্রথম পার্টঃ অ্যাপ্লিকেশনটি তৈরি করা

আমরা যা তৈরি করবো
আমরা এমন একটি ইন্টারনেট অ্যাপ্লিকেশন তৈরি করবো যা একটি ডাটাবেজে সংরক্ষিত তথ্যের adding, editing, deleting এবং listing সাপোর্ট করে।

আমরা যা যা করবো

ভিজ্যুয়াল ওয়েব ডেভলাপার ওয়েব অ্যাপ্লিকেশন তৈরির জন্য বিভিন্ন টেমপ্লেট অফার করে। আমরা এইচটিএমএল ফাইভ ( HTML5 ) মার্কআপের মাধ্যমে একটি খালি এমভিসি ইন্টারনেট অ্যাপ্লিকেশন তৈরি করতে ভিজ্যুয়াল ডেভলাপারকে ( Visual Web Developer ) ব্যবহার করবো।

যখন খালি ইন্টারনেট অ্যাপ্লিকেশনটি তৈরি হবে তখন আমরা ধীরে ধীরে অ্যাপ্লিকেশনটিতে কোড যোগ করবো যতক্ষণ না সেটি সম্পূর্ণভাবে শেষ হয়। প্রোগ্রামিং ল্যাঙ্গুয়েজ হিসেবে আমরা C# এবং সবচেয়ে নতুন Razor সার্ভার কোড মার্কআপ ব্যবহার করবো।

পুরো টিউটোরিয়ালটি চলার সময়ে আমরা কন্টেন্ট, কোড এবং অ্যাপ্লিকেশনের সবগুলো উপাদান ব্যাখ্যা করবো।

ওয়েব অ্যাপ্লিকেশনটি তৈরি করা

যদি আপনার কম্পিউটারে ভিজ্যুয়াল ওয়েব ডেভলাপার ইন্সটল করা থাকে, সেটি চালু করুন এবং New Project সিলেক্ট করুন। অন্যথায়, শুধু পড়ুন এবং শিখুন।

New Project ডায়ালগ বক্সেঃ
Visual C# টেমপ্লেট ওপেন করুন
ASP.NET MVC 3 Web Application টেমপ্লেটটি সিলেক্ট করুন
প্রজেক্ট এর নাম হিসেবে MvcDemo সেট করুন
ডিস্ক লোকেশন হিসেবে c:\w3schools_demo এর মতো কিছু একটা সেট করুন
OK তে ক্লিক করুন

http://bangla.salearningschool.com/aspnet/pic_mvc_new_project.jpg

যখন New Project ডায়ালগ বক্স ওপেন হয়ঃ
Internet Application টেমপ্লেট সিলেক্ট করুন
Razor Engine সিলেক্ট করুন
HTML5 Markup সিলেক্ট করুন
OK তে ক্লিক করুন

ভিজ্যুয়াল স্টুডিও এক্সপ্রেস ঠিক নিচের মতো একটি প্রজেক্ট তৈরি করবেঃ

http://bangla.salearningschool.com/aspnet/pic_mvc_explorer.jpg

 

এই টিউটোরিয়ালের পরবর্তী অধ্যায়ে আমরা ফাইল এবং ফোল্ডারের উপাদানগুলোকে নিয়ে আলোচনা করবো।

Feb 17

পিএইচপি – মাইএসকিউএল ডাটা আপডেট করা (PHP Update Data in MySQL)

মাইএসকিউএল-আই এবং পিডিও ব্যবহার করে মাইএসকিউএল টেবলে ডাটা আপডেট

একটি টেবলের বিদ্যমান রেকর্ডগুলো আপডেট করতে UPDATE স্টেটম্যান্ট ব্যবহৃত হয়ঃ

UPDATE table_name
SET column1=value, column2=value2,…
WHERE some_column=some_value

 

 

লক্ষ্যণীয়ঃ আপডেট সিনট্যাক্স-এর WHERE ক্লজটিকে লক্ষ্য করুনঃ কোন্‌ রেকর্ড বা রেকর্ডসমূহ আপডেট করা হবে তা WHERE ক্লজটি ঠিক করে দেয়। আপনি যদি WHERE ক্লজটিকে মুঁছে দেন তাহলে সবগুলো রেকর্ডই আপডেট হবে!

এসকিউএল সম্পর্কে আরও জানতে আমাদের এসএকিউএল টিউটর‍্যালগুলো পড়ে নিন।

এখন “MyGuests” টেবলের দিকে লক্ষ্য করুনঃ

id firstname lastname email reg_date
1 John Doe john@example.com 2014-10-22 14:26:15
2 Mary Moe mary@example.com 2014-10-23 10:22:30
3 Julie Dooley julie@example.com 2014-10-26 10:48:23

 

নিচের উদাহরণগুলো, “MyGuests” টেবলে id=2 যুক্ত রেকর্ডকে আপডেট করেঃ

উদাহরণ ( MySQLi অবজেক্ট-ওরিয়েন্টেড)

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "UPDATE MyGuests SET lastname='Doe' WHERE id=2";

if ($conn->query($sql) === TRUE) {
    echo "Record updated successfully";
} else {
    echo "Error updating record: " . $conn->error;
}

$conn->close();
?>

 

উদাহরণ ( MySQLi প্রসিডুরাল)

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
 $conn = mysqli_connect($servername, $username, $password, $dbname);
 // Check connection
 if (!$conn) {
     die("Connection failed: " . mysqli_connect_error());
}

$sql = "UPDATE MyGuests SET lastname='Doe' WHERE id=2";
 
if (mysqli_query($conn, $sql)) {
    echo "Record updated successfully";
} else {
    echo "Error updating record: " . mysqli_error($conn);
}

mysqli_close($conn);
 ?>

 

উদাহরণ (পিডিও)

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDBPDO";

try {
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = "UPDATE MyGuests SET lastname='Doe' WHERE id=2";

    // Prepare statement
    $stmt = $conn->prepare($sql);

    // execute the query
    $stmt->execute();

    // echo a message to say the UPDATE succeeded
    echo $stmt->rowCount() . " records UPDATED successfully";
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }

$conn = null;
?>

 

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>