Membuat Login dan Register di Laravel Dengan Ajax dan Bootstrap 4 : Halaman Dashboard


Membuat Login dan Register di Laravel Dengan Ajax dan Bootstrap 4 : Halaman Dashboard

Membuat Login dan Register di Laravel Dengan Ajax dan Bootstrap 4 : Halaman Dashboard - Halo teman-teman semuanya, di artikel sebelumnya kita semua telah berhasil membuat Proses login di Laravel menggunakan Ajax.

Dari proses login yang sukses maka secara otomatis kita akan diarahkan ke dalaman dashboard. Maka pada kesempatan kali ini kita semua akan belajar membuat halaman dashboard yang mana halaman ini hanya bisa diakses setelah melakukan proses login.

Langsung saja, silahkan kalian jalankan perintah dibawah ini :

php artisan make:controller DashboardController

Dari perintah yang sudah kalian jalankan diatas, kalian akan membuat sebuah controller baru di dalam folder app/Http/controllers dengan nama DashboardController.php.

Silahkan kalian buka file DashboardController.php dan silahkan kalian ganti kodenya menjadi seperti berikut ini :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Auth;

class DashboardController extends Controller
{
    /**
     * DashboardController constructor.
     */
    public function __construct()
    {
        $this->middleware('auth');
    }


    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function index()
    {
        return view('dashboard');
    }


    /**
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse|\Illuminate\Routing\Redirector
     */
    public function logout(Request $request) {
        Auth::logout();
        return redirect(route('login'));
    }
}

Dari kode yang sudah kita ubah diatas, kita membuat sebuah 3 fungsi baru yaitu :

  • fungsi __construct - fungsi ini akan selalu dipanggil pertama kali saat Class DashboardController diajalankan, oleh sebab itu kita menambahkan sebuah middleware auth didalamnya untuk mengecek apakah ada User yang login atau tidak saat memanggil Class DashboardController ini.
  • fungsi index - fungsi ini digunakan untuk menampilkan halaman dashboard di web browser kita
  • fungsi logout - fungsi ini digunakan untuk keluar dari aplikasi kita dengan cara menghapus session.

Oke sekarang silahkan buat file baru di dalam folder resources/views dengan nama dashboard.blade.php dan silahkan masukkan kode dibawah ini :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <title>Dashboard</title>
</head>
<body>

<div class="container" style="margin-top: 50px">
    <div class="row">

        <div class="col-md-3">
            <ul class="list-group">
                <li class="list-group-item active">MAIN MENU</li>
                <a href="{{ route('dashboard.index') }}" class="list-group-item" style="color: #212529;">Dashboard</a>
                <li class="list-group-item">Profile</li>
                <a href="{{ route('dashboard.logout') }}" class="list-group-item" style="color: #212529;">Logout</a>
            </ul>
        </div>

        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                    <label>DASBOARD</label>
                    <hr>

                    Selamat Datang {{ Auth::user()->name }}

                </div>
            </div>
        </div>

    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
</body>
</html>

Terakhir kita buat sebuah route untuk menampilkan halaman Dashboard kita, silahkan buka file web.php di dalam folder routes dan silahkan kalian tambahkan baris kode dibawah ini :

Route::get('/dashboard', 'DashboardController@index')->name('dashboard.index');
Route::get('/logout', 'DashboardController@logout')->name('dashboard.logout');

Oke sekarang coba kalian melakukan proses login, dan jika kalian berhasil maka kalian akan diarahkan secara otomatis dalam waktu 3 Detik ke halaman Dashboard, kurang lebih seperti gambar dibawah ini :


Oke mungkin sampai disini dulu pembahasan tentang Membuat Proses Register dan Login di Framework Laravel Menggunakan Ajax.

Jika teman-teman amsih mengalami kesulitan atau kendala saat belajar bisa bertanya melalui kolom komentar dibawah setiap artikel. Terima Kasih


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami