এর আগের লেখা গুলোতে আমরা দেখেছি কিভাবে কোন ভিউ তৈরি করতে হয়। কিভাবে ভিউতে ডেটা যুক্ত করতে হয়। আমরা যখন কোন ওয়েব সাইটে যাই, তখন প্রায় সময় দেখি সাইটের হেডার এবং ফুটার একই থাকে। তো আমরা যদি আমাদের প্রতিটা ভিউতে এই হেডার এবং ফুটার রাখি, তাহলে প্রতিটা ভিউ অনেক বড় হয়ে যাবে। আবার আমরা যদি সাইটের হেডারের কোন কিছু পরিবর্তন করতে চাই, তখন প্রতিটি ভিউতে গিয়েই পরিবর্তন করতে হবে। এ সমস্যা সমাধানের জন্য রয়েছে লেআউট। আর কাজটা করতে সাহায্য করে Blade।
ভিউ ফোল্ডারে বুটস্ট্যাপ ব্যবহার করে যেমন আমরা একটা লেআউট তৈরি করে নিব। যে কোন নাম দিতে পারব। যেমন আমি দিলাম layout.blade.php। .blade ব্যবহার করতে হবে আমাদের।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
আমাদের হেডার এবং ফুটার একই থাকবে। আমরা শুধু বডিতে কন্টেন্ট যুক্ত করব। তার জন্য লিখব @yield(‘content’)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
@yield('content')
</div><!-- /.container -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
@yield(‘content’) দিয়ে বলে দিয়েছি এটা আমাদের কন্টেন্ট সেকশন। এই লেআউট ফাইলটি হচ্ছে আমাদের প্রধান লেআউট। এবার আমরা যে কোন ভিউতে এই লেআউটি যুক্ত করতে পারব। যেমন welcome.blade.php ফাইলে যুক্ত করতে চাইলে এবং content সেকশনে কোন কন্টেন্ট যুক্ত করতে চাইলেঃ
@extends('layout')
@section ('content')
Hello World!
@endsection
প্রথমে আমাদের লেআউট ফাইলটি include করে নিতে হয়েছে। তার জন্য লিখেছি @extends(‘layout’)। এরপর আমরা কন্টেন্ট সেকশনে কোন কন্টেন্ট যুক্ত করার জন্য @section (‘content’) এবং @endsection এর ভেতর যা যুক্ত করতে চাই, তা লিখেছি। ব্রাউজারে প্রজেক্টটি দেখলে আমরা দেখতে পাবো আমাদের layout ফাইলের ভেতর সুন্দর করে কন্টেন্ট গুলো দেখাচ্ছে।
আমরা চাইলে layout.blade.php ফাইলটাকে মডিউল আকারে সাজাতে পারি। যেমন হেডার অংশ একটা ফাইলে, ফুটার অংশ একটা ফাইলে। আবার যত ইচ্ছে তত গুলো সেকশন তৈরি করতে পারি। উপরের লেআউটে আমরা content নামক একটা মাত্র সেকশন তৈরি করেছি। আমরা চাইলে ইচ্ছে মত আরো অনেক গুলো সেকশন তৈরি করতে পারি, যেমন header, footer, sidebar ইত্যাদি। যে কোন সেকশন যুক্ত করতে চাইলে শুধু লিখতে হবে @yield(‘section-name’)
আর ঐ সেকশনে কোন কন্টেন্ট যুক্ত করতে চাইলে লিখতে হবে এভাবেঃ
@section ('section-name')
Section content...
@endsection
layout.blade.php ফাইলটিকে আমরা আরো সিম্পল করতে পারি। যেমন হেডার অংশ একটা ফাইলে, ফুটার অংশ একটা ফাইলে আলাদা করে রাখতে পারি। এরপর সেগুলো এভাবে যুক্ত করতে পারিঃ
@include('header')
<div class="container">
@yield('content')
</div><!-- /.container -->
@include('footer');
উপরে লেআউট তৈরি করার জন্য আমরা বুটস্ট্যাপ ব্যবহার করেছি। আপনি চাইলে নিজের মত করে সিএসএস লিখেও ব্যবহার করতে পারেন বা অন্য যে কোন লাইব্রেরী ব্যবহার করতে পারেন।