PENGGUNAAN TEMPLATE ADMINLTE PADA LARAVEL
1. PENGERTIAN ADMINLTE
AdminLTE adalah salah satu template yang paling sering
digunakan oleh web developer sebagai backend template pada proyek yang sedang
dikerjakan. template ini dibuat menggunakan framework bootsrap yang
merupakan framework CSS yang paling banyak digunakan di kalangan web desainer
sekarang. pada artikel ini kita akan belajar bagaimana cara menjadikan menu
pada template adminLTE agar menjadi dinamis dengan data berasal dari database.
2. PENGGUNAAN TEMPLATE ADMINLTE PADA LARAVEL
2. PENGGUNAAN TEMPLATE ADMINLTE PADA LARAVEL
- Langkah pertama download AdminLTE, kemudian ganti nama folder AdminLTE tersebut dengan nama assets dan pindahkeun foldernya pada xampp/htdocs/[nama-project]/public.
- Selanjutnya buat file baru dengan nama adminlte.blade.php dan simpan pada xampp/htdocs/[nama-project]/resources/views.
- Langkah berikutnya buka file index.html yang terdapat pada folder assets dengan menggunakan notepad++, atom atau bisa dengan yang lainnya dan pindahkan sintaksnya ke dalam file adminlte.blade.php yang sebelumnya sudah dibuat.
- Kemudian ubah semua sintaks yang berekstensi .css seperti pada gambar dibawah ini :
menjadi :
- Dan ubah juga semua sintaks yang berekstensi .js seperti pada gambar di bawah ini :
menjadi :
- Setelah itu bagi sintaks yang ada pada file AdminLTE.blade.php tersebut ke dalam beberapa bagian (head, header, sidebar, dan content). terlebih dahulu buat folder pada xampp/htdocs/[nama-project]/resources/views dengan nama folder template.
- Head
Pada file AdminLTE.blade.php pindahkan diantara sintaks :
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
sampai dengan sintaks :
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
ke dalam file baru dengan nama head.blade.php dan simpan file tersebut pada folder template yang sebelumnya sudah dibuat. Lalu gantikan sintaks pada file AdminLTE.blade.php yang sebelumnya sudah pindahkan ke dalam file head.blade.php tersebut menjadi :
<!DOCTYPE html>
<html>
<head>
@include('template.head')
</head>
- Header
Pada file AdminLTE.blade.php pindahkan diantara sintaks :
<header class="main-header">
sampai dengan sintaks :
</header>
ke dalam file baru dengan nama header.blade.php dan simpan file tersebut pada folder template yang sebelumnya sudah dibuat. Lalu gantikan sintaks pada file AdminLTE.blade.php yang sebelumnya sudah pindahkan ke dalam file header.blade.php tersebut menjadi :
<header class="main-header">
@include('template.header')
</header>
- Sidebar
Pada file AdminLTE.blade.php pindahkan diantara sintaks :
<aside class="main-sidebar">
sampai dengan sintaks :
</aside>
ke dalam file baru dengan nama siderbar.blade.php dan simpan file tersebut pada folder template yang sebelumnya sudah dibuat. Lalu gantikan sintaks pada file AdminLTE.blade.php yang sebelumnya sudah pindahkan ke dalam file sidebar.blade.php tersebut menjadi :
aside class="main-sidebar">
@include('template.sidebar')
</aside>
- Content
Pada file AdminLTE.blade.php pindahkan diantara sintaks :
<div class="content-wrapper">
sampai dengan sintaks :
</div>
ke dalam file baru dengan nama content.blade.php dan simpan file tersebut pada folder template yang sebelumnya sudah dibuat. Lalu gantikan sintaks pada file AdminLTE.blade.php yang sebelumnya sudah pindahkan ke dalam file content.blade.php tersebut menjadi :
<div class="content-wrapper">
@yield('tempalte content')
</div>
- Setelah itu buka file web.php pada xampp/htdocs/[nama-project]/routes dan masukan sintaks sebagai berikut :
Route::get('/adminlte', function () {
return view('adminlte');
- Pada langkah ini kita sudah bisa menggunakan template AdminLTE pada laravel dan bisa di akses pada browser dengan memasukan perintah localhost/[nama-project]/public/adminlte dan hasilnya akan tampil seperti gambar dibawah ini :
Komentar
Posting Komentar