How To Build an Inspirational Quote Application Using AdonisJs and MySQL

Save and exit the file.

Finally, generate a page to view a single inspirational quote:

adonis make:view quotes/quote

You will see an output similar to this:

Output
✔ create  resources/views/quotes/quote.edge

Open the file with:

nano resources/views/quotes/quote.edge

Add the following code:

@layout('layouts/master')
@section('content')

    

        

            

                

                    

                        back
                    
                        

                    

                    

                        
{{quote.body}}
                        
                    
                
            
        
    

@endsection

This page renders the details of a particular quote, that includes the body of the quote, quote.body, and the author who created it, quote.username.

Once you’re finished with the file, save and exit.

You have created all the required pages for your application by using the Edge templating engine. Next, you’ll configure and create a connection to your application’s database.

Step 3 — Creating a Database Schema

If you serve your application now it will throw an error as you are yet to connect the application to a database. In this section, you will set up a connection to the database and then use the adonis command to generate a migration file that will be used to create the tables for it.

AdonisJs ships with an ORM named Lucid ORM, which provides active record implementation for working with your database. It takes away the hassle of writing SQL queries that retrieve data from the database in realtime. This is especially helpful when working on a complex application that requires a lot of queries. As an example, retrieving all the quotes from your application can be achieved by writing this:

const quotes = await Quote.all()

To proceed with the appropriate configuration for your application database, ensure that you are still within the root directory of your application and create a .env file:

nano .env

Open the newly created file and add the following content:

HOST=127.0.0.1
PORT=3333
NODE_ENV=development
APP_URL=http://${HOST}:${PORT}
CACHE_VIEWS=false
APP_KEY=bTVOEgUvmTCfkvgrK8gEBC3Qxt1xSYr0
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=sammy
DB_PASSWORD=password
DB_DATABASE=adonis
SESSION_DRIVER=cookie
HASH_DRIVER=bcrypt

By default the database connection for an AdonisJs application is SQLite, which you will update to MySQL here. You also specify the PORT for the application, the application environment, and your database credentials. Ensure that you replace the DB_USER, DB_PASSWORD, and DB_DATABASE placeholder with your credentials.

Next, you will create the model and a migration file for Quote using the Adonis CLI. To accomplish that, run the following command:

adonis make:model Quote --migration

You’ll see output similar to the following:

Output
✔ create  app/Models/Quote.js
✔ create  database/migrations/1568209992854_quote_schema.js

This command will create a model for Quote in the app/Models folder and a schema file in the database/migrations folder. The newly created schema file will be prefixed with the current timestamp. Open the schema file with:

nano database/migrations/1568209992854_quote_schema.js

Update its content with the following code:

'use strict'
/** @type {import('@adonisjs/lucid/src/Schema')} */
const Schema = use('Schema')
class QuoteSchema extends Schema {
  up () {
    this.create('quotes', (table) => {
      table.increments()
      table.integer('user_id').notNullable()
      table.string('username', 80).notNullable()
      table.string('body').notNullable()
      table.timestamps()
    })
  }
  down () {
    this.drop('quotes')
  }
}
module.exports = QuoteSchema

A schema file in AdonisJs requires two different methods, which are:

• up: Used to create a new table or alter an existing one.
• down: Used to revert the changes applied in the up method.

In addition to the timestamps() and increments() fields, you update the content of the schema file with the field attributes user_id, username, and the body of a quote that will be created. The user_id and username fields reference the details of the user who create a particular quote. This defines a one to many relationship and means a user can own an infinite number of quotes while a single quote can only belong to a user.

Save and exit the file.

AdonisJs comes installed with a User model and its migration file by default, which requires only a small modification to establish the relationship between the User and Quote model.

Open the User model in app/Models/User.js:

app/Models/User.js

Add this method immediately after the tokens() method:

...
class User extends Model {
  ...
  tokens () {
    return this.hasMany('App/Models/Token')
  }

  quote () {
    return this.hasMany('App/Models/Quote')
  }
}

module.exports = User

This will establish a one to many relationship with the Quote table using user_id as the foreign key.

Save and exit the file.

To wrap up this section, use the following command to run migrations, which will execute the up() method of all migration files:

adonis migration:run

You will see output similar to the following:

Output
migrate: 1503248427885_user.js
migrate: 1503248427886_token.js
migrate: 1568209992854_quote_schema.js
Database migrated successfully in 3.42 s

You’ve configured and secured a connection with your database. You also created a Quote model and its corresponding schema file and created a one to many relationship between a User and Quote. Next, you’ll generate the routes and create controllers to handle HTTP requests and the business logic to create, edit, and delete an inspirational quote.

Step 4 — Creating Controllers and Setting Up Routes

In this section, you will start by creating controllers to handle all the logic for the application and later attach these controllers to a specific route for it to be accessed by users via a URL.

