Penggunaan Template Admin LTE pada Laravel 8

Admin LTE adalah salah satu template yang sering digunakan oleh web developer sebagai template backend pada proyek yang sering dikerjakan. Jadi admin LTE ini adalah sebuah dashboard Administrator dibuat menggunakan framework css bootstrap.

Cara menerapkan Admin LTE pada laravel

  1. Pertama kita harus sudah menginstall laravel terlebih dahulu, ikuti langkah install laravel di artikel di sini. Pada tutorial ini saya membuat project Laravel dengan nama adminltelaravel
  2. Download Admin LTE di sini
  3. Setelah didownload, buat folder template dalam folder public pada project laravel yang telah dibuat   
  4. Lalu ekstrak Admin LTE ke folder template di dalam folder public tadi
  5. Buat folder admin pada folder resources/views dan buat file v_admin.blade.php di dalam folder admin tersebut 
  6. Dengan menggunakan text editor, pada praktek ini saya menggunakan Visual Studio Code, buka file blank.html pada folder adminltelaravel\public\assets\pages\examples, copykan seluruh sintaknya lalu paste di file v_admin.blade.php.
  7. Edit route web.php pada folder route menjadi :
    Route::get('/', function () { 
        return view('admin/v_dmin'); 
    });
  8. Kita coba akses ke alamat localhost:8000, dan hasilnya masih berantakan seperti gambar di bawah, hal ini terjadi karena path dari css, javascript, dan sebagainya yang ada pada folder asset belum terpanggil
  9. Perbaiki path yang menghubungkan css, javascript dan sebagainya dengan cara me-Replace (Ctrl+H) sintak ../.. dengan {{asset(‘template’)}} . Perhatikan template, yang merupakan nama folder tempat tersimpannya file template Admin LTE, jika nama foldernya beda silahkan bisa disesuaikanReplace all dengan short cut Ctrl+Alt+Enter
  10. Selanjutnya akses lagi alamat localhost:8000, dan hasilnya halaman sudah berhasil tampil dengan baik

Setelah berhasil menampilkan template Admin LTE, selanjutnya kita sederhanakan tampilannya dengan cara membuang menu yang tidak diperlukan pada file v_admin.blade.php, disesuai dengan kebutuhan, menjadi seperti berikut :

dengan sintak :

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>E-Perpus | SMK Negeri 1 Cimahi</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{asset('template')}}/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="{{asset('template')}}/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>

