In our previous post about AdonisJS we had covered introduction, installation, modeling, creating and displaying content, creating and deleting task. Let’s move on remaining part of it with this post.
Our application is going to grow. In order to reuse some parts of the html, we are going to define a main layout, and include the specific code of each page into it.
Create a “layout_main.edge” file into “resources/views”. This file will include the base of our page, and will be used by each page we create.
<!DOCTYPE html>
<html>
<title>Task list</title>
{{style('style')}}
</head>
<body>
@!section('content')
</body>
</html>
Now you can refactor tasklist.edge
@layout('layout_main')
@section('content')
@if(flashMessage('taskHandling'))
<span>{{ flashMessage('taskHandling') }}</span>
@endif
<form action="{{ route('TaskController.create') }}" method="POST">
{{ csrfField() }}
<input type="text" name="title" placeholder="title" />
<input type="text" name="description" placeholder="description" />
<button type="submit">Create the task</button>
</form>
<section>
<h1>Tasks</h1>
@each(task in tasks)
<div class="task">
<h2>
@if(task.done)
<input type="checkbox" disabled checked />
@else
<input type="checkbox" disabled />
@endif
{{task.title}}
</h2>
<form action="/task/delete/{{task.id}}" method="DELETE">
<button type="submit">Delete</button>
</form>
<p>{{task.description}}</p>
</div>
@endeach
</section>
@endsection
You have probably already seen that there are some files to manage users in your project (“app/Models/User.js”)
First, let’s add a UserController :
#Choose "For HTTP requests" adonis make:controller UserController
Go to the router (“start/routes.js”) and some routes :
Route.on('/register').render('register')
Route.on('/login').render('login')
Route.post('/register', 'UserController.create')
Route.post('/login', 'UserController.login')
Route.get('/logout', 'UserController.logout')
Then, add the templates :
“resources/views/login.edge”
@layout('layout_main')
@section('content')
<form action="{{ route('UserController.login') }}" method="POST">
{{ csrfField() }}
<input type="text" name="email" placeholder="email" />
<input type="password" name="password" placeholder="" />
<button type="submit">Login</button>
</form>
@endsection
“resources/views/register.edge”
@layout('layout_main')
@section('content')
<form action="{{ route('UserController.create') }}" method="POST">
{{ csrfField() }}
<input type="text" name="email" placeholder="email" />
<input type="password" name="password" placeholder="" />
<button type="submit">Create new user</button>
</form>
@endsection
“Controllers/http/UserController.js”
'use strict'
const User = use('App/Models/User')
class UserController {
async create({ request, response, auth }) {
const userPayload = request.all();
const user = new User;
user.email = userPayload.email;
//We will also use the mail as username to simplify things here
user.username = userPayload.email;
user.password = userPayload.password;
await user.save();
await auth.login(user);
return response.redirect('/');
}
async login({ request, response, auth, session }) {
const userPayload = request.all();
try {
await auth.attempt(userPayload.email, userPayload.password)
} catch (e) {
console.log(e);
session.flash({ loginError: e });
}
return response.redirect('/');
}
async logout ({ auth, response }) {
await auth.logout();
return response.redirect('/');
}
}
module.exports = UserController
You can also modify the tasklist template to add the register and login links, and a logout link if the user is logged in.
You can also include the create task form into the loggedIn conditionnal, in order to prevent anonymous users to create tasks.
...
@section('content')
@loggedIn
<a href="logout">Log out</a>
@else
<a href="login">Log in</a>
<a href="register">Register</a>
@endloggedIn
...
We now have seen what a basic and naive approach to build a web app can look like. You might have thought about a lot of other features to include in the project. Here is a quick list of other things Adonis can provide to you :
You want the tasks to be owned by users, you can create relations between models with the following syntax :
class User {
tasks () {
return this.hasMany('App/Model/Task'[, primaryKey, foreignKey])
}
}
You can also use hasOne, belongsTo, belongsToMany and manyThrough.
You can use validators to check is the data flowing into your controllers has the right format, and emit messages (via session.flash for instance) when some errors occurs.
Validators are a 3rd party npm module : https://www.npmjs.com/package/adonis-validator
As you might have seen when creating controllers, you can also generate controllers that are designed to use websockets.
A full guide to make you app multilanguage is available on the Adonis docs as well :
Adonis is a great choice for those who need a full-featured web server framework, and who need to keep control over your implementation.
This framework could be of a great use if you want to kickstart a project, if you want to follow usual guidelines and concepts. It will help you to implement data migrations, keep your code clean, handle data validation…
However, integrating exotic libraries can be painful. Adonis extensions need to be specifically built for this framework. This would be perfect for Adonis and it’s users if the framework would be in a monopoly situation, which is not the case.
Hire Node.js Developer from us, as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.
To develop the custom web app using Node.js, please visit our technology page.
Content Source:
606, Suvas Scala,
Nr. Parikh Hospitals, S P Ring Road,
Nikol, Ahmedabad – 380049, Gujarat, India.
57 Sherway St,
Stoney Creek, ON
L8J 0J3
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
606, Suvas Scala,
Nr. Parikh Hospitals, S P Ring Road,
Nikol, Ahmedabad - 380049, Gujarat, India.
With a client-centric approach, we provide cutting-edge Web & App Development Services to businesses across the globe, ensuring successful project delivery that drive growth and innovation.
© 2024 — HK Infosoft. All Rights Reserved.
© 2023 — HK Infosoft. All Rights Reserved.
T&C | Privacy Policy | Sitemap