To start, you’ll use the Adonis CLI to create a new HTTP request controller to handle all authentication processes for your application by running the following command:

adonis make:controller Auth --type http

This command will create an AuthController.js file and save it within app/Controllers/Http folder. You use the flag --type to indicate that you want this controller to be an HTTP controller.

You will see an output similar to the following:

Output
✔ create  app/Controllers/Http/AuthController.js

Next, open the newly created controller file:

nano app/Controllers/Http/AuthController.js

Update it with the following content:

'use strict'
const User = use('App/Models/User')
class AuthController {

    loginView({ view }) {
        return view.render('auth.login')
    }
    registrationView({ view }) {
        return view.render('auth.register')
    }

    async postLogin({ request, auth, response}) {
        await auth.attempt(request.input('email'), request.input('password'))
        return response.route('index')
    }

    async postRegister({ request, session, response }) {
        const user = await User.create({
            username: request.input('name'),
            email: request.input('email'),
            password: request.input('password')
        })
        session.flash({ successmessage: 'User have been created successfully'})
        return response.route('login.create');
    }

    async logout ({ auth, response }) {
        await auth.logout()
        return response.route('/')
    }
}
module.exports = AuthController

In this file, you import the User model and then create two methods named loginView() and registerView() to render the login and register pages respectively. Finally, you create the following asynchronous methods:

• postLogin(): This method will obtain the value of the email and password posted through the help of the inbuilt request method in AdonisJs and then validate this user against the details in the database. If such a user exists in the database and has inputted the correct credential, they will be redirected back to the homepage and authenticated before they can create a new quote. Otherwise, a message indicating the wrong credentials will be displayed.
• postRegister(): This will receive the value of the username, email, and password for a user to create an account for such user in the database. A message indicating that such user has been created successfully will be passed to the session and the user will be redirected to the login page to get authenticated and start creating a quote.
• logout(): This method will handle the logout functionality and redirect the user back to the homepage.

Save and exit the file.

Now that you have set up the controller to register and authenticate users, you will proceed by creating an HTTP request controller to manage all operations regarding quotes.

Back in the terminal, run the following command to create the QuoteController:

adonis make:controller Quote --type http --resource

Using the --resource flag will create a controller with predefined resourceful methods to do CRUD (Create, Read, Update, and Delete) operations.

You will see:

Output
✔ create  app/Controllers/Http/QuoteController.js

Locate this file within app/Controllers/Http/QuoteController.js:

nano app/Controllers/Http/QuoteController.js

Update it with the following content:

'use strict'
const Quote = use('App/Models/Quote')

class QuoteController {

  async index ({ view }) {
    const quote = await Quote.all()
    return view.render('index', {
      quotes: quote.toJSON()
    })
  }

  async create ({ view }) {
    return view.render('quotes.create-quote')
  }

  async store ({ request,auth,session, response }) {
    const quote = await Quote.create({
      user_id: auth.user.id,
      username: auth.user.username,
      body: request.input('body')
    })
    session.flash({ 'successmessage': 'Quote has been created'})
    return response.redirect('/')
  }

  async show ({ params, view }) {
    const quote = await Quote.find(params.id)
    return view.render('quotes.view-quote', {
      quote: quote.toJSON()
    })
  }

  async edit ({ params, view }) {
    const quote = await Quote.find(params.id)
    return view.render('quotes.edit-quote', {
      quote: quote.toJSON()
    })
  }

  async update ({ params, request, response, session }) {
    const quote = await Quote.find(params.id)
    quote.body = request.input('body')
    await quote.save()
    session.flash({'successmessage': 'Quote has been updated'})
    return response.redirect('/')
  }

  async destroy ({ params, response, session }) {
    const quote = await Quote.find(params.id)
    await quote.delete()
    session.flash({'successmessage': 'Quote has been deleted'})
    return response.redirect('/')
  }
}
module.exports = QuoteController

In this controller, you imported the Quote model and updated the following methods that were automatically created by using AdonisJs CLI:

• index(): to fetch all quotes from the database and render it on the homepage of the application.
• create(): to render a page for creating quotes.
• store(): to persist a newly created quote into the database and return an appropriate response.
• show(): to obtain the id of a particular quote, retrieve it from the database, and render it on the edit quote page.
• edit(): to obtain the detail of a particular quote from the database and render it for editing.
• update(): to process any update to a quote and redirect the user back to the homepage.
• destroy(): to delete a particular quote and remove it entirely from the database.

Save and exit the file.

After creating all the necessary controllers for this application, you can now set up the routes so that users can easily interact with your application. To begin, navigate to start/routes.js file

nano start/routes.js

Replace its content with the following:

'use strict'
const Route = use('Route')