<body class="hold-transition sidebar-mini">
    <!-- Site wrapper -->
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <!-- Left navbar links -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
                </li>
            </ul>

            <!-- SEARCH FORM -->
            <form class="form-inline ml-3">
                <div class="input-group input-group-sm">
                    <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn btn-navbar" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>

            <!-- Right navbar links -->
            <ul class="navbar-nav ml-auto">

                <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                    <div class="image">
                        <img src="{{asset('template')}}/dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                    </div>
                    <div class="info">
                        <a href="#" class="d-block">Alexander Pierce</a>
                    </div>
                </div>
            </ul>

        </nav>
        <!-- /.navbar -->

        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <!-- Brand Logo -->
            <a href="#" class="brand-link">
                <img src="{{asset('template')}}/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
                <span class="brand-text font-weight-light">E-Perpus
                    <p>SMK Negeri 1 Cimahi</p>
                </span>
            </a>

            <!-- Sidebar -->
            <div class="sidebar">
                <!-- Sidebar user (optional) -->


                <!-- Sidebar Menu -->
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                        <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-tachometer-alt"></i>
                                <p>
                                    Dashboard
                                </p>
                            </a>
                        </li>

                        <!-- Awal Menu PEMINJAMAN-->
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-random"></i>
                                <p>
                                    Peminjaman
                                </p>
                            </a>

                        </li>
                        <!-- Akhir Menu PEMINJAMAN-->

                        <!-- Awal Menu PENGEMBALIAN-->
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-check"></i>
                                <p>
                                    Pengembalian
                                </p>
                            </a>

                        </li>
                        <!-- Akhir Menu PENGEMBALIAN-->

                        <!-- Awal Menu BUKU-->
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-book"></i>
                                <p>
                                    Buku
                                    <i class="fas fa-angle-left right"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Tambah Buku</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Data Buku</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- Akhir Menu BUKU-->

                        <!-- Awal Menu ANGGOTA-->
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-users"></i>
                                <p>
                                    Anggota
                                    <i class="fas fa-angle-left right"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Tambah Anggota</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Data Anggota</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- Akhir Menu BUKU-->

                        <!-- Awal Menu PENULIS-->
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-edit"></i>
                                <p>
                                    Penulis
                                </p>
                            </a>
                        </li>
                        <!-- Akhir Menu PENULIS-->

                        <!-- Awal Menu PENERBIT-->
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-table"></i>
                                <p>
                                    Penerbit
                                </p>
                            </a>
                        </li>

                        <!-- Awal Menu RAK-->
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-suitcase"></i>
                                <p>
                                    Tempat Penyimpanan
                                </p>
                            </a>
                        </li>
                        <!-- Akhir Menu RAK-->

                        <!-- Awal Menu LAPORAN-->
                        <li class="nav-item has-treeview">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-chart-pie"></i>
                                <p>
                                    Laporan
                                    <i class="right fas fa-angle-left"></i>
                                </p>
                            </a>
                            <ul class="nav nav-treeview">
                                <li class="nav-item">
                                    <a href="../charts/chartjs.html" class="nav-link">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>ChartJS</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../charts/flot.html" class="nav-link">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Flot</p>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="../charts/inline.html" class="nav-link">
                                        <i class="far fa-circle nav-icon"></i>
                                        <p>Inline</p>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- Akhir Menu LAPORAN-->

                    </ul>
                </nav>
                <!-- /.sidebar-menu -->
            </div>
            <!-- /.sidebar -->
        </aside>

        <!-- AWAL KONTEN -->
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1 class="m-0 text-dark">Dashboard</h1>
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content-header -->

            <!-- Main content -->
            <section class="content">
                <div class="container-fluid">
                    <!-- Info boxes -->
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box">
                                <span class="info-box-icon bg-info elevation-1"><i class="fas fa-chart-pie"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">Buku</span>
                                    <span class="info-box-number">
                                        10
                                        <small>%</small>
                                    </span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                            <!-- /.info-box -->
                        </div>
                        <!-- /.col -->
                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box mb-3">
                                <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-random"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">Peminjaman</span>
                                    <span class="info-box-number">41,410</span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                            <!-- /.info-box -->
                        </div>
                        <!-- /.col -->

                        <!-- fix for small devices only -->
                        <div class="clearfix hidden-md-up"></div>

                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box mb-3">
                                <span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">Pengembalian</span>
                                    <span class="info-box-number">760</span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                            <!-- /.info-box -->
                        </div>
                        <!-- /.col -->
                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box mb-3">
                                <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">Anggota</span>
                                    <span class="info-box-number">2,000</span>
                                </div>
                                <!-- /.info-box-content -->
                            </div>
                            <!-- /.info-box -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->

            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
        <!-- AKHIR KONTEN-->


        <!-- AWAL FOOTER-->

        <footer class="main-footer">
            <div class="float-right d-none d-sm-block">
                <b>Version</b> 3.0.5
            </div>
            <strong>Copyright &copy; 2020 <a href="#">E-Perpus | SMK Negeri 1 Cimahi</a>.</strong> All rights
            reserved.
        </footer>

        <!-- AKHIR FOOTER-->

        <!-- Control Sidebar -->
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Control sidebar content goes here -->
        </aside>
        <!-- /.control-sidebar -->
    </div>


    <!-- ./wrapper -->

    <!-- jQuery -->
    <script src="{{asset('template')}}/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="{{asset('template')}}/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="{{asset('template')}}/dist/js/adminlte.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{{asset('template')}}/dist/js/demo.js"></script>
</body>

</html>

Selanjutnya dan kita buat template tersebut menjadi dinamis, dengan cara seperti berikut :

  1. Buat 3 file dalam folder admin pada folder resources/views yaitu v_header.blade.php, v_sidebar.blade.php, v_footer.blade.php
  2. Masuk ke v_admin.blade.php , kemudian cut code pada bagian Navbar, Kemudian paste ke dalam v_header.blade.php
  3. Masuk ke dalam v_admin.blade.php , tambahkan code @include(‘admin/v_header’) pada posisi Navbar yang dicut tadi untuk memanggil file v_header.blade.php
  4. Masuk ke v_admin.blade.php , kemudian cut code pada bagian Footer, Kemudian paste ke dalam v_footer.blade.php
  5. Masuk ke dalam v_admin.blade.php , tambahkan code @include(‘admin/v_footer’) pada posisi Footer yang dicut tadi untuk memanggil file v_footer.blade.php
  6. Masuk ke v_admin.blade.php , kemudian cut code pada bagian Sidebar, Kemudian Paste ke dalam v_sidebar.blade.php
  7. Masuk ke dalam v_admin.blade.php , tambahkan code @include(‘admin/v_sidebar’) pada posisi Sidebar yang dicut tadi untuk memanggil file v_sidebar.blade.php

Add Comment

error: Ga bisa dicopy