Tutorial Membuat Authentication di Adonis JS #5 : Membuat Halaman Dashboard


Fika Ridaul Maulayya
I'm Fika Ridaul Maulayya, a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Article, Screencasts and E-Books at SantriKoding.com

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


Fika Ridaul Maulayya
I'm Fika Ridaul Maulayya, a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Article, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

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

KOMENTAR