Requirement
ComposerLaravel 5.3NPMBower
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
[Image]
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"
[Image]
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
[Image]
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. -->
[Image]
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.
posted by Brillian Musyafa at 1:13 PM on Nov 9, 2016
"Integrasi AdminLTE dengan Laravel 5.3"
No comments yet. -