Tutorial Membuat Authentication di Adonis JS #5 : Membuat Halaman Dashboard - Halo teman-teman semuanya, di artikel sebelumnya kita sudah berhasil membuat proses login di Adonis JS, akan tetapi kita masih mendapati error ketika diarahkan ke halaman dashboard.
Pada kesempatan kali ini kita semua akan belajar bagaiman cara membuat halaman dashboard, agar ketika kita sudah berhasil login tidak mendapatkan error lagi.
Silahkan teman-teman jalankan perintah dibawah ini untuk membuat sebuah controller baru
adonis make:controller Dashboard --type=http
Jika berhasil, kita akan mendapatkan output kurang lebih seperti berikut ini
✔ create app/Controllers/Http/DashboardController.js
Sekarang kita sudah berhasil membuat sebeuah file controller baru dengan nama DashboardController.js di dalam folder app/Http/Controllers/
Silahkan teman-teman buka file DashboardController.js dan silahkan ubah kodenya menjadi seperti berikut ini :
'use strict'
class DashboardController {
index({ view, auth }) {
const user = auth.user.toJSON()
return view.render('dashboard', { user: user })
}
}
module.exports = DashboardController
Jika kita perhatikan, dari kode diatas kita sudah menambahkan 1 fungsi baru yaitu index, fungsi ini kita gunakan untuk merender sebuah view di dalam folder resources/views/dashboard.edge
Maka selanjutnya kita akan membuat sebuah view dashboard baru, silahkan jalankan perintah berikut ini :
adonis make:view dashboard
Jika berhasil, kita akan mendaptkan output kurang lebih seperti ini :
✔ create resources/views/dashboard.edge
Sekarang silahkan teman-teman buka file dashbaord.edge dan masukkan kode berikut 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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<title>Adonis Auth - Dashboard</title>
</head>
<body style="background: #edf2f7">
<div class="container-fluid" 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') }}" class="list-group-item" style="color: #212529;"><i class="fa fa-tachometer-alt"></i> Dashboard</a>
<li class="list-group-item"><i class="fa fa-user-circle"></i> My Profile</li>
<a href="{{ route('logout') }}" class="list-group-item" style="color: #212529;"><i class="fa fa-sign-out-alt"></i> Logout</a>
</ul>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-body">
<label>DASBOARD</label>
<hr>
Selamat Datang <strong>{{ user.name }}</strong>
</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 akan menambahkan sebuah route baru untuk dashboard, silahkan teman-teman buka file routes.js di dalam folder start dan silahkan tambahkan kode dibawah ini :
Route.get('dashboard', 'DashboardController.index').as('dashboard')
Sekarang kita bisa mencoba, silahkan teman-teman login maka jika berhasil kalian akan diarahkan ke halaman dashboard, kurang lebih tampilannya seperti berikut ini :
Sampai disini pembahasan tentang membuat halaman dashboard di Adonis JS, di artikel selanjutnya kita semua akan belajar membuat middleware di Adonis JS untuk melakukan pengecekan user yang sudah login.
Terima Kasih