Create Laravel Store with Vue – My Projects & Live

Ref: https://blog.pusher.com/ecommerce-laravel-vue-part-1/

In this article, we will cover how you can use Laravel to build a simple e-commerce application. After this tutorial, you should know how to use Laravel and Vue to make a web application and understand the basics of making an online store.

With the advent of the internet, many regular things became faster and easier. One of the things that improved is commerce. Commercial activities carried out on the web are known as e-commerce.

E-commerce applications make sales of goods and services over the internet possible. If you use the internet often, chances are you have come across one or even used one at some point.

Introduction
As we mentioned earlier, an e-commerce application makes selling goods and services online very convenient. It provides a listing of the products the seller wishes to sell showing their prices, then a page where you can see all the details of the single product selected, and finally, where to pay for the product and set how you wish to receive it.

With this in mind, we know that to have a useful e-commerce application, we’d need to develop the following:

A listing page to view all our products.
A single page to view product information.
A checkout page where the buyer can enter a delivery address and pay.
A simple dashboard for a buyer to see all purchased products, and know if they have shipped.
A way for the seller to add products to sell.
A way for the seller to see which orders users placed.
A way for the seller to show a product has been shipped to the user.
A way for the seller to see and update all product information.
Planning the structure of the application
From our breakdown above, you may see that this application will have two user types:

Administrator – The owner of the store.
Buyer – The person who wants to buy a gift for a friend.
You definitely know that the application will also have products that need to be stored. These products will be ordered and you need a way to store and track those orders. These would form the basis of any e-commerce platform.

The basic details we need to store in the different parts:

Table	Fields
User	name, email, password, is_admin
Product	name, description, price, units, image
Order	product, user, quantity, address, is_delivered

Table Fields

User name, email, password, is_admin

Product name, description, price, units, image

Order product, user, quantity, address, is_delivered

The basic operations we need the app to carry out, and where these are handled, are:

Operation	                        Controller
Login	                                UserController
Register	                        UserController
User profile	                        UserController
View all orders by a single user	UserController
View product listing	                ProductController
View a single product	                ProductController
Edit a product	                        ProductController
Add a new product	                ProductController
Add more units to a product	        ProductController
Remove a product	                ProductController
Order product	                        OrderController
View all orders	                        OrderController
View a single order information	        OrderController
Deliver an order	                OrderController
Delete an order	                        OrderController

Operation Controller

User profile UserController

View all orders by a single user UserController

View product listing ProductController

View a single product ProductController

Edit a product ProductController

Add a new product ProductController

Add more units to a product ProductController

Remove a product ProductController

Order product OrderController

View all orders OrderController

View a single order information OrderController

Deliver an order OrderController

Delete an order OrderController

If you want to go a little deeper, you can consider adding categories, tags, warehouse items, more user types and many other things. However, we will not be considering them for this guide, but you should definitely try it on your own.

A good way to learn is by practicing. You can exercise your mind by doing the task in the previous paragraph.
Creating the application
We are going to use the Laravel CLI to make a new Laravel application. To create a new Laravel application, run the following command:

teddy@teddy:~/Documents/works/laravel$ laravel new laravel-store
Crafting application...
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 86 installs, 0 updates, 0 removals
  - Installing doctrine/inflector (v1.3.0): Loading from cache
...
Package manifest generated successfully.
Application ready! Build something amazing.

teddy@teddy:~/Documents/works/laravel$ laravel new laravel-store

Crafting application...

Loading composer repositories with package information

Installing dependencies (including require-dev) from lock file

Package operations: 86 installs, 0 updates, 0 removals

- Installing doctrine/inflector (v1.3.0): Loading from cache

...

Package manifest generated successfully.

Application ready! Build something amazing.

Then you can cd into the project we just created. The Laravel related commands we run throughout the article needs to be run from the root of the Laravel project.

teddy@teddy:~/Documents/works/laravel$ cd laravel-store/
teddy@teddy:~/Documents/works/laravel/laravel-store$

1 2	teddy@teddy:~/Documents/works/laravel$ cd laravel-store/ teddy@teddy:~/Documents/works/laravel/laravel-store$

Creating the models for the application
Models in Laravel provide a very convenient way to interact with the database. They provide methods for all the basic operations you need to run for your database table.

Let’s make the models that will interact with our database and hold business logic. New Laravel installations come with the User model out of the box, which can be found in app directory so let’s make the other two models:

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:model Product -mr
Model created successfully.
Created Migration: 2019_01_31_134200_create_products_table
Controller created successfully.

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:model Product -mr

Model created successfully.

Created Migration: 2019_01_31_134200_create_products_table

Controller created successfully.

We have added the -mr flag to the make:model command so that it will generate the accompanying migration and controller for the model.

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:model Order -mr
Model created successfully.
Created Migration: 2019_01_31_134258_create_orders_table
Controller created successfully.

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:model Order -mr

Model created successfully.

Created Migration: 2019_01_31_134258_create_orders_table

Controller created successfully.

Next open the app/User.php file and replace the contents with the following:

    //app/User.php

    namespace App;

    use Illuminate\Notifications\Notifiable;
    use Illuminate\Database\Eloquent\SoftDeletes;
    use Illuminate\Foundation\Auth\User as Authenticatable;

    class User extends Authenticatable
    {
        use Notifiable, SoftDeletes;

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

        protected $hidden = [
            'password', 'remember_token',
        ];

        public function orders()
        {
            return $this->hasMany(Order::class);
        }
    }

//app/User.php

namespace App;

use Illuminate\Notifications\Notifiable;

use Illuminate\Database\Eloquent\SoftDeletes;

use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable

{

use Notifiable, SoftDeletes;

protected $fillable = [

'name', 'email', 'password',

];

protected $hidden = [

'password', 'remember_token',

];

public function orders()

{

return $this->hasMany(Order::class);

}

We are using SoftDeletes to allow us to mark a database record as deleted without actually deleting it completely. This is useful if you want to be able to restore the data.

We also have an array – $fillable, with the column names we want to mass assign on the users table. Mass assignment happens when we call our User model statically and pass an array to its create method.

Open app/Product.php file and edit as follows:

    //app/Product.php
    namespace App;

    use Illuminate\Database\Eloquent\Model;
    use Illuminate\Database\Eloquent\SoftDeletes;

    class Product extends Model
    {
        use SoftDeletes;

        protected $fillable = [
            'name', 'price', 'units', 'description', 'image'
        ];

        public function orders(){
            return $this->hasMany(Order::class);
        }
    }

//app/Product.php

namespace App;

use Illuminate\Database\Eloquent\Model;

use Illuminate\Database\Eloquent\SoftDeletes;

class Product extends Model

{

use SoftDeletes;

protected $fillable = [

'name', 'price', 'units', 'description', 'image'

];

public function orders(){

return $this->hasMany(Order::class);

}

The Product model is quite similar to the User model. It has the $fillable array and also an orders method for establishing a relationship with orders placed on the application.

Now, open app/Order.php file and edit as follows:

    //app/Order.php
    namespace App;

    use Illuminate\Database\Eloquent\Model;
    use Illuminate\Database\Eloquent\SoftDeletes;

    class Order extends Model
    {
        use SoftDeletes;

        protected $fillable = [
            'product_id', 'user_id', 'quantity', 'address' 
        ];

        public function user()
        {
            return $this->belongsTo(User::class, 'user_id');
        }

        public function product()
        {
            return $this->belongsTo(Product::class, 'product_id');
        }

    }

//app/Order.php

namespace App;

use Illuminate\Database\Eloquent\Model;

use Illuminate\Database\Eloquent\SoftDeletes;

class Order extends Model

{

use SoftDeletes;

protected $fillable = [

'product_id', 'user_id', 'quantity', 'address'

];

public function user()

{

return $this->belongsTo(User::class, 'user_id');

}

public function product()

{

return $this->belongsTo(Product::class, 'product_id');

}

The Order model looks slightly different from the other two but is essentially the same thing. We just established a different kind of relationship – belongsTo that shows which user made an order or which product was ordered.

Defining the migrations for the application
Migrations are a good way to create and maintain your application’s database. It essentially defines how tables should be created or modified.

Migrations are useful because they help you manage the database tables, columns and keys. You can share migration files instead of raw SQL, and because migration files are run chronologically, they make it easy to work with git, so it’s great for teams.

Open the create_users_table migrations file in the database/migrations directory and replace the content with the following:

    //database/migrations/2014_10_12_000000_create_users_table.php

    use Illuminate\Support\Facades\Schema;
    use Illuminate\Database\Schema\Blueprint;
    use Illuminate\Database\Migrations\Migration;

    class CreateUsersTable extends Migration
    {
        public function up()
        {
            Schema::create('users', function (Blueprint $table) {
                $table->increments('id');
                $table->string('name');
                $table->string('email')->unique();
                $table->boolean('is_admin')->default(false);
                $table->string('password');
                $table->rememberToken();
                $table->timestamps();
                $table->softDeletes();
            });
        }

        public function down()
        {
            Schema::dropIfExists('users');
        }
    }

//database/migrations/2014_10_12_000000_create_users_table.php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration

{

public function up()

{

Schema::create('users', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->string('email')->unique();

$table->boolean('is_admin')->default(false);

$table->string('password');

$table->rememberToken();

$table->timestamps();

$table->softDeletes();

});

}

public function down()

{

Schema::dropIfExists('users');

}

Laravel is quite readable and you can probably figure out what is going on by reading the code. We defined which columns should exist in the table and their attributes.

There are many methods in the Blueprint class for migrations. You can read more here.

Next, open the create_products_table migrations file in the database/migrations directory and replace the code with the following:

//database/migrations/2019_01_31_134200_create_products_table.php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('description');
            //$table->integer('units')->unsigned()->default(0);
            $table->unsignedInteger('units')->default(0);
            $table->double('price');
            $table->string('image');
            $table->timestamps();
            $table->softDeletes();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

//database/migrations/2019_01_31_134200_create_products_table.php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('products', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->string('description');

//$table->integer('units')->unsigned()->default(0);

$table->unsignedInteger('units')->default(0);

$table->double('price');

$table->string('image');

$table->timestamps();

$table->softDeletes();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('products');

}

Finally, open the create_orders_table migrations file in the database/migrations directory and replace the contents with the following:

//database/migrations/2019_01_31_134258_create_orders_table.php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateOrdersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('orders', function (Blueprint $table) {
            $table->increments('id');
            $table->unsignedInteger('product_id');
            $table->unsignedInteger('user_id');
            $table->unsignedInteger('quantity')->default(1);
            $table->string('address')->nullable();
            $table->boolean('is_delivered')->default(false);
            $table->timestamps();
            $table->softDeletes();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('orders');
    }
}

//database/migrations/2019_01_31_134258_create_orders_table.php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateOrdersTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('orders', function (Blueprint $table) {

$table->increments('id');

$table->unsignedInteger('product_id');

$table->unsignedInteger('user_id');

$table->unsignedInteger('quantity')->default(1);

$table->string('address')->nullable();

$table->boolean('is_delivered')->default(false);

$table->timestamps();

$table->softDeletes();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('orders');

}

Creating seeders for the application
Seeders are an excellent way to pre-populate our database with dummy data. We are going to use the seeder class to create the user account for our administration.

Create a seeder class by running the command below:

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:seed UsersTableSeeder
Seeder created successfully.

