Giao diện Admin – không còn khó khăn nữa
1. Infyom
Mình có một bài hướng dẫn chi tiết về giao diện admin này. Bài viết Thiết kế giao diện quản trị admin nhanh với Laravel và thư viện Infyom.
2. SB Admin 2
2.1 Thông tin giao diện
- Giới thiệu và download: https://startbootstrap.com/themes/sb-admin-2/
- Demo: https://blackrockdigital.github.io/startbootstrap-sb-admin-2/
2.2 Sử dụng với Laravel
Đầu tiên bạn tải file này về: https://drive.google.com
- Các thư mục css, js, include các bạn đưa vào thư mục public/admin của laravel. Nếu chưa có thư mục admin thì bạn tạo thư mục mới nhé.
- app.blade.php bạn đưa vào resource/view/template của Laravel. Cũng vậy nếu chưa có thư mục template thì bạo tạo thư mục template nhé.
Tại file cần sử dụng bạn thay thế các giá trị phù hợp là được. Nhưng nhớ là phải extends nó nhé như code bên dưới này!
@extends('template.app')
@section('title-page')
Quản Trị - Admin
@endsection
@section('title-content-page')
{{--Quản Trị--}} Thực Tập
@endsection
@section('title-content-page-link')
{{ asset('/') }}
@endsection
@section('copyright')
Khoa Kỹ thuật và Công nghệ
@endsection
@section('css')
@endsection
@section('menu')
@endsection
@section('user-name')
Quản Trị Viên
@endsection
@section('src-img')
https://weplus.vn/wp-content/uploads/avatars/1/5d6dee5365c67-bpthumb.png
@endsection
@section('content')
@endsectionBạn có thể tự thiết kế menu, hoặc có thể sử dụng có sẵn của theme này bằng code bên dưới.
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Components</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</li>
<!-- Nav Item - Utilities Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
<i class="fas fa-fw fa-wrench"></i>
<span>Utilities</span>
</a>
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Utilities:</h6>
<a class="collapse-item" href="utilities-color.html">Colors</a>
<a class="collapse-item" href="utilities-border.html">Borders</a>
<a class="collapse-item" href="utilities-animation.html">Animations</a>
<a class="collapse-item" href="utilities-other.html">Other</a>
</div>
</div>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Addons
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Login Screens:</h6>
<a class="collapse-item" href="login.html">Login</a>
<a class="collapse-item" href="register.html">Register</a>
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Other Pages:</h6>
<a class="collapse-item" href="404.html">404 Page</a>
<a class="collapse-item" href="blank.html">Blank Page</a>
</div>
</div>
</li>
<!-- Nav Item - Charts -->
<li class="nav-item">
<a class="nav-link" href="charts.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Charts</span></a>
</li>
<!-- Nav Item - Tables -->
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span></a>
</li>