Krishna Krishna - 5 months ago 27
PHP Question

How to add a layout with dynamic js and css in larvel?

Recently I sarted to learn laravel framework. I installed Laravel 5 using composer and I need to know how to include a constant layout where I can put up gobal css and js links. Thanks.

Answer

Write routes

Route::get('/', function()
{
    return View::make('pages.home');
});
Route::get('about', function()
{
    return View::make('pages.about');
});
Route::get('projects', function()
{
    return View::make('pages.projects');
});
Route::get('contact', function()
{
    return View::make('pages.contact');
});

Make sure you follow this folder structure

- 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

Include following in head.blade.php

<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Scotch">
<title>Super Cool Layouts</title>
<!-- load bootstrap from a cdn -->
<link rel="stylesheet" href="<?php echo asset('css/style.css'); ?>">
<script type="text/javascript" src="<?php echo asset('js/main.js'); ?>"></script>

Write header and fooder in header.blade.php and footer.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>

Finally create the layout in default.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">

            @yield('content')

    </div>

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

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

To include the layout use this in home.blade.php

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

I found a complete tutorial over here Include js and css file in laravel using blade

Comments