JAVASCRIPT

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


Hello, guys welcome back!

From the last article, we had our User authentication working for the application. In this article, we will work on the Create, Read, Update and delete of Contacts.

Let’s get started by creating a controller for contacts using the ace command

Check your  ‘app/Http/Controllers/directory, you will discover a controller called ‘ContactController.js’ has been created.

# Create Contacts

Let’s quickly create a view for contact creation. Go to ‘resources/views/contacts’ directory. Create a file called ‘new.njk’ and add the code below to it

Old() is an AdonisJS helper function that helps the form remember previous values entered into its fields. What this does is, in situations where validation fails, the user won’t to have type all over again.

csrfField helps prevent your forms from cross-site request forgery attacks.

Open ‘app/Http/Controllers/ContactController.js’ and add the code below to it.

The ‘Create’ function will display the form to create contact. Let’s create routes to handle the creation of new contact

We grouped the routes into a group called ‘authenticated’ because they share the same middleware called ‘auth’. As we know the routes in the group are protected.

If you click on ‘Add Contact’ link on the navbar, you will see the below page

Add Contact Page

Add Contact Page

Now, Let’s handle saving of the contact. Edit ‘app/Http/Controllers/ContactController.js’ and add the below code.

In the code above, we created a function called “store”. We set our validation rules for the form. If the validation fails, it will return the user back to the form filled with an appropriate error message.

Otherwise, we get the current login user’s detail and save the contact. When done with that, it will redirect to the form with a success message.  

Before Contact Creation

Before Contact Creation

After Contact Creation

After Contact Creation

# Search contacts

Now let’s build the function to allow users search and view contacts by name. Open ‘app/Http/Controllers/ContactController.js’. Edit the controller by including the code below:

In the code above, we get the current logged in user. Furthermore, we checked if the query string ‘search’ was sent to know if the user was performing a search or want to display all its contacts. The contacts are passed to a view file which we’ll create now.

Go to ‘resources/views/contacts/index.njk’. Let’s edit this by pasting the code below to it.

Display all contacts view

Display all contacts view

Search contacts View

Search contacts View

# Display contact

We can now search for contacts, let’s work on viewing a particular contact.

As we have done in the previous sections, let’s start by creating a route inside the route group called ‘authenticated’

For the view, go to ‘resources/views/contacts/’ directory, create a file called ‘show.njk’ and paste the below code in it.

Now, Add the code below to the ‘ContactController’ class

Here, we get the contact, with the id passed from the route using ‘request.param(‘id’)’, then query the database with the id. We then pass the given contact to the view file.  

You should get something like the image below when you click on the ‘view’ link of a particular contact.

Display a contact

Display a contact

# Update Contact

We would also like Users to be able to update a particular contact.

Go to route.js then add the following routes to the route group called ‘authenticated’

Let’s work on the view by going to ‘resources/views/contacts’ directory then creating a file called ‘edit.njk’. Paste the following code in the file

Let’s handle showing and editing of a particular contact. Open ‘app/Http/Controllers/ContactController.js’ and add below code to it.

So, from the code above, we created edit function which fetches the details of the contact and sends it to the edit view to present them to the user. We also created the update function which validate the user input and update the contact as requested by the user.

Before Update operation

Before Update operation

After Update operation

After Update operation

# Delete Contact.

This is the last feature which is deleting a particular contact. Yes! You are almost there. Open route.js file to add delete route inside the route group called ‘authenticated’

Now, Add the code below to the ‘ContactController’ class

The code creates a function called ‘destroy’. It gets the contact with the id passed from the route using ‘request.param(‘id’)’ then calls the ‘delete’ function.

We have finally come to the end of this tutorial series. Source code for the project is here

If you have any questions or observations, feel free to drop it in the comments section below. I would be happy to respond to you.

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.