Monday , 1 June 2020
Stackode
Home > Laravel > Cara partials views header, content, footer blade laravel

Cara partials views header, content, footer blade laravel

Cara partials view header, content, footer blade laravel gimana sih.? Masih bingung dengan blade nya laravel.? sama  😆  , mari kita belajar bersama. Ok point aja Cara partials view header, content, footer blade laravel. Pertama perhatikan struktur folder laravel bagian view nya terlebih dahulu, default phat view laravel ada di resource.

struktur_folder_resource_view_laravel

Kisarnya sperti itu struktur foldernya. Dengan tmbahan beberapa folder. Di resource view akan saya rubah folder-foldernya yaitu dengan menambahkan folder dengan nama include yg isinya akan ada

  1. footer
  2. nav
  3. sidebar

Dan juga menghapus pages. Folder layouts nanti akan saya isi dengan tampilan / isi content yang berbeda-beda. Setelah saya rubah maka akan menjadi seperti gambar di bawah ini

struktur_folder_resource_view_laravel_change

Disini template nya saya menggunakan Bootstrap.

Ok Langsung saja buat file-file yang di butuhkan dengan nama index.blade.php letakan di dalam folder views

index.blade.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">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="{{ asset('favicon.ico') }}">
        <title>Stackode with laravel</title>
        <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
        <link href="{{ asset('css/custom.css') }}" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        @include('include.navigation')
        <div class="container">
            @yield('content')
        </div>
        @include('include.footer')
        <script src="{{ asset('js/jquery.min.js') }}"></script>
        <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    </body>
</html>

Selanjutnya buat file navigation.blade.php simpant di folder views->include->navigation.blade.php

navigation.blade.php

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Stackode</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="{{ isActiveRoute('home') }}">{!! HTML::linkRoute('home', 'Home') !!}</li>
            <li class="{{ isActiveRoute('about') }}"><a href="#about">About</a></li>
            <li class="{{ isActiveRoute('blogs') }}">{!! HTML::linkRoute('blogs', 'Blog') !!}</li>
            <li class="{{ isActiveRoute('contact') }}"><a href="#contact">Contact</a></li>            
        </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

Selanjutnya buat file sidebar.blade.php simpant di folder views->include->sidebar.blade.php

sidebar.blade.php

<div class="col-md-4">
    <div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Search</h3>
        </div>
        <div class="panel-body">
        {!! Form::open(['url' => 'foo/bar', 'method'=>'GET']) !!}
        {!! Form::text('search','Search',['class'=>'form-control']) !!}
        {!! Form::close() !!}
        </div>
    </div>

    <div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Recent Post</h3>
        </div>
        <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item">{!! HTML::link('/cara-partials-view-blader-laravel','Cara partials view header, content, footer blade laravel') !!}</li>
            <li class="list-group-item">{!! HTML::link('/cara-partials-view-blader-laravel','Cara partials view header, content, footer blade laravel') !!}</li>
            <li class="list-group-item">{!! HTML::link('/cara-partials-view-blader-laravel','Cara partials view header, content, footer blade laravel') !!}</li>
            <li class="list-group-item">{!! HTML::link('/cara-partials-view-blader-laravel','Cara partials view header, content, footer blade laravel') !!}</li>
            <li class="list-group-item">{!! HTML::link('/cara-partials-view-blader-laravel','Cara partials view header, content, footer blade laravel') !!}</li>
          </ul>    
        </div>
    </div>
</div>

Selanjutnya buat file footer.blade.php simpant di folder views->include->footer.blade.php

footer.blade.php

<footer class="footer">
    <div class="container">
        <p class="text-muted">Copyright &copy; 2015, Stackode</p>
    </div>
</footer>

Selanjutnya buat file home.blade.php simpant di folder views->layouts->home.blade.php

home.blade.php

@extends('index')
@section('content')
<div class="page-header">
    <h1>Welcome to Stackode</h1>
</div>
<p class="lead">This build with laravel 5 {!! HTML::link('https://www.stackode.tk/', 'Stackode Lab', ['class'=>'btn btn-danger', 'target'=>'_blank']) !!}</p>
@endsection

Selanjutnya buat file blog.blade.php simpant di folder views->layouts->blog.blade.php