Route.get('/','QuoteController.index').as('index')
Route.get('/register','AuthController.registrationView').as('register.create')
Route.post('/register-store','AuthController.postRegister').as('register.store').validator('Register')
Route.get('/login','AuthController.loginView').as('login.create')
Route.post('/login-store','AuthController.postLogin').as('login.store')
Route.get('/view-quote/:id','QuoteController.show').as('view.quote')

Route.group(() => {
    Route.get('/create-quote','QuoteController.create').as('create.quote')
    Route.post('/store-quote','QuoteController.store').as('store.quote')
    Route.get('/edit-quote/:id','QuoteController.edit').as('edit.quote')
    Route.post('/update-quote/:id','QuoteController.update').as('update.quote')
    Route.get('/delete-quote/:id','QuoteController.destroy').as('delete.quote')
    Route.post('/logout','AuthController.logout').as('logout')
}).middleware(['auth'])

Here, you define the path for each route in your application, specify the HTTP verbs for each action, and bound the route to a particular method in each controller. You also name each of these routes as they have been referenced within the controllers and views.

To ensure that only authenticated users can access all the quotes routes, you assign a group middleware named to it. And lastly, you attach a validator method to the register.store route to validate user input.

Save and exit the file.

You’ve created your controllers and set up the routes for your application. Next you’ll create the validator method defined in this step.

Step 5 — Validating User Input

AdonisJs does not have validators built-in by default. As a result you’ll install and register the validator for your application manually.

Run the following command to install it:

adonis install @adonisjs/validator

Open the following file to register the validator provider:

nano start/app.js

Then register the validator provider by appending it to the list of providers as shown following:

...
const providers = [
   ...
   '@adonisjs/cors/providers/CorsProvider',
   '@adonisjs/shield/providers/ShieldProvider',
   '@adonisjs/session/providers/SessionProvider',
   '@adonisjs/auth/providers/AuthProvider',
   '@adonisjs/validator/providers/ValidatorProvider'
]

Now that you have installed and registered the validator provider within your application, create a custom validator to validate user input during registration with the following command:

adonis make:validator Register

This will create a Register.js file in the App/validators directory. Open the file with:

nano app/Validators/Register.js

Add the following code to the file:

'use strict'
class Register {
  get rules () {
    return {
      name:'required',
      email:'required|email|unique:users',
      password:'required|min:8'
    }
  }

  get messages(){
    return{
      'name.required':'Full name is required',
      'email.required':'email is required',
      'email.unique':'email already exists',
      'password.required':'password is required',
      'password.min':'password should be at least 8 characters'
    }
  }
}
module.exports = Register

You define rules for specific fields in your application. If validations fail at any time, the validator automatically sets the error as a flash message and the user will be redirected back to the form.

Save and exit the file once you’re finished editing.

Finally, to add styling for your application, open the following file:

nano public/style.css

Replace its contents with the following:

@import url('https://fonts.googleapis.com/css?display=swap&family=Montserrat:300');

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  background-image: url("/splash.png");
  background-color: #220052;
}

* {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: underline;
}

p {
  margin: 0.83rem 0;
}

.quote-wrapper {
  margin-top: 20px;
}

.quote-wrapper a {
  text-decoration: none;
}

.quote-wrapper a:hover {
  color: #ffffff;
}

.empty-quote {
  color: #ffffff;
}

form {
  padding: 20px;
}

In this file you update the CSS styling of your application in the style.css file.

You’ve installed and registered a validator provider for the purpose of checking users’ input during the registration process. You also updated the content of your stylesheet to add more styling to the application. In the final step you’ll test your application.

Step 6 — Serving the Application

In this step, you’ll serve your application and create a user and password to test the authentication. You’ll also add a quote to your app and view this on the homepage.

To test your application, start the development server with the following command from the root directory of your application:

adonis serve --dev

This will start the application on the port defined inside the root .env file, which is 3333. Navigate to http://localhost:3333 from your browser.

The homepage is empty at the moment as you have not created any quotes. Click on the Register button.

Enter your details and click on the Submit button to complete the registration process. You will be redirected to the login page. Enter your email address and password for authentication.

Once you’re authenticated, click on the Create Quote button.

Enter a quote and navigate to the View all page to see your quote.

You’ve tested your application by creating and authenticating a user and then writing a quote.

Conclusion

In this tutorial you’ve built a web application with AdonisJs. You set up the application using the AdonisJs CLI and leveraged the CLI for creating other relevant files such as controllers, models, and views.

You can build web applications with this framework irrespective of their size and complexity. Feel free to download the source code for this project here on GitHub. To explore further features, you can also visit the official documentation.

If you would like to explore some of our other JavaScript framework tutorials, check out the following:

• How To Build a Customer List Management App with React and TypeScript
• How To Build a Blog with Nest.js, MongoDB, and Vue.js
• How To Build a Weather App with Angular, Bootstrap, and the APIXU API