1 2	teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:seed UsersTableSeeder Seeder created successfully.

Now, open the file UserTableSeeder.php at the database/seeds directory and replace the content with the following:

//database/seeds/UsersTableSeeder.php

use Illuminate\Database\Seeder;
use App\User;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $user = new User;
        $user->name = "Admin";
        $user->email = "admin@admin.com";
        $user->password = bcrypt('secret');
        $user->is_admin = true;
        $user->save();
    }
}

//database/seeds/UsersTableSeeder.php

use Illuminate\Database\Seeder;

use App\User;

class UsersTableSeeder extends Seeder

{

/**

* Run the database seeds.

* @return void

public function run()

{

$user = new User;

$user->name = "Admin";

$user->email = "admin@admin.com";

$user->password = bcrypt('secret');

$user->is_admin = true;

$user->save();

}

The seeder class above will create a new admin user in the database.

Recall that when we defined the User model, we did not include is_admin in the fillable column. The reason is that we do not want anyone who tries to spoof our application to create an administrator user. This is why we had to create a user instance here so we can access all the columns from the user table.
Make another seeder class for our products table:

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:seed ProductsTableSeeder
Seeder created successfully.

1 2	teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:seed ProductsTableSeeder Seeder created successfully.

Open the database/seeds/ProductTableSeeder.php file and replace the contents with the following:

//database/seeds/ProductsTableSeeder.php

use Illuminate\Database\Seeder;

class ProductsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $products = [
            [
                'name' => "MEN'S BETTER THAN NAKED & JACKET",
                'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',
                'units' => 21,
                'price' => 200.10,
                'image' => 'http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/mens-better-than-naked-jacket-AVMH_LC9_hero.png',
                'created_at' => new DateTime,
                'updated_at' => null,
            ],
            [
                'name' => "WOMEN'S BETTER THAN NAKED™ JACKET",
                'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',
                'units' => 400,
                'price' => 1600.21,
                'image' => 'http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/womens-better-than-naked-jacket-AVKL_NN4_hero.png',
                'created_at' => new DateTime,
                'updated_at' => null,
            ],
            [
                'name' => "WOMEN'S SINGLE-TRACK SHOE",
                'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',
                'units' => 37,
                'price' => 378.00,
                'image' => 'http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/womens-single-track-shoe-ALQF_JM3_hero.png',
                'created_at' => new DateTime,
                'updated_at' => null,
            ],
            [
                'name' => 'Enduro Boa® Hydration Pack',
                'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',
                'units' => 10,
                'price' => 21.10,
                'image' => 'http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/enduro-boa-hydration-pack-AJQZ_JK3_hero.png',
                'created_at' => new DateTime,
                'updated_at' => null,
            ]
        ];

        DB::table('products')->insert($products);
    }
}

//database/seeds/ProductsTableSeeder.php

use Illuminate\Database\Seeder;

class ProductsTableSeeder extends Seeder

{

/**

* Run the database seeds.

* @return void

public function run()

{

$products = [

[

'name' => "MEN'S BETTER THAN NAKED & JACKET",

'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',

'units' => 21,

'price' => 200.10,

'image' => 'http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/mens-better-than-naked-jacket-AVMH_LC9_hero.png',

'created_at' => new DateTime,

'updated_at' => null,

[

'name' => "WOMEN'S BETTER THAN NAKED™ JACKET",

'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',

'units' => 400,

'price' => 1600.21,

'image' => 'http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/womens-better-than-naked-jacket-AVKL_NN4_hero.png',

'created_at' => new DateTime,

'updated_at' => null,

[

'name' => "WOMEN'S SINGLE-TRACK SHOE",

'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',

'units' => 37,

'price' => 378.00,

'image' => 'http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/womens-single-track-shoe-ALQF_JM3_hero.png',

'created_at' => new DateTime,

'updated_at' => null,

[

'name' => 'Enduro Boa® Hydration Pack',

'description' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consequat.',

'units' => 10,

'price' => 21.10,

'image' => 'http://images.thenorthface.com/is/image/TheNorthFace/236x204_CLR/enduro-boa-hydration-pack-AJQZ_JK3_hero.png',

'created_at' => new DateTime,

'updated_at' => null,

]

];

DB::table('products')->insert($products);

}

The data we populated the database with is from here and is for sample educational purposes. You may require permissions to actually use the images.
When you are done making the seeder, you need to edit the database/seeds/DatabaseSeeder.php, which actually invokes the seeders:

//database/seeds/DatabaseSeeder.php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call([
            UsersTableSeeder::class,
            ProductsTableSeeder::class,
        ]);
    }
}

//database/seeds/DatabaseSeeder.php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder

{

/**

* Seed the application's database.

* @return void

public function run()

{

$this->call([

UsersTableSeeder::class,

ProductsTableSeeder::class,

]);

}

Now, when we execute the command to seed our database the DatabaseSeeder class is called and it calls the run which in turn class the seeder classes we had setup to run.

You can learn more about seeders here.
Creating the database for our application
We have defined everything we need our database to have. Now, we need to actually define the database itself. We are going to use SQLite for this guide, but you can any database you like. You should use a non-file based database like MySQL if in a production environment (NOTE: I’m going to use mysql instead).

If you want to use sqlite, Create a database file at database/database.sqlite (NOTE: I’m going to use mysql instead). Next, open your .env file and replace the following lines:

DB_DATABASE=homestead
DB_USERNAME=username
DB_PASSWORD=password

DB_DATABASE=homestead

DB_USERNAME=username

DB_PASSWORD=password

with

DB_DATABASE=laravel_store
DB_USERNAME=your_db_username
DB_PASSWORD=your_db_password

DB_DATABASE=laravel_store

DB_USERNAME=your_db_username

DB_PASSWORD=your_db_password

That is all for our database setup. Run the migrations to create the database tables for our application and seed it:

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan migrate --seed
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table
Migrating: 2019_01_31_134200_create_products_table
Migrated:  2019_01_31_134200_create_products_table
Migrating: 2019_01_31_134258_create_orders_table
Migrated:  2019_01_31_134258_create_orders_table
Seeding: UsersTableSeeder
Seeding: ProductsTableSeeder
Database seeding completed successfully.

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan migrate --seed

Migration table created successfully.

Migrating: 2014_10_12_000000_create_users_table

Migrated: 2014_10_12_000000_create_users_table

Migrating: 2014_10_12_100000_create_password_resets_table

Migrated: 2014_10_12_100000_create_password_resets_table

Migrating: 2019_01_31_134200_create_products_table

Migrated: 2019_01_31_134200_create_products_table

Migrating: 2019_01_31_134258_create_orders_table

Migrated: 2019_01_31_134258_create_orders_table

Seeding: UsersTableSeeder

Seeding: ProductsTableSeeder

Database seeding completed successfully.

Defining and securing our endpoints
Our application uses Laravel and Vue to create the best application experience. This means we would need to define APIs to provide our Vue components with data.

Laravel, by default, has support for web and API routes. Web routes handle routing for dynamically generated pages accessed from a web browser, while API routes handle requests from clients that need a response in mostly JSON or XML format.

Our application will have APIs for most requests. We need to secure our APIs to ensure only authorised users will access it. For this, we will use Laravel Passport.

Install passport
To install passport, run the following command:

teddy@teddy:~/Documents/works/laravel/laravel-store$ composer require laravel/passport
Using version ^7.1 for laravel/passport
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 7 installs, 0 updates, 0 removals
  - Installing symfony/psr-http-message-bridge (v1.1.0): Downloading (connectingDownloading (100%)         
  - Installing phpseclib/phpseclib (2.0.14): Downloading (100%)         
  - Installing defuse/php-encryption (v2.2.1): Downloading (100%)         
  - Installing league/event (2.2.0): Downloading (100%)         
  - Installing league/oauth2-server (7.3.2): Downloading (100%)         
  - Installing firebase/php-jwt (v5.0.0): Loading from cache
  - Installing laravel/passport (v7.1.0): Downloading (100%)         
symfony/psr-http-message-bridge suggests installing psr/http-factory-implementation (To use the PSR-17 factory)
phpseclib/phpseclib suggests installing ext-libsodium (SSH2/SFTP can make use of some algorithms provided by the libsodium-php extension.)
phpseclib/phpseclib suggests installing ext-gmp (Install the GMP (GNU Multiple Precision) extension in order to speed up arbitrary precision integer arithmetic operations.)
Writing lock file
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: beyondcode/laravel-dump-server
Discovered Package: fideloper/proxy
Discovered Package: laravel/nexmo-notification-channel
Discovered Package: laravel/passport
Discovered Package: laravel/slack-notification-channel
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.

teddy@teddy:~/Documents/works/laravel/laravel-store$ composer require laravel/passport

Using version ^7.1 for laravel/passport

./composer.json has been updated

Loading composer repositories with package information

Updating dependencies (including require-dev)

Package operations: 7 installs, 0 updates, 0 removals

- Installing symfony/psr-http-message-bridge (v1.1.0): Downloading (connectingDownloading (100%)

- Installing phpseclib/phpseclib (2.0.14): Downloading (100%)

- Installing defuse/php-encryption (v2.2.1): Downloading (100%)

- Installing league/event (2.2.0): Downloading (100%)

- Installing league/oauth2-server (7.3.2): Downloading (100%)

- Installing firebase/php-jwt (v5.0.0): Loading from cache

- Installing laravel/passport (v7.1.0): Downloading (100%)

symfony/psr-http-message-bridge suggests installing psr/http-factory-implementation (To use the PSR-17 factory)

phpseclib/phpseclib suggests installing ext-libsodium (SSH2/SFTP can make use of some algorithms provided by the libsodium-php extension.)

phpseclib/phpseclib suggests installing ext-gmp (Install the GMP (GNU Multiple Precision) extension in order to speed up arbitrary precision integer arithmetic operations.)

Writing lock file

Generating optimized autoload files

> Illuminate\Foundation\ComposerScripts::postAutoloadDump

> @php artisan package:discover --ansi

Discovered Package: beyondcode/laravel-dump-server

Discovered Package: fideloper/proxy

Discovered Package: laravel/nexmo-notification-channel

Discovered Package: laravel/passport

Discovered Package: laravel/slack-notification-channel

Discovered Package: laravel/tinker

Discovered Package: nesbot/carbon

Discovered Package: nunomaduro/collision

Package manifest generated successfully.

Laravel Passport comes with it’s own migrations, run the migrations using the following command:

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan migrate
Migrating: 2016_06_01_000001_create_oauth_auth_codes_table
Migrated:  2016_06_01_000001_create_oauth_auth_codes_table
Migrating: 2016_06_01_000002_create_oauth_access_tokens_table
Migrated:  2016_06_01_000002_create_oauth_access_tokens_table
Migrating: 2016_06_01_000003_create_oauth_refresh_tokens_table
Migrated:  2016_06_01_000003_create_oauth_refresh_tokens_table
Migrating: 2016_06_01_000004_create_oauth_clients_table
Migrated:  2016_06_01_000004_create_oauth_clients_table
Migrating: 2016_06_01_000005_create_oauth_personal_access_clients_table
Migrated:  2016_06_01_000005_create_oauth_personal_access_clients_table

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan migrate

Migrating: 2016_06_01_000001_create_oauth_auth_codes_table

Migrated: 2016_06_01_000001_create_oauth_auth_codes_table

Migrating: 2016_06_01_000002_create_oauth_access_tokens_table

Migrated: 2016_06_01_000002_create_oauth_access_tokens_table

Migrating: 2016_06_01_000003_create_oauth_refresh_tokens_table

Migrated: 2016_06_01_000003_create_oauth_refresh_tokens_table

Migrating: 2016_06_01_000004_create_oauth_clients_table

Migrated: 2016_06_01_000004_create_oauth_clients_table

Migrating: 2016_06_01_000005_create_oauth_personal_access_clients_table

Migrated: 2016_06_01_000005_create_oauth_personal_access_clients_table

Next, run the passport installation command to create the necessary keys for securing your application:

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan passport:install
Encryption keys generated successfully.
Personal access client created successfully.
Client ID: 1
Client secret: 5B2jIrNosAkK2OmnqSKyDNshFjdrYMybEXVsbULe
Password grant client created successfully.
Client ID: 2
Client secret: OTm1dGfx2leOKISA7eRlLsJdx9DtuXidSqyF3CXS

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan passport:install

Encryption keys generated successfully.

Personal access client created successfully.

Client ID: 1

Client secret: 5B2jIrNosAkK2OmnqSKyDNshFjdrYMybEXVsbULe

Password grant client created successfully.

Client ID: 2

Client secret: OTm1dGfx2leOKISA7eRlLsJdx9DtuXidSqyF3CXS

The above command will create encryption keys needed to generate secure access tokens plus “personal access” and “password grant” clients, which will be used to generate access tokens.

After the installation, you need to use the Laravel Passport HasApiToken trait in the User model. This trait will provide a few helper methods to your model, which allow you to inspect the authenticated user’s token and scopes.

Open the app/User.php file and edit as follows:

//app/User.php

namespace App;

...
use Laravel\Passport\HasApiTokens;

class User extends Authenticatable
{
    use Notifiable, SoftDeletes, HasApiTokens;
    ...
}

//app/User.php

namespace App;

...

use Laravel\Passport\HasApiTokens;

class User extends Authenticatable

{

use Notifiable, SoftDeletes, HasApiTokens;

...

}

Next, call the Passport::routes method within the boot method of your AuthServiceProvider. This method will register the routes necessary to issue the tokens your app will need:

In the app/Providers/AuthServiceProvider.php file update as follows:

//app/Providers/AuthServiceProvider.php

namespace App\Providers;

...
use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider
{
    ...

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();

        Passport::routes();
    }
}

//app/Providers/AuthServiceProvider.php

namespace App\Providers;

...

use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider

{

...

/**

* Register any authentication / authorization services.

* @return void

public function boot()

{

$this->registerPolicies();

Passport::routes();

}

Finally, in your config/auth.php configuration file, you should set the driver option of the api authentication guard to passport.

     //config/auth.php
     [...]

    'guards' => [

        [...]

        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
        ],
    ],

    [...]

//config/auth.php

[...]

'guards' => [

[...]

'api' => [

'driver' => 'passport',

'provider' => 'users',

[...]

That’s all for Laravel Passport.

Conclusion
So far, we have set up our application by defining all the models we need. We have also added migrations for our database, and lastly, we added Laravel Passport for handling authorization for our APIs.

The next thing we will look at is implementing the controllers to handle the different kinds of request we are going to make to the application and the views to interact with the application. Continue to part two.

In the previous chapter, we set up our application’s migrations and models, and installed Laravel Passport for authentication. We also planned what the application will look like. In this chapter, we will implement the controllers and handle all requests to our application.

Prerequisites
To continue with this part, please go through the first part of the series first and make sure you have all the requirements from that part.

Building our controllers
In the first chapter, we already defined our models and their accompanying controllers. These controllers reside in the app/Http/Controllers directory. The User model, however, does not have an accompanying controller, so we are going to create that first. Run the following command:

teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:controller UserController
Controller created successfully.

1 2	teddy@teddy:~/Documents/works/laravel/laravel-store$ php artisan make:controller UserController Controller created successfully.

Now, open the created controller file app/Http/Controllers/UserController.php and replace the contents with the following:

//app/Http/Controllers/UserController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Validator;

class UserController extends Controller
{
    public function index()
    {
        return response()->json(User::with(['orders'])->get());
    }

    public function login(Request $request)
    {
        $status = 401;
        $response = ['error' => 'Unauthorized'];

        if (Auth::attempt($request->only(['email', 'password']))) {
            $status = 200;
            $response = [
                'user' => Auth::user(),
                'token' => Auth::user()->createToken('myStore')->accessToken,
            ];
        }

        return response()->json($response, $status);
    }

    public function register(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required|max:50',
            'email' => 'required|email',
            'password' => 'required|min:6',
            'c_password' => 'required|same:password',
        ]);

        if ($validator->fails()) {
            return response()->json(['error' => $validator->errors()], 401);
        }

        $data = $request->only(['name', 'email', 'password']);
        $data['password'] = bcrypt($data['password']);

        $user = User::create($data);
        $user->is_admin = 0;

        return response()->json([
            'user' => $user,
            'token' => $user->createToken('myStore')->accessToken,
        ]);
    }

    public function show(User $user)
    {
        return response()->json($user);
    }

    public function showOrders(User $user)
    {
        return response()->json($user->orders()->with(['product'])->get());
    }
}

//app/Http/Controllers/UserController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\User;

use Illuminate\Support\Facades\Auth;

use Illuminate\Support\Facades\Validator;

class UserController extends Controller

{

public function index()

{

return response()->json(User::with(['orders'])->get());

}

public function login(Request $request)

{

$status = 401;

$response = ['error' => 'Unauthorized'];

if (Auth::attempt($request->only(['email', 'password']))) {

$status = 200;

$response = [

'user' => Auth::user(),

'token' => Auth::user()->createToken('myStore')->accessToken,

];

}

return response()->json($response, $status);

}

public function register(Request $request)

{

$validator = Validator::make($request->all(), [

'name' => 'required|max:50',

'email' => 'required|email',

'password' => 'required|min:6',

'c_password' => 'required|same:password',

]);

if ($validator->fails()) {

return response()->json(['error' => $validator->errors()], 401);

}

$data = $request->only(['name', 'email', 'password']);

$data['password'] = bcrypt($data['password']);

$user = User::create($data);

$user->is_admin = 0;

return response()->json([

'user' => $user,

'token' => $user->createToken('myStore')->accessToken,

]);

}

public function show(User $user)

{

return response()->json($user);

}

public function showOrders(User $user)

{

return response()->json($user->orders()->with(['product'])->get());

}

Above we defined some class methods:

index() – returns all users with their orders.
login() – authenticates a user and generates an access token for that user. The createToken method is one of the methods Laravel Passport adds to our user model.
register() – creates a user account, authenticates it and generates an access token for it.
show() – gets the details of a user and returns them.
showOrders() – gets all the orders of a user and returns them.
We used Laravel’s Route-Model Binding to automatically inject our model instance into the controller. The only caveat is that the variable name used for the binding has to be the same as the one defined in the route as well.

Next, open the app/Http/Controllers/ProductController.php file and replace the contents with the following:

    //app/Http/Controllers/ProductController.php

    namespace App\Http\Controllers;

    use App\Product;
    use Illuminate\Http\Request;

    class ProductController extends Controller
    {
        public function index()
        {
            return response()->json(Product::all(),200);
        }

        public function store(Request $request)
        {
            $product = Product::create([
                'name' => $request->name,
                'description' => $request->description,
                'units' => $request->units,
                'price' => $request->price,
                'image' => $request->image
            ]);

            return response()->json([
                'status' => (bool) $product,
                'data'   => $product,
                'message' => $product ? 'Product Created!' : 'Error Creating Product'
            ]);
        }

        public function show(Product $product)
        {
            return response()->json($product,200); 
        }

        public function uploadFile(Request $request)
        {
            if($request->hasFile('image')){
                $name = time()."_".$request->file('image')->getClientOriginalName();
                $request->file('image')->move(public_path('images'), $name);
            }
            return response()->json(asset("images/$name"),201);
        }

        public function update(Request $request, Product $product)
        {
            $status = $product->update(
                $request->only(['name', 'description', 'units', 'price', 'image'])
            );

            return response()->json([
                'status' => $status,
                'message' => $status ? 'Product Updated!' : 'Error Updating Product'
            ]);
        }

        public function updateUnits(Request $request, Product $product)
        {
            $product->units = $product->units + $request->get('units');
            $status = $product->save();

            return response()->json([
                'status' => $status,
                'message' => $status ? 'Units Added!' : 'Error Adding Product Units'
            ]);
        }

        public function destroy(Product $product)
        {
            $status = $product->delete();

            return response()->json([
                'status' => $status,
                'message' => $status ? 'Product Deleted!' : 'Error Deleting Product'
            ]);
        }
    }

//app/Http/Controllers/ProductController.php

namespace App\Http\Controllers;

use App\Product;

use Illuminate\Http\Request;

class ProductController extends Controller

{

public function index()

{

return response()->json(Product::all(),200);

}

public function store(Request $request)

{

$product = Product::create([

'name' => $request->name,

'description' => $request->description,

'units' => $request->units,

'price' => $request->price,

'image' => $request->image

]);

return response()->json([

'status' => (bool) $product,

'data' => $product,

'message' => $product ? 'Product Created!' : 'Error Creating Product'

]);

}

public function show(Product $product)

{

return response()->json($product,200);

}

public function uploadFile(Request $request)

{

if($request->hasFile('image')){

$name = time()."_".$request->file('image')->getClientOriginalName();

$request->file('image')->move(public_path('images'), $name);

}

return response()->json(asset("images/$name"),201);

}

public function update(Request $request, Product $product)

{

$status = $product->update(

$request->only(['name', 'description', 'units', 'price', 'image'])

);

return response()->json([

'status' => $status,

'message' => $status ? 'Product Updated!' : 'Error Updating Product'

]);

}

public function updateUnits(Request $request, Product $product)

{

$product->units = $product->units + $request->get('units');

$status = $product->save();

return response()->json([

'status' => $status,

'message' => $status ? 'Units Added!' : 'Error Adding Product Units'

]);

}

public function destroy(Product $product)

{

$status = $product->delete();

return response()->json([

'status' => $status,

'message' => $status ? 'Product Deleted!' : 'Error Deleting Product'

]);

}

In the ProductController above we defined seven methods:

index() – fetches and returns all the product records.
store() – creates a product record.
show() – fetches and returns a single product.
uploadFile() – uploads the image for a product we created and returns the url for the product.
update() – updates the product record.
updateUnits() – adds new units to a product.
delete() – deletes a product.
Next, open the app/Http/Controllers/OrderController.php file and replace the content with the following:

    //app/Http/Controllers/OrderController.php

    namespace App\Http\Controllers;

    use App\Order;
    use Illuminate\Support\Facades\Auth;
    use Illuminate\Http\Request;

    class OrderController extends Controller
    {
        public function index()
        {
            return response()->json(Order::with(['product'])->get(),200);
        }

        public function deliverOrder(Order $order)
        {
            $order->is_delivered = true;
            $status = $order->save();

            return response()->json([
                'status'    => $status,
                'data'      => $order,
                'message'   => $status ? 'Order Delivered!' : 'Error Delivering Order'
            ]);
        }

        public function store(Request $request)
        {
            $order = Order::create([
                'product_id' => $request->product_id,
                'user_id' => Auth::id(),
                'quantity' => $request->quantity,
                'address' => $request->address
            ]);

            return response()->json([
                'status' => (bool) $order,
                'data'   => $order,
                'message' => $order ? 'Order Created!' : 'Error Creating Order'
            ]);
        }

        public function show(Order $order)
        {
            return response()->json($order,200);
        }

        public function update(Request $request, Order $order)
        {
            $status = $order->update(
                $request->only(['quantity'])
            );

            return response()->json([
                'status' => $status,
                'message' => $status ? 'Order Updated!' : 'Error Updating Order'
            ]);
        }

        public function destroy(Order $order)
        {
            $status = $order->delete();

            return response()->json([
                'status' => $status,
                'message' => $status ? 'Order Deleted!' : 'Error Deleting Order'
            ]);
        }
    }

//app/Http/Controllers/OrderController.php

namespace App\Http\Controllers;

use App\Order;

use Illuminate\Support\Facades\Auth;

use Illuminate\Http\Request;

class OrderController extends Controller

{

public function index()

{

return response()->json(Order::with(['product'])->get(),200);

}

public function deliverOrder(Order $order)

{

$order->is_delivered = true;

$status = $order->save();

return response()->json([

'status' => $status,

'data' => $order,

'message' => $status ? 'Order Delivered!' : 'Error Delivering Order'

]);

}

public function store(Request $request)

{

$order = Order::create([

'product_id' => $request->product_id,

'user_id' => Auth::id(),

'quantity' => $request->quantity,

'address' => $request->address

]);

return response()->json([

'status' => (bool) $order,

'data' => $order,

'message' => $order ? 'Order Created!' : 'Error Creating Order'

]);

}

public function show(Order $order)

{

return response()->json($order,200);

}

public function update(Request $request, Order $order)

{

$status = $order->update(

$request->only(['quantity'])

);

return response()->json([

'status' => $status,

'message' => $status ? 'Order Updated!' : 'Error Updating Order'

]);

}

public function destroy(Order $order)

{

$status = $order->delete();

return response()->json([

'status' => $status,

'message' => $status ? 'Order Deleted!' : 'Error Deleting Order'

]);

}

In the OrderController above we have six methods:

index() – fetches and returns all the orders.
deliverOrder() – marks an order as delivered.
store() – creates an order.
show() – fetches and returns a single order.
update() – updates the order.
destroy() – deletes an order.
That’s it for our controllers. We have created the controller according to the specifications we laid out in the first part. Next thing we need to do is define our API routes.

Defining our application’s routes
Now that we have fully defined all the requests we would like to make to our application, let’s expose the APIs for making these requests. Open routes/api.php file and replace the content with the following:

    //routes/api.php

    use Illuminate\Http\Request;

    Route::post('login', 'UserController@login');
    Route::post('register', 'UserController@register');
    Route::get('/products', 'ProductController@index');
    Route::post('/upload-file', 'ProductController@uploadFile');
    Route::get('/products/{product}', 'ProductController@show');

    Route::group(['middleware' => 'auth:api'], function(){
        Route::get('/users','UserController@index');
        Route::get('users/{user}','UserController@show');
        Route::patch('users/{user}','UserController@update');
        Route::get('users/{user}/orders','UserController@showOrders');
        Route::patch('products/{product}/units/add','ProductController@updateUnits');
        Route::patch('orders/{order}/deliver','OrderController@deliverOrder');
        Route::resource('/orders', 'OrderController');
        Route::resource('/products', 'ProductController')->except(['index','show']);
    });

//routes/api.php

use Illuminate\Http\Request;

Route::post('login', 'UserController@login');

Route::post('register', 'UserController@register');

Route::get('/products', 'ProductController@index');

Route::post('/upload-file', 'ProductController@uploadFile');

Route::get('/products/{product}', 'ProductController@show');

Route::group(['middleware' => 'auth:api'], function(){

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

Route::get('users/{user}','UserController@show');

Route::patch('users/{user}','UserController@update');

Route::get('users/{user}/orders','UserController@showOrders');

Route::patch('products/{product}/units/add','ProductController@updateUnits');

Route::patch('orders/{order}/deliver','OrderController@deliverOrder');

Route::resource('/orders', 'OrderController');

Route::resource('/products', 'ProductController')->except(['index','show']);

});

Putting our route definitions in the routes/api.php file will tell Laravel they are API routes so Laravel will prefix the routes with a /api in the URL to differentiate them from web-routes.

Adding the auth:api middleware ensures any calls to the routes in that group must be authenticated.

A thing to note is, using the resource method on the Route class helps us create some additional routes under the hood without us having to create them manually. Read about resource controllers and routes here.

To see the full route list, run the following command: $ php artisan route:list

Since we will build the front end of this application in Vue, we need to define the web routes for it. Open the routes/web.php file and replace the contents with the following:

    //routes/web.php

    Route::get('/{any}', function(){
            return view('landing');
    })->where('any', '.*');

//routes/web.php

Route::get('/{any}', function(){

return view('landing');

})->where('any', '.*');

This will route every web request to a single entry point, which will be the entry for your Vue application.

Setting up Vue for the frontend
Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable – vuejs.org
Laravel comes with Vue bundled out of the box, so all we need to do to get Vue is to install the node packages. Run the following command:

teddy@teddy:~/Documents/works/laravel/laravel-store$ npm install

> webpack-cli@3.2.1 postinstall /home/teddy/Documents/works/laravel/laravel-store/node_modules/webpack-cli
> lightercollective


     *** Thank you for using webpack-cli! ***

Please consider donating to our open collective
     to help us maintain this package.

  https://opencollective.com/webpack/donate

                    ***

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 943 packages from 442 contributors and audited 16939 packages in 14.858s
found 0 vulnerabilities

teddy@teddy:~/Documents/works/laravel/laravel-store$ npm install

> webpack-cli@3.2.1 postinstall /home/teddy/Documents/works/laravel/laravel-store/node_modules/webpack-cli

> lightercollective

*** Thank you for using webpack-cli! ***

Please consider donating to our open collective

to help us maintain this package.

https://opencollective.com/webpack/donate

***

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 943 packages from 442 contributors and audited 16939 packages in 14.858s

found 0 vulnerabilities

Next, we will need VueRouter to handle the routing between the different components of our Vue application. To install VueRouter run the command below:

teddy@teddy:~/Documents/works/laravel/laravel-store$ npm i vue-router
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ vue-router@3.0.2
added 1 package from 1 contributor and audited 16940 packages in 5.414s
found 0 vulnerabilities



   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │       New minor version of npm available! 6.5.0 → 6.7.0       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.7.0   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

teddy@teddy:~/Documents/works/laravel/laravel-store$ npm i vue-router

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ vue-router@3.0.2

added 1 package from 1 contributor and audited 16940 packages in 5.414s

found 0 vulnerabilities

╭───────────────────────────────────────────────────────────────╮

│ │

│ New minor version of npm available! 6.5.0 → 6.7.0 │

│ Changelog: https://github.com/npm/cli/releases/tag/v6.7.0 │

│ Run npm install -g npm to update! │

│ │

╰───────────────────────────────────────────────────────────────╯

teddy@teddy:~/Documents/works/laravel/laravel-store$ npm i -g npm
/home/teddy/.nvm/versions/node/v8.9.4/bin/npm -> /home/teddy/.nvm/versions/node/v8.9.4/lib/node_modules/npm/bin/npm-cli.js
/home/teddy/.nvm/versions/node/v8.9.4/bin/npx -> /home/teddy/.nvm/versions/node/v8.9.4/lib/node_modules/npm/bin/npx-cli.js
+ npm@6.7.0
added 50 packages from 7 contributors, removed 13 packages and updated 31 packages in 5.253s
teddy@teddy:~/Documents/works/laravel/laravel-store$ npm --v
6.7.0

teddy@teddy:~/Documents/works/laravel/laravel-store$ npm i -g npm

/home/teddy/.nvm/versions/node/v8.9.4/bin/npm -> /home/teddy/.nvm/versions/node/v8.9.4/lib/node_modules/npm/bin/npm-cli.js

/home/teddy/.nvm/versions/node/v8.9.4/bin/npx -> /home/teddy/.nvm/versions/node/v8.9.4/lib/node_modules/npm/bin/npx-cli.js

+ npm@6.7.0

added 50 packages from 7 contributors, removed 13 packages and updated 31 packages in 5.253s

teddy@teddy:~/Documents/works/laravel/laravel-store$ npm --v

6.7.0

Next, let’s make the landing view file, which would mount our Vue application. Create the file resources/views/landing.blade.php and add the following code:

<!-- resources/views/landing.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <title>My Store</title>
    <link href=" {{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <app></app>
    </div>
    <script src="{{ mix('js/bootstrap.js') }}"></script>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>My Store</title>

</head>

<body>

</div>

</body>

</html>

In the code above, we have the HTML for our application. If you look closely, you can see the app tag. This will be the entry point to our Vue application and where the components will be loaded.

Since we will use app.js to set up our VueRouter, we still need to have Bootstrap and Axios compiled. The import for Bootstrap and Axios is in the bootstrap.js file so we need to compile that.

Edit the webpack.mix.js file so it compiles all assets:

    <!-- webpack.mix.js -->
    [...]

    mix.js('resources/assets/js/app.js', 'public/js')
       .js('resources/assets/js/bootstrap.js', 'public/js')
       .sass('resources/assets/sass/app.scss', 'public/css');

[...]

mix.js('resources/assets/js/app.js', 'public/js')

.js('resources/assets/js/bootstrap.js', 'public/js')

.sass('resources/assets/sass/app.scss', 'public/css');

the webpack.mix.js file holds the configuration files for laravel-mix, which provides a wrapper around Webpack. It lets us take advantage of Webpack’s amazing asset compilation abilities without having to write Webpack configurations by ourselves. You can learn more about Webpack here.
Set up the homepage for the Vue application. Create a new file, resources/js/components/Home.vue, and add the following code to the file:

<!-- resources/js/components/Home.vue -->
<template>
    <div>
        <div class="container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto">
            <h2 class="title">Welcome to My Store</h2>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4 product-box" v-for="(product,index) in products" @key="index">
                            <router-link :to="{ path: '/products/'+product.id}">
                                <img :src="product.image" :alt="product.name">
                                <h5><span v-html="product.name"></span>
                                    <span class="small-text text-muted float-right">$ {{product.price}}</span>
                                </h5>
                                <button class="col-md-4 btn btn-sm btn-primary float-right">Buy Now</button>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            products : []
        }
    },
    mounted() {
        axios.get("api/products").then(response => {
            this.products = response.data;
        });
    }
}
</script>

<div>

<h2 class="title">Welcome to My Store</h2>

</div>

<router-link :to="{ path: '/products/'+product.id}">

<span class="small-text text-muted float-right">$ {{product.price}}</span>

</h5>

</router-link>

</div>

</template>

export default {

data() {

return {

products : []

}

mounted() {

axios.get("api/products").then(response => {

this.products = response.data;

});

}

</script>

The code above within the opening and closing template tag we have the HTML of our Vue component. In there we loop through the contents of products and for each product we display the image, name, id, price and units available. We use the v-html attribute to render raw HTML, which makes it easy for us to use special characters in the product name.

In the script tag, we defined the data(), which holds all the variables we can use in our template. We also defined the mounted() method, which is called after our component is loaded. In this mounted method, we load our products from the API then set the products variable so that our template would be updated with API data.

In the same file, append the code below to the bottom:

<style scoped>
.small-text {
    font-size: 14px;
}
.product-box {
    border: 1px solid #cccccc;
    padding: 10px 15px;
}
.hero-section {
    height: 30vh;
    background: #ababab;
    align-items: center;
    margin-bottom: 20px;
    margin-top: -20px;
}
.title {
    font-size: 60px;
    color: #ffffff;
}
</style>

.small-text {

font-size: 14px;

}

.product-box {

border: 1px solid #cccccc;

padding: 10px 15px;

}

.hero-section {

height: 30vh;

background: #ababab;

align-items: center;

margin-bottom: 20px;

margin-top: -20px;

}

.title {

font-size: 60px;

color: #ffffff;

}

</style>

In the code above, we have defined the style to use with the welcome component.

According to the Vue documentation: When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in the Shadow DOM. It comes with some caveats but doesn’t require any polyfills.
Next create another file, resources/js/components/App.vue. This will be the application container where all other components will be loaded. In this file, add the following code:

<!-- resources/js/components/App.vue -->
<template>
    <div>
        <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <div class="container">
                <router-link :to="{name: 'home'}" class="navbar-brand">My Store</router-link>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav mr-auto"></ul>
                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ml-auto">
                        <router-link :to="{ name: 'login' }" class="nav-link" v-if="!isLoggedIn">Login</router-link>
                        <router-link :to="{ name: 'register' }" class="nav-link" v-if="!isLoggedIn">Register</router-link>
                        <span v-if="isLoggedIn">
                            <router-link :to="{ name: 'userboard' }" class="nav-link" v-if="user_type == 0"> Hi, {{name}}</router-link>
                            <router-link :to="{ name: 'admin' }" class="nav-link" v-if="user_type == 1"> Hi, {{name}}</router-link>
                        </span>
                        <li class="nav-link" v-if="isLoggedIn" @click="logout"> Logout</li>
                    </ul>
                </div>
            </div>
        </nav>
        <main class="py-4">
            <router-view @loggedIn="change"></router-view>
        </main>
    </div>
</template>

<div>

<router-link :to="{name: 'home'}" class="navbar-brand">My Store</router-link>

</button>

<router-link :to="{ name: 'login' }" class="nav-link" v-if="!isLoggedIn">Login</router-link>

<router-link :to="{ name: 'register' }" class="nav-link" v-if="!isLoggedIn">Register</router-link>

<router-link :to="{ name: 'userboard' }" class="nav-link" v-if="user_type == 0"> Hi, {{name}}</router-link>

<router-link :to="{ name: 'admin' }" class="nav-link" v-if="user_type == 1"> Hi, {{name}}</router-link>

</span>

<li class="nav-link" v-if="isLoggedIn" @click="logout"> Logout</li>

</ul>

</div>

</nav>

<router-view @loggedIn="change"></router-view>

</main>

</div>

</template>

In the Vue template above we used some Vue specific tags like router-link, which helps us generate links for routing to pages defined in our router. We also have the router-view, which is where all the child component pages will be loaded.

Next, below the closing template tag, add the following code:

<script>
export default {
    data() {
        return {
            name: null,
            user_type: 0,
            isLoggedIn: localStorage.getItem('myStore.jwt') != null
        }
    },
    mounted() {
        this.setDefaults();
    },
    methods : {
        setDefaults() {
            if(this.isLoggedIn){
                let user = JSON.parse(localStorage.getItem('myStore.user'));
                this.name = user.name;
                this.user_type = user.is_admin;
            }
        },
        change() {
            this.isLoggedIn = localStorage.getItem('myStore.jwt') != null;
            this.setDefaults();
        },
        logout() {
            localStorage.removeItem('myStore.jwt');
            localStorage.removeItem('myStore.user');
            this.change();
            this.$router.push('/');
        }
    }
}
</script>

export default {

data() {

return {

user_type: 0,

isLoggedIn: localStorage.getItem('myStore.jwt') != null

}

mounted() {

this.setDefaults();

methods : {

setDefaults() {

if(this.isLoggedIn){

let user = JSON.parse(localStorage.getItem('myStore.user'));

this.name = user.name;

this.user_type = user.is_admin;

}

change() {

this.isLoggedIn = localStorage.getItem('myStore.jwt') != null;

this.setDefaults();

logout() {

localStorage.removeItem('myStore.jwt');

localStorage.removeItem('myStore.user');

this.change();

this.$router.push('/');

}

</script>

In the script definition we have the methods property and in there we have three methods defined:

setDefaults() – sets the name of the user when the user is logged in as well as the type of user logged in.
change()– checks the current login status anytime it is called and calls the setDefaults method.
logout() – logs the user out of the application and routes the user to the homepage.
In our router-view component, we listen for an event loggedIn which calls the change method. This event is fired by our component anytime we log in. It is a way of telling the App component to update itself when a user logs in.

Next create the following files in the resources/js/components directory:

Admin.vue
Checkout.vue
Confirmation.vue
Login.vue
Register.vue
SingleProduct.vue
UserBoard.vue
These files would hold all the pages myStore would have. They need to be created prior to setting up VueRouter, so that it won’t throw an error.

To set up the routing for our Vue single page app, open your resources/js/app.js file and replace the contents with the following code:

//resources/js/app.js
...
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './components/App'
import Home from './components/Home'
import Login from './components/Login'
import Register from './components/Register'
import SingleProduct from './components/SingleProduct'
import Checkout from './components/Checkout'
import Confirmation from './components/Confirmation'
import UserBoard from './components/UserBoard'
import Admin from './components/Admin'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/register',
            name: 'register',
            component: Register
        },
        {
            path: '/products/:id',
            name: 'single-products',
            component: SingleProduct
        },
        {
            path: '/confirmation',
            name: 'confirmation',
            component: Confirmation
        },
        {
            path: '/checkout',
            name: 'checkout',
            component: Checkout,
            props: (route) => ({ pid: route.query.pid })
        },
        {
            path: '/dashboard',
            name: 'userboard',
            component: UserBoard,
            meta: {
                requiresAuth: true,
                is_user: true
            }
        },
        {
            path: '/admin/:page',
            name: 'admin-pages',
            component: Admin,
            meta: {
                requiresAuth: true,
                is_admin: true
            }
        },
        {
            path: '/admin',
            name: 'admin',
            component: Admin,
            meta: {
                requiresAuth: true,
                is_admin: true
            }
        },
    ],
})

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (localStorage.getItem('myStore.jwt') == null) {
            next({
                path: '/login',
                params: { nextUrl: to.fullPath }
            })
        } else {
            let user = JSON.parse(localStorage.getItem('myStore.user'))
            if (to.matched.some(record => record.meta.is_admin)) {
                if (user.is_admin == 1) {
                    next()
                }
                else {
                    next({ name: 'userboard' })
                }
            }
            else if (to.matched.some(record => record.meta.is_user)) {
                if (user.is_admin == 0) {
                    next()
                }
                else {
                    next({ name: 'admin' })
                }
            }
            next()
        }
    } else {
        next()
    }
})
...

100

101

102

103

104

105

106

107

108

109

110

111

112

113

//resources/js/app.js

...

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './components/App'

import Home from './components/Home'

import Login from './components/Login'

import Register from './components/Register'

import SingleProduct from './components/SingleProduct'

import Checkout from './components/Checkout'

import Confirmation from './components/Confirmation'

import UserBoard from './components/UserBoard'

import Admin from './components/Admin'

const router = new VueRouter({

mode: 'history',

routes: [

{

path: '/',

component: Home

{

path: '/login',

component: Login

{

path: '/register',

component: Register

{

path: '/products/:id',

component: SingleProduct

{

path: '/confirmation',

component: Confirmation

{

path: '/checkout',

component: Checkout,

props: (route) => ({ pid: route.query.pid })

{

path: '/dashboard',

component: UserBoard,

meta: {

requiresAuth: true,

is_user: true

}

{

path: '/admin/:page',

component: Admin,

meta: {

requiresAuth: true,

is_admin: true

}

{

path: '/admin',

component: Admin,

meta: {

requiresAuth: true,

is_admin: true

}

})

router.beforeEach((to, from, next) => {

if (to.matched.some(record => record.meta.requiresAuth)) {

if (localStorage.getItem('myStore.jwt') == null) {

next({

path: '/login',

params: { nextUrl: to.fullPath }

})

} else {

let user = JSON.parse(localStorage.getItem('myStore.user'))

if (to.matched.some(record => record.meta.is_admin)) {

if (user.is_admin == 1) {

next()

}

else {

next({ name: 'userboard' })

}

else if (to.matched.some(record => record.meta.is_user)) {

if (user.is_admin == 0) {

next()

}

else {

next({ name: 'admin' })

}

next()

}

} else {

next()

}

})

...

Above, we have imported the VueRouter and we added it to our Vue application. We defined routes for our application and then registered it to the Vue instance so it is available to all Vue components.

Each of the route objects has a name, which we will use to identify and invoke that route. It also has a path, which you can visit directly in your browser. Lastly, it has a component, which is mounted when you visit the route.

On some routes, we defined meta, which contains variables we would like to check when we access the route. In our case, we are checking if the route requires authentication and if it is restricted to administrators or regular users only.

We set up the beforeEach middleware on the router that checks each route before going to it. The method takes these variables:

to – the route you want to move to.
from – the current route you are moving away from.
next – the method that finally moves to a defined route. When called without a route passed, it continues the navigation. If given a route, it goes to that route.
We use beforeEach to check the routes that require authentication before you can access them. For those routes, we check if the user is authenticated. If the user isn’t, we send them to the login page. If the user is authenticated, we check if the route is restricted to admin users or regular users. We redirect each user to the right place based on which access level they have.

Now add the following lines to the end of the app.js file

    const app = new Vue({
        el: '#app',
        components: { App },
        router,
    });

const app = new Vue({

el: '#app',

components: { App },

router,

});

This instantiates the Vue application. In this global instance, we mount the App component only because the VueRouter needs it to switch between all the other components.

Now, we are ready to start making the other views for our application.

Conclusion
In this part, we implemented the controller logic that handles all the requests to our application and defined all the routes the application will use. We also set up Vue and VueRouter to prepare our application for building the core frontend.

In the next chapter of this guide, we are going to build the core frontend of the application and consume the APIs. See you in the next part.

Making the authentication pages
In the previous part, we created all the view files for our Vue application, although we did not add content to all of them. Let’s start with the login and register pages.

Open the resources/js/components/Login.vue file and paste in the following code:

<!-- resources/js/components/Login.vue -->
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Login</div>
                    <div class="card-body">
                        <form>
                            <div class="form-group row">
                                <label for="email" class="col-sm-4 col-form-label text-md-right">E-Mail Address</label>
                                <div class="col-md-6">
                                    <input id="email" type="email" class="form-control" v-model="email" required autofocus>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control" v-model="password" required>
                                </div>
                            </div>
                            <div class="form-group row mb-0">
                                <div class="col-md-8 offset-md-4">
                                    <button type="submit" class="btn btn-primary" @click="handleSubmit">
                                        Login
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<div class="card-header">Login</div>

<form>

<label for="email" class="col-sm-4 col-form-label text-md-right">E-Mail Address</label>

</div>

<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

</div>

</button>

</div>

</form>

</div>

</template>

Above we have a login form. We don’t have much functionality yet so let’s append the following code to the same file to add some Vue scripting:

<script>
    export default {
        data() {
            return {
                email: "",
                password: ""
            }
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault()
                if (this.password.length > 0) {
                    let email = this.email
                    let password = this.password

                    axios.post('api/login', {email, password}).then(response => {
                        let user = response.data.user
                        let is_admin = user.is_admin

                        localStorage.setItem('myStore.user', JSON.stringify(user))
                        localStorage.setItem('myStore.jwt', response.data.token)

                        if (localStorage.getItem('myStore.jwt') != null) {
                            this.$emit('loggedIn')
                            if (this.$route.params.nextUrl != null) {
                                this.$router.push(this.$route.params.nextUrl)
                            } else {
                                this.$router.push((is_admin == 1 ? 'admin' : 'dashboard'))
                            }
                        }
                    });
                }
            }
        }
    }
</script>

export default {

data() {

return {

email: "",

password: ""

}

methods: {

handleSubmit(e) {

e.preventDefault()

if (this.password.length > 0) {

let email = this.email

let password = this.password

axios.post('api/login', {email, password}).then(response => {

let user = response.data.user

let is_admin = user.is_admin

localStorage.setItem('myStore.user', JSON.stringify(user))

localStorage.setItem('myStore.jwt', response.data.token)

if (localStorage.getItem('myStore.jwt') != null) {

this.$emit('loggedIn')

if (this.$route.params.nextUrl != null) {

this.$router.push(this.$route.params.nextUrl)

} else {

this.$router.push((is_admin == 1 ? 'admin' : 'dashboard'))

}

});

}

</script>

Above we have a handleSubmit method that is fired when the form is submitted. In this method we attempt to authenticate using the API. If the authentication is successful, we save the access token and user data in localStorage so we can access them across our app.

We also emit a loggedIn event so the parent component can update as well. Lastly, we check if the user was sent to the login page from another page, then send the user to that page. If the user came to login directly, we check the user type and redirect the user appropriately.

Next, open the resources/js/components/Register.vue file and paste in the following:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-default">
                    <div class="card-header">Register</div>
                    <div class="card-body">
                        <form>
                            <div class="form-group row">
                                <label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
                                <div class="col-md-6">
                                    <input id="name" type="text" class="form-control" v-model="name" required autofocus>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
                                <div class="col-md-6">
                                    <input id="email" type="email" class="form-control" v-model="email" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control" v-model="password" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>
                                <div class="col-md-6">
                                    <input id="password-confirm" type="password" class="form-control" v-model="password_confirmation" required>
                                </div>
                            </div>
                            <div class="form-group row mb-0">
                                <div class="col-md-6 offset-md-4">
                                    <button type="submit" class="btn btn-primary" @click="handleSubmit">
                                        Register
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<div class="card-header">Register</div>

<form>

</div>

<label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>

</div>

<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>

</div>

<label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirm Password</label>

</div>

</button>

</div>

</form>

</div>

</template>

Above we have the HTML for the registration form. Let’s add the script for the component below the closing template tag:

<script>
export default {
    props : ['nextUrl'],
    data(){
        return {
            name : "",
            email : "",
            password : "",
            password_confirmation : ""
        }
    },
    methods : {
        handleSubmit(e) {
            e.preventDefault()
            if (this.password.length <= 5) {
                this.password = ""
                this.password_confirmation = ""
                return alert('Passwords must contain 6 or more characters')
            }
            if (this.password !== this.password_confirmation) {
                this.password = ""
                this.password_confirmation = ""
                return alert('Passwords do not match')
            }
            let name = this.name
            let email = this.email
            let password = this.password
            let c_password = this.password_confirmation
            axios.post('api/register', {name, email, password, c_password}).then(response => {
                let data = response.data
                localStorage.setItem('myStore.user', JSON.stringify(data.user))
                localStorage.setItem('myStore.jwt', data.token)
                if (localStorage.getItem('myStore.jwt') != null) {
                    this.$emit('loggedIn')
                    let nextUrl = this.$route.params.nextUrl
                    this.$router.push((nextUrl != null ? nextUrl : '/'))
                }
            })
        }
    }
}
</script>

export default {

props : ['nextUrl'],

data(){

return {

name : "",

email : "",

password : "",

password_confirmation : ""

}

methods : {

handleSubmit(e) {

e.preventDefault()

if (this.password.length <= 5) {

this.password = ""

this.password_confirmation = ""

return alert('Passwords must contain 6 or more characters')

}

if (this.password !== this.password_confirmation) {

this.password = ""

this.password_confirmation = ""

return alert('Passwords do not match')

}

let name = this.name

let email = this.email

let password = this.password

let c_password = this.password_confirmation

axios.post('api/register', {name, email, password, c_password}).then(response => {

let data = response.data

localStorage.setItem('myStore.user', JSON.stringify(data.user))

localStorage.setItem('myStore.jwt', data.token)

if (localStorage.getItem('myStore.jwt') != null) {

this.$emit('loggedIn')

let nextUrl = this.$route.params.nextUrl

this.$router.push((nextUrl != null ? nextUrl : '/'))

}

})

}

</script>

NOTE: I added a check for the password and the confirmation characters length. It should be more than 5 characters.
The register component operates similarly to the login component. We send the user data to the API for authentication and if we get a favourable response we save the token and user to localStorage.

Making the marketplace pages
We had already defined the homepage in the last chapter and returned a list of available products. Now, we are going to make all the other store pages.

Open the resources/js/components/SingleProduct.vue file and paste in the following code:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <img :src="product.image" :alt="product.name">
                <h3 class="title" v-html="product.name"></h3>
                <p class="text-muted">{{product.description}}</p>
                <h4>
                    <span class="small-text text-muted float-left">$ {{product.price}}</span>
                    <span class="small-text float-right">Available Quantity: {{product.units}}</span>
                </h4>
                <br>
                <hr>
                <router-link :to="{ path: '/checkout?pid='+product.id }" class="col-md-4 btn btn-sm btn-primary float-right">Buy Now</router-link>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            product : []
        }
    },
    beforeMount(){
        let url = `/api/products/${this.$route.params.id}`
        axios.get(url).then(response => this.product = response.data)      
    }
}
</script>

<style scoped>
.small-text { font-size: 18px; }
.title { font-size: 36px; }
</style>

<p class="text-muted">{{product.description}}</p>

<h4>

<span class="small-text text-muted float-left">$ {{product.price}}</span>

<span class="small-text float-right">Available Quantity: {{product.units}}</span>

</h4>

<br>

<hr>

<router-link :to="{ path: '/checkout?pid='+product.id }" class="col-md-4 btn btn-sm btn-primary float-right">Buy Now</router-link>

</div>

</template>

export default {

data(){

return {

product : []

}

beforeMount(){

let url = `/api/products/${this.$route.params.id}`

axios.get(url).then(response => this.product = response.data)

}

</script>

.small-text { font-size: 18px; }

.title { font-size: 36px; }

</style>

NOTE: USE backtick (`) INSTEAD OF apostroph (‘) ON let url VARIABLE TO PARSE ${this.$route.params.id}
Above we have the product as a data attribute, which we use to display information on the page like we did in the Home.vue file.

In the components script we defined Vue’s beforeMount method and fetched the product information there. beforeMount is called before the component is rendered, so it fetches the necessary data for rendering the component. If we get the data after the component has mounted, we would have errors before the component updates.

Next, open the resources/js/components/Checkout.vue file and paste the following code for the HTML template and style:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="order-box">
                    <img :src="product.image" :alt="product.name">
                    <h2 class="title" v-html="product.name"></h2>
                    <p class="small-text text-muted float-left">$ {{product.price}}</p>
                    <p class="small-text text-muted float-right">Available Units: {{product.units}}</p>
                    <br>
                    <hr>
                    <label class="row"><span class="col-md-2 float-left">Quantity: </span><input type="number" name="units" min="1" :max="product.units" class="col-md-2 float-left" v-model="quantity" @change="checkUnits"></label>
                </div>
                <br>
                <div>
                    <div v-if="!isLoggedIn">
                        <h2>You need to login to continue</h2>
                        <button class="col-md-4 btn btn-primary float-left" @click="login">Login</button>
                        <button class="col-md-4 btn btn-danger float-right" @click="register">Create an account</button>
                    </div>
                    <div v-if="isLoggedIn">
                        <div class="row">
                            <label for="address" class="col-md-3 col-form-label">Delivery Address</label>
                            <div class="col-md-9">
                                <input id="address" type="text" class="form-control" v-model="address" required>
                            </div>
                        </div>
                        <br>
                        <button class="col-md-4 btn btn-sm btn-success float-right" v-if="isLoggedIn" @click="placeOrder">Continue</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props : ['pid'],
    data(){
        return {
            address : "",
            quantity : 1,
            isLoggedIn : null,
            product : []
        }
    },
    mounted() {
        this.isLoggedIn = localStorage.getItem('myStore.jwt') != null
    },
    beforeMount() {
        axios.get(`/api/products/${this.pid}`).then(response => this.product = response.data)

        if (localStorage.getItem('myStore.jwt') != null) {
            this.user = JSON.parse(localStorage.getItem('myStore.user'))
            axios.defaults.headers.common['Content-Type'] = 'application/json'
            axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('myStore.jwt')
        }
    },
    methods : {
        login() {
            this.$router.push({name: 'login', params: {nextUrl: this.$route.fullPath}})
        },
        register() {
            this.$router.push({name: 'register', params: {nextUrl: this.$route.fullPath}})
        },
        placeOrder(e) {
            e.preventDefault()

            let address = this.address
            let product_id = this.product.id
            let quantity = this.quantity

            axios.post('api/orders/', {address, quantity, product_id})
                    .then(response => this.$router.push('/confirmation'))
        },
        checkUnits(e){
            if (this.quantity > this.product.units) {
                this.quantity = this.product.units
            }
        }
    }
}
</script>
<style scoped>
.small-text { font-size: 18px; }
.order-box { border: 1px solid #cccccc; padding: 10px 15px; }
.title { font-size: 36px; }
</style>

<p class="small-text text-muted float-left">$ {{product.price}}</p>

<p class="small-text text-muted float-right">Available Units: {{product.units}}</p>

<br>

<hr>

<label class="row"><span class="col-md-2 float-left">Quantity: </span><input type="number" name="units" min="1" :max="product.units" class="col-md-2 float-left" v-model="quantity" @change="checkUnits"></label>

</div>

<br>

<div>

<h2>You need to login to continue</h2>

<button class="col-md-4 btn btn-primary float-left" @click="login">Login</button>

<button class="col-md-4 btn btn-danger float-right" @click="register">Create an account</button>

</div>

<label for="address" class="col-md-3 col-form-label">Delivery Address</label>

</div>

<br>

<button class="col-md-4 btn btn-sm btn-success float-right" v-if="isLoggedIn" @click="placeOrder">Continue</button>

</div>

</template>

export default {

props : ['pid'],

data(){

return {

address : "",

quantity : 1,

isLoggedIn : null,

product : []

}

mounted() {

this.isLoggedIn = localStorage.getItem('myStore.jwt') != null

beforeMount() {

axios.get(`/api/products/${this.pid}`).then(response => this.product = response.data)

if (localStorage.getItem('myStore.jwt') != null) {

this.user = JSON.parse(localStorage.getItem('myStore.user'))

axios.defaults.headers.common['Content-Type'] = 'application/json'

axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('myStore.jwt')

}

methods : {

this.$router.push({name: 'login', params: {nextUrl: this.$route.fullPath}})

this.$router.push({name: 'register', params: {nextUrl: this.$route.fullPath}})

placeOrder(e) {

e.preventDefault()

let address = this.address

let product_id = this.product.id

let quantity = this.quantity

axios.post('api/orders/', {address, quantity, product_id})

.then(response => this.$router.push('/confirmation'))

checkUnits(e){

if (this.quantity > this.product.units) {

this.quantity = this.product.units

}

</script>

.small-text { font-size: 18px; }

.order-box { border: 1px solid #cccccc; padding: 10px 15px; }

.title { font-size: 36px; }

</style>

Above we defined the beforeMount method where we fetch product information. Then we have the mounted method where we check authentication status. In the methods property, we defined the checkUnits method that checks how many units the user wants to order, and then we define the placeOrder method that places the order.

Next, open the resources/js/components/Confirmation.vue file and paste the following code:

<template>
    <div>
        <div class="container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto">
            <h2>
                <span class="title"><strong>Thank You!</strong></span><br>
                <span class="medium-text">Your order has been placed.</span><br>
                <router-link :to="{name: 'userboard'}" class="small-link">
                    See your orders
                </router-link>
            </h2>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style scoped>
.medium-text { font-size: 36px; }
.small-link { font-size: 24px; text-decoration: underline; color: #777; }
.product-box { border: 1px solid #cccccc; padding: 10px 15px; }
.hero-section { height: 80vh; align-items: center; margin-top: -20px; margin-bottom: 20px; }
.title { font-size: 60px; }
</style>

<div>

<h2>

<span class="title"><strong>Thank You!</strong></span><br>

<span class="medium-text">Your order has been placed.</span><br>

<router-link :to="{name: 'userboard'}" class="small-link">

See your orders

</router-link>

</h2>

</div>

</template>

export default {}

</script>

.medium-text { font-size: 36px; }

.small-link { font-size: 24px; text-decoration: underline; color: #777; }

.product-box { border: 1px solid #cccccc; padding: 10px 15px; }

.hero-section { height: 80vh; align-items: center; margin-top: -20px; margin-bottom: 20px; }

.title { font-size: 60px; }

</style>

This component displays a simple thank you message and provides a link for the users to navigate to their dashboard to see the orders they have placed and the status of these orders. Let’s create the user dashboard next.

Creating the user dashboard
The user dashboard is where the users can see all their orders. Open the resources/js/components/UserBoard.vue file and paste in the following code for the template and style:

<template>
    <div>
        <div class="container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto">
            <h2 class="title">All your orders</h2>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <br>
                    <div class="row">
                        <div class="col-md-4 product-box" v-for="(order,index) in orders" @key="index">
                            <img :src="order.product.image" :alt="order.product.name">
                            <h5><span v-html="order.product.name"></span><br>
                                <span class="small-text text-muted">$ {{order.product.price}}</span>
                            </h5>
                            <hr>
                            <span class="small-text text-muted">Quantity: {{order.quantity}}
                                <span class="float-right">{{order.is_delivered == 1? "shipped!" : "not shipped"}}</span>
                            </span>
                            <br><br>
                            <p><strong>Delivery address:</strong> <br>{{order.address}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user : null,
            orders : []
        }
    },
    beforeMount() {
        this.user = JSON.parse(localStorage.getItem('myStore.user'))

        axios.defaults.headers.common['Content-Type'] = 'application/json'
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('myStore.jwt')

        axios.get(`api/users/${this.user.id}/orders`)
                .then(response => this.orders = response.data)
    }
}
</script>
<style scoped>
.small-text { font-size: 14px; }
.product-box { border: 1px solid #cccccc; padding: 10px 15px; }
.hero-section { background: #ababab; height: 20vh; align-items: center; margin-bottom: 20px; margin-top: -20px; }
.title { font-size: 60px; color: #ffffff; }
</style>

<div>

<h2 class="title">All your orders</h2>

</div>

<br>

<span class="small-text text-muted">$ {{order.product.price}}</span>

</h5>

<hr>

<span class="small-text text-muted">Quantity: {{order.quantity}}

<span class="float-right">{{order.is_delivered == 1? "shipped!" : "not shipped"}}</span>

</span>

<p><strong>Delivery address:</strong> <br>{{order.address}}</p>

</div>

</template>

export default {

data() {

return {

user : null,

orders : []

}

beforeMount() {

this.user = JSON.parse(localStorage.getItem('myStore.user'))

axios.defaults.headers.common['Content-Type'] = 'application/json'

axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('myStore.jwt')

axios.get(`api/users/${this.user.id}/orders`)

.then(response => this.orders = response.data)

}

</script>

.small-text { font-size: 14px; }

.product-box { border: 1px solid #cccccc; padding: 10px 15px; }

.hero-section { background: #ababab; height: 20vh; align-items: center; margin-bottom: 20px; margin-top: -20px; }

.title { font-size: 60px; color: #ffffff; }

</style>

In the code above, we fetch all the user’s orders before the component is mounted, then loop through them and display them on the page.

Creating the admin dashboard
The admin dashboard is where new products are added, existing products modified and orders are set as delivered.

For the admin board, we will use four different components, which we will mount based on the url a user is accessing. Let’s see that in action. Open the resources/js/components/Admin.vue file and paste in the following:

<template>
    <div>
        <div class="container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto">
            <h2 class="title">Admin Dashboard</h2>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <ul style="list-style-type:none">
                        <li class="active"><button class="btn" @click="setComponent('main')">Dashboard</button></li>
                        <li><button class="btn" @click="setComponent('orders')">Orders</button></li>
                        <li><button class="btn" @click="setComponent('products')">Products</button></li>
                        <li><button class="btn" @click="setComponent('users')">Users</button></li>
                    </ul>
                </div>
                <div class="col-md-9">
                    <component :is="activeComponent"></component>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Main from '../components/admin/Main'
import Users from '../components/admin/Users'
import Products from '../components/admin/Products'
import Orders from '../components/admin/Orders'

export default {
    data() {
        return {
            user: null,
            activeComponent: null
        }
    },
    components: {
        Main, Users, Products, Orders
    },
    beforeMount() {
        this.setComponent(this.$route.params.page)
        this.user = JSON.parse(localStorage.getItem('myStore.user'))
        axios.defaults.headers.common['Content-Type'] = 'application/json'
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('myStore.jwt')
    },
    methods: {
        setComponent(value) {
            switch(value) {
                case "users":
                    this.activeComponent = Users
                    this.$router.push({name: 'admin-pages', params: {page: 'users'}})
                    break;
                case "orders":
                    this.activeComponent = Orders
                    this.$router.push({name: 'admin-pages', params: {page: 'orders'}})
                    break;
                case "products":
                    this.activeComponent = Products
                    this.$router.push({name: 'admin-pages', params: {page: 'products'}})
                    break;
                default:
                    this.activeComponent = Main
                    this.$router.push({name: 'admin'})
                    break;
            }
        }
    }
}
</script>

<style scoped>
.hero-section { height: 20vh; background: #ababab; align-items: center; margin-bottom: 20px; margin-top: -20px; }
.title { font-size: 60px; color: #ffffff; }
</style>

<div>

<h2 class="title">Admin Dashboard</h2>

</div>

<li class="active"><button class="btn" @click="setComponent('main')">Dashboard</button></li>

<li><button class="btn" @click="setComponent('orders')">Orders</button></li>

<li><button class="btn" @click="setComponent('products')">Products</button></li>

<li><button class="btn" @click="setComponent('users')">Users</button></li>

</ul>

</div>

</div>

</template>

import Main from '../components/admin/Main'

import Users from '../components/admin/Users'

import Products from '../components/admin/Products'

import Orders from '../components/admin/Orders'

export default {

data() {

return {

user: null,

activeComponent: null

}

components: {

Main, Users, Products, Orders

beforeMount() {

this.setComponent(this.$route.params.page)

this.user = JSON.parse(localStorage.getItem('myStore.user'))

axios.defaults.headers.common['Content-Type'] = 'application/json'

axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('myStore.jwt')

methods: {

setComponent(value) {

switch(value) {

case "users":

this.activeComponent = Users

this.$router.push({name: 'admin-pages', params: {page: 'users'}})

break;

case "orders":

this.activeComponent = Orders

this.$router.push({name: 'admin-pages', params: {page: 'orders'}})

break;

case "products":

this.activeComponent = Products

this.$router.push({name: 'admin-pages', params: {page: 'products'}})

break;

default:

this.activeComponent = Main

this.$router.push({name: 'admin'})

break;

}

</script>

.hero-section { height: 20vh; background: #ababab; align-items: center; margin-bottom: 20px; margin-top: -20px; }

.title { font-size: 60px; color: #ffffff; }

</style>

In the code above, we import and register four components, which we have not yet created. They’ll be used as components inside Admin.vue parent component.

In our template, we defined the navigation for switching between the components. Each navigation link calls the setComponent method and then passes a value to it. The setComponent method just sets the component using a switch statement.

Let’s create the first component for the Admin component. Create the Main.vue file in resources/js/components/admin directory and paste the following into the file:

<template>
    <div class="row">
        <div class="col-md-4 product-box d-flex align-content-center justify-content-center flex-wrap big-text">
            <a href='/admin/orders'>Orders ({{orders.length}})</a>
        </div>
        <hr>
        <div class="col-md-4 product-box d-flex align-content-center justify-content-center flex-wrap big-text">
            <a href='/admin/products'>Products ({{products.length}})</a>
        </div>
        <div class="col-md-4 product-box d-flex align-content-center justify-content-center flex-wrap big-text">
            <a href='/admin/users'>Users ({{users.length}})</a>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user : null,
            orders : [],
            products : [],
            users : []
        }
    },
    mounted() {
        axios.get('/api/users/').then(response => this.users = response.data)
        axios.get('/api/products/').then(response => this.products = response.data)
        axios.get('/api/orders/').then(response => this.orders = response.data)
    }
}
</script>

<style scoped>
.big-text { font-size: 28px; }
.product-box { border: 1px solid #cccccc; padding: 10px 15px; height: 20vh }
</style>

<a href='/admin/orders'>Orders ({{orders.length}})</a>

</div>

<hr>

<a href='/admin/products'>Products ({{products.length}})</a>

</div>

<a href='/admin/users'>Users ({{users.length}})</a>

</div>

</template>

export default {

data() {

return {

user : null,

orders : [],

products : [],

users : []

}

mounted() {

axios.get('/api/users/').then(response => this.users = response.data)

axios.get('/api/products/').then(response => this.products = response.data)

axios.get('/api/orders/').then(response => this.orders = response.data)

}

</script>

.big-text { font-size: 28px; }

.product-box { border: 1px solid #cccccc; padding: 10px 15px; height: 20vh }

</style>

In the code above we are calling the APIs for users, orders and products, and returning their data.

Create the Orders.vue file in resources/js/components/admin and paste the following into the file:

<template>
    <div>
        <table class="table table-responsive table-striped">
            <thead>
                <tr>
                    <td></td>
                    <td>Product</td>
                    <td>Quantity</td>
                    <td>Cost</td>
                    <td>Delivery Address</td>
                    <td>is Delivered?</td>
                    <td>Action</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(order,index) in orders" @key="index">
                    <td>{{index+1}}</td>
                    <td v-html="order.product.name"></td>
                    <td>{{order.quantity}}</td>
                    <td>{{order.quantity * order.product.price}}</td>
                    <td>{{order.address}}</td>
                    <td>{{order.is_delivered == 1? "Yes" : "No"}}</td>
                    <td v-if="order.is_delivered == 0"><button class="btn btn-success" @click="deliver(index)">Deliver</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orders : []
        }
    },
    beforeMount(){
        axios.get('/api/orders/').then(response => this.orders = response.data)
    },
    methods: {
        deliver(index) {
            let order = this.orders[index]
            axios.patch(`/api/orders/${order.id}/deliver`).then(response => {
                this.orders[index].is_delivered = 1
                this.$forceUpdate()
            })
        }
    }
}
</script>

<div>

<thead>

<tr>

<td>Product</td>

<td>Quantity</td>

<td>Delivery Address</td>

<td>is Delivered?</td>

<td>Action</td>

</tr>

</thead>

<tbody>

<td>{{index+1}}</td>

<td>{{order.quantity}}</td>

<td>{{order.quantity * order.product.price}}</td>

<td>{{order.address}}</td>

<td>{{order.is_delivered == 1? "Yes" : "No"}}</td>

<td v-if="order.is_delivered == 0"><button class="btn btn-success" @click="deliver(index)">Deliver</button></td>

</tr>

</tbody>

</table>

</div>

</template>

export default {

data() {

return {

orders : []

}

beforeMount(){

axios.get('/api/orders/').then(response => this.orders = response.data)

methods: {

deliver(index) {

let order = this.orders[index]

axios.patch(`/api/orders/${order.id}/deliver`).then(response => {

this.orders[index].is_delivered = 1

this.$forceUpdate()

})

}

</script>

In beforeMount we fetch all the orders placed before the component is rendered.

When the Deliver button is clicked, the deliver method is fired. We call the API for delivering orders. To get the change to reflect on the page instantly, we call [$forceUpdate](https://vuejs.org/v2/api/#vm-forceUpdate).

Create the Users.vue file in resources/js/components/admin and paste in the following code:

<template>
    <div>
        <table class="table table-responsive table-striped">
            <thead>
                <tr>
                    <td></td>
                    <td>Name</td>
                    <td>Email</td>
                    <td>Joined</td>
                    <td>Total Orders</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user,index) in users" @key="index">
                    <td>{{index+1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.created_at}}</td>
                    <td>{{user.orders.length}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            users : []
        }
    },
    beforeMount() {
        axios.get('/api/users/').then(response => this.users = response.data)
    }
}
</script>

<div>

<thead>

<tr>

<td>Email</td>

<td>Joined</td>

<td>Total Orders</td>

</tr>

</thead>

<tbody>

<td>{{index+1}}</td>

<td>{{user.email}}</td>

<td>{{user.created_at}}</td>

<td>{{user.orders.length}}</td>

</tr>

</tbody>

</table>

</div>

</template>

export default {

data() {

return {

users : []

}

beforeMount() {

axios.get('/api/users/').then(response => this.users = response.data)

}

</script>

Above we fetch all the user data and then display it on the page.

Next, create the Products.vue file in resources/js/components/admin and paste the following template code:

<template>
    <div>
        <table class="table table-responsive table-striped">
            <thead>
                <tr>
                    <td></td>
                    <td>Product</td>
                    <td>Units</td>
                    <td>Price</td>
                    <td>Description</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(product,index) in products" @key="index" @dblclick="editingItem = product">
                    <td>{{index+1}}</td>
                    <td v-html="product.name"></td>
                    <td v-model="product.units">{{product.units}}</td>
                    <td v-model="product.price">{{product.price}}</td>
                    <td v-model="product.price">{{product.description}}</td>
                </tr>
            </tbody>
        </table>
        <modal @close="endEditing" :product="editingItem" v-show="editingItem != null"></modal>
        <modal @close="addProduct"  :product="addingProduct" v-show="addingProduct != null"></modal>
        <br>
        <button class="btn btn-primary" @click="newProduct">Add New Product</button>
    </div>
</template>
<script>
import Modal from './ProductModal'

export default {
    data() {
        return {
            products: [],
            editingItem: null,
            addingProduct: null
        }
    },
    components: {Modal},
    beforeMount() {
        axios.get('/api/products/').then(response => this.products = response.data)
    },
    methods: {
        newProduct() {
            this.addingProduct = {
                name: null,
                units: null,
                price: null,
                image: null,
                description: null,
            }
        },
        endEditing(product) {
            this.editingItem = null

            let index = this.products.indexOf(product)
            let name = product.name
            let units = product.units
            let price = product.price
            let description = product.description

            axios.put(`/api/products/${product.id}`, {name, units, price, description})
            .then(response => this.products[index] = product)
        },
        addProduct(product) {
            this.addingProduct = null

            let name = product.name
            let units = product.units
            let price = product.price
            let description = product.description
            let image = product.image 

            axios.post('/api/products/', {name, units, price, description, image})
            .then(response => this.products.push(product))
        }
    }
}
</script>

<div>

<thead>

<tr>

<td>Product</td>

<td>Units</td>

<td>Price</td>

<td>Description</td>

</tr>

</thead>

<tbody>

<td>{{index+1}}</td>

<td v-model="product.units">{{product.units}}</td>

<td v-model="product.price">{{product.price}}</td>

<td v-model="product.price">{{product.description}}</td>

</tr>

</tbody>

</table>

<br>

<button class="btn btn-primary" @click="newProduct">Add New Product</button>

</div>

</template>

import Modal from './ProductModal'

export default {

data() {

return {

products: [],

editingItem: null,

addingProduct: null

}

components: {Modal},

beforeMount() {

axios.get('/api/products/').then(response => this.products = response.data)

methods: {

newProduct() {

this.addingProduct = {

units: null,

price: null,

image: null,

description: null,

}

endEditing(product) {

this.editingItem = null

let index = this.products.indexOf(product)

let name = product.name

let units = product.units

let price = product.price

let description = product.description

axios.put(`/api/products/${product.id}`, {name, units, price, description})

.then(response => this.products[index] = product)

addProduct(product) {

this.addingProduct = null

let name = product.name

let units = product.units

let price = product.price

let description = product.description

let image = product.image

axios.post('/api/products/', {name, units, price, description, image})

.then(response => this.products.push(product))

}

</script>

In the methods property we defined the following methods:

newProduct() – called when we want to initiate a new local product object.
endEditing() – called when we are done editing a product.
addProduct() – called when we are want to add a new product.
We imported a ProductModal component, which we will create next. The modal will be used to edit an existing or create a new product. Double clicking on a product listed fires up the modal for editing the product.

Create the ProductModal.vue file in resources/js/components/admin and paste in the following template and style code:

<template>
    <div class="modal-mask">
        <div class="modal-wrapper">
            <div class="modal-container">
                <div class="modal-header">
                    <slot name="header" v-html="data.name"></slot>
                </div>
                <div class="modal-body">
                    <slot name="body">
                        Name: <input type="text" v-model="data.name">
                        Units: <input type="text" v-model="data.units">
                        Price: <input type="text" v-model="data.price">
                        <textarea v-model="data.description" placeholder="description"></textarea>
                        <span >
                            <img :src="data.image" v-show="data.image != null">
                            <input type="file" id="file" @change="attachFile">
                        </span>
                    </slot>
                </div>
                <div class="modal-footer">
                    <slot name="footer">
                        <button class="modal-default-button" @click="uploadFile">
                            Finish
                        </button>
                    </slot>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['product'],
    data() {
        return {
            attachment: null
        }
    },
    computed: {
        data: function() {
            if (this.product != null) {
                return this.product
            }
            return {
                name: "",
                units: "",
                price: "",
                description: "",
                image: false
            }
        }
    },
    methods: {
        attachFile(event) {
            this.attachment = event.target.files[0];
        },
        uploadFile(event) {
            if (this.attachment != null) {
                var formData = new FormData();
                formData.append("image", this.attachment)
                let headers = {'Content-Type': 'multipart/form-data'}
                axios.post('/api/upload-file', formData, {headers}).then(response => {
                    this.product.image = response.data
                    this.$emit('close', this.product)
                })
            } else {
                this.$emit('close', this.product)
            }
        }
    }
}
</script>
<style scoped>
.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}
.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}
.modal-container {
    width: 300px;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
    margin-top: 0;
    color: #42b983;
}
.modal-body {
    margin: 20px 0;
}
.modal-default-button {
    float: right;
}
.modal-enter {
    opacity: 0;
}
.modal-leave-active {
    opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

</div>

Name: <input type="text" v-model="data.name">

Units: <input type="text" v-model="data.units">

Price: <input type="text" v-model="data.price">

<span >

</span>

</slot>

</div>

Finish

</button>

</slot>

</div>

</template>

export default {

props: ['product'],

data() {

return {

attachment: null

}

computed: {

data: function() {

if (this.product != null) {

return this.product

}

return {

units: "",

price: "",

description: "",

image: false

}

methods: {

attachFile(event) {

this.attachment = event.target.files[0];

uploadFile(event) {

if (this.attachment != null) {

var formData = new FormData();

formData.append("image", this.attachment)

let headers = {'Content-Type': 'multipart/form-data'}

axios.post('/api/upload-file', formData, {headers}).then(response => {

this.product.image = response.data

this.$emit('close', this.product)

})

} else {

this.$emit('close', this.product)

}

</script>

.modal-mask {

position: fixed;

z-index: 9998;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, .5);

display: table;

transition: opacity .3s ease;

}

.modal-wrapper {

display: table-cell;

vertical-align: middle;

}

.modal-container {

width: 300px;

margin: 0px auto;

padding: 20px 30px;

background-color: #fff;

border-radius: 2px;

box-shadow: 0 2px 8px rgba(0, 0, 0, .33);

transition: all .3s ease;

font-family: Helvetica, Arial, sans-serif;

}

.modal-header h3 {

margin-top: 0;

color: #42b983;

}

.modal-body {

margin: 20px 0;

}

.modal-default-button {

float: right;

}

.modal-enter {

opacity: 0;

}

.modal-leave-active {

opacity: 0;

}

.modal-enter .modal-container,

.modal-leave-active .modal-container {

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

</style>

When the modal receives a product’s data, it pre-fills each field with the data. When we attach an image and submit the modal’s form, it is uploaded and the url for the image is returned to us.

We update the image attribute of the product with the url, then emit a close event and return the product with it. If no image is attached, we emit a close event and return the product data along with it.

This modal component is an example provided in Vue documentation here

Payments
There are many payment options for e-commerce platforms. You choose depending on your needs and what is available in your country. Many popular payment processors like Stripe have excellent guides on integrating into a JavaScript or PHP application which you can use. This tutorial won’t cover that though, you can take it as an exercise for practise.

Building our application
We are done building our application. The next thing to do will be to compile our Vue application and serve our Laravel backend. Run the command to build the application.

Admin user:
email: admin@admin.com
name: Admin
password: secret

Create/Register a new user:
email: advcha@yahoo.com
name: Satria
password: satria

Leave a Reply Cancel reply