Thursday, 9 November 2017

Menambahkan Template Admin Pada Laravel


Kali ini kita masih akan membahas tentang laravel, yaitu cara menambahkan template admin pada laravel....
Dalam membangun sebuah website tentunya selain memerlukan keterampilan juga memerlukan waktu yang lumayan banyak apabila kita membuat sebuah website dari nol dengan mengetikan setiap kodingnya dari awal. untuk menghemat waktu tersebut tentunya kita dapat memanggil atau menambahkan template yang sudah umum seperti contohnya template untuk admin, untuk menampilkan content, thema, dll. baik yang telah kita buat sebelumnya maupun menggunakan template  yang banyak bersebaran di internet secara gratis maupun yang berbayar.

Oke Kali ini yang akan saya ujicoba kan adalah menambahkan template admin LTE Pada Laravel.

Admin LTE itu sendiri 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.


Beberapa Features Template Admin LTE diantaranya :

  • Bootstrap (sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website)
  • 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)

Cara Memasangkan Template Admin LTE pada laravel :
1. Pertama download template admin LTE atau dari webnya, atau klik disini 
2. Kemudian Pindahkan File template admin LTE tadi ke folder project laravel "C:\xampp\htdocs\project2\public" Kemudian paste kan di dalam folder Public nya.
Kemudian Rename dengan nama assets 

3.      Selanjutnya Buat file adminlte.blade.php pada folder resources/views untuk Tampilan adminLTE.

4.    kemudian isi file adminlte.blade.php dengan dengan source kode dari file index.php dari folder assets yang hasil rename tadi.

5.      Selanjutnya Rubah semua alamat link .css maupun .js dengan alamat folder lokasi css nya agar css dapat ditemukan.
Contoh :
link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"
Kemudian dirubah Menjadi <link rel="stylesheet" href="{{url('/asset/bower_components/bootstrap/dist/css/bootstrap.min.css')}}">


6.   Selanjutnya untuk mempermudah pengorganisasian halaman, Kelompokkan bagian dari adminLTE tersebut menjadi head, header, content, sidebar, footer, dan script sehingga apabila telah di kelompokan, kita hanya tingal terfokus pada content, dan tidak perlu melakukan banyak perubahan ketika akan menambahkan halaman, untuk header, content, sidebar, footer, script dll hanya tinggal di include saja. Contohnya untuk header Buat folder template dan buat file head.blade.php kemudian copy sintaks header pada admintle diantara sintaks <head>..</head>
Lakukan Hal yang sama untuk bagian content, sidebar, footer, dll..

7. dan Pada file adminlte.blade.php kita tambahkan include file yang telah dibuat. Untuk memanggil file kita gunakan include.


8.  Selanjutnya tambahkan routing pada  web.php di laravel pada folder routes dan tambahakan sintak berikut :
Route::get('/adminlte', function () {
 return view('adminlte');
          });

Kemudian akses di browser


Layout Admin LTE Telah Berhasil di integrasikan dengan Framework Laravel, Selanjuntya kita akan mencoba untuk memasukan konten pada template tersebut dengan menggunakan perintah php artisan. 
PHP Artisan itu sendiri adalah perintah-perintah yang dijalankan dalam command line/command prompt, perintah tersebut digunakan untuk membuat Controller, Model, Middleware, Request dan lain-lain
berkut perintahnya :

1.  Sesuai dengan pengertiannya yaitu perintah menggunakan cmd tentunya petama kita buka cmd, kemudian Masukan perintah berikut berikut :

Php artisan make:controller DataBarangController --resource

apabila berhasil, maka akan ada file databarang di folder  app/http/controller
2. Kemudian pada folder views, kita buat folder databarang. Dalam folder data barang buat  file index.blade.php
Perintahnya :
@extends('adminlte')

@section('content')
 <h1>Ini Contoh Halaman Menggunakan template. </h1>

@endsection

3.  Selanjutnya Tambahkan routing kembali dengan cara Buka kembali file web.php pada folder routes kemudian tambahkan Perintah routing untuk memanggil databarang berikut untuk memanggilnya.
  
Route::resource(‘/databarang’,’DataBarangController’);


4.  Kemudian akses alamat ocalhost/project2/public/databarang di browser . Apabila Berhasil maka akan muncul tampilan seperti di bawah..
Untuk kali ini dicukupkan sekian terlebih dahulu, semoga materi ini dapat bermanfaat bagi pembaca pada umumnya dan khususnya bagi penulis itu sendiri...
Terima Kasih atas perhatiannya... Tunggu Materi Selanjutnya di minggu depan ;)


No comments:

Post a Comment