Tutorial Integrasi AdminLTE dengan Laravel 5.3

Requirement

  1. Composer
  2. Laravel 5.3
  3. NPM
  4. Bower

Install Laravel 5.3

Jalankan command prompt, install fresh laravel dengan menggunakan :

laravel install Blog

Jika error, berarti settingan environtmen laravel belum diatur.
Jalankan php artisan serve
Masuk ke localhost:8000

 
Laravel 5.3

Install AdminLTE dengan Bower

Cari package adminlte dengan menggunakan:

bower search adminlte Hasil pencarian bower:

adminlte https://github.com/almasaeed2010/AdminLTE.gitAdminLTE-tc https://github.com/tofucake/AdminLTE.gitadminlte.cg https://github.com/ChristosGeorgiou/adminlte.gitadminltex https://github.com/shinkarenko/AdminLTE.gitadminlte-rtl https://github.com/mmahrous/AdminLTE-RTL.gitadminlte_rtl https://github.com/airani/adminlte-rtl.gitadminlte-bower https://github.com/bluemanos/adminlte-bower.gitadmin-lte https://github.com/almasaeed2010/AdminLTE.gitadminlte-360fonts https://github.com/shibamudi/AdminLTE.gitadmin-lte-rtl https://github.com/airani/AdminLTE.gitAdminLTE-angular-sass https://github.com/BookingBug/AdminLTE-angular-sass.gitadmin-lte.scss https://github.com/aguegu/AdminLTE.gitadmin-lte-sass https://github.com/Poolshark/AdminLTE.gitangular-nadobit-adminlte https://github.com/nadobit/angular-nadobit-adminlte.gitcise-cpanel https://github.com/tq0fqeu/AdminLTE.git

Cari package yang resmi dari adminlte sendiri. bisa di cek akun githubnya atau web officialnya di almsaeedstudio.com. Pilih yang:

adminlte https://github.com/almasaeed2010/AdminLTE.git

atau

admin-lte https://github.com/almasaeed2010/AdminLTE.git

Langkah – langkah membuat view untuk layout adminlte
Buat folder Layout
Buat file baru. misal adminlte_layout.blade.php

Convert starter.html ke blade layout

Copy code starter.html dari “/Blog/public/bower_components/” ke “/Blog/resources/views/layouts/adminlte_layout.blade.php”

 
Struktur adminlte di bower public

Buat Route untuk preview template

 

Route::get(‘/starter’,function(){ return view(‘layouts.adminlte_layout’); });

Lihat template kita. Jalankan php artisan serve untuk running. Masuk ke localhost:8000/starter

 
Adminlte tampilan berantakan

Ya, akan terlihat tampilan web kita yang berantakan. Ini disebabkan karena file css dan jsnya belum tersinkronisasi dengan app kita.

Mari kita betulkan.

Install package laravelcollective
composer require “laravelcollective/html”:”^5.3.0″
Kemudian, tambahakan provider baru di config/app.php:
‘providers’ => [
// …
Collective\Html\HtmlServiceProvider::class,
// …
],Terakhir, tambahkan dua class alias di config/app.php:
‘aliases’ => [
// …
‘Form’ => Collective\Html\FormFacade::class,
‘Html’ => Collective\Html\HtmlFacade::class,
// …
],Ubah code di adminlte_layout.blade.php. Gunakan
Untuk sintax CSS
{!! Html::style(‘file.css’) !!}Untuk sintax js
{!! Html::script(‘file.js’) !!CSS
<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”>
<!– Bootstrap 3.3.6 –>
<!– <link rel=”stylesheet” href=”bootstrap/css/bootstrap.min.css”> –>
{!! Html::style(‘bower_components/AdminLTE/bootstrap/css/bootstrap.min.css’) !!}
<!– Font Awesome –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css”>
<!– Ionicons –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css”>
<!– Theme style –>
<!– <link rel=”stylesheet” href=”dist/css/AdminLTE.min.css”> –>
{!! Html::style(‘bower_components/AdminLTE/dist/css/AdminLTE.min.css’) !!}
<!– AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect.
–>
<!– <link rel=”stylesheet” href=”dist/css/skins/skin-blue.min.css”> –>
{!! Html::style(‘bower_components/AdminLTE/dist/css/skins/skin-blue.min.css’) !!}
<!– 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>
Javascript

<!– ./wrapper –>
<!– REQUIRED JS SCRIPTS –>
<!– jQuery 2.2.3 –>
<!– <script src=”plugins/jQuery/jquery-2.2.3.min.js”></script> –>
{!! Html::script(‘bower_components/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js’) !!}
<!– Bootstrap 3.3.6 –>
<!– <script src=”bootstrap/js/bootstrap.min.js”></script> –>
{!! Html::script(‘bower_components/AdminLTE/bootstrap/js/bootstrap.min.js’) !!}
<!– AdminLTE App –>
<!– <script src=”dist/js/app.min.js”></script> –>
{!! Html::script(‘bower_components/AdminLTE/dist/js/app.min.js’) !!}
<!– Optionally, you can add Slimscroll and FastClick plugins.
Both of these plugins are recommended to enhance the
user experience. Slimscroll is required when using the
fixed layout. –>

Integrasi adminlte dengan laravel

Refresh browser. Hasil dari integrasi adminlte dengan laravel 5.3

Tambahan untuk konten kita bisa menambahkan @yield(‘conten’). Cari code Content Wrapper.

<!– Content Wrapper. Contains page content –>
<div class=”content-wrapper”>
<!– Content Header (Page header) –>
<section class=”content-header”>
@yield(‘page_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 –>
@yield(‘content’)
</section>
<!– /.content –>
</div>
<!– /.content-wrapper –>
@yield . @yield digunakan untuk mendefinisikan isi konten kita nantinya.
@section @section digunakan untuk mendefinisikan section konten.

Leave a Reply

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