Membuat Halaman Dashboard Laravel 9 : Tutorial blog

Membuat halaman dashboard. Setelah sebelumnya kita sudah integrasi halaman blog kita menggunakan bootstrap sehingga tampilan blog kita lebih rapi dan enak di lihat, sekarang kita akan membuat halaman dashboard dimana ketika kita login url aksesnya tidak lagi di home tetapi akan di redirect ke halaman dashboard dimana url sebelumnya jika kita sudah login adalah http://localhost:8000/home kita akan ubah menjadi http://localhost:8000/admin/dashboard.

Kenapa kita tambahkan prefix admin? agar kita tahu bahwa kita sedang mengakses halaman admin selain itu susunan direktori file juga nanti akan kita pisahkan antara admin dan frontend agar kita lebih mudah mengelompokan file yang kita akses.

Membuat Halaman Dashboard Laravel

Oke untuk membuat halaman dashboard, pertama kita buat dulu file controller Dashboard dengan cara mengetik perintah di terminal seperti di bawah ini :

php artisan make:controller Admin/DashboardController

cara membaca perintah di atas adalah “kita memerintahkan Artisan untuk membuat sebuah controller dengan nama DashboardController.php yang diletakkan dalam folder Admin yang dibuat secara otomatis oleh si artisan ini”. sekarang coba kalian buka direktori app/Http/controller/Admin/DashboardController.php nah itu adalah file yang baru saja dibuat oleh artisan secara otomatis dengan mengetik perintah sebelumnya.

Kemudian di dalam file DashboardController tambahkan code seperti di bawah ini letakkan di dalam class Dashboard Controller :

public function index()
    {
        return view('admin.dashboard.index');
    }

Sehingga file keseluruhan DashboardController adalah seperti ini :

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class DashboardController extends Controller
{
    public function index()
    {
        return view('admin.dashboard.index');
    }
}

lalu simpan file. Jika sudah kalian pergi ke direktori resources/views/ . lalu buat folder admin di dalam views kemudian buat lagi folder dashboard di dalam folder admin. kemudian pindahkan file home.blade.php ke folder dahsboard lalu rename file menjadi index.blade.php

Ubah kode yang ada di halaman index.blade.php menjadi seperti di bawah ini :

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    Ini Halaman Dashboard
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Seting Routes

Setelah semua proses di atas selesai sekarang kita akan mengatur file routes agar bisa di controller dashboard bisa akses buka file web.php yang ada di direktori routes kemudian ubah isinya menjadi seperti ini :

<?php

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Admin\DashboardController;

/*
|--------------------------------------------------------------------------
| 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');
});

Auth::routes();

Route::prefix('admin')->middleware(['auth'])->group(function () {
    Route::get('/dashboard', [DashboardController::class, 'index']);
});

Sekarang kalian Buka file “RouteServiceProvider.php” yang ada di direktori App/providers/RouteServiceProvider.php lalu ubah kode

public const HOME = 'home';

Menjadi

public const HOME = 'admin/dashboard';

Jika sudah silahkan save lalu jalankan php artisan serve dan jangan lupa aktifkan apache dan mysql yang ada di aplikasi xampp kemudian akses http://localhost:8000/login lalu silahkan login dengan akun kalian maka kalian akan di redirect ke url http://localhost:8000/admin/dashboard

Sekarang kita akan test authentikasinya silahkan klik nama akun yang ada di menu drop down di atas sebelah kanan kemudian klik logout. Lalu akses http://localhost:8000/admin/dashboard jika kalian di redirect ke halaman login, maka pembuatan halaman dashboard kita sudah berhasil.