/ / Cara Membagi Template Menjadi Beberapa Bagian di Laravel (Blade Templating)

Cara Membagi Template Menjadi Beberapa Bagian di Laravel (Blade Templating)

Blade Templating merupakan fitur yang ada dalam laravel yang berfungsi untuk membagi template menjadi beberapa bagian seperti bagian header, sidebar, content dan footer. Dengan membagi template menjadi beberapa bagian, maka kita akan menghemat jumlah kode dan memudahkan jika suatu saat kita akan mengedit konten yang ada dalam template.


CARA MELAKUKAN BLADE TEMPLATING DI LARAVEL

1. Pertama tama download template Admin LTE disini
2. Ekstrak file rar nya kemudian pindahkan buka folder AdminLTE-2.3.11 lalu copy folder bootstrap, build, dist, documentation, pages, dan plugin
3. Buat folder baru bernama admin pada project belajarlaravel di dalam folder public. jika anda belum membuat project, silahkan bara tutorial dari awal disini.

4. Buka folder admin tersebut dan pastekan folder folder yang tadi di copy yakni folder bootstrap, build, dist, documentation, pages, dan plugin



5. Buat folder admin di lokasi resources/view, kemudian dalam folder admin tersebut tambahkan 3 folder lagi dengan nama dashboard, include, dan layout.

6. Buat file dengan nama main.blade.php di dalam folder dashboard.


7. Buat file bernama header.blade.php, sidebar.blade.php dan footer.blade.php di dalam folder include


8. Buat file bernama master.blade.php di dalam folder layout


9. Nah, sekarang waktunya kita untuk membedah template menjadi beberapa bagian. Buka file starter.html yang ada pada folder AdminLTE-2.3.11.
10. copy code header dimulai dari <header class="main-header"> hingga </header> kemudian pastekan ke dalam file header.blade.php
11. copy kode sidebar dimulai dari <aside class="main-sidebar"> hingga </aside> kemudian pastekan ke dalam file sidebar.blade.php
12. copy kode footer dimulai dari <!-- Main Footer --> hingga <!-- ./wrapper --> kemudian pastekan ke dalam file footer.blade.php
13. copy code di bawah dan pastekan kedalam file master.blade.php 
<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>AdminLTE 2 | Starter</title>

  <!-- Tell the browser to be responsive to screen width -->

  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- Kode Css -->

    <link href="{{URL::asset('admin/bootstrap/css/bootstrap.min.css')}}"  rel="stylesheet"  type="text/css">

    <link href="{{URL::asset('admin/bootstrap/css/font-awesome.min.css')}}"  rel="stylesheet"  type="text/css" >

    <link href="{{URL::asset('admin/plugins/jvectormap/jquery-jvectormap-1.2.2.css')}}" rel="stylesheet"  type="text/css" >

    <link href="{{URL::asset('admin/dist/css/AdminLTE.min.css')}}" rel="stylesheet"  type="text/css" >

    <link href="{{URL::asset('admin/dist/css/skins/_all-skins.min.css')}}"  rel="stylesheet" >

    <link href="{{URL::asset('admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css') }}" rel="stylesheet" type="text/css">

    <link href="{{URL::asset('auth/images/logo.ico') }}" rel="SHORTCUT ICON" />

    <link href="{{URL::asset('admin/plugins/datatables/dataTables.bootstrap.css') }}" rel="s

 



  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

  <!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  <![endif]-->

</head>



<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">



  <!-- Main Header -->

  @include('admin.include.header')

  <!-- Left side column. contains the logo and sidebar -->

  @include('admin.include.sidebar')



  <!-- Content Wrapper. Contains page content -->

  @yield('content')

  <!-- /.content-wrapper -->



  <!-- Main Footer -->

  @include('admin.include.footer')

   

    <script src="{{ URL::asset('admin/plugins/jQuery/jQuery-2.1.4.min.js') }}"></script>   

    <script src="{{ URL::asset('admin/plugins/jQueryUI/jquery-ui.min.js') }}"></script>

    <script src="{{ URL::asset('admin/bootstrap/js/bootstrap.min.js') }}"></script>

   

   

    @yield('script')



 

   

   

<script src="{{ URL::asset('admin/plugins/raphael/raphael-min.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/morris/morris.min.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/sparkline/jquery.sparkline.min.js') }}"></script>  

<script src="{{ URL::asset('admin/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/jvectormap/jquery-jvectormap-world-mill-en.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/knob/jquery.knob.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/moment/moment.min.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/daterangepicker/daterangepicker.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/datepicker/bootstrap-datepicker.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') }}"></script>



<script src="{{ URL::asset('admin/plugins/fastclick/fastclick.min.js') }}"></script>

<script src="{{ URL::asset('admin/dist/js/app.min.js') }}"></script>

<script src="{{ URL::asset('admin/dist/js/pages/dashboard.js') }}"></script>

<script src="{{ URL::asset('admin/plugins/highcharts/highcharts.js') }}"></script>



  </body>

</html>
14. Copy kode main di bawah ini dan pastekan kedalam file main.blade.php
@extends('admin.layout.master')
@section('content')

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Page Header
        <small>Optional description</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Your Page Content Here -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  @stop

15. Nah, sekarang kita tinggal mengubah routenya, buka file routes.php yang berada di lokasi app/Http/routes.php nanti anda akan menemukan kode seperti di bawah


Route::get('/', function () { 


    return view('welcome');


});

Ubah kode tersebut menjadi seperti kode dibawah ini 

Route::get('/', function () {

    return view('admin.dashboard.main');
});


Selesai, untuk melihat hasil pekerjaan buka browser anda kemudian akses ke localhost/belajarlaravel/public. Jika muncul tampilan seperti di bawah ini, berarti anda berhasil melakukan blade templating di laravel.




1 Response to Cara Membagi Template Menjadi Beberapa Bagian di Laravel (Blade Templating)

Langganan: Posting Komentar (Atom)