• logo
  • script
    • AngularJs
    • VueJs
    • NodeJs
    • ReactJs
  • wordpress
  • Codeigniter
  • Codeigniter 4
  • Laravel
  • Python
  • MySql
  • Json
  • C
  • C++
  • More ...
    • Cakephp Framework
    • MongoDb
    • MySqli PDO
    • .htaccess
    • HTML 5
    • CSS
    • SEO
    • DCA

Laravel Tutorials

  • What is laravel
  • Laravel Installation
  • Directory Structure
  • htaccess
  • Remove public from url
  • Artisan Command
  • Laravel Configuration
  • Routing Configuration
  • Namespaces
  • Request
  • Response
  • Controller
  • Model
  • User Authentication
  • Multi User Authentication
  • Database Seeding
  • Database
  • Database Query
  • ORM
  • One-to-One Relationship
  • One-to-Many Relationship
  • Many to Many Eloquent Relationship
  • Has One Through
  • Has Many Through
  • Querying Relations
  • Middleware
  • Laravel Views
  • Blade Views
  • Print data on view page
  • Get Site URL
  • Get URL Segment
  • Get images from Storage folder
  • Clear cache
  • Form Class not found
  • Flash Message in laravel
  • Redirections
  • path
  • CRUD Projerct
  • CRUD in Laravel
  • CRUD progran
  • Laravel Validation
  • Jquery Validation
  • Cookie
  • Session
  • Email Send in laravel
  • File uploading
  • CSRF Protection
  • Helper in Laravel
  • Helper Functions
  • Guzzle Http Client
  • Paypal Payment Gatway Integration
  • Cron Job in laravel
  • Flash message
  • path
  • Errors Handling
  • Date Format
  • Date Format Validation
  • Display Image on View Page
  • Update User Status using toggle button
  • Delete Multiple Records using Checkbox in Laravel?
  • Confirmation Before Delete Record
  • Delete image from storage
  • Remove/Trim Empty & Whitespace From Input Requests
  • Block IP Addresses from Accessing Website
  • How to Disable New User Registration in Laravel
  • Redirect HTTP To HTTPS Using Laravel Middleware
  • CKEditor
  • slug generate unique
  • Prevent Browser's Back Button After Logout
  • Datatable dunamically
  • encrypt & Decript
  • Download File
  • Rest API
  • Shopping Cart
  • Shopping Cart Example
  • Dynamic Category-Subcategory Menu
  • Ajax Search
  • Interview Question
  • laravel Tutorilal link
  • laravel Tutorilal

 Important Links

Read More

Home » Laravel Framework  » 

What is Laravel Blade Views?


