How to start eCommerce website in Laravel? – Part 1

saurav pathak

5 September 2024

In this article, we are going to dive deep into the steps required to create your laravel eCommerce website.

Technology has been at the helm of this buzzword and the urge to improve services and provide greater satisfaction.

Developers around the world has been eyeing on PHP, JAVA, Python, MEAN, Ruby On Rails etc to ease the work and providing a better solution.

Laravel, an open-source web framework launched by Taylor Otwell in 2011.

Popularized the MVC architecture with its elegant syntax and robust tools for web application development.

Laravel was introduced with the aim of simplifying web development.

Focused on easing common tasks like routing, authentication, sessions, and caching.

In this series, we are going to discuss how you can create an eCommerce application using Laravel as a web framework.

With that, you can use any javascript framework for building user interfaces like Vue.js, React, Node.js, Angular JS or Backbone.js.

We will be dividing the series into two parts. Do let us know in the comments regarding your views.

Prior Requirements

1. Set up your development environment.

2. Laravel must be installed on your machine.

3. Knowledge of PHP language

4. Knowledge of the command line.

5. Understanding of JavaScript and the Vue.js framework.

Basic eCommerce Feature

Let us list down some basic features that are required in an eCommerce application.

1. A home page to list all the products

2. A product description page.

3. A checkout page to provide address details and payment information.

4. A dashboard for merchants to add/delete/update product information and check sales, order, and shipment details.

5. A customer dashboard to check the product purchased and shipment status.

Define User Roles

Next, we need to define the user roles or parties that will be there in an eCommerce system. Two parties are involved at the granular level:

Admin: The owner of the store
Buyer: The customers who purchase goods from the store.

Store Details

We need to define the components of the various parts of the store.

Apart from the User, there are products that are stored. Once they are ordered, you need to keep track of their inventory and delivery details.

We can break down the components as below:

Entity	Fields
User	username, password, role
Product	name, description, price, quantity, image
Order	product, user, stock, delivery_status, address

Creating controllers for operations

Laravel gives privilege you make controllers and use them while defining a route to any URL.

Based on the operation, you can define a controller for each.

Operation	Controller
Login	UserController
Register	UserController
User profile	UserController
View product listing	ProductController
View a single product	ProductController
Edit a product	ProductController
Add a new product	ProductController
Order product	OrderController
View all orders	OrderController
View a single order information	OrderController
Deliver an order	OrderController

Creating a Laravel Application

To create a new application, run the below command in the Laravel CLI

$ laravel new bagisto

1	$ laravel new bagisto

Move to the new directory created. This will be the root directory from where you need to run the other Laravel-related commands.

Setting Database for the application

Here we are going to use MySQL as a relational database management system.

Create a database.

Next, open your .env file and enter the following

  DB_CONNECTION=mysql
  DB_DATABASE=homestead
  DB_USERNAME=username
  DB_PASSWORD=password

DB_CONNECTION=mysql

DB_DATABASE=homestead

DB_USERNAME=username

DB_PASSWORD=password

Run the migrations to create the database tables for our application and seed it:

$ php artisan migrate --seed

1	$ php artisan migrate --seed

Creating a Model for Application

Model in MVC architecture holds business logic that allows you to interact with the database.

It provides the use of functions to perform a basic operation with your database tables.

Laravel installation provides User Model already created. Here we will create models for Product and Order.

 $ php artisan make:model Product

1	$ php artisan make:model Product

 $ php artisan make:model Order

1	$ php artisan make:model Order

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

<?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);
        }
    }

<?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);

}

Laravel introduce SoftDeletes in models that way we can’t remove from the database.

However, if remove a record from the front side then it doesn’t show record on front.

So we can retrieve the record from the database if we remove the wrong row.

$fillable is an array that contains all those fields of the table and can be filled using mass-assignment

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

<?php
    namespace App;

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

    class Product extends Model
    {
        use SoftDeletes;

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

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

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

use Illuminate\Database\Eloquent\SoftDeletes;

class Product extends Model

{

use SoftDeletes;

protected $fillable = [

'name', 'price', 'quantity', 'description', 'image'

];

public function orders(){

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

}

This is similar to the User model and also has an order method to establish a relationship with Order.

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

<?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');
        }

    }

<?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');

}

This model represents similar to the other except the relationship belongsTo which show order is related to which user and for what product.

Defining Migrations

Migrations are like version control of your database schema in Laravel.

It allows you to easily create and manage the database.

Like a git, you can easily share your database schema with your team and allow them to manually add the column to the schema.

The Laravel Schema facade provides support for creating and manipulating tables in the database systems.

To create a migration, use the below command

php artisan make:migration create_users_table

1	php artisan make:migration create_users_table

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

<?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');
        }
    }

<?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');

}

Here we have defined the columns in the table along with the attributes.

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

 <?php

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

    class CreateProductsTable extends Migration
    {
        public function up()
        {
            Schema::create('products', function (Blueprint $table) {
                $table->increments('id');
                $table->string('name');
                $table->string('description');
                $table->unsignedInteger('quantity')->default(0);
                $table->double('price');
                $table->string('image');
                $table->timestamps();
                $table->softDeletes();
            });
        }

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration

{

public function up()

{

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

$table->increments('id');

$table->string('name');

$table->string('description');

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

$table->double('price');

$table->string('image');

$table->timestamps();

$table->softDeletes();

});

}

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:

 <?php

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

    class CreateOrdersTable extends Migration
    {
        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();
            });
        }

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

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateOrdersTable extends Migration

