PHP Professional এবং Zend Certified PHP Engineer (ZCPE ) Course এ সীমিত সংখ্যক আসন বাকি আছে। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করার জন্য অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল নম্বর : ০১৭২২ ৮১ ৭৫ ৯১

বাংলায় PHP LARAVEL FRAMEWORK পর্ব-৭ : LARAVEL Blade Template Basics

Laravel Framework এ Blade Templating Engine কি?

Laravel Blade Template

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 কেমন হবে :

HTML Demo

এবার 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 &copy; w3programmers 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="#">Masud Alam</a> on <span class="glyphicon glyphicon-time"></span> 27 December 2018 10:00 am</p>
@extends('layouts.master')
@section('title', 'W3Programmers 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="#">Masud Alam</a> on <span class="glyphicon glyphicon-time"></span> 27 December 2018 10:00 am</p>
@extends('layouts.master')
@section('title', 'W3Programmers 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', 'W3Programmers 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 ব্রাউজ করে নিচের মতো ফলাফল পাবেন।

Laravel Blade Output

Laravel Blade Output

Laravel Blade Output

এই ক্যাটাগরির অন্যান্য পোস্ট:

Masud Alam
আমি মাসুদ আলম, বাংলাদেশের ৩৬ তম Zend Certified Engineer । ২০০৯ সালে কম্পিউটার সাইন্স থেকে বেচেলর ডিগ্রী অর্জন করি। দীর্ঘ ৮ বছর আমি Winux Soft, SSL Wireless, IBCS-PRIMAX, Max Group, Canadian International Development Agency (CIDA), Care Bangladesh, World Vision, Hellen Keller সহ বিভিন্ন দেশি বিদেশী কোম্পানিতে ওয়েব ডেভেলপমেন্ট এবং সফটওয়্যার ডেভেলপমেন্ট এর উপর বিভিন্ন লিডিং পজিশন এ চাকরি এবং প্রজেক্ট লিড করি। বিশেষ ভাবে বাংলাদেশের ১০০ জন জেন্ড সার্টিফাইড ইঞ্জিনিয়ার এর মধ্যে ৫২ জন ই আমার হাতে জেন্ড সার্টিফাইড হয়েছে। বর্তমানে TechBeeo Software Company তে সিইও হিসাবে আছি । পাশাপাশি w3programmers ট্রেনিং ইনস্টিটিউট এ PHP এর উপর Professional এবং Advance Zend Certified PHP -7 Engineering কোর্স করাই। আর w3programmers.com সাইট টি আমার।
3 comments on “বাংলায় PHP LARAVEL FRAMEWORK পর্ব-৭ : LARAVEL Blade Template Basics
  1. I am Benzir Ahmed. I like wab design and development course. I services in Khulna. How can I do this course? This course can i do?

Leave a Reply

Your email address will not be published. Required fields are marked *