Build a Wizard with Lucid Laravel and Vuex

Today, we will be building a wizard to help users fill their profile easily. We'll be saving their data to a server at every step. To do this, we will be using Laravel with Lucid Architecture as our server-side framework and Vue 2 with Vuex to help out with the front-end.

Strap up for the ride! If you're not really clear about any of the ideas I'll be introducing, simply leave a comment.

When we're done, our wizard will look something like this

Briefing

In this installment, we'll design our database schema, setup our installation and run migrations.

Difficulty

• Intermediate

Requirements

• PHP version 5.6.4 or greater
• Composer version 1.4.1 or greater
• Lucid Laravel version 5.3.*
• Github repository.

What Will I Learn?

1. What are Wizards?
2. How Do Wizards Work?
3. How Do We Build Wizards?
4. I'm in. How Do We Get Started?
5. Drawing Up Our Database Schema.
6. Running Our Lucid Laravel Installation

1. What are Wizards?

In our normal day-to-day lives, we usually follow an order of steps when carrying out any task. If we're taking a flight of stairs, we usually proceed one step at a time.

Data entry is probably the most painful task on the internet—just think about those long boring surveys. We can alleviate much of the pain associated with data entry by using Wizards.

What's a Wizard? Well, a Wizard is a user interface design pattern that tries to make a really boring process much more fun by breaking it into smaller pieces.

2. How Do Wizards Work?

The idea behind Wizards is similar to the idea for feeding finicky infants—simply feed them smaller pieces instead of one big piece!

3. How Do We Build Wizards?

Thankfully, building wizards is not some advanced branch of dark magic! A wizard simply consist of two core components:

1. Indicators: This shows the user the step he or she is currently on.
2. Step Views: This displays the information relevant for a particular step.

In building wizards, we send and store data on the server for each step a user takes. This makes it easier to continue from where the user stopped saving tons of headaches and pain. By adding wizards you can make things a lot easier for your users.

4. I'm In. How Do We Get Started?

We'll start off by finding out our requirements. These requirements will be different based on the nature of the app we're working on, the users we're building for and the goal we wish to achieve. Let's break it down.

Nature

We are going to be building the profile area for a fictitious fantasy football app. It's not a real fantasy football app. It's just a very good example for our use case.

Users

Our users for this app are likely to be very time-conscious. Let's respect their time and not provide too many steps. We'll want to keep our Wizard to have a maximum of three steps.

Goal

Our goal is to provide a smooth and intuitive experience for our users. We'll want every step to be really easy and intuitive to make the user experience superb.

Our requirements

We will need our users to provide the following information

1. A profile photo (makes it easier to customise their experience)
2. Name
3. Display name
4. Birth year
5. Favorite team
6. Team competition
7. Leaderboard

I designed low-fidelity wireframes of our Wizard using Axure. I'll provide a link to the file at the bottom of this tutorial. Our wireframes looks like this

With that done, we now have our requirements. We'll need to design a database schema that can keep our data safely stored.

5. Designing Our Database Schema

To design our schema, we must have our requirements. We already drew that up in the previous section.

Also, we must understand the relationships at play here. We have four entities here:

• User entity.
• Profile entity.
• Competition entity.
• Leaderboard entity.
• Team entity.

That means we'll need just five tables: the users table, profiles table, competitions table, teams table and the leaderboards table.

Let's examine each of their attributes and fields.

Users

UserID: The auto-incrementing ID for each user.

Name: The complete names of the user.

DisplayName: The public accessible names for our user.

BirthYear: The birth year for our user.

Photo: The filename of the photo we upload as our display photo. We keep it in the users table for easy access through the Auth abstraction.

Profiles

ProfileID: The auto-incrementing ID for each profile.

UserID: ID of the user that created the profile.

TeamID: ID of the team chosen by the user.

CompetitionID: ID of the competition selected by the user.

LeaderboardID: ID of the leaderboard selected by the user.

IsSubscribed: A Boolean property that tells if a user has requested monthly updates or not.

Teams

TeamID: Auto-incrementing ID for each competition.
Title: Name of the team. For example, Celtic FC.
Alias: This is the shorter, more memorable name for the team. For example, the alias for the Celtic FC is CFC.
Artwork: Filename of the artwork uploaded to represent a team.

Competitions

CompetitionID: Auto-incrementing ID for each competition.

Title: The name the competition is known by. For example, the English Premier League.
Alias: This is the shorter, more memorable name for the competition. For example, the alias for the English Premier League is the EPL.

Leaderboards

LeaderboardID: Auto-incrementing ID for each leaderboard.

Title: The name of the leaderboard. For example, the International Leaderboard of Champions.

Alias: This is the shorter, more memorable name for the leaderboard. For example, the alias for the International Leaderboard of Champions is the ILC.

Design

We need a table to represent each entity and how they relate with each other. We'll use QuickDBD (Quick Database Diagrams).

QuickDBD is an online database schema design app that can help us share our schema designs quickly with friends. Simply head over to https://app.quickdatabasediagrams.com and you'll see an example schema for you to modify to your taste.

