Apa itu AdminLTE?
Admin LTE merupakan sebuah template yang dibangun dengan framework css Bootstrap. Author template ini Abdullah Almsaeed membagikan Template Admin LTE ini secara gratis dengan lisensi MIT. MIT(Massachusetts Institute of Technology) artinya kita berhak untuk menggunakan, mengubah, menggandakan, menggabungkan, menerbitkan dan menjual duplikasi template ini. Lisensi ini hanya mewajibkan pengguna untuk menyertakan lisensi dan copyright si pembuat pada kode yang didistribusikan ulang dan tidak ada larangan untuk menggunakan trademark dari si pembuat asli.
Features Template Admin LTE:
- Bootstrap
- Font Awesome
- jQuery-Autocomplete
- FullCalendar
- Charts.js
- Bootstrap Colorpicker
- Cropper
- dataTables
- Date Range Picker for Bootstrap
- Dropzone
- easyPieChart
- ECharts
- bootstrap-wysiwyg
- Flot – Javascript plotting library for jQuery.
- gauge.js
- iCheck
- jquery.inputmask plugin
- Ion.RangeSlider
- jQuery
- jVectorMap
- moment.js
- Morris.js – pretty time-series line graphs
- PNotify – Awesome JavaScript notifications
- NProgress
- Pace
- Parsley
- bootstrap-progressbar
- select2
- Sidebar Transitions – simple off-canvas navigations
- Skycons – canvas based wather icons
- jQuery Sparklines plugin
- switchery – Turns HTML checkbox inputs into beautiful iOS style switches
- jQuery Tags Input Plugin
- Autosize – resizes text area to fit text
- validator – HTML from validator using jQuery
- jQuery Smart Wizard
Browser Support
- IE 9+
- Firefox (latest)
- Chrome (latest)
- Safari (latest)
- Opera (latest)
Preview
Untuk persiapan membuat templating sederhana menggunakan laravel ini, berikut yang perlu di siapkan :
1. Download template AdminLTE. Jika sudah, pindahkan folder AdminLTE tersebut ke xampp\htdocs\kel4\public\assets. Disini yang sebelumnya nama foldernya AdminLTE di rename menjadi folder assets.
2. Setelah itu buka folder assets, dan klik pada index.html. Bisa dibuka menggunakan Notepad++ atau yang lainnya.
3. Kemudian buat file baru di notepad++ yaitu adminlte.blade.php yang disimpan pada xampp\htdocs\kel4\resources\views. Setelah itu copy sintaks yang ada di index.html ke adminlte.blade.php.
4. Dari sintaks diatas dibagi menjadi beberapa bagian head, header, sidebar dan content.
Kemudian di file adminlte.blade.php cari sintaks .css dibawah ini.
<link
rel="stylesheet"
href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet"
href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
href="bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet"
href="dist/css/AdminLTE.min.css">
|
Ubah menjadi seperti ini
<link
rel="stylesheet"
href="{{url('/assets/bower_components/bootstrap/dist/css/bootstrap.min.css')}}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{url('/assets/bower_components/font-awesome/css/font-awesome.min.css')}}">
<!-- Ionicons -->
<link rel="stylesheet"
href="{{url('/assets/bower_components/Ionicons/css/ionicons.min.css')}}">
<!-- Theme style -->
<link rel="stylesheet"
href="{{url('/assets/dist/css/AdminLTE.min.css')}}">
|
Dan sintaks .js paling bawah
<script
src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4
-->
<script
src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in
jQuery UI tooltip with Bootstrap tooltip -->
|
Ubah menjadi seperti ini
<script
src="{{url('/assets/bower_components/jquery/dist/jquery.min.js')}}"></script>
<!-- jQuery UI 1.11.4
-->
<script
src="{{url('/assets/bower_components/jquery-ui/jquery-ui.min.js')}}"></script>
<!-- Resolve conflict in
jQuery UI tooltip with Bootstrap tooltip -->
|
Selanjutnya sintaks kode adminlte.blade.php kita bagi ke dalam beberapa bagian yaitu head, header, sidebar dan content. Sebelumnya kita buat folder template terlebih dahulu pada xampp\htdocs\kel4\resources\views. Pertama kali kita ambil sintaks untuk head.
Head
Ambil atau cut di adminlte.blade.php diantara tanda <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>AdminLTE 2 | Dashboard</title><!-- Tell the browser to be responsive to screen width -->
Sampai dengan tanda <!-- 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]--><!-- Google Font --><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
Dan pastekan ke head.blade.php.
Di dalam file adminlte.blade.php yang sintaks kodenya kita ambil tadi ganti sintaksnya menjadi seperti dibawah ini.
Masih di adminlte.blade.php kali ini kita akan mengambil sintaks untuk header.blade.php
Header
Ambil atau cut di adminlte.blade.php diantara tanda <header class="main-header">
Sampai dengan tanda </header>.
Dan pastekan ke header.blade.php.
Di dalam file adminlte.blade.php yang sintaks kodenya kita ambil tadi ganti sintaksnya menjadi seperti dibawah ini.
Sidebar
Ambil atau cut di adminlte.blade.php diantara tanda <aside class="main-sidebar">
Sampai dengan tanda <!-- /.sidebar --> </aside>
Dan pastekan ke sidebar.blade.php.
Di dalam file adminlte.blade.php yang sintaks kodenya kita ambil tadi ganti sintaksnya menjadi seperti dibawah ini.
Content
Ambil atau cut di adminlte.blade.php diantara tanda <!-- Content Header (Page header) --><section class="content-header"> <h1>Dashboard<small>Control panel</small> </h1>
Sampai dengan tanda </section> <!-- /.content -->
Dan pastekan ke content.blade.php.
Di dalam file adminlte.blade.php yang sintaks kodenya kita ambil tadi ganti sintaksnya menjadi seperti dibawah ini.
Apabila sudah selesai semua, pada xampp\htdocs\kel4\routes buka web.php ketikan sintak seperti berikut.
Dan pada tahap ini kita sudah dapat melihat hasil percobaan. Pada browser ketik url berikut ini localhost/kel4/public/adminlte
1. Setelah itu buka Commad Prompt kemudian ketikan sintaks seperti ini untuk membuat data barang.
2. Kemudian pada xampp\htdocs\kel4\app\Http\Controllers buat file dengan nama DataBarangController.php.
3. Pada xampp\htdocs\kel4\resources\views buat folder data-barang buat file dengan nama index.blade.php dan simpan. Dengan sintaks seperti ini
4. Setelah itu pada web.php tambahkan sintaks berikut.
5. Dan pada tahap ini kita sudah dapat melihat hasil percobaan. Pada browser ketik url berikut ini localhost/kel4/public/data-barang.
