In this section we will see how to Set up and Use Material Design UI Dashboard in laravel 9 Using laravel-frontend-presets/material-dashboard Package and laravel ui.
Step 1: Create Laravel Project
Installing a fresh new laravel application, so head over to the terminal, type the command, and create a new laravel app.
composer create-project laravel/laravel material-dashboard
Step 2: Connect Database
Now, you have to connect the laravel app to the database, hence open the .env configuration file and add the database credentials as suggested below.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
Step 3: Install Laravel UI
Run below command to install laravel ui.
composer require laravel/ui
Step 4: Install laravel-frontend-presets/material-dashboard
Install laravel-frontend-presets/material-dashboard via composer.
composer require laravel-frontend-presets/material-dashboard
Run php artisan ui material command to install the Material preset. This will install all the necessary assets and also the custom auth views, it will also add the auth route in routes/web.php
php artisan ui material
clean up the duplicate Auth entries.
composer dump-autoload
Run migrate with seeder
php artisan migrate:fresh --seed
Check routes in routes/web.php
web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
use App\Http\Controllers\DashboardController;
use App\Http\Controllers\ProfileController;
use App\Http\Controllers\RegisterController;
use App\Http\Controllers\SessionsController;
Route::get('/', function () {return redirect('sign-in');})->middleware('guest');
Route::get('/dashboard', [DashboardController::class, 'index'])->middleware('auth')->name('dashboard');
Route::get('sign-up', [RegisterController::class, 'create'])->middleware('guest')->name('register');
Route::post('sign-up', [RegisterController::class, 'store'])->middleware('guest');
Route::get('sign-in', [SessionsController::class, 'create'])->middleware('guest')->name('login');
Route::post('sign-in', [SessionsController::class, 'store'])->middleware('guest');
Route::post('verify', [SessionsController::class, 'show'])->middleware('guest');
Route::post('reset-password', [SessionsController::class, 'update'])->middleware('guest')->name('password.update');
Route::get('verify', function () {
return view('sessions.password.verify');
})->middleware('guest')->name('verify');
Route::get('/reset-password/{token}', function ($token) {
return view('sessions.password.reset', ['token' => $token]);
})->middleware('guest')->name('password.reset');
Route::post('sign-out', [SessionsController::class, 'destroy'])->middleware('auth')->name('logout');
Route::get('profile', [ProfileController::class, 'create'])->middleware('auth')->name('profile');
Route::post('user-profile', [ProfileController::class, 'update'])->middleware('auth');
Route::group(['middleware' => 'auth'], function () {
Route::get('billing', function () {
return view('pages.billing');
})->name('billing');
Route::get('tables', function () {
return view('pages.tables');
})->name('tables');
Route::get('rtl', function () {
return view('pages.rtl');
})->name('rtl');
Route::get('virtual-reality', function () {
return view('pages.virtual-reality');
})->name('virtual-reality');
Route::get('notifications', function () {
return view('pages.notifications');
})->name('notifications');
Route::get('static-sign-in', function () {
return view('pages.static-sign-in');
})->name('static-sign-in');
Route::get('static-sign-up', function () {
return view('pages.static-sign-up');
})->name('static-sign-up');
Route::get('user-management', function () {
return view('pages.laravel-examples.user-management');
})->name('user-management');
Route::get('user-profile', function () {
return view('pages.laravel-examples.user-profile');
})->name('user-profile');
});
Step 5: Test Material Dashboard in Laravel 9
Register new user and check material dashboard theme
http://localhost:8000/register
http://localhost:8000/dashboard
For more Information vist https://github.com/laravel-frontend-presets/material-dashboard