Laravel and PostgreSQL Web App Part 3

Introduction

If you’ve been following along with our multipart series on building a Laravel and PostgreSQL web app, you know we’ve made quite a bit of progress so far. In our previous article, we showed you how to perform a Laravel migration and how to create the controller and the model components of our web app. This third installment of the series will pick up where we left off, showing you how to create the business logic side of our web application.

Prerequisite

Before attempting the steps outlined in this article, make sure you’ve completed the work from the first two articles in this tutorial series.

Verifying Laravel Migration process

In the previous article, one of the last steps we performed was a Laravel migration. We can now verify if the migration was successful using pgAdmin.

To accomplish this task, we’ll log in to pgAdmin and go to our schema to view our tables:

alt text

We can see that our migration file was able to migrate our configured model successfully.

Enabling Laravel Authentication

Next, we’ll enable our authentication using Laravel artisan. Simply run the following commands:

composer require laravel/ui --dev

php artisan ui vue --auth

These commands enable Composer to install a layout for the view, login and registration views. Routes for the entire authentication will also be installed.

The code shown above also generates a HomeController controller that will handle all requests to our application’s dashboard.

If you recall, we created a username in our user table earlier in this tutorial series. Now, we’re going to make use of that field by configuring our application to log in using the username instead of their email.

We’ll start by modifying our LoginController.php and appending the following code:

public function username(){
return 'username';
}

Now, let see if our configuration is working properly by navigating to our application’s homepage.

You should see something like this:

alt text

We can now see the Login and Register buttons, which will bring us to the following pages:

Login Page:

alt text

Registration Page:

alt text

It’s clear that the front end of our application still shows the email, so we’ll need to modify our views to use the username instead.

We’ll update our registration view first to allow us to register a user with a username.

To do this, we’ll modify the registration.blade.php inside the directory resourcesviewsauth and insert the following HTML between the Email-Address and Password divs:

<div class="form-group row">
  <label for="username" class="col-md-4 col-form-label text-md-right"
   >{{ __('User Name') }}</label
 >

  <div class="col-md-6">
    <input
     id="username"
     type="text"
     class="form-control @error('username') is-invalid @enderror"
     name="username"
     value="{{ old('username') }}"
     required
     autocomplete="username"
     autofocus
   />

    @error('username')
    <span class="invalid-feedback" role="alert">
      <strong>{{ $message }}</strong>
    </span>
    @enderror
  </div>
</div>

After we make these changes, the form should look like this in the browser:

alt text

How to Insert User in PostgreSQL using Laravel

Now that we’ve enabled the authentication in our application, we can proceed to use Laravel to insert user details into our PostgreSQL database.

In this section, we’ll show you how to configure the registration feature of our application. We need to perform the following steps:

First, we’ll configure the application so that it can insert a username in our table. We can accomplish this by modifying the validator and create functions found in our RegisterController.php file.

The validator function:

'username' => ['required', 'string', 'min:4','max:255'],

The create function:

'username' => $data['username'],

Next, we’ll update our User.php model, modifying the ‘$fillable’ section of the code. This file can be found in the Providers directory:

protected $fillable = [
    'name', 'email', 'password','username'
];

At this point, we’re ready to try performing an INSERT operation in our registration feature.

Let’s test it out by registering a sample user:

alt text

The system will automatically log in the newly-created user and redirect them to the homepage of our application.

You should see the following confirmation in your browser:

alt text

How to Retrieve a Single User in PostgreSQL using Laravel

In the previous section, we showed how to configure the registration feature of our application. This feature performed an INSERT operation when we registered a sample user using our application.

Now we’ll configure the login feature of our application.

First, we’ll modify our login page to include a field for User Name. Open the login.blade.php file, which can be found in the same directory (resourcesviewsauth). Add the following HTML:

<div class="form-group row">
  <label for="username" class="col-md-4 col-form-label text-md-right"
   >{{ __('User Name') }}</label
 >

  <div class="col-md-6">
    <input
     id="username"
     type="text"
     class="form-control @error('username') is-invalid @enderror"
     name="username"
     value="{{ old('username') }}"
     required
     autocomplete="username"
     autofocus
   />

    @error('username')
    <span class="invalid-feedback" role="alert">
      <strong>{{ $message }}</strong>
    </span>
    @enderror
  </div>
</div>

The modified login form for our Laravel and PostgreSQL web app should look like this in the browser:

alt text

Conclusion

In this multi-part tutorial series, we’ve been walking you through each step in the process of building a Laravel and PostgreSQL web app. This article focused on some important changes we made to the Login and Registration features of the app. With the step-by-step instructions provided in this tutorial, you’ll be prepared to build a Laravel and PostgreSQL application of your own.

Pilot the ObjectRocket Platform Free!

Try Fully-Managed CockroachDB, Elasticsearch, MongoDB, PostgreSQL (Beta) or Redis.

Get Started

Keep in the know!

Subscribe to our emails and we’ll let you know what’s going on at ObjectRocket. We hate spam and make it easy to unsubscribe.