Pt 5: Build a Conversations System with Laravel and Lucid Architecture

We did some really interesting stuff last time and we'll keep the fun train running today. In this post, we will be up to some more creativity.

Tutorial Contents.

We'll keep it simple. Today, we will:

• Setup user authentication.
• Generate and popular our conversations system with test users.
• Setup our first ModelFactory instance.
• Build out an interface to view all users in our conversations system.

Difficulty

This tutorial is rated: Intermediate.

Requirements

• PHP version 5.6.4 or greater
• Composer version 1.4.1 or greater
• Lucid Laravel version 5.3.*
• Our previous code. Github repo

Straight to it.

Hi there. Welcome back. In our last post in this series, we worked on some new features. We granted our users ability to message others with the CreateMessageFeature. We also added Jobs, Repositories, Contracts, Validators and ServiceProviders.

Today, we will be setting up user authentication, creating our views structure and adding some helpers to give our conversations system a little more polish. Let's move on.

Setting up authentication.

We need to setup a basic authentication system. Luckily for us, we don't have to build out the whole thing—we can simply tell Laravel to do it for us. Let's get started. Spin up a terminal inside our conviex directory and run:

C:\xampp\htdocs\conviex>php artisan make:auth

If that ran successfully, you should get this message.

Authentication scaffolding generated successfully.

Next let's spin up our test development server with php artisan serve and head over to http://localhost:8000/register to create an account . The accounts creation page looks like this

Fill the form and hit submit. Oops, we see an error.

Let's fix it. Simply open up /App/Http/Controllers/Auth/RegisterController.php and add the following lines. To the array in the validator method add this line

'username' => 'required|max:255',

To the array in the create method, add this line

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

That done, save and refresh the page and you should see this page.

Simply fill the form and submit and you should see this page

Next we should add some users to our system. We can do this by database seeding. To get started, we must run this command

C:\xampp\htdocs\conviex>php artisan make:seeder UsersTableSeeder

This command will create a UsersTableSeeder.php at /database/seeders.

We will create a ModelFactory to help us with test users for our seeder. To do this, open up /database/factories/ModelFactory.php and add the following code

$factory->define(Framework\User::class, function (Faker\Generator $faker) {
    static $password;

    return [
        'name' => $faker->name,
        'username' => $faker->username,
        'email' => $faker->safeEmail,
        'password' => $password ?: $password = bcrypt('secret'),
        'remember_token' => str_random(10),
    ];
});

We must then add this line to the newly created file. This will create 10 users.

factory(Framework\User::class, 10)->create();

Then open up the DatabaseSeeder.php file at /database/seeders and add this line to the handle method.

$this->call(UsersTableSeeder::class);

Then run this command

C:\xampp\htdocs\conviex>php artisan db:seed

Great! Now we are registered and we have test users for our conversations system.

Talking to Others.

Let's have a look at our users! We need a page where we can look up all the available users and start a convo kind of like a phone's directory. Open up src/Services/Web/routes/web.php and add this route

Route::get('/users', 'UserController@index');

Let's create the UserController. Simply cd into the /vendor/bin and run

 C:\xampp\htdocs\conviex\vendor\bin>lucid make:controller UserController web

We'll also need a feature that provides the users for us. Let's create the ListUsersFeature. Run this command to create the ListUsersFeature.php.

 C:\xampp\htdocs\conviex\vendor\bin>lucid make:feature ListUsersFeature web

Let's open up the controller and serve the ListUsersFeature. Add this line to the index method in src/Services/Web/Http/Controllers/UserController.php

    return $this->serve(ListUsersFeature::class);

Awesome! Let's open up src/Services/Web/Feature/ListUsersFeature.php and add some code.

First, import the Eloquent User model

use Framework\User;

Then add these lines to the handle method.

$users = User::all();

$data = [
    'users' => $users
];

return view('app.user.user-index', [
    'data' => $data
]);

For a more attractive user interface, let us generate avatar images automatically for our conversation system users. To do this let's get the Laravolt\Avatar composer package. Open up composer.json and add this line to the require JSON object.

    "laravolt/avatar": "^1.8"

Next run this command to install our package

 C:\xampp\htdocs\conviex>composer update

We then need to register the package at /config/app.php. Simply add this line to the providers array.

 Laravolt\Avatar\ServiceProvider::class,

Next, add this line to the aliases array.

'Avatar' => Laravolt\Avatar\Facade::class,

Then we just have to add a method to generate our avatar to our User model.

 /*
  * Returns an avatar image based on a users name.
  *
  * @return { String }
  */

 public function getUserAvatar($size = 128)
 {
     $avatar = Avatar::create($this->name)->setDimension($size)->setFontSize(10)->setShape('square')->toBase64();

     return $avatar;
 }

That's awesome! We just need to do one more step to see all our users show up in our browser. Create a file called user-index.blade.php at /resources/views/app and add these lines to the file.

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3>
                        Conviex Users
                    </h3>
                    <p class="small text-muted">Tap the message button to start a conversation.</p>

                </div>

                <div class="panel-body">
                    <section class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <td><span class="sr-only">Avatar</span></td>
                                    <td><b>Name</b></td>
                                    <td><b>Username</b></td>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($data['users'] as $user)
                                @if ($user and $user->id != Auth::id())
                                <tr>
                                    <td> <img class="img img-responsive img-circle" src="{{ $user->getUserAvatar(30) }}" alt="{{ $user->getFirstName() }} avatar"> </td>
                                    <td>{{ $user->getFirstName() }}</td>
                                    <td>{{ $user->username }}</td>
                                    <td>
                                        <a href="{{ url(route('message', $user->id)) }}" class="btn btn-xs btn-primary" data-toggle="tooltip" data-placement="top" title="Start a conversation with {{ $user->name }}">
                                            <i class="glyphicon glyphicon-envelope" style="font-size: 18px;"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endif
                                @endforeach
                            </tbody>
                        </table>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Now, simply had over to http://localhost:8000/users and you should see this.

Conclusion

In this post, we revisited some important content from our previous post in this series. We created a ModelFactory instance, seeded our database with test users, created the ListUsersFeature to help us see all users we can start a conversation with.

Our next post will be really awesome, guys! We'll do so much new stuff. We will focus on showing each conversation involving ourselves. We will also create some new methods and so much more.

Keep on the edges of your chairs. The next installment will be steaming hot.

Curriculum

• Part 1: Build a Conversations System with Laravel and Lucid

• Part 2: Build a Conversations System with Laravel and Lucid

• Part 3: Build a Conversations System with Laravel and Lucid

• Part 4: Build a Conversations System with Laravel and Lucid

---

Posted on Utopian.io - Rewarding Open Source Contributors

---