This is the screen that greets you upon a visit to QuickDBD. You may take the tour if you're curious. Simply click the exit button to skip the tour.

Moving on, simply click File>Clear for a fresh diagram. I've spent some time drawing up a schema. To save our time, simply paste this code in the text area to the left of the screen.

# Modify the code to update the DB schema diagram.
# To reset the sample schema, replace everything with
# two dots ('..' - without quotes).

Profile
-
ProfileID PK int
UserID int FK >- User.UserID
CompetitionID int FK >- Competition.CompetitionID
TeamID int
LeaderboardID int
IsSubscribed boolean
CreatedAt datetime

Competition
-
CompetitionID PK int
Title varchar
Alias varchar
CreatedAt datetime

Leaderboard
-
LeaderboardID int FK >- Profile.LeaderboardID
Title varchar
Alias varchar
Artwork varchar
CreatedAt datetime

Team
-
TeamID int FK >- Profile.TeamID
Title varchar
Alias varchar
CreatedAt datetime


User
-
UserID int PK
DisplayName varchar
Name varchar
Photo varchar
BirthYear int
Email varchar
Password varchar
CreatedAt datetime

You should see a diagram similar to what I have below. Feel free to play with the entities and explore.

Now we have our schema design, let's setup our Lucid installation.

6. Running Our Lucid Laravel Installation

If you have composer installed, simply open a command prompt terminal in your PHP installation's development folder. For my windows installation, I use C:\xampp\htdocs>.

With that done, if you want the most recent version of Laravel, simply run this command. We'll call this project EasyWiz

composer create-project lucid-arch/laravel easywiz

I prefer developing on Laravel v5.3.x as I find it easier to work with, so I'll instead run:

composer create-project lucid-arch/laravel=5.3.x easywiz

You should have a directory called easywiz in your development folder.

Open the easywiz folder and you should see this

Great! Next we need to setup our .env file. Simply open the .env available at the root folder of our installation and edit it to your taste. Here's my .env file below

# Env file code

APP_ENV=local
APP_DEBUG=true
APP_KEY=base64:q63PVcqNRhO8bbU27gDG8rIThkBoAyYObn0jHbWNhOU=

DB_HOST=localhost
DB_DATABASE=easywiz
DB_USERNAME=root
DB_PASSWORD=

CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

MAIL_DRIVER=smtp
MAIL_HOST=mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

Save and close the .env file.

Our env file specifies easywiz as our database name but at the moment that database does not exist yet. Let's fix that! Using your favorite database management tool, create a database named easywiz.

If you use XAMPP on windows, visit http://127.0.0.1/phpmyadmin to access the phpmyadmin panel. Click the new link in the left sidebar to access the database creation form. Next, fill in easywiz as the database name and create the database.

Next, we must setup our config/app.php file. Simply set the app_name parameter to EasyWiz.

With that done let's setup migrations and models. Simply hop into the terminal and run these commands

php artisan make:migration create_competitions_table --create=competitions

php artisan make:migration create_teams_table --create=teams

php artisan make:migration create_leaderboards_table --create=leaderboards

php artisan make:migration create_profiles_table --create=profiles

These commands will create migrations for all our tables.

Next, edit the migration files (the file names may differ, so don't let that bother you) available at the database/migrations directory and add the below snippets up method.

2018_01_02_115123_create_competitions_table.php

    Schema::create('competitions', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->string('alias');
        $table->timestamps();
        $table->softDeletes();
    });

2018_01_02_115059_create_teams_table.php

    Schema::create('teams', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->string('alias');
        $table->string('artwork');
        $table->timestamps();
        $table->softDeletes();
    });

2018_01_09_165209_create_leaderboards_table.php

Schema::create('leaderboards', function (Blueprint $table) {
    $table->increments('id');
    $table->string('title');
    $table->string('alias');
    $table->timestamps();
});

2018_01_02_115008_create_profiles_table.php

    Schema::create('profiles', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('user_id');
        $table->integer('team_id');
        $table->integer('competition_id');
        $table->integer('leaderboard_id');
        $table->boolean('is_subscribed')->default(0);
        $table->timestamps();
        $table->softDeletes();
    });

2014_10_12_000000_create_users_table.php

    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name')->nullable();
        $table->string('display_name')->nullable();
        $table->string('photo')->nullable();
        $table->integer('birth_year')->nullable();
        $table->string('email')->unique();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
        $table->softDeletes();
    });

Great! All we now need to do is to run this command

php artisan migrate

Check the easywiz database using your favorite admin tool and you should see the following tables:

competitions, teams, leaderboards, profiles and users

Conclusion

In this installment, we discussed wizards, how they work and the benefits to our users. We obtained our core requirements of a basic fantasy sports app and constructed a schema around the requirements.

Also, we set up our Lucid Laravel installation, configured our env file, created and ran migrations to create our database structure.

In our next installment, we will set up Eloquent models for our object relational model (ORM), create our first Lucid services, features and jobs. We will also create repositories and even contracts!

Stay tuned for the second installment in this series! Have a splendid day!

---

Posted on Utopian.io - Rewarding Open Source Contributors

---