Tutorial Membuat Authentication di Adonis JS #3 : Membuat Proses Register - Halo teman-teman semuanya, di artikel sebelumnya kita sudah membahas bagaimana cara menjalankan migration di Adonis JS.
Pada kesempatan kali ini, kita semua akan belajar memebuat proses register di Adonis JS. Langsung saja kita mulai
Silahkan teman-teman jalankan perintah dibawah ini untuk membuat sebuah controller baru
adonis make:controller Auth/Register --type=http
Jika berhasil, kita akan mendapatkan output kurang lebih seperti berikut ini
✔ create app/Controllers/Http/Auth/RegisterController.js
Sekarang kita sudah berhasil membuat sebeuah file controller baru dengan nama RegisterController.js di dalam folder app/Http/Controllers/Auth.
Sebelkum kita mulai koding controller kita, disini kita akan menginstall library validation untuk membantu kita nanti dalam melakukan validasi form input.
Silahkan jalankan perintah dibawah ini
adonis install @adonisjs/validator
Setelah installasi berhasil, silahkan teman-teman buka file app.js di dalam folder start dan silahkan tambahkan kode dibawah ini di dalam providers
'@adonisjs/validator/providers/ValidatorProvider'
Langkah selanjutnya silahkan teman-teman buka file RegisterController.js dan silahkan ganti kodenya menjadi seperti berikut ini :
'use strict'
const User = use('App/Models/User')
const { validate } = use('Validator')
class RegisterController {
index({ view }) {
return view.render('auth.register')
}
async store({ request, session, response }) {
/**
* declaration validation
*/
const rules = {
name: 'required',
email: 'required|unique:users,email',
password: 'required'
}
const messages = {
'name.required': 'Nama lengkap Tidak Boleh Kosong!',
'email.required': 'Alamat Email Tidak Boleh Kosong!',
'email.unique': 'Alamat Email Sudah Terdaftar!',
'password.required': 'Password Tidak Boleh Kosong!',
}
const validation = await validate(request.all(), rules, messages)
/**
* validation failed
*/
if(validation.fails()) {
session.withErrors(validation.messages()).flashExcept(['password'])
return response.redirect('back')
}
/**
* create user
*/
const user = await User.create({
name: request.input('name'),
email: request.input('email'),
password: request.input('password')
})
/**
* display success message
*/
session.flash({ notification: 'Register Berhasil!' })
return response.redirect('back')
}
}
module.exports = RegisterController
Coba kita perhatikan kode diatas, disini kita sudah berhasil menambahkan 2 fungsi baru di dalam RegisterController.js yaitu
-
index - untuk fungsi index ini kita gunakan untuk merender sebuah file dengan nama resources/views/auth/register.edge
-
store - untuk fungsi store ini kita gunakan untuk menyimpan data user, di dalam fungsi store ini kita memiliki beberapa fungsi lagi diantaranya mendeklarasikan validasi, menampilkan error dari validasi, menyimpan user dan menampilakn pesan sukses dari proses register.
Sekarang kita lanjutkan dengan membuat sebuah view baru untuk menampilkan form register, silahkan jalankan perintah dibawah ini:
adonis make:view auth/register
Jika berhasil, kita akan mendaptkan output kurang lebih seperti ini :
✔ create resources/views/auth/register.edge
Sekarang silahkan teman-teman buka file register.edge di dalam folder resources/views/auth dan silahkan masukkan kode beriku 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>Adonis Auth - Register</title>
</head>
<body style="background: #edf2f7">
<div class="container" style="margin-top: 80px">
<div class="row justify-content-center">
<div class="col-md-5">
<div class="text-center">
<h4>ADONIS JS AUTH - REGISTER</h4>
</div>
@if(flashMessage('notification'))
<div class="alert alert-success">{{ flashMessage('notification') }}</div>
@endif
<div class="card">
<div class="card-body">
<form action="{{ route('register.store') }}" method="POST">
{{ csrfField() }}
<div class="form-group">
<label>NAMA LENGKAP</label>
<input type="text" class="form-control {{ hasErrorFor('name') ? 'is-invalid' : '' }}" name="name" value="{{ old('name', '') }}" placeholder="Masukkan Nama Lengkap">
{{ elIf('<span class="text-danger">$self</span>', getErrorFor('name'), hasErrorFor('name')) }}
</div>
<div class="form-group">
<label>EMAIL</label>
<input type="email" class="form-control {{ hasErrorFor('email') ? 'is-invalid' : '' }}" name="email" placeholder="Masukkan Email">
{{ elIf('<span class="text-danger">$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
</div>
<div class="form-group">
<label>PASSWORD</label>
<input type="password" class="form-control {{ hasErrorFor('password') ? 'is-invalid' : '' }}" name="password" placeholder="Masukkan Password">
{{ elIf('<span class="text-danger">$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
</div>
<button class="btn btn-success btn-md btn-block" type="submit">REGISTER</button>
</form>
</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 register, silahkan teman-teman buka file routes.js di dalam folder start dan silahkan tambahkan kode dibawah ini :
Route.get('register', 'Auth/RegisterController.index').as('register.index')
Route.post('register', 'Auth/RegisterController.store').as('register.store')
Sekrang kita bisa mencoba project kita, untuk mencobanya silahkan buka http://localhost:3333/register di browser kita, jika berhasil maka kurang lebih seperti berikut ini :
Sekarang kita coba melakukan register tanpa memasukkan inputan apapun di dalam form, maka jika berhasil kita akan mendapatkan hasil validasi seperti berikut ini :
Dan sekarang kita masukkan nama, email dan password dan silahkan klik register, maka jika berhasil kita akan mendapatkan pesan sukses kurang lebih seperti berikut ini :
Sampai disini pembahasan tentang membuat proses register di Adonis JS, di artikel selanjutnya kita semua akan belajar membuat login di Adonis JS.
Terima Kasih