Header Ads

Breaking News
recent
Home Laravel Cara partials views header, content, footer blade laravel

Cara partials views header, content, footer blade laravel

Saturday, October 17, 2015
Cara partials view header, content, footer blade laravel gimana sih.? Masih bingung dengan blade nya laravel.? sama  :lol:  , 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
Tags :

3 comments:

  1. SophiaMay 13, 2016 at 10:30 AM

    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

    ReplyDelete
  2. JimmyJune 10, 2016 at 4:24 AM

    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

    ReplyDelete
  3. IndiraLvsrtdOctober 27, 2016 at 6:55 PM

    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

    ReplyDelete

Subscribe to: Post Comments ( Atom )
Powered by Blogger.