DEV Community

Cover image for Integrate SB Admin 2 in Laravel
Rafli Zocky
Rafli Zocky

Posted on • Originally published at Medium

Integrate SB Admin 2 in Laravel

#php #laravel #webdev #bootstrap

Full code: raflizocky/laravel11-sbadmin2.

# Laravel 11 Requirements

php -v # >= 8.2
composer -v
node -v # >= v14.16
npm -v
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

3. Components

  • components/header.blade.php 
<head>
  ...
</head>
Enter fullscreen mode Exit fullscreen mode
  • components/footer.blade.php 
<footer class="sticky-footer bg-white">
    <div class="container my-auto">
        <div class="copyright text-center my-auto">
            <span>Copyright &copy; 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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');
    }
}
Enter fullscreen mode Exit fullscreen mode
  • routes/web.php: 
use App\Http\Controllers\DashboardController;
Route::get('/', [DashboardController::class, 'index']);
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)