blog.blade.php

@extends('index')
@section('content')
<div class="page-header">
    <h1>Blog</h1>
</div>
<div class="col-md-12">
    <div class="col-md-8">
        <div class="panel panel-default">
            <div class="panel-heading">
              <h3 >Cara partials view header, content, footer blade laravel</h3>
              <p><small>At : 10-10-2015</small>,<small>On : Laravel</small>,<small>Tag : Laravel</small></p>
            </div>
            <div class="panel-body">
              <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit..    
              </p>    
            </div>
            <div class="panel-footer">
                {!! HTML::link('/cara-partials-view-blader-laravel','Readmore',['class'=>'btn btn-info']) !!}
            </div>
        </div>
        <hr>
        <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 >Cara partials view header, content, footer blade laravel</h3>
                  <p><small>At : 10-10-2015</small>,<small>On : Laravel</small>,<small>Tag : Laravel</small></p>
                </div>
                <div class="panel-body">
                  <p>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit..    
                  </p>    
                </div>
                <div class="panel-footer">
                    {!! HTML::link('/cara-partials-view-blader-laravel','Readmore',['class'=>'btn btn-info']) !!}
                </div>
            </div>
        </div>
        
    @include('include.sidebar')

</div>

@endsection

Nah itu lah file-file partials templatenya. Selanjutnya kita buat router untuk mencoba melihat hasilnya di app->Http->routes.php

Routes.php

Route::get(‘/’, [‘as’=>’home’,function () {
return View::make(‘layouts.home’);
}]);

Route::get(‘/blog’, [‘as’=>’blogs’, function () {
return View::make(‘layouts.blog’);
}]);

Setelah semuanya sudah di buat maka folder + isinya akan seperti ini

struktur_folder_resource_view_laravel_finish

Nah selanjutnya jalankan di browser dengan link http://localhost/onmy/laravel_oprek/public/ ( sesuai dengan yang punya anda ).

Screenshoooooott ::

home-blade

blog-blade

Nah hasilnya seperti itu.

Ok Selesai sudah Cara partials views header, content, footer blade laravel.

Link Download Source Code

Vendor Laravel nya Link Download

Form dan HTML Laravel

About Whendy

Whendy Blog mengumpulkan beberapa Tutorial Website, PHP, AngularJS, JQuery, Laravel, Codeigniter dan lain-lain. ( jika sempat ) :)

18 comments

  1. Thanks for the blog. Awesome.

  2. Im grateful for the article post.Really thank you! Keep writing.

  3. Enjoyed every bit of your blog post.Really looking forward to read more. Awesome.

  4. I truly appreciate this article.Really looking forward to read more. Really Cool.

  5. This is one awesome blog.Really looking forward to read more. Cool.

  6. I truly appreciate this article post. Really Cool.

  7. Thanks again for the article post.Really thank you! Really Cool.

  8. Wow, great article.Really looking forward to read more. Will read on…

  9. Say, you got a nice blog post.Really looking forward to read more. Keep writing.

  10. wow, awesome blog post. Cool.

  11. Wow, great blog post. Will read on…

  12. Awesome and keep doing good work. visit my channel for fun time. … https://www.youtube.com/channel/UC8lXnImfKEjqFlTMo31sTqw/videos

  13. I see your website needs some unique content. Writing manually is time consuming,
    but there is tool for this task. Just search for; Digitalpoilo’s tools

  14. I must say you have very interesting content here.
    Your page can go viral. You need initial boost only. How to get it?
    Search for; Etorofer’s strategies

  15. I see your page needs some unique & fresh content. Writing manually is time consuming, but there is tool
    for this task. Just search for; Digitalpoilo’s tools

  16. I see your blog needs some fresh & unique articles.
    Writing manually is time consuming, but there is tool for this task.
    Just search for – Fasrixo’s tools

  17. You have got interesting content here. Your blog can go viral, you need some
    initial traffic only. How to get initial traffic??
    Search google for: Ferdeck’s tricks

  18. I see you don’t monetize your website, i’v got idea how to
    earn some extra cash using one simple method, just
    search in google for: Ferdeck’s tricks

Leave a Reply

Your email address will not be published. Required fields are marked *