Laravel Simple Layout Tutorial To Use in Blade Templates With PHP
This shows you how to setup a layout blade template for a laravel. The tutorial is basic and simple to show you how layouts work in Laravel. [5272], Last Updated: Mon Jun 24, 2024
edw
Tue Dec 26, 2023
0 Comments
425 Visits
Screenshot of how the laravel pages look with the blade layout
- Source: /g/xampp8/htdocs/laravel/ForTesting_Purposes/laravel-for-testing
- Git Branch: layout
- Laravel Documentation: https://laravel.com/docs/10.x/blade#building-layouts
Create a Simple home and contacts page with Laravel Blade Layout
Layout File Structure:
- resources
-- views
--- layouts
------- default.blade.php // The main Layout File
--- pages
------- home.blade.php // The home page content with Root URL: /
------- contact.blade.php // The contact page content with URL: /contact
--- includes
------- head.blade.php // The meta tags for the page layout <meta />
------- header.blade.php // The header content used by all pages
------- footer.blade.php // the footer content use by all pages
Terminal Commands
The following bash commands will create the this file structure, assuming you are using Visual Code as the text editor.
mkdir resources/views/layouts
mkdir resources/views/pages
mkdir resources/views/includes
touch resources/views/layouts/default.blade.php
code resources/views/layouts/default.blade.php
touch resources/views/pages/home.blade.php
code resources/views/pages/home.blade.php
touch resources/views/pages/contact.blade.php
code resources/views/pages/contact.blade.php
touch resources/views/includes/head.blade.php
code resources/views/includes/head.blade.php
touch resources/views/includes/header.blade.php
code resources/views/includes/header.blade.php
touch resources/views/includes/footer.blade.php
code resources/views/includes/footer.blade.php
Routes
web.php
use Illuminate\Support\Facades\View;
Route::get('/', function()
{
return View::make('pages.home');
});
Route::get('/contact', function()
{
return View::make('pages.contact');
});
Blade Code
Layouts
resources/views/layouts/default.blade.php
<!doctype html><html>
<head>
@include('includes.head') {{--points to views/includes/head.blade.php --}}
@stack('styles') {{-- to push any javascript scrits here use @push('styles') --}}
</head>
<body>
<div class="container">
<header class="row">
@include('includes.header') {{--points to views/includes/header.blade.php --}}
</header>
<main id="main" class="row">
@yield('content') {{--points to any page that uses @extends('layouts.default') views/pages/home.blade.php --}}
</main>
<footer class="row">
@include('includes.footer') {{--points to views/includes/footer.blade.php --}}
</footer>
</div>
@stack('scripts') {{-- to push any javascript scrits here use @push('scripts') --}}
</body>
</html>
</html>
Includes
resources/views/includes/head.blade.php
<meta charset="utf-8">
<meta name="description" content="Example Meta Descrtipion">
<meta name="Saquib" content="Blade">
<title>Checkout our layout</title>
<!-- load cdn bootstrap Here -->
resources/views/includes/header.blade.php
<div class="navbar" style="padding:5px;margin:15px;background-color:#ccc;">
<h2>Header</h2>
<div class="navbar-inner">
<a id="logo" href="/">Page Title</a>
<ul class="nav">
<li><a href="./">Home</a></li>
<li><a href="./contact">Contact</a></li>
</ul>
</div>
</div>
resources/views/includes/footer.blade.php
<div style="padding:5px;margin:15px;background-color:#ccc;">
<h2>Footer</h2>
footer.blde.php
</div>
Pages
resources/views/pages/home.blade.php
@extends('layouts.default')
@section('content')
<h1>Home Page: home.blade.php</h1>
@stop
resources/views/pages/contact.blade.php uses @push
@extends('layouts.default')
@push('styles')
{{-- <link id="color-link" rel="stylesheet" type="text/css" href="assets/css/demo2.css"> --}}
<style>
h1 {
color:blueviolet;
}
</style>
@endpush
@section('content')
<h1>Styled: Home Contact: contact.blade.php</h1>
Javascript:
<button onclick="showAlert()">Click Here</button>
@endsection
@push('scripts')
<script>
function showAlert() {
alert('Hi There!')
}
</script>
@endpush