Full code: raflizocky/laravel11-sbadmin2.
# Laravel 11 Requirements
php -v # >= 8.2
composer -v
node -v # >= v14.16
npm -v
Laravel
Start Apache & MySQL in your web server.
# install laravel 11
composer create-project "laravel/laravel:^11.0" example-app
# or you can use laravel installer
composer global require laravel/installer
laravel new example-app
# .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=your_password
# migrate & serve
php artisan migrate
php artisan serve
SB Admin 2
1. Download
Extract and rename it to sbadmin2 (or others) and move it to Laravel's public folder.
2. Base Layout
Inside resources/views, create a new folder components and a new file layout.blade.php. Open index.html, copy its content, and paste it into layout.blade.php.
Update all asset paths (CSS, JS, images):
<!-- Change from: -->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
<!-- To: -->
<link href="{{ asset('sbadmin2/css/sb-admin-2.min.css') }}" rel="stylesheet">
3. Components
-
components/header.blade.php
<head>
...
</head>
-
components/footer.blade.php
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2021</span>
</div>
</div>
</footer>
<script src="{{ asset('sbadmin2/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('sbadmin2/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('sbadmin2/vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<script src="{{ asset('sbadmin2/js/sb-admin-2.min.js') }}"></script>
<script src="{{ asset('sbadmin2/vendor/chart.js/Chart.min.js') }}"></script>
<script src="{{ asset('sbadmin2/js/demo/chart-area-demo.js') }}"></script>
<script src="{{ asset('sbadmin2/js/demo/chart-pie-demo.js') }}"></script>
-
components/sidebar.blade.php— continue... components/topbar.blade.php— continue...layout.blade.php
<!DOCTYPE html>
<html lang="en">
<x-header></x-header>
<body id="page-top">
<div id="wrapper">
<x-sidebar></x-sidebar>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<x-topbar></x-topbar>
<div class="container-fluid">
{{ $slot }}
</div>
</div>
<x-footer></x-footer>
</div>
</div>
</body>
</html>
4. Dashboard
-
app/Http/Controllers/DashboardController.php:
# php artisan make:controller DashboardController
<?php
namespace App\Http\Controllers;
class DashboardController extends Controller
{
public function index()
{
return view('dashboard.index');
}
}
-
routes/web.php:
use App\Http\Controllers\DashboardController;
Route::get('/', [DashboardController::class, 'index']);
-
resources/views/dashboard/index.blade.php:
<x-layout>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
</div>
<div class="row">
...
</div>
</x-layout>
Need help building your app?
I'm available for freelance web & Android development — raflizocky.netlify.app
☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky