Laravel Framework এ Blade Templating Engine কি?
Laravel Blade Template
Laravel Framework এ Plain PHP Code থেকে design part যাকে আমরা বলি Presentation Layer (অর্থাৎ HTML, CSS, JS) কে আলাদা করার জন্য Blade Template Engine ব্যবহার করা হয়। আর এটা ব্যাবহার করা খুবই সহজ। যদিও Blade আপনাকে আপনার view তে Plain PHP Code ব্যবহার করতে বাধা দেয় না। প্রকৃতপক্ষে, View তে ব্লেডের সব code গুলো Plain PHP কোডে Compiled হয় এবং cache করা হয়। এবং কোডে কোনো সংশোধন করা না হওয়া পর্যন্ত cache অবস্থায় থাকে , যার মানে Blade মূলত আপনার অ্যাপ্লিকেশনে কোনো বাড়তি বোঝা তৈরী করেনা। বরং Plain PHP Code গুলো থেকে HTML,CSS এবং JS কে আলাদা করায় আপনার এপ্লিকেশন এর Security, Performance, code reuse সহ আরো অনেক সুবিধা যোগ করে। Blade Template এর Syntax মূলত ASP.net Razor syntax সিনট্যাক্স দ্বারা অনুপ্রাণিত। Blade Template এ কোড লেখার জন্য আপনার View ফাইলের এক্সটেনশন হতে হবে .blade.php . Blade Template ফাইল গুলো ও resources/views ফোল্ডারে রাখতে হয়।
Blade template তৈরী করার নিয়ম
যেকোনো html Template কে Laravel এর Blade Template এ রূপান্তর করতে হলে প্রথমে আপনাকে আপনার template কে slicing করে header section নিয়ে header.blade.php, sidebar section নিয়ে sidebar.blade.php এবং footer section নিয়ে footer.blade.php ফাইল তৈরী করে নিতে হবে (যদি আপনার html template এ section গুলো থাকে )। আর মূল file কে master.blade.php নামে save করতে হবে। তারপর master.blade.php ফাইল এ Laravel Blade Command @include দিয়ে ফাইল গুলোকে include করে নিতে হবে। তারপর সেই Master Page কে Laravel Blade Command @extendsদিয়ে extend করে অন্য view Page গুলো বানাতে হবে। ধরুন আপনার View Page গুলোর নাম যথাক্রমে home,about এবং contact তাহলে Blade এর Format এ এগুলো হবে যথাক্রমে home.blade.php, about.blade.php এবং contact.blade.php.
প্রথমেই দেখে নেয়া যাক আমাদের Blade Template কেমন হবে :
এবার Blade Template এর File Structure দেখে নেয়া যাক :
File struture :-
-public
--assets
---css
---js
---fonts
---img
- resources
-- views
--- layout
---- master.blade.php
---- header.blade.php
---- footer.blade.php
---- sidebar.blade.php
--- pages
---- home.blade.php
---- about.blade.php
---- contact.blade.php
Blade Template Commands
এবার আমরা আমাদের Blade Template এ ব্যবহার করব এমন কিছু Blade Template Commands সম্পর্কে জানা যাক: –
@yield :- এটি যেকোনো value প্রদর্শন করতে ব্যবহৃত হয়।
@section :- এটি Template এর যেকোনো section define করতে ব্যবহৃত হয়।
@endsection :- এটি define করা section end করতে ব্যবহৃত হয়।
@include :- এক view file কে অন্য view file এ include করার জন্য ব্যবহৃত হয়।
@extends:- Master Layout কে Child Layout এ extends বা inherit করার জন্য ব্যবহৃত হয়।
{{ asset('your_asset_file_path') }} :- css file, js file এবং যেকোনো image link করার জন্য ব্যবহৃত হয়।
{{URL::to('/your_page_name')}} :-এটা মূলতঃ বিভিন্ন page এর সাথে লিংক করার জন্য ব্যবহৃত হয়
প্রস্তুতি:
প্রথমধাপ : master.blade.php ফাইলটিতৈরীরকাজ :
প্রথমে resources/views/layouts/ ফোল্ডারে master.blade.php ফাইলটি তৈরী করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@yield('title')</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" lang="en" content="ADD SITE DESCRIPTION">
<meta name="author" content="ADD AUTHOR INFORMATION">
<meta name="robots" content="index, follow">
<!-- icons -->
<link rel="apple-touch-icon" href="{{ asset('/assets/img/apple-touch-icon.png') }}">
<link rel="shortcut icon" href="favicon.ico">
<!-- Bootstrap Core CSS file -->
<link rel="stylesheet" href="{{ asset('/assets/css/bootstrap.min.css') }}">
<!-- Override CSS file - add your own CSS rules -->
<link rel="stylesheet" href="{{ asset('/assets/css/styles.css') }}">
<!-- Conditional comment containing JS files for IE6 - 8 -->
<!--[if lt IE 9]>
<script src="{{ asset('/assets/js/html5.js') }}"></script>
<script src="{{ asset('/assets/js/respond.min.js') }}"></script>
<![endif]-->
</head>
<body>
@include('layouts.header')
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
@yield('content')
</div>
</div>
</div>
</div>
@include('layouts.sidebar')
</div>
<!-- /.row -->
@include('layouts.footer')
</div>
<!-- /.container-fluid -->
<!-- JQuery scripts -->
<script src="{{ asset('/assets/js/jquery-1.11.2.min.js') }}"></script>
<!-- Bootstrap Core scripts -->
<script src="{{ asset('/assets/js/bootstrap.min.js') }}"></script>
</body>
</html>
দ্বিতীয়ধাপ : header.blade.php ফাইলটিতৈরীরকাজ :
এখন resources/views/layouts/ ফোল্ডারে header.blade.php ফাইলটি তৈরী করব।
<!-- Navigation -->
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="{{URL::to('/')}}">Home</a>
</div>
<!-- /.navbar-header -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="{{URL::to('/about')}}">About</a></li>
<li><a href="{{URL::to('/contact')}}">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- /.navbar -->
তৃতীয় ধাপ: footer.blade.php ফাইলটি তৈরীর কাজ :
এখন resources/views/layouts/ ফোল্ডারে footer.blade.php ফাইলটি তৈরী করব।
<footer class="margin-tb-3">
<div class="row">
<div class="col-lg-12">
<p>Copyright © Satech360 2017</p>
</div>
</div>
</footer>
চতুর্থধাপ: sidebar.blade.php ফাইলটিতৈরীরকাজ :
এখন resources/views/layouts/ ফোল্ডারে sidebar.blade.php ফাইলটি তৈরী করব।
<div class="col-sm-4">
<!-- Search -->
<div class="well">
<h4 class="margin-t-0">Search</h4>
<form action="#">
<div class="input-group">
<label class="sr-only" for="search-form">Search the site</label>
<input type="text" class="form-control" id="search-form">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</form>
</div>
<!-- list group -->
<div class="list-group margin-b-3">
<a href="#" class="active list-group-item">Categories</a>
<a href="#" class="list-group-item">PHP & MySQL</a>
<a href="#" class="list-group-item">AJAX & JQUERY</a>
<a href="#" class="list-group-item">Laravel Framework</a>
</div>
<!-- Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Sidebar panel widget</h4>
</div>
<div class="panel-body">
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<!-- Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Sidebar panel widget</h4>
</div>
<div class="panel-body">
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
পঞ্চমধাপ: resources/views/pages ফোল্ডারে Page গুলোবানানো :
সর্বেশেষে আমরা আমাদের home.php, about.php, এবং contact.php এই তিনটি file বানাবো।
home.blade.php file
<p>Posted by <span class="glyphicon glyphicon-user"></span> <a href="#">Sahab Uddin</a> on <span class="glyphicon glyphicon-time"></span> 27 December 2018 10:00 am</p>
@extends('layouts.master')
@section('title', 'Satech360 Home Page')
@section('content')
<h2>This is my Home page</h2>
@stop
about.blade.php file
<p>Posted by <span class="glyphicon glyphicon-user"></span> <a href="#">Sahab Uddin</a> on <span class="glyphicon glyphicon-time"></span> 27 December 2018 10:00 am</p>
@extends('layouts.master')
@section('title', 'Satech360 About Page')
@section('content')
<h2>This is my About page</h2>
@stop
contact.blade.php file
<p>Posted by <span class="glyphicon glyphicon-user"></span> <a href="#">Masud Alam</a> on <span class="glyphicon glyphicon-time"></span> 27 December 2018 10:00 am</p>
@extends('layouts.master')
@section('title', 'Satech360 Contact Page')
@section('content')
<h2>This is my Contact page</h2>
@stop
ফাইনালধাপ :route এরকাজ
এবার আমরা আমাদের page গুলোকে route এ লিংক করে দিব
Route::get('/', function () {
return view('pages.home');
});
Route::get('/about', function () {
return view('pages.about');
});
Route::get('/contact', function () {
return view('pages.contact');
});
সব কিছু ঠিক থাকলে এখন আপনার Laravel Blade Template রেডি ! আপনি খুব সহজে http://localhost:8000 , http://localhost:8000/about এবং http://localhost:8000/contact ব্রাউজ করে নিচের মতো ফলাফল পাবেন।