Laravel 5.1 introduces the concept of using Blade, a templating engine to design a unique layout. The layout thus designed can be used by other views, and includes a consistent design and structure. When compared to other templating engines, Blade is unique in the following ways −

  • It does not restrict the developer from using plain PHP code in views.
  • The blade views thus designed, are compiled and cached until they are modified.

    • all views are stored in the resources/views directory and the default view for Laravel framework is welcome.blade.php.

    File name : index.php


    Steps for Creating a Blade Template Layout

    Step 1:

    File name : master.blade.php

    <html>
    <head>
    <title>DemoLaravel - @yield('title')</title>
    </head>
    <body>
    @yield('content')
    </body>
    </html>

    Step 2 :-

    In this step, you should extend the layout. Extending a layout involves defining the child elements. Laravel uses the Blade @extends directive for defining the child elements. When you are extending a layout, please note the following points −

  • Views defined in the Blade Layout injects the container in a unique way.
  • Various sections of view are created as child elements.
  • Child elements are stored in layouts folder as child.blade.php

    • File name : index.php

    @extends('layouts.app')
    @section('title', 'Page Title')
    @section('sidebar')
    @parent
    <p>This refers to the master sidebar.</p>
    @endsection
    @section('content')
    <p>This is my body content.</p>
    @endsection

    How to create blade view templates.

    Views

    The File Structure

    File name : index.php

    - app
    -- views
    --- layouts
    ------- default.blade.php
    ------- sidebar.blade.php
    --- pages
    ------- home.blade.php
    ------- about.blade.php
    ------- projects.blade.php
    ------- contact.blade.php
    --- includes
    ------- head.blade.php
    ------- header.blade.php
    ------- footer.blade.php
    ------- sidebar.blade.php

    Includes

    File name : head.blade.php

    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="itechxpert">

    <title>laravel blade view Layouts</title>

    <!-- load bootstrap from a cdn -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">

    header.blade.php

    File name : header.blade.php

    <div class="navbar">
    <div class="navbar-inner">
    <a id="logo" href="/">Single Malt</a>
    <ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/projects">Projects</a></li>
    <li><a href="/contact">Contact</a></li>
    </ul>
    </div>
    </div>

    footer.blade.php

    File name : footer.blade.php

    © Copyright 2020 itechxpert

    Default Layout and Pages (Home, Contact)

    File name : default.php

    <!doctype html>
    <html>
    <head>
    @include('includes.head')
    </head>
    <body>
    <div class="container">

    <header class="row">
    @include('includes.header')
    </header>

    <div id="main" class="row">

    @yield('content')

    </div>

    <footer class="row">
    @include('includes.footer')
    </footer>

    </div>
    </body>
    </html>

    Home Page and Contact Page

    The home page and contact pages will use the same layouts/default.blade.php. We won't have to reuse the code in the layout or the includes now! Blade lets us use the layout that we just created by using @extends. By creating @section, we create a section that will be used in the layout. Here we use @section('content') and in our layout, all that we type here will be injected in @yield in the layout.

    File name : pages/home.blade.php

    @extends('layouts.default')
    @section('content')
    i am the home page
    @stop

    pages/contact.blade.php

    File name :

    @extends('layouts.default')
    @section('content')
    i am the contact page
    @stop

    Sidebar Layout and Pages

    File name : includes/sidebar.blade.php


    <!-- sidebar nav -->
    <nav id="sidebar-nav">
    <ul class="nav nav-pills nav-stacked">
    <li><a href="#">Fly to the Moon</a></li>
    <li><a href="#">Dig to China</a></li>
    <li><a href="#">Swim Across the Sea</a></li>
    </ul>
    </nav>

    layouts/sidebar.blade.php

    File name : layouts/sidebar.blade.php

    <!doctype html>
    <html>
    <head>
    @include('includes.head')
    </head>
    <body>
    <div class="container">

    <header class="row">
    @include('includes.header')
    </header>

    <div id="main" class="row">

    <!-- sidebar content -->
    <div id="sidebar" class="col-md-4">
    @include('includes.sidebar')
    </div>

    <!-- main content -->
    <div id="content" class="col-md-8">
    @yield('content')
    </div>

    </div>

    <footer class="row">
    @include('includes.footer')
    </footer>

    </div>
    </body>
    </html>

    pages/about.blade.php

    File name : index.php

    @extends('layouts.sidebar')
    @section('content')
    i am the about page
    @stop

    File name : index.php


    File name : index.php


    How to use Form open in laravel

    File name : index.php

    {!! Form::open( [ 'action' => url( '/login_validate' ), 'method' => 'post', 'files' => true ] ) !!}
    // Your form body
    {!! Form::close() !!}

    How to use Form open in laravel

    File name : index.php

    {{ Form::open(array('url' => 'add_category','files' => true, 'method'=>'post')) }}
    // Your form body
    {!! Form::close() !!}

    Note : bydefault method="post" in form open

    How to use Form open in laravel

    File name : index.php

    {!! Form::open(['url'=>'add_category', 'files' => true]) !!}


    {!! Form::close() !!}

    How to use Form open in laravel

    You may also open forms that point to named routes or controller actions:

    File name : index.php

    echo Form::open(array('route' => 'route.name'))

    echo Form::open(array('action' => 'Controller@method'))


    You may pass in route parameters

    echo Form::open(array('route' => array('route.name', $user->id)))

    echo Form::open(array('action' => array('Controller@method', $user->id)))

    Another Way :-

    {{ Form::open(array('route' => array('user.show', $user->id))) }}
    with class name

    {{ Form::open(array('route' => array('user.show', $user->id), 'class' => 'section-top')) }}



    how to use anchor tag

    File name : index.php

    <a href="{{url('add_student')}}">click Here</a>
    <br/>
    <a href="{{url('add_student')}}/{{$ros->id}}">click Here</a>

    Using Route

    File name : index.php

    <a href="{{Route('add_student')}}">Click Here</a>

    Complete Example :-

    Layout page

    File name : layouts/layout.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description-gambolthemes" content="">
    <meta name="author-gambolthemes" content="">
    <title>@yield('title')</title>
    <link href="{{asset('assets/css/styles.css')}}" rel="stylesheet">
    <link href="{{asset('assets/css/admin-style.css')}}" rel="stylesheet">

    <!-- Vendor Stylesheets -->
    <link href="{{asset('assets/vendor/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{asset('assets/vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet">

    </head>

    <body class="sb-nav-fixed">


    @section('sidebar')
    @parent
    @include('layouts/navigation')
    @show


    @yield('content')


    @include('layouts/footer')

    </body>
    </html>

    Navigation Page

    File name : layouts/navigation.php

    <nav class="sb-topnav navbar navbar-expand navbar-light bg-clr">
    <a class="navbar-brand logo-brand" href="index.html">Gambo Supermarket</a>
    <button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#"><i class="fas fa-bars"></i></button>
    <a href="http://gambolthemes.net/html-items/gambo_supermarket_demo/index.html" class="frnt-link"><i class="fas fa-external-link-alt"></i>Home</a>
    <ul class="navbar-nav ml-auto mr-md-0">
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="userDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
    <a class="dropdown-item admin-dropdown-item" href="{{url('edit-profile')}}">Edit Profile</a>
    <a class="dropdown-item admin-dropdown-item" href="{{url('change-password')}}">Change Password</a>
    <a class="dropdown-item admin-dropdown-item" href="{{url('logout')}}">Logout</a>
    </div>
    </li>
    </ul>
    </nav>
    <div id="layoutSidenav">
    <div id="layoutSidenav_nav">
    <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
    <div class="sb-sidenav-menu">
    <div class="nav">
    <a class="nav-link active" href="{{route('dashboard_show')}}">
    <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
    Dashboard
    </a>


    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseCategories" aria-expanded="false" aria-controls="collapseCategories">
    <div class="sb-nav-link-icon"><i class="fas fa-list"></i></div>
    Categories
    <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
    </a>
    <div class="collapse" id="collapseCategories" aria-labelledby="headingTwo" data-parent="#sidenavAccordion">
    <nav class="sb-sidenav-menu-nested nav">
    <a class="nav-link sub_nav_link" href="{{route('category_show')}}">All Categories</a>
    <a class="nav-link sub_nav_link" href="{{url('category_add')}}">Add Category</a>
    </nav>
    </div>


    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseProducts" aria-expanded="false" aria-controls="collapseProducts">
    <div class="sb-nav-link-icon"><i class="fas fa-box"></i></div>
    Products
    <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
    </a>
    <div class="collapse" id="collapseProducts" aria-labelledby="headingTwo" data-parent="#sidenavAccordion">
    <nav class="sb-sidenav-menu-nested nav">
    <a class="nav-link sub_nav_link" href="{{route('product_show')}}">All Products</a>
    <a class="nav-link sub_nav_link" href="{{route('product_add')}}">Add Product</a>
    </nav>
    </div>

    <a class="nav-link" href="{{url('orders')}}">
    <div class="sb-nav-link-icon"><i class="fas fa-cart-arrow-down"></i></div>
    Orders
    </a>
    <a class="nav-link" href="{{url('orders-view')}}">
    <div class="sb-nav-link-icon"><i class="fas fa-cart-arrow-down"></i></div>
    Orders view
    </a>
    <a class="nav-link" href="{{url('customers')}}">
    <div class="sb-nav-link-icon"><i class="fas fa-users"></i></div>
    Customers
    </a>
    <!--<a class="nav-link" href="{{route('offers')}}">
    <div class="sb-nav-link-icon"><i class="fas fa-gift"></i></div>
    Offers
    </a>-->

    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseOffers" aria-expanded="false" aria-controls="collapseOffers">
    <div class="sb-nav-link-icon"><i class="fas fa-box"></i></div>
    Offers
    <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
    </a>
    <div class="collapse" id="collapseOffers" aria-labelledby="headingTwo" data-parent="#sidenavAccordion">
    <nav class="sb-sidenav-menu-nested nav">
    <a class="nav-link sub_nav_link" href="{{route('offers')}}">All Offers</a>
    <a class="nav-link sub_nav_link" href="{{route('offers_add')}}">Add Offer</a>
    </nav>
    </div>


    </div>
    </div>
    </nav>
    </div>

    footer page

    File name : layouts/footer.php

    <footer class="py-4 bg-footer mt-auto">
    <div class="container-fluid">
    <div class="d-flex align-items-center justify-content-between small">
    <div class="text-muted-1">© 2020 <b>Gambo Supermarket</b>. by <a href="https://themeforest.net/user/gambolthemes">Gambolthemes</a></div>
    <div class="footer-links">
    <a href="http://gambolthemes.net/html-items/gambo_supermarket_demo/privacy_policy.html">Privacy Policy</a>
    <a href="http://gambolthemes.net/html-items/gambo_supermarket_demo/term_and_conditions.html">Terms &amp; Conditions</a>
    </div>
    </div>
    </div>
    </footer>
    </div>
    </div>
    <script src="{{asset('assets/js/jquery-3.4.1.min.js')}}"></script>
    <script src="{{asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
    <script src="{{asset('assets/vendor/chart/highcharts.js')}}"></script>
    <script src="{{asset('assets/vendor/chart/exporting.js')}}"></script>
    <script src="{{asset('assets/vendor/chart/export-data.js')}}"></script>
    <script src="{{asset('assets/vendor/chart/accessibility.js')}}"></script>
    <script src="{{asset('assets/js/scripts.js')}}"></script>
    <script src="{{asset('assets/js/chart.js')}}"></script>


    Dashboard page

    File name : admin/dashboard.php


    @extends('layouts.layout')

    @section('title',"Dashboard")
    @section('content')


    <div id="layoutSidenav_content">
    <main>
    <div class="container-fluid">
    <h2 class="mt-30 page-title">Dashboard</h2>
    <ol class="breadcrumb mb-30">
    <li class="breadcrumb-item active">Dashboard</li>
    </ol>
    <div class="row">
    <div class="col-xl-3 col-md-6">
    <div class="dashboard-report-card purple">
    <div class="card-content">
    <span class="card-title">Order Pending</span>
    <span class="card-count">2</span>
    </div>
    <div class="card-media">
    <i class="fab fa-rev"></i>
    </div>
    </div>
    </div>
    <div class="col-xl-3 col-md-6">
    <div class="dashboard-report-card red">
    <div class="card-content">
    <span class="card-title">Order Cancel</span>
    <span class="card-count">0</span>
    </div>
    <div class="card-media">
    <i class="far fa-times-circle"></i>
    </div>
    </div>
    </div>
    <div class="col-xl-3 col-md-6">
    <div class="dashboard-report-card info">
    <div class="card-content">
    <span class="card-title">Order Process</span>
    <span class="card-count">5</span>
    </div>
    <div class="card-media">
    <i class="fas fa-sync-alt rpt_icon"></i>
    </div>
    </div>
    </div>
    <div class="col-xl-3 col-md-6">
    <div class="dashboard-report-card success">
    <div class="card-content">
    <span class="card-title">Today Income</span>
    <span class="card-count">$9568.00</span>
    </div>
    <div class="card-media">
    <i class="fas fa-money-bill rpt_icon"></i>
    </div>
    </div>
    </div>
    <div class="col-xl-12 col-md-12">
    <div class="card card-static-1 mb-30">
    <div class="card-body">
    <div id="earningGraph"></div>
    </div>
    </div>
    </div>
    <div class="col-xl-12 col-md-12">
    <div class="card card-static-2 mb-30">
    <div class="card-title-2">
    <h4>Recent Orders</h4>
    <a href="orders.html" class="view-btn hover-btn">View All</a>
    </div>
    <div class="card-body-table">
    <div class="table-responsive">
    <table class="table ucp-table table-hover">
    <thead>
    <tr>
    <th style="width:130px">Order ID</th>
    <th>Item</th>
    <th style="width:200px">Date</th>
    <th style="width:300px">Address</th>
    <th style="width:130px">Status</th>
    <th style="width:130px">Total</th>
    <th style="width:100px">Action</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>ORDER12345</td>
    <td>
    <a href="#" target="_blank">Product Title Here</a>
    </td>
    <td>
    <span class="delivery-time">15/06/2020</span>
    <span class="delivery-time">4:00PM - 6.00PM</span>
    </td>
    <td>#0000, St No. 8, Shahid Karnail Singh Nagar, MBD Mall, Frozpur road, Ludhiana, 141001</td>
    <td>
    <span class="badge-item badge-status">Pending</span>
    </td>
    <td>$90</td>
    <td class="action-btns">
    <a href="order_view.html" class="views-btn"><i class="fas fa-eye"></i></a>
    <a href="order_edit.html" class="edit-btn"><i class="fas fa-edit"></i></a>
    </td>
    </tr>
    <tr>
    <td>ORDER12346</td>
    <td>
    <a href="#" target="_blank">Product Title Here</a>
    </td>
    <td>
    <span class="delivery-time">13/06/2020</span>
    <span class="delivery-time">2:00PM - 4.00PM</span>
    </td>
    <td>#0000, St No. 8, Shahid Karnail Singh Nagar, MBD Mall, Frozpur road, Ludhiana, 141001</td>
    <td>
    <span class="badge-item badge-status">Pending</span>
    </td>
    <td>$105</td>
    <td class="action-btns">
    <a href="order_view.html" class="views-btn"><i class="fas fa-eye"></i></a>
    <a href="order_edit.html" class="edit-btn"><i class="fas fa-edit"></i></a>
    </td>
    </tr>
    <tr>
    <td>ORDER12347</td>
    <td>
    <a href="#" target="_blank">Product Title Here</a>
    </td>
    <td>
    <span class="delivery-time">13/6/2020</span>
    <span class="delivery-time">5:00PM - 7.00PM</span>
    </td>
    <td>#0000, St No. 8, Shahid Karnail Singh Nagar, MBD Mall, Frozpur road, Ludhiana, 141001</td>
    <td>
    <span class="badge-item badge-status">Pending</span>
    </td>
    <td>$60</td>
    <td class="action-btns">
    <a href="order_view.html" class="views-btn"><i class="fas fa-eye"></i></a>
    <a href="order_edit.html" class="edit-btn"><i class="fas fa-edit"></i></a>
    </td>
    </tr>
    <tr>
    <td>ORDER12348</td>
    <td>
    <a href="#" target="_blank">Product Title Here</a>
    </td>
    <td>
    <span class="delivery-time">12/06/2020</span>
    <span class="delivery-time">01:00PM - 3.00PM</span>
    </td>
    <td>#0000, St No. 8, Shahid Karnail Singh Nagar, MBD Mall, Frozpur road, Ludhiana, 141001</td>
    <td>
    <span class="badge-item badge-status">Pending</span>
    </td>
    <td>$120</td>
    <td class="action-btns">
    <a href="order_view.html" class="views-btn"><i class="fas fa-eye"></i></a>
    <a href="order_edit.html" class="edit-btn"><i class="fas fa-edit"></i></a>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </main>


    @endsection



    Route

    File name : web.php

    Route::get('/', function () {
    return view('admin.dashboard');
    });

    Auth::routes();
    //Route::get('/home', 'HomeController@index')->name('home');


    /* ############## Show directly View without Controller ################## */

    //Route::view('customers','admin.customers');
    //Route::view('orders','admin.orders');

    /* ############## End ################## */


    /* ################### Account Setting ############## */
    Route::get('edit-profile', 'HomeController@edit_profile');
    Route::get('change-password', 'HomeController@change_password');
    Route::get('logout', 'HomeController@logout');

    /* ################### End Account Setting ############## */


    Route::get('dashboard', 'HomeController@dashboard')->name('dashboard_show');
    Route::get('category_add', 'HomeController@index');
    Route::get('category_show', 'HomeController@category_show')->name('category_show');
    Route::get('product-add', 'HomeController@product_add')->name('product_add');
    Route::get('product-show', 'HomeController@product_show')->name('product_show');
    Route::get('orders', 'HomeController@orders')->name('orders');
    Route::get('orders-view', 'HomeController@orders_view');

    Route::get('customers', 'HomeController@customers')->name('customers');
    Route::get('offers', 'HomeController@offers')->name('offers');
    Route::get('offers-add', 'HomeController@offers_add')->name('offers_add');



    Example

    File name : index.php





    Itechtuto

    Connect Us Socially:

    Quick Links

    • itech
    • About Us
    • Feedback
    • Trademarks
    • Privacy Policy
    • Terms of Use
    • Sitemap
    • Trademarks
    • Privacy Policy
    • Terms of Use
    • Sitemap

    Copyright © 2016 itechxpert (P) Ltd. All rights reserved.

    Copyright © 2016 itechxpert (P) Ltd. All rights reserved.