{

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();

});

}

public function down()

{

Schema::dropIfExists('orders');

}

Creating Seeders for Application

Laravel created seed classes to push test data into your database.

This allows testing to be quicker and easier. Below we are going to make seed classes for User and Product and provide test data.

Create a seeder class by running the command below:

$ php artisan make:seed UsersTableSeeder

1	$ php artisan make:seed UsersTableSeeder

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

    <?php

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

    class UsersTableSeeder extends Seeder
    {
        public function run()
        {
            $user = new User;
            $user->name = "Admin";
            $user->email = "admin@bagisto.com";
            $user->password = bcrypt('bagisto');
            $user->is_admin = true;
            $user->save();
        }
    }

<?php

use App\User;

use Illuminate\Database\Seeder;

class UsersTableSeeder extends Seeder

{

public function run()

{

$user = new User;

$user->name = "Admin";

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

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

$user->is_admin = true;

$user->save();

}

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

Make another seeder class for our products table:

 $ php artisan make:seed ProductsTableSeeder

1	$ php artisan make:seed ProductsTableSeeder

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

 <?php

    use Illuminate\Database\Seeder;

    class ProductsTableSeeder extends Seeder
    {
        public function run()
        {
            $products = [
                [
                    'name' => "Red & Navy Checked Slim Formal Shirt",
                    'description' => 'Red and navy checked formal shirt, has a button-down collar, a full button placket, long sleeves, a curved hemline.',
                    'quantity' => 21,
                    'price' => 200.10,
                    'image' => 'https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/1038959/2015/12/7/11449479796511-INVICTUS-Red--Navy-Checked-Slim-Formal-Shirt-4621449479796242-3.jpg',
                    'created_at' => new DateTime,
                    'updated_at' => null,
                ],
                [
                    'name' => "Men Red Classic Slim Fit Solid Formal Shirt",
                    'description' => 'Red solid formal shirt, has a slim collar, button placket, 1 pocket, long sleeves, curved hem',
                    'quantity' => 400,
                    'price' => 1600.21,
                    'image' => 'https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/3117516/2018/3/10/11520666535008-JAINISH-Men-Red-Classic-Slim-Fit-Solid-Formal-Shirt-2801520666534871-3.jpg',
                    'created_at' => new DateTime,
                    'updated_at' => null,
                ],
                [
                    'name' => "White & Red Checked Slim Formal Shirt",
                    'description' => 'White, red and blue checked formal shirt, has a contrast spread collar, a full button placket, long sleeves, a curved hemline',
                    'quantity' => 37,
                    'price' => 378.00,
                    'image' => 'https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/1038966/2015/12/8/11449575702385-INVICTUS-White--Red-Checked-Slim-Formal-Shirt-5221449575701961-1.jpg',
                    'created_at' => new DateTime,
                    'updated_at' => null,
                ],
            ];

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

<?php

use Illuminate\Database\Seeder;

class ProductsTableSeeder extends Seeder

{

public function run()

{

$products = [

[

'name' => "Red & Navy Checked Slim Formal Shirt",

'description' => 'Red and navy checked formal shirt, has a button-down collar, a full button placket, long sleeves, a curved hemline.',

'quantity' => 21,

'price' => 200.10,

'image' => 'https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/1038959/2015/12/7/11449479796511-INVICTUS-Red--Navy-Checked-Slim-Formal-Shirt-4621449479796242-3.jpg',

'created_at' => new DateTime,

'updated_at' => null,

[

'name' => "Men Red Classic Slim Fit Solid Formal Shirt",

'description' => 'Red solid formal shirt, has a slim collar, button placket, 1 pocket, long sleeves, curved hem',

'quantity' => 400,

'price' => 1600.21,

'image' => 'https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/3117516/2018/3/10/11520666535008-JAINISH-Men-Red-Classic-Slim-Fit-Solid-Formal-Shirt-2801520666534871-3.jpg',

'created_at' => new DateTime,

'updated_at' => null,

[

'name' => "White & Red Checked Slim Formal Shirt",

'description' => 'White, red and blue checked formal shirt, has a contrast spread collar, a full button placket, long sleeves, a curved hemline',

'quantity' => 37,

'price' => 378.00,

'image' => 'https://assets.myntassets.com/h_1440,q_100,w_1080/v1/assets/images/1038966/2015/12/8/11449575702385-INVICTUS-White--Red-Checked-Slim-Formal-Shirt-5221449575701961-1.jpg',

'created_at' => new DateTime,

'updated_at' => null,

];

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

}

After that, you need to edit the database/seeds/DatabaseSeeder.php, which actually invokes the seeders:

 $ php artisan make:model Product

1	$ php artisan make:model Product

When we execute the command to seed our database the DatabaseSeeder class is called.

Further, it calls the run which in turn class the seeder classes we had set up to run.

That’s all in the first part if this series where we have created the database, defined models and added migrations.

Let us know in comments on your thoughts regarding the article and stay tuned for the second part of the article.