Video-22 (Creating layout using Component in Laravel):-
---------------------------------------------------------------------------
Layout : -
1. Layout is used to reduce the code redundancy. It also helps to manage
the code in a more efficient way.
There are two ways to create layout:-
a. Layout using Component.
b. Layout using template inheritance.
1. Layout using component
a. Defining Layout Component
i. Create a layout component: -
resources\views\component\[Link]
<html>
<head>
<title>{{$title}}</title>
</head>
<body>
{{$slot}}
</body>
</html>
b. Applying Layout Component
Create blade view file: - resources\views\[Link]
<x-index>
<x-slot name=’title’>Welcome</x-slot>
<h3>This is a welcome page</h3>
</x-index>
Create blade view file: - resources\views\[Link]
<x-index>
<x-slot name=’title’>Contact</x-slot>
<h3>This is a Contact page</h3>
</x-index>
Video-23 (Creating layout using template inheritance in Laravel):-
-----------------------------------------------------------------------------------------
Defining Layout
Create blade view file : - resources/views/layout/[Link]
<!-- Stored in resources/views/layouts/[Link] -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
1. The @section directive, as the name implies, defines a section of
content.
2. The @yield directive is used to display the contents of a given
section.
The @yield directive also accepts a default value as its second
parameter.
The value will be rendered if the section being yielded is undefined.
3. The @endsection directive will only define a section while @show
will define and immediately yield the section.
Extending layout:-
Create blade view file: - resources/views/[Link]
@extends('[Link]')
@section('title','Home')
@section('page_name') <h1>Home Page</h1> @endsection
@section('banner')<h2>This is home banner page</h2>@endsection
@section('main') <h2>This is hone page main
content</h2>@endsection
@section('default-content')
@parent
<h4>This is home page text</h4>
@endsection
1. @extends Blade directive to specify which layout the child view should
“inherit”.
2. Views which extends a Blade layout may inject content into the
layout’s sections using @section directives.
3. The contents of sections will be displayed in the layout using @yeild
4. The @endsection directive will only define a section while @show will
define and immediately yield the section.
5. @parent directive to append (rather than overwriting ) content to the
layout. The @parent directive will be replaced by the content of the
layout when the view is rendered.
Example:-
Create blade view file : - resources/views/layout/[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>@yield('title')</title>
</head>
<body>
@yield('page-name')
@yield('banner')
@yield('main')
{{-- Default Content --}}
@section('default-content')
<h4>This is default text from layout page</h4>
@show {{--Here @endsection karne ke jgah par @show karne se
ye @endsection + @yeild dono karta hai. --}}
</body>
</html>
Create blade view file: - resources/views/[Link]
@extends('[Link]')
@section('title','Home')
@section('page-name')
<h1>Home Page</h1>
<hr>
@endsection
@section('banner')
<h2> This is banner page </h2>
@endsection
@section('main')
<h2> This is main page content </h2>
@endsection
{{-- If deafault-content kissi specific page ko override karte
hai --}}
{{-- @section('default-content')
<h3>This is home page default page</h3>
@endsection --}}
{{-- layout la content and apna content dono karne ke liye --}}
@section('default-content')
@parent
<h3>This is home page default page</h3>
@endsection
