Scribd
Upload
15 views4 pages

Laravel Part-6

Uploaded by

waver58650
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views4 pages

Laravel Part-6

Uploaded by

waver58650
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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\layout.blade.php
<html>
<head>
<title>{{$title}}</title>
</head>
<body>
{{$slot}}
</body>
</html>

b. Applying Layout Component


Create blade view file: - resources\views\home.blade.php
<x-index>
<x-slot name=’title’>Welcome</x-slot>
<h3>This is a welcome page</h3>

</x-index>

Create blade view file: - resources\views\contact.blade.php


<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/app.blade.php
<!-- Stored in resources/views/layouts/app.blade.php -->
<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/home.blade.php
@extends('layout.adminlayout')
@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/admin.blade.php
<!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/home.blade.php


@extends('layout.admin')
@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

You might also like