JAVASCRIPT

Build A Contact Management web Application with AdonisJS Framework – Part 1


Welcome! with the use of AdonisJs Framework, we will be learning how to build a contact management web Application in this tutorial.
We’ll build a Create, Read, Update and Delete Contact management web application using AdonisJS, an MVC framework for Node.js. I will name it “My Contact”. Users will be able to do the following:

  • Log in and register as owner.
  • Create, update and delete a contact.
  • Search for contacts.
  • View all contacts and their details

We would also be looking at the following in this tutorial:

  1. Database Setup
  2. Migration
  3. Models
  4. Home page

So, let’s get started! But before we do,

# Prerequisites

This Tutorial is a follow up to my introductory tutorial, Get Started with AdonisJS on Goodheads.io. At this point, I assume you have gone through the introductory tutorial or you are not new to AdoniJS else, you will have to go through the Get Started with AdonisJS post.

# Getting Started

With the AdonisJS CLI installed, execute the following commands

Enter  into the “My-Contact” directory using

Go ahead and run the application.

# Database Setup

AdonisJS supports several relational databases including PostgreSQL, SQLite,  MySQL, MariaDB, Oracle, MSSQL. For this tutorial, we will be using MySQL. So if you don’t already have MySQL installed, head over to the MySQL website to get it installed and set up for your operating system. Finish with this before going ahead with the tutorial.

Now, let’s create our database

From the above commands, we logged into our Mysql Database and created a database called “mycontact_db”

Next, Let’s set our database in .env file. Any AdonisJS project comes with .env file. The file which contains the database and secret details. Below is my .env file

# Migration

Now, let’s work on our migration for the project. So below is the database structure I have in mind:

User table (users)
id
email
password
name
timestamps – created_at, updated_at

Contact table(contacts)
id
user_id – (Foreign Key)
first_name
last_name
office_number
home_number
office_email
personal_email
birthday
note
timestamps – created_at, updated_at
Let’s make our migration now. AdonisJS uses command line tool to create migration files. So, run the following command to get migration files

Let’s modify the following migration files in “database/migrations”

TIMESTAMP_users.js

TIMESTAMP_contacts.js

 

Before you migrate the tables, let’s install MySql module.

Then, we can migrate the tables by running

Check your database, All these tables would have been created now.

# Models

In this section, we will work on the models. A Model is a representation of the database table in our code. In our application, we need 2 models; users and contacts.

To create our 2 models, we’ll run the below commands;

Now add the following code to “app/Model/User.js” file:

Also, add the following code to “app/Model/Contact.js” file:

If you noticed, there is a “one to many” relationship between both User Model and ContactModel.

# Home Page

Now, let’s work on “resources/views/master.njk” file by replacing its content with
master.njk

Let’s go ahead and create our index.njk in the resources/views folder.

index.njk

Next, create “HomeController” by running the “make:controller” command like this

Go to “/app/Http/Controllers/HomeController.js” file to write a function that will display the homepage like this

So let’s quickly modify our route.js file in “app/Http” directory so we can display our home page.

When you refresh your page, Your homepage should look like this.

Home Page

If your display is looking like this, then congratulation! 

It’s good that you have gotten to this stage.

Watch out for the next post! 😁

Please if you have any questions or observations, feel free to drop it in the comments section below.

Olusegun Ayeni

About Olusegun Ayeni

I am a charismatic developer that's constantly in awe of modern technology changes and innovation and strives to follow these changes to build world class modern applications.